/* -----------------------------------------------------------------
   De fuga Colombia — la hoja de la web publica.
   La marca (nombre, WhatsApp, RNT...) sale de .env y del panel, nunca
   de aqui. Aqui solo vive COMO se ve.

   La idea: una agencia de viajes de las buenas. Fotos grandes, mucho
   aire, letra de revista y calma. Nada de "flyer".
     - Azul noche (--tinta) para el texto y los fondos oscuros.
     - Amarillo del logo (--sol) SOLO para acentos: el boton principal,
       la rayita de los antetitulos, un detalle. Si se usa en todo, deja
       de ser acento.
     - Marfil de fondo y arena para las franjas: calidos, no blanco hospital.
     - Titulos en Instrument Serif (la palabra de acento, en cursiva);
       todo lo demas en DM Sans, que es la letra del logo.
     - Salvia (verde) SOLO para Bolsillo Viajero: sus piezas son verdes.

   OJO con los nombres viejos (--dorado, --cacao, --plata...): vienen de
   la plataforma anterior y los usan cientos de reglas de los cursos. Se
   dejan como alias de los nuevos (mas abajo) para no romper nada. En lo
   nuevo, usa SIEMPRE los nombres nuevos.

   Todos los colores, letras y medidas estan aqui arriba.
   ----------------------------------------------------------------- */

/* --- Las letras ----------------------------------------------------
   DM Sans es variable: un archivo sirve para todos los grosores (y ajusta
   solo el dibujo al tamano). Cada letra va partida en dos archivos: el
   latino basico (castellano) y el extendido (tildes raras, simbolos). El
   navegador solo baja el segundo si la pagina lo necesita. */
