/* ===========================================================================
   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 */
  --verde:      #5BC236;
  --verde-hondo:#2f8f18;
  --ambar:      #F5A623;
  --azul:       #00A9E0;

  --tinta:      #1d2733;
  --tinta-2:    #5d6b7a;
  --tinta-3:    #8a97a5;
  --papel:      #f7f6f3;
  --papel-2:    #eeece6;
  --blanco:     #ffffff;
  --linea:      rgba(29,39,51,.10);
  --linea-2:    rgba(29,39,51,.18);

  --vidrio:     rgba(255,255,255,.62);
  --vidrio-borde: rgba(255,255,255,.85);

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

  --radio:   18px;
  --radio-s: 12px;
  --sombra-s: 0 2px 10px rgba(29,39,51,.05);
  --sombra:   0 18px 46px -22px rgba(29,39,51,.30);
  --sombra-l: 0 40px 90px -40px rgba(29,39,51,.45);

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

  --envoltura: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --alto-barra: 78px;
}

/* ============================================================ 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(--verde); color:#fff; }

:focus-visible{
  outline:2px solid var(--verde-hondo);
  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(--tinta); 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 no se hace con color: se hace con peso. La parte destacada
   va en Poppins fina contra el grueso del titular. Contraste tipográfico,
   no el resaltado de color que llevan todas las landings. */
h1 em, h2 em{
  font-style:normal;
  font-weight:300;
  letter-spacing:-.01em;
  color:inherit;
}

.antetitulo{
  font-family:var(--geo);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tinta-3);
  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(2.5rem,5vw,3.75rem); max-width:46rem; }

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

/* --- Botones --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.92rem 1.6rem;
  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%; }

.btn-principal{
  background:var(--tinta); color:#fff;
  box-shadow:0 12px 26px -14px rgba(29,39,51,.9);
}
.btn-principal:hover{ background:#0f1720; transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(29,39,51,.75); }

.btn-suave{
  background:rgba(29,39,51,.06);
  color:var(--tinta);
}
.btn-suave:hover{ background:rgba(29,39,51,.12); transform:translateY(-2px); }

.enlace-flecha{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:1.6rem;
  font-family:var(--geo); font-weight:600; font-size:.95rem;
  color:var(--tinta);
  border-bottom:1.5px solid var(--linea-2);
  transition:border-color .3s var(--ease-out), gap .3s var(--ease-out);
}
.enlace-flecha::after{ content:"→"; transition:transform .3s var(--ease-out); }
.enlace-flecha:hover{ border-color:var(--tinta); }
.enlace-flecha:hover::after{ transform:translateX(4px); }

/* --- Vidrio --- */
.vidrio{
  background:rgba(255,255,255,.82);                 /* 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(--verde);
}

/* --- 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:.82rem;
  padding:.3rem .7rem;
  border-radius:999px;
  border:1px dashed var(--linea-2);
}
.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;
}
.plan-precio .antes{
  display:inline-block; margin-right:.5rem;
  font-size:.55em; color:var(--tinta-3); text-decoration:line-through;
}

/* ============================================================ 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);
}
.barra.is-fija{
  background:rgba(247,246,243,.86);
  box-shadow:0 1px 0 var(--linea), 0 12px 30px -26px rgba(29,39,51,.6);
  padding-block:10px;
}
@supports (backdrop-filter: blur(14px)){
  .barra.is-fija{ background:rgba(247,246,243,.7); 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. */
.marca img{ width:auto; height:38px; }
.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(--tinta);
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.barra-nav a:hover{ color:var(--tinta); }
.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,.5);
}
.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(--tinta); 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 ---
   El escenario conserva SIEMPRE la proporción 16:9 del vídeo, y nunca
   crece más de lo que deja la altura de la ventana. Así los rótulos, que
   están anclados en porcentaje, siguen cayendo bajo su documento aunque la
   ventana sea muy ancha y muy baja. Las bandas laterales llevan el mismo
   degradado que el fondo del vídeo, de modo que no se notan. */
