/* CLS Ingeniería & Construcción — estilos complementarios a Tailwind CDN.
   Sistema de tokens: petróleo #232F3D · amarillo #E5C435 · blanco.
   El amarillo (DEFAULT) NUNCA se usa como texto sobre fondo claro (contraste insuficiente).
   amarillo-oscuro (#C9A926, ~6.9:1 sobre petróleo) es para texto/íconos dorados sobre FONDO
   OSCURO (footer, hero, chips petróleo) — sobre blanco da apenas ~2.3:1 y no cumple WCAG AA.
   amarillo-texto (#816C18, ~4.9:1 sobre blanco) es la variante para texto/íconos dorados
   sobre FONDO CLARO (blanco/hueso): mismo matiz, oscurecido para cumplir AA. */

:root {
    --petroleo: #232F3D;
    --petroleo-profundo: #1A242F;
    --amarillo: #E5C435;
    --cota: #5B6B7C;
}

html {
    scroll-padding-top: 88px;
}

body {
    font-feature-settings: "tnum" 1;
}

::selection {
    background: var(--amarillo);
    color: var(--petroleo);
}

/* Scrollbar fina acorde al sistema (Chromium/WebKit; Firefox cae al nativo). */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(35, 47, 61, 0.25);
    border: 2px solid #fff;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(35, 47, 61, 0.4);
}

/* -------------------------------------------------------------------- */
/* Grilla de papel milimetrado — textura de fondo reutilizable            */
/* -------------------------------------------------------------------- */

.grilla-milimetrada {
    background-image:
        linear-gradient(to right, rgba(229, 196, 53, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(229, 196, 53, 0.05) 1px, transparent 1px),
        linear-gradient(to right, rgba(229, 196, 53, 0.12) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(229, 196, 53, 0.12) 1px, transparent 1px);
    background-size: 8px 8px, 8px 8px, 40px 40px, 40px 40px;
}

/* -------------------------------------------------------------------- */
/* Resplandores ambientales — profundidad sutil detrás de una sección    */
/* -------------------------------------------------------------------- */

.section-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(80px);
    pointer-events: none;
}

/* -------------------------------------------------------------------- */
/* Botones — sistema unificado (mismo lenguaje en todo el sitio)         */
/* -------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.9rem 1.85rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease,
        background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

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

.btn-sm {
    padding: 0.625rem 1.25rem;
}

.btn-primary {
    background: var(--amarillo);
    color: var(--petroleo);
    box-shadow: 0 16px 32px -16px rgba(229, 196, 53, 0.55);
}

.btn-primary:hover {
    background: #fff;
    box-shadow: 0 22px 40px -16px rgba(229, 196, 53, 0.6);
}

.btn-dark {
    background: var(--petroleo);
    color: #fff;
    box-shadow: 0 16px 32px -18px rgba(35, 47, 61, 0.5);
}

.btn-dark:hover {
    background: var(--amarillo);
    color: var(--petroleo);
    box-shadow: 0 22px 40px -18px rgba(35, 47, 61, 0.35);
}

.btn-outline {
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    backdrop-filter: blur(2px);
}

.btn-outline:hover {
    border-color: var(--amarillo);
    background: rgba(229, 196, 53, 0.1);
    color: var(--amarillo);
}

.btn-ghost-dark {
    border: 1px solid rgba(35, 47, 61, 0.15);
    background: transparent;
    color: var(--petroleo);
}

.btn-ghost-dark:hover {
    border-color: var(--amarillo);
    background: var(--petroleo);
    color: #fff;
}

/* -------------------------------------------------------------------- */
/* Elemento firma: cotas de plano                                        */
/* -------------------------------------------------------------------- */

.cota-line {
    height: 1px;
    background: currentColor;
    position: relative;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-cota .cota-line {
    transform: scaleX(0);
}

.reveal-cota.in-view .cota-line {
    transform: scaleX(1);
}

/* Variante grande de .cota-line para section_rule(): línea más gruesa con
   topes verticales en los extremos (mismo lenguaje visual que una cota de
   plano acotando un tramo). */
.cota-line-lg {
    height: 2px;
}

.cota-line-lg::before,
.cota-line-lg::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 1px;
    height: 10px;
    background: currentColor;
    transform: translateY(-50%);
}

.cota-line-lg::before {
    left: 0;
}

.cota-line-lg::after {
    right: 0;
}

