/* Carnes Los Cedros SR. Estilos del sitio.
   Dirección de diseño B, "El mostrador", versión 2 (diseno/b-mostrador-v2.html).
   Este archivo se edita aquí (fuente/estilos.css); construir.ps1 lo copia a sitio/. */

/* ---------- Tipografías (alojadas en el sitio, carpeta fuentes/) ---------- */
@font-face{
  font-family:"Young Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url("fuentes/young-serif-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Source Sans 3";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fuentes/source-sans-3-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Variables ---------- */
:root{
  --crema:#FDF0E0;        /* fondo: el crema del aro del logo */
  --papel:#FFF9F1;        /* tablillas, carta de precios */
  --arena:#EBD6B8;        /* madera clara: banda "Dónde y cuándo" */
  --borde:#8F6A47;        /* madera media: filetes y punteados (no texto) */
  --madera:#3E2618;       /* madera oscura: bandas */
  --noche:#1F120A;        /* madera muy oscura: cabecera, portada, velo y pie */
  --tinta:#2A1810;        /* texto */
  --tinta-suave:#5C4334;  /* texto secundario */
  --ladrillo:#A93424;     /* color principal */
  --ladrillo-oscuro:#86271A;
  --coral:#FF5A5A;        /* coral del logo: solo números grandes sobre madera */
  --trigo:#FFD9A0;        /* rótulos, enlaces y foco sobre madera */
  --verde:#1C6E1A;        /* WhatsApp y foco */
  --verde-oscuro:#155514;
  --verde-claro:#7ED672;  /* "CARNES" sobre madera */

  --serif:"Young Serif", Georgia, "Times New Roman", serif;
  --sans:"Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --ancho:76rem;
  --margen:1rem;
  --canal:max(var(--margen), calc((100vw - var(--ancho)) / 2 + var(--margen)));
  --cabecera:6.85rem;     /* alto de la cabecera (marca + menú) */
  --barra:4.35rem;        /* alto de la barra fija del celular (botón + márgenes + filete) */
  --aire:clamp(4rem, 2.6rem + 7vw, 8.5rem); /* ritmo vertical entre secciones */
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:1rem;scroll-padding-bottom:calc(var(--barra) + 1rem)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;background:var(--crema);color:var(--tinta);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.6;
  padding-bottom:calc(var(--barra) + env(safe-area-inset-bottom,0px)); /* la barra fija no tapa el pie */
}
img,video{display:block;max-width:100%}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;margin:0;text-wrap:balance}
p{margin:0 0 1em}
a{color:var(--ladrillo);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--ladrillo-oscuro)}
:focus-visible{outline:3px solid var(--verde);outline-offset:3px;border-radius:3px}
.oscuro :focus-visible{outline-color:var(--trigo)}
[hidden]{display:none !important}
.envoltura{max-width:var(--ancho);margin-inline:auto;padding-inline:var(--margen)}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.saltar{position:absolute;left:.5rem;top:-5rem;z-index:30;background:var(--papel);color:var(--tinta);padding:.75rem 1rem;border:2px solid var(--tinta);border-radius:4px;font-weight:700}
.saltar:focus{top:.5rem}
.iconos{position:absolute;width:0;height:0;overflow:hidden}

/* Rótulo: versalitas pequeñas con un filete corto delante */
.rotulo{
  display:flex;align-items:center;gap:.7rem;margin:0 0 1rem;
  font:700 .78rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ladrillo);
}
.rotulo::before{content:"";flex:none;width:2rem;height:1px;background:currentColor}
.oscuro .rotulo{color:var(--trigo)}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:3.25rem;padding:.6rem 1.4rem;border-radius:4px;border:1.5px solid transparent;
  font:700 1.0625rem/1.2 var(--sans);letter-spacing:.01em;text-decoration:none;white-space:nowrap;
  transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,translate .2s;
}
.btn svg{flex:none}
.btn:hover{translate:0 -1px}
.btn:active{translate:0 0}
.btn--wa{background:var(--verde);color:#fff;box-shadow:0 10px 20px -12px rgba(10,40,10,.9)}
.btn--wa:hover{background:var(--verde-oscuro);color:#fff}
.btn--linea{border-color:var(--ladrillo);color:var(--ladrillo);background:transparent}
.btn--linea:hover{background:var(--ladrillo);color:#fff}
.btn--clara{border-color:var(--crema);color:var(--crema);background:transparent}
.btn--clara:hover{background:var(--crema);color:var(--noche)}
.acciones{display:flex;flex-wrap:wrap;gap:.75rem}
.acciones .btn{flex:1 1 auto}
/* Enlace de texto con zona de toque de 44 px */
.enlace{display:inline-flex;align-items:center;gap:.45rem;min-height:2.75rem;font-weight:700}
.enlace svg{flex:none;transition:translate .2s}
.enlace:hover svg{translate:.25rem 0}

/* ---------- Cabecera ---------- */
.cabecera{background:var(--noche);color:var(--crema);border-bottom:1px solid rgba(253,240,224,.22)}
.cabecera__fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:1.5rem}
.marca{display:inline-flex;align-items:center;gap:.7rem;min-height:4rem;text-decoration:none;color:var(--crema)}
.marca:hover{color:var(--crema)}
/* El logo original se muestra recortado a su óvalo; no se redibuja */
.logo{position:relative;flex:none;width:3.6rem;aspect-ratio:644/448;border-radius:50%;overflow:hidden;background:var(--crema)}
.logo img{position:absolute;max-width:none;width:118.6%;height:170.1%;left:-11.18%;top:-14.73%}
.marca__nombre{display:flex;flex-direction:column;line-height:1.05}
.marca__nombre small{font:700 .75rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--verde-claro)}
.marca__nombre span{font-family:var(--serif);font-size:1.3rem;margin-top:.25rem}
.menu{width:100%;border-top:1px solid rgba(253,240,224,.22)}
.menu ul{list-style:none;margin:0;padding:0;display:flex;justify-content:space-between;column-gap:.5rem}
.menu a{
  position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;min-width:2.75rem;
  color:var(--crema);font-weight:600;font-size:.95rem;text-decoration:none;white-space:nowrap;
}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:.45rem;height:1px;background:var(--trigo);scale:0 1;transform-origin:0 50%;transition:scale .25s}
.menu a:hover,.menu a[aria-current="page"]{color:var(--trigo)}
.menu a:hover::after,.menu a[aria-current="page"]::after{scale:1 1}
.cabecera__wa{display:none}
@media (max-width:23.4em){.menu a{font-size:.86rem}}

