/* -----------------------------------------------------------------
   ESCUELA DE CHOCOLATE Y PASTELERIA — sitio publico.

   Marca: dorado, gris plata y blanco. El blanco manda, el dorado se
   reserva para lo que importa (precio, boton, detalle) y el plata hace
   de linea. Titulos en Archivo negrilla; texto en Public Sans.

   Todos los colores y tipografias estan aqui arriba.
   ----------------------------------------------------------------- */

@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fuentes/archivo-600.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fuentes/archivo-700.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;
  src:url('/fuentes/archivo-800.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fuentes/public-sans-400.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fuentes/public-sans-600.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fuentes/public-sans-700.woff2') format('woff2')}

:root{
  /* --- Marca --- */
  --dorado:      #B8912F;   /* el acento: precio, boton, detalles */
  --dorado-claro:#D9B65A;   /* brillos y bordes dorados */
  --dorado-tinta:#6E5518;   /* dorado oscurecido, para texto sobre blanco */
  --plata:       #8E9296;   /* texto secundario */
  --plata-claro: #E3E5E7;   /* lineas y separadores */
  --humo:        #F4F5F6;   /* franjas con fondo */
  --blanco:      #FFFFFF;
  --tinta:       #1C1D1F;   /* el texto principal, casi negro */

  /* --- Nombres que usa el resto de la hoja --- */
  --cobre:       var(--dorado);
  --verde:       var(--dorado);
  --cacao:       var(--tinta);
  --cacao-suave: #5E6367;
  --nacar:       var(--humo);
  --arena:       var(--humo);
  --rosa-humo:   var(--plata-claro);
  --papel:       var(--humo);
  --linea:       var(--plata-claro);

  --serif: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans:  'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ancho: 1240px;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--blanco);color:var(--cacao);
  font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--cacao);outline-offset:3px}
button{font:inherit;color:inherit}

h1,h2,h3{margin:0 0 .6rem;text-wrap:balance}
h1,h2{font-family:var(--serif);font-weight:800;line-height:1.06;letter-spacing:-.025em}
h1{font-size:clamp(2.6rem,6vw,4.6rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
h3{font-family:var(--serif);font-weight:700;letter-spacing:-.01em;font-size:.98rem;line-height:1.35;letter-spacing:.01em}
p{margin:0 0 1rem;max-width:58ch}
strong,b{font-weight:500}
em{font-style:normal;color:var(--dorado-tinta);font-weight:700}

.contenedor{width:min(100% - 3rem,var(--ancho));margin-inline:auto}
.contenedor.estrecho{width:min(100% - 3rem,760px)}
.centrado{text-align:center}
.centrado p{margin-inline:auto}
.vacio{color:var(--cacao-suave)}

/* Etiqueta en caja alta: el gesto del "BEAUTY" del logotipo */
.antetitulo,.etiqueta-corta{
  font-family:var(--sans);font-size:.68rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.24em;color:var(--cacao-suave);margin:0 0 .9rem;
}

.saltar{position:absolute;left:-9999px;background:var(--cacao);color:var(--blanco);
  padding:.7rem 1rem;z-index:60}
.saltar:focus{left:1rem;top:1rem}

/* ============ BARRA DE ANUNCIO ============ */
.anuncio{
  background:var(--arena);color:var(--cacao);text-align:center;
  font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;
  padding:.55rem 1rem;
}

/* ============ CABECERA ============ */
.cabecera{position:sticky;top:0;z-index:30;background:var(--blanco);
  border-bottom:1px solid var(--linea)}
.cabecera-fila{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:2rem;height:76px}
.logo{display:flex;align-items:center}
.logotipo{height:38px;width:auto}

.nav{display:flex;gap:2.2rem;justify-content:center}
.nav a{font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.18em;
  color:var(--cacao);padding:.3rem 0;border-bottom:1px solid transparent;
  transition:border-color .2s ease}
.nav a:hover{border-bottom-color:var(--rosa-humo)}
.nav a[aria-current="page"]{border-bottom-color:var(--cobre)}

.cabecera-acciones{display:flex;align-items:center;gap:1.2rem;justify-content:flex-end}
.icono{width:22px;height:22px;display:block}
.icono-enlace{display:inline-flex;position:relative;color:var(--cacao);padding:.25rem}
.icono-enlace:hover{color:var(--cobre)}
.cuenta{position:absolute;top:-.15rem;right:-.35rem;min-width:1.05rem;height:1.05rem;
  padding:0 .25rem;border-radius:999px;background:var(--cacao);color:var(--blanco);
  font-size:.62rem;font-weight:500;display:grid;place-items:center;line-height:1}

.abrir-cajon,.cerrar-cajon{display:inline-flex;cursor:pointer;color:var(--cacao);padding:.25rem}

@media (min-width:960px){
  .abrir-cajon{display:none}
  .cabecera-fila{grid-template-columns:auto 1fr auto}
}
@media (max-width:959px){
  .nav-ancha{display:none}
  .cabecera-fila{grid-template-columns:1fr auto 1fr;height:64px;gap:1rem}
  .logo{justify-content:center}
  .logotipo{height:30px}
}

/* ============ CAJONES QUE SE DESLIZAN ============ */
.interruptor-menu,.interruptor-bolsa{position:absolute;opacity:0;width:0;height:0}

.cajon{position:fixed;top:0;bottom:0;z-index:50;width:min(88vw,380px);
  background:var(--blanco);display:flex;flex-direction:column;
  padding:1.3rem 1.6rem 2rem;overflow-y:auto;
  transition:transform .32s cubic-bezier(.4,0,.2,1)}
.cajon-menu-lateral{left:0;transform:translateX(-101%);border-right:1px solid var(--linea)}
.cajon-bolsa{right:0;transform:translateX(101%);border-left:1px solid var(--linea);
  width:min(92vw,420px)}
.interruptor-menu:checked ~ .cajon-menu-lateral,
.interruptor-bolsa:checked ~ .cajon-bolsa{transform:translateX(0)}

.tapa-cajon{position:fixed;inset:0;z-index:45;background:rgba(58,43,38,.28);
  opacity:0;pointer-events:none;transition:opacity .32s ease}
.interruptor-menu:checked ~ .tapa-cajon,
.interruptor-bolsa:checked ~ .tapa-bolsa{opacity:1;pointer-events:auto;cursor:pointer}

.cajon-cabeza{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:1.2rem;margin-bottom:.4rem;border-bottom:1px solid var(--linea)}
.logotipo-cajon{height:28px;width:auto}
.cajon-titulo{font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em}

.cajon-menu{display:flex;flex-direction:column;margin-bottom:1.5rem}
.cajon-menu a{font-family:var(--serif);font-size:1.7rem;line-height:1.2;
  padding:.7rem 0;border-bottom:1px solid var(--linea)}
.cajon-menu a[aria-current="page"]{color:var(--cobre)}

/* ============ BOTONES ============ */
.boton{
  display:inline-block;background:var(--verde);color:var(--blanco);
  border:1px solid var(--cacao);padding:.95rem 2.2rem;border-radius:0;
  font-family:var(--sans);font-size:.7rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.2em;cursor:pointer;text-align:center;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.boton:hover{background:var(--blanco);color:var(--cacao)}
.boton.fantasma{background:transparent;color:var(--cacao)}
.boton.fantasma:hover{background:var(--verde);color:var(--blanco);border-color:var(--verde)}
.boton.pequeno{padding:.6rem 1.2rem}
.boton.grande{padding:1.1rem 2.6rem;width:100%}
.acciones{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.acciones.centradas{justify-content:center}
.enlace-suave{font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.18em;
  border-bottom:1px solid var(--rosa-humo);padding-bottom:.15rem;align-self:flex-start}
.enlace-suave:hover{border-bottom-color:var(--cacao)}
.enlace-suave.centrado{align-self:center}

/* ============ PORTADA ============ */
.heroe{padding:clamp(5rem,13vw,10rem) 0 clamp(4rem,10vw,7.5rem)}
.heroe.sin-foto-heroe{text-align:center}
.heroe.sin-foto-heroe .heroe-texto{margin-inline:auto}
.heroe.sin-foto-heroe p{margin-inline:auto}
.heroe.sin-foto-heroe .acciones{justify-content:center}
.heroe-texto{max-width:46rem}
.heroe-texto > p{font-size:1.05rem;color:var(--cacao-suave)}
.heroe-marca .estrella{width:26px;height:auto;margin:0 auto 2rem}
/* --- La portada con foto de fondo ---
   La foto vive en su propia capa (::before) para poder 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. */
.heroe.con-foto{
  position:relative;overflow:hidden;isolation:isolate;
  background:#171310;color:var(--blanco);
  min-height:min(80vh,760px);display:flex;align-items:center;
  padding-block:clamp(4rem,10vw,7rem)}

.heroe.con-foto::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--foto);background-size:cover;background-position:50% 30%;
  transform-origin:52% 42%;
  animation:heroe-acercar 34s ease-in-out infinite alternate}

.heroe.con-foto::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to left,rgba(16,12,10,.88) 0%,rgba(16,12,10,.76) 30%,rgba(16,12,10,.3) 60%,rgba(16,12,10,0) 86%),
    linear-gradient(to top,rgba(16,12,10,.5) 0%,rgba(16,12,10,0) 42%)}

