/* =========================================================
   CASA LOOP — hoja de estilos
   Paleta y tipos extraídos de CARTA CASA LOOP.pdf
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* color */
  --crema:      #F4EBDC;
  --crema-2:    #EADFCB;
  --papel:      #FCF7EE;
  --tinta:      #191310;
  --tinta-70:   #4B3F38;
  --tinta-45:   #6F6156;   /* AA sobre crema (5.1:1) */
  --linea:      #D8CBB6;
  --rojo:       #B0241A;   /* rojo de marca, AA sobre crema (5.8:1) */
  --rojo-vivo:  #D62B18;   /* solo display grande */
  --rojo-hondo: #8E211A;   /* duotono de las fotos del PDF */
  --cacao:      #6C2D1E;   /* exacto del PDF */
  --carbon:     #17110E;
  --carbon-2:   #241A15;

  /* tipografía */
  --f-display: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  --f-texto:   "Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

  /* medidas */
  --container: 1240px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --nav-h: 72px;

  /* movimiento */
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.65,.05,.36,1);
  --t-fast: .22s var(--e-out);
  --t-med:  .45s var(--e-out);
  --t-slow: .9s var(--e-out);

  --shadow-1: 0 1px 2px rgba(25,19,16,.06), 0 6px 18px -8px rgba(25,19,16,.18);
  --shadow-2: 0 2px 6px rgba(25,19,16,.08), 0 26px 60px -26px rgba(25,19,16,.36);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--f-texto);
  font-size:clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height:1.62;
  color:var(--tinta);
  background-color:var(--crema);
  background-image:url("../img/textura-estuco.jpg");
  background-size:520px;
  background-repeat:repeat;
  background-blend-mode:multiply;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* velo crema para que la textura quede muy sutil */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background:var(--crema);
  opacity:.62;
  pointer-events:none;
}

img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; }
h1,h2,h3,h4,p,figure,dl,dd,ul{ margin:0; }
ul{ list-style:none; padding:0; }

:focus-visible{
  outline:3px solid var(--rojo);
  outline-offset:3px;
  border-radius:2px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:1rem; top:-100px; z-index:200;
  background:var(--rojo); color:#fff; padding:.7rem 1.1rem;
  border-radius:var(--r-md); font-weight:600; text-decoration:none;
  transition:top var(--t-fast);
}
.skip-link:focus{ top:1rem; }

/* ---------- 3. Utilidades ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.eyebrow{
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--tinta-45);
  margin:0 0 1rem;
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:currentColor; flex:none;
}
.eyebrow--red{ color:var(--rojo); }

.h-display{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(2.6rem, 1.4rem + 5.4vw, 5.4rem);
  line-height:.92;
  letter-spacing:.005em;
  text-transform:uppercase;
  color:var(--cacao);
  margin:0 0 1.1rem;
}
.h-display--light{ color:var(--crema); }
.txt-red{ color:var(--rojo-vivo); }

.lede{
  font-size:clamp(1.05rem, 1rem + .35vw, 1.3rem);
  line-height:1.55;
  color:var(--tinta-70);
  margin-bottom:1rem;
}

.price{
  font-variant-numeric:tabular-nums;
  font-weight:600;
  color:var(--rojo);
  white-space:nowrap;
}

.sec-head{ max-width:44rem; margin-bottom:clamp(2.5rem,5vw,4rem); }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head--center .eyebrow{ justify-content:center; }
.sec-head__note{ color:var(--tinta-70); max-width:36rem; }
.sec-head--center .sec-head__note{ margin-inline:auto; }
.sec-head__note--light{ color:rgba(244,235,220,.72); }

/* botones */
.btn{
  --btn-bg: var(--rojo);
  --btn-fg: #FFF6EA;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.6rem;
  min-height:52px;
  border-radius:100px;
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.02em;
  text-decoration:none;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transition:transform var(--t-fast), box-shadow var(--t-fast), color var(--t-fast);
}
.btn svg{ width:1.15em; height:1.15em; flex:none; }
.btn--solid{ background:var(--btn-bg); color:var(--btn-fg); box-shadow:var(--shadow-1); }
.btn--solid::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--carbon);
  transform:translateY(101%);
  transition:transform .42s var(--e-out);
}
.btn--solid:hover::after,.btn--solid:focus-visible::after{ transform:translateY(0); }
.btn--solid:hover,.btn--solid:focus-visible{ transform:translateY(-2px); box-shadow:var(--shadow-2); }

.btn--ghost{
  color:var(--tinta);
  border:1.5px solid var(--tinta);
  background:transparent;
}
.btn--ghost:hover,.btn--ghost:focus-visible{
  background:var(--tinta); color:var(--crema); transform:translateY(-2px);
}
.btn--block{ width:100%; }

