/* ===== Tokens ===== */
:root{
  --bg:#0b0f14;
  --bg-2:#111823;
  --card:#141d2a;
  --card-2:#18222f;
  --line:#233042;
  --line-2:#2f3f55;
  --txt:#e8eef6;
  --txt-dim:#93a4b8;
  --txt-faint:#6b7d93;
  --acc:#3ee08a;
  --acc-2:#22c3ff;
  --acc-dim:rgba(62,224,138,.12);
  --warn:#ffb547;
  --bad:#ff6b6b;
  --radius:14px;
  --maxw:1080px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Space Grotesk","Inter",system-ui,sans-serif;

  /* sombras: dan el volumen que le faltaba a las tarjetas */
  --sombra:0 1px 2px rgba(0,0,0,.28), 0 8px 24px -8px rgba(0,0,0,.5);
  --sombra-alta:0 2px 4px rgba(0,0,0,.3), 0 18px 44px -12px rgba(0,0,0,.66);
}

*{box-sizing:border-box}
/* display:flex/grid gana a [hidden] si no se fuerza */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--font);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.005em;
}
/* Resplandor de fondo. Un fondo plano se ve barato; esto da profundidad
   sin cargar la página ni pedir ninguna imagen. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(760px 420px at 18% -8%, rgba(62,224,138,.10), transparent 70%),
    radial-gradient(680px 400px at 88% 2%, rgba(34,195,255,.07), transparent 70%);
}
body>*{position:relative;z-index:1}
img{max-width:100%}
a{color:var(--acc-2)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ===== Header ===== */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(11,15,20,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);
  font-weight:700;font-size:18px;letter-spacing:-.025em;color:var(--txt);text-decoration:none}
.brand b{color:var(--acc)}
.nav{display:flex;gap:22px;font-size:14px}
.nav a{color:var(--txt-dim);text-decoration:none}
.nav a:hover{color:var(--txt)}
@media(max-width:720px){.nav{display:none}}

/* ===== Buscador de la cabecera ===== */
.buscador{position:relative;flex:0 1 250px;margin-left:auto}
.buscador input{
  width:100%;background:var(--card-2);border:1px solid var(--line);
  border-radius:10px;padding:9px 34px 9px 13px;color:var(--txt);
  font-family:inherit;font-size:13.5px;outline:none;transition:.16s;
}
.buscador input::placeholder{color:var(--txt-faint)}
.buscador input:focus{
  border-color:var(--acc);background:var(--card);
  box-shadow:0 0 0 3px rgba(62,224,138,.12);
}
.buscador input::-webkit-search-cancel-button{filter:invert(.6)}
.buscador kbd{
  position:absolute;right:9px;top:50%;transform:translateY(-50%);
  font-family:var(--font);font-size:11px;color:var(--txt-faint);
  border:1px solid var(--line-2);border-radius:5px;padding:1px 6px;
  pointer-events:none;
}
.buscador input:focus ~ kbd{opacity:0}

.bs-panel{
  position:absolute;top:calc(100% + 8px);right:0;width:min(420px,86vw);
  background:var(--card);border:1px solid var(--line-2);border-radius:12px;
  box-shadow:var(--sombra-alta);overflow:hidden;padding:5px;
}
.bs-item{
  display:flex;align-items:center;gap:11px;padding:10px 11px;
  border-radius:8px;text-decoration:none;transition:.1s;
}
.bs-item:hover,.bs-item.on{background:var(--card-2)}
.bs-item.on{outline:1px solid rgba(62,224,138,.35)}
.bs-cat{
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--acc);background:var(--acc-dim);border-radius:5px;
  padding:3px 7px;flex-shrink:0;min-width:78px;text-align:center;
}
.bs-tit{
  font-size:13.5px;color:var(--txt-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bs-item:hover .bs-tit,.bs-item.on .bs-tit{color:var(--txt)}
.bs-vacio{padding:16px 13px;font-size:13.5px;color:var(--txt-faint)}

/* En móvil la nav ya está oculta; el buscador se queda y ocupa lo que sobra */
@media(max-width:720px){
  .buscador{flex:1 1 auto;margin-left:14px}
  .buscador kbd{display:none}
}

/* ===== Hero a dos columnas ===== */
.hero{
  padding:52px 0 30px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;
}
.hero-txt{text-align:left}
.hero-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
.cta-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);color:var(--txt-dim);text-decoration:none;
  font-weight:700;font-size:15.5px;padding:15px 24px;border-radius:11px;transition:.14s;
}
.cta-ghost:hover{border-color:var(--txt-dim);color:var(--txt)}

