:root{
    --biotreel-accent:#F7941D;
    --biotreel-teal:#3AA8A0;
    --biotreel-dark:#111;
    --biotreel-gray:#f5f7f8;
    --biotreel-text:#2d2d2d;

    /* Altura del navbar (ajusta si cambias el tamaño del logo) */
    --nav-height: 96px;
}

@media (max-width: 991.98px){
    :root{ --nav-height: 80px; }
}

html,body{
    font-family:"Montserrat",sans-serif;
    color:var(--biotreel-text);
    background:#fff;
    scroll-behavior:smooth;
}

/* ✅ Evita que el navbar tape el contenido */
body{
    padding-top: var(--nav-height);
}
/* ✅ Que los anclajes no queden ocultos bajo el navbar */
header, section{ scroll-margin-top: calc(var(--nav-height) + 16px); }

/* NAVBAR */
.navbar{
    background:#fff;
    box-shadow:0 2px 15px rgba(0,0,0,.05);
    transition:box-shadow .25s ease;
}
.navbar.scrolled{ box-shadow:0 4px 25px rgba(0,0,0,.08); }
.navbar-brand img{ height:84px; width:auto; } /* logo grande */
.nav-link{ color:var(--biotreel-dark); font-weight:600; margin:0 .6rem; }
.nav-link:hover{ color:var(--biotreel-teal); }
.btn-cta{
    background:var(--biotreel-accent); color:#fff; font-weight:700;
    border-radius:.6rem; padding:.5rem 1rem;
}

