:root{
    /* Paleta ejecutiva */
    --bg:#0f0f10;
    --surface:#1a1b1e;
    --border:#2a2b30;
    --fg:#f2f2f5;
    --fg-dim:#9b9ca4;
    --accent:#d4b978;
    --accent-soft:rgba(212,185,120,.12);
    --accent-border:rgba(212,185,120,.4);

    --radius-xl:2rem;
    --radius-lg:1.25rem;
    --radius-md:.75rem;

    --ring-size:40px;
    --dot-size:8px;

    /* más ágil para cursor y micro-interacciones */
    --transition-fast:.06s ease-out; /* antes .18s */
    --transition-med:.16s cubic-bezier(.16,1,.3,1); /* antes .28s */

    /* sombra realista */
    --shadow-xl:
        0 30px 120px rgba(0,0,0,.9),
        0 8px 24px rgba(0,0,0,.8);

    /* gradiente de texto/acento sutil */
    --grad-text:linear-gradient(
        90deg,
        rgba(212,185,120,1) 0%,
        rgba(255,255,255,.8) 60%
    );
}

body{
    background:var(--bg);
    color:var(--fg);
    font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial;
    -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{
    color:var(--fg);
    letter-spacing:-.03em;
}

p,li,small,label{ color:var(--fg); }

small, label, .small, .opacity-75{ color:var(--fg-dim)!important; }

a{ color:var(--fg); text-decoration:none; }
a:hover{ color:var(--accent); text-decoration:none; }

/* TÍTULOS GRADIENT (sin glow) */
.gradient-text{
    background:var(--grad-text);
    -webkit-background-clip:text;
    color:transparent;
    filter:none;
}

/* Texto/acento dorado sobrio */
.text-accent{ color:var(--accent)!important; }

/* Chips */
.bg-accent-soft{
    background:var(--accent-soft)!important;
    color:var(--accent)!important;
    border:1px solid var(--accent-border)!important;
    border-radius:999px;
    font-weight:600;
}

/* Botón principal */
.btn-accent{
    background:var(--accent);
    color:#000;
    border:0;
    border-radius:var(--radius-md);
    box-shadow:0 16px 40px rgba(0,0,0,.9), 0 2px 4px rgba(0,0,0,.8);
    font-weight:600;
}
.btn-accent:hover{ filter:brightness(1.07); color:#000; }

/* Botón vidrio/contorno */
.glass-btn{
    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-xl);
    color:var(--fg);
}
.glass-btn:hover{ background:rgba(255,255,255,.06); color:var(--accent); }

/* Branding mini */
.logo-mini{ width:32px; height:32px; border-radius:10px; }
.brand-text{ font-size:1rem; line-height:1; font-weight:600; }

/* NAVBAR glass sobrio */
.glass-nav{
    background:rgba(15,15,16,.6);
    backdrop-filter:blur(12px) saturate(140%);
    border-bottom:1px solid rgba(255,255,255,.05);
    box-shadow:0 20px 60px rgba(0,0,0,.9);
    z-index:9999;
}
.header-spacer{ height:64px; }
.main-menu .nav-link{ color:var(--fg); font-weight:500; font-size:.9rem; }
.main-menu .nav-link:hover{ color:var(--accent); }

/* MOBILE MENU */
.mobile-menu{
    display:none;
    background:var(--surface);
    border-top:1px solid rgba(255,255,255,.06);
    box-shadow:0 30px 120px rgba(0,0,0,.9);
}
.mobile-menu a{
    display:block;
    padding:1rem 1.25rem;
    border-bottom:1px solid rgba(255,255,255,.06);
    color:var(--fg);
    font-weight:500;
}
.mobile-menu a.text-accent{ color:var(--accent)!important; }

/* HERO */
.hero-section{
    min-height:80vh;
    display:flex;
    align-items:center;
    position:relative;
    color:var(--fg);
}
.hero-bg-video{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover;
    filter:brightness(.32) saturate(1);
}
.hero-overlay{
    position:absolute; inset:0;
    background:radial-gradient(circle at 20% 20%, rgba(212,185,120,.18) 0%, rgba(0,0,0,0) 60%);
}
.hero-content{ position:relative; z-index:2; padding-top:4rem; padding-bottom:4rem; }

/* WHATSAPP FLOAT BUTTON */
.whatsapp-float{
    position:fixed; bottom:1rem; right:1rem; z-index:99999;
    background:radial-gradient(circle at 30% 30%,#25D366 0%,#0f3d1f 80%);
    color:#fff!important; width:3.5rem; height:3.5rem;
    border-radius:var(--radius-lg);
    display:flex; align-items:center; justify-content:center;
    font-size:1.4rem;
    box-shadow:0 20px 40px rgba(0,0,0,.9), 0 2px 4px rgba(0,0,0,.8);
    border:1px solid rgba(255,255,255,.15);
}

/* TARJETAS / “Burbujas" */
.glass-card,.service-card,.feature-card{
    background:var(--surface);
    border:1px solid var(--border);
    box-shadow:var(--shadow-xl);
}
.bubble{
    border-radius:var(--radius-xl);
    position:relative; overflow:hidden;
    background-image:radial-gradient(circle at 0% 0%, rgba(212,185,120,.07) 0%, rgba(0,0,0,0) 60%);
}
.icon-badge{
    background:var(--accent);
    -webkit-background-clip:text;
    color:transparent;
    font-size:1.5rem; line-height:1;
    filter:none; text-shadow:none; font-weight:600;
}

/* MEDIA placeholders */
.media-placeholder{
    background:#111114;
    border:1px solid var(--border);
    box-shadow:var(--shadow-xl);
}
.object-fit-cover{ object-fit:cover; }

/* FOOTER */
.site-footer{
    background:#0d0d0e;
    border-top:1px solid rgba(255,255,255,.05);
    box-shadow:0 -40px 120px rgba(0,0,0,.9);
    color:var(--fg);
}

/* ⬆️ Aumentado el tamaño de badges */
.footer-badge{
    height:44px; /* antes 32px */
    width:auto;
    filter:none;
}
@media (min-width:1200px){
    .footer-badge{ height:48px; }
}

/* PR.svg llenando el card “Nos respalda” */
.mini-card{
    width:120px;
    height:120px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 !important;
}
.footer-logo{
    width:100% !important;
    height:100% !important;
    max-width:none; max-height:none;
    object-fit:contain;
    display:block;
    filter:none;
}
.mini-card .footer-logo{ aspect-ratio:1 / 1; }

/* BADGES de Bootstrap */
.badge.bg-accent-soft{
    background:var(--accent-soft)!important;
    color:var(--accent)!important;
    border:1px solid var(--accent-border)!important;
    font-weight:600;
}

/* CUSTOM CURSOR (más ágil y sin mobile) */
#cursor-dot,#cursor-ring{
    pointer-events:none;
    position:fixed;
    z-index:100000;
    transition:
      transform var(--transition-fast),
      opacity var(--transition-fast),
      border-color var(--transition-fast),
      background-color var(--transition-fast);
    mix-blend-mode:normal;
    will-change:transform, opacity;
}
#cursor-dot{
    width:var(--dot-size); height:var(--dot-size);
    margin-top:calc(var(--dot-size)/-2);
    margin-left:calc(var(--dot-size)/-2);
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 2px 6px rgba(0,0,0,.8);
}
#cursor-ring{
    width:var(--ring-size); height:var(--ring-size);
    margin-top:calc(var(--ring-size)/-2);
    margin-left:calc(var(--ring-size)/-2);
    border-radius:50%;
    border:2px solid rgba(212,185,120,.4);
    box-shadow:0 8px 24px rgba(0,0,0,.9), 0 2px 4px rgba(0,0,0,.8);
    backdrop-filter:blur(4px) saturate(140%);
}
/* Ocultar cursor custom en móviles/tablets o sin hover
@media (hover:none), (pointer:coarse), (max-width:991px){
  #cursor-dot,#cursor-ring{ display:none !important; }
  body{ cursor:auto; }
}
 */