/* tarjeta de ejemplo: enseña un precio antes de tocar nada */
.hero-demo{
  background:linear-gradient(160deg,#142336,#0f1826);
  border:1px solid var(--line-2);border-radius:16px;
  padding:24px 26px;text-align:left;
  box-shadow:var(--sombra-alta);position:relative;
}
.hd-top{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:14px}
.hd-tag{
  font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--acc);background:var(--acc-dim);border:1px solid rgba(62,224,138,.3);
  padding:4px 9px;border-radius:100px;
}
.hd-caso{font-size:12.5px;color:var(--txt-faint)}
.hd-ram{
  font-family:var(--font-display);
  font-size:54px;font-weight:700;line-height:1;letter-spacing:-.04em;
  color:var(--acc);margin-bottom:16px;
}
.hd-ram small{font-size:.32em;color:var(--txt-dim);font-weight:600;
  margin-left:10px;letter-spacing:.01em;font-family:var(--font)}
.hd-lista{list-style:none;margin:0;padding:0}
.hd-lista li{
  display:flex;align-items:baseline;gap:10px;
  padding:9px 0;border-top:1px solid var(--line);font-size:14px;
}
.hd-lista li span:first-child{color:var(--txt-dim);flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd-lista li b{color:var(--txt);font-variant-numeric:tabular-nums;font-weight:700}
.hd-lista li.gana span:first-child{color:var(--acc);font-weight:600}
.hd-lista li.gana b{color:var(--acc)}
.hd-pie{font-size:11.5px;color:var(--txt-faint);margin:13px 0 0;line-height:1.45}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:26px;padding-top:34px}
  .hero-demo{order:2}
}

.hero.hero-solo{grid-template-columns:1fr;max-width:760px;margin:0 auto;text-align:center}
.hero.hero-solo .hero-txt{text-align:center}
.hero.hero-solo .hero-cta{justify-content:center}
.eyebrow{
  display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--acc);
  background:var(--acc-dim);border:1px solid rgba(62,224,138,.25);
  padding:6px 13px;border-radius:100px;margin-bottom:18px;
}
h1{
  font-family:var(--font-display);
  font-size:clamp(31px,5.6vw,54px);line-height:1.06;letter-spacing:-.035em;
  margin:0 0 18px;font-weight:700;
}
h1 em{font-style:normal;color:var(--acc)}
.sub{font-size:clamp(15px,2.2vw,19px);color:var(--txt-dim);max-width:640px;margin:0 auto}
/* En móvil casi todo el tráfico viene de TikTok/Reels: la calculadora
   tiene que verse cuanto antes, así que el hero ocupa menos. */
@media(max-width:600px){
  .hero{padding:26px 0 12px}
  .eyebrow{margin-bottom:12px}
  .calc{margin-top:20px}
  section{padding:38px 0}
}

/* ===== Franja de independencia ===== */
.indep{
  display:flex;align-items:flex-start;gap:14px;
  background:rgba(34,195,255,.07);border:1px solid rgba(34,195,255,.28);
  border-radius:12px;padding:16px 19px;margin-top:8px;
}
.indep-ico{font-size:23px;line-height:1.2;flex-shrink:0}
.indep p{margin:0;font-size:14.5px;color:var(--txt-dim);line-height:1.55}
.indep strong{color:var(--txt)}
@media(max-width:600px){
  .indep{padding:14px 15px;gap:11px}
  .indep p{font-size:13.5px}
}

