/* ============================================================
   OPLENSBI — Contacto
   Hoja de estilos exclusiva de /contacto/. Reutiliza los tokens de
   style.css (colores, tipografía, espaciado) — no redefine valores del
   Design System 1.2.

   Misma excepción documentada que /diagnostico/, /dashboard/ y
   /metodologia/: esquina recta en botones y max-width de 1360px del
   contenedor — página del rediseño de 5 páginas, ver
   docs/rediseno/decisiones-pendientes.md punto 1 (nota: ese documento
   todavía lista a Contacto como "sin rediseñar"; queda desactualizado
   tras este batch). Los nombres de clase usan prefijo cont- y no se
   comparten con diagnostico.css/dashboard.css/metodologia.css a propósito.
   ============================================================ */

.pg-contacto {
  --cont-section-y: var(--section-y);
  /* Sin token oficial de error en el Design System 1.2 — mismo criterio
     que los grises "sobre oscuro" de los cierres (ver
     docs/rediseno/decisiones-pendientes.md). Rojo terracota discreto,
     tomado del prototipo aprobado, solo para estado de validación. */
  --cont-color-error: #9A3D32;
}

.pg-contacto .container {
  max-width: 1360px;
}

@media (max-width: 900px) {
  .pg-contacto {
    --cont-section-y: var(--section-y-mobile);
  }
}

/* ============================================================
   TITULARES Y COPY EDITORIAL — reutilizados entre secciones
   ============================================================ */
.cont-section-title {
  font-size: var(--section-title-size);
  line-height: 1.04;
  letter-spacing: -0.045em;
  margin: 0;
  max-width: 900px;
  font-weight: var(--weight-semibold);
  color: var(--color-grafito);
}

.cont-section-copy {
  font-size: var(--text-lg);
  color: var(--color-texto-sec);
  max-width: 650px;
  margin: 0;
}

.pg-contacto .eyebrow {
  margin: 0 0 1rem;
}

.cont-split-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.75fr);
  gap: 4.5rem; /* 72px */
  align-items: end;
}

@media (max-width: 900px) {
  .cont-split-head {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ============================================================
   BOTONES DE ESTA PÁGINA — esquina recta, ver excepción arriba
   ============================================================ */
.cont-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-turquesa);
  border: 1px solid var(--color-turquesa);
  color: var(--color-blanco);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  padding: var(--space-4) var(--space-6);
  min-height: 48px;
  border-radius: 0;
  text-decoration: none;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

.cont-btn-primary:hover,
.cont-btn-primary:focus-visible {
  background-color: var(--color-turquesa-hover);
  border-color: var(--color-turquesa-hover);
}

.cont-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 1px solid var(--color-grafito);
  color: var(--color-grafito);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  padding: var(--space-4) var(--space-6);
  min-height: 48px;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--transition-base), color var(--transition-base);
}

.cont-btn-secondary:hover,
.cont-btn-secondary:focus-visible {
  border-color: var(--color-turquesa);
  color: var(--color-turquesa);
}

.cont-btn-primary[hidden],
.cont-btn-secondary[hidden] {
  display: none;
}

.cont-text-link {
  font-size: var(--text-sm);
  color: var(--color-grafito);
  text-decoration-line: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.cont-text-link:hover,
.cont-text-link:focus-visible {
  color: var(--color-turquesa);
}

.cont-tech-label {
  font: var(--weight-semibold) var(--text-xs) var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--color-texto-sec);
  margin: 0;
}

/* ============================================================
   ACCESIBILIDAD — prefers-reduced-motion
   Se extiende en cada batch que agrega una animación nueva.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cont-hero__flow-draw,
  .cont-hero__flow-dot {
    animation: none !important;
  }

  .cont-hero__flow-draw {
    stroke-dashoffset: 0;
  }

  .cont-hero__flow-dot {
    transform: translateX(548px);
  }

  .cont-cierre__flow-line path,
  .cont-cierre__flow-dot,
  .cont-cierre__flow-labels span {
    animation: none !important;
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

/* ============================================================
   1. HERO
   ============================================================ */
.cont-hero {
  padding: 6.25rem 0 5.75rem; /* 100px / 92px */
  border-bottom: 1px solid var(--color-borde);
}

.cont-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 5.3125rem; /* 85px */
  align-items: center;
}

