/*
 * modern.css — CSS de próxima generación para Eternidad Theme
 *
 * Técnicas usadas:
 *  @layer         — Control de cascada por capas (Chrome 99+, FF 97+, Safari 15.4+)
 *  @property      — CSS Houdini: propiedades animables (Chrome 85+)
 *  clamp()        — Tipografía y espaciado fluido
 *  container queries — Responsive basado en contenedor (Chrome 105+)
 *  color-mix()    — Mezcla de colores nativa CSS (Chrome 111+)
 *  :has()         — Parent selector (Chrome 105+, Safari 15.4+)
 *  CSS subgrid    — Grid anidado (Chrome 117+)
 *  prefers-*      — Accesibilidad y preferencias del sistema
 */

/* ============================================================
   @property — Propiedades CSS animables (Houdini)
   Permite animar Custom Properties entre valores numéricos
   ============================================================ */
@property --et-anim-opacity {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

@property --et-anim-translate-y {
    syntax: '<length>';
    inherits: false;
    initial-value: 24px;
}

@property --et-card-elevation {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

/* ============================================================
   @layer — Organización de cascada en capas named
   Orden de precedencia: reset < base < tokens < layout <
                         components < utilities < overrides
   ============================================================ */
@layer reset, base, tokens, layout, components, utilities, overrides;

/* ─── CAPA: reset ─────────────────────────────────────────── */
@layer reset {
    *, *::before, *::after {
        box-sizing: border-box;
        margin:     0;
        padding:    0;
    }

    html {
        font-size:       16px;
        scroll-behavior: smooth;
        text-size-adjust: none;
        -webkit-text-size-adjust: none;
    }

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

    input, button, textarea, select {
        font: inherit;
    }

    p, h1, h2, h3, h4, h5, h6 {
        overflow-wrap: break-word;
    }

    ol[role="list"], ul[role="list"] {
        list-style: none;
    }
}

/* ─── CAPA: base ──────────────────────────────────────────── */
@layer base {
    body {
        font-family:             var(--et-font-body, 'Lato', sans-serif);
        background-color:        var(--et-color-bg);
        color:                   var(--et-color-text);
        line-height:             1.7;
        transition:
            background-color 0.35s ease,
            color 0.35s ease;
        /* Modern font rendering */
        -webkit-font-smoothing:  antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering:          optimizeLegibility;
    }

    /* Tipografía fluida con clamp() */
    h1 { font-size: clamp(2.5rem,  2rem  + 2.5vw, 4rem);   }
    h2 { font-size: clamp(1.75rem, 1.4rem + 1.75vw, 2.75rem); }
    h3 { font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2rem); }
    h4 { font-size: clamp(1.125rem, 0.9rem + 1.1vw, 1.5rem); }
    h5 { font-size: clamp(1rem,     0.85rem + 0.75vw, 1.25rem); }
    h6 { font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1rem); }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--et-font-heading, serif);
        line-height: 1.2;
        font-weight: 700;
        color:       var(--et-color-primary);
    }

    /* Headings en variantes oscuras */
    .et-variant-dark-luxury h1,
    .et-variant-dark-luxury h2,
    .et-variant-dark-luxury h3,
    .et-variant-grey-modern h1,
    .et-variant-grey-modern h2,
    .et-variant-grey-modern h3 {
        color: var(--et-color-text);
    }

    a {
        color:      var(--et-color-accent);
        text-decoration: none;
        transition: color 0.2s ease;
    }

    a:hover {
        color: var(--et-color-accent-dark);
    }

    /* Focus visible moderno */
    :focus-visible {
        outline:        3px solid var(--et-color-accent);
        outline-offset: 3px;
        border-radius:  2px;
    }
}

