/* =========================================================
   IGED — Instituto de Gestión y Desarrollo
   Hoja de estilos principal
   Identidad: blanco, gris cálido y rojo institucional.
   ========================================================= */

:root{
  /* Marca */
  --red:        #cf1b2b;
  --red-600:    #b31624;
  --red-700:    #96121e;
  --red-900:    #7a0e18;
  --red-400:    #e0323f;
  --red-tint:   #fdf1f2;
  --red-tint-2: #f7d9dc;
  --red-soft:   rgba(207,27,43,.10);
  --red-glow:   rgba(207,27,43,.26);

  /* Superficies */
  --bg:         #ffffff;
  --bg-2:       #faf8f7;
  --bg-3:       #f5f2f1;
  --hero-bg:    #f4f1f0;
  --line:       #eae5e4;
  --line-2:     #ded7d6;

  /* Texto */
  --ink:        #22262c;
  --tx:         #454b53;
  --tx-2:       #6b7280;
  --tx-3:       #9aa0a8;

  /* Azul marino institucional: da jerarquía sin competir con el rojo.
     Se usa en la barra de accesos, el mega menú y los sellos oficiales. */
  --azul:       #16244a;
  --azul-600:   #1e3163;
  --azul-tint:  #eef1f8;

  /* Extras */
  --wa:         #25d366;
  --wa-dark:    #128c7e;

  /* Tipografía */
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif:'Playfair Display', Georgia, serif;

  /* Métricas */
  --r:    14px;
  --r-lg: 20px;
  --wrap: 1240px;
  --pad:  clamp(20px, 4.5vw, 40px);
  --sect: clamp(72px, 10vw, 128px);

  /* Sombras en capas: cada una imita un rebote de luz distinto.
     Una sola sombra grande se ve barata; tres escalonadas se ven reales. */
  --shadow-sm:
     0 1px 2px rgba(34,38,44,.04),
     0 4px 10px rgba(34,38,44,.05),
     0 12px 28px rgba(34,38,44,.05);
  --shadow:
     0 1px 2px rgba(34,38,44,.04),
     0 6px 14px rgba(34,38,44,.05),
     0 18px 40px rgba(34,38,44,.07),
     0 36px 76px rgba(34,38,44,.06);
  --shadow-lg:
     0 2px 4px rgba(34,38,44,.05),
     0 10px 22px rgba(34,38,44,.06),
     0 26px 56px rgba(34,38,44,.09),
     0 52px 110px rgba(34,38,44,.10);
  --shadow-red:
     0 2px 6px rgba(122,14,24,.14),
     0 12px 28px rgba(207,27,43,.18),
     0 30px 64px rgba(207,27,43,.20);

  /* Grano de papel: le quita el plano digital a los fondos claros */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");

  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{color:var(--ink);line-height:1.12;margin:0;font-family:var(--sans);font-weight:800;letter-spacing:-.03em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}

/* Acento editorial: cursiva serif en rojo.
   El degradado solo se aplica donde background-clip:text funciona; si no,
   queda el rojo plano en vez de texto invisible. */
em{font-family:var(--serif);font-style:italic;font-weight:700;color:var(--red)}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  em{
    background-image:linear-gradient(100deg,var(--red) 0%, var(--red-600) 45%, var(--red-400) 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
  }
}

/* Selección de texto en rojo institucional */
::selection{background:var(--red);color:#fff}

/* Barra de desplazamiento discreta */
*{scrollbar-width:thin;scrollbar-color:var(--red-tint-2) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg-3)}
::-webkit-scrollbar-thumb{background:var(--line-2);border:3px solid var(--bg-3);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--red)}

.ic{
  width:1em;height:1em;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- Utilidades ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:880px}
.section{padding-block:var(--sect)}
.section--alt{background:var(--bg-2);border-block:1px solid var(--line)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--red);color:#fff;padding:12px 18px;border-radius:0 0 var(--r) 0;font-weight:700;
}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}

.todo{
  display:inline-block;
  background:#fff7e0;color:#8a5b00;
  border:1px dashed #e0b44c;
  padding:1px 9px;border-radius:6px;
  font-size:.79rem;font-weight:700;
}

/* Patrón de puntos decorativo (0 KB, sin imágenes) */
.deco-dots{
  position:absolute;pointer-events:none;z-index:0;
  background-image:radial-gradient(currentColor 1.7px, transparent 1.8px);
  background-size:15px 15px;
}
.deco-dots--tl{left:0;top:44px;width:118px;height:210px;color:var(--red);opacity:.26}
.deco-dots--br{right:0;bottom:0;width:190px;height:96px;color:#fff;opacity:.4}

/* Cuarto de círculo rojo, esquina inferior izquierda del hero */
.deco-corner{
  position:absolute;left:-58px;bottom:-58px;z-index:0;
  width:200px;height:200px;border-radius:50%;
  background:var(--red);opacity:.9;pointer-events:none;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:14px 26px;border:1.5px solid transparent;border-radius:999px;
  font-family:var(--sans);font-weight:700;font-size:.93rem;letter-spacing:-.01em;
  cursor:pointer;white-space:nowrap;
  transition:transform .28s var(--ease), background .28s var(--ease),
             border-color .28s var(--ease), box-shadow .28s var(--ease), color .28s var(--ease);
}
.btn .ic{width:1.05em;height:1.05em;stroke-width:2.2;transition:transform .28s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .ic{transform:translateX(3px)}
.btn:active{transform:translateY(0)}

/* Destello que barre el botón al pasar el cursor */
.btn--primary,.btn--outline{position:relative;overflow:hidden;isolation:isolate}
.btn--primary::after,.btn--outline::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%);
  transform:translateX(-120%);
  transition:transform .75s var(--ease-out);
}
.btn--primary:hover::after,.btn--outline:hover::after{transform:translateX(120%)}

.btn--primary{
  background:linear-gradient(135deg,var(--red) 0%, var(--red-600) 100%);
  color:#fff;box-shadow:var(--shadow-red);
}
.btn--primary:hover{
  background:linear-gradient(135deg,var(--red-400) 0%, var(--red) 100%);
  box-shadow:0 4px 10px rgba(122,14,24,.18), 0 18px 40px rgba(207,27,43,.28), 0 40px 80px rgba(207,27,43,.22);
}

/* Contorno rojo sobre blanco — el secundario del hero */
.btn--outline{background:#fff;color:var(--red);border-color:var(--red)}
.btn--outline:hover{background:var(--red);color:#fff;box-shadow:0 14px 30px var(--red-glow)}

.btn--ghost{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--red);color:var(--red)}

.btn--lg{padding:17px 34px;font-size:1rem}
.btn--sm{padding:11px 22px;font-size:.87rem}
.btn--block{width:100%}

/* ---------- Eyebrow / encabezados ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.65em;
  font-size:.78rem;font-weight:800;letter-spacing:.19em;text-transform:uppercase;
  color:var(--red);margin-bottom:20px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px var(--red-soft)}

/* Variante con la reglita roja debajo */
.eyebrow--line{display:block;margin-bottom:26px}
.eyebrow--line::after{
  content:"";display:block;width:56px;height:3px;border-radius:2px;
  background:var(--red);margin-top:12px;
}

.shead{max-width:700px;margin-bottom:clamp(44px,6vw,68px)}
.shead__title{font-size:clamp(2rem,4.6vw,3.1rem)}
.shead__lead{margin-top:18px;color:var(--tx-2);font-size:clamp(1rem,1.6vw,1.1rem)}

/* ---------- Topbar ---------- */
.topbar{
  background:linear-gradient(90deg,var(--red-700) 0%, var(--red-600) 55%, var(--red) 100%);
  color:#fff;font-size:.85rem;font-weight:600;letter-spacing:.01em;
}
.topbar__in{display:flex;align-items:center;gap:16px;min-height:46px}
.topbar__item{display:inline-flex;align-items:center;gap:.6em;opacity:.97}
.topbar__item .ic{width:1.15em;height:1.15em;opacity:.9}
.topbar__sep{width:1px;height:18px;background:rgba(255,255,255,.42)}
.topbar__cta{
  margin-left:auto;display:inline-flex;align-items:center;gap:.5em;
  font-weight:800;font-size:.83rem;letter-spacing:.1em;text-transform:uppercase;
}
.topbar__cta .ic{width:1.05em;height:1.05em;stroke-width:2.4;transition:transform .25s var(--ease)}
.topbar__cta:hover .ic{transform:translateX(4px)}
@media (max-width:720px){.topbar__item--hide,.topbar__sep{display:none}}
@media (max-width:560px){
  /* Solo queda la llamada a la acción: lo demás se partía en dos líneas */
  .topbar__item{display:none}
  .topbar__in{justify-content:center;min-height:40px}
  .topbar__cta{margin-left:0;font-size:.78rem;white-space:nowrap}
}

/* ---------- Logo con escudo ---------- */
.logo{display:inline-flex;align-items:center;gap:14px}
.logo__crest{
  width:56px;height:56px;flex:none;color:var(--red);
  --crest-ink:#fff;
}
.logo__name{
  font-size:1.72rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1;
}
.logo__rule{width:1.5px;height:34px;background:var(--line-2);flex:none}
.logo__txt{
  font-size:.68rem;font-weight:700;line-height:1.45;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tx-2);
}
@media (max-width:560px){
  .logo__crest{width:44px;height:44px}
  .logo__name{font-size:1.4rem}
  .logo__rule,.logo__txt{display:none}
}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .35s var(--ease), background .35s var(--ease);
}
.header.is-stuck{background:rgba(255,255,255,.97);box-shadow:0 10px 32px rgba(34,38,44,.08)}
.header__in{display:flex;align-items:center;gap:20px;min-height:90px}

.nav{margin-left:auto;display:flex;align-items:center;gap:0}
.nav>a{
  display:inline-flex;align-items:center;
  padding:10px 4px;
  font-size:.94rem;font-weight:600;color:var(--ink);
  transition:color .2s var(--ease);
}
.nav>a:hover,.nav>a.is-active{color:var(--red)}
/* Separador en punto entre enlaces. Incluye el caso del mega menú, que
   es un div y rompería la cadena de hermanos a+a. */
