/* page-hero.css — patrón estándar de “hero” (internas + portada)
   Objetivo:
   - Misma rejilla, mismas proporciones y misma caja de imagen en todas las páginas
   - Compatible con dos nombres históricos: .pageHero (camel) y .page-hero (kebab)
*/

:where(.pageHero, .page-hero){
  display: grid;
  /* Evita que el texto (sobre todo el H1 largo) “empuje” la ilustración */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--section-gap);
  align-items: start;
}

/* Cuando el hero es también una tarjeta */
:where(.pageHero.card, .page-hero.card){
  padding: 1.25rem;
  overflow: hidden;
}

/* Texto: centrado vertical en desktop; en móvil vuelve arriba */
:where(.pageHero__text, .page-hero__text){
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* clave en CSS Grid: permitir que el bloque de texto se encoja y haga wrap */
  min-width: 0;
  min-height: 100%;
  padding-block: .25rem;
}

/* Títulos largos: mejor wrap y menos “saltos” raros */
:where(.pageHero__text h1, .page-hero__text h1){
  overflow-wrap: anywhere;
  hyphens: auto;
}

:where(.pageHero__lead, .page-hero__lead){
  margin: .85rem 0 0;
  max-width: 62ch;

  /* Antes estaba demasiado "gris". Aquí subimos contraste sin hacerlo pesado. */
  color: var(--text, #1e293b);
  opacity: .86;

  font-size: 1.12rem;
  line-height: 1.55;
}

:where(.pageHero__muted, .page-hero__muted){
  margin: .75rem 0 0;
  color: var(--muted, #64748B);
  font-size: .95rem;
}

:where(.pageHero__muted strong, .page-hero__muted strong){
  font-weight: 700;
  color: #0F172A;
}

/* Hero image filter (tema)
   - En light: sin filtro (las versiones -light ya están afinadas)
   - En dark: un pelín de brillo/saturación para igualar PC + móvil
*/
:root{
  --hero-img-filter: var(--hero-img-filter);
}

/* -------------------------------------------------------------------------- */
/* Media: caja consistente (CANÓNICA) */
:where(.pageHero__media, .page-hero__media){
  border-radius: var(--radius-md, 0.95rem);
  overflow: hidden;

  
  position: relative;
/* “aire” sin perder presencia */
  background: var(--surface);
  padding: 0;
/* caja única en todo el sitio */
  aspect-ratio: 16 / 10;

  border: 0;
  min-width: 0;
}

/* Imagen directa */
:where(.pageHero__media img, .page-hero__media img, .pageHero__img){
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;

  /* encuadre más “vertical” sin cambiar la imagen */
  object-position: 50% 50%;
  transform: none;
/* micro-nitidez “pro” */
  filter: var(--hero-img-filter);
border-radius: inherit;
}

/* Slot (por si metes <picture> o algo dentro) */
:where(.pageHero__media, .page-hero__media) > :is(img, picture, svg){
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 1;
  border-radius: inherit;
}

/* Soporte para <picture><img/></picture> */
:where(.pageHero__media, .page-hero__media) picture > img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  transform: none;
border-radius: inherit;
}

/* Responsive */
@media (max-width: 900px){
  :where(.pageHero, .page-hero){
    grid-template-columns: 1fr;
  }

    :where(.pageHero__media, .page-hero__media){
    order: -1;
    padding: 0;
    aspect-ratio: 16 / 10;
  }

  :where(.pageHero__media img, .page-hero__media img, .pageHero__img),
  :where(.pageHero__media, .page-hero__media) picture > img{
    transform: none;
}

:where(.pageHero__text, .page-hero__text){
    justify-content: flex-start;
  }
}

/* CTA row */
:where(.pageHero__ctaRow, .page-hero__ctaRow){
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Hero meta (modalidad: presencial / online) */
:where(.pageHero, .page-hero) .heroMeta{
  list-style: none;
  margin: 14px 0 0;
  padding: 0;

  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

:where(.pageHero, .page-hero) .heroMeta__item{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  color: var(--muted, #64748B);
  font-size: .95rem;
  line-height: 1.2;
}

:where(.pageHero, .page-hero) .heroMeta__link{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  color: inherit;
  text-decoration: none;
}

:where(.pageHero, .page-hero) .heroMeta__link:hover{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}

:where(.pageHero, .page-hero) .heroMeta__link:focus-visible{
  outline: 2px solid rgba(30, 64, 175, .35);
  outline-offset: 4px;
  border-radius: 10px;
}
/* Iconos consistentes */
:where(.pageHero, .page-hero) .heroMeta__icon{
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 auto;
  opacity: .9;
}

/* Separador sutil entre items (sin "·" en el HTML) */
:where(.pageHero, .page-hero) .heroMeta__item + .heroMeta__item{
  position: relative;
  padding-left: 14px;
}
:where(.pageHero, .page-hero) .heroMeta__item + .heroMeta__item::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.18);
}

/* =========================================================
   Ajuste fino: CTAs del hero (desktop)
   - Evita botones "gorditos" en la primera tarjeta (PageHero)
   - Solo afecta al hero, no al resto de botones del sitio
   ========================================================= */
:where(.pageHero, .page-hero) :where(.pageHero__ctaRow, .page-hero__ctaRow) .btn{
  min-height: 40px;
  padding: 0.56rem 0.95rem;
  font-size: 0.95rem;
}

@media (max-width: 520px){
  :where(.pageHero, .page-hero) :where(.pageHero__ctaRow, .page-hero__ctaRow){
    gap: 10px;
  }
  :where(.pageHero, .page-hero) :where(.pageHero__ctaRow, .page-hero__ctaRow) .btn{
    min-height: 42px; /* dedo-friendly en móvil */
    padding: 0.62rem 0.95rem;
    font-size: 0.95rem;
  }
}

html[data-theme="dark"] :where(.pageHero__lead, .page-hero__lead){
  opacity: 0.96;
}

/* Dark hero: marco suave (sin viñeta) */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) :where(.pageHero__media, .page-hero__media){
    border: 1px solid rgba(148,163,184,0.14);
    box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 18px 50px rgba(0,0,0,0.25);
    background: rgba(2,6,23,0.20);
  }
}

html[data-theme="dark"] :where(.pageHero__media, .page-hero__media){
  border: 1px solid rgba(148,163,184,0.14);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 18px 50px rgba(0,0,0,0.25);
  background: rgba(2,6,23,0.20);
}

/* =========================================================
   Dark mode: brillo unificado (PC = móvil)
   ========================================================= */

/* Forzado modo oscuro */
/* Modo automático oscuro (si no fuerzas light) */

/* Dark: hero image filter (unificado) */
@media (prefers-color-scheme: dark){
  html[data-theme="auto"],
  html:not([data-theme]):not([data-theme="light"]){
    --hero-img-filter: brightness(0.92) saturate(0.96) contrast(1.02);
  }
  html:not([data-theme="light"]){
    /* compat: si algún html queda sin data-theme en auto */
    --hero-img-filter: brightness(0.92) saturate(0.96) contrast(1.02);
  }
}
html[data-theme="dark"]{
  --hero-img-filter: brightness(0.92) saturate(0.96) contrast(1.02);
}
html[data-theme="light"]{
  --hero-img-filter: none;
}