/* ---------- Fotos y video ----------
   Los archivos de los cortes ya vienen recortados (herramientas/imagenes.ps1 quita el borde donde
   estaba la estrella del generador), así que aquí no hay que ampliarlos.
   --p = object-position para centrar el corte; --s = escala; --o = origen de la escala. */
.foto{position:relative;overflow:hidden;margin:0;background:var(--madera);aspect-ratio:4/3}
.foto img,.foto video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--p,50% 50%);
  transform:scale(var(--s,1));transform-origin:var(--o,45% 45%);
}
.referencia{
  position:absolute;z-index:2;left:.75rem;top:.75rem;margin:0;padding:.3rem .55rem;
  background:var(--noche);color:var(--crema);border-radius:2px;
  font:700 .75rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;
}

/* Interruptor para pausar el movimiento (funciona sin JavaScript para la animación CSS) */
.pausa{position:absolute;z-index:3;right:.75rem;top:.75rem}
.pausa input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.pausa label{
  display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;min-width:2.75rem;padding:0 .85rem;
  background:var(--noche);color:var(--crema);border:1px solid rgba(253,240,224,.5);border-radius:2rem;
  font:600 .85rem/1 var(--sans);cursor:pointer;transition:background-color .2s;
}
.pausa input:hover + label{background:var(--madera)}
.pausa input:focus-visible + label{outline:3px solid var(--trigo);outline-offset:3px}
.pausa .i-reanudar,.pausa .t-reanudar{display:none}
.pausa input:checked + label .i-pausar,.pausa input:checked + label .t-pausar{display:none}
.pausa input:checked + label .i-reanudar,.pausa input:checked + label .t-reanudar{display:inline}

/* ---------- Tablilla de precio (el letrero que se clava en el corte) ---------- */
.tablilla{
  position:relative;background:var(--papel);color:var(--tinta);
  border:1.5px solid var(--tinta);border-radius:3px;padding:1.05rem .95rem .75rem;
  box-shadow:0 1px 0 rgba(42,24,16,.55),0 16px 26px -14px rgba(20,10,4,.75);
}
.tablilla::before{content:"";position:absolute;inset:3px;border:1px solid var(--borde);border-radius:1px;pointer-events:none}
.tablilla::after{content:"";position:absolute;left:50%;top:.3rem;width:.42rem;height:.42rem;margin-left:-.21rem;border-radius:50%;background:var(--madera);box-shadow:0 1px 0 rgba(255,255,255,.7)}
.tablilla__nombre{font-family:var(--serif);font-size:1.15rem;line-height:1.12;margin:0 0 .5rem;color:var(--tinta)}
.par{display:flex;gap:1.1rem;margin:0}
.par dt{font:700 .75rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave)}
.par dd{margin:.1rem 0 0;font-weight:700;font-size:1.12rem;line-height:1.2;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.par div:first-child dd{color:var(--ladrillo)}

/* ---------- Portada: pantalla completa con video ---------- */
.portada{
  position:relative;display:flex;flex-direction:column;background:var(--noche);color:var(--crema);
  min-height:calc(100svh - var(--cabecera) - var(--barra));
}
.portada__medio{order:-1;flex:1 1 auto;min-height:17.5rem;aspect-ratio:auto;background:var(--noche);--p:51% 100%}
/* Velo: garantiza el contraste del texto que monta sobre la foto (opacidad mínima 0,86 bajo el texto) */
.portada__medio::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,var(--noche) 0,rgba(31,18,10,.86) 4.5rem,rgba(31,18,10,0) 10.5rem);
}
.portada__medio .tablilla{position:absolute;z-index:2;left:1rem;bottom:5.4rem;transform:rotate(-3deg)}
.portada__medio .tablilla__nombre{font-size:1.2rem}
.portada__texto{position:relative;z-index:2;margin-top:-4.5rem;padding-bottom:2.25rem}
.portada .rotulo{margin-bottom:.8rem}
h1{font-size:clamp(2.6rem, 1.5rem + 5vw, 5rem);letter-spacing:-.015em}
.portada__apoyo{font-size:1.15rem;line-height:1.5;margin:1rem 0 1.4rem}
.portada__dato{
  margin:1.4rem 0 0;padding-top:1rem;border-top:1px solid rgba(253,240,224,.3);
  font-size:.98rem;line-height:1.45;color:var(--crema);
}
.portada__dato strong{font-weight:700;color:var(--trigo)}

