/* Landing de Skin Bucs (antes EasyCSTrading, 5-nov-2026). Paleta elegida el 5-nov: VINO con BLANCO
   ROTO, y LATÓN de tercer color (vino + dorado: dinero y coleccionismo, que pega con cuchillos
   y guantes). Clara por defecto, sobre el blanco roto; versión oscura (fondo gris antracita
   desde el 15-nov) si el sistema la pide.
   Reparto: el vino es la marca (botones, plan destacado, foco); el latón, los detalles (barras,
   iconos, etiquetas). Verde y rojo solo para cifras de ganar y perder, y ese rojo es vivo a
   propósito para que una pérdida no se confunda con el vino de la marca. La franja de rareza
   de las skins va con los colores del juego.
   Letra (5-nov): Fraunces en los títulos, una serifa con carácter que con el vino y el
   latón da aire de casa de subastas; Inter para el texto, los botones y las etiquetas. */

/* ═════════════ TOKENS ═════════════ */
:root {
  color-scheme: light;
  --plano: #f4efe6; --superficie: #fbf8f2; --superficie-2: #efe8dc;
  --tinta: #2a1a1d; --tinta-2: #5e4b4e; --borde: rgba(42,26,29,.13);
  --acento: #6e1f2e; --acento-fuerte: #591624; --sobre-acento: #f4efe6;
  --acento-texto: #6e1f2e;
  --laton: #b8925a; --laton-texto: #85642f;
  --bien: #2f7a45; --mal: #d32f2f; --azul-texto: #2f4fd6;
  --r-azul: #4b69ff; --r-morada: #8847ff; --r-rosa: #d32ce6; --r-roja: #eb4b4b;
  --radio: 10px; --sombra: 0 10px 30px rgba(42,26,29,.12);
  --titulos: "Fraunces", Georgia, "Times New Roman", serif;
  --texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* El oscuro sale de dos sitios (5-nov, botón sol/luna): el sistema, si nadie ha elegido, o el
   botón de la cabecera, que deja data-theme en <html> y manda sobre el sistema. Los mismos
   valores en los dos bloques: si se cambia uno, se cambia el otro.
   El fondo oscuro es gris antracita (15-nov), el mismo del panel: antes era un vino casi negro. El vino se queda en
   los botones y el latón en los detalles. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --plano: #1e1f22; --superficie: #26282c; --superficie-2: #2f3136;
    --tinta: #f1eee8; --tinta-2: #c6c2bb; --borde: rgba(241,238,232,.10);
    --acento: #9b2f44; --acento-fuerte: #b23a52; --sobre-acento: #f4efe6;
    --acento-texto: #d9b77e;
    --laton: #c9a46b; --laton-texto: #d9b77e;
    --bien: #5cc47a; --mal: #ff6b6b; --azul-texto: #8ab4ff;
    --sombra: 0 10px 30px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --plano: #1e1f22; --superficie: #26282c; --superficie-2: #2f3136;
  --tinta: #f1eee8; --tinta-2: #c6c2bb; --borde: rgba(241,238,232,.10);
  --acento: #9b2f44; --acento-fuerte: #b23a52; --sobre-acento: #f4efe6;
  --acento-texto: #d9b77e;
  --laton: #c9a46b; --laton-texto: #d9b77e;
  --bien: #5cc47a; --mal: #ff6b6b; --azul-texto: #8ab4ff;
  --sombra: 0 10px 30px rgba(0,0,0,.45);
}

/* ═════════════ BASE ═════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--plano); color: var(--tinta); font: 16px/1.6 var(--texto); }
h1, h2, h3 { font-family: var(--titulos); font-weight: 700; letter-spacing: -.01em; line-height: 1.08; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
a, button, input, textarea, summary { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 4px; }
[id] { scroll-margin-top: 84px; }
.contenedor { width: min(1140px, 100% - 32px); margin-inline: auto; }
.contenedor-estrecho { width: min(760px, 100% - 32px); }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 8px;
  background: var(--acento); color: var(--sobre-acento); font-weight: 700; text-decoration: none; }
.saltar:focus { top: 12px; }
.acento { color: var(--acento-texto); }
.antetitulo { font-family: var(--texto); font-weight: 600; font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--laton-texto); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.antetitulo::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--laton); }

/* ═════════════ BOTONES ═════════════ */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px;
  border: 2px solid var(--acento); border-radius: 8px; background: var(--acento); color: var(--sobre-acento);
  font: 600 16px/1 var(--texto); text-decoration: none;
  cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .15s; }