/* ---------- 4. Duotono (réplica del tratamiento del PDF) ---------- */
.duo{ position:relative; overflow:hidden; isolation:isolate; background:var(--crema-2); }
.duo img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.16) brightness(1.04);
  transition:filter 1.1s var(--e-out), transform 1.4s var(--e-out);
}
.duo::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:var(--rojo-hondo);
  mix-blend-mode:color;
  transition:opacity 1s var(--e-out);
}
.duo::before{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background-image:radial-gradient(currentColor .8px, transparent .9px);
  background-size:4px 4px;
  color:rgba(142,33,26,.30);
  mix-blend-mode:multiply;
  opacity:.9;
  transition:opacity 1s var(--e-out);
}
/* al entrar en pantalla / al pasar el cursor, vuelve a color */
.duo.is-color::after,
.duo:hover::after,
.duo:focus-within::after{ opacity:0; }
.duo.is-color::before,
.duo:hover::before,
.duo:focus-within::before{ opacity:0; }
.duo.is-color img,
.duo:hover img,
.duo:focus-within img{ filter:none; }
/* las que se quedan siempre en duotono */
.duo--fixed::after,.duo--fixed::before{ opacity:1 !important; }
.duo--fixed img{ filter:grayscale(1) contrast(1.16) brightness(1.04) !important; }

/* ---------- 5. Revelado en scroll ---------- */
.js [data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s var(--e-out), transform .8s var(--e-out);
  transition-delay:var(--rd,0ms);
}
.js [data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* ---------- 6. Nav ---------- */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:90;
  transition:transform .5s var(--e-out), background-color var(--t-med), box-shadow var(--t-med);
}
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(244,235,220,.86);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  opacity:0;
  transition:opacity var(--t-med), border-color var(--t-med);
}
.nav.is-stuck::before{ opacity:1; border-bottom-color:var(--linea); }
.nav.is-hidden{ transform:translateY(-104%); }
.nav:focus-within{ transform:none !important; }

/* que la barra fija no tape los títulos al saltar por anclas */
:target,
#top,#manifiesto,#recomendados,#carta,#local,#visitanos{ scroll-margin-top:calc(var(--nav-h) + 1rem); }

.nav__inner{
  max-width:var(--container); margin-inline:auto;
  padding:0 var(--gutter);
  min-height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}

.nav__brand{
  display:inline-flex; align-items:center; gap:.06em;
  min-height:44px; padding-inline-end:.35rem;
  text-decoration:none;
  font-family:var(--f-display);
  font-size:1.35rem;
  letter-spacing:.04em;
  color:var(--cacao);
  line-height:1;
}
.nav__brand-ring{ width:.72em; height:.72em; color:var(--rojo); }
.nav__brand-ring:first-of-type{ margin-inline-end:-.1em; }

.nav__links{ display:flex; align-items:center; gap:.4rem; }
.nav__links a{
  text-decoration:none;
  font-size:.86rem; font-weight:500; letter-spacing:.04em;
  padding:.6rem .85rem;
  border-radius:100px;
  position:relative;
  transition:color var(--t-fast), background-color var(--t-fast);
}
.nav__links a:not(.nav__wa)::after{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.42rem;
  height:1.5px; background:var(--rojo);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--e-out);
}
.nav__links a:not(.nav__wa):hover::after,
.nav__links a:not(.nav__wa).is-active::after{ transform:scaleX(1); }
.nav__links a.is-active{ color:var(--rojo); }

.nav__wa{
  background:var(--rojo); color:#FFF6EA !important;
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.62rem 1.1rem !important;
  margin-inline-start:.5rem;
  min-height:44px;
  box-shadow:var(--shadow-1);
}
.nav__wa svg{ width:1.05em; height:1.05em; }
.nav__wa:hover{ background:var(--carbon); }

.nav__burger{
  display:none;
  width:46px; height:46px;
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
  border-radius:50%;
}
.nav__burger span{
  width:22px; height:2px; background:var(--tinta); border-radius:2px;
  transition:transform var(--t-med), opacity var(--t-fast);
}
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  padding-top:calc(var(--nav-h) + 2rem);
  padding-bottom:clamp(3rem,9vh,7rem);
  overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:0; isolation:isolate; }

/* Lienzo WebGL del shader «Waves». Si no hay WebGL o el shader no compila,
   el canvas queda transparente y abajo sigue el muro crema del body. */
.hero__waves{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  display:block;
}

/* La foto vuelve a ser fondo a sangre. Para que no tape el shader, en vez de
   recortarla se le difumina el borde izquierdo con una máscara: la imagen se
   disuelve en las olas a lo largo de unos 330 px en vez de cortar en seco. */
.hero__photo{
  position:absolute; z-index:2;
  inset-block:-6%;
  inset-inline-end:0;
  width:min(56%,780px);
  will-change:transform;
  -webkit-mask-image:linear-gradient(100deg,
    rgba(0,0,0,0) 2%, rgba(0,0,0,.45) 18%, rgba(0,0,0,1) 44%);
  mask-image:linear-gradient(100deg,
    rgba(0,0,0,0) 2%, rgba(0,0,0,.45) 18%, rgba(0,0,0,1) 44%);
}
.hero__photo img{
  width:100%; height:100%; object-fit:cover;
  animation:kenburns 26s var(--e-io) infinite alternate;
}
@keyframes kenburns{
  from{ scale:1.04; }
  to{   scale:1.14; }
}

