/* diegodoal · componentes
   Solo usa tokens semánticos de tokens.css. Si aquí aparece un #hex o un px suelto, es un bug. */

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-fondo);color:var(--color-texto);font:var(--peso-texto) var(--t-m)/var(--interlineado) var(--fuente-texto)}
a{color:inherit}
img{max-width:100%;display:block}
button{font:inherit}
:focus-visible{outline:2px solid var(--color-texto);outline-offset:3px}

/* layout */
.wrap{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter)}
.seccion{padding:var(--e-8) 0;border-bottom:var(--borde) solid var(--color-linea)}
.grid{display:grid;gap:var(--e-5)}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.fila{display:flex;gap:var(--e-3);flex-wrap:wrap;align-items:center}

/* tipo */
h1,h2,h3{font-family:var(--fuente-titulo);margin:0;letter-spacing:var(--tracking-titulo);line-height:var(--interlineado-titulo)}
.t-portada{font-size:var(--t-4xl);font-weight:var(--peso-titulo);line-height:1}
.t-seccion{font-size:var(--t-2xl);font-weight:var(--peso-fuerte);text-transform:var(--caja-seccion);letter-spacing:0;margin:var(--e-2) 0 var(--e-4)}
.t-receta{font-size:var(--t-3xl);font-weight:var(--peso-titulo)}
.t-sub{font-size:var(--t-l);font-weight:var(--peso-fuerte);margin-bottom:var(--e-2)}
p{margin:0 0 var(--e-3);max-width:var(--medida)}
.entrada{font-size:var(--t-l);color:var(--color-texto-suave);max-width:56ch}
.nota{font-size:var(--t-s);color:var(--color-texto-suave)}
.num{font-size:var(--t-xs);color:var(--color-texto-suave);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.cifra{font-variant-numeric:tabular-nums;font-weight:var(--peso-fuerte)}
code,pre{font:var(--t-xs)/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
pre{background:var(--color-superficie-2);border-radius:var(--radio-s);padding:var(--e-4);overflow:auto;margin:0}

/* cabecera */
.cabecera{display:flex;justify-content:space-between;align-items:center;gap:var(--e-4);padding:var(--e-4) var(--gutter);max-width:var(--ancho);margin:0 auto;border-bottom:var(--borde) solid var(--color-linea)}
.logo{font:var(--peso-fuerte) var(--t-xl)/1 var(--fuente-titulo);text-decoration:none;letter-spacing:-.01em}
.cabecera nav{display:flex;gap:var(--e-4);flex-wrap:wrap;font-size:var(--t-s);color:var(--color-texto-suave);align-items:center}
.cabecera nav a{text-decoration:none}
.cabecera nav a:hover{color:var(--color-texto)}

/* superficie */
.tarjeta{background:var(--color-superficie);border:var(--borde) solid var(--color-linea);border-radius:var(--radio-m);padding:var(--e-5)}

/* botones y chips */
.boton{display:inline-flex;align-items:center;gap:var(--e-2);min-height:var(--toque);padding:0 var(--e-5);border-radius:var(--radio-pill);border:var(--borde-boton) solid transparent;background:var(--color-texto);color:var(--color-fondo);font-weight:var(--peso-fuerte);font-size:var(--t-s);text-decoration:none;cursor:pointer;transition:transform var(--dur) var(--curva)}
.boton:active{transform:scale(.97)}
.boton.secundario{background:transparent;color:var(--color-texto);border-color:var(--color-texto)}
.boton.acento{background:var(--color-acento);color:var(--color-sobre-acento)}
.chips{display:flex;gap:var(--e-2);flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--e-4);border:var(--borde) solid var(--color-linea);border-radius:var(--radio-pill);background:var(--color-superficie);color:var(--color-texto);font-size:var(--t-s);cursor:pointer;transition:background var(--dur) var(--curva)}
.chip[aria-pressed="true"]{background:var(--color-texto);color:var(--color-fondo);border-color:var(--color-texto)}

/* minuto del vídeo */
.minuto{display:inline-flex;align-items:center;gap:var(--e-1);font-size:var(--t-xs);font-weight:var(--peso-fuerte);font-variant-numeric:tabular-nums;background:var(--color-acento);color:var(--color-sobre-acento);padding:var(--e-1) var(--e-3);border-radius:var(--radio-pill);text-decoration:none;white-space:nowrap}
.minuto::before{content:"▶";font-size:.8em}

/* mano */
.mano{font:700 var(--t-mano)/1 var(--fuente-mano);color:var(--color-mano)}
.subrayado{background:linear-gradient(transparent 60%,var(--color-acento) 60%,var(--color-acento) 90%,transparent 90%)}
.rayon{position:relative}
.rayon svg{position:absolute;overflow:visible;pointer-events:none;stroke:var(--color-mano)}

/* subtítulo */
.subtitulo{font:var(--peso-titulo) var(--t-subtitulo)/1.25 var(--fuente-titulo);color:var(--color-subtitulo);-webkit-text-stroke:var(--subtitulo-trazo) var(--color-subtitulo-borde);paint-order:stroke fill}
.fotograma{position:relative;border-radius:var(--radio-m);overflow:hidden;aspect-ratio:16/10;background:var(--color-superficie-2)}
.fotograma img{width:100%;height:100%;object-fit:cover}
.fotograma .subtitulo{position:absolute;inset:auto var(--e-3) 10%;text-align:center}
.fotograma .minuto{position:absolute;top:var(--e-3);left:var(--e-3)}
.cita q{font:var(--peso-titulo) var(--t-xl)/1.25 var(--fuente-titulo);quotes:"«" "»"}

/* tarjeta de receta */
.rtarjeta{text-decoration:none;display:block}
.rtarjeta .img{aspect-ratio:4/5;border-radius:var(--radio-m);overflow:hidden;background:var(--color-superficie-2)}
.rtarjeta img{width:100%;height:100%;object-fit:cover;transition:transform calc(var(--dur)*2) var(--curva)}
.rtarjeta:hover img{transform:scale(1.03)}
.rtarjeta .meta{display:flex;gap:var(--e-2);font-size:var(--t-xs);color:var(--color-texto-suave);margin:var(--e-3) 0 var(--e-1)}
.rtarjeta h3{font-size:var(--t-l);font-weight:var(--peso-fuerte)}

/* ingredientes */
.ing-cab{display:flex;justify-content:space-between;align-items:center;gap:var(--e-3);margin-bottom:var(--e-3);flex-wrap:wrap}
.raciones{display:inline-flex;align-items:center;border:var(--borde) solid var(--color-linea);border-radius:var(--radio-pill);background:var(--color-superficie)}
.raciones button{width:var(--toque);height:var(--toque);border:0;background:none;font-size:var(--t-l);color:var(--color-texto);cursor:pointer;border-radius:var(--radio-pill)}
.raciones output{min-width:96px;text-align:center;font-size:var(--t-s);font-variant-numeric:tabular-nums}
.ing{list-style:none;padding:0;margin:0}
.ing li{border-top:var(--borde) solid var(--color-linea)}
.ing label{display:flex;gap:var(--e-3);padding:var(--e-3) 0;cursor:pointer;align-items:baseline;min-height:var(--toque)}
.ing input{accent-color:var(--color-ok);width:18px;height:18px;flex:none;transform:translateY(3px)}
.ing .linea{display:grid;grid-template-columns:5.2em 1fr;column-gap:var(--e-3);align-items:baseline;flex:1}
.ing .q{font-weight:var(--peso-fuerte);white-space:nowrap}
.ing .sin-q .nombre{grid-column:1/-1}
.ing .nombre small{display:block;margin-top:2px}
.ing input:checked + .linea{text-decoration:line-through;color:var(--color-texto-suave)}
.equipo-sin-borde .equipo:first-child{border-top:0}
.ing small{color:var(--color-texto-suave)}

/* pasos */
.paso{display:grid;grid-template-columns:var(--toque) 1fr;gap:var(--e-4);padding:var(--e-5) 0;border-top:var(--borde) solid var(--color-linea)}
.paso .n{font:var(--peso-titulo) var(--t-xl)/1 var(--fuente-titulo);color:var(--color-texto-suave);font-variant-numeric:tabular-nums}
.paso .minuto{margin-top:var(--e-2)}
.paso .fotograma{margin-top:var(--e-3);max-width:360px;aspect-ratio:16/9;border-radius:var(--radio-s)}
.paso .fotograma .subtitulo{font-size:calc(var(--t-subtitulo)*.6)}

/* truco */
.truco{position:relative;background:var(--color-superficie);border:1.5px dashed var(--color-texto-suave);border-radius:var(--radio-m);padding:var(--e-5) var(--e-5) var(--e-4);margin-top:var(--e-6)}
.truco .mano{position:absolute;top:-.6em;left:var(--e-4);background:var(--color-fondo);padding:0 var(--e-2);transform:rotate(-3deg)}
.truco p{margin:0}

/* lo que uso */
.equipo{display:grid;grid-template-columns:64px 1fr auto;gap:var(--e-3);align-items:center;padding:var(--e-3) 0;border-top:var(--borde) solid var(--color-linea)}
.equipo .ph{width:64px;height:64px;border-radius:var(--radio-s);background:var(--color-superficie-2);display:grid;place-items:center;overflow:hidden;padding:var(--e-1)}
.equipo .ph img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply} /* el fondo blanco de Amazon se funde con el papel */
.equipo b{display:block;font-weight:var(--peso-fuerte)}
.equipo span{font-size:var(--t-s);color:var(--color-texto-suave)}
.equipo>a{font-size:var(--t-s);font-weight:var(--peso-fuerte);text-decoration:none;white-space:nowrap;min-height:var(--toque);display:inline-flex;align-items:center}

