/* Café Lirio de Papel · proyecto de ejemplo de Yfful (negocio ficticio), versión 3.
   Estilo revista con recorrido horizontal, inspirado en later.com/made-you-look (solo inspiración).
   Letra de titulares: Archivo Black (licencia OFL, guardada en fonts/). Sin recursos externos. */

@font-face { font-family: "Archivo Black"; src: url("fonts/ArchivoBlack-Regular.ttf") format("truetype"); font-display: swap; }

:root {
  --crema: #f7efe6;
  --negro: #111;
  --gris: #4b4540;
  --coral: #ff5a4e;
  --rosa: #ff7eb6;
  --morado: #8b5cf6;
  --naranja: #ffb347;
  --degradado: linear-gradient(160deg, var(--naranja) 0%, var(--coral) 30%, var(--rosa) 60%, var(--morado) 100%);
  --titular: "Archivo Black", "Arial Black", Impact, sans-serif;
  --texto: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Grano hecho con SVG dentro del propio CSS */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--crema); color: var(--negro); font: 1.05rem/1.6 var(--texto); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--titular); font-weight: 400; line-height: .95; margin: 0 0 .4em; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--negro); outline-offset: 3px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.franja-ejemplo { position: relative; z-index: 70; margin: 0; background: var(--negro); color: #f3f4ef; text-align: center; font: 600 .88rem/1.4 var(--texto); padding: 9px 16px; }
.franja-ejemplo a { color: #93C572; }

/* ---------- Botones ---------- */
.boton-negro, .boton-blanco { display: inline-flex; align-items: center; gap: .6em; min-height: 48px; padding: 12px 22px; font-weight: 700; text-decoration: none; border: 2px solid var(--negro); transition: transform .2s, box-shadow .2s; }
.boton-negro { background: var(--negro); color: #fff; }
.boton-blanco { background: #fff; color: var(--negro); }
.boton-negro:hover, .boton-blanco:hover { transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--negro); }
.boton-negro:hover { box-shadow: 4px 4px 0 var(--rosa); }
.botones { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Cabecera ---------- */
.cabecera { position: fixed; top: 37px; left: 0; right: 0; z-index: 60; display: flex; justify-content: space-between; align-items: center; padding: 16px clamp(16px, 3vw, 40px); pointer-events: none; }
.cabecera > * { pointer-events: auto; }
.marca { font: 1.7rem/1 var(--titular); color: #fff; text-decoration: none; -webkit-text-stroke: 1.5px var(--negro); text-shadow: 3px 3px 0 var(--negro); letter-spacing: -.01em; }
.cabecera__acciones { display: flex; gap: 10px; align-items: center; }
.abrir-menu { width: 48px; height: 48px; font-size: 1.4rem; background: transparent; color: var(--negro); border: 0; cursor: pointer; }
.cabecera--sobre-portada .abrir-menu { color: #fff; }
.menu-completo { position: fixed; inset: 0; z-index: 55; background: var(--degradado); display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(24px, 6vw, 80px); }
.menu-completo::after { content: ""; position: absolute; inset: 0; background-image: var(--grano); opacity: .35; mix-blend-mode: overlay; pointer-events: none; }
.menu-completo[hidden] { display: none; }
.menu-completo a { font: clamp(3rem, 9vw, 7rem)/1 var(--titular); color: #fff; text-decoration: none; position: relative; z-index: 1; }
.menu-completo a:hover { color: var(--negro); }

/* ---------- Portada ---------- */
.portada { position: relative; min-height: min(100svh, 980px); display: grid; place-items: center; text-align: center; overflow: hidden; isolation: isolate; color: #fff; padding: 140px 20px 90px; }
.portada__fondo { position: absolute; inset: -10%; z-index: -1; background:
    radial-gradient(40% 50% at 20% 30%, var(--naranja), transparent 70%),
    radial-gradient(45% 55% at 80% 20%, var(--coral), transparent 70%),
    radial-gradient(50% 60% at 70% 80%, var(--morado), transparent 70%),
    radial-gradient(45% 50% at 25% 85%, var(--rosa), transparent 70%), var(--coral);
  filter: blur(30px) saturate(1.1); animation: flotar 16s ease-in-out infinite alternate; }
.portada::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grano); opacity: .4; mix-blend-mode: overlay; pointer-events: none; }
@keyframes flotar { to { transform: translate(-3%, 2%) rotate(4deg) scale(1.05); } }
.portada__contenido { max-width: 1100px; }
.portada h1 { font-size: clamp(2.8rem, 7.6vw, 6.6rem); text-shadow: 0 4px 30px rgba(120, 30, 40, .25); }
.portada__entrada { font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 600; max-width: 32em; margin: 0 auto 1.8em; }
.portada .botones { justify-content: center; }
.portada__desliza { position: absolute; bottom: 24px; left: 0; right: 0; margin: 0; font: 1rem var(--titular); text-transform: uppercase; letter-spacing: .1em; }
.portada__desliza span { display: inline-block; animation: empujar 1.4s ease-in-out infinite; }
@keyframes empujar { 50% { transform: translateX(8px); } }

.estado { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; background: #fff; color: var(--negro); font-weight: 700; font-size: .95rem; border: 2px solid var(--negro); box-shadow: 3px 3px 0 var(--negro); margin-bottom: 1.6em; }
.estado__punto { width: 10px; height: 10px; border-radius: 50%; background: #1fa34a; }
.estado--cerrado .estado__punto { background: var(--coral); }

/* ---------- Recorrido horizontal (solo en pantallas grandes, ver más abajo) ---------- */
.pista { display: flex; flex-direction: column; }
.panel { position: relative; padding: clamp(64px, 10vw, 110px) clamp(20px, 4vw, 56px); }

/* Panel revista */
.revista__titulo h2 { font-size: clamp(4.5rem, 14vw, 11rem); line-height: .82; margin: 0 0 .25em; }
.revista__titulo h2 span { display: block; }
.revista__sub { font: clamp(1.4rem, 2.6vw, 2rem)/1.1 var(--titular); margin-bottom: 1.4em; }
.creditos { margin: 0; display: grid; gap: 12px; }
.creditos dt { font-weight: 800; font-size: .9rem; }
.creditos dd { margin: 0; color: var(--gris); font-size: .95rem; }
.revista__texto { max-width: 26em; columns: 1; }
.revista__texto p { color: var(--gris); }
.destacado { font: 1.6rem/1.15 var(--titular); color: var(--negro) !important; }
.foto { margin: 0; overflow: hidden; border: 2px solid var(--negro); box-shadow: 8px 8px 0 var(--negro); background: #ddd; }
.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.foto:hover img { transform: scale(1.06); }
.revista__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.foto--a { aspect-ratio: 4 / 3; }
.foto--b { aspect-ratio: 3 / 4; }

/* Panel carta con nombre gigante en vertical */
.panel--carta { background: var(--degradado); color: var(--negro); overflow: hidden; isolation: isolate; }
.panel--carta::after, .panel--galeria::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grano); opacity: .35; mix-blend-mode: overlay; pointer-events: none; }
.vertical { margin: 0; font: clamp(4rem, 13vw, 10rem)/.85 var(--titular); text-transform: uppercase; color: #fff; -webkit-text-stroke: 2px var(--negro); }
.vertical--negro { color: transparent; background: var(--degradado); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; }
.carta { background: var(--crema); border: 2px solid var(--negro); box-shadow: 10px 10px 0 var(--negro); padding: clamp(24px, 4vw, 44px); max-width: 640px; }
.carta h2 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.pestanas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pestana { font: 1rem var(--titular); text-transform: uppercase; padding: 10px 18px; border: 2px solid var(--negro); background: #fff; color: var(--negro); cursor: pointer; }
.pestana[aria-selected="true"] { background: var(--negro); color: #fff; }
.panel-carta[hidden] { display: none; }
.platos { list-style: none; margin: 0; padding: 0; }
.platos li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 2px solid var(--negro); }
.platos strong { display: block; font-size: 1.1rem; }
.platos span { color: var(--gris); font-size: .92rem; }
.platos b { font: 1.2rem var(--titular); white-space: nowrap; }
.nota { color: var(--gris); font-size: .9rem; margin: 16px 0 0; }

/* Panel galería: cita grande y collage suelto */
.panel--galeria { overflow: hidden; isolation: isolate; }
.cita { margin: 0 0 40px; max-width: 18ch; }
.cita p { font: clamp(2rem, 4vw, 3.2rem)/1.02 var(--titular); margin: 0 0 .4em; }
.cita p::before { content: "“"; display: block; font-size: 1.6em; line-height: .6; background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cita footer { font-weight: 700; color: var(--gris); }
.collage { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.foto--1, .foto--4, .foto--5 { aspect-ratio: 3 / 4; }
.foto--2, .foto--3 { aspect-ratio: 4 / 3; }

/* Panel visita */
.visita { max-width: 560px; }
.visita h2 { font-size: clamp(2.8rem, 6vw, 4.6rem); }
.horario { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 1.1rem; }
.horario th, .horario td { text-align: left; padding: 12px 0; border-bottom: 2px solid var(--negro); font-weight: 600; }
.horario td { text-align: right; }
.horario .hoy th, .horario .hoy td { background: var(--negro); color: #fff; padding-inline: 10px; }
.horario .hoy th::after { content: " · hoy"; font-weight: 400; }
.direccion { color: var(--gris); }

/* ---------- Pie ---------- */
.pie { background: var(--negro); color: rgba(255, 255, 255, .8); padding: 72px clamp(20px, 4vw, 56px) 32px; }
.pie a { color: #fff; }
.pie__grande { font: clamp(3rem, 12vw, 10rem)/.85 var(--titular); margin: 0 0 48px; background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pie__rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.pie h3 { font: .85rem var(--titular); text-transform: uppercase; letter-spacing: .1em; color: var(--rosa); }
.pie__final { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: .9rem; }
.pie__final p { margin: 0; }

/* ---------- Ordenador: recorrido horizontal tipo revista ---------- */
@media (min-width: 1000px) {
  .horizontal--activo { position: relative; }
  .horizontal--activo .horizontal__fijo { position: sticky; top: 0; height: 100vh; overflow: hidden; }
  .horizontal--activo .pista { flex-direction: row; height: 100%; will-change: transform; }
  .horizontal--activo .panel { flex: 0 0 auto; height: 100%; display: flex; align-items: center; gap: clamp(32px, 4vw, 64px); padding-top: 110px; padding-bottom: 60px; }
  .horizontal--activo .panel--revista { width: 160vw; }
  .horizontal--activo .revista__titulo { flex: 0 0 auto; }
  .horizontal--activo .revista__texto { flex: 0 0 26em; }
  .horizontal--activo .revista__fotos { flex: 0 0 58vw; margin: 0; align-items: center; }
  .horizontal--activo .foto--b { transform: translateY(12%); }
  .horizontal--activo .panel--carta { width: 100vw; }
  .horizontal--activo .vertical { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
  .horizontal--activo .panel--galeria { width: 150vw; }
  .horizontal--activo .cita { flex: 0 0 auto; }
  .horizontal--activo .collage { display: block; flex: 0 0 100vw; height: 100%; }
  .horizontal--activo .collage .foto { position: absolute; }
  .horizontal--activo .foto--1 { width: 18vw; left: 0; top: 4%; transform: rotate(-3deg); }
  .horizontal--activo .foto--2 { width: 24vw; left: 22vw; top: 42%; transform: rotate(2deg); }
  .horizontal--activo .foto--3 { width: 22vw; left: 30vw; top: 0; }
  .horizontal--activo .foto--4 { width: 16vw; left: 56vw; top: 30%; transform: rotate(-2deg); }
  .horizontal--activo .foto--5 { width: 17vw; left: 76vw; top: 6%; transform: rotate(3deg); }
  .horizontal--activo .panel--visita { width: 100vw; }
}

@media (max-width: 999px) {
  .vertical { font-size: clamp(3rem, 16vw, 6rem); margin-bottom: 24px; }
  .portada__desliza { display: none; }
}
@media (max-width: 640px) {
  .cabecera .boton-negro { display: none; }
  .revista__fotos, .collage { grid-template-columns: 1fr; }
  .pie__rejilla { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Arreglos del 14/11/2026 (revisión de fallos pedida por Noelia) ---------- */
/* 1. «La carta» y «Visítanos» en vertical se cortaban por arriba y por abajo:
      ahora el tamaño se ajusta a la altura de la pantalla (--largo = largo de la palabra en "em", puesto en el HTML). */
@media (min-width: 1000px) {
  .horizontal--activo .vertical { font-size: min(10rem, 13vw, calc((100vh - 210px) / var(--largo, 6))); }
  /* La cita «Un buen café…» salía en una columna estrechísima, una palabra por línea */
  .horizontal--activo .cita { flex: 0 0 min(30vw, 460px); max-width: none; }
}
/* 2. La tilde de «VISÍTANOS» no se veía (el degradado no llegaba hasta ella) */
.vertical--negro { padding: .14em .04em 0; }
.horizontal--activo .vertical--negro { padding: .04em .14em .04em 0; }
/* 3. En móvil «VISÍTANOS» no cabía de ancho */
@media (max-width: 999px) {
  .vertical--negro { font-size: clamp(2.4rem, 13vw, 6rem); }
}
/* 4. Al bajar, el nombre y el menú flotaban encima de los textos y costaba leerlos:
      fuera de la portada la cabecera lleva fondo crema y se pega arriba del todo. */
.cabecera { transition: top .25s, background-color .25s; }
.cabecera:not(.cabecera--sobre-portada) { top: 0; background: rgba(247, 239, 230, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 2px 0 var(--negro); }
@media (prefers-reduced-motion: reduce) { .cabecera { transition: none; } }

/* ---------- Arreglos del 14/11/2026, 2.ª revisión: pantallas de portátil poco altas ---------- */
/* En portátiles (pantalla de menos de ~880 px de alto) los paneles no cabían: el título «Lirio de Papel»,
   «La carta» y «Te esperamos» quedaban debajo de la cabecera y las palabras en vertical se cortaban.
   Ahora los tamaños se ajustan a la altura de la pantalla y, si aun así no cabe, la carta va a dos columnas. */
@media (min-width: 1000px) {
  .horizontal--activo .panel { padding-top: 104px; padding-bottom: 32px; }
  .horizontal--activo .revista__titulo h2 { font-size: max(4.5rem, min(11rem, 14vw, calc((100vh - 380px) / 2.46))); }
  .horizontal--activo .visita h2 { font-size: min(4.6rem, 6vw, 9vh); }
  .horizontal--activo .vertical { font-size: min(10rem, 13vw, calc((100vh - 170px) / var(--largo, 6))); }
  .horizontal--activo .revista__fotos .foto { max-height: calc(100vh - 200px); }
  .horizontal--activo .foto--b { transform: translateY(6%); }
}
@media (min-width: 1000px) and (max-height: 879px) {
  .horizontal--activo .creditos { gap: 8px; }
  .horizontal--activo .revista__sub { margin-bottom: .8em; }
  .horizontal--activo .carta { max-width: 860px; padding: 22px 30px; }
  .horizontal--activo .carta h2 { font-size: 2.4rem; }
  .horizontal--activo .pestanas { margin-bottom: 12px; }
  .horizontal--activo .platos { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .horizontal--activo .platos li { padding: 9px 0; }
  .horizontal--activo .nota { margin-top: 10px; }
}
/* En pantallas muy bajas (menos de 600 px de alto) no hay recorrido de lado: la página va hacia abajo,
   como en el móvil (lo decide script.js). Aquí, el tamaño de las palabras en vertical para ese caso. */
.horizontal:not(.horizontal--activo) .vertical { font-size: clamp(3rem, 16vw, 6rem); margin-bottom: 24px; }
.horizontal:not(.horizontal--activo) .vertical--negro { font-size: clamp(2.4rem, 13vw, 6rem); }
@media (min-width: 1000px) and (max-height: 599px) { .portada__desliza { display: none; } }