/* Un acercamiento de 34 segundos: se nota que vive, pero no marea. */
@keyframes heroe-acercar{from{transform:scale(1)}to{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.heroe.con-foto::before{animation:none}}

/* El texto ocupa la mitad derecha, que es donde la foto tiene sitio:
   asi no se le monta encima a la persona. */
.heroe.con-foto .heroe-texto{max-width:none;display:grid;grid-template-columns:1fr minmax(0,33rem)}
.heroe.con-foto .heroe-texto > *{grid-column:2}
.heroe.con-foto h1{font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.05}
.heroe.con-foto .antetitulo,.heroe.con-foto p{color:rgba(255,255,255,.9)}
.heroe.con-foto .boton{background:var(--blanco);color:var(--cacao);border-color:var(--blanco)}
.heroe.con-foto .boton:hover{background:transparent;color:var(--blanco);border-color:var(--blanco)}

@media (max-width:760px){
  /* En el celular manda el recorte vertical y el texto va abajo, con el
     velo subiendo desde el pie. */
  .heroe.con-foto{min-height:min(86vh,660px);align-items:flex-end;text-align:center}
  .heroe.con-foto::before{background-image:var(--foto-movil,var(--foto));background-position:50% 18%}
  .heroe.con-foto::after{background:linear-gradient(to top,
    rgba(16,12,10,.94) 4%,rgba(16,12,10,.72) 34%,rgba(16,12,10,.15) 70%,rgba(16,12,10,0) 100%)}
  .heroe.con-foto .heroe-texto{grid-template-columns:1fr;justify-items:center}
  .heroe.con-foto .heroe-texto > *{grid-column:1;max-width:30rem}
  .heroe.con-foto .acciones{justify-content:center}
}

/* ============ BLOQUES ============ */
.bloque{padding:clamp(4rem,9vw,7rem) 0}
.bloque.tenue{border-top:1px solid var(--linea)}
.bloque > .contenedor > h2{margin-bottom:.4rem}
.bloque > .contenedor > h2 + p{color:var(--cacao-suave)}

/* El unico bloque con fondo de color */
.bloque.franja{background:var(--arena)}
.bloque.franja p{color:var(--cacao-suave)}

.rejilla{display:grid;gap:3rem 1.6rem;margin-top:3rem}
.rejilla.tres{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.rejilla.galeria{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.8rem}

/* ============ TARJETA DE PRODUCTO ============ */
.tarjeta{display:flex;flex-direction:column}
.tarjeta-foto{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--nacar)}
.tarjeta-foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tarjeta:hover .tarjeta-foto img{transform:scale(1.03)}
.sin-foto{width:100%;height:100%;display:grid;place-items:center;background:var(--nacar)}
.sin-foto .estrella{width:34px;height:auto;opacity:.7}
.sin-foto.grande .estrella{width:48px}
.insignia{position:absolute;top:.9rem;left:.9rem;background:var(--blanco);color:var(--cacao);
  font-size:.62rem;font-weight:500;text-transform:uppercase;letter-spacing:.16em;padding:.3rem .6rem}

.tarjeta-cuerpo{padding-top:1.1rem;display:flex;flex-direction:column;flex:1}
.tarjeta-cuerpo .etiqueta-corta{margin-bottom:.45rem;font-size:.62rem}
.tarjeta h3{margin-bottom:.35rem}
.tarjeta h3 a:hover{color:var(--cobre)}
.linea{font-size:.88rem;color:var(--cacao-suave);margin-bottom:1rem;line-height:1.5}
/* La fecha del curso presencial: es el dato que decide la compra. */
.tarjeta-fecha{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.02em;
  color:var(--cobre);margin:0 0 .5rem}
.tarjeta-pie{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.tarjeta-pie form{margin:0}
.precio{font-weight:500;letter-spacing:.02em;margin:0}
.precio s{color:var(--cacao-suave);font-weight:400;margin-right:.35rem}
.tarjeta-boton{background:none;border:0;border-bottom:1px solid var(--cacao);padding:.15rem 0;
  font-size:.66rem;font-weight:500;text-transform:uppercase;letter-spacing:.18em;cursor:pointer;
  color:var(--cacao)}
.tarjeta-boton:hover{color:var(--cobre);border-bottom-color:var(--cobre)}
.tarjeta-boton.apagado{border-bottom-color:transparent;color:var(--cacao-suave);cursor:default}
.tarjeta.agotado .tarjeta-foto{opacity:.6}

.etiqueta{display:inline-block;font-size:.64rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.16em;padding:.3rem .7rem;border:1px solid var(--linea);color:var(--cacao-suave)}

/* ============ TEXTO Y FOTO ============ */
.dos-columnas{display:grid;gap:4rem;grid-template-columns:1fr;align-items:center}
@media (min-width:860px){.dos-columnas:has(.foto-lado){grid-template-columns:1fr 1fr}}
.dos-columnas.invertido > div{order:2}
.foto-lado{aspect-ratio:4/5;object-fit:cover;width:100%}
.figura-ancha{margin:0}
.figura-ancha figcaption{font-size:.82rem;color:var(--cacao-suave);margin-top:.8rem}
.rejilla.galeria figure{margin:0}
.rejilla.galeria img{aspect-ratio:1;object-fit:cover;width:100%}
.editorial p{font-size:1.02rem}

/* ============ PASOS ============ */
.pasos{list-style:none;padding:0;margin:3.5rem 0 0;display:grid;gap:2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.pasos li{border-top:1px solid var(--cacao);padding-top:1.3rem}
.paso-numero{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--cobre);
  line-height:1;margin-bottom:.9rem}
.pasos h3{margin-bottom:.35rem}
.pasos p{font-size:.9rem;color:var(--cacao-suave);margin:0}

/* ============ RAZONES ============ */
.rejilla.valores{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2.5rem}
.valor h3{margin-bottom:.35rem}
.valor p{font-size:.9rem;color:var(--cacao-suave);margin:0}

/* ============ PREGUNTAS ============ */
.preguntas{margin-top:2.5rem;border-top:1px solid var(--cacao)}
.preguntas details{border-bottom:1px solid var(--linea)}
.preguntas summary{cursor:pointer;list-style:none;position:relative;
  padding:1.25rem 2.2rem 1.25rem 0;font-size:.98rem;font-weight:400}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:'';position:absolute;right:.3rem;top:50%;width:10px;height:10px;
  border-right:1px solid var(--cacao);border-bottom:1px solid var(--cacao);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.preguntas details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.respuesta{padding:0 2.2rem 1.4rem 0}
.respuesta p{font-size:.93rem;color:var(--cacao-suave);margin-bottom:.7rem}

/* ============ CITA ============ */
.cita-bloque blockquote{margin:0 auto 1rem;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.3;max-width:26ch;text-wrap:balance}

.lista-texto{margin:0 0 1rem;padding-left:1.1rem}
.lista-texto li{margin-bottom:.35rem}
.lista-texto li::marker{color:var(--cobre)}

/* ============ CONTACTO ============ */
.datos{list-style:none;padding:0;margin:2.5rem 0 0;max-width:40rem;border-top:1px solid var(--cacao)}
.datos li{display:flex;gap:1rem;flex-wrap:wrap;padding:.95rem 0;border-bottom:1px solid var(--linea)}
.datos span{min-width:8rem;font-size:.66rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;color:var(--cacao-suave);padding-top:.25rem}
.datos a:hover{color:var(--cobre)}
.mapa{margin-top:2.5rem}
.mapa iframe{width:100%;height:360px;border:0;display:block;filter:grayscale(1)}

/* ============ PIE ============ */
.pie{border-top:1px solid var(--linea);padding:4rem 0 0;font-size:.85rem}
.pie-rejilla{display:grid;gap:2.5rem;grid-template-columns:1fr;padding-bottom:3rem}
@media (min-width:760px){.pie-rejilla{grid-template-columns:1fr 2fr 1fr;align-items:start}}
.pie-marca .estrella{width:22px;height:auto}
.pie-enlaces,.pie-contacto{display:flex;flex-direction:column;gap:.6rem}
@media (min-width:760px){
  .pie-enlaces{flex-direction:row;flex-wrap:wrap;gap:.6rem 2rem;justify-content:center}
  .pie-contacto{align-items:flex-end}
}
.pie a{font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.16em}
.pie a:hover{color:var(--cobre)}
.pie-legal{border-top:1px solid var(--linea);padding:1.3rem 0}
.pie-legal p{margin:0;font-size:.72rem;color:var(--cacao-suave);letter-spacing:.04em;max-width:none}

/* ============ TIENDA ============ */
.filtros{display:flex;margin:2rem 0 1.5rem;border-bottom:1px solid var(--cacao)}
.filtros input{flex:1;border:0;background:none;padding:.8rem 0;font:inherit;color:var(--cacao)}
.filtros input:focus{outline:none}
.filtros button{background:none;border:0;cursor:pointer;font-size:.68rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;padding:0 0 0 1rem}
.categorias{display:flex;gap:1.8rem;flex-wrap:wrap;margin-bottom:1rem}
.categorias a{font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.18em;
  color:var(--cacao-suave);padding:.3rem 0;border-bottom:1px solid transparent}
.categorias a:hover{color:var(--cacao)}
.categorias a.activa{color:var(--cacao);border-bottom-color:var(--cobre)}

/* ============ FICHA DE PRODUCTO ============ */
.ficha{display:grid;gap:3rem;grid-template-columns:1fr;align-items:start}
/* En tableta la foto se comia la primera pantalla entera y el precio
   quedaba abajo del todo: desde 760 px ya van foto y compra lado a lado. */
@media (min-width:760px){.ficha{grid-template-columns:1.15fr 1fr;gap:2.5rem}}
@media (min-width:1100px){.ficha{grid-template-columns:1.25fr 1fr;gap:5rem}}
.ficha-fotos{display:grid;gap:.6rem}
/* Varias fotos de estos cursos son carteles con texto: si se recortan
   para cuadrar, se corta lo que dicen. Se ven enteras, con su forma. */
.ficha-fotos img{width:100%;height:auto;object-fit:contain}
/* Con tres fotos o mas se hace mosaico; con dos, cada una a lo ancho,
   que si no la segunda queda coja con un hueco al lado. */
.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}
.ficha-datos{position:sticky;top:110px}
.ficha-datos h1{font-size:clamp(2.1rem,4vw,3rem)}
.ficha-datos .antetitulo a:hover{color:var(--cobre)}
.sku{font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.18em;
  color:var(--cacao-suave);margin-bottom:1.4rem}
.precio.grande{font-size:1.35rem;margin-bottom:1.4rem}
.resumen{color:var(--cacao-suave)}
.aviso-linea{border-left:1px solid var(--cobre);padding:.2rem 0 .2rem 1rem;font-size:.88rem;
  color:var(--cacao-suave)}

.form-comprar{margin:2rem 0;padding-top:1.8rem;border-top:1px solid var(--linea)}
.form-comprar label{display:block;margin-bottom:1.2rem;font-size:.66rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;color:var(--cacao-suave)}
.form-comprar select,.form-comprar input[type=number]{display:block;margin-top:.5rem;width:100%;
  max-width:16rem;padding:.7rem .2rem;font:inherit;font-size:.95rem;text-transform:none;
  letter-spacing:normal;color:var(--cacao);background:none;border:0;border-bottom:1px solid var(--cacao)}
.form-comprar .cantidad input{max-width:6rem}
.form-comprar .stock{font-size:.8rem;color:var(--cacao-suave);margin-bottom:1.2rem}
.form-comprar button{width:100%;background:var(--verde);color:var(--blanco);border:1px solid var(--verde);
  padding:1.05rem;font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;
  cursor:pointer;transition:background .2s ease,color .2s ease}
.form-comprar button:hover:not(:disabled){background:var(--blanco);color:var(--cacao)}
.form-comprar button:disabled{background:var(--linea);border-color:var(--linea);
  color:var(--cacao-suave);cursor:not-allowed}

.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:.66rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;color:var(--cacao-suave)}
.opcion-color legend .elegido{color:var(--cacao);letter-spacing:.06em;text-transform:none;font-weight:400}
.bolita-elegir{position:relative;cursor:pointer;margin:0}
.bolita-elegir input{position:absolute;opacity:0;width:0;height:0}
.bolita-elegir > span{display:block;width:30px;height:30px;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 1px var(--cacao)}
.bolita-elegir input:focus-visible + span{box-shadow:0 0 0 2px var(--cacao)}
.bolita-elegir em{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.opcion-texto{display:block}

.detalle-producto{margin-top:6rem;padding-top:3.5rem;border-top:1px solid var(--linea)}
.detalle-producto h2{font-size:clamp(1.7rem,3vw,2.2rem);margin-bottom:1.2rem}
.detalle-producto h3{font-size:.66rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;
  color:var(--cacao-suave);margin-bottom:.9rem}
.detalle-columnas{display:grid;gap:3rem;grid-template-columns:1fr;margin-top:3rem}
@media (min-width:820px){.detalle-columnas{grid-template-columns:1fr 1fr}}
.detalle-columnas p{font-size:.93rem}
.advertencias{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--linea)}
.advertencias p{font-size:.88rem;color:var(--cacao-suave);margin-bottom:.5rem}

