/* ==========================================================================
   KOTA — custom.css (Tailwind/Flowbite + Thymeleaf)
   Paleta estricta vía tokens: --brand-primario/secundario/fondo/surface/borde
   Tipos: Body Inter (via --font-sans), Headings Sora (forzado aquí)
   ========================================================================== */
/* --- KOTA: asegurar Inter para texto y Sora para headings --- */
:root{
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-heading: "Sora", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Base (texto) */
html, body{
    font-family: var(--font-sans), serif !important;
}

/* Fuerza en elementos típicos de texto/UI (evita que hereden Sora por accidente) */
:where(p, li, a, span, small, label, input, textarea, select, button){
    font-family: var(--font-sans) !important;
}

/* Headings */
:where(h1,h2,h3,h4,h5,h6){
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
}

/* ---------- 1) Tokens auxiliares (sin salir de paleta) ---------- */
:root{
    --font-heading: "Sora", var(--font-sans);

    /* Sombras “premium” SOLO con Carbono en rgba */
    --shadow-sm: 0 8px 22px rgba(26, 26, 26, 0.10);
    --shadow-md: 0 14px 36px rgba(26, 26, 26, 0.14);
    --shadow-lg: 0 22px 60px rgba(26, 26, 26, 0.18);

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;

    --t-fast: 160ms cubic-bezier(.2,.8,.2,1);
    --t-med: 240ms cubic-bezier(.2,.8,.2,1);
}

html { scroll-behavior: smooth; }
::selection{
    background: rgba(197, 160, 89, 0.35); /* Oro */
    color: var(--brand-primario);
}

/* ---------- 2) Tipografía global (Sora en títulos, Inter en body) ---------- */
/* Tailwind aplica font-extrabold/font-bold por clase; esto lo pisa con elegancia */
h1,h2,h3,h4,h5,h6{
    font-family: var(--font-heading) !important;
    font-weight: 700 !important; /* “Sora Bold” */
    letter-spacing: -0.02em;
}

body{
    background: var(--brand-fondo);
    color: var(--text-primary);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Links: oro, subrayado fino “premium” */
a{
    transition: color var(--t-fast), background-color var(--t-fast),
    box-shadow var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}
a:hover{ color: var(--brand-secundario); }
a:focus-visible{
    outline: 2px solid var(--brand-secundario);
    outline-offset: 2px;
    border-radius: 10px;
}

/* ---------- 3) Header / Menú (exacto a tu markup) ---------- */
/* Base */
header.site-header{
    transition: background-color var(--t-med), box-shadow var(--t-med),
    backdrop-filter var(--t-med), border-color var(--t-med);
    border-bottom-color: transparent; /* se ajusta por estado */
}

/* Over-hero (arriba) -> transparente, texto claro */
header.site-header--over-hero:not(.scrolled){
    background: transparent !important;
    box-shadow: none !important;
    border-bottom-color: transparent !important;
}

/* Over-hero: links en “blanco humo” (no blanco puro) */
header.site-header--over-hero:not(.scrolled) .menu-link{
    color: rgba(245, 245, 245, 0.92) !important;
}

/* Over-hero hover: pill “blanco humo” con texto carbono */
header.site-header--over-hero:not(.scrolled) .menu-link:hover{
    background-color: rgba(245, 245, 245, 0.92) !important;
    color: var(--brand-primario) !important;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* Estado scrolled (y header no-over-hero): sólido elegante */
header.site-header.scrolled,
header.site-header:not(.site-header--over-hero){
    background: rgba(245, 245, 245, 0.92) !important; /* Blanco Humo */
    border-bottom-color: rgba(140, 140, 140, 0.35) !important; /* Gris Hormigón */
    box-shadow: var(--shadow-sm) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* En scrolled: links normales + hover con “tinte oro” */
header.site-header.scrolled .menu-link,
header.site-header:not(.site-header--over-hero) .menu-link{
    color: var(--text-primary) !important;
}
header.site-header.scrolled .menu-link:hover,
header.site-header:not(.site-header--over-hero) .menu-link:hover{
    background-color: rgba(197, 160, 89, 0.14) !important; /* Oro suave */
    box-shadow: 0 10px 25px rgba(26, 26, 26, 0.12);
    transform: translateY(-1px);
}

/* Ajuste de forma (tu markup usa rounded-lg; lo hacemos más “pill”) */
header.site-header .menu-link{
    border-radius: 999px !important;
    padding: 10px 12px !important;
    letter-spacing: -0.01em;
}

/* Botón móvil: evitar negro puro (bg-black/5, ring-black/10) */
header.site-header #menuToggle{
    border-radius: 999px !important;
    transition: background-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

/* Móvil sobre hero: botón con estética “glass” */
header.site-header--over-hero:not(.scrolled) #menuToggle{
    color: rgba(245, 245, 245, 0.92) !important;
    background: rgba(26, 26, 26, 0.18) !important;
    box-shadow: 0 0 0 1px rgba(245, 245, 245, 0.18) inset !important;
}
header.site-header--over-hero:not(.scrolled) #menuToggle:hover{
    background: rgba(26, 26, 26, 0.26) !important;
    transform: translateY(-1px);
}

/* Panel móvil: fondo blanco humo + borde hormigón */
header.site-header #mobileMenu{
    background: rgba(245, 245, 245, 0.98) !important;
    border-top-color: rgba(140, 140, 140, 0.35) !important;
}

/* =========================================================
   Menú desktop: centrar items + hacerlos un poco más pequeños
   ========================================================= */
@media (min-width: 768px){

    /* 1) El contenedor principal del header (logo + menu) */
    header.site-header nav > div{
        justify-content: flex-start !important; /* en vez de "space-between" */
        gap: 18px; /* espacio entre logo y zona de menú */
    }

    /* 2) El bloque de items desktop es el 2º hijo de ese contenedor */
    header.site-header nav > div > div:nth-child(2){
        flex: 1 1 auto;              /* ocupa el espacio restante */
        justify-content: center;     /* centra los links */
        gap: 4px;                    /* ajusta separación entre items */
    }

    /* 3) Links: más pequeños y centrados (evita efecto “izquierda” en hover) */
    header.site-header .menu-link{
        font-size: 13px !important;  /* antes era ~14px (text-sm) */
        padding: 8px 10px !important;/* antes 10px 12px */
        display: inline-flex;        /* clave para centrar contenido */
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: nowrap;         /* evita saltos de línea por item */
    }

    /* Panel móvil ya es blanco -> forzamos texto oscuro dentro del panel */
    header.site-header--over-hero:not(.scrolled) #mobileMenu .menu-link{
        color: var(--brand-primario) !important; /* o var(--text-primary) si lo tienes bien definido */
    }

    /* Hover visible en panel blanco (evita el hover "blanco" que no se nota) */
    header.site-header--over-hero:not(.scrolled) #mobileMenu .menu-link:hover{
        background-color: rgba(197, 160, 89, 0.14) !important; /* oro suave */
        color: var(--brand-primario) !important;
        box-shadow: none !important;
        transform: none !important;
    }
}


