/* ==========================================================================
   ESSENTIAL STUDIO — dirección B, «Precio a la vista»  ·  desde 2026-09-11
   --------------------------------------------------------------------------
   Reemplaza a «la noche» (2026-09-01 → 2026-09-11). Juanko la eligió entre
   tres direcciones hechas con huashu-design: ver
   salidas/rediseno-sitio/direction-approved.md.

   Referente: Designjoy — una sola persona, servicio productizado, precio
   público y fijo. Lo que hace a B: papel crema, tinta casi negra, stickers
   de las cuatro piezas, sombras DURAS de 2–4 px en tinta (nunca difusas),
   y el precio a la vista desde el hero.

   Tipos: Bricolage Grotesque para titulares, stickers y botones; Newsreader
   para el texto corrido. Las dos autohospedadas y recortadas al español con
   subset-font: 49 + 28 KB. Sin el recorte eran 131 KB cada una.
   ========================================================================== */


/* ==========================================================================
   Fuentes — autohospedadas. La CSP es font-src 'self'. Los ?v= tienen que
   coincidir con los preload del HTML o cada fuente se baja DOS veces.
   ========================================================================== */

@font-face{
  font-family:"Bricolage";
  src:url("/assets/fonts/bricolage.woff2?v=20260911a") format("woff2");
  font-weight:500 800; font-stretch:85% 100%; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("/assets/fonts/newsreader.woff2?v=20260911a") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}


/* ==========================================================================
   Tokens
   ========================================================================== */

:root{
  --papel:   oklch(.975 .01 85);
  --papel-2: oklch(.945 .014 85);
  --papel-3: oklch(.9 .018 85);
  --tinta:   oklch(.22 .03 262);
  --tinta-2: oklch(.42 .025 262);     /* texto secundario: 7,6:1 sobre papel */
  --tinta-3: oklch(.42 .025 262 / .4);/* filetes punteados, nunca texto */
  /* Copihue: la flor nacional ocupa el lugar del magenta de Designjoy. Va en
     L .52 y no .55 por el contraste: con papel encima, a .55 quedaba en 4,5:1
     justo, y un botón de 17 px no es «texto grande». A .52 son 5:1. */
  --copihue: oklch(.52 .19 14);
  --copihue-2: oklch(.93 .04 14);
  --lluvia:  oklch(.42 .09 255);
  --lluvia-2:oklch(.93 .03 255);
  --sol:     oklch(.88 .12 90);
  --sol-2:   oklch(.96 .05 90);

  /* Derivados: con alfa o un paso más claros. Viven acá y no sueltos en las
     reglas, para que ningún color exista fuera de esta lista. */
  --marcador:    oklch(.52 .19 14 / .3);    /* el resaltador del hero */
  --lluvia-3:    oklch(.52 .06 255);        /* placeholder: 5:1 sobre papel */
  --tinta-globo: oklch(.32 .03 262);
  --sombra-fono: oklch(.22 .03 262 / .22);

  --display:"Bricolage", "Arial Narrow", Arial, sans-serif;
  --texto:"Newsreader", Georgia, "Times New Roman", serif;

  --lienzo: min(100% - 2 * clamp(1.25rem, 4vw, 3rem), 1180px);
  --t-h2: clamp(2.1rem, 1rem + 3vw, 3.6rem);

  --sal: cubic-bezier(.16, 1, .3, 1);
  --rapido: 160ms;
  --medio: 280ms;
}


/* ==========================================================================
   Base
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; background:var(--papel); overflow-x:clip; }
body{
  margin:0;
  overflow-x:clip;   /* red de seguridad: nada arrastra la página de lado. clip y no hidden: no rompe sticky ni el pin */
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:19px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
@media (max-width:640px){ body{ font-size:18px; } }
h1,h2,h3,p,ul,ol,dl,dd,figure{ margin:0; }
h1,h2,h3{ text-wrap:balance; }
p{ text-wrap:pretty; }
img,svg,canvas{ display:block; max-width:100%; }
[hidden]{ display:none !important; }

::selection{ background:var(--sol); color:var(--tinta); }
:focus-visible{ outline:3px solid var(--lluvia); outline-offset:3px; border-radius:8px; }

.oculto{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.lienzo{ width:var(--lienzo); margin-inline:auto; }

.salto{
  position:absolute; left:1rem; top:1rem; z-index:60;
  transform:translateY(-200%);
  font-family:var(--display); font-weight:700; font-size:.95rem;
  background:var(--tinta); color:var(--papel);
  padding:.7rem 1rem; border-radius:999px; text-decoration:none;
  transition:transform var(--medio) var(--sal);
}
.salto:focus-visible{ transform:translateY(0); }


/* ==========================================================================
   Los botones — sombra dura: al apretar, el botón baja hasta su sombra
   ========================================================================== */

.boton, .accion{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--display); font-weight:700; font-size:1.05rem; line-height:1.1;
  text-decoration:none; text-align:center; white-space:nowrap;
  padding:1rem 1.5rem; border:0; border-radius:999px; cursor:pointer;
  transition:transform var(--rapido) var(--sal), box-shadow var(--rapido) var(--sal);
}
.boton--lleno, .accion--principal{
  background:var(--copihue); color:var(--papel);
  box-shadow:0 3px 0 var(--tinta);
}
.boton--linea, .accion:not(.accion--principal){
  background:var(--papel); color:var(--tinta);
  box-shadow:inset 0 0 0 2px var(--tinta), 0 3px 0 var(--tinta);
}
.boton--papel{
  background:var(--papel); color:var(--tinta);
  box-shadow:inset 0 0 0 2px var(--tinta), 0 3px 0 var(--tinta);
}
@media (hover:hover) and (pointer:fine){
  .boton--lleno:hover, .accion--principal:hover{ transform:translateY(-1px); box-shadow:0 4px 0 var(--tinta); }
  .boton--linea:hover, .boton--papel:hover, .accion:not(.accion--principal):hover{
    transform:translateY(-1px); box-shadow:inset 0 0 0 2px var(--tinta), 0 4px 0 var(--tinta);
  }
}
.boton--lleno:active, .accion--principal:active{ transform:translateY(3px); box-shadow:0 0 0 var(--tinta); }
.boton--linea:active, .boton--papel:active, .accion:not(.accion--principal):active{
  transform:translateY(3px); box-shadow:inset 0 0 0 2px var(--tinta), 0 0 0 var(--tinta);
}

