/* ═══════════════════════════════════════════════════════════
   CEMEDEC — Sistema visual
   Paleta:  porcelana clínica + azul institucional + rojo (solo cruz)
   Tipos:   Newsreader (display serif) · Hanken Grotesk (UI)
   Sistema: línea ECG = vida · cruz = confianza · firma = compromiso
            degradados = innovación · blanco = calma
   ═══════════════════════════════════════════════════════════ */

:root {
  --navy-950: #05152B;
  --navy-900: #071F3D;
  --navy-800: #0B2B52;
  --navy-700: #123A6B;
  --blue-600: #1B5FB3;
  --blue-500: #2D6FD2;
  --blue-300: #8FB3E8;
  --sky: #E7F0FA;
  --sky-2: #F4F8FD;
  --red-600: #C21F2C;
  --red-700: #A31621;
  --red-soft: #E4606B;
  --porcelain: #F3F6FA;
  --white: #FFFFFF;
  --ink: #10233D;
  --slate: #46586F;
  --line: #DEE6F0;

  --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;

  --container: 1240px;
  --radius-card: 20px;
  --shadow-1: 0 1px 2px rgba(7, 31, 61, .06), 0 8px 24px rgba(7, 31, 61, .07);
  --shadow-2: 0 2px 4px rgba(7, 31, 61, .07), 0 18px 44px rgba(7, 31, 61, .13);
  --shadow-3: 0 30px 80px rgba(11, 43, 82, .18);

  /* un solo lenguaje de movimiento en toda la experiencia */
  --ease-out: cubic-bezier(.2, .7, .3, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);

  --cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cg fill='%231B5FB3' fill-opacity='.05'%3E%3Crect x='58' y='48' width='12' height='32' rx='2.5'/%3E%3Crect x='48' y='58' width='32' height='12' rx='2.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
input { font: inherit; }
svg.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

body {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

:focus-visible {
  outline: 3px solid rgba(45, 111, 210, .55);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed; top: -80px; left: 16px; z-index: 200;
  background: var(--navy-900); color: #fff;
  padding: 12px 20px; border-radius: 999px; font-weight: 600;
  transition: top .25s;
}
.skip-link:focus { top: 16px; }

/* ── Layout ── */
.container { width: min(100% - 48px, var(--container)); margin-inline: auto; }
.section { padding-block: clamp(5.5rem, 9vw, 9.5rem); }
.section--tint { background: var(--porcelain); }
.cross-field { background-image: var(--cross); background-repeat: repeat; }
main > section { scroll-margin-top: 92px; }

/* ── Tipografía ── */
.serif { font-family: var(--font-serif); font-weight: 500; letter-spacing: -.01em; }
.serif em { font-style: italic; font-weight: 400; }

.h2 {
  font-size: clamp(1.95rem, 3.4vw, 3.05rem);
  line-height: 1.14;
  color: var(--ink);
  font-family: var(--font-serif); font-weight: 500; letter-spacing: -.01em;
  text-wrap: balance;
}
.h2 em { font-style: italic; font-weight: 400; color: var(--blue-600); }

.lead { font-size: 1.2rem; line-height: 1.6; color: var(--ink); font-weight: 500; }
.lead--light { color: var(--slate); font-weight: 400; }

.eyebrow {
  font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: 1rem;
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1.5px;
  background: currentColor; opacity: .55;
}

p + p { margin-top: 1rem; }

/* ── Botones ── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px; border-radius: 999px;
  font-weight: 650; font-size: .96rem; line-height: 1; white-space: nowrap;
  transition: transform .25s var(--ease-out), background .22s, border-color .22s, box-shadow .25s, color .22s;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn--lg { padding: 17px 34px; font-size: 1.03rem; }
.btn--sm { padding: 11px 20px; font-size: .87rem; }

.btn--primary {
  background: var(--red-600); color: #fff;
  box-shadow: 0 10px 26px rgba(194, 31, 44, .28);
}
.btn--primary:hover { background: var(--red-700); box-shadow: 0 16px 34px rgba(194, 31, 44, .36); }

.btn--ghost-light { border: 1.5px solid rgba(16, 35, 61, .28); color: var(--ink); }
.btn--ghost-light:hover { background: rgba(16, 35, 61, .05); border-color: rgba(16, 35, 61, .5); }

.btn--outline {
  border: 1.5px solid var(--blue-300); color: var(--blue-600);
  background: var(--white);
  box-shadow: var(--shadow-1);
}
.btn--outline:hover { border-color: var(--blue-500); background: var(--sky-2); box-shadow: var(--shadow-2); }

/* terciario con flecha: la flecha avanza al pasar el cursor */
.btn--flecha .ico { width: 18px; height: 18px; transition: transform .3s var(--ease-out); }
.btn--flecha:hover .ico { transform: translateX(4px); }

.ico { width: 20px; height: 20px; flex-shrink: 0; }
svg.ico use, .pilar__icon svg use { pointer-events: none; }
.ico, .pilar__icon svg, .dir__flecha, .paso__ico svg,
/* .red__ico queda deliberadamente fuera: los logos de Instagram y Facebook
   son glifos macizos de marca con su propio color, no iconos de línea. */
.tec__ico svg, .b2b__ico svg, .sheet__ico svg, .ciclo__ico svg,
.area__ico svg, .puerta__ico svg {
  fill: none; stroke: currentColor; stroke-width: 1.55;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Glass ── */
.glass {
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: var(--shadow-1);
}
.glass-dark {
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}

/* ═══════════ NAVBAR ═══════════ */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  transition: transform .38s var(--ease-out), background .3s, box-shadow .3s;
}
.nav--scrolled {
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(16, 35, 61, .06), 0 12px 32px rgba(16, 42, 84, .1);
}
.nav--hidden { transform: translateY(-101%); }

/* En las páginas cuya cabecera es una fotografía oscura, la navbar no puede
   arrancar transparente: el logo azul y los enlaces en tinta desaparecerían
   sobre la foto. Arranca ya con el vidrio blanco puesto. */
body.nav-solida .nav {
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(16, 35, 61, .06), 0 12px 32px rgba(16, 42, 84, .1);
}

.nav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 86px; transition: height .3s;
}
.nav--scrolled .nav__inner { height: 68px; }

.nav__logo { width: 168px; height: auto; transition: width .3s; }
.nav--scrolled .nav__logo { width: 142px; }

.nav__links { display: flex; gap: 30px; }
.nav__links a {
  color: rgba(16, 35, 61, .72); font-size: .93rem; font-weight: 600;
  background: linear-gradient(currentColor, currentColor) bottom left / 0 1.5px no-repeat;
  padding-bottom: 3px;
  transition: color .2s, background-size .3s var(--ease-out);
}
.nav__links a:hover { color: var(--navy-800); background-size: 100% 1.5px; }
/* en las páginas internas, el enlace de la página actual queda subrayado */
.nav__links a[aria-current="page"] { color: var(--navy-800); background-size: 100% 1.5px; }

.nav__actions { display: flex; align-items: center; gap: 16px; }

/* El botón del portal del paciente lleva un texto más largo que el resto de
   botones; entre 1181 y 1340px los enlaces aún conviven con él, así que se
   compacta en ese tramo para que el header no desborde. */
@media (min-width: 1181px) and (max-width: 1340px) {
  .nav__links { gap: 16px; }
  .nav__actions .btn--portal { padding: 10px 12px; font-size: .78rem; }
}

.nav__progress {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--blue-500), var(--red-600));
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
  opacity: 0; transition: opacity .3s;
}
.nav--scrolled .nav__progress { opacity: .9; }

.nav__burger { display: none; flex-direction: column; gap: 5px; padding: 10px; z-index: 130; }
.nav__burger span {
  width: 24px; height: 2px; background: var(--navy-800); border-radius: 2px;
  transition: transform .3s var(--ease-out), opacity .2s;
}
body.menu-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 120;
  background: linear-gradient(165deg, #FFFFFF, var(--sky));
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .35s, visibility .35s;
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; }
.mobile-menu nav { display: grid; gap: 22px; text-align: center; }
.mobile-menu a:not(.btn) {
  color: var(--ink); font-size: 1.6rem; font-weight: 600;
  opacity: 0; transform: translateY(14px);
  transition: opacity .4s, transform .4s var(--ease-out);
}
body.menu-open .mobile-menu a:not(.btn) { opacity: 1; transform: none; }
.mobile-menu .btn { margin-top: 14px; }

/* ═══════════ HERO ═══════════ */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(162deg, #FFFFFF 0%, #F4F8FC 48%, var(--sky) 100%);
  padding: clamp(9.5rem, 16vh, 12.5rem) 0 clamp(5rem, 8vh, 7.5rem);
  color: var(--ink);
}
.hero__glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.hero__glow--a { width: 640px; height: 640px; right: -160px; top: -120px; background: rgba(45, 111, 210, .16); }
.hero__glow--b { width: 480px; height: 480px; left: -180px; bottom: -220px; background: rgba(143, 179, 232, .3); }

.hero__grid {
  position: relative;
  display: grid; grid-template-columns: 1.04fr .96fr;
  gap: clamp(3rem, 6vw, 5.5rem);
  align-items: center;
}

.hero__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(2.6rem, 5.6vw, 5rem);
  line-height: 1.05; letter-spacing: -.015em;
  margin: 0 0 1.5rem;
}
.hero__line { display: block; }
.hero__em { font-style: italic; font-weight: 400; position: relative; display: inline-block; white-space: nowrap; }

.firma { position: absolute; left: -1%; right: -2%; bottom: -.26em; color: var(--red-600); pointer-events: none; }
.firma svg { width: 100%; height: .42em; display: block; overflow: visible; }
.firma__path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: firma-draw 1.15s var(--ease-out) 1.15s forwards; }
@keyframes firma-draw { to { stroke-dashoffset: 0; } }

/* dos frases, sin viudas: en móvil una palabra sola en la última línea
   rompe la lectura del único mensaje que lleva el hero */
.hero__sub {
  max-width: 47ch; font-size: 1.13rem; line-height: 1.65;
  color: var(--slate); margin-bottom: 2.1rem;
  text-wrap: pretty;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 2.4rem; }