@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;
  src:url('/fuentes/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;
  src:url('/fuentes/dm-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'DM Sans';font-style:italic;font-weight:100 1000;font-display:swap;
  src:url('/fuentes/dm-sans-latin-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fuentes/instrument-serif-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fuentes/instrument-serif-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('/fuentes/instrument-serif-latin-ext-italic.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('/fuentes/instrument-serif-latin-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* --- Colores de la marca --- */
  --tinta:#0E1A26;  --tinta-2:#172636;  --tinta-3:#22344A;   /* azul noche: texto y fondos oscuros */
  --sol:#FFCD00;    --sol-hondo:#E6B800; --sol-suave:#FFF4C2; /* amarillo EXACTO del logo: acentos */
  --marfil:#FBF8F3; /* fondo base */
  --arena:#F4EEE4;  /* franjas calidas */
  --blanco:#FFFFFF;
  --texto:#14202C;  --texto-suave:#5A6573;
  --linea:#E6DED1;  --linea-oscura:rgba(255,255,255,.14);
  --salvia:#4F6B4A; --salvia-claro:#E9EFE5;                   /* SOLO Bolsillo Viajero */
  --exito:#2F7D4F;  --error:#B3261E;

  /* --- Formas y sombras --- */
  --radio:16px; --radio-chico:10px; --pildora:999px;
  --sombra-1:0 1px 2px rgba(14,26,38,.06),0 10px 30px -12px rgba(14,26,38,.18);
  --sombra-2:0 30px 70px -30px rgba(14,26,38,.45);

  /* --- Letras --- */
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* --- Medidas --- */
  --ancho:1280px;
  --suave:cubic-bezier(.2,.7,.2,1);   /* la curva de todo lo que se mueve: arranca y se posa */
  --margen:1.25rem;                   /* el aire a los lados del contenido */
  --alto-cabecera:68px;

  /* --- Segun el fondo (claro u oscuro) ---
     Las piezas oscuras (heroe, pie, franjas) cambian estos y todo lo que
     llevan dentro se adapta solo: el foco, los botones fantasma... */
  --foco:var(--tinta);
  --texto-claro:rgba(255,255,255,.8);
  --linea-flecha:rgba(14,26,38,.22);
  --fantasma-fondo-hover:var(--tinta);
  --fantasma-texto-hover:var(--blanco);

  /* El granito del papel: un ruido finisimo que quita lo "plano" a los
     fondos oscuros. Es un SVG en linea: no pesa nada ni hace otra peticion. */
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.09'/%3E%3C/svg%3E");
  --flecha:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");

  /* --- Nombres viejos (los cursos y el aula aun los usan) --- */
  --dorado:var(--tinta);        /* antes: el acento (botones con texto blanco) */
  --dorado-claro:var(--sol);    /* antes: brillos sobre fondo oscuro */
  --dorado-tinta:var(--tinta-3);/* antes: el acento en texto sobre claro */
  --plata:var(--texto-suave);
  --plata-claro:var(--linea);
  --humo:var(--arena);
  --amarillo:var(--sol);
  --cobre:var(--tinta);
  --verde:var(--tinta);
  --cacao:var(--texto);
  --cacao-suave:var(--texto-suave);
  --nacar:var(--arena);
  --rosa-humo:var(--linea);
  --papel:var(--arena);
}
@media (min-width:760px){:root{--margen:2rem}}
@media (min-width:1180px){:root{--alto-cabecera:84px}}

/* Lo que va sobre fondo oscuro: el foco se ve en amarillo, los botones
   fantasma pasan a blanco y las flechas llevan linea clara. */
.oscuro,.heroe.con-foto,.heroe.sin-foto-heroe,.cabeza-pagina,.banner-curso,.franja,.pie,
.cajon-menu-lateral,.cierre-producto{
  --foco:var(--sol);
  --linea-flecha:rgba(255,255,255,.32);
  --fantasma-fondo-hover:var(--blanco);
  --fantasma-texto-hover:var(--tinta);
  --texto-intro:var(--texto-claro);
}

/* =================================================================
   BASE
   ================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;
  /* Los saltos dentro de la pagina (#algo) no quedan tapados por la cabecera.
     (Sin scroll-behavior:smooth a proposito: hace que cualquier scrollTo de
     un script, o la herramienta de capturas, se quede a medio camino.) */
  scroll-padding-top:calc(var(--alto-cabecera) + 1.25rem)}
body{
  margin:0;background:var(--marfil);color:var(--texto);
  font-family:var(--sans);font-size:17px;font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* Red de seguridad: nada puede abrir scroll horizontal en el celular.
     "clip" (y no "hidden") para no romper la cabecera pegajosa. */
  overflow-x:clip;
}
img,svg,video{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
:where(button,input,select,textarea){font:inherit;color:inherit}
::selection{background:var(--sol);color:var(--tinta)}
:focus-visible{outline:2px solid var(--foco);outline-offset:3px}

h1,h2,h3,h4{margin:0 0 .5em;color:var(--tinta);text-wrap:balance}
/* Los titulos grandes, en serif de revista. La fuente solo tiene un
   grosor: font-synthesis evita que el navegador se invente una negrita. */
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;font-synthesis:none}
h1{font-size:clamp(2.9rem,6.6vw,5.8rem);line-height:1.02}
h2{font-size:clamp(2.2rem,4.4vw,3.7rem);line-height:1.06}
/* La palabra de acento del titulo va en <em>: serif cursiva. */
h1 em,h2 em{font-family:var(--serif);font-style:italic;font-weight:400}
h3{font-family:var(--sans);font-weight:600;font-size:1.2rem;line-height:1.3;letter-spacing:-.01em}
h4{font-family:var(--sans);font-weight:600;font-size:1rem}
p{margin:0 0 1rem;max-width:62ch;text-wrap:pretty}
strong,b{font-weight:600}
em{font-style:italic}

/* Enlaces dentro de un texto corrido: subrayado fino, no grueso de navegador */
:where(.editorial,.respuesta,.descripcion-larga,.entradilla,.letra-pequena,.aviso-linea,.resumen,
  .vacio,.bloque.centrado,.caja-curso,.caja-aviso) a:not(.boton):not(.enlace-flecha){
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;
  text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);
  transition:text-decoration-color .25s ease}
:where(.editorial,.respuesta,.descripcion-larga,.entradilla,.letra-pequena,.aviso-linea,.resumen,
  .vacio,.bloque.centrado,.caja-curso,.caja-aviso) a:not(.boton):not(.enlace-flecha):hover{text-decoration-color:currentColor}

.contenedor{width:min(100% - 2 * var(--margen),var(--ancho));margin-inline:auto}
.contenedor.estrecho{width:min(100% - 2 * var(--margen),760px)}
.centrado{text-align:center}
.centrado p,.centrado .entradilla{margin-inline:auto}
.icono{width:22px;height:22px;flex:none}
.estrella{width:2.5rem;height:auto}

/* Solo para lectores de pantalla: no se ve, pero se lee. */
.solo-lector{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.saltar{position:absolute;left:-9999px;top:.75rem;z-index:90;background:var(--tinta);color:var(--blanco);
  padding:.75rem 1.1rem;border-radius:var(--pildora);font-weight:600;font-size:.9rem}
.saltar:focus{left:.75rem}

/* Que "hidden" gane siempre: cualquier regla que ponga display (flex,
   grid...) lo pisaria y el elemento quedaria a la vista. */
[hidden]{display:none!important}

/* --- Antetitulo: la etiqueta pequena en mayusculas sobre el titulo, con
   la rayita amarilla delante (el gesto del avion de papel del logo). */
.antetitulo{display:flex;align-items:center;gap:.85rem;max-width:none;margin:0 0 1.35rem;
  font-family:var(--sans);font-size:.74rem;font-weight:600;line-height:1.35;
  text-transform:uppercase;letter-spacing:.2em;color:var(--texto-suave)}
.antetitulo::before{content:"";flex:none;width:28px;height:2px;background:var(--sol)}
/* Centrado, la rayita va a los dos lados para que quede equilibrado. */
.centrado .antetitulo,.antetitulo.centrado{justify-content:center}
.centrado .antetitulo::after,.antetitulo.centrado::after{content:"";flex:none;width:28px;height:2px;background:var(--sol)}
.salvia .antetitulo::before,.salvia .antetitulo::after{background:var(--salvia)}
.etiqueta-corta{margin:0 0 .5rem;font-size:.7rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;color:var(--texto-suave)}

/* El parrafo de entrada, justo debajo de un titulo. */
.entradilla{font-size:clamp(1.1rem,1.5vw,1.25rem);line-height:1.6;color:var(--texto-suave);max-width:60ch}

/* =================================================================
   SECCIONES
   ================================================================= */
.bloque{padding-block:clamp(4.5rem,9vw,8rem)}
.bloque.tenue{background:var(--arena)}
.bloque.salvia{background:var(--salvia-claro)}
.bloque.oscuro{background:var(--tinta);color:var(--texto-claro)}
.oscuro :is(h1,h2,h3,h4){color:var(--blanco)}
.oscuro :is(h1,h2) em{color:var(--sol)}
.oscuro .antetitulo{color:rgba(255,255,255,.72)}
.oscuro .entradilla,.oscuro p{color:var(--texto-claro)}

/* El texto que acompana al titulo de una seccion de bloques */
.bloque > .contenedor > :is(h1,h2){max-width:20ch}
.bloque > .contenedor > p:not([class]){font-size:1.1rem;color:var(--texto-intro,var(--texto-suave));max-width:58ch}

/* Dos secciones seguidas del mismo color no suman los dos rellenos: se
   veria un hueco enorme sin nada. */
.bloque.tenue + .bloque.tenue,.bloque.oscuro + .bloque.oscuro,.bloque.salvia + .bloque.salvia{padding-top:0}
.bloque:not(.tenue,.oscuro,.salvia,.franja,.centrado) + .bloque:not(.tenue,.oscuro,.salvia,.franja,.centrado){
  padding-top:clamp(1rem,3vw,2.5rem)}
.bloque.centrado > .contenedor > :is(h1,h2),.centrado > :is(h1,h2){margin-inline:auto}

/* --- Rejillas --- */
.rejilla{display:grid;gap:clamp(1.25rem,2.4vw,2rem);margin-top:clamp(2.5rem,5vw,3.75rem)}
.rejilla.tres{grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.rejilla.tres{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.rejilla.tres{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Un solo viaje no se estira a todo lo ancho: parece un cartel roto. */
.rejilla.tres:has(> :only-child){grid-template-columns:minmax(0,27rem)}

/* =================================================================
   BOTONES Y ENLACES
   ================================================================= */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.8rem 1.7rem;border-radius:var(--pildora);
  border:1px solid var(--sol);background:var(--sol);color:var(--tinta);
  font-family:var(--sans);font-size:.95rem;font-weight:600;letter-spacing:.005em;line-height:1.2;
  text-align:center;text-decoration:none;text-wrap:balance;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .3s var(--suave),border-color .3s var(--suave),color .3s var(--suave),
    box-shadow .3s var(--suave),transform .3s var(--suave)}
.boton:hover{background:var(--sol-hondo);border-color:var(--sol-hondo)}
.boton:active{transform:translateY(1px)}
.boton .icono{width:1.15em;height:1.15em}
.boton.oscuro{background:var(--tinta);border-color:var(--tinta);color:var(--blanco)}
.boton.oscuro:hover{background:var(--tinta-3);border-color:var(--tinta-3)}
.boton.fantasma{background:transparent;color:inherit;border-color:currentColor;
  border-color:color-mix(in srgb,currentColor 45%,transparent)}
.boton.fantasma:hover{background:var(--fantasma-fondo-hover);border-color:var(--fantasma-fondo-hover);
  color:var(--fantasma-texto-hover)}
.boton.claro{background:var(--blanco);border-color:var(--blanco);color:var(--tinta)}
.boton.claro:hover{background:var(--marfil);border-color:var(--marfil)}
.boton.grande{min-height:60px;padding:1rem 2.1rem;font-size:1.02rem}
.boton.pequeno{min-height:42px;padding:.55rem 1.15rem;font-size:.86rem}
.boton.ancho{width:100%}
.boton:disabled,.boton[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:2.25rem}
.acciones.centradas{justify-content:center}

/* Enlace con flecha: una linea fina debajo que se llena al pasar y una
   flecha que avanza un poco. Para "ver mas", "ver el viaje"... */
.enlace-flecha,.enlace-suave{
  display:inline-flex;align-items:center;gap:.55rem;padding-bottom:.3rem;
  font-family:var(--sans);font-size:.95rem;font-weight:600;color:inherit;
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(var(--linea-flecha),var(--linea-flecha));
  background-size:0% 1px,100% 1px;background-position:0 100%,0 100%;background-repeat:no-repeat;
  transition:background-size .5s var(--suave)}
.enlace-flecha:hover,.enlace-suave:hover{background-size:100% 1px,100% 1px}
.enlace-flecha::after{content:"";flex:none;width:1.05em;height:1.05em;background:currentColor;
  -webkit-mask:var(--flecha) center/contain no-repeat;mask:var(--flecha) center/contain no-repeat;
  transition:transform .45s var(--suave)}
.enlace-flecha:hover::after{transform:translateX(4px)}
.enlace-suave{font-size:.9rem}
.enlace-suave.centrado{align-self:center}
button.enlace{background:none;border:0;padding:.15rem 0;cursor:pointer;font-size:.82rem;font-weight:500;
  color:var(--texto-suave);text-decoration:underline;text-underline-offset:.2em;
  text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
button.enlace:hover{color:var(--tinta);text-decoration-color:currentColor}
button.enlace.peligro:hover{color:var(--error)}

/* =================================================================
   FORMULARIOS
   ================================================================= */
.campo{display:flex;flex-direction:column;gap:.45rem;margin:0 0 1.25rem;min-width:0}
.campo-titulo{font-size:.82rem;font-weight:600;letter-spacing:.01em;color:var(--tinta)}
.campo-titulo :is(em,small){font-style:normal;font-weight:400;color:var(--texto-suave)}
.ayuda,small.ayuda{display:block;font-size:.82rem;line-height:1.45;color:var(--texto-suave)}

/* Las cajas de escribir de toda la web (campos, pago, cupon, ficha...).
   Va con :where() para que pese CERO: cualquier regla propia la pisa. */
:where(.campo,.campo-compra,.campo-cupon,.promo-campo,.form-comprar,.tarjeta-form)
  :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=range]),select,textarea){
  display:block;width:100%;min-height:52px;padding:.8rem 1rem;
  border:1px solid var(--linea);border-radius:var(--radio-chico);background:var(--blanco);
  color:var(--texto);font-family:var(--sans);font-size:1rem;line-height:1.4;
  appearance:none;-webkit-appearance:none;
  transition:border-color .2s ease,box-shadow .2s ease}
:where(.campo,.campo-compra,.campo-cupon,.promo-campo,.form-comprar,.tarjeta-form) :where(textarea){min-height:8.5rem;resize:vertical}
:where(.campo,.campo-compra,.campo-cupon,.promo-campo,.form-comprar,.tarjeta-form) :where(select){
  padding-right:2.75rem;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='%230E1A26' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .95rem center;background-size:18px}
:where(.campo,.campo-compra,.campo-cupon,.promo-campo,.form-comprar,.tarjeta-form) :where(input,select,textarea):hover{border-color:#CFC4B3}
:where(.campo,.campo-compra,.campo-cupon,.promo-campo,.form-comprar,.tarjeta-form) :where(input,select,textarea):focus{
  outline:none;border-color:var(--tinta);box-shadow:0 0 0 3px rgba(255,205,0,.38)}
:where(.campo,.campo-compra,.campo-cupon,.promo-campo,.form-comprar,.tarjeta-form) :where(input,select,textarea):user-invalid{border-color:var(--error)}
::placeholder{color:#8C949E;opacity:1}
input[type=checkbox],input[type=radio]{accent-color:var(--tinta)}

.campos-dos,.campos-tres{display:grid;gap:0 1.25rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){.campos-dos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:760px){.campos-tres{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Opciones en pildora (radio o casilla): la que esta elegida se rellena. */
.pildoras{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.25rem}
.pildoras label{position:relative;display:inline-flex;cursor:pointer}
.pildoras input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.pildoras label > span{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.55rem 1.1rem;
  border:1px solid var(--linea);border-radius:var(--pildora);background:var(--blanco);
  font-size:.92rem;font-weight:500;line-height:1.2;color:var(--texto);
  transition:background-color .25s var(--suave),border-color .25s var(--suave),color .25s var(--suave)}
.pildoras label:hover > span{border-color:var(--tinta)}
.pildoras input:checked + span{background:var(--tinta);border-color:var(--tinta);color:var(--blanco)}
.pildoras input:focus-visible + span{outline:2px solid var(--foco);outline-offset:2px}

/* Contador con menos y mas (adultos, ninos...). El javascript de los
   botones esta en sitio.js; sin el, se escribe el numero a mano. */
.contador{display:inline-flex;align-items:center;gap:.15rem;padding:4px;border:1px solid var(--linea);
  border-radius:var(--pildora);background:var(--blanco);width:max-content}
.contador button{display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;
  background:transparent;color:var(--tinta);font-size:1.3rem;line-height:1;cursor:pointer;
  transition:background-color .2s ease}
.contador button:hover{background:var(--arena)}
.contador button:disabled{opacity:.3;cursor:default;background:transparent}
.contador input[type=number]{width:3rem;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;
  text-align:center;font-size:1.05rem;font-weight:600;color:var(--tinta);
  -moz-appearance:textfield;appearance:textfield}
.contador input[type=number]::-webkit-inner-spin-button,
.contador input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.contador input[type=number]:focus{outline:none;box-shadow:none}
.contador:focus-within{border-color:var(--tinta)}

/* Avisos: bien, mal e informacion */
.aviso-ok,.aviso-error,.aviso-info{display:block;max-width:none;margin:0 0 1.25rem;padding:.95rem 1.15rem;
  border:1px solid;border-left-width:3px;border-radius:var(--radio-chico);font-size:.95rem;line-height:1.5}
.aviso-ok{background:#EEF6F1;border-color:#CFE5D7;border-left-color:var(--exito);color:#1D4F31}
.aviso-error{background:#FCEFEE;border-color:#F1D0CD;border-left-color:var(--error);color:#7D1D17}
.aviso-info{background:#FFFAE6;border-color:#F2E4AE;border-left-color:var(--sol-hondo);color:var(--tinta)}
.aviso-linea{max-width:none;margin:0 0 1rem;padding:.85rem 1.1rem;border-left:3px solid var(--sol);
  background:var(--blanco);border-radius:0 var(--radio-chico) var(--radio-chico) 0;
  font-size:.92rem;line-height:1.5;color:var(--texto)}
.aviso-fuerte{border-left-color:var(--error);background:#FCEFEE;color:#7D1D17}

.tarjeta-form{background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra-1);
  padding:clamp(1.5rem,4vw,3rem);border:1px solid rgba(14,26,38,.04)}

/* Trampa para robots: una persona no ve este campo. */
.trampa{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}

/* =================================================================
   PIEZAS PEQUENAS
   ================================================================= */
.insignia{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .8rem;border-radius:var(--pildora);
  background:rgba(255,255,255,.94);color:var(--tinta);font-size:.68rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;line-height:1.2;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.insignia.sol{background:var(--sol);color:var(--tinta)}
.insignia.oscura{background:var(--tinta);color:var(--blanco)}

/* Fichas de dato de un viaje: Fechas, Noches, Sale de... */
.datos-viaje{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr));
  margin:0;border-top:1px solid var(--linea)}
.datos-viaje > div{padding:1rem 1.25rem 1rem 0;border-bottom:1px solid var(--linea);min-width:0}
.datos-viaje dt{margin:0 0 .3rem;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-suave)}
.datos-viaje dd{margin:0;font-size:1rem;font-weight:600;line-height:1.35;color:var(--tinta)}

/* Precios: numeros que no bailan (todos los digitos del mismo ancho). */
.precio{margin:0;font-family:var(--sans);font-weight:600;font-variant-numeric:tabular-nums;
  font-size:1.15rem;line-height:1.3;color:var(--tinta);letter-spacing:-.005em}
.precio s{font-weight:400;font-size:.82em;color:var(--texto-suave);margin-right:.35rem}

.lista-texto{list-style:none;margin:0 0 1.25rem;padding:0}
.lista-texto li{position:relative;padding-left:1.6rem;margin-bottom:.55rem}
.lista-texto li::before{content:"";position:absolute;left:0;top:.82em;width:.8rem;height:2px;background:var(--sol)}

.etiqueta{display:inline-block;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  padding:.35rem .8rem;border:1px solid var(--linea);border-radius:var(--pildora);color:var(--texto-suave)}

/* Migas de pan: Inicio · Viajes · Punta Cana */
.migas{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;margin:0 0 1.75rem;
  font-size:.82rem;line-height:1.4;color:var(--texto-suave)}
.migas :is(ol,ul){display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;list-style:none;margin:0;padding:0}
.migas li{display:inline-flex;align-items:center;gap:.6rem}
.migas li + li::before{content:"";width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}
.migas a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.25em;transition:text-decoration-color .25s}
.migas a:hover{text-decoration-color:currentColor}
.migas [aria-current]{color:var(--tinta)}

/* =================================================================
   APARECER AL BAJAR
   Lo que lleve la clase "revelar" sube un poco y aparece cuando entra en
   pantalla (el observador esta en sitio.js). Solo si hay javascript (la
   clase .js la pone la cabeza de la pagina): sin el, todo se ve quieto.
   Para escalonar varios, pon style="--retraso:120ms".
   ================================================================= */
.js .revelar{opacity:0;transform:translate3d(0,28px,0);
  transition:opacity 1.1s var(--suave),transform 1.1s var(--suave);transition-delay:var(--retraso,0ms)}
.js .revelar.visible{opacity:1;transform:none}

/* =================================================================
   BARRA DE ANUNCIO
   ================================================================= */
.anuncio{position:relative;z-index:31;background:var(--tinta);color:rgba(255,255,255,.88);
  text-align:center;font-size:.8rem;letter-spacing:.03em;line-height:1.4;padding:.6rem var(--margen)}

/* =================================================================
   CABECERA
   Solida (marfil) en las paginas normales. Si la pagina empieza con una
   foto o una cabeza oscura (body.con-heroe), va TRANSPARENTE encima, con
   el logo y los enlaces en blanco, y al bajar se vuelve solida (sitio.js
   le pone .solida). La pagina se mete por debajo con un margen negativo.
   ================================================================= */
.cabecera{position:sticky;top:0;z-index:30;height:var(--alto-cabecera);
  background:rgba(251,248,243,.94);color:var(--tinta);
  -webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid transparent;
  transition:background-color .5s var(--suave),color .5s var(--suave),border-color .5s var(--suave),box-shadow .5s var(--suave)}
.cabecera.solida{border-bottom-color:rgba(14,26,38,.06);box-shadow:0 12px 32px -22px rgba(14,26,38,.35)}
.cabecera-fila{height:100%;display:flex;align-items:center;gap:1.25rem}

.logo{position:relative;display:flex;align-items:center;flex:none}
.logotipo{display:block;height:28px;width:auto;transition:opacity .5s var(--suave)}
.logo-blanco{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;pointer-events:none}

.nav{display:none}
.cabecera-acciones{margin-left:auto;display:flex;align-items:center;gap:.4rem}
.enlace-abono{display:none}
.boton-cotiza.boton.pequeno{min-height:40px;padding:.45rem 1rem;font-size:.84rem}
.icono-enlace{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:inherit}
.icono-enlace:hover{background:rgba(14,26,38,.06)}
.cuenta{position:absolute;top:4px;right:1px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--pildora);
  background:var(--sol);color:var(--tinta);font-size:.66rem;font-weight:700;line-height:1;display:grid;place-items:center}
.abrir-cajon{display:grid;place-items:center;width:44px;height:44px;margin-right:-8px;border-radius:50%;cursor:pointer;color:inherit;
  -webkit-tap-highlight-color:transparent}
.abrir-cajon .icono{width:26px;height:26px}
/* La casilla del menu esta escondida: cuando tiene el foco (teclado), se
   marca el boton que se ve. */
.interruptor-menu:focus-visible ~ .cabecera .abrir-cajon{outline:2px solid var(--foco);outline-offset:2px}
@media (max-width:359px){.boton-cotiza{display:none!important}}

@media (min-width:1180px){
  .cabecera-fila{gap:2rem}
  .logotipo{height:34px}
  .nav{display:flex;align-items:center;gap:clamp(1.5rem,2.4vw,2.4rem);margin-inline:auto}
  .nav a{position:relative;padding:.6rem 0;font-size:.93rem;font-weight:500;letter-spacing:.005em;white-space:nowrap}
  /* La raya de debajo se dibuja de izquierda a derecha al pasar */
  .nav a::after{content:"";position:absolute;left:0;right:0;bottom:.3rem;height:1px;background:currentColor;
    transform:scaleX(0);transform-origin:left;transition:transform .5s var(--suave)}
  .nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
  .cabecera-acciones{margin-left:0;gap:.6rem}
  .nav:empty + .cabecera-acciones{margin-left:auto}
  .enlace-abono{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .8rem;border-radius:var(--pildora);
    font-size:.93rem;font-weight:500;white-space:nowrap;transition:background-color .3s}
  .enlace-abono .icono{width:20px;height:20px}
  .enlace-abono:hover{background:rgba(14,26,38,.06)}
  .boton-cotiza.boton.pequeno{min-height:46px;padding:.65rem 1.4rem;font-size:.9rem}
  .abrir-cajon,.interruptor-menu{display:none}
}

/* --- Transparente sobre la foto de arriba --- */
.js .con-heroe main{margin-top:calc(-1 * var(--alto-cabecera))}
.js .con-heroe .cabecera:not(.solida){background:transparent;color:var(--blanco);
  -webkit-backdrop-filter:none;backdrop-filter:none;--foco:var(--sol)}
.js .con-heroe .cabecera:not(.solida) .logo-blanco{opacity:1}
.js .con-heroe .cabecera:not(.solida) .logo-color{opacity:0}
.js .con-heroe .cabecera:not(.solida) :is(.icono-enlace,.enlace-abono):hover{background:rgba(255,255,255,.12)}

/* =================================================================
   EL MENU DEL CELULAR: PANTALLA COMPLETA EN AZUL NOCHE
   Se abre con la casilla #abrir-menu (funciona sin javascript). Cerrado
   queda "visibility:hidden": asi el teclado no se mete en enlaces que no
   se ven.
   ================================================================= */
.interruptor-menu,.interruptor-bolsa{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.cajon{position:fixed;z-index:50;overflow-y:auto;overscroll-behavior:contain}

.cajon-menu-lateral{inset:0;display:flex;flex-direction:column;
  padding:0 var(--margen) calc(1.5rem + env(safe-area-inset-bottom,0px));
  background:var(--tinta) var(--grano);color:var(--blanco);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .45s var(--suave),transform .45s var(--suave),visibility 0s linear .45s}
.interruptor-menu:checked ~ .cajon-menu-lateral{opacity:1;visibility:visible;transform:none;
  transition:opacity .45s var(--suave),transform .45s var(--suave),visibility 0s}
.cajon-menu-lateral .cajon-cabeza{flex:none;height:var(--alto-cabecera);display:flex;align-items:center;justify-content:space-between}
.logotipo-cajon{display:block;height:28px;width:auto}
.cerrar-cajon{display:grid;place-items:center;width:44px;height:44px;margin-right:-8px;border-radius:50%;cursor:pointer;color:inherit}
.cerrar-cajon .icono{width:26px;height:26px}
.cajon-menu{flex:1;display:flex;flex-direction:column;justify-content:center;padding:2rem 0 2.5rem}
.cajon-menu a{display:block;padding:.4rem 0;font-family:var(--serif);font-size:clamp(2.3rem,9.5vw,3.2rem);line-height:1.1;
  letter-spacing:-.01em;color:var(--blanco);
  opacity:0;transform:translateY(16px);transition:opacity .6s var(--suave),transform .6s var(--suave),color .3s}
.cajon-menu a:hover{color:var(--sol)}
.cajon-menu a[aria-current="page"]{font-style:italic;color:var(--sol)}
.interruptor-menu:checked ~ .cajon-menu-lateral .cajon-menu a{opacity:1;transform:none}
/* Los enlaces entran uno detras de otro */
.cajon-menu a:nth-child(1){transition-delay:.08s}.cajon-menu a:nth-child(2){transition-delay:.12s}
.cajon-menu a:nth-child(3){transition-delay:.16s}.cajon-menu a:nth-child(4){transition-delay:.2s}
.cajon-menu a:nth-child(5){transition-delay:.24s}.cajon-menu a:nth-child(6){transition-delay:.28s}
.cajon-menu a:nth-child(7){transition-delay:.32s}.cajon-menu a:nth-child(n+8){transition-delay:.36s}
.cajon-pie{flex:none;display:grid;gap:1.25rem;padding-top:1.5rem;border-top:1px solid var(--linea-oscura)}
.cajon-wa{display:flex;flex-direction:column;gap:.1rem;font-size:.85rem;color:rgba(255,255,255,.65)}
.cajon-wa strong{font-size:1.1rem;font-weight:500;color:var(--blanco);letter-spacing:.01em}
.cajon-wa:hover strong{color:var(--sol)}
@media (min-width:1180px){.cajon-menu-lateral{display:none}}

/* --- El cajon de la bolsa (derecha) --- */
.cajon-bolsa{top:0;bottom:0;right:0;width:min(92vw,440px);display:flex;flex-direction:column;
  padding:0 1.5rem calc(1.5rem + env(safe-area-inset-bottom,0px));background:var(--marfil);box-shadow:var(--sombra-2);
  transform:translateX(102%);visibility:hidden;
  transition:transform .55s var(--suave),visibility 0s linear .55s}
.interruptor-bolsa:checked ~ .cajon-bolsa{transform:none;visibility:visible;transition:transform .55s var(--suave),visibility 0s}
.cajon-bolsa .cajon-cabeza{flex:none;height:var(--alto-cabecera);display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--linea)}
.cajon-titulo{font-family:var(--serif);font-size:1.75rem;line-height:1;color:var(--tinta)}
.tapa-cajon{position:fixed;inset:0;z-index:45;background:rgba(14,26,38,.45);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .45s var(--suave)}
.interruptor-bolsa:checked ~ .tapa-bolsa{opacity:1;pointer-events:auto;cursor:pointer}

.bolsa-lineas{list-style:none;padding:0;margin:0;flex:1;overflow-y:auto}
.bolsa-lineas li{display:flex;gap:1rem;padding:1.25rem 0;border-bottom:1px solid var(--linea)}
.bolsa-foto{flex:0 0 72px}
.bolsa-foto img,.bolsa-foto .sin-foto-mini{width:72px;height:90px;object-fit:cover;border-radius:8px;display:grid;place-items:center;background:var(--arena)}
.sin-foto-mini .estrella{width:18px}
.bolsa-datos{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2rem}
.bolsa-datos a{font-size:.95rem;font-weight:600;line-height:1.35;color:var(--tinta)}
.bolsa-datos small{font-size:.8rem;color:var(--texto-suave)}
.bolsa-precio{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;white-space:nowrap}
.bolsa-precio strong{font-size:.95rem;font-variant-numeric:tabular-nums}
.bolsa-precio form{margin:0}
.bolsa-pie{flex:none;padding-top:1.4rem;display:flex;flex-direction:column;gap:.85rem}
.bolsa-total{display:flex;justify-content:space-between;align-items:baseline;margin:0;max-width:none}
.bolsa-total span{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--texto-suave)}
.bolsa-total strong{font-size:1.35rem;font-variant-numeric:tabular-nums;color:var(--tinta)}
.bolsa-pie small{font-size:.8rem;color:var(--texto-suave)}
.bolsa-vacia{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.3rem;text-align:center}
.bolsa-vacia .estrella{width:32px}
.bolsa-vacia p{margin:0;font-family:var(--serif);font-size:1.8rem;color:var(--tinta)}

/* =================================================================
   PORTADA (HEROE)
   Cuatro formas, segun lo que se elija en el panel:
     - fondo: la foto a sangre, a pantalla completa, con el texto encima
     - carrusel: varias fotos de fondo que se cruzan
     - al lado: texto a un lado y la foto al otro, sobre marfil
     - sin foto: azul noche con el isotipo
   ================================================================= */
.heroe{position:relative}

/* --- Con foto de fondo ---
   La foto vive en su propia capa (::before) para acercarla poco a poco
   sin arrastrar el texto. Encima va un velo (::after) que garantiza que
   las letras blancas se lean venga la foto que venga: oscurece arriba
   (la cabecera), abajo (donde va el texto) y un poco a la izquierda. */
.heroe.con-foto{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:flex-end;
  min-height:88vh;min-height:88svh;
  padding:calc(var(--alto-cabecera) + 3rem) 0 clamp(3.25rem,8vh,6rem);
  background:var(--tinta);color:var(--blanco)}
@media (min-width:760px){.heroe.con-foto{min-height:100vh;min-height:100svh}}
.heroe.con-foto::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:var(--foto) 50% 45%/cover no-repeat;
  transform-origin:55% 60%;
  animation:heroe-acercar 34s var(--suave) infinite alternate}
.heroe.con-foto::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(14,26,38,.58) 0%,rgba(14,26,38,.18) 20%,rgba(14,26,38,0) 38%),
    linear-gradient(0deg,rgba(14,26,38,.88) 0%,rgba(14,26,38,.55) 28%,rgba(14,26,38,.12) 58%,rgba(14,26,38,0) 75%),
    linear-gradient(90deg,rgba(14,26,38,.42) 0%,rgba(14,26,38,0) 58%)}
/* Un acercamiento de 34 segundos: se nota que vive, pero no marea. */
@keyframes heroe-acercar{from{transform:scale(1.02)}to{transform:scale(1.13)}}
@media (max-width:759px){
  /* En el celular, el recorte vertical si lo hay */
  .heroe.con-foto::before{background-image:var(--foto-movil,var(--foto));background-position:50% 35%}
}
.heroe.con-foto .heroe-texto,.heroe-diapo .heroe-texto{max-width:none}
.heroe.con-foto .heroe-texto > *,.heroe-diapo .heroe-texto > *{max-width:46rem}
.heroe.con-foto :is(h1,h2),.heroe-diapo :is(h1,h2){
  color:var(--blanco);font-size:clamp(3rem,7.6vw,6.6rem);line-height:.98;letter-spacing:-.018em;
  margin:0 0 1.35rem;max-width:15ch;text-shadow:0 2px 40px rgba(14,26,38,.25)}
.heroe.con-foto :is(h1,h2) em,.heroe-diapo :is(h1,h2) em{color:var(--sol)}
.heroe.con-foto p,.heroe-diapo p{color:rgba(255,255,255,.88);font-size:clamp(1.05rem,1.45vw,1.25rem);line-height:1.6;max-width:36rem}
.heroe.con-foto .antetitulo,.heroe-diapo .antetitulo{color:rgba(255,255,255,.88);margin-bottom:1.6rem}
.heroe.con-foto .acciones,.heroe-diapo .acciones{margin-top:2.25rem}

/* --- Carrusel: las diapositivas se apilan en la misma casilla y se
   cruzan con un fundido; cada una con su foto y su acercamiento. --- */
.heroe.con-foto.heroe-carrusel{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;padding:0}
.heroe.con-foto.heroe-carrusel::before,.heroe.con-foto.heroe-carrusel::after{content:none}
.heroe-carrusel > .heroe-diapo{
  grid-area:1/1;position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:flex-end;
  padding:calc(var(--alto-cabecera) + 3rem) 0 clamp(5rem,11vh,7rem);
  opacity:0;visibility:hidden;transition:opacity 1.4s var(--suave),visibility 1.4s}
.heroe-carrusel > .heroe-diapo.activa{opacity:1;visibility:visible}
.heroe-diapo::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:var(--foto) 50% 45%/cover no-repeat;transform-origin:55% 60%;
  animation:heroe-acercar 34s var(--suave) infinite alternate}