.acciones{ display:flex; flex-wrap:wrap; gap:.8rem; }
/* En 320–360 px «Empezar con Captación» no cabía y se partía en dos líneas:
   un botón partido parece roto. Se angosta la letra (el eje de ancho de
   Bricolage) antes que cortar la etiqueta. */
@media (max-width:360px){ .boton, .accion{ padding-inline:1rem; font-size:1rem; font-stretch:90%; } }


/* ==========================================================================
   La barra — simétrica, la marca al centro. Las páginas legales usan
   .cabecera con .navegacion: misma voz, otra estructura.
   ========================================================================== */

.barra{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding-block:1.4rem;
}
.barra__izq{ display:flex; gap:1.4rem; }
.barra__izq a, .navegacion a{
  font-family:var(--display); font-weight:600; font-size:.98rem;
  color:var(--tinta-2); text-decoration:none;
  transition:color var(--rapido) var(--sal);
}
@media (hover:hover){ .barra__izq a:hover, .navegacion a:hover{ color:var(--tinta); } }
.marca{
  font-family:var(--display); font-weight:800; font-stretch:88%;
  font-size:1.35rem; letter-spacing:-.02em; line-height:1;
  color:var(--tinta); text-decoration:none; white-space:nowrap;
}
.barra__der{ display:flex; justify-content:flex-end; }
.pildora{
  font-family:var(--display); font-weight:700; font-size:.98rem;
  background:var(--tinta); color:var(--papel); text-decoration:none;
  padding:.62rem 1.1rem; border-radius:999px;
  transition:transform var(--rapido) var(--sal);
}
.pildora:active{ transform:scale(.97); }
@media (max-width:760px){
  .barra{ grid-template-columns:auto 1fr; }
  .barra__izq{ display:none; }
}

body > .cabecera{
  width:var(--lienzo); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-block:1.4rem;
  border-bottom:2px solid var(--tinta);
}
.navegacion{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; justify-content:flex-end; }


/* ==========================================================================
   ① EL HERO — centrado, con los stickers de las cuatro piezas alrededor
   ========================================================================== */

.hero{
  position:relative;
  text-align:center;
  padding-block:clamp(2rem, 6vh, 4.5rem) clamp(2rem, 5vh, 3.5rem);
}

/* El sello de la garantía: el único amarillo grande de la página */
.sello{
  display:inline-flex; align-items:center; gap:.7rem;
  text-decoration:none; color:var(--tinta);
  background:var(--sol); border-radius:999px;
  padding:.45rem 1rem .45rem .45rem;
  font-family:var(--display); font-weight:600; font-size:.92rem;
  transform:rotate(-2deg);
  box-shadow:0 2px 0 var(--tinta);
}
.sello b{
  display:grid; place-items:center; flex:none;
  width:2.2rem; height:2.2rem; border-radius:50%;
  background:var(--tinta); color:var(--sol);
  font-size:1.15rem; font-weight:800;
}
.sello span{ text-align:left; line-height:1.15; }
/* En 320 px el sello quedaba en tres líneas con «plazo» sola al medio */
@media (max-width:400px){ .sello{ font-size:.84rem; font-stretch:88%; } .sello br{ display:none; } .sello span{ text-wrap:balance; } }

.hero h1{
  margin:1.5rem auto 0;
  max-width:15ch;
  font-family:var(--display); font-weight:800; font-stretch:86%;
  font-size:clamp(2.6rem, 1rem + 5vw, 5.6rem);
  line-height:.96; letter-spacing:-.035em;
}

/* EL REMATE, RESALTADO A MANO. La banda copihue barre de izquierda a derecha
   después de que entran las palabras, como un plumón. Es background-size
   sobre un elemento en línea: se corta por línea y barre las dos seguidas. */
.hero h1 em{
  font-style:normal;
  padding-inline:.06em;
  background:linear-gradient(to bottom,
      transparent 62%, var(--marcador) 62%,
      var(--marcador) 92%, transparent 92%)
    no-repeat 0 0 / 0% 100%;
  animation:marcar .8s var(--sal) .78s forwards;
}
@keyframes marcar{ to{ background-size:100% 100%; } }

/* La entrada del titular, en CSS puro: cada palabra sube desde detrás de su
   máscara. En CSS y no en GSAP porque GSAP carga DESPUÉS del LCP. Si el
   JavaScript falla entero, el titular igual entra. Retardos escritos uno por
   uno: por variable pedirían un atributo style, y la CSP no los permite. */
.hero h1 .m{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.14em; margin-bottom:-.14em;
}
.hero h1 .palabra{
  display:inline-block;
  transform:translateY(110%);
  animation:subir .9s var(--sal) forwards;
}
@keyframes subir{ to{ transform:translateY(0); } }
.hero h1 > .m:nth-child(1) .palabra{ animation-delay:.06s; }
.hero h1 > .m:nth-child(2) .palabra{ animation-delay:.10s; }
.hero h1 > .m:nth-child(3) .palabra{ animation-delay:.14s; }
.hero h1 > .m:nth-child(4) .palabra{ animation-delay:.18s; }
.hero h1 > .m:nth-child(5) .palabra{ animation-delay:.22s; }
.hero h1 > .m:nth-child(6) .palabra{ animation-delay:.26s; }
.hero h1 > .m:nth-child(7) .palabra{ animation-delay:.30s; }
.hero h1 em .m:nth-child(1) .palabra{ animation-delay:.38s; }
.hero h1 em .m:nth-child(2) .palabra{ animation-delay:.42s; }
.hero h1 em .m:nth-child(3) .palabra{ animation-delay:.46s; }
.hero h1 em .m:nth-child(4) .palabra{ animation-delay:.50s; }
.hero h1 em .m:nth-child(5) .palabra{ animation-delay:.54s; }
.hero h1 em .m:nth-child(6) .palabra{ animation-delay:.58s; }