.nav>a+a:not(.nav__cta)::before,
.nav>.tiene-mega+a:not(.nav__cta)::before{
  content:"";width:4px;height:4px;border-radius:50%;
  background:var(--red);opacity:.4;margin-inline:18px;flex:none;
}
.nav__cta{margin-left:26px;color:#fff !important;padding:11px 22px !important}
.nav__cta:hover{color:#fff !important}
.nav__cta .ic{width:1.05em;height:1.05em}

.burger{
  display:none;margin-left:auto;
  background:#fff;border:1px solid var(--line-2);
  color:var(--ink);border-radius:11px;padding:9px;cursor:pointer;font-size:1.25rem;
}
.burger__close{display:none}
.burger[aria-expanded="true"] .burger__open{display:none}
.burger[aria-expanded="true"] .burger__close{display:block}

@media (max-width:1080px){
  .burger{display:block}
  .nav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:2px;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 20px 44px rgba(34,38,44,.12);
    padding:16px var(--pad) 26px;margin:0;
    clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none;
    transition:clip-path .38s var(--ease), opacity .25s var(--ease);
  }
  .nav.is-open{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto}
  .nav>a{padding:14px 12px;border-radius:10px;font-size:1rem}
  /* Fuera los puntos separadores, incluido el que precede al mega menú */
  .nav>a+a:not(.nav__cta)::before,
  .nav>.tiene-mega+a:not(.nav__cta)::before{display:none}

  /* Si el menú no cabe, que ruede en vez de cortarse.
     Sin padding abajo: lo pone el botón fijo. */
  .nav{
    max-height:calc(100dvh - 130px);
    overflow-y:auto;overscroll-behavior:contain;
    padding-bottom:0;
  }

  /* El botón de contacto se queda pegado al fondo del menú. Antes vivía
     al final de la lista y, al desplegar los cursos, se perdía de vista
     justo cuando más falta hace. */
  .nav__cta{
    position:sticky;bottom:0;z-index:3;
    /* márgenes negativos: ocupa todo el ancho del panel */
    margin:14px calc(-1 * var(--pad)) 0;
    border-radius:0;
    padding:18px var(--pad) !important;
    justify-content:center;
    box-shadow:0 -14px 22px -8px rgba(255,255,255,.95);
  }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:var(--hero-bg);
  padding-block:clamp(48px,6.5vw,86px) clamp(96px,11vw,150px);
  /* Crea su propio contexto de apilamiento: sin esto, las barras rojas
     (z-index 2) compiten en la raíz y se montan sobre la tarjeta de datos. */
  isolation:isolate;
  z-index:0;
}

/* Foto de la derecha, recortada en diagonal */
.hero__media{
  position:absolute;right:0;top:0;bottom:0;width:47%;z-index:1;
  clip-path:polygon(27% 0, 100% 0, 100% 100%, 3% 100%);
  overflow:hidden;
}
/* <picture> con display:contents desaparece del layout, así la <img>
   dimensiona directamente contra .hero__media */
.hero__media picture{display:contents}
.hero__photo{width:100%;height:100%;object-fit:cover;object-position:50% 12%}

/* =========================================================
   CARRUSEL DEL HERO
   ========================================================= */

/* Cada foto es una capa apilada; solo se ve la activa */
.hero__foto{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity .9s var(--ease-out), visibility .9s;
}
.hero__foto.is-activa{opacity:1;visibility:visible}

/* Los textos se apilan en la misma celda de la rejilla */
.hero__copy{display:grid}
.slide{
  grid-area:1 / 1;
  opacity:0;visibility:hidden;
  transform:translateY(22px);
  /* El que sale se va rápido (.28s). El que entra espera a que termine,
     si no los dos textos se leen encima uno del otro. */
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  pointer-events:none;
}
.slide.is-activa{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .5s var(--ease-out) .3s,
             transform .65s var(--ease-out) .3s,
             visibility .5s .3s;
}

/* ---------- Controles ---------- */
.carrusel__ctrl{
  position:relative;z-index:5;
  display:flex;align-items:center;gap:14px;
  margin-top:clamp(28px,4vw,44px);
}
.carrusel__flecha,
.carrusel__pausa{
  display:grid;place-items:center;flex:none;
  width:46px;height:46px;border-radius:50%;
  background:#fff;color:var(--ink);
  border:1px solid var(--line-2);
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  transition:background .28s var(--ease), color .28s var(--ease),
             border-color .28s var(--ease), transform .28s var(--ease);
}
.carrusel__flecha:hover,
.carrusel__pausa:hover{background:var(--red);color:#fff;border-color:var(--red);transform:translateY(-2px)}
.carrusel__flecha .ic{width:20px;height:20px;stroke-width:2.4}
.carrusel__pausa{margin-left:auto}
.carrusel__pausa .ic{width:17px;height:17px;stroke-width:2.4}
/* El icono cambia según el estado */
.carrusel__pausa .ic-play{display:none;fill:currentColor;stroke:none}
.carrusel__pausa[aria-pressed="true"] .ic-pausa{display:none}
.carrusel__pausa[aria-pressed="true"] .ic-play{display:block}

.carrusel__puntos{display:flex;align-items:center;gap:9px}
.carrusel__punto{
  position:relative;overflow:hidden;
  width:34px;height:5px;border-radius:99px;border:0;padding:0;
  background:var(--line-2);cursor:pointer;
  transition:background .3s var(--ease), width .4s var(--ease-out);
}
.carrusel__punto:hover{background:var(--tx-3)}
.carrusel__punto.is-activa{width:60px;background:var(--red-tint-2)}
/* Barra que se llena: indica cuánto falta para el siguiente banner */
.carrusel__punto.is-activa::after{
  content:"";position:absolute;inset:0;transform-origin:left;
  background:var(--red);
  animation:avanza var(--espera,6s) linear forwards;
}
.carrusel.en-pausa .carrusel__punto.is-activa::after{animation-play-state:paused}
@keyframes avanza{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (max-width:1080px){
  .carrusel__ctrl{justify-content:center;margin-inline:auto;padding-inline:var(--pad)}
  .carrusel__pausa{margin-left:0}
}
@media (max-width:460px){
  .carrusel__punto{width:24px}
  .carrusel__punto.is-activa{width:44px}
}

/* Quien pidió menos movimiento no ve rotación ni barra de tiempo */
@media (prefers-reduced-motion:reduce){
  .hero__foto,.slide{transition:none}
  .carrusel__punto.is-activa::after{animation:none;transform:scaleX(1)}
}

/* Barras rojas en diagonal, al filo de la foto */
.hero__slash{
  position:absolute;top:-8%;bottom:-8%;z-index:2;
  background:var(--red);transform:skewX(-13deg);pointer-events:none;
}
/* Se apartan hacia la foto: antes rozaban la última línea del párrafo y,
   al ser rojo sobre rojo, se tragaban las palabras destacadas. */
.hero__slash--a{right:46.4%;width:52px}
.hero__slash--b{right:43.8%;width:16px;opacity:.5}

.hero__in{
  position:relative;z-index:3;
  display:grid;grid-template-columns:1.15fr .8fr;gap:clamp(32px,4.5vw,60px);align-items:center;
}

/* En pantallas medianas el contenedor casi llena el ancho, así que la tarjeta
   de precio queda pegada a la derecha y tapa la cara de la foto. Corriéndola
   a la izquierda se despeja el lado derecho del panel. */
@media (min-width:1081px) and (max-width:1700px){
  .hero__in{padding-right:clamp(60px, 10vw, 170px)}
}

.hero__title{font-size:clamp(2.6rem,5.9vw,4.35rem);letter-spacing:-.038em;line-height:1.03}
.hero__accent{display:block;position:relative;margin-top:.06em;letter-spacing:-.02em}
.swoosh{
  display:block;width:86%;max-width:340px;height:13px;margin-top:2px;
  fill:none;stroke:var(--red);stroke-width:4;stroke-linecap:round;
}
.hero__lead{
  margin-top:28px;max-width:40ch;
  font-size:clamp(1.02rem,1.75vw,1.13rem);color:var(--tx-2);
}
/* Subrayado en vez de solo color: si algún día el texto vuelve a caer
   sobre una zona roja, la palabra se sigue distinguiendo. */
.hero__lead b{
  color:var(--red);font-weight:700;
  box-shadow:inset 0 -2px 0 var(--red-tint-2);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

/* Tarjeta de precio blanca, flotando sobre la foto */
.pricecard{
  position:relative;z-index:4;
  background:#fff;border-radius:22px;
  padding:clamp(26px,2.8vw,34px);
  box-shadow:var(--shadow-lg);
}
.pricecard__tag{
  display:inline-block;background:var(--red);color:#fff;
  font-size:.7rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  padding:7px 15px;border-radius:999px;
}
.pricecard__price{
  display:flex;align-items:baseline;gap:6px;margin-top:20px;
  line-height:1;letter-spacing:-.04em;
}
.pricecard__price .cur{font-size:2rem;font-weight:700;color:var(--ink)}
.pricecard__price .num{font-size:clamp(3.4rem,6vw,4.2rem);font-weight:800;color:var(--red)}
.pricecard__price .per{font-size:1.4rem;font-weight:600;color:var(--tx-2);letter-spacing:0}
.pricecard__note{margin-top:10px;font-size:.92rem;color:var(--tx-2)}
.pricecard__list{
  display:grid;gap:13px;margin:22px 0 26px;
  padding-top:22px;border-top:1.5px solid var(--red-tint-2);
}
.pricecard__list li{display:flex;align-items:center;gap:.75em;font-size:.94rem;color:var(--tx)}
.pricecard__list .ic{width:20px;height:20px;color:var(--red);stroke-width:1.8}
.pricecard__fine{margin-top:14px;text-align:center;font-size:.78rem;color:var(--tx-3)}

/* Botón del ojito: solo aparece en móvil, lo crea el JavaScript */
.hero__verfoto{display:none}

/* ---------- Hero en pantallas medianas y móviles ----------
   El recorte diagonal solo funciona con la foto a un costado. Debajo de
   1080 px se reordena todo en columna: texto → foto → tarjeta de precio.
   `display:contents` en .hero__in disuelve la rejilla para que sus hijos
   pasen a ser hermanos del contenedor y se puedan ordenar. */
@media (max-width:1080px){
  .hero{display:flex;flex-direction:column;padding-bottom:clamp(96px,13vw,130px)}
  /* El carrusel es quien contiene los bloques, así que la ordenación
     tiene que aplicarse aquí, no en .hero */
  .carrusel{display:flex;flex-direction:column}
  .hero__in{display:contents}

  .hero__copy{
    order:3;width:100%;max-width:var(--wrap);
    margin-inline:auto;padding-inline:var(--pad);
  }

  /* El ojito abre el hero: se ve nada más entrar, y la foto aparece
     encima del titular si la piden. */
  .hero__verfoto{
    order:1;
    display:inline-flex;align-items:center;gap:.6em;
    align-self:center;margin-top:4px;
    background:#fff;border:1px solid var(--line-2);border-radius:999px;
    padding:11px 20px;
    font:inherit;font-size:.88rem;font-weight:700;color:var(--ink);
    box-shadow:var(--shadow-sm);cursor:pointer;
    transition:background .25s var(--ease), color .25s var(--ease),
               border-color .25s var(--ease);
  }
  .hero__verfoto:hover{background:var(--red);color:#fff;border-color:var(--red)}
  .hero__verfoto .ic{width:19px;height:19px;stroke-width:1.9}
  .hero__verfoto .ic-cerrar{display:none}
  .carrusel.foto-visible .hero__verfoto .ic-abrir{display:none}
  .carrusel.foto-visible .hero__verfoto .ic-cerrar{display:block}

  .pricecard{order:4}
  .carrusel>.wrap:last-child{order:5}

  .hero__media{
    order:2;position:relative;display:block;
    width:calc(100% - 2 * var(--pad));max-width:540px;
    margin:0 auto;
    aspect-ratio:16 / 11;
    clip-path:none;border-radius:22px;overflow:hidden;
    box-shadow:var(--shadow);
    /* Plegada de inicio: así el titular se lee sin desplazarse, y de paso
       las fotos no se descargan hasta que alguien las pide. */
    max-height:0;opacity:0;
    transition:max-height .55s var(--ease-out), opacity .4s var(--ease),
               margin .55s var(--ease-out);
  }
  .carrusel.foto-visible .hero__media{
    max-height:min(62vw, 340px);
    opacity:1;margin:18px auto 4px;
  }
  /* Encuadre distinto: en horizontal hay que subir y centrar más a la derecha */
  .hero__media .hero__photo{object-position:72% 14%}

  /* Filete rojo superior, para que la foto no quede como una estampa suelta */
  .hero__media::after{
    content:"";position:absolute;inset:0 0 auto 0;height:4px;z-index:1;
    background:linear-gradient(90deg,var(--red-700),var(--red),var(--red-400));
  }

  .pricecard{
    order:3;width:calc(100% - 2 * var(--pad));max-width:480px;
    margin:36px auto 0;
  }

  .hero__slash,.deco-corner{display:none}
}

/* ---------- Tira de datos (tarjeta flotante) ---------- */
.strip{
  position:relative;
  background:linear-gradient(to bottom, var(--hero-bg) 0 54%, var(--red) 54% 100%);
  padding-bottom:0;
}
.strip__card{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:#fff;border-radius:20px;
  box-shadow:var(--shadow);
  margin-top:-44px;
}
.strip__item{display:flex;align-items:center;gap:16px;padding:28px 26px;position:relative}
.strip__item+.strip__item::before{
  content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:var(--line);
}
.strip__ico{
  display:grid;place-items:center;width:46px;height:46px;flex:none;
  border-radius:13px;background:var(--red-tint);color:var(--red);
}
.strip__ico .ic{width:23px;height:23px;stroke-width:1.7}
.strip__item b{
  display:block;color:var(--ink);font-size:1.02rem;font-weight:800;
  letter-spacing:.02em;text-transform:uppercase;line-height:1.25;
}
.strip__item span{font-size:.85rem;color:var(--tx-2)}
/* En móvil los cuatro datos apilados hacían una columna larguísima.
   Pasan a una fila que se desliza con el dedo, con anclaje para que
   siempre queden encuadrados. */
@media (max-width:900px){
  .strip__card{
    display:flex;grid-template-columns:none;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none;
    /* El filete superior deja de ser un pseudoelemento: dentro de un
       contenedor flexible se convertiría en un ítem más de la fila. */
    border-top:3px solid var(--red);
  }
  .strip__card::before{content:none}
  .strip__card::-webkit-scrollbar{display:none}

  .strip__item{
    flex:0 0 min(68%, 250px);
    scroll-snap-align:center;
    padding:24px 22px;
  }
  /* El último no lleva separador; y el asomo del siguiente ya indica
     que la fila continúa. */
  .strip__item:last-child{flex-basis:min(72%, 260px)}

  .strip{background:linear-gradient(to bottom, var(--hero-bg) 0 62%, var(--red) 62% 100%)}
}

/* ---------- Grids y tarjetas ---------- */
.grid{display:grid;gap:22px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--wide{gap:26px}
@media (max-width:1000px){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.grid--3,.grid--2{grid-template-columns:1fr}}

.card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:32px 30px 28px;
  transition:transform .38s var(--ease), border-color .38s var(--ease), box-shadow .38s var(--ease);
}
.card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--red),var(--red-400));
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.card:hover{transform:translateY(-7px);border-color:var(--red-tint-2);box-shadow:var(--shadow)}
.card:hover::before{transform:scaleX(1)}

.card__ico{
  display:grid;place-items:center;width:56px;height:56px;
  border-radius:16px;background:var(--red-tint);
  color:var(--red);margin-bottom:24px;
  transition:background .38s var(--ease), color .38s var(--ease), transform .38s var(--ease);
}
.card__ico .ic{width:25px;height:25px;stroke-width:1.6}
.card:hover .card__ico{background:var(--red);color:#fff;transform:scale(1.06)}
.card__title{font-size:1.16rem;line-height:1.34;letter-spacing:-.025em}
.card__title a{transition:color .25s var(--ease)}
.card:hover .card__title a{color:var(--red)}
.card__txt{margin-top:12px;font-size:.94rem;color:var(--tx-2);flex:1}
.card__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.card__tags li{
  font-size:.73rem;font-weight:600;color:var(--tx-2);
  background:var(--bg-3);border:1px solid var(--line);
  padding:4px 12px;border-radius:999px;
}
.card__link{
  display:inline-flex;align-items:center;gap:.45em;margin-top:22px;
  font-size:.88rem;font-weight:700;color:var(--red);
}
.card__link .ic{width:1em;height:1em;stroke-width:2.2;transition:transform .25s var(--ease)}
.card__link:hover .ic{transform:translateX(4px)}

/* ---------- Paneles (modalidades) ---------- */
.panel{
  background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(30px,3.6vw,42px);
  box-shadow:var(--shadow-sm);
}
.panel__ico{
  display:grid;place-items:center;width:56px;height:56px;border-radius:16px;
  background:var(--red-tint);color:var(--red);margin-bottom:24px;
}
.panel__ico .ic{width:25px;height:25px;stroke-width:1.6}
.panel h3{font-size:1.5rem}
.panel p{margin-top:14px;color:var(--tx-2);font-size:.96rem}
.turnos{margin-top:28px;border-top:1px solid var(--line)}
.turnos li{display:flex;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.turnos b{color:var(--ink);font-weight:700}
.turnos span{color:var(--tx-3);text-align:right}

/* ---------- Split (nosotros) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5.5vw,76px);align-items:center}
.split__txt{margin-top:18px;color:var(--tx-2);font-size:1.03rem}
.split__txt b{color:var(--ink);font-weight:700}
.split .btn{margin-top:34px}
@media (max-width:940px){.split{grid-template-columns:1fr}}

.feats{display:grid;gap:14px}
.feats li{
  display:flex;gap:18px;align-items:flex-start;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:22px 24px;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.feats li:hover{border-color:var(--red-tint-2);box-shadow:var(--shadow-sm);transform:translateX(4px)}
.feats__ico{
  display:grid;place-items:center;width:44px;height:44px;flex:none;
  border-radius:12px;background:var(--red-tint);color:var(--red);
}
.feats__ico .ic{width:20px;height:20px;stroke-width:1.8}
.feats b{display:block;color:var(--ink);font-size:1rem;font-weight:700;letter-spacing:-.02em}
.feats p{margin-top:6px;font-size:.9rem;color:var(--tx-2)}

/* ---------- Pasos de admisión ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:580px){.steps{grid-template-columns:1fr}}
.steps__i{
  position:relative;
  background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px 28px;
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.steps__i:hover{border-color:var(--red-tint-2);transform:translateY(-5px);box-shadow:var(--shadow)}
.steps__n{
  display:block;font-family:var(--serif);font-size:2.9rem;font-weight:700;line-height:1;
  color:var(--red-tint-2);margin-bottom:18px;letter-spacing:-.03em;
  transition:color .3s var(--ease);
}
.steps__i:hover .steps__n{color:var(--red)}
.steps__i h3{font-size:1.08rem}
.steps__i p{margin-top:10px;font-size:.9rem;color:var(--tx-2)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px}
.faq__i{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq__i:hover{border-color:var(--line-2)}
.faq__i[open]{border-color:var(--red-tint-2);box-shadow:var(--shadow-sm)}
.faq__i summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:21px 24px;cursor:pointer;list-style:none;
  font-weight:700;color:var(--ink);font-size:1.01rem;letter-spacing:-.02em;
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary .ic{width:20px;height:20px;flex:none;color:var(--red);stroke-width:2.2;transition:transform .3s var(--ease)}
.faq__i[open] summary .ic{transform:rotate(45deg)}
.faq__i p{padding:0 24px 22px;color:var(--tx-2);font-size:.94rem;max-width:70ch}

/* ---------- CTA + formulario ---------- */
.cta{
  position:relative;overflow:hidden;
  padding-block:var(--sect);
  background:
    radial-gradient(760px 480px at 92% 8%, rgba(207,27,43,.09), transparent 62%),
    var(--red-tint);
  border-top:1px solid var(--line);
}
.cta__in{position:relative;display:grid;grid-template-columns:1fr .92fr;gap:clamp(40px,5.5vw,72px);align-items:start}
@media (max-width:960px){.cta__in{grid-template-columns:1fr}}

.cta__contacts{display:grid;gap:18px;margin-top:38px}
.cta__contacts li{display:flex;gap:15px;align-items:flex-start}
.cta__contacts .ic{width:20px;height:20px;color:var(--red);margin-top:5px;flex:none;stroke-width:1.8}
.cta__contacts b{display:block;color:var(--ink);font-size:.94rem;font-weight:700}
.cta__contacts span,.cta__contacts a{font-size:.93rem;color:var(--tx-2)}
.cta__contacts a:hover{color:var(--red)}

.form{
  background:#fff;
  border:1px solid var(--line);border-radius:22px;
  padding:clamp(28px,3.6vw,40px);
  box-shadow:var(--shadow);
}
.form__title{font-size:1.45rem;margin-bottom:26px}
.field{margin-bottom:17px}
.field label{display:block;font-size:.83rem;font-weight:700;color:var(--ink);margin-bottom:8px}
.field input,.field select{
  width:100%;padding:14px 16px;
  background:var(--bg-3);
  border:1px solid var(--line-2);border-radius:12px;
  color:var(--ink);font-size:.95rem;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.field input::placeholder{color:var(--tx-3)}
.field input:focus,.field select:focus{
  outline:none;border-color:var(--red);background:#fff;
  box-shadow:0 0 0 4px var(--red-soft);
}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0a8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:16px;padding-right:44px;
}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
/* Ningún control debe poder empujar el ancho de la página */
.field input,.field select,.form--legal textarea{max-width:100%}
.field select{text-overflow:ellipsis}
.field.is-error input,.field.is-error select{border-color:var(--red);box-shadow:0 0 0 4px var(--red-soft)}
.err{display:block;margin-top:6px;font-size:.79rem;color:var(--red);font-weight:600}
.form .btn{margin-top:10px}
.form__fine{margin-top:16px;text-align:center;font-size:.78rem;color:var(--tx-3)}

/* ---------- Footer ---------- */
.footer{
  background:linear-gradient(160deg,var(--red-700) 0%, var(--red-900) 100%);
  color:rgba(255,255,255,.72);
  padding-top:clamp(56px,7vw,84px);
}
.footer h4{color:#fff}
.footer__in{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:clamp(30px,4vw,52px);padding-bottom:50px;
}
@media (max-width:940px){.footer__in{grid-template-columns:1fr 1fr}}
@media (max-width:580px){.footer__in{grid-template-columns:1fr}}
/* el escudo se invierte: contorno blanco, interior rojo */
.footer .logo__crest{color:#fff;--crest-ink:var(--red-900)}
.footer .logo__name{color:#fff}
.footer .logo__rule{background:rgba(255,255,255,.35)}
.footer .logo__txt{color:rgba(255,255,255,.72)}
.footer__brand p{margin-top:18px;font-size:.9rem;color:rgba(255,255,255,.62);max-width:34ch}
.logo--footer{margin-bottom:4px}
.footer__col h4{font-size:.77rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}
.footer__col a,.footer__col p{display:block;font-size:.9rem;color:rgba(255,255,255,.68);padding-block:5px;transition:color .2s var(--ease)}
.footer__col a:hover{color:#fff}
.footer .todo{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.45)}
.footer__bottom{
  display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;align-items:center;
  padding-block:24px;border-top:1px solid rgba(255,255,255,.16);
  font-size:.83rem;color:rgba(255,255,255,.6);
}
.footer__legal a:hover{color:#fff}

/* ---------- WhatsApp flotante ---------- */
.wa{
  position:fixed;right:22px;bottom:22px;z-index:90;
  display:inline-flex;align-items:center;
  width:58px;height:58px;border-radius:999px;
  background:var(--wa);color:#fff;
  box-shadow:0 12px 32px rgba(37,211,102,.42);
  overflow:hidden;
  transition:width .38s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.wa svg{width:30px;height:30px;flex:none;margin:14px}
.wa__tip{
  white-space:nowrap;font-weight:700;font-size:.92rem;
  opacity:0;transform:translateX(-6px);
  transition:opacity .25s var(--ease), transform .3s var(--ease);
}
.wa:hover{width:176px;background:var(--wa-dark)}
.wa:hover .wa__tip{opacity:1;transform:translateX(0)}
@media (max-width:580px){.wa{right:16px;bottom:16px}.wa:hover{width:58px}.wa__tip{display:none}}


/* =========================================================
   PÁGINAS DE CURSO
   ========================================================= */

/* ---------- Hero de curso ---------- */
.chero{
  position:relative;overflow:hidden;
  padding-block:clamp(48px,6vw,76px) clamp(60px,8vw,92px);
  background:var(--hero-bg);
  isolation:isolate;z-index:0;
}
.chero__in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.3fr .85fr;gap:clamp(36px,5vw,64px);align-items:start;
}
@media (max-width:960px){.chero__in{grid-template-columns:1fr}}

.chero__ico{
  display:grid;place-items:center;width:64px;height:64px;
  border-radius:18px;background:var(--red);color:#fff;
  margin-bottom:24px;box-shadow:0 14px 34px var(--red-glow);
}
.chero__ico .ic{width:29px;height:29px;stroke-width:1.6}
.chero__title{font-size:clamp(2.1rem,5vw,3.3rem);letter-spacing:-.035em;line-height:1.08}
.chero__lead{margin-top:22px;max-width:56ch;font-size:clamp(1.02rem,1.8vw,1.14rem);color:var(--tx-2)}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.chips li{
  display:inline-flex;align-items:center;gap:.55em;
  background:#fff;border:1px solid var(--line-2);
  padding:9px 16px;border-radius:999px;
  font-size:.86rem;font-weight:600;color:var(--ink);
}
.chips .ic{width:1.05em;height:1.05em;color:var(--red);stroke-width:2}

.chero__actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}

/* Portada de sección sin tarjeta lateral */
.chero--solo .chero__in{grid-template-columns:1fr}
.chero--solo .chero__in>div{max-width:820px}
.chero--solo .chero__title{font-size:clamp(2.2rem,5.4vw,3.6rem)}

/* =========================================================
   CAPA INSTITUCIONAL
   Mega menú, barra de accesos y foto en las tarjetas de curso.
   Es lo que separa una web de instituto de una landing.
   ========================================================= */

/* ---------- Barra de accesos, sobre la promocional ---------- */
.accesos{background:var(--azul);color:rgba(255,255,255,.8);font-size:.82rem}
.accesos__in{display:flex;align-items:center;gap:24px;min-height:38px;justify-content:flex-end}
.accesos a{
  display:inline-flex;align-items:center;gap:.5em;font-weight:600;
  transition:color .2s var(--ease);
}
.accesos a:hover{color:#fff}
.accesos .ic{width:1.05em;height:1.05em;stroke-width:2}
.accesos__sep{width:1px;height:15px;background:rgba(255,255,255,.24)}
@media (max-width:760px){
  .accesos__in{gap:18px;font-size:.76rem}
  .accesos__sep{display:none}
}
/* En pantallas estrechas los tres accesos no caben: en vez de partirse
   en varias líneas, la barra rueda de lado. */
@media (max-width:620px){
  .accesos__in{
    justify-content:flex-start;flex-wrap:nowrap;
    overflow-x:auto;scrollbar-width:none;
    padding-block:9px;
  }
  .accesos__in::-webkit-scrollbar{display:none}
  .accesos a{white-space:nowrap}
}

/* ---------- Mega menú ---------- */
/* Al envolver el enlace en un div deja de ser hijo directo de .nav y
   pierde sus estilos: hay que repetirlos aquí o "Cursos" se descoloca
   y el chevron cae a otra línea. */
.tiene-mega{position:relative;display:flex;align-items:center}
.nav .tiene-mega>a{
  display:inline-flex;align-items:center;
  padding:10px 4px;white-space:nowrap;
  font-size:.94rem;font-weight:600;color:var(--ink);
  transition:color .2s var(--ease);
}
.nav .tiene-mega>a:hover{color:var(--red)}
/* Subrayado animado, igual que en el resto del menú */
.nav .tiene-mega>a::after{
  content:"";position:absolute;left:4px;right:4px;bottom:2px;height:2px;
  background:var(--red);border-radius:2px;
  transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.tiene-mega:hover>a::after{transform:scaleX(1);transform-origin:left}
.mega__flecha{
  width:.62em;height:.62em;margin-left:.45em;flex:none;
  stroke-width:3;transition:transform .3s var(--ease);
}
.tiene-mega:hover .mega__flecha,
.tiene-mega:focus-within .mega__flecha{transform:rotate(180deg)}

.mega{
  position:absolute;top:calc(100% + 14px);left:50%;
  transform:translateX(-50%) translateY(-8px);
  width:min(760px, 92vw);
  background:#fff;border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow-lg);
  padding:26px;
  display:grid;grid-template-columns:1fr 1fr;gap:8px 26px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s var(--ease), transform .32s var(--ease-out), visibility .28s;
  z-index:120;
}
/* Puente invisible: evita que el menú se cierre al cruzar el hueco */
.tiene-mega::after{content:"";position:absolute;top:100%;left:0;right:0;height:18px}

/* Apertura por cursor SOLO en escritorio. Sin este límite, en móvil el
   foco que deja el botón dentro del bloque dispara :focus-within y le
   devuelve el translateX(-50%), que descuadra toda la lista. */
@media (min-width:1081px){
  .tiene-mega:hover .mega,
  .tiene-mega:focus-within .mega{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translateX(-50%) translateY(0);
  }
}

.mega__grupo{padding:4px}
.mega__titulo{
  display:block;font-size:.7rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--azul);
  padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line);
}
.mega__i{
  display:flex !important;align-items:center;gap:13px;
  padding:11px 12px !important;border-radius:12px;
  transition:background .22s var(--ease);
}
.mega__i:hover{background:var(--red-tint)}
.mega__i::before,.mega__i::after{content:none !important}
.mega__ico{
  display:grid;place-items:center;width:38px;height:38px;flex:none;
  border-radius:11px;background:var(--red-tint);color:var(--red);
  transition:background .22s var(--ease), color .22s var(--ease);
}
.mega__i:hover .mega__ico{background:var(--red);color:#fff}
.mega__ico .ic{width:18px;height:18px;stroke-width:1.8}
.mega__i b{display:block;color:var(--ink);font-size:.9rem;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.mega__i span{font-size:.76rem;color:var(--tx-3)}

.mega__pie{
  grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:14px;
  align-items:center;justify-content:space-between;
  margin-top:12px;padding-top:18px;border-top:1px solid var(--line);
}
.mega__pie p{font-size:.86rem;color:var(--tx-2)}
.mega__pie b{color:var(--ink)}

/* Botón para desplegar los cursos en móvil. Lo crea el JavaScript,
   así no hay que repetirlo en las 17 páginas. */
.mega__toggle{display:none}

/* En táctil el mega menú se pliega en acordeón: si se deja abierto,
   el menú mide dos pantallas y el botón de contacto queda fuera. */
@media (max-width:1080px){
  .tiene-mega{
    display:flex;flex-wrap:wrap;align-items:center;
    border-bottom:1px solid var(--line);
  }
  .nav .tiene-mega>a{flex:1;padding:14px 12px;font-size:1rem}
  .nav .tiene-mega>a::after{display:none}

  .mega__toggle{
    display:grid;place-items:center;flex:none;
    width:42px;height:42px;border-radius:10px;
    background:var(--red-tint);border:0;color:var(--red);cursor:pointer;
  }
  .mega__toggle .ic{width:20px;height:20px;stroke-width:2.4;transition:transform .3s var(--ease)}
  .tiene-mega.is-abierta .mega__toggle .ic{transform:rotate(180deg)}

  .mega{
    flex-basis:100%;
    position:static;transform:none;width:auto;
    opacity:1;visibility:hidden;pointer-events:none;
    box-shadow:none;border:none;border-radius:0;
    background:transparent;
    grid-template-columns:1fr;gap:2px;
    padding:0;margin:0;
    max-height:0;overflow:hidden;
    transition:max-height .45s var(--ease-out), padding .45s var(--ease-out), visibility .45s;
  }
  .tiene-mega.is-abierta .mega{
    visibility:visible;pointer-events:auto;
    max-height:640px;padding:4px 0 14px;
  }

  .mega__titulo{margin-top:10px}
  .mega__pie{display:none}
  .mega__flecha{display:none}
  .tiene-mega::after{content:none}
}

/* ---------- Foto en las tarjetas de curso ---------- */
.card--foto{padding:0;overflow:hidden}
.card__media{position:relative;aspect-ratio:8 / 5;overflow:hidden;background:var(--bg-3)}
.card__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease-out);
}
.card--foto:hover .card__media img{transform:scale(1.06)}
/* Velo para que el icono se lea siempre */
.card__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(22,36,74,.06) 0%, rgba(22,36,74,.42) 100%);
}
/* El icono va en el flujo, no absoluto: si se posiciona dentro de
   .card__media lo recorta el overflow:hidden que necesita el zoom. */
.card--foto .card__ico{
  position:relative;z-index:2;
  margin:-28px 0 18px;
  background:#fff;color:var(--red);
  box-shadow:var(--shadow-sm);border:1px solid var(--line);
}
.card--foto:hover .card__ico{background:var(--red);color:#fff;transform:none}
.card__dentro{display:flex;flex-direction:column;flex:1;padding:0 28px 30px}
.card--foto .card__link{margin-top:auto;padding-top:22px}

/* La barrita roja superior estorba cuando hay foto */
.card--foto::before{content:none}

/* ---------- Sello de licenciamiento ---------- */
.sello{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--azul-tint);border:1px solid #d5dcee;
  border-radius:999px;padding:9px 18px 9px 12px;
  font-size:.84rem;color:var(--azul);
}
.sello__ico{
  display:grid;place-items:center;width:30px;height:30px;flex:none;
  border-radius:50%;background:var(--azul);color:#fff;
}
.sello__ico .ic{width:16px;height:16px;stroke-width:2.2}
.sello b{font-weight:800}

/* =========================================================
   SECCIONES DE CONTENIDO INSTITUCIONAL
   ========================================================= */

/* Etiqueta que marca todo lo que es relleno provisional */
.ph{
  position:absolute;top:12px;left:12px;z-index:2;
  background:#fff7e0;color:#8a5b00;border:1px dashed #e0b44c;
  padding:3px 10px;border-radius:6px;
  font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.ph--linea{
  position:static;display:inline-block;margin-left:8px;vertical-align:middle;
}

/* ---------- Banda de promoción ---------- */
.promo{
  position:relative;overflow:hidden;
  background:linear-gradient(120deg,var(--red-900),var(--red-700) 45%,var(--red));
  color:#fff;
}
.promo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain);opacity:.07;mix-blend-mode:overlay;
}
.promo__in{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,3vw,40px);
  padding-block:clamp(28px,4vw,44px);
}
.promo__sello{
  display:grid;place-items:center;flex:none;
  width:96px;height:96px;border-radius:50%;
  background:#fff;color:var(--red-700);
  font-family:var(--serif);font-weight:700;font-style:italic;
  font-size:1.5rem;line-height:1;text-align:center;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}
.promo__txt{flex:1;min-width:260px}
.promo__txt h2{color:#fff;font-size:clamp(1.4rem,2.8vw,2rem);margin-bottom:8px}
.promo__txt h2 em{color:#ffd9dd}
.promo__txt p{color:rgba(255,255,255,.85);font-size:.98rem}
.promo .btn{background:#fff;color:var(--red-700);box-shadow:0 10px 26px rgba(0,0,0,.2)}
.promo .btn:hover{background:#fff;color:var(--red-900)}

/* ---------- Franja de cifras ---------- */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);text-align:center}
@media (max-width:820px){.cifras{grid-template-columns:repeat(2,1fr);gap:32px}}
@media (max-width:460px){.cifras{grid-template-columns:1fr}}
.cifras__i{position:relative;padding-inline:12px}
.cifras__i+.cifras__i::before{
  content:"";position:absolute;left:calc(-1 * clamp(10px,1.5vw,20px));top:12%;bottom:12%;
  width:1px;background:var(--line);
}
@media (max-width:820px){.cifras__i+.cifras__i::before{display:none}}
.cifras__n{
  display:block;font-family:var(--serif);font-weight:700;
  font-size:clamp(2.6rem,5.5vw,3.8rem);line-height:1;letter-spacing:-.03em;
  color:var(--red);margin-bottom:10px;font-variant-numeric:tabular-nums;
}
.cifras__i b{display:block;color:var(--ink);font-size:1rem;font-weight:700;letter-spacing:-.02em}
.cifras__i span{display:block;margin-top:4px;font-size:.88rem;color:var(--tx-2)}

/* ---------- Testimonios ---------- */
.testis{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:980px){.testis{grid-template-columns:1fr;max-width:640px;margin-inline:auto}}
.testi{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px;box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.testi:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--red-tint-2)}
.testi__comilla{
  font-family:var(--serif);font-size:4.4rem;line-height:.6;color:var(--red-tint-2);
  margin-bottom:6px;user-select:none;
}
.testi__txt{flex:1;font-size:.99rem;color:var(--tx);font-style:italic;margin-bottom:24px}
.testi__pie{display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid var(--line)}
.testi__foto{
  width:56px;height:56px;flex:none;border-radius:50%;object-fit:cover;
  border:2px solid var(--red-tint-2);
}
.testi__pie b{display:block;color:var(--ink);font-size:.96rem;font-weight:700;letter-spacing:-.02em}
.testi__pie span{font-size:.84rem;color:var(--tx-2)}

/* ---------- Sedes ---------- */
.sedes{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
@media (max-width:900px){.sedes{grid-template-columns:1fr}}
.sede{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.sede:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.sede__foto{position:relative;aspect-ratio:16 / 9;overflow:hidden}
.sede__foto img{width:100%;height:100%;object-fit:cover}
.sede__cuerpo{padding:26px 28px 28px}
.sede__cuerpo h3{font-size:1.2rem;margin-bottom:6px}
.sede__tipo{
  display:inline-block;background:var(--red);color:#fff;
  font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;margin-bottom:14px;
}
.sede__datos{display:grid;gap:11px;margin-top:16px}
.sede__datos li{display:flex;gap:12px;align-items:flex-start;font-size:.93rem;color:var(--tx-2)}
.sede__datos .ic{width:18px;height:18px;flex:none;margin-top:3px;color:var(--red);stroke-width:1.9}
.sede__mapa{
  display:inline-flex;align-items:center;gap:.5em;margin-top:20px;
  font-size:.88rem;font-weight:700;color:var(--red);
}
.sede__mapa .ic{width:1em;height:1em;stroke-width:2.2;transition:transform .25s var(--ease)}
.sede__mapa:hover .ic{transform:translateX(4px)}

/* ---------- Convenios ---------- */
.convenios{
  display:grid;grid-template-columns:repeat(6,1fr);gap:18px;align-items:center;
}
@media (max-width:900px){.convenios{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.convenios{grid-template-columns:repeat(2,1fr)}}
.convenios img{
  width:100%;height:auto;border-radius:10px;border:1px solid var(--line);
  filter:grayscale(1);opacity:.62;
  transition:filter .35s var(--ease), opacity .35s var(--ease);
}
.convenios a:hover img{filter:grayscale(0);opacity:1}

/* ---------- Blog ---------- */
.notas{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:940px){.notas{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.notas{grid-template-columns:1fr}}
.nota-art{
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.nota-art:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--red-tint-2)}
.nota-art__foto{position:relative;aspect-ratio:16 / 9;overflow:hidden}
.nota-art__foto img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease-out);
}
.nota-art:hover .nota-art__foto img{transform:scale(1.05)}
.nota-art__cat{
  position:absolute;left:14px;bottom:14px;z-index:1;
  background:var(--red);color:#fff;
  font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;
}
.nota-art__cuerpo{display:flex;flex-direction:column;flex:1;padding:24px 24px 26px}
.nota-art__fecha{font-size:.8rem;color:var(--tx-3);margin-bottom:10px}
.nota-art__cuerpo h3{font-size:1.08rem;line-height:1.38;margin-bottom:10px}
.nota-art__cuerpo p{font-size:.92rem;color:var(--tx-2);flex:1}
.nota-art__link{
  display:inline-flex;align-items:center;gap:.45em;margin-top:18px;
  font-size:.87rem;font-weight:700;color:var(--red);
}
.nota-art__link .ic{width:1em;height:1em;stroke-width:2.2;transition:transform .25s var(--ease)}
.nota-art:hover .nota-art__link .ic{transform:translateX(4px)}

/* ---------- Redes sociales y accesos del pie ---------- */
.redes{display:flex;gap:10px;margin-top:20px}
.redes a{
  display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  color:#fff;
  transition:background .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.redes a:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.5);transform:translateY(-3px)}
.redes .ic{width:20px;height:20px;stroke-width:1.8}
.redes a::after{content:none !important}

/* =========================================================
   PÁGINAS LEGALES
   ========================================================= */
.legal{max-width:74ch;font-size:1.02rem;color:var(--tx)}
.legal h2{
  font-size:1.35rem;margin-top:44px;margin-bottom:14px;
  padding-bottom:12px;border-bottom:2px solid var(--red-tint-2);
}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:1.08rem;margin-top:28px;margin-bottom:10px}
.legal p{margin-bottom:16px;color:var(--tx-2)}
.legal p b,.legal li b{color:var(--ink);font-weight:700}
.legal a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--red-700)}

.legal ul{margin:0 0 20px;display:grid;gap:10px}
.legal ul li{
  position:relative;padding-left:26px;color:var(--tx-2);font-size:.98rem;
}
.legal ul li::before{
  content:"";position:absolute;left:6px;top:.66em;
  width:6px;height:6px;border-radius:50%;background:var(--red);opacity:.55;
}

.legal__fecha{
  display:inline-block;
  background:var(--bg-3);border:1px solid var(--line);
  padding:7px 15px;border-radius:999px;
  font-size:.84rem;font-weight:600;color:var(--tx-2);margin-bottom:34px;
}

.legal__datos{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px 22px 12px}

/* Bloque que hay que leer sí o sí */
.legal__destacado{
  background:var(--red-tint);
  border:1px solid var(--red-tint-2);border-left:4px solid var(--red);
  border-radius:0 var(--r) var(--r) 0;
  padding:22px 26px;margin-bottom:26px;
}
.legal__destacado p:last-child{margin-bottom:0}

/* Aviso dirigido al equipo, no al visitante */
.legal__nota{
  margin-top:48px;padding:22px 26px;
  background:#fff9e8;border:1px dashed #e0b44c;border-radius:var(--r);
  font-size:.92rem;color:#6b4e0c;line-height:1.65;
}
.legal__nota b{color:#4a3607}

/* Lista de documentos con su estado */
.legal__docs{display:grid;gap:0 !important}
.legal__docs li{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 0 !important;border-bottom:1px solid var(--line);
  padding-left:0 !important;
}
.legal__docs li::before{content:none !important}
.legal__docs li>span:first-child{color:var(--ink);font-weight:600}

.opcional{color:var(--tx-3);font-weight:400}

/* Casilla de consentimiento del formulario */
.acepta{
  display:flex;gap:12px;align-items:flex-start;
  margin:6px 0 4px;padding:14px 16px;
  background:var(--bg-3);border:1px solid var(--line);border-radius:12px;
  font-size:.86rem;color:var(--tx-2);line-height:1.55;cursor:pointer;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.acepta:hover{border-color:var(--line-2)}
.acepta.is-error{border-color:var(--red);background:var(--red-tint)}
.acepta input{
  width:19px;height:19px;flex:none;margin-top:1px;
  accent-color:var(--red);cursor:pointer;
}
.acepta a{color:var(--red);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* Campo señuelo para bots: fuera de la vista pero sin display:none,
   que algunos bots detectan y esquivan. */
.trampa{
  position:absolute;left:-9999px;top:auto;
  width:1px;height:1px;overflow:hidden;
}

/* Constancia del Libro de Reclamaciones */
.constancia{
  background:#fff;border:2px solid var(--red);border-radius:22px;
  padding:clamp(30px,4vw,44px);text-align:center;
  box-shadow:var(--shadow);margin:30px 0 40px;
}
.constancia__ok{
  display:inline-block;background:var(--red);color:#fff;
  font-size:.72rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  padding:7px 16px;border-radius:999px;margin-bottom:18px;
}
.constancia__num{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(1.9rem,5vw,2.8rem);letter-spacing:-.02em;
  color:var(--ink);margin-bottom:16px;
  user-select:all;   /* un clic lo selecciona entero para copiarlo */
}
.constancia__txt{color:var(--tx-2);font-size:.97rem;max-width:52ch;margin:0 auto 12px}
.constancia__txt b{color:var(--ink)}
.constancia__acciones{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}

@media print{
  .accesos,.topbar,.header,.footer,.wa,.top,.progress,
  .constancia__acciones{display:none !important}
  .constancia{border-color:#000;box-shadow:none}
}

/* Enlace al aula virtual en el pie */
.aula-virtual{display:inline-flex !important;align-items:center;gap:.5em}
.aula-virtual .ic{width:.95em;height:.95em;stroke-width:2}
.form--legal{margin:30px 0 40px}
.form--legal textarea{
  width:100%;padding:14px 16px;
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:12px;
  color:var(--ink);font-size:.95rem;resize:vertical;min-height:96px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.form--legal textarea:focus{
  outline:none;border-color:var(--red);background:#fff;box-shadow:0 0 0 4px var(--red-soft);
}
.field.is-error textarea{border-color:var(--red);box-shadow:0 0 0 4px var(--red-soft)}

/* Botón del Libro de Reclamaciones en el pie */
.libro{
  display:inline-flex !important;align-items:center;gap:12px;
  margin-top:18px;padding:12px 16px !important;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.3);border-radius:var(--r);
  color:#fff !important;font-size:.82rem;line-height:1.3;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.libro:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.55)}
.libro .ic{width:26px;height:26px;flex:none;stroke-width:1.6}
.libro b{display:block;font-weight:800}
.libro::after{content:none !important}

/* ---------- Página de error ---------- */
.error404__num{
  font-family:var(--serif);font-weight:700;font-style:italic;
  font-size:clamp(5rem,15vw,10rem);line-height:.85;letter-spacing:-.05em;
  color:var(--red-tint-2);margin-bottom:8px;
  user-select:none;
}

/* ---------- Tabla comparativa ---------- */
.tabla-wrap{
  overflow-x:auto;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:#fff;box-shadow:var(--shadow-sm);
  -webkit-overflow-scrolling:touch;
}
.tabla{width:100%;border-collapse:collapse;min-width:640px;font-size:.94rem}
.tabla thead th{
  background:var(--red);color:#fff;
  font-size:.78rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  text-align:left;padding:16px 22px;white-space:nowrap;
}
.tabla tbody td{padding:17px 22px;border-top:1px solid var(--line);color:var(--tx-2);vertical-align:top}
.tabla tbody tr:nth-child(even){background:var(--bg-2)}
.tabla tbody td:first-child{color:var(--ink);font-weight:700}
.tabla tbody td:first-child a{transition:color .2s var(--ease)}
.tabla tbody td:first-child a:hover{color:var(--red)}
.tabla tbody tr:hover{background:var(--red-tint)}

/* ---------- Grupos de preguntas ---------- */
.faq-grupo{
  font-size:1.4rem;margin-top:52px;margin-bottom:20px;
  padding-bottom:14px;border-bottom:2px solid var(--red-tint-2);
}
.faq-grupo:first-of-type{margin-top:0}

/* Enlace "ver más" al cierre de una sección de la portada */
.mas{display:flex;justify-content:center;margin-top:clamp(36px,4vw,52px)}

/* Párrafo suelto de nota */
.nota{
  margin-top:30px;padding:20px 24px;
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);
  border-radius:0 var(--r) var(--r) 0;
  font-size:.95rem;color:var(--tx-2);max-width:74ch;
}

/* ---------- Lo que vas a aprender ---------- */
.learn{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 26px}
@media (max-width:700px){.learn{grid-template-columns:1fr}}
.learn li{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px 0;border-bottom:1px solid var(--line);
  font-size:.97rem;color:var(--tx);
}
.learn .ic{width:22px;height:22px;flex:none;margin-top:2px;color:var(--red);stroke-width:2.6}

/* ---------- Malla curricular ---------- */
.malla{position:relative;display:grid;gap:0}
.malla::before{
  content:"";position:absolute;left:27px;top:34px;bottom:34px;width:2px;
  background:linear-gradient(180deg,var(--red),var(--red-tint-2));
}
@media (max-width:640px){.malla::before{left:21px}}

.malla__i{
  position:relative;display:grid;
  grid-template-columns:56px 1fr;gap:24px;align-items:start;
  padding-block:22px;
}
@media (max-width:640px){.malla__i{grid-template-columns:44px 1fr;gap:18px}}

.malla__n{
  position:relative;z-index:1;
  display:grid;place-items:center;
  width:56px;height:56px;border-radius:50%;
  background:#fff;border:2px solid var(--red-tint-2);
  color:var(--red);font-family:var(--serif);font-size:1.25rem;font-weight:700;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
@media (max-width:640px){.malla__n{width:44px;height:44px;font-size:1.05rem}}
.malla__i:hover .malla__n{background:var(--red);color:#fff;border-color:var(--red)}

.malla__mes{
  display:inline-block;font-size:.73rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);margin-bottom:6px;
}
.malla__i h3{font-size:1.12rem;line-height:1.35}
.malla__i p{margin-top:9px;font-size:.94rem;color:var(--tx-2);max-width:62ch}
.malla__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.malla__tags li{
  font-size:.73rem;font-weight:600;color:var(--tx-2);
  background:var(--bg-3);border:1px solid var(--line);
  padding:4px 12px;border-radius:999px;
}

/* ---------- Perfil / dónde trabajar ---------- */
.dual{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.5vw,44px)}
@media (max-width:840px){.dual{grid-template-columns:1fr}}
.dual__box{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(28px,3.4vw,38px);
  box-shadow:var(--shadow-sm);
}
.dual__box h3{font-size:1.35rem;margin-bottom:20px}
.dual__txt{font-size:1rem;color:var(--tx-2)}
.dual__list{display:grid;gap:13px}
.dual__list li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:var(--tx-2)}
.dual__list .ic{width:19px;height:19px;flex:none;margin-top:3px;color:var(--red);stroke-width:2.4}

/* ---------- Banda de requisitos ---------- */
.reqband{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--red) 0%, var(--red-700) 100%);
  color:#fff;border-radius:24px;
  padding:clamp(32px,4vw,52px);
  box-shadow:var(--shadow-red);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,52px);align-items:center;
}
@media (max-width:840px){.reqband{grid-template-columns:1fr}}
.reqband h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.4rem)}
.reqband h2 em{color:rgba(255,255,255,.82)}
.reqband>div>p{margin-top:14px;color:rgba(255,255,255,.85);font-size:1rem;max-width:44ch}
.reqband .btn{margin-top:28px;background:#fff;color:var(--red-700);box-shadow:0 10px 26px rgba(0,0,0,.18)}
.reqband .btn:hover{background:#fff;color:var(--red-900);box-shadow:0 16px 34px rgba(0,0,0,.24)}
.reqlist{display:grid;gap:14px}
.reqlist li{
  display:flex;gap:14px;align-items:flex-start;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r);padding:18px 20px;
}
.reqlist .ic{width:20px;height:20px;flex:none;margin-top:2px;color:#fff;stroke-width:2.4}
.reqlist b{display:block;color:#fff;font-size:.96rem;font-weight:700}
.reqlist span{font-size:.87rem;color:rgba(255,255,255,.78)}

/* ---------- Otros cursos ---------- */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:920px){.related{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.related{grid-template-columns:1fr}}
.related__i{
  display:flex;gap:16px;align-items:center;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:20px 22px;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.related__i:hover{border-color:var(--red-tint-2);box-shadow:var(--shadow-sm);transform:translateY(-4px)}
.related__ico{
  display:grid;place-items:center;width:44px;height:44px;flex:none;
  border-radius:12px;background:var(--red-tint);color:var(--red);
}
.related__ico .ic{width:20px;height:20px;stroke-width:1.7}
.related__i b{display:block;color:var(--ink);font-size:.95rem;font-weight:700;letter-spacing:-.02em;line-height:1.35}
.related__i span{font-size:.82rem;color:var(--tx-3)}

/* =========================================================
   CAPA DE REFINAMIENTO
   Detalles que separan una web correcta de una que se siente cara.
   ========================================================= */

/* ---------- Barra de progreso de lectura ---------- */
.progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:200;
  pointer-events:none;background:transparent;
}
.progress span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--red-700),var(--red),var(--red-400));
  box-shadow:0 0 12px var(--red-glow);
  transform-origin:left;
  transition:width .08s linear;
}

