:root {
  --negro: #0e0907;
  --negro-2: #17100b;
  --negro-3: #22170f;
  --oro: #e9b949;
  --fuego: #ff5a1f;
  --rojo: #a81c16;
  --arena: #efe4cf;
  --texto: #f6efe3;
  --suave: #c9b9a3;
  --linea: rgba(233, 185, 73, .22);
  --radio: 18px;
  --marca: "Cinzel", Georgia, serif;
  --sans: "Plus Jakarta Sans", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--negro); color: var(--texto); font-family: var(--sans); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body.bloqueado { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
.t-marca { font-family: var(--marca); font-weight: 800; }
.t-sans { font-family: var(--sans); }
.ico { width: 30px; height: 30px; fill: none; stroke: var(--oro); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico-btn { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wordmark, .wordmark-xl { font-family: var(--marca); font-weight: 900; letter-spacing: .06em; }

/* botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 999px; font-weight: 700; cursor: pointer; border: 1.5px solid transparent; transition: transform .2s, box-shadow .2s, background .2s; }
.btn:hover { transform: translateY(-2px); }
.btn-fuego { background: linear-gradient(135deg, var(--fuego), #ff8a1f 55%, var(--oro)); color: #1a0b04; box-shadow: 0 10px 30px -10px rgba(255, 90, 31, .7); }
.btn-linea { border-color: var(--oro); color: var(--oro); background: transparent; }
.btn-linea:hover { background: rgba(233, 185, 73, .1); }
.btn-chico { padding: 9px 18px; font-size: .9rem; }

/* puerta de edad */
.edad { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 50% 35%, #3a1408, var(--negro) 70%); transition: opacity .6s; }
.edad.fuera { opacity: 0; pointer-events: none; }
.edad-caja { text-align: center; max-width: 420px; }
.edad-sol { width: 140px; height: 140px; animation: girar 40s linear infinite; filter: drop-shadow(0 0 30px rgba(255, 90, 31, .6)); }
.edad-marca { font-family: var(--marca); font-weight: 900; font-size: 2rem; letter-spacing: .12em; color: var(--oro); margin: 10px 0 18px; }
.edad h2 { font-size: 1.5rem; }
.edad-txt { color: var(--suave); margin: 8px 0 24px; }
.edad-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.edad-msg { margin-top: 16px; color: var(--oro); min-height: 1.6em; }

/* barra */
.barra { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px clamp(16px, 4vw, 48px); background: rgba(14, 9, 7, .78); backdrop-filter: blur(14px); border-bottom: 1px solid var(--linea); }
.barra-logo { display: flex; align-items: center; gap: 10px; font-family: var(--marca); font-weight: 900; letter-spacing: .1em; color: var(--oro); }
.barra-logo svg, .pie-logo svg { width: 34px; height: 34px; }
.barra-nav { display: flex; gap: 26px; font-size: .92rem; color: var(--suave); }
.barra-nav a:hover { color: var(--oro); }

/* hero */
.hero { position: relative; min-height: calc(100vh - 60px); display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 24px; padding: 40px clamp(16px, 6vw, 90px); overflow: hidden; perspective: 1200px; background: radial-gradient(ellipse at 70% 55%, rgba(255, 90, 31, .28), transparent 55%), radial-gradient(ellipse at 15% 100%, rgba(168, 28, 22, .3), transparent 50%); }
#brasas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-sol-wrap { position: absolute; right: -8%; top: 50%; width: min(78vw, 820px); aspect-ratio: 1; transform: translateY(-50%); opacity: .18; pointer-events: none; }
.hero-sol { width: 100%; height: 100%; animation: girar 90s linear infinite; }
.hero-txt { position: relative; z-index: 2; }
.pildora { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px; border: 1px solid var(--linea); border-radius: 999px; font-size: .85rem; color: var(--oro); background: rgba(233, 185, 73, .06); }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--fuego); box-shadow: 0 0 12px var(--fuego); animation: latir 1.6s infinite; }
.hero h1 { margin: 22px 0 18px; }
.wordmark-xl { display: block; font-size: clamp(3rem, 10vw, 8.2rem); line-height: .95; background: linear-gradient(180deg, #ffe9a8, var(--oro) 40%, var(--fuego) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 30px rgba(255, 90, 31, .35)); }
.hero-lema { display: block; font-family: var(--marca); font-weight: 600; font-size: clamp(1.2rem, 2.6vw, 2rem); color: var(--texto); margin-top: 12px; letter-spacing: .03em; }
.hero-p { max-width: 520px; color: var(--suave); font-size: 1.08rem; }
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero-botella-wrap { position: relative; z-index: 2; display: grid; place-items: center; }
.hero-botella { width: min(300px, 70vw); transition: transform .25s ease-out; transform-style: preserve-3d; filter: drop-shadow(0 30px 60px rgba(233, 185, 73, .3)); animation: flotar 6s ease-in-out infinite; }
.botella { width: 100%; height: auto; display: block; }

/* cinta */
.cinta { overflow: hidden; border-block: 1px solid var(--linea); background: linear-gradient(90deg, var(--rojo), var(--fuego), var(--oro)); color: #1a0b04; }
.cinta-pista { display: flex; align-items: center; gap: 28px; width: max-content; padding: 14px 0; animation: correr 30s linear infinite; font-family: var(--marca); font-weight: 800; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.cinta i { width: 8px; height: 8px; background: #1a0b04; transform: rotate(45deg); }

/* secciones */
.seccion { padding: clamp(70px, 10vw, 120px) clamp(16px, 6vw, 90px); position: relative; }
.seccion-oscura { background: linear-gradient(180deg, var(--negro-2), var(--negro)); border-top: 1px solid var(--linea); }
.cabeza { max-width: 720px; margin: 0 auto 50px; text-align: center; }
.kicker { font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: var(--fuego); font-weight: 700; }
.cabeza h2, .espera h2 { font-family: var(--marca); font-weight: 800; font-size: clamp(1.9rem, 4.5vw, 3.1rem); line-height: 1.15; margin: 12px 0 16px; color: var(--arena); }
.sub { color: var(--suave); font-size: 1.05rem; }

/* concepto */
.pilares { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1200px; margin: 0 auto; }
.pilar { padding: 28px; border: 1px solid var(--linea); border-radius: var(--radio); background: linear-gradient(160deg, var(--negro-3), var(--negro-2)); }
.pilar h3 { font-family: var(--marca); font-size: 1.5rem; color: var(--oro); margin: 14px 0 8px; }
.pilar p { color: var(--suave); font-size: .95rem; }
.manifiesto { display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: center; max-width: 1000px; margin: 80px auto; padding: 40px; border-radius: 28px; background: radial-gradient(circle at 0 50%, rgba(255, 90, 31, .2), transparent 60%), var(--negro-2); border: 1px solid var(--linea); }
.manifiesto-sol svg { width: 100%; animation: girar 60s linear infinite; filter: drop-shadow(0 0 30px rgba(255, 90, 31, .45)); }
.manifiesto blockquote p { font-family: var(--marca); font-size: clamp(1.15rem, 2.2vw, 1.55rem); line-height: 1.5; color: var(--arena); }
.manifiesto cite { display: block; margin-top: 16px; color: var(--oro); font-style: normal; letter-spacing: .2em; font-size: .8rem; text-transform: uppercase; }
.publico { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1200px; margin: 0 auto; }
.publico article { padding: 24px; border-top: 2px solid var(--fuego); }
.publico .num { font-family: var(--marca); color: var(--fuego); font-size: 1.6rem; font-weight: 800; }
.publico h3 { margin: 6px 0; font-size: 1.1rem; }
.publico p { color: var(--suave); font-size: .93rem; }

/* ediciones */
.escenario { --brillo: var(--fuego); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; max-width: 1100px; margin: 0 auto; padding: 40px; border-radius: 32px; border: 1px solid var(--linea); background: radial-gradient(circle at 30% 50%, color-mix(in srgb, var(--brillo) 35%, transparent), transparent 60%), var(--negro-2); perspective: 1200px; transition: background .5s; }
.esc-botella { display: grid; place-items: center; }
.ed-botella { width: min(260px, 60vw); transition: transform .25s ease-out; transform-style: preserve-3d; filter: drop-shadow(0 30px 50px color-mix(in srgb, var(--brillo) 40%, transparent)); }
.ed-botella .botella { animation: entrar .6s ease-out; }
.ed-linea { color: var(--fuego); font-size: .85rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; }
.ed-nombre { font-family: var(--marca); font-weight: 900; font-size: clamp(2rem, 4.5vw, 3.2rem); color: var(--arena); line-height: 1.1; margin: 6px 0; }
.ed-lema { font-family: var(--marca); color: var(--oro); font-size: 1.2rem; margin-bottom: 14px; }
.ed-nota { color: var(--suave); }
.ed-datos { display: grid; gap: 10px; margin: 22px 0; }
.ed-datos div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--linea); }
.ed-datos dt { color: var(--oro); font-size: .85rem; font-weight: 700; }
.ed-datos dd { font-size: .95rem; }
.ed-aviso { color: var(--fuego); font-size: .88rem; margin-bottom: 14px; }
.ed-aviso:empty { display: none; }
.ed-lista { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; max-width: 1100px; margin: 26px auto 0; }
.ed-mini { --c: var(--fuego); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 8px 12px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--negro-2); color: var(--texto); cursor: pointer; transition: transform .2s, border-color .2s, background .2s; }
.ed-mini svg { width: 56px; margin-bottom: 8px; }
.ed-mini span { font-family: var(--marca); font-weight: 800; }
.ed-mini small { color: var(--suave); font-size: .75rem; }
.ed-mini:hover { transform: translateY(-4px); }
.ed-mini[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--negro-2)); }
.formatos { max-width: 1100px; margin: 60px auto 0; }
.formatos h3 { font-family: var(--marca); color: var(--oro); font-size: 1.4rem; margin-bottom: 16px; }
.formatos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.formatos-grid div { padding: 20px; border-radius: var(--radio); border: 1px dashed var(--linea); }
.formatos-grid b { display: block; font-family: var(--marca); font-size: 1.5rem; color: var(--arena); }
.formatos-grid span { color: var(--suave); font-size: .9rem; }

/* etiquetas */
.etiquetas { display: grid; grid-template-columns: 300px 1fr 1fr; gap: 26px; max-width: 1250px; margin: 0 auto; align-items: start; }
.et-panel { display: grid; gap: 16px; padding: 24px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--negro-2); position: sticky; top: 90px; }
.et-panel label { display: grid; gap: 6px; font-size: .85rem; color: var(--oro); font-weight: 600; }
.et-panel input, .et-panel select, .espera-form input, .espera-form select { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linea); background: var(--negro); color: var(--texto); }
.et-panel input:focus, .espera-form input:focus { outline: 2px solid var(--fuego); outline-offset: 1px; }
.nota-chica { font-size: .8rem; color: var(--suave); }
.et-figura { text-align: center; }
.et-figura figcaption { margin-top: 10px; color: var(--suave); font-size: .85rem; letter-spacing: .15em; text-transform: uppercase; }
.etiqueta-svg { width: 100%; height: auto; display: block; border-radius: 10px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .05); }
.contra { aspect-ratio: 3 / 4; display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; border-radius: 10px; background: var(--e); color: var(--t); text-align: left; border: 1.5px solid var(--a); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), inset 0 0 0 5px var(--e), inset 0 0 0 6px var(--a); font-size: .74rem; line-height: 1.45; overflow: hidden; }
.contra-marca { font-family: var(--marca); font-weight: 800; font-size: 1rem; letter-spacing: .08em; text-align: center; }
.contra-historia { font-style: italic; opacity: .9; }
.contra dl { display: grid; grid-template-columns: 70px 1fr; gap: 3px 10px; }
.contra dt { font-weight: 800; }
.contra-nota { opacity: .85; font-size: .7rem; }
.contra-pie { margin-top: auto; display: flex; gap: 12px; align-items: flex-end; }
.barras { width: 110px; flex-shrink: 0; background: #fff; color: #000; padding: 4px; border-radius: 3px; }
.contra-ley { font-weight: 800; font-size: .62rem; letter-spacing: .02em; }

/* identidad */
.logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1150px; margin: 0 auto; }
.logo-caja { position: relative; display: grid; place-items: center; min-height: 200px; padding: 30px 30px 46px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--negro-2); }
.logo-grande { grid-row: span 2; background: radial-gradient(circle, rgba(255, 90, 31, .18), transparent 70%), var(--negro-2); }
.logo-claro { background: var(--arena); color: var(--negro); }
.logo-tag { position: absolute; left: 16px; bottom: 12px; font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--suave); }
.logo-claro .logo-tag { color: #6b5a44; }
.logo-rojo { background: var(--rojo); }
.logo-rojo .wordmark { color: #fff3dc !important; }
.logo-rojo .logo-tag { color: #f6c9a8; }
.logo-apilado { display: flex; flex-direction: column; align-items: center; text-align: center; }
.logo-apilado svg { width: 190px; }
.logo-apilado .wordmark { font-size: 2.4rem; color: var(--oro); margin-top: 14px; }
.logo-sub { font-size: .75rem; letter-spacing: .45em; color: var(--suave); margin-top: 4px; }
.logo-horiz { display: flex; align-items: center; gap: 14px; }
.logo-horiz svg { width: 64px; }
.logo-horiz .wordmark { font-size: 1.8rem; color: var(--oro); }
.logo-claro .wordmark { color: var(--negro); }
.logo-iso svg { width: 120px; }
.paleta { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; max-width: 1150px; margin: 40px auto 0; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea); }
.paleta div { background: var(--c); min-height: 150px; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.paleta div:nth-child(2), .paleta div:nth-child(5) { color: var(--negro); }
.paleta span { font-weight: 700; }
.paleta code { font-size: .8rem; opacity: .85; }
.tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1150px; margin: 18px auto 0; }
.tipo { padding: 26px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--negro-2); color: var(--suave); }
.tipo-muestra { font-size: 2.6rem; color: var(--arena); font-weight: 700; line-height: 1.2; margin-bottom: 8px; }
.tipo-muestra.marca { font-family: var(--marca); font-weight: 900; color: var(--oro); }
.voz { max-width: 1150px; margin: 18px auto 0; padding: 26px; border-radius: var(--radio); border: 1px solid var(--linea); }
.voz h3 { font-family: var(--marca); color: var(--oro); margin-bottom: 14px; }
.voz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.voz-grid p { color: var(--suave); font-size: .93rem; }

/* cócteles */
.coc { max-width: 1000px; margin: 0 auto; }
.coc-tabs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 26px; }
.coc-tabs button { padding: 10px 20px; border-radius: 999px; border: 1px solid var(--linea); background: transparent; color: var(--suave); cursor: pointer; font-weight: 600; }
.coc-tabs button[aria-selected="true"] { background: var(--oro); color: var(--negro); border-color: var(--oro); }
.coc-cuerpo { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center; padding: 36px; border-radius: 28px; border: 1px solid var(--linea); background: radial-gradient(circle at 15% 50%, rgba(233, 185, 73, .15), transparent 50%), var(--negro-2); }
.coc-botella { width: 180px; margin: 0 auto; }
.coc-datos h3 { font-family: var(--marca); font-size: 2rem; color: var(--arena); }
.coc-rango { display: grid; gap: 8px; margin: 14px 0 18px; color: var(--suave); }
.coc-rango b { color: var(--oro); }
.coc-rango input { accent-color: var(--fuego); width: 100%; }
.coc-ing { list-style: none; padding: 0; display: grid; gap: 6px; }
.coc-ing li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--linea); }
.coc-ing b { color: var(--oro); white-space: nowrap; }
.coc-pasos { margin-top: 14px; color: var(--suave); font-size: .95rem; }
.coc-compra { margin-top: 14px; padding: 12px 16px; border-radius: 12px; background: rgba(255, 90, 31, .12); border: 1px solid rgba(255, 90, 31, .35); }
.coc-compra b { color: var(--fuego); }

