/* Recetario y capacitación de cocina — Marisquería El Ancla (demo de infoweb.mx)
   Paleta: azul ancla #0E2A47 · marea #1B4F7C · coral #FF6F59 · limón #E4EE5A · acero #D5DBE0 · rojo crítico #C4122F
   Tipos: Big Shoulders Display (rótulos), Atkinson Hyperlegible (lectura a un metro), Atkinson Hyperlegible Mono (cantidades) */
:root {
  --ancla: #0E2A47;
  --ancla-2: #143a61;
  --marea: #1B4F7C;
  --coral: #FF6F59;
  --coral-osc: #B23A28;
  --limon: #E4EE5A;
  --acero: #D5DBE0;
  --acero-2: #EEF2F5;
  --acero-3: #8E9AA4;
  --tinta: #0E2A47;
  --gris: #4A5866;
  --blanco: #fff;
  --rojo: #C4122F;
  --rojo-claro: #FDE8EB;
  --verde: #1E7A4C;
  --f-disp: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --f-txt: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --f-mono: 'Atkinson Hyperlegible Mono', ui-monospace, monospace;
  --cab: 104px;
  --radio: 14px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cab) + 12px); }
body {
  margin: 0; font-family: var(--f-txt); font-size: 1.0625rem; line-height: 1.5; color: var(--tinta);
  background: var(--acero-2);
}
img, video { max-width: 100%; display: block; }
a { color: var(--marea); }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 0; z-index: 99; background: var(--limon); color: var(--ancla); padding: .6rem 1rem; }
.saltar:focus { left: 8px; top: 8px; }
[hidden] { display: none !important; }