/* ---------- Grano de papel en los fondos claros ---------- */
.hero::after,.cta::after,.section--alt::after,.chero::after{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--grain);
  opacity:.032;mix-blend-mode:multiply;pointer-events:none;
}
.section--alt{position:relative}
.section--alt>.wrap{position:relative;z-index:1}

/* Grano también en las superficies rojas, en modo claro */
.footer,.reqband,.pricecard--red{position:relative;overflow:hidden}
.footer::after,.reqband::after{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--grain);
  opacity:.06;mix-blend-mode:overlay;pointer-events:none;
}
.footer>*,.reqband>*{position:relative;z-index:1}

/* El acento en blanco sobre rojo necesita su propio degradado */
.reqband h2 em{color:rgba(255,255,255,.85)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .reqband h2 em{background-image:linear-gradient(100deg,#fff 0%, rgba(255,255,255,.72) 100%)}
}

/* ---------- Ornamento divisor ---------- */
.orn{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding-block:clamp(28px,4vw,48px);
}
.orn::before,.orn::after{
  content:"";height:1px;width:min(140px,22vw);
  background:linear-gradient(90deg,transparent,var(--line-2));
}
.orn::after{background:linear-gradient(90deg,var(--line-2),transparent)}
.orn i{
  display:block;width:7px;height:7px;flex:none;
  background:var(--red);transform:rotate(45deg);
  box-shadow:0 0 0 5px var(--red-tint);
}

/* ---------- Encabezados de sección: rombo + filete doble ---------- */
.eyebrow--line::before{
  content:"";display:inline-block;vertical-align:middle;
  width:6px;height:6px;margin:-2px 13px 0 0;
  background:var(--red);transform:rotate(45deg);
  box-shadow:0 0 0 4px var(--red-tint);
}
.eyebrow--line::after{
  background:linear-gradient(90deg,var(--red) 0%, var(--red) 58%, var(--red-tint-2) 58%);
  width:74px;
}

/* ---------- Enlaces del menú con subrayado animado ---------- */
.nav>a{position:relative}
.nav>a:not(.nav__cta)::after{
  content:"";position:absolute;left:4px;right:4px;bottom:2px;height:2px;
  background:var(--red);border-radius:2px;
  transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.nav>a:not(.nav__cta):hover::after,
.nav>a.is-active::after{transform:scaleX(1);transform-origin:left}
@media (max-width:1080px){.nav>a::after{display:none}}

/* ---------- Tarjetas: borde degradado al pasar el cursor ---------- */
.card::after,.panel::after,.steps__i::after,.dual__box::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1.5px;pointer-events:none;
  background:linear-gradient(140deg,var(--red),transparent 42%,transparent 58%,var(--red-400));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .45s var(--ease);
}
.panel,.steps__i,.dual__box{position:relative}
.card:hover::after,.panel:hover::after,.steps__i:hover::after,.dual__box:hover::after{opacity:1}

/* ---------- Cifras destacadas ---------- */
.strip__item b,.pricecard__price .num{font-variant-numeric:tabular-nums}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .pricecard__price .num{
    background-image:linear-gradient(135deg,var(--red) 0%, var(--red-700) 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
  }
}

/* ---------- Tarjeta de precio: aro degradado que gira ---------- */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes girar{to{--ang:360deg}}

.pricecard__cara--frente::before{
  content:"";position:absolute;inset:-2px;border-radius:24px;
  padding:2px;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--ang,0deg),
    var(--red-tint-2), var(--red), var(--red-400), var(--red-700), var(--red-tint-2));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:girar 10s linear infinite;
}

