/* TrendRadar — hoja de estilos compartida (todas las páginas) */
:root{
  --ink:#0B1A1E; --ink-2:#132A30; --paper:#EAF6F4; --paper-dim:#7FA6A0;
  --teal:#00E5B8; --teal-deep:#00A082; --coral:#FF6B4A; --amber:#F2C14E;
  --bg:var(--ink); --fg:var(--paper); --muted:var(--paper-dim); --card:var(--ink-2);
  --border:rgba(234,246,244,.12); --soft:rgba(234,246,244,.03);
  --accent:var(--teal); --accent-ink:var(--ink);
}
:root[data-theme="light"]{
  --bg:#F1FAF8; --fg:#0B1A1E; --muted:#4B6B66; --card:#FFFFFF;
  --border:rgba(11,26,30,.14); --soft:rgba(11,26,30,.03);
  --accent:var(--teal-deep); --accent-ink:#04201C;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:80px}
body{background:var(--bg);color:var(--fg);font-family:'Inter',system-ui,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,.logo,.head-font{font-family:'Space Grotesk',system-ui,sans-serif}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
a{color:inherit}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
.accent{color:var(--accent)}

header{position:sticky;top:0;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:10}
nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:18px;text-decoration:none}
.logo-mark{width:30px;height:30px;border-radius:8px;background:var(--card);border:1px solid var(--teal-deep);
  display:flex;align-items:center;justify-content:center;flex:none}
.nav-links{display:flex;align-items:center;gap:20px}
.nav-links a{font-size:14px;color:var(--muted);text-decoration:none;font-weight:500}
.nav-links a:hover{color:var(--fg)}
.nav-tools{display:flex;align-items:center;gap:8px}
.tool{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:16px;
  padding:7px 12px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.tool:hover{color:var(--fg);border-color:var(--accent)}
/* Menú móvil: en pantalla estrecha los enlaces de la cabecera se esconden y se
   abren con el botón ☰ (antes quedaban inalcanzables salvo por el pie). */
.nav-burger{display:none;background:transparent;border:1px solid var(--border);color:var(--fg);
  border-radius:16px;padding:7px 11px;font-size:15px;line-height:1;cursor:pointer;font-family:inherit}
.nav-burger:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:820px){
  .nav-links{display:none}
  nav{position:relative}
  .logo{margin-right:auto}
  .nav-tools{order:2}
  .nav-burger{display:inline-flex;align-items:center;justify-content:center;order:3}
  .nav-links.abierto{display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:absolute;top:100%;left:0;right:0;z-index:20;margin-top:8px;padding:10px;
    background:var(--card);border:1px solid var(--border);border-radius:12px;
    box-shadow:0 18px 40px rgba(0,0,0,.32)}
  .nav-links.abierto a{padding:11px 12px;border-radius:8px;font-size:15px}
  .nav-links.abierto a:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
}
.btn{display:inline-block;font-weight:700;font-size:15px;padding:13px 24px;border-radius:24px;
  border:none;cursor:pointer;text-decoration:none;text-align:center;font-family:inherit}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-ghost{background:transparent;color:var(--fg);border:1px solid var(--border)}
.btn:focus-visible,.tool:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Móvil estrecho (≤520px): el header en una sola fila y el botón sin partir el
   texto en vertical (antes se apilaba en dos líneas y estiraba la cabecera). */
@media(max-width:520px){
  nav{gap:6px;padding:11px 0}
  .logo{font-size:16px;gap:7px}
  .logo-mark{width:26px;height:26px}
  .nav-tools{gap:6px}
  .tool{padding:6px 10px;font-size:12px}
  .nav-tools .btn{padding:9px 11px;font-size:12.5px;white-space:nowrap}
  .nav-burger{padding:6px 9px;font-size:14px}
}
/* Móvil muy estrecho (≤360px): la marca se queda solo con su icono para que
   quepan el tema, el idioma, el botón y el menú sin desbordar la cabecera. */
@media(max-width:360px){
  .logo{font-size:0;gap:0}
  .logo-mark{width:24px;height:24px}
}
/* Entre 361 y 429px el grupo de controles más el botón de menú sobresalían unos
   píxeles del ancho del contenido: se aprieta el espaciado para que la fila
   quede alineada con los márgenes. */
@media(max-width:430px){
  nav{gap:4px}
  .tool{padding:6px 9px}
}

.hero{padding:72px 0 56px;border-bottom:1px solid var(--border)}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
@media(max-width:820px){.hero-inner{grid-template-columns:1fr}}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);padding:7px 14px;border-radius:20px;margin-bottom:20px}
h1{font-weight:700;font-size:clamp(32px,5vw,50px);line-height:1.1;letter-spacing:-.02em}
.hero-sub{margin-top:18px;font-size:17px;color:var(--muted);max-width:46ch}
.hero-actions{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hint{font-size:13px;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.card-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;
  border-bottom:1px solid var(--border);font-size:12px;color:var(--muted)}
.card-body{padding:18px 16px;display:flex;flex-direction:column;gap:10px}
.row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--soft);border-radius:8px}
.row-name{font-size:14px;font-weight:600}
.row-sub{font-size:12px;color:var(--muted);margin-top:2px}
.score{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;flex:none}
.s-high{color:var(--accent)} .s-mid{color:var(--amber)} .s-low{color:var(--coral)}