.cont-hero__title {
  margin: 0;
  font-size: var(--hero-title-size);
  line-height: 0.95;
  letter-spacing: -0.067em;
  font-weight: var(--weight-semibold);
  color: var(--color-grafito);
}

.cont-hero__lead {
  font-size: var(--text-lg);
  line-height: 1.4;
  max-width: 45rem; /* 720px */
  margin: 1.875rem 0 0;
  color: var(--color-grafito);
}

.cont-hero__meta {
  border-top: 1px solid var(--color-borde);
  padding-top: 1.0625rem; /* 17px */
  margin-top: 1.875rem; /* 30px */
  font: 500 var(--text-xs) var(--font-mono);
  color: var(--color-texto-sec);
}

.cont-hero__actions {
  display: flex;
  align-items: center;
  gap: 1.375rem; /* 22px */
  flex-wrap: wrap;
  margin-top: 1.75rem; /* 28px */
}

.cont-hero__sequence {
  border: 1px solid var(--color-borde);
  padding: 1.625rem; /* 26px */
  background: var(--color-fondo);
}

.cont-hero__sequence ol {
  list-style: none;
  margin: 1.75rem 0 0.625rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 pasos desde 2026-08-25, antes 4 */
  gap: 0;
}

.cont-hero__sequence li {
  padding: 0.9375rem;
  border-right: 1px solid var(--color-borde);
}

.cont-hero__sequence li:last-child {
  border-right: 0;
}

.cont-hero__sequence span {
  display: block;
  font: var(--weight-semibold) 0.625rem var(--font-mono);
  color: var(--color-turquesa);
}

.cont-hero__sequence strong {
  display: block;
  font-size: var(--text-sm);
  margin-top: 0.5rem;
  font-weight: var(--weight-semibold);
  color: var(--color-grafito);
}

.cont-hero__sequence svg {
  width: 100%;
  height: auto;
}

.cont-hero__flow-base {
  stroke: var(--color-borde);
  stroke-width: 1;
}

.cont-hero__flow-draw {
  stroke: var(--color-turquesa);
  stroke-width: 2;
  stroke-dasharray: 548; /* = longitud real de la línea (574-26) */
  stroke-dashoffset: 548;
  animation: contHeroFlow 9s ease-in-out infinite;
}

.cont-hero__flow-dot {
  fill: var(--color-turquesa);
  animation: contHeroDot 9s ease-in-out infinite;
  transform-box: fill-box;
}

@keyframes contHeroFlow {
  0%, 8% { stroke-dashoffset: 548; }
  72%, 92% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -548; }
}

@keyframes contHeroDot {
  0%, 8% { transform: translateX(0); }
  72%, 92% { transform: translateX(548px); }
  100% { transform: translateX(548px); opacity: 0; }
}

@media (max-width: 1040px) {
  .cont-hero__grid {
    grid-template-columns: 1fr;
    gap: 3.4375rem; /* 55px */
  }

  .cont-hero__sequence {
    max-width: 47.5rem; /* 760px */
  }
}

@media (max-width: 800px) {
  .cont-hero {
    padding: 4.5rem 0 4.25rem;
  }
}

@media (max-width: 480px) {
  .cont-hero__sequence svg {
    display: none;
  }

  .cont-hero__actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   4. CÓMO FUNCIONA
   ============================================================ */
.cont-como {
  padding: var(--cont-section-y) 0;
}

.cont-como-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 tarjetas desde 2026-08-25, antes 4 */
  gap: 0;
  margin-top: 3.4375rem; /* 55px */
  border-top: 1px solid var(--color-grafito);
}

.cont-como-step {
  padding: 1.5rem 1.5rem 0;
  border-right: 1px solid var(--color-borde);
  min-height: 13.75rem; /* 220px */
}

.cont-como-step:last-child {
  border-right: 0;
}

.cont-como-step h3 {
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  margin: 1rem 0 0.625rem;
  font-weight: var(--weight-semibold);
  color: var(--color-grafito);
}

.cont-como-step p:not(.cont-tech-label) {
  color: var(--color-texto-sec);
  font-size: var(--text-sm);
  margin: 0;
}

