/* ============================================================
   Coffee-Crepe . demo de captacion
   Tema bloqueado en OSCURO: la escena de uso es un movil por la
   tarde y toda la fotografia es de bajo clave. Un fondo crema
   pelearia con las imagenes en vez de sostenerlas.
   Paleta muestreada de los propios fotogramas, no inventada.
   Radio de esquina: 0 en toda la pagina, sin excepciones.
   ============================================================ */

:root{
  --ink:     #0B0706;   /* el negro calido del fondo de las fotos */
  --ink-2:   #131010;
  --ink-3:   #1C1715;
  --cream:   #F4EDE4;
  --muted:   #A2907F;   /* tenido del ambar, nunca gris neutro */
  --ember:   #EBCBAD;   /* la lampara del primer fotograma */
  --ember-2: #F6DCC2;
  --linea:   #2A2320;

  --paso:  clamp(1rem, 0.6rem + 1.6vw, 1.75rem);
  --canal: clamp(1rem, 0.4rem + 2.6vw, 3.5rem);
  --ancho: 1240px;

  --salida: cubic-bezier(0.23, 1, 0.32, 1);
}

*,*::before,*::after{ box-sizing:border-box }

html{
  background: var(--ink);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--linea) var(--ink);
  scrollbar-width: thin;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background: var(--ink);
  color: var(--cream);
  font: 400 clamp(1rem, 0.94rem + 0.22vw, 1.0625rem)/1.65 "Karla", system-ui, sans-serif;
  /* clip y no hidden: hidden crea un contenedor de scroll y rompe el
     position:sticky del carril de la secuencia. */
  overflow-x: clip;
}

/* --- superficies del navegador: lo que delata una web construida --- */
::selection{ background: var(--ember); color:#1A1008 }
::-webkit-scrollbar{ width:11px; height:11px }
::-webkit-scrollbar-track{ background: var(--ink) }
::-webkit-scrollbar-thumb{ background: var(--linea) }
::-webkit-scrollbar-thumb:hover{ background:#3B312C }
:focus-visible{ outline:2px solid var(--ember); outline-offset:3px }

h1,h2,h3{
  font-family:"Bodoni Moda", Georgia, serif;
  font-weight:400;
  letter-spacing:-0.025em;
  text-wrap:balance;
  margin:0;
}
h1{ font-size:clamp(2.15rem, 1.1rem + 4.2vw, 4.75rem); line-height:1.06 }
h2{ font-size:clamp(1.9rem, 1.1rem + 3.2vw, 3.6rem); line-height:1.08 }
h3{
  font-family:"Karla", sans-serif; font-size:0.8rem; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--muted);
}
p{ margin:0 }

.saltar{
  position:fixed; top:0; left:0; z-index:100;
  transform:translateY(-120%);
  background:var(--ember); color:#1A1008;
  padding:0.7rem 1.1rem; font-weight:500; text-decoration:none;
  transition: transform 180ms var(--salida);
}
.saltar:focus{ transform:translateY(0) }

/* ---------------- barra ---------------- */
.barra{
  position:fixed; inset:0 0 auto 0; z-index:50;
  height:64px; display:flex; align-items:center; gap:var(--paso);
  padding-inline:var(--canal);
  background:linear-gradient(to bottom, rgba(11,7,6,0.88), rgba(11,7,6,0));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.marca{
  display:inline-flex; align-items:center; min-height:44px;   /* objetivo tactil */
  font-family:"Bodoni Moda", serif; font-size:1.2rem; letter-spacing:-0.01em;
  color:var(--cream); text-decoration:none; margin-right:auto; white-space:nowrap;
  transition: color 160ms var(--salida), transform 130ms var(--salida);
}
.marca:active{ transform:scale(0.97) }
.marca span{ color:var(--ember) }
.nav{ display:flex; gap:1.6rem }
.nav a{
  position:relative; color:var(--muted); text-decoration:none;
  font-size:0.875rem; letter-spacing:0.02em; padding:0.35rem 0;
  transition: color 160ms var(--salida);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--ember); transform:scaleX(0); transform-origin:left;
  transition: transform 220ms var(--salida);
}
@media (hover:hover) and (pointer:fine){
  .nav a:hover{ color:var(--cream) }
  .nav a:hover::after{ transform:scaleX(1) }
}
.nav a:active{ color:var(--ember) }
@media (max-width:700px){ .nav{ display:none } }

/* ---------------- botones ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0.72rem 1.35rem;
  font:500 0.875rem/1 "Karla", sans-serif; letter-spacing:0.02em;
  text-decoration:none; border-radius:0; white-space:nowrap; cursor:pointer;
  transition: background-color 170ms var(--salida), color 170ms var(--salida),
              border-color 170ms var(--salida), transform 130ms var(--salida);
}
.btn:active{ transform:scale(0.97) }
.btn-solido{ background:var(--ember); color:#1A1008; border:1px solid var(--ember) }
.btn-linea{ background:transparent; color:var(--cream); border:1px solid #4A3E37 }
@media (hover:hover) and (pointer:fine){
  .btn-solido:hover{ background:var(--ember-2); border-color:var(--ember-2) }
  .btn-linea:hover{ border-color:var(--ember); color:var(--ember) }
}

/* ---------------- 1 . la secuencia ----------------
   El unico momento de movimiento autoral de la pagina.
   Diez fotogramas encadenados por fundido mientras se baja.   */
/* Mas pista que antes: con 385 fotogramas conviene que la escena
   avance despacio, no que se acabe en dos ruedas de raton. */
.secuencia{ height:520vh; position:relative }
.seq-carril{ position:sticky; top:0; height:100svh; overflow:hidden }
.seq-marco{ position:absolute; inset:0 }


/* ---------------- la secuencia, ahora en lienzo ----------------
   120 fotogramas de video real generados con Veo. Se dibuja el que
   toca segun la posicion del scroll, en un bucle de rAF: no hay
   addEventListener('scroll') en ningun sitio.                      */
.seq-lienzo{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  background:var(--ink);
}
.seq-velo{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, rgba(11,7,6,0.90) 0%, rgba(11,7,6,0.55) 22%, rgba(11,7,6,0.12) 48%, rgba(11,7,6,0) 72%),
    linear-gradient(to right, rgba(11,7,6,0.62), rgba(11,7,6,0.15) 45%, rgba(11,7,6,0) 68%);
}
.seq-alt{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }

