/* ==========================================================
   AIRLIVE LATAM
   Version 1.0
   ========================================================== */

:root{

    --primary:#0056B8;
    --primary-dark:#003E85;
    --secondary:#00B8FF;

    --accent:#00D084;

    --white:#FFFFFF;
    --light:#F5F7FA;
    --gray:#D7DCE3;
    --gray2:#7D8794;
    --dark:#1D2430;
    --black:#101418;

    --radius:18px;

    --shadow:
        0 12px 35px rgba(0,0,0,.10);

    --transition:.30s ease;

    --container:1400px;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter',sans-serif;

    background:#fff;

    color:var(--dark);

    overflow-x:hidden;

}

img{

    display:block;

    max-width:100%;

}

a{

    color:inherit;

    text-decoration:none;

}

ul{

    list-style:none;

}

button{

    cursor:pointer;

    border:none;

    font-family:inherit;

}

input{

    font-family:inherit;

}

.container{

    width:100%;
    max-width:var(--container);

    margin:auto;

    padding-inline:40px;

}

section{

    padding:110px 0;

}

/* ========================================= */

.section-header{

    text-align:center;

    margin-bottom:70px;

}

.section-header span{

    display:inline-flex;

    padding:8px 18px;

    border-radius:50px;

    background:#EAF4FF;

    color:var(--primary);

    font-weight:700;

    font-size:14px;

    margin-bottom:20px;

}

.section-header h2{

    font-size:48px;

    font-weight:800;

    line-height:1.15;

    margin-bottom:20px;

}

.section-header p{

    font-size:18px;

    color:var(--gray2);

    max-width:700px;

    margin:auto;

    line-height:1.8;

}

/* ========================================= */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 34px;

    border-radius:100px;

    font-weight:700;

    transition:var(--transition);

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-4px);

}

.btn-outline{

    border:2px solid var(--primary);

    color:var(--primary);

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

/* ========================================= */
/* HEADER */
/* ========================================= */

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    transition:.30s;

    backdrop-filter:blur(18px);

    background:rgba(255,255,255,.75);

    border-bottom:1px solid rgba(0,0,0,.05);

}

header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:88px;

}

.logo img{

    height:42px;

}

#mainMenu ul{

    display:flex;

    gap:40px;

}

#mainMenu a{

    font-weight:600;

    position:relative;

}

#mainMenu a::after{

    content:"";

    position:absolute;

    bottom:-8px;

    left:0;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.30s;

}

#mainMenu a:hover::after{

    width:100%;

}

.header-actions{

    display:flex;

    gap:12px;

}

.header-actions button{

    width:46px;

    height:46px;

    border-radius:50%;

    background:#EEF3F8;

    transition:.30s;

}

.header-actions button:hover{

    background:var(--primary);

    color:#fff;

}

/* Hamburguesa: oculta en escritorio (el menú ya está visible);
   el @media(max-width:900px) la vuelve a mostrar en móvil */
#menuButton{

    display:none;

}

/* ========================================= */
/* HERO */
/* ========================================= */

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

}

.hero-background{

    position:absolute;

    inset:0;

    z-index:-1;

}

.hero-gradient{

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at top left,#006BFF 0%,transparent 40%),
    radial-gradient(circle at bottom right,#00C2FF 0%,transparent 45%),
    #F4F9FF;

}

.hero-grid{

    position:absolute;

    inset:0;

    background-image:
    linear-gradient(rgba(0,0,0,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 1px);

    background-size:40px 40px;

}

.hero-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.badge{

    display:inline-flex;

    padding:10px 18px;

    border-radius:50px;

    background:#fff;

    color:var(--primary);

    font-weight:700;

    margin-bottom:25px;

}

.hero h1{

    font-size:62px;

    line-height:1.1;

    margin-bottom:25px;

    font-weight:900;

}

.hero p{

    font-size:20px;

    line-height:1.8;

    color:#485364;

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-bottom:50px;

}

.hero-stats{

    display:flex;

    gap:50px;

}

.hero-stats strong{

    display:block;

    font-size:34px;

    color:var(--primary);

}

.hero-stats span{

    color:#6C7887;

}

.floating-card{

    background:#fff;

    border-radius:24px;

    padding:30px;

    box-shadow:var(--shadow);

    animation:float 4s ease-in-out infinite;

}

.floating-card img{

    width:100%;

}

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0px);

    }

}