.hero__trust { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.hero__trust li { font-size: .89rem; color: var(--slate); font-weight: 550; display: flex; align-items: center; gap: 9px; }
.hero__trust li::before { content: "+"; color: var(--red-soft); font-weight: 800; font-size: 1.05rem; line-height: 1; }

.hero__load { opacity: 0; transform: translateY(26px); animation: hero-in .85s var(--ease-out) forwards; }
.hero__line > .hero__load { display: inline-block; }
.hero__load--1 { animation-delay: .08s; }
.hero__load--2 { animation-delay: .18s; }
.hero__load--2b { animation-delay: .3s; }
.hero__load--3 { animation-delay: .44s; }
.hero__load--4 { animation-delay: .58s; }
.hero__load--5 { animation-delay: .7s; }
.hero__load--6 { animation-delay: .82s; }
.hero__load--7 { animation-delay: .45s; }
@keyframes hero-in { to { opacity: 1; transform: none; } }

/* Retención durante la Brand Intro */
html.intro-hold .nav { transform: translateY(-110%); transition: transform .7s var(--ease-out) .05s; }
html.intro-hold .hero__load,
html.intro-hold .firma__path,
html.intro-hold .hero__arch img { animation-play-state: paused; }

.hero__visual { position: relative; }
.hero__arch {
  position: relative; border-radius: var(--radius-card); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px rgba(16, 42, 84, .18);
  aspect-ratio: 630 / 470;
}
.hero__arch img {
  width: 100%; height: 114%;
  object-fit: cover; object-position: center top;
  will-change: transform;
  transform: translateY(var(--par, 0px));
}
html.js .hero__arch img { animation: hero-kb 2s var(--ease-out) .4s backwards; }
@keyframes hero-kb { from { transform: scale(1.07); } to { transform: scale(1); } }

.hero__chip {
  position: absolute; top: 26px; left: -18px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; border-radius: 999px;
  color: var(--ink); font-size: .88rem; font-weight: 650;
  animation: floaty 5.5s ease-in-out infinite;
}
.hero__chip .ico { width: 17px; height: 17px; color: var(--red-600); }

.hero__minicard {
  position: absolute; bottom: -22px; right: -14px;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 22px; border-radius: 18px;
  animation: floaty 6.5s ease-in-out .8s infinite;
}
.hero__minicard img { width: 38px; height: auto; }
.hero__minicard p { font-size: .86rem; line-height: 1.35; color: var(--slate); }
.hero__minicard strong { color: var(--ink); }

@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

/* ═══════════ SEPARADOR DE SIGNOS VITALES ═══════════
   La firma visual del sitio: misma pieza en las tres páginas, como
   transición entre bloques. El pulso entra por la izquierda, recorre la
   línea, enciende la cruz al llegar al centro, sigue por la derecha y se
   apaga; después una pausa y vuelve a empezar.

   Solo SVG + CSS —ni JS ni librerías—, así que también se ve sin
   JavaScript. Las tres animaciones comparten ciclo de 5 s y arrancan
   juntas, que es lo que las mantiene sincronizadas: el lado derecho no
   tiene su propia coreografía, solo el mismo barrido con 1.5 s de retraso.

   Ocupa el mismo alto que el hilo conductor al que sustituye, para que
   cambiarlo no mueva ni un píxel del resto de la página. */
.pulso {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(9px, 1.3vw, 15px);
  height: clamp(38px, 5vw, 58px);
  color: rgba(45, 111, 210, .34);
  overflow: hidden;
}
.pulso__lado { flex: 1 1 0; min-width: 0; height: 100%; }
.pulso__lado svg { display: block; width: 100%; height: 100%; }

.pulso__base { stroke: currentColor; }
/* fuera de la línea y apagado: es también el estado con movimiento reducido */
.pulso__haz {
  stroke: var(--blue-500);
  stroke-dasharray: .08 1; stroke-dashoffset: -1; opacity: 0;
  filter: drop-shadow(0 0 2px rgba(45, 111, 210, .45));
}

.pulso__cruz { flex: none; width: clamp(19px, 2.3vw, 25px); line-height: 0; }
.pulso__cruz svg { display: block; width: 100%; height: auto; overflow: visible; }
.pulso__cruzForma { fill: var(--red-600); }
.pulso__halo { fill: none; stroke: var(--red-600); stroke-width: 4; opacity: 0; }
.pulso__cruzForma, .pulso__halo { transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: no-preference) {
  .pulso__haz { animation: pulso-barrido 5s linear infinite; }
  .pulso__lado--der .pulso__haz { animation-delay: 1.5s; }
  .pulso__cruzForma { animation: pulso-cruz 5s ease-in-out infinite; }
  .pulso__halo { animation: pulso-halo 5s ease-out infinite; }
}

@keyframes pulso-barrido {
  0%   { stroke-dashoffset: .08; opacity: 0; }
  4%   { opacity: 1; }
  26%  { opacity: 1; }
  30%  { stroke-dashoffset: -1; opacity: 0; }
  100% { stroke-dashoffset: -1; opacity: 0; }
}
@keyframes pulso-cruz {
  0%, 24%   { transform: scale(1); }
  30%       { transform: scale(1.15); }
  42%, 100% { transform: scale(1); }
}
/* arranca ya por fuera de los brazos de la cruz: por dentro no se vería */
@keyframes pulso-halo {
  0%, 26% { transform: scale(.85); opacity: 0; }
  31%     { opacity: .55; }
  52%     { transform: scale(2.1); opacity: 0; }
  100%    { transform: scale(.85); opacity: 0; }
}

/* ═══════════ REVEALS ═══════════
   Bidireccionales y conscientes de la dirección: main.js marca en
   html[data-dir] hacia dónde se desplaza la página, y el elemento oculto
   espera del lado por el que va a entrar (bajando sube, subiendo baja).
   El leve desenfoque que se asienta al enfocar es lo que separa este
   reveal de un fade genérico. */
html.js [data-reveal] {
  opacity: 0; transform: translateY(30px);
  filter: blur(5px);
  transition: opacity .8s ease, transform .8s var(--ease-out), filter .7s ease;
  transition-delay: calc(var(--i, 0) * 95ms);
}
html.js[data-dir="up"] [data-reveal] { transform: translateY(-30px); }
html.js [data-reveal].in-view { opacity: 1; transform: none; filter: none; }

/* La deriva de profundidad la pinta main.js con transform inline */
.con-deriva { will-change: transform; }

/* ═══════════ MANIFIESTO ═══════════ */
.manifiesto__grid {
  display: grid; grid-template-columns: 1.12fr .88fr;
  gap: clamp(3rem, 6vw, 6rem); align-items: center;
}
.manifiesto__copy .h2 { margin-bottom: 1.5rem; }
.manifiesto__copy .lead { margin-bottom: 1.1rem; }
.manifiesto__copy p:not(.lead) { color: var(--slate); max-width: 56ch; }

.manifiesto__points { margin-top: 2rem; display: grid; gap: 14px; }
.manifiesto__points li {
  display: flex; align-items: center; gap: 14px;
  font-size: .98rem; font-weight: 600; color: var(--ink);
}
.manifiesto__points .ico {
  width: 38px; height: 38px; padding: 8px; flex: none;
  border-radius: 12px; color: var(--blue-600);
  background: linear-gradient(145deg, #EAF1FB, #DDE9F9);
}

.manifiesto__media { position: relative; max-width: 400px; margin-inline: auto; }
.manifiesto__frame {
  border-radius: var(--radius-card); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-2);
}
/* El scale no es decorativo: main.js desplaza esta foto hasta ±7 px con el
   paralaje y, sin ese 3 % de holgura por lado, el recorrido dejaba una franja
   blanca asomando arriba o abajo dentro del marco. Es el mismo recurso que
   usan .hero__arch (height: 114%) y .tec__media. */
.manifiesto__frame img {
  width: 100%; display: block;
  transform: translateY(var(--par, 0px)) scale(1.06);
}
.manifiesto__circle {
  position: absolute; left: -52px; bottom: 34px;
  width: 44%; border-radius: 50%;
  border: 6px solid var(--white); box-shadow: var(--shadow-2);
}

/* ═══════════ PILARES ═══════════ */
.section-head { max-width: 800px; margin-bottom: clamp(2.8rem, 5vw, 4.2rem); }
.section-head .lead { margin-top: 1.1rem; }
.pilares { position: relative; }
.pilares > .container { position: relative; }
/* Tres en fila mientras cada tarjeta conserve unos 280 px: por debajo, el
   titular «Diagnóstico y seguimiento completos» se partía en cuatro líneas
   sobre una columna de texto de 144 px. auto-fit baja sola a dos columnas
   —y a una en el teléfono, más abajo— sin necesidad de un punto de corte
   por cada tamaño de tableta. */
.pilares__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
  transition: box-shadow .35s var(--ease-out), border-color .35s;
}
.card:hover { box-shadow: var(--shadow-2); border-color: #CFDFF2; }

/* ── Tarjeta con fotografía: la foto se ve nítida arriba, el texto vive sobre blanco ── */
.has-bg { position: relative; display: flex; flex-direction: column; }
.cardbg {
  display: block; position: relative;
  aspect-ratio: var(--ratio, 16 / 10);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  overflow: hidden;
  background: var(--sky-2);
}
.cardbg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos, 50% 50%);
  transform: scale(1.01);
  transition: transform .9s var(--ease-out);
}
.has-bg:hover .cardbg img { transform: scale(1.06); }
/* la foto no corta a hueso contra el blanco: se apoya en un desvanecido */
.cardbg::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 26%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .32));
  pointer-events: none;
}

.pilar { padding: 0; }
.pilar__body { padding: 0 32px 36px; }
.pilar__icon {
  width: 56px; height: 56px; border-radius: 17px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #EAF1FB, #DDE9F9);
  color: var(--blue-600);
  margin-bottom: 24px;
  transition: transform .4s var(--ease-out);
}
/* el icono cose la fotografía con el texto */
.pilar.has-bg .pilar__icon {
  position: relative; z-index: 1;
  margin: -29px 0 20px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.pilar:hover .pilar__icon { transform: translateY(-3px) rotate(-4deg); }
.pilar__icon svg { width: 27px; height: 27px; }
.pilar h3 { font-size: 1.28rem; margin-bottom: .55rem; letter-spacing: -.01em; }
.pilar p { color: var(--slate); font-size: 1rem; }

.pilares__quote {
  margin: clamp(3rem, 5vw, 4.5rem) auto 0;
  max-width: 760px; text-align: center;
  font-size: clamp(1.25rem, 2.1vw, 1.62rem);
  line-height: 1.45; color: var(--navy-800);
}
.pilares__quote em { color: var(--red-600); }

/* ═══════════ ESPECIALIDADES ═══════════ */
.esp__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; margin-bottom: clamp(2.4rem, 4vw, 3.4rem);
}
.esp__head .lead { margin-top: .9rem; max-width: 52ch; }
.esp__num { color: var(--red-600); font-variant-numeric: tabular-nums; font-style: normal; }

