/* Masia Can Bosc · estilo.css (2026-09-21)
   Lienzo: papel continuo de arriba abajo; lino para tarjetas (sin sombra); tinta castaña para texto; teja SOLO en el botón "Reserva mesa" (máx. 2 por pantalla);
   verde Montseny en eyebrows y en UNA banda (arroces); ceniza para secundarios y el botón ghost "Llamar".
   Tipografía T5: EB Garamond 500 (titulares en caja normal, interlineado 1,05, tracking -0,02 em) + Lora 400 (cuerpo 17-18 px / 1,6); eyebrows y precios en Lora versalitas +0,08 em.
   Formas: radio 0 en todo. Sin box-shadow, sin degradados, sin filetes decorativos: las secciones se separan con espacio (96-128 px PC / 64 móvil) y con la banda verde.
   Movimiento: ninguno aquí. Sin transition sobre transform/opacity (regla dura): lo anima el animador con GSAP en js/animacion.js. Estado inicial: todo visible. */

:root {
  --papel: #F2EADB;
  --lino: #FBF6EA;
  --tinta: #2B1E15;
  --teja: #A6432A;
  --verde: #4A5D3A;
  --ceniza: #6B6156;
  --blanco: #FFFFFF;
  --ft: "EB Garamond", "EB Garamond reserva", Georgia, "Times New Roman", serif;
  --f: "Lora", "Lora reserva", Georgia, "Times New Roman", serif;
  --radio: 0;
  --ancho: 1200px; --gutter: 16px;
  --e-1: 8px; --e-2: 16px; --e-3: 24px; --e-4: 40px; --e-5: 64px; --e-6: 96px; --e-7: 128px;
  --cab-alto: 4.5rem;
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--f); font-size: 1.0625rem; line-height: 1.6; overflow-x: clip; }
@media (min-width: 900px) { body { font-size: 1.125rem; } }
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.salto { position: absolute; left: -9999px; top: 8px; background: var(--tinta); color: var(--papel); padding: .6rem 1rem; z-index: 200; font-weight: 500; }
.salto:focus { left: 8px; }
.vo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--teja); outline-offset: 3px; }
.arroces :focus-visible { outline-color: var(--papel); }
.contenedor { width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; }
.contenedor--estrecho { max-width: 46rem; }
.seccion { padding-block: var(--e-5); }
@media (min-width: 900px) { .seccion { padding-block: var(--e-6); } }
@media (min-width: 1200px) { .seccion { padding-block: var(--e-7); } }
section[id], div[id], li[id], details[id] { scroll-margin-top: calc(var(--cab-alto) + 1rem); }
.cabsec { margin-bottom: var(--e-4); max-width: 40rem; }
.cabsec__intro { margin-top: var(--e-2); color: var(--tinta); }

/* ---- tipografía ---- */
.titulo, .hero__titulo, .arroces__titulo, .cta__titulo, .pagcab__titulo { font-family: var(--ft); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; color: var(--tinta); text-wrap: balance; }
.titulo { font-size: clamp(2.25rem, 3.6vw, 3.25rem); }
.eyebrow { font-family: var(--f); font-weight: 500; font-variant: small-caps; letter-spacing: .08em; font-size: .95rem; line-height: 1.3; color: var(--verde); margin-bottom: .9rem; }
.eyebrow--papel { color: var(--papel); }
.precio { font-family: var(--f); font-weight: 500; font-variant: small-caps; letter-spacing: .08em; white-space: nowrap; }
h3 { font-family: var(--ft); font-weight: 500; line-height: 1.15; letter-spacing: -.01em; font-size: 1.5rem; }

