/* ==========================================================================
   Instituto Romae — Sistema de diseño
   Marca extraída del sitio original: azul marino #21264D + turquesa #5FC0CA.
   Depende de Bootstrap 5.3 (assets/vendor/bootstrap) y se carga después de él.
   ========================================================================== */

:root {
  /* --- Color de marca --- */
  --romae-navy:        #21264D;
  --romae-navy-deep:   #171B39;
  --romae-navy-soft:   #2D3A6A;
  --romae-turquoise:   #5FC0CA;
  --romae-turquoise-d: #3E9CA7;
  --romae-pink:        #D197AF;
  --romae-pink-d:      #B87792;

  /* --- Roles semánticos --- */
  --romae-bg:          #FFFFFF;
  --romae-bg-muted:    #F6F8FB;
  --romae-bg-navy:     var(--romae-navy);
  --romae-fg:          #1A1E3F;
  --romae-fg-muted:    #5A6180;
  --romae-fg-on-dark:  #FFFFFF;
  --romae-fg-on-dark-muted: rgba(255, 255, 255, .78);
  --romae-border:      #E3E7F0;
  --romae-border-dark: rgba(255, 255, 255, .16);
  /* Verde WhatsApp oscurecido: el #25D366 de marca sólo da 1.98:1 con texto blanco */
  --romae-whatsapp:    #157F45;
  --romae-whatsapp-d:  #106838;

  /* --- Acento por campus (tomado de las franjas del hero original) ---
     --romae-campus     se usa como RELLENO y siempre lleva texto marino encima.
     --romae-campus-ink se usa como TEXTO sobre fondo claro (>= 4.5:1).
     --romae-campus-on-dark se usa sobre el marino. */
  --romae-campus:         var(--romae-turquoise);
  --romae-campus-d:       var(--romae-turquoise-d);
  --romae-campus-ink:     #256B73;
  --romae-campus-on-dark: var(--romae-turquoise);

  /* --- Tipografía --- */
  /* Montserrat sustituye a LEMON MILK, la fuente del logotipo: es la de Google
     Fonts con proporciones y letterforms más cercanas (O circular, R de pata
     recta). LEMON MILK no está en Google Fonts y es de licencia comercial. */
  --romae-font-display: "Montserrat", "Century Gothic", "Avenir Next", Helvetica, Arial, sans-serif;
  --romae-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Espaciado (densidad estándar) --- */
  --romae-space-1: .5rem;
  --romae-space-2: 1rem;
  --romae-space-3: 1.5rem;
  --romae-space-4: 2rem;
  --romae-space-5: 3rem;
  --romae-space-6: 4rem;
  --romae-section-y: clamp(3.5rem, 8vw, 6rem);

  /* --- Radio y sombra (Soft UI: sombras suaves, sin neumorfismo) --- */
  --romae-radius:    14px;
  --romae-radius-lg: 22px;
  --romae-shadow-sm: 0 1px 2px rgba(23, 27, 57, .06), 0 2px 8px rgba(23, 27, 57, .05);
  --romae-shadow:    0 4px 12px rgba(23, 27, 57, .07), 0 12px 32px rgba(23, 27, 57, .08);
  --romae-shadow-lg: 0 8px 20px rgba(23, 27, 57, .09), 0 24px 56px rgba(23, 27, 57, .12);

  /* --- Movimiento --- */
  --romae-ease: cubic-bezier(.22, .61, .36, 1);
  --romae-dur:  220ms;

  --romae-header-h: 76px;
}

/* Variantes de acento por campus. Se aplica en <body data-campus="..."> */
body[data-campus="mazatlan"] {
  --romae-campus: var(--romae-navy-soft); --romae-campus-d: #1F2A52;
  --romae-campus-ink: #2D3A6A; --romae-campus-on-dark: #A9B6E4;
}
body[data-campus="guadalajara"] {
  --romae-campus: var(--romae-pink); --romae-campus-d: var(--romae-pink-d);
  --romae-campus-ink: #8A4E67; --romae-campus-on-dark: var(--romae-pink);
}

/* ==========================================================================
   Base
   ========================================================================== */

html { scroll-behavior: smooth; }

