/* ============================================================
   CEF CHILE · CINEMATIC HOMEPAGE
   Inspirado en rockstargames.com/VI · tono: serio, comprometido,
   transmisor de confianza. Reutiliza variables CSS de styles.css.
   Prefijo: .cine-*
   ============================================================ */

/* ============================================================
   0. SCROLL PROGRESS BAR
   ============================================================ */
.cine__progress {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  z-index: 9998;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(0, 193, 188, 0.25);
  will-change: width;
  transition: width 0.08s linear;
}

/* ============================================================
   1. HERO CINEMATIC · pantalla completa, tipografía gigante
   ============================================================ */
.cine-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  background: var(--bg-deep);
  isolation: isolate;
}

.cine-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  opacity: 0.6;
}
.cine-hero__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.10;
}
.cine-hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
  z-index: 2;
}
.cine-hero__grid {
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse at center, black 25%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 80%);
  pointer-events: none;
}

.cine-hero__layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
}
.cine-hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: var(--glow-op);
  mix-blend-mode: normal;
}
.cine-hero__glow--1 {
  width: 520px; height: 520px;
  top: -100px; right: -120px;
  background: radial-gradient(circle, var(--accent), transparent 70%);
}
.cine-hero__glow--2 {
  width: 620px; height: 620px;
  bottom: -180px; left: -160px;
  background: radial-gradient(circle, var(--primary), transparent 70%);
}

/* Palabra gigante de fondo */
.cine-hero__bgword {
  position: absolute;
  left: 50%;
  bottom: -6vw;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(10rem, 24vw, 25rem);
  letter-spacing: -0.06em;
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1px var(--stroke-faint);
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

/* Inner del hero */
.cine-hero__inner {
  position: relative;
  z-index: 5;
  margin: 0 auto;
  padding: clamp(100px, 14vh, 160px) clamp(24px, 5vw, 80px) 80px;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(40px, 8vh, 80px);
  will-change: transform;
}

/* Top row: tag + side info */
.cine-hero__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
}
.cine-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--light);
  background: var(--surface-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cine-hero__tag .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: cineDot 2s ease-in-out infinite;
}
@keyframes cineDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.3); }
}

.cine-hero__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.cine-hero__side-time {
  color: var(--accent-ink);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
}

/* TÍTULO GIGANTE */
.cine-hero__title {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--light);
  margin: 0;
  display: block;
}
.cine-hero__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2em;
  overflow: visible;
}
.cine-hero__title-row--small {
  font-size: clamp(2.5rem, 5.5vw, 5.625rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.02em;
}
.cine-hero__title-row--big {
  font-size: clamp(5rem, 14vw, 13.75rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  margin: 0.02em 0;
}
.cine-hero__title em {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 60%, var(--primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cine-word {
  display: inline-block;
  overflow: hidden;
  padding: 0.05em 0;
  /* CLS: el padding + overflow:hidden inflaban la altura de línea al partir el
     título en runtime (texto plano -> inline-blocks), moviendo todo el hero.
     El margen negativo compensa el padding en el cálculo del line-box y
     vertical-align:top evita que overflow:hidden use el borde inferior como
     baseline. Resultado: el split ocupa el MISMO alto que el texto plano. */
  margin: -0.05em 0;
  vertical-align: top;
}
.cine-word > span {
  display: inline-block;
  /* VISIBLE por defecto → el H1 del hero pinta de inmediato (pasa a ser el LCP)
     y es robusto aunque el JS no corra o tarde. Antes arrancaba en
     translateY(110%)+opacity:0 hasta `.cine-hero.is-ready` (tras el preloader),
     lo que retrasaba el LCP del heading. La entrada palabra-por-palabra queda
     descartada a propósito (decisión: heading visible al instante). */
  transform: translateY(0);
  opacity: 1;
}
/* Stagger - cada palabra entra secuencialmente */
.cine-hero.is-ready .cine-hero__title-row:nth-child(1) .cine-word:nth-child(1) > span { transition-delay: 0.05s; }
.cine-hero.is-ready .cine-hero__title-row:nth-child(1) .cine-word:nth-child(2) > span { transition-delay: 0.14s; }
.cine-hero.is-ready .cine-hero__title-row:nth-child(1) .cine-word:nth-child(3) > span { transition-delay: 0.23s; }
.cine-hero.is-ready .cine-hero__title-row:nth-child(2) .cine-word:nth-child(1) > span { transition-delay: 0.38s; }
.cine-hero.is-ready .cine-hero__title-row:nth-child(3) .cine-word:nth-child(1) > span { transition-delay: 0.66s; }
.cine-hero.is-ready .cine-hero__title-row:nth-child(3) .cine-word:nth-child(2) > span { transition-delay: 0.74s; }

/* Bottom del hero */
.cine-hero__bottom {
  display: flex;
  flex-direction: column;
  gap: 36px;
  max-width: 100%;
}
.cine-hero__sub {
  max-width: 560px;
  font-size: clamp(0.9375rem, 1.3vw, 1.125rem);
  color: var(--light);
  line-height: 1.6;
  font-weight: 400;
}
.cine-hero__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.cine-hero__meta {
  display: flex;
  gap: clamp(32px, 5vw, 60px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.cine-hero__meta > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cine-hero__meta strong {
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 700;
  color: var(--light);
  letter-spacing: -0.02em;
  line-height: 1;
}
.cine-hero__meta span {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Reveal helpers consistentes con el sistema */
[data-cine-reveal] {
  opacity: 0;
  transform: translateY(24px);
  /* opacidad más rápida que el transform → reveal más nítido (igual que el word-reveal) */
  transition: opacity 0.6s var(--ease-out), transform 0.9s var(--ease-out);
  will-change: opacity, transform;
}
[data-cine-reveal].is-visible,
.cine-hero.is-ready [data-cine-reveal] {
  opacity: 1;
  transform: translateY(0);
}
.cine-hero.is-ready .cine-hero__tag   { transition-delay: 0.15s; }
.cine-hero.is-ready .cine-hero__sub   { transition-delay: 1.05s; }
.cine-hero.is-ready .cine-hero__ctas  { transition-delay: 1.18s; }
.cine-hero.is-ready .cine-hero__meta  { transition-delay: 1.32s; }

/* Scroll indicator */
.cine-hero__scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}
.cine-hero__scroll-line {
  width: 1px;
  height: 50px;
  background: var(--line-strong);
  position: relative;
  overflow: hidden;
}
.cine-hero__scroll-line div {
  position: absolute;
  top: -50px;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, transparent, var(--accent));
  animation: cineScroll 2.2s ease-in-out infinite;
}
@keyframes cineScroll {
  0%   { top: -50px; }
  100% { top: 100px; }
}

/* ============================================================
   2. MARQUEE de disciplinas (más sutil que el original)
   ============================================================ */
.cine-marquee {
  background: var(--bg-mid);
  padding: 20px 0;
  overflow: hidden;
  white-space: nowrap;
}
.cine-marquee__track {
  display: inline-flex;
  gap: 32px;
  animation: cineMarquee 60s linear infinite;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--light);
  white-space: nowrap;
}
.cine-marquee__track span {
  display: inline-block;
}
.cine-marquee__track span:nth-child(even) {
  /* azul de marca: en texto pequeño sobre claro cumple contraste AA (el turquesa no) */
  color: var(--primary);
  opacity: 0.9;
}
@keyframes cineMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   3. MANIFIESTO
   ============================================================ */
.cine-manifesto {
  position: relative;
  padding: clamp(120px, 18vh, 200px) clamp(24px, 5vw, 80px);
  background:
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-mid) 100%);
  overflow: hidden;
  isolation: isolate;
}
.cine-manifesto::before { content: none; }

.cine-manifesto__bgnum {
  position: absolute;
  top: 8%;
  right: 4vw;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(11.25rem, 22vw, 22.5rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--stroke-faint);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.cine-manifesto__inner {
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.cine-manifesto__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.25rem, 5.8vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--light);
  margin: 36px 0 80px;
  max-width: 20ch;
}
.cine-manifesto__title em {
  font-style: italic;
  color: var(--accent-ink);
  font-weight: 500;
}
.cine-manifesto__title .accent-cyan {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Líneas reveladas */
.cine-line {
  display: block;
  overflow: hidden;
}
.cine-line > * {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 1s var(--ease-out), opacity 0.7s ease-out;
}
.cine-line.is-visible > * {
  transform: translateY(0);
  opacity: 1;
}
[data-cine-lines] .cine-line.is-visible:nth-child(1) > * { transition-delay: 0.05s; }
[data-cine-lines] .cine-line.is-visible:nth-child(2) > * { transition-delay: 0.18s; }
[data-cine-lines] .cine-line.is-visible:nth-child(3) > * { transition-delay: 0.31s; }
[data-cine-lines] .cine-line.is-visible:nth-child(4) > * { transition-delay: 0.44s; }

.cine-manifesto__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cine-pillar {
  padding: 36px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: border-color 0.4s, transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.cine-pillar::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
/* Realce solo en dispositivos con puntero (en táctil no queda "pegado") */
@media (hover: hover) {
  .cine-pillar:hover {
    border-color: var(--accent-ink);
    transform: translateY(-6px);
    box-shadow: var(--shadow-2);
  }
  .cine-pillar:hover::before {
    transform: scaleX(1);
  }
}
.cine-pillar__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
  color: var(--accent-ink);
}
.cine-pillar__icon svg {
  width: 100%;
  height: 100%;
}
.cine-pillar h3 {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--light);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.cine-pillar p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.65;
}

/* ============================================================
   4. ÁREAS · "character intro" pinned
   ============================================================ */
.cine-area {
  position: relative;
  background: var(--bg-deep);
  overflow: hidden;
  isolation: isolate;
}
.cine-area--salud::before { content: none; }
.cine-area--mov::before { content: none; }

.cine-area__bgnum {
  position: absolute;
  top: 50%;
  right: -2vw;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(11.25rem, 22vw, 21.25rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--stroke-faint);
  letter-spacing: -0.04em;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.cine-area--alt .cine-area__bgnum {
  right: auto;
  left: -2vw;
  transform: translateY(-50%) rotate(-90deg);
}

.cine-area__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1480px;
  margin: 0 auto;
  align-items: stretch;
  min-height: 100vh;
  min-height: 100svh;
}
.cine-area--alt .cine-area__layout {
  direction: rtl;
}
.cine-area--alt .cine-area__media-col,
.cine-area--alt .cine-area__content-col {
  direction: ltr;
}

/* MEDIA COL — se pinea */
.cine-area__media-col {
  position: relative;
  padding: 100px clamp(20px, 4vw, 60px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cine-area__media {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 5/7;
  position: relative;
  will-change: transform;
}
.cine-area__media-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--r-xs);
  overflow: hidden;
  box-shadow:
    0 30px 70px -28px rgba(26, 31, 46, 0.22),
    0 0 0 1px var(--line);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.cine-area__media-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 65%, rgba(26, 31, 46, 0.06) 100%);
  pointer-events: none;
}
.cine-area__svg {
  width: 100%;
  height: 100%;
  display: block;
}
.cine-area__media-tag {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 3;
  padding: 8px 14px 8px 12px;
  background: var(--surface-pill);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--light);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cine-area__media-tag .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* CONTENT COL */
.cine-area__content-col {
  position: relative;
  padding: clamp(100px, 14vh, 160px) clamp(24px, 5vw, 80px);
  display: flex;
  align-items: center;
}
.cine-area__content {
  max-width: 560px;
}
.cine-area__pre {
  display: inline-block;
  font-size: var(--eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 24px;
}
.cine-area__pre--mov {
  color: var(--accent-ink);
}
.cine-area__name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(3rem, 6.5vw, 5.75rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--light);
  margin: 0 0 16px;
}
.cine-area__name .cine-word { padding: 0.04em 0; }
.cine-area__name .cine-word > span {
  transform: translateY(110%);
  transition: transform 0.95s var(--ease-out);
}
.cine-area__name.is-visible .cine-word > span {
  transform: translateY(0);
}
.cine-area__name.is-visible .cine-word:nth-child(2) > span { transition-delay: 0.12s; }

.cine-area__tagline {
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  font-weight: 500;
  font-style: italic;
  color: var(--light);
  margin-bottom: 36px;
}

.cine-area__quote {
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--light);
  margin: 0 0 36px;
  padding: 20px 0 20px 24px;
  border-left: 2px solid var(--accent);
}
.cine-area__quote--mov {
  border-left-color: var(--accent-ink);
}
.cine-area__quote em {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}
.cine-area__quote--mov em {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cine-quote-mark {
  font-family: var(--font-serif);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 1.1em;
  vertical-align: -0.05em;
  opacity: 0.7;
}
.cine-area__quote--mov .cine-quote-mark { color: var(--accent-ink); }

.cine-area__body {
  color: var(--light);
  font-size: 15.5px;
  line-height: 1.7;
  margin-bottom: 32px;
}
.cine-area__body p + p { margin-top: 14px; }
.cine-area__body strong { color: var(--light); font-weight: 600; }

.cine-area__disciplines {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 36px;
}
.cine-area__disciplines span {
  display: inline-block;
  padding: 7px 14px;
  background: rgba(26, 31, 46, 0.05);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--light);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  transition: all 0.3s var(--ease);
}
.cine-area--salud .cine-area__disciplines span:hover {
  border-color: var(--accent-ink);
  background: rgba(0, 193, 188, 0.1);
  color: var(--accent-ink);
}
.cine-area--mov .cine-area__disciplines span:hover {
  border-color: var(--accent-ink);
  background: rgba(0, 193, 188, 0.1);
  color: var(--accent-2);
}