/* ===== Calculator ===== */
.calc{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:28px;margin:34px 0 20px;box-shadow:var(--sombra);
  position:relative;
}
/* filo de luz en el borde superior: el truco que separa una tarjeta plana
   de una que parece tener volumen */
.calc::before,.result::before,.hero-demo::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;border-radius:16px 16px 0 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);
}
@media(max-width:600px){.calc{padding:18px}}
.step{margin-bottom:26px}
.step:last-child{margin-bottom:0}
.step-label{
  display:flex;align-items:center;gap:9px;
  font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--txt-dim);margin-bottom:12px;
}
.step-num{
  display:grid;place-items:center;width:21px;height:21px;border-radius:50%;
  background:var(--acc);color:#06210f;font-size:12px;font-weight:800;flex-shrink:0;
}

/* game grid */
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:9px}
.game{
  display:flex;align-items:center;gap:9px;
  background:var(--card-2);border:1px solid var(--line);border-radius:10px;
  padding:12px 13px;cursor:pointer;transition:.16s;
  font-size:14px;font-weight:500;color:var(--txt);text-align:left;
  font-family:inherit;text-decoration:none;
}
.game:hover{border-color:var(--line-2);background:#1d2836;transform:translateY(-1px)}
.game[aria-pressed="true"]{border-color:var(--acc);background:var(--acc-dim);color:var(--acc)}
.game .ico{font-size:19px;line-height:1;flex-shrink:0}

/* segmented */
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{
  flex:1 1 auto;min-width:130px;
  background:var(--card-2);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;cursor:pointer;transition:.14s;
  color:var(--txt);font-size:14px;font-weight:600;font-family:inherit;text-align:left;
}
.seg button:hover{border-color:var(--line-2)}
.seg button[aria-pressed="true"]{border-color:var(--acc);background:var(--acc-dim);color:var(--acc)}
.seg small{display:block;font-weight:400;font-size:12px;color:var(--txt-faint);margin-top:2px}
.seg button[aria-pressed="true"] small{color:rgba(62,224,138,.75)}

/* slider */
.slider-row{display:flex;align-items:center;gap:18px}
.slider-row input[type=range]{
  flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:100px;
  background:var(--line-2);outline:none;
}
.slider-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--acc);cursor:pointer;border:3px solid var(--bg);
  box-shadow:0 0 0 1px var(--acc);
}
.slider-row input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--acc);
  cursor:pointer;border:3px solid var(--bg);box-shadow:0 0 0 1px var(--acc);
}
.pcount{
  font-family:var(--font-display);
  font-size:28px;font-weight:700;color:var(--acc);min-width:78px;text-align:right;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1;
}
.pcount small{display:block;font-size:11px;color:var(--txt-faint);font-weight:600;letter-spacing:.05em;text-transform:uppercase}