.hero{
  position:relative;
  padding-top:var(--alto-barra);   /* la barra flotante tiene su propio sitio */
  background:linear-gradient(180deg,#f5f3f0 0%,#f2f0ec 55%,#e7e5df 100%);
}

.escenario{
  position:relative;
  container-type:inline-size;
  width:100%;
  width:min(100%, calc((100svh - var(--alto-barra)) * 16 / 9));
  aspect-ratio:16/9;
  margin-inline:auto;
  overflow:hidden;
  /* Cuando la ventana es más ancha que 16:9 quedan bandas a los lados.
     Este desvanecido de 3% funde el borde del vídeo con el fondo. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);
}
.escenario video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

/* Seguro sobre la esquina inferior derecha, donde el vídeo original traía
   la marca de agua. Ya está borrada del archivo; esto solo garantiza que
   una copia vieja en caché tampoco la enseñe. */
.escenario::after{
  content:"";
  position:absolute; z-index:5;
  right:0; bottom:0;
  width:16%; height:9%;
  background:radial-gradient(120% 120% at 75% 70%,
    rgba(231,229,222,.98) 0%, rgba(231,229,222,.92) 45%, rgba(231,229,222,0) 78%);
  pointer-events:none;
}

.titular{
  position:absolute; z-index:10;
  left:50%; top:9.5%;
  transform:translateX(-50%);
  width:min(780px,88%);
  text-align:center;
}
.titular h1{
  font-size:clamp(1.35rem,3.4vw,3.35rem);
  font-size:clamp(1.05rem,3.5cqw,3.35rem);   /* escala con el escenario */
  line-height:1.08;
  font-weight:700;
  letter-spacing:-.035em;
}
.titular p{
  margin-top:.7em;
  font-size:clamp(.8rem,1.25vw,1.1rem);
  font-size:clamp(.62rem,1.3cqw,1.1rem);
  color:var(--tinta-2);
  line-height:1.4;
}

/* Rótulos anclados en porcentaje: siguen a los documentos del vídeo */
.rotulo{
  position:absolute; z-index:10; top:77.5%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center;
  text-align:center; width:clamp(120px,17vw,260px);
}
.rotulo-agendamento{ left:18.5%; }
.rotulo-cpf{ left:48.2%; }
.rotulo-crnm{ left:79.7%; }

.punto{ width:9px; height:9px; border-radius:50%; margin-bottom:.6rem; }
.rotulo-agendamento .punto,.hero-movil li:nth-child(1) .punto{ background:var(--ambar); }
.rotulo-cpf .punto,.hero-movil li:nth-child(2) .punto{ background:var(--verde); }
.rotulo-crnm .punto,.hero-movil li:nth-child(3) .punto{ background:var(--azul); }

.rotulo .nombre{
  font-family:var(--geo); font-weight:600;
  font-size:clamp(.82rem,1.35vw,1.2rem);
  font-size:clamp(.6rem,1.35cqw,1.2rem);
}
.rotulo .glosa{
  margin-top:.15em;
  font-size:clamp(.65rem,.95vw,.88rem);
  font-size:clamp(.5rem,.95cqw,.88rem);
  color:var(--tinta-2); line-height:1.3;
}

.hero-cta{
  position:absolute; z-index:10; left:50%; bottom:4.5%;
  transform:translateX(-50%);
  display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center;
}
/* Los botones del hero también encogen con el escenario, para que no
   invadan los rótulos en ventanas bajas. */
.hero-cta .btn{
  padding:clamp(.5rem,.95cqw,.92rem) clamp(.9rem,1.7cqw,1.6rem);
  font-size:clamp(.68rem,1cqw,.95rem);
}

.hero-movil{ display:none; }

/* --- Tira de confianza --- */
.tira{
  position:relative; z-index:2;
  background:var(--blanco);
  border-block:1px solid var(--linea);
}
.tira-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.tira-item{
  padding:1.9rem 1.6rem;
  border-left:1px solid var(--linea);
}
.tira-item:first-child{ border-left:0; }
.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); }

/* --- Problema --- */
.problema{ padding-block:clamp(4.5rem,9vw,7.5rem); }
.problema-grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2.5rem,6vw,5rem); align-items:center;
}
.problema-texto h2{ margin-bottom:1.3rem; }
.problema-texto p{ color:var(--tinta-2); max-width:48ch; margin-bottom:1rem; }

