/* ============================================================
   Retorika — hero con vídeo de fondo y camino interactivo
   ============================================================ */

:root{
  --pink:#F4166B;
  --green:#12C56B;
  --blue:#1D6DF0;
  --ink:#0B1220;
  --ink-soft:#5A6577;
  --paper:#FBFCFD;
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --nav:"Space Grotesk", "Inter", system-ui, sans-serif;
  --shell: clamp(20px, 5vw, 72px);
  --header-h: 114px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
button{ font:inherit; color:inherit; }

/* ---------------- Header ---------------- */
.site-header{
  position:absolute; inset:0 0 auto 0; z-index:40;
  transition:opacity .3s ease;
  /* la banda vacía de la cabecera deja pasar el ratón: si no, se come las
     pulsaciones de lo que asome por debajo */
  pointer-events:none;
  display:flex; align-items:center; gap:clamp(16px,4vw,56px);
  padding:clamp(16px,2.2vw,30px) var(--shell);
}
.site-header > *{ pointer-events:auto; }
.logo{ display:flex; align-items:center; text-decoration:none; flex:0 0 auto; }
.logo__img{
  height:clamp(19px,1.55vw,27px); width:auto; display:block;
  transition:opacity .25s ease;
}
.logo:hover .logo__img{ opacity:.75; }
.site-nav{
  flex:1 1 auto;
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:clamp(20px,2.9vw,58px);
  padding:0 clamp(12px,2vw,40px);
  --tam:clamp(14px,1.05vw,16.5px);
  --crece:1.16;   /* cuánto crece la sección en la que estás */
}
.site-nav a{
  font-family:var(--nav); font-weight:500;
  font-size:var(--tam); letter-spacing:.022em;
  color:#3F5273; text-decoration:none; white-space:nowrap;
  position:relative; padding:4px 0; text-align:center;
  transition:color .25s ease, transform .34s cubic-bezier(.2,.8,.25,1);
}
.site-nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:var(--blue); transition:width .3s ease;
}
.site-nav a:hover{ color:var(--blue); }
.site-nav a:hover::after{ width:100%; }

/* La sección en la que estás se pone en negrita y crece. El ancho de la
   negrita se reserva de antemano con una copia invisible del texto, y lo de
   crecer se hace con escala, que no ocupa sitio en el diseño: así el menú
   ocupa exactamente lo mismo que antes y no se parte antes de tiempo. */
.site-nav a::before{
  content:attr(data-nombre);
  display:block; height:0; overflow:hidden;
  font-weight:700; visibility:hidden; pointer-events:none;
}
.site-nav a.esta-en{
  font-weight:700; color:#0E1626;
  transform:scale(var(--crece));
  transform-origin:50% 100%;
  animation:navCrece .44s cubic-bezier(.2,.9,.25,1);
}
@keyframes navCrece{
  0%{ transform:scale(1); }
  52%{ transform:scale(calc(var(--crece) + .06)) translateY(-1px); }
  100%{ transform:scale(var(--crece)); }
}

/* El subrayado es una barra de progreso: una barra azul maciza que se dibuja
   de izquierda a derecha al llegar a la sección, y por la que después corre
   un pulso blanco, como una carga en marcha. Entre pasada y pasada se toma
   un respiro, para que sea un latido y no un parpadeo continuo. */
.site-nav a.esta-en::after{
  content:""; position:absolute; left:0; right:0; width:auto;
  bottom:-2px; height:3px; border-radius:2px;
  background-color:var(--blue);
  background-image:linear-gradient(90deg,
    rgba(255,255,255,0), rgba(255,255,255,.55) 30%,
    rgba(255,255,255,.92) 52%, rgba(255,255,255,.55) 70%, rgba(255,255,255,0));
  background-size:42% 100%;
  background-repeat:no-repeat;
  background-position:-100% 0;
  animation:barraEntra .5s cubic-bezier(.25,.9,.3,1) both,
            barraCarga 2.4s cubic-bezier(.55,0,.45,1) .5s infinite;
}
@keyframes barraEntra{
  from{ clip-path:inset(0 100% 0 0); }
  to{ clip-path:inset(0 0 0 0); }
}
@keyframes barraCarga{
  0%{ background-position:-100% 0; }
  62%,100%{ background-position:200% 0; }
}

@media (prefers-reduced-motion:reduce){
  .site-nav a{ transition:color .25s ease; }
  .site-nav a.esta-en{ animation:none; }
  .site-nav a.esta-en::after{ animation:none; }
}

.btn-cta{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:16px;
  padding:7px 7px 7px 26px;
  border-radius:999px; text-decoration:none; cursor:pointer;
  border:1px solid rgba(18,30,52,.14);
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  color:#101A2B;
  font-family:var(--nav); font-weight:500; font-size:16px; letter-spacing:.012em;
  box-shadow:0 8px 22px -16px rgba(18,30,52,.5);
  transition:background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.btn-cta__arrow{
  width:38px; height:38px; flex:0 0 auto;
  border-radius:50%; display:grid; place-items:center;
  background:#101A2B; color:#fff;
  transition:background .3s ease, color .3s ease, transform .35s cubic-bezier(.2,.8,.3,1);
}
.btn-cta__arrow svg{ width:16px; height:16px; }
.btn-cta:hover{
  background:#101A2B; color:#fff; border-color:#101A2B;
  box-shadow:0 14px 30px -16px rgba(18,30,52,.75);
}
.btn-cta:hover .btn-cta__arrow{ background:#fff; color:#101A2B; transform:translateX(3px); }
.btn-cta:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }


/* ---------------- Hero: una sola pantalla ---------------- */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex; flex-direction:column;
  overflow:hidden;
  isolation:isolate;
  background:#EEF3F7;
}

/* ---- vídeo de fondo en bucle ---- */
.stage{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.stage__photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}
/* velo: blanco denso arriba-izquierda (donde va el texto), limpio en el camino */
.stage__veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(104deg,
      rgba(255,255,255,.93) 0%,
      rgba(255,255,255,.80) 22%,
      rgba(255,255,255,.42) 40%,
      rgba(255,255,255,.06) 58%,
      rgba(255,255,255,0)   72%),
    linear-gradient(180deg,
      rgba(255,255,255,.72) 0%,
      rgba(255,255,255,.18) 16%,
      rgba(255,255,255,0)   34%);
}

/* ---- el camino ---- */
.stage__route{
  position:absolute; left:0; top:0;   /* medidas exactas: script.js */
  overflow:visible; pointer-events:none;
  opacity:0; transition:opacity .8s ease .2s;
}
.stage.is-ready .stage__route{ opacity:1; }
.route{
  fill:none; stroke:url(#gRoute); stroke-linecap:round;
  stroke-width:2.6;
}
.route--near{ stroke-width:8; }
.route--glow{ stroke-width:18; opacity:.35; }
.route--flow{
  stroke-width:3.6; stroke-dasharray:26 38;
  animation:routeFlow 14s linear infinite;
  opacity:.95;
}
@keyframes routeFlow{ to{ stroke-dashoffset:-740; } }

/* ---------------- Pines ---------------- */
.pin{
  /* left/top los fija JS sobre el punto exacto del camino (script.js) */
  position:absolute; left:0; top:0;
  width:42px; height:63px;
  transform:translate(-50%,-100%) scale(calc(var(--depth,1) * var(--zoom,1)));
  transform-origin:50% 100%;
  padding:0; border:0; background:none; cursor:pointer;
  color:var(--accent);
  z-index:12;
  opacity:0; transition:opacity .6s ease;
  -webkit-tap-highlight-color:transparent;
}
.stage.is-ready .pin{ opacity:1; }
/* área de pulsación cómoda */
.pin::after{ content:""; position:absolute; inset:-16px -22px -22px; }
.pin--pink { --accent:var(--pink);  --accent-rgb:244,22,107; }
.pin--green{ --accent:var(--green); --accent-rgb:18,197,107; --retraso:.87s; }
.pin--blue { --accent:var(--blue);  --accent-rgb:29,109,240; --retraso:1.73s; }

/* el puntero late: dos golpes crecendo desde la punta, a compás con el
   anillo que sale del suelo. Se anima "scale" y no "transform", así el
   salto del ratón encima se suma al latido en vez de pisarlo. */
.pin__marker{
  position:relative; z-index:3; width:100%; height:100%;
  fill:var(--accent);
  filter:drop-shadow(0 10px 14px rgba(11,18,32,.3));
  transform-origin:50% 100%;
  animation:pinLatido 2.6s ease-out var(--retraso,0s) infinite;
  transition:transform .28s cubic-bezier(.2,.8,.3,1.2);
}
@keyframes pinLatido{
  0%   { scale:1; }
  9%   { scale:1.16; }
  19%  { scale:1.02; }
  28%  { scale:1.09; }
  46%, 100%{ scale:1; }
}

/* pulso: anillos elípticos apoyados en el suelo */
.pin__ring{
  position:absolute; left:50%; bottom:0;
  width:94px; height:36px; margin:0 0 -16px -47px;
  border-radius:50%;
  border:2px solid rgba(var(--accent-rgb),.8);
  background:radial-gradient(closest-side, rgba(var(--accent-rgb),.3), rgba(var(--accent-rgb),0) 72%);
  animation:pulse 2.6s cubic-bezier(.22,.61,.36,1) var(--retraso,0s) infinite;
  pointer-events:none; z-index:1;
}
.pin__ring--b{ animation-delay:calc(var(--retraso,0s) + 1.3s); }
@keyframes pulse{
  0%  { transform:scale(.28); opacity:0; }
  12% { opacity:.95; }
  100%{ transform:scale(1.55); opacity:0; }
}
.pin__glow{
  position:absolute; left:50%; bottom:0;
  width:70px; height:26px; margin:0 0 -11px -35px; border-radius:50%;
  background:rgba(var(--accent-rgb),.6); filter:blur(9px);
  animation:glowPulse 2.6s ease-in-out var(--retraso,0s) infinite;
  pointer-events:none; z-index:0;
}
@keyframes glowPulse{ 0%,100%{ opacity:.35; transform:scale(.9); } 50%{ opacity:.9; transform:scale(1.14); } }

.pin:hover .pin__marker,
.pin:focus-visible .pin__marker{
  transform:translateY(-13px) scale(1.2);
  filter:drop-shadow(0 18px 22px rgba(11,18,32,.42));
}
.pin:focus-visible{ outline:none; }
.pin:focus-visible .pin__ring{ border-color:rgba(var(--accent-rgb),1); }

/* etiqueta junto al pin: rotula hacia el hueco de la izquierda, para no
   cruzarse con la figura que camina. El texto compensa la perspectiva del
   pin (1/depth) para leerse igual de grande en los tres puntos.        */
.pin__label{
  position:absolute; right:100%; bottom:calc(34% + var(--sube,0px));
  margin-right:26px;
  width:320px; text-align:right;
  display:flex; flex-direction:column; align-items:flex-end; gap:7px;
  transform:scale(calc(1 / var(--depth,1)));
  transform-origin:100% 50%;
  pointer-events:none;
  transition:opacity .45s ease;
}
/* los dos puntos que suben junto a la figura rotulan hacia el lado libre */
.pin--green .pin__label,
.pin--blue .pin__label{
  right:auto; left:100%;
  margin:0 0 0 26px;
  text-align:left; align-items:flex-start;
  transform-origin:0 50%;
}
/* Destaca, a la altura de la cabeza de su puntero y cerca de él. Colgado de
   su parte baja subía hasta Escala; así baja, y como la línea del camino
   sube hacia la derecha, a esa altura ya no la pisa aunque esté cerca. El
   --sube (que lo aparta de los logos si hace falta) sigue funcionando. */
.pin--green .pin__label{
  margin-left:calc(32px + 1vw);
  bottom:auto; top:calc(40% - var(--sube,0px));
}
/* los textos de Destaca y Escala, en tres líneas cortas en vez de dos
   largas: ocupan menos a lo ancho */
@media (min-width:1401px){
  /* el ancho va en em del propio texto: así son tres líneas en cualquier
     tamaño de pantalla, aunque la letra crezca o mengüe con ella */
  .pin--green .pin__desc{ max-width:17em; text-wrap:balance; }
  .pin--blue .pin__desc{ max-width:14em; text-wrap:balance; }
  /* con tres líneas, Escala se acercaba a la raya de Destaca: sube un poco */
  .pin--blue .pin__label{ margin-bottom:14px; }
}

.pin__dash{ width:30px; height:2px; background:var(--accent); border-radius:2px; opacity:.95; }
.pin__title{
  font-family:var(--sans); font-weight:700;
  font-size:27px; line-height:1.05; letter-spacing:-.012em;
  color:var(--accent);
  text-shadow:0 1px 14px rgba(255,255,255,.95);
}
.pin__desc{
  font-size:15.5px; line-height:1.5; color:#33415A; font-weight:400;
  text-shadow:0 1px 10px rgba(255,255,255,.95), 0 0 22px rgba(255,255,255,.85);
}
/* el texto también responde: se adelanta y gana cuerpo, y se puede
   apuntar directamente a él además de al icono */
.pin__title, .pin__desc{ pointer-events:auto; }
.pin__title{ transition:transform .28s cubic-bezier(.2,.8,.3,1.3), text-shadow .28s ease; }
.pin--pink .pin__title{ transform-origin:100% 50%; }
.pin--green .pin__title, .pin--blue .pin__title{ transform-origin:0 50%; }
.pin__desc{ transition:color .28s ease; }
.pin:hover .pin__title,
.pin:focus-visible .pin__title{
  transform:scale(1.06);
  text-shadow:0 2px 18px rgba(255,255,255,1), 0 0 30px rgba(var(--accent-rgb),.35);
}
.pin:hover .pin__desc,
.pin:focus-visible .pin__desc{ color:#16233A; }
.pin:hover .pin__ring,
.pin:focus-visible .pin__ring{ border-color:rgba(var(--accent-rgb),1); }
.pin:hover .pin__glow,
.pin:focus-visible .pin__glow{ opacity:1; }

/* ---------------- Contenido del hero ---------------- */
.hero__content{
  position:relative; z-index:20;
  flex:1 1 auto; min-height:0;
  padding:clamp(92px,11vh,132px) var(--shell) clamp(24px,4vh,64px);
  width:min(1180px, 68vw);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  /* el bloque cubre media pantalla: que no robe el clic a los punteros */
  pointer-events:none;
}
.hero__content > *{ pointer-events:auto; }
.eyebrow{
  display:flex; flex-direction:column; gap:13px;
  font-size:clamp(11px,.95vw,13px); letter-spacing:.34em; text-transform:uppercase;
  color:#6E7A8C; font-weight:500; margin-bottom:18px;
}
.eyebrow i{ width:42px; height:2px; background:var(--blue); border-radius:2px; }

.claim{
  margin:0 0 clamp(18px,2.6vh,34px);
  display:flex; flex-direction:column; gap:clamp(14px,2.4vh,34px);
}
.claim__ink{ color:#0E1626; }
/* en el ordenador "con estrategia" va un pelín más pequeño que "Comunica" */
@media (min-width:861px){ .claim__ink{ font-size:.88em; } }
.claim__strong{
  font-family:var(--sans); font-weight:700; text-transform:uppercase;
  font-size:clamp(50px,6.1vw,116px); line-height:.96; letter-spacing:-.024em;
  color:#1257C0;
}
.claim__lead{
  font-family:var(--sans); font-weight:400;
  font-size:clamp(22px,2.6vw,48px); line-height:1.2; letter-spacing:-.014em;
  color:#16233A;
}
.claim__sub{
  display:flex; align-items:center; gap:14px;
  margin:0;
  font-size:clamp(13px,1.1vw,17px); letter-spacing:.2em;
  color:#4C5A73; font-weight:500;
  text-shadow:0 1px 12px rgba(255,255,255,.95), 0 0 26px rgba(255,255,255,.8);
}
/* el puntito que late, como un piloto encendido */
.claim__sub::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--blue); flex:0 0 auto;
  animation:latido 2.4s cubic-bezier(.25,.8,.4,1) infinite;
}
@keyframes latido{
  0%  { transform:scale(1);    box-shadow:0 0 0 0 rgba(29,109,240,.55); }
  55% { transform:scale(1.16); box-shadow:0 0 0 11px rgba(29,109,240,0); }
  100%{ transform:scale(1);    box-shadow:0 0 0 0 rgba(29,109,240,0); }
}
@media (prefers-reduced-motion:reduce){ .claim__sub::before{ animation:none; } }

/* el botón que baja a Contacto */
.claim__cta{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:12px;
  margin-top:clamp(14px,2vh,24px);
  padding:13px 26px; border-radius:999px; text-decoration:none;
  border:1px solid rgba(29,109,240,.45); background:rgba(255,255,255,.72);
  backdrop-filter:blur(8px) saturate(130%);
  -webkit-backdrop-filter:blur(8px) saturate(130%);
  color:var(--blue); font-family:var(--nav); font-weight:600;
  font-size:clamp(14px,1.05vw,15.5px);
  box-shadow:0 10px 26px -18px rgba(22,34,56,.8);
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.claim__cta svg{ width:16px; height:16px; transition:transform .25s ease; }
.claim__cta:hover{ background:var(--blue); color:#fff; transform:translateY(-2px); }
.claim__cta:hover svg{ transform:translateX(4px); }
.claim__cta:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

/* atajos a los tres puntos; sólo aparecen cuando el camino se reduce */
.path-links{ display:none; }
.path-link{
  --accent-rgb:29,109,240;
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 24px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(var(--accent-rgb),.35);
  background:rgba(var(--accent-rgb),.08);
  color:var(--accent); font-family:var(--nav); font-weight:600; font-size:17px;
  transition:background .25s ease, transform .25s ease;
}
.path-link::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.16);
}
.path-link:hover{ background:rgba(var(--accent-rgb),.16); transform:translateY(-2px); }
.path-link--pink { --accent:var(--pink);  --accent-rgb:244,22,107; }
.path-link--green{ --accent:var(--green); --accent-rgb:18,197,107; }
.path-link--blue { --accent:var(--blue);  --accent-rgb:29,109,240; }

/* ---------------- Logos ---------------- */
.trust{
  position:relative; z-index:20; margin-top:auto;
  padding:clamp(16px,2.2vh,28px) var(--shell) clamp(24px,3.4vh,40px);
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.30) 16%, rgba(255,255,255,.86) 44%, rgba(255,255,255,.96) 100%);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
/* rótulo-interruptor: los logos se ven de salida y se recogen al pulsarlo */
.trust__head{
  display:flex; align-items:center; justify-content:center; gap:clamp(12px,1.6vw,22px);
  width:100%; padding:6px 0; margin:0;
  border:0; background:none; cursor:pointer;
  color:#8A94A5; -webkit-tap-highlight-color:transparent;
  transition:color .3s ease;
}
.trust__head:hover, .trust__head:focus-visible{ color:#4C5A6E; outline:none; }
.trust__label{
  font-size:11px; letter-spacing:.34em; text-transform:uppercase; white-space:nowrap;
}
.trust__rule{
  height:1px; flex:0 1 min(150px,16vw);
  background:linear-gradient(90deg,transparent,#CFD7E1,transparent);
}
.trust__chev{
  display:grid; place-items:center; width:22px; height:22px; flex:0 0 auto;
  border-radius:50%; border:1px solid rgba(140,151,168,.35);
  transition:transform .45s cubic-bezier(.2,.8,.3,1), border-color .3s ease, background .3s ease;
}
.trust__chev svg{ width:13px; height:13px; }
.trust__head:hover .trust__chev{ border-color:rgba(29,109,240,.45); background:rgba(29,109,240,.06); }
.trust.is-open .trust__chev{ transform:rotate(180deg); }

/* panel plegable: abierto de salida, lo cierra el rótulo */
.trust__panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .55s cubic-bezier(.2,.8,.3,1), visibility .55s;
  visibility:hidden;
}
.trust__panel > div{ overflow:hidden; min-height:0; }
.trust.is-open .trust__panel{ grid-template-rows:1fr; visibility:visible; }
.trust__logos{
  margin-top:clamp(12px,1.8vh,22px);
  /* Doce marcas en dos filas de seis. La rejilla lleva el doble de columnas
     que marcas por fila y cada marca ocupa dos: si algún día hay un número
     impar y la fila de abajo lleva una menos, basta con que su primera marca
     empiece una columna más adentro (grid-column-start:2) para que quede
     centrada bajo la de arriba en vez de descolgada a un lado. */
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:clamp(10px,1.4vh,18px) clamp(10px,1.4vw,26px);
  align-items:center; justify-items:center;
  /* la rejilla se estira hasta los laterales para que los logos respiren */
  max-width:none;
  margin-inline:calc(-1 * (var(--shell) - clamp(10px,1.5vw,26px)));
  --lh:clamp(30px, 2.6vw, 46px);
}
/* cada marca lleva su factor --k para equilibrar el peso óptico;
   al abrir el panel se asoman escalonadas de abajo arriba */
.brand{
  grid-column:span 2;
  height:calc(var(--lh) * var(--k, 1));
  width:auto; max-width:100%; object-fit:contain;
  opacity:0; transform:translateY(16px);
  /* la franja va en gris para que ninguna marca grite más que otra; al
     pasar el ratón cada una recupera su color */
  filter:grayscale(1);
  transition:opacity .45s ease, transform .5s cubic-bezier(.2,.8,.3,1), filter .35s ease;
}
.trust.is-open .brand{ opacity:.82; transform:none; }
.trust.is-open .brand:hover{ opacity:1; transform:translateY(-2px); filter:grayscale(0); }
.trust.is-open .brand:nth-child(1) { transition-delay:.06s; }
.trust.is-open .brand:nth-child(2) { transition-delay:.10s; }
.trust.is-open .brand:nth-child(3) { transition-delay:.14s; }
.trust.is-open .brand:nth-child(4) { transition-delay:.18s; }
.trust.is-open .brand:nth-child(5) { transition-delay:.22s; }
.trust.is-open .brand:nth-child(6) { transition-delay:.26s; }
.trust.is-open .brand:nth-child(7) { transition-delay:.14s; }
.trust.is-open .brand:nth-child(8) { transition-delay:.18s; }
.trust.is-open .brand:nth-child(9) { transition-delay:.22s; }
.trust.is-open .brand:nth-child(10){ transition-delay:.26s; }
.trust.is-open .brand:nth-child(11){ transition-delay:.30s; }
.trust.is-open .brand:nth-child(12){ transition-delay:.34s; }



/* ================= PASE DE SECCIONES =================
   Las pantallas no se desplazan: se relevan. Como las dos comparten
   encuadre, al fundirse la escena permanece quieta y lo único que
   ocurre es que la figura se disuelve.                              */
@media (min-width:861px){
  html, body{ height:100%; overflow:hidden; }

  .deck{ position:relative; height:100vh; height:100svh; overflow:hidden; }

  .deck > section{
    position:absolute; inset:0;
    height:100%; min-height:0;
    opacity:0; visibility:hidden;
    transition:opacity .95s cubic-bezier(.4,0,.2,1), visibility .95s;
  }
  .deck > section.is-active{ opacity:1; visibility:visible; }
  /* la sección que no está en pantalla no recibe pulsaciones: si no, sus
     capas internas (que sí se declaran visibles) se comen los clics de la
     que sí se está viendo */
  .deck > section:not(.is-active){ pointer-events:none; }

  /* el contenido entra y sale con un desplazamiento corto, escalonado */
  .hero__content, .trust, .contact__head, .contact__grid, .about__head{
    transition:opacity .7s ease, transform .95s cubic-bezier(.2,.8,.3,1);
  }
  .deck > section:not(.is-active) .hero__content{ opacity:0; transform:translateY(-26px); }
  .deck > section:not(.is-active) .trust{ opacity:0; transform:translateY(20px); }
  .deck > section:not(.is-active) .contact__head{ opacity:0; transform:translateY(34px); }
  .deck > section:not(.is-active) .about__head{ opacity:0; transform:translateY(28px); }
  .deck > section.is-active .about__head{ transition-delay:.14s; }
  .deck > section:not(.is-active) .contact__grid{ opacity:0; transform:translateY(46px); }
  .deck > section.is-active .contact__head{ transition-delay:.16s; }
  .deck > section.is-active .contact__grid{ transition-delay:.26s; }
  .deck > section.is-active .hero__content{ transition-delay:.18s; }
  .deck > section.is-active .trust{ transition-delay:.28s; }

  /* los punteros del camino se van antes que la escena, para que se lea
     bien el momento en que la figura desaparece */
  .deck > section:not(.is-active) .pin,
  .deck > section:not(.is-active) .stage__route{ opacity:0; transition:opacity .45s ease; }

  /* dentro de la sección, si el contenido no cabe, se desplaza ella sola */
  .contact, .about{ overflow-y:auto; overscroll-behavior:contain; }

  /* en modo pase la escena limpia no necesita máscara: el fundido la trae */
  .contact::before{
    background-attachment:scroll;
    -webkit-mask-image:none; mask-image:none;
  }
  .contact::after{ -webkit-mask-image:none; mask-image:none; }

  /* ---- La escena, un poco más cerca ----
     La portada amplía su foto un 8 % desde el borde izquierdo (script.js,
     ZOOM_ESCENA) para apartar la figura del titular. Los fondos de las
     demás secciones hacen aquí la misma cuenta —"cubrir" y luego ×1,08
     desde la izquierda— para que el encuadre coincida al fundirse. */
  /* con ".deck >" delante, para poder más que el fondo de cada sección,
     que se declara más abajo */
  .deck > .services::before, .deck > .about::before,
  .deck > .recursos::before, .deck > .contact::before{
    background-size:calc(max(100vw, 100vh * 1672 / 941) * 1.08) auto;
    background-size:calc(max(100vw, 100svh * 1672 / 941) * 1.08) auto;
    background-position:calc((100vw - max(100vw, 100vh * 1672 / 941)) * .54) center;
    background-position:calc((100vw - max(100vw, 100svh * 1672 / 941)) * .54) center;
  }
}

/* ---- paso lateral entre secciones ---- */
/* ---- paso lateral entre secciones ---- */
.deck-nav{
  position:fixed; right:clamp(16px,1.8vw,32px); top:50%;
  transform:translateY(-50%);
  z-index:45;
  display:flex; flex-direction:column; align-items:center;
  gap:20px;
}
/* raíl que une los puntos */
.deck-nav::before{
  content:""; position:absolute; left:50%; top:4px; bottom:4px;
  width:1px; transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(90,105,130,0), rgba(90,105,130,.28) 18%, rgba(90,105,130,.28) 82%, rgba(90,105,130,0));
}
/* cada botón es del tamaño del punto: así todos quedan en la misma vertical */
.deck-nav button{
  position:relative; z-index:1;
  width:14px; height:14px; padding:0;
  display:grid; place-items:center;
  border:0; background:none; cursor:pointer;
  color:#6C7A91;
  transition:color .3s ease;
}
.deck-nav button i{
  width:9px; height:9px; border-radius:50%;
  border:1.5px solid rgba(90,105,130,.55);
  background:#fff;
  transition:background .35s ease, border-color .35s ease, transform .35s cubic-bezier(.2,.8,.3,1);
}
/* la etiqueta flota fuera del flujo: no desplaza al punto */
.deck-nav button span{
  position:absolute; right:calc(100% + 14px); top:50%;
  transform:translateY(-50%) translateX(6px);
  font-family:var(--nav); font-size:11.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
  text-shadow:0 1px 10px rgba(255,255,255,.95);
}
.deck-nav button:hover span,
.deck-nav button:focus-visible span{ opacity:1; transform:translateY(-50%); }
.deck-nav button:hover i{ border-color:var(--blue); }
.deck-nav button.is-on i{
  background:var(--blue); border-color:var(--blue); transform:scale(1.3);
}
.deck-nav button.is-on{ color:var(--blue); }
.deck-nav button:focus-visible{ outline:none; }

