/* ============================================================
   AVANTY — Sistema de diseño
   Componentes reutilizables — Fase 1, Archivo 3
   Depende de variables.css y reset.css (deben cargarse antes).
   ============================================================ */

/* ------------------------------------------------------------
   ENLACE "SALTAR AL CONTENIDO" — accesibilidad, sección 21.
   Invisible hasta que recibe foco por teclado.
   Uso esperado: primer elemento dentro de <body>, antes del header.
   <a href="#contenido-principal" class="skip-link">Saltar al contenido</a>
   ------------------------------------------------------------ */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-fondo-oscuro);
  color: var(--color-texto-sobre-oscuro);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
  transition: top var(--transition-base) var(--easing-standard);
}

.skip-link:focus {
  top: var(--space-4);
}

/* ------------------------------------------------------------
   BOTONES
   .btn--gold es intencionalmente el único lugar donde el dorado
   se usa como fondo sólido — reservado para la acción de
   conversión principal (ej. "Solicitar diagnóstico"), para que
   siga siendo acento y no el color dominante (sección 5).
   ------------------------------------------------------------ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-family-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: transform var(--transition-base) var(--easing-standard),
              box-shadow var(--transition-base) var(--easing-standard),
              background-color var(--transition-base) var(--easing-standard),
              border-color var(--transition-base) var(--easing-standard);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.btn--lg {
  padding: var(--space-4) var(--space-7);
  font-size: var(--text-lg);
}

.btn--gold {
  background-color: var(--color-acento);
  border-color: var(--color-acento);
  color: var(--color-fondo-oscuro);
}

.btn--gold:hover {
  background-color: var(--color-acento-suave);
  border-color: var(--color-acento-suave);
  box-shadow: var(--glow-dorado);
}

.btn--primary {
  background-color: var(--color-interactivo);
  border-color: var(--color-interactivo);
  color: var(--color-texto-sobre-oscuro);
}

.btn--primary:hover {
  background-color: var(--color-marca);
  border-color: var(--color-marca);
  box-shadow: var(--glow-azul);
}

.btn--secondary {
  background-color: transparent;
  border-color: var(--color-interactivo);
  color: var(--color-interactivo);
}

.btn--secondary:hover {
  background-color: var(--color-interactivo);
  color: var(--color-texto-sobre-oscuro);
}

/* Variante para usar sobre fondo oscuro (hero, CTA final) */
.btn--secondary-sobre-oscuro {
  background-color: transparent;
  border-color: var(--color-borde-sobre-oscuro);
  color: var(--color-texto-sobre-oscuro);
}

.btn--secondary-sobre-oscuro:hover {
  background-color: var(--color-borde-sobre-oscuro);
  border-color: var(--color-interactivo-suave);
}

.btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-interactivo);
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.btn--ghost:hover {
  color: var(--color-marca);
  transform: none;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

/* Estado de carga: oculta el texto sin cambiar el ancho del botón
   y muestra un spinner centrado mediante ::after. JS solo agrega
   o quita la clase is-loading — sección 9, "estados de carga". */
.btn.is-loading {
  color: transparent;
  pointer-events: none;
}

.btn.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: rgba(6, 23, 42, 0.85); /* --azul-marino-profundo con transparencia */
  border-radius: var(--radius-full);
  animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ------------------------------------------------------------
   SPINNER independiente (fuera de un botón, ej. dentro de una
   tarjeta mientras carga contenido)
   ------------------------------------------------------------ */
.spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-borde-sobre-claro);
  border-top-color: var(--color-interactivo);
  border-radius: var(--radius-full);
  animation: btn-spin 0.7s linear infinite;
}

/* ------------------------------------------------------------
   ETIQUETA "EYEBROW" — rótulo corto en mayúsculas antes de un
   título de sección (ej. "SOLUCIONES" antes de "Rutas de solución")
   ------------------------------------------------------------ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-acento);
  margin-bottom: var(--space-3);
}

.eyebrow::before {
  content: '';
  display: block;
  width: var(--space-5);
  height: 2px;
  background-color: currentColor;
}

/* ------------------------------------------------------------
   BADGES / ETIQUETAS
   .badge--demo lleva borde punteado a propósito: es una señal
   visual, además del texto, de que es un ejemplo y no un cliente
   o resultado real (sección 11, "Demostraciones").
   ------------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.badge--servicio {
  background-color: var(--color-fondo-claro-secundario);
  color: var(--color-texto-sobre-claro);
}

.badge--demo {
  background-color: transparent;
  border: 1px dashed var(--gris-secundario);
  color: var(--color-texto-sobre-claro-secundario);
}

/* ------------------------------------------------------------
   TARJETAS
   ------------------------------------------------------------ */
