/* Mismo sistema que djhummer.es: el verde manda, el negro sostiene y la
   tipografía hace el resto. */

:root {
  --bg: #0b0a09;
  --bg-card: #131210;
  --bg-elevated: #1a1815;
  --bg-deep: #060a08;
  --ink: #f4f0e6;
  --ink-medio: #b5b0a2;
  --ink-tenue: #6f6a5e;
  --accent: #d3ff3a;
  --accent-soft: #e1ff5e;
  --accent-glow: rgba(211, 255, 58, 0.15);
  --magenta: #ff3aa8;
  --naranja: #ff5b2e;
  --border: rgba(244, 240, 230, 0.1);
  --line: rgba(244, 240, 230, 0.08);

  --display: 'Bricolage Grotesque', 'Inter Tight', system-ui, sans-serif;
  --body: 'Inter Tight', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --max: 1320px;
  --pad: clamp(20px, 4vw, 64px);
  --radius: 14px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  font-family: var(--display);
  margin: 0;
  letter-spacing: -0.035em;
  line-height: 0.94;
  text-transform: uppercase;
  font-weight: 800;
  /* Un titular en mayúsculas y a 36px puede no caber en un móvil estrecho.
     Antes de sacar la página de madre, que parta la palabra. */
  overflow-wrap: break-word;
}

p {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #0b0a09;
  padding: 10px 18px;
  z-index: 999;
  font-weight: 600;
}

.saltar:focus {
  left: 12px;
  top: 12px;
}

.acento {
  color: var(--accent);
}

/* ---------------------------------------------------------------- nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px var(--pad);
  background: rgba(11, 10, 9, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}

.nav--fijo {
  border-bottom-color: var(--line);
}

.nav__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 17px;
}

.nav__marca img {
  width: 22px;
  height: auto;
}

.nav__enlaces {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font-size: 15px;
  color: var(--ink-medio);
}

.nav__enlaces a:hover {
  color: var(--ink);
}

.nav__cta {
  padding: 9px 18px;
  font-size: 14px;
}

/* -------------------------------------------------------------- botones */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease,
    color 160ms ease;
}

.boton:active {
  transform: scale(0.98);
}

.boton--acento {
  background: var(--accent);
  color: #0b0a09;
}

.boton--acento:hover {
  background: var(--accent-soft);
}

.boton--linea {
  border-color: var(--border);
  color: var(--ink);
}

.boton--linea:hover {
  border-color: var(--ink);
}

.boton--grande {
  padding: 16px 30px;
  font-size: 16px;
}

.boton--ancho {
  width: 100%;
}

.boton__nota {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.68;
}

/* ---------------------------------------------------------------- hero */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: end;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(40px, 7vw, 90px) var(--pad) 0;
  /* Acotado: en un monitor muy alto, un 82% de la pantalla deja el titular
     flotando en mitad de la nada y obliga a bajar para encontrar el texto. */
  min-height: min(82vh, 820px);
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-medio);
}

.punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
}

.hero h1 {
  margin-top: 22px;
  font-size: clamp(52px, 9vw, 118px);
}

.hero__entrada {
  margin-top: 26px;
  max-width: 52ch;
  color: var(--ink-medio);
  font-size: clamp(16px, 1.6vw, 19px);
}

.hero__entrada strong {
  color: var(--ink);
  font-weight: 600;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero__datos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  margin: 40px 0 clamp(30px, 5vw, 60px);
  padding: 0;
}

/* Son argumentos de venta, no notas al pie: cada uno con su caja para que se
   lean de un vistazo en lugar de perderse en letra pequeña. */
.hero__datos li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
}

.hero__datos strong {
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1;
  color: var(--accent);
}

.hero__datos span {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink-medio);
}

.hero__figura {
  position: relative;
  align-self: center;
  /* La captura se sale un poco del contenedor por la derecha: da sensación de
     que el programa sigue más allá del borde. */
  margin-right: calc(var(--pad) * -1);
}

.hero__figura::before {
  content: '';
  position: absolute;
  inset: -8% -4% 4% 4%;
  background: radial-gradient(56% 50% at 55% 45%, var(--accent-glow), transparent 72%);
  z-index: 0;
}

