/* ======================================================
   SOUTH PHARM - ESTILOS GENERALES
   ====================================================== */

:root{
    --sp-blue:#0B4A75;
    --sp-cyan:#009FE3;
    --sp-light:#F4F7F9;
    --sp-white:#fff;
    --sp-font-heading:'Montserrat',sans-serif;
    --sp-font-body:'Inter',Arial,sans-serif;
    --sp-radius:12px;
    --sp-transition:.25s ease;
}

html{scroll-behavior:smooth}

body{
    margin:0;
    font-family:var(--sp-font-body);
    font-size:16px;
    line-height:1.65;
    color:var(--bs-body-color);
    background:var(--sp-white);
    -webkit-font-smoothing:antialiased;
}

body,button,input,select,textarea{font-family:var(--sp-font-body)}

h1,h2,h3,h4,h5,h6{
    margin-top:0;
    font-family:var(--sp-font-heading);
    color:var(--sp-blue);
    font-weight:700;
    line-height:1.15;
}

h1{font-size:clamp(2.25rem,4.2vw,4rem)}
h2{font-size:clamp(1.85rem,3vw,2.75rem)}
h3{font-size:1.15rem}

a{transition:color var(--sp-transition),background var(--sp-transition),border-color var(--sp-transition)}
img{max-width:100%;height:auto}

section[id]{scroll-margin-top:100px}

.sp-section{padding:100px 0}
.sp-section-alt{background:var(--sp-light)}

.sp-section-heading{max-width:820px}
.sp-section-heading p{max-width:720px;margin:1rem auto 0}

.sp-eyebrow{
    display:inline-block;
    margin-bottom:14px;
    color:var(--sp-cyan);
    font-family:var(--sp-font-heading);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.sp-lead{
    max-width:680px;
    margin:1.5rem 0 0;
    font-size:clamp(1.05rem,1.5vw,1.2rem);
}

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

.sp-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    min-height:48px;
    padding:.75rem 1.4rem;
    border:2px solid transparent;
    border-radius:8px;
    font-weight:600;
    line-height:1.2;
}

.sp-btn i{font-size:1.3rem}

.sp-btn-primary{
    color:var(--sp-white);
    background:var(--sp-blue);
    border-color:var(--sp-blue);
}

.sp-btn-primary:hover,
.sp-btn-primary:focus{
    color:var(--sp-white);
    background:var(--sp-cyan);
    border-color:var(--sp-cyan);
}

.sp-btn-accent{
    color:var(--sp-white);
    background:var(--sp-cyan);
    border-color:var(--sp-cyan);
}

.sp-btn-accent:hover,
.sp-btn-accent:focus{
    color:var(--sp-white);
    background:var(--sp-blue);
    border-color:var(--sp-blue);
}

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

.sp-header{
    position:sticky;
    top:0;
    z-index:1030;
    background:rgba(255,255,255,.98);
    border-bottom:1px solid rgba(11,74,117,.1);
}

.sp-header .navbar{
    padding:14px 0;
    transition:padding .3s cubic-bezier(.4,0,.2,1);
}


.sp-logo{
    display:block;
    width:auto;
    height:75px;
    max-width:190px;
    object-fit:contain;
    transition:height .3s cubic-bezier(.4,0,.2,1);
}

.sp-header.is-scrolled .navbar{
    padding:7px 0;
}

.sp-header.is-scrolled .sp-logo{
    height:40px;
}

.sp-header .nav-link{
    color:var(--sp-blue);
    font-weight:500;
}

.sp-header .nav-link:hover,
.sp-header .nav-link:focus{color:var(--sp-cyan)}

/* ======================================================
   HERO / CARRUSEL PRINCIPAL
   ====================================================== */

.sp-hero{
    position:relative;
    overflow:hidden;
    background:var(--sp-light);
}

.sp-hero-viewport{
    position:relative;
    width:100%;
    overflow:hidden;
}

.sp-hero-track{
    display:flex;
    align-items:stretch;
    width:100%;
    transition:transform .55s cubic-bezier(.4,0,.2,1);
    will-change:transform;
}

.sp-hero-slide{
    position:relative;
    flex:0 0 100%;
    width:100%;
    min-width:0;
    overflow:hidden;
}

/* ======================================================
   SLIDE 01 / HERO ACTUAL
   ====================================================== */

.sp-hero-slide--main{
    display:flex;
    align-items:center;
    min-height:720px;
    background:var(--sp-light);
}

.sp-hero-container{
    position:relative;
    z-index:2;
}

