/*
Qué hace: estilos compartidos de la web pública estática.
Datos: ninguno. Roles: público.
Creado: fecha original no registrada.
Modificado: 2026-09-22
Historial:
- 2026-09-22: se ajusta el video de Hábitat como franja horizontal amplia y se reduce el botón asociado.
- 2026-09-22: se amplía moderadamente el ancho visual del preview vertical de Hábitat conservando proporciones.
- 2026-09-22: se agrega una composición vertical de preview para Hábitat, con el video arriba y el texto debajo.
- 2026-09-22: se amplía moderadamente el video de Hábitat dentro de su columna, sin alterar la proporción.
- 2026-09-22: se ubica el video de Hábitat a la derecha del texto, conservando su proporción en pantallas medianas y móviles.
- 2026-09-22: se ubica la foto principal de Equipo y turnos a la derecha del texto, como en Trayectorias.
- 2026-09-22: se limita la foto principal de Equipo y turnos al alto visible, conservando proporciones y acercándola al texto.
- 2026-09-22: se sube el video de Trayectorias para mostrarlo junto al título y la descripción en la primera pantalla.
- 2026-09-12: se limita el tamaño de la imagen de Empresas conservando su contenido completo y centrado.
- 2026-09-12: video de Hábitat centrado, proporcional y con altura limitada para mantener continuidad con el contenido.
- 2026-09-12: se incorpora la marca Hábitat con más en superíndice; se reutiliza el token azul-niebla oficial de globals.css y ESTETICA.md.
*/
/* Tipografías de marca Hábitat (marca/ESTETICA.md): Quicksand en
   titulares, Nunito Sans en texto. Reemplazan a Georgia / Inter de
   la maqueta original. */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700&display=swap');