.hero .bajada{
  margin:1.5rem auto 0; max-width:46ch;
  font-size:1.15rem; color:var(--tinta-2);
}
.hero .acciones{ justify-content:center; margin-top:2rem; }
.cobertura{
  margin-top:1.4rem;
  font-family:var(--display); font-weight:500; font-size:.95rem;
  color:var(--tinta-2);
}
.cobertura b{ color:var(--tinta); font-weight:700; }

/* El resto del hero entra detrás del titular, con la misma curva */
.sello{ animation:bajar .6s var(--sal) backwards; }
.hero .bajada{ animation:aparecer .7s var(--sal) .62s backwards; }
.hero .acciones{ animation:aparecer .7s var(--sal) .72s backwards; }
.cobertura{ animation:aparecer .7s var(--sal) .82s backwards; }
.tarifas{ animation:aparecer .8s var(--sal) .92s backwards; }
@keyframes aparecer{ from{ opacity:0; transform:translateY(12px); } }
@keyframes bajar{ from{ opacity:0; transform:rotate(-2deg) translateY(-10px); } }

/* LOS STICKERS. Por fuera, .sticker se posiciona y lo mueve el cursor
   (GSAP); por dentro, .sticker__cara lleva el color, el giro y la entrada.
   Separados porque dos cosas no pueden pelearse por el mismo transform. */
.stickers{ position:absolute; inset:0; pointer-events:none; }
.sticker{ position:absolute; }
.sticker__cara{
  display:inline-block;
  font-family:var(--display); font-weight:700; font-size:.95rem;
  padding:.55rem .9rem; border-radius:12px;
  box-shadow:0 2px 0 var(--tinta);
  white-space:nowrap;
  transform:rotate(var(--giro, 0deg));
  animation:pegar .55s var(--sal) backwards;
}
@keyframes pegar{
  from{ opacity:0; transform:rotate(calc(var(--giro, 0deg) * 2.4)) scale(1.2) translateY(-14px); }
}
.s1{ left:3%;  top:30%; }
.s2{ right:4%; top:26%; }
.s3{ left:7%;  top:58%; }
.s4{ right:6%; top:56%; }
.s1 .sticker__cara{ --giro:-7deg; background:var(--copihue); color:var(--papel); animation-delay:1.00s; }
.s2 .sticker__cara{ --giro:6deg;  background:var(--lluvia);  color:var(--papel); animation-delay:1.08s; }
.s3 .sticker__cara{ --giro:4deg;  background:var(--sol);     color:var(--tinta); animation-delay:1.16s; }
.s4 .sticker__cara{ --giro:-5deg; background:var(--tinta);   color:var(--papel); animation-delay:1.24s; }
@media (max-width:1100px){
  .stickers{
    position:static; pointer-events:auto;
    display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem;
    margin-top:1.6rem;
  }
  .sticker{ position:static; }
}

/* La tira de precios: el diferenciador, en el hero */
.tarifas{
  margin:clamp(2.5rem, 6vh, 3.5rem) auto 0;
  max-width:980px;
  display:grid; grid-template-columns:repeat(3, 1fr);
  border:2px solid var(--tinta); border-radius:20px; overflow:hidden;
  background:var(--papel); box-shadow:0 4px 0 var(--tinta);
  text-align:left;
}
.tarifa{ padding:1.1rem 1.3rem; }
.tarifa + .tarifa{ border-left:2px solid var(--tinta); }
.tarifa__nombre{
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--display); font-weight:700; font-size:.95rem;
}
.tarifa__monto{
  margin-top:.2rem;
  font-family:var(--display); font-weight:800; font-stretch:88%;
  font-size:clamp(1.5rem, 1rem + 1.3vw, 2.1rem); letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.tarifa__resto{ font-size:.95rem; color:var(--tinta-2); }
.tarifas__pie{
  grid-column:1 / -1;
  border-top:2px solid var(--tinta); background:var(--papel-2);
  padding:.7rem 1.3rem;
  font-family:var(--display); font-weight:500; font-size:.9rem;
}
.etiqueta{
  font-family:var(--display); font-style:normal; font-size:.72rem; font-weight:700;
  background:var(--copihue); color:var(--papel);
  padding:.14rem .55rem; border-radius:999px; letter-spacing:.02em; white-space:nowrap;
}
@media (max-width:760px){
  .tarifas{ grid-template-columns:1fr; }
  .tarifa + .tarifa{ border-left:0; border-top:2px solid var(--tinta); }
}


/* ==========================================================================
   ② LAS TRES PROMESAS — tres cifras, sin cajas. No cuentan hacia arriba:
   un contador mostraría «4 días» un instante, y eso es una afirmación falsa.
   ========================================================================== */

.promesas{
  margin-top:clamp(2.5rem, 6vw, 4rem);
  border-block:2px solid var(--tinta);
}
.promesas ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, 1fr);
}
.promesas li{
  display:grid; grid-template-columns:auto 1fr; gap:.15rem 1rem; align-items:center;
  padding:1.5rem 1.4rem;
}
.promesas li + li{ border-left:2px solid var(--tinta); }
.promesas .cifra{
  grid-row:span 2;
  font-family:var(--display); font-weight:800; font-stretch:86%;
  font-size:clamp(3.4rem, 2rem + 3vw, 4.8rem); line-height:.85; letter-spacing:-.04em;
}
.promesas li:nth-child(1) .cifra{ color:var(--copihue); }
.promesas li:nth-child(2) .cifra{ color:var(--lluvia); }
.promesas .promesa{ font-family:var(--display); font-weight:700; font-size:1.08rem; }
.promesas .nota{ font-size:1rem; color:var(--tinta-2); line-height:1.4; }
@media (max-width:820px){
  .promesas ul{ grid-template-columns:1fr; }
  .promesas li + li{ border-left:0; border-top:2px solid var(--tinta); }
}


