/* ==========================================================================
   dudsonenterprise.com — hoja compartida de las páginas interiores (24)
   Identidad v2 (manual 2026-08-14): marfil de día, carbón de noche, naranja
   eléctrico como único acento. Exclusiva de este dominio.

   ⚠️ AL TOCAR ESTE ARCHIVO, SUBIR EL ?v= EN LAS 24 PÁGINAS QUE LO USAN.
      El .htaccess fuerza no-cache en el HTML, pero NO en el CSS: sin subir la
      versión, se sigue viendo la hoja vieja.

   ⚠️ Los NOMBRES de los tokens no se cambian: los <style> en línea de las
      páginas de pago, soporte, legales y 404 los referencian. Cambian los
      VALORES según el modo; el nombre es el contrato.

   ⚠️ El modo lo decide el navegador (prefers-color-scheme) y lo puede pisar
      la persona con el conmutador (html[data-tema]). Por eso cada bloque de
      noche va DOS veces: para la preferencia del sistema y para la elección
      manual. Si se añade un token, hay que añadirlo en los TRES bloques.

   ⚠️ Contrastes MEDIDOS (no estimados) el 2026-08-14, AA en los dos modos.
      --acc en modo día es el naranja OSCURECIDO #B23A05 (5,3:1 sobre marfil):
      el naranja pleno #FF5C1F da 2,74:1 sobre marfil y NO puede ser texto de
      día. El pleno vive en --naranja y se usa en botones (con texto tinta,
      5,8:1) y resplandores. De noche --acc sí es el pleno (6,25:1 sobre
      carbón). No «corregir» esto a ojo: está medido.

   ⚠️ Sin cian #35B6EC, sin lila, sin menta: retirados el 2026-08-14 con la
      identidad v1. Y sin ámbar #C4642A, que es de la marca personal.
   ========================================================================== */

:root{
  --ink:#F5F1E8;        /* fondo de página — marfil */
  --panel:#FDFBF6;      /* tarjetas */
  --panel-2:#F8F3E7;    /* tarjeta honda / degradados */
  --line:#E4DECE;       /* bordes */
  --line-hi:#C7BFA9;    /* bordes en hover */
  --text:#16171A;       /* titulares y negritas — tinta */
  --muted:#44474F;      /* cuerpo */
  --dim:#5F626B;        /* etiquetas y pies (5,4:1 sobre marfil) */
  --acc:178,58,5;       /* acento en TEXTO y gráficos: naranja tinta #B23A05 */
  --naranja:#FF5C1F;    /* naranja eléctrico pleno: botones y resplandor */
  --apoyo:#1F4E5F;      /* azul petróleo, apoyo puntual */
  --malo:#A9271F;       /* avisos de error (6,2:1 sobre marfil) */
  --nav-fondo:rgba(245,241,232,.82);
  --serif:"Fraunces",Lora,Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
}
/* Noche por preferencia del sistema, salvo que la persona haya elegido día. */
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --ink:#0E0E10; --panel:#16171A; --panel-2:#1B1D21;
    --line:#24262B; --line-hi:#39414A;
    --text:#F4F4F5; --muted:#9AA0A6; --dim:#7E868E;
    --acc:255,92,31; --apoyo:#8FBECD; --malo:#FF9E9E;
    --nav-fondo:rgba(14,14,16,.78);
  }
}
/* Noche elegida a mano: gana a cualquier preferencia del sistema. */
:root[data-tema="oscuro"]{
  --ink:#0E0E10; --panel:#16171A; --panel-2:#1B1D21;
  --line:#24262B; --line-hi:#39414A;
  --text:#F4F4F5; --muted:#9AA0A6; --dim:#7E868E;
  --acc:255,92,31; --apoyo:#8FBECD; --malo:#FF9E9E;
  --nav-fondo:rgba(14,14,16,.78);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; overflow-x:hidden; color:var(--text); font-family:var(--sans); font-size:16px;
  /* Un solo halo cálido arriba, muy contenido: aire, no atmósfera de neón.
     El desplazamiento va en PÍXELES: los % se resuelven contra <html> entero
     y el halo se iría fuera de pantalla (lección medida de la v1). */
  background:
    radial-gradient(900px 460px at 14% -80px, rgba(255,92,31,.055), transparent 62%),
    var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{ max-width:1060px; margin:0 auto; padding:0 28px; }
section{ position:relative; z-index:2; }
::selection{ background:rgba(255,92,31,.28); }

h1,h2,h3{
  font-family:var(--serif); font-weight:560; color:var(--text);
  letter-spacing:-.018em; font-variation-settings:"opsz" 90;
}
h1{ font-size:clamp(40px,6.4vw,72px); line-height:1.02; margin:0 0 20px; }
h2{ font-size:clamp(28px,4.2vw,46px); line-height:1.08; margin:0 0 18px; }
h3{ font-size:clamp(19px,2.3vw,23px); line-height:1.2; margin:0 0 8px; font-weight:600; }

/* ═════ NAV ═════ */
nav.top{
  position:sticky; top:0; z-index:20; backdrop-filter:blur(14px);
  background:var(--nav-fondo); border-bottom:1px solid var(--line);
}
nav.top .wrap{ display:flex; align-items:center; gap:16px; height:66px; }
.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }
/* El logotipo son DOS imágenes, una por modo. Se conmutan aquí y no con
   <picture media=…>, porque el conmutador manual no cambia la media query. */
