/* =============================================================================
   INSTITUTO SAN FRANCISCO — CUSCO
   Hoja de estilos principal
   1.  Tokens de diseño
   2.  Reset y bases
   3.  Utilidades y componentes (botones, eyebrows, iconos, reveal)
   4.  Header + navegación + buscador
   5.  Hero
   6.  Barra de beneficios
   7.  Carreras (raíl de cards)
   8.  ¿Por qué estudiar en San Francisco?
   9.  Banner Cusco
   10. Cursos de Extensión
   11. Testimonios (slider)
   12. Proceso de Admisión
   13. CTA final
   14. Footer
   15. Modal de video / volver arriba
   16. Responsive
   ========================================================================== */

/* ============================== 1. TOKENS ================================= */
:root {
  /* Paleta cálida (solo acentos) */
  --cream: #ede0d4;
  --sand: #e6ccb2;
  --peach: #ddb892;
  --caramel: #b08968;
  --brown: #7f5539;
  --terracotta: #9c6644;

  /* Neutros */
  --ink: #182132;
  --black: #111111;
  --white: #ffffff;

  /* Fondos */
  --bg-main: #fffdfb;
  --bg-soft: #faf7f3;
  --bg-warm: #f7f0e9;

  /* Derivados */
  --muted: #6d655d;
  --muted-soft: #7c7469;
  --line: rgba(127, 85, 57, 0.12);
  --line-soft: rgba(127, 85, 57, 0.08);
  --on-dark: rgba(255, 255, 255, 0.74);

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 72px;
  --space-2xl: 110px;

  /* Layout */
  --container: 1440px;
  --container-wide: 1380px;
  --gutter: clamp(20px, 5vw, 80px);
  --header-h: 78px;

  /* Radios */
  --r-sm: 12px;
  --r-md: 14px;
  --r-lg: 16px;
  --r-xl: 18px;
  --r-2xl: 22px;
  --r-3xl: 24px;

  /* Sombras */
  --shadow-sm: 0 6px 18px rgba(32, 22, 16, 0.05);
  --shadow-md: 0 14px 34px rgba(32, 22, 16, 0.09);
  --shadow-lg: 0 30px 80px rgba(32, 22, 16, 0.12);
  --shadow-bar: 0 18px 50px rgba(30, 20, 10, 0.1);

  /* Gradientes */
  --grad-bg: linear-gradient(135deg, #fff 0%, #fbf7f3 50%, #f4ebe3 100%);
  --grad-btn: linear-gradient(135deg, #b08968, #8e5d42);
  --grad-btn-hover: linear-gradient(135deg, #bb9271, #7f5539);
  --grad-text: linear-gradient(135deg, #c28b67, #87563d);
  --grad-step: linear-gradient(135deg, #d5a17d, #a96f4d);

  /* Motion: un solo lenguaje de easing para todo el sitio */
  --ease: cubic-bezier(0.22, 0.68, 0.24, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.2s;
  --dur: 0.34s;
  --dur-slow: 0.6s;
  --lift: -3px;
}

/* ========================= 2. RESET Y BASES ============================== */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg-main);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--black);
  font-weight: 700;
}

p { text-wrap: pretty; }

img, svg, video { display: block; max-width: 100%; }

/* Aparición suave de cada imagen al terminar de cargar (la clase la añade el JS) */
.img-fade {
  opacity: 0;
  transition: opacity 0.7s var(--ease-out);
}
.img-fade.is-loaded { opacity: 1; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; }
figure, blockquote { margin: 0; }
blockquote p { margin: 0; }

::selection { background: rgba(176, 137, 104, 0.28); color: var(--black); }

:focus-visible {
  outline: 3px solid rgba(176, 137, 104, 0.35);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 10px; left: 50%;
  transform: translate(-50%, -160%);
  z-index: 999;
  background: var(--ink); color: #fff;
  padding: 12px 22px; border-radius: 12px;
  font-size: 14px; font-weight: 600;
  transition: transform 0.3s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ==================== 3. UTILIDADES Y COMPONENTES ======================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { position: relative; padding-block: clamp(72px, 8vw, var(--space-2xl)); }
.section-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.section-blob--a { width: 460px; height: 460px; top: -140px; right: -120px; background: rgba(221, 184, 146, 0.35); }
.section-blob--b { width: 520px; height: 520px; bottom: -180px; left: -160px; background: rgba(176, 137, 104, 0.22); }

/* --- Iconos (atlas SVG inline) --- */
.ico {
  display: inline-block;
  width: 1em; height: 1em;
  flex: none;
  font-size: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: middle;
}

.ico-svg {
  width: 1em; height: 1em;
  display: block;
  overflow: visible;
  pointer-events: none;
}

/* --- Iconografía Flaticon UIcons (principal) con respaldo SVG local -------
   La clase .fi-rr-* / .fi-brands-* debe ir primero en el atributo class,
   porque uicons aplica la fuente con selectores [class^=fi-rr-] y
   [class*=fi-rr-]. El glifo solo se muestra con la clase .flaticon en <html>,
   que el JS añade cuando confirma que la fuente cargó; mientras tanto se ve
   el respaldo SVG local, así nunca hay iconos vacíos. */
.fi { font-size: inherit; line-height: 1; }

html:not(.flaticon) .ico::before { content: none !important; }
html.flaticon .ico { background-image: none; }

.ico[data-ico] {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Iconos que van junto a texto (no son cajas): heredan tamaño y color */
.ico-text { font-size: 14px; }
.ico-text.ico-arrow-up { transform: rotate(-90deg); }

/* Las flechas se deslizan, nunca giran en seco */
.ico-arrow-right,
.ico-arrow-right::before,
.ico-angle,
.ico-angle::before { transition: transform var(--dur) var(--ease); }
.ico-angle { font-size: 15px; }

/* --- Eyebrow / mini título --- */
.eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 14px;
}
.eyebrow-line { display: inline-flex; align-items: center; gap: 12px; }
.eyebrow-line::before {
  content: '';
  width: 34px; height: 2px; border-radius: 2px;
  background: var(--grad-text);
}
.eyebrow-light { color: rgba(255, 255, 255, 0.78); }
.eyebrow-light.eyebrow-line::before { background: rgba(255, 255, 255, 0.5); }

/* --- Títulos de sección --- */
.section-title { font-size: clamp(30px, 3.4vw, 46px); }
.section-lead {
  font-size: 16.5px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 46ch;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: clamp(28px, 3.4vw, 52px);
  position: relative;
  z-index: 1;
}
.section-head-copy { max-width: 720px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 600;
  color: var(--terracotta);
  white-space: nowrap;
  transition: color 0.25s, gap 0.25s;
}
.link-arrow {
  position: relative;
  padding-bottom: 2px;
}
.link-arrow::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0.5;
  transition: transform 0.45s var(--ease-out);
}
.link-arrow .ico { font-size: 15px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover { color: var(--brown); gap: 13px; }
.link-arrow:hover::after { transform: scaleX(1); }
.link-arrow:hover .ico { transform: translateX(2px); }

/* --- Botones --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  padding: 0 26px;
  border-radius: var(--r-md);
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn .ico { font-size: 16px; transition: transform var(--dur) var(--ease); }
.btn:hover .ico-arrow-right,
.btn:hover .ico-angle { transform: translateX(2px); }
.btn-lg { height: 52px; padding: 0 30px; font-size: 15px; }
.btn-block { width: 100%; }

.btn-primary {
  background: var(--grad-btn);
  color: #fff;
  box-shadow: 0 10px 22px rgba(127, 85, 57, 0.18);
}
.btn-primary:hover {
  background: var(--grad-btn-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(127, 85, 57, 0.22);
}
.btn-ghost {
  background: #fff;
  color: var(--ink);
  border-color: #d9c9bc;
  box-shadow: 0 6px 18px rgba(32, 22, 16, 0.04);
}
.btn-ghost:hover {
  border-color: var(--caramel);
  color: var(--brown);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(127, 85, 57, 0.14);
}
.btn-sand {
  background: var(--peach);
  color: #2c211b;
  box-shadow: 0 10px 24px rgba(221, 184, 146, 0.24);
}
.btn-sand:hover {
  background: #e5c6a3;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(221, 184, 146, 0.36);
}

.icon-btn {
  width: 42px; height: 42px;
  display: inline-grid; place-items: center;
  border-radius: 12px;
  color: var(--ink);
  transition: background 0.25s, color 0.25s, transform 0.25s var(--ease);
}
.icon-btn .ico { font-size: 17px; }
.icon-btn:hover { background: var(--bg-warm); color: var(--brown); transform: translateY(-1px); }

.round-btn {
  position: relative;
  width: 42px; height: 42px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(176, 137, 104, 0.42);
  background: #fff;
  color: var(--caramel);
  box-shadow: 0 4px 14px rgba(32, 22, 16, 0.05);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.round-btn .ico { font-size: 15px; line-height: 1; transition: transform var(--dur) var(--ease); }
.round-btn:hover {
  background: var(--caramel);
  border-color: var(--caramel);
  color: #fff;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 26px rgba(127, 85, 57, 0.2);
}
.round-btn:hover .ico { transform: translateX(1.5px); }
.round-btn:active { transform: translateY(0) scale(0.97); }
.round-btn[disabled] { opacity: 0.32; pointer-events: none; box-shadow: none; }

/* --- Reveal (IntersectionObserver) --- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
/* Las cards entran con un punto de escala para dar profundidad */
.reveal.card,
.reveal .card,
.reveal.mini-card,
.reveal .t-card { transform: translateY(22px) scale(0.985); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Seguro: si el JS no llega a activar el reveal (o el observador no dispara),
   el contenido aparece igualmente pasados 1,5 s. Evita secciones en blanco. */
@keyframes revealFallback {
  to { opacity: 1; transform: none; }
}
.reveal {
  animation: revealFallback 0.6s var(--ease-out) 1.5s forwards;
}

/* ======================= 4. HEADER / NAVEGACIÓN ========================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(127, 85, 57, 0.07);
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header.is-stuck {
  box-shadow: 0 10px 30px rgba(32, 22, 16, 0.07);
  background: rgba(255, 255, 255, 0.96);
}

.header-inner {
  height: var(--header-h);
  display: grid;
  grid-template-columns: 215px 1fr 215px;
  align-items: center;
  gap: var(--space-md);
  transition: height var(--dur) var(--ease);
}
.site-header.is-stuck .header-inner { height: 68px; }

.brand { display: inline-flex; align-items: center; }
.brand img { width: 200px; height: auto; transition: width var(--dur) var(--ease); }
.site-header.is-stuck .brand img { width: 180px; }

.main-nav { display: flex; justify-content: center; }
.nav-list { display: flex; align-items: center; gap: 4px; }
.nav-link {
  position: relative;
  display: inline-block;
  padding: 10px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: #3c3733;
  transition: color 0.25s;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--caramel);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.nav-link:hover { color: var(--brown); }
.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--black); font-weight: 600; }

.nav-foot { display: none; }

.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.nav-cta { height: 46px; padding: 0 26px; }

.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  place-items: center;
  border: 1px solid var(--line);
  background: #fff;
}
.menu-bars { display: grid; gap: 4px; width: 20px; }
.menu-bars i {
  display: block; height: 1.8px; width: 100%;
  background: var(--ink); border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s;
}
.menu-toggle[aria-expanded='true'] .menu-bars i:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] .menu-bars i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded='true'] .menu-bars i:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }

/* Buscador */
.search-panel {
  border-top: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.98);
  animation: fadeDown 0.3s var(--ease-out);
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.search-form {
  display: flex; align-items: center; gap: 14px;
  height: 68px;
}
.search-form .ico-search { font-size: 20px; color: var(--caramel); }
.search-form input {
  flex: 1;
  height: 44px;
  border: 0; background: transparent;
  font-size: 15px; color: var(--ink);
}
.search-form input:focus { outline: none; }
.search-form input:focus-visible {
  outline: 3px solid rgba(176, 137, 104, 0.35);
  outline-offset: 3px;
  border-radius: 8px;
}
.search-form input::placeholder { color: var(--muted-soft); }
.search-close { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--muted); }
.search-close:hover { background: var(--bg-warm); color: var(--brown); }
.search-close .ico { font-size: 18px; }

/* ============================= 5. HERO =================================== */
.hero {
  position: relative;
  /* Full-bleed: la foto ocupa todo el ancho de la ventana.
     El texto se alinea con el contenedor del header mediante .hero-inner */
  min-height: clamp(680px, 52vw, 760px);
  padding-block: clamp(44px, 5.4vw, 80px) clamp(58px, 6vw, 86px);
  background:
    radial-gradient(900px 520px at 8% 12%, #ffffff 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(135deg, #fffdfb 0%, #fbf7f3 52%, #f4ebe3 100%);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(127, 85, 57, 0.07) 1px, transparent 1px);
  background-size: 5px 5px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}

/* Columna izquierda del hero: banda del 10% en #FFFDFB.
   El marco de la fotografía empieza justo aquí (left: 10% en .hero-media),
   de modo que la columna EMPUJA la imagen hacia la derecha. */
.hero::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 10%;
  background: #FFFDFB;
  pointer-events: none;
  z-index: 0;
}

/* Permite animar la escala del hero (la transición de una custom property
   necesita estar registrada como <number> para interpolar) */
@property --hero-photo-scale {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

.hero-media {
  position: absolute;
  top: 0; bottom: 0;
  /* Mandos de la composicion del hero:
     --hero-photo-scale : sobre-escalado minimo que da margen a la foto para
                          poder desplazarla sin que asome ningun borde.
     --hero-photo-x/y   : encuadre interior (object-position). Es el mando para
                          mover a la persona: 50% = centro; cuanto mas alto,
                          mas a la DERECHA se ve a la persona.
     --hero-photo-nudge : desplazamiento extra por transform. Mantener en 0. */
  --hero-photo-nudge: 0px;
  --hero-photo-scale: 1.15;
  --hero-photo-x: 12%;
  --hero-photo-y: 42%;

  /* Full-bleed a partir de la columna izquierda: el marco empieza al 10% y
     llega al borde derecho, así la fotografía se desplaza a la derecha */
  left: 10%;
  right: 0;
  width: auto;
  z-index: 0;
  overflow: hidden;
}
.hero-photo {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--hero-photo-x) var(--hero-photo-y);
  /* El desplazamiento del sujeto forma parte del transform, así nada lo pisa */
  transform: translateX(var(--hero-photo-nudge, 0)) scale(var(--hero-photo-scale, 1));
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Velo encima de la foto: blanco suave sobre el texto y se abre hacia la imagen. */
.hero-photo-wash {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.9) 28%, rgba(255, 255, 255, 0.45) 40%, transparent 52%);
}
.hero-fade-left {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 253, 251, 0.16) 0%, rgba(255, 253, 251, 0) 14%);
}
.hero-fade-bottom {
  /* Ahora la foto ocupa todo el ancho del hero: el degradado la funde con el
     fondo en el borde inferior y coincide con la barra de beneficios */
  position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  background: linear-gradient(180deg, rgba(250, 247, 243, 0) 0%, rgba(250, 247, 243, 0.18) 58%, rgba(250, 247, 243, 0.5) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 44% 56%;
  align-items: center;
  min-height: 520px;
}

.hero-copy { max-width: 620px; position: relative; grid-column: 1; }
.hero-title {
  font-size: clamp(46px, 5vw, 76px);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 20px;
}
.hero-title-accent {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero-lead {
  font-size: 17px;
  line-height: 1.65;
  color: #4a443d;
  max-width: 440px;
  margin-bottom: 30px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }

.hero-proof { display: flex; align-items: center; gap: 16px; }
.avatar-stack { display: flex; align-items: center; }
.avatar-stack li {
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(32, 22, 16, 0.12);
  background: var(--cream);
}
.avatar-stack li + li { margin-left: -14px; }
.avatar-stack img { width: 100%; height: 100%; object-fit: cover; }
.avatar-stack-copy { display: grid; line-height: 1.25; }
.avatar-stack-copy strong {
  font-family: 'Poppins', sans-serif;
  font-size: 15px; font-weight: 700; color: var(--black);
}
.avatar-stack-copy > span { font-size: 12.5px; color: var(--muted); }

/* Contadores animados: evita saltos de ancho y hereda tipografía del padre. */
.count,
.benefit strong { font-variant-numeric: tabular-nums; }
.count,
.avatar-stack-copy .count {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
}

.hero-watermark {
  position: absolute;
  left: -6px; bottom: -54px;
  font-family: 'Poppins', sans-serif;
  font-size: 130px;
  font-weight: 800;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(176, 137, 104, 0.28);
  user-select: none;
  pointer-events: none;
  z-index: -1;
}

.hero-card {
  position: absolute;
  right: clamp(40px, 7vw, 112px);
  bottom: clamp(34px, 3.4vw, 54px);
  width: 206px;
  padding: 20px 20px 22px;
  border-radius: var(--r-2xl);
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 22px 50px rgba(32, 22, 16, 0.13);
  z-index: 4;
  /* Sin flotación: la tarjeta se mantiene firme (interfaz sobria) */
  animation: none;
}
.hero-card-icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: rgba(176, 137, 104, 0.14);
  color: var(--caramel);
  font-size: 24px;
  margin-bottom: 14px;
}.hero-card p {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.6;
  color: #4d463f;
}

/* ===================== 6. BARRA DE BENEFICIOS =========================== */
.benefits { position: relative; z-index: 5; margin-top: -38px; }
.benefits-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-bar);
  overflow: hidden;
}
.benefit {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 26px;
  position: relative;
}
.benefit + .benefit::before {
  content: '';
  position: absolute;
  left: 0; top: 22%; bottom: 22%;
  width: 1px;
  background: var(--line-soft);
}
.benefit .ico { font-size: 30px; color: var(--caramel); }
.benefit div { display: grid; line-height: 1.3; }
.benefit strong {
  font-family: 'Inter', sans-serif;
  font-size: 15px; font-weight: 700; color: var(--black);
}
.benefit div > span { font-size: 12.5px; color: var(--muted); }

