/* El Patio de la Abuela · estilos compartidos del sitio y de Mis menús */
:root {
  --verde: #132919;
  --crema: #F1E5D0;
  --crema-claro: #F6EDDD;
  --verde-80: rgba(19, 41, 25, .80);
  --verde-60: rgba(19, 41, 25, .72);
  --verde-15: rgba(19, 41, 25, .15);
  --crema-80: rgba(241, 229, 208, .82);
  --crema-60: rgba(241, 229, 208, .72);
  --crema-20: rgba(241, 229, 208, .22);
  --serif: "EB Garamond", Garamond, Georgia, serif;
  --sans: "Urbanist", "Helvetica Neue", Arial, sans-serif;
  /* Cream Cake (brandbook) no tiene licencia web: se usa Yellowtail como sustituto */
  --manuscrita: "Yellowtail", "Brush Script MT", cursive;
  --ancho: 1160px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; background: var(--crema); }
body {
  margin: 0; background: var(--crema); color: var(--verde);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, figure { margin: 0; }
img, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

.envoltura { max-width: var(--ancho); margin: 0 auto; padding-inline: clamp(20px, 5vw, 48px); }
section { padding-block: clamp(72px, 10vw, 128px); }
.oscuro { background: var(--verde); color: var(--crema); }

.antetitulo { font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--verde-60); }
.oscuro .antetitulo { color: var(--crema-60); }
.titulo { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 6vw, 64px); line-height: 1.02; letter-spacing: -.01em; margin-top: 14px; }
.titulo em { font-style: italic; display: block; }
.bajada { margin-top: 18px; font-size: 17.5px; color: var(--verde-80); max-width: 46ch; }
.oscuro .bajada { color: var(--crema-80); }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--sans); font-weight: 600; font-size: 15.5px;
  padding: 15px 24px; border-radius: 4px; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--verde); background: var(--verde); color: var(--crema);
  cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.boton:hover { background: #1e3a26; }
.boton svg { width: 16px; height: 16px; flex: none; }
.boton-claro { background: var(--crema); color: var(--verde); border-color: var(--crema); }
.boton-claro:hover { background: var(--crema-claro); }
.boton-borde { background: transparent; color: inherit; border-color: currentColor; }
.boton-borde:hover { background: var(--verde); color: var(--crema); }
.oscuro .boton-borde:hover { background: var(--crema); color: var(--verde); }
.enlace-linea {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 500; text-decoration: none;
  padding-bottom: 6px; border-bottom: 1px solid currentColor;
}
.enlace-linea svg { width: 14px; height: 14px; }

/* Barra */
.barra {
  position: sticky; top: 0; z-index: 20;
  background: rgba(241, 229, 208, .94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--verde-15);
}
.barra .envoltura { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 16px; }
.barra-logo img { height: 46px; width: auto; }
.barra nav { display: flex; align-items: center; gap: 30px; font-size: 14.5px; font-weight: 500; }
.barra nav a.enlace { text-decoration: none; opacity: .85; }
.barra nav a.enlace:hover { opacity: 1; }
.barra .boton { padding: 12px 18px; font-size: 14.5px; }
@media (max-width: 860px) { .barra nav a.enlace { display: none; } .barra .envoltura { height: 68px; } .barra-logo img { height: 40px; } }

/* Portada */
.portada { padding-block: clamp(40px, 7vw, 88px) clamp(56px, 8vw, 96px); }
.portada .envoltura { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .portada .envoltura { grid-template-columns: 1.05fr .95fr; } }
.portada h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(52px, 8.2vw, 96px); line-height: .98; letter-spacing: -.015em; margin-top: 18px; }
.portada h1 em { display: block; font-style: italic; }
.portada .bajada { font-size: 19px; margin-top: 24px; max-width: 40ch; }
.portada-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 34px; }
.aval { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; font-size: 14.5px; font-weight: 500; color: var(--verde-80); text-decoration: none; }
.aval .estrellas { display: inline-flex; gap: 2px; color: var(--verde); }
.aval .estrellas svg { width: 14px; height: 14px; fill: currentColor; }
.aval b { font-weight: 700; color: var(--verde); }
.sellos { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 30px; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--verde-60); }
.sellos span + span { padding-left: 18px; border-left: 1px solid var(--verde-15); }
@media (max-width: 520px) { .sellos { flex-direction: column; gap: 6px; } .sellos span + span { padding-left: 0; border-left: 0; } }

