/* ===========================================================================
   Portalia - hoja de estilo única.
   Orden: 1 tokens · 2 reset · 3 utilidades · 4 tipografía · 5 componentes
          6 secciones · 7 efectos · 8 responsive · 9 movimiento reducido

   Derechos Reservados Sistemas Digitales
   =========================================================================== */

/* ============================================================ 1. TOKENS */
:root{
  /* Colores de marca, tomados del logotipo violeta */
  --violeta:      #6100ff;
  --violeta-claro:#8941ff;
  --violeta-hondo:#1c0049;

  /* Verde de WhatsApp. No es de la marca y no se usa para nada más:
     cualquier botón de este color abre una conversación, siempre. */
  --wa:       #25D366;
  --wa-hover: #1fbf5b;
  /* Y este es el degradado del logotipo, con sus dos verdes oficiales. Va
     solo donde aparece el logotipo, nunca en un botón: el botón es interfaz
     y se pinta plano, el logotipo es una marca ajena y se respeta. */
  --wa-logo:  linear-gradient(180deg,#57d163,#23b33a);

  /* La tinta es el texto, y ahora se escribe sobre oscuro: va en claro.
     El nombre se mantiene porque sigue significando lo mismo. */
  --tinta:      #f6f3ff;
  --tinta-2:    rgba(246,243,255,.66);
  --tinta-3:    rgba(246,243,255,.44);

  /* El papel es el suelo de toda la página. Antes cada sección traía el suyo
     -crema en el hero, blanco en la tira, negro en la oferta- y el bloque
     oscuro era la excepción que cortaba el recorrido en dos. Ahora el morado
     es común y las secciones se distinguen solo por el halo que llevan
     encima. */
  --papel:      #120a24;
  --papel-2:    #180d30;
  /* El mismo papel sin nada de opacidad. Sirve para que una sección con fondo
     propio se retire dejando ver el halo del cuerpo, en vez de terminar en un
     color sólido que lo tapa: donde una capa opaca acaba y otra transparente
     empieza, el halo aparece de golpe y eso también es un corte. */
  --papel-0:    rgba(18,10,36,0);

  /* Sobre un fondo oscuro las tarjetas no se pintan de un color propio: se
     levantan con un velo de blanco. Así una sola pareja de valores sirve
     para el acordeón, los canales y las tarjetas de la oferta. */
  --superficie:   rgba(255,255,255,.05);
  --superficie-2: rgba(255,255,255,.08);

  --linea:      rgba(255,255,255,.10);
  --linea-2:    rgba(255,255,255,.20);

  --vidrio:     rgba(255,255,255,.06);
  --vidrio-borde: rgba(255,255,255,.14);

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --geo:  "Poppins", "Inter", system-ui, sans-serif;

  --radio:   18px;
  --radio-s: 12px;
  /* Sobre un fondo oscuro una sombra negra no separa nada: lo que da relieve
     es el halo de color. Por eso cada sombra lleva dos capas, la caída negra
     que hunde y el violeta que despega. */
  --sombra-s: 0 2px 10px rgba(0,0,0,.35);
  --sombra:   0 18px 46px -22px rgba(0,0,0,.8);
  --sombra-l: 0 40px 90px -40px rgba(0,0,0,.9);
  --halo:     0 30px 70px -38px rgba(97,0,255,.95);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.25,.46,.45,.94);

  /* Cuánto tarda el halo de una sección en apagarse contra su vecina, y la
     máscara que lo hace. Un degradado que llega vivo al borde de su sección
     se corta ahí, y ese corte se lee como una línea recta cruzando la página.
     Con esto la capa nace desvanecida y muere desvanecida, siempre. */
  --fundido: clamp(5rem, 12vh, 11rem);
  --fundido-borde: linear-gradient(180deg,
      transparent 0,
      #000 var(--fundido),
      #000 calc(100% - var(--fundido)),
      transparent 100%);

  --envoltura: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --alto-barra: 78px;
  /* Aire de cada sección, en un solo sitio. Antes cada una llevaba el suyo
     y llegaban a 120 px arriba y abajo: sobre el bloque oscuro eso se lee
     como un hueco vacío, no como respiración. */
  --seccion: clamp(2.5rem, 5vw, 4rem);
}

/* ============================================================ 2. RESET */
*,*::before,*::after{ box-sizing:border-box; margin:0; }