/* Velos de legibilidad sobre las olas. Tres capas:
   1) arriba, para que la barra de navegación siempre caiga sobre crema;
   2) en diagonal, que deja la columna de texto casi opaca (~92 %) y abre
      hacia la derecha para que el movimiento se vea junto a la tarjeta;
   3) abajo, para asentar los botones.                                     */
.hero__veil{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(to bottom,
      var(--crema) 0%, rgba(244,235,220,.78) 8%, rgba(244,235,220,0) 24%),
    linear-gradient(100deg,
      rgba(244,235,220,.95) 0%, rgba(244,235,220,.91) 34%,
      rgba(244,235,220,.66) 48%, rgba(244,235,220,.16) 72%,
      rgba(244,235,220,0) 100%),
    linear-gradient(to top,
      rgba(244,235,220,.92) 0%, rgba(244,235,220,0) 30%);
}
.hero__grain{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background-image:radial-gradient(rgba(108,45,30,.16) .7px, transparent .8px);
  background-size:3px 3px;
  opacity:.38;
  mix-blend-mode:multiply;
}

.hero__inner{
  position:relative; z-index:6;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:end;
}
.hero__copy{ min-width:0; max-width:38rem; }

/* La foto pasa de fondo a tarjeta: flota sobre las olas en vez de taparlas. */
.hero__card{
  margin:0;
  width:min(32vw,400px);
  aspect-ratio:3/4;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);
  align-self:end;
}
.hero__card img{
  width:100%; height:100%; object-fit:cover;
  animation:kenburns 26s var(--e-io) infinite alternate;
}
@keyframes kenburns{
  from{ scale:1.04; }
  to{   scale:1.14; }
}

.hero__title{ margin:0 0 .7rem; }
.wordmark{
  display:flex; flex-direction:column; align-items:flex-start;
  font-family:var(--f-display);
  font-size:clamp(4rem, 26vw, 13rem);
  line-height:.80;
  letter-spacing:-.008em;
  color:var(--cacao);
}
.wordmark__line{ display:flex; align-items:center; }
.wordmark__t{ display:inline-block; }
.wordmark__o{
  width:.80em; height:.80em; flex:none;
  color:var(--rojo-vivo);
  margin-block-start:.02em;
}
.wordmark__o:first-of-type{ margin-inline-end:-.17em; }
.wordmark--sm{ font-size:clamp(2.6rem,9vw,4.2rem); align-items:center; }

.hero__tag{
  font-family:var(--f-texto);
  font-weight:500;
  font-size:clamp(1.05rem,.9rem + .8vw,1.6rem);
  letter-spacing:.02em;
  color:var(--rojo);
  margin:0 0 1.1rem;
}
.hero__lede{
  max-width:30rem;
  color:var(--tinta-70);
  font-size:clamp(1rem,.97rem + .25vw,1.15rem);
  margin-bottom:2rem;
}
.hero__lede strong{ color:var(--tinta); font-weight:600; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; }

/* sello circular */
.hero__seal{
  position:absolute; z-index:7;
  inset-block-start:calc(var(--nav-h) + 3vh);
  inset-inline-end:clamp(1rem,4vw,4rem);
  width:clamp(104px,11vw,150px); aspect-ratio:1;
  display:grid; place-items:center;
}
/* disco crema detrás del sello: lo despega de las olas pase lo que pase */
/* z-index negativo: queda bajo el aro y el texto del sello, pero dentro de su
   propio contexto de apilamiento, así que no se cuela detrás del velo. */
.hero__seal::before{
  content:""; position:absolute; inset:-14%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle,
    rgba(244,235,220,.96) 46%, rgba(244,235,220,0) 76%);
}
.hero__seal-svg{
  position:absolute; inset:0; width:100%; height:100%;
  animation:spin 26s linear infinite;
}
.hero__seal-txt{
  font-family:var(--f-texto);
  font-size:15.5px; font-weight:600; letter-spacing:.11em;
  fill:var(--cacao);
  text-transform:uppercase;
}
.hero__seal-ring{ width:34%; color:var(--rojo-vivo); }
@keyframes spin{ to{ transform:rotate(360deg); } }

.hero__scroll{
  position:absolute; z-index:7;
  inset-block-end:1.6rem; inset-inline-start:50%;
  translate:-50% 0;
  width:26px; height:44px;
  border:1.5px solid var(--tinta-45);
  border-radius:100px;
  display:grid; place-items:start center;
  padding-top:7px;
}
/* área táctil de 44×44 sin engordar la píldora */
.hero__scroll::after{ content:""; position:absolute; inset:-9px; }
.hero__scroll span{
  width:3px; height:8px; border-radius:2px; background:var(--rojo);
  animation:scrolldot 1.9s var(--e-io) infinite;
}
@keyframes scrolldot{
  0%{ transform:translateY(0); opacity:0; }
  25%{ opacity:1; }
  75%{ transform:translateY(17px); opacity:0; }
  100%{ transform:translateY(17px); opacity:0; }
}

