:root{
    --ink:#101214;
    --ink-2:#17191d;
    --paper:#ffffff;
    --paper-2:#f5f6f7;
    --line:#e4e6e8;
    --muted:#68717b;
    --gold:#f5ae22;
    --gold-2:#d88d09;
    --gold-soft:#fff4d7;
    --green:#25d366;
    --container:1180px;
    --radius:22px;
    --shadow:0 24px 70px rgba(16,18,20,.12);
}

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

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:94px;
    overflow-x:hidden;
}

body{
    margin:0;
    width:100%;
    min-width:0;
    max-width:100%;
    overflow-x:hidden;
    background:var(--paper);
    color:var(--ink);
    font-family:Inter,system-ui,sans-serif;
    line-height:1.65;
}

body.menu-lock{
    overflow:hidden;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

video{
    max-width:100%;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
select,
textarea{
    font:inherit;
    max-width:100%;
}

button,
a{
    touch-action:manipulation;
}

button{
    cursor:pointer;
}

.container{
    width:min(var(--container),calc(100% - 40px));
    max-width:100%;
    margin-inline:auto;
    min-width:0;
}

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

.eyebrow{
    margin:0 0 13px;
    color:#a66d05;
    font-size:.73rem;
    font-weight:800;
    letter-spacing:.18em;
}

h1,
h2,
h3{
    margin:0 0 18px;
    line-height:1.08;
    letter-spacing:-.035em;
    overflow-wrap:break-word;
}

h1,
h2{
    font-family:Oswald,Inter,sans-serif;
    font-weight:600;
}

h1{
    font-size:clamp(2.8rem,6vw,6.2rem);
}

h2{
    font-size:clamp(2.15rem,4vw,4rem);
}

h3{
    font-size:1.12rem;
}

p{
    color:var(--muted);
    overflow-wrap:break-word;
}

.text-gold{
    color:var(--gold);
}

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

.btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:52px;
    max-width:100%;
    padding:0 22px;
    border-radius:12px;
    border:1px solid transparent;
    font-weight:800;
    text-align:center;
    overflow:hidden;
    white-space:normal;
    overflow-wrap:break-word;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        background .35s ease;
}

.btn::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        110deg,
        transparent 35%,
        rgba(255,255,255,.34),
        transparent 65%
    );
    transform:translateX(-130%);
    transition:transform .65s ease;
}

.btn:hover::after{
    transform:translateX(130%);
}

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

.btn-primary{
    background:var(--gold);
    color:#161616;
    box-shadow:0 13px 35px rgba(245,174,34,.25);
}

.btn-primary:hover{
    background:#ffbd35;
    box-shadow:0 18px 42px rgba(245,174,34,.34);
}

.btn-dark{
    background:var(--ink);
    color:#fff;
}

.btn-outline{
    background:transparent;
    border-color:var(--line);
}

.btn-outline:hover{
    border-color:var(--gold);
    background:rgba(238, 185, 106, 0.34)!important;;
    color: rgba(0, 0, 0, 0.993) !important;
}

/* =========================================================
   SECTIONS
========================================================= */

.section{
    padding:100px 0;
    width:100%;
    overflow:hidden;
}

.section-dark{
    background:var(--ink);
    color:#fff;
}

.section-soft{
    background:var(--paper-2);
}

.section-heading{
    max-width:760px;
    margin-bottom:48px;
}

.section-heading p:last-child{
    max-width:650px;
}

.skip-link{
    position:fixed;
    left:15px;
    top:15px;
    z-index:10000;
    padding:10px 14px;
    background:#fff;
    border-radius:8px;
    transform:translateY(-150%);
    transition:transform .2s;
}

.skip-link:focus{
    transform:none;
}

/* =========================================================
   HEADER — MATSAN PREMIUM / EMPRESARIAL
========================================================= */


.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;

    background-color: #ffffff;

    /*
       Retícula técnica muy sutil
    */
    background-image:
        linear-gradient(
            90deg,
            rgba(16,18,20,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            0deg,
            rgba(16,18,20,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            135deg,
            transparent 48%,
            rgba(245,174,34,.045) 49%,
            rgba(245,174,34,.045) 50%,
            transparent 51%
        );

    background-size:
        42px 42px,
        42px 42px,
        120px 120px;

    background-position:
        center,
        center,
        center;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(16,18,20,.08);

    transition:
        background .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

/* Capa de limpieza para que la retícula no sea demasiado visible */

.site-header::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.72),
            rgba(255,255,255,.88) 50%,
            rgba(255,255,255,.72)
        );

    pointer-events: none;
}


/* Línea dorada inferior */

.site-header::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 20%,
            var(--gold) 50%,
            transparent 80%,
            transparent 100%
        );

    transform: scaleX(0);
    transform-origin: center;

    animation:
        header-line-in 1.2s cubic-bezier(.16,1,.3,1) .35s forwards;
}


/* Mantener contenido encima de la retícula */

.header-inner {
    position: relative;
    z-index: 2;
}

/* Estado al hacer scroll */
.site-header.is-scrolled {
    background: rgba(255, 255, 255, .985);

    border-bottom-color: rgba(16, 18, 20, .10);

    box-shadow:
        0 10px 30px rgba(16, 18, 20, .08),
        0 2px 8px rgba(16, 18, 20, .04);
}


/* =========================================================
   CONTENEDOR
========================================================= */

.header-inner {
    min-height: 88px;

    display: flex;
    align-items: center;

    gap: 28px;

    min-width: 0;
}


/* =========================================================
   LOGO
========================================================= */

.brand {
    position: relative;

    display: flex;
    align-items: center;

    flex: 0 1 auto;
    min-width: 0;

    text-decoration: none;

    animation:
        logo-enter .9s cubic-bezier(.16,1,.3,1) both;

    transform-origin: left center;
}

.brand img {
    display: block;

    width: 190px;
    max-width: 100%;
    height: auto;

    object-fit: contain;

    transition:
        transform .35s cubic-bezier(.16,1,.3,1),
        filter .35s ease;
}

/* pequeño detalle dorado detrás del logo */
.brand::before {
    content: "";

    position: absolute;

    left: -10px;
    top: 50%;

    width: 4px;
    height: 0;

    border-radius: 10px;

    background: var(--gold);

    transform: translateY(-50%);

    transition:
        height .35s ease,
        box-shadow .35s ease;
}

.brand:hover::before {
    height: 48px;

    box-shadow:
        0 0 12px rgba(245,174,34,.35);
}

.brand:hover img {
    transform: translateX(3px) scale(1.025);

    filter:
        drop-shadow(0 6px 10px rgba(16,18,20,.10));
}


/* =========================================================
   ANIMACIÓN LOGO
========================================================= */

@keyframes logo-enter {

    0% {
        opacity: 0;
        transform:
            translateX(-70px)
            scale(.92);
    }

    65% {
        opacity: 1;
        transform:
            translateX(7px)
            scale(1.015);
    }

    100% {
        opacity: 1;
        transform:
            translateX(0)
            scale(1);
    }
}


/* =========================================================
   LÍNEA DORADA
========================================================= */

@keyframes header-line-in {

    from {
        transform: scaleX(0);
        opacity: 0;
    }

    to {
        transform: scaleX(1);
        opacity: 1;
    }
}


/* =========================================================
   NAVEGACIÓN
========================================================= */

.main-nav {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 4px;

    min-width: 0;
}

.main-nav > a {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 11px 15px;

    color: #515861;

    font-size: .87rem;
    font-weight: 750;

    text-decoration: none;

    border-radius: 10px;

    transition:
        color .25s ease,
        background .25s ease,
        transform .25s ease;
}


/* =========================================================
   LÍNEA ANIMADA DE LOS ENLACES
========================================================= */

