/* Piezas compartidas por los tres decks.
   Lo que viva aquí se actualiza en /presentacion-completa/, /presentacion-hablada/ y /deck-lab/ a la vez.
   El maquetado propio de cada deck NO va aquí: sólo lo que de verdad es común. */

/* --- textura propia de fondo --- */
.s .tex{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
/* el lienzo va detrás con z-index:-1 y la lámina aísla su contexto.
   Antes forzaba position:relative en todos los hijos, y eso rompía
   los rótulos que van posicionados. */
.s.contex{isolation:isolate}

/* --- la marca de pincel como ELEMENTO, no como tapiz ---
   Un cúmulo de anillos grande, fuera de centro y sangrando por un borde.
   Se lee como una pieza puesta en la lámina, no como fondo. */
.s .grafico{position:absolute;z-index:-1;pointer-events:none}
.s .grafico.der{right:-8%;top:-14%;width:62%;height:128%}
.s .grafico.izq{left:-14%;bottom:-18%;width:58%;height:120%}
.s .grafico.pie{left:100px;bottom:-26%;width:46%;height:86%}
.s.congraf{isolation:isolate}

/* --- MAREA: el teal con brillo y la textura encima ---
   Es la combinación que eligió Lili. Se pide con la clase .marea y ya trae
   el brillo, el color de texto y el lienzo; no hay que recordar la receta. */
.s.marea{color:var(--color-papel);background:
  radial-gradient(120% 90% at 82% 4%, color-mix(in oklch, var(--d-hielo) 44%, transparent) 0%, transparent 58%),
  radial-gradient(95% 78% at 8% 96%, color-mix(in oklch, var(--pal-d-fondo) 38%, transparent) 0%, transparent 62%),
  var(--pal-d-luz-2)}
.s.marea .sub,.s.marea .parr,.s.marea .nota{color:color-mix(in oklch,var(--color-papel) 84%,transparent)}
.s.marea .lista div,.s.marea .dos div{border-color:color-mix(in oklch,var(--color-papel) 30%,transparent)}

/* --- láminas de color pleno --- */
.s.bosque{background:var(--d-sombra);color:var(--color-papel)}
.s.bosque .sub,.s.bosque .parr{
  color:color-mix(in oklch,var(--color-papel) 82%,transparent)}

/* --- tarjetas de los tres planos (patrón Tayá, cuadradas) --- */
.planos3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;width:100%;max-width:1400px}
.pc{position:relative;aspect-ratio:4/var(--pc-alto);   /* el alto lo fija la proporción, así que cambia con la talla */
  overflow:hidden;display:flex;flex-direction:column;
  justify-content:space-between;padding:34px;color:var(--color-papel)}
.pc:nth-child(2){margin-top:var(--pc-paso)}
.pc:nth-child(3){margin-top:calc(var(--pc-paso) * -0.4)}
.pc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.pc .v{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(6,0,79,.45) 0%,rgba(6,0,79,.14) 42%,rgba(6,0,79,.78) 100%)}
.pc h4{position:relative;z-index:2;font-family:var(--font-display);font-weight:var(--peso-display);
  font-size:var(--t-d1);line-height:var(--i-d1);letter-spacing:-.028em;margin:0}
/* El subtítulo de la tarjeta: nombra el plano en el lenguaje de la
   clienta («lo que se dice») debajo del nombre de la marca («el
   mensaje»). Va en mono y chico, para que se lea como etiqueta y no
   compita con el titular de la tarjeta. */
.pc .st{position:relative;z-index:2;display:block;margin-top:calc(var(--u) * .5);
  font-family:var(--font-mono);font-size:var(--t-pie);letter-spacing:.08em;
  text-transform:lowercase;color:color-mix(in oklch,var(--color-papel) 72%,transparent)}
.pc .ab{position:relative;z-index:2}
/* la tarjeta es un objeto chico: ahí manda el tamaño de pie, no el de
   cuerpo, o el párrafo se come la imagen */