html{
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body{
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  color:var(--tinta);
  background:var(--papel);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
a{ color:inherit; text-decoration:none; }
p{ text-wrap:pretty; }
ul,ol{ list-style:none; padding:0; }

::selection{ background:var(--violeta); color:#fff; }

:focus-visible{
  outline:2px solid var(--violeta);
  outline-offset:3px;
  border-radius:6px;
}

/* ============================================================ 3. UTILIDADES */
.envoltura{
  width:100%;
  max-width:var(--envoltura);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:9999;
  padding:.7rem 1.1rem; border-radius:10px;
  background:var(--violeta); color:#fff; font-weight:600;
}
.skip-link:focus{ top:16px; }

/* ============================================================ 4. TIPOGRAFÍA */
h1,h2,h3{
  font-family:var(--geo);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.025em;
  text-wrap:balance;
}

h2{ font-size:clamp(1.75rem,3.6vw,2.85rem); }
h3{ font-size:clamp(1.05rem,1.6vw,1.3rem); letter-spacing:-.015em; }

/* El énfasis lleva dos señales a la vez: el peso fino de Poppins contra el
   grueso del titular, y el violeta de la marca. Solo con el color sería el
   resaltado de cualquier landing; solo con el peso, la marca no aparecía
   en ningún titular de la página.
   Sobre el fondo oscuro manda el violeta claro: el de marca se apaga contra
   el morado y el énfasis dejaba de leerse como énfasis. */
h1 em, h2 em{
  font-style:normal;
  font-weight:300;
  letter-spacing:-.01em;
  color:var(--violeta-claro);
}

/* Un titular que en vez de partirse en dos pesos va entero, subrayado y más
   grueso. El subrayado es de la casa y no del navegador: el que trae por
   defecto pega el trazo a las letras y lo pinta del color del texto, que en
   un titular de este tamaño se lee como un renglón de cuaderno. Con el
   violeta, el grosor medido y el trazo separado, el subrayado hace de acento
   de marca, que es el papel que en los otros titulares hace el `em`. */
.subrayado{
  font-weight:700;
  /* Los titulares van apretados a 1.1, que funciona mientras entre dos líneas
     no haya nada. Aquí sí lo hay: en pantalla estrecha el titular ocupa tres
     renglones y el trazo de cada uno caería contra el siguiente. */
  line-height:1.22;
  text-decoration-line:underline;
  text-decoration-color:var(--violeta-claro);
  text-decoration-thickness:.055em;
  text-underline-offset:.19em;
}

/* Levemente inclinada. La cursiva de verdad de Inter, no la que sintetiza el
   navegador: ver el enlace de fuentes en el <head>. */
.inclinada{ font-style:italic; }

.antetitulo{
  font-family:var(--geo);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--violeta-claro);
  margin-bottom:.85rem;
}

.entradilla{
  margin-top:1rem;
  font-size:clamp(1rem,1.4vw,1.12rem);
  color:var(--tinta-2);
  max-width:56ch;
}

.cabecera{ margin-bottom:clamp(1.8rem,3.5vw,2.6rem); max-width:46rem; }

/* ============================================================ 5. COMPONENTES */

/* --- Botones --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.92rem 1.6rem;
  /* El filo transparente lo llevan todos aunque solo lo pinte el secundario:
     sin él, el botón con borde mide 2 px más y la pareja se desalinea. */
  border:1px solid transparent;
  border-radius:999px;
  font-family:var(--geo);
  font-size:.95rem; font-weight:600;
  white-space:nowrap;
  transition:background .35s var(--ease-out), color .35s var(--ease-out),
             transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.btn-sm{ padding:.62rem 1.15rem; font-size:.85rem; }
.btn-bloque{ display:flex; width:100%; }

/* Todos los caminos de esta web acaban en una conversación de WhatsApp, así
   que el botón principal lleva el verde de WhatsApp y ningún otro elemento
   lo usa: el color es la señal de a dónde lleva el clic. */
.btn-wa{
  background:var(--wa); color:#fff;
  box-shadow:0 12px 26px -14px rgba(37,211,102,.95);
}
.btn-wa:hover{
  background:var(--wa-hover);
  transform:translateY(-2px);
  box-shadow:0 18px 34px -14px rgba(37,211,102,.8);
}

/* El botón secundario acompaña al verde, así que se pinta con el otro color
   de la casa en lugar del gris neutro que traía. Sobre el morado el relleno
   violeta translúcido desaparecía, así que se sostiene con un filo. */
.btn-suave{
  background:rgba(137,65,255,.16);
  border:1px solid rgba(137,65,255,.36);
  color:#fff;
}
.btn-suave:hover{
  background:rgba(137,65,255,.28);
  border-color:rgba(137,65,255,.6);
  color:#fff;
  transform:translateY(-2px);
}

/* --- Vidrio --- */
.vidrio{
  background:#1b1035;                               /* respaldo sólido */
  border:1px solid var(--vidrio-borde);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
}
@supports (backdrop-filter: blur(18px)){
  .vidrio{
    background:var(--vidrio);
    backdrop-filter:blur(18px) saturate(150%);
    -webkit-backdrop-filter:blur(18px) saturate(150%);
  }
}

/* --- Lista con check --- */
.lista-check li{
  position:relative;
  padding-left:1.6rem;
  margin-bottom:.6rem;
  font-size:.95rem;
  color:var(--tinta-2);
}
.lista-check li::before{
  content:"";
  position:absolute; left:0; top:.55em;
  width:8px; height:8px; border-radius:50%;
  background:var(--violeta-claro);
}

/* --- Precio --- */
.precio,.plan-precio{
  display:inline-block;
  font-family:var(--geo);
  font-weight:600;
  color:var(--tinta-3);
}
.precio{
  margin-top:1.1rem;
  font-size:.9rem;
  padding:.3rem .75rem;
  border-radius:999px;
  border:1px solid var(--linea-2);
  color:var(--tinta);
}
/* Mientras no haya precio, el marco discontinuo dice que aún no es firme */
.precio.pendiente{
  font-size:.82rem;
  border-style:dashed;
  color:var(--tinta-3);
}
.plan-precio{
  margin:1.1rem 0 1.4rem;
  font-size:clamp(1.5rem,3vw,2rem);
  letter-spacing:-.03em;
  color:var(--tinta);
}
.plan-precio.pendiente{
  font-size:.85rem; font-weight:600; color:var(--tinta-3);
  padding:.35rem .8rem; border:1px dashed var(--linea-2); border-radius:999px;
}
/* El precio de lista de una promoción, tachado delante del vigente. Sirve en
   los dos sitios donde hay precio, y solo cambia de tamaño: en el chip de un
   trámite suelto el `.55em` del paquete quedaría en ocho píxeles, ilegible. */
.antes{
  display:inline-block; margin-right:.5rem;
  color:var(--tinta-3); text-decoration:line-through;
}
.plan-precio .antes{ font-size:.55em; }
.precio .antes{ font-size:.8em; margin-right:.35rem; }
/* El precio vigente y el tachado no se parten nunca por dentro. El chip sí
   puede caer a dos renglones donde la columna es estrecha; lo que no puede
   es dejar el "R$" en uno y su número en el otro. */
.antes,.ahora{ white-space:nowrap; }

/* Lo que se ahorra llevándose el paquete. En violeta, no en verde, aunque el
   verde sea el color con el que todo el mundo pinta un descuento: aquí el
   verde significa "esto abre WhatsApp" y no puede significar otra cosa.

   El margen de arriba es negativo para pegarlo al precio, que trae el suyo
   pensado para cuando no había nada debajo. Se va con el elemento si la
   cuenta no da un ahorro que anunciar, porque entonces queda vacío. */
.plan-ahorro{
  margin:-1.05rem 0 1.4rem;
  font-family:var(--geo);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:-.01em;
  color:var(--violeta-claro);
}
.plan-ahorro:empty{ display:none; }

/* El plazo, dentro del chip y detrás del precio. Es el argumento de venta de
   la casa, así que se pinta en violeta; pero más pequeño y sin el peso del
   número, porque si compitiera con él el chip dejaría de leerse como precio.
   El chip puede partir en dos renglones en una columna estrecha: por eso el
   precio no lleva `white-space:nowrap`, y el plazo cae entero al segundo. */
.precio .plazo{
  margin-left:.35rem;
  font-size:.8em;
  font-weight:500;
  white-space:nowrap;
  color:var(--violeta-claro);
}

/* La letra pequeña del agendamento: lo que las 24h no incluyen. Va apagada,
   como corresponde a una aclaración, pero dentro de la tarjeta y no en las
   preguntas: aquí es donde el cliente decide.

   Este es el estado por defecto, y es el que se queda en las pantallas
   táctiles. Ver justo debajo por qué. */
.nota-plazo{
  margin-top:.55rem;
  font-size:.78rem;
  line-height:1.45;
  color:var(--tinta-3);
}

/* Donde hay ratón, la aclaración se guarda en un globo que sale al pasar por
   la ficha. En flujo ocupaba cinco renglones y empujaba el precio del
   agendamento por encima del de las otras cuatro tarjetas; fuera del flujo,
   la fila de precios vuelve a quedar alineada y la aclaración sigue ahí.

   La condición es `hover`, no un ancho de pantalla. En una pantalla táctil no
   existe "pasar por encima": el globo no aparecería nunca, y esta es
   justamente la frase que acota lo que la página promete. Por eso el texto
   visible es el valor por defecto y el globo es la excepción, y no al revés.

   Se esconde con `opacity` y no con `display:none` a propósito: así sigue en
   el árbol de accesibilidad y un lector de pantalla lo lee de todos modos. */
@media (hover:hover) and (pointer:fine){
  .nota-plazo{
    position:absolute; z-index:20;
    left:50%; bottom:calc(100% + 10px);
    transform:translate(-50%,6px);
    width:max-content; max-width:min(270px,78vw);
    margin:0;
    padding:.7rem .85rem;
    border-radius:var(--radio-s);
    /* Opaco: debajo del globo hay otra tarjeta, no el fondo de la página. */
    background:#241443;
    border:1px solid rgba(137,65,255,.55);
    box-shadow:var(--sombra), var(--halo);
    color:var(--tinta-2);
    opacity:0; pointer-events:none;
    transition:opacity .25s var(--ease-out), transform .25s var(--ease-out);
  }
  /* La punta es el mismo globo girado 45°, con dos de sus filos. */
  .nota-plazo::after{
    content:""; position:absolute; top:100%; left:50%;
    width:11px; height:11px;
    margin:-6px 0 0 -6px;
    background:inherit;
    border-right:1px solid rgba(137,65,255,.55);
    border-bottom:1px solid rgba(137,65,255,.55);
    transform:rotate(45deg);
  }
  /* Con el foco también: quien llega al botón con el tabulador tiene el
     mismo derecho a leer la letra pequeña que quien pasa el ratón. */
  .tarjeta:hover .nota-plazo,
  .tarjeta:focus-within .nota-plazo,
  .plan:hover .nota-plazo,
  .plan:focus-within .nota-plazo{
    opacity:1; transform:translate(-50%,0);
  }
}

/* ============================================================ 6. SECCIONES */

/* --- Barra superior --- */
.barra{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:14px var(--gutter);
  transition:background .4s var(--ease-out), box-shadow .4s var(--ease-out),
             padding .4s var(--ease-out);
}
/* La barra al desprenderse no marca su borde inferior con un filo: se apoya
   en una sombra difusa, que separa sin dibujar una línea a lo ancho. */
.barra.is-fija{
  background:rgba(18,10,36,.9);
  box-shadow:0 18px 40px -26px rgba(0,0,0,.95);
  padding-block:10px;
}
@supports (backdrop-filter: blur(14px)){
  .barra.is-fija{ background:rgba(18,10,36,.72); backdrop-filter:blur(14px); }
}

.marca{ display:flex; align-items:center; gap:.55rem; }
/* El simbolo es mas alto que ancho: se fija el alto y el ancho sigue.
   El violeta de marca sobre el morado pierde fuerza, así que el símbolo va
   con su propio halo en lugar de cambiarlo por la versión blanca: la marca
   se mantiene en su color. */
.marca img{
  width:auto; height:38px;
  filter:drop-shadow(0 0 14px rgba(137,65,255,.75));
}
.marca span{
  font-family:var(--geo); font-weight:700; font-size:1.32rem;
  letter-spacing:-.045em;
}

.barra-nav{ display:flex; gap:1.9rem; font-size:.92rem; font-weight:500; }
.barra-nav a{ position:relative; color:var(--tinta-2); padding-block:.3rem; }
.barra-nav a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1.5px; background:var(--violeta);
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.barra-nav a:hover{ color:var(--violeta); }
.barra-nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

.barra-fin{ display:flex; align-items:center; gap:.75rem; }

.idioma{
  display:flex; align-items:center;
  border:1px solid var(--linea-2); border-radius:999px;
  padding:2px; background:rgba(255,255,255,.06);
}
.idioma button{
  padding:.3rem .62rem; border-radius:999px;
  font-family:var(--geo); font-size:.74rem; font-weight:600; letter-spacing:.05em;
  color:var(--tinta-3);
  transition:background .3s var(--ease-out), color .3s var(--ease-out);
}
.idioma button.is-activo{ background:var(--violeta); color:#fff; }

.barra-menu{ display:none; width:42px; height:42px; border-radius:12px; }
.barra-menu span{
  display:block; width:19px; height:1.6px; margin:4px auto; background:var(--tinta);
  transition:transform .35s var(--ease-out), opacity .35s var(--ease-out);
}
.barra.is-abierta .barra-menu span:first-child{ transform:translateY(3px) rotate(45deg); }
.barra.is-abierta .barra-menu span:last-child{ transform:translateY(-3px) rotate(-45deg); }

/* --- Hero ---
   Fue una escena de vídeo con tres documentos flotando y sus rótulos anclados
   en porcentaje. Ya no: el 2026-08-07 el usuario lo quitó entero, con rótulos
   y todo, y el hero pasó a ser lo que dice y nada más -titular, promesa y dos
   botones- alineado a la izquierda.

   Con eso se fueron `.escenario`, `.titular`, `.rotulo`, `.hero-movil` y el
   fotograma de respaldo del movimiento reducido. Y se fue la razón de que los
   tamaños del hero se midieran en `cqw`: escalaban con el ancho del vídeo,
   que ya no existe.

   El fondo no termina en el color del papel, sino en nada. Terminar en el
   papel parecía correcto -es el color exacto del cuerpo- pero este fondo es
   opaco y tapa el halo que respira detrás de toda la página; la tira que
   viene después no lo tapa. El halo aparecía entero en el primer píxel de la
   tira, y ahí se dibujaba una línea. Retirándose a transparente, el hero
   descubre el halo poco a poco y llega al borde enseñando ya lo mismo que su
   vecina. */
.hero{
  position:relative;
  padding-top:calc(var(--alto-barra) + clamp(2.5rem,7vw,6rem));
  padding-bottom:clamp(2.5rem,6vw,5rem);
  background:
    radial-gradient(58% 62% at 22% 42%, rgba(97,0,255,.26), transparent 72%),
    /* El segundo halo nace con la lámina del mapa: sin él, el neón queda
       sobre morado plano y se lee como una calcomanía pegada encima. */
    radial-gradient(46% 54% at 78% 46%, rgba(137,65,255,.20), transparent 72%),
    linear-gradient(180deg,#1a0f36 0%,#170d30 48%,var(--papel) 82%,var(--papel-0) 100%);
}

/* El texto a la izquierda y la lámina a la derecha. La columna del texto va
   algo más ancha: el titular manda, y con las dos al 50% partía en cuatro
   renglones. */
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:center;
  gap:clamp(1.5rem,4vw,3.25rem);
}

.hero-texto{ max-width:44rem; }

/* La lámina no lleva recuadro, sombra ni máscara, y no es un descuido: su
   fondo azul marino se recortó al exportarla y viaja en el canal alfa, así
   que lo que se apoya sobre la página es el neón y nada más. Un borde o una
   sombra le devolverían el rectángulo que se le quitó.

   Flota con el mismo gancho que usaban los documentos del vídeo anterior,
   `data-flota`, que es el que la sección de movimiento reducido apaga. */
.hero-figura{
  animation:flotar-mapa 11s var(--ease-soft) infinite;
}
.hero-figura img{ width:100%; height:auto; }

@keyframes flotar-mapa{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-12px); }
}

.hero-texto h1{
  font-size:clamp(1.9rem,5.2vw,3.5rem);
}
/* La promesa se separa del titular más que una entradilla normal: aquí es lo
   único que hay entre el titular y los botones. */
.hero-texto .entradilla{ margin-top:1.4rem; }

.hero-cta{
  display:flex; gap:.6rem; flex-wrap:wrap;
  margin-top:clamp(1.6rem,3vw,2.2rem);
}

/* --- Tira de confianza --- */
/* Sin fondo propio y sin filos: la página es una sola superficie de punta a
   punta, y lo que separa una sección de otra es el aire, no una línea. Las
   cuatro promesas se distinguen por su propio filo corto de color, que ya
   estaba, y por la distancia entre ellas. */
.tira{
  position:relative; z-index:2;
  padding-block:clamp(1rem,2vw,1.6rem);
}
.tira-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem 2rem; }
.tira-item{
  padding:1.9rem 0;
}
.tira-item::before{
  content:""; display:block;
  width:22px; height:2px; border-radius:2px;
  margin-bottom:.9rem;
  background:var(--violeta);
}
.tira-item b{
  display:block;
  font-family:var(--geo); font-weight:600; font-size:1.05rem;
  letter-spacing:-.02em; margin-bottom:.3rem;
}
.tira-item span{ font-size:.9rem; color:var(--tinta-2); }