@media (max-width:860px){ .deck-nav{ display:none; } }

@media (prefers-reduced-motion:reduce){
  .deck > section{ transition:none; }
}


/* ================= SERVICIOS =================
   La sección es la escena original dentro de su marco. La composición es
   16:9 y la pantalla casi nunca lo es, así que el marco se agranda hasta
   cubrirla entera y lo que sobra se recorta por arriba y por abajo, como
   haría un vídeo de fondo.                                            */
.services{
  position:relative; isolation:isolate;
  padding:0;
  overflow:hidden;
}
/* la caja recorta lo que sobra de la escena, para que la sección no se
   convierta en un área desplazable y el pase de secciones siga respondiendo */
.escena-caja{
  position:absolute; inset:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
/* la misma escena sin figura que en Nosotros y Contacto, a sangre */
.services::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:url("assets/hero-clean.jpg") center center / cover no-repeat;
}
.services::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(104deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.9) 28%,
      rgba(255,255,255,.78) 50%,
      rgba(255,255,255,.62) 74%,
      rgba(255,255,255,.5) 100%),
    linear-gradient(180deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 26%);
}
/* las zonas sensibles van encima de la escena: cada hoja, entera, es el botón */
.hojas-capa{
  position:absolute; inset:0; z-index:3;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.hojas-capa.esta-lista{ opacity:1; pointer-events:auto; }
.hoja-boton{
  position:absolute; padding:0; border:0; background:none;
  cursor:pointer;
}
.hoja-boton:focus-visible{ outline:2px solid var(--blue); outline-offset:4px; }

.escena{
  --ancho-escena:max(100vw, calc(100vh * 16 / 9));
  display:block; border:0; background:transparent;
  position:absolute; left:50%; transform:translateX(-50%);
  /* centrada de arriba abajo, más el empujón justo para que la cuerda
     pase por debajo del logotipo (lo calcula el guion) */
  top:calc((100vh - var(--ancho-escena) * 9 / 16) / 2 + var(--empuje, 0px));
  width:var(--ancho-escena);
  aspect-ratio:16 / 9; height:auto;
}

@media (max-width:860px){
  .services{ display:block; height:auto; padding:calc(var(--header-h) + 10px) 0 clamp(24px,5vh,44px); }
  /* la escena es de 16:9: a lo ancho del móvil se quedaría diminuta, así que
     se muestra más grande y se puede desplazar con el dedo */
  .escena-caja{
    position:relative; display:block;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .escena-caja::-webkit-scrollbar{ display:none; }
  .escena{
    position:static; transform:none; top:auto;
    width:min(780px, 200vw); --ancho-escena:min(780px, 200vw);
  }
  .escena-pista{
    display:block; margin:8px var(--shell) 0; text-align:center;
    font-family:var(--nav); font-size:11px; letter-spacing:.12em;
    text-transform:uppercase; color:#8FA2BE;
  }
}

/* ================= NOSOTROS ================= */
.about{
  position:relative; isolation:isolate;
  display:flex; align-items:safe center;
  padding:calc(var(--header-h) + clamp(10px,2vh,32px)) var(--shell) clamp(26px,4vh,60px);
  overflow:hidden;
}
/* la misma escena sin figura, casi velada: aquí manda el trazo */
.about::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:url("assets/hero-clean.jpg") center center / cover no-repeat;
}
.about::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(104deg,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.93) 30%,
      rgba(255,255,255,.84) 52%,
      rgba(255,255,255,.72) 74%,
      rgba(255,255,255,.6) 100%),
    linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,0) 26%);
}

.about__inner{
  width:100%; max-width:1560px; margin-inline:auto;
  display:grid; align-items:center;
  grid-template-columns:minmax(280px,.82fr) minmax(560px,2.15fr);
  gap:clamp(36px,4.5vw,96px);
}

.about__head{ max-width:30ch; }
.about__title{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(30px,3.5vw,62px); line-height:1.04; letter-spacing:-.03em;
  margin:0 0 16px; color:#0E1626;
}
.about__lead{
  margin:0; font-size:clamp(14px,1.18vw,20px); line-height:1.58; color:#46536B;
}

/* ---- la onda y sus paradas ---- */
.about__flow{ position:relative; --onda:clamp(92px, 14.5vh, 178px); }

.about__wave{
  position:absolute; top:0; left:0;
  width:100%; height:var(--onda);
  overflow:visible; pointer-events:none;
}
.about__wave-path{
  /* 1105 es lo que mide la curva de cinco pasos ya alargada, medido: así se
     dibuja entera justo al acabar la animación, ni antes ni después. Si se
     cambia el trazo (index.html, .about__wave-path), hay que volver a medirlo */
  stroke-dasharray:1105; stroke-dashoffset:1105;
}
.about.is-active .about__wave-path{
  animation:onda 1.5s .18s cubic-bezier(.35,0,.2,1) forwards;
}
@keyframes onda{ to{ stroke-dashoffset:0; } }

.about__steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr);
}
.step{
  position:relative;
  padding:calc(var(--y) * var(--onda) / 132 + clamp(30px,4.4vh,54px)) clamp(14px,1.8vw,34px) 0 0;
  opacity:0; transform:translateY(14px);
}
.about.is-active .step{
  animation:pasoEntra .8s cubic-bezier(.2,.8,.3,1) forwards;
  animation-delay:calc(.42s + var(--i) * .13s);
}
@keyframes pasoEntra{ to{ opacity:1; transform:none; } }

.step__dot{
  position:absolute; left:10px; top:calc(var(--y) * var(--onda) / 132);
  width:clamp(20px,1.5vw,28px); height:clamp(20px,1.5vw,28px); margin:calc(clamp(20px,1.5vw,28px) / -2) 0 0 calc(clamp(20px,1.5vw,28px) / -2);
  border-radius:50%; background:#fff;
  border:3.5px solid var(--blue);
  transform:scale(.4); opacity:0;
}
.about.is-active .step__dot{
  animation:paradaEntra .55s cubic-bezier(.2,.9,.3,1.35) forwards;
  animation-delay:calc(.3s + var(--i) * .13s);
}
@keyframes paradaEntra{ to{ transform:scale(1); opacity:1; } }

/* ---- el orbe que recorre la onda del 01 al 05 ----
   Lo coloca script.js (bloque 8 bis) en cada fotograma sobre el trazo;
   aquí sólo va su aspecto. El punto en el que se detiene se enciende. */
.about__orbe{
  --orbe:clamp(12px, .85vw, 16px);
  position:absolute; left:0; top:0; z-index:2;
  width:var(--orbe); height:var(--orbe);
  margin:calc(var(--orbe) / -2) 0 0 calc(var(--orbe) / -2);
  border-radius:50%;
  background:radial-gradient(circle at 35% 32%, #FFFFFF 0 14%, #A9C9FF 32%, var(--blue) 66%, #1450BE 100%);
  box-shadow:
    0 0 0 3px rgba(29,109,240,.12),
    0 0 14px 4px rgba(29,109,240,.42),
    0 0 36px 10px rgba(29,109,240,.16);
  opacity:0; pointer-events:none;
  will-change:transform, opacity;
}
.step__dot{ transition:box-shadow .4s ease; }
.step__dot.esta-encendido{
  box-shadow:0 0 0 6px rgba(29,109,240,.12), 0 0 24px 2px rgba(29,109,240,.42);
}
/* donde la onda no se pinta, el orbe tampoco; con movimiento reducido, quieto fuera */
@media (max-width:1180px){ .about__orbe{ display:none; } }
@media (prefers-reduced-motion:reduce){ .about__orbe{ display:none; } }

.step__num{
  display:block; font-family:var(--nav); font-weight:700;
  font-size:clamp(24px,2.35vw,42px); line-height:1; letter-spacing:-.02em;
  color:var(--blue); margin-bottom:12px;
}
.step__title{
  margin:0 0 13px; font-family:var(--sans); font-weight:700;
  font-size:clamp(16px,1.45vw,25px); letter-spacing:-.012em; color:#0E1626;
}
.step__text{
  margin:0; font-size:clamp(13px,1.05vw,18px); line-height:1.55; color:#46536B;
  max-width:24ch;
}

/* alturas justas: la onda se aplana y todo se aprieta */
@media (max-height:900px){
  .about{ padding-top:calc(var(--header-h) + 10px); padding-bottom:clamp(20px,3vh,42px); }
  .step{ padding-top:calc(var(--y) * var(--onda) / 132 + 30px); }
  .step__num{ margin-bottom:9px; }
  .step__title{ margin-bottom:9px; }
}
@media (max-height:760px){
  .step{ padding-top:calc(var(--y) * var(--onda) / 132 + 24px); }
  .about__title{ font-size:clamp(26px,2.5vw,40px); }
  .about__lead{ font-size:15px; }
}

/* dos bandas ya no caben: la cabecera arriba y los pasos en rejilla */
@media (max-width:1180px){
  .about{ overflow-y:auto; }
  .about__inner{ grid-template-columns:1fr; gap:clamp(24px,3.4vh,40px); }
  .about__head{ max-width:none; }
  .about__wave{ display:none; }
  .about__steps{ grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,34px) clamp(24px,4vw,48px); }
  .step{ padding:0 0 0 38px; opacity:1; transform:none; animation:none; }
  .step__dot{ left:0; top:6px; margin:0; opacity:1; transform:none; animation:none; }
}
@media (max-width:620px){
  .about__steps{ grid-template-columns:1fr; }
  .step__text{ max-width:none; }
}


/* ---- Nosotros tiene dos planos: el camino y el equipo ---- */
.about__planos{ width:100%; display:grid; }
.plano{
  grid-area:1 / 1; align-self:center; width:100%;
  opacity:0; visibility:hidden; transform:translateY(20px);
  transition:opacity .62s ease, transform .8s cubic-bezier(.2,.8,.3,1), visibility .8s;
}
.plano.is-on{ opacity:1; visibility:visible; transform:none; }
/* el que sale se va hacia el lado contrario al del gesto */
.about__planos[data-sentido="arriba"] .plano:not(.is-on){ transform:translateY(-20px); }

/* pastilla para saltar de un plano al otro */
.about__pager{
  position:absolute; left:var(--shell); bottom:clamp(18px,3.2vh,40px); z-index:3;
  display:flex; align-items:center; gap:6px;
  padding:5px; border-radius:999px;
  background:rgba(255,255,255,.72); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  box-shadow:0 8px 26px rgba(16,38,72,.10), inset 0 0 0 1px rgba(18,40,78,.07);
}
.about__pager button{
  border:0; background:none; cursor:pointer;
  padding:7px 15px; border-radius:999px;
  font-family:var(--nav); font-size:12px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:#6C7A91;
  transition:color .3s ease, background .35s ease;
}
.about__pager button:hover{ color:var(--blue); }
.about__pager button.is-on{ color:#fff; background:var(--blue); }
.about__pager button:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

/* ================= NOSOTROS · EL EQUIPO ================= */
.team__inner{
  width:100%; max-width:1560px; margin-inline:auto;
  display:grid; align-items:center;
  grid-template-columns:minmax(230px,.72fr) minmax(620px,3fr);
  gap:clamp(28px,3.2vw,64px);
}

.team__title{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(28px,2.9vw,52px); line-height:1.04; letter-spacing:-.03em;
  margin:0 0 16px; color:#0E1626;
}
.team__title em{ font-style:normal; color:var(--blue); }
.team__lead{
  margin:0; font-size:clamp(13px,1.02vw,17px); line-height:1.55; color:#46536B;
}
.team__quote{ margin-top:clamp(18px,3.4vh,40px); }
.team__quote-rule{ display:block; width:42px; height:2px; border-radius:2px; background:var(--blue); margin-bottom:12px; }
.team__quote-kicker{
  display:block; font-size:clamp(10px,.8vw,12px); letter-spacing:.3em; text-transform:uppercase;
  color:#6E7A8C; font-weight:500; margin-bottom:14px;
}
.team__quote blockquote{
  position:relative; margin:0; padding-left:26px;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(14px,1.05vw,18px); line-height:1.5; color:#3C4A61;
}
.team__quote blockquote::before{
  content:"“"; position:absolute; left:-2px; top:-.18em;
  font-size:2.6em; line-height:1; color:#BDD3F2;
}

/* ---- la rejilla de fichas ---- */
.team__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.1vw,22px);
}
.member{ display:flex; }
.about.is-active .plano--equipo.is-on .member{
  animation:fichaEntra .75s cubic-bezier(.2,.8,.3,1) backwards;
  animation-delay:calc(.1s + var(--i) * .055s);
}
@keyframes fichaEntra{ from{ opacity:0; transform:translateY(16px); } }

