/* ══════════════════════════════════════════════════════════════════════════
   estilos.css · la cara del sitio LTEM (rediseño oct-2026)

   UNA sola hoja para todas las páginas rediseñadas. Antes cada página traía su
   CSS completo copiado: con 30 páginas, cambiar el molde era cambiarlo 30 veces
   (decisión técnica pendiente desde el 14-oct, resuelta en la fase 1).

   De dónde salen los valores: de la entrega aprobada en Claude Design
   (_rediseno/diseno/, celular a 390 px y compu a 1440 px). Los colores, tamaños,
   radios y sombras son los del diseño, no aproximaciones. Si algo se ve
   distinto al diseño, lo que está mal es esta hoja.

   Cómo se lee:
     - Celular primero. Lo de compu va dentro de @media (min-width: 900px).
     - .solo-cel / .solo-compu esconden lo que el diseño pone solo en uno.
     - Los nombres siguen a los del diseño (form-plata, cnt-tile, ecg-vivo…)
       para que se puedan buscar de un lado y del otro.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --marino: #0F1F5C;
  --marino-prof: #0B1747;
  --azul: #1F3A8A;
  --azul-medio: #2E54B5;
  --cyan: #06B6D4;
  --cyan-claro: #5DD5EE;
  --cyan-oscuro: #0E7490;
  --cyan-icono: #0891B2;
  --wa: #25D366;
  --wa-hover: #1FB857;
  --texto: #0F172A;
  --texto-suave: #475569;
  --texto-gris: #64748B;
  --texto-claro-1: #E8F0FB;
  --texto-claro-2: #CBD5E1;
  --metal-1: #F4F7FC;
  --metal-3: #D5E0F0;
  --borde-fino: rgba(15, 31, 92, 0.08);

  --serif: Fraunces, Georgia, 'Times New Roman', serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --grad-metal: linear-gradient(135deg, #F4F7FC 0%, #E4ECF7 50%, #D5E0F0 100%);
  --grad-azul: linear-gradient(135deg, #1F3A8A 0%, #0F1F5C 100%);
  --grad-azul-metalico: linear-gradient(145deg, #3256B8 0%, #1F3A8A 38%, #0F1F5C 100%);
  --grad-plata: linear-gradient(145deg, #FBFCFE 0%, #E3E9F1 38%, #C9D2DE 72%, #E8EDF4 100%);
}

/* ── Base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--texto);
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; }
a { color: var(--azul); }
a:hover { color: var(--azul-medio); }
h1, h2, h3, p { margin: 0; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
input::placeholder { color: var(--texto-gris); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

.em  { font-style: italic; font-weight: 400; color: var(--azul); }
.emc { font-style: italic; font-weight: 400; color: var(--cyan-claro); }
.sr  { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 899.98px) { .solo-compu { display: none !important; } }
@media (min-width: 900px) { .solo-cel { display: none !important; } }

/* El diseño mide 1240 px de contenido más 24 de margen a cada lado: 1288 en total. */
.contenedor { max-width: 1288px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
@media (min-width: 900px) { .contenedor { padding-left: 24px; padding-right: 24px; } }

/* ── Superficies ───────────────────────────────────────────────────────── */
.metal  { background: var(--grad-metal); }
.blanco { background: #FFFFFF; }
.ecg-tenue {
  background-image: url(/img/ecg-fondo.svg);
  background-size: 700px 200px;
  background-repeat: repeat;
}
.oscuro {
  color: #FFFFFF;
  background-color: var(--marino);
  background-image: url(/img/ecg-fondo.svg), var(--grad-azul);
  background-size: 700px 200px, auto;
  background-repeat: repeat, no-repeat;
}
.hero-oscuro {
  position: relative;
  overflow: hidden;
  color: #FFFFFF;
  background-color: var(--marino);
  background-image: radial-gradient(ellipse at 50% 22%, rgba(6, 182, 212, 0.24) 0%, rgba(6, 182, 212, 0) 60%),
                    linear-gradient(160deg, #1F3A8A 0%, #0F1F5C 100%);
}
@media (min-width: 900px) {
  .hero-oscuro {
    background-image: radial-gradient(ellipse at 28% 45%, rgba(6, 182, 212, 0.22) 0%, rgba(6, 182, 212, 0) 55%),
                      var(--grad-azul);
  }
}

/* ── El trazo de ECG ─────────────────────────────────────────────────────
   Un pulso cyan que recorre la línea. Va al pie de los héroes (.ecg-vivo) y
   en la línea del tiempo vertical (.ecg-v). Quieto si la persona pidió menos
   movimiento en su teléfono. */
.ecg-vivo path, .ecg-v path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ecg-vivo .base { stroke: rgba(255, 255, 255, 0.14); }
.ecg-vivo .pulso, .ecg-v .pulso {
  stroke: var(--cyan);
  stroke-width: 2.5;
  stroke-dasharray: 460 2400;
  stroke-dashoffset: 2860;
  animation: trazo 4.5s linear infinite;
  filter: drop-shadow(0 0 4px rgba(6, 182, 212, 0.8));
}
.ecg-claro .base { stroke: rgba(31, 58, 138, 0.38); }
.ecg-v path { vector-effect: non-scaling-stroke; }
.ecg-v .base { stroke: rgba(15, 31, 92, 0.22); }
.ecg-v .pulso { filter: drop-shadow(0 0 4px rgba(6, 182, 212, 0.7)); }
@keyframes trazo { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ecg-vivo .pulso, .ecg-v .pulso { animation: none; stroke-dasharray: none; }
}

/* ── Textos de sección ─────────────────────────────────────────────────── */
.ceja {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 12px;
  font: 800 11px/1.3 var(--sans);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--azul);
}
.ceja::before {
  content: ""; flex: none;
  width: 32px; height: 3px; border-radius: 3px;
  background: var(--cyan);
}
.oscuro .ceja, .hero-oscuro .ceja, .en-oscuro .ceja { color: var(--cyan-claro); }

.titulo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -0.9px;
  color: var(--marino);
}
.oscuro .titulo, .hero-oscuro .titulo, .en-oscuro .titulo { color: #FFFFFF; }

.bajada { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--texto-suave); }
.oscuro .bajada, .hero-oscuro .bajada, .en-oscuro .bajada { color: var(--texto-claro-2); }

@media (min-width: 900px) {
  .ceja { font: 800 15px/1.2 var(--sans); letter-spacing: 2.5px; }
  .titulo { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.05; letter-spacing: -1.5px; }
  .bajada { font-size: 16px; }
  /* En compu el titular va a la izquierda y la bajada a la derecha, al pie. */
  .cabeza {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 16px 40px; margin-bottom: 28px;
  }
  .cabeza > :first-child { max-width: 46rem; }
  .cabeza > .bajada { margin: 0; max-width: 24rem; }
}

/* ── Botones ───────────────────────────────────────────────────────────── */
.btn-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 56px; padding: 0 26px;
  border: 0; border-radius: 100px;
  background: var(--wa); color: var(--marino);
  font: 700 16px var(--sans);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-wa:hover { color: var(--marino); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45); }
.btn-wa img { width: 20px; height: 20px; flex: none; }
.btn-wa.ancho { display: flex; width: 100%; }
.btn-wa.grande { height: 60px; font-size: 17px; }
.btn-wa.grande img { width: 22px; height: 22px; }
@media (min-width: 900px) {
  .btn-wa.grande { height: 64px; padding: 0 32px; font-size: 18px; }
}