.main-nav > a:not(.nav-quote)::after {
    content: "";

    position: absolute;

    left: 15px;
    right: 15px;

    bottom: 5px;

    height: 2px;

    border-radius: 20px;

    background: var(--gold);

    transform:
        scaleX(0)
        translateY(2px);

    transform-origin: center;

    opacity: 0;

    transition:
        transform .3s cubic-bezier(.16,1,.3,1),
        opacity .25s ease;
}


/* Hover */

.main-nav > a:not(.nav-quote):hover {
    color: var(--ink);

    background:
        linear-gradient(
            135deg,
            rgba(245,174,34,.12),
            rgba(245,174,34,.04)
        );

    transform: translateY(-2px);
}

.main-nav > a:not(.nav-quote):hover::after {
    transform:
        scaleX(1)
        translateY(0);

    opacity: 1;
}


/* =========================================================
   ENLACE ACTIVO
========================================================= */

.main-nav > a:not(.nav-quote).is-active {
    color: var(--ink);

    background:
        linear-gradient(
            135deg,
            rgba(16,18,20,.08),
            rgba(245,174,34,.10)
        );

    box-shadow:
        inset 0 -2px 0 var(--gold);
}

.main-nav > a:not(.nav-quote).is-active::after {
    transform:
        scaleX(.55)
        translateY(0);

    opacity: 1;
}


/* =========================================================
   BOTÓN COTIZACIÓN
========================================================= */

.nav-quote {
    position: relative;

    margin-left: 8px;

    padding: 12px 19px !important;

    color: #fff !important;

    background: var(--ink) !important;

    border-radius: 11px !important;

    font-weight: 850 !important;

    overflow: hidden;

    box-shadow:
        0 7px 18px rgba(16,18,20,.16);

    transition:
        transform .3s cubic-bezier(.16,1,.3,1),
        box-shadow .3s ease,
        background .3s ease;
}


/* Brillo que cruza el botón */

.nav-quote::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.32),
            transparent
        );

    transform: skewX(-20deg);

    transition: left .6s ease;
}

.nav-quote:hover::before {
    left: 140%;
}

.nav-quote:hover {
    background: var(--gold) !important;

    color: var(--ink) !important;

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 28px rgba(245,174,34,.28);
}

.nav-quote span {
    display: inline-block;

    margin-left: 5px;

    color: var(--gold);

    transition:
        color .25s ease,
        transform .3s ease;
}

.nav-quote:hover span {
    color: var(--ink);

    transform:
        translate(3px,-2px);
}


/* =========================================================
   TELÉFONO — ANIMACIÓN CONTINUA
========================================================= */

.header-phone {
    display: flex;
    align-items: center;
    gap: 9px;

    padding-left: 5px;

    color: #343a40;

    font-size: .82rem;
    font-weight: 800;

    white-space: nowrap;
    text-decoration: none;

    transition:
        color .3s ease,
        transform .3s ease;
}


/* Número telefónico */
.header-phone > span:last-child {
    display: inline-block;

    animation:
        phone-number-pulse 4s ease-in-out infinite;
}


/* Círculo del teléfono */
.phone-dot {
    position: relative;

    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: rgba(245,174,34,.12);

    color: var(--gold-2);

    border:
        1px solid rgba(245,174,34,.20);

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease;

    animation:
        phone-icon-pulse 4s ease-in-out infinite;
}


/* Anillo exterior */
.phone-dot::before {
    content: "";

    position: absolute;

    inset: -4px;

    border:
        1px solid rgba(245,174,34,.22);

    border-radius: 50%;

    opacity: 0;

    transform: scale(.75);

    animation:
        phone-ring 4s ease-out infinite;
}


/* =========================================================
   ANIMACIÓN DEL NÚMERO
========================================================= */

@keyframes phone-number-pulse {

    0%,
    65%,
    100% {
        color: #343a40;

        transform: translateX(0);

        text-shadow: none;
    }

    70% {
        color: var(--gold-2);

        transform: translateX(2px);

        text-shadow:
            0 0 12px rgba(245,174,34,.25);
    }

    76% {
        color: var(--ink);

        transform: translateX(0);

        text-shadow: none;
    }
}


/* =========================================================
   ANIMACIÓN DEL ICONO
========================================================= */

@keyframes phone-icon-pulse {

    0%,
    65%,
    100% {
        transform: scale(1);

        background: rgba(245,174,34,.12);

        box-shadow: none;
    }

    70% {
        transform:
            scale(1.13)
            rotate(-6deg);

        background: rgba(245,174,34,.24);

        box-shadow:
            0 0 0 5px rgba(245,174,34,.06),
            0 5px 18px rgba(245,174,34,.22);
    }

    76% {
        transform: scale(1);

        background: rgba(245,174,34,.12);

        box-shadow: none;
    }
}


/* =========================================================
   ANILLO EXPANSIVO
========================================================= */

@keyframes phone-ring {

    0%,
    65% {
        opacity: 0;

        transform: scale(.75);
    }

    70% {
        opacity: 1;

        transform: scale(1);
    }

    82%,
    100% {
        opacity: 0;

        transform: scale(1.35);
    }
}


/* =========================================================
   HOVER
========================================================= */

.header-phone:hover {
    color: var(--gold-2);

    transform: translateY(-1px);
}

.header-phone:hover .phone-dot {
    transform:
        scale(1.08)
        rotate(-7deg);

    background: var(--gold);

    color: var(--ink);

    box-shadow:
        0 6px 18px rgba(245,174,34,.28);
}


/* =========================================================
   BOTÓN MENÚ MOBILE
========================================================= */

.nav-toggle {
    display: none;

    margin-left: auto;

    width: 44px;
    height: 44px;

    border:
        1px solid rgba(16,18,20,.10);

    background: #fff;

    border-radius: 11px;

    cursor: pointer;

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.nav-toggle:hover {
    border-color:
        rgba(245,174,34,.45);

    background:
        rgba(245,174,34,.06);

    box-shadow:
        0 5px 18px rgba(16,18,20,.08);
}

.nav-toggle span:not(.sr-only) {
    display: block;

    width: 23px;
    height: 2px;

    margin: 5px auto;

    background: var(--ink);

    border-radius: 10px;

    transition:
        transform .25s ease,
        opacity .25s ease;
}


/* Hamburguesa → X */

.nav-open .nav-toggle span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}

.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
}

.nav-open .nav-toggle span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .header-inner {
        gap: 15px;
    }

    .brand img {
        width: 165px;
    }

    .main-nav > a {
        padding-inline: 10px;

        font-size: .80rem;
    }

    .header-phone {
        font-size: .74rem;
    }
}


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

@media (max-width: 850px) {

    .header-inner {
        min-height: 76px;
    }

    .brand img {
        width: 155px;
    }

    .nav-toggle {
        display: block;
    }

    .header-phone {
        display: none;
    }


    /* menú desplegable */

    .main-nav {
        position: absolute;

        top: calc(100% + 10px);

        left: 15px;
        right: 15px;

        margin: 0;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 6px;

        padding: 12px;

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

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);

        border:
            1px solid rgba(16,18,20,.09);

        border-radius: 17px;

        box-shadow:
            0 20px 50px rgba(16,18,20,.16);

        opacity: 0;
        visibility: hidden;

        transform:
            translateY(-12px)
            scale(.98);

        transition:
            opacity .25s ease,
            visibility .25s ease,
            transform .25s ease;
    }

    .nav-open .main-nav {
        opacity: 1;

        visibility: visible;

        transform:
            translateY(0)
            scale(1);
    }


    .main-nav > a {
        width: 100%;

        justify-content: flex-start;

        padding: 13px 15px;

        color: #42484f;

        font-size: .92rem;
    }

    .main-nav > a:not(.nav-quote)::after {
        left: 15px;
        right: auto;

        width: 30px;
    }

    .main-nav .nav-quote {
        justify-content: center;

        margin: 5px 0 0;

        padding: 13px 16px !important;
    }
}


/* =========================================================
   MOBILE PEQUEÑO
========================================================= */