/* Movimiento simulado mientras no hay video: acercamiento lento sobre la imagen.
   Se detiene con el interruptor, con prefers-reduced-motion y cuando el video real arranca. */
@media (prefers-reduced-motion:no-preference){
  .portada__medio .medio{animation:acercar 22s ease-in-out infinite alternate}
  .oficio__medio .medio{animation:recorrer 26s ease-in-out infinite alternate}
  .foto:has(.pausa input:checked) .medio{animation-play-state:paused}
  .foto.con-video .medio{animation:none}
  .portada__texto > *{animation:entrar .9s cubic-bezier(.2,.7,.2,1) both}
  .portada__texto > :nth-child(2){animation-delay:.08s}
  .portada__texto > :nth-child(3){animation-delay:.16s}
  .portada__texto > :nth-child(4){animation-delay:.24s}
  .portada__texto > :nth-child(5){animation-delay:.32s}
}
@keyframes acercar{from{transform:scale(1)}to{transform:scale(1.148) translate(1.83%,0)}}
@keyframes recorrer{from{transform:scale(1.098) translate(2.44%,0)}to{transform:scale(1)}}
@keyframes entrar{from{opacity:0;translate:0 1.25rem}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .pausa{display:none} /* no hay nada que pausar */
}

/* ---------- Encabezado de las páginas interiores ---------- */
.encabezado{background:var(--noche);color:var(--crema);padding-block:clamp(2.5rem,1.6rem + 4.5vw,5.5rem)}
.encabezado h1{font-size:clamp(2.5rem, 1.5rem + 4.6vw, 4.6rem)}
.encabezado__intro{max-width:36rem;margin:1.1rem 0 0;font-size:1.15rem;line-height:1.55}
.encabezado .acciones{margin-top:1.75rem}
.encabezado a:not(.btn){color:var(--trigo)}
.migas ol{list-style:none;margin:0 0 1.25rem;padding:0;display:flex;flex-wrap:wrap;align-items:center;column-gap:.5rem;font-size:.95rem}
.migas li{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem}
.migas li + li::before{content:"\203A";color:var(--arena)}
.migas a{display:inline-flex;align-items:center;min-height:2.75rem;min-width:2.75rem}
.migas [aria-current]{color:var(--arena)}

/* ---------- Secciones ---------- */
.seccion{padding-block:var(--aire)}
.cab{margin-bottom:clamp(2rem,5vw,3.5rem)}
.cab h2,.titulo{font-size:clamp(2.3rem, 1.5rem + 3.6vw, 4.4rem);letter-spacing:-.012em}
.titulo--menor{font-size:clamp(1.9rem, 1.4rem + 2.2vw, 3rem);letter-spacing:-.01em}
.cab__intro{max-width:34rem;margin:1.1rem 0 0;font-size:1.15rem;line-height:1.55}
.nota{font-size:.95rem;color:var(--tinta-suave)}
.oscuro .nota{color:var(--arena)}
.filete{height:5px;border:0;border-block:1px solid var(--borde);margin:0}

/* ---------- Los cortes ---------- */
.cortes-sec{padding-bottom:calc(var(--aire) * .8)}
.desliza{
  display:flex;align-items:center;gap:.6rem;margin:0 0 1rem;
  font:700 .78rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave);
}
.desliza svg{flex:none;color:var(--ladrillo)}
@media (prefers-reduced-motion:no-preference){
  .desliza svg{animation:empujar 1.4s ease-in-out 3}
}
@keyframes empujar{50%{translate:.5rem 0}}
/* Celular: carrusel horizontal con scroll-snap, sin JavaScript. La tarjeta siguiente asoma. */
.carrusel{
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--margen);
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--ladrillo) var(--arena);
}
.carrusel::-webkit-scrollbar{height:6px}
.carrusel::-webkit-scrollbar-track{background:var(--arena)}
.carrusel::-webkit-scrollbar-thumb{background:var(--ladrillo)}
.cortes{
  list-style:none;margin:0;padding:.25rem var(--margen) 1.6rem;counter-reset:corte;
  display:grid;grid-auto-flow:column;grid-auto-columns:min(80vw,21rem);gap:1rem;width:max-content;
}
.corte{position:relative;counter-increment:corte;scroll-snap-align:start;display:flex;flex-direction:column;align-items:flex-start}
.corte .foto{width:100%;border-radius:2px}
.corte .foto img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.corte .tablilla{margin:-2.4rem 0 0 .75rem;min-width:11.5rem;transform:rotate(-1.5deg);transition:transform .35s}
.corte:nth-child(even){align-items:flex-end}
.corte:nth-child(even) .tablilla{margin:-2.4rem .75rem 0 0;transform:rotate(1.3deg)}
.corte::after{
  content:counter(corte,decimal-leading-zero) " / " var(--total,"");position:absolute;right:.2rem;bottom:.15rem;
  font:700 .75rem/1 var(--sans);letter-spacing:.16em;color:var(--tinta-suave);font-variant-numeric:tabular-nums;
}
.corte:nth-child(even)::after{right:auto;left:.2rem}
@media (hover:hover){
  .corte:hover .foto img{transform:scale(calc(var(--s,1) * 1.06))}
  .corte:hover .tablilla{transform:rotate(0deg)}
}
.cortes-sec__pie{margin-top:1.25rem}
.cortes-sec__pie p{margin:0 0 .5rem}