/* ========================== 7. CARRERAS ================================= */
.careers { background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-main) 32%); }

.rail-wrap { position: relative; }
.rail {
  display: grid;
  gap: 20px;
}
.rail--careers { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rail--courses { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(22, 18, 15, 0.045);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform var(--dur-slow) var(--ease-out),
              box-shadow var(--dur-slow) var(--ease-out),
              border-color var(--dur) var(--ease);
}
.card:hover {
  transform: translateY(var(--lift));
  box-shadow: 0 20px 42px rgba(22, 18, 15, 0.1);
  border-color: rgba(176, 137, 104, 0.22);
}

.card-media { display: block; overflow: hidden; }
.card-media img {
  width: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}
.card-career .card-media img { aspect-ratio: 0.92 / 1; height: auto; max-height: 285px; }
.card-course .card-media img { aspect-ratio: 16 / 8.5; }
.card:hover .card-media img { transform: scale(1.04); }

@media (min-width: 1401px) {
  .card-career .card-media img { aspect-ratio: auto; height: clamp(250px, 18vw, 285px); }
}

.card-body {
  position: relative;
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.card-title {
  font-family: 'Poppins', sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--black);
  padding-right: 46px;
  transition: color 0.35s var(--ease-ui);
}
.card-text { font-size: 13px; color: var(--muted); line-height: 1.55; padding-right: 40px; }

/* --- Botón de flecha de las cards (carreras y cursos) ---
   Reposo: círculo de 34px con un chevron muy pequeño (6px) para que respire.
   Hover: tinte suave y cálido, nunca un relleno oscuro de golpe. */
.card-go {
  position: absolute;
  right: 16px; bottom: 18px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(156, 102, 68, 0.2);
  background: transparent;
  color: #A97A5C;
  font-size: 6px;
  line-height: 1;
  box-shadow: none;
  transition: background 0.65s var(--ease-ui), color 0.65s var(--ease-ui),
              border-color 0.65s var(--ease-ui), box-shadow 0.65s var(--ease-ui);
}
/* Tamaño fijado también en el propio glifo: gana a cualquier regla previa */
.card .card-go::before,
.card-go.ico::before {
  font-size: 6px !important;
  line-height: 1;
}
/* El icono se desliza con una curva más larga que el color: movimiento sedoso */
.card-go::before {
  display: block;
  transition: transform 0.75s var(--ease-ui);
}
.card:hover .card-go,
.card:focus-within .card-go {
  /* Tinte cálido translúcido en vez de marrón pleno: el cambio es gradual */
  background: rgba(156, 102, 68, 0.12);
  border-color: rgba(156, 102, 68, 0.42);
  color: #8A5533;
  box-shadow: none;
}
/* Deslizamiento mínimo: se percibe, no salta */
.card:hover .card-go::before,
.card:focus-within .card-go::before { transform: translateX(1.5px); }
.card:hover .card-title { color: var(--brown); }

.rail-progress {
  display: none;
  height: 3px;
  border-radius: 3px;
  background: rgba(127, 85, 57, 0.12);
  margin-top: 22px;
  overflow: hidden;
}
.rail-progress span {
  display: block;
  height: 100%;
  width: 30%;
  border-radius: 3px;
  background: var(--grad-btn);
  transform: translateX(0);
  transition: transform 0.2s linear;
}

/* ================= 8. ¿POR QUÉ ESTUDIAR EN SAN FRANCISCO? =============== */
.why {
  position: relative;
  background: linear-gradient(135deg, #fffdfb 0%, #f8f1eb 100%);
  overflow: hidden;
}
.why-grid {
  position: relative;
  z-index: 2;              /* el contenido va por encima del fondo */
  display: grid;
  grid-template-columns: 33fr 32fr 35fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
/* Todo lo que no sea el fondo queda por encima (texto, tarjetas, notas) */
.why > *:not(.why-photo) { position: relative; z-index: 1; }
/* Foto de estudiantes como FONDO del lado derecho de la sección.
   El degradado de .why-photo la funde con el fondo en su borde izquierdo,
   así el texto y las tarjetas quedan limpios encima. */
.why-photo {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  left: auto;
  width: 40%;              /* solo el tramo final de la fila, pegado a la derecha */
  height: 100%;
  min-height: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  z-index: 0;              /* por debajo de todo el contenido */
  pointer-events: none;
}
/* Solo un degradado corto al inicio de la imagen: la fusiona con el fondo de la
   fila sin restarle nitidez (a partir del 20% se ve la foto limpia) */
.why-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    #FBF6F0 0%,
    rgba(251, 246, 240, 0.72) 4%,
    rgba(251, 246, 240, 0.34) 10%,
    rgba(251, 246, 240, 0.1) 16%,
    rgba(251, 246, 240, 0) 22%);
}
.why-photo img {
  width: 100%; height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: 62% 50%;
}

.why-copy .section-title { margin-bottom: 18px; }
.why-copy .section-lead { margin-bottom: 28px; }

.why-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.mini-card {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(176, 137, 104, 0.12);
  border-radius: var(--r-lg);
  padding: 22px 20px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s;
}
.mini-card:hover {
  transform: translateY(-3px);
  background: #fff;
  box-shadow: 0 18px 40px rgba(32, 22, 16, 0.08);
}
.mini-icon {
  display: grid; place-items: center;
  width: 50px; height: 50px;
  border-radius: 14px;
  background: rgba(176, 137, 104, 0.12);
  color: var(--caramel);
  font-size: 28px;
  margin-bottom: 14px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.mini-card:hover .mini-icon { background: var(--grad-btn); color: #fff; transform: translateY(-1px) scale(1.04); }
.mini-card h3 {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.mini-card p { font-size: 12.5px; color: var(--muted); line-height: 1.55; }

/* =========================== 9. BANNER CUSCO ============================ */
.cusco {
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.cusco-media { position: absolute; inset: 0; z-index: -2; }
.cusco-media img { width: 100%; height: 100%; object-fit: cover; }
.cusco::after {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    rgba(14, 18, 22, 0.82) 0%,
    rgba(14, 18, 22, 0.58) 35%,
    rgba(14, 18, 22, 0.08) 70%);
}
.cusco-inner { position: relative; z-index: 1; padding-block: clamp(72px, 8vw, 104px); }
.cusco-copy { max-width: 520px; }
.cusco-copy h2 {
  color: #fff;
  font-size: clamp(32px, 3.6vw, 54px);
  margin-bottom: 16px;
}
.cusco-copy p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  max-width: 42ch;
  margin-bottom: 28px;
}

.video-trigger { display: inline-flex; align-items: center; gap: 16px; color: #fff; }
.video-btn {
  display: grid; place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform 0.3s var(--ease), background 0.3s, border-color 0.3s;
}
.video-btn .ico { font-size: 18px; color: #fff; margin-left: 2px; }
.video-trigger:hover .video-btn {
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.24);
  border-color: #fff;
}
.video-label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.video-trigger:hover .video-label { text-decoration: underline; text-underline-offset: 4px; }

/* ===================== 10. CURSOS DE EXTENSIÓN ========================== */
.courses { background: var(--bg-main); }

/* ======================== 11. TESTIMONIOS =============================== */
.testimonials { background: linear-gradient(180deg, var(--bg-main) 0%, var(--bg-warm) 100%); }

.slider { overflow: hidden; padding: 6px 4px 10px; margin-inline: -4px; }
.slider-track {
  display: flex;
  gap: 22px;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.slider-slide {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
}

.t-card {
  position: relative;
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: stretch;
  gap: 18px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.t-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(32, 22, 16, 0.09); }

/* Retrato alto a la izquierda, a toda la altura de la card */
.t-person {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  min-height: 168px;
}
.t-person img { width: 100%; height: 100%; object-fit: cover; }

.t-content { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.t-card blockquote { flex: 1; padding-right: 42px; }
.t-card blockquote p {
  font-size: 14px;
  line-height: 1.6;
  color: #3f3a35;
}
.t-meta { display: grid; gap: 2px; padding-right: 46px; }
.t-meta strong {
  font-family: 'Poppins', sans-serif;
  font-size: 14.5px; font-weight: 700; color: var(--black);
}
.t-meta span { font-size: 12.5px; color: var(--muted); }

/* Comilla decorativa de cierre, abajo a la derecha (rellena) */
.t-quote {
  position: absolute;
  right: 20px; bottom: 16px;
  font-size: 42px;
  color: var(--peach);
  line-height: 1;
  pointer-events: none;
}

/* ====================== 12. PROCESO DE ADMISIÓN ========================= */
.admission { background: var(--bg-soft); }

/* Fila 1: título a la izquierda, CTA a la derecha */
.admission-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: clamp(32px, 4vw, 56px);
}
.admission-head .section-title { font-size: clamp(28px, 3vw, 42px); }

/* Fila 2: los tres pasos a todo el ancho */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
}
.step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding-right: 26px;
}
.step + .step::before {
  content: '';
  position: absolute;
  left: -12px; top: 29px;
  width: 24px; height: 1px;
  background: var(--line);
}
.step-num {
  display: grid; place-items: center;
  width: 58px; height: 58px;
  flex: none;
  border-radius: 50%;
  background: var(--grad-step);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 20px; font-weight: 600;
  box-shadow: 0 10px 24px rgba(169, 111, 77, 0.24);
}
.step-copy h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.step-copy p { font-size: 13px; color: var(--muted); line-height: 1.55; }

.admission-cta {
  display: grid;
  justify-items: end;
  gap: 12px;
  flex: none;
}
.admission-cta .link-arrow { font-size: 13px; }

/* ========================= 13. CTA FINAL ================================ */
.final-cta {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.final-cta-media { position: absolute; inset: 0; z-index: -2; }
.final-cta-media img { width: 100%; height: 100%; object-fit: cover; }
.final-cta-shade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
    rgba(25, 19, 15, 0.86) 0%,
    rgba(25, 19, 15, 0.6) 50%,
    rgba(25, 19, 15, 0.18) 100%);
}
.final-cta-inner { position: relative; z-index: 1; padding-block: clamp(64px, 7vw, 96px); }
.final-cta-copy { max-width: 560px; }
.final-cta-copy h2 {
  color: #fff;
  font-size: clamp(32px, 3.6vw, 52px);
  margin-bottom: 14px;
}
.final-cta-copy p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  max-width: 44ch;
  margin-bottom: 26px;
}

/* ============================ 14. FOOTER ================================ */
.site-footer {
  background: #151515;
  color: rgba(255, 255, 255, 0.7);
  padding: 55px 0 30px;
}
.footer-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-lg);
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-brand img {
  width: 230px; height: auto;
  /* El logotipo se invierte a blanco sobre el fondo oscuro, sin placa */
  filter: brightness(0) invert(1);
  opacity: 0.96;
}
.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
}
.footer-nav a {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.25s, transform 0.25s var(--ease);
  display: inline-block;
}
.footer-nav a:hover { color: var(--peach); transform: translateY(-1px); }

