/* ==========================================================================
   VILLAMEDIC GROUP — STYLE.CSS
   Reconstrucción del home en HTML/CSS/JS puro.
   Paleta basada en captura visual real DESKTOP del sitio.
   Dominante: ROJO #CD3433
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Paleta — rojo dominante */
  --color-rojo:            #CD3433;
  --color-rojo-oscuro:     #A82A29;
  --color-rojo-claro:      #FF4D43;

  --color-naranja:         #D56537;
  --color-naranja-oscuro:  #BB5429;

  --color-amarillo:        #FFC72C;
  --color-amarillo-oscuro: #E5AE00;

  --color-negro:           #000000;
  --color-gris-oscuro:     #2C2C2C;
  --color-gris:            #6B6B6B;
  --color-gris-medio:      #999999;
  --color-gris-claro:      #F5F5F5;
  --color-gris-borde:      #E5E5E5;
  --color-gris-numero:     #D0D0D0;

  --color-blanco:          #FFFFFF;
  --color-fondo-suave:     #FFF8F3;

  --color-whatsapp:        #25D366;
  --color-whatsapp-oscuro: #1EBE5B;

  /* Tipografías */
  --font-base:    "GorditaRegular", system-ui, sans-serif;
  --font-medium:  "GorditaMedium", system-ui, sans-serif;
  --font-bold:    "GorditaBold", system-ui, sans-serif;
  --font-black:   "GorditaBlack", system-ui, sans-serif;

  /* Tamaños */
  --topbar-height: 56px;
  --mainbar-height: 76px;
  --header-height: calc(var(--topbar-height) + var(--mainbar-height));
  --container-max: 1240px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

  --transition: 0.25s ease;
}
@media (max-width: 1024px) {
  :root {
    --topbar-height: 0px;       /* topbar oculto en tablet/móvil */
    --mainbar-height: 60px;
  }
}

/* ==========================================================================
   2. FONT-FACE
   ========================================================================== */
@font-face { font-family: "GorditaBlack";   src: url("../assets/fonts/Gordita-Black.woff")   format("woff"); font-weight: 900; font-display: swap; }
@font-face { font-family: "GorditaBold";    src: url("../assets/fonts/Gordita-Bold.woff")    format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "GorditaMedium";  src: url("../assets/fonts/Gordita-Medium.woff")  format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "GorditaRegular"; src: url("../assets/fonts/Gordita-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "GorditaLight";   src: url("../assets/fonts/Gordita-Light.woff")   format("woff"); font-weight: 300; font-display: swap; }

/* ==========================================================================
   3. RESET
   ========================================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-gris-oscuro);
  background: var(--color-blanco);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.aside-open { overflow: hidden; }

img, picture, svg { display: block; max-width: 100%; height: auto; }

ul, ol { list-style: none; }

a { color: inherit; text-decoration: none; transition: color var(--transition); }

button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }

input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-bold); line-height: 1.2; font-weight: 700; }

/* ==========================================================================
   4. UTILITIES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 600px) { .container { padding: 0 18px; } }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-medium);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  transition: all var(--transition);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}
.btn--primary {
  background: var(--color-rojo);
  color: var(--color-blanco);
  box-shadow: 0 3px 10px rgba(205, 52, 51, 0.25);
}
/* Sin translateY en el hover: el botón es el elemento que detecta el :hover, así que
   moverlo lo sacaba de debajo del cursor cuando este entraba por los 2px del borde →
   se perdía el hover → volvía a su sitio → lo recuperaba… un bucle que se veía como
   parpadeo del puntero. El feedback lo dan el color y la sombra, que no mueven nada. */
.btn--primary:hover {
  background: var(--color-rojo-oscuro);
  box-shadow: 0 6px 16px rgba(205, 52, 51, 0.35);
  color: var(--color-blanco);
}
.btn--white {
  background: var(--color-blanco);
  color: var(--color-rojo);
  font-family: var(--font-bold);
}
.btn--white:hover {
  background: var(--color-negro);
  color: var(--color-blanco);
}

/* ==========================================================================
   6. HEADER (2 filas)
   ========================================================================== */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
}

/* Fila 1 — barra negra */
.topbar {
  background: var(--color-negro);
  height: var(--topbar-height);
  display: flex;
  align-items: center;
}
.topbar__container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.topbar__buttons {
  display: flex;
  gap: 10px;
}
.topbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: var(--color-rojo);
  color: var(--color-blanco);
  border-radius: var(--radius-pill);
  font-family: var(--font-medium);
  font-size: 14px;
  letter-spacing: 0.3px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: all 0.25s ease;
}
.topbar__btn:hover {
  background: #ffffff;
  color: var(--color-rojo);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35),
              0 0 0 2px rgba(255, 255, 255, 0.20);
  transform: translateY(-1px);
}
.topbar__btn img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
  transition: filter 0.25s ease;
}
.topbar__btn:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(85%)
          saturate(2500%) hue-rotate(345deg) brightness(95%) contrast(95%);
}
@media (max-width: 1024px) {
  .topbar { display: none; }
}

/* Fila 2 — barra principal roja */
.mainbar {
  background: var(--color-rojo);
  height: var(--mainbar-height);
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}
.mainbar__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 100%;
}

.mainbar__logo img {
  height: 44px;
  width: auto;
  object-fit: contain;
}
@media (max-width: 768px) {
  .mainbar__logo img { height: 36px; }
}

/* Nav desktop — el nav crece (flex: 1) para llenar el espacio entre el
   logo y el borde derecho. Dentro, los items se centran (justify-content)
   y el último (Contáctanos) se empuja al extremo con margin-left: auto. */
.mainbar__nav {
  flex: 1;
}
.mainbar__nav > ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 4vw, 4rem);
  width: 100%;
}
.mainbar__nav > ul > li:last-child {
  margin-left: auto;
}
.mainbar__nav > ul > li > a {
  color: var(--color-blanco);
  font-family: var(--font-medium);
  font-size: 17px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 0;
  transition: color var(--transition);
}
.mainbar__nav > ul > li > a:hover { color: var(--color-amarillo); }
.mainbar__nav .caret {
  display: inline-flex;
  align-items: center;
  margin-left: 0.15em;
}
.mainbar__nav .caret svg {
  transition: transform var(--transition);
}
.mainbar__nav .has-dropdown:hover .caret svg { transform: rotate(180deg); }

/* Botón Contáctanos amarillo */
.btn-contactanos {
  background: var(--color-amarillo) !important;
  color: var(--color-negro) !important;
  padding: 11px 26px !important;
  font-size: 17px !important;
  border-radius: var(--radius-pill);
  font-family: var(--font-bold) !important;
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.20),
              inset 0 1px 0 rgba(255, 255, 255, 0.30);
  transition: all 0.25s ease;
}
.btn-contactanos:hover {
  background: #ffffff !important;
  color: var(--color-rojo) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.30),
              0 0 0 2px rgba(255, 193, 7, 0.40);
  transform: translateY(-1px);
}

/* Dropdown desktop */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 240px;
  background: var(--color-blanco);
  border-radius: var(--radius-md);
  padding: 14px 0;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 6;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dropdown li a {
  display: block;
  padding: 10px 22px;
  font-size: 12px;
  color: var(--color-gris-oscuro);
  font-family: var(--font-medium);
  transition: background var(--transition), color var(--transition);
}
.dropdown li a:hover {
  background: var(--color-gris-claro);
  color: var(--color-rojo);
}

/* Burger */
.mainbar__burger {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: var(--radius-sm);
}
.mainbar__burger span {
  display: block;
  width: 26px;
  height: 2.5px;
  background: var(--color-blanco);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.mainbar__burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mainbar__burger.is-active span:nth-child(2) { opacity: 0; }
.mainbar__burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
  .mainbar__nav { display: none; }
  .mainbar__burger { display: flex; }

  /* En móvil/tablet el nav está oculto, así que solo quedan logo +
     hamburguesa. El bloque "HEADER LAYOUT" (línea ~1769) convierte el
     contenedor en display:grid (auto 1fr): la hamburguesa cae al inicio
     de la 2ª columna, pegada al logo, con el hueco vacío a su derecha.
     Forzamos flex + space-between para enviarla al borde derecho.
     El prefijo .header eleva la especificidad (0,2,0) para ganarle a las
     reglas de grid y de padding que aparecen DESPUÉS en el archivo
     (misma clase, 0,1,0). padding-right:8px deja las rayas a ~17px del
     borde; el padding-left responsive del logo se conserva. */
  .header .mainbar__container {
    display: flex;
    justify-content: space-between;
    padding-right: 8px;
  }
}

/* ==========================================================================
   7. ASIDE (mobile drawer)
   ========================================================================== */
.aside {
  position: fixed;
  top: 0; right: -100%;
  height: 100vh;
  width: min(380px, 90vw);
  background: var(--color-rojo-oscuro);
  z-index: 60;
  transition: right 0.4s ease;
  padding: calc(var(--mainbar-height) + 24px) 28px 28px;
  overflow-y: auto;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.2);
}
.aside.is-open { right: 0; }

.aside-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.aside-backdrop.is-visible { opacity: 1; pointer-events: auto; }

.aside__inner { display: flex; flex-direction: column; gap: 28px; height: 100%; }

.aside__close {
  position: absolute; top: 18px; right: 18px;
  width: 38px; height: 38px;
  font-size: 28px;
  color: var(--color-blanco);
  border-radius: 50%;
  transition: background var(--transition);
}
.aside__close:hover { background: rgba(255, 255, 255, 0.15); }

.aside__nav ul { display: flex; flex-direction: column; gap: 18px; }
.aside__nav li a {
  color: var(--color-blanco);
  font-family: var(--font-medium);
  font-size: 19px;
  display: block;
  padding: 6px 0;
}
.aside__nav li a:hover { color: var(--color-amarillo); }
.aside__nav li a.btn-contactanos { width: fit-content; }

.aside__buttons {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.aside__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  background: transparent;
  color: var(--color-blanco);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-pill);
  text-align: center;
  font-family: var(--font-medium);
  font-size: 14px;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.aside__btn img {
  width: 14px;
  height: 14px;
  filter: brightness(0) invert(1);
  transition: filter var(--transition);
}
.aside__btn:hover {
  background: var(--color-amarillo);
  border-color: var(--color-amarillo);
  color: var(--color-negro);
}
/* Iconos SVG son <img> con filter blanco; al hover los pasamos
   a negro con filter:brightness(0) (sin invert). */
.aside__btn:hover img {
  filter: brightness(0);
}

/* ==========================================================================
   8. HERO
   ========================================================================== */
.hero {
  position: relative;
  padding: calc(var(--header-height) + 60px) 0 80px;
  overflow: hidden;
  color: var(--color-blanco);
  background: var(--color-negro);
  min-height: 600px;
}
.hero__bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.55;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(205,52,51,0.4) 100%);
  z-index: 1;
}
.hero__container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 60px;
  min-height: calc(600px - var(--header-height) - 140px);
  justify-content: space-between;
}

.hero__content { max-width: 720px; }
.hero__title {
  font-family: var(--font-bold);
  font-size: 54px;
  line-height: 1.1;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  margin-bottom: 18px;
}
.hero__title strong {
  font-family: var(--font-black);
  color: var(--color-amarillo);
}
.hero__lead {
  font-family: var(--font-medium);
  font-size: 19px;
  margin-bottom: 28px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.hero__stats {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.hero__stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero__stat-num {
  font-family: var(--font-black);
  font-size: 38px;
  line-height: 1;
  color: var(--color-amarillo);
}
.hero__stat-text {
  font-size: 14px;
  letter-spacing: 0.3px;
  color: var(--color-blanco);
  opacity: 0.92;
}

@media (max-width: 980px) {
  .hero__title { font-size: 38px; }
}
@media (max-width: 600px) {
  .hero { padding: calc(var(--header-height) + 40px) 0 60px; min-height: 500px; }
  .hero__title { font-size: 30px; }
  .hero__lead { font-size: 16px; }
  .hero__stat-num { font-size: 30px; }
  .hero__stats { gap: 18px; }
}

/* ==========================================================================
   9. ANATOMÍA
   ========================================================================== */
.anatomia {
  padding: 100px 0;
  background: var(--color-blanco);
}
.anatomia .container {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: flex-start;
}

.anatomia__intro { display: flex; flex-direction: column; gap: 24px; }
.anatomia__brand { display: flex; align-items: center; gap: 12px; }
.anatomia__icon { width: 36px; height: 36px; object-fit: contain; }
.anatomia__brand .anatomia__icon { width: 64px; height: 64px; }
.anatomia__eyebrow {
  font-family: var(--font-medium);
  font-size: 14px;
  color: var(--color-gris);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.anatomia__eyebrow strong {
  color: var(--color-rojo);
  font-family: var(--font-bold);
}
.anatomia__title {
  font-family: var(--font-bold);
  font-size: 38px;
  line-height: 1.15;
  color: var(--color-gris-oscuro);
}
.anatomia__intro .btn { align-self: flex-start; }

.valores {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
.valor {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 24px;
  align-items: start;
}
.valor__num {
  grid-row: 1 / span 2;
  grid-column: 1;
  margin-top: -10px;
  font-family: var(--font-black);
  font-size: 90px;
  line-height: 1;
  color: var(--color-gris-numero);
  letter-spacing: -2px;
}
.valor__title {
  grid-column: 2;
  font-family: var(--font-bold);
  font-size: 22px;
  color: var(--color-gris-oscuro);
  margin-bottom: 8px;
}
.valor__text {
  grid-column: 2;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-gris);
}

@media (max-width: 980px) {
  .anatomia .container { grid-template-columns: 1fr; gap: 40px; }
  .anatomia__title { font-size: 30px; }
}
@media (max-width: 600px) {
  .anatomia { padding: 70px 0; }
  .valor { column-gap: 16px; }
  .valor__num { font-size: 64px; }
  .valor__title { font-size: 19px; }
}

/* ==========================================================================
   10. CURSOS
   ========================================================================== */
.cursos {
  padding: 100px 0;
  background: var(--color-gris-claro);
}

.cursos__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 40px;
}
.cursos__title {
  font-family: var(--font-black);
  font-size: 52px;
  color: var(--color-gris-oscuro);
  line-height: 1;
}

.cursos__tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab {
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  background: var(--color-blanco);
  border: 1px solid var(--color-gris-borde);
  font-family: var(--font-medium);
  font-size: 14px;
  color: var(--color-gris);
  transition: all var(--transition);
}
.tab:hover {
  border-color: var(--color-rojo);
  color: var(--color-rojo);
}
.tab.is-active {
  background: var(--color-rojo);
  border-color: var(--color-rojo);
  color: var(--color-blanco);
  box-shadow: 0 4px 12px rgba(205, 52, 51, 0.25);
}

.cursos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 24px;
}

.curso-card {
  position: relative;
  background: var(--color-blanco);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}
.curso-card.is-hidden { display: none; }
.curso-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.curso-card__badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-rojo);
  color: var(--color-blanco);
  font-family: var(--font-medium);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.curso-card__badge--soon { background: var(--color-naranja); }