/* ==========================================================================
   Los bloques de lectura
   ========================================================================== */

.seccion{ padding-block:clamp(4rem, 9vw, 7rem); }
.seccion h2, .precios h2, .demo h2{
  font-family:var(--display); font-weight:800; font-stretch:86%;
  font-size:var(--t-h2); line-height:1; letter-spacing:-.03em;
}
.entrada{ margin-top:1.1rem; max-width:52ch; font-size:1.12rem; color:var(--tinta-2); }

/* ③ El problema: la pregunta a la izquierda, la respuesta a la derecha */
.problema{
  display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);
  gap:clamp(1.5rem, 5vw, 4.5rem); align-items:start;
}
.problema h2{ max-width:14ch; }
.problema__texto p{ font-size:1.14rem; color:var(--tinta-2); }
.problema__texto p + p{ margin-top:1.1rem; }
.problema__texto b{ color:var(--tinta); font-weight:700; }
@media (max-width:860px){ .problema{ grid-template-columns:1fr; } }


/* ==========================================================================
   ④ EL SISTEMA — escena cinemática (S2). Desde 768 px el bloque se fija y los
   cuatro stickers se pegan uno por uno en el tablero; cada uno enciende su
   pieza en la lista. Al final llega la consulta. Sin GSAP —o con movimiento
   reducido— el tablero ya está armado y la lista toda encendida.
   ========================================================================== */

/* Los stickers del tablero entran girados y un poco grandes: en 390 px
   asomaban 28 px y la página se arrastraba de lado. clip y no hidden: clip no
   crea un contenedor de scroll, así que el pin de ScrollTrigger sigue igual. */
#sistema{ overflow-x:clip; }

.sistema__recorrido{
  margin-top:clamp(2rem, 5vw, 3.5rem);
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.08fr);
  gap:clamp(1.5rem, 5vw, 4rem); align-items:center;
}
.piezas{ display:flex; flex-direction:column; gap:1rem; }
.pieza{
  padding:1rem 1.15rem 1.1rem;
  border:2px solid var(--tinta); border-radius:16px;
  background:var(--papel); box-shadow:0 3px 0 var(--tinta);
  transition:transform var(--medio) var(--sal), box-shadow var(--medio) var(--sal), background-color var(--medio) var(--sal);
}
.pieza:nth-child(1){ --color-pieza:var(--copihue); }
.pieza:nth-child(2){ --color-pieza:var(--lluvia); }
.pieza:nth-child(3){ --color-pieza:var(--sol); }
.pieza:nth-child(4){ --color-pieza:var(--tinta); }
.pieza dt{
  display:flex; align-items:center; flex-wrap:wrap; gap:.6rem;
  font-family:var(--display); font-weight:700; font-size:1.15rem; line-height:1.2;
}
/* El cuadrito de color amarra la pieza con su sticker del tablero */
.pieza dt::before{
  content:""; flex:none;
  width:.95rem; height:.95rem; border-radius:4px;
  background:var(--color-pieza); box-shadow:0 1.5px 0 var(--tinta);
}
.pieza dd{ margin-top:.45rem; font-size:1rem; line-height:1.5; color:var(--tinta-2); }
.alcance{
  font-family:var(--display); font-size:.72rem; font-weight:700;
  background:var(--lluvia); color:var(--papel);
  padding:.14rem .55rem; border-radius:999px; white-space:nowrap;
}
/* Apagada: sin sombra y sobre papel-2. El texto NO se atenúa: el contraste
   queda igual. Encendida: sube a su sombra. */
.con-gsap .pieza{ background:var(--papel-2); box-shadow:0 0 0 var(--tinta); }
.con-gsap .pieza--encendida{ background:var(--papel); box-shadow:0 4px 0 var(--tinta); transform:translateY(-3px); }