/* Respeta reduced motion */
@media (prefers-reduced-motion:reduce){
  #cursor-dot,#cursor-ring{ transition:none !important; }
}

/* SCROLL REVEAL */
.reveal{
    opacity:0;
    transform:translateY(40px) scale(.96);
    transition:all var(--transition-med);
}
.reveal.reveal-visible{ opacity:1; transform:translateY(0) scale(1); }

/* PAY ICON (sin glow) */
.pay-icon{ height:20px; width:auto; filter:none; }

/* RESPONSIVE */
@media (max-width:991px){ .header-spacer{ height:56px; } }

/* HERO LAYOUT TWEAKS (para dar más espacio al typing en mobile) */
.hero-section{
    min-height:auto; /* override */
    padding-top:6rem;
    padding-bottom:4rem;
}
@media (min-width:992px){
    .hero-section{
        min-height:80vh;
        padding-top:5rem;
        padding-bottom:5rem;
        display:flex;
        align-items:center;
    }
}
.hero-grid{ align-items:flex-start !important; }
.hero-card{
    max-width:46rem;
    padding:2rem 2rem 2.5rem 2rem;
}
@media (min-width:992px){
    .hero-card{ padding:2.5rem 2.5rem 3rem 2.5rem; }
}
.hero-sidecard{ padding:2rem; }
@media (min-width:992px){
    .hero-sidecard{
        padding:2rem;
        max-width:22rem;
        margin-left:auto;
    }
}
/* Headline con typing: multiline */
.hero-headline{
    font-size:2rem;
    line-height:1.15;
    word-break:break-word;
    white-space:normal;
    display:block;
}
@media (min-width:768px){
    .hero-headline{ font-size:2.4rem; line-height:1.15; }
}
@media (min-width:1200px){
    .hero-headline{ font-size:2.7rem; line-height:1.15; }
}
.typed-cursor{ color:var(--accent); font-weight:500; }
.hero-lead{
    font-size:1rem; line-height:1.5;
    color:var(--fg-dim);
    max-width:38rem;
}
.hero-cta .btn{ min-width:11rem; }
/* Bullets right card */
.hero-bullets li{
    color:var(--fg);
    margin-bottom:.5rem;
    list-style:none;
    position:relative;
    padding-left:1.25rem;
    font-weight:500;
    font-size:.9rem;
    line-height:1.4rem;
}
.hero-bullets li::before{
    content:"•";
    position:absolute; left:0; top:0;
    color:var(--accent); font-weight:700;
}
/* Pay logos row */
.pay-logos{ font-size:.8rem; line-height:1.2rem; color:var(--fg); }
.pay-logos i, .pay-logos img{ filter:none; opacity:.9; }

/* Mobile centering / Desktop left align */
@media (max-width:991px){
    .hero-card,.hero-sidecard,.hero-eyebrow,.hero-headline,.hero-lead,.hero-cta,.pay-logos{
        text-align:center; margin-left:auto; margin-right:auto;
    }
}
@media (min-width:992px){
    .hero-card,.hero-eyebrow,.hero-headline,.hero-lead,.hero-cta,.pay-logos{
        text-align:left;
    }
}
.portfolio-card .media-placeholder img{
  transition: transform .4s ease;
}
.portfolio-card:hover .media-placeholder img{
  transform: scale(1.03);
}

/* Menú móvil abierto */
.mobile-menu.open{ 
  display:block !important;
}

/* Que se superponga y sea clickeable */
.mobile-menu{
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10000;        /* encima del header */
}

/* (Opcional) fondo para cerrar al tocar fuera */
.mobile-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 9998;
  display: none;
}
.mobile-backdrop.show{ display:block; }