/* ---- botones (radio 0, sin sombra; transición solo de color) ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 3rem; padding: .75rem 1.4rem; border-radius: var(--radio); font-family: var(--f); font-weight: 500; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center; border: 1px solid transparent; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.btn--teja { background: var(--teja); border-color: var(--teja); color: var(--blanco); }
.btn--teja:hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.btn--ghost { background: transparent; border-color: var(--ceniza); color: var(--tinta); }
.btn--ghost:hover { border-color: var(--tinta); background: var(--lino); }
.btn--papel { background: var(--papel); border-color: var(--papel); color: var(--verde); }
.btn--papel:hover { background: var(--blanco); border-color: var(--blanco); color: var(--tinta); }
.btn--peq { min-height: 2.6rem; padding: .5rem 1.1rem; font-size: .95rem; }
.btn--grande { min-height: 3.5rem; padding: 1rem 1.8rem; font-size: 1.1rem; }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; justify-content: center; margin-top: var(--e-3); }
.acciones--izq { justify-content: flex-start; }

/* ---- cabecera de papel (fija arriba, sin filete) ---- */
.cab { position: sticky; top: 0; z-index: 100; background: var(--papel); }
.cab__int { display: flex; align-items: center; gap: 1.5rem; max-width: var(--ancho); margin-inline: auto; padding: .75rem var(--gutter); min-height: var(--cab-alto); }
.cab__logo { font-family: var(--ft); font-weight: 500; font-size: 1.6rem; line-height: 1; letter-spacing: -.01em; color: var(--tinta); text-decoration: none; white-space: nowrap; }
.cab__nav { display: none; }
.cab__nav ul { display: flex; gap: 1.75rem; }
.cab__nav a { font-weight: 500; font-size: 1rem; text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.cab__nav a:hover, .cab__nav a[aria-current] { border-bottom-color: var(--tinta); }
.cab__der { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.cab__btn { display: none; }
.cab__burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 2.75rem; height: 2.75rem; padding: .6rem; border: 1px solid var(--tinta); }
.cab__burger span { display: block; height: 1px; background: var(--tinta); }
.cab__movil { background: var(--lino); padding: var(--e-3) var(--gutter) var(--e-4); }
.cab__movil ul { display: grid; gap: .25rem; }
.cab__movil ul a { display: block; font-family: var(--ft); font-weight: 500; font-size: 1.75rem; line-height: 1.15; letter-spacing: -.01em; text-decoration: none; padding: .5rem 0; }
@media (min-width: 900px) { .cab__btn { display: inline-flex; } }
@media (min-width: 1000px) { .cab__nav { display: flex; } .cab__burger, .cab__movil { display: none !important; } }

/* Barra inferior fija (móvil): el botón teja siempre a mano */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom, 0px)); background: var(--lino); }
.barra .btn { min-height: 3rem; }
@media (max-width: 899px) { body { padding-bottom: 4.6rem; } }
@media (min-width: 900px) { .barra { display: none; } }

/* ---- hero partido: texto | vídeo 4:3 en marco de lino + sello ---- */
.hero { padding: var(--e-4) 0 var(--e-5); }
.hero__int { display: grid; gap: var(--e-4); align-items: center; }
.hero__eyebrow { margin-bottom: 1.25rem; }
.hero__titulo { font-size: clamp(2.5rem, 5.2vw, 4.75rem); }
.hero__l2 { display: block; color: var(--ceniza); font-size: .62em; font-weight: 400; margin-top: .35em; letter-spacing: -.01em; }
.hero__sub { font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 30rem; margin-top: var(--e-3); }
.hero__acciones { margin-top: var(--e-4); }
.hero__hoy { margin-top: var(--e-3); font-weight: 500; font-variant: small-caps; letter-spacing: .06em; color: var(--ceniza); }
.hero__media { position: relative; }
.hero__marco { background: var(--lino); padding: 16px; }
.hero__video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--papel); }
.hero__sello { position: absolute; width: 8.5rem; height: 8.5rem; left: -1rem; bottom: -1.5rem; }
.hero__sello-texto { font-family: var(--ft); font-weight: 500; font-size: 10.5px; letter-spacing: .04em; }
.hero__sello-ano { font-family: var(--ft); font-weight: 500; font-size: 24px; letter-spacing: -.02em; }
@media (min-width: 900px) {
  .hero { padding: var(--e-5) 0 var(--e-6); }
  .hero__int { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--e-5); }
  .hero__marco { padding: 24px; }
  .hero__sello { width: 10rem; height: 10rem; left: -2rem; bottom: -2rem; }
}
@media (min-width: 1200px) { .hero { padding-bottom: var(--e-7); } }