/* ===== Result ===== */
.result{
  background:linear-gradient(160deg,#142336,#0f1826);
  border:1px solid var(--line-2);border-radius:16px;
  padding:30px;margin-bottom:20px;box-shadow:var(--sombra-alta);
  position:relative;
}
@media(max-width:600px){.result{padding:20px}}
.res-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.res-ram{
  font-family:var(--font-display);
  font-size:clamp(46px,10vw,68px);font-weight:700;line-height:1;
  letter-spacing:-.04em;color:var(--acc);
}
.res-ram span{font-size:.4em;color:var(--txt-dim);font-weight:600;
  margin-left:10px;letter-spacing:.01em;font-family:var(--font)}
.res-for{font-size:15px;color:var(--txt-dim)}
.res-note{
  font-size:14.5px;color:var(--txt-dim);margin:16px 0 0;
  padding-top:16px;border-top:1px solid var(--line);
}
.res-note strong{color:var(--txt)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{
  font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:100px;
  background:var(--card-2);border:1px solid var(--line);color:var(--txt-dim);
}
.chip.ok{border-color:rgba(62,224,138,.3);color:var(--acc);background:var(--acc-dim)}
.chip.warn{border-color:rgba(255,181,71,.3);color:var(--warn);background:rgba(255,181,71,.1)}

/* botón de compartir resultado */
.copiar{
  margin-top:16px;background:var(--card-2);border:1px solid var(--line-2);
  color:var(--txt-dim);font-family:inherit;font-size:13.5px;font-weight:600;
  padding:10px 15px;border-radius:9px;cursor:pointer;transition:.14s;
}
.copiar:hover{border-color:var(--acc-2);color:var(--txt)}
.copiar.copiado{border-color:var(--acc);color:var(--acc);background:var(--acc-dim)}

/* verdict box */
.verdict{
  margin-top:20px;padding:16px 18px;border-radius:11px;
  background:var(--acc-dim);border:1px solid rgba(62,224,138,.28);
  font-size:15px;
}
.verdict.over{background:rgba(255,181,71,.1);border-color:rgba(255,181,71,.32)}
.verdict.small{background:rgba(34,195,255,.09);border-color:rgba(34,195,255,.3)}
.verdict strong{color:var(--acc)}
.verdict.over strong{color:var(--warn)}
.verdict.small strong{color:var(--acc-2)}

/* Solo para lectores de pantalla */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ===== Comparativa visual (barras) ===== */
.barras-tit{
  font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--txt-dim);margin:26px 0 14px;padding-top:20px;
  border-top:1px solid var(--line);
}
.barras{display:flex;flex-direction:column;gap:9px}
.barra{
  display:grid;grid-template-columns:150px 1fr 86px;align-items:center;gap:14px;
}
.barra-nom{font-size:14px;font-weight:600;color:var(--txt-dim);line-height:1.25}
.barra-nom small{
  display:block;font-size:11.5px;font-weight:500;color:var(--txt-faint);margin-top:2px;
}
.barra-sobra{color:var(--acc);opacity:.85}
.barra-pista{
  position:relative;height:34px;background:var(--card-2);
  border:1px solid var(--line);border-radius:8px;overflow:hidden;
  display:flex;align-items:center;
}
.barra-fill{
  height:100%;background:linear-gradient(90deg,#2b4258,#3c5a76);
  border-radius:7px 0 0 7px;transition:width .35s cubic-bezier(.2,.7,.3,1);
}
.barra-precio{
  font-size:15px;font-weight:800;color:var(--txt);text-align:right;
  font-variant-numeric:tabular-nums;
}

/* la fila de DatHost */
.barra.destacada .barra-nom{color:var(--acc)}
.barra.destacada .barra-pista{border-color:rgba(62,224,138,.4)}
.barra.destacada .barra-fill{
  background:linear-gradient(90deg,#2a9d68,var(--acc));
  box-shadow:0 0 22px -4px rgba(62,224,138,.45);
}
.barra.destacada .barra-precio{color:var(--acc)}

/* el host que no sirve para este caso */
.barra.no-sirve .barra-pista{background:transparent;border-style:dashed}
.barra-nd{font-size:12.5px;color:var(--txt-faint);padding:0 12px}
.barra.no-sirve .barra-nom,.barra.no-sirve .barra-precio{color:var(--txt-faint)}

.badge-mejor,.badge-veces{
  position:absolute;right:11px;font-size:11.5px;font-weight:700;
  letter-spacing:.03em;white-space:nowrap;
}
.badge-mejor{color:var(--acc)}
.badge-veces{color:var(--warn)}
.badge-fuera{color:var(--bad);font-size:11px}

/* Fuera de presupuesto: se atenúa, NO se esconde. Esconder opciones sería
   dejar de ser un comparador y pasar a ser un escaparate. */
.barra.fuera{opacity:.42}
.barra.fuera .barra-fill{filter:grayscale(.7)}
.barra.fuera:hover{opacity:.75}

.presu-ok,.presu-ko{
  margin-top:14px;padding:13px 16px;border-radius:10px;font-size:14.5px;
  color:var(--txt-dim);
}
.presu-ok{background:var(--acc-dim);border:1px solid rgba(62,224,138,.28)}
.presu-ok strong{color:var(--acc)}
.presu-ko{background:rgba(255,107,107,.09);border:1px solid rgba(255,107,107,.3)}
.presu-ko strong{color:var(--bad)}

@media(max-width:600px){
  .barra{grid-template-columns:1fr 74px;grid-template-areas:"nom precio" "pista pista";gap:4px 10px}
  .barra-nom{grid-area:nom;white-space:normal}
  .barra-precio{grid-area:precio}
  .barra-pista{grid-area:pista;height:28px;margin-bottom:6px}
}

/* ===== Comparison table ===== */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:22px}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:540px}
th,td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line)}
th{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--txt-faint);font-weight:700;
}
td{color:var(--txt-dim)}
td:first-child{color:var(--txt);font-weight:600}
tr.hl td{background:var(--acc-dim);color:var(--txt)}
tr.hl td:first-child{color:var(--acc);font-weight:800}
.price{font-variant-numeric:tabular-nums;font-weight:700;color:var(--txt)}
.tbl-note{font-size:12.5px;color:var(--txt-faint);margin:10px 0 0}