@media (max-width: 480px) {

    .header-inner {
        min-height: 70px;
    }

    .brand img {
        width: 140px;
    }

    .nav-toggle {
        width: 42px;
        height: 42px;
    }
}


/* =========================================================
   REDUCIR ANIMACIONES SI EL USUARIO LO SOLICITA
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .site-header::after,
    .brand {
        animation: none;
    }

    .brand img,
    .brand,
    .main-nav > a,
    .nav-quote,
    .nav-quote::before,
    .nav-quote span,
    .phone-dot,
    .phone-dot::before,
    .nav-toggle,
    .main-nav {
        transition: none;
    }
}
/* =========================================================
   VIDEO PROMO
========================================================= */

.video-promo{
    position:relative;
    min-height:min(72vh,720px);
    background:#090a0c;
    overflow:hidden;
}

.video-promo video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:saturate(.88) contrast(1.05);
}

.video-promo::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(8,9,10,.82),
            rgba(8,9,10,.42) 50%,
            rgba(8,9,10,.58)
        );
    z-index:1;
}

.video-promo::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(245,174,34,.22),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            transparent 65%,
            rgba(8,9,10,.78)
        );
    z-index:1;
}

.video-overlay{
    position:relative;
    z-index:2;
    min-height:min(72vh,720px);
    display:flex;
    align-items:flex-end;
    padding:90px 0;
}

.video-copy{
    max-width:760px;
    color:#fff;
}

.video-copy p{
    color:rgba(255,255,255,.74);
    max-width:660px;
    font-size:1.08rem;
}

.video-copy h1{
    font-size:clamp(3rem,7vw,7.3rem);
    color:#fff;
    margin-bottom:24px;
}

.video-copy h1 span{
    color:var(--gold);
}

.video-badge{
    display:inline-flex;
    align-items:center;
    gap:9px;
    max-width:100%;
    padding:9px 12px;
    border:1px solid rgba(255,255,255,.2);
    background:rgba(0,0,0,.24);
    backdrop-filter:blur(10px);
    border-radius:999px;
    color:#fff;
    font-size:.74rem;
    font-weight:800;
    letter-spacing:.13em;
}

.video-dot{
    width:7px;
    height:7px;
    flex:0 0 auto;
    border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 0 7px rgba(245,174,34,.12);
    animation:pulse 1.8s infinite;
}

@keyframes pulse{
    50%{
        box-shadow:0 0 0 12px rgba(245,174,34,0);
    }
}

.video-fallback{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:#fff;
    z-index:0;
    background:
        radial-gradient(
            circle at 50% 40%,
            #3c301a,
            #0b0c0e 60%
        );
}

.video-fallback-inner{
    opacity:.18;
    text-align:center;
}

.video-fallback-inner img{
    width:min(420px,70vw);
    filter:grayscale(1) brightness(4);
    margin:auto;
}

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

.hero{
    padding:110px 0;
}

.hero-home{
    /* background:linear-gradient(180deg,#fff,#fafafa); */
    background: linear-gradient(135deg, #f3f4f5, #e4e6e8);
}

.hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    align-items:center;
    gap:70px;
}

.hero-content{
    min-width:0;
}

.hero-content h2{
    font-size:clamp(1.4rem,2vw,1.8rem);
    font-family:Inter;
    font-weight:800;
    letter-spacing:-.02em;
}

.hero-content h1 span{
    color:var(--gold-2);
}

.hero-lead{
    font-size:1.12rem;
    max-width:700px;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:30px;
}

.trust-row{
    display:flex;
    flex-wrap:wrap;
    gap:14px 22px;
    margin-top:30px;
}

.trust-row span{
    font-size:.82rem;
    font-weight:700;
    color:#5e666e;
}

.hero-visual{
    position:relative;
    min-height:470px;
    border-radius:30px;
    overflow:hidden;
    background:#111;
    box-shadow:var(--shadow);
}

.hero-visual::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            135deg,
            rgba(245,174,34,.9),
            transparent 38%,
            rgba(0,0,0,.55)
        );
    z-index:1;
}

.hero-visual img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.hero-stat{
    position:absolute;
    z-index:2;
    right:24px;
    bottom:24px;
    max-width:calc(100% - 48px);
    padding:20px 22px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:18px;
    background:rgba(15,16,18,.72);
    backdrop-filter:blur(14px);
    color:#fff;
}

.hero-stat strong{
    display:block;
    font-family:Oswald;
    font-size:2.2rem;
    color:var(--gold);
    line-height:1;
}

.hero-stat span{
    font-size:.72rem;
    letter-spacing:.12em;
    text-transform:uppercase;
}

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

.cards-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
}

.service-card{
    position:relative;
    min-height:330px;
    min-width:0;
    padding:28px;
    border:1px solid var(--line);
    border-radius:20px;
    background:#fff;
    overflow:hidden;
    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease,
        border-color .45s ease;
}

.service-card::before{
    content:"";
    position:absolute;
    inset:auto -20% -45% -20%;
    height:70%;
    background:
        radial-gradient(
            circle,
            var(--gold-soft),
            transparent 62%
        );
    opacity:0;
    transition:opacity .4s;
}

.service-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow);
    border-color:#f1d28e;
}

.service-card:hover::before{
    opacity:1;
}

.service-number{
    font-family:Oswald;
    font-size:3.6rem;
    color:#d9dde0;
    line-height:1;
}

.service-icon{
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    border-radius:15px;
    background:var(--ink);
    color:var(--gold);
    font-size:1.5rem;
    margin:22px 0;
}

.service-card h3{
    font-size:1.3rem;
}

.service-card p{
    font-size:.92rem;
}

.service-link{
    display:inline-flex;
    gap:7px;
    margin-top:12px;
    font-weight:800;
    font-size:.84rem;
}

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

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1px;
    background:#303338;
    border:1px solid #303338;
}

.stat-box{
    padding:34px 24px;
    background:var(--ink);
    text-align:center;
}

.stat-box strong{
    display:block;
    font-family:Oswald;
    font-size:clamp(2.4rem,4vw,4rem);
    color:var(--gold);
    line-height:1;
}

.stat-box span{
    display:block;
    margin-top:9px;
    color:#aeb3b8;
    font-size:.8rem;
    text-transform:uppercase;
    letter-spacing:.12em;
}

/* =========================================================
   PROJECTS
========================================================= */

.project-grid{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
    gap:18px;
}

.project-card{
    position:relative;
    min-height:260px;
    min-width:0;
    border-radius:22px;
    overflow:hidden;
    background:#202329;
}

.project-card.tall{
    min-height:540px;
}

.project-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s cubic-bezier(.2,.8,.2,1);
}

.project-card:hover img{
    transform:scale(1.06);
}

.project-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            transparent 40%,
            rgba(0,0,0,.8)
        );
}

.project-info{
    position:absolute;
    z-index:2;
    left:24px;
    right:24px;
    bottom:22px;
    color:#fff;
}

.project-info h3{
    margin-bottom:5px;
}

.project-info p{
    color:rgba(255,255,255,.7);
    margin:0;
    font-size:.88rem;
}

.project-stack{
    display:grid;
    gap:18px;
    min-width:0;
}

/* =========================================================
   PROCESS
========================================================= */

.process-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
    border-top:1px solid #34373b;
}

.process-step{
    position:relative;
    min-width:0;
    padding:34px 25px;
    border-right:1px solid #34373b;
}

.process-step:last-child{
    border-right:0;
}

.process-step::before{
    content:"";
    position:absolute;
    top:-5px;
    left:25px;
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 0 7px var(--ink);
}

.process-step strong{
    font-family:Oswald;
    font-size:2.2rem;
    color:#575b60;
}

.process-step h3{
    color:#fff;
    margin-top:22px;
}

.process-step p{
    font-size:.9rem;
    color:#9ca2a8;
}

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

.cta-band{
    padding:80px 0;
    background:var(--gold);
}

.cta-band-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    min-width:0;
}

.cta-band h2{
    margin:0;
    max-width:720px;
}