.problema-doc{ position:relative; }
.problema-doc img{
  width:100%; border-radius:var(--radio-s);
  box-shadow:var(--sombra-l);
}
.problema-doc figcaption{
  margin-top:1rem; text-align:center;
  font-size:.78rem; color:var(--tinta-3);
}
.problema-doc::before{
  content:""; position:absolute; inset:-18% -14%;
  background:radial-gradient(50% 45% at 50% 50%, rgba(91,194,54,.20), transparent 72%);
  filter:blur(60px); z-index:-1; pointer-events:none;
}

/* --- Servicios --- */
.servicios{
  padding-block:clamp(4.5rem,9vw,7.5rem);
  background:var(--papel-2);
  border-block:1px solid var(--linea);
}
.tarjetas{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:1.15rem;
}
.tarjeta{ position:relative; padding:1.9rem 1.7rem 1.7rem; grid-column:span 2; }
.tarjeta:nth-child(4),.tarjeta:nth-child(5){ grid-column:span 3; }

.tarjeta h3{ margin-bottom:.6rem; }
.tarjeta p{ font-size:.94rem; color:var(--tinta-2); }

.tarjeta.destacada{ border-color:rgba(91,194,54,.55); }
.tarjeta.destacada::after{
  content:""; position:absolute; inset:0; border-radius:var(--radio);
  box-shadow:0 0 0 1px rgba(91,194,54,.35), 0 26px 60px -32px rgba(91,194,54,.75);
  pointer-events:none;
}
.sello{
  position:absolute; top:1.35rem; right:1.35rem;
  padding:.24rem .62rem; border-radius:999px;
  background:var(--verde-hondo); color:#fff;
  font-family:var(--geo); font-size:.66rem; font-weight:600; letter-spacing:.05em;
}

/* --- Paquetes --- */
.paquetes{ padding-block:clamp(4.5rem,9vw,7.5rem); }
.planes{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1.4rem; align-items:start;
}
.plan{ padding:2.1rem 1.9rem; }
.plan-nota{ font-size:.9rem; color:var(--tinta-2); margin-top:.35rem; }
.plan .lista-check{ margin-bottom:1.7rem; }
.plan-destacado{ border-color:rgba(0,169,224,.45); box-shadow:var(--sombra-l); }

/* --- Proceso --- */
.proceso{
  padding-block:clamp(4.5rem,9vw,7.5rem);
  border-top:1px solid var(--linea);
}
.pasos{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1.6rem; counter-reset:paso;
}
.paso{ position:relative; padding-top:2.6rem; }
.paso::before{
  content:""; position:absolute; top:1.05rem; left:0; right:-1.6rem;
  height:1px; background:var(--linea-2);
}
.paso:last-child::before{ right:0; }
.paso-num{
  position:absolute; top:0; left:0;
  width:2.1rem; height:2.1rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--tinta); color:#fff;
  font-family:var(--geo); font-size:.85rem; font-weight:600;
}
.paso h3{ margin-bottom:.5rem; }
.paso p{ font-size:.92rem; color:var(--tinta-2); }

/* --- Nosotros --- */
.nosotros{
  padding-block:clamp(4.5rem,9vw,7.5rem);
  background:var(--tinta);
  color:rgba(255,255,255,.78);
}
.nosotros .antetitulo{ color:rgba(255,255,255,.42); }
.nosotros h2{ color:#fff; }
.nosotros h2 em{ color:rgba(255,255,255,.72); }

.nosotros-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,5vw,4rem); align-items:center;
}

.nosotros-figura{ position:relative; }
.nosotros-figura img{
  width:100%;
  aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radio);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8);
}
/* Halo de marca detrás de la foto */
.nosotros-figura::before{
  content:""; position:absolute; inset:-12% -8%;
  background:radial-gradient(50% 45% at 50% 50%, rgba(91,194,54,.22), transparent 72%);
  filter:blur(70px); z-index:-1; pointer-events:none;
}

.nosotros-cuerpo .antetitulo{ margin-bottom:.7rem; }
.nosotros-cuerpo h2{ margin-bottom:1.5rem; }
.nosotros-cuerpo p{ margin-bottom:1rem; max-width:52ch; }
.nosotros-cuerpo p:last-of-type{ margin-bottom:0; }