.socials { display: flex; align-items: center; gap: 10px; }
.socials a {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.82);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.socials .ico { font-size: 17px; }
.socials a:hover {
  background: var(--peach);
  border-color: var(--peach);
  color: #2c211b;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
}

/* ============== 15. MODAL DE VIDEO / VOLVER ARRIBA ===================== */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
}
.video-modal[hidden] { display: none; }
.video-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(12, 10, 9, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: fade 0.3s var(--ease-out);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.video-modal-box {
  position: relative;
  width: min(900px, 100%);
  border-radius: var(--r-3xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: pop 0.4s var(--ease-out);
}
@keyframes pop {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0f0d0c;
  display: grid;
  place-items: center;
  text-align: center;
}
.video-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.45;
}
.video-frame p {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.7;
  max-width: 42ch;
}
.video-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  transition: transform 0.25s var(--ease), background 0.25s;
}
.video-modal-close:hover { transform: rotate(90deg); background: #fff; }
.video-modal-close .ico { font-size: 18px; }

.to-top {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 80;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: #fff;
  color: var(--brown);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.to-top .ico { font-size: 18px; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--caramel); color: #fff; border-color: var(--caramel); }

/* ============================ 16. RESPONSIVE =========================== */
/* ---------- Portátiles grandes ---------- */
@media (max-width: 1400px) {
  .header-inner { grid-template-columns: 190px 1fr 190px; }
  .brand img { width: 190px; }
  .nav-list { gap: 0; }
  .nav-link { padding: 10px 8px; font-size: 12.5px; }
  .nav-link::after { left: 8px; right: 8px; }
  .nav-cta { padding: 0 20px; }
  .hero-inner { grid-template-columns: 46% 54%; }
  .hero-card { width: 190px; }
  .rail--careers { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .card-title { font-size: 15.5px; }
}

/* ---------- Tablet: 768 - 1100 ---------- */
@media (max-width: 1199px) {
  :root { --header-h: 74px; }

  .rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rail-item { flex: 0 0 auto; scroll-snap-align: start; }
  .rail--careers .rail-item { width: calc((100% - 32px) / 3.15); }
  .rail--courses .rail-item { width: calc((100% - 32px) / 2.2); }
  .rail-progress { display: block; }

  .why-grid { grid-template-columns: 1fr 1fr; }
  .why-copy { grid-column: 1 / -1; max-width: 620px; }
  .why-benefits { grid-column: 1; }
  /* La foto sigue de fondo a la derecha, ahora en el 42% del ancho */
  .why-photo { width: 42%; }

  .admission-top { flex-direction: column; align-items: flex-start; }
  .admission-cta { justify-items: start; }

  .footer-top { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 26px; }
  .footer-nav ul { justify-content: center; }
}

/* ---------- Navegación compacta (evita que el menú se apriete) ---------- */
@media (max-width: 1100px) {
  .header-inner { grid-template-columns: 1fr auto; }
  .brand img { width: 186px; }
  .site-header.is-stuck .brand img { width: 174px; }
  .nav-list { gap: 0; }
  .nav-link { padding: 10px 8px; font-size: 12.5px; }
  .main-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    display: block;
    background: rgba(255, 255, 255, 0.99);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 50px rgba(32, 22, 16, 0.14);
    padding: 18px var(--gutter) 26px;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.35s var(--ease), opacity 0.3s, visibility 0.3s;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .main-nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-link { padding: 14px 4px; font-size: 15px; border-bottom: 1px solid var(--line-soft); }
  .nav-link::after { left: 4px; right: auto; width: 26px; bottom: 8px; }
  .nav-foot { display: block; margin-top: 20px; }
  .nav-cta { display: none; }
  .menu-toggle { display: grid; }
  /* El hero pasa a una columna con la fotografía debajo del texto */
  .hero { display: flex; flex-direction: column; min-height: 0; padding-block: clamp(32px, 5vw, 56px) 0; }
  .hero-inner { order: 1; grid-template-columns: 1fr; min-height: 0; padding-bottom: 40px; }
  /* Alto acorde a la foto 16:9 para que no se recorte ni se deforme */
  .hero-media {
    order: 2;
    position: relative;
    inset: auto;
    /* Full-bleed real en móvil: el bloque abarca los dos bordes de la pantalla */
    left: auto; right: auto;
    width: 100%;
    max-width: 100%;
    height: clamp(240px, 56vw, 330px);
  }
  /* En una columna la foto va centrada: sin desplazamiento ni zoom de encuadre */
  .hero-photo { transform: none; --hero-photo-scale: 1; }
  .hero-photo-wash {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.35) 30%, rgba(255, 255, 255, 0) 62%);
  }
  .hero-copy { max-width: 640px; }
  .hero-watermark { display: none; }
  /* La tarjeta glass se apoya sobre la fotografía, no sobre los avatares */
  .hero-card {
    position: absolute;
    right: var(--gutter);
    bottom: 26px;
    left: auto;
    width: 220px;
    max-width: 62%;
    margin-top: 0;
    animation: none;
  }
  .benefits { margin-top: -34px; }
  .benefits-bar { grid-template-columns: repeat(2, 1fr); }
  .benefit:nth-child(1)::before,
  .benefit:nth-child(3)::before { display: none; }
  .benefit:nth-child(2),
  .benefit:nth-child(4) { border-left: 1px solid var(--line-soft); }
  .benefit:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }
}