/* capítulos */
.capitulos{list-style:none;margin:0;padding:0;font-size:var(--t-s)}
.capitulos a{display:flex;gap:var(--e-3);padding:var(--e-2) 0;border-top:var(--borde) solid var(--color-linea);text-decoration:none;min-height:var(--toque);align-items:center}
.capitulos time{font-variant-numeric:tabular-nums;font-weight:var(--peso-fuerte);min-width:44px}

/* receta */
.receta{background:var(--color-superficie);border:var(--borde) solid var(--color-linea);border-radius:var(--radio-l);overflow:hidden}
.receta-cab{display:grid;grid-template-columns:1.1fr 1fr}
.receta-cab .txt{padding:var(--e-6)}
.receta-cab .fotograma{border-radius:0;aspect-ratio:auto;min-height:300px}
.datos{display:flex;gap:var(--e-5);flex-wrap:wrap;margin:var(--e-4) 0 var(--e-5);font-size:var(--t-s);color:var(--color-texto-suave)}
.datos b{display:block;font:var(--peso-titulo) var(--t-l)/1.1 var(--fuente-titulo);color:var(--color-texto)}
.receta-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--e-7);padding:var(--e-6);border-top:var(--borde) solid var(--color-linea)}
@media (max-width:760px){.receta-cab,.receta-cuerpo{grid-template-columns:1fr}.receta-cuerpo{gap:var(--e-6);padding:var(--e-5)}.receta-cab .txt{padding:var(--e-5)}}

