/* ==========================================================================
   Cor-E Dark — base compartida (public/css/dark-base.css)
   Namespace .hm-* — carga en toda vista con tema oscuro (home, services…).
   Ver prompt/servicesNew.md §2.2 para el origen de este split.
   ========================================================================== */

/* No hay woff2 de Inter auto-hospedado en el repo (no hay tooling de descarga
   de binarios en este entorno) — se usa la pila de sistema, visualmente muy
   cercana a Inter. Si se consigue el archivo, añadir aquí un @font-face y
   listo: el resto del CSS ya pide 'Inter' primero. */

:root {
  /* Superficies */
  --dk-canvas:      #08071A;
  --dk-surface:     #12103A;
  --dk-surface-2:   #1a164f;
  --dk-line:        rgba(255,255,255,0.10);
  --dk-line-strong: rgba(255,255,255,0.22);

  /* Texto */
  --tx-1: #FFFFFF;
  --tx-2: #C4C1D8;
  --tx-3: #8A86A8;

  /* Acentos de marca */
  --ac-blue:   #409ff3;
  --ac-yellow: #f8e330;
  --ac-orange: #f49729;
  --ac-red:    #f15e37;
  --ac-blue-d: #3269c3;
  --ac-violet: #6b49d1;
  --grad-core: linear-gradient(90deg, #409ff3 0%, #6b49d1 100%);

  /* Tipografía */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fs-d1:  clamp(2.6rem, 6.4vw, 5.75rem);
  --fs-d2:  clamp(2rem,   4.2vw, 3.5rem);
  --fs-d3:  clamp(1.5rem, 2.6vw, 2.25rem);
  --fs-h3:  clamp(1.25rem, 1.8vw, 1.6rem);
  --fs-lg:  1.125rem;
  --fs-md:  1rem;
  --fs-sm:  0.875rem;
  --fs-xs:  0.75rem;

  /* Retícula y ritmo */
  --container:  1360px;
  --pad-inline: clamp(20px, 5vw, 72px);
  --rhythm:     clamp(72px, 9vw, 160px);
  --gap:        clamp(16px, 2vw, 32px);
  --radius:     0;

  /* Altura real de .custom-navbar en escritorio (medida: navbar-brand-icon
     40px + paddings de .navbar y .navbar-brand + 1px de borde, core.css
     :498-505). La comparten /personaldata (§5.2, índice pegajoso) y
     /services (§5.5, sub-nav pegajoso) — un solo lugar para no
     desincronizarlas, ver prompt/personaldataNew.md §5.5. */
  --nav-h: 68px;

  /* Movimiento */
  --ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-1: 200ms;
  --dur-2: 320ms;
  --dur-3: 600ms;
}

body.theme-dark {
  background: var(--dk-canvas);
  color: var(--tx-2);
  font-family: var(--font-sans);
}

/* La reserva del hueco de la barra de scroll vive en core.css (`html {
   overflow-y: scroll }`), que carga en las 12 vistas — el salto de layout
   que evita afecta al navbar compartido, no solo al tema oscuro.
   `scrollbar-gutter: stable` se probó aquí y NO funciona: medido con CDP,
   el clientWidth seguía saltando 1440 → 1425. Ver core.css para el detalle. */
html { overflow-x: clip; }

body.theme-dark :focus-visible {
  outline: 2px solid var(--ac-yellow);
  outline-offset: 3px;
}

.hm-wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}

.hm-kicker {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--tx-3);
  margin: 0 0 12px;
}

.hm-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--tx-1);
  text-decoration: none;
  font-weight: 600;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--dk-line);
  transition: border-color var(--dur-2) var(--ease);
}
.hm-link-arrow::after {
  content: '\2192';
  display: inline-block;
  transition: transform var(--dur-1) var(--ease);
}
.hm-link-arrow:hover,
.hm-link-arrow:focus-visible {
  border-color: var(--ac-yellow);
  color: var(--tx-1);
}
.hm-link-arrow:hover::after,
.hm-link-arrow:focus-visible::after {
  transform: translateX(4px);
}

/* ==========================================================================
   Primitivas de formulario — promovidas desde contact-dark.css (.ct-*) el
   día que /login se convirtió en el segundo formulario del sistema. Ver
   prompt/loginNew.md §5.3, hallazgo U. Los modificadores específicos de
   <select>/<textarea> (flecha, resize) siguen en contact-dark.css: solo
   /contactUs usa esos dos controles hoy.
   ========================================================================== */
.hm-field { display: flex; flex-direction: column; }