body {
  font-family: var(--romae-font-body);
  color: var(--romae-fg);
  background: var(--romae-bg);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
  /* Compensa el header fijo para que no tape el contenido */
  padding-top: var(--romae-header-h);
}

h1, h2, h3, .romae-display {
  font-family: var(--romae-font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--romae-fg);
}

h4, h5, h6 {
  font-family: var(--romae-font-body);
  font-weight: 600;
  line-height: 1.35;
}

a { color: var(--romae-campus-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--romae-navy); }

/* Foco visible y consistente en todo lo interactivo (WCAG 2.4.7) */
:focus-visible {
  outline: 3px solid var(--romae-turquoise);
  outline-offset: 3px;
  border-radius: 6px;
}

img { max-width: 100%; height: auto; }

.romae-eyebrow {
  font-family: var(--romae-font-body);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--romae-campus-ink);
}
.on-dark .romae-eyebrow,
.romae-hero .romae-eyebrow,
.romae-section--navy .romae-eyebrow { color: var(--romae-campus-on-dark); }

.romae-lead { font-size: 1.0625rem; color: var(--romae-fg-muted); }

/* Enlace de salto para lectores de pantalla / teclado */
.romae-skip {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--romae-navy); color: #fff;
  padding: .75rem 1.25rem; border-radius: 0 0 var(--romae-radius) 0;
}
.romae-skip:focus { left: 0; color: #fff; }

/* ==========================================================================
   Secciones
   ========================================================================== */

.romae-section { padding-block: var(--romae-section-y); }
.romae-section--muted { background: var(--romae-bg-muted); }
.romae-section--navy {
  background: var(--romae-navy);
  color: var(--romae-fg-on-dark);
}
.romae-section--navy h1, .romae-section--navy h2, .romae-section--navy h3 { color: #fff; }
.romae-section--navy p { color: var(--romae-fg-on-dark-muted); }

.romae-section-head { max-width: 46rem; }
.romae-section-head--center { margin-inline: auto; text-align: center; }

/* Divisor con texto, equivalente al "divider" de Elementor del sitio original */
.romae-divider {
  display: flex; align-items: center; gap: 1.25rem;
  margin-block: var(--romae-space-3);
}
.romae-divider::before, .romae-divider::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--romae-border);
}
.romae-section--navy .romae-divider::before,
.romae-section--navy .romae-divider::after { background: var(--romae-border-dark); }
.romae-divider__text {
  font-family: var(--romae-font-display);
  font-size: clamp(1.65rem, 3.6vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -.015em;
  white-space: nowrap;
}

/* ==========================================================================
   Botones
   ========================================================================== */

.romae-btn {
  --_bg: var(--romae-navy);
  --_fg: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  min-height: 48px;            /* objetivo táctil ≥ 44px */
  padding: .75rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--romae-font-body);
  font-weight: 600;
  font-size: .9688rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--romae-dur) var(--romae-ease),
              box-shadow var(--romae-dur) var(--romae-ease),
              background-color var(--romae-dur) var(--romae-ease),
              color var(--romae-dur) var(--romae-ease);
}
.romae-btn:hover { background: var(--romae-navy-deep); color: var(--_fg); transform: translateY(-2px); box-shadow: var(--romae-shadow); }
.romae-btn:active { transform: translateY(0); }

.romae-btn--navy { --_bg: var(--romae-navy); }

/* Relleno de campus: siempre con texto marino (turquesa y rosa no admiten texto blanco) */
.romae-btn--accent { --_bg: var(--romae-campus); --_fg: var(--romae-navy); }
.romae-btn--accent:hover { background: var(--romae-campus-d); color: var(--romae-navy); }