.sp-hero-content{
    position:relative;
    max-width:660px;
    padding:80px 45px 80px 0;
}

.sp-hero h1{
    max-width:650px;
    margin-bottom:0;
    font-size:clamp(2.35rem,3.35vw,3.4rem);
    line-height:1.08;
    letter-spacing:-.025em;
}

.sp-hero .sp-eyebrow{
    margin-bottom:18px;
}

.sp-hero .sp-lead{
    max-width:610px;
    margin:24px 0 0;
    font-size:1.05rem;
    line-height:1.7;
}

.sp-hero-note{
    display:flex;
    align-items:center;
    gap:.45rem;
    color:var(--sp-blue);
    font-size:.9rem;
    font-weight:500;
}

.sp-hero-note i{
    color:var(--sp-cyan);
    font-size:1.2rem;
}

.sp-hero-media{
    position:absolute;
    inset:0;
    z-index:0;
}

.sp-hero-media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

.sp-hero-slide--main::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(
        90deg,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.99) 29%,
        rgba(255,255,255,.94) 38%,
        rgba(255,255,255,.72) 48%,
        rgba(255,255,255,.24) 61%,
        rgba(255,255,255,0) 72%
    );
}

/* ======================================================
   SLIDE 02 / IMAGEN COMPLETA
   ====================================================== */

.sp-hero-slide--image{
    min-height:720px;
    background:var(--sp-light);
}

.sp-hero-slide--image > img{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

/* ======================================================
   FLECHAS
   ====================================================== */

.sp-hero-arrow{
    position:absolute;
    top:50%;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid rgba(11,74,117,.14);
    border-radius:50%;
    color:var(--sp-blue);
    background:rgba(255,255,255,.88);
    box-shadow:0 3px 14px rgba(11,74,117,.08);
    transform:translateY(-50%);
    transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease;
    cursor:pointer;
}

.sp-hero-arrow i{
    font-size:1.7rem;
    line-height:1;
}

.sp-hero-arrow--prev{
    left:24px;
}

.sp-hero-arrow--next{
    right:24px;
}

.sp-hero-arrow:hover,
.sp-hero-arrow:focus-visible{
    color:var(--sp-white);
    background:var(--sp-cyan);
    border-color:var(--sp-cyan);
}

.sp-hero-arrow--prev:hover{
    transform:translateY(-50%) translateX(-2px);
}

.sp-hero-arrow--next:hover{
    transform:translateY(-50%) translateX(2px);
}

/* ======================================================
   DOTS
   ====================================================== */

.sp-hero-dots{
    position:absolute;
    left:50%;
    bottom:24px;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:7px 10px;
    border-radius:20px;
    background:rgba(255,255,255,.82);
    transform:translateX(-50%);
    backdrop-filter:blur(5px);
}

.sp-hero-dot{
    width:8px;
    height:8px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(11,74,117,.35);
    transition:width .25s ease,background .25s ease,border-radius .25s ease;
    cursor:pointer;
}

.sp-hero-dot.is-active{
    width:24px;
    border-radius:10px;
    background:var(--sp-cyan);
}

/* ======================================================
   ESTADOS DE FOCO
   ====================================================== */

.sp-hero-arrow:focus-visible,
.sp-hero-dot:focus-visible{
    outline:3px solid rgba(0,159,227,.35);
    outline-offset:3px;
}

/* ======================================================
   FRANJA DE CONFIANZA
   ====================================================== */

.sp-trust{
    background:var(--sp-blue);
    color:var(--sp-white);
}

.sp-trust-item{
    display:flex;
    align-items:center;
    gap:14px;
    min-height:120px;
    padding:24px;
    border-right:1px solid rgba(255,255,255,.2);
}

.sp-trust .col-lg-3:last-child .sp-trust-item{border-right:0}

.sp-trust-item > i{
    flex:0 0 auto;
    color:var(--sp-cyan);
    font-size:2rem;
}

.sp-trust-item strong,
.sp-trust-item span{display:block}

.sp-trust-item strong{
    margin-bottom:3px;
    font-family:var(--sp-font-heading);
    font-size:.95rem;
}

.sp-trust-item span{
    color:rgba(255,255,255,.78);
    font-size:.85rem;
    line-height:1.4;
}

/* ======================================================
   CARDS / DIFERENCIALES
   ====================================================== */

.sp-card,
.sp-product-card{
    padding:32px;
    background:var(--sp-white);
    border:1px solid rgba(11,74,117,.14);
    border-radius:var(--sp-radius);
}

.sp-card p,
.sp-product-card p{margin-bottom:0}

.sp-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
    margin-bottom:24px;
    border-radius:50%;
    background:var(--sp-light);
    color:var(--sp-cyan);
    font-size:1.8rem;
}