.curso-card__img {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--color-gris-claro);
}
.curso-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.curso-card:hover .curso-card__img img { transform: scale(1.04); }

.curso-card__body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.curso-card__category {
  font-size: 12px;
  font-family: var(--font-medium);
  color: var(--color-rojo);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.curso-card__title {
  font-family: var(--font-bold);
  font-size: 20px;
  color: var(--color-gris-oscuro);
  line-height: 1.2;
}
.curso-card__detail {
  font-size: 13px;
  color: var(--color-gris);
  font-family: var(--font-medium);
}
.curso-card__date {
  font-size: 13px;
  color: var(--color-gris-medio);
}
.curso-card__date strong {
  color: var(--color-gris-oscuro);
  font-family: var(--font-bold);
}
.curso-card__btn {
  margin-top: auto;
  align-self: flex-start;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  background: var(--color-rojo);
  color: var(--color-blanco);
  font-family: var(--font-medium);
  font-size: 14px;
  transition: all var(--transition);
}
.curso-card__btn:hover {
  background: var(--color-rojo-oscuro);
  color: var(--color-blanco);
}

@media (max-width: 600px) {
  .cursos { padding: 70px 0; }
  .cursos__title { font-size: 36px; }
}

/* ==========================================================================
   11. BANNER ENAM
   ========================================================================== */
.banner-enam {
  padding: 70px 0;
  background: var(--color-rojo);
  color: var(--color-blanco);
  position: relative;
  overflow: hidden;
}
.banner-enam__container {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
}
.banner-enam__eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.2);
  font-family: var(--font-medium);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.banner-enam__title {
  font-family: var(--font-black);
  font-size: 64px;
  line-height: 1;
  margin-bottom: 16px;
  letter-spacing: -1px;
}
.banner-enam__text {
  font-size: 18px;
  line-height: 1.5;
  max-width: 460px;
  margin-bottom: 28px;
  opacity: 0.95;
}
.banner-enam__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 4/3;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.1);
}
@media (max-width: 900px) {
  .banner-enam__container { grid-template-columns: 1fr; }
  .banner-enam__title { font-size: 44px; }
  /* Móvil/tablet: la imagen se muestra apilada bajo el texto, a ancho completo
     de la columna (hereda aspect-ratio 4/3 + object-fit: cover de la regla base). */
  .banner-enam__media { display: block; }
  .banner-enam__media img { margin-top: 8px; }
}

/* === OVERRIDE banner-enam (RESIDENTADO MÉDICO EXTREMO 2026) ===
   Override posterior, no toca las reglas originales in-place. Solo afecta a
   .banner-enam, que es única de la home.
   Imagen COMPLETA sin recorte: la imagen real es cuadrada (1080×1080), pero
   la caja base es 4/3 + cover → recortaba el texto inferior "EXTREMO". Igualo
   la caja a 1/1 y uso contain para que se vea entera, sin deformar ni franjas
   (a 1/1 contain y cover coinciden porque caja e imagen tienen igual ratio). */
.banner-enam__media img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
/* Se quitó el botón "Ver más" de esta sección: el último elemento del bloque
   de texto es ahora el párrafo (margin-bottom:28px, que separaba del botón).
   Anulo ese margen colgante para que el bloque (badge + título + párrafo)
   quede limpio, sin espacio vacío raro debajo. */
.banner-enam__content > :last-child { margin-bottom: 0; }

/* ==========================================================================
   12. TESTIMONIOS (fondo rojo)
   ========================================================================== */
.testimonios {
  padding: 100px 0;
  background: linear-gradient(135deg, var(--color-naranja) 0%, var(--color-naranja-oscuro) 100%);
  color: var(--color-blanco);
}
.testimonios__container {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: center;
}

.testimonios__intro { display: flex; flex-direction: column; gap: 16px; }
.testimonios__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-medium);
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.9;
}
.testimonios__eyebrow-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
.testimonios__title {
  font-family: var(--font-bold);
  font-size: 40px;
  line-height: 1.1;
}
.testimonios__lead {
  font-family: var(--font-medium);
  font-size: 18px;
  opacity: 0.95;
}
.testimonios__counter {
  font-family: var(--font-medium);
  font-size: 16px;
  margin-top: 8px;
}
.testimonios__counter strong {
  font-family: var(--font-black);
  font-size: 26px;
  display: block;
  margin-bottom: 2px;
}
.testimonios__intro .btn {
  background: var(--color-blanco) !important;
  color: var(--color-rojo) !important;
  font-family: var(--font-bold);
  align-self: flex-start;
  margin-top: 12px;
}
.testimonios__intro .btn:hover {
  background: var(--color-negro) !important;
  color: var(--color-blanco) !important;
}

/* Carrusel de testimonios: una tarjeta a la vez, deslizamiento con translateX.
   El slide reutiliza .testimonio tal cual; aquí solo se controla el viewport,
   el track y los controles (flechas + dots) acordes a la marca. */
.testimonios__carousel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.testimonios__viewport {
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.testimonios__track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.testimonios__track > .testimonio {
  flex: 0 0 100%;
  min-width: 0;
}
.testimonios__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.testimonios__arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-blanco);
  border: 0;
  color: var(--color-rojo);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.testimonios__arrow:hover {
  background: var(--color-rojo);
  color: var(--color-blanco);
  transform: scale(1.05);
}
.testimonios__arrow:active {
  transform: scale(0.95);
}
.testimonios__arrow:focus-visible {
  outline: 2px solid var(--color-blanco);
  outline-offset: 2px;
}
.testimonios__arrow svg {
  width: 22px;
  height: 22px;
}
.testimonios__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.testimonios__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.testimonios__dot.is-active {
  background: var(--color-blanco);
  transform: scale(1.3);
}

.testimonio {
  background: var(--color-blanco);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 260px 1fr;
  align-items: stretch;
  min-height: 340px;
  overflow: hidden;
  color: var(--color-gris-oscuro);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
}
.testimonio__media {
  height: 100%;
}
.testimonio__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-top-left-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
  background: var(--color-gris-borde);
}
.testimonio__body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.testimonio__rating { display: flex; gap: 4px; margin-bottom: 14px; }
.testimonio__rating img { width: 20px; height: 20px; }

.testimonio__quote {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-gris);
  font-style: italic;
  margin-bottom: 16px;
}

.testimonio__author { display: flex; flex-direction: column; }
.testimonio__name {
  font-family: var(--font-bold);
  font-size: 17px;
  color: var(--color-gris-oscuro);
}
.testimonio__role {
  font-size: 13px;
  color: var(--color-rojo);
  font-family: var(--font-medium);
}

@media (max-width: 980px) {
  .testimonios__container { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 700px) {
  .testimonios { padding: 70px 0; }
  .testimonios__title { font-size: 30px; }
  /* Móvil: se conserva el layout de DOS COLUMNAS de escritorio (imagen | texto),
     solo escalado al ancho del celular. La imagen mantiene object-fit: cover y
     las esquinas izquierdas (heredadas de la regla base). Se reducen fuentes y
     padding para que el texto entre sin desbordar. */
  .testimonio {
    grid-template-columns: 42% 1fr;
    min-height: 240px;
  }
  .testimonio__body {
    padding: 18px;
  }
  .testimonio__rating {
    margin-bottom: 8px;
  }
  .testimonio__rating img { width: 16px; height: 16px; }
  .testimonio__quote {
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 10px;
  }
  .testimonio__name { font-size: 15px; }
  .testimonio__role { font-size: 12px; }
  .testimonios__arrow { width: 40px; height: 40px; }
  .testimonios__arrow svg { width: 20px; height: 20px; }
}

/* ==========================================================================
   13. INSCRIPCIONES
   ========================================================================== */
.inscripciones {
  padding: 100px 0;
  background: var(--color-blanco);
}
.inscripciones__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.inscripciones__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 4/3;
  object-fit: cover;
  background: var(--color-gris-claro);
}

.inscripciones__content { display: flex; flex-direction: column; gap: 18px; }
.inscripciones__title {
  font-family: var(--font-bold);
  font-size: 38px;
  line-height: 1.15;
  color: var(--color-gris-oscuro);
}
.inscripciones__subtitle {
  font-family: var(--font-medium);
  font-size: 19px;
  color: var(--color-gris);
}
.inscripciones__subtitle strong { color: var(--color-rojo); font-family: var(--font-bold); }

.pasos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0;
}
.paso {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  background: linear-gradient(90deg, var(--color-naranja) 0%, var(--color-rojo) 100%);
  color: var(--color-blanco);
  border-radius: var(--radius-pill);
  font-family: var(--font-medium);
  transition: all var(--transition);
  box-shadow: 0 4px 14px rgba(205, 52, 51, 0.18);
}
.paso:hover {
  transform: translateX(6px);
  box-shadow: 0 6px 20px rgba(205, 52, 51, 0.30);
  color: var(--color-blanco);
}
.paso__num {
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  font-family: var(--font-black);
  font-size: 18px;
  flex-shrink: 0;
}
.paso__label {
  font-family: var(--font-bold);
  font-size: 17px;
  margin-right: auto;
}
.paso__text {
  font-size: 14px;
  opacity: 0.95;
  display: none;
}
@media (min-width: 600px) {
  .paso__text { display: inline; }
}
.inscripciones__content > .btn { align-self: flex-start; margin-top: 6px; }

@media (max-width: 980px) {
  .inscripciones__container { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  .inscripciones { padding: 70px 0; }
  .inscripciones__title { font-size: 28px; }
}

/* ==========================================================================
   14. FORMULARIO
   ========================================================================== */
.formulario {
  position: relative;
  padding: 100px 0;
  background: var(--color-negro);
  overflow: hidden;
}
.formulario__bg { position: absolute; inset: 0; z-index: 0; }
.formulario__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.4;
}
.formulario::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.8) 100%);
  z-index: 1;
}
.formulario__container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: end;
}

.form {
  background: var(--color-blanco);
  border-radius: var(--radius-lg);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 560px;
  margin-left: auto;
  box-shadow: var(--shadow-lg);
}
.form__title {
  font-family: var(--font-bold);
  font-size: 26px;
  line-height: 1.2;
  color: var(--color-gris-oscuro);
}
.form__title strong {
  color: var(--color-rojo);
  font-family: var(--font-black);
}
.form__subtitle {
  font-family: var(--font-medium);
  font-size: 14px;
  color: var(--color-gris);
  margin-top: -8px;
  margin-bottom: 8px;
}

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form__field { display: flex; flex-direction: column; gap: 6px; }
.form__field--full { grid-column: 1 / -1; }
.form__field > span {
  font-family: var(--font-medium);
  font-size: 13px;
  color: var(--color-gris-oscuro);
}
.form__field input,
.form__field select,
.form__field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--color-gris-borde);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: 14px;
  background: var(--color-blanco);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  outline: none;
  border-color: var(--color-rojo);
  box-shadow: 0 0 0 3px rgba(205, 52, 51, 0.15);
}
.form__field textarea { resize: vertical; min-height: 90px; }

.form__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--color-gris);
  line-height: 1.4;
  cursor: pointer;
}
.form__checkbox input { margin-top: 3px; accent-color: var(--color-rojo); }
.form__checkbox a { color: var(--color-rojo); text-decoration: underline; }

.form__submit { margin-top: 6px; align-self: flex-start; }
.form__feedback { font-size: 13px; min-height: 18px; }
.form__feedback.is-success { color: #1B9E47; }
.form__feedback.is-error { color: var(--color-rojo); }

@media (max-width: 700px) {
  .form { padding: 24px; }
  .form__row { grid-template-columns: 1fr; }
  .form__title { font-size: 22px; }
}

/* ==========================================================================
   15. FOOTER (fondo rojo, 4 columnas)
   ========================================================================== */
.footer {
  background: var(--color-rojo);
  color: var(--color-blanco);
}

.footer__container {
  display: grid;
  grid-template-columns: 1.1fr 0.8fr 1.1fr 1.3fr;
  gap: 40px;
  padding: 70px 24px 40px;
}

.footer__brand .footer__logo {
  height: 50px;
  width: auto;
  margin-bottom: 18px;
  filter: brightness(0) invert(1);
}
.footer__desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  max-width: 280px;
}
.footer__desc strong { color: var(--color-blanco); font-family: var(--font-bold); }

.footer__title {
  font-family: var(--font-bold);
  font-size: 14px;
  letter-spacing: 1.5px;
  color: var(--color-blanco);
  margin-bottom: 18px;
}

.footer__links { display: flex; flex-direction: column; gap: 10px; }
.footer__links a {
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  transition: color var(--transition);
}
.footer__links a:hover { color: var(--color-amarillo); }

.footer__contact { display: flex; flex-direction: column; gap: 12px; }
.footer__contact li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.45;
}
.footer__contact li img {
  width: 16px; height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  filter: brightness(0) invert(1);
}
.footer__contact a { color: inherit; transition: color var(--transition); }
.footer__contact a:hover { color: var(--color-amarillo); }

@media (max-width: 1024px) {
  .footer__container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .footer__container { grid-template-columns: 1fr; gap: 32px; padding: 50px 18px 30px; }
}