.boton:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }
.boton:active { transform: translateY(1px); }
.boton-borde { background: transparent; color: var(--tinta); border-color: var(--borde); }
.boton-borde:hover { background: transparent; border-color: var(--acento); color: var(--acento); }
.boton-peque { min-height: 44px; padding: 8px 16px; font-size: 14px; } /* 7-nov: 44 px para el dedo («Entrar») */
.menu-entrar { display: none; } /* en escritorio «Entrar» va en la cabecera, junto al sol/luna */
[hidden] { display: none !important; } /* que ningún display de clase gane al atributo hidden */
.boton-ancho { width: 100%; }
.boton[disabled] { opacity: .6; cursor: progress; }

/* ═════════════ CABECERA ═════════════ */
.cabecera { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--plano) 86%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--borde); }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 16px; }
.menu { margin-left: auto; }
.cabecera-acciones { display: flex; align-items: center; gap: 8px; }
/* el botón sol/luna: se ve la luna en claro y el sol en oscuro, lo que pasa al pulsarlo */
.tema-boton { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--borde);
  border-radius: 8px; background: var(--superficie); color: var(--tinta); cursor: pointer; transition: border-color .15s, color .15s; }
.tema-boton:hover { border-color: var(--laton); color: var(--laton-texto); }
.tema-boton svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icono-sol { display: none; }
:root[data-theme="dark"] .icono-sol { display: block; } :root[data-theme="dark"] .icono-luna { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icono-sol { display: block; } :root:not([data-theme="light"]) .icono-luna { display: none; }
}
.marca { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 700 24px/1 var(--titulos); letter-spacing: -.01em;
  text-decoration: none; }
/* el logo de la marca (8-nov, marca/README.md en main): los sables y «Skin Bucs», las dos palabras al mismo tamaño */
.marca-sables { flex: none; }
.marca-skin { color: var(--acento-texto); }
.menu ul { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.menu a:not(.boton) { text-decoration: none; color: var(--tinta-2); font-weight: 500; transition: color .15s; }
.menu a:not(.boton):hover { color: var(--tinta); }
.menu-boton { display: none; width: 48px; height: 48px; padding: 12px; border: 1px solid var(--borde); border-radius: 8px;
  background: var(--superficie); cursor: pointer; flex-direction: column; justify-content: space-between; }
.menu-boton span { display: block; height: 2px; border-radius: 2px; background: var(--tinta); transition: transform .2s, opacity .2s; }
.menu-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.menu-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* ═════════════ HERO ═════════════ */
.hero { position: relative; overflow: hidden; padding: 88px 0 96px;
  background: radial-gradient(900px 420px at 80% -10%, color-mix(in srgb, var(--laton) 22%, transparent), transparent),
              radial-gradient(700px 400px at 0% 110%, color-mix(in srgb, var(--acento) 14%, transparent), transparent); }
.hero-rejilla { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(42px, 6vw, 72px); font-weight: 700; letter-spacing: -.02em; line-height: 1.02; }
.hero h1 .acento { font-style: italic; font-weight: 600; }
.hero-sub { margin-top: 22px; font-size: 18px; color: var(--tinta-2); max-width: 56ch; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-nota { margin-top: 16px; font-size: 14px; color: var(--tinta-2); }
.hero-panel { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra);
  overflow: hidden; transform: rotate(1.2deg); }
.panel-barra { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--borde);
  font-size: 14px; color: var(--tinta-2); }
.luz { width: 10px; height: 10px; border-radius: 50%; background: var(--bien); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bien) 25%, transparent); }
.panel-lista { list-style: none; margin: 0; padding: 0; }
.panel-lista li { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 14px 18px 14px 0; background: var(--superficie-2); border-bottom: 1px solid var(--borde); }
.panel-lista li > span { min-width: 0; }
.panel-lista b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-lista small { color: var(--tinta-2); font-size: 13px; }
.franja { align-self: stretch; }
.r-azul { background: var(--r-azul); } .r-morada { background: var(--r-morada); }
.r-rosa { background: var(--r-rosa); } .r-roja { background: var(--r-roja); }
.etiqueta { font: normal 600 11px/1 var(--texto); letter-spacing: .06em; text-transform: uppercase; padding: 6px 8px;
  border-radius: 4px; white-space: nowrap; }
