:root{
      --bg1:#07060a;
      --bg2:#0d0b12;
      --gold:#d4af37;
      --gold2:#f5e6a8;
      --text:#f2f2f2;
      --muted:rgba(255,255,255,.72);
      --glass:rgba(255,255,255,.06);
      --stroke:rgba(255,255,255,.12);
      --shadow:0 18px 55px rgba(0,0,0,.55);
      --shadow2:0 12px 34px rgba(0,0,0,.42);
      --ring: rgba(212,175,55,.20);
      --ring2: rgba(245,230,168,.12);

      /* Responsive tokens */
      --radius-xl: 30px;
      --radius-lg: 24px;
      --radius-md: 20px;
      --radius-sm: 18px;

      /* fluid type */
      --fs-title: clamp(28px, 3.4vw, 44px);
      --fs-sub: clamp(13.5px, 1.25vw, 15.5px);

      /* layout */
      --container-pad-x: clamp(12px, 2.2vw, 18px);
      --container-pad-b: clamp(70px, 8vw, 92px);
    }

    *{margin:0;padding:0;box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
      color:var(--text);
      min-height:100vh;
      background:
        radial-gradient(900px 520px at 12% 5%, rgba(212,175,55,.16), transparent 60%),
        radial-gradient(800px 450px at 88% 16%, rgba(245,230,168,.10), transparent 55%),
        radial-gradient(900px 520px at 50% 100%, rgba(212,175,55,.08), transparent 60%),
        linear-gradient(135deg,var(--bg1),var(--bg2));
      overflow-x:hidden;
    }

    /* polvo dorado sutil */
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        radial-gradient(2px 2px at 12% 22%, rgba(245,230,168,.55), transparent 60%),
        radial-gradient(2px 2px at 35% 48%, rgba(212,175,55,.55), transparent 60%),
        radial-gradient(2px 2px at 78% 30%, rgba(245,230,168,.45), transparent 60%),
        radial-gradient(2px 2px at 62% 70%, rgba(212,175,55,.45), transparent 60%),
        radial-gradient(2px 2px at 20% 78%, rgba(245,230,168,.35), transparent 60%);
      opacity:.30;
      filter: blur(.2px);
    }

    /* ===== Container (100% responsive) ===== */
    .container{
      width:min(1200px, 100%);
      margin:0 auto;
      padding: clamp(14px, 2.2vw, 18px) var(--container-pad-x) var(--container-pad-b);
      position:relative;
      z-index:1;
    }

    /* ===== Topbar ===== */
    .topbar{
      position:sticky;
      top:10px;
      z-index:60;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:10px 12px;
      border-radius:18px;
      background: rgba(0,0,0,.28);
      border:1px solid rgba(255,255,255,.10);
      backdrop-filter: blur(12px);
      box-shadow: var(--shadow2);
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      text-decoration:none;
      color:#fff;
      font-weight:900;
      letter-spacing:.02em;
      min-width:0;
      max-width: 52%;
    }
    .logo{
      width:42px;height:42px;border-radius:999px;
      display:grid;place-items:center;
      background: linear-gradient(135deg, var(--gold), var(--gold2));
      color:#111;
      border:1px solid rgba(255,255,255,.20);
      box-shadow: 0 10px 26px rgba(0,0,0,.55);
      flex:0 0 auto;
      font-weight:900;
    }
    .brand span{
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .nav{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      justify-content:flex-end;
      align-items:center;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:9px 12px;
      border-radius:999px;
      background: rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.10);
      color:#fff;
      text-decoration:none;
      font-weight:800;
      box-shadow: var(--shadow2);
      transition: transform .2s ease, border-color .2s ease, background .2s ease, filter .2s ease;
      user-select:none;
      white-space:nowrap;
    }
    .chip:hover{
      transform: translateY(-2px);
      border-color: rgba(212,175,55,.30);
      background: rgba(255,255,255,.07);
    }
    .chip.primary{
      background: linear-gradient(135deg, var(--gold), var(--gold2));
      color:#101010;
      border-color: rgba(255,255,255,.25);
    }
    .chip.primary:hover{ filter: brightness(1.03); }

    /* ===== HERO ===== */
    .hero{
      margin-top:14px;
      position:relative;
      border-radius:var(--radius-xl);
      padding: clamp(16px, 2.2vw, 22px);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border:1px solid rgba(255,255,255,.10);
      box-shadow: var(--shadow);
      overflow:hidden;
      backdrop-filter: blur(10px);
      isolation:isolate;
    }

    .hero:after{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        radial-gradient(620px 280px at 50% 0%, rgba(212,175,55,.22), transparent 65%),
        radial-gradient(620px 280px at 50% 100%, rgba(245,230,168,.12), transparent 65%);
      pointer-events:none;
      opacity:.55;
      z-index:-1;
    }

    /* anillos / scanner (ahora FULL responsive) */
    .rings{
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:-1;
      opacity:.9;
    }
    .ring,
    .scan{
      position:absolute;
      left:50%;
      top:54%;
      width: min(860px, 120vw);
      height: min(860px, 120vw);
      transform: translate(-50%,-50%);
      border-radius:50%;
    }
    .ring{
      border:1px dashed rgba(212,175,55,.18);
      filter: blur(.2px);
      opacity:.6;
    }
    .ring:after{
      content:"";
      position:absolute;
      inset: clamp(34px, 4.8vw, 54px);
      border-radius:50%;
      border:1px dashed rgba(245,230,168,.12);
      opacity:.85;
    }
    .scan{
      background:
        conic-gradient(from 0deg,
          transparent 0deg,
          rgba(212,175,55,.18) 40deg,
          transparent 90deg,
          transparent 360deg
        );
      mix-blend-mode: screen;
      opacity:.35;
      animation: spin 10.5s linear infinite;
    }
    @keyframes spin{ to{ transform: translate(-50%,-50%) rotate(360deg); } }

    .hero-grid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap: clamp(12px, 1.6vw, 16px);
      align-items:stretch;
    }

    .hero-left{
      display:flex;
      flex-direction:column;
      gap:12px;
      padding:6px 4px;
      min-width:0;
    }

    .kicker{
      display:inline-flex;
      align-items:center;
      gap:10px;
      width:max-content;
      padding:8px 12px;
      border-radius:999px;
      background: rgba(0,0,0,.22);
      border:1px solid rgba(255,255,255,.12);
      box-shadow: var(--shadow2);
      color: rgba(255,255,255,.88);
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
      font-size:11.5px;
    }
    .kicker .dot{
      width:8px;height:8px;border-radius:999px;
      background: var(--gold);
      box-shadow: 0 0 14px rgba(212,175,55,.25);
    }

    /* fluid title/subtitle */
    .title{
      font-size: var(--fs-title);
      font-weight:900;
      line-height:1.05;
      letter-spacing:.01em;
      word-break: keep-all;
      hyphens: auto;
    }
    .subtitle{
      color: rgba(255,255,255,.82);
      font-size: var(--fs-sub);
      line-height:1.75;
      max-width: 72ch;
    }

    .hero-actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:6px;
    }

    /* buttons: wrap friendly */
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:12px 16px;
      border-radius:999px;
      text-decoration:none;
      font-weight:900;
      border:1px solid rgba(255,255,255,.18);
      box-shadow: 0 12px 28px rgba(0,0,0,.55);
      transition: transform .2s ease, filter .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
      cursor:pointer;
      user-select:none;
      white-space:nowrap;
      position:relative;
      overflow:hidden;
      max-width:100%;
    }
    .btn:before{
      content:"";
      position:absolute;
      inset:-40%;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.45), transparent 55%);
      transform: rotate(18deg);
      opacity: .0;
      transition: opacity .25s ease;
    }
    .btn:hover:before{ opacity:.35; }

    .btn.primary{
      background: linear-gradient(135deg, var(--gold), var(--gold2));
      color:#101010;
      border-color: rgba(255,255,255,.25);
    }
    .btn.primary:hover{ transform: translateY(-2px); filter:brightness(1.03); box-shadow: 0 16px 36px rgba(0,0,0,.62); }
    .btn.ghost{
      background: rgba(255,255,255,.05);
      color:#fff;
    }
    .btn.ghost:hover{ transform: translateY(-2px); border-color: rgba(212,175,55,.30); background: rgba(255,255,255,.07); }

    .hero-badges{
      margin-top:6px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .badge{
      display:inline-flex; align-items:center; gap:8px;
      padding:9px 12px;
      border-radius:999px;
      background: rgba(0,0,0,.22);
      border:1px solid rgba(255,255,255,.12);
      color: rgba(255,255,255,.86);
      font-size:12.5px;
      box-shadow: var(--shadow2);
    }

    /* ===== Panel derecho ===== */
    .hero-right{
      position:relative;
      border-radius:var(--radius-lg);
      background: rgba(0,0,0,.25);
      border:1px solid rgba(255,255,255,.10);
      box-shadow: var(--shadow2);
      backdrop-filter: blur(10px);
      overflow:hidden;
      min-height: clamp(360px, 40vw, 460px);
    }

    .portrait{
      position:absolute;
      inset:0;
      background:
        radial-gradient(420px 240px at 50% 0%, rgba(212,175,55,.18), transparent 60%),
        rgba(255,255,255,.03);
    }
    .portrait img{
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center top;
      filter: contrast(1.02) saturate(1.03);
      transform: scale(1.02);
      display:block;
    }
    .portrait:after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.68));
      pointer-events:none;
    }

    .hero-right .panel{
      position:absolute;
      left:14px; right:14px; bottom:14px;
      border-radius:var(--radius-md);
      padding:12px;
      background: rgba(0,0,0,.42);
      border:1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(12px);
      box-shadow: var(--shadow2);
      display:grid;
      gap:10px;
    }

    .panel .row{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
    }
    .panel .name{
      font-weight:900;
      letter-spacing:.02em;
      font-size:16px;
    }
    .panel .tag{
      font-size:11px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color: rgba(255,255,255,.78);
    }

    .quick{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
    }
    .quick a{
      display:flex;
      flex-direction:column;
      gap:6px;
      padding:12px;
      border-radius:var(--radius-sm);
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.10);
      color:#fff;
      text-decoration:none;
      box-shadow: var(--shadow2);
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
      min-width:0;
    }
    .quick a:hover{
      transform: translateY(-2px);
      border-color: rgba(212,175,55,.28);
      background: rgba(255,255,255,.08);
    }
    .quick b{
      font-size:12px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color: rgba(255,255,255,.82);
    }
    .quick span{
      font-size:13px;
      color: rgba(255,255,255,.80);
      line-height:1.45;
    }

    .mini-btn{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 12px;
      border-radius:999px;
      background: linear-gradient(135deg, var(--gold), var(--gold2));
      color:#101010;
      text-decoration:none;
      font-weight:900;
      border:1px solid rgba(255,255,255,.25);
      box-shadow: 0 12px 28px rgba(0,0,0,.45);
      white-space:nowrap;
      transition: transform .2s ease, filter .2s ease;
      flex:0 0 auto;
      max-width:100%;
    }
    .mini-btn:hover{ transform: translateY(-2px); filter: brightness(1.03); }

    /* ===== Secciones ===== */
    .section{
      margin-top:16px;
      border-radius:26px;
      padding:18px;
      background: var(--glass);
      border:1px solid var(--stroke);
      box-shadow: var(--shadow2);
      backdrop-filter: blur(10px);
      position:relative;
      overflow:hidden;
    }
    .section:before{
      content:"";
      position:absolute;
      inset:-1px;
      background:
        radial-gradient(260px 140px at 10% 10%, rgba(212,175,55,.14), transparent 65%),
        radial-gradient(260px 140px at 90% 90%, rgba(245,230,168,.10), transparent 65%);
      pointer-events:none;
      opacity:.85;
    }
    .section > *{ position:relative; z-index:1; }

    .h2{
      font-size:14px;
      text-transform:uppercase;
      letter-spacing:.16em;
      color: rgba(255,255,255,.85);
      font-weight:900;
    }
    .p{
      margin-top:10px;
      color: rgba(255,255,255,.78);
      font-size:14px;
      line-height:1.75;
    }

    /* ===== Procedimientos ===== */
    .procs-grid{
      margin-top:14px;
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap:12px;
    }
    .proc{
      position:relative;
      border-radius:22px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.18);
      box-shadow: var(--shadow2);
      cursor:pointer;
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
      min-height: 170px;
      display:flex;
      align-items:flex-end;
      outline: none;
    }
    .proc:hover{
      transform: translateY(-6px);
      border-color: rgba(212,175,55,.42);
      box-shadow: 0 18px 48px rgba(0,0,0,.55);
    }
    .proc:focus-visible{
      outline: 2px solid rgba(212,175,55,.35);
      outline-offset: 4px;
    }
    .proc .bg{
      position:absolute; inset:0;
      background:#0b0a10;
    }
    .proc .bg img{
      width:100%; height:100%;
      object-fit:cover;
      display:block;
      transform: scale(1.06);
      filter: saturate(1.02) contrast(1.02);
    }
    .proc .bg:after{
      content:"";
      position:absolute; inset:0;
      background:
        linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.10) 55%),
        radial-gradient(420px 220px at 15% 10%, rgba(212,175,55,.12), transparent 60%);
      pointer-events:none;
    }

    .proc .meta{
      position:relative;
      z-index:2;
      padding:14px;
      width:100%;
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:12px;
    }
    .proc .meta .txt{ min-width:0; }
    .proc .meta .txt .title{
      font-size:15px;
      font-weight:900;
      line-height:1.2;
      letter-spacing:.02em;
    }
    .proc .sub{
      margin-top:5px;
      font-size:11.5px;
      color:rgba(255,255,255,.75);
      letter-spacing:.06em;
      text-transform:uppercase;
    }
    .proc .pill{
      flex:0 0 auto;
      padding:10px 12px;
      border-radius:999px;
      background: linear-gradient(135deg, var(--gold), var(--gold2));
      color:#101010;
      font-weight:900;
      border:1px solid rgba(255,255,255,.25);
      box-shadow: 0 12px 28px rgba(0,0,0,.38);
      white-space:nowrap;
      transition: transform .2s ease;
    }
    .proc:hover .pill{ transform: translateY(-2px); }

    /* ===== Casos: mosaico responsive (SIN break “raro”) ===== */
    .cases-mosaic{
      margin-top:14px;
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap:10px;
    }
    .case{
      border-radius:20px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.18);
      box-shadow: var(--shadow2);
      cursor:pointer;
      position:relative;
      transition: transform .22s ease, border-color .22s ease;
      min-height: 160px;
      outline:none;
    }
    .case:hover{
      transform: translateY(-4px);
      border-color: rgba(212,175,55,.35);
    }
    .case:focus-visible{
      outline: 2px solid rgba(212,175,55,.35);
      outline-offset: 4px;
    }
    .case img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      transform: scale(1.03);
      filter: saturate(1.02) contrast(1.02);
    }
    .case:after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(to bottom, transparent 55%, rgba(0,0,0,.62));
      pointer-events:none;
      opacity:.9;
    }
    .case span{
      position:absolute;
      left:10px;
      bottom:10px;
      z-index:2;
      font-size:11px;
      font-weight:900;
      letter-spacing:.10em;
      text-transform:uppercase;
      color: rgba(255,255,255,.92);
      background: rgba(0,0,0,.38);
      border:1px solid rgba(255,255,255,.12);
      padding:7px 10px;
      border-radius:999px;
      backdrop-filter: blur(10px);
      max-width: calc(100% - 20px);
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .w6{ grid-column: span 6; }
    .w4{ grid-column: span 4; }
    .w3{ grid-column: span 3; }
    .h2x{ min-height: 330px; }
    .h3x{ min-height: 500px; }

    /* ===== Videos ===== */
    .videos-grid{
      margin-top:14px;
      display:grid;
      grid-template-columns: 1.25fr .75fr;
      gap:14px;
      align-items:stretch;
    }
    .video-feature{
      border-radius:22px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.22);
      box-shadow: var(--shadow2);
      position:relative;
      min-width:0;
    }
    .video-frame{
      width:100%;
      aspect-ratio: 16/9;
      display:block;
      border:0;
      background:#000;
    }
    .video-overlay{
      position:absolute;
      left:14px;
      bottom:14px;
      right:14px;
      padding:12px 12px;
      border-radius:18px;
      background: rgba(0,0,0,.40);
      border:1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(10px);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .video-overlay .meta{
      display:flex;
      flex-direction:column;
      gap:3px;
      min-width: 0;
      flex: 1 1 260px;
    }
    .video-overlay .meta b{
      font-size:14px;
      letter-spacing:.02em;
      color:#fff;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width: 100%;
    }
    .video-overlay .meta span{
      font-size:12.5px;
      color: rgba(255,255,255,.72);
      letter-spacing:.04em;
    }

    .video-list{ display:grid; gap:12px; min-width:0; }

    .video-thumb{
      display:grid;
      grid-template-columns: 120px 1fr;
      gap:12px;
      padding:12px;
      border-radius:18px;
      background: rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.10);
      box-shadow: var(--shadow2);
      cursor:pointer;
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
      outline:none;
      min-width:0;
    }
    .video-thumb:hover{
      transform: translateY(-2px);
      border-color: rgba(212,175,55,.30);
      background: rgba(255,255,255,.07);
    }
    .video-thumb:focus-visible{
      outline: 2px solid rgba(212,175,55,.35);
      outline-offset: 4px;
    }

    .thumb-img{
      width:120px;
      aspect-ratio: 16/10;
      border-radius:14px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.12);
      background:#000;
    }
    .thumb-img img{ width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.05); }
    .tmeta{ display:flex; flex-direction:column; gap:6px; min-width:0; }
    .tmeta b{ font-size:13.5px; color:#fff; line-height:1.25; font-weight:900; }
    .tmeta span{ font-size:12.5px; color: rgba(255,255,255,.72); line-height:1.5; }

    /* ===== Contacto ===== */
    .contact-grid{
      margin-top:14px;
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:12px;
    }
    .contact-card{
      border-radius:22px;
      padding:16px;
      background: rgba(0,0,0,.18);
      border:1px solid rgba(255,255,255,.12);
      box-shadow: var(--shadow2);
      min-width:0;
    }
    .contact-row{
      display:flex;
      flex-direction:column;
      gap:8px;
      margin-top:10px;
      color: rgba(255,255,255,.80);
      font-size:14px;
      line-height:1.65;
    }
    .contact-row a{
      color:#fff;
      text-decoration:none;
      font-weight:900;
      overflow-wrap:anywhere;
    }

    /* Footer */
    .footer{
      margin-top:16px;
      text-align:center;
      color: rgba(255,255,255,.55);
      font-size:12px;
      letter-spacing:.03em;
    }

    /* WhatsApp flotante */
    .wa-float{
      position:fixed;
      right:16px;
      bottom:16px;
      z-index:80;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:12px 14px;
      border-radius:999px;
      background: linear-gradient(135deg, var(--gold), var(--gold2));
      color:#101010;
      font-weight:900;
      box-shadow: var(--shadow);
      border:1px solid rgba(255,255,255,.25);
      transition: transform .2s ease, filter .2s ease;
      max-width: calc(100vw - 24px);
    }
    .wa-float:hover{ transform: translateY(-2px); filter: brightness(1.02); }

    /* Modal (lightbox casos) */
    .modal{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,.72);
      display:none;
      align-items:center;
      justify-content:center;
      padding:18px;
      z-index:120;
      backdrop-filter: blur(6px);
    }
    .modal.open{ display:flex; }
    .modal-card{
      width:min(980px, 100%);
      border-radius:22px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.55);
      box-shadow: var(--shadow);
      position:relative;
    }
    .modal-card img{
      width:100%;
      height:auto;
      display:block;
      max-height: 80vh;
      object-fit:contain;
      background:#000;
    }
    .modal-close{
      position:absolute;
      top:10px;
      right:10px;
      border:1px solid rgba(255,255,255,.18);
      background: rgba(0,0,0,.45);
      color:#fff;
      border-radius:999px;
      padding:10px 12px;
      cursor:pointer;
      font-weight:900;
      backdrop-filter: blur(8px);
    }

    /* ===== Panel “sexy reveal” (mejorado para mobile: visible por defecto) ===== */
    .hero-right{ position:relative; overflow:hidden; }

    /* Desktop/tablet: oculto hasta hover / focus */
    @media (hover:hover) and (pointer:fine){
      .hero-right .panel{
        transform: translateY(34px) scale(.985);
        opacity: 0;
        pointer-events: none;
        filter: blur(8px);
        box-shadow:
          0 26px 70px rgba(0,0,0,.72),
          0 0 0 1px rgba(212,175,55,.18),
          0 0 46px rgba(212,175,55,.18);
        transition:
          transform .62s cubic-bezier(.16, 1, .3, 1),
          opacity .30s ease,
          filter .45s ease,
          box-shadow .55s ease;
        will-change: transform, opacity, filter;
      }
      .hero-right:hover .panel,
      .hero-right:focus-within .panel{
        transform: translateY(0) scale(1);
        opacity: 1;
        pointer-events: auto;
        filter: blur(0);
        box-shadow:
          0 30px 92px rgba(0,0,0,.78),
          0 0 0 1px rgba(212,175,55,.24),
          0 0 70px rgba(212,175,55,.22);
      }
      .hero-right:hover .panel{ animation: panelBreath 2.8s ease-in-out infinite; }
      @keyframes panelBreath{
        0%,100%{ transform: translateY(0) scale(1); }
        50%{ transform: translateY(-2px) scale(1.002); }
      }

      .hero-right .panel::after{
        content:"";
        position:absolute;
        inset:-60%;
        background: linear-gradient(
          110deg,
          transparent 40%,
          rgba(245,230,168,.22) 50%,
          transparent 60%
        );
        transform: translateX(-22%) rotate(8deg);
        opacity: 0;
        pointer-events:none;
        transition: opacity .35s ease;
      }
      .hero-right:hover .panel::after,
      .hero-right:focus-within .panel::after{
        opacity: .85;
        animation: shineSweep 1.15s ease-out 1;
      }
      @keyframes shineSweep{
        from{ transform: translateX(-28%) rotate(8deg); }
        to{ transform: translateX(28%) rotate(8deg); }
      }

      .hero-right .panel::before{
        content:"";
        position:absolute;
        left:50%;
        top:-10px;
        transform: translateX(-50%);
        width: 64px;
        height: 4px;
        border-radius: 999px;
        background: linear-gradient(90deg,
          rgba(212,175,55,0),
          rgba(212,175,55,.95),
          rgba(245,230,168,.95),
          rgba(212,175,55,.95),
          rgba(212,175,55,0)
        );
        opacity:.7;
        filter: drop-shadow(0 0 14px rgba(212,175,55,.25));
      }
    }

    /* Mobile / touch: el panel SIEMPRE visible (porque no hay hover real) */
    @media (hover:none), (pointer:coarse){
      .hero-right .panel{
        opacity: 1;
        transform: none;
        pointer-events: auto;
        filter: none;
      }
    }

    /* ===== Responsive breaks (más sólidos) ===== */
    @media (max-width: 980px){
      .hero-grid{ grid-template-columns: 1fr; }
      .brand{ max-width: 100%; }
      .procs-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
      .videos-grid{ grid-template-columns: 1fr; }
      .contact-grid{ grid-template-columns: 1fr; }

      /* mosaic */
      .cases-mosaic{ grid-template-columns: repeat(6, 1fr); }
      .w6{ grid-column: span 6; }
      .w4{ grid-column: span 6; }
      .w3{ grid-column: span 3; }
      .h3x{ min-height: 360px; }
    }

    @media (max-width: 640px){
      .topbar{
        top:8px;
        padding:10px 10px;
        border-radius:16px;
        gap:10px;
      }
      .logo{ width:40px;height:40px; }
      .nav{
        gap:8px;
      }
      /* Topbar: menú más mobile-friendly (sin overflow) */
      .chip{
        padding:9px 12px;
      }

      .procs-grid{ grid-template-columns: 1fr; }
      .cases-mosaic{ grid-template-columns: repeat(2, 1fr); }
      .w6,.w4,.w3{ grid-column: span 2; }
      .h2x,.h3x{ min-height: 260px; }

      .video-thumb{ grid-template-columns: 110px 1fr; }
      .thumb-img{ width:110px; }

      /* ocultar rings para evitar scroll fantasma en algunos móviles */
      .ring, .scan{ display:none; }
    }

    @media (max-width: 420px){
      /* chips a “una fila” si querés, y el CTA al 100% */
      .nav{ width:100%; justify-content:flex-start; }
      .chip.primary{ width:100%; justify-content:center; }
      .btn.primary{ width:100%; justify-content:center; }
      .btn.ghost{ width:100%; justify-content:center; }
    }

    @media (prefers-reduced-motion: reduce){
      .scan{ animation:none; }
      .chip, .btn, .proc, .case, .video-thumb{ transition:none !important; }
    }
	  /* ===== Topbar Mobile Menu (OFF-CANVAS) ===== */