.vitrina { position: relative; justify-self: center; width: min(460px, 100%); }
.arco {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 999px 999px 10px 10px; background: var(--verde);
}
.arco video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.arco video.activo { opacity: 1; }
.sello {
  position: absolute; left: -26px; bottom: 70px; width: 132px; height: 132px; border-radius: 50%;
  background: var(--crema); border: 1px solid var(--verde-15); box-shadow: 0 6px 24px rgba(19, 41, 25, .12);
  display: grid; place-items: center; text-align: center; padding: 14px;
  font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.2;
}
.sello img { width: 30px; height: auto; margin: 0 auto 4px; opacity: .8; }
@media (max-width: 520px) { .sello { left: -6px; bottom: 76px; width: 112px; height: 112px; font-size: 14px; } }
.vitrina-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.vitrina-nombre { font-size: 12.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.vitrina-plato { font-size: 14.5px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.vitrina-plato svg { width: 13px; height: 13px; }
.puntos { display: flex; justify-content: center; margin-top: 4px; }
.puntos button { width: 40px; height: 40px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.puntos button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--verde-60); transition: background-color .2s ease; }
.puntos button[aria-current="true"]::before { background: var(--verde); border-color: var(--verde); }

.datos-rapidos { border-block: 1px solid var(--verde-15); }
.datos-rapidos .envoltura { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 44px; padding-block: 22px; font-size: 15px; }
.datos-rapidos span { display: inline-flex; align-items: center; gap: 10px; }
.datos-rapidos svg { width: 18px; height: 18px; flex: none; }

/* Consentidos */
.cabecera-seccion { display: grid; gap: 20px; align-items: end; }
@media (min-width: 860px) { .cabecera-seccion { grid-template-columns: 1.3fr 1fr; } .cabecera-seccion .bajada { justify-self: end; margin: 0; } }
.consentidos { display: grid; gap: 28px; margin-top: 52px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .consentidos { grid-template-columns: repeat(3, 1fr); } }
.plato { display: grid; gap: 14px; align-content: start; text-decoration: none; }
.plato-foto { position: relative; overflow: hidden; border-radius: 6px; aspect-ratio: 4 / 5; background: #e8d8bd; }
.plato-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.plato:hover .plato-foto img { transform: scale(1.03); }
.etiqueta {
  position: absolute; top: 14px; left: 14px; font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; background: var(--crema); padding: 6px 10px; border-radius: 3px;
}
.plato-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 6px; }
.plato h3 { font-family: var(--serif); font-weight: 500; font-size: 27px; line-height: 1.1; }
.precio { font-size: 14.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plato p { font-size: 15.5px; color: var(--verde-80); }

/* Menú en texto */
.menus-cabecera { display: grid; gap: 28px; }
@media (min-width: 900px) { .menus-cabecera { grid-template-columns: 1fr auto; align-items: end; } }
.cartas { display: flex; flex-wrap: wrap; gap: 10px; }
.cartas a {
  display: grid; gap: 2px; padding: 14px 20px; min-width: 170px; text-decoration: none;
  border: 1px solid var(--verde-15); border-radius: 6px; transition: border-color .15s ease, background-color .15s ease;
}
.cartas a:hover { border-color: var(--verde); background: rgba(19, 41, 25, .04); }
.cartas strong { font-family: var(--serif); font-weight: 500; font-size: 22px; }
.cartas span { font-size: 13px; color: var(--verde-60); }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 48px; }
.filtros button {
  font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--verde);
  padding: 10px 16px; min-height: 44px; border-radius: 999px; border: 1px solid var(--verde-15); background: transparent; cursor: pointer;
}
.filtros button[aria-pressed="true"] { background: var(--verde); color: var(--crema); border-color: var(--verde); }
.carta-nota { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; font-size: 13px; color: var(--verde-60); }
.carta-nota span:last-child { letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.carta { display: grid; grid-template-columns: 1fr; column-gap: 56px; margin-top: 10px; border-top: 1px solid var(--verde-15); }
@media (min-width: 820px) { .carta { grid-template-columns: 1fr 1fr; } }
.item { padding-block: 24px; border-bottom: 1px solid var(--verde-15); }
.item[hidden] { display: none; }
.item-cat { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--verde-60); }
.item-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 6px; }
.item h3 { font-family: var(--serif); font-weight: 500; font-size: 25px; line-height: 1.15; }
.item p { font-size: 15px; color: var(--verde-80); margin-top: 6px; max-width: 48ch; }
.carta-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; margin-top: 40px; }
.carta-pie p { font-family: var(--serif); font-style: italic; font-size: 26px; }