.et-ok { color: var(--bien); background: color-mix(in srgb, var(--bien) 16%, transparent); }
.et-candado { color: var(--laton-texto); background: color-mix(in srgb, var(--laton) 22%, transparent); }
.et-venta { color: var(--azul-texto); background: color-mix(in srgb, var(--r-azul) 22%, transparent); }
.et-no { color: var(--mal); background: color-mix(in srgb, var(--mal) 16%, transparent); }
.panel-pie { padding: 10px 18px; font-size: 12px; color: var(--tinta-2); text-align: right; }

/* ═════════════ SECCIONES ═════════════ */
.seccion { padding: 96px 0; }
.seccion-alt { background: var(--superficie); border-block: 1px solid var(--borde); }
.seccion h2 { font-size: clamp(32px, 4.2vw, 48px); font-weight: 700; max-width: 22ch; margin-bottom: 44px; }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tarjeta { padding: 28px; background: var(--superficie); border: 1px solid var(--borde); border-top: 3px solid var(--laton);
  border-radius: var(--radio); }
.tarjeta h3 { font-size: 26px; margin-bottom: 10px; }
.tarjeta p { color: var(--tinta-2); }

/* ═════════════ CÓMO FUNCIONA ═════════════ */
.pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.paso { position: relative; padding: 28px 24px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio); }
.paso-n { position: absolute; top: 18px; right: 20px; font: italic 600 34px/1 var(--titulos); color: color-mix(in srgb, var(--tinta) 16%, transparent); }
.icono { width: 40px; height: 40px; padding: 8px; margin-bottom: 18px; border-radius: 8px; fill: none; stroke: var(--laton-texto);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; background: color-mix(in srgb, var(--laton) 18%, transparent); }
.paso h3 { font-size: 26px; margin-bottom: 8px; }
.paso p { color: var(--tinta-2); font-size: 15px; }

/* ═════════════ PLANES ═════════════ */
.rejilla-planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 32px 28px; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 14px; }
.plan h3 { font-size: 28px; }
.plan-precio { margin: 12px 0 22px; font: italic 600 34px/1 var(--titulos); color: var(--acento-texto); }
.plan-lista { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; flex: 1; }
.plan-lista li { position: relative; padding-left: 28px; color: var(--tinta-2); }
.plan-lista li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 14px; height: 8px;
  border-left: 2.5px solid var(--bien); border-bottom: 2.5px solid var(--bien); transform: rotate(-45deg); }
.plan-destacado { border: 2px solid var(--acento); box-shadow: var(--sombra);
  background: linear-gradient(180deg, color-mix(in srgb, var(--acento) 10%, var(--superficie)), var(--superficie) 40%); }
.plan-cinta { position: absolute; top: -14px; left: 28px; padding: 6px 12px; border-radius: 999px; background: var(--acento);
  color: var(--sobre-acento); font: 600 12px/1 var(--texto); letter-spacing: .1em; text-transform: uppercase; }

/* ═════════════ TESTIMONIOS ═════════════ */
.aviso-ejemplo { margin: -16px 0 28px; color: var(--tinta-2); font-size: 15px; }
.testimonio { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; margin: 0;
  padding: 28px; background: var(--superficie-2); border: 1px dashed var(--borde); border-radius: var(--radio); }
.testimonio blockquote { margin: 0; font-size: 18px; line-height: 1.5; }
.sello { position: absolute; top: 14px; right: 14px; padding: 4px 8px; border-radius: 4px; font: 600 11px/1 var(--texto);
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); border: 1px solid var(--borde); }
.testimonio figcaption { display: flex; align-items: center; gap: 12px; }
.testimonio figcaption small { display: block; color: var(--tinta-2); font-size: 14px; }
.avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, var(--laton) 24%, transparent); color: var(--laton-texto); font: 600 15px/1 var(--texto); }

/* ═════════════ PREGUNTAS (acordeón nativo con <details>) ═════════════ */
.acordeon { display: grid; gap: 12px; }
.acordeon details { background: var(--plano); border: 1px solid var(--borde); border-radius: var(--radio); }
.acordeon details[open] { border-color: color-mix(in srgb, var(--laton) 60%, var(--borde)); }
.acordeon summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px;
  padding: 16px 22px; font-weight: 600; font-size: 17px; cursor: pointer; list-style: none; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: "+"; flex: none; font: 700 26px/1 var(--titulos); color: var(--laton-texto); transition: transform .2s; }
