/* ---------------------------------------------------------------
   Siga La Vaca Hasta Marbella
   Identidad: Desktop\Siga La Vaca ID VISUAL
   Negro brasa 60 / blanco hueso 25 / grises 10 / 5
   Big Shoulders Display = rótulos, Work Sans = texto, Courier Prime = precios
   Paleta estrictamente monocroma, como manda el manual.
   --------------------------------------------------------------- */
:root{
  --brasa:#0E0E0E;
  --carbon:#161616;
  --ceniza:#2B2B2B;
  --humo:#8A8A8A;
  --papel:#D2CFCA;
  --hueso:#E6E4E1;

  --display:"Big Shoulders Display","Arial Narrow",system-ui,sans-serif;
  --texto:"Work Sans",system-ui,-apple-system,sans-serif;
  --precio:"Courier Prime",ui-monospace,"Courier New",monospace;

  --ancho:1180px;
  --radio:2px;

  /* FOTO DE PORTADA
     Provisional: foto de banco de Unsplash (Chantal Lim, @chantallim),
     licencia Unsplash, libre para uso comercial. Se usa en gris y al 34 %
     como atmósfera, nunca como foto de un plato de la carta.
     SUSTITUIR por una foto real de la parrilla del restaurante en cuanto
     la haya: basta con reemplazar el archivo img/parrilla.jpg. */
  --foto-portada:url("img/parrilla.jpg");
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--brasa);color:var(--hueso);
  font-family:var(--texto);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

.contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:24px}

h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.01em;margin:0}
h2{font-size:clamp(2.4rem,6vw,4rem);text-transform:uppercase}
h3{font-size:1.35rem;text-transform:uppercase;letter-spacing:.02em}
p{margin:0 0 1rem}
a{color:inherit}
img{max-width:100%}