.tablero{
  position:relative;
  background:var(--lluvia-2);
  border:2px solid var(--tinta); border-radius:24px; box-shadow:0 4px 0 var(--tinta);
  padding:clamp(1.2rem, 3vw, 2rem);
}
.tablero__titulo{
  font-family:var(--display); font-weight:700; font-size:.95rem;
  color:var(--tinta-2); margin-bottom:1rem;
}
.tablero__casillas{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.casilla{
  min-height:96px; display:grid; place-items:center; padding:.6rem;
  border:2px dashed var(--tinta-3); border-radius:14px;
}
.sticker-pieza{
  display:inline-block;
  font-family:var(--display); font-weight:800; font-size:clamp(1rem, .8rem + .6vw, 1.25rem);
  padding:.7rem 1rem; border-radius:12px; box-shadow:0 3px 0 var(--tinta);
  white-space:nowrap;
}
.sp1{ background:var(--copihue); color:var(--papel); transform:rotate(-3deg); }
.sp2{ background:var(--lluvia);  color:var(--papel); transform:rotate(2deg); }
.sp3{ background:var(--sol);     color:var(--tinta); transform:rotate(-2deg); }
.sp4{ background:var(--tinta);   color:var(--papel); transform:rotate(3deg); }
.tablero__aviso{
  margin-top:1.2rem;
  display:flex; align-items:center; gap:.4rem .7rem; flex-wrap:wrap;
  background:var(--papel);
  border:2px solid var(--tinta); border-radius:14px; box-shadow:0 3px 0 var(--tinta);
  padding:.8rem 1rem;
  font-family:var(--display); font-weight:500; font-size:.98rem; color:var(--tinta-2);
}
/* El punto copihue es un estado —no leída—, no un adorno */
.tablero__aviso::before{
  content:""; width:.7rem; height:.7rem; border-radius:50%; background:var(--copihue); flex:none;
}
.tablero__aviso b{ color:var(--tinta); font-weight:800; font-size:1.05rem; }
@media (max-width:860px){ .sistema__recorrido{ grid-template-columns:1fr; } }
@media (max-width:420px){ .sticker-pieza{ white-space:normal; text-align:center; } }


/* ==========================================================================
   ⑤ TU SITIO EN 10 SEGUNDOS — la frase para completar, tu dominio y el
   celular 3D (S3). Sin WebGL2, con movimiento reducido o con poca memoria,
   queda el celular en CSS, que dice exactamente lo mismo.
   ========================================================================== */

.demo{
  margin-block:clamp(1rem, 4vw, 2.5rem);
  overflow:hidden;   /* el lienzo del celular sobresale para que al inclinarse no se corte */
  background:var(--lluvia-2);
  border:2px solid var(--tinta); border-radius:32px; box-shadow:0 5px 0 var(--tinta);
  padding:clamp(2rem, 5vw, 4rem) clamp(1.25rem, 5vw, 4rem);
}
.demo h2{ text-align:center; }
.demo__entrada{ margin:1rem auto 0; max-width:50ch; text-align:center; color:var(--tinta-2); font-size:1.08rem; }

.frase{
  margin:clamp(2rem, 4vw, 3rem) auto 0; max-width:980px;
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.35rem, 1rem + 1.4vw, 2.2rem); line-height:1.75; letter-spacing:-.015em;
  text-align:center;
}
.hueco{
  display:inline-block; vertical-align:baseline;
  font:inherit; font-weight:800; color:var(--lluvia);
  background:var(--papel);
  border:0; border-bottom:3px solid var(--lluvia); border-radius:10px 10px 0 0;
  padding:.05em .35em; margin:0 .15em; min-width:6ch; max-width:100%;
  text-align:center; outline:none;
  transition:background-color 200ms var(--sal);
}
/* El placeholder también es texto: con / .5 quedaba en 2,4:1 sobre papel. Sólido
   en L .52 da 5:1, y lo distingue de lo escrito el peso (500 contra 800). */
.hueco::placeholder{ color:var(--lluvia-3); font-weight:500; }
.hueco:focus{ background:var(--sol); }
.hueco:focus-visible{ box-shadow:0 0 0 3px var(--lluvia); }
select.hueco{ appearance:none; cursor:pointer; min-width:0; }

.vista{
  margin-top:clamp(2rem, 4vw, 3rem);
  display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, .8fr);
  gap:clamp(1.25rem, 3vw, 2.5rem); align-items:center;
}
.navegador{
  background:var(--papel);
  border:2px solid var(--tinta); border-radius:18px; box-shadow:0 4px 0 var(--tinta);
  overflow:hidden;
}
.navegador__barra{
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem .8rem; border-bottom:2px solid var(--tinta); background:var(--papel-2);
}
.navegador__url{
  flex:1; min-width:0;
  font-family:var(--display); font-weight:600; font-size:.88rem;
  background:var(--papel); border-radius:999px; padding:.25rem .8rem;
  color:var(--tinta-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.navegador__url b{ color:var(--tinta); }
.mini{
  min-height:260px;
  display:flex; flex-direction:column; justify-content:center; gap:.8rem;
  padding:clamp(1.25rem, 3vw, 2.2rem);
  background:radial-gradient(120% 90% at 100% 0%, var(--copihue-2), transparent 60%);
}
.mini__marca{
  font-family:var(--display); font-weight:800; font-stretch:88%;
  font-size:clamp(1.8rem, 1rem + 2.4vw, 3rem); line-height:1; letter-spacing:-.03em;
  overflow-wrap:anywhere;
}
.mini__linea{ font-size:1.1rem; color:var(--tinta-2); }
.mini__boton{
  align-self:flex-start;
  font-family:var(--display); font-weight:700; font-size:.95rem;
  background:var(--copihue); color:var(--papel);
  padding:.7rem 1.1rem; border-radius:999px; box-shadow:0 3px 0 var(--tinta);
}

/* El celular: en CSS es el respaldo; encima monta el 3D, más grande que la
   caja para que al inclinarse no se corte. */
.escena{ position:relative; perspective:900px; }
.fono{
  transform:rotateY(-14deg) rotateX(6deg) rotate(2deg); transform-style:preserve-3d;
  background:var(--tinta); border-radius:30px;
  padding:.8rem .7rem 1rem;
  box-shadow:14px 20px 0 -6px var(--sombra-fono);
  transition:opacity .5s var(--sal);
}
.fono__hora{
  display:flex; justify-content:space-between; padding:0 .4rem .6rem;
  font-family:var(--display); font-weight:700; font-size:.85rem; color:var(--papel-3);
}
.globo{
  font-family:var(--display); font-weight:500; font-size:.86rem; line-height:1.4;
  padding:.55rem .7rem; border-radius:14px; margin-bottom:.5rem; max-width:94%;
}
.globo--cliente{ background:var(--tinta-globo); color:var(--papel); margin-left:auto; border-bottom-right-radius:4px; }
.globo--negocio{ background:var(--papel); color:var(--tinta); border-bottom-left-radius:4px; }
.globo--negocio b{ display:block; font-weight:800; font-size:.8rem; margin-bottom:.15rem; color:var(--copihue); }
.globo small{ display:block; text-align:right; font-size:12px; opacity:.75; margin-top:.15rem; }
.escena__lienzo{ position:absolute; inset:-10% -18%; pointer-events:none; }
.escena__lienzo canvas{ width:100%; height:100%; opacity:0; transition:opacity .7s var(--sal); }
.escena__lienzo.escena--viva canvas{ opacity:1; }
.celular--vivo .fono{ opacity:0; }

.demo__cta{ margin-top:clamp(2rem, 4vw, 2.8rem); text-align:center; }
.demo__nota{ margin:.9rem auto 0; max-width:46ch; text-align:center; font-size:.95rem; color:var(--tinta-2); }
@media (max-width:820px){
  .vista{ grid-template-columns:1fr; }
  .escena{ max-width:330px; width:100%; margin-inline:auto; }
  .fono{ transform:rotate(-2deg); }
}


/* ==========================================================================
   ⑥ PRECIOS — los metaballs pintados con los colores de B
   --------------------------------------------------------------------------
   Juanko pidió los metaballs para este bloque, y se quedan: ahora sol,
   copihue y lluvia sobre el crema. Las tarjetas son OPACAS (papel), así que
   el texto nunca queda sobre las burbujas; el velo protege el título y las
   notas de abajo. La reserva estática —sin WebGL o con movimiento reducido—
   son los mismos colores en formas parecidas.
   ========================================================================== */

.precios{
  position:relative; isolation:isolate; overflow:hidden;
  padding-block:clamp(4rem, 9vw, 7rem);
}
.fondo-precios{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(22% 26% at 84% 16%, color-mix(in oklch, var(--sol) 90%, transparent) 0%, transparent 70%),
    radial-gradient(28% 32% at 10% 66%, color-mix(in oklch, var(--copihue) 55%, transparent) 0%, transparent 72%),
    radial-gradient(20% 24% at 62% 94%, color-mix(in oklch, var(--lluvia) 45%, transparent) 0%, transparent 70%),
    var(--papel);
}
.fondo-precios canvas{ width:100%; height:100%; }
.precios::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom,
    var(--papel) 0%,
    color-mix(in oklch, var(--papel) 92%, transparent) 12%,
    color-mix(in oklch, var(--papel) 35%, transparent) 30%,
    color-mix(in oklch, var(--papel) 30%, transparent) 72%,
    color-mix(in oklch, var(--papel) 90%, transparent) 90%,
    var(--papel) 100%);
}
.precios__cuerpo{ position:relative; z-index:2; }
.precios .entrada{ color:var(--tinta); }