.nav { align-items:center; }

.nav-desktop{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }

.nav-toggle{
  display:none;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color:#fff;
  font-weight:900;
  box-shadow: var(--shadow2);
  cursor:pointer;
}
.nav-toggle:hover{ border-color: rgba(212,175,55,.28); background: rgba(255,255,255,.07); transform: translateY(-1px); }
.nav-toggle:active{ transform: translateY(0); }
.nav-toggle:focus-visible{ outline:2px solid rgba(212,175,55,.35); outline-offset:3px; }

.burger{
  width:18px; height:12px; position:relative; display:inline-block;
}
.burger:before, .burger:after, .burger i{
  content:"";
  position:absolute; left:0; right:0;
  height:2px; border-radius:999px;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
}
.burger:before{ top:0; }
.burger i{ top:5px; }
.burger:after{ bottom:0; }
.nav-toggle .burger i{ display:block; }

.nav-toggle-text{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.9); }

/* Drawer backdrop */
.nav-drawer{
  position:fixed; inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(8px);
  z-index:200;
  display:none;
  padding: 14px;
}
.nav-drawer.open{ display:flex; align-items:flex-start; justify-content:flex-end; }

/* Drawer card */
.nav-drawer-card{
  width: min(420px, 92vw);
  border-radius: 22px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  padding: 12px;
  overflow:hidden;
  animation: drawerIn .28s cubic-bezier(.2,1,.2,1) both;
}
@keyframes drawerIn{
  from{ transform: translateX(18px) translateY(-8px); opacity:.0; }
  to{ transform: translateX(0) translateY(0); opacity:1; }
}

