/* =====================================================================
   Estilos de la plantilla "diario de la casa".
   Los 3 colores principales se cambian en js/config.js (sección COLORES),
   no hace falta tocar este archivo.
   ===================================================================== */

/* ─────────── 1. variables ─────────── */
:root{
  /* colores base (config.js los reemplaza al cargar) */
  --papel:  #F2ECE1;
  --tinta:  #1B1814;
  --acento: #B5341E;

  /* derivados: se calculan solos a partir de los tres de arriba */
  --papel-2:    color-mix(in srgb, var(--papel) 88%, var(--tinta));
  --tinta-2:    color-mix(in srgb, var(--tinta) 74%, var(--papel));
  --tinta-suave:color-mix(in srgb, var(--tinta) 62%, var(--papel));
  --linea:      color-mix(in srgb, var(--tinta) 22%, var(--papel));
  --acento-osc: color-mix(in srgb, var(--acento) 82%, #000);

  /* letras */
  --gotica:  "UnifrakturMaguntia", "Old English Text MT", serif;
  --display: "Instrument Serif", "Times New Roman", serif;
  --texto:   "Newsreader", Georgia, serif;
  --mono:    "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --ancho: 1240px;
  --barra: 56px;
}

/* ─────────── 2. base ─────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--barra) + 8px); background:var(--papel); }
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* grano de papel muy suave */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:100;
  opacity:.05; mix-blend-mode:multiply;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
[hidden]{ display:none !important; }
.sprite{ display:none; }
.tnum{ font-variant-numeric:tabular-nums; }
:focus-visible{ outline:2px solid var(--acento); outline-offset:3px; }
::selection{ background:var(--acento); color:var(--papel); }

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

.ico{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* ─────────── 3. tipografía editorial ─────────── */
.antetitulo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono);
  font-size:.75rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--acento);
}
.antetitulo::before{ content:""; width:22px; height:1px; background:currentColor; flex:none; }

.titular{ font-family:var(--display); font-weight:400; line-height:1.02; letter-spacing:-.01em; }
.titular--xl{ font-size:clamp(2.6rem, 1.6rem + 4.6vw, 5.2rem); }
.titular--lg{ font-size:clamp(2.1rem, 1.5rem + 2.8vw, 3.7rem); }
.bajada{ font-size:1.12rem; line-height:1.55; color:var(--tinta-2); max-width:46ch; }
.nota{ margin-top:14px; font-family:var(--mono); font-size:.75rem; color:var(--tinta-suave); }

/* palabras partidas para la animación */
.p{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em; }
.p__i{ display:inline-block; }
.anima .cabecera, .anima .portada__texto .titular{ opacity:0; }

/* ─────────── 4. botones: cuadrados, como el diario ─────────── */
.boton{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:12px 22px;
  border:1.5px solid var(--tinta);
  border-radius:0;
  font-family:var(--mono); font-size:.8125rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  cursor:pointer;
  transition:color .25s ease, background-color .25s ease, border-color .25s ease;
}
/* relleno que sube desde abajo al pasar el mouse */
.boton::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--tinta);
  transform:translateY(101%);
  transition:transform .45s cubic-bezier(.7,0,.2,1);
}
.boton:hover::before{ transform:translateY(0); }
.boton--acento{ background:var(--acento); border-color:var(--acento); color:var(--papel); }
.boton--acento:hover{ border-color:var(--tinta); }
.boton--linea{ background:transparent; color:var(--tinta); }
.boton--linea:hover{ color:var(--papel); }
.boton--tinta{ background:var(--tinta); color:var(--papel); }
.boton--tinta::before{ background:var(--acento); }
.boton--tinta:hover{ border-color:var(--acento); }
.boton--sm{ min-height:40px; padding:8px 16px; font-size:.75rem; }
.boton--bloque{ width:100%; }
.boton .ico{ transition:transform .3s ease; }
.boton:hover .ico{ transform:translateX(3px); }

