/* =========================================================
   Experiencia Democrática · identidad visual (sistema de diseño v2: negro, grises y teal)
   Ajustes de componentes propios sobre ed.css. Los colores y fuentes del export
   de Figma los traduce tools/identidad.py al construir. Tokens: ed-tokens.css.
   ========================================================= */
html{-webkit-font-smoothing:antialiased}
::selection{background:var(--acento);color:var(--sobre-acento)}
h1,h2,h3{font-synthesis:none}

/* ---------- Botones: principal teal, secundario en contorno blanco translúcido, esquinas de 4 px ---------- */
.ed-btn{background:var(--acento);color:var(--sobre-acento);border-radius:var(--radio-2);font-family:var(--font-sans);font-weight:600;transition:background-color .15s,box-shadow .15s}
.ed-btn:hover{background:var(--acento-hover);transform:none;box-shadow:var(--sombra-acento-1)}
.ed-btn:focus-visible,a:focus-visible,button:focus-visible{outline:var(--borde-foco) solid var(--teal);outline-offset:2px}
.ed-btn--light{background:transparent;color:var(--papel);box-shadow:inset 0 0 0 1px rgba(244,245,246,.3)}
.ed-btn--light:hover{background:rgba(244,245,246,.06);color:var(--papel);box-shadow:inset 0 0 0 1px rgba(244,245,246,.6)}
.ed-btn[disabled]{background:transparent;color:var(--gris-300);box-shadow:inset 0 0 0 1px var(--grafito-600);opacity:1}
.ed-join-pill,.edp-nav .ed-join-pill,.ed-mobile__join{background:var(--acento)!important;color:var(--sobre-acento)!important;border-radius:var(--radio-2)!important}
.ed-join-pill:hover,.edp-nav .ed-join-pill:hover{background:var(--acento-hover)!important;box-shadow:var(--sombra-acento-1)!important}

/* Menú de la cabecera: sin píldoras */
.css-7tvcgb a[data-ed-link],.css-7tvcgb [data-ed-menu]{border-radius:var(--radio-2)}

/* Cabecera: negro */
:root{--ed-black:var(--negro)}
.edp-header{background:var(--negro)!important}

/* Botones de Figma en portada: principal (→ Únete) teal, secundario (→ programa) contorno */
#container a[data-ed-link][href="/unete"]{background:var(--acento)!important;border-radius:var(--radio-2)!important;transition:background-color .15s,box-shadow .15s}
#container a[data-ed-link][href="/unete"] p{color:var(--sobre-acento)!important;-webkit-text-fill-color:var(--sobre-acento)!important}
#container a[data-ed-link][href="/unete"]:hover{background:var(--acento-hover)!important;box-shadow:var(--sombra-acento-1)}
#container a[data-ed-link][href="#programa"]{background:transparent!important;border-radius:var(--radio-2)!important}
#container a[data-ed-link][href="#programa"]>div[aria-hidden]{border-color:rgba(244,245,246,.3)!important;border-radius:var(--radio-2)!important}
#container a[data-ed-link][href="#programa"]:hover{background:rgba(244,245,246,.06)!important}

/* Botones de sección de la portada (Ver principios, Nuestro enfoque…): Inter, minúscula normal */
.ed-cta p{font-family:var(--font-sans)!important;font-weight:600!important;text-transform:none!important;letter-spacing:normal!important}
.ed-cta{border-radius:var(--radio-2)!important}
@media (max-width:1199px){.ed-cta p{font-size:16px!important;line-height:20px!important}}

/* «Únete» del cierre de la portada: botón principal */
.ed-cta-cierre{background:var(--acento)!important;border-radius:var(--radio-2)!important;box-shadow:none}
.ed-cta-cierre p{color:var(--sobre-acento)!important;-webkit-text-fill-color:var(--sobre-acento)!important;font-family:var(--font-sans)!important;font-weight:600!important;text-transform:none!important;letter-spacing:normal!important}
@media (max-width:1199px){.ed-cta-cierre p{font-size:18px!important}}