/* Footer bottom */
.footer__bottom {
  background: rgba(0, 0, 0, 0.18);
  padding: 22px 0;
}
.footer__bottom-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.footer__social {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.footer__social > span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-medium);
}
.footer__social ul { display: flex; gap: 10px; }
.footer__social a {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transition: background var(--transition), transform var(--transition);
}
.footer__social a:hover {
  background: var(--color-amarillo);
  transform: translateY(-2px);
}
.footer__social img { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.footer__social a:hover img { filter: none; }

.footer__legal {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
  flex-wrap: wrap;
}
.footer__copyright { font-family: var(--font-medium); }
.footer__legal a { color: rgba(255, 255, 255, 0.92); transition: color var(--transition); }
.footer__legal a:hover { color: var(--color-amarillo); }

@media (max-width: 700px) {
  .footer__bottom-container { flex-direction: column; text-align: center; }
}

/* ==========================================================================
   16. WHATSAPP FLOAT (bottom-RIGHT)
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--color-whatsapp);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);
  transition: transform var(--transition), background var(--transition);
  animation: wa-pulse 2.4s infinite;
}
.whatsapp-float:hover {
  background: var(--color-whatsapp-oscuro);
  transform: scale(1.06);
  animation: none;
}
.whatsapp-float svg { width: 32px; height: 32px; }

@keyframes wa-pulse {
  0%   { box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4), 0 0 0 0   rgba(37, 211, 102, 0.5); }
  70%  { box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4), 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4), 0 0 0 0   rgba(37, 211, 102, 0); }
}

@media (max-width: 600px) {
  .whatsapp-float { width: 52px; height: 52px; right: 16px; bottom: 16px; }
  .whatsapp-float svg { width: 28px; height: 28px; }
}

/* ================================================
   HERO SLIDER — actualizado el 2026-05-05
   Reemplaza visualmente el hero estático (.hero__*).
   Usa tokens existentes: --color-rojo, --color-amarillo, --color-blanco,
   --font-bold, --font-black, --font-medium, --font-base, --radius-pill,
   --container-max, --header-height. No introduce variables nuevas.
   ================================================ */

/* Override de section.hero para neutralizar padding/background/min-height
   heredados de la regla .hero original (líneas 409-416). NO modifica esa
   regla; la sobrescribe con mayor especificidad (1 elemento + 1 clase). */
section.hero {
  padding: 0;
  background: transparent;
  min-height: 0;
  margin: 0;
}

/* Contenedor principal del slider — fluye dentro de .hero existente */
.hero-slider {
  position: relative;
  display: block;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
}

/* Viewport: usa CSS Grid para apilar los slides en la misma celda
   (todos comparten grid-area 1/1, así el viewport crece con el más alto) */
.hero-slider__viewport {
  display: grid;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

/* Cada slide ocupa la misma celda; solo el activo es visible */
.hero-slider__slide {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  width: 100%;
  min-height: 100vh;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.7s ease;
}
.hero-slider__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

/* Imagen de fondo del slide */
.hero-slider__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.hero-slider__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Overlay degradado naranja-marrón (más oscuro a la izquierda).
   Opacidad muy reducida (acumulado ~65-80% vs original) para que
   las imágenes del slider se vean naturales. La legibilidad del
   texto se compensa con text-shadow doble en .hero-slider__title. */
.hero-slider__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(180, 70, 30, 0.65)  0%,
    rgba(180, 70, 30, 0.60) 20%,
    rgba(180, 70, 30, 0.50) 35%,
    rgba(180, 70, 30, 0.35) 50%,
    rgba(180, 70, 30, 0.20) 60%,
    rgba(180, 70, 30, 0.10) 70%,
    rgba(180, 70, 30, 0.05) 80%,
    rgba(180, 70, 30, 0)    90%,
    rgba(180, 70, 30, 0)    100%
  );
}

/* Container del contenido del slide — full-bleed sobre todo el viewport,
   con padding lateral responsive (24px en mobile → 64px en pantallas grandes)
   para que el contenido nunca quede pegado al borde absoluto. La variable
   --container-max NO se modifica; aquí localmente se anula con "none". */
.hero-slider__container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: calc(var(--header-height, 140px) + 60px) clamp(1.5rem, 4vw, 4rem) 130px;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Contenido textual del slide */
.hero-slider__content {
  max-width: min(70%, 920px);
  color: var(--color-blanco);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Título — Gordita Bold con strong en Gordita Black + amarillo.
   Doble text-shadow (halo difuso + sombra cercana) para legibilidad
   sobre fondos variables ahora que el overlay es muy sutil. El strong
   amarillo hereda automáticamente ambas sombras (text-shadow es
   inheritable). */
.hero-slider__title {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 4rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-blanco);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.5);
  margin: 0;
}
.hero-slider__title strong {
  font-family: var(--font-black);
  color: var(--color-amarillo);
  font-weight: 900;
}

/* Subtítulo — Gordita base. Sombra reforzada (blur 8px, alpha 0.5)
   para mantener legibilidad con overlay reducido. */
.hero-slider__subtitle {
  font-family: var(--font-base);
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  line-height: 1.5;
  color: var(--color-blanco);
  margin: 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

/* CTA "Empieza" — fondo rojo, redondeado pill */
.hero-slider__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 14px 32px;
  background: var(--color-rojo);
  color: var(--color-blanco);
  border-radius: var(--radius-pill);
  font-family: var(--font-medium);
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(205, 52, 51, 0.15);
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.hero-slider__cta:hover {
  background: var(--color-rojo-oscuro);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(205, 52, 51, 0.45);
  color: var(--color-blanco);
}

/* Bloques (stats y columnas) — fila horizontal forzada en desktop */
.hero-slider__blocks {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 3rem;
  margin-top: 12px;
}
.hero-slider__stat,
.hero-slider__column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
  max-width: 280px;
}

/* Slide 1 — Stats: número grande blanco */
.hero-slider__stat-num {
  font-family: var(--font-black);
  font-weight: 900;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1;
  color: var(--color-blanco);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

/* Slides 2-4 — Columns: título mayúsculas */
.hero-slider__column-title {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 1.4rem;
  text-transform: uppercase;
  color: var(--color-blanco);
  letter-spacing: 0.5px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  margin: 0;
}

/* Línea amarilla compartida (3px x 60px) bajo número o título */
.hero-slider__stat-line,
.hero-slider__column-line {
  width: 60px;
  height: 3px;
  background: var(--color-amarillo);
  border: none;
  margin: 4px 0 0;
}

/* Descripciones bajo la línea */
.hero-slider__stat-desc,
.hero-slider__column-desc {
  font-family: var(--font-base);
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--color-blanco);
  margin: 0;
  opacity: 0.95;
}

/* Controles (flechas + dots) abajo a la izquierda */
.hero-slider__controls {
  position: absolute;
  bottom: 36px;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}
.hero-slider__arrows {
  display: flex;
  gap: 10px;
}
.hero-slider__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: var(--color-blanco);
  font-family: var(--font-bold);
  font-size: 1.6rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.hero-slider__arrow:hover {
  background: rgba(255, 255, 255, 0.32);
  border-color: rgba(255, 255, 255, 0.85);
}
.hero-slider__arrow:focus-visible {
  outline: 2px solid var(--color-amarillo);
  outline-offset: 3px;
}

/* Indicadores tipo barrita */
.hero-slider__dots {
  display: flex;
  gap: 8px;
}
.hero-slider__dot {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.7);
  border: none;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transition: background 0.25s ease, width 0.25s ease;
}
.hero-slider__dot:hover { background: rgba(255, 255, 255, 0.7); }
.hero-slider__dot.is-active {
  background: var(--color-rojo);
  width: 48px;
}
.hero-slider__dot:focus-visible {
  outline: 2px solid var(--color-amarillo);
  outline-offset: 3px;
}

/* Responsive */
@media (max-width: 1024px) {
  .hero-slider__content { max-width: 80%; }
}
@media (max-width: 768px) {
  .hero-slider,
  .hero-slider__viewport,
  .hero-slider__slide { min-height: 620px; }
  .hero-slider__content { max-width: 100%; }
  .hero-slider__title { font-size: clamp(2rem, 7vw, 3rem); }
  .hero-slider__blocks { flex-direction: column; gap: 18px; margin-top: 8px; }
  .hero-slider__stat,
  .hero-slider__column { max-width: 100%; }
}
@media (max-width: 600px) {
  .hero-slider__container { padding: calc(var(--header-height) + 32px) 18px 110px; }
  .hero-slider__controls { bottom: 24px; padding: 0 18px; }
  .hero-slider__column-title { font-size: 1.2rem; }
  .hero-slider__subtitle { font-size: 1rem; }
}

/* prefers-reduced-motion: sin transición fade ni autoplay (autoplay lo apaga el JS) */
@media (prefers-reduced-motion: reduce) {
  .hero-slider__slide { transition: none; }
}

/* ================================================
   LOGO HEADER — logo combinado (LOGO.png)
   actualizado el 2026-05-05
   El <a class="mainbar__logo"> ahora contiene un único <img>
   con clase .mainbar__logo-img que combina fénix + texto
   VillaMedic en una sola pieza (361x81 px nativo).
   ================================================ */
.mainbar__logo {
  display: block;
}

/* Selector con elemento (img.) para que la especificidad (0,1,1)
   iguale a la regla original .mainbar__logo img de la línea 224
   (que define 44px / 36px). Como esta regla viene después en el
   archivo, gana por source-order. La regla original NO se toca. */
img.mainbar__logo-img {
  height: 56px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 768px) {
  img.mainbar__logo-img { height: 42px; }
}

/* ================================================
   HEADER TRANSPARENTE — al cargar (scroll < 50px) sin fondo
   para que se vea el slider; al hacer scroll recupera sus
   colores sólidos. La clase .header--scrolled la maneja
   main.js sección 2 (threshold = 50px).
   añadido el 2026-05-05
   ================================================ */

/* Transición fade entre estados (selector con especificidad mayor
   que las reglas originales para añadir la transition sin tocarlas) */
header.header {
  transition: background-image 0.3s ease;
}
header.header .topbar,
header.header .mainbar {
  transition: background-color 0.3s ease, background-image 0.3s ease;
}

/* Estado inicial: gradiente UNIFICADO sobre TODO el header
   (cubre topbar + mainbar como una sola pieza, sin escalón visual) */
header.header:not(.header--scrolled) {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.20) 60%,
    rgba(0, 0, 0, 0)    100%
  );
}

/* Topbar y mainbar transparentes; el gradiente lo aporta el header padre.
   Anulamos también la box-shadow del mainbar (línea 214: 0 2px 8px rgba(0,0,0,0.10))
   cuando el header está transparente — esa sombra creaba una "línea horizontal
   sutil" sobre el slider en estado transparente. La sombra se restaura
   automáticamente en estado scroll por la regla original. */
header.header:not(.header--scrolled) .topbar {
  background-color: transparent;
}
header.header:not(.header--scrolled) .mainbar {
  background-color: transparent;
  background-image: none;
  box-shadow: none;
}
/* Cuando .header--scrolled está, las reglas originales
   (.topbar con var(--color-negro), .mainbar con var(--color-rojo))
   recuperan automáticamente el control. La transition de arriba
   asegura el fade suave de 0.3s entre ambos estados. */

/* === Estado scroll: armonización del topbar con el rojo del mainbar ===
   El negro original creaba una franja muy contrastada que rompía la
   estética. Cambiamos a rojo oscuro #A82A29 + borde-bottom sutil
   para separar visualmente las dos filas sin escalón duro. */
header.header.header--scrolled .topbar {
  background-color: #A82A29;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Botones del topbar (rojos #CD3433) sobre el nuevo fondo rojo oscuro:
   refuerzo de sombra y borde solo en estado scroll para que conserven
   contraste y legibilidad. En estado transparente las sombras base de
   la regla .topbar__btn (línea 182+) son suficientes. */
header.header.header--scrolled .topbar__btn {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.40),
              inset 0 1px 0 rgba(255, 255, 255, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* ================================================
   HEADER LAYOUT — full-bleed coincidente con el slider
   Los wrappers .topbar__container y .mainbar__container heredan
   max-width: var(--container-max) (=1240px) y padding: 0 24px de
   la clase .container global (línea ~108). Eso encajonaba el
   contenido del header al centro en pantallas grandes.
   Aquí los anulamos localmente con misma especificidad pero
   source-order posterior, para que ocupen todo el viewport con
   padding lateral responsive idéntico al .hero-slider__container.
   La clase .container global NO se toca; otras secciones siguen
   usándola normalmente.
   añadido el 2026-05-05
   ================================================ */
.topbar__container,
.mainbar__container {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1.5rem, 4vw, 4rem);
  padding-right: clamp(1.5rem, 4vw, 4rem);
}

/* Centrado del nav del mainbar con CSS Grid 3 columnas.
   La geometría 1fr auto 1fr garantiza que el nav (col 2) quede
   centrado entre el logo (col 1) y el borde derecho (col 3 vacía
   en desktop, ya que el burger está display:none).
   Sustituye el display:flex original del .mainbar__container.
   Mantiene height:100% y align-items:center; justify-content
   no aplica a grid y se ignora silenciosamente. */
.mainbar__container {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
  height: 100%;
}
.mainbar__logo { justify-self: start; }
.mainbar__nav  { justify-self: end; }

/* Con grid, el nav es ancho auto; el margin-left:auto en el último
   <li> (Contáctanos) ya no empuja al extremo del header sino que
   abre un hueco interno en el <ul>. Lo anulamos. */
.mainbar__nav > ul > li:last-child { margin-left: 0; }

.no-subnav main { padding-top: 0; }

/* Banners full-bleed: el banner de cabecera ocupa la franja superior
   del viewport (incluyendo la zona del header transparente). El
   padding-top interno garantiza que el contenido (h1, p) no quede
   tapado. La regla por defecto de .page-hero (padding: 70px 0)
   sigue válida para .has-subnav (donde el banner viene después de
   la subnav). */
.no-subnav .page-hero { padding-top: calc(var(--header-height) + 70px); }

/* ==========================================================================
   18. PAGE HERO (hero genérico de subpáginas)
   ========================================================================== */
.page-hero {
  position: relative;
  padding: 70px 0;
  color: var(--color-blanco);
  background: var(--color-gris-oscuro);
  overflow: hidden;
  text-align: center;
}
.page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(205,52,51,0.4) 100%);
  z-index: 1;
}
.page-hero > .container { position: relative; z-index: 2; }
.page-hero__title {
  font-family: var(--font-black);
  font-size: 48px;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.page-hero__title strong { color: var(--color-amarillo); }
.page-hero__lead {
  font-family: var(--font-medium);
  font-size: 18px;
  max-width: 720px;
  margin: 0 auto;
}
@media (max-width: 600px) {
  .page-hero { padding: 50px 0; }
  .page-hero__title { font-size: 32px; }
  .page-hero__lead { font-size: 15px; }
}

/* ==========================================================================
   19. ANATOMÍA HUB (4 botones grandes en pages/quienes-somos.html)
   ========================================================================== */
.anatomia-hub {
  padding: 80px 0;
  background: var(--color-blanco);
}
.anatomia-hub__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
}
.anatomia-hub__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 40px;
  border-radius: var(--radius-lg);
  background: var(--color-blanco);
  border: 2px solid var(--color-gris-borde);
  text-align: center;
  align-items: center;
  transition: all var(--transition);
  color: var(--color-gris-oscuro);
}
.anatomia-hub__card:hover {
  border-color: var(--color-rojo);
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.anatomia-hub__card .icon-wrap {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-rojo);
  border-radius: 50%;
  color: var(--color-blanco);
}
.anatomia-hub__card svg { width: 40px; height: 40px; }
.anatomia-hub__card h3 {
  font-family: var(--font-bold);
  font-size: 22px;
  color: var(--color-gris-oscuro);
}
.anatomia-hub__card p {
  font-size: 14px;
  color: var(--color-gris);
  max-width: 280px;
}
.anatomia-hub__card .arrow {
  margin-top: auto;
  color: var(--color-rojo);
  font-family: var(--font-medium);
  font-size: 14px;
}
@media (max-width: 700px) {
  .anatomia-hub__grid { grid-template-columns: 1fr; }
  .anatomia-hub__card { padding: 28px; }
}