/* --- El suelo continuo -------------------------------------------------
   Cada sección tiñe su tramo con una capa de halos propia. El problema no
   era el color, era el borde: una capa a inset:0 termina exactamente donde
   termina su sección, así que el degradado se corta en seco y ese corte se
   ve como una línea recta a lo ancho de la página. Es lo que partía el
   recorrido entre los paquetes y las preguntas: morado encima, negro debajo,
   y una frontera dibujada en medio.

   Se resuelve una sola vez, aquí, para todas las secciones con halo: la capa
   entra desvanecida, sale desvanecida, y se derrama sobre la sección
   siguiente. Dos halos contiguos se solapan, y el tono pasa de uno a otro
   sin que haya un punto donde empiece.

   El derrame va solo hacia abajo, y a propósito. La sección siguiente se
   pinta después que la anterior, de modo que el sobrante queda por debajo de
   su contenido y no puede teñir un texto ya escrito. Hacia arriba bastaba
   con la entrada desvanecida. */
.oferta::before,
.preguntas::before,
.contacto::before{
  inset:0 0 calc(var(--fundido) * -1);
  -webkit-mask-image:var(--fundido-borde);
          mask-image:var(--fundido-borde);
}

/* --- Servicios y paquetes ---
   Una sola sección para las dos cosas: quien duda entre pagar un trámite
   suelto o llevarse el paquete tiene que poder comparar sin desplazarse.
   Aquí es donde se decide la compra, y por eso lleva el halo más cargado de
   la página: ya no destaca por ser la única oscura, sino por ser la más
   encendida. */