/* --tx-2, no --tx-3: sobre --dk-surface-2 el gris claro da 4.76 — el
   mínimo del sistema; una etiqueta de campo es información esencial. */
.hm-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--tx-2);
  margin: 0 0 8px;
  padding: 0;
}
.hm-req { color: var(--ac-yellow); }

.hm-input,
.hm-select,
.hm-textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-md);
  color: var(--tx-1);
  background: rgba(8,7,26,0.35);   /* funciona igual sobre canvas y surface-2 */
  border: 1px solid var(--dk-line);
  border-radius: 0;
  padding: 14px 16px;
  min-height: 52px;                /* objetivo táctil holgado */
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.hm-input:hover,
.hm-select:hover,
.hm-textarea:hover { border-color: var(--dk-line-strong); }

.hm-input:focus,
.hm-select:focus,
.hm-textarea:focus {
  border-color: var(--ac-yellow);
  background: rgba(8,7,26,0.55);
  outline: none;                    /* el anillo lo pinta :focus-visible abajo */
}
.hm-input:focus-visible,
.hm-select:focus-visible,
.hm-textarea:focus-visible {
  outline: 2px solid var(--ac-yellow);
  outline-offset: 2px;
}
.hm-input::placeholder,
.hm-textarea::placeholder { color: var(--tx-3); }

.hm-input[aria-invalid="true"],
.hm-select[aria-invalid="true"],
.hm-textarea[aria-invalid="true"] { border-color: var(--ac-red); }

.hm-error {
  color: var(--ac-red);
  font-size: var(--fs-sm);
  margin: 8px 0 0;
}
.hm-hint {
  color: var(--tx-3);
  font-size: var(--fs-sm);
  margin: 8px 0 0;
}

/* Autofill de Chrome: el fondo blanco-azulado propio del navegador rompe
   cualquier tema oscuro. -webkit-box-shadow aquí no es decoración — es el
   único mecanismo para sobrescribir el relleno de autofill de WebKit.
   #14113c es rgba(8,7,26,0.35) compuesto sobre --dk-surface-2 #1a164f
   (8·0.35 + 26·0.65 ≈ 20 = 0x14, etc.) — mismo aspecto que un campo sin
   autocompletar. Si el panel cambiara de superficie, recalcular. */
.hm-input:-webkit-autofill,
.hm-input:-webkit-autofill:hover,
.hm-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tx-1);
  -webkit-box-shadow: 0 0 0 1000px #14113c inset;
  caret-color: var(--tx-1);
  transition: background-color 9999s ease-in-out 0s;
}

.hm-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
}
.hm-tags li {
  font-size: var(--fs-sm);
  color: var(--tx-2);
  border: 1px solid var(--dk-line);
  border-radius: 999px;
  padding: 4px 14px;
}

.hm-reveal {
  opacity: 1;
  transform: none;
}
.hm-js .hm-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.hm-js .hm-reveal.hm-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hm-js .hm-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Promovido desde services-dark.css: la segunda vista con anclas internas
   (/personaldata, §5.2) también lo necesita — ver prompt/personaldataNew.md
   §5.2. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ==========================================================================
   Especialidades profundas — bloques de color reutilizables (.hm-depth-block)
   ========================================================================== */
.hm-depth {
  background: var(--dk-canvas);
  padding-block: var(--rhythm);
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}
.hm-depth-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}
.hm-depth-block {
  padding: clamp(32px, 4vw, 64px);
  color: var(--dk-canvas);
}
.hm-depth-block h3 {
  font-size: var(--fs-d3);
  margin: 0 0 12px;
}
.hm-depth-block p {
  max-width: 46ch;
  margin: 0;
  color: var(--dk-canvas);
}
.hm-depth-block--blue   { grid-column: span 7; background: var(--ac-blue); }
.hm-depth-block--red    { grid-column: span 5; background: var(--ac-red); }
.hm-depth-block--yellow { grid-column: span 12; background: var(--ac-yellow); }

/* Contraste WCAG (hallazgo D de servicesNew.md §0.1): texto blanco sobre azul
   da 2.81, sobre rojo da 3.28 — ambos fallan. Se generaliza a las tres
   variantes de color el override que antes solo tenía la amarilla. */
.hm-depth-block--blue   :focus-visible,
.hm-depth-block--red    :focus-visible,
.hm-depth-block--yellow :focus-visible {
  outline-color: var(--dk-canvas);
}
.hm-depth-block--blue   .hm-link-arrow,
.hm-depth-block--red    .hm-link-arrow,
.hm-depth-block--yellow .hm-link-arrow {
  color: var(--dk-canvas);
  border-color: rgba(8,7,26,0.35);
}
@media (max-width: 899.98px) {
  .hm-depth-block--blue,
  .hm-depth-block--red,
  .hm-depth-block--yellow { grid-column: span 12; }
}