.logo img{ height:26px; width:auto; display:block; }
.logo .logo-noche{ display:none; }
:root[data-tema="oscuro"] .logo .logo-dia{ display:none; }
:root[data-tema="oscuro"] .logo .logo-noche{ display:block; }
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .logo .logo-dia{ display:none; }
  :root:not([data-tema="claro"]) .logo .logo-noche{ display:block; }
}
.nav-links{ margin-left:auto; display:flex; align-items:center; gap:20px; }
/* :not(.btn) obligatorio: sin él, «.nav-links a» le gana a «.btn» y pinta el
   texto del botón con el gris de los enlaces. Pasó en la v1 y estaba publicado. */
.nav-links a:not(.btn){
  font-size:13.5px; font-weight:500; color:var(--muted); text-decoration:none; transition:color .2s;
}
.nav-links a:not(.btn):hover{ color:var(--text); }

/* Conmutador día/noche. Enseña la luna de día y el sol de noche: lo que
   OFRECE, no lo que hay. tema.js guarda la elección en localStorage. */
.tema{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:100px; cursor:pointer;
  background:transparent; border:1px solid var(--line); color:var(--muted);
  transition:color .2s, border-color .2s;
}
.tema:hover{ color:var(--text); border-color:var(--line-hi); }
.tema svg{ display:block; }
.tema .sol{ display:none; }
:root[data-tema="oscuro"] .tema .luna{ display:none; }
:root[data-tema="oscuro"] .tema .sol{ display:block; }
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .tema .luna{ display:none; }
  :root:not([data-tema="claro"]) .tema .sol{ display:block; }
}

/* Selector de idioma. Etiquetas ES/EN en la mono, nunca banderas: una bandera
   es un país, no un idioma. */
.lang{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:100px; padding:6px 11px;
}
.lang b{ color:var(--text); font-weight:500; }
/* (0,2,2) le gana a .nav-links a:not(.btn) = (0,2,1) sin !important */
.nav-links span.lang a{ color:var(--muted); text-decoration:none; transition:color .2s; }
.nav-links span.lang a:hover{ color:rgb(var(--acc)); }
/* Zona de toque 26×26 sin engordar la píldora (mínimo 24×24, lección v1). */
.lang a{ display:inline-flex; align-items:center; justify-content:center;
         min-width:26px; min-height:26px; margin:-4px 0; }

/* El botón: naranja eléctrico pleno con texto tinta (5,8:1 en los dos modos).
   El borde tinta translúcido delimita el botón sobre marfil, donde el naranja
   pleno solo da 2,7:1 y el borde es lo que marca el componente. */
.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-size:14px; font-weight:600; border-radius:100px; padding:12px 22px;
  background:var(--naranja); color:#16171A; border:1px solid rgba(22,23,26,.30);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -12px rgba(255,92,31,.85); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn.ghost{ background:transparent; color:var(--text); border-color:var(--line-hi); }
.btn.ghost:hover{ border-color:rgb(var(--acc)); box-shadow:none; }

