/* ═══════════════════════════════════════════════════════════════════
   IA para esto — hoja de estilos
   Sin frameworks. Las tipografías se sirven desde aquí (assets/fuentes),
   no desde Google: así ni parpadea el texto ni dependemos de nadie.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --tinta:#0d1117;
  --tinta-media:#3f4657;
  --tinta-suave:#6b7183;
  --papel:#ffffff;
  --fondo:#f7f8fc;
  --fondo-hondo:#eef0f8;
  --linea:#e6e8f0;
  --linea-fuerte:#d4d8e6;

  --marca:#3d5afe;
  --marca-oscura:#2438c9;
  --marca-clara:#7a8cff;
  --marca-tenue:#eef1ff;

  --verde:#0b7a53;
  --verde-tenue:#e6f6ef;
  --ambar:#9a5b08;
  --ambar-tenue:#fdf4e5;

  --radio-s:10px;
  --radio:14px;
  --radio-l:20px;

  /* Sombras en capas: una sombra sola se ve plana y barata. Dos —una cercana
     y dura, otra lejana y difusa— es lo que da profundidad de verdad. */
  --sombra-1:0 1px 2px rgba(13,17,23,.05), 0 1px 1px rgba(13,17,23,.03);
  --sombra-2:0 2px 4px rgba(13,17,23,.04), 0 12px 28px rgba(13,17,23,.07);
  --sombra-3:0 4px 8px rgba(13,17,23,.05), 0 24px 48px rgba(13,17,23,.10);

  --ancho:1120px;
  --ancho-texto:720px;

  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
}

/* Modo oscuro automático: se respeta lo que el visitante tenga en su sistema.
   Solo cambian los colores; el diseño es el mismo. */
@media (prefers-color-scheme: dark){
  :root{
    --tinta:#eef0f6;
    --tinta-media:#b3b9cb;
    --tinta-suave:#8b93a8;
    --papel:#161a26;
    --fondo:#0d1017;
    --fondo-hondo:#11141d;
    --linea:#252a38;
    --linea-fuerte:#333a4c;
    --marca:#7a8cff;
    --marca-oscura:#a3b0ff;
    --marca-tenue:#1a2140;
    --verde:#4ade9f;
    --verde-tenue:#12291f;
    --ambar:#e0a458;
    --ambar-tenue:#2a2113;
    --sombra-1:0 1px 2px rgba(0,0,0,.4);
    --sombra-2:0 2px 4px rgba(0,0,0,.3), 0 12px 28px rgba(0,0,0,.45);
    --sombra-3:0 4px 8px rgba(0,0,0,.35), 0 24px 48px rgba(0,0,0,.5);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--fondo);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--marca-oscura);text-decoration-thickness:1px;text-underline-offset:3px}

.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 24px}
.estrecho{max-width:var(--ancho-texto)}

h1,h2,h3{letter-spacing:-.021em;line-height:1.18;margin:0}
h1{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;line-height:1.1}
h2{font-size:clamp(22px,2.6vw,28px);font-weight:700;margin:0 0 8px}
h3{font-size:19px;font-weight:600;margin:28px 0 8px}
.sub{color:var(--tinta-suave);margin:0 0 22px;font-size:16.5px}

/* ── cabecera ─────────────────────────────────────────────────────── */
.cabecera{
  background:color-mix(in srgb,var(--papel) 82%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--linea);
  position:sticky;top:0;z-index:30;
}
.cabecera .fila{display:flex;align-items:center;gap:20px;padding:15px 0;flex-wrap:wrap}
.logo{
  font-weight:700;font-size:19px;text-decoration:none;color:var(--tinta);
  letter-spacing:-.03em;display:inline-flex;align-items:center;gap:9px;
}
.logo::before{
  content:"";width:26px;height:26px;border-radius:8px;flex:none;
  background:linear-gradient(140deg,var(--marca),var(--marca-clara));
  box-shadow:var(--sombra-1);
}
.logo span{color:var(--marca)}
.cabecera nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.cabecera nav a{
  color:var(--tinta-media);text-decoration:none;font-size:15px;font-weight:500;
  padding:7px 12px;border-radius:99px;
}
.cabecera nav a:hover{color:var(--marca);background:var(--marca-tenue)}