.oferta{
  position:relative;
  isolation:isolate;
  padding-block:var(--seccion);
  color:rgba(255,255,255,.72);
}
/* El violeta entra por el fondo, no por los textos: un halo amplio tiñe sin
   bajar el contraste de lo que hay que leer.

   Los dos núcleos van metidos hacia dentro, lejos del filo. Antes vivían al
   8% y al 92% de la altura, es decir pegados al borde, que es justo donde el
   desvanecido los apaga: puestos ahí, el halo se apagaría antes de haber
   teñido nada. El inset y la máscara los pone el bloque de arriba. */
.oferta::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  background:
    radial-gradient(50% 42% at 78% 24%, rgba(97,0,255,.46), transparent 72%),
    radial-gradient(46% 44% at 8% 78%,  rgba(137,65,255,.26), transparent 74%);
}
/* Sobre el negro, el violeta de marca se apaga: aquí manda el claro */
.oferta .antetitulo{ color:var(--violeta-claro); }
.oferta h2{ color:#fff; }
.oferta h2 em{ color:var(--violeta-claro); }
.oferta .entradilla{ color:rgba(255,255,255,.60); }

/* Dos filas, y dentro de cada una todas las piezas miden lo mismo: cinco
   trámites arriba, dos paquetes abajo. Mezclar en una sola línea tarjetas
   de una caja con una pila de tres obliga a estirar unas hasta la altura
   de otras, y eso es lo que llenaba de hueco vacío la retícula. */
.oferta-bloque + .oferta-bloque{
  margin-top:clamp(2.25rem,4.5vw,3.25rem);
  padding-top:clamp(2.25rem,4.5vw,3.25rem);
}

.oferta-rotulo{
  font-family:var(--geo);
  font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.38);
  margin-bottom:1.1rem;
}