/* ============ BOLSA ============ */
.bolsa-lineas{list-style:none;padding:0;margin:0;flex:1;overflow-y:auto}
.bolsa-lineas li{display:flex;gap:1rem;padding:1.2rem 0;border-bottom:1px solid var(--linea)}
.bolsa-foto{flex:0 0 68px}
.bolsa-foto img,.bolsa-foto .sin-foto-mini{width:68px;height:85px;object-fit:cover;
  display:grid;place-items:center;background:var(--nacar)}
.sin-foto-mini .estrella{width:16px;height:auto;opacity:.7}
.bolsa-datos{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.bolsa-datos a{font-size:.88rem;font-weight:500;line-height:1.35}
.bolsa-datos small{font-size:.78rem;color:var(--cacao-suave)}
.bolsa-precio{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;white-space:nowrap}
.bolsa-precio strong{font-size:.88rem}
.bolsa-precio form{margin:0}
.bolsa-pie{padding-top:1.4rem;display:flex;flex-direction:column;gap:.8rem}
.bolsa-total{display:flex;justify-content:space-between;align-items:baseline;margin:0;max-width:none}
.bolsa-total span{font-size:.68rem;font-weight:500;text-transform:uppercase;letter-spacing:.18em}
.bolsa-pie small{font-size:.78rem;color:var(--cacao-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:26px;height:auto}
.bolsa-vacia p{margin:0;font-family:var(--serif);font-size:1.5rem}

/* ============ CARRITO Y COMPRA ============ */
.tabla-carrito{width:100%;border-collapse:collapse;margin:2rem 0;border-top:1px solid var(--cacao)}
.tabla-carrito td{padding:1.1rem .4rem;border-bottom:1px solid var(--linea);vertical-align:middle}
.tabla-carrito tfoot td{border-bottom:0;padding-top:1.3rem;font-size:1.05rem;font-weight:500}
.tabla-carrito .mini img{width:64px;height:80px;object-fit:cover}
.tabla-carrito .nowrap{white-space:nowrap}
.tabla-carrito .corto{width:4rem}
.fila-suma td{font-size:.88rem;color:var(--cacao-suave);padding:.55rem .4rem}
.en-linea{display:flex;gap:.5rem;align-items:center}
.en-linea input{padding:.4rem .2rem;border:0;border-bottom:1px solid var(--cacao);background:none;
  font:inherit;color:var(--cacao)}
button.enlace{background:none;border:0;padding:0;cursor:pointer;font-size:.64rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;color:var(--cacao-suave);
  border-bottom:1px solid var(--linea)}
button.enlace:hover{color:var(--cacao);border-bottom-color:var(--cacao)}

.caja-aviso{background:var(--nacar);padding:1.8rem;margin:2rem 0}
.caja-aviso h2{font-size:1.6rem}
.descargas{list-style:none;padding:0;margin:1rem 0 0;display:flex;gap:.7rem;flex-wrap:wrap}

.form-checkout{margin-top:1rem}
.form-checkout h2{font-size:1.7rem;margin:3rem 0 1.2rem}
.form-checkout label{display:block;margin-bottom:1.3rem;font-size:.66rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;color:var(--cacao-suave)}
.form-checkout input,.form-checkout textarea{display:block;width:100%;margin-top:.45rem;
  padding:.7rem .1rem;font:inherit;font-size:.98rem;text-transform:none;letter-spacing:normal;
  color:var(--cacao);background:none;border:0;border-bottom:1px solid var(--rosa-humo)}
.form-checkout input:focus,.form-checkout textarea:focus{outline:none;border-bottom-color:var(--cacao)}
.form-checkout .metodo{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem 1.2rem;
  margin-bottom:.6rem;border:1px solid var(--linea);cursor:pointer;text-transform:none;
  letter-spacing:normal;font-size:.93rem;color:var(--cacao)}
.form-checkout .metodo:has(input:checked){border-color:var(--cacao)}
.form-checkout .metodo input{width:auto;margin:.3rem 0 0;accent-color:var(--cacao)}
.form-checkout .metodo span{flex:1}
.form-checkout .metodo small{color:var(--cacao-suave)}
.precio-envio{float:right;font-weight:500}
.form-checkout small{display:block;font-size:.78rem;text-transform:none;letter-spacing:normal;
  font-weight:400;margin-top:.35rem}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============ PRODUCTO SIN FOTO: HACE DE ETIQUETA ============ */
.etiqueta-producto{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.7rem;padding:1.5rem;text-align:center;
  background:linear-gradient(180deg,var(--nacar) 0%,var(--arena) 100%)}
.etiqueta-producto .estrella{width:30px;height:auto;opacity:1;margin-bottom:.4rem}
.etiqueta-nombre{font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.55rem);line-height:1.15;
  color:var(--cacao);max-width:12ch;text-wrap:balance}
.etiqueta-formato{font-size:.62rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;
  color:var(--cacao-suave)}
.etiqueta-producto.grande .estrella{width:44px}
.etiqueta-producto.grande .etiqueta-nombre{font-size:clamp(1.8rem,3.5vw,2.6rem);max-width:14ch}
.bolsa-foto .etiqueta-producto{padding:.3rem}

/* En el movil, la portada mas baja: los productos tienen que asomar
   en la primera pantalla, no quedar escondidos debajo. */
@media (max-width:640px){
  .heroe{padding:3.2rem 0 2.8rem}
  .heroe-marca .estrella{margin-bottom:1.3rem}
  .bloque{padding:3rem 0}
  .rejilla{margin-top:2rem;gap:2.5rem 1rem}
  .rejilla.tres{grid-template-columns:1fr 1fr}
  .etiqueta-nombre{font-size:1.05rem}
  .tarjeta h3{font-size:.86rem}
  .linea{display:none}
  .tarjeta-pie{flex-direction:column;align-items:flex-start;gap:.5rem}
}

/* ============ PORTADA: TEXTO A UN LADO, IMAGEN AL OTRO ============ */
.heroe.heroe-lado{padding:clamp(2.5rem,6vw,5rem) 0}
.heroe-rejilla{display:grid;gap:2.5rem;align-items:center;grid-template-columns:1fr}
@media (min-width:880px){.heroe-rejilla{grid-template-columns:1fr 1.1fr;gap:5rem}}
.heroe-lado .heroe-texto{max-width:34rem}
.heroe-lado .heroe-texto > p{font-size:1.08rem}
.heroe-imagen img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--nacar)}
@media (max-width:879px){
  .heroe-lado .heroe-imagen{order:-1}
  .heroe-lado .heroe-texto{text-align:center;margin-inline:auto}
  .heroe-lado .heroe-texto p{margin-inline:auto}
  .heroe-lado .acciones{justify-content:center}
}