.esp__search {
  display: flex; align-items: center; gap: 12px;
  width: min(380px, 100%);
  background: var(--white);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0 22px; height: 56px;
  box-shadow: var(--shadow-1);
  transition: border-color .2s, box-shadow .2s;
}
.esp__search:focus-within { border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(45, 111, 210, .14); }
.esp__search .ico { color: var(--slate); }
.esp__search input { border: 0; outline: 0; width: 100%; background: transparent; color: var(--ink); }
.esp__search input::placeholder { color: #93A3B8; }

/* ── Directorio de especialidades ──
   Un índice editorial, no un catálogo de tarjetas: solo el nombre y una
   flecha, separados por una línea muy fina. Las 27 caben de una vez y la
   sección pasa de más de 3.000 px a unos 500. Toda la información vive en
   el panel, que se abre al pulsar cualquier fila. */
.dir {
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(28px, 4vw, 56px);
  border-top: 1px solid var(--line);
}
.dir__fila { border-bottom: 1px solid var(--line); }
.dir__fila[hidden] { display: none; }

.dir__esp {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 18px 4px 18px 2px;
  text-align: left; color: var(--ink);
  transition: color .25s var(--ease-out), padding-left .3s var(--ease-out);
}
/* el filo azul que aparece al pasar el cursor */
.dir__esp::before {
  content: ""; position: absolute; left: -2px; top: 22%; bottom: 22%;
  width: 2px; border-radius: 2px; background: var(--blue-500);
  opacity: 0; transform: scaleY(.4);
  transition: opacity .25s, transform .3s var(--ease-out);
}
.dir__esp:hover, .dir__esp:focus-visible { color: var(--blue-600); padding-left: 14px; }
.dir__esp:hover::before, .dir__esp:focus-visible::before { opacity: 1; transform: scaleY(1); }

.dir__n {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.02rem, 1.5vw, 1.17rem);
  line-height: 1.25; letter-spacing: -.01em;
}
.dir__flecha {
  width: 17px; height: 17px; flex: none; color: var(--blue-300);
  transition: transform .3s var(--ease-out), color .25s;
}
.dir__esp:hover .dir__flecha,
.dir__esp:focus-visible .dir__flecha { transform: translateX(5px); color: var(--blue-600); }


.esp__foot { margin-top: clamp(2.2rem, 4vw, 3rem); text-align: center; }
.esp__empty { margin-top: 1.4rem; color: var(--slate); }
.esp__empty a { color: var(--red-600); font-weight: 650; }
.esp__empty a:hover { text-decoration: underline; }

/* ═══════════ PROCESO ═══════════ */
.proceso {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #F8FBFE 0%, #E9F1FB 100%);
}
.proceso__glow {
  position: absolute; width: 720px; height: 720px; border-radius: 50%;
  left: 50%; top: -420px; translate: -50% 0; filter: blur(100px);
  background: rgba(255, 255, 255, .8); pointer-events: none;
}
.proceso > .container { position: relative; }
.proceso .section-head { text-align: center; margin-inline: auto; }
.proceso .eyebrow { justify-content: center; }

.pasos {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  counter-reset: paso;
}
.paso {
  position: relative;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--radius-card);
  padding: 32px 26px 30px;
  box-shadow: var(--shadow-1);
  transition: transform .4s var(--ease-out), box-shadow .4s;
}
.paso:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
/* con foto propia, el vidrio esmerilado ya no aporta y sí cuesta render */
.paso.has-bg { padding: 0; background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; }
.paso__body { padding: 0 24px 28px; }
.paso:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: -13px;
  width: 26px; height: 1.5px;
  background: linear-gradient(90deg, var(--blue-300), transparent);
}
.paso .cardbg { --ratio: 4 / 3; }
.paso__n {
  font-family: var(--font-serif); font-size: .95rem; font-weight: 500;
  color: var(--red-600); letter-spacing: .06em;
}
/* el número se queda sobre la foto, como una etiqueta de paso */
.paso.has-bg .paso__n {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 3px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 1px 3px rgba(7, 31, 61, .14);
}
.paso__ico {
  display: grid; place-items: center;
  width: 50px; height: 50px; border-radius: 15px; margin: 14px 0 18px;
  background: linear-gradient(145deg, #FFFFFF, #E8F0FB);
  border: 1px solid var(--line);
  color: var(--blue-600);
}
.paso.has-bg .paso__ico {
  position: relative; z-index: 1;
  margin: -26px 0 16px;
  background: var(--white);
  box-shadow: var(--shadow-1);
}
.paso__ico svg { width: 25px; height: 25px; }
.paso h3 { font-size: 1.08rem; margin-bottom: .45rem; letter-spacing: -.01em; }
.paso p { font-size: .94rem; color: var(--slate); line-height: 1.55; }

/* ═══════════ SERVICIOS ═══════════
   El mensaje manda. "Consulta, diagnóstico y seguimiento" es lo que
   diferencia al centro, así que va en tipografía mayor que un h2 normal,
   y el ciclo de tres pasos lo demuestra antes de enseñar el catálogo.
   Las seis áreas son fotografía con el texto encima: en tarjetas blancas
   ocupaban el triple de alto y comunicaban menos. */
.serv__claim {
  text-align: center; margin-inline: auto;
}
.serv__claim .eyebrow { justify-content: center; }
.serv__h2 {
  font-size: clamp(2.15rem, 4.4vw, 3.6rem);
  line-height: 1.08; letter-spacing: -.02em;
  /* la frase corre a lo ancho y solo parte en frases naturales, nunca palabra a palabra */
  text-wrap: balance;
}
.serv__h2 em { display: block; margin-top: .08em; }

/* ── El ciclo: consulta → diagnóstico → seguimiento ── */
.ciclo {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(16px, 3vw, 34px);
  margin: clamp(1.7rem, 3.4vw, 2.6rem) 0 clamp(2.4rem, 4.6vw, 3.6rem);
}
.ciclo__paso {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  font-weight: 650; font-size: clamp(.98rem, 1.5vw, 1.12rem);
  color: var(--navy-900); letter-spacing: -.01em;
}
.ciclo__paso + .ciclo__paso::before {
  content: ""; flex: none;
  width: clamp(20px, 4vw, 44px); height: 1.5px;
  margin-right: clamp(3px, 1.5vw, 10px);
  background: linear-gradient(90deg, var(--blue-300), var(--blue-500));
}
.ciclo__ico {
  width: 46px; height: 46px; border-radius: 14px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #FFFFFF, #E8F0FB);
  border: 1px solid var(--line); color: var(--blue-600);
  box-shadow: var(--shadow-1);
}
.ciclo__ico svg { width: 23px; height: 23px; }

/* ── Las seis áreas ── */
.areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* La proporción manda mientras el texto quepa; si en una pantalla estrecha
   el rótulo necesita más alto, «min-height: fit-content» deja crecer la
   tarjeta en lugar de recortar la palabra. Por eso el texto va en flujo
   (flex al pie) y no en posición absoluta. */
.area {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 4 / 3; min-height: fit-content;
  border-radius: var(--radius-card);
  background: var(--navy-800);
  box-shadow: var(--shadow-1);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.area > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos, 50% 45%);
  transition: transform .7s var(--ease-out);
}
.area__velo {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(5, 21, 43, .92) 0%, rgba(5, 21, 43, .66) 36%,
    rgba(5, 21, 43, .14) 70%, rgba(5, 21, 43, .04) 100%);
}
.area__txt { position: relative; padding: 20px 22px 22px; color: #fff; }
.area__ico {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 12px; margin-bottom: 12px;
  background: rgba(255, 255, 255, .17);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
}
.area__ico svg { width: 22px; height: 22px; }
.area__t {
  display: block; font-family: var(--font-serif); font-weight: 500;
  font-size: 1.24rem; line-height: 1.18; letter-spacing: -.01em;
}
.area__d { display: block; margin-top: .32rem; font-size: .88rem; line-height: 1.45; color: rgba(255, 255, 255, .84); }
.area:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }
.area:hover > img { transform: scale(1.06); }

/* La farmacia salió de las seis grandes áreas, pero sigue siendo un
   diferenciador real: una línea, sin tarjeta propia. */
.serv__extra {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap; text-align: center;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  font-size: .95rem; color: var(--slate);
}
.serv__extra .ico { color: var(--blue-600); }


/* ═══════════ TECNOLOGÍA ═══════════ */
.tec__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.tec__card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: box-shadow .4s var(--ease-out);
}
.tec__card:hover { box-shadow: var(--shadow-3); }
.tec__card--wide {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1.2fr .8fr; align-items: stretch;
}
.tec__media { overflow: hidden; background: var(--sky); }
.tec__card--wide .tec__media { aspect-ratio: auto; min-height: 320px; }
.tec__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform: translateY(var(--par, 0px)) scale(1.06); }
.tec__body { padding: 30px 30px 32px; display: flex; flex-direction: column; justify-content: center; }
.tec__card:not(.tec__card--wide) .tec__media { aspect-ratio: 16 / 10; }
.tec__ico {
  width: 50px; height: 50px; border-radius: 15px;
  display: grid; place-items: center; margin-bottom: 16px;
  background: linear-gradient(145deg, #EAF1FB, #DCE8F8); color: var(--blue-600);
}
.tec__ico svg { width: 25px; height: 25px; }
.tec__card h3 { font-size: 1.24rem; margin-bottom: .5rem; letter-spacing: -.01em; }
.tec__card p { color: var(--slate); font-size: .97rem; }

/* ═══════════ INSTALACIONES ═══════════ */
.show { display: grid; gap: clamp(3rem, 6vw, 5.5rem); }
.show__row {
  display: grid; grid-template-columns: 1.12fr .88fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.show__row--rev .show__media { order: 2; }

.show__media {
  position: relative; overflow: hidden;
  border-radius: 24px;
  box-shadow: var(--shadow-3);
  cursor: zoom-in;
  clip-path: inset(0 round 24px);
}
.show__media img { width: 100%; transition: transform 1.1s var(--ease-out); }
.show__media:hover img { transform: scale(1.045); }
.show__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7, 31, 61, .28), transparent 42%);
  opacity: 0; transition: opacity .4s;
}
.show__media:hover::after { opacity: 1; }
.show__zoom {
  position: absolute; right: 18px; bottom: 18px; z-index: 2;
  padding: 10px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .94); color: var(--navy-800);
  font-size: .82rem; font-weight: 700; letter-spacing: .02em;
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s, transform .35s var(--ease-out);
}
.show__media:hover .show__zoom { opacity: 1; transform: none; }

