/**
 * Las piezas de una landing: rejilla de tarjetas, pasos, el bloque de la cifra
 * y las preguntas.
 *
 * Nació el 26/09/2026 como oficios.css, encolada solo en la landing de oficios.
 * Se renombró el 27/09 al escribir la segunda página que la necesitaba
 * —/prospeccion/— porque no tenía dentro ni una regla de oficios: son las
 * piezas comunes a cualquier landing, y quedan cuatro por escribir. Se encola
 * por lista de plantillas, no en todo el sitio: sectorial.css ya son 2.830
 * líneas cargándose en cada página y el motivo de no crecerla sigue en pie.
 *
 * Solo tokens --kairikos-*. Si falta un color o una medida, se añade al :root
 * del tema padre; aquí no se escribe ni un hex.
 */

.sector-actions {
  display: flex;
  flex-wrap: wrap;
  /* Lo mismo por otra vía: 'display: flex' deja de hacer caso al text-align
     heredado, porque a los hijos los coloca justify-content — que por
     defecto es flex-start. Los dos botones se iban a la izquierda en el hero
     y en el cierre, las dos secciones centradas de la página. */
  justify-content: center;
  gap: var(--kairikos-sp-3);
  margin-top: var(--kairikos-sp-6);
}

/* --- Rejilla de tarjetas ------------------------------------------------ */

.sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--kairikos-sp-4);
  margin-top: var(--kairikos-sp-6);
}

/* Un solo escalón —seo, leads— no puede usar la rejilla de siempre: con un
   hijo, auto-fit estira la tarjeta a todo el ancho y un precio solo ocupando
   1.200 px parece un error de maquetación. Se centra y se le pone tope. */
.sector-grid--uno {
  grid-template-columns: minmax(0, 24rem);
  justify-content: center;
}

.sector-card {
  padding: var(--kairikos-sp-5);
  background: var(--kairikos-hueso);
  border: 1px solid var(--kairikos-linea);
  border-radius: var(--kairikos-radius-lg);
}

/* Una tarjeta dentro del bloque de tinta sigue siendo clara, así que no hace
   falta versión oscura. Lo que sí hace falta es deshacer el centrado: el
   bloque entero va centrado y el texto de una tarjeta, no — mismo desajuste
   que se corrigió en las cuatro sectoriales el 26/09, por la misma causa. */
.sector-cifra .sector-card {
  text-align: left;
}

.sector-card h3 {
  font-size: var(--kairikos-fs-lg);
  line-height: var(--kairikos-lh-snug);
  letter-spacing: var(--kairikos-tr-tight);
  margin: 0 0 var(--kairikos-sp-2);
  color: var(--kairikos-tinta);
}

.sector-card p {
  font-size: var(--kairikos-fs-sm);
  line-height: var(--kairikos-lh-body);
  color: var(--kairikos-tinta-soft);
  margin: 0;
}

/* Los tres pasos llevan número. Mono y terracota: es una etiqueta, no un
   adorno, y así se lee como referencia y no como decoración. */
.sector-card--paso {
  position: relative;
}

.sector-card__num {
  display: block;
  font-family: var(--kairikos-font-mono);
  font-size: var(--kairikos-fs-xs);
  letter-spacing: var(--kairikos-tr-caps);
  color: var(--kairikos-terracota);
  margin-bottom: var(--kairikos-sp-3);
}

/* --- El bloque de la cifra ---------------------------------------------- */

/* Tinta sólida, no gradiente: el sistema resuelve el énfasis con superficie.
   Es el único bloque oscuro de la página, y por eso funciona. */
.sector-cifra {
  margin: var(--kairikos-sp-9) auto;
  padding: var(--kairikos-sp-8) var(--kairikos-sp-6);
  max-width: var(--max-width, 1200px);
  background: var(--kairikos-tinta);
  border-radius: var(--kairikos-radius-2xl);
  text-align: center;
}

