    :root {
      --navy:      #050a14;
      --navy-2:    #0a1628;
      --navy-3:    #0f1f3d;
      --blue:      #003366;
      --blue-m:    #004080;
      --gold:      #FFD700;
      --gold-d:    #CC9900;
      --gold-l:    #FFE566;
      --text:      #f0ece4;
      --muted:     rgba(240,236,228,.62);
      --border:    rgba(255,215,0,.12);
      --border-h:  rgba(255,215,0,.45);
      --card-bg:   rgba(10,22,40,.75);
      --glass:     rgba(5,10,20,.70);
      --serif:     'Bebas Neue', Georgia, serif;
      --sans:      'Outfit', system-ui, sans-serif;
      --radius:    16px;
      --radius-lg: 24px;
      --topbar-h:  40px;
      --navbar-h:  68px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; overflow-x: hidden; }
    body {
      font-family: var(--sans);
      background: var(--navy);
      color: var(--text);
      overflow-x: hidden;
      line-height: 1.65;
      padding-top: calc(var(--topbar-h) + var(--navbar-h));
    }
    img { max-width: 100%; display: block; }
    a   { color: inherit; text-decoration: none; }

    /* Canvas */
    #bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
    .page-wrap  { position: relative; z-index: 1; }

    /* ── TOPBAR ── */
    #topbar {
      position: fixed; top: 0; left: 0; width: 100%;
      height: var(--topbar-h); z-index: 1040;
      background: linear-gradient(90deg,#020609,#071220 50%,#020609);
      border-bottom: 1px solid rgba(255,215,0,.15);
      display: flex; align-items: center;
    }
    .tb-in {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      width: 100%;
    }
    .tb-l {
      display: flex; align-items: center; gap: 8px;
      font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.85);
      letter-spacing: .04em; flex-wrap: nowrap;
    }
    .tb-dot {
      width: 8px; height: 8px; border-radius: 50%; background: #f03; flex-shrink: 0; position: relative;
    }
    .tb-dot::after {
      content: ''; position: absolute; inset: -4px; border-radius: 50%;
      background: rgba(255,0,51,.35); animation: pulseRed 1.8s ease-out infinite;
    }
    @keyframes pulseRed { 0%{transform:scale(1);opacity:1} 100%{transform:scale(2.8);opacity:0} }
    .tb-phone {
      color: var(--gold)!important; font-weight: 800; font-size: .88rem;
      border-bottom: 1px solid rgba(255,215,0,.35); transition: color .2s, border-color .2s;
    }
    .tb-phone:hover { color: #fff!important; border-color: #fff; }
    .tb-badge {
      background: rgba(255,215,0,.13); border: 1px solid rgba(255,215,0,.35);
      color: var(--gold); font-size: .62rem; font-weight: 700;
      letter-spacing: .12em; padding: 2px 9px; border-radius: 20px;
      text-transform: uppercase; white-space: nowrap;
    }
    .tb-r {
      display: flex; align-items: center; gap: 12px;
      font-size: .74rem; color: rgba(255,255,255,.45);
    }
    .tb-r a { color: rgba(255,255,255,.45); transition: color .2s; }
    .tb-r a:hover { color: var(--gold); }
    .tb-sep { opacity: .3; }
    @media(max-width:600px) {
      .tb-r { display: none; }
      .tb-badge { display: none; }
      .tb-in { justify-content: center; }
    }

    /* ── NAVBAR ── */
    .navbar {
  position: fixed!important; top: var(--topbar-h)!important;
  left: 0; width: 100%; z-index: 1030;
  min-height: var(--navbar-h);   /* antes: height */
  padding-top: 8px;
  padding-bottom: 8px;
  background: rgba(5,10,20,.95)!important;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .3s;
}
    .navbar.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,.7); }
    .navbar-collapse {
      position: absolute; top: 100%; left: 0; width: 100%;
      background: rgba(5,10,20,.98);
      border-bottom: 1px solid var(--border);
      padding: 12px 16px;
    }
    @media(min-width:992px) {
      .navbar-collapse { position: static; width: auto; background: transparent; border: none; padding: 0; }
    }
    .navbar-brand img {
      height: 54px; filter: drop-shadow(0 0 8px rgba(255,215,0,.35)); transition: transform .25s;
    }
    .navbar-brand:hover img { transform: scale(1.04); }
    .nav-link {
      color: rgba(255,255,255,.85)!important; font-weight: 600; font-size: .82rem;
      letter-spacing: .05em; text-transform: uppercase;
      padding: 8px 12px!important; position: relative; white-space: nowrap;
      transition: color .25s;
    }
    .nav-link::after {
      content: ''; position: absolute; bottom: 2px; left: 50%;
      width: 0; height: 2px; background: var(--gold);
      transition: width .3s, left .3s;
    }
    .nav-link:hover { color: var(--gold)!important; }
    .nav-link:hover::after { width: 60%; left: 20%; }
    .nav-login {
      display: inline-flex; align-items: center; gap: 6px;
      color: rgba(255,255,255,.7)!important;
      border: 1px solid rgba(255,255,255,.2); border-radius: 8px;
      padding: 6px 14px!important; font-size: .78rem!important; transition: all .2s!important;
    }
    .nav-login:hover { color: var(--gold)!important; border-color: rgba(255,215,0,.5)!important; background: rgba(255,215,0,.08)!important; }
    .nav-login::after { display: none!important; }
    .nav-cta {
      background: var(--gold)!important; color: var(--navy)!important;
      padding: 7px 18px!important; border-radius: 999px!important; font-weight: 800!important;
      transition: background .2s, transform .15s!important;
    }
    .nav-cta:hover { background: var(--gold-l)!important; transform: translateY(-2px); }
    .nav-cta::after { display: none!important; }
    .navbar-toggler { border: 2px solid rgba(255,215,0,.6)!important; border-radius: 10px; padding: .3rem .55rem; }
    .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,215,0,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