.nosotros-cuerpo blockquote{
  margin-top:2rem;
  padding-left:1.3rem;
  border-left:2px solid var(--verde);
  font-family:var(--geo);
  font-size:clamp(1.05rem,1.8vw,1.3rem);
  font-weight:500; line-height:1.4; letter-spacing:-.02em;
  color:#fff;
}

/* Cifras: se muestran solo cuando manifest.js las trae.
   La regla de display ganaría al atributo hidden, así que hay que anularla. */
.cifras[hidden],.cifra[hidden]{ display:none; }
.cifras{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  margin-top:clamp(3rem,6vw,4.5rem);
  padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid rgba(255,255,255,.14);
}
.cifra b{
  display:block;
  font-family:var(--geo); font-weight:600;
  font-size:clamp(1.9rem,4vw,3rem);
  letter-spacing:-.04em; line-height:1;
  color:#fff;
}
.cifra span{
  display:block; margin-top:.5rem;
  font-size:.9rem; color:rgba(255,255,255,.55);
  max-width:22ch;
}

/* --- Preguntas --- */
.preguntas{
  padding-block:clamp(4.5rem,9vw,7.5rem);
  background:var(--papel-2);
  border-block:1px solid var(--linea);
}
.preguntas-grid{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(2.5rem,6vw,4.5rem); align-items:start;
}
.acordeon details{
  border-bottom:1px solid var(--linea-2);
  padding:1.15rem 0;
}
.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;
  font-size:1.3rem; font-weight:400; color:var(--tinta-3);
  transition:transform .35s var(--ease-out);
}
.acordeon details[open] summary::after{ transform:rotate(45deg); }
.acordeon details p{
  margin-top:.75rem; padding-right:2rem;
  font-size:.94rem; color:var(--tinta-2);
}

/* --- Contacto --- */
.contacto{ padding-block:clamp(4.5rem,9vw,7.5rem); }
.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; }

.contacto-canales{ margin-top:2.2rem; display:grid; gap:.85rem; }
.canal{
  display:flex; align-items:center; gap:1rem;
  padding:1rem 1.2rem;
  border:1px solid var(--linea-2); border-radius:var(--radio-s);
  background:var(--blanco);
  transition:transform .35s var(--ease-out), border-color .35s var(--ease-out),
             box-shadow .35s var(--ease-out);
}
.canal:hover{ transform:translateY(-2px); border-color:var(--verde); box-shadow:var(--sombra); }
.canal-icono{
  flex:none; width:38px; height:38px; border-radius:11px;
  display:grid; place-items:center;
  background:rgba(29,39,51,.05); color:var(--tinta);
}
.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 --- */
.formulario{ padding:2rem 1.9rem; display:grid; gap:1rem; }
.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 var(--linea-2); border-radius:10px;
  background:rgba(255,255,255,.75);
  font:inherit; font-size:.94rem; color:var(--tinta);
  transition:border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.campo textarea{ resize:vertical; min-height:82px; }
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--verde); background:#fff;
}
.campo input:invalid:not(:placeholder-shown){ border-color:#d9534f; }

/* --- Pie --- */
.pie{
  padding-block:clamp(3rem,6vw,4.5rem);
  background:var(--tinta); color:rgba(255,255,255,.72);
}
.pie-grid{ display:grid; gap:1.5rem; justify-items:center; text-align:center; }
.pie-marca img{ width:74px; height:auto; }
.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;
  border-top:1px solid rgba(255,255,255,.12);
  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:#25D366; 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; }

/* Flotación lenta del documento */
[data-flota]{ animation:flotar 7s var(--ease-soft) infinite; }
@keyframes flotar{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-12px); }
}

/* Halo de color del fondo, muy tenue, con los tres tonos del logotipo */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 30% at 12% 18%, rgba(91,194,54,.11), transparent 70%),
    radial-gradient(34% 28% at 88% 42%, rgba(245,166,35,.10), transparent 70%),
    radial-gradient(40% 32% at 50% 92%, rgba(0,169,224,.10), 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; }
}