/* ==========================================================================
   20. NOSOTROS — Quiénes somos / Misión Visión / Valores
   ========================================================================== */
.quienes-somos {
  padding: 80px 0;
  background: var(--color-blanco);
}
.quienes-somos__title {
  font-family: var(--font-bold);
  font-size: 38px;
  color: var(--color-rojo);
  margin-bottom: 28px;
  text-align: center;
}
.quienes-somos__body {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.quienes-somos__body p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-gris-oscuro);
  text-align: center;
}

/* Misión y Visión */
.mision-vision {
  padding: 60px 0 80px;
  background: var(--color-gris-claro);
}
.mision-vision__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.mv-card {
  padding: 40px;
  border-radius: var(--radius-lg);
  color: var(--color-blanco);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-md);
}
.mv-card--mision { background: var(--color-naranja); }
.mv-card--vision { background: var(--color-rojo); }
.mv-card__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}
.mv-card__icon svg { width: 32px; height: 32px; color: var(--color-blanco); }
.mv-card h2 {
  font-family: var(--font-black);
  font-size: 30px;
}
.mv-card p {
  font-size: 15px;
  line-height: 1.6;
}
@media (max-width: 800px) {
  .mision-vision__grid { grid-template-columns: 1fr; }
  .mv-card { padding: 28px; }
}

/* Valores */
.valores-section {
  padding: 80px 0;
  background: var(--color-amarillo);
}
.valores-section__title {
  font-family: var(--font-black);
  font-size: 42px;
  color: var(--color-gris-oscuro);
  text-align: center;
  margin-bottom: 50px;
  text-transform: uppercase;
}
.valores-section__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.valor-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px;
}
.valor-card__icon {
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gris-oscuro);
  border-radius: 50%;
  color: var(--color-amarillo);
}
.valor-card__icon svg { width: 44px; height: 44px; }
.valor-card h3 {
  font-family: var(--font-bold);
  font-size: 22px;
  color: var(--color-gris-oscuro);
}
.valor-card p {
  font-size: 15px;
  color: var(--color-gris-oscuro);
  font-family: var(--font-medium);
  max-width: 280px;
}
@media (max-width: 1024px) {
  .valores-section__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .valores-section__grid { grid-template-columns: 1fr; }
  .valores-section__title { font-size: 32px; }
}

/* ==========================================================================
   21. STAFF
   ========================================================================== */
.staff-intro {
  padding: 70px 0 40px;
  text-align: center;
}
.staff-intro__title {
  font-family: var(--font-bold);
  font-size: 38px;
  color: var(--color-rojo);
  margin-bottom: 20px;
}
.staff-intro__body {
  max-width: 820px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-gris-oscuro);
}

.staff-grid {
  padding: 40px 0 80px;
}
.staff-grid__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
.staff-card {
  background: var(--color-blanco);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.staff-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.staff-card__img {
  aspect-ratio: 3/4;
  background: var(--color-gris-claro);
  overflow: hidden;
}
.staff-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.staff-card__body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.staff-card__name {
  font-family: var(--font-bold);
  font-size: 17px;
  color: var(--color-gris-oscuro);
}
.staff-card__role {
  font-size: 13px;
  color: var(--color-rojo);
  font-family: var(--font-medium);
}
.staff-grid__cta { display: flex; justify-content: center; }
@media (max-width: 800px) {
  .staff-grid__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .staff-grid__list { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; }
}

/* ==========================================================================
   22. METODOLOGÍA — IRMA blocks
   ========================================================================== */
.metodologia-intro {
  padding: 80px 0 40px;
  background: var(--color-blanco);
}
.metodologia-intro__title {
  font-family: var(--font-black);
  font-size: 44px;
  color: var(--color-rojo);
  text-align: center;
  margin-bottom: 32px;
}
.metodologia-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 32px;
}
.metodologia-intro__grid img {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 4/3;
  object-fit: cover;
  background: var(--color-gris-claro);
}
.metodologia-intro__text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-gris-oscuro);
}
.metodologia-intro__photo {
  width: 100%;
  border-radius: var(--radius-lg);
  max-height: 360px;
  object-fit: cover;
  background: var(--color-gris-claro);
}
@media (max-width: 800px) {
  .metodologia-intro__grid { grid-template-columns: 1fr; gap: 24px; }
  .metodologia-intro__title { font-size: 32px; }
}

.irma-blocks {
  padding: 60px 0 100px;
  background: var(--color-gris-claro);
}
.irma-block {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 36px;
  align-items: center;
  padding: 32px 0;
  border-bottom: 1px solid var(--color-gris-borde);
}
.irma-block:last-child { border-bottom: none; }
.irma-block__letter {
  font-family: var(--font-black);
  font-size: 180px;
  line-height: 1;
  color: var(--color-gris-numero);
  text-align: center;
  letter-spacing: -6px;
}
.irma-block__title {
  font-family: var(--font-bold);
  font-size: 22px;
  color: var(--color-gris-oscuro);
  margin-bottom: 10px;
  line-height: 1.3;
}
.irma-block__text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-gris);
}
@media (max-width: 700px) {
  .irma-block { grid-template-columns: 1fr; gap: 8px; text-align: center; }
  .irma-block__letter { font-size: 130px; }
}

/* ==========================================================================
   23. HERRAMIENTAS DE APRENDIZAJE
   ========================================================================== */
.herramientas-intro {
  padding: 80px 0 40px;
  background: var(--color-blanco);
  text-align: center;
}
.herramientas-intro__body {
  max-width: 820px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-gris-oscuro);
}
.herramientas-intro__sub {
  font-family: var(--font-bold);
  font-size: 18px;
  color: var(--color-rojo);
  margin-top: 24px;
}

.herramientas-grid {
  padding: 40px 0 100px;
  background: var(--color-gris-oscuro);
}
.herramientas-grid__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.herramienta-card {
  padding: 32px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md);
  color: var(--color-blanco);
  transition: all var(--transition);
}
.herramienta-card:hover {
  border-color: var(--color-amarillo);
  background: rgba(255, 199, 44, 0.08);
  transform: translateY(-4px);
}
.herramienta-card h3 {
  font-family: var(--font-bold);
  font-size: 22px;
  color: var(--color-amarillo);
  margin-bottom: 14px;
}
.herramienta-card p {
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
}
@media (max-width: 800px) {
  .herramientas-grid__list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   24. CONTÁCTANOS (pages/contactanos.html)
   ========================================================================== */

/* Hero oscuro */
.contacto-hero {
  position: relative;
  height: 90vh;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blanco);
  overflow: hidden;
  padding-top: var(--header-height);
}
.contacto-hero__bg { position: absolute; inset: 0; z-index: 0; }
.contacto-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.contacto-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.25) 100%);
  z-index: 1;
}
.contacto-hero__title {
  position: relative;
  z-index: 2;
  font-family: var(--font-black);
  font-size: 64px;
  text-transform: uppercase;
  letter-spacing: -1px;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
@media (max-width: 600px) {
  .contacto-hero__title { font-size: 38px; }
}

/* Banners superiores en móvil: grandes pero sin llenar la pantalla (no usar 90vh). */
@media (max-width: 700px) {
  .testimonios-hero,
  .inscripciones-hero,
  .contacto-hero { height: auto; min-height: 440px; }
}

/* Intro */
.contacto-intro {
  padding: 80px 0 40px;
  background: var(--color-blanco);
  text-align: center;
}
.contacto-intro__lead {
  font-family: var(--font-bold);
  font-size: 22px;
  color: var(--color-gris-oscuro);
  max-width: 760px;
  margin: 0 auto 14px;
  line-height: 1.4;
}
.contacto-intro__highlight {
  font-family: var(--font-black);
  font-size: 30px;
  color: var(--color-rojo);
  margin-bottom: 18px;
}
.contacto-intro__text {
  font-size: 16px;
  color: var(--color-gris);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.7;
}

/* 3 cards de información */
.contacto-cards {
  padding: 30px 0 80px;
  background: var(--color-blanco);
}
.contacto-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.contacto-card {
  background: var(--color-blanco);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.contacto-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.contacto-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(205, 52, 51, 0.12);
  border-radius: 50%;
  color: var(--color-rojo);
}
.contacto-card__icon svg { width: 28px; height: 28px; }
.contacto-card__icon img { width: 28px; height: 28px; }
.contacto-card__title {
  font-family: var(--font-bold);
  font-size: 18px;
  color: var(--color-rojo);
}
.contacto-card__data {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-medium);
  font-size: 15.5px;
  color: var(--color-gris-oscuro);
  line-height: 1.45;
  transition: color var(--transition);
}
.contacto-card__data:hover { color: var(--color-rojo); }
.contacto-card__data img,
.contacto-card__data svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .contacto-cards__grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

/* Sección formulario */
.contacto-formulario {
  padding: 80px 0;
  background: var(--color-gris-claro);
}
.contacto-formulario__container {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: start;
}
.contacto-formulario__intro {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 140px;
}
.contacto-formulario__title {
  font-family: var(--font-bold);
  font-size: 36px;
  line-height: 1.15;
  color: var(--color-gris-oscuro);
}
.contacto-formulario__text {
  font-family: var(--font-medium);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-rojo);
}

.form-card {
  background: var(--color-blanco);
  border: 2px solid var(--color-rojo);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-md);
}
.form-card form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group--row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group label {
  font-family: var(--font-medium);
  font-size: 13px;
  color: var(--color-gris-oscuro);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-gris-borde);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: 14px;
  background: var(--color-blanco);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--color-gris-medio); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-rojo);
  box-shadow: 0 0 0 3px rgba(205, 52, 51, 0.15);
}
.form-group textarea { resize: vertical; min-height: 100px; }

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--color-gris);
  cursor: pointer;
  line-height: 1.4;
}
.form-checkbox input { margin-top: 3px; accent-color: var(--color-rojo); }
.form-checkbox a { color: var(--color-rojo); text-decoration: underline; }

.form-submit {
  align-self: flex-start;
  padding: 14px 32px;
  background: var(--color-rojo);
  color: var(--color-blanco);
  border-radius: var(--radius-pill);
  font-family: var(--font-bold);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition);
  cursor: pointer;
}
.form-submit:hover {
  background: var(--color-rojo-oscuro);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(205, 52, 51, 0.30);
  color: var(--color-blanco);
}
.form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.form-feedback {
  margin-top: 4px;
  font-size: 14px;
  font-family: var(--font-medium);
  min-height: 20px;
}
.form-feedback.is-success { color: #1B9E47; }
.form-feedback.is-error { color: var(--color-rojo); }

@media (max-width: 900px) {
  .contacto-formulario__container { grid-template-columns: 1fr; gap: 32px; }
  .contacto-formulario__intro { position: static; }
  .contacto-formulario__title { font-size: 28px; }
  .form-group--row { grid-template-columns: 1fr; }
  .form-card { padding: 24px; }
}

/* Sección mapa (full-width, sin padding lateral) */
.contacto-mapa {
  width: 100%;
  background: var(--color-gris-claro);
  line-height: 0;
}
.contacto-mapa iframe {
  display: block;
  width: 100%;
  height: 500px;
  border: 0;
}
@media (max-width: 600px) {
  .contacto-mapa iframe { height: 380px; }
}

/* ==========================================================================
   25. CURSOS — Listado completo (pages/cursos.html)
   ========================================================================== */

/* Hero con foto y filtro naranja-rojo */
.cursos-hero {
  position: relative;
  height: 90vh;
  min-height: 560px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  padding-top: var(--header-height);
}
.cursos-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.25) 100%);
}
.cursos-hero__content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-blanco);
  padding: 60px 0;
}
.cursos-hero__title {
  font-family: var(--font-black);
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: -1px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.cursos-hero__subtitle {
  font-family: var(--font-bold);
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -1px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  margin-top: 8px;
}
@media (max-width: 700px) {
  .cursos-hero { height: auto; min-height: 440px; }
  .cursos-hero__title { font-size: 40px; }
  .cursos-hero__subtitle { font-size: 32px; }
}

/* Layout principal: sidebar + grid */
.cursos-main {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 30px;
  /* Full-bleed: ocupa todo el ancho saliéndose de la franja .container (1240px).
     Solo afecta a cursos.html (.cursos-main es clase exclusiva de esta página). */
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 50px 100px;
  box-sizing: border-box;
}
/* Recorta el desborde horizontal del 100vw sin romper el sidebar sticky
   (clip no crea contenedor de scroll, a diferencia de hidden). Solo cursos. */
.page-cursos main { overflow-x: clip; }

/* Sidebar de filtros */
.cursos-sidebar {
  display: flex;
  flex-direction: column;
  gap: 26px;
  align-self: start;
  position: sticky;
  top: calc(var(--header-height) + 16px);
}
.cursos-sidebar h3 {
  font-family: var(--font-bold);
  font-size: 16px;
  color: var(--color-gris-oscuro);
  margin-bottom: 12px;
  letter-spacing: 0.3px;
}

.cursos-buscador {
  position: relative;
}
.cursos-buscador input {
  width: 100%;
  padding: 12px 42px 12px 16px;
  border: 1px solid var(--color-gris-borde);
  border-radius: var(--radius-pill);
  font-family: var(--font-base);
  font-size: 14px;
  background: var(--color-blanco);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.cursos-buscador input::placeholder { color: var(--color-gris-medio); }
.cursos-buscador input:focus {
  outline: none;
  border-color: var(--color-rojo);
  box-shadow: 0 0 0 3px rgba(205, 52, 51, 0.15);
}
.cursos-buscador svg {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-gris-medio);
  pointer-events: none;
}

.cursos-filtros {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cursos-filtros label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-family: var(--font-medium);
  font-size: 14px;
  color: var(--color-gris-oscuro);
  cursor: pointer;
}
.cursos-filtros input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-rojo);
  cursor: pointer;
  margin: 0;
}
.cursos-filtros label:hover { color: var(--color-rojo); }

