/* ===================================================================
   cierre.css — faq · cta · contacto
   Los tres bloques que cierran la página.
   =================================================================== */

/* ═══════════════════════ FAQ ═══════════════════════════════════
   Con <details>/<summary> nativos: sin JavaScript, navegable con
   teclado y con las respuestas presentes en el HTML aunque estén
   plegadas — que es lo que permite el fragmento enriquecido de
   Google a partir del JSON-LD que emite el bloque.
   =============================================================== */

.faq__cabeza { margin-bottom: var(--e-6); max-width: 44rem; }

.faq__titulo {
  font-size: clamp(var(--paso-3), 3.4vw, var(--paso-4));
  font-stretch: 106%;
}

.faq__intro {
  font-size: var(--paso-1);
  line-height: 1.55;
  color: var(--tenue);
  margin-top: var(--e-4);
}

.faq__lista { max-width: 52rem; }

.pregunta {
  border-top: 1px solid var(--linea);
}
.faq__lista > :last-child { border-bottom: 1px solid var(--linea); }

.pregunta__resumen {
  display: flex;
  align-items: flex-start;
  gap: var(--e-4);
  padding-block: var(--e-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--tipo-titulo);
  font-size: var(--paso-1);
  font-weight: var(--peso-medio);
  line-height: 1.35;
}
.pregunta__resumen::-webkit-details-marker { display: none; }

.pregunta__signo {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 6px;
  position: relative;
}
.pregunta__signo::before,
.pregunta__signo::after {
  content: '';
  position: absolute;
  background: var(--color-acento);
  transition: transform var(--transicion), opacity var(--transicion);
}
.pregunta__signo::before { inset: 6px 0 auto; height: 2px; }
.pregunta__signo::after  { inset: 0 6px auto; width: 2px; height: 14px; }

.pregunta[open] .pregunta__signo::after { transform: scaleY(0); opacity: 0; }

.pregunta__respuesta {
  padding: 0 0 var(--e-5) calc(14px + var(--e-4));
  color: var(--tenue);
  line-height: 1.7;
  max-width: 44rem;
}
.pregunta__respuesta p + p { margin-top: var(--e-3); }

.faq--dos_columnas .faq__lista {
  max-width: none;
  columns: 2;
  column-gap: var(--e-8);
}
.faq--dos_columnas .pregunta { break-inside: avoid; }

/* ═══════════════════════ CTA ═══════════════════════════════════ */

.cta__titulo {
  font-size: clamp(var(--paso-3), 3.6vw, var(--paso-4));
  font-stretch: 106%;
  text-wrap: balance;
}

.cta__texto {
  color: var(--tenue);
  font-size: var(--paso-1);
  line-height: 1.55;
  margin-top: var(--e-4);
  max-width: 40rem;
}

.cta__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-6);
}

/* Banda: título a la izquierda, botones a la derecha, alineados a
   una regla superior. Es el cierre más discreto de los tres. */
.cta--banda .cta__caja {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e-6);
  align-items: center;
  padding-top: var(--e-6);
  border-top: 2px solid var(--sobre-fondo);
}
.cta--banda .cta__acciones { margin-top: 0; }

/* Tarjeta: caja con marco, centrada. Para cuando el cierre debe
   destacar sobre un fondo del mismo color. */
.cta--tarjeta .cta__caja {
  border: 1px solid var(--linea);
  border-top: 3px solid var(--color-acento);
  padding: var(--e-8) var(--e-7);
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}
.cta--tarjeta .cta__texto { margin-inline: auto; }
.cta--tarjeta .cta__acciones { justify-content: center; }

/* Dividido: título a la izquierda, texto y botones a la derecha. */
.cta--dividido .cta__caja {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--e-8);
}
.cta--dividido .cta__texto { margin-top: 0; }

/* ═══════════════════════ CONTACTO ══════════════════════════════ */

.contacto__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--e-8);
}

.contacto--formulario_derecha .contacto__datos { order: 1; }
.contacto--formulario_derecha .contacto__forma { order: 2; }
.contacto--formulario_izquierda .contacto__forma { order: 1; }
.contacto--formulario_izquierda .contacto__datos { order: 2; }

.contacto__titulo {
  font-size: clamp(var(--paso-2), 3vw, var(--paso-3));
  font-stretch: 104%;
}

.contacto__intro {
  color: var(--tenue);
  font-size: var(--paso-1);
  line-height: 1.55;
  margin-top: var(--e-4);
  max-width: 34rem;
}

/* ── Datos ─────────────────────────────────────────────────────── */

.contacto__dato {
  padding-block: var(--e-4);
  border-top: 1px solid var(--linea);
}

.contacto__etiqueta {
  font-family: var(--tipo-tecnica);
  font-size: var(--paso--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tenue);
}

.contacto__valor {
  display: block;
  margin-top: var(--e-2);
  font-family: var(--tipo-titulo);
  font-size: var(--paso-1);
  color: var(--sobre-fondo);
  text-decoration: none;
}
a.contacto__valor:hover { color: var(--color-secundario); }
.fondo--oscuro a.contacto__valor:hover { color: var(--color-acento); }

.contacto__mapa {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--linea);
  border-radius: var(--radio-medio);
  margin-top: var(--e-5);
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--transicion);
}
.contacto__mapa:hover { filter: none; }

/* ── Formulario ────────────────────────────────────────────────── */

.forma__campo { margin-bottom: var(--e-5); }

.forma__etiqueta {
  display: block;
  font-family: var(--tipo-tecnica);
  font-size: var(--paso--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tenue);
  margin-bottom: var(--e-2);
}

.forma__control {
  width: 100%;
  font-family: var(--tipo-cuerpo);
  font-size: var(--paso-0);
  color: var(--sobre-fondo);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--linea);
  border-radius: 0;
  padding: var(--e-3) 0;
  transition: border-color var(--transicion);
}

.forma__control:focus {
  outline: 0;
  border-bottom-color: var(--color-acento);
}

textarea.forma__control { resize: vertical; min-height: 6rem; }

select.forma__control { appearance: none; cursor: pointer; }

.forma__requerido { color: var(--color-acento); }

/* Trampa de correo basura: invisible para personas, presente para
   los robots que llenan todo lo que encuentran. */
.forma__trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.forma__aviso {
  font-size: var(--paso--1);
  color: var(--tenue);
  margin-top: var(--e-4);
}

.forma__resultado {
  margin-top: var(--e-4);
  padding: var(--e-4);
  border-left: 3px solid var(--color-acento);
  background: color-mix(in srgb, var(--sobre-fondo) 4%, transparent);
  font-size: var(--paso--1);
}

/* ── Responsivo ────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .faq--dos_columnas .faq__lista { columns: 1; }
  .cta--banda .cta__caja,
  .cta--dividido .cta__caja { grid-template-columns: 1fr; gap: var(--e-5); }
  .cta--banda .cta__acciones { margin-top: var(--e-2); }
  .contacto__rejilla { grid-template-columns: 1fr; gap: var(--e-7); }
  .contacto__forma { order: 1 !important; }
  .contacto__datos { order: 2 !important; }
}