/* ---------- 8. Marquesina ---------- */
.marquee{
  background:var(--rojo);
  color:#FFF3E4;
  overflow:hidden;
  padding:.85rem 0;
  border-block:1px solid rgba(23,17,14,.14);
}
/* 6 copias del texto: al desplazar 2 copias (33,33 %) el bucle es invisible
   y la pista sigue cubriendo pantallas de hasta ~2560 px */
.marquee__track{ display:flex; width:max-content; animation:slide 26s linear infinite; }
.marquee__set{
  display:inline-flex; align-items:center; gap:1.1rem;
  padding-inline-end:1.1rem;
  font-family:var(--f-display);
  font-size:clamp(1.15rem,3.2vw,2rem);
  letter-spacing:.05em;
  white-space:nowrap;
}
.marquee__set svg{ width:.62em; height:.62em; color:#FFF3E4; opacity:.85; }
@keyframes slide{ to{ transform:translateX(-33.3333%); } }
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* ---------- 9. Manifiesto ---------- */
.manifiesto{ padding-block:clamp(4.5rem,11vw,9rem); }
.manifiesto__grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(2.5rem,6vw,5.5rem);
  align-items:center;
}
.manifiesto__copy p{ color:var(--tinta-70); max-width:34rem; }
.manifiesto__copy p + p{ margin-top:1rem; }

.facts{
  display:grid; gap:1px;
  background:var(--linea);
  border:1px solid var(--linea);
  border-radius:var(--r-md);
  overflow:hidden;
  margin-top:2.4rem;
  grid-template-columns:repeat(3,1fr);
}
.facts li{
  background:var(--papel);
  padding:1.1rem 1rem 1.2rem;
  display:flex; flex-direction:column; gap:.3rem;
}
.facts b{
  font-family:var(--f-display); font-weight:400;
  font-size:1.75rem; line-height:1; color:var(--rojo);
  letter-spacing:.01em;
}
.facts span{ font-size:.8rem; line-height:1.35; color:var(--tinta-45); }

.manifiesto__media{ position:relative; }
.frame{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-2);
  aspect-ratio:3/4;
  will-change:transform;
}
.frame img{ width:100%; height:100%; object-fit:cover; }
.frame--sm{
  position:absolute;
  width:44%;
  aspect-ratio:4/5;
  inset-block-end:-9%;
  inset-inline-start:-8%;
  border:6px solid var(--papel);
  border-radius:var(--r-md);
}