/* ============ TRES RAZONES: FRANJA CORTA CON ESTRELLA ============ */
.valor .estrella{width:16px;height:auto;margin-bottom:1rem}
.valor{border-top:1px solid var(--linea);padding-top:1.4rem}

/* ============ PASOS CON IMAGEN ============ */
/* Una foto a un lado y la lista al otro */
.pasos-con-foto{display:grid;gap:3rem;grid-template-columns:1fr;align-items:center}
@media (min-width:880px){.pasos-con-foto{grid-template-columns:1fr 1fr;gap:5rem}}
.pasos-imagen img{width:100%;aspect-ratio:1;object-fit:cover}
.pasos.pasos-lista{grid-template-columns:1fr;gap:0;margin-top:2rem}
.pasos-lista li{display:grid;grid-template-columns:3rem 1fr;column-gap:1rem;padding:1.3rem 0;
  border-top:1px solid var(--linea)}
.pasos-lista li:last-child{border-bottom:1px solid var(--linea)}
.pasos-lista .paso-numero{grid-row:span 3;margin:0}
.pasos-lista h3,.pasos-lista p,.pasos-lista .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;background:var(--nacar);margin-bottom:1.2rem}
.paso-foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
a.paso-foto:hover img{transform:scale(1.03)}
.paso-sin-producto{display:grid;place-items:center;
  background:linear-gradient(180deg,var(--nacar) 0%,var(--arena) 100%)}
.paso-sin-producto span{font-family:var(--serif);font-size:4.5rem;color:var(--cobre);line-height:1}
.pasos-visuales .paso-numero{font-size:1.1rem;margin-bottom:.4rem}
.pasos-visuales .enlace-suave{margin-top:.8rem}
@media (max-width:640px){
  .pasos.pasos-visuales{grid-template-columns:1fr 1fr;gap:2rem 1rem}
  .pasos-visuales p{font-size:.84rem}
  .paso-sin-producto span{font-size:3rem}
}

/* =================================================================
   COMPRA: BOLSA, CHECKOUT Y CONFIRMACION
   ================================================================= */

/* Cabecera minima del checkout: nada que distraiga al pagar */
.cabecera-minimal{position:static}
.cabecera-fila-minimal{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:72px}
.cabecera-fila-minimal .logo{justify-content:center}
.volver-bolsa{font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.16em}
.volver-bolsa:hover{color:var(--cobre)}
.compra-segura{justify-self:end;font-size:.66rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.16em;color:var(--cacao-suave)}
@media (max-width:560px){.volver-bolsa span,.compra-segura{display:none}}

.aviso-previa{background:var(--arena);text-align:center;font-size:.82rem;padding:.8rem 1.2rem;line-height:1.5}
.aviso-previa strong{font-weight:500}

.bloque-compra{padding:clamp(2rem,5vw,3.5rem) 0 clamp(4rem,8vw,6rem)}
.titulo-compra{font-size:clamp(2.2rem,4vw,3rem);margin-bottom:2rem}
.compra-rejilla{display:grid;gap:3rem;grid-template-columns:1fr;align-items:start}
@media (min-width:960px){.compra-rejilla{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:5rem}}

/* --- Resumen (columna derecha) --- */
.resumen-compra{background:var(--nacar);padding:2rem}
.resumen-compra h2{font-size:1.7rem;margin-bottom:1.3rem}
@media (min-width:960px){.resumen-fijo{position:sticky;top:2rem}}
@media (max-width:959px){.resumen-fijo{display:none}}

.cifras{margin:1.3rem 0 0;padding:0}
.cifras div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;font-size:.92rem}
.cifras dt{color:var(--cacao-suave)}
.cifras dd{margin:0;text-align:right}
.cifras dd.suave{color:var(--cacao-suave);font-size:.82rem}
.cifra-total{border-top:1px solid var(--rosa-humo);margin-top:.5rem;padding-top:1rem!important}
.cifra-total dt{color:var(--cacao)!important;font-weight:500}
.cifra-total dd{font-family:var(--serif);font-size:1.7rem;line-height:1}
.cifra-total dd small{font-family:var(--sans);font-size:.66rem;letter-spacing:.14em;color:var(--cacao-suave);
  vertical-align:middle;margin-right:.3rem}
.nota-envio{font-size:.82rem;color:var(--cacao-suave);margin:1rem 0 0}
.nota-envio strong{color:var(--cacao)}
.resumen-compra .boton.grande{margin-top:1.5rem}

.lineas-resumen{list-style:none;padding:0;margin:0}
.lineas-resumen li{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;
  padding:.8rem 0;border-bottom:1px solid var(--linea)}
.lineas-resumen li:has(> .mini-nombre:first-child){grid-template-columns:1fr auto}
.mini-foto{position:relative;width:58px;height:72px;display:block;background:var(--blanco)}
.mini-foto img,.mini-foto .sin-foto{width:100%;height:100%;object-fit:cover}
.mini-foto .sin-foto .estrella{width:14px}
.mini-cantidad{position:absolute;top:-.45rem;right:-.45rem;min-width:1.25rem;height:1.25rem;border-radius:999px;
  background:var(--cacao);color:var(--blanco);font-size:.66rem;display:grid;place-items:center;padding:0 .3rem}
.mini-nombre{font-size:.88rem;line-height:1.35}
.mini-nombre small{display:block;color:var(--cacao-suave);font-size:.76rem}
.mini-precio{font-size:.88rem;white-space:nowrap}

/* --- Bolsa (pagina) --- */
.bolsa-pagina{list-style:none;padding:0;margin:0 0 2rem;border-top:1px solid var(--cacao)}
.bolsa-pagina li{display:grid;grid-template-columns:96px 1fr auto;gap:1.3rem;padding:1.4rem 0;
  border-bottom:1px solid var(--linea)}
