/* argenpack.net - capa visual 2026. Se carga al final y redefine la identidad sin tocar la estructura.
   Reglas de texto: minúsculas en la marca, mayúscula solo inicial en títulos y botones, nada en versalitas. */

@font-face { font-family: "Syne"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(fonts/syne.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/instrument-sans.woff2) format("woff2"); }

:root {
  color-scheme: dark;
  --fondo: #0a080d;
  --panel: #141019;
  --panel2: #1c1724;
  --borde: #2a2334;
  --texto: #f4efe9;
  --suave: #a096ad;
  --acento: #ff3d7f;
  --acento-osc: #e82d6e;
  --champan: #efd7ad;
  --tinta: #16060e;
  --serif: "Syne", "Arial Black", system-ui, sans-serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --radio: 6px;
}
body { font-family: var(--sans); font-size: 1rem; line-height: 1.6; font-feature-settings: "kern", "liga"; -webkit-font-smoothing: antialiased; }
::selection { background: var(--acento); color: var(--tinta); }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
p, li { text-wrap: pretty; }
.tabla td, .pack-precio, .res-valor, .bc-total strong, .coleccion-ahora { font-variant-numeric: tabular-nums; }

/* Cabecera: marca en minúsculas, sin cajas de más */
.cab { background: rgba(10,8,13,.78); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--borde); }
.cab-int { height: 3.75rem; }
.logo { font-family: var(--serif); font-weight: 800; font-size: 1.3rem; letter-spacing: -.05em; text-transform: lowercase; }
.logo-punto { color: var(--acento); }
.cab-aviso { border-radius: 4px; font-size: .78rem; padding: .2rem .55rem; letter-spacing: .01em; }
.carrito-btn { border-radius: 8px; }

/* Barra de promociones: una sola franja de color, texto en tinta */
.promo-barra { background: var(--acento); border: 0; }
.promo-barra-int { padding: .5rem 0; }
.promo-rotulo { background: var(--tinta); color: var(--acento); border-radius: 4px; font-size: .74rem; font-weight: 700; letter-spacing: .01em; padding: .2rem .55rem; }
.promo-lista { color: var(--tinta); font-size: .84rem; font-weight: 500; }
.promo-chip { white-space: nowrap; }
.promo-chip strong { color: var(--tinta); font-weight: 800; font-size: .95rem; }
.promo-ver { color: var(--tinta); font-weight: 600; }
@media (min-width: 960px) {
  .promo-lista { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0 1.75rem; overflow: visible; white-space: normal; line-height: 1.3; }
  .promo-chip { white-space: normal; }
  .promo-chip strong { display: block; font-size: 1.05rem; }
}