/* ─── CAPA: tokens ────────────────────────────────────────── */
@layer tokens {
    /* Tokens de espaciado fluido */
    :root {
        --space-2xs: clamp(0.25rem,  0.2rem  + 0.25vw,  0.375rem);
        --space-xs:  clamp(0.5rem,   0.4rem  + 0.5vw,   0.75rem);
        --space-sm:  clamp(0.75rem,  0.6rem  + 0.75vw,  1rem);
        --space-md:  clamp(1rem,     0.8rem  + 1vw,     1.5rem);
        --space-lg:  clamp(1.5rem,   1.2rem  + 1.5vw,   2.25rem);
        --space-xl:  clamp(2rem,     1.6rem  + 2vw,     3rem);
        --space-2xl: clamp(3rem,     2.4rem  + 3vw,     4.5rem);
        --space-3xl: clamp(4rem,     3.2rem  + 4vw,     6rem);

        /* Radios */
        --radius-sm:   4px;
        --radius-md:   8px;
        --radius-lg:   16px;
        --radius-xl:   24px;
        --radius-full: 9999px;

        /* Durations */
        --duration-fast:   150ms;
        --duration-normal: 300ms;
        --duration-slow:   500ms;
        --duration-slower: 800ms;

        /* Easings */
        --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
        --ease-in:        cubic-bezier(0.64, 0, 0.78, 0);
        --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
        --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

        /* Z-index scale */
        --z-below:   -1;
        --z-base:     0;
        --z-raised:   1;
        --z-dropdown: 100;
        --z-sticky:   200;
        --z-overlay:  300;
        --z-modal:    400;
        --z-toast:    500;
        --z-top:      9999;
    }
}

/* ─── CAPA: layout ────────────────────────────────────────── */
@layer layout {
    /* Contenedor con padding fluido */
    .container {
        width:     100%;
        max-width: 1200px;
        margin:    0 auto;
        padding-inline: clamp(1rem, 4vw, 2rem);
    }

    .container--wide {
        max-width: 1440px;
    }

    .container--narrow {
        max-width: 760px;
    }

    /* Grid fluido auto-fit */
    .auto-grid {
        display: grid;
        grid-template-columns: repeat(
            auto-fill,
            minmax(min(var(--auto-grid-min, 280px), 100%), 1fr)
        );
        gap: var(--auto-grid-gap, var(--space-md));
    }

    /* Stack vertical (Flexbox layout primitivo) */
    .stack {
        display:        flex;
        flex-direction: column;
        gap:            var(--stack-gap, var(--space-md));
    }

    /* Cluster horizontal */
    .cluster {
        display:   flex;
        flex-wrap: wrap;
        gap:       var(--cluster-gap, var(--space-sm));
        align-items: var(--cluster-align, center);
    }

    /* Repel: dos items en extremos */
    .repel {
        display:         flex;
        align-items:     center;
        justify-content: space-between;
        flex-wrap:       wrap;
        gap:             var(--repel-gap, var(--space-sm));
    }

    /* Sidebar layout */
    .with-sidebar {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-lg);
    }

    .with-sidebar > :first-child {
        flex-basis: var(--sidebar-width, 320px);
        flex-grow:  1;
    }

    .with-sidebar > :last-child {
        flex-basis: 0;
        flex-grow:  999;
        min-width:  min(60%, var(--sidebar-content-min, 400px));
    }

    /* Section wrapper  */
    .section {
        padding-block: var(--space-3xl);
    }

    .section--sm {
        padding-block: var(--space-xl);
    }
}

