/* ============================================================
   ORQUIDIA — front público

   Dirección: "libro mayor". Reglas horizontales, cifras
   tabulares, columnas alineadas. La personalidad vive en la
   ESTRUCTURA, no en el color.

   Compartida por la portada y las páginas legales, que son
   cuatro documentos del mismo cuaderno.

   TEMA ÚNICO CLARO: la identidad es papel. Un modo oscuro
   contradiría el concepto, así que se declara color-scheme:light
   y no se hereda el ajuste del sistema.
   ============================================================ */

:root{
  color-scheme: light;

  --paper:      #F3F6F8;   /* papel, sesgo frío hacia el acento */
  --paper-2:    #FBFCFD;   /* casi blanco, para bloques elevados */
  --paper-3:    #E8EEF3;   /* franja/entrada de tabla */
  --ink:        #16283A;   /* azul marino a3innuva (su barra lateral) */
  --ink-soft:   #4A5C6E;
  --ink-faint:  #7E8D9B;
  --rule:       #CBD8E1;
  /* La marca: azul y naranja, tomados del logotipo. Son los mismos dos
     colores que ya usa la aplicación —el azul de la barra de a3innuva y el
     naranja de a3factura—, así que web y producto dejan de parecer dos
     empresas distintas. El violeta anterior era bonito y era ajeno.

     Los dos tonos NO son intercambiables, y la diferencia es de contraste,
     no de gusto: el naranja de marca da 1,99:1 sobre este papel, así que
     jamás lleva texto. Dibuja; no dice. */
  --marca-azul:    #0077FF;   /* el azul exacto del logotipo */
  --marca-naranja: #ECA204;   /* el naranja exacto del logotipo */
  --accent:        #0062D6;   /* azul un punto más oscuro: 5,2:1, ya vale para texto */
  --accent-2:      #B85F00;   /* naranja oscurecido: 4,1:1, solo titulares */
  --marca-grad:    linear-gradient(100deg, #0077FF 0%, #ECA204 100%);
  /* Para el texto en degradado hacen falta los dos extremos legibles. */
  --titular-grad:  linear-gradient(100deg, #0062D6 0%, #B85F00 100%);
  --accent-ink:    #FFFFFF;
  --ok:         #2E7D5B;
  --wait:       #A9720F;

  --serif: Charter, "Iowan Old Style", "Palatino Linotype", Palatino, Cambria, Georgia, serif;
  --sans: Candara, Optima, "Segoe UI", "Avenir Next", Corbel, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, "DejaVu Sans Mono", monospace;

  --wrap: 1120px;
  --gut: clamp(1.25rem, 4vw, 3rem);
}

*{ box-sizing:border-box }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }

h1,h2,h3{ font-family:var(--serif); font-weight:600; text-wrap:balance; margin:0 }
h1{ font-size:clamp(2.1rem,4.6vw,3.5rem); line-height:1.08; letter-spacing:-.015em }
h2{ font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.15 }
h3{ font-size:1.12rem; line-height:1.3 }
p{ margin:0 }

.eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint);
}
.lede{ font-size:1.16rem; color:var(--ink-soft); max-width:62ch }

a{ color:inherit }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px }
hr.rule{ border:0; border-top:1px solid var(--rule); margin:0 }

/* ---------------- cabecera ---------------- */
header{ position:sticky; top:0; z-index:20; background:var(--paper); border-bottom:1px solid var(--rule) }
.bar{ display:flex; align-items:center; gap:2rem; height:66px }
.mark{ font-family:var(--serif); font-size:1.32rem; letter-spacing:.02em;
  text-decoration:none; display:flex; align-items:baseline; gap:.55rem }
.mark b{ font-weight:600 }
.mark span{ font-family:var(--mono); font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-faint) }
nav.main{ display:flex; gap:1.6rem; margin-left:auto; font-size:.95rem }
nav.main a{ text-decoration:none; color:var(--ink-soft) }
nav.main a:hover{ color:var(--accent) }
@media (max-width:860px){ nav.main{ display:none } }

.btn{ display:inline-block; font-size:.94rem; padding:.55rem 1.15rem; text-decoration:none;
  border:1px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease }
.btn:hover{ background:var(--ink); color:var(--paper-2) }
.btn-accent{ background:var(--accent); border-color:transparent; color:var(--accent-ink) }
.btn-accent:hover{ background:#0057BE }
.header-cta{ margin-left:auto }

/* ---------------- hero ---------------- */
.hero{ padding:clamp(3rem,8vw,6rem) 0 clamp(2.5rem,5vw,4rem) }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(2rem,5vw,4rem); align-items:end }
@media (max-width:920px){ .hero-grid{ grid-template-columns:1fr } }
h1 em{ font-style:normal; background:var(--titular-grad); -webkit-background-clip:text;
  background-clip:text; color:transparent }
.hero .lede{ margin-top:1.5rem }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem }

.stave{ display:grid; gap:9px; padding-bottom:.6rem }
.stave i{ display:block; height:1px; background:var(--rule) }
.stave i:nth-child(1){ width:100% } .stave i:nth-child(2){ width:86% }
.stave i:nth-child(3){ width:94% } .stave i:nth-child(4){ width:72% }
.stave i:nth-child(5){ width:100%; height:3px; background:var(--marca-grad) }