.romae-btn--whatsapp { --_bg: var(--romae-whatsapp); }
.romae-btn--whatsapp:hover { background: var(--romae-whatsapp-d); color: #fff; }

/* Botón claro para usar sobre el marino */
.romae-btn--light { --_bg: #fff; --_fg: var(--romae-navy); }
.romae-btn--light:hover { background: var(--romae-turquoise); color: var(--romae-navy); }

.romae-btn--ghost {
  background: transparent;
  color: var(--romae-navy);
  border-color: var(--romae-border);
}
.romae-btn--ghost:hover { background: var(--romae-bg-muted); color: var(--romae-navy); border-color: var(--romae-campus); }

.romae-btn--on-dark {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.4);
}
.romae-btn--on-dark:hover { background: #fff; color: var(--romae-navy); border-color: #fff; }

.romae-btn__icon { width: 20px; height: 20px; flex: 0 0 auto; }

/* ==========================================================================
   Header
   ========================================================================== */

.romae-header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 1030;
  height: var(--romae-header-h);
  background: var(--romae-navy);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  transition: box-shadow var(--romae-dur) var(--romae-ease);
}
.romae-header.is-scrolled { box-shadow: 0 6px 24px rgba(23, 27, 57, .28); }

.romae-header__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

/* Logotipo oficial en versión blanca (assets/img/logo-horizontal.png) */
.romae-logo { display: inline-flex; align-items: center; text-decoration: none; }
.romae-logo__img { height: 38px; width: auto; display: block; }
@media (min-width: 992px) { .romae-logo__img { height: 42px; } }

/* --- Navegación de escritorio --- */
.romae-nav { display: none; }
@media (min-width: 992px) { .romae-nav { display: flex; align-items: center; gap: .25rem; } }

.romae-nav__link {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .625rem .875rem;
  border-radius: 999px;
  color: var(--romae-fg-on-dark-muted);
  font-size: .9375rem; font-weight: 500;
  text-decoration: none;
  background: none; border: 0;
  cursor: pointer;
  transition: color var(--romae-dur) var(--romae-ease), background-color var(--romae-dur) var(--romae-ease);
}
.romae-nav__link:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.romae-nav__link[aria-current="page"] { color: #fff; background: rgba(95, 192, 202, .22); }
.romae-nav__caret { width: 14px; height: 14px; transition: transform var(--romae-dur) var(--romae-ease); }
.romae-nav__link[aria-expanded="true"] .romae-nav__caret { transform: rotate(180deg); }

.romae-nav__item { position: relative; }
.romae-nav__menu {
  position: absolute; top: calc(100% + .5rem); left: 0; z-index: 20;
  min-width: 15rem;
  margin: 0; padding: .5rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--romae-border);
  border-radius: var(--romae-radius);
  box-shadow: var(--romae-shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--romae-dur) var(--romae-ease),
              transform var(--romae-dur) var(--romae-ease),
              visibility var(--romae-dur);
}
.romae-nav__item.is-open .romae-nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.romae-nav__menu a {
  display: block; padding: .625rem .875rem;
  border-radius: 10px;
  color: var(--romae-fg); font-size: .9375rem; font-weight: 500;
  text-decoration: none;
}
.romae-nav__menu a:hover { background: var(--romae-bg-muted); color: var(--romae-navy); }
.romae-nav__menu a[aria-current="page"] { color: var(--romae-campus-ink); background: var(--romae-bg-muted); }

.romae-header__cta { display: none; }
@media (min-width: 992px) { .romae-header__cta { display: inline-flex; } }

/* --- Botón hamburguesa --- */
.romae-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: transparent; border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px; color: #fff; cursor: pointer;
  transition: background-color var(--romae-dur) var(--romae-ease);
}
.romae-burger:hover { background: rgba(255, 255, 255, .12); }
@media (min-width: 992px) { .romae-burger { display: none; } }
.romae-burger__bar { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--romae-dur) var(--romae-ease), opacity var(--romae-dur) var(--romae-ease); }
.romae-burger__bars { display: flex; flex-direction: column; gap: 5px; }
.romae-burger[aria-expanded="true"] .romae-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.romae-burger[aria-expanded="true"] .romae-burger__bar:nth-child(2) { opacity: 0; }
.romae-burger[aria-expanded="true"] .romae-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Panel móvil --- */
.romae-mobile {
  position: fixed; inset-block-start: var(--romae-header-h); inset-inline: 0; inset-block-end: 0;
  z-index: 1029;
  background: var(--romae-navy-deep);
  padding: var(--romae-space-3) 0 var(--romae-space-5);
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--romae-dur) var(--romae-ease),
              transform var(--romae-dur) var(--romae-ease),
              visibility var(--romae-dur);
}
.romae-mobile.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
@media (min-width: 992px) { .romae-mobile { display: none; } }