.planes{
  margin-top:clamp(2rem, 5vw, 3rem);
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.25rem; align-items:start;
}
/* Las siete filas de las tres tarjetas, alineadas con subgrid: si mañana un
   plan suma o resta un ítem, las filas siguen cuadradas solas. Va con el
   hijo directo para ganarle en especificidad al display:flex de abajo. */
@media (min-width:901px){
  @supports (grid-template-rows: subgrid){
    .planes{ grid-template-rows:repeat(7, auto); align-items:stretch; }
    .planes > .plan{ display:grid; grid-template-rows:subgrid; grid-row:span 7; }
  }
}
.plan{
  position:relative;
  display:flex; flex-direction:column;
  padding:1.6rem;
  border:2px solid var(--tinta); border-radius:20px;
  background:var(--papel); box-shadow:0 4px 0 var(--tinta);
  transition:box-shadow var(--medio) var(--sal);
}
/* «Recomendado» y NO «el más elegido»: con cero clientes lo segundo sería
   mentira. Se distingue por el fondo sol y la etiqueta, no inflándola. */
.plan--recomendado{ background:var(--sol-2); }
/* La que calza con lo que marcaste en «Arma tu paquete» */
.plan--calza{ box-shadow:0 0 0 4px var(--sol), 0 4px 0 4px var(--tinta); }
.plan h3{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--display); font-weight:800; font-size:1.35rem; letter-spacing:-.01em;
}
.plan .precio{ margin-top:1rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem; }
.plan .moneda{ font-family:var(--display); font-weight:700; font-size:.95rem; color:var(--tinta-2); }
.plan .monto{
  font-family:var(--display); font-weight:800; font-stretch:88%;
  font-size:2.4rem; letter-spacing:-.03em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.plan .periodo{ width:100%; font-size:1rem; color:var(--tinta-2); }
.plan .periodo b{ color:var(--tinta); font-weight:700; }
.plan .promesa{ margin-top:.8rem; font-size:1.02rem; color:var(--tinta-2); line-height:1.45; }
.plan .acciones{ margin-block:1.3rem; }
.plan .acciones .boton{ width:100%; }
.plan .rotulo{
  padding-top:1rem; border-top:2px dashed var(--tinta-3);
  font-family:var(--display); font-weight:700; font-size:.8rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-2);
}
.plan .incluye{
  list-style:none; padding:0; margin-top:.8rem;
  display:flex; flex-direction:column; gap:.6rem;
  font-size:1rem; line-height:1.45;
}
.plan .incluye li{ position:relative; padding-left:1.6rem; }
/* El check es dos filetes: cero marcado y cero peso frente a un ícono */
.plan .incluye li::before{
  content:""; position:absolute; left:.2rem; top:.32em;
  width:.45rem; height:.8rem;
  border:solid var(--tinta); border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg);
}
.plan .condicion{
  margin-top:auto; padding-top:1.1rem;
  font-family:var(--display); font-weight:500; font-size:.95rem; color:var(--tinta-2);
}
.plan .condicion b{ color:var(--tinta); font-weight:700; }
@media (max-width:900px){
  .planes{ grid-template-columns:1fr; }
  .plan .condicion{ margin-top:1rem; }
}

.pago{
  margin-top:1.8rem; text-align:center;
  font-family:var(--display); font-weight:500; font-size:.95rem; color:var(--tinta);
}

/* ---- ARMA TU PAQUETE ------------------------------------------------------
   Marcas lo que necesitas y te dice qué plan calza y cuánto cuesta. Sin
   formulario (la CSP tiene form-action 'none'): son casillas sueltas y el
   resultado se calcula en la página. Oculto sin JavaScript: una calculadora
   que no calcula es peor que ninguna. */