.show__n {
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue-500); margin-bottom: 1rem;
}
.show__copy h3 { font-size: clamp(1.4rem, 2.3vw, 1.95rem); line-height: 1.22; margin-bottom: .9rem; }
.show__copy p { color: var(--slate); max-width: 44ch; }

.show__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.show__thumb {
  position: relative; overflow: hidden; border-radius: 18px;
  box-shadow: var(--shadow-1); cursor: zoom-in;
}
.show__thumb img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform .9s var(--ease-out); }
.show__thumb:hover img { transform: scale(1.06); }
.show__thumb figcaption {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 26px 16px 13px;
  background: linear-gradient(to top, rgba(6, 24, 48, .68), transparent);
  color: #fff; font-size: .85rem; font-weight: 650;
}

html.js .show__media[data-lb] { transition: clip-path 1.1s var(--ease-out); }
html.js [data-reveal] .show__media { will-change: clip-path; }

/* ═══════════ FUNDADORA ═══════════ */
.fund__grid {
  display: grid; grid-template-columns: .86fr 1.14fr;
  gap: clamp(3rem, 7vw, 6rem); align-items: center;
}
.fund__media { position: relative; max-width: 420px; margin-inline: auto; }
.fund__ring {
  border-radius: 50%; padding: 12px;
  background: linear-gradient(140deg, var(--blue-500), var(--navy-800) 55%, var(--red-600));
  box-shadow: var(--shadow-2);
}
.fund__ring img { border-radius: 50%; }
.fund__tag {
  position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%);
  padding: 14px 26px; border-radius: 16px;
  text-align: center; width: max-content; max-width: 92%;
  font-size: .87rem; color: var(--slate); line-height: 1.4;
}
.fund__tag strong { display: block; color: var(--ink); font-size: .98rem; }

.fund__copy .h2 { margin-bottom: 1.2rem; }
.fund__copy .lead { margin-bottom: 1.6rem; color: var(--slate); font-weight: 500; }

/* En HOME la biografía son tres líneas: la fundadora respalda la filosofía,
   no la protagoniza. Las credenciales completas viven en historia.html. */
.fund__bio {
  max-width: 54ch; color: var(--slate); font-size: 1.06rem;
  margin-bottom: clamp(1.7rem, 3vw, 2.2rem);
  text-wrap: pretty;
}

.fund__creds { display: grid; gap: 18px; }
.fund__creds li {
  position: relative; padding-left: 26px;
  font-size: .97rem; color: var(--slate); line-height: 1.6;
}
.fund__creds li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 10px; height: 10px; border-radius: 3px;
  background: var(--blue-500); opacity: .9;
}
.fund__creds li::after {
  content: ""; position: absolute; left: 4.5px; top: calc(.55em + 14px); bottom: -12px;
  width: 1px; background: linear-gradient(var(--blue-300), transparent);
}
.fund__creds li:last-child::after { display: none; }
.fund__creds strong { display: block; color: var(--ink); font-size: 1.02rem; margin-bottom: .15rem; }