.romae-mobile__list { list-style: none; margin: 0; padding: 0; }
.romae-mobile__link,
.romae-mobile__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%;
  min-height: 52px;
  padding: .875rem .25rem;
  background: none; border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  color: #fff; font-size: 1.0625rem; font-weight: 500; text-align: left;
  text-decoration: none; cursor: pointer;
}
.romae-mobile__link[aria-current="page"] { color: var(--romae-turquoise); }
.romae-mobile__sub { list-style: none; margin: 0; padding: 0 0 .5rem .75rem; display: none; }
.romae-mobile__item.is-open .romae-mobile__sub { display: block; }
.romae-mobile__item.is-open .romae-nav__caret { transform: rotate(180deg); }
.romae-mobile__sub a {
  display: block; min-height: 46px; padding: .625rem .25rem;
  color: var(--romae-fg-on-dark-muted); font-size: .9688rem; text-decoration: none;
}
.romae-mobile__sub a:hover { color: #fff; }

/* ==========================================================================
   Hero
   ========================================================================== */

.romae-hero {
  position: relative;
  background: var(--romae-navy);
  color: #fff;
  overflow: hidden;
}
.romae-hero__media { position: absolute; inset: 0; }
.romae-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 22%; }
.romae-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--romae-navy) 0%, rgba(33, 38, 77, .95) 38%, rgba(33, 38, 77, .55) 62%, rgba(33, 38, 77, .25) 100%);
}
.romae-hero__inner {
  position: relative;
  padding-block: clamp(3.5rem, 11vw, 7rem);
  max-width: 40rem;
}
.romae-hero__title {
  color: #fff;
  font-size: clamp(2.15rem, 6vw, 3.6rem);
  margin-bottom: var(--romae-space-2);
}
.romae-hero__title em { font-style: normal; color: var(--romae-campus-on-dark); }
.romae-hero__text { color: var(--romae-fg-on-dark-muted); font-size: 1.0625rem; max-width: 34rem; }
.romae-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--romae-space-3); }

/* Hero compacto para páginas internas */
.romae-hero--compact .romae-hero__inner { padding-block: clamp(2.5rem, 7vw, 4.25rem); }

/* Migas de pan */
.romae-crumbs { font-size: .875rem; color: var(--romae-fg-on-dark-muted); margin-bottom: var(--romae-space-2); }
.romae-crumbs a { color: var(--romae-fg-on-dark-muted); text-decoration: none; }
.romae-crumbs a:hover { color: #fff; text-decoration: underline; }
.romae-crumbs span[aria-current] { color: #fff; }

/* ==========================================================================
   Pantalla selectora de campus (portada)
   Patrón "gateway": ocupa la primera pantalla completa y su único trabajo es
   que la visitante elija sede antes de seguir.
   ========================================================================== */

.romae-gateway {
  position: relative;
  display: flex;
  align-items: center;
  /* dvh y no vh: en móvil, vh no descuenta la barra del navegador */
  min-height: calc(100dvh - var(--romae-header-h));
  padding-block: clamp(2rem, 6vw, 4rem);
  background: var(--romae-navy);
  overflow: hidden;
}
/* Reserva para navegadores sin dvh (Safari antiguo) */
@supports not (height: 100dvh) {
  .romae-gateway { min-height: calc(100vh - var(--romae-header-h)); }
}

.romae-gateway__media { position: absolute; inset: 0; }
.romae-gateway__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.romae-gateway__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(33, 38, 77, .35) 0%, rgba(23, 27, 57, .88) 100%),
    linear-gradient(to bottom, rgba(23, 27, 57, .5) 0%, rgba(23, 27, 57, .2) 45%, rgba(23, 27, 57, .85) 100%);
}

.romae-gateway__inner { position: relative; width: 100%; text-align: center; }
.romae-gateway__logo { height: clamp(58px, 9vw, 84px); width: auto; margin-inline: auto; display: block; }
.romae-gateway__claim {
  margin-top: 1rem;
  font-size: clamp(.6875rem, 1.6vw, .8125rem);
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--romae-turquoise);
}
.romae-gateway__title {
  margin-top: .75rem;
  color: #fff;
  font-size: clamp(1.75rem, 4.6vw, 3rem);
  max-width: 22ch; margin-inline: auto;
}
.romae-gateway__title em { font-style: normal; color: var(--romae-turquoise); }