/* barra fija de cocina (móvil) */
.barra-cocina{position:sticky;bottom:0;display:none;gap:var(--e-2);padding:var(--e-3) var(--gutter);background:var(--color-fondo);border-top:var(--borde) solid var(--color-linea)}
@media (max-width:760px){.barra-cocina{display:flex}}
.barra-cocina .boton{flex:1;justify-content:center}


.pie{padding:var(--e-7) 0;font-size:var(--t-s);color:var(--color-texto-suave)}
.tema{border:var(--borde) solid var(--color-linea);background:var(--color-superficie);color:var(--color-texto);border-radius:var(--radio-pill);padding:var(--e-1) var(--e-3);font-size:var(--t-xs);cursor:pointer;min-height:32px}

/* grupos de ingredientes y fases de pasos */
.ing-grupo{font:var(--peso-fuerte) var(--t-s)/1.3 var(--fuente-titulo);color:var(--color-texto-suave);margin:var(--e-5) 0 var(--e-1);text-transform:var(--caja-seccion);letter-spacing:.02em}
.ing-grupo:first-child{margin-top:0}
.fase{font:var(--peso-fuerte) var(--t-s)/1.3 var(--fuente-titulo);color:var(--color-texto-suave);text-transform:var(--caja-seccion);letter-spacing:.02em;padding:var(--e-6) 0 var(--e-2)}
.fase:first-of-type{padding-top:var(--e-3)}