/* ═══════════ B2B ═══════════ */
.b2b {
  position: relative; overflow: hidden;
  background: linear-gradient(168deg, #EAF2FB, #D9E7F7 70%);
  color: var(--ink);
}
.b2b__glow {
  position: absolute; width: 760px; height: 760px; border-radius: 50%;
  right: -240px; top: -300px; filter: blur(110px);
  background: rgba(255, 255, 255, .65); pointer-events: none;
}
.b2b > .container { position: relative; }
.b2b .section-head { text-align: center; margin-inline: auto; }
.b2b .eyebrow { justify-content: center; }

.b2b__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.b2b__card {
  padding: 32px 26px; border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: box-shadow .35s var(--ease-out), border-color .3s;
}
.b2b__card:hover { box-shadow: var(--shadow-2); border-color: #CBDCF0; }
.b2b__ico {
  width: 50px; height: 50px; border-radius: 15px;
  display: grid; place-items: center; margin-bottom: 18px;
  background: linear-gradient(145deg, #EAF1FB, #DCE8F8); color: var(--blue-600);
}
.b2b__ico svg { width: 25px; height: 25px; }
.b2b__card h3 { font-size: 1.06rem; margin-bottom: .5rem; }
.b2b__card p { font-size: .92rem; line-height: 1.6; color: var(--slate); }

.b2b__cta {
  margin-top: clamp(2.6rem, 5vw, 4rem);
  padding: clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 3.25rem);
  border-radius: var(--radius-card);
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.b2b__cta h3 { font-size: clamp(1.35rem, 2.3vw, 1.8rem); line-height: 1.25; }
.b2b__cta h3 em { color: var(--blue-600); font-style: italic; font-weight: 400; }
.b2b__cta p { margin-top: .5rem; color: var(--slate); font-size: .95rem; }
.b2b__cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ═══════════ PUERTA A EMPRESAS ═══════════
   Una franja, no una sección: el paciente pasa de largo sin esfuerzo y
   quien viene por convenios encuentra su entrada. La página completa,
   con lenguaje corporativo, vive en empresas.html. */
.b2bpuerta { padding-block: clamp(2.6rem, 5vw, 4.2rem); }
.puerta {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: clamp(16px, 3vw, 28px);
  padding: clamp(20px, 3vw, 28px) clamp(22px, 3.5vw, 34px);
  border-radius: var(--radius-card);
  background: linear-gradient(160deg, #EFF5FC, #E2ECF8);
  border: 1px solid var(--line);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .3s;
}
.puerta:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: #C6D9F0; }
.puerta__ico {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 15px;
  background: var(--white); border: 1px solid var(--line);
  color: var(--blue-600); box-shadow: var(--shadow-1);
}
.puerta__ico svg { width: 25px; height: 25px; }
.puerta__t {
  display: block; font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.12rem, 2vw, 1.4rem); line-height: 1.25;
  color: var(--navy-900); letter-spacing: -.01em;
}
.puerta__d { display: block; margin-top: .28rem; font-size: .93rem; color: var(--slate); }
.puerta__cta {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 650; font-size: .95rem; color: var(--blue-600); white-space: nowrap;
}
.puerta__cta .ico { width: 18px; height: 18px; transition: transform .3s var(--ease-out); }
.puerta:hover .puerta__cta .ico { transform: translateX(4px); }

/* ═══════════ LA LLEGADA ═══════════
   Una secuencia, no una sección: portada, cifras, orientación,
   la señal (la iguana), el recorrido, cómo venir, mapas y datos. */
.lleg { --aire: clamp(4rem, 8vw, 7.5rem); position: relative; }
.lleg__h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.06; letter-spacing: -.025em; }
.lleg__h3 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.1; letter-spacing: -.02em; color: var(--navy-900); }
.lleg__h2 em, .lleg__h3 em { font-style: italic; font-weight: 400; }
.lleg__h3 em { color: var(--blue-600); }

/* ── Portada ── */
.lleg__hero {
  position: relative; isolation: isolate;
  /* svh = alto de pantalla con las barras del navegador DESPLEGADAS. En el
     iPhone, 84vh mide contra la ventana grande y la dirección y los botones,
     que viven al pie de esta portada, quedaban debajo de la barra de Safari
     hasta que el visitante hacía scroll. La línea vh se queda como respaldo
     para los navegadores que aún no entienden svh. */
  min-height: min(84vh, 760px);
  min-height: min(84svh, 760px);
  display: flex; align-items: flex-end;
  padding: clamp(3rem, 8vw, 7rem) 0 clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  background: var(--navy-900);
}
.lleg__heroFoto { position: absolute; inset: 0; z-index: 0; }
.lleg__heroFoto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  transform: scale(1.06);
}
html.js .lleg__heroFoto img { animation: llegZoom 16s var(--ease-soft) forwards; }
@keyframes llegZoom { from { transform: scale(1.1); } to { transform: scale(1.01); } }
.lleg__heroVelo {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 21, 43, .5) 0%, rgba(5, 21, 43, .1) 32%, rgba(5, 21, 43, .78) 82%, rgba(5, 21, 43, .92) 100%),
    linear-gradient(90deg, rgba(5, 21, 43, .6) 0%, rgba(5, 21, 43, 0) 55%);
}
.lleg__marca {
  position: absolute; z-index: 1; right: -4%; bottom: 6%;
  width: min(46%, 620px); height: auto;
  fill: #FFFFFF; opacity: .07; pointer-events: none;
}
.lleg__heroTxt { position: relative; z-index: 2; color: var(--white); }
.lleg__heroTxt .eyebrow { color: #C6DCF7; }
.lleg__titulo {
  font-size: clamp(2.4rem, 6.4vw, 5.4rem); line-height: 1.02;
  letter-spacing: -.03em; color: var(--white);
  max-width: 15ch; margin-bottom: 1.4rem;
}
.lleg__titulo em { font-style: italic; font-weight: 400; color: #BFD8F7; }
.lleg__dir { font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.6; color: rgba(255, 255, 255, .95); }
.lleg__dir span { color: rgba(255, 255, 255, .7); font-size: .94em; }
.lleg__heroCta { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 2.2rem; }
.lleg__enlace {
  display: inline-flex; align-items: center; gap: 9px;
  color: rgba(255, 255, 255, .92); font-size: 1rem;
  border-bottom: 1.5px solid rgba(255, 255, 255, .35);
  padding-bottom: 3px; transition: border-color .25s, color .25s;
}
.lleg__enlace:hover { color: var(--white); border-color: var(--white); }
.lleg__scroll {
  position: absolute; z-index: 2; left: 50%; bottom: 18px; translate: -50% 0;
  width: 1px; height: 46px; overflow: hidden; background: rgba(255, 255, 255, .22);
}
.lleg__scroll span { display: block; width: 100%; height: 40%; background: var(--white); }
html.js .lleg__scroll span { animation: llegBaja 2.4s var(--ease-soft) infinite; }
@keyframes llegBaja { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(260%); } }

/* ── Cifras ── */
.lleg__cifras { background: var(--white); border-bottom: 1px solid var(--line); }
.lleg__cifrasFila {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: clamp(2.4rem, 5vw, 4rem) 0;
}
.cifra { text-align: center; padding: 0 14px; position: relative; }
.cifra + .cifra::before {
  content: ""; position: absolute; left: 0; top: 12%; bottom: 12%;
  width: 1px; background: var(--line);
}
.cifra__n {
  display: block; font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; color: var(--navy-900);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
/* la unidad, escrita entera, junto al número y sin robarle protagonismo */
.cifra__u {
  font-family: var(--font-sans); font-style: normal; font-weight: 600;
  font-size: max(.8rem, .33em); letter-spacing: .01em;
  color: var(--slate); margin-left: .2em;
}
.cifra__u--pre { margin-left: 0; margin-right: .22em; }
/* El rótulo pasó de dos palabras en versales a una frase que explica el dato.
   En versales con tracking, 45 caracteres se vuelven ilegibles: caja baja. */
/* «>» a propósito: dentro de .cifra__n ahora vive el span del contador y
   no debe heredar los estilos del rótulo. */
.cifra > span {
  display: block; margin-top: .6rem; font-size: .87rem; line-height: 1.4;
  letter-spacing: .005em; color: var(--slate);
  max-width: 24ch; margin-inline: auto; text-wrap: pretty;
}

/* ── Orientación ── */
.lleg__orienta {
  display: grid; grid-template-columns: .85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding: var(--aire) 0;
}
.lleg__lead { color: var(--slate); font-size: 1.05rem; margin-top: .9rem; }
.lleg__pistas { margin-top: 2rem; display: grid; gap: 14px; }
.lleg__pistas li {
  display: flex; gap: 13px; align-items: center;
  font-size: 1rem; color: var(--ink);
}
.lleg__pistas .ico { color: var(--blue-500); flex: none; }
.lleg__plano {
  border-radius: var(--radius-card); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-2);
  background: var(--white); margin: 0;
}
.lleg__plano figcaption {
  font-size: .74rem; color: var(--slate);
  padding: 11px 18px; border-top: 1px solid var(--line); background: var(--sky-2);
}
.lleg__plano figcaption a { color: var(--blue-600); text-decoration: underline; text-underline-offset: 2px; }

/* El plano: ilustración editorial sobre geometría real de OpenStreetMap */
.pl { display: block; width: 100%; height: auto; }
.pl__fondo { fill: #EDF3FA; }
.pl__agua { fill: none; stroke: #CBE0F5; stroke-width: 78; stroke-linecap: round; stroke-linejoin: round; }
.pl__vecino { fill: #E2ECF7; stroke: #D5E3F3; stroke-width: 1.5; }
.pl__predio { fill: #FFFFFF; stroke: #C6D9F0; stroke-width: 2.5; }
.pl__parqueo { fill: url(#plRayas); stroke: #C6D9F0; stroke-width: 1.5; }
.pl__borde .pl__via { fill: none; stroke: #D0DFF1; stroke-linecap: round; }
.pl__borde .pl__via--p { stroke-width: 34; }
.pl__borde .pl__via--s { stroke-width: 26; }
.pl__calzada .pl__via { fill: none; stroke: #FFFFFF; stroke-linecap: round; }
.pl__calzada .pl__via--p { stroke-width: 28; }
.pl__calzada .pl__via--s { stroke-width: 20; }
.pl__calle {
  font-family: var(--font-sans); font-size: 15px; font-weight: 700;
  letter-spacing: .1em; fill: #6C829C; text-anchor: middle;
}
.pl__calleAlt {
  font-family: var(--font-sans); font-size: 12.5px; fill: #91A5BD;
  text-anchor: middle; font-style: italic;
}
.pl__agua-rot {
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  letter-spacing: .14em; fill: #8FB3D8; text-anchor: middle;
}
.pl__flechas path { fill: none; stroke: #A9BFD8; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pl__marca circle { fill: var(--white); stroke: #C6D9F0; stroke-width: 2; }
.pl__marca--p circle { fill: #E6EEFA; }
.pl__pIcono {
  font-family: var(--font-sans); font-size: 21px; font-weight: 700;
  fill: var(--blue-600); text-anchor: middle;
}
.pl__iguana { fill: var(--blue-600); }
.pl__rotulo {
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  fill: var(--navy-800); text-anchor: middle;
}
.pl__rotulo--sm { font-size: 13px; font-weight: 500; fill: #64799A; }
.pl__nota { font-family: var(--font-sans); font-size: 12px; fill: #7C8FA9; text-anchor: middle; }
.pl__pin { fill: var(--red-600); }
.pl__cruz { fill: #FFFFFF; }
.pl__aquiTxt {
  font-family: var(--font-serif); font-size: 22px; font-weight: 600;
  fill: var(--navy-900); text-anchor: middle;
}
.pl__halo { fill: rgba(194, 31, 44, .13); }
.pl__norte circle { fill: rgba(255, 255, 255, .9); stroke: #D0DFF1; stroke-width: 1.5; }
.pl__norte text {
  font-family: var(--font-sans); font-size: 12px; font-weight: 700;
  fill: #6C829C; text-anchor: middle;
}
.pl__aguja { fill: var(--blue-500); }
@keyframes plLatido {
  0% { r: 22; opacity: .55; }
  70% { r: 46; opacity: 0; }
  100% { r: 46; opacity: 0; }
}
html.js .pl__halo { animation: plLatido 3.4s var(--ease-out) infinite; }
html.js .pl__halo--2 { animation-delay: 1.7s; }

/* ── La señal: la iguana ── */
.lleg__iguana {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(155deg, #0B2B52 0%, #071F3D 55%, #05152B 100%);
  color: var(--white);
  padding: clamp(4.5rem, 10vw, 9rem) 0;
}
/* La foto se ve completa: contain la ajusta a la altura del banner sin recortar ni ampliar */
.lleg__iguanaFoto {
  position: absolute; z-index: 0; pointer-events: none;
  right: 0; top: 50%; translate: 0 -50%;
  height: 100%; width: auto; max-width: 62%;
  object-fit: contain; object-position: right center;
  /* el filo izquierdo se disuelve en el degradado, para que el texto respire */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%);
  mask-image: linear-gradient(to right, transparent 0%, #000 22%);
}
html.js .lleg__iguanaFoto { opacity: 0; transform: translateX(60px); transition: opacity 1.1s var(--ease-out), transform 1.3s var(--ease-out); }
html.js .lleg__iguana.is-in .lleg__iguanaFoto { opacity: 1; transform: none; }
/* el contenedor mantiene su ancho; lo que se estrecha es el contenido */
.lleg__iguanaTxt { position: relative; z-index: 1; }
.lleg__iguanaTxt > * { max-width: 26ch; }
.lleg__iguanaTxt .lleg__h2 { color: var(--white); margin: .6rem 0 1rem; }
.lleg__iguanaTxt .lleg__h2 em { color: #7FB2F0; }
.lleg__iguanaTxt p { color: rgba(255, 255, 255, .75); font-size: 1.05rem; line-height: 1.65; }

/* ── El recorrido ── */
.lleg__ruta { padding: var(--aire) 0 calc(var(--aire) * .7); }
.lleg__ruta .lleg__h3 { margin-bottom: clamp(2rem, 4vw, 3.4rem); }
.ruta { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 26px); align-items: start; }
.ruta__paso { position: relative; }
.ruta__foto {
  margin: 0 0 18px; overflow: hidden; border-radius: var(--radius-card);
  background: var(--sky-2); aspect-ratio: 4 / 5; cursor: zoom-in;
  box-shadow: var(--shadow-1);
}
.ruta__paso--alto .ruta__foto { aspect-ratio: 3 / 5; }
.ruta__paso:nth-child(even) { margin-top: clamp(24px, 5vw, 70px); }
.ruta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.ruta__foto:hover img { transform: scale(1.06); }
.ruta__n {
  font-family: var(--font-serif); font-size: .95rem; color: var(--red-600);
  letter-spacing: .08em; display: block; margin-bottom: .3rem;
}
.ruta__txt h4 { font-size: 1.1rem; letter-spacing: -.01em; margin-bottom: .25rem; }
.ruta__txt p { font-size: .92rem; color: var(--slate); }

/* ── Cómo prefieres llegar ──
   El mapa y las cuatro opciones comparten altura: quien entra a esta sección
   quiere resolver un trámite, no recorrer una galería. La foto acompaña. */
.lleg__llegada { padding-bottom: clamp(2.4rem, 4vw, 3.6rem); }
.lleg__llegadaHead { padding-bottom: clamp(1.2rem, 2.2vw, 1.9rem); }

.lleg__split {
  /* la columna de texto manda sobre el ancho: si se estrecha, cada dato cae en
     dos líneas y las cuatro tarjetas crecen de golpe */
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(14px, 1.6vw, 20px);
  align-items: stretch;
}
/* el mapa deja de tener alto propio: se estira a lo que midan las tarjetas */
.lleg__split .lleg__mapa { height: auto; min-height: 100%; }

.modos { display: grid; gap: clamp(10px, 1.1vw, 14px); align-content: start; }

/* Tarjeta horizontal: foto · información · acción, todo en una franja baja.
   La foto sigue siendo panorámica y sigue entrando por object-fit, así que el
   archivo de 1600×1000 se reemplaza sin tocar nada de esto. */
.modo {
  position: relative;
  display: grid; grid-template-columns: clamp(132px, 27%, 190px) 1fr auto;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s var(--ease-out);
}
.modo:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--blue-300); }

.modo__foto { position: relative; overflow: hidden; background: var(--navy-900); align-self: stretch; }
.modo__foto img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos, 50% 50%);
  transition: transform 1s var(--ease-out);
}
.modo:hover .modo__foto img { transform: scale(1.05); }
/* funde el filo derecho de la foto con el blanco de la tarjeta */
.modo__foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, transparent 62%, rgba(255, 255, 255, .22) 100%);
}

.modo__cuerpo {
  min-width: 0;
  padding: clamp(13px, 1.3vw, 17px) clamp(14px, 1.4vw, 20px);
}
/* ícono y título comparten renglón: ahorra una línea entera por tarjeta */
.modo__ico {
  float: left; margin: 1px 10px 0 0;
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--sky); color: var(--blue-600);
  transition: color .4s var(--ease-out), background .4s var(--ease-out), transform .4s var(--ease-out);
}
.modo__ico svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.modo:hover .modo__ico { background: var(--blue-600); color: var(--white); transform: scale(1.07); }

.modo__titulo { font-size: 1rem; margin: 0 0 .45rem; letter-spacing: -.01em; line-height: 1.9; }

.modo__datos { display: grid; gap: 3px; clear: both; }
.modo__datos li {
  font-size: .845rem; color: var(--slate); line-height: 1.4;
  padding-left: 14px; position: relative;
}
.modo__datos li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--blue-300);
}

/* la acción vive en su propia columna: no empuja el alto de la tarjeta */
.modo__btn {
  margin: 0 clamp(14px, 1.4vw, 18px) 0 clamp(8px, 1vw, 14px);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--sky-2);
  font: inherit; font-size: .84rem; font-weight: 650;
  color: var(--navy-800); text-decoration: none; cursor: pointer;
  transition: background .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out);
}
.modo__btn:hover, .modo__btn:focus-visible { background: var(--blue-600); border-color: var(--blue-600); color: var(--white); }
.modo__flecha {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .35s var(--ease-out);
}
.modo__btn:hover .modo__flecha { transform: translateX(3px); }
.modo__btn.is-ok { background: var(--blue-600); border-color: var(--blue-600); color: var(--white); }

/* el automóvil sigue mandando, pero con un acento —no con el triple de alto */
.modo--auto { border-color: var(--blue-300); box-shadow: var(--shadow-2); }
.modo--auto .modo__titulo { font-size: 1.08rem; }
.modo--auto .modo__ico { background: var(--blue-600); color: var(--white); }
/* la cabeza de la iguana manda el encuadre: es lo que la hace reconocible */
.modo--taxi .modo__foto img { --pos: 42% 50%; }

/* Metrovía: ilustración propia hasta que haya foto de la estación.
   Se comporta igual que una foto —llena el hueco recortando por los lados—
   así que el día que llegue la foto, el layout no se entera. */
.modo__foto--ilustra { background: var(--navy-900); }
.mv { width: 100%; height: 100%; display: block; }
.mv__bus { transition: transform 1.1s var(--ease-out); }
/* 130 en unidades del viewBox: el bus queda a un palmo de la parada, sin tocarla */
.modo:hover .mv__bus { transform: translateX(130px); }

/* ── Mapa ── */
.lleg__mapa {
  position: relative; border-radius: var(--radius-card); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-2); height: 420px;
}
.lleg__mapa iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.86) contrast(1.02); }
.lleg__acciones {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  padding: 26px 0 var(--aire);
}
.lleg__acciones .ico { width: 19px; height: 19px; }
.lleg__acciones .btn.is-ok { border-color: var(--blue-500); color: var(--blue-600); }

/* ── Datos ── */
.lleg__datos {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 4vw, 48px);
  padding-bottom: var(--aire); border-top: 1px solid var(--line); padding-top: var(--aire);
}
.lleg__datos h4 {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--blue-600); margin-bottom: .9rem;
}
.lleg__datos p { font-size: 1rem; line-height: 1.75; color: var(--slate); }
.lleg__datos a { color: var(--slate); border-bottom: 1.5px solid transparent; transition: color .2s, border-color .2s; }
.lleg__datos a:hover { color: var(--blue-500); border-color: currentColor; }
.lleg__nota { margin-top: .7rem; font-size: .86rem; color: #8194AC; }
.lleg__nota em { font-style: normal; color: var(--navy-800); }
.lleg__cerrado { color: var(--red-600); }

/* ═══════════ CIERRE · EL ÚLTIMO LATIDO ═══════════ */
.cierre {
  position: relative; overflow: hidden;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(5rem, 8vw, 7.5rem);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--sky) 100%);
  text-align: center;
}
.cierre__latido { color: var(--blue-300); margin-bottom: clamp(1rem, 3vw, 2.4rem); }
.cierre__latido svg { display: block; width: 100%; height: clamp(70px, 9vw, 120px); }
.latido__line, .latido__peak path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js .cierre__latido.is-in .latido__line { transition: stroke-dashoffset 1.5s var(--ease-soft); stroke-dashoffset: 0; }
html.js .cierre__latido.is-in .latido__peak path { transition: stroke-dashoffset .55s ease-out 1.35s; stroke-dashoffset: 0; }
html:not(.js) .latido__line, html:not(.js) .latido__peak path { stroke-dashoffset: 0; }

