/* ==========================================================================
   Molde de sitios KYOSAI — estilos comunes a todos los negocios.
   Los COLORES no se tocan acá: salen de css/tema.css, que el generador
   (scripts/generar_sitio.py) escribe a partir de datos.toml.
   Botones, foco, aviso de demo y páginas legales vienen de Ferro & Sable.
   ========================================================================== */

:root {
  --serif: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-fluido: cubic-bezier(0.22, 0.61, 0.18, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--tinta); color: var(--papel); }

.wrap { width: min(100% - 40px, 1200px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Tipografía ---------- */
.titular {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.75rem, 11.5vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
}
h2, .t2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 7vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h3, .t3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.suave { color: var(--tinta-suave); }

/* ---------- Accesibilidad ---------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 0.75rem 1rem; background: var(--tinta); color: var(--papel); }
.skip-link:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.seccion--tinta :focus-visible, .pie :focus-visible { outline-color: var(--papel); }

/* ---------- Dato que falta (se ve a propósito) ---------- */
.falta {
  display: inline-block;
  padding: 0.05em 0.5em;
  border: 1.5px dashed currentColor;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 0.875em;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
}

/* ---------- Botones (relleno fluido de Ferro & Sable) ----------
   Un círculo nace donde entra el puntero (--x/--y los pone el JS)
   y crece hasta llenar el botón. */
.boton {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.85rem 1.6rem;
  border: 1.5px solid var(--tinta);
  border-radius: 999px;
  font: 600 1rem/1.2 var(--sans);
  text-decoration: none;
  color: var(--tinta);
  background: transparent;
  transition: color 0.5s var(--ease-fluido), border-color 0.5s var(--ease-fluido);
}
.boton::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--tinta);
  transform: translate(-50%, -50%);
  transition: width 0.7s var(--ease-fluido), height 0.7s var(--ease-fluido);
}
.boton:hover::before, .boton:focus-visible::before { width: var(--r, 420px); height: var(--r, 420px); }
.boton:hover, .boton:focus-visible { color: var(--papel); }
.boton:active { transform: scale(0.98); }
.boton svg { flex: none; }

.boton--lleno { background: var(--tinta); color: var(--papel); }
.boton--lleno::before { background: var(--marca); }
.boton--lleno:hover, .boton--lleno:focus-visible { color: var(--sobre-marca); }

.boton--chico { min-height: 44px; padding: 0.55rem 1.1rem; font-size: 0.9375rem; }

.seccion--tinta .boton, .pie .boton { border-color: var(--marca); color: var(--sobre-marca); background: var(--marca); }
.seccion--tinta .boton::before, .pie .boton::before { background: var(--papel); }
.seccion--tinta .boton:hover, .seccion--tinta .boton:focus-visible,
.pie .boton:hover, .pie .boton:focus-visible { color: var(--tinta); border-color: var(--papel); }

