/* Base compartida de los cuatro sitios de Drakorp Group.
   Sin dependencias, sin build, fuentes locales. El tema (colores, ritmo) lo
   pone cada direccion visual encima; aqui solo va lo estructural. */

@import url("sans.css");
@import url("serif.css");

/* ---------- Fichas de diseno ---------- */
:root {
  --rojo: #dc2626;          /* FIJO por decision de Mario */
  --rojo-hover: #b91c1c;
  --aviso: #8a6d1f;         /* ambar: los huecos NO compiten con el rojo del CTA */
  --radio: 2px;             /* casi recto: menos "plantilla", mas impreso */
  --medida: 34rem;          /* ancho de lectura comodo */
  --ancho: 72rem;
  --s1: .5rem;  --s2: 1rem;  --s3: 1.5rem;
  --s4: 2.5rem; --s5: 4rem;  --s6: 6.5rem;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Tipografia ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.1; letter-spacing: -.01em; margin: 0 0 var(--s2); }
h1 { font-size: clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem); }
h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
p  { margin: 0 0 var(--s2); max-width: var(--medida); }
a  { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--rojo); }
:focus-visible { outline: 2px solid var(--rojo); outline-offset: 3px; }

.sobre { font-family: var(--sans); font-size: .78rem; font-weight: 600;
         letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); margin: 0 0 var(--s2); }
.guia  { color: var(--apagado); }

/* ---------- Estructura ---------- */
.env { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
section { padding-block: var(--s6); }
section + section { border-top: 1px solid var(--linea); }

.rejilla { display: grid; gap: var(--s4); }
@media (min-width: 46rem) {
  .rejilla-2 { grid-template-columns: repeat(2, 1fr); }
  .rejilla-3 { grid-template-columns: repeat(3, 1fr); }
  .rejilla-4 { grid-template-columns: repeat(4, 1fr); }
  .partida  { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s5); }
}

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 50; background: var(--fondo);
            border-bottom: 1px solid var(--linea); }
.cabecera .env { display: flex; align-items: center; gap: var(--s3); min-height: 4rem; }
.marca { font-family: var(--serif); font-size: 1.3rem; text-decoration: none; margin-right: auto; }
.marca b { color: var(--rojo); font-weight: 400; }
.nav { display: flex; gap: var(--s3); flex-wrap: wrap; font-size: .92rem; }
.nav a { text-decoration: none; white-space: nowrap; }
.nav a[aria-current="page"] { color: var(--rojo); }

/* En celular NO se esconde la navegacion. Antes se ocultaba y el sitio entero
   se navegaba a puro scroll: el encabezado movil quedaba con la marca y nada
   mas (lo cazo el revisor independiente). Ahora es una tira que se desliza. */
@media (max-width: 45.99rem) {
  .cabecera .env { flex-wrap: wrap; min-height: 0; padding-block: .7rem; row-gap: .5rem; }
  .marca { margin-right: 0; }
  .nav { width: 100%; gap: var(--s2); font-size: .85rem; flex-wrap: nowrap;
         overflow-x: auto; -webkit-overflow-scrolling: touch;
         scrollbar-width: none; padding-bottom: .15rem; }
  .nav::-webkit-scrollbar { display: none; }
  /* Botones a ancho completo: mejor area de toque (injertado de la direccion B) */
  .acciones { flex-direction: column; align-items: stretch; }
  .acciones .btn { justify-content: center; }
}

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.4rem;
       border: 1px solid var(--rojo); border-radius: var(--radio);
       background: var(--rojo); color: #fff; text-decoration: none;
       font-weight: 600; font-size: .95rem; transition: background .15s ease; }
.btn:hover { background: var(--rojo-hover); color: #fff; }
.btn.hueco { background: transparent; color: var(--tinta); border-color: var(--linea); }
.btn.hueco:hover { border-color: var(--rojo); color: var(--rojo); background: transparent; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }

/* ---------- Tarjetas ---------- */
.tarjeta { border: 1px solid var(--linea); border-radius: var(--radio);
           padding: var(--s3); background: var(--fondo-2); }
.tarjeta h3 { margin-bottom: var(--s1); }
.tarjeta p:last-child { margin-bottom: 0; }

/* ---------- Prueba: el hueco se VE, no se disimula ---------- */
.cifra { font-family: var(--serif); font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); line-height: 1; display: block; }
.cifra + .guia { font-size: .9rem; }
/* Los huecos NO van en el rojo de marca. Razon del revisor independiente:
   con seis avisos punteados, lo mas rojo de la pagina eran los huecos y le
   ganaban en presencia al unico boton. El rojo tiene que seguir significando
   "aqui se hace clic". */