/* Mientras no le toca, quieta: asi el acercamiento arranca de nuevo. */
.heroe-diapo:not(.activa)::before{animation:none}
.heroe-diapo::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(14,26,38,.58) 0%,rgba(14,26,38,.18) 20%,rgba(14,26,38,0) 38%),
    linear-gradient(0deg,rgba(14,26,38,.88) 0%,rgba(14,26,38,.55) 28%,rgba(14,26,38,.12) 58%,rgba(14,26,38,0) 75%),
    linear-gradient(90deg,rgba(14,26,38,.42) 0%,rgba(14,26,38,0) 58%)}
@media (max-width:759px){.heroe-diapo::before{background-image:var(--foto-movil,var(--foto));background-position:50% 35%}}
/* Los puntos para cambiar a mano: rayitas finas abajo, alineadas con el
   texto (a la derecha chocarian con el boton flotante de WhatsApp). */
.heroe-puntos{grid-area:1/1;align-self:end;justify-self:center;z-index:3;
  width:min(100% - 2 * var(--margen),var(--ancho));display:flex;justify-content:flex-start;gap:.5rem;
  margin-bottom:clamp(2rem,5vh,3rem)}
.heroe-punto{position:relative;width:34px;height:2px;padding:0;border:0;border-radius:2px;cursor:pointer;
  background:rgba(255,255,255,.38);transition:background-color .4s var(--suave),width .4s var(--suave)}
.heroe-punto::after{content:"";position:absolute;left:0;right:0;top:-14px;bottom:-14px}
.heroe-punto:hover{background:rgba(255,255,255,.7)}
.heroe-punto.activo{background:var(--sol);width:52px}

/* --- Al lado: el texto en marfil y la foto alta, con esquinas suaves --- */
.heroe.heroe-lado{padding:clamp(2.5rem,6vw,5.5rem) 0 clamp(3.5rem,7vw,6.5rem)}
.heroe-rejilla{display:grid;gap:2.5rem;align-items:center;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.heroe-rejilla{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(3rem,6vw,6.5rem)}}
.heroe-lado .heroe-texto{max-width:36rem}
.heroe-lado h1{font-size:clamp(2.9rem,5.2vw,5rem)}
.heroe-lado .heroe-texto > p{font-size:clamp(1.08rem,1.4vw,1.22rem);color:var(--texto-suave)}
.heroe-imagen{position:relative;overflow:hidden;border-radius:var(--radio);aspect-ratio:4/5;max-height:min(80vh,780px);background:var(--arena)}
.heroe-imagen img{width:100%;height:100%;object-fit:cover;transform-origin:50% 60%;animation:heroe-acercar 34s var(--suave) infinite alternate}
@media (max-width:899px){.heroe-lado .heroe-imagen{order:-1;aspect-ratio:4/3}}

/* --- Sin foto: azul noche con el isotipo grande, apenas insinuado --- */
.heroe.sin-foto-heroe{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;min-height:78vh;min-height:78svh;
  padding:calc(var(--alto-cabecera) + 3.5rem) 0 clamp(4rem,9vw,6rem);
  text-align:center;color:var(--texto-claro);
  background:
    radial-gradient(70% 60% at 85% 0%,rgba(255,205,0,.09),transparent 60%),
    radial-gradient(80% 70% at 0% 100%,var(--tinta-3),transparent 65%),
    var(--grano),var(--tinta)}
.heroe.sin-foto-heroe::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;
  width:min(110vw,900px);aspect-ratio:1;transform:translate(-50%,-50%);
  background:url('/marca/isotipo-blanco.svg') center/contain no-repeat;opacity:.03}
.sin-foto-heroe .heroe-texto{margin-inline:auto;max-width:54rem}
.sin-foto-heroe h1{color:var(--blanco);font-size:clamp(3rem,7.6vw,6.6rem);line-height:.98;margin-inline:auto}
.sin-foto-heroe h1 em{color:var(--sol)}
.sin-foto-heroe p{margin-inline:auto;font-size:clamp(1.05rem,1.45vw,1.25rem);color:var(--texto-claro)}
.sin-foto-heroe .antetitulo{justify-content:center;color:rgba(255,255,255,.75)}
.sin-foto-heroe .antetitulo::after{content:"";flex:none;width:28px;height:2px;background:var(--sol)}
.sin-foto-heroe .acciones{justify-content:center}
.heroe-marca .estrella{width:46px;margin:0 auto 2.25rem}

/* =================================================================
   CABEZA DE PAGINA INTERIOR
   <section class="cabeza-pagina [con-foto]" style="--foto:url(..)">
   Sin foto: azul noche con una textura finisima y el isotipo de marca de
   agua. Con foto: la foto a sangre con velo. La cabecera va encima.
   ================================================================= */
.cabeza-pagina{
  position:relative;isolation:isolate;overflow:hidden;
  padding:calc(var(--alto-cabecera) + clamp(3.5rem,8vw,6.5rem)) 0 clamp(3.5rem,7vw,5.75rem);
  color:var(--texto-claro);
  background:
    radial-gradient(60% 80% at 100% 0%,rgba(255,205,0,.08),transparent 60%),
    radial-gradient(70% 90% at 0% 100%,var(--tinta-3),transparent 65%),
    var(--grano),var(--tinta)}
.cabeza-pagina:not(.con-foto)::before{content:"";position:absolute;z-index:-1;right:-8%;top:50%;
  width:min(68vw,620px);aspect-ratio:1;transform:translateY(-45%);
  background:url('/marca/isotipo-blanco.svg') center/contain no-repeat;opacity:.04}
.cabeza-pagina.con-foto{display:flex;align-items:flex-end;min-height:min(80vh,760px);min-height:min(80svh,760px);background:var(--tinta)}
.cabeza-pagina.con-foto::before{content:"";position:absolute;inset:0;z-index:-2;
  background:var(--foto) 50% 50%/cover no-repeat;transform-origin:50% 60%;
  animation:heroe-acercar 34s var(--suave) infinite alternate}
.cabeza-pagina.con-foto::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  /* Aqui el texto va mas arriba que en la portada: el velo tambien cubre
     la izquierda y un poco toda la foto, para que una foto clara (cielo,
     arena) no se coma las letras blancas. */
  background:
    linear-gradient(180deg,rgba(14,26,38,.62) 0%,rgba(14,26,38,.15) 26%,rgba(14,26,38,0) 42%),
    linear-gradient(0deg,rgba(14,26,38,.88) 0%,rgba(14,26,38,.5) 32%,rgba(14,26,38,.1) 64%,rgba(14,26,38,0) 80%),
    linear-gradient(90deg,rgba(14,26,38,.62) 0%,rgba(14,26,38,.32) 42%,rgba(14,26,38,0) 72%),
    rgba(14,26,38,.18)}
@media (max-width:759px){.cabeza-pagina.con-foto::after{background:
    linear-gradient(180deg,rgba(14,26,38,.6) 0%,rgba(14,26,38,.2) 25%,rgba(14,26,38,.3) 45%,rgba(14,26,38,.9) 100%)}}
@media (max-width:759px){.cabeza-pagina.con-foto{min-height:72svh}}
.cabeza-pagina h1{color:var(--blanco);max-width:16ch;margin-bottom:1.25rem}
.cabeza-pagina h1 em{color:var(--sol)}
.cabeza-pagina .antetitulo{color:rgba(255,255,255,.78)}
.cabeza-pagina .entradilla,.cabeza-pagina p{color:var(--texto-claro)}
.cabeza-pagina .migas{color:rgba(255,255,255,.66)}
.cabeza-pagina .migas [aria-current]{color:var(--blanco)}
.cabeza-pagina .acciones{margin-top:2rem}

/* =================================================================
   BLOQUES DE LAS PAGINAS
   ================================================================= */

/* --- Texto (con o sin foto al lado) --- */
.dos-columnas{display:grid;gap:clamp(2.5rem,6vw,6.5rem);grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:900px){
  .dos-columnas:has(> .foto-lado){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .dos-columnas.invertido > .editorial{order:2}
  /* Sin foto y con titulo: a la revista. El titulo a la izquierda y el
     texto a la derecha, en vez de una columna estrecha perdida. */
  .dos-columnas:not(:has(> .foto-lado)) > .editorial:has(> :is(h1,h2)){
    display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(3rem,7vw,7rem);
    align-items:start;max-width:none}
  .dos-columnas:not(:has(> .foto-lado)) > .editorial:has(> :is(h1,h2)) > :is(h1,h2){grid-column:1;grid-row:1 / span 40}
  .dos-columnas:not(:has(> .foto-lado)) > .editorial:has(> :is(h1,h2)) > :not(h1,h2){grid-column:2}
}
.editorial{max-width:38rem}
.editorial > :is(h1,h2){margin-bottom:1.5rem}
.editorial p{font-size:1.06rem}
.editorial > :is(h1,h2) + p{font-size:clamp(1.12rem,1.4vw,1.25rem);line-height:1.55;color:var(--tinta)}
.foto-lado{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radio);background:var(--arena)}
@media (max-width:899px){.foto-lado{aspect-ratio:4/3}}

/* --- Foto ancha --- */
.figura-ancha{margin:0}
.figura-ancha img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radio);background:var(--arena)}
@media (min-width:760px){.figura-ancha img{aspect-ratio:16/8}}
.figura-ancha figcaption{display:flex;align-items:center;gap:.75rem;margin-top:1rem;font-size:.86rem;color:var(--texto-suave)}
.figura-ancha figcaption::before{content:"";flex:none;width:20px;height:1px;background:currentColor;opacity:.6}

/* --- Galeria: mosaico. La primera foto manda (doble de grande). --- */
.rejilla.galeria{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.rejilla.galeria figure{position:relative;margin:0;overflow:hidden;border-radius:12px;background:var(--linea);aspect-ratio:1}
.rejilla.galeria figure:first-child{grid-column:1/-1;aspect-ratio:16/10}
.rejilla.galeria img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--suave)}
.rejilla.galeria figure:hover img{transform:scale(1.05)}
.rejilla.galeria figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.5rem 1rem .9rem;
  font-size:.82rem;line-height:1.35;color:var(--blanco);
  background:linear-gradient(0deg,rgba(14,26,38,.7),rgba(14,26,38,0));
  opacity:0;transform:translateY(6px);transition:opacity .5s var(--suave),transform .5s var(--suave)}
.rejilla.galeria figure:hover figcaption{opacity:1;transform:none}
/* En el celular (dos columnas), si la ultima queda sola, va a lo ancho */
.rejilla.galeria figure:last-child:nth-child(even){grid-column:1/-1;aspect-ratio:16/10}
@media (min-width:760px){
  .rejilla.galeria{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(180px,19vw,270px);gap:.85rem}
  .rejilla.galeria figure,.rejilla.galeria figure:first-child,
  .rejilla.galeria figure:last-child:nth-child(even){aspect-ratio:auto;grid-column:auto}
  .rejilla.galeria figure:first-child{grid-column:span 2;grid-row:span 2}
  /* Segun cuantas fotos haya, algunas se ensanchan para que el mosaico
     cierre sin huecos (la grande ocupa 4 casillas y hay 4 por fila):
     - 1 foto: a todo lo ancho
     - 2: dos mitades grandes
     - 3, 7, 11...: las dos ultimas, dobles
     - 4, 8, 12...: la segunda, doble
     - 6, 10...: la ultima, a todo lo ancho */
  .rejilla.galeria figure:only-child{grid-column:1/-1}
  .rejilla.galeria figure:nth-child(2):last-child{grid-column:span 2;grid-row:span 2}
  .rejilla.galeria figure:last-child:nth-child(4n+3),
  .rejilla.galeria figure:nth-last-child(2):nth-child(4n+2){grid-column:span 2}
  .rejilla.galeria figure:nth-child(2):nth-last-child(4n+3){grid-column:span 2}
  .rejilla.galeria figure:last-child:nth-child(4n+6){grid-column:1/-1}
}
@media (hover:none){.rejilla.galeria figcaption{display:none}}

/* --- Pasos numerados --- */
.pasos{list-style:none;padding:0;margin:clamp(2.5rem,5vw,4rem) 0 0;display:grid;gap:2.75rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.pasos li{position:relative;padding-top:1.6rem;border-top:1px solid rgba(14,26,38,.14)}
.paso-numero{display:flex;align-items:flex-start;gap:.3rem;margin-bottom:1.1rem;
  font-family:var(--serif);font-style:italic;font-size:3.1rem;line-height:.9;color:var(--tinta)}
.paso-numero::after{content:"";width:7px;height:7px;margin-top:.35rem;border-radius:50%;background:var(--sol)}
.pasos h3{margin-bottom:.5rem}
.pasos p{font-size:.98rem;color:var(--texto-suave);margin:0}
.pasos .enlace-suave{margin-top:1rem}

/* Con foto: la foto a un lado y la lista al otro */
.pasos-con-foto{display:grid;gap:clamp(2.5rem,6vw,6rem);grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:900px){.pasos-con-foto{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.pasos-imagen img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radio)}
@media (max-width:899px){.pasos-imagen img{aspect-ratio:4/3}}
.pasos.pasos-lista{grid-template-columns:minmax(0,1fr);gap:0;margin-top:2.25rem}
.pasos-lista li{display:grid;grid-template-columns:4.25rem minmax(0,1fr);column-gap:1rem;padding:1.6rem 0}
.pasos-lista li:last-child{border-bottom:1px solid rgba(14,26,38,.14)}
.pasos-lista .paso-numero{grid-row:span 3;margin:0;font-size:2.6rem}
.pasos-lista :is(h3,p,.enlace-suave){grid-column:2}

/* Cada paso con la foto de su producto */
.pasos.pasos-visuales li{border-top:0;padding-top:0;display:flex;flex-direction:column}
.paso-foto{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radio);background:var(--arena);margin-bottom:1.35rem}
.paso-foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--suave)}
a.paso-foto:hover img{transform:scale(1.05)}
.paso-sin-producto{display:grid;place-items:center;background:var(--tinta) var(--grano)}
.paso-sin-producto span{font-family:var(--serif);font-style:italic;font-size:5rem;color:var(--sol);line-height:1}
.pasos-visuales .paso-numero{font-size:1.6rem;margin-bottom:.5rem}

/* --- Valores / pilares: "¿Por que viajar con nosotros?" --- */
.rejilla.valores{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:2.75rem 2rem}
.valor{padding-top:1.75rem;border-top:1px solid rgba(14,26,38,.14)}
.valor .estrella{width:26px;margin-bottom:1.35rem}
.valor h3{margin-bottom:.55rem}
.valor p{font-size:.98rem;color:var(--texto-suave);margin:0}
/* Tira de cifras: el numero manda y la etiqueta va debajo, chiquita.
   (No se llama ".cifras" porque ese nombre es el resumen de precios.) */
.rejilla.valores.tira-cifras{gap:2rem 2.5rem}
.valores.tira-cifras .valor{border-top:1px solid rgba(14,26,38,.14)}
.valores.tira-cifras h3{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,6vw,4.4rem);line-height:1;
  letter-spacing:-.02em;color:var(--tinta);margin:0 0 .5rem}
.valores.tira-cifras p{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave)}