/* ---------- 10. Recomendados ---------- */
.recos{ padding-block:clamp(3.5rem,8vw,6.5rem); }
.recos__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,2.2vw,1.75rem);
}
.reco{
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:var(--r-lg);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.reco:hover{ transform:translateY(-6px); box-shadow:var(--shadow-2); border-color:transparent; }
.reco__media{ position:relative; aspect-ratio:4/5; }
.reco__media img{ width:100%; height:100%; object-fit:cover; }
.reco:hover .reco__media img{ transform:scale(1.05); }

.reco__num{
  position:absolute; z-index:4;
  inset-block-start:.6rem; inset-inline-start:.85rem;
  font-family:var(--f-display);
  font-size:clamp(2.2rem,4vw,3.1rem);
  line-height:1;
  color:var(--crema);
  text-shadow:0 2px 14px rgba(23,17,14,.45);
  letter-spacing:.01em;
}
.reco__media--pattern{
  background:
    radial-gradient(circle at center, transparent 33%, var(--rojo) 34%, var(--rojo) 47%, transparent 48%) 0 0/54px 54px,
    var(--crema-2);
  display:grid; place-items:center;
}
.reco__media--pattern .reco__num{ color:var(--cacao); text-shadow:none; }
.reco__pattern-tag{
  background:var(--papel);
  border:1px solid var(--rojo);
  color:var(--rojo);
  font-size:.7rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.45rem .8rem;
  border-radius:100px;
}

.reco__body{ padding:1.1rem 1.15rem 1.2rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.reco__name{
  font-family:var(--f-display); font-weight:400;
  font-size:1.6rem; line-height:1; letter-spacing:.02em;
  text-transform:uppercase; color:var(--cacao);
}
.reco__desc{ font-size:.875rem; line-height:1.5; color:var(--tinta-70); flex:1; }
.reco__foot{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin-top:.35rem;
}
.reco__foot .price{ font-size:1.05rem; }

.add{
  min-height:44px; padding:.55rem 1.05rem;
  border:1.5px solid var(--tinta);
  border-radius:100px;
  font-size:.82rem; font-weight:600; letter-spacing:.05em;
  transition:background-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.add:hover,.add:focus-visible{ background:var(--rojo); border-color:var(--rojo); color:#FFF6EA; }
.add:active{ transform:scale(.95); }
.add.is-done{ background:var(--cacao); border-color:var(--cacao); color:#FFF6EA; }

/* ---------- 11. Carta ---------- */
.carta{
  padding-block:clamp(4rem,9vw,7rem);
  background:linear-gradient(to bottom, rgba(234,223,203,0), rgba(234,223,203,.55) 12%, rgba(234,223,203,.55) 88%, rgba(234,223,203,0));
}

.tabs__bar{
  position:sticky; top:var(--nav-h); z-index:40;
  display:flex; gap:.25rem;
  padding:.4rem;
  margin-bottom:2.5rem;
  background:rgba(252,247,238,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--linea);
  border-radius:100px;
  overflow-x:auto;
  scrollbar-width:none;
  width:fit-content;
  max-width:100%;
  margin-inline:auto;
  box-shadow:var(--shadow-1);
}
.tabs__bar::-webkit-scrollbar{ display:none; }
.tabs__btn{
  flex:none;
  min-height:44px;
  padding:.55rem 1.15rem;
  border-radius:100px;
  font-size:.85rem; font-weight:600; letter-spacing:.05em;
  color:var(--tinta-45);
  white-space:nowrap;
  transition:color var(--t-fast), background-color var(--t-fast);
}
.tabs__btn:hover{ color:var(--tinta); }
.tabs__btn.is-active{ color:#FFF6EA; background:var(--rojo); }

.tabs__panel[hidden]{ display:none; }
.tabs__panel{ animation:panelIn .5s var(--e-out); }
@keyframes panelIn{ from{ opacity:0; transform:translateY(10px); } }
@media (prefers-reduced-motion: reduce){ .tabs__panel{ animation:none; } }

.panel-note{
  text-align:center;
  font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tinta-45);
  margin-bottom:2rem;
}

/* filas estilo carta impresa, con puntos guía */
.menu{ display:grid; gap:.15rem; max-width:60rem; margin-inline:auto; }
.menu__row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:.2rem 1rem;
  padding:.95rem .2rem;
  border-bottom:1px solid var(--linea);
  transition:background-color var(--t-fast);
}
.menu__row:hover{ background:rgba(252,247,238,.75); }
.menu__main{ min-width:0; }
.menu__line{
  display:flex; align-items:baseline; gap:.55rem;
  min-width:0;
}
.menu__name{
  flex:0 1 auto; min-width:0;
  font-size:1rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--tinta);
  line-height:1.25;
}
.menu__desc{
  font-size:.86rem; line-height:1.45;
  color:var(--tinta-45);
  margin-top:.22rem;
  max-width:42rem;
}
.menu__dots{
  flex:1 1 auto;
  min-width:.9rem;
  height:0;
  border-bottom:2px dotted var(--linea);
  transform:translateY(-.3em);
}
.menu__price{ flex:none; font-size:1rem; }
.menu__add{
  position:relative;
  width:40px; height:40px;
  justify-self:end;
  border:1.5px solid var(--linea);
  border-radius:50%;
  font-size:1.2rem; font-weight:600; line-height:1;
  color:var(--rojo);
  display:grid; place-items:center;
  transition:background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
/* área táctil de 44×44 sin agrandar el círculo */
.menu__add::after{ content:""; position:absolute; inset:-3px; border-radius:50%; }
.menu__add:hover,.menu__add:focus-visible{ background:var(--rojo); border-color:var(--rojo); color:#FFF6EA; }
.menu__add:active{ transform:scale(.9); }
.menu__add.is-done{ background:var(--cacao); border-color:var(--cacao); color:#FFF6EA; }
.menu--tight .menu__row{ padding-block:.72rem; }

/* platos con foto */
.menu--cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,2.2vw,1.75rem);
  max-width:none;
}
.dish{
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:var(--r-lg);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform var(--t-med), box-shadow var(--t-med);
}
.dish:hover{ transform:translateY(-6px); box-shadow:var(--shadow-2); }
.dish__media{ aspect-ratio:4/5; }
.dish__media img{ width:100%; height:100%; object-fit:cover; }
.dish:hover .dish__media img{ transform:scale(1.05); }
.dish__body{ padding:1.05rem 1.1rem 1.15rem; display:flex; flex-direction:column; gap:.45rem; flex:1; }
.dish__foot{ display:flex; align-items:center; justify-content:space-between; gap:.7rem; margin-top:auto; padding-top:.4rem; }

/* chips de adiciones */
.chips{ max-width:60rem; margin:2.6rem auto 0; }
.chips__title{
  font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--tinta-45); margin-bottom:.9rem; text-align:center;
}
.chips__row{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.chip{
  min-height:44px;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem 1rem;
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:100px;
  font-size:.85rem; font-weight:500;
  transition:border-color var(--t-fast), transform var(--t-fast), background-color var(--t-fast);
}
.chip em{ font-style:normal; color:var(--rojo); font-weight:600; font-variant-numeric:tabular-nums; }
.chip::before{ content:"+"; color:var(--rojo); font-weight:700; }
.chip:hover,.chip:focus-visible{ border-color:var(--rojo); transform:translateY(-2px); }
.chip.is-done{ background:var(--cacao); border-color:var(--cacao); color:#FFF6EA; }
.chip.is-done em,.chip.is-done::before{ color:#FFF6EA; }

.beb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3.5vw,3rem); }
.beb__title{
  font-family:var(--f-display); font-weight:400;
  font-size:1.55rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--cacao);
  padding-bottom:.5rem; margin-bottom:.4rem;
  border-bottom:2px solid var(--rojo);
}
.beb .menu{ max-width:none; }

/* ---------- 12. El local ---------- */
.local{
  background:var(--carbon);
  color:var(--crema);
  padding-block:clamp(4rem,9vw,7rem);
  position:relative;
  overflow:hidden;
}
.local::before{
  content:""; position:absolute; inset:0; opacity:.06; pointer-events:none;
  background:radial-gradient(circle at center, transparent 33%, var(--crema) 34%, var(--crema) 46%, transparent 47%) 0 0/72px 72px;
}
.local .container{ position:relative; }
.local .eyebrow{ color:rgba(244,235,220,.6); }

.strip{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding-inline:var(--gutter);
  padding-block:.5rem 1.5rem;
  scrollbar-width:thin;
  scrollbar-color:var(--rojo) transparent;
  -webkit-overflow-scrolling:touch;
}
.strip::-webkit-scrollbar{ height:6px; }
.strip::-webkit-scrollbar-thumb{ background:var(--rojo); border-radius:100px; }
.strip__track{ display:flex; gap:clamp(.75rem,1.6vw,1.25rem); width:max-content; }
.strip__item{
  scroll-snap-align:center;
  flex:none;
  width:clamp(210px,26vw,320px);
  aspect-ratio:3/4;
  border-radius:var(--r-lg);
  position:relative;
}
.strip__item img{ width:100%; height:100%; object-fit:cover; }
.strip__item figcaption{
  position:absolute; z-index:4; inset-block-end:0; inset-inline:0;
  padding:2.4rem .95rem .9rem;
  background:linear-gradient(to top, rgba(23,17,14,.85), transparent);
  font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--crema);
}

/* ---------- 13. Visítanos ---------- */
.visita{ padding-block:clamp(4.5rem,10vw,8rem); }
.visita__grid{
  display:grid; grid-template-columns:1fr .8fr;
  gap:clamp(2.5rem,6vw,5rem); align-items:center;
}
.datos{ margin:2rem 0 2.2rem; display:grid; gap:1.35rem; }
.datos__item dt{
  display:flex; align-items:center; gap:.5rem;
  font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--tinta-45); margin-bottom:.35rem;
}
.datos__item dt svg{ width:14px; height:14px; color:var(--rojo); }
.datos__item dd{ margin:0; font-size:1.05rem; line-height:1.45; }
.datos__item dd a{
  display:inline-block;
  padding-block:.55rem;
  text-decoration:none;
  border-bottom:1.5px solid var(--linea);
  transition:border-color var(--t-fast), color var(--t-fast);
}
.datos__item dd a:hover{ color:var(--rojo); border-bottom-color:var(--rojo); }
.datos__pend{ color:var(--tinta-45); font-style:italic; }
.visita__media{ aspect-ratio:4/5; }

/* ---------- 14. Footer ---------- */
.foot{
  background:var(--carbon);
  color:var(--crema);
  padding-block:clamp(3rem,6vw,4.5rem);
}
.foot__inner{ display:grid; gap:1.6rem; justify-items:center; text-align:center; }
.foot__brand{ text-decoration:none; }
.foot__brand .wordmark{ color:var(--crema); }
.foot__brand .wordmark__o{ color:var(--rojo-vivo); }
.foot__tag{ color:rgba(244,235,220,.65); font-size:.95rem; line-height:1.5; }
.foot__links{ display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center; }
.foot__links a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:.85rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; color:rgba(244,235,220,.8);
  border-bottom:1.5px solid transparent;
  transition:color var(--t-fast), border-color var(--t-fast);
}
.foot__links a:hover{ color:var(--crema); border-bottom-color:var(--rojo-vivo); }
.foot__legal{ font-size:.75rem; color:rgba(244,235,220,.42); letter-spacing:.04em; }