/* =========================================================
   TARJETA QUE GIRA EN 3D
   El contenedor guarda la perspectiva; el hijo es el que rota.
   Si se rotara el mismo elemento que lleva la perspectiva,
   el efecto de profundidad se pierde.
   ========================================================= */
.pricecard{
  background:transparent;box-shadow:none;padding:0;
  perspective:1600px;
}
.pricecard__giro{
  position:relative;
  transform-style:preserve-3d;
  transition:transform .95s cubic-bezier(.16,1,.3,1);
}
.pricecard.is-volteada .pricecard__giro{transform:rotateY(180deg)}

.pricecard__cara{
  background:#fff;border-radius:22px;
  padding:clamp(26px,2.8vw,34px);
  box-shadow:var(--shadow-lg);
  /* Sin esto se vería el reverso del texto al girar */
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.pricecard__cara--dorso{
  position:absolute;inset:0;
  transform:rotateY(180deg);
  display:flex;flex-direction:column;
  overflow-y:auto;
}

/* Botón de volver, arriba a la izquierda del dorso */
.pricecard__volver{
  display:inline-flex;align-items:center;gap:.4em;align-self:flex-start;
  background:none;border:0;padding:0 0 14px;cursor:pointer;
  font:inherit;font-size:.86rem;font-weight:700;color:var(--tx-2);
  transition:color .25s var(--ease);
}
.pricecard__volver:hover{color:var(--red)}
.pricecard__volver .ic{width:1.05em;height:1.05em;stroke-width:2.4;transition:transform .25s var(--ease)}
.pricecard__volver:hover .ic{transform:translateX(-3px)}

.pricecard__dorsoTitulo{
  font-size:1.5rem;font-weight:800;letter-spacing:-.03em;
  color:var(--ink);margin:14px 0 6px;
}
.pricecard__dorsoTxt{font-size:.9rem;color:var(--tx-2);margin-bottom:20px}

.form-vacante .field{margin-bottom:13px}
.form-vacante .btn{margin-top:6px}
.acepta--mini{padding:11px 13px;font-size:.8rem;margin:2px 0 6px}
.acepta--mini input{width:17px;height:17px}

/* La flecha del botón de reservar apunta al giro */
.pricecard__cara--frente [data-girar] .ic{
  width:1.05em;height:1.05em;stroke-width:2.4;
  transition:transform .28s var(--ease);
}
.pricecard__cara--frente [data-girar]:hover .ic{transform:translateX(4px)}

/* Sin animaciones: se cambia de cara sin rotación */
@media (prefers-reduced-motion:reduce){
  .pricecard__giro{transition:none}
}

/* ---------- Hero: la foto entra con una cortina ---------- */
.hero__photo{
  clip-path:inset(0 0 100% 0);
  transform:scale(1.08);
  transition:clip-path 1.5s var(--ease-out), transform 2.2s var(--ease-out);
}
body.is-loaded .hero__photo{clip-path:inset(0 0 0 0);transform:scale(1)}

/* Las barras rojas crecen desde arriba */
.hero__slash{transform:skewX(-13deg) scaleY(0);transform-origin:top;
  transition:transform 1.1s var(--ease-out)}
body.is-loaded .hero__slash{transform:skewX(-13deg) scaleY(1)}
.hero__slash--b{transition-delay:.14s}

/* El subrayado dibujado se traza solo */
.swoosh path{
  stroke-dasharray:340;stroke-dashoffset:340;
  transition:stroke-dashoffset 1.3s var(--ease-out) .55s;
}
body.is-loaded .swoosh path{stroke-dashoffset:0}

/* ---------- FAQ: apertura suave donde el navegador la soporte ---------- */
.faq__i{interpolate-size:allow-keywords}
.faq__i::details-content{
  block-size:0;overflow:hidden;
  transition:block-size .42s var(--ease-out), content-visibility .42s allow-discrete;
}
.faq__i[open]::details-content{block-size:auto}
.faq__i summary{transition:background .3s var(--ease), color .3s var(--ease)}
.faq__i summary:hover{background:var(--red-tint);color:var(--red)}

/* ---------- Cita / detalle tipográfico ---------- */
.split__txt:first-of-type::first-letter{
  float:left;font-family:var(--serif);font-weight:700;
  font-size:3.4em;line-height:.82;
  color:var(--red);margin:.06em .12em 0 0;
}

/* ---------- Animación de entrada ---------- */
.reveal{
  opacity:0;
  transform:translateY(30px) scale(.985);
  filter:blur(6px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
}
.reveal.is-in{opacity:1;transform:none;filter:blur(0)}

/* ---------- Escala tipográfica más dramática ---------- */
.shead__title{font-size:clamp(2.15rem,5vw,3.5rem);letter-spacing:-.035em}
.shead__lead{max-width:56ch}
.hero__title{font-size:clamp(2.7rem,6.2vw,4.6rem)}
.chero--solo .chero__title{font-size:clamp(2.3rem,5.8vw,3.9rem)}

/* ---------- Enlaces del pie con subrayado que crece ---------- */
.footer__col a{position:relative;width:fit-content}
.footer__col a::after{
  content:"";position:absolute;left:0;bottom:4px;height:1px;width:100%;
  background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.footer__col a:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- Filete superior en la tarjeta de datos ---------- */
.strip__card{overflow:hidden}
.strip__card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--red-700),var(--red),var(--red-400),var(--red));
}