:root{
  --color-azul-niebla:#a9bec4;
  --green:#4f755d;
  --green-dark:#315542;
  --sage:#dfe8df;
  --cream:#f7f2e9;
  --sand:#ead9bd;
  --ink:#2d332f;
  --muted:#6f786f;
  --white:#ffffff;
  --line:#dfe4de;
  --shadow:0 12px 30px rgba(49,85,66,.10);
  --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Nunito Sans",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#fff;line-height:1.5}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1180px,92%);margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid rgba(223,228,222,.8)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:24px}
.logo{display:inline-flex;align-items:center}
.logo img{height:140px;width:auto;display:block;margin:-30px 0}
.footer .logo img{height:150px;margin:-30px 0}
.navlinks{display:flex;align-items:center;gap:26px;font-size:14px}
.navlinks a{padding:8px 0;border-bottom:2px solid transparent}
.navlinks a.active,.navlinks a:hover{border-color:var(--green)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:14px 22px;font-weight:650;border:1px solid transparent;cursor:pointer;transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-dark);box-shadow:0 10px 24px rgba(49,85,66,.28)}
.btn-outline{border-color:var(--green);color:var(--green);background:#fff}
.btn-outline:hover{background:var(--green);color:#fff;box-shadow:0 10px 24px rgba(49,85,66,.22)}
/* La flecha del texto del botón se corre un pelo al pasar el mouse */
.btn:hover{gap:14px}
.hero{background:linear-gradient(135deg,#fff 0%,#fbf8f2 52%,#eef4ef 100%);padding:22px 0 56px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.hero-grid-trayectorias{grid-template-columns:minmax(0,1fr) minmax(260px,360px);align-items:start;column-gap:32px;padding-top:8px}
.hero-grid-equipo{grid-template-columns:minmax(0,1fr) minmax(220px,360px);align-items:start;column-gap:32px}
.hero-grid-habitat{grid-template-columns:minmax(0,1fr) minmax(280px,390px);align-items:start;column-gap:32px}
.hero-grid-habitat{display:flex;flex-direction:column;align-items:stretch;gap:24px}
.hero-grid-habitat .presentacion-habitat{order:-1;width:100%;gap:10px}
.kicker{text-transform:uppercase;letter-spacing:2px;font-size:12px;color:var(--green);font-weight:700}
h1,h2,h3{font-family:"Quicksand",ui-sans-serif,system-ui,sans-serif;font-weight:600;line-height:1.12;margin:0}
h1{font-size:clamp(44px,6vw,74px);letter-spacing:-2px}
h2{font-size:clamp(32px,4vw,50px)}
h3{font-size:26px}
.lead{font-size:19px;color:#4f5a53;max-width:680px}
.hero-card,.photo-placeholder{border-radius:34px;min-height:420px;background:radial-gradient(circle at 70% 30%,#f7e9c9,transparent 34%),linear-gradient(145deg,#d7e4d6,#f6efe3 58%,#c7d7c8);position:relative;overflow:hidden;box-shadow:var(--shadow)}
.hero-card{display:flex;align-items:stretch;justify-content:center}
.imagen-equipo{width:auto;max-width:100%;height:auto;max-height:min(calc(100svh - 150px),45svh);min-height:0;object-fit:contain;align-self:start;margin-top:-20px}
.hero-card .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;background:#dfe8df;filter:saturate(1.05) contrast(1.03)}
.hero-card .hero-video::-webkit-media-controls,
.hero-card .hero-video::-webkit-media-controls-panel,
.hero-card .hero-video::-webkit-media-controls-play-button,
.hero-card .hero-video::-webkit-media-controls-current-time-display,
.hero-card .hero-video::-webkit-media-controls-time-remaining-display,
.hero-card .hero-video::-webkit-media-controls-timeline,
.hero-card .hero-video::-webkit-media-controls-volume-slider,
.hero-card .hero-video::-webkit-media-controls-mute-button,
.hero-card .hero-video::-webkit-media-controls-toggle-closed-captions-button,
.hero-card .hero-video::-webkit-media-controls-fullscreen-button,
.video-habitat::-webkit-media-controls,
.video-habitat::-webkit-media-controls-panel,
.video-habitat::-webkit-media-controls-play-button,
.video-habitat::-webkit-media-controls-current-time-display,
.video-habitat::-webkit-media-controls-time-remaining-display,
.video-habitat::-webkit-media-controls-timeline,
.video-habitat::-webkit-media-controls-volume-slider,
.video-habitat::-webkit-media-controls-mute-button,
.video-habitat::-webkit-media-controls-toggle-closed-captions-button,
.video-habitat::-webkit-media-controls-fullscreen-button{display:none !important}
.hero-card .hero-video,.video-habitat{pointer-events:none}
.photo-placeholder::after{content:"";position:absolute;inset:14% 13% 0 auto;width:52%;border-radius:50% 50% 0 0;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(79,117,93,.16));filter:blur(.2px)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.trust-pill{margin-top:22px;display:inline-flex;gap:12px;align-items:center;background:rgba(255,255,255,.7);border:1px solid var(--line);padding:13px 18px;border-radius:18px;font-size:14px}
.section{padding:72px 0}
.section.alt{background:var(--cream)}
.section-title{text-align:center;margin-bottom:34px}
.section-title p{color:var(--muted);max-width:760px;margin:14px auto 0}
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 6px 18px rgba(49,85,66,.06)}
.card.soft{background:linear-gradient(180deg,#fff,#faf8f2)}
.icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#edf3ee;color:var(--green);font-size:24px;margin-bottom:16px}
.card p{color:#59645c;font-size:14px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
/* Recorrido de pasos: columnas iguales; el texto no ensancha la
   celda (se limita y rompe en 2 líneas), así los círculos quedan
   siempre equiespaciados. Línea conectora detrás de los círculos. */
.path{
  --bubble:58px;
  display:grid;
  grid-auto-columns:1fr;
  grid-auto-flow:column;
  gap:0;
  margin-top:24px;
  position:relative;
}
.step{
  text-align:center;
  padding:14px 4px 0;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
}
/* la línea que une los círculos, centrada en su vertical */
.step::before{
  content:"";
  position:absolute;
  top:calc(14px + var(--bubble) / 2);
  left:-50%;
  width:100%;
  height:2px;
  background:var(--line);
  z-index:0;
}
.step:first-child::before{display:none}
.step .bubble{
  width:var(--bubble);
  height:var(--bubble);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid var(--line);
  margin:0 auto 10px;
  font-weight:700;
  color:var(--green);
  position:relative;
  z-index:1;
  transition:background .35s ease, border-color .35s ease, color .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
/* el texto se limita para que no empuje la columna */
.step > *:not(.bubble){
  max-width:14ch;
  font-size:14px;
  line-height:1.3;
}
.step strong{font-size:14px}
.step p{margin-top:4px;font-size:12px;color:var(--muted);max-width:16ch}

/* --- Animación de recorrido: se activa al revelar la sección.
   La línea de progreso se llena y cada círculo se enciende al paso.
   ~0.5s por paso. --- */
.js-animar .path.recorre .step::after{
  content:"";
  position:absolute;
  top:calc(14px + var(--bubble) / 2);
  left:-50%;
  width:100%;
  height:2px;
  background:var(--green);
  z-index:0;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s ease;
  transition-delay:calc(var(--i) * .5s);
}
.js-animar .path.recorre .step:first-child::after{display:none}
.js-animar .path.recorre.andar .step::after{transform:scaleX(1)}
.js-animar .path.recorre .bubble{
  background:#fff;border-color:var(--line);color:var(--green);
}
.js-animar .path.recorre.andar .step .bubble{
  animation:pasoEncendido .5s ease forwards;
  animation-delay:calc(var(--i) * .5s);
}
@keyframes pasoEncendido{
  0%{transform:scale(1)}
  45%{transform:scale(1.16);background:var(--green);border-color:var(--green);color:#fff}
  100%{transform:scale(1);background:var(--green);border-color:var(--green);color:#fff}
}
.highlight{background:var(--green);color:#fff;border-radius:28px;padding:30px 34px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.highlight h3{font-family:"Quicksand",ui-sans-serif,system-ui,sans-serif;font-weight:600;font-size:28px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.service-list{display:grid;gap:12px;margin-top:22px}
.service-item{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.service-item strong{display:block}
.service-item small{display:block;color:var(--muted);margin-top:3px}
.trajectory-card{min-height:330px;display:flex;flex-direction:column;justify-content:space-between}
.trajectory-card:nth-child(1){background:#f4f8f1}.trajectory-card:nth-child(2){background:#fcf5e9}.trajectory-card:nth-child(3){background:#f8f1f6}.trajectory-card:nth-child(4){background:#f1f5fb}.trajectory-card:nth-child(5){background:#fcf1ed}
.quote{font-size:34px;font-family:"Quicksand",ui-sans-serif,sans-serif;font-weight:600;color:var(--green-dark);max-width:920px;margin:auto;text-align:center}
.footer{background:var(--green-dark);color:#fff;padding:28px 0}
.footer .container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 20px;align-items:center}
.aviso-urgencias{flex-basis:100%;margin:6px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);font-size:12px;line-height:1.5;color:#c8d8ce}
.aviso-urgencias strong{color:#fff}
.mini{font-size:13px;color:#dbe7df}
.footer-redes{display:flex;gap:12px;align-items:center}
.footer-redes a{
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;
  transition:background .2s ease, transform .2s ease;
}
.footer-redes a:hover{background:rgba(255,255,255,.22);transform:translateY(-2px)}
.footer-redes svg{width:17px;height:17px}
@media(prefers-reduced-motion:reduce){.footer-redes a:hover{transform:none}}
.mobile-toggle{display:none}
@media(max-width:900px){
  .hero-grid,.split,.grid-2{grid-template-columns:1fr}
  .hero-grid-trayectorias{grid-template-columns:minmax(0,1fr) minmax(220px,300px);column-gap:20px}
  .hero-grid-equipo{grid-template-columns:minmax(0,1fr) minmax(190px,280px);column-gap:20px}
  .hero-grid-habitat{grid-template-columns:minmax(0,1fr) minmax(240px,330px);column-gap:20px}
  .video-trayectorias-wrap{margin-top:0}
  .cards{grid-template-columns:repeat(2,1fr)}
  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
  .path{grid-template-columns:repeat(3,1fr)}
  .navlinks{display:none;position:absolute;left:0;right:0;top:76px;background:#fff;padding:18px 4%;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line)}
  .navlinks.open{display:flex}
  .mobile-toggle{display:block;border:0;background:none;font-size:26px}
  .desktop-cta{display:none}
}
@media(max-width:600px){
  .hero-grid-trayectorias{grid-template-columns:1fr}
  .hero-grid-equipo{grid-template-columns:1fr}
  .hero-grid-habitat{grid-template-columns:1fr}
  .imagen-equipo{max-height:45svh;margin-top:-24px}
  .cards,.grid-3,.grid-4,.path{grid-template-columns:1fr}
  .hero{padding:36px 0}
  .section{padding:52px 0}
  .highlight{flex-direction:column;align-items:flex-start}
  h1{font-size:48px}
  .hero-card,.photo-placeholder{min-height:300px}
}

/* --- Botón flotante de WhatsApp (todas las páginas) --- */
.wa-float{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:60;
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  box-shadow:0 10px 26px rgba(49,85,66,.32);
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.wa-float:hover{transform:translateY(-3px) scale(1.05);background:var(--green-dark);box-shadow:0 14px 32px rgba(49,85,66,.4)}
.wa-float svg{width:30px;height:30px}
@media(max-width:600px){.wa-float{width:52px;height:52px;right:16px;bottom:16px}.wa-float svg{width:27px;height:27px}}
@media(prefers-reduced-motion:reduce){.wa-float:hover{transform:none}}

/* ==================================================================
   PÁGINA RECURSOS  (recursos.html — 2026-09-03)
   Clases propias de esta página, en la línea del diseño existente:
   verde var(--green), bordes var(--line), radios y sombra de marca.
   ================================================================== */

.resources-hero{background:linear-gradient(135deg,#fff 0%,#fbf8f2 52%,#eef4ef 100%);padding:56px 0}
.resources-hero .hero-grid{align-items:start}

/* Tira de 3 atributos (Confiables / Prácticos / Cercanos) */
.resource-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.resource-strip .card{display:flex;gap:12px;align-items:flex-start;padding:16px}
.resource-strip .icon{width:40px;height:40px;font-size:19px;margin:0;flex-shrink:0}
.resource-strip strong{display:block;font-family:"Quicksand",ui-sans-serif,sans-serif;font-weight:600;font-size:14px}
.resource-strip p{margin:3px 0 0;font-size:12.5px;color:#59645c;line-height:1.4}

/* 3 accesos a las secciones (Herramientas / Aprende / En vivo) */
.resource-entry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.resource-entry{display:flex;flex-direction:column;gap:8px;background:var(--sage);border:1px solid var(--line);border-radius:18px;padding:20px;transition:transform .25s ease, box-shadow .25s ease}
.resource-entry:nth-child(2){background:#f6efe3}
.resource-entry:nth-child(3){background:#efe9f2}
.resource-entry:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.resource-entry h3{font-size:17px}
.resource-entry p{font-size:13px;color:#59645c;margin:0;flex-grow:1}

/* Enlace de texto con flecha */
.text-link{color:var(--green);font-weight:650;font-size:14px;white-space:nowrap;transition:gap .2s ease}
.text-link:hover{text-decoration:underline}

/* Encabezado de sección: título+bajada a la izquierda, "ver todos" a la derecha */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px}
.section-head h2{font-size:clamp(26px,3vw,34px)}
.section-head p{color:var(--muted);margin:8px 0 0;max-width:640px}

/* Grilla de recursos gratuitos (5 tarjetas con thumb) */
.resource-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.resource-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 6px 18px rgba(49,85,66,.06)}
.resource-thumb{display:grid;place-items:center;height:120px;font-size:30px;color:var(--green);background:linear-gradient(150deg,#e9f1ea,#f6efe1)}
.resource-card .body{display:flex;flex-direction:column;gap:8px;padding:18px}
.resource-card h3{font-size:16px}
.resource-card p{font-size:13px;color:#59645c;margin:0;flex-grow:1}

/* Grilla de talleres grabados */
.workshop-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.workshop-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 6px 18px rgba(49,85,66,.06)}
.workshop-visual{position:relative;display:grid;place-items:center;height:130px;font-size:30px;color:var(--green);background:linear-gradient(150deg,#dfe8df,#f6efe1)}
.badge{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.9);color:var(--green-dark);font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.workshop-card .body{display:flex;flex-direction:column;gap:8px;padding:18px;flex-grow:1}
.workshop-card h3{font-size:16px;line-height:1.25}
.workshop-card p{font-size:13px;color:#59645c;margin:0;flex-grow:1}
.workshop-meta{font-size:12px;color:var(--muted)}
.price{font-family:"Quicksand",ui-sans-serif,sans-serif;font-weight:700;font-size:18px;color:var(--green-dark)}
.workshop-card .btn,.event-card .btn{width:100%;padding:11px 16px;font-size:14px}

.professional-grid{display:grid;grid-template-columns:1.3fr .9fr .9fr;gap:18px;margin-top:10px}
.professional-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 8px 20px rgba(49,85,66,.05);display:flex;flex-direction:column;gap:12px;transition:transform .25s ease, box-shadow .25s ease}
.professional-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(49,85,66,.08)}
.professional-hero{background:linear-gradient(155deg,#f5f3ee 0%,#edf5ef 48%,#e5f0e7 100%);border-color:rgba(79,117,93,.18)}
.badge-plain{display:inline-flex;align-self:flex-start;background:var(--green-dark);color:#fff;border-radius:999px;padding:6px 10px;font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.professional-card h3{font-size:20px;line-height:1.25;margin:0}
.professional-card p{font-size:14px;color:#59645c;margin:0;line-height:1.6}
.mini-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--sage);color:var(--green-dark);font-size:20px;font-weight:700}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.cta-row .btn{min-width:180px}

/* Grilla de encuentros en vivo */
.events-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.event-card{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 6px 18px rgba(49,85,66,.06)}
.event-date{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.event-date strong{font-family:"Quicksand",ui-sans-serif,sans-serif;font-size:24px;color:var(--green-dark);line-height:1}
.event-date > div{display:flex;flex-direction:column}
.event-date > div span{font-size:11px;color:var(--muted);letter-spacing:1px;text-transform:uppercase}
.event-date > span{background:var(--sage);color:var(--green-dark);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:4px 9px;border-radius:999px;white-space:nowrap}
.event-card h3{font-size:15px;line-height:1.25;margin-top:2px}
.event-card .mini{color:var(--muted)}
.event-card .price{margin-top:auto}

/* Franja "charlas para tu grupo o empresa" */
.company-cta{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 28px}
.company-cta h3{font-size:22px}

@media(max-width:1000px){
  .professional-grid{grid-template-columns:1fr}
}

@media(max-width:1000px){
  .resource-grid,.workshop-grid,.events-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .resource-strip,.resource-entry-grid{grid-template-columns:1fr}
  .section-head{flex-direction:column;align-items:flex-start;gap:8px}
  .company-cta{flex-direction:column;align-items:flex-start}
}
@media(max-width:640px){
  .resource-grid,.workshop-grid,.events-grid{grid-template-columns:1fr}
}

/* ==================================================================
   ANIMACIÓN  (2026-09-03)
   Sobria: fade + subida suave al entrar en pantalla, hero escalonado
   al cargar, parallax leve del bloque del hero y de las ondas.
   Todo se anula si el sistema pide menos movimiento.
   ================================================================== */

/* --- Estado de reposo de los elementos que se revelan al scrollear.
   La clase .js-animar la agrega script.js SOLO si hay JS y no hay
   reduced-motion: sin JS la página se ve completa y quieta. --- */
.js-animar .revelar{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
.js-animar .revelar.visible{
  opacity:1;
  transform:none;
}

/* --- Hero al cargar: entra escalonado apenas se pinta la página --- */
.js-animar .hero .kicker,
.js-animar .hero h1,
.js-animar .hero .lead,
.js-animar .hero .hero-actions,
.js-animar .hero .trust-pill,
.js-animar .hero .hero-card,
.js-animar .hero .photo-placeholder{
  opacity:0;
  transform:translateY(16px);
  animation:heroEntra .7s cubic-bezier(.22,.61,.36,1) forwards;
}
.js-animar .hero .kicker{animation-delay:.05s}
.js-animar .hero h1{animation-delay:.14s}
.js-animar .hero .lead{animation-delay:.24s}
.js-animar .hero .hero-actions{animation-delay:.34s}
.js-animar .hero .trust-pill{animation-delay:.44s}
.js-animar .hero .hero-card,
.js-animar .hero .photo-placeholder{animation-delay:.2s}

@keyframes heroEntra{
  to{opacity:1;transform:none}
}

/* --- Micro-interacción: las tarjetas levantan al pasar el mouse --- */
.card{transition:transform .25s ease, box-shadow .25s ease}
.cards .card:hover,
.grid-2 .card:hover,
.grid-3 .card:hover,
.grid-4 .card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(49,85,66,.13);
}
.trajectory-card:hover{transform:translateY(-4px)}

/* (el recorrido de pasos se anima en el bloque .path.recorre de arriba) */

/* ==================================================================
   LÍNEA DE PROGRESO  (.progreso — trayectorias.html #como)
   Línea horizontal continua con hitos; un punto activo con halo;
   el texto de la etapa cambia debajo. Avanza sola en loop (script.js)
   y se puede tocar cada hito para ir directo.
   ================================================================== */
.progreso{max-width:760px;margin:0 auto}
.progreso .kicker{color:var(--sand);}
.progreso-linea{position:relative;margin-top:56px}
.progreso-riel{height:4px;width:100%;border-radius:999px;background:rgba(95,127,116,.16)}
.progreso-relleno{height:100%;width:20%;border-radius:999px;background:var(--sand);transition:width .5s ease}
.progreso-hitos{list-style:none;margin:0;padding:0;display:flex;justify-content:space-between;position:relative;top:-14px}
.progreso-hitos li{display:flex}
.progreso-hitos button{
  width:44px;height:44px;display:grid;place-items:center;
  background:none;border:0;cursor:pointer;border-radius:50%;
}
.progreso-hitos button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.progreso .punto{
  width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(95,127,116,.35);background:var(--cream);
  transition:transform .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.progreso-hitos button:hover .punto{transform:scale(1.2)}
.progreso-hitos li.alcanzada .punto{background:var(--sand);border-color:var(--sand)}
.progreso-hitos li.activa .punto{
  transform:scale(1.55);
  background:var(--sand);border-color:var(--sand);
  box-shadow:0 0 0 6px rgba(234,217,189,.35);
}

.progreso-etapas{position:relative;margin-top:40px;min-height:180px}
.progreso-etapa{
  position:absolute;inset:0;text-align:center;
  opacity:0;transform:translateY(12px);
  transition:opacity .6s ease, transform .6s ease;
  pointer-events:none;
}
.progreso-etapa.activa{opacity:1;transform:none;pointer-events:auto}
.progreso-etapa .momento{
  font-family:"Quicksand",ui-sans-serif,sans-serif;font-weight:600;
  font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--sand);margin:0;
}
.progreso-etapa h3{margin:10px 0 0;font-size:clamp(22px,3vw,30px)}
.progreso-etapa .detalle{margin:12px auto 0;max-width:440px;font-size:17px;color:var(--muted);line-height:1.55}

@media(max-width:640px){
  .progreso .punto{width:14px;height:14px}
  .progreso-etapas{min-height:220px}
}
@media(prefers-reduced-motion:reduce){
  .progreso-relleno{width:100% !important;transition:none}
  .progreso-hitos li .punto{background:var(--sand);border-color:var(--sand)}
  .progreso-etapa{position:static;opacity:1;transform:none;margin-bottom:28px}
  .progreso-etapas{min-height:0}
}

/* --- Botón flotante "subir": chico, centrado abajo --- */
.subir-float{
  position:fixed;
  left:50%;
  bottom:18px;
  z-index:60;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  color:var(--green-dark);
  border:1px solid var(--line);
  box-shadow:0 6px 16px rgba(49,85,66,.16);
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) translateY(8px);
  transition:opacity .25s ease, transform .25s ease, background .2s ease;
}
.subir-float.visible{opacity:1;pointer-events:auto;transform:translateX(-50%)}
.subir-float:hover{background:var(--sage);transform:translateX(-50%) translateY(-3px)}
.subir-float svg{width:16px;height:16px}
@media(prefers-reduced-motion:reduce){.subir-float:hover{transform:translateX(-50%)}}

/* --- Menú móvil: se despliega con transición en vez de aparecer seco --- */
@media(max-width:900px){
  .navlinks{
    display:flex;
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height .3s ease, opacity .25s ease;
  }
  .navlinks.open{
    max-height:340px;
    opacity:1;
  }
}

/* --- Nadie se mueve si el sistema pide menos movimiento --- */
@media(prefers-reduced-motion:reduce){
  .js-animar .revelar,
  .js-animar .revelar.visible,
  .js-animar .hero .kicker,
  .js-animar .hero h1,
  .js-animar .hero .lead,
  .js-animar .hero .hero-actions,
  .js-animar .hero .trust-pill,
  .js-animar .hero .hero-card,
  .js-animar .hero .photo-placeholder,
  .js-animar .path.recorre .step::after,
  .js-animar .path.recorre .bubble{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
    transition:none !important;
  }
  /* con reduced-motion el recorrido no se anima: se muestra completo */
  .js-animar .path.recorre .step::after{background:var(--green);transform:scaleX(1) !important}
  .js-animar .path.recorre .step .bubble{background:var(--green);border-color:var(--green);color:#fff}
  .card:hover,.trajectory-card:hover,.btn:hover{transform:none}
  .btn:hover{gap:10px}
}

/* Firma visual Hábitat más: conservar juntos nombre y signo. */
.marca-habitat-mas{white-space:nowrap;text-transform:none}
.marca-habitat-mas-signo{color:var(--color-azul-niebla);font-size:.75em;font-weight:700;line-height:0;vertical-align:super}

/* Video de presentación: mostrar completo y reservar espacio al recorrido. */
.presentacion-habitat{display:flex;flex-direction:column;align-items:center;gap:1.5rem;min-width:0}
.video-habitat{display:block;width:100%;max-width:66rem;height:clamp(220px,34vw,310px);object-fit:fill;margin-inline:auto;border-radius:var(--radius);background:#dfe8df;filter:saturate(1.05) contrast(1.03)}
.hero-grid-habitat .presentacion-habitat .btn{padding:10px 16px;font-size:14px;gap:7px}
.video-trayectorias-wrap{display:flex;align-items:flex-start;justify-content:flex-end;min-height:0;margin-top:0}
.video-trayectorias{display:block;width:min(100%,22rem);height:auto;aspect-ratio:9/16;object-fit:contain;border-radius:0;background:transparent;filter:saturate(1.05) contrast(1.03);justify-self:end;margin-left:auto}
.video-trayectorias::-webkit-media-controls,
.video-trayectorias::-webkit-media-controls-panel,
.video-trayectorias::-webkit-media-controls-play-button,
.video-trayectorias::-webkit-media-controls-current-time-display,
.video-trayectorias::-webkit-media-controls-time-remaining-display,
.video-trayectorias::-webkit-media-controls-timeline,
.video-trayectorias::-webkit-media-controls-volume-slider,
.video-trayectorias::-webkit-media-controls-mute-button,
.video-trayectorias::-webkit-media-controls-toggle-closed-captions-button,
.video-trayectorias::-webkit-media-controls-fullscreen-button{display:none !important}
.video-trayectorias{pointer-events:none}
#como-acompanamos{scroll-margin-top:9rem}

/* Presentación de Empresas: imagen completa sin desplazar en exceso el contenido. */
.imagen-empresas{display:block;width:100%;max-width:28rem;height:auto;max-height:22rem;max-height:min(22rem,45svh);object-fit:contain;margin-inline:auto;border-radius:var(--radius)}