/* ---------- El oficio (madera, con el segundo video) ---------- */
.veta{
  background-color:var(--madera);color:var(--crema);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 13px,rgba(0,0,0,.09) 13px 14px,transparent 14px 31px);
}
.veta h2,.veta h3{color:var(--crema)}
.veta a:not(.btn){color:var(--trigo)}
.oficio{display:grid}
.oficio__medio{aspect-ratio:4/3;--p:51% 16%;background:var(--noche)}
.oficio__medio::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 -5rem 4rem -3rem rgba(31,18,10,.55)}
.oficio__texto{padding:calc(var(--aire) * .75) var(--margen) var(--aire)}
.oficio__texto > p{max-width:34rem}
.frases{list-style:none;margin:2rem 0 0;padding:0;counter-reset:frase}
.frases li{counter-increment:frase;display:grid;grid-template-columns:2.6rem 1fr;column-gap:.75rem;padding:1.15rem 0;border-top:1px solid rgba(253,240,224,.28)}
.frases li:last-child{border-bottom:1px solid rgba(253,240,224,.28)}
.frases li::before{content:counter(frase,decimal-leading-zero);font:700 .78rem/1.9 var(--sans);letter-spacing:.16em;color:var(--trigo)}
.frases h3{font-size:1.4rem;margin-bottom:.3rem}
.frases p{margin:0;color:var(--crema)}
.oficio__quienes{margin-top:2rem;max-width:34rem}
.oficio__quienes h3{font:700 .75rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--trigo);margin-bottom:.55rem}

/* ---------- Lista de precios como carta ---------- */
.precios-sec{display:grid;gap:2.5rem}
.precios-sec__lado p{max-width:30rem}
.precios-sec__lado .foto{aspect-ratio:16/9;margin-top:1.75rem;--p:50% 45%}
.carta{
  position:relative;background:var(--papel);border:1px solid var(--borde);
  padding:2.25rem 1rem 1.5rem;box-shadow:0 30px 50px -40px rgba(42,24,16,.6);
}
.carta::before{content:"";position:absolute;inset:5px;border:1px solid var(--borde);pointer-events:none}
.carta > *{position:relative}
.carta__cab{text-align:center;margin-bottom:1.5rem}
.carta__cab p{margin:0}
.carta__marca{font:700 .75rem/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ladrillo)}
.carta__titulo,.carta__cab .carta__titulo{font-family:var(--serif);font-size:clamp(1.9rem,1.5rem + 1.6vw,2.6rem);line-height:1.1;margin:.5rem 0 .6rem}
.carta__cab .filete{width:5rem;margin:0 auto .7rem}
.carta__sub{font-size:.95rem;color:var(--tinta-suave)}
.grupo{border-top:1px solid var(--borde)}
.grupo:last-of-type{border-bottom:1px solid var(--borde)}
.grupo summary,.grupo__cab{display:flex;align-items:baseline;gap:.75rem;min-height:3.75rem;padding:.9rem 0}
.grupo summary{cursor:pointer;list-style:none}
.grupo summary::-webkit-details-marker{display:none}
.grupo summary h3,.grupo__cab h2{font-size:1.55rem;margin-right:auto;transition:color .2s}
.grupo__n{font:700 .7rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave);white-space:nowrap}
.grupo summary::after{content:"+";flex:none;align-self:center;width:1.9rem;height:1.9rem;border:1px solid var(--ladrillo);border-radius:50%;display:grid;place-items:center;font:400 1.35rem/1 var(--sans);color:var(--ladrillo);transition:background-color .2s,color .2s}
.grupo[open] summary::after{content:"\2212"}
.grupo summary:hover h3{color:var(--ladrillo)}
.grupo summary:hover::after{background:var(--ladrillo);color:#fff}
.precios{width:100%;border-collapse:collapse;margin:0 0 1.5rem;font-variant-numeric:tabular-nums lining-nums}
.precios th,.precios td{padding:.48rem 0;vertical-align:baseline}
.precios thead th{font:700 .75rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave);text-align:left;padding:.1rem 0 .5rem;border-bottom:1px solid var(--borde)}
.precios tbody tr:first-child > *{padding-top:.8rem}
.precios tbody th{font-weight:600;text-align:left}
/* nombre + línea de puntos, como en una carta de restaurante */
.guia{display:flex;align-items:baseline;gap:.45rem}
.guia::after{content:"";flex:1 1 1rem;min-width:.75rem;height:0;border-bottom:2px dotted var(--borde);translate:0 -.22em}
.precios .num{width:4.9rem;text-align:right;white-space:nowrap;font-weight:700;padding-left:.35rem}
.precios thead .num{text-align:right}
.precios thead .num--ancha{width:auto}
.precios td.num:nth-of-type(1){color:var(--ladrillo)}
.precios .uno{text-align:right;white-space:nowrap;font-weight:700;color:var(--ladrillo);padding-left:.35rem}
.precios .uno small{display:block;font-size:.84rem;font-weight:400;color:var(--tinta-suave)}
.precios tbody tr{transition:background-color .15s}
.precios tbody tr:hover{background:rgba(235,214,184,.4)}
.carta__nota{margin:1.25rem 0 0;text-align:center;font-size:.95rem;color:var(--tinta-suave)}
.carta__pie{margin:1rem 0 0;text-align:center}