.cine-area__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============================================================
   5. TELEMEDICINA · destination reveal
   ============================================================ */
.cine-telemed {
  position: relative;
  padding: clamp(120px, 18vh, 200px) clamp(24px, 5vw, 80px);
  background:
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-soft) 100%);
  overflow: hidden;
  isolation: isolate;
}

.cine-telemed__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.cine-telemed__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: var(--glow-op);
  mix-blend-mode: normal;
  display: none;
}
.cine-telemed__orb--1 {
  width: 500px; height: 500px;
  top: 10%; left: -10%;
  background: radial-gradient(circle, var(--accent), transparent 70%);
}
.cine-telemed__orb--2 {
  width: 600px; height: 600px;
  bottom: 5%; right: -10%;
  background: radial-gradient(circle, var(--primary), transparent 70%);
}
.cine-telemed__orb--3 {
  width: 400px; height: 400px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 193, 188, 0.3), transparent 70%);
  opacity: 0;
}
.cine-telemed__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
}

.cine-telemed__bgword {
  position: absolute;
  top: 50%;
  right: -2vw;
  transform: translateY(-50%);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(8.75rem, 18vw, 17.5rem);
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1px transparent;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  will-change: transform;
}

.cine-telemed__inner {
  position: relative;
  z-index: 1;
  margin: 0 auto;
}

.cine-telemed__intro {
  text-align: center;
  margin-bottom: 80px;
}
.cine-telemed__intro .section-head {
  justify-content: center;
}
.cine-telemed__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 7.5rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--light);
  margin: 32px 0 28px;
}
.cine-telemed__title em,
.cine-telemed__title .accent-cyan {
  font-style: italic;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 60%, var(--primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
}
.cine-telemed__lead {
  max-width: 720px;
  margin: 0 auto;
  font-size: clamp(0.9375rem, 1.3vw, 1.125rem);
  color: var(--light);
  line-height: 1.65;
}
.cine-telemed__lead strong {
  color: var(--light);
  font-weight: 600;
}

.cine-telemed__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}

/* Gancho: bloque NAVY sólido con ícono de video grande (teal) + copy. Orbe teal
   sutil de fondo. Solo navy + teal (tokens). Va arriba de la grilla de features.
   Texto claro fijo porque el navy es oscuro en cualquier tema. */
