/* ==========================================================================
   Páginas interiores: servicios, Nosotros, Contacto, Libro de Reclamaciones, legales y 404
   Usan tokens.css, base.css y layout.css; aquí va solo lo propio de ellas.
   1. Cabecera de página        6. Llamado final, otros servicios y 404
   2. Ficha del servicio        7. Libro de Reclamaciones: formulario y hoja
   3. Bloques de contenido      8. Páginas legales
   4. Metodología               9. Nosotros: presencia, tecnologías e industrias
   5. Requisitos y comparación 10. Contacto: canales y sede
   Como en la portada, toda animación vive dentro de
   (prefers-reduced-motion: no-preference).
   ========================================================================== */

/* 1. Cabecera de página ------------------------------------------------------ */

.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
  padding: 8px 0 var(--section-y);
}

.page-hero__inner { position: relative; z-index: 1; }

.page-hero__grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: minmax(0, 660px) minmax(0, 420px);
  justify-content: space-between;
  align-items: center;
  gap: 56px 48px;
}
/* Con slider (ficha y figura) o con figura (Nosotros), la columna derecha toma el espacio que sobraba */
.page-hero__grid--slider,
.page-hero__grid--figura { grid-template-columns: minmax(0, 660px) minmax(0, 480px); }
.page-hero__figura { width: 100%; max-width: 480px; justify-self: center; }

.page-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }

.page-hero__title {
  font-size: clamp(2.125rem, 1.25rem + 3.4vw, 4.25rem);   /* 34 → 68 px */
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.page-hero__lead {
  max-width: 590px;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

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

/* Ruta de navegación */
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.breadcrumbs li { display: flex; align-items: center; min-height: 44px; }
.breadcrumbs li + li::before { content: '/' / ''; margin-inline: 10px; color: var(--sw-acero); }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-text); text-decoration: underline; }
.breadcrumbs [aria-current='page'] { color: var(--color-text); }

/* Torre a la que pertenece el servicio: su ícono + código */
.tower-tag { display: inline-flex; align-items: center; gap: 10px; color: var(--color-brand); }
.tower-tag svg { flex-shrink: 0; }

/* Ícono de la torre en grande y con trazo fino.
   Es decorativo y queda detrás de la ficha. */
.page-hero__glyph {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: calc(max(var(--gutter), (100% - var(--container)) / 2) - 170px);
  width: clamp(440px, 50vw, 760px);
  aspect-ratio: 1;
  translate: 0 -46%;
  color: var(--color-brand);
  pointer-events: none;
}
.page-hero__glyph svg { width: 100%; height: 100%; }
.glyph__layer { fill: none; stroke: currentColor; stroke-width: 0.2; }  /* en unidades del viewBox (100) */
.glyph__layer:nth-child(1) { opacity: 0.26; }
.glyph__layer:nth-child(2) { opacity: 0.17; }
.glyph__layer:nth-child(3) { opacity: 0.1; }
.page-hero__glyph--all .glyph__layer { opacity: 0.16; }  /* 404: los íconos de las cuatro torres */
/* El ícono de la torre en grande (viewBox de 24; en la 404, cuatro íconos en 52) */
.page-hero__glyph--icono .glyph__layer { stroke-width: 0.05; stroke-linecap: round; stroke-linejoin: round; opacity: 0.24; }
.page-hero__glyph--all.page-hero__glyph--icono .glyph__layer { stroke-width: 0.1; opacity: 0.16; }

