/* ==================================================
   VARIABLES
================================================== */

:root{

--bg:#0A0F14;
--bg2:#121A22;
--green:#027d6f;
--orange:#e73e18d5;
--white:#FFFFFF;
--text:#B8C0CC;
--border:rgba(255,255,255,.08);

}

/* ==================================================
RESET
================================================== */

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
background:var(--bg);
color:var(--white);
line-height:1.7;
overflow-x:hidden;
}

/* ==================================================
LAYOUT
================================================== */

.container{
width:min(1140px,92%);
margin:auto;
}

.narrow{
max-width:900px;
}

section{
padding:110px 0;
}

.dark{
background:var(--bg2);
}

/* ==================================================
TYPOGRAPHY
================================================== */

h1,
h2,
h3{
font-family:'Space Grotesk',sans-serif;
line-height:1.1;
}

h1{
font-size:clamp(3rem,6vw,5rem);
margin-bottom:25px;
}

h2{
font-size:clamp(2.2rem,4vw,3.5rem);
margin-bottom:20px;
letter-spacing:-0.03em;
}

.section h2,
.faq h2{
max-width:900px;
}

p{
color:var(--text);
}

.section-intro{
max-width:900px;
margin-bottom:50px;
}

/* ==================================================
BUTTONS
================================================== */

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:200px;
height:58px;
padding:0 30px;
border-radius:14px;
text-decoration:none;
font-weight:600;
transition:.3s ease;
}

.btn-primary{
background:var(--orange);
color:#000;
}

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

.btn-secondary{
border:1px solid rgba(255,255,255,.15);
color:#fff;
}

.btn-secondary:hover{
border-color:var(--green);
}

/* ==================================================
GENERIC CARDS
================================================== */

.card,
.benefit{
background:var(--bg2);
border:1px solid var(--border);
border-radius:20px;
padding:30px;
transition:.3s ease;
}

.card:hover,
.benefit:hover{
transform:translateY(-4px);
border-color:var(--green);
}

.card h3,
.benefit h3{
margin-bottom:15px;
}

.card p,
.benefit p{
font-size:.95rem;
}

/* ==================================================
HERO (INTACTO)
================================================== */

.hero{
position:relative;
min-height:900px;
display:flex;
align-items:flex-start;
padding-top:170px;
padding-bottom:120px;
background-image:url("/imgs/hero.png");
background-size:cover;
background-position:right center;
overflow:hidden;
}

.hero-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
90deg,
rgba(5,10,15,.92) 0%,
rgba(5,10,15,.82) 45%,
rgba(5,10,15,.45) 100%
);
}

.hero .container{
width:min(1200px,92%);
}

.hero-content{
position:relative;
z-index:2;
width:100%;
}

.hero-text{
max-width:680px;
}

.hero-badge{
display:inline-block;
padding:12px 20px;
border:1px solid var(--orange);
border-radius:999px;
color:var(--orange);
margin-bottom:25px;
font-size:.9rem;
font-weight:600;
}

.hero h1{
font-size:clamp(2.6rem,4.8vw,4.5rem);
line-height:1;
margin-bottom:24px;
letter-spacing:-0.04em;
}

.hero h1 span{
color:var(--orange);
}

.hero-description{
max-width:620px;
font-size:1.05rem;
line-height:1.8;
margin-bottom:40px;
}

.hero-features{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:25px;
margin-bottom:50px;
}

.feature{
display:flex;
align-items:center;
gap:15px;
}

.icon{
width:54px;
height:54px;
display:flex;
align-items:center;
justify-content:center;
border-radius:14px;
background:rgba(124,255,0,.08);
border:1px solid var(--orange);
color:var(--orange);
font-size:1.25rem;
}

.hero-buttons{
display:flex;
gap:20px;
margin-bottom:50px;
}


.workflow-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
    margin-bottom:30px;
}

.workflow-card{
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:20px;
    padding:25px;
    cursor:pointer;
    transition:.35s ease;
    min-height:230px;
}