section{padding:62px 0;border-bottom:1px solid var(--border)}
.eyebrow{font-size:13px;color:var(--accent);margin-bottom:10px;font-weight:700;letter-spacing:.02em}
h2{font-weight:700;font-size:clamp(24px,3.4vw,33px);letter-spacing:-.01em;max-width:24ch}
.section-sub{color:var(--muted);margin-top:14px;max-width:56ch;font-size:15.5px}
.steps{margin-top:38px}
.step{display:grid;grid-template-columns:60px 1fr;gap:18px;padding:24px 0;border-top:1px solid var(--border)}
.step:last-child{border-bottom:1px solid var(--border)}
.step-num{font-size:14px;color:var(--accent)}
.step-title{font-size:16.5px;font-weight:700;margin-bottom:5px}
.step-text{color:var(--muted);font-size:14.5px;max-width:58ch}
/* Fondo alterno, subtítulo y rejilla de tarjetas: el HTML ya las usaba
   (.alt en #score y la sección de herramientas) pero no estaban definidas. */
.alt{background:var(--soft)}
.sub{color:var(--muted);margin-top:12px;font-size:15.5px;max-width:56ch}
.rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
@media(max-width:900px){.rejilla{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.rejilla{grid-template-columns:1fr}}
.tarjeta{border:1px solid var(--border);border-radius:12px;padding:22px;background:var(--card)}
.tarjeta h3{font-size:16px;margin-bottom:8px}
.tarjeta p{color:var(--muted);font-size:14px}
.tarjeta a{color:var(--accent);text-decoration:none}
.tarjeta a:hover{text-decoration:underline}
.faq{margin-top:34px;display:flex;flex-direction:column}
.faq details{border-top:1px solid var(--border);padding:16px 0}
.faq details:last-child{border-bottom:1px solid var(--border)}
.faq summary{cursor:pointer;font-weight:600;font-size:15.5px}
.faq p{color:var(--muted);font-size:14.5px;margin-top:8px;max-width:62ch}

.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}
@media(max-width:800px){.price-grid{grid-template-columns:1fr}}
.price-card{border:1px solid var(--border);border-radius:12px;padding:26px;background:var(--card);display:flex;flex-direction:column}
.price-card.featured{border-color:var(--teal-deep);background:color-mix(in srgb,var(--accent) 5%,transparent)}
.price-name{font-size:14px;color:var(--muted);margin-bottom:14px;font-weight:600}
.price-amount{font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:700}
.price-amount span{font-size:13px;color:var(--muted);font-weight:400;font-family:'Inter',sans-serif}
[hidden]{display:none!important}
.periodo{display:flex;justify-content:center;gap:8px;margin:28px 0 0}
.periodo .btn{font-size:14px;padding:9px 18px}
.price-desc{margin-top:12px;font-size:13.5px;color:var(--muted);line-height:1.6;flex:1}
.price-card .btn{margin-top:20px;width:100%}

.pagehead{padding:56px 0 8px;border-bottom:1px solid var(--border)}
.prosa{padding:40px 0 56px;max-width:76ch}
.prosa h2{font-size:22px;margin:30px 0 10px;max-width:none}
.prosa h3{font-size:17px;margin:22px 0 8px}
.prosa p,.prosa li{color:var(--muted);font-size:15px;margin-bottom:10px}
.prosa ul{padding-left:22px}
.prosa strong{color:var(--fg)}
.prosa a{color:var(--accent)}
.tabla{width:100%;border-collapse:collapse;margin:14px 0 22px;font-size:14.5px}
.tabla th,.tabla td{border:1px solid var(--border);padding:10px 12px;text-align:left;color:var(--muted)}
.tabla th{color:var(--fg);font-weight:600}
.fecha{font-size:13px;color:var(--muted);margin-top:6px}

.cta{text-align:center}
.cta h2{max-width:none;margin:0 auto}
.cta .section-sub{margin-left:auto;margin-right:auto}

footer{padding:28px 0;border-top:1px solid var(--border);color:var(--muted);font-size:13px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
footer a{color:var(--muted);text-decoration:none;margin-right:14px}
footer a:hover{color:var(--fg)}