/* --- Preguntas frecuentes: acordeon con un + que gira y se vuelve - --- */
.preguntas,.curso-preguntas{margin-top:clamp(2rem,4vw,3rem);border-top:1px solid rgba(14,26,38,.14)}
:is(.preguntas,.curso-preguntas) details{border-bottom:1px solid rgba(14,26,38,.14)}
:is(.preguntas,.curso-preguntas) summary{position:relative;display:block;list-style:none;cursor:pointer;
  padding:1.45rem 3.25rem 1.45rem 0;font-family:var(--sans);font-size:1.08rem;font-weight:500;line-height:1.4;
  color:var(--tinta);transition:color .25s}
:is(.preguntas,.curso-preguntas) summary::-webkit-details-marker{display:none}
:is(.preguntas,.curso-preguntas) summary::marker{content:""}
/* El + son dos rayitas: la vertical gira hasta tumbarse (queda un -) */
:is(.preguntas,.curso-preguntas) summary::before,
:is(.preguntas,.curso-preguntas) summary::after{content:"";position:absolute;right:.6rem;top:50%;width:16px;height:1.5px;
  background:currentColor;transition:transform .45s var(--suave)}
:is(.preguntas,.curso-preguntas) summary::after{transform:rotate(90deg)}
:is(.preguntas,.curso-preguntas) details[open] summary::after{transform:rotate(180deg)}
:is(.preguntas,.curso-preguntas) details[open] summary::before{transform:rotate(180deg)}
:is(.preguntas,.curso-preguntas) summary:hover{color:var(--tinta-3)}
.respuesta,.curso-pregunta > p{padding:0 3.25rem 1.6rem 0}
.respuesta p,.curso-pregunta > p{font-size:1rem;color:var(--texto-suave);margin-bottom:.75rem}
.curso-pregunta > p{margin:0}
/* Se abre suave (donde el navegador lo sabe hacer; si no, se abre y ya) */
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  :is(.preguntas,.curso-preguntas) details::details-content{height:0;overflow:clip;
    transition:height .45s var(--suave),content-visibility .45s allow-discrete}
  :is(.preguntas,.curso-preguntas) details[open]::details-content{height:auto}
}

/* --- Cita grande --- */
.cita-bloque blockquote{margin:0 auto 1.75rem;max-width:24ch;font-family:var(--serif);font-style:italic;
  font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.12;letter-spacing:-.012em;color:var(--tinta);text-wrap:balance}
.cita-bloque blockquote::before{content:"\201C";display:block;height:.5em;margin-bottom:.15em;
  font-size:2em;line-height:1;font-style:normal;color:var(--sol)}
.cita-bloque .antetitulo{justify-content:center}
.cita-bloque .antetitulo::after{content:"";flex:none;width:28px;height:2px;background:var(--sol)}

/* --- Llamada con foto: texto y foto sobre azul noche --- */
.banner-curso{background:var(--tinta) var(--grano);color:var(--texto-claro);padding-block:clamp(4.5rem,9vw,8rem);overflow:hidden}
.banner-curso-caja{display:grid;gap:clamp(2.5rem,6vw,6.5rem);grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:900px){.banner-curso-caja{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.banner-curso-texto .antetitulo{color:rgba(255,255,255,.75)}
.banner-curso-texto :is(h1,h2){color:var(--blanco);max-width:16ch}
.banner-curso-texto :is(h1,h2) em{color:var(--sol)}
.banner-curso-texto p{color:var(--texto-claro);font-size:1.08rem;max-width:34rem}
.banner-curso-foto{margin:0;overflow:hidden;border-radius:var(--radio);aspect-ratio:4/5}
.banner-curso-foto img{width:100%;height:100%;object-fit:cover;transform-origin:50% 60%;
  animation:heroe-acercar 34s var(--suave) infinite alternate}
@media (max-width:899px){.banner-curso-foto{order:-1;aspect-ratio:4/3}}

/* --- Llamada sin foto: una franja en azul noche, centrada --- */
.bloque.franja{position:relative;isolation:isolate;overflow:hidden;text-align:center;color:var(--texto-claro);
  background:
    radial-gradient(60% 90% at 50% 0%,rgba(255,205,0,.08),transparent 65%),
    var(--grano),var(--tinta)}
.bloque.franja::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(90vw,560px);aspect-ratio:1;
  transform:translate(-50%,-50%);background:url('/marca/isotipo-blanco.svg') center/contain no-repeat;opacity:.022}
.franja :is(h1,h2){color:var(--blanco);max-width:18ch;margin-inline:auto}
.franja :is(h1,h2) em{color:var(--sol)}
.bloque.franja p{color:var(--texto-claro);margin-inline:auto;font-size:1.1rem}
.franja .antetitulo{justify-content:center;color:rgba(255,255,255,.75)}

/* --- Contacto --- */
#contacto .contenedor{width:min(100% - 2 * var(--margen),820px);text-align:center}
#contacto .contenedor > :is(h1,h2){margin-inline:auto}
#contacto .contenedor > p{margin-inline:auto}
.datos{list-style:none;padding:0;margin:2.5rem auto 0;max-width:36rem;text-align:left;border-top:1px solid rgba(14,26,38,.14)}
.datos:not(:has(li)){display:none}
.datos li{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem 1.5rem;flex-wrap:wrap;
  padding:1.05rem 0;border-bottom:1px solid rgba(14,26,38,.14);color:var(--tinta)}
.datos span{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-suave)}
.datos a:hover{text-decoration:underline;text-underline-offset:.2em}
#contacto .acciones{justify-content:center}
.mapa{margin-top:2.5rem;border-radius:var(--radio);overflow:hidden}
.mapa iframe{width:100%;height:380px;border:0;display:block;filter:grayscale(1) contrast(1.05)}

/* --- Opiniones: tarjetas que se deslizan con el dedo --- */
.resenas-cabeza{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.resenas-cabeza h2{margin-bottom:.4rem}
.resenas-cabeza p{color:var(--texto-suave);margin:0}
.resenas-media{display:flex;align-items:center;gap:.6rem;margin-top:1rem!important;font-size:.92rem}
.resenas-media strong{font-weight:600;color:var(--tinta)}
.resenas-media span{color:var(--texto-suave)}
.resenas-flechas{display:flex;gap:.5rem;flex:none}
.flecha{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(14,26,38,.18);border-radius:50%;
  background:transparent;color:var(--tinta);font-size:1.1rem;line-height:1;cursor:pointer;
  transition:background-color .3s var(--suave),color .3s var(--suave),border-color .3s var(--suave)}
.flecha:hover{background:var(--tinta);border-color:var(--tinta);color:var(--blanco)}
.resenas-pista{display:flex;gap:1.25rem;margin:2.5rem -.5rem 0;padding:.5rem .5rem 2rem;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none}
.resenas-pista::-webkit-scrollbar{display:none}
.resena{flex:0 0 min(86%,26rem);scroll-snap-align:start;display:flex;flex-direction:column;gap:1rem;
  padding:2rem 1.85rem;background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra-1)}
@media (min-width:900px){.resena{flex-basis:calc((100% - 2.5rem) / 3)}}
.resena-cabeza{display:flex;align-items:center;gap:.85rem}
.resena-avatar{flex:none;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;
  background:var(--tinta);color:var(--sol);font-family:var(--serif);font-size:1.15rem}
.resena-quien{margin:0;font-weight:600;font-size:.95rem;color:var(--tinta)}
.resena-cuando{margin:0;font-size:.78rem;color:var(--texto-suave)}
.resena-texto{margin:0;font-family:var(--serif);font-size:1.35rem;line-height:1.35;color:var(--tinta)}
.resena-sello{margin:auto 0 0;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--texto-suave)}
.estrellas{display:inline-flex;gap:.15rem;line-height:1}
.estrellita{width:15px;height:15px;fill:var(--sol-hondo)}
.estrellita.vacia{fill:var(--linea)}
.valoracion-linea{display:flex;align-items:center;gap:.6rem;margin:-.4rem 0 1.25rem;font-size:.88rem}
.valoracion-linea a{color:var(--texto-suave);text-decoration:underline;text-underline-offset:.2em}
@media (max-width:759px){.resenas-flechas{display:none}}

/* =================================================================
   TARJETAS (productos de la tienda; los viajes tienen la suya en viajes.css)
   ================================================================= */
.tarjeta{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--blanco);
  border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra-1);
  transition:box-shadow .6s var(--suave)}
.tarjeta:hover{box-shadow:var(--sombra-2)}
.tarjeta img{transition:transform 1.4s var(--suave)}
.tarjeta:hover img{transform:scale(1.05)}
.tarjeta-foto{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--arena)}
@media (min-width:640px){.tarjeta-foto{aspect-ratio:4/5}}
.tarjeta-foto > img{width:100%;height:100%;object-fit:cover}
.tarjeta-foto .insignia{position:absolute;top:1rem;left:1rem;z-index:1}
.tarjeta-cuerpo{display:flex;flex-direction:column;flex:1;padding:1.4rem 1.45rem 1.5rem}
.tarjeta-cuerpo .etiqueta-corta{margin-bottom:.55rem}
.tarjeta h3{margin-bottom:.4rem;font-size:1.15rem}
.tarjeta h3 a:hover{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.linea{font-size:.92rem;line-height:1.55;color:var(--texto-suave);margin-bottom:1.1rem}
.tarjeta-fecha{margin:0 0 .5rem;font-size:.82rem;font-weight:600;color:var(--tinta-3)}
.tarjeta-pie{margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--linea);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.tarjeta-pie form{margin:0}
.tarjeta-boton{display:inline-flex;align-items:center;min-height:40px;padding:.45rem 1.05rem;border:1px solid var(--tinta);
  border-radius:var(--pildora);background:transparent;color:var(--tinta);font-size:.85rem;font-weight:600;cursor:pointer;
  transition:background-color .3s var(--suave),color .3s var(--suave)}
.tarjeta-boton:hover{background:var(--tinta);color:var(--blanco)}
.tarjeta-boton.apagado{border-color:var(--linea);color:var(--texto-suave);cursor:default;background:transparent}
.tarjeta.agotado .tarjeta-foto img{filter:grayscale(.7);opacity:.7}

/* Sin foto: la caja hace de etiqueta (isotipo, nombre y formato). */
.sin-foto{width:100%;height:100%;display:grid;place-items:center;background:var(--arena)}
.sin-foto .estrella{width:34px;opacity:.85}
.etiqueta-producto{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;
  padding:1.5rem;text-align:center;background:var(--tinta) var(--grano)}
.etiqueta-producto .estrella{width:34px;opacity:1;margin-bottom:.4rem}
.etiqueta-nombre{font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.1;color:var(--blanco);
  max-width:12ch;text-wrap:balance}
.etiqueta-formato{font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.7)}
.etiqueta-producto.grande .estrella{width:48px}
.etiqueta-producto.grande .etiqueta-nombre{font-size:clamp(2rem,4vw,3rem);max-width:14ch}
.bolsa-foto .etiqueta-producto{padding:.3rem}

/* =================================================================
   CATALOGO (la tienda generica)
   ================================================================= */
.filtros{display:flex;align-items:center;gap:.5rem;max-width:36rem;margin:2rem 0 1.25rem;
  padding:.35rem .35rem .35rem 1.3rem;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--pildora);
  transition:border-color .2s,box-shadow .2s}
.filtros:focus-within{border-color:var(--tinta);box-shadow:0 0 0 3px rgba(255,205,0,.38)}
.filtros input{flex:1;min-width:0;border:0;background:none;padding:.65rem 0;font-size:1rem;color:var(--texto)}
.filtros input:focus{outline:none}
.filtros button{flex:none;min-height:44px;padding:.5rem 1.35rem;border:0;border-radius:var(--pildora);
  background:var(--tinta);color:var(--blanco);font-size:.88rem;font-weight:600;cursor:pointer}
.filtros button:hover{background:var(--tinta-3)}
.categorias{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
.categorias a{display:inline-flex;align-items:center;min-height:42px;padding:.45rem 1.1rem;border:1px solid var(--linea);
  border-radius:var(--pildora);background:var(--blanco);font-size:.9rem;font-weight:500;color:var(--texto);
  transition:border-color .25s,background-color .25s,color .25s}
.categorias a:hover{border-color:var(--tinta)}
.categorias a.activa{background:var(--tinta);border-color:var(--tinta);color:var(--blanco)}
.vacio{max-width:34rem;margin-inline:auto;padding:3.5rem 0;text-align:center;color:var(--texto-suave)}
.vacio p{margin:0 auto .6rem;max-width:30rem}
.vacio-ayuda{font-size:.95rem;margin-bottom:1.5rem!important}

/* =================================================================
   FICHA DE PRODUCTO (generica)
   ================================================================= */
.ficha{display:grid;gap:2.5rem;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:900px){.ficha{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(3rem,6vw,6rem)}}
.ficha-fotos{display:grid;gap:.75rem}
.ficha-fotos img{width:100%;height:auto;border-radius:var(--radio);background:var(--arena)}
.ficha-fotos:has(img:nth-child(3)){grid-template-columns:1fr 1fr}
.ficha-fotos img:first-child{grid-column:1/-1}
.ficha-fotos .sin-foto{aspect-ratio:4/5;border-radius:var(--radio)}
.ficha-datos{position:sticky;top:calc(var(--alto-cabecera) + 1.5rem)}
@media (max-width:899px){.ficha-datos{position:static}}
.ficha-datos h1{font-size:clamp(2.5rem,4.8vw,4rem);margin-bottom:.75rem}
.ficha-datos .antetitulo a:hover{color:var(--tinta)}
.sku{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--texto-suave);margin-bottom:1.4rem}
.precio.grande{font-size:clamp(1.5rem,2.4vw,1.85rem);margin:0 0 1.4rem}
.resumen{font-size:1.08rem;color:var(--texto-suave)}

.form-comprar{margin:2rem 0 1.25rem;padding:clamp(1.25rem,3vw,1.85rem);background:var(--blanco);
  border-radius:var(--radio);box-shadow:var(--sombra-1)}
.form-comprar label{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.1rem;
  font-size:.82rem;font-weight:600;color:var(--tinta)}
.form-comprar .cantidad input{max-width:7.5rem}
.form-comprar .stock{font-size:.86rem;color:var(--texto-suave);margin:0 0 1rem}
.form-comprar button[type=submit]{width:100%;min-height:58px;border:0;border-radius:var(--pildora);
  background:var(--sol);color:var(--tinta);font-size:1rem;font-weight:600;cursor:pointer;
  transition:background-color .3s var(--suave)}
.form-comprar button[type=submit]:hover:not(:disabled){background:var(--sol-hondo)}
.form-comprar button[type=submit]:disabled{background:var(--linea);color:var(--texto-suave);cursor:not-allowed}
.form-comprar + p a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;
  text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}

.opcion-color{border:0;padding:0;margin:0 0 1.3rem;display:flex;flex-wrap:wrap;gap:.6rem}
.opcion-color legend{width:100%;padding:0;margin-bottom:.7rem;font-size:.82rem;font-weight:600;color:var(--tinta)}
.opcion-color legend .elegido{font-weight:400;color:var(--texto-suave)}
.bolita-elegir{position:relative;cursor:pointer;margin:0!important}
.bolita-elegir input{position:absolute;opacity:0;width:0;height:0}
.bolita-elegir > span{display:block;width:32px;height:32px;border-radius:50%;border:3px solid var(--blanco);box-shadow:0 0 0 1px var(--linea)}
.bolita-elegir input:checked + span{box-shadow:0 0 0 1.5px var(--tinta)}
.bolita-elegir input:focus-visible + span{box-shadow:0 0 0 2px var(--foco)}
.bolita-elegir em{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.opcion-texto{display:flex}

.detalle-producto{margin-top:clamp(4rem,8vw,6.5rem);padding-top:clamp(3rem,6vw,4.5rem);border-top:1px solid var(--linea)}
.detalle-producto h2{font-size:clamp(2rem,3.6vw,2.9rem);margin-bottom:1.25rem}
.detalle-producto h3{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--texto-suave);margin-bottom:1rem}
.tira-confianza{list-style:none;margin:0 0 clamp(3rem,6vw,4.5rem);padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.tira-confianza li{display:grid;gap:.25rem;padding:1.3rem 1.4rem;background:var(--blanco);border-radius:var(--radio-chico);box-shadow:var(--sombra-1)}
.tira-confianza strong{font-weight:600;color:var(--tinta)}
.tira-confianza span{font-size:.9rem;color:var(--texto-suave)}
.descripcion-larga{max-width:46rem}
.bloque-dudas{margin-top:clamp(3rem,6vw,4.5rem);max-width:46rem}
.cierre-producto{margin-top:clamp(3rem,6vw,4.5rem);padding:clamp(2.75rem,6vw,4.5rem) 1.5rem;border-radius:var(--radio);
  text-align:center;color:var(--texto-claro);background:radial-gradient(60% 90% at 50% 0%,rgba(255,205,0,.1),transparent 65%),var(--grano),var(--tinta)}
.cierre-producto h2{color:var(--blanco);margin-inline:auto;max-width:18ch}
.cierre-producto .precio{color:var(--sol);font-size:1.6rem;margin:0 auto 1.6rem}
.cierre-producto s{color:rgba(255,255,255,.55)}
.detalle-columnas{display:grid;gap:3rem;grid-template-columns:minmax(0,1fr);margin-top:3rem}
@media (min-width:820px){.detalle-columnas{grid-template-columns:1fr 1fr}}
.advertencias{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--linea)}
.advertencias p{font-size:.9rem;color:var(--texto-suave);margin-bottom:.5rem}
/* Los datos de la ficha: una rejilla ordenada, no pastillas en escalera */
.ficha-pastillas{list-style:none;margin:1.25rem 0 1.5rem;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));border-top:1px solid var(--linea)}
.ficha-pastillas li{display:grid;gap:.2rem;padding:.9rem 1rem .9rem 0;border-bottom:1px solid var(--linea);min-width:0}
.ficha-pastillas span{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-suave)}
.ficha-pastillas strong{font-weight:600;font-size:.98rem;line-height:1.3;color:var(--tinta)}

