:root{
    /* Paleta tomada de la demo de OTIGLI (tema «noche») */
    --bg:#0C1C26; --bg-2:#12283A; --ink:#10293A;
    --fg:#E3ECEF; --muted:#A3B6C0; --border:#284556;
    --primary:#8ED3E0; --gold:#F2C14E; --coral:#F07C6E; --teal:#3FB3A5;
    --font-display:"Cinzel",Georgia,serif;
    --font-serif:"Noto Serif",Georgia,serif;
    --font-sans:"Noto Sans",system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0}
  html{color-scheme:dark}
  body{
    min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--fg);
    font-family:var(--font-sans);overflow-x:hidden;
    display:grid;place-items:center;padding:24px 16px;position:relative;
  }
  /* Fondo: resplandor suave + trama de puntos */
  body::before{
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(60% 50% at 50% 38%,rgba(142,211,224,.13),transparent 70%),
      radial-gradient(40% 35% at 85% 90%,rgba(240,124,110,.08),transparent 70%),
      radial-gradient(40% 35% at 10% 85%,rgba(63,179,165,.08),transparent 70%);
  }
  body::after{
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.35;
    background-image:radial-gradient(rgba(142,211,224,.16) 1px,transparent 1px);
    background-size:28px 28px;
    -webkit-mask-image:radial-gradient(ellipse at center,#000 20%,transparent 75%);
            mask-image:radial-gradient(ellipse at center,#000 20%,transparent 75%);
  }

  /* Marcas de agua: nombre de cada lengua en movimiento */
  #marcas{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
  .marca{
    position:absolute;white-space:nowrap;font-family:var(--font-serif);font-weight:600;
    color:var(--primary);opacity:0;will-change:transform,opacity;
    animation:deriva var(--dur) ease-in-out var(--del) infinite;
    text-align:center;line-height:1.25;
  }
  .marca small{display:block;font-family:var(--font-sans);font-weight:500;font-size:.38em;letter-spacing:.08em;opacity:.8;margin-top:.2em}
  @keyframes deriva{
    0%{opacity:0;transform:translate3d(0,14px,0) scale(.96)}
    25%,70%{opacity:var(--op)}
    100%{opacity:0;transform:translate3d(var(--dx),-26px,0) scale(1.03)}
  }

  main{position:relative;z-index:2;text-align:center;width:100%;max-width:760px;display:flex;flex-direction:column;align-items:center}

  /* Icono animado: las cuatro vírgulas del logotipo, en órbita */
  .icono{width:min(180px,46vw);height:auto;margin-bottom:8px;overflow:visible}
  .orbita{transform-origin:100px 100px;animation:gira 28s linear infinite}
  .virgula{transform-origin:100px 100px}
  .virgula path.main{
    stroke-dasharray:140;stroke-dashoffset:140;
    animation:traza 4.8s ease-in-out infinite;animation-delay:var(--d);
  }
  .virgula path.sombra{opacity:.5}
  .halo{transform-origin:100px 100px;animation:respira 4.8s ease-in-out infinite}
  @keyframes gira{to{transform:rotate(360deg)}}
  @keyframes traza{0%{stroke-dashoffset:140}40%,70%{stroke-dashoffset:0}100%{stroke-dashoffset:-140}}
  @keyframes respira{0%,100%{transform:scale(.92);opacity:.5}50%{transform:scale(1.06);opacity:1}}

  .eyebrow{font-family:var(--font-display);font-weight:600;letter-spacing:.32em;text-transform:uppercase;font-size:clamp(.78rem,2.4vw,.95rem);color:var(--gold);margin-top:10px}
  h1{
    font-family:var(--font-serif);font-weight:700;line-height:1.08;margin-top:14px;
    font-size:clamp(2.3rem,9vw,4.6rem);letter-spacing:-.01em;
    background:linear-gradient(180deg,#fff 20%,var(--primary));-webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .lead{margin-top:16px;color:var(--muted);font-size:clamp(1rem,3.2vw,1.2rem);line-height:1.6;max-width:34em}
  .lead strong{color:var(--fg);font-weight:500}

  /* Cuenta regresiva */
  .cuenta{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,2.4vw,18px);margin-top:36px;width:100%;max-width:600px}
  .bloque{
    background:linear-gradient(180deg,rgba(18,40,58,.85),rgba(18,40,58,.55));
    border:1px solid var(--border);border-radius:16px;padding:clamp(14px,3.5vw,24px) 6px;
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);position:relative;
  }
  .bloque::before{content:"";position:absolute;left:18%;right:18%;top:-1px;height:2px;border-radius:2px;background:var(--c,var(--gold))}
  .bloque:nth-child(1){--c:var(--gold)} .bloque:nth-child(2){--c:var(--coral)}
  .bloque:nth-child(3){--c:var(--teal)} .bloque:nth-child(4){--c:var(--primary)}
  .num{display:block;font-family:var(--font-serif);font-weight:700;font-variant-numeric:tabular-nums;font-size:clamp(1.9rem,8.5vw,3.4rem);line-height:1;color:var(--fg)}
  .et{display:block;margin-top:10px;font-size:clamp(.62rem,2.3vw,.8rem);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

  .fecha{margin-top:26px;display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:.95rem}
  .fecha svg{flex:none;color:var(--gold)}
  .abierto{display:none;margin-top:30px;font-family:var(--font-serif);font-size:1.5rem;color:var(--gold)}
  .abierto a{color:var(--primary)}
  .listo .cuenta,.listo .fecha{display:none}.listo .abierto{display:block}

  footer{margin-top:44px;font-family:var(--font-display);letter-spacing:.24em;font-size:.8rem;color:var(--muted);text-transform:uppercase}
  footer span{color:var(--gold)}

  @media (max-width:420px){.et{letter-spacing:.08em}}
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important}
    .virgula path.main{stroke-dashoffset:0}
    .marca{opacity:.06}
  }