/* ---------- Mobile: <= 767 ---------- */
@media (max-width: 767px) {
  :root { --header-h: 66px; --space-2xl: 76px; }

  .section { padding-block: 64px; }
  .brand img { width: 164px; }
  .site-header.is-stuck .brand img { width: 156px; }
  .icon-btn { width: 40px; height: 40px; }

  .hero { padding-block: 26px 0; }
  .hero-title { font-size: clamp(38px, 11vw, 48px); line-height: 0.98; }
  .hero-lead { font-size: 15.5px; margin-bottom: 24px; }
  .hero-actions { flex-direction: column; align-items: stretch; margin-bottom: 30px; }
  .hero-actions .btn { width: 100%; }
  .hero-media { height: clamp(240px, 56vw, 330px); width: 100%; max-width: 100%; }
  /* En móvil el encuadre se corre a la derecha: así la zona vacía del borde
     derecho de la fotografía queda fuera del marco y se ven los estudiantes */
  .hero-photo { object-position: 66% 14%; }
  /* En móvil la tarjeta va debajo de la foto, sin solaparla: la foto queda
     entera visible y la tarjeta respira */
  .hero-card {
    position: relative;
    right: auto; bottom: auto; left: auto;
    width: 100%;
    max-width: 100%;
    margin-top: 18px;
    padding: 18px;
    border-radius: 18px;
    box-shadow: 0 16px 34px rgba(32, 22, 16, 0.16);
  }
  .hero-card p { font-size: 11.5px; }
  .hero-proof { flex-wrap: wrap; gap: 12px; }

  /* Mismo solape de la barra que en tablet, para que la composición no salte */
  .benefits { margin-top: -34px; }
  .benefits-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--r-lg); }
  .benefit { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 18px; }
  .benefit .ico { font-size: 24px !important; color: #b17d5c !important; }
  .benefit strong { font-size: 14px; }
  .benefit div > span { font-size: 11.5px; }
  .benefit::before { display: none; }
  .benefit:nth-child(2n) { border-left: 1px solid var(--line-soft); }
  .benefit:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }

  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .section-title { font-size: clamp(27px, 8vw, 34px); }
  .section-lead { font-size: 15px; }

  .rail--careers .rail-item { width: 86%; }
  .rail--courses .rail-item { width: 88%; }
  .card-career .card-media img { max-height: none; }

  .why-grid { grid-template-columns: 1fr; gap: 26px; }
  .why-benefits { grid-column: 1; grid-template-columns: 1fr; }
  /* En una columna la foto vuelve a ser un bloque normal, debajo del texto */
  .why-photo { position: relative; width: 100%; min-height: 340px; left: auto; right: auto; }
  .why-photo img { min-height: 340px; }
  .why-photo::after {
    background: linear-gradient(180deg, #FBF6F0 0%, rgba(251, 246, 240, 0.4) 22%, rgba(251, 246, 240, 0) 45%);
  }

  .cusco { min-height: 500px; align-items: flex-end; }
  .cusco::after {
    background: linear-gradient(180deg,
      rgba(14, 18, 22, 0.55) 0%,
      rgba(14, 18, 22, 0.72) 46%,
      rgba(14, 18, 22, 0.88) 100%);
  }
  .cusco-inner { padding-block: 0 54px; }
  .cusco-copy h2 { font-size: clamp(28px, 8.4vw, 36px); }
  .video-btn { width: 52px; height: 52px; }

  .slider-track { gap: 16px; }
  .t-card {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 14px;
    padding: 18px 16px;
  }
  .t-person { min-height: 128px; }
  .t-card blockquote { padding-right: 30px; }
  .t-card blockquote p { font-size: 13.5px; }
  .t-meta { padding-right: 32px; }
  .t-quote { font-size: 34px; right: 14px; bottom: 12px; }

  .admission-top { flex-direction: column; align-items: flex-start; gap: 22px; }
  .admission-cta { justify-items: stretch; width: 100%; }
  .admission-cta .btn { width: 100%; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { padding: 0 0 26px 0; }
  .step + .step::before {
    left: 28px; top: -22px;
    width: 1px; height: 22px;
    background: var(--line);
  }
  .step + .step { padding-top: 22px; }
  .step-num { width: 52px; height: 52px; font-size: 18px; }

  .final-cta { min-height: 460px; align-items: flex-end; }
  .final-cta-shade {
    background: linear-gradient(180deg,
      rgba(25, 19, 15, 0.62) 0%,
      rgba(25, 19, 15, 0.82) 55%,
      rgba(25, 19, 15, 0.92) 100%);
  }
  .final-cta-inner { padding-block: 0 48px; }
  .final-cta-copy h2 { font-size: clamp(30px, 8.6vw, 38px); }

  .site-footer { padding: 44px 0 26px; }
  .footer-brand img { width: 200px; }
  .footer-nav ul { flex-direction: column; gap: 12px; }
  .socials { flex-wrap: wrap; justify-content: center; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }

  .to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; }
  .video-modal { padding: 14px; }
  .video-frame { aspect-ratio: 4 / 3; }
}