/* El protagonista: la ventana del programa. */
.hero__app {
  position: relative;
  z-index: 2;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(244, 240, 230, 0.04);
}

/* En pantalla grande manda la captura: quien compra quiere ver el programa.
   La cara ya está en la firma, debajo de los botones. */
.hero__retrato {
  display: none;
}

/* ---------------------------------------------------------------- firma */

.firma {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  font-size: 15px;
  color: var(--ink-medio);
  line-height: 1.4;
}

.firma img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.firma strong {
  color: var(--ink);
  font-weight: 600;
}

.firma em {
  font-style: normal;
  font-size: 13.5px;
  color: var(--ink-medio);
}

/* ----------------------------------------------------------- marquesina */

.marquesina {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-card);
  padding: 15px 0;
}

.marquesina__pista {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  animation: correr 34s linear infinite;
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

.marquesina__pista i {
  width: 9px;
  height: 9px;
  background: var(--accent);
  transform: rotate(45deg);
  flex-shrink: 0;
}

@keyframes correr {
  to {
    transform: translateX(-50%);
  }
}

/* ------------------------------------------------------------ secciones */

.seccion {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 130px) var(--pad);
}

.seccion--oscura,
.seccion--acento {
  /* La banda de color va de borde a borde, pero el contenido se queda dentro
     del mismo ancho que el resto. Centrarlo con padding en vez de con márgenes
     en cada hijo evita que un párrafo con su propio ancho máximo acabe
     centrado en lugar de alineado a la izquierda. */
  max-width: none;
  padding-inline: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
}

.seccion--oscura {
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.seccion--acento {
  background: var(--accent);
  color: #0b0a09;
}

.rotulo {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent);
}

.rotulo--oscuro {
  color: rgba(11, 10, 9, 0.55);
}

.titular {
  margin-top: 16px;
  font-size: clamp(36px, 5.6vw, 74px);
}

.titular--oscuro {
  color: #0b0a09;
}

.seccion__entrada {
  margin-top: 24px;
  max-width: 62ch;
  color: var(--ink-medio);
  font-size: clamp(16px, 1.5vw, 18px);
}

/* ------------------------------------------------------------------ dos */

.dos {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(36px, 5vw, 64px);
}

.dos__texto p {
  color: var(--ink-medio);
  font-size: 17px;
}

.dos__texto p + p {
  margin-top: 18px;
}

.dos__texto strong {
  color: var(--ink);
  font-weight: 600;
}

.marcas {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.marcas li {
  position: relative;
  padding-left: 28px;
  color: var(--ink-medio);
  font-size: 16px;
}

.marcas li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 9px;
  height: 9px;
  background: var(--accent);
  transform: rotate(45deg);
}

.pantalla {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.pantalla--ancha {
  margin-top: clamp(36px, 5vw, 64px);
}

/* ----------------------------------------------------------------- tres */

.tres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px;
  margin-top: clamp(36px, 5vw, 60px);
}

.ficha {
  padding: 30px 26px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: border-color 200ms ease, transform 200ms ease;
}

.ficha:hover {
  border-color: rgba(211, 255, 58, 0.34);
  transform: translateY(-3px);
}

.ficha__num {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}

.ficha h3 {
  margin-top: 14px;
  font-size: 23px;
  text-transform: none;
  letter-spacing: -0.02em;
}

.ficha p {
  margin-top: 12px;
  color: var(--ink-medio);
  font-size: 15.5px;
}

/* ---------------------------------------------------------------- pasos */

