/* =====================================================================
   AREPITAS DEL VALLE · carta.css  (carta completa)
   ===================================================================== */

.carta-top{position:relative;overflow:hidden;color:var(--hueso);padding:54px 0 48px;background-color:var(--marron-osc);
  background-image:
    repeating-linear-gradient(0deg, rgba(232,184,69,.06) 0 30px, transparent 30px 60px),
    repeating-linear-gradient(90deg, rgba(232,184,69,.06) 0 30px, transparent 30px 60px);}
.carta-top::after{content:"";position:absolute;inset:0;background:radial-gradient(110% 80% at 50% 0%, rgba(232,184,69,.18), transparent 60%);pointer-events:none;}
.carta-top .wrap{position:relative;z-index:2;text-align:center;}
.carta-top .eyebrow{justify-content:center;margin-bottom:14px;}
.carta-top h1{font-size:var(--fs-mega);line-height:.82;color:var(--hueso);}
.carta-top h1 em{font-style:italic;color:var(--dorado);}
.carta-top p{font-size:var(--fs-lead);max-width:46ch;margin:1em auto 0;color:var(--hueso-90);}
.carta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:1.8em;}

/* Clave de alergenos junto a los chips: los iconos aparecen desde el primer
   plato y la leyenda completa estaba al final del todo. */
.alg-key{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;
  padding:10px 22px 12px;background:var(--crema);
  border-bottom:1px solid rgba(92,58,30,.12);
  font-size:.78rem;font-weight:600;color:var(--marron);
}
.alg-key span{display:inline-flex;align-items:center;gap:5px;}
.alg-key .alg{opacity:.72;}

/* Barra superior sólida (carta) */
.cbar{position:sticky;top:0;z-index:70;background:var(--marron-prof);color:var(--hueso);}
.cbar-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;}
.cbar .brand{color:var(--hueso);}
.cbar .brand img{width:42px;height:42px;border-radius:50%;}
.cbar .brand b{font-family:var(--display);font-weight:900;font-size:1.08rem;color:var(--hueso);white-space:nowrap;}
.cbar-links{display:flex;align-items:center;gap:8px;}
.cbar-links a{font-weight:700;font-size:.94rem;padding:.5em .9em;border-radius:999px;color:var(--hueso);transition:background-color 200ms ease, color 200ms ease;}
.cbar-links a.lk-cta{background:var(--dorado);color:var(--marron-prof);display:inline-flex;align-items:center;gap:.4em;}
.cbar-links a.lk-cta svg{width:1em;height:1em;}
@media (hover:hover) and (pointer:fine){
  .cbar-links a.lk-plain:hover,.cbar-links a.lk-plain:focus-visible{background:rgba(251,247,238,.14);}
  .cbar-links a.lk-cta:hover,.cbar-links a.lk-cta:focus-visible{background:var(--dorado-claro);}
}

