/* ============================================================
   Haricode — páginas de servicio.
   Tokens, base, navegación y pie vienen de tokens.css y site.css.
   ============================================================ */

/* ── PORTADA DE SERVICIO ────────────────────────────────── */
.hero{padding:clamp(64px,9vw,112px) 0 var(--section-y);position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.hero .brand-mark{
  top:-8%;right:-4%;width:min(42vw,540px);height:120%;
  -webkit-mask-image:linear-gradient(200deg,#000 12%,transparent 72%);
  mask-image:linear-gradient(200deg,#000 12%,transparent 72%);
}
@media(max-width:900px){
  .hero .brand-mark{width:76vw;right:-24%;top:auto;bottom:-6%;height:64%;opacity:.04}
}
.crumbs{font-size:var(--fs-sm);color:var(--text-3);margin-bottom:var(--sp-5)}
.crumbs a{color:var(--text-2);transition:color var(--dur)}
.crumbs a:hover{color:var(--text)}
.hero h1{max-width:18ch;margin:var(--sp-4) 0 var(--sp-5)}
.hero .lead{
  max-width:56ch;color:var(--text-2);
  font-size:clamp(var(--fs-md),2vw,var(--fs-lg));line-height:1.55;
}
.hero-actions{display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:center;margin-top:var(--sp-7)}

.trustline{
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);
  margin-top:var(--sp-8);padding-top:var(--sp-5);border-top:1px solid var(--border);
  color:var(--text-2);font-size:var(--fs-sm);
}

/* ── SECCIONES ──────────────────────────────────────────── */
.section{padding:var(--section-y) 0;border-top:1px solid var(--border)}
.section.alt{background:var(--surface-1)}
.section-head{max-width:60ch;margin-bottom:var(--sp-8)}
.section-head h2{margin:var(--sp-4) 0 var(--sp-4)}
.section-head p{color:var(--text-2);line-height:1.65}

/* ── REJILLAS ───────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.grid.two{grid-template-columns:repeat(2,1fr)}

.card .number{
  display:block;font-size:var(--fs-xs);color:var(--text-3);
  font-variant-numeric:tabular-nums;margin-bottom:var(--sp-4);
}
.card h3{margin-bottom:var(--sp-3)}
.card p,.card li{color:var(--text-2);font-size:var(--fs-sm);line-height:1.6}
.card ul{padding-left:var(--sp-4);margin-top:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2)}
.card a.more{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-5);
  color:var(--text);font-weight:var(--fw-medium);font-size:var(--fs-sm);
  border-bottom:1px solid var(--border-strong);padding-bottom:3px;transition:border-color var(--dur)}
.card a.more:hover{border-color:var(--text)}

/* Proceso numerado */
.process{counter-reset:steps}
.process .card{position:relative}
.process .card::after{
  counter-increment:steps;content:"0" counter(steps);
  position:absolute;top:var(--sp-6);right:var(--sp-6);
  color:var(--text-3);font-size:var(--fs-xs);font-variant-numeric:tabular-nums;
}

/* ── BLOQUE PARTIDO ─────────────────────────────────────── */
.split{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-8);align-items:start}
.copy h2{margin-bottom:var(--sp-5)}
.copy p{color:var(--text-2);margin-bottom:var(--sp-4);line-height:1.7;max-width:60ch}
.checklist{list-style:none}
.checklist li{
  color:var(--text-2);font-size:var(--fs-sm);line-height:1.5;
  padding:var(--sp-3) 0;border-top:1px solid var(--border);
}
.checklist li:first-child{border-top:0;padding-top:0}

/* ── PREGUNTAS FRECUENTES ───────────────────────────────── */
.faq{max-width:860px}
.faq details{border-top:1px solid var(--border);padding:var(--sp-5) 0}
.faq details:last-child{border-bottom:1px solid var(--border)}
.faq summary{
  cursor:pointer;font-size:var(--fs-md);font-weight:var(--fw-medium);
  letter-spacing:-.015em;list-style:none;position:relative;padding-right:var(--sp-6);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:0;top:-2px;color:var(--text-3);
  font-size:var(--fs-lg);font-weight:var(--fw-regular);line-height:1;
}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--text-2);font-size:var(--fs-sm);line-height:1.65;margin-top:var(--sp-3);max-width:66ch}