.pasos {
  list-style: none;
  counter-reset: paso;
  margin: clamp(36px, 5vw, 60px) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.pasos li {
  display: flex;
  gap: clamp(18px, 3vw, 44px);
  padding: 28px 0;
  border-top: 1px solid var(--line);
  align-items: flex-start;
}

.pasos li:last-child {
  border-bottom: 1px solid var(--line);
}

.pasos__num {
  font-family: var(--display);
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1;
  color: var(--accent);
  min-width: 2.2ch;
}

.pasos h3 {
  font-size: clamp(21px, 2.4vw, 28px);
  text-transform: none;
  letter-spacing: -0.02em;
}

.pasos p {
  margin-top: 10px;
  max-width: 60ch;
  color: var(--ink-medio);
  font-size: 16.5px;
}

/* ---------------------------------------------------------------- tabla */

.tabla {
  margin-top: clamp(36px, 5vw, 56px);
  border: 1px solid rgba(11, 10, 9, 0.22);
  border-radius: var(--radius);
  overflow: hidden;
}

.tabla__fila {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 12px;
  padding: 16px 22px;
  border-top: 1px solid rgba(11, 10, 9, 0.16);
  font-size: 16px;
}

.tabla__fila:first-child {
  border-top: none;
}

.tabla__fila--cabecera {
  font-size: 14px;
  font-weight: 700;
  background: rgba(11, 10, 9, 0.1);
}

.tabla__fila span:first-child {
  opacity: 0.62;
}

.tabla__fila strong {
  font-weight: 700;
}

.tabla__fila span:last-child {
  opacity: 0.55;
  text-decoration: line-through;
  text-decoration-color: rgba(11, 10, 9, 0.4);
}

.tabla__fila--cabecera span:last-child {
  text-decoration: none;
}

/* --------------------------------------------------------------- precio */

.precio {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  margin-top: clamp(36px, 5vw, 60px);
}

.precio__caja {
  padding: 34px 30px;
  border-radius: var(--radius);
  background: linear-gradient(170deg, rgba(211, 255, 58, 0.09), var(--bg-card) 55%);
  border: 1px solid rgba(211, 255, 58, 0.3);
}

.precio__etiqueta {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-medio);
}

.precio__cifra {
  font-family: var(--display);
  font-size: clamp(60px, 9vw, 86px);
  line-height: 1;
  margin-top: 10px;
  color: var(--accent);
}

.precio__cifra span {
  font-size: 0.42em;
  vertical-align: super;
}

.precio__nota {
  margin-top: 8px;
  font-size: 14.5px;
  color: var(--ink-medio);
}

/* El firmware es lo único que puede dejar a un comprador con el programa
   comprado y sin mod, así que se dice aquí y no solo en la guía. */
.precio__aviso {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: rgba(244, 240, 230, 0.04);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-medio);
}

.precio__aviso strong {
  color: var(--ink);
}

.marcas--precio {
  margin: 26px 0 30px;
}

.precio__pie {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--ink-tenue);
  text-align: center;
}

.pantalla--precio {
  position: sticky;
  top: 100px;
}

/* ---------------------------------------------------------------- dudas */

.dudas {
  margin-top: clamp(32px, 4vw, 52px);
  border-top: 1px solid var(--line);
}

.dudas details {
  border-bottom: 1px solid var(--line);
}

.dudas summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 0;
  cursor: pointer;
  font-family: var(--display);
  font-size: clamp(17px, 2vw, 22px);
  letter-spacing: -0.01em;
  list-style: none;
  transition: color 160ms ease;
}

.dudas summary::-webkit-details-marker {
  display: none;
}

.dudas summary::after {
  content: '+';
  font-family: var(--mono);
  font-size: 22px;
  color: var(--accent);
  transition: transform 200ms ease;
  flex-shrink: 0;
}

.dudas details[open] summary::after {
  transform: rotate(45deg);
}

.dudas summary:hover {
  color: var(--accent);
}

.dudas p {
  padding: 0 0 24px;
  max-width: 72ch;
  color: var(--ink-medio);
  font-size: 16.5px;
}

/* ------------------------------------------------------------- contacto */

.contacto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}

.contacto__vias {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.via {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: border-color 180ms ease, background 180ms ease;
}

.via:hover {
  border-color: var(--accent);
  background: var(--bg-elevated);
}

.via__rotulo {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-medio);
}

.via__valor {
  font-family: var(--display);
  font-size: clamp(17px, 2vw, 21px);
}

/* ------------------------------------------------------------------ pie */

