/* ==========================================================================
   edgardojrj.com — identidad «Luz»
   Hoja compartida por todas las páginas. Un cambio aquí afecta a las cuatro.
   NO usar en dudsonenterprise.com (esa tiene su propia identidad).
   ========================================================================== */

:root{
  --papel:#F7F5F1; --papel-hondo:#EDE9E2; --papel-alto:#FFFDFA;
  --tinta:#14120F; --tinta-suave:#57524A;
  /* Era #8A8377, que sobre el papel da 3,45:1 — por debajo del 4,5:1 que pide
     el texto pequeño, y es el color de TODO el texto secundario del sitio
     (etiquetas, pies, notas, avisos). Oscurecido a #6E685C sube a 5,08:1 sin
     perder la jerarquía: sigue por debajo de --tinta-suave (7,11:1).
     Solo se usa sobre fondos claros; ningún bloque oscuro depende de él. */
  --tinta-tenue:#6E685C;
  --ambar:#C4642A; --ambar-texto:#A0501F; --ambar-luz:#E8A24C;
  /* Solo para rellenos de botón con texto encima. El ámbar de marca (#C4642A)
     con el crema da 3,83:1 y el texto de botón necesita 4,5:1. Este es un 2%
     más oscuro —a simple vista es el mismo color— y llega a 4,56:1.
     --ambar se deja intacto: en trazos, puntos y degradados no lleva texto
     encima y ahí la regla de contraste no aplica. */
  --ambar-boton:#B25A24;
  --trazo:#DDD7CD;
  --display:"Bricolage Grotesque",Georgia,serif;
  --cuerpo:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; overflow-x:hidden; background:var(--papel); color:var(--tinta-suave);
  font-family:var(--cuerpo); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{ background:var(--ambar-luz); color:var(--tinta); }
::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--papel-hondo); }
::-webkit-scrollbar-thumb{ background:#C9C1B4; border-radius:9px; border:3px solid var(--papel-hondo); }
::-webkit-scrollbar-thumb:hover{ background:var(--ambar); }

.wrap{ width:100%; max-width:1080px; margin:0 auto; padding:0 34px; }
.wrap.estrecho{ max-width:760px; }
@media (max-width:640px){ .wrap{ padding:0 22px; } }

h1,h2,h3{ font-family:var(--display); color:var(--tinta); letter-spacing:-.03em; line-height:1.02; margin:0; }
h1{ font-size:clamp(44px,7.6vw,92px); font-weight:700; }
h2{ font-size:clamp(30px,4.6vw,50px); font-weight:700; }
h3{ font-size:clamp(21px,2.6vw,28px); font-weight:600; line-height:1.18; }

.etiqueta{
  font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--tinta-tenue); margin:0 0 20px;
}
.trazo{
  background-image:linear-gradient(transparent 60%, var(--ambar-luz) 60%, var(--ambar-luz) 92%, transparent 92%);
  background-repeat:no-repeat;
}

/* ---------- Navegación ---------- */
nav.top{
  position:sticky; top:0; z-index:40;
  background:rgba(247,245,241,.85); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--trazo);
}
nav.top .wrap{ display:flex; align-items:center; gap:14px; height:62px; }
.marca{
  font-family:var(--display); font-size:18px; font-weight:700; color:var(--tinta);
  text-decoration:none; letter-spacing:-.02em;
}
.menu{ margin-left:auto; display:flex; align-items:center; gap:24px; }
.menu a{ font-size:14px; font-weight:600; color:var(--tinta-suave); text-decoration:none; transition:color .2s; }
.menu a:hover, .menu a[aria-current="page"]{ color:var(--ambar-texto); }
@media (max-width:600px){ .menu{ gap:16px; } .menu a{ font-size:13px; } }
/* A 375 px (iPhone SE y compañía) la marca y el menú suman exactamente el ancho
   disponible: flexbox los encoge y «Edgardo Rivas» y «Sobre mí» se parten en dos
   líneas que se salen de los 62 px de la barra. Se aprieta un punto más y se
   prohíbe el salto de línea para que no vuelva a pasar. */
