/* Tibia OT Shop · estilos (medieval: piedra, madera, pergamino y oro forjado a la luz de las antorchas) */
@font-face { font-family: 'Cinzel'; src: url('/fonts/Cinzelwght.woff') format('woff'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Cinzel Decorative'; src: url('/fonts/CinzelDecorative-Bold.woff') format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url('/fonts/AlegreyaSans-Regular.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url('/fonts/AlegreyaSans-Italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url('/fonts/AlegreyaSans-Medium.woff') format('woff'); font-weight: 500 600; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url('/fonts/AlegreyaSans-Bold.woff') format('woff'); font-weight: 700 900; font-display: swap; }

:root {
  /* piedra y madera */
  --noche: #0F0C09;
  --abismo: #16110D;
  --piedra: #1F1913;
  --piedra-2: #2A221A;
  --piedra-3: #362C21;
  --linea: #4A3B2A;
  --madera: #3B2A1B;
  /* metales y tinta */
  --oro: #E2B04A;
  --oro-claro: #F6DC8C;
  --oro-osc: #9A6A24;
  --cobre: #B9763A;
  --sangre: #8E2A1E;
  --sangre-claro: #C0473A;
  --gema: #3FA7E0;
  --pergamino: #EFE3C4;
  --pergamino-2: #E2D2A8;
  --tinta: #2B1D10;
  --tinta-2: #5A4426;
  /* texto */
  --texto: #EFE4CC;
  --suave: #B8A684;
  --ok: #7BC67E;
  --peligro: #F08B7A;
  --cian: #8FC9E8; /* alias para el admin */
  --violeta: #B79BE0;
  /* tipografía */
  --epico: 'Cinzel', 'Times New Roman', Georgia, serif;
  --deco: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --ui: 'Alegreya Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --pixel: 'Cinzel', Georgia, serif;
  --wrap: 1200px;
  --marco-oro: linear-gradient(135deg, #F6DC8C, #B9822C 25%, #5E3D12 50%, #E2B04A 75%, #F6DC8C);
  --ruido: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibras: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .24  0 0 0 0 .1  0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0; color: var(--texto); font-family: var(--ui); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background-color: var(--noche);
  background-image: var(--ruido), radial-gradient(1100px 520px at 50% -160px, rgba(226, 176, 74, .10), transparent 70%);
  background-size: 220px 220px, auto;
}
img { max-width: 100%; display: block; }
a { color: var(--oro-claro); text-underline-offset: 3px; }
a:hover { color: #FFF1C2; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3 { line-height: 1.12; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.muted { color: var(--suave); }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--oro); color: var(--tinta); padding: 8px 14px; z-index: 80; border-radius: 4px; }
.saltar:focus { left: 8px; }
.cargando { padding: 140px 0; color: var(--suave); text-align: center; font-family: var(--epico); letter-spacing: .08em; }
[hidden] { display: none !important; }
.estatico { padding: 80px 0; }
.estatico h1 { font-family: var(--epico); font-size: clamp(32px, 5vw, 56px); color: var(--oro-claro); }

/* ---------- Títulos con ornamento ---------- */
.titulo { text-align: center; margin: 0 auto 46px; max-width: 760px; }
.rotulo { display: inline-block; font: 600 13px/1 var(--epico); letter-spacing: .32em; text-transform: uppercase; color: var(--cobre); margin-bottom: 14px; }
.titulo h1, .titulo h2 { font-family: var(--epico); font-weight: 700; font-size: clamp(30px, 4.4vw, 52px); letter-spacing: .02em; margin: 0;
  background: linear-gradient(180deg, #FFF6DA 10%, #F0C96A 55%, #B57C27); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55)); }
.titulo p { color: var(--suave); max-width: 62ch; margin: 0 auto; font-size: 19px; }
.ornamento { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px auto 18px; width: min(360px, 80%); }
.ornamento::before, .ornamento::after { content: ''; flex: 1; height: 2px; background: linear-gradient(90deg, transparent, var(--oro-osc) 30%, var(--oro)); }
.ornamento::after { background: linear-gradient(270deg, transparent, var(--oro-osc) 30%, var(--oro)); }
.ornamento i { width: 14px; height: 14px; transform: rotate(45deg); background: linear-gradient(135deg, var(--oro-claro), var(--oro-osc)); box-shadow: 0 0 0 3px var(--noche), 0 0 0 4px var(--oro-osc), 0 0 14px rgba(226, 176, 74, .5); }

/* ---------- Marco de piedra con esquinas forjadas ---------- */
.marco { position: relative; border-radius: 6px; background: linear-gradient(180deg, rgba(42, 34, 26, .96), rgba(22, 17, 13, .98)); box-shadow: 0 0 0 1px #000, 0 26px 60px rgba(0, 0, 0, .55); }
.marco::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: var(--marco-oro); pointer-events: none; z-index: 3;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.esq { position: absolute; width: 30px; height: 30px; z-index: 4; pointer-events: none; border: 3px solid var(--oro); filter: drop-shadow(0 0 4px rgba(0, 0, 0, .8)); }
.esq::after { content: ''; position: absolute; width: 7px; height: 7px; background: var(--oro-claro); transform: rotate(45deg); box-shadow: 0 0 6px rgba(246, 220, 140, .8); }
.esq.a { top: -6px; left: -6px; border-right: 0; border-bottom: 0; } .esq.a::after { top: -5px; left: -5px; }
.esq.b { top: -6px; right: -6px; border-left: 0; border-bottom: 0; } .esq.b::after { top: -5px; right: -5px; }
.esq.c { bottom: -6px; left: -6px; border-right: 0; border-top: 0; } .esq.c::after { bottom: -5px; left: -5px; }
.esq.d { bottom: -6px; right: -6px; border-left: 0; border-top: 0; } .esq.d::after { bottom: -5px; right: -5px; }

/* ---------- Aviso de idioma ---------- */
.sugerir { background: linear-gradient(90deg, #3B2A1B, #4A3420, #3B2A1B); border-bottom: 1px solid var(--oro-osc); font-size: 15px; }
.sugerir .wrap { display: flex; align-items: center; gap: 14px; min-height: 42px; flex-wrap: wrap; }
.sugerir a { font-weight: 700; }
.sugerir button { margin-left: auto; background: none; border: 0; color: var(--suave); font-size: 16px; cursor: pointer; padding: 6px; }

/* ---------- Cabecera ---------- */
.top { position: sticky; top: 0; z-index: 40; background: linear-gradient(180deg, rgba(27, 21, 15, .97), rgba(18, 14, 10, .95)); backdrop-filter: blur(8px);
  border-bottom: 2px solid #000; box-shadow: 0 1px 0 rgba(226, 176, 74, .35), 0 10px 30px rgba(0, 0, 0, .5); }
.top-fila { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--texto); text-decoration: none; }
.logo:hover { color: var(--texto); }
.logo img { width: 44px; height: auto; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .7)); }
.logo-txt { display: flex; flex-direction: column; font: 700 26px/1 var(--deco); letter-spacing: .02em;
  background: linear-gradient(180deg, #FFF1BF, #F2C75C 45%, #B57C27); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .7)); }
.logo-txt small { font: 700 11px/1 var(--epico); letter-spacing: .5em; color: #E9D6A5; -webkit-text-fill-color: #E9D6A5; margin-bottom: 3px; padding-left: 2px; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.nav > a { color: var(--texto); text-decoration: none; font: 600 15px var(--epico); letter-spacing: .08em; text-transform: uppercase; position: relative; padding: 8px 0; }
.nav > a::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 8px; height: 8px; background: var(--oro); transform: translate(-50%, 8px) rotate(45deg) scale(0); transition: transform .2s; }
.nav > a:hover::after, .nav > a.activo::after { transform: translate(-50%, 8px) rotate(45deg) scale(1); }
.nav > a:hover, .nav > a.activo { color: var(--oro-claro); }
.idiomas { display: flex; border: 1px solid var(--linea); border-radius: 4px; overflow: hidden; background: rgba(0, 0, 0, .3); }
.idiomas button { font: 700 13px var(--epico); background: transparent; color: var(--suave); border: 0; padding: 7px 10px; cursor: pointer; letter-spacing: .06em; }
.idiomas button:hover { color: var(--oro-claro); }
.idiomas button[aria-pressed="true"] { background: linear-gradient(180deg, #F2C75C, #B57C27); color: var(--tinta); }
.menu-btn { display: none; margin-left: auto; background: rgba(0, 0, 0, .3); border: 1px solid var(--linea); border-radius: 4px; width: 46px; height: 42px; padding: 10px; cursor: pointer; }
.menu-btn span { display: block; height: 2px; background: var(--oro-claro); margin: 4px 0; }
@media (max-width: 920px) {
  .menu-btn { display: block; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--abismo); border-bottom: 2px solid var(--oro-osc); padding: 6px 16px 18px; display: none; box-shadow: 0 20px 40px rgba(0, 0, 0, .6); }
  .nav.abierto { display: flex; }
  .nav > a { padding: 14px 0; border-bottom: 1px solid var(--piedra-2); }
  .nav > a::after { display: none; }
  .idiomas { margin-top: 14px; align-self: flex-start; }
  .logo-txt { font-size: 22px; }
}

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 700 16px var(--epico); letter-spacing: .06em; padding: 14px 26px; border-radius: 4px; border: 1px solid transparent; cursor: pointer; text-decoration: none; min-height: 50px; transition: transform .12s ease, filter .12s ease, box-shadow .12s ease; text-align: center; }
.btn:active { transform: translateY(1px); }
.btn-oro { color: #2A1803; border-color: #5E3D12; background: linear-gradient(180deg, #FFE7A3 0%, #F0C25B 40%, #C98A2B 75%, #9A611C 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -3px 0 rgba(80, 45, 5, .45), 0 0 0 1px #2A1803, 0 10px 26px rgba(0, 0, 0, .5), 0 0 22px rgba(226, 176, 74, .22); text-shadow: 0 1px 0 rgba(255, 236, 190, .7); }
.btn-oro:hover { color: #2A1803; filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -3px 0 rgba(80, 45, 5, .45), 0 0 0 1px #2A1803, 0 12px 30px rgba(0, 0, 0, .55), 0 0 34px rgba(226, 176, 74, .4); }
.btn-linea { color: var(--oro-claro); background: rgba(15, 12, 9, .6); border-color: var(--oro-osc); box-shadow: inset 0 0 0 1px rgba(226, 176, 74, .15); }
.btn-linea:hover { color: #FFF1C2; border-color: var(--oro); background: rgba(226, 176, 74, .1); }
.btn-wa { background: #25D366; color: #052E16; font-family: var(--ui); letter-spacing: 0; }
.btn-wa:hover { background: #3BE07A; color: #052E16; }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-chico { padding: 6px 12px; min-height: 36px; font-size: 13.5px; }
.btn-grande { padding: 17px 32px; font-size: 17.5px; }

/* ---------- Formularios ---------- */
.form { display: grid; gap: 16px; }
.campo { display: grid; gap: 6px; }
.campo label, .campo legend { font-weight: 700; font-size: 16px; color: var(--texto); }
.campo label small, .campo legend small { color: var(--suave); font-weight: 400; }
.campo .ayuda { color: var(--suave); font-size: 15px; margin: 0; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=file], select, textarea {
  font: 400 17px var(--ui); color: var(--texto); background: rgba(10, 8, 6, .75);
  border: 1px solid var(--linea); border-radius: 4px; padding: 12px 13px; width: 100%; min-height: 50px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5);
}
select { appearance: auto; }
textarea { min-height: 140px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #7D6D52; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--oro); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5), 0 0 0 3px rgba(226, 176, 74, .2); }
fieldset { border: 0; padding: 0; margin: 0; }
.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opcion span { display: block; border: 1px solid var(--linea); border-radius: 4px; padding: 12px 13px; font-weight: 600; font-size: 16px; background: rgba(10, 8, 6, .55); }
.opcion input:checked + span { border-color: var(--oro); background: rgba(226, 176, 74, .12); color: var(--oro-claro); box-shadow: inset 0 0 0 1px var(--oro); }
.opcion input:focus-visible + span { outline: 3px solid var(--oro); outline-offset: 2px; }
.error { color: var(--peligro); font-weight: 700; margin: 0; }
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .dos-col { grid-template-columns: 1fr; } }

/* ---------- Brasas que suben ---------- */
.hero-brasas { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-brasas i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: #FFD27A; box-shadow: 0 0 8px 2px rgba(255, 150, 40, .85); opacity: 0; animation: brasa 8s linear infinite; }
.hero-brasas i:nth-child(1) { left: 52%; } .hero-brasas i:nth-child(2) { left: 64%; animation-delay: 2.1s; animation-duration: 10s; }
.hero-brasas i:nth-child(3) { left: 76%; animation-delay: 4.2s; } .hero-brasas i:nth-child(4) { left: 86%; animation-delay: 1.1s; animation-duration: 9s; }
.hero-brasas i:nth-child(5) { left: 93%; animation-delay: 5.6s; } .hero-brasas i:nth-child(6) { left: 70%; animation-delay: 3.3s; animation-duration: 11s; }
@keyframes brasa { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(-40px, -520px); opacity: 0; } }

/* ---------- Portada ---------- */
.hero { position: relative; min-height: min(90vh, 860px); display: grid; align-items: center; overflow: hidden; isolation: isolate; border-bottom: 2px solid #000; }
.hero-fondo { position: absolute; inset: 0; z-index: -2; }
.hero-fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; animation: acercar 26s ease-out both; }
@keyframes acercar { from { transform: scale(1.07); } to { transform: scale(1); } }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(15, 12, 9, .97) 0%, rgba(15, 12, 9, .86) 34%, rgba(15, 12, 9, .25) 66%, rgba(15, 12, 9, .35) 100%),
              linear-gradient(0deg, var(--noche) 0%, transparent 26%); }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; z-index: 1;
  background: repeating-linear-gradient(90deg, #2A1F14 0 60px, #1E160E 60px 62px), #2A1F14; box-shadow: 0 -1px 0 rgba(226, 176, 74, .4); }
.hero-contenido { padding: 104px 0 124px; max-width: 660px; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 600 14px var(--epico); letter-spacing: .28em; text-transform: uppercase; color: var(--oro); margin-bottom: 20px; }
.hero-eyebrow::before, .hero-eyebrow::after { content: ''; width: 9px; height: 9px; transform: rotate(45deg); background: var(--oro); box-shadow: 0 0 10px rgba(226, 176, 74, .7); }
.hero h1 { font-family: var(--epico); font-weight: 800; font-size: clamp(40px, 6vw, 76px); line-height: 1.04; letter-spacing: .005em; margin-bottom: 24px;
  background: linear-gradient(180deg, #FFFBEE 0%, #FBE6AE 40%, #E9B857 80%, #B9822C 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(30, 15, 0, .8)) drop-shadow(0 8px 28px rgba(0, 0, 0, .7)); }
.hero-sub { font-size: 20.5px; color: #E6D8BA; max-width: 54ch; text-shadow: 0 2px 10px rgba(0, 0, 0, .9); }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 14px; margin: 34px 0 40px; }
.confianza { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; color: #E6D8BA; font-size: 16px; font-weight: 500; }
.confianza li { display: flex; align-items: center; gap: 8px; }
.confianza svg { width: 20px; height: 20px; flex: none; }
@media (max-width: 760px) {
  .hero { min-height: 0; }
  .hero-fondo { bottom: auto; height: 380px; }
  .hero-fondo img { object-position: 72% center; }
  .hero::before { background: linear-gradient(180deg, rgba(15, 12, 9, .05) 0%, rgba(15, 12, 9, .3) 170px, var(--noche) 380px); }
  .hero-contenido { padding: 270px 0 60px; }
  .hero-sub { font-size: 18.5px; }
}

/* ---------- Secciones ---------- */
.seccion { padding: 100px 0; position: relative; }
.seccion-piedra { background:
    linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 120px, transparent calc(100% - 120px), rgba(0, 0, 0, .35)),
    repeating-linear-gradient(0deg, transparent 0 79px, rgba(0, 0, 0, .28) 79px 81px),
    repeating-linear-gradient(90deg, transparent 0 159px, rgba(0, 0, 0, .18) 159px 161px),
    linear-gradient(180deg, #211A14, #1A140F); border-top: 2px solid #000; border-bottom: 2px solid #000; }
.seccion-cofre { background: radial-gradient(900px 420px at 50% 40%, rgba(226, 176, 74, .08), transparent 70%); }

/* Versiones (medallas) */
.seccion-versiones { padding: 84px 0 92px; background: linear-gradient(180deg, rgba(0, 0, 0, .25), transparent 40%); }
.versiones-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.version { position: relative; display: flex; flex-direction: column; padding: 20px 18px 18px; border-radius: 4px; color: var(--texto);
  background: linear-gradient(180deg, #2A221A, #1A140F); border: 1px solid var(--linea); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 26px rgba(0, 0, 0, .35); }
.version.disponible { border-color: var(--oro-osc); box-shadow: inset 0 0 0 1px rgba(226, 176, 74, .25), 0 12px 26px rgba(0, 0, 0, .35); }
.version-medalla { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.version-medalla b { display: grid; place-items: center; min-width: 86px; height: 50px; padding: 0 12px; font: 800 26px/1 var(--epico); color: var(--tinta);
  background: radial-gradient(circle at 35% 30%, #FFF2C8, #E9B857 55%, #9A611C); border-radius: 3px; clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
  text-shadow: 0 1px 0 rgba(255, 240, 200, .6); }
.version:not(.disponible) .version-medalla b { background: radial-gradient(circle at 35% 30%, #8E8676, #5B5446 60%, #3A342A); color: #1A1611; text-shadow: none; }
.version.popular .version-medalla::after { content: '★'; color: var(--oro); font-size: 18px; margin-left: auto; }
.version > span { flex: 1; font-size: 15.5px; color: var(--suave); line-height: 1.45; }
.version-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(226, 176, 74, .15); }
.version-pie em { font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--suave); }
.version-pie em.si { color: var(--ok); }
.version-btn { font: 700 13px var(--epico); letter-spacing: .04em; color: var(--oro-claro); background: transparent; border: 1px solid var(--oro-osc); border-radius: 3px; padding: 6px 10px; cursor: pointer; }
.version-btn:hover { background: rgba(226, 176, 74, .14); border-color: var(--oro); }
.avisar-form { display: flex; gap: 6px; width: 100%; }
.avisar-form input { min-height: 38px; padding: 6px 10px; font-size: 15px; }
@media (max-width: 1060px) { .versiones-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .versiones-grid { grid-template-columns: 1fr; } }

/* ---------- Exclusivos ---------- */
.exclusivos { display: grid; gap: 40px; }
.exclusivo { display: grid; grid-template-columns: 1.2fr 1fr; min-height: 400px; }
.exclusivo:nth-child(even) { grid-template-columns: 1fr 1.2fr; }
.exclusivo:nth-child(even) .ex-img { order: 2; }
.ex-img { position: relative; overflow: hidden; display: block; margin: 10px; border-radius: 3px; border: 1px solid #000; box-shadow: 0 0 0 1px rgba(226, 176, 74, .25); background: #0A0806; }
.ex-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.exclusivo:hover .ex-img img { transform: scale(1.04); }
.ex-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15, 12, 9, .85), transparent 45%); }
.ex-ver { position: absolute; left: 18px; bottom: 14px; z-index: 1; font: 800 34px/1 var(--epico); color: #FFF4D2; text-shadow: 0 3px 0 #000, 0 0 18px rgba(226, 176, 74, .6); }
.ex-info { padding: 40px 42px 36px 30px; display: flex; flex-direction: column; justify-content: center; gap: 4px; position: relative; z-index: 1; }
.exclusivo:nth-child(even) .ex-info { padding: 40px 30px 36px 42px; }
.ex-sello { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font: 700 12.5px var(--epico); letter-spacing: .14em; text-transform: uppercase; color: #FFE7A3; padding: 6px 14px; margin-bottom: 14px;
  background: linear-gradient(90deg, #6E1E15, #8E2A1E 50%, #6E1E15); clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); }
.ex-info h3 { font-family: var(--epico); font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; margin: 0 0 10px; }
.ex-info h3 a { text-decoration: none; color: #FFF4D2; }
.ex-info h3 a:hover { color: var(--oro-claro); }
.ex-info p { color: #D9CBA9; font-size: 17.5px; }
.ex-incluye { list-style: none; padding: 0; margin: 4px 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.ex-incluye li { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 500; color: #EADBB8; }
.ex-incluye svg { width: 20px; height: 20px; flex: none; color: var(--oro); }
.ex-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; padding-top: 18px; border-top: 1px solid rgba(226, 176, 74, .2); }
@media (max-width: 880px) {
  .exclusivo, .exclusivo:nth-child(even) { grid-template-columns: 1fr; }
  .exclusivo:nth-child(even) .ex-img { order: 0; }
  .ex-img { aspect-ratio: 16 / 9; }
  .ex-info, .exclusivo:nth-child(even) .ex-info { padding: 14px 22px 28px; }
  .ex-incluye { grid-template-columns: 1fr; }
}

/* ---------- Lo que trae tu cofre (casillas de inventario) ---------- */
.incluido { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.inc-item { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; padding: 22px 22px; border-radius: 4px;
  background: linear-gradient(180deg, rgba(42, 34, 26, .85), rgba(26, 20, 15, .9)); border: 1px solid var(--linea); transition: border-color .2s, transform .2s; }
.inc-item:hover { border-color: var(--oro-osc); transform: translateY(-3px); }
.inc-ico { width: 64px; height: 64px; display: grid; place-items: center; color: var(--oro-claro); border-radius: 3px;
  background: radial-gradient(circle at 50% 40%, #3A2E22, #14100C 75%); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #4A3B2A, inset 0 -8px 14px rgba(0, 0, 0, .6), 0 0 0 1px rgba(226, 176, 74, .3); }
.inc-ico svg { width: 32px; height: 32px; filter: drop-shadow(0 0 6px rgba(226, 176, 74, .45)); }
.inc-item h3 { font: 700 20px var(--epico); margin: 2px 0 6px; color: #FFF1CF; }
.inc-item p { color: var(--suave); font-size: 16.5px; margin: 0; }
@media (max-width: 960px) { .incluido { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .incluido { grid-template-columns: 1fr; } }

/* ---------- Lo que recibes ---------- */
.recibes { display: grid; gap: 80px; }
.recibe { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.recibe > * { min-width: 0; }
.recibe:nth-child(even) .recibe-vista { order: 2; }
.recibe h3 { font-family: var(--epico); font-size: clamp(26px, 3vw, 38px); font-weight: 700; color: #FFF1CF; }
.recibe ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.recibe li { display: flex; gap: 12px; align-items: flex-start; font-size: 18.5px; color: #E6D8BA; }
.recibe li::before { content: ''; flex: none; width: 14px; height: 14px; margin-top: 7px; background: var(--oro); transform: rotate(45deg); box-shadow: 0 0 10px rgba(226, 176, 74, .6); }
.recibe-num { display: inline-grid; place-items: center; min-width: 54px; height: 54px; padding: 0 10px; margin-bottom: 14px; font: 800 22px/1 var(--epico); color: var(--oro-claro);
  border: 2px solid var(--oro-osc); border-radius: 50%; background: radial-gradient(circle, #2A221A, #120E0A); box-shadow: 0 0 0 4px var(--noche), 0 0 0 5px rgba(226, 176, 74, .35); }
@media (max-width: 880px) { .recibe { grid-template-columns: 1fr; gap: 26px; } .recibe:nth-child(even) .recibe-vista { order: 0; } }

/* Vistas: consola, cliente y navegador */
.vista { border-radius: 4px; overflow: hidden; background: #0B0907; box-shadow: 0 30px 60px rgba(0, 0, 0, .6), 0 0 0 1px #000, 0 0 0 3px #3A2E22, 0 0 0 4px rgba(226, 176, 74, .4); }
.vista-barra { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: linear-gradient(180deg, #2E241A, #201911); border-bottom: 1px solid #000; font-size: 13px; color: var(--suave); }
.vista-barra i { width: 11px; height: 11px; border-radius: 50%; background: #C0473A; }
.vista-barra i:nth-child(2) { background: #E2B04A; }
.vista-barra i:nth-child(3) { background: #7BC67E; margin-right: 8px; }
.vista-url { flex: 1; background: #120E0A; border-radius: 3px; padding: 3px 10px; color: #D9CBA9; }
.consola { padding: 18px 20px; font: 500 14px/1.75 ui-monospace, 'Cascadia Code', Consolas, monospace; color: #CDBF9F; min-height: 300px; }
.consola > div { overflow-wrap: anywhere; }
.consola .ok { color: var(--ok); }
.consola .oro { color: var(--oro); }
.consola .ci { color: #E8A866; }
.consola .cursor { display: inline-block; width: 9px; height: 17px; background: var(--ok); vertical-align: -3px; animation: parpadeo 1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
.cliente-vista { position: relative; aspect-ratio: 16 / 10; }
.cliente-vista > img { width: 100%; height: 100%; object-fit: cover; }
.login-mock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46%; min-width: 210px; background: rgba(18, 18, 24, .9); border: 1px solid #6B6F86; border-radius: 3px; padding: 10px 12px 12px; font-size: 12px; color: #D8D8E0; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.login-mock b { display: block; text-align: center; font-size: 12px; margin-bottom: 8px; color: #fff; }
.login-mock span { display: block; height: 20px; background: #0D0D12; border: 1px solid #4A4D60; border-radius: 2px; margin: 3px 0 7px; }
.login-mock em { display: block; text-align: center; font-style: normal; background: linear-gradient(180deg, #5A5E78, #34374A); border: 1px solid #777B95; border-radius: 3px; padding: 3px; margin-top: 6px; }
.web-mock { background: #120E0A; font-size: 12px; color: #D9CBA9; }
.wm-top { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: linear-gradient(180deg, #2A1F12, #1A140C); border-bottom: 1px solid #6E4A12; }
.wm-top b { font-family: var(--epico); color: var(--oro); font-size: 14px; margin-right: auto; letter-spacing: .06em; }
.wm-top em { font-style: normal; font-weight: 700; color: #2A1A00; background: var(--oro); padding: 3px 10px; border-radius: 3px; }
.wm-banner { position: relative; height: 150px; overflow: hidden; }
.wm-banner img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.75) sepia(.25); }
.wm-banner strong { position: absolute; left: 18px; bottom: 14px; font-family: var(--epico); font-size: 22px; color: #fff; text-shadow: 0 2px 10px #000; }
.wm-cuerpo { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; padding: 14px; }
.wm-cuerpo h4 { margin: 0 0 8px; font-family: var(--epico); color: var(--oro-claro); font-size: 13px; }
.wm-noticias, .wm-top5 { background: #1E1711; border: 1px solid #3A2E22; border-radius: 3px; padding: 10px 12px; }
.wm-noticias p { margin: 0 0 10px; display: grid; gap: 5px; }
.wm-noticias i { display: block; height: 7px; border-radius: 4px; background: #3A2E22; }
.wm-top5 ol { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 4px; }
.wm-top5 span { float: right; color: var(--oro); }
.recibe .web-mock li { font-size: 12px; gap: 0; justify-content: space-between; color: #D9CBA9; }
.recibe .web-mock li::before { display: none; }
@media (max-width: 560px) { .consola { font-size: 12.5px; padding: 14px; min-height: 0; } .wm-top span { display: none; } .wm-cuerpo { grid-template-columns: 1fr; } }

/* ---------- Pergamino (secciones claras) ---------- */
.seccion-pergamino { color: var(--tinta); background-color: var(--pergamino);
  background-image: var(--fibras), radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(120, 80, 30, .35) 100%), linear-gradient(180deg, #F3E8CC, #E6D6AE);
  border-top: 3px solid #000; border-bottom: 3px solid #000; box-shadow: inset 0 10px 30px rgba(90, 60, 20, .35), inset 0 -10px 30px rgba(90, 60, 20, .35); }
.seccion-pergamino .titulo h2 { background: none; color: #3E2A12; -webkit-text-fill-color: #3E2A12; filter: none; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.seccion-pergamino .rotulo { color: var(--sangre); }
.seccion-pergamino .ornamento::before { background: linear-gradient(90deg, transparent, #7A5320); }
.seccion-pergamino .ornamento::after { background: linear-gradient(270deg, transparent, #7A5320); }
.seccion-pergamino .ornamento i { box-shadow: 0 0 0 3px var(--pergamino), 0 0 0 4px #7A5320; }
.pasos { list-style: none; margin: 0 0 54px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; counter-reset: paso; }
.pasos li { counter-increment: paso; position: relative; text-align: center; }
.pasos li::before { content: counter(paso, upper-roman); display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 18px; font: 800 24px var(--epico); color: #FFE7A3;
  background: radial-gradient(circle at 35% 30%, #C0473A, #8E2A1E 55%, #5A1610); border-radius: 50%; box-shadow: inset 0 -4px 8px rgba(0, 0, 0, .4), inset 0 3px 4px rgba(255, 200, 160, .3), 0 4px 10px rgba(60, 20, 10, .4);
  clip-path: polygon(50% 0, 61% 8%, 75% 5%, 82% 17%, 95% 22%, 93% 36%, 100% 50%, 93% 64%, 95% 78%, 82% 83%, 75% 95%, 61% 92%, 50% 100%, 39% 92%, 25% 95%, 18% 83%, 5% 78%, 7% 64%, 0 50%, 7% 36%, 5% 22%, 18% 17%, 25% 5%, 39% 8%); }
.pasos li:not(:last-child)::after { content: ''; position: absolute; top: 37px; left: calc(50% + 52px); right: calc(-50% + 52px); border-top: 2px dashed rgba(90, 60, 25, .45); }
.pasos h3 { font: 700 21px var(--epico); margin-bottom: 6px; color: #3E2A12; }
.pasos p { color: var(--tinta-2); font-size: 16.5px; margin: 0; }
@media (max-width: 920px) { .pasos { grid-template-columns: 1fr 1fr; } .pasos li::after { display: none; } }
@media (max-width: 520px) { .pasos { grid-template-columns: 1fr; } }
.metodos { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding-top: 34px; border-top: 1px solid rgba(90, 60, 25, .3); }
.metodos .ck-marca { height: 52px; min-width: 150px; font-size: 18px; border-radius: 4px; padding: 0 20px; box-shadow: 0 6px 14px rgba(60, 40, 10, .3); }
.metodos .ck-marca.paypal, .metodos .ck-marca.zelle { font-size: 21px; }

/* ---------- A la medida (banda con paisaje) ---------- */
.banda { position: relative; overflow: hidden; isolation: isolate; padding: 110px 0; border-bottom: 2px solid #000; }
.banda > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.banda::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(15, 12, 9, .25), rgba(15, 12, 9, .1) 50%, rgba(15, 12, 9, .5)), linear-gradient(0deg, rgba(15, 12, 9, .6), transparent 40%); }
.banda-texto { max-width: 560px; margin-left: auto; padding: 42px 40px 40px; }
.banda h2 { font-family: var(--epico); font-size: clamp(30px, 3.6vw, 44px); color: #FFF1CF; }
.banda p { color: #E6D8BA; font-size: 19px; margin-bottom: 26px; }
@media (max-width: 760px) { .banda { padding: 200px 0 40px; } .banda-texto { padding: 30px 24px; } }

/* ---------- Preguntas ---------- */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; align-items: start; }
.faq details { background: linear-gradient(180deg, rgba(42, 34, 26, .92), rgba(26, 20, 15, .95)); border: 1px solid var(--linea); border-radius: 4px; padding: 0 22px; }
.faq details[open] { border-color: var(--oro-osc); box-shadow: inset 0 0 0 1px rgba(226, 176, 74, .2); }
.faq summary { cursor: pointer; font-weight: 700; font-size: 18px; padding: 20px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; color: #FFF1CF; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 700 24px/1 var(--epico); color: var(--oro); flex: none; }
.faq details[open] summary::after { content: '−'; }
.faq details p { color: #D9CBA9; padding-bottom: 20px; margin: 0; font-size: 17px; }
@media (max-width: 760px) { .faq { grid-template-columns: 1fr; } }

/* ---------- Texto para Google (pergamino) ---------- */
.seo-texto { padding: 90px 0 30px; }
.pergamino { position: relative; max-width: 900px; margin: 0 auto; padding: 46px 56px; color: var(--tinta); border-radius: 3px;
  background-color: var(--pergamino); background-image: var(--fibras), radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(120, 80, 30, .4) 100%), linear-gradient(180deg, #F5EBD0, #E4D3A9);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(90, 60, 20, .35); }
.pergamino::before, .pergamino::after { content: ''; position: absolute; left: -14px; right: -14px; height: 22px; border-radius: 11px;
  background: linear-gradient(180deg, #8A6A3D, #5E4422 50%, #3B2A14); box-shadow: 0 4px 10px rgba(0, 0, 0, .6); }
.pergamino::before { top: -11px; } .pergamino::after { bottom: -11px; }
.pergamino h1, .pergamino h2 { font-family: var(--epico); color: #3E2A12; font-size: clamp(24px, 3vw, 34px); }
.pergamino h2 + p::first-letter { float: left; font: 800 58px/.85 var(--deco); color: var(--sangre); margin: 6px 10px 0 0; }
.pergamino p { color: #3B2A16; font-size: 18px; }
.pergamino a { color: var(--sangre); }
@media (max-width: 600px) { .pergamino { padding: 34px 22px; } }

/* ---------- Llamado final ---------- */
.final-sec { padding-top: 70px; }
.final { text-align: center; padding: 60px 26px; overflow: visible; }
.final-emblema { width: 96px; height: auto; margin: -110px auto 18px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .7)); }
.final h2 { font-family: var(--epico); font-size: clamp(28px, 3.8vw, 44px); color: #FFF1CF; }
.final p { color: var(--suave); font-size: 19px; margin-bottom: 28px; }
.final .acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* ---------- Cabecera de páginas internas ---------- */
.cabecera-pagina { position: relative; isolation: isolate; padding: 30px 0 10px; border-bottom: 1px solid rgba(226, 176, 74, .15); }
.cabecera-fondo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15, 12, 9, .55), var(--noche)), url('/img/hero-tienda-900.jpg') center 40% / cover; filter: saturate(.9); opacity: .55; }
.cabecera-pagina .titulo { margin-bottom: 30px; }
.cabecera-pagina .ck-migas { margin-bottom: 26px; }

/* ---------- Catálogo ---------- */
.cat-cab { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 30px; }
.cat-cab:empty { display: none; }
.filtro { font: 700 14px var(--epico); letter-spacing: .05em; color: var(--suave); background: rgba(15, 12, 9, .6); border: 1px solid var(--linea); border-radius: 3px; padding: 8px 16px; cursor: pointer; }
.filtro:hover { color: var(--oro-claro); border-color: var(--oro-osc); }
.filtro[aria-pressed="true"] { background: linear-gradient(180deg, #F2C75C, #B57C27); border-color: #5E3D12; color: var(--tinta); }
.filtro-ver { background: rgba(142, 42, 30, .4) !important; border-color: var(--sangre-claro) !important; color: #FFE1D6 !important; }
.catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; }
.paq { position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--texto); border-radius: 4px; overflow: hidden;
  background: linear-gradient(180deg, #2A221A, #18130E); box-shadow: 0 0 0 1px #000, 0 0 0 3px #3A2E22, 0 0 0 4px rgba(226, 176, 74, .28), 0 20px 40px rgba(0, 0, 0, .45); transition: transform .2s, box-shadow .2s; }
.paq:hover { color: var(--texto); transform: translateY(-6px); box-shadow: 0 0 0 1px #000, 0 0 0 3px #4A3B2A, 0 0 0 4px var(--oro), 0 0 34px rgba(226, 176, 74, .25), 0 26px 50px rgba(0, 0, 0, .55); }
.paq-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(circle at 70% 30%, rgba(226, 176, 74, .25), transparent 60%), #1A140F; border-bottom: 2px solid #000; }
.paq-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.paq:hover .paq-img img { transform: scale(1.06); }
.paq-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(24, 19, 14, .85) 0%, transparent 45%); }
.paq-tag { position: absolute; top: 12px; left: 0; z-index: 1; font: 700 12px var(--epico); letter-spacing: .12em; text-transform: uppercase; color: #FFE7A3; padding: 6px 16px 6px 12px;
  background: linear-gradient(90deg, #6E1E15, #8E2A1E); clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%); box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
.paq-ver { position: absolute; right: 14px; top: 0; z-index: 2; display: grid; place-items: center; text-align: center; width: 78px; height: 86px; padding-top: 4px;
  font: 800 25px/1 var(--epico); color: var(--tinta); background: linear-gradient(180deg, #FFE7A3, #E2B04A 55%, #9A611C); clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); text-shadow: 0 1px 0 rgba(255, 240, 200, .6); }
.paq-ver small { display: block; font: 700 9.5px/1 var(--epico); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 2px; color: #5A3A10; }
.paq-cuerpo { padding: 16px 20px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.paq-cuerpo h3 { font-family: var(--epico); font-size: 24px; font-weight: 700; margin: 0; color: #FFF1CF; padding-right: 0; }
.paq-cuerpo p { color: var(--suave); font-size: 16.5px; margin: 0; flex: 1; }
.paq-pie { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(226, 176, 74, .2); }
.precio { font: 800 32px/1 var(--epico); color: var(--oro-claro); text-shadow: 0 2px 0 #000, 0 0 16px rgba(226, 176, 74, .3); }
.precio small { font: 700 13px var(--ui); color: var(--suave); margin-left: 5px; text-shadow: none; }
.precio-antes { color: var(--suave); text-decoration: line-through; font-size: 16px; margin-right: 8px; }
.paq-ir { font: 700 14.5px var(--epico); letter-spacing: .05em; color: var(--oro); }
.vacio { border: 1px dashed var(--oro-osc); border-radius: 4px; padding: 48px 24px; text-align: center; background: rgba(15, 12, 9, .55); }
.vacio h1, .vacio h3 { font-family: var(--epico); font-size: 26px; color: #FFF1CF; }
.vacio p { color: var(--suave); max-width: 52ch; margin: 0 auto 22px; }
.pagina-simple { padding: 60px 0 100px; max-width: 760px; }

/* ---------- Página de paquete ---------- */
.migas { padding: 28px 0 0; }
.migas a { text-decoration: none; font-weight: 700; }
.migas a::before { content: '‹ '; }
.texto-largo { white-space: pre-line; color: #E6D8BA; font-size: 18px; }
.video { aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; border: 1px solid var(--linea); }
.video iframe { width: 100%; height: 100%; border: 0; }
.pq-portada { position: relative; isolation: isolate; overflow: hidden; padding: 24px 0 64px; border-bottom: 2px solid #000; }
.pq-portada-fondo { position: absolute; inset: -40px; z-index: -3; background-size: cover; background-position: center; filter: blur(14px) saturate(1.1) sepia(.35) brightness(.4); }
.pq-portada::before { content: ''; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(700px 420px at 78% 40%, rgba(226, 140, 50, .18), transparent 65%), linear-gradient(0deg, var(--noche) 0%, rgba(15, 12, 9, .25) 45%, rgba(15, 12, 9, .55) 100%); }
.pq-portada .ck-migas { margin-bottom: 26px; }
.pq-sellos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pq-sello { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 3px; font: 700 13.5px var(--epico); letter-spacing: .08em; background: rgba(15, 12, 9, .7); border: 1px solid var(--oro-osc); color: var(--oro-claro); }
.pq-sello.oro { border-color: #5E3D12; color: var(--tinta); background: linear-gradient(180deg, #FFE7A3, #C98A2B); }
.pq-titulo { font-family: var(--epico); font-weight: 900; font-size: clamp(40px, 6.2vw, 80px); line-height: 1.02; margin: 0 0 16px; letter-spacing: .01em;
  background: linear-gradient(180deg, #FFFBEE 0%, #FBE6AE 38%, #E9B857 70%, #A8711B 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(40, 20, 0, .8)) drop-shadow(0 0 26px rgba(226, 176, 74, .3)); }
.pq-lema { font-size: clamp(18px, 1.7vw, 21px); color: #EADBB8; max-width: 50ch; margin: 0 0 24px; }
.pq-datos { display: flex; flex-wrap: wrap; gap: 10px; }
.pq-dato { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border-radius: 3px; background: rgba(15, 12, 9, .7); border: 1px solid var(--linea); font-size: 15px; color: var(--suave); }
.pq-dato b { color: #FFF1CF; font-size: 16px; }
.pq-dato svg { width: 26px; height: 26px; flex: none; }
.pq-cuerpo { width: min(1160px, 100% - 32px); margin: 34px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; position: relative; z-index: 2; padding-bottom: 40px; }
.pq-izq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 38px; min-width: 0; }
.pq-galeria { position: relative; border-radius: 4px; background: #0A0806; box-shadow: 0 0 0 1px #000, 0 0 0 3px #3A2E22, 0 0 0 4px rgba(226, 176, 74, .45), 0 30px 70px rgba(0, 0, 0, .6); }
.pq-vista { position: relative; aspect-ratio: 16 / 9; max-height: 470px; width: 100%; overflow: hidden; border-radius: 4px 4px 0 0; }
.pq-vista .fondo { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(22px) brightness(.4) sepia(.3); }
.pq-vista img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pq-flecha { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  border: 2px solid var(--oro-osc); background: rgba(15, 12, 9, .8); color: var(--oro-claro); font-size: 26px; line-height: 1; transition: background .15s, box-shadow .15s; }
.pq-flecha:hover { background: rgba(226, 176, 74, .25); box-shadow: 0 0 18px rgba(226, 176, 74, .5); }
.pq-flecha.ant { left: 14px; } .pq-flecha.sig { right: 14px; }
.pq-cont { position: absolute; z-index: 2; left: 14px; bottom: 14px; background: rgba(15, 12, 9, .85); border: 1px solid var(--linea); border-radius: 3px; padding: 3px 12px; font-size: 14px; color: #fff; font-weight: 700; }
.pq-minis { display: flex; gap: 8px; padding: 12px; overflow-x: auto; border-top: 2px solid #000; background: #120E0A; scrollbar-width: thin; }
.pq-minis button { flex: 0 0 auto; width: 90px; aspect-ratio: 16 / 10; border: 2px solid transparent; border-radius: 3px; padding: 0; overflow: hidden; cursor: pointer; background: #0A0806; opacity: .5; transition: opacity .15s; }
.pq-minis button[aria-current="true"] { border-color: var(--oro); opacity: 1; box-shadow: 0 0 14px rgba(226, 176, 74, .5); }
.pq-minis button:hover { opacity: 1; }
.pq-minis img { width: 100%; height: 100%; object-fit: cover; }
.pq-sec h2 { display: flex; align-items: center; gap: 14px; font-family: var(--epico); font-size: 28px; color: #FFF1CF; margin: 0 0 18px; }
.pq-sec h2::after { content: ''; flex: 1; height: 2px; background: linear-gradient(90deg, var(--oro-osc), transparent); }
.pq-sec h2 i { width: 12px; height: 12px; transform: rotate(45deg); flex: none; background: linear-gradient(135deg, var(--oro-claro), var(--oro-osc)); box-shadow: 0 0 10px rgba(226, 176, 74, .6); }
.pq-inventario { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pq-inventario li { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 3px; font-weight: 700; font-size: 16.5px; color: #FFF1CF;
  background: linear-gradient(180deg, rgba(42, 34, 26, .9), rgba(26, 20, 15, .95)); border: 1px solid var(--linea); }
.pq-inventario .ico { width: 50px; height: 50px; flex: none; border-radius: 3px; display: grid; place-items: center; color: var(--oro-claro);
  background: radial-gradient(circle at 50% 40%, #3A2E22, #14100C 75%); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #4A3B2A, inset 0 -6px 12px rgba(0, 0, 0, .6); }
.pq-inventario .ico svg { width: 26px; height: 26px; filter: drop-shadow(0 0 5px rgba(226, 176, 74, .5)); }
.pq-texto { white-space: pre-line; color: #E6D8BA; font-size: 18px; line-height: 1.7; max-width: 68ch; margin: 0; }
.pq-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: paso; position: relative; }
.pq-pasos::before { content: ''; position: absolute; left: 12%; right: 12%; top: 26px; border-top: 2px dashed rgba(226, 176, 74, .45); }
.pq-pasos li { counter-increment: paso; position: relative; text-align: center; padding: 0 8px; }
.pq-pasos li::before { content: counter(paso, upper-roman); display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%; position: relative;
  font: 800 19px var(--epico); color: #FFE7A3; background: radial-gradient(circle at 35% 30%, #C0473A, #8E2A1E 55%, #5A1610); box-shadow: 0 0 0 5px var(--noche), 0 0 0 6px rgba(226, 176, 74, .45); }
.pq-pasos b { display: block; color: #FFF1CF; font-size: 17px; margin-bottom: 4px; }
.pq-pasos span { color: var(--suave); font-size: 15.5px; line-height: 1.5; display: block; }
/* Caja de compra */
.pq-compra { position: sticky; top: 96px; border-radius: 4px; padding: 3px; background: var(--marco-oro); box-shadow: 0 0 0 1px #000, 0 30px 60px rgba(0, 0, 0, .6), 0 0 40px rgba(226, 176, 74, .15); }
.pq-compra-in { border-radius: 2px; overflow: hidden; background: linear-gradient(180deg, #2E251B 0%, #1E1812 45%, #15110D 100%); }
.pq-cinta { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; font: 700 14px var(--epico); letter-spacing: .04em; color: #2A1803; background: linear-gradient(90deg, #B9822C, #FFE7A3 50%, #B9822C); }
.pq-cinta svg { width: 16px; height: 16px; }
.pq-compra-cuerpo { padding: 20px 22px 22px; }
.pq-precio { text-align: center; padding: 6px 0 18px; margin-bottom: 18px; border-bottom: 1px dashed rgba(226, 176, 74, .35); }
.pq-precio .antes { display: block; color: var(--suave); text-decoration: line-through; font-size: 16px; }
.pq-precio .monto { display: inline-block; font: 800 62px/1 var(--epico);
  background: linear-gradient(180deg, #FFFBEE, #F0C96A 55%, #B57C27); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .7)); }
.pq-precio .monto small { font-size: 20px; margin-left: 4px; }
.pq-precio .nota { display: block; margin-top: 8px; color: var(--ok); font-size: 15px; font-weight: 700; }
.pq-compra h2 { font: 700 18px var(--epico); margin: 0 0 12px; color: #FFF1CF; text-align: center; }
.pq-boton { position: relative; overflow: hidden; width: 100%; margin-top: 4px; font-size: 18px; min-height: 56px; }
.pq-boton::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); animation: brillo 3.4s ease-in-out infinite; }
@keyframes brillo { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.pq-aceptamos { margin: 14px 0 8px; font-size: 14px; color: var(--suave); text-align: center; }
.pq-marcas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pq-marcas .ck-marca { height: 34px; font-size: 13px; }
.pq-marcas .ck-marca.paypal, .pq-marcas .ck-marca.zelle { font-size: 15px; }
.pq-garantias { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(226, 176, 74, .2); display: grid; gap: 7px; font-size: 14.5px; color: var(--suave); }
.pq-garantias li { display: flex; gap: 8px; align-items: center; }
.pq-garantias svg { width: 18px; height: 18px; flex: none; }
.pq-final { position: relative; isolation: isolate; overflow: hidden; margin-top: 30px; padding: 66px 0; text-align: center; border-top: 2px solid #000; background: radial-gradient(600px 260px at 50% 100%, rgba(226, 140, 50, .2), transparent 70%); }
.pq-final h2 { font-family: var(--epico); font-size: clamp(28px, 3.6vw, 42px); color: #FFF1CF; margin: 0 0 10px; }
.pq-final p { color: var(--suave); margin: 0 auto 24px; max-width: 48ch; }
@media (max-width: 980px) {
  .pq-cuerpo { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .pq-izq { display: contents; }
  .pq-galeria { order: 1; } .pq-compra { order: 2; position: relative; top: 0; } .pq-izq > .pq-sec { order: 3; }
}
@media (max-width: 600px) {
  .pq-portada { padding-bottom: 44px; }
  .pq-pasos { grid-template-columns: 1fr; gap: 18px; }
  .pq-pasos::before { display: none; }
  .pq-pasos li { display: grid; grid-template-columns: 54px 1fr; gap: 4px 14px; text-align: left; align-items: center; }
  .pq-pasos li::before { margin: 0; grid-row: span 2; }
  .pq-inventario { grid-template-columns: 1fr; }
  .pq-flecha { width: 38px; height: 38px; font-size: 20px; }
  .pq-precio .monto { font-size: 54px; }
}

/* ---------- Pedido, a la medida y términos ---------- */
.pedido, .medida { max-width: 880px; margin: 0 auto; padding: 36px 0 100px; }
.pedido h1, .medida h1 { font-family: var(--epico); font-weight: 800; font-size: clamp(32px, 4.4vw, 50px); color: #FFF1CF; }
.cabecera-pagina .titulo h1 { font-size: clamp(32px, 4.6vw, 54px); }
.caja { position: relative; background: linear-gradient(180deg, rgba(42, 34, 26, .92), rgba(24, 19, 14, .96)); border: 1px solid var(--linea); border-radius: 4px; padding: 28px; margin-bottom: 18px; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); }
.caja h2 { font-family: var(--epico); font-size: 24px; color: #FFF1CF; }
.aviso { border-left: 3px solid var(--oro); background: rgba(226, 176, 74, .1); padding: 12px 16px; border-radius: 0 4px 4px 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.aviso p { margin: 0; font-size: 16px; }
.codigo { font-family: var(--epico); color: var(--oro); letter-spacing: .04em; font-weight: 700; }
.listo { text-align: center; padding: 48px 24px; }
.terminos { max-width: 880px; margin: 0 auto; padding: 56px 0 110px; }
.terminos .pergamino h1 { font-size: clamp(30px, 4vw, 44px); }
.terminos .pergamino h2 { font-size: 21px; margin-top: 28px; color: var(--sangre); }
.terminos .pergamino h2 + p::first-letter { float: none; font: inherit; color: inherit; margin: 0; }

/* ---------- Pie ---------- */
.pie { position: relative; background: linear-gradient(180deg, #17120D, #0B0907); padding: 64px 0 24px; color: var(--suave); font-size: 16px; border-top: 2px solid #000; }
.pie-borde { position: absolute; left: 0; right: 0; top: -2px; height: 6px; background: repeating-linear-gradient(90deg, var(--oro-osc) 0 18px, transparent 18px 26px); opacity: .55; }
.pie-fila { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 36px; }
.logo-pie img { width: 40px; }
.logo-pie .logo-txt { font-size: 22px; }
.pie-lema { margin: 16px 0 10px; color: #D9CBA9; font-size: 17px; }
.pie-creditos { max-width: 64ch; font-size: 14.5px; }
.pie-links { display: grid; gap: 9px; align-content: start; }
.pie-links h2 { font: 700 15px var(--epico); letter-spacing: .14em; text-transform: uppercase; color: var(--oro); margin: 0 0 6px; }
.pie-links a { color: var(--suave); text-decoration: none; display: block; }
.pie-links a:hover { color: var(--oro-claro); }
#pie-contacto { display: grid; gap: 9px; word-break: break-word; }
.pie-copy { margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(226, 176, 74, .15); font-size: 14px; }
@media (max-width: 760px) { .pie-fila { grid-template-columns: 1fr 1fr; } .pie-marca { grid-column: 1 / -1; } }

#toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: linear-gradient(180deg, #FFE7A3, #E2B04A); color: var(--tinta); font-weight: 700; padding: 12px 18px; border-radius: 4px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 90; max-width: calc(100% - 32px); box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
#toast.ver { opacity: 1; transform: translate(-50%, 0); }
.wa-flotante { position: fixed; right: 20px; bottom: 20px; z-index: 45; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #25D366; box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 0 4px rgba(37, 211, 102, .22); transition: transform .15s; }
.wa-flotante:hover { transform: scale(1.06); }

/* ===================== Compra y pedido ===================== */
.ck { padding: 34px 0 90px; }
.ck-migas { font-size: 15px; color: var(--suave); margin-bottom: 18px; }
.ck-migas a { color: var(--suave); text-decoration: none; }
.ck-migas a:hover { color: var(--oro-claro); }
.ck-pasos { display: flex; align-items: center; list-style: none; padding: 0; margin: 0 0 30px; max-width: 660px; counter-reset: p; }
.ck-pasos li { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; color: var(--suave); white-space: nowrap; }
.ck-pasos li:not(:last-child)::after { content: ''; flex: 1; min-width: 28px; height: 2px; margin: 0 14px; background: var(--linea); }
.ck-pasos li:not(:last-child) { flex: 1; }
.ck-pasos li b { counter-increment: p; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--linea); font: 700 14px var(--epico); color: var(--suave); flex: none; }
.ck-pasos li b::before { content: counter(p, upper-roman); }
.ck-pasos li.hecho b { background: var(--ok); border-color: var(--ok); color: #0E2A10; }
.ck-pasos li.hecho b::before { content: '✓'; }
.ck-pasos li.hecho::after { background: var(--ok); }
.ck-pasos li.ahora { color: #FFF1CF; }
.ck-pasos li.ahora b { border-color: #5E3D12; color: var(--tinta); background: linear-gradient(180deg, #FFE7A3, #C98A2B); box-shadow: 0 0 0 5px rgba(226, 176, 74, .18); }
.ck-grid { display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 30px; align-items: start; }
.ck-titulo { font-family: var(--epico); font-size: clamp(30px, 3.4vw, 40px); color: #FFF1CF; margin-bottom: 6px; }
.ck-sub { color: var(--suave); margin-bottom: 24px; }
.ck-bloque { background: linear-gradient(180deg, rgba(42, 34, 26, .92), rgba(24, 19, 14, .96)); border: 1px solid var(--linea); border-radius: 4px; padding: 22px 24px; margin-bottom: 16px; }
.ck-bloque h2 { font: 700 19px var(--epico); color: #FFF1CF; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.ck-bloque h2 .n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 3px; background: rgba(226, 176, 74, .16); color: var(--oro); font-size: 13px; }
.ck-bloque > p { color: var(--suave); font-size: 15.5px; margin: 0 0 16px; }
.ck-bloque .form { gap: 14px; }
.ck-metodos { display: grid; gap: 10px; }
.ck-metodo { position: relative; display: block; cursor: pointer; }
.ck-metodo input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ck-metodo .caja-m { display: grid; grid-template-columns: 22px 120px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--linea); border-radius: 4px; background: rgba(10, 8, 6, .55); transition: border-color .15s, background .15s; }
.ck-metodo:hover .caja-m { border-color: var(--oro-osc); }
.ck-metodo input:checked + .caja-m { border-color: var(--oro); background: rgba(226, 176, 74, .08); box-shadow: inset 0 0 0 1px var(--oro); }
.ck-metodo input:focus-visible + .caja-m { outline: 3px solid var(--oro); outline-offset: 2px; }
.ck-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--linea); display: grid; place-items: center; }
.ck-metodo input:checked + .caja-m .ck-radio { border-color: var(--oro); }
.ck-metodo input:checked + .caja-m .ck-radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--oro); }
.ck-marca { height: 40px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font: 700 15px/1 var(--ui); padding: 0 10px; white-space: nowrap; }
.ck-marca.binance { background: #181A20; color: #F0B90B; border: 1px solid #3A3B3F; }
.ck-marca.paypal { background: #fff; color: #003087; font-style: italic; font-weight: 800; font-size: 17px; }
.ck-marca.paypal span { color: #0079C1; }
.ck-marca.zelle { background: #6D1ED4; color: #fff; font-weight: 800; font-size: 17px; }
.ck-marca.pm { background: #0E7A45; color: #fff; font-size: 14px; }
.ck-info b { display: block; color: #FFF1CF; font-size: 16.5px; }
.ck-info span { color: var(--suave); font-size: 14.5px; }
.ck-etq { font-size: 12.5px; font-weight: 700; padding: 4px 9px; border-radius: 3px; background: rgba(123, 198, 126, .14); color: var(--ok); border: 1px solid rgba(123, 198, 126, .4); white-space: nowrap; }
.ck-etq.gris { background: rgba(184, 166, 132, .1); color: var(--suave); border-color: var(--linea); }
.ck-acepto { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--suave); margin: 4px 0 16px; }
.ck-acepto input { width: 20px; height: 20px; margin-top: 3px; accent-color: #E2B04A; flex: none; }
.ck-pagar { width: 100%; font-size: 18px; min-height: 58px; }
.ck-seguro { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14.5px; color: var(--suave); margin-top: 12px; text-align: center; }
.ck-resumen { position: sticky; top: 96px; }
.ck-orden, .fx-factura { color: var(--tinta); border-radius: 3px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(90, 60, 20, .35);
  background-color: var(--pergamino); background-image: var(--fibras), linear-gradient(180deg, #F5EBD0, #E6D6AE); }
.ck-orden-cab { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: linear-gradient(180deg, #3B2A1B, #241A11); color: #FFF1CF; border-bottom: 2px solid #000; }
.ck-orden-cab b { font-family: var(--epico); font-size: 18px; letter-spacing: .04em; }
.ck-orden-cab span { font-size: 14px; color: var(--suave); }
.ck-prod { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 18px 20px; border-bottom: 1px dashed #B39A6A; }
.ck-prod img { width: 92px; height: 70px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(60, 40, 10, .4); }
.ck-prod h3 { font: 700 18px var(--epico); margin: 0 0 2px; color: #2B1D10; }
.ck-prod .v { font-size: 14.5px; color: var(--tinta-2); }
.ck-incluye { list-style: none; margin: 0; padding: 14px 20px; display: grid; gap: 7px; font-size: 15px; border-bottom: 1px dashed #B39A6A; color: #3B2A16; }
.ck-incluye li { display: flex; gap: 9px; align-items: center; }
.ck-incluye svg { flex: none; color: #2E7A3A; }
.ck-lineas { padding: 14px 20px 6px; display: grid; gap: 8px; font-size: 16px; color: #3B2A16; }
.ck-lineas div { display: flex; justify-content: space-between; }
.ck-lineas .desc { color: #2E7A3A; font-weight: 700; }
.ck-total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 20px 18px; }
.ck-total span { font-weight: 700; font-size: 16px; }
.ck-total b { font: 800 32px var(--epico); color: #2B1D10; }
.ck-total b small { font: 700 14px var(--ui); color: var(--tinta-2); margin-left: 4px; }
.ck-unico { margin: 0 20px 18px; padding: 10px 12px; border-radius: 3px; background: rgba(46, 122, 58, .14); color: #1E5A28; font-size: 14.5px; font-weight: 700; text-align: center; }
.ck-confianza { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.ck-confianza li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 4px; background: rgba(15, 12, 9, .6); }
.ck-confianza .ic { width: 40px; height: 40px; border-radius: 3px; display: grid; place-items: center; background: rgba(226, 176, 74, .12); color: var(--oro); }
.ck-confianza b { display: block; color: #FFF1CF; font-size: 15.5px; }
.ck-confianza span { color: var(--suave); font-size: 14px; line-height: 1.4; display: block; }
.ck-ayuda { margin-top: 14px; text-align: center; font-size: 15px; color: var(--suave); }
.ck-ayuda a { color: #25D366; font-weight: 700; text-decoration: none; }
/* página del pedido */
.fx-ok { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.fx-ok .sello { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: rgba(123, 198, 126, .14); color: var(--ok); border: 2px solid rgba(123, 198, 126, .5); flex: none; }
.fx-ok h1 { font-family: var(--epico); font-size: clamp(26px, 3vw, 34px); color: #FFF1CF; margin: 0; }
.fx-ok p { margin: 2px 0 0; color: var(--suave); max-width: 62ch; }
.fx-ok.oro .sello { background: rgba(226, 176, 74, .12); color: var(--oro); border-color: rgba(226, 176, 74, .5); }
.fx-ok.cian .sello { background: rgba(143, 201, 232, .1); color: var(--cian); border-color: rgba(143, 201, 232, .45); }
.fx-ok.malo .sello { background: rgba(240, 139, 122, .1); color: var(--peligro); border-color: rgba(240, 139, 122, .45); }
.fx-nota { margin: -6px 0 20px; padding: 12px 16px; border-radius: 4px; background: rgba(226, 176, 74, .08); border: 1px solid var(--oro-osc); }
.fx-pagar { position: relative; border-radius: 4px; padding: 3px; background: var(--marco-oro); margin-bottom: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.fx-pagar-in { border-radius: 2px; background: linear-gradient(180deg, #2E251B, #18130E); padding: 22px 24px; }
.fx-monto { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--linea); }
.fx-monto .lbl { color: var(--suave); font-size: 15px; display: block; }
.fx-monto .cifra { font: 800 36px/1.1 var(--epico); color: #FFF1CF; }
.fx-monto .cifra small { font: 700 16px var(--ui); color: var(--suave); }
.fx-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 168px; gap: 22px; align-items: start; }
.fx-cuerpo.sin-qr { grid-template-columns: minmax(0, 1fr); }
.fx-datos { display: grid; gap: 10px; margin: 0; }
.fx-dato { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; border-radius: 3px; background: rgba(10, 8, 6, .65); border: 1px solid var(--linea); }
.fx-dato dt { font-size: 13.5px; color: var(--suave); }
.fx-dato dd { margin: 0; font-weight: 700; color: #FFF1CF; font-family: ui-monospace, Consolas, monospace; font-size: 15.5px; word-break: break-all; }
.fx-dato.clave { border-color: var(--oro); background: rgba(226, 176, 74, .08); }
.fx-copiar { font: 700 13.5px var(--ui); color: var(--oro-claro); background: rgba(226, 176, 74, .1); border: 1px solid var(--oro-osc); border-radius: 3px; padding: 8px 12px; cursor: pointer; }
.fx-copiar:hover { background: rgba(226, 176, 74, .2); }
.fx-qr { text-align: center; font-size: 13px; color: var(--suave); }
.fx-qr .marco-qr { background: #fff; border-radius: 4px; padding: 10px; margin-bottom: 8px; }
.fx-qr img { width: 100%; height: auto; border-radius: 3px; }
.fx-aviso { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: 4px; background: rgba(226, 176, 74, .07); border: 1px solid rgba(226, 176, 74, .35); font-size: 15px; color: #EADBB8; }
.fx-aviso svg { flex: none; margin-top: 2px; color: var(--oro); }
.fx-subir { display: block; cursor: pointer; position: relative; border: 2px dashed var(--linea); border-radius: 4px; padding: 22px; text-align: center; background: rgba(10, 8, 6, .45); color: var(--suave); font-size: 15.5px; transition: border-color .15s, background .15s; }
.fx-subir:hover, .fx-subir:focus-within { border-color: var(--oro); }
.fx-subir svg { color: var(--oro); margin: 0 auto 8px; }
.fx-subir b { color: #FFF1CF; display: block; font-size: 17px; }
.fx-subir input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.fx-subir.con-archivo { border-style: solid; border-color: var(--ok); background: rgba(123, 198, 126, .06); }
.fx-subir.con-archivo b { color: var(--ok); }
.fx-factura-cab { padding: 18px 20px; display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px dashed #B39A6A; }
.fx-factura-cab .logo-f { font: 700 19px var(--deco); color: #2B1D10; }
.fx-factura-cab .logo-f b { color: #9A611C; }
.fx-factura-cab small { display: block; font-size: 13px; color: var(--tinta-2); }
.fx-estado { font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 3px; background: #F8E3A8; color: #6E4A07; border: 1px solid #C99A3A; white-space: nowrap; }
.fx-estado.pago_reportado { background: #DCEAF2; color: #1E4E66; border-color: #8CB5CC; }
.fx-estado.pagado, .fx-estado.entregado { background: #DDEFD8; color: #1E5A28; border-color: #8FC394; }
.fx-estado.cancelado { background: #F4DAD3; color: #8E2A1E; border-color: #D69A8E; }
.fx-meta { padding: 14px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; font-size: 14.5px; border-bottom: 1px dashed #B39A6A; }
.fx-meta span { display: block; color: var(--tinta-2); font-size: 13px; }
.fx-meta b { color: #2B1D10; word-break: break-all; }
.fx-linea-prod { padding: 14px 20px; display: flex; justify-content: space-between; gap: 12px; font-size: 16px; border-bottom: 1px dashed #B39A6A; }
.fx-linea-prod small { display: block; color: var(--tinta-2); font-size: 14px; }
.fx-tl { list-style: none; margin: 0; padding: 16px 20px 18px; display: grid; }
.fx-tl li { position: relative; padding: 0 0 16px 30px; font-size: 15px; color: var(--tinta-2); }
.fx-tl li:last-child { padding-bottom: 0; }
.fx-tl li::before { content: ''; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #B39A6A; background: var(--pergamino); }
.fx-tl li:not(:last-child)::after { content: ''; position: absolute; left: 8px; top: 21px; bottom: 2px; width: 2px; background: #CDB98C; }
.fx-tl li.hecho { color: #2B1D10; }
.fx-tl li.hecho::before { background: #2E7A3A; border-color: #2E7A3A; }
.fx-tl li.ahora { color: #2B1D10; font-weight: 700; }
.fx-tl li.ahora::before { border-color: #9A611C; background: #F0C25B; box-shadow: 0 0 0 4px rgba(226, 176, 74, .3); }
.fx-tl li small { display: block; font-weight: 400; color: var(--tinta-2); font-size: 13.5px; }
.fx-guardar { display: flex; align-items: center; gap: 10px; padding: 12px 20px 16px; border-top: 1px dashed #B39A6A; font-size: 13.5px; color: var(--tinta-2); }
.fx-guardar .fx-copiar { color: #5E3D12; background: #F8E3A8; border-color: #C99A3A; flex: none; }
.fx-espera { background: linear-gradient(180deg, rgba(42, 34, 26, .92), rgba(24, 19, 14, .96)); border: 1px solid var(--linea); border-radius: 4px; padding: 22px 24px; margin-bottom: 16px; }
.fx-espera ol { list-style: none; margin: 0; padding: 0; display: grid; }
.fx-espera li { position: relative; padding: 0 0 22px 42px; color: var(--suave); font-size: 15.5px; }
.fx-espera li:last-child { padding-bottom: 0; }
.fx-espera li b { display: block; color: var(--texto); font-size: 17.5px; margin-bottom: 2px; }
.fx-espera li::before { content: ''; position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linea); background: var(--noche); }
.fx-espera li:not(:last-child)::after { content: ''; position: absolute; left: 12px; top: 30px; bottom: 4px; width: 2px; background: var(--linea); }
.fx-espera li.hecho::before { background: var(--ok); border-color: var(--ok); }
.fx-espera li.hecho::after { background: var(--ok); }
.fx-espera li.ahora::before { border-color: var(--oro); box-shadow: 0 0 0 5px rgba(226, 176, 74, .15); animation: latido 1.8s ease-in-out infinite; }
.fx-espera li.ahora b { color: #FFF1CF; }
@keyframes latido { 50% { box-shadow: 0 0 0 9px rgba(226, 176, 74, .05); } }
.fx-listo { text-align: center; padding: 34px 24px; border-radius: 4px; border: 1px solid var(--ok); background: linear-gradient(180deg, rgba(123, 198, 126, .08), rgba(24, 19, 14, .9)); box-shadow: 0 0 40px rgba(123, 198, 126, .1); margin-bottom: 16px; }
.fx-listo h2 { margin: 28px 0 10px; font: 700 19px var(--epico); color: #FFF1CF; }
.fx-listo .texto-largo { text-align: left; }
#ya-pague .btn-linea { margin-top: 4px; }
@media (max-width: 980px) {
  .ck-grid { grid-template-columns: minmax(0, 1fr); }
  .ck-resumen { position: static; order: -1; }
  .ck-resumen.fx-lado { order: 0; }
  .ck-confianza { display: none; }
}
@media (max-width: 600px) {
  .ck { padding-top: 20px; }
  .ck-pasos li span { display: none; }
  .ck-pasos li.ahora span { display: inline; }
  .ck-bloque { padding: 18px 16px; }
  .ck-metodo .caja-m { grid-template-columns: 20px 96px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .ck-metodo .ck-etq { grid-column: 3; justify-self: start; }
  .ck-marca { height: 36px; font-size: 13px; }
  .ck-marca.paypal, .ck-marca.zelle { font-size: 15px; }
  .fx-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .fx-qr { display: none; }
  .fx-pagar-in { padding: 18px 16px; }
  .fx-monto .cifra { font-size: 30px; }
  .caja { padding: 20px 16px; }
  .seccion { padding: 76px 0; }
}

/* ---------- Compatibilidad con el admin ---------- */
.estado-grande { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.estado-grande.ok { color: var(--ok); }
.estado-grande.malo { color: var(--peligro); }