.romae-gateway__prompt {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  margin-bottom: 1rem;
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--romae-fg-on-dark-muted);
}

.romae-gateway__grid {
  list-style: none; margin: 0 auto; padding: 0;
  display: grid; gap: .875rem;
  max-width: 60rem;
}
@media (min-width: 768px) { .romae-gateway__grid { grid-template-columns: repeat(3, 1fr); gap: 1.125rem; } }
/* Cada <li> estira para que las tres tarjetas midan igual */
.romae-gateway__grid > li { display: flex; }
.romae-gateway__grid > li > .romae-choice { width: 100%; }

/* --- Cada opción de campus --- */
.romae-choice {
  --_accent: var(--romae-turquoise);
  position: relative;
  /* En móvil: miniatura a la izquierda y texto a la derecha, para que las tres
     opciones quepan en una pantalla. En escritorio pasa a columna con la foto
     arriba. */
  display: flex; flex-direction: row; align-items: stretch;
  gap: 0;
  min-height: 104px;               /* objetivo táctil holgado */
  padding: 0;                      /* la foto llega al borde de la tarjeta */
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: var(--romae-radius-lg);
  background: rgba(23, 27, 57, .42);
  backdrop-filter: blur(8px);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--romae-dur) var(--romae-ease),
              background-color var(--romae-dur) var(--romae-ease),
              border-color var(--romae-dur) var(--romae-ease),
              box-shadow var(--romae-dur) var(--romae-ease);
}
/* Franja superior con el color del campus, como en el banner original */
.romae-choice::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; z-index: 2;
  height: 4px; background: var(--_accent);
  transition: height var(--romae-dur) var(--romae-ease);
}
.romae-choice__media { flex: 0 0 auto; width: 124px; line-height: 0; overflow: hidden; }
.romae-choice__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.romae-choice__body {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: .1rem; text-align: left; min-width: 0;
  padding: .75rem .875rem;
}

.romae-choice__name {
  font-family: var(--romae-font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.5rem); font-weight: 700; letter-spacing: -.01em;
  color: #fff;
  transition: color var(--romae-dur) var(--romae-ease);
}
.romae-choice__meta {
  font-size: .8438rem; color: var(--romae-fg-on-dark-muted);
  transition: color var(--romae-dur) var(--romae-ease);
}
.romae-choice__cue {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .35rem;
  font-size: .875rem; font-weight: 600;
  color: var(--_accent);
  transition: color var(--romae-dur) var(--romae-ease);
}
.romae-choice__cue svg { transition: transform var(--romae-dur) var(--romae-ease); }

/* El estado activo se comparte entre puntero y teclado: nunca solo :hover */
.romae-choice:hover,
.romae-choice:focus-visible {
  background: var(--_accent);
  border-color: var(--_accent);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}
.romae-choice:hover .romae-choice__name,
.romae-choice:focus-visible .romae-choice__name,
.romae-choice:hover .romae-choice__cue,
.romae-choice:focus-visible .romae-choice__cue { color: var(--romae-navy); }
.romae-choice:hover .romae-choice__meta,
.romae-choice:focus-visible .romae-choice__meta { color: rgba(23, 27, 57, .8); }
.romae-choice:hover::before,
.romae-choice:focus-visible::before { height: 100%; opacity: 0; }
.romae-choice:hover .romae-choice__cue svg,
.romae-choice:focus-visible .romae-choice__cue svg { transform: translateX(3px); }

/* Escritorio: la tarjeta pasa a columna con la foto arriba.
   Va después de las reglas base a propósito: una media query no aporta
   especificidad, así que declarada antes la sobrescribiría la regla base. */
@media (min-width: 768px) {
  .romae-choice { flex-direction: column; align-items: stretch; justify-content: flex-start; }
  /* La foto ocupa todo el ancho superior; la proporción reservada evita saltos
     de layout mientras carga. */
  .romae-choice__media { width: 100%; aspect-ratio: 456 / 292; }
  .romae-choice__body { align-items: center; text-align: center; gap: .2rem; padding: 1rem 1rem 1.25rem; }
}