.linea-foto{display:block;width:96px;height:120px;background:var(--nacar);overflow:hidden}
.linea-foto img,.linea-foto .sin-foto{width:100%;height:100%;object-fit:cover}
.linea-datos{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.linea-nombre{font-weight:500;line-height:1.35}
.linea-nombre:hover{color:var(--cobre)}
.linea-datos small{font-size:.8rem;color:var(--cacao-suave)}
.cantidad-linea{display:inline-flex;align-items:center;margin-top:auto;border:1px solid var(--linea);
  align-self:flex-start}
.cantidad-linea button{background:none;border:0;width:2.2rem;height:2.2rem;cursor:pointer;font-size:1rem}
.cantidad-linea button:hover{background:var(--nacar)}
.cantidad-linea span{min-width:1.8rem;text-align:center;font-size:.9rem}
.linea-precio{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:.5rem}
.linea-precio strong{font-weight:500}
.linea-precio form{margin:0}
@media (max-width:560px){
  .bolsa-pagina li{grid-template-columns:72px 1fr;gap:1rem}
  .linea-foto{width:72px;height:90px}
  .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:4rem 0;text-align:center}
.bolsa-vacia-pagina .estrella{width:28px}
.bolsa-vacia-pagina p{font-family:var(--serif);font-size:1.8rem;margin:0}

/* --- Formulario del checkout --- */
.form-checkout{margin:0}
.paso-compra{border:0;padding:0;margin:0 0 2.8rem}
.paso-compra legend{display:flex;align-items:center;gap:.8rem;padding:0;margin-bottom:1.4rem;
  font-family:var(--serif);font-size:1.75rem;line-height:1}
.paso-compra legend .n{width:1.8rem;height:1.8rem;border:1px solid var(--cacao);border-radius:50%;
  display:grid;place-items:center;font-family:var(--sans);font-size:.72rem;font-weight:500}
.campos-dos{display:grid;gap:0 1.2rem;grid-template-columns:1fr}
@media (min-width:600px){.campos-dos{grid-template-columns:1fr 1fr}}

.campo-compra{display:block;margin-bottom:1rem}
.campo-compra > span{display:block;font-size:.66rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.16em;color:var(--cacao-suave);margin-bottom:.35rem}
.campo-compra > span em{text-transform:none;letter-spacing:0;font-family:var(--sans);font-style:normal;font-size:.72rem}
.campo-compra input,.campo-compra select{display:block;width:100%;padding:.85rem .95rem;font:inherit;
  font-size:.95rem;color:var(--cacao);background:var(--blanco);border:1px solid var(--rosa-humo);
  border-radius:0;appearance:none}
.campo-compra select{background-image:linear-gradient(45deg,transparent 50%,var(--cacao) 50%),
  linear-gradient(135deg,var(--cacao) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px;
  background-repeat:no-repeat;padding-right:2.5rem}
.campo-compra input:focus,.campo-compra select:focus{outline:none;border-color:var(--cacao)}
.campo-compra input:user-invalid,.campo-compra select:user-invalid{border-color:#B5584A}

.subtitulo-paso{font-size:.66rem;font-weight:500;text-transform:uppercase;letter-spacing:.16em;
  color:var(--cacao-suave);margin:1.6rem 0 .6rem}

.opciones-compra{border:1px solid var(--rosa-humo)}
.opcion-compra{display:flex;align-items:flex-start;gap:.9rem;padding:1.05rem 1.1rem;cursor:pointer;
  border-bottom:1px solid var(--rosa-humo);transition:background .15s ease}
.opcion-compra:last-child{border-bottom:0}
.opcion-compra:has(input:checked){background:var(--nacar)}
.opcion-compra input{accent-color:var(--cacao);margin:.25rem 0 0;width:auto}
.opcion-texto-compra{flex:1;display:flex;flex-direction:column;gap:.15rem}
.opcion-texto-compra strong{font-weight:500;font-size:.93rem}
.opcion-texto-compra small{font-size:.8rem;color:var(--cacao-suave);line-height:1.45}
.opcion-precio{font-size:.92rem;font-weight:500;white-space:nowrap}
.medios-pago{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.6rem}
.medios-pago i{font-style:normal;font-size:.62rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;
  border:1px solid var(--rosa-humo);background:var(--blanco);padding:.2rem .45rem}

.boton-pagar{margin-top:.5rem;font-size:.74rem}
.letra-pequena{font-size:.76rem;color:var(--cacao-suave);text-align:center;margin:1rem auto 0;max-width:44ch}
.letra-pequena a{border-bottom:1px solid var(--rosa-humo)}
.aviso-fuerte{border-left-color:var(--cacao);color:var(--cacao);margin-bottom:1.8rem}

.resumen-movil{display:none;background:var(--nacar);margin-bottom:2rem;padding:0 1.1rem}
.resumen-movil summary{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;
  cursor:pointer;list-style:none;font-size:.82rem}
.resumen-movil summary::-webkit-details-marker{display:none}
.resumen-movil summary span{text-decoration:underline;text-underline-offset:.2em}
.resumen-movil summary strong{font-weight:500}
.resumen-movil .lineas-resumen{padding-bottom:.8rem}
@media (max-width:959px){.resumen-movil{display:block}}

/* --- Confirmacion --- */
.confirmacion-cabeza{text-align:center;padding:1.5rem 0 3rem;border-bottom:1px solid var(--linea)}
.confirmacion-cabeza .estrella{width:24px;margin:0 auto 1.4rem}
.confirmacion-cabeza h1{margin-bottom:.8rem}
.confirmacion-cabeza p{margin-inline:auto;color:var(--cacao-suave)}
.confirmacion-rejilla{display:grid;gap:2.5rem;grid-template-columns:1fr;padding:3rem 0}
@media (min-width:760px){.confirmacion-rejilla{grid-template-columns:1.3fr 1fr;gap:4rem}}
.confirmacion-rejilla h2{font-size:1.5rem;margin-bottom:1rem}
.confirmacion-datos p{font-size:.92rem;line-height:1.7;margin-bottom:1.8rem}

/* ============ SELECTOR DE IDIOMA ============ */
/* En la cabecera: las dos letras del idioma; al pulsar, los cuatro. */
.selector-idioma{position:relative}
.selector-idioma summary{list-style:none;cursor:pointer;font-size:.7rem;font-weight:500;
  letter-spacing:.16em;padding:.35rem .2rem;border-bottom:1px solid transparent;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(-3px) rotate(45deg)}
.selector-idioma[open] summary{border-bottom-color:var(--cobre)}
.lista-idiomas{position:absolute;top:calc(100% + .6rem);right:-.8rem;z-index:40;background:var(--blanco);
  border:1px solid var(--linea);box-shadow:0 10px 30px rgba(58,43,38,.08);display:flex;flex-direction:column;
  min-width:9.5rem;padding:.4rem 0}
.lista-idiomas a{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 1rem;
  font-size:.7rem;font-weight:500;letter-spacing:.16em}
.lista-idiomas a::after{content:attr(title);letter-spacing:.02em;font-weight:400;color:var(--cacao-suave)}
.lista-idiomas a:hover{background:var(--nacar)}
.lista-idiomas a[aria-current="true"]{color:var(--cobre)}

/* En el cajon del movil y en el pie: las cuatro letras en fila */
.idiomas-cajon,.idiomas-pie{display:flex;gap:1.2rem}
.idiomas-cajon{margin:.5rem 0 1.6rem}
.idiomas-cajon a,.idiomas-pie a{font-size:.72rem;font-weight:500;letter-spacing:.16em;color:var(--cacao-suave);
  padding-bottom:.15rem;border-bottom:1px solid transparent}
.idiomas-cajon a[aria-current="true"],.idiomas-pie a[aria-current="true"]{color:var(--cacao);border-bottom-color:var(--cobre)}
.idiomas-cajon a:hover,.idiomas-pie a:hover{color:var(--cacao)}
.pie-legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 2rem}
.credito-geo{width:100%}
.credito-geo a{font-size:.62rem;color:var(--cacao-suave);letter-spacing:.04em;text-transform:none;font-weight:400}

@media (max-width:959px){
  /* En el movil tambien va en la cabecera, junto a la lupa */
  .cabecera-acciones{gap:.7rem}
  .selector-idioma summary{padding:.55rem .3rem}
  .lista-idiomas{right:-.4rem}
}
@media (max-width:400px){
  /* Celulares pequeños: todo un poco mas junto para que quepan idioma, lupa y bolsa */
  .cabecera-fila{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:.5rem}
  .logotipo{height:26px}
  .cabecera-acciones{gap:.45rem}
  .cabecera-acciones .icono-enlace{padding:.2rem}
  .selector-idioma summary{padding:.55rem .15rem}
  .selector-idioma summary::after{margin-left:.35rem}
}

/* =================================================================
   CELULAR: TODO CENTRADO
   En pantallas estrechas el contenido va al centro, como la portada.
   Los formularios de la bolsa y el checkout se quedan alineados a la
   izquierda para que sea comodo rellenarlos.
   ================================================================= */
@media (max-width:759px){
  main .bloque:not(.bloque-compra) .contenedor{text-align:center}
  main .bloque:not(.bloque-compra) p{margin-inline:auto}
  main .bloque:not(.bloque-compra) .acciones{justify-content:center}
  main .bloque:not(.bloque-compra) .enlace-suave{align-self:center}
  .titulo-compra{text-align:center}

  /* Tarjetas de producto: si sobra una, al centro */
  .tarjeta-pie{align-items:center;justify-content:center}
  .rejilla.tres > .tarjeta:last-child:nth-child(odd),
  .pasos.pasos-visuales > li:last-child:nth-child(odd){
    grid-column:1/-1;justify-self:center;width:calc(50% - .8rem)}

  /* Pasos */
  .pasos-lista li{display:block}
  .pasos-lista .paso-numero{margin-bottom:.3rem}
  .pasos.pasos-visuales li{align-items:center}
  .pasos-visuales .paso-foto{align-self:stretch}

  /* Ficha de producto */
  .form-comprar .cantidad input{margin-inline:auto;text-align:center}
  .form-comprar select{text-align:center;text-align-last:center}
  .opcion-color{justify-content:center}
  .lista-texto{list-style:none;padding-left:0}
  .valor .estrella{margin-inline:auto}
  .categorias{justify-content:center}

  /* Preguntas: el texto al centro y la flecha a la derecha */
  .preguntas summary{padding-left:2.2rem}
  .respuesta{padding-left:2.2rem}

  /* Contacto */
  .datos{margin-inline:auto}
  .datos li{justify-content:center}
  .datos span{min-width:0}

  /* Pie */
  .pie-rejilla{text-align:center}
  .pie-marca .estrella{margin-inline:auto}
  .pie-enlaces,.pie-contacto{align-items:center}
  .pie-legal{flex-direction:column;justify-content:center;text-align:center}
}

/* =================================================================
   OPINIONES
   Tarjetas en fila que se deslizan con el dedo, como las de Google.
   ================================================================= */
.bloque-resenas{border-top:1px solid var(--linea)}
.resenas-cabeza{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.resenas-cabeza h2{margin-bottom:.3rem}
.resenas-cabeza p{color:var(--cacao-suave);margin:0}
.resenas-media{display:flex;align-items:center;gap:.6rem;margin-top:.8rem!important;font-size:.9rem}
.resenas-media strong{font-weight:500;color:var(--cacao)}
.resenas-media span{color:var(--cacao-suave)}
.resenas-flechas{display:flex;gap:.5rem;flex:none}
.flecha{width:2.4rem;height:2.4rem;border:1px solid var(--linea);background:var(--blanco);
  color:var(--cacao);cursor:pointer;border-radius:50%;line-height:1;
  transition:border-color .2s ease,color .2s ease}
.flecha:hover{border-color:var(--cobre);color:var(--cobre)}

.resenas-pista{display:flex;gap:1rem;margin-top:2.2rem;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:.4rem}
.resenas-pista::-webkit-scrollbar{display:none}
.resena{flex:0 0 86%;scroll-snap-align:start;background:var(--nacar);padding:1.6rem 1.5rem;
  display:flex;flex-direction:column;gap:.7rem}
@media (min-width:760px){.resena{flex-basis:calc(33.333% - .7rem)}}
.resena-cabeza{display:flex;align-items:center;gap:.8rem}
.resena-avatar{width:2.3rem;height:2.3rem;border-radius:50%;background:var(--rosa-humo);
  color:var(--blanco);display:grid;place-items:center;font-size:.9rem;font-weight:500;flex:none}
.resena-quien{margin:0;font-weight:500;font-size:.92rem}
.resena-cuando{margin:0;font-size:.75rem;color:var(--cacao-suave);letter-spacing:.02em}
.resena-texto{margin:0;font-size:.93rem;line-height:1.6;color:var(--cacao)}
.resena-sello{margin:auto 0 0;font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--cacao-suave)}

.estrellas{display:inline-flex;gap:.12rem;line-height:1}
.estrellita{width:15px;height:15px;fill:var(--cobre)}
.estrellita.vacia{fill:var(--arena)}
.valoracion-linea{display:flex;align-items:center;gap:.6rem;margin:-.4rem 0 1.2rem;font-size:.85rem}
.valoracion-linea a{color:var(--cacao-suave);border-bottom:1px solid var(--linea)}
.valoracion-linea a:hover{color:var(--cobre)}

/* =================================================================
   CODIGO DE DESCUENTO
   ================================================================= */
.caja-cupon{margin-top:1.2rem;border-top:1px solid var(--linea);padding-top:1.1rem}
.form-cupon{display:flex;align-items:flex-end;gap:.6rem}
.campo-cupon{flex:1;display:block}
.campo-cupon span{display:block;font-size:.66rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;color:var(--cacao-suave);margin-bottom:.4rem}
.campo-cupon input{width:100%;border:1px solid var(--linea);background:var(--blanco);
  padding:.7rem .8rem;font:inherit;text-transform:uppercase;letter-spacing:.06em}
.campo-cupon input:focus{outline:none;border-color:var(--cobre)}
.form-cupon .boton{white-space:nowrap}
.cupon-puesto{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin:0;font-size:.85rem}
.cupon-puesto form{margin:0}
.cifra-descuento dd{color:var(--cobre)}

/* =================================================================
   VENTANITA DEL DESCUENTO DE BIENVENIDA
   ================================================================= */
.promo-fondo{position:fixed;inset:0;z-index:80;background:rgba(58,43,38,.42);
  display:grid;place-items:center;padding:1.2rem;animation:aparecer .25s ease}
/* Sin esto, "display:grid" le gana al hidden y la ventanita saldria siempre. */
.promo-fondo[hidden]{display:none}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
body.con-promo{overflow:hidden}
.promo-caja{position:relative;background:var(--blanco);width:min(100%,420px);
  padding:2.6rem 1.8rem 2rem;text-align:center;max-height:92vh;overflow-y:auto}
.promo-cerrar{position:absolute;top:.7rem;right:.7rem;background:none;border:0;cursor:pointer;
  color:var(--cacao-suave);padding:.35rem;line-height:0}
.promo-cerrar:hover{color:var(--cacao)}
.promo-estrella .estrella{width:22px;height:auto;margin:0 auto .9rem}
.promo-caja h2{font-size:clamp(1.5rem,5vw,1.9rem);margin-bottom:.5rem}
.promo-texto{color:var(--cacao-suave);font-size:.92rem;margin-inline:auto}
.promo-caja form{margin-top:1.4rem;display:grid;gap:.8rem;text-align:left}
.promo-campo span{display:block;font-size:.64rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;color:var(--cacao-suave);margin-bottom:.35rem}
.promo-campo input{width:100%;border:1px solid var(--linea);background:var(--blanco);
  padding:.75rem .8rem;font:inherit}
.promo-campo input:focus{outline:none;border-color:var(--cobre)}
.promo-caja .boton.grande{width:100%;margin-top:.3rem}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.promo-error{margin:0;font-size:.85rem;color:#a4382f}
.promo-legal{font-size:.7rem;line-height:1.5;color:var(--cacao-suave);margin:1rem auto 0;max-width:34ch}
.promo-no{background:none;border:0;cursor:pointer;margin-top:.9rem;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--cacao-suave);
  border-bottom:1px solid transparent}
.promo-no:hover{color:var(--cacao);border-bottom-color:var(--rosa-humo)}
.promo-codigo{display:flex;align-items:center;justify-content:center;gap:.8rem;flex-wrap:wrap;
  margin:1.4rem 0 0}
.promo-codigo code{font-family:var(--sans);font-size:1.15rem;font-weight:500;letter-spacing:.14em;
  background:var(--nacar);border:1px dashed var(--rosa-humo);padding:.7rem 1rem;color:var(--cacao)}
.boton-copiar{background:none;border:0;border-bottom:1px solid var(--cacao);cursor:pointer;
  font-size:.68rem;font-weight:500;text-transform:uppercase;letter-spacing:.16em;padding:.15rem 0}
.boton-copiar:hover{color:var(--cobre);border-bottom-color:var(--cobre)}
@media (max-width:759px){
  .resenas-flechas{display:none}
  .resenas-cabeza{justify-content:center;text-align:center}
  .resenas-media{justify-content:center}
  .resena{text-align:left}
  .form-cupon{flex-direction:column;align-items:stretch}
  .cupon-puesto{flex-direction:column;text-align:center}
}

/* ===================================================================
   AULA — cursos online: pagina de venta y zona del alumno.
   Misma paleta que el resto de la web: dorado, plata y blanco. Antes
   venia con los verdes de la plataforma de donde salio el codigo, y
   parecia otra marca justo despues de pagar.
   =================================================================== */
: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; }
}