/* Página de productos: la carta completa, con un enlace "Pedir" por producto */
.carta--completa{padding-inline:.75rem}
.carta--completa .grupo{scroll-margin-top:1rem}
.carta--completa .precios{margin-bottom:1.25rem}
.precios .pedir{width:2.75rem;padding:0 0 0 .35rem;text-align:right;vertical-align:middle}
.precios thead .pedir{vertical-align:baseline}
.pedir a{
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-width:2.75rem;min-height:2.75rem;
  color:var(--verde);font-weight:700;font-size:.95rem;text-decoration:none;
}
.pedir a svg{flex:none;width:1.9rem;height:1.9rem;padding:.35rem;border:1px solid currentColor;border-radius:50%;transition:background-color .2s,color .2s}
.pedir a:hover{color:var(--verde-oscuro)}
.pedir a:hover svg{background:var(--verde);color:#fff;border-color:var(--verde)}
.pedir__texto{display:none}
.carta--completa .precios th,.carta--completa .precios td{vertical-align:middle}
.carta--completa .precios thead th{vertical-align:baseline}
.carta--completa .precios .num{width:4rem}
/* En pantallas angostas el nombre tiene prioridad sobre la línea de puntos */
.carta--completa .guia::after{flex-basis:0;min-width:0}
.carta--completa .guia > span{flex:0 1 auto}
.sin-resultados{margin:0;padding:1.5rem 0;text-align:center;border-top:1px solid var(--borde)}

/* Índice de categorías y buscador (el buscador solo aparece si hay JavaScript) */
.indice h2,.buscar label,.leer h3{font:700 .75rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave);margin:0 0 .6rem}
.indice ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.indice a{
  display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.3rem .9rem;
  border:1px solid var(--borde);border-radius:2rem;background:var(--papel);
  color:var(--tinta);font-weight:600;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s;
}
.indice a span{font-weight:400;font-size:.9rem;color:var(--tinta-suave);font-variant-numeric:tabular-nums}
.indice a:hover{background:var(--ladrillo);border-color:var(--ladrillo);color:#fff}
.indice a:hover span{color:#fff}
.buscar{margin-top:1.75rem}
.buscar label{display:block}
.buscar input{
  width:100%;max-width:26rem;min-height:3rem;padding:.5rem .85rem;border:1.5px solid var(--tinta);border-radius:3px;
  background:var(--papel);color:var(--tinta);font:400 1.0625rem/1.3 var(--sans);
}
.buscar input::placeholder{color:var(--tinta-suave);opacity:1}
.buscar__estado{margin:.5rem 0 0;font-size:.95rem;color:var(--tinta-suave);min-height:1.5em}
.catalogo__nota{margin-top:1.5rem}

/* Galería en rejilla pareja (página de productos) */
.leer{display:grid;gap:2.5rem}
.leer .frases{margin-top:0}
.leer .frases h3{font:400 1.4rem/1.08 var(--serif);letter-spacing:0;text-transform:none;color:var(--crema);margin-bottom:.3rem}
.cierre{background:var(--arena)}
.cierre__fila{display:grid;gap:1.5rem;align-items:center}
.cierre p{margin:.75rem 0 0;max-width:34rem}

/* ---------- Cómo pedir ---------- */
.pedir-sec{display:grid;gap:2.5rem}
.pasos{list-style:none;margin:0;padding:0;counter-reset:paso}
.pasos > li{counter-increment:paso;display:grid;grid-template-columns:3.75rem 1fr;column-gap:.75rem;padding:1.4rem 0;border-top:1px solid rgba(253,240,224,.28)}
.pasos > li:last-child{border-bottom:1px solid rgba(253,240,224,.28)}
.pasos > li::before{content:counter(paso);font-family:var(--serif);font-size:3.75rem;line-height:.85;color:var(--coral)}
.pasos h3{font-size:1.45rem;margin-bottom:.35rem}
.pasos p{margin:0}
.pasos ul{margin:.6rem 0 0;padding-left:1.2rem}
/* Pasos sobre fondo claro (página de receta) */
.pasos--claro > li,.pasos--claro > li:last-child{border-color:var(--borde)}
.pasos--claro > li::before{color:var(--ladrillo)}
.pagos{display:grid;gap:1rem;margin-top:2rem}
.pago{border:1px solid rgba(253,240,224,.45);padding:1.1rem 1.1rem 1.2rem;position:relative}
.pago::before{content:"";position:absolute;inset:4px;border:1px solid rgba(253,240,224,.18);pointer-events:none}
.pago h3{font:700 .75rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--trigo);margin-bottom:.55rem}
.pago p{margin:0}
.pago p + p{margin-top:.5rem}
.pedir__cierre{margin:1.5rem 0 0}

/* ---------- Receta ---------- */
.receta{display:grid;background:var(--crema)}
.receta + .receta{border-top:1px solid var(--borde)}
.receta__foto{aspect-ratio:5/4;--p:42% 50%}
.receta__texto{padding:2.5rem var(--margen) var(--aire)}
.receta__texto > p{max-width:32rem}
.receta__titulo{font-size:clamp(2.1rem, 1.5rem + 2.8vw, 3.6rem);letter-spacing:-.01em;margin-bottom:1rem}
.receta__nombre{font-size:clamp(1.5rem,1.3rem + 1vw,1.9rem);margin-bottom:.6rem}
.receta__datos{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:.5rem 1.25rem;margin:1.5rem 0 1.75rem;padding:1rem 0;border-block:1px solid var(--borde)}
.receta__datos dt{font:700 .75rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave)}
.receta__datos dd{margin:.15rem 0 0;font-family:var(--serif);font-size:1.25rem;line-height:1.2;font-variant-numeric:lining-nums}
.oscuro .receta__datos{border-color:rgba(253,240,224,.3);grid-template-columns:repeat(2,auto);gap:1rem 2rem;margin-bottom:0}
.oscuro .receta__datos dt{color:var(--trigo)}
.oscuro .receta__datos dd{font-size:1.1rem;line-height:1.25}