/* ---------- Banda «¿Te sumas?» y formularios ---------- */
.ed-join{background:var(--negro);border-top:1px solid var(--grafito-600)}
.ed-join__kicker{color:var(--teal);font-family:var(--font-mono)!important;letter-spacing:.14em}
.ed-join p{color:var(--gris-300)}
.ed-form{border-radius:var(--radio-2);box-shadow:var(--sombra-1)}
.ed-field input[type=text],.ed-field input[type=email],.ed-field textarea{border-radius:var(--radio-2)}
.ed-field input:focus,.ed-field textarea:focus{outline-color:var(--teal-oscuro);border-color:var(--teal-oscuro)}
.ed-chip span{border-radius:var(--radio-1)}
.ed-chip input:checked+span{background:var(--negro);border-color:var(--negro)}
.ed-check input{accent-color:var(--teal-oscuro)}
.ed-steps li::before{border-radius:var(--radio-1);background:var(--negro)}
.ed-consent a,.ed-legal a{color:var(--teal-oscuro)}

/* ---------- Iconos Tabler (tools/identidad.py sustituye los de Figma por máscaras) ---------- */
.ed-ico{display:block;background-color:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;object-fit:contain}
.ed-ico--acento{background-color:var(--teal)}
img.ed-ico{background:none}

/* «Por qué elegirnos» (y contacto): textura de Figma apagada; el fondo lo da la animación */
img[src*="79a23fe25efb10d830591a7c44904e6e8997e281"]{mix-blend-mode:soft-light!important;opacity:.25}

/* ---------- Fondos animados (assets/ed-fondos.js) ---------- */
canvas.ed-fondo{opacity:1!important;mix-blend-mode:normal!important;filter:none!important;pointer-events:none;display:block}

/* ---------- «Cambiamos de gobierno»: sección propia en dos columnas sobre grafito ---------- */
.ed-problema{position:relative;display:block;width:100%;align-self:stretch;box-sizing:border-box;overflow:hidden;background:var(--grafito-800);border-top:1px solid var(--grafito-600);color:var(--papel);font-family:var(--font-sans)}
.ed-problema__fondo{position:absolute;inset:0;width:100%;height:100%}
.ed-problema__wrap{position:relative;max-width:1180px;margin:0 auto;padding:104px 40px;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"intro lista" "fin lista";column-gap:88px;row-gap:0;align-items:end}
.ed-problema__intro{grid-area:intro}
.ed-problema__fin{grid-area:fin;align-self:start}
.ed-problema__lista{grid-area:lista;align-self:center}
.ed-problema__kicker{margin:0 0 18px;font:400 14px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.ed-problema h2{margin:0 0 22px;font:700 44px/1.08 var(--font-display);letter-spacing:-.015em;color:var(--papel)}
.ed-problema h2 span{color:var(--gris-300)}
.ed-problema__lead{margin:0 0 40px;font-size:18px;line-height:1.55;color:var(--gris-300);max-width:440px}
.ed-problema__cierre{margin:0 0 10px;font-size:17px;line-height:1.5;color:var(--gris-300)}
.ed-problema__cierre strong{color:var(--papel);font-weight:600}
.ed-problema__giro{margin:0;font:400 22px/1.3 var(--font-display);color:var(--papel)}
.ed-problema__giro strong{display:block;font-weight:700;color:var(--teal)}
.ed-problema__lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--grafito-600)}
.ed-problema__lista li{display:grid;grid-template-columns:36px 40px 1fr;gap:18px;align-items:center;padding:26px 0;border-bottom:1px solid var(--grafito-600)}
.ed-problema__n{font:400 15px/1 var(--font-mono);color:var(--gris-400);letter-spacing:.06em}
.ed-problema__lista .ed-ico{width:32px;height:32px}
.ed-problema__lista p{margin:0;font:700 21px/1.3 var(--font-display);color:var(--papel)}
@media (max-width:1199px){
 .ed-problema__wrap{grid-template-columns:1fr;grid-template-areas:"intro" "lista" "fin";row-gap:40px;padding:80px 32px}
 .ed-problema__lead{margin-bottom:0}
 .ed-problema h2{font-size:36px}
}
@media (max-width:640px){
 .ed-problema__wrap{padding:64px 20px;row-gap:32px}
 .ed-problema h2{font-size:30px}
 .ed-problema__lista li{grid-template-columns:28px 32px 1fr;gap:14px;padding:20px 0}
 .ed-problema__lista .ed-ico{width:26px;height:26px}
 .ed-problema__lista p{font-size:18px}
}
canvas.ed-fondo--capa{position:absolute;inset:0;width:100%;height:100%}