/* ── portada y buscador ───────────────────────────────────────────── */
.portada{
  padding:64px 0 40px;text-align:center;position:relative;overflow:hidden;
  background:
    radial-gradient(70% 120% at 50% -10%, var(--marca-tenue) 0%, transparent 60%),
    linear-gradient(180deg,var(--papel) 0%,var(--fondo) 100%);
  border-bottom:1px solid var(--linea);
}
.portada h1{font-size:clamp(34px,5.6vw,56px);margin:0 0 14px}
.portada .titulo-buscador{
  font-family:var(--serif);font-weight:400;font-size:clamp(26px,4vw,36px);
  letter-spacing:-.015em;margin:0 0 12px;line-height:1.15;
}
.portada p.entradilla{
  color:var(--tinta-media);font-size:18.5px;margin:0 auto 30px;max-width:600px;line-height:1.6;
}

.caja-buscar{position:relative;max-width:680px;margin:0 auto}
.caja-buscar input{
  width:100%;padding:19px 22px 19px 54px;font-size:17px;font-family:inherit;
  border:1px solid var(--linea-fuerte);border-radius:var(--radio-l);
  background:var(--papel);color:var(--tinta);box-shadow:var(--sombra-2);
}
.caja-buscar input::placeholder{color:var(--tinta-suave)}
.caja-buscar input:focus{
  outline:none;border-color:var(--marca);
  box-shadow:var(--sombra-2),0 0 0 4px color-mix(in srgb,var(--marca) 16%,transparent);
}
.caja-buscar .lupa{position:absolute;left:20px;top:50%;transform:translateY(-50%);font-size:19px;opacity:.45}

.ejemplos{margin:16px 0 0;font-size:14.5px;color:var(--tinta-suave)}
.ejemplos button{
  background:var(--papel);border:1px solid var(--linea);border-radius:99px;
  padding:7px 15px;margin:4px 3px;font-size:14.5px;cursor:pointer;
  color:var(--tinta-media);font-family:inherit;box-shadow:var(--sombra-1);
}
.ejemplos button:hover{border-color:var(--marca);color:var(--marca);transform:translateY(-1px)}

#resultados{max-width:680px;margin:16px auto 0;text-align:left}
#resultados .aviso-vacio{
  background:var(--ambar-tenue);border:1px solid color-mix(in srgb,var(--ambar) 30%,transparent);
  border-radius:var(--radio);padding:15px 18px;font-size:15.5px;color:var(--tinta);
}
.res{
  display:block;background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:14px 18px;margin-bottom:9px;text-decoration:none;color:var(--tinta);
  box-shadow:var(--sombra-1);
}
.res:hover{border-color:var(--marca);box-shadow:var(--sombra-2);transform:translateY(-1px)}
.res b{display:block;font-size:16px;font-weight:600}
.res small{color:var(--tinta-suave);font-size:14.5px}
.res .tipo{
  float:right;font-size:12px;font-weight:600;color:var(--marca-oscura);
  background:var(--marca-tenue);border-radius:99px;padding:3px 10px;margin-left:10px;
}

/* ── estructura ───────────────────────────────────────────────────── */
main{padding:46px 0 10px}
section{margin-bottom:56px}

.rejilla{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(288px,1fr))}

.tarjeta{
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio-l);
  padding:22px;text-decoration:none;color:inherit;display:block;box-shadow:var(--sombra-1);
}
.tarjeta:hover{border-color:var(--marca-clara);box-shadow:var(--sombra-3);transform:translateY(-3px)}
.tarjeta h3{margin:0 0 7px;font-size:17.5px;color:var(--tinta);line-height:1.3}
.tarjeta p{margin:0;color:var(--tinta-suave);font-size:15px;line-height:1.55}
.tarjeta .cuantas{display:inline-block;margin-top:14px;font-size:13px;font-weight:600;color:var(--marca)}
.tarjeta.con-foto{padding:0;overflow:hidden}
.tarjeta.con-foto .mini{width:100%;aspect-ratio:1200/630;object-fit:cover;border-bottom:1px solid var(--linea)}
.tarjeta.con-foto h3{margin:18px 22px 7px}
.tarjeta.con-foto p{margin:0 22px}
.tarjeta.con-foto .cuantas{margin:14px 22px 20px}

.etiqueta{display:inline-block;font-size:12.5px;font-weight:600;border-radius:99px;padding:4px 11px;margin-right:6px}
.et-gratis{background:var(--verde-tenue);color:var(--verde)}
.et-prueba{background:var(--marca-tenue);color:var(--marca-oscura)}
.et-pago{background:var(--fondo-hondo);color:var(--tinta-media)}
.et-es{background:var(--verde-tenue);color:var(--verde)}
.et-cat{background:var(--fondo-hondo);color:var(--tinta-suave)}