/* Nav de categorías sticky */
.cat-nav{position:sticky;top:58px;z-index:60;background:rgba(251,247,238,.94);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid rgba(92,58,30,.14);}
/* Degradado en el borde derecho: avisa de que la fila sigue. */
.cat-nav{position:sticky;}
.cat-nav::after{
  content:"";position:absolute;inset:0 0 0 auto;width:44px;pointer-events:none;
  background:linear-gradient(to right, rgba(251,247,238,0), rgba(251,247,238,.96));
}
@media (min-width:700px){ .cat-nav::after{display:none;} }
.cat-nav .scroller{
  display:flex;gap:8px;overflow-x:auto;padding:12px 22px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  /* Thumb-friendly snapping on mobile. Proximity (not mandatory) so manual
     pan still flows; chips snap when the user lets go near one. */
  scroll-snap-type:x proximity;
  scroll-padding-inline:22px;
}
.cat-nav .scroller::-webkit-scrollbar{display:none;}
.cat-nav a{
  flex:0 0 auto;font-weight:700;font-size:.95rem;padding:.55em 1.1em;border-radius:999px;
  background:var(--crema);color:var(--marron-osc);white-space:nowrap;
  scroll-snap-align:start;
  /* Specific transitions; no `all`. Press feedback uses transform only. */
  transition:background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
.cat-nav a:active{transform:scale(.97);}
@media (hover:hover) and (pointer:fine){
  .cat-nav a:hover,.cat-nav a:focus-visible{background:var(--dorado);color:var(--marron-prof);}
}

/* Cuerpo */
.carta-body{padding-block:clamp(48px,7vw,86px);}
/* El scroll-margin ya no es un 122 fijo: se calcula con las variables de las
   barras, mas abajo en este archivo. */
.msec{margin-bottom:clamp(54px,8vw,96px);}
.msec:last-child{margin-bottom:0;}
.msec-head{display:flex;align-items:center;gap:16px;margin-bottom:8px;}
.msec-head h2{font-family:var(--display);font-weight:900;font-style:italic;font-size:var(--fs-h2);color:var(--marron);line-height:1;}
.msec-head .line{flex:1;height:3px;background:linear-gradient(90deg,var(--dorado),transparent);border-radius:3px;transform-origin:left;}
.msec-sub{color:var(--marron);font-size:1rem;margin:0 0 22px;}

.mlist{list-style:none;margin:0;padding:0;}
.m-item{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:baseline;padding:13px 0;border-bottom:1.5px dashed rgba(92,58,30,.22);}
.m-item:last-child{border-bottom:0;}
.m-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
/* En movil el nombre baja un punto y pierde la caja alta: los nombres largos
   ("Queso blanco y dulce de guayabo") ocupaban tres lineas en versalitas. */
.m-name{font-weight:800;font-size:1rem;letter-spacing:.005em;color:var(--marron-osc);line-height:1.2;}
@media (min-width:620px){
  .m-name{font-size:1.08rem;letter-spacing:.01em;text-transform:uppercase;}
}
.m-alg{display:inline-flex;gap:5px;color:var(--marron);}
.m-price{font-family:var(--display);font-weight:900;font-size:1.25rem;color:var(--marron);white-space:nowrap;text-align:right;}
.m-desc{grid-column:1/-1;color:var(--marron);font-size:.92rem;line-height:1.38;margin-top:1px;max-width:60ch;}
.veg{display:inline-block;font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--verde);background:rgba(74,90,58,.14);padding:.2em .6em;border-radius:999px;}

/* Bocadillos: 3 tamaños */
.b-cols-key{display:flex;gap:8px;justify-content:flex-end;margin-bottom:6px;color:var(--verde);font-weight:800;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;}
.b-prices{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.pc{display:flex;flex-direction:column;align-items:center;background:rgba(232,184,69,.18);border:1px solid rgba(232,184,69,.4);border-radius:12px;padding:6px 12px;min-width:64px;}
.pc-l{font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--verde);}
.pc-v{font-family:var(--display);font-weight:900;font-size:1.06rem;color:var(--marron);}

/* Listas cortas en columnas (bebidas, café, cervezas) */
.cols{column-gap:48px;}
.cols .m-item{break-inside:avoid;grid-template-columns:1fr auto;}

/* Destacado arepa especial */
.especial{margin-top:24px;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center;background:linear-gradient(135deg,var(--marron),var(--marron-osc));color:var(--hueso);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--sh-md);}
.especial .e-l{display:contents;}
.especial .star{color:var(--dorado);font-size:1.5rem;line-height:1;grid-row:1;}
.especial .e-l > div{grid-column:2;}
.especial b{font-family:var(--display);font-weight:900;font-style:italic;font-size:1.35rem;display:block;color:var(--hueso);line-height:1.1;text-wrap:balance;}
.especial .e-price{grid-column:2;justify-self:start;}
@media (min-width:560px){
  .especial{grid-template-columns:auto 1fr auto;}
  .especial b{font-size:1.5rem;}
  .especial .e-price{grid-column:3;grid-row:1;justify-self:end;align-self:center;}
}
.especial span{font-size:.92rem;color:rgba(251,247,238,.82);}
.especial .e-price{font-family:var(--display);font-weight:900;font-size:1.8rem;color:var(--dorado-claro);}

/* Leyenda alérgenos + nota */
.legend{margin-top:30px;background:var(--crema);border-radius:var(--r-md);padding:20px 24px;}
.legend h3{font-family:var(--sans);font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--verde);margin:0 0 12px;}
.legend ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px 22px;}
.legend li{display:flex;align-items:center;gap:8px;font-size:.92rem;color:var(--marron-osc);font-weight:600;}
.carta-note{margin-top:18px;text-align:center;font-family:var(--display);font-style:italic;font-size:1.2rem;color:var(--marron);}
.carta-note .sup{display:block;font-family:var(--sans);font-style:normal;font-size:.92rem;color:var(--marron);margin-top:6px;font-weight:600;}