.arma{
  margin-top:clamp(2.5rem, 6vw, 4rem);
  display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr);
  gap:1.2rem clamp(1.25rem, 4vw, 3rem); align-items:start;
  background:var(--papel);
  border:2px solid var(--tinta); border-radius:24px; box-shadow:0 4px 0 var(--tinta);
  padding:clamp(1.25rem, 4vw, 2.5rem);
}
.arma__cabeza{ grid-column:1 / -1; }
.arma h3{
  font-family:var(--display); font-weight:800; font-stretch:88%;
  font-size:clamp(1.6rem, 1rem + 1.8vw, 2.4rem); line-height:1.05; letter-spacing:-.02em;
}
.arma__entrada{ margin-top:.5rem; color:var(--tinta-2); }
.arma__opciones{ border:0; padding:0; margin:0; min-width:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.opcion{ position:relative; display:inline-flex; }
.opcion input{ position:absolute; opacity:0; width:1px; height:1px; }
.opcion span{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--display); font-weight:600; font-size:1rem; line-height:1.25;
  padding:.62rem .9rem; border-radius:12px;
  border:2px solid var(--tinta); background:var(--papel); box-shadow:0 2px 0 var(--tinta);
  cursor:pointer; user-select:none;
  transition:transform var(--rapido) var(--sal), background-color var(--rapido) var(--sal), box-shadow var(--rapido) var(--sal);
}
.opcion span::before{
  content:""; flex:none;
  width:.95rem; height:.95rem; border-radius:4px;
  border:2px solid var(--tinta); background:var(--papel);
}
.opcion input:checked + span{ background:var(--sol); transform:rotate(-1deg); }
.opcion input:checked + span::before{ background:var(--tinta); box-shadow:inset 0 0 0 2px var(--papel); }
.opcion input:focus-visible + span{ outline:3px solid var(--lluvia); outline-offset:3px; }
.opcion span:active{ transform:translateY(2px); box-shadow:0 0 0 var(--tinta); }
.arma__resultado{
  min-height:13rem;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--lluvia-2);
  border:2px solid var(--tinta); border-radius:18px;
  padding:1.3rem 1.4rem;
}
.arma__vacio{ font-family:var(--display); font-weight:600; font-size:1.05rem; color:var(--tinta-2); }
.arma__plan{ display:flex; flex-direction:column; align-items:flex-start; }
.arma__nombre{ font-family:var(--display); font-weight:600; font-size:1.02rem; }
.arma__nombre b{
  display:block; margin-top:.1rem;
  font-weight:800; font-stretch:86%; font-size:2.4rem; letter-spacing:-.03em; line-height:1;
}
.arma__precio{ margin-top:.6rem; font-family:var(--display); font-weight:700; font-size:1.1rem; }
.arma__nota{ margin-top:.5rem; font-size:.98rem; color:var(--tinta-2); }
.arma__plan .boton{ margin-top:1.1rem; }
@media (max-width:860px){ .arma{ grid-template-columns:1fr; } }

.excepcion{
  margin-top:clamp(2rem, 5vw, 3rem);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  padding-top:1.6rem; border-top:2px dashed var(--tinta-3);
}
.excepcion p{ max-width:46ch; color:var(--tinta-2); }
.excepcion b{ color:var(--tinta); }
@media (max-width:620px){ .excepcion .boton{ width:100%; } }


/* ==========================================================================
   ⑦ EL PROCESO — cuatro pasos y la línea de los 5 días
   ========================================================================== */

.recorrido{ position:relative; margin-top:clamp(2rem, 5vw, 3rem); }
.pasos{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1.25rem;
}
.paso .numero{
  position:relative; z-index:1;
  display:inline-block;
  font-family:var(--display); font-weight:700; font-size:.85rem;
  background:var(--papel); color:var(--tinta);
  border:2px solid var(--tinta); border-radius:999px; box-shadow:0 2px 0 var(--tinta);
  padding:.25rem .75rem;
  transition:background-color var(--medio) var(--sal), color var(--medio) var(--sal);
}
.paso h3{ margin-top:.9rem; font-family:var(--display); font-weight:700; font-size:1.2rem; line-height:1.25; }
.paso p{ margin-top:.5rem; font-size:1rem; color:var(--tinta-2); line-height:1.5; }
/* La vía, y encima la línea que la recorre con el scroll (solo con GSAP) */
.recorrido::before{
  content:""; position:absolute; left:0; right:0; top:.95rem; height:3px;
  background:var(--tinta-3); border-radius:2px;
}
.recorrido__linea{
  position:absolute; left:0; right:0; top:.9rem; height:4px; border-radius:2px;
  background:var(--copihue);
  transform-origin:left center; opacity:0; pointer-events:none;
}
.con-gsap .recorrido__linea{ opacity:1; }
.con-gsap .paso--alcanzado .numero{ background:var(--copihue); color:var(--papel); }
@media (max-width:900px){
  .pasos{ grid-template-columns:1fr 1fr; gap:1.6rem 1.25rem; }
  .recorrido::before, .recorrido__linea{ display:none; }
}
@media (max-width:560px){ .pasos{ grid-template-columns:1fr; } }


/* ==========================================================================
   ⑧ NOSOTROS — con la postal del sur. Es una ILUSTRACIÓN generada con IA,
   a dos tonos a propósito, y el pie lo dice: nadie tiene que confundirla con
   una foto de un trabajo real.
   ========================================================================== */

.nosotros{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr);
  gap:clamp(1.5rem, 5vw, 4rem); align-items:center;
}
.nosotros h2{ max-width:14ch; }
.nosotros__texto p{ margin-top:1.1rem; font-size:1.1rem; color:var(--tinta-2); }
.nosotros__texto p b{ color:var(--tinta); font-weight:700; }
.postal{
  background:var(--papel);
  border:2px solid var(--tinta); border-radius:14px; box-shadow:0 5px 0 var(--tinta);
  padding:12px 12px 0;
  transform:rotate(1.5deg);
}
.postal img{ width:100%; height:auto; aspect-ratio:12 / 5; object-fit:cover; border-radius:6px; }
.postal figcaption{
  padding:.7rem .3rem .8rem;
  font-family:var(--display); font-weight:500; font-size:.9rem; color:var(--tinta-2);
}
@media (max-width:860px){
  .nosotros{ grid-template-columns:1fr; }
  .postal{ transform:rotate(1deg); }
}