/* La media query va después de la regla base: no añade especificidad.
   El «>» es obligatorio: sin él esconde también el enlace de dentro de .lang. */
@media (max-width:760px){ .nav-links > a:not(.btn){ display:none; } }
/* En móvil cede el nombre de marca, nunca el botón: la barra es sticky y ese
   botón es la única vía de conversión que sigue al usuario toda la página.
   En pantallas estrechas el logotipo entero se sustituye por el isotipo. */
@media (max-width:560px){ .logo img{ height:24px; } .nav-links{ gap:12px; } }
.logo .iso-dia, .logo .iso-noche{ display:none; }
@media (max-width:420px){
  .logo .logo-dia, .logo .logo-noche{ display:none !important; }
  .logo .iso-dia{ display:block; height:26px; }
  :root[data-tema="oscuro"] .logo .iso-dia{ display:none; }
  :root[data-tema="oscuro"] .logo .iso-noche{ display:block; height:26px; }
}
@media (max-width:420px) and (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .logo .iso-dia{ display:none; }
  :root:not([data-tema="claro"]) .logo .iso-noche{ display:block; height:26px; }
}

/* ═════ CABECERA DE LA PÁGINA ═════ */
.head{ padding:64px 0 58px; }
.crumb{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
  color:var(--muted); text-decoration:none; display:inline-block; margin-bottom:30px;
  transition:color .2s;
}
.crumb:hover{ color:rgb(var(--acc)); }
.stage{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgb(var(--acc)); margin:0 0 14px;
}
.head .lead{
  margin:0; font-size:clamp(17px,2vw,20px); line-height:1.6; color:var(--muted); max-width:60ch;
}

/* Bloque de precio de la cabecera. Es tarjeta destacada: lleva el resplandor
   sutil de la marca (recurso conservado de la v1, ahora en naranja). */
.pricebox{
  margin-top:38px; display:flex; flex-wrap:wrap; gap:14px 40px; align-items:flex-end;
  border:1px solid rgba(255,92,31,.34); border-radius:18px; padding:26px 30px;
  background:linear-gradient(180deg, rgba(255,92,31,.06), rgba(255,92,31,.015)), var(--panel);
  box-shadow:0 0 0 1px rgba(255,92,31,.08), 0 0 34px -14px rgba(255,92,31,.5);
}
.pricebox .amount{ font-family:var(--serif); font-weight:560; font-size:46px; line-height:1; color:var(--text); }
.pricebox .amount small{ font-family:var(--sans); font-size:13px; color:var(--muted); font-weight:400; }
.pricebox .meta{ font-family:var(--mono); font-size:12.5px; line-height:1.7; color:var(--muted); }
.pricebox .meta b{ color:rgb(var(--acc)); font-weight:500; }
.pricebox .cta{ margin-left:auto; }
@media (max-width:640px){ .pricebox .cta{ margin-left:0; width:100%; } .pricebox .cta .btn{ width:100%; justify-content:center; } }

/* ═════ SECCIONES ═════ */
.sec{ padding:72px 0; border-top:1px solid var(--line); }
.sec-label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgb(var(--acc)); margin:0 0 16px;
}
.intro{ margin:0; font-size:16.5px; line-height:1.66; color:var(--muted); max-width:58ch; }

/* «¿Te suena esto?» — los dolores, en su idioma */
.pain{ list-style:none; margin:34px 0 0; padding:0; display:grid; gap:14px; }
.pain li{
  border:1px solid var(--line); border-radius:14px; padding:18px 22px;
  font-size:15px; line-height:1.6; color:var(--muted); background:var(--panel);
}
.pain li b{ color:var(--text); font-weight:600; }

/* Pasos numerados */
.steps{ counter-reset:s; display:grid; gap:14px; margin-top:34px; }
.step{
  display:flex; gap:20px; align-items:flex-start;
  border:1px solid var(--line); border-radius:16px; padding:22px 24px;
  background:var(--panel);
}
.step::before{
  counter-increment:s; content:"0" counter(s);
  font-family:var(--mono); font-size:12px; color:rgb(var(--acc)); padding-top:5px; flex:none;
}
.step p{ margin:0; font-size:14.5px; line-height:1.62; color:var(--muted); max-width:62ch; }
.step h3{ margin:0 0 7px; }