/* ─── CAPA: components ────────────────────────────────────── */
@layer components {

    /* ── Tarjetas con Container Queries ────────────── */
    .et-card {
        container-type: inline-size;
        container-name: card;

        background:    var(--et-color-card-bg);
        border:        1px solid var(--et-color-card-border);
        border-radius: var(--radius-md);
        overflow:      hidden;

        --et-card-elevation: 0;
        box-shadow: 0 calc(var(--et-card-elevation) * 2px + 2px)
                    calc(var(--et-card-elevation) * 8px + 8px)
                    rgba(0, 0, 0, calc(var(--et-card-elevation) * 0.08 + 0.06));

        transition:
            box-shadow   var(--duration-normal) var(--ease-out),
            transform    var(--duration-normal) var(--ease-out),
            --et-card-elevation var(--duration-normal) var(--ease-out);
    }

    .et-card:hover {
        --et-card-elevation: 3;
        transform: translateY(-4px);
    }

    /* Container query: layout interno de la tarjeta */
    @container card (min-width: 380px) {
        .et-card-inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-sm);
        }
    }

    .et-card-body {
        padding: var(--space-md);
    }

    /* ── Botones modernos ───────────────────────────── */
    .btn {
        display:         inline-flex;
        align-items:     center;
        justify-content: center;
        gap:             0.5em;
        padding:         0.75em 1.75em;
        border-radius:   var(--radius-sm);
        font-family:     var(--et-font-body, sans-serif);
        font-size:       clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
        font-weight:     700;
        letter-spacing:  0.06em;
        text-transform:  uppercase;
        border:          2px solid transparent;
        cursor:          pointer;
        text-decoration: none;
        transition:
            background-color var(--duration-fast) var(--ease-out),
            border-color     var(--duration-fast) var(--ease-out),
            color            var(--duration-fast) var(--ease-out),
            transform        var(--duration-fast) var(--ease-spring),
            box-shadow       var(--duration-fast) var(--ease-out);
        white-space: nowrap;
        user-select: none;
    }

    .btn:hover         { transform: translateY(-2px); }
    .btn:active        { transform: translateY(0); }

    .btn-primary {
        background-color: var(--et-color-accent);
        color:            var(--et-color-primary);
        border-color:     var(--et-color-accent);
    }

    .btn-primary:hover {
        background-color: var(--et-color-accent-dark);
        border-color:     var(--et-color-accent-dark);
        box-shadow:       0 6px 20px color-mix(in oklch, var(--et-color-accent) 40%, transparent);
    }

    .btn-outline {
        background-color: transparent;
        color:            var(--et-color-accent);
        border-color:     var(--et-color-accent);
    }

    .btn-outline:hover {
        background-color: var(--et-color-accent);
        color:            var(--et-color-primary);
    }

    .btn-ghost {
        background:  transparent;
        color:       var(--et-color-text);
        border:      none;
    }

    .btn-ghost:hover {
        background: color-mix(in oklch, var(--et-color-primary) 8%, transparent);
    }

    /* ── Divider ────────────────────────────────────── */
    .et-divider {
        width:      60px;
        height:     3px;
        background: linear-gradient(90deg, var(--et-color-accent), var(--et-color-accent-dark));
        margin:     var(--space-sm) auto;
        border:     none;
        border-radius: var(--radius-full);
    }

    .et-divider--left { margin-left: 0; }

    /* ── Badge ─────────────────────────────────────── */
    .badge {
        display:         inline-flex;
        padding:         0.25em 0.75em;
        border-radius:   var(--radius-full);
        font-size:       0.75rem;
        font-weight:     700;
        letter-spacing:  0.04em;
        text-transform:  uppercase;
        background:      color-mix(in oklch, var(--et-color-accent) 20%, transparent);
        color:           var(--et-color-accent);
    }

    /* ── Selector de variante flotante ─────────────── */
    .et-variant-switcher {
        position:        fixed;
        bottom:          var(--space-md);
        right:           var(--space-md);
        z-index:         var(--z-top);
        display:         flex;
        flex-direction:  column;
        align-items:     center;
        gap:             var(--space-xs);
        padding:         var(--space-sm);
        background:      color-mix(in oklch, var(--et-color-primary) 80%, transparent);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border:          1px solid color-mix(in oklch, white 20%, transparent);
        border-radius:   var(--radius-lg);
        box-shadow:      0 8px 32px rgba(0,0,0,0.3);
    }

    .et-variant-switcher .switcher-label {
        font-size:      0.65rem;
        font-weight:    700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color:          color-mix(in oklch, white 60%, transparent);
    }

    .theme-dot {
        width:         20px;
        height:        20px;
        border-radius: var(--radius-full);
        border:        2px solid color-mix(in oklch, white 30%, transparent);
        cursor:        pointer;
        transition:
            transform     var(--duration-fast) var(--ease-spring),
            border-color  var(--duration-fast) var(--ease-out),
            box-shadow    var(--duration-fast) var(--ease-out);
        padding:       0;
        appearance:    none;
    }

    .theme-dot:hover {
        transform:    scale(1.3);
        border-color: color-mix(in oklch, white 70%, transparent);
    }

    .theme-dot.active {
        transform:    scale(1.2);
        border-color: white;
        box-shadow:   0 0 0 3px color-mix(in oklch, white 25%, transparent);
    }

    .dot-classic      { background: #c9a96e; }
    .dot-dark-luxury  { background: #0d1b2a; border-color: #c9a96e; }
    .dot-grey-modern  { background: #3a3a3a; border-color: #8eb0d0; }
}

/* ─── CAPA: utilities ─────────────────────────────────────── */
@layer utilities {
    /* Visualmente oculto pero accesible para lectores de pantalla */
    .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;
    }

    .text-center  { text-align: center; }
    .text-left    { text-align: left; }
    .text-muted   { color: var(--et-color-text-muted); }
    .text-accent  { color: var(--et-color-accent); }
    .text-primary { color: var(--et-color-primary); }

    .mt-auto { margin-top: auto; }
    .mb-auto { margin-bottom: auto; }
}

/* ─── CAPA: overrides ─────────────────────────────────────── */
@layer overrides {
    /* Elementor */
    .elementor-page .site-main          { padding: 0; }
    .elementor-template-canvas .site-header,
    .elementor-template-canvas .site-footer { display: none; }

    /* Respetar prefers-reduced-motion */
    @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;
        }

        .et-will-animate {
            opacity:   1 !important;
            transform: none !important;
        }
    }

    /* Modo oscuro del sistema (cuando no hay variante activa) */
    @media (prefers-color-scheme: dark) {
        body:not(.et-variant-classic) {
            color-scheme: dark;
        }
    }

    /* Print */
    @media print {
        .site-header,
        .site-footer,
        .et-variant-switcher { display: none !important; }
        body { background: #fff; color: #000; }
    }
}