/* borrador: lo que el flujo no pudo confirmar */
.revisar{display:inline-flex;align-items:center;gap:var(--e-1);font-size:var(--t-xs);font-weight:var(--peso-fuerte);color:var(--color-mano);border:1.5px dashed currentColor;border-radius:var(--radio-pill);padding:0 var(--e-2);margin-left:var(--e-1);white-space:nowrap;vertical-align:1px}
.borrador{display:flex;gap:var(--e-4);align-items:flex-start;justify-content:space-between;flex-wrap:wrap;border:1.5px dashed var(--color-mano);border-radius:var(--radio-m);padding:var(--e-4) var(--e-5);margin-bottom:var(--e-5);background:var(--color-superficie)}
.borrador b{font-family:var(--fuente-titulo)}
.borrador ul{margin:var(--e-2) 0 0;padding-left:var(--e-5);font-size:var(--t-s)}

/* notas de diego */
.notas{list-style:none;margin:0;padding:0}
.notas li{display:flex;gap:var(--e-3);justify-content:space-between;align-items:baseline;padding:var(--e-3) 0;border-top:var(--borde) solid var(--color-linea);font-size:var(--t-s)}

/* vídeo ligero: miniatura que abre YouTube */
.video{position:relative;display:block;border-radius:var(--radio-m);overflow:hidden;aspect-ratio:16/9;background:var(--color-superficie-2)}
.video img{width:100%;height:100%;object-fit:cover}
.video span{position:absolute;inset:auto auto var(--e-3) var(--e-3);background:var(--color-acento);color:var(--color-sobre-acento);font-weight:var(--peso-fuerte);font-size:var(--t-s);padding:var(--e-2) var(--e-4);border-radius:var(--radio-pill)}

/* reproductor flotante: solo existe cuando tocas un minuto */
.reproductor{position:fixed;right:var(--e-4);bottom:var(--e-4);width:min(420px,calc(100vw - 2*var(--gutter)));z-index:20;background:var(--color-texto);border-radius:var(--radio-m);overflow:hidden;box-shadow:0 0 0 1px var(--color-linea)}
.reproductor .marco{aspect-ratio:16/9}
.reproductor .marco>*{width:100%;height:100%;display:block;border:0}
.pip-barra{display:flex;justify-content:space-between;align-items:center;height:32px;padding:0 var(--e-1) 0 var(--e-3);color:var(--color-fondo);cursor:grab;touch-action:none;user-select:none;font-size:var(--t-s)}
.moviendo .pip-barra{cursor:grabbing}
.moviendo .marco{pointer-events:none} /* el iframe no se traga el arrastre */
.pip-barra>span{display:flex;align-items:center;gap:var(--e-1)}
.pip-tam{height:28px;border:0;border-radius:var(--radio-pill);background:var(--color-velo);color:var(--color-fondo);font:var(--peso-fuerte) var(--t-xs)/1 var(--fuente-texto);padding:0 var(--e-2);cursor:pointer}
.reproductor .cerrar{width:28px;height:28px;border:0;border-radius:var(--radio-pill);background:transparent;color:var(--color-fondo);font-size:var(--t-l);line-height:1;cursor:pointer}

@media (max-width:760px){.reproductor{width:min(62vw,300px)}}
.reproductor.cayendo{transition:left calc(var(--dur)*2) cubic-bezier(.3,1.35,.5,1),top calc(var(--dur)*2) cubic-bezier(.3,1.35,.5,1)} /* un rebote suave al pegarse */
.paso.activo{background:linear-gradient(90deg,var(--color-acento) 0 3px,transparent 3px)}
.paso.activo .n{color:var(--color-texto)}