#hero{
    position: relative;
    width: 100%;
    background: #000;
    overflow: hidden;
    isolation: isolate;
    padding: 0;
    margin: 0;
}
.hero-video-aspect{
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 135vh;
    min-height: 320px;
    position: relative;
    overflow: hidden;
}

.hero-video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* Solo en mobile limitamos la altura para que no ocupe toda la pantalla */
@media (max-width: 768px){
    .hero-video-aspect{
        max-height: 60vh;
    }
    .hero-video{
        object-fit: contain;   /* en mobile sí usamos contain para no recortar */
        background: #000;
    }
}
    /* ── SECCIONES ── */
    section { padding: 90px 0; position: relative; }
    .section-tag {
      display: inline-flex; align-items: center; gap: 8px;
      color: var(--gold); font-size: .68rem; font-weight: 700;
      letter-spacing: .22em; text-transform: uppercase; margin-bottom: 12px;
    }
    .section-tag::before, .section-tag::after {
      content: ''; width: 28px; height: 1px; background: var(--gold); opacity: .5;
    }
    .section-title {
      font-family: var(--serif); font-size: clamp(2.2rem,5vw,3.8rem);
      line-height: 1.02; letter-spacing: .02em;
    }
    .section-title .ac {
      background: linear-gradient(135deg,var(--gold),var(--gold-l));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .glass-card {
      background: var(--card-bg); border: 1px solid var(--border);
      border-radius: var(--radius); backdrop-filter: blur(12px);
      box-shadow: 0 10px 30px rgba(0,0,0,.2); transition: transform .3s, border-color .3s, box-shadow .3s;
      height: 100%;
    }
    .glass-card:hover {
      transform: translateY(-5px); border-color: var(--border-h);
      box-shadow: 0 15px 40px rgba(0,0,0,.3), 0 0 20px rgba(255,215,0,.06);
    }

    /* ── SERVICIOS PRINCIPALES (tarjetas enriquecidas) ── */
    #servicios { background: linear-gradient(180deg,transparent,rgba(0,26,51,.1) 50%,transparent); }

    .svc-img {
      width: 100%; height: 210px; object-fit: cover;
      border-radius: var(--radius) var(--radius) 0 0; transition: transform .5s;
    }
    .glass-card:hover .svc-img { transform: scale(1.05); }
    .svc-icon-wrap { overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; position: relative; }
    .svc-icon-badge {
      position: absolute; bottom: 15px; left: 15px; z-index: 2;
      width: 50px; height: 50px;
      background: rgba(5,10,20,.9); border: 1px solid var(--gold);
      border-radius: 12px; display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem; color: var(--gold);
    }
    .svc-body { padding: 24px; }
    .svc-title { font-size: 1.2rem; font-weight: 800; margin-bottom: 8px; }
    .svc-desc { font-size: .87rem; color: var(--muted); line-height: 1.65; margin-bottom: 14px; }

    /* Lista de features dentro de la tarjeta */
    .svc-features { list-style: none; padding: 0; margin-bottom: 16px; }
    .svc-features li {
      display: flex; align-items: flex-start; gap: 8px;
      font-size: .82rem; color: rgba(255,255,255,.8);
      padding: 5px 0; border-bottom: 1px solid rgba(255,215,0,.06);
    }
    .svc-features li:last-child { border-bottom: none; }
    .svc-features li i { color: var(--gold); font-size: .75rem; margin-top: 3px; flex-shrink: 0; }

    .svc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
    .svc-tag {
      font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
      padding: 4px 10px; border-radius: 20px;
      background: rgba(255,215,0,.1); border: 1px solid rgba(255,215,0,.2); color: var(--gold);
    }
    .svc-link {
      display: inline-flex; align-items: center; gap: 6px;
      font-weight: 700; color: var(--gold); text-transform: uppercase; font-size: .83rem;
      border-bottom: 1px solid rgba(255,215,0,.3); transition: all .3s;
    }
    .svc-link:hover { gap: 10px; border-color: var(--gold); }

    /* Cinta de highlight dentro de tarjeta */
    .svc-highlight {
      background: linear-gradient(90deg,rgba(255,215,0,.12),rgba(255,215,0,.04));
      border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0;
      padding: 8px 12px; margin-bottom: 14px; font-size: .8rem; color: var(--gold); font-weight: 600;
    }

   /* ── DISEÑO Y PUBLICIDAD (tarjetas enriquecidas) ── */
#diseno-publicidad{
    background:linear-gradient(180deg,transparent,rgba(0,26,51,.15) 50%,transparent);
}