.cta-band p{
    color:#5d430b;
    margin:8px 0 0;
}

/* =========================================================
   FORMS
========================================================= */

.page-hero{
    padding:90px 0 70px;
    background:
        linear-gradient(
            135deg,
            #fff,
            #f6f7f8
        );
}

.page-hero p:last-child{
    max-width:760px;
    font-size:1.05rem;
}

.form-card,
.quote-card,
.info-card{
    width:100%;
    max-width:100%;
    min-width:0;
    background:#fff;
    border:1px solid var(--line);
    border-radius:22px;
    padding:32px;
    box-shadow:0 15px 45px rgba(16,18,20,.06);
}

.form-grid-2{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:18px;
}

.form-field{
    display:grid;
    gap:8px;
    min-width:0;
}

.form-field label{
    font-size:.82rem;
    font-weight:800;
}

.form-field input,
.form-field select,
.form-field textarea,
.quote-table input{
    width:100%;
    min-width:0;
    max-width:100%;
    min-height:50px;
    border:1px solid #dfe2e5;
    background:#fbfbfc;
    border-radius:11px;
    padding:12px 14px;
    outline:none;
    transition:
        border-color .25s,
        box-shadow .25s,
        background .25s;
}

.form-field textarea{
    min-height:125px;
    resize:vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.quote-table input:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 4px rgba(245,174,34,.13);
    background:#fff;
}

.form-field .error{
    color:#b42318;
    font-size:.78rem;
}

.contact-grid{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
    gap:30px;
}

.info-stack{
    display:grid;
    gap:18px;
}

.info-card strong{
    display:block;
    font-size:1.1rem;
    margin-bottom:6px;
}

.info-card p{
    margin:0;
    font-size:.92rem;
}

.form-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:22px;
}

.form-note{
    font-size:.78rem;
    color:#7a828a;
    margin-top:14px;
}

/* =========================================================
   COTIZADOR
   ESTA ES LA PARTE MÁS IMPORTANTE PARA EL RESPONSIVE
========================================================= */

.quote-layout{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
    gap:28px;
    align-items:start;
    width:100%;
    max-width:100%;
    min-width:0;
}

.quote-card{
    min-width:0;
    overflow:hidden;
}

/* CONTENEDOR DE TABLA */

.quote-table-wrap{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
}

/* TABLA */

.quote-table{
    width:100%;
    max-width:100%;
    min-width:0;
    border-collapse:collapse;
    table-layout:fixed;
}

.quote-table th,
.quote-table td{
    padding:14px 10px;
    border-bottom:1px solid var(--line);
    text-align:left;
    vertical-align:middle;
    overflow-wrap:break-word;
    word-break:normal;
}

.quote-table th{
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#727980;
}

.quote-table td{
    font-size:.9rem;
}

.quote-table input{
    min-height:44px;
    padding:9px 10px;
}

.quote-table .qty{
    width:100%;
    max-width:120px;
}

.price-cell{
    font-weight:800;
    white-space:normal;
    overflow-wrap:anywhere;
}

.quote-summary{
    position:sticky;
    top:110px;
    width:100%;
    max-width:100%;
    min-width:0;
    background:var(--ink);
    color:#fff;
    border-radius:24px;
    padding:28px;
    box-shadow:var(--shadow);
    overflow:hidden;
}

.quote-summary::before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    right:-70px;
    top:-70px;
    background:rgba(245,174,34,.15);
}

.quote-summary>*{
    position:relative;
    min-width:0;
}

.summary-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:12px 0;
    border-bottom:1px solid #34373b;
    color:#bfc4c9;
    min-width:0;
}

.summary-row strong{
    color:#fff;
    overflow-wrap:anywhere;
}

.summary-total{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
    padding:22px 0 8px;
    min-width:0;
}

.summary-total span{
    font-size:.76rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:#aeb3b8;
}

.summary-total strong{
    font-family:Oswald;
    font-size:clamp(2rem,4vw,2.8rem);
    color:var(--gold);
    line-height:1;
    overflow-wrap:anywhere;
}

.quote-actions{
    display:grid;
    gap:10px;
    margin-top:20px;
    width:100%;
    min-width:0;
}

.quote-actions .btn{
    width:100%;
    max-width:100%;
    min-width:0;
    min-height:52px;
    padding:12px 16px;
    white-space:normal;
    line-height:1.25;
    text-align:center;
    overflow-wrap:anywhere;
}

.quote-alert{
    display:none;
    padding:12px 14px;
    margin-bottom:15px;
    border-radius:10px;
    background:#fff4f2;
    color:#b42318;
    font-size:.82rem;
}

.quote-alert.show{
    display:block;
}

.quote-meta{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:14px;
    margin-bottom:20px;
}

.quote-meta .form-field{
    gap:6px;
}

.disclaimer{
    font-size:.78rem;
    color:#747b82;
    margin-top:16px;
    overflow-wrap:break-word;
}

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

.site-footer{
    background:#0f1113;
    color:#fff;
    padding:75px 0 22px;
    width:100%;
    overflow:hidden;
}

.footer-grid{
    display:grid;
    grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
    gap:45px;
}

.footer-brand img{
    width:230px;
    max-width:100%;
    filter:none;
}

.footer-brand-col p{
    color:#8f969d;
    max-width:370px;
    font-size:.9rem;
}

.footer-location{
    color:var(--gold);
    font-size:.78rem;
    font-weight:800;
}

.footer-col{
    display:grid;
    align-content:start;
    gap:9px;
    min-width:0;
}

.footer-col h3{
    color:#fff;
    font-size:.85rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    margin-bottom:9px;
}

.footer-col a,
.footer-col span{
    color:#8f969d;
    font-size:.86rem;
    transition:
        color .25s,
        transform .25s;
    overflow-wrap:anywhere;
}

.footer-col a:hover{
    color:var(--gold);
    transform:translateX(3px);
}

.footer-wa-link{
    color:var(--gold)!important;
    font-weight:800;
}

.footer-bottom{
    margin-top:50px;
    padding-top:20px;
    border-top:1px solid #292d31;
    display:flex;
    justify-content:space-between;
    gap:20px;
    color:#6f767d;
    font-size:.75rem;
}

.whatsapp-float{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:999;
    width:58px;
    height:58px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--green);
    color:#fff;
    box-shadow:0 13px 35px rgba(0,0,0,.2);
    transition:
        transform .3s,
        box-shadow .3s;
}

.whatsapp-float:hover{
    transform:translateY(-5px) scale(1.04);
    box-shadow:0 18px 42px rgba(0,0,0,.28);
}

.whatsapp-float svg{
    width:29px;
    height:29px;
    fill:currentColor;
}

/* =========================================================
   REVEAL / MOTION
========================================================= */

.reveal{
    opacity:0;
    transform:translateY(28px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.8,.2,1);
}

.reveal.is-visible{
    opacity:1;
    transform:none;
}

.reveal-left{
    opacity:0;
    transform:translateX(-35px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.reveal-left.is-visible{
    opacity:1;
    transform:none;
}

.reveal-scale{
    opacity:0;
    transform:scale(.94);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.8,.2,1);
}

.reveal-scale.is-visible{
    opacity:1;
    transform:scale(1);
}

.gold-line{
    width:70px;
    height:3px;
    background:var(--gold);
    margin:22px 0;
}

.scroll-cue{
    position:absolute;
    left:50%;
    bottom:22px;
    z-index:3;
    transform:translateX(-50%);
    color:#fff;
    font-size:.7rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    display:flex;
    align-items:center;
    gap:10px;
    opacity:.75;
}

.scroll-cue::after{
    content:"";
    width:36px;
    height:1px;
    background:var(--gold);
    animation:slideCue 1.5s infinite;
}

@keyframes slideCue{
    50%{
        transform:translateX(10px);
        opacity:.35;
    }
}

/* =========================================================
   SERVICE DETAIL
   Tarjetas de servicios / especialidades
========================================================= */

.service-detail-list {
    display: grid;
    gap: 30px;
}


/* =========================================================
   TARJETA PRINCIPAL
========================================================= */

.service-detail {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);

    gap: 42px;
    align-items: stretch;

    padding: 14px;

    background: #fff;

    border-radius: 28px;

    overflow: hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;   

    border: 1px solid rgba(255, 255, 255, .8);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .20);
}