/* --- Marca de la escuela: sello + nombre --- */
.logotipo,.logotipo-cajon{display:inline-flex;align-items:center;gap:.6rem}
.logotipo .sello,.logotipo-cajon .sello{width:2rem;height:2rem;border-radius:6px}
.logotipo-cajon .sello{width:2.4rem;height:2.4rem}
.nombre-marca{font-family:var(--serif);font-weight:800;font-size:1.1rem;line-height:1.15;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--tinta);max-width:12em}
.logotipo-cajon .nombre-marca{font-size:1.5rem}
.estrella{width:2.6rem;height:2.6rem;opacity:.5;border-radius:6px}
.sin-foto .estrella,.heroe-marca .estrella{width:3.2rem;height:3.2rem}

/* --- 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 dorada --- */
.curso-etiqueta,.aula .kick{color:var(--dorado-tinta)}
.curso-precio strong{font-family:var(--serif);font-weight:800;letter-spacing:-.02em}
.curso-boton,.aula-form button,.aula-boton,.boton,.form-comprar button{
  background:var(--tinta);border-color:var(--tinta)}
.curso-boton:hover,.aula-boton:hover,.boton:hover{background:var(--dorado-tinta)}
.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(--dorado)}
.curso-cierre{background:var(--tinta)}
.curso-cierre .curso-precio strong{color:var(--dorado-claro)}
.aula-barra span{background:var(--dorado)}
.curso-modulo summary{font-family:var(--serif);font-weight:700}
.logotipo .sello,.logotipo-cajon .sello{border-radius:4px}

/* --- 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}
.logotipo-pie{display:inline-flex;align-items:center;gap:.55rem}
.logotipo-pie .sello{width:1.9rem;height:1.9rem;border-radius:4px}
.logotipo-pie .nombre-marca{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{display:grid;gap:.5rem}
.curso-pregunta{border:1px solid var(--linea);border-radius:10px;background:var(--blanco)}
.curso-pregunta summary{cursor:pointer;padding:.9rem 1.1rem;font-family:var(--serif);font-weight:700}
.curso-pregunta p{margin:0;padding:0 1.1rem 1rem;color:var(--cacao-suave)}

/* 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}
}


/* --- El logotipo de la escuela --- */
.logotipo{display:block;height:2.6rem;width:auto;max-width:min(62vw,17rem)}
.logotipo-cajon{display:block;height:2.4rem;width:auto;max-width:12rem}
.logotipo-pie{display:block;height:2.2rem;width:auto;max-width:14rem}
.cabecera-fila-minimal .logotipo{height:2.3rem}
.estrella{width:2.4rem;height:auto;opacity:.45}
.sin-foto .estrella,.heroe-marca .estrella{width:3rem}
.pie-marca{display:flex;align-items:center}
@media(max-width:560px){.logotipo{height:2.1rem}}

/* --- "Tu curso esta listo" en la pantalla del pedido --- */
.caja-curso{margin:1.6rem 0;padding:1.4rem 1.5rem;border:2px solid var(--dorado);border-radius:14px;
  background:var(--humo);text-align:center}
.caja-curso h2{font-family:var(--serif);font-weight:800;font-size:1.4rem;margin:0 0 .5rem}
.caja-curso p{color:var(--cacao-suave);margin:0 auto .9rem;max-width:34rem}
.caja-curso .boton{margin-top:.2rem}

