/* ===========================================================
   LOGO FLOTANTE (pegado al borde, superpuesto header+hero)
=========================================================== */

.logo-badge{

    position:absolute;
    top:8px;
    left:0;
    z-index:110;
    display:block;

}

.logo-badge img{

    width:300px;
    height:auto;
    display:block;
    filter:drop-shadow(0 14px 30px rgba(0,0,0,.45));

}

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

header{

    background:#fff;
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    z-index:100;

}

.nav{

    display:flex;
    align-items:center;
    gap:44px;
    padding:20px 0;

}

.header-logo{

    display:block;
    flex-shrink:0;
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;

}

.header-logo.visible{

    opacity:1;
    pointer-events:auto;

}

.header-logo img{

    height:44px;
    width:auto;
    display:block;

}

.nav-links{

    display:flex;
    gap:26px;
    font-size:17px;
    font-weight:600;
    color:var(--ink);

}

.nav-links a{

    position:relative;
    opacity:.75;
    padding:8px 2px;
    transition:opacity .2s ease;

}

.nav-links a::after{

    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-2px;
    height:2px;
    background:var(--energy);
    border-radius:2px;
    transform-origin:left;
    transform:scaleX(0);
    transition:transform .3s ease;

}

.nav-links a:hover{

    opacity:1;

}

.nav-links a:hover::after,
.nav-links a.active::after{

    transform:scaleX(1);

}

.nav-links a.active{

    opacity:1;

}

.nav-cta{

    margin-left:auto;
    background:var(--steel);
    color:#fff;
    padding:10px 20px;
    border-radius:var(--radius-sm);
    font-size:13px;
    font-weight:700;
    white-space:nowrap;

}

/* ===========================================================
   MENU MOBILE (hamburguesa + panel)
   Oculto por defecto en escritorio; se activa via responsive.css
   cuando .nav-links desaparece, para que siempre haya una forma
   de navegar sin importar el ancho de pantalla.
=========================================================== */

.burger{

    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
    padding:6px;
    margin-left:auto;

}

.burger span{

    width:24px;
    height:2px;
    background:var(--ink);
    border-radius:2px;
    transition:transform .25s ease, opacity .25s ease;

}

.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-panel{

    position:fixed;
    top:var(--header-h, 84px);
    left:0;
    right:0;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 24px rgba(20,48,79,.1);
    padding:8px 24px 20px;
    display:flex;
    flex-direction:column;
    transform:translateY(-12px);
    opacity:0;
    pointer-events:none;
    transition:transform .25s ease, opacity .2s ease;
    z-index:99;

}

.mobile-panel.open{

    transform:translateY(0);
    opacity:1;
    pointer-events:auto;

}

.mobile-panel a{

    text-decoration:none;
    color:var(--ink);
    font-weight:600;
    font-size:15px;
    padding:14px 4px;
    border-bottom:1px solid var(--line);

}

.mobile-panel a.active{

    color:var(--energy);

}

.mobile-panel-cta{

    margin-top:14px;
    background:var(--steel);
    color:#fff !important;
    text-align:center;
    border-radius:var(--radius-sm);
    border-bottom:none !important;
    padding:14px !important;

}

/* ===========================================================
   HERO
   Nota tecnica: el panel usa border-radius:50% (no clip-path)
   y el fondo usa top/right/bottom/left:0 explicitos en vez del
   shorthand "inset" — hay motores de render que no soportan
   "inset" y lo ignoran en silencio. La altura del .hero es
   explicita (no min-height) porque los hijos position:absolute
   necesitan una base de calculo definida para estirarse bien.
=========================================================== */

.hero{

    /* min-height, no height fijo — asi el contenido nunca se trunca,
       la seccion crece si el texto+precio+boton necesitan mas lugar.
       Confirmado contra el sitio de ComCargo (ya probado en PC/Android/
       Safari sin problemas), que usa exactamente este mismo patron. */
    --text-pad-top:165px;
    --text-pad-left:36px;

    position:relative;
    min-height:680px;
    background-color:#fff;
    overflow:hidden;

}

.hero-photo{

    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-image:url('../images/hero_bg.jpg');
    background-size:cover;
    background-position:center;
    background-color:#fff;

}

.hero-scrim{

    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:radial-gradient(ellipse 62% 42% at 16% 24%,
        rgba(255,255,255,.92) 0%,
        rgba(255,255,255,.65) 40%,
        rgba(255,255,255,.25) 65%,
        rgba(255,255,255,.05) 82%,
        rgba(255,255,255,0) 95%);
    z-index:1;

}

.hero-inner{

    position:relative;
    z-index:2;
    padding:var(--text-pad-top) 0 60px var(--text-pad-left);

}

.hero-content{

    width:38vw;
    max-width:560px;
    min-width:320px;

}

.eyebrow{

    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-muted);
    margin-bottom:16px;

}

.eyebrow::before{

    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--steel-light);

}