/* ========================================= */
/* BUSCADOR */
/* ========================================= */

.quick-search{

    margin-top:-60px;

    position:relative;

    z-index:5;

}

.search-box{

    display:flex;

    align-items:center;

    gap:18px;

    background:#fff;

    padding:28px 30px;

    border-radius:24px;

    box-shadow:var(--shadow);

}

.search-box i{

    font-size:24px;

    color:var(--primary);

}

.search-box input{

    flex:1;

    border:none;

    outline:none;

    font-size:20px;

}

/* ========================================= */
/* CATEGORIAS */
/* ========================================= */

.categories{

    background:#F8FAFD;

}

.categories-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:28px;

}

.category-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

    text-align:center;

    transition:.30s;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.category-card:hover{

    transform:translateY(-10px);

}

.category-card img{

    height:90px;

    object-fit:contain;

    margin:auto;

    margin-bottom:25px;

}

.category-card h3{

    margin-bottom:10px;

    font-size:22px;

}

.category-card span{

    color:#6D7683;

}

/* ========================================= */
/* PRODUCTOS */
/* ========================================= */

.product-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(320px,1fr));

    gap:35px;

}

.product-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.product-card:hover{

    transform:translateY(-12px);

}

.product-image{

    background:#F8FBFF;

    padding:40px;

    height:250px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.product-image img{

    max-height:170px;

}

.product-info{

    padding:30px;

}

.product-info .category{

    color:var(--primary);

    font-weight:700;

    font-size:13px;

    text-transform:uppercase;

}

.product-info h3{

    margin:15px 0;

    font-size:24px;

}

.product-info p{

    color:#687383;

    line-height:1.7;

    margin-bottom:25px;

}

.tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:25px;

}

.tags span{

    padding:8px 14px;

    border-radius:30px;

    background:#EDF5FF;

    color:var(--primary);

    font-size:13px;

    font-weight:600;

}

.buttons{

    display:flex;

    gap:12px;

}

.buttons button{

    flex:1;

    padding:14px;

    border-radius:12px;

    font-weight:700;

}

.details{

    background:var(--primary);

    color:#fff;

}

.compare{

    background:#EEF2F6;

}

/* ==========================================================
   SOLUCIONES
========================================================== */

.solutions{

    background:#fff;

}

.solutions-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

}

.solution-card{

    background:#fff;

    border-radius:24px;

    padding:45px;

    transition:.35s;

    box-shadow:0 12px 30px rgba(0,0,0,.06);

    border:1px solid rgba(0,0,0,.04);

}

.solution-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 50px rgba(0,0,0,.12);

}

.solution-card i{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#0056B8,#00B8FF);

    color:#fff;

    font-size:30px;

    margin-bottom:25px;

}

.solution-card h3{

    font-size:24px;

    margin-bottom:18px;

}

.solution-card p{

    color:#6E7885;

    line-height:1.8;

}

/* ==========================================================
   INDUSTRIAS
========================================================== */

.industries{

    background:#F8FAFD;

}

.industry-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:25px;

}

.industry{

    background:#fff;

    border-radius:20px;

    text-align:center;

    padding:40px 20px;

    transition:.30s;

    box-shadow:0 8px 24px rgba(0,0,0,.05);

}

.industry:hover{

    transform:translateY(-8px);

}

.industry i{

    font-size:40px;

    color:var(--primary);

    margin-bottom:18px;

}

.industry span{

    display:block;

    font-size:18px;

    font-weight:700;

}

/* ==========================================================
   TECNOLOGIAS
========================================================== */

.technologies{

    background:#fff;

}

.technology-list{

    display:flex;

    flex-wrap:wrap;

    gap:8px 33px;

    justify-content:center;

}

.technology-list span{

    padding:14px 22px;

    background:#EDF5FF;

    color:var(--primary);

    border-radius:50px;

    font-weight:600;

    transition:.25s;

}

.technology-list span:hover{

    background:var(--primary);

    color:#fff;

}

/* ==========================================================
   CATALOGO
========================================================== */

.catalog{

    background:#F7F9FC;

}

.catalog-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    margin-bottom:50px;

    flex-wrap:wrap;

}

.toolbar-left{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.catalog-toolbar select{

    padding:16px 22px;

    border-radius:12px;

    border:1px solid #D8DEE7;

    background:#fff;

    min-width:240px;

    font-size:15px;

}

.catalog-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));

    gap:35px;

}

