:root{
      --navy:#1d2436;
      --navy2:#000000;
      --navy3:#070b16f2;
      --gold:#C9A227;
      --gold2:#E6CC6A;
      --text:#f5f7ff;
      --muted:rgba(245,247,255,.70);
      --line:rgba(255,255,255,.12);
      --shadow:0 18px 50px rgba(0,0,0,.35);
      --wrap: 1200px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: var(--navy);
      color: var(--text);
    }

    .wrap{max-width:var(--wrap); margin:0 auto; padding:0 16px;}

    /* ===== TOPBAR ===== */
    .topbar{
      background: rgba(0,0,0,.20);
      border-bottom: 1px solid rgba(255,255,255,.10);
      font-size: 13px;
    }
    .topbar-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding: 10px 0;
    }
    .topbar-left, .topbar-right{
      display:flex; align-items:center; gap:18px; flex-wrap:wrap;
      color: rgba(255,255,255,.82);
    }
    .topbar a{color: rgba(255,255,255,.82); text-decoration:none;}
    .topbar a:hover{color:#fff; text-decoration:underline;}

    .social{display:flex; gap:10px; align-items:center;}
    .social a{
      width:28px; height:28px;
      display:grid; place-items:center;
      border-radius: 6px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
    }
    .social a:hover{background: rgba(255,255,255,.10)}

    .top-btn{
      background: var(--gold);
      color:#101010 !important;
      font-weight: 900;
      padding: 10px 14px;
      border-radius: 4px;
      text-decoration:none !important;
      display:inline-flex; align-items:center; gap:10px;
      white-space:nowrap;
    }
    .top-btn:hover{filter:brightness(1.05)}

    /* ===== HEADER / MENU ===== */
    header{
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(29,36,54,.92);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(255,255,255,.10);
    }
    .header-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding: 14px 0;
    }

    .brand{
      display:flex; align-items:center; gap:12px;
      min-width: 240px;
    }
    .brand .logo{
      width: 52px; height: 52px;
      border-radius: 6px;
      overflow:hidden;
      border: 1px solid rgba(201,162,39,.45);
      background: rgba(201,162,39,.12);
      flex: 0 0 auto;
    }
    .brand .logo img{width:100%; height:100%; object-fit:cover; display:block;}
    .brand .txt{line-height:1.05}
    .brand .txt strong{display:block; font-size:18px; font-weight:900;}
    .brand .txt span{display:block; margin-top:4px; color: var(--muted); font-size:12px;}

    /* Desktop nav */
    nav{
      display:flex; gap:18px; align-items:center; flex-wrap:wrap;
      justify-content:center;
    }
    nav a{
      color: rgba(255,255,255,.92);
      text-decoration:none;
      font-weight: 800;
      font-size: 14px;
      padding: 10px 6px;
      position:relative;
      opacity:.95;
    }
    nav a:hover{opacity:1}
    nav a.active::after{
      content:"";
      position:absolute;
      left:6px; right:6px; bottom:4px;
      height:2px;
      background: var(--gold);
      border-radius: 99px;
    }

    /* Mobile menu button */
    .menu-btn{
      display:none;
      width: 44px; height: 44px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.16);
      cursor:pointer;
      align-items:center; justify-content:center;
    }
    .menu-btn:hover{background: rgba(0,0,0,.24)}
    .menu-btn svg{width:22px;height:22px}
    .menu-btn path{stroke:#fff; stroke-width:2.2; fill:none; stroke-linecap:round}

    /* Mobile drawer */
    .drawer{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.55);
      display:none;
      z-index: 200;
    }
    .drawer.open{display:block;}
    .drawer-panel{
      position:absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: min(360px, 90vw);
      background: rgba(29,36,54,.98);
      border-left: 1px solid rgba(255,255,255,.10);
      padding: 16px;
      overflow:auto;
    }
    .drawer-head{
      display:flex; align-items:center; justify-content:space-between;
      gap:10px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255,255,255,.10);
      margin-bottom: 12px;
    }
    .drawer-close{
      width: 44px; height: 44px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.16);
      cursor:pointer;
    }
    .drawer-close:hover{background: rgba(0,0,0,.24)}
    .drawer-close svg{width:22px;height:22px}
    .drawer-close path{stroke:#fff; stroke-width:2.2; fill:none; stroke-linecap:round}

    .drawer-nav{
      display:flex;
      flex-direction:column;
      gap:6px;
      padding: 8px 0;
    }
    .drawer-nav a{
      padding: 12px 12px;
      border-radius: 10px;
      border: 1px solid transparent;
      color:#fff;
      text-decoration:none;
      font-weight: 900;
      background: rgba(255,255,255,.04);
    }
    .drawer-nav a:hover{
      border-color: rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
    }

    /* ===== ICONOS ===== */
    .ico{width:18px;height:18px;display:inline-block}
    .ico-stroke{
      stroke: var(--gold2);
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
      opacity: .95;
    }

    /* ===== HERO ===== */
    .hero{
      position:relative;
      height: 640px;
      display:grid;
      grid-template-columns: 1fr 1fr;
      overflow:hidden;
    }
    .hero-left{
      position:relative;
      background:#000;
    }
    .hero-left .media{
      position:absolute; inset:0;
      width:100%; height:100%;
      object-fit:cover;
      display:block;
      filter: contrast(1.05) saturate(1.05);
    }
    .hero-left::after{
      content:"";
      position:absolute; inset:0;
      background: linear-gradient(90deg, rgba(29,36,54,.78), rgba(29,36,54,.20), rgba(29,36,54,0));
      pointer-events:none;
    }

    .hero-right{
      position:relative;
      background:
        linear-gradient(180deg, rgba(54, 50, 7, 0.95), rgba(2, 2, 3, 0.95)),
        radial-gradient(900px 600px at 20% 10%, rgb(27, 21, 2), transparent 60%);
      display:flex;
      align-items:center;
    }

    .hero-content{
      width: min(520px, 92%);
      margin-left: clamp(18px, 6vw, 64px);
      padding: 12px 0;
    }
    .hero-kicker{
      color: rgba(255,255,255,.92);
      font-weight: 800;
      letter-spacing:.2px;
      margin-bottom: 10px;
    }
    .hero-title{
      font-family:"Playfair Display", serif;
      font-weight: 700;
      font-size: clamp(46px, 5vw, 64px);
      line-height: 1.02;
      margin:0;
    }
    .hero-desc{
      margin: 18px 0 0;
      color: rgba(255,255,255,.88);
      line-height:1.7;
      font-size: 14.5px;
      font-weight: 600;
      max-width: 520px;
    }

    .hero-btn{
      margin-top: 22px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background: var(--gold);
      color:#101010;
      font-weight: 900;
      padding: 14px 22px;
      border-radius: 4px;
      text-decoration:none;
      box-shadow: 0 16px 30px rgba(0,0,0,.25);
    }
    .hero-btn:hover{filter:brightness(1.05)}

    .arrow{
      position:absolute;
      top:50%;
      transform: translateY(-50%);
      width: 56px; height: 56px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.24);
      background: rgba(0,0,0,.22);
      display:grid; place-items:center;
      cursor:pointer;
      z-index: 5;
    }
    .arrow:hover{background: rgba(0,0,0,.35)}
    .arrow.left{left: 18px;}
    .arrow.right{right: 18px;}
    .arrow svg{width:22px;height:22px}
    .arrow path{stroke:#fff; stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round;}

    .dots{
      position:absolute;
      left:50%;
      bottom: 18px;
      transform: translateX(-50%);
      display:flex; gap:10px;
      z-index: 6;
    }
    .dot{
      width: 18px; height: 6px;
      border-radius: 999px;
      background: rgba(255,255,255,.35);
      cursor:pointer;
    }
    .dot.active{ background: var(--gold); }

    /* ===== FEATURES ===== */
    .feature-row{
      margin-top: -54px;
      position:relative;
      z-index: 7;
    }
    .features{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      box-shadow: var(--shadow);
    }
    .fbox{
      padding: 26px 24px;
      background: #fff;
      color:#0b1220;
      border-right: 1px solid rgba(16,24,40,.08);
      display:flex;
      gap:16px;
      align-items:flex-start;
      min-height: 150px;
    }
    .fbox:last-child{border-right:0}
    .fbox strong{
      display:block;
      color: rgba(16,24,40,.60);
      font-size: 13px;
      letter-spacing:.2px;
      margin-bottom: 6px;
    }
    .fbox h3{
      margin:0;
      font-family:"Playfair Display", serif;
      font-size: 24px;
      line-height:1.1;
    }
    .fbox p{
      margin:10px 0 0;
      color: rgba(16,24,40,.62);
      font-size: 13.5px;
      line-height:1.6;
      font-weight: 600;
    }
    .fbox.mid{
      background: var(--gold);
      color:#101010;
    }
    .fbox.mid strong{color: rgba(16,16,16,.70)}
    .fbox.mid p{color: rgba(16,16,16,.70)}

    .ficon{
      width: 46px; height: 46px;
      border-radius: 8px;
      display:grid; place-items:center;
      border: 1px solid rgba(201,162,39,.35);
      background: rgba(201,162,39,.10);
      flex: 0 0 auto;
    }
    .fbox.mid .ficon{
      border: 1px solid rgba(16,16,16,.18);
      background: rgba(255,255,255,.22);
    }
    .ficon svg{width: 24px; height: 24px;}
    .fbox.mid .ico-stroke{stroke:#101010; opacity:.95}

    /* ===== SECCIONES ===== */
    .section{
      padding: 92px 0;
      background: var(--navy2);
    }
    .section.alt{ background: var(--navy3); }

    .sec-title{
      text-align:center;
      margin-bottom: 38px;
    }
    .sec-title .tag{
      color: var(--gold);
      font-weight: 900;
      letter-spacing:.6px;
      font-size: 12.5px;
    }
    .sec-title h2{
      margin: 10px 0 0;
      font-family:"Playfair Display", serif;
      font-size: 46px;
      line-height:1.1;
    }
    .sec-title p{
      margin: 14px auto 0;
      max-width: 820px;
      color: rgba(255,255,255,.78);
      line-height:1.7;
      font-weight: 600;
      font-size: 14.5px;
    }

    /* Cards (Áreas/Servicios) */
    .cards{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }
    .pcard{
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(0,0,0,.06);
      padding: 28px 24px;
      min-height: 240px;
    }
    .pcard .pico{
      width: 48px; height: 48px;
      border: 1px solid rgba(201,162,39,.35);
      background: rgba(201,162,39,.08);
      display:grid; place-items:center;
      border-radius: 8px;
      margin-bottom: 14px;
    }
    .pcard .pico svg{width:24px;height:24px}
    .pcard h3{
      margin:0;
      font-family:"Playfair Display", serif;
      font-size: 26px;
    }
    .pcard p{
      margin: 12px 0 0;
      color: rgba(255,255,255,.78);
      line-height:1.7;
      font-weight: 600;
      font-size: 14px;
    }
    .pcard a{
      display:inline-block;
      margin-top: 14px;
      color: #fff;
      text-decoration:none;
      font-weight: 900;
      font-size: 13px;
      letter-spacing:.2px;
      border-bottom: 1px solid rgba(255,255,255,.35);
      padding-bottom: 3px;
    }
    .pcard a:hover{border-color:#fff}

    /* ===== Sección con imagen de fondo (REUTILIZABLE) ===== */
    .section-bg{
      position: relative;
      overflow: hidden;
    }
    .section-bg .bg-media{
      position:absolute;
      inset:0;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      transform: scale(1.03);
      filter: saturate(1.05) contrast(1.05);
      z-index: 0;
    }
    .section-bg::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(900px 600px at 20% 20%, rgba(19, 15, 3, 0.18), transparent 60%),
        linear-gradient(180deg, rgba(29,36,54,.70), rgba(29,36,54,.92));
      z-index:1;
    }
    .section-bg .wrap{ position:relative; z-index:2; }
    .section-bg .pcard{
      background: rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.18);
      backdrop-filter: blur(8px);
    }

    /* ===== CONTACTO + MAPA ===== */
    .contact-grid{
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 18px;
      align-items: start;
    }
    .contact-panel{
      border: 1px solid rgba(3, 3, 3, 0.16);
      background: rgba(0,0,0,.06);
      padding: 22px;
    }
    .map-panel{
      border: 1px solid rgba(14, 11, 11, 0.16);
      background: rgba(0,0,0,.06);
      padding: 10px;
    }
    .map-frame{
      width:100%;
      height: 360px;
      border:0;
      display:block;
      filter: saturate(1.05) contrast(1.02);
    }

    /* ===== QR + LINK WEB (debajo del módulo de contacto) ===== */
    .qr-row{ margin-top: 18px; }
    .qr-card{
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(0,0,0,.06);
      padding: 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 16px;
    }
    .qr-left h3{
      margin:0;
      font-family:"Playfair Display", serif;
      font-size: 24px;
      line-height:1.1;
    }
    .qr-left p{
      margin:10px 0 0;
      color: rgba(255,255,255,.78);
      font-weight: 600;
      line-height: 1.7;
    }
    .qr-left a{
      color:#fff;
      font-weight: 1000;
      text-decoration:none;
      border-bottom: 1px solid rgba(255,255,255,.35);
      padding-bottom: 2px;
    }
    .qr-left a:hover{ border-color:#fff; }
    .qr-right{
      flex: 0 0 auto;
      display:grid;
      place-items:center;
      padding: 10px;
      border-radius: 12px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.14);
    }
    #qrCanvas{
      width: 220px;
      height: 220px;
      image-rendering: pixelated;
      border-radius: 8px;
      background:#fff;
    }

    /* ===== FOOTER ===== */
    footer{
      background: var(--navy2);
      border-top: 1px solid rgba(255,255,255,.10);
      padding: 64px 0 0;
    }
    .foot-grid{
      display:grid;
      grid-template-columns: 1.35fr 1fr 1fr 1.2fr;
      gap: 26px;
      padding-bottom: 40px;
    }
    .foot h4{
      margin:0 0 14px;
      font-family:"Playfair Display", serif;
      font-size: 18px;
      color:#fff;
    }
    .foot p, .foot a{
      color: rgba(255,255,255,.75);
      font-weight: 600;
      line-height:1.75;
      font-size: 14px;
      text-decoration:none;
    }
    .foot a:hover{color:#fff;text-decoration:underline}

    .subfoot{
      border-top: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.10);
      padding: 16px 0;
      color: rgba(255,255,255,.75);
      font-weight: 700;
      font-size: 13px;
    }
    .subfoot-inner{
      display:flex; align-items:center; justify-content:space-between;
      gap:12px; flex-wrap:wrap;
    }
    .botsoft{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:flex-end;
    }
    .botsoft a{
      color: rgba(255,255,255,.85);
      text-decoration:none;
      font-weight: 900;
      border-bottom: 1px solid rgba(255,255,255,.30);
      padding-bottom: 2px;
    }
    .botsoft a:hover{border-color:#fff;color:#fff;}

    /* WhatsApp flotante */
    .wa{
      position: fixed;
      left: 18px;
      bottom: 18px;
      z-index: 998;
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 12px 14px;
      border-radius: 999px;
      background: #25D366;
      color: #0b1220;
      text-decoration:none;
      font-weight: 1000;
      box-shadow: 0 18px 40px rgba(0,0,0,.34);
    }
    .wa small{ font-weight: 900; opacity: .9; }

    /* Botón llamar (solo móvil/tablet) */
    .callf{
      position: fixed;
      left: 18px;
      bottom: 76px;
      z-index: 998;
      display: none;
      align-items: center;
      gap: 8px;
      padding: 12px 16px;
      border-radius: 999px;
      background: var(--gold);
      color: #101010;
      text-decoration: none;
      font-weight: 900;
      box-shadow: 0 18px 40px rgba(0,0,0,.34);
    }
    .callf svg{ width: 18px; height: 18px; fill: none; stroke: #101010; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    @media (max-width: 980px){ .callf{ display: inline-flex; } }

    /* Enlace "saltar al contenido" */
    .skip{ position: absolute; left: 8px; top: -60px; z-index: 1000; background: var(--gold); color: #101010; padding: 10px 14px; border-radius: 6px; font-weight: 900; text-decoration: none; }
    .skip:focus{ top: 8px; }

    /* Botones dentro de secciones */
    .sec-actions{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
    .sec-actions .top-btn.alt{ background: rgba(255,255,255,.12); color: #fff !important; border: 1px solid rgba(255,255,255,.22); }

    /* ===== CÓMO TRABAJAMOS ===== */
    .steps{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: paso; }
    .step{ position: relative; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.06); padding: 30px 24px 26px; }
    .step::before{
      counter-increment: paso; content: counter(paso);
      display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px;
      background: var(--gold); color: #101010; font-weight: 900; font-family: "Playfair Display", serif; font-size: 18px; margin-bottom: 14px;
    }
    .step h3{ margin: 0; font-family: "Playfair Display", serif; font-size: 24px; }
    .step p{ margin: 10px 0 0; color: rgba(255,255,255,.78); line-height: 1.7; font-weight: 600; font-size: 14px; }
    @media (max-width: 980px){ .steps{ grid-template-columns: 1fr; } }

    /* Botón subir */
    .float-stack{
      position: fixed;
      right: 18px;
      bottom: 72px;
      display:flex;
      flex-direction:column;
      gap: 10px;
      z-index: 999;
    }
    .fab{
      width: 46px; height: 46px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(0,0,0,.18);
      display:grid; place-items:center;
      cursor:pointer;
      box-shadow: 0 16px 30px rgba(0,0,0,.25);
    }
    .fab:hover{background: rgba(0,0,0,.28)}
    .fab svg{width:20px;height:20px}
    .fab .stroke{stroke:#fff; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round}
    .fab.gold{ background: var(--gold); border-color: rgba(0,0,0,.10); }
    .fab.gold .stroke{stroke:#101010}

    /* Responsive */
    @media (max-width: 980px){
      nav{display:none;}
      .menu-btn{display:flex;}
      .hero{grid-template-columns: 1fr; height: auto;}
      .hero-left{height: 360px;}
      .hero-right{padding: 44px 0;}
      .feature-row{margin-top: 18px;}
      .features{grid-template-columns: 1fr;}
      .fbox{border-right:0; border-bottom:1px solid rgba(16,24,40,.08);}
      .fbox:last-child{border-bottom:0;}
      .cards{grid-template-columns: 1fr;}
      .foot-grid{grid-template-columns: 1fr;}
      .topbar-left{display:none;}
      .contact-grid{ grid-template-columns: 1fr; }
      .map-frame{ height: 320px; }
      .qr-card{ flex-direction:column; align-items:stretch; }
      .qr-right{ justify-self:center; width: fit-content; margin: 0 auto; }
      #qrCanvas{ width: 200px; height: 200px; }
      .botsoft{justify-content:flex-start;}
      .section{ padding: 64px 0; }
      .sec-title h2{ font-size: 34px; }
    }
    @media (max-width: 420px){
      .brand .txt strong{font-size:16px;}
      .hero-title{font-size:42px;}
    }

    /* =========================
       CTA EFFECT (BOTONES)
       ========================= */
    .top-btn,
    .hero-btn,
    .fab.gold,
    .wa{
      position: relative;
      overflow: hidden;
      transform: translateZ(0);
      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
      will-change: transform, box-shadow;
    }

    .top-btn:hover,
    .hero-btn:hover,
    .fab.gold:hover,
    .wa:hover{
      transform: translateY(-2px);
      filter: brightness(1.03);
    }

    .top-btn:active,
    .hero-btn:active,
    .fab.gold:active,
    .wa:active{
      transform: translateY(0);
      filter: brightness(0.98);
    }

    .top-btn:focus-visible,
    .hero-btn:focus-visible,
    .fab.gold:focus-visible,
    .wa:focus-visible{
      outline: 2px solid rgba(230,204,106,.85);
      outline-offset: 3px;
    }

    @keyframes ctaPulse {
      0%, 100% { box-shadow: 0 16px 30px rgba(0,0,0,.25), 0 0 0 rgba(201,162,39,0); }
      50%      { box-shadow: 0 18px 40px rgba(0,0,0,.30), 0 0 18px rgba(201,162,39,.22); }
    }
    .top-btn,
    .hero-btn,
    .fab.gold{
      animation: ctaPulse 3.0s ease-in-out infinite;
    }

    @keyframes ctaShine {
      0%   { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
      20%  { opacity: .55; }
      40%  { opacity: 0; }
      100% { transform: translateX(220%) skewX(-18deg); opacity: 0; }
    }
    .top-btn::before,
    .hero-btn::before,
    .fab.gold::before{
      content:"";
      position:absolute;
      top: -40%;
      left: -40%;
      width: 70%;
      height: 180%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
      filter: blur(0.2px);
      opacity: 0;
      animation: ctaShine 4.6s ease-in-out infinite;
      pointer-events:none;
    }

    @keyframes waPulse{
      0%, 100% { box-shadow: 0 18px 40px rgba(0,0,0,.34), 0 0 0 rgba(37,211,102,0); }
      50%      { box-shadow: 0 22px 46px rgba(0,0,0,.38), 0 0 20px rgba(37,211,102,.25); }
    }
    .wa{
      animation: waPulse 3.2s ease-in-out infinite;
    }
    .wa::before{
      content:"";
      position:absolute;
      inset:-2px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 55%);
      opacity: .35;
      pointer-events:none;
    }

    @media (prefers-reduced-motion: reduce){
      .top-btn, .hero-btn, .fab.gold, .wa{ animation: none !important; }
      .top-btn::before, .hero-btn::before, .fab.gold::before{ animation: none !important; }
    }

    /* ===== COOKIES — BANNER (CAPA 1) ===== */
    .ck-banner{
      position: fixed;
      left: 16px;
      right: 16px;
      bottom: 16px;
      z-index: 9999;
      background: #0f1322;
      color: #f5f7ff;
      border: 1px solid rgba(201,162,39,.45);
      border-radius: 14px;
      box-shadow: 0 24px 60px rgba(0,0,0,.55);
      padding: 18px 20px;
      max-width: 1100px;
      margin: 0 auto;
      display: none;
      font-size: 14.5px;
      line-height: 1.55;
    }
    .ck-banner.is-visible{ display: block; animation: ckUp .35s ease-out; }
    @keyframes ckUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    .ck-banner h3{
      margin: 0 0 6px;
      font-family:"Playfair Display", serif;
      font-size: 18px;
      color: #fff;
    }
    .ck-banner p{ margin: 0 0 14px; color: rgba(245,247,255,.88); }
    .ck-banner a{ color: var(--gold2, #E6CC6A); font-weight: 700; }
    .ck-actions{
      display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end;
    }
    .ck-btn{
      padding: 11px 18px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.22);
      background: transparent;
      color: #f5f7ff;
      font-family: inherit;
      font-weight: 800;
      font-size: 13.5px;
      cursor: pointer;
      transition: all .18s ease;
      letter-spacing: .02em;
    }
    .ck-btn:hover{ border-color:#fff; transform: translateY(-1px); }
    .ck-btn.primary{
      background: linear-gradient(180deg, #C9A227, #b48f1d);
      border-color: transparent;
      color: #1d2436;
    }
    .ck-btn.primary:hover{ background: linear-gradient(180deg, #E6CC6A, #C9A227); }
    .ck-btn.danger:hover{ border-color: #ff7a7a; color: #ffd0d0; }

    @media (max-width: 640px){
      .ck-banner{ padding: 16px; font-size: 13.5px; }
      .ck-actions{ justify-content: stretch; }
      .ck-btn{ flex: 1 1 100%; text-align: center; }
    }

    /* ===== COOKIES — MODAL DE CONFIGURACIÓN ===== */
    .ck-overlay{
      position: fixed; inset: 0; z-index: 10000;
      background: rgba(0,0,0,.65);
      display: none;
      align-items: center; justify-content: center;
      padding: 16px;
    }
    .ck-overlay.is-visible{ display: flex; animation: ckFade .25s ease-out; }
    @keyframes ckFade { from { opacity: 0; } to { opacity: 1; } }
    .ck-modal{
      background: #0f1322;
      color: #f5f7ff;
      border: 1px solid rgba(201,162,39,.45);
      border-radius: 14px;
      width: 100%;
      max-width: 640px;
      max-height: 90vh;
      overflow-y: auto;
      padding: 26px;
      box-shadow: 0 24px 60px rgba(0,0,0,.55);
    }
    .ck-modal h2{
      margin: 0 0 8px;
      font-family:"Playfair Display", serif;
      font-size: 22px;
    }
    .ck-modal p.intro{ color: rgba(245,247,255,.78); margin: 0 0 18px; font-size: 14px; }
    .ck-cat{
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 10px;
      padding: 14px 16px;
      margin-bottom: 10px;
    }
    .ck-cat-head{
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
    }
    .ck-cat-head h4{
      margin: 0;
      font-size: 15px;
      color: #fff;
      font-weight: 800;
    }
    .ck-cat-head .badge{
      font-size: 11px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--gold2, #E6CC6A);
      font-weight: 700;
    }
    .ck-cat p{ margin: 8px 0 0; font-size: 13px; color: rgba(245,247,255,.72); }

    /* Switch */
    .switch{ position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
    .switch input{ opacity: 0; width: 0; height: 0; }
    .slider{
      position: absolute; cursor: pointer; inset: 0;
      background: rgba(255,255,255,.2);
      transition: .25s; border-radius: 999px;
    }
    .slider:before{
      position: absolute; content: "";
      height: 20px; width: 20px; left: 3px; bottom: 3px;
      background: #fff; transition: .25s; border-radius: 50%;
    }
    .switch input:checked + .slider{ background: var(--gold, #C9A227); }
    .switch input:checked + .slider:before{ transform: translateX(20px); }
    .switch input:disabled + .slider{ background: rgba(201,162,39,.55); cursor: not-allowed; }

    .ck-modal-actions{
      display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end;
      margin-top: 18px;
    }

    /* Icono flotante para reabrir el panel */
    .ck-reopen{
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 998;
      width: 44px; height: 44px;
      border-radius: 50%;
      background: #0f1322;
      border: 1px solid rgba(201,162,39,.55);
      color: var(--gold2, #E6CC6A);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      box-shadow: 0 10px 24px rgba(0,0,0,.4);
      transition: transform .2s ease, border-color .2s ease;
    }
    .ck-reopen:hover{ transform: scale(1.08); border-color: var(--gold, #C9A227); }
    .ck-reopen svg{ width: 22px; height: 22px; }