.dp-thumb-wrap{
    overflow:hidden;
    border-radius:var(--radius) var(--radius) 0 0;
    position:relative;
    height:230px;
    background:linear-gradient(180deg,#08111d,#0b1726);
    display:flex;
    align-items:center;
    justify-content:center;
}

.dp-thumb{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
    padding:12px;
    transition:transform .5s ease;
}

.dp-card:hover .dp-thumb{
    transform:scale(1.04);
}

.dp-thumb-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,
        rgba(0,0,0,0) 45%,
        rgba(5,10,20,.88) 100%);
    pointer-events:none;
}

.dp-thumb-icon{
    position:absolute;
    bottom:12px;
    left:14px;
    z-index:2;
    width:36px;
    height:36px;
    border-radius:10px;
    background:rgba(5,10,20,.85);
    border:1px solid var(--gold);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1rem;
    color:var(--gold);
}

.dp-body{
    padding:18px 20px 20px;
}

.dp-title{
    font-size:1.05rem;
    font-weight:700;
    margin-bottom:6px;
}

.dp-desc{
    font-size:.83rem;
    color:var(--muted);
    line-height:1.6;
    margin-bottom:10px;
}

.dp-features{
    list-style:none;
    padding:0;
    margin:0;
}

.dp-features li{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:.78rem;
    color:rgba(255,255,255,.72);
    padding:3px 0;
}

.dp-features li i{
    color:var(--gold);
    font-size:.68rem;
    flex-shrink:0;
}

