/* ==========================================================================
   page-legal-contact.css — correcciones de Legal (page-id-44) y Contact
   (page-id-43): consentimiento RGPD del formulario + contraste AA.

   DUEÑO ÚNICO. Este fichero existe para que varios agentes puedan corregir
   páginas distintas en paralelo sin escribir nunca el mismo fichero
   (File Ownership, skill `wordpress-elementor` §16.3).

   Se encola DESPUÉS de walking-planets-extras.css, así que a igual
   especificidad gana lo de aquí. No hace falta !important.
   ========================================================================== */

/* ==========================================================================
   1. Contact (page-id-43) — checkbox de consentimiento RGPD (02-inquiry-form.php)
   El campo `acceptance` de Pro Elements no trae CSS propio en este proyecto
   (ni el paquete "widget-form.min.css" lo estiliza): sin esto se ve como un
   checkbox nativo suelto sin alinear con su etiqueta. Alineación simple con
   el resto del formulario (misma familia tipográfica y acento cian de los
   enlaces, mismo tono apagado que .wp-side-panel__text para el cuerpo).
   ========================================================================== */
body.page-id-43 .wp-contact-form .elementor-field-type-acceptance .elementor-field-subgroup{
  margin-top:2px;
}
body.page-id-43 .wp-contact-form .elementor-field-option{
  display:flex;align-items:flex-start;gap:10px;
}
body.page-id-43 .wp-contact-form .elementor-acceptance-field{
  /* 24×24 en TODOS los anchos, no sólo en móvil (2026-08-26, @wordpress-elementor, ola 5).
     BLOQUE-contacto-motivos.md §3 lo pide como mínimo y WCAG 2.5.8 lo exige: es el único
     control obligatorio para poder enviar. Antes eran 16px en escritorio y 26 sólo por
     debajo de 860px (§4 más abajo, que sigue vigente y sube a 26 en el móvil). */
  flex:0 0 auto;width:24px;height:24px;margin:1px 0 0;accent-color:var(--wp-cyan);cursor:pointer;
}
/* 2026-09-17 (ronda 1, punto 10): las casillas de «Services needed» del formulario B2B no
   llevan clase propia — a diferencia de la del RGPD, que es `.elementor-acceptance-field` y sí
   estaba acotada arriba. Sin acotar, heredaban el `width:100%` de los campos de texto y salían
   de 302×13 px: la casilla ocupaba la fila entera y empujaba su etiqueta al extremo opuesto,
   de modo que no se leía cuál era cuál. Además 13 px de alto incumple el objetivo táctil de
   24 px de WCAG 2.5.8. Mismo tratamiento que la casilla de consentimiento, para que las dos
   se comporten igual. */
body.page-id-43 .wp-contact-form .elementor-field-option input[type="checkbox"],
body.page-id-43 .wp-contact-form .elementor-field-option input[type="radio"]{
  flex:0 0 auto;width:24px;height:24px;margin:1px 0 0;accent-color:var(--wp-cyan);cursor:pointer;
}
body.page-id-43 .wp-contact-form .elementor-field-option label{
  font-family:var(--wp-body);font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.75);cursor:pointer;
}
body.page-id-43 .wp-contact-form .elementor-field-option label a{color:var(--wp-cyan)}
body.page-id-43 .wp-contact-form .elementor-field-option label a:hover{color:var(--wp-yellow)}