.cine-telemed__hook {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  margin-bottom: 20px;
  background: var(--navy);
  border: 1px solid color-mix(in srgb, var(--teal) 30%, transparent);
  border-radius: var(--r-md);
}
.cine-telemed__hook::before {
  content: "";
  position: absolute;
  right: -32px;
  top: -32px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--teal) 38%, transparent), transparent 70%);
  pointer-events: none;
}
.cine-telemed__hook-icon {
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--teal) 16%, transparent);
  color: var(--teal);
}
.cine-telemed__hook-title {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 700;
  color: #fff;
}
.cine-telemed__hook-sub {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.45;
  color: color-mix(in srgb, #fff 72%, transparent);
}

/* Features — estilo BASE (lista editorial numerada). Lo usa /telemed (#beneficios,
   6 features 01-06). NO se toca: el rediseño de cards vive scopeado a #telemed (home). */
.cine-telemed__features ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 36px;
}
.cine-telemed__features li {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.4s var(--ease);
}
.cine-telemed__features li:hover {
  padding-left: 12px;
}
.cine-telemed__feature-num {
  flex-shrink: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 13px;
  color: var(--accent-ink);
  letter-spacing: 0.15em;
  padding-top: 4px;
  min-width: 32px;
}
.cine-telemed__features li > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cine-telemed__features li strong {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--light);
  letter-spacing: -0.01em;
}
.cine-telemed__features li span {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

/* HOME (#telemed) → grilla 2×2 de cards con ícono teal. Scopeado a #telemed para NO
   afectar /telemed (#beneficios), que conserva la lista de arriba. Se mantiene el
   <ul>/<li> para el stagger de cinematic.js. Cards sobre surface theme-aware. */
#telemed .cine-telemed__features ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 32px;
}
#telemed .cine-telemed__features li {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 18px 16px;
  background: color-mix(in srgb, var(--surface) 66%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
#telemed .cine-telemed__features li:hover {
  padding-left: 16px;
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--teal) 40%, var(--line));
}
#telemed .cine-telemed__feature-icon {
  display: inline-flex;
  color: var(--accent-ink);
}
#telemed .cine-telemed__features li > div {
  gap: 3px;
}
#telemed .cine-telemed__features li strong {
  font-size: 16px;
}
#telemed .cine-telemed__features li span {
  font-size: 13px;
  line-height: 1.45;
}
.cine-telemed__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cine-telemed__device-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cine-telemed__pings {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.cine-telemed__pings .ping {
  position: absolute;
  top: 50%; left: 50%;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  transform: translate(-50%, -50%);
  animation: cinePing 3s ease-out infinite;
  opacity: 0;
}
.cine-telemed__pings .ping--2 { animation-delay: 1s; }
.cine-telemed__pings .ping--3 { animation-delay: 2s; }
@keyframes cinePing {
  0% { width: 30px; height: 30px; opacity: 1; }
  100% { width: 480px; height: 480px; opacity: 0; }
}

/* Móvil: el mockup del teléfono es ILUSTRATIVO (decoración CSS, sin datos) y mide
   ~600-640px de alto (aspect 9/16). Se oculta en ≤768px para acortar la sección;
   quedan los 5 features + CTAs (el contenido real). El grid .cine-telemed__layout
   ya apila a 1 col en ≤1024px → al sacar la 2ª celda NO queda gap (gap sólo entre
   ítems; con un solo ítem no se renderiza). Los .cine-telemed__pings van dentro del
   device-wrap → se ocultan con él. Desktop (>768px) intacto. */
@media (max-width: 768px) {
  .cine-telemed__device-wrap { display: none; }
}

/* ============================================================
   6. MÉTODO
   ============================================================ */
.cine-method {
  position: relative;
  padding: clamp(120px, 18vh, 200px) clamp(24px, 5vw, 80px);
  background: var(--bg-deep);
  overflow: hidden;
}
.cine-method__inner {
  margin: 0 auto;
}
.cine-method__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.25rem, 5.5vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--light);
  margin: 32px 0 80px;
  max-width: 18ch;
}
.cine-method__title em {
  font-style: italic;
  color: var(--accent-ink);
  font-weight: 500;
}

/* ============================================================
   7. STATS cinematográficas
   ============================================================ */
.cine-stats {
  position: relative;
  padding: clamp(100px, 14vh, 160px) clamp(24px, 5vw, 80px);
  background: var(--bg-deep);
  overflow: hidden;
}
.cine-stats__inner {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.cine-stats__pre {
  display: inline-block;
  font-size: var(--eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 16px;
}
.cine-stats__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.5rem, 5.5vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--light);
}
.cine-stats__title em {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* STATS · el render de las cifras se MOVIÓ a refinamiento.css (FASE 2.4):
   .cine-figures + .cine-stat (cifras gigantes tipográficas, divididas por hairline
   vertical, sin caja). Se RETIRÓ aquí el render viejo (.cine-stats__grid /
   .cine-stat / .cine-stat__num / .cine-stat__label) y sus reglas responsive. */

/* ============================================================
   8. EQUIPO
   ============================================================ */
.cine-team {
  padding: clamp(120px, 18vh, 200px) clamp(24px, 5vw, 80px);
  background: var(--bg-deep);
  position: relative;
}
.cine-team__inner {
  margin: 0 auto;
}
.cine-team__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.25rem, 5.5vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--light);
  margin: 32px 0 24px;
}
.cine-team__title em {
  font-style: italic;
  color: var(--accent-ink);
  font-weight: 500;
}
.cine-team__lead {
  max-width: 600px;
  color: var(--light);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 64px;
}
.cine-team__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   9. QUOTES / TESTIMONIOS
   ============================================================ */
.cine-quotes {
  padding: clamp(100px, 14vh, 160px) clamp(24px, 5vw, 80px);
  background: var(--bg-deep);
  position: relative;
  overflow: hidden;
}
.cine-quotes__inner {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.cine-quotes__mark {
  font-family: var(--font-serif);
  font-size: clamp(7.5rem, 16vw, 13.75rem);
  font-weight: 700;
  color: var(--accent-ink);
  opacity: 0.18;
  line-height: 0.6;
  margin-bottom: 12px;
  display: block;
}

/* ============================================================
   10. CTA FINAL cinematográfico
   ============================================================ */
.cine-cta {
  position: relative;
  padding: clamp(120px, 18vh, 200px) clamp(24px, 5vw, 80px);
  background: var(--bg-deep);
  overflow: hidden;
  isolation: isolate;
}
.cine-cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.cine-cta__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: var(--glow-op);
  mix-blend-mode: normal;
}
.cine-cta__glow--1 {
  width: 600px; height: 600px;
  top: 10%; left: -10%;
  background: radial-gradient(circle, var(--accent), transparent 70%);
}
.cine-cta__glow--2 {
  width: 500px; height: 500px;
  bottom: 0; right: -5%;
  background: radial-gradient(circle, var(--primary), transparent 70%);
}

.cine-cta__bgword {
  position: absolute;
  left: 50%;
  bottom: -4vw;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(10rem, 24vw, 25rem);
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px transparent;
  white-space: nowrap;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.cine-cta__inner {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  text-align: center;
}
.cine-cta__pre {
  display: inline-block;
  font-size: var(--eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 24px;
}
.cine-cta__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(3.5rem, 9vw, 8.75rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--light);
  margin-bottom: 28px;
}
.cine-cta__title em,
.cine-cta__title .accent-cyan {
  font-style: italic;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 60%, var(--primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
}
.cine-cta__sub {
  max-width: 620px;
  margin: 0 auto 64px;
  font-size: clamp(0.9375rem, 1.3vw, 1.125rem);
  color: var(--light);
  line-height: 1.6;
}

.cine-cta__layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  text-align: left;
  align-items: center; /* la tarjeta CTA (baja) se centra junto al aside (más alto) */
}

/* Tarjeta CTA -> navega a /agendar.html (reemplaza el antiguo formulario). */
.cine-cta__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 40px;
  box-shadow: 0 24px 60px -24px rgba(26, 31, 46, 0.16);
  text-align: center;
}
.cine-cta__card-title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--light);
  margin: 0 0 10px;
}
.cine-cta__card-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 24px;
}
.cine-cta__card .btn--block { width: 100%; }
.cine-cta__card-note {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.cine-cta__side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cine-cta__side h3 {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--light);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.cine-cta__channel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  color: var(--light);
  box-shadow: 0 2px 14px -8px rgba(26, 31, 46, 0.08);
  transition: all 0.35s var(--ease-out);
}
.cine-cta__channel:hover {
  border-color: var(--accent-ink);
  background: rgba(0, 193, 188, 0.08);
  transform: translateX(4px);
}
.cine-cta__channel svg:first-child {
  flex-shrink: 0;
  color: var(--accent-ink);
}
.cine-cta__channel > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cine-cta__channel strong {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--light);
}
.cine-cta__channel span {
  font-size: 13px;
  color: var(--muted);
}
.cine-cta__channel-arrow {
  opacity: 0.4;
  transition: opacity 0.3s, transform 0.3s;
}
.cine-cta__channel:hover .cine-cta__channel-arrow {
  opacity: 1;
  transform: translateX(4px);
  color: var(--accent-ink);
}
.cine-cta__social {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.cine-cta__social a {
  width: 42px; height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--light);
  transition: all 0.3s;
}
.cine-cta__social a:hover {
  background: rgba(0, 193, 188, 0.12);
  border-color: var(--accent-ink);
  color: var(--accent-ink);
}

/* ============================================================
   10b. ÁREAS COMPLEMENTARIAS · sinergia Salud + Movimiento
   Un solo "personaje" formado por dos pilares que se complementan.
   ============================================================ */