h1{

    font-family:var(--display);
    font-size:40px;
    line-height:1.1;
    letter-spacing:-.01em;
    margin-bottom:14px;

}

h1 em{

    font-style:normal;
    color:var(--steel-light);

}

.tagline{

    font-family:var(--display);
    font-size:22px;
    text-transform:uppercase;
    line-height:1.3;
    margin-bottom:16px;

}

.lede{

    font-size:16px;
    color:var(--ink-muted);
    max-width:460px;
    margin-bottom:24px;

}

.cta-row{

    display:flex;
    gap:14px;
    flex-wrap:wrap;

}

.btn{

    display:inline-flex;
    align-items:center;
    padding:14px 26px;
    border-radius:var(--radius-sm);
    font-size:14px;
    font-weight:700;

}

.btn-primary{

    background:var(--steel);
    color:#fff;

}

.btn-primary:hover{

    background:var(--steel-light);

}

.btn-ghost{

    border:1px solid rgba(20,48,79,.3);
    color:var(--ink);

}

.btn-ghost:hover{

    border-color:var(--ink);
    background:rgba(20,48,79,.05);

}

.hero-contact{

    display:flex;
    gap:10px;
    font-size:13px;
    color:var(--ink-muted);

}

.hero-contact a:hover{

    color:var(--ink);

}

/* ===========================================================
   PANEL FLOTANTE DE PRECIOS
   Se mantiene oscuro a proposito (queda sobre la foto, no
   sobre el panel blanco) para conservar el contraste.
=========================================================== */

.hero-price-panel{

    position:absolute;
    top:32px;
    right:36px;
    z-index:2;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:16px;
    width:auto;
    background:rgba(9,24,42,.88);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.16);
    border-radius:var(--radius-pill, 100px);
    padding:9px 18px;
    box-shadow:0 10px 24px rgba(0,0,0,.2);

}

.hero-price-sep{

    width:1px;
    height:20px;
    background:rgba(255,255,255,.22);
    flex-shrink:0;

}

.hero-price-row{

    display:flex;
    flex-direction:column;
    gap:1px;

}

.hero-price-row span{

    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:rgba(255,255,255,.6);
    white-space:nowrap;

}

.hero-price-row strong{

    font-family:var(--display);
    font-size:14px;
    font-variant-numeric:tabular-nums;
    color:#fff;
    white-space:nowrap;

}

.hero-price-meta{

    display:flex;
    align-items:center;
    gap:10px;

}

.hero-price-meta span{

    font-size:10px;
    color:rgba(255,255,255,.5);
    white-space:nowrap;

}

.hero-price-refresh{

    border:1px solid rgba(255,255,255,.25);
    background:none;
    color:#fff;
    padding:5px 11px;
    border-radius:var(--radius-sm);
    font-size:10px;
    cursor:pointer;
    font-family:var(--sans);
    white-space:nowrap;

}

/* ===========================================================
   PRECIO COMERCIAL — pieza central, distinta del panel de
   referencias (esta es la que paga el cliente, no un indice)
=========================================================== */

.hero-price-cta-row{

    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    margin:22px 0 26px;

}

.hero-commercial-price{

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
    gap:0;
    background:linear-gradient(160deg, #9c3030 0%, #6e1c1c 100%);
    border:1px solid rgba(255,180,180,.35);
    border-radius:26px;
    width:fit-content;
    padding:28px 38px 26px;
    cursor:pointer;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.25),
        0 20px 40px rgba(80,10,10,.35),
        0 8px 18px rgba(80,10,10,.25);

}

.hero-commercial-price:hover{

    transform:translateY(-6px) scale(1.035);
    border-color:rgba(255,200,200,.55);
    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.3),
        0 28px 55px rgba(80,10,10,.45),
        0 12px 26px rgba(80,10,10,.32),
        0 0 0 4px rgba(255,255,255,.08);

}

.hero-commercial-label{

    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:#fff;
    text-shadow:0 1px 8px rgba(0,0,0,.4);
    max-width:160px;
    line-height:1.3;

}

.hero-commercial-bs{

    font-family:var(--display);
    font-size:56px;
    line-height:1;
    color:#fff;
    font-variant-numeric:tabular-nums;
    margin:10px 0 6px;
    text-shadow:0 2px 20px rgba(0,0,0,.5);

}

.hero-commercial-usd{

    font-size:17px;
    color:#fff;
    font-weight:600;
    text-shadow:0 1px 8px rgba(0,0,0,.4);

}

.hero-commercial-note{

    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:11.5px;
    font-weight:600;
    color:#fff;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.18);
    padding:8px 16px;
    border-radius:100px;
    margin-top:20px;

}

.hero-commercial-note::before{

    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:#4fae7a;
    flex-shrink:0;

}

/* ===========================================================
   WHATSAPP FLOTANTE
=========================================================== */

.wa-float{

    position:fixed;
    bottom:24px;
    right:24px;
    z-index:60;
    background:#25D366;
    color:#fff;
    width:56px;
    height:56px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 20px rgba(0,0,0,.35);

}