/* ==========================================================
   DESCARGAS
========================================================== */

.downloads{

    background:#fff;

}

.download-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

}

.download-card{

    background:#fff;

    border-radius:22px;

    padding:35px;

    text-align:center;

    transition:.30s;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

}

.download-card:hover{

    transform:translateY(-8px);

}

.download-card i{

    font-size:50px;

    color:var(--primary);

    margin-bottom:25px;

}

.download-card h4{

    font-size:24px;

    margin-bottom:12px;

}

.download-card p{

    color:#707A88;

    line-height:1.8;

    margin-bottom:30px;

}

.download-card a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 28px;

    border-radius:50px;

    background:var(--primary);

    color:#fff;

    font-weight:700;

}

/* ==========================================================
   CTA
========================================================== */

.cta{

    background:linear-gradient(135deg,#0056B8,#00B8FF);

    color:#fff;

}

.cta-box{

    text-align:center;

    max-width:900px;

    margin:auto;

}

.cta-box h2{

    font-size:54px;

    margin-bottom:25px;

}

.cta-box p{

    font-size:20px;

    line-height:1.9;

    margin-bottom:45px;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:25px;

}

.cta .btn-primary{

    background:#fff;

    color:var(--primary);

}

.cta .btn-outline{

    border:2px solid #fff;

    color:#fff;

}

/* ==========================================================
   CONTACTO
========================================================== */

.contact{

    background:#F7F9FC;

}

.contact-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.contact-card{

    background:#fff;

    border-radius:22px;

    padding:45px;

    text-align:center;

    box-shadow:0 10px 28px rgba(0,0,0,.05);

}

.contact-card i{

    font-size:42px;

    color:var(--primary);

    margin-bottom:22px;

}

.contact-card h3{

    margin-bottom:12px;

}

.contact-card p{

    color:#6E7785;

}

/* ==========================================================
   NEWSLETTER
========================================================== */

.newsletter{

    background:#fff;

}

.newsletter-box{

    background:linear-gradient(135deg,#0B1828,#162D49);

    border-radius:26px;

    color:#fff;

    padding:70px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:60px;

}

.newsletter-box h2{

    font-size:42px;

    margin-bottom:18px;

}

.newsletter-box p{

    color:#D7E0EB;

}

#newsletterForm{

    display:flex;

    gap:15px;

    width:100%;

    max-width:550px;

}

#newsletterForm input{

    flex:1;

    border:none;

    border-radius:14px;

    padding:18px 20px;

}

#newsletterForm button{

    padding:18px 32px;

    background:#00B8FF;

    color:#fff;

    border-radius:14px;

    font-weight:700;

}

/* ==========================================================
   FOOTER
========================================================== */

footer{

    background:#101418;

    color:#D4DCE7;

    padding:80px 0 30px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:60px;

    margin-bottom:50px;

}

.footer-grid img{

    width:190px;

    margin-bottom:25px;

}

.footer-grid p{

    line-height:1.9;

}

.footer-grid h4{

    color:#fff;

    margin-bottom:20px;

}

.footer-grid ul{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.footer-grid a{

    transition:.30s;

}

.footer-grid a:hover{

    color:#00B8FF;

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.08);

    padding-top:30px;

    text-align:center;

    color:#8C96A5;

}

/* ==========================================================
   MODAL PRODUCTO
========================================================== */

.modal{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.70);

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;
    visibility:hidden;

    transition:.35s;

    z-index:99999;

}

.modal.active{

    opacity:1;
    visibility:visible;

}

.modal-content{

    width:min(1500px,95vw);

    max-height:92vh;

    overflow:auto;

    background:#fff;

    border-radius:28px;

    position:relative;

    animation:modalIn .35s ease;

}

@keyframes modalIn{

    from{

        opacity:0;

        transform:translateY(50px) scale(.96);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

.modal-close{

    position:absolute;

    top:25px;

    right:25px;

    width:48px;

    height:48px;

    border-radius:50%;

    background:#EEF2F6;

    z-index:20;

}

.modal-close:hover{

    background:var(--primary);

    color:#fff;

}

#modalBody{

    padding:60px;

}

/* ==========================================================
   COMPARADOR
========================================================== */

#comparePanel{

    position:fixed;

    right:-650px;

    top:0;

    width:650px;

    height:100vh;

    background:#fff;

    box-shadow:-10px 0 35px rgba(0,0,0,.12);

    transition:.40s;

    z-index:99990;

    display:flex;

    flex-direction:column;

}

