/* ══════════════════════════════════════════════════════════════
   ADNIUS · SOCIAL MEDIA MANAGEMENT · HOJA DE ESTILOS · v2 PANTALLAS GRANDES (27/09/2026)
   v2: medidas de px a rem para que la pagina crezca parejo en
   pantallas grandes (ver PANTALLAS-GRANDES.md), y el .wrap mide su
   tope SIN contar el margen de los lados, para que las secciones
   arranquen en la misma linea que el hero y el logo, igual que en
   SEO v14. Se quedan en px las rayas de 1px y 2px, las pildoras de
   999px, los breakpoints, lo que va en @keyframes y los
   transform-origin de los dibujos SVG, que son unidades del dibujo.
   Pagina: /social-media-plans/   ·   De adnius-social-media-v10.html

   Se encola SOLO en esa pagina, desde adnius_enqueue_landing() en
   functions.php, a prioridad 39. La pagina entra por la linea
   'social-media-plans' del mapa adnius_landings(), que es tambien la
   que le pone al body la clase .adn-social.

   NO TRAE: las dos fuentes ni GSAP. Las fuentes las carga
   adnius_enqueue_header() y GSAP lo carga divifx_enqueue_motion(),
   los dos en todo el sitio.

   Todo lo que va desde aqui hasta el bloque "CONTRA DIVI" del final
   es el prototipo tal cual, sin tocar una linea. Lo del final es lo
   unico que no existe en el prototipo, y existe porque el prototipo
   corria en una pagina en blanco y esto corre dentro de Divi.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   ADNIUS · SOCIAL MEDIA PLANS · VERSION 9

   EL LENGUAJE VISUAL, Y POR QUE ES DISTINTO A LAS OTRAS TRES.

   Promo web       fotografia
   SEO avanzado    interfaz plana: buscadores, listas, reportes
   Correos         interfaz con profundidad: ventanas apiladas
   Redes           EL FEED VIVO

   Esta es la unica de las cuatro que vende contenido visual, asi que
   seria raro que fuera la mas sobria. Todo lo que se dibuja aqui es lo
   que el visitante ya reconoce sin explicacion: un telefono con su
   feed rodando, una rejilla de mes que se va llenando, un carrusel que
   se desliza solo, cinco redes recibiendo la misma pieza a la vez.

   CERO FOTOGRAFIAS. Todo es SVG y HTML dibujado. Pesa una fraccion de
   una foto, se ve nitido en cualquier pantalla, y nadie mas lo tiene.
   ══════════════════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

:root{
  --black:#000;
  --ink:#0a0a0a;
  --yellow:#ffc600;
  --orange:#ff7000;
  --green:#29d264;
  --pink:#ff3b7f;
  --white:#fff;

  --display:'Hanken Grotesk',Helvetica,Arial,sans-serif;
  --body:'Inter',Helvetica,Arial,sans-serif;

  --pad:clamp(1.5rem,5vw,5rem);
  --line:rgba(255,255,255,.16);
}

body{background:var(--black);color:var(--white);font-family:var(--body);overflow-x:clip}
::selection{background:var(--yellow);color:var(--black)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--yellow);outline-offset:0.25rem;border-radius:0.1875rem}


/* ══════════════════ ESTRUCTURA ══════════════════ */

.sec{position:relative;padding:clamp(4rem,10vh,7.5rem) 0}
.wrap{max-width:calc(93.75rem + var(--pad) * 2);margin:0 auto;padding:0 var(--pad)}

.duo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,6rem);align-items:center;
}
.duo.flip .art{order:-1}
@media (max-width:900px){
  .duo{grid-template-columns:1fr;gap:2.6rem}
  .duo .art{order:-1}
}


/* ══════════════════ TIPOGRAFIA ══════════════════ */

.big{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.9rem,4.6vw,3.6rem);
  line-height:1.03;letter-spacing:-.035em;
}
.big em{font-style:normal;color:var(--yellow)}

.lede{
  font-weight:200;font-size:clamp(1rem,1.6vw,1.3rem);
  line-height:1.55;color:rgba(255,255,255,.75);max-width:46ch;
}
.body{
  font-weight:200;font-size:clamp(.95rem,1.3vw,1.06rem);
  line-height:1.65;color:rgba(255,255,255,.72);max-width:52ch;
}
.body + .body{margin-top:1.1rem}
.body b{color:rgba(255,255,255,.92);font-weight:500}

/* El aire debajo de un titular, solo cuando de verdad hay algo debajo.
   Los que llevan revelado por lineas necesitan un poco mas: la ventana
   de recorte tiene un margen negativo que se come parte del hueco. */
.big + .body,.big + .lede,.big + .sub{margin-top:clamp(1.2rem,2.4vw,1.9rem)}
.big.reveal-lines + .body,
.big.reveal-lines + .lede,
.big.reveal-lines + .sub{margin-top:clamp(1.4rem,2.8vw,2.2rem)}

.tag{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--display);font-weight:600;font-size:.82rem;
  letter-spacing:.01em;color:var(--yellow);margin-bottom:1.3rem;
}
.tag::before{content:'';width:1.6rem;height:1px;background:var(--yellow);flex:none}

/* EL LIMITE DE ANCHO VA EN EL HIJO, NO EN EL CONTENEDOR.
   La unidad ch se mide contra el tamaño de letra del elemento que la
   lleva. Puesta en el contenedor, que hereda los 16px del cuerpo, 24ch
   serian unos 190 pixeles y el titular se partiria en cinco lineas con
   media pantalla vacia al lado. */
.shead{margin-bottom:clamp(2.4rem,5vh,3.6rem)}
.shead .big{max-width:24ch}
.shead .sub,
.shead .lede{
  font-weight:200;font-size:clamp(.95rem,1.35vw,1.1rem);line-height:1.55;
  color:rgba(255,255,255,.68);max-width:52ch;
}


/* ══════════════════ BOTONES ══════════════════ */

.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-weight:600;font-size:.92rem;
  padding:1rem 2rem;border-radius:999px;
  background:var(--yellow);color:var(--black);
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 0.75rem 2.5rem rgba(255,198,0,.3)}
.btn::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.7) 50%,transparent 66%);
  background-size:260% 100%;background-position:150% 0;
  transition:background-position 1.1s cubic-bezier(.16,1,.3,1);
}
.btn:hover::after{background-position:-60% 0}

.ghost{
  position:relative;display:inline-block;
  font-size:.84rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.62);padding-bottom:.4rem;transition:color .35s ease;
}
.ghost::before,.ghost::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px}
.ghost::before{background:rgba(255,255,255,.24)}
.ghost::after{
  background:var(--yellow);transform:scaleX(0);transform-origin:left center;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.ghost:hover{color:var(--white)}
.ghost:hover::after{transform:scaleX(1)}

.acts{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}

.ink{
  stroke:var(--yellow);stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.ink .dim{stroke:rgba(255,255,255,.45)}
.ink .fill{fill:var(--yellow);stroke:none}


/* ══════════════════ CINTA SUPERIOR ══════════════════ */

.prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--yellow);z-index:60}