.cursos-limpiar {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--color-rojo);
  font-family: var(--font-medium);
  font-size: 14px;
  cursor: pointer;
  padding: 8px 0;
  text-decoration: underline;
  transition: color var(--transition);
}
.cursos-limpiar:hover { color: var(--color-rojo-oscuro); }

/* Grid de cards */
.cursos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: start;
}

/* Cards en pages/cursos.html — overrides scoped al body */
.page-cursos .curso-card {
  position: relative;
  background: var(--color-blanco);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}
.page-cursos .curso-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.curso-card__imagen {
  width: 100%;
  aspect-ratio: 16/10;
  background: var(--color-gris-claro);
  overflow: hidden;
}
.curso-card__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.page-cursos .curso-card:hover .curso-card__imagen img { transform: scale(1.04); }

/* Badge dentro del card (en cursos.html: blanco con borde rojo) */
.page-cursos .curso-card__badge {
  position: static;
  align-self: flex-start;
  background: var(--color-blanco);
  color: var(--color-rojo);
  border: 1.5px solid var(--color-rojo);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  margin: 16px 0 0 16px;
  font-family: var(--font-medium);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}

.curso-card__contenido {
  padding: 12px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.curso-card__categoria {
  font-family: var(--font-medium);
  font-size: 12px;
  color: var(--color-gris-medio);
  letter-spacing: 0.3px;
}
.curso-card__titulo {
  font-family: var(--font-bold);
  font-size: 20px;
  color: var(--color-gris-oscuro);
  line-height: 1.2;
}
.curso-card__descripcion {
  font-size: 13.5px;
  color: var(--color-gris);
  line-height: 1.5;
}
.curso-card__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--color-gris);
}
.curso-card__info span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.curso-card__info svg {
  width: 14px;
  height: 14px;
  color: var(--color-rojo);
  flex-shrink: 0;
}

/* Botón "Ver más" en cursos.html: bloque rojo full-width */
.page-cursos .curso-card__btn {
  display: block;
  margin: 0;
  padding: 14px;
  background: var(--color-rojo);
  color: var(--color-blanco);
  font-family: var(--font-bold);
  font-size: 14px;
  text-align: center;
  border-radius: 0;
  transition: background var(--transition);
  align-self: stretch;
}
.page-cursos .curso-card__btn:hover {
  background: var(--color-rojo-oscuro);
  color: var(--color-blanco);
  transform: none;
}

/* Estado vacío (cuando ningún curso coincide con los filtros) */
.cursos-vacio {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--color-gris-medio);
  font-family: var(--font-medium);
  font-size: 16px;
}

/* ==========================================================================
   26. TESTIMONIOS (pages/testimonios.html)
   ========================================================================== */

/* Hero con foto y filtro naranja-rojizo */
.testimonios-hero {
  position: relative;
  height: 90vh;
  min-height: 560px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--header-height);
  overflow: hidden;
}
.testimonios-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.25) 100%);
}
.testimonios-hero h1 {
  position: relative;
  z-index: 1;
  color: var(--color-blanco);
  font-family: var(--font-black);
  font-size: clamp(2.5rem, 6vw, 5rem);
  text-transform: uppercase;
  letter-spacing: -1px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  text-align: center;
}

/* Barra de navegación interna (amarilla) */
.testimonios-nav {
  background: var(--color-blanco);
  padding: 18px 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  position: sticky;
  top: var(--header-height);
  z-index: 30;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.testimonios-nav a {
  display: inline-block;
  border: 1.5px solid var(--color-rojo);
  color: var(--color-rojo);
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  font-family: var(--font-medium);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.testimonios-nav a:hover,
.testimonios-nav a.active {
  background: var(--color-rojo);
  color: var(--color-blanco);
}
@media (max-width: 600px) {
  .testimonios-nav { padding: 12px 14px; gap: 8px; }
  .testimonios-nav a { padding: 8px 14px; font-size: 13px; }
}

/* Sección de testimonio (Residentado / ENAM) */
.testimonio-seccion {
  padding: 70px 0;
  background: var(--color-blanco);
}
.testimonio-seccion + .testimonio-seccion { border-top: 1px solid var(--color-gris-borde); }

.testimonio-grid {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 40px;
  align-items: start;
}

/* === Carrusel Residentado (N slides, navegación MANUAL, sin auto-avance) === */
.rm-carousel { position: relative; }
.rm-slide { display: none; }
.rm-slide.is-active { display: block; }
/* Flechas: look glassy del hero-slider (círculo translúcido + blur + borde +
   chevron SVG + hover resalta), pero con chevron/borde VISIBLES sobre el fondo
   blanco de la sección (el blanco-translúcido del hero sería invisible aquí). */
.rm-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1.5px solid rgba(0, 0, 0, 0.10);
  color: var(--color-rojo);
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.rm-arrow svg { width: 24px; height: 24px; }
.rm-arrow--prev { left: -22px; }
.rm-arrow--next { right: -22px; }
.rm-arrow:hover {
  background: var(--color-rojo);
  color: #fff;
  border-color: var(--color-rojo);
  transform: translateY(-50%) scale(1.06);
}
.rm-arrow:focus-visible { outline: 2px solid var(--color-rojo); outline-offset: 3px; }
/* Dots tipo barrita (estilo hero-slider), visibles sobre blanco */
.rm-dots {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 24px;
}
.rm-dot {
  width: 36px; height: 4px; border-radius: 2px;
  background: rgba(0, 0, 0, 0.2); border: 0; padding: 0;
  cursor: pointer;
  transition: background 0.25s ease, width 0.25s ease;
}
.rm-dot:hover { background: rgba(0, 0, 0, 0.35); }
.rm-dot.is-active { background: var(--color-rojo); width: 48px; }
.rm-dot:focus-visible { outline: 2px solid var(--color-rojo); outline-offset: 3px; }
@media (max-width: 768px) {
  .rm-arrow { width: 38px; height: 38px; }
  .rm-arrow svg { width: 20px; height: 20px; }
  .rm-arrow--prev { left: 4px; }
  .rm-arrow--next { right: 4px; }
}

/* MÓVIL ≤768px (#residentado): replica el patrón de la home > Cursos →
   flechas ABAJO flanqueando las rayas:  ‹  —  —  —  ›
   Aquí .rm-arrow y .rm-dots YA son hermanas dentro de .rm-carousel, así que
   sale con flex + order PURO (sin position:absolute ni tocar el HTML).
   Tamaño de flecha (40px, border 0) y separación vertical (18px) + gap
   flecha↔rayas (16px) igualados a la sección Cursos. Scoped a #residentado
   → no afecta otros carruseles; desktop intacto (>768px sigue a los lados). */
@media (max-width: 768px) {
  #residentado .rm-carousel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 16px;   /* gap flecha ↔ rayas, igual que Cursos */
    row-gap: 18px;      /* separación carrusel ↔ controles, igual que Cursos */
  }
  #residentado .rm-track { flex: 0 0 100%; order: 0; }   /* slides ocupan la 1ª fila */
  /* Flechas fuera del absolute → entran en la fila de controles. */
  #residentado .rm-arrow {
    position: static;
    transform: none;
    top: auto;
    width: 40px;        /* = Cursos */
    height: 40px;       /* = Cursos */
    border: 0;          /* = Cursos */
  }
  /* Sin translateY (ya no es absolute): el hover solo escala, sin saltar. */
  #residentado .rm-arrow:hover { transform: scale(1.06); }
  #residentado .rm-arrow--prev { order: 1; left: auto; }
  #residentado .rm-dots        { order: 2; margin-top: 0; }  /* la separación la da row-gap */
  #residentado .rm-arrow--next { order: 3; right: auto; }
  /* El bloque de videos es el ÚLTIMO elemento de cada slide; su margin-bottom:26px
     (style.css:3235) quedaba dentro del track y se sumaba al row-gap (26+18≈44px).
     Lo anulo SOLO aquí para que la separación neta sea 18px, igual que Cursos.
     Desktop intacto (>768px mantiene los 26px). */
  #residentado .videos-testimonios { margin-bottom: 0; }
}
/* Video único a ancho completo (slides 2025 y 2024) */
.videos-testimonios.videos-testimonios--single { grid-template-columns: 1fr; }

.testimonio-poster img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  background: var(--color-gris-claro);
}

/* Residentado: columna de la imagen más ancha (50/50) para que el collage
   RM-2025 (908x1030, ratio 0.882) se vea COMPLETO, sin recorte. A ~50% el alto
   natural de la imagen se acerca al de la columna derecha (videos), quedando
   casi alineada. Imagen en tamaño natural (sin cover) = sin recorte ni franjas.
   Scoped: NO afecta a ENAM. Solo desktop; en <=968px el grid apila a 1 columna. */
@media (min-width: 969px) {
  #residentado .testimonio-grid { grid-template-columns: 1fr 1fr; }
  /* Centra verticalmente la imagen en su columna (la derecha es más alta).
     Quirúrgico en .testimonio-poster (align-self) para NO afectar a ENAM. */
  #residentado .testimonio-poster { align-self: center; }
}

.testimonio-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-negro);
  font-family: var(--font-bold);
  font-size: 14px;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.testimonio-tag img,
.testimonio-tag svg {
  width: 22px;
  height: 22px;
}
/* LOGO3 en el tag "Historias de Éxito": respeta su proporción (no cuadrado) */
.testimonio-tag img.testimonio-tag__logo {
  width: auto;
  height: 34px;
}

.testimonio-titulo {
  color: var(--color-rojo);
  font-family: var(--font-black);
  font-size: 38px;
  line-height: 1.1;
  margin-bottom: 30px;
  letter-spacing: -0.5px;
}

/* Estadísticas con trofeos */
.estadisticas-trofeos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 30px;
}
.estadisticas-trofeos--single {
  grid-template-columns: minmax(220px, max-content);
  justify-content: start;
}
.trofeo-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #FEF0EF;
  border-radius: var(--radius-md);
  padding: 18px 14px;
  gap: 4px;
}
.trofeo-stat svg { width: 42px; height: 42px; }
.trofeo-img { width: 84px; height: auto; object-fit: contain; display: block; }
.trofeo-stat .numero {
  font-family: var(--font-black);
  font-size: 32px;
  color: var(--color-rojo);
  line-height: 1;
  margin-top: 4px;
}
.trofeo-stat .texto {
  font-family: var(--font-medium);
  font-size: 11px;
  color: var(--color-gris);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

/* Métricas (icono amarillo + número rojo) */
.metricas {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 30px;
}
.metrica {
  display: flex;
  align-items: center;
  gap: 18px;
}
.metrica-icono {
  width: 60px;
  height: 60px;
  background: rgba(205, 52, 51, 0.12);   /* rojo de marca al 12% (igual que .contacto-card__icon) */
  color: var(--color-rojo);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.metrica-icono svg { width: 30px; height: 30px; }
.metrica-icono img { width: 28px; height: 28px; object-fit: contain; display: block; }
.metrica-info { display: flex; flex-direction: column; }
.metrica-num {
  font-family: var(--font-black);
  font-size: 26px;
  color: var(--color-rojo);
  line-height: 1.1;
}
.metrica-desc {
  font-family: var(--font-medium);
  font-size: 12px;
  color: var(--color-gris);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Videos de testimonio */
.videos-testimonios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 26px;
}
.video-testimonio {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-gris-oscuro);
  transition: transform var(--transition);
}
/* El CONTENEDOR nunca se transforma (un transform sobre el ancestro del iframe
   desalinea su hit-testing). El hover-scale decorativo va en el SVG del play
   (que se borra al reproducir), no en el contenedor. */
.video-testimonio.is-playing,
.video-testimonio.is-playing:hover { transform: none !important; transition: none; }
/* Tras reproducir, el contenedor NO lleva pointer-events:none: en móvil un padre
   con pointer-events:none puede impedir que el touch llegue al iframe hijo. Ya no
   hace falta, porque play() removió los listeners del contenedor (no reintercepta).
   El iframe (z-index:2, encima) recibe los toques directamente. touch-action:auto
   para no limitar los gestos de los controles de YouTube. */
.video-testimonio.is-playing { touch-action: auto; }
.video-testimonio.is-playing iframe { pointer-events: auto !important; touch-action: auto !important; }
/* iframe fuera de flujo: llena el contenedor 16:9 por CSS (no colapsa el alto)
   z-index/pointer-events: el iframe queda encima y recibe los toques (controles YouTube) */
.video-testimonio iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  border-radius: var(--radius-md);
  z-index: 2;
  pointer-events: auto;
}
/* Lite-embed (Residentado): miniatura limpia + botón play SVG rojo de marca.
   touch-action:manipulation SOLO antes de reproducir (tap inicial ágil); tras
   .is-playing vuelve a auto para no limitar los gestos del iframe en móvil. */
.video-testimonio[data-id] { cursor: pointer; }
.video-testimonio[data-id]:not(.is-playing) { touch-action: manipulation; }
/* ANTES de reproducir: ningún hijo (thumb/botón) captura el toque → el tap llega
   al contenedor. DESPUÉS (.is-playing): la regla deja de aplicar, así el iframe
   recibe los toques con pointer-events:auto SIN competencia (controles YouTube). */
.video-testimonio[data-id]:not(.is-playing) > * { pointer-events: none; }
.video-testimonio[data-id] iframe { pointer-events: auto !important; }
.video-testimonio .video-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-testimonio .video-play {
  position: absolute; inset: 0; margin: auto;
  width: 48px; height: 34px; padding: 0; border: 0;
  background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.video-testimonio .video-play svg { filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); transition: transform .2s ease; }
.video-testimonio:hover .video-play svg { transform: scale(1.1); }
.video-testimonio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity var(--transition);
}
.video-testimonio:hover img { opacity: 1; }
.video-testimonio .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  background: rgba(213, 101, 55, 0.92);
  border-radius: 50%;
  color: var(--color-blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  padding-left: 4px; /* compensar la asimetría del ▶ */
  transition: background var(--transition), transform var(--transition);
}
.video-testimonio:hover .play-button {
  background: var(--color-rojo);
  transform: translate(-50%, -50%) scale(1.08);
}