/* Página de una receta */
.receta-pag__foto{aspect-ratio:4/3;--p:42% 50%;max-height:80svh;width:100%}
.receta-pag{display:grid;gap:3rem}
.receta-pag h2{font-size:clamp(1.9rem, 1.4rem + 2.2vw, 3rem);letter-spacing:-.01em;margin-bottom:1.25rem}
.receta-pag .carta h2{font-size:clamp(1.7rem,1.4rem + 1.4vw,2.2rem);text-align:center}
.ingredientes{list-style:none;margin:0;padding:0}
.ingredientes li{padding:.7rem 0;border-top:1px dotted var(--borde)}
.ingredientes li:last-child{border-bottom:1px dotted var(--borde)}
.receta-pag__bloque + .receta-pag__bloque{margin-top:clamp(2.5rem,6vw,4rem)}
.receta-pag__bloque > p{max-width:36rem}
.lista{margin:0;padding-left:1.2rem;max-width:36rem}
.lista li{padding:.2rem 0}
.cierre-receta{display:grid;gap:2rem;align-items:center}
.cierre-receta .tablilla{justify-self:start;transform:rotate(-2deg);padding:1.2rem 1.2rem .9rem}
.cierre-receta .tablilla__nombre{font-size:1.5rem}
.cierre-receta .par dd{font-size:1.35rem}
.cierre-receta .acciones{margin-top:1.5rem}

/* ---------- Dónde y cuándo ---------- */
.donde{background:var(--arena)}
.donde__rejilla{display:grid;gap:2.5rem}
.direccion{font-family:var(--serif);font-size:clamp(2.1rem, 1.4rem + 3.2vw, 3.8rem);line-height:1.05;letter-spacing:-.01em;margin:0}
.direccion span{display:block;font:400 1.15rem/1.4 var(--sans);letter-spacing:0;margin-top:.7rem}
.donde__apoyo{max-width:30rem;margin:1.1rem 0 1.5rem}
.donde__mas{margin:1rem 0 0}
.letrero{
  position:relative;max-width:32rem;background:var(--papel);border:1.5px solid var(--tinta);border-radius:3px;
  padding:2rem 1.25rem 1.25rem;box-shadow:0 1px 0 rgba(42,24,16,.55),0 26px 40px -26px rgba(42,24,16,.7);
}
.letrero::before{content:"";position:absolute;inset:4px;border:1px solid var(--borde);pointer-events:none}
.letrero::after{content:"";position:absolute;left:50%;top:.55rem;width:.5rem;height:.5rem;margin-left:-.25rem;border-radius:50%;background:var(--madera)}
.letrero > *{position:relative}
.letrero__abierto{text-align:center;padding-bottom:1.25rem;border-bottom:1px solid var(--borde)}
.letrero__abierto:last-child{border-bottom:0;padding-bottom:.5rem}
.letrero__abierto p{margin:0}
.letrero__estado{font:700 .75rem/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--verde)}
.letrero__dias{font-family:var(--serif);font-size:clamp(1.9rem,1.5rem + 1.6vw,2.5rem);line-height:1.1;margin:.4rem 0 .3rem !important}
.letrero__hora{font-size:1.2rem;font-weight:700;font-variant-numeric:lining-nums}
.letrero dl{margin:0}
.letrero dl div{padding:1rem 0;border-bottom:1px dotted var(--borde)}
.letrero dl div:last-child{border-bottom:0;padding-bottom:.25rem}
.letrero dt{font:700 .75rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave)}
.letrero dd{margin:.2rem 0 0}
.letrero dd strong{font-family:var(--serif);font-weight:400;font-size:1.35rem;line-height:1.2;display:block}
.dos{display:grid;gap:3rem}
.dos .pagos{margin-top:1.5rem}
.dos p{max-width:32rem}

/* ---------- Pie ---------- */
.pie{background:var(--noche);color:var(--crema);padding-block:3.5rem 2.25rem;font-size:1rem}
.pie a{color:var(--crema)}
.pie a:hover{color:var(--trigo)}
.pie__rejilla{display:grid;gap:2rem}
.pie .logo{width:4.25rem;background:var(--noche)}
.pie h2{font:700 .75rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--trigo);margin:0 0 .6rem}
.pie p{margin:0 0 .35rem}
.pie ul{list-style:none;margin:0;padding:0}
.pie li a,.pie__enlace{display:inline-flex;align-items:center;min-height:2.75rem;min-width:2.75rem}
.pie__final{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid rgba(253,240,224,.28);font-size:.94rem;color:var(--arena)}
.pie__final p{margin:0 0 .25rem}