/* Línea/acento dorado superior */

.service-detail::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 110px;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--gold-2),
            var(--gold)
        );

    border-radius: 0 0 8px 0;

    z-index: 3;
}


/* Efecto al pasar el mouse */

.service-detail:hover {
    transform: translateY(-7px);

    border-color: var(--gold);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .30),
        0 0 0 1px rgba(245, 174, 34, .12);
}


/* =========================================================
   DISTRIBUCIÓN ALTERNADA
========================================================= */

.service-detail:nth-child(even) {
    grid-template-columns:
        minmax(0, .85fr)
        minmax(0, 1fr);
}


/*
   En las tarjetas pares:
   imagen a la izquierda
   contenido a la derecha
*/

.service-detail:nth-child(even) .service-detail-content {
    order: 2;
}

.service-detail:nth-child(even) .service-detail-visual {
    order: 1;
}


/* =========================================================
   CONTENIDO
========================================================= */

.service-detail-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 42px 34px;
}


/* Etiqueta ESPECIALIDAD */

.service-detail-content .eyebrow {
    margin-bottom: 12px;

    color: var(--gold-2);

    font-size: .75rem;
    font-weight: 800;

    letter-spacing: .16em;
}


/* Título */

.service-detail-content h2 {
    margin: 0 0 16px;

    font-size: clamp(1.8rem, 3vw, 2.55rem);

    line-height: 1.05;

    letter-spacing: -.035em;

    color: var(--ink);
}


/* Línea decorativa */

.service-detail-content h2::after {
    content: "";

    display: block;

    width: 48px;
    height: 3px;

    margin-top: 18px;

    background: var(--gold);

    border-radius: 10px;
}


/* Descripción */

.service-detail-content > p:not(.eyebrow) {
    max-width: 620px;

    margin: 0;

    color: var(--muted);

    font-size: 1rem;

    line-height: 1.75;
}


/* =========================================================
   LISTA DE CARACTERÍSTICAS
========================================================= */

.check-list {
    list-style: none;

    padding: 0;
    margin: 25px 0 0;

    display: grid;
    gap: 12px;
}


.check-list li {
    position: relative;

    padding-left: 34px;

    color: #515960;

    font-size: .92rem;
    line-height: 1.55;

    overflow-wrap: break-word;
}


/* Círculo del check */

.check-list li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: 1px;

    width: 21px;
    height: 21px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(245, 174, 34, .14);

    color: var(--gold-2);

    font-size: .72rem;
    font-weight: 900;
}


/* =========================================================
   IMAGEN
========================================================= */

.service-detail-visual {
    position: relative;

    min-height: 350px;

    border-radius: 21px;

    overflow: hidden;

    background: #181a1d;

    isolation: isolate;
}


/* Imagen */

.service-detail-visual img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 350px;

    object-fit: cover;

    transform: scale(1.01);

    transition:
        transform .7s cubic-bezier(.2,.7,.2,1),
        filter .5s ease;
}


/* Zoom al pasar el mouse */

.service-detail:hover .service-detail-visual img {
    transform: scale(1.07);
}


/* =========================================================
   CAPA SOBRE LA IMAGEN
========================================================= */

.service-detail-visual::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            135deg,
            rgba(245, 174, 34, .25) 0%,
            rgba(245, 174, 34, .04) 38%,
            rgba(8, 10, 12, .12) 100%
        );

    pointer-events: none;

    transition:
        opacity .4s ease;
}


.service-detail:hover .service-detail-visual::before {
    opacity: .7;
}


/* Borde interno de la imagen */

.service-detail-visual::after {
    content: "";

    position: absolute;

    inset: 12px;

    z-index: 2;

    border: 1px solid rgba(255, 255, 255, .25);

    border-radius: 15px;

    pointer-events: none;

    transition:
        border-color .35s ease,
        inset .35s ease;
}


.service-detail:hover .service-detail-visual::after {
    inset: 16px;

    border-color: rgba(245, 174, 34, .55);
}


/* =========================================================
   TARJETAS IMPARES
========================================================= */

.service-detail:nth-child(odd) .service-detail-content {
    padding-left: 40px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

    .service-detail,
    .service-detail:nth-child(even) {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, .9fr);

        gap: 25px;

        padding: 12px;
    }

    .service-detail-content {
        padding: 32px 25px;
    }

    .service-detail:nth-child(odd) .service-detail-content {
        padding-left: 25px;
    }

    .service-detail-visual,
    .service-detail-visual img {
        min-height: 320px;
    }

}


/* =========================================================
   TABLET PEQUEÑA / MÓVIL
========================================================= */

@media (max-width: 760px) {

    .service-detail,
    .service-detail:nth-child(even) {
        display: grid;

        grid-template-columns: 1fr;

        gap: 0;

        padding: 10px;

        border-radius: 22px;
    }


    /* IMPORTANTE:
       En móvil siempre:
       1. imagen
       2. contenido

       Así evitamos que los nth-child
       desordenen las tarjetas.
    */

    .service-detail:nth-child(even) .service-detail-visual,
    .service-detail:nth-child(odd) .service-detail-visual {
        order: 1;
    }


    .service-detail:nth-child(even) .service-detail-content,
    .service-detail:nth-child(odd) .service-detail-content {
        order: 2;
    }


    /* Imagen */

    .service-detail-visual {
        width: 100%;

        min-height: 260px;

        height: 260px;

        border-radius: 16px;
    }


    .service-detail-visual img {
        width: 100%;
        height: 100%;

        min-height: 260px;
    }


    /* Contenido */

    .service-detail-content,
    .service-detail:nth-child(odd) .service-detail-content {
        padding: 30px 18px 25px;
    }


    .service-detail-content h2 {
        font-size: clamp(1.7rem, 7vw, 2.1rem);

        line-height: 1.08;
    }


    .service-detail-content > p:not(.eyebrow) {
        font-size: .94rem;

        line-height: 1.7;
    }


    .check-list {
        margin-top: 21px;

        gap: 10px;
    }


    .check-list li {
        font-size: .88rem;

        padding-left: 31px;
    }


    /* Desactivar elevación excesiva en móvil */

    .service-detail:hover {
        transform: translateY(-2px);
    }

}


/* =========================================================
   MÓVILES PEQUEÑOS
========================================================= */

@media (max-width: 480px) {

    .service-detail-list {
        gap: 22px;
    }


    .service-detail {
        padding: 8px;

        border-radius: 19px;
    }


    .service-detail-visual,
    .service-detail-visual img {
        min-height: 220px;

        height: 220px;

        border-radius: 14px;
    }


    .service-detail-content,
    .service-detail:nth-child(odd) .service-detail-content {
        padding: 26px 14px 20px;
    }


    .service-detail-content .eyebrow {
        font-size: .68rem;

        letter-spacing: .13em;
    }


    .service-detail-content h2 {
        font-size: 1.65rem;

        margin-bottom: 14px;
    }


    .service-detail-content h2::after {
        width: 40px;

        height: 3px;

        margin-top: 14px;
    }


    .check-list li {
        font-size: .85rem;

        padding-left: 29px;
    }


    .check-list li::before {
        width: 19px;
        height: 19px;

        font-size: .65rem;
    }


    .service-detail-visual::after {
        inset: 9px;

        border-radius: 11px;
    }


    .service-detail:hover .service-detail-visual::after {
        inset: 11px;
    }

}


/* =========================================================
   ACCESIBILIDAD
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .service-detail,
    .service-detail-visual img,
    .service-detail-visual::before,
    .service-detail-visual::after {
        transition: none;
    }

    .service-detail:hover {
        transform: none;
    }

    .service-detail:hover .service-detail-visual img {
        transform: none;
    }

}
/* =========================================================
   TABLET
========================================================= */