#comparePanel.active{

    right:0;

}

.compare-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 30px;

    border-bottom:1px solid #ECECEC;

}

.compare-header h3{

    font-size:24px;

}

.compare-header button{

    width:44px;

    height:44px;

    border-radius:50%;

    background:#EEF3F8;

}

.compare-table{

    width:100%;

    border-collapse:collapse;

}

.compare-table th{

    background:#F6F8FB;

    padding:18px;

}

.compare-table td{

    padding:16px;

    border-bottom:1px solid #EEE;

}

/* ==========================================================
   SEARCH OVERLAY
========================================================== */

#searchOverlay{

    position:fixed;

    inset:0;

    background:rgba(7,18,34,.94);

    display:flex;

    align-items:flex-start;

    justify-content:center;

    padding-top:120px;

    opacity:0;

    visibility:hidden;

    transition:.30s;

    z-index:99998;

}

#searchOverlay.active{

    opacity:1;

    visibility:visible;

}

.search-container{

    width:min(950px,92vw);

}

.search-container input{

    width:100%;

    padding:28px;

    border:none;

    border-radius:22px;

    font-size:24px;

}

#searchResults{

    margin-top:25px;

    background:#fff;

    border-radius:22px;

    max-height:600px;

    overflow:auto;

}

#closeSearch{

    position:absolute;

    top:40px;

    right:50px;

    width:52px;

    height:52px;

    border-radius:50%;

    background:#fff;

}

/* ==========================================================
   MOBILE MENU
========================================================== */

#mobileMenu{

    position:fixed;

    left:-360px;

    top:0;

    width:340px;

    height:100vh;

    background:#fff;

    box-shadow:12px 0 40px rgba(0,0,0,.12);

    transition:.35s;

    z-index:99995;

}

#mobileMenu.active{

    left:0;

}

.mobile-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:30px;

    border-bottom:1px solid #ECECEC;

}

.mobile-header img{

    height:36px;

}

.mobile-header button{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#EEF2F6;

}

#mobileMenu nav{

    display:flex;

    flex-direction:column;

    padding:20px;

}

#mobileMenu nav a{

    padding:18px 15px;

    border-radius:12px;

    font-weight:600;

    transition:.25s;

}

#mobileMenu nav a:hover{

    background:#EDF5FF;

    color:var(--primary);

}

/* ==========================================================
   BOTONES FLOTANTES
========================================================== */

#scrollTop{

    position:fixed;

    right:30px;

    bottom:100px;

    width:56px;

    height:56px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    box-shadow:0 15px 35px rgba(0,0,0,.20);

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:999;

}

#scrollTop:hover{

    transform:translateY(-5px);

}

#whatsappButton{

    position:fixed;

    right:30px;

    bottom:30px;

    width:60px;

    height:60px;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    box-shadow:0 15px 35px rgba(0,0,0,.18);

    z-index:999;

}

#whatsappButton:hover{

    transform:scale(1.08);

}

/* ==========================================================
   LOADER
========================================================== */

#loader{

    position:fixed;

    inset:0;

    background:#08131F;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999999;

}

.loader-logo{

    animation:pulse 2s infinite;

}

.loader-logo img{

    width:220px;

}

@keyframes pulse{

    0%{

        opacity:.4;

        transform:scale(.95);

    }

    50%{

        opacity:1;

        transform:scale(1);

    }

    100%{

        opacity:.4;

        transform:scale(.95);

    }

}

/* ==========================================================
   ANIMACIONES
========================================================== */

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:.6s;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

.zoom{

    transition:.35s;

}

.zoom:hover{

    transform:scale(1.04);

}

/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:50px;

}