/* ─────────── 5. barra ─────────── */
.barra{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linea);
}
.barra__fila{ min-height:var(--barra); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.barra__nombre{
  font-family:var(--gotica); font-size:1.5rem; line-height:1; text-decoration:none;
  opacity:0; transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
}
.barra.con-nombre .barra__nombre{ opacity:1; transform:none; }
.barra__links{
  position:fixed; inset:var(--barra) 0 auto 0;
  display:none; flex-direction:column;
  padding:8px 20px 24px;
  background:var(--papel);
  border-bottom:1.5px solid var(--tinta);
}
.barra__links.abierto{ display:flex; }
.barra__links a:not(.boton){
  padding:14px 0;
  border-bottom:1px solid var(--linea);
  font-family:var(--display); font-size:1.6rem; text-decoration:none;
}
.barra__reserva{ margin-top:16px; }
.barra__toggle{
  width:44px; height:44px; margin-right:-10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; color:var(--tinta); cursor:pointer;
}
.barra__toggle .ico{ width:24px; height:24px; }
.barra__toggle .ico--cerrar{ display:none; }
.barra__toggle[aria-expanded="true"] .ico--menu{ display:none; }
.barra__toggle[aria-expanded="true"] .ico--cerrar{ display:block; }

/* ─────────── 6. portada ─────────── */
.portada{ padding-top:18px; border-bottom:1.5px solid var(--tinta); }
.fechario{
  display:flex; flex-wrap:wrap; justify-content:center; gap:4px 18px;
  padding-bottom:10px;
  border-bottom:1px solid var(--tinta);
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-2); text-align:center;
}
.fechario > span:first-child::first-letter{ text-transform:uppercase; }
.fechario__centro{ display:none; }

.cabecera{
  margin:14px 0 8px;
  text-align:center;
  line-height:.95;
  overflow:hidden;
  padding-bottom:.08em;
  white-space:nowrap;
}
.cabecera--gotica{ font-family:var(--gotica); font-weight:400; font-size:clamp(3.4rem, 1rem + 13vw, 11rem); }
.cabecera--serif{ font-family:var(--display); font-weight:400; font-size:clamp(3.4rem, 1rem + 12vw, 10rem); letter-spacing:-.02em; }
.letra{ display:inline-block; }
.letra--espacio{ width:.28em; }

.regla-doble{ height:6px; border-top:3px solid var(--tinta); border-bottom:1px solid var(--tinta); }

.portada__grid{ display:grid; gap:32px; padding:32px 0 40px; }
.portada__texto .titular{ margin:14px 0 18px; max-width:13ch; }
.portada__acciones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.portada__acciones .boton{ flex:1 1 180px; }

/* fotos y marcadores */
.foto{ margin:0; }
.foto__marco{ position:relative; overflow:hidden; aspect-ratio:16/10; background:var(--papel-2); border:1px solid var(--tinta); }
.foto__marco svg, .foto__marco img{ width:100%; height:100%; object-fit:cover; display:block; }
.foto figcaption{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px;
  margin-top:8px; padding-top:8px;
  border-top:1px solid var(--linea);
  font-family:var(--texto); font-style:italic; font-size:.9rem; color:var(--tinta-2);
}
.foto__tamano{ font-family:var(--mono); font-style:normal; font-size:.6875rem; letter-spacing:.06em; color:var(--tinta-suave); }

/* cinta que corre */
.cinta{ overflow:hidden; border-top:1.5px solid var(--tinta); background:var(--tinta); color:var(--papel); }
.cinta__pista{ display:flex; width:max-content; animation:cinta 38s linear infinite; }
.cinta__tira{ display:flex; align-items:center; flex:none; }
.cinta span{ padding:12px 22px; font-family:var(--display); font-style:italic; font-size:1.25rem; white-space:nowrap; }
.cinta i{ font-style:normal; font-size:.6rem; color:var(--acento); }
@keyframes cinta{ to{ transform:translateX(-50%); } }

/* ─────────── 7. secciones ─────────── */
.seccion{ padding-block:72px; }
.seccion--corta{ padding-block:24px 8px; }
.seccion--linea{ border-top:1.5px solid var(--tinta); }
.seccion__cabeza{ margin-bottom:40px; }
.seccion__cabeza .titular{ margin-top:14px; max-width:18ch; }

/* la casa */
.cronica__cabeza .titular{ margin-top:14px; max-width:16ch; }
.cronica__cuerpo{ margin-top:32px; display:grid; gap:18px; }
.cronica__cuerpo p{ font-size:1.125rem; line-height:1.65; hyphens:auto; }
.capitular::first-letter{
  float:left;
  font-family:var(--gotica);
  font-size:4.6em; line-height:.8;
  padding:.06em .1em 0 0;
  color:var(--acento);
}
.cita{
  margin:40px 0 0; padding:28px 0;
  border-top:3px solid var(--tinta); border-bottom:1px solid var(--tinta);
  text-align:center;
}
.cita p{ font-family:var(--display); font-style:italic; font-size:clamp(1.8rem, 1.2rem + 2.6vw, 3.1rem); line-height:1.1; max-width:22ch; margin-inline:auto; }
.cita p::before{ content:"“"; color:var(--acento); }
.cita p::after{ content:"”"; color:var(--acento); }
.firma{ margin-top:16px; font-family:var(--mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-suave); text-align:center; }