/* ---------- 15. Carrito ---------- */
.cart-fab{
  position:fixed; z-index:80;
  inset-block-end:1.4rem; inset-inline-end:1.4rem;
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:56px; padding:.7rem 1.3rem;
  background:var(--carbon); color:var(--crema);
  border-radius:100px;
  box-shadow:var(--shadow-2);
  font-size:.9rem; font-weight:600; letter-spacing:.03em;
  transform:translateY(140%);
  visibility:hidden;
  transition:transform .5s var(--e-out), background-color var(--t-fast), visibility 0s linear .5s;
}
.cart-fab.is-on{ transform:translateY(0); visibility:visible; transition:transform .5s var(--e-out), background-color var(--t-fast), visibility 0s; }
.cart-fab:hover{ background:var(--rojo); }
.cart-fab svg{ width:20px; height:20px; }
.cart-fab__count{
  position:absolute; inset-block-start:-6px; inset-inline-start:-6px;
  min-width:24px; height:24px; padding:0 6px;
  background:var(--rojo-vivo); color:#fff;
  border-radius:100px;
  display:grid; place-items:center;
  font-size:.75rem; font-weight:700;
  border:2px solid var(--crema);
}
.cart-fab.is-bump{ animation:bump .45s var(--e-out); }
@keyframes bump{ 30%{ transform:translateY(0) scale(1.07); } }
.cart-fab__total{ font-variant-numeric:tabular-nums; opacity:.72; }

