/* Identidad Zolari: azul marino, crema dorado suave y blanco. */
  :root {
    --navy: #091E44;
    --crema: #EAC99B;
    --crema-soft: #F3E6CF;
    --white: #FFFFFF;
    --muted: #52627F;
    --line: rgba(9, 30, 68, 0.16);
    --bg: #FFFFFF;
    --bga: rgba(255, 255, 255, .9);
    --fg: #091E44;
    --sub: #52627F;
    --display: "Marcellus", "Cinzel", "Trajan Pro", "Optima", Georgia, serif;
    --text: "Jost", "Futura", "Century Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;
    color-scheme: light;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --navy: #091E44; --crema: #EAC99B; --crema-soft: #F3E6CF; --white: #FFFFFF;
      --muted: #52627F; --line: rgba(9, 30, 68, 0.16);
    }
  }
  :root[data-theme="dark"] {
    --navy: #091E44; --crema: #EAC99B; --crema-soft: #F3E6CF; --white: #FFFFFF;
    --muted: #52627F; --line: rgba(9, 30, 68, 0.16);
  }
  *, *::before, *::after { box-sizing: inherit; }
  html { background: var(--bg); scroll-padding-top: calc(56px + env(safe-area-inset-top, 0px)); scroll-behavior: smooth; overflow-x: clip; }
  body { margin: 0; background: var(--bg); color: var(--navy); overflow-x: clip; font-family: var(--text); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
  img { max-width: 100%; display: block; }
  [hidden] { display: none !important; }
  a:focus-visible, button:focus-visible { outline: 2px solid var(--crema); outline-offset: 3px; }
  .wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
  .c-fill { fill: var(--crema); }
  .c-navy { fill: var(--navy); }
  .c-stroke { stroke: var(--crema); fill: none; }

  /* Barra de progreso y navegación */
  .progress { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 3px; z-index: 40; background: linear-gradient(90deg, var(--crema), var(--navy)); transform: scaleX(0); transform-origin: left; pointer-events: none; }
  .nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 30;
    padding: env(safe-area-inset-top, 0px) 20px 0;
    background: var(--bga); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .nav-in { max-width: 1040px; margin: 0 auto; height: 56px; display: flex; align-items: center; justify-content: space-between; }
  .nav .brand { font-family: var(--display); font-size: 21px; font-weight: 400; color: var(--fg); text-decoration: none; letter-spacing: .16em; text-transform: uppercase; transition: color .25s; }
  .nav .links { display: flex; gap: 22px; }
  .nav .links a { color: var(--fg); text-decoration: none; font-size: 14px; font-weight: 500; padding: 6px 0; border-bottom: 2px solid transparent; transition: color .25s, border-color .2s; }
  .nav .links a:hover, .nav .links a[aria-current="page"] { border-bottom-color: var(--crema); }

  /* Botones */
  .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border: 1px solid var(--navy); color: var(--navy); background: transparent; text-decoration: none; font: 600 15px/1 var(--text); border-radius: 2px; cursor: pointer; transition: background .2s, color .2s; }
  .btn:hover { background: var(--navy); color: var(--white); }
  .btn-solid { background: var(--navy); color: var(--white); }
  .btn-solid:hover { background: var(--crema); color: var(--navy); border-color: var(--crema); }

  /* Portadas (azul marino) */
  .hero { background: var(--navy); color: #FFFFFF; min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 84px 20px 110px; position: relative; }
  .js-anim .hero { background: transparent; color: var(--fg); transition: color .25s; }
  .hero-inner { will-change: transform, opacity; }
  .hero .btn { border-color: currentColor; }
  .hero .btn:not(.btn-solid) { color: inherit; }
  .hero .btn-solid { background: var(--crema); border-color: var(--crema); color: var(--navy); }
  .hero .btn-solid:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--navy); }
  .hero .btn:not(.btn-solid):hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--navy); }
  .medallion-wrap { width: clamp(170px, 46vw, 250px); margin: 0 auto 20px; }
  .compact .medallion-wrap { width: clamp(130px, 34vw, 190px); }
  .short .medallion-wrap { width: clamp(110px, 28vw, 150px); }
  .medallion { width: 100%; height: auto; display: block; will-change: transform; }
  .wordmark { font-family: var(--display); font-weight: 400; font-size: clamp(48px, 12.5vw, 100px); line-height: 1; letter-spacing: .08em; text-transform: uppercase; margin: 0; color: inherit; }
  .wordmark.long { font-size: clamp(30px, 8.6vw, 74px); letter-spacing: .06em; line-height: 1.1; }
  .wordmark .w { display: inline-block; white-space: nowrap; }
  .wordmark span.l { display: inline-block; }
  .sublabel { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 18px auto 0; color: inherit; }
  .sublabel .t { font: 300 clamp(12px, 3.3vw, 17px)/1 var(--text); letter-spacing: .55em; margin-right: -.55em; text-transform: uppercase; }
  .sublabel i { display: block; width: clamp(26px, 9vw, 64px); height: 1px; background: var(--crema); }
  .tagline { font-size: 17px; color: #B9C6E0; margin: 14px auto 0; max-width: 40ch; }
  .js-anim .tagline { color: var(--sub); transition: color .25s; }
  .drop-note { margin: 22px auto 0; max-width: 34ch; }
  .hero-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 26px; }
  .hero-actions .btn { width: min(100%, 264px); }
  .phrase { font-family: var(--display); font-size: clamp(20px, 5vw, 26px); line-height: 1.3; color: var(--crema); margin: 26px auto 0; max-width: 24ch; }
  .cue { width: 1px; height: 46px; margin: 36px auto 0; background: rgba(255,255,255,.25); overflow: hidden; }
  .cue span { display: block; width: 1px; height: 16px; background: var(--crema); animation: cue 1.8s ease-in-out infinite; }
  @keyframes cue { from { transform: translateY(-16px); } to { transform: translateY(46px); } }

  @keyframes settle { from { transform: rotate(-120deg) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes rise { from { transform: translateY(70%); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes fadeup { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
  .js-anim .medallion-wrap { animation: settle 1.6s cubic-bezier(.2,.7,.1,1) both; }
  .js-anim .wordmark span.l { animation: rise .9s cubic-bezier(.2,.7,.1,1) both; animation-delay: calc(.5s + var(--i) * .06s); }
  .js-anim .hero-fade { animation: fadeup .8s ease both; animation-delay: calc(1s + var(--d) * .12s); }

  /* Apariciones al llegar a la pantalla */
  .js-anim .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.1,1), color .25s; }
  .js-anim .reveal.in { opacity: 1; transform: none; }
  .rule { display: block; height: 2px; background: var(--crema); width: 100%; margin: 14px 0 6px; }
  .js-anim .rule { transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.2,.7,.1,1) .1s; }
  .js-anim .rule.in { transform: scaleX(1); }

  /* Pilares de la portada de inicio (todavía sobre azul) */
  .pillars { padding: 30px 0 110px; }
  .pillars .wrap { display: grid; gap: 40px; }
  .pillar { border-top: 2px solid var(--crema); padding-top: 18px; }
  .pillar h3 { font-family: var(--display); font-weight: 500; font-size: 34px; line-height: 1.1; margin: 0 0 8px; color: var(--fg); transition: color .25s; }
  .pillar p { margin: 0; color: var(--sub); max-width: 34ch; transition: color .25s; }
  .js-anim .pillar { opacity: 0; transform: translateY(34px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.1,1), color .25s; transition-delay: calc(var(--k) * .12s); }
  .js-anim .pillar.in { opacity: 1; transform: none; }

  /* Secciones */
  .group { padding: 80px 0 0; }
  .group h2, .section-title { font-family: var(--display); font-weight: 500; font-size: clamp(38px, 8vw, 58px); line-height: 1.05; margin: 0; color: var(--fg); }
  .group .lead { margin: 10px 0 0; color: var(--sub); max-width: 46ch; }

  /* Inicio: muestra borrosa del último drop */
  .teaser { display: block; position: relative; margin-top: 30px; overflow: hidden; aspect-ratio: 3 / 2; text-decoration: none; background: transparent; }
  /* Los bordes se desvanecen hacia el fondo, sin corte entre la foto y la página */
  .teaser img {
    width: 100%; height: 100%; object-fit: cover; filter: blur(clamp(10px, 3.2vw, 22px)); transform: scale(1.12);
    -webkit-mask-image: radial-gradient(ellipse 50% 48% at 50% 50%, #000 42%, rgba(0,0,0,.6) 72%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 48% at 50% 50%, #000 42%, rgba(0,0,0,.6) 72%, transparent 100%);
  }
  .teaser .btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; box-shadow: 0 8px 28px rgba(9, 30, 68, .28); }
  .teaser:hover .btn { background: var(--crema); color: var(--navy); border-color: var(--crema); }
  .center { text-align: center; margin-top: 12px; }

  .cat-teaser { padding: 96px 0 24px; }
  .cat-teaser .wrap { display: grid; gap: 34px; align-items: center; }
  .cat-teaser p { color: var(--muted); max-width: 44ch; margin: 12px 0 22px; }
  .cat-teaser .spin { width: 150px; height: 150px; margin: 0 auto; will-change: transform; }

  /* Relojes del drop */
  .item { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr; gap: 6px; align-items: center; text-align: center; padding: 52px 0 60px; }
  .ring { position: absolute; left: 50%; top: 50%; width: 114%; aspect-ratio: 1 / 1; margin: -57% 0 0 -57%; pointer-events: none; will-change: transform; }
  .ring svg { width: 100%; height: 100%; display: block; overflow: visible; }
  .ring path { stroke: var(--crema); fill: none; stroke-width: .7; }
  .photo { position: relative; width: min(80%, 340px); aspect-ratio: 1 / 1; margin: 0 auto; }
  .photo img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; will-change: transform; }
  .info { position: relative; margin-top: 16px; }
  .item h3 { font-family: var(--display); font-weight: 500; font-size: 30px; line-height: 1.1; margin: 8px 0; }
  .desc { margin: 0 auto 12px; color: var(--muted); font-size: 16px; max-width: 38ch; }
  .price { font-family: var(--display); font-weight: 500; font-size: 32px; margin: 0 0 16px; }
  .item .btn { min-height: 44px; padding: 0 26px; }
  .item.feature .photo { width: min(92%, 460px); }
  .item.feature h3 { font-size: 38px; }
  .js-anim .item .info > * { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.1,1); }
  .js-anim .item.in .info > * { opacity: 1; transform: none; }
  .js-anim .item .info > *:nth-child(2) { transition-delay: .1s; }
  .js-anim .item .info > *:nth-child(3) { transition-delay: .2s; }
  .js-anim .item .info > *:nth-child(4) { transition-delay: .3s; }

  /* Combo */
  .combo { padding: 96px 0 40px; text-align: center; }
  .combo h2 { font-family: var(--display); font-weight: 500; font-size: clamp(38px, 8vw, 58px); line-height: 1.05; margin: 0 0 12px; }
  .combo .lead { color: var(--muted); max-width: 46ch; margin: 0 auto; }
  .stage { position: relative; width: min(100%, 560px); aspect-ratio: 1 / 1; margin: 28px auto 10px; display: grid; place-items: center; }
  .sun { position: absolute; left: 50%; top: 50%; width: 94%; aspect-ratio: 1 / 1; margin: -47% 0 0 -47%; border-radius: 50%; background: var(--crema); }
  .pair { position: relative; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .pair figure { margin: 0; mix-blend-mode: multiply; will-change: transform; }
  .pair .photo { width: 100%; }
  .pair .photo img { mix-blend-mode: normal; }
  .pair figcaption { font-family: var(--display); font-size: 20px; padding-bottom: 6px; }
  .combo-price { font-family: var(--display); font-size: 30px; margin: 18px 0 4px; }
  .combo-note { font-size: 15px; color: var(--muted); margin: 0 0 22px; }

  /* Catálogo */
  .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
  .chip { min-height: 40px; padding: 0 18px; background: transparent; color: var(--fg); border: 1px solid currentColor; border-radius: 2px; font: 600 14px/1 var(--text); cursor: pointer; transition: background .2s, color .2s; }
  .chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
  .cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 14px; margin-top: 34px; }
  .card { text-align: center; }
  .card .photo { width: 100%; }
  .card .badge { display: inline-block; background: var(--crema); color: var(--navy); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 2px; margin: 4px 0 6px; }
  .card h3 { font-family: var(--display); font-weight: 500; font-size: 20px; margin: 4px 0 0; }
  .card .price { font-size: 22px; margin: 2px 0 12px; }
  .card .btn { min-height: 40px; padding: 0 18px; font-size: 14px; }
  .card.ask { display: grid; align-content: center; justify-items: center; border: 1px solid var(--line); padding: 22px 14px; }
  .card.ask h3 { font-size: 22px; margin-bottom: 8px; }
  .card.ask p { color: var(--muted); font-size: 15px; margin: 0 0 14px; }
  .js-anim .card { opacity: 0; transform: translateY(34px) scale(.96); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.1,1); transition-delay: calc(var(--k) * .06s); }
  .js-anim .card.in { opacity: 1; transform: none; }

  /* Pasos */
  .steps { padding: 84px 0 80px; }
  .steps h2 { font-family: var(--display); font-weight: 500; font-size: clamp(38px, 8vw, 58px); line-height: 1.05; margin: 0; }
  .steps ol { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 26px; }
  .steps li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; border-top: 1px solid var(--line); padding-top: 20px; }
  .n { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--crema); color: var(--navy); font-family: var(--display); font-size: 24px; }
  .steps strong { display: block; font-weight: 600; margin-bottom: 2px; }
  .steps span.t { color: var(--muted); font-size: 15px; }
  .js-anim .steps li { opacity: 0; transform: translateY(32px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.1,1); transition-delay: calc(var(--k) * .12s); }
  .js-anim .steps li.in { opacity: 1; transform: none; }
  .js-anim .steps li .n { transform: scale(.4) rotate(-90deg); transition: transform .9s cubic-bezier(.3,1.5,.5,1); transition-delay: calc(var(--k) * .12s + .15s); }
  .js-anim .steps li.in .n { transform: none; }

  /* Pie */
  footer { background: var(--navy); color: var(--white); text-align: center; padding: 72px 20px 130px; }
  footer .mini { width: 92px; height: 92px; margin: 0 auto 16px; will-change: transform; }
  footer .brand { font-family: var(--display); font-size: 30px; margin: 0; color: var(--white); letter-spacing: .16em; text-transform: uppercase; }
  footer p { margin: 6px 0 0; color: #B9C6E0; font-size: 15px; }
  footer a { color: var(--crema); }

  /* Barra fija de WhatsApp */
  .bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; }
  .bar .btn { width: 100%; max-width: 420px; }
  .js-anim .bar { transform: translateY(100%); visibility: hidden; }

  /* Transición entre páginas */
  main { transition: opacity .4s ease; }
  .wipe { position: fixed; inset: 0; z-index: 60; background: var(--navy); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
  .wipe.on { opacity: 1; pointer-events: auto; }
  .wipe svg { width: 88px; height: 88px; transform: rotate(-100deg); transition: transform .9s cubic-bezier(.2,.7,.1,1); }
  .wipe.on svg { transform: none; }

  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .cue span { animation: none; } .wipe { display: none; } }

  @media (min-width: 820px) {
    .pillars .wrap { grid-template-columns: repeat(3, 1fr); gap: 40px; }
    .teaser { aspect-ratio: 16 / 7; }
    .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 36px 24px; }
    .cat-teaser .wrap { grid-template-columns: 1.3fr 1fr; }
    .cat-teaser .spin { width: 240px; height: 240px; }
    .item { grid-template-columns: 1fr 1fr; gap: 40px; text-align: left; padding: 72px 56px 80px; }
    .photo { width: min(100%, 470px); }
    .list .item:nth-child(even) .photo { order: 2; }
    .list .item:nth-child(even) .info { order: 1; }
    .desc { margin-left: 0; font-size: 17px; }
    .item h3 { font-size: 40px; }
    .price { font-size: 38px; }
    .card .price { font-size: 22px; }
    .item.feature { grid-template-columns: 1fr; text-align: center; }
    .item.feature .photo { width: min(70%, 560px); }
    .item.feature .desc { margin-left: auto; }
    .item.feature h3 { font-size: 48px; }
    .steps ol { grid-template-columns: repeat(4, 1fr); gap: 28px; }
    .steps li { grid-template-columns: 1fr; }
  }