@media (max-width:1050px){

    .header-phone{
        display:none;
    }

    .cards-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .hero-grid{
        gap:40px;
    }

    .footer-grid{
        grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
        gap:30px;
    }

    .quote-layout{
        grid-template-columns:minmax(0,1fr) minmax(300px,.75fr);
    }

}

/* =========================================================
   TABLET PEQUEÑA / MENU MOBILE
========================================================= */

@media (max-width:820px){

    .container{
        width:min(var(--container),calc(100% - 28px));
    }

    .header-inner{
        min-height:76px;
    }

    .brand img{
        width:160px;
    }

    .nav-toggle{
        display:block;
    }

    .main-nav{
        position:fixed;
        inset:76px 0 auto 0;
        display:grid;
        gap:4px;
        padding:15px;
        background:#fff;
        border-bottom:1px solid var(--line);
        box-shadow:0 20px 35px rgba(0,0,0,.12);
        transform:translateY(-150%);
        opacity:0;
        pointer-events:none;
        transition:
            transform .35s ease,
            opacity .35s ease;
    }

    .nav-open .main-nav{
        transform:none;
        opacity:1;
        pointer-events:auto;
    }

    .main-nav>a{
        padding:15px 18px;
    }

    .hero{
        padding:75px 0;
    }

    .hero-grid,
    .contact-grid,
    .quote-layout,
    .project-grid{
        grid-template-columns:minmax(0,1fr);
    }

    .hero-visual{
        min-height:390px;
    }

    .stats-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .process-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .process-step:nth-child(2){
        border-right:0;
    }

    .footer-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .service-detail,
    .service-detail:nth-child(even){
        grid-template-columns:minmax(0,1fr);
    }

    .service-detail:nth-child(even) .service-detail-content{
        order:0;
    }

    .service-detail-visual{
        min-height:250px;
    }

    .quote-summary{
        position:static;
    }

    /*
       IMPORTANTE:
       En tablet y móvil el cotizador pasa a una sola columna.
    */

    .quote-layout{
        gap:20px;
    }

    .quote-card,
    .quote-summary{
        width:100%;
        max-width:100%;
    }
}

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

@media (max-width:600px){

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    .container{
        width:calc(100% - 24px);
        max-width:100%;
        margin-inline:auto;
    }

    .section{
        padding:75px 0;
    }

    .video-promo,
    .video-overlay{
        min-height:620px;
    }

    .video-overlay{
        padding:55px 0 75px;
    }

    .video-copy h1{
        font-size:clamp(2.8rem,15vw,4.4rem);
    }

    .video-copy p{
        font-size:.95rem;
    }

    .hero-actions{
        width:100%;
    }

    .hero-actions .btn{
        width:100%;
        max-width:100%;
    }

    .hero-visual{
        min-height:330px;
    }

    .cards-grid,
    .form-grid-2,
    .stats-grid,
    .process-grid,
    .footer-grid{
        grid-template-columns:minmax(0,1fr);
    }

    .process-step{
        border-right:0!important;
        border-bottom:1px solid #34373b;
    }

    .process-step:last-child{
        border-bottom:0;
    }

    .cta-band-inner{
        display:grid;
        grid-template-columns:1fr;
    }

    .cta-band .btn{
        width:100%;
    }

    .form-card,
    .quote-card,
    .info-card{
        padding:20px;
        border-radius:18px;
    }

    /* =====================================================
       COTIZADOR MOBILE
    ===================================================== */

    .quote-layout{
        width:100%;
        max-width:100%;
        grid-template-columns:1fr;
        gap:18px;
    }

    .quote-card{
        width:100%;
        max-width:100%;
        min-width:0;
        overflow:hidden;
    }

    .quote-table-wrap{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    .quote-table{
        width:100%;
        max-width:100%;
        min-width:0;
        table-layout:fixed;
        border-collapse:collapse;
    }

    .quote-table th,
    .quote-table td{
        padding:10px 5px;
        font-size:.72rem;
        line-height:1.35;
        overflow-wrap:anywhere;
        word-break:normal;
    }

    .quote-table th{
        font-size:.63rem;
        letter-spacing:.04em;
    }

    /*
       Distribución de las 4 columnas:
       Partida | Unidad | Precio | Cantidad
    */

    .quote-table th:nth-child(1),
    .quote-table td:nth-child(1){
        width:38%;
    }

    .quote-table th:nth-child(2),
    .quote-table td:nth-child(2){
        width:17%;
        text-align:center;
    }

    .quote-table th:nth-child(3),
    .quote-table td:nth-child(3){
        width:22%;
        text-align:right;
    }

    .quote-table th:nth-child(4),
    .quote-table td:nth-child(4){
        width:23%;
        text-align:center;
    }

    .quote-table input{
        width:100%;
        min-width:0;
        min-height:40px;
        padding:7px 5px;
        border-radius:8px;
        font-size:.8rem;
    }

    .quote-table .qty{
        width:100%;
        max-width:100%;
    }

    .price-cell{
        white-space:normal;
        font-size:.72rem;
        overflow-wrap:anywhere;
    }

    .quote-summary{
        width:100%;
        max-width:100%;
        min-width:0;
        padding:22px 18px;
        border-radius:20px;
        overflow:hidden;
    }

    .quote-summary h2,
    .quote-summary h3{
        overflow-wrap:break-word;
    }

    .summary-row{
        gap:12px;
        font-size:.9rem;
    }

    .summary-row span,
    .summary-row strong{
        min-width:0;
        overflow-wrap:anywhere;
    }

    .summary-total{
        gap:10px;
        flex-wrap:wrap;
    }

    .summary-total span{
        max-width:100%;
    }

    .summary-total strong{
        font-size:2.25rem;
        max-width:100%;
    }

    .quote-actions{
        width:100%;
        max-width:100%;
    }

    .quote-actions .btn{
        width:100%;
        max-width:100%;
        min-height:54px;
        padding:13px 12px;
        font-size:.88rem;
        line-height:1.25;
        white-space:normal;
        word-break:normal;
        overflow-wrap:anywhere;
    }

    .quote-meta{
        grid-template-columns:minmax(0,1fr);
        width:100%;
    }

    .disclaimer{
        font-size:.72rem;
        line-height:1.55;
    }

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

    .footer-bottom{
        display:grid;
        gap:10px;
    }

    .whatsapp-float{
        width:53px;
        height:53px;
        right:16px;
        bottom:16px;
    }

}

/* =========================================================
   TELEFONOS MUY PEQUEÑOS
   320px - 380px
========================================================= */

@media (max-width:380px){

    .container{
        width:calc(100% - 18px);
    }

    .brand img{
        width:140px;
    }

    .form-card,
    .quote-card,
    .info-card{
        padding:16px;
        border-radius:16px;
    }

    .quote-summary{
        padding:18px 14px;
    }

    .quote-table th,
    .quote-table td{
        padding:8px 3px;
        font-size:.66rem;
    }

    .quote-table th{
        font-size:.56rem;
    }

    .quote-table input{
        min-height:37px;
        padding:6px 4px;
        font-size:.72rem;
    }

    .quote-actions .btn{
        font-size:.82rem;
        padding:12px 9px;
    }

    .summary-total strong{
        font-size:2rem;
    }

    .video-copy h1{
        font-size:2.7rem;
    }

}

/* =========================================================
   EXTRA SAFETY RESPONSIVE
========================================================= */

/*
   Evita que cualquier elemento con contenido largo
   provoque que la página completa se desplace horizontalmente.
*/

.container,
.section,
.form-card,
.quote-card,
.quote-summary,
.quote-layout,
.quote-table-wrap,
.quote-table,
.hero-grid,
.contact-grid,
.project-grid,
.footer-grid{
    min-width:0;
}

/*
   Textos largos, correos, URLs, números, etc.
*/

p,
span,
strong,
label,
td,
th,
a,
button{
    overflow-wrap:break-word;
}

/*
   SVG e imágenes nunca deben ampliar el viewport.
*/

svg,
img,
video,
iframe{
    max-width:100%;
}

/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        scroll-behavior:auto!important;
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }

}