.sp-card h3{margin-bottom:14px}

/* ======================================================
   PRODUCTOS Y REPRESENTACIÓN ANPEL
   ====================================================== */

.sp-anpel{
    overflow:hidden;
    background:var(--sp-light);
}

.sp-anpel-intro{
    margin-bottom:70px;
}

.sp-anpel-intro h2{
    max-width:560px;
    margin-bottom:0;
}

.sp-anpel-lead{
    max-width:560px;
    margin:24px 0 0;
    font-size:1.05rem;
    line-height:1.75;
}

.sp-anpel-brand{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    margin-top:35px;
}

.sp-anpel-brand span{
    color:var(--sp-blue);
    font-family:var(--sp-font-heading);
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.sp-anpel-brand img{
    display:block;
    width:auto;
    max-width:230px;
    height:auto;
}

/* Fábrica */

.sp-anpel-factory{
    position:relative;
    overflow:hidden;
    border-radius:var(--sp-radius);
}

.sp-anpel-factory::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border:1px solid rgba(11,74,117,.12);
    border-radius:inherit;
}

.sp-anpel-factory img{
    display:block;
    width:100%;
    height:440px;
    object-fit:cover;
    object-position:center;
}

/* Categorías */

.sp-anpel-categories{
    margin-top:20px;
}

.sp-anpel-card{
    overflow:hidden;
    background:var(--sp-white);
    border:1px solid rgba(11,74,117,.12);
    border-radius:var(--sp-radius);
}

.sp-anpel-card-media{
    overflow:hidden;
    background:#fff;
    aspect-ratio:1/1;
}

.sp-anpel-card-media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .4s ease;
}

.sp-anpel-card:hover .sp-anpel-card-media img{
    transform:scale(1.025);
}

.sp-anpel-card-body{
    position:relative;
    padding:30px 32px 34px;
}

.sp-anpel-card-number{
    display:block;
    margin-bottom:12px;
    color:var(--sp-cyan);
    font-family:var(--sp-font-heading);
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.1em;
}

.sp-anpel-card h3{
    max-width:470px;
    margin-bottom:14px;
    font-size:1.25rem;
}

.sp-anpel-card p{
    max-width:500px;
    margin-bottom:0;
    line-height:1.7;
}

/* Recursos técnicos */

.sp-anpel-resources{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    margin-top:50px;
    padding:32px 36px;
    background:var(--sp-white);
    border-left:4px solid var(--sp-cyan);
    border-radius:0 var(--sp-radius) var(--sp-radius) 0;
}