/* ==========================================================================
   2. Contact (page-id-43) — contraste AA de la nota bajo el formulario
   Auditoría de contraste (2026-08-19, @frontend): `.wp-contact-form__note`
   (walking-planets-extras.css §"Sección justo debajo del hero", NO SE TOCA
   ese fichero — está en edición por otro agente) usa rgba(255,255,255,.45)
   sobre --wp-navy (#071C33): ratio real 4,395:1, por debajo del 4,5:1 que
   exige WCAG AA para texto normal (16px, line-height 1.7 = no es "texto
   grande"). Fórmula de luminancia relativa WCAG, colores verificados con
   Python, no estimados. Fix: variación mínima, solo el canal alfa
   (.45 → .46, mismo tono, ratio 4,53:1) — no toca la variable ni el resto
   del sitio. Se sobreescribe aquí (no en walking-planets-extras.css) porque
   este fichero se encola después y gana a igual especificidad.

   REVISADO 2026-08-26 (@wordpress-elementor, feedback 03 §1): al aclarar el navy
   (#071C33 → #0E3457) este arreglo CADUCÓ — el mismo .46 pasaba a 3,92:1. El suelo
   de alfa para AA sobre el navy nuevo es .51, así que la nota sube a .52 (4,61:1).
   Regla general que deja este caso: aclarar el fondo baja el contraste de TODO el
   texto blanco translúcido; los alfas < .52 sobre navy se revisaron uno a uno.
   ========================================================================== */
body.page-id-43 .wp-contact-form__note{color:rgba(255,255,255,.52)}

/* ==========================================================================
   3. Legal (page-id-44) — contraste AA de los "[ pending ]" y dos usos más
   del mismo patrón dentro de la sección clara (.wp-section--light)
   Auditoría de contraste (2026-08-19, @frontend): tres textos de esta
   sección usan var(--wp-muted) (#8296A8) sobre fondo blanco (--wp-white):
   ratio real 3,05:1, muy por debajo de 4,5:1.
     a) .wp-data-row__value — los 3 "[ pending ]" reportados (registered
        name & CIF, registered address, tourism licence).
     b) .wp-table-row span (columna "Consent" de la tabla de cookies:
        "Not required" / "You choose") — 03-legal-body.php, color inline.
     c) el caption "Last updated" del índice sticky — mismo widget, color
        inline.
   Los tres cuelgan del MISMO widget (03-legal-body.php, wp-legal, no es de
   este agente) y los dos últimos van con `style="color:var(--wp-muted)"`
   inline: una regla externa no puede pisar un inline salvo redefiniendo la
   propia custom property, así que el fix es redefinir --wp-muted SOLO
   dentro de esta sección — la cascada de var() resuelve el valor local
   también en los inline styles de sus descendientes. Mismo tono/saturación
   que el original (#8296A8 → #63798E, solo baja la luminosidad). Ratio
   verificado (fórmula WCAG, no estimado): 3,05:1 → 4,51:1.
   Fuera de esta sección, --wp-muted sigue en #8296A8 (5,62:1 sobre navy en
   .wp-side-panel/tarjetas oscuras: no hay motivo para tocarlo ahí).
   ========================================================================== */