.hdr{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem var(--pad);border-bottom:1px solid transparent;
  transition:background .5s ease,backdrop-filter .5s ease,border-color .5s ease;
}
.hdr.on{background:rgba(0,0,0,.72);backdrop-filter:blur(0.875rem);border-bottom-color:var(--line)}
.hdr .logo{height:2.125rem;width:auto}
.hdr .btn{padding:.62rem 1.3rem;font-size:.8rem}
@media (max-width:520px){
  .hdr .logo{height:1.625rem}
  .hdr .btn{padding:.55rem 1rem;font-size:.72rem}
}


/* ══════════════════ 1 · HERO: EL TELEFONO CON EL FEED VIVO ══════════════════
   Un telefono de frente con el feed rodando solo y las piezas entrando
   una tras otra: un Reel, un carrusel, un post. Los corazones suben.

   Es el unico momento orquestado de la pagina y es literalmente el
   producto funcionando. Un titular puede prometer contenido; esto lo
   enseña publicandose. */

.hero{
  position:relative;min-height:100svh;
  display:grid;align-items:center;
  padding:8rem var(--pad) 4rem;
  overflow:hidden;isolation:isolate;perspective:87.5rem;
}

/* LA REJILLA DE FONDO.
   Estaba al 5% de blanco y con una mascara que empezaba a apagarla al
   10% del centro: sobre negro puro no existia. Ahora al 11%, con la
   mascara abierta hasta el 32% y las casillas mas chicas, para que se
   lea como textura y no como cuatro lineas sueltas.

   Se sube hasta donde se nota y no mas: pasado ese punto deja de ser
   fondo y se convierte en mantel. */
.hero .grid{
  position:absolute;inset:-2px;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.11) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.11) 1px,transparent 1px);
  background-size:3.5rem 3.5rem;
  -webkit-mask-image:radial-gradient(ellipse 84% 84% at 50% 42%,#000 32%,transparent 88%);
          mask-image:radial-gradient(ellipse 84% 84% at 50% 42%,#000 32%,transparent 88%);
}
.hero .halo{
  position:absolute;left:66%;top:46%;z-index:0;pointer-events:none;
  width:min(59.375rem,110%);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,198,0,.11),rgba(255,59,127,.045) 40%,transparent 68%);
}

.hero .in{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(2.5rem,6vw,5rem);align-items:center;
  max-width:93.75rem;margin:0 auto;width:100%;
}
@media (max-width:980px){
  .hero{min-height:0;padding:7rem var(--pad) 3.5rem}
  .hero .in{grid-template-columns:1fr;gap:2.8rem}
}

.hero h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.6rem,6.6vw,5rem);
  line-height:.96;letter-spacing:-.05em;margin-bottom:1.1rem;
}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero .claim{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.3rem,2.8vw,2.2rem);
  line-height:1.14;letter-spacing:-.03em;
  color:rgba(255,255,255,.92);max-width:22ch;margin-bottom:1.5rem;
}
.hero .lede{margin-bottom:2.2rem;max-width:44ch}

.hero .value{
  margin-top:1.8rem;display:inline-flex;align-items:center;
  gap:clamp(.8rem,2vw,1.4rem);flex-wrap:wrap;
  padding:.9rem 1.4rem;border-radius:0.875rem;
  border:1px solid rgba(255,198,0,.28);
  background:linear-gradient(120deg,rgba(255,198,0,.07),rgba(255,198,0,.015));
}
.hero .value .n{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.4rem,2.8vw,2rem);line-height:1;letter-spacing:-.04em;
  color:var(--yellow);
}
.hero .value .n span{
  display:block;margin-top:.3rem;
  font-family:var(--body);font-size:.7rem;font-weight:300;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.58);
}
.hero .value .sep{width:1px;align-self:stretch;background:rgba(255,198,0,.22)}
@media (max-width:420px){ .hero .value .sep{display:none} }

.hero .under{margin-top:1.1rem;font-size:.82rem;font-weight:200;color:rgba(255,255,255,.52)}
.hero .under b{color:rgba(255,255,255,.8);font-weight:500}


/* --- El telefono --- */

.phone{
  position:relative;width:min(18.75rem,84%);margin:0 auto;
  aspect-ratio:9/18.5;
  border:2px solid rgba(255,255,255,.22);border-radius:2.375rem;
  background:var(--ink);overflow:hidden;
  transform:rotateY(-8deg) rotateX(2deg);
  box-shadow:0 2.5rem 6.25rem rgba(0,0,0,.8),0 0 0 0.5rem rgba(255,255,255,.02);
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
.phone:hover{transform:rotateY(-3deg) rotateX(1deg)}
@media (max-width:980px){
  .phone{transform:none;width:min(20rem,84%)}
  .pc .cv .copy{font-size:2.8rem}
  .pc.post .cv .copy{font-size:2.3rem}
  .pc.post .cv .copy em{font-size:2.9rem}
  .pc .cv .steps span{font-size:2.1rem}
  .pc .cv .steps span:last-child{font-size:2.5rem}
}

/* La muesca. Sin ella el rectangulo no se lee como telefono. */
.phone::before{
  content:'';position:absolute;top:0.5rem;left:50%;transform:translateX(-50%);
  width:4.75rem;height:1.25rem;border-radius:0 0 0.75rem 0.75rem;
  background:rgba(255,255,255,.08);z-index:5;
}
/* El velo de abajo: las piezas se disuelven al salir en vez de
   cortarse en seco contra el borde. */
.phone::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:5rem;z-index:4;
  pointer-events:none;
  background:linear-gradient(to top,var(--ink),transparent);
}

.feed{
  position:absolute;left:0;right:0;top:2.375rem;bottom:0;
  padding:0 0.75rem;overflow:hidden;
}
.feed .rail{display:flex;flex-direction:column;gap:0.75rem;will-change:transform}

.pc{
  border:1px solid var(--line);border-radius:0.75rem;
  background:rgba(255,255,255,.025);overflow:hidden;flex:none;
}
.pc .top{
  display:flex;align-items:center;gap:.5rem;padding:.55rem .6rem;
}
.pc .top .av{
  width:1.375rem;height:1.375rem;border-radius:50%;flex:none;
  background:rgba(255,198,0,.18);display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:.5rem;color:var(--yellow);
}
.pc .top b{
  flex:1;font-family:var(--display);font-weight:600;font-size:.6rem;
  color:rgba(255,255,255,.75);
}
.pc .top em{font-style:normal;font-size:.5rem;color:rgba(255,255,255,.32)}

/* El lienzo de cada pieza. El tipo cambia la forma y eso es lo que
   hace que el feed se lea variado: un Reel es vertical, un carrusel
   cuadrado, un post ancho. */
.pc .cv{position:relative;background:rgba(255,255,255,.05);overflow:hidden}
.pc.reel .cv{aspect-ratio:9/14}
.pc.carou .cv{aspect-ratio:1}
.pc.post .cv{aspect-ratio:4/3}