.cine-synergy {
  position: relative;
  padding: clamp(120px, 18vh, 200px) clamp(24px, 5vw, 80px);
  background: var(--bg-deep);
  overflow: hidden;
  isolation: isolate;
}
.cine-synergy::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}
.cine-synergy__bgnum {
  position: absolute;
  top: 6%;
  right: 4vw;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(11.25rem, 22vw, 22.5rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--stroke-faint);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.cine-synergy__inner {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
}

/* ---- Encabezado de la sección ---- */
.cine-synergy__head {
  text-align: center;
  margin-bottom: 80px;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.cine-synergy__head .section-head {
  justify-content: center;
}
.cine-synergy__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--light);
  margin: 32px 0 28px;
}
.cine-synergy__title em,
.cine-synergy__title .accent-cyan {
  font-style: italic;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 60%, var(--primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
}
.cine-synergy__lead {
  font-size: clamp(0.9375rem, 1.3vw, 1.125rem);
  color: var(--light);
  line-height: 1.65;
  margin: 0 auto;
  max-width: 720px;
}
.cine-synergy__lead strong { color: var(--light); font-weight: 600; }

/* El panel integral (.cine-synergy__pillar / __visual / __art / __disciplines /
   __integral-lead / __cta / __svg + @keyframes synRing) se RETIRÓ: la home usa
   .cine-constellation (FASE 2.1). Se conservan .cine-synergy / __bgnum / __inner /
   __head / __title / __lead, que la sección de la constelación reutiliza. */


/* ============================================================
   11. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .cine-area__layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .cine-area--alt .cine-area__layout { direction: ltr; }
  .cine-area__media-col {
    padding: 80px clamp(24px, 6vw, 60px) 20px;
    min-height: 70vh;
    min-height: 70svh;
  }
  .cine-area__media { max-width: 380px; }
  .cine-area__content-col {
    padding: 20px clamp(24px, 6vw, 60px) 100px;
  }
  .cine-area__bgnum {
    top: 16%;
    transform: rotate(-90deg);
    font-size: 26vw;
  }

  .cine-manifesto__grid { grid-template-columns: 1fr; }
  .cine-telemed__layout { grid-template-columns: 1fr; }
  .cine-cta__layout { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .cine-hero {
    min-height: 92vh;
    min-height: 92svh;
  }
  .cine-hero__inner { padding-top: 110px; }
  /* CLS: en móvil top-alineamos el hero home. Estaba centrado vertical
     (justify-content:center) sobre min-height:100vh, así que un rewrap del
     texto al cargar la fuente real re-centraba y movía TODO el bloque (~272px).
     Top-alineado, ese rewrap solo empuja ~1 línea bajo la bajada. Desktop
     conserva el centrado (esta regla es solo ≤720px). */
  .cine-hero--home .cine-hero__inner { justify-content: flex-start; }
  .cine-hero__top { flex-direction: column-reverse; align-items: flex-start; }
  .cine-hero__side { align-items: flex-start; }
  .cine-hero__title-row--big { font-size: clamp(4.5rem, 22vw, 8.75rem); }
  .cine-hero__title-row--small { font-size: clamp(1.75rem, 8vw, 3rem); }
  .cine-hero__bgword { font-size: 42vw; bottom: -3vw; }
  .cine-hero__meta { gap: 24px; }
  .cine-hero__meta strong { font-size: 20px; }

  .cine-manifesto, .cine-method, .cine-stats, .cine-team, .cine-quotes, .cine-cta { padding-left: 24px; padding-right: 24px; }
  .cine-manifesto__title, .cine-method__title, .cine-stats__title, .cine-team__title {
    font-size: clamp(2rem, 1rem + 4.5vw, 3rem);   /* rem+vw: zoom-safe (WCAG 1.4.4) */
    margin-bottom: 48px;
  }
  .cine-pillar { padding: 24px 22px; }

  .cine-area__media { max-width: 280px; }
  .cine-area__name { font-size: clamp(2.5rem, 1.4rem + 5vw, 3.75rem); }   /* rem+vw zoom-safe */
  .cine-area__disciplines span { font-size: 11.5px; padding: 6px 12px; }

  .cine-cta__title { font-size: clamp(3rem, 1.6rem + 7.5vw, 5rem); }   /* rem+vw zoom-safe */
  .cine-cta__card { padding: 28px; }

  /* Synergy en móvil */
  .cine-synergy { padding-left: 24px; padding-right: 24px; }
  .cine-synergy__title { font-size: clamp(2.125rem, 0.9rem + 5.5vw, 3.25rem); margin-bottom: 24px; }   /* rem+vw zoom-safe */
}

/* ============================================================
   12. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cine-word > span,
  .cine-line > *,
  [data-cine-reveal],
  .cine-pillar {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .cine-hero__bgword,
  .cine-hero__layer,
  .cine-area__media,
  .cine-telemed__bgword,
  .cine-cta__bgword,
  .cine-marquee__track {
    transform: none !important;
    animation: none !important;
  }
  .cine-hero__scroll-line div,
  .cine-hero__tag .dot,
  .cine-telemed__pings .ping {
    animation: none !important;
  }
}

/* Overrides de tema oscuro eliminados (sitio mono-tema claro). */

/* ============================================================
   14. PÁGINAS INTERNAS CINEMATOGRÁFICAS
   (salud / movimiento / equipo / nosotros / telemed)
   ============================================================ */

/* Hero más corto que el de la home */
.cine-hero--sub { min-height: 80vh; min-height: 80svh; }
.cine-hero--sub .cine-hero__inner {
  justify-content: center;
  gap: clamp(28px, 5vh, 52px);
}
/* Acento turquesa para páginas de movimiento */
.cine-hero--mov { }
.cine-hero--mov .cine-hero__tag .dot { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.cine-hero--mov .cine-hero__title em {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 60%, var(--primary) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cine-hero--mov .cine-hero__glow--1 { background: radial-gradient(circle, var(--accent), transparent 70%); }

/* Breadcrumb */
.cine-breadcrumb {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 18px;
}
.cine-breadcrumb a { color: var(--accent-ink); transition: opacity .25s var(--ease); }
.cine-breadcrumb a:hover { opacity: .7; }
.cine-breadcrumb span { opacity: .45; }

/* Sección genérica de página interna */
.cine-sec {
  position: relative;
  padding: clamp(90px, 14vh, 160px) clamp(24px, 5vw, 80px);
  isolation: isolate;
}
.cine-sec--alt {
  background: var(--bg-deep);
}
.cine-sec__inner { margin: 0 auto; position: relative; z-index: 1; }
.cine-sec__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.25rem, 5.5vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--light);
  margin: 28px 0 0;
  max-width: 16ch;
}
.cine-sec__title em,
.cine-sec__title .accent-cyan {
  font-style: italic; font-weight: 500;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 60%, var(--primary) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cine-sec--mov .cine-sec__title em {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 60%, var(--primary) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cine-sec__lead {
  font-size: clamp(0.9375rem, 1.3vw, 1.125rem);
  color: var(--light);
  line-height: 1.65;
  max-width: 680px;
  margin-top: 22px;
}

/* Pills de disciplinas */
.cine-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.cine-tags span {
  display: inline-block; padding: 7px 14px;
  background: var(--surface-pill);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--light);
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em;
}

/* Grilla de tarjetas */
.cine-cards { display: grid; gap: 24px; margin-top: 52px; }
.cine-cards--2 { grid-template-columns: repeat(2, 1fr); }
.cine-cards--3 { grid-template-columns: repeat(3, 1fr); }
.cine-cards--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (max-width: 980px) { .cine-cards--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .cine-cards--2, .cine-cards--3, .cine-cards--auto { grid-template-columns: 1fr; }
}

/* Pillar como servicio clickeable (abre modal) */
.cine-pillar.svc-open { cursor: pointer; outline: none; }
.cine-pillar.svc-open:focus-visible { border-color: var(--accent-ink); box-shadow: 0 0 0 3px rgba(0,193,188,.3); }
.cine-pillar .svc-more {
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent-ink); font-size: 13px; font-weight: 600; letter-spacing: 0.03em;
  transition: gap .3s var(--ease);
}
.cine-pillar.svc-open:hover .svc-more { gap: 14px; }
.cine-sec--mov .cine-pillar .svc-more,
.cine-pillar--mov .svc-more { color: var(--accent-ink); }
.cine-pillar--mov::before { background: var(--accent); }
.cine-pillar--mov:hover { border-color: var(--accent-ink); }
.cine-pillar--mov .cine-pillar__icon { color: var(--accent-ink); }

/* Banda de contacto / CTA de página interna */
.cine-contact { position: relative; }
.cine-contact__card {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 28px 40px;
  align-items: center;
  padding: clamp(32px, 4vw, 56px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-1);
}
@media (max-width: 880px) {
  .cine-contact__card { grid-template-columns: 1fr 1fr; }
  .cine-contact__card .btn { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 520px) { .cine-contact__card { grid-template-columns: 1fr; } }
/* Grupo de CTAs de la tarjeta de contacto: Agenda (primario) + WhatsApp
   (secundario) apilados. Ocupa la 4ª columna "auto" del grid; en angosto cruza
   todo el ancho como hacía el botón único. */
.cine-contact__cta { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 880px) { .cine-contact__cta { grid-column: 1 / -1; } }
.cine-contact__item { display: flex; flex-direction: column; gap: 5px; }
.cine-contact__item strong {
  font-family: var(--font-serif); font-size: 14px; font-weight: 700;
  color: var(--light); letter-spacing: -0.01em;
}
.cine-contact__item span, .cine-contact__item a { font-size: 14px; color: var(--muted); }
.cine-contact__item a:hover { color: var(--accent-ink); }

/* Bgword de página interna (palabra gigante de fondo) */
.cine-hero--sub .cine-hero__bgword { bottom: -4vw; font-size: clamp(7.5rem, 22vw, 21.25rem); }

/* ============================================================
   15. BLOG
   ============================================================ */

/* Filtros por categoría */
.blog-filters {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 40px;
  min-height: 40px; /* reserva la fila de filtros (se puebla por JS) → sin CLS */
}
.blog-filter {
  padding: 9px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--soft);
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.blog-filter:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.blog-filter.is-active {
  background: var(--accent);
  border-color: var(--accent-ink);
  color: var(--on-accent);
}

/* Grilla de artículos */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}
@media (max-width: 980px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform .4s var(--ease-out), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.blog-card:hover { transform: translateY(-6px); border-color: var(--accent-ink); box-shadow: var(--shadow-2); }
.blog-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }

.blog-card__media {
  aspect-ratio: 16 / 11;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
}
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.blog-card__media[data-cat="Salud"]        { background: linear-gradient(135deg, var(--accent), var(--primary)); }
.blog-card__media[data-cat="Movimiento"]   { background: linear-gradient(135deg, var(--accent), var(--accent-ink)); }
.blog-card__media[data-cat="Nutrición"]    { background: linear-gradient(135deg, var(--accent-2), var(--accent)); }
.blog-card__media[data-cat="Telemedicina"] { background: linear-gradient(135deg, var(--primary), var(--primary-2)); }
.blog-card__media[data-cat="Bienestar"]    { background: linear-gradient(135deg, var(--primary-2), var(--accent)); }
.blog-card__media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 78% 22%, rgba(255,255,255,.18), transparent 45%),
    linear-gradient(180deg, transparent 55%, rgba(2,16,36,.28));
}

.blog-card__body { display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 28px; flex: 1; }
.blog-card__cat {
  display: inline-block; align-self: flex-start;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-ink);
}
.blog-card__title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 19px; line-height: 1.25; letter-spacing: -0.01em;
  color: var(--light);
}
.blog-card__excerpt { font-size: 14px; line-height: 1.6; color: var(--muted); flex: 1; }
.blog-card__meta {
  display: flex; gap: 14px; align-items: center;
  font-size: 12px; color: var(--muted); letter-spacing: 0.02em;
  padding-top: 6px; border-top: 1px solid var(--line); margin-top: 4px;
}
.blog-card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); }

/* Artículo destacado (ocupa ancho completo, 2 columnas internas) */
.blog-featured {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 0; margin-top: 48px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease);
}
.blog-featured:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
@media (max-width: 820px) { .blog-featured { grid-template-columns: 1fr; } }
.blog-featured__media { position: relative; min-height: 280px; overflow: hidden; background: linear-gradient(135deg, var(--accent), var(--primary)); }
.blog-featured__media img { width: 100%; height: 100%; object-fit: cover; }
.blog-featured__body { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.blog-featured__flag { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-ink); }
.blog-featured__title { font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.625rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--light); }
.blog-featured__excerpt { font-size: 15px; line-height: 1.65; color: var(--muted); max-width: 52ch; }

/* Newsletter */
.blog-news__card {
  margin-top: 16px; padding: clamp(32px, 4vw, 56px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center;
}
.blog-news__form { display: flex; gap: 10px; width: min(440px, 100%); flex-wrap: wrap; }
.blog-news__form input {
  flex: 1; min-width: 200px; padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-xs);
  color: var(--light); font-family: inherit; font-size: 14px;
}
.blog-news__form input:focus { outline: none; border-color: var(--accent-ink); }

/* ====== ARTÍCULO INDIVIDUAL ====== */
.blog-article { max-width: 760px; margin: 0 auto; }
.blog-article__cat { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-ink); }
.blog-article__title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.75rem); line-height: 1.05; letter-spacing: -0.03em;
  color: var(--light); margin: 18px 0 20px;
}
.blog-article__meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 13px; color: var(--muted); }
.blog-article__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); }
.blog-article__cover {
  aspect-ratio: 16 / 8; border-radius: var(--r-md); margin: 40px 0; overflow: hidden;
  background: linear-gradient(135deg, var(--accent), var(--primary));
}
.blog-article__cover img { width: 100%; height: 100%; object-fit: cover; }
.blog-article__body { font-size: 17px; line-height: 1.8; color: var(--soft); }
.blog-article__body p { margin-bottom: 22px; }
.blog-article__body h2 {
  font-family: var(--font-serif); font-weight: 700; font-size: 26px; line-height: 1.2;
  color: var(--light); margin: 36px 0 14px; letter-spacing: -0.01em;
}
.blog-article__body ul { margin: 0 0 22px 20px; }
.blog-article__body li { margin-bottom: 8px; }
.blog-article__body strong { color: var(--light); }

.blog-article__share { display: flex; gap: 12px; align-items: center; margin: 44px 0; padding-top: 28px; border-top: 1px solid var(--line); }
.blog-article__share span { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.blog-article__share a {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%; color: var(--light);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.blog-article__share a:hover { color: var(--accent-ink); border-color: var(--accent-ink); }

.blog-empty { margin-top: 48px; color: var(--muted); font-size: 15px; }

/* ============================================================
   ALINEACIÓN UNIFICADA — secciones cinematográficas
   El padding horizontal ahora lo aporta el __inner (via --gutter
   en styles.css). Las <section> dejan SOLO el padding vertical
   para que los bordes de contenido coincidan con nav y footer.
   También unificamos outliers de max-width al --container.
   ============================================================ */
.cine-hero, .cine-manifesto, .cine-synergy, .cine-telemed,
.cine-method, .cine-stats, .cine-team, .cine-quotes, .cine-cta,
.cine-area, .cine-sec, .cine-marquee {
  padding-left: 0;
  padding-right: 0;
}
/* synergy alineada al eje --container (1320), como el resto de las secciones. */
.cine-synergy__inner { max-width: var(--container); }

/* ============================================================
   SISTEMA DE TÍTULOS · "SectionTitle"
   Una sola estética editorial sobria para todos los títulos:
   serif grande arriba (navy) + bajada sans chica abajo (navy-soft),
   con acento <em> en serif itálica teal.

   Se carga al final (después de styles.css y del resto de
   cinematic.css) para CONVERGER la familia de títulos existente
   SIN tocar el markup ni las animaciones (data-cine-lines /
   data-cine-reveal / cine-word siguen intactos).
   ============================================================ */

/* 1) Estandarización de los TÍTULOS DE SECCIÓN (h2) — el hero
      conserva su escala/animación; aquí sólo secciones de contenido. */
.cine-manifesto__title,
.cine-synergy__title,
.cine-telemed__title,
.cine-method__title,
.cine-stats__title,
.cine-team__title,
.cine-cta__title,
.cine-sec__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--st-h2);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--navy);
}

/* 3) Acento <em>: serif itálica, color plano teal (reemplaza el
      degradado cian). Incluye el hero. Aplica a .accent-cyan legacy. */
.cine-hero__title em,
.cine-manifesto__title em,
.cine-synergy__title em,
.cine-telemed__title em,
.cine-method__title em,
.cine-stats__title em,
.cine-team__title em,
.cine-cta__title em,
.cine-sec__title em,
.cine-manifesto__title .accent-cyan,
.cine-telemed__title .accent-cyan,
.cine-cta__title .accent-cyan,
.cine-synergy__title .accent-cyan,
.cine-sec__title .accent-cyan {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  color: var(--teal);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}

/* 3b) Áreas "Movimiento": conservan el acento de marca (turquesa),
       pero plano (sin degradado), en línea con la estética editorial. */
.cine-hero--mov .cine-hero__title em,
.cine-sec--mov .cine-sec__title em {
  color: var(--accent-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* ============================================================
   COMPONENTE REUTILIZABLE .section-title
   Uso (HTML estático, headings reales para SEO/accesibilidad):

   <div class="section-title section-title--h2">
     <span class="section-title__eyebrow">Kicker opcional</span>
     <h2 class="section-title__line">
       Texto principal con <em>acento</em>
     </h2>
     <p class="section-title__subtitle">Bajada descriptiva opcional.</p>
   </div>

   Semántica: usa h1 | h2 | h3 según jerarquía (máx. 1 h1/página).
   Tamaño: el modificador --h1 | --h2 | --h3 mapea la escala clamp.
   Alineación: añade --center para centrar.
   ============================================================ */
/* Orden vertical canónico: título (1) → bajada (2) → eyebrow (3).
   El eyebrow NUNCA va por encima del título. */
.section-title { display: flex; flex-direction: column; max-width: 100%; }
.section-title--center { text-align: center; margin-left: auto; margin-right: auto; }

.section-title__line     { order: 1; }
.section-title__subtitle { order: 2; }
.section-title__eyebrow  { order: 3; }

.section-title__eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking);
  font-size: var(--eyebrow-size);
  color: var(--accent-ink);
  margin: 0.6rem 0 0;
}

.section-title__line {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.section-title--h1 .section-title__line { font-size: var(--st-h1); }
.section-title--h2 .section-title__line { font-size: var(--st-h2); }
.section-title--h3 .section-title__line { font-size: var(--st-h3); }

.section-title__line em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  color: var(--teal);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.section-title__subtitle {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--navy-soft);
  font-size: var(--st-sub);
  line-height: 1.6;
  margin: 0.6rem 0 0;
  max-width: 52ch;
}
.section-title--center .section-title__subtitle { margin-left: auto; margin-right: auto; }