/* ---- qué somos: foto fija a la izquierda + tres párrafos ---- */
.somos__int { display: grid; gap: var(--e-4); }
.somos__foto { aspect-ratio: 4 / 5; overflow: hidden; }
.somos__foto img { width: 100%; height: 100%; object-fit: cover; }
.somos__p { font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.5; margin-top: var(--e-3); max-width: 34rem; }
.somos__texto .titulo { margin-bottom: .5rem; }
@media (min-width: 900px) {
  .somos__int { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--e-6); align-items: start; }
  .somos__foto-col { position: sticky; top: calc(var(--cab-alto) + 1.5rem); }
  .somos__texto { padding-top: var(--e-3); }
}

/* ---- carta destacada: rejilla 4:5 sin marco ---- */
.platos { display: grid; gap: var(--e-4) var(--e-2); grid-template-columns: 1fr 1fr; }
@media (max-width: 599px) { .plato__nombre { font-size: 1.15rem; } .plato__desc { font-size: .85rem; } .plato__cuerpo { gap: .35rem; padding-top: .7rem; } }
@media (min-width: 600px) { .platos { gap: var(--e-4) var(--e-3); } }
@media (min-width: 900px) { .platos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .platos { grid-template-columns: repeat(4, 1fr); gap: var(--e-5) var(--e-3); } }
.plato__foto { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--lino); }
.plato__foto img { width: 100%; height: 100%; object-fit: cover; }
.plato__cuerpo { padding-top: 1rem; display: grid; gap: .5rem; align-content: start; }
.plato__nombre { font-size: 1.4rem; }
.plato__nombre a { text-decoration: none; }
.plato__nombre a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.plato__desc { font-size: .95rem; color: var(--ceniza); }
.plato__pie { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; }
.plato__nota { font-size: .9rem; font-weight: 500; font-variant: small-caps; letter-spacing: .06em; color: var(--verde); }
.al { display: inline-flex; flex-wrap: wrap; font-size: .9rem; color: var(--ceniza); font-weight: 500; }
.al b { font-weight: 500; }
.al b + b::before { content: "\00a0·\00a0"; }
.carta-sec__leyenda { margin-top: var(--e-4); font-size: .95rem; color: var(--ceniza); max-width: 40rem; }

/* ---- banda verde: arroces del domingo (la única banda de color) ---- */
.arroces { background: var(--verde); color: var(--papel); padding-block: var(--e-5); }
@media (min-width: 900px) { .arroces { padding-block: var(--e-6); } }
@media (min-width: 1200px) { .arroces { padding-block: var(--e-7); } }
.arroces__int { display: grid; gap: var(--e-4); }
@media (min-width: 900px) { .arroces__int { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--e-6); align-items: end; } }
.arroces__titulo { color: var(--papel); font-size: clamp(2.75rem, 6vw, 5rem); }
.arroces__p { margin-top: var(--e-3); max-width: 32rem; font-size: 1.1rem; }
.arroces__lista { display: grid; gap: var(--e-3); }
.arroces__item { display: grid; gap: .25rem; }
.arroces__nombre { font-family: var(--ft); font-weight: 500; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.01em; }
.arroces__precio { font-weight: 500; font-variant: small-caps; letter-spacing: .08em; }
.arroces .al { color: var(--papel); }
.arroces .al--ninguno { display: none; }

/* ---- reservas: botón grande + política en lino ---- */
.reservar__int { display: grid; gap: var(--e-4); }
@media (min-width: 900px) { .reservar__int { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--e-6); align-items: start; } }
.reservar__p { margin-top: var(--e-2); max-width: 36rem; font-size: 1.1rem; }
.reservar__demo { margin-top: var(--e-3); font-size: .9rem; color: var(--ceniza); max-width: 36rem; }
.reservar__politica { background: var(--lino); padding: var(--e-3); }
@media (min-width: 900px) { .reservar__politica { padding: var(--e-4); } }
.reservar__h3 { margin-bottom: var(--e-3); }
.politica { display: grid; gap: var(--e-3); }
.politica dt { font-weight: 500; font-variant: small-caps; letter-spacing: .08em; color: var(--verde); }
.politica dd { margin-top: .25rem; }

