.pageWidth{width:100%;box-sizing:border-box;max-width:1100px;margin:0 auto;position:relative;z-index:1}@media screen and (max-width:1120px){.pageWidth{max-width:100%;padding:0 10px}}#intro{padding-top:calc(1.65em + 96px)!important;background:#fff3ee}

/* Layout grid con foto — medido de la referencia "Home":
   foto ~46% del ancho de contenido y casi cuadrada (625x671 ≈ aspect 0.93),
   top alineado con el título; los aliados van en una fila debajo, a la izquierda. */
/* Layout del HTML de referencia: grid de 1 fila, columnas 1.08fr 1fr, top-aligned.
   Columna derecha = foto (aspect 285/335) + dots debajo + isotipo asomando. */
#intro.conFoto .pageWidth{
  display:grid;
  grid-template-columns:1.08fr 1fr;
  column-gap:3.75rem;
  align-items:start;
}
#intro.conFoto .wrapper{grid-column:1;text-align:left;align-items:flex-start;display:flex;flex-direction:column}
#intro.conFoto .heroCarousel{grid-column:2;position:relative}
#intro.conFoto .heroCarousel__frame{aspect-ratio:285/335}
#intro.conFoto .wrapper h1{width:auto;display:block}
#intro.conFoto .wrapper h1 .logoApilado{display:block;width:7.2em;max-width:100%;height:auto}
#intro.conFoto .wrapper h2{margin-top:.55em}
#intro.conFoto .wrapper p{font-size:.42em;max-width:18em;line-height:1.35em;margin:.6em 0 1.3em;color:#495267}

/* Botones del hero: pills outline grandes, ambos con borde naranja.
   margin-top reserva el espacio que ocupaba el párrafo (ahora removido) para que
   los botones y aliados no suban. */
#intro.conFoto .wrapper ul{flex-wrap:nowrap;gap:.5em;margin-top:4em;margin-bottom:0}
#intro.conFoto .wrapper ul li a{white-space:nowrap;font-size:.42em;font-weight:600;padding:.75em 1.4em;border-radius:2em;border:1.5px solid #fe4d17;color:#1b2440;background:#fff;gap:.6em;align-items:center}
#intro.conFoto .wrapper ul li a:hover{background:#fe4d17;color:#fff;border-color:#fe4d17}
#intro.conFoto .wrapper ul li a:hover .flechaAbajo{background-color:#fff}
/* Chevron de "Ver Agenda": rojo (como el diseño), respeta el aspecto ancho del SVG (~2.4) */
#intro.conFoto .wrapper ul li a .flechaAbajo{-webkit-mask-image:url(intro/flecha_abajo.svg);mask-image:url(intro/flecha_abajo.svg);width:1em;height:.42em;background-color:#fe4d17;transition:transform .2s,background-color .2s;flex-shrink:0}
#intro.conFoto .wrapper ul li a:hover .flechaAbajo{transform:translateY(.12em)}
/* Flecha diagonal de "Colaboremos" (necesita height explícito, si no colapsa a 0) */
#intro.conFoto .wrapper ul li a .flecha{-webkit-mask-image:url(intro/flecha.svg);mask-image:url(intro/flecha.svg);width:.85em;height:.85em;background-color:#fe4d17;flex-shrink:0;transition:background-color .2s}

/* Mini aliados en el hero (fila debajo, fuera del wrapper de texto).
   Texto en UNA línea, chico; el círculo "+" más chico que los logos. */
#intro .heroAliados{display:flex;align-items:center;gap:.6em;flex-wrap:nowrap;font-family:Poppins,sans-serif;font-size:.3em;font-weight:500;color:#1b2440}
#intro .heroAliados>span{white-space:nowrap}
#intro .heroAliados__logos{display:flex;align-items:center}
#intro .heroAliados__logos img{width:44px;height:44px;border-radius:50%;border:2.5px solid #fff;object-fit:cover;margin-left:-11px;display:block}
#intro .heroAliados__logos img:first-child{margin-left:0}
#intro .heroAliados__mas{width:23px;height:23px;border-radius:50%;background:#ff4612;border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1;color:#fff;font-weight:700;margin-left:-8px;flex-shrink:0;align-self:center}