/* =================================================================
   COMPRA: BOLSA, PAGO Y CONFIRMACION
   Que se sienta como reservar en un hotel bueno: tarjetas blancas sobre
   marfil, pasos numerados, el resumen siempre a la vista.
   ================================================================= */

/* Cabecera del pago: volver, la marca y "compra segura". Nada mas. */
.cabecera-minimal{position:static;height:auto;background:var(--marfil);border-bottom:1px solid var(--linea);
  -webkit-backdrop-filter:none;backdrop-filter:none}
.cabecera-fila-minimal{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:76px}
.cabecera-fila-minimal .logo{justify-content:center}
.cabecera-fila-minimal .logotipo{height:30px}
.volver-bolsa{justify-self:start;display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  font-size:.9rem;font-weight:500;color:var(--texto-suave)}
.volver-bolsa:hover{color:var(--tinta)}
.compra-segura{justify-self:end;display:inline-flex;align-items:center;gap:.45rem;font-size:.86rem;color:var(--texto-suave)}
.compra-segura .icono{width:18px;height:18px;color:var(--exito)}
@media (max-width:560px){.volver-bolsa span,.compra-segura > span{display:none}}

.aviso-previa{background:var(--sol-suave);color:var(--tinta);text-align:center;font-size:.86rem;line-height:1.5;padding:.85rem var(--margen)}
.aviso-previa strong{font-weight:600}

.bloque-compra{padding:clamp(2rem,5vw,4rem) 0 clamp(4rem,8vw,6.5rem)}
.titulo-compra{font-size:clamp(2.6rem,5vw,4.2rem);margin-bottom:2rem}
.compra-rejilla{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:960px){.compra-rejilla{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(2.5rem,4.5vw,4.5rem)}}

/* --- Resumen (columna derecha) --- */
.resumen-compra{background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra-1);padding:clamp(1.5rem,3vw,2.25rem)}
.resumen-compra h2{font-size:clamp(1.8rem,2.6vw,2.2rem);margin-bottom:1.25rem}
@media (min-width:960px){.resumen-fijo{position:sticky;top:2rem}}
@media (max-width:959px){.resumen-fijo{display:none}}
.resumen-compra .boton.grande{width:100%;margin-top:1.5rem}

.cifras{margin:1.25rem 0 0;padding:0}
.cifras div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.55rem 0;font-size:.95rem}
.cifras dt{color:var(--texto-suave)}
.cifras dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.cifras dd.suave{color:var(--texto-suave);font-size:.86rem}
.cifra-total{border-top:1px solid var(--linea);margin-top:.6rem;padding-top:1.1rem!important}
.cifra-total dt{color:var(--tinta)!important;font-weight:600}
.cifra-total dd{font-family:var(--sans);font-weight:600;font-size:1.6rem;line-height:1;color:var(--tinta);letter-spacing:-.01em}
.cifra-total dd small{font-size:.66rem;letter-spacing:.14em;color:var(--texto-suave);vertical-align:middle;margin-right:.3rem}
.cifra-descuento dd{color:var(--exito)}
.nota-envio{font-size:.86rem;color:var(--texto-suave);margin:1rem 0 0}
.nota-envio strong{color:var(--tinta)}

.lineas-resumen{list-style:none;padding:0;margin:0}
.lineas-resumen li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:center;
  padding:.85rem 0;border-bottom:1px solid var(--linea)}
.lineas-resumen li:has(> .mini-nombre:first-child){grid-template-columns:minmax(0,1fr) auto}
.mini-foto{position:relative;display:block;width:60px;height:74px;border-radius:8px;background:var(--arena)}
.mini-foto img,.mini-foto .sin-foto{width:100%;height:100%;object-fit:cover;border-radius:8px}
.mini-foto .sin-foto .estrella{width:16px}
.mini-cantidad{position:absolute;top:-.45rem;right:-.45rem;min-width:1.35rem;height:1.35rem;padding:0 .3rem;border-radius:var(--pildora);
  background:var(--tinta);color:var(--blanco);font-size:.68rem;font-weight:600;display:grid;place-items:center}
.mini-nombre{font-size:.92rem;font-weight:500;line-height:1.35;color:var(--tinta)}
.mini-nombre small{display:block;font-weight:400;color:var(--texto-suave);font-size:.8rem}
.mini-precio{font-size:.92rem;white-space:nowrap;font-variant-numeric:tabular-nums}

/* --- La bolsa (pagina) --- */
.bolsa-pagina{list-style:none;margin:0 0 1.5rem;padding:0 clamp(1.25rem,3vw,2rem);background:var(--blanco);
  border-radius:var(--radio);box-shadow:var(--sombra-1)}
.bolsa-pagina li{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:1.25rem;padding:1.5rem 0;border-bottom:1px solid var(--linea)}
.bolsa-pagina li:last-child{border-bottom:0}
.linea-foto{display:block;width:96px;height:120px;border-radius:10px;overflow:hidden;background:var(--arena)}
.linea-foto img,.linea-foto .sin-foto{width:100%;height:100%;object-fit:cover}
.linea-datos{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.linea-nombre{font-weight:600;line-height:1.35;color:var(--tinta)}
.linea-nombre:hover{text-decoration:underline;text-underline-offset:.2em}
.linea-datos small{font-size:.82rem;color:var(--texto-suave)}
.cantidad-linea{display:inline-flex;align-items:center;gap:.1rem;margin-top:auto;padding:3px;align-self:flex-start;
  border:1px solid var(--linea);border-radius:var(--pildora)}
.cantidad-linea button{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:none;
  cursor:pointer;font-size:1.05rem;color:var(--tinta)}
.cantidad-linea button:hover{background:var(--arena)}
.cantidad-linea span{min-width:1.8rem;text-align:center;font-weight:600;font-size:.95rem}
.linea-precio{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:.5rem}
.linea-precio strong{font-weight:600;font-variant-numeric:tabular-nums}
.linea-precio form{margin:0}
@media (max-width:560px){
  .bolsa-pagina li{grid-template-columns:76px minmax(0,1fr);gap:1rem}
  .linea-foto{width:76px;height:96px}
  .linea-precio{grid-column:2;flex-direction:row;align-items:center}
}
.bolsa-vacia-pagina{display:flex;flex-direction:column;align-items:center;gap:1.4rem;padding:4.5rem 0;text-align:center}
.bolsa-vacia-pagina .estrella{width:36px}
.bolsa-vacia-pagina p{font-family:var(--serif);font-size:clamp(2rem,4vw,2.6rem);line-height:1.1;margin:0;color:var(--tinta)}

/* --- El formulario del pago: cada paso es una tarjeta --- */
.form-checkout{margin:0;min-width:0}
.form-checkout > .aviso-linea{margin-bottom:1.25rem}
.paso-compra{min-width:0;margin:0 0 1.25rem;padding:clamp(1.4rem,3.5vw,2.25rem);border:0;
  background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra-1)}
/* La leyenda flota para quedar DENTRO de la tarjeta (si no, el navegador
   la pinta montada sobre el borde de arriba). */
.paso-compra legend{float:left;width:100%;display:flex;align-items:center;gap:.85rem;padding:0;margin:0 0 1.5rem;
  font-family:var(--serif);font-size:clamp(1.7rem,2.6vw,2.05rem);line-height:1.1;color:var(--tinta)}
.paso-compra legend + *{clear:both}
.paso-compra legend .n{flex:none;display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;
  background:var(--sol);color:var(--tinta);font-family:var(--sans);font-size:.85rem;font-weight:700}
.campo-compra{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.1rem;min-width:0}
.campo-compra > span{font-size:.82rem;font-weight:600;color:var(--tinta)}
.campo-compra > span em{font-style:normal;font-weight:400;color:var(--texto-suave)}
.paso-compra .nota-envio{margin:-.2rem 0 1.25rem}
.subtitulo-paso{margin:1.75rem 0 .75rem;font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--texto-suave)}

.opciones-compra{display:grid;gap:.6rem}
.opcion-compra{display:flex;align-items:flex-start;gap:.9rem;padding:1.1rem 1.2rem;border:1px solid var(--linea);
  border-radius:12px;background:var(--blanco);cursor:pointer;transition:border-color .25s,box-shadow .25s,background-color .25s}
.opcion-compra:hover{border-color:rgba(14,26,38,.35)}
.opcion-compra:has(input:checked){border-color:var(--tinta);box-shadow:inset 0 0 0 1px var(--tinta);background:#FFFDF6}
.opcion-compra input{flex:none;width:18px;height:18px;margin:.15rem 0 0;accent-color:var(--tinta)}
.opcion-texto-compra{flex:1;display:flex;flex-direction:column;gap:.2rem;min-width:0}
.opcion-texto-compra strong{font-weight:600;font-size:.98rem;color:var(--tinta)}
.opcion-texto-compra small{font-size:.84rem;color:var(--texto-suave);line-height:1.45}
.opcion-precio{font-size:.95rem;font-weight:600;white-space:nowrap}
.medios-pago{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.6rem}
.medios-pago i{font-style:normal;font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  padding:.25rem .55rem;border:1px solid var(--linea);border-radius:6px;background:var(--marfil);color:var(--texto-suave)}
.precio-envio{float:right;font-weight:600}

.boton-pagar.boton{width:100%;margin-top:.75rem}
.letra-pequena{font-size:.8rem;line-height:1.5;color:var(--texto-suave);text-align:center;margin:1.1rem auto 0;max-width:46ch}
.resumen-movil{display:none;margin-bottom:1.25rem;padding:0 1.25rem;background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra-1)}
.resumen-movil summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:56px;padding:1rem 0;
  cursor:pointer;list-style:none;font-size:.92rem}
.resumen-movil summary::-webkit-details-marker{display:none}
.resumen-movil summary span{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.resumen-movil summary strong{font-weight:600;font-size:1.05rem;font-variant-numeric:tabular-nums}
.resumen-movil .lineas-resumen{padding-bottom:.9rem}
@media (max-width:959px){.resumen-movil{display:block}}
.paso-cuenta .cuenta-correo{display:grid;gap:.2rem;margin:.2rem 0 1.1rem;padding:.85rem 1rem;background:var(--marfil);border-radius:var(--radio-chico)}
.paso-cuenta .cuenta-correo span{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave)}
.paso-cuenta .cuenta-correo strong{font-weight:600;overflow-wrap:anywhere}

/* --- Cupon --- */
.caja-cupon{margin-top:1.25rem;border-top:1px solid var(--linea);padding-top:1.15rem}
.form-cupon{display:flex;align-items:flex-end;gap:.6rem}
.campo-cupon{flex:1;display:flex;flex-direction:column;gap:.4rem;min-width:0}
.campo-cupon span{font-size:.82rem;font-weight:600;color:var(--tinta)}
.campo-cupon input{text-transform:uppercase;letter-spacing:.06em}
.form-cupon .boton{flex:none;min-height:52px}
.cupon-puesto{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0;font-size:.9rem;max-width:none}
.cupon-puesto form{margin:0}
@media (max-width:420px){.form-cupon{flex-direction:column;align-items:stretch}}

/* --- Confirmacion del pedido --- */
.confirmacion-cabeza{text-align:center;padding:2rem 0 2.5rem}
.confirmacion-cabeza .estrella{width:52px;margin:0 auto 1.6rem}
.confirmacion-cabeza .antetitulo{justify-content:center}
.confirmacion-cabeza .antetitulo::after{content:"";flex:none;width:28px;height:2px;background:var(--sol)}
.confirmacion-cabeza h1{font-size:clamp(2.6rem,5.6vw,4.6rem);margin-bottom:.9rem}
.confirmacion-cabeza p{margin-inline:auto;color:var(--texto-suave);font-size:1.08rem}
.confirmacion-rejilla{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr);padding:1rem 0 2.5rem}
@media (min-width:760px){.confirmacion-rejilla{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.confirmacion-rejilla > div{background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra-1);padding:clamp(1.5rem,3vw,2.25rem)}
.confirmacion-rejilla h2{font-size:1.75rem;margin-bottom:1rem}
.confirmacion-datos p{font-size:.95rem;line-height:1.7;margin-bottom:1.6rem}
.caja-curso,.caja-aviso{margin:1.5rem 0;padding:clamp(1.5rem,4vw,2.5rem);background:var(--blanco);border-radius:var(--radio);
  box-shadow:var(--sombra-1);text-align:center}
.caja-curso h2,.caja-aviso h2{font-size:clamp(1.7rem,3vw,2.2rem);margin:0 0 .6rem}
.caja-curso p{color:var(--texto-suave);margin:0 auto 1.25rem;max-width:36rem}
.caja-aviso{text-align:left}
.descargas{list-style:none;padding:0;margin:1rem 0 0;display:flex;gap:.7rem;flex-wrap:wrap}
.tabla-carrito{width:100%;border-collapse:collapse;margin:2rem 0}
.tabla-carrito td{padding:1.1rem .4rem;border-bottom:1px solid var(--linea);vertical-align:middle}

/* =================================================================
   PAGINAS SUELTAS: no encontrada, pedido sin clave, gracias...
   ================================================================= */
.bloque.centrado{padding-block:clamp(6rem,14vw,10rem)}
.bloque.centrado :is(h1,h2){max-width:16ch;margin-inline:auto}
.bloque.centrado p{margin-inline:auto;color:var(--texto-suave);font-size:1.08rem}
.bloque.centrado .boton{margin-top:1rem}

/* =================================================================
   PIE
   ================================================================= */
.pie{background:var(--tinta) var(--grano);color:rgba(255,255,255,.72);font-size:.95rem;
  padding-top:clamp(4.5rem,9vw,7.5rem)}
.pie a{transition:color .25s}
.pie-llamada{display:grid;gap:2.25rem;padding-bottom:clamp(3.5rem,7vw,5.5rem);border-bottom:1px solid var(--linea-oscura)}
@media (min-width:960px){.pie-llamada{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:4rem}}
.pie-frase{margin:0;max-width:21ch;font-family:var(--serif);font-size:clamp(2.3rem,4.6vw,4rem);line-height:1.04;
  letter-spacing:-.015em;color:var(--blanco);text-wrap:balance}
.pie-frase em{font-style:italic;color:var(--sol)}
.pie-llamada .acciones{margin-top:0}
.pie-rejilla{display:grid;gap:2.75rem 2rem;grid-template-columns:repeat(2,minmax(0,1fr));padding-block:clamp(3rem,6vw,4.75rem)}
.pie-marca,.pie-contacto{grid-column:1/-1}
@media (min-width:1000px){
  /* Las columnas de enlaces solo salen si sus paginas existen: la rejilla
     se reparte entre las que haya (auto-fit), sin dejar huecos. */
  .pie-rejilla{grid-template-columns:minmax(0,1.3fr) repeat(auto-fit,minmax(10.5rem,1fr))}
  .pie-marca,.pie-contacto{grid-column:auto}
}
.logotipo-pie{display:block;height:34px;width:auto;margin-bottom:1.1rem}
.pie-marca p{margin:0;max-width:24ch;font-size:.92rem;color:rgba(255,255,255,.62)}
.pie-titulo{margin:0 0 1.15rem;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.pie-columna ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.pie-columna a{display:inline-flex;align-items:center;min-height:36px;color:rgba(255,255,255,.88)}
.pie-columna a:hover{color:var(--sol)}
.pie-contacto li{padding:.2rem 0;color:rgba(255,255,255,.88)}
.pie-contacto a{min-height:0;display:block;padding:.15rem 0}
.pie-contacto li span{display:block;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.58);margin-bottom:.1rem}
.pie-contacto li + li{margin-top:.55rem}
.pie-virtual{display:flex;align-items:center;gap:.6rem;color:rgba(255,255,255,.75)!important}
.pie-virtual::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--sol)}
.pie-legal{padding-block:2rem calc(2.5rem + env(safe-area-inset-bottom,0px));border-top:1px solid var(--linea-oscura);
  font-size:.8rem;color:rgba(255,255,255,.62)}
.pie-escnna{max-width:92ch;margin:0 0 1.25rem;font-size:.8rem;line-height:1.6;color:rgba(255,255,255,.62)}
.pie-base{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.75rem}
.pie-base p{margin:0;max-width:none}
.pie-rnt{font-weight:600;letter-spacing:.08em;color:rgba(255,255,255,.88)}
.credito-geo a{font-size:.72rem;color:rgba(255,255,255,.55)}
.credito-geo a:hover{color:var(--blanco)}
/* En el celular deja sitio abajo al boton flotante de WhatsApp */
@media (max-width:759px){.pie-legal{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom,0px))}}

/* El pie corto: pago, aula y landing (solo lo legal) */
.pie-corto,.pie-landing{padding:0;background:var(--marfil);color:var(--texto-suave)}
.pie-corto .pie-legal,.pie-landing .pie-legal{display:flex;flex-direction:column;align-items:center;gap:.7rem;
  text-align:center;padding:1.8rem 0 2.5rem;border-top:1px solid var(--linea);color:var(--texto-suave)}
