/* ==========================================================================
   Cuida Red — Bienestar que llega a tu hogar
   Paleta: Manual de Marca. Tipografía: Fraunces + Instrument Sans.
   Comfortaa queda reservada EXCLUSIVAMENTE al logo, para que no pierda
   identidad al repetirse en todo el sitio.
   ========================================================================== */

:root{
  --azul:        #345FBC;
  --azul-claro:  #6898FF;
  --celeste:     #47CED6;
  --naranja:     #FF9149;

  --azul-900:    #0E2046;
  --azul-800:    #16305F;
  --azul-700:    #23488F;

  --tinta:       #121D30;
  --tinta-70:    #4B5872;
  /* Primera parte de los títulos. Con --tinta-45 quedaba en 3,6:1 sobre
     blanco y se perdía; este gris da 5,9:1 y sigue distinto del remate. */
  --tinta-60:    #56627A;
  --tinta-45:    #7C879C;
  --papel:       #FFFFFF;
  --papel-2:     #F4F7FC;
  --linea:       #E3E9F4;

  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --sombra:    0 1px 3px rgba(18,29,48,.04), 0 10px 30px rgba(18,29,48,.06);
  --sombra-lg: 0 4px 14px rgba(18,29,48,.06), 0 28px 64px rgba(18,29,48,.12);

  --wrap: 1080px;              /* columna más angosta: la página respira */
  --nav-h: 58px;

  /* Petrona: serif humanista, cálida y poco vista. Reemplaza a Fraunces,
     que además arrastraba remates feos en la "f". */
  --display: 'Petrona', Georgia, 'Times New Roman', serif;
  --texto:   'Instrument Sans', system-ui, -apple-system, sans-serif;

  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Un solo tema, claro. "only light" pide al navegador que no lo oscurezca
   a la fuerza (lo mismo dice la meta color-scheme del HTML). */
:root{ color-scheme:only light; }

*,*::before,*::after{ box-sizing:border-box; }

/* El atributo hidden tiene que ganar siempre. Cualquier regla con display
   explícito (flex, grid, inline-flex) lo pisa y el elemento sigue visible:
   es la causa de que botones y bloques aparecieran cuando no correspondía. */
[hidden]{ display:none !important; }

html{ overflow-x:clip; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 28px); }

body{
  margin:0;
  font-family:var(--texto);
  font-size:17px;
  line-height:1.65;
  color:var(--tinta);
  background:var(--papel);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

/* ---- Jerarquía tipográfica ----
   El serif carga el peso de los momentos grandes; el sans ordena el resto. */
h1,h2{
  font-family:var(--display);
  margin:0;
  letter-spacing:-.018em;
}
h1{ font-weight:700; font-size:clamp(2.4rem, 4.4vw, 3.5rem); line-height:1.06; }
/* Mismo recurso que el titular del hero: el h2 arranca en peso medio y
   apagado, y el remate va en bold y en el azul profundo. */
h2{ font-weight:500; font-size:clamp(2.1rem, 3.5vw, 2.95rem); line-height:1.12; color:var(--tinta-60); }
h2 strong{ font-weight:700; color:var(--azul-900); }
h3,h4{ font-family:var(--texto); font-weight:600; margin:0; line-height:1.3; letter-spacing:-.01em; }
p{ margin:0; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ico{ width:22px; height:22px; flex:none; }

.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--azul); color:#fff; padding:12px 20px; }
.skip:focus{ left:0; }
:focus-visible{ outline:2.5px solid var(--naranja); outline-offset:3px; border-radius:6px; }

.eyebrow{
  font-size:.74rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--azul); margin-bottom:16px;
}
.eyebrow--light{ color:var(--celeste); }
/* Cada sección estrena un color distinto en su antetítulo: la página deja
   de leerse monocroma de arriba abajo. */
#necesidad .eyebrow{ color:#C96A22; }
#servicios .eyebrow{ color:#1E8E97; }
.split-sec:nth-of-type(odd) .eyebrow{ color:#C96A22; }
#profesionales .eyebrow{ color:var(--azul-claro); }
#red .eyebrow{ color:#1E8E97; }
#equipo .eyebrow{ color:#C96A22; }

/* ===================== GRANO ===================== */
/* Le quita el acabado plástico a las imágenes grandes. */
.grain{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background-image:var(--grano);
  opacity:.19; mix-blend-mode:overlay;
}
/* En el hero la foto se está animando: el modo de mezcla obligaría a
   recomponer la capa entera en cada cuadro. Grano plano, sin blend. */
.hero .grain{ mix-blend-mode:normal; opacity:.085; }

/* ===================== VIDRIO ===================== */
.glass{
  background:rgba(255,255,255,.13);
  backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 24px 70px rgba(6,18,44,.26), inset 0 1px 0 rgba(255,255,255,.3);
}

/* ===================== BOTONES ===================== */
.btn{
  --bg:var(--azul); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--bg); color:var(--fg);
  font-family:var(--texto); font-weight:600; font-size:.97rem; letter-spacing:-.005em;
  padding:13px 24px; border:0; border-radius:999px;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
/* Sin sombra proyectada: ensuciaba el botón sobre el crema. El hover se
   resuelve con un alza mínima y el cambio de color de fondo. */
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn .ico{ width:19px; height:19px; }

/* Si es naranja, se hace clic. El texto va en azul 900: 6.8:1 de contraste. */
.btn--primary{ --bg:var(--naranja); --fg:var(--azul-900); }
.btn--primary:hover{ --bg:#FFA164; }
/* Sin desenfoque: ahora va sobre el panel sólido, no sobre la foto. */
.btn--clear{ --bg:transparent; --fg:var(--azul-900); box-shadow:inset 0 0 0 1.5px #E0D6C7; }
.btn--clear:hover{ --bg:#fff; }
.btn--sm{ padding:9px 17px; font-size:.87rem; }
.btn--lg{ padding:15px 28px; font-size:1rem; }
.btn--block{ width:100%; }

.link{ display:inline-flex; align-items:center; gap:7px; color:var(--azul); font-weight:600; text-decoration:none; }
.link i{ font-style:normal; transition:transform .2s ease; }
.link:hover i{ transform:translateX(4px); }

/* ===================== NAV ===================== */
/* Fino y discreto, como las referencias: no debe competir con el hero. */
.nav{
  position:fixed; z-index:100; top:14px; left:50%; transform:translateX(-50%);
  width:min(100% - 28px, var(--wrap));
  height:var(--nav-h);
  display:flex; align-items:center; gap:20px;
  padding:0 8px 0 20px;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,.5);
  border-radius:999px;
  box-shadow:0 6px 28px rgba(10,24,54,.12);
  transition:background .25s ease, box-shadow .25s ease;
}
.nav.is-stuck{ background:rgba(255,255,255,.92); box-shadow:0 8px 30px rgba(10,24,54,.14); }

.nav__brand img{ height:21px; width:auto; }
.nav__links{ display:flex; gap:26px; margin-left:auto; }
.nav__links a{
  font-size:.875rem; font-weight:500; text-decoration:none; color:var(--tinta-70);
  position:relative; padding:4px 0; transition:color .2s ease;
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-1px; height:1.5px;
  background:var(--celeste); border-radius:2px; transition:right .25s ease;
}
.nav__links a:hover{ color:var(--azul); }
.nav__links a:hover::after{ right:0; }
.nav__actions{ display:flex; align-items:center; gap:8px; }

.nav__toggle{
  display:none; width:38px; height:38px; border:0; border-radius:50%;
  background:transparent; cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav__toggle span{ display:block; width:17px; height:1.6px; background:var(--tinta); border-radius:2px; transition:.25s ease; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.3px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.3px) rotate(-45deg); }

.navmobile{
  position:fixed; z-index:99; top:calc(14px + var(--nav-h) + 8px); left:50%; transform:translateX(-50%);
  width:min(100% - 28px, var(--wrap));
  display:flex; flex-direction:column; gap:2px;
  background:rgba(255,255,255,.97); backdrop-filter:blur(20px);
  border-radius:var(--r-lg); padding:12px; box-shadow:var(--sombra-lg);
}
.navmobile a{ padding:13px 14px; border-radius:var(--r-sm); text-decoration:none; font-weight:500; font-size:.97rem; }
.navmobile a:hover{ background:var(--papel-2); }
.navmobile .btn{ margin-top:8px; }

/* ===================== HERO ===================== */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  /* Alto calculado para que el hero MÁS la cinta entren en la primera
     pantalla, sin tener que bajar. svh evita el salto de la barra del
     navegador en móvil. */
  /* El alto que descuenta la cinta crece con el ancho: al girar, una
     banda más ancha ocupa más alto. 1.6vw cubre el desborde en 21:9 y 32:9. */
  min-height:calc(100vh - 28px - 1.6vw);
  min-height:calc(100svh - 28px - 1.6vw);
  display:flex; align-items:center;
  /* Los espacios se comprimen con el alto de pantalla: en un notebook
     bajo el hero sigue entrando completo junto con la cinta. */
  padding:calc(var(--nav-h) + clamp(16px, 4.4vh, 44px)) 0 clamp(34px, 7vh, 72px);
  /* El borde inferior se inclina con el mismo ángulo que la cinta (1.6°,
     equivalente a 2.8vw de caída de un lado al otro). Al quedar paralelos,
     la cinta tapa la foto en todo el ancho y no asoma la recta. */
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 2.8vw), 0 100%);
}
.hero__photo{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  transform-origin:62% 45%;
  animation:respira 34s ease-in-out infinite alternate;
  will-change:transform;
}
/* Acercamiento lentísimo: 34 segundos de ida y 34 de vuelta. No se percibe
   como animación, se percibe como que la escena está viva. */