/* ---------- Barra fija del celular ---------- */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;gap:.6rem;
  padding:.5rem var(--margen) calc(.5rem + env(safe-area-inset-bottom,0px));
  background:var(--papel);border-top:1px solid var(--borde);box-shadow:0 -8px 20px -8px rgba(42,24,16,.35);
}
.barra .btn{flex:1 1 0;min-height:3.25rem;padding-inline:.5rem}
.barra .btn--wa{flex-grow:1.2}

/* ---------- Aparición suave al desplazarse (solo CSS; sin soporte, todo se ve normal) ---------- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .ap{animation:aparecer linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    @keyframes aparecer{from{opacity:0;translate:0 2.25rem}to{opacity:1;translate:0 0}}
  }
}

/* ---------- 600 px ---------- */
@media (min-width:37.5em){
  :root{--margen:1.5rem}
  .acciones .btn{flex:0 1 auto}
  .portada__medio{min-height:22rem}
  .pagos{grid-template-columns:1fr 1fr}
  .carta,.carta--completa{padding:2.75rem 2rem 2rem}
  .precios .num,.carta--completa .precios .num{width:6rem}
  .precios .pedir{width:5.5rem}
  .pedir__texto{display:inline}
  .pie__rejilla{grid-template-columns:1.4fr 1fr 1fr}
  .oficio__medio{aspect-ratio:16/9;--p:51% 33%}
  .receta__foto{aspect-ratio:16/9}
  .receta__datos{column-gap:2rem}
  .receta-pag__foto{aspect-ratio:16/9}
  .oscuro .receta__datos{grid-template-columns:repeat(4,auto)}
  .cierre__fila{grid-template-columns:1fr auto}
}

