/* ============================================================================
   Formación Manipulador · CSS
   Arquetipo: Claro de confianza (variante sobria del 03/04 para una web de
   formación con público amplio: letra grande, mucho contraste, un color de marca).
   Efecto firma: el certificado en vivo del hero.
   Todo color sale de :root. Ningún hex fuera de este bloque.
   ============================================================================ */

@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/atkinson-hyperlegible-next.woff2) format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url(/fonts/bricolage-grotesque.woff2) format('woff2'); }

/* 1 · TOKENS ------------------------------------------------------------ */
:root {
  --fondo:        #FFFFFF;
  --fondo-2:      #F1F6F5;
  --papel:        #FFFDF7;
  --tinta:        #12252B;
  --primario:     #0E5A61;
  --primario-2:   #0A454B;
  --primario-suave: #DCECEA;
  --cta:          #CF4227;   /* tomate un punto más oscuro: blanco encima da 4,7:1 (AA) */
  --cta-2:        #BC3A21;
  --cta-texto:    #FFFFFF;
  --texto:        #12252B;
  --texto-suave:  #3F5257;
  --texto-tenue:  #5D6E72;
  --borde:        #D5E1DF;
  --borde-fuerte: #A9C2BF;
  --sombra:       rgba(18, 37, 43, .12);
  --marca-pendiente: #FFE7A3;
  --ok:           #1D7A4B;

  --sans:    "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Bricolage Grotesque", var(--sans);

  --ancho-max:      1180px;
  --ancho-estrecho: 760px;
  --pad-x:          clamp(18px, 5vw, 56px);
  --pad-seccion:    clamp(64px, 9vw, 120px);
  --gap:            clamp(18px, 3vw, 32px);
  --card-pad:       clamp(20px, 3vw, 32px);
  --radio:          16px;
  --radio-sm:       10px;
  --alto-nav:       68px;
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2 · RESET ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
body {
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  color: var(--texto); background: var(--fondo);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font: inherit; color: inherit; }
a { color: var(--primario); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:where(ul, ol) { list-style: none; padding: 0; }
p { text-wrap: pretty; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; line-height: 1.1; letter-spacing: -.015em; font-weight: 700; color: var(--tinta); }
strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--cta); outline-offset: 3px; border-radius: 4px; }
:target { scroll-margin-top: calc(var(--alto-nav) + 24px); }
mark.pendiente { background: var(--marca-pendiente); color: var(--tinta); padding: 0 .25em; border-radius: 4px; }

/* 3 · UTILIDADES --------------------------------------------------------- */
.contenedor { width: 100%; max-width: var(--ancho-max); margin-inline: auto; padding-inline: var(--pad-x); }
.contenedor--estrecho { max-width: var(--ancho-estrecho); }
.contenedor--medio { max-width: 1040px; }
.seccion { position: relative; padding-block: var(--pad-seccion); }
.seccion--alt { background: var(--fondo-2); }
.seccion--tinta { background: var(--primario-2); color: var(--papel); }
.seccion--tinta h2, .seccion--tinta .titular-l { color: var(--papel); }
.salto-contenido { position: fixed; top: -100px; left: 1rem; z-index: 999; padding: .7rem 1.2rem; border-radius: 8px; background: var(--tinta); color: var(--papel); font-weight: 700; }
.salto-contenido:focus { top: 1rem; }
.icono { width: 20px; height: 20px; }

/* 4 · TIPOGRAFÍA --------------------------------------------------------- */
.titular-xl { font-size: clamp(2.35rem, 5.6vw, 4.1rem); line-height: 1.02; max-width: 15ch; font-weight: 800; }
.titular-l  { font-size: clamp(1.75rem, 3.6vw, 2.6rem); max-width: 24ch; margin-bottom: .9rem; }
.titular-m  { font-size: clamp(1.18rem, 1.9vw, 1.38rem); line-height: 1.2; }
.antetitulo { display: inline-block; font-weight: 700; font-size: .86rem; letter-spacing: .08em; text-transform: uppercase; color: var(--primario); margin-bottom: .9rem; }
.entradilla { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--texto-suave); max-width: 62ch; margin-bottom: 2rem; }

/* 5 · COMPONENTES -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: .8rem 1.6rem; border-radius: 12px;
  font-weight: 700; font-size: 1.02rem; text-decoration: none; text-align: center;
  transition: transform .25s var(--ease-out), background-color .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s;
}
.btn--cta { background: var(--cta); color: var(--cta-texto); box-shadow: 0 6px 18px -8px var(--cta); }
.btn--fantasma { border: 2px solid var(--borde-fuerte); color: var(--tinta); background: var(--fondo); }
.btn--bloque { width: 100%; }
.btn--pequeno { min-height: 42px; padding: .5rem 1.1rem; font-size: .95rem; }
.nav a.btn--cta, .menu-movil a.btn--cta { color: var(--cta-texto); }
@media (hover: hover) and (pointer: fine) {
  .btn--cta:hover { background: var(--cta-2); transform: translateY(-2px); }
  .btn--fantasma:hover { border-color: var(--primario); }
}

.tarjeta { background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--card-pad); }
a.tarjeta { display: block; text-decoration: none; color: var(--texto); transition: transform .3s var(--ease-out), border-color .3s, box-shadow .3s; }
@media (hover: hover) and (pointer: fine) {
  a.tarjeta:hover { transform: translateY(-3px); border-color: var(--primario); box-shadow: 0 14px 30px -18px var(--sombra); }
}
.rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: minmax(0, 1fr); }

/* FAQ sin JavaScript */
.faq { border-bottom: 1px solid var(--borde); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-family: var(--sans); font-size: 1.08rem; font-weight: 700; letter-spacing: 0; }
.faq summary::after { content: "+"; font-size: 1.6rem; line-height: 1; color: var(--primario); transition: transform .3s var(--ease-out); }
.faq[open] summary::after { transform: rotate(45deg); }
.faq-cuerpo { padding-bottom: 1.2rem; color: var(--texto-suave); max-width: 66ch; }

/* 6 · SECCIONES ---------------------------------------------------------- */
/* Nav */
.nav { position: sticky; top: 0; z-index: 100; background: var(--fondo); border-bottom: 1px solid var(--borde); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--alto-nav); }
.nav-logo { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--tinta); text-decoration: none; }
.nav-logo-icono { color: var(--primario); }
.nav-enlaces { display: none; align-items: center; gap: 1.6rem; }
.nav-enlaces a:not(.btn) { color: var(--tinta); font-weight: 600; text-decoration: none; }
.nav-enlaces a[aria-current="page"]:not(.btn) { color: var(--primario); text-decoration: underline; }
.nav-burger { display: grid; gap: 5px; padding: 10px; }
.nav-burger span { display: block; width: 24px; height: 2px; background: var(--tinta); border-radius: 2px; transition: transform .3s, opacity .3s; }
.menu-movil { display: none; position: fixed; inset: var(--alto-nav) 0 auto 0; z-index: 99; background: var(--fondo); border-bottom: 1px solid var(--borde); padding: 1rem var(--pad-x) 1.5rem; flex-direction: column; gap: .2rem; }
.menu-movil a:not(.btn) { padding: .8rem 0; font-weight: 700; color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--borde); }
.menu-movil .btn { margin-top: 1rem; }
.menu-abierto .menu-movil { display: flex; }
.menu-abierto .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-abierto .nav-burger span:nth-child(2) { opacity: 0; }
.menu-abierto .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero */
.hero { padding-block: clamp(36px, 6vw, 84px) clamp(56px, 8vw, 110px); background:
  radial-gradient(60% 70% at 100% 0%, var(--primario-suave), transparent 70%), var(--fondo); }