.pc .cv .lbl{
  position:absolute;top:0.375rem;left:0.375rem;z-index:2;
  font-family:var(--display);font-weight:700;font-size:.48rem;
  letter-spacing:.1em;text-transform:uppercase;
  padding:.16rem .38rem;border-radius:0.25rem;
}
.pc.reel .cv .lbl{background:rgba(255,59,127,.2);color:#ff8fb4}
.pc.carou .cv .lbl{background:rgba(255,198,0,.2);color:var(--yellow)}
.pc.post .cv .lbl{background:rgba(41,210,100,.18);color:var(--green)}

/* LA PIEZA SE VE COMO UNA PUBLICACION, NO COMO UN ICONO EN UN RECUADRO.
   Antes era un dibujo de linea centrado sobre negro: de cerca se leia
   como esquema. El error era dibujar la IDEA del post en vez de dibujar
   como se ve un post.

   Ahora cada pieza tiene su propio fondo de color, el texto grande
   encima ocupando el espacio, y el dibujo detras, mas grande y saliendo
   del marco. Que es exactamente como se ve una pieza real al bajar por
   un feed.

   Y los textos VENDEN mientras se miran. No son relleno: cada uno dice
   algo distinto del servicio, asi la landing demuestra el trabajo en
   vez de describirlo. */
.pc .cv{background:var(--bg,rgba(255,255,255,.045))}
/* El dibujo baja de opacidad al subir el texto: con los dos al mismo
   peso se pelean y no gana ninguno. */
.pc .cv svg{stroke-width:2.2;opacity:.35}

/* AQUI SE ROMPE EL TRAZO FINO DE LA MARCA, Y A PROPOSITO.
   Todo lo demas de la pagina va en linea amarilla sin relleno. Estas
   cuatro no, porque no son ilustracion de la landing: son el CONTENIDO
   de un cliente dentro de un telefono. Que se vean distintas es lo
   correcto, y ademas es la unica forma de que parezcan piezas de
   verdad y no pictogramas.

   Por eso llevan relleno, degradados, sombra y profundidad, y no
   heredan la clase .ink. */
.pc .cv .scene{
  position:absolute;inset:-6%;width:112%;height:112%;
  opacity:.62;
}
.pc .cv .scene *{vector-effect:none}

/* EL TEXTO ES LA PIEZA.
   La pieza se rediseño ALREDEDOR de la frase, no al reves. A este
   tamaño tres o cuatro palabras llenan el espacio, y por eso las
   frases son cortas: primero se decidio el tamaño, despues el texto
   que cabe. */
.pc .cv .copy{
  position:absolute;left:8%;right:8%;top:50%;transform:translateY(-50%);z-index:2;
  font-family:var(--display);font-weight:800;
  font-size:2.4rem;line-height:.96;letter-spacing:-.045em;
  color:var(--white);
  /* Dos sombras: una cerrada que separa la letra del dibujo y una
     abierta que la despega del fondo. Con una sola, sobre una escena
     con detalle, la letra se pierde. */
  text-shadow:0 2px 0.375rem rgba(0,0,0,.85),0 0.375rem 1.875rem rgba(0,0,0,.75);
}
/* Esta pieza lleva dos lineas de contenido, no una frase corta: baja
   un punto para que las dos quepan. El precio sigue mandando por el
   color amarillo, no por el tamaño. */
.pc.post .cv .copy{font-size:2rem}
.pc.post .cv .copy em{font-size:2.5rem;margin-top:.5rem}
.pc .cv .copy em{font-style:normal;color:var(--yellow);display:block;margin-top:.35rem}

/* Las tres lineas del carrusel: cada una es una diapositiva y la
   ultima es el golpe. Van centradas verticalmente como el resto. */
.pc .cv .steps{
  position:absolute;left:8%;right:8%;top:50%;transform:translateY(-50%);z-index:2;
  display:flex;flex-direction:column;gap:.7rem;
}
.pc .cv .steps span{
  font-family:var(--display);font-weight:800;
  font-size:1.8rem;line-height:.98;letter-spacing:-.04em;
  color:rgba(255,255,255,.62);
  text-shadow:0 2px 0.375rem rgba(0,0,0,.85),0 0.375rem 1.875rem rgba(0,0,0,.75);
}
.pc .cv .steps span:last-child{color:var(--white);font-size:2.2rem}

/* El boton de reproducir de las piezas de video */
.pc .pl2{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:1.875rem;height:1.875rem;border-radius:50%;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.32);
  display:grid;place-items:center;
}
.pc .pl2 svg{width:0.6875rem;height:0.6875rem;fill:var(--white);stroke:none;margin-left:1px}

/* Los puntitos del carrusel */
/* Las barritas de la historia, dentro del feed. Es lo que separa una
   historia de un Reel de un vistazo. */
.pc .sbars{position:absolute;top:0.375rem;left:0.4375rem;right:0.4375rem;z-index:3;display:flex;gap:0.1875rem}
.pc .sbars i{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.28)}
.pc .sbars i.done{background:rgba(255,255,255,.9)}
.pc .sbars i.half{background:linear-gradient(90deg,rgba(255,255,255,.9) 55%,rgba(255,255,255,.28) 55%)}

.pc .dots{
  position:absolute;bottom:0.4375rem;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;gap:0.25rem;
}
.pc .dots i{width:0.25rem;height:0.25rem;border-radius:50%;background:rgba(255,255,255,.28)}
.pc .dots i:first-child{background:var(--white)}

.pc .acts2{display:flex;align-items:center;gap:.7rem;padding:.5rem .6rem}
.pc .acts2 svg{width:0.8125rem;height:0.8125rem;stroke:rgba(255,255,255,.5);stroke-width:1.8;fill:none}
.pc .acts2 .heart.on svg{stroke:var(--pink);fill:var(--pink)}
.pc .acts2 .cnt{
  margin-left:auto;font-size:.52rem;color:rgba(255,255,255,.4);
  font-variant-numeric:tabular-nums;
}


/* ══════════════════ 2 · LAS CINCO REDES ══════════════════
   Una pieza que cae en cinco marcos a la vez. Es exactamente lo que
   hace Metricool y lo que el cliente compra sin saberlo: se crea una
   sola vez y se publica en cinco sitios. */

.nets{
  position:relative;display:grid;
  grid-template-columns:repeat(5,1fr);gap:clamp(.6rem,1.6vw,1.1rem);
  perspective:1000px;
}
@media (max-width:820px){ .nets{grid-template-columns:repeat(3,1fr)} }
@media (max-width:480px){ .nets{grid-template-columns:repeat(2,1fr)} }

.net{
  border:1px solid var(--line);border-radius:0.875rem;
  background:var(--ink);overflow:hidden;
  transform:translateZ(0);
  transition:transform .7s cubic-bezier(.16,1,.3,1),border-color .6s ease;
}
.net:hover{transform:translateY(-0.375rem);border-color:rgba(255,198,0,.4)}

.net .hd{
  display:flex;align-items:center;justify-content:center;
  padding:.65rem .7rem;border-bottom:1px solid var(--line);
}
.net .hd b{
  font-family:var(--display);font-weight:700;font-size:.72rem;
  letter-spacing:.02em;color:rgba(255,255,255,.8);
}