/* Allergen icon size in legend */
.legend .alg{color:var(--marron);}

@media (min-width:720px){
  .msec--grid .mlist{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;}
  .msec--grid .m-item{grid-column:auto;}
}
@media (min-width:760px){
  .bebidas-cafe{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;}
}

/* ============ Legibilidad de la carta · 07/09/2026 ============
   El texto funcional bajaba hasta 9,6 px. En una carta eso no es un detalle
   estético: "Media / Entera / Payés" es lo que dice a qué tamaño corresponde
   cada precio, y hay tres precios por bocadillo. Y el perfil declarado en
   PRODUCT.md incluye clientela mayor. */
.pc-l{font-size:.82rem;letter-spacing:.06em;}
.veg{font-size:.78rem;}
.b-cols-key{font-size:.78rem;}
.legend h3{font-size:.875rem;}

/* ============ Barra de categorías fija · 07/09/2026 ============
   Antes NO se quedaba fija aunque el CSS dijera position:sticky. El motivo
   estaba lejos de aquí: body llevaba overflow-x:hidden, y eso convierte al
   body en contenedor de scroll, con lo que sticky deja de referirse al
   visor. Corregido en brand.css (clip en vez de hidden).

   Las alturas se encadenan con variables para que nada quede pegado con un
   número mágico: al quitar el aviso del cierre, la barra sube sola. */
:root{--cbar-h:58px;--catnav-h:66px;}
/* En movil la barra pasa a dos filas, asi que el ancla tiene que bajar mas. */
@media (max-width:700px){ :root{--catnav-h:94px;} }
.cbar{position:sticky;top:var(--aviso-h,0px);}
.cat-nav{top:calc(var(--aviso-h, 0px) + var(--cbar-h));}

/* Al saltar a una categoría, el titular quedaba debajo de las dos barras. */
.msec{scroll-margin-top:calc(var(--aviso-h, 0px) + var(--cbar-h) + var(--catnav-h) + 16px);}

/* Categoría en la que estás. Es la mitad útil de la barra: no solo saltar,
   también saber dónde estás cuando llevas medio menú bajado. */
.cat-nav a[aria-current="true"]{
  background:var(--marron-osc);
  color:var(--hueso);
}
@media (prefers-reduced-motion:no-preference){
  .cat-nav a{transition:background-color 220ms ease, color 220ms ease, transform 160ms var(--ease-out);}
}

/* ============ Respiro a mitad de carta · 07/09/2026 ============
   La carta eran seis listas idénticas, 4.100 px sin un cambio de textura, y
   ni una fotografía en toda la página. En una web de comida eso está
   incompleto, no es sobriedad. Una sola imagen a sangre, en el punto medio
   del recorrido, y se sigue leyendo. Una decisiva vale más que cinco
   discretas repartidas. */
.msec-foto{
  margin:clamp(54px,8vw,96px) 0;
  position:relative;
  /* Se sale del ancho de lectura a propósito: el corte se tiene que notar. */
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  height:clamp(230px,32vw,420px);
  overflow:hidden;
  background:var(--marron-osc);
}
.msec-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 48%;}
.msec-foto figcaption{
  position:absolute;inset:auto 0 0 0;
  padding:22px clamp(22px,5vw,48px) 18px;
  background:linear-gradient(to top,rgba(26,15,7,.88),transparent);
  color:var(--hueso);
  font-family:var(--display);font-weight:900;font-style:italic;
  font-size:clamp(1.15rem,1rem + .9vw,1.7rem);
  text-shadow:0 2px 14px rgba(26,15,7,.7);
}

/* ============ Escala tipográfica de la carta · 07/09/2026 ============
   Dos problemas medidos:

   1) La descripción del plato, que es EL texto de una carta, estaba a 14,7 px.
      El mínimo para texto de lectura son 16, y el perfil de PRODUCT.md incluye
      clientela mayor. Una carta que no se lee no vende.

   2) Jerarquía turbia: entre 13,1 y 17,3 px había SEIS niveles distintos
      (etiqueta de precio, descripción, subtítulo, nombre, precio, valor).
      Escalones de 1,05 no se leen como escalones, se leen como ruido.
      Se separan los tres que importan: nombre > descripción > etiqueta. */