/* En la miniatura móvil el recorte es estrecho: se encuadra hacia la alumna,
   que en cada foto está en un lado distinto. */
@media (max-width: 767.98px) {
  .romae-choice--culiacan    .romae-choice__media img { object-position: 80% center; }
  .romae-choice--mazatlan    .romae-choice__media img { object-position: 20% center; }
  .romae-choice--guadalajara .romae-choice__media img { object-position: 22% center; }
}

.romae-choice--culiacan    { --_accent: var(--romae-turquoise); }
.romae-choice--mazatlan    { --_accent: #A9B6E4; }
.romae-choice--guadalajara { --_accent: var(--romae-pink); }

/* En pantallas pequeñas se compacta para que las tres opciones quepan sin
   que el botón flotante de WhatsApp se monte encima de la última. */
@media (max-width: 575.98px) {
  .romae-gateway__logo { height: 50px; }
  .romae-gateway__claim { margin-top: .75rem; font-size: .625rem; letter-spacing: .12em; }
  .romae-gateway__title { margin-top: .5rem; font-size: 1.5rem; }
  .romae-gateway__prompt { margin-top: 1.25rem; margin-bottom: .75rem; }
  .romae-gateway__grid { gap: .625rem; }
  .romae-choice { min-height: 86px; }
  .romae-choice__media { width: 106px; }
  .romae-choice__body { padding: .625rem .75rem; }
  .romae-choice__name { font-size: 1.25rem; }
  .romae-choice__cue { margin-top: .15rem; }
  .romae-gateway__legal { margin-top: 1rem; font-size: .75rem; }
}

.romae-gateway__legal {
  margin-top: clamp(1.25rem, 3.5vw, 2rem);
  margin-bottom: 0;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .55);
}

/* --- Indicador de que hay más contenido abajo --- */
.romae-gateway__scroll {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--romae-fg-on-dark-muted);
  font-size: .875rem; text-decoration: none;
}
.romae-gateway__scroll:hover { color: #fff; }
.romae-gateway__scroll svg { animation: romae-bob 2.4s var(--romae-ease) infinite; }
@keyframes romae-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* ==========================================================================
   Tarjetas
   ========================================================================== */

.romae-card {
  display: flex; flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--romae-border);
  border-radius: var(--romae-radius-lg);
  overflow: hidden;
  box-shadow: var(--romae-shadow-sm);
  transition: transform var(--romae-dur) var(--romae-ease), box-shadow var(--romae-dur) var(--romae-ease);
}
.romae-card:hover { transform: translateY(-4px); box-shadow: var(--romae-shadow-lg); }

/* Reserva la proporción para evitar saltos de layout (CLS) */
.romae-card__media { position: relative; flex: 0 0 auto; aspect-ratio: 4 / 3; background: var(--romae-bg-muted); }
.romae-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.romae-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--romae-space-3); }
.romae-card__title { font-size: 1.375rem; margin-bottom: .5rem; }
.romae-card__text { color: var(--romae-fg-muted); font-size: .9688rem; margin-bottom: var(--romae-space-3); }
.romae-card__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: .5rem; }