.cont-como-nota {
  font: 500 var(--text-xs) var(--font-mono);
  color: var(--color-texto-sec);
  border-top: 1px solid var(--color-borde);
  padding-top: 1.25rem;
  margin-top: 2.625rem; /* 42px */
}

@media (max-width: 800px) {
  .cont-como-grid {
    grid-template-columns: 1fr;
    border-top: 0;
  }

  .cont-como-step {
    border-top: 1px solid var(--color-borde);
    border-right: 0;
    padding: 1.25rem 0;
    min-height: 0;
  }
}

/* ============================================================
   3. FORMULARIO DE CALIFICACIÓN
   Rediseño visual 2026-08-25 — exclusivamente HTML/CSS, sin tocar
   contacto.js. Todo lo que el script necesita (IDs, name=, la clase
   .cont-choice-card que JS alterna con .is-selected, .cont-conditional
   con su data-condition, etc.) se conserva intacto; #contProgressName
   sigue existiendo y JS lo sigue actualizando, solo que ahora vive
   oculto con .sr-only porque el encabezado se simplificó (ver más
   abajo, "Pasos").

   La tarjeta central usa esquina 14px + sombra sutil por pedido
   explícito de esta tarea — excepción puntual a "esquina recta" (ver
   docs/rediseno/decisiones-pendientes.md punto 1), que sigue
   aplicando al resto de botones/contenedores de la página.
   ============================================================ */
.cont-formulario {
  padding: var(--cont-section-y) 0;
  background: var(--color-fondo-sutil);
}

.cont-form-intro {
  max-width: 56.25rem; /* 900px */
}

.cont-form-shell {
  max-width: 51.25rem; /* 820px */
  margin: 3.25rem auto 0;
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(18, 26, 26, 0.04), 0 14px 32px rgba(18, 26, 26, 0.05);
  overflow: hidden;
}

/* -- Controles base dentro del formulario -- */
.cont-form-shell input,
.cont-form-shell select,
.cont-form-shell textarea {
  width: 100%;
  border: 1px solid var(--color-borde);
  background: var(--color-fondo);
  color: var(--color-grafito);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.8125rem;
  min-height: 2.875rem; /* 46px */
  font: inherit;
  font-size: var(--text-sm);
  transition: border-color var(--transition-base);
}

.cont-form-shell input:focus-visible,
.cont-form-shell select:focus-visible,
.cont-form-shell textarea:focus-visible {
  border-color: var(--color-turquesa);
  outline: none;
}

.cont-form-shell textarea {
  resize: vertical;
}

.cont-form-shell input[type="radio"],
.cont-form-shell input[type="checkbox"] {
  width: auto;
  min-height: auto;
  accent-color: var(--color-turquesa);
}

.cont-form-shell button {
  font: inherit;
  cursor: pointer;
}

/* -- Progreso --
   Encabezado simplificado 2026-08-25: antes acumulaba "PASO 1 DE 2" +
   "Su necesidad" (aquí) + "01" + "SU NECESIDAD" (en cada paso, ver
   .cont-step-heading más abajo). Ahora solo queda este indicador
   pequeño + la barra; #contProgressName sigue en el DOM (JS lo seguía
   actualizando) pero pasa a .sr-only — visible para lectores de
   pantalla, no para el resto. */
.cont-form-progress {
  padding: 1.125rem 1.75rem 1rem; /* 18px / 28px / 16px */
  border-bottom: 1px solid var(--color-borde);
}

.cont-form-progress-head {
  display: flex;
  align-items: center;
}

.cont-form-progress-head span {
  font: var(--weight-semibold) 0.6875rem var(--font-mono);
  color: var(--color-texto-sec);
  letter-spacing: 0.08em;
}

.cont-progress-track {
  height: 3px;
  border-radius: 999px;
  background: #e8eceb;
  margin-top: 0.875rem;
  overflow: hidden;
}

.cont-progress-track span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  transform-origin: left;
  transform: scaleX(0.5);
  background: var(--color-turquesa);
  transition: transform 0.25s ease;
}

/* -- Resumen de errores -- */
.cont-error-summary {
  margin: 1.5rem 1.75rem 0;
  padding: 1rem 1.125rem;
  border: 1px solid var(--cont-color-error);
  border-radius: var(--radius-sm);
  background: var(--color-fondo);
}

.cont-error-summary strong {
  color: var(--cont-color-error);
}