/* Botón "Ver más" */
.btn-ver-mas {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-rojo);
  color: var(--color-blanco);
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-bold);
  font-size: 15px;
  transition: all var(--transition);
}
.btn-ver-mas:hover {
  background: var(--color-rojo-oscuro);
  color: var(--color-blanco);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(205, 52, 51, 0.3);
}

/* Sección Preinternado (1 columna centrada) */
.testimonio-preinternado {
  text-align: center;
}
.testimonio-preinternado .testimonio-titulo {
  margin-bottom: 30px;
  text-align: center;
}
.banner-preinternado {
  max-width: 900px;
  margin: 0 auto 40px;
}
.banner-preinternado img {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  background: var(--color-gris-claro);
}
/* Placeholder gris para posters aún sin imagen real (ENAM / Preinternado):
   conserva el tamaño del recuadro para no colapsar el layout, sin <img> roto. */
.poster-placeholder {
  width: 100%;
  aspect-ratio: 908 / 1030;   /* proporción tipo poster (como RM-2025) */
  background: var(--color-gris-oscuro);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.poster-placeholder--banner { aspect-ratio: 16 / 7; }   /* banner apaisado */
.videos-preinternado {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto 30px;
}
.preinternado-conoce {
  font-family: var(--font-medium);
  font-size: 16px;
  color: var(--color-gris);
  margin-bottom: 16px;
}
.preinternado-acciones {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 968px) {
  .testimonio-grid { grid-template-columns: 1fr; gap: 30px; }
  .testimonio-titulo { font-size: 30px; }
  .estadisticas-trofeos { grid-template-columns: repeat(3, 1fr); }
  .videos-testimonios { grid-template-columns: 1fr 1fr; }
  .videos-preinternado { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .testimonio-seccion { padding: 50px 0; }
  .estadisticas-trofeos { grid-template-columns: 1fr; }
  .videos-testimonios { grid-template-columns: 1fr; }
  .videos-preinternado { grid-template-columns: 1fr; max-width: 380px; }
  .testimonio-titulo { font-size: 26px; }
}

/* ==========================================================================
   27. INSCRIPCIONES (pages/inscripciones.html)
   ========================================================================== */

/* Hero */
.inscripciones-hero {
  position: relative;
  height: 90vh;
  min-height: 560px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--header-height);
  padding-bottom: 80px;
  overflow: hidden;
}
.inscripciones-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.25) 100%);
}
.inscripciones-hero h1 {
  position: relative;
  z-index: 1;
  color: var(--color-blanco);
  font-family: var(--font-black);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  letter-spacing: -1px;
}

/* Timeline de progresión */
.inscripciones-timeline {
  padding: 50px 0 70px;
}
.inscripciones-timeline > .container { max-width: 1200px; }

.timeline-iconos {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
  max-width: 720px;
  margin-inline: auto;
}
.timeline-icono { display: flex; justify-content: center; }
.timeline-icono .icono-circle {
  width: 84px;
  height: 84px;
  background: #FFE5E0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-rojo);
  box-shadow: 0 4px 14px rgba(205, 52, 51, 0.12);
}
.timeline-icono .icono-circle svg { width: 38px; height: 38px; }
.timeline-linea {
  height: 4px;
  background: #FFE5E0;
  border-radius: 4px;
}
.timeline-linea--activa { background: var(--color-rojo); }

.timeline-textos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}
.timeline-texto { text-align: center; }
.timeline-texto h3 {
  font-family: var(--font-bold);
  font-size: 1.6rem;
  color: var(--color-gris-oscuro);
  margin-bottom: 18px;
}
.timeline-texto p {
  font-size: 14.5px;
  color: var(--color-gris-oscuro);
  line-height: 1.6;
  margin-bottom: 14px;
}
.timeline-texto .texto-rojo { color: var(--color-rojo); }
.email-destacado a {
  color: var(--color-rojo);
  font-family: var(--font-bold);
  text-decoration: none;
}
.email-destacado a:hover { text-decoration: underline; }

@media (max-width: 968px) {
  .timeline-iconos { grid-template-columns: 1fr; gap: 12px; }
  .timeline-linea { width: 4px; height: 36px; margin: 0 auto; }
  .timeline-textos { grid-template-columns: 1fr; gap: 24px; }
}

/* Selector de curso */
.seleccion-curso {
  padding: 70px 0 90px;
  background: var(--color-blanco);
  text-align: center;
}
.seleccion-curso h2 {
  font-family: var(--font-bold);
  font-size: 1.8rem;
  color: var(--color-gris-oscuro);
  margin-bottom: 28px;
}
.selector-wrapper {
  max-width: 500px;
  margin: 0 auto;
}
.selector-curso {
  width: 100%;
  padding: 14px 50px 14px 18px;
  border: 1px solid var(--color-gris-borde);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: 15px;
  background: var(--color-blanco);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23E63329" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat: no-repeat;
  background-position: right 16px center;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.selector-curso:focus {
  outline: none;
  border-color: var(--color-rojo);
  box-shadow: 0 0 0 3px rgba(205, 52, 51, 0.15);
}

/* Formulario dinámico inyectado por JS */
.formulario-curso {
  max-width: 720px;
  margin: 36px auto 0;
  padding: 32px;
  border: 2px solid var(--color-rojo);
  border-radius: var(--radius-lg);
  background: var(--color-blanco);
  text-align: left;
  box-shadow: 0 8px 24px rgba(205, 52, 51, 0.08);
}
.formulario-curso h3 {
  font-family: var(--font-bold);
  font-size: 1.4rem;
  color: var(--color-rojo);
  margin-bottom: 20px;
}
.form-inscripcion {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-inscripcion .form-row { display: flex; flex-direction: column; }
.form-inscripcion .form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-inscripcion label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-medium);
  font-size: 13px;
  color: var(--color-gris-oscuro);
}
.form-inscripcion input[type="text"],
.form-inscripcion input[type="tel"],
.form-inscripcion input[type="email"],
.form-inscripcion input[type="file"],
.form-inscripcion select {
  padding: 11px 14px;
  border: 1px solid var(--color-gris-borde);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: 14px;
  background: var(--color-blanco);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-inscripcion input[type="file"] { padding: 8px 10px; }
.form-inscripcion input:focus,
.form-inscripcion select:focus {
  outline: none;
  border-color: var(--color-rojo);
  box-shadow: 0 0 0 3px rgba(205, 52, 51, 0.15);
}
.form-inscripcion label:has(input[type="checkbox"]) {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--color-gris);
  cursor: pointer;
  line-height: 1.4;
}
.form-inscripcion input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--color-rojo);
}
.btn-enviar-inscripcion {
  align-self: flex-start;
  padding: 13px 32px;
  background: var(--color-rojo);
  color: var(--color-blanco);
  border-radius: var(--radius-pill);
  font-family: var(--font-bold);
  font-size: 15px;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-enviar-inscripcion:hover {
  background: var(--color-rojo-oscuro);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(205, 52, 51, 0.30);
}

@media (max-width: 600px) {
  .formulario-curso { padding: 22px; }
  .form-inscripcion .form-row-2col { grid-template-columns: 1fr; }
}

/* Responsive */
@media (max-width: 1024px) {
  .cursos-grid { grid-template-columns: repeat(2, 1fr); }
  .cursos-main { padding: 40px 40px; }
}
@media (max-width: 800px) {
  .cursos-main { grid-template-columns: 1fr; gap: 24px; }
  .cursos-sidebar { position: static; }
}
@media (max-width: 600px) {
  .cursos-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
  .cursos-main { padding: 30px 0; }
}

/* ================================================
   ASIDE SUBMENÚ MÓVIL — acordeones (Anatomía + Cursos)
   añadido el 2026-05-06
   El <button> de toggle hereda visualmente los estilos del
   .aside__nav li a (color blanco, font 19px) gracias a
   color/font: inherit.
   ================================================ */
.aside__link--toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  color: var(--color-blanco);
  font-family: var(--font-medium);
  font-size: 19px;
  text-align: left;
  cursor: pointer;
  padding: 6px 0;
}
.aside__link--toggle:hover { color: var(--color-amarillo); }

.aside__caret {
  display: inline-flex;
  transition: transform 0.25s ease;
}
.aside__link--toggle[aria-expanded="true"] .aside__caret {
  transform: rotate(180deg);
}

.aside__submenu {
  list-style: none;
  padding-left: 1.25rem;
  margin: 0.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-left: 2px solid rgba(255, 255, 255, 0.20);
}
/* Fuerza el ocultamiento cuando el atributo HTML hidden está presente.
   Necesario porque .aside__submenu { display: flex } sobrescribe la
   regla UA `[hidden] { display: none }` por source-order. */
.aside__submenu[hidden] { display: none; }
.aside__submenu li { padding: 2px 0; }
.aside__submenu a {
  color: var(--color-blanco);
  font-family: var(--font-medium);
  font-size: 15px;
  opacity: 0.92;
  display: block;
  padding: 4px 0;
}
.aside__submenu a:hover,
.aside__submenu a:focus {
  opacity: 1;
  color: var(--color-amarillo);
}

/* ================================================
   LANDING WRAPPER — iframe de MailerLite (test)
   añadido el 2026-05-06
   ================================================ */
.landing-wrapper {
  width: 100%;
  margin: 0;
  padding-top: var(--header-height, 140px);
  background: #fff;
}
/* Altura inicial placeholder (1000px). El JS de la página
   test-iframe-residentado.html la sobrescribe via postMessage
   cuando la landing reporta su altura real desde MailerLite.
   La transition suaviza el ajuste cuando llega el postMessage. */
.landing-iframe {
  display: block;
  width: 100%;
  height: 1000px;
  border: 0;
  background: #fff;
  transition: height 0.3s ease;
}
@media (max-width: 1024px) {
  .landing-wrapper {
    padding-top: var(--mainbar-height, 60px);
  }
}

/* === MENÚ SOY ALUMNO (TOPBAR) ===
   Agrupa los 5 botones del topbar en un desplegable por HOVER (y focus-within
   para teclado), igual que los dropdowns del nav. Reutiliza .topbar__btn
   (trigger pill) y .dropdown (panel). No modifica reglas originales. */

/* Trigger (pill con caret) */
.topbar__menu { position: relative; }
.topbar__menu-trigger { cursor: pointer; }
.topbar__menu-trigger .caret { display: inline-flex; margin-left: 2px; transition: transform 0.25s ease; }
.topbar__menu-trigger .caret svg { width: 16px; height: 16px; }

/* Panel: alineado a la derecha (el topbar va pegado al borde derecho).
   Estado cerrado lo da .dropdown base (opacity/visibility). */
.topbar__menu .dropdown.topbar__menu-panel {
  left: auto;
  right: 0;
  transform: translateY(2px);
}
/* Puente transparente: cubre el hueco entre el botón y el panel separado,
   para que el hover no se corte al cruzarlo (el ::before pertenece al panel,
   que es hijo de .topbar__menu). No afecta right:0 ni el aspecto. */
.topbar__menu-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

/* Apertura por hover / focus-within (mismo mecanismo que el nav).
   Mayor especificidad que el .has-dropdown:hover .dropdown global para
   imponer el transform correcto (sin translateX(-50%), conserva right:0).
   translateY(10px) deja aire bajo el botón. */
.topbar__menu.has-dropdown:hover .topbar__menu-panel,
.topbar__menu.has-dropdown:focus-within .topbar__menu-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(10px);
}
.topbar__menu.has-dropdown:hover .caret svg,
.topbar__menu.has-dropdown:focus-within .caret svg {
  transform: rotate(180deg);
}

/* Sin reglas para los ítems: heredan el estilo del nav (.dropdown li a en
   desktop, .aside__submenu a en móvil) — solo texto, idénticos a Conócenos/
   Cursos/Recursos. El icono del trigger usa el filtro blanco de .topbar__btn img,
   igual que Store. */

/* === FILTRO STAFF DOCENTE ===
   La barra .staff-hero-nav filtra las secciones .staff-categoria (JS sección 3d).
   Solo añade: ocultar sección filtrada, botón activo y cursor. */
.staff-categoria.is-hidden { display: none; }
.staff-hero-nav__btn { cursor: pointer; }
.staff-hero-nav__btn.is-active {
  background: var(--color-rojo);
  color: var(--color-blanco);
}

/* === FILTRO TESTIMONIOS ===
   La barra .testimonios-nav filtra las secciones .testimonio-seccion (JS 3e).
   Los botones replican el pill de .testimonios-nav a (que se deja intacto).
   No modifica reglas originales: todo añadido aquí. */