/* ---------- Iconos que reaccionan en la tira de datos ---------- */
.strip__item{transition:background .35s var(--ease)}
.strip__item:hover{background:var(--red-tint)}
.strip__ico{transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease)}
.strip__item:hover .strip__ico{background:var(--red);color:#fff;transform:rotate(-6deg) scale(1.06)}

/* ---------- Flecha en las tarjetas de otros cursos ---------- */
.related__i{position:relative;padding-right:46px}
.related__i::after{
  content:"→";position:absolute;right:22px;top:50%;
  transform:translateY(-50%) translateX(-6px);
  color:var(--red);font-size:1.15rem;font-weight:700;
  opacity:0;transition:opacity .3s var(--ease), transform .3s var(--ease-out);
}
.related__i:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}

/* =========================================================
   CAPA CINEMATOGRÁFICA
   ========================================================= */

/* ---------- Transición entre páginas ----------
   El navegador funde una página con la siguiente. Donde no se soporta,
   la navegación sigue siendo la de siempre. */
@view-transition{ navigation: auto; }

::view-transition-old(root){
  animation:vt-sale .26s var(--ease) both;
}
::view-transition-new(root){
  animation:vt-entra .46s var(--ease-out) both;
}
@keyframes vt-sale{ to{opacity:0; transform:translateY(-10px)} }
@keyframes vt-entra{ from{opacity:0; transform:translateY(16px)} }