/* ===== Precio final (cierre antes del botón) ===== */
.precio-final{
  margin-top:24px;padding-top:22px;border-top:1px solid var(--line);
}
.pf-tit{
  font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--txt-dim);margin-bottom:13px;
}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:640px){.pf-grid{grid-template-columns:1fr}}
.pf-item{
  background:var(--card-2);border:1px solid var(--line);border-radius:11px;
  padding:15px 16px;display:flex;flex-direction:column;gap:3px;
}
.pf-lbl{font-size:12px;font-weight:600;color:var(--txt-faint);text-transform:uppercase;letter-spacing:.04em}
.pf-val{font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--txt);line-height:1.15}
.pf-val small{font-size:.5em;font-weight:700;color:var(--txt-dim)}
.pf-nota{font-size:12.5px;color:var(--txt-faint)}

.pf-item.pf-destaca{border-color:rgba(34,195,255,.35);background:rgba(34,195,255,.07)}
.pf-item.pf-destaca .pf-val{color:var(--acc-2)}
.pf-item.pf-mejor{border-color:rgba(62,224,138,.35);background:var(--acc-dim)}
.pf-item.pf-mejor .pf-val{color:var(--acc)}
.pf-pie{font-size:13px;color:var(--txt-faint);margin:12px 0 0}

/* ===== CTA ===== */
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(180deg,#4bea97,#2ec97a);color:#052614;
  text-decoration:none;font-family:var(--font-display);
  font-weight:700;font-size:16.5px;padding:15px 30px;border-radius:12px;
  transition:.18s;border:none;cursor:pointer;letter-spacing:-.01em;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 8px 22px -8px rgba(62,224,138,.55);
}
.cta:hover{
  background:linear-gradient(180deg,#5cf0a3,#37d987);transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.34) inset, 0 12px 28px -8px rgba(62,224,138,.7);
}
.cta:active{transform:translateY(0)}
.cta-row{margin-top:22px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.cta-fine{font-size:12.5px;color:var(--txt-faint);margin:0}

/* ===== Sections ===== */
section{padding:52px 0}
h2{font-family:var(--font-display);font-size:clamp(24px,3.7vw,34px);
  letter-spacing:-.028em;margin:0 0 10px;font-weight:700;line-height:1.15}
.sec-sub{color:var(--txt-dim);margin:0 0 26px;font-size:16px}
h3{font-family:var(--font-display);font-size:17.5px;margin:0 0 7px;
  font-weight:600;letter-spacing:-.015em}

/* FAQ */
details{
  background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:16px 18px;margin-bottom:9px;
}
details[open]{border-color:var(--line-2)}
summary{
  cursor:pointer;font-weight:700;font-size:15.5px;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--acc);font-size:21px;font-weight:400;flex-shrink:0}
details[open] summary::after{content:"\2212"}
details p{color:var(--txt-dim);font-size:15px;margin:11px 0 0}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:22px;box-shadow:var(--sombra);transition:.18s;
}
.card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.card p{color:var(--txt-dim);font-size:14.5px;margin:0}