/* HERO */
header.hero{
    background:linear-gradient(180deg,#ffffff 0%,#f8fafa 100%);
}
.hero-wrap{ padding: 56px 0 90px; }
.hero-badge{
    display:inline-block; color:var(--biotreel-teal);
    background:rgba(58,168,160,.08); border:1px solid var(--biotreel-teal);
    font-weight:600; padding:.35rem .8rem; border-radius:999px; font-size:.9rem;
}
.accent-line{
    width:120px; height:4px; border-radius:10px;
    background:linear-gradient(90deg,var(--biotreel-accent),var(--biotreel-teal));
    margin:1rem 0;
}
.hero-title{
    font-size:clamp(2rem,3.5vw,3rem);
    font-weight:800; color:var(--biotreel-dark);
}
.hero-text{ color:#555; font-size:1.05rem; line-height:1.6; margin-top:1rem; }

.hero-tags{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.25rem; }
.hero-tag{
    background:rgba(247,148,29,.1); border:1px solid var(--biotreel-accent);
    color:var(--biotreel-accent); padding:.4rem .8rem; border-radius:.5rem; font-weight:600; font-size:.9rem;
}

/* Imagen lateral que cubre toda la altura del bloque de texto */
.hero-equal{
    align-items:stretch; /* columnas de igual altura */
}
.hero-visual{
    border-radius:1rem; overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.1);
    height:100%;
}
.hero-visual img{
    width:100%; height:100%; object-fit:cover; display:block;
}
@media (max-width:991.98px){
    .hero-visual{ height:360px; } /* altura razonable en móvil */
}

/* SERVICIOS (si ya lo tienes, puedes conservar tu versión) */
#servicios{ background:var(--biotreel-gray); padding:80px 0; }
.servicio-card{
    background:#fff; border-radius:1rem; border-top:4px solid transparent;
    box-shadow:0 4px 10px rgba(0,0,0,.05); padding:30px 20px; transition:transform .25s ease, box-shadow .25s ease;
}
.servicio-card:hover{ transform:translateY(-5px); box-shadow:0 8px 20px rgba(0,0,0,.08); }
.servicio-card.teal{ border-top-color:var(--biotreel-teal); }
.servicio-card.orange{ border-top-color:var(--biotreel-accent); }

/* FOOTER negro */
footer{
    background:#000; color:#fff;
}
.footer-top{ padding:64px 0 28px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding:16px 0; color:#cfcfcf; font-size:.95rem; }
footer a{ color:#fff; text-decoration:none; }
footer a:hover{ color:var(--biotreel-accent); }
footer .divider{
    height:2px; width:140px; background:linear-gradient(90deg,var(--biotreel-accent),var(--biotreel-teal));
    margin:14px 0 18px;
}
.footer-title{ font-weight:800; letter-spacing:.2px; }
.footer-list{ list-style:none; padding:0; margin:0; }
.footer-list li{ margin:.35rem 0; }

/* --- Ajustes de separación lateral --- */

/* HERO (separar texto e imagen de los bordes) */
.hero-wrap {
    padding: 56px 5vw 90px; /* ← agrega padding lateral proporcional */
}

/* FOOTER (mismos márgenes laterales y respiro superior/inferior) */
footer {
    background: #000;
    color: #fff;
    padding: 60px 5vw 25px; /* ← padding lateral agregado */
}

/* Ajustes adicionales */
.footer-top {
    padding: 0 0 28px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 20px 0;
    color: #cfcfcf;
    font-size: 0.95rem;
}






/* ===== Quiénes Somos ===== */
:root{
    --biotreel-accent:#F7941D;
    --biotreel-teal:#3AA8A0;
    --nav-height:96px; /* ya lo usas en tu layout */
}

/* Márgenes laterales acordes al resto del sitio + compensación del nav fijo */
.about-section{
    background:#ffffff;              /* alterna con la sección de servicios en gris claro */
    scroll-margin-top: calc(var(--nav-height) + 16px);
}
.about-wrap{
    padding: 72px 5vw 90px;          /* respiración lateral y vertical consistente */
}

/* Tipografía y elementos visuales */
.about-badge{
    display:inline-block;
    color:var(--biotreel-teal);
    background:rgba(58,168,160,.08);
    border:1px solid var(--biotreel-teal);
    font-weight:600;
    padding:.35rem .8rem;
    border-radius:999px;
    font-size:.9rem;
}
.about-accent-line{
    width:120px; height:4px; border-radius:10px;
    background:linear-gradient(90deg,var(--biotreel-accent),var(--biotreel-teal));
    margin:1rem 0 1.2rem;
}
.about-title{
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);
    font-weight:800;
    color:#111;
    margin-bottom:.6rem;
}
.about-text{
    color:#555;
    font-size:1.05rem;
    line-height:1.65;
}

/* Pilares (chips en tarjetas) */
.about-pillars .pillar-card{
    background:#fff;
    border-radius: .9rem;
    padding: .9rem 1rem;
    border-top: 4px solid transparent;
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
    display:flex; align-items:center; gap:.6rem;
}
.about-pillars .pillar-card h5{
    margin:0; font-weight:700; color:#111; font-size:1.05rem;
}
.about-pillars .pillar-card.teal{ border-top-color: var(--biotreel-teal); }
.about-pillars .pillar-card.orange{ border-top-color: var(--biotreel-accent); }
.pillar-dot{
    width:12px; height:12px; border-radius:999px;
    background:linear-gradient(90deg,var(--biotreel-accent),var(--biotreel-teal));
    flex:0 0 12px;
}

/* Imagen lateral con la misma altura del bloque de texto */
.about-equal{ align-items:stretch; }
.about-visual{
    border-radius:1rem; overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.10);
    height:100%;
}
.about-visual img{
    width:100%; height:100%; object-fit:cover; display:block;
}

/* Responsive */
@media (max-width: 991.98px){
    :root{ --nav-height:80px; }
    .about-visual{ height:360px; }   /* altura razonable en móvil */
}






/* ===== Nuestros Servicios ===== */
:root{
    --biotreel-accent:#F7941D;
    --biotreel-teal:#3AA8A0;
    --biotreel-dark:#111;
    --biotreel-gray:#f5f7f8;
    --nav-height:96px; /* ya lo usas en el layout */
}

.services-section{
    background:#ffffff; /* alterna con la sección gris para ritmo visual */
    scroll-margin-top: calc(var(--nav-height) + 16px);
}
.services-wrap{
    padding:72px 5vw 90px; /* respiración lateral coherente con el resto */
}

.services-badge{
    display:inline-block;
    color:var(--biotreel-teal);
    background:rgba(58,168,160,.08);
    border:1px solid var(--biotreel-teal);
    font-weight:600;
    padding:.35rem .8rem;
    border-radius:999px;
    font-size:.9rem;
}
.services-accent-line{
    width:120px; height:4px; border-radius:10px;
    background:linear-gradient(90deg,var(--biotreel-accent),var(--biotreel-teal));
    margin:1rem 0 1.2rem;
}
.services-intro{
    color:#555; font-size:1.05rem; line-height:1.65; max-width:1100px;
}

/* Tarjetas */
.service-card{
    background:#fff; border-radius:1rem;
    border-top:4px solid transparent;
    box-shadow:0 6px 16px rgba(0,0,0,.06);
    padding:22px 22px;
    transition:transform .2s ease, box-shadow .2s ease;
    height:100%;
}
.service-card h5{
    font-weight:800; color:#111; margin-bottom:.4rem; font-size:1.08rem;
}
.service-card p{
    color:#555; margin:0;
}
.service-card.teal{ border-top-color:var(--biotreel-teal); }
.service-card.orange{ border-top-color:var(--biotreel-accent); }
.service-card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 24px rgba(0,0,0,.08);
}