.pie-landing .pie-legal{padding-bottom:7.5rem}
.pie-corto .pie-enlaces,.pie-landing .pie-enlaces{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.6rem}
.pie-corto a,.pie-landing a{font-size:.82rem;color:var(--texto-suave);text-decoration:underline;text-underline-offset:.2em;
  text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
.pie-corto p,.pie-landing p{margin:0;font-size:.8rem;max-width:none}
.pie-ayuda{color:var(--texto-suave);font-size:.9rem}
.pie-landing .credito-geo a{color:var(--texto-suave)}

/* =================================================================
   EL BOTON DE WHATSAPP QUE VA FLOTANDO
   Un circulo azul noche con el icono en amarillo: se ve, pero no grita
   (nada del verde chillon). Con un aro claro para que no se pierda
   cuando pasa por encima del pie, que es del mismo azul.
   Queda por debajo de los cajones (z-index 50) para no taparlos.
   ================================================================= */
.wasap{position:fixed;z-index:40;right:clamp(1rem,2.5vw,1.75rem);
  bottom:calc(clamp(1rem,2.5vw,1.75rem) + env(safe-area-inset-bottom,0px));
  display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:var(--tinta);color:var(--sol);
  box-shadow:0 0 0 1px rgba(255,255,255,.2),0 14px 34px -12px rgba(14,26,38,.6);
  transition:transform .4s var(--suave),background-color .4s var(--suave),color .4s var(--suave)}
.wasap svg{width:26px;height:26px}
.wasap:hover{transform:translateY(-3px);background:var(--sol);color:var(--tinta)}
.wasap:focus-visible{outline:2px solid var(--sol);outline-offset:4px}
@media (max-width:560px){.wasap{width:52px;height:52px;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px))}}

/* =================================================================
   VENTANITA DEL DESCUENTO DE BIENVENIDA
   ================================================================= */
.promo-fondo{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1.2rem;
  background:rgba(14,26,38,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:aparecer .35s var(--suave)}
.promo-fondo[hidden]{display:none}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
body.con-promo{overflow:hidden}
.promo-caja{position:relative;width:min(100%,440px);max-height:92vh;overflow-y:auto;padding:2.75rem 2rem 2rem;
  background:var(--marfil);border-radius:var(--radio);box-shadow:var(--sombra-2);text-align:center}
.promo-cerrar{position:absolute;top:.6rem;right:.6rem;display:grid;place-items:center;width:44px;height:44px;
  background:none;border:0;border-radius:50%;cursor:pointer;color:var(--texto-suave)}
.promo-cerrar:hover{color:var(--tinta);background:var(--arena)}
.promo-estrella .estrella{width:34px;margin:0 auto 1rem}
.promo-caja .antetitulo{justify-content:center}
.promo-caja h2{font-size:clamp(1.9rem,6vw,2.4rem);margin-bottom:.5rem}
.promo-texto{color:var(--texto-suave);font-size:.95rem;margin-inline:auto}
.promo-caja form{margin-top:1.4rem;display:grid;gap:.8rem;text-align:left}
.promo-campo{display:flex;flex-direction:column;gap:.35rem}
.promo-campo span{font-size:.82rem;font-weight:600;color:var(--tinta)}
.promo-caja .boton.grande{width:100%;margin-top:.3rem}
.promo-error{margin:0;font-size:.88rem;color:var(--error)}
.promo-legal{font-size:.74rem;line-height:1.5;color:var(--texto-suave);margin:1rem auto 0;max-width:36ch}
.promo-no{background:none;border:0;cursor:pointer;margin-top:.9rem;min-height:44px;font-size:.85rem;color:var(--texto-suave);
  text-decoration:underline;text-underline-offset:.2em}
.promo-no:hover{color:var(--tinta)}
.promo-codigo{display:flex;align-items:center;justify-content:center;gap:.8rem;flex-wrap:wrap;margin:1.4rem auto 0}
.promo-codigo code{font-family:var(--sans);font-size:1.2rem;font-weight:600;letter-spacing:.14em;background:var(--blanco);
  border:1px dashed var(--linea);border-radius:var(--radio-chico);padding:.75rem 1.1rem;color:var(--tinta)}
.boton-copiar{background:none;border:0;cursor:pointer;min-height:44px;font-size:.88rem;font-weight:600;
  text-decoration:underline;text-underline-offset:.2em}

/* =================================================================
   SELECTOR DE IDIOMA (solo sale con mas de un idioma encendido)
   ================================================================= */
.selector-idioma{position:relative}
.selector-idioma summary{list-style:none;cursor:pointer;display:flex;align-items:center;min-height:44px;padding:0 .4rem;
  font-size:.78rem;font-weight:600;letter-spacing:.12em;user-select:none}
.selector-idioma summary::-webkit-details-marker{display:none}
.selector-idioma summary::after{content:"";display:inline-block;width:5px;height:5px;margin-left:.45rem;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.lista-idiomas{position:absolute;top:calc(100% + .4rem);right:-.5rem;z-index:40;display:flex;flex-direction:column;min-width:10rem;
  padding:.4rem 0;background:var(--blanco);border-radius:var(--radio-chico);box-shadow:var(--sombra-1);color:var(--texto)}
.lista-idiomas a{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 1rem;font-size:.78rem;font-weight:600;letter-spacing:.12em}
.lista-idiomas a::after{content:attr(title);letter-spacing:.01em;font-weight:400;color:var(--texto-suave)}
.lista-idiomas a:hover{background:var(--marfil)}
.lista-idiomas a[aria-current="true"]{color:var(--tinta-3)}
.idiomas-cajon,.idiomas-pie{display:flex;gap:1.2rem}
.idiomas-cajon a,.idiomas-pie a{font-size:.78rem;font-weight:600;letter-spacing:.12em;opacity:.65}
.idiomas-cajon a[aria-current="true"],.idiomas-pie a[aria-current="true"]{opacity:1;text-decoration:underline;text-underline-offset:.3em}

/* =================================================================
   SITIO PARA EL DEDO
   En pantalla tactil, los enlaces que son ACCIONES sueltas necesitan alto
   suficiente para acertarles sin ampliar. Los de dentro de un parrafo se
   quedan como estan: ahi manda la lectura.
   ================================================================= */
@media (max-width:820px),(pointer:coarse){
  .bolsa-datos a,.bolsa-precio .enlace,.linea-precio .enlace,.linea-nombre,.enlace-suave,.enlace-flecha,
  .volver-bolsa,.categorias a,.antetitulo a,.valoracion-linea a{min-height:44px}
  .bolsa-datos a,.linea-nombre{display:inline-flex;align-items:center}
  button.enlace{min-height:40px}
}

/* =================================================================
   MENOS MOVIMIENTO
   Si el telefono pide menos movimiento: nada de acercamientos, fundidos
   largos ni cosas que suben. Todo aparece ya en su sitio.
   ================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js .revelar{opacity:1;transform:none}
}

/* ===================================================================
   LEGADO: CURSOS ONLINE Y AULA
   Esta plataforma viene de una escuela con cursos online. La agencia no
   los usa, pero las rutas (/cursos, /curso/..., /aula) siguen existiendo:
   se dejan sus estilos para que, si alguien entra, no se vea roto. Usan
   los nombres viejos (--dorado, --plata...), que arriba apuntan a la
   paleta nueva. No hace falta tocar nada de aqui para la agencia.
   =================================================================== */
:root {
  --aula-papel: var(--humo);
  --aula-tinta: var(--tinta);
  --aula-suave: var(--cacao-suave);
  --aula-linea: var(--plata-claro);
  --aula-verde: var(--dorado);
  --aula-cobre: var(--dorado-tinta);
}

/* --- Pagina de venta --- */
.curso-portada { background: var(--aula-papel); color: var(--aula-tinta); padding: 3rem 0; }
.curso-rejilla { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 2.5rem; align-items: center; }
.curso-etiqueta { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--aula-cobre); margin: 0 0 .6rem; }
.curso-portada h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.08; margin: 0 0 .8rem; }
.curso-bajada { font-size: 1.1rem; color: var(--aula-suave); margin: 0 0 1.2rem; }
.curso-datos { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .35rem; }
.curso-datos li { padding-left: 1.4rem; position: relative; color: var(--aula-suave); }
.curso-datos li::before { content: "✓"; position: absolute; left: 0; color: var(--aula-verde); font-weight: 700; }
.curso-datos strong { color: var(--aula-tinta); }
.curso-precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.curso-precio strong { font-size: 2rem; }
.curso-antes { text-decoration: line-through; color: var(--aula-suave); }
.curso-nota { font-size: .9rem; color: var(--aula-suave); margin: .4rem 0 0; }
.curso-boton { display: inline-block; background: var(--aula-verde); color: #fff; border: 0; border-radius: 8px;
  padding: .9rem 1.8rem; font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer; }
.curso-boton:hover { filter: brightness(1.08); }
.curso-media video, .curso-media img { width: 100%; border-radius: 12px; display: block; background: #000; }

.curso-seccion { padding: 2.75rem 0; border-top: 1px solid var(--aula-linea); }
.curso-seccion h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 1rem; }
.curso-lista-check { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem 1.5rem; }
.curso-lista-check li { padding-left: 1.5rem; position: relative; color: var(--aula-suave); }
.curso-lista-check li::before { content: "✓"; position: absolute; left: 0; color: var(--aula-verde); font-weight: 700; }
.curso-prosa p { max-width: 42rem; color: var(--aula-suave); }

.curso-modulo { border: 1px solid var(--aula-linea); border-radius: 10px; background: #fff; margin-bottom: .7rem; }
.curso-modulo summary { cursor: pointer; padding: .9rem 1.1rem; font-weight: 700; display: flex; align-items: center; gap: .7rem; }
.curso-num { color: var(--aula-cobre); font-variant-numeric: tabular-nums; }
.curso-cuantas { margin-left: auto; font-weight: 400; font-size: .85rem; color: var(--aula-suave); }
.curso-modulo ol { list-style: none; margin: 0; padding: 0 1.1rem 1rem; }
.curso-modulo li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-top: 1px solid var(--aula-linea); }
.curso-min { color: var(--aula-suave); font-size: .85rem; white-space: nowrap; }
.curso-min em { color: var(--aula-verde); font-style: normal; font-weight: 600; }