/* modo cocina: pantalla completa, un paso a la vez */
.cocina{position:fixed;inset:0;z-index:30;background:var(--color-fondo);display:grid;grid-template-rows:auto auto 1fr auto;max-width:100vw}
.cocina[hidden]{display:none}
.cc-top{position:relative;display:flex;align-items:center;gap:var(--e-3);padding:var(--e-3) var(--gutter);border-bottom:var(--borde) solid var(--color-linea)}
.cc-prog{font-size:var(--t-s);color:var(--color-texto-suave);margin-right:auto;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-timers{display:flex;gap:var(--e-2);flex:none}
.cc-timer{min-height:var(--toque);border:0;border-radius:var(--radio-pill);background:var(--color-texto);color:var(--color-fondo);font:var(--peso-fuerte) var(--t-s)/1 var(--fuente-texto);font-variant-numeric:tabular-nums;padding:0 var(--e-4);cursor:pointer}
.cc-timer.listo{background:var(--color-acento);color:var(--color-sobre-acento);animation:cc-late 1s steps(2) infinite}
@keyframes cc-late{50%{opacity:.4}}
.cc-cerrar{width:var(--toque);height:var(--toque);border:var(--borde) solid var(--color-linea);border-radius:var(--radio-pill);background:var(--color-superficie);color:var(--color-texto);font-size:var(--t-xl);line-height:1;cursor:pointer}
.cc-main{overflow:auto;padding:var(--e-6) var(--gutter);max-width:820px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:var(--e-5)}
.cc-ing ul{list-style:none;margin:0;padding:var(--e-3) var(--e-4);background:var(--color-superficie);border:var(--borde) solid var(--color-linea);border-radius:var(--radio-m);font-size:var(--t-m)}
.cc-ing ul{list-style:disc;padding-left:calc(var(--e-4) + 1.1em)}
.cc-ing li{padding:var(--e-1) 0}
.cc-ing li::marker{color:var(--color-texto-suave)}
.cc-ing .linea{display:inline}.cc-ing .nombre small{display:inline;margin-left:var(--e-1)}
.cc-ing small{color:var(--color-texto-suave)}
.cc-texto{font:var(--peso-fuerte) clamp(24px,4.4vw,38px)/1.3 var(--fuente-titulo);letter-spacing:-.01em}
.cc-extra{display:flex;gap:var(--e-2);flex-wrap:wrap;align-items:center}
.cc-extra .boton{font-size:var(--t-l);min-height:56px;font-variant-numeric:tabular-nums}
.cc-extra .minuto{font-size:var(--t-s);padding:var(--e-2) var(--e-4)}
.cc-foto .fotograma{max-width:560px;aspect-ratio:16/9}
.cc-pie{border-top:var(--borde) solid var(--color-linea);padding:var(--e-3) var(--gutter) var(--e-4);background:var(--color-fondo)}
.cc-despues{font-size:var(--t-s);color:var(--color-texto-suave);margin:0 auto var(--e-3);max-width:820px}
.cc-nav{display:grid;grid-template-columns:auto 1fr;gap:var(--e-3);max-width:820px;margin:0 auto}
.cc-nav .boton{min-height:64px;justify-content:center;font-size:var(--t-l);white-space:nowrap}
.cc-nav .boton:disabled{opacity:.35}
.reproductor{z-index:40}

/* dígitos de ancho fijo (contadores que cambian) */
.dig{font-style:normal;display:inline-block;width:var(--ancho-digito);text-align:center}

/* timers oscuros: el amarillo queda reservado para el vídeo */
.cc-extra .cc-tempo{background:var(--color-texto);color:var(--color-fondo);font-size:var(--t-m)}
.cc-timer::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--color-acento);margin-right:var(--e-2);vertical-align:1px;animation:cc-late 1s steps(2) infinite} /* punto que late: está corriendo */
.cc-timer.listo::before{display:none}

.cc-barra{height:4px;background:var(--color-linea)}
.cc-barra i{display:block;height:100%;background:var(--color-texto);transition:width var(--dur) var(--curva)}