.latido__cruz { fill: var(--red-600); opacity: 0; transform-box: fill-box; transform-origin: center; }
html.js .cierre__latido.is-in .latido__peak { transition: opacity .45s ease 2.05s; }
html.js .cierre__latido.is-in .latido__cruz {
  animation: cruz-in .7s var(--ease-out) 1.95s forwards;
}
@keyframes cruz-in {
  0% { opacity: 0; transform: scale(.35) rotate(-24deg); }
  60% { opacity: 1; transform: scale(1.08) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

.cierre__inner { max-width: 720px; margin-inline: auto; }
.cierre .h2 { margin-bottom: 1rem; }
.cierre__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 2.2rem; }

/* ═══════════ PÁGINAS INTERNAS (historia · empresas) ═══════════
   Mismo sistema visual, sin Brand Intro y sin portada fotográfica: estas
   páginas se abren con tipografía, que es lo que se viene a leer. */
.pag { padding: clamp(8rem, 14vh, 10.5rem) 0 clamp(2.5rem, 5vw, 4rem); }

.migas {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: .84rem; color: var(--slate);
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.migas a { color: var(--blue-500); font-weight: 600; }
.migas a:hover { color: var(--blue-600); text-decoration: underline; }
.migas span[aria-hidden] { opacity: .45; }

/* La medida del titular se mide en «em» sobre su propio cuerpo, no en «ch»
   sobre el del body: con 60ch el display de 3.85rem caía en una columna de
   500 px y el título se partía en siete líneas. Con 14.5em entra en cuatro. */
.pag__head { max-width: 62rem; }
.pag__h1 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(2.25rem, 4.8vw, 3.85rem);
  line-height: 1.07; letter-spacing: -.02em;
  color: var(--ink); text-wrap: balance;
  max-width: 14.5em;
}
.pag__h1 em { font-style: italic; font-weight: 400; color: var(--blue-600); }
.pag__head .lead { margin-top: 1.4rem; max-width: 52ch; }

/* ── Cabecera con fotografía real de fondo ──
   El texto pasa a blanco sobre velo azul marino: es el mismo recurso que la
   portada de «Estamos cerca de ti» en HOME, no un componente nuevo. El velo
   carga hacia la izquierda, donde vive el texto, y suelta la derecha para
   que la fotografía se vea. */
.pag--foto {
  position: relative; overflow: hidden;
  background: var(--navy-900);
  padding: clamp(9rem, 17vh, 12.5rem) 0 clamp(4rem, 7vw, 6.5rem);
}
.pag__foto { position: absolute; inset: 0; }
.pag__foto img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos, 50% 50%);
}
.pag__velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(5, 21, 43, .94) 0%, rgba(5, 21, 43, .88) 38%,
                            rgba(5, 21, 43, .58) 70%, rgba(5, 21, 43, .34) 100%),
    linear-gradient(to bottom, rgba(5, 21, 43, .45), rgba(5, 21, 43, .12));
}
.pag__inner { position: relative; }