.pc p{font-family:var(--font-texto);font-weight:var(--peso-texto);font-size:var(--t-pie);
  line-height:var(--i-pie);margin:0 0 var(--u);text-wrap:pretty}
.pc .o{width:22px;height:22px;border:2px solid color-mix(in oklch,var(--color-papel) 70%,transparent);
  border-radius:50%;display:block}

/* ═══ ESCALA · los siete tamaños de tokens.css, aplicados ═══
   Antes había quince tamaños en /presentacion-completa/ y treinta y dos en /deck-lab/,
   cada uno elegido a ojo. Ahora el titular sólo puede medir una de siete
   cosas, y el motor escoge cuál según lo que quepa en su campo. */
/* El tracking va con el TAMAÑO, no con el deck: entre más grande, más
   cerrado. Antes cada deck ponía el suyo en .l (-.028, -.03, -.035) y la
   misma palabra al mismo tamaño medía distinto en cada presentación. */
.l.d5  {font-size:var(--t-d5);  line-height:var(--i-d5);  letter-spacing:-.032em}
.l.d4  {font-size:var(--t-d4);  line-height:var(--i-d4);  letter-spacing:-.030em}
.l.d3  {font-size:var(--t-d3);  line-height:var(--i-d3);  letter-spacing:-.028em}
.l.d2  {font-size:var(--t-d2);  line-height:var(--i-d2);  letter-spacing:-.026em}
.l.d1  {font-size:var(--t-d1);  line-height:var(--i-d1);  letter-spacing:-.024em}
.l.lead{font-size:var(--t-lead);line-height:var(--i-lead);letter-spacing:-.020em}

/* ═══ LOGOS DE CLIENTES · un panel, no dieciocho cuadros blancos ═══
   Los archivos son JPG con fondo blanco. En vez de dejar cada uno como su
   propio recuadro flotando sobre el azul, van todos sobre UN panel de papel
   y se funden con multiply: el blanco del archivo se disuelve en el panel y
   sólo queda la tinta. Lo que separa una marca de otra es un filete de 1px,
   no un hueco. Así se lee como una sola pieza. */
.logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;width:100%;
  background:var(--color-linea);border:1px solid var(--color-linea);isolation:isolate}
.lg{background:var(--color-papel);aspect-ratio:2/1;padding:14px 20px;
  display:flex;align-items:center;justify-content:center}
.lg img{max-width:100%;max-height:100%;object-fit:contain;display:block;
  mix-blend-mode:multiply}

/* ═══ PORTADA y CIERRE · división de campo ═══
   Müller-Brockmann no pone el texto encima de la foto con un degradado que
   la tape: parte el formato en campos y le da a cada cosa el suyo. El corte
   cae en el canal de la retícula (x=978), donde empieza la columna 7.
   La foto no lleva NADA encima, así que la cara de nadie queda tapada. */
.s.campo{padding:0;background:var(--brillo),var(--color-fondo);color:var(--color-papel);
  font-family:var(--font-texto);font-weight:var(--peso-texto)}  /* que nadie herede Times */
.s.campo.on{display:block}
/* la textura de ondas vive SÓLO en el campo de color, nunca sobre la foto.
   El lienzo va encima de ella y el texto encima de todo. */
.s.campo .tex{position:absolute;top:0;bottom:0;left:0;z-index:0;width:978px}
.s.campo.fizq .tex{width:942px}   /* del lado de la foto: el texto queda limpio */
.s.campo .lienzo{position:absolute;top:0;bottom:0;width:942px;overflow:hidden;z-index:1}
.s.campo.fder .lienzo{right:0}
.s.campo.fizq .lienzo{left:0}
.s.campo .lienzo img{width:100%;height:100%;object-fit:cover;display:block}
/* ENTERA · la foto del equipo no se recorta a nadie. En vez de forzarla a
   llenar una franja vertical (que le corta a quien quede en la orilla), se
   le da a la imagen su propia proporción dentro del campo, con el mismo
   aire arriba y abajo. Cero recorte: la caja y el archivo miden igual de
   proporción, y por eso el número de aquí abajo tiene que ir CON el
   archivo. Estuvo en 1200/802 mientras cierre.jpg medía 1400x1749: el
   comentario decía "cero recorte" y la lámina les cortaba la frente. */
