/* ==========================================================================
   telemed.css · Tarjetas de ÁREAS de telemedicina (telemedicina.html · sección
   #equipo-online). Cargado vía pageCss (base.njk); refinamiento.css va al final.

   Solo navy (--primary) + teal (--accent), vía tokens theme-aware del sitio.
   iOS-safe: sin backdrop-filter / blur / WebGL / will-change; solo box-shadow,
   bordes hairline, gradiente-tint plano en el ícono, transform/opacity.

   Responsive (mobile-first): 1 col → 2 col ≥640px → 3 col ≥1000px, con
   minmax(0,1fr) (no desborda a 320px). Botón .btn ya trae min-height:44px.
   Clases propias de esta sección (tele-area*), no filtran a otras páginas.
   ========================================================================== */

.tele-areas {
  list-style: none;
  margin: clamp(20px, 3vw, 32px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;                 /* móvil: 1 columna */
  gap: clamp(16px, 2.5vw, 24px);
}
@media (min-width: 640px) {
  .tele-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .tele-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tele-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(20px, 2.5vw, 28px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.tele-area__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-pill);
  background: rgba(0, 193, 188, 0.12);        /* tint teal plano (no blur) */
  color: var(--accent-ink);
}

.tele-area__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.2;
  font-size: clamp(1.15rem, 2.4vw, 1.35rem);
  color: var(--navy);
}

.tele-area__line {
  margin: 0;
  flex: 1 0 auto;                             /* empuja el botón abajo → alturas parejas */
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--soft);
}

/* Dos acciones APILADAS a ancho completo (Agendar arriba · Ver más abajo).
   margin-top:auto las pega al fondo de la tarjeta → alturas parejas aunque las
   líneas varíen. btn--block (width:100%) + este refuerzo garantizan 320px sin
   desborde y tap ≥44px. Apiladas por defecto = lo más robusto en móvil; iOS-safe. */
.tele-area__actions {
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tele-area__cta,
.tele-area__more-link {
  width: 100%;
}

/* Jerarquía Agendar > Ver más: el sistema global (refinamiento.css) unifica TODOS
   los botones a la píldora navy rellena. Aquí diferenciamos "Ver más" como acción
   SECUNDARIA con outline navy real (Agendar queda como primario relleno). Doble
   clase (.tele-area__more-link.btn--ghost) para ganar especificidad al override
   global. Color/borde con --navy (theme-aware, AA en claro y oscuro). iOS-safe. */
.tele-area__more-link.btn--ghost {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
  box-shadow: none;
}
.tele-area__more-link.btn--ghost:hover,
.tele-area__more-link.btn--ghost:focus-visible {
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-color: var(--btn-bg);
}

/* ==========================================================================
   tmh-hero · HERO de telemedicina (banda navy + foto de fondo).
   Reemplaza el cine-hero (WebGL + bgword). Estilado SOLO aquí (no toca
   cinematic.css ni refinamiento.css). iOS-safe: gradientes CSS puros, sin
   blur/WebGL/will-change. Paleta: navy (#001238) + teal (--accent) + blanco.

   · Móvil (<900px): foto en banda ARRIBA (cover) fundida hacia abajo al navy;
     texto ABAJO sobre navy sólido (nunca se pisan).
   · Desktop (≥900px): foto en la MITAD DERECHA fundida con gradiente 90deg;
     texto en la izquierda sobre navy limpio (contraste AA holgado).
   ========================================================================== */
.tmh-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;               /* red de seguridad anti-scroll horizontal */
  /* !important: el sitio hace `section { background: transparent !important }`
     (para que las secciones muestren el aurora del body). Sin esto, el hero
     quedaría transparente y se colaría el fondo claro del body → texto blanco
     ilegible. La clase (.tmh-hero 0,1,0) le gana a `section` (0,0,1). */
  background: #001238 !important; /* navy base */
  color: #fff;
  /* Destino del fundido inferior (.cine-fade, refinamiento.css): el borde del
     hero se derrite hacia el fondo de la sección de abajo (#equipo-online
     .section--soft), cuyo fondo sólido = base del .cef-bg = var(--s-light-bg)
     (#f5f7fa claro / #071529 oscuro). Theme-aware, sin costura, ambos temas. */
  --fade-to: var(--s-light-bg);
  /* Altura del fundido, MEDIDA para que su borde superior quede claramente
     debajo de las meta-pills (que viven en __inner). El gap navy bajo la meta
     baja hasta ~102px en desktop ancho+bajo (1600×800 / 1920×1080); con tope
     80px el fundido las deja intactas (≥~20px de margen) y sigue liso en móvil. */
  --fade-h: clamp(48px, 5vw, 80px);
}

