/* ====================================================================
   CASA ADORATI
   Idea: una vidriera del centro. Arriba el toldo a rayas rojas, el cartel
   real del local, y la esquina dibujada como croquis: "estamos acá".
   Rojo de cartel, negro y blanco; tipografía condensada como el logo.
   ==================================================================== */
:root {
  --rojo: #D9261C;
  --rojo-oscuro: #B21E16;
  --negro: #1A1818;
  --blanco: #FFFFFF;
  --hueso: #F2EEE9;
  --gris: #5C5752;
  --asfalto: #D8D3CC;
  --wa: #25D366;

  --fuente-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --fuente: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { font-family: var(--fuente); background: var(--blanco); color: var(--negro); line-height: 1.55; font-size: 1.0625rem; }
a { color: inherit; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--negro); outline-offset: 3px; }

.contenedor { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 1.1rem; }

/* Toldo: rayas rojas y blancas con el borde de ondas */
.toldo {
  height: 56px;
  background: repeating-linear-gradient(90deg, var(--rojo) 0 36px, var(--blanco) 36px 72px);
  -webkit-mask: radial-gradient(18px at 18px 100%, #0000 98%, #000) 0 0 / 36px 100%;
          mask: radial-gradient(18px at 18px 100%, #0000 98%, #000) 0 0 / 36px 100%;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.08));
}

/* ====================================================================
   PRESENTACIÓN
   ==================================================================== */
.inicio { padding: 1.5rem 0 3rem; }
.inicio-grilla { display: grid; gap: 1.6rem; align-items: center; }
.cartel { width: 100%; max-width: 560px; }
.inicio h1 {
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 9vw, 4rem);
  line-height: 0.98;
  text-transform: none;
  max-width: 16ch;
}
.pago { font-size: 1.25rem; margin: 0.9rem 0 1.4rem; }
.pago strong { color: var(--rojo); }
.boton-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0.7rem 1.4rem;
  background: var(--wa);
  color: #0B2915;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
}
.boton-wa:hover { background: #1FB855; }
@media (min-width: 880px) {
  .inicio { padding: 3rem 0 4.5rem; }
  .inicio-grilla { grid-template-columns: 1.1fr 1fr; gap: 3.5rem; }
}

/* ====================================================================
   AMBIENTES: palabras grandes en fila, como letras de vidriera
   ==================================================================== */
.ambientes { background: var(--rojo); color: var(--blanco); padding: 3rem 0 3.4rem; }
h2 { font-family: var(--fuente-display); font-weight: 800; font-size: clamp(2rem, 6vw, 3rem); line-height: 1; }
.ambientes .bajada { max-width: 46ch; margin: 0.6rem 0 1.6rem; color: #FFE3E0; }
.ambientes-lista { display: flex; flex-wrap: wrap; gap: 0.2rem 1.6rem; }
.ambientes-lista a {
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: clamp(2rem, 8vw, 3.6rem);
  line-height: 1.15;
  text-decoration: none;
  border-bottom: 3px solid rgba(255, 255, 255, 0.35);
}
.ambientes-lista a:hover { border-bottom-color: var(--blanco); }

/* ====================================================================
   LA ESQUINA
   ==================================================================== */
.esquina { padding: 3.4rem 0; background: var(--hueso); }
.esquina-grilla { display: grid; gap: 2rem; align-items: center; }
.croquis { width: 100%; max-width: 380px; height: auto; }
.manzana-fondo { fill: var(--asfalto); }
.manzana { fill: var(--blanco); }
.local { fill: var(--rojo); }
.linea-calle { stroke: var(--blanco); stroke-width: 2; stroke-dasharray: 10 10; }
.calle { font-family: var(--fuente-display); font-weight: 600; font-size: 17px; fill: var(--gris); }
.local-texto { font-family: var(--fuente-display); font-weight: 800; font-size: 13px; fill: var(--blanco); }
.esquina h2 { margin-bottom: 0.9rem; max-width: 14ch; }
.esquina p { margin-bottom: 0.45rem; color: var(--gris); }
.esquina p strong { color: var(--negro); }
.esquina p a { color: var(--negro); font-weight: 600; text-underline-offset: 3px; }
.boton-contorno { display: inline-flex; align-items: center; min-height: 48px; margin-top: 0.8rem; padding: 0.6rem 1.3rem; border: 2px solid var(--negro); border-radius: 6px; font-weight: 600; text-decoration: none; }
.boton-contorno:hover { background: var(--blanco); }
@media (min-width: 860px) { .esquina-grilla { grid-template-columns: 380px 1fr; gap: 4rem; } }

.pie { background: var(--negro); color: #BDB7B0; padding: 2rem 0 6rem; font-size: 0.92rem; }
.pie p + p { margin-top: 0.3rem; }
.demo-aviso { font-style: italic; }
.credito a { color: var(--blanco); font-weight: 600; }

.flotante {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem;
  background: var(--wa);
  color: #0B2915;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.flotante span { display: none; }
@media (min-width: 640px) { .flotante { padding: 0.85rem 1.25rem; } .flotante span { display: inline; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }