/* ---------------------------------------------------------------------------
   Cotigestión · el sistema visual del sitio

   El mismo del panel: papel cálido, tinta, filetes de un píxel, cifras en
   monoespaciada. Lo que el producto entrega es un documento, así que el sitio
   se lee como uno.

   Vive en un archivo aparte y no dentro de cada página porque ahora son cinco:
   con el estilo copiado cinco veces, cuatro se quedan atrás en el primer
   cambio. Se descarga una vez y las demás páginas ya lo tienen.
   --------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  --papel: #FAF8F4;
  --hoja: #FFFFFF;
  --hoja-tibia: #FCFBF8;
  --filete: #E4E0D7;
  --filete-suave: #F0EDE6;

  --tinta: #1A1815;
  --tinta-suave: #57534C;
  --tinta-tenue: #6E6960;   /* más oscuro que el del panel: esto se lee al sol */
  --tinta-clara: #FAF8F4;
  --filete-oscuro: #33302B;

  --acento: #1E3FA8;
  --acento-suave: #E9ECF7;
  --bien: #1B6E45;
  --bien-suave: #E6F0E9;
  --ojo: #8F5A14;
  --alto: #A3231C;

  --cuerpo: Archivo, "Helvetica Neue", Arial, sans-serif;
  --numero: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* 4 · 8 · 14 · 22 · 34 — la escala del panel. */
  --s: 8px; --m: 14px; --l: 22px; --xl: 34px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.hoja { width: 100%; max-width: 1020px; margin: 0 auto; padding: 0 var(--l); }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); font-weight: 700; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.45rem, 3.6vw, 2.05rem); }
h3 { font-size: 1.05rem; }
p { margin: 0; }
a { color: var(--acento); }
em { font-style: italic; }

.tenue { color: var(--tinta-tenue); font-size: 0.86rem; line-height: 1.55; }
.suave { color: var(--tinta-suave); }
.num { font-family: var(--numero); font-variant-numeric: tabular-nums; }

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

/* --- La barra ------------------------------------------------------------ */

header.barra {
  position: sticky; top: 0; z-index: 10;
  background: rgba(250, 248, 244, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--filete);
}
.barra .hoja { display: flex; align-items: center; gap: var(--l); height: 60px; }

.marca { display: flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: -0.02em; color: inherit; text-decoration: none; }
.marca svg { display: block; }

nav.principal { margin-left: auto; display: flex; align-items: center; gap: var(--l); }
nav.principal a { color: var(--tinta-suave); text-decoration: none; font-size: 0.92rem; }
nav.principal a:hover { color: var(--tinta); }
nav.principal .entrar { color: var(--tinta); }

/* En un teléfono la barra se parte en dos filas: la marca arriba y los enlaces
   abajo. Con todo en una sola fila, cuatro enlaces más la marca no caben en 390
   píxeles y se salen —y lo que se sale de una barra fija no se alcanza nunca—.
   Dos de los enlaces se esconden acá y quedan en el pie, que los lleva todos. */
@media (max-width: 700px) {
  nav.principal .esconde { display: none; }
  .barra .hoja { height: auto; flex-wrap: wrap; gap: var(--s); padding-top: 10px; padding-bottom: 10px; }
  nav.principal {
    margin-left: 0; width: 100%; gap: var(--l);
    overflow-x: auto; scrollbar-width: none;
  }
  nav.principal::-webkit-scrollbar { display: none; }
  nav.principal a { white-space: nowrap; }
}