/* ============================================================
   REORDEN CANÓNICO · "grande arriba, chica abajo"
   Patrón obligatorio en TODO el sitio:
     TÍTULO (grande)  →  BAJADA (chica)  →  eyebrow/kicker (al final)
   Mecanismo: el contenedor se vuelve columna flex; el título sube
   (order:-2) y la bajada (order:-1) por encima del eyebrow, que se
   queda en su sitio (antes del cuerpo). NO se toca el markup, así
   que las animaciones (data-cine-lines/reveal) y el copy quedan
   intactos. El eyebrow nunca queda por ENCIMA del título.
   ============================================================ */
.cine-sec__inner,
.cine-manifesto__inner,
.cine-synergy__head,
.cine-method__inner,
.cine-team__inner,
.cine-telemed__intro,
.cine-stats__head,
.cine-cta__inner {
  display: flex;
  flex-direction: column;
}

/* Títulos suben primero */
.cine-sec__inner       > .cine-sec__title,
.cine-manifesto__inner > .cine-manifesto__title,
.cine-synergy__head    > .cine-synergy__title,
.cine-method__inner    > .cine-method__title,
.cine-team__inner      > .cine-team__title,
.cine-telemed__intro   > .cine-telemed__title,
.cine-stats__head      > .cine-stats__title,
.cine-cta__inner       > .cine-cta__title { order: -2; }

/* Bajadas/leads justo debajo del título */
.cine-sec__inner     > .cine-sec__lead,
.cine-synergy__head  > .cine-synergy__lead,
.cine-team__inner    > .cine-team__lead,
.cine-telemed__intro > .cine-telemed__lead,
.cine-cta__inner     > .cine-cta__sub { order: -1; }

/* El kicker/eyebrow queda debajo de la bajada y antes del cuerpo */
.cine-sec__inner       > .section-head,
.cine-manifesto__inner > .section-head,
.cine-synergy__head    > .section-head,
.cine-method__inner    > .section-head,
.cine-team__inner      > .section-head,
.cine-telemed__intro   > .section-head {
  margin: 1.4rem 0 0.4rem;
}
.cine-stats__head > .cine-stats__pre,
.cine-cta__inner  > .cine-cta__pre { margin: 1rem 0 0; }

/* ---------- HERO: título arriba, bajada debajo, tag al final ----------
   .cine-hero__inner ya es flex-column; se agrupa el contenido arriba. */
.cine-hero__inner { justify-content: flex-start; }
.cine-hero__inner > .cine-hero__title  { order: -2; }
.cine-hero__inner > .cine-hero__bottom { order: -1; }
.cine-hero__inner > .cine-hero__top    { order: 0; }

/* Heroes en IBM Plex Serif (heredan --font-serif del base .cine-hero__title).
   El acento <em> conserva serif itálica teal (regla previa). */

/* Hero HOME: un solo titular serif formal, columna izquierda, sin desbordes. */
.cine-hero__title--home {
  color: var(--navy);
  max-width: 740px;
}
.cine-hero__title--home .cine-hero__title-row {
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

/* ============================================================
   HERO INICIO (home) · texto IZQUIERDA + DNA DERECHA
   TODO scoped a .cine-hero--home → NO afecta secciones, cards,
   marcadores ni a los demás heroes. webgl.js intacto.
   ============================================================ */
.cine-hero--home {
  /* Escala de spacing fija para todo el hero (sin huecos arbitrarios) */
  --s2: 0.75rem;
  --s3: 1.25rem;
  --s4: 2rem;
  --s5: 2.75rem;
  /* HERO patrón telemed: foto absolute FUNDIDA en el navy por el scrim (sin corte
     duro). Usa el flex-column del base .cine-hero (media/scrim/ADN son absolute;
     el inner es el único en flujo). */
  /* Base navy SÓLIDA bajo el texto. !important: le gana a
     `section { background: transparent !important }` (background.css) — sin esto
     el hero sería transparente y con la foto rota/JS-off el texto blanco quedaría
     ilegible sobre el fondo claro del sitio. Es el fallback del hero. */
  background: #001238 !important;
  color: #fff;
  /* Fundido inferior (.cine-fade): funde al ambiente que va justo debajo (el
     marquee, transparente → muestra .cef-bg = --bg-deep ≡ --s-light-bg por tema).
     Theme-aware: #f5f7fa claro / #071529 oscuro. Sin costura en ambos temas. */
  --fade-to: var(--s-light-bg);
  --fade-h: clamp(48px, 5vw, 80px);
}
/* background.css inyecta al FINAL `.cine-hero { background: transparent !important }`
   (misma especificidad 0,1,0 → ganaba por orden). En el hero split la columna de
   texto NO está tapada por la foto (antes sí, full-bleed) → necesita el navy sólido.
   Subimos a (0,2,0) para ganar la cascada sin depender del orden de carga. */
.cine-hero.cine-hero--home { background: #001238 !important; }

/* Foto (LCP) ABSOLUTE, fundida por el scrim. Móvil: banda superior (56vh);
   desktop: mitad derecha (media query abajo). object-fit:cover, w/h → CLS 0. */
.cine-hero--home .cine-hero__media {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 56vh;
  z-index: 0;
}
.cine-hero--home .cine-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;   /* móvil: profesional (cabeza/torso) arriba */
}

/* Scrim que FUNDE la foto en el navy (iOS-safe, sin corte duro). Móvil: vertical,
   la foto se derrite hacia el navy hacia abajo. Desktop (abajo): 90° navy izq. */
.cine-hero--home .cine-hero__scrim {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 56vh;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 18, 56, 0) 34%,
    rgba(0, 18, 56, 0.6) 70%,
    #001238 94%
  );
}

/* Motivo ADN estático (SVG), IZQUIERDA detrás del texto, muy sutil. Enmascarado
   hacia la derecha (denso en el borde izq, se desvanece antes de las letras) → NO
   resta contraste al H1/sub. Sin animación, sin WebGL. */