.hero-rejilla { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero .entradilla { margin-top: 1.1rem; margin-bottom: 1.6rem; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-sellos { display: grid; gap: .5rem; margin-top: 1.6rem; color: var(--texto-suave); font-weight: 600; }
.hero-sellos li { display: flex; align-items: center; gap: .55rem; }
.hero-sellos .icono { color: var(--ok); }

/* EFECTO FIRMA · el certificado en vivo */
.hero-visual { position: relative; display: grid; gap: 1rem; }
.hero-escena { border-radius: 20px; overflow: hidden; background: var(--papel); border: 1px solid var(--borde); box-shadow: 0 24px 50px -34px var(--sombra); }
.hero-escena img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
/* El certificado tapa la esquina de abajo a la izquierda de la escena: la cocinera queda a la vista. */
.hero-visual .certificado { width: min(84%, 410px); justify-self: start; margin-top: -24%; margin-left: -4%; }
.certificado {
  position: relative; background: var(--papel); color: var(--tinta);
  border-radius: 14px; padding: clamp(22px, 3.2vw, 34px);
  border: 1px solid var(--borde-fuerte);
  box-shadow: 0 30px 60px -32px var(--sombra), 0 2px 0 var(--borde);
  background-image:
    repeating-radial-gradient(circle at 0 0, transparent 0 9px, var(--primario-suave) 9px 10px),
    repeating-radial-gradient(circle at 100% 100%, transparent 0 9px, var(--primario-suave) 9px 10px);
  background-size: 100% 100%;
  background-blend-mode: multiply;
  transform: rotate(-1.2deg);
  transition: transform .5s var(--ease-out);
}
.certificado::before { content: ""; position: absolute; inset: 10px; border: 2px solid var(--primario); border-radius: 8px; pointer-events: none; opacity: .55; }
.certificado > * { position: relative; }
@media (hover: hover) and (pointer: fine) { .certificado:hover { transform: rotate(0deg) translateY(-4px); } }
.certificado-etiqueta { position: absolute; top: -12px; right: 18px; background: var(--tinta); color: var(--papel); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px; }
.certificado-cabeza { display: flex; align-items: center; gap: .9rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--borde-fuerte); }
.certificado-sello { color: var(--primario); }
.certificado-tipo { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-tenue); font-weight: 700; }
.certificado-curso { font-family: var(--display); font-size: 1.3rem; font-weight: 800; line-height: 1.1; }
.certificado-otorga { margin-top: 1.1rem; font-size: .9rem; color: var(--texto-tenue); }
.certificado-nombre { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; line-height: 1.15; color: var(--primario-2); margin: .2rem 0 .5rem; min-height: 1.2em; overflow-wrap: anywhere; transition: color .3s; }
.certificado-nombre.is-ejemplo { color: var(--texto-tenue); }
.certificado-texto { font-size: .95rem; color: var(--texto-suave); }
.certificado-pie { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-top: 1.2rem; }
.certificado-pie dl { display: grid; gap: .3rem; font-size: .85rem; }
.certificado-pie dt { color: var(--texto-tenue); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.certificado-pie dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.certificado-qr { color: var(--tinta); }
.certificado-revisor { margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed var(--borde-fuerte); font-size: .8rem; color: var(--texto-tenue); }
.certificado-prueba { background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: .9rem 1rem; }
.certificado-prueba label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: .5rem; }
.certificado-prueba-campos { display: grid; gap: .5rem; }
.certificado-prueba input, .certificado-prueba select { width: 100%; min-width: 0; min-height: 46px; padding: .6rem .8rem; border: 2px solid var(--borde-fuerte); border-radius: 8px; background: var(--fondo); }
.certificado-prueba input:focus, .certificado-prueba select:focus { outline: none; border-color: var(--primario); }
.certificado.is-latido { animation: latido .6s var(--ease-out); }
@keyframes latido { 40% { transform: rotate(-1.2deg) scale(1.015); } }

/* Pasos */
.pasos { margin-top: 2rem; counter-reset: paso; }
.paso { background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--card-pad); }
.paso-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--primario); color: var(--papel); font-family: var(--display); font-weight: 800; font-size: 1.2rem; margin-bottom: 1rem; }
.paso h3 { margin-bottom: .5rem; }
.paso p { color: var(--texto-suave); }

/* Sectores */
.sector h3 { margin-bottom: .4rem; color: var(--primario-2); }
.sector p { color: var(--texto-suave); }
.sector::after { content: "Ver el curso →"; display: inline-block; margin-top: .9rem; font-weight: 700; color: var(--cta-2); }

/* Temario */
.temario { display: grid; gap: .1rem; counter-reset: modulo; margin-top: 1.2rem; }
.temario li { counter-increment: modulo; border-bottom: 1px solid var(--borde); }
.temario a { display: flex; align-items: baseline; gap: 1rem; padding: .95rem 0; font-weight: 600; color: var(--tinta); text-decoration: none; }
.temario a::before { content: counter(modulo, decimal-leading-zero); font-family: var(--display); font-weight: 800; color: var(--primario); min-width: 2ch; }
@media (hover: hover) and (pointer: fine) { .temario a:hover { color: var(--primario); } }

/* Precios */
.precios { margin-top: 2rem; }
.seccion--tinta .precio { background: var(--primario); border-color: transparent; color: var(--papel); }
.seccion--tinta .precio h3 { color: var(--papel); }
.seccion--tinta .precio p { color: var(--papel); opacity: .9; }
.precio { display: flex; flex-direction: column; gap: .7rem; }
.precio .btn { margin-top: auto; }
.precio-cifra { font-family: var(--display); font-size: clamp(2.2rem, 4vw, 2.8rem); font-weight: 800; line-height: 1; }
.precio-cifra--texto { font-size: clamp(1.6rem, 3vw, 2rem); }
.seccion--tinta .precio--destacado { background: var(--papel); color: var(--tinta); }
.seccion--tinta .precio--destacado h3, .seccion--tinta .precio--destacado p { color: var(--tinta); opacity: 1; }
.seccion--tinta .precio--destacado .precio-cifra { color: var(--primario-2); }
.seccion--tinta .btn--fantasma { background: transparent; color: var(--papel); border-color: var(--papel); }

/* Validez */
.cita { margin: 1.5rem 0 2rem; padding: 1.4rem 1.6rem; border-left: 5px solid var(--primario); background: var(--fondo-2); border-radius: 0 var(--radio-sm) var(--radio-sm) 0; }
.cita p { font-family: var(--display); font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 700; line-height: 1.3; color: var(--tinta); }
.cita footer { margin-top: .7rem; font-size: .9rem; color: var(--texto-suave); }
.validez h3 { margin: 1.6rem 0 .4rem; }
.validez p { color: var(--texto-suave); }

/* Quién */
.quien { margin-top: 1.4rem; }
.quien h3 { margin-bottom: .5rem; }
.quien p { color: var(--texto-suave); }

/* Cierre */
.cierre-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; }