/* En una columna, el ícono queda detrás de la ficha, que va al final */
@media (max-width: 999px) {
  .page-hero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .page-hero__glyph { top: auto; bottom: -90px; right: -150px; width: 520px; translate: none; }
}
@media (max-width: 639px) {
  .page-hero__glyph { bottom: -70px; right: -170px; width: 400px; }
  /* El último tramo repite el titular: se oculta a la vista, no a los lectores de pantalla */
  .breadcrumbs li:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* 2. Ficha del servicio -------------------------------------------------------- */

.spec {
  padding: 24px 28px 10px;
  border-radius: var(--radius-card);
  background: var(--sw-blanco);
  box-shadow: 0 30px 80px rgba(9, 16, 31, 0.12);
}
.spec__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--sw-tinta);
}
.spec__head .eyebrow { color: var(--color-text); }
.spec__code {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-brand);
}
.spec__list { display: grid; grid-template-columns: 108px minmax(0, 1fr); column-gap: 16px; }
.spec__list dt,
.spec__list dd { padding: 13px 0; border-top: 1px solid var(--sw-line); }
.spec__list dt:first-of-type,
.spec__list dd:first-of-type { border-top: 0; }
.spec__list dt {
  padding-top: 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.spec__list dd { font-weight: 500; line-height: 1.4; }

@media (max-width: 639px) {
  .spec { padding: 20px 20px 6px; }
  .spec__list { grid-template-columns: 92px minmax(0, 1fr); column-gap: 12px; }
}

/* Ficha y «Cómo funciona»: slider de dos diapositivas en la cabecera de las
   páginas que tienen banner. Lo mueve assets/js/slider.js, como el de la portada. */
.spec-slider { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.spec-slider__viewport { display: grid; align-items: center; }
.spec-slider__slide { grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; }
.spec-slider__slide.is-active,
.spec-slider__slide.is-leaving { visibility: visible; }
.spec-slider__slide.is-active { opacity: 1; }
.spec-slider__figure { max-width: 480px; margin-inline: auto; }
/* Foto (Gestión de vulnerabilidades): tono de la marca y una leyenda sobre el borde inferior */
.spec-slider__foto { position: relative; max-width: 480px; margin: 0 auto; aspect-ratio: 1; border-radius: 16px; overflow: hidden; }
/* Fotos en blanco y negro (guía de color): el color queda para la marca */
.spec-slider__foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.spec-slider__foto figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 72px 24px 20px;
  background: linear-gradient(to top, rgba(9, 16, 31, 0.85), rgba(9, 16, 31, 0));
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.spec-slider__controls { display: flex; align-items: center; gap: 20px; }
.spec-slider__tabs { flex: 1; min-width: 0; display: flex; gap: 16px; }
.spec-slider__tab {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 10px 0 12px;
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  color: var(--color-text-muted);
}
.spec-slider__tab[aria-selected="true"] { color: var(--color-text); }
.spec-slider__tab-index { color: var(--color-brand); font-weight: 600; margin-right: 8px; }
.spec-slider__tab-track {
  position: relative;
  width: 100%;
  height: 2px;
  overflow: hidden;
  background: var(--sw-line-strong);
}
.spec-slider__tab-track::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-brand);
  transform-origin: left center;
  transform: scaleX(0);
}
.spec-slider__tab[aria-selected="true"] .spec-slider__tab-track::after { transform: scaleX(var(--progress, 1)); }

/* El ícono grande de fondo acompaña a la ficha: se aparta mientras se ve la figura */
.page-hero:has(.spec-slider[data-activa]:not([data-activa="ficha"])) .page-hero__glyph { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .spec-slider__slide { transition: opacity 0.6s var(--ease-out), visibility 0s linear 0.6s; }
  .spec-slider__slide.is-active { transition: opacity 0.6s var(--ease-out), visibility 0s; }
  .page-hero__glyph { transition: opacity 0.6s var(--ease-out); }
}

/* Marcas con las que trabajamos: en gris; con su color al pasar el mouse */
.brands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px 48px;
  list-style: none;
}
.brands img { height: 34px; width: auto; filter: grayscale(1); opacity: 0.7; transition: filter var(--dur-fast) ease, opacity var(--dur-fast) ease; }
.brands li:hover img { filter: none; opacity: 1; }
/* Ajuste óptico: los logos no pesan lo mismo a igual altura */
.brands img[alt="Qualys"] { height: 40px; }
.brands img[alt="Rapid7"] { height: 28px; }
@media (max-width: 639px) {
  .brands { justify-content: flex-start; gap: 28px 36px; }
  .brands img { height: 26px; }
}