@media (max-width: 400px) {
  .benefits-bar { grid-template-columns: 1fr; }
  .benefit:nth-child(n) { border-left: 0; border-top: 1px solid var(--line-soft); }
  .benefit:first-child { border-top: 0; }
  .rail--careers .rail-item { width: 90%; }
  .hero-title { font-size: 44px; }
}

/* ---------- Preferencias de movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal,
  .reveal.card,
  .reveal .card,
  .reveal.mini-card,
  .reveal .t-card { opacity: 1 !important; transform: none !important; }
  .img-fade,
  .img-fade.is-loaded { opacity: 1 !important; transition: none !important; }
  .card:hover,
  .mini-card:hover,
  .t-card:hover { transform: none !important; }
  .card:hover .card-media img { transform: none !important; }

  /* Excepción: el carrusel de testimonios se mueve siempre. Si el sistema pide
     movimiento reducido, se acorta la transición pero NO se elimina, para que
     el desplazamiento siga siendo perceptible y suave. */
  .slider-track {
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
}

/* =====================================================================
   17. REFINAMIENTO VISUAL PREMIUM
   ---------------------------------------------------------------------
   Un solo lenguaje para iconos, flechas, bordes, sombras y movimiento.
   El marrón actúa como acento; el peso visual se rebaja en todo el UI.
   ===================================================================== */