/* ===== Enlace a la guía desde la calculadora ===== */
.guia-link-wrap{padding:34px 0 0}
.guia-link{
  display:flex;align-items:center;gap:16px;text-decoration:none;
  background:var(--card);border:1px solid var(--line-2);border-radius:13px;
  padding:19px 22px;transition:.15s;
}
.guia-link:hover{border-color:var(--acc);background:#182333;transform:translateY(-1px)}
.guia-ico{font-size:27px;line-height:1;flex-shrink:0}
.guia-link strong{display:block;color:var(--txt);font-size:16.5px;letter-spacing:-.01em}
.guia-link small{display:block;color:var(--txt-dim);font-size:13.5px;margin-top:3px;line-height:1.45}
.guia-flecha{margin-left:auto;color:var(--acc);font-size:22px;flex-shrink:0}
@media(max-width:600px){
  .guia-link{padding:16px}
  .guia-flecha{display:none}
}

/* ===== Tabla maestra de comparativa ===== */
.tabla-maestra{min-width:640px}
.tabla-maestra th:first-child{width:34%}
.tabla-maestra td:first-child{color:var(--txt);font-weight:700;line-height:1.3}
.tabla-maestra td small,.tabla-maestra th small{
  display:block;font-weight:400;font-size:12px;color:var(--txt-faint);margin-top:3px;
}
.tabla-maestra td.price{color:var(--txt);font-weight:700;white-space:nowrap}
.tabla-maestra td.price small{font-weight:400;color:var(--txt-faint);white-space:normal}
.tabla-maestra td.nd{color:var(--txt-faint);font-style:italic}
.tabla-maestra tr.hl td.price{color:var(--acc)}
.tabla-maestra tr.hl td.price small{color:rgba(62,224,138,.75)}
.ver-gana{
  color:var(--acc);font-weight:800;font-size:15.5px;margin:0 0 8px!important;
}

/* ===== Artículo de guía ===== */
.articulo{max-width:760px;padding-top:34px;padding-bottom:20px}
.miga{font-size:13px;color:var(--txt-faint);margin-bottom:18px}
.miga a{color:var(--txt-dim);text-decoration:none}
.miga a:hover{color:var(--acc-2)}
.articulo h1{text-align:left;font-size:clamp(28px,5vw,42px);margin-bottom:14px}
.art-sub{text-align:left;margin:0;font-size:clamp(16px,2.4vw,19px)}
.art-meta{font-size:13px;color:var(--txt-faint);margin:12px 0 0}

.indice{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:20px 24px;margin:30px 0 8px;
}
.indice-tit{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--txt-faint);margin-bottom:11px;
}
.indice ol{margin:0;padding-left:20px;color:var(--txt-faint)}
.indice li{margin-bottom:6px;font-size:14.5px}
.indice a{color:var(--txt-dim);text-decoration:none}
.indice a:hover{color:var(--acc-2)}

.articulo h2{
  font-size:clamp(21px,3.2vw,27px);margin:40px 0 14px;scroll-margin-top:78px;
}
.articulo p{color:var(--txt-dim);font-size:16px;margin:0 0 15px}
.articulo strong{color:var(--txt)}
.articulo ul{color:var(--txt-dim);font-size:16px;padding-left:22px;margin:0 0 15px}
.articulo li{margin-bottom:10px}
.articulo code{
  background:var(--card-2);border:1px solid var(--line);border-radius:5px;
  padding:1px 6px;font-size:.88em;color:var(--acc-2);
}
.cta-inline{
  background:var(--acc-dim);border:1px solid rgba(62,224,138,.28);
  border-radius:10px;padding:14px 17px;margin:20px 0!important;
}
.cta-inline a{color:var(--acc);font-weight:700;text-decoration:none}
.cta-inline a:hover{text-decoration:underline}