/* modo cocina en escritorio: texto a la izquierda, fotograma a la derecha, sin scroll */
@media (min-width:900px){
  .cc-main{max-width:1240px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"ing foto" "texto foto" "extra foto";grid-template-rows:auto auto 1fr;align-content:center;column-gap:var(--e-7);row-gap:var(--e-5)}
  .cc-ing{grid-area:ing}.cc-texto{grid-area:texto;font-size:clamp(26px,2.3vw,38px)}.cc-extra{grid-area:extra;align-self:start}
  .cc-foto{grid-area:foto;align-self:center}
  .cc-foto .fotograma{max-width:none;max-height:calc(100vh - 260px)}
  .cc-main:has(.cc-foto:empty){max-width:820px;grid-template-columns:1fr;grid-template-areas:"ing" "texto" "extra"}
  .cc-despues,.cc-nav{max-width:1240px}
}

.cc-timer{white-space:nowrap}
.cc-mas{display:inline-block;margin-left:var(--e-1);padding:0 var(--e-2);border-radius:var(--radio-pill);background:var(--color-fondo);color:var(--color-texto);font-size:var(--t-xs);line-height:1.6}
.cc-lista{position:absolute;top:calc(100% + var(--e-1));right:var(--gutter);z-index:2;min-width:260px;background:var(--color-superficie);border:var(--borde) solid var(--color-linea);border-radius:var(--radio-m);padding:var(--e-2)}
.cc-fila{display:flex;align-items:center;gap:var(--e-2)}
.cc-fila+.cc-fila{border-top:var(--borde) solid var(--color-linea)}
.cc-ir{flex:1;text-align:left;min-height:var(--toque);border:0;background:none;color:var(--color-texto);font:var(--peso-texto) var(--t-s)/1 var(--fuente-texto);cursor:pointer;padding:0 var(--e-2)}
.cc-quitar{width:var(--toque);height:var(--toque);border:0;border-radius:var(--radio-pill);background:none;color:var(--color-texto-suave);font-size:var(--t-l);cursor:pointer}
.cc-extra .cc-tempo.corriendo{background:transparent;color:var(--color-texto);border-color:var(--color-texto)}

/* minuto mini: mismo gesto (amarillo = vídeo), menos protagonismo */
.minuto.mini{background:none;padding:0;color:var(--color-texto-suave);gap:var(--e-1);vertical-align:baseline}
.minuto.mini::before{display:inline-grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:var(--color-acento);color:var(--color-sobre-acento);font-size:.6em;padding-left:.1em}
.minuto.mini:hover{color:var(--color-texto);text-decoration:underline;text-underline-offset:3px}


/* cabeceras de columna alineadas: misma altura de control y mismo arranque del primer grupo */
.ing-cab{min-height:var(--toque);margin-bottom:var(--e-4)}
.raciones{height:var(--toque);box-sizing:border-box}
.raciones button{height:calc(var(--toque) - 2px);width:calc(var(--toque) - 2px)}
.ing-cab+.ing-grupo,.ing-cab+.fase{margin-top:0;padding-top:0}
.fase{margin:0}

/* menú: en móvil se pliega tras un botón */
.menu-btn{display:none;min-height:var(--toque);padding:0 var(--e-4);border:var(--borde) solid var(--color-linea);border-radius:var(--radio-pill);background:var(--color-superficie);color:var(--color-texto);font:var(--peso-fuerte) var(--t-s)/1 var(--fuente-texto);cursor:pointer}
.cabecera{position:relative}
@media (max-width:760px){
  .menu-btn{display:inline-flex;align-items:center}
  .cabecera nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:15;flex-direction:column;align-items:stretch;gap:0;padding:var(--e-2) var(--gutter) var(--e-4);background:var(--color-fondo);border-bottom:var(--borde) solid var(--color-linea)}
  .cabecera nav.abierto{display:flex}
  .cabecera nav a{display:flex;align-items:center;min-height:var(--toque);font-size:var(--t-l);color:var(--color-texto);border-top:var(--borde) solid var(--color-linea)}
  .cabecera nav a:first-child{border-top:0}
}