@keyframes respira{
  from{ transform:scale(1) translate3d(0,0,0); }
  to  { transform:scale(1.075) translate3d(-1.2%,-0.8%,0); }
}

/* Etiquetas que señalan la escena. Entran escalonadas y flotan muy
   despacio, cada una con su propio ritmo para que no parezcan un bloque. */
.floats{ position:absolute; inset:0; z-index:5; margin:0; padding:0; list-style:none; pointer-events:none; }
.float{
  position:absolute; left:var(--x); top:var(--y);
  display:inline-flex; align-items:center; gap:9px;
  white-space:nowrap;
  font-size:.82rem; font-weight:500; color:#fff;
  /* Fondo sólido en vez de backdrop-filter: tres desenfoques encima de una
     imagen en movimiento era lo que trababa el scroll. */
  background:rgba(16,12,8,.62);
  border:1px solid rgba(255,255,255,.22);
  padding:9px 16px; border-radius:999px;
  box-shadow:0 8px 24px rgba(10,6,2,.26);
  opacity:0;
  animation:
    entraFloat .9s cubic-bezier(.2,.8,.3,1) var(--d) forwards,
    flota var(--t) ease-in-out calc(var(--d) + .9s) infinite alternate;
}
.float__dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.float__dot--azul{    background:var(--azul-claro); box-shadow:0 0 0 4px rgba(104,152,255,.26); }
.float__dot--celeste{ background:var(--celeste);    box-shadow:0 0 0 4px rgba(71,206,214,.26); }
.float__dot--naranja{ background:var(--naranja);    box-shadow:0 0 0 4px rgba(255,145,73,.26); }

