/* DoweSoft · «Formulario radicado» — base global y componentes compartidos.
   Papel blanco, tinta casi negra, rojo de marca como tinta de sello.

   Aquí va SOLO lo que usan varias vistas (botones, encabezados de sección,
   libro de registro, casillas, banda roja, contacto). Lo de una sola página
   vive en su vista (containers/site/...), donde Titan lo scopea.
   Los colores salen de css/variables.css: aquí no se escribe ningún hex. */

/* Archivo, autoalojada: un woff2 variable con eje de peso (100–900) y de
   anchura (62–125%). Sin Google Fonts. */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 { margin: 0; color: var(--ink); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

::selection { background: var(--red-fill); color: var(--on-red); }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

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

.ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.muted { color: var(--ink-3); font-weight: 400; }

/* ---------- Botones y enlaces ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 52px;
  padding: 0 1.4em;
  border: 0;
  border-radius: 2px;
  background: var(--red-fill);
  color: var(--on-red);
  font: inherit;
  font-weight: 700;
  font-stretch: 105%;
  font-size: 1rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.btn:hover { background: var(--red-fill-hover); }
.btn:active { transform: translateY(1px); box-shadow: 0 0 0 var(--red-deep); }

.btn--small { min-height: 44px; padding: 0 1em; font-size: 0.9375rem; }
.btn--large { min-height: 60px; padding: 0 1.8em; font-size: 1.125rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
  transition: text-decoration-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.link-arrow:hover { color: var(--red); text-decoration-color: currentColor; }

/* ---------- Primera vista (inicio, Titan Core, módulos) ---------- */

.lead {
  margin-top: 1.4rem;
  max-width: 46ch;
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: 2.2rem;
}

/* Migas: DoweSoft / Página */
.crumb {
  margin-bottom: 1.25rem;
  font-size: 0.9375rem;
  color: var(--ink-3);
}
.crumb a {
  color: var(--ink-2);
  text-decoration-color: var(--rule);
  text-decoration-thickness: 2px;
}
.crumb a:hover { color: var(--red); text-decoration-color: currentColor; }
.crumb span { margin-inline: 0.35em; }

/* Hoja preimpresa: doble filete rojo arriba (solicitud, video, licencia) */
.sheet {
  position: relative;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
}
.sheet::before {
  content: "";
  position: absolute;
  inset: 6px 6px auto;
  height: 4px;
  border-top: 2px solid var(--red);
  border-bottom: 1px solid var(--red);
}

/* ---------- Casillas y renglones de formulario ---------- */

.check__box {
  position: relative;
  width: 20px;
  height: 20px;
  flex: none;
  border: 1.5px solid var(--ink);
  background: var(--paper);
}
.check__box::before,
.check__box::after {
  /* X a mano, en tinta roja */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--red);
  transform: translate(-50%, -50%) rotate(45deg) scaleX(0);
  transition: transform 180ms var(--ease-out);
}
.check__box::after { transform: translate(-50%, -50%) rotate(-45deg) scaleX(0); }
input:checked + .check__box::before { transform: translate(-50%, -50%) rotate(45deg) scaleX(1); }
input:checked + .check__box::after { transform: translate(-50%, -50%) rotate(-45deg) scaleX(1); transition-delay: 90ms; }
input:focus-visible + .check__box { outline: 2px solid var(--red); outline-offset: 3px; }
label:hover > .check__box { border-color: var(--red); }

.line {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 12px;
  margin: 18px 0 22px;
}
.line__label { font-weight: 700; font-size: 0.95rem; padding-bottom: 8px; }
.line input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 6px 2px;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  caret-color: var(--red);
}
.line input:focus { outline: none; border-bottom-color: var(--red); box-shadow: 0 1px 0 var(--red); }

/* ---------- Encabezados de sección ---------- */

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 24px clamp(32px, 6vw, 96px);
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.section-head h2 {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  font-weight: 800;
  font-stretch: 110%;
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.section-head p {
  max-width: 52ch;
  color: var(--ink-2);
  font-size: 1.0625rem;
}
.section-head p strong { color: var(--ink); }
.section-head--inverse h2 { color: var(--on-red); }
.section-head--inverse p { color: var(--on-red-2); }

.kicker {
  margin-bottom: 12px;
  font-size: 0.875rem;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- Libro de registro ---------- */

.section { padding-block: var(--section); }

.ledger {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 3px double var(--rule-strong);
}
.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 1fr);
  gap: 8px clamp(24px, 4vw, 64px);
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}
.ledger__row h4 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.25rem, 1.9vw, 1.625rem);
  font-weight: 700;
  font-stretch: 108%;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.ledger__row p { color: var(--ink-2); max-width: 46ch; }
.ledger__row:last-child { border-bottom: 1px solid var(--rule-strong); }

/* ---------- Banda roja (cómo trabajamos, disponibilidad) ---------- */

.band {
  padding-block: var(--section);
  background: var(--band);
  color: var(--on-red);
}
.band__item h3 {
  color: var(--on-red);
  font-size: 1.25rem;
  font-weight: 700;
  font-stretch: 108%;
  margin-bottom: 10px;
}
.band__item p { color: var(--on-red-2); }

/* ---------- Contacto / cierre ---------- */

.contact {
  padding-block: var(--section);
  background: var(--paper-tint);
  border-top: 1px solid var(--rule-strong);
}
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 104px);
  align-items: start;
}
.contact h2 {
  font-size: clamp(2.25rem, 4.4vw, 4rem);
  font-weight: 800;
  font-stretch: 110%;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 2rem;
  max-width: 13ch;
}
.contact__aside {
  padding-top: 18px;
  border-top: 3px double var(--rule-strong);
}
.contact__aside p { color: var(--ink-2); max-width: 44ch; margin-bottom: 1rem; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .contact__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  body { font-size: 1rem; }
  .section-head { grid-template-columns: 1fr; }
  .ledger__row { grid-template-columns: 1fr auto; padding: 18px 0; }
  .ledger__row p { grid-column: 1 / -1; grid-row: 2; }
  .btn--large { width: 100%; }
}

@media (max-width: 420px) {
  .btn--small { padding: 0 0.8em; }
  .hero__actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
}

/* Texto solo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Íconos (Material Symbols Outlined) ----------
   Subconjunto autoalojado: solo los íconos que usa la página (ver
   fonts/material-symbols/README.txt para agregar uno). font-display: block
   para que nunca se vea el nombre del ícono como texto mientras carga, y
   ancho fijo de 1em para que la línea no salte al llegar la fuente.
   Son decorativos: siempre con aria-hidden="true". */
@font-face {
  font-family: "Material Symbols Outlined";
  src: url("../fonts/material-symbols/material-symbols-subset.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

.msym {
  display: inline-block;
  flex: none;
  width: 1em;
  overflow: hidden;
  font-family: "Material Symbols Outlined";
  font-weight: 300;
  font-style: normal;
  font-size: 1.25em;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  color: var(--red);
  user-select: none;
}

/* Título con ícono a la izquierda (servicios, índice de sistemas) */
.with-icon {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
}
.with-icon > .msym { margin-top: 0.02em; }

/* Ícono grande sobre la banda roja */
.band__icon {
  display: block;
  margin-bottom: 12px;
  font-size: 2rem;
  color: var(--on-red);
}