/* CTA final */
.services-cta{
    margin-top:20px;
    background:var(--biotreel-gray);
    border-radius:1rem;
    padding:20px 24px;
    box-shadow:0 6px 16px rgba(0,0,0,.04);
}
.services-cta .btn-cta{
    background:var(--biotreel-accent); color:#fff; font-weight:700; border-radius:.6rem;
    padding:.6rem 1.1rem;
}

/* Responsive */
@media (max-width: 991.98px){
    :root{ --nav-height:80px; }
    .services-wrap{ padding:60px 5vw 72px; }
}




/* ===== Productos ===== */
:root{
    --biotreel-accent:#F7941D;
    --biotreel-teal:#3AA8A0;
    --biotreel-dark:#111;
    --biotreel-gray:#f5f7f8;
    --nav-height:96px; /* coherente con tu layout actual */
}

.products-section{
    background:#ffffff; /* alterna con secciones en gris claro para ritmo visual */
    scroll-margin-top: calc(var(--nav-height) + 16px);
}
.products-wrap{
    padding:72px 5vw 90px; /* respiración lateral y vertical consistente */
}

.products-badge{
    display:inline-block;
    color:var(--biotreel-teal);
    background:rgba(58,168,160,.08);
    border:1px solid var(--biotreel-teal);
    font-weight:600;
    padding:.35rem .8rem;
    border-radius:999px;
    font-size:.9rem;
}
.products-accent-line{
    width:120px; height:4px; border-radius:10px;
    background:linear-gradient(90deg,var(--biotreel-accent),var(--biotreel-teal));
    margin:1rem 0 1.2rem;
}
.products-intro{
    color:#555; font-size:1.05rem; line-height:1.65; max-width:1100px;
}

/* Tarjetas de productos */
.product-card{
    background:#fff; border-radius:1rem;
    border-top:4px solid transparent;
    box-shadow:0 6px 16px rgba(0,0,0,.06);
    padding:22px 22px;
    transition:transform .2s ease, box-shadow .2s ease;
    height:100%;
}
.product-card h5{
    font-weight:800; color:#111; margin-bottom:.4rem; font-size:1.08rem;
}
.product-card p{
    color:#555; margin:0;
}
.product-card.teal{ border-top-color:var(--biotreel-teal); }
.product-card.orange{ border-top-color:var(--biotreel-accent); }
.product-card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 24px rgba(0,0,0,.08);
}

/* CTA final */
.products-cta{
    margin-top:20px;
    background:var(--biotreel-gray);
    border-radius:1rem;
    padding:20px 24px;
    box-shadow:0 6px 16px rgba(0,0,0,.04);
}
.products-cta .btn-cta{
    background:var(--biotreel-accent); color:#fff; font-weight:700; border-radius:.6rem;
    padding:.6rem 1.1rem;
}

/* Responsive */
@media (max-width: 991.98px){
    :root{ --nav-height:80px; }
    .products-wrap{ padding:60px 5vw 72px; }
}





/* ===== Cobertura y Alcance ===== */
:root{
    --biotreel-accent:#F7941D;
    --biotreel-teal:#3AA8A0;
    --biotreel-dark:#111;
    --biotreel-gray:#f5f7f8;
    --nav-height:96px; /* coherente con el layout actual */
}

.coverage-section{
    background:#ffffff;
    scroll-margin-top: calc(var(--nav-height) + 16px);
}
.coverage-wrap{
    padding:72px 5vw 90px; /* respiración lateral consistente */
}