/* Pie */
.pie { background: var(--tinta); color: var(--papel); padding-block: clamp(48px, 6vw, 72px) 1.5rem; font-size: .95rem; }
.pie a { color: var(--papel); }
.pie .nav-logo { color: var(--papel); }
.pie .nav-logo-icono { color: var(--primario-suave); }
.pie-rejilla { display: grid; gap: 2rem; }
.pie-marca p { margin-top: .8rem; opacity: .85; max-width: 46ch; }
.pie-aviso { font-size: .86rem; }
.pie-col { display: grid; gap: .45rem; align-content: start; }
.pie-col a { text-decoration: none; opacity: .9; }
.pie-col a:hover { text-decoration: underline; opacity: 1; }
.pie-titulo { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; opacity: .7; margin-bottom: .2rem; }
.pie-base { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--texto-suave); font-size: .82rem; opacity: .75; }
.pie mark.pendiente { color: var(--tinta); }


/* Huecos de imagen mientras no existe el archivo */
.img-falta { display: block; aspect-ratio: 4 / 3; background: var(--primario-suave); border-radius: 12px; }

/* Antetítulo sobre tinta */
.antetitulo--claro { color: var(--primario-suave); }

/* Pasos con ilustración */
.paso { display: flex; flex-direction: column; }
.paso-imagen { margin: -.4rem auto .6rem; width: min(220px, 70%); }
.paso-imagen img { width: 100%; height: auto; border-radius: 50%; background: var(--papel); }

/* Sectores con imagen arriba */
.sector { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.sector-imagen { background: var(--papel); border-bottom: 1px solid var(--borde); }
.sector-imagen img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { a.sector:hover .sector-imagen img { transform: scale(1.04); } }
.sector-texto { padding: 1.1rem 1.3rem 1.3rem; }
.sector::after { margin: 0 1.3rem 1.3rem; }

/* Pregunta de prueba */
.prueba-rejilla { display: grid; gap: var(--gap); align-items: start; }
.pregunta fieldset { border: 0; padding: 0; display: grid; gap: .6rem; }
.pregunta legend { font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.3; margin-bottom: .6rem; color: var(--tinta); }
.opcion { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem .95rem; border: 2px solid var(--borde); border-radius: 12px; cursor: pointer; transition: border-color .2s, background-color .2s; }
.opcion input { width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--primario); flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) { .opcion:hover { border-color: var(--borde-fuerte); } }
.opcion.is-correcta { border-color: var(--ok); background: var(--fondo-2); }
.opcion.is-incorrecta { border-color: var(--cta); }
.pregunta-solucion { margin-top: 1rem; }
.pregunta-solucion summary { cursor: pointer; font-weight: 700; color: var(--primario); }
.pregunta-solucion p { margin-top: .6rem; color: var(--texto-suave); }

/* Qué es y quién lo necesita */
.que-es-rejilla { display: grid; gap: var(--gap); align-items: center; }
.puestos { display: grid; gap: .55rem; background: var(--fondo-2); border-radius: var(--radio); padding: var(--card-pad); }
.puestos li { display: flex; gap: .6rem; align-items: baseline; font-weight: 600; }
.puestos li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--primario); flex-shrink: 0; transform: translateY(-1px); }

/* Precio: sello */
.precio-sello { align-self: flex-start; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--cta); color: var(--cta-texto); padding: .25rem .6rem; border-radius: 999px; }

/* Razones */
.razones { margin-top: 1.8rem; }
.razon { background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--card-pad); display: flex; flex-direction: column; gap: .5rem; }
.razon p { color: var(--texto-suave); }
.razon-icono { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--primario-suave); color: var(--primario-2); margin-bottom: .4rem; }
.razon--cta { background: var(--primario-2); border-color: transparent; justify-content: center; }
.razon--cta h3 { color: var(--papel); }
.razon--cta p { color: var(--papel); opacity: .9; margin-bottom: .6rem; }

/* Recursos */
.recursos-rejilla { display: grid; gap: var(--gap); align-items: center; }
.recursos-imagen img { width: 100%; height: auto; border-radius: 20px; border: 1px solid var(--borde); }
.recursos-lista { display: grid; gap: .1rem; }
.recursos-lista li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--borde); padding: .9rem 0; }
.recursos-lista a { font-weight: 700; color: var(--tinta); text-decoration: none; }
.recursos-lista a::after { content: "\00a0→"; color: var(--cta-2); }
.recursos-lista span { font-size: .85rem; color: var(--texto-tenue); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .recursos-lista a:hover { color: var(--primario); } }

/* CTA fija en móvil: aparece al pasar el hero y se esconde en el cierre */
.cta-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem var(--pad-x) calc(.7rem + env(safe-area-inset-bottom)); background: var(--fondo); border-top: 1px solid var(--borde); box-shadow: 0 -10px 24px -16px var(--sombra); transform: translateY(110%); transition: transform .35s var(--ease-out); }
.cta-movil.is-visible { transform: none; }
.cta-movil p { display: grid; line-height: 1.2; }
.cta-movil span { font-size: .85rem; color: var(--texto-suave); }
.cta-movil .btn { min-height: 46px; }


/* ===================== PÁGINAS INTERIORES ===================== */
.pagina { padding-block: clamp(28px, 4vw, 48px) var(--pad-seccion); }
.pagina-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); }  /* minmax(0,…): sin él, una tabla ancha estira la columna en móvil */
.migas ol { display: flex; flex-wrap: wrap; gap: .3rem .5rem; font-size: .88rem; color: var(--texto-tenue); margin-bottom: 1.2rem; }
.migas li + li::before { content: "/"; margin-right: .5rem; color: var(--borde-fuerte); }
.migas a { color: var(--texto-suave); }
.pagina h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.06; font-weight: 800; max-width: 22ch; }
.resumen { margin: 1.1rem 0 1.2rem; padding: 1.1rem 1.3rem; border-radius: var(--radio-sm); background: var(--fondo-2); border-left: 5px solid var(--primario); font-size: 1.08rem; color: var(--tinta); max-width: 70ch; }
.resumen strong { color: var(--primario-2); }
.ficha-revision { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .88rem; color: var(--texto-tenue); margin-bottom: 1.6rem; }
.ficha-revision .icono { color: var(--primario); width: 18px; height: 18px; }
.prosa { max-width: 72ch; }
.prosa > * + * { margin-top: 1rem; }
.prosa h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-top: 2.6rem; scroll-margin-top: calc(var(--alto-nav) + 20px); }
.prosa h3 { font-size: clamp(1.15rem, 2vw, 1.3rem); margin-top: 1.8rem; }
.prosa p, .prosa li { color: var(--texto-suave); }
.prosa ul, .prosa ol { padding-left: 1.3rem; display: grid; gap: .45rem; }
.prosa ul { list-style: disc; }
.prosa ol { list-style: decimal; }
.prosa li::marker { color: var(--primario); font-weight: 700; }
.prosa strong { color: var(--tinta); }
.prosa .aviso { padding: 1rem 1.2rem; border-radius: var(--radio-sm); background: var(--marca-pendiente); color: var(--tinta); }
.prosa .clave { padding: 1rem 1.2rem; border-radius: var(--radio-sm); border: 2px solid var(--primario-suave); background: var(--fondo); }
.tabla-envoltorio { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio-sm); }
.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 520px; }
.tabla th, .tabla td { text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla th { background: var(--fondo-2); color: var(--tinta); font-weight: 700; }
.tabla tr:last-child td { border-bottom: 0; }
.indice { position: sticky; top: calc(var(--alto-nav) + 20px); align-self: start; background: var(--fondo-2); border-radius: var(--radio); padding: 1.1rem 1.2rem; display: none; }
.indice p { font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--primario); margin-bottom: .6rem; }
.indice ol { display: grid; gap: .45rem; font-size: .93rem; }
.indice a { color: var(--texto-suave); text-decoration: none; }
.indice a:hover { color: var(--primario); }
.minitest { margin-top: 2.6rem; }
.minitest > h2 { margin-bottom: 1rem; }
.minitest .pregunta + .pregunta { margin-top: 1rem; }
.fuentes { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--borde); font-size: .9rem; }
.fuentes h2 { font-size: 1.1rem; margin-bottom: .6rem; }
.fuentes ul { display: grid; gap: .4rem; padding-left: 1.1rem; list-style: disc; color: var(--texto-tenue); }
.nav-modulos { display: grid; gap: .8rem; margin-top: 2.4rem; }
.nav-modulos a { display: grid; gap: .2rem; padding: 1rem 1.2rem; border: 1px solid var(--borde); border-radius: var(--radio-sm); text-decoration: none; color: var(--tinta); font-weight: 700; }
.nav-modulos span { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-tenue); }
.nav-modulos .modulo-siguiente { text-align: right; border-color: var(--primario); }
@media (hover: hover) and (pointer: fine) { .nav-modulos a:hover { border-color: var(--primario); background: var(--fondo-2); } }
.caja-cta { margin-top: 2.6rem; padding: clamp(22px, 3vw, 32px); border-radius: var(--radio); background: var(--primario-2); color: var(--papel); display: grid; gap: .7rem; justify-items: start; }
.caja-cta-titulo { font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.15; }
.caja-cta p:not(.caja-cta-titulo) { opacity: .92; }
.figura { margin: 1.6rem 0; }
.figura img { width: 100%; height: auto; border-radius: var(--radio); border: 1px solid var(--borde); }
.figura figcaption { font-size: .85rem; color: var(--texto-tenue); margin-top: .5rem; }
@media (min-width: 760px) { .nav-modulos { grid-template-columns: 1fr 1fr; } .nav-modulos .modulo-siguiente:only-child { grid-column: 2; } }
@media (min-width: 1100px) { .pagina-rejilla.con-indice { grid-template-columns: minmax(0, 1fr) 260px; } .indice { display: block; } }