/* Chip de contexto servicio/paquete — v1.2, Parte 7/8.
   Bug preexistente corregido 2026-08-25 (no introducido por este
   rediseño): al fijar "display" sin excluir [hidden], el chip
   quedaba siempre visible (vacío) aunque JS no activara el contexto
   — mismo patrón de corrección que ya existía para
   .cont-btn-primary[hidden]/.cont-btn-secondary[hidden] más arriba
   en este archivo, solo que faltaba aplicarlo acá. */
.cont-package-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 1.5rem 1.75rem 0;
  padding: 0.625rem 1.125rem;
  border: 1px solid var(--color-turquesa);
  border-radius: 999px;
  background: rgba(11, 122, 119, 0.06);
  color: var(--color-grafito);
  font-size: var(--text-sm);
}

.cont-package-chip[hidden] {
  display: none;
}

.cont-package-chip button {
  border: 0;
  background: none;
  color: var(--color-texto-sec);
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.cont-package-chip button:hover,
.cont-package-chip button:focus-visible {
  color: var(--color-grafito);
}

.cont-error-summary ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
  color: var(--color-grafito);
  font-size: var(--text-sm);
}

/* -- Pasos -- */
.cont-form-step {
  padding: 1.75rem 2.625rem; /* 28px / 42px — compactado 2026-08-25 */
}

.cont-step-heading {
  margin-bottom: 1.25rem;
}

.cont-step-heading h3 {
  font-size: var(--text-2xl); /* 24px — antes clamp 28px→42px, paso de la
    escala tipográfica un nivel más chico que --section-title-size: este
    es un subtítulo dentro de una tarjeta, no el H2 de apertura de la
    página */
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: var(--weight-semibold);
  color: var(--color-grafito);
}

/* JS (contacto.js, showStep()) mueve el foco a este <h3> con
   tabindex="-1" en cada cambio de paso, solo para que lectores de
   pantalla anuncien el nuevo título — no es un control interactivo.
   Sin esta regla, el navegador dibuja su anillo de foco por defecto
   alrededor del título (el "recuadro turquesa" reportado), que no
   cumple ninguna función para usuarios videntes. */
.cont-step-heading h3:focus {
  outline: none;
}

.cont-step-instruction {
  margin: 0.5rem 0 0;
  font-size: var(--text-base);
  color: var(--color-texto-sec);
  max-width: 38rem;
}

/* -- Tarjetas de opción (paso 1) --
   Antes 3 columnas con radio en la esquina; ahora ancho completo,
   apiladas, toda la tarjeta clickeable (ya lo era: label envuelve el
   input). El <input> pasa a .sr-only — JS solo necesita que exista
   dentro de .cont-choice-card (card.querySelector('input').checked) y
   que conserve name=/value=/required, nada de eso cambia. El check
   visual es puramente decorativo (.cont-choice-check), no reemplaza al
   input real. */
.cont-choice-grid {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.625rem;
}

.cont-choice-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-lg);
  padding: 0.875rem 1.25rem; /* compactado 2026-08-25, antes 1.25rem 1.5rem */
  cursor: pointer;
  transition: border-color var(--transition-base), background-color var(--transition-base);
}

.cont-choice-card:hover {
  border-color: var(--color-turquesa);
}

.cont-choice-card:has(input:focus-visible) {
  outline: 2px solid var(--color-turquesa);
  outline-offset: 2px;
}

.cont-choice-card.is-selected {
  border-color: var(--color-turquesa);
  background: rgba(11, 122, 119, 0.06);
}

.cont-choice-check {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  border: 1.5px solid var(--color-borde);
  border-radius: 50%;
  position: relative;
  transition: border-color var(--transition-base), background-color var(--transition-base);
}

.cont-choice-card.is-selected .cont-choice-check {
  border-color: var(--color-turquesa);
  background: var(--color-turquesa);
}

.cont-choice-card.is-selected .cont-choice-check::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 44%;
  width: 0.3125rem;
  height: 0.625rem;
  border-right: 2px solid var(--color-blanco);
  border-bottom: 2px solid var(--color-blanco);
  transform: translate(-50%, -55%) rotate(45deg);
}

.cont-choice-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cont-choice-card strong {
  font-size: 1.0625rem; /* 17px */
  line-height: 1.3;
  color: var(--color-grafito);
}