.romae-card__tag {
  position: absolute; left: 1rem; top: 1rem; z-index: 2;
  display: inline-flex; align-items: center;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: rgba(23, 27, 57, .82);
  backdrop-filter: blur(6px);
  color: #fff; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}

/* Tarjeta de campus (portada) */
.romae-campus-card { position: relative; display: block; border-radius: var(--romae-radius-lg); overflow: hidden; text-decoration: none; box-shadow: var(--romae-shadow); }
.romae-campus-card__media { aspect-ratio: 3 / 4; }
.romae-campus-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--romae-ease); }
.romae-campus-card:hover .romae-campus-card__media img { transform: scale(1.04); }
.romae-campus-card__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--romae-space-3);
  background: linear-gradient(to top, rgba(23, 27, 57, .92) 0%, rgba(23, 27, 57, .55) 40%, rgba(23, 27, 57, .08) 100%);
  color: #fff;
}
.romae-campus-card__name { font-family: var(--romae-font-display); font-size: 1.75rem; font-weight: 700; color: #fff; }
.romae-campus-card__meta { font-size: .9063rem; color: var(--romae-fg-on-dark-muted); }
.romae-campus-card__cue { display: inline-flex; align-items: center; gap: .4rem; margin-top: .75rem; font-weight: 600; font-size: .9375rem; color: var(--romae-turquoise); }
.romae-campus-card__overlay { justify-content: flex-end; min-height: 100%; }

/* ==========================================================================
   Acordeón (reemplaza el nested-accordion de Elementor)
   ========================================================================== */

.romae-accordion { border: 1px solid var(--romae-border); border-radius: var(--romae-radius); overflow: hidden; background: #fff; }
.romae-accordion__item + .romae-accordion__item { border-top: 1px solid var(--romae-border); }
.romae-accordion__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; min-height: 56px;
  padding: 1rem 1.25rem;
  background: none; border: 0;
  color: var(--romae-fg); font-family: var(--romae-font-body); font-size: 1rem; font-weight: 600; text-align: left;
  cursor: pointer;
  transition: background-color var(--romae-dur) var(--romae-ease);
}
.romae-accordion__trigger:hover { background: var(--romae-bg-muted); }
.romae-accordion__icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--romae-campus-ink); transition: transform var(--romae-dur) var(--romae-ease); }
.romae-accordion__trigger[aria-expanded="true"] .romae-accordion__icon { transform: rotate(180deg); }
.romae-accordion__panel { display: none; padding: 0 1.25rem 1.25rem; color: var(--romae-fg-muted); font-size: .9688rem; }
.romae-accordion__panel.is-open { display: block; }
.romae-accordion__panel ul { padding-left: 1.1rem; margin-bottom: 0; }
.romae-accordion__panel li + li { margin-top: .35rem; }

/* Invitación a escribir por WhatsApp cuando el dato aún no está publicado.
   Borde continuo y no discontinuo: es una vía de contacto, no un error. */
.romae-pending {
  display: flex; align-items: center; gap: .75rem;
  padding: .875rem 1rem;
  border: 1px solid var(--romae-border);
  border-radius: 10px;
  background: var(--romae-bg-muted);
  color: var(--romae-fg-muted);
  font-size: .9375rem;
}
.romae-pending svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--romae-whatsapp); }
.romae-pending a { color: var(--romae-campus-ink); font-weight: 600; }

/* ==========================================================================
   Lista de datos de contacto
   ========================================================================== */

.romae-contact-list { list-style: none; margin: 0; padding: 0; }
.romae-contact-list li { display: flex; gap: .75rem; padding-block: .5rem; }
.romae-contact-list svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--romae-turquoise); margin-top: .2rem; }
.romae-contact-list a { color: inherit; text-decoration: none; }
.romae-contact-list a:hover { text-decoration: underline; }

.romae-map { border: 0; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--romae-radius-lg); box-shadow: var(--romae-shadow); }
@media (min-width: 768px) { .romae-map { aspect-ratio: 16 / 9; } }

/* ==========================================================================
   Franja de estadísticas
   ========================================================================== */

.romae-stat { text-align: center; }
/* Sin fondo detrás: la cifra destaca por tamaño y color, en marino sobre claro
   (14.5:1). El turquesa sólo funciona sobre el marino, no sobre blanco. */
.romae-stat__num {
  font-family: var(--romae-font-display);
  font-size: clamp(2.75rem, 6vw, 4rem);
  font-weight: 700; line-height: 1; letter-spacing: -.02em;
  color: var(--romae-navy);
}
.romae-stat__label {
  font-size: .9375rem; color: var(--romae-fg-muted);
  margin-top: .5rem;
}
/* Variante para cuando la franja va sobre marino */
.romae-section--navy .romae-stat__num   { color: var(--romae-turquoise); }
.romae-section--navy .romae-stat__label { color: var(--romae-fg-on-dark-muted); }

/* Filete fino: separa las cifras del texto de arriba sin meter otro bloque de color */
.romae-stats-row {
  border-top: 1px solid var(--romae-border);
  padding-top: clamp(2rem, 5vw, 3rem);
  max-width: 52rem; margin-inline: auto;   /* si no, las cifras quedan dispersas */
}

/* ==========================================================================
   Footer
   ========================================================================== */