.nav-drawer-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 6px 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.nav-drawer-brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.nav-close{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  border-radius: 14px;
  padding: 10px 12px;
  cursor:pointer;
  font-weight:900;
}
.nav-close:hover{ border-color: rgba(212,175,55,.28); background: rgba(255,255,255,.08); }

.nav-drawer-links{
  display:grid;
  gap:10px;
  padding: 12px 6px;
}
.nav-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color:#fff;
  text-decoration:none;
  font-weight:900;
  letter-spacing:.02em;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.nav-item:hover{ transform: translateY(-2px); border-color: rgba(212,175,55,.28); background: rgba(255,255,255,.08); }

.nav-cta{
  display:flex;
  justify-content:center;
  align-items:center;
  text-decoration:none;
  padding: 14px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color:#101010;
  font-weight:900;
  border:1px solid rgba(255,255,255,.25);
  box-shadow: 0 16px 34px rgba(0,0,0,.45);
  margin: 6px;
}
.nav-cta:hover{ filter: brightness(1.03); transform: translateY(-2px); }

.nav-drawer-foot{
  padding: 8px 10px 2px;
  text-align:center;
}
.nav-mini{ color: rgba(255,255,255,.62); font-size: 11px; letter-spacing:.06em; }

/* RESPONSIVE RULES for topbar */
@media (max-width: 720px){
  .nav-desktop{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .brand{ max-width: 70%; } /* evita que el nombre coma todo */
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .nav-drawer-card{ animation:none; }
}
/* Empuja el nav al extremo derecho dentro de la topbar */
.topbar .nav{
  flex: 1;                 /* ocupa el espacio restante */
  display: flex;
  justify-content: flex-end; /* todo a la derecha */
}

/* En móvil, el botón queda bien pegado a la derecha */
@media (max-width: 720px){
  .topbar{
    gap: 10px;
  }
  .topbar .brand{
    flex: 0 1 auto;
    min-width: 0;
  }
  .topbar .nav{
    flex: 1;
    justify-content: flex-end;
  }
}
/* Drawer fondo: negro sólido (sin transparencia) */
.nav-drawer{
  background: #000;          /* sólido */
  backdrop-filter: none;     /* sin blur */
}

/* Card del drawer: negro sólido y más legible */
.nav-drawer-card{
  background: #07060a;       /* sólido */
  border: 1px solid rgba(255,255,255,.14);
}

/* Links: un poco más “sólidos” para contraste */
.nav-item{
  background: #0d0b12;       /* sólido */
  border: 1px solid rgba(255,255,255,.14);
}

/* Encabezado del drawer: separador más visible */
.nav-drawer-head{
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.nav-drawer-card{
  background:
    radial-gradient(420px 220px at 30% 10%, rgba(212,175,55,.12), transparent 60%),
    #07060a;
}
/* =========================
   PREMIUM CHIC: Luces dinámicas de fondo
   - Auroras doradas suaves
   - “Bloom” detrás del hero
   - Micro destellos sutiles
   ========================= */

/* Capa de auroras */
body::after{
  content:"";
  position: fixed;
  inset:-20%;
  pointer-events:none;
  z-index: 0;

  /* base: negro sólido + luces */
  background:
    radial-gradient(900px 520px at 12% 5%, rgba(212,175,55,.18), transparent 60%),
    radial-gradient(800px 450px at 88% 16%, rgba(245,230,168,.12), transparent 55%),
    radial-gradient(900px 520px at 50% 100%, rgba(212,175,55,.10), transparent 60%),
    radial-gradient(520px 520px at 22% 78%, rgba(212,175,55,.10), transparent 62%),
    radial-gradient(520px 520px at 86% 78%, rgba(245,230,168,.08), transparent 62%);

  /* movimiento */
  filter: blur(14px) saturate(1.08);
  opacity: .85;
  transform: translate3d(0,0,0);
  mix-blend-mode: screen;
  animation: auroraMove 14s ease-in-out infinite;
}

/* Bloom/halo general muy fino */
body{
  position: relative;
}
.container{ position: relative; z-index: 2; } /* asegúrate de estar por encima */

/* Halo detrás del hero para “impacto premium” */
.hero{
  position: relative;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-40px;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(520px 280px at 25% 25%, rgba(212,175,55,.14), transparent 65%),
    radial-gradient(520px 280px at 75% 70%, rgba(245,230,168,.10), transparent 65%);
  filter: blur(18px);
  opacity: .9;
  animation: heroGlow 10s ease-in-out infinite;
}

/* Micro destellos (muy sutiles) */
body::before{
  /* ya tenías polvo dorado; lo potenciamos suavemente con animación */
  animation: dustTwinkle 6.5s ease-in-out infinite;
}

/* Animaciones */
@keyframes auroraMove{
  0%   { transform: translate3d(-1.2%, -0.6%, 0) scale(1.02) rotate(0deg); }
  35%  { transform: translate3d( 1.4%,  0.2%, 0) scale(1.05) rotate(1deg); }
  70%  { transform: translate3d( 0.2%,  1.2%, 0) scale(1.04) rotate(-1deg); }
  100% { transform: translate3d(-1.2%, -0.6%, 0) scale(1.02) rotate(0deg); }
}

@keyframes heroGlow{
  0%,100% { transform: translate3d(0,0,0) scale(1); opacity:.85; }
  50%     { transform: translate3d(0,-6px,0) scale(1.03); opacity:1; }
}

@keyframes dustTwinkle{
  0%,100% { opacity:.28; }
  50%     { opacity:.40; }
}

/* Modo elegante: menos movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  body::after, .hero::before, body::before{ animation:none !important; }
}
body{
  background:
    radial-gradient(900px 520px at 12% 5%, rgba(212,175,55,.16), transparent 60%),
    radial-gradient(800px 450px at 88% 16%, rgba(245,230,168,.10), transparent 55%),
    radial-gradient(900px 520px at 50% 100%, rgba(212,175,55,.08), transparent 60%),
    linear-gradient(135deg, #07060a, #0d0b12),
    repeating-linear-gradient(
      115deg,
      rgba(255,255,255,.02) 0px,
      rgba(255,255,255,.02) 2px,
      rgba(0,0,0,0) 6px,
      rgba(0,0,0,0) 14px
    );
}
.intro-splash{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #07060a;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease, visibility .6s ease;
}

.intro-splash.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

.intro-overlay{
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0,0,0,.10), rgba(0,0,0,.55));
  pointer-events: none;
}

.intro-skip{
  position: absolute;
  right: 20px;
  bottom: 20px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.35);
  background: rgba(0,0,0,.35);
  color: #d4af37;
  font: 600 14px/1.1 "Poppins", system-ui, sans-serif;
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.intro-skip:hover{ background: rgba(0,0,0,.55); }
/* usa altura real en móviles modernos */
.intro-splash{
  height: 100dvh; /* mejor que 100vh */
}

/* fallback para navegadores viejos */
@supports not (height: 100dvh){
  .intro-splash{ height: 100vh; }
}

/* en móvil: mostrar el video completo */
@media (max-width: 768px){
  .intro-video{
    object-fit: cover;   /* NO recorta */
    background: #07060a;   /* relleno elegante */
    transform: none;
	  width: 100%;
    height: 100%;
              /* llena toda la pantalla */
    object-position: center;    /* centrado */
    
  }

  .intro-overlay{
    background: rgba(0,0,0,.35); /* overlay simple para que no “manche” */
  }
}

	  .logo-img{
  height: 48px;      /* desktop */
  width: auto;
}

@media (max-width:768px){
  .logo-img{
    height: 38px;    /* móvil */
  }
}
.logo-wrap{
  position: relative;
  display: inline-grid;
  place-items: center;
  border-radius: 999px; /* por si el logo es circular */
}

/* la onda */
.logo-wrap::before{
  content:"";
  position:absolute;
  inset:-10px;                 /* tamaño del halo */
  border-radius: 999px;
  border: 2px solid rgba(212,175,55,.55);
  filter: blur(.4px);
  opacity: .55;
  transform: scale(1);
  animation: haloPulse 2.8s ease-in-out infinite;
  pointer-events:none;
}

/* brillo que “corre” */
.logo-wrap::after{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius: 999px;
  background: conic-gradient(
    from 0deg,
    transparent 0 40%,
    rgba(212,175,55,.0) 40%,
    rgba(212,175,55,.75) 48%,
    rgba(212,175,55,.0) 56%,
    transparent 56% 100%
  );
  mask: radial-gradient(closest-side, transparent 72%, #000 74%);
  opacity: .45;
  animation: haloSpin 3.6s linear infinite;
  pointer-events:none;
}

@keyframes haloPulse{
  0%,100%{ transform: scale(1); opacity:.35; }
  50%    { transform: scale(1.08); opacity:.70; }
}

@keyframes haloSpin{
  to{ transform: rotate(360deg); }
}
.procs-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:14px;
}

/* CASI CUADRADO (premium) */
.proc{
  aspect-ratio: 4 / 5;     /* ← CLAVE */
  min-height: 230px;       /* evita que se aplaste */
  border-radius: 26px;
}

/* un poco más aire abajo */
.proc .meta{
  padding:16px;
}

@media (max-width: 900px){
  .procs-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .proc{
    aspect-ratio: 5 / 6;   /* apenas más bajo en tablet */
    min-height: 220px;
  }
}

@media (max-width: 520px){
  .procs-grid{
    grid-template-columns: 1fr;
  }
  .proc{
    aspect-ratio: 4 / 3;   /* más cómodo en celular */
    min-height: 200px;
  }
}