.cont-choice-card small {
  color: var(--color-texto-sec);
  font-size: var(--text-sm);
}

/* -- Detalles / condicionales del paso 1 --
   Bug preexistente corregido 2026-08-25 (no introducido por este
   rediseño, mismo caso que .cont-package-chip más arriba): sin la
   regla [hidden], esta sección quedaba siempre visible aunque JS
   fijara needDetails.hidden = true antes de elegir una tarjeta. */
.cont-need-details {
  display: grid;
  gap: 0.625rem;
  margin-top: 1.5rem;
}

.cont-need-details[hidden] {
  display: none;
}

.cont-need-details > label,
.cont-conditional > label,
.cont-conditional legend,
.cont-contact-grid label {
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--color-grafito);
}

.cont-need-details textarea {
  min-height: 7.5rem; /* 120px */
  font-size: var(--text-base);
  padding: 0.875rem 1rem;
  margin-top: 0.375rem;
}

.cont-field-help,
.cont-field-counter {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-texto-sec);
}

.cont-field-counter {
  text-align: right;
  font-family: var(--font-mono);
}

.cont-optional {
  font: 500 0.625rem var(--font-mono);
  color: var(--color-texto-ter);
  margin-left: 0.3125rem;
}

.cont-conditional {
  margin-top: 1.25rem;
}

.cont-conditional fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.cont-conditional input[type="text"] {
  margin-top: 0.5rem;
}

/* -- Chips (información disponible, paso 1 condicional Dashboard) --
   Mismos <input type="radio" name="dataAvailable">, .sr-only en vez
   de ocultos con display:none — siguen recibiendo :checked/:focus,
   solo cambia la apariencia del <label> que los envuelve. */
.cont-inline-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 0.75rem;
}

.cont-inline-options label {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-borde);
  border-radius: 999px;
  padding: 0.625rem 1.125rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-grafito);
  min-height: 2.625rem; /* 42px */
  cursor: pointer;
  transition: border-color var(--transition-base), background-color var(--transition-base), color var(--transition-base);
}

.cont-inline-options label:hover {
  border-color: var(--color-turquesa);
}

.cont-inline-options label:has(input:checked) {
  border-color: var(--color-turquesa);
  background: rgba(11, 122, 119, 0.08);
  color: var(--color-turquesa);
}

.cont-inline-options label:has(input:focus-visible) {
  outline: 2px solid var(--color-turquesa);
  outline-offset: 2px;
}

/* -- Paso 2: contacto -- */
.cont-fields-grid {
  display: grid;
  gap: 1rem;
}

.cont-contact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cont-contact-grid label {
  display: grid;
  gap: 0.5rem;
}

.cont-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--color-grafito);
  margin-top: 1.5rem;
  padding: 0.875rem 1.125rem;
  background: var(--color-fondo-sutil);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.cont-consent input {
  margin-top: 0.25rem;
}

.cont-form-note {
  border-left: 2px solid var(--color-turquesa);
  padding-left: 1rem;
  color: var(--color-texto-sec);
  font-size: var(--text-sm);
  margin-top: 1.25rem;
}

.cont-field-error {
  font-size: var(--text-xs);
  color: var(--cont-color-error);
  min-height: 1em;
  margin: 0;
}

.is-invalid {
  border-color: var(--cont-color-error) !important;
}

/* -- Navegación -- */
.cont-form-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.875rem;
  padding: 1.125rem 2.625rem;
  border-top: 1px solid var(--color-borde);
  background: var(--color-fondo-sutil);
}

.cont-form-navigation .cont-btn-primary {
  margin-left: auto;
  min-height: 52px;
  font-size: var(--text-base);
  padding: var(--space-4) var(--space-8);
}