.card {
  padding: var(--space-6);
  background-color: var(--blanco);
  border: 1px solid var(--color-borde-sobre-claro);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base) var(--easing-standard),
              box-shadow var(--transition-base) var(--easing-standard);
}

.card--sobre-oscuro {
  background-color: var(--color-fondo-oscuro-alterno);
  border-color: var(--color-borde-sobre-oscuro);
  color: var(--color-texto-sobre-oscuro);
}

.card--glass {
  background-color: var(--glass-fondo);
  border: 1px solid var(--glass-borde);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--color-texto-sobre-oscuro);
}

.card--interactive {
  cursor: pointer;
}

.card--interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), var(--glow-azul);
}

/* ------------------------------------------------------------
   PASO DE PROCESO — para la sección Metodología (7 pasos).
   El acomodo en cuadrícula o línea de tiempo se define en
   layout.css/pages.css; aquí solo se define cada paso individual.
   ------------------------------------------------------------ */
.process-step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-full);
  background-color: var(--color-fondo-oscuro);
  color: var(--color-acento);
  font-family: var(--font-family-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
}

.process-step__title {
  font-family: var(--font-family-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
}

.process-step__description {
  color: var(--color-texto-sobre-claro-secundario);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* ------------------------------------------------------------
   FORMULARIOS
   ------------------------------------------------------------ */
.form-field {
  margin-bottom: var(--space-5);
}

.form-field__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-texto-sobre-claro);
}

.form-field__required {
  color: var(--color-error);
}

.form-field__input,
.form-field__textarea,
.form-field__select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background-color: var(--blanco);
  border: 1px solid var(--color-borde-sobre-claro);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-body);
  font-size: var(--text-base);
  color: var(--color-texto-sobre-claro);
  transition: border-color var(--transition-base) var(--easing-standard),
              box-shadow var(--transition-base) var(--easing-standard);
}

.form-field__textarea {
  min-height: 140px;
  resize: vertical;
}

.form-field__input:focus,
.form-field__textarea:focus,
.form-field__select:focus {
  outline: none;
  border-color: var(--color-interactivo);
  box-shadow: 0 0 0 3px var(--color-interactivo-suave);
}

.form-field__input.is-invalid,
.form-field__textarea.is-invalid,
.form-field__select.is-invalid {
  border-color: var(--color-error);
}

.form-field__help {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-texto-sobre-claro-secundario);
}

.form-field__error {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-error);
}

/* Checkbox y radio: input nativo (accesible por definición) con
   accent-color, en vez de ocultarlo detrás de un div falso —
   menos código, cero riesgo de accesibilidad. */
.form-field__checkbox,
.form-field__radio {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.form-field__checkbox input,
.form-field__radio input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--color-interactivo);
  flex-shrink: 0;
}

.form-field__checkbox label,
.form-field__radio label {
  font-size: var(--text-sm);
  color: var(--color-texto-sobre-claro-secundario);
}

/* Honeypot: trampa antispam invisible — sección 14. El HTML que la
   use (Fase 5) debe además marcarla tabindex="-1" y autocomplete="off". */
.form-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* ------------------------------------------------------------
   ALERTAS / MENSAJES — éxito y error (sección 9)
   ------------------------------------------------------------ */
.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.alert--exito {
  background-color: rgba(47, 158, 110, 0.1);
  border-left-color: var(--color-exito);
  color: var(--color-exito);
}

.alert--error {
  background-color: rgba(214, 69, 69, 0.1);
  border-left-color: var(--color-error);
  color: var(--color-error);
}

.alert--info {
  background-color: rgba(58, 158, 216, 0.1);
  border-left-color: var(--color-interactivo);
  color: var(--color-marca);
}

/* ------------------------------------------------------------
   ACORDEÓN DE PREGUNTAS FRECUENTES
   Basado en <details>/<summary> nativos: teclado y lectores de
   pantalla funcionan sin JavaScript (sección 21).
   Estructura esperada:
   <details class="faq-item">
     <summary class="faq-item__question">
       Pregunta
       <span class="faq-item__icon" aria-hidden="true"></span>
     </summary>
     <div class="faq-item__answer">Respuesta</div>
   </details>
   ------------------------------------------------------------ */
.faq-item {
  border-bottom: 1px solid var(--color-borde-sobre-claro);
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-family-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
}

