/* ═══════════════════════════════════════════════════════════════════════
   DOBLE V — piezas propias de la página de Contacto

   Se carga DESPUÉS de estilos.css y solo agrega lo que el sistema no cubre:
   1. los paneles superpuestos del encabezado,
   2. el formulario (estilos.css no tiene campos de formulario),
   3. las tarjetas de "otras formas de contacto",
   4. las preguntas plegables.

   No se toca estilos.css a propósito: hay más páginas construyéndose en
   paralelo y un cambio allá se propaga a las ocho.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Paneles superpuestos del encabezado ───────────────────────────────
   Tres piezas del mismo panel —indicadores, flujo y gráfico— apiladas con
   márgenes negativos. Sin posición absoluta: así nunca se salen del ancho
   ni se pisan cuando la columna se angosta. */
.contacto-paneles { position: relative; }
.contacto-paneles .panel {
  position: relative;
  max-width: 100%;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .34);
}
.panel-sup-a { width: 94%; z-index: 1; }
.panel-sup-b { width: 80%; margin: -18px 0 0 auto; z-index: 3; }
.panel-sup-c { width: 76%; margin: -18px 0 0 7%; z-index: 2; }

@media (max-width: 980px) {
  .panel-sup-a, .panel-sup-b, .panel-sup-c {
    width: 100%; margin: 14px 0 0 0;
  }
  .contacto-paneles .panel { box-shadow: none; }
}

/* ── Reja del bloque de formulario ─────────────────────────────────── */
.contacto-grid {
  display: grid;
  grid-template-columns: 1.22fr .88fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 980px) { .contacto-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ── Bloque oscuro del formulario ──────────────────────────────────── */
.formulario-bloque {
  background: var(--panel);
  border: 1px solid var(--panel-borde);
  border-radius: 4px;
  color: var(--tinta-clara);
  padding: 40px 36px;
}
@media (max-width: 600px) { .formulario-bloque { padding: 28px 20px; } }

/* La sección es crema, así que hay que devolverle a las piezas heredadas
   el color que corresponde sobre fondo oscuro. */
.formulario-bloque .etiqueta { color: var(--verde-vivo); }
.formulario-bloque .boton-linea { background: transparent; border-color: rgba(233, 231, 223, .28); color: var(--tinta-clara); }
.formulario-bloque .boton-linea:hover { border-color: var(--verde-vivo); color: var(--verde-vivo); }
.form-intro { font-size: 14.5px; color: var(--tinta-suave); margin-top: 16px; max-width: 46ch; }

/* ── Campos ────────────────────────────────────────────────────────── */
.campos { display: grid; gap: 18px; margin-top: 30px; }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .campos-2 { grid-template-columns: 1fr; } }

.campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.campo label {
  font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .14em; color: var(--tinta-suave);
}
.campo .req { color: var(--verde-vivo); }
.campo .opcional { text-transform: none; letter-spacing: 0; opacity: .6; font-size: 11px; }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  font-family: var(--sans); font-size: 14.5px; font-weight: 300; line-height: 1.6;
  color: var(--tinta-clara);
  background: rgba(0, 0, 0, .2);
  border: 1px solid var(--panel-borde);
  border-radius: var(--radio);
  padding: 13px 14px;
  transition: border-color .18s ease, background .18s ease;
}
.campo textarea { min-height: 138px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-suave); opacity: .5; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: #2f4137; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--verde-vivo); background: rgba(0, 0, 0, .3);
}

/* Selector: se le quita la flecha del sistema y se dibuja una de línea,
   para que no aparezca un control gris de Windows en medio del bloque. */
.campo select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7b3ab' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px 16px;
}
.campo select option { background: var(--panel); color: var(--tinta-clara); }

