/* Efectos compartidos por los 15 modelos (ver diseno/MODELOS.md, hoja "Efectos").
   Cada bloque lleva su id (E01…). Los colores y letras salen de los tokens de :root,
   que cada modelo pisa. Nada de acá depende de una librería. */

/* ---------- Tokens (cada modelo los cambia) ---------- */
:root {
  --fondo: #efefeb;
  --texto: #272320;
  --tenue: color-mix(in srgb, var(--texto) 30%, var(--fondo));
  --acento: #556b2f;
  --acento-suave: color-mix(in srgb, var(--acento) 15%, var(--fondo));
  --letra-titulo: 'Newsreader', Georgia, serif;
  --letra-texto: 'Inter', system-ui, sans-serif;
  --aire: clamp(4rem, 12vw, 9rem);
  --radio: 0px;
  --margen: clamp(16px, 5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 400 1rem/1.6 var(--letra-texto);
  overflow-x: hidden; /* N12: la página nunca se mueve hacia los costados */
}
img, video { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--letra-titulo); font-weight: 400; line-height: 1.1; margin: 0; }
a { color: inherit; }

/* E09 · Menú que baja solo a la sección */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 80px; }

/* E01 · Cabecera sin bloque: flota, fondo transparente */
.cabecera {
  position: fixed; inset: 0 0 auto; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--margen); background: transparent; pointer-events: none;
}
.cabecera > * { pointer-events: auto; }
.cabecera--invierte { color: #fff; mix-blend-mode: difference; } /* se lee sobre foto clara y oscura */
.cabecera .logo { font-family: var(--letra-titulo); font-size: 1.25rem; text-decoration: none; letter-spacing: .02em; }

/* E08 · Botón de menú: rayitas → cruz, la del medio más corta */
.hamb { width: 34px; height: 34px; display: grid; align-content: center; gap: 6px; background: none; border: 0; padding: 4px; color: inherit; cursor: pointer; }
.hamb span { display: block; height: 1px; background: currentColor; transition: transform .35s ease, opacity .25s ease; justify-self: end; width: 100%; }
.hamb span:nth-child(2) { width: 60%; }
.hamb[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamb[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamb[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu-panel {
  position: fixed; inset: 0; z-index: 15; background: var(--fondo); color: var(--texto);
  display: grid; align-content: center; justify-items: center; gap: 1.2rem;
  opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;
}
.menu-panel.abierto { opacity: 1; visibility: visible; }
.menu-panel a { font-family: var(--letra-titulo); font-size: clamp(1.8rem, 6vw, 3rem); text-decoration: none; }

/* E15 · Idioma a la vista: el activo marcado, el otro tenue */
.idioma { display: flex; gap: .6rem; font-size: .8rem; letter-spacing: .08em; }
.idioma a { text-decoration: none; color: var(--tenue); }
.idioma a[aria-current] { color: inherit; }

/* E02 · Nombre fijo detrás de las fotos */
.nombre-fondo {
  position: fixed; inset: 0; z-index: 0; display: grid; place-items: center; pointer-events: none;
  font-family: var(--letra-titulo); font-size: clamp(3.2rem, 15vw, 16rem); letter-spacing: .03em;
  color: color-mix(in srgb, var(--texto) 16%, var(--fondo)); white-space: nowrap;
}
.sobre-nombre { position: relative; z-index: 1; }

/* E18 · Portada que aparece con fundido (la clase .lista la pone efectos.js) */
.entra { opacity: 0; transition: opacity 1.2s ease; }
.entra.lista { opacity: 1; }

/* E06 · Texto que aparece al bajar (la clase .visto la pone efectos.js) */
.aparece { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s ease; }
.aparece.visto { opacity: 1; transform: none; }

/* E04 · Palabras que se encienden al bajar (efectos.js parte el texto en <span>) */
.encender span { color: color-mix(in srgb, currentColor 22%, transparent); transition: color .35s ease; }
.encender span.on { color: currentColor; }

/* E03 · Portada quieta con fundido de fotos */
.portada-quieta { height: calc(var(--pasos, 3) * 100svh); position: relative; }
.portada-quieta .marco { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.portada-quieta .foto { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.portada-quieta .foto.activa { opacity: 1; }
.portada-quieta .frase { position: absolute; inset: auto var(--margen) 18vh; opacity: 0; transition: opacity .8s ease; }
.portada-quieta .frase.activa { opacity: 1; }

/* E05 · Deslizamiento por secciones (en el celular, ayuda sin obligar) */
.por-secciones { scroll-snap-type: y mandatory; }
.por-secciones .pantalla { min-height: 100svh; scroll-snap-align: start; }
@media (max-width: 700px) { .por-secciones { scroll-snap-type: y proximity; } }

/* E10 · Fotos a sangre, sin fondo entre ellas */
.sangre { display: grid; gap: 0; }
.sangre > * { width: 100%; min-height: 100svh; object-fit: cover; }

/* E11 · Carrusel rápido de 3 fotos, sin JS */
.rapido { position: relative; overflow: hidden; }
.rapido > * { position: absolute; inset: 0; opacity: 0; animation: turno 4.5s infinite; }
.rapido > :nth-child(2) { animation-delay: 1.5s; }
.rapido > :nth-child(3) { animation-delay: 3s; }
@keyframes turno { 0%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }

/* E12 · Pantalla partida, dos mitades exactamente iguales */
.partida { display: grid; grid-template-columns: 1fr 1fr; height: 100svh; }
.partida > * { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .partida { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } }

/* E13 · Marco separado de la foto y texto vertical */
.marco-fino { outline: 1px solid color-mix(in srgb, var(--texto) 55%, transparent); outline-offset: 10px; }
.vertical { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .25em; text-transform: uppercase; font-size: .72rem; }

/* E07 · Borde de pincel (máscara: la foto sigue siendo liviana) */
.pincel {
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 89px) no-repeat, url(pincel-abajo.svg) bottom / 100% 90px no-repeat;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 89px) no-repeat, url(pincel-abajo.svg) bottom / 100% 90px no-repeat;
}

/* E14 · Mapa del color de la web (una imagen teñida que abre Google Maps) */
.mapa { display: block; filter: grayscale(1) sepia(.25) contrast(.9) brightness(1.02); mix-blend-mode: multiply; }

/* E16 · Pestaña lateral para reservar (en el celular la reemplaza la barra de abajo) */
.pestana {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 20;
  writing-mode: vertical-rl; padding: 1.1rem .65rem; background: var(--acento); color: var(--fondo);
  text-decoration: none; letter-spacing: .2em; font-size: .75rem; text-transform: uppercase;
}
@media (max-width: 700px) { .pestana { display: none; } }

/* E17 · Barra de abajo con fondo difuminado (solo celular) */
.barra-abajo {
  position: fixed; inset: auto 0 0; z-index: 20; display: none;
  justify-content: space-around; padding: .6rem .5rem calc(.6rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--fondo) 62%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid color-mix(in srgb, var(--texto) 10%, transparent);
}
.barra-abajo a { font-size: .72rem; text-decoration: none; display: grid; justify-items: center; gap: 2px; }
.barra-abajo a.principal { color: var(--acento); font-weight: 600; }
@media (max-width: 700px) { .barra-abajo { display: flex; } body { padding-bottom: 64px; } }

/* E19 · Puntas redondeadas (token de peluquería) */
.redondeado { border-radius: var(--radio); overflow: hidden; }

/* E20 · Texto sobre foto, legible */
.velo { position: relative; color: #fff; }
.velo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / .15), rgb(0 0 0 / .55)); z-index: 0; }
.velo > * { position: relative; z-index: 1; }

/* E22 · Recuadro de reserva con contraste */
.reserva { background: var(--acento-suave); padding: clamp(2rem, 6vw, 4rem); }
.boton {
  display: inline-block; padding: .9rem 1.6rem; background: var(--acento); color: var(--fondo);
  text-decoration: none; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; border: 0;
  border-radius: var(--radio); cursor: pointer; font-family: var(--letra-texto);
}
.boton--fino { background: transparent; color: inherit; border: 1px solid currentColor; }

/* E24 · Cuatro fotos que forman una */
.cuatro { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.cuatro > * { aspect-ratio: 1; object-fit: cover; width: 100%; }

/* E28 · Antes y después */
.antes-despues { position: relative; overflow: hidden; }
.antes-despues .despues { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--corte, 50%)); }
.antes-despues input { position: absolute; inset: auto 0 12px; width: 90%; margin: auto; }

/* E29 · Sección invertida */
.invertida { background: var(--acento); color: var(--fondo); }

/* E26 · Transición entre páginas, nativa del navegador */
@view-transition { navigation: auto; }

/* E08 · Con el menú abierto la cabecera queda encima del panel claro: el logo, la X y los idiomas
   pasan al color del texto (en Aperto y Sequenza eran blancos y se perdían sobre el panel). */
body.menu-abierto .cabecera { mix-blend-mode: normal; }
body.menu-abierto .cabecera, body.menu-abierto .cabecera .logo, body.menu-abierto .cabecera .hamb,
body.menu-abierto .cabecera .idioma a[aria-current] { color: var(--texto) !important; }
body.menu-abierto .cabecera .idioma a:not([aria-current]) { color: var(--tenue) !important; }

/* Reseñas que se turnan despacio (Sequenza y Cornice) */
.rotan { display: grid; }
.rotan > figure { grid-area: 1 / 1; margin: 0; opacity: 0; animation: rota 15s infinite; }
.rotan > figure:nth-child(2) { animation-delay: 5s; }
.rotan > figure:nth-child(3) { animation-delay: 10s; }
@keyframes rota { 0%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rotan > figure:first-child { opacity: 1; } }

/* E06 · Variante "desde el fondo" (26/09/2026, modelo Tela, como Lasai): no se desplaza; aparece
   con un fundido, un leve acercamiento y un desenfoque que se aclara. Con .escalonado en el
   contenedor, los hijos aparecen de a uno (efectos.js les pone el retraso). */
.aparece--fondo { transform: scale(.965); filter: blur(6px); transition: opacity 1s ease-out, transform 1.3s cubic-bezier(.2, .7, .2, 1), filter 1s ease-out; }
.aparece--fondo.visto { transform: none; filter: none; }

/* E33 · Menú desplegable: cada plato con flecha; al tocar se abre foto, ingredientes y símbolos */
.desplegable { border-bottom: 1px solid color-mix(in srgb, var(--texto) 14%, transparent); }
.desplegable summary { list-style: none; display: flex; align-items: center; gap: .6rem; padding: 1rem 0; cursor: pointer; }
.desplegable summary::-webkit-details-marker { display: none; }
.desplegable .nombre { flex: 1; min-width: 0; }
.desplegable .precio { font-variant-numeric: tabular-nums; }
.desplegable .flecha-plato { width: 18px; height: 18px; flex: none; transition: transform .35s ease; }
.desplegable.abierto .flecha-plato { transform: rotate(180deg); }
.desplegable .detalle { overflow: hidden; display: grid; grid-template-columns: 88px 1fr; gap: 1rem; align-items: center; padding: 0 0 1.2rem; }
.desplegable .detalle .plato-redondo { width: 88px; }
.desplegable .detalle p { margin: 0 0 .5rem; line-height: 1.55; }
.desplegable .detalle--texto { grid-template-columns: 1fr; gap: .4rem; }
.simbolos { display: inline-flex; gap: .3rem; align-items: center; }
.simbolos svg { width: 18px; height: 18px; }
.simbolos-lista { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .82rem; }
.simbolos-lista span { display: inline-flex; align-items: center; gap: .35rem; }
.simbolos-lista svg { width: 18px; height: 18px; flex: none; }

/* Todo movimiento se apaga si el teléfono pide "reducir movimiento" */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .aparece, .entra { opacity: 1; transform: none; filter: none; }
  .rapido > :first-child { opacity: 1; }
}