/* espera */
.espera { overflow: hidden; text-align: center; background: radial-gradient(ellipse at 50% 120%, rgba(255, 90, 31, .4), transparent 60%), var(--negro); border-top: 1px solid var(--linea); }
.espera-sol { position: absolute; left: 50%; bottom: -320px; width: 640px; transform: translateX(-50%); opacity: .25; pointer-events: none; }
.espera-sol svg { width: 100%; animation: girar 80s linear infinite; }
.espera-caja { position: relative; max-width: 760px; margin: 0 auto; }
.espera-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; margin-top: 26px; }
.esp-msg { min-height: 1.6em; margin-top: 14px; color: var(--oro); }
.espera-b2b { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; text-align: left; }
.espera-b2b div { display: grid; gap: 4px; padding: 20px; border-radius: var(--radio); background: rgba(23, 16, 11, .85); border: 1px solid var(--linea); }
.espera-b2b span { color: var(--suave); font-size: .88rem; }

/* pie */
.pie { padding: 40px 16px; text-align: center; border-top: 1px solid var(--linea); color: var(--suave); font-size: .9rem; display: grid; gap: 8px; justify-items: center; }
.pie-logo { display: flex; align-items: center; gap: 10px; font-family: var(--marca); font-weight: 900; letter-spacing: .1em; color: var(--oro); font-size: 1.2rem; }
.pie-ley { font-weight: 800; font-size: .78rem; color: var(--texto); letter-spacing: .04em; }

