/* ===================================================================
   Siamés Coffee — hoja de estilo global
   Migrado del export de Claude Design. Los estilos de maquetación
   siguen inline en index.html (fieles al diseño original); aquí vive
   solo lo que necesita un selector real: reset, tipografías,
   keyframes, estados :hover y el componente de imagen.
   =================================================================== */

/* ---- Reset / base (heredado del <helmet> del export) -------------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #352A1F; overflow-x: hidden; }

/* El enlace "Contacto" del nav apunta a /eventos#enquire — deja hueco
   para la barra fija al saltar al formulario. */
#enquire { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; opacity: .7; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: #C4DE58; color: #31473A; }

/* ---- Keyframes --------------------------------------------------- */
@keyframes sm-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes sm-blink   { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes sm-drop    { from { transform: translateY(-14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes sm-live    { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .2; transform: scale(.68); } }

/* Punto "en vivo" del badge CONFIRMADO — verde que late despacio. */
.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #31473A;
  animation: sm-live 2.4s ease-in-out infinite;
}

@media (max-width: 720px) { [data-menu-note] { display: none; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; } }

/* ---- Vista ----------------------------------------------------- */
/* Cada página (index.html / carta.html / eventos.html / regalo.html
   / privacidad.html / cookies.html / terminos.html) sirve UNA sola
   .view. #site[data-view] lo sigue leyendo main.js para el color de
   la barra de navegación (ver navDark en main.js).                 */
.view { display: block; }

/* ---- Páginas legales — prosa legible sobre fondo crema --------- */
.legal { max-width: 70ch; margin: 0 auto; }
.legal h2 {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: -.01em;
  margin: clamp(30px, 4.5vw, 48px) 0 0;
}
.legal p { font-size: 15px; line-height: 1.75; opacity: .82; margin: 10px 0 0; }
.legal a { text-decoration: underline; text-underline-offset: 2px; }
.legal code {
  font-family: 'DM Mono', monospace;
  font-size: .9em;
  background: rgba(53, 42, 31, .07);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ---- Estados :hover (antes atributos style-hover del runtime) --- */
/* !important reproduce el comportamiento del runtime: estos ganan
   siempre al style="" inline del propio elemento.                  */
.hov-green:hover     { background: #31473A !important; color: #F9F2EA !important; border-color: #31473A !important; }
.hov-lime-31:hover   { background: #C4DE58 !important; color: #31473A !important; }
.hov-lime-35:hover   { background: #C4DE58 !important; color: #352A1F !important; border-color: #C4DE58 !important; }
.menu-row:hover      { padding-left: 18px !important; }

/* ===================================================================
   Componente de imagen  ->  <div class="img" data-slot data-label>
   - Con foto:  <img> hija en object-fit:cover ocupando el hueco.
   - Sin foto:  main.js le añade .is-empty y se ve el marco punteado
                con la etiqueta del slot (data-label).
   Los ficheros van en /images. Ver images/README.md para el mapa
   completo de slots, nombres y proporciones recomendadas.
   =================================================================== */
.img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;          /* solo actúa si el contenedor no fija altura */
  overflow: hidden;
}
.img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.img.is-empty {
  border: 1px dashed color-mix(in srgb, currentColor 50%, transparent);
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.img.is-empty > img { display: none; }

.img.is-empty::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(50% - 20px);
  width: 26px;
  height: 26px;
  transform: translateX(-50%);
  opacity: .45;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>') center / contain no-repeat;
}
.img.is-empty::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 16px 16px;
  margin-top: 26px;
  text-align: center;
  font: 12px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .04em;
  color: currentColor;
  opacity: .6;
}