/* -------------------------------------------------------------------- */
/* Reveals genéricos por scroll                                          */
/* -------------------------------------------------------------------- */

.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

/* -------------------------------------------------------------------- */
/* Carrusel del hero                                                     */
/* -------------------------------------------------------------------- */

.hero-carousel { position: relative; }

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.1s ease;
}

.hero-slide.is-active {
    opacity: 1;
    z-index: 1;
}

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
    transition: transform 9s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-slide.is-active img {
    transform: scale(1);
}

.hero-caption-stack { isolation: isolate; }

.hero-caption-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: 0.1s;
    pointer-events: none;
}

.hero-caption-slide.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.hero-arrow {
    height: 2.75rem;
    width: 2.75rem;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(2px);
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.hero-arrow:hover {
    border-color: var(--amarillo);
    color: var(--amarillo);
    background: rgba(229, 196, 53, 0.12);
    transform: translateY(-1px);
}

/* Indicador de obra activa: barra de avance sincronizada con el intervalo   */
/* de autoplay del carrusel (6s, ver assets/js/main.js → intervalMs).        */
.hero-progress {
    position: relative;
    width: 30px;
    height: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.25);
    transition: background 0.3s ease;
}

.hero-progress::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: scaleX(0);
    transform-origin: left;
    background: var(--amarillo);
}

.hero-progress[aria-current="true"]::after {
    animation: hero-progress-fill 6s linear forwards;
}

.hero-progress:not([aria-current="true"]):hover {
    background: rgba(255, 255, 255, 0.4);
}

.hero-progress:focus-visible {
    outline: 2px solid var(--amarillo);
    outline-offset: 3px;
}

@keyframes hero-progress-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.hero-scroll-cue {
    animation: hero-scroll-cue 1.8s ease-in-out infinite;
}

@keyframes hero-scroll-cue {
    0% { transform: translateY(-100%); }
    60% { transform: translateY(200%); }
    100% { transform: translateY(200%); }
}

/* -------------------------------------------------------------------- */
/* Nav desktop — subrayado animado bajo el link activo/hover              */
/* -------------------------------------------------------------------- */

.nav-link {
    position: relative;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.25rem;
    height: 2px;
    background: var(--amarillo);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-link:hover::after,
.nav-link.is-active::after {
    transform: scaleX(1);
}

.nav-link.is-active {
    color: #fff;
}

/* -------------------------------------------------------------------- */
/* Navegación mobile                                                     */
/* -------------------------------------------------------------------- */

#nav-mobile-menu {
    display: flex;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

#nav-mobile-menu.is-open {
    max-height: 24rem;
    opacity: 1;
}

/* -------------------------------------------------------------------- */
/* Marcas de esquina — firma "plano técnico" reutilizada en imágenes     */
/* -------------------------------------------------------------------- */

.frame-corners {
    position: relative;
}

.frame-corners::before,
.frame-corners::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    z-index: 2;
    pointer-events: none;
}

.frame-corners::before {
    top: 0;
    left: 0;
    border-top: 2px solid var(--amarillo);
    border-left: 2px solid var(--amarillo);
}

.frame-corners::after {
    bottom: 0;
    right: 0;
    border-bottom: 2px solid var(--amarillo);
    border-right: 2px solid var(--amarillo);
}

/* -------------------------------------------------------------------- */
/* Timeline de "Proceso de trabajo" — nodos con ícono sobre una traza    */
/* -------------------------------------------------------------------- */