/* animaciones */
.rev { opacity: 0; transform: translateY(26px); transition: opacity .8s, transform .8s; }
.rev.visible { opacity: 1; transform: none; }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes flotar { 50% { translate: 0 -14px; } }
@keyframes correr { to { transform: translateX(-50%); } }
@keyframes latir { 50% { opacity: .35; } }
@keyframes entrar { from { opacity: 0; transform: translateY(20px) scale(.96); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rev { opacity: 1; transform: none; }
}

/* responsive */
@media (max-width: 1000px) {
  .barra-nav { display: none; }
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 30px; }
  .hero-p { margin: 0 auto; }
  .hero-btns { justify-content: center; }
  .hero-botella { width: min(220px, 55vw); }
  .hero-sol-wrap { right: 50%; top: 68%; transform: translate(50%, -50%); width: 140vw; }
  .pilares, .publico, .formatos-grid { grid-template-columns: repeat(2, 1fr); }
  .escenario { grid-template-columns: 1fr; text-align: center; padding: 26px 18px; }
  .ed-datos div { text-align: left; }
  .ed-lista { grid-template-columns: repeat(3, 1fr); }
  .etiquetas { grid-template-columns: 1fr 1fr; }
  .et-panel { grid-column: 1 / -1; position: static; }
  .logos { grid-template-columns: 1fr 1fr; }
  .logo-grande { grid-row: auto; grid-column: 1 / -1; }
  .paleta { grid-template-columns: repeat(5, 1fr); }
  .voz-grid, .espera-b2b { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .barra-logo { font-size: .95rem; }
  .pilares, .publico, .formatos-grid, .etiquetas, .logos, .tipos { grid-template-columns: 1fr; }
  .manifiesto { grid-template-columns: 1fr; text-align: center; padding: 28px 20px; margin: 50px auto; }
  .manifiesto-sol { width: 130px; margin: 0 auto; }
  .ed-lista { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .ed-mini svg { width: 40px; }
  .ed-mini small { display: none; }
  .paleta { grid-template-columns: 1fr 1fr; }
  .paleta div { min-height: 90px; }
  .coc-cuerpo { grid-template-columns: 1fr; padding: 24px 18px; }
  .coc-botella { width: 120px; }
  .espera-form { grid-template-columns: 1fr; }
  .contra { aspect-ratio: auto; }
}