/* ── Errores de validación ─────────────────────────────────────────── */
.mensaje-error { display: none; font-size: 12px; color: #e3a493; }
.campo-error .mensaje-error { display: block; }
.campo-error input, .campo-error select, .campo-error textarea { border-color: #a8624f; }

/* ── Acciones y notas al pie del formulario ────────────────────────── */
.form-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.formulario .boton { font-family: var(--sans); cursor: pointer; }

.form-estado {
  display: none; margin-top: 20px; font-size: 13.5px; line-height: 1.6;
  border-left: 2px solid var(--verde-vivo); padding: 12px 16px;
  background: rgba(127, 187, 140, .07); color: var(--tinta-clara);
}
.form-estado.visible-estado { display: block; }
.form-estado.estado-falla { border-left-color: #a8624f; background: rgba(168, 98, 79, .1); }

.form-explica { font-size: 12.5px; color: var(--tinta-suave); margin-top: 20px; max-width: 52ch; }
.form-nota {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 12px; color: var(--tinta-suave); margin-top: 14px;
}
.form-nota svg { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--verde-vivo); }

.aviso-js {
  border: 1px solid var(--panel-borde); border-left: 2px solid var(--verde-vivo);
  padding: 18px 20px; margin-top: 26px; font-size: 13.5px; color: var(--tinta-suave);
}
.aviso-js a { color: var(--verde-vivo); }
.aviso-js p + p { margin-top: 10px; }

/* ── Otras formas de contacto ──────────────────────────────────────── */
.medios { display: grid; gap: 14px; }
.medio {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  border: 1px solid var(--crema-borde); padding: 22px;
  transition: border-color .18s ease;
}
a.medio:hover { border-color: var(--verde); }
.medio-icono { color: var(--verde); margin-top: 2px; }
.medio-icono svg { width: 22px; height: 22px; }
.medio h3 {
  font-family: var(--sans); font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em; color: var(--tinta-media);
}
.medio b {
  display: block; font-family: var(--serif); font-size: 21px; font-weight: 400;
  line-height: 1.2; margin-top: 8px; color: var(--tinta-oscura);
}
.medio p { font-size: 13px; color: var(--tinta-media); margin-top: 8px; }

/* ── Preguntas frecuentes (details/summary, sin JavaScript) ────────── */
.faq-grid { display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: start; }
@media (max-width: 980px) { .faq-grid { grid-template-columns: 1fr; gap: 36px; } }

.faq details { border-top: 1px solid var(--panel-borde); }
.faq details:last-of-type { border-bottom: 1px solid var(--panel-borde); }
.claro .faq details, .claro-2 .faq details { border-top-color: var(--crema-borde); }
.claro .faq details:last-of-type, .claro-2 .faq details:last-of-type { border-bottom-color: var(--crema-borde); }

.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0; cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: clamp(17px, 1.9vw, 20px); line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--verde-vivo); }
.claro .faq summary:hover, .claro-2 .faq summary:hover { color: var(--verde); }
.faq summary::after {
  content: ""; flex: none; width: 11px; height: 11px; margin-right: 4px;
  border-right: 1px solid var(--verde-vivo); border-bottom: 1px solid var(--verde-vivo);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .2s ease;
}
.claro .faq summary::after, .claro-2 .faq summary::after {
  border-right-color: var(--verde); border-bottom-color: var(--verde);
}
.faq details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.faq details p { font-size: 14px; line-height: 1.75; color: var(--tinta-suave); padding-bottom: 26px; max-width: 62ch; }
.claro .faq details p, .claro-2 .faq details p { color: var(--tinta-media); }

/* Tarjeta lateral de confidencialidad. */
.faq-nota { border: 1px solid var(--panel-borde); padding: 26px 24px; }
.faq-nota .faq-nota-icono { color: var(--verde-vivo); margin-bottom: 18px; }
.faq-nota .faq-nota-icono svg { width: 28px; height: 28px; }
.faq-nota h3 { font-family: var(--serif); font-size: 20px; line-height: 1.25; }
.faq-nota p { font-size: 13px; color: var(--tinta-suave); margin-top: 14px; }