/* ── Cabecera con banner de demo ── */
.cab { position: sticky; top: 0; z-index: 40; background: var(--ancla); color: #fff; box-shadow: 0 2px 0 #0a1f35; }
.demo-banner { background: #2b2620; color: #f2ece1; text-align: center; font-size: .85rem; line-height: 1.4; padding: .4rem .9rem; letter-spacing: .01em; }
@media (min-width: 640px) { .demo-banner { font-size: .92rem; } }
.cab-barra { display: flex; align-items: center; gap: .6rem; max-width: 1180px; margin: 0 auto; padding: .55rem 1rem; }
.marca { display: flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; min-width: 0; }
.marca-ico { width: 34px; height: 34px; color: var(--limon); flex: none; }
.marca-txt { display: flex; flex-direction: column; line-height: 1; }
.marca-txt strong { font-family: var(--f-disp); font-weight: 900; font-size: 1.35rem; letter-spacing: .02em; text-transform: uppercase; }
.marca-txt small { font-size: .74rem; color: #b9c8d8; margin-top: .2rem; }
.rol { display: flex; margin-left: auto; background: #0a1f35; border-radius: 999px; padding: 3px; }
.rol button { border: 0; background: transparent; color: #cfdbe7; padding: .45rem .8rem; border-radius: 999px; font-weight: 700; font-size: .92rem; min-height: 40px; white-space: nowrap; }
.rol button[aria-pressed="true"] { background: var(--limon); color: var(--ancla); }
.cab-acciones { display: flex; gap: .3rem; }
.btn-icono { width: 42px; height: 42px; border: 0; border-radius: 10px; background: transparent; color: #fff; display: grid; place-items: center; }
.btn-icono svg { width: 24px; height: 24px; }
.btn-icono:hover { background: var(--ancla-2); }
#btn-sonido .ico-off { display: none; }
#btn-sonido[aria-pressed="false"] .ico-on { display: none; }
#btn-sonido[aria-pressed="false"] .ico-off { display: block; }
@media (max-width: 560px) {
  .marca-txt small { display: none; }
  .marca-txt strong { font-size: 1.05rem; }
  .marca-ico { width: 28px; height: 28px; }
  .cab-barra { padding: .45rem .6rem; gap: .35rem; }
  .rol button { padding: .4rem .55rem; font-size: .84rem; }
  .btn-icono { width: 38px; height: 38px; }
  #btn-restaurar { display: none; }
}
@media (max-width: 380px) { .marca-txt { display: none; } }

/* ── Botones ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .6rem 1.15rem;
  border-radius: 12px; border: 2px solid transparent; font-weight: 700; font-size: 1rem; text-decoration: none; line-height: 1.15;
}
.btn svg { width: 22px; height: 22px; flex: none; }
.btn-coral { background: var(--coral); color: var(--ancla); }
.btn-coral:hover { background: #ff8673; }
.btn-sec { background: #fff; color: var(--ancla); border-color: var(--ancla); }
.btn-sec:hover { background: var(--acero-2); }
.btn-sec-osc { background: transparent; color: #fff; border-color: #8fb1d3; }
.btn-lima { background: var(--limon); color: var(--ancla); }
.btn-cocina { background: var(--ancla); color: #fff; font-size: 1.12rem; padding: .7rem 1.4rem; box-shadow: 0 4px 0 var(--coral); }
.btn-cocina:hover { background: var(--ancla-2); }
.btn-cocina:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--coral); }
.btn-mini { min-height: 40px; padding: .35rem .8rem; font-size: .92rem; }
.btn-borrar { background: transparent; color: var(--rojo); border-color: var(--rojo); }
.btn-wa { background: #0F7A6E; color: #fff; }
.btn-wa:hover { background: #0B6359; }
.btn-wa .ico-wa { width: 24px; height: 24px; }

/* ── Estructura ── */
.app { max-width: 1180px; margin: 0 auto; padding: 0 1rem 2rem; }
.app:focus { outline: none; }
.intro { padding: 1.6rem 0 1rem; }
.intro-ojo { margin: 0; font-weight: 700; color: var(--coral-osc); font-size: .95rem; }
.intro h1 { font-family: var(--f-disp); font-weight: 900; text-transform: uppercase; font-size: clamp(2.3rem, 9vw, 4.4rem); line-height: .9; letter-spacing: .005em; margin: .3rem 0 .6rem; max-width: 15ch; }
.intro-lema { margin: 0; max-width: 60ch; font-size: 1.1rem; color: var(--gris); }
.sec-tit { font-family: var(--f-disp); font-weight: 800; text-transform: uppercase; font-size: 1.9rem; margin: 2rem 0 .8rem; line-height: 1; }

/* ── Perfil del cocinero ── */
.perfil-tarjeta { display: flex; gap: .9rem; align-items: center; background: var(--ancla); color: #fff; border-radius: var(--radio); padding: .9rem 1rem; }
.perfil-foto { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--limon); flex: none; }
.perfil-datos { flex: 1; min-width: 0; }
.perfil-quien { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.perfil-quien select { background: var(--ancla-2); color: #fff; border: 1px solid #4f7396; border-radius: 8px; padding: .35rem .5rem; font-weight: 700; min-height: 40px; max-width: 100%; }
.perfil-puesto { margin: .2rem 0 .45rem; color: #c3d2e1; font-size: .92rem; }
.barra-avance { height: 10px; background: #0a1f35; border-radius: 99px; overflow: hidden; }
.barra-avance i { display: block; height: 100%; background: var(--limon); border-radius: 99px; transition: width .6s; }
.perfil-cuenta { margin: .3rem 0 0; font-size: .92rem; color: #dbe5ee; }
.perfil-chef { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; background: #fff; border: 2px solid var(--ancla); border-radius: var(--radio); padding: .9rem 1rem; }
.perfil-chef p { margin: 0 auto 0 0; flex: 1 1 260px; }

/* ── Buscador y filtros ── */
.buscador { margin: 1rem 0; }
.buscar { display: flex; align-items: center; gap: .5rem; background: #fff; border: 2px solid var(--acero); border-radius: 12px; padding: 0 .9rem; }
.buscar:focus-within { border-color: var(--ancla); }
.buscar svg { width: 22px; height: 22px; color: var(--acero-3); flex: none; }
.buscar input { border: 0; outline: 0; width: 100%; min-height: 50px; font-size: 1.08rem; background: transparent; }
.filtros { margin-top: .7rem; display: grid; gap: .45rem; }
.chips { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .2rem; scrollbar-width: none; align-items: center; }
.chips::-webkit-scrollbar { display: none; }
.chips-tit { font-size: .82rem; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: .05em; flex: none; }
.chip { flex: none; border: 2px solid var(--acero); background: #fff; border-radius: 999px; padding: .4rem .9rem; min-height: 42px; font-weight: 700; font-size: .95rem; }
.chip[aria-pressed="true"] { background: var(--ancla); border-color: var(--ancla); color: #fff; }
.chip-est[aria-pressed="true"] { background: var(--coral); border-color: var(--coral); color: var(--ancla); }

/* ── Tarjetas de receta ── */
.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
@media (min-width: 700px) { .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1000px) { .rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tarjeta { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--radio); overflow: hidden; text-decoration: none; color: var(--tinta);
  box-shadow: 0 1px 0 var(--acero), 0 6px 18px -12px rgba(14, 42, 71, .45); transition: transform .15s; }
.tarjeta:hover { transform: translateY(-2px); }
.tarjeta-foto { aspect-ratio: 1; overflow: hidden; background: var(--acero); }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-cuerpo { padding: .65rem .75rem .8rem; display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.tarjeta-est { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--coral-osc); }
.tarjeta-nombre { font-family: var(--f-disp); font-weight: 800; font-size: 1.45rem; line-height: .98; text-transform: uppercase; }
.tarjeta-meta { display: flex; flex-wrap: wrap; gap: .2rem .6rem; font-size: .84rem; color: var(--gris); margin-top: auto; padding-top: .2rem; }
.meta-crit { color: var(--rojo); font-weight: 700; }
.sello-mini { position: absolute; top: .5rem; right: .5rem; background: var(--limon); color: var(--ancla); font-weight: 900; font-family: var(--f-disp); text-transform: uppercase; font-size: .95rem;
  padding: .2rem .55rem; border-radius: 6px; transform: rotate(4deg); box-shadow: 0 2px 0 var(--ancla); }
.vacio { grid-column: 1 / -1; background: #fff; border-radius: var(--radio); padding: 1.2rem; }

/* ── Receta ── */
.migas { margin: 1rem 0 .4rem; }
.migas a { font-weight: 700; text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.rec-cab { display: grid; gap: 1rem; }
@media (min-width: 860px) { .rec-cab { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2rem; align-items: start; } }
.rec-foto { position: relative; border-radius: var(--radio); overflow: hidden; background: var(--acero); }
.rec-foto img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.rec-foto-et { position: absolute; left: .7rem; bottom: .7rem; background: var(--ancla); color: #fff; font-family: var(--f-disp); font-weight: 800; text-transform: uppercase; padding: .2rem .6rem; border-radius: 6px; font-size: 1.1rem; }
.rec-est { margin: 0; font-weight: 700; color: var(--coral-osc); }
.rec-info h1 { font-family: var(--f-disp); font-weight: 900; text-transform: uppercase; font-size: clamp(2.4rem, 10vw, 4.2rem); line-height: .88; margin: .25rem 0 .7rem; }
.rec-desc { margin: 0 0 .8rem; font-size: 1.12rem; }
.alergenos { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: 0 0 1rem; }
.alergenos-tit { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--rojo); margin-right: .2rem; }
.alergeno { border: 2px solid var(--rojo); color: var(--rojo); border-radius: 999px; padding: .1rem .65rem; font-weight: 700; font-size: .92rem; background: #fff; }
.alergeno-no { border-color: var(--acero-3); color: var(--gris); }
.rec-acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .9rem; }
.rec-dominan, .rec-usa { margin: .3rem 0; color: var(--gris); }
.rec-tu { color: var(--coral-osc); font-weight: 700; }

/* Porciones — «momento para grabar»: el control queda pegado arriba y la lista corre debajo */
.porciones { margin-top: 1.6rem; }
.porc-panel {
  position: sticky; top: var(--cab); z-index: 5; display: flex; align-items: center; gap: .9rem;
  background: var(--ancla); color: #fff; border-radius: var(--radio); padding: .7rem .9rem; box-shadow: 0 8px 18px -12px rgba(14, 42, 71, .7);
}
.porc-recip { width: 92px; height: 92px; flex: none; display: grid; place-items: center; }
.porc-recip.salto { animation: salto .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes salto { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
.recip { width: 100%; height: 100%; overflow: visible; }
.recip-cuerpo { fill: #29507a; }
.recip-borde { fill: none; stroke: #dbe6f1; stroke-width: 3; stroke-linejoin: round; }
.recip-nivel { fill: var(--coral); transition: y .35s ease; }
.recip-taza { transform: scale(.55); transform-origin: 50% 70%; }
.recip-tazon { transform: scale(.68); transform-origin: 50% 70%; }
.recip-bowl { transform: scale(.8); transform-origin: 50% 70%; }
.recip-olla { transform: scale(.9); transform-origin: 50% 70%; }
.porc-ctrl { flex: 1; min-width: 0; }
.porc-tit { margin: 0; font-family: var(--f-disp); font-weight: 900; text-transform: uppercase; line-height: .9; font-size: 1.4rem; }
.porc-tit #porc-n { font-family: var(--f-mono); font-size: 2.6rem; color: var(--limon); font-weight: 700; display: inline-block; min-width: 2ch; }
.porc-cabe { margin: .3rem 0 0; font-size: .92rem; color: #cfdbe7; }
.porc-cabe strong { color: #fff; }
#porc-rango { --p: 6%; width: 100%; height: 44px; margin: .2rem 0 0; -webkit-appearance: none; appearance: none; background: transparent; touch-action: pan-y; }
#porc-rango::-webkit-slider-runnable-track { height: 12px; border-radius: 99px; background: linear-gradient(90deg, var(--limon) var(--p), #0a1f35 var(--p)); }
#porc-rango::-moz-range-track { height: 12px; border-radius: 99px; background: #0a1f35; }
#porc-rango::-moz-range-progress { height: 12px; border-radius: 99px; background: var(--limon); }
#porc-rango::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; margin-top: -11px; border-radius: 50%; background: var(--coral); border: 4px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
#porc-rango::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--coral); border: 4px solid #fff; }
.ingredientes { list-style: none; margin: .7rem 0 0; padding: 0; background: #fff; border-radius: var(--radio); overflow: hidden; }
.ing { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .45rem .8rem; border-bottom: 1px solid var(--acero-2); }
.ing:last-child { border-bottom: 0; }
.ing img, .ing-sin { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--acero) linear-gradient(135deg, #e7ecf0, #c9d1d8); }
.ing-n { line-height: 1.25; }
.ing-c { font-family: var(--f-mono); text-align: right; white-space: nowrap; color: var(--gris); }
.ing-c b { font-size: 1.3rem; color: var(--ancla); }
.ing.cambio .ing-c b { animation: pulso .5s; }
@keyframes pulso { 0% { color: var(--coral-osc); transform: scale(1.25); } 100% { transform: scale(1); } }
.ing-c b { display: inline-block; }
.nota { color: var(--gris); font-size: .92rem; margin: .5rem 0 0; }

/* Pasos */
.pasos-sec h2, .empl-sec h2 { font-family: var(--f-disp); font-weight: 900; text-transform: uppercase; font-size: 2.2rem; margin: 2rem 0 .7rem; line-height: 1; }
.pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.paso { display: grid; grid-template-columns: 2.2rem 96px minmax(0, 1fr); gap: .7rem; align-items: start; background: #fff; border-radius: var(--radio); padding: .7rem; }
.paso-n { font-family: var(--f-disp); font-weight: 900; font-size: 2.2rem; line-height: 1; color: var(--marea); text-align: center; }
.paso-foto { width: 96px; height: 96px; border-radius: 10px; object-fit: cover; }
.paso-foto-vacia { background: var(--acero); }
.paso-txt p { margin: 0 0 .3rem; }
.paso-t { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; color: var(--marea); font-family: var(--f-mono); }
.ico-reloj { width: 20px; height: 20px; }
.paso-crit { box-shadow: inset 4px 0 0 var(--rojo); }
.paso-critico { color: var(--rojo); background: var(--rojo-claro); border-radius: 8px; padding: .35rem .55rem; font-size: .96rem; }
@media (max-width: 480px) { .paso { grid-template-columns: 1.6rem 72px minmax(0, 1fr); gap: .55rem; } .paso-foto { width: 72px; height: 72px; } .paso-n { font-size: 1.8rem; } }

/* Foto con puntos a revisar */
.empl-sec p { max-width: 60ch; }
.empl-unico { max-width: 560px; }
.foto-puntos { position: relative; margin: 0; border-radius: var(--radio); overflow: hidden; }
.foto-puntos img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.pin { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: .3rem; pointer-events: none; }
.pin b { width: 32px; height: 32px; border-radius: 50%; background: var(--limon); color: var(--ancla); display: grid; place-items: center; font-weight: 700; font-family: var(--f-mono);
  border: 3px solid var(--ancla); box-shadow: 0 0 0 3px rgba(255, 255, 255, .8); animation: latido 1.8s infinite; flex: none; }
.pin em { font-style: normal; background: var(--ancla); color: #fff; font-weight: 700; font-size: .9rem; padding: .15rem .5rem; border-radius: 6px; white-space: nowrap; }
.pin-izq { flex-direction: row-reverse; transform: translate(calc(-100% + 16px), -50%); }
.pin:not(.pin-izq) { transform: translate(-16px, -50%); }
.pin.sel b { background: var(--coral); }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, .8); } 50% { box-shadow: 0 0 0 9px rgba(228, 238, 90, .45); } }
.empl-cta { margin-top: 1rem; }

/* ── Modo cocina (pantalla completa) ── */
.cocina { position: fixed; inset: 0; z-index: 100; background: var(--ancla); color: #fff; display: flex; flex-direction: column; overflow: hidden;
  background-image: radial-gradient(120% 60% at 50% 0%, #17406b 0%, var(--ancla) 60%); user-select: none; -webkit-user-select: none; }
body.en-cocina { overflow: hidden; }
body.en-cocina .cta-fijo, body.en-cocina .mini-timers { display: none; }
.ck-top { display: flex; align-items: center; gap: .5rem; padding: max(.6rem, env(safe-area-inset-top)) .7rem .4rem; }
.ck-btn { border: 2px solid #4f7396; background: transparent; color: #fff; border-radius: 12px; min-height: 46px; min-width: 46px; padding: .3rem .7rem; font-weight: 700; font-size: 1rem; }
.ck-cerrar { font-size: 1.3rem; }
.ck-vel { border-color: var(--limon); color: var(--limon); font-family: var(--f-mono); white-space: nowrap; }
.ck-titulo { flex: 1; min-width: 0; margin: 0; display: flex; flex-direction: column; font-family: var(--f-disp); font-weight: 800; text-transform: uppercase; font-size: 1.3rem; line-height: 1; }
.ck-titulo span { font-family: var(--f-txt); text-transform: none; font-weight: 400; font-size: .85rem; color: #b9c8d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* El riel de comandas: los cronómetros cuelgan como tickets de un riel de acero */
.ck-riel {
  position: relative; display: flex; gap: .5rem; overflow-x: auto; padding: 14px .7rem .5rem; min-height: 30px; scrollbar-width: none;
  background: linear-gradient(180deg, #c9d2da 0, #f4f7f9 3px, #9aa6b1 7px, #6c7a87 9px, transparent 9px);
  min-height: 107px; align-items: flex-start;
}
.ck-riel::-webkit-scrollbar { display: none; }
.riel-vacio { font-size: .85rem; color: #8fb1d3; padding: .2rem 0; }
.ticket { position: relative; flex: none; width: 150px; text-align: left; border: 0; border-radius: 0 0 6px 6px; padding: .55rem .6rem .5rem; background: #fbfaf5; color: var(--ancla);
  display: flex; flex-direction: column; gap: .05rem; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); transform-origin: 50% 0; animation: cuelga .5s cubic-bezier(.3, 1.5, .5, 1);
  -webkit-mask: radial-gradient(circle 4px at 8px 100%, transparent 98%, #000) -4px 0/12px 100% repeat-x; mask: radial-gradient(circle 4px at 8px 100%, transparent 98%, #000) -4px 0/12px 100% repeat-x; }
@keyframes cuelga { 0% { transform: rotate(-8deg) translateY(-14px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.tk-clip { position: absolute; top: -9px; left: 50%; width: 30px; height: 12px; margin-left: -15px; background: linear-gradient(#e9eef2, #8e9aa4); border-radius: 3px; }
.tk-rec { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-n { font-size: .84rem; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-t { font-family: var(--f-mono); font-size: 1.7rem; font-weight: 700; line-height: 1.05; }
.tk-bar { height: 5px; background: var(--acero); border-radius: 9px; overflow: hidden; }
.tk-bar i { display: block; height: 100%; width: 0; background: var(--coral); }
.ticket.hecho { background: var(--limon); animation: tiembla .5s 4; }
.ticket.hecho .tk-bar i { background: var(--ancla); width: 100% !important; }
@keyframes tiembla { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }

.ck-progreso { display: flex; gap: 4px; padding: .3rem .7rem .2rem; }
.ck-progreso i { flex: 1; height: 6px; border-radius: 9px; background: #2c5174; }
.ck-progreso i.ok { background: var(--limon); }
.ck-progreso i.ahora { background: #fff; }
.ck-progreso i.crit.ahora, .ck-progreso i.crit:not(.ok) { box-shadow: inset 0 -3px 0 var(--coral); }
.ck-progreso i.fin { flex: .5; }

.ck-cuerpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: .5rem .8rem 0; display: flex; flex-direction: column; }
.ck-paso { display: flex; flex-direction: column; gap: .8rem; flex: 1; animation: entra .35s ease; }
@keyframes entra { from { opacity: .2; transform: translateX(26px); } to { opacity: 1; transform: none; } }
.ck-media-caja { position: relative; border-radius: 16px; overflow: hidden; background: #0a1f35; flex: none; }
.ck-media { width: 100%; height: min(40vh, 92vw); object-fit: cover; }
.ck-paso.con-reloj .ck-media { height: min(32vh, 92vw); }
.ck-paso.con-crit .ck-media { height: min(25vh, 92vw); }
.ck-paso.con-crit.con-reloj .ck-media { height: min(20vh, 92vw); }
.ck-paso.con-crit .ck-num { font-size: 4.5rem; }
.ck-media-vacia { display: grid; place-items: center; text-align: center; padding: 1rem; color: #8fb1d3; }
.ck-num { position: absolute; left: .4rem; bottom: -.4rem; font-family: var(--f-disp); font-weight: 900; font-size: 6.5rem; line-height: .9; color: var(--limon);
  text-shadow: 0 3px 0 var(--ancla), 0 0 22px rgba(0, 0, 0, .55); }
.ck-tx { font-size: clamp(1.65rem, 6.6vw, 3rem); font-weight: 700; line-height: 1.18; margin: 0 0 .8rem; }
.ck-iniciar { display: flex; align-items: center; gap: .7rem; width: 100%; border: 0; border-radius: 16px; background: var(--limon); color: var(--ancla); padding: .9rem 1.1rem; font-weight: 700; font-size: 1.25rem; min-height: 64px; }
.ck-iniciar svg { width: 30px; height: 30px; }
.ck-iniciar b { margin-left: auto; font-family: var(--f-mono); font-size: 2rem; }
.ck-reloj { --avance: 0; position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; border-radius: 16px; padding: .7rem 1.1rem; overflow: hidden;
  background: linear-gradient(90deg, #24527f calc(var(--avance) * 100%), #12355a 0); border: 2px solid #4f7396; }
.ck-reloj-t { font-family: var(--f-mono); font-weight: 700; font-size: clamp(3.4rem, 17vw, 6rem); line-height: 1; color: var(--limon); }
.ck-reloj-et { font-weight: 700; color: #cfdbe7; text-align: right; }
.ck-reloj.hecho { background: var(--limon); border-color: var(--limon); animation: destello .6s 5; }
.ck-reloj.hecho .ck-reloj-t, .ck-reloj.hecho .ck-reloj-et { color: var(--ancla); }
@keyframes destello { 50% { filter: brightness(1.25); transform: scale(1.02); } }
.ck-crit { margin-top: .7rem; background: var(--rojo); color: #fff; border-radius: 16px; padding: .9rem 1rem; box-shadow: 0 0 0 4px rgba(196, 18, 47, .35); }
.ck-crit p { margin: 0 0 .6rem; font-size: clamp(1.08rem, 4.3vw, 1.6rem); font-weight: 700; line-height: 1.25; }
.ck-crit .ck-crit-tit { font-family: var(--f-disp); font-weight: 900; text-transform: uppercase; font-size: 1.5rem; letter-spacing: .03em; margin-bottom: .3rem; }
.ck-crit.ok { background: #12355a; box-shadow: inset 4px 0 0 var(--coral); font-size: 1rem; }
.ck-crit.sacude { animation: sacude .45s; }
@keyframes sacude { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.ck-confirmar { width: 100%; min-height: 58px; border: 0; border-radius: 12px; background: #fff; color: var(--rojo); font-weight: 700; font-size: 1.2rem; }
.ck-pie { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem 0 max(.8rem, env(safe-area-inset-bottom)); margin-top: auto; }
.ck-ayuda { margin: 0; color: #8fb1d3; font-size: .95rem; text-align: right; }
.ck-ayuda::after { content: ' →'; }
@media (min-width: 820px) and (min-height: 560px) {
  .ck-paso { flex-direction: row; align-items: flex-start; gap: 1.6rem; }
  .ck-media-caja { width: 46%; }
  .ck-media { height: min(66vh, 46vw); }
  .ck-texto { flex: 1; }
  .ck-cuerpo { padding: 1rem 1.6rem 0; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .ck-paso { flex-direction: row; gap: 1rem; }
  .ck-media-caja { width: 38%; }
  .ck-media { height: 58vh; }
  .ck-tx { font-size: 1.5rem; }
}

/* Final: así debe salir */
.ck-final { animation: entra .35s ease; padding-bottom: 1rem; }
.comparar { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.comp-et { margin: 0 0 .3rem; font-family: var(--f-disp); font-weight: 900; text-transform: uppercase; font-size: 1.3rem; }
.comp-tuyo .comp-et { color: var(--limon); }
.ck-final .pin b { width: 26px; height: 26px; font-size: .85rem; border-width: 2px; }
.tuya { aspect-ratio: 1; border-radius: var(--radio); overflow: hidden; border: 3px dashed #4f7396; }
.tuya img { width: 100%; height: 100%; object-fit: cover; }
.tuya-vacia { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: .45rem; padding: .6rem; text-align: center; }
.tuya-vacia p { margin: 0; font-size: .9rem; color: #cfdbe7; }
.tuya-vacia .btn { min-height: 44px; font-size: .88rem; padding: .4rem .5rem; }
.revisar { list-style: none; padding: 0; margin: .8rem 0; display: grid; gap: .4rem; }
.rev { display: flex; align-items: center; gap: .6rem; background: #12355a; border-radius: 12px; padding: .4rem .5rem .4rem .6rem; font-size: 1.12rem; font-weight: 700; }
.rev > b { width: 30px; height: 30px; border-radius: 50%; background: var(--limon); color: var(--ancla); display: grid; place-items: center; font-family: var(--f-mono); flex: none; }
.rev > span:first-of-type { flex: 1; }
.rev-bot { display: flex; gap: .3rem; }
.rev-bot button { width: 48px; height: 48px; border-radius: 10px; border: 2px solid #4f7396; background: transparent; color: #fff; font-size: 1.3rem; font-weight: 700; }
.rev.si { box-shadow: inset 4px 0 0 var(--limon); }
.rev.no { box-shadow: inset 4px 0 0 var(--coral); background: #4a1e2b; }
.rev-bot button[data-v="1"][aria-pressed="true"] { background: var(--limon); color: var(--ancla); border-color: var(--limon); }
.rev-bot button[data-v="0"][aria-pressed="true"] { background: var(--coral); color: var(--ancla); border-color: var(--coral); }
.ck-final-acc { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding-bottom: max(.5rem, env(safe-area-inset-bottom)); }
.btn-sale { flex: 1 1 100%; background: var(--coral); color: var(--ancla); font-family: var(--f-disp); font-weight: 900; text-transform: uppercase; font-size: 1.9rem; min-height: 68px; border-radius: 16px; box-shadow: 0 5px 0 #b23a28; }
.btn-sale:active { transform: translateY(3px); box-shadow: 0 2px 0 #b23a28; }
.sale-sello { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; animation: sale 2.3s forwards; }
.sale-sello span { font-family: var(--f-disp); font-weight: 900; text-transform: uppercase; font-size: clamp(3.4rem, 17vw, 8rem); line-height: .9; color: var(--ancla); background: var(--limon);
  padding: .2em .35em; border: 6px solid var(--ancla); border-radius: 14px; transform: rotate(-6deg); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); text-align: center; }
.sale-sello small { margin-top: 1rem; background: var(--ancla); color: #fff; padding: .3rem .8rem; border-radius: 8px; font-size: 1.1rem; }
@keyframes sale { 0% { opacity: 0; transform: scale(2.2); } 12% { opacity: 1; transform: scale(.95); } 18% { transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
@media (min-width: 820px) { .comparar { gap: 1.2rem; } .ck-final { max-width: 980px; margin: 0 auto; width: 100%; } }

/* ── Capa (examen) ── */
.capa { position: fixed; inset: 0; z-index: 90; background: rgba(8, 24, 40, .72); display: flex; align-items: flex-end; justify-content: center; }
body.con-capa { overflow: hidden; }
.capa-caja { background: var(--acero-2); width: 100%; max-width: 760px; max-height: 94vh; border-radius: 20px 20px 0 0; display: flex; flex-direction: column; overflow: hidden; animation: sube .3s ease; }
@keyframes sube { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (min-width: 760px) { .capa { align-items: center; } .capa-caja { border-radius: 20px; } }
.capa-cab { position: relative; background: var(--ancla); color: #fff; padding: .9rem 3.6rem .9rem 1rem; }
.capa-ojo { margin: 0; color: #b9c8d8; font-size: .9rem; }
.capa-cab h2 { margin: .1rem 0 0; font-family: var(--f-disp); font-weight: 900; text-transform: uppercase; font-size: 1.9rem; line-height: 1; }
.capa-cerrar { position: absolute; right: .6rem; top: .6rem; width: 46px; height: 46px; border-radius: 12px; border: 2px solid #4f7396; background: transparent; color: #fff; font-size: 1.2rem; }
.capa-cuerpo { overflow-y: auto; padding: 1rem; }
.capa-acc { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 .2rem; }
.ex-ayuda { margin: 0 0 .7rem; }
.ex-quien { display: flex; align-items: center; gap: .5rem; font-weight: 700; margin-bottom: .7rem; }
.ex-quien select { border: 2px solid var(--acero); border-radius: 10px; padding: .4rem .5rem; min-height: 44px; background: #fff; max-width: 100%; }
.ordenar { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ord { display: flex; align-items: center; gap: .55rem; background: #fff; border-radius: 12px; padding: .45rem .5rem; border: 2px solid var(--acero); touch-action: none; cursor: grab; }
.ord img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex: none; }
.ord-asa { color: var(--acero-3); font-size: 1.4rem; flex: none; }
.ord-tx { flex: 1; line-height: 1.25; font-size: .98rem; }
.ord-flechas { display: flex; flex-direction: column; gap: 2px; }
.ord-flechas button { width: 44px; height: 32px; border: 0; border-radius: 6px; background: var(--acero-2); color: var(--ancla); font-size: .8rem; }
.ord-flechas button:disabled { opacity: .3; }
.ord.arrastrando { position: fixed; z-index: 95; box-shadow: 0 14px 30px rgba(0, 0, 0, .35); border-color: var(--coral); cursor: grabbing; transform: rotate(-1.5deg); }
.ord-hueco { border: 2px dashed var(--acero-3); border-radius: 12px; list-style: none; }
.ord.bien { border-color: var(--verde); background: #ebf7f0; }
.ord.malo { border-color: var(--rojo); background: var(--rojo-claro); }
.ex-platos { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.ex-plato { position: relative; padding: 0; border: 4px solid transparent; border-radius: 16px; overflow: hidden; background: none; }
.ex-plato img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.ex-plato span { position: absolute; left: .5rem; top: .4rem; font-family: var(--f-disp); font-weight: 900; font-size: 2.2rem; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }
.ex-plato.es-bien { border-color: var(--verde); }
.ex-plato.es-mal { border-color: var(--rojo); }
.ex-plato.es-mal img { filter: grayscale(.6) brightness(.7); }
.ex-res { text-align: center; padding: .5rem 0; font-size: 1.12rem; }
.ex-res .capa-acc { justify-content: center; }
.sello-grande { width: 180px; height: 180px; margin: 0 auto .6rem; color: var(--coral-osc); animation: sella .6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes sella { 0% { transform: scale(2.6) rotate(-30deg); opacity: 0; } 100% { transform: rotate(-12deg); opacity: 1; } }
.sello-grande svg { width: 100%; height: 100%; transform: rotate(-12deg); }

/* ── Brigada ── */
.brigada-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.brigada-fotos figure { margin: 0; position: relative; border-radius: 12px; overflow: hidden; }
.brigada-fotos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.brigada-fotos figcaption { position: absolute; left: .4rem; bottom: .4rem; background: var(--ancla); color: #fff; font-weight: 700; font-size: .82rem; padding: .1rem .45rem; border-radius: 6px; }
.cocineros { display: grid; gap: .8rem; }
@media (min-width: 760px) { .cocineros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cocineros { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cocinero { background: #fff; border-radius: var(--radio); padding: .9rem; display: flex; flex-direction: column; gap: .7rem; }
.cocinero.es-nuevo { box-shadow: inset 0 0 0 3px var(--coral); }
.coc-cab { display: flex; gap: .8rem; align-items: center; }
.coc-cab img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; border: 3px solid var(--ancla); flex: none; }
.coc-cab h3 { margin: 0; font-family: var(--f-disp); font-weight: 800; text-transform: uppercase; font-size: 1.55rem; line-height: 1; }
.coc-cab p { margin: .15rem 0 0; color: var(--gris); font-size: .92rem; }
.coc-n strong { font-family: var(--f-mono); font-size: 1.2rem; color: var(--ancla); }
.tag-nuevo { font-family: var(--f-txt); font-size: .75rem; background: var(--coral); color: var(--ancla); padding: .1rem .45rem; border-radius: 99px; vertical-align: middle; }
.insignias { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; }
.ins a { display: block; border-radius: 50%; padding: 2px; background: var(--acero); }
.ins img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; filter: grayscale(1) opacity(.35); }
.ins.si a { background: var(--limon); box-shadow: 0 0 0 2px var(--ancla); }
.ins.si img { filter: none; }
.estaciones { display: grid; gap: .7rem; }
@media (min-width: 760px) { .estaciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.estacion { background: #fff; border-radius: var(--radio); padding: .9rem; border-top: 6px solid var(--ancla); }
.estacion.riesgo { border-top-color: var(--coral); }
.estacion h3 { margin: 0 0 .5rem; font-family: var(--f-disp); font-weight: 800; text-transform: uppercase; font-size: 1.5rem; }
.estacion h3 small { font-family: var(--f-txt); font-weight: 400; font-size: .9rem; text-transform: none; color: var(--gris); }
.est-gente { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.est-gente li { display: flex; align-items: center; gap: .35rem; background: var(--acero-2); border-radius: 99px; padding: .2rem .6rem .2rem .2rem; font-weight: 700; font-size: .95rem; }
.est-gente li.completo { background: var(--limon); }
.est-gente img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; }
.est-gente b { font-family: var(--f-mono); font-size: .85rem; color: var(--gris); }
.est-nota { margin: .6rem 0 0; font-size: .95rem; }
.estacion.riesgo .est-nota { color: var(--coral-osc); font-weight: 700; }
.cubre { background: #fff; border-radius: var(--radio); padding: .8rem 1rem .8rem 2rem; margin: 0; display: grid; gap: .35rem; }
.cubre-est { color: var(--gris); }
.cubre-falta { color: var(--coral-osc); font-weight: 700; }
.brigada-acc { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .5rem; }

/* ── Editor ── */
.editor fieldset { border: 0; background: #fff; border-radius: var(--radio); padding: 0 1rem 1rem; margin: 0 0 .9rem; }
.editor fieldset { min-width: 0; }
.editor legend { font-family: var(--f-disp); font-weight: 900; text-transform: uppercase; font-size: 1.6rem; padding: .9rem 0 0; margin-bottom: .2rem; }
.campo { display: grid; gap: .25rem; margin-bottom: .7rem; font-weight: 700; font-size: .95rem; }
.campo input, .campo select, .campo textarea, .ed-ing input, .ed-ing select, .ed-puntos input {
  width: 100%; min-width: 0; border: 2px solid var(--acero); border-radius: 10px; padding: .5rem .6rem; min-height: 46px; background: #fff; font-weight: 400; font-size: 1rem; }
.campo-crit input { border-color: #f1a6b2; }
.campos-3, .campos-2 { display: grid; gap: 0 .6rem; }
@media (min-width: 640px) { .campos-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .campos-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.checks { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-weight: 400; }
.checks label { display: flex; align-items: center; gap: .35rem; min-height: 40px; }
.checks input { width: 20px; height: 20px; }
.ed-ings { display: grid; gap: .4rem; margin-bottom: .6rem; clear: both; }
.ed-ing { display: grid; grid-template-columns: minmax(0, 1fr) 5.2rem 5.4rem 44px; gap: .35rem; }
.ed-x { border: 0; background: var(--acero-2); border-radius: 10px; min-height: 44px; color: var(--rojo); font-weight: 700; }
.ed-pasos { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .7rem; clear: both; }
.ed-paso { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: .7rem; border: 2px solid var(--acero-2); border-radius: 12px; padding: .6rem; }
.ed-media { display: grid; gap: .35rem; align-content: start; }
.ed-media img, .ed-media video, .ed-sinfoto { width: 110px; height: 110px; object-fit: cover; border-radius: 8px; background: var(--acero); display: grid; place-items: center; text-align: center; font-size: .85rem; color: var(--gris); padding: .3rem; }
.ed-media .btn { font-size: .8rem; padding: .3rem .4rem; }
.ed-mover { grid-column: 1 / -1; display: flex; gap: .35rem; justify-content: flex-end; }
.ed-mover button { min-width: 44px; min-height: 40px; border: 0; border-radius: 8px; background: var(--acero-2); }
.ed-mover button:last-child { color: var(--rojo); }
.ed-mover button:disabled { opacity: .3; }
@media (max-width: 520px) { .ed-paso { grid-template-columns: minmax(0, 1fr); } .ed-media { grid-template-columns: 110px minmax(0, 1fr); align-items: center; } }
.ed-empl { display: grid; gap: .8rem; clear: both; }
@media (min-width: 700px) { .ed-empl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ed-empl-foto { position: relative; border-radius: 12px; overflow: hidden; background: var(--acero); aspect-ratio: 1; display: grid; place-items: center; cursor: crosshair; }
.ed-empl-foto img { width: 100%; height: 100%; object-fit: cover; }
.ed-puntos { padding-left: 1.4rem; display: grid; gap: .4rem; margin: .4rem 0 .6rem; }
.ed-puntos li { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; gap: .3rem; }
.ayuda { color: var(--gris); font-size: .92rem; margin: .3rem 0; font-weight: 400; }
.ed-error { color: var(--rojo); font-weight: 700; min-height: 1.4em; }
.ed-acc { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; }

/* ── Guía ── */
.guia { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; max-width: 440px; margin: 0 auto; background: var(--ancla); color: #fff; border-radius: 16px; padding: .9rem 1rem;
  box-shadow: 0 12px 30px rgba(8, 24, 40, .45); border: 2px solid var(--limon); animation: sube .35s ease; }
.guia-n { margin: 0; font-size: .8rem; color: var(--limon); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.guia-t { margin: .1rem 0 .2rem; font-family: var(--f-disp); font-weight: 900; text-transform: uppercase; font-size: 1.5rem; line-height: 1; }
.guia-p { margin: 0 0 .6rem; color: #dbe5ee; }
.guia-acc { display: flex; align-items: center; gap: .8rem; }
.guia-saltar { border: 0; background: none; color: #b9c8d8; text-decoration: underline; min-height: 40px; }
body.con-guia .cta-fijo { display: none; }

.guia-foco { outline: 4px solid var(--coral); outline-offset: 4px; animation: llama 1.4s infinite; }
@keyframes llama { 50% { outline-color: var(--limon); } }

/* ── Toast ── */
.aviso-toast { position: fixed; left: 50%; top: calc(var(--cab) + 10px); z-index: 130; transform: translate(-50%, -20px); opacity: 0; pointer-events: none;
  background: var(--ancla); color: #fff; padding: .7rem 1rem; border-radius: 12px; font-weight: 700; width: max-content; max-width: calc(100vw - 32px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35); transition: opacity .2s, transform .2s; text-align: center; }
.aviso-toast.on { opacity: 1; transform: translate(-50%, 0); }
body.en-cocina .aviso-toast { top: 62px; border: 2px solid #4f7396; }
body.en-cocina .aviso-toast.on { transform: translate(-50%, 0); }
.aviso-toast.t-lima { background: var(--limon); color: var(--ancla); }
.aviso-toast.t-rojo { background: var(--rojo); }
.mini-timers { position: fixed; left: 12px; bottom: 72px; z-index: 55; border: 0; border-radius: 99px; background: var(--ancla); color: var(--limon); font-weight: 700; padding: .6rem 1rem; min-height: 48px;
  box-shadow: 0 8px 20px rgba(8, 24, 40, .4); font-family: var(--f-mono); }
.mini-timers.hecho { background: var(--limon); color: var(--ancla); animation: tiembla .5s 3; }

/* ── CTA y pie ── */
.restaurar-pie { margin: 2.4rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; color: var(--gris); }
.cta { margin-top: 2rem; background: var(--ancla); color: #fff; border-radius: 20px; padding: 1.6rem 1.2rem; position: relative; overflow: hidden; }
.cta::after { content: ''; position: absolute; right: -40px; bottom: -40px; width: 180px; height: 180px; border-radius: 50%; border: 18px solid var(--coral); opacity: .35; }
.cta-in { position: relative; z-index: 1; max-width: 640px; }
.cta-ojo { margin: 0; color: var(--limon); font-weight: 700; }
.cta h2 { font-family: var(--f-disp); font-weight: 900; text-transform: uppercase; font-size: clamp(2rem, 7vw, 3rem); line-height: .95; margin: .3rem 0 .6rem; }
.cta p { color: #dbe5ee; }
.cta-botones { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.cta-tel { color: #fff; }
.cta-fijo { position: fixed; right: 12px; bottom: 12px; z-index: 50; display: flex; align-items: center; gap: .45rem; background: #0F7A6E; color: #fff; text-decoration: none;
  border-radius: 99px; padding: .5rem .9rem .5rem .6rem; min-height: 48px; box-shadow: 0 8px 20px rgba(8, 24, 40, .35); font-size: .9rem; max-width: calc(100vw - 24px); }
.cta-fijo .ico-wa { width: 26px; height: 26px; flex: none; }
.cta-fijo:hover { background: #0B6359; }
@media (max-width: 480px) { .cta-fijo-txt { font-size: .82rem; } }
.pie { background: var(--ancla); color: #c3d2e1; padding: 1.6rem 1rem calc(5rem + env(safe-area-inset-bottom)); margin-top: 2.5rem; font-size: .92rem; text-align: center; }
.pie p { margin: .3rem auto; max-width: 70ch; }
.pie a { color: #fff; }
.pie .credito { margin-top: 1rem; color: #e2e9f0; }
.pie-imagenes { font-style: italic; }
.sin-js { background: var(--limon); padding: 1rem; text-align: center; margin: 0; }

/* ── Página legal ── */
.legal { max-width: 760px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.legal h1 { font-family: var(--f-disp); font-weight: 900; text-transform: uppercase; font-size: 2.6rem; line-height: 1; }
.legal h2 { font-size: 1.25rem; margin-top: 1.6rem; }
.legal-meta { color: var(--gris); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.guia.guia-arriba { bottom: auto; top: calc(var(--cab) + 10px); }
.empl-unico { display: grid; gap: .8rem; }
@media (min-width: 760px) { .empl-unico { max-width: none; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); align-items: start; } }
.leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.leyenda li { display: flex; align-items: center; gap: .6rem; background: #fff; border-radius: 12px; padding: .5rem .7rem; font-weight: 700; font-size: 1.08rem; }
.leyenda b { width: 32px; height: 32px; border-radius: 50%; background: var(--limon); color: var(--ancla); border: 3px solid var(--ancla); display: grid; place-items: center; font-family: var(--f-mono); flex: none; }

body.en-porciones .cta-fijo { display: none; }
.ck-paso.con-crit.con-reloj .ck-tx { font-size: clamp(1.35rem, 5.4vw, 2.4rem); }
.ck-paso.con-crit.con-reloj .ck-media { height: min(16vh, 92vw); }
.porc-tit #porc-n { text-align: right; }
.tuya { position: relative; }
.pin-tuyo b { animation: none; background: #fff; }
.pin-tuyo.pin-si b { background: var(--limon); }
.pin-tuyo.pin-no b { background: var(--coral); }
.ck-final .pin-tuyo { transform: translate(-13px, -50%); }
@media (max-width: 599px) { .comparar { gap: .4rem; } }
body.con-guia .pie { padding-bottom: 16rem; }
@media (max-width: 640px) { .chips { flex-wrap: wrap; overflow: visible; } }
.ord-flechas button { min-height: 44px; height: auto; }
#btn-sonido { min-width: 44px; min-height: 44px; }
.ord-asa { color: var(--gris); }
.tk-rec { font-size: .78rem; }
.ck-riel { padding-top: 16px; }