/* El ancho va en px, no en ch: la unidad ch se resuelve contra la
   fuente del contenedor (Karla), no contra la del titular (Bodoni). */
.seq-texto{
  position:absolute; left:var(--canal); right:var(--canal);
  bottom:clamp(2.5rem, 7vh, 5.5rem);
  max-width:min(880px, 64%);
  z-index:1;
}
@media (max-width:900px){ .seq-texto{ max-width:100% } }
.seq-texto h1{ margin-bottom:1.1rem }
.entradilla{
  color:var(--cream); opacity:0.82; max-width:42ch;
  font-size:clamp(1rem, 0.95rem + 0.3vw, 1.15rem); margin-bottom:1.8rem;
}
.acciones{ display:flex; flex-wrap:wrap; gap:0.7rem }

/* ---------------- 2 . la carta ---------------- */
.carta{ padding:clamp(5rem, 12vh, 9rem) var(--canal) }
.carta-caja{ max-width:var(--ancho); margin-inline:auto }
.carta h2{ max-width:16ch; margin-bottom:clamp(2.5rem, 6vh, 4.5rem) }

.grupo{ padding-block:clamp(2rem, 4vh, 3rem) }
.grupo + .grupo{ border-top:1px solid var(--linea) }
.grupo h3{ margin-bottom:1.6rem }

.lista{ list-style:none; margin:0; padding:0 }
.lista li{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:0.4rem var(--paso); align-items:baseline; padding-block:0.95rem;
}
.nombre{
  font-family:"Bodoni Moda", serif; letter-spacing:-0.02em;
  font-size:clamp(1.45rem, 1rem + 1.9vw, 2.5rem); line-height:1.14;
}
.glosa{ color:var(--muted); max-width:46ch }
@media (max-width:640px){
  .lista li{ grid-template-columns:1fr }
  .glosa{ font-size:0.94rem }
}
.nota{
  margin-top:clamp(2rem, 5vh, 3.5rem); color:var(--muted);
  font-size:0.875rem; max-width:62ch;
}