.member__card{
  position:relative; width:100%;
  display:flex; flex-direction:column; text-align:left;
  padding:0; border:0; cursor:pointer;
  background:rgba(255,255,255,.92);
  border-radius:16px; overflow:hidden;
  box-shadow:0 10px 30px rgba(16,38,72,.09), inset 0 0 0 1px rgba(18,40,78,.06);
  transition:transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .4s ease;
}
.member__card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 42px rgba(16,38,72,.16), inset 0 0 0 1px rgba(29,109,240,.22);
}
.member__card:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

/* la foto se lleva unos dos tercios de la ficha y el texto el tercio de
   abajo: con la foto alta ya no se cortan las caras */
.member__foto{
  height:clamp(150px,25vh,300px);
  background:linear-gradient(150deg,#E8F0FD 0%,#DCE8FA 55%,#CFE0F8 100%);
  /* Todas las fotos van encuadradas igual (4:3, cara centrada, la cabeza
     entre el 15 % y el 61 % del alto). Con el foco al 28 %, si la ficha es
     más apaisada y hay que recortar arriba y abajo, se recorta lo mismo por
     cada lado de la cabeza: nunca se come el pelo ni la barbilla. */
  background-size:cover; background-position:50% 28%;
  display:grid; place-items:center;
}
/* Rodrigo sale con la cámara: su foto ocupa del pelo al objetivo (del 15 %
   al 81 %), así que su foco va más abajo para que ni el pelo ni la cámara se
   corten en las fichas más apaisadas */
.member__foto[data-foto*="rodrigo"]{ background-position:50% 44%; }
.member__ini{
  font-family:var(--nav); font-weight:700;
  font-size:clamp(22px,2vw,34px); letter-spacing:.06em;
  color:rgba(29,109,240,.42);
}
.member__foto.tiene-foto .member__ini{ display:none; }

.member__body{
  display:block; padding:clamp(10px,.9vw,16px) clamp(12px,1vw,18px) clamp(12px,1vw,17px);
}
.member__name{
  display:block;
  font-weight:700; font-size:clamp(12.5px,.92vw,16px); letter-spacing:-.008em;
  line-height:1.25; color:#0E1626;
}
.member__nowrap{ white-space:nowrap; }
.member__flag{ display:inline-block; width:17px; height:12px; vertical-align:-1px; border-radius:2px; box-shadow:0 0 0 1px rgba(18,40,78,.12); }
.member__role{
  display:flex; align-items:center; gap:7px;
  margin-top:6px; font-size:clamp(11px,.82vw,14px); font-weight:500; color:var(--blue);
}
.member__role svg{ width:15px; height:15px; flex:0 0 auto; }
.member__desc{
  display:block; margin-top:7px;
  font-size:clamp(11px,.8vw,13.5px); line-height:1.4; color:#5A6577;
}
/* el "+" va en la esquina de la foto: así el texto tiene todo el ancho y
   la parte blanca puede ser más baja */
.member__more{
  position:absolute; right:clamp(9px,.8vw,14px); top:clamp(9px,.8vw,14px);
  width:clamp(26px,2vw,32px); height:clamp(26px,2vw,32px);
  display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--blue);
  box-shadow:0 4px 12px rgba(16,38,72,.16);
  font-size:clamp(15px,1.2vw,19px); font-weight:500; line-height:1;
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.member__card:hover .member__more{ background:var(--blue); color:#fff; transform:rotate(90deg); }

/* ---- ventana con la trayectoria ---- */
.bio{ position:fixed; inset:0; z-index:110; }
.bio[hidden]{ display:none; }
.bio__backdrop{
  position:absolute; inset:0; background:rgba(18,30,52,.32);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  opacity:0; transition:opacity .35s ease;
}
.bio.is-open .bio__backdrop{ opacity:1; }
.bio__card{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-46%) scale(.97);
  width:min(620px, calc(100vw - 40px)); max-height:min(84vh, 760px); overflow:auto;
  padding:clamp(24px,2.4vw,38px);
  border-radius:22px; background:rgba(255,255,255,.94);
  box-shadow:0 30px 80px rgba(12,30,60,.26), inset 0 0 0 1px rgba(255,255,255,.7);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  opacity:0; transition:opacity .4s ease, transform .5s cubic-bezier(.2,.8,.3,1);
}
.bio.is-open .bio__card{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.bio__close{
  position:absolute; right:14px; top:14px;
  width:36px; height:36px; display:grid; place-items:center;
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(18,40,78,.06); color:#3C4A61;
  transition:background .25s ease;
}
.bio__close:hover{ background:rgba(18,40,78,.12); }
.bio__close svg{ width:17px; height:17px; }
.bio__top{ display:flex; align-items:center; gap:18px; padding-right:40px; }
.bio__foto{
  width:76px; height:76px; flex:0 0 auto; border-radius:20px;
  display:grid; place-items:center;
  background:linear-gradient(150deg,#E8F0FD,#CFE0F8);
  background-size:cover; background-position:center 22%;
  font-family:var(--nav); font-weight:700; font-size:26px; color:rgba(29,109,240,.5);
}
.bio__foto.tiene-foto span{ display:none; }
/* con foto de verdad acercamos un poco, para que se vea la cara y no el torso
   (con el mismo foco que las fichas, la cabeza entra entera) */
.bio__foto.tiene-foto{ background-size:165% auto; background-position:50% 28%; }
.bio__nombre{ margin:0; font-size:clamp(20px,1.7vw,27px); letter-spacing:-.02em; color:#0E1626; }
.bio__puesto{ margin:6px 0 0; font-size:clamp(13px,1vw,16px); color:var(--blue); font-weight:500; }
.bio__rule{ display:block; width:46px; height:2px; border-radius:2px; background:var(--blue); margin:20px 0; }
.bio__lista{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.bio__lista li{
  position:relative; padding-left:22px;
  font-size:clamp(13px,1vw,15.5px); line-height:1.55; color:#3C4A61;
}
.bio__lista li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:7px; height:7px; border-radius:50%; background:var(--blue); opacity:.55;
}
.bio__pendiente{ font-style:italic; color:#6E7A8C; }

/* alturas justas */
@media (max-height:900px){
  .team__quote{ margin-top:clamp(14px,2.4vh,26px); }
  .team__quote blockquote{ font-size:clamp(13px,.95vw,15px); }
  .member__desc{ margin-top:7px; }
}
@media (max-height:760px){
  .team__title{ font-size:clamp(24px,2.4vw,38px); }
  .team__quote{ display:none; }
}
@media (max-height:660px){
  .member__desc{ display:none; }
}

/* ---- sin sitio para dos bandas: todo en columna y sin planos ---- */
@media (max-width:1180px){
  .about__planos{ display:block; }
  .plano{ opacity:1; visibility:visible; transform:none; transition:none; }
  .plano--equipo{ margin-top:clamp(34px,6vh,60px); }
  .about__pager{ display:none; }
  .team__inner{ grid-template-columns:1fr; gap:clamp(22px,3.4vh,34px); }
  .team__grid{ grid-template-columns:repeat(3,1fr); }
  .about.is-active .plano--equipo.is-on .member{ animation:none; }
}
@media (max-width:900px){ .team__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .team__grid{ grid-template-columns:1fr; } }


/* el paginador vive abajo a la izquierda: se le reserva sitio */
@media (min-width:1181px){
  .about{ padding-bottom:clamp(62px,8.5vh,92px); }
}
/* alturas justas: la ficha se compacta antes de estorbar */
@media (max-height:900px){
  .member__foto{ height:clamp(130px,23vh,220px); }
  .member__body{ padding:9px clamp(11px,.9vw,15px) 11px; }
  .member__desc{ margin-top:5px; font-size:11.5px; }
  .member__role{ margin-top:5px; }
  .team__grid{ gap:clamp(10px,.9vw,16px); }
}
@media (max-height:820px){
  .member__foto{ height:clamp(110px,20.5vh,180px); }
  .member__more{ right:8px; top:8px; }
  .team__title{ font-size:clamp(24px,2.4vw,38px); }
}


/* ================= RECURSOS =================
   Los artículos cuelgan de una cuerda que cruza la sección de lado a lado,
   con la misma idea que el tendedero de Servicios.                      */
.recursos{
  position:relative; isolation:isolate;
  display:flex; align-items:stretch;
  padding:calc(var(--header-h) + clamp(6px,1.4vh,20px)) var(--shell) clamp(14px,2.4vh,34px);
  overflow:hidden;
}
.recursos::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:url("assets/hero-clean.jpg") center center / cover no-repeat;
}
.recursos::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(104deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.9) 30%,
      rgba(255,255,255,.8) 54%,
      rgba(255,255,255,.68) 78%,
      rgba(255,255,255,.58) 100%),
    linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,0) 26%);
}
.recursos__inner{
  position:relative; width:100%; max-width:1560px; margin-inline:auto;
  display:flex; flex-direction:column; min-height:0;
}

.recursos__head{ max-width:640px; }
.recursos__titulo{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(32px,3.3vw,60px); line-height:1.03; letter-spacing:-.028em;
  margin:0 0 14px; color:#0E1626;
}
.recursos__titulo em{ font-style:normal; color:var(--blue); }
.recursos__titulo b{ color:#0E1626; }
.recursos__lead{
  margin:0; font-size:clamp(14px,1.05vw,17px); line-height:1.55; color:#46536B; max-width:34em;
}

/* las dos notas manuscritas */
.recursos__nota{
  position:absolute; margin:0; z-index:2;
  font-family:"Caveat", var(--serif); color:var(--blue);
  font-size:clamp(19px,1.5vw,27px); line-height:1.25; transform:rotate(-5deg);
  pointer-events:none;
}
.recursos__nota--uno{
  position:static; margin-top:auto; padding-top:clamp(12px,2vh,22px);
  max-width:14ch; transform:rotate(-4deg); transform-origin:0 100%;
}
/* va en el hueco de la cabecera, entre el logotipo y el menú */
.recursos__nota--dos{
  left:clamp(300px, 21.5vw, 440px);
  top:clamp(14px,2.4vh,32px);
  transform:rotate(-4deg); transform-origin:0 50%;
}
/* por debajo de aquí el hueco se queda corto y rozaría el menú */
@media (max-width:1360px){ .recursos__nota--dos{ display:none; } }

/* los filtros */
.recursos__filtros{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:clamp(16px,2.4vh,30px) 0 clamp(16px,2.6vh,32px);
}
.chip{
  border:1px solid rgba(18,40,78,.14); background:rgba(255,255,255,.72);
  color:#46536B; border-radius:999px; cursor:pointer;
  padding:8px 17px; font-size:13.5px; line-height:1.1;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.chip:hover{ border-color:rgba(29,109,240,.4); color:var(--blue); }
.chip.is-on{ background:var(--blue); border-color:var(--blue); color:#fff; }
.chip:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

/* ---- la parrilla de recursos ----
   Cuatro columnas: el titular a la izquierda, el destacado en el medio y las
   novedades a la derecha; debajo, dos fichas y el proyecto. Las proporciones
   salen de la maqueta.                                                    */
.rec2{
  display:grid;
  grid-template-columns:1.05fr 0.78fr 0.68fr 1fr;
  grid-template-rows:1.32fr 1fr;
  gap:clamp(10px,1.1vw,18px);
  flex:1 1 auto; min-height:0;
  align-items:stretch;
}
.rec2__intro{ grid-row:1 / span 2; display:flex; flex-direction:column; position:relative; }
.rec2__ficha--grande{ grid-column:2 / span 2; }
.rec2__novedades{ grid-column:4; }
.rec2__ficha--ancha{ grid-column:4; }

/* la columna de la izquierda */
.rec2__intro .recursos__titulo{ margin-bottom:clamp(10px,1.4vh,18px); }
.rec2__intro .recursos__lead{ margin-bottom:clamp(14px,2vh,24px); }
.rec2__intro .recursos__filtros{ margin:0 0 clamp(14px,2vh,22px); }
.rec2__todos{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:12px;
  height:clamp(44px,4.4vh,54px); padding:0 clamp(20px,1.8vw,28px);
  border-radius:999px; text-decoration:none;
  background:var(--blue); color:#fff;
  font-family:var(--nav); font-weight:600; font-size:clamp(14px,1vw,16px);
  box-shadow:0 14px 30px -12px rgba(29,109,240,.6);
  transition:transform .25s ease, box-shadow .25s ease;
}
.rec2__todos svg{ width:16px; height:16px; transition:transform .25s ease; }
.rec2__todos:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -12px rgba(29,109,240,.7); }
.rec2__todos:hover svg{ transform:translateX(4px); }

/* las fichas */
.rec2__ficha{
  position:relative; display:flex; overflow:hidden;
  border-radius:clamp(14px,1.2vw,20px);
  background:rgba(255,255,255,.9);
  box-shadow:0 18px 40px -26px rgba(22,40,72,.55), inset 0 0 0 1px rgba(18,40,78,.06);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease;
}
.rec2__ficha:hover{
  transform:translateY(-3px);
  box-shadow:0 26px 52px -24px rgba(22,40,72,.7), inset 0 0 0 1px rgba(29,109,240,.22);
}
.rec2__texto{
  display:flex; flex-direction:column; min-width:0;
  padding:clamp(14px,1.3vw,22px);
  flex:1 1 auto;
}
.rec2__ficha--grande .rec2__texto{ flex:0 0 55%; }
.rec2__ficha--ancha .rec2__texto{ flex:0 0 58%; }

.rec2__tag{
  align-self:flex-start; margin-bottom:clamp(8px,1vh,14px);
  padding:5px 11px; border-radius:7px;
  font-family:var(--nav); font-size:clamp(9px,.62vw,10.5px); font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:#fff;
}
.rec2__tag--rosa { background:#E8005F; }
.rec2__tag--azul { background:var(--blue); }
.rec2__tag--verde{ background:#12A45F; }
/* en las fichas pequeñas la etiqueta va flotando sobre la esquina */
.rec2__ficha > .rec2__tag{
  position:absolute; left:clamp(14px,1.3vw,22px); top:clamp(14px,1.3vw,22px); margin:0; z-index:2;
}
/* el texto empieza debajo de la etiqueta: su hueco de arriba, lo que mide
   ella (unos 23 px) y un respiro; antes la fecha se metía por debajo */
.rec2__ficha > .rec2__tag ~ .rec2__texto{
  padding-top:calc(clamp(14px,1.3vw,22px) + 24px + clamp(8px,1.1vh,14px));
}

.rec2__fecha{
  margin:0 0 7px; font-family:var(--nav);
  font-size:clamp(9.5px,.66vw,11px); font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:#8FA2BE;
}
.rec2__titulo{
  margin:0 0 8px; font-family:var(--sans); font-weight:700;
  font-size:clamp(14px,1.12vw,19px); line-height:1.2; letter-spacing:-.014em; color:#0E1626;
}
.rec2__ficha--grande .rec2__titulo{ font-size:clamp(18px,1.62vw,28px); line-height:1.14; }
.rec2__ficha--ancha .rec2__titulo{ font-size:clamp(17px,1.45vw,25px); line-height:1.14; }
.rec2__entrada{
  margin:0 0 10px; font-size:clamp(11.5px,.83vw,14px); line-height:1.45; color:#5A6577;
}
.rec2__leer{
  display:inline-flex; align-items:center; gap:8px; margin-top:auto;
  color:var(--blue); font-size:clamp(12px,.85vw,14.5px); font-weight:500; text-decoration:none;
  transition:gap .25s ease;
}
.rec2__leer svg{ width:14px; height:14px; }
.rec2__leer:hover{ gap:12px; }

/* la foto de las fichas grandes */
.rec2__foto{ position:relative; flex:1 1 auto; min-width:0; overflow:hidden; }
.rec2__foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.rec2__marca{
  position:absolute; right:clamp(10px,.9vw,16px); bottom:clamp(10px,1vh,18px);
  font-family:var(--nav); font-size:clamp(7.5px,.55vw,9.5px); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; line-height:1.9;
  color:rgba(30,58,100,.5); text-align:right;
}

/* las últimas novedades */
.rec2__novedades{
  display:flex; flex-direction:column; overflow:hidden;
  padding:clamp(14px,1.3vw,22px);
  border-radius:clamp(14px,1.2vw,20px);
  background:rgba(255,255,255,.9);
  box-shadow:0 18px 40px -26px rgba(22,40,72,.55), inset 0 0 0 1px rgba(18,40,78,.06);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.rec2__nov-cab{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:clamp(10px,1.3vh,18px);
}
.rec2__nov-cab h3{
  margin:0; display:flex; align-items:center; gap:9px;
  font-family:var(--sans); font-weight:700;
  font-size:clamp(13px,.98vw,16.5px); letter-spacing:-.012em; color:#0E1626;
}
.rec2__nov-cab h3 i{
  width:8px; height:8px; border-radius:50%; background:var(--blue); flex:0 0 auto;
  animation:latido 2.4s cubic-bezier(.25,.8,.4,1) infinite;
}
.rec2__nov-cab a{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  color:var(--blue); font-size:clamp(11px,.78vw,13px); text-decoration:none;
  transition:gap .25s ease;
}
.rec2__nov-cab a svg{ width:12px; height:12px; }
.rec2__nov-cab a:hover{ gap:9px; }

.rec2__linea{
  list-style:none; margin:0; padding:0 0 0 clamp(16px,1.3vw,22px);
  position:relative; display:flex; flex-direction:column;
  flex:1 1 auto; min-height:0; justify-content:space-between;
}
/* el hilo vertical que une los hitos */
.rec2__linea::before{
  content:""; position:absolute; left:4px; top:8px; bottom:12px;
  width:1.5px; border-radius:1px;
  background:linear-gradient(180deg, rgba(29,109,240,.45), rgba(29,109,240,.08));
}
.rec2__hito{
  position:relative; padding:clamp(6px,.7vh,11px) clamp(30px,2.4vw,42px) clamp(6px,.7vh,11px) 0;
  border-bottom:1px solid rgba(18,40,78,.07);
}
.rec2__hito:last-child{ border-bottom:0; }
.rec2__hito::before{
  content:""; position:absolute; left:calc(-1 * clamp(16px,1.3vw,22px));
  top:calc(clamp(6px,.7vh,11px) + 5px);
  width:9px; height:9px; border-radius:50%;
  border:1.5px solid rgba(29,109,240,.4); background:#fff;
  margin-left:0.75px;
}
.rec2__hito--ahora::before{ background:var(--blue); border-color:var(--blue); }
.rec2__hito-fecha{
  margin:0 0 4px; font-family:var(--nav);
  font-size:clamp(8.5px,.6vw,10px); font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:#A6B0C2;
}
.rec2__hito--ahora .rec2__hito-fecha{ color:#8FA2BE; }
.rec2__hito-tit{
  margin:0; font-family:var(--sans); font-weight:600;
  font-size:clamp(11.5px,.82vw,14px); line-height:1.28; color:#26344B;
}
.rec2__hito--ahora .rec2__hito-tit{ color:#0E1626; font-weight:700; }
.rec2__hito-ir{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:clamp(24px,2vw,30px); height:clamp(24px,2vw,30px);
  display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(18,40,78,.13); background:rgba(255,255,255,.8);
  color:var(--blue); text-decoration:none;
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.rec2__hito-ir svg{ width:12px; height:12px; }
.rec2__hito-ir:hover{ background:var(--blue); border-color:var(--blue); color:#fff; transform:translateY(-50%) translateX(2px); }

/* el filtro esconde lo que no toca */
.rec2__ficha.esta-fuera, .rec2__novedades.esta-fuera{ display:none; }
.rec2__vacio{
  grid-column:2 / span 3; align-self:center; text-align:center;
  margin:0; font-size:15px; color:#6E7A8C;
}
.rec2__vacio[hidden]{ display:none; }
.rec2__vacio a{ color:var(--blue); }

/* lo que llega del panel (script.js, bloque 9): fichas grandes sin foto,
   portadas de vídeo o de YouTube con su botón de reproducir, y novedades
   sin enlace */
.rec2__ficha--grande:not(.tiene-foto) .rec2__texto,
.rec2__ficha--ancha:not(.tiene-foto) .rec2__texto{ flex:1 1 auto; }
.rec2__foto video{ width:100%; height:100%; object-fit:cover; display:block; }
.rec2__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:clamp(38px,3vw,52px); height:clamp(38px,3vw,52px); border-radius:50%;
  background:rgba(255,255,255,.92); box-shadow:0 10px 26px -10px rgba(22,40,72,.6);
  pointer-events:none;
}
.rec2__play::after{
  content:""; position:absolute; left:55%; top:50%; transform:translate(-50%,-50%);
  border-style:solid; border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent var(--blue);
}
.rec2__hito:not(:has(.rec2__hito-ir)){ padding-right:0; }

/* la casilla de «mantener la sesión» en la ventana de acceso */
.acceso__recordar{
  display:flex; align-items:center; gap:8px; margin:2px 0 4px;
  font-size:13.5px; color:#63708A; text-align:left; cursor:pointer;
}
.acceso__recordar input{ width:16px; height:16px; margin:0; accent-color:var(--blue); }


/* ---- la parrilla de Recursos en pantallas estrechas ---- */
@media (max-width:1180px){
  .rec2{
    grid-template-columns:repeat(2, minmax(0,1fr));
    grid-template-rows:auto;
    gap:clamp(14px,2vw,22px);
    /* aquí la sección ya se desplaza: la parrilla deja de repartirse el alto
       y cada ficha ocupa lo que necesita */
    flex:0 0 auto; min-height:auto;
  }
  .recursos__inner{ min-height:auto; }
  .rec2__intro,
  .rec2__ficha--grande,
  .rec2__novedades,
  .rec2__ficha--ancha{ grid-column:1 / -1; grid-row:auto; }
  .rec2__intro{ margin-bottom:clamp(6px,1.4vh,16px); }
  .recursos__nota--uno{ display:none; }
  .rec2__linea{ gap:2px; }
  .rec2__vacio{ grid-column:1 / -1; }
}
@media (max-width:860px){
  .rec2{ grid-template-columns:1fr; }
  .rec2__ficha--grande, .rec2__ficha--ancha{ flex-direction:column; }
  .rec2__ficha--grande .rec2__texto,
  .rec2__ficha--ancha .rec2__texto{ flex:0 0 auto; }
  .rec2__ficha--grande .rec2__foto,
  .rec2__ficha--ancha .rec2__foto{ height:clamp(140px,34vw,220px); flex:0 0 auto; order:-1; }
  .rec2__todos{ align-self:stretch; justify-content:center; }
}

/* ---- la línea de abajo ---- */
.recursos__pie{
  display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,3vw,50px);
  margin-top:clamp(14px,2.4vh,32px);
}
.recursos__firma{
  display:flex; align-items:center; gap:14px;
  font-family:var(--nav); font-size:11px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:#8FA2BE; white-space:nowrap;
}
.recursos__firma img{ height:clamp(15px,1.05vw,20px); width:auto; display:block; }
/* en el ordenador el logotipo ya está arriba, en la cabecera: abajo sobraba */
@media (min-width:861px){ .recursos__firma img{ display:none; } }
.recursos__raya{ width:clamp(24px,3vw,60px); height:1px; background:rgba(29,109,240,.45); }
.recursos__mas{
  display:inline-flex; align-items:center; gap:10px;
  height:44px; padding:0 26px; border-radius:999px;
  background:var(--blue); color:#fff; font-weight:600; font-size:14.5px; text-decoration:none;
  box-shadow:0 10px 24px rgba(29,109,240,.3);
  transition:transform .25s ease, box-shadow .25s ease;
}
.recursos__mas svg{ width:16px; height:16px; }
.recursos__mas:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(29,109,240,.36); }


/* ---- ventanas bajas ---- */
@media (max-height:900px){
  .recursos__titulo{ font-size:clamp(28px,2.6vw,44px); }
  .recursos__lead{ font-size:14px; }
  .recursos__filtros{ margin:14px 0 16px; }
  .chip{ padding:7px 14px; font-size:12.5px; }
}
@media (max-height:780px){
  .recursos__head .eyebrow{ margin-bottom:10px; }
  .recursos__titulo{ font-size:clamp(24px,2.2vw,34px); margin-bottom:10px; }
  .recursos__lead{ font-size:13px; line-height:1.45; }
  .recursos__filtros{ margin:12px 0 14px; gap:6px; }
}
/* por debajo de esto la sección ya no da de sí: se deja desplazar, que es
   mejor que recortar las hojas por abajo */
@media (max-height:700px){
  .recursos{ overflow-y:auto; }
}

/* ---- pantallas estrechas ---- */
@media (max-width:1180px){
  .recursos{ overflow-y:auto; }
  .recursos__nota{ display:none; }
}
@media (max-width:860px){
  .recursos__firma{ white-space:normal; flex-wrap:wrap; justify-content:center; text-align:center; }
  .recursos__firma img{ height:18px; }
  .recursos{ display:block; height:auto; padding-bottom:clamp(26px,5vh,50px); }
  .recursos__pie{ flex-direction:column; gap:16px; }
  .recursos__firma--der{ display:none; }
}

/* ================= CONTACTO ================= */
.contact{
  position:relative; isolation:isolate;
  padding:calc(var(--header-h) + clamp(10px,2vh,32px)) var(--shell) clamp(26px,4vh,60px);
  overflow:hidden;
}
/* misma escena, sin la figura: el fondo va anclado a la ventana, así que al
   llegar aquí la persona se disuelve sin que el decorado se mueva */
.contact::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:url("assets/hero-clean.jpg") center center / cover fixed no-repeat;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 22%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 22%);
}
/* velo: blanco donde va el contenido, limpio hacia la derecha */
.contact::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(104deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.88) 34%,
      rgba(255,255,255,.55) 58%,
      rgba(255,255,255,.18) 78%,
      rgba(255,255,255,.05) 100%),
    linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 26%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 16%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 16%);
}
.contact__inner{ max-width:1520px; margin-inline:auto; }

.contact__head{ max-width:640px; margin-bottom:clamp(30px,4.5vh,52px); }
.contact__title{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(34px,3.4vw,58px); line-height:1.04; letter-spacing:-.02em;
  margin:0 0 16px; color:#0E1626;
}
.contact__title em{ font-style:normal; color:var(--blue); }
.contact__lead{
  margin:0; font-size:clamp(15px,1.15vw,18px); line-height:1.6; color:#46536B; max-width:36em;
}

.contact__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) auto;
  gap:clamp(20px,2.4vw,44px);
  align-items:start;
}