/* ---------- 4) Hero (tu fragment: section.scroll-mt-16 sin id) ---------- */
/* El hero es el único section.scroll-mt-16 sin id en tus fragments */
section.scroll-mt-16:not([id]) > div.relative.bg-cover{
    /* foco a la derecha para dejar “aire” al texto en la izquierda */
    background-position: 80% center !important;
}

/* Añadimos un gradiente lateral (izq->der) para legibilidad y elegancia
   sin tocar tu overlay inline (lo complementa) */
section.scroll-mt-16:not([id]) > div.relative.bg-cover{
    position: relative;
    isolation: isolate; /* crea stacking context controlado */
}
section.scroll-mt-16:not([id]) > div.relative.bg-cover::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index: 1;
    background: linear-gradient(
            90deg,
            rgba(26,26,26,0.78) 0%,
            rgba(26,26,26,0.48) 40%,
            rgba(26,26,26,0.18) 75%,
            rgba(26,26,26,0.10) 100%
    );
}

/* Tu overlay actual (div.absolute.inset-0) lo ponemos en capa 0 */
section.scroll-mt-16:not([id]) > div.relative.bg-cover > div.absolute.inset-0{
    z-index: 0 !important;
}

/* Contenido del hero por encima */
section.scroll-mt-16:not([id]) > div.relative.bg-cover > div.relative{
    z-index: 2 !important;
}

/* Títulos hero: más “premium” (menos agresivo que extrabold) */
section.scroll-mt-16:not([id]) h1{
    line-height: 1.05;
    text-shadow: 0 18px 50px rgba(26, 26, 26, 0.45);
}
section.scroll-mt-16:not([id]) p{
    color: rgba(245, 245, 245, 0.90) !important;
    text-shadow: 0 18px 50px rgba(26, 26, 26, 0.35);
}

/* Botones del hero (sin blancos puros):
   - el “primary” en tu markup lleva .bg-white
   - el “secundario” lleva .bg-white/10 y ring-white/30 */