/* ---- la casa: 4 fotos con pie ---- */
.casa__rejilla { display: grid; gap: var(--e-4) var(--e-3); }
.casa__foto { overflow: hidden; }
.casa__foto img { width: 100%; height: 100%; object-fit: cover; }
.casa__figura--sala .casa__foto, .casa__figura--terraza .casa__foto, .casa__figura--fachada .casa__foto { aspect-ratio: 16 / 9; }
.casa__figura--brasa .casa__foto { aspect-ratio: 4 / 5; }
.casa__pie { margin-top: .75rem; font-size: .95rem; color: var(--ceniza); }
@media (min-width: 700px) {
  .casa__rejilla { grid-template-columns: 1fr 1fr; }
  .casa__figura--sala { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .casa__rejilla { grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "brasa sala sala" "brasa terraza fachada"; }
  .casa__figura--brasa { grid-area: brasa; display: flex; flex-direction: column; }
  .casa__figura--brasa .casa__foto { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }
  .casa__figura--sala { grid-area: sala; }
  .casa__figura--terraza { grid-area: terraza; }
  .casa__figura--fachada { grid-area: fachada; }
}

/* ---- cómo llegar / horario ---- */
.llegar__int { display: grid; gap: var(--e-4); }
@media (min-width: 900px) { .llegar__int { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--e-6); align-items: start; } }
.llegar__dir { font-family: var(--ft); font-weight: 500; font-size: 1.5rem; line-height: 1.25; letter-spacing: -.01em; max-width: 30rem; }
.llegar__p { margin-top: var(--e-2); }
.llegar__h3 { margin-bottom: var(--e-2); }
.horario { display: grid; gap: .25rem; }
.horario div { display: flex; justify-content: space-between; gap: 1.5rem; }
.horario dt { color: var(--ceniza); }
.horario dd { font-weight: 500; text-align: right; }
.llegar__cerrado { margin-top: var(--e-2); font-weight: 500; font-variant: small-caps; letter-spacing: .06em; color: var(--verde); }

/* ---- preguntas frecuentes (details en lino, sin filetes) ---- */
.faq__lista { display: grid; gap: var(--e-1); }
.faq__item { background: var(--lino); padding: .35rem 1.25rem; }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); padding: .85rem 0; font-family: var(--ft); font-weight: 500; font-size: 1.3rem; line-height: 1.2; letter-spacing: -.01em; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.faq__item summary::after { content: "+"; font-family: var(--ft); font-weight: 400; font-size: 1.7rem; line-height: 1; flex: 0 0 auto; color: var(--ceniza); }
.faq__item[open] summary::after { content: "−"; }
.faq__item p { padding: 0 0 1.1rem; max-width: 62ch; }

/* ---- CTA final ---- */
.cta__titulo { font-size: clamp(2.5rem, 5vw, 4.25rem); }
.cta__p { margin-top: var(--e-3); font-size: 1.2rem; }
.cta__horario { margin-top: var(--e-3); color: var(--ceniza); font-weight: 500; font-variant: small-caps; letter-spacing: .06em; }