/* botones de icono: guardar, compartir, YouTube */
.iconos{display:inline-flex;gap:var(--e-2)}
.boton-icono{display:inline-grid;place-items:center;width:var(--toque);height:var(--toque);border-radius:var(--radio-pill);border:0;border:var(--borde-boton) solid var(--color-linea);background:var(--color-superficie);color:var(--color-texto);cursor:pointer;text-decoration:none}
.boton-icono svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.boton-icono[aria-pressed="true"] svg{fill:var(--color-favorito);stroke:var(--color-favorito)}
svg.yt-logo{width:24px;height:17px;stroke:none}
svg.yt-logo rect{fill:var(--color-youtube)}
svg.yt-logo path{fill:var(--papel-50);stroke:none}
.con-yt svg.yt-logo{width:20px;height:14px}
.pip-btn{display:inline-grid;place-items:center;height:28px;padding:0 var(--e-2);border-radius:var(--radio-pill);background:var(--color-velo)}
.pip-btn svg.yt-logo{width:20px;height:14px}

/* corazón en tarjetas */
.rcaja{position:relative;min-width:0}
.corazon{position:absolute;top:var(--e-2);right:var(--e-2);z-index:2;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:var(--radio-pill);background:var(--color-superficie);color:var(--color-texto);cursor:pointer}
.corazon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.corazon[aria-pressed="true"] svg{fill:var(--color-favorito);stroke:var(--color-favorito)}

/* avisos y celebración */
.aviso-flotante{position:fixed;left:50%;top:calc(var(--toque) + var(--e-6));transform:translate(-50%,-12px);opacity:0;z-index:70;background:var(--color-texto);color:var(--color-fondo);padding:var(--e-3) var(--e-5);border-radius:var(--radio-pill);font-size:var(--t-s);font-weight:var(--peso-fuerte);transition:opacity var(--dur),transform var(--dur) var(--curva);pointer-events:none}
.aviso-flotante.visible{opacity:1;transform:translate(-50%,0)}
.celebra{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:var(--gutter);background:var(--color-velo)}
.celebra-caja{width:min(440px,100%);background:var(--color-fondo);border-radius:var(--radio-l);padding:var(--e-5);text-align:center;display:grid;gap:var(--e-2)}
.celebra-caja img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radio-m);margin-bottom:var(--e-2)}
.celebra-caja .mano{font-size:calc(var(--t-mano)*1.4);transform:rotate(-3deg);margin:0}
.celebra-caja .t-sub{margin:0}

/* cabecera fija: se esconde al bajar y vuelve al subir */
.cabecera{position:sticky;top:0;z-index:20;background:var(--color-fondo);transition:transform calc(var(--dur)*1.5) var(--curva)}
.cabecera>*{position:relative}
.cabecera.oculta{transform:translateY(-100%)}

/* acciones sobre la foto (igual que en la tarjeta) */
.foto-acciones{position:absolute;top:var(--e-3);right:var(--e-3);display:flex;gap:var(--e-2);z-index:2}
.foto-acciones .corazon{position:static;width:var(--toque);height:var(--toque)}
.corazon svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.receta-cab .t-receta{font-size:clamp(28px,3.3vw,44px);text-wrap:balance}
.enlace-yt{display:inline-flex;align-items:center;gap:var(--e-1);margin-top:var(--e-3);font-size:var(--t-s);color:var(--color-texto-suave);text-decoration:none;min-height:var(--toque)}
.enlace-yt:hover{color:var(--color-texto);text-decoration:underline}
.enlace-yt svg.yt-logo{width:18px;height:13px}