/* ---------- 17.1 Paleta refinada ---------- */
:root {
  --ink: #17191D;
  --ink-soft: #29313D;

  --muted: #716B66;
  --muted-light: #99918B;

  --accent: #A66F4F;
  --accent-dark: #82533A;
  --accent-light: #DDB892;

  --cream: #F7F1EB;
  --cream-soft: #FCF9F6;
  --surface: #FFFFFF;

  --border: rgba(92, 70, 55, 0.09);

  --shadow-sm: 0 6px 20px rgba(45, 31, 22, 0.045);
  --shadow-md: 0 14px 40px rgba(45, 31, 22, 0.075);

  /* Alias que usan los componentes existentes -> mismo acento, un solo tono */
  --caramel: var(--accent);
  --terracotta: var(--accent-dark);
  --peach: var(--accent-light);

  /* Superficies cálidas armonizadas con la nueva paleta */
  --bg-main: #FFFCFA;
  --bg-soft: var(--cream-soft);
  --bg-warm: var(--cream);

  /* Iconografía: un único tono cálido y un neutro, nunca negro puro */
  --icon: var(--accent);
  --icon-soft: #B9896A;
  --icon-neutral: var(--ink-soft);

  /* Curva global de interacción */
  --ease-ui: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 17.2 Sistema de iconos ---------- */
/* Todos los iconos descienden del mismo trazo visual fino y del mismo tono. */
.ico {
  color: var(--icon);
  stroke-width: 1.6;
}
.fi { line-height: 1; }

/* Tamaños exactos por contexto: el icono nunca compite con el texto.
   (font-size con !important para vencer a las reglas heredadas de secciones) */
.main-nav .ico { font-size: 16px; }
.icon-btn .ico,
.search-form .ico-search { font-size: 17px !important; color: #554F4A !important; }
.btn .ico,
.btn .ico-text { font-size: 13px !important; }
.benefit .ico { font-size: 22px !important; color: var(--icon) !important; background: none; border-radius: 0; }
.mini-icon.ico { font-size: 22px !important; color: var(--icon) !important; }
.card-go.ico { font-size: 6px !important; color: #A97A5C !important; }
.socials .ico { font-size: 14px !important; }
.video-btn .ico { font-size: 15px !important; color: #fff !important; margin-left: 1px; }
.round-btn .ico { font-size: 12px !important; }
.link-arrow .ico { font-size: 12px !important; }
.to-top .ico { font-size: 15px !important; }
.video-modal-close .ico { font-size: 15px !important; }
.search-close .ico { font-size: 15px !important; }

/* ---------- 17.3 Flechas: círculo delicado en las cards ---------- */
.card {
  border-radius: 14px;
  border-color: rgba(50, 40, 32, 0.07);
  box-shadow: 0 7px 24px rgba(30, 24, 20, 0.045);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 42px rgba(30, 24, 20, 0.09);
  border-color: rgba(50, 40, 32, 0.09);
}
.card-media img { transition: transform 0.65s var(--ease-ui); }
.card:hover .card-media img { transform: scale(1.035); }

.card-go {
  width: 34px; height: 34px;
  right: 16px; bottom: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #A97A5C;
  background: transparent;
  border: 1px solid rgba(156, 102, 68, 0.2);
  box-shadow: none;
  transition: background 0.65s var(--ease-ui), color 0.65s var(--ease-ui),
              border-color 0.65s var(--ease-ui), box-shadow 0.65s var(--ease-ui);
}
/* El icono se desliza con una curva más larga que el color */
.card-go::before { display: block; transition: transform 0.75s var(--ease-ui); }
.card:hover .card-go,
.card:focus-within .card-go {
  background: rgba(156, 102, 68, 0.12);
  border-color: rgba(156, 102, 68, 0.42);
  color: #8A5533;
  box-shadow: none;
}
.card:hover .card-go::before,
.card:focus-within .card-go::before { transform: translateX(1.5px); }
.card-text { padding-right: 44px; }
.card-title { color: var(--ink); }

/* ---------- 17.4 Enlaces "Ver todas..." ---------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: #87583E;
}
.link-arrow .ico { font-size: 12px; color: inherit; transition: transform 0.25s ease; }
.link-arrow::after { display: none; }
.link-arrow:hover { color: #6F4632; gap: 8px; }
.link-arrow:hover .ico { transform: translateX(4px); }

/* ---------- 17.5 Barra de beneficios ---------- */
.benefits-bar {
  border: 1px solid var(--border);
  box-shadow: 0 14px 40px rgba(45, 31, 22, 0.06);
}
.benefit { gap: 16px; }
.benefit div { gap: 1px; }
.benefit strong {
  font-size: 15px;
  font-weight: 700;
  color: #252525;
  letter-spacing: -0.01em;
}
.benefit div > span {
  font-size: 11.5px;
  color: #7B746F;
  letter-spacing: 0;
}
.benefit + .benefit::before { background: rgba(34, 34, 34, 0.07); }
.benefit .ico {
  font-size: 26px !important;
  color: #b17d5c !important;
  background: transparent;
  border-radius: 0;
}

/* ---------- 17.6 "¿Por qué estudiar?" ---------- */
.mini-card {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(128, 91, 68, 0.08);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(60, 40, 25, 0.045);
}
.mini-card h3 {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.mini-card p { font-size: 12px; color: var(--muted); }
.mini-icon.ico {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 0;
  background: linear-gradient(135deg, rgba(221, 184, 146, 0.18), rgba(176, 137, 104, 0.08));
  margin-bottom: 12px;
  transition: background 0.3s ease, color 0.3s ease;
}
.mini-card:hover .mini-icon.ico {
  background: linear-gradient(135deg, rgba(166, 111, 79, 0.14), rgba(166, 111, 79, 0.07));
  color: var(--accent-dark);
  transform: none;
}

/* ---------- 17.7 Botones ---------- */
.btn { font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; }
.btn-lg { font-size: 13px; }
.btn-primary {
  min-height: 44px;
  padding: 0 21px;
  border-radius: 10px;
  background: linear-gradient(135deg, #A97050 0%, #8D5A3E 100%);
  box-shadow: 0 6px 18px rgba(127, 85, 57, 0.16);
  transition: transform 0.25s var(--ease-ui), box-shadow 0.25s var(--ease-ui),
              background 0.25s var(--ease-ui), color 0.25s ease;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #B0784F 0%, #96603F 100%);
  box-shadow: 0 10px 24px rgba(127, 85, 57, 0.22);
  transform: translateY(-2px);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(127, 85, 57, 0.18);
  box-shadow: none;
  color: #3A342F;
}
.btn-ghost:hover {
  background: #fff;
  border-color: rgba(127, 85, 57, 0.3);
  color: var(--accent-dark);
  box-shadow: 0 8px 20px rgba(127, 85, 57, 0.1);
  transform: translateY(-2px);
}
.btn-sand { box-shadow: 0 6px 18px rgba(221, 184, 146, 0.22); }
.icon-btn { border: 0; background: transparent; box-shadow: none; }
.icon-btn:hover { background: rgba(166, 111, 79, 0.07); color: var(--accent-dark); }

/* ---------- 17.8 Testimonios ---------- */
.t-quote {
  font-size: 26px;
  color: rgba(176, 137, 104, 0.65);
  opacity: 1;
}
.t-card { border-color: var(--border); }
.t-meta strong { color: var(--ink); }
.t-card blockquote p { color: #4A443E; }

/* ---------- 17.9 Controles y paginación del carrusel ---------- */
.round-btn {
  width: 34px; height: 34px;
  border: 1px solid rgba(127, 85, 57, 0.14);
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #87583E;
  box-shadow: none;
  transition: background 0.25s var(--ease-ui), color 0.25s ease,
              border-color 0.25s ease, transform 0.25s var(--ease-ui);
}
.round-btn:hover {
  background: #9C6644;
  border-color: #9C6644;
  color: #fff;
  transform: none;
  box-shadow: none;
}
.round-btn:hover .ico { transform: none; }

/* ---------- 17.10 Banner Cusco ---------- */
.video-btn {
  width: 46px; height: 46px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 0.3s ease, color 0.3s ease,
              border-color 0.3s ease, transform 0.3s var(--ease-ui);
}
.video-trigger:hover .video-btn {
  background: #fff;
  border-color: #fff;
  color: #7F5539;
  transform: scale(1.06);
}
.video-trigger:hover .video-btn .ico { color: #7F5539; }
.video-label { font-size: 13px; font-weight: 600; }

/* ---------- 17.11 Header ---------- */
.nav-link {
  font-size: 12px;
  font-weight: 500;
  color: #373330;
}
.nav-link.is-active { color: #8C5B40; font-weight: 600; }
.nav-link::after {
  left: 14px; right: 14px; bottom: 4px;
  height: 1px;
  background: #B08968;
}
.brand img { filter: saturate(0.96); }

/* ---------- 17.12 Footer ---------- */
.socials a {
  width: 34px; height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.75);
  transition: background 0.25s ease, color 0.25s ease,
              border-color 0.25s ease, transform 0.25s var(--ease-ui);
}
.socials a:hover {
  border-color: #B08968;
  background: #B08968;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: none;
}

/* ---------- 17.13 Números del proceso ---------- */
.step-num {
  background: linear-gradient(135deg, #B98159 0%, #9C6644 100%);
  box-shadow: 0 6px 16px rgba(156, 102, 68, 0.18);
  font-size: 18px;
  font-weight: 600;
}

/* ---------- 17.14 Animaciones y microinteracciones ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.75s var(--ease-ui), transform 0.75s var(--ease-ui);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal .card,
.reveal.mini-card,
.reveal .t-card { transform: translateY(18px) scale(0.99); }
.reveal.is-visible,
.reveal.is-visible .card,
.reveal.is-visible.mini-card,
.reveal.is-visible .t-card { opacity: 1; transform: none; }

/* Aparición de imágenes: 600 ms, sin zoom */
.img-fade { transition: opacity 0.6s var(--ease-ui); }

/* Ningún elemento juguetón: sin rotaciones ni rebotes */
.card:hover .card-go,
.card:hover .card-media img,
.mini-card:hover .mini-icon.ico,
.round-btn:hover,
.socials a:hover { animation: none; }

@media print {
  .card-go { display: none !important; }
}

/* Puntos de navegación del carrusel de testimonios: centrados bajo las cards */
.slider-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 28px;
}
.slider-dots[hidden] { display: none; }
.slider-dots button {
  width: 6px; height: 6px;
  padding: 0;
  border-radius: 999px;
  background: #D7CCC4;
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.slider-dots button:hover { background: #C3A48E; }
.slider-dots button.is-active {
  width: 22px;
  background: #B08968;
}

/* =====================================================================
   18. FULL-BLEED DEL HERO (garantía en todos los tamaños)
   El marco de la fotografía se ancla a los dos bordes del hero. Con
   left:0 y right:0 no puede quedar ninguna franja a los lados, y al ser
   una regla final gana a cualquier ancho heredado de las media queries.
   ===================================================================== */
.hero .hero-media {
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  margin: 0;
}
@media (max-width: 1100px) {
  .hero .hero-media {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
  }
}

/* ---------- Impresión ---------- */
@media print {
  .site-header, .to-top, .video-modal, .hero-card { display: none !important; }
  body { background: #fff; }
  .reveal { opacity: 1 !important; transform: none !important; }
}