/* Foto de fondo. Móvil: banda superior; se recorta con cover, nunca deforma. */
.tmh-hero__media {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 56svh;
  height: 56vh;                   /* fallback si no hay svh */
  z-index: 0;
}
.tmh-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;             /* llena la caja recortando (CLS 0 con w/h) */
  object-position: 50% 30%;      /* móvil: encuadra la cara arriba */
}

/* Scrim que funde la foto al navy. Móvil = vertical (foto→navy hacia abajo). */
.tmh-hero__scrim {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 56svh;
  height: 56vh;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 18, 56, 0) 38%,
    rgba(0, 18, 56, 0.55) 72%,
    #001238 96%
  );
}

/* Texto: sobre navy limpio, por encima de foto+scrim. */
.tmh-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* Móvil: empuja el texto DEBAJO de la banda de foto (navy sólido). */
  padding-top: 52svh;
  padding-bottom: clamp(44px, 8vh, 72px);
}

.tmh-hero__crumb {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 14px;
}
.tmh-hero__crumb a { color: var(--accent); }
.tmh-hero__crumb span { opacity: 0.5; }

.tmh-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: clamp(16px, 2.5vw, 22px);
}
.tmh-hero__eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}

.tmh-hero__title {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 clamp(14px, 2vw, 20px);
  text-wrap: balance;
}
.tmh-hero__title-row { display: block; }
.tmh-hero__title-row--small {
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  color: rgba(255, 255, 255, 0.9);
}
.tmh-hero__title-row--big {
  font-size: clamp(2.6rem, 8vw, 5rem);
}
.tmh-hero__title em {
  font-style: italic;
  color: var(--accent);           /* "clic" en teal */
}

.tmh-hero__sub {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 46ch;
  margin: 0;
}

.tmh-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(24px, 3vw, 32px);
}

/* Botones sobre navy (override scoped; NO toca refinamiento.css global).
   Doble especificidad (.tmh-hero .btn.tmh-hero__cta) para ganarle al override
   global que unifica todo a la píldora navy. Solo teal / blanco / navy. */
.tmh-hero .btn.tmh-hero__cta {
  background: var(--accent);      /* teal #00c1bc */
  color: #001238;                 /* texto navy → alto contraste sobre teal */
  border-color: var(--accent);
  box-shadow: 0 12px 30px -12px rgba(0, 193, 188, 0.55);
}
.tmh-hero .btn.tmh-hero__cta:hover,
.tmh-hero .btn.tmh-hero__cta:focus-visible {
  background: #14d3ce;
  color: #001238;
  border-color: #14d3ce;
}
.tmh-hero .btn.tmh-hero__how {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  box-shadow: none;
}
.tmh-hero .btn.tmh-hero__how:hover,
.tmh-hero .btn.tmh-hero__how:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: #fff;
}