/* ---------------- 3 . la semana ---------------- */
.horario{
  padding:clamp(5rem, 12vh, 9rem) var(--canal);
  background:var(--ink-2);
  border-block:1px solid var(--linea);
}
.horario h2{ max-width:14ch; margin:0 auto clamp(2.5rem, 6vh, 4rem); text-align:center }
.semana{
  list-style:none; margin:0 auto; padding:0; max-width:var(--ancho);
  display:grid; grid-template-columns:repeat(7,1fr); gap:1px;
  background:var(--linea); border:1px solid var(--linea);
}
.semana li{
  background:var(--ink-2); padding:1.3rem 0.7rem 1.5rem;
  display:flex; flex-direction:column; gap:0.3rem;
  align-items:center; text-align:center;
}
.dia{
  font-family:"Bodoni Moda", serif; font-size:1.05rem;
  letter-spacing:-0.01em; margin-bottom:0.45rem;
}
.tramo{ font-size:0.8rem; color:var(--muted); font-variant-numeric:tabular-nums }
.cerrado{ color:#9C8170 }   /* subido: a #8A6F5E daba 4,07 y el minimo es 4,5 */
.semana li[data-hoy]{ background:var(--ink-3) }
.semana li[data-hoy] .dia{ color:var(--ember) }
.semana li[data-hoy] .dia::after{
  content:"hoy"; display:block;
  font-family:"Karla", sans-serif; font-size:0.6rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--ember); opacity:0.8; margin-top:0.25rem;
}
@media (max-width:860px){
  .semana{ grid-template-columns:repeat(2,1fr) }
  .semana li{ align-items:flex-start; text-align:left; padding:1.1rem 1rem }
}
@media (max-width:420px){ .semana{ grid-template-columns:1fr } }
.festivos{ text-align:center; color:var(--muted); font-size:0.85rem; margin-top:1.6rem }

/* ---------------- 4 . donde ---------------- */
.donde{ position:relative; min-height:78svh; display:grid; align-items:end; overflow:hidden }
.donde-fondo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 60%;
}
.donde::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(11,7,6,0.95) 6%, rgba(11,7,6,0.35) 55%, rgba(11,7,6,0.55));
}
.donde-texto{
  position:relative; z-index:1; width:100%;
  padding:clamp(3rem, 9vh, 6rem) var(--canal);
  max-width:var(--ancho); margin-inline:auto;
}
.donde-texto h2{ margin-bottom:1rem }
.donde-texto p{ color:var(--cream); opacity:0.82; max-width:44ch; margin-bottom:1.8rem }

/* ---------------- pie ---------------- */
.pie{ padding:clamp(3.5rem, 8vh, 5.5rem) var(--canal) 3rem; border-top:1px solid var(--linea) }
.pie-fila{
  max-width:var(--ancho); margin:0 auto 2.5rem;
  display:flex; flex-wrap:wrap; gap:1.5rem var(--canal); justify-content:space-between;
  color:var(--muted); font-size:0.9rem; line-height:1.7;
}
.pie-marca{
  font-family:"Bodoni Moda", serif; font-size:1.35rem;
  color:var(--cream); letter-spacing:-0.01em;
}
.aviso{
  max-width:var(--ancho); margin-inline:auto; max-inline-size:78ch;
  color:var(--muted); font-size:0.8rem; line-height:1.7;
  padding-top:1.6rem; border-top:1px solid var(--linea);
}
.aviso strong{ color:var(--cream); font-weight:500 }

/* ---------------- entradas ----------------
   Con scroll nativo y nada de JavaScript. Si el navegador no soporta
   animation-timeline, el bloque no entra en juego y el contenido se ve
   sin mas. Ninguna seccion puede quedarse en blanco por esto.        */
@keyframes entrar{
  from{ opacity:0; transform:translateY(16px) }
  to  { opacity:1; transform:none }
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .carta h2, .grupo, .nota,
    .horario h2, .semana, .festivos,
    .donde-texto{
      animation: entrar linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 24%;
    }
    /* escalonado corto entre los dos grupos de la carta */
    .grupo:nth-of-type(2){ animation-range: entry 2% cover 26% }
  }
}


/* ============================================================
   TRANSICION ENTRE PAGINAS: la plancha no se va
   El lienzo de la portada y la banda de las subpaginas comparten
   el mismo view-transition-name, asi que el navegador interpola
   la forma de uno a otro en vez de recargar a negro.
   Nativo del navegador. Sin librerias.
   ============================================================ */
@view-transition{ navigation: auto }

.seq-lienzo,
.banda-lienzo{ view-transition-name: plancha }
.barra{ view-transition-name: barra }

::view-transition-old(root),
::view-transition-new(root){
  animation-duration: 260ms;
  animation-timing-function: var(--salida);
}
::view-transition-group(plancha){
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}
::view-transition-old(barra),
::view-transition-new(barra){ animation: none; mix-blend-mode: normal }