/* --- Ficha de producto con cara de landing --- */
.tira-confianza{list-style:none;margin:1.6rem 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:12px;overflow:hidden}
.tira-confianza li{background:var(--blanco);padding:.9rem 1rem;display:grid;gap:.15rem}
.tira-confianza strong{font-family:var(--serif);font-weight:700;font-size:.95rem}
.tira-confianza span{color:var(--cacao-suave);font-size:.85rem}
.bloque-dudas{margin-top:2.5rem}
.bloque-dudas h2{font-family:var(--serif);font-weight:800;font-size:1.5rem;margin:0 0 .9rem}
.cierre-producto{margin-top:2.5rem;padding:2rem 1.2rem;border-radius:14px;background:var(--tinta);
  color:#fff;text-align:center}
.cierre-producto h2{color:#fff;margin:0 0 .6rem}
.cierre-producto .precio{color:var(--dorado-claro);font-family:var(--serif);font-weight:800;margin:0 0 1rem}
.cierre-producto s{color:#9a9a9a;font-weight:400;font-size:.7em;margin-right:.4rem}
.cierre-producto .boton{background:var(--dorado);border-color:var(--dorado);color:#1C1D1F}

/* ===================================================================
   CELULAR: que todo respire y quede centrado.
   El movil es la mitad de las visitas, asi que manda el.
   =================================================================== */
@media (max-width: 720px) {
  /* Margen lateral parejo en todo el sitio */
  .contenedor,.contenedor.estrecho{width:min(100% - 2.2rem,var(--ancho))}

  /* La portada de cualquier pagina: texto centrado y foto arriba */
  .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,.bloque-dudas h2,.curso-cierre h2{text-align:center}
  .curso-seccion .curso-nota{text-align:center}
  .curso-testimonios,.curso-tarjetas{grid-template-columns:1fr}
  .tira-confianza{grid-template-columns:1fr}
  .tira-confianza li{text-align:center}
  .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}

  /* Ficha de producto */
  .ficha{gap:1.2rem}
  .ficha-datos{text-align:center;position:static}
  /* En el computador hace falta aire entre la compra y el detalle; en el
     celular ese hueco es media pantalla en blanco. */
  .detalle-producto{margin-top:2.2rem;padding-top:2rem}
  .form-comprar{margin-bottom:1rem}
  .ficha-datos .form-comprar{max-width:24rem;margin-inline:auto}
  .cierre-producto{padding:1.6rem 1.1rem}
  .ficha-curso-datos{grid-template-columns:1fr 1fr}

  /* Pie: todo centrado y sin columnas apretadas */
  .pie-rejilla{text-align:center;justify-items:center;gap:1.4rem}
  .pie-enlaces{display:grid;gap:.5rem}
  .pie-legal{flex-direction:column;gap:.5rem;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}
}

/* --- Los datos que deciden la compra, arriba y a la vista --- */
/* Todas del mismo ancho y en una rejilla: sueltas hacian escalera. */
.ficha-pastillas{list-style:none;margin:1rem 0 1.2rem;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.5rem}
.ficha-pastillas li{display:grid;gap:.1rem;padding:.55rem .8rem;border:1px solid var(--linea);
  border-radius:10px;background:var(--blanco);min-width:0}
.ficha-pastillas span{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--plata)}
.ficha-pastillas strong{font-family:var(--serif);font-weight:700;font-size:.95rem;line-height:1.2}
@media(max-width:720px){.ficha-pastillas{justify-content:center}}

/* ===================================================================
   REPASO DE MOVIL — 29-09-2026
   En el celular se centraba TODO, listas incluidas: la vinneta quedaba
   pegada al margen y su texto en mitad de la pantalla. Aqui se decide
   que va centrado (lo que se mira) y que va a la izquierda (lo que se
   lee), y se ordenan las pastillas de datos y el pie.
   =================================================================== */

@media (max-width:759px){
  /* Lo que se LEE, a la izquierda */
  main .bloque .editorial,
  main .bloque .descripcion-larga,
  main .bloque .ficha-curso,
  main .bloque .detalle-columnas,
  main .bloque .advertencias,
  main .bloque .curso-preguntas,
  main .bloque .preguntas,
  main .bloque .curso-prosa,
  main .bloque .curso-garantia-cuerpo{text-align:left}

  /* Lo que se MIRA, al centro */
  main .bloque .descripcion-larga>h2,
  main .bloque .bloque-dudas>h2,
  main .bloque .ficha-curso-seccion h3,
  main .bloque .detalle-columnas h3{text-align:center}

  /* Las vinnetas, pegadas a su texto. Las listas de la ficha ya traen su
     punto dibujado con ::before, asi que a esas no se les toca la sangria. */
  main .bloque .editorial ul,
  main .bloque .editorial ol,
  main .bloque .lista-texto{padding-left:1.15rem;margin-inline:0;list-style:disc}
  main .bloque .editorial p,
  main .bloque .descripcion-larga p{margin-inline:0}

  /* El titulo de cada seccion es un bloque en linea subrayado: para
     centrarlo hay que centrar su caja, y devolver la lista a la izquierda. */
  main .bloque .ficha-curso-seccion{text-align:center}
  main .bloque .ficha-curso-seccion ul{text-align:left}

  /* Las preguntas: enunciado a la izquierda y flecha a la derecha */
  /* Al poner el enunciado en fila desaparece la flecha del navegador,
     asi que se dibuja una propia que gira al abrir la respuesta. */
  .curso-pregunta summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;text-align:left}
  .curso-pregunta summary::marker,
  .curso-pregunta summary::-webkit-details-marker{display:none;content:""}
  .curso-pregunta summary::after{content:"";flex:none;width:.55rem;height:.55rem;
    border-right:2px solid var(--dorado);border-bottom:2px solid var(--dorado);
    transform:rotate(45deg);transition:transform .2s ease;margin-bottom:.2rem}
  .curso-pregunta[open] summary::after{transform:rotate(-135deg);margin-bottom:-.15rem}
}

/* Los datos del curso: una ficha ordenada, no pastillas en escalera */
@media (max-width:720px){
  .ficha-pastillas{display:grid;grid-template-columns:1fr;gap:0;margin:1.1rem 0 1.4rem;
    border:1px solid var(--linea);border-radius:12px;overflow:hidden;text-align:left}
  .ficha-pastillas li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
    min-width:0;padding:.7rem 1rem;border:0;border-radius:0;border-bottom:1px solid var(--linea)}
  .ficha-pastillas li:last-child{border-bottom:0}
  .ficha-pastillas strong{text-align:right}

  /* La tira de confianza, tambien como ficha */
  .tira-confianza{border:1px solid var(--linea);border-radius:12px;overflow:hidden}
  .tira-confianza li{padding:.9rem 1rem;border-bottom:1px solid var(--linea)}
  .tira-confianza li:last-child{border-bottom:0}

}

/* ===================================================================
   EL PIE, CENTRADO A CUALQUIER ANCHO
   Antes la marca tiraba a la izquierda, los contactos a la derecha y
   el aviso legal se quedaba solo en la esquina. Ahora va todo en una
   columna centrada, como el resto de la web.
   =================================================================== */
.pie-rejilla{grid-template-columns:1fr;justify-items:center;text-align:center;gap:1.6rem}
.pie-enlaces,.pie-contacto{align-items:center}
.pie-legal{justify-content:center;text-align:center;gap:.5rem}
.pie-legal p{width:100%}
.credito-geo{width:100%;text-align:center}
@media (min-width:760px){
  .pie-rejilla{grid-template-columns:1fr;align-items:center}
  .pie-enlaces{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.6rem 1.8rem}
  .pie-contacto{flex-direction:row;justify-content:center;gap:1.8rem}
}

/* La caratula del curso online es apaisada: en su tarjeta cabe entera */
.curso-tarjeta img{aspect-ratio:16/9}

/* El bloque de contacto ocupaba media pantalla en el computador porque
   ahi iba el mapa, que este sitio no tiene. Se estrecha y se centra,
   como el resto de secciones de la pagina. */
#contacto .contenedor{width:min(100% - 3rem,760px);text-align:center}
#contacto .datos{margin-inline:auto;text-align:left}
#contacto .acciones{justify-content:center}

/* ===================================================================
   EL CONTENEDOR MANDA
   Varios bloques llevan la clase "contenedor" y ademas la suya propia
   (la tira de confianza, la instructora, el aviso legal del pie...).
   Esa segunda regla ponia "margin: X 0" y, al ir despues en el archivo,
   borraba el "margin-inline:auto" que centra la caja: quedaban pegados
   al borde izquierdo en pantallas anchas. Esto lo devuelve al centro.
   =================================================================== */
.contenedor{margin-inline:auto}

/* --- "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}

/* La lupa de buscar no cabe en pantallas estrechas: ahi sobra,
   porque el buscador esta dentro de la tienda. */
@media(max-width:560px){.solo-ancha{display:none}}

/* ===================================================================
   BANNER DE CURSO — la llamada con foto al lado
   Fondo oscuro para que destaque del resto de la pagina, la foto con
   el mismo acercamiento lento que la portada.
   =================================================================== */
.banner-curso{background:#171310;color:var(--blanco);padding:clamp(2.5rem,5vw,4rem) 0;overflow:hidden}
.banner-curso-caja{display:grid;gap:clamp(1.6rem,4vw,3.5rem);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,25rem);max-width:66rem;margin-inline:auto}
.banner-curso-texto .antetitulo{color:var(--dorado-claro);margin-bottom:.8rem}
.banner-curso-texto h2{font-size:clamp(1.9rem,4vw,3rem);line-height:1.05;margin:0 0 .8rem}
.banner-curso-texto p{color:rgba(255,255,255,.82);max-width:34rem}
.banner-curso-texto .acciones{margin-top:1.6rem}
.banner-curso .boton{background:var(--dorado);border-color:var(--dorado);color:var(--blanco)}
.banner-curso .boton:hover{background:transparent;color:var(--blanco)}
.banner-curso-foto{margin:0;border-radius:14px;overflow:hidden;aspect-ratio:4/5}
.banner-curso-foto img{width:100%;height:100%;object-fit:cover;display:block;
  animation:heroe-acercar 34s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.banner-curso-foto img{animation:none}}