/* El escudo de la cabecera se mantiene fijo durante la transición.
   Ojo: el nombre debe ser único en la página. Si se repitiera (el pie
   lleva otro escudo), el navegador cancela toda la transición. */
.header .logo__crest{view-transition-name:escudo}

/* ---------- Titular que sube palabra por palabra ---------- */
.w{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.14em;margin-bottom:-.14em;   /* deja respirar a las colas de g, p, y */
}
.w__i{
  display:inline-block;
  transform:translateY(115%);
  transition:transform 1s var(--ease-out);
}
body.is-loaded .w__i{transform:translateY(0)}

/* El bloque en cursiva roja entra completo, después de las palabras */
.hero__accent{
  display:block;
  opacity:0;transform:translateY(34px);
  transition:opacity .9s var(--ease-out) .42s, transform 1s var(--ease-out) .42s;
}
body.is-loaded .hero__accent{opacity:1;transform:none}

/* En las portadas de sección el acento va en línea, no en bloque */
.chero__title em{
  display:inline-block;
  opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease-out) .34s, transform .95s var(--ease-out) .34s;
}
body.is-loaded .chero__title em{opacity:1;transform:none}

/* ---------- Numeración editorial de secciones ---------- */
main{counter-reset:sec}
.section .eyebrow--line,.cta .eyebrow--line{counter-increment:sec}
.section .eyebrow--line::before,.cta .eyebrow--line::before{
  content:counter(sec, decimal-leading-zero);
  width:auto;height:auto;margin:0 15px 0 0;
  background:none;box-shadow:none;transform:none;
  font-family:var(--serif);font-style:italic;font-weight:700;
  font-size:1.6em;letter-spacing:-.02em;color:var(--red-tint-2);
  vertical-align:-.14em;
}