.workflow-card:hover,
.workflow-card.active{
    border-color:var(green);
    transform:translateY(-6px);
}

.workflow-head span{
    display:block;
    font-size:2rem;
    font-weight:700;
    color:var(--orange);
    margin-bottom:15px;
}

.workflow-head h3{
    font-size:1.05rem;
    margin-bottom:12px;
}

.workflow-head small{
    display:block;
    color:var(--text);
    font-size:.85rem;
    line-height:1.6;
}

/* MOBILE BODY (oculto desktop) */

.workflow-body{
    display:none;
}

/* DESKTOP PANEL */

.workflow-panel{
    margin-top:30px;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:20px;
    overflow:hidden;
    max-height:0;
    opacity:0;
    padding:0 40px;
    transition:
        max-height .45s ease,
        opacity .35s ease,
        padding .35s ease;
}

.workflow-panel.open{
    max-height:500px;
    opacity:1;
    padding:40px;
}

.workflow-content{
    display:none;
}

.workflow-content.active{
    display:block;
}

.workflow-content p{
    font-size:1rem;
    line-height:1.9;
    max-width:1000px;
}

/* TABLET */

@media(max-width:1100px){
    .workflow-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

/* MOBILE */

@media(max-width:768px){

    .workflow-grid{
        grid-template-columns:1fr;
    }

    .workflow-panel{
        display:none;
    }

    .workflow-card{
        min-height:auto;
    }

    .workflow-body{
        display:block;
        max-height:0;
        opacity:0;
        overflow:hidden;
        transition:
            max-height .45s ease,
            opacity .3s ease,
            margin-top .35s ease;
    }

    .workflow-card.active .workflow-body{
        max-height:260px;
        opacity:1;
        margin-top:20px;
        overflow-y:auto;
        padding-right:8px;
    }

    .workflow-card.active .workflow-body::-webkit-scrollbar{
        width:6px;
    }

    .workflow-card.active .workflow-body::-webkit-scrollbar-thumb{
        background:var(--green);
        border-radius:20px;
    }
}

/* ==================================================
SERVICES
================================================== */

.services-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
}

/* ==================================================
BENEFITS
================================================== */