.dp-badge{
    display:inline-block;
    margin-top:10px;
    background:rgba(255,215,0,.1);
    border:1px solid rgba(255,215,0,.25);
    color:var(--gold);
    font-size:.66rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding:3px 10px;
    border-radius:20px;
}

    /* ── STATS ── */
    #stats {
      background: linear-gradient(135deg,rgba(0,26,51,.6),rgba(0,64,128,.4));
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
      padding: 70px 0;
    }
    .stat-box { text-align: center; padding: 20px 10px; position: relative; }
    .stat-box + .stat-box::before {
      content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
      width: 1px; background: rgba(255,215,0,.15);
    }
    .stat-big {
      font-family: var(--serif); font-size: 3.5rem; line-height: 1;
      background: linear-gradient(135deg,var(--gold),var(--gold-l));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .stat-suf { font-family: var(--serif); font-size: 1.5rem; color: #4ade80; }
    .stat-lbl { font-size: .78rem; color: rgba(255,255,255,.5); margin-top: 5px; text-transform: uppercase; letter-spacing: .05em; }
    @media(max-width:767px) { .stat-box+.stat-box::before { display: none; } }

    /* ── MASCOTAS ── */

    /* ── NOVA IA ── */
    #nova-promo {
      background: linear-gradient(135deg,rgba(0,26,51,.8),rgba(0,64,128,.5));
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    }
    .nova-card {
      background: linear-gradient(135deg,rgba(10,22,40,.9),rgba(0,51,102,.8));
      border: 1px solid rgba(255,215,0,.25); border-radius: var(--radius-lg);
      padding: 40px; position: relative; overflow: hidden;
    }
    .nova-card::before {
      content: ''; position: absolute; top: -50px; right: -50px;
      width: 250px; height: 250px;
      background: radial-gradient(circle,rgba(255,215,0,.1),transparent 70%);
    }
    .nova-logo {
      font-family: var(--serif); font-size: 2.6rem; letter-spacing: .15em;
      background: linear-gradient(135deg,var(--gold),var(--gold-l),#FFA500);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .nova-badge-tag {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(255,215,0,.1); border: 1px solid rgba(255,215,0,.3);
      color: var(--gold); font-size: .65rem; font-weight: 700;
      letter-spacing: .15em; text-transform: uppercase;
      padding: 4px 12px; border-radius: 20px; margin-bottom: 16px;
    }
    .nova-benefit {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 10px 0; border-bottom: 1px solid rgba(255,215,0,.08);
    }
    .nova-check {
      width: 24px; height: 24px; border-radius: 50%;
      background: rgba(255,215,0,.15); border: 1px solid var(--gold);
      display: flex; align-items: center; justify-content: center;
      color: var(--gold); font-size: .7rem; flex-shrink: 0;
    }
    .nova-preview {
      background: rgba(5,10,20,.9); border: 1px solid rgba(255,255,255,.05);
      border-radius: var(--radius); padding: 20px;
    }
    .chat-bubble-bot {
      background: rgba(0,51,102,.6); border: 1px solid rgba(255,215,0,.1);
      border-radius: 12px 12px 12px 2px; padding: 10px 14px; margin-bottom: 10px; max-width: 85%;
      color: rgba(255,255,255,.9); opacity: 0; animation: fadeInUp .5s forwards;
      font-size: .88rem; line-height: 1.55;
    }
    .chat-bubble-user {
      background: linear-gradient(135deg,var(--blue),var(--blue-m));
      border-radius: 12px 12px 2px 12px; padding: 10px 14px; margin-bottom: 10px;
      margin-left: auto; max-width: 75%; color: #fff;
      opacity: 0; animation: fadeInUp .5s forwards; font-size: .88rem;
    }
    @keyframes fadeInUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
    .typing-dots {
      display: flex; gap: 4px; padding: 12px 15px;
      background: rgba(0,51,102,.6); border: 1px solid rgba(255,215,0,.1);
      border-radius: 12px 12px 12px 2px; width: fit-content;
      opacity: 0; animation: fadeInUp .5s forwards; animation-delay: 2.5s;
    }
    .typing-dots span {
      width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4);
      animation: typing 1s infinite;
    }
    .typing-dots span:nth-child(2){animation-delay:.2s} .typing-dots span:nth-child(3){animation-delay:.4s}
    @keyframes typing { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }

    /* ── NOSOTROS ── */
    #nosotros { background: linear-gradient(180deg,transparent,rgba(0,26,51,.15) 50%,transparent); }
    .about-hero-img {
      width: 100%; height: 100%; min-height: 480px; object-fit: cover;
      border-radius: var(--radius-lg); border: 2px solid rgba(255,215,0,.3);
      box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 6px rgba(255,215,0,.05);
    }
    .about-img-wrap { position: relative; display: flex; align-items: stretch; }
    .about-img-badge {
      position: absolute; bottom: -20px; right: -15px;
      background: var(--gold); color: var(--navy); border-radius: 16px; padding: 16px 22px;
      box-shadow: 0 10px 30px rgba(255,215,0,.3); text-align: center; z-index: 2;
    }
    .about-img-badge .big { font-family: var(--serif); font-size: 2.4rem; line-height: 1; }
    .about-img-badge .lbl { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
    .about-highlight {
      background: linear-gradient(135deg,rgba(255,215,0,.08),rgba(255,215,0,.02));
      border: 1px solid rgba(255,215,0,.2); border-left: 4px solid var(--gold);
      border-radius: 0 var(--radius) var(--radius) 0; padding: 18px 22px; margin-bottom: 24px;
    }
    .about-highlight p { margin: 0; font-size: 1rem; color: var(--text); line-height: 1.7; }
    .about-highlight strong { color: var(--gold); }
    .about-values { list-style: none; padding: 0; margin-top: 20px; }
    .about-values li {
      display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px;
      padding: 12px 16px; background: rgba(255,215,0,.04);
      border: 1px solid rgba(255,215,0,.1); border-radius: 12px; transition: border-color .3s;
    }
    .about-values li:hover { border-color: rgba(255,215,0,.3); }
    .about-values li i { color: var(--gold); font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }
    .about-values li div .val-title { font-weight: 700; font-size: .93rem; margin-bottom: 2px; }
    .about-values li div .val-desc { font-size: .82rem; color: var(--muted); }
    .mv-card {
      background: linear-gradient(135deg,var(--card-bg),rgba(0,51,102,.3));
      border: 1px solid rgba(255,215,0,.15); border-radius: var(--radius-lg);
      padding: 36px 32px; height: 100%; position: relative; overflow: hidden;
      transition: transform .3s, border-color .3s;
    }
    .mv-card:hover { transform: translateY(-5px); border-color: rgba(255,215,0,.4); }
    .mv-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg,var(--gold),#FFA500,var(--gold));
    }
    .mv-icon {
      width: 56px; height: 56px; border-radius: 16px;
      background: rgba(255,215,0,.12); border: 1px solid rgba(255,215,0,.3);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.5rem; color: var(--gold); margin-bottom: 20px;
    }
    .mv-title { font-family: var(--serif); font-size: 1.6rem; letter-spacing: .08em; color: var(--gold); margin-bottom: 12px; }
    .mv-text { font-size: .92rem; color: var(--muted); line-height: 1.78; }
    .about-stat {
      text-align: center; padding: 20px;
      background: rgba(255,215,0,.06); border: 1px solid rgba(255,215,0,.15);
      border-radius: var(--radius); transition: all .3s;
    }
    .about-stat:hover { background: rgba(255,215,0,.1); transform: translateY(-3px); }
    .about-stat .num {
      font-family: var(--serif); font-size: 2.8rem; line-height: 1;
      background: linear-gradient(135deg,var(--gold),var(--gold-l));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .about-stat .lbl { font-size: .72rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-top: 6px; }

    /* ── TESTIMONIOS ── */
    #testimonios { background: linear-gradient(180deg,transparent,rgba(0,26,51,.2) 50%,transparent); }
    .t-card { padding: 30px; position: relative; overflow: hidden; }
    .t-card::before {
      content: '\f10d'; font-family: "Font Awesome 6 Free"; font-weight: 900;
      position: absolute; top: 10px; left: 20px; font-size: 4rem;
      color: rgba(255,215,0,.05); z-index: 0;
    }
    .t-content { position: relative; z-index: 1; }
    .t-stars { color: #f0b429; font-size: 1rem; margin-bottom: 15px; letter-spacing: 2px; }
    .t-quote { font-size: .93rem; color: rgba(255,255,255,.82); line-height: 1.72; font-style: italic; margin-bottom: 20px; font-weight: 300; }
    .t-author-img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); float: left; margin-right: 15px; }
    .t-name { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 2px; }
    .t-role { font-size: .78rem; color: var(--gold); text-transform: uppercase; letter-spacing: .05em; }

    /* ── CTA ── */
    #cta-section {
      position: relative; overflow: hidden;
      background: linear-gradient(135deg,rgba(0,51,102,.9) 0%,rgba(0,26,51,.95) 50%,rgba(0,64,128,.85) 100%);
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
      padding: 100px 0;
    }
    #cta-section::before {
      content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
      width: 600px; height: 600px;
      background: radial-gradient(circle,rgba(255,215,0,.12),transparent 60%);
      pointer-events: none;
    }
    #cta-section::after {
      content: ''; position: absolute; inset: 0;
      background-image: linear-gradient(rgba(255,215,0,.03) 1px,transparent 1px),
                        linear-gradient(90deg,rgba(255,215,0,.03) 1px,transparent 1px);
      background-size: 40px 40px; pointer-events: none;
    }
    .cta-inner { position: relative; z-index: 2; }
    .cta-super-tag {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(255,215,0,.15); border: 1px solid rgba(255,215,0,.5);
      color: var(--gold); font-size: .75rem; font-weight: 700;
      letter-spacing: .2em; text-transform: uppercase;
      padding: 8px 20px; border-radius: 30px; margin-bottom: 24px;
    }
    .cta-title { font-family: var(--serif); font-size: clamp(2.5rem,6vw,5rem); line-height: .95; letter-spacing: .02em; margin-bottom: 20px; }
    .cta-title .ac {
      background: linear-gradient(135deg,var(--gold),var(--gold-l),#FFA500);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .cta-sub { font-size: 1.1rem; color: rgba(255,255,255,.75); max-width: 540px; margin: 0 auto 40px; line-height: 1.72; }
    .cta-sub strong { color: var(--gold); }
    .cta-features { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-bottom: 40px; }
    .cta-feat {
      display: flex; align-items: center; gap: 8px;
      background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
      padding: 10px 18px; border-radius: 999px; font-size: .82rem; color: rgba(255,255,255,.8);
    }
    .cta-feat i { color: var(--gold); }

    /* ── CONTACTO ── */
    #contacto {
      background: linear-gradient(rgba(5,10,20,.92),rgba(0,26,51,.92)),
        url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1950');
      background-size: cover; padding: 80px 0;
    }

    /* ── FOOTER ── */
    footer {
      background: linear-gradient(180deg,rgba(5,10,20,.98),#020508);
      border-top: 1px solid var(--border); padding: 70px 0 30px;
    }
    .footer-logo { height: 140px; margin-bottom: 20px; filter: drop-shadow(0 0 5px rgba(255,215,0,.2)); }
    .footer-desc { font-size: .84rem; color: var(--muted); line-height: 1.8; margin-bottom: 20px; }
    .footer-hdr { font-size: .78rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
    .footer-link { display: block; font-size: .88rem; color: var(--muted); margin-bottom: 10px; transition: color .3s, padding-left .3s; }
    .footer-link:hover { color: var(--gold); padding-left: 5px; }
    .footer-item { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--muted); margin-bottom: 10px; }
    .footer-item i { color: var(--gold); width: 16px; flex-shrink: 0; }
    .social-links { display: flex; gap: 12px; }
    .social-btn {
      width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,215,0,.3);
      display: flex; align-items: center; justify-content: center; color: var(--text); transition: all .3s;
    }
    .social-btn:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); }

    /* ── BOTONES FLOTANTES ── */
    .floating-tools {
      position: fixed; bottom: 28px; right: 24px; z-index: 1001;
      display: flex; flex-direction: column; gap: 12px; align-items: flex-end;
    }
    .float-tool {
      width: 52px; height: 52px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem; cursor: pointer; transition: all .3s;
      box-shadow: 0 4px 15px rgba(0,0,0,.5); border: none;
    }
    .tool-lang { background: var(--navy-3); color: var(--gold); border: 1px solid rgba(255,215,0,.3); }
    .tool-lang:hover { background: var(--navy); transform: scale(1.08); border-color: var(--gold); }
    .tool-nova {
      background: linear-gradient(135deg,var(--gold),#FFA500); color: var(--navy);
      font-size: 1.5rem; animation: pulseNova 2s infinite;
    }
    .tool-nova:hover { transform: scale(1.08); }
    @keyframes pulseNova {
      0%{box-shadow:0 0 0 0 rgba(255,215,0,.7)}
      70%{box-shadow:0 0 0 14px rgba(255,215,0,0)}
      100%{box-shadow:0 0 0 0 rgba(255,215,0,0)}
    }
    @media(max-width:576px) {
      .float-tool { width: 44px; height: 44px; font-size: 1.1rem; }
      .tool-nova { font-size: 1.2rem; }
      .floating-tools { bottom: 20px; right: 16px; gap: 10px; }
    }

    /* ── CHATBOT NOVA ── */
    #nova-chat-widget {
      position: fixed; bottom: 100px; right: 24px; z-index: 1000;
      width: 340px; max-height: 500px;
      display: none; flex-direction: column;
      background: var(--navy-2); border: 1px solid rgba(255,215,0,.25);
      border-radius: 20px; overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,.6);
      animation: slideUpChat .3s ease;
    }
    @keyframes slideUpChat { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
    #nova-chat-widget.open { display: flex; }
    .nova-chat-header {
      background: linear-gradient(135deg,var(--blue),var(--blue-m));
      padding: 14px 18px; display: flex; align-items: center; gap: 10px;
      border-bottom: 1px solid rgba(255,215,0,.15);
    }
    .nova-avatar {
      width: 38px; height: 38px; border-radius: 50%;
      background: linear-gradient(135deg,var(--gold),#FFA500);
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem; color: var(--navy); flex-shrink: 0;
    }
    .nova-chat-name { font-weight: 700; font-size: .92rem; }
    .nova-chat-status { font-size: .72rem; color: #4ade80; }
    .nova-close-btn { margin-left: auto; background: none; border: none; color: rgba(255,255,255,.6); cursor: pointer; font-size: 1rem; transition: color .2s; }
    .nova-close-btn:hover { color: #fff; }
    .nova-messages {
      flex: 1; overflow-y: auto; padding: 16px;
      display: flex; flex-direction: column; gap: 8px;
      scrollbar-width: thin; scrollbar-color: rgba(255,215,0,.2) transparent;
    }
    .nova-msg-bot, .nova-msg-user {
      max-width: 86%; padding: 10px 13px; border-radius: 14px;
      font-size: .85rem; line-height: 1.55; animation: msgPop .25s ease;
      white-space: pre-line;
    }
    @keyframes msgPop { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
    .nova-msg-bot {
      background: rgba(0,51,102,.6); border: 1px solid rgba(255,215,0,.1);
      border-radius: 14px 14px 14px 2px; align-self: flex-start; color: rgba(255,255,255,.9);
    }
    .nova-msg-user {
      background: linear-gradient(135deg,var(--blue),var(--blue-m));
      border-radius: 14px 14px 2px 14px; align-self: flex-end; color: #fff;
    }
    .nova-typing {
      display: flex; gap: 4px; padding: 12px 14px;
      background: rgba(0,51,102,.5); border-radius: 14px 14px 14px 2px;
      align-self: flex-start; width: fit-content;
    }
    .nova-typing span {
      width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4);
      animation: typing 1s infinite;
    }
    .nova-typing span:nth-child(2){animation-delay:.2s} .nova-typing span:nth-child(3){animation-delay:.4s}
    .nova-input-area {
      padding: 12px 14px; border-top: 1px solid rgba(255,215,0,.1);
      display: flex; gap: 8px; align-items: center; background: rgba(5,10,20,.8);
    }
    .nova-input {
      flex: 1; background: rgba(255,255,255,.07); border: 1px solid rgba(255,215,0,.15);
      border-radius: 999px; padding: 9px 16px; color: var(--text);
      font-family: var(--sans); font-size: .85rem; outline: none; transition: border-color .2s;
    }
    .nova-input:focus { border-color: rgba(255,215,0,.45); }
    .nova-input::placeholder { color: rgba(255,255,255,.3); }
    .nova-send-btn {
      width: 36px; height: 36px; border-radius: 50%;
      background: linear-gradient(135deg,var(--gold),#FFA500);
      border: none; color: var(--navy); cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: .85rem; transition: transform .2s;
    }
    .nova-send-btn:hover { transform: scale(1.1); }
    @media(max-width:576px) {
      #nova-chat-widget { width: calc(100vw - 32px); right: 16px; bottom: 80px; max-height: 420px; }
    }

    /* ── RESPONSIVE GENERAL ── */
    @media(max-width:767px) {
      section { padding: 65px 0; }
      .about-hero-img { min-height: 260px; }
      .about-img-badge { bottom: -10px; right: 10px; }
      .hero-kpis { gap: 20px; }
      .kpi-num { font-size: 2rem; }
      .btn-gold, .btn-wa { padding: 11px 22px; font-size: .82rem; }
    }
    @media(max-width:480px) {
      .hero-title { font-size: clamp(2.8rem,11vw,4rem); }
      .hero-sub { font-size: .95rem; }
      .mascot-section h3 { font-size: 2.4rem; }
      .section-title { font-size: clamp(1.9rem,8vw,2.8rem); }
    }
    
    /* ═══════════════════════════════════════════
   VEHICLE WRAP CTA SECTION
   ═══════════════════════════════════════════ */

.wrap-cta {
  position: relative;
  padding: 80px 24px;
  overflow: hidden;
  background: var(--navy);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* --- Fondo dinámico --- */
.wrap-cta-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wrap-cta-noise {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px;
}

.wrap-cta-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,215,0,0.08) 0%, transparent 70%);
  filter: blur(60px);
}

.wrap-cta-lines {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.wrap-cta-lines span {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.2), transparent);
  animation: speedLine 3s linear infinite;
}

.wrap-cta-lines span:nth-child(1) { top: 20%; width: 200px; left: -200px; animation-delay: 0s; }
.wrap-cta-lines span:nth-child(2) { top: 40%; width: 300px; left: -300px; animation-delay: 0.6s; }
.wrap-cta-lines span:nth-child(3) { top: 60%; width: 160px; left: -160px; animation-delay: 1.2s; }
.wrap-cta-lines span:nth-child(4) { top: 75%; width: 250px; left: -250px; animation-delay: 1.8s; }
.wrap-cta-lines span:nth-child(5) { top: 90%; width: 180px; left: -180px; animation-delay: 2.4s; }

@keyframes speedLine {
  0% { transform: translateX(0); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(calc(100vw + 400px)); opacity: 0; }
}

/* --- Layout principal --- */
.wrap-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 48px;
}

/* --- Texto --- */
.wrap-cta-text {
  flex: 1;
  min-width: 0;
}

.wrap-cta-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gold);
  margin-bottom: 20px;
}