/* Captura (o vista ilustrativa) de una plataforma */
.captura { max-width: 720px; margin: 56px auto 0; }
.captura img { width: 100%; height: auto; border: 1px solid var(--sw-line); border-radius: 14px; box-shadow: 0 24px 48px -28px rgba(9, 16, 31, 0.35); }
.captura figcaption {
  margin-top: 14px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* 3. Bloques de contenido -------------------------------------------------------- */

/* Presentación: título a la izquierda, texto a la derecha */
.intro {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 640px);
  justify-content: space-between;
  gap: 28px 48px;
}
.intro__titles { display: flex; flex-direction: column; gap: 14px; }
.intro__title {
  font-size: clamp(1.875rem, 1.35rem + 1.8vw, 2.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.prose { display: flex; flex-direction: column; gap: 18px; font-size: 1.125rem; line-height: 1.6; color: var(--color-text-muted); }
.prose p { text-wrap: pretty; }

/* Tarjetas sin caja, con el mismo filo superior que las torres de la portada */
.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 24px;
  list-style: none;
}
.features--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feature {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 22px;
  border-top: 2px solid var(--sw-tinta);
}
.feature .eyebrow { color: var(--color-brand); }
.feature__title { font-size: 1.375rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.feature__text { line-height: 1.55; color: var(--color-text-muted); }

/* Una afirmación destacada: el resultado del servicio */
.outcome {
  margin-top: 64px;
  padding: 32px 40px;
  border-radius: var(--radius-card);
  background: var(--sw-tint);
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px 32px;
}
.outcome .eyebrow { color: var(--color-brand); }
.outcome__text {
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* Beneficios en una línea, separados por filetes */
.benefits {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 24px;
  list-style: none;
  font-weight: 600;
  line-height: 1.35;
}
.benefits li { padding: 18px 0; border-top: 1px solid var(--sw-line-strong); }

@media (max-width: 999px) {
  .intro { grid-template-columns: minmax(0, 1fr); }
  .features, .features--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outcome { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .features, .features--4, .benefits { grid-template-columns: minmax(0, 1fr); }
  .outcome { margin-top: 48px; padding: 26px 24px; }
}

/* 4. Metodología: pasos en orden, por eso numerados ---------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 40px 24px;
  list-style: none;
  counter-reset: paso;
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 28px;
  border-top: 1px solid var(--sw-line-strong);
  counter-increment: paso;
}
.step::before {
  content: counter(paso, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-brand);
}
.step::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-brand);
}
.step__title { font-size: 1.1875rem; font-weight: 700; line-height: 1.25; }
.step__text { line-height: 1.55; color: var(--color-text-muted); }

@media (max-width: 639px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .step { padding: 0 0 32px 28px; border-top: 0; border-left: 1px solid var(--sw-line-strong); }
  .step:last-child { padding-bottom: 0; border-left-color: transparent; }
  .step::after { top: 3px; left: -5px; }
}

/* 5. Requisitos y comparación ---------------------------------------------------- */

.checklists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.checklists--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.checklist { display: flex; flex-direction: column; gap: 16px; }
.checklist__title { font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.checklist__intro,
.checklist__note { color: var(--color-text-muted); }
.checklist__note { font-size: 0.9375rem; }
.checklist ul { list-style: none; }
.checklist li {
  position: relative;
  padding: 14px 0 14px 30px;
  border-top: 1px solid var(--sw-line);
  line-height: 1.5;
}
.checklist li:last-child { border-bottom: 1px solid var(--sw-line); }
.checklist li::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 2px;
  width: 9px;
  height: 9px;
  background: var(--color-brand);
}

.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.compare__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 30px 32px;
  border-radius: var(--radius-card);
  background: var(--sw-blanco);
  border: 1px solid var(--sw-border);
}
.compare__item.is-current { border: 2px solid var(--color-brand); }
.compare__item .eyebrow { color: var(--color-brand); }
.compare__title { font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.compare__text { line-height: 1.55; color: var(--color-text-muted); }
.compare__item .text-link { margin-top: auto; font-weight: 600; }
.compare__here {
  margin-top: auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

@media (max-width: 899px) {
  .checklists, .compare { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .compare__item { padding: 24px; }
}

/* 6. Llamado final, otros servicios y 404 --------------------------------------- */

.cta-band { background: var(--sw-cobalto); color: #FFFFFF; }
.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 48px;
  padding-block: var(--section-y);
}
.cta-band__text { max-width: 660px; display: flex; flex-direction: column; gap: 18px; }
.cta-band .eyebrow { color: var(--sw-bruma); }
.cta-band__title {
  font-size: clamp(2rem, 1.35rem + 2.2vw, 3.25rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.cta-band__lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--sw-bruma); text-wrap: pretty; }
.cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.cta-band .text-link { color: #FFFFFF; }
.cta-band .text-link:hover { color: var(--sw-bruma); }

.related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
}
.related--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.related a {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 0 8px;
  border-top: 2px solid var(--sw-tinta);
  text-decoration: none;
}
.related__tag { display: inline-flex; align-items: center; gap: 10px; color: var(--color-brand); }
.related__name { font-size: 1.375rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.related__text { line-height: 1.5; color: var(--color-text-muted); }
.related a:hover { color: inherit; }
.related a:hover .related__name { color: var(--color-brand); text-decoration: underline; text-decoration-thickness: 2px; }

@media (max-width: 999px) {
  .related, .related--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .related, .related--4 { grid-template-columns: minmax(0, 1fr); }
}

.error-page .page-hero__title { max-width: 760px; }

/* Confirmar o cancelar la suscripción a las novedades (assets/js/suscripcion.js) */
/* Cada estado (pedir, listo, enlace no válido) ordena su texto como .page-hero__text */
.accion-page [data-vista] { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.accion-page [data-vista][hidden] { display: none; }
.accion-estado { margin-top: -4px; font-weight: 500; color: var(--color-text-muted); }
.accion-estado:empty { display: none; }
.accion-estado.is-error { color: var(--color-error); }
.accion-page .page-hero__lead a { color: var(--color-text); }
.accion-page [data-accion]:disabled { cursor: progress; opacity: 0.7; }

/* Animación: el ícono se dibuja trazo por trazo */
@media (prefers-reduced-motion: no-preference) {
  .glyph__layer {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: sw-page-draw 1.6s var(--ease-out) forwards;
  }
  .glyph__layer:nth-child(2) { animation-delay: 0.18s; }
  .glyph__layer:nth-child(3) { animation-delay: 0.36s; }
  .glyph__layer:nth-child(4) { animation-delay: 0.54s; }
}

@keyframes sw-page-draw { to { stroke-dashoffset: 0; } }

/* 7. Libro de Reclamaciones: formulario y hoja ------------------------------------- */

/* Tres datos clave bajo el aviso */
.claim-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 44px;
  margin-top: 4px;
  padding-top: 22px;
  border-top: 1px solid var(--sw-line-strong);
  list-style: none;
}
.claim-facts li { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }

.claim, .receipt { max-width: 880px; }
.claim__noscript {
  max-width: 880px;
  margin-bottom: 32px;
  padding: 20px 24px;
  border-radius: var(--radius-sm);
  background: var(--sw-tint);
}

/* Resumen de errores: aparece al intentar registrar con campos por corregir */
.claim__summary {
  margin-bottom: 48px;
  padding: 22px 26px;
  border: 2px solid var(--color-error);
  border-radius: var(--radius-sm);
  background: var(--sw-blanco);
}
.claim__summary-title { font-weight: 700; }
.claim__summary ul { margin-top: 10px; padding-left: 20px; }
.claim__summary li { padding: 2px 0; }
.claim__summary a { color: var(--color-error); font-weight: 500; }

/* Secciones del formulario, numeradas como el formato oficial de la hoja */
.claim__group { min-width: 0; margin: 0 0 64px; padding: 0; border: 0; }
.claim__legend {
  display: flex;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  margin-bottom: 28px;
  padding: 0 0 16px;
  border-bottom: 2px solid var(--sw-tinta);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.claim__num {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-brand);
}
.claim__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label,
.field > legend { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; }
.field__optional { font-weight: 400; color: var(--color-text-muted); }
.field__hint { font-size: 0.875rem; line-height: 1.45; color: var(--color-text-muted); }
.field__error { font-size: 0.9375rem; font-weight: 500; line-height: 1.4; color: var(--color-error); }

.field :is(input:not([type="radio"]):not([type="checkbox"]), select, textarea) {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--sw-border);
  border-radius: var(--radius-sm);
  background: var(--sw-blanco);
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.45;
  transition: border-color var(--dur-fast) ease;
}
.field :is(input, select, textarea):hover { border-color: var(--sw-acero); }
.field :is(input, select, textarea):focus-visible { border-color: var(--color-brand); outline-offset: 1px; }
.field textarea { min-height: 176px; resize: vertical; }
.field textarea[rows="4"] { min-height: 124px; }
.field ::placeholder { color: var(--sw-grafito-suave); }
.field [aria-invalid="true"] { border-color: var(--color-error); }

/* Lista desplegable con flecha propia (la política de seguridad no admite imágenes data:) */
.field__select { position: relative; }
.field__select select { appearance: none; padding-right: 44px; cursor: pointer; }
.field__select::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 19px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  pointer-events: none;
}
.field__money { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; }

/* Opciones (radio) */
.field--choices { min-width: 0; margin: 0 0 28px; padding: 0; border: 0; }
.field--choices > legend { margin-bottom: 12px; padding: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 12px; }
.choices--cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 20px;
  border: 1px solid var(--sw-border);
  border-radius: var(--radius-sm);
  background: var(--sw-blanco);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.choice:hover { border-color: var(--sw-acero); }
.choice:has(input:checked) { border-color: var(--color-brand); background: var(--sw-tint); box-shadow: inset 0 0 0 1px var(--color-brand); }
.choice input,
.check input { flex-shrink: 0; width: 20px; height: 20px; margin: 0; accent-color: var(--color-brand); }
.choice--card {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 6px 14px;
  padding: 20px 22px;
}
.choice--card input { grid-row: 1 / span 2; margin-top: 2px; }
.choice__label { font-weight: 600; }
.choice--card .choice__label { font-size: 1.0625rem; font-weight: 700; }
.choice__text { font-size: 0.9375rem; font-weight: 400; line-height: 1.5; color: var(--color-text-muted); }

/* Casillas */
.check { display: flex; align-items: flex-start; gap: 12px; margin-top: 28px; font-weight: 500; line-height: 1.45; cursor: pointer; }
.check input { margin-top: 1px; }
.check--strong { margin-top: 0; font-size: 1.0625rem; font-weight: 600; }
.claim__hint-check { margin: 6px 0 0 32px; }

/* Padre, madre o representante: dentro de la sección del consumidor */
.claim__subgroup {
  min-width: 0;
  margin: 24px 0 0;
  padding: 20px 24px 24px;
  border: 1px solid var(--sw-border);
  border-radius: var(--radius-sm);
  background: var(--sw-papel);
}
.claim__sublegend { padding: 0 8px; font-weight: 700; }

/* Respuesta: por correo, con la carta como alternativa discreta */
.claim__answer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  background: var(--sw-tint);
  font-weight: 500;
  line-height: 1.5;
}
.claim__answer svg { flex-shrink: 0; margin-top: 1px; color: var(--color-brand); }
/* Letra chica y pegada a su nota. El área para tocarla crece hacia arriba (::before), sin separarlas */
.check--sutil { position: relative; align-items: center; gap: 10px; margin-top: 20px; font-size: 0.75rem; font-weight: 400; line-height: 1.1; color: var(--color-text-muted); }
.check--sutil::before { content: ''; position: absolute; inset: -14px 0 0; }
.check--sutil input { width: 14px; height: 14px; margin-top: 0; }
.claim__hint-check--sutil { margin: 0 0 0 24px; font-size: 0.6875rem; line-height: 1.1; }

.claim__closing { padding-top: 32px; border-top: 2px solid var(--sw-tinta); }
.claim__privacy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 720px;
  margin-top: 28px;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}
.claim__privacy svg { flex-shrink: 0; margin-top: 2px; }
.claim__privacy a { color: var(--color-text); }
.claim__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.claim__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }
.claim__submit .btn[disabled] { opacity: 0.7; cursor: progress; }
.claim__status { font-weight: 500; color: var(--color-text-muted); }
.claim__status.is-error { color: var(--color-error); }
.claim__legal { max-width: 720px; margin-top: 20px; font-size: 0.875rem; color: var(--color-text-muted); }

/* Hoja registrada: se ve en pantalla y es lo único que se imprime */
.receipt {
  padding: 40px;
  border: 1px solid var(--sw-border);
  border-radius: var(--radius-card);
  background: var(--sw-blanco);
  box-shadow: 0 30px 80px rgba(9, 16, 31, 0.08);
}
.receipt__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--sw-tinta);
}
.receipt__logo { width: auto; height: 44px; }
.receipt__id { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.receipt__title {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.receipt__title:focus { outline: none; }
.receipt__date { color: var(--color-text-muted); }
.receipt__notice { margin-top: 24px; padding: 14px 18px; border-radius: var(--radius-sm); background: var(--sw-tint); font-weight: 500; }
.receipt__notice.is-warning { background: var(--sw-blanco); border: 2px solid var(--color-error); }
.receipt__provider,
.receipt__rows { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.receipt__provider { margin-top: 24px; font-size: 0.9375rem; }
.receipt__provider dt { color: var(--color-text-muted); }
.receipt__section { margin-top: 36px; }
.receipt__section h3 {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sw-line-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand);
}
.receipt__rows dt,
.receipt__rows dd { padding: 11px 0; border-bottom: 1px solid var(--sw-line); }
.receipt__rows dt { padding-right: 16px; font-size: 0.9375rem; color: var(--color-text-muted); }
.receipt__rows dd { white-space: pre-line; overflow-wrap: anywhere; }
.receipt__notes { display: flex; flex-direction: column; gap: 6px; margin-top: 28px; list-style: none; font-size: 0.875rem; color: var(--color-text-muted); }
.receipt__notes li::before { content: '* '; }
.receipt__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 32px; }

.text-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.text-button:hover { color: var(--color-brand); }

@media (max-width: 639px) {
  .claim__grid,
  .choices--cards { grid-template-columns: minmax(0, 1fr); }
  .choices { flex-direction: column; }
  .receipt { padding: 24px 20px; border-radius: 18px; }
  .receipt__id { align-items: flex-start; text-align: left; }
  .receipt__provider,
  .receipt__rows { grid-template-columns: minmax(0, 1fr); }
  .receipt__rows dt { padding-bottom: 0; border-bottom: 0; }
  .receipt__rows dd { padding-top: 4px; }
}

@media print {
  @page { margin: 16mm; }
  body.hoja-registrada { background: #FFFFFF; }
  .hoja-registrada :is(.skip-link, .site-header, .site-footer, .page-hero, .claim-section .section-head, .receipt__actions) { display: none !important; }
  .hoja-registrada .section { padding: 0; }
  .hoja-registrada .container { width: 100%; }
  .hoja-registrada .receipt { max-width: none; padding: 0; border: 0; box-shadow: none; }
  .hoja-registrada .receipt__rows :is(dt, dd) { break-inside: avoid; }
  .hoja-registrada .receipt__section h3 { break-after: avoid; }
}

/* 8. Páginas legales ------------------------------------------------------------ */

.page-hero--legal { padding-bottom: 64px; }
.legal-hero { max-width: 780px; margin-top: 20px; }
.legal-hero__date {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.legal {
  display: grid;
  grid-template-columns: 240px minmax(0, 720px);
  justify-content: space-between;
  align-items: start;
  gap: 48px 64px;
}
.legal__toc { position: sticky; top: calc(var(--header-h) + 32px); display: flex; flex-direction: column; gap: 14px; }
.legal__toc ol { display: flex; flex-direction: column; list-style: none; border-left: 1px solid var(--sw-line-strong); }
.legal__toc a {
  display: flex;
  align-items: center;
  min-height: 40px;
  margin-left: -1px;
  padding-left: 16px;
  border-left: 2px solid transparent;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  text-decoration: none;
}
.legal__toc a:hover { border-left-color: var(--color-brand); color: var(--color-text); }

.legal__body { display: flex; flex-direction: column; gap: 64px; }
.legal__section { display: flex; flex-direction: column; gap: 16px; }
.legal__num { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: 0.1em; color: var(--color-brand); }
.legal__section h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.legal__section :is(p, li, dd) { font-size: 1.0625rem; line-height: 1.65; color: var(--color-text-muted); text-wrap: pretty; }
.legal__section strong { font-weight: 600; color: var(--color-text); }
.legal__section a { font-weight: 500; color: var(--color-text); }
.legal__section ul { display: flex; flex-direction: column; gap: 10px; list-style: none; }
.legal__section ul li { position: relative; padding-left: 22px; }
.legal__section ul li::before {
  content: '';
  position: absolute;
  top: 0.68em;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--color-brand);
}
.legal__list { display: grid; grid-template-columns: 200px minmax(0, 1fr); border-top: 1px solid var(--sw-line-strong); }
.legal__list dt,
.legal__list dd { padding: 16px 0; border-bottom: 1px solid var(--sw-line); }
.legal__list dt { padding-right: 20px; font-weight: 700; color: var(--color-text); }

@media (max-width: 899px) {
  .legal { grid-template-columns: minmax(0, 1fr); }
  .legal__toc { position: static; }
}
@media (max-width: 639px) {
  .legal__list { grid-template-columns: minmax(0, 1fr); }
  .legal__list dt { padding-bottom: 4px; border-bottom: 0; }
  .legal__list dd { padding-top: 0; }
}

/* 9. Nosotros: presencia, tecnologías e industrias -------------------------------- */

/* Presencia: el mapa de noche, sobre Tinta, como en las tarjetas para redes */
.presencia { background: var(--sw-tinta); color: var(--sw-papel); }
.presencia__grid {
  display: grid;
  grid-template-columns: minmax(0, 470px) minmax(0, 600px);
  justify-content: space-between;
  align-items: center;
  gap: 48px 56px;
}
.presencia__texto { display: flex; flex-direction: column; gap: 18px; }
.presencia .eyebrow { color: var(--sw-acero); }
.presencia .section-title { color: #FFFFFF; }
.presencia__lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--sw-bruma); text-wrap: pretty; }

/* Los siete países, de norte a sur como en el mapa; la sede lleva la señal */
.paises { margin-top: 10px; list-style: none; border-top: 1px solid var(--sw-line-on-dark); }
.paises li {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 46px;
  border-bottom: 1px solid var(--sw-line-on-dark);
  font-size: 1.0625rem;
  font-weight: 500;
  color: #FFFFFF;
}
.paises__codigo {
  width: 26px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--sw-acero);
}
.paises__sede {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sw-bruma);
}
.paises__sede::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sw-senal-clara); }