.cine-hero--home .cine-hero__dna {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  z-index: 2;                      /* sobre el scrim (z1), bajo el inner (z5) */
  width: min(46%, 400px);
  height: 100%;
  color: var(--accent);           /* teal (currentColor de los trazos/nodos) */
  opacity: 0.18;                   /* sutil detrás del texto (a ojo si resta contraste) */
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, #000 8%, transparent 78%);
          mask-image: linear-gradient(to right, #000 8%, transparent 78%);
}

/* Eyebrow: pastilla translúcida SIN backdrop-filter (iOS). Texto blanco. */
.cine-hero--home .cine-hero__tag {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Texto sobre navy limpio, IZQUIERDA. Móvil: padding-top empuja el texto DEBAJO
   de la banda de foto (56vh) → nunca se pisan. Desktop (abajo): re-centra vertical
   y reserva la mitad derecha con padding-right. */
.cine-hero--home .cine-hero__inner {
  max-width: 1320px;
  margin-inline: auto;
  padding-top: 52vh;           /* móvil: debajo de la banda de foto */
  padding-bottom: clamp(44px, 8vh, 72px);
  padding-inline: clamp(1.5rem, 5vw, 5rem);
  justify-content: flex-start; /* móvil: top-align bajo la banda */
  align-items: flex-start;     /* contenido a la izquierda */
  text-align: left;
  gap: 0;
}
/* Orden: badge → título → (bajada + botones + stats) */
.cine-hero--home .cine-hero__inner > .cine-hero__top    { order: 1; }
.cine-hero--home .cine-hero__inner > .cine-hero__title  { order: 2; }
.cine-hero--home .cine-hero__inner > .cine-hero__bottom { order: 3; }

/* Badge a la izquierda */
.cine-hero--home .cine-hero__top {
  justify-content: flex-start;
  width: 100%;
}

/* Título: izquierda, columna ~600px, blanco sobre el velo navy */
.cine-hero--home .cine-hero__title {
  margin: var(--s4) 0 0;
  max-width: 600px;
  text-align: left;
  color: #fff;                 /* blanco en AMBOS temas (va sobre el velo navy) */
}
.cine-hero--home .cine-hero__title-row { justify-content: flex-start; }
/* Acento "causa": teal brillante sólido → legible sobre navy en claro y oscuro
   (el gradiente base termina en navy → se perdería sobre el velo). */
.cine-hero--home .cine-hero__title em {
  background: none;
  -webkit-text-fill-color: var(--accent-2);
  color: var(--accent-2);
}

/* Bloque inferior a la izquierda (max ~600px); ritmo por la escala fija */
.cine-hero--home .cine-hero__bottom {
  margin-top: var(--s3);          /* título → bajada */
  gap: 0;
  align-items: flex-start;
  width: 100%;
  max-width: 600px;
}
.cine-hero--home .cine-hero__sub {
  margin: 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.82);   /* sobre el velo navy, ambos temas */
  text-align: left;
}
.cine-hero--home .cine-hero__ctas {
  margin-top: var(--s4);          /* bajada → botones */
  justify-content: flex-start;
}

/* Meta plana (SIN glass card → sin backdrop-filter, iOS-safe). Una sola cifra
   ancla ("+25 mil personas atendidas"); 16/1/100% viven en "En números". */
.cine-hero--home .cine-hero__meta {
  margin-top: var(--s5);          /* botones → stats */
  border-top: 0;
  padding: 0;
  gap: clamp(20px, 4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  align-self: flex-start;
}
.cine-hero--home .cine-hero__meta strong { color: #fff; }
.cine-hero--home .cine-hero__meta span   { color: rgba(255, 255, 255, 0.62); }

/* Botones con profundidad teal — SOLO dentro del hero home */
.cine-hero--home .btn--primary {
  box-shadow:
    0 10px 28px -10px color-mix(in srgb, var(--teal) 65%, transparent),
    0 0 0 1px color-mix(in srgb, var(--teal) 30%, transparent);
}
/* (Sin .btn--ghost ni .cine-hero__canvas: el hero home ya no usa WebGL ni botón
   fantasma. El ADN es SVG estático; ver .cine-hero__dna arriba.) */

/* Móvil/tablet (≤899px): foto banda arriba (56vh), texto abajo sobre navy. ADN
   oculto (pisaría el texto full-width). */
@media (max-width: 899px) {
  .cine-hero--home .cine-hero__title,
  .cine-hero--home .cine-hero__bottom { max-width: 100%; }

  .cine-hero--home .cine-hero__dna { display: none; }
}

/* Desktop (≥900px): foto MITAD DERECHA fundida con gradiente 90° (navy izq →
   foto der, sin corte duro); texto a la izquierda sobre navy, centrado vertical.
   El alcance del fundido (transparent 64%) y el object-position están tuneados a
   ESTA foto (profesional centro-izquierda) para que se vea completo. */
@media (min-width: 900px) {
  .cine-hero--home .cine-hero__media {
    top: 0; bottom: 0;
    left: auto; right: 0;
    width: 52%;
    height: auto;
  }
  .cine-hero--home .cine-hero__media img { object-position: 45% 50%; }
  .cine-hero--home .cine-hero__scrim {
    top: 0; bottom: 0;
    left: 0; right: 0;
    width: 100%;
    height: auto;
    background: linear-gradient(
      90deg,
      #001238 0%,
      #001238 40%,
      rgba(0, 18, 56, 0.6) 50%,
      rgba(0, 18, 56, 0) 64%
    );
  }
  .cine-hero--home .cine-hero__inner {
    padding-top: clamp(96px, 13vh, 140px);   /* reset del padding-top móvil */
    padding-right: 52%;                       /* reserva la mitad derecha */
    justify-content: center;                  /* re-centra vertical */
  }
}

/* ============================================================
   ORDEN GLOBAL · sistema de diseño unificado
   Tipografía de títulos, contenedor, ritmo y profundidad parejos
   en TODAS las secciones. No toca el markup → animaciones y copy
   intactos.
   ============================================================ */

/* 1) TÍTULOS HERO: frase completa en UNA sola medida (--fs-h1).
   Se elimina el split chico/GRANDE; el acento <em> queda serif itálica
   teal (regla previa). Aplica a todos los heroes cine. */
.cine-hero__title-row--small,
.cine-hero__title-row--big {
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.06;
}

/* 2) CONTENEDOR parejo (--container 1320) en todas las secciones */
.cine-hero__inner,
.cine-sec__inner,
.cine-manifesto__inner,
.cine-synergy__inner,
.cine-telemed__inner,
.cine-method__inner,
.cine-stats__inner,
.cine-team__inner,
.cine-cta__inner {
  max-width: var(--container);
}

/* 3) PADDING vertical uniforme y compacto (--sp-6 mobile / --sp-7 desktop) */
.cine-manifesto,
.cine-synergy,
.cine-telemed,
.cine-method,
.cine-stats,
.cine-team,
.cine-cta,
.cine-sec {
  padding-block: clamp(var(--sp-6), 9vw, var(--sp-7));
}

/* 4) Ritmo interno con la escala --sp-* (título→bajada, grupos) */
.cine-sec__lead,
.cine-synergy__lead,
.cine-team__lead,
.cine-telemed__lead,
.cine-cta__sub { margin-top: var(--sp-3); }

/* 5) CARD ÚNICA: mismo lenguaje de profundidad en todas las secciones
   (radius 18 + borde 1px con glow teal + sombra de card). Conservan su
   fondo elevado existente. */
.cine-pillar,
.area-card,
.plan,
.program,
.float-card,
.blog-card,
.blog-featured {
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--teal) 20%, var(--line));
  box-shadow: var(--shadow-card);
}

/* 6) PROFUNDIDAD: fondo en capas (radiales suaves sobre el navy plano)
   + viñeta sutil — se aplica una sola vez al body, detrás de todo. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 80% 0%, color-mix(in srgb, var(--teal) 9%, transparent), transparent 70%),
    radial-gradient(50% 45% at 0% 100%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 70%);
  box-shadow: inset 0 0 240px 60px rgba(0, 0, 0, 0.25);
}

/* 7) BOTÓN primario con glow teal suave en todo el sitio */
.btn--primary {
  box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--teal) 60%, transparent);
}

/* ============================================================
   LEGIBILIDAD TEMA CLARO · íconos brillantes + degradados claros
   El oscuro NO cambia (overrides solo en [data-theme="light"];
   los íconos vuelven al tono de marca como antes).
   ============================================================ */
/* Íconos (rellenos): conservan el tono de marca brillante */
.cine-pillar__icon,
.cine-cta__channel svg:first-child { color: var(--accent); }
.cine-pillar--mov .cine-pillar__icon { color: var(--accent); }
/* Marcas de cita decorativas: mismo criterio que el texto de acento
   (tinta oscura en claro, brillante en oscuro) */
.cine-quote-mark { color: var(--accent-ink); }
.cine-area__quote--mov .cine-quote-mark { color: var(--accent-ink); }

/* Degradados background-clip:text aún activos → stops oscuros SOLO en claro */
:root[data-theme="light"] .cine-area__quote em {
  background: linear-gradient(135deg, #0a6f6a 0%, #045cb4 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
:root[data-theme="light"] .cine-area__quote--mov em {
  background: linear-gradient(135deg, #0a6f6a 0%, #8a4a00 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* Acento -2 usado como texto (hover): fija claro, oscuro intacto */
:root[data-theme="light"] .cine-area--mov .cine-area__disciplines span:hover { color: var(--accent-ink); }


/* ============================================================
   FALLBACK ESTÁTICO cuando el WebGL/DNA está gateado (.no-webgl):
   reduce-motion, saveData, pantalla chica (≤768) o gama baja.
   Fondo equivalente con tokens; sin canvas ni requestAnimationFrame.
   ============================================================ */
.no-webgl #webgl,
.no-webgl .cine-hero__canvas {
  display: none !important;
}
.no-webgl body::before {
  background:
    radial-gradient(60% 55% at 88% 18%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(55% 50% at 6% 92%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 72%);
  box-shadow: inset 0 0 240px 60px rgba(0, 0, 0, 0.22);
}

/* ============================================================
   PRUEBA SOCIAL / CREDIBILIDAD (Fase D) — .cine-trust
   Coherente con el tono soft (Fase B) e iconos (Fase C).
   Texto en tokens theme-aware (AA en claro y oscuro). Alturas
   reservadas (0 CLS). Los slots [COMPLETAR] usan el estilo --todo
   (pastilla punteada) para que NUNCA parezcan un dato real.
   ============================================================ */
.cine-trust__seals {
  list-style: none;
  margin: clamp(40px, 6vh, 64px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.cine-trust__seal {
  text-align: center;
  padding: 8px 4px;
}
.cine-trust__seal-num {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.125rem, 5vw, 3.5rem);
  line-height: 1;
  color: var(--light);
}
.cine-trust__seal-label {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
}

/* Slot [COMPLETAR]: pastilla punteada, claramente provisional. */
.cine-trust__seal--todo .cine-trust__seal-num,
.cine-trust__registry strong {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent-ink);
  border: 1px dashed var(--accent-ink);
  border-radius: var(--r-xs);
  padding: 4px 10px;
}

/* Registro Superintendencia (condicional: eliminar si no aplica) */
.cine-trust__registry {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: clamp(28px, 4vh, 44px) 0 0;
  font-size: 15px;
  color: var(--muted);
}
.cine-trust__registry .icon {
  color: var(--accent-ink);
}

/* Sub-bloques: convenios y testimonios */
.cine-trust__block {
  margin-top: clamp(48px, 7vh, 80px);
}
.cine-trust__subtitle {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: 600;
  color: var(--light);
  margin: 0 0 8px;
}
.cine-trust__note {
  font-size: 16px;
  color: var(--muted);
  margin: 0 0 28px;
}
.cine-trust__note strong {
  color: var(--light);
  font-weight: 600;
}

/* Grilla de logos de convenios — aspect-ratio reserva el alto (0 CLS) */
.cine-trust__logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.cine-trust__logo {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 2;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Testimonios */
.cine-trust__quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cine-trust__quote {
  margin: 0;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-1);
}
.cine-trust__quote blockquote {
  margin: 0 0 20px;
  padding: 0;
}
.cine-trust__quote blockquote p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--light);
}
.cine-trust__quote-author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cine-trust__avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--neutral) 65%, #fff 12%),
    var(--neutral)
  );
}
.cine-trust__quote-meta {
  display: flex;
  flex-direction: column;
}
.cine-trust__quote-meta cite {
  font-style: normal;
  font-weight: 600;
  font-size: 15px;
  color: var(--light);
}
.cine-trust__quote-role {
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 860px) {
  .cine-trust__seals {
    grid-template-columns: repeat(2, 1fr);
  }
  .cine-trust__quotes {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   PULIDO TIPOGRÁFICO (Fase E)
   ============================================================ */

/* Banda contenedora del pull quote: su propia zona de respiro (section--soft).
   Padding > 56px del fundido → el texto nunca cae sobre el degradado. */
.cine-pullquote-band {
  padding: clamp(64px, 10vh, 120px) clamp(24px, 5vw, 80px);
}

/* Pull quote editorial: serif itálica teal + comilla, como pausa de
   ritmo. Color --accent-ink → AA en claro (#0a6f6a) y oscuro (teal
   brillante). Se usa con <blockquote class="cine-pullquote"> + <cite>. */
.cine-pullquote {
  max-width: 760px;
  margin: clamp(8px, 2vh, 24px) auto;
  padding: 0 clamp(16px, 4vw, 48px);
  text-align: center;
}
.cine-pullquote .cine-quote-mark {
  display: block;
  font-size: clamp(2.75rem, 6vw, 4.75rem);
  line-height: 0.5;
  margin-bottom: 10px;
  opacity: 0.55;
}
.cine-pullquote p {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4375rem, 3.2vw, 2.375rem);
  line-height: 1.32;
  color: var(--accent-ink);
}
.cine-pullquote cite {
  display: block;
  margin-top: 20px;
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 700;
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--soft);
}