@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation: none !important }
}

/* ---------------- la banda de las subpaginas ----------------
   Un solo fotograma de la secuencia, fijo. No es la portada
   reducida: es el mismo objeto visto en otro momento.        */
.banda{
  position:relative; height:clamp(240px, 42svh, 420px);
  overflow:hidden; display:grid; align-items:end;
}
.banda-lienzo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 62%;
}
.banda::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(11,7,6,0.95) 4%, rgba(11,7,6,0.5) 42%, rgba(11,7,6,0.25));
}
.banda-texto{
  position:relative; z-index:1; width:100%;
  max-width:var(--ancho); margin-inline:auto;
  padding:0 var(--canal) clamp(1.6rem, 4vh, 2.8rem);
}
.banda-texto h1{ font-size:clamp(2rem, 1.2rem + 3.4vw, 3.9rem) }

/* volver: no es una flecha suelta, dice a donde va */
.volver{
  display:inline-flex; align-items:center; gap:0.5rem; min-height:44px;
  color:var(--muted); text-decoration:none; font-size:0.875rem;
  transition: color 160ms var(--salida), transform 130ms var(--salida);
}
.volver:active{ transform:scale(0.97) }
@media (hover:hover) and (pointer:fine){ .volver:hover{ color:var(--cream) } }
.volver svg{ width:14px; height:14px; flex:none }

.cuerpo{ padding:clamp(3.5rem, 9vh, 6.5rem) var(--canal) }
.cuerpo-caja{ max-width:var(--ancho); margin-inline:auto }

/* hueco de dato que solo puede dar el negocio */
.hueco{
  display:inline-block; color:var(--ember); border-bottom:1px dashed #6B5A4C;
  font-size:0.8em; letter-spacing:0.02em; padding-bottom:1px;
}

/* ============================================================
   SUBPAGINA 1 . LA CARTA
   Familia: bandas apiladas, nombre en display y articulos en
   dos columnas de texto. No es la rejilla de la portada.
   ============================================================ */
.plato{ padding-block:clamp(2.2rem, 5vh, 3.4rem) }
.plato + .plato{ border-top:1px solid var(--linea) }
.plato h2{ font-size:clamp(1.8rem, 1.1rem + 2.6vw, 3rem); margin-bottom:0.5rem }
.plato-nota{ color:var(--muted); max-width:52ch; margin-bottom:1.8rem }

.articulos{
  list-style:none; margin:0; padding:0;
  columns:2; column-gap:clamp(2rem, 5vw, 4.5rem);
}
.articulos li{
  break-inside:avoid;
  display:flex; align-items:baseline; gap:0.6rem;
  padding-block:0.62rem;
  font-size:1.05rem;
}
.articulos li::after{
  content:""; flex:1 1 auto; height:1px; min-width:1.5rem;
  background:linear-gradient(to right, #332B26 50%, transparent 50%) repeat-x;
  background-size:5px 1px; transform:translateY(-3px);
}
.precio{ flex:none; order:3 }
@media (max-width:620px){ .articulos{ columns:1 } }

.pendiente{
  margin-top:clamp(2.5rem, 6vh, 4rem);
  padding:clamp(1.4rem, 3vw, 2.2rem);
  border:1px solid var(--linea); background:var(--ink-2);
}
.pendiente h3{ margin-bottom:0.9rem }
.pendiente p{ color:var(--muted); max-width:70ch; margin-bottom:1rem }
.pendiente strong{ color:var(--cream); font-weight:500 }
.pendiente ul{ margin:0; padding-left:1.1rem; color:var(--muted) }
.pendiente li{ padding-block:0.25rem }
.pendiente + .acciones{ margin-top:clamp(2rem, 5vh, 3rem) }

/* ============================================================
   SUBPAGINA 2 . EL HORARIO
   Familia: estado en vivo arriba y franjas horarias dibujadas.
   ============================================================ */
.ahora{
  padding:clamp(1.6rem, 4vw, 2.6rem);
  border:1px solid var(--linea); background:var(--ink-2);
  margin-bottom:clamp(3rem, 7vh, 5rem);
}
.ahora-estado{
  font-family:"Bodoni Moda", serif; letter-spacing:-0.02em;
  font-size:clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); line-height:1.1;
  margin-bottom:0.5rem;
}
.ahora[data-abierto="si"] .ahora-estado{ color:var(--ember) }
.ahora-detalle{ color:var(--muted) }