.stamp{ border:1px solid var(--rule); padding:1.15rem 1.3rem; background:var(--paper-2) }
.stamp p{ font-size:.9rem; color:var(--ink-soft) }
.stamp .who{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:.45rem }

/* ---------------- tira de integraciones ----------------
   El logotipo de Wolters Kluwer ancla la tira porque la condición de
   distribuidor oficial es el argumento más fuerte que hay aquí. Los
   productos van en tipografía y no en logotipo: solo se ponen las marcas
   de las que se tiene el original. */
.strip{ border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--paper-2) }
.strip .wrap{ display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem 2.4rem; padding-block:1.35rem }
.strip .partner{ display:flex; align-items:center; gap:.95rem; padding-right:2.4rem;
  border-right:1px solid var(--rule) }
@media (max-width:760px){ .strip .partner{ border-right:0; padding-right:0 } }
.strip .partner img{ height:44px; width:auto; display:block }
.strip .partner span{ font-size:.88rem; color:var(--ink-soft); max-width:15ch; line-height:1.35 }
.strip ul{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; list-style:none; margin:0; padding:0;
  align-items:center }
.strip li{ font-family:var(--mono); font-size:.84rem; color:var(--ink-soft) }
.strip li s{ text-decoration:none; color:var(--ink-faint) }

/* ---------------- preguntas ----------------
   Sin desplegables: quien llega buscando «¿se equivoca la IA?» tiene que
   encontrar la respuesta en la página, no detrás de un clic. */
.faq{ border-top:1px solid var(--ink) }
.faq > div{ padding:1.5rem 0; border-bottom:1px solid var(--rule);
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:1rem clamp(1.5rem,4vw,3rem) }
@media (max-width:820px){ .faq > div{ grid-template-columns:1fr; gap:.5rem } }
.faq h3{ font-size:1.06rem }
.faq p{ font-size:.95rem; color:var(--ink-soft) }
.faq p + p{ margin-top:.7rem }

section{ padding-block:clamp(3rem,7vw,5.5rem) }
.sec-head{ display:grid; gap:.9rem; margin-bottom:2.5rem; max-width:70ch }

/* ---------------- módulos: el libro mayor ---------------- */
.ledger{ width:100%; border-collapse:collapse; font-size:1rem }
.ledger caption{ text-align:left; padding-bottom:1rem; color:var(--ink-faint);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase }
.ledger th{ text-align:left; font-family:var(--mono); font-weight:400; font-size:.7rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-faint);
  padding:.6rem .8rem; border-bottom:1px solid var(--ink) }
.ledger td{ padding:1.15rem .8rem; border-bottom:1px solid var(--rule); vertical-align:top }
.ledger tbody tr:hover td{ background:var(--paper-3) }
.ledger .cod{ font-family:var(--mono); font-size:.82rem; color:var(--ink-faint); white-space:nowrap }
.ledger h3{ margin-bottom:.3rem }
.ledger p{ font-size:.93rem; color:var(--ink-soft); max-width:52ch }
.ledger .num{ text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums;
  white-space:nowrap; color:var(--ink-soft); font-size:.9rem }
@media (max-width:780px){
  .ledger, .ledger tbody, .ledger tr, .ledger td{ display:block; width:100% }
  .ledger thead{ display:none }
  .ledger td{ border:0; padding:.15rem 0 }
  .ledger tbody tr{ display:block; padding:1.4rem 0; border-bottom:1px solid var(--rule) }
  .ledger .num{ text-align:left }
}
.state{ display:inline-block; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; padding:.2rem .55rem; border:1px solid currentColor; white-space:nowrap }
.s-ok{ color:var(--ok) } .s-dev{ color:var(--accent) } .s-plan{ color:var(--accent-2) }
.note{ margin-top:1.6rem; font-size:.92rem; color:var(--ink-faint); max-width:60ch }

/* ---------------- proceso ---------------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink) }
@media (max-width:860px){ .steps{ grid-template-columns:1fr } }
.step{ padding:1.6rem 1.4rem 1.8rem; border-bottom:1px solid var(--rule); border-right:1px solid var(--rule) }
.step:last-child{ border-right:0 }
@media (max-width:860px){ .step{ border-right:0 } }
.step .n{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--accent);
  display:block; margin-bottom:.7rem }
.step p{ font-size:.94rem; color:var(--ink-soft); margin-top:.45rem }

/* ---------------- capturas del producto ----------------
   La captura grande manda y la pequeña se apoya en ella. El pie
   va debajo en monoespaciada, como el rótulo de una lámina. */
.shots{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(1.2rem,3vw,2rem); align-items:start }
@media (max-width:920px){ .shots{ grid-template-columns:minmax(0,1fr) } }
/* min-width:0 no es cosmético: sin él, `min-width:auto` de la rejilla toma el
   ancho INTRÍNSECO de la captura —1400 px— como mínimo del elemento, y estira
   la página entera. Es la causa habitual del scroll horizontal en móvil. */