.pag--foto .migas { color: rgba(255, 255, 255, .68); }
.pag--foto .migas a { color: rgba(255, 255, 255, .92); }
.pag--foto .migas a:hover { color: #fff; }
.pag--foto .eyebrow { color: var(--blue-300); }
.pag--foto .pag__h1 { color: #fff; }
.pag--foto .pag__h1 em { color: var(--blue-300); }
.pag--foto .lead { color: rgba(255, 255, 255, .87); }
.pag--foto .btn--ghost-light { border-color: rgba(255, 255, 255, .45); color: #fff; }
.pag--foto .btn--ghost-light:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.pag__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(1.8rem, 3.5vw, 2.4rem); }

/* ── Por qué existe este centro (historia) ──
   La fotografía real del pasillo es el fondo de la sección, sin velo oscuro:
   el texto vive en un panel de vidrio alineado a la derecha, sobre la pared
   blanca del encuadre, y la foto —madera, señalética azul, profundidad—
   conserva protagonismo en la mitad izquierda. */
.origen { position: relative; overflow: hidden; background: var(--porcelain); }
.origen__foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 36% 62%;
}
.origen__inner {
  position: relative;
  display: grid; grid-template-columns: 1fr minmax(0, 34.5rem);
  align-items: center;
  min-height: clamp(27rem, 55vh, 36rem);
}
.origen__panel { grid-column: 2; border-radius: var(--radius-card); padding: clamp(1.8rem, 3.2vw, 2.9rem); }
.origen__panel .h2 { margin-bottom: 1.1rem; }
.origen__frase {
  font-size: clamp(1.32rem, 2.2vw, 1.72rem);
  line-height: 1.4;
  color: var(--ink); text-wrap: balance;
}
.origen__frase em { color: var(--blue-600); }
.origen__nota { margin-top: 1rem; color: var(--slate); max-width: 46ch; }

@media (max-width: 860px) {
  /* La foto pasa a franja superior y el panel la solapa apenas lo justo para
     que se lean como una sola pieza. El solape es corto a propósito: si el
     panel sube más, el pasillo queda en una tira sin presencia y la sección
     pierde la fotografía, que es medio mensaje. */
  .origen { padding: 0 0 clamp(3rem, 8vw, 4.5rem); }
  .origen__foto { position: static; height: min(82vw, 420px); object-position: 32% 58%; }
  .origen__inner { display: block; min-height: 0; margin-top: -3.2rem; }
  .origen__panel { padding: 1.6rem 1.4rem 1.8rem; }
}

/* ── La promesa de la fundadora (historia) ──
   Una sola cita, centrada y en serif: el rastro humano que queda en esta
   página después de mudar la biografía completa a la portada. */
.promesa { background: var(--white); padding: clamp(4.5rem, 8vw, 7rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.promesa__inner { max-width: 47rem; margin-inline: auto; text-align: center; }
.promesa__quote {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.45; letter-spacing: -.01em;
  color: var(--ink); text-wrap: balance;
}
.promesa__quote em { color: var(--blue-600); }
.promesa__firma { margin-top: 1.4rem; color: var(--slate); font-size: .95rem; }
.promesa__firma strong { color: var(--ink); font-weight: 650; }

/* Texto y fotografía a la par (salud ocupacional) */
.dupla {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(2.5rem, 6vw, 5rem); align-items: center;
}
.dupla__foto {
  border-radius: var(--radius-card); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-2);
  aspect-ratio: 4 / 3;
}
.dupla__foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.dupla .btn { margin-top: clamp(1.6rem, 3vw, 2.2rem); }

/* ═══════════ FOOTER ═══════════ */
.footer {
  background: var(--porcelain); color: var(--ink);
  border-top: 1px solid var(--line);
  padding-top: clamp(4rem, 6vw, 6rem);
}
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
.footer__brand img { width: 225px; }
.footer__slogan { margin-top: 1.4rem; font-size: 1.35rem; color: var(--ink); }
.footer__slogan em { color: var(--blue-600); }

.footer__col h4 {
  font-size: .73rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: rgba(16, 35, 61, .45); margin-bottom: 1.1rem;
}
.footer__col a, .footer__col span {
  display: block; margin-bottom: .65rem;
  color: var(--slate); font-size: .95rem; transition: color .2s;
}
.footer__col a:hover { color: var(--navy-800); }

/* ── Redes sociales ──
   Logos oficiales a todo color, no enlaces escritos ni iconos de línea: un
   logo de red social se reconoce por su forma y su color exactos, y por eso
   son la única excepción al sistema de iconografía. La caja de 44 px es
   invisible y existe solo para dar un área táctil cómoda en el móvil.
   Se usan en el pie y en contacto; repetirlos por la página no añade nada. */
.redes { display: flex; gap: 2px; margin-top: 1.15rem; }
.redes .red {
  display: grid; place-items: center; margin: 0;
  width: 44px; height: 44px; border-radius: 12px;
  background: transparent; border: 0;
  transition: transform .28s var(--ease-out), opacity .22s;
}
.redes .red:hover { transform: translateY(-2px); opacity: .82; }
.redes .red:focus-visible { outline-offset: -2px; }

/* Instagram y Facebook ya apuntan a los perfiles del centro (cemedec.gye);
   ambos son enlaces reales y comparten el mismo tratamiento de hover. */
.red__ico { display: grid; place-items: center; }
.red__ico svg { width: 30px; height: 30px; display: block; }

.footer__bottom {
  margin-top: clamp(2.6rem, 4vw, 4rem);
  border-top: 1px solid rgba(16, 35, 61, .1);
  padding-block: 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: .84rem; color: rgba(70, 88, 111, .75);
}
.footer__bottom a { color: var(--slate); }
.footer__bottom a:hover { color: var(--navy-800); }

/* ═══════════ FAB ═══════════ */
.fab {
  position: fixed; right: 26px; bottom: 26px; z-index: 90;
  width: 60px; height: 60px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 14px 34px rgba(37, 211, 102, .38);
  transition: transform .25s var(--ease-out), box-shadow .25s;
}
.fab svg { width: 31px; height: 31px; }
.fab:hover { transform: scale(1.07); box-shadow: 0 18px 40px rgba(37, 211, 102, .46); }
.fab::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, .55);
  animation: fab-pulse 2.8s ease-out infinite;
}
@keyframes fab-pulse { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.55); opacity: 0; } }
.fab__label {
  position: absolute; right: 74px; top: 50%; translate: 0 -50%;
  background: var(--white); color: var(--ink);
  font-size: .87rem; font-weight: 650; white-space: nowrap;
  padding: 10px 18px; border-radius: 999px;
  box-shadow: var(--shadow-2);
  opacity: 0; pointer-events: none; transform: translateX(10px);
  transition: opacity .25s, transform .25s var(--ease-out);
}
.fab:hover .fab__label { opacity: 1; transform: none; }

/* ═══════════ PANEL DE ESPECIALIDAD ═══════════ */
/* Vista ampliada editorial: fotografía a un lado, contenido al otro.
   El panel NO crece con el texto —el contenido tiene su propio scroll—,
   así nunca se sale de la pantalla ni empuja el pie fuera de la vista. */
.sheet {
  position: fixed; inset: 0; z-index: 215;
  display: grid; place-items: center;
  /* Columna acotada a propósito: sin ella la rejilla la dimensiona al ancho
     intrínseco de la fotografía (1200 px) y el panel se sale de la pantalla
     en el teléfono. */
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(12px, 3.5vw, 40px);
  background: rgba(233, 240, 249, .82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
.sheet--open { opacity: 1; visibility: visible; }

.sheet__panel {
  position: relative;
  display: grid;
  /* minmax(0,…) en vez de fr a secas: sin eso el mínimo automático de cada
     columna es su contenido, y en pantallas estrechas el panel desborda */
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  grid-template-rows: minmax(0, 1fr);   /* deja encoger para el scroll interno */
  width: min(940px, 100%);
  min-width: 0; max-width: 100%;
  max-height: min(86vh, 660px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow-3);
  transform: translateY(16px) scale(.97);
  transition: transform .38s var(--ease-out);
}
.sheet--open .sheet__panel { transform: none; }

.sheet__close {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; color: var(--slate);
  transition: background .2s, color .2s;
}
.sheet__close:hover { background: var(--porcelain); color: var(--ink); }
.sheet__close svg { width: 20px; height: 20px; }

/* ── Columna de imagen ── */
.sheet__media {
  position: relative; overflow: hidden; min-height: 0;
  background: linear-gradient(160deg, #EAF2FB, #D9E7F7);
}
/* La fotografía llena el contenedor entero sin deformarse ni alterar una sola
   medida del panel: el hueco ya está definido, la imagen se recorta a él.
   Vale para las 27, sean cuales sean sus proporciones de origen. */
.sheet__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* campo editorial mientras la especialidad no tenga fotografía propia */
.sheet__ilustra {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--cross) repeat;
}

/* ── Columna de contenido ── */
.sheet__cuerpo { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.sheet__scroll {
  flex: 1; min-height: 0; min-width: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(28px, 3.4vw, 40px) clamp(22px, 3vw, 36px) 6px;
}
.sheet__pie {
  padding: 16px clamp(22px, 3vw, 36px) clamp(20px, 2.6vw, 26px);
  border-top: 1px solid var(--line);
  background: var(--white);
}

.sheet__ico {
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center; margin-bottom: 16px;
  background: linear-gradient(145deg, #EAF1FB, #DCE8F8); color: var(--blue-600);
}
.sheet__ico svg { width: 26px; height: 26px; }
.sheet__eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blue-500); margin-bottom: .5rem;
}
.sheet h3 { font-size: clamp(1.42rem, 2.6vw, 1.95rem); line-height: 1.18; margin-bottom: .7rem; }
.sheet__desc { color: var(--slate); font-size: 1rem; line-height: 1.62; }

/* ── Motivos de consulta ── */
.sheet__motivos { margin-top: 1.7rem; }
.sheet__h4 {
  font-size: .73rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue-500); margin-bottom: .85rem;
}
.sheet__lista { display: grid; gap: 9px; }
.sheet__lista li {
  position: relative; padding-left: 24px;
  font-size: .95rem; line-height: 1.5; color: var(--ink);
}
.sheet__lista li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 9px; height: 9px; border-radius: 3px;
  background: var(--blue-500); opacity: .9;
}

/* ── Acciones y navegación entre especialidades ── */
.sheet__act { display: flex; gap: 12px; flex-wrap: wrap; }
.sheet__nav {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; margin-top: 14px;
}
.sheet__pos { font-size: .82rem; color: var(--slate); font-variant-numeric: tabular-nums; }
.sheet__flecha {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  border: 1.5px solid var(--line); color: var(--blue-600);
  transition: background .2s, border-color .2s, opacity .2s;
}
.sheet__flecha:hover:not(:disabled) { background: var(--sky-2); border-color: var(--blue-300); }
.sheet__flecha:disabled { opacity: .38; cursor: default; }
.sheet__flecha .ico { width: 18px; height: 18px; }
.sheet__flecha--prev .ico { transform: rotate(180deg); }

/* El hueco de la imagen NUNCA colapsa: lo dimensiona la rejilla del panel
   (y la proporción 4:3 en móvil), nunca su contenido. Mientras las 27 no
   tengan fotografía, este campo se ve igual en todas: solo la textura. */

/* ── Entrada: la imagen asienta y el contenido sube escalonado ── */
@media (prefers-reduced-motion: no-preference) {
  .sheet__panel--entra .sheet__media { animation: sheetFoto .5s var(--ease-out) both; }
  .sheet__panel--entra .sheet__scroll > * { animation: sheetSube .45s var(--ease-out) both; }
  .sheet__panel--entra .sheet__scroll > *:nth-child(1) { animation-delay: .04s; }
  .sheet__panel--entra .sheet__scroll > *:nth-child(2) { animation-delay: .08s; }
  .sheet__panel--entra .sheet__scroll > *:nth-child(3) { animation-delay: .12s; }
  .sheet__panel--entra .sheet__scroll > *:nth-child(4) { animation-delay: .16s; }
  .sheet__panel--entra .sheet__scroll > *:nth-child(5) { animation-delay: .2s; }
}
@keyframes sheetFoto { from { opacity: 0; transform: scale(1.045); } }
@keyframes sheetSube { from { opacity: 0; transform: translateY(10px); } }

/* ── El panel en pantallas estrechas: imagen arriba, contenido debajo ── */
@media (max-width: 860px) {
  .sheet__panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    max-height: min(92vh, 820px);
  }
  /* Alto explícito en lugar de aspect-ratio + max-height. Con esa pareja, en
     cuanto el alto queda limitado Safari encoge el ANCHO para conservar la
     proporción y la foto deja una franja blanca a la derecha. Fijando el alto
     y dejando que object-fit: cover recorte, la imagen llena siempre el hueco
     en todos los navegadores. */
  .sheet__media { aspect-ratio: auto; height: clamp(170px, 30vh, 260px); }
  /* el cierre queda sobre la fotografía: necesita su propio fondo */
  .sheet__close {
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: var(--shadow-1);
  }
}

@media (max-width: 560px) {
  .sheet__act { flex-direction: column; }
  .sheet__act .btn { width: 100%; }
}