/* ---------- 768 px: sale la barra fija; la galería pasa de carrusel a composición editorial ---------- */
@media (min-width:48em){
  :root{--margen:2rem;--barra:0rem;--cabecera:8rem}
  body{padding-bottom:0}
  html{scroll-padding-bottom:1rem}
  .barra{display:none}
  .cabecera__wa{display:inline-flex;min-height:2.75rem;padding-block:.4rem}
  .menu ul{justify-content:flex-start;column-gap:2rem}
  .menu a{font-size:1rem}
  .logo{width:4.5rem}
  .marca{min-height:5rem}
  .marca__nombre span{font-size:1.55rem}
  .portada__medio .tablilla{left:2rem;bottom:7rem;padding:1.2rem 1.2rem .9rem}
  .portada__medio .tablilla__nombre{font-size:1.5rem}
  .portada__medio .par dd{font-size:1.4rem}
  .portada__apoyo{font-size:1.25rem;max-width:36rem}

  .desliza{display:none}
  .carrusel{overflow:visible;scroll-snap-type:none}
  .cortes{
    width:auto;max-width:var(--ancho);margin-inline:auto;padding:0 var(--margen);
    grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(12,minmax(0,1fr));
    gap:3.25rem 1.5rem;align-items:start;
  }
  .corte{grid-column:span 4}
  .corte::after{content:counter(corte,decimal-leading-zero)}
  /* Composición editorial (inicio): anchos 7+5, 4+4+4, 5+7, 4+4+4 y una fila final */
  .cortes--editorial .corte:nth-child(1){grid-column:span 7}
  .cortes--editorial .corte:nth-child(2){grid-column:span 5;margin-top:5.5rem}
  .cortes--editorial .corte:nth-child(4){margin-top:3.5rem}
  .cortes--editorial .corte:nth-child(6){grid-column:span 5;margin-top:4rem}
  .cortes--editorial .corte:nth-child(7){grid-column:span 7}
  .cortes--editorial .corte:nth-child(9){margin-top:-1.5rem}
  .cortes--editorial .corte:nth-child(10){margin-top:2.5rem}
  .cortes--editorial .corte:nth-child(n+11){grid-column:span 6}
  .cortes--editorial .corte:nth-child(12){margin-top:3rem}
  .cortes--editorial .corte:nth-child(2) .foto,.cortes--editorial .corte:nth-child(3) .foto,.cortes--editorial .corte:nth-child(4) .foto,
  .cortes--editorial .corte:nth-child(9) .foto,.cortes--editorial .corte:nth-child(10) .foto,
  .cortes--editorial .corte:nth-child(12) .foto,.cortes--editorial .corte:nth-child(13) .foto{aspect-ratio:1/1}
  .cortes--editorial .corte:nth-child(7) .foto{aspect-ratio:16/10}
  .cortes--editorial .corte:nth-child(1) .tablilla,.cortes--editorial .corte:nth-child(7) .tablilla{margin-left:1.5rem;padding:1.2rem 1.2rem .9rem}
  .cortes--editorial .corte:nth-child(1) .tablilla__nombre,.cortes--editorial .corte:nth-child(7) .tablilla__nombre{font-size:1.6rem}
  .cortes--editorial .corte:nth-child(1) .par dd,.cortes--editorial .corte:nth-child(7) .par dd{font-size:1.35rem}
  /* Rejilla pareja (página de productos) */
  .cortes--rejilla{gap:3rem 1.5rem}
  @media (prefers-reduced-motion:no-preference){
    @supports (animation-timeline:view()){
      .corte{animation:aparecer linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
    }
  }

  .oficio__texto{padding-inline:var(--margen)}
  .frases{display:grid;grid-template-columns:1fr 1fr;column-gap:2.5rem}
  .frases li:nth-last-child(2){border-bottom:1px solid rgba(253,240,224,.28)}
  .leer .frases{grid-template-columns:1fr}
  .leer .frases li:nth-last-child(2){border-bottom:0}
  .pedir-sec{grid-template-columns:1fr 1.3fr;gap:4rem;align-items:start}
  .receta__texto{padding-inline:var(--margen)}
  .letrero{padding:2.5rem 2rem 1.75rem;transform:rotate(1deg)}
  .leer{grid-template-columns:1fr 1.3fr;gap:4rem;align-items:start}
  .dos{grid-template-columns:1fr 1fr;gap:4rem}
  .cierre-receta{grid-template-columns:1.3fr 1fr;gap:4rem}
  .cierre-receta .tablilla{justify-self:center}
}

/* ---------- 960 px: portada con el video a sangre a la derecha; bloques a media sangre ---------- */
@media (min-width:60em){
  :root{--cabecera:5.1rem}
  .cabecera__fila{flex-wrap:nowrap}
  .menu{width:auto;border-top:0;margin-left:auto}
  .cabecera__wa{order:3}
  .menu a{min-height:5rem}
  .menu a::after{bottom:1.5rem}

  .portada{display:grid;align-items:center;min-height:calc(100svh - var(--cabecera))}
  .portada__medio{position:absolute;inset:0 0 0 34vw;order:0;min-height:0;--p:51% 82%}
  .portada__medio::after{
    background:
      linear-gradient(90deg,var(--noche) 0,rgba(31,18,10,.86) 18vw,rgba(31,18,10,0) 44vw),
      linear-gradient(to top,rgba(31,18,10,.6) 0,rgba(31,18,10,0) 32%);
  }
  .portada__medio .tablilla{left:auto;right:7vw;bottom:13%;padding:1.4rem 1.5rem 1.1rem}
  .portada__medio .tablilla__nombre{font-size:1.9rem}
  .portada__medio .par{gap:1.75rem}
  .portada__medio .par dd{font-size:1.7rem}
  .portada__medio .referencia{left:auto;right:1.5rem;top:auto;bottom:1.25rem}
  .portada__medio .pausa{top:1.25rem;right:1.5rem}
  .portada__texto{width:100%;margin-top:0;padding-block:3.5rem}
  .portada__texto > *{max-width:min(34rem,44vw)}
  .portada .rotulo{margin-bottom:1.25rem}
  .portada__apoyo{margin:1.4rem 0 1.9rem}

  .cab{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:4rem;align-items:end}
  .cab .rotulo{grid-column:1/-1}
  .cab .cab__intro{margin:0 0 .5rem}
  .cortes{gap:4.5rem 2rem}
  .cortes--editorial .corte:nth-child(n+11){grid-column:span 3}
  .cortes--editorial .corte:nth-child(11){margin-top:2.5rem}
  .cortes--editorial .corte:nth-child(12){margin-top:0}
  .cortes--editorial .corte:nth-child(13){margin-top:4rem}
  .cortes--editorial .corte:nth-child(14) .foto{aspect-ratio:3/4}
  .cortes--rejilla{gap:3.5rem 2rem}
  .cortes--rejilla .corte{grid-column:span 3}

  .oficio{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:stretch}
  .oficio__medio{aspect-ratio:auto;min-height:38rem;--p:51% 51%}
  .oficio__texto{padding:var(--aire) var(--canal) var(--aire) clamp(2.5rem,5vw,5rem)}
  .frases{grid-template-columns:1fr}
  .frases li:nth-last-child(2){border-bottom:0}

  .precios-sec{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:4.5rem;align-items:start}
  .precios-sec__lado .foto{aspect-ratio:4/3}
  .carta{padding:3.25rem 3rem 2.25rem}
  .carta::before{inset:7px}
  .precios .num,.carta--completa .precios .num{width:7rem}
  .indice ul{flex-direction:column;align-items:flex-start}

  .donde__rejilla{grid-template-columns:1.2fr 1fr;gap:4rem;align-items:center}
  .receta{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center}
  .receta__foto{order:2;aspect-ratio:auto;height:100%;min-height:36rem}
  .receta__texto{padding:var(--aire) clamp(2.5rem,5vw,5rem) var(--aire) var(--canal)}
  .receta:nth-of-type(even) .receta__foto{order:0}
  .receta:nth-of-type(even) .receta__texto{padding:var(--aire) var(--canal) var(--aire) clamp(2.5rem,5vw,5rem)}

  .receta-pag{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:4.5rem;align-items:start}
  .receta-pag__foto{aspect-ratio:21/9}
}

/* ---------- 1200 px ---------- */
@media (min-width:75em){
  .cortes{gap:5.5rem 2.5rem}
  .cortes--rejilla{gap:4rem 2rem}
}
/* La columna lateral acompaña a la carta solo si cabe entera en la pantalla */
@media (min-width:60em) and (min-height:50rem){
  .precios-sec__lado,.receta-pag__lado{position:sticky;top:2rem}
}

/* ---------- Impresión: la lista de precios se puede imprimir ---------- */
@media print{
  .cabecera .menu,.cabecera__wa,.barra,.pausa,.buscar,.indice,.saltar,.pedir{display:none !important}
  body{padding-bottom:0;background:#fff}
  .ap,.corte{animation:none !important}
}