figure.shot{ margin:0; min-width:0; display:grid; gap:.7rem }
figure.shot img{ display:block; width:100%; height:auto; border:1px solid var(--rule);
  background:var(--paper-2); box-shadow:0 1px 0 var(--rule), 0 14px 34px -22px rgba(22,40,58,.5) }
figure.shot figcaption{ font-size:.88rem; color:var(--ink-soft) }
figure.shot figcaption b{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); font-weight:400; display:block;
  margin-bottom:.25rem }

/* ---------------- razones ---------------- */
.reasons{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,4vw,3rem) }
@media (max-width:860px){ .reasons{ grid-template-columns:1fr } }
.reason{ border-top:2px solid var(--ink); padding-top:1.1rem }
.reason p{ font-size:.95rem; color:var(--ink-soft); margin-top:.5rem }

/* ---------------- para quién ---------------- */
.who-grid{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--rule); background:var(--paper-2) }
@media (max-width:860px){ .who-grid{ grid-template-columns:1fr } }
.who-col{ padding:clamp(1.6rem,3vw,2.4rem) }
.who-col + .who-col{ border-left:1px solid var(--rule) }
@media (max-width:860px){ .who-col + .who-col{ border-left:0; border-top:1px solid var(--rule) } }
.who-col ul{ margin:1.1rem 0 0; padding:0; list-style:none; display:grid; gap:.7rem }
.who-col li{ font-size:.95rem; color:var(--ink-soft); padding-left:1.4rem; position:relative }
.who-col li::before{ content:"—"; position:absolute; left:0; color:var(--accent) }

/* ---------------- cierre ---------------- */
.close{ background:var(--paper-3); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule) }
.close .wrap{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:2.5rem; align-items:center;
  padding-block:clamp(2.5rem,6vw,4rem) }
@media (max-width:860px){ .close .wrap{ grid-template-columns:1fr } }

/* ---------------- páginas legales ----------------
   Columna estrecha de lectura: son textos que se leen seguidos,
   no se escanean. La numeración de epígrafes es real —los
   apartados se citan por número al ejercer derechos. */
.legal{ padding-block:clamp(2.5rem,6vw,4.5rem) }
.legal .doc{ max-width:74ch }
.legal h1{ font-size:clamp(1.9rem,3.6vw,2.7rem); margin-top:.8rem }
.legal .fecha{ margin-top:1.2rem; font-family:var(--mono); font-size:.78rem;
  color:var(--ink-faint); letter-spacing:.04em }
.legal h2{ font-size:1.25rem; margin-top:2.8rem; padding-top:1.1rem;
  border-top:1px solid var(--rule) }
.legal h3{ font-size:1rem; margin-top:1.8rem }
.legal p, .legal li{ color:var(--ink-soft); font-size:1rem }
.legal p{ margin-top:.9rem }
.legal ul, .legal ol{ margin:.9rem 0 0; padding-left:1.3rem; display:grid; gap:.5rem }
.legal a{ color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(107,11,196,.35) }
.legal a:hover{ border-bottom-color:currentColor }
.legal .datos{ margin-top:1.4rem; border:1px solid var(--rule); background:var(--paper-2);
  padding:1.2rem 1.4rem; display:grid; gap:.35rem; font-size:.95rem }
.legal .datos b{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); font-weight:400 }
.legal table{ width:100%; border-collapse:collapse; margin-top:1.2rem; font-size:.9rem }
.legal th{ text-align:left; font-family:var(--mono); font-weight:400; font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
  padding:.5rem .7rem; border-bottom:1px solid var(--ink) }
.legal td{ padding:.7rem; border-bottom:1px solid var(--rule); color:var(--ink-soft);
  vertical-align:top }
.legal td.mono{ font-family:var(--mono); font-size:.84rem; white-space:nowrap }
.legal .tabla-scroll{ overflow-x:auto }

/* ---------------- pie ---------------- */
footer{ padding-block:2.8rem 3.5rem; font-size:.9rem; color:var(--ink-soft) }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2rem }
@media (max-width:860px){ .foot-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr } }
footer h4{ font-family:var(--mono); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 .8rem; font-weight:400 }
footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem }
footer a{ text-decoration:none; color:var(--ink-soft) }
footer a:hover{ color:var(--accent) }
.corp{ margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:1rem 2rem }
.corp .of{ font-size:1rem; color:var(--ink) }
.corp .of a{ color:var(--accent); text-decoration:none; border-bottom:1px solid currentColor }
.corp .meta{ font-size:.86rem; color:var(--ink-faint) }
.family{ margin-top:1.2rem; display:flex; flex-wrap:wrap; gap:.5rem 1.3rem;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.06em; color:var(--ink-faint) }
.family a{ color:var(--ink-faint); text-decoration:none }
.family a:hover{ color:var(--accent) }
.colophon{ margin-top:1.6rem; font-size:.8rem; color:var(--ink-faint) }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important } }

/* El nombre comercial manda y la descripción funcional queda debajo: quien
   busca «facturas de compra» tiene que seguir encontrándose. */
.ledger .sub{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint); margin:.1rem 0 .45rem }