.pageWidth{width:100%;box-sizing:border-box;max-width:1100px;margin:0 auto;position:relative;z-index:1} /* El contenido de la página arranca donde el LOGO de la toolbar (no donde el borde de la barra). La toolbar es `header .desktopMenu`: width 20.8em con padding lateral 0.58em, sobre font-size clamp(1rem,4.6vw,3.85rem). Restando los dos paddings quedan 19.64em, así el contenido calza con la caja interna de la barra —a la izquierda con el logo y a la derecha con el botón de login— en cualquier ancho de pantalla. Acotado a `main` a propósito: el footer es común a todo el sitio y conserva su ancho de siempre. */ main .pageWidth{max-width:calc(19.64 * clamp(1rem, 4.6vw, 3.85rem))} /* Hueco de la bajada del hero: el texto se quitó, pero su espacio se conserva para que lo de abajo no suba. El alto es el que tenía la frase: cantidad de líneas x el interlineado (1.35), expresado en `em` del propio párrafo para que acompañe al font-size responsive. Ocupaba 3 líneas, salvo entre 651 y 900px donde entraba en 2 (medido). Las márgenes las hereda de la regla de `#intro .wrapper p`. */ #intro .wrapper p.huecoBajada{height:4.05em} @media screen and (min-width:651px) and (max-width:900px){#intro .wrapper p.huecoBajada{height:2.7em}}@media screen and (max-width:1120px){.pageWidth{max-width:100%;padding:0 10px}}#intro{padding-top:calc(1.65em + 96px)!important;background:#ffebe5} /* Fondo de la landing. El salmón queda SOLO en el hero (que tiene el suyo propio, arriba) y en la banda del separador; de "Conocé nuestras actividades" para abajo el fondo es BLANCO (pedido del 2026-08-28). Por eso `main` se pinta de blanco y no de #ffebe5: las secciones de contenido (actividades, acerca, alianzas) son transparentes y caen a este color. Las bandas con color propio (separador, Aportá, contacto, seguinos) lo siguen tapando, como antes. */ main{background:#fff} /* 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. */ /* La caja del isotipo asoma bastante a la derecha de la foto (el SVG tiene aire): con clip evitamos que genere scroll horizontal en viewports ~1120px. */ #intro.conFoto{overflow-x:clip} #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:495/540} /* Logo apilado (el isotipo no va arriba: va sobre la foto). Ancho medido del diseño: 385/1080 del ancho de contenido ≈ 8em. */ #intro.conFoto .wrapper h1{width:100%;display:block} /* OJO: acá 1em NO es el em del hero (el h1 tiene su propio font-size), por eso el ancho va en % de la columna: 385/540 del diseño ≈ 71%. */ #intro.conFoto .wrapper h1 .logoApilado{display:block;width:71%;max-width:100%;height:auto} /* Cortes de línea del diseño: el h2 rompe entre la parte liviana y la negrita (por eso el en bloque, más robusto que ajustar el ancho), y el párrafo en 3 líneas ("…que / articula … comunidad / para …"), eso sí por ancho de caja. */ #intro.conFoto .wrapper h2{margin-top:.5em;font-size:.69em;line-height:1.25em} #intro.conFoto .wrapper h2 b{display:block} #intro.conFoto .wrapper p{font-size:.47em;max-width:21em;line-height:1.35em;margin:.55em 0 1.15em;color:#495267} /* Botones del hero: pills outline, ambos con borde naranja (también "Colaboremos", que fuera del hero con foto va en salmón lleno). Forma de CTA del sitio: border-radius 2em, font-weight 500, padding .4em 1em, gap .6em. */ #intro.conFoto .wrapper ul{flex-wrap:nowrap;gap:.25em;margin:0} #intro.conFoto .wrapper ul li a{white-space:nowrap;font-size:.45em;font-weight:500;padding:.4em 1em;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} /* Separación botones → aliados del diseño (~65px): .5em de gap del wrapper (24px) + esto. En rem porque el em de .heroAliados es chico (font-size .3em). */ #intro.conFoto .heroAliados{margin-top:2.55rem;font-size:.345em;gap:.85em} /* Círculos del diseño: 46px y apenas superpuestos (no encimados como antes). */ #intro.conFoto .heroAliados__logos img{width:46px;height:46px;margin-left:-5px} #intro.conFoto .heroAliados__mas{width:24px;height:24px;font-size:12px;margin-left:-6px} /* 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:500;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 y volver al hero de una columna */ @media screen and (max-width:900px){ #intro.conFoto .pageWidth{display:block} #intro.conFoto .heroCarousel{display:none} #intro.conFoto .wrapper{text-align:center;align-items:center} #intro.conFoto .wrapper h1 .logoApilado{width:7.2em;margin:0 auto} #intro.conFoto .wrapper h2{max-width:none} #intro.conFoto .wrapper p{font-size:.45em;max-width:30em} #intro.conFoto .wrapper ul{justify-content:center} #intro.conFoto .heroAliados{justify-content:center;margin-top:1rem} } /* Debajo de 650px manda el diseño mobile del sitio (izquierda, max-width 400px): los overrides de arriba tienen más especificidad, así que los revertimos acá. */ @media screen and (max-width:650px){ #intro.conFoto .wrapper{text-align:left;align-items:flex-start} #intro.conFoto .wrapper h1 .logoApilado{margin:0;width:3.4em} #intro.conFoto .wrapper p{font-size:.38em} /* El iso decorativo del párrafo (absoluto, sólo mobile) se montaba encima de los botones y de la fila de aliados: con foto ese lugar ya está ocupado. */ #intro.conFoto .wrapper p .iso{display:none} #intro.conFoto .wrapper ul{flex-wrap:wrap;justify-content:flex-start} /* Aliados: los 6 círculos + el texto no entran en una línea a 390px y se pisaban (nowrap). Círculos más chicos y, si no entra, el texto baja. */ #intro.conFoto .heroAliados{justify-content:flex-start;flex-wrap:wrap;gap:.5em .85em} #intro.conFoto .heroAliados__logos img{width:34px;height:34px;margin-left:-6px} #intro.conFoto .heroAliados__mas{width:19px;height:19px;font-size:10px;margin-left:-5px} } /* Carrusel hero */ .heroCarousel__frame{position:relative;width:100%} .heroCarousel__track{position:relative;height:100%;border-radius:.85em;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% 9%;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:4.4cqw;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;flex-wrap:wrap;gap:12px;justify-content:flex-start;margin-top:2.5rem;padding-left:.6rem} .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). Con el viewBox del SVG recortado al trazo, la caja ES la figura: mide 48.5% del ancho de la foto. Posición ajustada a mano por el diseñador: asoma 6% a la derecha y 14% abajo. */ .heroCarousel__iso{position:absolute;width:48.5%;right:-6%;bottom:-14%;height:auto;z-index:2;pointer-events:none} /* Debajo de ~1180px el contenido ya toca los bordes de la ventana y el 6% que asoma el iso lo recortaría el overflow-x:clip del hero: lo acercamos. */ @media screen and (max-width:1180px){ .heroCarousel__iso{right:-2%} } #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:500;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} } /* #contact: layout y tipografía de develop (test). El section.css todavía tiene la versión vieja con formulario (grid + p{.95em/lh 1em/max-width:10em}); acá lo pisamos por la versión nueva: heading+logo a la izquierda (flex:1) y botón "Contactate" abajo a la derecha (align-items:flex-end), sin flecha. */ #contact .pageWidth{display:flex;gap:1.5em;align-items:flex-end} #contact .wrapper{flex:1} /* develop usa .7em, pero con Poppins real (~12% más ancha que la fuente con la que rinde test) la línea 1 no entra y "colectiva" cae a la 2da línea. Bajamos a .62em: el bloque ocupa el mismo ancho que test y corta después de "colectiva". */ #contact .wrapper p{font-size:.62em;line-height:1.2em;max-width:none} @media screen and (max-width:650px){ #contact .pageWidth{flex-direction:column;align-items:flex-start;max-width:400px;gap:1em} } #contact .cta{ display:inline-block; padding:.4em 1em; color:#fff; box-sizing:border-box; font-size:.42em; font-weight:500; border-radius:2em; background-color:#fe4d17; border:none; text-decoration:none; transition:all .2s; } #contact .cta:hover{background-color:#931505;color:#fff} /* Pastilla (etiqueta) de las tarjetas de actividades: NO truncar. Mostramos el texto completo, envolviendo a 2 líneas si es largo. (Con la Poppins real — auto-hospedada— el texto es más ancho que en el sitio viejo, que caía a un fallback más angosto, por eso ahí entraba en una línea.) */ #actividades .agenda li .data .etiqueta{ white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; } /* Un punto más chico el TÍTULO y la ETIQUETA de las tarjetas, solo en desktop (grilla de 4 columnas, donde las tarjetas son más angostas), para que con la Poppins real entren como en el sitio viejo. Debajo de 950px no se toca. */ @media screen and (min-width: 951px){ #actividades .agenda li .data h3{font-size:1.44em} #actividades .agenda li .data .etiqueta{font-size:.80em} } /* Ejes ("Acerca de"): la Poppins real tiene un line-height "normal" más alto que el fallback del sitio viejo, lo que agrandaba la caja del acordeón (164 vs 149). Fijamos el interlineado del título del eje para que la caja mida igual. */ #acerca .ejes>li .tituloYControl h3{line-height:1.13} /* Y la Poppins real es ~7% más ancha que el fallback, así que los títulos de los ejes "llegaban" más lejos. Bajamos un toque el font-size (.9em → .835em) solo en desktop/tablet para que midan como en el sitio viejo. El override mobile (1.3em @max-width:650px) queda intacto. */ @media screen and (min-width: 651px){ #acerca .ejes>li .tituloYControl h3{font-size:.835em} /* Botones del menú del hero: la Poppins real los hace ~9% más anchos que test. Bajamos el font-size para que midan igual. (Mobile @max-width:650px intacto.) */ #intro .wrapper ul li a{font-size:.437em} } /* --- Popup de detalle del evento (botón "+" de la agenda) ------------------ El CSS del modal viene del entregable (está en section.css, .modal …). Acá van solo los remiendos que el entregable no traía. */ /* El "+" de la tarjeta ahora abre el popup, así que es un