/* ⚠️ REM BASE DE ESTA WEB = 10px (patrón 62.5%), no 16px.
   Medido en producción el 2026-08-09: getComputedStyle(html).fontSize === '10px'.
   Todos los rem de este fichero están escalados ×1.6 para que el diseño mida lo
   que debe. Si algún día se toca el tema y el rem vuelve a 16px, hay que dividir.
   Comprobar SIEMPRE el rem base antes de escribir CSS para una web. */
/* ============================================================
   accesorouter — buscador de routers (landing /archivo/ + widget de fichas)
   Estructura NATIVA de Bricks: las secciones y contenedores los pone Bricks;
   aquí solo van los tokens, las piezas interactivas y la decoración.
   Tokens clonados de la web: marino de cabecera, turquesa de marca, coral de acento.
   ============================================================ */
:root{
  --angi-marino:#16233f; --angi-marino-2:#1e3057; --angi-marino-3:#27406f;
  --angi-turquesa:#1cf2dd; --angi-turquesa-h:#0aa197; --angi-turquesa-bg:#e6fbf9;
  --angi-coral:#f82559; --angi-ambar:#f39c12;
  --angi-tinta:#0f172a; --angi-texto:#33415c; --angi-suave:#64748b;
  --angi-linea:#e3e8ef; --angi-fondo:#f7f9fc;
  --angi-r:14px; --angi-r-s:10px;
  --angi-sombra:0 1px 2px rgba(15,23,42,.06),0 8px 24px -12px rgba(15,23,42,.18);
  --angi-sombra-alta:0 2px 4px rgba(15,23,42,.06),0 18px 40px -16px rgba(15,23,42,.28);
}

/* ---------- HERO (section de Bricks) ---------- */
.angi-hero{
  background:linear-gradient(160deg,var(--angi-marino) 0%,var(--angi-marino-2) 55%,var(--angi-marino-3) 100%);
  color:#dce6f5;position:relative;overflow:hidden;
  padding-block:clamp(3.6rem,5vw,6rem) clamp(4.4rem,6vw,6.8rem)
}
.angi-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.09) 1px,transparent 0);
  background-size:26px 26px;mask-image:linear-gradient(180deg,#000,transparent 75%)}
.angi-hero > *{position:relative;z-index:1}
/* decoración: ondas WiFi arriba a la derecha */
.angi-hero .angi-deco{position:absolute !important;top:-4.8rem;right:-5.6rem;width:min(430px,52vw);
  z-index:0;pointer-events:none;opacity:.9;margin:0;padding:0}
.angi-hero .angi-deco svg,.angi-hero .angi-deco-ondas{max-width:none}
@media(max-width:900px){.angi-hero .angi-deco{width:230px;right:-3.5rem;top:-5.5rem;opacity:.28}}
/* En móvil la onda cruzaba por detrás del H1 y ensuciaba la lectura (medido en directo
   a 375px el 09-08). El SVG trae el posicionamiento en un style inline puesto por el
   árbol de Bricks, así que aquí hace falta !important para poder domarlo. */
@media(max-width:640px){
  .angi-deco-ondas{width:150px !important;top:-2rem !important;right:-2rem !important;opacity:.3 !important}
}

.angi-hero .eyebrow{display:inline-flex;align-items:center;gap:0.72rem;font-size:1.28rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--angi-turquesa);background:rgba(28,242,221,.1);
  border:1px solid rgba(28,242,221,.25);padding:0.56rem 1.12rem;border-radius:100px;margin-bottom:1.36rem}
.angi-hero .angi-h1{color:#fff;font-size:clamp(3.04rem,4.6vw,4.8rem);letter-spacing:-.025em;
  line-height:1.12;margin:0 0 0.88rem;max-width:19ch}