.franjas h2{ max-width:14ch; margin-bottom:0.7rem }
.franjas-nota{ color:var(--muted); max-width:58ch; margin-bottom:2.2rem }

.dias{ list-style:none; margin:0; padding:0 }
.dias li{
  display:grid; align-items:center; gap:0.5rem 1.2rem;
  grid-template-columns:8.5rem minmax(0,1fr) 15rem;
  padding-block:0.95rem;
}
.dias li + li{ border-top:1px solid var(--linea) }
.dia-nombre{ font-family:"Bodoni Moda", serif; font-size:1.15rem; letter-spacing:-0.01em }
.dia-carril{
  position:relative; height:9px; background:#221C19; display:block;
}
.dia-carril i{
  position:absolute; top:0; bottom:0;
  left:var(--de); right:calc(100% - var(--a));
  background:linear-gradient(to right, #C79A63, var(--ember));
}
.dia-texto{ color:var(--muted); font-size:0.875rem; font-variant-numeric:tabular-nums; text-align:right }
.dias li[data-hoy]{ background:var(--ink-3) }
.dias li[data-hoy] .dia-nombre{ color:var(--ember) }
@media (max-width:760px){
  .dias li{ grid-template-columns:1fr; gap:0.55rem }
  .dia-texto{ text-align:left }
  .dias li[data-hoy]{ padding-inline:0.8rem; margin-inline:-0.8rem }
}
.franjas-pie{ margin-top:2rem; color:var(--muted); font-size:0.875rem; max-width:64ch }
.franjas + .acciones{ margin-top:clamp(2.5rem, 6vh, 4rem) }

/* ============================================================
   SUBPAGINA 3 . DONDE
   Familia: pantalla partida con lista de definiciones.
   ============================================================ */
.partida{
  display:grid; gap:clamp(2.5rem, 6vw, 5rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  align-items:start;
}
@media (max-width:860px){ .partida{ grid-template-columns:1fr } }

.direccion{
  font-family:"Bodoni Moda", serif; letter-spacing:-0.025em;
  font-size:clamp(2.1rem, 1.3rem + 3vw, 3.6rem); line-height:1.08;
  margin-bottom:1.1rem;
}
.direccion-nota{ color:var(--muted); max-width:40ch; margin-bottom:2rem }

.datos{ margin:0; display:grid; gap:0 }
.datos > div{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:0.4rem 1.5rem;
  padding-block:0.95rem;
}
.datos > div + div{ border-top:1px solid var(--linea) }
.datos dt{ color:var(--muted); font-size:0.875rem }
.datos dd{ margin:0; text-align:right; font-variant-numeric:tabular-nums }
.datos a{ color:var(--cream); text-decoration:none; border-bottom:1px solid #4A3E37;
          transition: border-color 160ms var(--salida), color 160ms var(--salida) }
@media (hover:hover) and (pointer:fine){
  .datos a:hover{ color:var(--ember); border-color:var(--ember) }
}

.opinion{ margin-top:clamp(3.5rem, 9vh, 6rem); padding-top:clamp(2.5rem, 6vh, 4rem);
          border-top:1px solid var(--linea) }
.opinion h2{ max-width:18ch; margin-bottom:1.2rem }
.opinion-cifra{ font-size:clamp(1.05rem, 1rem + 0.4vw, 1.3rem); max-width:56ch; margin-bottom:1rem }
.opinion-cifra strong{ color:var(--ember); font-weight:500 }
.opinion-nota{ color:var(--muted); font-size:0.875rem; max-width:62ch }

/* enlaces de la portada a cada subpagina */
.mas{ margin-top:clamp(2rem, 5vh, 3.2rem); display:flex; flex-wrap:wrap;
      align-items:center; gap:1rem var(--paso) }
.mas .nota{ margin-top:0; flex:1 1 22rem }
.mas-centrado{ justify-content:center; text-align:center; flex-direction:column; gap:1.2rem }
.mas-centrado .nota{ flex:none }

/* la prueba social va DEBAJO de la portada, nunca dentro:
   dentro seria un quinto elemento y empujaria el CTA fuera. */
.prueba{
  padding:clamp(1.6rem, 4vh, 2.4rem) var(--canal);
  border-bottom:1px solid var(--linea);
  text-align:center;
}
.prueba p{
  max-width:var(--ancho); margin-inline:auto;
  color:var(--muted); font-size:clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
}
.prueba strong{ color:var(--ember); font-weight:500; font-variant-numeric:tabular-nums }