.faq-item__question::marker,
.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--color-interactivo);
  transition: opacity var(--transition-base) var(--easing-standard);
}

.faq-item__icon::before {
  width: 12px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.faq-item__icon::after {
  width: 2px;
  height: 12px;
  transform: translate(-50%, -50%);
}

.faq-item[open] .faq-item__icon::after {
  opacity: 0;
}

.faq-item[open] .faq-item__question {
  color: var(--color-interactivo);
}

.faq-item__answer {
  padding-bottom: var(--space-5);
  color: var(--color-texto-sobre-claro-secundario);
  line-height: var(--leading-relaxed);
}

/* ------------------------------------------------------------
   BOTÓN FLOTANTE DE WHATSAPP — sección 15.
   El verde es el único color del proyecto que no sale de la
   paleta de variables.css: es el color de marca de WhatsApp, no
   de Avanty, y se deja así a propósito para que se reconozca de
   inmediato como el ícono de esa plataforma.
   ------------------------------------------------------------ */
.whatsapp-float {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-whatsapp-float);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  background-color: #25D366;
  color: var(--color-texto-sobre-oscuro);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-base) var(--easing-standard);
}

.whatsapp-float:hover {
  transform: scale(1.08);
}

.whatsapp-float svg {
  width: 30px;
  height: 30px;
}

/* ------------------------------------------------------------
   BOTÓN VOLVER ARRIBA — sección 9.
   Oculto por defecto; navigation.js le agrega la clase is-visible
   después de cierto scroll.
   ------------------------------------------------------------ */
.back-to-top {
  position: fixed;
  right: var(--space-5);
  bottom: calc(58px + var(--space-5) + var(--space-3));
  z-index: var(--z-back-to-top);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: var(--color-fondo-oscuro);
  color: var(--color-texto-sobre-oscuro);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--transition-base) var(--easing-standard),
              transform var(--transition-base) var(--easing-standard);
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  background-color: var(--color-marca);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

/* ------------------------------------------------------------
   BARRA DE PROGRESO DE LECTURA — sección 9.
   navigation.js fija la propiedad --progress (de 0 a 1) como
   estilo inline sobre este elemento en cada scroll. Se usa
   transform en vez de width: no fuerza reflow del navegador.
   ------------------------------------------------------------ */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: var(--z-header);
  background-color: transparent;
}

.reading-progress::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-interactivo);
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
}
/* ------------------------------------------------------------
   LISTA DE CAPACIDADES — agregado en Fase 3.
   Para los bullets de "qué incluye": servicios.php (capacidades
   de cada disciplina) y paquetes.php (qué incluye cada paquete).
   <ul> real; el check reemplaza el bullet nativo puntualmente,
   igual que .problems-list en pages.css — no se toca reset.css.
   Estructura esperada:
   <ul class="capability-list">
     <li class="capability-list__item">Texto</li>
   </ul>
   ------------------------------------------------------------ */
.capability-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-6);
  list-style: none;
  padding: 0;
}

.capability-list--1col {
  grid-template-columns: 1fr;
}

.capability-list__item {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-texto-sobre-claro-secundario);
}

/* Check dibujado con dos bordes rotados — sin SVG por ítem */
.capability-list__item::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.4em;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--color-interactivo);
  border-bottom: 2px solid var(--color-interactivo);
  transform: rotate(-45deg);
}

/* Si algún día una tarjeta de paquete se presenta sobre fondo
   oscuro (.card--sobre-oscuro o .card--glass), el texto secundario
   necesita el tono correcto para ese fondo — el check en sí no
   cambia, --color-interactivo ya se lee bien en ambos casos. */
.card--sobre-oscuro .capability-list__item,
.card--glass .capability-list__item {
  color: var(--color-texto-sobre-oscuro-secundario);
}

@media (max-width: 599px) {
  .capability-list {
    grid-template-columns: 1fr;
  }
}
/* ------------------------------------------------------------
   INTRO DE PÁGINA INTERNA — agregado en Fase 3.
   Banda oscura corta al inicio de cada página interna (servicios,
   soluciones, paquetes, nosotros, contacto, etc.): eyebrow, título
   y un párrafo de contexto. Se combina con .section y
   .section--oscuro en el HTML — esto solo agrega el espaciado
   entre esos elementos y el ancho máximo de lectura. Reutilizable
   entre varias páginas, por eso vive acá y no en pages.css —a
   diferencia de .servicio-detalle*, que sí es exclusivo de
   servicios.php.
   ------------------------------------------------------------ */