/* Reseñas */
.resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 26px; }
.resumen b { font-family: var(--serif); font-weight: 400; font-size: 58px; line-height: 1; }
.resumen .estrellas { display: inline-flex; gap: 3px; }
.resumen .estrellas svg { width: 18px; height: 18px; fill: currentColor; }
.resumen span.fuente { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--crema-60); }
.resenas { display: grid; gap: 18px; margin-top: 44px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .resenas { grid-template-columns: 1fr 1fr; } }
.resena {
  display: grid; gap: 14px; align-content: start; padding: 26px 24px; border: 1px solid var(--crema-20); border-radius: 6px;
  text-decoration: none; transition: border-color .15s ease, background-color .15s ease;
}
.resena:hover { border-color: var(--crema); background: rgba(241, 229, 208, .04); }
.resena .estrellas { display: inline-flex; gap: 3px; }
.resena .estrellas svg { width: 14px; height: 14px; fill: currentColor; }
.resena blockquote { margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1.45; }
.resena-pie { font-size: 13.5px; color: var(--crema-60); }
.resena-pie strong { color: var(--crema); font-weight: 600; }
.resenas-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* Vinilos */
.vinilos .envoltura { display: grid; gap: 48px; }
@media (min-width: 900px) { .vinilos .envoltura { grid-template-columns: 1.1fr .9fr; align-items: center; } }
.agenda { border-top: 1px solid var(--verde-15); }
.agenda-titulo { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--verde-60); }
.agenda-titulo svg { width: 16px; height: 16px; }
.agenda-fila { display: flex; justify-content: space-between; align-items: baseline; padding-block: 18px; border-bottom: 1px solid var(--verde-15); font-family: var(--serif); font-size: 30px; }
.agenda-fila em { font-size: 26px; }
.agenda p { margin-top: 16px; font-size: 15px; color: var(--verde-80); }
.vinilos .acciones { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 30px; }