@media (max-width:420px){
  .marca{ font-size:16px; }
  .menu{ gap:13px; }
  .menu a{ font-size:12.5px; }
  .marca, .menu a{ white-space:nowrap; }
}
/* Solo por debajo de 355 px. Medido: la marca y el menú ocupan 310 px, así que
   a 360 px (Galaxy A y similares) todavía caben con margen, y a 375 px sobran
   21 px. A 320 px no caben y el menú se comía el margen derecho; ahí se reduce
   al monograma —el mismo «E» del favicon—, así que la identidad se mantiene.
   El texto sigue en el HTML, de modo que un lector de pantalla lee
   «Edgardo Rivas». */
@media (max-width:355px){
  .marca{ font-size:0; }
  .marca::before{ content:"E"; font-size:23px; letter-spacing:0; }
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--cuerpo); font-size:15px; font-weight:700; border-radius:100px;
  padding:15px 27px; border:1px solid transparent; cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.btn.solido{ background:var(--ambar-boton); color:#FFF8F1; border-color:var(--ambar-boton); }
.btn.solido:hover{ transform:translateY(-3px); box-shadow:0 16px 30px -14px rgba(196,100,42,.75); }
.btn.linea{ background:transparent; color:var(--tinta); border-color:#CFC7B9; }
.btn.linea:hover{ border-color:var(--ambar); transform:translateY(-3px); }

.enlace{
  display:inline-flex; align-items:center; gap:11px;
  font-size:15px; font-weight:700; color:var(--tinta); text-decoration:none;
  border-bottom:2px solid var(--ambar-luz); padding-bottom:4px;
  transition:gap .25s ease, border-color .25s ease;
}
.enlace:hover{ gap:17px; border-color:var(--ambar); }
.enlace svg{ color:var(--ambar); }

/* ---------- Revelado (sin JS todo queda visible) ---------- */
.rv{ opacity:0; transform:translateY(22px); }
.rv.in{ opacity:1; transform:none; transition:opacity .85s cubic-bezier(.16,.8,.3,1), transform .85s cubic-bezier(.16,.8,.3,1); }
.rv.d1.in{transition-delay:.09s} .rv.d2.in{transition-delay:.18s}
.rv.d3.in{transition-delay:.27s} .rv.d4.in{transition-delay:.36s}

/* ---------- Secciones ---------- */
.seccion{ padding:clamp(64px,9vw,110px) 0; }

/* ---------- Formulario ---------- */
form.captura{ display:flex; gap:10px; max-width:460px; }
@media (max-width:520px){ form.captura{ flex-direction:column; } }
form.captura input{
  flex:1; min-width:0; font-family:var(--cuerpo); font-size:15px; color:var(--tinta);
  background:var(--papel-alto); border:1px solid #CFC7B9; border-radius:100px;
  padding:16px 24px; outline:none; transition:border-color .2s ease;
}
form.captura input::placeholder{ color:var(--tinta-tenue); }
form.captura input:focus{ border-color:var(--ambar); }
.aviso{ margin:16px 0 0; font-size:13px; color:var(--tinta-tenue); min-height:18px; }
.aviso.ok{ color:var(--ambar-texto); font-weight:600; }

/* El enlace a la política va aparte del .aviso: comun.js reescribe el
   textContent de .aviso al enviar, y se llevaría el enlace por delante. */
.consentimiento{ margin:8px 0 0; font-size:12px; line-height:1.5; color:var(--tinta-tenue); }
.consentimiento a{ color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.consentimiento a:hover{ color:var(--ambar-texto); }

/* ---------- Pie ---------- */
footer{ border-top:1px solid var(--trazo); padding:40px 0 56px; margin-top:40px; }
footer .wrap{ display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; font-size:13.5px; color:var(--tinta-tenue); }
footer a{ color:var(--tinta-suave); text-decoration:none; font-weight:600; }
footer a:hover{ color:var(--ambar-texto); }
footer .der{ margin-left:auto; }
/* Los legales van en el pie porque tienen que ser ALCANZABLES —unos términos
   que nadie pudo ver son menos exigibles—, pero un tono por debajo del resto:
   presentes sin llamar la atención. */
footer a.discreto{ font-size:12px; font-weight:500; color:var(--tinta-tenue); }
footer a.discreto:hover{ color:var(--ambar-texto); }

/* ---------- Documentos legales (/legal/…) ----------
   Deliberadamente discretos. Estas páginas NO son material de lectura: existen
   para respaldar la posición legal de Dudson Enterprises LLC. De ahí la letra
   pequeña, el párrafo corrido y la ausencia total de adornos — sin títulos
   grandes, sin índice, sin tablas, sin cajas de color. Quien los necesita los
   lee; quien no, no tropieza con ellos.

   Lo único que se destaca son las palabras clave en negrita: son las que
   sostienen el respaldo (aporte voluntario, no reembolsable, no es asesoría). */
.doc-cab{ padding:52px 0 0; }
.doc-cab h1{
  font-family:var(--cuerpo); font-size:17px; font-weight:700;
  letter-spacing:0; line-height:1.3; color:var(--tinta-suave);
}
.doc-cab .fecha{ margin:6px 0 0; font-size:11px; color:var(--tinta-tenue); }

.doc{ padding:20px 0 0; }
/* 12,5 px es pequeño a propósito, pero el COLOR no se rebaja: --tinta-tenue
   sobre el papel da 3,45:1, por debajo del 4,5:1 exigible a texto pequeño.
   Letra chica ilegible es justo lo que un tribunal reprocha, así que la
   discreción la pone el tamaño, no el contraste. --tinta-suave da 7,1:1. */
.doc p{
  margin:0 0 10px; font-size:12.5px; line-height:1.62;
  color:var(--tinta-suave); text-align:justify; hyphens:auto;
  /* Manrope trae una ligadura activada de fábrica que convierte «(c)» en «©».
     En una enumeración legal —(a), (b), (c), (d)— eso cambia el sentido del
     texto. Aquí la corrección pesa más que la finura tipográfica.
     Comprobado: «dlig 0» no basta; hace falta apagarlas todas. */
  font-variant-ligatures:none;
}
.doc p b{ color:var(--tinta); font-weight:700; }
.doc a{ color:var(--tinta); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.doc a:hover{ color:var(--ambar-texto); }

/* Dos clases (0,0,2,0) para ganarle a `.doc p` (0,0,1,1), que si no le impone
   sus 12,5 px justificados. */
.doc .doc-pie{
  margin:26px 0 64px; padding-top:16px; border-top:1px solid var(--trazo);
  font-size:11px; color:var(--tinta-tenue); text-align:left;
}
.doc .doc-pie a{ color:var(--tinta-tenue); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.doc .doc-pie a:hover{ color:var(--ambar-texto); }

/* Aviso legal corto donde se recibe un pago. Mismo principio: letra pequeña,
   un solo párrafo, y solo en negrita lo que de verdad tiene que quedar dicho. */
.aviso-legal{
  margin:34px 0 60px; padding-top:18px; border-top:1px solid var(--trazo);
}
.aviso-legal p{
  margin:0; font-size:11.5px; line-height:1.6; color:var(--tinta-suave); text-align:justify;
  font-variant-ligatures:none;   /* mismo motivo que en .doc p */
}
.aviso-legal b{ color:var(--tinta); font-weight:700; }
.aviso-legal a{ color:var(--tinta); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.aviso-legal a:hover{ color:var(--ambar-texto); }

/* ---------- Modal de bienvenida ----------
   Nace oculto con [hidden] para que el contenido de la página nunca quede
   bloqueado si el JS falla o tarda. Solo el script lo revela. */
.modal[hidden]{ display:none; }
.modal{
  position:fixed; inset:0; z-index:80;
  display:grid; place-items:center; padding:24px;
  background:rgba(20,18,15,.52); backdrop-filter:blur(5px);
  animation:modal-fondo .35s ease both;
}
@keyframes modal-fondo{ from{ opacity:0 } to{ opacity:1 } }

.modal-caja{
  position:relative; width:100%; max-width:430px;
  background:var(--papel-alto); border:1px solid var(--trazo);
  border-radius:24px; padding:34px 32px 28px; text-align:center;
  box-shadow:0 40px 90px -40px rgba(20,18,15,.6);
  animation:modal-entra .45s cubic-bezier(.2,.85,.3,1) both;
  max-height:calc(100vh - 48px); overflow-y:auto;
}
@keyframes modal-entra{ from{ opacity:0; transform:translateY(18px) scale(.97) } to{ opacity:1; transform:none } }
@media (max-width:520px){ .modal-caja{ padding:28px 22px 24px; border-radius:18px; } }

.modal-cerrar{
  position:absolute; top:14px; right:14px; width:34px; height:34px;
  display:grid; place-items:center; cursor:pointer;
  background:var(--papel-hondo); border:1px solid var(--trazo); border-radius:50%;
  color:var(--tinta-suave); transition:background .2s ease;
}
.modal-cerrar:hover{ background:#E2DCD2; }

.modal-eyebrow{
  font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--tinta-tenue); margin:0 0 18px;
}
.modal-foto{
  width:78px; height:78px; margin:0 auto 18px; border-radius:50%; padding:3px;
  background:linear-gradient(135deg,var(--ambar),var(--ambar-luz),#E5C07B);
}
.modal-foto img{
  display:block; width:100%; height:100%; border-radius:50%;
  object-fit:cover; border:2px solid var(--papel-alto);
}
.modal-caja h2{ font-size:clamp(25px,5vw,31px); margin:0 auto 10px; max-width:18ch; }
.modal-caja > p{ margin:0 auto 22px; font-size:15px; line-height:1.56; color:var(--tinta-suave); max-width:34ch; }

.modal-destacado{
  display:block; text-decoration:none; text-align:left;
  background:linear-gradient(150deg, rgba(232,162,76,.22), rgba(232,162,76,.06));
  border:1px solid var(--ambar-luz); border-radius:14px;
  padding:15px 17px; margin-bottom:18px;
  transition:transform .22s ease;
}
.modal-destacado:hover{ transform:translateY(-2px); }
.modal-destacado b{
  display:block; font-size:9.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ambar-texto); margin-bottom:5px;
}
.modal-destacado span{ font-size:15px; font-weight:600; color:var(--tinta); }

.modal-caja form.captura{ max-width:none; margin-bottom:6px; }
.modal-enlaces{ display:flex; gap:9px; margin-top:16px; }
.modal-enlaces a{
  flex:1; text-align:center; text-decoration:none;
  font-size:13px; font-weight:700; color:var(--tinta);
  background:var(--papel-hondo); border-radius:10px; padding:11px 6px;
  transition:background .2s ease;
}
.modal-enlaces a:hover{ background:#E2DCD2; }
.modal-saltar{
  display:block; width:100%; margin-top:16px; cursor:pointer;
  font-family:var(--cuerpo); font-size:13px; font-weight:600; color:var(--tinta-tenue);
  background:transparent; border:0; padding:8px;
}
.modal-saltar:hover{ color:var(--tinta); text-decoration:underline; }

body.modal-abierto{ overflow:hidden; }

a:focus-visible,button:focus-visible,input:focus-visible{ outline:2px solid var(--ambar); outline-offset:3px; border-radius:6px; }

/* Solo se apaga el movimiento intrusivo; los hovers se mantienen.
   Apagarlo todo deja la página muerta en Windows, donde esta preferencia
   viene activada de fábrica en muchos equipos. */
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
  .modal, .modal-caja{ animation:none; }
}