/* ── página de guía ───────────────────────────────────────────────── */
.migas{font-size:14.5px;color:var(--tinta-suave);margin:0 0 14px}
.migas a{color:var(--tinta-suave);text-decoration:none}
.migas a:hover{color:var(--marca)}
.ficha-problema h1{font-size:clamp(30px,4.6vw,44px);margin:0 0 20px}
.ficha-problema p{font-size:17px;line-height:1.72}

.ilustracion{
  width:100%;aspect-ratio:1200/630;object-fit:cover;border-radius:var(--radio-l);
  border:1px solid var(--linea);margin:0 0 26px;background:var(--marca-tenue);box-shadow:var(--sombra-2);
}

.respuesta-corta{
  background:linear-gradient(180deg,var(--marca-tenue),color-mix(in srgb,var(--marca-tenue) 40%,var(--papel)));
  border:1px solid color-mix(in srgb,var(--marca) 22%,transparent);
  border-left:3px solid var(--marca);
  border-radius:var(--radio);padding:20px 22px;margin:0 0 30px;font-size:17.5px;line-height:1.65;
}
.respuesta-corta strong{
  display:block;margin-bottom:6px;color:var(--marca-oscura);
  text-transform:uppercase;letter-spacing:.06em;font-size:12px;font-weight:700;
}

.aviso-serio{
  background:var(--ambar-tenue);border:1px solid color-mix(in srgb,var(--ambar) 32%,transparent);
  border-left:3px solid var(--ambar);border-radius:var(--radio);
  padding:17px 20px;margin:0 0 28px;font-size:15.5px;line-height:1.6;
}
.aviso-serio strong{
  display:block;margin-bottom:5px;color:var(--ambar);
  text-transform:uppercase;letter-spacing:.06em;font-size:12px;font-weight:700;
}

.opcion{
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio-l);
  padding:22px 24px;margin-bottom:16px;box-shadow:var(--sombra-1);
}
.opcion:hover{box-shadow:var(--sombra-2)}
.opcion .top{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:8px}
.opcion .puesto{
  background:linear-gradient(140deg,var(--marca),var(--marca-clara));color:#fff;
  border-radius:9px;width:28px;height:28px;display:inline-flex;align-items:center;
  justify-content:center;font-size:14px;font-weight:700;flex:none;box-shadow:var(--sombra-1);
}
.opcion h3{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em}
.opcion .porque{margin:10px 0 0;color:var(--tinta-media);font-size:16.5px}
.opcion .porque strong{color:var(--tinta)}
.opcion .precio{font-size:14.5px;color:var(--tinta-suave);margin-top:14px;padding-top:14px;border-top:1px solid var(--linea)}
.opcion .precio .fecha{opacity:.7}

.botones{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.boton{
  display:inline-block;background:var(--marca);color:#fff;text-decoration:none;
  padding:11px 20px;border-radius:var(--radio-s);font-weight:600;font-size:15.5px;box-shadow:var(--sombra-1);
}
.boton:hover{background:var(--marca-oscura);box-shadow:var(--sombra-2);transform:translateY(-1px)}
.boton.secundario{background:var(--papel);color:var(--tinta);border:1px solid var(--linea-fuerte)}
.boton.secundario:hover{background:var(--fondo);border-color:var(--marca-clara)}

.pasos{counter-reset:paso;list-style:none;padding:0;margin:0 0 30px}
.pasos li{counter-increment:paso;position:relative;padding-left:44px;margin-bottom:16px;font-size:17px}
.pasos li::before{
  content:counter(paso);position:absolute;left:0;top:2px;width:29px;height:29px;
  background:var(--marca-tenue);color:var(--marca-oscura);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14.5px;
  border:1px solid color-mix(in srgb,var(--marca) 20%,transparent);
}

details.faq{
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:16px 20px;margin-bottom:10px;box-shadow:var(--sombra-1);
}
details.faq summary{cursor:pointer;font-weight:600;font-size:16.5px;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";float:right;color:var(--marca);font-weight:400;font-size:22px;line-height:1}
details.faq[open] summary::after{content:"\2013"}
details.faq p{margin:12px 0 0;color:var(--tinta-media);font-size:16.5px}

table.comparativa{
  width:100%;border-collapse:collapse;background:var(--papel);
  border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;
  font-size:15.5px;box-shadow:var(--sombra-1);
}
table.comparativa th,table.comparativa td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--linea)}
table.comparativa th{
  background:var(--fondo-hondo);font-size:12.5px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--tinta-suave);font-weight:700;
}
table.comparativa tr:last-child td{border-bottom:none}
.tabla-scroll{overflow-x:auto}