.sp-anpel-resources-label{
    display:block;
    margin-bottom:5px;
    color:var(--sp-cyan);
    font-family:var(--sp-font-heading);
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.sp-anpel-resources p{
    margin:0;
    color:var(--sp-blue);
    font-family:var(--sp-font-heading);
    font-size:1.05rem;
    font-weight:600;
}

/* ======================================================
   FORMULARIO
   ====================================================== */

.sp-quote-section{background:var(--sp-white)}

.sp-form{
    padding:40px;
    background:var(--sp-light);
    border:1px solid rgba(11,74,117,.14);
    border-radius:var(--sp-radius);
}

.sp-form .form-label{
    color:var(--sp-blue);
    font-size:.9rem;
    font-weight:600;
}

.sp-form .form-control,
.sp-form .form-select{
    min-height:50px;
    padding:.7rem .9rem;
    border-color:rgba(11,74,117,.22);
    border-radius:7px;
    background-color:var(--sp-white);
}

.sp-form textarea.form-control{
    min-height:150px;
    resize:vertical;
}

.sp-form .form-control:focus,
.sp-form .form-select:focus{
    border-color:var(--sp-cyan);
    box-shadow:0 0 0 .2rem rgba(0,159,227,.12);
}

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

.sp-footer{
    padding:70px 0 0;
    color:rgba(255,255,255,.8);
    background:var(--sp-blue);
}

.sp-footer-logo{
    display:block;
    width:auto;
    max-width:190px;
    height:auto;
}

.sp-footer p{
    font-size:.9rem;
    line-height:1.6;
}

.sp-footer-title{
    margin-bottom:20px;
    color:var(--sp-white);
    font-size:1.1rem;
}

.sp-footer address{
    display:flex;
    flex-direction:column;
    gap:10px;
    font-style:normal;
}

.sp-footer address a,
.sp-footer address span{
    display:flex;
    align-items:center;
    gap:.6rem;
    color:rgba(255,255,255,.82);
    font-size:.9rem;
    text-decoration:none;
}

.sp-footer address a:hover,
.sp-footer address a:focus{
    color:var(--sp-cyan);
}

.sp-footer address i{
    flex:0 0 auto;
    color:var(--sp-cyan);
    font-size:1.05rem;
}

.sp-footer-bottom{
    margin-top:42px;
    padding:18px 0;
    border-top:1px solid rgba(255,255,255,.15);
    color:rgba(255,255,255,.58);
    font-size:.72rem;
    line-height:1.4;
}

.sp-footer-signature{
    display:inline-flex;
    align-items:center;
    gap:.3rem;
    white-space:nowrap;
    font-size:.68rem;
    letter-spacing:.02em;
    opacity:.65;
}

.sp-footer-signature strong{
    color:rgba(255,255,255,.9);
    font-weight:600;
}

.sp-footer-legal a{
    color:rgba(255,255,255,.58);
    text-decoration:none;
    transition:color .2s ease;
}

.sp-footer-legal a:hover,
.sp-footer-legal a:focus{
    color:var(--sp-white);
    text-decoration:underline;
}

/* ======================================================
   TÉRMINOS Y CONDICIONES
   ====================================================== */

.sp-legal-page{
    background:var(--sp-light);
}

.sp-legal{
    min-height:calc(100vh - 180px);
    padding:70px 0 90px;
}

.sp-legal-header{
    margin-bottom:36px;
    padding-bottom:28px;
    border-bottom:1px solid rgba(11,74,117,.14);
}

.sp-legal-logo{
    display:block;
    width:auto;
    max-width:190px;
    height:auto;
}

.sp-legal-eyebrow{
    display:block;
    margin-bottom:8px;
    color:var(--sp-cyan);
    font-family:var(--sp-font-heading);
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.sp-legal-header h1{
    margin:0;
    color:var(--sp-blue);
    font-size:clamp(2rem,4vw,3rem);
}

.sp-legal-intro{
    max-width:860px;
    margin-bottom:32px;
    color:#495057;
    font-size:1rem;
    line-height:1.75;
}

.sp-legal-accordion{
    overflow:hidden;
    border:1px solid rgba(11,74,117,.12);
    border-radius:12px;
    background:var(--sp-white);
}

.sp-legal-accordion .accordion-item{
    border:0;
    border-bottom:1px solid rgba(11,74,117,.1);
}

.sp-legal-accordion .accordion-item:last-child{
    border-bottom:0;
}

.sp-legal-accordion .accordion-button{
    padding:22px 24px;
    color:var(--sp-blue);
    background:var(--sp-white);
    font-family:var(--sp-font-heading);
    font-size:1rem;
    font-weight:600;
    line-height:1.4;
    box-shadow:none;
}

.sp-legal-accordion .accordion-button:not(.collapsed){
    color:var(--sp-white);
    background:var(--sp-blue);
}

.sp-legal-accordion .accordion-button:focus{
    border-color:transparent;
    box-shadow:0 0 0 .2rem rgba(0,159,227,.15);
}

.sp-legal-accordion .accordion-button::after{
    filter:none;
}

.sp-legal-accordion .accordion-button:not(.collapsed)::after{
    filter:brightness(0) invert(1);
}

.sp-legal-accordion .accordion-body{
    padding:24px;
    color:#444;
    font-size:.95rem;
    line-height:1.75;
    background:#fff;
}

.sp-legal-accordion .accordion-body p:last-child{
    margin-bottom:0;
}

.sp-legal-accordion .accordion-body a{
    color:var(--sp-cyan);
    text-decoration:none;
}

.sp-legal-accordion .accordion-body a:hover,
.sp-legal-accordion .accordion-body a:focus{
    color:var(--sp-blue);
    text-decoration:underline;
}

.sp-legal-accordion .accordion-body ul{
    margin-bottom:1.25rem;
    padding-left:1.25rem;
}

.sp-legal-actions{
    margin-top:32px;
}

.sp-legal-footer{
    padding:36px 0;
    color:var(--sp-blue);
    border-top:solid 3px var(--sp-blue);
    background:rgba(255,255,255,.7);
    font-size:.8rem;
}

.sp-legal-footer-logo{
    display:block;
    width:auto;
    max-width:150px;
    height:auto;
    margin:0 auto 16px;
}