/* RetroProbe — hoja de estilos unica */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("assets/fonts/manrope-latin-var.woff2") format("woff2");
}

:root {
  --probe-ink: #0b0b0c;
  --probe-mute: #4e525e;
  --probe-paper: #ffffff;
  --probe-accent: #c2410c;
  --probe-line: #dddbd6;
  --probe-wash: #f5f3f0;
  --probe-shell: 1200px;
  --probe-pill: 999px;
  --probe-font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--probe-paper);
  color: var(--probe-ink);
  font-family: var(--probe-font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.01em;
  overflow-x: hidden;
}

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

a { color: inherit; }

h1, h2, h3 { margin: 0; text-wrap: balance; }

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

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

.probe-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.probe-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--probe-ink);
  color: #fff;
  padding: 14px 22px;
  border-radius: var(--probe-pill);
  font-weight: 700;
}
.probe-skip:focus { left: 16px; top: 12px; }

.probe-shell {
  width: 100%;
  max-width: var(--probe-shell);
  margin: 0 auto;
  padding-inline: 20px;
}

@media (min-width: 760px) { .probe-shell { padding-inline: 40px; } }

/* ---------- barra superior ---------- */

.probe-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--probe-ink);
  color: #fff;
}

.probe-topbar__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
  padding-block: 10px;
  position: relative;
}

.probe-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  background: #fff;
  color: var(--probe-ink);
  text-decoration: none;
  padding: 9px 18px;
  border-radius: var(--probe-pill);
  text-transform: uppercase;
  font-size: 17px;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.probe-mark__a { font-weight: 200; }
.probe-mark__b { font-weight: 700; color: var(--probe-accent); }
.probe-mark:hover { background: var(--probe-wash); }

.probe-topbar .probe-mark:focus-visible,
.probe-topbar a:focus-visible,
.probe-topbar button:focus-visible { outline-color: #fff; }

.probe-burger {
  margin-left: auto;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #fff;
  border: 0;
  border-radius: var(--probe-pill);
  cursor: pointer;
}
.probe-burger:hover { background: #22222a; }
.probe-burger__open, .probe-burger__shut { display: block; }
.probe-burger[aria-expanded="true"] .probe-burger__open { display: none; }
.probe-burger[aria-expanded="false"] .probe-burger__shut { display: none; }

.probe-nav {
  display: none;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: var(--probe-ink);
  padding: 4px 20px 22px;
}
.probe-nav.is-open { display: block; }

.probe-nav__list { display: flex; flex-direction: column; gap: 2px; }

.probe-nav__link {
  display: block;
  padding: 13px 6px;
  min-height: 48px;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.probe-nav__link:hover { color: #ffd8c6; }

.probe-nav__cta {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--probe-pill);
  background: var(--probe-accent);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}
.probe-nav__cta:hover { background: #fff; color: var(--probe-ink); }

@media (min-width: 980px) {
  .probe-burger { display: none; }
  .probe-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    position: static;
    padding: 0;
    margin-left: auto;
  }
  .probe-nav__list { flex-direction: row; align-items: center; gap: 4px; }
  .probe-nav__link { padding: 13px 14px; }
  .probe-nav__cta { margin: 0 0 0 10px; }
}

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

.probe-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 28px;
  border-radius: var(--probe-pill);
  border: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.probe-act--solid { background: var(--probe-ink); color: #fff; }
.probe-act--solid:hover { background: var(--probe-accent); }
.probe-act--solid:active { transform: translateY(1px); }

.probe-act--line {
  background: transparent;
  color: var(--probe-ink);
  border: 1px solid var(--probe-ink);
  font-weight: 400;
}
.probe-act--line:hover {
  background: var(--probe-wash);
  box-shadow: inset 0 0 0 1px currentColor;
  font-weight: 700;
}
.probe-act--line:active { transform: translateY(1px); }

.probe-act--mini { min-height: 48px; padding: 12px 22px; font-size: 15px; }

/* ---------- portada ---------- */

.probe-lead { padding-block: 56px 72px; }

.probe-lead__inner { display: grid; gap: 40px; }

@media (min-width: 1000px) {
  .probe-lead { padding-block: 72px 88px; }
  .probe-lead__inner { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); gap: 48px; align-items: stretch; }
}

.probe-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--probe-accent);
  margin-bottom: 22px;
}

.probe-lead__title {
  font-size: clamp(2.6rem, 6.4vw, 4.9rem);
  font-weight: 200;
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin-bottom: 26px;
}
.probe-lead__title strong { font-weight: 700; color: var(--probe-accent); }

.probe-lead__text {
  max-width: 34em;
  font-size: 18px;
  line-height: 1.6;
  color: var(--probe-mute);
}
.probe-lead__text + .probe-lead__text { margin-top: 16px; }

.probe-lead__acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.probe-lead__side {
  display: flex;
  flex-direction: column;
  padding-top: 26px;
  border-top: 1px solid var(--probe-line);
}
.probe-lead__side .probe-lead__text { font-size: 16px; }

@media (min-width: 1000px) {
  .probe-lead__side {
    margin-top: 10px;
    padding-top: 0;
    padding-left: 40px;
    border-top: 0;
    border-left: 1px solid var(--probe-line);
  }
}

.probe-lead__sideh {
  margin-top: 30px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--probe-accent);
}