/* --- Botones ------------------------------------------------------------- */

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px var(--l);
  border: 1px solid var(--tinta); border-radius: 4px;
  background: var(--tinta); color: var(--tinta-clara);
  font: inherit; font-size: 0.95rem; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.boton:hover { background: #000; border-color: #000; }
.boton.plano { background: transparent; color: var(--tinta); border-color: var(--filete); }
.boton.plano:hover { background: var(--hoja); border-color: var(--tinta-tenue); }
/* El mismo botón plano, pero sobre el bloque oscuro. */
.boton.claro { background: transparent; color: #fff; border-color: var(--filete-oscuro); }
.boton.claro:hover { background: rgba(255, 255, 255, 0.08); border-color: #fff; }
/* Sobre fondo oscuro, el botón que hay que apretar. Dos `claro` uno al lado
   del otro se ven iguales, y entonces ninguno de los dos es el principal. */
.boton.claro.lleno { background: #fff; color: var(--tinta); border-color: #fff; }
.boton.claro.lleno:hover { background: #E8E3D9; border-color: #E8E3D9; }

/* --- La portada ------------------------------------------------------------ */

.portada { padding: clamp(var(--xl), 8vw, 88px) 0 clamp(var(--xl), 7vw, 64px); }
.portada .hoja { display: grid; gap: var(--xl); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .portada .hoja { grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 56px; }
}

.sello {
  display: inline-block;
  padding: 4px 10px; border-radius: 3px;
  background: var(--acento-suave); color: var(--acento);
  font-family: var(--numero); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
}

.portada h1 { margin: var(--m) 0; }
.bajada { font-size: clamp(1rem, 2.4vw, 1.18rem); color: var(--tinta-suave); max-width: 32em; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--m); margin-top: var(--l); }
.debajo { margin-top: var(--m); }

/* La conversación donde nace el 4118 */

.charla {
  background: var(--hoja); border: 1px solid var(--filete); border-radius: 8px;
  padding: var(--l); display: flex; flex-direction: column; gap: var(--m);
}
.charla .de-quien {
  display: flex; align-items: center; gap: var(--s);
  padding-bottom: var(--m); border-bottom: 1px solid var(--filete-suave);
  font-size: 0.8rem; color: var(--tinta-tenue);
}
.punto { width: 7px; height: 7px; border-radius: 50%; background: var(--bien); }
.de-quien .hora { margin-left: auto; font-family: var(--numero); font-size: 0.74rem; }

.globo { max-width: 88%; padding: 10px var(--m); border-radius: 4px; font-size: 0.93rem; line-height: 1.5; }
.suyo { align-self: flex-end; background: var(--acento); color: #fff; }
.nuestro { align-self: flex-start; background: var(--hoja-tibia); border: 1px solid var(--filete); }

/* La única animación de la página: la conversación se escribe una vez, al
   entrar en pantalla. Todo lo demás está quieto, como corresponde a un papel. */
.anima .globo { opacity: 0; transform: translateY(6px); }
.anima.andando .globo { animation: aparece 420ms ease forwards; }
.anima.andando .globo:nth-child(2) { animation-delay: 120ms; }
.anima.andando .globo:nth-child(3) { animation-delay: 900ms; }
.anima.andando .globo:nth-child(4) { animation-delay: 1700ms; }
.anima.andando .globo:nth-child(5) { animation-delay: 2500ms; }
@keyframes aparece { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .anima .globo { opacity: 1; transform: none; animation: none; }
}

.papeleta {
  margin-top: var(--s); padding-top: var(--s);
  border-top: 1px solid var(--filete);
  display: grid; grid-template-columns: 1fr auto; gap: 2px var(--m);
  font-family: var(--numero); font-size: 0.8rem; font-variant-numeric: tabular-nums;
}
.papeleta b { font-weight: 500; }
.papeleta .total { border-top: 1px solid var(--filete); margin-top: 4px; padding-top: 4px; font-weight: 500; }
.papeleta span:nth-child(even) { text-align: right; }

/* --- Secciones ------------------------------------------------------------ */

section { padding: clamp(var(--xl), 7vw, 72px) 0; border-top: 1px solid var(--filete); }
.titulo-seccion { max-width: 42em; margin-bottom: clamp(var(--l), 5vw, 44px); display: grid; gap: var(--m); }

/* --- La pista: el 4118 de punta a punta ----------------------------------- */

.pista { display: grid; gap: 0; position: relative; }

.estacion {
  display: grid; gap: var(--l);
  grid-template-columns: 1fr;
  padding: var(--l) 0;
  position: relative;
}
@media (min-width: 860px) {
  .estacion { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; padding: var(--xl) 0; }
  /* El hilo que une las estaciones: un filete vertical al centro del margen. */
  .pista::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0;
    border-left: 1px solid var(--filete);
  }
  .estacion { padding-left: var(--xl); }
  .estacion::before {
    content: ""; position: absolute; left: -5px; top: calc(var(--xl) + 6px);
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--papel); border: 1px solid var(--tinta-tenue);
  }
  .estacion.clave::before { background: var(--acento); border-color: var(--acento); }
}

.estacion .folio {
  font-family: var(--numero); font-size: 0.74rem; color: var(--tinta-tenue);
  letter-spacing: 0.06em; margin-bottom: var(--s);
}
/* El mismo tamaño en h2 y en h3: lo que cambia entre páginas es la PROFUNDIDAD
   —una estación cuelga del h1 de la página, un tomo puede colgar de un h2—, y
   eso es estructura, no tipografía. Un lector de pantalla y un buscador leen
   el nivel; el ojo lee el tamaño. No tienen por qué decir lo mismo. */
.estacion h2, .estacion h3 { font-size: clamp(1.15rem, 2.6vw, 1.45rem); margin-bottom: var(--s); }
.estacion .relato { color: var(--tinta-suave); font-size: 0.97rem; max-width: 30em; }
.estacion .relato + .relato { margin-top: var(--s); }

/* Los documentos: cada estación muestra el papel de verdad */

.documento {
  background: var(--hoja); border: 1px solid var(--filete); border-radius: 6px;
  padding: var(--l);
  box-shadow: 0 1px 0 var(--filete);
  font-size: 0.88rem;
}
.documento .membrete {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--m);
  padding-bottom: var(--m); margin-bottom: var(--m);
  border-bottom: 2px solid var(--tinta);
}
.documento .membrete .quien { font-weight: 600; letter-spacing: -0.01em; }
.documento .membrete .cual { font-family: var(--numero); font-size: 0.78rem; color: var(--tinta-tenue); text-align: right; }

.lineas { display: grid; gap: 6px; font-family: var(--numero); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.linea { display: grid; grid-template-columns: 1fr auto; gap: var(--m); }
.linea span:last-child { text-align: right; }
.linea.raya { border-top: 1px solid var(--filete); padding-top: 6px; }
.linea.fuerte { font-weight: 500; }
.linea .rebaja { color: var(--alto); }

.pie-doc {
  margin-top: var(--m); padding-top: var(--m); border-top: 1px solid var(--filete-suave);
  font-size: 0.78rem; color: var(--tinta-tenue); line-height: 1.5;
}

/* El asiento: Debe y Haber */

.asiento { display: grid; gap: 0; font-family: var(--numero); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.asiento .cab, .asiento .fila {
  display: grid; grid-template-columns: 1fr 92px 92px; gap: var(--m);
  padding: 6px 0;
}
.asiento .cab {
  color: var(--tinta-tenue); font-size: 0.72rem; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--tinta);
}
.asiento .fila { border-bottom: 1px solid var(--filete-suave); }
.asiento .fila:last-of-type { border-bottom: none; }
.asiento .cab span:nth-child(n+2), .asiento .fila span:nth-child(n+2) { text-align: right; }
.asiento .suma {
  display: grid; grid-template-columns: 1fr 92px 92px; gap: var(--m);
  padding: 7px 0 0; margin-top: 2px;
  border-top: 1px solid var(--tinta);
  font-weight: 500;
}
.asiento .suma span:nth-child(n+2) { text-align: right; }
.cuadra {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--m);
  background: var(--bien-suave); color: var(--bien);
  font-family: var(--numero); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.06em; padding: 4px 9px; border-radius: 3px;
}

/* --- La regla -------------------------------------------------------------- */

.regla {
  background: var(--tinta); color: var(--tinta-clara);
  border-radius: 8px; padding: clamp(var(--l), 5vw, 44px);
  display: grid; gap: var(--m);
}
.regla h2 { color: #fff; max-width: 18em; }
.regla > p { color: #C9C4BA; max-width: 44em; }
/* La rejilla de columnas, FUERA de `.regla` y no adentro.
   Estaba escrita como `.regla .dos`, así que un `.dos` puesto como hermano del
   bloque oscuro —que es como estaba en /formulario-29/ y /factura-electronica/—
   no casaba con nada: salía sin rejilla, sin aire y pegado al borde. Ahora la
   rejilla vale en cualquier parte y `.regla` solo cambia los colores. */
.dos {
  display: grid; gap: var(--l); margin-top: var(--s);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.dos > div { padding-top: var(--m); border-top: 1px solid var(--filete); }
.dos h3 { margin-bottom: 6px; }
.dos p { font-size: 0.9rem; color: var(--tinta-suave); }

.regla .dos > div { border-top-color: var(--filete-oscuro); }
.regla .dos h3 { color: #fff; }
.regla .dos p { color: #C9C4BA; }

/* --- La ficha del software ------------------------------------------------- */
/* Las cifras de lo que está construido, presentadas como lo que este producto
   sabe hacer: una papeleta. El total va abajo, con su filete. */

.ficha {
  align-self: flex-start; max-width: 34rem;
  background: var(--hoja-tibia); border: 1px solid var(--filete);
  border-radius: 6px; padding: clamp(20px, 4vw, 32px);
}
.ficha .papeleta { margin-top: 0; padding-top: 0; border-top: 0; }
.ficha .tenue { margin-top: 14px; }

/* --- El índice: todo lo que queda andando ---------------------------------- */

.indice { display: grid; gap: var(--xl); grid-template-columns: 1fr; }
@media (min-width: 800px) { .indice { grid-template-columns: 1fr 1fr; gap: 56px; } }

.tomo .cabeza {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--m);
  border-bottom: 2px solid var(--tinta); padding-bottom: var(--s); margin-bottom: 4px;
}
.tomo .cabeza h2, .tomo .cabeza h3 { font-size: 1.2rem; }
.tomo .cabeza .cual { font-family: var(--numero); font-size: 0.74rem; color: var(--tinta-tenue); letter-spacing: 0.06em; }

.tomo dl { margin: 0; display: grid; }
.tomo .entrada {
  display: grid; grid-template-columns: minmax(9.5em, auto) 1fr; gap: var(--m);
  padding: 11px 0; border-bottom: 1px solid var(--filete);
  align-items: baseline;
}
.tomo dt { font-weight: 600; font-size: 0.93rem; }
.tomo dd { margin: 0; color: var(--tinta-suave); font-size: 0.9rem; }
@media (max-width: 480px) {
  .tomo .entrada { grid-template-columns: 1fr; gap: 2px; }
}

/* --- La franja de cierre ---------------------------------------------------- */
/* Se llamaba `.franja-demo`: era la banda que ofrecía la demo al final de una
   página. La demo se borró del producto y la banda se quedó, porque cerrar una
   página invitando a abrir la cuenta sigue teniendo sentido. El nombre viejo
   era el último lugar del marcado donde quedaba escrita la palabra. */

.franja-cierre {
  display: grid; gap: var(--l); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) { .franja-cierre { grid-template-columns: 1fr auto; } }
.franja-cierre .acciones { margin-top: 0; }
/* Un h2 porque es una sección de la página y no un apartado de lo anterior
   —«Todo esto, andando» no es una cosa que el software NO haga—, con el
   tamaño de siempre: la franja es angosta y un titular de 2rem la rompe. */
.franja-cierre h2 { font-size: 1.05rem; }

/* --- Precios --------------------------------------------------------------- */

.planes { display: grid; gap: var(--l); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.plan {
  background: var(--hoja); border: 1px solid var(--filete); border-radius: 6px;
  padding: var(--l); display: grid; gap: var(--m); align-content: start;
}
.plan.elegido { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
/* El nombre del plan es un h2 —las cuatro tarjetas son las secciones de
   /precios/— y se ve chico al lado del precio, que es lo que se viene a
   mirar. El nivel es para quien navega por encabezados. */
.plan h2 { font-size: 1.05rem; }
.plan .precio { font-family: var(--numero); font-size: 1.85rem; font-weight: 500; line-height: 1.1; }
.plan .precio small { font-size: 0.8rem; color: var(--tinta-tenue); font-weight: 400; }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 0.9rem; color: var(--tinta-suave); }
.plan li { display: flex; gap: var(--s); }
.plan li::before { content: "·"; color: var(--tinta-tenue); }
.plan .boton { width: 100%; }
.nota-precios {
  margin-top: var(--l); padding: var(--m); border-left: 2px solid var(--ojo);
  background: var(--hoja-tibia); color: var(--tinta-suave); font-size: 0.9rem; max-width: 56em;
}

/* --- Preguntas ------------------------------------------------------------- */

.preguntas { display: grid; max-width: 46em; }
details { border-bottom: 1px solid var(--filete); }
details summary {
  padding: var(--m) 0; cursor: pointer; font-weight: 500; list-style: none;
  display: flex; align-items: center; gap: var(--m);
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; margin-left: auto; color: var(--tinta-tenue); font-family: var(--numero); }
details[open] summary::after { content: "–"; }
details p { padding-bottom: var(--l); color: var(--tinta-suave); font-size: 0.95rem; }

/* --- Cierre y pie ---------------------------------------------------------- */

.cierre { text-align: center; display: grid; gap: var(--m); justify-items: center; }
.cierre p { max-width: 34em; color: var(--tinta-suave); }

footer { border-top: 1px solid var(--filete); padding: var(--l) 0 var(--xl); }
footer .hoja { display: flex; flex-wrap: wrap; gap: var(--m) var(--l); align-items: center; }
footer a { color: var(--tinta-suave); text-decoration: none; font-size: 0.88rem; }
footer a:hover { color: var(--tinta); }
footer .derecha { margin-left: auto; }

/* --- Lo que agrega tener varias páginas ------------------------------------ */

/* La página donde uno está, marcada en la barra. Sin esto, un sitio de cinco
   páginas no dice en cuál está parado, que es lo primero que uno mira. */
nav.principal a[aria-current="page"] { color: var(--tinta); font-weight: 600; }

/* La cabecera de cada página interior: el título y una línea, nada más. La
   portada tiene la suya, más grande. */
.cabecera { padding: clamp(var(--l), 6vw, 52px) 0 0; }
.cabecera .hoja { display: grid; gap: var(--m); max-width: 42em; }
.cabecera h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
.cabecera p { color: var(--tinta-suave); font-size: 1.02rem; }

/* La primera sección después de la cabecera no lleva filete arriba: ya está la
   cabecera separándola. */
.cabecera + section { border-top: none; }

/* Lo que va al final de una página, separado de lo anterior por un filete. */
.aparte { margin-top: var(--xl); padding-top: var(--l); border-top: 1px solid var(--filete); }

/* De una página a la siguiente, al pie. Un sitio se recorre; una página suelta
   deja a la gente sin dónde seguir. */
.sigue {
  display: flex; flex-wrap: wrap; gap: var(--m);
  justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--filete); padding-top: var(--l); margin-top: var(--xl);
}
.sigue a { text-decoration: none; font-weight: 500; }
.sigue a:hover { text-decoration: underline; }
.sigue .atras { color: var(--tinta-tenue); font-size: 0.9rem; }

/* Los cuatro pasos de la portada: el recorrido entero en cuatro palabras, para
   quien no va a leer más que eso. Va pegada a la portada —sin filete ni relleno
   arriba— porque es su remate y no una sección aparte. */
.recorrido { border-top: none; padding-top: 0; }

.pasos {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--filete);
}
.pasos a {
  display: grid; gap: 2px; align-content: start;
  padding: var(--m) var(--m) var(--m) 0;
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--filete-suave);
}
.pasos a:hover .que { color: var(--acento); }
.pasos .cuando { font-family: var(--numero); font-size: 0.72rem; color: var(--tinta-tenue); letter-spacing: 0.06em; }
.pasos .que { font-weight: 600; font-size: 0.98rem; }
@media (min-width: 620px) {
  .pasos a { border-bottom: none; border-right: 1px solid var(--filete-suave); padding-left: var(--m); }
  .pasos a:first-child { padding-left: 0; }
  .pasos a:last-child { border-right: none; }
}

/* --- El formulario de consultas ------------------------------------------
 *
 * Lo inserta `consulta.js` al apretar «Escríbanos». Si no hay JavaScript o el
 * servidor no está configurado, nada de esto se dibuja y el botón sigue siendo
 * el enlace de correo de siempre.
 */
.consulta {
  margin-top: var(--m); padding: var(--l);
  background: var(--hoja); border: 1px solid var(--filete); border-radius: 6px;
  text-align: left;
}
.consulta-titulo {
  margin: 0 0 var(--m); font-weight: 600; color: var(--tinta);
}
.consulta label {
  display: block; margin-bottom: 4px;
  font-size: 0.85rem; color: var(--tinta-suave);
}
.consulta input, .consulta textarea {
  display: block; width: 100%; box-sizing: border-box;
  margin-bottom: var(--m); padding: 10px;
  /* 16px o más: abajo de eso, Safari en un iPhone hace zoom al enfocar el
   * campo y la página queda corrida. */
  font: inherit; font-size: 1rem;
  color: var(--tinta); background: var(--papel);
  border: 1px solid var(--filete); border-radius: 4px;
}
.consulta input:focus, .consulta textarea:focus {
  outline: 2px solid var(--acento); outline-offset: 1px;
}
.consulta textarea { resize: vertical; min-height: 90px; }
.consulta-nota, .consulta-aviso {
  margin: 0 0 var(--m); font-size: 0.85rem; color: var(--tinta-tenue);
}
.consulta-aviso { margin: var(--s) 0 0; }
.consulta-aviso.mal { color: var(--alto); }
.consulta-listo { margin: 0; color: var(--bien); font-weight: 500; }