/*
  Herrera Inmobiliaria — Sistema visual (Fase 2)
  base.css: reset, variables de marca (:root) y estilos base de elementos.
  Este archivo es la base común para futuras páginas (propiedades.html, fichas).
*/

/* ---------- Reset mínimo ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

html {
    /* El desplazamiento entre anclas lo controla smooth-scroll.js (offset +
       easing propios). Se deja "auto" a propósito: combinarlo con
       "smooth" nativo generaría doble interpolación. Si JavaScript no
       carga, el salto nativo instantáneo sigue funcionando igual. */
    scroll-behavior: auto;
}

img,
svg,
video {
    max-width: 100%;
    display: block;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
}

a {
    color: inherit;
}

/* ---------- Tokens de marca ---------- */
:root {
    /* Color — base */
    --color-verde: #8CC63F;
    --color-verde-oscuro: #6FA82E; /* hover / activo sobre verde */
    --color-verde-suave: #EEF6E3; /* fondo muy claro derivado del verde, uso puntual */
    --color-carbon: #2D2C2C;
    --color-carbon-alt: #3A3937; /* variante clara del carbón, para transiciones/paneles */
    --color-blanco: #FFFFFF;
    --color-gris: #CCCCCC;

    /* Color — funcionales derivados */
    --color-fondo-claro: #F6F6F4; /* fondo claro cálido, alternativa al blanco puro */
    --color-borde: #DEDEDA; /* bordes finos sobre fondo claro */
    --color-borde-oscuro: rgba(255, 255, 255, 0.18); /* bordes finos sobre fondo carbón */
    --color-texto: var(--color-carbon);
    --color-texto-secundario: #5C5C59; /* AA sobre blanco (~6.3:1) */
    --color-texto-invertido: var(--color-blanco);
    --color-texto-invertido-secundario: rgba(255, 255, 255, 0.72);
    --color-focus: var(--color-carbon);
    --color-focus-invertido: var(--color-verde);

    /* Tipografía */
    --font-base: "Montserrat", sans-serif;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --fs-hero: clamp(1.9rem, 1.35rem + 2.2vw, 2.75rem);
    --fs-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
    --fs-h3: clamp(1.1rem, 1rem + 0.5vw, 1.375rem);
    --fs-h4: 1.05rem;
    --fs-body: 1rem;
    --fs-body-lg: 1.125rem;
    --fs-small: 0.875rem;
    --fs-label: 0.75rem;

    --lh-heading: 1.15;
    --lh-body: 1.6;
    --ls-label: 0.08em;

    /* Espaciado */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* Radios y bordes */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --border-thin: 1px solid var(--color-borde);
    --border-thin-invertido: 1px solid var(--color-borde-oscuro);

    /* Contenedor */
    --container-max: 1280px;
    --container-padding: 20px;

    /* Transiciones */
    --transition-fast: 150ms ease;
    --transition-base: 220ms ease;
    /* Hover de cards (propiedades, categorías): curva y duración propias,
       independientes de las animaciones de entrada al scroll (que viven
       en css/animations.css). */
    --hover-duration: 650ms;
    --hover-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --transition-hover: var(--hover-duration) var(--hover-ease);
    /* Transición dedicada a botones (.btn): más perceptible que --transition-base,
       sin afectar nav/menú/otros elementos que comparten ese token. */
    --btn-duration: 450ms;
    --btn-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --transition-btn: var(--btn-duration) var(--btn-ease);

    /* z-index */
    --z-header: 100;
    --z-menu: 90;
    --z-chat: 50;

    /* Anclas internas: compensa el header sticky (~85px en desktop) más
       aire de respiro debajo del header. Reutilizado por scroll-margin-top
       (fallback nativo) y por smooth-scroll.js (fuente de verdad única). */
    --anchor-offset: 108px;
}

@media (min-width: 768px) {
    :root {
        --container-padding: 32px;
    }
}

@media (min-width: 1024px) {
    :root {
        --container-padding: 48px;
    }
}

@media (max-width: 959px) {
    :root {
        /* Header ~4px más bajo en mobile/tablet (logo de 52px vs 56px). */
        --anchor-offset: 104px;
    }
}

/* ---------- Base tipográfica ---------- */
body {
    font-family: var(--font-base);
    font-weight: var(--fw-regular);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-texto);
    background-color: var(--color-blanco);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-base);
    line-height: var(--lh-heading);
    color: var(--color-texto);
    margin: 0;
}

h1 {
    font-size: var(--fs-hero);
    font-weight: var(--fw-bold);
}

h2 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-semibold);
}

h3 {
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
}

h4 {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
}

p {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    color: var(--color-texto);
}

.eyebrow {
    display: inline-block;
    font-size: var(--fs-label);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--color-texto-secundario);
}

.text-secundario {
    color: var(--color-texto-secundario);
}

/* ---------- Utilidades ---------- */
/* Bloquea el scroll de fondo mientras hay un modal abierto (lightbox de
   galería). Utilidad genérica, no exclusiva de una ficha. */
.no-scroll {
    overflow: hidden;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Wrapper de layout para cards ----------
   propiedad-card y categoria-modulo ya usan `transform` en :hover/:focus.
   Este wrapper los envuelve para que la animación de entrada al scroll
   (.motion-item, ver css/animations.css) se aplique acá afuera y nunca
   compita por la propiedad `transform` con el hover del elemento interior. */
.card-reveal {
    display: flex;
    width: 100%;
    height: 100%;
}

.card-reveal > .propiedad-card,
.card-reveal > .categoria-modulo {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

/* ---------- Accesibilidad: foco visible en toda la web ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.on-dark a:focus-visible,
.on-dark button:focus-visible,
.on-dark [tabindex]:focus-visible {
    outline-color: var(--color-focus-invertido);
}

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

    /* Salvaguarda adicional: motion.js ya evita agregar .motion-enabled si
       prefers-reduced-motion está activo, pero esta regla cubre el caso de
       que el usuario cambie la preferencia del SO en medio de la sesión.
       La regla equivalente para .motion-item vive en css/animations.css. */
}