.probe-index { margin-top: 10px; }
.probe-lead__note {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--probe-line);
  font-size: 13px;
  line-height: 1.55;
  color: var(--probe-mute);
}
@media (min-width: 1000px) { .probe-lead__note { margin-top: auto; } }
.probe-index__item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-block: 13px;
}
.probe-index__item + .probe-index__item { border-top: 1px solid var(--probe-line); }
.probe-index__num {
  flex: none;
  min-width: 22px;
  font-size: 13px;
  font-weight: 200;
  line-height: 1.3;
  color: var(--probe-mute);
}
.probe-index__name { font-size: 15px; font-weight: 700; line-height: 1.35; }
.probe-index__meta { display: block; font-size: 13px; font-weight: 400; color: var(--probe-mute); margin-top: 3px; }

.probe-lead__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 22px 32px;
  margin-top: 48px;
  padding-top: 30px;
  border-top: 1px solid var(--probe-line);
}
.probe-fact__num {
  display: block;
  font-size: 30px;
  font-weight: 200;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.probe-fact__label { display: block; font-size: 13px; line-height: 1.45; color: var(--probe-mute); margin-top: 4px; }

/* ---------- catalogo ---------- */

.probe-shelf { padding-block: 40px 76px; }

.probe-shelf__head { display: grid; gap: 20px; margin-bottom: 44px; }
@media (min-width: 1000px) {
  .probe-shelf { padding-block: 48px 96px; }
  .probe-shelf__head { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: end; }
}

.probe-h2 {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-weight: 200;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.probe-h2 strong { font-weight: 700; }

.probe-shelf__intro { max-width: 40em; font-size: 17px; color: var(--probe-mute); }

.probe-shelf__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 44px 32px;
}

.probe-tile { display: flex; flex-direction: column; }

.probe-tile__frame {
  background: var(--probe-wash);
  border-radius: 8px;
  overflow: hidden;
}
.probe-tile__shot {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.probe-tile__shot--tall { object-position: 50% 34%; }

.probe-tile__id { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.probe-tile__icon { width: 52px; height: 52px; border-radius: 14px; flex: none; }
.probe-tile__name { font-size: 21px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.probe-tile__studio { display: block; font-size: 13px; font-weight: 400; color: var(--probe-mute); margin-top: 3px; }

.probe-tile__score { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.probe-tile__stars { flex: none; }
.probe-tile__value { font-size: 15px; font-weight: 700; }
.probe-tile__source { font-size: 13px; color: var(--probe-mute); }

.probe-tile__text { margin-top: 16px; font-size: 16px; line-height: 1.62; color: var(--probe-mute); }

.probe-tile__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.probe-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border: 1px solid var(--probe-line);
  border-radius: var(--probe-pill);
  font-size: 12px;
  line-height: 1.5;
  color: var(--probe-ink);
}

.probe-tile__verdict { margin: 20px 0 auto; font-size: 16px; line-height: 1.55; }
.probe-tile__verdict b { font-weight: 700; }

.probe-tile__go { margin-top: 24px; align-self: flex-start; }

.probe-shelf__note {
  margin-top: 48px;
  max-width: 46em;
  font-size: 16px;
  color: var(--probe-mute);
}
.probe-shelf__note b { color: var(--probe-ink); }

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

.probe-bench { padding-block: 32px 88px; }
@media (min-width: 1000px) { .probe-bench { padding-block: 40px 104px; } }

.probe-bench__head { margin-bottom: 32px; }
.probe-bench__intro { max-width: 42em; font-size: 17px; color: var(--probe-mute); margin-top: 18px; }

.probe-bench__scroll { overflow-x: auto; border-radius: 8px; }
.probe-bench__scroll:focus-visible { outline: 2px solid var(--probe-accent); outline-offset: 4px; }

.probe-bench__table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  text-align: left;
}
.probe-bench__table caption {
  caption-side: top;
  text-align: left;
  font-size: 13px;
  color: var(--probe-mute);
  padding-bottom: 16px;
}
.probe-bench__table thead th {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  padding: 0 16px 12px 0;
  border-bottom: 2px solid var(--probe-ink);
  vertical-align: bottom;
}
.probe-bench__table tbody th,
.probe-bench__table tbody td {
  padding: 20px 16px 20px 0;
  border-bottom: 1px solid var(--probe-line);
  vertical-align: top;
  font-size: 15px;
  line-height: 1.5;
}
.probe-bench__table tbody th { font-weight: 700; width: 22%; }
.probe-bench__table tbody td { color: var(--probe-mute); }
.probe-bench__table tbody tr:hover td,
.probe-bench__table tbody tr:hover th { background: var(--probe-wash); }
.probe-bench__mark { display: inline-flex; align-items: center; gap: 8px; color: var(--probe-ink); }
.probe-bench__mark svg { color: var(--probe-accent); flex: none; }
.probe-bench__grade { font-weight: 700; color: var(--probe-ink); }

.probe-bench__sign { margin-top: 28px; max-width: 44em; font-size: 15px; color: var(--probe-mute); }
.probe-bench__sign b { color: var(--probe-ink); }

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

.probe-foot { padding-block: 56px 40px; }

.probe-foot__grid { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .probe-foot { padding-block: 64px 44px; }
  .probe-foot__grid { grid-template-columns: 1.4fr 1fr 1.3fr; gap: 48px; }
}

.probe-foot__title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0; margin-bottom: 18px; }
.probe-foot__text { font-size: 15px; line-height: 1.6; color: var(--probe-mute); max-width: 30em; }
.probe-foot__text + .probe-foot__text { margin-top: 14px; }

.probe-foot__mark {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.probe-foot__links li + li { margin-top: 2px; }
.probe-foot__link {
  display: inline-block;
  padding: 12px 0;
  min-height: 48px;
  font-size: 15px;
  color: var(--probe-mute);
  text-decoration: none;
}
.probe-foot__link:hover { color: var(--probe-ink); text-decoration: underline; text-underline-offset: 4px; }

.probe-foot__mail {
  display: inline-block;
  margin-top: 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--probe-accent);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.probe-foot__mail:hover { color: var(--probe-ink); }

.probe-foot__plus { margin-top: 26px; }

.probe-foot__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 48px;
  font-size: 13px;
  color: var(--probe-mute);
}
.probe-foot__bottom p { max-width: 40em; }

/* ---------- flotantes ---------- */

.probe-up {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  width: 52px;
  height: 52px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--probe-ink);
  color: #fff;
  border: 0;
  border-radius: var(--probe-pill);
  cursor: pointer;
}
.probe-up.is-on { display: inline-flex; }
.probe-up:hover { background: var(--probe-accent); }

.probe-cookie {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 45;
  display: none;
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  box-shadow: rgba(0,0,0,.01) 0 140px 56px 0, rgba(0,0,0,.05) 0 79px 47px 0, rgba(0,0,0,.09) 0 35px 35px 0, rgba(0,0,0,.1) 0 9px 19px 0;
}
.probe-cookie.is-on { display: block; }
.probe-cookie__text { font-size: 14px; line-height: 1.55; color: var(--probe-mute); max-width: 40em; }
.probe-cookie__text a { color: var(--probe-ink); text-underline-offset: 4px; }
.probe-cookie__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

@media (min-width: 720px) {
  .probe-cookie { left: 24px; right: auto; bottom: 24px; max-width: 460px; padding: 24px; }
  .probe-up { right: 24px; bottom: 24px; }
}

/* ---------- paginas legales ---------- */

.probe-doc { padding-block: 48px 72px; }
.probe-doc__title { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 200; line-height: 1.06; letter-spacing: -0.035em; }
.probe-doc__stamp { margin-top: 18px; font-size: 14px; color: var(--probe-mute); }
.probe-doc__body { margin-top: 40px; max-width: 44em; }
.probe-doc__body h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-top: 40px;
}
.probe-doc__body h2:first-child { margin-top: 0; }
.probe-doc__body p { margin-top: 14px; font-size: 16px; line-height: 1.68; color: var(--probe-mute); }
.probe-doc__body ul { margin-top: 14px; display: grid; gap: 10px; }
.probe-doc__body li {
  font-size: 16px;
  line-height: 1.62;
  color: var(--probe-mute);
  padding-left: 20px;
  position: relative;
}
.probe-doc__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 2px;
  background: var(--probe-accent);
}
.probe-doc__body a { color: var(--probe-ink); text-underline-offset: 4px; }
.probe-doc__back { margin-top: 44px; }

.probe-lost { padding-block: 80px 96px; text-align: center; }
.probe-lost__code { font-size: clamp(4rem, 16vw, 9rem); font-weight: 200; line-height: 1; letter-spacing: -0.05em; color: var(--probe-accent); }
.probe-lost__title { margin-top: 12px; font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 200; letter-spacing: -0.03em; }
.probe-lost__text { margin: 20px auto 0; max-width: 32em; font-size: 17px; color: var(--probe-mute); }
.probe-lost__acts { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* anclas por debajo de la barra fija */
#portada, #catalogo, #comparativa, #contact, #probe-main { scroll-margin-top: 96px; }
#probe-main:focus { outline: none; }

/* Preguntas */
.probe-quizzes{padding:clamp(52px,6.5vw,88px) 0;background:var(--probe-wash);}
.probe-quizzes__head{max-width:660px;}
.probe-quizzes__intro{margin-top:12px;color:var(--probe-mute);}
.probe-quizzes__list{margin-top:clamp(22px,3vw,36px);display:grid;gap:12px;}
.probe-quiz{background:var(--probe-paper);border-radius:22px;overflow:hidden;}
.probe-quiz__head{margin:0;}
.probe-quiz__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:none;border:0;padding:20px clamp(18px,2.4vw,28px);text-align:left;font:inherit;color:inherit;cursor:pointer;min-height:48px;}
.probe-quiz__q{font-size:clamp(16px,1.7vw,19px);font-weight:700;}
.probe-quiz__mark{position:relative;width:26px;height:26px;border-radius:var(--probe-pill);background:var(--probe-ink);flex:none;}
.probe-quiz__mark::before,.probe-quiz__mark::after{content:"";position:absolute;background:var(--probe-paper);transition:transform .18s ease;}
.probe-quiz__mark::before{left:7px;top:12px;width:12px;height:2px;}
.probe-quiz__mark::after{left:12px;top:7px;width:2px;height:12px;}
.probe-quiz.is-open .probe-quiz__mark{background:var(--probe-accent);}
.probe-quiz.is-open .probe-quiz__mark::after{transform:scaleY(0);}
.probe-quiz__btn:focus-visible{outline:2px solid var(--probe-accent);outline-offset:-3px;}
.probe-quiz__panel{display:none;padding:0 clamp(18px,2.4vw,28px) 22px;color:var(--probe-mute);max-width:72em;}
.probe-quiz.is-open .probe-quiz__panel{display:block;}
@media (prefers-reduced-motion:reduce){.probe-quiz__mark::before,.probe-quiz__mark::after{transition:none;}}