.pie {
  padding: clamp(50px, 7vw, 90px) var(--pad) 34px;
  border-top: 1px solid var(--line);
  max-width: var(--max);
  margin: 0 auto;
}

.pie__marca {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(58px, 15vw, 190px);
  line-height: 0.82;
  letter-spacing: -0.045em;
  color: var(--bg-elevated);
  user-select: none;
}

.pie__filas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 26px;
  margin-top: 44px;
}

.pie__filas div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  color: var(--ink-medio);
}

.pie__filas a:hover {
  color: var(--accent);
}

.pie__rotulo {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

.pie__nota {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-tenue);
  max-width: 80ch;
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 980px) {
  .hero,
  .dos,
  .precio,
  .contacto {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    padding-bottom: 0;
  }

  /* En el móvil el contenido va centrado y sin retrato: en una pantalla
     estrecha la foto o se solapa con el texto o queda tan pequeña que no
     aporta. Lo que tiene que entrar en la primera pantalla es el titular, el
     precio y el botón. */
  .hero__texto {
    text-align: center;
  }

  .hero__figura {
    order: 0;
    margin: 26px 0 0;
  }

  .hero__retrato {
    display: none;
  }

  .etiqueta,
  .hero__acciones {
    justify-content: center;
  }

  .hero h1 {
    margin-top: 16px;
  }

  .hero__entrada {
    margin-left: auto;
    margin-right: auto;
  }

  .firma {
    justify-content: center;
    text-align: left;
  }

  .hero__datos {
    margin-top: 30px;
    text-align: left;
  }

  .pantalla--precio {
    position: static;
  }

  .tabla__fila {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .tabla__fila span:first-child {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.75;
  }

  .tabla__fila--cabecera {
    display: none;
  }
}

@media (max-width: 720px) {
  .nav__enlaces {
    display: none;
  }

  .hero__datos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* El tercero ocupa toda la fila en lugar de quedarse solo y estrecho. */
  .hero__datos li:last-child {
    grid-column: 1 / -1;
  }

  .nav__cta {
    margin-left: auto;
  }

  .pasos li {
    flex-direction: column;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .marquesina__pista {
    animation: none;
  }

  .ficha:hover {
    transform: none;
  }
}

/* --------------------------------------------------- entrada al hacer scroll */

.entra {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.entra.visible {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------- páginas legales */

.legal h1 {
  font-size: clamp(36px, 6vw, 68px);
}

.legal h2 {
  margin-top: 42px;
  font-size: clamp(19px, 2.2vw, 24px);
  text-transform: none;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.legal p {
  margin-top: 14px;
  max-width: 72ch;
  color: var(--ink-medio);
  font-size: 16.5px;
}

.legal a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
}

.legal a:hover {
  color: var(--accent);
}

/* ------------------------------------------------------------- firmware */

.firmware {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px) var(--pad) 0;
}

.firmware__caja {
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(255, 91, 46, 0.1), var(--bg-card) 58%);
  border: 1px solid rgba(255, 91, 46, 0.3);
}

.firmware__titulo {
  margin-top: 12px;
  font-size: clamp(24px, 3.4vw, 40px);
  text-transform: none;
  letter-spacing: -0.03em;
}

.firmware__texto {
  margin-top: 14px;
  max-width: 64ch;
  color: var(--ink-medio);
  font-size: 16.5px;
}

.firmware__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

.firmware__nota {
  font-size: 14px;
  color: var(--ink-medio);
}

/* ----------------------------------------------------------- guía larga */

.guia h1 {
  font-size: clamp(40px, 7vw, 82px);
}

.guia__seccion {
  margin-top: clamp(48px, 6vw, 76px);
  font-size: clamp(22px, 3vw, 34px);
  text-transform: none;
  letter-spacing: -0.03em;
}

.guia__previo {
  margin-top: clamp(32px, 4vw, 48px);
}

.guia .tres {
  margin-top: 24px;
}

/* Los avisos son los que pueden dejar la mesa inservible: se marcan. */
.ficha--aviso {
  background: linear-gradient(160deg, rgba(255, 91, 46, 0.08), var(--bg-card) 58%);
  border-color: rgba(255, 91, 46, 0.26);
}

.ficha--aviso:hover {
  border-color: rgba(255, 91, 46, 0.45);
}

.guia code {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.guia strong {
  color: var(--ink);
  font-weight: 600;
}

.guia__enlace {
  margin-top: 16px;
}

.guia__sos {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
}

.guia__sos-marca {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 91, 46, 0.14);
  border: 1px solid rgba(255, 91, 46, 0.34);
  color: var(--naranja);
  flex-shrink: 0;
}

.guia__sos p {
  color: var(--ink-medio);
  max-width: 64ch;
}

.guia__sos-vias {
  margin-top: 18px;
  flex-wrap: wrap;
}

.guia__legal {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-tenue);
  max-width: 80ch;
}

@media (max-width: 720px) {
  .guia__sos {
    flex-direction: column;
    gap: 14px;
  }
}

/* ------------------------------------------------------- panel de compra */

.panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
}