.cart-backdrop{
  position:fixed; inset:0; z-index:95;
  background:rgba(23,17,14,.5);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;
  transition:opacity var(--t-med);
}
.cart-backdrop.is-on{ opacity:1; }

.cart{
  position:fixed; z-index:100;
  inset-block:0; inset-inline-end:0;
  width:min(440px,100vw);
  background:var(--papel);
  display:flex; flex-direction:column;
  transform:translateX(101%);
  visibility:hidden;                 /* fuera del orden de tabulación cuando está cerrado */
  transition:transform .5s var(--e-out), visibility 0s linear .5s;
  box-shadow:-20px 0 60px -30px rgba(23,17,14,.6);
}
.cart.is-open{ transform:translateX(0); visibility:visible; transition:transform .5s var(--e-out), visibility 0s; }

.cart__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.25rem;
  border-bottom:1px solid var(--linea);
  flex:none;
}
.cart__title{
  font-family:var(--f-display); font-weight:400;
  font-size:1.6rem; letter-spacing:.03em; text-transform:uppercase; color:var(--cacao);
}
.cart__close{ width:44px; height:44px; display:grid; place-items:center; border-radius:50%; }
.cart__close svg{ width:20px; height:20px; }
.cart__close:hover{ background:var(--crema-2); }

.cart__body{ flex:1; overflow-y:auto; padding:1.1rem 1.25rem; overscroll-behavior:contain; }
.cart__list{ display:grid; gap:.2rem; }
.cart__item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.35rem .8rem;
  padding:.85rem 0;
  border-bottom:1px solid var(--linea);
}
.cart__item-name{ font-size:.92rem; font-weight:600; line-height:1.3; }
.cart__item-cat{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-45); }
.cart__item-price{ font-size:.95rem; text-align:end; }
.cart__qty{ display:inline-flex; align-items:center; gap:.15rem; grid-column:1; }
.cart__qty button{
  width:32px; height:32px; border-radius:50%;
  border:1px solid var(--linea);
  display:grid; place-items:center;
  font-size:1rem; line-height:1; color:var(--rojo);
  transition:background-color var(--t-fast), color var(--t-fast);
}
.cart__qty button:hover{ background:var(--rojo); color:#FFF6EA; border-color:var(--rojo); }
.cart__qty output{ min-width:2rem; text-align:center; font-weight:600; font-variant-numeric:tabular-nums; }
.cart__item-del{
  grid-column:2; justify-self:end;
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-45); text-decoration:underline; text-underline-offset:3px;
  padding:.35rem 0;
}
.cart__item-del:hover{ color:var(--rojo); }

.cart__empty{ text-align:center; color:var(--tinta-45); padding:3rem 1rem; line-height:1.7; }
.cart__empty a{ color:var(--rojo); font-weight:600; }

.cart__form{ margin-top:1.6rem; }
.cart__fs{ border:0; padding:0; margin:0; }
.cart__fs legend{
  font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--tinta-45); margin-bottom:.9rem; padding:0;
}
.fld{ display:block; margin-bottom:.9rem; }
.fld__lab{ display:block; font-size:.78rem; font-weight:600; letter-spacing:.06em; margin-bottom:.35rem; }
.fld__lab em{ color:var(--rojo); font-style:normal; }
.fld input,.fld select,.fld textarea{
  width:100%;
  min-height:46px;
  padding:.6rem .8rem;
  background:var(--crema);
  border:1.5px solid var(--linea);
  border-radius:var(--r-md);
  font-size:.95rem;
  transition:border-color var(--t-fast), background-color var(--t-fast);
}
.fld textarea{ resize:vertical; min-height:64px; }
.fld input:focus,.fld select:focus,.fld textarea:focus{ background:#fff; border-color:var(--rojo); outline:none; }
.fld.has-error input{ border-color:var(--rojo-vivo); background:#FFF2EF; }
.fld__err{ display:block; font-size:.76rem; color:var(--rojo-vivo); margin-top:.3rem; min-height:0; }

.seg{ display:flex; gap:.35rem; background:var(--crema); border:1.5px solid var(--linea); border-radius:100px; padding:.25rem; }
.seg__opt{ flex:1; position:relative; }
.seg__opt input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.seg__opt span{
  display:grid; place-items:center;
  min-height:40px; border-radius:100px;
  font-size:.85rem; font-weight:600;
  transition:background-color var(--t-fast), color var(--t-fast);
}
.seg__opt input:checked + span{ background:var(--rojo); color:#FFF6EA; }
.seg__opt input:focus-visible + span{ outline:3px solid var(--rojo); outline-offset:2px; }

.cart__foot{
  flex:none;
  padding:1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--linea);
  background:var(--papel);
  display:grid; gap:.7rem;
}
.cart__sum{ display:flex; align-items:baseline; justify-content:space-between; }
.cart__sum span{ font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-45); }
.cart__sum b{ font-size:1.5rem; }
.cart__note{ font-size:.74rem; color:var(--tinta-45); line-height:1.4; }
.cart__clear{
  font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-45);
  text-decoration:underline; text-underline-offset:3px; justify-self:center; padding:.4rem;
}
.cart__clear:hover{ color:var(--rojo); }