/* ==========================================================================
   Hero de página simple (sin canvas) — reutilizado por /services y /about.
   No confundir con .hm-hero (bloque 1 de la home, con canvas y layout propio).
   ========================================================================== */
.hm-page-hero {
  background: var(--dk-canvas);
  padding-block: clamp(140px, 18vw, 220px) var(--rhythm);
}
.hm-page-hero-title {
  font-size: var(--fs-d1);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--tx-1);
  max-width: 20ch;
  margin: 0 0 28px;
}
.hm-page-hero-sub {
  font-size: var(--fs-lg);
  color: var(--tx-2);
  max-width: 60ch;
  line-height: 1.65;
  margin: 0 0 32px;
}

/* ==========================================================================
   Sección de página con kicker + h2 + intro — patrón repetido en /services
   y /about. Alterna superficie por sección y difiere su render bajo el
   pliegue.
   ========================================================================== */
.hm-line {
  background: var(--dk-canvas);
  padding-block: var(--rhythm);
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
.hm-line:nth-of-type(even) { background: var(--dk-surface-2); }
.hm-line-head {
  max-width: 62ch;
  margin: 0 0 clamp(40px, 5vw, 64px);
}
.hm-line-head h2 {
  font-size: var(--fs-d2);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--tx-1);
  margin: 0 0 16px;
}
.hm-line-head p {
  color: var(--tx-2);
  max-width: 60ch;
  margin: 0;
}

/* Cuerpo de texto largo (varios párrafos) — medida máxima 62ch (designRules §3.3) */
.hm-prose {
  max-width: 62ch;
}
.hm-prose p {
  color: var(--tx-2);
  line-height: 1.65;
  margin: 0 0 20px;
}
.hm-prose p:last-child { margin-bottom: 0; }

/* ==========================================================================
   .hm-rows / .hm-row — filas numeradas, reutilizado por /services y /about
   ========================================================================== */
/* Se usa sobre <ol>/<ul>: hay que neutralizar el marcador y la sangría del
   navegador. Sin esto, el UA mete padding-left:32px (desalinea las filas
   respecto al encabezado de sección) y, según el navegador, pinta viñetas o
   números nativos que compiten con .hm-row-num. */
.hm-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hm-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--gap);
  padding-block: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--dk-line);
}
.hm-rows .hm-row:first-child { border-top: 0; }
.hm-row-num {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  color: var(--tx-3);
}
.hm-row h3 {
  font-size: var(--fs-h3);
  color: var(--tx-1);
  margin: 0 0 8px;
  transition: color var(--dur-2) var(--ease);
}
.hm-row p {
  color: var(--tx-2);
  max-width: 62ch;
  margin: 0;
}
.hm-row:hover h3 { color: var(--ac-blue); }
.hm-row a.hm-link-arrow { margin-top: 8px; }

@media (max-width: 599.98px) {
  .hm-row { grid-template-columns: 1fr; gap: 8px; }
}

/* ==========================================================================
   CTA final — reutilizable por cualquier vista oscura
   ========================================================================== */
.hm-cta {
  background: var(--dk-surface-2);
  padding-block: clamp(80px, 10vw, 160px);
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}
.hm-cta h2 {
  font-size: var(--fs-d2);
  color: var(--tx-1);
  max-width: 20ch;
  margin: 0 0 16px;
}
.hm-cta > .hm-wrap > p {
  color: var(--tx-2);
  max-width: 52ch;
  margin: 0 0 32px;
}
.hm-cta-btn {
  display: inline-block;
  background: var(--ac-yellow);
  color: var(--dk-canvas);
  font-weight: 600;
  padding: 18px 36px;
  text-decoration: none;
  transition: background var(--dur-1) var(--ease);
}
.hm-cta-btn:hover,
.hm-cta-btn:focus-visible {
  background: #fff;
  color: var(--dk-canvas);
}
.hm-cta-contact {
  margin-top: 32px;
  font-size: var(--fs-sm);
  color: var(--tx-3);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.hm-cta-contact a {
  color: var(--tx-3);
  text-decoration: none;
}
.hm-cta-contact a:hover,
.hm-cta-contact a:focus-visible {
  color: var(--tx-1);
  text-decoration: underline;
}