/* ---- página carta ---- */
.pagcab { padding: var(--e-4) 0 0; }
@media (min-width: 900px) { .pagcab { padding-top: var(--e-5); } }
.pagcab__titulo { font-size: clamp(2.5rem, 5vw, 4.25rem); }
.pagcab__intro { margin-top: var(--e-3); font-size: 1.1rem; }
.pagcab__nota { margin-top: var(--e-2); color: var(--ceniza); }
.pagcab__indice { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: var(--e-4); }
.pagcab__indice a { font-weight: 500; font-variant: small-caps; letter-spacing: .08em; text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid var(--ceniza); transition: border-color .2s ease; }
.pagcab__indice a:hover { border-bottom-color: var(--tinta); }
.menu.seccion { padding-block: var(--e-4); }
@media (min-width: 900px) { .menu.seccion { padding-block: var(--e-5); } }
.menu .titulo { margin-bottom: var(--e-3); }
.menu__nota { margin: calc(-1 * var(--e-2)) 0 var(--e-3); color: var(--ceniza); }
.menu__lista { display: grid; gap: var(--e-3); }
.menu__item { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; }
.menu__nombre { font-size: 1.35rem; }
.menu__texto .al { margin-top: .2rem; }
.menu__precio { flex: 0 0 auto; }
.grupo__p { margin-top: var(--e-2); font-size: 1.1rem; max-width: 36rem; }
.leyenda .titulo { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.leyenda__lista { display: grid; gap: .4rem 1.5rem; margin-top: var(--e-3); }
@media (min-width: 600px) { .leyenda__lista { grid-template-columns: 1fr 1fr; } }
.leyenda__lista li { display: flex; gap: .6rem; align-items: baseline; }
.leyenda__lista b { font-weight: 500; font-variant: small-caps; letter-spacing: .08em; color: var(--verde); min-width: 1.5rem; }
.leyenda__nota { margin-top: var(--e-3); color: var(--ceniza); max-width: 40rem; }

/* ---- legales ---- */
.legal__demo { margin-top: var(--e-3); padding: var(--e-2) var(--e-3); background: var(--lino); font-weight: 500; }
.legal__p { margin-top: var(--e-3); }
.legal__p strong { font-weight: 500; font-family: var(--ft); font-size: 1.15em; }
.legal__fecha { margin-top: var(--e-3); color: var(--ceniza); font-size: .95rem; }

/* ---- pie de papel (separado por espacio) ---- */
.pie { padding: var(--e-5) 0 var(--e-4); }
@media (min-width: 900px) { .pie { padding-top: var(--e-6); } }
.pie__rejilla { display: grid; gap: var(--e-4); }
@media (min-width: 720px) { .pie__rejilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .pie__rejilla { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--e-5); } }
.pie__marca { font-family: var(--ft); font-weight: 500; font-size: 1.75rem; line-height: 1; letter-spacing: -.01em; margin-bottom: var(--e-2); }
.pie__texto { font-size: .95rem; margin-top: .35rem; }
.pie__texto a { text-decoration: none; border-bottom: 1px solid var(--ceniza); transition: border-color .2s ease; }
.pie__texto a:hover { border-bottom-color: var(--tinta); }
.pie__h3 { font-family: var(--f); font-weight: 500; font-variant: small-caps; letter-spacing: .08em; font-size: .95rem; color: var(--verde); margin-bottom: .6rem; }
.pie__lista { display: grid; gap: .35rem; }
.pie__lista a { text-decoration: none; }
.pie__lista a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.pie__alergenos { margin-top: var(--e-2); color: var(--ceniza); }
.pie__alergenos a { border-bottom: 0; color: var(--ceniza); }
.pie__alergenos a:hover { color: var(--tinta); }
.pie__final { margin-top: var(--e-5); display: grid; gap: .4rem; font-size: .9rem; color: var(--ceniza); }
.pie__demo a { color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--ceniza); transition: border-color .2s ease; }
.pie__demo a:hover { border-bottom-color: var(--tinta); }
.pie__nota { max-width: 40rem; }

/* ---- animador (2026-09-21): apoyo mínimo a js/animacion.js. Solo color en las transiciones CSS (nunca transform/opacity). ----
   Hover de botones y enlaces a ritmo lento (0,4 s). will-change solo en lo que anima GSAP de continuo. */
.btn { transition-duration: .4s; }
.cab__nav a, .pagcab__indice a, .pie__texto a, .pie__demo a { transition-duration: .4s; }
.hero__sello { will-change: transform; transform-origin: 50% 50%; }
.casa__foto img, .somos__foto, .plato__foto img { will-change: transform; }
.an-palabra { will-change: opacity; }
@media (prefers-reduced-motion: reduce) { .hero__sello, .casa__foto img, .somos__foto, .plato__foto img, .an-palabra { will-change: auto; } }