/* El hueco de publicidad no se ve mientras esté vacío: nada de andamios */
.hueco-anuncio{min-height:0;border:0;background:none;margin:0}
.hueco-anuncio:not(:empty){min-height:90px;margin:32px 0}

/* ── pie ──────────────────────────────────────────────────────────── */
.pie{
  background:var(--papel);border-top:1px solid var(--linea);margin-top:56px;
  padding:36px 0;font-size:14.5px;color:var(--tinta-suave);line-height:1.6;
}
.pie a{color:var(--tinta-media);text-decoration:none}
.pie a:hover{color:var(--marca)}
.pie .fila{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:16px}
.pie p{margin:0 0 10px;max-width:760px}

/* ── accesibilidad y detalles ─────────────────────────────────────── */
.saltar{
  position:absolute;left:-9999px;top:0;background:var(--marca);color:#fff;
  padding:11px 18px;border-radius:0 0 var(--radio-s) 0;z-index:50;text-decoration:none;font-weight:600;
}
.saltar:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2.5px solid var(--marca);outline-offset:3px;border-radius:6px;
}
.tarjeta,.res,.boton,.ejemplos button,.opcion,.cabecera nav a{
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease,color .18s ease;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
}
.oculto{display:none !important}

@media (max-width:640px){
  body{font-size:16.5px}
  .portada{padding:40px 0 28px}
  .caja-buscar input{font-size:16px;padding:16px 18px 16px 48px}
  .contenedor{padding:0 18px}
  .opcion{padding:18px}
  main{padding:32px 0 10px}
  section{margin-bottom:42px}
}

/* ── comparador antes / después ───────────────────────────────────── */
.comparador-caja{margin:0 0 32px}
.comparador-caja figcaption{
  margin-top:10px;font-size:14.5px;color:var(--tinta-suave);text-align:center;
}

/* Sin JavaScript: las dos imágenes, una al lado de la otra, con su etiqueta.
   Se entiende igual y no queda ningún hueco raro. */
.comparador{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative;
  border-radius:var(--radio-l);overflow:hidden;border:1px solid var(--linea);
  box-shadow:var(--sombra-2);background:var(--fondo-hondo);
}
.comparador img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.c-etiqueta{
  position:absolute;top:14px;background:rgba(13,17,23,.72);color:#fff;
  font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 12px;border-radius:99px;backdrop-filter:blur(6px);pointer-events:none;
}
.c-eti-antes{left:14px}
.c-eti-despues{right:14px}

/* Con JavaScript: se superponen y aparece la barra que se arrastra */
.comparador.activo{display:block;cursor:col-resize;touch-action:none;user-select:none}
.comparador.activo img{position:absolute;inset:0;height:100%}
.comparador.activo .c-antes{position:relative}
.comparador.activo .c-despues{clip-path:inset(0 0 0 50%)}
.c-barra{
  position:absolute;top:0;bottom:0;width:3px;background:#fff;
  box-shadow:0 0 0 1px rgba(13,17,23,.18),0 2px 12px rgba(13,17,23,.35);
  transform:translateX(-50%);z-index:3;
}
.c-tirador{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;background:#fff;
  box-shadow:0 2px 14px rgba(13,17,23,.32);
  display:flex;align-items:center;justify-content:center;
}
.c-tirador::before{
  content:"";width:15px;height:9px;
  background:
    linear-gradient(90deg,var(--marca) 0 4px,transparent 4px 11px,var(--marca) 11px 15px);
  clip-path:polygon(0 50%,4px 0,4px 100%, 100% 50%, 11px 0, 11px 100%);
}
.c-barra:focus-visible{outline:3px solid var(--marca);outline-offset:4px}

/* ── pasos con imagen ─────────────────────────────────────────────── */
.pasos li.con-foto{padding-left:0;display:grid;gap:14px;margin-bottom:30px}
.pasos li.con-foto::before{position:static;margin-bottom:2px}
.pasos li.con-foto .texto{display:block}
.pasos li.con-foto img{
  width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radio);
  border:1px solid var(--linea);box-shadow:var(--sombra-1);
}

@media (min-width:720px){
  .pasos li.con-foto{grid-template-columns:1fr 1fr;align-items:center}
  .pasos li.con-foto::before{grid-column:1;grid-row:1;margin-bottom:8px}
  .pasos li.con-foto .texto{grid-column:1;grid-row:1;padding-left:42px}
  .pasos li.con-foto img{grid-column:2;grid-row:1}
}