/* ---------- Desfile de cursos ---------- */
.ticker{
  position:relative;overflow:hidden;
  /* mismo rojo que la banda de la tira de datos, para que no se vea la costura */
  background:var(--red);
  color:#fff;padding-block:20px;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.ticker__row{
  display:flex;align-items:center;width:max-content;
  animation:desfile 42s linear infinite;
}
.ticker:hover .ticker__row{animation-play-state:paused}
.ticker__row span{
  font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:clamp(1.1rem,2.1vw,1.65rem);
  padding-inline:clamp(22px,3vw,38px);white-space:nowrap;
}
.ticker__row i{
  width:7px;height:7px;flex:none;
  background:#fff;opacity:.65;transform:rotate(45deg);
}
@keyframes desfile{ to{ transform:translateX(-50%) } }

/* ---------- Foco de luz que sigue al cursor ---------- */
.card{
  --spot:transparent;
  background-image:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), var(--spot), transparent 68%);
  background-color:#fff;
}
.card:hover{--spot:var(--red-tint)}

.panel,.dual__box,.steps__i{
  --spot:transparent;
  background-image:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), var(--spot), transparent 66%);
  background-color:#fff;
}
.panel:hover,.dual__box:hover,.steps__i:hover{--spot:var(--red-tint)}

/* =========================================================
   SELECTOR DE CURSO
   Sustituye al <select> nativo, cuyo desplegable se sale de la
   pantalla en móvil porque el navegador lo dimensiona según la
   opción más larga y no admite CSS.
   ========================================================= */