/* Encabezado visual */
.coverage-badge{
    display:inline-block;
    color:var(--biotreel-teal);
    background:rgba(58,168,160,.08);
    border:1px solid var(--biotreel-teal);
    font-weight:600;
    padding:.35rem .8rem;
    border-radius:999px;
    font-size:.9rem;
}
.coverage-accent-line{
    width:120px; height:4px; border-radius:10px;
    background:linear-gradient(90deg,var(--biotreel-accent),var(--biotreel-teal));
    margin:1rem 0 1.2rem;
}
.coverage-title{
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);
    font-weight:800;
    color:#111;
    margin-bottom:.6rem;
}
.coverage-text{
    color:#555;
    font-size:1.05rem;
    line-height:1.65;
}

/* Chips / bullets visuales */
.coverage-chip{
    background:#fff;
    border-radius:.9rem;
    padding:.8rem 1rem;
    border-top:4px solid transparent;
    box-shadow:0 6px 16px rgba(0,0,0,.06);
    font-weight:600;
    color:#222;
    display:flex; align-items:center; gap:.55rem;
}
.coverage-chip.teal{ border-top-color:var(--biotreel-teal); }
.coverage-chip.orange{ border-top-color:var(--biotreel-accent); }
.chip-dot{
    width:12px; height:12px; border-radius:50%;
    background:linear-gradient(90deg,var(--biotreel-accent),var(--biotreel-teal));
    display:inline-block; flex:0 0 12px;
}

/* Imagen lateral con la misma altura del bloque de texto */
.coverage-equal{ align-items:stretch; }
.coverage-visual{
    border-radius:1rem; overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.10);
    height:100%;
}
.coverage-visual img{
    width:100%; height:100%; object-fit:cover; display:block;
}

/* Responsive */
@media (max-width: 991.98px){
    :root{ --nav-height:80px; }
    .coverage-wrap{ padding:60px 5vw 72px; }
    .coverage-visual{ height:360px; } /* altura razonable en móvil */
}





/* ===== Contacto (sin formulario) ===== */
:root{
    --biotreel-accent:#F7941D;
    --biotreel-teal:#3AA8A0;
    --biotreel-dark:#111;
    --biotreel-gray:#f5f7f8;
    --nav-height:96px; /* coherente con el layout actual */
}

.contact-section{
    background:#ffffff;
    scroll-margin-top: calc(var(--nav-height) + 16px);
}
.contact-wrap{
    padding:72px 5vw 90px; /* respiración lateral y vertical consistente */
}

/* Encabezado visual */
.contact-badge{
    display:inline-block;
    color:var(--biotreel-teal);
    background:rgba(58,168,160,.08);
    border:1px solid var(--biotreel-teal);
    font-weight:600;
    padding:.35rem .8rem;
    border-radius:999px;
    font-size:.9rem;
}
.contact-accent-line{
    width:120px; height:4px; border-radius:10px;
    background:linear-gradient(90deg,var(--biotreel-accent),var(--biotreel-teal));
    margin:1rem 0 1.2rem;
}
.contact-title{
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);
    font-weight:800;
    color:#111;
    margin-bottom:.6rem;
}
.contact-text{
    color:#555;
    font-size:1.05rem;
    line-height:1.65;
}

/* Tarjetas de contacto */
.contact-card{
    background:#fff; border-radius:1rem;
    border-top:4px solid transparent;
    box-shadow:0 6px 16px rgba(0,0,0,.06);
    padding:16px 18px;
    display:flex; gap:.8rem; align-items:flex-start;
}
.contact-card.teal{ border-top-color:var(--biotreel-teal); }
.contact-card.orange{ border-top-color:var(--biotreel-accent); }

.contact-icon{
    color:#111; background:#f3f6f7; border-radius:.7rem;
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; flex:0 0 40px;
}

.contact-link{ color:#111; text-decoration:underline; }
.contact-link:hover{ color:var(--biotreel-accent); }

.label{
    display:block; text-transform:uppercase; letter-spacing:.4px;
    color:#7a7a7a; font-weight:700; font-size:.75rem; margin-bottom:.1rem;
}

/* Imagen lateral igualando altura de texto */
.contact-equal{ align-items:stretch; }
.contact-visual{
    border-radius:1rem; overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.10);
    height:100%;
}
.contact-visual img{
    width:100%; height:100%; object-fit:cover; display:block;
}

/* Responsive */
@media (max-width: 991.98px){
    :root{ --nav-height:80px; }
    .contact-wrap{ padding:60px 5vw 72px; }
    .contact-visual{ height:340px; } /* altura razonable en móvil */
}