.page-intro h1 {
  max-width: 20ch;
  margin-block: var(--space-4) var(--space-5);
  font-size: var(--text-4xl);
}

.page-intro p {
  max-width: 60ch;
  font-size: var(--text-lg);
  color: var(--color-texto-sobre-oscuro-secundario);
}

@media (max-width: 599px) {
  .page-intro h1 {
    font-size: var(--text-3xl);
    max-width: none;
  }
}
/* ------------------------------------------------------------
   ESTRUCTURA DE FORMULARIO — agregado en Fase 3.
   fieldset/legend: reset.css no los toca (solo hereda tipografía
   vía "font: inherit" en los elementos de formulario, no maneja
   estructura) — el estilo por defecto del navegador se resetea acá.
   Genérico para cualquier formulario del proyecto, no exclusivo
   de diagnostico.php.
   ------------------------------------------------------------ */
fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-8) 0;
}

fieldset:last-of-type {
  margin-bottom: var(--space-6);
}

legend {
  width: 100%;
  padding: 0 0 var(--space-3) 0;
  margin-bottom: var(--space-5);
  border-bottom: 2px solid var(--color-borde-sobre-claro);
  font-family: var(--font-family-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-texto-sobre-claro);
}

/* Empareja campos de a dos — ej. nombre + cargo, correo + whatsapp.
   El colapso a 1 columna en móvil se agrega en responsive.css como
   corrección pendiente, mismo patrón que ya se usó con reset.css y
   header.php: lo aviso, no lo aplico todavía. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--space-5);
}

/* Contenedor genérico para el mensaje de éxito/error que forms.js
   va a inyectar ahí en la Fase 5 (con las clases .alert de este
   mismo archivo). :not(:empty) para que no reserve espacio en
   blanco mientras no hay ningún mensaje que mostrar. */
#form-mensaje:not(:empty) {
  margin-bottom: var(--space-5);
}
/* ------------------------------------------------------------
   CONTENIDO LEGAL — agregado en Fase 3, compartido entre
   privacidad.php y terminos.php. Misma idea de columna angosta
   que .sobre-avanty, pero con encabezados de sección propios —
   ahí era prosa continua sin subtítulos, acá sí hacen falta.
   ------------------------------------------------------------ */
.legal-content {
  max-width: 760px;
}

.legal-content__actualizado {
  margin-bottom: var(--space-7);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-texto-sobre-claro-secundario);
}

.legal-content h2 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  font-size: var(--text-xl);
}

.legal-content h2:first-of-type {
  margin-top: 0;
}

.legal-content p {
  margin-bottom: var(--space-4);
  color: var(--color-texto-sobre-claro);
  line-height: var(--leading-relaxed);
}

.legal-content ul,
.legal-content ol {
  margin-bottom: var(--space-5);
  padding-left: var(--space-6);
}

.legal-content li {
  margin-bottom: var(--space-2);
  line-height: var(--leading-relaxed);
  color: var(--color-texto-sobre-claro);
}

.legal-content a {
  font-weight: var(--font-weight-medium);
}
/* ------------------------------------------------------------
   CORRECCIÓN DE CONTRASTE — Fase 8, auditoría de accesibilidad.

   Sobrescribe el color de .eyebrow definido más arriba en este
   mismo archivo. El dorado original (var(--color-acento)) da
   7.8:1 sobre fondo oscuro (perfecto) pero solo 1.96–2.15:1
   sobre fondo claro (blanco o gris-claro) — muy por debajo del
   mínimo de 4.5:1 que exige la sección 21. Como la mayoría de
   los usos reales de .eyebrow en el sitio están sobre fondo
   claro (Problemas, Servicios, Metodología, Sobre Avanty, FAQ,
   Condiciones generales, etc.), ese pasa a ser el color por
   defecto correcto; el dorado brillante original se reactiva
   solo dentro de una sección de fondo oscuro, que es donde
   realmente funciona bien.

   No hace falta tocar .eyebrow::before (la línea corta antes del
   texto): usa currentColor, así que sigue el mismo color que
   .eyebrow resuelva en cada caso, sin ningún cambio adicional.
   ------------------------------------------------------------ */
.eyebrow {
  color: #6b4e18; /* dorado oscurecido — 7.17:1 sobre blanco, 6.54:1 sobre gris-claro */
}

.section--oscuro .eyebrow,
.section--oscuro-alterno .eyebrow {
  color: var(--color-acento); /* dorado brillante original — 7.8:1 sobre fondo oscuro */
}