::-webkit-scrollbar-track{

    background:#EEF3F8;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:1200px){

.hero-content{

grid-template-columns:1fr;

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

.newsletter-box{

flex-direction:column;

text-align:center;

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:900px){

.container{

padding-inline:20px;

}

section{

padding:80px 0;

}

#mainMenu{

display:none;

}

#menuButton{

display:flex;

}

.hero h1{

font-size:46px;

}

.section-header h2{

font-size:38px;

}

.catalog-toolbar{

flex-direction:column;

align-items:stretch;

}

.toolbar-left{

flex-direction:column;

}

.toolbar-left select{

width:100%;

}

.hero-buttons{

flex-direction:column;

}

.hero-stats{

flex-direction:column;

gap:20px;

}

.footer-grid{

grid-template-columns:1fr;

}

.newsletter-box{

padding:45px;

}

#newsletterForm{

flex-direction:column;

}

.compare-panel{

width:100%;

}

.modal-content{

width:98vw;

}

}

@media(max-width:600px){

.hero h1{

font-size:34px;

}

.hero p{

font-size:17px;

}

.section-header h2{

font-size:30px;

}

.btn{

width:100%;

}

.product-grid{

grid-template-columns:1fr;

}

.categories-grid{

grid-template-columns:1fr;

}

.solutions-grid{

grid-template-columns:1fr;

}

.industry-grid{

grid-template-columns:repeat(2,1fr);

}

.download-grid{

grid-template-columns:1fr;

}

.contact-grid{

grid-template-columns:1fr;

}

}

/* ==========================================================
   DARK MODE (Preparado)
========================================================== */

body.dark{

    background:#0E1724;

    color:#E7EDF7;

}

body.dark header{

    background:rgba(14,23,36,.90);

    border-color:#233041;

}

body.dark .product-card,
body.dark .category-card,
body.dark .solution-card,
body.dark .industry,
body.dark .download-card,
body.dark .contact-card{

    background:#162233;

    color:#FFF;

}

body.dark footer{

    background:#050A12;

}

body.dark .search-box{

    background:#162233;

}

body.dark input{

    background:#1C2A3B;

    color:#FFF;

}
/* ==========================================================
   PÁGINAS PHP: productos.php / producto.php
   ========================================================== */