.presencia__mapa { width: 100%; max-width: 600px; justify-self: end; }
/* El mapa en su versión de noche: estas reglas reemplazan los colores del SVG */
.presencia .map-svg { --map-dot: rgba(203, 216, 248, 0.2); --map-hi: var(--sw-cielo); }
.presencia .map-svg .map__dots { fill: var(--map-dot); }
.presencia .map-svg .map__highlight { fill: var(--map-hi); }
.presencia .map-svg #m-scan stop { stop-color: var(--sw-cielo); }
.presencia .map-svg .map__leader { stroke: var(--sw-bruma); }
.presencia .map-svg .map__ping { stroke: var(--sw-senal-clara); }
.presencia .map-svg .map__marker { fill: var(--sw-tinta); stroke: #FFFFFF; }
.presencia .map-svg .map__marker-dot { fill: #FFFFFF; }
.presencia .map-svg .map__label { fill: #FFFFFF; stroke: var(--sw-tinta); }
.presencia .map-svg .map__label tspan { fill: var(--sw-acero); }
.presencia .map-svg [data-country="PE"] .map__marker { fill: var(--sw-senal-clara); stroke: var(--sw-senal-clara); }
.presencia .map-svg [data-country="PE"] .map__marker-dot { fill: var(--sw-tinta); }
.presencia .map-svg :is(.map__scale, .map__north) { display: none; }

/* Tecnologías que implementamos, por especialidad (las mismas marcas de la portada) */
.tecnologias { margin-top: 72px; display: flex; flex-direction: column; gap: 22px; }
.tecnologias__grupos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 36px 24px; }
.tecnologias__grupo { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; border-top: 2px solid var(--sw-tinta); }
.tecnologias__grupo dt { font-size: 1.125rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.tecnologias__grupo ul { display: flex; flex-direction: column; gap: 8px; list-style: none; line-height: 1.4; color: var(--color-text-muted); }

/* Industrias: su ícono, su nombre y lo que está en juego en cada una */
.industrias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 32px; list-style: none; }
.industria {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-content: start;
  column-gap: 20px;
  row-gap: 6px;
  padding-top: 24px;
  border-top: 2px solid var(--sw-tinta);
}
.industria__icono {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--sw-line);
  border-radius: 14px;
  background: var(--sw-blanco);
  color: var(--sw-cobalto);
}
.industria__nombre { font-size: 1.375rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.industria__texto { line-height: 1.55; color: var(--color-text-muted); }

@media (max-width: 999px) {
  .presencia__grid { grid-template-columns: minmax(0, 1fr); }
  .presencia__mapa { max-width: 520px; justify-self: center; }
  .tecnologias__grupos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .industrias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .tecnologias { margin-top: 56px; }
  .tecnologias__grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .industrias { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .industria { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; }
  .industria__icono { width: 44px; height: 44px; border-radius: 12px; }
}

/* 10. Contacto: canales y sede ------------------------------------------------------ */

.contacto__intro { max-width: 760px; margin-top: 20px; }

/* Los cuatro canales: cada tarjeta es un enlace. WhatsApp, la acción principal, va en Tinta */
.canales {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
}
.canal {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 26px 24px;
  border: 1px solid var(--sw-line);
  border-radius: var(--radius-card);
  background: var(--sw-blanco);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--dur-fast) ease, box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.canal:hover { color: var(--color-text); border-color: var(--sw-cobalto); box-shadow: 0 26px 60px rgba(9, 16, 31, 0.1); transform: translateY(-3px); }
.canal__icono {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border-radius: 16px;
  background: var(--sw-tinta);
  color: #FFFFFF;
}
/* Los íconos de los canales (clase .icono, en base.css): blancos, sobre el fondo de su tarjeta */
.canal__icono .icono { width: 30px; height: 30px; }
.canal__nombre {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.canal__dato { font-size: 1.3125rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.canal__texto { line-height: 1.5; color: var(--color-text-muted); }
.canal__accion { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--color-brand); }
.canal__accion svg { transition: transform var(--dur-fast) ease; }
.canal:hover .canal__accion { text-decoration: underline; text-underline-offset: 4px; }
.canal:hover .canal__accion svg { transform: translateX(3px); }
.canal--principal { border-color: var(--sw-tinta); background: var(--sw-tinta); color: #FFFFFF; }
.canal--principal:hover { color: #FFFFFF; border-color: var(--sw-tinta); }
.canal--principal .canal__icono { background: var(--color-action); }
.canal--principal :is(.canal__nombre, .canal__texto) { color: var(--sw-bruma); }
.canal--principal .canal__accion { color: #FFFFFF; }
.canal--principal:focus-visible { outline-color: var(--sw-cobalto); }
.canales__privacidad { margin-top: 24px; font-size: 0.9375rem; color: var(--color-text-muted); }

/* Dónde estamos: los siete países, con la sede marcada */
.sede { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 560px); justify-content: space-between; align-items: end; gap: 32px 48px; }
.sede__texto { display: flex; flex-direction: column; gap: 14px; }
.sede__detalle { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.sede__paises { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.sede__paises li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--sw-line-strong);
  border-radius: var(--radius-pill);
  font-weight: 500;
}
.sede__paises span { font-family: var(--font-mono); font-size: var(--fs-mono-sm); font-weight: 600; letter-spacing: 0.1em; color: var(--color-brand); }
.sede__paises .sede__pais--sede { border-color: var(--sw-tinta); background: var(--sw-tinta); color: #FFFFFF; }
.sede__paises .sede__pais--sede span { color: var(--sw-senal-clara); }

@media (prefers-reduced-motion: reduce) {
  .canal, .canal__accion svg { transition: none; }
  .canal:hover { transform: none; }
  .canal:hover .canal__accion svg { transform: none; }
}
@media (max-width: 1099px) {
  .canales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .sede { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 639px) {
  .canales { margin-top: 40px; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .canal { padding: 24px 22px 20px; }
}