.s.campo .lienzo.entera{top:50%;bottom:auto;transform:translateY(-50%);
  width:828px;height:auto;aspect-ratio:1600/1066}   /* = deck/img/cierre.jpg */
.s.campo.fizq .lienzo.entera{left:var(--r-lado)}
.s.campo.fder .lienzo.entera{right:var(--r-lado)}
.s.campo .campo-texto{position:absolute;top:var(--r-margen);bottom:var(--r-margen);
  width:828px;display:flex;flex-direction:column;z-index:2}
.s.campo.fder .campo-texto{left:var(--r-lado)}
.s.campo.fizq .campo-texto{left:978px}
.s.campo .campo-texto > .et{position:static;left:auto;top:auto;margin:0 0 auto;
  font-family:var(--font-mono);font-weight:var(--peso-mono);
  font-size:var(--t-pie);line-height:var(--i-pie);
  text-transform:var(--caja-mono);letter-spacing:var(--track-mono);
  opacity:.72;color:inherit;align-self:stretch}
.s.campo .l{margin-bottom:var(--r-canal)}

/* el dato de contacto como tabla, no como párrafo corrido */
.datos{display:grid;grid-template-columns:auto 1fr;gap:0 var(--r-canal);margin-top:var(--r-canal);
  border-top:1px solid color-mix(in oklch,var(--color-papel) 26%,transparent)}
.datos dt{font-family:var(--font-mono);font-size:var(--t-pie);line-height:var(--i-texto);
  font-weight:var(--peso-mono);text-transform:uppercase;letter-spacing:var(--track-mono);
  opacity:.52;padding-top:var(--u)}
.datos dd{font-family:var(--font-texto);font-weight:var(--peso-texto);
  font-size:var(--t-texto);line-height:var(--i-texto);margin:0;padding-top:var(--u)}

/* el remate de la portada y del cierre */
.firmas{display:flex;gap:var(--r-canal);margin-top:var(--r-canal);padding-top:var(--u);
  border-top:1px solid color-mix(in oklch,var(--color-papel) 26%,transparent)}
.firmas span{font-family:var(--font-texto);font-weight:var(--peso-texto);
  font-size:var(--t-texto);line-height:var(--i-texto);opacity:.78;white-space:nowrap}
.remate{font-family:var(--font-display);font-weight:var(--peso-display-b);
  font-size:var(--t-d1);line-height:var(--i-d1);letter-spacing:-.022em;
  margin-top:var(--r-canal);text-wrap:balance}


/* ═══ RETICULA VISIBLE · tecla G ═══
   Para revisar que todo caiga en su campo. No se ve nunca en la
   presentación: hay que pedirla a propósito.

   OJO con repeating-linear-gradient: el periodo de repetición es la suma
   de TODAS sus paradas. Si se mete el margen como primera parada, el
   patrón repite cada 114+108+36 = 258px en vez de cada 144, y la retícula
   sale corrida aunque la composición esté bien. El margen va aparte, en
   background-position, y el área de texto en background-size. */
.reticula .s::after{content:'';position:absolute;inset:0;z-index:99;pointer-events:none;
  background-image:
    repeating-linear-gradient(to right,
      color-mix(in oklch,#ff3b6b 20%,transparent) 0 var(--r-col),
      transparent var(--r-col) calc(var(--r-col) + var(--r-canal))),
    repeating-linear-gradient(to bottom,
      color-mix(in oklch,#00d5ff 15%,transparent) 0 var(--r-fila),
      transparent var(--r-fila) calc(var(--r-fila) + var(--r-canal)));
  background-position: var(--r-lado) 0, 0 var(--r-margen);
  background-size:
    calc(var(--r-col)*12 + var(--r-canal)*11) 100%,
    100% calc(var(--r-fila)*5 + var(--r-canal)*4);
  background-repeat:no-repeat,no-repeat}