/* ═══════════ LIGHTBOX ═══════════ */
.lb {
  position: fixed; inset: 0; z-index: 210;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(240, 246, 252, .92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden;
  transition: opacity .32s ease, visibility .32s;
}
.lb--open { opacity: 1; visibility: visible; }
.lb__fig { max-width: 1160px; width: 100%; margin: 0; }
.lb__img {
  width: 100%; max-height: 76vh; object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 40px 120px rgba(16, 42, 84, .3);
  transform: scale(.965);
  transition: transform .38s var(--ease-out);
}
.lb--open .lb__img { transform: scale(1); }
.lb__cap { text-align: center; margin-top: 16px; color: var(--ink); font-size: .95rem; font-weight: 600; }
.lb__btn {
  position: absolute; z-index: 2;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--line);
  color: var(--navy-800);
  box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .25s, transform .25s var(--ease-out);
}
.lb__btn:hover { background: #fff; transform: scale(1.06); }
.lb__btn svg { width: 22px; height: 22px; }
.lb__close { top: 22px; right: 22px; }
.lb__prev { left: 18px; top: 50%; translate: 0 -50%; }
.lb__next { right: 18px; top: 50%; translate: 0 -50%; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (min-width: 1920px) {
  html { font-size: 17.5px; }
  :root { --container: 1380px; }
}

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

  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { max-width: 540px; margin-inline: auto; width: 100%; }
  .hero__sub { max-width: 60ch; }

  .dir { grid-template-columns: repeat(2, 1fr); }
  .areas { grid-template-columns: repeat(2, 1fr); }
  .pasos { grid-template-columns: repeat(2, 1fr); }
  .paso:not(:last-child)::after { display: none; }
  .b2b__grid { grid-template-columns: repeat(2, 1fr); }
  .show__strip { grid-template-columns: repeat(2, 1fr); }


  .manifiesto__grid, .fund__grid, .lleg__orienta,
  .show__row, .tec__card--wide, .dupla { grid-template-columns: 1fr; }
  /* la foto baja bajo el texto, no al revés */
  .dupla__foto { order: 1; }
  .show__row--rev .show__media { order: 0; }
  .fund__media { margin-bottom: 2.5rem; }
  .esp__head { flex-direction: column; align-items: flex-start; }
  .tec__card--wide .tec__media { min-height: 0; aspect-ratio: 16/10; }

  .lleg__orienta { gap: clamp(2rem, 5vw, 3rem); }
  .ruta { grid-template-columns: repeat(2, 1fr); }
  .ruta__paso:nth-child(even) { margin-top: 0; }
  .ruta__paso:nth-child(2) ~ .ruta__paso { margin-top: clamp(10px, 2vw, 24px); }
  /* el mapa se va arriba y las tarjetas debajo, a todo el ancho */
  .lleg__split { grid-template-columns: 1fr; }
  .lleg__split .lleg__mapa { height: 320px; min-height: 0; }
  .lleg__iguanaFoto { max-width: 56%; }
  .lleg__iguanaTxt > * { max-width: 20ch; }
}

@media (max-width: 720px) {
  body { font-size: 1rem; }

  .nav__actions .btn { display: none; }
  .nav__logo { width: 138px; }

  .hero { padding-top: 8rem; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .hero__chip { left: 10px; top: 16px; padding: 9px 14px; font-size: .8rem; }
  .hero__minicard { right: 8px; bottom: -18px; padding: 13px 16px; }

  .pilares__grid, .dir, .tec__grid,
  .pasos, .b2b__grid { grid-template-columns: 1fr; }
  .paso { max-width: 460px; margin-inline: auto; width: 100%; }
  /* en el teléfono, la fila entera se toca cómodamente */
  .dir__esp { padding-block: 20px; }

  /* Las áreas se quedan en dos columnas también en el teléfono: apiladas
     serían seis pantallas de scroll y la sección dejaría de leerse de un
     vistazo, que es justo lo que se buscaba. */
  .areas { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .area { aspect-ratio: 3 / 4; }
  .area__txt { padding: 14px 15px 16px; }
  .area__ico { width: 34px; height: 34px; border-radius: 10px; margin-bottom: 9px; }
  .area__ico svg { width: 18px; height: 18px; }
  .area__t { font-size: 1.02rem; }
  .area__d { font-size: .79rem; line-height: 1.4; }

  /* el ciclo pasa a tres columnas con el icono encima del rótulo */
  .ciclo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .ciclo__paso { flex-direction: column; gap: 9px; text-align: center; font-size: .86rem; }
  .ciclo__paso + .ciclo__paso::before {
    position: absolute; left: -15px; top: 22px;
    width: 14px; margin: 0;
  }
  .manifiesto__circle { left: -8px; border-width: 4px; }
  .b2b__cta { flex-direction: column; align-items: flex-start; }
  .show__strip { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .show__thumb figcaption { font-size: .76rem; padding: 20px 12px 10px; }

  /* la puerta a empresas se apila: el rótulo de acceso queda bajo el texto */
  .puerta { grid-template-columns: auto 1fr; row-gap: 14px; }
  .puerta__cta { grid-column: 1 / -1; }

  /* Cabecera con foto: en una sola columna el texto ocupa todo el ancho, así
     que el velo deja de cargar a un lado y pasa a cubrir de arriba abajo. */
  .pag--foto { padding-top: clamp(7.5rem, 20vh, 9.5rem); }
  .pag__velo {
    background: linear-gradient(to bottom,
      rgba(5, 21, 43, .9) 0%, rgba(5, 21, 43, .84) 50%, rgba(5, 21, 43, .78) 100%);
  }

  .cierre__cta { flex-direction: column; }
  .cierre__cta .btn { width: 100%; }

  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; text-align: center; }

  .fab { right: 18px; bottom: 18px; width: 56px; height: 56px; }
  .fab__label { display: none; }

  .lb__btn { width: 44px; height: 44px; }
  .lb__btn svg { width: 19px; height: 19px; }
  .lb__close { top: 14px; right: 14px; }
  .lb__prev { left: 10px; }
  .lb__next { right: 10px; }
  .lb__img { max-height: 64vh; }

  /* ── La llegada, en móvil ── */
  .lleg__hero {
    min-height: min(88vh, 700px);
    min-height: min(88svh, 700px);
    align-items: flex-end;
  }
  .lleg__heroFoto img { object-position: 50% 38%; }
  .lleg__marca { width: 90%; right: -18%; bottom: 2%; opacity: .085; }
  .lleg__heroCta { flex-direction: column; align-items: stretch; gap: 18px; }
  .lleg__heroCta .btn { width: 100%; justify-content: center; }
  .lleg__enlace { justify-content: center; }

  .lleg__cifrasFila { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .cifra:nth-child(odd)::before { display: none; }
  .cifra:nth-child(3)::after, .cifra:nth-child(4)::after {
    content: ""; position: absolute; left: 14%; right: 14%; top: -17px;
    height: 1px; background: var(--line);
  }

  /* el plano necesita ancho para que sus rótulos se lean: se desliza */
  .lleg__plano { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lleg__plano .pl { min-width: 660px; }
  .lleg__plano figcaption { position: sticky; left: 0; }

  /* la foto baja al flujo: entera, a todo el ancho, debajo del texto */
  .lleg__iguanaFoto {
    position: static; translate: none;
    width: 100%; max-width: 100%; height: auto;
    margin-top: clamp(2rem, 7vw, 3rem);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 15%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 15%);
  }
  .lleg__iguanaTxt > * { max-width: 100%; }
  .lleg__iguana { padding-bottom: 0; }

  /* el recorrido se recorre con el dedo */
  .ruta {
    display: flex; gap: 14px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: -24px; padding: 0 24px 10px;
  }
  .ruta::-webkit-scrollbar { display: none; }
  .ruta__paso { flex: 0 0 74%; max-width: 320px; scroll-snap-align: center; margin-top: 0 !important; }
  .ruta__foto, .ruta__paso--alto .ruta__foto { aspect-ratio: 4 / 5; }

  /* tres columnas no caben en un teléfono: la tarjeta se apila y la foto pasa
     a ser una franja panorámica. El botón ocupa el ancho, fácil de tocar. */
  .modo { grid-template-columns: 1fr; }
  .modo__foto { aspect-ratio: 16 / 7; }
  .modo__foto::after {
    background: linear-gradient(to top, rgba(7, 31, 61, .3) 0%, transparent 55%);
  }
  .modo__cuerpo { padding: 14px 16px 0; }
  .modo__btn { justify-self: stretch; justify-content: center; margin: 12px 16px 16px; }

  .lleg__mapa { height: 300px; }
  .lleg__acciones .btn { width: 100%; justify-content: center; }
  .lleg__datos { grid-template-columns: 1fr; gap: 30px; }
}

/* ═══════════ MOVIMIENTO REDUCIDO ═══════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__load { animation: none; opacity: 1; transform: none; }
  .firma__path { animation: none !important; stroke-dashoffset: 0; }
  .hero__chip, .hero__minicard { animation: none; }
  .fab::after { animation: none; opacity: 0; }
  html.js [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
  .con-deriva { transform: none !important; }
  .card, .b2b__card, .btn, .paso,
  .show__media img, .show__thumb img, .dir__esp, .dir__flecha { transition: none; }
  .modo, .modo__foto img, .modo__ico, .modo__btn, .modo__flecha, .mv__bus { transition: none; }
  .modo:hover .mv__bus { transform: none; }
  .modo:hover { transform: none; }
  .modo:hover .modo__foto img { transform: none; }
  .modo:hover .modo__ico { transform: none; }
  .modo__btn:hover .modo__flecha { transform: none; }
  .hero__arch img { transform: none !important; animation: none !important; }
  .latido__line, .latido__peak path { stroke-dashoffset: 0 !important; transition: none !important; }
  .latido__cruz { opacity: 1 !important; animation: none !important; }
  .lb, .lb__img, .sheet, .sheet__panel { transition: none; }
  .lb__img, .sheet__panel { transform: none; }
  .cardbg img { transform: none !important; transition: none; }
  html.js .pl__halo { animation: none; opacity: .5; }
  html.js .lleg__heroFoto img { animation: none; transform: none; }
  html.js .lleg__scroll span { animation: none; }
  html.js .lleg__iguanaFoto { opacity: 1; transform: none; transition: none; }
  .ruta__foto img, .lleg__pistas li { transition: none; }
}