/* =============================================================================
   Quinta Los Mulatos — Hoja de estilos del tema
   Portada fielmente desde el sistema de diseño original (Tailwind v4 + shadcn).
   Todas las variables de color se conservan en OKLCH tal como en el original.
   Prefijo de clases del tema: .qlm-
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. Tokens de diseño (idénticos a src/styles.css del proyecto Lovable)
   --------------------------------------------------------------------------- */
:root {
  --radius: 0.25rem;
  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.375rem;

  --font-sans: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: "Italiana", Georgia, "Times New Roman", serif;

  --background: oklch(0.975 0.012 86);
  --foreground: oklch(0.25 0.015 82);
  --card: oklch(0.99 0.006 86);
  --card-foreground: oklch(0.25 0.015 82);
  --popover: oklch(0.99 0.006 86);
  --popover-foreground: oklch(0.25 0.015 82);
  --primary: oklch(0.31 0.047 153);
  --primary-foreground: oklch(0.98 0.01 86);
  --secondary: oklch(0.84 0.026 80);
  --secondary-foreground: oklch(0.31 0.047 153);
  --muted: oklch(0.93 0.018 82);
  --muted-foreground: oklch(0.47 0.025 75);
  --accent: oklch(0.53 0.039 105);
  --accent-foreground: oklch(0.98 0.01 86);
  --destructive: oklch(0.55 0.18 27);
  --destructive-foreground: oklch(0.98 0.01 86);
  --border: oklch(0.78 0.024 80);
  --input: oklch(0.78 0.024 80);
  --ring: oklch(0.53 0.039 105);

  --ivory: oklch(0.975 0.012 86);
  --warm-white: oklch(0.992 0.006 86);
  --sand: oklch(0.84 0.026 80);
  --olive: oklch(0.53 0.039 105);
  --forest: oklch(0.31 0.047 153);
  --forest-soft: oklch(0.37 0.044 150);
  --brown: oklch(0.42 0.036 57);
  --charcoal: oklch(0.25 0.015 82);
}

/* ---------------------------------------------------------------------------
   2. Reset ligero y base
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body.qlm-body {
  margin: 0;
  overflow-x: hidden;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  min-height: 100vh;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, legend { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }

::selection { background: var(--sand); color: var(--forest); }
a, button { -webkit-tap-highlight-color: transparent; }

/* ---------------------------------------------------------------------------
   3. Contenedor y utilidades base del original
   --------------------------------------------------------------------------- */
.site-container { width: min(100% - 2rem, 88rem); margin-inline: auto; }
@media (min-width: 640px) { .site-container { width: min(100% - 3rem, 88rem); } }
@media (min-width: 1024px) { .site-container { width: min(100% - 6rem, 88rem); } }

.eyebrow { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.nav-link { font-size: 0.67rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; transition: opacity 200ms ease; }
.nav-link:hover { opacity: 0.62; }
.focus-ring:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }

.font-display { font-family: var(--font-display); font-weight: 400; }
.font-sans { font-family: var(--font-sans); }
.italic { font-style: italic; }

/* Accesibilidad: salto al contenido y texto solo para lectores */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--forest); color: var(--warm-white);
  padding: 0.75rem 1.25rem; font-weight: 600;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------------------------------------------------------------------------
   4. Animaciones (idénticas al original + reduced motion)
   --------------------------------------------------------------------------- */
@keyframes qlm-reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.reveal { animation: qlm-reveal 0.8s ease-out both; }

@keyframes qlm-scroll-line { 0%, 100% { transform: scaleY(.25); transform-origin: top; opacity: .45; } 50% { transform: scaleY(1); transform-origin: top; opacity: 1; } }
.scroll-line { animation: qlm-scroll-line 2.4s ease-in-out infinite; }

@keyframes qlm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes qlm-zoom-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}