.m-desc{font-size:1rem;line-height:1.45;max-width:58ch;}
@media (min-width:620px){
  .m-name{font-size:1.24rem;}
}
.m-price{font-size:1.4rem;}

/* ============ Impresión · 07/09/2026 ============
   Una carta de restaurante es de las poquísimas páginas web que la gente
   imprime o guarda en PDF de verdad: el personal para tenerla a mano, alguien
   que organiza una comida, un cliente que la quiere enseñar. Sin esto salían
   seis páginas de fondo marrón a cuadros, gastando tinta y con los precios
   apenas legibles. */
@media print{
  @page{ margin:14mm 12mm; }

  /* Fuera lo que no es carta. Los botones son .carta-actions: en papel un
     botón de "Pedir por Glovo" no lleva a ninguna parte. */
  .cbar, .cat-nav, .aviso, #loader, .marquee, .strip, .foot,
  .carta-actions, .msec-foto, .scroll-cue{ display:none !important; }

  html, body, .carta-top, .msec, .especial, .alg-key, .legend{
    background:#fff !important;
    background-image:none !important;
    color:#000 !important;
  }
  /* Este ::after ya existía como velo dorado en absoluto. Si solo le cambio
     el contenido, el texto se va a la esquina superior. Se anula aquí. */
  .carta-top::after{ content:none !important; }

  .carta-top{ padding:0 0 6mm !important; }
  .carta-top .eyebrow{ color:#333 !important; }
  .carta-top h1, .carta-top h1 em{ color:#000 !important; font-size:26pt !important; }
  .carta-top p{ color:#333 !important; font-size:10pt !important; max-width:none !important; }

  /* Los datos que hacen falta cuando la hoja ya no es una web. Va en .wrap,
     que sí es un bloque normal, y por eso cae debajo de todo. */
  .carta-top .wrap::after{
    content:"Arepitas del Valle · Cam. Fuente Vieja, 1 · La Perdoma, La Orotava · 922 147 451 · Miércoles a domingo, 9:00–16:00 y 18:00–23:00";
    display:block; margin-top:5mm; padding-top:2mm;
    border-top:1px solid #000;
    font-family:var(--sans); font-size:8.5pt; color:#000;
  }

  [data-reveal]{ opacity:1 !important; transform:none !important; }

  /* break-inside:avoid en una seccion entera la empuja de pagina y deja
     medio folio en blanco. Solo en el plato, que es pequeno y ahi si importa
     que no se parta el nombre del precio. */
  .msec{ margin-bottom:7mm !important; }
  .msec-head{ break-after:avoid; }
  .msec-head h2{ font-size:15pt !important; color:#000 !important; }
  .msec-head .line{ background:#000 !important; height:1px !important; }
  .msec-sub{ color:#333 !important; font-size:9pt !important; }
  .m-item{ break-inside:avoid; padding:2mm 0 !important; border-bottom:1px dotted #999 !important; }
  .m-name{ font-size:10.5pt !important; color:#000 !important; }
  .m-desc{ font-size:9pt !important; color:#333 !important; }
  .m-price, .pc-v, .e-price, .especial *{ color:#000 !important; }
  .pc-l{ color:#444 !important; }
  .especial{ border:1.5pt solid #000 !important; box-shadow:none !important; }
  .alg{ border-color:#000 !important; color:#000 !important; }

  .msec--grid .mlist{ column-count:2; column-gap:10mm; }
}

/* ============ Categorías: todas a la vista en móvil · 08/09/2026 ============
   Iban en una fila que se arrastraba de lado. Funciona si sabes que se puede
   arrastrar, y mucha gente no lo sabe: se quedaba viendo tres de seis y
   pensando que eso era toda la carta.
   Las seis suman unos 627 px y en un móvil hay 346 útiles, así que en una
   fila no caben de ninguna manera. Se reparten en dos, con la pastilla algo
   más pequeña. Ocupa unos 90 px de barra fija, que es el precio de que nadie
   se pierda media carta. */
@media (max-width:700px){
  .cat-nav .scroller{
    flex-wrap:wrap;
    justify-content:center;
    overflow-x:visible;
    scroll-snap-type:none;
    gap:6px;
    padding:9px 16px;
  }
  .cat-nav a{
    font-size:.86rem;
    padding:.46em .78em;
    scroll-snap-align:none;
  }
  /* Ya no se arrastra: el degradado del borde mentiría. */
  .cat-nav::after{display:none;}
}