/* especial: aviso recuadrado con timbre */
.aviso{
  position:relative;
  padding:40px 24px 28px;
  border:1.5px solid var(--tinta);
  outline:1px solid var(--tinta); outline-offset:5px;
  text-align:center;
  background:var(--papel);
}
.aviso__sello{
  position:absolute; top:-15px; left:50%; transform:translateX(-50%) rotate(-2deg);
  padding:5px 14px;
  background:var(--acento); color:var(--papel);
  font-family:var(--mono); font-size:.6875rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  white-space:nowrap;
}
.aviso__plato{ font-family:var(--display); font-weight:400; font-size:clamp(2.2rem, 1.4rem + 3.6vw, 4.2rem); line-height:1; }
.aviso__texto{ margin:14px auto 0; max-width:48ch; color:var(--tinta-2); }
.aviso__precio{ margin-top:18px; font-family:var(--mono); font-size:1.5rem; font-weight:600; color:var(--acento); }

/* carta: avisos clasificados con puntos guía */
.carta{ display:grid; gap:44px; }
.carta__seccion{ --regla:1; }
.carta__titulo{
  position:relative;
  padding-bottom:10px; margin-bottom:6px;
  font-family:var(--mono); font-size:.8125rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
}
.carta__titulo::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  border-top:1.5px solid var(--tinta); border-bottom:1px solid var(--tinta);
  transform:scaleX(var(--regla)); transform-origin:left;
}
.plato{ padding:14px 0; border-bottom:1px solid var(--linea); }
.plato:last-child{ border-bottom:0; }
.plato__linea{ display:flex; align-items:baseline; gap:8px; }
.plato__nombre{ font-family:var(--display); font-size:1.5rem; line-height:1.15; }
.plato__puntos{ flex:1; min-width:16px; border-bottom:1.5px dotted var(--tinta-suave); transform:translateY(-5px); }
.plato__precio{ font-family:var(--mono); font-size:.95rem; font-weight:600; white-space:nowrap; }
.plato__desc{ margin-top:4px; font-size:.98rem; color:var(--tinta-2); line-height:1.45; }
.plato__etiqueta{
  display:inline-block; margin-left:4px;
  padding:1px 7px;
  border:1px solid var(--acento); color:var(--acento);
  font-family:var(--mono); font-size:.625rem; font-style:normal; letter-spacing:.1em; text-transform:uppercase;
  vertical-align:2px;
}

/* fotos en negativo: sección oscura */
.seccion--tinta{ background:var(--tinta); color:var(--papel); }
.seccion--tinta .antetitulo{ color:color-mix(in srgb, var(--acento) 55%, var(--papel)); }
.seccion--tinta .foto__marco{ border-color:var(--papel); }
.seccion--tinta .foto figcaption{ color:color-mix(in srgb, var(--papel) 78%, var(--tinta)); border-top-color:color-mix(in srgb, var(--papel) 25%, var(--tinta)); }
.seccion--tinta .foto__tamano{ color:color-mix(in srgb, var(--papel) 62%, var(--tinta)); }
.galeria{ display:grid; gap:28px; }

/* reservas */
.reservas{ display:grid; gap:36px; }
.reservas__texto .titular{ margin:14px 0 16px; max-width:14ch; }
.reservas__tel{ margin-top:20px; font-family:var(--mono); font-size:1.05rem; }
.reservas__tel a{ color:var(--acento); text-underline-offset:4px; }
.formulario{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  padding:24px;
  border:1.5px solid var(--tinta);
  background:var(--papel-2);
}
.campo{ display:grid; gap:6px; }
.campo--ancho, .formulario .boton, .formulario__error{ grid-column:1 / -1; }
.campo:first-child{ grid-column:1 / -1; }
.campo__etiqueta{ font-family:var(--mono); font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2); }
.campo select, .campo input{
  width:100%; min-height:48px; padding:10px 12px;
  border:1px solid var(--tinta); border-radius:0;
  background:var(--papel); color:var(--tinta);
  font-family:var(--texto); font-size:1.05rem;
  -webkit-appearance:none; appearance:none;
}
.campo select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px; padding-right:36px;
}
.formulario__error{ font-family:var(--mono); font-size:.8rem; color:var(--acento); }

/* horarios y ubicación */
.dos-columnas{ display:grid; gap:48px; }
.horarios{ width:100%; margin-top:18px; border-collapse:collapse; }
.horarios th, .horarios td{ padding:14px 0; border-bottom:1px solid var(--linea); text-align:left; vertical-align:top; }
.horarios th{ font-family:var(--display); font-weight:400; font-size:1.35rem; padding-right:16px; }
.horarios td{ font-family:var(--mono); font-size:.875rem; text-align:right; }
.horarios .cerrado td{ color:var(--acento); }
.ubicacion__direccion{ margin-top:18px; font-family:var(--display); font-size:clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); line-height:1.1; }
.ubicacion__texto{ margin-top:12px; color:var(--tinta-2); max-width:42ch; }
.ubicacion__acciones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }

/* ─────────── 8. pie ─────────── */
.pie{ background:var(--tinta); color:var(--papel); padding:48px 0 28px; }
.pie__nombre{ text-align:center; line-height:1; padding-bottom:18px; border-bottom:1px solid color-mix(in srgb, var(--papel) 30%, var(--tinta)); white-space:nowrap; overflow:hidden; }
.pie__nombre.cabecera--gotica{ font-size:clamp(2.6rem, 1rem + 8vw, 6rem); }
.pie__nombre.cabecera--serif{ font-size:clamp(2.4rem, 1rem + 7vw, 5.4rem); }
.pie__fila{ display:grid; gap:8px; padding:20px 0; text-align:center; font-family:var(--mono); font-size:.75rem; letter-spacing:.06em; color:color-mix(in srgb, var(--papel) 80%, var(--tinta)); }
.pie__fila a{ text-underline-offset:3px; }
.pie__credito{ text-align:center; font-family:var(--mono); font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; color:color-mix(in srgb, var(--papel) 62%, var(--tinta)); }
.pie__credito a{ text-decoration:none; border-bottom:1px solid currentColor; }
.pie__credito a:hover{ color:var(--papel); }

/* botón flotante de WhatsApp en móvil */
.flotante{
  position:fixed; right:16px; bottom:16px; z-index:60;
  width:56px; height:56px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--acento); color:var(--papel);
  border:1.5px solid var(--tinta);
}
.flotante .ico{ width:26px; height:26px; }

.sin-js{ padding:20px; font-family:var(--mono); text-align:center; }

/* ─────────── 9. tablet ─────────── */
@media (min-width:768px){
  .contenedor{ padding-inline:32px; }
  .fechario{ justify-content:space-between; text-align:left; }
  .fechario__centro{ display:inline; }
  .portada__acciones .boton{ flex:0 0 auto; }
  .cronica__cuerpo{ display:block; column-count:2; column-gap:40px; column-rule:1px solid var(--linea); }
  .cronica__cuerpo p{ margin-bottom:18px; break-inside:avoid-column; }
  .carta{ grid-template-columns:1fr 1fr; gap:48px 48px; }
  .galeria{ grid-template-columns:1fr 1fr; }
  .galeria .foto--grande{ grid-column:1 / -1; }
  .galeria .foto:not(.foto--grande) .foto__marco{ aspect-ratio:4/3; }
  .formulario{ grid-template-columns:repeat(3, 1fr); padding:32px; }
  .campo:first-child{ grid-column:auto; }
  .aviso{ padding:52px 48px 36px; }
  .dos-columnas{ grid-template-columns:1fr 1fr; gap:64px; }
  .pie__fila{ grid-template-columns:repeat(3, 1fr); }
  .pie__fila .pie__dato:first-child{ text-align:left; }
  .pie__fila .pie__dato:last-child{ text-align:right; }
}

/* ─────────── 10. escritorio ─────────── */
@media (min-width:1024px){
  :root{ --barra:64px; }
  .barra__toggle{ display:none; }
  .barra__links{
    position:static; display:flex; flex-direction:row; align-items:center; gap:28px;
    padding:0; background:none; border:0;
  }
  .barra__links a:not(.boton){
    padding:0; border:0;
    font-family:var(--mono); font-size:.75rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
    background:linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
    transition:background-size .3s ease;
  }
  .barra__links a:not(.boton):hover{ background-size:100% 1px; }
  .barra__reserva{ margin-top:0; }
  .flotante{ display:none; }

  .portada__grid{ grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start; padding:44px 0 56px; }
  .portada__texto{ padding-right:28px; border-right:1px solid var(--linea); }
  .seccion{ padding-block:104px; }
  .seccion--corta{ padding-block:40px 0; }

  .cronica{ display:grid; grid-template-columns:5fr 7fr; gap:0 64px; }
  .cronica__cabeza{ grid-row:span 2; }
  .cronica__cuerpo{ margin-top:0; column-count:2; }
  .cita, .firma{ grid-column:1 / -1; }

  .galeria{ grid-template-columns:repeat(4, 1fr); gap:32px 28px; }
  .galeria .foto--grande{ grid-column:span 2; grid-row:span 2; }
  .galeria .foto--grande .foto__marco{ aspect-ratio:auto; height:calc(100% - 44px); min-height:420px; }

  .reservas{ grid-template-columns:5fr 7fr; align-items:center; gap:64px; }
  .formulario{ grid-template-columns:1fr 1fr 1fr; }
}

/* ─────────── 11. accesibilidad ─────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .cinta__pista{ flex-wrap:wrap; width:auto; }
  .cinta__tira[aria-hidden="true"]{ display:none; }
}