/* Reservas */
.reservar .envoltura { display: grid; gap: 48px; }
@media (min-width: 900px) { .reservar .envoltura { grid-template-columns: .9fr 1.1fr; align-items: start; } }
.promesas { display: grid; gap: 14px; margin-top: 30px; }
.promesa { display: flex; gap: 12px; font-size: 15px; }
.promesa svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.promesa strong { display: block; font-weight: 600; }
.promesa span { color: var(--verde-80); }
.oscuro .promesa span { color: var(--crema-80); }
.oscuro .promesa strong { color: var(--crema); }
.tarjeta { background: var(--crema-claro); border: 1px solid var(--verde-15); border-radius: 8px; padding: clamp(22px, 4vw, 34px); }
.tarjeta-titulo { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--verde-60); padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--verde-15); }
.tarjeta-titulo svg { width: 16px; height: 16px; }
.campos { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .campos { grid-template-columns: 1fr 1fr; } }
.campo { display: grid; gap: 7px; min-width: 0; }
.campo.ancho { grid-column: 1 / -1; }
.campo label, .campo legend { font-size: 14px; font-weight: 600; padding: 0; }
.campo .opcional { font-weight: 400; color: var(--verde-60); }
.campo input, .campo select, .campo textarea {
  font-family: var(--sans); font-size: 16px; color: var(--verde); width: 100%;
  background: var(--crema); border: 1px solid rgba(19, 41, 25, .28); border-radius: 4px; padding: 13px 14px;
  -webkit-appearance: none; appearance: none;
}
.campo select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23132919' stroke-width='1.6'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 15px; padding-right: 38px;
}
.campo select option:disabled { color: rgba(19, 41, 25, .35); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--verde); outline-offset: 0; border-color: var(--verde); }
.campo textarea { min-height: 84px; resize: vertical; }
fieldset.campo { border: 0; margin: 0; padding: 0; }
.opciones { display: flex; gap: 10px; }
.opciones label {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 15px;
  padding: 12px 14px; min-height: 48px; border: 1px solid rgba(19, 41, 25, .28); border-radius: 4px; cursor: pointer; background: var(--crema);
}
.opciones label:has(input:checked) { border-color: var(--verde); box-shadow: inset 0 0 0 1px var(--verde); }
.campo .opciones input { -webkit-appearance: radio; appearance: auto; width: 18px; height: 18px; padding: 0; margin: 0; border: 0; accent-color: var(--verde); flex: none; }
#r-alergia { margin-top: 10px; }
.formulario .boton { width: 100%; margin-top: 22px; padding-block: 17px; }
.formulario .boton:disabled { opacity: .6; cursor: wait; }
.nota-form { margin-top: 12px; font-size: 13.5px; color: var(--verde-60); text-align: center; }
.fallo { display: grid; gap: 12px; margin-top: 16px; padding: 16px 18px; border-radius: 6px; border: 1px solid #b4543f; background: rgba(180, 84, 63, .08); }
.fallo[hidden] { display: none; }
.fallo p { font-size: 15px; font-weight: 500; }
.grupo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--verde-15); font-size: 14.5px; }
.grupo a { font-weight: 600; }
.recibida { display: none; gap: 14px; text-align: center; padding-block: 10px; }
.recibida.visible { display: grid; }
.recibida:focus { outline: none; }
.recibida h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5vw, 44px); line-height: 1.05; }
.recibida h3 em { font-style: italic; }
.recibida p { color: var(--verde-80); }
.codigo { font-size: 14px; letter-spacing: .06em; }
.codigo strong { font-size: 19px; letter-spacing: .1em; color: var(--verde); }
.recibida .boton { justify-self: center; }

/* Visita */
.visita .envoltura { display: grid; gap: 44px; }
@media (min-width: 900px) { .visita .envoltura { grid-template-columns: 1fr 1fr; align-items: center; } }
.dato { display: flex; gap: 14px; padding-block: 16px; font-size: 16px; }
.dato + .dato { border-top: 1px solid var(--verde-15); }
.dato svg { width: 20px; height: 20px; flex: none; margin-top: 3px; }
.dato strong { display: block; font-weight: 600; }
.dato span { color: var(--verde-80); }
.visita .acciones { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 24px; }
.visita .acciones a.tel { font-weight: 600; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.visita .acciones a.tel svg { width: 16px; height: 16px; }
.mapa { border-radius: 8px; overflow: hidden; border: 1px solid var(--verde-15); aspect-ratio: 4 / 3; background: #e8d8bd; }
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Pie */
footer { background: var(--verde); color: var(--crema); padding-block: 56px calc(36px + env(safe-area-inset-bottom, 0px)); }
footer .envoltura { display: grid; gap: 36px; }
@media (min-width: 860px) { footer .arriba { display: grid; grid-template-columns: auto 1fr auto; gap: 48px; align-items: center; } }
footer .arriba { display: grid; gap: 28px; }
footer .logo-pie { width: 180px; }
footer .lema { font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1.3; }
footer .redes { display: grid; gap: 10px; font-size: 15px; }
footer .redes a { text-decoration: none; display: flex; justify-content: space-between; gap: 30px; }
footer .abajo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 22px; border-top: 1px solid var(--crema-20); font-size: 13px; color: var(--crema-60); }
footer .abajo a { text-decoration: underline; text-underline-offset: 3px; }

/* Barra fija en celular */
.barra-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none;
  grid-template-columns: 1fr 1.2fr 1fr; align-items: center; gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(241, 229, 208, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--verde-15);
}
.barra-movil a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; font-size: 14.5px; font-weight: 600; text-decoration: none; border-radius: 4px; }
.barra-movil a.principal { background: var(--verde); color: var(--crema); }
.barra-movil svg { width: 18px; height: 18px; }
@media (max-width: 860px) { .barra-movil { display: grid; } body { padding-bottom: 72px; } }

