/* ==============================================================
   components.css — botones, chips, cards, links
   Sistema de estados: estilo-noedelaflor.md, sección 5
   Principio: el oro es la señal universal de hover; el estado
   activo usa el color de MÁXIMO CONTRASTE contra el fondo.
   ============================================================== */

/* --- Botón / Chip --------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.5rem;
  font-size: var(--text-label);
  font-weight: var(--weight-label);
  line-height: 1;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              filter var(--transition-fast);
}

/* Primario sobre carbón (default): oro sólido + texto carbón */
.btn--primary {
  background-color: var(--color-oro);
  border-color: var(--color-oro);
  color: var(--color-carbon);
}

/* Primario sobre crema: carbón sólido + texto crema */
.bg-crema .btn--primary {
  background-color: var(--color-carbon);
  border-color: var(--color-carbon);
  color: var(--color-crema);
}

/* Hover en sólido: ±8-10% luminosidad, nunca cambia de color */
.btn--primary:hover { filter: brightness(0.92); }

/* Secundario: siempre outline, nunca sólido */
.btn--secondary {
  background-color: transparent;
  border-color: var(--color-crema-30);
  color: var(--color-crema);
}

.bg-crema .btn--secondary {
  border-color: var(--color-carbon-22);
  color: var(--color-carbon);
}

.btn--secondary:hover {
  border-color: var(--color-oro);
  background-color: var(--color-oro-10);
}

/* Chip de filtro del Portafolio: ver .pf-chip en pages/inicio.css */

/* --- Card ------------------------------------------------------ */
.card {
  border-radius: var(--radius-lg);
  /* pendiente: variantes por sección (portafolio, precios, microservicios) */
}

/* --- Links dentro de copy ------------------------------------- */
/* Subrayado SIEMPRE visible y SIEMPRE oro; el color del texto se
   adapta al fondo para mantener contraste (ficha, sección 5). */
.prose a {
  text-decoration: underline;
  text-decoration-color: var(--color-oro);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  /* El subrayado no aparece/desaparece (siempre visible por accesibilidad),
     así que aquí no aplica scaleX: solo se anima el grosor 1px → 2px. */
  transition: text-decoration-thickness var(--ease-base) var(--curve-standard);
}

.prose a:hover { text-decoration-thickness: 2px; }

.bg-carbon .prose a { color: var(--color-oro); }
.bg-crema  .prose a { color: var(--color-carbon); }
.bg-marron .prose a { color: var(--color-crema); }

/* --- Etiqueta de sección / texto discreto --------------------- */
.eyebrow {
  font-size: var(--text-label);
  font-weight: var(--weight-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-crema-50);
}

.bg-crema .eyebrow { color: var(--color-carbon); opacity: 0.6; }

/* --- Nota de factura bajo un precio + link oro subrayado ------- */
/* Compartidos por Precios (Inicio) y las cards de Microservicios, ambos
   sobre carbón: "¿Necesitas factura? Se suma el IVA. Ver detalles" (→ #factura
   del FAQ de cada página). .pr__more-link también es el link de cierre de
   Precios ("microservicios →"). Subrayado oro siempre visible que engrosa en
   hover (mismo mecanismo ::after que el link de las cards del Portafolio). */
.pr-card__note {
  margin: 0;
  font-size: var(--fs-caption);      /* 12px */
  line-height: 1.5;
}

.pr__more-link {
  position: relative;
  color: var(--color-oro);
  text-decoration: none;
  white-space: nowrap;
}

.pr__more-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background-color: var(--color-oro);
  transform-origin: bottom;
  transition: transform var(--ease-base) var(--curve-standard);
}

.pr__more-link:hover::after { transform: scaleY(2); }

@media (prefers-reduced-motion: reduce) {
  .pr__more-link::after { transition: none; }
}

/* --- FAQ: acordeón exclusivo (fondo crema) --------------------- */
/* Especificación: docs/componente-faq-noedelaflor.md (Figma 100:1427).
   Vive aquí y no en pages/*.css porque lo usan varias páginas con el mismo
   diseño y comportamiento, cambiando solo las preguntas: Inicio (debajo de
   Precios) y Microservicios. El JS es assets/js/faq.js, que carga cada página
   que lo lleva. Lista limpia (borde superior por ítem,
   sin cards). Todo el ítem es clickeable: el <button> abarca pregunta +
   ícono. Altura de la respuesta con grid-template-rows 0fr → 1fr (mismo
   patrón que Problema + Solución); apertura con --curve-out, cierre con
   --curve-in. El ícono +/X es CSS: cuadro fijo de 32px (borde y radio no
   cambian) con dos barras que rotan 45° — el tamaño visual es idéntico en
   todos los frames.
   Duración propia del componente: --faq-ms = 480ms (nota de animación de
   la spec: 280ms de --ease-base se sintió demasiado rápido en Precios para
   transiciones con peso visual). No se toca el token global. */