/* ---- formulario ---- */
.form{
  padding:clamp(22px,2.2vw,34px);
  border-radius:26px;
  border:1px solid rgba(255,255,255,.9);
  background:linear-gradient(158deg, rgba(255,255,255,.9), rgba(255,255,255,.74));
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  box-shadow:0 30px 70px -40px rgba(22,34,56,.35), 0 2px 10px rgba(22,34,56,.05);
  display:flex; flex-direction:column; gap:14px;
}
.field{ position:relative; display:flex; align-items:center; }
.field__icon{
  position:absolute; left:16px; width:19px; height:19px; color:#9AA6BA; pointer-events:none;
}
.field input, .field select, .field textarea{
  width:100%; font:inherit; font-size:15.5px; color:#22304A;
  padding:15px 16px 15px 46px;
  border:1px solid rgba(24,38,62,.12); border-radius:14px;
  background:rgba(255,255,255,.7);
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.field textarea{ resize:vertical; min-height:112px; line-height:1.55; }
.field select{ appearance:none; -webkit-appearance:none; cursor:pointer; color:#22304A; }
.field select:invalid{ color:#98A3B6; }
.field input::placeholder, .field textarea::placeholder{ color:#98A3B6; }
.field--area .field__icon{ top:16px; }
.field__caret{ position:absolute; right:16px; width:17px; height:17px; color:#9AA6BA; pointer-events:none; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; background:#fff;
  border-color:rgba(29,109,240,.55);
  box-shadow:0 0 0 4px rgba(29,109,240,.12);
}

.form__send{
  margin-top:6px;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:17px 26px; border:0; border-radius:14px; cursor:pointer;
  background:linear-gradient(120deg,#2C7DFF,#1150E8); color:#fff;
  font-family:var(--nav); font-weight:600; font-size:16px; letter-spacing:.01em;
  box-shadow:0 18px 34px -18px rgba(29,109,240,.85);
  transition:transform .25s ease, box-shadow .25s ease, background .3s ease;
}
.form__send svg{ width:17px; height:17px; transition:transform .25s ease; }
.form__send:hover{ transform:translateY(-2px); box-shadow:0 22px 40px -18px rgba(29,109,240,.95); }
.form__send:hover svg{ transform:translateX(4px); }
.form__note{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin:2px 0 0; font-size:12.5px; color:#7C889B; text-align:center;
}
.form__note svg{ width:14px; height:14px; flex:0 0 auto; }
.form.is-sent .form__send{ background:linear-gradient(120deg,#16C76A,#0F9E53); box-shadow:none; }

/* ---- vías directas ---- */
.contact__side{ display:flex; flex-direction:column; gap:12px; }
.ch{
  --accent-rgb:29,109,240;
  display:flex; align-items:center; gap:16px;
  padding:16px 20px; border-radius:18px; text-decoration:none;
  border:1px solid rgba(255,255,255,.9);
  background:linear-gradient(158deg, rgba(255,255,255,.88), rgba(255,255,255,.7));
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 18px 40px -30px rgba(22,34,56,.4);
  transition:transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s ease, background .28s ease;
}
.ch--blue { --accent:var(--blue);  --accent-rgb:29,109,240; }
.ch--green{ --accent:var(--green); --accent-rgb:18,197,107; }
.ch--pink { --accent:var(--pink);  --accent-rgb:244,22,107; }
/* los dos que llevan marca propia usan su color de verdad */
.ch--ig   { --accent:#D62976; --accent-rgb:214,41,118; }
.ch__icon{
  flex:0 0 auto; width:46px; height:46px; border-radius:14px;
  display:grid; place-items:center;
  background:rgba(var(--accent-rgb),.12); color:var(--accent);
  transition:background .28s ease;
}
.ch__icon svg{ width:22px; height:22px; }
/* los tres que llevan su logotipo de verdad: la marca ocupa toda la casilla,
   sin recuadro de color detrás, que ya lo trae puesta cada una */
.ch__icon--marca{ background:none; overflow:visible; }
.ch__icon--marca img{
  width:100%; height:100%; object-fit:contain; display:block;
  filter:drop-shadow(0 5px 12px rgba(22,34,56,.22));
  transition:transform .28s cubic-bezier(.2,.8,.3,1);
}
.ch:hover .ch__icon--marca{ background:none; }
.ch:hover .ch__icon--marca img{ transform:scale(1.07); }
.ch__text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ch__text b{ font-size:16px; font-weight:600; color:#16233A; letter-spacing:-.01em; }
.ch__text i{ font-style:normal; font-size:14px; color:#63708A; }
.ch__go{ margin-left:auto; color:#A6B0C2; font-size:19px; transition:transform .28s ease, color .28s ease; }
.ch:hover{ transform:translateX(5px); box-shadow:0 24px 46px -30px rgba(22,34,56,.55); }
.ch:hover .ch__icon{ background:rgba(var(--accent-rgb),.2); }
.ch:hover .ch__go{ transform:translateX(4px); color:var(--accent); }
.ch--static{ cursor:default; }
.ch--static:hover{ transform:none; box-shadow:0 18px 40px -30px rgba(22,34,56,.4); }

.contact__direct{ margin-top:clamp(12px,2vh,22px); }
.contact__direct-rule{
  display:block; width:44px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--blue), rgba(29,109,240,.25)); margin-bottom:16px;
}
.contact__direct p{ margin:0 0 18px; font-size:15px; line-height:1.55; color:#46536B; }
.btn-ghost{
  display:inline-flex; align-items:center; gap:12px;
  padding:14px 26px; border-radius:999px; text-decoration:none;
  border:1px solid rgba(29,109,240,.45); background:rgba(255,255,255,.72);
  /* el cristal desenfoca lo que le pase por detrás, como la estela */
  backdrop-filter:blur(8px) saturate(130%);
  -webkit-backdrop-filter:blur(8px) saturate(130%);
  color:var(--blue); font-family:var(--nav); font-weight:600; font-size:15.5px;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.btn-ghost svg{ width:16px; height:16px; transition:transform .25s ease; }
.btn-ghost:hover{ background:var(--blue); color:#fff; transform:translateY(-2px); }
.btn-ghost:hover svg{ transform:translateX(4px); }

/* ---- claim vertical ---- */
.contact__claim{ padding-top:clamp(20px,4vh,60px); }
.contact__claim-rule{
  display:block; width:38px; height:2px; border-radius:2px;
  background:var(--blue); margin-bottom:18px; opacity:.8;
}
.contact__claim p{
  margin:0; font-size:clamp(11px,.85vw,13px); letter-spacing:.3em; text-transform:uppercase;
  line-height:2.1; color:#5D6B84; font-weight:500;
  text-shadow:0 1px 12px rgba(255,255,255,.9);
}

@media (max-width:1280px){
  .contact__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .contact__claim{ grid-column:1 / -1; padding-top:6px; }
  .contact__claim p{ line-height:1.9; }
}
@media (max-width:860px){
  .contact{ padding-top:clamp(46px,7vh,72px); }
  .contact__grid{ grid-template-columns:minmax(0,1fr); }
  .contact::before{ background-attachment:scroll; }
}


/* ---- que la sección de contacto quepa siempre en la pantalla ---- */
.contact{ display:flex; flex-direction:column; }
/* el contenido se queda centrado y el pie cae al fondo; si no cabe todo,
   la sección se desplaza por dentro y el pie baja con el contenido */
/* el bloque se apoya arriba, justo bajo la cabecera, y el pie se queda con
   el fondo: así el contenido respira por abajo en vez de rozar el pie */
.contact__inner{ position:relative; width:100%; margin-top:clamp(0px,2.2vh,30px); margin-bottom:auto; }

/* alturas justas: se aprieta el formulario y las tarjetas */
@media (max-height:900px){
  .form{ padding:clamp(18px,1.7vw,26px); gap:11px; }
  .field input, .field select, .field textarea{ padding:12px 14px 12px 44px; font-size:15px; }
  .field textarea{ min-height:88px; }
  .form__send{ padding:14px 24px; font-size:15.5px; }
  .form__note{ font-size:12px; }
  .ch{ padding:12px 18px; gap:14px; border-radius:16px; }
  .ch__icon{ width:40px; height:40px; border-radius:12px; }
  .ch__icon svg{ width:20px; height:20px; }
  .ch__text b{ font-size:15px; }
  .ch__text i{ font-size:13.2px; }
  .contact__side{ gap:10px; }
  .contact__direct{ margin-top:10px; }
  .contact__direct-rule{ margin-bottom:12px; }
  .contact__direct p{ margin-bottom:14px; font-size:14px; }
  .btn-ghost{ padding:12px 22px; font-size:15px; }
  .contact__claim p{ line-height:1.95; font-size:11.5px; }
}

/* alturas muy justas */
@media (max-height:790px){
  .contact{ padding-top:calc(var(--header-h) + 6px); padding-bottom:clamp(16px,2.4vh,32px); }
  .form{ padding:18px; gap:9px; }
  .field input, .field select, .field textarea{ padding:11px 14px 11px 42px; font-size:14.5px; border-radius:12px; }
  .field textarea{ min-height:74px; }
  .field__icon{ width:17px; height:17px; left:14px; }
  .form__send{ padding:12px 22px; border-radius:12px; }
  .form__note{ font-size:11.5px; }
  .form__send{ padding:12px 22px; font-size:15px; margin-top:4px; }
  .ch{ padding:10px 16px; }
  .ch__icon{ width:36px; height:36px; }
  .contact__title{ font-size:clamp(28px,2.2vw,38px); }
  .contact__lead{ font-size:14px; line-height:1.5; }
  .contact__head .eyebrow{ margin-bottom:12px; }
}


/* la sección de contacto deja de tener margen abajo: lo ocupa el pie */
.contact{ padding-bottom:0; }

/* ================= PIE =================
   Vive al final de Contacto, pegado al borde inferior. La sección le
   reserva su alto (lo mide el guion en --pie-h) para que nunca se pisen. */
.pie{
  /* pegado al fondo de la sección: si el contenido no cabe y Contacto se
     desplaza por dentro, el pie sigue entero a la vista en vez de quedarse
     recortado por debajo */
  position:sticky; bottom:0; z-index:4;
  width:calc(100% + var(--shell) * 2);
  margin-inline:calc(var(--shell) * -1);
  /* con aire arriba: el texto no va pegado a la línea del borde */
  padding:clamp(20px,2.8vh,34px) var(--shell) clamp(14px,2vh,24px);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(18,40,78,.08);
  box-shadow:0 -10px 30px rgba(16,38,72,.05);
  font-size:13px; color:#5A6577;
}
.pie__inner{
  max-width:1560px; margin-inline:auto;
  display:grid; align-items:start;
  grid-template-columns:auto auto 1fr auto auto auto;
  gap:clamp(14px,2vw,38px);
}
.pie__inner > * + *{
  padding-left:clamp(14px,2vw,38px);
  border-left:1px solid rgba(18,40,78,.09);
}

.pie__marca{ display:flex; flex-direction:column; gap:8px; }
.pie__logo{ height:clamp(16px,1.15vw,21px); width:auto; display:block; }
.pie__lema{
  font-family:var(--nav); font-size:10px; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; color:#6E7A8C;
}

.pie__claim p{
  margin:0 0 12px; white-space:nowrap; font-size:clamp(13px,1vw,16px); line-height:1.35;
  font-weight:500; color:#16233D;
}
.pie__claim b{ color:var(--blue); }
.pie__redes{ display:flex; gap:8px; }
.pie__red{
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(29,109,240,.1); color:var(--blue);
  transition:background .25s ease, transform .25s ease, color .25s ease;
}
.pie__red svg{ width:15px; height:15px; }
.pie__red:hover{ background:var(--blue); color:#fff; transform:translateY(-2px); }

.pie__tit{
  margin:0 0 10px; font-size:13px; font-weight:700; color:#16233D; white-space:nowrap;
}
.pie__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:nowrap; white-space:nowrap; gap:0 12px; }

.pie__col li + li{ position:relative; padding-left:13px; }
.pie__col li + li::before{
  content:""; position:absolute; left:0; top:.35em; bottom:.35em;
  width:1px; background:rgba(18,40,78,.16);
}
.pie a{ color:#5A6577; text-decoration:none; transition:color .22s ease; }
.pie a:hover{ color:var(--blue); }
.pie__texto{ margin:0 0 12px; white-space:nowrap; }
.pie__col--cta{ display:flex; flex-direction:column; align-items:flex-start; }
.pie__boton{
  display:inline-flex; align-items:center; gap:9px;
  height:38px; padding:0 20px; border-radius:999px;
  background:var(--blue); color:#fff !important; font-weight:600; font-size:13px; white-space:nowrap;
  box-shadow:0 8px 18px rgba(29,109,240,.28);
  transition:transform .25s ease, box-shadow .25s ease;
}
.pie__boton svg{ width:15px; height:15px; }
.pie__boton:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(29,109,240,.34); }

.pie__legal{
  max-width:1560px; margin:clamp(10px,1.4vh,18px) auto 0;
  padding-top:clamp(8px,1.2vh,14px);
  border-top:1px solid rgba(18,40,78,.08);
  display:flex; align-items:center; flex-wrap:wrap; gap:6px clamp(14px,2vw,32px);
  font-size:12px;
}
.pie__copy{ margin:0; }
.pie__leyes{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px clamp(12px,1.6vw,26px); }
.pie__leyes li{ position:relative; }
.pie__leyes li + li::before{
  content:""; position:absolute; left:clamp(-13px,-.8vw,-6px); top:.3em; bottom:.3em;
  width:1px; background:rgba(18,40,78,.16);
}
.pie__firma{ margin-left:auto; display:flex; align-items:center; gap:12px; white-space:nowrap; }
.pie__firma b{ color:#16233D; font-weight:600; }
.pie__arriba{
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(29,109,240,.35); color:var(--blue);
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.pie__arriba svg{ width:15px; height:15px; }
.pie__arriba:hover{ background:var(--blue); color:#fff; transform:translateY(-2px); }
.pie__arriba-txt{ color:#5A6577; }

/* de 1700 para abajo los enlaces se apilan: en una fila no caben y las
   barras separadoras quedaban sueltas al principio de cada línea */
@media (max-width:1700px){
  .pie__col ul{ flex-direction:column; gap:5px 0; }
  .pie__col li + li{ padding-left:0; }
  .pie__col li + li::before{ display:none; }
}
/* y por encima, los servicios (la columna más ancha) también van uno debajo
   de otro: en fila empujaban "Contacta ahora" fuera de la pantalla, y así el
   pie no crece, porque mide lo mismo que la columna de las redes */
@media (min-width:1701px){
  .pie__col--ancha ul{ flex-direction:column; gap:5px 0; }
  .pie__col--ancha li + li{ padding-left:0; }
  .pie__col--ancha li + li::before{ display:none; }
}

/* Ventanas bajas (o con zoom): el pie pasa a una sola fila —sin títulos y
   con los enlaces en línea— para no comerse el formulario. */
@media (min-width:1450px) and (max-height:830px){
  .pie{ padding-top:15px; padding-bottom:10px; }
  .pie__tit{ display:none; }
  .pie__col{ justify-content:center; }
  .pie__col ul{ flex-direction:row; gap:0 10px; }
  .pie__col li + li{ padding-left:11px; }
  .pie__col li + li::before{ display:block; }
  .pie__inner{ align-items:center; gap:clamp(10px,1.4vw,24px); }
  .pie__inner > * + *{ padding-left:clamp(10px,1.4vw,24px); }
  .pie__marca{ gap:0; }
  .pie__claim p{ display:none; }
  .pie__lema{ display:block; }
  .pie__texto{ display:none; }
  .pie__legal{ margin-top:8px; padding-top:7px; }
}

/* ventana estrecha y baja a la vez: en el pie se quedan la marca, las redes,
   el botón y la línea legal; los enlaces siguen en el menú de arriba */
@media (min-width:861px) and (max-width:1449px) and (max-height:830px){
  .pie{ padding-top:15px; padding-bottom:10px; }
  .pie__inner{ grid-template-columns:auto 1fr auto; align-items:center; }
  .pie__col:not(.pie__col--cta){ display:none; }
  .pie__claim p{ display:none; }
  .pie__texto{ display:none; }
  .pie__tit{ display:none; }
  .pie__legal{ margin-top:8px; padding-top:7px; }
}

/* ventanas bajas: el pie se aprieta para no robarle sitio al formulario */
@media (max-height:960px){
  .pie{ padding-top:18px; padding-bottom:10px; font-size:12.5px; }
  .pie__lema{ display:none; }
  .pie__claim p{ margin-bottom:9px; }
  .pie__red{ width:27px; height:27px; }
  .pie__red svg{ width:14px; height:14px; }
  .pie__tit{ margin-bottom:7px; }
  .pie__texto{ margin-bottom:9px; }
  .pie__boton{ height:34px; padding:0 17px; }
  .pie__legal{ margin-top:9px; padding-top:8px; font-size:11.5px; }
  .pie__arriba{ width:27px; height:27px; }
}

@media (max-width:1500px){
  .pie__col--cta .pie__texto{ display:none; }
  .pie__arriba-txt{ display:none; }
}
@media (max-width:1240px){
  .pie__claim p{ display:none; }
  .pie__col ul{ flex-wrap:wrap; gap:2px 10px; }
  .pie__inner{ gap:12px; }
  .pie__inner > * + *{ padding-left:12px; }
}

@media (max-width:860px){
  .pie{ position:static; padding-inline:var(--shell); }
  .pie__inner{ grid-template-columns:1fr; gap:20px; }
  .pie__inner > * + *{ padding-left:0; border-left:0; padding-top:16px; border-top:1px solid rgba(18,40,78,.09); }
  .pie__claim p{ display:block; }
  .pie__col--cta .pie__texto{ display:block; }
  .pie__legal{ flex-direction:column; align-items:flex-start; }
  .pie__firma{ margin-left:0; }
  .contact{ padding-bottom:clamp(26px,4vh,60px); }
}


/* ---- Contacto, más recogido: el pie ocupa su parte de abajo y el
       formulario no tiene por qué llegar hasta él ---- */
@media (min-width:861px){
  .contact{ padding-top:calc(var(--header-h) + clamp(4px,1vh,14px)); }
  .contact__head{ margin-bottom:clamp(16px,2.4vh,30px); }
  .contact__title{ font-size:clamp(30px,2.7vw,46px); margin-bottom:12px; }
  .contact__lead{ font-size:clamp(14px,1vw,16.5px); line-height:1.55; max-width:34em; }

  /* la tarjeta del formulario, más contenida */
  .form{ padding:clamp(16px,1.5vw,24px); border-radius:22px; gap:10px; }
  .field input, .field select{ padding:11px 14px 11px 42px; font-size:14.5px; }
  .field textarea{ padding:11px 14px 11px 42px; font-size:14.5px; min-height:84px; }
  .field__icon{ left:14px; width:17px; height:17px; }
  .field--area .field__icon{ top:13px; }

  /* las tarjetas de contacto directo */
  .contact__side{ gap:10px; }
  .ch{ padding:12px 16px; gap:13px; border-radius:16px; }
  .contact__direct{ margin-top:clamp(10px,1.6vh,18px); }
  .contact__direct p{ margin-bottom:14px; font-size:14px; line-height:1.5; }
  .contact__direct-rule{ margin-bottom:12px; }
  .btn-ghost{ padding:11px 22px; font-size:14.5px; }
}

/* ventanas de portátil: se aprieta un punto más */
@media (min-width:861px) and (max-height:940px){
  .contact__head{ margin-bottom:clamp(12px,1.8vh,22px); }
  .contact__title{ font-size:clamp(28px,2.4vw,40px); }
  .contact__lead{ font-size:14px; }
  .form{ padding:clamp(14px,1.2vw,20px); gap:8px; }
  .field input, .field select{ padding:10px 13px 10px 40px; }
  .field textarea{ min-height:62px; padding:10px 13px 10px 40px; }
  .ch{ padding:10px 14px; }
}

/* ventanas bajas de verdad: lo justo para que quepa sin desplazarse */
@media (min-width:861px) and (max-height:800px){
  .contact__head{ margin-bottom:10px; }
  .contact__title{ font-size:clamp(26px,2.2vw,34px); margin-bottom:9px; }
  .contact__lead{ font-size:13.5px; line-height:1.5; }
  .form{ padding:13px; gap:8px; border-radius:18px; }
  .field input, .field select{ padding:9px 12px 9px 38px; font-size:14px; }
  .field textarea{ min-height:62px; padding:9px 12px 9px 38px; font-size:14px; }
  .ch{ padding:9px 13px; gap:11px; }
  .contact__direct p{ margin-bottom:11px; font-size:13.5px; }
  .btn-ghost{ padding:10px 20px; font-size:14px; }
}


/* ---- Contacto en tres columnas, como la referencia ---- */
.cont{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:minmax(300px,1.15fr) minmax(340px,1fr) minmax(300px,1fr);
  gap:clamp(24px,3.2vw,68px);
  align-items:center;
}

/* columna izquierda */
.cont__titulo{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(26px,2.35vw,42px); line-height:1.06; letter-spacing:-.024em;
  margin:0 0 14px; color:#0E1626;
}
.cont__titulo em{ font-style:normal; color:var(--blue); }
.cont__lead{
  margin:0 0 clamp(18px,2.6vh,32px); font-size:clamp(14px,1.02vw,16.5px);
  line-height:1.6; color:#46536B; max-width:30em;
}
.cont__puntos{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(12px,1.8vh,20px); }
.cont__puntos li{ display:flex; align-items:center; gap:14px; font-size:clamp(13px,.98vw,15.5px); color:#22304A; line-height:1.35; }
.cont__ico{
  width:clamp(30px,2.3vw,38px); height:clamp(30px,2.3vw,38px); flex:0 0 auto;
  display:grid; place-items:center; color:var(--blue);
}
.cont__ico svg{ width:100%; height:100%; }
.cont__firma{
  display:flex; align-items:center; gap:16px; margin:clamp(22px,3.4vh,44px) 0 0;
  font-family:var(--nav); font-size:11px; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:#8FA2BE; white-space:nowrap;
}
.cont__raya{ display:block; width:40px; height:2px; border-radius:2px; background:var(--blue); flex:0 0 auto; }

/* la caja del formulario, con su hoja asomando por detrás */
.cont__caja{ position:relative; }
.cont__caja::before{
  content:""; position:absolute; inset:14px -10px -14px 10px;
  background:rgba(255,255,255,.55); border-radius:26px;
  transform:rotate(1.6deg);
  box-shadow:0 18px 40px rgba(24,54,104,.1);
}
.cont__caja .form{ position:relative; padding-top:clamp(50px,5.4vh,74px); }
.cont__mano{
  position:absolute; z-index:2; margin:0;
  top:clamp(12px,1.6vh,20px); left:clamp(20px,1.7vw,30px); right:clamp(20px,1.7vw,30px);
  font-family:"Caveat", var(--serif); color:var(--blue);
  font-size:clamp(22px,1.9vw,34px); line-height:1.1;
}
.cont__flecha{
  position:absolute; right:2px; top:-6px;
  width:clamp(44px,3.4vw,66px); height:auto;
}
.cont__mano--dos{
  position:absolute; right:clamp(78px,7vw,130px); bottom:clamp(2px,1vh,12px);
  margin:0; padding:0; text-align:right;
  font-size:clamp(17px,1.35vw,24px); line-height:1.28;
}
/* la estela vive en su propia franja, entre el contenido y el pie: así se
   ve entera y no se esconde detrás de las tarjetas. Va por debajo del
   contenido (.cont tiene z-index 1), de modo que allí donde asoma por
   detrás del botón "Diseña tu plan" pasa por detrás y no por delante. */
.cont__hueco{
  position:relative; z-index:0;
  width:100%; max-width:1560px; margin:0 auto;
  height:clamp(52px,8vh,112px); flex:0 0 auto;
  pointer-events:none;
}
.cont__estela{
  position:absolute; right:0; bottom:2px;
  width:min(60%, 820px); height:auto;
}
/* 818 es la longitud real de la curva, medida: así la punta de la línea y el
   avión avanzan exactamente al mismo ritmo */
.cont__estela-linea{
  stroke-dasharray:818; stroke-dashoffset:818;
}
.deck > section.is-active .cont__estela-linea{
  animation:estelaVuela 1.9s cubic-bezier(.35,0,.25,1) .45s forwards;
}
@keyframes estelaVuela{ to{ stroke-dashoffset:0; } }

/* el avión va montado sobre la misma curva que dibuja la estela, de manera
   que no puede separarse de ella: la recorre y gira siguiendo su tangente */
.cont__estela-avion{
  transform-box:view-box; transform-origin:0 0;
  offset-path:path("M8 138C140 148 300 140 440 118c128-20 232-50 306-82 26-11 46-21 60-29");
  offset-rotate:auto;
  offset-distance:100%;
}
.deck > section:not(.is-active) .cont__estela-avion{ opacity:0; }
.deck > section.is-active .cont__estela-avion{
  animation:avionVuela 1.9s cubic-bezier(.35,0,.25,1) .45s backwards,
            avionAsoma .35s ease .45s backwards;
}
@keyframes avionVuela{ from{ offset-distance:0%; } to{ offset-distance:100%; } }
@keyframes avionAsoma{ from{ opacity:0; } to{ opacity:1; } }

/* columna derecha */
.cont__sub{
  margin:0 0 8px; font-family:var(--sans); font-weight:700;
  font-size:clamp(16px,1.35vw,22px); letter-spacing:-.015em; color:#0E1626;
}
.cont__texto{ margin:0 0 clamp(12px,2vh,20px); font-size:clamp(13px,.95vw,15px); line-height:1.55; color:#46536B; }
.cont__canales .ch{ margin-bottom:10px; }
.cont__canales .ch__text i{ font-size:clamp(11.5px,.85vw,13.5px); overflow-wrap:anywhere; }
.cont__plan{ margin-top:clamp(14px,2.4vh,26px); }
.cont__plan .cont__raya{ margin-bottom:14px; }
.cont__plan-tit{ margin:0 0 6px; font-weight:700; font-size:clamp(14px,1.1vw,17px); color:#0E1626; }
.cont__plan .btn-ghost{ margin-top:4px; }

/* ventanas más bajas */
@media (min-width:861px) and (max-height:940px){
  .cont{ gap:clamp(18px,2.4vw,44px); }
  .cont__caja .form{ padding-top:42px; }
  .cont__hueco{ height:clamp(44px,6vh,84px); }
  .cont__lead{ margin-bottom:14px; }
  .cont__firma{ margin-top:16px; }
  .cont__mano{ top:10px; }
  .cont__sub{ font-size:clamp(15px,1.2vw,19px); }
  .cont__texto{ margin-bottom:10px; }
  .cont__canales .ch{ margin-bottom:8px; }
  .cont__plan{ margin-top:14px; }
  .cont__plan .cont__raya{ margin-bottom:10px; }
  .cont__mano--dos{ font-size:clamp(15px,1.15vw,19px); }
  .cont__lead{ margin-bottom:16px; }
  .cont__puntos{ gap:11px; }
  .cont__firma{ margin-top:20px; }
  .cont__mano{ font-size:clamp(20px,1.6vw,27px); }
}
@media (min-width:861px) and (max-height:800px){
  .cont__caja .form{ padding-top:38px; padding-bottom:12px; gap:7px; }
  .field input, .field select{ padding:8px 12px 8px 38px; }
  .field textarea{ min-height:52px; }
  .form__note{ font-size:11.5px; }
  .cont__mano{ font-size:20px; top:8px; }
  .cont__flecha{ width:44px; }
  .cont__puntos li{ font-size:13px; }
  .cont__ico{ width:28px; height:28px; }
  .cont__firma{ margin-top:14px; }
}

@media (max-width:1180px){
  .cont__estela{ display:none; }
  .cont{ grid-template-columns:1fr 1fr; }
  .cont__intro{ grid-column:1 / -1; }
  .cont__mano--dos{ display:none; }
}
@media (max-width:860px){
  .cont{ grid-template-columns:1fr; gap:26px; }
  .cont__caja::before{ display:none; }
  .cont__flecha{ display:none; }
}


/* ---- Contacto también va en dos planos: Hablemos y Testimonios ---- */
.contact__planos{ position:relative; width:100%; display:grid; flex:1 1 auto; min-height:min-content; }
/* el plano que no se ve no cuenta para el alto: así Hablemos no hereda el
   tamaño de Testimonios */
.contact__planos > .plano:not(.is-on){ position:absolute; inset:0; }
.contact__planos > .plano{ grid-area:1 / 1; align-self:stretch; display:flex; flex-direction:column; }
.contact__pager{
  position:relative; z-index:5; align-self:flex-start; flex:0 0 auto;
  margin:clamp(2px,.5vh,7px) 0 clamp(6px,.9vh,11px);
  display:flex; align-items:center; gap:6px;
  padding:5px; border-radius:999px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  box-shadow:0 8px 26px rgba(16,38,72,.10), inset 0 0 0 1px rgba(18,40,78,.07);
}
.contact__pager button{
  border:0; background:none; cursor:pointer;
  padding:7px 15px; border-radius:999px;
  font-family:var(--nav); font-size:12px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:#6C7A91;
  transition:color .3s ease, background .35s ease;
}
.contact__pager button:hover{ color:var(--blue); }
.contact__pager button.is-on{ color:#fff; background:var(--blue); }
.contact__pager button:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

/* ================= TESTIMONIOS ================= */
.voces{
  position:relative; width:100%; max-width:1560px; margin:auto;
  display:grid; grid-template-columns:minmax(250px,.82fr) minmax(380px,1.1fr) minmax(110px,.3fr);
  grid-template-areas:"cabecera destacada nota" "rejilla rejilla rejilla" "cifras cifras cifras";
  gap:clamp(6px,1vh,12px) clamp(16px,2vw,40px);
  align-items:start;
}
.voces__head{ grid-area:cabecera; position:relative; }
.voces__titulo{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(24px,2.1vw,36px); line-height:1.03; letter-spacing:-.028em;
  margin:0 0 10px; color:#0E1626;
}
.voces__titulo em{ font-style:normal; color:var(--blue); }
.voces__titulo b{ color:var(--blue); }
.voces__lead{ margin:0; font-size:clamp(12.5px,.9vw,15px); line-height:1.45; color:#46536B; max-width:32em; }
.voces__mano{
  margin:clamp(10px,1.6vh,18px) 0 0; position:relative;
  font-family:"Caveat", var(--serif); color:var(--blue);
  font-size:clamp(17px,1.35vw,24px); line-height:1.2;
}
.voces__mano svg{ position:absolute; left:calc(100% + 6px); top:6px; width:clamp(44px,3.4vw,64px); height:auto; }
.voces__mano--dos{
  grid-area:nota; align-self:start; justify-self:end; text-align:right;
  transform:rotate(-4deg); margin:clamp(6px,1.4vh,18px) 0 0;
}
.voces__mano--dos svg{ display:none; }

/* cada testimonio, una nota con su chincheta */
.voz{
  position:relative; padding-top:11px; transform:rotate(var(--giro,0deg));
  perspective:900px; cursor:pointer;
}
.voz:focus-visible{ outline:2px solid var(--blue); outline-offset:5px; border-radius:5px; }
/* al pulsarla, la hoja se despega por abajo de su chincheta */
.voz.esta-abierta{ z-index:5; }
.voz__chincheta{
  position:absolute; left:clamp(22px,2.4vw,42px); top:0; z-index:2;
  width:15px; height:15px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #7FB0FF, #1D6DF0 62%, #124a9f);
  box-shadow:0 3px 6px rgba(16,38,72,.3);
}
.voz__chincheta::after{
  content:""; position:absolute; left:50%; top:11px; width:2px; height:7px;
  margin-left:-1px; border-radius:1px; background:rgba(18,40,78,.28);
}
.voz__papel{
  position:relative;
  background:linear-gradient(168deg,#FFFFFF 0%,#FDFDFE 60%,#F5F7FB 100%);
  border-radius:3px;
  box-shadow:0 12px 26px rgba(24,54,104,.13), 0 2px 6px rgba(24,54,104,.07);
  padding:clamp(10px,.85vw,15px) clamp(10px,.85vw,15px) clamp(9px,.75vw,13px);
  display:flex; flex-direction:column; gap:7px; height:100%;
  transform-origin:50% 0;
  transition:transform .38s cubic-bezier(.2,.8,.25,1), box-shadow .38s ease;
}
/* el subrayado que recorre el borde de abajo */
.voz__papel::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  border-radius:0 0 3px 3px;
  background:linear-gradient(90deg, var(--blue), var(--green) 55%, var(--pink));
  transform:scaleX(0); transform-origin:left center;
  transition:transform .55s cubic-bezier(.2,.8,.25,1);
}
/* Con sólo pasar el puntero, la reseña se adelanta un poco y se enciende
   con un reborde de neón azul. No hace falta pulsar nada. */
.voz:hover, .voz:focus-within{ z-index:6; }
.voz:hover .voz__papel,
.voz:focus-visible .voz__papel{
  transform:scale(1.045) translateY(-3px);
  box-shadow:0 22px 40px -14px rgba(24,54,104,.3),
             0 0 0 1.5px rgba(58,170,255,.95),
             0 0 16px rgba(58,170,255,.6),
             0 0 34px rgba(58,170,255,.3);
}

/* y al pulsarla se queda así, con la inclinación de antes: para el móvil,
   donde no hay puntero que pasar por encima */
.voz.esta-abierta .voz__papel{
  transform:rotateX(9deg) rotateY(-4deg) scale(1.05);
  box-shadow:0 34px 58px -18px rgba(24,54,104,.36),
             0 0 0 1.5px rgba(58,170,255,1),
             0 0 20px rgba(58,170,255,.7),
             0 0 44px rgba(58,170,255,.34);
}
.voz.esta-abierta .voz__papel::after{ transform:scaleX(1); }
/* la de la izquierda es más alta, así que se inclina un pelín menos */
.voz--destacada.esta-abierta .voz__papel{
  transform:rotateX(5.5deg) rotateY(-3deg) scale(1.02);
}
/* la destacada es bastante más grande: crece menos, que si no da un salto */
.voz--destacada:hover .voz__papel,
.voz--destacada:focus-visible .voz__papel{ transform:scale(1.026) translateY(-3px); }

@media (prefers-reduced-motion:reduce){
  /* quien ha pedido no ver movimiento se queda sólo con el neón */
  .voz__papel, .voz__papel::after{ transition:none; }
  .voz.esta-abierta .voz__papel,
  .voz:hover .voz__papel,
  .voz--destacada:hover .voz__papel{ transform:none; }
}
.voz__alto{ display:flex; align-items:flex-start; gap:clamp(9px,.8vw,14px); }
.voz__foto{
  width:clamp(30px,2.3vw,40px); height:clamp(30px,2.3vw,40px); flex:0 0 auto;
  border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(150deg,#E8F0FD,#CFE0F8);
  font-family:var(--nav); font-weight:700; font-size:clamp(12px,.95vw,15px);
  color:rgba(29,109,240,.5);
}
.voz__cita{
  margin:0; font-size:clamp(10.5px,.74vw,12.2px); line-height:1.34; color:#3C4A61;
}
.voz__pie{ margin-top:auto; }
.voz__nombre{
  margin:0; display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-weight:700; font-size:clamp(11.5px,.82vw,13.5px); color:#0E1626;
}
.voz__flag{ width:16px; height:11px; border-radius:2px; box-shadow:0 0 0 1px rgba(18,40,78,.12); }
.voz__cargo{ margin:2px 0 0; font-size:clamp(10.5px,.72vw,12px); color:#5A6577; }
.voz__sector{
  margin:3px 0 0; font-family:var(--nav); font-size:9.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:#8FA2BE;
}

/* la destacada, más grande y girada */
.voz--destacada{ grid-area:destacada; padding-top:14px; justify-self:stretch; }
.voz--destacada .voz__papel{ padding:clamp(13px,1.1vw,20px); gap:9px; }
.voz--destacada .voz__cita{ font-size:clamp(12.5px,.92vw,15px); line-height:1.42; }
.voz--destacada .voz__nombre{ font-size:clamp(13.5px,1vw,17px); }
.voz__chincheta--grande{ width:19px; height:19px; left:50%; margin-left:-9px; }
.voz__foto--grande{ width:clamp(44px,3.4vw,60px); height:clamp(44px,3.4vw,60px); font-size:clamp(13px,1vw,17px); }

.voces__rejilla{
  grid-area:rejilla;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(8px,.85vw,15px) clamp(9px,.95vw,18px);
  align-items:stretch;
}
.voces__rejilla .voz{ display:flex; }
.voces__rejilla .voz__papel{ width:100%; }

/* la línea de cifras */
.cifras{
  grid-area:cifras; position:relative;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.4vw,28px);
  padding-top:clamp(9px,1.4vh,16px);
}
.cifras__onda{
  position:absolute; left:0; right:0; top:0; width:100%; height:clamp(24px,3.4vh,44px);
  overflow:visible;
}
.cifra{ position:relative; text-align:center; }
.cifra__punto{
  position:absolute; left:50%; top:clamp(-14px,-1.6vh,-8px); width:9px; height:9px; margin-left:-4.5px;
  border-radius:50%; border:1.6px solid var(--blue); background:#fff;
}
.cifra__ico{ display:block; width:clamp(18px,1.4vw,23px); margin:0 auto 4px; color:var(--blue); }
.cifra__ico svg{ width:100%; height:100%; }
.cifra__dato{ margin:0; font-weight:700; font-size:clamp(13px,1vw,16px); color:var(--blue); }
.cifra__texto{ margin:1px 0 0; font-size:clamp(10.5px,.74vw,12px); color:#5A6577; }

/* ---- alturas justas ---- */
@media (min-width:861px) and (max-height:1000px){
  .voces{ gap:6px clamp(16px,1.9vw,36px); }
  .voces__titulo{ font-size:clamp(22px,1.95vw,31px); margin-bottom:8px; }
  .voces__lead{ font-size:12px; line-height:1.4; }
  .voces__mano{ display:none; }
  .voz__papel{ padding:9px 10px 8px; gap:6px; }
  .voz__cita{ font-size:11px; line-height:1.3; }
  .voz--destacada .voz__papel{ padding:12px 14px; gap:7px; }
  .voz--destacada .voz__cita{ font-size:12.5px; line-height:1.38; }
  .cifras{ padding-top:8px; }
  .cifra__ico{ width:19px; margin-bottom:3px; }
}
@media (min-width:861px) and (max-height:800px){
  .voces__mano{ display:none; }
  .voces__lead{ display:none; }
  .voz__papel{ padding:8px 9px 7px; gap:5px; }
  .voz__cita{ font-size:10.5px; line-height:1.28; }
  .voz--destacada .voz__cita{ font-size:11.5px; }
  .cifras{ padding-top:6px; }
  .cifra__dato{ font-size:13px; }
  .voces__titulo{ font-size:clamp(24px,2vw,32px); }
  .voz__cita{ font-size:11.5px; line-height:1.36; }
  .voz__sector{ display:none; }
  .cifra__ico{ display:none; }
  .cifras{ padding-top:12px; }
}

@media (max-width:1180px){
  .contact__pager{ display:none; }
  .contact__planos{ display:block; }
  .contact__planos > .plano{ opacity:1; visibility:visible; transform:none; transition:none; }
  .contact__planos > .plano:not(.is-on){ position:static; inset:auto; }
  .plano--testimonios{ margin-top:clamp(30px,5vh,56px); }
  .voces{ grid-template-columns:1fr; grid-template-areas:"cabecera" "destacada" "rejilla" "cifras"; }
  .voz--destacada{ justify-self:stretch; width:auto; }
  .voces__mano--dos{ display:none; }
  .voces__rejilla{ grid-template-columns:repeat(2,1fr); }
}
/* en el móvil, todo lo pulsable con altura de dedo */
@media (max-width:860px){
  .chip{ padding:11px 18px; font-size:13.5px; }
  .pie__red{ width:40px; height:40px; }
  .pie__red svg{ width:18px; height:18px; }
  .pie__arriba{ width:40px; height:40px; }
  .pie a{ display:inline-block; padding:3px 0; }
  .ch{ min-height:56px; }
  .cont__canales .ch{ min-height:56px; }
}

@media (max-width:700px){
  .voces__rejilla{ grid-template-columns:1fr; }
  .cifras{ grid-template-columns:repeat(2,1fr); gap:20px; }
  .cifras__onda{ display:none; }
}

.escena-pista{ display:none; }

/* ---- menú de móvil ---- */
.menu-btn{
  display:none; order:3;
  width:44px; height:44px; padding:0; border:0; border-radius:14px;
  background:rgba(255,255,255,.82); cursor:pointer;
  box-shadow:0 6px 18px rgba(16,38,72,.12), inset 0 0 0 1px rgba(18,40,78,.08);
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.menu-btn span{
  display:block; width:18px; height:2px; border-radius:2px; background:#16233D;
  transition:transform .3s ease, opacity .25s ease;
}
.menu-btn.esta-abierto span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-btn.esta-abierto span:nth-child(2){ opacity:0; }
.menu-btn.esta-abierto span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:860px){
  .menu-btn{ display:flex; }
  .site-header{ gap:12px; padding:12px var(--shell); }
  .site-nav{
    display:flex !important; flex-direction:column; gap:2px;
    position:absolute; left:var(--shell); right:var(--shell); top:calc(100% - 6px);
    padding:10px; border-radius:18px;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    box-shadow:0 20px 44px rgba(16,38,72,.18), inset 0 0 0 1px rgba(18,40,78,.07);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .28s ease, transform .32s cubic-bezier(.2,.8,.3,1), visibility .32s;
    pointer-events:auto;
  }
  .site-nav.esta-abierto{ opacity:1; visibility:visible; transform:none; }
  .site-nav a{
    padding:13px 14px; border-radius:12px; font-size:15px;
    color:#16233D; text-align:left; line-height:1.2;
  }
  .site-nav a:hover{ background:rgba(29,109,240,.08); }
  /* en el desplegable la barra ocuparía toda la fila y quedaría rara: aquí
     la sección en la que estás se marca con un fondo suave */
  .site-nav a.esta-en{ font-size:16px; background:rgba(29,109,240,.1); transform:none; }
  .site-nav a.esta-en::after{ display:none; }
  .btn-cta{ order:2; }
}

/* ---------------- Modal ---------------- */
.modal{ position:fixed; inset:0; z-index:100; }
.modal[hidden]{ display:none; }
.modal__backdrop{
  position:absolute; inset:0;
  background:rgba(18,30,52,.30);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  opacity:0; transition:opacity .35s ease;
}
.modal.is-open .modal__backdrop{ opacity:1; }

.modal__card{
  position:absolute; left:0; top:0;      /* posición exacta: script.js */
  width:min(480px, 92vw);
  padding:clamp(26px,2.6vw,38px);
  border-radius:30px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.9);
  background:
    radial-gradient(130% 100% at 6% -6%, rgba(var(--accent-rgb),.16), transparent 58%),
    radial-gradient(90% 70% at 100% 100%, rgba(var(--accent-rgb),.10), transparent 62%),
    linear-gradient(158deg, rgba(255,255,255,.88), rgba(255,255,255,.70));
  backdrop-filter:blur(30px) saturate(160%);
  -webkit-backdrop-filter:blur(30px) saturate(160%);
  box-shadow:0 40px 90px -38px rgba(22,34,56,.38), 0 2px 12px rgba(22,34,56,.07);
  color:#2A3547;
  opacity:0; transform:scale(.9);
  transition:opacity .4s cubic-bezier(.2,.8,.3,1), transform .4s cubic-bezier(.2,.8,.3,1);
  outline:none;
}
.modal.is-open .modal__card{ opacity:1; transform:scale(1); }
.modal__card > *:not(.modal__drops):not(.modal__close){ position:relative; z-index:1; }

/* ---- fondo vivo: gotas que flotan y ondas que se expanden ---- */
.modal__drops{
  position:absolute; inset:0; border-radius:inherit;
  overflow:hidden; pointer-events:none; z-index:0;
}
.modal__drops span{
  position:absolute; left:var(--x); top:var(--y);
  width:var(--s); height:var(--s); margin:calc(var(--s) / -2);
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,
    rgba(255,255,255,.92),
    rgba(var(--accent-rgb),.13) 54%,
    rgba(var(--accent-rgb),.03) 100%);
  filter:blur(calc(var(--s) / 7));
  opacity:0;
  animation:dropFloat var(--t,16s) ease-in-out var(--d,0s) infinite;
}
@keyframes dropFloat{
  0%   { transform:translate3d(0,22px,0) scale(.86); opacity:0; }
  22%  { opacity:.38; }
  60%  { opacity:.26; }
  100% { transform:translate3d(8px,-30px,0) scale(1.1); opacity:0; }
}
/* gotas: tres ondas concéntricas por impacto, con retardo entre ellas */
.modal__drops i{
  position:absolute; left:var(--x); top:var(--y);
  width:var(--s); height:var(--s); margin:calc(var(--s) / -2);
  border-radius:50%;
  border:2px solid rgba(var(--accent-rgb),.55);
  background:radial-gradient(circle, rgba(var(--accent-rgb),.10), rgba(var(--accent-rgb),0) 62%);
  box-shadow:0 0 22px -8px rgba(var(--accent-rgb),.45);
  transform:scale(.05); opacity:0;
  animation:dropRipple var(--t,6s) cubic-bezier(.11,.66,.24,1) var(--d,0s) infinite;
}
.modal__drops i::before,
.modal__drops i::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1.5px solid rgba(var(--accent-rgb),.42);
  transform:scale(.05); opacity:0;
  animation:dropRipple var(--t,6s) cubic-bezier(.11,.66,.24,1) var(--d,0s) infinite;
}
.modal__drops i::before{ animation-delay:calc(var(--d,0s) + var(--t,6s) * .16); }
.modal__drops i::after { animation-delay:calc(var(--d,0s) + var(--t,6s) * .32); }

@keyframes dropRipple{
  0%   { transform:scale(.05); opacity:0; }
  7%   { opacity:.62; }
  45%  { opacity:.34; }
  100% { transform:scale(1); opacity:0; }
}

.modal__close{
  position:absolute; top:20px; right:20px; z-index:3;
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(30,45,70,.10); background:rgba(255,255,255,.7);
  color:#6B7688; display:grid; place-items:center;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.modal__close svg{ width:17px; height:17px; }
.modal__close:hover{ background:#fff; color:#2A3547; transform:rotate(90deg); }

.modal__icon{
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(var(--accent-rgb),.30);
  background:rgba(var(--accent-rgb),.09);
  color:var(--accent); margin-bottom:22px;
  box-shadow:0 0 0 9px rgba(var(--accent-rgb),.055),
             0 14px 30px -14px rgba(var(--accent-rgb),.55);
}
.modal__icon svg{ width:29px; height:29px; }

.modal__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(36px,3.6vw,50px); line-height:1;
  margin:0 0 11px; color:var(--accent-deep, var(--accent)); letter-spacing:-.012em;
}
.modal__kicker{
  margin:0; font-size:11.5px; letter-spacing:.28em; text-transform:uppercase;
  color:#8A94A5; font-weight:500;
}
.modal__rule{
  display:block; width:46px; height:2px; border-radius:2px;
  background:var(--accent); margin:18px 0 20px; opacity:.9;
}
.modal__text{
  margin:0 0 22px; font-size:clamp(15px,1.15vw,17px); line-height:1.58;
  color:#3A465C; font-weight:400;
}
.modal__list{ list-style:none; margin:0 0 28px; padding:0; display:grid; gap:11px; }
.modal__list li{
  position:relative; padding-left:23px; font-size:14.8px; color:#55627A; font-weight:400;
}
.modal__list li::before{
  content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14);
}
.modal__cta{
  display:inline-flex; align-items:center; gap:14px;
  padding:14px 28px; border-radius:999px; text-decoration:none;
  font-weight:600; font-size:15.5px; letter-spacing:.01em;
  background:linear-gradient(120deg,
    rgba(var(--accent-rgb),1),
    color-mix(in srgb, rgb(var(--accent-rgb)) 78%, #000 22%));
  color:#fff;
  box-shadow:0 16px 34px -14px rgba(var(--accent-rgb),.7),
             0 0 0 8px rgba(var(--accent-rgb),.08);
  transition:transform .25s ease, box-shadow .25s ease;
}
.modal__cta:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 40px -14px rgba(var(--accent-rgb),.8),
             0 0 0 10px rgba(var(--accent-rgb),.12);
}
.modal__cta span{ transition:transform .25s ease; }
.modal__cta:hover span{ transform:translateX(4px); }


body.modal-open{ overflow:hidden; }

/* Pantallas medianas: los textos del camino se comprimen y, si no hay aire
   frente a las tarjetas, se reducen al título (la descripción sigue en la
   ventana de cada punto). */
@media (max-width:1750px){
  .pin__label{ width:280px; margin-right:22px; }
  .pin__title{ font-size:24px; }
  .pin__desc{ font-size:13.5px; line-height:1.45; }
}
@media (max-width:1400px){
  .pin__label{ width:auto; white-space:nowrap; }
  .pin__desc{ display:none; }
}

/* ---------------- Ventanas bajas ---------------- */
@media (min-width:861px) and (max-height:860px){
  .hero__content{ padding-top:clamp(84px,12vh,120px); }
  .claim{ margin-bottom:10px; gap:8px; }
  .claim__strong{ font-size:clamp(40px,4.9vw,84px); }
  .claim__lead{ font-size:clamp(19px,2vw,33px); }
  .claim__sub{ margin-bottom:18px; }
  .trust__logos{ gap:10px clamp(12px,1.7vw,28px); margin-top:10px; --lh:clamp(25px,2.15vw,36px); }
  .trust{ padding-bottom:clamp(18px,2.4vh,28px); }
  .pin__title{ font-size:26px; }
}

/* ---------------- Móvil / tablet ---------------- */
@media (max-width:1180px){
  /* aquí caben cinco por fila: cinco, cinco y tres, y la última se centra
     con el mismo truco de las medias columnas */
  /* seis por fila ya no caben: tres filas de cuatro */
  .trust__logos{ grid-template-columns:repeat(8, minmax(0,1fr)); }
  .pin__sub{ display:none; }
  .pin__label{ margin-left:26px; }
  .pin__title{ font-size:24px; }
}

@media (max-width:860px){
  /* en móvil no hay rejilla que cuadre trece: fila corrida y cada línea
     se centra sola */
  .trust__logos{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px 14px; }
  .brand{ grid-column:auto; }
  .site-nav{ display:none; }
  .btn-cta{ padding:6px 6px 6px 18px; font-size:14.5px; gap:12px; }
  .btn-cta__arrow{ width:32px; height:32px; }
  .btn-cta__arrow svg{ width:14px; height:14px; }

  /* el vídeo deja de ser fondo completo: pasa a ser una pieza 16:9 con el camino */
  .hero{ min-height:0; display:flex; flex-direction:column; background:var(--paper); overflow:visible; }
  .hero__content{ order:1; }
  .stage{ order:2; }
  .trust{ order:3; }
  .pin__label{ display:none; }
  .path-links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(18px,3vh,28px); }
  .stage{
    position:relative; inset:auto;
    width:100%; aspect-ratio:16/9;
    border-radius:18px; overflow:hidden;
    margin:clamp(14px,3vw,26px) 0 0;
    box-shadow:0 22px 50px -30px rgba(16,26,43,.5);
  }
  .stage__veil{ background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%); }
  .hero__content{
    width:auto; padding:clamp(88px,15vh,130px) var(--shell) 0;
  }
  .hero{ padding:0 0 clamp(16px,4vw,28px); }
  .stage{ margin-left:var(--shell); margin-right:var(--shell); width:auto; }
  .trust{ margin-top:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding-top:clamp(26px,5vh,44px); }
  .pin{ width:28px; height:42px; }
  .pin__title{ font-size:18px; }
  .pin__label{ margin-left:18px; }
  .pin--blue .pin__label, .pin--green .pin__label{
    left:auto; right:100%; margin:0 18px 0 0; align-items:flex-end; text-align:right;
  }
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition-duration:.01ms !important; }
}

/* ================= DISEÑA TU PLAN =================
   Cuestionario corto que sale de la portada. Las preguntas son de muestra
   hasta que lleguen las del comentario del 25 de agosto; al terminar, deja
   el resumen escrito en el formulario de Contacto.                     */
.plan{ position:fixed; inset:0; z-index:120; }
.plan[hidden]{ display:none; }
.plan__backdrop{
  position:absolute; inset:0; background:rgba(18,30,52,.34);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  opacity:0; transition:opacity .35s ease;
}
.plan.is-open .plan__backdrop{ opacity:1; }
.plan__card{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-46%) scale(.97);
  width:min(560px, calc(100vw - 36px));
  padding:clamp(26px,2.5vw,38px);
  border-radius:24px; background:rgba(255,255,255,.95);
  box-shadow:0 30px 80px rgba(12,30,60,.28), inset 0 0 0 1px rgba(255,255,255,.7);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  opacity:0; transition:opacity .4s ease, transform .5s cubic-bezier(.2,.8,.3,1);
}
.plan.is-open .plan__card{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.plan__close{
  position:absolute; right:16px; top:16px; width:38px; height:38px;
  display:grid; place-items:center; border:0; border-radius:50%;
  background:rgba(18,40,78,.06); color:#5E7391; cursor:pointer;
  transition:background .25s ease, color .25s ease;
}
.plan__close svg{ width:18px; height:18px; }
.plan__close:hover{ background:rgba(29,109,240,.12); color:var(--blue); }

.plan__barra{
  height:4px; border-radius:2px; background:rgba(29,109,240,.16);
  overflow:hidden; margin-bottom:16px;
}
.plan__barra i{
  display:block; height:100%; width:0; border-radius:2px;
  background:linear-gradient(90deg, var(--blue), #58A0FF);
  transition:width .45s cubic-bezier(.2,.8,.3,1);
}
.plan__paso{
  margin:0 0 10px; font-family:var(--nav); font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:#8FA2BE;
}
.plan__pregunta{
  margin:0 0 clamp(16px,2vw,24px);
  font-family:var(--sans); font-weight:700;
  font-size:clamp(20px,1.9vw,27px); line-height:1.18; letter-spacing:-.018em;
  color:#0E1626;
}
.plan__opciones{ display:flex; flex-direction:column; gap:9px; }
.plan__op{
  display:flex; align-items:center; gap:13px; width:100%;
  padding:14px 18px; border-radius:14px; cursor:pointer; text-align:left;
  border:1px solid rgba(18,40,78,.13); background:rgba(255,255,255,.7);
  font-family:var(--sans); font-size:clamp(14px,1.05vw,16px); color:#26344B;
  transition:border-color .22s ease, background .22s ease, transform .22s ease;
}
.plan__op b{
  flex:0 0 auto; width:26px; height:26px; border-radius:8px;
  display:grid; place-items:center;
  background:rgba(29,109,240,.1); color:var(--blue);
  font-family:var(--nav); font-size:12px; font-weight:600;
}
.plan__op:hover{ border-color:rgba(29,109,240,.5); background:#fff; transform:translateX(3px); }
.plan__op:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

.plan__pie{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:clamp(16px,2vw,24px);
}
.plan__atras{
  display:inline-flex; align-items:center; gap:8px;
  border:0; background:none; cursor:pointer; padding:6px 0;
  font-family:var(--nav); font-size:14px; font-weight:500; color:#6E7A8C;
  transition:color .22s ease;
}
.plan__atras svg{ width:15px; height:15px; }
.plan__atras:hover{ color:var(--blue); }
.plan__atras[hidden]{ visibility:hidden; display:inline-flex; }
.plan__nota{ font-size:12.5px; color:#8FA2BE; }

/* el resumen del final */
.plan__resumen{ display:flex; flex-direction:column; gap:10px; margin-bottom:4px; }
.plan__linea{
  display:flex; justify-content:space-between; gap:16px;
  padding:11px 16px; border-radius:12px; background:rgba(29,109,240,.06);
  font-size:14.5px; color:#46536B;
}
.plan__linea b{ color:#0E1626; font-weight:600; text-align:right; }
.plan__enviar{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  width:100%; margin-top:6px; height:52px; border:0; border-radius:999px;
  background:var(--blue); color:#fff; cursor:pointer;
  font-family:var(--nav); font-size:16px; font-weight:600;
  box-shadow:0 12px 26px rgba(29,109,240,.32);
  transition:transform .25s ease, box-shadow .25s ease;
}
.plan__enviar svg{ width:17px; height:17px; }
.plan__enviar:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(29,109,240,.4); }

@media (max-width:560px){
  .plan__card{ padding:24px 20px; }
  .plan__op{ padding:13px 15px; font-size:14.5px; }
}

/* ================= ACCESO =================
   «Log in»: primero el selector de portales (.portales, ancho) y, al elegir
   el Área de clientes, el formulario de entrar (.es-formulario, estrecho).
   Qué hace cada paso: script.js, bloque 14.                              */
.acceso{ position:fixed; inset:0; z-index:130; }
.acceso[hidden]{ display:none; }
.acceso__backdrop{
  position:absolute; inset:0; background:rgba(14,26,46,.42);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transition:opacity .35s ease;
}
.acceso.is-open .acceso__backdrop{ opacity:1; }
.acceso__card{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-46%) scale(.97);
  width:min(1020px, calc(100vw - 36px));
  max-height:calc(100vh - 36px); max-height:calc(100dvh - 36px); overflow-y:auto;
  padding:clamp(28px,2.6vw,40px) clamp(24px,2.4vw,36px) clamp(20px,2vw,28px);
  border-radius:24px; background:rgba(255,255,255,.96);
  box-shadow:0 30px 80px rgba(12,30,60,.3), inset 0 0 0 1px rgba(255,255,255,.7);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  opacity:0; transition:opacity .4s ease, transform .5s cubic-bezier(.2,.8,.3,1), width .35s ease;
  text-align:center;
}
.acceso__card.es-formulario{ width:min(420px, calc(100vw - 36px)); }
.acceso__paso[hidden]{ display:none; }

/* los portales: una tarjeta por sitio, con el mismo acabado que las demás
   tarjetas de la web (blanca esmerilada, sombra suave y filo fino), sobre
   la foto de la portada fundida en blanco:
   el logo arriba a todo lo ancho y el texto debajo. Sin colores propios: el
   color sólo llega al pasar por encima, en azul. Cuatro en fila en
   escritorio, 2×2 en tableta y una columna en el móvil.                  */
/* el selector lleva de fondo la foto de la portada sin la figura (la curva
   y las gradas), fundida en blanco hacia la izquierda y arriba */
.acceso__card:not(.es-formulario){
  background:
    linear-gradient(180deg, rgba(250,252,255,.6) 0%, rgba(250,252,255,0) 32%),
    linear-gradient(90deg, rgba(250,252,255,.97) 0%, rgba(250,252,255,.88) 34%, rgba(250,252,255,.5) 66%, rgba(250,252,255,.28) 100%),
    url("assets/hero-clean.jpg") right 40% / cover no-repeat;
  background-color:#F7FAFE;
}
.portales{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; text-align:left; }
.portal{
  position:relative; overflow:hidden; display:flex; flex-direction:column; width:100%;
  padding:0; border:0; border-radius:16px;
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 18px 40px -24px rgba(22,40,72,.42), inset 0 0 0 1px rgba(255,255,255,.95);
  font:inherit; color:inherit; text-align:left; text-decoration:none; cursor:pointer;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}
/* al pasar por encima (o con el teclado): la tarjeta crece con un pequeño
   rebote y se enciende en el azul de la marca. El borde es ::after, con máscara
   para pintar sólo el filo.                                              */
.portal::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; pointer-events:none;
  background:linear-gradient(135deg, #8FBCFF, #1D6DF0 40%, #1450BE 65%, #5B9BFF);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .35s ease;
}
.portal:hover, .portal:focus-visible{
  z-index:1; outline:none; transform:translateY(-6px) scale(1.035);
  box-shadow:0 28px 52px -24px rgba(20,80,190,.45), 0 0 0 5px rgba(29,109,240,.12);
}
.portal:hover::after, .portal:focus-visible::after{ opacity:1; }
/* la franja del logo: a todo lo ancho, sobre el blanco esmerilado de la tarjeta y con una línea fina debajo */
.portal__logo{
  position:relative; overflow:hidden; display:grid; place-items:center; height:118px; padding:18px 20px;
  background:transparent; box-shadow:inset 0 -1px 0 rgba(18,40,78,.06);
  transition:box-shadow .35s ease;
}
/* el destello azul que cruza el logo al pasar por encima */
.portal__logo::after{
  content:""; position:absolute; top:-20%; bottom:-20%; left:-60%; width:45%; pointer-events:none;
  background:linear-gradient(100deg, rgba(255,255,255,0), rgba(190,215,255,.75) 50%, rgba(255,255,255,0));
  transform:skewX(-18deg); opacity:0;
}
.portal:hover .portal__logo, .portal:focus-visible .portal__logo{ box-shadow:inset 0 -1px 0 rgba(29,109,240,.45); }
.portal:hover .portal__logo::after, .portal:focus-visible .portal__logo::after{ animation:brilloAzul .9s ease forwards; }
@keyframes brilloAzul{
  0%{ left:-60%; opacity:0; }
  15%{ opacity:1; }
  100%{ left:120%; opacity:0; }
}
/* el tope va en píxeles: dentro de la rejilla, un max-height en % no limita
   y los logos altos se salían de su franja (118 − 2×18 de relleno ≈ 80) */
.portal__logo img{
  display:block; max-width:100%; max-height:80px; width:auto; height:auto; object-fit:contain;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1), filter .35s ease;
}
.portal:hover .portal__logo img, .portal:focus-visible .portal__logo img{
  transform:scale(1.08); filter:drop-shadow(0 6px 12px rgba(20,80,190,.25));
}
.portal__texto{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; padding:16px 18px 0; }
.portal__quien{
  font-family:var(--nav); font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#8A94A5;
}
.portal__nombre{ margin-top:2px; font-family:var(--sans); font-size:16.5px; font-weight:700; letter-spacing:-.01em; color:#0E1626; transition:color .3s ease; }
.portal:hover .portal__nombre, .portal:focus-visible .portal__nombre{ color:#1450BE; }
.portal__desc{ font-size:13px; line-height:1.45; color:#63708A; }
.portal__pie{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding:14px 18px 16px; min-height:32px; }
.portal__web{ min-width:0; font-family:var(--nav); font-size:12.5px; font-weight:500; color:#5A6577; }
.portal__flecha{
  flex:0 0 auto; display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:#fff; color:#16233A; box-shadow:inset 0 0 0 1px rgba(18,40,78,.14);
  transition:transform .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease;
}
.portal__flecha svg{ width:15px; height:15px; }
.portal:hover .portal__flecha, .portal:focus-visible .portal__flecha{
  transform:translateX(3px); background:linear-gradient(135deg, #4A8DF5, #1D6DF0 55%, #1450BE); color:#fff; box-shadow:none;
}
.portal--dentro .portal__web{ font-weight:600; color:#16233A; }
/* los que aún no tienen web: se ven, pero no llevan a ninguna parte */
.portal--pronto{ cursor:default; }
.portal--pronto .portal__nombre{ color:#44506A; }
.portal__pronto{
  display:inline-block; padding:2px 9px; border-radius:999px; background:#EEF1F6; color:#6E7A8C;
  font-size:11.5px; font-weight:500;
}
.acceso__guia{ margin:18px auto 2px; max-width:58ch; font-size:13.5px; line-height:1.55; color:#63708A; }
.acceso__guia b{ font-weight:600; color:#0E1626; }
/* la nota a mano del selector («Tu próximo nivel empieza aquí.»), como las
   de Recursos y Contacto: arriba a la derecha y ladeada; en pantallas
   estrechas pasa a su sitio, centrada, bajo la entradilla               */
.acceso__mano{
  position:absolute; z-index:2; top:38px; right:64px; margin:0;
  font-family:"Caveat", var(--serif); font-weight:600; color:var(--blue);
  font-size:28px; line-height:1.02; text-align:left; white-space:nowrap;
  transform:rotate(-8deg); transform-origin:left bottom; pointer-events:none;
}
/* el trazo con medida fija: con el ancho en % se estiraba y cruzaba el título */
.acceso__mano svg{ display:block; width:170px; height:auto; margin:4px 0 0 10px; }
@media (max-width:1100px){
  .acceso__mano{
    position:static; width:fit-content; max-width:100%; margin:6px auto 18px;
    font-size:23px; text-align:center; white-space:normal; transform:rotate(-2deg);
  }
  .acceso__mano br{ display:none; }
  .acceso__mano svg{ width:170px; margin:2px auto 0; }
}
.acceso__arriba{ text-align:left; margin:-6px 0 14px; }
.acceso__volver{
  display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px 0 10px;
  border:0; border-radius:999px; background:rgba(18,40,78,.06); color:#5E7391;
  font-family:var(--nav); font-size:13px; cursor:pointer; transition:background .25s ease, color .25s ease;
}
.acceso__volver svg{ width:15px; height:15px; }
.acceso__volver:hover{ background:rgba(29,109,240,.12); color:var(--blue); }

@media (max-width:1100px){
  .portales{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .portales{ grid-template-columns:1fr; gap:12px; }
  .portal__logo{ height:96px; padding:14px 18px; }
  .portal__logo img{ max-height:64px; }
  .portal__texto{ padding:14px 16px 0; }
  .portal__pie{ padding:12px 16px 14px; }
  .acceso__guia{ margin-top:14px; font-size:13px; }
}
@media (prefers-reduced-motion:reduce){
  .portal, .portal__flecha, .portal__logo img, .acceso__card{ transition:none; }
  /* sin movimiento: se queda el azul, pero ni crece ni cruza el destello */
  .portal:hover, .portal:focus-visible{ transform:none; }
  .portal:hover .portal__logo img, .portal:focus-visible .portal__logo img{ transform:none; }
  .portal__logo::after{ display:none; }
}
.acceso.is-open .acceso__card{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.acceso__close{
  position:absolute; right:14px; top:14px; width:36px; height:36px;
  display:grid; place-items:center; border:0; border-radius:50%;
  background:rgba(18,40,78,.06); color:#5E7391; cursor:pointer;
  transition:background .25s ease, color .25s ease;
}
.acceso__close svg{ width:17px; height:17px; }
.acceso__close:hover{ background:rgba(29,109,240,.12); color:var(--blue); }

.acceso__marca{ margin-bottom:18px; }
.acceso__marca img{ height:19px; width:auto; display:inline-block; }
.acceso__titulo{
  margin:0 0 6px; font-family:var(--sans); font-weight:700;
  font-size:clamp(21px,1.8vw,26px); letter-spacing:-.018em; color:#0E1626;
}
.acceso__lead{ margin:0 0 clamp(18px,2vw,26px); font-size:14.5px; color:#63708A; }

.acceso__form{ display:flex; flex-direction:column; gap:12px; text-align:left; }
.acceso__campo{ display:flex; flex-direction:column; gap:6px; }
.acceso__campo span{
  font-family:var(--nav); font-size:12px; font-weight:500;
  letter-spacing:.04em; color:#63708A;
}
.acceso__campo input{
  height:48px; padding:0 16px; border-radius:13px;
  border:1px solid rgba(18,40,78,.15); background:rgba(255,255,255,.85);
  font-family:var(--sans); font-size:15.5px; color:#16233A;
  transition:border-color .22s ease, box-shadow .22s ease;
}
.acceso__campo input::placeholder{ color:#A6B0C2; }
.acceso__campo input:focus{
  outline:none; border-color:rgba(29,109,240,.55);
  box-shadow:0 0 0 4px rgba(29,109,240,.12);
}
.acceso__campo input[aria-invalid="true"]{ border-color:rgba(232,0,95,.6); }
.acceso__error{
  margin:0; font-size:13.5px; color:#E8005F;
}
.acceso__error[hidden]{ display:none; }

.acceso__entrar{
  margin-top:4px; height:50px; border:0; border-radius:999px;
  background:var(--blue); color:#fff; cursor:pointer;
  font-family:var(--nav); font-size:16px; font-weight:600;
  box-shadow:0 12px 26px rgba(29,109,240,.3);
  transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.acceso__entrar:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(29,109,240,.38); }
.acceso__entrar[disabled]{ opacity:.75; cursor:default; transform:none; }
/* mientras comprueba, la palabra deja sitio a una ruedecita */
.acceso__entrar.esta-entrando span{ visibility:hidden; }
.acceso__entrar.esta-entrando::after{
  content:""; position:absolute; width:19px; height:19px; margin:-9px 0 0 -9px;
  left:50%; top:50%; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:girando .7s linear infinite;
}
.acceso__entrar{ position:relative; }
@keyframes girando{ to{ transform:rotate(360deg); } }

.acceso__olvido{
  border:0; background:none; cursor:pointer; padding:2px 0;
  font-family:var(--nav); font-size:13.5px; color:#6E7A8C;
  transition:color .22s ease;
}
.acceso__olvido:hover{ color:var(--blue); }

/* lo que sale al entrar */
.acceso__hecho{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.acceso__hecho[hidden]{ display:none; }
.acceso__tic{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:rgba(18,197,107,.14); color:var(--green);
  animation:ticEntra .45s cubic-bezier(.2,.9,.3,1.4);
}
.acceso__tic svg{ width:26px; height:26px; }
@keyframes ticEntra{ from{ transform:scale(.6); opacity:0; } to{ transform:none; opacity:1; } }
.acceso__hecho-tit{
  margin:2px 0 0; font-family:var(--sans); font-weight:700;
  font-size:19px; color:#0E1626;
}
.acceso__hecho-txt{ margin:0; font-size:14.5px; line-height:1.5; color:#63708A; max-width:30ch; }

.acceso__aviso{
  margin:clamp(16px,2vw,22px) 0 0;
  font-size:11.5px; line-height:1.45; color:#9AA6BC;
}
a.acceso__olvido{ text-decoration:none; text-align:center; }
.acceso__otros{
  display:flex; flex-direction:column; gap:8px;
  margin-top:clamp(14px,2vw,20px); padding-top:clamp(14px,2vw,18px);
  border-top:1px solid rgba(18,40,78,.1);
}
.acceso__otros a{ font-size:13.5px; line-height:1.4; color:#63708A; text-decoration:none; }
.acceso__otros b{ color:var(--blue); font-weight:600; }
.acceso__otros a:hover b{ text-decoration:underline; }

/* formulario de contacto: la trampa para robots y el error del envío */
.form__trampa{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.form__error{
  margin:0; padding:10px 12px; border-radius:10px;
  background:rgba(232,0,95,.08); color:#A80047; font-size:14px; line-height:1.4;
}
.form__error[hidden]{ display:none; }
.form__send[disabled]{ opacity:.75; cursor:default; }

@media (prefers-reduced-motion:reduce){
  .acceso__entrar.esta-entrando::after{ animation:none; }
  .acceso__tic{ animation:none; }
}


/* =====================================================================
   MÓVIL: repaso de diseño
   Todo lo de este bloque vive dentro de (max-width:860px), así que el
   escritorio no lo ve. Lo único fuera son las dos piezas nuevas, que en
   escritorio simplemente no se pintan.
   ===================================================================== */
.serv-movil, .carril-puntos, .fondo-movil, .portada-movil,
.rec-movil, .rec-movil__cerrar{ display:none; }

@media (max-width:860px){

  /* ---- Un solo fondo para toda la página ----
     Cada sección recortaba su trozo de la escena a lo alto del móvil y se
     veían franjas grises sueltas. Ahora la escena sin persona va fija detrás
     de todo, a la altura de la pantalla, y el guion la desplaza de lado a
     medida que se baja: se empieza en la niebla y se acaba en las gradas. */
  .fondo-movil{
    display:block; position:fixed; left:0; top:0; z-index:-1;
    width:100%; height:100vh; height:100lvh;
    overflow:hidden; pointer-events:none;
  }
  .fondo-movil__imagen{
    height:100%;
    width:max(100vw, 100vh * 1672 / 941);
    width:max(100vw, 100lvh * 1672 / 941);
    background:url("assets/hero-clean.jpg") center / cover no-repeat;
    will-change:transform;
  }
  /* velo para que el texto se lea igual encima de la escena */
  .fondo-movil::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.42) 100%);
  }
  .hero{ background:transparent; }

  /* ---- Sin recuadro de foco al tocar ----
     Al cerrar una ficha, el foco vuelve a la hoja o al punto que la abrió
     y el navegador le pintaba un recuadro negro alrededor. Con el dedo no
     hace falta: sólo se enseña (en azul) si se está usando el teclado. */
  html:not(.con-teclado) :focus-visible{ outline:none; }
  html.con-teclado .serv-movil__hoja:focus-visible,
  html.con-teclado .portada-movil__punto:focus-visible,
  html.con-teclado .portada-movil__camino:focus-visible{
    outline:2px solid var(--blue); outline-offset:3px; border-radius:10px;
  }

  /* ---- Portada: la maqueta vertical ----
     La escena (figura, camino y puntos ya pintados) mide 850 x 1850 y todo
     lo de encima se coloca en "píxeles de la maqueta": --p es lo que mide
     uno de ellos a lo ancho de la pantalla, así nada se descoloca en
     ningún móvil. */
  .hero{
    --p:calc(100vw / 850);
    display:block; min-height:0; padding:0; overflow:visible;
    container-type:inline-size;
  }
  @supports (width:1cqw){ .hero{ --p:calc(100cqw / 850); } }
  .stage, .path-links{ display:none; }

  /* la escena va subida (--sube, en píxeles de la maqueta) para que la
     figura llegue con la cabeza justo debajo de "Diseña tu plan"; todo lo
     que va pegado a la escena (puntos, "Elige tu camino" y la barra) sube
     con ella, y la portada se acorta lo mismo */
  .portada-movil{
    --sube:165;
    display:block; position:relative; width:100%; aspect-ratio:850 / 1565;
  }
  /* los logos, justo debajo de la barra, como en la referencia */
  .hero .trust{ padding-top:14px; }
  .portada-movil__escena{
    position:absolute; inset:0; overflow:hidden;
    /* por abajo se funde con el fondo del resto de la página */
    -webkit-mask-image:linear-gradient(to bottom, #000 93%, transparent);
    mask-image:linear-gradient(to bottom, #000 93%, transparent);
  }
  .portada-movil__foto{
    position:absolute; left:0; top:calc(var(--p) * -1 * var(--sube));
    width:100%; height:auto; display:block;
  }

  /* los tres puntos se pueden tocar, laten y a cada latido sale un anillo */
  .portada-movil__punto{
    --x:362; --y:1365; --rx:86; --ry:34; --rgb:244,22,107;
    --pl:27.5; --pt:47.5; --pw:45; --col:#F50276; --retraso:0s;
    position:absolute;
    left:calc(var(--p) * (var(--x) - 50)); top:calc(var(--p) * (var(--y) - var(--sube) - 112));
    width:calc(var(--p) * 100); height:calc(var(--p) * 124);
    padding:0; border:0; background:none; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .portada-movil__punto::after{
    content:""; position:absolute; pointer-events:none;
    left:calc(var(--p) * (50 - var(--rx))); top:calc(var(--p) * (112 - var(--ry)));
    width:calc(var(--p) * var(--rx) * 2); height:calc(var(--p) * var(--ry) * 2);
    border-radius:50%;
    border:1.5px solid rgba(var(--rgb),.75);
    background:radial-gradient(closest-side, rgba(var(--rgb),.22), rgba(var(--rgb),0) 70%);
    animation:pulse 2.8s cubic-bezier(.22,.61,.36,1) var(--retraso) infinite;
  }
  /* un puntero igual que el pintado, justo encima: late creciendo desde la
     punta y nunca baja de su tamaño, así el de la imagen no asoma */
  .portada-movil__pin{
    position:absolute; z-index:1; overflow:visible;
    left:calc(var(--p) * var(--pl)); top:calc(var(--p) * var(--pt));
    width:calc(var(--p) * var(--pw)); height:calc(var(--p) * var(--pw) * 38 / 24);
    fill:var(--col);
    transform-origin:50% 100%;
    animation:pinLate 2.8s ease-out var(--retraso) infinite;
  }
  @keyframes pinLate{
    0%  { transform:scale(1);    filter:drop-shadow(0 0 0 rgba(var(--rgb),0)); }
    9%  { transform:scale(1.17); filter:drop-shadow(0 2px 6px rgba(var(--rgb),.55)); }
    19% { transform:scale(1.02); }
    28% { transform:scale(1.1);  filter:drop-shadow(0 2px 5px rgba(var(--rgb),.4)); }
    46% { transform:scale(1);    filter:drop-shadow(0 0 0 rgba(var(--rgb),0)); }
    100%{ transform:scale(1); }
  }
  .portada-movil__punto--verde{
    --x:495; --y:1232; --rx:70; --ry:25; --rgb:18,197,107;
    --pl:32.65; --pt:56.25; --pw:37.5; --col:#03D27D; --retraso:.9s;
  }
  .portada-movil__punto--azul{
    --x:569; --y:1134; --rx:49; --ry:18; --rgb:29,109,240;
    --pl:36; --pt:70.5; --pw:30; --col:#0359FA; --retraso:1.8s;
  }
  .portada-movil__escena.esta-ida .portada-movil__punto{ pointer-events:none; }

  .portada-movil__baja{
    position:absolute; left:50%; top:calc(var(--p) * (1581 - var(--sube)));
    transform:translate(-50%,-50%);
    display:flex; align-items:center; gap:calc(var(--p) * 16);
    white-space:nowrap; text-decoration:none;
    font-family:var(--sans); font-weight:400; font-size:calc(var(--p) * 24);
    color:#56627F;
  }
  .portada-movil__baja svg{
    width:calc(var(--p) * 27); height:calc(var(--p) * 36); color:var(--blue);
    animation:bajaFlecha 2.4s ease-in-out infinite;
  }
  @keyframes bajaFlecha{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(calc(var(--p) * 6)); } }

  .portada-movil__caminos{
    position:absolute; left:calc(var(--p) * 62); top:calc(var(--p) * (1627 - var(--sube)));
    width:calc(var(--p) * 728); height:calc(var(--p) * 86);
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
    border-radius:999px;
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(10px) saturate(130%); -webkit-backdrop-filter:blur(10px) saturate(130%);
    box-shadow:0 calc(var(--p) * 18) calc(var(--p) * 40) calc(var(--p) * -16) rgba(32,62,120,.28),
               inset 0 0 0 1px rgba(255,255,255,.85);
  }
  .portada-movil__camino{
    --rgb:244,22,107;
    position:relative; display:flex; align-items:center; justify-content:center;
    gap:calc(var(--p) * 20); padding:0; border:0; background:none; cursor:pointer;
    font-family:var(--sans); font-weight:500; font-size:calc(var(--p) * 25.5); letter-spacing:-.005em;
    color:rgb(var(--rgb));
    -webkit-tap-highlight-color:transparent;
    transition:transform .25s cubic-bezier(.2,.8,.3,1);
  }
  .portada-movil__camino:active{ transform:scale(.95); }
  .portada-movil__camino::before{
    content:""; flex:0 0 auto;
    width:calc(var(--p) * 18); height:calc(var(--p) * 18); border-radius:50%;
    background:rgb(var(--rgb)); box-shadow:0 0 0 calc(var(--p) * 6) rgba(var(--rgb),.22);
  }
  .portada-movil__camino + .portada-movil__camino::after{
    content:""; position:absolute; left:0; top:50%;
    width:calc(var(--p) * 2.4); height:calc(var(--p) * 44); border-radius:2px;
    transform:translate(-50%,-50%); background:rgba(110,138,196,.55);
  }
  /* en la maqueta los dos últimos van un poco a la derecha de su tercio */
  .portada-movil__camino--verde{ --rgb:16,199,106; padding-left:calc(var(--p) * 9); }
  .portada-movil__camino--azul{ --rgb:29,85,240; padding-left:calc(var(--p) * 18); }

  /* el texto, encima de la escena y en el sitio de la maqueta */
  .hero__content{
    position:absolute; left:0; right:0; top:0; z-index:20;
    width:auto; display:block;
    padding:calc(var(--p) * 149) calc(var(--p) * 62) 0;
  }
  .hero .eyebrow{
    gap:calc(var(--p) * 26); margin:0;
    font-size:calc(var(--p) * 23.4); line-height:normal; letter-spacing:.245em;
    color:#4A5877; font-weight:500;
  }
  .hero .eyebrow i{ width:calc(var(--p) * 84); height:calc(var(--p) * 5); border-radius:9px; background:#0D58F2; }
  .claim{ margin:calc(var(--p) * 32) 0 0; gap:calc(var(--p) * 32); }
  .claim__strong{
    font-size:calc(var(--p) * 96); line-height:.9375; letter-spacing:-.024em;
    color:#0D58F2;
  }
  .claim__ink{ color:#0B1020; }
  .claim__lead{
    font-size:calc(var(--p) * 41.2); line-height:1.165; letter-spacing:-.012em;
    color:#111827;
  }
  .claim__sub{
    height:calc(var(--p) * 40);
    margin:calc(var(--p) * 28) 0 0 calc(var(--p) * -2);
    gap:calc(var(--p) * 15);
    font-size:calc(var(--p) * 21); letter-spacing:.258em;
    color:#3A4866; text-shadow:none;
  }
  .claim__sub::before{
    box-sizing:content-box;
    width:calc(var(--p) * 20); height:calc(var(--p) * 20);
    border:calc(var(--p) * 10) solid rgba(29,109,240,.26); background-clip:padding-box;
    background-color:#0D58F2;
  }
  .claim__cta{
    display:flex; align-items:center; justify-content:flex-start;
    width:calc(var(--p) * 352); height:calc(var(--p) * 94);
    margin:calc(var(--p) * 37) 0 0 calc(var(--p) * 1);
    padding:0 0 0 calc(var(--p) * 49.5); gap:calc(var(--p) * 34);
    border:1px solid rgba(29,100,240,.42); background:rgba(255,255,255,.5);
    font-family:var(--sans); font-weight:600; font-size:calc(var(--p) * 27.3); color:#0D58F2;
    box-shadow:0 calc(var(--p) * 16) calc(var(--p) * 34) calc(var(--p) * -14) rgba(32,62,120,.3);
  }
  .claim__cta svg{ width:calc(var(--p) * 35); height:calc(var(--p) * 35); }

  .services::before, .services::after,
  .about::before, .about::after,
  .recursos::before, .recursos::after,
  .contact::before, .contact::after{ display:none; }

  /* ---- Servicios: la escena no arranca en móvil y quedaba en blanco;
          en su lugar, las tres hojas en un carril ---- */
  /* en móvil la cabecera sólo tapa la portada: las demás secciones no
     necesitan reservar su alto arriba, que dejaba huecos de 150 px */
  .services{ padding:44px 0 clamp(34px,6vh,56px); }
  .about, .recursos{ padding-top:44px; }
  .contact{ padding-top:44px; }
  .escena-caja, .escena-pista{ display:none; }
  .serv-movil{ display:block; }
  .serv-movil__cab{ padding:0 var(--shell); }
  .serv-movil__titulo{
    margin:12px 0 12px; font-family:var(--sans); font-weight:700;
    font-size:clamp(26px,7.2vw,34px); line-height:1.12; letter-spacing:-.022em; color:#0E1626;
  }
  .serv-movil__titulo em{ display:block; font-style:normal; color:var(--blue); }
  .serv-movil__lead{ margin:0; font-size:15px; line-height:1.55; color:#46536B; }
  .serv-movil__lead u{
    text-decoration-color:rgba(29,109,240,.55); text-decoration-thickness:2px; text-underline-offset:3px;
  }
  /* las tres hojas juntas, colgadas de una cuerda de lado a lado como en
     el tendedero del escritorio. Todo se mide en cqw (centésimas del ancho
     del carril): la cuerda es un SVG de 100 de ancho, así que la altura de
     cada pinza sobre ella es un número fijo en cualquier móvil. */
  .serv-movil__carril{
    position:relative; container-type:inline-size;
    display:flex; align-items:flex-start;
    margin-top:22px; padding:0 1% 4cqw;
  }
  .serv-movil__cuerda{
    position:absolute; left:0; top:0; z-index:2;
    width:100%; height:auto; aspect-ratio:100 / 16;
    overflow:visible; pointer-events:none; fill:none; stroke-linecap:round;
  }
  .serv-movil__hoja{
    --r:-2.4deg;
    flex:0 0 33cqw; position:relative; z-index:1;
    margin-top:3.2cqw;
    padding:0; border:0; background:none; cursor:pointer;
    /* gira desde la pinza, que es por donde cuelga */
    transform-origin:50% 2.4cqw;
    transform:rotate(var(--r));
    animation:hojaMece 5.6s ease-in-out infinite alternate;
    filter:drop-shadow(0 12px 16px rgba(24,54,104,.17));
    transition:scale .3s cubic-bezier(.2,.8,.3,1);
    -webkit-tap-highlight-color:transparent;
  }
  .serv-movil__hoja + .serv-movil__hoja{ margin-left:-1cqw; }
  .serv-movil__hoja:nth-of-type(2){ --r:1.8deg; margin-top:6.67cqw; animation-delay:-1.9s; }
  .serv-movil__hoja:nth-of-type(3){ --r:-1.3deg; margin-top:9.33cqw; animation-delay:-3.7s; }
  .serv-movil__hoja img{ display:block; width:100%; height:auto; }
  .serv-movil__hoja:active{ scale:.96; }
  @keyframes hojaMece{
    from{ transform:rotate(calc(var(--r) - .9deg)); }
    to  { transform:rotate(calc(var(--r) + .9deg)); }
  }
  .serv-movil__pista{
    margin:10px var(--shell) 0; text-align:center;
    font-family:var(--nav); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#8FA2BE;
  }

  /* los puntos que acompañan a los carriles */
  .carril-puntos{ display:flex; justify-content:center; gap:7px; margin-top:8px; }
  .carril-puntos i{
    width:7px; height:7px; border-radius:4px; background:rgba(29,109,240,.22);
    transition:width .3s ease, background .3s ease;
  }
  .carril-puntos i.is-on{ width:22px; background:var(--blue); }

  /* ---- Nosotros · el camino: una línea une los cuatro pasos ---- */
  .about__steps{ position:relative; row-gap:24px; }
  .about__steps::before{
    content:""; position:absolute; left:9px; top:16px; bottom:22px; width:2px; border-radius:2px;
    background:linear-gradient(180deg, rgba(29,109,240,.5), rgba(29,109,240,.08));
  }
  .step__dot{ z-index:1; }

  /* ---- Nosotros · el equipo: dos por fila, que a una sola columna eran
          ocho tarjetas altísimas una detrás de otra ---- */
  .team__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .member__card{ border-radius:14px; }
  .member__foto{ height:clamp(112px,31vw,150px); }
  .member__ini{ font-size:26px; }
  .member__body{ padding:10px 10px 12px; }
  .member__name{ font-size:13.5px; line-height:1.22; }
  .member__flag{ width:15px; height:11px; }
  .member__role{ margin-top:5px; gap:5px; font-size:11.5px; line-height:1.25; }
  .member__role svg{ width:13px; height:13px; }
  .member__desc{
    margin-top:6px; font-size:12px; line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  /* el "+" pasa a la esquina de la foto: abajo pisaba el texto */
  .member__more{
    top:8px; right:8px; bottom:auto; width:28px; height:28px; font-size:17px;
    background:rgba(255,255,255,.92); box-shadow:0 4px 12px rgba(16,38,72,.14);
  }

  /* ---- Recursos, plegado en un banner ----
     La sección entera eran casi dos pantallas de fichas: de salida sólo se
     ve un banner con su botón, y al pulsarlo (o al llegar desde "Recursos"
     en el menú) se despliega todo en su sitio. */
  .recursos:not(.esta-abierta) .recursos__inner{ display:none; }
  .recursos:not(.esta-abierta){ padding-bottom:18px; }
  .recursos:not(.esta-abierta) .rec-movil{ display:grid; }
  .rec-movil{
    grid-template-columns:92px minmax(0,1fr); align-items:center; gap:14px;
    padding:14px; border-radius:20px;
    background:rgba(255,255,255,.86);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    box-shadow:0 18px 40px -26px rgba(22,40,72,.55), inset 0 0 0 1px rgba(18,40,78,.06);
    animation:recEntra .45s cubic-bezier(.2,.8,.3,1) both;
  }
  /* ilustración propia (assets/recursos/banner-recursos.svg): la niebla y el
     camino de la web con un abanico de fichas como las de la sección */
  .rec-movil__foto{
    width:92px; height:92px; border-radius:16px; display:block;
    box-shadow:inset 0 0 0 1px rgba(18,40,78,.06);
  }
  .rec-movil .eyebrow{ flex-direction:row; align-items:center; gap:8px; margin:0 0 6px; font-size:10.5px; }
  .rec-movil .eyebrow i{ width:18px; }
  .rec-movil__titulo{
    margin:0; font-family:var(--sans); font-weight:700;
    font-size:16px; line-height:1.28; letter-spacing:-.012em; color:#0E1626;
  }
  .rec-movil__boton, .rec-movil__cerrar{
    display:flex; align-items:center; justify-content:center; gap:8px;
    height:44px; border-radius:999px; cursor:pointer;
    font-family:var(--sans); font-weight:600; font-size:14.5px;
    -webkit-tap-highlight-color:transparent;
    transition:transform .25s cubic-bezier(.2,.8,.3,1);
  }
  .rec-movil__boton{
    grid-column:1 / -1; border:0;
    background:var(--blue); color:#fff;
    box-shadow:0 12px 26px -12px rgba(29,109,240,.7);
  }
  .rec-movil__boton svg, .rec-movil__cerrar svg{ width:16px; height:16px; }
  .rec-movil__boton:active, .rec-movil__cerrar:active{ transform:scale(.97); }
  .recursos.esta-abierta .rec-movil__cerrar{
    display:flex; margin:22px auto 0; padding:0 22px;
    border:1px solid rgba(29,109,240,.4); background:rgba(255,255,255,.8); color:var(--blue);
  }
  .recursos.esta-abierta .recursos__inner{ animation:recEntra .5s cubic-bezier(.2,.8,.3,1) both; }
  @keyframes recEntra{ from{ opacity:0; transform:translateY(10px); } }

  /* ---- Recursos: los filtros, en una sola fila que se desliza ---- */
  .recursos__filtros{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    margin-inline:calc(-1 * var(--shell)); padding:2px var(--shell) 6px;
    -webkit-overflow-scrolling:touch;
  }
  .recursos__filtros::-webkit-scrollbar{ display:none; }
  .recursos__filtros .chip{ flex:0 0 auto; white-space:nowrap; }
  /* sin esto la fila de filtros, al no partirse, obligaba a la rejilla a
     ensancharse hasta caber entera y todo se salía por la derecha */
  .rec2{ grid-template-columns:minmax(0,1fr); }
  .rec2 > *{ min-width:0; }

  /* ---- Contacto: la franja de la estela no se ve en móvil, pero seguía
          ocupando su alto y dejaba un hueco ---- */
  .cont__hueco{ display:none; }

  /* ---- Testimonios: un carril que se desliza en vez de nueve tarjetas
          apiladas ---- */
  .voces__mano svg{ display:none; }
  .voces__rejilla{
    display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:var(--shell);
    margin-inline:calc(-1 * var(--shell)); padding:14px var(--shell) 22px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .voces__rejilla::-webkit-scrollbar{ display:none; }
  .voces__rejilla .voz{ flex:0 0 84%; scroll-snap-align:center; }
  .voces{ grid-template-areas:"cabecera" "destacada" "rejilla" "puntos" "cifras"; }
  .voces .carril-puntos{ grid-area:puntos; margin:0 0 14px; }

  /* las cifras, como cuatro fichas en vez de sueltas con su puntito */
  .cifra__punto{ display:none; }
  .cifras{ gap:10px; padding-top:10px; }
  .cifra{
    padding:14px 8px 12px; border-radius:14px;
    background:rgba(255,255,255,.82);
    box-shadow:0 10px 22px -16px rgba(22,40,72,.45), inset 0 0 0 1px rgba(18,40,78,.06);
  }
  .cifra__ico{ width:22px; }
  .cifra__dato{ font-size:16px; }
  .cifra__texto{ font-size:12px; }

  /* ---- El pie ---- */
  /* el logotipo se estiraba a todo el ancho: su columna flexible estira a
     los hijos, y en escritorio no se notaba porque la columna es estrecha */
  .pie__marca{ align-items:flex-start; }
  .pie__logo{ height:24px; width:auto; }
  /* la regla general de enlaces del pie les quitaba el centrado a los
     iconos y el relleno al botón */
  .pie .pie__red{ display:grid; place-items:center; padding:0; }
  .pie .pie__boton{ display:inline-flex; height:44px; padding:0 16px; gap:8px; font-size:13.5px; }
  .pie .pie__arriba{ display:grid; place-items:center; padding:0; }
  .pie{ margin-top:30px; padding-top:26px; }
  /* las cuatro columnas de enlaces, de dos en dos */
  .pie__inner{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px 18px; }
  .pie__marca, .pie__claim{ grid-column:1 / -1; }
  .pie__inner > * + *{ padding-top:0; border-top:0; }
  .pie__claim{ padding-bottom:20px; border-bottom:1px solid rgba(18,40,78,.09); }
  .pie__col ul{ flex-direction:column; gap:2px; white-space:normal; }
  .pie__col li + li{ padding-left:0; }
  .pie__col li + li::before{ display:none; }
  .pie__tit{ white-space:normal; }
  .pie__texto{ white-space:normal; }
}