/* El hueco donde aterriza la pieza. Empieza vacio y se llena cuando la
   seccion entra en pantalla, uno detras de otro. */
.net .slot{
  aspect-ratio:4/5;margin:.55rem;border-radius:0.5625rem;
  border:1px dashed rgba(255,255,255,.14);
  display:grid;place-items:center;position:relative;overflow:hidden;
  transition:border-color .6s ease,background .6s ease;
}
/* CADA RED CON SU PROPIO COLOR, NO CON UN CHECK GENERICO.
   El --brand lo trae cada tarjeta desde el HTML. Asi el degradado de
   Instagram, el azul de Facebook o el rojo de YouTube salen del mismo
   CSS sin escribir cinco bloques distintos, y agregar una red mañana es
   una linea. */
.net .slot .drop{
  position:absolute;inset:0.375rem;border-radius:0.375rem;
  background:var(--brand,linear-gradient(140deg,rgba(255,198,0,.3),rgba(255,59,127,.2)));
  opacity:0;transform:translateY(-1rem) scale(.88);
  transition:opacity .55s ease,transform .7s cubic-bezier(.16,1,.3,1);
}
.net.filled .slot{border-color:var(--edge,rgba(255,198,0,.32));background:rgba(255,255,255,.03)}
.net.filled .slot .drop{opacity:1;transform:none}

/* El logo de la red, dentro de la pieza que acaba de caer. Es lo que
   hace que se lea como "publicado en Instagram" y no como un cuadro de
   color con un visto. */
.net .slot .mark{
  position:relative;z-index:2;width:44%;max-width:3.25rem;
  opacity:0;transform:scale(.55);
  transition:opacity .45s ease .2s,transform .6s cubic-bezier(.16,1,.3,1) .2s;
}
.net.filled .slot .mark{opacity:1;transform:none}
.net .slot .mark svg{width:100%;height:auto;fill:#fff;stroke:none;
  filter:drop-shadow(0 2px 0.625rem rgba(0,0,0,.5));
}

/* La marca de publicado, chica y en la esquina */
.net .slot .ok{
  position:absolute;right:0.5625rem;bottom:0.5625rem;z-index:3;
  width:1.1875rem;height:1.1875rem;border-radius:50%;padding:0.25rem;
  background:var(--white);
  opacity:0;transform:scale(.5);
  transition:opacity .35s ease .5s,transform .45s cubic-bezier(.16,1,.3,1) .5s;
}
.net.filled .slot .ok{opacity:1;transform:none}
.net .slot .ok svg{width:100%;height:100%;stroke:#111;stroke-width:3.2;fill:none}


/* ══════════════════ 3 · EL CALENDARIO ══════════════════
   La rejilla de un mes que se va llenando dia por dia. Es la forma mas
   rapida de explicar que significa publicar dia por medio o seis veces
   por semana: se ve, no se cuenta. */

.cal{
  border:1px solid var(--line);border-radius:1rem;
  background:var(--ink);padding:clamp(1rem,2.4vw,1.5rem);
}
.cal .hd{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:.9rem;margin-bottom:.9rem;border-bottom:1px solid var(--line);
}
.cal .hd b{font-family:var(--display);font-weight:700;font-size:.9rem}
.cal .hd span{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4)}

.cal .dows{
  display:grid;grid-template-columns:repeat(7,1fr);gap:.35rem;margin-bottom:.5rem;
}
.cal .dows span{
  text-align:center;font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.3);
}
.cal .days{display:grid;grid-template-columns:repeat(7,1fr);gap:.35rem}
.cal .d{
  aspect-ratio:1;border-radius:0.375rem;
  background:rgba(255,255,255,.04);
  display:grid;place-items:center;
  font-size:.58rem;color:rgba(255,255,255,.26);
  transition:background .5s ease,color .5s ease,transform .5s cubic-bezier(.16,1,.3,1);
}
/* Cada tipo de pieza tiene su color, el mismo del feed del hero. Asi
   el visitante ata las dos secciones sin que nadie se lo diga. */
.cal .d.on{color:var(--black);font-weight:700}
.cal .d.reel{background:rgba(255,59,127,.75)}
.cal .d.carou{background:rgba(255,198,0,.85)}
.cal .d.post{background:rgba(41,210,100,.7)}

.legend{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:1.2rem}
.legend span{display:flex;align-items:center;gap:.45rem;font-size:.76rem;font-weight:200;color:rgba(255,255,255,.62)}
.legend i{width:0.625rem;height:0.625rem;border-radius:0.1875rem;flex:none}
.legend .r{background:rgba(255,59,127,.75)}
.legend .c{background:rgba(255,198,0,.85)}
.legend .p{background:rgba(41,210,100,.7)}


/* ══════════════════ 4 · LOS TRES FORMATOS ══════════════════ */

.kinds{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,2vw,1.4rem)}
@media (max-width:1080px){ .kinds{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .kinds{grid-template-columns:1fr} }

.kind{
  border:1px solid var(--line);border-radius:1rem;overflow:hidden;
  background:var(--ink);
  transition:transform .6s cubic-bezier(.16,1,.3,1),border-color .6s ease;
}
.kind:hover{transform:translateY(-0.3125rem);border-color:rgba(255,198,0,.36)}

/* El carrusel se desliza solo: el que no sabe que es un carrusel lo
   entiende viendolo, y ninguna definicion escrita hace eso. */
/* Vertical y no apaisado: asi es una pieza de red social de verdad, y
   ademas le da sitio a la escena dibujada para que se lea. */
.kind .demo{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  border-bottom:1px solid var(--line);
  background:radial-gradient(ellipse 90% 70% at 50% 30%,rgba(255,198,0,.06),transparent 65%),rgba(255,255,255,.03);
}
.kind .demo svg{position:absolute;inset:0;width:100%;height:100%}

/* La barra de progreso de las historias. Es lo que hace que un marco
   vertical se lea como historia y no como un Reel. */
.kind .bars{position:absolute;top:0.5625rem;left:0.5625rem;right:0.5625rem;z-index:3;display:flex;gap:0.25rem}
.kind .bars i{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.22);overflow:hidden}
.kind .bars i::after{
  content:'';display:block;height:100%;width:0;background:var(--white);
}
.kind .bars i.done::after{width:100%}
.kind .bars i.now::after{width:100%;transition:width 2.4s linear}

/* El boton de reproducir de los Reels */
.kind .play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:2.875rem;height:2.875rem;border-radius:50%;
  background:rgba(0,0,0,.45);backdrop-filter:blur(0.1875rem);
  border:1px solid rgba(255,255,255,.3);
  display:grid;place-items:center;
}
.kind .play svg{position:static;width:1rem;height:1rem;fill:var(--white);stroke:none;margin-left:2px}
.kind .txt{padding:clamp(1.2rem,2.6vw,1.7rem)}
.kind .txt h3{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-weight:700;font-size:1.1rem;
  letter-spacing:-.02em;margin-bottom:.6rem;
}
.kind .txt h3 i{width:0.625rem;height:0.625rem;border-radius:0.1875rem;flex:none}
.kind .txt p{font-weight:200;font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.7)}


