/* =============================================================
 * HIVEK — landing composition · layer on top of hivek-theme.css
 * The theme file owns tokens and component primitives; this file
 * owns how the sections are laid out on the page. Load it AFTER
 * hivek-theme.css.
 * ============================================================= */

/* ---------- Shell ---------- */
.hv-nowrap { white-space: nowrap; }
.hv-accent { color: var(--hv-cobalto-txt); }
.hv-section--flush-top { padding-top: 0; }

/* ---------- Header ---------- */
/* .hv-logo es la imagen (lo define el theme); esto es el enlace que la envuelve. */
.hv-logo-link { position: relative; display: flex; align-items: center; flex: 0 0 auto; }
/* El logo mide 24px de alto. Como enlace al inicio se toca con el pulgar, así
   que el área crece sin mover la cabecera, igual que en el selector de idioma. */
.hv-logo-link::after { content: ""; position: absolute; inset: -10px -8px; }
.hv-nav { display: flex; align-items: center; gap: 28px; margin-inline: auto; }
/* El nav pasó de seis entradas a ocho al sumar Apps y Blog, y con 28px de hueco
   mide 639px: entre 1000 y 1200 empuja el botón del header fuera de la pantalla.
   El hueco se aprieta sólo en esa franja; de 1200 para arriba sobra sitio y se
   queda como estaba. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .hv-nav { gap: 16px; }
  .hv-nav a { font-size: 12px; }
}
.hv-nav a { white-space: nowrap; transition: color var(--hv-fast); }
.hv-header-right { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; margin-left: auto; }
.hv-lang { display: flex; align-items: center; gap: 2px; font-family: var(--hv-mono); font-size: 12px; letter-spacing: .1em; }
.hv-lang a { position: relative; padding: 6px; color: rgba(244, 242, 238, .62); border-bottom: 1px solid transparent; }
/* El enlace mide 29x29 y a ese tamaño es fácil darle al idioma equivocado con
   el pulgar. El área táctil se amplía con un pseudoelemento invisible en vez de
   con padding, porque el padding movería el subrayado que marca el idioma
   activo. Sube a 44px de alto, que es lo que recomienda Apple, y a lo ancho
   sólo hasta media separación: dos áreas de 44 se solaparían y tocar cerca de
   la barra abriría siempre el mismo idioma. */
.hv-lang a::after { content: ""; position: absolute; inset: -8px -4px; }
.hv-lang a.is-active { color: var(--hv-hueso); border-bottom-color: var(--hv-hueso); }
.hv-lang a:hover { color: var(--hv-hueso); }
.hv-lang span { color: rgba(244, 242, 238, .25); }
.hv-burger {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--hv-line-3); border-radius: var(--hv-radius);
  color: var(--hv-hueso); cursor: pointer; font-size: 16px; line-height: 1;
}
.hv-menu { border-top: 1px solid var(--hv-line); background: var(--hv-vacio); padding: 8px var(--hv-pad) 24px; display: flex; flex-direction: column; }
.hv-menu[hidden] { display: none; }
.hv-menu > a { font-size: 22px; font-weight: 500; letter-spacing: -.02em; padding: 16px 0; border-bottom: 1px solid var(--hv-line); }
.hv-menu-cta { margin-top: 20px; justify-content: center; height: 52px; font-size: 16px; border-bottom: 0; }

@media (max-width: 999px) {
  .hv-nav, .hv-header-cta { display: none; }
  .hv-burger { display: inline-flex; }
}
@media (min-width: 1000px) {
  .hv-menu { display: none !important; }
}

/* ---------- Hero ---------- */
/* Cap the poster height: .hv-hero-body uses margin-top:auto, so any height
   beyond the content lands in the meta-to-headline gap. Without a ceiling
   that gap reaches ~410px on a 1200px-tall screen. The cap carries the
   meta row's 12px/20px breathing room, otherwise the slack just absorbs it. */