/* Separador CTA salmon — full width, entre hero y actividades */
.ctaSeparador{display:flex;align-items:center;justify-content:center;gap:.6em;width:100%;background:#ffc7b8;padding:1.55rem 1rem;color:#fe4d17;font-weight:600;font-size:1.5rem;text-decoration:none;font-family:Poppins,sans-serif;transition:background .2s;box-sizing:border-box}
.ctaSeparador:hover{background:#ffb0a0}
.ctaSeparador .flechaAbajo{-webkit-mask-image:url(intro/flecha_abajo.svg);mask-image:url(intro/flecha_abajo.svg);width:1.1em;height:.75em;background-color:#fe4d17;transition:transform .2s;flex-shrink:0}
.ctaSeparador:hover .flechaAbajo{transform:translateY(.15em)}

/* Responsive: ocultar carrusel en mobile */
@media screen and (max-width:900px){
  #intro.conFoto .pageWidth{grid-template-columns:1fr}
  #intro.conFoto .heroCarousel{display:none}
  #intro.conFoto .wrapper{text-align:center;align-items:center}
  #intro.conFoto .wrapper p{max-width:30em}
}

/* Carrusel hero */
.heroCarousel__frame{position:relative;width:100%}
.heroCarousel__track{position:relative;height:100%;border-radius:1.6em;overflow:hidden;box-shadow:0 30px 60px -30px rgba(4,16,45,.45);container-type:inline-size}
.heroCarousel__slide{display:none;position:relative;height:100%}
.heroCarousel__slide--active{display:block}
.heroCarousel__slide .fotoHero{width:100%;height:100%;display:block;object-fit:cover;border-radius:0}
/* Caption: posición/tamaño medidos del diseño (#11): padding izq 11% y margen
   inferior 11% de la foto; tipografía en cqw para escalar con el ancho de la foto */
.heroCarousel__caption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,0) 78%);padding:20% 8% 11% 11%;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:.2rem;font-family:Poppins,sans-serif}
.heroCarousel__titulo{color:#fff;font-size:4.4cqw;font-weight:600;line-height:1.2}
.heroCarousel__subtitulo{color:#fe4d17;font-size:3.7cqw;font-weight:600;line-height:1.2}
/* Dots: justo debajo de la foto, alineados a la izquierda (HTML: margin-top 14px,
   padding-left 18px, escalados; activo coral #ff8a66, inactivo gris #d9d9d9) */
.heroCarousel__dots{display:flex;gap:12px;justify-content:flex-start;margin-top:1.4rem;padding-left:1.9rem}
.heroCarousel__dot{width:13px;height:13px;border-radius:50%;border:none;background:#d9d9d9;cursor:pointer;padding:0;transition:background .2s}
.heroCarousel__dot--active{background:#ff8a66}
.heroCarousel__dot:hover{background:#c4c4c4}
.heroCarousel__dot--active:hover{background:#fe4d17}
/* Iso de marca anclado a la FOTO en porcentajes (robusto a cualquier ancho).
   Medido del diseño AI: dot a 72%/83% de la foto, mark ~61% del ancho.
   width/right en % del ancho de la foto; bottom en % del alto de la foto. */
.heroCarousel__iso{position:absolute;width:50%;right:-13%;bottom:-12%;height:auto;z-index:2;pointer-events:none}

#actividades .etiquetasYOrden .etiquetas li{cursor:pointer;transition:background-color .15s,color .15s}#actividades .etiquetasYOrden .etiquetas li.on{background-color:#fe4d17;color:#fff}#actividades .etiquetasYOrden .etiquetas li.on .icon{background-color:#fff}#actividades .etiquetasYOrden select{cursor:pointer}#acerca .ejes>li .tituloYControl{cursor:pointer}.fake-recaptcha{display:inline-flex;align-items:center;gap:10px;background:#f9f9f9;border:1px solid #d3d3d3;border-radius:3px;padding:10px 12px;font:14px Poppins,sans-serif;color:#000;margin-top:6px}.fake-recaptcha .box{width:24px;height:24px;border:2px solid #c1c1c1;border-radius:2px;background:#fff}.fake-recaptcha .rc{margin-left:18px;font-size:10px;color:#9aa0ad;text-align:center;line-height:1.2}

/* ============ DONACIONES ============
   Recrea el handoff "Fundación Finnegans — donación y alianzas".
   Acento ROJO propio de la sección (#ee1c1c, urgencia/donación) — distinto del
   naranja de Impacto. Dos tarjetas del mismo alto (grid stretch + flex column):
   A) Donación directa (QR + "copiar todos" + datos copiables);
   B) Colaboraciones (simulador de impacto + áreas de cooperación + por qué sumarse).
   Valores en px/rem según el handoff (alta fidelidad). */
#donaciones{
  --red:#ee1c1c;--red-hover:#d21414;--navy:#04102d;--peach-soft:#fff5f1;
  --tbody:#2a3354;--tmuted:#6b7490;--tsubtle:#9aa1b4;--bsub:#e2e5ee;
  background:#fdd7ce;padding:clamp(28px,5vw,56px) 20px;font-family:Poppins,system-ui,sans-serif;color:var(--tbody)
}
#donaciones .donaciones__grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
#donaciones .donaciones__card{background:#fff;border-radius:28px;padding:36px 32px;min-width:0;display:flex;flex-direction:column;height:100%;box-sizing:border-box;box-shadow:0 20px 50px rgba(4,16,45,.08)}
#donaciones .donaciones__eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
#donaciones .donaciones__card h2{margin:0 0 14px;font-family:Poppins,sans-serif;font-weight:700;font-size:30px;line-height:1.15;letter-spacing:-.01em;color:var(--navy)}
#donaciones .donaciones__lead{margin:0 0 24px;font-size:16px;line-height:1.6;color:var(--tbody);min-height:104px}
#donaciones .donaciones__lead--narrow{max-width:460px}

/* Botón pill rojo (RedBtn del handoff) */
#donaciones .donaciones__redbtn{display:inline-flex;align-items:center;gap:10px;cursor:pointer;border:0;font-family:Poppins,sans-serif;font-weight:700;font-size:15.5px;line-height:1;white-space:nowrap;padding:15px 26px;border-radius:999px;color:#fff;background:var(--red);text-decoration:none;transition:background .16s,transform .16s}
#donaciones .donaciones__redbtn:hover{background:var(--red-hover);transform:translateY(-1px)}
#donaciones .donaciones__redbtn svg{width:18px;height:18px;flex-shrink:0}

/* Columna A — QR + datos copiables */
#donaciones .donaciones__aBody{margin-top:28px;padding-top:28px;border-top:1px solid var(--bsub)}
#donaciones .donaciones__qrWrap{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:24px}
#donaciones .donaciones__qr{width:200px;max-width:100%;aspect-ratio:1;border-radius:20px;background:var(--peach-soft);border:1px solid #ffe0d3;display:grid;place-items:center;padding:14px;box-sizing:border-box}
#donaciones .donaciones__qr img{width:100%;height:100%;object-fit:contain;display:block}
#donaciones .donaciones__qrLink{display:inline-flex;align-items:center;gap:5px;font-family:Poppins,sans-serif;font-size:13px;font-weight:700;color:var(--red);text-decoration:none;background:none;border:0;cursor:pointer}
#donaciones .donaciones__qrLink:hover{text-decoration:underline}
#donaciones .donaciones__qrLink svg{width:13px;height:13px}
#donaciones .donaciones__rows{display:grid;gap:10px}
#donaciones .donaciones__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:14px;background:var(--peach-soft);border:1px solid #ffe4da}
#donaciones .donaciones__rowText{min-width:0}
#donaciones .donaciones__rowLabel{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#b96a56}
#donaciones .donaciones__rowValue{font-size:16px;font-weight:700;color:var(--navy);margin-top:3px;word-break:break-word}
#donaciones .donaciones__rowCopy{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:1.5px solid #f4b7a4;background:#fff;color:var(--red);display:grid;place-items:center;cursor:pointer;transition:all .15s}
#donaciones .donaciones__rowCopy:hover{background:var(--red);color:#fff;border-color:var(--red)}
#donaciones .donaciones__rowCopy.is-copied{border-color:#2fae6e;color:#2fae6e}
#donaciones .donaciones__rowCopy.is-copied:hover{background:#fff;color:#2fae6e;border-color:#2fae6e}
#donaciones .donaciones__rowCopy svg{width:16px;height:16px}

/* Columna B — simulador de impacto */
#donaciones .donaciones__simBox{margin-bottom:24px}
#donaciones .donaciones__sim{border-radius:18px;border:1.5px solid #ffe0d3;background:#fff;padding:18px;min-width:0}
#donaciones .donaciones__simHead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
#donaciones .donaciones__simTitle{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--red)}
#donaciones .donaciones__simTitle svg{width:15px;height:15px}
#donaciones .donaciones__simBadge{font-size:12px;font-weight:700;color:#c2185b;background:#ffe1ee;padding:5px 11px;border-radius:999px;white-space:nowrap}
#donaciones .donaciones__simChips{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}
#donaciones .donaciones__chip{border:1.5px solid var(--bsub);border-radius:12px;background:#fff;color:var(--navy);font-family:Poppins,sans-serif;font-weight:700;font-size:14.5px;padding:9px 6px;cursor:pointer;transition:all .15s;min-width:0}
#donaciones .donaciones__chip:hover{border-color:#f4b7a4}
#donaciones .donaciones__chip.is-active{border-color:var(--red);background:#fff2ee;color:var(--red)}
#donaciones .donaciones__simInputWrap{display:flex;align-items:center;gap:8px;border:1.5px solid var(--bsub);border-radius:12px;padding:11px 14px;margin-bottom:14px}
#donaciones .donaciones__simInputWrap>span{font-weight:700;color:#b96a56}
#donaciones .donaciones__simInput{flex:1;min-width:0;border:0;outline:none;background:transparent;font-family:Poppins,sans-serif;font-weight:700;font-size:16px;color:var(--navy);-moz-appearance:textfield}
#donaciones .donaciones__simInput::-webkit-outer-spin-button,#donaciones .donaciones__simInput::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#donaciones .donaciones__simCopy{margin:0;font-size:13.5px;line-height:1.55;color:var(--tmuted)}

/* Columna B — áreas de cooperación + por qué sumarse */
#donaciones .donaciones__coopTitle{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tsubtle);margin-bottom:12px}
#donaciones .donaciones__coop{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
#donaciones .donaciones__coopCard{padding:16px;border-radius:16px;background:var(--peach-soft);border:1px solid #ffe4da;min-width:0}
#donaciones .donaciones__coopIcon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#ffe1ee;margin-bottom:12px}
#donaciones .donaciones__coopCard h4{font-size:15.5px;font-weight:700;color:var(--navy);line-height:1.25;margin:0 0 4px}
#donaciones .donaciones__coopCard p{font-size:13px;line-height:1.5;color:var(--tmuted);margin:0}
#donaciones .donaciones__why{display:flex;gap:14px;padding:20px;border-radius:18px;background:var(--peach-soft);border:1px solid #ffe4da;margin-top:auto}
#donaciones .donaciones__whyIcon{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:#fff;border:1.5px solid #ffe0d3;display:grid;place-items:center;color:var(--red)}
#donaciones .donaciones__whyIcon svg{width:18px;height:18px}
#donaciones .donaciones__why h4{font-size:15.5px;font-weight:700;color:var(--navy);margin:0 0 4px}
#donaciones .donaciones__why p{margin:0;font-size:13.5px;line-height:1.55;color:var(--tmuted)}

/* Modal "Ver QR gigante" */
#donaciones .donaciones__modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:rgba(4,16,45,.72)}
#donaciones .donaciones__modalBox{position:relative;background:#fff;border-radius:20px;padding:24px;width:min(90vw,340px);text-align:center;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
#donaciones .donaciones__modalBox img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid #ffe0d3}
#donaciones .donaciones__modalBox p{font-size:14px;font-weight:700;color:var(--navy);margin:14px 0 0}
#donaciones .donaciones__modalClose{position:absolute;top:10px;right:10px;width:32px;height:32px;border:none;border-radius:50%;background:#f2f2f4;color:var(--navy);font-size:20px;line-height:1;cursor:pointer;transition:background .2s}
#donaciones .donaciones__modalClose:hover{background:var(--red);color:#fff}

@media (max-width:880px){
  #donaciones .donaciones__grid{grid-template-columns:1fr}
  #donaciones .donaciones__lead{min-height:0}
  #donaciones .donaciones__lead--narrow{max-width:none}
}
@media (max-width:560px){
  #donaciones .donaciones__card{padding:28px 22px}
  #donaciones .donaciones__simChips{grid-template-columns:1fr}
  #donaciones .donaciones__coop{grid-template-columns:1fr}
}