.tmh-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 40px);
  margin-top: clamp(24px, 3vw, 34px);
}
.tmh-hero__meta strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: #fff;
}
.tmh-hero__meta span {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Botones full-width en móviles chicos (tap cómodo ≥44px). */
@media (max-width: 560px) {
  .tmh-hero__ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .tmh-hero__ctas .btn { width: 100%; }
}

/* ── Desktop: foto a la DERECHA, texto a la izquierda sobre navy ───────── */
@media (min-width: 900px) {
  .tmh-hero {
    display: flex;
    align-items: center;
    min-height: 88svh;
    min-height: 88vh;
  }
  .tmh-hero__media {
    top: 0; bottom: 0;
    left: auto; right: 0;
    width: 52%;
    height: auto;
  }
  .tmh-hero__media img {
    object-position: 35% 50%;     /* desktop: corre el encuadre para dejar la cara en zona clara */
  }
  .tmh-hero__scrim {
    top: 0; bottom: 0;
    left: 0; right: 0;
    width: 100%;
    height: auto;
    /* Navy sólido a la izquierda → transparente a la derecha (revela la foto). */
    background: linear-gradient(
      90deg,
      #001238 0%,
      #001238 44%,
      rgba(0, 18, 56, 0.55) 54%,
      rgba(0, 18, 56, 0) 70%
    );
  }
  .tmh-hero__inner {
    padding-top: clamp(48px, 8vh, 88px);
    padding-bottom: clamp(48px, 8vh, 88px);
    padding-right: 52%;            /* reserva la mitad derecha para la foto */
  }
}

/* ==========================================================================
   tmh-showcase · Franja "Así se ve una consulta online" (3 fotos reales con
   logo CEF). Entre #como (02) y #beneficios (03). SIN número (como el
   marquee/pull-quote → 01–04 intactos).

   ESTÁTICA A PROPÓSITO — NO usa data-cine-reveal. El sistema deja
   [data-cine-reveal]{opacity:0} SIN gate de JS (cinematic.css:300) → sin JS
   quedaría invisible. Esta franja arranca visible y se lee completa aunque
   cinematic.js nunca corra (degradación garantizada).

   Fondo claro EXPLÍCITO en AMBOS temas → uso colores FIJOS (--primary/--accent
   son tokens de marca no theme-aware; grises/bordes como rgba navy fijos). Así
   el texto no se invierte en dark theme sobre un fondo que siempre es claro.
   iOS-safe: solo gradiente/box-shadow/bordes hairline/transform; sin
   backdrop-filter/blur/WebGL/will-change. object-fit:cover, sin deformar.
   ========================================================================== */
.tmh-showcase {
  background: linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%);
  padding-block: clamp(48px, 7vw, 88px);
}
.tmh-showcase__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.tmh-showcase__head {
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.tmh-showcase__eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);          /* navy fijo #001854 → AA sobre claro */
  margin-bottom: 10px;
}
.tmh-showcase__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  color: var(--primary);          /* navy fijo */
  text-wrap: balance;
}
.tmh-showcase__title em {
  font-style: italic;
  color: var(--accent);           /* teal fijo #00c1bc (énfasis grande, decorativo) */
}

/* Tríptico: 1 col móvil → 3 col ≥720px. minmax(0,1fr) evita desborde a 320px. */
.tmh-showcase__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.5vw, 28px);
}
@media (min-width: 720px) {
  .tmh-showcase__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tmh-showcase__card {
  background: #fff;
  border: 1px solid rgba(0, 24, 84, 0.08);   /* hairline navy fijo */
  border-radius: var(--r-lg, 18px);
  overflow: hidden;                           /* recorta la foto a las esquinas */
  box-shadow: 0 12px 32px -18px rgba(0, 24, 84, 0.35);
  transition: transform var(--dur-hover, 0.28s) var(--ease, ease),
              box-shadow var(--dur-hover, 0.28s) var(--ease, ease);
}
/* Sutil elevación al hover — solo enhancement, no afecta legibilidad ni layout. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tmh-showcase__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -18px rgba(0, 24, 84, 0.42);
  }
}

.tmh-showcase__media {
  aspect-ratio: 16 / 9;                       /* = fuente 1600×900 → sin deformar */
  background: rgba(0, 24, 84, 0.06);          /* placeholder mientras carga (lazy) */
}
.tmh-showcase__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.tmh-showcase__caption {
  padding: clamp(12px, 1.6vw, 16px) clamp(14px, 1.8vw, 18px);
}
.tmh-showcase__caption strong {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.2;
  color: var(--primary);          /* navy fijo */
}
.tmh-showcase__caption span {
  display: block;
  margin-top: 2px;
  font-size: 0.9rem;
  color: rgba(0, 24, 84, 0.62);   /* navy 62% → gris legible AA sobre blanco */
}