.hv-hero { min-height: min(calc(100vh - 64px), 820px); }
.hv-hero-meta {
  position: relative; z-index: 2; width: 100%;
  padding-top: calc(clamp(36px, 5vw, 64px) + 12px);
  padding-bottom: 20px;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-family: var(--hv-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(244, 242, 238, .55);
}
.hv-hero-meta > span { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; }
/* El titular arranca justo debajo de la meta. Antes iba con margin-top:auto,
   que lo empujaba al fondo del hero y lo dejaba a ~283px de la meta. */
.hv-hero-body { position: relative; z-index: 2; width: 100%; padding-top: clamp(40px, 9.5vw, 136px); }
.hv-hero-body h1 { margin: 0; max-width: 1100px; }
.hv-hero-cta-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 28px 48px; margin-top: clamp(32px, 4vw, 56px);
}
.hv-hero-cta-row .hv-lede { margin: 0; max-width: 46ch; }
.hv-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.hv-hero-actions .hv-btn, .hv-hero-actions .hv-link { white-space: nowrap; }
.hv-arrow { font-family: var(--hv-mono); }

/* ---------- Statement ---------- */
.hv-intro {
  padding-top: var(--hv-section); padding-bottom: var(--hv-section-band);
  display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: flex-start;
}
.hv-intro-label { flex: 0 0 auto; width: 180px; padding-top: 10px; }
.hv-intro-body { flex: 1 1 480px; display: flex; flex-direction: column; gap: 32px; }
.hv-intro-h {
  margin: 0; font-size: clamp(28px, 3.6vw, 56px); line-height: 1.1;
  letter-spacing: -.035em; font-weight: 500; max-width: 26ch; text-wrap: pretty;
}
.hv-intro-p { margin: 0; max-width: 60ch; font-size: 17px; line-height: 1.6; color: rgba(244, 242, 238, .68); }

/* ---------- Servicios ---------- */
.hv-rows { display: flex; flex-direction: column; }
.hv-row .hv-body { color: rgba(244, 242, 238, .66); }

/* ---------- Trabajo ---------- */
/* Sobre vacío en vez de noche. Mantiene el borde y el padding de .hv-band,
   solo cambia el fondo. */
.hv-band--vacio { background: var(--hv-vacio); }
.hv-section-head--bare { border-bottom: 0; padding-bottom: 0; }
.hv-cases { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 112px); margin-top: clamp(48px, 6vw, 88px); }
.hv-case-text { flex: 1 1 320px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 8px 0; }
.hv-case-head { display: flex; flex-direction: column; gap: 20px; }
.hv-case-sector { color: var(--hv-cobalto-txt); }
.hv-case-name {
  margin: 0; font-size: clamp(28px, 3.2vw, 48px); font-weight: 600;
  letter-spacing: -.035em; line-height: 1.05; max-width: 16ch; text-wrap: balance;
}
.hv-case-body { margin: 0; font-size: 17px; line-height: 1.6; color: var(--hv-text-2); max-width: 50ch; }
.hv-case-meta > div { display: flex; flex-direction: column; gap: 4px; }
.hv-case-meta dd { margin: 0; font-size: 15px; color: rgba(244, 242, 238, .9); }

/* ---------- Split layout (por qué / faq) ---------- */
.hv-split { display: flex; flex-wrap: wrap; gap: 48px 80px; align-items: flex-start; }
.hv-split-aside { flex: 1 1 360px; display: flex; flex-direction: column; gap: 20px; }
.hv-split-main { flex: 1.2 1 400px; display: flex; flex-direction: column; }
.hv-h2--alt { font-size: var(--hv-h2-alt); max-width: 14ch; text-wrap: balance; }
.hv-why-row { display: flex; gap: 24px; padding: 26px 0; border-top: 1px solid var(--hv-line-2); }
.hv-why-row > .hv-num { flex: 0 0 40px; padding-top: 4px; }
.hv-why-row > div { display: flex; flex-direction: column; gap: 8px; }
.hv-why-row h3, .hv-why-row p { margin: 0; }
.hv-why-row .hv-body { color: rgba(244, 242, 238, .66); max-width: 52ch; }
.hv-why-end { border-top: 1px solid var(--hv-line-2); }