/* Botones */
.btn { border-radius: 6px; font-family: var(--sans); font-weight: 700; font-size: 1rem; letter-spacing: -.005em; padding: .95rem 1.6rem; background: var(--acento); color: var(--tinta); transition: background .15s, color .15s, transform .08s; }
.btn:hover { background: var(--texto); color: var(--tinta); }
.btn-sec { background: transparent; color: var(--texto); border: 1px solid #3d3349; }
.btn-sec:hover { background: var(--panel2); color: var(--texto); }
.btn.peligro:hover { background: #2e1a24; color: var(--error); }
.btn-chico { padding: .55rem 1rem; font-size: .86rem; }

/* Aviso +18 */
.edad { background: rgba(6,4,9,.96); }
.edad-caja { border-radius: 10px; border-color: #3d3349; padding: 2.5rem 2rem; text-align: left; }
.edad-marca { font-family: var(--serif); font-weight: 800; letter-spacing: -.04em; text-transform: lowercase; font-size: 1.15rem; }
.edad-caja h2 { font-size: 2.1rem; letter-spacing: -.04em; }

/* Portada */
.hero { padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(1.5rem, 4vw, 3rem); gap: clamp(2rem, 5vw, 4.5rem); }
.hero h1 { font-size: clamp(2.3rem, 6.6vw, 4.2rem); line-height: 1; letter-spacing: -.045em; font-weight: 700; }
.hero p { font-size: 1.12rem; line-height: 1.55; color: #bdb2c9; max-width: 34rem; }
.hero-texto { max-width: 40rem; }
.sello { border: 0; background: none; padding: 0; margin: 0 0 1.75rem; color: var(--suave); font-weight: 500; font-size: .9rem; gap: .5rem; }
.sello svg { color: var(--acento); width: 1.15rem; height: 1.15rem; }
.garantias { flex-direction: column; flex-wrap: nowrap; gap: 0; margin: 2rem 0 0; max-width: 30rem; border-top: 1px solid var(--borde); }
.garantias li { padding: .75rem 0; border-bottom: 1px solid var(--borde); font-size: .95rem; color: var(--texto); }
.garantias svg { color: var(--acento); }
.paga-con { margin-top: 1.75rem; }
.paga-con > span { color: var(--suave); font-size: .85rem; }
.hero-cta { margin-top: 2rem; }
.hero-cta .btn { padding: 1.05rem 2rem; }

/* Tarifa: el precio es lo más importante de la portada, así que se muestra grande */
.tarifa { position: relative; border: 1px solid #3d3349; border-radius: 10px; background: var(--panel); padding: clamp(1.5rem, 3.4vw, 2.4rem); }
.tarifa::before { content: ""; position: absolute; left: -1px; top: 1.6rem; width: 4px; height: 3.4rem; background: var(--acento); border-radius: 0 3px 3px 0; }
.hero .tarifa-rotulo { margin: 0; color: var(--suave); font-size: .95rem; }
.hero .tarifa-cifra { margin: .35rem 0 0; font-family: var(--serif); font-weight: 800; line-height: .82; letter-spacing: -.07em; color: var(--texto); font-size: clamp(4.5rem, 10.5vw, 7.5rem); display: flex; align-items: flex-end; gap: .08em; flex-wrap: nowrap; white-space: nowrap; }
.hero .tarifa-cifra .usd { font-size: .22em; letter-spacing: -.02em; color: var(--acento); align-self: flex-start; margin-top: .25em; }
.hero .tarifa-cifra .por { font-family: var(--sans); font-weight: 500; font-size: .17em; letter-spacing: 0; color: var(--suave); margin: 0 0 .55em .4em; line-height: 1; }
.tarifa-lista { margin: 1.6rem 0 0; padding: 0; }
.tarifa-lista div { display: flex; align-items: baseline; gap: .75rem; padding: .7rem 0; border-top: 1px solid var(--borde); }
.tarifa-lista dt { color: #cfc5da; flex: 1; }
.tarifa-lista dd { margin: 0; font-family: var(--sans); font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; color: var(--champan); font-variant-numeric: tabular-nums; }
.hero .tarifa-pie { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--borde); color: var(--suave); font-size: .9rem; }
.hero .tarifa-pie strong { color: var(--texto); font-weight: 600; }
@media (min-width: 960px) { .hero:has(.tarifa) { grid-template-columns: 1.15fr 1fr; } }

/* Una sola entrada al abrir la portada */
@keyframes sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-texto > *, .tarifa { animation: sube .7s cubic-bezier(.2,.7,.2,1) both; }
.hero-texto > :nth-child(2) { animation-delay: .06s; }
.hero-texto > :nth-child(3) { animation-delay: .12s; }
.hero-texto > :nth-child(4) { animation-delay: .18s; }
.hero-texto > :nth-child(n+5) { animation-delay: .24s; }
.tarifa { animation-delay: .2s; }

/* Criptomonedas */
.cripto { border-radius: 6px; background: var(--panel); border-color: var(--borde); color: #cfc5da; padding: .3rem .75rem .3rem .35rem; }
.cripto-mas { padding-left: .75rem; }
.criptos-compacto .cripto { background: none; border: 0; }

/* Títulos de sección */
.seccion-cab { margin: 3.5rem 0 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--borde); align-items: baseline; }
.seccion-cab h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }

/* Buscador y filtros */
.buscador input { border-radius: 8px; background: var(--panel); border-color: var(--borde); padding: .85rem 1rem .85rem 2.7rem; }
.buscador input:focus { outline: 0; border-color: var(--acento); }
.filtro { border-radius: 6px; font-weight: 500; }
.filtro[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--tinta); font-weight: 700; }

/* Tarjetas de modelos: la foto manda, sin saltos al pasar el mouse */
.creadoras { gap: 1.1rem; }
.creadora { border-radius: 6px; }
.creadora:hover { transform: none; box-shadow: 0 0 0 2px var(--acento); }
.creadora-img { background: linear-gradient(160deg, #2a1f38, #120d19); }
.creadora-pie { padding-top: 4rem; background: linear-gradient(to top, rgba(10,8,13,.96) 8%, rgba(10,8,13,0)); }
.creadora-nombre { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; letter-spacing: -.04em; }
.creadora-meta { color: #cfc5da; font-size: .82rem; }
.mini-avatar { border-width: 2px; }
.etiqueta { border-radius: 3px; font-weight: 700; font-size: .72rem; padding: .22rem .5rem; letter-spacing: .01em; }
.precio-chip { border-radius: 3px; font-weight: 600; font-size: .78rem; background: rgba(10,8,13,.82); padding: .22rem .5rem; }
.creadora-ver { color: var(--acento); }

/* Ficha de la modelo */
.perfil-nombre { font-size: clamp(2.2rem, 6.4vw, 4rem); letter-spacing: -.045em; font-weight: 700; }
.avatar { box-shadow: 0 0 0 3px var(--acento); }
.migas, .portada .migas { font-size: .82rem; }
.portada .migas { border-radius: 4px; background: rgba(10,8,13,.62); }
.stats strong { font-weight: 600; }

/* Packs */
.packs { gap: 1.1rem; }
.pack { border-radius: 8px; background: var(--panel); border-color: var(--borde); }
.pack:hover { transform: none; box-shadow: none; border-color: #5b4a6e; }
.pack-vista::after { background: linear-gradient(to top, rgba(20,16,25,.95), rgba(20,16,25,.1)); }
.pack-nombre { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; letter-spacing: -.04em; }
.pack-precio { font-family: var(--sans); font-weight: 700; font-size: 1.3rem; letter-spacing: -.015em; color: var(--champan); }
.pack-boton { border-radius: 6px; font-family: var(--sans); font-weight: 700; padding: .5rem 1.05rem; }
.pack.en-carrito .pack-boton, .pack:has(input:checked) .pack-boton { color: var(--tinta); }
.candado span { border-radius: 8px; }
.coleccion { border-radius: 8px; border-color: var(--acento); background: rgba(255,61,127,.09); }
.coleccion-txt strong { font-family: var(--serif); font-weight: 700; letter-spacing: -.04em; }
.coleccion-pct { border-radius: 3px; }
.muestras a { border-radius: 6px; }
.muestra-pack { border-radius: 3px; }

/* Promociones de la portada: porcentajes grandes */
.promos-home { margin-top: 3.5rem; }
.promos-home-cab h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.promos-lista { border-top: 1px solid var(--borde); }
.promos-lista li { padding: 1.15rem 0; display: grid; grid-template-columns: minmax(7.5rem, 11rem) 1fr; align-items: center; gap: 1rem; }
.promo-num { font-family: var(--serif); font-weight: 700; letter-spacing: -.05em; font-size: clamp(1.7rem, 3.4vw, 2.5rem); color: var(--texto); min-width: 0; }
.promo-txt { color: #cfc5da; max-width: 28rem; }

/* Privacidad */
.privacidad { margin-top: 4.5rem; padding-top: 3.5rem; }
.privacidad h2 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); letter-spacing: -.045em; font-weight: 700; max-width: 20ch; }
.privacidad-intro { color: #bdb2c9; }
.privacidad-col { border-radius: 8px; background: var(--panel); }
.privacidad-col h3 { font-size: 1.3rem; letter-spacing: -.035em; }
.col-no li::before { border-radius: 4px; }
.col-si li::before { border-radius: 4px; }

/* Texto de apoyo y preguntas frecuentes */
.sobre { margin-top: 4rem; padding-top: 3rem; }
.sobre h2 { font-size: clamp(1.7rem, 3.8vw, 2.6rem); letter-spacing: -.04em; max-width: 16ch; }
.sobre-texto p { color: #bdb2c9; }
.faq { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--borde); }
.faq-lado h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.faq summary { font-size: 1.02rem; padding: .1rem 0; }
.faq summary::after { color: var(--acento); }
.faq p { color: #b3a8c0; max-width: 60ch; }

/* Carrito */
.barra-carrito, .barra { background: rgba(20,16,25,.96); }
.cajon { background: var(--panel); border-left-color: #3d3349; }
.cajon-cab h2 { font-size: 1.5rem; letter-spacing: -.04em; }
.cajon-modelo { font-family: var(--serif); font-weight: 700; letter-spacing: -.035em; }
.res-total .res-valor, .bc-total strong, .coleccion-ahora { font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; }
.toast { border-radius: 8px; }
.toast-btn { border-radius: 4px; }
.res-promos, .res-promo { border-radius: 6px; }

/* Páginas del comprador y documentos */
.caja { border-radius: 8px; }
.cambios-num { border-radius: 6px; }
.cambios-num strong { font-family: var(--serif); font-weight: 800; letter-spacing: -.05em; }
.doc h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.045em; font-weight: 700; }
main > h1:first-child { font-size: clamp(1.9rem, 4.6vw, 2.8rem); letter-spacing: -.045em; font-weight: 700; }
.vacio h2, .vacio h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); letter-spacing: -.04em; font-weight: 700; }
.vacio p { max-width: 36rem; margin-inline: auto; }

/* Pie */
.pie { margin-top: 2rem; padding-top: 2.25rem; border-top: 1px solid var(--borde); }
.pie-privado { font-family: var(--sans); font-weight: 600; }

/* Panel de gestión: mismas formas, sin adornos */
.modelo-resumen:hover, .modelo[open] > .modelo-resumen { background: var(--panel2); }
.mr-nombre, .ajustes-resumen { font-family: var(--serif); font-weight: 700; letter-spacing: -.035em; }
.campo input[type=text], .campo input[type=number], .campo textarea, .enlace input { border-radius: 6px; }
.pack-admin { border-radius: 6px; }

@media (max-width: 560px) {
  .hero h1 { font-size: clamp(2.3rem, 11.5vw, 3rem); }
  .hero .tarifa-cifra { font-size: 3.9rem; }
  .tarifa { padding: 1.4rem 1.25rem; }
  .creadora-nombre { font-size: 1.05rem; }
}