/* ══════════════════════════════════════════════════════════════════════════════
   style-website.css — Estilos exclusivos del Sitio Corporativo LAESH
   (index.php — landing page pública)

   Cargado SOLO por index.php, después de style.css.
   Los portales (md/, rc/, adrc/) NO cargan este archivo.

   Orden de cascade: style.css §BASE → este archivo → style.css §PORTAL-UTILS
   → landing.css (cargado al final, mayor prioridad de hoja de estilo).

   Creado: 2026-08-17 · MAINT-01 L3 physical split
   2026-09-07: Eliminado @layer website — compatibilidad Chrome 49+.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ============================================================
   WEBSITE PÚBLICO — Sitio Corporativo LAESH (uipv1/index.html)
   Estilos específicos del landing page público — BASE (no responsive)
   Migrados desde index.html inline <style> — G-ARC-02 fix.
   ============================================================ */

/* Navbar landing page — definido en landing.css (no duplicar aquí) */

/* WhatsApp flotante */
.whatsapp-float {
    position: fixed;
    bottom: 110px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #25d366;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
    z-index: 1001;
    text-decoration: none;
    transition: all 0.3s ease;
}@media (hover: hover) and (pointer: fine) {
    .whatsapp-float:hover {
        transform: scale(1.1); box-shadow: 0 12px 30px rgba(37, 211, 102, 0.6);
    }
}
@keyframes pulse-ring {
    0%   { transform: scale(1);   opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0;   }
}

/* Animaciones por Scroll (Intersection Observer) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}



/* Tarjetas Premium */
.card-premium {
    background: var(--bg-surface);
    border-radius: 16px;
    padding: 2.25rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: left;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}@media (hover: hover) and (pointer: fine) {
    .card-premium:hover {
        transform: translateY(-8px) scale(1.02); box-shadow: 0 25px 35px -5px rgba(113, 202, 17, 0.1), 0 10px 15px -5px rgba(113, 202, 17, 0.04); border-color: rgba(113, 202, 17, 0.3);
    }
}



/* Carrusel de Especialidades (horizontal scroll) */
.specialties-carousel-track {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 1rem 0;
}
.carousel-card {
    flex: 0 0 calc((100% - 4rem) / 3);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Recorte de margen inferior vertical al mínimo */
    margin-bottom: 2px;
}@media (hover: hover) and (pointer: fine) {
    .carousel-arrow-btn:hover {
        background: var(--secondary-green); border-color: var(--primary-green); transform: scale(1.05);
    }
}




/* Pestañas del Mapa */
.map-bottom-bar {
    padding: 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: center;
    gap: 20px;
    background: #ffffff;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: visible;
}
.map-tab-btn {
    background: none;
    border: none;
    padding: 0.5rem 0.5rem 0.25rem;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.95rem;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
}@media (hover: hover) and (pointer: fine) {
    .map-tab-btn:hover {
        color: var(--primary);
    }
}
.map-tab-btn.active { color: var(--primary); border-bottom: 2px solid var(--primary-green); }
.map-tab-btn img { width: 18px; height: 18px; filter: brightness(0) saturate(100%) invert(39%) sepia(21%) saturate(222%) hue-rotate(180deg) brightness(92%) contrast(88%); }
.map-tab-btn.active img { filter: brightness(0) saturate(100%) invert(21%) sepia(87%) saturate(3025%) hue-rotate(204deg) brightness(88%) contrast(106%); }
/* 2026-10-10: «Mapa Interactivo» esperando la ubicación del móvil (website.js → aria-busy) */
.map-tab-btn[aria-busy="true"] { cursor: progress; opacity: 0.75; pointer-events: none; }
.map-sep { color: var(--border); font-size: 1.2rem; white-space: nowrap; }

/* Contenedores de mapa — alturas gestionadas por landing.css */
#map-static { width: 100%; }
/* GM-02: imagen del croquis — dimensiones controladas por landing.css (.map-zoom-img) */
#map-static img { display: block; }



