/* optin.css — bloque de consentimiento de los formularios.
 *
 * Se carga en Base.astro DESPUES de los 3 CSS de Webflow, para corregir sin
 * !important. Mismo patron que /css/posts.css en Post.astro.
 *
 * Cubre los dos formularios del sitio:
 *   - El oscuro dentro de .dark-cover (13 paginas: team, portfolio, services y
 *     los 10 de servicios/).
 *   - El claro de contact.html (.form-2). Su color de enlace y su colocacion en
 *     el grid siguen en src/pages/contact.astro, porque necesitan un selector
 *     de id exclusivo suyo y un color:inherit que en las 13 seria incorrecto.
 *
 * CAPA 1 EN DESPLEGABLE (quick 260724-x53)
 *
 * El aviso de proteccion de datos ocupaba 8 lineas debajo del checkbox. Va
 * dentro de un <details> cerrado: la informacion no cambia — sigue en la
 * pagina, a un clic y sin JS — pero deja de dominar el formulario. Es el
 * modelo de informacion por capas de la AEPD, que admite elementos
 * desplegables; la capa 2 (politica de privacidad) declara encargados,
 * transferencia a EE. UU. con clausulas tipo y DPF, plazos y derechos.
 *
 * EL DEFECTO DE LAYOUT QUE ARREGLA .optin-block (quick 260724-wxy)
 *
 * .newsletter-form-wrapper > .form es un grid donde casi todos los campos
 * llevan su #w-node-... con grid-area explicito. El aviso legal era el UNICO
 * item auto-colocado, y eso lo hacia impredecible: en escritorio caia al lado
 * del checkbox; en movil caia bajo el campo «Nombre», porque el label
 * .field-label.apellido es display:none en ese breakpoint — no es item de
 * grid, deja su fila libre, y la auto-colocacion la rellena.
 *
 * No tiene arreglo por CSS: la fila correcta depende del breakpoint y el
 * checkbox lleva un #w-node-... distinto en cada pagina. Por eso el aviso vive
 * DENTRO del .field-wrapper del checkbox (.optin-block): deja de ser item de
 * grid y su posicion la da el orden del documento, en todo breakpoint.
 *
 * Nota sobre `grid-column`: `1 / -1` NO sirve en este grid. Su rejilla
 * explicita tiene una sola columna (grid-template-columns: 1fr) y la segunda
 * es implicita, creada por las reglas #w-node-... con grid-auto-columns: 1fr;
 * como -1 apunta al final de la rejilla EXPLICITA, `1 / -1` ocupaba una sola
 * columna (368px de 752). De ahi el `span 2`.
 */

.newsletter-form-wrapper .form .optin-block {
  display: block;
  grid-column: 1 / span 2;
}

/* Tipografia compartida por los dos formularios. El <p> no tiene
 * .w-form-label, de donde salen los 14px de la etiqueta de consentimiento, y
 * heredaba 18px/28.8px: la letra pequena acababa siendo mas grande que el
 * texto al que acompana. El summary iguala a la etiqueta para leerse como
 * parte del mismo bloque. Los colores se heredan, que es lo correcto en los
 * dos contextos: blanco sobre .dark-cover, oscuro sobre el formulario claro. */
.optin-details > .optin-summary {
  /* normalize.css pone `summary { display: block }`, y con display distinto de
   * list-item el navegador NO pinta el triangulo de apertura: la linea quedaba
   * como texto plano y nada indicaba que se despliega. Restaurar list-item
   * devuelve el marcador nativo (disclosure-closed/open) y con el la senal de
   * que hay contenido debajo. */
  display: list-item;
  list-style-position: inside;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

.optin-details > p.checkbox-label {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 20px;
}