.art-cierre{margin-top:44px;padding-top:8px}
.art-cta{
  margin:40px 0 10px;padding:26px;border-radius:13px;
  background:linear-gradient(160deg,#132132,#0f1826);border:1px solid var(--line-2);
}
.art-cta h3{font-size:20px;margin-bottom:9px}
.art-cta p{margin-bottom:19px}

/* ===== Fichas de hosting: pros y contras ===== */
.lista-si,.lista-no{list-style:none;padding-left:0}
.lista-si li,.lista-no li{
  position:relative;padding-left:32px;margin-bottom:11px;
}
.lista-si li::before,.lista-no li::before{
  position:absolute;left:0;top:-1px;font-size:17px;font-weight:800;
}
.lista-si li::before{content:"✓";color:var(--acc)}
.lista-no li::before{content:"✕";color:var(--warn)}
.veredicto-final{
  background:var(--card);border-left:3px solid var(--acc);
  border-radius:0 11px 11px 0;padding:16px 20px;font-size:16.5px!important;
  color:var(--txt)!important;
}

/* ===== Tarjetas de oferta ===== */
.ofertas{display:flex;flex-direction:column;gap:16px}
.oferta{
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--line-2);
  border-radius:14px;padding:22px 24px;box-shadow:var(--sombra);
}
.oferta.ok{border-left-color:var(--acc)}
.oferta.warn{border-left-color:var(--warn)}
.oferta.bad{border-left-color:var(--bad)}

.of-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.of-host{
  font-size:13px;font-weight:700;color:var(--txt-dim);text-decoration:none;
  letter-spacing:.02em;
}
.of-host:hover{color:var(--acc-2)}
.of-badge{
  font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 10px;border-radius:100px;white-space:nowrap;
}
.oferta.ok   .of-badge{color:var(--acc); background:var(--acc-dim);            border:1px solid rgba(62,224,138,.3)}
.oferta.warn .of-badge{color:var(--warn);background:rgba(255,181,71,.1);       border:1px solid rgba(255,181,71,.32)}
.oferta.bad  .of-badge{color:var(--bad); background:rgba(255,107,107,.1);      border:1px solid rgba(255,107,107,.32)}

.oferta h3{font-size:20px;margin:0 0 10px}
.of-caduca{font-size:13px;color:var(--warn);margin:0 0 9px;font-weight:600}
.of-resumen{color:var(--txt-dim);font-size:15px;margin:0 0 13px}

.of-codigo{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;
  background:var(--card-2);border:1px dashed var(--line-2);border-radius:9px;
  padding:8px 14px;
}
.of-codigo span{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--txt-faint);font-weight:700}
.of-codigo code{
  font-family:var(--font-display);font-size:15px;font-weight:700;
  color:var(--acc-2);letter-spacing:.06em;
}

.of-letra{
  background:var(--bg-2);border-radius:10px;padding:13px 16px;margin-bottom:13px;
}
.of-letra-tit{
  display:block;font-size:11px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--txt-faint);margin-bottom:6px;
}
.of-letra p{margin:0;font-size:14px;color:var(--txt-dim);line-height:1.55}
.of-consejo{font-size:14.5px;color:var(--txt-dim);margin:0 0 16px}
.of-consejo strong{color:var(--txt)}
.of-cta .cta{font-size:15px;padding:12px 24px}
.of-cta .cta-ghost{font-size:14.5px;padding:12px 22px}

@media(max-width:600px){
  .oferta{padding:18px}
  .of-top{flex-direction:column;align-items:flex-start;gap:7px}
}

/* ===== Footer ===== */
footer{border-top:1px solid var(--line);padding:34px 0;margin-top:20px}
footer p{font-size:13px;color:var(--txt-faint);margin:0 0 9px}
.disclosure{
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;font-size:13px;color:var(--txt-dim);margin-bottom:18px;
}