body.cart-open{ overflow:hidden; }

/* ---------- 16. Toast ---------- */
.toast{
  position:fixed; z-index:110;
  inset-block-end:1.5rem; inset-inline-start:50%;
  translate:-50% 0;
  background:var(--carbon); color:var(--crema);
  padding:.8rem 1.3rem;
  border-radius:100px;
  font-size:.88rem; font-weight:500;
  box-shadow:var(--shadow-2);
  opacity:0; transform:translateY(14px);
  pointer-events:none;
  transition:opacity var(--t-med), transform var(--t-med);
  max-width:calc(100vw - 2rem);
  text-align:center;
}
.toast.is-on{ opacity:1; transform:translateY(0); }

/* =========================================================
   17. Responsive
   ========================================================= */
@media (max-width:1080px){
  .recos__grid,.menu--cards{ grid-template-columns:repeat(2,1fr); }
  .beb-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:880px){
  :root{ --nav-h:64px; }

  .nav__burger{ display:flex; }
  .nav__links{
    position:fixed; inset-block-start:var(--nav-h); inset-inline:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--papel);
    border-bottom:1px solid var(--linea);
    padding:.6rem var(--gutter) 1.4rem;
    box-shadow:var(--shadow-2);
    clip-path:inset(0 0 100% 0);
    transition:clip-path .5s var(--e-out);
  }
  .nav__links.is-open{ clip-path:inset(0 0 0 0); }
  .nav__links a{ padding:.95rem .2rem; font-size:1rem; border-bottom:1px solid var(--linea); border-radius:0; }
  .nav__links a:not(.nav__wa)::after{ display:none; }
  .nav__wa{ margin:1rem 0 0; border-bottom:0 !important; justify-content:center; border-radius:100px; }

  .hero{ min-height:auto; padding-top:calc(var(--nav-h) + 1rem); padding-bottom:3rem; }
  .hero__inner{ grid-template-columns:1fr; gap:1.75rem; }
  /* Cuadrada y pequeña: la foto sigue presente como sello, pero deja los dos
     botones por encima del pliegue en pantallas de 812 px de alto. */
  .hero__card{
    order:-1;
    width:min(32%,118px);
    aspect-ratio:1;
    justify-self:end;
  }
  /* Sin columna izquierda que proteger, el velo pasa a ser horizontal: las
     olas respiran arriba (junto a la tarjeta) y se cierran abajo, donde va
     todo el texto. */
  .hero__veil{
    background:linear-gradient(to bottom,
      var(--crema) 0%,
      rgba(244,235,220,.70) 12%,   /* ventana abierta: la banda de la tarjeta */
      rgba(244,235,220,.70) 26%,
      rgba(244,235,220,.93) 31%,   /* se cierra justo antes del primer texto */
      rgba(244,235,220,.95) 62%,
      rgba(244,235,220,.96) 100%);
  }
  .hero__seal{ display:none; }
  .hero__scroll{ display:none; }
  .hero__lede{ max-width:none; }
  .hero__copy{ max-width:none; }

  .manifiesto__grid,.visita__grid{ grid-template-columns:1fr; }
  .manifiesto__media{ max-width:26rem; margin-inline:auto; width:100%; }
  .frame--sm{ width:40%; inset-inline-start:-4%; inset-block-end:-6%; }
  .visita__media{ max-width:24rem; }

  .tabs__bar{ top:var(--nav-h); justify-content:flex-start; border-radius:var(--r-md); }
}

@media (max-width:620px){
  .recos__grid,.menu--cards,.beb-grid{ grid-template-columns:1fr; }
  .facts{ grid-template-columns:1fr; }
  .facts li{ flex-direction:row; align-items:baseline; gap:.7rem; }
  .facts b{ flex:none; min-width:4.5rem; }

  .menu__line{ flex-wrap:wrap; row-gap:.1rem; }
  .menu__dots{ min-width:.6rem; }

  .cart-fab{
    inset-inline:1rem; inset-block-end:1rem;
    justify-content:center;
    inset-block-end:calc(1rem + env(safe-area-inset-bottom));
  }
  .cart{ width:100vw; }
  .cart__foot{ padding-inline:1rem; }
  .cart__body{ padding-inline:1rem; }

  .btn{ width:100%; }
  .hero__cta{ flex-direction:column; align-items:stretch; }
}

/* ---------- 18. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero__photo img,.marquee__track,.hero__seal-svg{ animation:none !important; }
  .duo::after,.duo::before{ opacity:0; }
  .duo img{ filter:none; }
}

/* ---------- 19. Impresión ---------- */
@media print{
  .nav,.cart-fab,.cart,.cart-backdrop,.hero__scroll,.marquee,.toast,.strip{ display:none !important; }
  body{ background:#fff; color:#000; }
  body::before{ display:none; }
  .tabs__panel[hidden]{ display:block !important; }
}