/* El <select> real sigue ahí, invisible: así el formulario y su
   validación siguen funcionando sin tocar nada. */
.select-oculto{
  position:absolute;opacity:0;pointer-events:none;
  width:0;height:0;overflow:hidden;
}

.campo-curso{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:14px 16px;
  background:var(--bg-3);
  border:1px solid var(--line-2);border-radius:12px;
  font:inherit;font-size:.95rem;color:var(--ink);text-align:left;
  cursor:pointer;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.campo-curso:hover{border-color:var(--tx-3)}
.campo-curso:focus-visible{outline:none;border-color:var(--red);background:#fff;box-shadow:0 0 0 4px var(--red-soft)}
.campo-curso.sin-elegir{color:var(--tx-3)}
.campo-curso .ic{width:18px;height:18px;flex:none;color:var(--tx-3);stroke-width:2.2}
.field.is-error .campo-curso{border-color:var(--red);box-shadow:0 0 0 4px var(--red-soft)}

/* ---------- El modal ---------- */
.modal-curso{
  width:min(520px, 92vw);
  padding:0;border:0;border-radius:24px;
  background:#fff;color:var(--tx);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.modal-curso::backdrop{
  background:rgba(22,36,74,.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.modal-curso[open]{animation:modalEntra .34s var(--ease-out)}
.modal-curso[open]::backdrop{animation:fondoEntra .34s ease}
@keyframes modalEntra{from{opacity:0;transform:translateY(22px) scale(.97)}}
@keyframes fondoEntra{from{opacity:0}}

.modal-curso__cab{
  position:relative;
  padding:26px 26px 20px;
  border-bottom:1px solid var(--line);
}
.modal-curso__cab h2{font-size:1.3rem;letter-spacing:-.03em;margin-bottom:6px}
.modal-curso__cab p{font-size:.88rem;color:var(--tx-2)}
.modal-curso__cerrar{
  position:absolute;top:20px;right:20px;
  display:grid;place-items:center;width:38px;height:38px;
  background:var(--bg-3);border:1px solid var(--line);border-radius:11px;
  color:var(--tx);cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.modal-curso__cerrar:hover{background:var(--red);color:#fff;border-color:var(--red)}
.modal-curso__cerrar .ic{width:18px;height:18px;stroke-width:2.4}

.modal-curso__lista{
  padding:12px;max-height:min(64vh, 520px);overflow-y:auto;
  display:grid;gap:4px;
}
.modal-curso__i{
  display:flex;align-items:center;gap:14px;
  width:100%;padding:13px 14px;
  background:none;border:1.5px solid transparent;border-radius:14px;
  font:inherit;text-align:left;cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.modal-curso__i:hover{background:var(--red-tint)}
.modal-curso__i[aria-selected="true"]{border-color:var(--red);background:var(--red-tint)}
.modal-curso__ico{
  display:grid;place-items:center;width:44px;height:44px;flex:none;
  border-radius:13px;background:var(--red-tint);color:var(--red);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.modal-curso__i:hover .modal-curso__ico,
.modal-curso__i[aria-selected="true"] .modal-curso__ico{background:var(--red);color:#fff}
.modal-curso__ico .ic{width:21px;height:21px;stroke-width:1.7}
.modal-curso__txt{flex:1;min-width:0}
.modal-curso__txt b{display:block;color:var(--ink);font-size:.96rem;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.modal-curso__txt span{font-size:.8rem;color:var(--tx-3)}
.modal-curso__marca{width:22px;height:22px;flex:none;color:var(--red);opacity:0;stroke-width:2.4}
.modal-curso__i[aria-selected="true"] .modal-curso__marca{opacity:1}

/* En móvil sube desde abajo, como una hoja */
@media (max-width:560px){
  .modal-curso{
    width:100%;max-width:none;
    margin:auto auto 0;
    border-radius:24px 24px 0 0;
  }
  @keyframes modalEntra{from{opacity:0;transform:translateY(100%)}}
}

/* Confirmación tras enviar desde el dorso de la tarjeta */
.vacante-ok{
  font-size:1.25rem;font-weight:800;letter-spacing:-.025em;
  color:var(--red);margin-bottom:8px;
}

/* ---------- Aurora en la sección del formulario ---------- */
.cta::before{
  content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;
  background:
    radial-gradient(440px 340px at 16% 24%, rgba(207,27,43,.17), transparent 62%),
    radial-gradient(400px 320px at 82% 72%, rgba(224,50,63,.14), transparent 62%),
    radial-gradient(340px 280px at 58% 12%, rgba(150,18,30,.11), transparent 62%);
  animation:aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%  {transform:translate3d(0,0,0)      scale(1)}
  50% {transform:translate3d(2.5%,-2%,0) scale(1.09)}
  100%{transform:translate3d(-2%,2.5%,0) scale(1.04)}
}

/* ---------- Botón de volver arriba ---------- */
.top{
  position:fixed;right:22px;bottom:92px;z-index:90;
  display:grid;place-items:center;
  width:48px;height:48px;border-radius:50%;
  background:#fff;color:var(--red);
  border:1px solid var(--line-2);
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  opacity:0;transform:translateY(12px) scale(.88);pointer-events:none;
  transition:opacity .4s var(--ease-out), transform .4s var(--ease-out),
             background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.top.is-on{opacity:1;transform:none;pointer-events:auto}
.top:hover{background:var(--red);color:#fff;border-color:var(--red)}
.top .ic{width:21px;height:21px;stroke-width:2.2;transform:rotate(-90deg)}
@media (max-width:580px){.top{right:16px;bottom:82px;width:42px;height:42px}}

/* ---------- Respeto por quien prefiere menos movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  .w__i{transform:none}
  .hero__accent{opacity:1;transform:none}
  .ticker__row{animation:none}
  .cta::before{animation:none}
  .pricecard{transform:none !important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none;filter:none}
  .btn:hover,.card:hover,.steps__i:hover,.feats li:hover,.related__i:hover{transform:none}
  .hero__photo{clip-path:none;transform:none}
  .hero__slash{transform:skewX(-13deg) scaleY(1)}
  .swoosh path{stroke-dashoffset:0}
  .progress{display:none}
}