/* ========================================================= 
CLIENTES 
========================================================= */ 
.clients-section { 
    padding: 100px 0 90px; 
    /* background: var(--paper);  */
    background: linear-gradient(135deg, #f3f4f5, #e4e6e8);
    overflow: hidden; 
} 
.clients-heading { 
    max-width: 760px; 
    margin: 0 auto 55px; 
    text-align: center; 
} 
.clients-heading h2 { 
    margin-bottom: 18px; 
} 
.clients-heading p:last-child { 
    max-width: 650px; 
    margin: 0 auto; 
    color: var(--muted); 
} 
/* ========================================================= 
CARRUSEL 
========================================================= */ 
.clients-carousel { 
    position: relative; 
    width: 100%; 
    overflow: hidden; 
} 
/* ========================================================= 
DEGRADADO LATERAL Suaviza la entrada y salida de los logos 
========================================================= */ 
.clients-carousel::before, .clients-carousel::after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 120px; 
    z-index: 2; 
    pointer-events: none; 
} 
.clients-carousel::before { 
    left: 0; 
    background: linear-gradient( to right, var(--paper), rgba(255, 255, 255, 0) ); 
} 
.clients-carousel::after { 
    right: 0; 
    background: linear-gradient( to left, var(--paper), rgba(255, 255, 255, 0) ); 
} 
/* ========================================================= 
PISTA DEL CARRUSEL 
========================================================= */ 
.clients-track { 
    display: flex; 
    align-items: center; 
    width: max-content; 
    /* Movimiento continuo */ 
    animation: clients-scroll 28s linear infinite; 
} 
/* ========================================================= 
TARJETA DE CADA CLIENTE 
========================================================= */ 
.client-logo {
     width: 190px; 
     height: 100px; 
     margin: 0 28px; 
     padding: 18px; 
     display: flex; 
     align-items: center; 
     justify-content: center; 
     flex-shrink: 0; 
     background: #fff; 
     border: 1px solid var(--line); 
     border-radius: 14px; 
     box-shadow: 0 8px 25px rgba(16, 18, 20, .06); 
     transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } 
/* ========================================================= 
LOGOS A COLOR DESDE EL INICIO 
========================================================= */ 
.client-logo img { 
    display: block; 
    max-width: 100%; 
    max-height: 62px;
    width: auto; 
    height: auto; 
    object-fit: contain; 
    /* IMPORTANTE: El logo conserva su color original */ 
    filter: none; 
    opacity: 1; 
    transition: transform .3s ease, opacity .3s ease; 
} 
/* ========================================================= 
EFECTO HOVER 
========================================================= */ 
.client-logo:hover { 
    transform: translateY(-5px); 
    border-color: var(--gold); 
    box-shadow: 0 15px 35px rgba(16, 18, 20, .12); } 
.client-logo:hover img { 
    filter: none; 
    opacity: 1; 
    transform: scale(1.06); 
} 
/* ========================================================= 
ANIMACIÓN DERECHA → IZQUIERDA 
========================================================= */ 
@keyframes clients-scroll { 
    from { 
        transform: translateX(0); 
    } 
    to { 
        transform: translateX(-50%); 
    } 
} 
/* ========================================================= 
PAUSAR AL PASAR EL MOUSE 
========================================================= */ 
.clients-carousel:hover .clients-track { 
    animation-play-state: paused; 
} 
/* ========================================================= 
TABLET / CELULAR 
========================================================= */ 
@media (max-width: 768px) { 
    .clients-section { 
        padding: 75px 0 65px; 
    } 
    .clients-heading { 
        padding: 0 20px; 
        margin-bottom: 38px; 
    } 
    .clients-heading h2 { 
        font-size: 30px; 
    } 
    .clients-heading p:last-child { 
        font-size: 15px; 
    } 
    /* Tarjetas más pequeñas */ 
    .client-logo {
         width: 155px; 
         height: 85px; 
         margin: 0 18px; 
         padding: 14px; 
         border-radius: 12px; 
        } 
    .client-logo img { 
        max-height: 50px; 
    } 
    /* Carrusel un poco más rápido en móvil */ 
    .clients-track { 
        animation-duration: 22s; 
    } 
    /* Degradado lateral más pequeño */ 
    .clients-carousel::before, .clients-carousel::after { 
        width: 55px; 
    } 
}

/* ========================================================= 
REDUCIR ANIMACIONES Para usuarios que tienen activada esta preferencia 
========================================================= */ 
@media (prefers-reduced-motion: reduce) { 
    .clients-track { 
        animation: none; 
    } 
}









/* =========================================================
   ENLACES DE LAS TARJETAS DE SERVICIOS
========================================================= */

.service-card {
    position: relative;
}

.service-card::before,
.service-card::after {
    pointer-events: none;
}

.service-link {
    position: relative;
    z-index: 50;

    display: inline-flex;
    align-items: center;

    cursor: pointer;
    pointer-events: auto;

    text-decoration: none;
}

.service-link:hover {
    text-decoration: none;
}






/* =========================================================
   HERO DE SERVICIOS
========================================================= */

.page-hero {
    position: relative;
    min-height: 520px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background-image:
        linear-gradient(
            90deg,
            rgba(8, 15, 24, .94) 0%,
            rgba(8, 15, 24, .84) 35%,
            rgba(8, 15, 24, .40) 65%,
            rgba(8, 15, 24, .12) 100%
        ),
        url("../img/fondos/fondo1.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

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

    padding-top: 70px;
    padding-bottom: 70px;

    color: #fff;
}

.page-hero .eyebrow {
    color: var(--gold);
}

.page-hero h1 {
    max-width: 850px;
    color: #fff;
}

.page-hero .text-gold {
    color: var(--gold);
}

.page-hero > .container > p:last-child {
    max-width: 720px;
    color: rgba(255, 255, 255, .82);
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 768px) {

    .page-hero {
        min-height: 500px;

        background-position: 62% center;

        background-image:
            linear-gradient(
                90deg,
                rgba(8, 15, 24, .94) 0%,
                rgba(8, 15, 24, .78) 55%,
                rgba(8, 15, 24, .45) 100%
            ),
            url("../img/fondos/fondo1.png");
    }

    .page-hero .container {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .page-hero h1 {
        max-width: 100%;
    }
}



/* =========================================================
   FONDO DE LA SECCIÓN DE SERVICIOS
========================================================= */

.services-detail-section {
    position: relative;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(245, 174, 34, .10),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(245, 174, 34, .07),
            transparent 30%
        ),
        #17191d;

    overflow: hidden;
}


/* Detalle decorativo superior */

.services-detail-section::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -300px;
    right: -200px;

    border-radius: 50%;

    border: 1px solid rgba(245, 174, 34, .12);

    pointer-events: none;
}


/* Detalle decorativo inferior */

.services-detail-section::after {
    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    bottom: -240px;
    left: -180px;

    border-radius: 50%;

    border: 1px solid rgba(245, 174, 34, .08);

    pointer-events: none;
}


/* Contenido por encima del fondo */

.services-detail-section .container {
    position: relative;
    z-index: 2;
}





/* =========================================================
   SERVICIOS — CARDS PREMIUM MATSAN
   ========================================================= */

#servicios {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 8% 35%,
            rgba(245,174,34,.07),
            transparent 25%
        ),
        radial-gradient(
            circle at 92% 70%,
            rgba(16,18,20,.055),
            transparent 30%
        ),
        #f7f8f9;
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

#servicios .cards-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    perspective: 1200px;
}


/* ---------------------------------------------------------
   CARD
   --------------------------------------------------------- */