/* ==========================================================================
   ⑨ LAS PREGUNTAS — abiertas: con siete preguntas cortas, esconderlas sería
   hacer trabajar al visitante para nada
   ========================================================================== */

#preguntas .pregunta{
  display:grid; grid-template-columns:minmax(0, 22rem) minmax(0, 1fr); gap:.6rem 3rem;
  padding-block:1.3rem; border-top:2px solid var(--tinta);
}
#preguntas .pregunta:first-of-type{ margin-top:2rem; }
#preguntas .pregunta h3{ font-family:var(--display); font-weight:700; font-size:1.15rem; line-height:1.3; }
#preguntas .pregunta p{ font-size:1.02rem; color:var(--tinta-2); }
#preguntas .pregunta p b{ color:var(--tinta); font-weight:700; }
#preguntas > .nota{ margin-top:2rem; font-family:var(--display); font-weight:600; font-size:1rem; }
@media (max-width:860px){ #preguntas .pregunta{ grid-template-columns:1fr; } }


/* ==========================================================================
   ⑩ EL CIERRE — un bloque copihue, el botón en papel
   ========================================================================== */

.cierre{
  margin-block:clamp(1rem, 4vw, 2rem) clamp(3rem, 7vw, 5rem);
  background:var(--copihue); color:var(--papel);
  border:2px solid var(--tinta); border-radius:32px; box-shadow:0 6px 0 var(--tinta);
  padding:clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 5vw, 4rem);
  text-align:center;
}
.cierre h2{
  margin-inline:auto; max-width:18ch;
  font-family:var(--display); font-weight:800; font-stretch:86%;
  font-size:clamp(2.2rem, 1rem + 3.6vw, 4rem); line-height:1; letter-spacing:-.03em;
}
.cierre p{ margin:1.1rem auto 0; max-width:44ch; font-size:1.15rem; }
.cierre .acciones{ justify-content:center; margin-top:2rem; }


/* ==========================================================================
   El pie
   ========================================================================== */

.pie{
  width:var(--lienzo); margin-inline:auto;
  padding-block:3rem 2rem;
  border-top:2px solid var(--tinta);
  display:grid; grid-template-columns:repeat(4, 1fr); gap:2rem 1.5rem;
}
.pie__celda p{ font-size:1rem; line-height:1.6; color:var(--tinta-2); }
.pie__celda p b{ color:var(--tinta); font-weight:700; }
.pie .rotulo{
  margin-bottom:.6rem;
  font-family:var(--display); font-weight:700; font-size:.8rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--tinta);
}
.pie__enlaces{ display:flex; flex-direction:column; gap:.4rem; align-items:flex-start; }
.pie__enlaces a{
  font-family:var(--display); font-weight:600; font-size:1rem;
  color:var(--tinta-2); text-decoration:none;
  transition:color var(--rapido) var(--sal);
}
@media (hover:hover){ .pie__enlaces a:hover{ color:var(--tinta); } }
.pie__firma{
  grid-column:1 / -1;
  margin-top:1rem; padding-top:1.2rem; border-top:2px dashed var(--tinta-3);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem;
  font-family:var(--display); font-weight:500; font-size:.88rem; color:var(--tinta-2);
}
@media (max-width:900px){ .pie{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .pie{ grid-template-columns:1fr; } }


/* ==========================================================================
   Las páginas legales y el 404
   ========================================================================== */

.legal, .error{
  width:min(100% - 2 * clamp(1.25rem, 4vw, 3rem), 46rem);
  margin-inline:auto;
  padding-block:3.5rem 5rem;
}
.legal h1, .error h1{
  font-family:var(--display); font-weight:800; font-stretch:86%;
  font-size:clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem); line-height:1; letter-spacing:-.03em;
}
.legal .vigencia{ margin-top:.8rem; font-family:var(--display); font-weight:600; font-size:.9rem; color:var(--tinta-2); }
.legal h2{
  margin-top:2.6rem; padding-top:1.4rem; border-top:2px solid var(--tinta);
  font-family:var(--display); font-weight:700; font-size:1.3rem;
}
.legal p{ margin-top:1rem; color:var(--tinta-2); line-height:1.7; }
.legal p b{ color:var(--tinta); }
.legal ul{ margin-top:1rem; padding-left:1.2rem; color:var(--tinta-2); line-height:1.7; }
.legal li{ margin-top:.4rem; }
.legal a, .error a:not(.accion){ color:var(--lluvia); text-underline-offset:.2em; }
.legal .cierre-legal{ margin-top:2.6rem; padding-top:1.4rem; border-top:2px dashed var(--tinta-3); color:var(--tinta); }
.error{ text-align:center; }
.error .codigo{
  font-family:var(--display); font-weight:800; font-stretch:86%;
  font-size:clamp(4rem, 3rem + 5vw, 7rem); line-height:.9; letter-spacing:-.04em;
  color:var(--copihue);
}
.error h1{ margin-top:1rem; }
.error p{ margin-top:1rem; color:var(--tinta-2); }
.error .acciones{ margin-top:2rem; justify-content:center; }


/* ==========================================================================
   MOVIMIENTO REDUCIDO — Juanko navega así. Se quita el desplazamiento, no la
   señal: el titular aparece con un fundido, el resaltado ya está puesto, los
   stickers ya están pegados y el sistema ya está armado.
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .hero h1 .palabra{ transform:none !important; animation:none !important; }
  .hero h1{ animation:fundir .6s ease both !important; }
  .hero h1 em{ background-size:100% 100% !important; animation:none !important; }
  .sticker__cara, .sello, .hero .bajada, .hero .acciones, .cobertura, .tarifas{ animation:none !important; }
  .boton, .accion, .opcion span, .pildora{ transition-duration:160ms !important; }
}
@keyframes fundir{ from{ opacity:0; } to{ opacity:1; } }