.proceso-node {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: linear-gradient(155deg, #34455A, #212B37);
    border: 1px solid rgba(229, 196, 53, 0.4);
    color: var(--amarillo);
    font-size: 1.375rem;
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.group:hover .proceso-node {
    border-color: var(--amarillo);
    transform: translateY(-2px);
}

/* < lg: timeline vertical, un nodo por etapa conectado por una traza continua. */
.proceso-content {
    position: relative;
}

.proceso-content::before {
    content: "";
    position: absolute;
    top: 1.75rem;
    bottom: 1.75rem;
    left: 1.75rem;
    width: 1px;
    background: rgba(255, 255, 255, 0.14);
}

/* lg+: las etapas se leen en una fila; el riel de nodos se despega del contenido
   (cuyas alturas varían con el largo del texto) para que la traza quede siempre
   centrada en los nodos, sin importar cuánto ocupe cada descripción debajo. */
@media (min-width: 1024px) {
    .proceso-content::before {
        display: none;
    }

    .proceso-rail::before {
        content: "";
        position: absolute;
        top: 1.75rem;
        left: calc(10% - 1rem);
        right: calc(10% - 1rem);
        height: 1px;
        background: rgba(255, 255, 255, 0.14);
    }
}

/* -------------------------------------------------------------------- */
/* Galería / lightbox de proyecto                                        */
/* -------------------------------------------------------------------- */

.gallery-thumb {
    outline-offset: 2px;
    transition: opacity 0.2s ease;
}

.gallery-thumb[aria-current="true"] {
    outline: 2px solid var(--amarillo);
}

.gallery-thumb:not([aria-current="true"]) {
    opacity: 0.55;
}

.gallery-thumb:not([aria-current="true"]):hover {
    opacity: 0.85;
}

/* -------------------------------------------------------------------- */
/* Foco de teclado visible en toda la app                                */
/* -------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--amarillo);
    outline-offset: 2px;
}

/* -------------------------------------------------------------------- */
/* Mapa embebido                                                         */
/* -------------------------------------------------------------------- */

.mapa-embed {
    filter: grayscale(0.15) contrast(1.02);
}

/* -------------------------------------------------------------------- */
/* Mapa interactivo de obras (Leaflet)                                   */
/* -------------------------------------------------------------------- */

#mapa-obras-leaflet,
.leaflet-container {
    font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
}

.obra-marker span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(26, 36, 47, 0.35);
    color: #fff;
    font-size: 12px;
}

.obra-marker span i {
    transform: rotate(45deg);
}

.obra-popup {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 180px;
    font-size: 0.8125rem;
}

.obra-popup img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin-bottom: 0.375rem;
}

.obra-popup strong {
    font-family: 'Archivo Expanded', ui-sans-serif, system-ui, sans-serif;
    color: var(--petroleo);
}

.obra-popup p {
    color: var(--cota);
    margin: 0;
}

.leaflet-popup .obra-popup a {
    margin-top: 0.375rem;
    color: #816C18;
    font-weight: 600;
}

/* -------------------------------------------------------------------- */
/* prefers-reduced-motion                                                */
/* -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .cota-line,
    .reveal,
    .hero-slide,
    .hero-slide img,
    .hero-caption-slide,
    .hero-progress,
    #nav-mobile-menu {
        transition-duration: 0.01ms !important;
    }

    .hero-slide img {
        transform: none !important;
    }

    .hero-progress::after,
    .hero-scroll-cue {
        animation: none !important;
    }

    .hero-progress[aria-current="true"]::after {
        transform: scaleX(1);
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    .reveal-cota .cota-line {
        transform: scaleX(1);
    }
}

/* -------------------------------------------------------------------- */
/* Admin: reskin de DataTables al sistema petróleo/amarillo              */
/* -------------------------------------------------------------------- */

.dt-container {
    padding: 1rem;
}

@media (min-width: 640px) {
    .dt-container {
        padding: 1.5rem;
    }
}

.dt-container .dt-search input,
.dt-container .dt-length select {
    border-color: rgb(226 232 240);
    border-radius: 0.25rem;
    transition: border-color 0.15s ease;
}

.dt-container .dt-search input:focus,
.dt-container .dt-length select:focus {
    border-color: var(--amarillo);
    outline: none;
}

.dt-container .dt-paging .dt-paging-button {
    display: inline-flex;
    min-width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.65rem;
    border-radius: 0.25rem;
    color: var(--petroleo) !important;
    background: transparent;
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dt-container .dt-paging .dt-paging-button:hover:not(.current):not(.disabled) {
    background: rgba(35, 47, 61, 0.06) !important;
    color: var(--petroleo) !important;
    border-color: transparent !important;
}

.dt-container .dt-paging .dt-paging-button.current {
    background: var(--petroleo) !important;
    color: #fff !important;
    border-color: var(--petroleo) !important;
}

.dt-container .dt-paging .dt-paging-button.disabled {
    color: rgba(35, 47, 61, 0.35) !important;
    background: transparent !important;
    cursor: default;
}

table.dataTable thead th {
    background: #F5F5F3;
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cota);
    padding: 0.85rem 1rem !important;
}

table.dataTable tbody td {
    padding: 0.85rem 1rem !important;
    border-bottom: 1px solid rgba(35, 47, 61, 0.06);
    transition: background 0.1s ease;
}

table.dataTable tbody tr:hover {
    background: #F5F5F3 !important;
}