/* Trámites sueltos.
   Tres columnas: CPF, Agendamento, y la pila de los otros tres. */
/* Las cinco, misma anchura y misma altura. Aquí el estirado sí es correcto
   porque las cinco llevan el mismo contenido: título, descripción corta,
   precio y botón. El precio se ancla abajo para que la fila de precios y
   la de botones queden a la misma altura en las cinco. */
.tarjetas{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.85rem; align-items:stretch;
}
.tarjeta{
  position:relative;
  display:flex; flex-direction:column; align-items:flex-start;
  padding:1.15rem 1.15rem 1.1rem;
  border-radius:var(--radio-s);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
  transition:background .35s var(--ease-out), border-color .35s var(--ease-out),
             transform .35s var(--ease-out);
}
.tarjeta:hover{
  background:rgba(255,255,255,.075);
  border-color:rgba(137,65,255,.5);
  transform:translateY(-2px);
}
.tarjeta h3{
  color:#fff; margin-bottom:.45rem;
  font-size:clamp(.98rem,1.15vw,1.08rem);
}
.tarjeta p{ font-size:.85rem; line-height:1.5; color:rgba(255,255,255,.60); }
.tarjeta .precio{ margin-top:auto; }
.tarjeta .btn{
  margin-top:.8rem;
  padding:.62rem .9rem;
  white-space:normal; line-height:1.2;
}
.precio{ margin-top:.9rem; }

.tarjeta.destacada{
  background:linear-gradient(160deg, rgba(97,0,255,.28), rgba(97,0,255,.05) 65%);
  border-color:rgba(137,65,255,.55);
  box-shadow:0 26px 60px -34px rgba(97,0,255,.9);
}
/* En una columna estrecha el sello no cabe junto al título, así que
   encabeza la tarjeta en lugar de flotar en la esquina. */
.sello{
  margin-bottom:.7rem;
  padding:.24rem .62rem; border-radius:999px;
  background:var(--violeta); color:#fff;
  font-family:var(--geo); font-size:.66rem; font-weight:600; letter-spacing:.05em;
}