/* grano fino sobre todo, da textura de papel de estraza */
body::after{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- navegación ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(14,14,14,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ceniza);
}
.nav__fila{display:flex;align-items:center;gap:26px;height:68px}
.nav__marca{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.nav__marca img{width:40px;height:40px;display:block}
.nav__marca span{font-family:var(--display);font-size:1.15rem;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.nav__enlaces{display:flex;gap:26px;font-size:.9rem;letter-spacing:.02em}
.nav__enlaces a{text-decoration:none;color:var(--papel);transition:color .2s}
.nav__enlaces a:hover{color:var(--hueso)}
.nav__idiomas{display:flex;align-items:center;gap:8px;font-size:.8rem;letter-spacing:.1em;color:var(--humo)}
.nav__idiomas a{text-decoration:none;transition:color .2s}
.nav__idiomas a:hover{color:var(--hueso)}
.nav__idiomas [aria-current]{color:var(--hueso)}
@media (max-width:960px){.nav__enlaces{display:none}.nav__fila{height:60px;gap:16px}}
@media (max-width:420px){.nav__marca span{display:none}}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  padding:15px 30px;border-radius:var(--radio);
  font-family:var(--display);font-size:1.1rem;text-transform:uppercase;letter-spacing:.06em;
  text-decoration:none;border:1px solid var(--hueso);
  transition:transform .15s,background .2s,color .2s,border-color .2s;
}
.btn--solido{background:var(--hueso);color:var(--brasa)}
.btn--solido:hover{background:#fff;border-color:#fff}
.btn--linea{background:transparent;color:var(--hueso)}
.btn--linea:hover{background:rgba(230,228,225,.1)}
.btn:active{transform:translateY(1px)}

/* ---------- portada ---------- */
.portada{
  min-height:calc(100svh - 68px);display:flex;align-items:center;
  padding-block:clamp(36px,6vw,64px) clamp(44px,7vw,72px);
  position:relative;overflow:hidden;isolation:isolate;
}
.portada__foto{
  position:absolute;inset:0;z-index:-3;
  background-image:var(--foto-portada,none);
  background-size:cover;background-position:center 45%;
  /* espejada: en la foto original el corte grande cae a la izquierda,
     justo donde el texto lo tapa. Al espejarla queda en la mitad visible. */
  transform:scaleX(-1);
  opacity:.42;filter:grayscale(1) contrast(1.2);
}
.portada__velo{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(to right,var(--brasa) 0%,rgba(14,14,14,.82) 46%,rgba(14,14,14,.35) 100%),
    linear-gradient(to top,var(--brasa) 2%,rgba(14,14,14,0) 42%);
}

/* en pantalla estrecha el texto ocupa todo el ancho, así que el velo
   pasa de horizontal a vertical: la foto se ve arriba, el texto va sobre negro */
@media (max-width:760px){
  .portada__velo{
    background:linear-gradient(to bottom,
      rgba(14,14,14,.62) 0%,
      rgba(14,14,14,.34) 24%,
      rgba(14,14,14,.90) 58%,
      var(--brasa) 100%);
  }
}

/* humo: cuatro masas muy desenfocadas que suben despacio */
.humo{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.humo i{
  position:absolute;bottom:-38%;display:block;
  width:clamp(280px,42vw,620px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 55%,rgba(230,228,225,.17),rgba(230,228,225,.06) 45%,rgba(230,228,225,0) 68%);
  filter:blur(26px);opacity:0;
  will-change:transform,opacity;
}
.humo i:nth-child(1){left:2%;animation:sube-humo 30s linear infinite}
.humo i:nth-child(2){left:26%;animation:sube-humo 38s linear infinite -9s;transform:scale(1.25)}
.humo i:nth-child(3){left:54%;animation:sube-humo 34s linear infinite -19s}
.humo i:nth-child(4){left:74%;animation:sube-humo 44s linear infinite -27s;transform:scale(1.4)}
@keyframes sube-humo{
  0%  {transform:translate3d(0,12%,0) scale(.82);opacity:0}
  18% {opacity:.85}
  70% {opacity:.5}
  100%{transform:translate3d(7vw,-118%,0) scale(1.7);opacity:0}
}

/* chispas, muy pocas y muy tenues */
.chispas{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.chispas i{
  position:absolute;bottom:-4%;width:2px;height:2px;border-radius:50%;
  background:var(--papel);opacity:0;will-change:transform,opacity;
}
.chispas i:nth-child(1){left:12%;animation:sube-chispa 11s ease-in infinite}
.chispas i:nth-child(2){left:31%;animation:sube-chispa 14s ease-in infinite -4s}
.chispas i:nth-child(3){left:48%;animation:sube-chispa 9s  ease-in infinite -7s}
.chispas i:nth-child(4){left:66%;animation:sube-chispa 16s ease-in infinite -2s}
.chispas i:nth-child(5){left:83%;animation:sube-chispa 12s ease-in infinite -9s}
.chispas i:nth-child(6){left:92%;animation:sube-chispa 15s ease-in infinite -12s}
@keyframes sube-chispa{
  0%  {transform:translate3d(0,0,0);opacity:0}
  12% {opacity:.7}
  85% {opacity:.18}
  100%{transform:translate3d(4vw,-72vh,0);opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .humo i,.chispas i{animation:none}
  .humo i{opacity:.55;transform:translateY(-40%) scale(1.2)}
  .chispas{display:none}
}

.portada__caja{position:relative}
.portada__sello{width:clamp(72px,15vw,94px);height:auto;display:block;margin-bottom:clamp(20px,3.4vw,28px)}
.portada h1{font-size:clamp(2.75rem,8.6vw,6rem);text-transform:uppercase;margin-bottom:clamp(16px,2.6vw,22px)}
.portada__bajada{font-size:clamp(1rem,3.6vw,1.15rem);color:var(--papel);max-width:46ch;margin-bottom:clamp(24px,4vw,32px)}
.portada__acciones{display:flex;flex-wrap:wrap;gap:12px}
@media (min-width:900px){.portada h1{max-width:700px}}

@media (prefers-reduced-motion:no-preference){
  .sube{opacity:0;transform:translateY(18px);animation:sube .8s cubic-bezier(.16,1,.3,1) forwards}
  .sube:nth-child(1){animation-delay:.05s}
  .sube:nth-child(2){animation-delay:.14s}
  .sube:nth-child(3){animation-delay:.23s}
  .sube:nth-child(4){animation-delay:.32s}
  @keyframes sube{to{opacity:1;transform:none}}
}

/* ---------- franja de la valoración ---------- */
.nota{border-block:1px solid var(--ceniza);background:var(--carbon)}
.nota__fila{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(12px,2vw,18px);padding-block:clamp(46px,7vw,74px);
}
.nota__cifra{
  font-family:var(--display);font-weight:700;line-height:.8;
  font-size:clamp(5rem,15vw,9.5rem);letter-spacing:-.03em;
}
.nota__sobre{font-family:var(--display);font-size:clamp(1.3rem,3vw,1.9rem);color:var(--humo);margin-left:8px;letter-spacing:0}
.estrellas{display:flex;justify-content:center;gap:7px}
.estrellas svg{width:22px;height:22px;fill:var(--hueso)}
.estrellas svg:last-child{fill:url(#media)}
.nota__texto{
  font-size:.85rem;color:var(--humo);
  text-transform:uppercase;letter-spacing:.16em;
}
.nota__texto b{font-weight:500;color:var(--hueso)}

/* ---------- secciones ---------- */
section{padding-block:clamp(72px,10vw,128px)}
.seccion__titulo{margin-bottom:14px}
.seccion__intro{color:var(--papel);max-width:56ch;margin-bottom:54px}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:760px){
    .aparece{animation:aparece linear both;animation-timeline:view();animation-range:entry 8% cover 26%}
    @keyframes aparece{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  }
}

/* ---------- la carta ---------- */
.carta{background:var(--carbon)}
.carta__grid{display:grid;grid-template-columns:1fr;gap:44px 56px}
@media (min-width:760px){.carta__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.carta__grid{grid-template-columns:repeat(3,1fr);gap:48px 52px}}

.grupo{break-inside:avoid}
.grupo__titulo{display:flex;align-items:baseline;gap:12px;padding-bottom:10px;margin-bottom:16px;border-bottom:1px solid var(--ceniza)}
.grupo__titulo h3{color:var(--hueso)}
.grupo__nota{font-size:.78rem;color:var(--humo);letter-spacing:.04em;text-transform:uppercase}

.plato{display:flex;align-items:baseline;gap:10px;padding-block:7px}
.plato__nombre{flex:1 1 auto;color:var(--papel);font-size:.97rem;line-height:1.4}
.plato__nombre small{display:block;color:var(--humo);font-size:.83rem;line-height:1.45;margin-top:2px}
.plato__puntos{flex:1 1 auto;border-bottom:1px dotted #3E3E3E;transform:translateY(-4px);min-width:14px}
.plato__precio{flex:0 0 auto;font-family:var(--precio);font-size:.95rem;color:var(--hueso);font-variant-numeric:tabular-nums}
.plato--doble .plato__precio{display:flex;gap:14px}
.plato--doble .plato__precio span{width:4.6ch;text-align:right}
.plato__tallas{display:flex;gap:14px;font-family:var(--precio);font-size:.75rem;color:var(--humo);justify-content:flex-end;margin-bottom:2px}
.plato__tallas span{width:4.6ch;text-align:right}
.grupo__pie{margin-top:14px;font-size:.84rem;color:var(--humo);line-height:1.5}
.grupo--destacado{
  border:1px solid var(--ceniza);padding:24px;border-radius:var(--radio);
  background:linear-gradient(160deg,rgba(230,228,225,.05),rgba(230,228,225,0) 62%);
}
.grupo--destacado .grupo__titulo{border-bottom-color:#3E3E3E}

/* ---------- nosotros ---------- */
.familia__grid{display:grid;gap:40px}
@media (min-width:900px){.familia__grid{grid-template-columns:1.05fr .95fr;gap:72px;align-items:center}}
.familia__frase{font-family:var(--display);font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.06;text-transform:uppercase;margin:0}
.familia__frase span{color:var(--humo)}
.familia__cuerpo{color:var(--papel)}
.familia__cuerpo p:last-child{margin-bottom:0}

/* ---------- visitanos ---------- */
.visita{background:var(--carbon)}
.visita__grid{display:grid;gap:44px}
@media (min-width:900px){.visita__grid{grid-template-columns:1fr 1fr;gap:72px}}
.dato{margin-bottom:30px}
.dato__etiqueta{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--humo);margin-bottom:8px}
.dato__valor{font-size:1.12rem;color:var(--hueso);line-height:1.5;text-decoration:none}
a.dato__valor:hover{text-decoration:underline;text-underline-offset:4px}

.horario{width:100%;border-collapse:collapse;font-size:1rem}
.horario th{text-align:left;font-weight:500;color:var(--papel);padding:9px 0;font-size:.97rem}
.horario td{text-align:right;padding:9px 0;font-family:var(--precio);font-size:.92rem;color:var(--hueso);font-variant-numeric:tabular-nums}
.horario tr+tr th,.horario tr+tr td{border-top:1px solid var(--ceniza)}
.horario .cerrado{color:var(--humo)}

/* ---------- preguntas ---------- */
.pregunta{border-top:1px solid var(--ceniza)}
.pregunta:last-of-type{border-bottom:1px solid var(--ceniza)}
.pregunta summary{
  cursor:pointer;list-style:none;padding:22px 0;
  font-family:var(--display);font-size:1.4rem;text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center;gap:20px;transition:color .2s;
}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary:hover{color:var(--papel)}
.pregunta summary::after{content:"+";font-size:1.5rem;color:var(--humo);flex:0 0 auto}
.pregunta[open] summary::after{content:"–"}
.pregunta__cuerpo{color:var(--papel);padding-bottom:24px;max-width:62ch}
.pregunta__cuerpo p:last-child{margin-bottom:0}

/* ---------- cierre ---------- */
.cierre{text-align:center;padding-block:clamp(80px,11vw,140px);position:relative;overflow:hidden}
.cierre h2{margin-bottom:18px}
.cierre p{color:var(--papel);max-width:44ch;margin-inline:auto;margin-bottom:32px}

/* ---------- pie ---------- */
.pie{border-top:1px solid var(--ceniza);padding-block:52px;font-size:.92rem;color:var(--humo)}
.pie__grid{display:grid;gap:28px}
@media (min-width:760px){.pie__grid{grid-template-columns:1.4fr 1fr 1fr}}
.pie strong{display:block;font-family:var(--display);font-size:1.15rem;text-transform:uppercase;color:var(--hueso);font-weight:600;margin-bottom:10px;letter-spacing:.02em}
.pie a{color:var(--papel);text-decoration:none}
.pie a:hover{text-decoration:underline;text-underline-offset:3px}
.pie__legal{margin-top:34px;padding-top:22px;border-top:1px solid var(--ceniza);font-size:.82rem}

/* objetivos táctiles: en móvil todo lo que se pulsa necesita alto de dedo.
   Sin esto, ES/EN medía 19x21 px y el teléfono del pie 121x18. */
@media (max-width:960px){
  .nav__idiomas{gap:2px}
  .nav__idiomas a{padding:13px 8px}
  .nav__marca{padding-block:8px}
  a.dato__valor{display:inline-block;padding-block:10px}
  .pie a{display:inline-block;padding-block:9px}
}

::selection{background:var(--hueso);color:var(--brasa)}
:focus-visible{outline:2px solid var(--hueso);outline-offset:3px}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}