.testimonio-seccion.is-hidden { display: none; }
.testimonios-nav { background: #EEEEEE; }
.testimonios-nav button {
  display: inline-block;
  border: 1.5px solid var(--color-rojo);
  color: var(--color-rojo);
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  font-family: var(--font-medium);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.testimonios-nav button:hover,
.testimonios-nav button.is-active {
  background: var(--color-rojo);
  color: var(--color-blanco);
}
@media (max-width: 600px) {
  .testimonios-nav button { padding: 8px 14px; font-size: 13px; }
}

/* === FONDO SECCIONES #EEEEEE ===
   Unifica a #EEEEEE el fondo de estas secciones (antes #F5F5F5 vía
   --color-gris-claro). Override por selector: NO cambia la variable global
   ni los placeholders de imagen / hover del menú (siguen en #F5F5F5). */
.cursos,
.mision-vision,
.irma-blocks,
.contacto-formulario,
.contacto-mapa { background: #EEEEEE; }

/* === NAV "COMUNIDAD VILLAMEDIC" EN DOS LÍNEAS (desktop) ===
   Apila "Comunidad" / "VillaMedic" solo en este trigger del nav desktop.
   El caret se centra solo por el align-items:center del <a>. */
.mainbar__nav .nav-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: center;
}

/* === FOOTER: DIVISORIA + COPYRIGHT DEBAJO === */
.footer__copyright-row {
  flex-basis: 100%;
  width: 100%;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 0;
  padding-top: 18px;
}
/* Iguala el copyright a los enlaces .footer__legal a: mismo tamaño (12.5px)
   y misma fuente/peso regular (var(--font-base), 400), sin el --font-medium.
   Mismo selector que la regla original (línea ~1396) pero posterior → gana. */
.footer__copyright {
  font-size: 12.5px;
  font-family: var(--font-base);
  font-weight: 400;
}

/* === FOOTER: ÍCONO LIBRO DE RECLAMACIONES === */
.footer__libro img { height: 64px; width: auto; display: block; transition: transform 0.25s ease; }
.footer__libro:hover img { transform: scale(1.08); }

/* ==========================================================================
   OVERRIDES Residentado (añadidos al final; no modifican reglas originales)
   ========================================================================== */
/* A) Imagen RM-2025 más grande (~+17%): se ensancha su columna del grid
   (era 1fr 1fr = 50/50 → 1.4fr 1fr ≈ 58/42). height:auto crece proporcional
   (sin recorte). Solo desktop; en <=968px el grid ya apila a 1 columna. */
@media (min-width: 969px) {
  #residentado .testimonio-grid { grid-template-columns: 1.4fr 1fr; }
}
/* B) Barra de filtros "más abierta": más aire vertical + más gap entre botones. */
.testimonios-nav { gap: 22px; }
@media (min-width: 601px) {
  .testimonios-nav { padding-top: 28px; padding-bottom: 28px; }
}
/* C) Las 3 secciones de testimonios (Residentado/ENAM/Preinternado) ocupan más
   ancho: solo el .container DENTRO de .testimonio-seccion sube a 1600px (el
   .container global sigue en 1240px; NO se toca). Conserva el padding lateral. */
.testimonio-seccion > .container { max-width: 1600px; }

/* E) Flechas del carrusel Residentado más SEPARADAS hacia afuera (de -22px a
   -48px), simétricas. Solo desktop (en <=768px se mantiene 4px para que no se
   salgan del viewport). Override, no toca las reglas originales. */
@media (min-width: 769px) {
  #residentado .rm-arrow--prev { left: -62px; }
  #residentado .rm-arrow--next { right: -62px; }
}

/* F) Centrar horizontalmente el collage en su columna izquierda, en AMBOS slides
   (2025 y 2024, ambos dentro de #residentado). Si la imagen es más angosta que
   la columna, queda centrada (no pegada a la izquierda); si la llena, no cambia. */
#residentado .testimonio-poster { text-align: center; }
#residentado .testimonio-poster img { margin-left: auto; margin-right: auto; display: block; }

/* G) Centrar VERTICALMENTE la columna derecha (trofeos + métricas + video) frente
   al collage de la izquierda. La alineación horizontal interna queda ORIGINAL
   (izquierda). Solo desktop (>=969px, grid 2 col). Scoped a #residentado. */
@media (min-width: 969px) {
  #residentado .testimonio-grid { align-items: center; }
}

/* H) ENAM y Preinternado: MISMO layout que Residentado (2 col 50/50, columna
   derecha centrada verticalmente, poster centrado). Placeholders "próximamente"
   del mismo tamaño que el collage (aspect 908/1030) y el video (16/9) de RM. */
@media (min-width: 969px) {
  #enam .testimonio-grid,
  #preinternado .testimonio-grid { grid-template-columns: 1.4fr 1fr; align-items: center; }
  #enam .testimonio-poster,
  #preinternado .testimonio-poster { align-self: center; }
}
/* Texto tenue centrado dentro de los placeholders */
.poster-placeholder--soon,
.video-placeholder {
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 12px;
  color: var(--color-gris);
  font-family: var(--font-medium); font-size: 14px; letter-spacing: 0.3px;
  background: var(--color-gris-claro);   /* gris claro (override del gris oscuro base) */
}
/* Placeholder del video: mismo tamaño que el video de RM (16/9, ancho completo) */
.video-placeholder {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
}

/* === Dropdown "Soy Alumno" en MAYÚSCULAS (desktop + móvil). Scoped a sus
   selectores únicos: NO afecta otros dropdowns ni "VillaMedic" del header. === */
.topbar__menu-panel a,
#aside-submenu-alumno a { text-transform: uppercase; }

/* Menú móvil (aside): el .aside__inner estaba fijo a height:100% (=100vh), lo que
   impedía crecer y hacer scroll cuando el submenú "Soy Alumno" (6 items, cerca del
   fondo) se expande → los últimos items quedaban cortados. Con min-height:100% el
   inner crece con el contenido y el .aside (overflow-y:auto) llega hasta el final. */
@media (max-width: 1024px) {
  .aside__inner { height: auto; min-height: 100%; }
}

/* Heroes SOLO en móvil: mostrar MÁS de la imagen (menos recorte). Las de fondo
   son apaisadas ~2:1; con min-height:440px + object-fit:cover se veía solo una
   franja central. Acercamos la caja a la proporción de la imagen (aspect 3/2)
   manteniendo cover (sin deformar, sin franjas). El !important vence a los
   overrides inline por página (min-height:440px). Desktop (>700px) intacto. */
@media (max-width: 700px) {
  .page-hero,
  .contacto-hero,
  .cursos-hero,
  .inscripciones-hero {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 2;
  }
  .page-hero__bg img,
  .contacto-hero__bg img { object-position: center; }
  /* cursos/inscripciones no tienen __bg img: la imagen es background-image del
     propio <section>. Reafirmo cover + centrado (ya lo traen, pero explícito
     para que herede el mismo comportamiento que los demás). */
  .cursos-hero,
  .inscripciones-hero { background-size: cover; background-position: center; }
}
@media (max-width: 480px) {
  /* Pantallas muy angostas: un pelín más alta para que el título respire */
  .page-hero,
  .contacto-hero,
  .cursos-hero,
  .inscripciones-hero { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   OVERRIDES — Tarjetas de Cursos NO clickeables (home / index.html)
   --------------------------------------------------------------------------
   Las tarjetas del carrusel de Cursos del home dejaron de ser enlaces
   (<a> → <div>, ver index.html). Estos overrides neutralizan las señales
   visuales de "clickeable" heredadas de las reglas globales .curso-card
   (líneas ~696-734), SIN modificar esas reglas originales.
   Scopeado a `.curso-card-link .curso-card`, selector que solo existe en
   index.html, por lo que NO afecta a .curso-card de otras páginas
   (ej. pages/cursos.html usa .page-cursos .curso-card sin este wrapper).
   ========================================================================== */
.curso-card-link { cursor: default; }
.curso-card-link .curso-card:hover {
  transform: none;
  box-shadow: var(--shadow-sm); /* mismo valor base que .curso-card (línea 701): sin cambio en hover */
}
.curso-card-link .curso-card:hover .curso-card__img img {
  transform: none; /* anula el zoom (scale 1.04) de la línea 734 */
}

/* --------------------------------------------------------------------------
   Tarjetas de Cursos SOLO imagen (se eliminó .curso-card__body en index.html).
   Para que el card conserve su ALTURA TOTAL de antes (imagen 16/10 + body),
   la imagen absorbe el alto del body. El body medía ~124px FIJOS (no escalaba),
   así que ningún aspect-ratio único conserva la altura exacta en todos los
   anchos; se toma como referencia el desktop de 1440px (3 tarjetas por vista):
   card 357.33 × 347.31 → ratio ≈ 1.03. A ese ancho la altura queda igual;
   en pantallas más anchas el card sube un poco y en más angostas baja un poco.
   object-fit: cover (heredado, línea 731) recorta para llenar el 100%.
   Scopeado a .curso-card-link .curso-card__img → solo index.html. -------- */
.curso-card-link .curso-card__img {
  aspect-ratio: 1.03; /* override del 16/10 original (línea 725) solo en el home */
}

/* ==========================================================================
   OVERRIDES — Barra de filtros de Testimonios igualada a Staff Docente
   --------------------------------------------------------------------------
   Objetivo: que .testimonios-nav (pages/testimonios.html) tenga EXACTAMENTE la
   misma ALTURA que .staff-hero-nav (referencia, definida inline en
   pages/staff-docente.html): 58px en desktop y 51px en móvil. Los chips ya eran
   idénticos en tamaño; el desfase estaba solo en el contenedor.

   Estos overrides NEUTRALIZAN los overrides tardíos "barra más abierta" de las
   líneas 3900 (gap: 22px) y 3902 (@min-width:601px padding vertical 28px), que
   son la causa del desfase en desktop. Ganan por ORDEN DE FUENTE (misma
   especificidad .testimonios-nav, pero van después en el archivo).

   Además corrigen el BUG de cascade en móvil: la regla 3900 (gap:22px, sin media
   query y posterior) pisaba el gap:8px de la media ≤600px (línea 3013), lo que
   separaba los chips y los hacía envolver en 2 filas. Aquí el gap móvil vuelve a
   8px y se fuerza nowrap + overflow-x:auto (1 fila con scroll, como staff).

   Breakpoint alineado a ≤700px (staff usa 700px; la base de testimonios usaba
   600px) para que coincidan también en el rango 601–700px.
   Scopeado a .testimonios-nav → solo pages/testimonios.html. NO se tocan las
   reglas originales (2982-2992, 3013-3014, 3825-3838, 3844-3846, 3900-3902) ni
   nada de staff-docente.
   ========================================================================== */
/* Desktop: iguala staff (padding vertical 12px, gap 10px) → barra 58px */
.testimonios-nav {
  padding-top: 12px;
  padding-bottom: 12px;
  gap: 10px;                 /* neutraliza el gap:22px de la línea 3900 */
  flex-wrap: nowrap;         /* una fila; si no cabe, scroll horizontal (como staff) */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.testimonios-nav button {
  flex-shrink: 0;            /* con nowrap, evita que los chips se compriman */
}
/* Móvil: iguala staff (padding vertical 10px, gap 8px) → barra 51px.
   El chip también encoge a ≤700px (staff lo hace en 700px; la media original del
   chip de testimonios está en ≤600px, línea 3845, lo que dejaba el chip en tamaño
   desktop entre 601–700px y descuadraba la altura en ese rango). */
@media (max-width: 700px) {
  .testimonios-nav {
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 8px;                /* restablece el gap móvil que el bug de 3900 pisaba */

    /* --- Fix del primer chip cortado (Opción A) ---
       RAÍZ del corte: la regla original 2986 deja justify-content:center; con
       nowrap + desborde, flexbox reparte el overflow a AMBOS lados y empuja el
       primer chip a la izquierda (left negativo), inalcanzable porque scrollLeft
       no puede ser negativo. Con flex-start el primer chip arranca completo y
       TODO el desborde va a la derecha, alcanzable con scroll (igual que staff). */
    justify-content: flex-start;
    padding-right: 20px;        /* aire tras el último chip */

    /* Scrollbar IDÉNTICA a staff-docente (línea 56): solo scrollbar-width: thin.
       Staff no define scrollbar-color ni reglas ::-webkit-scrollbar, así que aquí
       tampoco, para que ambas barras se vean iguales. Se retiró el ocultamiento
       de scrollbar y el fade (scroll-shadow), que staff no tiene. */
    scrollbar-width: thin;
  }
  .testimonios-nav button {
    padding: 8px 14px;
    font-size: 13px;
  }
}

/* ==========================================================================
   OVERRIDES — Cursos (pages/cursos.html): grilla a ancho completo sin sidebar
   --------------------------------------------------------------------------
   Se eliminó el panel de filtros (<aside class="cursos-sidebar">: buscador +
   Estados + Categorías + "Limpiar todo") del HTML, y su bloque de JS huérfano
   (main.js, bloque 7). La regla original .cursos-main (línea 2716) define un grid
   de 2 columnas "280px 1fr"; sin el sidebar, la grilla caía en la columna de
   280px dejando un hueco a la derecha. Aquí se fuerza una sola columna para que
   .cursos-grid ocupe el 100%. Scopeado a .cursos-main → clase exclusiva de
   cursos.html. NO se modifica la regla original (gana por orden de fuente).

   NOTA: quedó CSS huérfano (inofensivo, apunta a elementos ya inexistentes) que
   NO se toca en este cambio: reglas del sidebar en style.css ~2734-2816
   (.cursos-sidebar/.cursos-buscador/.cursos-filtros/.cursos-limpiar/.cursos-vacio)
   y estilos inline en pages/cursos.html ~34-62. Se limpiarán aparte si hace falta.
   ========================================================================== */
.cursos-main {
  grid-template-columns: 1fr;
}

/* ==========================================================================
   BARRA DE FILTROS — .cursos-nav (pages/cursos.html)
   --------------------------------------------------------------------------
   Réplica EXACTA de la barra de testimonios (.testimonios-nav ya ajustada) en
   estilo, tamaño y comportamiento, pero con clase propia para no acoplarse al JS
   de testimonios (main.js bloque 3e/8 seleccionan .testimonios-nav). Aquí se
   REPLICAN los valores efectivos de .testimonios-nav; NO se modifican sus reglas
   ni ninguna original. Altura: 58px desktop / 51px móvil. Filtrado por JS propio.
   ========================================================================== */
.cursos-nav {
  background: #EEEEEE;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap;              /* una fila; si no cabe, scroll horizontal */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 20px;
  position: sticky;
  top: var(--header-height);
  z-index: 30;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.cursos-nav button {
  flex-shrink: 0;                 /* con nowrap, no se comprimen */
  display: inline-block;
  border: 1.5px solid var(--color-rojo);
  color: var(--color-rojo);
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  font-family: var(--font-medium);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.cursos-nav button:hover,
.cursos-nav button.is-active {
  background: var(--color-rojo);
  color: var(--color-blanco);
}
/* Móvil: iguala testimonios (58→51px de alto). Padding izq. 14px (caso teléfono). */
@media (max-width: 700px) {
  .cursos-nav {
    padding: 10px 20px 10px 14px;  /* top/bottom 10, right 20, left 14 */
    gap: 8px;
    justify-content: flex-start;   /* primer chip completo; desborde a la derecha */
    scrollbar-width: thin;         /* misma scrollbar fina que testimonios/staff */
  }
  .cursos-nav button {
    padding: 8px 14px;
    font-size: 13px;
  }
}
/* Transición suave al filtrar: las tarjetas visibles hacen fade-in (opcional). */
.cursos-grid .curso-card {
  transition: opacity 0.25s ease;
}

/* ==========================================================================
   Tarjetas de Cursos: línea "Inicio de curso:" (pages/cursos.html)
   --------------------------------------------------------------------------
   Se eliminó la línea de categoría visible (.curso-card__categoria) y la línea
   "— clases" se reemplazó por "Inicio de curso:" (sin icono). Este .curso-card__inicio
   replica EXACTAMENTE las 4 propiedades de .curso-card__categoria (regla original
   2879, que se deja intacta) para que se vea igual que "Cursos de postgrado".
   El font-size/color heredados de .curso-card__info (13px/gris) se sobrescriben
   aquí porque la herencia pierde ante una declaración directa. La segunda línea
   (fecha, con su icono) queda como <span> sin clase → conserva su estilo original.
   ========================================================================== */
.curso-card__inicio {
  font-family: var(--font-medium);
  font-size: 12px;
  color: var(--color-gris-medio);
  letter-spacing: 0.3px;
}
/* Iguala el tamaño de la fecha al de "Inicio de curso:" (12px). La fecha heredaba
   13px de .curso-card__info (regla original 2896, que NO se toca porque afecta a
   todo el bloque). Este override directo gana a la herencia. El icono no encoge:
   .curso-card__info svg usa width/height fijos en px (14px), no em. */
.curso-card__fecha {
  font-size: 12px;
}

/* ==========================================================================
   FIX overflow horizontal — flechas del carrusel RM (pages/testimonios.html)
   --------------------------------------------------------------------------
   Problema: .rm-arrow--next (y --prev) son position:absolute y salen del
   carrusel con right/left: -22px (regla original 3053) reforzado a -62px en
   @media(min-width:769px) (regla 3912-3914). El .rm-carousel vive dentro de
   .testimonio-seccion > .container (max-width:1600px, padding 24px, box-sizing
   border-box). Mientras el container LLENA el viewport (solo 24px de gutter), la
   flecha sobresale ~38px del viewport → scroll horizontal en todo el rango
   ~769–1723px (incluido 1440px). En pantallas muy anchas (≳1724px) el container
   se centra en su max-width y deja margen lateral suficiente para absorber el -62px.

   Fix (enfoque A): SOLO en 769–1723px, recolocar las flechas HACIA ADENTRO
   (left/right: 4px, mismo patrón que la regla móvil ≤600px) para que queden
   completas y dentro del viewport → 0 overflow. A partir de 1724px NO aplica, así
   que se conserva el -62px original (flechas afuera, ya caben). ≤768px tampoco
   aplica (min-width:769px): las flechas siguen en position:static en su fila de
   controles. No se modifican las reglas originales (3038/3053/3912-3914); este
   override gana por igual especificidad + orden de fuente.
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1723px) {
  #residentado .rm-arrow--prev { left: 4px; }
  #residentado .rm-arrow--next { right: 4px; }
}

/* ==========================================================================
   OVERRIDE — Zona de imagen de las tarjetas de cursos (pages/cursos.html)
   --------------------------------------------------------------------------
   La regla original .curso-card__imagen (línea 2842) usa aspect-ratio:16/10, que
   con object-fit:cover recortaba ~37.5% (arriba/abajo) las piezas cuadradas como
   ciencias-basicas-encib-2026-lll.png (1080×1080). Se pasa a 1/1 para que la pieza
   cuadrada se vea COMPLETA (0% recorte), como en la sección Cursos del home.
   .curso-card__imagen es exclusiva de cursos.html → este override (posterior en el
   archivo, gana por orden de fuente) NO afecta a ninguna otra página. object-fit:
   cover se mantiene; los placeholders (height:100%) se estiran solos al nuevo alto.
   NO se modifica la regla original 2842-2846.
   ========================================================================== */
.curso-card__imagen { aspect-ratio: 1 / 1; }

/* ============================================
   FIX v2: hover-flicker en .curso-card (página Cursos)
   Causa: .page-cursos .curso-card:hover (style.css:2837) aplica
   translateY(-6px) al MISMO elemento que dispara el :hover. En el borde
   inferior el cursor pierde el hover → la card baja → lo recupera → loop.
   No hay fix CSS-only con pseudo-elementos (son hijos y se transforman
   con la card). Solución: se elimina el desplazamiento y el feedback de
   hover queda a cargo de la sombra + el zoom de la imagen (ya existentes).
   ============================================ */
.page-cursos .curso-card:hover {
  transform: none;
}

/* ===== BOTÓN HERO SLIDE 1 — EMPIEZA TU CAMINO FÉNIX =====
   Estilo "ghost": transparente con borde blanco en normal; en HOVER/focus
   se vuelve ROJO institucional VillaMedic (efecto pulido tipo .topbar__btn);
   :active oscurece a rojo-oscuro. Scopeado a la primera slide ([data-slide="0"]):
   el .hero-slider__cta únicamente se renderiza ahí (las demás slides tienen
   cta:null en js/hero-slider.js), pero el scope lo garantiza. Overrides al
   FINAL del archivo — NO se modifica ninguna regla existente (.hero-slider__cta,
   líneas 1611-1631). Especificidad (0,3,0)/(0,4,0) → gana al base (0,1,0) sin
   !important. box-sizing:border-box global (línea 79) → el borde 2px no descuadra. */
.hero-slider__slide[data-slide="0"] .hero-slider__cta {
  background: transparent;
  border: 2px solid var(--color-blanco);
  color: var(--color-blanco);
  box-shadow: none;
  transform: none;
  transition: all 0.25s ease;              /* mismo transition que .topbar__btn */
  -webkit-tap-highlight-color: transparent;
}
/* Hover y focus: se vuelve ROJO institucional, con lift + sombra (pulido). */
.hero-slider__slide[data-slide="0"] .hero-slider__cta:hover,
.hero-slider__slide[data-slide="0"] .hero-slider__cta:focus-visible {
  background: var(--color-rojo);
  border-color: var(--color-rojo);
  color: var(--color-blanco);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(205, 52, 51, 0.45);
}
/* Active (presionado): rojo oscuro, sin lift. */
.hero-slider__slide[data-slide="0"] .hero-slider__cta:active {
  background: var(--color-rojo-oscuro);
  border-color: var(--color-rojo-oscuro);
  color: var(--color-blanco);
  transform: translateY(0);
}

/* ===== BOTÓN "VER MÁS" — SECCIÓN CURSOS (HOME) =====
   Efecto HOVER-INVERT (idéntico al de INSCRIBIRME): normal = rojo relleno +
   texto blanco; hover = se invierte a fondo blanco con borde y texto rojos.
   Fondo de la sección .cursos es #EEEEEE (override css/style.css:3856; base
   gris-claro :650). El relleno blanco (#FFFFFF) del hover es ligeramente más
   claro que el #EEEEEE → se distingue sutilmente, además del borde/texto rojos
   y la sombra (confirmado con el usuario).
   Scopeado a #cursos (526-617) → NO afecta al "Ver más" de testimonios
   (index.html:646, fuera de la sección), ni a "Inscribirme", 404,
   por-que-villamedic, ni al "Limpiar todo" de cursos.html.
   CRÍTICO: el :hover base .btn--primary:hover (línea 141, especificidad 0,2,0)
   pone background rojo-oscuro; este override :hover es (1,2,0) → lo gana sin
   !important. Base normal (0,1,0) también perdido por el (1,1,0) de aquí.
   NO se tocan .btn/.btn--primary (120-146). Padding 12px 28px → 10px 26px para
   compensar el borde 2px y conservar el tamaño exterior. */
#cursos .btn--primary {
  background: var(--color-rojo);
  border: 2px solid var(--color-rojo);
  color: var(--color-blanco);
  padding: 10px 26px;
  box-shadow: 0 3px 10px rgba(205, 52, 51, 0.25);
  transition: all 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
/* Hover y focus: se INVIERTE (fondo blanco, borde y texto rojos), con lift. */
#cursos .btn--primary:hover,
#cursos .btn--primary:focus-visible {
  background: var(--color-blanco);
  border-color: var(--color-rojo);
  color: var(--color-rojo);
  box-shadow: 0 6px 16px rgba(205, 52, 51, 0.35);
}
/* Active (presionado): fondo blanco, borde y texto rojo-oscuro, sin lift. */
#cursos .btn--primary:active {
  background: var(--color-blanco);
  border-color: var(--color-rojo-oscuro);
  color: var(--color-rojo-oscuro);
  transform: translateY(0);
}

/* ===== BOTÓN "INSCRIBIRME" — SECCIÓN INSCRIPCIONES (HOME) =====
   Efecto HOVER-INVERT: normal = rojo relleno + texto blanco; hover = se invierte
   a fondo blanco con borde y texto rojos (look outline). Fondo de la sección
   .inscripciones es blanco (var(--color-blanco) #FFFFFF, css/style.css:1097), así
   que en hover el relleno blanco coincide con el fondo y el botón se lee por su
   borde/texto rojos + la sombra.
   Scopeado a #inscripciones (que contiene UN solo .btn--primary, index.html:778)
   → NO afecta a ningún otro botón (Ver más cursos/testimonios, Inscribirme aparte,
   404, por-que-villamedic, Limpiar todo de cursos.html).
   CRÍTICO: el :hover base .btn--primary:hover (línea 141, especificidad 0,2,0)
   pone background rojo-oscuro; este override :hover es (1,2,0) → lo gana sin
   !important. Base normal (0,1,0) también perdido por el (1,1,0) de aquí.
   NO se tocan .btn/.btn--primary (120-146). Padding 12px 28px → 10px 26px para
   compensar el borde 2px y conservar el tamaño exterior. */
#inscripciones .btn--primary {
  background: var(--color-rojo);
  border: 2px solid var(--color-rojo);
  color: var(--color-blanco);
  padding: 10px 26px;
  box-shadow: 0 3px 10px rgba(205, 52, 51, 0.25);
  transition: all 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
/* Hover y focus: se INVIERTE (fondo blanco, borde y texto rojos), con lift. */
#inscripciones .btn--primary:hover,
#inscripciones .btn--primary:focus-visible {
  background: var(--color-blanco);
  border-color: var(--color-rojo);
  color: var(--color-rojo);
  box-shadow: 0 6px 16px rgba(205, 52, 51, 0.35);
}
/* Active (presionado): fondo blanco, borde y texto rojo-oscuro, sin lift. */
#inscripciones .btn--primary:active {
  background: var(--color-blanco);
  border-color: var(--color-rojo-oscuro);
  color: var(--color-rojo-oscuro);
  transform: translateY(0);
}

/* ===== BOTÓN ENVIAR — FORMULARIOS CONTÁCTANOS y LIBRO DE RECLAMACIONES =====
   Efecto HOVER-INVERT (mismo que #inscripciones .btn--primary): normal = rojo
   relleno + texto blanco; hover = fondo blanco + borde y texto rojos.
   La clase .form-submit es EXCLUSIVA de estas dos páginas (pages/contactanos.html
   y pages/libro-de-reclamaciones.html; 0 usos en el resto) → se UNIFICAN en un
   solo bloque, sin scope por página. Va al final del archivo → gana por orden de
   fuente a las reglas base .form-submit (2609-2633), misma especificidad, sin
   !important. NO se tocan esas reglas ni .btn/.btn--primary (120-146).
   El botón NO es full-width (align-self:flex-start) y es solo texto ("Enviar",
   sin icono). Ambos .form-card tienen fondo blanco (#FFFFFF, :2552) → el hover
   blanco se lee como outline (borde/texto rojos + sombra), igual que inscripciones.
   Padding 14px 32px → 12px 30px para compensar el borde 2px (tamaño exterior igual).
   Ambos forms ponen el botón en :disabled con textContent "Enviando…" durante el
   submit (contactanos JS ~625; libro-form JS ~293): el hover se anula con
   :not(:disabled) y el disabled se fuerza a rojo apagado. */
.form-submit {
  background: var(--color-rojo);
  border: 2px solid var(--color-rojo);
  color: var(--color-blanco);
  padding: 12px 30px;
  box-shadow: 0 3px 10px rgba(205, 52, 51, 0.25);
  transition: all 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
/* Hover y focus (solo si NO está disabled): se INVIERTE a blanco con rojo. */
.form-submit:not(:disabled):hover,
.form-submit:not(:disabled):focus-visible {
  background: var(--color-blanco);
  border-color: var(--color-rojo);
  color: var(--color-rojo);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(205, 52, 51, 0.35);
}
/* Active (presionado, no disabled): blanco con rojo-oscuro, sin lift. */
.form-submit:not(:disabled):active {
  background: var(--color-blanco);
  border-color: var(--color-rojo-oscuro);
  color: var(--color-rojo-oscuro);
  transform: translateY(0);
}
/* Disabled / loading ("Enviando…"): rojo apagado, sin hover ni lift. */
.form-submit:disabled {
  background: var(--color-rojo);
  border-color: var(--color-rojo);
  color: var(--color-blanco);
  opacity: 0.55;
  transform: none;
  cursor: not-allowed;
}

/* ===== BOTÓN "VER MÁS" — DOCENTES + PLATAFORMAS (POR QUÉ VILLAMEDIC) =====
   Mismo efecto hover-invert que #cursos / #inscripciones .btn--primary: normal rojo
   relleno + texto blanco; hover/focus invierte a blanco + rojo; active a rojo-oscuro.
   Scopeado a .staff-intro--docentes Y .staff-intro--plataformas (clases EXCLUSIVAS de
   pages/por-que-villamedic.html; cada sección tiene UN solo .btn--primary "Ver más").
   Fondo de la sección = blanco #FFFFFF (.staff-intro base sin background → body
   blanco, y la sección NO lleva --gris) → hover blanco = look outline, coherente con
   inscripciones. Especificidad: .staff-intro--docentes .btn--primary = (0,2,0) gana a
   .btn--primary (0,1,0); :hover = (0,3,0) gana a .btn--primary:hover (0,2,0) — sin
   !important. NO se tocan .btn/.btn--primary (120-146) ni los otros "Ver más".
   Padding 12px 28px → 10px 26px para compensar el borde 2px. */
.staff-intro--docentes .btn--primary,
.staff-intro--plataformas .btn--primary {
  background: var(--color-rojo);
  border: 2px solid var(--color-rojo);
  color: var(--color-blanco);
  padding: 10px 26px;
  box-shadow: 0 3px 10px rgba(205, 52, 51, 0.25);
  transition: all 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.staff-intro--docentes .btn--primary:hover,
.staff-intro--docentes .btn--primary:focus-visible,
.staff-intro--plataformas .btn--primary:hover,
.staff-intro--plataformas .btn--primary:focus-visible {
  background: var(--color-blanco);
  border-color: var(--color-rojo);
  color: var(--color-rojo);
  box-shadow: 0 6px 16px rgba(205, 52, 51, 0.35);
}
.staff-intro--docentes .btn--primary:active,
.staff-intro--plataformas .btn--primary:active {
  background: var(--color-blanco);
  border-color: var(--color-rojo-oscuro);
  color: var(--color-rojo-oscuro);
  transform: translateY(0);
}