/* Paquetes: los dos iguales, aunque uno lleve un trámite más que el otro */
.planes{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem; align-items:stretch;
}
/* El globo de la nota se ancla aquí, así que el paquete es el que se
   posiciona. Y por eso mismo ya no puede llevar `overflow:hidden`: recortaba
   el globo, que sale por encima del borde superior. Lo único que necesitaba
   el recorte era que la cabecera violeta respetara la esquina redondeada, y
   eso lo hace ella sola con su propio radio. */
.plan{
  position:relative;
  display:flex; flex-direction:column;
  border-radius:var(--radio);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
}
.plan-cabecera{
  padding:1rem 1.15rem .95rem;
  /* Un pelo menos que el paquete: el borde de 1 px va por fuera, y con el
     mismo radio el violeta asoma por la esquina. */
  border-radius:calc(var(--radio) - 1px) calc(var(--radio) - 1px) 0 0;
  background:linear-gradient(135deg,var(--violeta),var(--violeta-claro));
}
.plan-cabecera h3{ color:#fff; font-size:clamp(.98rem,1.15vw,1.12rem); }
.plan-nota{ font-size:.82rem; line-height:1.45; color:rgba(255,255,255,.8); margin-top:.25rem; }
.plan-cuerpo{
  flex:1;
  display:flex; flex-direction:column;
  padding:1.05rem 1.15rem 1.2rem;
}
.plan .lista-check{ margin-bottom:1.1rem; }
.plan .lista-check li{
  font-size:.86rem; line-height:1.45;
  margin-bottom:.45rem;
  color:rgba(255,255,255,.66);
}
/* El .btn general no parte el texto, y en una columna de este ancho eso
   hace que el botón se salga de su tarjeta. Aquí sí puede partirlo.
   Y va anclado abajo, para que los dos queden a la misma altura. */
.plan .btn{
  margin-top:auto;
  padding:.8rem 1rem;
  font-size:.88rem; line-height:1.25;
  white-space:normal; text-align:center;
}

.plan-destacado{
  border-color:rgba(137,65,255,.55);
  box-shadow:0 30px 70px -38px rgba(97,0,255,.95);
}
.plan-destacado .plan-cabecera{
  background:linear-gradient(135deg,var(--violeta-hondo),var(--violeta));
}

/* Los precios viven solo aquí dentro, y aquí el fondo es oscuro */
.oferta .precio{
  border-color:rgba(255,255,255,.3);
  background:rgba(255,255,255,.05);
  color:#fff;
}
.oferta .precio.pendiente{
  background:none;
  border-color:rgba(255,255,255,.24);
  color:rgba(255,255,255,.6);
}
.oferta .plan-precio{ margin:0 0 .9rem; color:#fff; }
.oferta .plan-precio.pendiente{
  border-color:rgba(255,255,255,.24);
  color:rgba(255,255,255,.6);
}

/* --- Preguntas --- */
.preguntas{
  position:relative; isolation:isolate;
  padding-block:var(--seccion);
}
/* Donde antes había un fondo propio y dos filos, ahora hay un halo: tiñe sin
   dibujar dónde empieza y dónde acaba la sección. */
.preguntas::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  background:radial-gradient(62% 72% at 22% 48%, rgba(97,0,255,.24), transparent 74%);
}
.preguntas-grid{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(2.5rem,6vw,4.5rem); align-items:start;
}
/* Cada pregunta es una ficha, no una fila de una lista. Al abrirse se
   levanta en violeta: el mismo gesto que las tarjetas de la oferta. */
.acordeon details{
  background:var(--superficie);
  border:1px solid var(--linea);
  border-radius:var(--radio-s);
  padding:1.05rem 1.2rem;
  margin-bottom:.7rem;
  transition:background .35s var(--ease-out), border-color .35s var(--ease-out),
             box-shadow .35s var(--ease-out);
}
.acordeon details:last-child{ margin-bottom:0; }
.acordeon details:hover{ border-color:rgba(137,65,255,.45); }
.acordeon details[open]{
  background:var(--superficie-2);
  border-color:rgba(137,65,255,.55);
  box-shadow:var(--halo);
}
.acordeon summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  cursor:pointer; list-style:none;
  font-family:var(--geo); font-weight:600; font-size:1rem;
  letter-spacing:-.015em;
}
.acordeon summary::-webkit-details-marker{ display:none; }
.acordeon summary::after{
  content:"+"; flex:none;
  display:grid; place-items:center;
  width:1.6rem; height:1.6rem; border-radius:50%;
  background:rgba(137,65,255,.2);
  font-size:1.1rem; font-weight:400; line-height:1; color:#fff;
  transition:transform .35s var(--ease-out), background .35s var(--ease-out);
}
.acordeon details[open] summary::after{
  transform:rotate(45deg);
  background:var(--violeta); color:#fff;
}
.acordeon details p{
  margin-top:.8rem; padding-right:2rem;
  font-size:.94rem; color:var(--tinta-2);
}

/* --- Contacto --- */
.contacto{
  position:relative; isolation:isolate;
  padding-block:var(--seccion);
}
/* El mismo halo de la oferta, aquí más contenido: cierra la página con el
   color con el que se abre, sin competir con el bloque donde se compra. */
