/* Eron: hoja de estilos única. Sin estilos en línea en ningún HTML (la CSP los bloquea).
   Colores: TODOS salen de los tokens de abajo. Para cambiar de paleta basta con tocar los dos bloques de tokens
   (oscuro = por defecto, claro) y el bloque "Bloques siempre oscuros". */

@font-face{font-family:"Barlow Condensed";src:url(fuentes/barlow-condensed-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fuentes/barlow-condensed-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(fuentes/atkinson-hyperlegible-next-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(fuentes/atkinson-hyperlegible-next-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fuentes/jetbrains-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---------- Tokens: tema OSCURO (por defecto) ---------- */
:root{
  color-scheme:dark;
  --fondo:#0A121A;          /* mesa */
  --fondo-2:#101C29;        /* bastidor, cabecera de tabla */
  --superficie:#142334;     /* tarjetas y paneles elevados */
  --superficie-2:#1A2D42;   /* hover */
  --campo:#0A121A;          /* fondo de los campos del formulario */
  --texto:#E8EFF5;
  --texto-inverso:#0A121A;  /* texto sobre fondo "texto" (botón secundario en hover, rótulos) */
  --texto-2:#A8B9C8;
  --linea:#243A50;          /* filetes decorativos */
  --borde:#5D7D9A;          /* bordes de componentes (≥3:1 contra el fondo) */
  --acento:#5AB2FF;         /* relleno del acento: botón principal, sellos */
  --acento-tinta:#04131F;   /* texto sobre el relleno del acento */
  --acento-texto:#7CC3FF;   /* acento usado como color de texto/enlace */
  --sombra-tecla:#1F62A3;   /* "grosor" del botón principal */
  --lampara:#5AB2FF;
  --lampara-anillo:#2B78C0;
  --brillo:rgb(90 178 255 / .55);
  --apagado:#1B2E42;        /* piloto apagado */
  --apagado-anillo:#35506A;
  --agujero:rgb(0 0 0 / .55);
  --pantalla:#060C12;
  --banda:#0D1824;
  --pie:#060C12;
  --foco:#8ACBFF;
  --error:#FF9C92;
  --f-disp:"Barlow Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --f-txt:"Atkinson Hyperlegible Next","Segoe UI",system-ui,Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
}

/* ---------- Tokens: tema CLARO (sistema en claro, o elegido con el botón). Apagado a propósito: no es blanco. ---------- */
@media (prefers-color-scheme:light){
  :root:not([data-tema="oscuro"]){
    color-scheme:light;
    --fondo:#D3DBE0;--fondo-2:#C3CED6;--superficie:#E6EBEF;--superficie-2:#EEF2F5;--campo:#F3F6F8;
    --texto:#0B1721;--texto-inverso:#E6EBEF;--texto-2:#334657;--linea:#9FB0BC;--borde:#0B1721;
    --acento:#1B66D6;--acento-tinta:#FFFFFF;--acento-texto:#0F4CA8;--sombra-tecla:#0B1721;
    --lampara:#2E7FEA;--lampara-anillo:#0F4CA8;--brillo:rgb(46 127 234 / .45);
    --apagado:#B7C3CC;--apagado-anillo:#8597A5;--agujero:rgb(11 23 33 / .35);
    --pantalla:#0B1622;--banda:#0E1A26;--pie:#09121B;--foco:#0B1721;--error:#A5281A;
  }
}
:root[data-tema="claro"]{
  color-scheme:light;
  --fondo:#D3DBE0;--fondo-2:#C3CED6;--superficie:#E6EBEF;--superficie-2:#EEF2F5;--campo:#F3F6F8;
  --texto:#0B1721;--texto-inverso:#E6EBEF;--texto-2:#334657;--linea:#9FB0BC;--borde:#0B1721;
  --acento:#1B66D6;--acento-tinta:#FFFFFF;--acento-texto:#0F4CA8;--sombra-tecla:#0B1721;
  --lampara:#2E7FEA;--lampara-anillo:#0F4CA8;--brillo:rgb(46 127 234 / .45);
  --apagado:#B7C3CC;--apagado-anillo:#8597A5;--agujero:rgb(11 23 33 / .35);
  --pantalla:#0B1622;--banda:#0E1A26;--pie:#09121B;--foco:#0B1721;--error:#A5281A;
}

/* ---------- Bloques siempre oscuros (terminal, ficha, franja de método, plan destacado, cuadro final, pie) ---------- */
.pantalla,.banda,.pie,.cta-final,.plan.destacado{
  --texto:#E8EFF5;--texto-inverso:#060C12;--texto-2:#A8B9C8;--linea:#25405A;--borde:#5D7D9A;
  --acento:#5AB2FF;--acento-tinta:#04131F;--acento-texto:#7CC3FF;--sombra-tecla:#1F62A3;
  --lampara:#5AB2FF;--lampara-anillo:#2B78C0;--brillo:rgb(90 178 255 / .55);
  --apagado:#1B2E42;--apagado-anillo:#35506A;--foco:#8ACBFF;
  color:var(--texto)
}
.pantalla{background:var(--pantalla)}
.banda{background:var(--banda);border-block:1px solid var(--linea)}
.pie{background:var(--pie)}
.cta-final{background:var(--banda);border:1px solid var(--linea)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--fondo);color:var(--texto);font:400 1.0625rem/1.6 var(--f-txt);text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
h1,h2,h3{font-family:var(--f-disp);font-weight:600;line-height:1.05;margin:0 0 .5em;text-wrap:balance}
h1{font-weight:700}
h2{font-size:clamp(2rem,4.6vw,3.1rem)}
h3{font-size:1.6rem}
p{margin:0 0 1em;max-width:66ch}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:.08em}
a:hover{text-decoration-thickness:.18em}
:focus-visible{outline:3px solid var(--foco);outline-offset:3px;border-radius:2px}
::selection{background:var(--acento);color:var(--acento-tinta)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.contenedor{width:min(100% - 2rem,72rem);margin-inline:auto}
.saltar{position:absolute;left:1rem;top:-5rem;z-index:100;background:var(--texto);color:var(--texto-inverso);padding:.75rem 1rem;border-radius:4px}
.saltar:focus{top:1rem}
mark.pendiente{background:var(--acento);color:var(--acento-tinta);padding:0 .3em;border-radius:2px;font:inherit}

/* ---------- Pilotos (indicadores) ---------- */
.piloto{--p-bg:var(--apagado);--p-sombra:inset 0 1px 2px rgb(0 0 0 / .45),0 0 0 1px var(--apagado-anillo);
  display:inline-block;flex:none;width:.8rem;height:.8rem;border-radius:50%;
  background:var(--p-bg);box-shadow:var(--p-sombra);transition:background-color .35s,box-shadow .35s}
.piloto.on{--p-bg:var(--lampara);--p-sombra:inset 0 -2px 3px rgb(0 0 0 / .28),inset 0 1px 1px rgb(255 255 255 / .6),0 0 0 1px var(--lampara-anillo),0 0 .8rem var(--brillo)}

/* ---------- Botones ---------- */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3rem;padding:.7rem 1.35rem;
  font:700 1.0625rem/1.2 var(--f-txt);text-decoration:none;color:var(--texto);
  border:2px solid var(--borde);border-radius:4px;background:transparent;cursor:pointer;
  transition:background-color .15s,color .15s,transform .1s,box-shadow .1s}
.boton:hover{background:var(--texto);color:var(--texto-inverso)}
.boton-principal{background:var(--acento);color:var(--acento-tinta);border-color:var(--acento);box-shadow:0 .2rem 0 var(--sombra-tecla)}
.boton-principal:hover{background:var(--acento);color:var(--acento-tinta);transform:translateY(-1px);box-shadow:0 .3rem 0 var(--sombra-tecla)}
.boton-principal:active{transform:translateY(.15rem);box-shadow:0 .05rem 0 var(--sombra-tecla)}

/* ---------- Cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:50;background:var(--fondo);border-bottom:1px solid var(--linea)}
.cabecera .contenedor{display:flex;align-items:center;justify-content:space-between;gap:.25rem 1rem;min-height:4rem}
.cabecera-der{display:flex;align-items:center;gap:.5rem}
.marca{display:inline-flex;align-items:center;gap:.4rem;font:700 2.1rem/1 var(--f-disp);letter-spacing:.01em;text-decoration:none}
.marca .piloto{width:.6rem;height:.6rem;margin-top:.45rem}
.menu ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.1rem .5rem}
.menu a{display:block;padding:.55rem .75rem;font-weight:700;text-decoration:none;border-radius:4px}
.menu a:hover{text-decoration:underline;text-decoration-thickness:.12em}
.menu .menu-contacto{background:var(--acento);color:var(--acento-tinta);border:2px solid var(--acento);box-shadow:0 .15rem 0 var(--sombra-tecla)}
.menu-boton{display:none}
.tema-boton{display:none}
@media (scripting:enabled){
  .tema-boton{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;color:var(--texto);background:transparent;border:2px solid var(--borde);border-radius:50%;cursor:pointer}
  .tema-boton:hover{background:var(--texto);color:var(--texto-inverso)}
  .tema-boton svg{width:1.25rem;height:1.25rem}
}
@supports selector(:popover-open){
  .menu-boton{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.4rem 1rem;font:700 1rem var(--f-txt);color:var(--texto);background:transparent;border:2px solid var(--borde);border-radius:4px;cursor:pointer}
  .menu{position:fixed;inset:4.25rem 1rem auto 1rem;width:auto;margin:0;padding:.75rem;background:var(--superficie);color:var(--texto);border:2px solid var(--borde);border-radius:6px;box-shadow:0 .4rem 0 rgb(0 0 0 / .3)}
  .menu ul{flex-direction:column;gap:.25rem}
  .menu a{padding:.8rem 1rem}
  @media (min-width:60rem){
    .menu-boton{display:none}
    .menu,.menu:not(:popover-open){position:static;display:block;inset:auto;margin:0;padding:0;background:none;border:0;box-shadow:none;overflow:visible;width:auto;height:auto}
    .menu ul{flex-direction:row;align-items:center;gap:.1rem .25rem}
    .menu a{padding:.55rem .75rem}
  }
}

/* ---------- Regleta lateral de pilotos + progreso ---------- */
.regleta{display:none}
@media (min-width:81.25rem){
  .regleta{display:block;position:fixed;left:1rem;top:50%;translate:0 -50%;z-index:40}
  .regleta ul{list-style:none;margin:0;padding:.85rem .5rem;display:grid;gap:.4rem;background:var(--superficie);border:1px solid var(--linea);border-radius:999px}
  .regleta a{position:relative;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%}
  .regleta .rotulo{position:absolute;left:calc(100% + .7rem);top:50%;translate:0 -50%;padding:.3rem .65rem;border-radius:4px;background:var(--texto);color:var(--texto-inverso);font:.8125rem/1 var(--f-mono);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
  .regleta a:hover .rotulo,.regleta a:focus-visible .rotulo{opacity:1}
}
.progreso{display:none}
@media (max-width:81.24rem) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .progreso{display:block;position:fixed;inset:0 0 auto 0;height:3px;z-index:60;background:var(--acento);transform-origin:0 50%;animation:avance linear both;animation-timeline:scroll(root)}
    @keyframes avance{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
}

/* ---------- Secciones ---------- */
.seccion{padding-block:clamp(3rem,7vw,5.5rem)}
.seccion-cab{max-width:44rem;margin-bottom:2.5rem}
.lead{font-size:clamp(1.125rem,2.2vw,1.3rem);color:var(--texto-2);max-width:40rem}
.banda h2,.banda h3,.cta-final h2,.ficha h3,.pie h2{color:#fff}
.dos{display:grid;gap:2.5rem}
@media (min-width:56rem){.dos{grid-template-columns:1fr 1fr;gap:4rem;align-items:start}}
.dos h2{font-size:clamp(1.8rem,3.4vw,2.4rem)}
#problema h2,#sobre-mi h2,#contacto h2{font-size:clamp(2rem,4.6vw,3.1rem)}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(2rem,6vw,4.5rem) clamp(3.5rem,7vw,5.5rem)}
.hero .contenedor{display:grid;gap:2.75rem}
@media (min-width:56rem){.hero .contenedor{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:4rem}}
.hero h1{font-size:clamp(2.7rem,7.4vw,4.75rem);margin-bottom:.45em;line-height:1}
.acciones{display:flex;flex-wrap:wrap;gap:1rem;margin-block:1.75rem 1.25rem}
.nota{font:.875rem/1.55 var(--f-mono);color:var(--texto-2);max-width:none}

/* Bastidor de rack: hueco con orejas perforadas */
.rack{position:relative;background:var(--fondo-2);border:1px solid var(--linea);border-radius:8px;padding:.9rem 1.9rem}
.rack::before,.rack::after{content:"";position:absolute;top:.5rem;bottom:.5rem;width:1.1rem;
  background:radial-gradient(circle,var(--agujero) 0 .2rem,transparent .23rem) center top/100% 1.5rem repeat-y}
.rack::before{left:.4rem}
.rack::after{right:.4rem}
@media (min-width:40rem){.rack{padding-inline:2.2rem}}

/* Terminal de ejemplo */
.terminal{border-radius:4px;overflow:hidden;border:1px solid var(--linea)}
.terminal-barra{display:flex;align-items:center;gap:.6rem;padding:.6rem .9rem;border-bottom:1px solid var(--linea);color:var(--texto-2);font:.78rem/1.3 var(--f-mono)}
.etiqueta-ejemplo{margin-left:auto;flex:none;border:1px solid var(--acento);color:var(--acento-texto);padding:.05rem .55rem;border-radius:999px}
.terminal-cuerpo{padding:1rem .9rem 1.15rem;font:.8125rem/1.8 var(--f-mono);min-height:15.5rem}
@media (max-width:30rem){.terminal-cuerpo{font-size:.72rem}}
.terminal-cuerpo p{margin:0;max-width:none}
.terminal .linea{display:flex;align-items:baseline;gap:.5rem;transition:opacity .3s}
.terminal .relleno{flex:1;min-width:.75rem;border-bottom:1px dotted #46627C;translate:0 -.3em}
.terminal .ok{color:var(--acento-texto);white-space:nowrap}
.terminal .prompt{color:var(--texto-2)}
.terminal .resumen{margin-top:.6rem;color:#fff}
.terminal .cmd .escribiendo::after{content:"";display:inline-block;width:.55em;height:1.05em;margin-left:.15em;vertical-align:-.15em;background:var(--acento)}
@media (prefers-reduced-motion:no-preference){
  .terminal .escribiendo::after{animation:parpadeo 1s steps(1) infinite}
  @keyframes parpadeo{50%{opacity:0}}
}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .terminal [data-paso]{opacity:0}
  .terminal [data-paso].mostrada{opacity:1}
  .franja .piloto.on:not(.encendido){--p-bg:var(--apagado);--p-sombra:inset 0 1px 2px rgb(0 0 0 / .45),0 0 0 1px var(--apagado-anillo)}
}
.franja{margin:.85rem 0 .1rem;padding:.8rem .9rem;background:var(--superficie);border:1px solid var(--linea);border-radius:4px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem 1rem;list-style:none}
@media (min-width:30rem){.franja{grid-template-columns:repeat(3,1fr)}}
.franja li{display:flex;align-items:center;gap:.55rem;font:.75rem/1.2 var(--f-mono);color:var(--texto)}

/* ---------- Problema ---------- */
.registro{list-style:none;margin:0;padding:0;background:var(--superficie);border:2px solid var(--borde);border-radius:6px}
.registro li{display:flex;gap:1rem;align-items:flex-start;padding:1rem 1.25rem;border-top:1px solid var(--linea)}
.registro li:first-child{border-top:0}
.registro .piloto{margin-top:.5rem}

/* ---------- Servicios: unidades de rack ---------- */
.unidades{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.unidad{position:relative;display:grid;grid-template-columns:1fr;gap:.7rem;padding:.9rem 1rem;background:var(--superficie);border:2px solid var(--borde);border-radius:4px}
.unidad .modulo{width:6.5rem}
@media (min-width:40rem){.unidad{grid-template-columns:7.5rem 1fr;gap:1.5rem;align-items:center;padding:.9rem 1.5rem .9rem 1rem}.unidad .modulo{width:100%}}
.unidad h3{font-size:1.55rem;margin:0 0 .15rem}
.unidad h3 a{text-decoration:none}
.unidad p{margin:0;color:var(--texto-2);font-size:1rem}
.unidad a::after{content:"";position:absolute;inset:0}
.unidad:hover{background:var(--superficie-2)}
.unidad:hover h3 a{text-decoration:underline;text-decoration-thickness:.12em}
.unidad:focus-within{outline:3px solid var(--foco);outline-offset:3px}
.unidad a:focus-visible{outline:none}
.modulo{width:100%;height:auto}
.m-cuerpo{fill:var(--fondo);stroke:var(--borde);stroke-width:2}
.m-tornillo{fill:var(--apagado-anillo)}
.m-trazo{fill:none;stroke:var(--texto);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.m-relleno{fill:var(--texto)}
.m-ranura{stroke:var(--apagado-anillo);stroke-width:2;stroke-linecap:round}
.m-lampara{fill:var(--apagado);stroke:var(--apagado-anillo);stroke-width:1.2}
.m-lampara.on{fill:var(--lampara);stroke:var(--lampara-anillo)}

/* ---------- Método ---------- */
.pasos{list-style:none;counter-reset:paso;margin:0;padding:0;display:grid;gap:2rem}
@media (min-width:56rem){.pasos{grid-template-columns:repeat(4,1fr);gap:2rem}}
.paso{counter-increment:paso;border-top:3px solid var(--acento);padding-top:1rem}
.paso::before{content:counter(paso);display:block;font:700 3rem/1 var(--f-disp);color:var(--acento-texto);margin-bottom:.4rem}
.paso h3{font-size:1.5rem}
.paso p{color:var(--texto-2);margin:0}

/* ---------- Planes ---------- */
.planes{display:grid;gap:1.25rem;margin-bottom:3.5rem}
@media (min-width:56rem){.planes{grid-template-columns:repeat(3,1fr);align-items:stretch;padding-top:1.25rem}}
.plan{display:flex;flex-direction:column;padding:1.6rem;background:var(--superficie);border:2px solid var(--borde);border-radius:6px}
.plan h3{font-size:2rem;margin-bottom:.15em}
.plan .para{color:var(--texto-2);font-size:1rem;margin-bottom:1.1rem}
.plan.destacado{background:var(--pantalla);border-color:var(--acento);box-shadow:0 .4rem 0 var(--acento)}
.plan.destacado h3{color:#fff}
@media (min-width:56rem){.plan.destacado{margin-top:-1.25rem;padding-top:2.85rem}}
.sello{align-self:flex-start;margin-bottom:.8rem;padding:.1rem .7rem;border-radius:999px;background:var(--acento);color:var(--acento-tinta);font:700 .8125rem/1.6 var(--f-txt)}
.precio{margin:0 0 1.2rem;font:700 2.6rem/1 var(--f-disp)}
.precio small{font:.875rem var(--f-mono);margin-left:.4rem;opacity:.85}
.plan ul{list-style:none;margin:0 0 1.75rem;padding:0;display:grid;gap:.65rem}
.plan li{display:flex;gap:.75rem;font-size:1rem}
.plan li .piloto{width:.65rem;height:.65rem;margin-top:.5rem}
.plan .boton{margin-top:auto}
.tabla-puntual{width:100%;border-collapse:collapse;background:var(--superficie);border:2px solid var(--borde)}
.tabla-puntual caption{text-align:left;font:600 1.7rem/1.1 var(--f-disp);margin-bottom:.7rem}
.tabla-puntual th,.tabla-puntual td{padding:.9rem 1.1rem;text-align:left;border-top:1px solid var(--linea);font-weight:400;vertical-align:baseline}
.tabla-puntual thead th{border-top:0;background:var(--fondo-2);font:.8125rem/1.3 var(--f-mono)}
.tabla-puntual td:last-child,.tabla-puntual thead th:last-child{text-align:right;white-space:nowrap;font-family:var(--f-mono);font-size:.95rem}
.pie-tabla{margin-top:1rem;font-size:.9375rem;color:var(--texto-2)}

/* ---------- Sobre mí ---------- */
.ficha{padding:1.4rem 1.5rem;border-radius:4px;font:.875rem/1.6 var(--f-mono);border:1px solid var(--linea)}
.ficha h3{font:600 1.4rem/1.1 var(--f-disp);margin-bottom:1rem}
.ficha dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.25rem;margin:0}
.ficha dt{color:var(--texto-2)}
.ficha dd{margin:0}

/* ---------- Listas de contenido ---------- */
.lista{list-style:none;margin:0 0 1.25rem;padding:0;display:grid;gap:.8rem}
.lista li{display:flex;gap:.85rem}
.lista .piloto{margin-top:.5rem}
.lista-pasos{list-style:none;counter-reset:n;margin:0;padding:0;display:grid;gap:1rem}
.lista-pasos li{counter-increment:n;display:grid;grid-template-columns:2.25rem 1fr;gap:.75rem}
.lista-pasos li::before{content:counter(n);display:grid;place-items:center;width:2rem;height:2rem;margin-top:.1rem;border:2px solid var(--borde);border-radius:50%;font:700 .9rem var(--f-mono)}

/* ---------- FAQ ---------- */
.faq{max-width:52rem}
.faq details{border-top:1px solid var(--borde)}
.faq details:last-child{border-bottom:1px solid var(--borde)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 0;cursor:pointer;list-style:none;font:600 1.45rem/1.2 var(--f-disp)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:.85rem;height:.85rem;border-radius:50%;background:var(--apagado);box-shadow:inset 0 1px 2px rgb(0 0 0 / .45),0 0 0 1px var(--apagado-anillo);transition:background-color .3s,box-shadow .3s}
.faq details[open] summary::after{background:var(--lampara);box-shadow:inset 0 -2px 3px rgb(0 0 0 / .28),inset 0 1px 1px rgb(255 255 255 / .6),0 0 0 1px var(--lampara-anillo),0 0 .8rem var(--brillo)}
.faq .respuesta{padding:0 0 1.25rem;max-width:44rem}
.faq .respuesta p:last-child{margin-bottom:0}
.banda .faq a{color:var(--acento-texto)}

/* ---------- Contacto y formulario ---------- */
.contacto-directo{display:flex;flex-wrap:wrap;gap:1rem;margin:1.5rem 0}
.formulario{display:grid;gap:1.15rem;padding:1.5rem;background:var(--superficie);border:2px solid var(--borde);border-radius:6px}
.formulario label{display:block;margin-bottom:.3rem;font-weight:700}
.formulario input,.formulario select,.formulario textarea{width:100%;min-height:3rem;padding:.7rem .8rem;font:inherit;color:var(--texto);background:var(--campo);border:2px solid var(--borde);border-radius:4px}
.formulario textarea{min-height:9rem;resize:vertical}
.formulario input:user-invalid,.formulario textarea:user-invalid{border-color:var(--error)}
.ayuda{margin:.3rem 0 0;font-size:.9rem;color:var(--texto-2)}
.casilla{display:flex;gap:.75rem;align-items:flex-start;font-weight:400}
.casilla input{flex:none;width:1.4rem;height:1.4rem;min-height:0;margin-top:.15rem;accent-color:var(--acento)}
.formulario .casilla label{margin:0;font-weight:400}
.trampa{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* ---------- Páginas de servicio y de texto ---------- */
.migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:.2rem .5rem;margin:0 0 1.75rem;padding:0;font:.8125rem/1.4 var(--f-mono)}
.migas li+li::before{content:"/";margin-right:.5rem;color:var(--texto-2)}
.servicio-cab{display:grid;gap:2rem;align-items:center}
@media (min-width:56rem){.servicio-cab{grid-template-columns:1.35fr .65fr;gap:4rem}}
.servicio-cab h1{font-size:clamp(2.4rem,6vw,4rem)}
.servicio-cab .rack{max-width:22rem}
.cta-final{border-radius:6px;padding:clamp(1.5rem,4vw,2.5rem)}
.cta-final h2{font-size:clamp(1.8rem,4vw,2.5rem)}
.cta-final p{color:var(--texto-2)}
.cta-final .precio-puntual{font:1rem var(--f-mono);color:var(--texto)}
.cta-final a:not(.boton){color:var(--acento-texto)}
.otros{font-size:1.6rem;margin:2.5rem 0 .75rem}
.relacionados{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem}
.texto-largo{max-width:46rem}
.texto-largo h1{font-size:clamp(2.4rem,6vw,3.6rem)}
.texto-largo h2{font-size:2rem;margin-top:2.25rem}
.texto-largo h3{font-size:1.4rem;margin-top:1.5rem}
.texto-largo ul{padding-left:1.25rem;max-width:66ch}
.centrado{min-height:60vh;display:grid;align-content:center}
.resultado .contenedor>[id]{display:none}
.resultado .contenedor>[id]:target,.resultado .contenedor>#defecto{display:block}
.resultado:has(:target) .contenedor>#defecto{display:none}

/* ---------- Pie ---------- */
.pie{padding-block:3.25rem 2rem;font-size:.9375rem}
.pie-cuadricula{display:grid;gap:2rem;margin-bottom:2.5rem}
@media (min-width:56rem){.pie-cuadricula{grid-template-columns:1.3fr 1fr 1fr}}
.pie h2{font-size:1.3rem;margin-bottom:.6rem}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.pie a{color:inherit}
.pie .marca{color:#fff}
.pie p{color:var(--texto-2)}
.pie .sin-rastreo{display:flex;align-items:center;gap:.6rem;font:.8125rem/1.4 var(--f-mono);color:var(--texto)}
.pie .pie-legal{max-width:none;padding-top:1.25rem;border-top:1px solid var(--linea);font-size:.875rem}

/* ---------- Revelado al hacer scroll (solo si hay JS y no se pide reducir movimiento) ---------- */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .revela{opacity:0;translate:0 .6rem;transition:opacity .5s ease-out,translate .5s ease-out;transition-delay:calc(var(--i,0) * 70ms)}
  .revela.visto{opacity:1;translate:0 0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}