/* ---- Responsive: Website Público ---- */

/* ============================================================
   RESPONSIVE DESIGN — 3 BREAKPOINTS
   Desktop 24"+ (≥1920px) | Tablet/Laptop (≤1024px) | Mobile (≤767px)
   ============================================================ */

/* -----------------------------------------------------------
   DESKTOP GRANDE (≥1920px — monitor externo 24"+)
   Aprovecha el espacio extra: anchura máxima mayor, tipografía
   más grande, grillas de 3 cols fijas, hero más alto.
   ----------------------------------------------------------- */


/* -----------------------------------------------------------
   TABLET / LAPTOP (≤1024px)
   Sidebar portales → barra superior, grilla 2 cols, hero reducido.
   ----------------------------------------------------------- */


/* -----------------------------------------------------------
   MÓVIL (≤767px) — Android & iOS
   1 columna, navbar colapsable, hero compact, modales full-sheet,
   áreas táctiles mínimo 44px, safe-area iOS soportada.
   ----------------------------------------------------------- */


/* -----------------------------------------------------------
   Safe Area iOS — notch / Dynamic Island / home indicator
   ----------------------------------------------------------- */

/* ============================================================
   WEBSITE PÚBLICO — Overrides Responsivos
   (van DESPUÉS de los responsive del portal para ganar en cascada)
   ============================================================ */

/* ≥1920px — compensar el font-size 0.88rem del portal para nav links del website */

/* ≥769px — forzar visibilidad de nav-links en desktop */

/* Laptop / tablet medianas (769-1100px) */

/* Tablet ≤1024px — compensar las reglas del portal que ahora son anteriores en cascada */

/* Móvil ≤768px */

/* Móvil horizontal / Landscape en pantallas compactas */

/* Móvil pequeño ≤480px */

/* Móvil muy pequeño ≤375px */



/* Hero Slider Desktop Expansion (+6 en laterales) */


/* Proportional Layout Scaling for Desktop (Expanded Look & Feel) */



/* =========================================================
   REGLAS HOMOLOGADAS DE RESPONSIVIDAD — CARRUSEL ESPECIALIDADES
   - Desktop & Laptop (>=1025px): 3 Fichas visibles
   - Tablet (768px – 1024px): 1 Ficha visible
   - Móvil (<768px): 1 Ficha visible
   ========================================================= */

/* Desktop & Laptop (>= 1025px): 3 Fichas con aprovechamiento lateral */

/* Pantallas 4K / Ultra-wide (>= 1920px): 3 Fichas ultra-amplias */

/* Tablet (768px – 1024px): 1 Ficha visible (ocupar todo el ancho) */

/* Móviles (<= 767px): 1 Ficha visible, ocupa todo el ancho */


/* =========================================================
   HOMOLOGACIÓN DE BOTONES DE ACCIÓN (ESTILO "PUBLICAR CAMBIOS")
   ========================================================= */
.btn {
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    border: none;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}
/* R-CSS-01 fix 2026-08-29: bloque .btn-secondary eliminado.
   SSOT: landing.css (sin @layer). En index.php btn-secondary solo aparece
   con btn-outline-white, que ya sobreescribe el background → bloque dead. */
/* ── Sidebar Rail Colapsable — desktop ≥1025px ─────────────────────────────
   Estado inicial: COLAPSADO (65 px — 25% de 260 px, solo iconos).
   Click en .sidebar-rail-toggle → añade .sidebar-expanded al <aside>
   → sidebar se expande a 260 px mostrando íconos + etiquetas de texto.
   Estado persistido en localStorage['laesh_sidebar_expanded'].
   Lupita en modo colapsado: abre popup flotante con autocomplete (30 chars).
   Main-content: padding-top reducido para aprovechar espacio vertical.     */

/* ── fin style-website.css ── */