.curso-cierre { background: var(--aula-tinta); color: #E9EFEA; padding: 3rem 0; text-align: center; }
.curso-cierre h2 { margin: 0 0 1rem; }
.curso-cierre .curso-precio { justify-content: center; }
.curso-cierre .curso-nota, .curso-cierre .curso-antes { color: #AFC0B7; }
.curso-cierre .curso-nota a { color: #fff; }

.curso-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.4rem; margin-top: 1.4rem; }
.curso-tarjeta { background: #fff; border: 1px solid var(--aula-linea); border-radius: 10px; overflow: hidden; padding-bottom: 1rem; }
.curso-tarjeta img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.curso-tarjeta h2 { font-size: 1.15rem; margin: .8rem 1rem .3rem; }
.curso-tarjeta p { margin: 0 1rem .3rem; color: var(--aula-suave); font-size: .92rem; }
.curso-precio-mini { font-weight: 700; color: var(--aula-tinta) !important; }

/* --- Zona del alumno --- */
.aula { max-width: 62rem; margin: 0 auto; padding: 2rem 1.1rem 4rem; }
.aula-entrar { max-width: 26rem; margin: 0 auto; padding: 3rem 1.1rem 4rem; }
.aula-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.aula-migas { font-size: .88rem; color: var(--aula-suave); margin: 0 0 .6rem; }
.aula-form { display: grid; gap: .4rem; margin-top: 1rem; }
.aula-form label { font-weight: 600; margin-top: .6rem; }
.aula-form input { padding: .75rem; border: 1px solid var(--aula-linea); border-radius: 8px; font: inherit; }
.aula-form button, .aula-boton { margin-top: 1rem; display: inline-block; background: var(--aula-verde); color: #fff;
  border: 0; border-radius: 8px; padding: .8rem 1.4rem; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; text-align: center; }
.aula-salir { background: transparent; border: 1px solid var(--aula-linea); color: var(--aula-suave); border-radius: 8px; padding: .5rem .9rem; font: inherit; cursor: pointer; }
.aula-error { background: #FBE9E7; color: #8C2F1D; padding: .7rem .9rem; border-radius: 8px; }
.aula-ok { background: #E7F0E3; color: var(--aula-verde); padding: .7rem .9rem; border-radius: 8px; }
.aula-nota { color: var(--aula-suave); font-size: .92rem; }
.aula-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.2rem; margin-top: 1.4rem; }
.aula-tarjeta { background: #fff; border: 1px solid var(--aula-linea); border-radius: 10px; padding: 1.1rem; }
.aula-tarjeta h2 { font-size: 1.15rem; margin: 0 0 .3rem; }
.aula-tarjeta h2 a { text-decoration: none; color: inherit; }
.aula-barra { height: 8px; border-radius: 99px; background: var(--aula-linea); overflow: hidden; margin: .6rem 0 .3rem; }
.aula-barra span { display: block; height: 100%; background: var(--aula-verde); }
.aula-modulo { margin-top: 1.6rem; }
.aula-modulo h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
.aula-clases { list-style: none; padding: 0; margin: 0; border: 1px solid var(--aula-linea); border-radius: 10px; background: #fff; }
.aula-clases li + li { border-top: 1px solid var(--aula-linea); }
.aula-clases a { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; text-decoration: none; color: inherit; }
.aula-clases li.vista a { color: var(--aula-suave); }
.aula-check { color: var(--aula-verde); font-weight: 700; }
.aula-min { margin-left: auto; font-size: .85rem; color: var(--aula-suave); }
.aula-video video { width: 100%; border-radius: 12px; background: #000; display: block; }
.aula-visto { margin: .9rem 0; }
.aula-visto button { background: #fff; border: 1px solid var(--aula-verde); color: var(--aula-verde); border-radius: 8px; padding: .6rem 1.1rem; font: inherit; font-weight: 600; cursor: pointer; }
.aula-texto { color: var(--aula-suave); }
.aula-pasos { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--aula-linea); }
.aula-pasos a { color: var(--aula-verde); text-decoration: none; font-weight: 600; }

@media (max-width: 760px) {
  .curso-rejilla { grid-template-columns: 1fr; }
  .curso-lista-check { grid-template-columns: 1fr; }
}

/* --- Ficha de un curso: los datos ordenados, no un ladrillo de texto --- */
.ficha-curso{display:grid;gap:1.6rem}
.ficha-curso-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1px;
  margin:0;background:var(--linea);border:1px solid var(--linea);border-radius:10px;overflow:hidden}
.ficha-curso-datos div{background:var(--blanco);padding:.85rem 1rem}
.ficha-curso-datos dt{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cacao-suave)}
.ficha-curso-datos dd{margin:.25rem 0 0;font-weight:600;color:var(--cacao)}
.ficha-curso-seccion h3{font-family:var(--serif);font-weight:600;font-size:1.25rem;margin:0 0 .6rem;
  padding-bottom:.4rem;border-bottom:2px solid var(--verde);display:inline-block}
.ficha-curso-seccion ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.4rem 1.6rem}
.ficha-curso-seccion li{padding-left:1.4rem;position:relative;color:var(--cacao-suave)}
.ficha-curso-seccion li::before{content:"";position:absolute;left:.25rem;top:.62em;
  width:.42rem;height:.42rem;border-radius:50%;background:var(--cobre)}
.ficha-curso-texto p{color:var(--cacao-suave)}
@media(max-width:640px){.ficha-curso-seccion ul{grid-template-columns:1fr}}

/* --- La garantia del curso: un recuadro que se ve de lejos --- */
.curso-garantia-seccion{background:var(--papel)}
/* La garantia: un panel centrado, con el sello arriba, la promesa en
   una frase y los detalles en tres columnas. Antes era un parrafo largo
   dentro de una caja, sin jerarquia, y el numero grande parecia el paso
   siguiente de la lista de arriba. */
.curso-garantia{background:var(--blanco);border:1px solid var(--dorado);border-radius:16px;
  padding:clamp(1.8rem,4vw,3rem);text-align:center;max-width:56rem;margin-inline:auto}
.curso-garantia-sello{display:grid;place-items:center;width:3.2rem;height:3.2rem;
  margin:0 auto 1rem;border-radius:50%;background:var(--dorado);color:var(--blanco)}
.curso-garantia-sello svg{width:1.7rem;height:1.7rem}
.curso-garantia h2{margin:0 0 .6rem;font-size:clamp(1.4rem,2.6vw,1.9rem)}
.curso-garantia-lead{color:var(--aula-suave);max-width:42rem;margin:0 auto 1.8rem;font-size:1.02rem}

.curso-garantia-puntos{list-style:none;margin:0;padding:1.6rem 0 0;border-top:1px solid var(--linea);
  display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));text-align:left}
.curso-garantia-puntos strong{display:block;font-family:var(--sans);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dorado-tinta);margin-bottom:.35rem}
.curso-garantia-puntos span{color:var(--aula-suave);font-size:.92rem;line-height:1.5}
.curso-garantia-mas{margin:1.6rem 0 0;font-size:.9rem}
.curso-garantia-mas a{border-bottom:1px solid var(--linea)}
.curso-garantia-mas a:hover{color:var(--cobre);border-bottom-color:var(--cobre)}
@media(max-width:560px){.curso-garantia-puntos{text-align:center}}

/* --- Ajustes de la marca en los cursos (sin tocar los .boton de la web) --- */
.curso-etiqueta,.aula .kick{color:var(--dorado-tinta)}
.curso-precio strong{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.curso-boton,.aula-form button,.aula-boton{background:var(--dorado);border-color:var(--dorado)}
.curso-boton:hover,.aula-boton:hover{background:var(--tinta-3)}
.curso-datos li::before,.curso-lista-check li::before,.aula-check{color:var(--dorado-tinta)}
.curso-num,.ficha-curso-seccion li::before{color:var(--dorado)}
.ficha-curso-seccion h3{border-bottom-color:var(--sol)}
.curso-cierre{background:var(--tinta)}
.curso-cierre .curso-precio strong{color:var(--sol)}
.aula-barra span{background:var(--dorado)}
.curso-modulo summary{font-family:var(--sans);font-weight:600}

/* --- El adelanto de la landing: solo reproducir y pausar --- */
.curso-adelanto{position:relative;border-radius:12px;overflow:hidden;background:#000}
.curso-adelanto video{display:block;width:100%;cursor:pointer}
.curso-play{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);
  width:3.4rem;height:3.4rem;border-radius:50%;border:0;cursor:pointer;
  background:rgba(28,29,31,.82);color:#fff;font-size:1.1rem;display:grid;place-items:center;
  box-shadow:0 2px 12px rgba(0,0,0,.35);transition:opacity .2s}
.curso-play.sonando{opacity:.35}
.curso-play.sonando:hover{opacity:1}

/* --- Acceso al aula desde la cabecera --- */
.enlace-aula{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.texto-aula{font-size:.82rem;font-weight:600;letter-spacing:.02em}
@media(max-width:860px){.texto-aula{display:none}}

/* --- El video de la clase, con la firma del alumno encima --- */
.aula-firma{position:absolute;top:6%;left:6%;pointer-events:none;user-select:none;
  font-family:var(--sans);font-size:.78rem;letter-spacing:.04em;color:rgba(255,255,255,.34);
  text-shadow:0 1px 3px rgba(0,0,0,.6);transition:all .8s ease;max-width:70%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
@media print{.aula-marco-video{display:none}}

/* --- Tarjeta del curso en "Mis cursos" --- */
.aula-tarjeta{overflow:hidden;padding:0}
.aula-tarjeta-foto{display:block}
.aula-tarjeta-foto img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.aula-tarjeta-texto{padding:1.1rem}
.aula-enlace-flojo{display:inline-block;margin-top:.7rem;margin-left:.9rem;
  font-size:.9rem;color:var(--plata);text-decoration:underline}
.aula-ayuda{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--linea);
  color:var(--plata);font-size:.92rem}
.pie-ayuda{color:var(--plata);font-size:.9rem}
/* --- Piezas de la pagina de venta --- */
.curso-cuenta-atras{margin:.2rem 0 1rem;padding:.6rem .9rem;border-radius:8px;
  background:var(--humo);border-left:3px solid var(--dorado);font-size:.92rem;color:var(--cacao-suave)}
.curso-cuenta-atras strong{color:var(--tinta)}

.curso-bonos{background:var(--humo)}

.curso-instructor{display:grid;grid-template-columns:minmax(0,14rem) 1fr;gap:2rem;align-items:center}
.curso-instructor img{width:100%;border-radius:12px;display:block;aspect-ratio:4/5;object-fit:cover}
.curso-instructor h2{margin:.2rem 0 .6rem}

.curso-testimonios{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}
.curso-testimonio{margin:0;padding:1.2rem;border:1px solid var(--linea);border-radius:12px;background:var(--blanco)}
.curso-testimonio blockquote{margin:0;color:var(--cacao)}
.curso-testimonio blockquote::before{content:"\201C";color:var(--dorado);font-size:1.6rem;line-height:0;margin-right:.15rem}
.curso-testimonio figcaption{margin-top:.7rem;font-size:.85rem;font-weight:600;color:var(--plata)}

/* (.curso-preguntas / .curso-pregunta: ahora son el acordeon comun de
   arriba, el mismo de "Preguntas frecuentes"; las usa la ficha.) */

/* La barra de compra que sigue al bajar */
.curso-barra-fija{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--blanco);
  border-top:1px solid var(--linea);box-shadow:0 -4px 20px rgba(0,0,0,.08);
  padding:.7rem 0 calc(.7rem + env(safe-area-inset-bottom,0px))}
.curso-barra-dentro{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.curso-barra-precio strong{font-family:var(--serif);font-weight:800;font-size:1.3rem}
.curso-barra-precio .curso-antes{font-size:.9rem;margin-left:.4rem}
.curso-barra-nombre{display:block;font-size:.82rem;color:var(--plata);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22rem}
.curso-barra-fija .curso-boton{padding:.7rem 1.4rem;white-space:nowrap}
@media(max-width:700px){
  .curso-instructor{grid-template-columns:1fr}
  .curso-instructor img{max-width:12rem}
  .curso-barra-nombre{display:none}
}

@media (max-width: 720px) {
  .curso-portada{padding:2rem 0 2.4rem}
  .curso-rejilla{gap:1.6rem}
  .curso-texto{text-align:center}
  /* Los ✓ se leen mejor alineados entre si: la caja va centrada,
     pero cada linea empieza en el mismo sitio. */
  .curso-datos{justify-items:start;text-align:left;display:inline-grid}
  .curso-media .curso-nota{text-align:center}
  .curso-precio{justify-content:center}
  .curso-comprar{display:flex;justify-content:center}
  .curso-boton{width:100%;max-width:22rem}
  .curso-cuenta-atras{text-align:center}
  .curso-media{order:-1}

  /* Secciones: titulos centrados y listas a una columna */
  .curso-seccion h2,.curso-cierre h2{text-align:center}
  .curso-seccion .curso-nota{text-align:center}
  .curso-testimonios,.curso-tarjetas{grid-template-columns:1fr}
  .curso-instructor{text-align:center;justify-items:center}
  .curso-instructor img{max-width:10rem}

  /* La barra de compra: el boton a lo ancho y el precio encima */
  .curso-barra-dentro{flex-direction:column;align-items:stretch;gap:.5rem;text-align:center}
  .curso-barra-fija form,.curso-barra-fija .curso-boton{width:100%}
  .curso-barra-precio strong{font-size:1.15rem}

  /* Aula: tarjetas y clases a lo ancho */
  .aula{padding:1.4rem 1.1rem 3rem}
  .aula-cabeza{flex-direction:column;gap:.6rem}
  .aula-rejilla{grid-template-columns:1fr}
  .aula-boton{width:100%}
  .aula-enlace-flojo{display:block;margin-left:0;margin-top:.9rem;text-align:center}
  .aula-pasos{flex-direction:column;gap:.7rem;text-align:center}

}
@media (max-width: 420px) {
  .ficha-curso-datos{grid-template-columns:1fr}
  .curso-portada h1{font-size:1.85rem}
  .curso-seccion{padding:2rem 0}
}
/* --- "Como funciona": los tres pasos de la compra ---
   Estaban escritos pero sin estilo, asi que salian como una lista
   numerada del navegador, con el numero repetido dos veces. */
.curso-pasos{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.curso-pasos li{display:flex;gap:.9rem;align-items:flex-start;background:var(--blanco);
  border:1px solid var(--aula-linea);border-radius:12px;padding:1.1rem 1.2rem}
.curso-paso-n{flex:none;width:2rem;height:2rem;border-radius:50%;background:var(--dorado);
  color:#fff;display:grid;place-items:center;font-family:var(--sans);font-weight:700;font-size:.9rem}
.curso-pasos strong{display:block;font-family:var(--serif);font-weight:700;font-size:1.05rem;margin-bottom:.15rem}
.curso-pasos p{margin:0;color:var(--aula-suave);font-size:.92rem}
@media(max-width:720px){
  .curso-pasos{grid-template-columns:1fr}
  .curso-pasos li{text-align:left}
}

/* ===================================================================
   PIEZAS DE LA PAGINA DE VENTA QUE SE ESCRIBIERON SIN ESTILO
   Salian con la pinta que el navegador les da por defecto: listas con
   bolita negra, bloques pegados y numeros repetidos.
   =================================================================== */

/* "Es para ti si… / No es para ti si…": dos fichas, lado a lado */
.curso-dos-columnas{display:grid;gap:1.2rem;grid-template-columns:1fr 1fr;align-items:start}
.curso-si,.curso-no{background:var(--blanco);border:1px solid var(--aula-linea);
  border-radius:12px;padding:1.3rem 1.5rem}
.curso-si h2,.curso-no h2{font-size:1.25rem;margin:0 0 .8rem}
.curso-si .curso-lista-check{grid-template-columns:1fr}
.curso-lista-cruz{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.curso-lista-cruz li{padding-left:1.5rem;position:relative;color:var(--aula-suave)}
.curso-lista-cruz li::before{content:"✕";position:absolute;left:0;color:var(--plata);font-weight:700}
@media(max-width:760px){.curso-dos-columnas{grid-template-columns:1fr}}

/* La linea de "pago seguro" bajo el boton: es una nota, no un titular */
.curso-pagos{font-size:.88rem;color:var(--aula-suave);margin:.7rem 0 0}
.curso-pagos strong{color:var(--aula-tinta)}

/* El triangulo de reproducir, centrado dentro de su boton */
.curso-play-icono{display:block;line-height:1;font-size:1.1rem}
/* ===================================================================
   PAGINA DE CURSOS ONLINE
   Antes era una tarjeta sola estirada a todo lo ancho, con la caratula
   gigante y el precio perdido en una esquina. Ahora: una cabecera y una
   ficha ancha por curso, con la foto a un lado y lo que hace falta para
   decidir al otro.
   =================================================================== */
.cursos-cabeza{background:var(--humo);padding:clamp(3rem,7vw,5rem) 0 clamp(2.5rem,6vw,4rem);
  border-bottom:1px solid var(--linea)}
.cursos-cabeza h1{font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.06;margin:0 0 .7rem;max-width:22ch}
.cursos-cabeza p{color:var(--cacao-suave);max-width:46ch;margin:0}
.cursos-lista{padding-top:clamp(2.5rem,6vw,4rem)}

.curso-ficha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:center;
  border:1px solid var(--linea);border-radius:16px;overflow:hidden;background:var(--blanco)}
.curso-ficha + .curso-ficha{margin-top:2rem}
.curso-ficha.al-reves .curso-ficha-foto{order:2}

.curso-ficha-foto{display:block;align-self:stretch;background:var(--humo);min-height:16rem}
.curso-ficha-foto img{width:100%;height:100%;object-fit:cover;display:block}

.curso-ficha-datos{padding:clamp(1.4rem,3vw,2.4rem) clamp(1.4rem,3vw,2.4rem) clamp(1.4rem,3vw,2.4rem) 0}
.curso-ficha.al-reves .curso-ficha-datos{padding-left:clamp(1.4rem,3vw,2.4rem);padding-right:0}
.curso-ficha-datos h2{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.1;margin:0 0 .6rem}
.curso-ficha-datos h2 a:hover{color:var(--cobre)}
.curso-ficha-linea{color:var(--cacao-suave);margin:0 0 1.2rem}

.curso-ficha-datitos{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;
  margin:0 0 1.3rem;padding:1rem 0;border-block:1px solid var(--linea)}
.curso-ficha-datitos li{display:grid;gap:.1rem}
.curso-ficha-datitos strong{font-family:var(--serif);font-weight:700;font-size:1.05rem;line-height:1.1}
.curso-ficha-datitos span{font-size:.78rem;color:var(--plata);letter-spacing:.02em}

.curso-ficha-precio{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem;margin:0 0 1.4rem}
.curso-ficha-precio strong{font-size:1.9rem;font-weight:600;letter-spacing:-.01em}
.curso-ficha-precio s{color:var(--plata)}
.curso-ficha-precio em{font-style:normal;font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dorado-tinta)}

@media (max-width:820px){
  .curso-ficha{grid-template-columns:1fr;text-align:center}
  .curso-ficha .curso-ficha-foto,.curso-ficha.al-reves .curso-ficha-foto{order:1;min-height:0;aspect-ratio:16/10}
  .curso-ficha-datos,.curso-ficha.al-reves .curso-ficha-datos{order:2;padding:1.4rem clamp(1.2rem,4vw,2rem) 2rem}
  .curso-ficha-linea{margin-inline:auto}
  .curso-ficha-datitos{justify-content:center;gap:.6rem 1.4rem}
  .curso-ficha-precio{justify-content:center}
}
/* ===================================================================
   AULA: NAVEGACION Y CUENTA DEL ALUMNO
   =================================================================== */
.aula-nav{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.aula-nav a{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--aula-suave);padding-bottom:.2rem;border-bottom:1px solid transparent}
.aula-nav a:hover{color:var(--aula-tinta)}
.aula-nav a.activo{color:var(--aula-tinta);border-bottom-color:var(--dorado)}
.aula-nav form{margin:0}

.aula-fichas{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));margin-top:1.6rem}
.aula-ficha{background:var(--blanco);border:1px solid var(--aula-linea);border-radius:14px;
  padding:clamp(1.3rem,3vw,1.9rem)}
.aula-ficha-ancha{margin-top:1.4rem}
.aula-ficha h2{font-size:1.2rem;margin:0 0 1.1rem}
.aula-ficha form{margin:0}

.aula-campo{display:block;margin-bottom:1rem}
.aula-campo span{display:block;font-family:var(--sans);font-size:.68rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--aula-suave);margin-bottom:.35rem}
.aula-campo input{width:100%;font:inherit;color:var(--aula-tinta);background:var(--blanco);
  border:1px solid var(--aula-linea);border-radius:8px;padding:.7rem .85rem}
.aula-campo input:focus{outline:none;border-color:var(--dorado)}

.aula-campo-fijo{margin:0 0 1.2rem;display:grid;gap:.2rem}
.aula-campo-fijo span{font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--aula-suave)}
.aula-campo-fijo strong{font-weight:600;overflow-wrap:anywhere}
.aula-campo-fijo small{color:var(--aula-suave);font-size:.84rem;line-height:1.45}

.aula-aviso{border-radius:8px;padding:.7rem .9rem;margin:0 0 1rem;font-size:.92rem}
.aula-aviso.bien{background:rgba(184,145,47,.1);color:var(--dorado-tinta)}
.aula-aviso.mal{background:rgba(180,60,50,.08);color:#9b3a32}

.aula-lista-cursos{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.aula-lista-cursos li{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-bottom:.7rem;border-bottom:1px solid var(--aula-linea)}
.aula-lista-cursos li:last-child{border-bottom:0;padding-bottom:0}
.aula-lista-cursos a{font-weight:600}
.aula-lista-cursos a:hover{color:var(--dorado-tinta)}
.aula-lista-cursos span{color:var(--aula-suave);font-size:.9rem}

@media(max-width:720px){
  .aula-nav{gap:1rem;justify-content:center}
  .aula-fichas{grid-template-columns:1fr}
}

/* Con un solo curso la tarjeta se estiraba a todo lo ancho y la carátula
   quedaba enorme. En pantalla ancha se pone en horizontal: la portada a
   un lado y el avance al otro. */
@media (min-width:760px){
  .aula-tarjeta{display:grid;grid-template-columns:minmax(0,18rem) minmax(0,1fr);align-items:center}
  .aula-tarjeta-foto{align-self:stretch}
  .aula-tarjeta-foto img{height:100%;aspect-ratio:auto;min-height:11rem}
  .aula-tarjeta-texto{padding:1.4rem 1.6rem}
  .aula-rejilla{grid-template-columns:1fr;gap:1.2rem;max-width:56rem}
}
/* --- Inscribirse sin salir de la pagina del curso ----------------------
   El boton de "Quiero inscribirme" ya no manda a la bolsa: abre este
   formulario encima de la pagina y de ahi se salta derecho a pagar. */

/* Los botones de inscribirse son enlaces, no botones de formulario. */
a.curso-boton{text-decoration:none;text-align:center}

/* Mientras el formulario esta abierto, la pagina de detras no se mueve. */
html.con-inscripcion{overflow:hidden}

.curso-inscribir{position:fixed;inset:0;z-index:60;display:flex;
  align-items:flex-start;justify-content:center;padding:1.25rem;overflow-y:auto;
  padding-top:max(1.25rem, env(safe-area-inset-top, 0px));
  padding-bottom:max(1.25rem, env(safe-area-inset-bottom, 0px))}
.curso-inscribir-tapa{position:fixed;inset:0;background:rgba(28,29,31,.62);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.curso-inscribir-caja{position:relative;z-index:1;width:100%;max-width:30rem;
  margin:auto;background:var(--blanco);border-radius:14px;padding:1.9rem 1.6rem 1.6rem;
  box-shadow:0 24px 60px rgba(0,0,0,.3)}
.curso-inscribir-caja h2{font-family:var(--serif);font-size:1.5rem;margin:0 0 .5rem;
  letter-spacing:-.01em}
.curso-inscribir-x{position:absolute;top:.5rem;right:.6rem;width:2.4rem;height:2.4rem;
  display:flex;align-items:center;justify-content:center;background:none;border:0;
  font-size:1.6rem;line-height:1;color:var(--plata);cursor:pointer;border-radius:8px}
.curso-inscribir-x:hover{color:var(--tinta);background:var(--humo)}

.curso-inscribir-que{margin:0 0 1.2rem;font-size:.95rem;color:var(--cacao-suave);
  padding-bottom:1rem;border-bottom:1px solid var(--linea)}
.curso-inscribir-que strong{color:var(--tinta);font-family:var(--serif);font-size:1.15rem}
.curso-inscribir-que span{display:block;font-size:.82rem;color:var(--plata);margin-top:.15rem}

.curso-inscribir-error{margin:0 0 1rem;padding:.75rem .9rem;border-radius:10px;
  background:#FDECEC;border:1px solid #F3C9C9;color:#8C2B2B;font-size:.92rem}

.curso-campo{display:grid;gap:.3rem;margin-bottom:.85rem}
.curso-campo span{font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--plata)}
.curso-campo input{font:inherit;padding:.7rem .8rem;border:1px solid var(--linea);
  border-radius:9px;background:var(--blanco);color:var(--tinta);width:100%;
  min-height:44px;box-sizing:border-box}
.curso-campo input:focus-visible{outline:2px solid var(--dorado);outline-offset:1px;
  border-color:var(--dorado)}

.curso-inscribir-cuenta{margin:1.1rem 0;padding:1rem;background:var(--humo);
  border-radius:10px}
.curso-inscribir-cuenta-tit{margin:0 0 .4rem;font-family:var(--sans);font-size:.72rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dorado-tinta)}
.curso-inscribir-cuenta .curso-campo:last-of-type{margin-bottom:0}
.curso-inscribir-nota{margin:.5rem 0 0;font-size:.84rem;color:var(--cacao-suave);
  line-height:1.5}
.curso-inscribir-nota:first-child{margin-top:0}
/* Las dos contraseñas, una debajo de otra. En una caja de 30rem, lado a
   lado quedaban estrechas y con las etiquetas descuadradas: una larga
   ("elige tu contraseña") y otra corta ("repítela"). */
.curso-inscribir-dos{display:grid;gap:.1rem;margin-top:.7rem}

.curso-inscribir-pagar{width:100%;margin-top:.4rem}
.curso-inscribir-seguro{text-align:center}

@media (max-width:480px){
  .curso-inscribir{padding-left:.75rem;padding-right:.75rem}
  .curso-inscribir-caja{padding:1.7rem 1.1rem 1.3rem}
}

/* --- La ficha en PDF de cada clase del aula --------------------------- */
.aula-ficha-clase{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin:1.4rem 0;padding:1.1rem 1.25rem;
  background:var(--humo);border:1px solid var(--linea);border-radius:12px}
.aula-ficha-tit{margin:0 0 .25rem;font-family:var(--sans);font-size:.7rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dorado-tinta)}
.aula-ficha-nombre{margin:0;font-weight:600;color:var(--tinta);line-height:1.35}
.aula-ficha-nombre span{display:block;font-weight:400;font-size:.8rem;color:var(--plata);
  letter-spacing:.04em;margin-top:.15rem}
.aula-ficha-clase .aula-boton{white-space:nowrap;text-decoration:none}
@media (max-width:560px){
  .aula-ficha-clase{flex-direction:column;align-items:stretch}
  .aula-ficha-clase .aula-boton{text-align:center}
}

/* --- El índice del curso, menos vacío --------------------------------- */
.aula-modulo-cabeza{display:flex;align-items:flex-start;justify-content:space-between;
  gap:1rem;margin:0 0 .7rem}
.aula-modulo-n{margin:0 0 .15rem;font-family:var(--sans);font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dorado-tinta)}
.aula-modulo-cabeza h2{margin:0 0 .25rem}
.aula-modulo-cabeza .aula-nota{margin:0}
.aula-modulo-cuenta{margin:0;flex:none;font-family:var(--sans);font-size:.8rem;font-weight:600;
  color:var(--plata);background:var(--humo);border:1px solid var(--linea);
  border-radius:999px;padding:.25rem .7rem;white-space:nowrap}