.romae-footer { background: var(--romae-navy-deep); color: var(--romae-fg-on-dark-muted); padding-block: var(--romae-space-5) var(--romae-space-3); }
.romae-footer h3 { color: #fff; font-family: var(--romae-font-body); font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--romae-space-2); }
.romae-footer a { color: var(--romae-fg-on-dark-muted); text-decoration: none; }
.romae-footer a:hover { color: #fff; text-decoration: underline; }
.romae-footer__claim {
  font-size: .75rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--romae-turquoise);
}
.romae-footer__list { list-style: none; margin: 0; padding: 0; }
.romae-footer__list li { padding-block: .3rem; }
.romae-footer__bottom {
  margin-top: var(--romae-space-4); padding-top: var(--romae-space-3);
  border-top: 1px solid var(--romae-border-dark);
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between;
  font-size: .875rem;
}
.romae-social { display: flex; gap: .5rem; }
.romae-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--romae-border-dark); border-radius: 50%;
  color: #fff;
  transition: background-color var(--romae-dur) var(--romae-ease), border-color var(--romae-dur) var(--romae-ease);
}
.romae-social a:hover { background: var(--romae-turquoise); border-color: var(--romae-turquoise); color: var(--romae-navy); }
.romae-social svg { width: 20px; height: 20px; }

/* ==========================================================================
   Widget flotante de WhatsApp (reemplazo del plugin tochat-be)
   ========================================================================== */

/* El contenedor no recibe toques: el panel oculto sigue ocupando espacio y, en
   móvil, tapaba el contenido de abajo (p. ej. las tarjetas de campus). */
.romae-wa { position: fixed; right: 1rem; bottom: 1rem; z-index: 1040; display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; pointer-events: none; }
.romae-wa__toggle, .romae-wa__panel.is-open { pointer-events: auto; }
@media (min-width: 768px) { .romae-wa { right: 1.5rem; bottom: 1.5rem; } }

.romae-wa__toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 56px; padding: .75rem 1.25rem;
  border: 0; border-radius: 999px;
  background: var(--romae-whatsapp); color: #fff;
  font-family: var(--romae-font-body); font-weight: 600; font-size: .9375rem;
  box-shadow: var(--romae-shadow-lg);
  cursor: pointer;
  transition: transform var(--romae-dur) var(--romae-ease);
}
.romae-wa__toggle:hover { transform: translateY(-2px); }
.romae-wa__toggle svg { width: 24px; height: 24px; }

.romae-wa__panel {
  width: min(21rem, calc(100vw - 2rem));
  background: #fff;
  border: 1px solid var(--romae-border);
  border-radius: var(--romae-radius-lg);
  box-shadow: var(--romae-shadow-lg);
  overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98);
  transition: opacity var(--romae-dur) var(--romae-ease),
              transform var(--romae-dur) var(--romae-ease),
              visibility var(--romae-dur);
}
.romae-wa__panel.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.romae-wa__head { background: var(--romae-navy); color: #fff; padding: 1rem 1.25rem; }
.romae-wa__head p { margin: 0; font-size: .9063rem; color: var(--romae-fg-on-dark-muted); }
.romae-wa__head strong { display: block; font-size: 1rem; color: #fff; margin-bottom: .2rem; }
.romae-wa__list { list-style: none; margin: 0; padding: .5rem; }
.romae-wa__list a {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem .75rem; border-radius: 12px;
  color: var(--romae-fg); text-decoration: none;
}
.romae-wa__list a:hover { background: var(--romae-bg-muted); }
.romae-wa__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.romae-wa__name { font-weight: 600; font-size: .9375rem; }
.romae-wa__hint { font-size: .8125rem; color: var(--romae-fg-muted); }

/* ==========================================================================
   Animación de entrada
   ========================================================================== */

.romae-reveal { opacity: 0; transform: translateY(18px); }
.romae-reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity 420ms var(--romae-ease), transform 420ms var(--romae-ease);
}

/* Respeta la preferencia del sistema de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .romae-reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Impresión
   ========================================================================== */

@media print {
  body { padding-top: 0; }
  .romae-header, .romae-mobile, .romae-wa, .romae-hero__media { display: none !important; }
  .romae-hero, .romae-section--navy, .romae-footer { background: #fff !important; color: #000 !important; }
}