.faq {
  --faq-ms: var(--ease-base);        /* 480ms: rotación del ícono + reveal, sincronizados */
  --faq-pad-y: clamp(var(--space-7), 13.3vw, 192px);  /* mismo ritmo que las demás secciones */
  --faq-pad-x: 20px;
  --faq-content-max: 1280px;
  --faq-list-max: 1024px;
  --faq-header-gap: 18px;            /* eyebrow → título */
  --faq-header-to-list: clamp(var(--space-6), 6.4vw, 92px);
  --faq-item-pad-y: 32px;
  --faq-item-gap: 24px;              /* pregunta → ícono */
  --faq-answer-pad-y: 16px;
  --faq-icon-size: 32px;
  --faq-icon-radius: 4px;            /* mismo valor abierto y cerrado */
  --faq-icon-bar: 14px;              /* largo de cada barra del + */
  --faq-icon-bar-thickness: 1.5px;
  --faq-border: 1px solid var(--color-carbon);

  background-color: var(--color-crema);
  color: var(--color-carbon);
  padding: var(--faq-pad-y) var(--faq-pad-x);
}

.faq__inner {
  max-width: var(--faq-content-max);
  margin-inline: auto;
}

/* Encabezado: mismo tratamiento que las demás secciones, pero el título
   va en Fraunces Regular (400), no Bold */
.faq__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--faq-header-gap);
  text-align: center;
  margin-bottom: var(--faq-header-to-list);
}

.faq__header > * { margin: 0; }

.faq__eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 1rem;                   /* 16px */
  line-height: 1.5;
  text-transform: uppercase;
}

.faq__title {
  font-family: var(--font-display);
  font-weight: var(--weight-body);   /* 400 */
  font-size: var(--fs-h2);
  line-height: var(--leading-tight);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.faq__list {
  max-width: var(--faq-list-max);
  margin-inline: auto;
}

/* Ítem: solo borde superior, sin fondo */
.faq-item { border-top: var(--faq-border); }

.faq-item__heading { margin: 0; font-size: inherit; }

/* Botón = todo el ítem (pregunta + ícono), con el padding vertical del ítem */
.faq-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--faq-item-gap);
  width: 100%;
  padding: var(--faq-item-pad-y) 0;
  text-align: left;
  color: var(--color-carbon);
  cursor: pointer;
}

.faq-item__question {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h3);           /* 20px → 24px */
  line-height: var(--leading-tight);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

/* Ícono: cuadro fijo (borde, radio y tamaño no cambian en ningún estado).
   En hover/focus pasa a oro, misma señal que el ">" de Problema + Solución. */
.faq-item__icon {
  position: relative;
  flex-shrink: 0;
  width: var(--faq-icon-size);
  height: var(--faq-icon-size);
  border: 1px solid currentColor;
  border-radius: var(--faq-icon-radius);
  color: var(--color-carbon);
  transition: color var(--ease-fast) var(--curve-standard);
}

.faq-item__trigger:hover .faq-item__icon,
.faq-item__trigger:focus-visible .faq-item__icon { color: var(--color-oro); }

/* Las dos barras del "+" viven en un span interno que es el que rota 45°
   (el cuadro exterior no rota, para que el borde se mantenga recto). */
.faq-item__plus {
  position: absolute;
  inset: 0;
  transition: transform var(--faq-ms) var(--curve-standard);
}

.faq-item__plus::before,
.faq-item__plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: currentColor;
  border-radius: 1px;
}

.faq-item__plus::before {           /* barra horizontal */
  width: var(--faq-icon-bar);
  height: var(--faq-icon-bar-thickness);
  transform: translate(-50%, -50%);
}

.faq-item__plus::after {            /* barra vertical */
  width: var(--faq-icon-bar-thickness);
  height: var(--faq-icon-bar);
  transform: translate(-50%, -50%);
}

.faq-item.is-open .faq-item__plus { transform: rotate(45deg); }

/* Respuesta: grid-template-rows 0fr → 1fr anima la altura sin conocerla.
   Cierre con --curve-in, apertura con --curve-out; misma duración que el
   ícono para que vayan sincronizados. */
.faq-item__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--faq-ms) var(--curve-in);
}

.faq-item.is-open .faq-item__body {
  grid-template-rows: 1fr;
  transition-timing-function: var(--curve-out);
}

.faq-item__content {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--faq-ms) var(--curve-in);
}

.faq-item.is-open .faq-item__content {
  opacity: 1;
  transition-timing-function: var(--curve-out);
}

.faq-item__answer {
  margin: 0;
  padding: var(--faq-answer-pad-y) 0;  /* dentro del overflow: se anima con el cuerpo */
  font-size: var(--fs-body);         /* 16px → 18px */
  line-height: 1.5;
}

/* Respuesta con lista (Microservicios, pregunta 02): .faq-item__answer pasa a
   ser un <div> con párrafo + <ul> + párrafo; conserva el padding y el tamaño
   de la respuesta normal y solo separa sus bloques. Viñeta en oro, mismo
   acento que los checks y estrellas del sitio. */
.faq-item__answer > * { margin: 0; }

.faq-item__answer > * + * { margin-top: var(--space-3); }

.faq-item__list { padding-left: var(--space-4); }

.faq-item__list li + li { margin-top: var(--space-1); }

.faq-item__list li::marker { color: var(--color-oro); }

/* Movimiento reducido: abre/cierra sin animación */
@media (prefers-reduced-motion: reduce) {
  .faq-item__plus, .faq-item__body, .faq-item__content, .faq-item__icon { transition: none; }
}