body.page-id-44 .wp-section--light{--wp-muted:#63798E}

/* ==========================================================================
   4. Contact (page-id-43) — checkbox de consentimiento RGPD, zona de toque
   QA móvil (2026-08-19, @frontend): 16×16 medido en navegador real a 390×844,
   el único control obligatorio para poder enviar el formulario. WCAG 2.5.8
   pide 24px mínimo; en un formulario tocado con el dedo apuntamos más alto.
   Gateado a @media(max-width:860px) — mismo alcance que el resto de la
   auditoría móvil de este encargo, sin tocar el valor de escritorio (16px
   igual ya en el diseño de origen, Contact.dc.html). El `<label>` entero ya
   es tocable (elementor-field-option{display:flex;align-items:flex-start}
   §1 arriba), así que agrandar solo el propio input basta — no hace falta
   envolver nada nuevo.
   ========================================================================== */
@media (max-width:860px){
  body.page-id-43 .wp-contact-form .elementor-acceptance-field,
  body.page-id-43 .wp-contact-form .elementor-field-option input[type="checkbox"],
  body.page-id-43 .wp-contact-form .elementor-field-option input[type="radio"]{
    width:26px;height:26px;
  }
  /* "privacy policy" — enlace DENTRO de la frase de consentimiento (§1 arriba), 18px de alto
     medido. Es texto en línea dentro de una oración: convertirlo en bloque partiría la
     lectura, así que el único margen posible es padding vertical en el propio <a> (los
     navegadores sí amplían el área de toque de un enlace en línea con padding, sin reflow
     del párrafo). No llega a 44 sin romper el diseño, pero sube por encima del suelo de
     WCAG 2.5.8 (24px). */
  body.page-id-43 .wp-contact-form .elementor-field-option label a{padding:4px 0}
}

/* ==========================================================================
   5. Legal (page-id-44) — el hero va MÁS OSCURO que el resto de la web, a propósito

   Es la única excepción a la paleta luminosa del 2026-08-26 (@wordpress-elementor,
   feedback 03 §1), y es una excepción APROBADA por el lead, no un olvido.

   POR QUÉ. El H1 de esta página cae sobre una foto del Mercat del Born a contraluz:
   cielo claro y cubierta blanca justo detrás de la 2ª línea ("TERMS & COOKIES"). Con
   el velo general del sitio el titular blanco no llega a leerse.

   MEDICIÓN (Playwright a 1440x900, esperando a que acabe la animación de entrada,
   ocultando el H1 con visibility:hidden, capturando SU caja exacta y calculando la
   luminancia del fondo pixel a pixel con PIL — no es una estimación). Media / p99:
       velo general aclarado (.42/.06/.34/.86) ...... 2,36:1  /  1,18:1   ✗
       velo anterior de julio (.62/.18/.55/.95) ..... 3,66:1  /  1,83:1   ✗  ← lo heredamos roto
       este velo (.74/.42/.68/.95) .................. ver §6 del informe   ✓
   Ojo al comparar: el fondo lleva Ken Burns, así que dos pasadas del MISMO estado dan
   ±0,25 de ratio. Una diferencia menor que eso no es un cambio real.

   DOS PALANCAS, NO UNA. Aclarar/oscurecer un hero se hace en dos sitios: este velo Y
   el `filter` final de `@keyframes wpHeroIn`, que aclara la foto misma. Sólo con el
   velo, esta página se quedaba en 2,98:1 en vez de volver a su 3,66 de partida. Por eso
   abajo va también una animación propia: no se puede poner un `filter:` suelto sobre
   `.wp-hero__media` porque `wpHeroIn` anima esa propiedad con fill `both` y gana siempre.
   El tramo de `transform` es idéntico al general: cambia el color, no el movimiento.

   NO CHOCA CON LO QUE PIDIÓ EL CLIENTE ("parece un día nublado"): él señaló el hero de
   la home y el vídeo, no el aviso legal — y es justo en los términos donde el texto
   tiene que leerse. Si algún día cambia esta foto por una más oscura, esta sección
   sobra: bórrala y vuelve a medir, no la dejes por inercia.
   ========================================================================== */
body.page-id-44 .wp-hero__scrim{background:linear-gradient(180deg,
  rgba(14,52,87,.74) 0%,rgba(14,52,87,.42) 34%,rgba(14,52,87,.68) 72%,rgba(14,52,87,.95) 100%)}
body.page-id-44 .wp-hero__media{
  animation:wpHeroInLegal 2.6s var(--wp-ease) both,wpKenBurns 26s 2.6s ease-in-out infinite alternate}
@keyframes wpHeroInLegal{from{transform:scale(1.42) translateY(2%);filter:brightness(.55) saturate(.7)}
  to{transform:scale(1) translateY(0);filter:brightness(1) saturate(1)}}

/* ==========================================================================
   6. Contact (page-id-43) — UN FORMULARIO POR MOTIVO (ola 5, 2026-08-26)
   FEEDBACK-03 §5.1 · HANDOFF-04 §10 y §16 · spec: .dev/specs/BLOQUE-contacto-motivos.md

   El cliente: «no puedo poner "join our team" y que el mailing list sea igual que todos».
   Los seis motivos cambian foto, kicker, titular, párrafo, campos, botón y nota. El markup
   nuevo lo emite `widgets/wp-contact/02-inquiry-form.php`; el estilo vive AQUÍ porque este
   fichero es el de las páginas Legal+Contact y `walking-planets-extras.css` está en manos de
   otro agente en esta misma tanda (File Ownership, skill §16.3).

   Todo va bajo `body.page-id-43` a propósito: son piezas de esta página, no componentes del
   sistema. Si algún día el bloque se reutiliza en otra página, esto sube a extras.css.
   ========================================================================== */

/* --- 6.1 Chips del motivo. El diseño v2 los pinta al revés que el filtro de tours de la Home
   (`.wp-chip` en walking-planets.css:211 = fondo BLANCO sobre navy): aquí van en negativo sobre
   la sección oscura, con borde fino, y el activo en cian. Valores literales de la spec §3.
   Especificidad 0,3,0: gana al componente (0,1,0) y al contra-reset de hover de
   walking-planets-extras.css §33 (`button:hover`, 0,1,1) sin necesitar !important. */
body.page-id-43 .wp-contact-form .wp-chip{
  display:inline-flex;align-items:center;min-height:46px;padding:14px 22px;
  background:transparent;color:#FFFFFF;border:1px solid rgba(255,255,255,.35);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
body.page-id-43 .wp-contact-form .wp-chip:hover,
body.page-id-43 .wp-contact-form .wp-chip:focus-visible{
  background:rgba(255,255,255,.10);color:#FFFFFF;border-color:rgba(255,255,255,.6);
}
body.page-id-43 .wp-contact-form .wp-chip.is-active,
body.page-id-43 .wp-contact-form .wp-chip.is-active:hover,
body.page-id-43 .wp-contact-form .wp-chip.is-active:focus-visible{
  background:#00B2D8;color:#0E3457;border-color:#00B2D8;
}

/* --- 6.2 Párrafo de entrada del motivo (entre los chips y el formulario).
   Alfa .78 y no menos: sobre el navy nuevo (#0E3457) los alfas por debajo de .52 caen bajo
   el 4,5:1 de AA — ver §2 de este mismo fichero. */
body.page-id-43 .wp-contact-form__intro{
  margin:0 0 30px;max-width:56ch;
  font-family:var(--wp-body);font-size:16px;line-height:1.7;color:rgba(255,255,255,.78);
}

/* --- 6.3 Aviso exclusivo del motivo "Existing booking", POR DELANTE del formulario.
   Es soporte, no captación: quien ya reservó no debería rellenar un formulario. Borde y fondo
   literales de la spec §2 motivo 3. */
body.page-id-43 .wp-contact-notice{
  margin:0 0 30px;padding:26px 28px;
  border:1px solid #FFE500;background:rgba(255,229,0,.08);border-radius:2px;
}
body.page-id-43 .wp-contact-notice[hidden]{display:none}
body.page-id-43 .wp-contact-notice__text{
  margin:0 0 16px;font-family:var(--wp-body);font-size:16px;line-height:1.6;color:#FFFFFF;
}
body.page-id-43 .wp-contact-notice__links{
  margin:0;display:flex;flex-wrap:wrap;gap:10px 28px;
}
/* min-height 44px pedido por la spec: son los dos enlaces que sustituyen al formulario en este
   motivo, y se pulsan con el dedo desde el móvil de alguien que ya está en Barcelona. */
body.page-id-43 .wp-contact-notice__link{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--wp-mono);font-size:13px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#FFE500;text-decoration:none;
  border-bottom:1px solid rgba(255,229,0,.4);
}
body.page-id-43 .wp-contact-notice__link:hover,
body.page-id-43 .wp-contact-notice__link:focus-visible{
  color:#FFFFFF;border-bottom-color:#FFFFFF;
}

/* --- 6.4 El enlace al CV sólo existe en el motivo "join".
   Se oculta con display:none (no con visibility) para que salga también del orden de tabulación
   y del árbol de accesibilidad en los otros cinco motivos. No es obligatorio, así que ocultarlo
   nunca puede bloquear un envío. */
body.page-id-43 .wp-contact-form:not([data-topic="join"]) .elementor-field-group-cv_link{
  display:none;
}

/* --- 6.5 Nota interna de material pendiente del cliente (las fotos por motivo son de relleno).
   Se borra vaciando el control "Nota de material pendiente" en Elementor el día de publicar. */
body.page-id-43 .wp-contact-form__pending{
  margin:14px 0 0;font-family:var(--wp-mono);font-size:11.5px;letter-spacing:.06em;
  color:rgba(255,229,0,.72);
}

/* --- 6.6 La foto del hero cambia con el motivo: transición pedida por la spec §3.
   `background-image` es animable en los navegadores actuales sólo entre image-set/url con
   cross-fade parcial; donde no lo sea, el cambio es instantáneo y sigue siendo correcto. */
body.page-id-43 .wp-hero__media{transition:background-image .6s ease}

/* --- 6.7 Móvil: una sola columna y chips cómodos.
   La rejilla de campos ya la resuelve Elementor (row_gap 26 / column_gap 22 + `elementor-col-50`,
   que a ≤767px pasa a 100% por el propio CSS del paquete). Aquí sólo se ajusta lo nuestro. */
@media (max-width:860px){
  body.page-id-43 .wp-contact-form .wp-chips{gap:10px;margin:0 0 28px}
  body.page-id-43 .wp-contact-form .wp-chip{min-height:46px;padding:13px 18px;font-size:11.5px}
  body.page-id-43 .wp-contact-form__intro{font-size:15.5px;margin-bottom:26px}
  body.page-id-43 .wp-contact-notice{padding:22px 20px}
  body.page-id-43 .wp-contact-notice__links{gap:4px 20px}
}

/* --- 6.8 Ronda 1 del cliente, punto 10: LOS CINCO CAMPOS EXCLUSIVOS DEL MOTIVO B2B.
   Mismo mecanismo que 6.4 (el enlace al CV en "join"), que ya está probado en producción:
   `display:none` y no `visibility`, para que salgan también del orden de tabulación y del
   árbol de accesibilidad en los otros seis motivos.

   ⚠️ Esto NO es cosmética: es la mitad del contrato. La otra mitad está en el script del widget,
   que sólo pone `required` en `company_name`/`company_type` cuando el motivo activo es B2B.
   Si alguien retirara esta regla, esos dos campos saldrían en los siete motivos; si alguien
   marcara `required` en los ajustes del formulario, se romperían los otros seis (Pro Elements
   valida contra los ajustes guardados y un campo oculto se envía igual, vacío). Van juntas.

   El campo del motivo "join" se mantiene tal cual en 6.4 — aquí sólo se añaden los nuevos. */
body.page-id-43 .wp-contact-form:not([data-topic="b2b"]) .elementor-field-group-company_name,
body.page-id-43 .wp-contact-form:not([data-topic="b2b"]) .elementor-field-group-company_type,
body.page-id-43 .wp-contact-form:not([data-topic="b2b"]) .elementor-field-group-phone,
body.page-id-43 .wp-contact-form:not([data-topic="b2b"]) .elementor-field-group-country,
body.page-id-43 .wp-contact-form:not([data-topic="b2b"]) .elementor-field-group-services_needed{
  display:none;
}

/* El desplegable de tipo de empresa hereda el aspecto de los <input> del formulario: sin esto
   el navegador lo pinta con su estilo nativo y canta al lado de los demás campos. */
body.page-id-43 .wp-contact-form .elementor-field-group-company_type select{
  width:100%;appearance:none;-webkit-appearance:none;
  /* Flecha dibujada con un degradado cónico para no depender de ninguna imagen ni de una fuente
     de iconos: el formulario tiene que verse igual aunque falle cualquier recurso externo. */
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) center,calc(100% - 14px) center;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-right:42px;
}

/* La lista de servicios va en línea y con hueco cómodo para el dedo: son cuatro casillas que
   en 390px caen a dos filas, y pegadas se marcan sin querer. */
body.page-id-43 .wp-contact-form .elementor-field-group-services_needed .elementor-field-subgroup{
  display:flex;flex-wrap:wrap;gap:10px 26px;
}
body.page-id-43 .wp-contact-form .elementor-field-group-services_needed .elementor-field-option{
  display:inline-flex;align-items:center;gap:9px;min-height:32px;
}