/*
Theme Name: Arrayanes Child
Theme URI: https://fundacionarrayanes.org
Description: Child theme de Hello Elementor para la Fundacion Club Los Arrayanes. Maquetacion con Elementor; TODOS los estilos viven aqui. Tipografia Instrument Sans auto-alojada.
Author: Agencia Zenth
Author URI: https://zenthagencia.com
Template: hello-elementor
Version: 1.0.0
Text Domain: arrayanes-child
*/

/* =========================================================
   Instrument Sans — auto-alojada (self-hosted)
   ========================================================= */
@font-face{ font-family:'Instrument Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/InstrumentSans-Regular.ttf') format('truetype'); }
@font-face{ font-family:'Instrument Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/InstrumentSans-Medium.ttf') format('truetype'); }
@font-face{ font-family:'Instrument Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/InstrumentSans-SemiBold.ttf') format('truetype'); }
@font-face{ font-family:'Instrument Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/InstrumentSans-Bold.ttf') format('truetype'); }
@font-face{ font-family:'Instrument Sans'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/InstrumentSans-Italic.ttf') format('truetype'); }
@font-face{ font-family:'Instrument Sans'; font-style:italic; font-weight:500; font-display:swap; src:url('fonts/InstrumentSans-MediumItalic.ttf') format('truetype'); }
@font-face{ font-family:'Instrument Sans'; font-style:italic; font-weight:600; font-display:swap; src:url('fonts/InstrumentSans-SemiBoldItalic.ttf') format('truetype'); }
@font-face{ font-family:'Instrument Sans'; font-style:italic; font-weight:700; font-display:swap; src:url('fonts/InstrumentSans-BoldItalic.ttf') format('truetype'); }

/* =========================================================
   Tokens de marca (diseno Transparencia)
   ========================================================= */
:root{
  --arr-red:#B42424;
  --arr-salmon:#F07884;
  --arr-soft:#D89090;
  --arr-border:#F1CBCB;
}

body,
button,
input,
select,
textarea{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color:var(--arr-red);
}

/* Flecha inline (SVG dentro de widgets HTML) */
.arw{ display:inline-flex; }
.arw svg{ display:block; }

/* =========================================================
   TRANSPARENCIA — Fundacion Club Los Arrayanes
   Maquetado con Elementor (contenedores full + widgets);
   todo el estilo aqui. Markup optimizado 4.x (clase de usuario
   en .elementor-widget-* / en el propio .e-con del contenedor).
   ========================================================= */

/* Neutralizar defaults de contenedor full de Elementor (gap 20px, padding 10px) */
.page .e-con{ gap:0; padding:0; }

/* Guard de página (solo /transparencia/, wrapper de contenido Elementor del
   post 14): el hero del seeder (.arr-thero, bloque TRANSPARENCIA HERO más
   abajo) hace sangrar la foto derecha y su garabato fuera del viewport A
   PROPÓSITO (right:-60px y ::before right:-50px); sin este recorte, ese bleed
   extiende el documento y toda la página scrollea horizontal ~110px en
   desktop, a CUALQUIER ancho de ventana. NO sirve ponerlo en body/html: su
   overflow se propaga al viewport (interpretado como hidden) y el used value
   local vuelve a visible, así que scrollWidth ni se recorta. clip no crea
   scroll container; hidden queda de fallback para navegadores viejos. */
.elementor.elementor-14{ overflow-x:hidden; overflow-x:clip; }

/* PAGE wrapper: centra el contenido a 1440px */
.page.e-con{
  max-width:1440px;
  width:100%;
  margin:0 auto;
  padding:0;
  overflow:hidden;
  flex-direction:column;
  gap:0;
}

/* ---- NAV ---- */
.nav.e-con{
  margin:26px 40px 0;
  background:var(--arr-red);
  border-radius:30px;
  height:74px;
  min-height:74px;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  padding:0 20px 0 30px;
  gap:0;
}
.nav__logo.e-con{
  flex:0 0 auto;
  width:auto;
  flex-direction:row;
  align-items:center;
  padding:0;
}
.nav__logo .elementor-widget-image img{
  height:46px;
  width:auto;
  display:block;
}
.nav__menu.e-con{
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  gap:30px;
  margin:0 auto;
  padding:0;
  width:auto;
}
.nav__menu .elementor-widget-button{ width:auto; }
.nav__menu .elementor-widget-button .elementor-button{
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  margin:0;
  min-height:0;
  min-width:0;
  line-height:1.2;
  color:#fff;
  font-family:'Instrument Sans', system-ui, sans-serif;
  font-size:16px;
  font-weight:500;
  letter-spacing:normal;
  box-shadow:none;
  fill:#fff;
}
.nav__menu .elementor-widget-button .elementor-button:hover,
.nav__menu .elementor-widget-button .elementor-button:focus{ background:transparent; color:#fff; }
.nav__menu .elementor-widget-button .elementor-button-text{ color:#fff; font-size:16px; font-weight:500; }

.nav__right.e-con{
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  gap:26px;
  flex:0 0 auto;
  width:auto;
  padding:0;
}
.nav__right .elementor-widget-html{ display:flex; align-items:center; }

.btn-donar.elementor-widget-button .elementor-button{
  background:#fff;
  color:var(--arr-red);
  font-family:'Instrument Sans', system-ui, sans-serif;
  font-weight:700;
  font-size:15px;
  padding:12px 28px;
  border:none;
  border-radius:24px;
  letter-spacing:.02em;
  line-height:1;
  min-height:0;
  box-shadow:none;
}
.btn-donar.elementor-widget-button .elementor-button:hover,
.btn-donar.elementor-widget-button .elementor-button:focus{ background:#fff; color:var(--arr-red); }
.btn-donar.elementor-widget-button .elementor-button-text{ color:var(--arr-red); font-weight:700; font-size:15px; }

.nav__user{ color:#fff; display:inline-flex; align-items:center; }
.nav__user svg{ display:block; }

/* ---- HERO ---- */
.hero.e-con{
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:66px 24px 0;
  gap:0;
}
.hero__title.elementor-widget-heading .elementor-heading-title{
  font-family:'Instrument Sans', system-ui, sans-serif;
  font-size:46px;
  font-weight:700;
  letter-spacing:.01em;
  line-height:normal;
  color:var(--arr-red);
  margin:0;
  text-align:center;
}
.hero__text.elementor-widget-text-editor p{
  color:var(--arr-soft);
  font-family:'Instrument Sans', system-ui, sans-serif;
  font-size:20px;
  font-weight:500;
  line-height:1.5;
  text-align:center;
  max-width:630px;
  margin:26px auto 0;
}

/* ---- Padding lateral compartido ---- */
.container.e-con{ padding:0 92px; }

/* ---- DOCUMENTACION ---- */
.doc.e-con{
  flex-direction:column;
  align-items:stretch;
  margin-top:300px;
  gap:0;
}
.doc__title.elementor-widget-heading .elementor-heading-title{
  font-family:'Instrument Sans', system-ui, sans-serif;
  font-size:44px;
  font-weight:700;
  line-height:normal;
  color:var(--arr-red);
  margin:0;
}
.doc__text.elementor-widget-text-editor p{
  color:var(--arr-soft);
  font-family:'Instrument Sans', system-ui, sans-serif;
  font-size:18px;
  font-weight:500;
  line-height:1.5;
  max-width:560px;
  margin:22px 0 0;
}
.doc__grid.e-con{
  flex-direction:row;
  flex-wrap:nowrap;
  gap:34px;
  margin-top:58px;
  align-items:flex-start;
}
.doc__tabs.e-con{
  flex-direction:column;
  gap:16px;
  width:284px;
  flex:0 0 284px;
  padding:0;
}
.doc__tabs .elementor-widget-html{ width:100%; }
.doc__tabs .pill{ width:100%; }
.pill{
  height:58px;
  border-radius:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-family:'Instrument Sans', system-ui, sans-serif;
  font-weight:700;
  font-size:16px;
  border:1.5px solid var(--arr-red);
  color:var(--arr-red);
  background:#fff;
  text-decoration:none;
  box-sizing:border-box;
  cursor:pointer;
}
.pill--active{ background:var(--arr-red); color:#fff; }
.pill .arw svg{ width:26px; height:14px; }

.card.e-con{
  flex:1 1 0%;
  flex-direction:column;
  align-items:stretch;
  border:1.5px solid var(--arr-border);
  border-radius:26px;
  padding:40px 46px 44px;
  gap:0;
}
.card__tabs{
  display:inline-flex;
  align-items:center;
  gap:4px;
  border:1.5px solid var(--arr-red);
  border-radius:28px;
  padding:5px;
  align-self:flex-start;
}
.tab{
  padding:9px 22px;
  border-radius:22px;
  font-family:'Instrument Sans', system-ui, sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--arr-red);
}
.tab--active{ background:var(--arr-red); color:#fff; }
.card__title.elementor-widget-heading .elementor-heading-title{
  font-family:'Instrument Sans', system-ui, sans-serif;
  font-size:27px;
  font-weight:700;
  color:var(--arr-red);
  margin:30px 0 0;
  line-height:1.2;
}
.card__text.elementor-widget-text-editor p{
  color:var(--arr-soft);
  font-family:'Instrument Sans', system-ui, sans-serif;
  font-size:16px;
  font-weight:500;
  line-height:1.55;
  margin:22px 0 0;
  max-width:660px;
}
.card__actions.e-con{
  flex-direction:row;
  flex-wrap:nowrap;
  gap:16px;
  margin-top:34px;
  align-items:center;
  padding:0;
}
.card__actions .elementor-widget-button{ width:auto; }
.card__actions .elementor-widget-button .elementor-button{
  font-family:'Instrument Sans', system-ui, sans-serif;
  padding:15px 32px;
  border-radius:28px;
  font-weight:700;
  font-size:15px;
  line-height:1;
  min-height:0;
  box-shadow:none;
  letter-spacing:normal;
}
.card__actions .elementor-widget-button .elementor-button-text{ font-weight:700; font-size:15px; }
.btn--solid.elementor-widget-button .elementor-button{ background:var(--arr-red); color:#fff; border:1.5px solid var(--arr-red); }
.btn--solid.elementor-widget-button .elementor-button:hover,
.btn--solid.elementor-widget-button .elementor-button:focus{ background:var(--arr-red); color:#fff; }
.btn--solid.elementor-widget-button .elementor-button-text{ color:#fff; }
.btn--outline.elementor-widget-button .elementor-button{ background:#fff; border:1.5px solid var(--arr-red); color:var(--arr-red); }
.btn--outline.elementor-widget-button .elementor-button:hover,
.btn--outline.elementor-widget-button .elementor-button:focus{ background:#fff; color:var(--arr-red); }
.btn--outline.elementor-widget-button .elementor-button-text{ color:var(--arr-red); }

/* ---- REMUNERACION ---- */
.remun.e-con{
  flex-direction:column;
  align-items:stretch;
  margin-top:120px;
  padding-bottom:150px;
  padding-left:92px;
  padding-right:92px;
  gap:0;
}
.remun__title.elementor-widget-heading .elementor-heading-title{
  font-family:'Instrument Sans', system-ui, sans-serif;
  font-size:44px;
  font-weight:700;
  color:var(--arr-red);
  line-height:1.15;
  margin:0;
}
.remun__bar.e-con{
  flex-direction:row;
  flex-wrap:nowrap;
  justify-content:space-between;
  align-items:center;
  margin-top:74px;
  padding:0;
}
.remun__dl{
  font-family:'Instrument Sans', system-ui, sans-serif;
  font-size:16px;
  font-weight:600;
  letter-spacing:.07em;
  color:var(--arr-red);
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  cursor:pointer;
}
.remun__dl .arw svg{ width:26px; height:14px; }
.remun__nav.e-con{
  flex-direction:row;
  gap:16px;
  flex:0 0 auto;
  width:auto;
  padding:0;
  align-items:center;
}
.circ{
  width:58px;
  height:58px;
  border-radius:50%;
  border:1.5px solid var(--arr-red);
  background:#fff;
  color:var(--arr-red);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
  font:inherit;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
}
.circ svg{ width:22px; height:14px; }

/* Las dcards son imágenes de ancho fijo (458px, texto incrustado: no pueden
   encogerse sin perder legibilidad). Las 3 solo caben desde ~1660px de viewport;
   por debajo, el carrusel debe scrollear internamente o fuerza scroll
   horizontal de toda la página. */
.carousel.e-con{
  flex-direction:row;
  flex-wrap:nowrap;
  gap:52px;
  margin-top:34px;
  padding:0 0 8px;
  align-items:flex-start;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.dcard.elementor-widget-image{ flex:0 0 458px; width:458px; }
.dcard.elementor-widget-image img{
  width:458px;
  max-width:100%;
  height:auto;
  display:block;
  border-radius:26px;
}

.report.e-con{
  margin-top:60px;
  border:1.5px solid var(--arr-border);
  border-radius:30px;
  padding:48px 58px;
  flex-direction:row;
  flex-wrap:nowrap;
  justify-content:space-between;
  align-items:center;
  gap:0;
}
.report__title.elementor-widget-heading .elementor-heading-title{
  font-family:'Instrument Sans', system-ui, sans-serif;
  font-size:31px;
  font-weight:700;
  color:var(--arr-red);
  text-transform:uppercase;
  line-height:1.08;
  margin:0;
}
.report__amount{ display:flex; align-items:flex-start; gap:14px; }
.report__num{
  font-family:'Instrument Sans', system-ui, sans-serif;
  font-size:56px;
  font-weight:700;
  color:var(--arr-red);
  line-height:1;
  letter-spacing:-.01em;
}
.report__unit{
  color:var(--arr-salmon);
  font-family:'Instrument Sans', system-ui, sans-serif;
  font-weight:700;
  font-size:19px;
  line-height:1.15;
  text-transform:uppercase;
  margin-top:7px;
}

/* =========================================================
   MOBILE (<900px)
   ========================================================= */
@media (max-width:900px){
  .nav.e-con{ margin:16px 16px 0; height:auto; min-height:0; flex-wrap:wrap; padding:16px 20px; row-gap:14px; }
  .nav__menu.e-con{ order:3; width:100%; flex-wrap:wrap; justify-content:center; gap:16px 22px; margin:0; }
  .nav__right.e-con{ margin-left:auto; }

  .hero.e-con{ padding:44px 20px 0; }
  .hero__title.elementor-widget-heading .elementor-heading-title{ font-size:34px; }
  .hero__text.elementor-widget-text-editor p{ font-size:17px; }

  .container.e-con{ padding:0 24px; }
  .remun.e-con{ padding-left:24px; padding-right:24px; }

  .doc.e-con{ margin-top:120px; }
  .doc__title.elementor-widget-heading .elementor-heading-title{ font-size:32px; }
  .doc__grid.e-con{ flex-direction:column; gap:22px; }
  .doc__tabs.e-con{ width:100%; flex:1 1 auto; }
  .card.e-con{ width:100%; flex:1 1 auto; padding:28px 24px 32px; }
  .card__title.elementor-widget-heading .elementor-heading-title{ font-size:23px; }
  .card__actions.e-con{ flex-wrap:wrap; }
  .card__actions .elementor-widget-button{ width:100%; }
  .card__actions .elementor-widget-button .elementor-button{ width:100%; justify-content:center; }

  .remun.e-con{ margin-top:80px; padding-bottom:90px; }
  .remun__title.elementor-widget-heading .elementor-heading-title{ font-size:32px; }
  .remun__bar.e-con{ flex-direction:column; align-items:flex-start; gap:20px; margin-top:44px; }
  .remun__nav.e-con{ align-self:flex-end; }

  .carousel.e-con{ gap:20px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:8px; }
  .dcard.elementor-widget-image{ flex:0 0 78vw; width:78vw; max-width:458px; }
  .dcard.elementor-widget-image img{ width:100%; }

  .report.e-con{ flex-direction:column; align-items:flex-start; gap:24px; padding:32px 26px; }
  .report__title.elementor-widget-heading .elementor-heading-title{ font-size:26px; }
  .report__num{ font-size:44px; }
}

/* ===== HEADER GLOBAL — páginas Header/Footer del Sitio (2026-07-12) ===== */

/* El wrapper del tema (.site-header de Hello) es flex y encogería el header inyectado.
   Doble clase (.site-header.arrayanes-site-header) para empatar la especificidad 0,2,0
   de theme.css (.site-header:not(.dynamic-header){max-width:1140px}) y ganar por orden.
   position:sticky + top:0: base del header auto-ocultable
   (ver assets/js/zenth-header-scroll.js). sticky conserva el espacio de layout,
   así que el contenido NO salta al ocultarse; el pill mantiene sus márgenes.

   z-index:9999 (NO un valor bajo como 990): position:sticky crea un CONTEXTO DE
   APILAMIENTO que CONFINA a todos sus descendientes, incluido el drawer
   (#arr-drawer .zenth-drawer{position:fixed;z-index:9999}, ver zenth-widgets.css).
   Un descendiente position:fixed NO escapa del contexto del ancestro: su
   z-index:9999 solo ordena DENTRO del header, no frente a la raíz de la página.
   Por eso el header apila alto: eleva TODA su banda (pill + drawer) por encima
   del chrome flotante típico (WhatsApp, barra de cookies, back-to-top, popups).
   Con el header a 990 el drawer quedaba efectivamente a 990 y cualquier float a
   nivel root con z-index 991-9998 lo tapaba, rompiendo el modal (role=dialog).
   INVARIANTE: ningún elemento a nivel root debe apilar >= 9999 si debe quedar por
   debajo del drawer. Fix de raíz (fuera de este CSS): renderizar el drawer a nivel
   <body> (wp_footer) o migrarlo a <dialog> nativo con top-layer. */
.site-header.arrayanes-site-header{
  display:block;
  padding:0;
  max-width:none;
  width:100%;
  position:sticky;
  top:0;
  z-index:9999;
  transition:transform .3s ease;
}
.arrayanes-site-header > .elementor{ width:100%; }

/* Estado oculto: el JS añade .arr-header--hidden al bajar el scroll; el header
   sube fuera de vista. -115% cubre el pill más su margen/sombra superior.
   Estado visible = sin la clase (transform:translateY(0) implícito). */
.site-header.arrayanes-site-header.arr-header--hidden{
  transform:translateY(-115%);
}

/* prefers-reduced-motion: el comportamiento (ocultar/mostrar) se mantiene,
   pero sin la animación de transición. */
@media (prefers-reduced-motion:reduce){
  .site-header.arrayanes-site-header{
    transition:none;
  }
}

/* ---- Reset local: el header inyectado no debe heredar defaults del e-con ---- */
/* Sin gap:0 aquí: cada container del seed ya declara su propio flex_gap
   explícito (0 en la pill, 26px en .arr-nav__right); resetear gap de forma
   global con un selector de 2 clases pisaría ese valor en TODOS los .e-con
   anidados (mayor especificidad que la regla base .e-con{gap:var(--gap)}
   de Elementor), incluido el grupo derecho. */
.e-con{ padding:0; }

/* ---- PILL (desktop, base) ---- */
.arr-nav.e-con{
  margin:26px 40px 0;
  max-width:none;
  width:auto;
  background:var(--arr-red);
  border-radius:30px;
  min-height:74px;
  padding:0 20px 0 30px;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
}

/* Los widgets dentro del flex de la pill no deben estirarse al 100% */
.arr-nav.e-con > .elementor-widget{ width:auto; }

/* ---- Logo ---- */
.arr-nav__logo{ flex:0 0 auto; width:auto; }
.arr-nav__logo img,
.arr-nav .elementor-widget-image img{
  /* !important justificado: una declaración de width de Elementor (no rastreable
     por enumeración de reglas) colapsaba el SVG a 48px pese a width:auto con
     mayor especificidad aparente; verificado empíricamente que solo inline/
     important lo corrige a los ~168px reales (2026-07-30). aspect-ratio de
     respaldo por si el intrínseco del SVG no se honra. */
  height:46px !important;
  width:auto !important;
  max-width:none !important;
  aspect-ratio: 31.4 / 8.6;
  display:block;
}

/* ---- Menú (solo desktop >1024px) ---- */
.arr-nav .elementor-widget-zenth-nav-menu,
.arr-nav__menu{
  margin:0 auto;
  width:auto;
  flex:0 0 auto;
}
.arr-nav__menu .zenth-menu__list{
  display:flex;
  align-items:center;
  gap:30px;
  margin:0;
  padding:0;
  list-style:none;
}
.arr-nav__menu .zenth-menu__list a,
.arr-nav .zenth-menu__list a{
  color:#fff;
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:16px;
  font-weight:500;
  text-decoration:none;
  line-height:1.2;
}
.arr-nav__menu .zenth-menu__list a:hover,
.arr-nav__menu .zenth-menu__list a:focus,
.arr-nav .zenth-menu__list a:hover,
.arr-nav .zenth-menu__list a:focus{
  text-decoration:underline;
  text-underline-offset:4px;
}
.arr-nav__menu .zenth-menu__list .current-menu-item a,
.arr-nav .zenth-menu__list .current-menu-item a{
  font-weight:700;
}

/* ---- Grupo derecho ---- */
/* Es un contenedor e-con (no widget): necesita width:auto explícito porque
   .arr-nav.e-con > .elementor-widget{width:auto} no lo cubre y el e-con por
   defecto se estira (width:100%) llenando todo el espacio libre del flex.
   En desktop NO lleva margin-left:auto: el menú (.arr-nav__menu con
   margin:0 auto) es el ÚNICO item con márgenes auto, así que el espacio libre
   se reparte en dos franjas iguales a sus lados (respiración simétrica
   logo↔menú y menú↔DONAR) y el grupo derecho queda anclado al borde derecho
   por sí solo. En tablet/móvil el menú se oculta (hidden-tablet/mobile →
   display:none, sin márgenes auto en juego): allí margin-left:auto reaparece
   en la media query ≤1024 para volver a anclar el grupo al borde derecho. */
.arr-nav__right,
.arr-nav__right.e-con{
  flex:0 0 auto;
  width:auto;
  max-width:none;
}

/* DONAR (pill blanca) */
.arr-nav__donar.elementor-widget-button .elementor-button,
.arr-nav__right .elementor-widget-button .elementor-button{
  background:#fff;
  color:var(--arr-red);
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight:700;
  font-size:15px;
  padding:12px 28px;
  border:none;
  border-radius:24px;
  letter-spacing:.02em;
  line-height:1;
  min-height:0;
  min-width:0;
  box-shadow:none;
}
.arr-nav__donar.elementor-widget-button .elementor-button:hover,
.arr-nav__donar.elementor-widget-button .elementor-button:focus,
.arr-nav__right .elementor-widget-button .elementor-button:hover,
.arr-nav__right .elementor-widget-button .elementor-button:focus{
  opacity:.9;
}
.arr-nav__donar .elementor-button-text{
  color:var(--arr-red);
  font-weight:700;
  font-size:15px;
}

/* Ícono usuario */
.arr-nav__user .elementor-icon,
.arr-nav .elementor-widget-icon .elementor-icon{
  color:#fff;
  font-size:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.arr-nav__user svg,
.arr-nav .elementor-widget-icon svg{
  width:26px;
  height:26px;
  fill:none;
  stroke:currentColor;
  display:block;
}

/* Ícono usuario (widget propio zenth-icon-link, con aria-label de primera clase) */
.arr-nav .zenth-icon-link{
  color:#fff;
  display:inline-flex;
  align-items:center;
}
.arr-nav .zenth-icon-link svg{
  width:26px;
  height:26px;
  fill:none;
  stroke:currentColor;
}

/* Hamburguesa */
.arr-nav__burger .zenth-burger,
.arr-nav .zenth-burger{
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  padding:0;
  cursor:pointer;
}
.arr-nav__burger .zenth-burger__box{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.arr-nav__burger .zenth-burger__line{
  display:block;
  width:22px;
  height:2px;
  background:currentColor;
  border-radius:2px;
}

/* =========================================================
   TABLET (≤1024px) — MISMO pill que desktop (min-height 74px,
   margin 26px 40px 0, logo 46px): solo se oculta el menú inline
   (hidden-tablet). Como el menú deja de aportar sus márgenes auto,
   el grupo derecho recupera aquí margin-left:auto para quedar
   anclado al borde derecho del pill.
   ========================================================= */
@media (max-width:1024px){
  .arr-nav__right,
  .arr-nav__right.e-con{
    margin-left:auto;
  }
}

/* =========================================================
   MOBILE (≤767px) — sin menú ni DONAR, orden derecho invertido
   ========================================================= */
@media (max-width:767px){
  .arr-nav.e-con{
    margin:16px 16px 0;
    min-height:96px;
    border-radius:48px;
    padding:0 24px 0 20px;
  }
  .arr-nav__logo img,
  .arr-nav .elementor-widget-image img{
    height:60px !important; /* debe ser !important para ganar al height base (también !important) */
  }

  /* Orden invertido: hamburguesa primero, usuario después.
     Los hijos directos del flex de .arr-nav__right son los wrappers
     .elementor-widget (no los elementos internos como .zenth-burger),
     por eso el fallback aplica order también a esos wrappers. */
  .arr-nav__right{
    display:flex;
    align-items:center;
  }
  .arr-nav__right .arr-nav__burger{ order:1; }
  .arr-nav__right .arr-nav__user{ order:2; }
  .arr-nav__right .elementor-widget-zenth-drawer-toggle{ order:1; }
  .arr-nav__right .elementor-widget-icon{ order:2; }
  .arr-nav__right .elementor-widget-zenth-icon-link{ order:2; }

  .arr-nav__user .elementor-icon{
    font-size:30px;
  }
  .arr-nav__user svg,
  .arr-nav .zenth-icon-link svg{
    width:30px;
    height:30px;
  }
  .arr-nav__burger .zenth-burger__line{
    width:30px;
  }
}

/* =========================================================
   DRAWER (offcanvas) — vive dentro del header inyectado
   ========================================================= */
.zenth-drawer__panel{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  background:var(--arr-red);
  padding:36px 30px;
  width:min(420px, 88vw);
}
.zenth-drawer__list{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin:0;
  padding:0;
  list-style:none;
}
.zenth-drawer__list a{
  color:#fff;
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:22px;
  font-weight:600;
  text-decoration:none;
}
.zenth-drawer__close{
  color:#fff;
  font-size:34px;
  position:absolute;
  top:36px;
  right:30px;
  background:transparent;
  border:none;
  line-height:1;
  cursor:pointer;
}
.zenth-drawer__donar{
  display:inline-block;
  margin-top:28px;
  background:#fff;
  color:var(--arr-red);
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight:700;
  font-size:15px;
  padding:12px 28px;
  border-radius:24px;
  letter-spacing:.02em;
  line-height:1;
  text-decoration:none;
}
.zenth-drawer__donar:hover,
.zenth-drawer__donar:focus{
  opacity:.9;
}

/* ---- FOOTER GLOBAL ---- */

/* El wrapper del tema (.site-footer de Hello) tiene el mismo max-width
   heredado vía .site-footer:not(.dynamic-footer) (especificidad 0,2,0)
   que el header: doble clase para empatar especificidad y ganar por
   orden de carga, igual que .site-header.arrayanes-site-header arriba. */
.site-footer.arrayanes-site-footer{ display:block; padding:0; max-width:none; width:100%; }
.arrayanes-site-footer > .elementor{ width:100%; }

/* ---- Raíz del footer ---- */
/* position:relative + overflow:hidden: recortan el corazón decorativo
   (::after, solo mobile) para que no desborde la página. arr-footer__main
   y arr-footer__bottom van con z-index:1 para quedar siempre por encima. */
.arr-footer.e-con{
  background:#0A0A0A;
  color:#fff;
  width:100%;
  max-width:none;
  padding:0;
  position:relative;
  overflow:hidden;
  flex-direction:column;
}

/* "Curva" superior: la hoja blanca del contenido remata sobre el negro.
   Primer ítem del flex column (antes de arr-footer__main), sin necesidad
   de position:absolute. */
.arr-footer::before{
  content:'';
  display:block;
  width:100%;
  height:34px;
  background:#fff;
  border-radius:0 0 28px 28px;
  flex:0 0 auto;
}

/* ---- Zona principal ---- */
.arr-footer__main.e-con{
  padding:72px 40px 56px;
  position:relative;
  z-index:1;
}

/* Heading compartido por Contacto / Nosotros / Programas */
.arr-footer__heading .elementor-heading-title{
  color:#fff;
  font-size:18px;
  font-weight:700;
  line-height:1.3;
  margin:0 0 28px;
}

/* -- Columna Contacto -- */
.arr-footer__contact.e-con{
  flex:1 1 260px;
}
.arr-footer__contact-text p{
  color:rgba(255,255,255,.55);
  font-size:15px;
  line-height:1.6;
  margin:0 0 16px;
}
.arr-footer__contact-text p:last-child{ margin-bottom:0; }
.arr-footer__contact-text a{ color:inherit; text-decoration:none; }
.arr-footer__contact-text a:hover,
.arr-footer__contact-text a:focus{ color:#fff; text-decoration:underline; }

.arr-footer__logo{ margin-top:64px; }
.arr-footer__logo img,
.arr-footer__contact .elementor-widget-image img{
  max-width:none; /* mismo blindaje anti-colapso que el logo del header */
  height:44px;
  width:auto;
  display:block;
}

/* -- Menús (Nosotros / Programas) -- */
.arr-footer__menus.e-con{
  flex:0 0 auto;
  width:auto;
  max-width:none;
}
.arr-footer__col-nosotros.e-con,
.arr-footer__col-programas.e-con{
  flex:0 0 auto;
  width:auto;
  max-width:none;
}
.arr-footer__menus .zenth-menu__list,
.arr-footer .elementor-widget-zenth-nav-menu .zenth-menu__list{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
}
.arr-footer__menus .zenth-menu__list a,
.arr-footer .elementor-widget-zenth-nav-menu .zenth-menu__list a{
  color:rgba(255,255,255,.55);
  font-size:15px;
  line-height:1.3;
  text-decoration:none;
}
.arr-footer__menus .zenth-menu__list a:hover,
.arr-footer__menus .zenth-menu__list a:focus,
.arr-footer .elementor-widget-zenth-nav-menu .zenth-menu__list a:hover,
.arr-footer .elementor-widget-zenth-nav-menu .zenth-menu__list a:focus{
  color:#fff;
}

/* -- Newsletter -- */
.arr-footer__news.e-con{
  flex:1 1 380px;
  max-width:480px;
}
.arr-footer__news-title .elementor-heading-title{
  color:#fff;
  font-size:34px;
  font-weight:700;
  line-height:1.15;
  margin:0;
}
.arr-footer__news-subtitle p{
  color:rgba(255,255,255,.55);
  font-size:16px;
  line-height:1.5;
  margin:18px 0 22px;
}

/* Pill blanca del input: alto 48 (radius 24 = alto/2). Botón flecha negro
   en pill 56x36 pegado a la derecha con margin:6 (6+36+6=48=alto de la pill). */
.arr-footer .zenth-news__row,
.arr-footer .elementor-widget-zenth-newsletter .zenth-news__row{
  display:flex;
  align-items:center;
  background:#fff;
  border-radius:24px;
  min-height:48px;
  padding-left:22px;
}
.arr-footer .zenth-news__row:focus-within{
  box-shadow:0 0 0 2px #0A0A0A, 0 0 0 4px #fff;
}
.arr-footer .zenth-news__input,
.arr-footer .elementor-widget-zenth-newsletter .zenth-news__input{
  flex:1 1 auto;
  min-width:0;
  background:transparent;
  border:none;
  outline:none;
  color:#0A0A0A;
  font-size:15px;
  padding:0;
}
.arr-footer .zenth-news__input::placeholder,
.arr-footer .elementor-widget-zenth-newsletter .zenth-news__input::placeholder{
  color:rgba(10,10,10,.45);
}
.arr-footer .zenth-news__btn,
.arr-footer .elementor-widget-zenth-newsletter .zenth-news__btn{
  flex:0 0 auto;
  width:56px;
  height:36px;
  margin:6px;
  border-radius:999px;
  background:#0A0A0A;
  border:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.arr-footer .zenth-news__legal,
.arr-footer .elementor-widget-zenth-newsletter .zenth-news__legal{
  margin:14px 0 0;
  color:rgba(255,255,255,.45);
  font-size:12px;
  line-height:1.5;
}
.arr-footer .zenth-news__legal a,
.arr-footer .elementor-widget-zenth-newsletter .zenth-news__legal a{
  color:rgba(255,255,255,.7);
  text-decoration:underline;
}
.arr-footer .zenth-news__msg,
.arr-footer .elementor-widget-zenth-newsletter .zenth-news__msg{
  margin:10px 0 0;
  font-size:13px;
}
.arr-footer .zenth-news__msg.is-ok{ color:#8fe3a6; }
.arr-footer .zenth-news__msg.is-error{ color:#ff9c9c; }

/* ---- Barra inferior ---- */
.arr-footer__bottom.e-con{
  display:flex;
  border-top:1px solid rgba(255,255,255,.12);
  padding:28px 40px 36px;
  justify-content:space-between;
  align-items:flex-start;
  position:relative;
  z-index:1;
}
.arr-footer__bottom-left.e-con{
  width:auto;
  max-width:none;
  flex:0 0 auto;
}
/* El bloque de redes va anclado al borde DERECHO: como hijo e-con flex
   necesita flex/margin explícitos para no estirarse ni quedar centrado. */
.arr-footer__bottom-right,
.arr-footer__bottom-right.e-con{
  width:auto;
  max-width:none;
  flex:0 0 auto;
  margin-left:auto;
  align-items:flex-end;
}

/* Selector de idioma (visual, sin funcionalidad real) */
.arr-footer .zenth-lang,
.arr-footer .elementor-widget-zenth-lang-select .zenth-lang{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:transparent;
  border:1px solid rgba(255,255,255,.35);
  border-radius:8px;
  padding:10px 16px;
  color:#fff;
  cursor:pointer;
}
.arr-footer .zenth-lang__tag,
.arr-footer .elementor-widget-zenth-lang-select .zenth-lang__tag{
  color:rgba(255,255,255,.55);
  font-size:9px;
}
.arr-footer .zenth-lang__value,
.arr-footer .elementor-widget-zenth-lang-select .zenth-lang__value{
  color:#fff;
  font-size:14px;
  font-weight:600;
}

.arr-footer__copyright p{
  color:#fff;
  font-size:14px;
  margin:0;
}

.arr-footer__legal-links p{
  color:rgba(255,255,255,.45);
  font-size:12px;
  margin:0;
}
.arr-footer__legal-links a{ color:inherit; text-decoration:none; }
.arr-footer__legal-links a:hover,
.arr-footer__legal-links a:focus{ color:#fff; }

.arr-footer__social-label p{
  color:rgba(255,255,255,.55);
  font-size:13px;
  line-height:1.4;
  margin:0;
  text-align:right;
}
.arr-footer__social-label strong{
  color:#fff;
  font-size:15px;
  font-weight:700;
}

.arr-footer__socials.e-con{
  width:auto;
  max-width:none;
}
/* Los widgets (íconos) dentro del flex de .arr-footer__socials no deben
   estirarse al 100%: mismo patrón que .arr-nav.e-con > .elementor-widget
   arriba, para mantener el grid de 4 círculos apretados de 42px. */
.arr-footer__socials.e-con > .elementor-widget{
  width:auto;
  flex:0 0 auto;
}
.arr-footer__social-link .zenth-icon-link,
.arr-footer .elementor-widget-zenth-icon-link .zenth-icon-link{
  width:42px;
  height:42px;
  border:1.5px solid #fff;
  border-radius:50%;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background-color .2s ease, color .2s ease;
}
.arr-footer__social-link .zenth-icon-link svg,
.arr-footer .elementor-widget-zenth-icon-link .zenth-icon-link svg{
  width:20px;
  height:20px;
}
.arr-footer__social-link .zenth-icon-link:hover,
.arr-footer__social-link .zenth-icon-link:focus,
.arr-footer .elementor-widget-zenth-icon-link .zenth-icon-link:hover,
.arr-footer .elementor-widget-zenth-icon-link .zenth-icon-link:focus{
  background:#fff;
  color:#0A0A0A;
}

/* =========================================================
   TABLET (≤1024px) — la columna de newsletter sube arriba
   ========================================================= */
@media (max-width:1024px){
  .arr-footer__main.e-con{
    padding:56px 32px 44px;
  }
  .arr-footer__news.e-con{
    order:-1;
    flex-basis:100%;
    max-width:520px;
  }
  .arr-footer__contact.e-con{
    flex:1 1 300px;
  }
  .arr-footer__menus.e-con{
    flex-wrap:wrap;
  }
}

/* =========================================================
   MOBILE (≤767px) — todo en columna: news, menús, contacto
   ========================================================= */
@media (max-width:767px){
  .arr-footer__main.e-con{
    flex-direction:column;
    padding:48px 24px 40px;
  }
  .arr-footer__news.e-con{
    order:1;
    flex-basis:auto;
    max-width:none;
  }
  .arr-footer__menus.e-con{
    order:2;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:32px;
  }
  .arr-footer__contact.e-con{
    order:3;
    flex:1 1 auto;
  }

  .arr-footer__bottom.e-con{
    flex-direction:column;
    align-items:flex-start;
    gap:28px;
    padding:24px 24px 32px;
  }
  .arr-footer__bottom-right,
  .arr-footer__bottom-right.e-con{
    align-items:flex-start;
    margin-left:0;
  }
  .arr-footer__social-label p{
    text-align:left;
  }

  /* Corazón decorativo: solo visible en mobile, detrás del contenido
     (z-index:0; arr-footer__main/arr-footer__bottom van en z-index:1). */
  .arr-footer::after{
    content:'';
    position:absolute;
    right:-110px;
    bottom:280px;
    width:340px;
    height:374px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 44'%3E%3Cpath d='M6 20 C 6 7, 13 3, 20 3 C 27 3, 34 7, 34 20 L 34 40 L 22 38 L 20 41 L 18 38 L 6 40 Z' fill='%233A3A3A'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-size:contain;
    z-index:0;
    pointer-events:none;
  }
}

/* ---- TRANSPARENCIA HERO ---- */

/* Raíz: la cinta decorativa vive en ::before (z-index 0); todo el contenido
   (fotos absolutas y bloque de texto) va en z-index 1 para quedar encima.
   overflow:visible a propósito: las fotos sangran fuera de la caja del hero
   (ver --der con right:-60px) y no deben recortarse. */
.arr-thero.e-con{
  position:relative;
  overflow:visible;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:90px 40px 110px;
  gap:0;
  z-index:0;
}
.arr-thero::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:url('img/deco-cinta.svg');
  background-repeat:no-repeat;
  background-position:center 40%;
  background-size:110% auto;
  z-index:0;
  pointer-events:none;
}

/* Contenido por encima de la cinta de fondo */
.arr-thero__eyebrow,
.arr-thero__title,
.arr-thero__stats,
.arr-thero__ctas{
  position:relative;
  z-index:1;
}

/* ---- Fotos (máscara flor + garabato detrás) ---- */
.arr-thero__photo{
  position:absolute;
  z-index:1;
  width:210px;
  aspect-ratio:1;
}
.arr-thero__photo .elementor-widget-container{
  width:100%;
  height:100%;
}
.arr-thero__photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  -webkit-mask-image:url('img/deco-flor.svg');
  mask-image:url('img/deco-flor.svg');
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}
.arr-thero__photo--izq{
  left:90px;
  top:60px;
}
.arr-thero__photo--izq::before{
  content:'';
  position:absolute;
  left:-60px;
  top:-60px;
  width:120px;
  height:132px;
  background-image:url('img/deco-garabato.svg');
  background-repeat:no-repeat;
  background-size:contain;
  z-index:-1;
  pointer-events:none;
}
.arr-thero__photo--der{
  width:230px;
  right:-60px;
  bottom:40px;
}
.arr-thero__photo--der::before{
  content:'';
  position:absolute;
  right:-50px;
  bottom:-50px;
  width:130px;
  height:143px;
  background-image:url('img/deco-garabato.svg');
  background-repeat:no-repeat;
  background-size:contain;
  z-index:-1;
  pointer-events:none;
}

/* ---- Eyebrow ---- */
.arr-thero__eyebrow.elementor-widget-heading .elementor-heading-title{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:18px;
  font-weight:600;
  color:var(--arr-salmon);
  opacity:.85;
  line-height:1.2;
  margin:0;
  text-align:center;
}

/* ---- Título ---- */
.arr-thero__title.elementor-widget-heading .elementor-heading-title{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:27px;
  font-weight:700;
  color:var(--arr-red);
  line-height:1.4;
  max-width:640px;
  margin:18px 0 0;
  text-align:center;
}

/* ---- Stats ---- */
.arr-thero__stats.e-con{
  gap:48px;
  margin-top:80px;
}
.arr-thero__stat.e-con{
  gap:0;
  flex:0 0 auto;
  width:auto;
}
.arr-thero__num.elementor-widget-heading .elementor-heading-title{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:40px;
  font-weight:700;
  color:var(--arr-red);
  line-height:1.1;
  margin:0;
  text-align:center;
}
.arr-thero__cap.elementor-widget-text-editor p{
  color:var(--arr-soft);
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  line-height:1.4;
  margin:10px 0 0;
  text-align:center;
}

/* ---- CTAs ---- */
.arr-thero__ctas.e-con{
  gap:24px;
  margin-top:70px;
}
.arr-thero__ctas .elementor-widget-button{ width:auto; }
.arr-thero__btn.elementor-widget-button .elementor-button{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.04em;
  padding:16px 30px;
  border-radius:28px;
  line-height:1;
  min-height:0;
  min-width:0;
  box-shadow:none;
}
.arr-thero__btn .elementor-button-icon svg{ fill:currentColor; }

.arr-thero__btn--solid.elementor-widget-button .elementor-button{
  background:var(--arr-red);
  color:#fff;
  border:none;
}
.arr-thero__btn--solid.elementor-widget-button .elementor-button:hover,
.arr-thero__btn--solid.elementor-widget-button .elementor-button:focus{
  background:#8E1A20;
  color:#fff;
}

.arr-thero__btn--soft.elementor-widget-button .elementor-button{
  background:#FBEDED;
  color:var(--arr-red);
  border:1px solid rgba(180,36,36,.35);
}
.arr-thero__btn--soft.elementor-widget-button .elementor-button:hover,
.arr-thero__btn--soft.elementor-widget-button .elementor-button:focus{
  background:var(--arr-red);
  color:#fff;
  border-color:var(--arr-red);
}

/* =========================================================
   TABLET (≤1024px) — fotos más chicas + título más angosto para
   que no choquen con el bloque de texto centrado (a este ancho el
   margen sobrante a los lados es menor que en desktop).
   ========================================================= */
@media (max-width:1024px){
  .arr-thero.e-con{
    padding:80px 32px 100px;
  }
  .arr-thero__title.elementor-widget-heading .elementor-heading-title{
    max-width:460px;
  }
  .arr-thero__photo--izq{
    width:130px;
    left:24px;
    top:30px;
  }
  .arr-thero__photo--izq::before{
    width:80px;
    height:88px;
    left:-40px;
    top:-40px;
  }
  .arr-thero__photo--der{
    width:150px;
    right:-20px;
    bottom:24px;
  }
  .arr-thero__photo--der::before{
    width:90px;
    height:99px;
    right:-35px;
    bottom:-35px;
  }
}

/* =========================================================
   MOBILE (≤767px) — foto derecha oculta, stats/ctas en columna
   ========================================================= */
@media (max-width:767px){
  .arr-thero.e-con{
    /* padding-top generoso: la foto izquierda repositionada (top:20,
       height:120) debe quedar libre por encima del eyebrow/título, que
       arrancan en el borde de padding (ver notas de posición absoluta). */
    padding:160px 20px 70px;
  }
  .arr-thero__title.elementor-widget-heading .elementor-heading-title{
    font-size:22px;
    max-width:100%;
  }
  .arr-thero__stats.e-con{
    flex-direction:column;
    gap:36px;
  }
  .arr-thero__ctas.e-con{
    flex-direction:column;
  }
  .arr-thero__photo--izq{
    width:120px;
    top:20px;
    left:16px;
  }
  .arr-thero__photo--izq::before{
    width:70px;
    height:77px;
    left:-30px;
    top:-30px;
  }
}

/* ---- TRANSPARENCIA DOC ---- */

/* Raíz de la sección: la flor decorativa vive en ::after (esquina superior
   derecha, detrás del contenido); cabecera de sección + widget de pestañas
   van en columna. Reemplaza el contenedor "documentos" anclado por la
   cirugía de "transparencia" (ver job_documentos() del seeder).
   OJO: usa ::after (no ::before) a propósito — Elementor core pinta su
   background-overlay en `.e-con::before` con `left:0` a igual especificidad;
   como esta regla no declara `left`, el `left:0` de Elementor se cuela sobre
   el `right:0` de aquí (el navegador ignora `right` cuando left+width están
   fijos), y la flor terminaba en la esquina superior IZQUIERDA tapando el
   título. ::after evita el choque de raíz; left:auto explícito abajo es
   cinturón y tirantes. */
.arr-tdoc.e-con{
  position:relative;
  flex-direction:column;
  gap:56px;
  padding:90px 40px;
  background:#fff;
  z-index:0;
}
.arr-tdoc::after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  left:auto;
  width:300px;
  height:300px;
  background-image:url('img/deco-flor.svg');
  background-repeat:no-repeat;
  background-position:top right;
  background-size:contain;
  z-index:0;
  pointer-events:none;
}
.arr-tdoc__head,
.arr-tdoc__widget{
  position:relative;
  z-index:1;
}

/* ---- Cabecera de sección ---- */
.arr-tdoc__head.e-con{
  gap:0;
  max-width:640px;
}
.arr-tdoc__eyebrow.elementor-widget-heading .elementor-heading-title{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:18px;
  font-weight:500;
  color:var(--arr-salmon);
  line-height:1.2;
  margin:0;
}
.arr-tdoc__title.elementor-widget-heading .elementor-heading-title{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:52px;
  font-weight:700;
  color:var(--arr-red);
  line-height:1.1;
  max-width:480px;
  margin:14px 0 0;
}
.arr-tdoc__text.elementor-widget-text-editor p{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:16px;
  font-weight:400;
  color:var(--arr-soft);
  line-height:1.6;
  max-width:480px;
  margin:18px 0 0;
}

/* ---- Selector de año ---- */
.arr-tdoc .zenth-doctabs__year{
  display:flex;
  justify-content:flex-end;
  margin-bottom:24px;
}
.arr-tdoc .zenth-doctabs__year-btn{
  gap:10px;
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:14px;
  font-weight:700;
  color:#fff;
  background:var(--arr-red);
  padding:12px 22px;
  border-radius:999px;
}
.arr-tdoc .zenth-doctabs__year-btn svg{
  transition:transform .2s;
}
.arr-tdoc .zenth-doctabs__year-btn[aria-expanded="true"] svg{
  transform:rotate(180deg);
}
.arr-tdoc .zenth-doctabs__year-list{
  margin-top:8px;
  background:#FBEDED;
  border-radius:14px;
  box-shadow:0 12px 30px rgba(180,36,36,.14);
  padding:8px;
  min-width:120px;
}
.arr-tdoc .zenth-doctabs__year-list li{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:14px;
  font-weight:600;
  color:var(--arr-red);
  padding:10px 18px;
  border-radius:10px;
}
.arr-tdoc .zenth-doctabs__year-list li:hover,
.arr-tdoc .zenth-doctabs__year-list li[aria-selected="true"]{
  background:#F6DADA;
}

/* ---- Grilla 2 columnas ---- */
.arr-tdoc .zenth-doctabs__grid{
  grid-template-columns:320px 1fr;
  gap:64px;
}

/* ---- Pestañas de categoría (izquierda) ---- */
.arr-tdoc .zenth-doctabs__tabs{
  gap:14px;
}
.arr-tdoc .zenth-doctabs__tab{
  height:64px;
  padding:0 28px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(180,36,36,.4);
  color:var(--arr-red);
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:15px;
  font-weight:600;
  transition:background .2s, color .2s, border-color .2s;
}
.arr-tdoc .zenth-doctabs__tab:hover{
  background:#FBEDED;
}
.arr-tdoc .zenth-doctabs__tab.is-active{
  background:var(--arr-red);
  border-color:var(--arr-red);
  color:#fff;
}
.arr-tdoc .zenth-doctabs__tab .arw{
  display:inline-flex;
  width:22px;
  height:11px;
}
.arr-tdoc .zenth-doctabs__tab .arw svg{ width:100%; height:100%; }

/* ---- Tarjeta ---- */
.arr-tdoc .zenth-doctabs__card{
  border:1px solid #F1CBCB;
  border-radius:26px;
  padding:40px 46px;
}
.arr-tdoc .zenth-doctabs__subtabs{
  display:inline-flex;
  gap:4px;
  border:1px solid rgba(180,36,36,.35);
  border-radius:24px;
  padding:5px;
  margin-bottom:32px;
}
.arr-tdoc .zenth-doctabs__subtab{
  padding:10px 20px;
  border-radius:999px;
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:12px;
  font-weight:600;
  color:var(--arr-red);
  transition:background .2s, color .2s;
}
.arr-tdoc .zenth-doctabs__subtab.is-active{
  background:var(--arr-red);
  color:#fff;
  font-weight:700;
}
.arr-tdoc .zenth-doctabs__title{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:26px;
  font-weight:700;
  color:var(--arr-red);
  line-height:1.3;
  max-width:520px;
  margin:0 0 16px;
}
.arr-tdoc .zenth-doctabs__desc{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:15px;
  font-weight:400;
  color:var(--arr-soft);
  line-height:1.6;
  max-width:660px;
  margin:0 0 32px;
}
.arr-tdoc .zenth-doctabs__actions{
  gap:18px;
}
.arr-tdoc .zenth-doctabs__btn{
  padding:16px 30px;
  border-radius:999px;
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  transition:background .2s, color .2s, border-color .2s;
}
.arr-tdoc .zenth-doctabs__btn--solid{
  background:var(--arr-red);
  color:#fff;
  border:none;
}
.arr-tdoc .zenth-doctabs__btn--solid:hover,
.arr-tdoc .zenth-doctabs__btn--solid:focus{
  background:#8E1A20;
  color:#fff;
}
.arr-tdoc .zenth-doctabs__btn--outline{
  background:#fff;
  color:var(--arr-red);
  border:1px solid rgba(180,36,36,.35);
  gap:10px;
}
.arr-tdoc .zenth-doctabs__btn--outline:hover,
.arr-tdoc .zenth-doctabs__btn--outline:focus{
  background:#FBEDED;
}
.arr-tdoc .zenth-doctabs__btn .arw{
  display:inline-flex;
  width:16px;
  height:10px;
}
.arr-tdoc .zenth-doctabs__btn .arw svg{ width:100%; height:100%; }

/* =========================================================
   TABLET (≤1024px) — grilla a 1 columna; las pestañas de
   categoría pasan de columna vertical a fila horizontal con wrap.
   ========================================================= */
@media (max-width:1024px){
  .arr-tdoc.e-con{
    padding:80px 32px;
  }
  .arr-tdoc__title.elementor-widget-heading .elementor-heading-title{
    font-size:42px;
  }
  .arr-tdoc .zenth-doctabs__grid{
    grid-template-columns:1fr;
    gap:32px;
  }
  .arr-tdoc .zenth-doctabs__tabs{
    flex-direction:row;
    flex-wrap:wrap;
    gap:12px;
  }
  .arr-tdoc .zenth-doctabs__tab{
    width:auto;
    height:auto;
    padding:14px 26px;
  }
  .arr-tdoc .zenth-doctabs__card{
    padding:32px;
  }
}

/* =========================================================
   MOBILE (≤767px)
   ========================================================= */
@media (max-width:767px){
  .arr-tdoc.e-con{
    padding:60px 20px;
  }
  .arr-tdoc__title.elementor-widget-heading .elementor-heading-title{
    font-size:36px;
    max-width:100%;
  }
  .arr-tdoc::after{
    width:180px;
    height:180px;
    left:auto;
  }
  .arr-tdoc .zenth-doctabs__subtabs{
    flex-wrap:wrap;
  }
  .arr-tdoc .zenth-doctabs__card{
    padding:24px;
  }
}

/* ---- TRANSPARENCIA DIRECTIVA ---- */

/* Panel: fondo rosa suave; el carrusel se recorta en su borde redondeado
   (overflow:hidden). Reemplaza el contenedor "directiva" (antes clase
   "remun", carrusel viejo — ver zona artesanal más arriba, CSS muerta que
   se deja intacta a propósito) anclado por la cirugía de "transparencia"
   (ver job_directiva() del seeder). */
.arr-tdir.e-con{
  position:relative;
  flex-direction:column;
  gap:0;
  background:#F7E5E2;
  border-radius:44px;
  margin:0 24px 40px;
  padding:90px 60px 70px;
  overflow:hidden;
}

/* ---- Cabecera ---- */
.arr-tdir__head.e-con{
  gap:0;
}
.arr-tdir__title.elementor-widget-heading .elementor-heading-title{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:40px;
  font-weight:700;
  color:var(--arr-red);
  line-height:1.15;
  max-width:480px;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.arr-tdir__text.elementor-widget-text-editor p{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:15px;
  font-weight:400;
  color:var(--arr-soft);
  line-height:1.6;
  max-width:540px;
  margin:22px 0 0;
}

/* ---- Widget / toolbar ---- */
/* margin-top negativo en el toolbar: el widget "arr-tdir__widget" es un
   flex item de .arr-tdir.e-con (establece su propio contexto de formato de
   bloque), así que el margen negativo del toolbar NO colapsa hacia afuera
   ni desplaza al widget completo — solo lo hace asomar visualmente hasta
   quedar a la altura del párrafo de la cabecera. */
.arr-tdir__widget{
  margin-top:52px;
}
.arr-tdir .zenth-teamcar__toolbar{
  justify-content:flex-end;
  gap:14px;
  margin-top:-60px;
  margin-bottom:40px;
}

/* Selector de año — mismo patrón visual que .zenth-doctabs__year (pill roja + listbox #FBEDED). */
.arr-tdir .zenth-teamcar__year-btn{
  gap:10px;
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:14px;
  font-weight:700;
  color:#fff;
  background:var(--arr-red);
  padding:12px 22px;
  border-radius:999px;
}
.arr-tdir .zenth-teamcar__year-btn svg{
  transition:transform .2s;
}
.arr-tdir .zenth-teamcar__year-btn[aria-expanded="true"] svg{
  transform:rotate(180deg);
}
.arr-tdir .zenth-teamcar__year-list{
  margin-top:8px;
  background:#FBEDED;
  border-radius:14px;
  box-shadow:0 12px 30px rgba(180,36,36,.14);
  padding:8px;
  min-width:120px;
}
.arr-tdir .zenth-teamcar__year-list li{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:14px;
  font-weight:600;
  color:var(--arr-red);
  padding:10px 18px;
  border-radius:10px;
}
.arr-tdir .zenth-teamcar__year-list li:hover,
.arr-tdir .zenth-teamcar__year-list li[aria-selected="true"]{
  background:#F6DADA;
}

/* Flechas circulares */
.arr-tdir .zenth-teamcar__nav{
  gap:10px;
}
.arr-tdir .zenth-teamcar__navbtn{
  width:40px;
  height:40px;
  border-radius:50%;
  border:1.5px solid var(--arr-red);
  background:transparent;
  color:var(--arr-red);
  transition:background .2s, color .2s;
}
.arr-tdir .zenth-teamcar__navbtn svg{
  width:18px;
  height:18px;
}
.arr-tdir .zenth-teamcar__navbtn:hover,
.arr-tdir .zenth-teamcar__navbtn:focus{
  background:var(--arr-red);
  color:#fff;
}
.arr-tdir .zenth-teamcar__navbtn[disabled],
.arr-tdir .zenth-teamcar__navbtn[aria-disabled="true"]{
  opacity:.35;
}

/* ---- Carrusel ---- */
.arr-tdir .zenth-teamcar__track{
  gap:52px;
  padding-bottom:8px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.arr-tdir .zenth-teamcar__track::-webkit-scrollbar{
  display:none;
}
.arr-tdir .zenth-teamcar__card{
  position:relative;
  flex:0 0 auto;
  width:460px;
  border-radius:24px;
  overflow:hidden;
  scroll-snap-align:start;
}
.arr-tdir .zenth-teamcar__photo{
  display:block;
  width:100%;
  aspect-ratio:1/1.05;
  object-fit:cover;
}
.arr-tdir .zenth-teamcar__overlay{
  position:absolute;
  left:16px;
  right:16px;
  bottom:16px;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:#F0838D;
  border-radius:12px;
  padding:10px 16px;
}
.arr-tdir .zenth-teamcar__info{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.arr-tdir .zenth-teamcar__cargo{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:9px;
  font-weight:600;
  color:rgba(255,255,255,.85);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.arr-tdir .zenth-teamcar__nombre{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:15px;
  font-weight:700;
  color:#fff;
}
.arr-tdir .zenth-teamcar__cc{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:9px;
  font-weight:600;
  color:rgba(255,255,255,.85);
  flex:0 0 auto;
}

/* ---- Reporte de remuneración ---- */
.arr-tdir .zenth-teamcar__report{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  max-width:560px;
  margin:56px auto 0;
  padding:26px 40px;
  border:1px solid rgba(180,36,36,.35);
  border-radius:20px;
}
.arr-tdir .zenth-teamcar__report-left{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.arr-tdir .zenth-teamcar__report-year{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:12px;
  font-weight:600;
  color:var(--arr-salmon);
}
.arr-tdir .zenth-teamcar__report-label{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:15px;
  font-weight:700;
  color:var(--arr-red);
  text-transform:uppercase;
  line-height:1.25;
  margin:0;
}
.arr-tdir .zenth-teamcar__report-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  flex:0 0 auto;
}
.arr-tdir .zenth-teamcar__report-sup{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:11px;
  font-weight:600;
  color:var(--arr-salmon);
  text-transform:uppercase;
}
.arr-tdir .zenth-teamcar__report-amount{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:38px;
  font-weight:700;
  color:var(--arr-red);
  line-height:1;
}
.arr-tdir .zenth-teamcar__report-inf{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:12px;
  font-weight:600;
  color:var(--arr-salmon);
}

/* ---- Descarga ---- */
.arr-tdir .zenth-teamcar__download{
  gap:10px;
  margin:28px auto 0;
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:12px;
  font-weight:700;
  color:var(--arr-red);
  text-transform:uppercase;
  letter-spacing:.06em;
  width:fit-content;
}
.arr-tdir .zenth-teamcar__download:hover,
.arr-tdir .zenth-teamcar__download:focus{
  text-decoration:underline;
}
.arr-tdir .zenth-teamcar__download .arw{
  display:inline-flex;
  width:16px;
  height:10px;
}
.arr-tdir .zenth-teamcar__download .arw svg{ width:100%; height:100%; }

/* =========================================================
   TABLET (≤1024px)
   ========================================================= */
@media (max-width:1024px){
  .arr-tdir.e-con{
    padding:60px 32px;
  }
  .arr-tdir__title.elementor-widget-heading .elementor-heading-title{
    font-size:32px;
  }
  .arr-tdir__widget{
    margin-top:32px;
  }
  .arr-tdir .zenth-teamcar__toolbar{
    margin-top:0;
    margin-bottom:32px;
  }
  .arr-tdir .zenth-teamcar__card{
    width:380px;
  }
}

/* =========================================================
   MOBILE (≤767px)
   ========================================================= */
@media (max-width:767px){
  .arr-tdir.e-con{
    margin:0 12px;
    border-radius:32px;
    padding:44px 20px;
  }
  .arr-tdir__title.elementor-widget-heading .elementor-heading-title{
    font-size:28px;
  }
  .arr-tdir .zenth-teamcar__track{
    gap:24px;
  }
  .arr-tdir .zenth-teamcar__card{
    width:300px;
  }
  .arr-tdir .zenth-teamcar__report{
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
  }
  .arr-tdir .zenth-teamcar__report-right{
    align-items:flex-start;
  }
}

/* ---- TRANSPARENCIA PARTICIPACION ---- */

/* Sección "Participación Ciudadana": fondo blanco, insertada como hermana
   siguiente de "arr-tdir" (ver job_participacion() del seeder). Ancla el
   destino real del botón "DEJAR COMENTARIO" del hero (#comentarios). */
.arr-tpart.e-con{
  background:#fff;
  flex-direction:column;
  padding:100px 40px 120px;
}

/* ---- Grilla de 2 columnas (40% contenido / 56% formulario) ---- */
/* El flex_gap:64 ya viene declarado en el propio container del seed
   (seeds/transparencia-participacion.json); aquí solo se reparte el ancho
   entre las dos columnas. */
.arr-tpart__grid.e-con{
  align-items:flex-start;
}
.arr-tpart__left{
  flex:0 1 40%;
  min-width:0;
}
.arr-tpart__right{
  flex:1 1 56%;
  min-width:0;
}

/* ---- Columna izquierda ---- */
.arr-tpart__eyebrow.elementor-widget-heading .elementor-heading-title{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:18px;
  font-weight:500;
  color:var(--arr-salmon);
  margin:0;
}
.arr-tpart__title.elementor-widget-heading .elementor-heading-title{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:52px;
  font-weight:700;
  color:var(--arr-red);
  line-height:1.1;
  margin:14px 0 0;
}
.arr-tpart__text.elementor-widget-text-editor p{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:16px;
  font-weight:400;
  color:var(--arr-soft);
  line-height:1.6;
  max-width:500px;
  margin:0;
}
.arr-tpart__text.elementor-widget-text-editor{
  margin-top:22px;
}
/* Segundo párrafo: separación de 18px respecto al primero (selector de
   hermano adyacente, misma especificidad que la regla base de arriba pero
   escrito después, así que gana en cascada). */
.arr-tpart__text.elementor-widget-text-editor + .arr-tpart__text.elementor-widget-text-editor{
  margin-top:18px;
}

/* ---- Redes sociales (zenth-icon-link, variante clara) ---- */
.arr-tpart__social.e-con{
  margin-top:32px;
}
.arr-tpart__social.e-con > .elementor-widget{
  width:auto;
  flex:0 0 auto;
}
.arr-tpart__social .zenth-icon-link,
.arr-tpart .elementor-widget-zenth-icon-link .zenth-icon-link{
  width:42px;
  height:42px;
  border:1.5px solid var(--arr-red);
  border-radius:50%;
  color:var(--arr-red);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background-color .2s ease, color .2s ease;
}
.arr-tpart__social .zenth-icon-link svg,
.arr-tpart .elementor-widget-zenth-icon-link .zenth-icon-link svg{
  width:18px;
  height:18px;
}
.arr-tpart__social .zenth-icon-link:hover,
.arr-tpart__social .zenth-icon-link:focus,
.arr-tpart .elementor-widget-zenth-icon-link .zenth-icon-link:hover,
.arr-tpart .elementor-widget-zenth-icon-link .zenth-icon-link:focus{
  background:var(--arr-red);
  color:#fff;
}

/* ---- Columna derecha: formulario (zenth-comment-form / .zenth-partform) ---- */
.arr-tpart .zenth-partform__body{
  gap:20px;
}
.arr-tpart .zenth-partform__row--2{
  gap:20px;
}

/* Campo sólido (nombre, motivo): pill roja, texto/label blancos. */
.arr-tpart .zenth-partform__field--solid{
  height:56px;
  padding:0 20px;
  background:var(--arr-red);
  border-radius:14px;
  color:#fff;
  transition:height .15s, padding .15s;
}
.arr-tpart .zenth-partform__field--solid .zenth-partform__input,
.arr-tpart .zenth-partform__field--solid .zenth-partform__label,
.arr-tpart .zenth-partform__select-label{
  color:#fff;
}
.arr-tpart .zenth-partform__field--solid .zenth-partform__input::placeholder{
  color:rgba(255,255,255,.75);
}
.arr-tpart .zenth-partform__field--solid.has-value{
  height:auto;
  min-height:56px;
  padding-top:10px;
  padding-bottom:8px;
}

/* Campo outline (correo, comentario): blanco, borde rojo translúcido, texto rojo. */
.arr-tpart .zenth-partform__field--outline{
  min-height:56px;
  padding:0 20px;
  background:#fff;
  border:1px solid rgba(180,36,36,.5);
  border-radius:14px;
  color:var(--arr-red);
  transition:padding .15s;
}
.arr-tpart .zenth-partform__field--outline .zenth-partform__input,
.arr-tpart .zenth-partform__field--outline .zenth-partform__label{
  color:var(--arr-red);
}
.arr-tpart .zenth-partform__field--outline .zenth-partform__input::placeholder{
  color:rgba(180,36,36,.5);
}
.arr-tpart .zenth-partform__field--outline.has-value{
  padding-top:10px;
  padding-bottom:8px;
}
.arr-tpart .zenth-partform__field--textarea{
  min-height:160px;
  padding:16px 20px;
}
.arr-tpart .zenth-partform__field--textarea .zenth-partform__input{
  min-height:110px;
  flex:1 1 auto;
}
.arr-tpart .zenth-partform__field--textarea.has-value{
  padding-top:20px;
}

/* ---- Foco visible ---- */
/* Compensa el outline:0 nativo de .zenth-partform__input en
   zenth-widgets.css (ver Estructural). Mismo anillo bicolor que
   .arr-footer .zenth-news__row:focus-within (más arriba en este archivo):
   funciona igual sobre field--solid (fondo rojo) que sobre field--outline
   (fondo blanco). .zenth-partform__select-btn vive dentro de
   .zenth-partform__field, así que :focus-within también lo cubre a él sin
   necesitar una regla propia. */
.arr-tpart .zenth-partform__field:focus-within{
  box-shadow:0 0 0 2px #0A0A0A, 0 0 0 4px #fff;
}

/* Etiqueta flotante: pequeña, arriba, con menor opacidad. */
.arr-tpart .zenth-partform__field.has-value .zenth-partform__label{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:1;
  margin-bottom:4px;
  opacity:.8;
}
.arr-tpart .zenth-partform__input{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:15px;
  font-weight:500;
}

/* ---- Select personalizado (motivo) — mismo patrón visual que
   .zenth-doctabs__year: pill roja + listbox #FBEDED. ---- */
.arr-tpart .zenth-partform__select-btn{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:15px;
  font-weight:600;
  gap:10px;
}
.arr-tpart .zenth-partform__chevron{
  flex:0 0 auto;
}
.arr-tpart .zenth-partform__select-list{
  margin-top:8px;
  background:#FBEDED;
  border-radius:14px;
  box-shadow:0 12px 30px rgba(180,36,36,.14);
  padding:8px;
}
.arr-tpart .zenth-partform__select-list li{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:13px;
  font-weight:600;
  color:var(--arr-red);
  padding:12px 18px;
  border-radius:10px;
}
.arr-tpart .zenth-partform__select-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}
.arr-tpart .zenth-partform__select-list li .arw{
  display:inline-flex;
  width:13px;
  height:9px;
  flex:0 0 auto;
  margin-left:10px;
  opacity:0;
  transition:opacity .15s;
}
.arr-tpart .zenth-partform__select-list li:hover,
.arr-tpart .zenth-partform__select-list li.is-active{
  background:#F6DADA;
}
.arr-tpart .zenth-partform__select-list li:hover .arw,
.arr-tpart .zenth-partform__select-list li.is-active .arw{
  opacity:1;
}

/* ---- Validación visual del correo ---- */
.arr-tpart .zenth-partform__field--email{
  padding-right:46px;
}
.arr-tpart .zenth-partform__validicon{
  right:16px;
  top:50%;
  transform:translateY(-50%);
}
.arr-tpart .zenth-partform__field--email.has-value .zenth-partform__validicon{
  top:auto;
  bottom:12px;
  transform:none;
}

/* ---- Legal ---- */
.arr-tpart .zenth-partform__legal{
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:12px;
  font-weight:400;
  color:var(--arr-salmon);
  text-align:center;
  line-height:1.5;
  max-width:520px;
  margin:4px auto 0;
}
.arr-tpart .zenth-partform__legal a{
  color:var(--arr-salmon);
  text-decoration:underline;
}

/* ---- Botón de envío ---- */
.arr-tpart .zenth-partform__submitrow{
  justify-content:flex-end;
}
.arr-tpart .zenth-partform__submit{
  height:58px;
  width:390px;
  max-width:100%;
  background:var(--arr-red);
  color:#fff;
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:17px;
  font-weight:600;
  border-radius:16px;
  transition:background-color .2s;
}
.arr-tpart .zenth-partform__submit:hover:not(:disabled),
.arr-tpart .zenth-partform__submit:focus:not(:disabled){
  background:#8E1A20;
}

/* ---- Estado de envío (siempre presente en el DOM, ver widget) ---- */
.arr-tpart .zenth-partform__status-pill{
  display:flex;
  align-items:center;
  justify-content:center;
  height:54px;
  border-radius:16px;
  padding:0 24px;
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:17px;
  font-weight:600;
  text-align:center;
}
.arr-tpart .zenth-partform__status-pill--ok{
  background:#2FA84F;
  color:#fff;
}
.arr-tpart .zenth-partform__status-pill--err{
  background:#fff;
  border:1px solid var(--arr-red);
  color:var(--arr-red);
}
.arr-tpart .zenth-partform__status-sub{
  margin:10px 0 0;
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:14px;
  font-weight:500;
  color:#2FA84F;
  text-align:center;
}

/* =========================================================
   TABLET (≤1024px) — una columna: contenido arriba, form abajo
   ========================================================= */
@media (max-width:1024px){
  .arr-tpart.e-con{
    padding:72px 32px;
  }
  .arr-tpart__grid.e-con{
    flex-direction:column;
    gap:48px;
  }
  .arr-tpart__left,
  .arr-tpart__right{
    flex:1 1 auto;
    width:100%;
  }
  .arr-tpart__title.elementor-widget-heading .elementor-heading-title{
    font-size:44px;
  }
  .arr-tpart__text.elementor-widget-text-editor,
  .arr-tpart__text.elementor-widget-text-editor p{
    max-width:none;
  }
}

/* =========================================================
   MOBILE (≤767px)
   ========================================================= */
@media (max-width:767px){
  .arr-tpart.e-con{
    padding:56px 20px 64px;
  }
  .arr-tpart__title.elementor-widget-heading .elementor-heading-title{
    font-size:36px;
  }
  .arr-tpart .zenth-partform__row--2{
    grid-template-columns:1fr;
  }
  .arr-tpart .zenth-partform__submitrow{
    justify-content:stretch;
  }
  .arr-tpart .zenth-partform__submit{
    width:100%;
  }
}

/* ---- MOTION (GSAP) ---- */

/* Soporte CSS del sistema de movimiento (assets/js/zenth-motion.js).
   Aquí NO se anima nada: el CSS solo prepara el estado inicial y presta
   variables a los pseudo-elementos, que GSAP no puede tocar.

   OJO CON EL SEEDER: esta subsección NO tiene entrada propia en el array
   $blocks de job_css() (class-zenth-seeder.php); viaja DENTRO del bloque
   "TRANSPARENCIA PARTICIPACION", que es el último del archivo. Por eso
   tiene que quedar SIEMPRE al final de seeds/style-header.css: si algún
   día se añade otro bloque con marcador propio detrás, hay que moverla
   antes de él o darle su propia entrada en $blocks.

   ============================================================
   CONTRATO CON EL JS — LEER ANTES DE TOCAR NADA
   ============================================================
   La lista de selectores pre-ocultados de abajo es el ESPEJO EXACTO de
   los selectores que zenth-motion.js revela (escenas de tipo 'reveal',
   'lote' y los pasos de las 'entrada'). Las dos listas se tocan SIEMPRE
   JUNTAS:

     - Selector aquí SIN escena en el JS  → contenido invisible para
       siempre (el peor fallo posible de esta capa).
     - Escena en el JS SIN selector aquí  → parpadeo: el elemento se ve,
       desaparece y vuelve a entrar.

   En zenth-motion.js hay una copia de esta lista (PREOCULTOS_CSS) y un
   comparador: ejecutar `ZenthMotion.auditar()` en la consola del
   navegador informa de cualquier desincronización entre ambas.

   POR QUÉ TODO CUELGA DE .zenth-motion: la clase la pone un script
   inline en el <head> (ver zenth_toolkit_motion_head() en
   zenth-toolkit.php) solo si hay JavaScript y el usuario no pide
   movimiento reducido. Sin JS o con reduced-motion la clase no existe,
   estas reglas no aplican y el sitio se ve entero desde el primer frame.
   Ningún contenido depende de que una animación llegue a ejecutarse. */

/* ---- Scroll conducido por JS ----
   Elementor declara `html{scroll-behavior:smooth}` en su CSS de frontend, y
   eso es INCOMPATIBLE con un scroll animado desde JavaScript: GSAP escribe
   la posición en cada frame, el navegador la toma como "destino al que ir
   suavemente" y no la aplica de inmediato; GSAP vuelve a leer, encuentra un
   valor distinto del que acaba de escribir, lo interpreta como "el usuario
   está haciendo scroll" y cancela el tween (autoKill de ScrollToPlugin).
   Efecto neto medido en el sitio real: los enlaces ancla NO se movían ni un
   píxel — ni con el manejador de Elementor ni con este. Con `auto`, el
   scroll suave de las anclas funciona.

   Va scopeado a .zenth-motion (que es el propio <html>): sin JavaScript o
   con movimiento reducido, Elementor conserva su comportamiento tal cual.

   ESTA REGLA ES UN RESPALDO, no la fuente única. zenth-motion.js fija
   `documentElement.style.scrollBehavior = 'auto'` en cuanto confirma que
   GSAP está: este CSS lo genera el seeder DENTRO del tema y el JS viaja en
   el plugin, así que entre `./deploy.sh plugin` y `wp zenth seed css` hay
   una ventana en la que el script está y la regla todavía no —y sin ella
   los enlaces ancla no se mueven ni un píxel—. Fijarlo también desde JS
   ata el arreglo de NAVEGACIÓN al script que lo necesita y sobrevive
   además a revelarTodo(), que quita la clase y con ella esta regla. */
.zenth-motion{
  scroll-behavior:auto;
}

.zenth-motion .arr-nav,
.zenth-motion .arr-thero__eyebrow,
.zenth-motion .arr-thero__title,
.zenth-motion .arr-thero__stat,
.zenth-motion .arr-thero__btn,
.zenth-motion .arr-thero__photo,
.zenth-motion .arr-tdoc__head,
.zenth-motion .arr-tdoc__widget,
.zenth-motion .arr-tdir__head,
.zenth-motion .zenth-teamcar__toolbar,
.zenth-motion .zenth-teamcar__card,
.zenth-motion .zenth-teamcar__report,
.zenth-motion .arr-tpart__eyebrow,
.zenth-motion .arr-tpart__title,
.zenth-motion .arr-tpart__text,
.zenth-motion .arr-tpart__social .elementor-widget,
.zenth-motion .arr-tpart .zenth-partform__field,
.zenth-motion .arr-tpart .zenth-partform__legal,
.zenth-motion .arr-tpart .zenth-partform__submitrow,
.zenth-motion .arr-footer__contact,
.zenth-motion .arr-footer__menus,
.zenth-motion .arr-footer__news,
.zenth-motion .arr-footer__social-link{
  opacity:0;
}

/* Los ítems del menú de la pill y los enlaces del drawer NO se pre-ocultan
   a propósito: los primeros ya son invisibles por herencia de .arr-nav, y
   el drawer entero está oculto hasta que se abre. Pre-ocultarlos solo
   añadiría superficie de fallo sin evitar ningún parpadeo. */

/* ---- Pseudo-elementos: el puente por variable CSS ----
   GSAP no puede animar ::before/::after (no son nodos del DOM y no tienen
   estilo inline). Las dos piezas decorativas que se mueven con el scroll
   son justamente pseudo-elementos, así que el JS anima una VARIABLE en el
   contenedor y el pseudo la consume aquí dentro de su transform.

   translate3d/translateZ en lugar de translateY/rotate a secas: promueve
   el pseudo a su propia capa de composición durante el scroll sin
   necesidad de un `will-change` permanente (que es justo lo que se quiere
   evitar; GSAP gestiona el suyo en los elementos que sí anima).

   El valor por defecto de las variables es el estado en reposo: si el JS
   no llega a fijarlas (móvil, reduced-motion, fallo de carga), la
   decoración queda exactamente como estaba antes de existir esta capa.

   @property NO ES OPCIONAL AQUÍ — leer antes de quitarlo: una custom
   property sin registrar es HEREDABLE, y el JS escribe estas dos con
   `scrub` sobre la RAÍZ DE UNA SECCIÓN ENTERA (.arr-thero, .arr-tdoc). Sin
   registro, cada frame del scrub invalida el estilo calculado de todo el
   subárbol —el hero completo con su título, sus stats, sus CTAs y sus dos
   fotos enmascaradas; el widget de documentación completo con todos sus
   paneles, estén o no [hidden]— y no solo del pseudo-elemento que de
   verdad las consume. Y el rango es amplio: 'top bottom' → 'bottom top',
   activo durante todo el paso de la sección por el viewport. Con
   `inherits:false` la invalidación se queda en el elemento, que es lo que
   hace que el translate3d de abajo ahorre de verdad. Los navegadores sin
   soporte de @property se saltan la regla entera y siguen funcionando
   exactamente como antes. */
@property --arr-cinta-y{
  syntax:"<length>";
  inherits:false;
  initial-value:0px;
}
@property --arr-flor-rot{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}
.zenth-motion .arr-thero::before{
  transform:translate3d(0, var(--arr-cinta-y, 0px), 0);
}
.zenth-motion .arr-tdoc::after{
  transform:rotate(var(--arr-flor-rot, 0deg)) translateZ(0);
}

/* Fotos con máscara de flor: entran con escala/rotación y luego llevan
   parallax. backface-visibility evita el parpadeo del borde de la máscara
   al recomponer la capa entre una animación y otra en WebKit. */
.zenth-motion .arr-thero__photo img{
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

/* Elementor declara `transition:all .3s` sobre .elementor-button. El hover
   del botón DONAR lo anima GSAP (gsap.quickTo sobre scale, .18s), que
   escribe transform en el estilo inline: con `all` en transición, el
   navegador vuelve a suavizar ESE MISMO cambio durante .3s y el resultado
   es un hover pastoso y desincronizado, con dos curvas peleándose. Aquí se
   acota la lista de propiedades en transición para dejar el transform en
   manos de GSAP, SIN tocar el fundido de color/opacidad que ya existía. */
.zenth-motion .arr-nav__donar .elementor-button{
  transition-property:background-color,color,opacity,box-shadow,border-color;
}

/* ---- Anulación por accesibilidad ----
   Cinturón y tirantes: el script del <head> ya evita añadir .zenth-motion
   cuando hay prefers-reduced-motion, pero si la clase llegara igualmente
   (usuario que activa la preferencia con la página abierta, caché de HTML
   servida a otro usuario, hoja de estilos aplicada sin ese script...) esta
   media query devuelve todo a la vista y deja la decoración quieta. */
@media (prefers-reduced-motion:reduce){
  .zenth-motion .arr-nav,
  .zenth-motion .arr-thero__eyebrow,
  .zenth-motion .arr-thero__title,
  .zenth-motion .arr-thero__stat,
  .zenth-motion .arr-thero__btn,
  .zenth-motion .arr-thero__photo,
  .zenth-motion .arr-tdoc__head,
  .zenth-motion .arr-tdoc__widget,
  .zenth-motion .arr-tdir__head,
  .zenth-motion .zenth-teamcar__toolbar,
  .zenth-motion .zenth-teamcar__card,
  .zenth-motion .zenth-teamcar__report,
  .zenth-motion .arr-tpart__eyebrow,
  .zenth-motion .arr-tpart__title,
  .zenth-motion .arr-tpart__text,
  .zenth-motion .arr-tpart__social .elementor-widget,
  .zenth-motion .arr-tpart .zenth-partform__field,
  .zenth-motion .arr-tpart .zenth-partform__legal,
  .zenth-motion .arr-tpart .zenth-partform__submitrow,
  .zenth-motion .arr-footer__contact,
  .zenth-motion .arr-footer__menus,
  .zenth-motion .arr-footer__news,
  .zenth-motion .arr-footer__social-link{
    opacity:1;
  }
  .zenth-motion .arr-thero::before,
  .zenth-motion .arr-tdoc::after{
    transform:none;
  }
}