/* ==========================================================================
   empresas.css · Wellness Corporativo (/empresas) · rediseño humano + fotos
   Cargado vía pageCss en base.njk. refinamiento.css se suma SIEMPRE al final.
   Scope: body[data-area="empresas"] (no filtra a otras páginas).

   Paleta: SOLO navy (--primary #001854) + teal (--accent #00c1bc), vía tokens
   theme-aware del sitio (--navy, --navy-soft, --teal, --soft, --light…).
   iOS-safe (≤768px): sin backdrop-filter / blur / WebGL / will-change; solo
   gradientes CSS, box-shadow, bordes, transform/opacity.

   Responsive (mobile-first):
   - Grids de 2 columnas APILAN a 1 col por defecto; pasan a 2 col ≥900px.
   - Franja de beneficios: 2×2 en móvil → 4 en fila ≥900px.
   - Contenedor .emp-inner: max-width var(--container) 1320px + gutter fluido
     → el contenido NO se estira en 1920px+ (queda centrado con aire).
   - Fotos: object-fit:cover en caja con aspect-ratio fijo → nunca se deforman
     y reservan su espacio (CLS 0), independientemente del alto/ancho intrínseco.
   - Sin anchos fijos en px que desborden: %, minmax(0,1fr), max-width. El body
     ya trae overflow-x:clip como red de seguridad; aquí evitamos causar overflow.
   ========================================================================== */

/* Contenedor compartido: mismo eje (--container) + gutter que .cine-sec__inner. */
body[data-area='empresas'] .emp-inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Caja de foto reutilizable: aspect-ratio fijo + cover → CLS 0, sin deformar. */
body[data-area='empresas'] .emp-media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--bg-mid); /* fallback bajo la foto (barely visible) */
  box-shadow: 0 24px 60px -30px rgba(0, 16, 80, 0.45);
}
body[data-area='empresas'] .emp-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* llena la caja recortando, nunca estira ni aplasta */
}

/* ── 1 · HERO (texto | foto) ─────────────────────────────────────────── */
body[data-area='empresas'] .emp-hero {
  /* padding-top generoso: despeja el nav fijo (~88–100px) en todo tamaño. */
  padding-block: clamp(120px, 14vh, 148px) clamp(40px, 6vw, 72px);
  background: var(--bg-deep); /* fallback si radial-gradient no computa */
  background:
    radial-gradient(120% 85% at 88% 0%, rgba(0, 193, 188, 0.09), transparent 58%),
    var(--bg-deep);
  border-bottom: 1px solid var(--line);
}
body[data-area='empresas'] .emp-hero .cine-breadcrumb {
  margin-bottom: clamp(16px, 2.5vw, 22px);
}
body[data-area='empresas'] .emp-hero__grid {
  display: grid;
  grid-template-columns: 1fr; /* móvil: 1 col */
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
/* En móvil la FOTO va arriba del texto (brief). */
body[data-area='empresas'] .emp-hero__media {
  order: -1;
}
body[data-area='empresas'] .emp-hero__title {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  /* fluido: 2rem en móvil (no gigante) → 3.5rem en desktop. */
  font-size: clamp(2rem, 6vw, 3.5rem);
  color: var(--navy);
  margin: 0 0 clamp(12px, 2vw, 18px);
  text-wrap: balance;
}
body[data-area='empresas'] .emp-hero__title em {
  font-style: italic;
  color: var(--teal); /* teal AA, theme-aware (deeper en claro, brillante en oscuro) */
}
body[data-area='empresas'] .emp-hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--soft);
  max-width: 48ch;
  margin: 0;
}
body[data-area='empresas'] .emp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(24px, 3vw, 32px);
}
body[data-area='empresas'] .emp-hero__stat {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: clamp(24px, 3vw, 32px) 0 0;
}
body[data-area='empresas'] .emp-hero__stat-num {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  line-height: 1;
  color: var(--teal);
}
body[data-area='empresas'] .emp-hero__stat-label {
  color: var(--navy-soft);
  font-size: 0.95rem;
  line-height: 1.35;
  max-width: 26ch;
}