.acordeon details[open] summary::after { transform: rotate(45deg); }
.acordeon details p { padding: 0 22px 20px; color: var(--tinta-2); }

/* ═════════════ FORMULARIO ═════════════ */
.intro { margin: -16px 0 32px; color: var(--tinta-2); }
.formulario { display: grid; gap: 20px; padding: 32px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; }
.campo { display: grid; gap: 8px; }
.campo label { font-weight: 600; }
.campo .opcional { font-weight: 400; color: var(--tinta-2); }
.campo input, .campo textarea { width: 100%; padding: 13px 14px; font: inherit; font-size: 16px; color: var(--tinta);
  background: var(--plano); border: 1px solid var(--borde); border-radius: 8px; transition: border-color .15s; }
.campo textarea { resize: vertical; min-height: 130px; }
.campo input:hover, .campo textarea:hover { border-color: color-mix(in srgb, var(--acento) 45%, var(--borde)); }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--acento) 55%, transparent);
  outline-offset: 1px; border-color: var(--acento); }
.campo [aria-invalid="true"] { border-color: var(--mal); }
.campo ::placeholder { color: color-mix(in srgb, var(--tinta-2) 75%, transparent); }
.error { color: var(--mal); font-size: 14px; }
.estado-envio:empty { display: none; }
.estado-envio { padding: 12px 14px; border-radius: 8px; background: var(--superficie-2); border-left: 4px solid var(--laton); }
.estado-envio.bien { border-left-color: var(--bien); }
.estado-envio.mal { border-left-color: var(--mal); }
.letra-pequena { font-size: 13px; color: var(--tinta-2); }

/* ═════════════ PIE ═════════════ */
.pie { padding: 64px 0 28px; border-top: 1px solid var(--borde); }
.pie-rejilla { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.pie-texto { margin-top: 14px; color: var(--tinta-2); max-width: 36ch; }
.pie-titulo { font: 600 13px/1.2 var(--texto); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 14px; }
.pie-lista, .pie-redes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pie-lista a, .pie-redes a { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; text-decoration: none;
  color: var(--tinta-2); transition: color .15s; }
.pie-lista a:hover, .pie-redes a:hover { color: var(--acento-texto); }
.pie-redes svg { width: 22px; height: 22px; fill: currentColor; }
.pie-legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--borde); font-size: 13px; color: var(--tinta-2); }

/* ═════════════ TABLETA ═════════════ */
@media (max-width: 960px) {
  .hero-rejilla { grid-template-columns: 1fr; gap: 44px; }
  .hero-panel { transform: none; max-width: 560px; }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla-planes { grid-template-columns: 1fr; max-width: 520px; }
  .plan-destacado { order: -1; }
}

/* 7-nov: con «Entrar» la cabecera completa no cabe por debajo de ~980 px (se partían los enlaces y salía
   scroll lateral a 770-800 px), así que el menú desplegable empieza antes que el resto del móvil. */
@media (max-width: 1040px) {
  .menu-boton { display: flex; }
  .entrar-cabecera { display: none; } /* en el móvil «Entrar» pasa al menú desplegable */
  .menu-entrar { display: block; }
  .menu { position: absolute; top: 100%; left: 0; right: 0; display: none; background: var(--plano);
    border-bottom: 1px solid var(--borde); padding: 8px 16px 20px; }
  .menu.abierto { display: block; }
  .menu ul { flex-direction: column; align-items: stretch; gap: 0; }
  .menu a:not(.boton) { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--borde); }
  .menu .boton { width: 100%; margin-top: 16px; min-height: 48px; }
  .menu .menu-entrar .boton { margin-top: 8px; }
}

/* ═════════════ MÓVIL ═════════════ */
@media (max-width: 760px) {
  .hero { padding: 56px 0 64px; }
  .hero-sub { font-size: 17px; }
  .hero-acciones .boton { flex: 1 1 100%; }
  .seccion { padding: 64px 0; }
  .seccion h2 { margin-bottom: 40px; }
  .rejilla-3, .pasos { grid-template-columns: 1fr; }
  .formulario { padding: 22px 18px; }
  .pie-rejilla { grid-template-columns: 1fr; gap: 28px; }
}