/* ══════════════════ 5 · LOS TRES PLANES ══════════════════
   Cada plan lleva su propia rejilla de piezas dibujadas. La diferencia
   de volumen se VE antes de leer un numero, que es exactamente lo que
   separa a los tres: no cambia el trabajo, cambia cuanto. */

.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
@media (max-width:980px){ .tiers{grid-template-columns:1fr} }

.tier{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:1.125rem;
  padding:clamp(1.5rem,3vw,2.1rem);
  transition:border-color .5s ease,background .5s ease,transform .5s cubic-bezier(.16,1,.3,1);
}
.tier:hover{border-color:rgba(255,198,0,.34);transform:translateY(-0.25rem)}
/* El marcado es el de ENTRADA, no el del medio. Marcar el del medio es
   el truco de siempre para empujar hacia arriba; aqui el destacado es
   el que de verdad recomendamos empezar. */
.tier.pick{border-color:rgba(255,198,0,.44);background:rgba(255,198,0,.04)}
.tier .badge{
  align-self:flex-start;margin-bottom:1rem;
  font-family:var(--display);font-weight:700;font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--black);background:var(--yellow);
  padding:.3rem .7rem;border-radius:999px;
}
.tier h3{font-family:var(--display);font-weight:800;font-size:1.4rem;letter-spacing:-.03em;margin-bottom:.35rem}
.tier .sub{font-weight:200;font-size:.84rem;line-height:1.45;color:rgba(255,255,255,.55);margin-bottom:1.2rem;min-height:2.6em}

.tier .amt{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2rem,4vw,2.8rem);line-height:1;letter-spacing:-.04em;
  color:var(--yellow);margin-bottom:.4rem;
}
.tier .amt small{
  font-family:var(--body);font-size:.78rem;font-weight:300;
  color:rgba(255,255,255,.5);margin-left:.35rem;letter-spacing:.02em;
}
.tier .rate{font-size:.74rem;font-weight:200;color:rgba(255,255,255,.4);margin-bottom:1.4rem}

/* La rejilla de piezas. Cada cuadrito es una pieza del mes, con el
   color de su formato. Se llenan al entrar en pantalla. */
.tier .mesh{
  display:grid;grid-template-columns:repeat(8,1fr);gap:0.1875rem;
  margin-bottom:1.5rem;
}
.tier .mesh i{
  aspect-ratio:1;border-radius:2px;background:rgba(255,255,255,.07);
  opacity:0;transform:scale(.4);
  transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1),background .4s ease;
}
.tier.filled .mesh i{opacity:1;transform:none}
.tier .mesh i.r{background:rgba(255,59,127,.7)}
.tier .mesh i.c{background:rgba(255,198,0,.8)}
.tier .mesh i.p{background:rgba(41,210,100,.65)}

.tier ul{list-style:none;display:flex;flex-direction:column;gap:.7rem;flex:1}
.tier li{
  display:flex;align-items:flex-start;gap:.65rem;
  font-weight:200;font-size:.9rem;line-height:1.45;color:rgba(255,255,255,.75);
}
.tier li svg{width:0.875rem;height:0.875rem;flex:none;margin-top:.24rem;stroke:var(--yellow);stroke-width:2.2;fill:none}
.tier .go{margin-top:1.7rem}

.allin{
  margin-top:clamp(1.6rem,3vh,2.4rem);
  border:1px solid var(--line);border-radius:1rem;
  padding:clamp(1.5rem,3vw,2.1rem);
  background:linear-gradient(130deg,rgba(255,198,0,.045),transparent 62%);
}
.allin b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1.02rem,1.7vw,1.2rem);color:var(--yellow);margin-bottom:1rem;
}
.allin ul{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem 1.6rem}
@media (max-width:720px){ .allin ul{grid-template-columns:1fr} }
.allin li{
  display:flex;align-items:flex-start;gap:.6rem;
  font-weight:200;font-size:.92rem;line-height:1.45;color:rgba(255,255,255,.75);
}
.allin li svg{width:0.875rem;height:0.875rem;flex:none;margin-top:.22rem;stroke:var(--yellow);stroke-width:2.2;fill:none}


/* ══════════════════ 6 · TARJETAS DE TEXTO CLARO ══════════════════ */

.plain{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:1rem;overflow:hidden;
}
@media (max-width:760px){ .plain{grid-template-columns:1fr} }
.plain div{background:var(--black);padding:clamp(1.5rem,3vw,2rem)}
.plain b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1.02rem,1.6vw,1.15rem);letter-spacing:-.02em;
  color:var(--yellow);margin-bottom:.6rem;
}
.plain p{font-weight:300;font-size:clamp(.92rem,1.25vw,1rem);line-height:1.62;color:rgba(255,255,255,.8)}


/* ══════════════════ 7 · PREGUNTAS ══════════════════ */

.qs{border-top:1px solid var(--line)}
.qrow{border-bottom:1px solid var(--line)}
.qbtn{width:100%;display:flex;align-items:center;gap:1.2rem;padding:clamp(1.1rem,2.4vh,1.5rem) 0;text-align:left}
.qbtn .qt{
  flex:1;font-family:var(--display);font-weight:600;
  font-size:clamp(.98rem,1.7vw,1.16rem);letter-spacing:-.02em;
  color:rgba(255,255,255,.85);transition:color .4s ease;
}
.qrow:hover .qt{color:var(--white)}
.qrow.open .qt{color:var(--yellow)}
.qbtn .pl{position:relative;width:0.875rem;height:0.875rem;flex:none;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.qbtn .pl::before,.qbtn .pl::after{
  content:'';position:absolute;left:0;top:0.4062rem;width:0.875rem;height:1px;
  background:rgba(255,255,255,.5);transition:background .4s ease;
}
.qbtn .pl::after{transform:rotate(90deg)}
.qrow.open .pl{transform:rotate(135deg)}
.qrow.open .pl::before,.qrow.open .pl::after{background:var(--yellow)}
.qbody{overflow:hidden;height:0}
.qbody p{
  padding:0 0 1.5rem;max-width:64ch;
  font-weight:200;font-size:clamp(.92rem,1.25vw,1.02rem);line-height:1.68;
  color:rgba(255,255,255,.72);
}


/* ══════════════════ 8 · FORMULARIO ══════════════════ */

.form{
  border:1px solid var(--line);border-radius:1.25rem;
  padding:clamp(1.8rem,4vw,3rem);
  background:linear-gradient(150deg,rgba(255,198,0,.04),transparent 55%);
}
.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem 1.4rem}
@media (max-width:720px){ .fgrid{grid-template-columns:1fr} }
.fld{display:flex;flex-direction:column}
.fld.wide{grid-column:1/-1}
.fld label{
  font-family:var(--display);font-weight:600;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.46);margin-bottom:.55rem;
}
.fld label .req{color:var(--yellow);margin-left:.25em}
.fld label .opt{color:rgba(255,255,255,.26);letter-spacing:.08em;margin-left:.5em}
.fld input,.fld textarea,.fld select{
  width:100%;font-family:var(--body);font-weight:300;font-size:.94rem;
  color:var(--white);background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);border-radius:0.375rem;padding:.95rem 1.05rem;
  transition:border-color .35s ease,background .35s ease;
}
.fld textarea{min-height:6.875rem;resize:vertical;line-height:1.6}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(255,255,255,.3)}
.fld input:focus,.fld textarea:focus,.fld select:focus{
  outline:none;border-color:var(--yellow);background:rgba(255,255,255,.06);
}
.fld select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.6rem;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.5) 50%),
                   linear-gradient(135deg,rgba(255,255,255,.5) 50%,transparent 50%);
  background-position:calc(100% - 1.1875rem) 50%,calc(100% - 0.8125rem) 50%;
  background-size:0.375rem 0.375rem,0.375rem 0.375rem;background-repeat:no-repeat;
}
.fld select option{background:#101010;color:#fff}

.consent{grid-column:1/-1;display:flex;align-items:flex-start;gap:.75rem;cursor:pointer;margin-top:.3rem}
.consent input{position:absolute;opacity:0;width:0;height:0}
.consent i{
  width:1.125rem;height:1.125rem;flex:none;margin-top:.1rem;
  border:1px solid rgba(255,255,255,.32);border-radius:0.25rem;
  transition:background .3s ease,border-color .3s ease;
}
.consent input:checked + i{background:var(--yellow);border-color:var(--yellow)}
.consent input:checked + i::after{
  content:'';display:block;width:0.3125rem;height:0.5625rem;margin:1px auto 0;
  border:solid var(--black);border-width:0 2px 2px 0;transform:rotate(42deg);
}
.consent input:focus-visible + i{outline:2px solid var(--yellow);outline-offset:0.1875rem}
.consent span{font-weight:300;font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.55)}