@media (min-width: 900px) {
  body[data-area='empresas'] .emp-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
  body[data-area='empresas'] .emp-hero__media {
    order: 0; /* foto a la DERECHA en desktop */
  }
}

/* ── 2 · FRANJA DE BENEFICIOS ────────────────────────────────────────── */
body[data-area='empresas'] .emp-benefits {
  padding-block: clamp(40px, 6vw, 72px);
}
body[data-area='empresas'] .emp-benefits__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* móvil: 2×2 */
  gap: clamp(20px, 3vw, 32px);
}
body[data-area='empresas'] .emp-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
body[data-area='empresas'] .emp-benefit__icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: rgba(0, 193, 188, 0.12);
  color: var(--accent-ink);
}
body[data-area='empresas'] .emp-benefit__title {
  font-weight: 700;
  font-size: clamp(0.95rem, 2.2vw, 1.0625rem);
  line-height: 1.25;
  color: var(--navy);
}
@media (min-width: 900px) {
  body[data-area='empresas'] .emp-benefits__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* desktop: 4 en fila */
  }
}

/* ── 3-4 · BLOQUES foto + texto (alternados) ─────────────────────────── */
body[data-area='empresas'] .emp-split-sec {
  padding-block: clamp(44px, 7vw, 88px);
}
body[data-area='empresas'] .emp-split-sec--soft {
  background: var(--bg-mid); /* fallback */
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-deep));
}
body[data-area='empresas'] .emp-split {
  display: grid;
  grid-template-columns: 1fr; /* móvil: apilado (foto arriba por orden DOM) */
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
body[data-area='empresas'] .emp-split__title {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.12;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--navy);
  margin: 0 0 clamp(12px, 2vw, 16px);
  text-wrap: balance;
}
body[data-area='empresas'] .emp-split__lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--soft);
  max-width: 54ch;
  margin: 0;
}
body[data-area='empresas'] .emp-checks {
  list-style: none;
  margin: clamp(18px, 2.5vw, 24px) 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
body[data-area='empresas'] .emp-checks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: clamp(1rem, 2.4vw, 1.0625rem);
  line-height: 1.4;
  color: var(--light);
}
body[data-area='empresas'] .emp-checks .icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--accent-ink);
}
@media (min-width: 900px) {
  body[data-area='empresas'] .emp-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  /* Bloque alternado: en desktop la foto pasa a la DERECHA, el texto a la izq. */
  body[data-area='empresas'] .emp-split--reverse .emp-split__media {
    order: 2;
  }
}

/* ── 5 · CTA FINAL · banda navy ──────────────────────────────────────── */
body[data-area='empresas'] .emp-cta {
  background: var(--primary); /* fallback navy #001854 */
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(0, 193, 188, 0.20), transparent 55%),
    var(--primary);
  color: #fff;
}
body[data-area='empresas'] .emp-cta__inner {
  padding-block: clamp(52px, 8vw, 96px);
  text-align: center;
}
body[data-area='empresas'] .emp-cta__title {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.1;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  color: #fff;
  margin: 0 auto clamp(12px, 2vw, 16px);
  max-width: 20ch;
  text-wrap: balance;
}
body[data-area='empresas'] .emp-cta__lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 56ch;
  margin: 0 auto;
}
body[data-area='empresas'] .emp-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: clamp(24px, 3vw, 32px);
}
/* WhatsApp legible sobre la banda navy (borde/texto claros). */
body[data-area='empresas'] .emp-cta .btn--whatsapp {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
body[data-area='empresas'] .emp-cta .btn--whatsapp:hover,
body[data-area='empresas'] .emp-cta .btn--whatsapp:focus-visible {
  border-color: #25d366;
  color: #fff;
}

/* ── Botones a ancho completo en móviles chicos (tap cómodo ≥44px) ───── */
@media (max-width: 560px) {
  body[data-area='empresas'] .emp-hero__actions,
  body[data-area='empresas'] .emp-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }
  body[data-area='empresas'] .emp-hero__actions .btn,
  body[data-area='empresas'] .emp-cta__actions .btn {
    width: 100%;
  }
}