.contacto::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  background:
    radial-gradient(44% 48% at 86% 28%, rgba(97,0,255,.26), transparent 72%),
    radial-gradient(42% 46% at 8% 76%, rgba(137,65,255,.18), transparent 74%);
}
.contacto-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,4.5rem); align-items:start;
}
.contacto-texto h2{ margin-bottom:1.1rem; }
.contacto-texto > p{ color:var(--tinta-2); max-width:42ch; }

/* Cuatro canales en una sola columna dejaban una tira de casi 350 px de alto
   al lado de un formulario que no crece: en dos por dos ocupan la mitad y las
   cuatro cajas quedan del mismo tamaño, que es lo que hace que se lean como
   un bloque y no como una lista. */
.contacto-canales{
  margin-top:2.2rem;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.85rem;
}
.canal{
  display:flex; align-items:center; gap:1rem;
  padding:1rem 1.2rem;
  border:1px solid var(--linea); border-radius:var(--radio-s);
  background:var(--superficie);
  transition:transform .35s var(--ease-out), border-color .35s var(--ease-out),
             background .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.canal:hover{
  transform:translateY(-2px);
  background:var(--superficie-2);
  box-shadow:var(--sombra);
}
.canal-icono{
  flex:none; width:38px; height:38px; border-radius:11px;
  display:grid; place-items:center;
}

/* Cada canal lleva su logotipo tal cual es. Al de Instagram no se le puede
   quitar el color sin desfigurarlo, así que el de al lado va igual: los dos
   como iconos de aplicación, y no uno a todo color junto a otro apagado. */
.canal-wa .canal-icono{ background:var(--wa-logo); color:#fff; }
.canal-wa:hover{ border-color:var(--wa); }

/* Los de Instagram, Facebook y TikTok traen su color dentro, así que en ellos
   el logotipo ES el cuadro: sin fondo detrás y a tamaño completo. */
.canal-ig .canal-icono,
.canal-fb .canal-icono,
.canal-tk .canal-icono{ background:none; }
.canal-ig .canal-icono svg,
.canal-fb .canal-icono svg,
.canal-tk .canal-icono svg{ width:38px; height:38px; border-radius:11px; }
.canal-ig:hover{ border-color:#d6249f; }
.canal-fb:hover{ border-color:#1877F2; }
.canal-tk:hover{ border-color:#25F4EE; }
.canal-icono svg{ width:21px; height:21px; }
.canal b{ display:block; font-family:var(--geo); font-size:.98rem; font-weight:600; }
.canal i{ font-style:normal; font-size:.85rem; color:var(--tinta-2); }

/* --- Formulario --- */
/* La banda va como sombra interior, no como borde: un border-top sólido se
   corta feo contra las esquinas redondeadas. */
.formulario{
  padding:2rem 1.9rem; display:grid; gap:1rem;
  box-shadow:var(--sombra), var(--halo), inset 0 3px 0 var(--violeta-claro);
}
.campo{ display:grid; gap:.4rem; }
.campo-fila{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.campo label{
  font-family:var(--geo); font-size:.78rem; font-weight:600;
  letter-spacing:.03em; color:var(--tinta-2);
}
.campo input,.campo select,.campo textarea{
  width:100%; padding:.78rem .95rem;
  border:1px solid rgba(137,65,255,.3); border-radius:10px;
  background:rgba(255,255,255,.06);
  font:inherit; font-size:.94rem; color:var(--tinta);
  transition:border-color .3s var(--ease-out), background .3s var(--ease-out);
}
/* El texto de ejemplo tiene que verse menos que lo que escribe el visitante,
   pero seguir leyéndose: sobre oscuro, el gris que pone el navegador por su
   cuenta se hunde en el fondo. */
.campo input::placeholder,.campo textarea::placeholder{ color:var(--tinta-3); }
.campo textarea{ resize:vertical; min-height:82px; }
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--violeta-claro); background:rgba(255,255,255,.11);
}
.campo input:invalid:not(:placeholder-shown){ border-color:#ff6b66; }

/* --- Pie --- */
/* El pie no arranca con un cambio de color, que dibujaría una línea a lo
   ancho de la página: se hunde poco a poco hacia el violeta hondo desde el
   suelo que traía la sección anterior. */
/* El pie no arranca con un cambio de color, que dibujaría una línea a lo
   ancho de la página: se hunde poco a poco hacia el violeta hondo desde el
   suelo que traía la sección anterior.

   El halo va como capa del propio fondo y no en un pseudo-elemento a inset:0.
   Centrado y sin tocar el borde de arriba, no tiene principio visible; antes
   nacía justo en el filo del pie y ahí volvía a aparecer la línea. */
.pie{
  position:relative;
  padding-block:var(--seccion);
  background:
    radial-gradient(56% 46% at 50% 52%, rgba(97,0,255,.38), transparent 74%),
    linear-gradient(180deg,
      transparent 0%, rgba(28,0,73,.45) 38%, var(--violeta-hondo) 100%);
  color:rgba(255,255,255,.72);
}
.pie-grid{ display:grid; gap:1.5rem; justify-items:center; text-align:center; }
/* El logotipo nuevo es solo el símbolo: la palabra la pone el texto, que
   además se traduce y se busca. */
.pie-marca{ display:flex; align-items:center; gap:.6rem; color:#fff; }
.pie-marca img{ width:auto; height:44px; }
.pie-marca span{
  font-family:var(--geo); font-weight:700; font-size:1.5rem;
  letter-spacing:-.045em;
}
.pie-legal{ max-width:62ch; font-size:.82rem; line-height:1.65; }
.pie-firma{
  display:flex; gap:1.4rem; flex-wrap:wrap;
  justify-content:center;
  width:100%;
  margin-top:.6rem;
  padding-top:1.4rem;
  text-align:center;
  font-size:.8rem; color:rgba(255,255,255,.5);
}
.pie-firma a{ border-bottom:1px solid rgba(255,255,255,.28); }
.pie-firma a:hover{ color:#fff; border-color:#fff; }

/* --- WhatsApp flotante --- */
.wa-flotante{
  position:fixed; right:20px; bottom:20px; z-index:55;
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--wa-logo); color:#fff;
  box-shadow:0 14px 30px -12px rgba(37,211,102,.8);
  opacity:0; transform:translateY(14px) scale(.9); pointer-events:none;
  transition:opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.wa-flotante.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.wa-flotante:hover{ transform:translateY(-3px); }
.wa-flotante svg{ width:27px; height:27px; }

/* ============================================================ 7. EFECTOS */

/* Aparición al entrar en pantalla.
   Se esconden solo si el navegador ejecuta JS (html.js lo marca en el <head>).
   Sin JS, el contenido se ve de entrada: nunca una página en blanco. */
html.js .reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
html.js .reveal.is-visible{ opacity:1; transform:none; }

/* Halo de color del fondo, en los tres violetas de la marca. Sobre el papel
   claro bastaba con insinuarlo; sobre el morado hay que cargarlo, porque un
   fondo oscuro plano de punta a punta se lee como apagado, no como sobrio. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 30% at 12% 18%, rgba(97,0,255,.28), transparent 70%),
    radial-gradient(34% 28% at 88% 42%, rgba(137,65,255,.24), transparent 70%),
    radial-gradient(40% 32% at 50% 92%, rgba(97,0,255,.20), transparent 70%);
  filter:blur(30px);
  animation:respirar 26s var(--ease-soft) infinite;
}
@keyframes respirar{
  0%,100%{ transform:scale(1) translateY(0); }
  50%    { transform:scale(1.12) translateY(-2%); }
}

/* ============================================================ 8. RESPONSIVE */
@media (max-width:1279px){
  .barra-nav{ gap:1.1rem; font-size:.85rem; }
}

/* La fila de cinco deja de caber mucho antes que el resto de la página:
   pasa a tres, luego a dos, y solo al final a una. */
@media (max-width:1199px){
  .tarjetas{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:959px){
  /* Las dos columnas de la oferta se apilan: los sueltos arriba, los
     paquetes debajo, y el filo que las separaba pasa a ser horizontal. */
  .preguntas-grid,.contacto-grid{ grid-template-columns:1fr; }
  .tira-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:899px){
  html{ scroll-padding-top:80px; }
  body{ --alto-barra:68px; }

  /* La lámina baja debajo del texto y se queda pequeña a propósito: el hero
     del móvil mide 531 px y una imagen a todo lo ancho lo doblaría, dejando
     los botones fuera de la primera pantalla. */
  .hero-grid{ grid-template-columns:1fr; gap:1.75rem; }
  .hero-figura{ width:min(64vw,380px); margin-inline:auto; }

  /* La barra pasa a menú desplegable */
  .barra-nav{
    position:absolute; top:100%; left:var(--gutter); right:var(--gutter);
    flex-direction:column; gap:0;
    padding:.5rem 1.1rem;
    /* Opaco a propósito: el menú cae sobre el vídeo, y con un fondo
       translúcido los documentos se leían entre los enlaces. */
    background:#1b1035;
    border:1px solid var(--linea);
    border-radius:var(--radio);
    box-shadow:var(--sombra), var(--halo);
    opacity:0; transform:translateY(-8px); pointer-events:none;
    transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
  }
  .barra.is-abierta .barra-nav{ opacity:1; transform:none; pointer-events:auto; }
  .barra-nav a{ padding:.85rem 0; border-bottom:1px solid var(--linea); }
  .barra-nav a:last-child{ border-bottom:0; }
  .barra-nav a::after{ display:none; }
  .barra-menu{ display:block; }
  .barra-fin .btn-wa{ display:none; }

  .tira-grid{ grid-template-columns:1fr; }
  .tira-item{ padding-block:1.2rem; }
  .tarjetas{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .planes{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .campo-fila{ grid-template-columns:1fr; }

  /* En el móvil el botón principal de la barra no cabe, así que el acceso
     a WhatsApp está siempre a mano, sin esperar al scroll. */
  .wa-flotante{
    right:14px; bottom:14px;
    width:48px; height:48px;
    opacity:1; transform:none; pointer-events:auto;
  }
  .wa-flotante svg{ width:24px; height:24px; }
}

/* Tablet: ya no cabe la fila de cuatro, pero una sola columna desperdicia
   la mitad de la pantalla. Dos columnas es el punto justo. */
@media (min-width:600px) and (max-width:899px){
  .tira-grid{ grid-template-columns:repeat(2,1fr); }

}

/* Con dos paquetes a media página cada uno, la lista en una sola columna
   deja medio recuadro vacío y estira la tarjeta sin necesidad. */
@media (min-width:900px){
  .plan .lista-check{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:1.25rem;
  }
}

/* Móvil estrecho: dos tarjetas ya no caben sin partir las palabras */
@media (max-width:559px){
  .tarjetas,.planes{ grid-template-columns:1fr; }
}

/* ============================================================ 9. MOVIMIENTO REDUCIDO
   Solo se apaga lo intrusivo: el vídeo que se reproduce solo y los bucles
   largos. Las transiciones de hover y las apariciones se quedan. */
@media (prefers-reduced-motion:reduce){
  [data-flota]{ animation:none; }
  body::before{ animation:none; }
}