.cont-form-navigation .cont-btn-secondary {
  border: none;
  background: none;
  color: var(--color-texto-sec);
  min-height: auto;
  padding: var(--space-2) var(--space-1);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.cont-form-navigation .cont-btn-secondary:hover,
.cont-form-navigation .cont-btn-secondary:focus-visible {
  color: var(--color-turquesa);
  border: none;
}

/* -- Panel de confirmación -- */
.cont-confirmation-panel {
  padding: 3.125rem 2.625rem; /* 50px / 42px */
}

.cont-confirmation-panel h3 {
  font-size: clamp(2.25rem, 4vw, 3.625rem); /* 36px → 58px */
  line-height: 1.05;
  letter-spacing: -0.045em;
  margin: 1rem 0;
  font-weight: var(--weight-semibold);
  color: var(--color-grafito);
}

.cont-confirmation-panel > p {
  max-width: 47.5rem; /* 760px */
  color: var(--color-texto-sec);
  font-size: var(--text-lg);
}

.cont-confirmation-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.625rem, 1fr));
  border: 1px solid var(--color-borde);
  margin-top: 1.875rem;
}

.cont-confirmation-summary article {
  padding: 1.125rem;
  border-right: 1px solid var(--color-borde);
}

.cont-confirmation-summary article:last-child {
  border-right: 0;
}

.cont-confirmation-summary span {
  display: block;
  font: var(--weight-semibold) 0.5625rem var(--font-mono);
  color: var(--color-texto-sec);
}

.cont-confirmation-summary strong {
  display: block;
  margin-top: 0.5625rem;
  font-size: var(--text-sm);
  color: var(--color-grafito);
}

.cont-confirmation-note {
  margin-top: 1.5rem !important;
  font-size: var(--text-sm) !important;
  color: var(--color-texto-sec);
  border-top: 1px solid var(--color-borde);
  padding-top: 1.125rem;
}

.cont-confirmation-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5625rem;
  flex-wrap: wrap;
}

@media (max-width: 800px) {
  .cont-choice-card {
    padding: 1.125rem 1.25rem;
  }

  .cont-form-step {
    padding: 2rem 1.75rem;
  }

  .cont-form-navigation {
    padding: 1.25rem 1.75rem;
  }

  .cont-contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .cont-form-navigation {
    padding: 1.0625rem 1.125rem;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .cont-form-navigation .cont-btn-primary,
  .cont-form-navigation .cont-btn-secondary {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }

  .cont-confirmation-panel {
    padding: 2.25rem 1.25rem;
  }

  .cont-confirmation-actions {
    flex-direction: column;
  }

  .cont-need-details textarea {
    min-height: 9.375rem; /* 150px */
  }
}

/* ============================================================
   3b. ORIENTADOR (reemplaza el paso 1 del formulario — 2026-08-25)
   Reusa casi todo lo de arriba: .cont-form-shell, .cont-form-progress,
   .cont-step-heading, .cont-package-chip, .cont-btn-primary/secondary,
   .cont-fields-grid/.cont-contact-grid, .cont-consent, .cont-form-
   navigation, .cont-confirmation-panel. Solo se agrega lo específico
   de las preguntas sí/no y el panel de resultado.
   ============================================================ */
.cont-orient-answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.cont-orient-answer {
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-lg);
  background: var(--color-fondo);
  padding: 1.25rem 1.375rem;
  text-align: left;
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--color-grafito);
  cursor: pointer;
  transition: border-color var(--transition-base), background-color var(--transition-base);
}

.cont-orient-answer:hover,
.cont-orient-answer:focus-visible {
  border-color: var(--color-turquesa);
  background: rgba(11, 122, 119, 0.06);
  outline: none;
}

.cont-result-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  background: rgba(11, 122, 119, 0.08);
  color: var(--color-turquesa);
  font: var(--weight-semibold) var(--text-xs) var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.cont-orient-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.cont-orient-restart {
  display: inline-block;
  margin-top: 1.25rem;
}

/* El chip de contexto/resumen vive dentro de un .cont-form-step (que
   ya trae su propio padding) en vez de ser hijo directo de
   .cont-form-shell (como el chip del formulario anterior, que
   necesitaba su propio margen lateral) — se anula ese margen acá. */
.cont-form-step .cont-package-chip {
  margin: 0 0 1.5rem;
}

@media (max-width: 600px) {
  .cont-orient-answers {
    grid-template-columns: 1fr;
  }

  .cont-orient-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cont-orient-actions .cont-btn-primary,
  .cont-orient-actions .cont-btn-secondary {
    width: 100%;
    text-align: center;
  }
}

/* ============================================================
   5. ANTES DE COMENZAR
   ============================================================ */
.cont-antes {
  padding: var(--cont-section-y) 0;
}