/* Dos columnas: qué necesitamos / qué no incluye */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:34px; }
.card{
  border:1px solid var(--line); border-radius:18px; padding:26px 28px;
  background:var(--panel);
}
.card h3{ margin:0 0 16px; }
.card ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.card li{ display:flex; gap:11px; font-size:14px; line-height:1.55; color:var(--muted); }
.card li svg{ flex:none; margin-top:3px; color:rgb(var(--acc)); }
/* Las aspas de «qué no incluye» en gris legible, nunca en --dim de adorno. */
.card.out li svg{ color:var(--muted); }
.next{
  margin:20px 0 0; padding-top:16px; border-top:1px solid var(--line);
  font-size:13.5px; line-height:1.6; color:var(--muted);
}
.next a{ color:rgb(var(--acc)); text-decoration:none; border-bottom:1px solid rgba(var(--acc),.35); }
.next a:hover{ border-bottom-color:rgb(var(--acc)); }

/* Condiciones del servicio — el respaldo legal pegado al servicio */
.terms{ margin-top:34px; display:grid; gap:0; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--panel); }
.term{ display:grid; grid-template-columns:210px 1fr; gap:24px; padding:18px 26px; border-top:1px solid var(--line); }
.term:first-child{ border-top:0; }
.term dt{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:rgb(var(--acc)); padding-top:2px;
}
.term dd{ margin:0; font-size:14px; line-height:1.62; color:var(--muted); }
.term dd b{ color:var(--text); font-weight:600; }
.legal{ margin:18px 0 0; font-size:13px; line-height:1.65; color:var(--muted); }
.legal a{ color:rgb(var(--acc)); text-decoration:none; border-bottom:1px solid rgba(var(--acc),.35); }

/* Aviso de responsabilidad informada — páginas de compra directa de paquetes.
   Caja visible ANTES del botón de pago, con su casilla obligatoria aparte.
   Añadido el 2026-08-14; la cláusula espejo vive en /legal/terminos/. */
.aviso-resp{
  border:1px solid rgba(var(--acc),.38); border-radius:14px; padding:16px 18px;
  background:linear-gradient(180deg, rgba(var(--acc),.07), rgba(var(--acc),.02));
  font-size:13.5px; line-height:1.62; color:var(--muted);
}
.aviso-resp b{ color:var(--text); font-weight:600; }
.aviso-resp .et{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgb(var(--acc)); margin:0 0 8px;
}
.aviso-resp p{ margin:0; }

/* Cierre */
.final{
  margin:0 0 80px; border:1px solid var(--line); border-radius:22px; padding:52px 44px;
  text-align:center;
  background:
    radial-gradient(600px 260px at 50% 0%, rgba(255,92,31,.07), transparent 70%),
    var(--panel);
}
.final h2{ margin:0 0 12px; }
.final p{ margin:0 auto 26px; max-width:52ch; font-size:15.5px; line-height:1.6; color:var(--muted); }

footer{ border-top:1px solid var(--line); padding:30px 0 44px; position:relative; z-index:2; }
footer .wrap{ display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; }
footer span, footer a{ font-size:13px; color:var(--muted); text-decoration:none; }
/* padding vertical, no altura: zona de toque de 26 px sin mover nada. */
footer a{ display:inline-block; padding:5px 0; }
footer a:hover{ color:rgb(var(--acc)); }

a:focus-visible, .btn:focus-visible, button:focus-visible{
  outline:2px solid rgb(var(--acc)); outline-offset:3px; border-radius:6px;
}

/* ═════ MÓVIL ═════ (siempre después de las reglas base) */
@media (max-width:760px){
  .duo{ grid-template-columns:1fr; }
  .term{ grid-template-columns:1fr; gap:6px; }
}
@media (max-width:600px){
  .wrap{ padding:0 20px; }
  .head{ padding:44px 0 42px; }
  .sec{ padding:52px 0; }
  .pricebox{ padding:20px; }
  .final{ padding:38px 22px; }
}

/* Solo se apaga el movimiento automático y el desplazamiento animado.
   Los hover NO se tocan: en Windows esta preferencia viene activada de
   fábrica en muchos equipos y apagarlos deja la página muerta al tacto. */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  html{ scroll-behavior:auto; }
}