/* ── RESPUESTA DESTACADA ────────────────────────────────── */
.answer{
  border-left:2px solid var(--accent);background:var(--surface-2);
  padding:var(--sp-5) var(--sp-6);margin:var(--sp-6) 0;
  border-radius:0 var(--r-card) var(--r-card) 0;
  color:var(--text-2);line-height:1.65;
}
.answer strong{color:var(--text);font-weight:var(--fw-medium)}

/* ── CIERRE ─────────────────────────────────────────────── */
.cta{padding:var(--section-y) 0;border-top:1px solid var(--border);text-align:center}
.cta h2{max-width:20ch;margin:0 auto var(--sp-5)}
.cta p{color:var(--text-2);max-width:48ch;margin:0 auto var(--sp-7);line-height:1.6}
.cta .hero-actions{justify-content:center;margin-top:0}

/* ── RESPONSIVO ─────────────────────────────────────────── */
@media(max-width:1000px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:var(--sp-7)}
}
@media(max-width:680px){
  .grid,.grid.two{grid-template-columns:1fr}
  .hero-actions .button{width:100%}
  .cta .hero-actions .button{width:auto}
}

/* ── TEXTO CORRIDO ──────────────────────────────────────── */
/* Secciones donde el argumento se sigue leyendo, no se escanea:
   una sola columna estrecha para que la línea no pase de 75 caracteres. */
.prose{max-width:70ch;margin-inline:0 auto}
.prose h3{margin:var(--sp-7) 0 var(--sp-3);font-size:var(--fs-lg);color:var(--text)}
.prose p{color:var(--text-2);line-height:1.7;margin:0 0 var(--sp-4)}
.prose .section-head{margin-bottom:var(--sp-6)}

/* ── TABLA DE DATOS ─────────────────────────────────────── */
/* Desborda dentro de su propio contenedor: la página nunca se desplaza
   horizontalmente en un teléfono. */
.table-wrap{
  overflow-x:auto;margin-top:var(--sp-6);
  border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface-1);
}
.data-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:640px}
.data-table th,.data-table td{
  text-align:left;padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--border);
  vertical-align:top;color:var(--text-2);line-height:1.55;
}
.data-table thead th{color:var(--text);font-weight:var(--fw-medium);border-top:0;background:var(--surface-2)}
.data-table tbody th{color:var(--text);font-weight:var(--fw-medium)}

/* Aclaración al pie de una tabla o de una tarjeta. */
.note{margin-top:var(--sp-4);color:var(--text-3);font-size:var(--fs-sm);line-height:1.6;max-width:80ch}

/* Tarjeta cuyo título es el enlace: el área de toque es el título completo. */
.card h3 a{color:inherit;text-decoration:none}
.card h3 a:hover,.card h3 a:focus-visible{color:var(--accent)}

/* ── DATO CON FUENTE ────────────────────────────────────── */
/* Una cifra verificable y quién la publica. La atribución va en `cite` para que
   sea legible por máquina, no solo por una persona. */
.dato{margin:0}
.dato-cifra{
  font-size:var(--fs-2xl);font-weight:var(--fw-medium);line-height:1.1;
  color:var(--accent);letter-spacing:-.02em;margin:0 0 var(--sp-3);
}
.dato figcaption{color:var(--text-2);font-size:var(--fs-sm);line-height:1.6}
.dato-fuente{display:block;margin-top:var(--sp-2);color:var(--text-3);font-style:normal;font-size:var(--fs-xs)}
.dato-fuente a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.dato-fuente a:hover,.dato-fuente a:focus-visible{color:var(--accent)}