/* ---------- Accesibilidad ---------- */
.saltar { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--verde); color: var(--crema); padding: 12px 16px; border-radius: 4px; font-weight: 600; text-decoration: none; }
.saltar:focus { top: 12px; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.barra nav a.enlace[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
.manuscrita { font-family: var(--manuscrita); font-weight: 400; }

/* ---------- La experiencia ---------- */
.experiencia .intro { display: grid; gap: 22px; }
@media (min-width: 900px) { .experiencia .intro { grid-template-columns: 1.1fr .9fr; align-items: end; } .experiencia .intro .bajada { justify-self: end; margin: 0; } }
.momentos { display: grid; gap: 22px; margin-top: 52px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .momentos { grid-template-columns: repeat(3, 1fr); } }
.momento { display: grid; gap: 14px; align-content: start; }
.momento-foto { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 8px 8px; overflow: hidden; background: var(--verde); }
.momento-foto img, .momento-foto video { width: 100%; height: 100%; object-fit: cover; }
.momento-foto.disco { display: grid; place-items: center; }
.momento-foto.disco svg { width: 74%; height: auto; }
.momento h3 { font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.1; margin-top: 4px; }
.momento p { font-size: 15.5px; color: var(--verde-80); }
.galeria { display: grid; gap: 12px; margin-top: 40px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .galeria { grid-template-columns: repeat(4, 1fr); } }
.galeria[hidden] { display: none; }
.galeria figure { border-radius: 6px; overflow: hidden; aspect-ratio: 1; background: #e8d8bd; }
.galeria img { width: 100%; height: 100%; object-fit: cover; }
.prueba { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--verde-15); }
.prueba .resumen b { color: var(--verde); }
.prueba .resumen span.fuente { color: var(--verde-60); }
.prueba .resena { border-color: var(--verde-15); }
.prueba .resena:hover { border-color: var(--verde); background: rgba(19, 41, 25, .03); }
.prueba .resena-pie { color: var(--verde-60); }
.prueba .resena-pie strong { color: var(--verde); }
.estrella-media { position: relative; display: inline-block; }

/* ---------- Mis menús (acceso en la portada) ---------- */
.cartas-grandes { display: grid; gap: 14px; margin-top: 44px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .cartas-grandes { grid-template-columns: repeat(3, 1fr); } }
.carta-grande { display: grid; gap: 6px; padding: 26px 24px; border: 1px solid var(--verde-15); border-radius: 8px; text-decoration: none; transition: border-color .15s ease, background-color .15s ease; min-height: 150px; align-content: space-between; }
.carta-grande:hover { border-color: var(--verde); background: rgba(19, 41, 25, .04); }
.carta-grande strong { font-family: var(--serif); font-weight: 500; font-size: 32px; line-height: 1.05; }
.carta-grande span { font-size: 14.5px; color: var(--verde-80); }
.carta-grande em { font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; display: inline-flex; gap: 8px; align-items: center; }
.carta-grande em svg { width: 13px; height: 13px; }
.buscador { display: flex; gap: 10px; margin-top: 26px; max-width: 620px; }
.buscador input { flex: 1; min-width: 0; font: 16px var(--sans); color: var(--verde); background: var(--crema-claro); border: 1px solid rgba(19, 41, 25, .32); border-radius: 4px; padding: 14px 16px; }
.buscador input:focus { outline: 2px solid var(--verde); outline-offset: 0; }
.menus-pie { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; margin-top: 30px; font-size: 15px; }

/* ---------- Programación de Los Vinilos ---------- */
.programa { display: grid; gap: 0; margin-top: 22px; border-top: 1px solid var(--verde-15); }
.programa[hidden] { display: none; }
.fecha-vinilo { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding-block: 16px; border-bottom: 1px solid var(--verde-15); }
.fecha-vinilo time { display: grid; text-align: center; min-width: 58px; line-height: 1.05; }
.fecha-vinilo time b { font-family: var(--serif); font-weight: 500; font-size: 32px; }
.fecha-vinilo time span { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--verde-60); }
.fecha-vinilo h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.15; }
.fecha-vinilo p { font-size: 14.5px; color: var(--verde-80); }
.fecha-vinilo a { font-size: 14px; font-weight: 600; white-space: nowrap; }