.wrap-cta-title {
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 20px;
}

.wrap-cta-accent {
  background: linear-gradient(135deg, var(--gold), var(--gold-l));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wrap-cta-desc {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 440px;
  margin-bottom: 32px;
}

/* --- Botón CTA --- */
.wrap-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-radius: var(--radius);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.wrap-cta-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--gold-l), var(--gold-d));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.wrap-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(255,215,0,0.3);
}

.wrap-cta-btn:hover::before {
  opacity: 1;
}

.wrap-cta-btn span,
.wrap-cta-btn svg {
  position: relative;
  z-index: 1;
}

.wrap-cta-btn:hover svg {
  transform: translateX(4px);
  transition: transform 0.3s ease;
}

/* --- Mascota --- */
.wrap-cta-mascot {
  position: relative;
  flex-shrink: 0;
  width: 360px;
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mascot-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  animation: ringPulse 3s ease-in-out infinite;
}

.mascot-ring-2 {
  inset: -20px;
  border-color: rgba(255,215,0,0.06);
  animation-delay: 1.5s;
}

@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: 0.5; }
}

.wrap-mascot-glow {
  position: absolute;
  width: 290px;
  height: 290px;
  background: radial-gradient(circle, rgba(255,215,0,0.15) 0%, transparent 70%);
  filter: blur(50px);
}