.ing-cab{flex-wrap:wrap;row-gap:var(--e-1)}
.raciones-nota{flex-basis:100%;text-align:right;font-size:var(--t-xs);color:var(--color-texto-suave);min-height:1.4em}
.raciones-nota button{border:0;background:none;padding:0;font:inherit;color:var(--color-texto);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* minuto mini: tamaño propio, no altera el interlineado de la línea donde vive */
.minuto.mini{font-size:var(--t-xs);line-height:1;vertical-align:baseline;padding:0;white-space:nowrap}
.minuto.mini::before{width:16px;height:16px;font-size:8px;line-height:16px;padding-left:1px;flex:none}
.equipo span{line-height:var(--interlineado)}
.con-yt{gap:var(--e-2)}
.video span{display:inline-flex;align-items:center;gap:var(--e-2)}
.video span svg.yt-logo{width:20px;height:14px}

/* hover: solo en dispositivos con puntero fino, para que en el móvil no se queden "pegados" */
.boton,.chip,.boton-icono,.corazon,.minuto,.raciones button,.cc-quitar,.cc-ir,.pip-tam,.pip-btn,.menu-btn,.equipo>a,.capitulos a,.cabecera nav a,.enlace-yt{transition:background-color var(--dur) var(--curva),color var(--dur) var(--curva),box-shadow var(--dur) var(--curva),transform var(--dur) var(--curva)}
@media (hover:hover){
  .boton:hover{background:var(--hover-primario)}
  .boton.secundario:hover{background:var(--hover-suave)}
  .boton.cc-tempo:hover{background:var(--hover-primario)}
  .cc-extra .cc-tempo.corriendo:hover{background:var(--hover-suave)}
  .chip:hover{border-color:var(--color-texto)}
  .chip[aria-pressed="true"]:hover{background:var(--hover-primario)}
  .boton-icono:hover,.corazon:hover{background:var(--hover-suave)}
  .corazon:hover svg,.boton-icono:hover svg{transform:scale(1.08)}
  .minuto:not(.mini):hover{background:var(--hover-acento)}
  .raciones button:hover,.cc-quitar:hover{background:var(--hover-suave)}
  .cc-ir:hover{background:var(--hover-suave);border-radius:var(--radio-s)}
  .menu-btn:hover{background:var(--hover-suave)}
  .equipo>a:hover,.capitulos a:hover{color:var(--color-texto);text-decoration:underline;text-underline-offset:3px}
  .capitulos a:hover time{text-decoration:none}
  .rtarjeta:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
  .pip-tam:hover,.pip-btn:hover{background:color-mix(in srgb,var(--color-velo) 60%,transparent)}
  .producto:hover b{text-decoration:underline;text-underline-offset:3px}
}
.corazon svg,.boton-icono svg{transition:transform var(--dur) var(--curva)}
.boton:active,.chip:active,.boton-icono:active,.corazon:active{transform:scale(.97)}

/* botones con icono + texto (celebración) */
.con-icono svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.con-icono[aria-pressed="true"] svg{fill:var(--color-favorito);stroke:var(--color-favorito)}
.cerrar-texto{justify-self:center;min-height:var(--toque);padding:0 var(--e-4);border:0;background:none;color:var(--color-texto-suave);font:var(--peso-fuerte) var(--t-s)/1 var(--fuente-texto);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){.cerrar-texto:hover{color:var(--color-texto)}}

/* firma: por si alguien hace captura */
.firma{display:flex;align-items:center;justify-content:center;gap:var(--e-2);padding-top:var(--e-3);margin-top:var(--e-1);border-top:var(--borde) solid var(--color-linea);font-size:var(--t-xs);color:var(--color-texto-suave)}
.dda{display:inline-grid;place-items:center;height:24px;padding:0 var(--e-2);border-radius:6px;background:var(--color-texto);color:var(--color-acento);font:var(--peso-titulo) 13px/1 var(--fuente-titulo);letter-spacing:-.02em}

/* modo cocina en móvil: nada se sale de la pantalla */
.cocina{overflow-x:hidden}
.cc-main,.cc-pie{min-width:0;max-width:100vw}
.cc-texto{overflow-wrap:anywhere}
@media (max-width:760px){
  .cc-top{flex-wrap:wrap;row-gap:var(--e-2)}
  .cc-prog{order:0}
  .cc-cerrar{order:1;flex:none}
  .cc-timers{order:2;flex-basis:100%}
  .cc-timers:empty{display:none}
  .cc-timer{max-width:100%}
  .cc-lista{left:var(--gutter);right:var(--gutter);min-width:0}
}

/* nunca scroll horizontal (ni rebote lateral en iOS) */
html,body{overflow-x:clip;overscroll-behavior-x:none}
.cabecera::before{content:"";position:absolute;top:0;bottom:0;left:-100vmax;right:-100vmax;background:var(--color-fondo);border-bottom:var(--borde) solid var(--color-linea);z-index:-1}