/* El titular del bloque.
 *
 * Vivía en prospeccion.css, que es la hoja de UNA página, y el 27/09/2026
 * /captacion/ salió con este titular a 1,00:1 de contraste: tinta sobre tinta,
 * invisible. No era un color mal elegido — era que la regla no se cargaba, y
 * sin ella el h2 hereda el color de texto normal justo encima de un fondo
 * oscuro.
 *
 * La pieza es del bloque, no de una página, así que vive donde vive el bloque.
 * Es el tercer 1,00:1 de la semana y el tercero que solo se ve mirando: ninguna
 * comprobación mide contraste. */
.sector-cifra__titulo {
  font-family: var(--kairikos-font-serif);
  font-weight: 400;
  font-size: var(--kairikos-fs-titular-seccion);
  line-height: var(--kairikos-lh-tight);
  letter-spacing: var(--kairikos-tr-display);
  color: var(--kairikos-hueso);
  margin: 0 0 var(--kairikos-sp-4);
  text-wrap: balance;
}

.sector-cifra__eyebrow {
  font-family: var(--kairikos-font-mono);
  font-size: var(--kairikos-fs-xs);
  letter-spacing: var(--kairikos-tr-caps);
  text-transform: uppercase;
  color: rgba(250, 246, 238, .55);
  margin: 0 0 var(--kairikos-sp-3);
}

.sector-cifra__numero {
  font-family: var(--kairikos-font-serif);
  font-size: clamp(var(--kairikos-fs-4xl), 12vw, var(--kairikos-fs-6xl));
  line-height: var(--kairikos-lh-tight);
  letter-spacing: var(--kairikos-tr-display);
  color: var(--kairikos-hueso);
  margin: 0 0 var(--kairikos-sp-4);
}

.sector-cifra__texto {
  max-width: 54ch;
  margin: 0 auto var(--kairikos-sp-6);
  font-size: var(--kairikos-fs-md);
  line-height: var(--kairikos-lh-body);
  color: rgba(250, 246, 238, .78);
}

.sector-cifra__texto strong {
  color: var(--kairikos-hueso);
  font-weight: 600;
}

.sector-cifra__nota {
  font-size: var(--kairikos-fs-sm);
  color: rgba(250, 246, 238, .5);
  margin: var(--kairikos-sp-4) 0 0;
}

/* --- Preguntas ---------------------------------------------------------- */

/* <details> nativo: sin JavaScript, accesible por teclado y funciona aunque
   falle todo lo demás. */
.sector-faq__item {
  border-bottom: 1px solid var(--kairikos-linea);
  padding: var(--kairikos-sp-4) 0;
}

.sector-faq__item summary {
  cursor: pointer;
  font-size: var(--kairikos-fs-md);
  font-weight: 500;
  color: var(--kairikos-tinta);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--kairikos-sp-4);
}

.sector-faq__item summary::-webkit-details-marker { display: none; }

.sector-faq__item summary::after {
  content: '+';
  font-family: var(--kairikos-font-mono);
  color: var(--kairikos-terracota);
  flex: none;
  transition: transform var(--kairikos-duration-fast) var(--kairikos-ease);
}

.sector-faq__item[open] summary::after {
  transform: rotate(45deg);
}

.sector-faq__item p {
  margin: var(--kairikos-sp-3) 0 0;
  font-size: var(--kairikos-fs-sm);
  line-height: var(--kairikos-lh-body);
  color: var(--kairikos-tinta-soft);
  max-width: 68ch;
}

@media (prefers-reduced-motion: reduce) {
  .sector-faq__item summary::after { transition: none; }
}

@media (max-width: 767px) {
  .sector-cifra {
    margin: var(--kairikos-sp-7) var(--kairikos-sp-4);
    padding: var(--kairikos-sp-7) var(--kairikos-sp-5);
  }

  .sector-actions .btn {
    width: 100%;
    justify-content: center;
  }
}