/* ---------- Página Mis menús ---------- */
.menu-cabecera { padding-block: clamp(40px, 6vw, 72px) 20px; }
.menu-cabecera h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(46px, 7vw, 80px); line-height: 1; margin-top: 12px; }
.menu-cabecera h1 em { font-style: italic; }
.pestanas { display: flex; gap: 8px; margin-top: 30px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button { flex: none; font: 500 20px var(--serif); color: var(--verde); padding: 12px 20px; min-height: 48px; border-radius: 6px; border: 1px solid var(--verde-15); background: transparent; cursor: pointer; }
.pestanas button[aria-selected="true"] { background: var(--verde); color: var(--crema); border-color: var(--verde); }
.herramientas { position: sticky; top: 68px; z-index: 10; background: rgba(241, 229, 208, .96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding-block: 14px; border-bottom: 1px solid var(--verde-15); }
@media (min-width: 861px) { .herramientas { top: 76px; } }
.herramientas .buscador { margin-top: 0; max-width: none; }
.categorias { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.categorias::-webkit-scrollbar { display: none; }
.categorias a { flex: none; font-size: 14px; font-weight: 600; padding: 10px 16px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--verde-15); text-decoration: none; }
.categorias a:hover, .categorias a[aria-current="true"] { background: var(--verde); color: var(--crema); border-color: var(--verde); }
.resultado { font-size: 14px; color: var(--verde-60); margin-top: 18px; min-height: 22px; }
.bloque-cat { padding-block: 26px 10px; scroll-margin-top: 190px; }
.bloque-cat h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4.5vw, 44px); line-height: 1.05; }
.bloque-cat h2 small { display: block; font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--verde-60); margin-bottom: 8px; }
.productos { display: grid; gap: 0 48px; grid-template-columns: 1fr; margin-top: 14px; border-top: 1px solid var(--verde-15); }
@media (min-width: 900px) { .productos { grid-template-columns: 1fr 1fr; } }
.producto { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-bottom: 1px solid var(--verde-15); padding: 20px 0; cursor: pointer; }
.producto:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.producto[hidden] { display: none; }
.producto .miniatura { width: 92px; height: 92px; border-radius: 6px; object-fit: cover; background: #e8d8bd; }
.producto-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.producto h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.15; }
.producto p { font-size: 15px; color: var(--verde-80); margin-top: 6px; }
.producto .ver { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; margin-top: 10px; }
.producto .ver svg { width: 12px; height: 12px; }
.agotado { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--verde); color: var(--crema); padding: 3px 8px; border-radius: 3px; }
.marca-revisar { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: #8a3b22; background: #f6dccd; padding: 4px 8px; border-radius: 3px; }
.sin-resultados { padding: 40px 0; text-align: center; }
.sin-resultados[hidden] { display: none; }
.sin-resultados p { font-family: var(--serif); font-size: 26px; font-style: italic; margin-bottom: 18px; }
.precios-lista { display: grid; gap: 2px; text-align: right; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.precios-lista span span { font-weight: 400; color: var(--verde-60); margin-right: 6px; }
.impreso { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-block: 48px 20px; padding: 26px 24px; border: 1px solid var(--verde-15); border-radius: 8px; }
.impreso p { font-family: var(--serif); font-style: italic; font-size: 24px; }

/* Ficha de producto */
dialog.ficha { width: min(640px, calc(100% - 24px)); max-height: calc(100% - 24px); padding: 0; border: 0; border-radius: 10px; background: var(--crema); color: var(--verde); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
dialog.ficha::backdrop { background: rgba(19, 41, 25, .6); }
.ficha-foto { aspect-ratio: 3 / 2; background: #e8d8bd; }
.ficha-foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha-cuerpo { padding: 24px clamp(20px, 4vw, 32px) 28px; }
.ficha-cuerpo h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5vw, 44px); line-height: 1.02; margin-top: 8px; }
.ficha-precio { margin-top: 12px; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ficha-precio .precios-lista { text-align: left; font-size: 16px; }
.ficha-cuerpo .desc { margin-top: 14px; font-size: 16.5px; }
.ficha-nota { margin-top: 18px; padding: 16px 18px; background: #F8EFDC; border-left: 3px solid var(--verde); border-radius: 0 6px 6px 0; font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.45; }
.ficha-nota span { display: block; margin-top: 6px; font-family: var(--sans); font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--verde-60); }
.ficha-maridaje { margin-top: 14px; font-size: 15px; }
.ficha-maridaje button { font: inherit; font-weight: 600; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ficha-alergenos { margin-top: 16px; font-size: 13.5px; color: var(--verde-60); }
.ficha-acciones { display: grid; gap: 10px; margin-top: 22px; }
@media (min-width: 520px) { .ficha-acciones { grid-template-columns: 1fr 1fr; } }
.ficha-secundarias { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 16px; font-size: 14.5px; }
.ficha-secundarias a, .ficha-secundarias button { font: inherit; font-weight: 500; color: inherit; background: none; border: 0; padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cerrar { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(241, 229, 208, .94); color: var(--verde); cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); }
.cerrar svg { width: 18px; height: 18px; }

/* Páginas de texto */
.texto-legal { max-width: 68ch; }
.texto-legal h2 { font-family: var(--serif); font-weight: 500; font-size: 30px; margin-top: 36px; }
.texto-legal p, .texto-legal li { margin-top: 12px; color: var(--verde-80); }

/* Contraste sobre verde */
.oscuro a:focus-visible, .oscuro button:focus-visible { outline-color: var(--crema); }
@media (prefers-reduced-motion: reduce) { .arco video { transition: none; } }

/* Mis menús sobre fondo verde */
.oscuro .carta-grande { border-color: var(--crema-20); }
.oscuro .carta-grande:hover { border-color: var(--crema); background: rgba(241, 229, 208, .05); }
.oscuro .carta-grande span, .oscuro .plato p { color: var(--crema-80); }
.oscuro .buscador input { background: var(--crema); }
.oscuro .plato-foto { background: #22402b; }
/* Pausa de los videos de la portada */
.puntos .pausa { width: 44px; height: 44px; }
.puntos .pausa::before { content: ""; width: 10px; height: 12px; border: 0; border-radius: 0; border-left: 3px solid var(--verde); border-right: 3px solid var(--verde); background: none !important; }
.puntos .pausa[aria-pressed="true"]::before { width: 0; height: 0; border-left: 11px solid var(--verde); border-right: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.dato a { font-weight: 500; }
.marca-revisar[hidden], .ficha-nota[hidden], .ficha-maridaje[hidden], .ficha-foto[hidden] { display: none; }