.angi-hero .lede p{font-size:clamp(1.6rem,2vw,1.856rem);max-width:58ch;margin:0 0 2.56rem;color:#b9c9e2}
.angi-hero .lede b{color:#fff;font-weight:600}

/* ---------- BUSCADOR ---------- */
.buscador{position:relative;max-width:640px}
.campo{display:flex;align-items:center;gap:1.12rem;background:#fff;border-radius:var(--angi-r);
  padding:0.32rem 0.56rem 0.32rem 1.6rem;box-shadow:0 20px 45px -20px rgba(0,0,0,.65);
  border:2px solid transparent;transition:border-color .15s,box-shadow .15s}
.campo:focus-within{border-color:var(--angi-turquesa);box-shadow:0 0 0 5px rgba(28,242,221,.22),0 20px 45px -20px rgba(0,0,0,.65)}
.campo svg{flex:none;color:var(--angi-suave)}
.campo input{flex:1;border:0;outline:0;font:inherit;font-size:1.696rem;padding:1.52rem 0;color:var(--angi-tinta);background:none;min-width:0}
.campo input::placeholder{color:#94a3b8}
.limpiar{border:0;background:var(--angi-fondo);color:var(--angi-suave);width:34px;height:34px;
  border-radius:50%;cursor:pointer;font-size:1.76rem;line-height:1;display:none}
.campo.lleno .limpiar{display:block}
.sugerencias{display:flex;flex-wrap:wrap;gap:0.72rem;margin-top:1.44rem;align-items:center}
.sugerencias span{font-size:1.36rem;color:#8fa3c0;margin-right:0.24rem}
.sug{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#dbe7f7;
  padding:0.512rem 1.2rem;border-radius:100px;font-size:1.36rem;cursor:pointer;transition:.15s;font-family:inherit}
.sug:hover{background:rgba(28,242,221,.16);border-color:rgba(28,242,221,.5);color:#fff}
.cifras{display:flex;gap:2.8rem;margin-top:3.04rem;flex-wrap:wrap}
.cifra b{display:block;color:#fff;font-size:2.4rem;font-weight:700;line-height:1.1}
.cifra span{font-size:1.328rem;color:#93a8c7}

/* ---------- PANEL DE RESULTADOS ---------- */
.angi-panel-sec{padding-block:0 !important}
.angi-panel-sec .panel{margin-top:-4.16rem;position:relative;z-index:3;background:#fff;
  border:1px solid var(--angi-linea);border-radius:18px;box-shadow:var(--angi-sombra-alta);padding:1.76rem 1.76rem 2.16rem}
.filtros{display:flex;gap:0.64rem;overflow-x:auto;padding-bottom:0.8rem;margin-bottom:0.56rem}
.chip{flex:none;border:1px solid var(--angi-linea);background:#fff;color:var(--angi-texto);border-radius:100px;
  padding:0.672rem 1.36rem;font-size:1.408rem;cursor:pointer;display:inline-flex;gap:0.64rem;align-items:center;
  transition:.15s;font-family:inherit}
.chip:hover{border-color:var(--angi-turquesa-h);color:var(--angi-turquesa-h)}
.chip[aria-pressed=true]{background:var(--angi-marino);border-color:var(--angi-marino);color:#fff}
.chip i{font-style:normal;font-size:1.2rem;opacity:.65}
.meta-res{font-size:1.36rem;color:var(--angi-suave);margin:0.24rem 0.32rem 1.12rem}
.lista{display:grid;gap:0.96rem;max-height:475px;overflow-y:auto;padding-right:0.32rem}
.item{display:grid;grid-template-columns:1fr auto;gap:0.48rem 1.44rem;align-items:center;text-decoration:none;
  color:inherit;border:1px solid var(--angi-linea);border-radius:var(--angi-r-s);padding:1.2rem 1.44rem;transition:.14s}
.item:hover,.item.sel{border-color:var(--angi-turquesa-h);background:var(--angi-turquesa-bg);transform:translateX(2px)}
.item .nom{font-weight:650;color:var(--angi-tinta);font-size:1.632rem}
.item mark{background:rgba(243,156,18,.28);color:inherit;border-radius:3px;padding:0 .1em}
.item .tags{display:flex;gap:0.56rem;flex-wrap:wrap;margin-top:0.24rem}
.tag{font-size:1.152rem;font-weight:600;padding:0.192rem 0.8rem;border-radius:100px;background:var(--angi-fondo);color:var(--angi-suave)}
.tag.op{background:#eaf1fb;color:#2c5695}
.tag.pronto{background:#fff5e0;color:#9a6b00}
.datos{display:flex;gap:0.56rem;flex-wrap:wrap;justify-self:end}
.dato{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.264rem;background:var(--angi-fondo);
  border:1px solid var(--angi-linea);border-radius:6px;padding:0.32rem 0.72rem;color:var(--angi-tinta);white-space:nowrap}
.dato em{font-style:normal;color:var(--angi-suave);font-family:inherit;margin-right:0.448rem}
.vacio{border:1px dashed var(--angi-linea);border-radius:var(--angi-r-s);padding:2.24rem 1.92rem;
  text-align:center;background:var(--angi-fondo)}
.vacio b{color:var(--angi-tinta)}

/* ---------- SECCIONES DE CONTENIDO ---------- */
.angi-sec{padding-block:clamp(4rem,5vw,6rem)}
.angi-sec.gris{background:var(--angi-fondo);border-block:1px solid var(--angi-linea)}
.angi-sec .intro p{max-width:62ch;margin:0 0 2.56rem}
.tabla-wrap{overflow-x:auto;border:1px solid var(--angi-linea);border-radius:var(--angi-r);
  background:#fff;box-shadow:var(--angi-sombra)}
.tabla-wrap table{border-collapse:collapse;width:100%;min-width:640px;font-size:1.504rem}
.tabla-wrap th,.tabla-wrap td{text-align:left;padding:1.28rem 1.6rem;border-bottom:1px solid var(--angi-linea)}
.tabla-wrap thead th{background:var(--angi-marino);color:#fff;font-size:1.312rem;letter-spacing:.03em;text-transform:uppercase}
.tabla-wrap tbody tr:nth-child(even){background:#fbfcfe}
.tabla-wrap tbody tr:hover{background:var(--angi-turquesa-bg)}
.tabla-wrap td code{font-family:ui-monospace,Menlo,monospace;font-size:1.392rem;background:var(--angi-fondo);
  padding:0.192rem 0.64rem;border-radius:5px}
.tabla-wrap td .op{font-weight:650;color:var(--angi-tinta)}
.nota-tabla{font-size:1.36rem;color:var(--angi-suave);margin-top:1.44rem}

/* ---------- PASOS ---------- */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.6rem;margin-top:0.8rem}
.paso{background:#fff;border:1px solid var(--angi-linea);border-radius:var(--angi-r);
  padding:2.16rem;box-shadow:var(--angi-sombra)}
.paso-icono{display:flex;align-items:center;gap:1.12rem;margin-bottom:1.28rem}
.paso-icono svg{width:40px;height:40px;flex:none}
.paso-n{width:30px;height:30px;flex:none;border-radius:50%;background:var(--angi-marino);
  color:var(--angi-turquesa);display:grid;place-items:center;font-weight:700;font-size:1.472rem}
.paso h3{margin:0 0 0.48rem;font-size:1.76rem}
.paso p{margin:0;font-size:1.504rem}
.pegatina{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);gap:3.2rem;
  align-items:center;margin-top:3.6rem}
.angi-pegatina{width:100%;height:auto;filter:drop-shadow(0 12px 24px rgba(15,23,42,.16))}
@media(max-width:720px){.pegatina{grid-template-columns:1fr;gap:2rem}}
.aviso{display:flex;gap:1.44rem;background:#fff8e8;border:1px solid #f5dfae;border-radius:var(--angi-r-s);
  padding:1.6rem 1.92rem;font-size:1.472rem;margin-top:3.2rem}
.aviso svg{flex:none;color:var(--angi-ambar)}
.aviso p{margin:0}

/* ---------- CTA ---------- */
.cta{background:var(--angi-marino);color:#cfe0f5;border-radius:18px;
  padding:clamp(2.56rem,4vw,3.84rem);text-align:center;align-items:center}
.cta h2{color:#fff}
.cta p{max-width:52ch;margin-inline:auto}
.angi-sec .btn,.cta .bricks-button{background:var(--angi-coral);color:#fff;font-weight:650;
  border-radius:100px;box-shadow:0 10px 24px -10px rgba(248,37,89,.8)}

/* ---------- MÓVIL: el buscador manda ---------- */
@media(max-width:640px){
  /* el container de Bricks se queda sin aire lateral en móvil */
  .angi-hero > .brxe-container,.angi-sec > .brxe-container,.angi-panel-sec > .brxe-container{
    padding-inline:1.84rem}
  .angi-hero{padding-block:2.4rem 4rem}
  .angi-hero .eyebrow{font-size:1.088rem;padding:0.448rem 0.96rem;letter-spacing:.05em}
  .angi-hero .angi-h1{font-size:2.8rem;max-width:none}
  .angi-hero .lede p{font-size:1.552rem;line-height:1.55;margin-bottom:1.84rem}
  .angi-hero .lede .plus{display:none}
  .campo input{font-size:1.6rem;padding:1.36rem 0}
  .sugerencias{gap:0.56rem;margin-top:1.12rem}
  .sugerencias span{width:100%;margin-bottom:0.16rem}
  .sug{font-size:1.28rem;padding:0.448rem 1.04rem}
  .cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:0.96rem;margin-top:2.16rem;
    border-top:1px solid rgba(255,255,255,.13);padding-top:1.6rem}
  .cifra b{font-size:1.92rem}
  .cifra span{font-size:1.152rem;line-height:1.3;display:block}
  .angi-panel-sec .panel{margin-top:-2.72rem;padding:1.36rem 1.36rem 1.6rem;border-radius:14px}
  .item{grid-template-columns:1fr;gap:0.72rem}
  .datos{justify-self:start}
  .lista{max-height:60vh}
  .paso{padding:1.76rem}
}

/* ---------- widget compacto al final de las fichas ---------- */
.angi-widget{background:var(--angi-marino);border-radius:var(--angi-r);padding:1.92rem;color:#cfe0f5;margin:4rem 0 1.6rem}
.angi-widget h3{color:#fff;font-size:2rem;line-height:1.25;margin:0 0 0.56rem}
.angi-widget p{margin:0 0 1.36rem;font-size:1.55rem;color:#b3c6e0}
.angi-widget .campo{padding-left:1.44rem;box-shadow:none}
.angi-widget .lista{max-height:230px;margin-top:1.2rem}
.angi-widget .item{background:#fff}
.angi-w-pie{margin:1.28rem 0 0 !important;font-size:1.36rem}
.angi-w-pie a{color:var(--angi-turquesa)}

/* enlaces a las guías del blog desde las fichas */
.angi-guias{margin:3.2rem 0 -1.6rem;font-size:1.504rem;color:var(--angi-suave);
  border-top:1px solid var(--angi-linea);padding-top:1.6rem}
.angi-guias a{color:var(--angi-turquesa-h);font-weight:600}

/* El panel vive dentro de un container flex de Bricks: sin min-width:0 no se encoge
   por debajo de su contenido y arrastra la página a scroll horizontal en móvil. */
.panel,.lista,.filtros,#filtros,#lista,.tabla-wrap{min-width:0;max-width:100%}
.filtros,#filtros{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.item,.item .nom,.item .dato{min-width:0;overflow-wrap:anywhere}

/* Los headings del árbol de Bricks (brxe-heading) no heredan la escala de la landing:
   un h3 salía a 27px, exactamente igual que los h2, y la jerarquía se perdía
   (medido en directo a 1440px el 09-08). */
.page-id-1443 h3.brxe-heading{font-size:2.1rem;line-height:1.32}

/* onda decorativa del CTA */
.cta .angi-onda-wrap{width:100%;margin-top:2rem;line-height:0}
.angi-onda-cta{width:100%;height:38px;display:block}

/* ---------- jerarquía tipográfica (medida en producción, rem=10px) ---------- */
/* la prosa del tema se queda en 15px: para lectura larga va corta */
.angi-sec .brxe-text p,.angi-sec .intro p,.angi-panel-sec .brxe-text p{font-size:1.65rem;line-height:1.65}
/* las preguntas del FAQ medían 27px, igual que los H2: rompía la jerarquía */
.brxe-accordion-nested h3{font-size:1.9rem;line-height:1.35}
.brxe-accordion-nested .brxe-text p{font-size:1.6rem;line-height:1.65}
.cta p{font-size:1.65rem}
.paso p{font-size:1.55rem;line-height:1.6}
.paso h3{font-size:1.8rem}

/* ── Cabecera de los archivos de categoría ────────────────────────────────────
   La descripción del término no se pintaba en ninguna parte (medido el 09-08 en
   /routers-orange/, que la tenía escrita desde siempre). Ahora la plantilla 1428
   la saca con {term_description} y este bloque le da forma.
   ⚠️ El hero de los archivos es BLANCO, no el marino de la landing: la primera
   versión de este bloque heredó los colores del hero oscuro y dejó el texto a
   1,30:1 y las negritas a 1,00:1 —blanco sobre blanco, invisibles— hasta que se
   midió en directo el 10-08. Los colores de aquí son para fondo claro. */
.angi-cat-intro{max-width:78ch;margin:1.6rem 0 0;font-size:1.62rem;line-height:1.62;color:#2c3a4f}
.angi-cat-intro p{margin:0 0 1.2rem}
.angi-cat-intro p:last-child{margin-bottom:0}
.angi-cat-intro strong{color:#101a2b;font-weight:650}
.angi-cat-intro a{color:#06665f;text-decoration:underline;text-underline-offset:2px}
.angi-cat-intro a:hover{color:#043f3a}
.angi-cat-intro code{font-family:ui-monospace,Menlo,monospace;font-size:.92em;color:#1b2a41;
  background:#eef2f7;border:1px solid #dde5ee;border-radius:4px;padding:.1em .4em}
@media(max-width:640px){.angi-cat-intro{font-size:1.55rem}}