/* ============================================================
   ANIMACIONES DE ENTRADA
   Usando @property para que la transición sea animable
   ============================================================ */
.et-will-animate {
    opacity:   var(--et-anim-opacity);
    transform: translateY(var(--et-anim-translate-y));
    transition:
        opacity            var(--duration-slow) var(--ease-out),
        transform          var(--duration-slow) var(--ease-out),
        --et-anim-opacity  var(--duration-slow) var(--ease-out),
        --et-anim-translate-y var(--duration-slow) var(--ease-out);
}

.et-in-view {
    --et-anim-opacity:     1;
    --et-anim-translate-y: 0px;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS COMPLETOS
   (Mobile-first)
   Usando lógica moderna sin max-width donde es posible
   ============================================================ */

/* --- Base: mobile (<480px) --- */

/* --- Small: ≥480px --- */
@media (min-width: 480px) {
    .hide-mobile { display: revert; }
}

/* --- Medium: ≥768px (tablet) --- */
@media (min-width: 768px) {
    .nav-primary   { display: block !important; }
    .menu-toggle   { display: none; }

    .et-variant-switcher {
        bottom: 32px;
        right:  32px;
    }
}

/* --- Large: ≥1024px (desktop) --- */
@media (min-width: 1024px) {
    .with-sidebar { flex-wrap: nowrap; }
}

/* --- XLarge: ≥1280px --- */
@media (min-width: 1280px) { }

/* --- 2XLarge: ≥1536px --- */
@media (min-width: 1536px) { }

/* ============================================================
   :has() — Parent Selector moderno
   Aplica estilos al contenedor cuando contiene ciertos hijos
   ============================================================ */

/* Imagen en card: estirar al 100% */
.et-card:has(> .et-card-thumbnail) .et-card-body {
    padding-top: var(--space-sm);
}

/* Header con menú abierto */
body:has(.nav-primary.is-open) {
    overflow: hidden;
}

/* Formulario válido */
.et-input:has(:valid):not(:has(:invalid))::before {
    content: '✓';
    color: #4caf50;
}