.cont-antes-frase {
  max-width: 43.125rem; /* 690px */
  margin: 1.875rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--color-turquesa);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-grafito);
}

.cont-antes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 3.4375rem; /* 55px */
  border-top: 1px solid var(--color-grafito);
}

.cont-antes-col {
  padding: 1.5rem 2.5rem 0;
  border-right: 1px solid var(--color-borde);
}

.cont-antes-col:last-child {
  border-right: 0;
  padding-right: 0;
  padding-left: 2.5rem;
}

.cont-antes-col h3 {
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  margin: 0;
  font-weight: var(--weight-semibold);
  color: var(--color-grafito);
}

.cont-antes-col-lead {
  margin: 0.875rem 0 0;
  font-size: var(--text-sm);
  color: var(--color-texto-sec);
}

.cont-antes-lista {
  list-style: none;
  display: grid;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
}

.cont-antes-lista li {
  position: relative;
  padding-left: 1.125rem;
  font-size: var(--text-sm);
  color: var(--color-texto-sec);
}

.cont-antes-lista li::before {
  content: '–';
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  color: var(--color-turquesa);
}

.cont-antes-cierre {
  font: 500 var(--text-xs) var(--font-mono);
  color: var(--color-texto-sec);
  border-top: 1px solid var(--color-borde);
  padding-top: 1.25rem;
  margin-top: 2.625rem; /* 42px */
}

@media (max-width: 800px) {
  .cont-antes-grid {
    grid-template-columns: 1fr;
    border-top: 0;
  }

  .cont-antes-col {
    border-top: 1px solid var(--color-borde);
    border-right: 0;
    padding: 1.25rem 0;
  }

  .cont-antes-col:last-child {
    padding-left: 0;
  }
}

/* ============================================================
   6. INFORMACIÓN COMPARTIDA
   ============================================================ */
.cont-info {
  padding: var(--cont-section-y) 0;
  background: var(--color-fondo-sutil);
}

.cont-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 3.4375rem; /* 55px */
  border-top: 1px solid var(--color-grafito);
}

.cont-info-principio {
  padding: 1.5rem 1.75rem 0;
  border-right: 1px solid var(--color-borde);
  min-height: 10.625rem; /* 170px */
}

.cont-info-principio:last-child {
  border-right: 0;
}

.cont-info-principio h3 {
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  margin: 1rem 0 0.625rem;
  font-weight: var(--weight-semibold);
  color: var(--color-grafito);
}

.cont-info-principio p:not(.cont-tech-label) {
  color: var(--color-texto-sec);
  font-size: var(--text-sm);
  margin: 0;
}

.cont-info-privacy {
  margin-top: 2.625rem; /* 42px */
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.cont-info-privacy span,
.cont-info-privacy a {
  font: 500 0.625rem var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--color-texto-ter);
}

.cont-info-privacy a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cont-info-privacy a:hover {
  color: var(--color-grafito);
}

@media (max-width: 800px) {
  .cont-info-grid {
    grid-template-columns: 1fr;
    border-top: 0;
  }

  .cont-info-principio {
    border-top: 1px solid var(--color-borde);
    border-right: 0;
    padding: 1.25rem 0;
    min-height: 0;
  }
}

/* ============================================================
   7. PREGUNTAS FRECUENTES
   ============================================================ */
.cont-faq {
  padding: var(--cont-section-y) 0;
}

.cont-faq__grid {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: 5.625rem; /* 90px */
}

.cont-faq__accordion {
  border-top: 1px solid var(--color-grafito);
}

.cont-faq__item {
  border-bottom: 1px solid var(--color-borde);
}

.cont-faq-question {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.25rem; /* 20px */
  padding: 1.375rem 0; /* 22px */
  font-size: 1.0625rem; /* 17px */
  color: var(--color-grafito);
  cursor: pointer;
  list-style: none;
}

.cont-faq-question::-webkit-details-marker {
  display: none;
}

.cont-faq-symbol {
  font: 500 1.125rem var(--font-mono); /* 18px */
  color: var(--color-turquesa);
}

.cont-faq-symbol::before {
  content: '+';
}

.cont-faq__item[open] .cont-faq-symbol::before {
  content: '−';
}