/* EXAMEN, CERTIFICADO Y VERIFICACIÓN ----------------------------------- */
.texto-suave { color: var(--texto-suave); }
.examen { margin-block: 2rem 3rem; box-shadow: 0 18px 40px -28px var(--sombra); }
.examen-paso { display: grid; gap: 1.1rem; }
.examen-paso > .titular-m { margin-bottom: -.4rem; }
.campo { display: grid; gap: .4rem; }
.campo > span { font-weight: 700; font-size: .95rem; }
.campo input, .campo select { width: 100%; min-width: 0; min-height: 50px; padding: .65rem .9rem; border: 2px solid var(--borde-fuerte); border-radius: var(--radio-sm); background: var(--fondo); }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--primario); box-shadow: 0 0 0 4px var(--primario-suave); }
.examen-paso .btn { justify-self: start; }
.examen-nota { font-size: .92rem; color: var(--texto-tenue); }
.examen-error { padding: .8rem 1rem; border-radius: var(--radio-sm); border-left: 4px solid var(--cta); background: var(--fondo-2); color: var(--tinta); font-weight: 700; }
.examen-progreso { position: sticky; top: calc(var(--alto-nav) + 8px); z-index: 5; display: grid; gap: .45rem; padding: .7rem .9rem; border-radius: var(--radio-sm); background: var(--papel); border: 1px solid var(--borde); font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; }
.examen-progreso .barra { height: 8px; border-radius: 99px; background: var(--primario-suave); overflow: hidden; }
.examen-progreso .barra i { display: block; height: 100%; width: 0; background: var(--primario); border-radius: inherit; transition: width .3s var(--ease-out); }
.examen-lista { display: grid; gap: 1.6rem; }
.examen-pregunta fieldset { border: 0; padding: 0; display: grid; gap: .55rem; }
.examen-pregunta legend { font-family: var(--display); font-weight: 700; font-size: 1.1rem; line-height: 1.3; margin-bottom: .55rem; color: var(--tinta); }
.examen-pregunta legend span { color: var(--primario); font-variant-numeric: tabular-nums; }
.examen-pregunta.is-pendiente .opcion { border-color: var(--cta); }
.examen-pregunta .opcion:has(input:checked) { border-color: var(--primario); background: var(--fondo-2); }
.resultado-nota { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.15; color: var(--cta-2); margin-bottom: .6rem; }
.resultado-nota--ok { color: var(--ok); }
[data-resultado], [data-cert-listo], [data-verificar-resultado] { display: grid; gap: 1rem; }
[data-resultado] .btn, [data-cert-listo] .btn { justify-self: start; }
.casilla { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; color: var(--texto-suave); }
.casilla input { width: 20px; height: 20px; margin-top: .2rem; accent-color: var(--primario); flex-shrink: 0; }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.fallos { list-style: decimal; padding-left: 1.3rem; display: grid; gap: .9rem; }
.fallos span { color: var(--texto-suave); }
.fallos .fallo-modulo { font-weight: 700; color: var(--primario); font-size: .92rem; }
.cert-datos { display: grid; gap: .1rem; border: 1px solid var(--borde); border-radius: var(--radio-sm); overflow: hidden; }
.cert-datos div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: .65rem 1rem; background: var(--fondo); }
.cert-datos div:nth-child(odd) { background: var(--fondo-2); }
.cert-datos dt { color: var(--texto-tenue); font-weight: 700; font-size: .9rem; }
.cert-datos dd { font-weight: 700; overflow-wrap: anywhere; }
.cert-muestra { display: grid; gap: 1rem; justify-items: start; margin-block: 2rem 2.5rem; padding: clamp(18px, 4vw, 40px); border-radius: var(--radio); background: var(--fondo-2); }
.cert-muestra .certificado, .cert-muestra .certificado-prueba { width: 100%; max-width: 560px; }
.verificar-form { display: grid; gap: 1rem; }
[data-verificar-resultado]:not(:empty) { margin-top: 1.5rem; }
.bono { border-top: 1px solid var(--borde); padding-top: 1rem; }
.bono summary { cursor: pointer; font-weight: 700; color: var(--primario); }
.bono form { margin-top: 1rem; }
@media (min-width: 560px) { .verificar-form { grid-template-columns: 1fr auto; align-items: end; } }