.panel[hidden] {
  display: none;
}

.panel__velo {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 5, 0.78);
  backdrop-filter: blur(6px);
  animation: panel-velo 220ms ease;
}

.panel__caja {
  position: relative;
  width: 100%;
  max-width: 470px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: clamp(26px, 4vw, 38px);
  border-radius: 20px;
  background: linear-gradient(165deg, var(--bg-elevated), var(--bg-card) 62%);
  border: 1px solid var(--border);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
  animation: panel-entra 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes panel-velo {
  from {
    opacity: 0;
  }
}

@keyframes panel-entra {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
}

.panel__cerrar {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--ink-medio);
  font-size: 14px;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}

.panel__cerrar:hover {
  color: var(--ink);
  border-color: var(--ink-tenue);
}

.panel__marca {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--accent-glow);
  border: 1px solid rgba(211, 255, 58, 0.3);
}

.panel__marca img {
  width: 22px;
}

.panel__titulo {
  margin-top: 18px;
  font-size: clamp(23px, 3.4vw, 30px);
  text-transform: none;
  letter-spacing: -0.03em;
}

.panel__entrada {
  margin-top: 12px;
  color: var(--ink-medio);
  font-size: 15.5px;
}

.panel__pasos {
  list-style: none;
  margin: 24px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.panel__pasos li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--line);
}

.panel__num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
}

.panel__paso-titulo {
  font-weight: 600;
  font-size: 15px;
}

.panel__paso-texto {
  margin-top: 3px;
  font-size: 14px;
  color: var(--ink-medio);
}

.panel__paso-texto strong {
  color: var(--accent);
  font-weight: 600;
}

.panel__otra {
  margin-top: 16px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-tenue);
}

.panel__otra a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
}

/* ------------------------------------------------------ aviso de cookies */

/* Discreto y en una esquina: solo hay cookies necesarias, así que no tiene
   sentido tapar la página con un muro de consentimiento. */
.cookies {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 400px;
  padding: 13px 16px;
  border-radius: var(--radius);
  background: rgba(19, 18, 16, 0.96);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  animation: cookies-entra 400ms cubic-bezier(0.22, 1, 0.36, 1) 600ms backwards;
}

.cookies[hidden] {
  display: none;
}

@keyframes cookies-entra {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.cookies__texto {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-medio);
}

.cookies__texto a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--accent);
  white-space: nowrap;
}

.cookies__boton {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 999px;
  border: none;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--body);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 160ms ease;
}

.cookies__boton:hover {
  background: var(--accent-soft);
}

/* --------------------------------------------------- textos comparativa */

.comparativa__entrada {
  margin-top: 20px;
  max-width: 64ch;
  font-size: 16.5px;
  color: rgba(11, 10, 9, 0.72);
}

.comparativa__pie {
  margin-top: 22px;
  max-width: 70ch;
  font-size: 15px;
  color: rgba(11, 10, 9, 0.68);
}

@media (max-width: 560px) {
  .cookies {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
    flex-wrap: wrap;
  }

  .cookies__boton {
    width: 100%;
  }
}

.legal__vias {
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-tenue);
}

.legal code {
  font-family: var(--mono);
  font-size: 0.86em;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}