[data-sin-dato] { position: relative; }
.sin-dato { display: inline-block; font-family: var(--sans); font-size: .72rem; font-weight: 600;
            letter-spacing: .08em; text-transform: uppercase; color: var(--aviso);
            border: 1px dashed var(--aviso); border-radius: var(--radio);
            padding: .15rem .45rem; vertical-align: middle; }
/* Nunca dentro de un boton relleno: ahi era invisible (rojo sobre rojo) y el
   CTA se veia mal maquetado. Si aparece, se pinta legible. */
.btn .sin-dato { color: #fff; border-color: rgba(255,255,255,.7); }

/* Aviso al pie de un boton, que es donde deben ir: se lee y no rompe el CTA */
.nota-canal { display: block; font-size: .78rem; color: var(--aviso); margin-top: .35rem; }

/* ---------- Imagenes ---------- */
img { max-width: 100%; height: auto; display: block; border-radius: var(--radio); }

/* ---------- Hueco de obra: se RESERVA y se VE ----------
   El revisor independiente lo puso como el defecto mas caro: cero fotografia
   en un sitio que vende branding, eventos y bolsas fisicas. Omitir el sitio de
   la foto es la unica clase de hueco que el cliente no ve y nosotros si
   pagamos. Asi que se reserva el espacio y se marca. */
/* minmax(0,1fr) y no 1fr: con 1fr la columna no puede encoger por debajo del
   ancho minimo de su contenido, y la etiqueta de hueco (193px) empujaba la
   rejilla a 454px dentro de una pantalla de 390 -> barra horizontal. Cazado
   midiendo que elemento desbordaba, no adivinando. */
.obra { display: grid; gap: var(--s2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 60rem) { .obra.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pieza { aspect-ratio: 4 / 3; border: 1px dashed var(--aviso); border-radius: var(--radio);
         display: grid; place-content: center; text-align: center; gap: .4rem;
         padding: var(--s2); background: var(--fondo-2); min-width: 0; overflow: hidden; }
.pieza span { font-size: .8rem; color: var(--apagado); overflow-wrap: anywhere; }
.pieza .sin-dato { white-space: normal; letter-spacing: .04em; font-size: .66rem;
                   max-width: 100%; overflow-wrap: anywhere; }
.pieza img { width: 100%; height: 100%; object-fit: cover; }
.pieza:has(img) { border: 1px solid var(--linea); padding: 0; }

/* ---------- Tablas y bloques anchos: nunca desbordan la pagina ---------- */
.ancho-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Pie y sello de la casa ---------- */
.pie { border-top: 1px solid var(--linea); padding-block: var(--s5) var(--s4); font-size: .9rem; }
.pie .rejilla { gap: var(--s3); }
.pie a { color: var(--apagado); }
.sello { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem;
         color: var(--apagado); text-decoration: none; border: 1px solid var(--linea);
         border-radius: 999px; padding: .3rem .8rem; }
.sello:hover { border-color: var(--rojo); color: var(--rojo); }
.sello i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--rojo); display: inline-block; }

/* ---------- Preguntas ---------- */
.pregunta { border-bottom: 1px solid var(--linea); padding-block: var(--s2); }
.pregunta summary { cursor: pointer; font-weight: 600; list-style: none;
                    padding-right: 1.5rem; position: relative; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "+"; position: absolute; right: 0;
                           color: var(--rojo); font-weight: 400; font-size: 1.3rem; line-height: 1; }
.pregunta[open] summary::after { content: "\2212"; }
.pregunta summary:hover { color: var(--rojo); }
.pregunta p { margin-top: var(--s2); margin-bottom: 0; }

/* ---------- Saltar al contenido ---------- */
.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: var(--s2); top: var(--s2); z-index: 100; background: var(--rojo);
                color: #fff; padding: .6rem 1rem; border-radius: var(--radio); }