.btn-contorno {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 22px;
  border: 2px solid var(--marino); border-radius: 100px;
  background: transparent; color: var(--marino);
  font: 700 15px var(--sans); white-space: nowrap; cursor: pointer;
}
@media (min-width: 900px) {
  .btn-contorno { height: 56px; padding: 0 28px; border-width: 1.5px; background: #FFFFFF; font-size: 16px; }
}

/* "¿Por qué elegirnos? ↓": un solo link debajo del botón, subrayado cyan. */
.liga-elegir {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 6px;
  color: #FFFFFF; font: 700 15px var(--sans); text-decoration: none;
  border-bottom: 2px solid var(--cyan);
}
.liga-elegir:hover { color: #FFFFFF; }
.liga-elegir span { color: var(--cyan-claro); }

.liga-flecha {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; font-weight: 700; color: var(--azul);
}
.oscuro .liga-flecha, .en-oscuro .liga-flecha { color: var(--cyan-claro); }
.liga-wa { color: #15803D; font-weight: 700; text-decoration: none; }

/* ══ Encabezado ═══════════════════════════════════════════════════════════ */
.enc {
  position: relative; z-index: 20;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--borde-fino);
  box-shadow: 0 4px 12px rgba(15, 31, 92, 0.08);
}
.enc-fila {
  height: 64px; padding: 0 8px 0 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.enc-marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.enc-marca img { height: 40px; width: auto; display: block; }
.enc-lema {
  display: flex; flex-direction: column;
  padding-left: 12px; border-left: 1px solid rgba(15, 31, 92, 0.12);
  font-family: var(--serif);
}
.enc-lema b { font-size: 14px; font-weight: 500; color: var(--marino); }
.enc-lema i { font-size: 13px; color: var(--azul); }
.enc-menu-btn {
  width: 48px; height: 48px; padding: 0;
  border: 0; border-radius: 100px; background: transparent; color: var(--marino);
  display: grid; place-items: center; cursor: pointer;
}
.enc-nav { display: none; }
.enc-cta { display: none !important; }

/* Menú del celular: el diseño trae el botón pero no el menú abierto. Se
   resolvió con lo mismo que la barra de compu: los cinco enlaces y el botón. */
.enc.abierto .enc-nav {
  display: flex; flex-direction: column;
  position: absolute; left: 0; right: 0; top: 100%;
  padding: 8px 16px 20px;
  background: #FFFFFF;
  border-bottom: 1px solid var(--borde-fino);
  box-shadow: 0 18px 30px rgba(15, 31, 92, 0.14);
}
.enc.abierto .enc-nav a {
  display: flex; align-items: center; min-height: 52px;
  border-bottom: 1px solid var(--borde-fino);
  font-size: 17px; font-weight: 600; color: var(--marino); text-decoration: none;
}
.enc.abierto .enc-nav .btn-wa { margin-top: 16px; border: 0; justify-content: center; }

@media (min-width: 900px) {
  .enc { position: sticky; top: 0; }
  .enc-fila {
    height: auto; max-width: 1288px; margin: 0 auto; padding: 14px 24px;
    flex-wrap: wrap; justify-content: flex-start; gap: 16px 24px;
  }
  .enc-marca { gap: 18px; }
  .enc-marca img { height: 68px; }
  .enc-lema { padding-left: 18px; }
  .enc-lema b { font-size: 19px; letter-spacing: -0.3px; }
  .enc-lema i { font-size: 16px; }
  .enc-menu-btn { display: none; }
  .enc-nav, .enc.abierto .enc-nav {
    position: static; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 2px; margin-left: auto; padding: 0; background: none; border: 0; box-shadow: none;
  }
  .enc-nav a, .enc.abierto .enc-nav a {
    position: relative; min-height: 0; border: 0;
    padding: 12px 16px; border-radius: 100px;
    font-size: 16px; font-weight: 600; color: var(--marino); text-decoration: none;
  }
  .enc-nav a::after {
    content: ''; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px;
    background: var(--cyan); transform: scaleX(0); transition: transform .25s;
  }
  .enc-nav a:hover { background: var(--metal-1); }
  .enc-nav a:hover::after { transform: scaleX(1); }
  .enc-nav .btn-wa { display: none; }
  .enc-cta { display: inline-flex !important; height: 52px; padding: 0 22px; font-size: 15px; }
}
/* Laptops (1280 y 1366): a tamaño completo el botón verde bajaba a un segundo
   renglón y el encabezado medía 165 px. Un poco más compacto cabe en uno. */
@media (min-width: 900px) and (max-width: 1365.98px) {
  .enc-fila { flex-wrap: nowrap; gap: 12px 16px; }
  .enc-marca { gap: 14px; flex: none; }
  .enc-marca img { height: 54px; }
  .enc-lema { padding-left: 14px; }
  .enc-lema b { font-size: 16px; }
  .enc-lema i { font-size: 14px; }
  .enc-nav, .enc.abierto .enc-nav { flex-wrap: nowrap; }
  .enc-nav a, .enc.abierto .enc-nav a { padding: 10px 10px; font-size: 15px; white-space: nowrap; }
  .enc-nav a::after { left: 10px; right: 10px; }
  .enc-cta { flex: none; height: 48px; padding: 0 18px; font-size: 14px; }
}
@media (min-width: 900px) and (max-width: 1099.98px) {
  .enc-lema { display: none; }
  .enc-nav a, .enc.abierto .enc-nav a { padding: 10px 8px; font-size: 14px; }
}

/* ══ Héroe de servicio ════════════════════════════════════════════════════
   Celular: foto arriba con el dolor encima, luego el titular de la solución,
   el botón, el link a "Por qué elegirnos", el trazo de ECG y el formulario en
   su propia franja clara.
   Compu: texto a la izquierda sobre las fotos con degradado, formulario a la
   derecha (plegado en un botón hasta que se pide).

   Es UN solo marcado para los dos: en celular el cuerpo se "deshace"
   (display: contents) para que sus piezas se acomoden en columna con order. */
.hero { position: relative; display: flex; flex-direction: column; }
.hero-fotos { position: relative; order: 1; height: 330px; overflow: hidden; }
.fondo-rota {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1.2s ease;
}
.fondo-rota.activa { opacity: 1; }
.hero-velo {
  position: absolute; left: 0; right: 0; top: 0; height: 330px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 23, 71, 0.25) 0%, rgba(11, 23, 71, 0) 30%, rgba(11, 23, 71, 0.55) 62%, rgba(15, 31, 92, 0.97) 100%);
}
.hero-cuerpo { display: contents; }
.hero-texto { order: 2; display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 26px; }
.hero-dolor {
  position: absolute; z-index: 2; left: 20px; right: 20px; top: 330px;
  transform: translateY(calc(-100% - 14px));
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 31px; line-height: 1.08; letter-spacing: -0.6px;
  color: #FFFFFF; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}
.hero-h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: 25px; line-height: 1.12; letter-spacing: -0.6px;
  color: var(--cyan-claro);
}
.hero-sub { font-size: 16px; line-height: 1.5; color: var(--texto-claro-1); }
.hero-texto .liga-elegir { align-self: center; }
.hero-ecg { order: 3; position: relative; display: block; width: 100%; height: 40px; }
.hero-form {
  order: 4;
  padding: 28px 16px 32px;
  background: linear-gradient(180deg, #E4ECF7 0%, #F4F7FC 100%);
  color: var(--texto);
}
.hero-form .nota-zona { margin: 14px 4px 0; text-align: center; font-size: 13px; line-height: 1.5; color: var(--texto-suave); }
.btn-fotos {
  align-self: flex-start; margin-top: 4px;
  height: 48px; padding: 0 22px;
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: 100px; border: 1.5px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.06); color: #FFFFFF;
  font: 700 15px var(--sans); cursor: pointer;
}

@media (min-width: 900px) {
  .hero { display: block; }
  .hero-fotos { position: absolute; inset: 0; height: auto; }
  .fondo-rota { object-position: center 60%; transition-duration: 1.4s; }
  .hero-velo {
    inset: 0; height: auto;
    background: linear-gradient(90deg, rgba(11, 23, 71, 0.94) 0%, rgba(11, 23, 71, 0.8) 42%, rgba(11, 23, 71, 0.45) 75%, rgba(11, 23, 71, 0.3) 100%);
  }
  .hero-ecg { position: absolute; z-index: 1; left: 0; bottom: 8px; height: 84px; }
  .hero-cuerpo {
    position: relative; z-index: 2;
    display: flex; flex-wrap: wrap; align-items: center; gap: 56px;
    max-width: 1288px; margin: 0 auto; padding: 72px 24px 96px;
  }
  .hero-texto { flex: 1.2 1 520px; min-width: 0; gap: 22px; padding: 0; }
  .hero-dolor {
    position: static; transform: none;
    font-size: clamp(2.1rem, 3.6vw, 3.3rem); line-height: 1.06; letter-spacing: -1px; text-shadow: none;
  }
  .hero-h1 { font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.15; }
  .hero-sub { max-width: 34rem; font-size: 22px; font-weight: 600; color: #FFFFFF; }
  .hero-texto .liga-elegir {
    align-self: flex-start; min-height: 0; padding: 4px 0;
    font-size: 16px; font-weight: 600;
  }
  .hero-form { flex: 1 1 440px; min-width: 0; max-width: 480px; padding: 0; background: none; }
}

/* ══ Formulario por pasos ═════════════════════════════════════════════════
   Plateado, con pasos numerados. En celular va siempre abierto, en su franja
   justo después del héroe. En compu arranca como un botón verde y se despliega
   al darle clic; "Ocultar formulario" lo vuelve a cerrar.
   Sin JavaScript se queda abierto en los dos: nadie se queda sin formulario. */
.form-plata {
  display: flex; flex-direction: column; gap: 20px;
  padding: 22px 18px 20px; border-radius: 22px;
  background: var(--grad-plata);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -2px 6px rgba(15, 31, 92, 0.08), 0 18px 44px rgba(15, 31, 92, 0.12);
  color: var(--texto);
}
.form-contenido { display: flex; flex-direction: column; gap: 20px; }
.form-abrir, .form-ocultar { display: none; }
.form-tit { font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: -0.6px; color: var(--marino); }
.form-tit em { font-style: italic; color: var(--cyan-oscuro); }
.form-bajada { margin-top: -10px; font-size: 14px; line-height: 1.45; color: var(--texto-suave); }

.grupo { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.rejilla { display: flex; flex-direction: column; gap: 12px; }
.rejilla.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Los pasos se cuentan solos: si en celular un paso se esconde, los demás
   no se saltan un número. */
.form-contenido { counter-reset: paso; }
.paso-tit {
  margin: 0; padding: 0;
  display: flex; align-items: center; gap: 10px;
  font: 700 16px/1.3 var(--sans); color: var(--marino);
  counter-increment: paso;
}
.paso-tit::before {
  content: counter(paso);
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--marino); color: #FFFFFF;
  display: grid; place-items: center;
  font: 700 13px/1 var(--sans);
}

.cnt-tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
  padding: 12px; border-radius: 14px;
  border: 1px solid #C3CEDC; background: #FFFFFF;
}
.cnt-tile.en-fila { flex-direction: row; align-items: center; }
.cnt-lbl { font: 600 14px/1.25 var(--sans); color: var(--marino); min-height: 35px; }
.cnt-tile.en-fila .cnt-lbl { min-height: 0; }
.cnt-ctl { display: flex; align-items: center; justify-content: space-between; }
.cnt-tile.en-fila .cnt-ctl { gap: 14px; }
.cnt-num { min-width: 28px; text-align: center; font: 500 26px/1 var(--serif); color: var(--marino); }
.paso-claro {
  width: 44px; height: 44px; padding: 0;
  border-radius: 100px; border: 1.5px solid #B8C7DE;
  background: #FFFFFF; color: var(--marino);
  font: 600 22px/1 var(--sans); cursor: pointer;
}
.paso-claro:disabled { color: #B8C7DE; cursor: default; }

.campo-claro { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo-claro > span { font: 600 13px/1.2 var(--sans); color: #334155; }
.campo-claro input, .campo-claro select {
  height: 50px; width: 100%;
  border-radius: 12px; border: 1px solid #B9C5D4; background: #FFFFFF; color: var(--texto);
  padding: 0 14px; font: 500 16px var(--sans); outline: none;
}
.campo-claro select {
  appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, #1F3A8A 50%), linear-gradient(135deg, #1F3A8A 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.campo-claro input:focus, .campo-claro select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.18); }
.campo-claro.cp input { max-width: 180px; }
.campo-claro .pista { font-size: 12.5px; line-height: 1.35; color: var(--texto-gris); }
.campo-claro .error { display: none; font-size: 12.5px; line-height: 1.35; color: #B42318; }
.campo-claro.mal input, .campo-claro.mal select { border-color: #D92D20; box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12); }
.campo-claro.mal .error, .grupo.mal .error { display: block; }
.grupo > .error { display: none; font-size: 12.5px; color: #B42318; }
.form-plata details summary {
  display: inline-flex; align-items: center; min-height: 40px;
  font-size: 14px; font-weight: 600; color: var(--azul);
}
.form-plata details > div { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-enviar {
  height: 58px; width: 100%;
  border: 0; border-radius: 100px; background: var(--wa); color: var(--marino);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 16px var(--sans); white-space: nowrap; cursor: pointer;
  box-shadow: 0 8px 26px rgba(37, 211, 102, 0.35);
}
.form-enviar img { width: 20px; height: 20px; }
.form-nota { margin-top: -8px; text-align: center; font-size: 13px; line-height: 1.4; color: var(--texto-gris); }
.form-ocultar {
  align-self: center; border: 0; background: transparent; cursor: pointer;
  color: var(--texto-gris); font: 600 13px var(--sans); text-decoration: underline;
}

@media (min-width: 900px) {
  .form-plata {
    gap: 18px; padding: 26px 24px 22px; border-radius: 24px;
    box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -2px 6px rgba(15, 31, 92, 0.08), 0 30px 70px rgba(0, 0, 0, 0.35);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .form-plata:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -2px 6px rgba(15, 31, 92, 0.08), 0 38px 84px rgba(0, 0, 0, 0.45); }
  .form-contenido { gap: 18px; }
  .form-tit { font-size: 28px; }
  .rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .rejilla > .entero { grid-column: 1 / -1; }
  .campo-claro.cp input { max-width: none; }
  .form-ocultar { display: block; }

  /* Plegado: solo el botón verde, sin la caja plateada alrededor. */
  .form-plata.plegado {
    padding: 0; gap: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  }
  .form-plata.plegado:hover { transform: none; box-shadow: none; }
  .form-plata.plegado .form-contenido { display: none; }
  .form-plata.plegado .form-abrir { display: inline-flex; align-self: flex-start; height: 58px; padding: 0 30px 0 24px; font-size: 17px; box-shadow: 0 8px 26px rgba(37, 211, 102, 0.35); }
  .form-plata.plegado .form-abrir img { width: 22px; height: 22px; }
}

/* ══ Cinta "Ya confían en nosotros" ═══════════════════════════════════════
   Se desplaza sola y se pausa al pasar el mouse. La lista va dos veces
   seguidas (la segunda escondida para lectores de pantalla) para que el
   desfile no tenga costura. */
.clientes { background: var(--marino-prof); border-top: 1px solid rgba(255, 255, 255, 0.08); color: #FFFFFF; padding: 16px 0 18px; }
.clientes-fila { display: flex; flex-direction: column; gap: 10px; }
.clientes .ceja { margin: 0 20px; font-size: 11px; letter-spacing: 2px; color: var(--cyan-claro); }
.clientes .ceja::before { width: 24px; }
.cinta {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.riel { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: desfile 55s linear infinite; }
.cinta:hover .riel { animation-play-state: paused; }
.riel li { flex: none; display: flex; align-items: center; gap: 20px; padding-right: 20px; white-space: nowrap; }
.riel li::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 8px rgba(6, 182, 212, 0.8);
}
.riel b { font: 500 18px var(--serif); letter-spacing: -0.2px; color: #FFFFFF; }
.riel i { font: italic 400 17px var(--serif); letter-spacing: -0.2px; color: var(--cyan-claro); }
@keyframes desfile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .riel { animation: none; } }
@media (min-width: 900px) {
  .clientes { padding: 0; }
  .clientes-fila { max-width: 1288px; margin: 0 auto; padding: 24px; flex-direction: row; align-items: center; gap: 32px; }
  .clientes .ceja {
    flex: none; margin: 0; padding-right: 28px; border-right: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 13px; letter-spacing: 2.5px; white-space: nowrap;
  }
  .clientes .ceja::before { width: 28px; }
  .cinta {
    flex: 1 1 auto; min-width: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  }
  .riel { animation-duration: 50s; }
  .riel li { gap: 28px; padding-right: 28px; }
  .riel li::after { width: 6px; height: 6px; }
  .riel b { font-size: 22px; letter-spacing: -0.3px; }
  .riel i { font-size: 21px; }
}

/* ══ Secciones con su relleno ═════════════════════════════════════════════ */
.seccion { padding: 40px 0 36px; }
@media (min-width: 900px) { .seccion { padding: 72px 0 80px; } }

/* Señales: tarjetas azules numeradas. */
.senales { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.senal {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 20px 20px; border-radius: 18px;
  color: #FFFFFF; background: var(--grad-azul);
  box-shadow: 0 10px 28px rgba(15, 31, 92, 0.18);
}
.senal:nth-child(2) { background: linear-gradient(135deg, #2E54B5 0%, #1F3A8A 100%); }
.senal:nth-child(3) { background: linear-gradient(135deg, #0891B2 0%, #1F3A8A 100%); }
.senal-n {
  position: absolute; right: 16px; top: 10px;
  font: 600 44px/1 var(--serif); letter-spacing: -1.5px; color: rgba(93, 213, 238, 0.5);
}
.senal-t { position: relative; padding-right: 60px; font: 500 22px/1.08 var(--serif); letter-spacing: -0.5px; }
.senal-d { position: relative; font-size: 14px; line-height: 1.5; color: var(--texto-claro-1); }
.remate { margin-top: 20px; font-size: 15px; line-height: 1.5; color: var(--marino); }
.remate i { font-family: var(--serif); font-size: 19px; }
@media (min-width: 900px) {
  .senales { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
  .senal { min-height: 210px; padding: 26px 26px 28px; border-radius: 20px; gap: 10px; transition: transform .25s ease, box-shadow .25s ease; }
  .senal:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 31, 92, 0.28); }
  .senal-n { position: static; align-self: flex-end; font-size: 64px; letter-spacing: -2px; color: rgba(93, 213, 238, 0.55); }
  .senal-t { margin-top: auto; padding-right: 0; font-size: clamp(1.5rem, 2.1vw, 2rem); line-height: 1.05; letter-spacing: -0.8px; }
  .senal-d { font-size: 15px; }
  .remate { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 16px; }
  .remate i { font-size: 20px; }
}

/* ══ Cada cuándo: tarjetas de azul metálico ═══════════════════════════════ */
.frecuencias { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.metal-azul {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 16px; border-radius: 18px;
  background: var(--grad-azul-metalico);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 16px 32px rgba(15, 31, 92, 0.3);
  color: #FFFFFF;
}
.metal-azul .cifra { font: 500 44px/0.9 var(--serif); letter-spacing: -1.5px; }
.metal-azul .cifra small { font-size: 16px; letter-spacing: 0; color: var(--cyan-claro); }
.metal-azul b { font-size: 14px; font-weight: 700; line-height: 1.3; }
.metal-azul span:last-child { font-size: 13px; line-height: 1.4; color: var(--texto-claro-2); }
.ademas-tit { margin: 20px 0 2px; font: 800 11px/1.2 var(--sans); letter-spacing: 2px; text-transform: uppercase; color: var(--cyan-oscuro); }
.ademas { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgba(15, 31, 92, 0.1); }
.ademas li {
  display: flex; gap: 10px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid rgba(15, 31, 92, 0.1);
  font-size: 14px; line-height: 1.45; color: var(--texto-suave);
}
.ademas li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); transform: translateY(-1px); }
.ademas b { color: var(--marino); }
.llamada {
  margin-top: 22px; padding: 18px 16px; border-radius: 16px;
  background: var(--marino); color: #FFFFFF;
  display: flex; flex-direction: column; gap: 10px;
}
.llamada p { font: 500 21px/1.2 var(--serif); letter-spacing: -0.3px; }
.llamada a { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--cyan-claro); }
.cuando { display: flex; flex-direction: column; }
@media (min-width: 900px) {
  .cuando { flex-direction: row; flex-wrap: wrap; gap: 40px 64px; align-items: flex-start; }
  .cuando > div:first-child { flex: 1 1 440px; }
  .cuando > div:last-child { flex: 1 1 480px; }
  .cuando .bajada { font-size: 17px; line-height: 1.55; margin-top: 16px; }
  .cuando .llamada { margin-top: 28px; padding: 22px 24px; }
  .frecuencias { margin-top: 0; }
  .metal-azul .cifra { font-size: 56px; }
}

/* ══ Cómo trabajamos: línea del tiempo con ECG ════════════════════════════ */
.pasos-linea { position: relative; margin-top: 26px; padding-left: 40px; }
.pasos-linea .ecg-v { position: absolute; left: 0; top: 4px; bottom: 30px; width: 26px; height: calc(100% - 34px); }
.pasos-linea .ecg-h { display: none; }
.pasos-linea ol { list-style: none; margin: 0; padding: 0; }
.paso {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 0 0 26px;
}
.paso::before {
  content: ""; position: absolute; left: -36px; top: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #FFFFFF; border: 3px solid var(--cyan);
}
.paso-num { font: italic 17px var(--serif); color: var(--azul); }
.paso-t { font: 500 22px/1.1 var(--serif); letter-spacing: -0.5px; color: var(--marino); }
.paso-d { font-size: 15px; line-height: 1.55; color: var(--texto-suave); }
@media (min-width: 900px) {
  .pasos-linea { margin-top: 44px; padding-left: 0; }
  .pasos-linea .ecg-v { display: none; }
  .pasos-linea .ecg-h { display: block; position: absolute; top: -11px; left: 9px; width: calc(100% - 9px); height: 40px; }
  .pasos-linea ol { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; }
  .paso { gap: 10px; padding: 34px 0 0; }
  .paso::before { left: 0; top: 0; }
  .paso-num { font-size: 20px; }
  .paso-t { font-size: 26px; line-height: 1.08; letter-spacing: -0.6px; }
}

/* ══ Por qué elegirnos ════════════════════════════════════════════════════
   Va en toda página que vende u ofrece algo. Fondo marino con foto; lista
   numerada 01–04, sin íconos. */
.elegirnos { position: relative; overflow: hidden; background: var(--marino-prof); color: #FFFFFF; padding: 0 0 36px; }
.elegirnos-foto { position: relative; height: 220px; }
.elegirnos-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.elegirnos-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 23, 71, 0.05) 30%, #0B1747 100%); }
.elegirnos-cuerpo { position: relative; margin-top: -36px; padding: 0 20px; }
.elegirnos .ceja { margin-bottom: 14px; letter-spacing: 2.5px; color: var(--cyan-claro); }
.elegirnos h2 { font: 500 36px/1.02 var(--serif); letter-spacing: -1.2px; color: #FFFFFF; }
.elegirnos h2 span { font-style: italic; font-weight: 400; color: var(--cyan-claro); }
.elegirnos-bajada { margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--texto-claro-2); }
.elegirnos-bajada strong { font-weight: 700; color: #FFFFFF; }
.razones { list-style: none; margin: 22px 0 0; padding: 0; }
.razones li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; }
.razones li + li { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.razones .n { flex: none; width: 44px; padding-top: 2px; font: italic 400 28px/1 var(--serif); color: var(--cyan-claro); }
.razones .r { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.razones .r b { font: 500 21px/1.15 var(--serif); letter-spacing: -0.3px; color: #FFFFFF; }
.razones .r span { font-size: 14px; line-height: 1.45; color: var(--texto-claro-2); }
@media (min-width: 900px) {
  .elegirnos { padding: 0; }
  .elegirnos-foto { position: absolute; top: 0; right: 0; width: 55%; height: 100%; }
  .elegirnos-foto::after { display: none; }
  .elegirnos::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, #0B1747 42%, rgba(11, 23, 71, 0.7) 70%, rgba(11, 23, 71, 0.35) 100%);
  }
  .elegirnos-cuerpo {
    z-index: 2; margin: 0 auto; max-width: 1240px; padding: 96px 24px;
    display: flex; flex-wrap: wrap; gap: 48px 72px; align-items: center;
  }
  .elegirnos-cuerpo > div { flex: 1 1 420px; max-width: 540px; }
  .elegirnos .ceja { font-size: 13px; }
  .elegirnos h2 { font-size: clamp(2.6rem, 4.4vw, 4rem); line-height: 1; letter-spacing: -2px; }
  .elegirnos-bajada { font-size: 18px; }
  .razones {
    flex: 1 1 440px; margin: 0; padding: 10px 28px; border-radius: 22px;
    background: rgba(11, 23, 71, 0.82); border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  }
  .razones li { padding: 18px 0; }
  .razones .n { width: 48px; font-size: 32px; }
  .razones .r b { font-size: 23px; }
  .razones .r span { font-size: 15px; }
}

/* ══ Qué atendemos: carrusel con el dedo en celular, cuadrícula en compu ══ */
.atendemos-lista {
  list-style: none; margin: 22px 0 0; padding: 0 20px 6px;
  display: flex; gap: 14px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-padding: 0 20px;
  scrollbar-width: none;
}
.atendemos-lista::-webkit-scrollbar { display: none; }
.tarjeta-at {
  flex: none; width: 290px; scroll-snap-align: start;
  display: flex; flex-direction: column;
  border-radius: 22px; overflow: hidden;
  background: #13266E; border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}
.tarjeta-at .foto { position: relative; height: 230px; background: linear-gradient(135deg, #1F3A8A 0%, #0B1747 100%); }
.tarjeta-at .foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tarjeta-at .foto .ecg-vivo { position: absolute; left: 0; top: 34%; width: 100%; height: 60px; }
.tarjeta-at .foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 23, 71, 0) 40%, rgba(19, 38, 110, 0.96) 100%); }
.tarjeta-at .chip {
  position: absolute; z-index: 1; left: 14px; top: 14px;
  padding: 5px 11px; border-radius: 100px; background: rgba(11, 23, 71, 0.8);
  font: 700 11px/1.2 var(--sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--cyan-claro);
}
.tarjeta-at h3 {
  position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 12px;
  font: 500 25px/1.08 var(--serif); letter-spacing: -0.5px; color: #FFFFFF;
}
.tarjeta-at p { padding: 14px 16px 18px; font-size: 14px; line-height: 1.5; color: var(--texto-claro-2); }
@media (min-width: 900px) {
  .atendemos-lista { max-width: 1288px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; overflow: visible; }
  .tarjeta-at { width: auto; }
  .tarjeta-at .foto { height: 260px; }
}

/* ══ Galería que se abre al clic ══════════════════════════════════════════ */
.galeria-caja[hidden] { display: none; }
.galeria-caja {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 16px;
  background: rgba(6, 12, 40, 0.78);
}
.galeria-panel {
  width: min(1080px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 14px; border-radius: 18px; background: #FFFFFF;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.galeria-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.galeria-cab p { font: 500 18px var(--serif); color: var(--marino); }
.galeria-cerrar {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 100px;
  background: var(--metal-1); color: var(--marino); font-size: 22px; cursor: pointer;
}
.galeria-fotos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.galeria-fotos img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; }
@media (min-width: 900px) {
  .galeria-panel { padding: 26px 28px 30px; border-radius: 22px; background: var(--marino); border: 1px solid rgba(255, 255, 255, 0.14); }
  .galeria-cab { margin-bottom: 18px; }
  .galeria-cab p { font-size: 26px; color: #FFFFFF; }
  .galeria-cab p span { font-style: italic; font-weight: 400; color: var(--cyan-claro); }
  .galeria-cerrar { width: 48px; height: 48px; background: rgba(255, 255, 255, 0.12); color: #FFFFFF; font-size: 26px; }
  /* Mosaico: dos altas en las orillas y cuatro chicas al centro. */
  .galeria-fotos { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 220px 220px; gap: 12px; }
  .galeria-fotos li { overflow: hidden; border-radius: 14px; background: var(--azul); }
  .galeria-fotos li:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
  .galeria-fotos li:nth-child(4) { grid-area: 1 / 4 / 3 / 5; }
  .galeria-fotos img { height: 100%; aspect-ratio: auto; border-radius: 0; transition: transform .5s ease; }
  .galeria-fotos li:hover img { transform: scale(1.04); }
}

/* La franja "Nuestro trabajo" que invita a abrir la galería. */
.trabajo-fila { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.abanico { display: none; }
@media (min-width: 900px) {
  .trabajo-fila { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; }
  .trabajo-fila > div:first-child { flex: 1 1 420px; }
  .trabajo-fila .titulo { font-size: clamp(1.8rem, 2.8vw, 2.4rem); }
  .trabajo-accion { display: flex; align-items: center; gap: 36px; }
  .abanico { display: block; position: relative; width: 250px; height: 140px; }
  .abanico img {
    position: absolute; top: 0; width: 104px; height: 128px; object-fit: cover;
    border-radius: 12px; border: 3px solid #FFFFFF; box-shadow: 0 10px 24px rgba(15, 31, 92, 0.22);
  }
  .abanico img:nth-child(1) { left: 0; transform: rotate(-7deg); }
  .abanico img:nth-child(2) { left: 70px; transform: rotate(2deg); }
  .abanico img:nth-child(3) { left: 140px; transform: rotate(8deg); }
}

/* ══ Preguntas frecuentes ═════════════════════════════════════════════════ */
.faq-lista { margin-top: 18px; border-top: 2px solid var(--marino); }
.faq-lista details { border-bottom: 1px solid rgba(15, 31, 92, 0.12); }
.faq-lista summary {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; align-items: center; column-gap: 8px;
  min-height: 66px; padding: 6px 0;
}
.faq-lista .n { font: italic 22px/1 var(--serif); color: var(--cyan-oscuro); }
.faq-lista .q { font: 500 19px/1.2 var(--serif); letter-spacing: -0.3px; color: var(--marino); }
.faq-lista .mas { flex: none; font: 400 26px/1 var(--sans); color: var(--azul); transition: transform .2s; }
.faq-lista details[open] .mas { transform: rotate(45deg); }
.faq-lista details p { padding: 0 0 18px 48px; font-size: 15px; line-height: 1.6; color: #334155; }
.faq-cotiza { margin-top: 26px; display: flex; align-items: flex-start; gap: 16px; }
.faq-cotiza > img {
  flex: none; width: 92px; height: 92px; object-fit: cover;
  border-radius: 16px; border: 2px solid #FFFFFF; box-shadow: 0 8px 22px rgba(15, 31, 92, 0.18);
}
.faq-cotiza .ceja-mini { margin-bottom: 4px; font: 800 10px/1.2 var(--sans); letter-spacing: 1.6px; text-transform: uppercase; color: var(--cyan-oscuro); }
.faq-cotiza .t { margin-bottom: 6px; font: 500 19px/1.2 var(--serif); color: var(--marino); }
.faq-cotiza .d { margin-bottom: 6px; font-size: 14px; line-height: 1.45; color: #334155; }
.faq-cotiza .btn-wa { display: none; }
.faq-cotiza .liga-wa { display: inline-flex; align-items: center; min-height: 34px; font-size: 15px; }
.faq-seccion { background-color: #EAF0F9; padding: 42px 0 38px; }
@media (min-width: 900px) {
  .faq-seccion { background: #FFFFFF; padding: 72px 0 96px; }
  .faq-rejilla { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
  .faq-rejilla > section { flex: 999 1 560px; min-width: 0; }
  .faq-rejilla .titulo { font-size: 36px; line-height: 1.1; letter-spacing: -1.2px; margin-bottom: 20px; }
  .faq-lista { margin-top: 0; border-top: 1px solid var(--borde-fino); }
  .faq-lista details { border-bottom-color: var(--borde-fino); }
  .faq-lista summary { display: flex; justify-content: space-between; gap: 12px; min-height: 72px; padding: 0; }
  .faq-lista .n { display: none; }
  .faq-lista .q { font-size: 24px; letter-spacing: -0.4px; line-height: 1.2; }
  .faq-lista .mas { font-size: 28px; }
  .faq-lista details p { max-width: 46rem; padding: 0 0 22px; font-size: 16px; color: var(--texto-suave); }
  .faq-cotiza {
    flex: 1 1 320px; position: sticky; top: 120px; margin: 0;
    flex-direction: column; gap: 16px; padding: 28px; border-radius: 24px;
    background: var(--grad-metal); border: 1px solid rgba(31, 58, 138, 0.15);
  }
  .faq-cotiza > div { display: flex; flex-direction: column; gap: 16px; }
  .faq-cotiza > img { width: 100%; height: 200px; border: 0; border-radius: 16px; box-shadow: none; }
  .faq-cotiza .ceja-mini { margin: 0; font-size: 12px; letter-spacing: 2.5px; color: var(--cyan-icono); }
  .faq-cotiza .t { margin: 0; font-size: 28px; letter-spacing: -0.6px; line-height: 1.1; }
  .faq-cotiza .d { margin: 0; font-size: 15px; line-height: 1.5; color: var(--texto-suave); }
  .faq-cotiza .liga-wa { display: none; }
  .faq-cotiza .btn-wa { display: flex; }
}

/* ══ Cierre ═══════════════════════════════════════════════════════════════ */
.cierre { padding: 40px 0; }
.cierre-fila { display: flex; flex-direction: column; }
.cierre-foto { position: relative; order: -1; margin-bottom: 26px; }
.cierre-foto::before {
  content: ""; position: absolute; inset: -10% -4%; border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.3) 0%, rgba(6, 182, 212, 0) 68%);
}
.cierre-foto img.foto {
  position: relative; display: block; width: 100%; height: 190px; object-fit: cover;
  border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}
.sello { position: absolute; right: 14px; bottom: 12px; height: 22px; width: auto; opacity: 0.92; }
.cierre .titulo { font-size: 29px; }
.cierre .bajada { margin-bottom: 20px; }
.cierre .btn-wa { width: 100%; }
.garantias {
  margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px;
  font-size: 13px; font-weight: 600; color: var(--texto-claro-1);
}
.garantias span:nth-child(even) { color: var(--cyan); }
@media (min-width: 900px) {
  .cierre { padding: 80px 0; }
  .cierre-fila { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 48px 72px; }
  .cierre-fila > div:first-child { flex: 1.3 1 460px; display: flex; flex-direction: column; gap: 20px; }
  .cierre-foto { order: 0; flex: 1 1 340px; margin: 0; }
  .cierre-foto::before { inset: -10% -8%; }
  .cierre-foto img.foto { height: 340px; border-radius: 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); }
  .cierre-foto .sello { right: auto; left: 20px; bottom: 18px; height: 28px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)); }
  .cierre .ceja { margin: 0; }
  .cierre .titulo { font-size: clamp(2.2rem, 3.8vw, 3.4rem); line-height: 1.03; letter-spacing: -1.8px; }
  .cierre .bajada { margin: 0; max-width: 32rem; font-size: 17px; line-height: 1.55; color: var(--texto-claro-1); }
  .cierre .btn-wa { width: auto; align-self: flex-start; margin-top: 4px; }
  .garantias { margin: 0; justify-content: flex-start; gap: 6px 18px; font: 700 12px/1.2 var(--sans); letter-spacing: 2px; text-transform: uppercase; color: var(--texto-claro-2); }
}

/* ══ Pie ══════════════════════════════════════════════════════════════════ */
.pie {
  background-color: var(--marino-prof); color: var(--texto-claro-1);
  padding: 28px 20px 40px; border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pie-fila > img { height: 36px; width: auto; display: block; }
.pie-lema { margin: 10px 0 6px; font: italic 16px var(--serif); color: #FFFFFF; }
.pie-datos { font-size: 14px; line-height: 1.7; }
.pie a { color: var(--texto-claro-1); }
@media (min-width: 900px) {
  .pie { background-color: var(--marino); padding: 0; border-top: 0; }
  .pie-fila { max-width: 1288px; margin: 0 auto; padding: 48px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; }
  .pie-fila > img { height: 44px; }
  .pie-lema { margin: 0; font-size: 17px; }
  .pie-datos { margin-left: auto; }
  .pie-datos br { display: none; }
  .pie-datos .sep-compu::before { content: " · "; }
}

/* ══ Carrusel de portadas (portada del sitio) ═════════════════════════════
   9 portadas que cambian solas cada 4.5 s; el fondo toma el tinte de la que
   está al frente. En compu lleva flechas. Ningún carrusel lleva puntitos
   (regla del diseño). */
.portada-hero { position: relative; overflow: hidden; color: #FFFFFF; background-color: var(--tinte, #406091); transition: background-color 1.1s ease; }
.portada-fondos { position: absolute; inset: 0; overflow: hidden; }
.portada-fondos img {
  position: absolute; left: -60px; top: -60px; width: calc(100% + 120px); height: calc(100% + 120px);
  object-fit: cover; filter: blur(36px) saturate(1.8); opacity: 0; transition: opacity 1.1s ease;
}
.portada-fondos img.activa { opacity: 1; }
.portada-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 31, 92, 0.88) 0%, rgba(15, 31, 92, 0.62) 55%, rgba(15, 31, 92, 0.9) 100%); }
.carrusel { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--marino); }
.carrusel > a { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.carrusel > a.activa { opacity: 1; visibility: visible; transition: opacity .7s ease; }
.carrusel > a img { display: block; width: 100%; height: 100%; object-fit: cover; }
.carrusel::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 31, 92, 0) 0%, rgba(15, 31, 92, 0.85) 100%);
}
/* Las flechas van DEBAJO de la portada, no encima: encima tapaban la foto y se
   veían fuera de lugar (Jorge, 20-oct). Solo en compu; en celular cambia sola. */
.carrusel-controles { display: none; }
.carrusel-flecha {
  width: 40px; height: 40px; padding: 0; border-radius: 100px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF; font: 400 18px/1 var(--sans);
  transition: background .2s ease, border-color .2s ease;
}
.carrusel-flecha:hover { background: rgba(255, 255, 255, 0.18); border-color: var(--cyan-claro); }
.portada-texto { position: relative; padding: 20px 20px 0; display: flex; flex-direction: column; gap: 14px; }
.portada-dolor { font: italic 400 36px/1.02 var(--serif); letter-spacing: -1px; }
.portada-h1 { font: 500 23px/1.15 var(--serif); letter-spacing: -0.5px; color: var(--cyan-claro); }
.portada-texto .liga-elegir { align-self: center; min-height: 0; padding: 4px 0; font-weight: 600; }
.portada-ecg { position: relative; display: block; width: 100%; height: 46px; margin-top: 6px; }
@media (min-width: 900px) {
  .portada-fondos img { transition: none; }
  .portada-velo { background: linear-gradient(90deg, rgba(15, 31, 92, 0.86) 0%, rgba(15, 31, 92, 0.55) 42%, rgba(15, 31, 92, 0) 100%); }
  .portada-ecg { position: absolute; left: 0; bottom: 24px; height: 150px; margin: 0; }
  .portada-cuerpo {
    position: relative; max-width: 1288px; margin: 0 auto; padding: 72px 24px 64px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 48px;
  }
  .portada-texto { order: 1; flex: 1 1 460px; min-width: 0; padding: 0; gap: 20px; }
  .portada-dolor { font-size: clamp(2.1rem, 3.6vw, 3.3rem); line-height: 1.06; }
  .portada-h1 { font-size: clamp(1.5rem, 2.3vw, 2.1rem); letter-spacing: -0.6px; }
  .portada-texto .liga-elegir { align-self: flex-start; font-size: 16px; }
  .portada-sub { max-width: 34rem; font-size: 20px; line-height: 1.5; color: var(--texto-claro-1); }
  .portada-texto .btn-wa { align-self: flex-start; margin-top: 8px; height: 58px; padding: 0 30px; font-size: 17px; }
  .portada-caja { order: 2; flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .carrusel {
    max-width: 480px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 8px rgba(255, 255, 255, 0.06);
  }
  .carrusel::after { display: none; }
  .carrusel-controles { display: flex; gap: 10px; }
}

/* Lo que lleva al formulario no lo deja escondido bajo el encabezado fijo. */
@media (min-width: 900px) { #presupuesto { scroll-margin-top: 120px; } }

/* Compus chicas y tabletas (900–1279 px): el diseño se hizo a 1440 y ahí el
   encabezado no cabe en un renglón. Se compacta en vez de partirse en dos. */
@media (min-width: 900px) and (max-width: 1279.98px) {
  .enc-fila { flex-wrap: nowrap; gap: 12px; }
  .enc-marca img { height: 52px; }
  .enc-lema { display: none; }
  .enc-nav a, .enc.abierto .enc-nav a { padding: 10px 10px; font-size: 15px; }
  .enc-nav a::after { left: 10px; right: 10px; }
  .enc-cta { height: 46px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
}

/* ══ El héroe llena la primera pantalla (Jorge, 19-oct) ═════════════════
   En compu, encabezado + héroe + cinta de clientes = exactamente lo que se ve
   al abrir la página; la cinta asoma al pie e invita a bajar. Las demás
   secciones miden lo que su contenido: obligarlas a pantalla completa deja
   huecos vacíos o corta texto en pantallas bajas.
   Es altura MÍNIMA: si el contenido no cabe, el héroe crece; nunca se corta.
   En celular no se fuerza: ahí la foto, el titular y el botón ya llenan la
   pantalla, y forzarla empujaría el formulario más abajo. */
:root { --alto-enc: 97px; --alto-cinta: 76px; --alto-extra: 0px; }
@media (min-width: 900px) and (max-width: 1365.98px) { :root { --alto-enc: 83px; } }
@media (min-width: 900px) {
  .hero, .portada-hero {
    min-height: calc(100vh - var(--alto-enc) - var(--alto-cinta) - var(--alto-extra));
    min-height: calc(100svh - var(--alto-enc) - var(--alto-cinta) - var(--alto-extra));
    display: flex; align-items: center;
  }
  .hero-cuerpo, .portada-cuerpo { width: 100%; }
}
/* Laptops de pantalla baja (1366×650 y similares): menos aire arriba y abajo
   para que la cinta alcance a asomar sin cortar nada del héroe. */
@media (min-width: 900px) and (max-height: 760px) {
  .hero-cuerpo { padding-top: 40px; padding-bottom: 64px; gap: 40px; }
  .hero-texto { gap: 16px; }
  .hero-ecg { height: 60px; }
}

/* ══ "Por qué elegirnos" y el cierre, también a pantalla completa (Jorge, 20-oct)
   Son los bloques oscuros de impacto: cada uno ocupa lo que se ve debajo del
   encabezado fijo, con el contenido al centro. Mínimo, no fijo: si no cabe,
   crece. Solo en compu, como el héroe. Las secciones de información (señales,
   pasos, preguntas…) siguen midiendo lo que su contenido. */
@media (min-width: 900px) {
  .elegirnos, .cierre {
    min-height: calc(100vh - var(--alto-enc));
    min-height: calc(100svh - var(--alto-enc));
    display: flex; align-items: center;
  }
  .elegirnos-cuerpo, .cierre-fila { width: 100%; }
}

/* ══ "Por qué elegirnos" aprovecha la pantalla completa (Jorge, 20-oct) ═════
   Letra más grande, y el botón justo aquí: es el momento en que la persona ya
   se convenció. Un botón al final de los argumentos convierte más que obligar
   a regresar hasta arriba a buscarlo. El verde se queda SOLO en el botón: si
   también se pintan las ventajas de verde, el botón deja de ser lo único que
   llama a actuar (es la regla del sistema de diseño: verde = WhatsApp). */
.elegirnos-accion { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.elegirnos-accion .btn-wa { width: 100%; }
.elegirnos-accion span { font-size: 13px; line-height: 1.4; color: var(--texto-claro-2); text-align: center; }
@media (min-width: 900px) {
  .elegirnos-cuerpo { max-width: 1288px; gap: 48px 80px; }
  .elegirnos-cuerpo > div { flex: 1 1 520px; max-width: 640px; }
  .elegirnos .ceja { font-size: 15px; }
  .elegirnos h2 { font-size: clamp(3rem, 5vw, 4.75rem); letter-spacing: -2.4px; }
  .elegirnos-bajada { margin-top: 22px; font-size: 21px; line-height: 1.5; }
  .elegirnos-accion { margin-top: 32px; flex-direction: row; align-items: center; gap: 18px; }
  .elegirnos-accion .btn-wa { width: auto; }
  .elegirnos-accion span { max-width: 15rem; text-align: left; }
  .razones { flex: 1 1 520px; padding: 14px 36px; }
  .razones li { gap: 22px; padding: 24px 0; }
  .razones .n { width: 60px; font-size: 42px; }
  .razones .r { gap: 6px; }
  .razones .r b { font-size: 29px; letter-spacing: -0.5px; }
  .razones .r span { font-size: 17px; line-height: 1.5; }
}

/* ══ El botón que acompaña al bajar (Jorge, 20-oct) ═══════════════════════
   El diseño lo traía hecho pero apagado. Se enciende: el cliente nunca tiene
   que regresar hasta arriba a buscar cómo pedir su presupuesto.
   Celular: barra fija al pie de la pantalla. Compu: botón en la esquina, con
   el pulso verde. Se esconde solo mientras hay otro botón a la vista (héroe,
   formulario, cierre y pie), para no repetir el mismo llamado dos veces. */
.boton-fijo {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
  background: rgba(244, 247, 252, 0.97);
  border-top: 1px solid rgba(15, 31, 92, 0.08);
  box-shadow: 0 -10px 28px rgba(15, 31, 92, 0.12);
  transition: transform .35s ease, opacity .35s ease;
}
.boton-fijo .btn-wa { display: flex; width: 100%; height: 54px; }
.boton-fijo .btn-wa img { width: 22px; height: 22px; }
.boton-fijo.oculto { transform: translateY(110%); opacity: 0; pointer-events: none; }
.pie { padding-bottom: 100px; }   /* que la barra no tape los datos del pie */
@media (min-width: 900px) {
  .boton-fijo { left: auto; right: 28px; bottom: 28px; padding: 0; background: none; border: 0; box-shadow: none; }
  .boton-fijo .btn-wa {
    position: relative; height: 62px; padding: 0 26px 0 20px; font-size: 16px;
    box-shadow: 0 8px 24px rgba(15, 31, 92, 0.25), 0 6px 20px rgba(37, 211, 102, 0.35);
  }
  .boton-fijo .btn-wa img { width: 26px; height: 26px; }
  .boton-fijo .btn-wa::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 100px;
    background: var(--wa); opacity: .5; animation: onda 2.2s ease-out infinite;
  }
  .boton-fijo.oculto { transform: translateY(24px); }
  .pie { padding-bottom: 0; }
}
@keyframes onda { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(1.25, 1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .boton-fijo .btn-wa::before { animation: none; } }
/* La dirección en el pie (Jorge, 20-oct): ayuda a que Google ubique a LTEM. */
@media (min-width: 900px) { .pie-dir::after { content: " · "; } }

/* ══ Molde de servicio: "¿Preventivo o diagnóstico?" ═══════════════════════
   Celular: dos tarjetas con foto lado a lado. Compu: dos columnas de lista
   separadas por una raya fina. El diseño trae textos distintos para cada uno,
   por eso hay dos versiones (.solo-cel / .solo-compu). */
.cual-tarjetas { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cual-tarjeta {
  display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--metal-3); background: #FFFFFF; box-shadow: 0 10px 24px rgba(15, 31, 92, 0.08);
}
.cual-tarjeta.aqui { border: 2px solid var(--marino); }
.cual-tarjeta .foto { position: relative; }
.cual-tarjeta .foto img { display: block; width: 100%; height: 112px; object-fit: cover; }
.cual-tarjeta .sello-aqui {
  position: absolute; left: 8px; top: 8px; padding: 4px 9px; border-radius: 100px;
  background: var(--marino); color: #FFFFFF; font: 700 10px/1.2 var(--sans); letter-spacing: 1px; text-transform: uppercase;
}
.cual-tarjeta .cuerpo { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 10px; }
.cual-tarjeta .cuando-es { font: 700 12px/1.3 var(--sans); color: var(--texto-gris); }
.cual-tarjeta h3 { font: 500 20px/1.05 var(--serif); letter-spacing: -0.4px; color: var(--marino); }
.cual-tarjeta ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.cual-tarjeta li { display: flex; gap: 6px; font-size: 13px; line-height: 1.35; color: #334155; }
.cual-tarjeta li::before { content: "\2713"; color: var(--cyan-icono); font-weight: 700; }
.cual-tarjeta .pie-tarjeta { margin-top: auto; padding-top: 4px; font-size: 13px; font-weight: 700; color: var(--cyan-oscuro); }
.cual-tarjeta a.pie-tarjeta { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--azul); }
@media (min-width: 900px) {
  .cual-columnas { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 56px; }
  .cual-columnas > span { background: rgba(15, 31, 92, 0.12); }
  .cual-col { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
  .cual-col .ceja { margin: 0; font-size: 13px; color: var(--cyan-icono); }
  .cual-col.otra .ceja { color: var(--texto-gris); }
  .cual-col.otra .ceja::before { background: rgba(15, 31, 92, 0.2); }
  .cual-col h3 { font: 500 36px/1.05 var(--serif); letter-spacing: -1px; color: var(--marino); }
  .cual-col > p { font-size: 16px; line-height: 1.55; color: var(--texto-suave); }
  .lista-num { list-style: none; margin: 6px 0 0; padding: 0; border-bottom: 1px solid var(--borde-fino); counter-reset: num; }
  .lista-num li {
    display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: baseline;
    padding: 16px 0; border-top: 1px solid rgba(15, 31, 92, 0.1); counter-increment: num;
    font: 500 20px/1.3 var(--serif); letter-spacing: -0.2px; color: var(--marino);
  }
  .lista-num li::before { content: counter(num, decimal-leading-zero); font: italic 400 26px/1 var(--serif); color: var(--cyan-icono); }
  .cual-col.otra .lista-num li { color: #334155; }
  .cual-col.otra .lista-num li::before { color: #94A3B8; }
  .cual-col .es-esta { margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--cyan-icono); }
  .cual-col .ir-otra {
    margin-top: 6px; align-self: flex-start; font-size: 15px; font-weight: 700; color: var(--azul);
    text-decoration: underline; text-decoration-color: rgba(6, 182, 212, 0.6); text-underline-offset: 4px;
  }
}

/* ══ Molde de servicio: "Qué incluye" + el reporte que se entrega ══════════
   Las líneas del reporte se palomean una por una cuando la sección entra a
   la pantalla (componentes.js le pone .specs-in). */
.incluye-puntos { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; counter-reset: num; }
.incluye-puntos li {
  display: flex; flex-direction: column; gap: 8px; padding: 14px 12px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); counter-increment: num;
}
.incluye-puntos li::before { content: counter(num, decimal-leading-zero); font: italic 20px/1 var(--serif); color: var(--cyan-claro); }
.incluye-puntos b { font-size: 14px; font-weight: 600; line-height: 1.3; color: #FFFFFF; }
.incluye-puntos span { display: none; }
.reporte {
  position: relative; margin-top: 22px; padding: 18px 18px 16px; border-radius: 6px;
  background: #FFFFFF; color: var(--texto); border-top: 6px solid var(--cyan);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45); transform: rotate(-1deg);
}
.reporte header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--marino); }
.reporte .r-ceja { font: 800 10px/1.2 var(--sans); letter-spacing: 1.6px; text-transform: uppercase; color: var(--cyan-icono); }
.reporte .r-tit { margin-top: 5px; font: 500 19px/1.1 var(--serif); color: var(--marino); }
.reporte .r-sub { margin-top: 3px; font-size: 12px; color: var(--texto-suave); }
.reporte header img { flex: none; height: 34px; width: auto; }
.reporte .r-campos { display: none; }
.reporte .r-etq { font: 800 10px/1.2 var(--sans); letter-spacing: 1.6px; text-transform: uppercase; color: var(--texto-gris); margin: 18px 0 2px; }
.reporte ul { list-style: none; margin: 0; padding: 0; }
.chk {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) 18px; gap: 10px; align-items: center;
  padding: 7px 0; border-bottom: 1px dashed rgba(15, 31, 92, 0.14);
  opacity: 0; transform: translateX(-10px); transition: opacity .4s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.chk:nth-child(n+5) { display: none; }
.chk i { height: 7px; border-radius: 4px; background: #CBD5E1; }
.chk i + i { background: #E2E8F0; }
.chk svg { width: 18px; height: 18px; }
.specs-in .chk { opacity: 1; transform: none; }
.reporte .r-dictamen { display: none; }
.reporte footer { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.reporte footer span { padding-top: 8px; border-top: 1px solid var(--marino); font: 700 10px/1.2 var(--sans); letter-spacing: 1px; text-transform: uppercase; color: var(--texto-gris); }
@media (prefers-reduced-motion: reduce) { .chk { opacity: 1; transform: none; transition: none; } }
@media (min-width: 900px) {
  .incluye { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
  .incluye .bajada { margin: 16px 0 10px; max-width: 32rem; font-size: 17px; line-height: 1.55; color: var(--texto-claro-1); }
  .incluye-puntos { display: block; margin-top: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
  .incluye-puntos li {
    display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0; row-gap: 6px;
    padding: 18px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0; background: none;
  }
  .incluye-puntos li::before { grid-row: 1 / 3; font-size: 26px; padding-top: 2px; }
  .incluye-puntos b { font: 500 22px/1.2 var(--serif); letter-spacing: -0.3px; }
  .incluye-puntos span { display: block; grid-column: 2; font-size: 15px; line-height: 1.55; color: var(--texto-claro-2); }
  .reporte { margin: 0; padding: 32px 36px 30px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); }
  .reporte header { gap: 16px; padding-bottom: 16px; }
  .reporte .r-ceja { font-size: 12px; letter-spacing: 2px; }
  .reporte .r-tit { margin-top: 6px; font-size: 24px; }
  .reporte .r-sub { margin-top: 4px; font-size: 14px; }
  .reporte header img { height: 46px; }
  .reporte .r-campos { display: grid; margin-top: 18px; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
  .reporte .r-campos div { display: flex; flex-direction: column; gap: 6px; }
  .reporte .r-campos b, .reporte .r-dictamen b { font: 700 11px/1.2 var(--sans); letter-spacing: 1.5px; text-transform: uppercase; color: var(--texto-gris); }
  .reporte .r-campos i, .reporte .r-dictamen i { height: 10px; border-radius: 4px; background: #E2E8F0; }
  .reporte .r-etq { margin: 22px 0 4px; font-size: 12px; letter-spacing: 2px; }
  .chk { grid-template-columns: 22px minmax(0, 1fr) 20px; padding: 8px 0; }
  .chk:nth-child(n+5) { display: grid; }
  .chk i { height: 8px; }
  .reporte .r-dictamen { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
  .reporte footer { margin-top: 24px; gap: 24px; }
  .reporte footer span { font: 400 13px var(--sans); letter-spacing: 0; text-transform: none; color: var(--texto-suave); }
}

/* ══ Molde de servicio: "Qué no incluye / Sí lo hacemos" ═══════════════════ */
.alcance-foto { position: relative; }
.alcance-foto img.foto { display: block; width: 100%; height: 210px; object-fit: cover; border-radius: 18px; box-shadow: 0 12px 28px rgba(15, 31, 92, 0.18); }
.alcance-foto .sello { right: 14px; bottom: 12px; height: 20px; }
.alcance-texto > p.titular { margin: 22px 0 6px; font: 500 24px/1.15 var(--serif); letter-spacing: -0.5px; color: var(--marino); }
.alcance-bloques { border-bottom: 1px solid rgba(15, 31, 92, 0.12); }
.alcance-bloques > div { padding: 16px 0; border-top: 1px solid rgba(15, 31, 92, 0.12); }
.alcance-bloques .ceja-mini { margin-bottom: 6px; font: 800 11px/1.2 var(--sans); letter-spacing: 2px; text-transform: uppercase; color: var(--cyan-icono); }
.alcance-bloques h3 { margin-bottom: 6px; font: 500 22px/1.1 var(--serif); color: var(--marino); }
.alcance-bloques p { font-size: 15px; line-height: 1.55; color: var(--texto-suave); }
@media (min-width: 900px) {
  .alcance { padding: 0; }
  .alcance-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .alcance-foto { min-height: 560px; }
  .alcance-foto img.foto { position: absolute; inset: 0; height: 100%; border-radius: 0; box-shadow: none; }
  .alcance-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 31, 92, 0) 55%, rgba(15, 31, 92, 0.35) 100%); }
  .alcance-foto .sello { right: auto; left: 24px; bottom: 22px; height: 28px; z-index: 1; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)); }
  .alcance-texto { max-width: 620px; padding: 72px 56px 64px; }
  .alcance-texto > p.titular { margin: 0 0 8px; font-size: clamp(2rem, 3.2vw, 2.8rem); line-height: 1.05; letter-spacing: -1.4px; }
  .alcance-bloques { border-bottom: 0; }
  .alcance-bloques > div { display: flex; flex-direction: column; gap: 10px; padding: 26px 0; border-top: 0; }
  .alcance-bloques > div + div { border-top: 1px solid rgba(15, 31, 92, 0.14); }
  .alcance-bloques .ceja-mini { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 15px; letter-spacing: 2.5px; color: var(--azul); }
  .alcance-bloques .ceja-mini::before { content: ""; width: 32px; height: 3px; border-radius: 3px; background: var(--cyan); }
  .alcance-bloques h3 { margin: 0; font-size: 30px; letter-spacing: -0.8px; line-height: 1.08; }
  .alcance-bloques p { max-width: 34rem; font-size: 16px; line-height: 1.6; }
}

/* Fondos que cambian entre celular y compu en el molde de servicio. */
.galeria-franja { background: var(--grad-metal); }
.alcance { background: #FFFFFF; }
@media (min-width: 900px) {
  .galeria-franja { background: #FFFFFF; border-top: 1px solid var(--borde-fino); padding: 48px 0; }
  .alcance { background: var(--grad-metal); }
}
@media (max-width: 899.98px) { .contenedor-cel { padding-left: 20px; padding-right: 20px; } }

/* ══ "Qué atendemos" con marcas (camas) ══════════════════════════════════
   Cada tarjeta lleva las marcas que ya pasaron por nuestras manos, y al final
   una franja con los 24 años. En compu van tres columnas (lámparas lleva cuatro). */
.tarjeta-at .cuerpo-at { padding: 14px 16px 18px; }
.tarjeta-at .cuerpo-at > p { margin: 0 0 10px; padding: 0; font-size: 12px; font-weight: 600; color: #94A3B8; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px; border-radius: 100px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16);
}
.chips b { font-size: 14px; font-weight: 700; color: #FFFFFF; }
.chips span { font-size: 12px; color: var(--texto-claro-2); }
.remate-anos {
  margin: 24px 20px 0; padding: 18px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; align-items: center; gap: 16px;
}
.remate-anos > b { flex: none; font: 500 44px/0.9 var(--serif); color: var(--cyan-claro); }
.remate-anos > b small { display: block; font: 700 13px var(--sans); color: #FFFFFF; }
.remate-anos > span { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.4; color: var(--texto-claro-1); }
.remate-anos a { font-size: 15px; font-weight: 700; color: var(--wa); text-decoration: none; }
@media (min-width: 900px) {
  .atendemos-lista.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .remate-anos { max-width: 1240px; margin: 28px auto 0; }
}

/* ══ Lámparas: piezas propias del molde ═══════════════════════════════════ */

/* "Qué incluye" con el detalle de cada sistema también en celular (lista,
   no mosaico): óptico, mecánico, eléctrico y respaldo necesitan su explicación. */
@media (max-width: 899.98px) {
  .incluye-puntos.detalle { display: block; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
  .incluye-puntos.detalle li {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); row-gap: 4px;
    padding: 14px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0; background: none;
  }
  .incluye-puntos.detalle li::before { grid-row: 1 / 3; }
  .incluye-puntos.detalle b { font: 500 19px/1.2 var(--serif); }
  .incluye-puntos.detalle span { display: block; grid-column: 2; font-size: 14px; line-height: 1.5; color: var(--texto-claro-2); }
}

/* "¿Preventivo o diagnóstico?" cuando la página ofrece los dos (lámparas):
   en celular el preventivo va plegado y la revisión abierta, que es por
   donde empieza la mayoría. */
.cual-movil { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.cual-movil details, .cual-movil > div {
  border-radius: 16px; border: 1px solid var(--metal-3); background: #FFFFFF;
  box-shadow: 0 10px 24px rgba(15, 31, 92, 0.08); padding: 16px;
}
.cual-movil > div { border: 2px solid var(--marino); }
.cual-movil summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cual-movil summary > span:first-child, .cual-movil > div > .encabezado { display: flex; flex-direction: column; gap: 4px; }
.cual-movil .cuando-es { font: 700 12px/1.3 var(--sans); color: var(--texto-gris); }
.cual-movil h3, .cual-movil summary .nombre { font: 500 22px/1.08 var(--serif); letter-spacing: -0.4px; color: var(--marino); }
.cual-movil .mas { font: 400 26px/1 var(--sans); color: var(--azul); transition: transform .2s; }
.cual-movil details[open] .mas { transform: rotate(45deg); }
.cual-movil p.desc { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--texto-suave); }
.cual-movil ol { list-style: none; margin: 10px 0 0; padding: 0; counter-reset: num; }
.cual-movil ol li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); padding: 9px 0;
  border-top: 1px solid rgba(15, 31, 92, 0.1); counter-increment: num;
  font-size: 14px; line-height: 1.4; color: #334155;
}
.cual-movil ol li::before { content: counter(num, decimal-leading-zero); font: italic 18px/1.2 var(--serif); color: var(--cyan-icono); }
.cual-movil .mayoria { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--cyan-oscuro); }

/* Franja de marcas al pie de "Qué atendemos". */
.remate-marcas {
  margin: 24px 20px 0; padding: 18px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; flex-direction: column; gap: 12px;
}
.remate-marcas > p { font-size: 12px; font-weight: 600; color: #94A3B8; }
.remate-marcas > a { font-size: 15px; font-weight: 700; color: var(--wa); text-decoration: none; }
@media (min-width: 900px) {
  .remate-marcas { max-width: 1240px; margin: 28px auto 0; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px 20px; }
  .remate-marcas > a { margin-left: auto; }
}

/* ══ Página madre de servicios: héroe "¿Qué le pasa a tu equipo?" ══════════
   Una foto de fondo, el titular y la lista de casos: cada caso lleva a su
   página de servicio. En compu, el texto a la izquierda y la lista a la derecha. */
.hero-st { position: relative; }
.hero-st > .fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-st > .velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 23, 71, 0.72) 0%, rgba(11, 23, 71, 0.9) 45%, #0F1F5C 100%); }
.hero-st-cuerpo { position: relative; padding: 34px 20px; }
.hero-st .dolor { font: italic 400 34px/1.04 var(--serif); letter-spacing: -1px; color: #FFFFFF; }
.hero-st h1 { margin-top: 12px; font: 500 24px/1.15 var(--serif); letter-spacing: -0.5px; color: var(--cyan-claro); }
.hero-st .sub { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--texto-claro-1); }
.hero-st .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 18px; }
.hero-st .acciones .btn-wa { width: 100%; }
.hero-st .acciones .liga-elegir { min-height: 0; padding: 4px 0; font-weight: 600; }
.sintomas { list-style: none; margin: 22px 0 0; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.sintomas li { border-top: 1px solid rgba(255, 255, 255, 0.18); }
.sintomas a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 2px; text-decoration: none; }
.sintomas a > span:first-child { display: flex; flex-direction: column; gap: 3px; }
.sintomas b { font: 500 20px/1.15 var(--serif); color: #FFFFFF; }
.sintomas small { font-size: 13px; color: var(--cyan-claro); }
.sintomas small.wa { color: var(--wa); }
.sintomas a > span:last-child { flex: none; font-size: 20px; color: var(--cyan-claro); }
@media (min-width: 900px) {
  .hero-st > .velo { background: linear-gradient(90deg, rgba(11, 23, 71, 0.94) 0%, rgba(11, 23, 71, 0.86) 50%, rgba(11, 23, 71, 0.6) 100%); }
  .hero-st { display: flex; align-items: center; min-height: calc(100vh - var(--alto-enc) - var(--alto-cinta)); min-height: calc(100svh - var(--alto-enc) - var(--alto-cinta)); }
  .hero-st-cuerpo {
    width: 100%; max-width: 1288px; margin: 0 auto; padding: 104px 24px 108px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 48px 80px;
  }
  .hero-st-cuerpo > div { flex: 1 1 460px; }
  .hero-st-cuerpo > .sintomas { flex: 1 1 480px; margin: 0; }
  .hero-st .dolor { font-size: clamp(2.8rem, 4.6vw, 4.2rem); }
  .hero-st h1 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
  .hero-st .sub { font-size: 18px; }
  .hero-st .acciones .btn-wa { width: auto; height: 60px; padding: 0 30px; font-size: 17px; }
  .sintomas a { padding: 20px 2px; }
  .sintomas b { font-size: 26px; }
  .sintomas small { font-size: 14px; }
  .sintomas a > span:last-child { font-size: 24px; }
}
@media (min-width: 900px) and (max-height: 760px) { .hero-st-cuerpo { padding-top: 48px; padding-bottom: 56px; } }

/* "O elige por equipo": lista con foto redonda; en compu, dos columnas. */
.equipos { list-style: none; margin: 18px 0 0; padding: 0; border-bottom: 1px solid rgba(15, 31, 92, 0.12); }
.equipos li { border-top: 1px solid rgba(15, 31, 92, 0.12); }
.equipos a { display: flex; align-items: center; gap: 16px; padding: 16px 0; text-decoration: none; }
.equipos img.redonda, .equipos .redonda {
  flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 6px 16px rgba(15, 31, 92, 0.2);
}
.equipos .redonda.wa { display: grid; place-items: center; background: var(--wa); box-shadow: 0 6px 16px rgba(37, 211, 102, 0.35); }
.equipos .redonda.wa img { width: 32px; height: 32px; }
.equipos .txt { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.equipos .txt b { font: 500 24px/1.08 var(--serif); letter-spacing: -0.5px; color: var(--marino); }
.equipos .txt span { font-size: 14px; color: var(--texto-suave); }
.equipos .flecha { flex: none; font-size: 22px; color: var(--azul); }
.equipos .flecha.wa { font-size: 15px; font-weight: 700; color: #15803D; white-space: nowrap; }
@media (min-width: 900px) {
  .equipos { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
  .equipos li:last-child { grid-column: 1 / -1; }
  .equipos a { gap: 28px; padding: 22px 0; }
  .equipos img.redonda, .equipos .redonda { width: 88px; height: 88px; }
  .equipos .redonda.wa img { width: 44px; height: 44px; }
  .equipos .txt b { font-size: 34px; }
  .equipos .txt span { font-size: 16px; }
}

/* ══ Molde de baterías (grupo 2, 21-oct) ═══════════════════════════════════
   Lo usan la página por equipo (diseño 03, .hero-bat) y la ficha de cada
   batería (diseño 02, .hero-bat.ficha). El letrero de existencia (.estado) lo
   decide el ERP: "En stock" si hay lote o si la batería la armamos aquí
   (Jorge, 20-oct); "En camino" si el lote viene en llegada; si no, "Sobre
   pedido". Nunca "sale hoy". */
.latido { position: relative; }
.latido::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.7); animation: latir 1.8s ease-out infinite;
}
@keyframes latir { 0% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.7); } 100% { box-shadow: 0 0 0 16px rgba(6, 182, 212, 0); } }
@media (prefers-reduced-motion: reduce) { .latido::after { animation: none; } }
.punto { flex: none; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); }
.pedido .punto { background: #94A3B8; }
.camino .punto { background: transparent; border: 2px solid var(--cyan); }

.estado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.estado b {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font: 800 13px/1.2 var(--sans); letter-spacing: 2.5px; text-transform: uppercase; color: var(--cyan-claro);
}
.estado.pedido b { color: var(--texto-claro-2); }
.estado .sep { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.3); }
.estado i { font: italic 400 20px/1.2 var(--serif); color: #FFFFFF; }
.estado.claro b { font-size: 12px; color: var(--cyan-icono); }
.estado.claro.pedido b { color: var(--texto-suave); }
.estado.claro.camino b { color: var(--azul); }
.estado.claro .sep { height: 18px; background: rgba(15, 31, 92, 0.18); }
.estado.claro i { font-size: 18px; color: var(--marino); }

/* Héroe: en celular la foto arriba; en compu, texto y formulario de un lado y
   la foto en tarjeta del otro (en la ficha, la foto va a la izquierda). */
.hero-bat-foto { order: 1; position: relative; }
.hero-bat-foto img.foto { display: block; width: 100%; height: 330px; object-fit: cover; }
.hero-bat-foto .sello { left: 20px; right: auto; bottom: 18px; display: none; }
.hero-pildora {
  position: absolute; z-index: 3; left: 16px; top: 14px;
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 100px;
  background: rgba(11, 23, 71, 0.78); font: 700 12px/1.2 var(--sans); color: #FFFFFF;
}
.hero-pildora .punto { width: 8px; height: 8px; background: var(--wa); }
.hero-bat .hero-form .liga-elegir { display: none; }
.hero-bat.ficha .hero-bat-foto { padding: 14px 20px 0; }
.hero-bat.ficha .hero-bat-foto::before {
  content: ""; position: absolute; inset: -10% -4%; border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.32) 0%, rgba(6, 182, 212, 0) 68%);
}
.hero-bat.ficha .hero-bat-foto img.foto {
  position: relative; height: auto; object-fit: contain;
  border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}
.hero-bat.ficha .hero-velo { display: none; }
.hero-bat.ficha .hero-texto { padding-top: 14px; gap: 12px; }
.hero-bat.ficha .hero-dolor { position: static; transform: none; font-size: 29px; text-shadow: none; }
@media (min-width: 900px) {
  .hero-bat .hero-velo, .hero-pildora { display: none; }
  /* El héroe llena la pantalla: el contenido va centrado en esa altura y la
     foto crece con la pantalla (Jorge, 20-oct: "se quedó pequeña la portada"). */
  .hero-bat { justify-content: center; }
  .hero-bat .hero-cuerpo {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    grid-template-areas: "texto foto" "form foto"; column-gap: 64px; row-gap: 28px;
    align-items: center; max-width: 1288px; padding: 48px 24px 96px;
  }
  .hero-bat.ficha .hero-cuerpo { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "foto texto" "foto form"; }
  .hero-bat .hero-texto { grid-area: texto; align-self: end; gap: 20px; }
  .hero-bat.ficha .hero-texto { gap: 18px; padding: 0; }
  .hero-bat .hero-form {
    grid-area: form; align-self: start; max-width: none;
    display: flex; flex-wrap: wrap; align-items: center; gap: 24px;
  }
  .hero-bat .hero-form .form-plata { flex: 1 1 100%; }
  .hero-bat .hero-form .form-plata.plegado { flex: 0 0 auto; }
  .hero-bat .hero-form .liga-elegir { display: inline-flex; min-height: 0; padding: 4px 0; font-size: 16px; font-weight: 600; }
  .hero-bat .hero-bat-foto { grid-area: foto; padding: 0; }
  .hero-bat .hero-bat-foto::before {
    content: ""; position: absolute; inset: -8% -6%; border-radius: 50%;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.32) 0%, rgba(6, 182, 212, 0) 68%);
  }
  /* La foto completa, sin recortar (Jorge, 20-oct: "se cortó la foto"): conserva
     su proporción y solo se achica si la pantalla es baja. */
  .hero-bat .hero-bat-foto { justify-self: center; }
  .hero-bat .hero-bat-foto img.foto, .hero-bat.ficha .hero-bat-foto img.foto {
    position: relative; width: auto; max-width: 100%; height: auto; max-height: calc(100svh - 250px);
    aspect-ratio: auto; object-fit: contain;
    border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  }
  .hero-bat .hero-bat-foto .sello { display: block; height: 28px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)); }
  .hero-bat.ficha .hero-dolor { font-size: clamp(2.1rem, 3.6vw, 3.3rem); }
  .estado { gap: 8px 16px; }
  .estado b { font-size: 14px; gap: 12px; }
  .estado .punto { width: 10px; height: 10px; }
  .estado .sep { height: 22px; background: rgba(255, 255, 255, 0.25); }
  .estado i { font-size: 22px; }
  .estado.claro b { font-size: 12px; gap: 10px; }
  .estado.claro .punto { width: 8px; height: 8px; }
  .estado.claro .sep { height: 18px; background: rgba(15, 31, 92, 0.18); }
  .estado.claro i { font-size: 18px; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .hero-bat .hero-cuerpo { padding-top: 32px; padding-bottom: 72px; }
  .hero-bat .hero-bat-foto img.foto, .hero-bat.ficha .hero-bat-foto img.foto { max-height: calc(100svh - 210px); }
}

/* "¿Qué desfibrilador tienes?": pestañas por marca y una tarjeta por modelo.
   En celular, renglones con foto chica; en compu, cuatro columnas. */
.marcas { margin-top: 16px; display: flex; flex-wrap: wrap; border-bottom: 1px solid rgba(15, 31, 92, 0.12); }
.marca-tab {
  position: relative; height: 44px; padding: 0 2px; margin-right: 18px;
  border: 0; background: transparent; cursor: pointer;
  font: 600 14px var(--sans); color: var(--texto-suave);
}
.marca-tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 3px; border-radius: 3px;
  background: var(--cyan); transform: scaleX(0); transition: transform .25s;
}
.marca-tab:hover, .marca-tab.on { color: var(--marino); }
.marca-tab.on::after { transform: scaleX(1); }
.modelos { list-style: none; margin: 0; padding: 0; }
.modelo { border-bottom: 1px solid rgba(15, 31, 92, 0.1); }
.modelo[hidden] { display: none; }
.modelo > a {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 14px 0; text-decoration: none; color: var(--marino);
}
.modelo .foto {
  position: relative; display: block; width: 96px; height: 96px; overflow: hidden;
  border-radius: 14px; box-shadow: 0 6px 16px rgba(15, 31, 92, 0.16);
}
.modelo .foto img { position: absolute; left: -36px; top: -58px; width: 168px; height: 168px; max-width: none; object-fit: cover; }
.modelo .cuerpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.modelo .disp {
  display: inline-flex; align-items: center; gap: 8px;
  font: 800 10px/1.2 var(--sans); letter-spacing: 1.6px; text-transform: uppercase; color: var(--cyan-icono);
}
.modelo .disp .punto { width: 8px; height: 8px; }
.modelo .disp.pedido { color: var(--texto-suave); }
.modelo .disp.camino { color: var(--azul); }
.modelo .equipo { font-size: 12px; color: var(--texto-gris); }
.modelo .nombre { font: 500 20px/1.1 var(--serif); letter-spacing: -0.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modelo .dato { font-size: 13px; color: var(--texto-suave); }
.modelo .pie-m { margin-top: 2px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.modelo .ver { font-size: 13px; font-weight: 700; color: var(--azul); border-bottom: 2px solid transparent; }
.modelo .ref { font-size: 11px; color: var(--texto-gris); white-space: nowrap; }
.modelo-otro { margin-top: 18px; border-radius: 18px; overflow: hidden; }
.modelo-otro a {
  display: flex; flex-direction: column; gap: 8px; padding: 22px 20px;
  text-decoration: none; color: #FFFFFF;
}
.modelo-otro a::before { content: ""; width: 32px; height: 3px; border-radius: 3px; background: var(--cyan); display: none; }
.modelo-otro .t { font: 500 24px/1.1 var(--serif); }
.modelo-otro .d { font-size: 14px; line-height: 1.5; color: var(--texto-claro-2); }
.modelo-otro .w { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--wa); }
.modelo-otro .w img { width: 20px; height: 20px; }
.modelo-otro a:hover { color: #FFFFFF; }
@media (min-width: 900px) {
  .marcas { margin: 0 0 32px; border-bottom-color: rgba(15, 31, 92, 0.1); }
  .marca-tab { height: 48px; padding: 0 4px; margin-right: 24px; font-size: 16px; }
  .modelos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
  .modelo, .modelo-otro {
    margin: 0; border: 1px solid rgba(31, 58, 138, 0.12); border-radius: 20px; overflow: hidden; background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(15, 31, 92, 0.08); transition: transform .25s ease, box-shadow .25s ease;
  }
  .modelo:hover, .modelo-otro:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 31, 92, 0.18); }
  .modelo:hover .ver { border-bottom-color: var(--cyan); }
  .modelo > a { display: flex; flex-direction: column; height: 100%; padding: 0; gap: 0; }
  .modelo .foto { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 0; box-shadow: none; }
  .modelo .foto img { position: static; width: 100%; height: 100%; }
  .modelo .cuerpo { flex: 1; gap: 8px; padding: 18px 20px 20px; }
  .modelo .disp { gap: 10px; font-size: 12px; letter-spacing: 2px; }
  .modelo .equipo { font: 600 13px/1.2 var(--sans); letter-spacing: 1px; text-transform: uppercase; color: var(--texto-suave); }
  .modelo .nombre { font-size: 25px; letter-spacing: -0.5px; white-space: normal; }
  .modelo .dato { font-size: 14px; line-height: 1.45; }
  .modelo .pie-m { margin-top: auto; padding-top: 6px; gap: 10px; }
  .modelo .ver { font-size: 15px; padding-bottom: 2px; }
  .modelo .ref { font-size: 12px; }
  /* La tarjeta "¿No ves tu…?" conserva su fondo azul oscuro (.oscuro): el blanco
     de arriba es solo para las tarjetas de modelo. */
  .modelo-otro.oscuro {
    border: 0; box-shadow: 0 10px 28px rgba(15, 31, 92, 0.18);
    background-color: var(--marino);
    background-image: url(/img/ecg-fondo.svg), var(--grad-azul);
    background-size: 700px 200px, auto; background-repeat: repeat, no-repeat;
  }
  .modelo-otro a { justify-content: flex-end; gap: 14px; height: 100%; min-height: 420px; padding: 28px 24px; }
  .modelo-otro a::before { display: block; }
  .modelo-otro .t { font-size: 30px; line-height: 1.05; letter-spacing: -0.8px; }
  .modelo-otro .d { font-size: 15px; color: var(--texto-claro-1); }
  .modelo-otro .w { color: #FFFFFF; }
}

/* Remate de las señales con su link a cotizar. */
.remate a { margin-left: 4px; font-size: 15px; font-weight: 700; white-space: nowrap; }

/* Especificaciones de la ficha: la batería al centro y sus datos a los lados,
   que entran deslizándose cuando la sección aparece (data-revela). */
.specs-bat { text-align: center; padding: 40px 0 34px; color: #FFFFFF; }
.specs-bat .ceja { justify-content: center; }
.specs-bat .ceja::after { content: ""; flex: none; width: 24px; height: 3px; border-radius: 3px; background: var(--cyan); }
.specs-bat .ceja::before { width: 24px; }
.specs-rejilla {
  margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr) 128px minmax(0, 1fr);
  align-items: center; column-gap: 10px; text-align: left;
}
.specs-lado { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.specs-lado.izq { text-align: right; }
.spec-etq { margin-bottom: 5px; font: 700 10px/1.2 var(--sans); letter-spacing: 1.5px; text-transform: uppercase; color: var(--cyan-claro); }
.spec-linea { display: flex; align-items: center; }
.izq .spec-linea { margin-right: -10px; }
.der .spec-linea { margin-left: -10px; }
.spec-linea i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(6, 182, 212, 0) 0%, var(--cyan) 100%); transform: scaleX(0); transform-origin: right center; transition: transform .5s ease .35s; }
.der .spec-linea i { background: linear-gradient(90deg, var(--cyan) 0%, rgba(6, 182, 212, 0) 100%); transform-origin: left center; }
.spec-linea b { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px rgba(6, 182, 212, 0.9); }
.spec-val { margin-top: 6px; font: 500 16px/1.2 var(--serif); }
.spec-val span { white-space: nowrap; }
.spec-bat { position: relative; height: 320px; opacity: 0; transform: scale(.8); transition: opacity .6s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.spec-bat .halo { position: absolute; inset: -18px -26px; border-radius: 50%; background: radial-gradient(circle, rgba(6, 182, 212, 0.4) 0%, rgba(6, 182, 212, 0) 68%); }
.spec-bat img.foto { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.5)); }
.spec-bat .sello { left: 50%; right: auto; bottom: 0; transform: translateX(-50%); height: 18px; }
.spec-bat .web { display: none; }
.spec-bat img.compu { display: none; }
.specs-lado li { opacity: 0; transition: opacity .7s ease, transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.specs-lado.izq li { transform: translateX(120px) scale(.6); }
.specs-lado.der li { transform: translateX(-120px) scale(.6); }
.specs-in .spec-bat, .specs-in .specs-lado.izq li, .specs-in .specs-lado.der li { opacity: 1; transform: none; }
.specs-in .spec-linea i { transform: scaleX(1); }
.specs-in .spec-bat .halo { animation: halo 3.2s ease-in-out 1s infinite; }
@keyframes halo { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .spec-bat, .specs-lado li { opacity: 1; transform: none; transition: none; }
  .spec-linea i { transform: none; }
  .specs-in .spec-bat .halo { animation: none; }
}
/* Sin foto recortada de la batería: en celular la foto va arriba, a lo ancho,
   y los datos en dos columnas debajo. */
.specs-rejilla.plana { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; row-gap: 24px; }
.specs-rejilla.plana .spec-bat { grid-column: 1 / -1; grid-row: 1; height: auto; }
.specs-rejilla.plana .spec-bat .halo { inset: -10% -4%; }
.specs-rejilla.plana .spec-bat img.foto { height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; filter: none; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35); }
.specs-rejilla.plana .spec-bat .sello { left: 16px; bottom: 12px; transform: none; height: 22px; }
.specs-rejilla.plana .specs-lado { grid-row: 2; }
@media (min-width: 900px) {
  .specs-rejilla.plana { grid-template-columns: minmax(0, 1fr) minmax(260px, 1.1fr) minmax(0, 1fr); column-gap: 32px; }
  .specs-rejilla.plana .spec-bat { grid-column: 2; grid-row: 1; }
  .specs-rejilla.plana .specs-lado { grid-row: 1; }
  .specs-rejilla.plana .spec-bat img.foto { aspect-ratio: auto; height: 380px; border-radius: 24px; }
  .specs-rejilla.plana .spec-bat .sello { left: 20px; bottom: 16px; height: 30px; }
}
.specs-firma {
  margin-top: 26px; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--texto-claro-2);
}
.specs-firma::before, .specs-firma::after { content: ""; width: 28px; height: 1px; background: rgba(255, 255, 255, 0.3); }
.specs-firma img { display: none; }
.specs-ref { margin: 12px auto 0; max-width: 40rem; font-size: 13px; line-height: 1.55; color: var(--texto-claro-2); }
@media (min-width: 900px) {
  .specs-bat { padding: 72px 0; }
  .specs-bat .ceja::after { display: none; }
  .specs-bat .ceja::before { width: 32px; }
  .specs-bat .titulo { max-width: 760px; margin: 0 auto; }
  .specs-rejilla { margin-top: 48px; grid-template-columns: minmax(0, 1fr) minmax(260px, 1.1fr) minmax(0, 1fr); column-gap: 32px; }
  .specs-lado { gap: 44px; }
  .specs-lado.izq li { transform: translateX(260px) scale(.6); }
  .specs-lado.der li { transform: translateX(-260px) scale(.6); }
  .specs-in .specs-lado.izq li, .specs-in .specs-lado.der li { transform: none; }
  .spec-etq { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 12px; }
  .izq .spec-etq { justify-content: flex-end; }
  .spec-linea { margin: 0 !important; gap: 10px; }
  .spec-linea i { flex: none; width: 40px; height: 2px; }
  .spec-linea b { width: 10px; height: 10px; box-shadow: 0 0 14px rgba(6, 182, 212, 0.7); }
  .spec-val { margin: 0; font-size: 30px; letter-spacing: -0.6px; line-height: 1.1; }
  .spec-bat { height: auto; }
  .spec-bat .halo { inset: 6% 2%; background: radial-gradient(circle, rgba(6, 182, 212, 0.35) 0%, rgba(6, 182, 212, 0) 70%); }
  .spec-bat img.foto { height: 380px; object-fit: cover; border-radius: 24px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3); filter: none; }
  .spec-bat img.cel { display: none; }
  .spec-bat img.compu { display: block; }
  .spec-bat::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; border-radius: 0 0 24px 24px; background: linear-gradient(180deg, rgba(15, 31, 92, 0) 0%, rgba(15, 31, 92, 0.75) 100%); }
  .spec-bat .sello { z-index: 1; left: 20px; bottom: 16px; transform: none; height: 30px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); }
  .spec-bat .web { display: block; position: absolute; z-index: 1; right: 20px; bottom: 16px; font: 700 12px/1 var(--sans); letter-spacing: 1.5px; color: #FFFFFF; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
  .specs-firma { margin-top: 44px; gap: 16px; font-size: 13px; font-weight: 800; letter-spacing: 2.5px; color: var(--cyan-claro); }
  .specs-firma::before, .specs-firma::after { width: 32px; height: 3px; border-radius: 3px; background: var(--cyan); }
  .specs-firma img { display: block; height: 28px; width: auto; }
  .specs-ref { margin-top: 18px; font-size: 14px; }
}

/* "¿Es la de mi equipo?": los modelos donde funciona, sin partir el nombre. */
.faq-lista .resp { padding: 0 0 18px 48px; }
.faq-lista .resp p { padding: 0 0 10px; }
.funciona { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.funciona li { white-space: nowrap; font: 500 18px/1.3 var(--serif); color: var(--marino); }
/* Formulario de la página por equipo: un contador por modelo. */
.cnt-lista { display: flex; flex-direction: column; gap: 8px; }
.cnt-lista .cnt-tile { padding: 8px 10px 8px 14px; gap: 10px; }
.cnt-lista .cnt-lbl { font-size: 15px; line-height: 1.2; }
.cnt-lista .cnt-lbl small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--texto-gris); }
.cnt-lista .cnt-ctl { gap: 10px; flex: none; }
.cnt-lista .paso-claro { width: 40px; height: 40px; }
.cnt-lista .cnt-num { font-size: 22px; }
.cnt-grupo { border-radius: 14px; border: 1px solid #C3CEDC; background: rgba(255, 255, 255, 0.6); }
.cnt-grupo > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 14px; font: 700 15px var(--sans); color: var(--marino); cursor: pointer; }
.cnt-grupo > summary::after { content: "+"; font: 400 24px/1 var(--sans); color: var(--azul); transition: transform .2s; }
.cnt-grupo[open] > summary::after { transform: rotate(45deg); }
.cnt-grupo > .cnt-lista { padding: 0 8px 10px; }
.cnt-nose { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; font-weight: 600; color: #334155; cursor: pointer; }
.cnt-nose input { width: 20px; height: 20px; accent-color: var(--azul); flex: none; }

/* Arriba de la ficha: de dónde viene, para regresar sin usar el menú. */
.migas {
  order: 0; position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  padding: 12px 20px 0; font-size: 13px; font-weight: 600; color: var(--texto-claro-2);
}
.migas a { color: var(--cyan-claro); text-decoration: none; border-bottom: 1px solid rgba(93, 213, 238, 0.4); }
.migas a:hover { color: #FFFFFF; }
.migas span[aria-hidden] { color: rgba(255, 255, 255, 0.4); }
.hero-bat.ficha .hero-bat-foto { order: 1; }
@media (min-width: 900px) {
  .hero-bat .migas { width: 100%; max-width: 1288px; margin: 0 auto; padding: 28px 24px 0; font-size: 14px; }
  .hero-bat .migas + .hero-cuerpo { padding-top: 24px; }
}

/* Debajo de las preguntas de la ficha: el enlace a su página por equipo. */
.ver-madre { margin-top: 18px; }
.ver-madre a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--azul); }
@media (min-width: 900px) { .ver-madre { margin-top: 22px; } .ver-madre a { font-size: 16px; } }
/* La tarjeta de cotizar de la ficha lleva el letrero de existencia arriba. */
.faq-cotiza .estado { margin-bottom: 6px; }
.faq-cotiza .pie-t { display: none; }
@media (min-width: 900px) {
  .faq-lista .resp { max-width: 46rem; padding: 0 0 22px; }
  .faq-lista .resp p { padding: 0 0 12px; }
  .funciona { gap: 8px 32px; }
  .funciona li { font-size: 21px; }
  .faq-cotiza .estado { margin: 0; }
  .faq-cotiza .pie-t { display: block; text-align: center; font-size: 13px; color: var(--texto-suave); }
}

/* ══ Portada (grupo 3, 21-oct) ═════════════════════════════════════════════
   Las secciones de la portada debajo del carrusel. El héroe ya vive arriba
   (.portada-hero). */

/* Listas para enviar: tarjetas que desfilan solas y se pausan con el mouse.
   Solo lo que está en stock (lo arma armar-portada.mjs desde los datos). */
.stock-portada .cabeza .bajada a { font-weight: 700; color: var(--azul); }
.cinta-st { overflow: hidden; padding: 6px 0 12px; }
.riel-st { list-style: none; margin: 0; padding: 0 0 0 20px; display: flex; gap: 14px; width: max-content; animation: desfile 60s linear infinite; }
.cinta-st:hover .riel-st, .cinta-st:focus-within .riel-st { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .riel-st { animation: none; } .cinta-st { overflow-x: auto; } }
.riel-st li { flex: none; width: 160px; }
.riel-st a {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 18px;
  background: #FFFFFF; border: 1px solid rgba(31, 58, 138, 0.15); box-shadow: 0 4px 12px rgba(15, 31, 92, 0.08);
  text-decoration: none; color: var(--marino); transition: transform .25s ease, box-shadow .25s ease;
}
.riel-st a:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(15, 31, 92, 0.16); color: var(--marino); }
.riel-st img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.st-cuerpo { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; }
.st-equipo { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--texto-suave); }
.st-nombre { font: 500 16px/1.15 var(--serif); letter-spacing: -0.3px; }
.st-ver { margin-top: auto; padding-top: 2px; font-size: 13px; font-weight: 700; color: var(--azul); }
.st-nota { margin-top: 12px; font-size: 14px; color: var(--texto-suave); }
.st-nota a { font-weight: 700; color: var(--azul); }
@media (min-width: 900px) {
  .riel-st { padding-left: max(24px, calc((100vw - 1240px) / 2)); }
  .riel-st li { width: 186px; }
  .st-cuerpo { gap: 8px; padding: 12px 14px 14px; }
  .st-equipo { font-size: 12px; }
  .st-nombre { font-size: 18px; }
  .st-ver { font-size: 14px; }
  .st-nota { margin-top: 18px; }
}

/* Donde haya un paciente: las tarjetas azules de las señales, en cuatro. */
.tipos .senal-t { font-size: 22px; }
@media (min-width: 900px) {
  .tipos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tipos .senal { min-height: 230px; }
  .tipos .senal-t { font-size: clamp(1.7rem, 2.4vw, 2.3rem); line-height: 1.02; }
}

/* Catálogo: el buscador y el mosaico de las 8 líneas. */
.buscador {
  position: relative; display: flex; align-items: center; gap: 10px; margin-top: 16px;
  height: 52px; padding: 0 16px; border-radius: 100px; background: #FFFFFF;
  border: 1px solid rgba(31, 58, 138, 0.2); box-shadow: 0 4px 12px rgba(15, 31, 92, 0.06);
}
.buscador svg { flex: none; }
.buscador input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font: 500 15px var(--sans); color: var(--texto); }
.buscador:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.18); }
.bento { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bento li.g1 { grid-column: span 2; }
/* En celular la 2 (servicio técnico) también va a lo ancho: así las otras seis
   quedan en pares y ninguna se queda sola en su renglón. */
@media (max-width: 899.98px) {
  .bento li:nth-child(2) { grid-column: span 2; }
  .bento li.g1 a, .bento li:nth-child(2) a { aspect-ratio: 16 / 11; }
}
.bento a {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 18px;
  text-decoration: none; color: #FFFFFF; background: var(--marino); box-shadow: 0 10px 28px rgba(15, 31, 92, 0.14);
}
.bento img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.bento a:hover img { transform: scale(1.06); }
.bento .sombra { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 31, 92, 0) 50%, rgba(15, 31, 92, 0.92) 100%); }
.pie-b { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.pie-b .num { font: italic 400 28px/1 var(--serif); color: var(--cyan-claro); }
.pie-b .tit { font: 500 17px/1.15 var(--serif); letter-spacing: -0.3px; }
.pie-b .revela { display: none; }
.bento .g1 .pie-b .num { font-size: 44px; }
.bento .g1 .pie-b .tit { font-size: 24px; }
.bento .g1 .pie-b .revela { display: block; font-size: 14px; line-height: 1.45; color: var(--texto-claro-1); }
.bento li.pedido { grid-column: span 2; }
.bento .pedido a {
  aspect-ratio: auto; display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 22px;
  background: var(--grad-metal); color: var(--marino); border: 1px solid rgba(31, 58, 138, 0.15); box-shadow: none;
}
.bento .pedido .num { font: italic 400 30px/1 var(--serif); color: var(--cyan-oscuro); }
.bento .pedido .tit { font: 500 22px/1.15 var(--serif); }
.bento .pedido .d { font-size: 14px; line-height: 1.5; color: var(--texto-suave); }
.bento .pedido .w { font-size: 15px; font-weight: 700; color: #15803D; }
@media (prefers-reduced-motion: reduce) { .bento img { transition: none; } }
@media (min-width: 900px) {
  .buscador { margin: 0; width: 360px; }
  .bento { margin-top: 28px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .bento li.g1 { grid-column: span 2; grid-row: span 2; }
  .bento a { border-radius: 22px; }
  .pie-b { left: 20px; right: 20px; bottom: 18px; gap: 6px; }
  .pie-b .num { font-size: 40px; }
  .pie-b .tit { font-size: 22px; }
  .bento .g1 .pie-b .num { font-size: 64px; }
  .bento .g1 .pie-b .tit { font-size: 34px; }
  .pie-b .revela { display: block; max-height: 0; opacity: 0; overflow: hidden; font-size: 14px; line-height: 1.45; color: var(--texto-claro-1); transition: max-height .4s ease, opacity .3s ease; }
  .bento a:hover .revela, .bento a:focus-visible .revela { max-height: 120px; opacity: 1; }
  .bento .g1 .pie-b .revela { max-height: none; opacity: 1; font-size: 16px; }
  .bento li.pedido { grid-column: span 4; }
  .bento .pedido a { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 26px 30px; transition: transform .25s ease; }
  .bento .pedido a:hover { transform: translateY(-4px); }
  .bento .pedido .num { font-size: 44px; }
  .bento .pedido .tit { font-size: 28px; }
  .bento .pedido .d { flex: 1 1 320px; font-size: 15px; }
}

/* Marcas: tres cifras y la lista de marcas. En celular, acordeón; en compu,
   la lista a la izquierda y la marca abierta a la derecha (una a la vez:
   <details name="marca">). */
.cifras { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cifras li { display: flex; flex-direction: column; gap: 4px; }
.cifras b { font: 500 38px/1 var(--serif); letter-spacing: -1px; color: var(--marino); }
.cifras b small { font-size: 22px; color: var(--cyan-oscuro); }
.cifras span { font-size: 12px; line-height: 1.35; color: var(--texto-suave); }
.marcas-lista { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.marca > summary, .marca-otras {
  display: grid; grid-template-columns: minmax(0, 1fr) 24px; grid-template-rows: auto auto; column-gap: 10px; row-gap: 3px;
  padding: 14px 18px; border-radius: 14px; background: #FFFFFF; border: 1px solid rgba(31, 58, 138, 0.12);
  cursor: pointer; text-decoration: none; transition: background .25s, box-shadow .25s, transform .2s;
}
.m-nombre { grid-column: 1; font: 500 22px/1.1 var(--serif); letter-spacing: -0.4px; color: var(--marino); }
.m-rel { grid-column: 1; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--texto-suave); }
.marca > summary .mas { grid-column: 2; grid-row: 1 / 3; align-self: center; font: 400 24px/1 var(--sans); color: var(--azul); transition: transform .2s; }
.marca[open] > summary .mas { transform: rotate(45deg); }
.marca.dest .m-nombre { font-style: italic; color: var(--azul); }
.marca[open] > summary { background: var(--marino); border-color: var(--marino); box-shadow: 0 8px 20px rgba(15, 31, 92, 0.25); }
.marca[open] > summary .m-nombre { color: #FFFFFF; }
.marca[open] > summary .m-rel, .marca[open] > summary .mas { color: var(--cyan-claro); }
.marca-otras .m-rel { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--azul); }
.marca-cuerpo { margin-top: 8px; padding: 22px 20px; border-radius: 18px; }
.m-rel-gran { display: flex; align-items: center; gap: 10px; font: 800 11px/1.2 var(--sans); letter-spacing: 2px; text-transform: uppercase; color: var(--cyan-claro); }
.m-rel-gran::before { content: ""; width: 24px; height: 3px; border-radius: 3px; background: var(--cyan); }
.m-gran { margin: 10px 0 12px; font: 500 40px/1 var(--serif); letter-spacing: -1.5px; color: #FFFFFF; }
.marca.dest .m-gran { font-style: italic; font-weight: 400; color: var(--cyan-claro); }
.m-desc { font-size: 15px; line-height: 1.6; color: var(--texto-claro-1); }
.m-lineas { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.m-lineas li { padding: 6px 12px; border-radius: 100px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); font-size: 13px; font-weight: 600; color: #FFFFFF; }
.m-accion { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.m-accion .btn-wa { width: 100%; }
.m-ver { font-size: 15px; font-weight: 700; color: var(--cyan-claro); }
.m-ver:hover { color: #FFFFFF; }
.m-accion > span { font-size: 13px; color: var(--texto-claro-2); }
@media (min-width: 900px) {
  .cifras { margin: 0; gap: 32px; grid-template-columns: repeat(3, auto); }
  .cifras b { font-size: 56px; }
  .cifras b small { font-size: 32px; }
  .cifras span { max-width: 10rem; font-size: 14px; }
  .marcas-lista { position: relative; display: grid; grid-template-columns: 340px minmax(0, 1fr); column-gap: 28px; row-gap: 10px; align-content: start; min-height: 520px; }
  .marca, .marca-otras { grid-column: 1; }
  .marca > summary:hover, .marca-otras:hover { transform: translateX(4px); box-shadow: 0 6px 16px rgba(15, 31, 92, 0.12); }
  .marca > summary .mas { display: none; }
  .marca-cuerpo {
    position: absolute; top: 0; right: 0; bottom: 0; left: 368px; margin: 0;
    display: flex; flex-direction: column; justify-content: center; padding: 48px 52px; border-radius: 24px;
  }
  .m-gran { font-size: clamp(2.5rem, 4.6vw, 3.75rem); letter-spacing: -2px; margin: 14px 0 18px; }
  .m-desc { max-width: 36rem; font-size: 17px; }
  .m-accion .btn-wa { width: auto; }
}

/* Ya confían en nosotros: sector público y privado. */
.sectores { display: flex; flex-direction: column; gap: 28px; }
.sector ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.sector li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.sector b { font: 500 19px/1.2 var(--serif); color: #FFFFFF; }
.sector span { font-size: 13px; color: var(--texto-claro-2); }
.sector.privado b { font-style: italic; font-weight: 400; color: var(--cyan-claro); }
@media (min-width: 900px) {
  .sectores { flex-direction: row; gap: 56px; }
  .sector.publico { flex: 1.6 1 0; }
  .sector.publico ul { columns: 2; column-gap: 40px; }
  .sector.publico li { break-inside: avoid; }
  .sector.privado { flex: 1 1 0; }
  .sector b { font-size: 22px; }
  .sector span { font-size: 14px; }
}

/* Contacto (Jorge, 21-oct): compacto, el mapa de la ficha de Google, y botones
   para abrir, copiar o mandar la dirección y el WhatsApp. */
.contacto-portada { padding: 40px 0 44px; }
.contacto-fila { display: flex; flex-direction: column; gap: 26px; }
.c-texto .titulo { font-size: 26px; }
.c-texto .bajada { margin-bottom: 4px; }
.c-texto > .btn-wa { margin-top: 18px; width: 100%; }
.c-lista { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.c-lista li { display: flex; align-items: flex-start; gap: 12px; }
.c-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--azul); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
.c-ico.wa { background: var(--wa); }
.c-ico.wa img { width: 22px; height: 22px; filter: brightness(0) invert(1); }
.c-lista li > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 15px; line-height: 1.45; color: var(--texto-claro-1); }
.c-lista b { font: 800 11px/1.2 var(--sans); letter-spacing: 1.6px; text-transform: uppercase; color: var(--cyan-claro); }
.c-lista a { color: #FFFFFF; font-weight: 600; }
.c-lista small { font-size: 13px; color: var(--texto-claro-2); }
.c-lista small a { color: var(--texto-claro-1); }
.c-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.c-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.08); color: #FFFFFF;
  font: 600 13px var(--sans); text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s;
}
.c-btn:hover { background: rgba(255, 255, 255, 0.16); border-color: var(--cyan-claro); color: #FFFFFF; }
.c-btn.hecho { border-color: var(--wa); background: rgba(37, 211, 102, 0.18); }
.c-bico { flex: none; }
.c-ubicacion { overflow: hidden; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3); background: rgba(11, 23, 71, 0.6); }
.c-mapa { position: relative; background: #1B2A5E; }
.c-mapa iframe { display: block; width: 100%; height: 220px; border: 0; }
.c-dir { padding: 16px 16px 18px; }
.c-dir-tit { font: 800 11px/1.2 var(--sans); letter-spacing: 1.6px; text-transform: uppercase; color: var(--cyan-claro); }
.c-direccion { margin-top: 4px; font: 500 18px/1.3 var(--serif); color: #FFFFFF; }
@media (min-width: 900px) {
  .contacto-portada { padding: 56px 0 60px; }
  .contacto-fila { flex-direction: row; align-items: center; gap: 56px; }
  .c-texto { flex: 1 1 0; }
  .c-texto .titulo { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
  .c-texto .bajada { max-width: 32rem; }
  .c-texto > .btn-wa { width: auto; }
  .c-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
  .c-lista li:first-child { grid-column: 1 / -1; }
  .c-ubicacion { flex: 0 1 480px; }
  .c-mapa iframe { height: 240px; }
  .c-dir { padding: 18px 20px 20px; }
}

/* ══ "¿Tienes una duda?" (todas las páginas rediseñadas, 21-oct) ═══════════
   Una pastilla arriba del botón que acompaña al bajar; abre las preguntas
   rápidas de la sección que se está viendo (componentes.js, sección 11). */
.duda-btn {
  position: absolute; right: 14px; bottom: calc(100% + 8px);
  height: 36px; padding: 0 14px; border-radius: 100px; border: 1px solid rgba(31, 58, 138, 0.18);
  background: #FFFFFF; color: var(--marino); font: 700 13px var(--sans); cursor: pointer;
  box-shadow: 0 6px 18px rgba(15, 31, 92, 0.18);
}
.duda-btn[aria-expanded="true"] { background: var(--marino); color: #FFFFFF; border-color: var(--marino); }
.duda-panel {
  position: absolute; left: 10px; right: 10px; bottom: calc(100% + 52px);
  max-height: min(70vh, 520px); overflow-y: auto; border-radius: 20px; background: #FFFFFF;
  box-shadow: 0 24px 60px rgba(15, 31, 92, 0.35); border: 1px solid rgba(31, 58, 138, 0.12);
}
.duda-panel[hidden] { display: none; }
.duda-cab { position: sticky; top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; background: var(--grad-azul); color: #FFFFFF; }
.duda-cab p { display: flex; flex-direction: column; gap: 2px; }
.duda-cab b { font: 500 20px/1.15 var(--serif); }
.duda-cab span { font-size: 13px; color: var(--texto-claro-2); }
.duda-cerrar { flex: none; width: 36px; height: 36px; border: 0; border-radius: 100px; background: rgba(255, 255, 255, 0.12); color: #FFFFFF; font-size: 22px; cursor: pointer; }
.duda-lista { list-style: none; margin: 0; padding: 4px 18px 0; }
.duda-lista li { border-bottom: 1px solid var(--borde-fino); }
.duda-lista summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 50px; font-size: 15px; font-weight: 600; color: var(--marino); cursor: pointer; }
.duda-lista summary span { flex: none; font-size: 20px; color: var(--azul); transition: transform .2s; }
.duda-lista details[open] summary span { transform: rotate(45deg); }
.duda-lista p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--texto-suave); }
.duda-lista a { display: inline-block; margin: 0 0 12px; font-size: 13px; font-weight: 700; color: #15803D; }
.duda-todas { display: block; padding: 12px 18px 0; font-size: 14px; font-weight: 700; color: var(--azul); }
.duda-todas[hidden] { display: none; }
.boton-fijo .duda-wa { display: flex; width: auto; height: 48px; margin: 12px 18px 18px; font-size: 15px; box-shadow: none; }
.boton-fijo .duda-wa::before { display: none; }
@media (min-width: 900px) {
  .duda-btn { right: 0; bottom: calc(100% + 10px); height: 40px; font-size: 14px; }
  .duda-panel { left: auto; right: 0; width: 380px; bottom: calc(100% + 60px); }
}

/* Las razones arriba del botón de enviar del formulario (componentes.js). */
.form-confianza {
  list-style: none; margin: -4px 0 -6px; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px;
}
.form-confianza li {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 13px/1.2 var(--sans); color: var(--marino);
}
.form-confianza li::before {
  content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--cyan-icono) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 11px no-repeat;
}
/* "Es para mi casa": la casilla va a lo ancho, arriba del nombre de la clínica. */
.rejilla > .es-particular { grid-column: 1 / -1; min-height: 40px; }
.campo-claro[hidden] { display: none; }
/* Cuando un título de campo ocupa dos renglones, el cuadro de al lado no se
   desfasa: los campos se alinean por abajo. */
@media (min-width: 900px) { .rejilla > .campo-claro { justify-content: flex-end; } }