.send{grid-column:1/-1;margin-top:.7rem;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.send .fine{font-weight:200;font-size:.78rem;color:rgba(255,255,255,.38);max-width:34ch}

.done{display:none;text-align:center;padding:clamp(2.5rem,6vh,4rem) 1rem}
.form.sent .fgrid{display:none}
.form.sent .done{display:block}
.done svg{width:3rem;height:3rem;margin:0 auto 1.4rem;stroke:var(--yellow);stroke-width:1.6;fill:none}
.done h3{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.03em;margin-bottom:.8rem}
.done p{font-weight:200;font-size:.95rem;line-height:1.6;color:rgba(255,255,255,.68);max-width:44ch;margin:0 auto}


/* ══════════════════ PIE Y BARRA PEGADA ══════════════════ */

.foot{
  border-top:1px solid var(--line);padding:clamp(2.5rem,5vh,3.5rem) var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.foot img{height:1.875rem;width:auto;opacity:.75}
.foot .lk{display:flex;gap:1.6rem;flex-wrap:wrap}
.foot a{font-size:.82rem;color:rgba(255,255,255,.48);transition:color .35s ease}
.foot a:hover{color:var(--yellow)}
.foot .cr{font-size:.74rem;color:rgba(255,255,255,.3);width:100%}

.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.85rem var(--pad);
  background:rgba(0,0,0,.86);backdrop-filter:blur(0.875rem);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.sticky.on{transform:none}
.sticky p{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--yellow)}
.sticky p span{
  display:block;font-family:var(--body);font-weight:200;font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.44);margin-top:.15rem;
}
.sticky .btn{padding:.7rem 1.5rem;font-size:.84rem}
@media (max-width:420px){
  .sticky p{font-size:.9rem}
  .sticky .btn{padding:.6rem 1.1rem;font-size:.76rem}
}


/* ══════════════════ REVELADO ══════════════════
   OJO: con opacity:0 declarado aqui, un gsap.from() lee el estado
   final desde el CSS, encuentra cero, y anima DE CERO A CERO. El
   bloque no vuelve a aparecer nunca. Por eso la animacion usa fromTo
   con el destino escrito a mano. Ya paso una vez. */