.mascot-imgg {
  position: relative;
  z-index: 2;
  width: 380px;
  height: 380px;
  object-fit: contain;
  animation: mascotFloat 4s ease-in-out infinite;
}

@keyframes mascotFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* --- Globo de diálogo --- */
.mascot-speech {
  position: absolute;
  top: -10px;
  right: -30px;
  z-index: 3;
  background: var(--card-bg);
  border: 1px solid var(--border-h);
  border-radius: 12px;
  padding: 10px 16px;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  animation: speechBounce 3s ease-in-out infinite;
}

.mascot-speech p {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.mascot-speech-tail {
  position: absolute;
  bottom: -7px;
  left: 24px;
  width: 14px;
  height: 14px;
  background: var(--card-bg);
  border-right: 1px solid var(--border-h);
  border-bottom: 1px solid var(--border-h);
  transform: rotate(45deg);
}

@keyframes speechBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .wrap-cta {
    padding: 56px 20px;
  }

  .wrap-cta-inner {
    flex-direction: column-reverse;
    text-align: center;
    gap: 36px;
  }

  .wrap-cta-desc {
    margin-left: auto;
    margin-right: auto;
  }

  .wrap-cta-mascot {
    width: 240px;
    height: 240px;
  }

  .mascot-imgg {
    width: 380px;
    height: 380px;
  }

  .mascot-speech {
    top: -8px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .mascot-speech-tail {
    left: 50%;
    margin-left: -7px;
    bottom: -7px;
  }

  .mascot-ring-2 {
    inset: -14px;
  }

  .wrap-cta-btn {
    display: inline-flex;
  }
}

@media (max-width: 480px) {
  .wrap-cta-title {
    font-size: 28px;
  }

  .wrap-cta-btn {
    padding: 14px 24px;
    font-size: 12px;
    width: 100%;
    justify-content: center;
  }

  .mascot-imgg {
    width: 300px;
    height: 300px;
  }

  .wrap-cta-mascot {
    width: 200px;
    height: 200px;
  }
}