@keyframes entraFloat{
  from{ opacity:0; transform:translateY(14px) scale(.96); }
  to  { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes flota{
  from{ transform:translateY(0); }
  to  { transform:translateY(-9px); }
}

/* Con el hero fuera de pantalla no hay nada que animar: se congela todo
   y el scroll del resto de la página deja de competir por GPU. */
.hero.is-paused .hero__photo,
.hero.is-paused .hero__luz,
.hero.is-paused .float{ animation-play-state:paused; }

/* Luz que entra y se desplaza, como el sol moviéndose tras la ventana. */
/* Sin mix-blend-mode: el modo de mezcla obliga a recomponer toda la capa
   en cada cuadro y era el otro culpable del scroll trabado. */
.hero__luz{
  position:absolute; inset:-10%; z-index:2; pointer-events:none;
  background:radial-gradient(42% 56% at 72% 28%, rgba(255,222,180,.3), transparent 62%);
  animation:deriva 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes deriva{
  from{ transform:translate3d(-3%,2%,0) scale(1); opacity:.75; }
  to  { transform:translate3d(4%,-3%,0) scale(1.12); opacity:1; }
}
/* Oscurece apenas el costado derecho para que las etiquetas flotantes
   se lean sobre la foto. El texto principal va sobre el panel. */
.hero__veil{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top, rgba(34,22,14,.5), transparent 42%);
}

/* ---- Panel diagonal ----
   El corte en diagonal retoma la inclinación del isotipo de la marca. */
.hero__panel{
  position:absolute; top:0; bottom:0; left:0; z-index:3;
  width:59%;
  /* Crema, no azul. El azul es el color de clínicas y hospitales, y es
     justo la lectura que la marca quiere evitar. */
  background:linear-gradient(158deg, #FDFAF5 0%, #F7F0E6 58%, #F2E8DA 100%);
  /* El corte baja curvándose hacia la izquierda, no en diagonal recta. */
  clip-path:url(#corteHero);
}
.recortes{ position:absolute; width:0; height:0; }

/* El bloque de texto se centra DENTRO del panel, no respecto a la página:
   --texto es su ancho y --sangria el margen que lo deja al medio. El tope
   de 320px evita que en pantallas ultra anchas se vaya demasiado a la derecha. */
.hero__inner{
  position:relative; z-index:4;
  width:100%;
  --texto:min(32rem, calc(32.4vw - 64px));
  --sangria:clamp(24px, calc((59vw - var(--texto)) / 2), 320px);
}

/* El texto vive sobre el panel, así que se mantiene angosto. */
/* El ancho máximo se calcula hasta el punto más angosto de la curva
   (77,5% del panel) menos el margen izquierdo: el texto nunca la cruza,
   en ninguna resolución. */
.hero__copy{ width:var(--texto); margin-left:var(--sangria); color:var(--azul-900); }

/* Las cifras van más abajo, donde la curva ya se abrió: pueden ser más
   anchas que el titular y así no se apelmazan en una línea. */
.hero__stats{
  width:min(40rem, calc(44vw - 40px));
  list-style:none;
  /* La sangría va dentro del atajo: si se declara antes como margin-left,
     el atajo margin la pisa y las cifras se van al borde. */
  margin:clamp(16px, 3.4vh, 30px) 0 0 var(--sangria);
  padding:clamp(12px, 2vh, 18px) 0 0;
  border-top:1px solid #E8DCCB;
  display:flex; flex-wrap:wrap; gap:16px 28px;
}
.hero__stats li{ display:flex; align-items:center; gap:10px; }
.hero__stats .ico{ width:18px; height:18px; color:var(--naranja); }
.hero__stats span{ display:flex; flex-direction:column; line-height:1.2; font-size:.82rem; color:var(--tinta-45); }
.hero__stats strong{ font-size:1.1rem; font-weight:600; color:var(--azul-900); }
.chip{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--azul);
  background:#fff;
  border:1px solid var(--linea);
  padding:7px 15px; border-radius:999px; margin-bottom:clamp(12px, 2.4vh, 26px);
}
.chip__dot{
  width:7px; height:7px; border-radius:50%; background:var(--celeste);
  box-shadow:0 0 0 0 rgba(71,206,214,.7); animation:pulso 2.6s infinite;
}
@keyframes pulso{ 70%{ box-shadow:0 0 0 10px rgba(71,206,214,0); } 100%{ box-shadow:0 0 0 0 rgba(71,206,214,0); } }

/* Jerarquía dentro de la misma frase: la primera parte en peso medio y
   algo apagada, el remate en bold y en celeste de marca. El contraste de
   peso y color es lo que hace que el titular "pegue". */
.hero__title{
  font-size:clamp(2.5rem, min(6.6vw, 11vh), 5.9rem);
  line-height:.96; letter-spacing:-.03em;
  margin-bottom:clamp(10px, 2.2vh, 20px);
}
/* Tres niveles, como la referencia: arranca fuerte en el concepto,
   baja en el conector y remata acentuado en el destino. Los dos sustantivos
   de la marca —bienestar y hogar— son los que se quedan en el ojo. */
.hero__t1, .hero__t2, .hero__t3{ display:block; }
.hero__t1{ font-weight:700; color:var(--azul-900); }
/* Un tono más oscuro que antes (#8C9AB4): sobre el crema no llegaba a 3:1. */
.hero__t2{ font-weight:700; color:#6F7E99; }
.hero__t3{ font-weight:700; color:var(--azul); }
.hero__lead{ font-size:clamp(1.04rem, 1.3vw, 1.24rem); color:var(--tinta-70); max-width:38ch; margin-bottom:clamp(12px, 2.6vh, 24px); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:10px; }

/* ===================== SECCIONES ===================== */
main{ position:relative; }
.section{ position:relative; z-index:1; padding:88px 0; }
/* El navegador se salta el cálculo de lo que todavía no se ve. La altura
   estimada evita que la barra de scroll salte al ir apareciendo. */
.section, .cover, .close{ content-visibility:auto; contain-intrinsic-size:auto 900px; }
.hero{ content-visibility:visible; }
.section--alt{ background:var(--papel-2); }
.section--tight{ padding:64px 0; }


.shead{ max-width:60ch; margin:0 auto 58px; text-align:center; }
.shead h2{ margin-bottom:16px; text-wrap:balance; }
.shead__lead{ font-size:1.06rem; color:var(--tinta-70); }
.shead--light h2{ color:rgba(255,255,255,.8); }
.shead--light h2 strong{ color:#fff; }
.shead--light .shead__lead{ color:rgba(255,255,255,.72); }

/* ===================== PUERTAS ===================== */
.doors{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.door{
  display:flex; flex-direction:column; align-items:flex-start;
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--r-lg);
  padding:34px 30px 28px; text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.door:hover{ transform:translateY(-4px); box-shadow:var(--sombra-lg); border-color:transparent; }
.door__ico{
  width:54px; height:54px; border-radius:17px; margin-bottom:22px;
  display:grid; place-items:center;
  background:#EBF2FF; color:var(--azul);
}
.door:nth-child(1) .door__ico{ background:#FFF0E2; color:#C96A22; }
.door:nth-child(2) .door__ico{ background:#E6F7F8; color:#1E8E97; }
.door__ico .ico{ width:25px; height:25px; }
.door h3{ font-size:1.2rem; color:var(--azul-900); margin-bottom:10px; }
.door p{ color:var(--tinta-70); font-size:.97rem; margin-bottom:20px; }
.door__go{ margin-top:auto; color:var(--azul); font-weight:600; font-size:.92rem; display:inline-flex; gap:7px; }
.door__go i{ font-style:normal; transition:transform .2s ease; }
.door:hover .door__go i{ transform:translateX(4px); }

/* ===================== SERVICIOS ===================== */
/* Sin caja: foto arriba con una esquina más redonda, una línea del color
   del servicio, número y título. El acento rota naranjo, verde azulado,
   azul, como en el resto de la página. */
.cards4{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px 24px; }
.svc{ --acento:var(--azul); display:flex; flex-direction:column; }
.svc:nth-child(3n+1){ --acento:#C96A22; }
.svc:nth-child(3n+2){ --acento:#1E8E97; }
.svc__foto{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:44px 14px 14px 14px;
  background:var(--papel-2);
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease;
}
.svc:hover .svc__foto{ transform:translateY(-4px); box-shadow:var(--sombra-lg); }
.svc h3{
  display:flex; align-items:baseline; gap:10px;
  margin-top:20px; padding-top:18px; border-top:1.5px solid var(--acento);
  font-size:1.12rem; color:var(--azul-900); margin-bottom:10px;
}
.svc__n{ flex:none; font-size:.82rem; font-weight:700; letter-spacing:.04em; color:var(--acento); }
.svc p{ font-size:.95rem; color:var(--tinta-70); }

/* Tarjeta con ícono: la portada ya no la usa, pero sí las propuestas
   guardadas opcion-b, -c y -d. Se va cuando se borren. */
.card{
  background:var(--papel); border-radius:var(--r-lg); padding:32px 26px 30px;
  border:1px solid var(--linea);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--sombra-lg); }
.card__ico{
  width:48px; height:48px; border-radius:15px; margin-bottom:20px;
  display:grid; place-items:center;
  background:#EBF2FF; color:var(--azul);
}
.card:nth-child(3n+1) .card__ico{ background:#FFF0E2; color:#C96A22; }
.card:nth-child(3n+2) .card__ico{ background:#E6F7F8; color:#1E8E97; }
.card__ico .ico{ width:23px; height:23px; }
.card h3{ font-size:1.09rem; color:var(--azul-900); margin-bottom:10px; }
.card p{ font-size:.95rem; color:var(--tinta-70); }

/* ===================== BLOQUES PARTIDOS ===================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.split--rev .split__media{ order:2; }
.split__media{ position:relative; margin:0; }
/* Cuadrada y acotada: acompaña sin comerse la pantalla. */
.split__media img{
  width:100%; max-width:430px; aspect-ratio:1/1; height:auto;
  object-fit:cover; border-radius:var(--r-lg);
  margin-inline:auto;
}
/* Etiqueta sólida: el vidrio translúcido era herencia del hero anterior
   y ya no pega con el resto. */
.split__tag{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  width:max-content; max-width:calc(100% - 40px);
  display:flex; align-items:center; gap:11px;
  background:var(--papel); border:0;
  border-radius:999px; padding:11px 20px 11px 15px;
  font-size:.85rem; color:var(--tinta-45);
  box-shadow:0 6px 22px rgba(18,29,48,.18);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.split__tag .ico{ width:19px; height:19px; color:#C96A22; }
.split__tag span{ display:flex; flex-direction:column; line-height:1.25; }
.split__tag strong{ color:var(--azul-900); font-size:.97rem; font-weight:600; }
.split__body h2{ color:var(--azul-900); margin-bottom:18px; }
.split__lead{ color:var(--tinta-70); font-size:1.04rem; margin-bottom:30px; }

.feats{ list-style:none; margin:0; padding:0; display:grid; gap:22px; }
.feats li{ display:flex; gap:16px; align-items:flex-start; }
.feats .ico{ width:24px; height:24px; color:var(--azul); margin-top:3px; }
.feats li:nth-child(1) .ico{ color:#C96A22; }
.feats li:nth-child(2) .ico{ color:#1E8E97; }
.feats div{ display:flex; flex-direction:column; font-size:.96rem; color:var(--tinta-70); }
.feats strong{ font-size:1.02rem; font-weight:600; color:var(--azul-900); margin-bottom:2px; }

/* ===================== PROFESIONALES ===================== */
.grid-pro{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.pro{
  display:flex; flex-direction:column; gap:3px;
  padding:26px 22px; border-radius:var(--r);
  background:var(--papel-2); border:1px solid transparent;
  transition:background .22s ease, border-color .22s ease, transform .22s ease;
}
.pro:hover{ background:var(--papel); border-color:var(--linea); transform:translateY(-3px); box-shadow:var(--sombra); }
/* Mismo criterio de color que Plataforma: naranjo, verde azulado y azul
   rotando, para que ninguna grilla quede monocroma. */
.pro .ico{ width:26px; height:26px; color:var(--azul); margin-bottom:13px; }
.pro:nth-child(3n+1) .ico{ color:#C96A22; }
.pro:nth-child(3n+2) .ico{ color:#1E8E97; }
.pro strong{ font-size:1rem; font-weight:600; color:var(--azul-900); }
.pro span{ font-size:.89rem; color:var(--tinta-45); }
.pro--more{ background:linear-gradient(150deg,#EBF2FF,#E0ECFF); }

/* ===================== RED DE ALIADOS ===================== */
.grid-red{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--linea); border-radius:var(--r-lg); overflow:hidden;
  background:var(--linea); gap:1px;
}
.rcell{
  --acento:var(--azul);
  --tinte:#EBF2FF;
  display:flex; flex-direction:column; gap:3px;
  padding:30px 26px; background:var(--papel);
  transition:background .22s ease;
}
/* El acento se alterna naranjo, celeste y azul, como el cuadro de Biobío
   en el mapa: así ninguna sección queda monocroma. */
.rcell:nth-child(3n+1){ --acento:#C96A22; --tinte:#FFF1E4; }
.rcell:nth-child(3n+2){ --acento:#1E8E97; --tinte:#E6F7F8; }
.rcell:hover{ background:var(--tinte); }
.rcell .ico{ width:25px; height:25px; color:var(--acento); margin-bottom:14px; }
.rcell strong{ font-size:.99rem; font-weight:600; color:var(--azul-900); }
.rcell span{ font-size:.88rem; color:var(--tinta-45); }

/* ===================== PLATAFORMA ===================== */
/* Era un bloque azul oscuro más. En crema cálido la página deja de
   leerse como clínica y la marca respira. */
/* El borde superior no es recto: es un arco con el vértice al centro, el
   mismo gesto que describen los íconos de la plataforma más abajo. */
/* Aire entre las tarjetas de arriba y donde arranca el arco. */
.section--dark{ position:relative; background:#FAF5EE; margin-top:clamp(70px, 11vh, 150px); }
/* Arco continuo de lado a lado, con el vértice al centro. Alto fijo, para
   que la curva no se deforme cuando la sección crece en pantallas angostas. */
.arcoborde{
  position:absolute; left:0; right:0; bottom:100%;
  width:100%; height:clamp(32px, 4.4vw, 86px);
  display:block; pointer-events:none;
}
.section--dark .grain{ opacity:.1; }
/* ---- Arco del ecosistema ----
   Una sola curva de la que cuelgan las seis piezas de la plataforma.
   Dice "esto está conectado" antes de que nadie lea una palabra. */
.arco{
  position:relative; z-index:3;
  height:clamp(150px, 17vw, 215px);
  margin:0 auto 52px; max-width:880px;
}
.arco__svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.arco__linea{
  fill:none; stroke:#C96A22; stroke-width:1.6;
  vector-effect:non-scaling-stroke; stroke-linecap:round;
  opacity:.5;
}
.arco__linea--punteada{ stroke:#1E8E97; stroke-dasharray:5 7; opacity:.4; }

.arco__nodo{
  position:absolute; left:var(--x); top:var(--y);
  width:52px; height:52px; margin:-26px 0 0 -26px;
  display:grid; place-items:center;
  border-radius:50%; background:var(--papel);
  box-shadow:0 6px 18px rgba(18,29,48,.12), 0 0 0 7px rgba(255,255,255,.55);
  color:var(--azul);
  opacity:0; transform:scale(.4);
}
.arco__nodo--grande{
  width:66px; height:66px; margin:-33px 0 0 -33px;
  background:var(--azul-900); color:var(--celeste);
  box-shadow:0 10px 26px rgba(14,32,70,.26), 0 0 0 8px rgba(255,255,255,.55);
}
.arco__nodo .ico{ width:22px; height:22px; }
.arco__nodo--grande .ico{ width:27px; height:27px; }
.arco__nodo:nth-child(2) .ico{ color:#C96A22; }
.arco__nodo:nth-child(3) .ico{ color:#1E8E97; }

/* Entran en orden a lo largo de la curva y después flotan apenas. */
.arco.is-in .arco__nodo{
  animation:
    nodoEntra .6s cubic-bezier(.2,.9,.3,1.3) calc(var(--i) * .12s) forwards,
    nodoFlota calc(6s + var(--i) * .6s) ease-in-out calc(var(--i) * .12s + .6s) infinite alternate;
}
@keyframes nodoEntra{ to{ opacity:1; transform:scale(1); } }
@keyframes nodoFlota{ from{ translate:0 0; } to{ translate:0 -7px; } }

/* ---- Recorrido del paciente ----
   Un paciente recorre el arco en bucle y se detiene en cada etapa: la
   etapa se enciende, el tramo recorrido se marca en naranjo y la etiqueta
   dice dónde va. Lo mueve main.js. Sin JS, o con movimiento reducido, la
   etiqueta no aparece y el arco queda quieto como siempre. */
.arco__linea--hecha{ stroke:var(--naranja); stroke-width:2.6; opacity:.95; }

/* El realce usa scale y no transform: transform ya lo ocupa la entrada. */
.arco__nodo{ transition:scale .45s cubic-bezier(.2,.9,.3,1.3), box-shadow .45s ease; }
.arco__nodo::after{
  content:''; position:absolute; inset:-8px; border-radius:50%;
  border:2px solid var(--naranja); opacity:0; pointer-events:none;
}
.arco__nodo.is-activo{
  scale:1.12;
  box-shadow:0 8px 22px rgba(201,106,34,.24), 0 0 0 7px rgba(255,145,73,.24);
}
.arco__nodo--grande.is-activo{
  box-shadow:0 12px 30px rgba(14,32,70,.3), 0 0 0 8px rgba(255,145,73,.28);
}
.arco__nodo.is-activo::after{ animation:nodoPulso 1.5s ease-out infinite; }
@keyframes nodoPulso{
  from{ opacity:.75; transform:scale(.92); }
  to{ opacity:0; transform:scale(1.42); }
}

/* La etiqueta cuelga bajo la curva, dentro del arco. */
.arco__paciente{
  position:absolute; left:0; top:0; z-index:2;
  display:flex; align-items:center; gap:9px;
  padding:5px 16px 5px 5px; border-radius:999px;
  background:var(--papel);
  box-shadow:0 8px 24px rgba(18,29,48,.14);
  font-size:.86rem; font-weight:600; color:var(--azul-900); white-space:nowrap;
  opacity:0; visibility:hidden;
  will-change:transform, opacity;
}
.arco--vivo .arco__paciente{ visibility:visible; }
/* Piquito hacia la etapa. Cuando la etiqueta se ajusta al borde, main.js
   lo corre para que siga apuntando al nodo. */
.arco__paciente::before{
  content:''; position:absolute; top:-4px; left:var(--pico, 50%);
  width:10px; height:10px; margin-left:-5px;
  background:var(--papel); border-radius:2px; transform:rotate(45deg);
}
.arco__avatar{
  position:relative;
  width:28px; height:28px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--naranja); color:#fff;
}
.arco__avatar .ico{ width:16px; height:16px; }

@media (max-width:680px){ .arco{ display:none; } }

.cards3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; position:relative; z-index:3; }
.tcard{
  background:var(--papel);
  border:1px solid #EDE3D5;
  border-radius:var(--r-lg); padding:30px 26px 28px;
  transition:box-shadow .25s ease, transform .25s ease;
}
.tcard:hover{ box-shadow:var(--sombra-lg); transform:translateY(-4px); }
.tcard__ico{
  width:46px; height:46px; border-radius:14px; margin-bottom:20px;
  display:grid; place-items:center;
  background:#FFF0E2; color:#C96A22;
}
.tcard:nth-child(3n+2) .tcard__ico{ background:#E6F7F8; color:#1E8E97; }
.tcard:nth-child(3n) .tcard__ico{ background:#EBF2FF; color:var(--azul); }
.tcard__ico .ico{ width:22px; height:22px; }
.tcard h3{ font-size:1.06rem; color:var(--azul-900); margin-bottom:9px; }
.tcard p{ font-size:.93rem; color:var(--tinta-70); }
.section--dark .shead{ position:relative; z-index:3; }
.section--dark .shead h2{ color:var(--tinta-60); }
.section--dark .shead h2 strong{ color:var(--azul-900); }
.section--dark .shead__lead{ color:var(--tinta-70); }
.section--dark .eyebrow--light{ color:#C96A22; }

/* ===================== COBERTURA ===================== */
.cover{
  position:relative; z-index:1; overflow:hidden;
  padding:calc(100px + 2.4vw) 0 100px;
  background:linear-gradient(135deg, var(--azul-800), var(--azul) 62%, var(--azul-claro));
  color:#fff;
}
.cover__inner{ position:relative; z-index:3; display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center; }
.cover__text h2{ margin-bottom:16px; color:rgba(255,255,255,.8); }
.cover__text h2 strong{ color:#fff; }
.cover__text > p{ color:rgba(255,255,255,.78); max-width:40ch; margin-bottom:36px; }
.cover__figs{ margin:0; display:flex; gap:44px; flex-wrap:wrap; }
/* Las tres cifras son el mensaje de la sección: van grandes. */
.cover__figs dt{ font-family:var(--display); font-weight:600; font-size:clamp(2.6rem, 4.2vw, 3.4rem); line-height:1; margin-bottom:6px; }
.cover__figs dd{ margin:0; font-size:.9rem; color:rgba(255,255,255,.7); }

.regions{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:9px;
}
.regions li{
  font-size:.92rem; padding:11px 16px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.88);
  transition:background .2s ease;
}
.regions li:hover{ background:rgba(255,255,255,.16); }
.regions .is-home{
  background:rgba(255,145,73,.2); border-color:rgba(255,145,73,.45);
  display:flex; flex-direction:column; color:#fff; font-weight:600;
}
.regions .is-home em{ font-style:normal; font-size:.76rem; font-weight:400; color:#FFCFA8; }

/* ===================== EQUIPO ===================== */
/* Retratos recortados a cuadrado y acotados: nombre, cargo y persona
   caben juntos en pantalla, sin tener que bajar medio metro. */
.team{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; max-width:780px; margin-inline:auto; --retrato:210px; }
.member{ margin:0; text-align:center; position:relative; }
/* Una lámina de color asomada por detrás del retrato: le da gracia
   sin recurrir a sombras ni marcos pesados. */

/* Los retratos se recortan en forma de gota, la misma figura que compone
   el isotipo. Cada uno rota la punta a un lado distinto. */
.team .member:nth-child(1){ --gota:58% 58% 58% 16px; }
.team .member:nth-child(2){ --gota:58% 58% 16px 58%; }
.team .member:nth-child(3){ --gota:58% 16px 58% 58%; }

.member::before{
  content:''; position:absolute; z-index:0;
  top:-9px; left:50%;
  width:var(--retrato); height:var(--retrato);
  border-radius:var(--gota, 32px);
  background:linear-gradient(145deg, var(--celeste), var(--azul-claro));
  opacity:.32;
  transform:translateX(-50%) rotate(-5deg);
  transition:transform .4s cubic-bezier(.2,.8,.3,1), opacity .3s ease;
}
/* Cada retrato con su propio color: el azul repetido tres veces
   era otro bloque monocromo. */
.member:nth-child(1)::before{ background:linear-gradient(145deg,#FFC79B,var(--naranja)); }
.member:nth-child(2)::before{ background:linear-gradient(145deg,#A9EDF2,var(--celeste)); }
.member:nth-child(3)::before{ background:linear-gradient(145deg,#9FC4FF,var(--azul-claro)); }
.member:hover::before{ transform:translateX(-50%) rotate(-9deg); opacity:.46; }
.member img{
  /* height:auto es obligatorio: si no, el atributo height del HTML gana
     sobre aspect-ratio y la foto se estira a 1350px de alto. */
  position:relative; z-index:1;
  width:100%; height:auto; max-width:var(--retrato); aspect-ratio:1/1;
  object-fit:cover; object-position:center 18%;
  border-radius:var(--gota, 26px); background:var(--papel-2);
  margin-inline:auto;
  box-shadow:0 10px 26px rgba(18,29,48,.14);
  transition:transform .35s cubic-bezier(.2,.8,.3,1);
}
.member:hover img{ transform:translateY(-5px); }
.member figcaption{ padding:16px 2px 0; display:flex; flex-direction:column; }
.member strong{ font-family:var(--display); font-weight:600; font-size:1.06rem; color:var(--azul-900); }
.member span{ font-size:.88rem; color:var(--tinta-45); }
.member__bio{
  margin:10px auto 0; max-width:30ch;
  font-size:.86rem; line-height:1.5; color:var(--tinta-70);
  text-wrap:balance;
}

/* ===================== TESTIMONIOS ===================== */
.quotes{ display:grid; grid-template-columns:.85fr 1.15fr 1fr; gap:22px; align-items:stretch; }
/* Foto de una familia (la mandó Cuida Red): misma esquina redonda que las
   fotos de servicios, y del alto de las citas. */
.quotes__foto{ margin:0; min-height:360px; }
.quotes__foto img{
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
  border-radius:44px var(--r-lg) var(--r-lg) var(--r-lg);
}
.quotes__col{ display:grid; gap:22px; }
.quote{
  margin:0; background:var(--papel); border-radius:var(--r-lg);
  padding:34px 32px; border:1px solid var(--linea);
  display:flex; flex-direction:column;
}
.quote p{ color:var(--tinta-70); font-size:1rem; margin-bottom:24px; }
.quote mark{ background:transparent; color:var(--azul-900); font-weight:600; }
.quote--lead{
  background:linear-gradient(165deg,var(--azul-900),#1B3A78);
  border-color:transparent; justify-content:space-between; padding:42px 38px;
}
.quote--lead p{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.25rem,2.1vw,1.62rem); line-height:1.38;
  color:rgba(255,255,255,.84); margin-bottom:34px;
}
.quote--lead mark{ background:transparent; color:#fff; font-weight:600; }
.quote footer{ display:flex; align-items:center; gap:13px; margin-top:auto; }
.ini{
  width:44px; height:44px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(150deg,var(--azul),var(--azul-claro)); color:#fff;
  font-size:.86rem; font-weight:600;
}
.quotes__col .quote:nth-child(1) .ini{ background:linear-gradient(150deg,#1E8E97,var(--celeste)); }
.quotes__col .quote:nth-child(2) .ini{ background:linear-gradient(150deg,#C96A22,var(--naranja)); }
.quote--lead .ini{ background:rgba(255,255,255,.16); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }
.who{ display:flex; flex-direction:column; font-size:.86rem; color:var(--tinta-45); }
.who strong{ font-size:.98rem; font-weight:600; color:var(--azul-900); }
.quote--lead .who{ color:rgba(255,255,255,.6); }
.quote--lead .who strong{ color:#fff; }

/* ===================== ALIANZAS ===================== */
#alianzas{ overflow:hidden; }   /* contiene las cintas inclinadas, más anchas que la pantalla */

/* ---- Cinta de valores ----
   Los cinco valores del brief separados por el isotipo, inclinados y en
   movimiento. Es el recurso de marca convertido en patrón. */
.valores{
  position:relative; z-index:2;
  width:108vw; margin:calc(-1.4vw - 20px) 0 0; left:50%;
  transform:translateX(-50%) rotate(-1.6deg);
  background:linear-gradient(100deg, var(--azul-900), var(--azul-700));
  padding:9px 0; overflow:hidden;
  box-shadow:0 14px 40px rgba(14,32,70,.18);
}
.valores__track{ display:flex; width:max-content; animation:desfileInverso 48s linear infinite; }
.valores__set{ display:flex; align-items:center; gap:30px; padding-right:30px; flex:none; }
.valores__set span{
  font-family:var(--display); font-weight:600;
  font-size:1.02rem; color:#fff; white-space:nowrap;
}
/* Separador neutro: el isotipo acá competía con el logo del menú. */
.valores__sep{
  width:4px; height:4px; flex:none; border-radius:50%;
  background:var(--naranja); opacity:.8;
}
.allies__label{
  text-align:center; font-size:.74rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--tinta-45); margin-bottom:34px;
}
/* Cinta contenida y centrada: ocupa una ventana en el medio de la página,
   no de borde a borde. Los logos se desplazan dentro de esa ventana y se
   desvanecen en sus dos extremos. */
.marquee{
  position:relative;
  width:min(100% - 40px, 840px); margin-inline:auto;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track{ display:flex; width:max-content; animation:desfileTanda 26s linear infinite; }
/* Separación amplia a propósito: una sola tanda ocupa más que el ancho
   de pantalla, así nunca se ven dos veces el mismo logo al mismo tiempo. */
.marquee__set{ display:flex; align-items:center; gap:58px; padding-right:58px; flex:none; }
/* Sin hover: la cinta se anima en la GPU y la deteccion del mouse va con
   la posicion del hilo principal, asi que el efecto se ilumina en el logo
   equivocado. Ademas, perseguir con el cursor algo que se mueve es inutil. */
.marquee img{
  height:38px; width:auto; object-fit:contain; flex:none;
  filter:grayscale(1); opacity:.68;
  pointer-events:none;
}
/* Avanza una tanda de cuatro: con -50% el track se quedaba corto y
   descubria el borde derecho justo antes de reiniciar el bucle. */
@keyframes desfileTanda{ to{ transform:translateX(-25%); } }
/* La cinta de valores corre al reves que la de logos: dos cintas seguidas
   yendo para el mismo lado se leian como una sola.
   Se desplaza una tanda (12.5% de ocho) y no la mitad: asi el track nunca
   descubre el borde derecho de la cinta, que es mas ancha que la pantalla. */
@keyframes desfileInverso{ from{ transform:translateX(-25%); } to{ transform:translateX(-12.5%); } }

/* ===================== CIERRE ===================== */
.close{
  position:relative; z-index:1; overflow:hidden; padding:calc(100px + 2.4vw) 0 100px;
  background:linear-gradient(160deg, var(--azul-900), var(--azul-700));
  color:#fff;
}
.close__inner{ position:relative; z-index:3; display:grid; grid-template-columns:1fr .9fr; gap:60px; align-items:center; }
.close__text h2{ margin-bottom:16px; max-width:17ch; text-wrap:balance; color:rgba(255,255,255,.8); }
.close__text h2 strong{ color:#fff; }
.close__text > p{ color:rgba(255,255,255,.74); margin-bottom:40px; }
.close__data{ list-style:none; margin:0; padding:0; display:grid; gap:20px; }
.close__data li{ display:flex; flex-direction:column; gap:3px; font-size:1rem; color:rgba(255,255,255,.9); }
.close__data strong{ font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--celeste); }
.close__data a{ text-decoration:none; }
.close__data a:hover{ text-decoration:underline; }

.llamada, .quoter{
  background:var(--papel); color:var(--tinta);
  border-radius:var(--r-xl); padding:36px 32px;
  box-shadow:var(--sombra-lg); display:grid; gap:14px;
}
.llamada h3, .quoter h3{ font-family:var(--display); font-weight:600; font-size:1.5rem; color:var(--azul-900); margin-bottom:4px; }
.llamada label, .quoter label{ display:flex; flex-direction:column; gap:6px; font-size:.85rem; font-weight:600; color:var(--tinta-70); }
.quoter__row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.llamada input, .quoter input, .quoter select{
  font-family:var(--texto); font-size:.98rem; font-weight:400; color:var(--tinta);
  padding:13px 15px; border:1px solid var(--linea); border-radius:var(--r-sm);
  background:var(--papel); transition:border-color .2s ease, box-shadow .2s ease;
}
.llamada input:focus, .quoter input:focus, .quoter select:focus{
  outline:none; border-color:var(--azul-claro); box-shadow:0 0 0 3px rgba(104,152,255,.16);
}
.llamada .btn, .quoter .btn{ margin-top:6px; }
.quoter__note{ font-size:.84rem; color:var(--tinta-45); text-align:center; }

/* ===================== FOOTER ===================== */
.foot{ background:var(--azul-900); color:rgba(255,255,255,.66); padding:0 0 0; }
/* Línea de acento con los cuatro colores de marca cruzando el pie. */
.foot::before{
  content:""; display:block; height:4px;
  background:linear-gradient(90deg, var(--naranja) 0 25%, var(--celeste) 25% 50%, var(--azul-claro) 50% 75%, var(--azul) 75% 100%);
}
.foot__inner{ padding-top:58px; }
.foot__inner{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.1fr; gap:44px; padding-bottom:48px; }
.foot__brand img{ height:28px; width:auto; margin-bottom:20px; }
.foot__brand p{ font-size:.94rem; max-width:38ch; }
.foot__col{ display:flex; flex-direction:column; gap:11px; }
.foot__col h4{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:5px; }
.foot__col:nth-of-type(1) h4{ color:var(--naranja); }
.foot__col:nth-of-type(2) h4{ color:var(--celeste); }
.foot__col:nth-of-type(3) h4{ color:var(--azul-claro); }
.foot__col a, .foot__col span{ font-size:.94rem; text-decoration:none; }
.foot__col a:hover{ color:var(--celeste); }
.foot__bottom{ border-top:1px solid rgba(255,255,255,.12); padding:22px 0 28px; }
.foot__bottom p{ font-size:.86rem; color:rgba(255,255,255,.45); }

/* ===================== WHATSAPP ===================== */
.wasp{
  position:fixed; z-index:95; right:20px; bottom:20px;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--azul); color:#fff;
  box-shadow:0 10px 26px rgba(52,95,188,.38);
  transition:transform .2s ease, background .2s ease;
}
.wasp .ico{ width:25px; height:25px; }
.wasp:hover{ transform:scale(1.07); background:var(--azul-700); }

/* ===================== REVEAL ===================== */
/* Solo se oculta si el JS está corriendo (la clase .js la pone el propio
   documento). Si el script falla, el contenido se ve igual en vez de dejar
   la página en blanco. */
.reveal{ transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.js .reveal{ opacity:0; transform:translateY(22px); }
.reveal.is-in{ opacity:1; transform:none; }

/* ===================== RESPONSIVE ===================== */
@media (max-width:1080px){
  .doors, .cards3, .quotes{ grid-template-columns:1fr 1fr; }
  .quotes{ grid-template-columns:1fr; }
  .quotes__foto{ min-height:0; }
  .quotes__foto img{ height:auto; aspect-ratio:16/10; }
  .cards4, .grid-pro, .grid-red{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; gap:36px; }
  .split--rev .split__media{ order:0; }
  .cover__inner{ grid-template-columns:1fr; gap:44px; }
  .close__inner{ grid-template-columns:1fr; gap:44px; }
  .foot__inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width:860px){
  .nav__links{ display:none; }
  .nav__toggle{ display:flex; }

  .hero__stats{ gap:14px 24px; margin-top:34px; }
  /* En pantalla angosta el texto deja de centrarse en el panel y vuelve al
     margen normal del sitio: sin esto quedaba pegado al borde. */
  .hero__inner{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }
  .hero__copy{ width:auto; max-width:none; margin-left:0; }
  .hero__stats{ width:auto; max-width:none; margin-left:0; }
}

@media (max-width:680px){
  body{ font-size:16.5px; }
  .section{ padding:72px 0; }
  .hero{ padding:calc(var(--nav-h) + 54px) 0 72px; min-height:auto; }
  /* En vertical el panel ocupa el ancho completo pero NO todo el alto:
     deja una franja abajo para que la foto se vea de verdad. */
  .hero{ padding-bottom:372px; }
  /* La foto deja de ser fondo recortado y pasa a ser una banda al pie,
     encuadrada en las personas y no en el suelo. */
  .hero__photo{ top:auto; bottom:0; height:340px; object-position:66% 58%; }
  .hero__luz{ display:none; }
  /* En pantalla angosta 6.6vw da un número ridículo, así que el titular
     caía al mínimo y perdía toda la jerarquía. Acá manda el ancho real. */
  .hero__title{ font-size:clamp(3rem, 12.5vw, 3.7rem); line-height:.93; }
  .hero__lead{ font-size:1.02rem; }
  .hero__panel{
    width:100%; right:0;
    bottom:auto; height:calc(100% - 340px);
    /* En vertical la curva se leia rara y achicaba la foto: corte recto
       y la imagen gana altura real. */
    clip-path:none;
  }
  .hero__marca{ width:200px; height:200px; right:-26px; bottom:60px; }
  .hero__veil{ background:linear-gradient(to top, rgba(34,22,14,.4), transparent 50%); }
  /* Con la foto a 340px el lado izquierdo queda vacío: piso y pared sin nada.
     Las etiquetas vuelven, pero apiladas sobre esa zona en vez de repartidas
     por la escena como en escritorio. Se fijan a la banda de la foto, no al
     hero completo, así no se van sobre el texto. */
  .floats{ top:auto; bottom:0; height:340px; }
  .float{
    font-size:.74rem;
    padding:7px 13px;
    gap:7px;
  }
  /* Posición en píxeles: así manda esta regla y no los --x/--y en línea,
     que están pensados para la escena ancha. */
  .floats .float:nth-child(1){ left:14px; top:46px; }
  .floats .float:nth-child(2){ left:14px; top:112px; }
  .floats .float:nth-child(3){ left:14px; top:178px; }
  .float__dot{ width:6px; height:6px; }
  .hero__cta .btn{ flex:1 1 100%; }
  .doors, .cards4, .cards3, .grid-pro, .grid-red, .quoter__row{ grid-template-columns:1fr; }
  .team{ grid-template-columns:1fr 1fr; gap:26px; --retrato:150px; }
  .team .member:last-child{ grid-column:1 / -1; }
  .regions{ grid-template-columns:1fr 1fr; }
  .cover__figs{ gap:26px; }
  .cover__figs dt{ font-size:2.3rem; }
  .foot__inner{ grid-template-columns:1fr; gap:32px; }
  .marquee img{ height:30px; }
  .marquee__set{ gap:38px; padding-right:38px; }
  .quoter{ padding:28px 22px; }
  .quote--lead{ padding:32px 26px; }
}

/* ===================== PIEZAS DE LA FUSIÓN =====================
   Al juntar secciones aparecieron tres piezas nuevas: el validador de
   logos bajo el hero, un encabezado intermedio para el segundo bloque
   de una sección, y la red de aliados convertida en fila de fichas. */

/* Validador: la cinta de logos va pegada al hero, así que respira menos
   arriba que una sección normal y no compite con la cinta de valores. */
.validador{ padding:52px 0 44px; }
.validador .allies__label{ margin-bottom:26px; }

/* Encabezado del segundo bloque dentro de una misma sección: separa sin
   necesidad de abrir otra sección. */
.shead--mid{ margin-top:clamp(64px, 8vw, 96px); }
.split-sec .shead--mid{ margin-top:clamp(56px, 7vw, 84px); }

/* ---- Fotos de Plataforma ----
   La tecnología en la casa de las personas: una foto ancha y una alta,
   del mismo alto, cada una con su rótulo blanco abajo. */
.tecfotos{
  position:relative; z-index:3;
  display:grid; grid-template-columns:1.55fr 1fr; gap:20px;
  margin-top:44px;
}
.tecfoto{ position:relative; margin:0; height:clamp(260px, 30vw, 380px); }
.tecfoto img{ width:100%; height:100%; object-fit:cover; border-radius:var(--r-lg); }
.tecfoto--ancha img{ border-radius:44px var(--r-lg) var(--r-lg) var(--r-lg); }
.tecfoto--alta img{ object-position:center 40%; }
.tecfoto figcaption{
  position:absolute; left:16px; bottom:16px;
  max-width:calc(100% - 32px);
  display:flex; flex-direction:column; gap:1px;
  padding:11px 16px; border-radius:var(--r);
  background:var(--papel); box-shadow:0 6px 22px rgba(18,29,48,.18);
  font-size:.84rem; line-height:1.35; color:var(--tinta-70);
}
.tecfoto figcaption strong{ font-size:.95rem; font-weight:600; color:var(--azul-900); }
@media (max-width:680px){
  .tecfotos{ grid-template-columns:1fr; }
  .tecfoto{ height:250px; }
}

/* ---- Banner MACA en Plataforma ----
   Co-marca: usa los colores de MACA (el morado de su logo) y no los de
   Cuida Red, para que se lea como "la tecnología de un socio". El isotipo
   grande asoma recortado a la derecha. */
.maca{
  --maca:#A078F8; --maca-claro:#CDB8FF; --maca-fondo:#1B1440; --maca-fondo-2:#36277F;
  position:relative; z-index:3; overflow:hidden; isolation:isolate;
  margin-top:48px;
  display:grid; grid-template-columns:1.25fr 1fr; gap:36px 48px; align-items:center;
  padding:clamp(28px, 4vw, 46px) clamp(24px, 4vw, 52px);
  border-radius:var(--r-xl);
  background:linear-gradient(125deg, var(--maca-fondo) 0%, var(--maca-fondo-2) 100%);
  color:#fff;
  box-shadow:0 24px 60px rgba(27,20,64,.28);
}
.maca__iso{
  position:absolute; z-index:-1; right:-70px; top:50%;
  width:340px; height:auto; transform:translateY(-50%) rotate(-12deg);
  opacity:.14; pointer-events:none;
}
.maca__marca{ display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; margin-bottom:22px; }
.maca__logo{ width:150px; height:auto; }
.maca__sello{
  font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--maca-fondo); background:var(--maca-claro);
  padding:5px 11px; border-radius:999px;
}
.maca__titulo{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.45rem, 2.4vw, 1.9rem); line-height:1.2; letter-spacing:-.01em;
  text-wrap:balance; margin-bottom:12px;
}
.maca__texto{ color:rgba(255,255,255,.8); font-size:.98rem; max-width:46ch; }
.maca__lista{
  list-style:none; margin:0 0 24px; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.maca__lista li{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.07); border:1px solid rgba(205,184,255,.22);
  font-size:.9rem; font-weight:500; line-height:1.3;
}
.maca__lista .ico{ width:19px; height:19px; color:var(--maca-claro); }
.maca__cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px; border-radius:999px;
  background:#fff; color:var(--maca-fondo);
  font-weight:600; font-size:.94rem; text-decoration:none;
  transition:background .2s ease, transform .2s ease;
}
.maca__cta i{ font-style:normal; transition:transform .2s ease; }
.maca__cta:hover{ background:var(--maca-claro); transform:translateY(-2px); }
.maca__cta:hover i{ transform:translateX(4px); }

@media (max-width:860px){
  .maca{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .maca__lista{ grid-template-columns:1fr; }
  .maca__cta{ width:100%; justify-content:center; white-space:normal; text-align:center; }
}

/* Red de aliados dentro de la sección de cobertura: fichas claras sobre
   el azul, en una fila que envuelve. Ya no es una sección aparte. */
.redline__label{
  margin:clamp(48px, 6vw, 70px) 0 20px;
  font-size:.74rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--celeste);
}
.redline{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px;
}
.redline li{
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 16px; border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  font-size:.9rem; color:rgba(255,255,255,.88);
}
.redline .ico{ width:17px; height:17px; color:var(--naranja); flex:none; }

@media (max-width:680px){
  .validador{ padding:40px 0 34px; }
  .redline li{ padding:9px 13px; font-size:.84rem; }
  .redline .ico{ width:15px; height:15px; }
}

/* ===================== SERVICIOS OFICIALES =====================
   Cada servicio dice qué incluye: absorbió las puertas de "a quién
   cuidas" y el bloque de acompañamiento, que eran secciones aparte. */
.svc__lista{
  list-style:none; margin:16px 0 0; padding:0;
  display:grid; gap:9px;
  font-size:.9rem; line-height:1.45; color:var(--tinta-70);
}
.svc__lista li{ position:relative; padding-left:16px; }
.svc__lista li::before{
  content:''; position:absolute; left:0; top:.52em;
  width:6px; height:6px; border-radius:50%; background:var(--acento);
}

/* Cómo trabajamos: cuatro pasos unidos por una línea, iguales para
   cualquier servicio. */
.pasos{ margin-top:clamp(64px, 8vw, 96px); text-align:center; }
.pasos__list{
  position:relative;
  list-style:none; margin:10px 0 40px; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
  text-align:left;
}
.pasos__list::before{
  /* Va del centro del primer número al del último: cuatro columnas y tres
     espacios de 28px. */
  content:''; position:absolute; top:20px; left:20px; right:calc((100% - 84px) / 4 - 20px); height:1px;
  background:linear-gradient(90deg, var(--naranja), var(--celeste), var(--azul-claro));
  opacity:.5;
}
.pasos__list li{ display:flex; flex-direction:column; font-size:.93rem; color:var(--tinta-70); }
.pasos__n{
  position:relative; z-index:1;
  width:40px; height:40px; border-radius:50%; margin-bottom:16px;
  display:grid; place-items:center;
  background:var(--papel); border:1.5px solid var(--linea);
  font-family:var(--display); font-weight:700; font-size:1.1rem; color:var(--azul-900);
}
.pasos__list li:nth-child(3n+1) .pasos__n{ color:#C96A22; border-color:#FFD9BC; }
.pasos__list li:nth-child(3n+2) .pasos__n{ color:#1E8E97; border-color:#BDE9EC; }
.pasos__list strong{ font-size:1rem; font-weight:600; color:var(--azul-900); margin-bottom:4px; }
.pasos__extra{ max-width:64ch; margin:0 auto 28px; font-size:.95rem; color:var(--tinta-70); text-wrap:balance; }

@media (max-width:1080px){
  .pasos__list{ grid-template-columns:repeat(2,1fr); gap:32px 28px; }
  .pasos__list::before{ display:none; }
}
/* En una columna el número va al lado del texto, no encima: la lista
   ocupa la mitad del alto. */
@media (max-width:680px){
  .pasos__list{ grid-template-columns:1fr; gap:20px; }
  .pasos__list li{ display:grid; grid-template-columns:40px 1fr; column-gap:16px; }
  .pasos__n{ grid-row:1 / span 2; margin-bottom:0; }
}

/* ===================== MAPA DE CHILE =====================
   Chile acostado bajo el texto de cobertura, y a la derecha una ficha
   blanca con la región elegida y el buscador de comuna. Lo arma mapa.js. */
.ficha{
  justify-self:end; width:100%; max-width:400px;
  display:grid; gap:6px;
  padding:28px 28px 26px; border-radius:var(--r-lg);
  background:var(--papel); color:var(--tinta);
  box-shadow:0 24px 60px rgba(8,22,56,.32);
}
.ficha__rotulo{
  font-size:.72rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:#C96A22; margin-bottom:2px;
}
.ficha__region{
  font-family:var(--display); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(1.7rem, 2.6vw, 2.1rem); line-height:1.1; color:var(--azul-900);
}
.ficha__dato{ font-size:.95rem; color:var(--tinta-70); }
.ficha__nota{ font-size:.88rem; color:var(--tinta-45); margin-bottom:12px; }
.ficha.is-sede .ficha__nota{ color:#C96A22; font-weight:600; }
.ficha__buscar{
  padding-top:16px; border-top:1px solid var(--linea);
  font-size:.85rem; font-weight:600; color:var(--tinta-70);
}
.ficha__campo{
  width:100%; padding:12px 14px;
  font-family:var(--texto); font-size:.98rem; color:var(--tinta);
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--r-sm);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.ficha__campo:focus{ outline:none; border-color:var(--azul-claro); box-shadow:0 0 0 3px rgba(104,152,255,.16); }
.ficha__resultado{
  margin-top:4px; padding:10px 13px; border-radius:var(--r-sm);
  font-size:.88rem; font-weight:500; line-height:1.45;
  background:var(--papel-2); color:var(--tinta-70);
}
.ficha__resultado.is-ok{ background:#E6F7F8; color:#15707A; }
.ficha__resultado.is-info{ background:#FFF1E4; color:#A9561B; }
.ficha__cta{ justify-self:start; margin-top:12px; }

.mapa{ position:relative; margin-top:clamp(40px, 5vw, 60px); }
/* En pantalla angosta el mapa no se achica hasta lo intocable: se desliza. */
.mapa__lienzo{
  overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.35) transparent;
}
.mapa__svg{ display:block; width:100%; min-width:760px; height:auto; overflow:visible; }
.mapa__region{
  fill:rgba(255,255,255,.13);
  stroke:rgba(255,255,255,.55); stroke-width:1; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  cursor:pointer; outline:none;
  transition:fill .25s ease;
}
.mapa__region:hover, .mapa__region:focus-visible{ fill:rgba(255,255,255,.3); }
.mapa__region.is-sede{ fill:rgba(255,145,73,.34); }
.mapa__region.is-activa{ fill:var(--naranja); }
.mapa__resalte{
  fill:none; stroke:#fff; stroke-width:2.2; stroke-linejoin:round;
  vector-effect:non-scaling-stroke; pointer-events:none;
}
.mapa__puntos{ pointer-events:none; }
.mapa__capital{ fill:#fff; }
.mapa__capital.is-sede{ fill:var(--azul-900); stroke:#fff; stroke-width:1.3; vector-effect:non-scaling-stroke; }
.mapa__pulso{
  fill:none; stroke:#fff; stroke-width:1.4; vector-effect:non-scaling-stroke;
  transform-box:fill-box; transform-origin:center;
  animation:mapaPulso 2.4s ease-out infinite;
}
@keyframes mapaPulso{ from{ transform:scale(1); opacity:.9; } to{ transform:scale(4.2); opacity:0; } }

/* Entrada: las regiones aparecen de norte a sur cuando el mapa entra. */
.js .mapa--vivo .mapa__region{ opacity:0; }
.mapa--vivo.is-in .mapa__region{ animation:regionEntra .5s ease forwards; animation-delay:calc(var(--i) * 55ms); }
@keyframes regionEntra{ to{ opacity:1; } }

.mapa__tip{
  position:absolute; left:0; top:0; z-index:5; pointer-events:none;
  translate:-50% calc(-100% - 14px);
  padding:6px 12px; border-radius:999px;
  background:var(--azul-900); color:#fff;
  font-size:.82rem; font-weight:600; white-space:nowrap;
  box-shadow:0 8px 20px rgba(8,22,56,.3);
}
.mapa__ejes{
  display:flex; justify-content:space-between; align-items:baseline; gap:8px 14px;
  margin-top:14px; font-size:.8rem; color:rgba(255,255,255,.72);
}
.mapa__ejes > span:first-child, .mapa__ejes > span:last-child{
  font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--celeste);
}
.mapa__pista{ text-align:center; }

@media (max-width:1080px){
  .ficha{ justify-self:start; max-width:520px; }
}
@media (max-width:680px){
  .ficha{ padding:24px 20px 22px; }
  .mapa__ejes{ flex-wrap:wrap; }
  .mapa__pista{ order:3; width:100%; }
}

/* ===================== ORDEN EXAMEN GRATIS (PRONTO) =====================
   Todavía no existe: se ve como botón, apagado y con la etiqueta Pronto,
   y no lleva a ningún lado. */
.btn--pronto{
  --bg:transparent; --fg:var(--tinta-60);
  box-shadow:inset 0 0 0 1.5px var(--linea);
  gap:8px; cursor:default;
}
.btn--pronto:hover{ transform:none; }
.btn--pronto em, .navmobile__pronto em{
  font-style:normal; font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#15707A; background:#E6F7F8; padding:3px 7px; border-radius:999px;
}
.navmobile__pronto{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 14px; font-weight:500; font-size:.97rem; color:var(--tinta-60);
}
/* Entre celular y escritorio ancho el menú no tiene sitio: va solo en el
   menú desplegable. */
@media (max-width:1160px){ .nav__actions .btn--pronto{ display:none; } }

/* ===================== MOVIMIENTO REDUCIDO ===================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .marquee__track, .valores__track{ animation:none; }
  .hero__photo{ animation:none; transform:none; }
  .hero__luz{ animation:none; }
  .float{ animation:none; opacity:1; }
}

/* Vía corta del pie: un paso en vez del asistente completo. */
.llamada > p{ font-size:.92rem; color:var(--tinta-70); margin-top:-6px; }
.llamada__o{ text-align:center; font-size:.8rem; color:var(--tinta-45); margin:2px 0; }
.llamada .btn--outline{ --bg:transparent; --fg:var(--azul-900); box-shadow:inset 0 0 0 1.5px var(--linea); text-decoration:none; }
.llamada .btn--outline:hover{ --bg:var(--papel-2); }

/* Crédito de autoría al pie. */
.foot__bottom{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.foot__credito{ font-size:.86rem; color:rgba(255,255,255,.45); margin:0; }
.foot__credito a{ color:var(--celeste); text-decoration:none; font-weight:600; }
.foot__credito a:hover{ text-decoration:underline; }
@media (max-width:680px){ .foot__bottom{ justify-content:center; text-align:center; } }

/* Enlace a la política de privacidad en el pie. */
.foot__bottom p a{ color:rgba(255,255,255,.7); }
.foot__bottom p a:hover{ color:var(--celeste); }