#servicios .service-card {
    position: relative;
    min-height: 390px;
    padding: 30px 27px 28px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid rgba(16,18,20,.10);
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #ffffff 62%,
            #f3f4f5 100%
        );

    box-shadow:
        0 12px 30px rgba(16,18,20,.055),
        0 2px 5px rgba(16,18,20,.035);

    isolation: isolate;

    transition:
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}


/* Línea dorada superior */

#servicios .service-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;

    width: 0;
    height: 4px;

    background: linear-gradient(
        90deg,
        var(--gold-2),
        var(--gold)
    );

    border-radius: 0 4px 4px 0;

    transition: width .45s cubic-bezier(.16,1,.3,1);
}


/* Brillo decorativo */

#servicios .service-card::after {
    content: "";
    position: absolute;

    width: 180px;
    height: 180px;

    right: -90px;
    bottom: -90px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(245,174,34,.18) 0%,
            rgba(245,174,34,.06) 35%,
            transparent 70%
        );

    opacity: .55;

    transition:
        transform .5s ease,
        opacity .5s ease;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

#servicios .service-card:hover {
    border-color: rgba(245,174,34,.55);

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #ffffff 52%,
            #fffaf0 100%
        );

    box-shadow:
        0 25px 55px rgba(16,18,20,.13),
        0 0 0 1px rgba(245,174,34,.08);
}

#servicios .service-card:hover::before {
    width: 100%;
}

#servicios .service-card:hover::after {
    transform: scale(1.35);
    opacity: 1;
}


/* ---------------------------------------------------------
   NÚMERO
   --------------------------------------------------------- */

#servicios .service-number {
    position: relative;
    z-index: 2;

    margin-bottom: 18px;

    font-size: 3.4rem;
    line-height: .9;

    font-weight: 900;
    letter-spacing: -2px;

    color: #e1e4e7;

    transition:
        color .35s ease,
        transform .35s ease;
}

#servicios .service-card:hover .service-number {
    color: var(--gold);
    transform: translateX(4px);
}


/* ---------------------------------------------------------
   ICONO
   --------------------------------------------------------- */

#servicios .service-icon {
    position: relative;
    z-index: 2;

    width: 52px;
    height: 52px;

    margin-bottom: 22px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #17191d,
            #090a0c
        );

    color: var(--gold);

    font-size: 1.25rem;
    font-weight: 800;

    border: 1px solid rgba(245,174,34,.18);

    box-shadow:
        0 10px 24px rgba(16,18,20,.18);

    transition:
        transform .35s cubic-bezier(.16,1,.3,1),
        background .35s ease,
        box-shadow .35s ease;
}

#servicios .service-card:hover .service-icon {
    transform: translateY(-4px) rotate(-3deg);

    background:
        linear-gradient(
            145deg,
            var(--gold),
            var(--gold-2)
        );

    color: #111;

    box-shadow:
        0 12px 28px rgba(245,174,34,.30);
}


/* ---------------------------------------------------------
   TÍTULO
   --------------------------------------------------------- */

#servicios .service-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 14px;

    color: #101214;

    font-size: 1.12rem;
    line-height: 1.12;
    font-weight: 850;
    letter-spacing: -.4px;

    transition: color .3s ease;
}

#servicios .service-card:hover h3 {
    color: #17191d;
}


/* ---------------------------------------------------------
   DESCRIPCIÓN
   --------------------------------------------------------- */

#servicios .service-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #68717b;

    font-size: .88rem;
    line-height: 1.7;

    max-width: 31ch;
}


/* ---------------------------------------------------------
   LINK
   --------------------------------------------------------- */

#servicios .service-link {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-top: auto;
    padding-top: 25px;

    color: #101214;

    font-size: .78rem;
    font-weight: 850;

    text-decoration: none;

    transition:
        color .3s ease,
        gap .3s ease;
}

#servicios .service-link::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -4px;

    width: 0;
    height: 2px;

    background: var(--gold);

    transition: width .3s ease;
}

#servicios .service-link:hover {
    color: var(--gold-2);
    gap: 11px;
}

#servicios .service-link:hover::after {
    width: calc(100% - 20px);
}


/* ---------------------------------------------------------
   DIFERENCIACIÓN ENTRE CARDS
   --------------------------------------------------------- */

#servicios .service-card:nth-child(1) {
    --card-accent: #f5ae22;
}

#servicios .service-card:nth-child(2) {
    --card-accent: #e29a16;
}

#servicios .service-card:nth-child(3) {
    --card-accent: #c98508;
}

#servicios .service-card:nth-child(4) {
    --card-accent: #f5ae22;
}


/* ---------------------------------------------------------
   PEQUEÑO DETALLE NUMÉRICO
   --------------------------------------------------------- */

#servicios .service-card .service-number::after {
    content: "";

    position: absolute;
    left: 2px;
    bottom: -9px;

    width: 24px;
    height: 3px;

    border-radius: 10px;

    background: var(--card-accent);

    opacity: .8;

    transition:
        width .35s ease,
        opacity .35s ease;
}

#servicios .service-card:hover .service-number::after {
    width: 42px;
    opacity: 1;
}


/* ---------------------------------------------------------
   ANIMACIÓN DE ENTRADA
   --------------------------------------------------------- */

#servicios .service-card.reveal {
    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.16,1,.3,1),
        border-color .35s ease,
        box-shadow .35s ease;
}

#servicios .service-card:nth-child(1) {
    transition-delay: .05s;
}

#servicios .service-card:nth-child(2) {
    transition-delay: .12s;
}

#servicios .service-card:nth-child(3) {
    transition-delay: .19s;
}

#servicios .service-card:nth-child(4) {
    transition-delay: .26s;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1050px) {

    #servicios .cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* ---------------------------------------------------------
   MÓVIL
   --------------------------------------------------------- */

@media (max-width: 650px) {

    #servicios .cards-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    #servicios .service-card {
        min-height: 350px;
        padding: 27px 24px 25px;
    }

    #servicios .service-number {
        font-size: 3rem;
    }

}


/* ---------------------------------------------------------
   REDUCIR ANIMACIONES
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    #servicios .service-card,
    #servicios .service-icon,
    #servicios .service-number,
    #servicios .service-card::before,
    #servicios .service-card::after {
        transition: none;
    }

}
/* =========================================================
   SERVICIOS — INTERACCIÓN TÁCTIL EN MÓVIL
   ========================================================= */

@media (max-width: 650px) {

    /* Estado activo de la card al tocarla */
    #servicios .service-card.is-touch-active {
        border-color: rgba(245,174,34,.55);

        background:
            linear-gradient(
                145deg,
                #ffffff 0%,
                #ffffff 52%,
                #fffaf0 100%
            );

        box-shadow:
            0 25px 55px rgba(16,18,20,.13),
            0 0 0 1px rgba(245,174,34,.08);

        transform: translateY(-5px);
    }


    /* Línea dorada */
    #servicios .service-card.is-touch-active::before {
        width: 100%;
    }


    /* Brillo */
    #servicios .service-card.is-touch-active::after {
        transform: scale(1.35);
        opacity: 1;
    }


    /* Número */
    #servicios .service-card.is-touch-active .service-number {
        color: var(--gold);
        transform: translateX(4px);
    }


    /* Icono */
    #servicios .service-card.is-touch-active .service-icon {
        transform: translateY(-4px) rotate(-3deg);

        background:
            linear-gradient(
                145deg,
                var(--gold),
                var(--gold-2)
            );

        color: #111;

        box-shadow:
            0 12px 28px rgba(245,174,34,.30);
    }


    /* Pequeña línea debajo del número */
    #servicios .service-card.is-touch-active
    .service-number::after {
        width: 42px;
        opacity: 1;
    }


    /* Link */
    #servicios .service-card.is-touch-active .service-link {
        color: var(--gold-2);
        gap: 11px;
    }


    #servicios .service-card.is-touch-active
    .service-link::after {
        width: calc(100% - 20px);
    }

}