.fx{opacity:0}
.ln{display:block;will-change:transform;backface-visibility:hidden}
.lw{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.reveal-lines .ln{opacity:0}


/* ═════════ LAS CUATRO ESCENAS, VIVAS ═════════
   Cada escena hace lo que hace su formato: el Reel graba, el carrusel
   se desliza, el post anuncia y la historia recibe reacciones. Si un
   movimiento no explica el formato, no va.

   Todo esto es CSS puro y en bucle. No toca a los .fx, que son las
   tarjetas y las mueve GSAP escribiendo transform inline. Estas reglas
   viven en los HIJOS del SVG, asi que las dos capas nunca se pisan.

   Las amplitudes son grandes a proposito: en trazo delgado amarillo
   sobre negro, por debajo de unos 6px en pantalla el ojo no registra
   el movimiento y la animacion se da por rota.

   transform-box:view-box va declarado a mano en todo lo que rota o
   escala, para que el origen se lea en coordenadas del viewBox y no
   dependa del valor inicial del navegador. */


/* ───── REELS: se esta grabando ───── */

/* El marco del telefono respira, como el piloto de grabacion */
.kind .rl-phone{animation:rlRec 2.4s ease-in-out infinite}
@keyframes rlRec{
  0%,100%{stroke-width:1.8;filter:drop-shadow(0 0 0 rgba(255,198,0,0))}
  50%    {stroke-width:3.2;filter:drop-shadow(0 0 7px rgba(255,198,0,.55))}
}

/* El punto de REC parpadeando */
.kind .rl-rec{animation:rlBlink 2.4s ease-in-out infinite}
@keyframes rlBlink{0%,46%{opacity:1}54%,100%{opacity:.12}}

/* El foco salta de un objeto al otro sobre el meson: es un corte de
   plano. El delay negativo pone a los dos en contrafase exacta. */
.kind .rl-sub{transform-box:view-box;animation:rlCut 4.4s ease-in-out infinite}
.kind .rl-a{transform-origin:55px 197px}
.kind .rl-b{transform-origin:107px 197px;animation-delay:-2.2s}
@keyframes rlCut{
  0%,45% {stroke:var(--yellow);stroke-width:2.6;transform:scale(1.09)}
  57%,95%{stroke:rgba(255,255,255,.3);stroke-width:1.6;transform:scale(1)}
  100%   {stroke:var(--yellow);stroke-width:2.6;transform:scale(1.09)}
}

/* La lampara late y los rayos salen */
.kind .rl-bulb{animation:rlBulb 2.4s ease-in-out infinite}
@keyframes rlBulb{0%,100%{opacity:.45}50%{opacity:1}}

.kind .rl-rays{
  transform-box:view-box;transform-origin:152px 66px;
  animation:rlRays 2.4s ease-out infinite;
}
@keyframes rlRays{
  0%,100%{transform:scale(.88);opacity:.3}
  45%    {transform:scale(1.38);opacity:1}
}

/* El boton de play suelta su anillo */
.kind .play::after{
  content:'';position:absolute;inset:-1px;border-radius:50%;
  border:1px solid rgba(255,198,0,.6);
  animation:rlRing 2.4s ease-out infinite;
}
@keyframes rlRing{
  0%      {transform:scale(1);opacity:.85}
  65%,100%{transform:scale(1.85);opacity:0}
}


/* ───── CARRUSEL: se desliza ───── */

/* Un ciclo de 8s con cuatro paradas de 2s. Todo lo demas corre a 2s,
   asi que el swipe, el contenido y el punto caen siempre juntos. */
.kind .cr-dot{
  transform-box:view-box;transform-origin:59px 224px;
  animation:crDot 8s cubic-bezier(.5,0,.2,1) infinite;
}
@keyframes crDot{
  0%,18% {transform:translateX(0)}
  25%,43%{transform:translateX(18px)}
  50%,68%{transform:translateX(36px)}
  75%,93%{transform:translateX(54px)}
  100%   {transform:translateX(0)}
}

/* La lamina de adelante hace el gesto de swipe y regresa */
.kind .cr-front{
  transform-box:view-box;transform-origin:86px 113px;
  animation:crSwipe 2s cubic-bezier(.5,0,.2,1) infinite;
}
@keyframes crSwipe{
  0%,68%{transform:translateX(0) scale(1)}
  86%   {transform:translateX(-22px) scale(.965)}
  100%  {transform:translateX(0) scale(1)}
}

/* Las de atras abren la pila cuando la de adelante se va */
.kind .cr-back{
  transform-box:view-box;transform-origin:86px 113px;
  animation:crBack 2s cubic-bezier(.5,0,.2,1) infinite;
}
@keyframes crBack{
  0%,68%{transform:translateX(0)}
  86%   {transform:translateX(7px)}
  100%  {transform:translateX(0)}
}

/* El contenido se borra y se vuelve a escribir en cada swipe. Renglon
   y vineta se escalan desde su borde izquierdo, con origen fijado en
   coordenadas del viewBox: un fill-box sobre una linea horizontal
   tiene alto cero y no todos los motores lo resuelven igual. */
.kind .cr-l1,.kind .cr-l2,.kind .cr-l3{
  transform-box:view-box;
  animation:crWrite 2s cubic-bezier(.2,.7,.2,1) infinite;
}
.kind .cr-l1{transform-origin:66px 66px}
.kind .cr-l2{transform-origin:66px 94px;animation-delay:.1s}
.kind .cr-l3{transform-origin:66px 122px;animation-delay:.2s}
@keyframes crWrite{
  0%,4%   {transform:scaleX(0)}
  34%,88% {transform:scaleX(1)}
  96%,100%{transform:scaleX(0)}
}

.kind .cr-b1,.kind .cr-b2,.kind .cr-b3{
  transform-box:view-box;
  animation:crBullet 2s cubic-bezier(.2,.7,.2,1) infinite;
}
.kind .cr-b1{transform-origin:52px 66px}
.kind .cr-b2{transform-origin:52px 94px;animation-delay:.1s}
.kind .cr-b3{transform-origin:52px 122px;animation-delay:.2s}
@keyframes crBullet{
  0%,4%   {transform:scale(0);opacity:0}
  30%,88% {transform:scale(1);opacity:1}
  96%,100%{transform:scale(0);opacity:0}
}


/* ───── VISUAL POST: anuncia ───── */

/* Las ondas salen de la boca del megafono, una detras de otra, y se
   encienden en amarillo justo cuando pasan */
.kind .vp-w1,.kind .vp-w2,.kind .vp-w3{
  transform-box:view-box;transform-origin:132px 116px;
  animation:vpWave 2.4s ease-out infinite;
}
.kind .vp-w2{animation-delay:.16s}
.kind .vp-w3{animation-delay:.32s}
@keyframes vpWave{
  0%      {transform:translateX(-7px);opacity:0;stroke:rgba(255,255,255,.45)}
  18%     {opacity:1;stroke:var(--yellow)}
  60%,100%{transform:translateX(9px);opacity:0;stroke:rgba(255,255,255,.45)}
}

/* El megafono retrocede con cada rafaga */
.kind .vp-horn{
  transform-box:view-box;transform-origin:100px 116px;
  animation:vpKick 2.4s cubic-bezier(.3,0,.2,1) infinite;
}
@keyframes vpKick{
  0%,100%{transform:translateX(0)}
  10%    {transform:translateX(-6px)}
  40%    {transform:translateX(0)}
}

/* El copy del anuncio se escribe solo, se queda y se borra */
.kind .vp-t1,.kind .vp-t2{
  transform-box:view-box;
  animation:vpType 4.8s cubic-bezier(.25,.8,.25,1) infinite;
}
.kind .vp-t1{transform-origin:50px 172px}
.kind .vp-t2{transform-origin:50px 186px;animation-delay:.28s}
@keyframes vpType{
  0%  {transform:scaleX(0);opacity:0}
  4%  {transform:scaleX(0);opacity:1}
  26% {transform:scaleX(1);opacity:1}
  82% {transform:scaleX(1);opacity:1}
  94% {transform:scaleX(1);opacity:0}
  100%{transform:scaleX(0);opacity:0}
}


/* ───── HISTORIA: el dia a dia ───── */

/* El marco respira al ritmo de las barritas de arriba, que el JS
   corre a 2.5s por segmento. Mismo numero a proposito. */
.kind .st-phone{animation:stBreathe 2.5s ease-in-out infinite}
@keyframes stBreathe{
  0%,100%{stroke-width:1.8;filter:drop-shadow(0 0 0 rgba(255,198,0,0))}
  50%    {stroke-width:2.9;filter:drop-shadow(0 0 8px rgba(255,198,0,.4))}
}

/* La estrella hace pop, como un sticker de reaccion */
.kind .st-star{
  transform-box:view-box;transform-origin:100px 181px;
  animation:stPop 2.5s cubic-bezier(.34,1.56,.64,1) infinite;
}
@keyframes stPop{
  0%,60%,100%{transform:scale(1) rotate(0deg)}
  14%        {transform:scale(1.42) rotate(-12deg)}
  30%        {transform:scale(.94) rotate(5deg)}
  44%        {transform:scale(1.1) rotate(0deg)}
}

/* Las reacciones que van subiendo y se disipan. Tiempos distintos y
   primos entre si para que nunca suban en pareja. */
.kind .st-react{transform-box:view-box}
.kind .st-r1{transform-origin:34px 60px;animation:stRise 3.6s ease-out infinite}
.kind .st-r2{transform-origin:166px 82px;animation:stRise 4.4s ease-out infinite;animation-delay:1.1s}
@keyframes stRise{
  0%  {transform:translateY(30px) scale(.5);opacity:0}
  18% {opacity:.9}
  70% {opacity:.5}
  100%{transform:translateY(-34px) scale(1.05);opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .fx{opacity:1}
  .reveal-lines .ln{opacity:1;transform:none}
  *{transition-duration:.001ms !important;animation-duration:.001ms !important}
  .kind .ink *{animation:none !important;transform:none !important;opacity:1 !important}
  .kind .play::after{display:none}
}


/* ══════════════════════════════════════════════════════════════════
   ══════════════════════════════════════════════════════════════════

   DE AQUI EN ADELANTE, NADA DE ESTO ESTA EN EL PROTOTIPO

   Son las correcciones que hacen falta por estar dentro de Divi y no
   en una pagina en blanco. Cada una dice contra que pelea. Copiadas
   de css/brand.css, que es el archivo modelo, con .adn-brand cambiado
   por .adn-social. Las dos secciones que brand.css trae al final, el
   aire bajo su banda de precio y sus veinte iconos, son de esa pagina
   y aqui no van.

   ══════════════════════════════════════════════════════════════════
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════ EL LIENZO DE DIVI ══════════════════
   La pagina entera vive dentro de UN modulo Code, dentro de una
   columna, dentro de una fila, dentro de una seccion. Cada una de esas
   cuatro capas trae de fabrica su propio relleno, su propio ancho
   maximo y, en Divi 5, su propio gap.

   Sumadas, meten la landing en una caja de 1080px centrada y con aire
   arriba y abajo: el hero deja de ser a sangre, el fondo negro se
   corta por los lados y las secciones quedan separadas por huecos que
   nadie declaro.

   SE ANULA AQUI Y NO EN EL PANEL DE DIVI A PROPOSITO. Si mañana se
   duplica la pagina, se rehace, o alguien toca un ajuste sin querer,
   esto sigue en pie. El panel se olvida, el archivo no.

   Es la contra del punto 0 del documento de contexto: Divi 5 le pone
   gap a todo lo que hace flex. */

.adn-social .et_pb_section,
.adn-social .et_pb_row,
.adn-social .et_pb_column,
.adn-social .et_pb_module,
.adn-social .et_pb_code_inner{
  padding:0;
  margin:0;
  gap:0;
  width:100%;
  max-width:none;
}


/* ══════════════════ LOS TITULARES CONTRA DIVI ══════════════════
   Divi le pone color:#333 a todos los titulares. En el prototipo eso
   no existia porque corria en una pagina en blanco donde nadie mas los
   tocaba, asi que la hoja los dejaba heredar el blanco del body.

   Montada dentro de Divi ese #333 gana y los titulares salen gris
   oscuro sobre negro. El <em> amarillo se ve intacto porque si declara
   color propio, y todo lo demas del titular queda apagado.

   POR QUE :where() Y NO UNA LISTA NORMAL.
   :where() vale CERO en especificidad, asi que la regla entera pesa lo
   que pesa .adn-social sola: 0,0,1,0.

     - Le gana a Divi, que es 0,0,0,1
     - Pierde contra las reglas propias de esta hoja, que son 0,0,1,1
       (.tier h3, .kind .txt h3, .done h3 y las demas que si declaran
       color)

   Escrita como lista normal, esta regla iria de ultima en el archivo y
   les pisaria el color a todas esas. Con :where() conviven sin que
   importe el orden.

   Dos selectores por seguridad: .adn-social lo pone el body_class de
   functions.php, y .et_pb_code_inner es el contenedor que Divi genera
   alrededor del modulo. Si algun dia se cae uno, el otro sostiene. */

.adn-social       :where(h1,h2,h3,h4,h5,h6),
.et_pb_code_inner :where(h1,h2,h3,h4,h5,h6){
  color:var(--white);
}


/* ══════════════════ LOS CAMPOS CONTRA DIVI ══════════════════
   Mismo caso que los titulares: Divi le pone su color a los input, a
   los textarea y a los select, y le gana al color:var(--white) que ya
   declara este archivo mas arriba. Resultado: lo que la persona
   escribe sale gris oscuro sobre negro y casi no se lee.

   Aqui NO se usa :where() a proposito, al reves que en los titulares.
   Alli hacia falta perder contra las reglas propias del archivo; aqui
   hace falta GANARLE a Divi y no hay ninguna regla propia posterior
   con la que convivir.

   El autocompletado del navegador va aparte: Chrome pinta el campo con
   su propio amarillo del sistema y no se puede cambiar con background.
   La sombra interior gigante es el truco de siempre para taparlo. */

.adn-social .fld input,
.adn-social .fld textarea,
.adn-social .fld select,
.et_pb_code_inner .fld input,
.et_pb_code_inner .fld textarea,
.et_pb_code_inner .fld select{
  color:var(--white);
  -webkit-text-fill-color:var(--white);
}

.adn-social .fld input::placeholder,
.adn-social .fld textarea::placeholder,
.et_pb_code_inner .fld input::placeholder,
.et_pb_code_inner .fld textarea::placeholder{
  color:rgba(255,255,255,.3);
  -webkit-text-fill-color:rgba(255,255,255,.3);
}

.adn-social .fld input:-webkit-autofill,
.et_pb_code_inner .fld input:-webkit-autofill{
  -webkit-text-fill-color:var(--white);
  -webkit-box-shadow:0 0 0 1000px #0d0d0d inset;
  caret-color:var(--white);
}


/* ══════════════════ LA CASILLA DE CONSENTIMIENTO ══════════════════
   Divi le pone class="input" a las casillas de verificacion y las
   pinta. Aqui la casilla real esta escondida y lo que se ve es el <i>
   de al lado, asi que hay que asegurarse de que la de verdad siga
   invisible aunque Divi le declare tamaño o fondo. */

.adn-social .consent input,
.et_pb_code_inner .consent input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
  margin:0;
  padding:0;
  border:0;
}


/* ══════════════════ EL LOGO LLEVA AL INICIO ══════════════════
   DIVERGENCIA DECIDIDA DEL PROTOTIPO. NO REVERTIR.

   En el prototipo, lineas 1095 y 1568, el logo es un <img> suelto, sin
   enlace. Se le da clic y no pasa nada, ni arriba ni en el pie.

   En el marcado de esta pagina los dos logos van envueltos en un <a>
   con clase .home. Estas reglas son para que el enlace no cambie nada
   de como se ve.

   line-height:0 quita el espacio de linea base que un <a> mete debajo
   de la imagen. Sin eso el header crece unos pixeles y la barra deja
   de coincidir con la del resto del sitio. */

.adn-social .hdr .home,
.adn-social .foot .home,
.et_pb_code_inner .hdr .home,
.et_pb_code_inner .foot .home{
  display:block;
  line-height:0;
  flex:none;
  border:0;
}

/* El pie pinta todos sus enlaces de gris y los amarillea al pasar el
   mouse. Al logo no le toca eso: es una imagen, no un texto. Lo que
   recibe es una subida leve de opacidad, que es la señal de que se
   puede pulsar. */
.adn-social .foot .home img,
.et_pb_code_inner .foot .home img{
  transition:opacity .35s ease;
}
.adn-social .foot .home:hover img,
.et_pb_code_inner .foot .home:hover img{
  opacity:1;
}

.adn-social .hdr .home img,
.et_pb_code_inner .hdr .home img{
  transition:opacity .35s ease;
}
.adn-social .hdr .home:hover img,
.et_pb_code_inner .hdr .home:hover img{
  opacity:.82;
}