.benefits{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.benefit-icon{
width:70px;
height:70px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:25px;
border-radius:18px;
background:rgba(230,75,41,.08);
border:1px solid rgba(230,75,41,.18);
}

.benefit-icon i{
font-size:1.9rem;
color:var(--orange);
}

/* ==================================================
FAQ
================================================== */

.faq{
background:var(--bg2);
}

.faq details{
background:var(--bg);
border:1px solid var(--border);
border-radius:18px;
padding:25px;
margin-bottom:15px;
}

.faq summary{
cursor:pointer;
font-weight:600;
font-size:1.1rem;
}

.faq p{
margin-top:20px;
}

/* ==================================================
STATS
================================================== */

.stats .container{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}

.stat{
text-align:center;
}

.stat h3{
font-size:2rem;
color:var(--orange);
margin-bottom:10px;
}

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

.cta{
background:var(--bg2);
text-align:center;
}

.cta h2{
color:var(--white);
}

.cta p{
margin-bottom:40px;
}

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

.footer{
background:var(--bg2);
border-top:1px solid var(--border);
padding:80px 0 0;
}

.footer-grid{
display:grid;
grid-template-columns:1.4fr 1fr 1fr 1.4fr;
gap:40px;
align-items:start;
}

.footer h3,
.footer h4{
margin-bottom:20px;
}

.footer-brand p{
max-width:340px;
}

.footer-column ul{
list-style:none;
}

.footer-column li{
margin-bottom:14px;
}

.footer-column a{
color:var(--text);
text-decoration:none;
transition:.3s;
}

.footer-column a:hover{
color:var(--orange);
}

.footer-map iframe{
width:100%;
height:220px;
border:0;
border-radius:18px;
}

.footer-bottom{
margin-top:60px;
padding:25px 0;
border-top:1px solid var(--border);
}

.footer-bottom p{
text-align:center;
font-size:.9rem;
opacity:.7;
}

/* BRAND */

.footer-logo-wrap{
display:flex;
align-items:center;
gap:18px;
margin-bottom:20px;
}

.footer-logo{
width:68px;
height:auto;
object-fit:contain;
flex-shrink:0;
}

.footer-brand-text{
display:flex;
flex-direction:column;
justify-content:center;
}

.footer-brand-text h3{
margin:10px;
line-height:1;
color: var(--orange);
}

.footer-brand-text span{
font-size:.7rem;
color:var(--text);
letter-spacing:.04em;
text-transform:uppercase;
opacity:.75;
}

.footer-brand p{
max-width:340px;
}

/* ==================================================
WHATSAPP FLOAT
================================================== */

.whatsapp-float{
position:fixed;
right:30px;
bottom:30px;
z-index:999;
display:flex;
align-items:center;
gap:14px;
padding:14px 20px;
background:linear-gradient(135deg,#25D366,#1ebe5d);
color:#fff;
text-decoration:none;
border-radius:999px;
box-shadow:0 10px 30px rgba(0,0,0,.35);
transition:.35s ease;
font-weight:600;
}

.whatsapp-float:hover{
transform:translateY(-4px) scale(1.03);
}

.whatsapp-float i{
    font-size:2.4rem;
}

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

@media(max-width:900px){

.hero{
min-height:auto;
padding:140px 0;
}

.hero-features{
grid-template-columns:1fr;
}

.hero-buttons{
flex-direction:column;
}

.hero-buttons .btn{
width:100%;
}

.benefits{
grid-template-columns:1fr;
}

.stats .container{
grid-template-columns:1fr;
}

.footer-grid{
grid-template-columns:1fr;
}

}

@media(max-width:768px){

section{
padding:80px 0;
}

h2{
text-align:center;
}

.services-grid{
grid-template-columns:1fr;
}

.whatsapp-float{
right:20px;
bottom:20px;
width:60px;
height:60px;
padding:0;
justify-content:center;
}

.whatsapp-float span{
display:none;
}

.whatsapp-float i{
font-size:2rem;
}

}

.abs-catalog{
padding:110px 0;
background:var(--bg);
}

.catalog-intro{
max-width:800px;
margin-bottom:70px;
}

.catalog-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
align-items:start;
}

.catalog-card{
background:var(--bg2);
border:1px solid var(--border);
border-radius:22px;
padding:30px;
transition:.35s ease;
height: 100%;
display: flex;
flex-direction: column;
}

.catalog-card:hover{
transform:translateY(-6px);
border-color:rgba(230,75,41,.25);
}

.catalog-head{
margin-bottom:25px;
}

.catalog-head h2{
font-size:1.5rem;
margin-bottom:12px;
}

.catalog-head span{
display:inline-flex;
padding:8px 14px;
border-radius:999px;
font-size:.8rem;
font-weight:600;
background:rgba(230,75,41,.08);
border:1px solid rgba(230,75,41,.18);
color:var(--green);
}

.catalog-body {
    flex:1;
}

.catalog-body ul{
list-style:none;
display:flex;
flex-direction:column;
gap:14px;
}

.catalog-body li{
position:relative;
padding-left:18px;
color:var(--text);
font-size:.95rem;
}

.catalog-body li::before{
content:"";
position:absolute;
left:0;
top:10px;
width:6px;
height:6px;
border-radius:50%;
background:var(--green);
}

.featured{
border-color:rgba(230,75,41,.25);
}

.symptoms-card{
background:
linear-gradient(
180deg,
rgba(230,75,41,.06),
rgba(18,26,34,1)
);
}

.catalog-grid {
    align-items: stretch;
}

@media(max-width:1100px){
.catalog-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:768px){
.catalog-grid{
grid-template-columns:1fr;
}

.catalog-head h2{
font-size:1.3rem;
}
}