:root {
  color-scheme: dark;
  --fondo: #11100d;
  --papel: #f2f1ed;
  --gris: #bab6ae;
  --oxido: #c34b3c;
  --rojo-claro: #e78b76;
  --borde: #39352f;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--fondo);
  color: var(--papel);
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background:
    url("recursos/fondo-oxido.svg") center top / max(100%, 1060px) auto no-repeat,
    radial-gradient(ellipse at 100% 45%, #291c17 0, transparent 45%),
    radial-gradient(ellipse at 0 83%, #211713 0, transparent 42%),
    repeating-linear-gradient(90deg, #bf705014 0 1px, transparent 1px 52px),
    repeating-linear-gradient(0deg, #bf705014 0 1px, transparent 1px 52px),
    var(--fondo);
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--rojo-claro); }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--rojo-claro); outline-offset: 5px; }
.frame { width: min(calc(100% - 112px), 1312px); margin-inline: auto; }
.skip { position: absolute; top: .6rem; left: .6rem; transform: translateY(-200%); background: var(--papel); color: var(--fondo); padding: .8rem; z-index: 2; }
.skip:focus { transform: none; }
.site-head, .footer { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand, nav { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.brand { color: var(--rojo-claro); }
.brand img { flex: none; }
nav { gap: clamp(14px, 3.5vw, 46px); }
nav a, .footer > a:last-child { display: inline-flex; min-height: 44px; align-items: center; gap: .35em; font-size: .91rem; }
nav a span, .footer a span { color: var(--rojo-claro); }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--rojo-claro); font: 650 .73rem/1.5 ui-monospace, Menlo, monospace; letter-spacing: .12em; margin: 0 0 21px; }
.eyebrow i { width: 9px; height: 9px; background: var(--oxido); flex: none; }
h1, h2, p, figure { margin: 0; }
h1 { font-size: clamp(2.45rem, 5.5vw, 5.8rem); font-weight: 850; line-height: .98; letter-spacing: -.07em; }
h1 em { color: var(--rojo-claro); font-style: normal; }
.section-intro { color: var(--gris); font-size: 1.03rem; line-height: 1.65; max-width: 41ch; margin-top: 10px; }
.primary { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; padding: .8rem 1rem; min-height: 48px; background: var(--rojo-claro); color: var(--fondo); font-weight: 760; }
.primary:hover { background: var(--papel); color: var(--fondo); }
.socials { padding-block: clamp(32px, 6vw, 76px) clamp(34px, 5vw, 62px); border-block: 1px solid var(--borde); }
.social-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 14px; margin: clamp(20px, 3vw, 35px) 0 0; padding: 0; }
.social-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 2.2vw, 26px);
  padding: clamp(14px, 2.5vw, 28px);
  min-height: 92px;
  border: 1px solid #744339;
  background: linear-gradient(125deg, #32201a, #191613);
}
.social-card:hover { border-color: var(--rojo-claro); }
.contact-card { margin-top: 14px; min-height: 76px; background: linear-gradient(125deg, #251a16, #171412); }
.contact-card strong { font-size: clamp(1rem, 1.8vw, 1.3rem); }
.contact-card .social-icon { width: clamp(42px, 5vw, 48px); }
.social-card strong, .social-card small { display: block; overflow-wrap: anywhere; }
.social-card strong { font-size: clamp(1.18rem, 2.2vw, 1.65rem); letter-spacing: -.025em; }
.social-card small { color: var(--gris); margin-top: .24em; font-size: .88rem; }
.social-icon { width: clamp(42px, 6vw, 58px); aspect-ratio: 1; display: grid; place-items: center; background: #40241e; color: var(--rojo-claro); border: 1px solid #815247; }
.social-icon svg { width: 55%; fill: none; stroke: currentColor; stroke-width: 1.6; }
.social-arrow { color: var(--rojo-claro); font-size: 1.3rem; }
.oferta { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(20px, 5vw, 70px); align-items: center; padding-block: clamp(32px, 5vw, 64px); }
.oferta-arte img { display: block; width: 100%; aspect-ratio: 2.2; height: auto; object-fit: cover; border: 1px solid var(--borde); }
.guides { padding-block: clamp(40px, 5vw, 64px); border-block: 1px solid var(--borde); }
h2 { font-size: clamp(1.8rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -.06em; }
.section-intro { max-width: 64ch; }
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 12px; margin-top: 28px; }
.guide { border: 1px solid var(--borde); background: #181612; }
.guide:hover, .guide[open] { border-color: var(--oxido); }
summary { list-style: none; cursor: pointer; display: grid; gap: 17px; padding: 20px; }
summary::-webkit-details-marker { display: none; }
.card-top, .card-action { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--rojo-claro); }
.card-top { font: 650 .68rem/1.4 ui-monospace, Menlo, monospace; letter-spacing: .06em; }
.card-icon { display: grid; place-items: center; width: 46px; height: 46px; background: #2c1a16; }
.card-icon svg { width: 25px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.card-title { font-size: clamp(1.05rem, 1.8vw, 1.6rem); font-weight: 740; letter-spacing: -.035em; }
.card-action { font-size: .81rem; font-weight: 650; }
details[open] .card-action > span { transform: rotate(180deg); }
.guide-body { padding: 0 20px 20px; color: var(--gris); font-size: .92rem; line-height: 1.6; }
.prompt { margin-block: 16px 12px; padding: 13px; color: var(--papel); background: #211b17; border-left: 2px solid var(--oxido); user-select: text; }
.copy { display: none; border: 1px solid var(--borde); padding: .5rem .75rem; min-height: 44px; background: none; color: var(--papel); cursor: pointer; }
.js .copy { display: inline-block; }
.copy:hover { border-color: var(--rojo-claro); }
.copy-status { display: block; margin-top: .35em; }
.copy-status:empty { display: none; }
.footer { color: var(--gris); font-size: .9rem; flex-wrap: wrap; }
@media (max-width: 900px) {
  .frame { width: calc(100% - 64px); }
  summary { padding: 15px; }
  .guide-body { padding-inline: 15px; }
}
@media (max-width: 650px) {
  body { background-position: 73% top, 0 0, 0 0, 0 0, 0 0; }
  .frame { width: calc(100% - 36px); }
  .site-head, .footer { min-height: 66px; }
  .brand { gap: 7px; font-size: .87rem; }
  .social-grid, .oferta, .guide-grid { grid-template-columns: 1fr; }
  .social-card { min-height: 76px; }
  .oferta-arte img { max-height: 170px; }
  .footer { padding-block: 12px; }
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.packs { padding-block: clamp(14px, 3vw, 42px) clamp(25px, 4vw, 54px); }
.packs h1 { font-size: clamp(2.1rem, 5vw, 4.4rem); }
.packs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 12px; margin-top: clamp(14px, 2.5vw, 28px); }
.kit {
  --kit-accent: var(--rojo-claro);
  --kit-borde: #7d4a3f;
  --kit-fondo: linear-gradient(145deg, #2a1a16, #171411 85%);
  min-width: 0;
  padding: clamp(11px, 1.5vw, 20px) clamp(11px, 1.5vw, 20px) 4px;
  border: 1px solid var(--kit-borde);
  background: var(--kit-fondo);
}
.kit-avanzado {
  --kit-accent: #93d9d0;
  --kit-borde: #3d7470;
  --kit-fondo: linear-gradient(145deg, #173232, #151c1b 85%);
}
.kit-profesional {
  --kit-accent: #d5b4ef;
  --kit-borde: #795b94;
  --kit-fondo: linear-gradient(145deg, #352744, #1d1725 85%);
}
.kit-resumen { display: grid; grid-template-columns: clamp(50px, 5vw, 72px) minmax(0, 1fr); align-items: center; gap: 12px; }
.kit-resumen img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border: 1px solid var(--kit-borde); background: #11100d; }
.kit h2 { font-size: clamp(1.06rem, 1.65vw, 1.46rem); line-height: 1.1; letter-spacing: -.035em; }
.kit-resumen p, .kit-base, .kit-precio small, .packs-pago { color: var(--gris); font-size: .79rem; line-height: 1.4; }
.kit-resumen p { margin-top: 3px; }
.kit-oferta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block: 12px 7px; }
.kit-precio { color: var(--papel); font-size: clamp(1.12rem, 2vw, 1.5rem); font-weight: 780; line-height: 1.1; }
.kit-precio small { display: block; font-weight: 500; }
.kit-base { margin-top: 2px; }
.kit-compra { margin: 0; min-height: 44px; gap: 6px; padding: .55rem .66rem; font-size: .82rem; background: var(--kit-accent); }
.kit-detalles { border-top: 1px solid var(--kit-borde); }
.kit-detalles summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  padding: .3rem 0;
  color: var(--kit-accent);
  font-size: .8rem;
  font-weight: 700;
}
.kit-detalles summary span::before { content: "+"; }
.kit-detalles[open] summary span::before { content: "−"; }
.kit-detalle-texto { padding-bottom: .65rem; color: var(--gris); font-size: .87rem; line-height: 1.5; }
.kit-list { margin: .4rem 0 .7rem; padding: 0; list-style: none; }
.kit-list li { display: flex; align-items: baseline; gap: .55rem; padding-block: .48rem; border-bottom: 1px solid var(--kit-borde); }
.kit-list b { color: var(--kit-accent); font: 650 .75rem ui-monospace, Menlo, monospace; }
.kit-list strong { color: var(--papel); }
.packs-pago { margin-top: 10px; }
@media (max-width: 760px) {
  .packs-grid { grid-template-columns: 1fr; gap: 8px; }
  .kit-oferta { margin-block: 8px 5px; }
}
@media (max-width: 650px) {
  nav { gap: 11px; }
}
@media (max-width: 350px) {
  .site-head { flex-wrap: wrap; gap: 5px; }
  .site-head .brand img { width: 30px; height: 30px; }
  .site-head nav { gap: 8px; }
  .packs h1 { font-size: 1.75rem; }
  .kit-resumen { grid-template-columns: 44px minmax(0, 1fr); }
}