.enlace { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.enlace:hover { text-decoration-thickness: 3px; }

/* ---------- Franja de demo y cabecera ---------- */
.franja-demo { padding: 6px 20px; background: var(--tinta); color: var(--papel); font-size: 0.8125rem; line-height: 1.4; text-align: center; }

.cabecera { background: var(--logo-fondo); color: var(--tinta); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.cabecera__marca { display: flex; align-items: center; min-height: 44px; text-decoration: none; font-family: var(--serif); font-size: 1.5rem; }
.cabecera__marca img { height: 42px; width: auto; }
.cabecera__menu, .cabecera .boton { display: none; }
.cabecera__menu a { padding: 12px 0; font-weight: 500; text-decoration: none; }
.cabecera__menu a:hover { text-decoration: underline; text-underline-offset: 6px; }
@media (min-width: 900px) {
  .cabecera__fila { padding-block: 20px; }
  .cabecera__marca img { height: 54px; }
  .cabecera__menu { display: flex; gap: 36px; }
  .cabecera .boton { display: inline-flex; }
}

/* ---------- Nicho: el marco de las fotos ---------- */
.nicho { display: block; overflow: hidden; border-radius: var(--radio-foto); background: var(--marca-suave); }
.nicho img { width: 100%; height: 100%; object-fit: cover; }
.nicho--vacio {
  display: grid;
  place-items: center;
  padding: 28% 12px 12px;
  border: 1.5px dashed var(--tinta-suave);
  text-align: center;
  font-size: 0.8125rem;
}
.nicho--vacio .falta { border: 0; padding: 0; }

/* ---------- Portada ---------- */
.portada { background: var(--marca); color: var(--tinta); overflow: hidden; }
.portada__grid { display: grid; gap: 40px; padding-top: 28px; }
.portada__texto { max-width: 38rem; }
.linea { display: block; overflow: hidden; padding: 0.08em 0 0.16em; margin-bottom: -0.16em; }
.linea > span { display: block; }
.bajada { margin-top: 24px; max-width: 31rem; font-size: 1.125rem; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.estado { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 0.9375rem; font-weight: 500; }
.estado__punto { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--tinta); }
.estado__punto.abierto { background: var(--tinta); }
.aviso-datos { margin-top: 14px; max-width: 31rem; font-size: 0.8125rem; color: var(--tinta-suave); }
.portada__foto { align-self: end; width: min(100%, 440px); margin-inline: auto; aspect-ratio: 4 / 5; background: var(--papel); }
@media (min-width: 900px) {
  .portada__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 64px; padding-top: 56px; }
  .portada__texto { padding-bottom: 104px; }
  .portada__foto { width: 100%; }
}

/* Entrada de la portada: un solo momento, al cargar. Sin JS no se oculta nada. */
.js .linea > span { transform: translateY(110%); transition: transform 1.1s var(--ease); transition-delay: var(--d, 0ms); }
.js.lista .linea > span { transform: none; }
.js .portada__foto { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease-io) 0.2s; }
.js.lista .portada__foto { clip-path: inset(0 0 0 0); }

/* ---------- Secciones ---------- */
.seccion { padding-block: 64px; }
.seccion--marca { background: var(--marca); color: var(--tinta); }
.seccion--suave { background: var(--marca-suave); }
.seccion--tinta { background: var(--tinta); color: var(--papel); }
.seccion--tinta .suave { color: var(--papel-suave); }
@media (min-width: 900px) { .seccion { padding-block: 112px; } }

/* ---------- Productos ---------- */
.productos__cabeza { max-width: 40rem; }
.productos__cabeza p { margin-top: 16px; }
.grupo { margin-top: 48px; }
.grupo__titulo { padding-bottom: 12px; border-bottom: 1px solid var(--linea); }
.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; margin-top: 28px; }
@media (min-width: 640px) { .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 24px; } }
@media (min-width: 1000px) { .rejilla { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grupo { margin-top: 72px; } }

.producto { display: block; text-decoration: none; }
.producto__foto { aspect-ratio: 3 / 4; }
.producto__foto img { transition: transform 0.6s var(--ease); }
.producto:hover .producto__foto img { transform: scale(1.04); }
.producto__nombre { display: block; margin-top: 14px; font-family: var(--serif); font-size: 1.375rem; line-height: 1.15; }
.producto__desc { display: block; margin-top: 6px; font-size: 0.9375rem; line-height: 1.45; color: var(--tinta-suave); }
.producto__precio { display: block; margin-top: 8px; font-weight: 600; font-variant-numeric: tabular-nums; }
.producto__accion {
  display: inline-block;
  margin-top: 10px;
  padding-bottom: 2px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--marca-fuerte);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.producto:hover .producto__accion { text-decoration-color: currentColor; }
.productos__cierre { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--linea); }
.productos__cierre p { flex: 1 1 16rem; max-width: 30rem; }

/* ---------- Destacado ---------- */
.destacado__grid { display: grid; gap: 36px; }
.destacado__foto { aspect-ratio: 4 / 3; background: none; }
.destacado h2 { color: var(--marca); }
.destacado p { margin-top: 18px; max-width: 34rem; }
.destacado .boton { margin-top: 30px; }
@media (min-width: 900px) { .destacado__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 80px; } }

/* ---------- Datos útiles ---------- */
.utiles__grid { display: grid; gap: 40px; }
.util p { margin-top: 12px; max-width: 28rem; }
@media (min-width: 700px) { .utiles__grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 56px; } }