@media (max-width:760px){
  .banner-curso-caja{grid-template-columns:1fr;text-align:center}
  .banner-curso-texto{order:2}
  .banner-curso-texto p{margin-inline:auto}
  .banner-curso-texto .acciones{justify-content:center}
  .banner-curso-foto{order:1;aspect-ratio:16/11;max-width:26rem;margin-inline:auto}
  .banner-curso-foto img{object-position:center 28%}
}

/* ===================================================================
   LA PORTADA, COMO BANNER QUE CAMBIA
   Las diapositivas se apilan en la misma casilla y se cruzan con un
   fundido. Cada una lleva su foto y su propio acercamiento, que empieza
   de cero cada vez que le toca el turno.
   =================================================================== */
/* Una sola casilla a todo el ancho: las diapositivas se apilan dentro.
   Lleva las dos clases porque ".heroe.con-foto" (que pone display:flex)
   pesa mas que una sola clase y ganaria. */
.heroe.con-foto.heroe-carrusel{display:grid;grid-template-columns:minmax(0,1fr);padding:0;
  min-height:min(80vh,760px);align-items:stretch}
.heroe-carrusel > .heroe-diapo{
  grid-area:1/1;width:100%;position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;padding-block:clamp(4rem,10vw,7rem);
  opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s}
.heroe-carrusel > .heroe-diapo.activa{opacity:1;visibility:visible}

.heroe-diapo::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--foto);background-size:cover;background-position:50% 30%;
  transform-origin:52% 42%;
  animation:heroe-acercar 34s ease-in-out 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;
  background:
    linear-gradient(to left,rgba(16,12,10,.88) 0%,rgba(16,12,10,.76) 30%,rgba(16,12,10,.3) 60%,rgba(16,12,10,0) 86%),
    linear-gradient(to top,rgba(16,12,10,.5) 0%,rgba(16,12,10,0) 42%)}

.heroe-diapo .heroe-texto{max-width:none;display:grid;grid-template-columns:1fr minmax(0,33rem)}
.heroe-diapo .heroe-texto > *{grid-column:2}
.heroe-diapo h1,.heroe-diapo h2{font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.05;margin:0 0 .6rem}
/* Con las dos clases delante para ganarle a la regla de arriba. */
.heroe.con-foto .heroe-diapo .antetitulo{color:var(--dorado-claro)}
.heroe.con-foto .heroe-diapo p{color:rgba(255,255,255,.9)}

/* Los puntos para cambiar a mano */
.heroe-puntos{grid-area:1/1;align-self:end;justify-self:center;z-index:3;
  display:flex;gap:.6rem;margin-bottom:1.6rem}
.heroe-punto{width:2.2rem;height:.22rem;border:0;border-radius:2px;padding:0;cursor:pointer;
  background:rgba(255,255,255,.35);transition:background .25s ease}
.heroe-punto:hover{background:rgba(255,255,255,.6)}
.heroe-punto.activo{background:var(--dorado-claro)}
.heroe-punto:focus-visible{outline:2px solid var(--blanco);outline-offset:3px}

@media (max-width:760px){
  .heroe.con-foto.heroe-carrusel{min-height:min(86vh,660px)}
  .heroe-carrusel > .heroe-diapo{align-items:flex-end;text-align:center;
    padding-block:clamp(3rem,9vw,5rem)}
  .heroe-diapo::before{background-image:var(--foto-movil,var(--foto));background-position:50% 18%}
  .heroe-diapo::after{background:linear-gradient(to top,
    rgba(16,12,10,.94) 4%,rgba(16,12,10,.72) 34%,rgba(16,12,10,.15) 70%,rgba(16,12,10,0) 100%)}
  .heroe-diapo .heroe-texto{grid-template-columns:1fr;justify-items:center}
  .heroe-diapo .heroe-texto > *{grid-column:1;max-width:30rem}
  .heroe-diapo .acciones{justify-content:center}
  .heroe-puntos{margin-bottom:1rem}
}

/* ===================================================================
   EL BOTON DE WHATSAPP QUE VA FLOTANDO
   Abajo a la derecha en toda la web. En la pagina de venta del curso y
   dentro del aula no sale: alli estorbaria a la barra de compra y al
   reproductor, y ambas ya tienen su enlace de ayuda.
   Queda por debajo de los cajones (z-index 50) para no taparlos.
   =================================================================== */
.wasap{
  position:fixed;z-index:40;right:clamp(1rem,3vw,1.6rem);
  bottom:calc(clamp(1rem,3vw,1.6rem) + env(safe-area-inset-bottom,0px));
  width:3.4rem;height:3.4rem;border-radius:50%;
  display:grid;place-items:center;
  background:#25D366;color:#fff;
  box-shadow:0 6px 20px rgba(16,12,10,.28);
  transition:transform .2s ease,box-shadow .2s ease}
.wasap svg{width:1.9rem;height:1.9rem;display:block}
.wasap:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(16,12,10,.34);color:#fff}
.wasap:focus-visible{outline:3px solid var(--dorado);outline-offset:3px}
@media (max-width:560px){
  .wasap{width:3rem;height:3rem;right:.9rem;
    bottom:calc(.9rem + env(safe-area-inset-bottom,0px))}
  .wasap svg{width:1.7rem;height:1.7rem}
}
@media (prefers-reduced-motion:reduce){.wasap{transition:none}}

/* ===================================================================
   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}
}

/* Cuando una busqueda no encuentra nada, no se deja a la persona en un
   callejon: se le ofrece volver a la tienda entera. */
.vacio{text-align:center;padding:3rem 0}
.vacio p{margin:0 auto .6rem;max-width:30rem}
.vacio-ayuda{color:var(--cacao-suave);font-size:.92rem;margin-bottom:1.4rem!important}

/* ===================================================================
   LOS ENLACES QUE SALTAN DENTRO DE LA MISMA PAGINA
   La cabecera va pegada arriba y mide 77 px. Sin esto, cualquier salto
   (#buscador desde la lupa, "Lo quiero" hacia el precio, "Ir al
   contenido") deja el destino JUSTO DEBAJO de la cabecera, tapado: la
   persona cree que no pasó nada.
   =================================================================== */
html{scroll-padding-top:6.5rem}
@media (max-width:560px){html{scroll-padding-top:5.5rem}}

/* ===================================================================
   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}
}

/* ===================================================================
   SITIO PARA EL DEDO
   En pantalla tactil, los enlaces que son ACCIONES sueltas (quitar del
   carrito, ver la bolsa, moverse por el aula) necesitan alto suficiente
   para acertarles sin ampliar. Los enlaces dentro de un parrafo se
   quedan como estan: ahi lo que manda es la lectura.
   =================================================================== */
@media (max-width:820px), (pointer:coarse){
  .bolsa-datos a,
  .bolsa-precio .enlace,
  .linea-precio .enlace,
  .linea-nombre,
  .enlace-suave,
  .aula-nav a,
  .aula-enlace-flojo,
  .volver-bolsa,
  .curso-garantia-mas a,
  .cajon-menu a,
  .pie-enlaces a,
  .pie-contacto a,
  .categorias a{min-height:44px;display:inline-flex;align-items:center}

  /* Los mas y menos de la cantidad, mas cómodos */
  .cantidad-linea button{min-width:40px;min-height:40px}

  /* El enlace de ayuda de abajo, con aire alrededor */
  .aula-ayuda a,.curso-nota a{display:inline-block;padding:.4rem 0}
}

/* Los puntos del banner median 4 px de alto: imposibles de tocar con el
   dedo. Se ven igual, pero ahora cada uno tiene una zona sensible de
   24 px que no se ve. */
.heroe-punto{position:relative}
.heroe-punto::after{content:"";position:absolute;left:0;right:0;top:-11px;bottom:-11px}

/* Otros controles que se quedaban cortos en tactil */
@media (max-width:820px), (pointer:coarse){
  .tarjeta-boton{min-height:40px;display:inline-flex;align-items:center}
  .antetitulo a,
  .ficha-datos + p a,
  .aula-cabeza a,
  .aula-clase-mover a,
  .aula-volver{min-height:40px;display:inline-flex;align-items:center}
  .form-comprar + p a{min-height:44px;display:inline-flex;align-items:center}
  .heroe-puntos{gap:1rem}
}

/* El bloque de la cuenta en la pantalla de pago: su correo, bien visible,
   como el usuario con el que va a entrar a sus clases. */
.paso-cuenta .cuenta-correo{display:grid;gap:.2rem;margin:.2rem 0 1.1rem;
  padding:.8rem 1rem;background:var(--nacar);border-radius:10px}
.paso-cuenta .cuenta-correo span{font-family:var(--sans);font-size:.66rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--plata)}
.paso-cuenta .cuenta-correo strong{font-weight:600;overflow-wrap:anywhere}

/* --- 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 {
    position: sticky; bottom: 0; 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 }
}

/* --- Que "hidden" gane siempre -----------------------------------------
   El atributo hidden del HTML esconde con display:none, pero cualquier
   regla nuestra que ponga display (flex, grid, block...) lo pisa y el
   elemento se queda a la vista. Paso el 07-10-2026: el formulario de
   inscripcion del curso quedo abierto de forma permanente en la pagina
   de venta. Esto lo evita de raiz, en toda la hoja. */
[hidden] { display: none !important; }

/* 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}}