/* Cada clase: título, de qué va, y si trae receta */
.aula-clases a{align-items:flex-start;gap:.8rem;padding:.95rem 1.1rem}
.aula-clases .aula-check{margin-top:.1rem;flex:none}
.aula-clase-texto{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.aula-titulo-clase{font-weight:600;line-height:1.35}
.aula-clase-resumen{font-size:.86rem;line-height:1.45;color:var(--cacao-suave)}
.aula-clases li.vista .aula-clase-resumen{color:var(--plata)}
.aula-etiqueta-pdf{align-self:flex-start;margin-top:.2rem;font-family:var(--sans);
  font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dorado-tinta);background:#F7F1DF;border:1px solid #E6D9AE;
  border-radius:5px;padding:.15rem .45rem}
.aula-clases .aula-min{margin-top:.1rem;flex:none}

@media (max-width:560px){
  .aula-modulo-cabeza{flex-direction:column;gap:.4rem}
  .aula-clases a{padding:.85rem .9rem}
}



/* --- El reproductor del aula -------------------------------------------
   Controles propios. El tamaño del video no cambia: sigue ocupando todo
   el ancho de su columna. Lo que cambia es la botonera, que antes era la
   del navegador y se veía de plantilla. */

.aula-marco-video{position:relative;border-radius:14px;overflow:hidden;background:#000;
  box-shadow:0 18px 40px rgba(0,0,0,.18);line-height:0}
.aula-marco-video video{display:block;width:100%;cursor:pointer}
.aula-marco-video:focus{outline:none}
.aula-marco-video.completa{border-radius:0;box-shadow:none;
  display:flex;align-items:center;justify-content:center;background:#000}
.aula-marco-video.completa video{max-height:100vh;width:auto;max-width:100vw}

/* Mientras /js/aula-video.js no haya cargado, mandan los controles del
   navegador y los nuestros no estorban. */
.aula-marco-video:not(.listo) .aula-controles,
.aula-marco-video:not(.listo) .aula-play-grande{display:none}

/* El botón grande del centro: solo cuando está parado */
.aula-play-grande{position:absolute;inset:0;margin:auto;width:76px;height:76px;
  display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;
  border-radius:50%;background:rgba(28,29,31,.62);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 6px 24px rgba(0,0,0,.35);transition:transform .18s, opacity .18s, background .18s}
.aula-play-grande:hover{background:rgba(28,29,31,.82);transform:scale(1.06)}
.aula-play-grande svg{width:30px;height:30px;fill:currentColor;margin-left:3px}
.aula-marco-video.sonando .aula-play-grande{opacity:0;pointer-events:none;transform:scale(.9)}

/* Los iconos de play/pausa se turnan */
.aula-ico-pausa,.aula-marco-video.sonando .aula-ico-play{display:none}
.aula-marco-video.sonando .aula-ico-pausa{display:inline-flex}
.aula-play-grande .aula-ico-pausa svg{margin-left:0}

/* La botonera de abajo */
.aula-controles{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:.5rem;padding:2.6rem .85rem .7rem;
  background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 55%, transparent 100%);
  opacity:1;transition:opacity .25s;line-height:1.2}
.aula-marco-video.quieto .aula-controles{opacity:0;pointer-events:none}
.aula-marco-video.quieto video{cursor:none}

.aula-ctrl{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;border:0;border-radius:9px;cursor:pointer;
  background:transparent;color:#fff;font:inherit;font-size:.82rem;font-weight:700;
  transition:background .15s}
.aula-ctrl:hover{background:rgba(255,255,255,.16)}
.aula-ctrl:focus-visible{outline:2px solid var(--dorado-claro);outline-offset:2px}
.aula-ctrl svg{width:21px;height:21px;fill:currentColor}
.aula-ctrl-vel{width:auto;min-width:40px;padding:0 .5rem;letter-spacing:.01em}

/* La barra de avance */
.aula-barra-tiempo{position:relative;flex:1;min-width:0;height:18px;cursor:pointer;
  display:flex;align-items:center;touch-action:none}
.aula-barra-tiempo::before{content:"";position:absolute;left:0;right:0;height:4px;
  border-radius:99px;background:rgba(255,255,255,.28);transition:height .15s}
.aula-cargado,.aula-progreso{position:absolute;left:0;height:4px;border-radius:99px;
  transition:height .15s;pointer-events:none}
.aula-cargado{background:rgba(255,255,255,.3);width:0}
.aula-progreso{background:var(--dorado-claro);width:0}
.aula-progreso::after{content:"";position:absolute;right:-6px;top:50%;width:12px;height:12px;
  border-radius:50%;background:var(--dorado-claro);transform:translateY(-50%) scale(0);
  transition:transform .15s;box-shadow:0 1px 5px rgba(0,0,0,.4)}
.aula-barra-tiempo:hover::before,
.aula-barra-tiempo:hover .aula-cargado,
.aula-barra-tiempo:hover .aula-progreso,
.aula-barra-tiempo:focus-visible::before,
.aula-barra-tiempo:focus-visible .aula-cargado,
.aula-barra-tiempo:focus-visible .aula-progreso{height:6px}
.aula-barra-tiempo:hover .aula-progreso::after,
.aula-barra-tiempo:focus-visible .aula-progreso::after{transform:translateY(-50%) scale(1)}
.aula-barra-tiempo:focus-visible{outline:none}
.aula-barra-tiempo:focus-visible::before{background:rgba(255,255,255,.5)}

.aula-reloj{flex:none;color:#fff;font-family:var(--sans);font-size:.78rem;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;opacity:.92;white-space:nowrap}

/* Volumen: la barrita sale al pasar por encima */
.aula-sonido{display:flex;align-items:center;flex:none}
.aula-ico-mudo,.aula-marco-video.callado .aula-ico-alto{display:none}
.aula-marco-video.callado .aula-ico-mudo{display:inline-flex}
.aula-volumen{width:0;opacity:0;margin:0;transition:width .2s, opacity .2s;
  accent-color:var(--dorado-claro);cursor:pointer}
.aula-sonido:hover .aula-volumen,.aula-volumen:focus-visible{width:72px;opacity:1;margin-left:.3rem}

/* La ruedita de "cargando" */
.aula-cargando{position:absolute;inset:0;margin:auto;width:42px;height:42px;
  border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;
  opacity:0;pointer-events:none}
.aula-marco-video.cargando .aula-cargando{opacity:1;animation:aula-gira .8s linear infinite}
.aula-marco-video.cargando .aula-play-grande{opacity:0}
@keyframes aula-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .aula-marco-video.cargando .aula-cargando{animation-duration:2s}
  .aula-play-grande,.aula-controles,.aula-progreso,.aula-cargado{transition:none}
}

/* En el celular caben menos cosas */
@media (max-width:560px){
  .aula-controles{gap:.25rem;padding:2.2rem .5rem .55rem}
  .aula-ctrl{width:34px;height:34px}
  .aula-sonido{display:none}
  .aula-reloj{font-size:.72rem}
  .aula-play-grande{width:62px;height:62px}
  .aula-play-grande svg{width:25px;height:25px}
}

/* --- Lo que va debajo del video, en una columna centrada --------------- */
.aula-clase-cuerpo{max-width:46rem;margin:1.4rem auto 0}
.aula-clase-cuerpo .aula-visto{margin:0 0 1.2rem}
.aula-clase-cuerpo .aula-texto p{max-width:none}
.aula-clase-cuerpo .aula-texto{font-size:1.02rem;line-height:1.7;color:var(--cacao-suave)}
.aula-clase-cuerpo .aula-texto p:last-child{margin-bottom:0}
.aula-clase .aula-migas,.aula-clase h1{max-width:46rem;margin-inline:auto}
.aula-clase h1{margin-bottom:1rem}


/* En el celular el formulario de inscripcion no cabe entero, asi que el
   boton de pagar se queda pegado abajo: no hay que bajar a buscarlo. */
@media (max-height: 1000px) {
  .curso-inscribir-pie {
    /* bottom negativo: la caja tiene relleno abajo y, sin esto, a media
       altura quedaba una franja de ~20 px por donde asomaba el formulario. */
    position: sticky; bottom: calc(-1 * max(1.25rem, env(safe-area-inset-bottom, 0px))); z-index: 2;
    margin-top: .6rem; padding-top: .9rem;
    background: var(--blanco);
    /* El fondo baja hasta el borde de la caja: si no, por debajo del pie
       asoma el campo que queda detras. */
    margin-bottom: -1.6rem; padding-bottom: 1.6rem;
  }
  /* Un degradado por encima, para que el texto no se corte de golpe */
  .curso-inscribir-pie::before {
    content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px;
    background: linear-gradient(to top, var(--blanco), rgba(255,255,255,0));
    pointer-events: none;
  }
  .curso-inscribir-pagar { margin-top: 0 }
}
/* El pie del adelanto del curso: antes era una nota gris y pequeña que
   nadie leía. Es una invitación a darle play, así que se ve. */
.curso-adelanto-pie{display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin:.85rem 0 0;font-family:var(--sans);font-size:.95rem;font-weight:600;
  color:var(--tinta);letter-spacing:.01em}
.curso-adelanto-pie::before{content:"";width:9px;height:9px;flex:none;border-radius:50%;
  background:var(--dorado);box-shadow:0 0 0 0 rgba(184,145,47,.55);
  animation:pulso-adelanto 2.4s ease-out infinite}
@keyframes pulso-adelanto{
  70%{box-shadow:0 0 0 9px rgba(184,145,47,0)}
  100%{box-shadow:0 0 0 0 rgba(184,145,47,0)}
}
@media (prefers-reduced-motion:reduce){.curso-adelanto-pie::before{animation:none}}

/* --- La landing del curso (11-10-2026, pedido de Adrian) ---
   El boton del cierre: dorado sobre el fondo oscuro. Antes heredaba el
   negro de los demas botones y sobre el cierre (tambien negro) casi no se
   veia. Late suave y le pasa un brillo; quieto si el telefono pide menos
   movimiento. */
.curso-cierre .curso-comprar{margin-top:1.6rem}
.curso-cierre .curso-boton{position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--dorado-claro),var(--dorado));color:var(--tinta);
  font-size:1.15rem;font-weight:800;letter-spacing:.02em;padding:1.15rem 2.6rem;border-radius:10px;
  animation:latido-dorado 2.4s ease-out infinite}
.curso-cierre .curso-boton::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);
  transform:translateX(-100%);animation:brillo-dorado 3.2s ease-in-out infinite}
.curso-cierre .curso-boton:hover{background:var(--dorado-claro);color:var(--tinta);filter:none}
@keyframes latido-dorado{0%{box-shadow:0 0 0 0 rgba(217,182,90,.6)}
  70%{box-shadow:0 0 0 16px rgba(217,182,90,0)}100%{box-shadow:0 0 0 0 rgba(217,182,90,0)}}
@keyframes brillo-dorado{0%,55%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){
  .curso-cierre .curso-boton,.curso-cierre .curso-boton::after{animation:none}}
@media(max-width:560px){.curso-cierre .curso-boton{width:100%;max-width:24rem}}
/* Formulario del curso: como se entra despues de pagar (13-10-2026). Va
   resaltada porque casi nadie vuelve a la web despues de pagar en el banco. */
.curso-inscribir-acceso{margin:.8rem 0 0;padding:.75rem .9rem;border-left:3px solid var(--dorado);
  background:var(--humo);border-radius:6px;font-size:.88rem;line-height:1.45;color:var(--tinta)}
.curso-inscribir-acceso strong{white-space:nowrap}

/* Pagar con tarjeta dentro de la web (14-10-2026, src/tarjeta.js) */
.curso-pago{border:0;margin:1.2rem 0 0;padding:1.1rem;background:var(--humo);border-radius:12px}
.curso-pago legend{padding:0;margin-bottom:.6rem}
.curso-pago-opcion{display:flex;gap:.7rem;align-items:flex-start;padding:.8rem .9rem;margin-top:.5rem;
  background:#fff;border:1.5px solid var(--plata-claro);border-radius:10px;cursor:pointer}
.curso-pago-opcion:has(input:checked){border-color:var(--dorado)}
.curso-pago-opcion input{margin-top:.25rem;accent-color:var(--tinta)}
.curso-pago-opcion strong{display:block;font-size:.95rem}
.curso-pago-opcion small{display:block;color:var(--cacao-suave);font-size:.82rem}
.curso-tarjeta{margin-top:.9rem;background:#fff;border:1px solid var(--plata-claro);border-radius:10px;padding:1rem}
.curso-tarjeta select{width:100%;padding:.75rem;border:1px solid var(--plata-claro);border-radius:8px;font:inherit;background:#fff}
.curso-pago-casilla{display:flex;gap:.55rem;align-items:flex-start;margin-top:.7rem;font-size:.86rem;line-height:1.4}
.curso-pago-casilla input{margin-top:.15rem;width:1.1rem;height:1.1rem;flex:none;accent-color:var(--tinta)}
.curso-pago-casilla a{color:var(--dorado-tinta);text-decoration:underline}
[data-fallo] button{display:block;width:100%;margin-top:.6rem;padding:.75rem;border-radius:8px;font:inherit;font-weight:700;cursor:pointer}
.curso-pago-otra{background:#fff;border:1.5px solid var(--tinta);color:var(--tinta)}
.curso-pago-otros{background:var(--tinta);border:0;color:#fff}
.curso-pagando{position:fixed;inset:0;z-index:80;background:rgba(28,29,31,.72);display:grid;place-items:center;padding:1rem}
.curso-pagando[hidden]{display:none}
.curso-pagando-caja{background:#fff;border-radius:14px;padding:1.4rem;width:min(100%,30rem);max-height:94vh;overflow:auto;text-align:center}
.curso-pagando-estado{font-weight:700;margin:0}
.curso-pagando-estado::before{content:"";display:block;width:2rem;height:2rem;margin:0 auto .8rem;border:3px solid var(--plata-claro);
  border-top-color:var(--dorado);border-radius:50%;animation:girar .9s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.curso-pagando-titulo{margin:1rem 0 .5rem;font-size:.9rem;color:var(--cacao-suave)}
.curso-pagando-banco iframe{width:100%;height:min(60vh,26rem);border:1px solid var(--plata-claro);border-radius:8px;background:#fff}
.curso-pagando-marca{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:.6rem 0 0;font-size:.8rem;color:var(--cacao-suave)}
.curso-pagando-tarda{margin-top:1rem;font-size:.88rem;color:var(--cacao-suave)}
.curso-pagando-tarda button{margin-top:.5rem;padding:.7rem 1.2rem;border-radius:8px;border:1.5px solid var(--tinta);
  background:#fff;color:var(--tinta);font:inherit;font-weight:700;cursor:pointer}

/* Fuera de Colombia no hay radios: la caja de la tarjeta va pegada al titulo */
.curso-pago[data-solo-tarjeta] .curso-tarjeta{margin-top:.2rem}