/* ---------- «Método» + «Organización»: una sola banda (proceso en fila + reglas 2×2) ---------- */
.ed-metodo{position:relative;display:block;width:100%;align-self:stretch;box-sizing:border-box;background:var(--papel);color:var(--negro);font-family:var(--font-sans);border-top:1px solid #DADDE0}
.ed-metodo__fotos{display:grid;grid-template-columns:1fr 1fr;height:140px;overflow:hidden;position:relative;background:var(--negro)}
.ed-metodo__fotos img{width:100%;height:100%;object-fit:cover;object-position:center 72%;filter:grayscale(1) contrast(1.15) brightness(.78)}
.ed-metodo__fotos img+img{object-position:center 38%}
.ed-metodo__fotos::after{content:"";position:absolute;inset:0;background:var(--teal);mix-blend-mode:multiply;opacity:.9;pointer-events:none}
.ed-metodo__wrap{max-width:1180px;margin:0 auto;padding:56px 40px 64px;box-sizing:border-box}
.ed-metodo__cab{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:32px}
.ed-metodo__kicker{margin:0 0 14px;font:400 14px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--teal-oscuro)}
.ed-metodo h2{margin:0 0 10px;font:700 34px/1.1 var(--font-display);letter-spacing:-.015em;color:var(--negro)}
.ed-metodo h2 span{color:var(--gris-600)}
.ed-metodo__lead{margin:0;font-size:17px;line-height:1.55;color:var(--gris-600);max-width:560px}
.ed-metodo__enlace{flex:none;display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--font-sans);color:var(--negro);text-decoration:none;padding:13px 18px;border:1px solid var(--negro);border-radius:var(--radio-2);transition:background-color .15s,color .15s}
.ed-metodo__enlace::after{content:"→"}
.ed-metodo__enlace:hover{background:var(--negro);color:var(--papel)}
.ed-metodo__pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:paso}
.ed-metodo__pasos li{position:relative;padding:18px 22px 6px 0;margin-right:22px;border-top:2px solid #DADDE0;display:flex;flex-direction:column;gap:12px}
.ed-metodo__pasos li:not(:last-child)::after{content:"";position:absolute;top:-7px;right:-17px;width:10px;height:10px;border-top:2px solid #C2C7CC;border-right:2px solid #C2C7CC;transform:rotate(45deg)}
.ed-metodo__pasos .ed-ico{width:30px;height:30px;background-color:var(--teal-oscuro)}
.ed-metodo__n{font:400 14px/1 var(--font-mono);color:var(--gris-600);letter-spacing:.06em}
.ed-metodo__pasos p{margin:0;font:400 17px/1.35 var(--font-display);color:var(--gris-600)}
.ed-metodo__pasos p strong{display:block;font-weight:700;color:var(--negro)}
.ed-metodo__nota{margin:18px 0 0;font-size:15px;color:var(--gris-600)}
.ed-metodo__nota strong{color:var(--negro);font-weight:600}
.ed-metodo__org{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;margin-top:44px;padding-top:40px;border-top:1px solid #DADDE0;align-items:start}
.ed-metodo__orgcab .ed-metodo__lead{margin-bottom:22px}
.ed-metodo__reglas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ed-metodo__reglas li{display:flex;gap:16px;align-items:flex-start;background:var(--blanco);border:1px solid #DADDE0;border-radius:var(--radio-2);padding:18px 20px}
.ed-metodo__reglas .ed-ico{flex:none;width:28px;height:28px;background-color:var(--teal-oscuro)}
.ed-metodo__etq{margin:0 0 6px;font-size:14px;color:var(--gris-600)}
.ed-metodo__regla{margin:0;font:700 19px/1.25 var(--font-display);color:var(--negro)}
/* encendido progresivo al entrar en pantalla (assets/ed-fondos.js añade .is-on) */
@media (prefers-reduced-motion:no-preference){
 [data-ed-revela]{opacity:.25;transition:opacity .5s ease calc(var(--i,0) * 120ms),border-color .5s ease calc(var(--i,0) * 120ms)}
 [data-ed-revela].is-on{opacity:1}
 .ed-metodo__pasos li.is-on{border-top-color:var(--teal-oscuro)}
}
@media (prefers-reduced-motion:reduce){.ed-metodo__pasos li{border-top-color:var(--teal-oscuro)}}
@media (max-width:1199px){
 .ed-metodo__pasos{grid-template-columns:1fr;gap:0}
 .ed-metodo__pasos li{flex-direction:row;align-items:center;gap:16px;padding:18px 0;margin:0;border-top-width:1px}
 .ed-metodo__pasos li:not(:last-child)::after{display:none}
 .ed-metodo__org{grid-template-columns:1fr;gap:32px;margin-top:56px;padding-top:48px}
 .ed-metodo__cab{flex-direction:column;align-items:flex-start;gap:24px}
}
@media (max-width:640px){
 .ed-metodo__fotos{height:120px}
 .ed-metodo__wrap{padding:52px 20px 64px}
 .ed-metodo h2{font-size:28px}
 .ed-metodo__reglas{grid-template-columns:1fr}
}

/* ---------- Hero en tableta y móvil: collage en una fila limpia y botones a todo el ancho ---------- */
@media (max-width:1199px){
 .ed-collage{flex:none!important;align-self:stretch!important;position:relative!important;inset:auto!important;transform:none!important;width:100%!important;max-width:none!important;aspect-ratio:auto!important;height:auto!important;margin:0!important;display:block!important;--lado:calc((min(100vw - 48px, 590px) - 16px) / 3)}
 /* carrusel lento de las fotos del hero (tableta y móvil): pista duplicada que se desplaza -50% en bucle */
 .ed-carrusel{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
 .ed-carrusel__pista{display:flex;width:max-content;animation:ed-carrusel 48s linear infinite}
 .ed-carrusel:hover .ed-carrusel__pista{animation-play-state:paused}
 .ed-carrusel__foto{position:relative;flex:none;width:var(--lado);height:var(--lado);margin-right:8px;overflow:hidden;border-radius:var(--radio-2)}
 .ed-carrusel__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
 @keyframes ed-carrusel{to{transform:translateX(-50%)}}
 @media (prefers-reduced-motion:reduce){.ed-carrusel__pista{animation:none}.ed-carrusel{overflow-x:auto}}
 div:has(> a.ed-cta-ancho),div:has(> div > a.ed-cta-ancho){width:100%!important;max-width:none!important;align-self:stretch!important}
 #container .ed-cta-row:has(a.ed-cta-ancho){flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;gap:12px!important}
 #container .ed-cta-row:has(a.ed-cta-ancho)>.ed-cta-first{order:1} /* el contenedor de Figma está volteado (scaleY -1): order 1 lo pinta arriba */
 a.ed-cta-ancho{width:100%!important;max-width:none!important;box-sizing:border-box;justify-content:center}
 @media (min-width:756px){#container .ed-cta-row:has(a.ed-cta-ancho){flex-direction:row!important}#container .ed-cta-row:has(a.ed-cta-ancho)>*{flex:1 1 0!important;min-width:0}#container .ed-cta-row:has(a.ed-cta-ancho)>.ed-cta-first{order:-1}}
 a.ed-cta-ancho>div{width:100%!important;justify-content:center;text-align:center}
}