/* E07 · Pincel arriba y abajo (26/09/2026, modelo Tela): la foto entra y sale con pincelada */
.pincel--doble {
  -webkit-mask: url(pincel-arriba.svg) top / 100% 90px no-repeat, url(pincel-abajo.svg) bottom / 100% 90px no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 178px) no-repeat;
          mask: url(pincel-arriba.svg) top / 100% 90px no-repeat, url(pincel-abajo.svg) bottom / 100% 90px no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 178px) no-repeat;
}

/* E07 · Fondo pintado (como la portada de Lasai): un gris pintado detrás de la sección que
   termina abajo en pincelada seca contra el fondo de la página. --pintura cambia el color. */
.fondo-pintado { position: relative; isolation: isolate; }
.fondo-pintado::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--pintura, radial-gradient(120% 85% at 50% 38%, #eef0ef, #dadcdb));
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 159px) no-repeat, url(pincel-abajo.svg) bottom / 100% 160px no-repeat;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 159px) no-repeat, url(pincel-abajo.svg) bottom / 100% 160px no-repeat;
}

/* E32 · Plato que gira al bajar (efectos.js le cambia --giro). Solo transform: no traba */
.gira { transform: rotate(var(--giro, 0deg)); will-change: transform; }

/* Foto redonda de plato, vista desde arriba (con el borde del plato) */
.plato-redondo { border-radius: 50%; aspect-ratio: 1; box-shadow: inset 0 0 0 clamp(8px, 2.5vw, 18px) rgb(255 255 255 / .9), 9px 11px 18px rgb(0 0 0 / .26), 2px 3px 5px rgb(0 0 0 / .14); }