/* ---------- Proceso ---------- */
.hv-process-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; }
.hv-process-title { display: flex; flex-direction: column; gap: 20px; }
.hv-process-sub { max-width: 48ch; color: rgba(244, 242, 238, .66); margin: 0; }
.hv-stepper { margin-top: clamp(48px, 6vw, 88px); }
.hv-process-panel {
  display: flex; flex-wrap: wrap; gap: 24px 64px; align-items: flex-start;
  margin-top: clamp(24px, 3vw, 40px); min-height: 150px;
}
.hv-phase-h {
  flex: 1 1 320px; margin: 0; font-size: clamp(26px, 3vw, 44px); font-weight: 500;
  letter-spacing: -.035em; line-height: 1.08; max-width: 20ch; text-wrap: balance;
}
.hv-phase-body { flex: 1 1 320px; margin: 0; font-size: 17px; line-height: 1.6; color: var(--hv-text-2); max-width: 50ch; padding-top: 6px; }

/* ---------- Planes ---------- */
.hv-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 48px; }
.hv-plan { display: flex; flex-direction: column; gap: 22px; padding: 36px 0 40px; border-bottom: 1px solid rgba(244, 242, 238, .1); }
.hv-plan-head { display: flex; flex-direction: column; gap: 12px; }
.hv-plan-when { font-family: var(--hv-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--hv-polen); }
.hv-plan-name { margin: 0; font-size: clamp(24px, 2.2vw, 32px); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.hv-plan > .hv-body { margin: 0; color: rgba(244, 242, 238, .66); }
.hv-plan-list { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.hv-plan-list li {
  display: flex; align-items: baseline; gap: 12px; font-size: 15px;
  color: rgba(244, 242, 238, .85); padding: 10px 0; border-top: 1px solid var(--hv-line);
}
.hv-bullet { width: 6px; height: 6px; border-radius: 50%; background: var(--hv-cobalto); flex: 0 0 auto; transform: translateY(-1px); }
.hv-plans-note { margin: 24px 0 0; font-family: var(--hv-mono); font-size: 12px; letter-spacing: .08em; color: rgba(244, 242, 238, .55); }

/* ---------- FAQ ---------- */
.hv-faq-section { border-top: 1px solid var(--hv-line); }
.hv-faq-section .hv-section { padding-block: var(--hv-section-band); }
.hv-split--faq { gap: 40px 80px; }
.hv-faq-aside { flex: 1 1 280px; }
.hv-faq-aside .hv-h2--alt { max-width: 12ch; }
.hv-faq-list { flex: 1.4 1 420px; border-top: 1px solid var(--hv-line-2); }
.hv-acc-body[hidden] { display: none; }

/* ---------- Contacto ---------- */
.hv-contact { position: relative; overflow: hidden; }
.hv-contact-grid { position: relative; display: flex; flex-wrap: wrap; gap: 56px 80px; align-items: flex-start; }
.hv-contact-lede { flex: 1 1 360px; display: flex; flex-direction: column; gap: 28px; }
.hv-contact-h {
  margin: 0; font-size: clamp(40px, 5.6vw, 92px); line-height: .96;
  letter-spacing: -.045em; font-weight: 700; max-width: 12ch; text-wrap: balance;
}
.hv-contact-sub { margin: 0; font-size: 17px; line-height: 1.6; color: var(--hv-text-2); max-width: 42ch; }
.hv-contact-mail { display: flex; flex-direction: column; gap: 6px; }
.hv-mail-link {
  font-size: clamp(20px, 2vw, 28px); font-weight: 500; letter-spacing: -.02em;
  align-self: flex-start; border-bottom: 1px solid rgba(244, 242, 238, .3); padding-bottom: 2px;
}
.hv-mail-link:hover { border-color: var(--hv-cobalto); color: var(--hv-hueso); }

/* ---------- Wizard ---------- */
.hv-wizard { flex: 1 1 380px; max-width: 560px; display: flex; flex-direction: column; }
.hv-wizard-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 14px; border-bottom: 1px solid rgba(244, 242, 238, .14);
  font-family: var(--hv-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--hv-text-3);
}
.hv-wizard-step { white-space: nowrap; }
.hv-progress > span { transition: background .3s var(--hv-ease); }
.hv-wizard-question, .hv-wizard-final { padding-top: 28px; }
.hv-wizard-question[hidden], .hv-wizard-final[hidden] { display: none; }
.hv-wizard-final { display: flex; flex-direction: column; gap: 18px; }
.hv-wizard-h { margin: 0 0 20px; font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -.03em; line-height: 1.15; }
.hv-wizard-final .hv-wizard-h { margin: 0; }
.hv-options { display: flex; flex-direction: column; }
.hv-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.hv-field.has-error .hv-input, .hv-field.has-error .hv-textarea { border-color: #FF6B6B; }

.hv-wizard-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 32px; }
.hv-wizard-nav-right { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.hv-back {
  cursor: pointer; background: transparent; border: 0; padding: 0; color: rgba(244, 242, 238, .6);
  font-family: var(--hv-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  transition: color var(--hv-fast);
}
.hv-back:hover { color: var(--hv-hueso); }
.hv-back[hidden] { display: none; }
.hv-next { height: 48px; padding: 0 26px; font-size: 15px; }
.hv-form-msg { margin: 18px 0 0; min-height: 1.2em; font-family: var(--hv-mono); font-size: 12px; letter-spacing: .04em; color: var(--hv-text-3); }
.hv-form-msg[data-state="error"] { color: #FF6B6B; }

.hv-done { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid rgba(244, 242, 238, .14); padding-top: 28px; }
.hv-done[hidden] { display: none; }
.hv-done-tag { font-family: var(--hv-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--hv-polen); }
.hv-done-h { margin: 0; font-size: clamp(26px, 2.6vw, 36px); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.hv-done-body { margin: 0; font-size: 17px; line-height: 1.6; color: var(--hv-text-2); }

/* ---------- Footer ---------- */
.hv-footer { border-top: 1px solid var(--hv-line); background: var(--hv-vacio); overflow: hidden; }
.hv-footer-top { padding-top: clamp(40px, 5vw, 64px); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px 48px; }
.hv-footer-blurb { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(244, 242, 238, .55); max-width: 32ch; }
.hv-footer-cols { display: flex; flex-wrap: wrap; gap: 12px 40px; }
.hv-footer-col { display: flex; flex-direction: column; gap: 10px; }
.hv-footer-col a { font-size: 14px; color: rgba(244, 242, 238, .72); }
.hv-footer-col a:hover { color: var(--hv-hueso); }
.hv-footer-legal {
  padding-top: clamp(40px, 5vw, 72px); display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 8px 24px;
  font-family: var(--hv-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--hv-text-4);
}
.hv-wordmark { padding-top: 24px; height: clamp(90px, 15vw, 220px); overflow: hidden; }
.hv-wordmark img { width: 100%; height: auto; display: block; opacity: .92; }

/* ---------- Narrow ---------- */
@media (max-width: 760px) {
  .hv-hero-meta { font-size: 11px; gap: 10px 24px; }
  .hv-hero-meta > span { white-space: normal; }
  .hv-intro-label { width: auto; flex: 1 1 100%; padding-top: 0; }
  .hv-row > .hv-num { flex-basis: 40px; }
  .hv-case:nth-child(even) { flex-direction: row; }
  .hv-wizard-nav-right { gap: 14px; }
}

/* ---------- Legal pages (privacy / terms) ----------
   Ported off the retired langchain/redesign themes so the whole site runs
   on the hivek tokens. */
.legal-page { min-height: 100vh; background: var(--hv-vacio); color: var(--hv-text); padding: 6rem var(--hv-pad) 4rem; }
.legal-container { max-width: 48rem; margin: 0 auto; }
.legal-header { margin-bottom: 3rem; border-bottom: 1px solid var(--hv-line-2); padding-bottom: 2rem; }
.legal-back {
  display: inline-block; color: var(--hv-text-3); font-size: .875rem;
  margin-bottom: 1.5rem; transition: color var(--hv-fast);
}
.legal-back:hover { color: var(--hv-cobalto-txt); }
.legal-header h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; margin: 0 0 .5rem; }
.legal-updated { color: var(--hv-text-3); font-size: .8rem; font-family: var(--hv-mono); letter-spacing: .06em; }
.legal-body section { margin-bottom: 2.5rem; }
.legal-body h2 { font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; margin: 0 0 .75rem; color: var(--hv-text); }
.legal-body h3 { font-size: 1.05rem; font-weight: 600; margin: 1.25rem 0 .5rem; color: var(--hv-text-2); }
.legal-body p { color: var(--hv-text-2); line-height: 1.7; margin: 0 0 .75rem; }
.legal-body ul, .legal-body ol { color: var(--hv-text-2); line-height: 1.7; padding-left: 1.5rem; margin: 0 0 .75rem; }
.legal-body li { margin-bottom: .35rem; }
.legal-body strong { color: var(--hv-text); font-weight: 600; }
.legal-body em { color: var(--hv-text-2); }
.legal-body a { color: var(--hv-cobalto-txt); text-decoration: underline; text-underline-offset: 2px; }
.legal-body a:hover { color: var(--hv-hueso); }
.legal-contact { list-style: none; padding-left: 0; }
.legal-contact li { margin-bottom: .35rem; }

/* ---------- Capacidades (antes: stack) ----------
   Las tarjetas dejaron de ser nombres de herramienta y ahora son capacidades
   con su caso, así que necesitan sitio para dos líneas de texto y un pie. */
.hv-stack-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px; margin-top: 32px;
}
.hv-stack-item { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.hv-stack-name { font-size: 18px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.hv-stack-body { font-size: 15px; line-height: 1.55; color: rgba(244, 242, 238, .68); flex: 1 1 auto; }
.hv-stack-ver { display: flex; align-items: center; gap: 8px; color: var(--hv-text-3); transition: color var(--hv-t-control) ease; }
.hv-stack-item:hover .hv-stack-ver { color: var(--hv-cobalto-txt); }
.hv-stack-note { display: block; margin-top: 24px; }

/* ---------- Comparativa (dentro de Modelos) ---------- */
.hv-compare { margin-top: clamp(56px, 7vw, 96px); display: flex; flex-direction: column; gap: 20px; }
/* La tabla es el único bloque que puede exceder el ancho: se desplaza sola. */
.hv-table-wrap { overflow-x: auto; }
.hv-compare .hv-notice { align-self: flex-start; max-width: 68ch; }

/* ---------- /voz — referencia de voz y tono (interna) ---------- */
.hv-voz-nav { margin-left: auto; margin-right: 0; display: flex; gap: 24px; }
.hv-voz-open { display: flex; flex-direction: column; gap: 20px; }
.hv-voz-open .hv-h2 { max-width: 22ch; }
.hv-voz-lede { max-width: 68ch; font-size: 17px; }
.hv-voz-note { max-width: 72ch; margin: 0 0 24px; color: var(--hv-text-2); }
.hv-voz-ej { color: var(--hv-text-2); font-style: italic; }

/* Pares sí/no: dos columnas que colapsan a una en pantallas angostas */
.hv-voz-pairs { display: grid; grid-template-columns: 1fr; gap: 12px; }
.hv-voz-pair { padding: 24px; display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 860px) {
  .hv-voz-pair { grid-template-columns: 1fr 1fr; }
  .hv-voz-why { grid-column: 1 / -1; }
}
.hv-voz-side { display: flex; flex-direction: column; gap: 10px; }
.hv-voz-no { color: rgba(244, 242, 238, .45); }
.hv-voz-si { color: var(--hv-cobalto-txt); }
.hv-voz-text { margin: 0; font-size: 18px; line-height: 1.4; letter-spacing: -.015em; }
.hv-voz-strike { color: var(--hv-text-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.hv-voz-why { margin: 0; padding-top: 16px; border-top: 1px solid var(--hv-line-c); max-width: 76ch; }

.hv-voz-never { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.hv-voz-never-item { min-height: 0; gap: 12px; justify-content: flex-start; }
.hv-voz-never-item .hv-body { color: var(--hv-text-2); }

.hv-footer { border-top: 1px solid var(--hv-line); }
#main code { font-family: var(--hv-mono); font-size: .92em; color: var(--hv-hueso); }

/* ---------- Páginas de servicio ----------
   Estas páginas se construyeron sobre .legal-page y salían sin cabecera ni
   pie, con tipografía de documento y el botón principal ilegible: la regla
   `.legal-body a` de arriba tiene especificidad 0,2,0 y le gana el color a
   .hv-btn, así que el texto salía azul sobre el azul del relleno.

   Ahora reusan las bandas, el split y los casos del tema. Lo que queda aquí es
   sólo lo que no existía: la portada de una página interior, las listas de
   señales y de entregables, y el resumen de proceso y modelos. */
/* La portada respira en 240px porque cada sección trae una pieza grande. Aquí
   el contenido de cada banda son dos columnas de texto corto, y con ese mismo
   ritmo la página sale medio vacía. */
.svc-page { --hv-section: clamp(80px, 9vw, 136px); --hv-section-band: clamp(72px, 8vw, 120px); }
.svc-hero { padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(48px, 7vw, 104px); }
.svc-crumb { margin-bottom: clamp(28px, 4vw, 48px); }
.svc-hero-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px 64px; }
.svc-hero-main { flex: 1 1 520px; display: flex; flex-direction: column; gap: 20px; }
.svc-h1 { max-width: 20ch; text-wrap: balance; }
.svc-hero-lede { max-width: 58ch; }
.svc-hero-cta { flex: 0 0 auto; }

/* El problema se lee como afirmación, no como párrafo de documento: el mismo
   registro que el bloque de apertura de la portada. */
.svc-statement {
  margin: 0; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.15;
  letter-spacing: -.03em; font-weight: 500; max-width: 30ch; text-wrap: pretty;
}

.svc-lista-label { display: block; padding-bottom: 8px; }
.svc-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.svc-lista li {
  display: flex; align-items: baseline; gap: 14px; padding: 16px 0;
  border-top: 1px solid var(--hv-line-c);
  font-size: 17px; line-height: 1.5; color: rgba(244, 242, 238, .85);
}
.svc-lista li:last-child { border-bottom: 1px solid var(--hv-line-c); }

.svc-p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--hv-text-2); max-width: 56ch; }
.svc-entrega { gap: 28px; }
.svc-entrega .svc-lista-label { padding-bottom: 0; }
.svc-mas { align-self: flex-start; }

.svc-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 56px 80px; }
.svc-resumen-col { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.svc-pasos { margin: 0; padding: 0; list-style: none; width: 100%; display: flex; flex-direction: column; }
.svc-paso {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--hv-line-c);
}
.svc-paso:last-child { border-bottom: 1px solid var(--hv-line-c); }
.svc-paso .hv-num { flex: 0 0 auto; }
.svc-paso-label { font-size: 16px; font-weight: 500; letter-spacing: -.015em; color: rgba(244, 242, 238, .9); margin-right: auto; }
.svc-paso .hv-num + .svc-paso-label { margin-left: 4px; }
.svc-paso .hv-plan-when { flex: 0 0 auto; }

.svc-cierre { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px 80px; align-items: flex-start; }
.svc-cierre-main { flex: 1 1 420px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.svc-otros { flex: 0 1 300px; display: flex; flex-direction: column; gap: 4px; }
.svc-otros .hv-label { padding-bottom: 12px; }
.svc-otros a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--hv-line-c);
  font-size: 16px; color: rgba(244, 242, 238, .78);
}
.svc-otros a:last-child { border-bottom: 1px solid var(--hv-line-c); }
.svc-otros a:hover { color: var(--hv-hueso); }
.svc-otros a:hover .hv-arrow { color: var(--hv-cobalto-txt); }

/* Defensa para cualquier página que siga usando la plantilla legal: un botón
   dentro de .legal-body debe verse como botón. Sin esto el texto vuelve a
   salir azul sobre azul. */
.legal-body a.hv-btn { color: var(--hv-hueso); text-decoration: none; }
.legal-body a.hv-btn:hover { color: var(--hv-hueso); }

/* ---------- Caso sin foto ----------
   Seis casos y dos fotos. El panel dibujado ocupa el mismo hueco que la foto y
   se apoya en piezas que ya existen: la luz de foco, el haz y la etiqueta mono. */
.hv-case-img--dibujo {
  display: grid; align-content: end; gap: 14px; padding: 28px;
  background: var(--hv-surface) padding-box, var(--hv-surface-edge) border-box;
  border: 1px solid transparent; position: relative; overflow: hidden;
}
.hv-case-img--dibujo::before {
  content: ""; position: absolute; width: 70%; aspect-ratio: 1;
  background: var(--hv-foco); pointer-events: none;
}
/* De dónde viene la luz y qué la acompaña. Tres variantes en ciclo, para que
   una lista larga no parezca la misma tarjeta repetida. */
.es-v1::before { inset: -30% -10% auto auto; }
.es-v2::before { inset: auto auto -35% -18%; }
.es-v3::before { inset: -28% auto auto -22%; }
.es-v2::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(244,242,238,.05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(244,242,238,.05) 0 1px, transparent 1px 64px);
  -webkit-mask-image: linear-gradient(200deg, #000 10%, transparent 75%);
  mask-image: linear-gradient(200deg, #000 10%, transparent 75%);
}
.es-v3 .caso-dibujo-num { top: auto; bottom: 22px; left: auto; right: 26px; }
.es-v3 .caso-dibujo-beam { width: 55%; }
.caso-dibujo-num {
  position: absolute; top: 18px; left: 26px;
  font-family: var(--hv-mono); font-size: clamp(56px, 9vw, 110px); line-height: 1;
  color: rgba(244, 242, 238, .10); letter-spacing: -.04em;
}
.caso-dibujo-sector { position: relative; max-width: 22ch; }
.caso-dibujo-beam { position: relative; width: 100%; }

/* ---------- Página de capacidades ----------
   Una lista larga agrupada por área. Las filas se separan con la misma
   hairline que el resto del sitio en vez de con tarjetas: treinta y tantas
   tarjetas seguidas se leen como un catálogo de piezas, no como una lista de
   lo que sabemos hacer. */
.cap-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.cap-item { padding: 22px 0; border-top: 1px solid var(--hv-line-c); display: flex; flex-direction: column; gap: 8px; }
.cap-item:last-child { border-bottom: 1px solid var(--hv-line-c); }
.cap-titulo { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
.cap-cuerpo { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(244, 242, 238, .68); max-width: 58ch; }
.cap-caso { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 2px; transition: color var(--hv-t-control) ease; }
.cap-caso:hover { color: var(--hv-cobalto-txt); }
.cap-indice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(28px, 4vw, 44px); }
.cap-indice .hv-chip { text-decoration: none; }
/* El ancla queda bajo la cabecera fija si no se le deja sitio. */
.svc-page section[id] { scroll-margin-top: 76px; }