@media (max-width:959px){
  .tarjetas{ grid-template-columns:repeat(4,1fr); }
  .tarjeta{ grid-column:span 2; }
  .tarjeta:nth-child(5){ grid-column:span 4; }
  .pasos{ grid-template-columns:repeat(2,1fr); row-gap:2.4rem; }
  .paso:nth-child(2)::before{ right:0; }
  .problema-grid,.preguntas-grid,.contacto-grid,.nosotros-grid{ grid-template-columns:1fr; }
  .problema-doc{ max-width:420px; margin-inline:auto; }
  .planes{ grid-template-columns:1fr; }
  .tira-grid{ grid-template-columns:repeat(2,1fr); }
  .tira-item:nth-child(3){ border-left:0; }
  .tira-item:nth-child(n+3){ border-top:1px solid var(--linea); }
}

/* Ventana ancha pero baja: los botones salen de encima del vídeo, que ahí
   no tienen sitio, y se colocan justo debajo. */
@media (min-width:900px) and (max-height:640px){
  .hero-cta{ display:none; }
  .hero-movil{ display:block; padding:.9rem var(--gutter) 1.3rem; }
  .hero-movil ul{ display:none; }
  .hero-cta-movil{
    display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center;
  }
}

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

  /* 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;
    background:#fff;
    border:1px solid var(--linea);
    border-radius:var(--radio);
    box-shadow:var(--sombra);
    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-principal{ display:none; }

  /* En móvil nada se superpone: titular arriba, vídeo debajo, y los
     rótulos y botones en flujo normal. */
  .escenario{
    width:100%;
    aspect-ratio:auto; overflow:visible;
    display:flex; flex-direction:column;
    padding-top:var(--alto-barra);
  }
  .escenario video{
    position:static;
    width:100%; height:auto;
    aspect-ratio:16/9;     /* la del vídeo: así no se recorta ningún documento */
  }
  .titular{
    position:static; transform:none; order:-1;
    width:auto; padding:1.6rem var(--gutter) 1.4rem;
  }
  .titular h1{ font-size:clamp(1.55rem,7.2vw,2.15rem); }
  .titular p{ font-size:1rem; }
  .rotulo,.hero-cta{ display:none; }

  .hero-movil{ display:block; padding:1.6rem var(--gutter) 2.4rem; }
  .hero-movil ul{ display:grid; gap:.9rem; margin-bottom:1.6rem; }
  .hero-movil li{
    display:grid; grid-template-columns:auto 1fr; align-items:baseline;
    column-gap:.75rem; row-gap:.1rem;
  }
  .hero-movil .punto{ margin:0; align-self:center; }
  .hero-movil b{ font-family:var(--geo); font-weight:600; font-size:1rem; }
  .hero-movil i{
    grid-column:2; font-style:normal; font-size:.88rem; color:var(--tinta-2);
  }
  .hero-cta-movil{ display:grid; gap:.65rem; }

  .cifras{ grid-template-columns:1fr; gap:1.8rem; }
  .tira-grid{ grid-template-columns:1fr; }
  .tira-item{ border-left:0; border-top:1px solid var(--linea); padding-block:1.5rem; }
  .tira-item:first-child{ border-top:0; }
  .tarjetas{ grid-template-columns:1fr; }
  .tarjeta,.tarjeta:nth-child(4),.tarjeta:nth-child(5){ grid-column:span 1; }
  .pasos{ grid-template-columns:1fr; row-gap:2rem; }
  .paso::before{ right:0; }
  .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); }
  .tira-item{ border-top:0; border-left:1px solid var(--linea); }
  .tira-item:nth-child(odd){ border-left:0; }
  .tira-item:nth-child(n+3){ border-top:1px solid var(--linea); }

  .tarjetas{ grid-template-columns:repeat(2,1fr); }
  .tarjeta,.tarjeta:nth-child(4){ grid-column:span 1; }
  .tarjeta:nth-child(5){ grid-column:span 2; }

  .planes{ grid-template-columns:repeat(2,1fr); }
  .pasos{ grid-template-columns:repeat(2,1fr); row-gap:2.4rem; }
  .paso:nth-child(2)::before{ right:0; }

  /* Los botones del hero no necesitan ocupar todo el ancho aquí */
  .hero-movil ul{ max-width:540px; margin-inline:auto; }
  .hero-cta-movil{ display:flex; justify-content:center; gap:.7rem; }
}

/* ============================================================ 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){
  .escenario video{ display:none; }
  .escenario{
    background:url("assets/img/portalia-hero-poster.webp") center/cover no-repeat;
  }
  [data-flota]{ animation:none; }
  body::before{ animation:none; }
}