.cat-filter{
    display:flex;
    flex-wrap:wrap;
    gap:.6rem;
    justify-content:center;
    margin:2rem 0 1.5rem;
}
.cat-chip{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    padding:.55rem 1rem;
    border-radius:999px;
    background:var(--light);
    color:var(--dark);
    font-size:.85rem;
    font-weight:600;
    text-decoration:none;
    border:1px solid var(--gray);
    transition:var(--transition);
}
.cat-chip small{ color:var(--gray2); font-weight:500; }
.cat-chip:hover{ border-color:var(--primary); color:var(--primary); }
.cat-chip.active{ background:var(--primary); color:#fff; border-color:var(--primary); }
.cat-chip.active small{ color:rgba(255,255,255,.75); }

.result-count{
    text-align:center;
    color:var(--gray2);
    font-size:.9rem;
    margin-bottom:1.5rem;
}

/* ---- Perfil de producto ---- */
.breadcrumb{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.5rem;
    font-size:.85rem;
    color:var(--gray2);
    margin-bottom:2rem;
}
.breadcrumb a{ color:var(--primary); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb i{ font-size:.65rem; color:var(--gray); }

.product-profile{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:3rem;
    align-items:start;
}
.profile-gallery{
    position:relative;
    background:var(--light);
    border-radius:var(--radius);
    padding:2.5rem;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:340px;
}
.profile-gallery img{ max-height:360px; object-fit:contain; }
.badge-new{
    position:absolute; top:1rem; left:1rem;
    background:var(--accent); color:#fff;
    font-size:.7rem; font-weight:700; letter-spacing:.05em;
    padding:.35rem .7rem; border-radius:6px;
}
.profile-info h1{ font-size:1.9rem; line-height:1.2; margin:.5rem 0; }
.profile-sku{
    display:inline-flex; align-items:center; gap:.5rem;
    color:var(--gray2); font-weight:600; font-size:.9rem; margin-bottom:1.2rem;
}
.profile-desc{ color:var(--dark); line-height:1.7; margin-bottom:1.5rem; }
.profile-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }

.profile-details{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:2rem;
    margin-top:3.5rem;
}
.profile-block h3{
    font-size:1.15rem;
    margin-bottom:1rem;
    padding-bottom:.6rem;
    border-bottom:2px solid var(--primary);
    display:inline-block;
}
.spec-table{ width:100%; border-collapse:collapse; }
.spec-table tr{ border-bottom:1px solid var(--gray); }
.spec-table th{
    text-align:left; padding:.7rem .5rem; width:45%;
    color:var(--gray2); font-weight:600; font-size:.9rem; vertical-align:top;
}
.spec-table td{ padding:.7rem .5rem; font-size:.9rem; }
.feature-list{ list-style:none; }
.feature-list li{
    position:relative; padding:.5rem 0 .5rem 1.7rem; font-size:.92rem;
    border-bottom:1px solid var(--light);
}
.feature-list li::before{
    content:"\f058"; font-family:"Font Awesome 6 Free"; font-weight:900;
    position:absolute; left:0; color:var(--accent);
}

/* ---- Dark mode ---- */
body.dark .cat-chip{ background:#232b38; color:#e6eaf0; border-color:#333d4d; }
body.dark .cat-chip:hover,
body.dark .cat-chip.active{ background:var(--primary); color:#fff; }
body.dark .profile-gallery{ background:#1a212c; }
body.dark .spec-table tr{ border-color:#2b3543; }
body.dark .feature-list li{ border-color:#232b38; }

@media(max-width:900px){
    .product-profile{ grid-template-columns:1fr; gap:1.8rem; }
}

/* ==========================================================
   PÁGINA: nosotros.php
   ========================================================== */
.about-hero{ padding-top:9rem; padding-bottom:2rem; }
.about-intro{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:3.5rem;
    align-items:center;
}
.about-text h1{ font-size:2.6rem; line-height:1.1; margin:.6rem 0 1.2rem; }
.about-text .lead{ font-size:1.15rem; line-height:1.7; color:var(--dark); margin-bottom:1rem; }
.about-text p{ line-height:1.75; color:var(--gray2); }
.about-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }
.about-visual{ display:flex; justify-content:center; }
.about-visual img{
    max-width:100%; width:min(420px,100%);
    border-radius:var(--radius);
}
.about-visual img.fallback{ width:220px; opacity:.9; }

.about-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.5rem;
    margin-top:3.5rem;
    padding:2rem;
    background:var(--light);
    border-radius:var(--radius);
}
.about-stats > div{ text-align:center; }
.about-stats strong{
    display:block;
    font-size:2.2rem;
    font-weight:800;
    color:var(--primary);
    line-height:1;
}
.about-stats strong i{ font-size:1.3rem; margin-left:.15rem; color:var(--accent); }
.about-stats strong .plus{ color:var(--accent); }
.about-stats span{ display:block; margin-top:.5rem; font-size:.85rem; color:var(--gray2); }

/* ---- Equipo ---- */
.team-section{ padding:4rem 0; }
.team-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:2rem;
    margin-top:1rem;
}
.team-card{
    background:#fff;
    border:1px solid var(--gray);
    border-radius:var(--radius);
    overflow:hidden;
    transition:var(--transition);
    display:flex;
    flex-direction:column;
}
.team-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--primary); }
.team-photo{
    position:relative;
    aspect-ratio:1/1;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
}
.team-photo img{ width:100%; height:100%; object-fit:cover; }
.team-photo .team-icon{ display:none; color:#fff; font-size:3.5rem; }
.team-photo.noimg .team-icon,
.team-photo:not(:has(img)) .team-icon{ display:block; }
.team-body{ padding:1.4rem; text-align:center; flex:1; display:flex; flex-direction:column; }
.team-body h3{ font-size:1.15rem; margin-bottom:.2rem; }
.team-role{ color:var(--primary); font-weight:600; font-size:.85rem; margin-bottom:.8rem; }
.team-body p{ font-size:.88rem; line-height:1.6; color:var(--gray2); flex:1; }
.team-linkedin{
    display:inline-flex; align-items:center; gap:.4rem; justify-content:center;
    margin-top:1rem; color:var(--primary); font-weight:600; font-size:.85rem; text-decoration:none;
}
.team-linkedin:hover{ color:var(--primary-dark); }

/* ---- Dark mode ---- */
body.dark .about-text .lead{ color:#e6eaf0; }
body.dark .about-stats{ background:#1a212c; }
body.dark .team-card{ background:#161c26; border-color:#2b3543; }

@media(max-width:900px){
    .about-intro{ grid-template-columns:1fr; gap:2rem; }
    .about-stats{ grid-template-columns:repeat(2,1fr); }
}

/* ==========================================================
   BUSCADOR: resultados
   ========================================================== */
#searchResults{ padding:.4rem; }
.search-hint{ padding:1.4rem 1.2rem; color:var(--gray2); font-size:.95rem; }
.search-hint i{ margin-right:.4rem; color:var(--primary); }
.search-count{ padding:.7rem 1.1rem; font-size:.8rem; font-weight:700; color:var(--gray2); text-transform:uppercase; letter-spacing:.04em; }
.search-item{
    display:flex; align-items:center; gap:1rem;
    padding:.7rem 1.1rem; text-decoration:none; color:var(--dark);
    border-top:1px solid var(--light); transition:.15s;
}
.search-item:hover{ background:var(--light); }
.search-item img{ width:52px; height:52px; object-fit:contain; background:#fff; border-radius:10px; flex-shrink:0; }
.search-item .si-info{ display:flex; flex-direction:column; flex:1; min-width:0; }
.search-item .si-info strong{ font-size:.95rem; line-height:1.25; }
.search-item .si-info small{ color:var(--gray2); font-size:.8rem; margin-top:.15rem; }
.search-item > i{ color:var(--gray); font-size:.8rem; }

/* ==========================================================
   PÁGINA: contacto.php
   ========================================================== */
.contact-page{ padding-top:9rem; padding-bottom:4rem; }
.contact-layout{
    display:grid;
    grid-template-columns:1.6fr 1fr;
    gap:3rem;
    align-items:start;
    margin-top:2rem;
}
.contact-form{
    background:#fff;
    border:1px solid var(--gray);
    border-radius:var(--radius);
    padding:2rem;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.form-group{ margin-bottom:1.2rem; display:flex; flex-direction:column; }
.form-group label{ font-size:.85rem; font-weight:600; margin-bottom:.4rem; color:var(--dark); }
.contact-form input,
.contact-form select,
.contact-form textarea{
    width:100%;
    padding:.8rem .9rem;
    border:1px solid var(--gray);
    border-radius:10px;
    font-family:inherit;
    font-size:.92rem;
    background:var(--light);
    color:var(--dark);
    transition:.2s;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
    outline:none; border-color:var(--primary); background:#fff;
    box-shadow:0 0 0 3px rgba(0,86,184,.12);
}
.contact-form textarea{ resize:vertical; }
.contact-form .invalid{ border-color:#e0384f; background:#fff5f6; }
.form-group small.err{ color:#e0384f; font-size:.78rem; margin-top:.35rem; }
.contact-form button{ margin-top:.5rem; }

/* honeypot oculto */
.hp-field{ position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; opacity:0!important; }

/* alertas */
.form-alert{
    display:flex; align-items:flex-start; gap:.9rem;
    padding:1.1rem 1.3rem; border-radius:var(--radius); margin:1.5rem 0;
}
.form-alert i{ font-size:1.4rem; margin-top:.1rem; }
.form-alert p{ margin:.25rem 0 0; font-size:.9rem; }
.form-alert.success{ background:#e7f8ef; color:#0b6b3a; }
.form-alert.error{ background:#fdecee; color:#b02a37; }

/* aside info */
.contact-aside{
    background:var(--light);
    border-radius:var(--radius);
    padding:1.8rem;
}
.contact-aside h3{ font-size:1.1rem; margin-bottom:1.2rem; }
.contact-points{ list-style:none; display:flex; flex-direction:column; gap:1.1rem; }
.contact-points li{ display:flex; gap:.8rem; }
.contact-points li i{ color:var(--primary); margin-top:.2rem; }
.contact-points strong{ display:block; font-size:.95rem; margin-bottom:.15rem; }
.contact-points a{ display:block; color:var(--gray2); text-decoration:none; font-size:.88rem; }
.contact-points a:hover{ color:var(--primary); }

/* dark */
body.dark .contact-form{ background:#161c26; border-color:#2b3543; }
body.dark .contact-form input,
body.dark .contact-form select,
body.dark .contact-form textarea{ background:#0f141c; border-color:#2b3543; color:#e6eaf0; }
body.dark .contact-aside{ background:#1a212c; }
body.dark .search-item{ color:#e6eaf0; border-color:#232b38; }
body.dark .search-item:hover{ background:#1a212c; }

@media(max-width:900px){
    .contact-layout{ grid-template-columns:1fr; }
    .form-row{ grid-template-columns:1fr; }
}