/* ---------- Galería deslizable (sin librerías) ---------- */
.galeria { overflow: hidden; }
.tira {
  margin-top: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(20px, calc((100vw - 1200px) / 2));
  scrollbar-width: thin;
  scrollbar-color: var(--tinta) transparent;
}
.tira__lista { display: flex; gap: 16px; width: max-content; padding: 4px max(20px, calc((100vw - 1200px) / 2)) 20px; }
.tira__lista li { flex: none; width: min(72vw, 300px); scroll-snap-align: start; }
.tira__foto { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 12px; background: var(--marca-suave); }
.tira__foto img { width: 100%; height: 100%; object-fit: cover; }
.tira figcaption { margin-top: 10px; font-size: 0.875rem; line-height: 1.45; color: var(--tinta-suave); }

/* ---------- Visitanos ---------- */
.visita__grid { display: grid; gap: 48px; }
.visita dl { margin-top: 28px; }
.visita dt { font-size: 0.9375rem; color: var(--tinta-suave); }
.visita dd { margin-top: 2px; font-size: 1.1875rem; font-weight: 500; }
.visita dd + dt { margin-top: 22px; }
.visita dd a { display: inline-block; padding: 10px 0; margin: -8px 0; }
.visita .boton { margin-top: 32px; }
.horario { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 1.0625rem; }
.horario th, .horario td { padding: 14px 0; border-bottom: 1px solid var(--linea); font-weight: 400; text-align: left; }
.horario td { text-align: right; font-variant-numeric: tabular-nums; }
.horario .cerrado { color: var(--tinta-suave); }
@media (min-width: 800px) { .visita__grid { grid-template-columns: 1fr 1fr; gap: 88px; } }

/* ---------- Pie ---------- */
.pie { padding-block: 64px 104px; background: var(--tinta); color: var(--papel); }
.pie__cierre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding-bottom: 56px; margin-bottom: 48px; border-bottom: 1px solid var(--linea-oscura); }
.pie__base { display: grid; gap: 28px; }
.pie__sello { display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; background: var(--logo-fondo); color: var(--sobre-marca); font-family: var(--serif); text-align: center; }
.pie__sello img { width: 104px; height: auto; }
.pie__legal { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.pie__legal a { display: inline-block; padding: 10px 0; }
.pie__nota { font-size: 0.875rem; color: var(--papel-suave); }
.pie__nota a { color: var(--papel); }
@media (min-width: 800px) {
  .pie { padding-block: 96px 72px; }
  .pie__base { grid-template-columns: auto 1fr; align-items: center; column-gap: 48px; }
  .pie__sello { grid-row: span 2; }
}

/* ---------- Botón fijo de WhatsApp ---------- */
.wa-flotante {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 50;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #000;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s var(--ease);
}
.wa-flotante:hover { transform: scale(1.06); }
.wa-flotante:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; box-shadow: 0 0 0 3px var(--papel); }

/* ---------- Páginas legales ---------- */
.legal-pagina { padding-block: 40px 96px; }
.migas { font-size: 0.9375rem; color: var(--tinta-suave); }
.legal { max-width: 46rem; margin-top: 24px; }
.legal h1 { margin-bottom: 24px; }
.legal h2 { margin: 3rem 0 1rem; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; scroll-margin-top: 2rem; }
.legal p, .legal li { line-height: 1.75; }
.legal p { margin: 0 0 1rem; }
.legal ul, .legal ol { padding-left: 1.25rem; margin: 0 0 1rem; }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal li { margin-bottom: 0.5rem; }
.legal strong { font-weight: 600; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal-meta { font-size: 0.875rem; color: var(--tinta-suave); }
.legal-note { padding: 1rem 1.25rem; border-left: 3px solid var(--tinta); background: var(--marca-suave); }
.legal-table { overflow-x: auto; margin: 0 0 1rem; }
.legal-table table { border-collapse: collapse; min-width: 560px; font-size: 0.9375rem; }
.legal-table th, .legal-table td { padding: 0.75rem 0.75rem 0.75rem 0; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.legal-table th { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .js .linea > span { transform: none; }
  .js .portada__foto { clip-path: none; }
}