section.scroll-mt-16:not([id]) a.inline-block.rounded-lg.px-5.py-3.font-medium{
    border-radius: 999px !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Primary (antes bg-white) -> Oro Técnico con texto Carbono */
section.scroll-mt-16:not([id]) a.bg-white{
    background: var(--brand-secundario) !important;
    color: var(--brand-primario) !important;
    box-shadow: 0 18px 50px rgba(26, 26, 26, 0.24) !important;
    border: 1px solid rgba(197, 160, 89, 0.70) !important;
}
section.scroll-mt-16:not([id]) a.bg-white:hover{
    transform: translateY(-1px);
    box-shadow: 0 22px 60px rgba(26, 26, 26, 0.30) !important;
}

/* Secondary (bg-white/10) -> Blanco humo translúcido + borde oro suave */
section.scroll-mt-16:not([id]) a.bg-white\/10{
    background: rgba(245, 245, 245, 0.10) !important;
    color: rgba(245, 245, 245, 0.92) !important;
    border: 1px solid rgba(197, 160, 89, 0.45) !important;
    box-shadow: none !important;
}
section.scroll-mt-16:not([id]) a.bg-white\/10:hover{
    background: rgba(245, 245, 245, 0.16) !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 36px rgba(26, 26, 26, 0.18) !important;
}

/* Flecha “Desplázate” */
section.scroll-mt-16:not([id]) a[aria-label="Ir al contenido"]{
    color: rgba(245, 245, 245, 0.85) !important;
}
section.scroll-mt-16:not([id]) a[aria-label="Ir al contenido"]:hover{
    color: rgba(245, 245, 245, 0.95) !important;
}

/* ---------- 5) Texto-foto (prose) ---------- */
section.reveal-on-scroll .prose a,
section .prose a{
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
section .prose strong{
    font-weight: 600;
}

/* Imágenes en texto-foto: borde fino + sombra “carbono” */
section[id].py-16 img.rounded-xl{
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid rgba(140, 140, 140, 0.35);
}

/* ---------- 6) Catálogo (cards) ---------- */
section[id].py-16 .grid article.rounded-2xl.border{
    border-radius: var(--radius-lg) !important;
    border-color: rgba(140, 140, 140, 0.35) !important;
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
section[id].py-16 .grid article.rounded-2xl.border:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: rgba(197, 160, 89, 0.55) !important;
}

/* ---------- 7) Gallery (usa data-gallery-*) ---------- */
section[data-gallery-root] figure{
    border-radius: 22px !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Reemplazar “negros” por Carbono en overlays */
section[data-gallery-root] figure > div.pointer-events-none.absolute{
    background: linear-gradient(
            to top,
            rgba(26,26,26,0.62),
            rgba(26,26,26,0.18),
            rgba(26,26,26,0.00)
    ) !important;
}

/* Pill “Ver grande” (bg-black/45) -> carbono */
section[data-gallery-root] figure .bg-black\/45{
    background: rgba(26,26,26,0.45) !important;
}

/* Flechas: más elegantes + oro al hover */
section[data-gallery-root] button[data-gallery-prev],
section[data-gallery-root] button[data-gallery-next]{
    border-radius: 999px !important;
    box-shadow: var(--shadow-sm) !important;
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
section[data-gallery-root] button[data-gallery-prev]:hover,
section[data-gallery-root] button[data-gallery-next]:hover{
    transform: translateY(-1px);
    box-shadow: var(--shadow-md) !important;
    border-color: rgba(197, 160, 89, 0.65) !important;
    color: var(--brand-secundario) !important;
}

/* Dots: un poco más visibles */
section[data-gallery-root] [data-gallery-dots] button{
    width: 10px !important;
    height: 10px !important;
}

/* Lightbox: negro -> carbono */
section[data-gallery-root] [data-gallery-lightbox]{
    background: rgba(26,26,26,0.78) !important;
}
section[data-gallery-root] [data-lightbox-close]{
    background: rgba(26,26,26,0.85) !important;
}

/* ---------- 8) Formulario (action /enviar-consulta) ---------- */
section form[action$="/enviar-consulta"]{
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Inputs: aunque tengas inline style, podemos mejorar focus con ring dorado */
section form[action$="/enviar-consulta"] input,
section form[action$="/enviar-consulta"] textarea,
section form[action$="/enviar-consulta"] select{
    border-radius: 14px !important;
    transition: box-shadow var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}

/* Focus elegante (oro) */
section form[action$="/enviar-consulta"] input:focus,
section form[action$="/enviar-consulta"] textarea:focus,
section form[action$="/enviar-consulta"] select:focus{
    border-color: rgba(197, 160, 89, 0.75) !important;
    box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.18) !important;
}

/* Botón submit: más “premium” */
section form[action$="/enviar-consulta"] button[type="submit"]{
    border-radius: 999px !important;
    box-shadow: var(--shadow-sm) !important;
}
section form[action$="/enviar-consulta"] button[type="submit"]:hover{
    transform: translateY(-1px);
    box-shadow: var(--shadow-md) !important;
}

/* ---------- 9) Footer (y bloque “Publi Gremiotec”) ---------- */
footer{
    box-shadow: 0 -10px 40px rgba(26,26,26,0.06);
}

/* Override WhatsApp verde -> oro (estricta paleta) */
footer a[href^="https://wa.me"]{
    background: var(--brand-secundario) !important;
    color: var(--brand-primario) !important;
    border: 1px solid rgba(197,160,89,0.65) !important;
    border-radius: 999px !important;
    box-shadow: var(--shadow-sm) !important;
}
footer a[href^="https://wa.me"]:hover{
    transform: translateY(-1px);
    box-shadow: var(--shadow-md) !important;
}

/* Bloque final (w-full bg-black ...) -> Carbono */
footer + div.w-full.bg-black{
    background: var(--brand-primario) !important;
    border-top-color: rgba(140,140,140,0.35) !important;
}
footer + div.w-full.bg-black .text-neutral-300,
footer + div.w-full.bg-black .text-neutral-400{
    color: rgba(245,245,245,0.80) !important;
}