/* 7 · REVEAL con su red de seguridad (gotcha A.3) ------------------------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out) var(--retardo, 0ms), transform .6s var(--ease-out) var(--retardo, 0ms); }
.reveal.is-visible { opacity: 1; transform: none; }
html:not(.is-ready) .reveal { opacity: 1; transform: none; }
.reveal-forzado .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* 8 · RESPONSIVE -------------------------------------------------------- */
@media (min-width: 560px) {
  .certificado-prueba-campos { grid-template-columns: 1.4fr 1fr; }
}
@media (min-width: 760px) {
  .rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla--3, .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie-rejilla { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}
@media (min-width: 980px) {
  .nav-enlaces { display: flex; }
  .nav-burger { display: none; }
  .menu-movil { display: none !important; }
  .rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rejilla--4 .sector-texto { padding: 1rem 1.1rem 1.1rem; }
  .rejilla--4 .sector::after { margin: 0 1.1rem 1.1rem; }
  .hero-rejilla { grid-template-columns: 1.1fr .9fr; }
  .temario { grid-template-columns: repeat(2, 1fr); column-gap: 3rem; }
  .prueba-rejilla { grid-template-columns: .9fr 1.1fr; }
  .que-es-rejilla { grid-template-columns: 1.15fr .85fr; }
  .recursos-rejilla { grid-template-columns: 1fr 1fr; }
  .cta-movil { display: none; }
  .hero-visual .certificado { margin-top: -30%; margin-left: -10%; }
}

/* 9 · REDUCED MOTION: solo lo intrusivo (aquí no hay nada intrusivo) ------ */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* 10 · IMPRESIÓN -------------------------------------------------------- */
@media print { .nav, .menu-movil, .pie, .hero-acciones, .certificado-prueba { display: none; } }
/* Carteles y tablas para imprimir: en una página con .imprimible, solo se imprime eso */
.botones-imprimir { display: flex; flex-wrap: wrap; gap: .7rem; margin-block: 1rem; }
.imprimible { border: 2px solid var(--primario); border-radius: var(--radio); padding: var(--card-pad); background: var(--fondo); margin-block: 1.5rem; }
@media print {
  @page { margin: 12mm; }
  /* display:none y no visibility:hidden: lo oculto con visibility sigue ocupando sitio y salen hojas en blanco */
  body:has(.imprimible) > :not(main),
  body:has(.imprimible) .indice,
  body:has(.imprimible) .pagina-rejilla > div > :not(.prosa),
  body:has(.imprimible) .prosa > :not(.imprimible) { display: none !important; }
  body:has(.imprimible) .pagina, body:has(.imprimible) .contenedor { padding: 0; max-width: none; }
  body:has(.imprimible) .pagina-rejilla { display: block; }
  body:has(.imprimible) .prosa { max-width: none; }
  body:has(.imprimible) .imprimible { margin: 0; border: 0; padding: 0; }
  .no-imprimir { display: none !important; }
}

body.con-cta-movil { padding-bottom: 80px; }
@media (min-width: 980px) { body.con-cta-movil { padding-bottom: 0; } }

/* APPCC · fichas de autocontrol para imprimir (/appcc/plantillas/) ------- */
.appcc-ficha > * + * { margin-top: .9rem; }
.appcc-ficha-campos { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; font-size: .92rem; font-weight: 700; color: var(--tinta); }
.appcc-ficha-campos span { flex: 1 1 11rem; padding-bottom: 1.3rem; border-bottom: 1px solid var(--borde-fuerte); }
.appcc-tabla { font-size: .85rem; }
.appcc-tabla th, .appcc-tabla td { border: 1px solid var(--borde-fuerte); }
.appcc-tabla th { line-height: 1.25; }
.appcc-tabla tbody td { height: 2.4rem; }
.appcc-tabla--alta tbody td { height: 3.6rem; }
.appcc-ficha-nota { font-size: .85rem; color: var(--texto-tenue); }

@media print {
  /* Varias fichas en una página: cada .imprimible con .salto empieza hoja nueva */
  .salto { break-before: page; }
  .appcc-ficha .tabla-envoltorio { overflow: visible; border-color: var(--tinta); }
  .appcc-tabla { min-width: 0; font-size: 8.5pt; table-layout: fixed; }
  .appcc-tabla th, .appcc-tabla td { padding: 3pt 4pt; border-color: var(--tinta); }
  .appcc-tabla tbody td { height: 9mm; }
  .appcc-tabla--alta tbody td { height: 16mm; }
  .appcc-tabla tr { break-inside: avoid; }
  .appcc-ficha-campos span { border-bottom-color: var(--tinta); }
}

/* ALÉRGENOS · cartel y tabla para imprimir --------------------------------- */
/* Cartel A4 (/alergenos/cartel-para-imprimir/) */
.alergenos-cartel { text-align: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.imprimible.alergenos-cartel .titular-m { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 4.4vw, 2.4rem); line-height: 1.05; color: var(--primario-2); }
.imprimible .alergenos-cartel-aviso { max-width: 32ch; margin: .7rem auto 1.4rem; font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 2.6vw, 1.5rem); line-height: 1.25; color: var(--tinta); }
.imprimible .alergenos-rejilla { list-style: none; padding: 0; margin: 0; counter-reset: alergeno; display: grid; grid-template-columns: 1fr; gap: .55rem; text-align: left; }
.imprimible .alergenos-rejilla li { counter-increment: alergeno; display: grid; grid-template-columns: auto 1fr; align-items: center; align-content: center; column-gap: .7rem; padding: .55rem .75rem; border: 2px solid var(--primario-suave); border-radius: var(--radio-sm); color: var(--texto-suave); }
.imprimible .alergenos-rejilla li::before { content: counter(alergeno); grid-row: 1 / span 2; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 2px solid var(--primario); color: var(--primario-2); font-family: var(--display); font-weight: 800; font-size: 1rem; }
.imprimible .alergenos-rejilla strong { font-family: var(--display); font-size: 1.1rem; line-height: 1.15; color: var(--tinta); }
.imprimible .alergenos-rejilla span { font-size: .86rem; line-height: 1.3; }
.imprimible .alergenos-cartel-pie { margin-top: 1.3rem; font-weight: 700; color: var(--tinta); }
.imprimible .alergenos-cartel-norma { margin-top: .6rem; font-size: .8rem; color: var(--texto-tenue); }
.alergenos-linea { display: inline-block; width: min(100%, 15rem); height: 1.3em; border-bottom: 2px solid var(--tinta); vertical-align: bottom; }
.alergenos-linea--corta { width: 6.5rem; }
@media (min-width: 520px) { .imprimible .alergenos-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Tabla para rellenar (/alergenos/tabla/) */
.alergenos-hoja { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.imprimible.alergenos-hoja .titular-m { font-family: var(--display); font-weight: 800; color: var(--primario-2); }
.imprimible .alergenos-hoja-datos { margin: .6rem 0 1rem; font-size: .92rem; line-height: 2.2; color: var(--tinta); }
.alergenos-campo { display: inline-block; white-space: nowrap; margin-right: .8rem; }
.alergenos-campo .alergenos-linea { width: 10rem; }
.alergenos-campo .alergenos-linea--corta { width: 6.5rem; }
.alergenos-tabla { table-layout: fixed; min-width: 500px; font-size: .85rem; }
.alergenos-tabla th, .alergenos-tabla td { border: 1px solid var(--borde-fuerte); padding: .3rem .25rem; }
.imprimible .alergenos-tabla tbody td { height: 2.3rem; border-bottom: 1px solid var(--borde-fuerte); }
.alergenos-tabla thead th { vertical-align: bottom; text-align: center; font-size: .76rem; line-height: 1.1; }
.alergenos-tabla thead th:first-child { width: 28%; text-align: left; padding: .4rem .5rem; }
.alergenos-tabla thead th span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.imprimible .alergenos-leyenda { margin-top: .7rem; font-size: .8rem; line-height: 1.4; color: var(--texto-suave); text-align: left; }

@media print {
  .alergenos-cartel { font-size: 11pt; }
  .imprimible.alergenos-cartel .titular-m { font-size: 30pt; }
  .imprimible .alergenos-cartel-aviso { max-width: none; margin: 4mm 0 8mm; font-size: 20pt; }
  .imprimible .alergenos-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4.5mm 4mm; }
  .imprimible .alergenos-rejilla li { padding: 3.5mm 4mm; column-gap: 4mm; break-inside: avoid; }
  .imprimible .alergenos-rejilla li::before { width: 10mm; height: 10mm; font-size: 13pt; }
  .imprimible .alergenos-rejilla strong { font-size: 16pt; }
  .imprimible .alergenos-rejilla span { font-size: 10.5pt; }
  .imprimible .alergenos-cartel-pie { margin-top: 9mm; font-size: 13pt; }
  .imprimible .alergenos-cartel-norma { font-size: 8pt; }
  .alergenos-linea { width: 75mm; }

  .alergenos-hoja { font-size: 9pt; }
  .imprimible.alergenos-hoja .titular-m { font-size: 16pt; }
  .imprimible .alergenos-hoja-datos { margin: 2mm 0 3mm; font-size: 10pt; }
  .alergenos-campo { margin-right: 4mm; }
  .alergenos-campo .alergenos-linea { width: 55mm; }
  .alergenos-campo .alergenos-linea--corta { width: 26mm; }
  .imprimible .alergenos-tabla-envoltorio { overflow: visible; border: 0; border-radius: 0; }
  .alergenos-tabla { min-width: 0; font-size: 9pt; }
  .alergenos-tabla thead th:first-child { width: 58mm; }
  .alergenos-tabla thead th { font-size: 8.5pt; }
  .imprimible .alergenos-tabla tbody td { height: 9.5mm; }
  .alergenos-tabla tr { break-inside: avoid; }
  .imprimible .alergenos-leyenda { margin-top: 2.5mm; font-size: 8pt; }
}

/* Texto solo para lectores de pantalla y buscadores (no se ve) */
.solo-lector { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Generador de carta de alérgenos (/alergenos/generador/) ------------------ */
.generador { display: grid; gap: 1.4rem; padding: var(--card-pad); border: 2px solid var(--borde); border-radius: var(--radio); background: var(--fondo-2); margin-block: 1.2rem 1.6rem; }
.generador-datos { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .generador-datos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.generador-titulo { font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--tinta); margin: 0 0 .6rem; }
.generador-plato { display: grid; gap: 1rem; padding: 1.1rem; border-radius: var(--radio-sm); background: var(--fondo); border: 1px solid var(--borde); }
.generador-alergenos { border: 0; padding: 0; margin: 0; min-width: 0; }
.generador-alergenos legend { font-weight: 700; font-size: .95rem; margin-bottom: .6rem; }
.generador-alergenos > div { display: grid; gap: .4rem .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr)); }
.generador-casilla, .generador-opcion { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: .2rem .6rem; border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--fondo); cursor: pointer; font-size: .95rem; }
.generador-casilla:has(input:checked) { border-color: var(--primario); background: var(--primario-suave); font-weight: 700; }
.generador-casilla input, .generador-opcion input { width: 1.15rem; height: 1.15rem; accent-color: var(--primario); flex: none; }
.generador-opcion { margin-bottom: .5rem; }
.generador-platos { display: grid; gap: .6rem; padding: 0; margin: 0; list-style: none; counter-reset: none; }
.generador-platos li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; padding: .7rem .9rem; border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--fondo); }
.generador-platos li > span:first-child { min-width: 0; flex: 1 1 14rem; overflow-wrap: anywhere; }
.generador-acciones { display: flex; gap: .4rem; }
.generador-acciones .btn { min-height: 40px; padding: .35rem .8rem; font-size: .88rem; }
.generador-nota { font-size: .88rem; color: var(--texto-tenue); margin: .4rem 0 0; }
.generador-hoja .titular-m { margin-top: 0; }
.generador-apartado { margin: 1.2rem 0 .3rem; padding-bottom: .2rem; border-bottom: 2px solid var(--primario); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .9rem; color: var(--primario); }
.generador-carta { list-style: none; padding: 0; margin: 0; }
.generador-carta li { display: grid; gap: .1rem; padding: .5rem 0; border-bottom: 1px dashed var(--borde-fuerte); }
.generador-carta li span { font-size: .92rem; color: var(--texto-suave); }
.generador-hoja-aviso { margin-top: 1.2rem; font-weight: 700; }
.generador-hoja-pie { margin-top: .8rem; font-size: .82rem; color: var(--texto-tenue); }
.generador-tabla td.generador-marca { text-align: center; color: var(--primario); font-size: 1.05rem; }
.generador-tabla td small { color: var(--texto-tenue); }
@media print {
  .generador-carta li { break-inside: avoid; }
  .generador-apartado { break-after: avoid; color: #000; border-color: #000; }
  .generador-tabla td.generador-marca { color: #000; }
}

/* Opinar (/opinar/) ------------------------------------------------------- */
.opinar { margin-top: 1.4rem; }
.opinar-form { display: grid; gap: 1.1rem; padding: var(--card-pad); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo-2); }
.opinar-estrellas { border: 0; padding: 0; margin: 0; }
.opinar-estrellas legend { font-weight: 700; margin-bottom: .4rem; }
.opinar-estrellas > div { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: .2rem; }
.opinar-estrellas label { cursor: pointer; font-size: 2.4rem; line-height: 1; color: var(--borde-fuerte); position: relative; }
.opinar-estrellas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opinar-estrellas label:hover, .opinar-estrellas label:hover ~ label,
.opinar-estrellas label:has(input:checked), .opinar-estrellas label:has(input:checked) ~ label { color: #E8A317; }
.opinar-estrellas label:has(input:focus-visible) { outline: 3px solid var(--primario); outline-offset: 2px; border-radius: 4px; }
.opinar textarea { width: 100%; min-width: 0; padding: .65rem .9rem; border: 2px solid var(--borde-fuerte); border-radius: var(--radio-sm); background: var(--fondo); font: inherit; }
.opinar textarea:focus { outline: none; border-color: var(--primario); box-shadow: 0 0 0 4px var(--primario-suave); }
.opinar-casilla { display: flex; gap: .6rem; align-items: flex-start; }
.opinar-casilla input { width: 1.2rem; height: 1.2rem; margin-top: .2rem; accent-color: var(--primario); flex: none; }
.opinar-nota { font-size: .88rem; color: var(--texto-tenue); margin: 0; }

/* Aula (/aula/): el curso como entorno cerrado ---------------------------- */
body.es-aula { background: var(--fondo-2); }
body.es-aula .nav, body.es-aula .menu-movil, body.es-aula .pie, body.es-aula .cta-movil { display: none !important; }
.aula-barra { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 1rem; padding: .7rem var(--pad-x); background: var(--fondo); border-bottom: 1px solid var(--borde); box-shadow: 0 6px 18px -16px var(--sombra); }
.aula-logo { display: flex; align-items: center; gap: .55rem; color: var(--primario); text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.aula-logo span { color: var(--tinta); }
.aula-logo .aula-logo-marca { color: var(--texto-tenue); font-weight: 600; }
@media (max-width: 640px) { .aula-logo-marca { display: none; } }
.aula-progreso { flex: 1; min-width: 0; max-width: 460px; margin-inline: auto; display: grid; gap: .3rem; font-size: .85rem; font-weight: 700; color: var(--texto-suave); }
.aula-progreso span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aula-barra-progreso { height: 8px; border-radius: 99px; background: var(--primario-suave); overflow: hidden; }
.aula-barra-progreso i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--primario), #2C8A86); transition: width .5s ease; }
.aula-boton-examen { flex: none; }
.aula-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; max-width: 1180px; margin: 0 auto; padding: 1.2rem var(--pad-x) 4rem; }
@media (min-width: 980px) { .aula-cuerpo { grid-template-columns: 290px minmax(0, 1fr); gap: 2rem; padding-top: 2rem; } }
.aula-cuerpo:has(> .aula-indice[hidden]) { grid-template-columns: minmax(0, 1fr); max-width: 940px; }
.aula-indice { align-self: start; background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio); padding: .6rem; }
@media (min-width: 980px) { .aula-indice { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; padding: .9rem; } }
.aula-indice-abrir { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-height: 46px; padding: .4rem .7rem; border: 0; background: none; font: inherit; font-weight: 700; color: var(--tinta); cursor: pointer; }
.aula-indice-abrir::after { content: "\25BE"; color: var(--primario); transition: transform .2s; }
.aula-indice.is-abierto .aula-indice-abrir::after { transform: rotate(180deg); }
.aula-pasos, .aula-indice-pie { display: none; }
.aula-indice.is-abierto .aula-pasos, .aula-indice.is-abierto .aula-indice-pie { display: block; }
@media (min-width: 980px) {
  .aula-indice-abrir { pointer-events: none; padding-top: 0; }
  .aula-indice-abrir::after { display: none; }
  .aula-pasos, .aula-indice-pie { display: block; }
}
.aula-pasos { list-style: none; margin: .3rem 0 0; padding: 0; }
.aula-pasos li { margin: 0; }
.aula-pasos button, .aula-paso-cert { width: 100%; display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border: 0; border-radius: 10px; background: none; font: inherit; font-size: .92rem; line-height: 1.25; text-align: left; color: var(--texto); cursor: pointer; }
.aula-pasos button:hover { background: var(--fondo-2); }
.aula-paso-num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--borde-fuerte); font-size: .8rem; font-weight: 800; color: var(--texto-suave); background: var(--fondo); }
.aula-pasos li.is-hecho .aula-paso-num { background: var(--primario); border-color: var(--primario); color: #fff; }
.aula-pasos li.is-actual button { background: var(--primario-suave); font-weight: 700; color: var(--tinta); }
.aula-pasos li.is-actual .aula-paso-num { border-color: var(--cta); color: var(--cta); }
.aula-pasos li.aula-paso-examen { margin-top: .4rem; padding-top: .4rem; border-top: 1px dashed var(--borde-fuerte); }
.aula-paso-examen .aula-paso-num { border-color: var(--cta); color: var(--cta); }
.aula-paso-cert { cursor: default; color: var(--texto-tenue); }
.aula-indice-pie { margin-top: .8rem; padding: .8rem .6rem 0; border-top: 1px solid var(--borde); font-size: .85rem; color: var(--texto-suave); }
.aula-indice-pie p { margin: 0 0 .5rem; }
.aula-cambiar { border: 0; background: none; padding: 0; font: inherit; color: var(--primario); text-decoration: underline; cursor: pointer; }
.aula-panel { min-width: 0; background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio); padding: clamp(20px, 4vw, 44px); outline: none; }
.aula-titulo { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin: 0 0 1rem; }
.aula-subtitulo { font-size: 1.35rem; margin: 2rem 0 .3rem; }
.aula-texto-suave { color: var(--texto-suave); }
.aula-tres { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .aula-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.aula-tres li { display: grid; gap: .3rem; align-content: start; padding: 1rem 1.1rem; border-radius: 14px; background: var(--fondo-2); border: 1px solid var(--borde); }
.aula-tres strong { font-family: var(--display); font-size: 1.1rem; color: var(--tinta); }
.aula-tres span:last-child { font-size: .92rem; color: var(--texto-suave); }
.aula-tres-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--primario); color: #fff; font-weight: 800; }
.aula-tres li:last-child .aula-tres-num { background: var(--cta); }
.aula-sectores { display: grid; gap: .7rem; margin: 1rem 0 1.2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 480px) { .aula-sectores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px) { .aula-sectores { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.aula-sector { display: grid; gap: .2rem; align-content: start; text-align: left; padding: .7rem .7rem .9rem; border: 2px solid var(--borde); border-radius: 14px; background: var(--fondo); font: inherit; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.aula-sector img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; margin-bottom: .5rem; background: var(--fondo-2); }
.aula-sector strong { color: var(--tinta); font-size: 1rem; line-height: 1.2; }
.aula-sector span { font-size: .88rem; color: var(--texto-suave); }
.aula-sector:hover, .aula-sector:focus-visible { border-color: var(--primario); transform: translateY(-2px); box-shadow: 0 12px 24px -18px var(--sombra); outline: none; }
.aula-modulo-cabecera { padding-bottom: .4rem; margin-bottom: 1rem; border-bottom: 1px solid var(--borde); }
.aula-contenido { max-width: none; }
.aula-contenido img { border-radius: 12px; }
.aula-contenido .minitest { margin-top: 2rem; padding: 1.2rem; border-radius: 14px; background: var(--primario-suave); }
.aula-contenido .minitest h2 { margin-top: 0; }
.aula-fuentes { margin-top: 1.6rem; font-size: .9rem; color: var(--texto-suave); }
.aula-fuentes summary { cursor: pointer; font-weight: 700; }
.aula-modulo-pie { position: sticky; bottom: 0; margin: 2rem calc(-1 * clamp(20px, 4vw, 44px)) calc(-1 * clamp(20px, 4vw, 44px)); padding: .9rem clamp(20px, 4vw, 44px); background: var(--fondo); border-top: 1px solid var(--borde); border-radius: 0 0 var(--radio) var(--radio); box-shadow: 0 -10px 24px -20px var(--sombra); }
.aula-estado-minitest { margin: 0 0 .6rem; font-size: .9rem; font-weight: 700; color: var(--texto-suave); }
.aula-estado-minitest:empty { display: none; }
.aula-botones { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; }
.aula-botones .btn--cta { margin-left: auto; }
[data-aula-examen] .examen { margin-top: 1rem; }

/* Caja para entrar al aula en /curso/ */
.caja-aula { margin: 1.2rem 0 1.4rem; padding: 1.3rem 1.4rem; border-radius: var(--radio); background: linear-gradient(135deg, var(--primario), #0B4A50); color: #fff; }
.caja-aula-titulo { font-family: var(--display); font-weight: 700; font-size: 1.35rem; margin: 0 0 .6rem; color: #fff; }
.caja-aula ol { margin: 0 0 1rem; padding-left: 1.2rem; }
.caja-aula li { margin: .2rem 0; }
.caja-aula-nota { margin: .8rem 0 0; font-size: .9rem; opacity: .92; }
.caja-aula-nota a { color: #fff; }

/* Portada v3 (16-oct-2026), con el estilo del aula ------------------------ */
.port-hero { background: radial-gradient(1200px 520px at 85% -10%, var(--primario-suave), transparent 70%), var(--fondo); padding-block: clamp(36px, 6vw, 80px) clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--borde); }
.port-hero-rejilla { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 980px) { .port-hero-rejilla { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); } }
.port-h1 { font-size: clamp(2.2rem, 5.2vw, 3.7rem); line-height: 1.02; letter-spacing: -.025em; margin: 0 0 1rem; }
.port-entradilla { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--texto-suave); max-width: 38rem; margin: 0 0 1.4rem; }
.port-pasos { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .55rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .port-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.port-pasos li { display: flex; align-items: center; gap: .6rem; padding: .65rem .75rem; border: 1px solid var(--borde); border-radius: 14px; background: var(--fondo); font-size: .95rem; line-height: 1.25; box-shadow: 0 8px 20px -18px var(--sombra); }
.port-pasos strong { display: block; color: var(--tinta); }
.port-num { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--primario); color: #fff; font-weight: 800; font-size: .9rem; }
.port-num--cta { background: var(--cta); }
.port-acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.2rem; }
.port-sellos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.port-sellos li { padding: .35rem .7rem; border-radius: 99px; background: var(--fondo-2); border: 1px solid var(--borde); font-size: .84rem; font-weight: 700; color: var(--texto-suave); }
.port-sellos li::before { content: "\2713"; color: var(--primario); margin-right: .35rem; font-weight: 800; }
.port-hero-visual { display: grid; gap: 1rem; justify-items: center; }
.port-hero-visual .certificado { width: min(100%, 440px); transform: rotate(-1.5deg); }
.port-hero-visual .certificado-prueba { width: min(100%, 440px); }
.port-seccion .port-cabeza { max-width: 760px; margin-bottom: clamp(20px, 3vw, 32px); }
.port-sectores { display: grid; gap: .9rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 520px) { .port-sectores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .port-sectores { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.port-sector { position: relative; display: grid; gap: .3rem; align-content: start; padding: .7rem .7rem .9rem; border: 2px solid var(--borde); border-radius: 16px; background: var(--fondo); transition: border-color .15s, transform .15s, box-shadow .15s; }
.port-sector:hover, .port-sector:focus-within { border-color: var(--primario); transform: translateY(-3px); box-shadow: 0 16px 30px -22px var(--sombra); }
.port-sector img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 11px; margin-bottom: .4rem; background: var(--fondo-2); }
.port-sector-ir { color: var(--tinta); text-decoration: none; font-size: 1.04rem; line-height: 1.2; }
.port-sector-ir::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.port-sector-ir:focus-visible { outline: none; }
.port-sector > span { font-size: .9rem; color: var(--texto-suave); }
.port-sector-pie { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .4rem; }
.port-sector-empezar { font-weight: 800; color: var(--cta); font-size: .92rem; }
.port-sector-empezar::after { content: " \2192"; }
.port-sector-pie a { position: relative; z-index: 2; font-size: .84rem; color: var(--texto-tenue); }
@media (max-width: 519px) {
  .port-sector { grid-template-columns: 92px minmax(0, 1fr); column-gap: .85rem; row-gap: .15rem; padding: .6rem; }
  .port-sector img { grid-row: 1 / span 3; aspect-ratio: 1 / 1; margin: 0; }
  .port-sector-pie { margin-top: .15rem; }
}
.port-dos { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 980px) { .port-dos { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } .port-dos--inverso { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.port-lista { list-style: none; padding: 0; margin: 1rem 0 1.5rem; display: grid; gap: .65rem; }
.port-lista li { position: relative; padding-left: 2rem; color: var(--texto-suave); }
.port-lista li::before { content: "\2713"; position: absolute; left: 0; top: .05rem; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--primario); color: #fff; font-size: .8rem; font-weight: 800; }
.port-lista strong { color: var(--tinta); }
.port-captura { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--borde-fuerte); background: var(--fondo); box-shadow: 0 30px 60px -36px var(--sombra); }
.port-captura-barra { display: flex; align-items: center; gap: .35rem; padding: .55rem .8rem; background: var(--fondo-2); border-bottom: 1px solid var(--borde); }
.port-captura-barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--borde-fuerte); }
.port-captura-barra span { margin-left: .6rem; font-size: .78rem; color: var(--texto-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.port-captura img { display: block; width: 100%; height: auto; }
.port-datos { list-style: none; padding: 0; margin: 1rem 0 1.2rem; display: grid; gap: .6rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.port-datos li { display: grid; gap: .1rem; padding: .8rem .7rem; border-radius: 14px; background: var(--fondo-2); border: 1px solid var(--borde); text-align: center; }
.port-datos strong { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--primario); line-height: 1.05; }
.port-datos span { font-size: .82rem; color: var(--texto-suave); line-height: 1.2; }
.port-temario { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .port-temario { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .port-temario { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.port-temario a { display: flex; align-items: center; gap: .75rem; height: 100%; padding: .75rem .9rem; border: 1px solid var(--borde); border-radius: 14px; background: var(--fondo); color: var(--tinta); font-weight: 700; text-decoration: none; line-height: 1.25; transition: border-color .15s, transform .15s; }
.port-temario a:hover { border-color: var(--primario); transform: translateY(-2px); }
.port-temario-sector a { border-style: dashed; border-color: var(--cta); }
.port-cita { max-width: 760px; }
.port-validez { display: grid; gap: .9rem; grid-template-columns: minmax(0, 1fr); margin-top: 1.4rem; }
@media (min-width: 760px) { .port-validez { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.port-validez .titular-m { font-size: 1.12rem; margin-top: 0; }
.port-validez p { margin-bottom: 0; color: var(--texto-suave); }
.port-nota { margin-top: 1.2rem; font-size: .9rem; color: var(--texto-tenue); }
.port-recursos { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .port-recursos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .port-recursos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.port-recursos a { display: grid; gap: .3rem; height: 100%; padding: 1.1rem 1.1rem 1.2rem; border-radius: 16px; border: 1px solid var(--borde); background: var(--fondo); color: var(--tinta); text-decoration: none; transition: border-color .15s, transform .15s; }
.port-recursos a::before { content: ""; width: 34px; height: 4px; border-radius: 4px; background: var(--cta); margin-bottom: .4rem; }
.port-recursos a:hover { border-color: var(--primario); transform: translateY(-2px); }
.port-recursos strong { font-family: var(--display); font-size: 1.08rem; }
.port-recursos span { font-size: .9rem; color: var(--texto-suave); }

/* Kit de alérgenos (/alergenos/kit/) --------------------------------------- */
.kit-iconos { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 118px), 1fr)); }
.kit-iconos li { display: grid; justify-items: center; gap: .25rem; padding: .7rem .4rem; border: 1px solid var(--borde); border-radius: 14px; background: var(--fondo); text-align: center; font-size: .82rem; margin: 0; }
.kit-iconos li::before { display: none; }
.kit-iconos img { width: 72px; height: 72px; }
.kit-iconos strong { color: var(--tinta); font-size: .9rem; line-height: 1.2; }
.kit-iconos small { font-size: .8rem; color: var(--texto-tenue); }
.kit-licencia { margin: 1rem 0; padding: 1rem 1.1rem; border-radius: 14px; background: var(--primario-suave); }
.kit-licencia p { margin: 0 0 .5rem; }
.kit-codigo { margin: 0; padding: .7rem .8rem; border-radius: 10px; background: var(--fondo); border: 1px solid var(--borde); font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.kit-piezas { list-style: none; padding: 0; margin: 1rem 0 1.4rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.kit-pieza { display: grid; gap: .5rem; align-content: start; justify-items: center; text-align: center; margin: 0; }
.kit-pieza::before { display: none; }
.kit-pieza img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--borde); box-shadow: 0 10px 24px -18px var(--sombra); background: #fff; }
.kit-pieza strong { font-size: .92rem; line-height: 1.25; }
.prosa .kit-iconos, .prosa .kit-piezas { list-style: none; padding-left: 0; }

/* Iconos del kit dentro del generador */
.generador-icono { display: inline-block; vertical-align: middle; flex: none; }
.generador-casilla .generador-icono { margin-right: .1rem; }
.generador-alergenos-carta { display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
.generador-al { display: inline-flex; align-items: center; gap: .3rem; font-size: .92rem; color: var(--texto-suave); }
.generador-detalle { font-size: .85rem; color: var(--texto-tenue); }
.generador-tabla thead th .generador-icono { display: block; margin: .3rem auto 0; }