.cont-faq-answer {
  padding: 0 2.875rem 1.5rem 0; /* 46px / 24px */
  color: var(--color-texto-sec);
  font-size: var(--text-sm);
  max-width: 46.875rem; /* 750px */
}

.cont-faq-answer .cont-text-link {
  display: inline-block;
  margin-top: 0.75rem;
}

/* "Escribir por correo" — opción discreta junto al encabezado del FAQ,
   ya no vive en una sección "Cierre" propia (v1.2). */
.cont-faq__correo {
  margin-top: 1.5rem;
}

@media (max-width: 900px) {
  .cont-faq__grid {
    grid-template-columns: 1fr;
    gap: 3.75rem; /* 60px */
  }
}

/* ============================================================
   8. CIERRE
   Fondo oscuro — misma excepción documentada que /diagnostico/,
   /dashboard/ y /metodologia/. flow-line/flow-dot/flow-labels replican
   el mismo patrón (dasharray=1000 = longitud real del path M0 26 H1000).
   ============================================================ */
.cont-cierre {
  background: var(--color-grafito);
  color: var(--color-blanco);
  padding: 6.375rem 0 3.625rem; /* 102px / 58px */
}

.cont-cierre__grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 5.625rem; /* 90px */
  align-items: end;
}

.cont-cierre .cont-section-title {
  max-width: 47.5rem; /* 760px */
  color: var(--color-blanco);
}

.cont-cierre__copy {
  color: #c5cecc;
  font-size: var(--text-lg);
  margin: 0 0 1.75rem; /* 28px */
  max-width: 33.75rem; /* 540px */
}

.cont-cierre__actions {
  display: flex;
  align-items: center;
  gap: 1.375rem; /* 22px */
  flex-wrap: wrap;
}

.cont-cierre__actions .cont-text-link {
  color: #c5cecc;
}

.cont-cierre__actions .cont-text-link:hover,
.cont-cierre__actions .cont-text-link:focus-visible {
  color: var(--color-turquesa);
}

.cont-cierre__nota {
  font: 500 var(--text-xs) var(--font-mono);
  color: #9eaaa8;
  margin-top: 1.125rem; /* 18px */
}

.cont-cierre__flow {
  margin-top: 4.875rem; /* 78px */
  position: relative;
  padding: 1.5rem 0 0; /* 24px */
}

.cont-cierre__flow-line {
  width: 100%;
  height: 3.25rem; /* 52px */
  display: block;
  overflow: visible;
}

.cont-cierre__flow-line path {
  fill: none;
  stroke: #65716f;
  stroke-width: 1;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: contCierreTrace 10s linear infinite;
}

.cont-cierre__flow-dot {
  fill: var(--color-turquesa);
  offset-path: path("M 0 26 H 1000");
  animation: contCierreMoveDot 10s linear infinite;
}

.cont-cierre__flow-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: -3.625rem; /* -58px */
  position: relative;
}

.cont-cierre__flow-labels span {
  font: 500 var(--text-xs) var(--font-mono);
  color: #93a09d;
  animation: contCierreActivateLabel 10s linear infinite;
}

.cont-cierre__flow-labels span:nth-child(2) { animation-delay: 1.625s; }
.cont-cierre__flow-labels span:nth-child(3) { animation-delay: 3.25s; }
.cont-cierre__flow-labels span:nth-child(4) { animation-delay: 4.875s; }

@keyframes contCierreTrace {
  0%, 7% { stroke-dashoffset: 1000; }
  72%, 100% { stroke-dashoffset: 0; }
}

@keyframes contCierreMoveDot {
  0%, 7% { offset-distance: 0; opacity: 0; }
  10% { opacity: 1; }
  72% { offset-distance: 100%; opacity: 1; }
  80%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes contCierreActivateLabel {
  0%, 6.75% { color: #93a09d; }
  7.25%, 23% { color: var(--color-blanco); }
  23.5%, 100% { color: #93a09d; }
}

@media (max-width: 900px) {
  .cont-cierre__grid {
    grid-template-columns: 1fr;
    gap: 2.625rem; /* 42px */
  }
}

@media (max-width: 600px) {
  .cont-cierre {
    padding: 4.75rem 0 2.75rem; /* 76px / 44px */
  }

  .cont-cierre__flow {
    margin-top: 3.375rem; /* 54px */
  }
}