:root { 
        --bg:#ffffff; 
        --text:#111827; 
        --muted:#6b7280; 
        --light-grey: #f8f9fa;
        --grey: #506690;
        --brand:#f08000; 
        --brand-dark:#cc6d00; 
        --card:#f8fafc; 
        --ring: #e5e7eb; 
        --secondary-brand: #247ec6;
        --whatsapp: #25d366;
        --whatsapp-dark: #128c7e;
    }
    * {
        box-sizing:border-box
    }
    html {
        scroll-behavior:smooth;
        scroll-padding-top: 80px; /* alto del navbar */
    }
    body {
        margin:0;
        font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
        background:var(--bg);
        color:var(--text);
        line-height:1.6;
        /* letter-spacing: 0.05rem;
        word-spacing: 0.08rem; */
    }
    a {
        color:var(--brand);
        text-decoration:none;
    }
    a:hover {
        text-decoration:underline
    }

    a.btn {
        display: inline-flex;
        align-items: center;
    }

    a.btn svg {
        margin-right: 0.3rem !important;
    }

    img {
        max-width:100%;
        height:auto;
        display:block;
    }
    .rounded-img {
        border-radius: .375rem !important;
    }
    .container {
        width:min(1140px,92%);
        margin-inline:auto
    }
    .btn {
        display:inline-block;
        padding:.8rem 1.1rem;
        border-radius:50rem;
        background:var(--brand);
        color:#fff;
        font-weight:700;
        text-decoration: none;
        transition: transform .2s;
        cursor: pointer;
        }
    .btn:hover {
        transform: scale(1.1);
        background:var(--brand-dark);
        text-decoration: none;
    }
    
    .btn-whatsapp {
        background-color: var(--whatsapp) !important;
    }

    .btn-whatsapp:hover {
        background-color: var(--whatsapp-dark) !important;
    }
    
    .btn-inverted {
        color: var(--brand) !important;
        background-color: var(--bg) !important;
    }

    .btn-inverted:hover {
        background-color: var(--bg) !important;
    }

    header {
        position:sticky;
        top:0;
        z-index:50;
        background:rgba(255,255,255,.92);
        backdrop-filter:saturate(180%) blur(8px);
        border-bottom:1px solid var(--ring)
    }
    .topbar {
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:.75rem 0;
        
    }
    nav ul { 
        display:flex;
        gap:1rem;
        list-style:none;
        margin:0;
        padding:0
    }
    nav a {
        padding:.5rem .75rem;
        border-radius:.5rem
    }
    nav a:focus, nav a:hover {
        background:#e5f3fb
    }

    /* HERO */
    .hero {
        display:flex;
        gap:2rem;
        align-items:center;
        flex-wrap:wrap;
        padding:3.75rem 1rem 2.5rem;
        background-image:url('/public/img/kinesio-cuello.png');
        background-position:center;
        background-repeat:no-repeat;
        background-size: cover;
        position: relative;
    }
    .hero::before {
        opacity: .7;
        background-color: #161c2d;
        border-radius: inherit;
        bottom: 0;
        content: "";
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
    }
    h1 {font-size:3rem;line-height:1.2;margin:.25rem 0 .5rem;font-weight: 600 !important;}
    .hero p{font-size:1.06rem;color:var(--grey)}
    .badges{display:flex; flex-direction: column; flex-wrap:wrap;gap:.5rem;margin:1rem 0;}
    .badge { 
        display: flex; 
        align-items: center;
        padding:.4rem .6rem;border-radius:.5rem;}
    .badge svg {
        border-radius: 50rem !important;
        background-color: rgba(240, 128, 0, .1);
        color: var(--brand);
        margin-right: 1rem;
    }
    #hero-text {
        padding: 8rem;
        opacity: 1;
        z-index: 10;
        color: white;
        font-size: 3rem;
        text-align: center;
    }

    section {
        padding: 3.5rem 0 !important;
    }

    /* SECTIONS */
    .section {
        padding: 2.8rem 0
    }
    h2 { 
        font-size:1.95rem;
        margin:0 0 0 0
    }

    h3 {
        font-size:1.3rem;
    }
    .lead{color:var(--muted)}

    /* CARDS */
    .cards {
        display:flex;
        flex-wrap:wrap;
        gap:1rem
    }
    .cards .card {
        flex:1 1 calc(25% - 1rem);
        min-width:200px
    }
    .card {
        display: flex; 
        flex-direction: column; 
        border-radius: .375rem !important;
        width: 272px;
        box-shadow: 2px 7px 13px 0px rgba(0,0,0,0.2);
        overflow: hidden; 
        border-color: #000000;
    }

    .card-body{
        flex-grow: 1;
        padding: 1rem; 
    }

    /* STEPS / FEATURES */
    .features {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        flex-direction: row;
    }
    .features .feature {
        flex:1 1 calc(50% - 1rem);
        /* min-width:200px */
    }
    .feature {
        display: flex;
        text-align: start;
        padding:1rem;
        border-radius:1rem
    }
    .feature h4 {
        margin:0 0 .25rem;
    }

    .badge1 {
        border-radius: 50rem !important;
        background-color: rgba(240, 128, 0, .1);
        color: var(--brand);
        margin-right: 1rem;
        height: calc(1em + .5rem);
        padding-left: .7em;
        padding-right: .7em;
    }


    /* GRID SPLIT */
    .split{display:flex;gap:2rem;align-items:center;flex-wrap:wrap}.split > *{flex:1 1 320px}

    /* PREPAGAS */

    .prepagas {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
        flex-direction: row;
    }
    .prepaga {
        display: flex;
        text-align: center;
        padding:1rem;
        border-radius:1rem
    }
    .prepaga h4 {
        margin:0 0 .25rem;
    }
    
    /* FOOTER */
    footer{padding:2rem 0;border-top:1px solid var(--ring);background:#fbfdff}
    .footer-grid {
        display:flex;
        gap:1.5rem;
        flex-wrap:wrap;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    
    .legal{font-size:.9rem;color:var(--muted)}

    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

    .pill-text {
        border-radius: 50rem !important;
        background-color: rgba(240, 128, 0, .1);
        color: #f08000;
        text-transform: uppercase !important;
        letter-spacing: .08em !important;
        font-size: .75rem !important;
        padding: 0.25rem 0.75rem !important;
        margin-bottom: 2rem !important;
    }

    .circle-brand svg { 
        border-radius: 50rem !important;
        background-color: rgba(240, 128, 0, .1);
        color: var(--brand);
        margin-right: 1rem;
    }

    .d-flex {
        display: flex;
    }

    .m-0 {
        margin: 0 !important;
    }

    .mt-0 {
        margin-top: 0 !important;
    }

    .pb-1 {
        padding-bottom: 1rem;
    }

    .pb-2 {
        padding-bottom: 2rem;
    }

    .mb-6 {
        margin-bottom: 2rem !important;
    }
    .mt-6 {
        margin-top: 2rem !important;
    }

    .text-center {
        text-align: center;
    }

    .text-start {
        text-align: start;
    }

    .text-end {
        text-align: end;
    }

    .color-white {
        color: white !important;
    }

    .color-brand {
        color: var(--brand) !important;
    }

    .color-grey {
        color: var(--grey) !important;
    }

    .color-secondary-brand {
        color: var(--secondary-brand) !important;
    }

    .fs-1-3 {
        font-size: 1.3rem !important;
    }

    .fs-1-1 {
        font-size: 1.1rem !important;
    }

    .fw-400 {
        font-weight: 400 !important;
    }

    .bg-lgrey {
        background-color: var(--light-grey) !important;
    }

    .bg-secondary-brand {
        background-color: var(--secondary-brand) !important;
    }

    iframe {
        border:0 !important;
        padding: .25rem !important;
        background-color: var(--bg);
        border-radius: .375rem !important;
        box-shadow: 2px 7px 13px 0px rgba(0,0,0,0.2);
    }

    #tyc {
        cursor: pointer;
    }
    
    /* The Modal (background) */
    .modal-old {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 100px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content-old {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        padding: 0;
        border: 1px solid #888;
        width: 80%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
    }

    /* Add Animation */
    @-webkit-keyframes animatetop {
        from {top:-300px; opacity:0} 
        to {top:0; opacity:1}
    }

    @keyframes animatetop {
        from {top:-300px; opacity:0}
        to {top:0; opacity:1}
    }

    .modal-overlay {
        /* Basic overlay styling (e.g., position, background) */
        padding-top: 100px; /* Location of the box */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10000;
    }

    .modal-content {
        position: relative;
        background-color: white;
        z-index: 10000;
        margin: auto;
        padding: 0;
        border-radius: 15px; /* Applies rounded corners to the entire modal */
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        overflow: hidden; /* Ensures content within doesn't "poke out" of rounded corners */
        width: 400px; /* Example width */
        max-width: 90%;
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
    }

    .modal-header {
        padding: 15px;
        border-top-left-radius: 15px; /* Rounds top-left corner */
        border-top-right-radius: 15px; /* Rounds top-right corner */
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom:1px solid var(--ring);
    }

    .modal-footer {
        padding: 15px;
        border-bottom-left-radius: 15px; /* Rounds bottom-left corner */
        border-bottom-right-radius: 15px; /* Rounds bottom-right corner */
        text-align: right;
        border-top:1px solid var(--ring);
    }

    .modal-body {
        padding: 15px;
    }

    .close-button {
        cursor: pointer;
        font-size: 1.5em;
    }

    /* Add Animation */
    @-webkit-keyframes animatetop {
        from {top:-300px; opacity:0} 
        to {top:0; opacity:1}
    }

    @keyframes animatetop {
        from {top:-300px; opacity:0}
        to {top:0; opacity:1}
    }

    @media (max-width: 1000px){ .cards .card{flex:1 1 calc(50% - 1rem)} .features .feature{flex:1 1 calc(50% - 1rem)} #hero-text{font-size: 2.25rem;padding: 1rem;} .split-location{align-items: normal !important;}}
    @media (max-width: 860px) 
        { 
            .hero{flex-direction:column} 
            .split{flex-direction:column} 
            .footer-grid{flex-direction:column} 
            .cards .card{flex:1 1 100%} 
            .features .feature{flex:1 1 100%} 
            #location-text{text-align: center !important;} 
        }