/* Jerarquía de números: alinea los sellos (Fase D) al peso fuerte de las
   stats del home para una jerarquía consistente. */
.cine-trust__seal-num {
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 4rem);
  letter-spacing: -0.03em;
}

/* ============================================================
   PÁGINA 404 — coherente con el tono soft, centrada, 0 CLS.
   ============================================================ */
.cine-404 {
  display: grid;
  place-items: center;
  min-height: 68vh;
  text-align: center;
}
.cine-404__inner {
  max-width: 680px;
}
.cine-404__code {
  margin: 0 0 4px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(6rem, 18vw, 12.5rem);
  line-height: 0.9;
  color: var(--accent-ink);
  opacity: 0.45;
}
.section-head--center {
  justify-content: center;
}
.cine-404__lead {
  margin-left: auto;
  margin-right: auto;
}
.cine-404__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}

/* ============================================================
   SKELETON DE CARGA DEL BLOG (estado mientras resuelve el fetch).
   Reusa .blog-card / .blog-featured → mismas dimensiones, 0 CLS.
   Pulso de opacidad SUTIL; sin animación con prefers-reduced-motion.
   ============================================================ */
.blog-card--skeleton,
.blog-featured--skeleton {
  pointer-events: none;
}
.skeleton-box,
.skeleton-line {
  background: var(--line);
  border-radius: var(--r-xs);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.skeleton-line {
  display: block;
  height: 12px;
}
.skeleton-line--cat {
  width: 38%;
  height: 10px;
}
.skeleton-line--title {
  width: 92%;
  height: 16px;
}
.skeleton-line--ftitle {
  width: 80%;
  height: 26px;
}
.skeleton-line--text {
  width: 100%;
}
.skeleton-line--meta {
  width: 48%;
  height: 10px;
  margin-top: 10px;
}
@keyframes skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-box,
  .skeleton-line {
    animation: none;
    opacity: 0.75;
  }
}

/* ============================================================
   DISTINTIVO DE AREA "MOVIMIENTO" (body[data-area="movimiento"])
   Aplica a las 4 paginas de Movimiento (activeNav: movimiento). El calor de marca
   vive en marcadores NITIDOS (no en el fondo): franja superior + breadcrumb/badge +
   stats en turquesa. Salud y el resto quedan excluidos por data-area.
   ============================================================ */

/* 1) Franja de acento 3px en el borde superior (decorativa). Pseudo FIJO sobre el
      nav (z-index 120 > nav/FAB 110), en el padding-top del nav -> no pisa el logo.
      position:fixed -> 0 CLS. */
body[data-area="movimiento"]::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent); /* #00c1bc claro / #00c1bc oscuro */
  z-index: 120;
  pointer-events: none;
}

/* 2) Badge de area: potencia el breadcrumb existente (punto turquesa + texto turquesa),
      SIN pill -> sin problema de contraste. --acento-ink = AA en ambos temas. */
body[data-area="movimiento"] :is(.cine-breadcrumb, .breadcrumb)::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 9px;
  vertical-align: middle;
}
body[data-area="movimiento"] :is(.cine-breadcrumb, .breadcrumb) a {
  color: var(--accent-ink);
}

/* 3) Stats del hero: el VALOR en turquesa (los labels quedan en su gris). #0a6f6a AA. */
body[data-area="movimiento"] .cine-hero__meta strong {
  color: var(--accent-ink);
}

/* (La barra inferior y el FAB de Agendar se eliminaron: WhatsApp es ahora el único FAB
    flotante y Agendar vive en el header. El theming "movimiento" del FAB/barra ya no aplica;
    el del .nav__cta del header se conserva abajo.) */

/* CTA "Reservar hora" del header (.nav__cta, ghost teal) en TURQUESA solo en
      Movimiento. Borde + texto turquesa; el relleno deslizante del :hover (::before)
      pasa a turquesa y el texto invertido a #1a1000 (AA sobre turquesa). Selectores
      (0,2,1)/(0,2,2)/(0,3,1) ganan a los base sin !important. Salud/resto: teal. */
body[data-area="movimiento"] .nav__cta {
  border-color: var(--accent);
  color: var(--accent-ink);
}
body[data-area="movimiento"] .nav__cta::before {
  background: var(--accent);
}
body[data-area="movimiento"] .nav__cta:hover {
  color: #1a1000;
}

/* ============================================================
   DISTINTIVO DE AREA "SALUD" (body[data-area="salud"]) — espejo del de Movimiento
   en NAVY. var(--primary) es theme-aware y sirve de decorativo Y de texto: en claro
   #001854 (AAA, 15.55:1), en oscuro #6f8cc4 (AA, 5.42:1 como texto sobre #071529 —
   no se funde porque es texto sobre fondo, no relleno bajo texto claro).
   Paginas: salud, salud-equipo. telemed (data-area=telemed) -> neutral. nosotros = neutral.
   ============================================================ */

/* 1) Franja navy 3px en el borde superior (fixed, z-index 120 > nav/FAB, 0 CLS). */
body[data-area="salud"]::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary); /* #001854 claro / #6f8cc4 oscuro */
  z-index: 120;
  pointer-events: none;
}

/* 2) Badge: breadcrumb potenciado (punto navy + texto navy). Sin pill. AAA/AA. */
body[data-area="salud"] :is(.cine-breadcrumb, .breadcrumb)::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  margin-right: 9px;
  vertical-align: middle;
}
body[data-area="salud"] :is(.cine-breadcrumb, .breadcrumb) a {
  color: var(--primary);
}

/* 3) Stats del hero: el VALOR en navy (los labels quedan en su gris). */
body[data-area="salud"] .cine-hero__meta strong {
  color: var(--primary);
}

.aliados { position: relative; padding: clamp(56px,8vh,96px) clamp(24px,5vw,80px); isolation: isolate; text-align: center; }
.aliados__inner { width: min(1180px,92vw); margin: 0 auto; position: relative; z-index: 1; }
.aliados__eyebrow { display: inline-block; margin: 0 0 14px; font-size: 14px; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; font-weight: 700; color: var(--soft); }
.aliados__title { margin: 0 auto; }
.aliados__logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin: 36px 0 0; padding: 0; list-style: none; }
.aliados__item { margin: 0; }
.aliados__link { display: flex; align-items: center; justify-content: center; min-width: 220px; min-height: 92px; padding: 26px 40px; background: #fff; border: 1px solid rgba(0,8,36,.12); border-radius: 18px; box-shadow: 0 14px 36px rgba(0,8,36,.14); transition: transform .25s ease, box-shadow .25s ease; }
.aliados__link:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(0,8,36,.20); }
.aliados__logo { height: 40px; width: auto; max-width: 200px; object-fit: contain; display: block; }