@font-face{font-family:'Love Ya Like A Sister';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fuentes/love-ya-like-a-sister-400.woff2) format('woff2')} @font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fuentes/open-sans-400.woff2) format('woff2')} @font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fuentes/open-sans-600.woff2) format('woff2')} @font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fuentes/open-sans-700.woff2) format('woff2')} /* Estilos propios de AG Children, por encima del CSS de Webflow. Sustituyen lo que antes hacía webflow.js (menú, desplegables, slider, pestañas e interacciones) y dan estilo a lo nuevo (legales, aviso del formulario, 404). Sistema de movimiento: el movimiento acompaña la lectura y confirma cada acción, nunca la protagoniza. Solo se animan transform, opacity y clip-path (y color, borde y sombra en hovers cortos). Todo estado oculto vive bajo html.js: sin JS, la página se ve completa. */ /* ---------- Tokens ---------- */ :root { --mov-xs: 120ms; /* pulsado, foco */ --mov-s: 200ms; /* hover de color, desplegables, avisos */ --mov-m: 320ms; /* paneles, pestañas, botón flotante, menú */ --mov-l: 700ms; /* entradas al hacer scroll */ --mov-xl: 1100ms; /* revelado de imagen */ --mov-paso: 90ms; /* escalonado entre hermanos (tope de 5 pasos) */ --ease-sal: cubic-bezier(.22, .61, .36, 1); --ease-suave: cubic-bezier(.16, 1, .3, 1); --ease-entra: cubic-bezier(.4, 0, 1, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); --mov-dist: 24px; --naranja-texto: #B84A1C; /* texto naranja pequeño sobre blanco o #f9f9f9 */ --texto-sobre-naranja: #132A4D; /* texto sobre fondos naranjas */ --borde-campo: #858FA0; /* 3:1 sobre #f9f9f9 */ --sombra-1: 0 6px 16px rgba(28, 53, 94, .14); --sombra-2: 0 12px 28px rgba(28, 53, 94, .12); --sombra-pop: 0 12px 32px rgba(12, 22, 40, .28); --error: #B54A3A; --error-fondo: #FDECE6; --gris-texto: #5f6570; } /* Red frente a desbordes laterales de animaciones */ html, body { overflow-x: clip; } html { scroll-padding-bottom: 84px; } /* ---------- Imágenes ---------- Llevan width y height para reservar su hueco mientras cargan. Sin esto, las que no tienen altura en el CSS de Webflow se estirarían a su tamaño real. Las clases que fijan una altura siguen mandando: tienen más especificidad que el selector de etiqueta. */ img { height: auto; } /* ---------- Tipografía ---------- */ h1, h2, h3, .section-title, .donation-section-title, .breadcrumb-title { text-wrap: balance; } p, li { text-wrap: pretty; } /* Antes eran h4 (salto de nivel): mismo tamaño e interlineado que el h4 de Webflow */ h3.how-it-works-card-title, h3.team-member-name { font-size: 24px; line-height: 1.3; } @media (max-width: 991px) { h3.how-it-works-card-title, h3.team-member-name { font-size: 22px; } } @media (max-width: 767px) { h3.how-it-works-card-title, h3.team-member-name { font-size: 20px; } } /* En móvil, antetítulo y título alineados a la izquierda donde el título ya lo estaba */ @media (max-width: 991px) { :is(.service-section-home-two, .testimonial-section) .section-title-block { align-items: flex-start; text-align: left; } :is(.service-section-home-two, .testimonial-section) .section-subtitle-block { justify-content: flex-start; } } /* Antetítulos: un solo naranja, el de la marca (el #FF7400 de la plantilla no lo es) */ .section-subtitle-block { color: var(--color--secondary-color); } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------- Saltar al contenido ---------- */ .saltar { position: absolute; left: 16px; top: -64px; z-index: 2000; background: #fff; color: var(--color--primary-color); padding: 12px 18px; border-radius: 8px; font-weight: 700; text-decoration: none; box-shadow: var(--sombra-pop); transition: top var(--mov-s) var(--ease-sal); } .saltar:focus { top: 16px; } .main-wrapper:focus { outline: none; } /* ---------- Foco: un único anillo, legible sobre foto, azul y blanco ---------- */ :where(a, button, input, textarea, select, summary, [role=button], [role=tab], [tabindex]):focus-visible, .w-dropdown-toggle:focus-visible, .w-slider-arrow-left:focus-visible, .w-slider-arrow-right:focus-visible, .w-nav-button:focus-visible, .w-tab-link:focus-visible, .w-input:focus-visible { outline: 3px solid var(--color--secondary-color) !important; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(255, 255, 255, .55); } @media (prefers-reduced-motion: no-preference) { :focus-visible { transition: outline-offset var(--mov-xs) var(--ease-sal); } } .home-one-hero-slider-arrow:focus-visible { outline-color: #fff !important; } /* Destinos de foco que no son controles (avisos, contenido principal): sin anillo */ :is(.w-form-done, .w-form-fail, .main-wrapper)[tabindex="-1"]:focus-visible { outline: none !important; box-shadow: none; } /* ---------- Entradas al hacer scroll (P1 a P4) ---------- El estado final es el del CSS de siempre; el oculto solo existe bajo html.js y hasta que ag.js marca .visto. Cuando la entrada termina (.mov-fin), cada elemento recupera sus propias transiciones (hover de botones, etc.). */ [data-mov-i="1"] { --i: 1; } [data-mov-i="2"] { --i: 2; } [data-mov-i="3"] { --i: 3; } [data-mov-i="4"] { --i: 4; } [data-mov-i="5"] { --i: 5; } html.js [data-mov]:not(.mov-fin) { transition: opacity calc(var(--mov-l) * .6) var(--ease-sal), transform var(--mov-l) var(--ease-suave); transition-delay: calc(var(--i, 0) * var(--mov-paso)); } html.js [data-mov=funde]:not(.mov-fin) { transition-duration: calc(var(--mov-l) * .7); } html.js [data-mov]:not(.visto) { opacity: 0; } html.js [data-mov=sube]:not(.visto) { transform: translate3d(0, var(--mov-dist), 0); } html.js [data-mov=mascara]:not(.visto) { opacity: 1; transform: translate3d(0, 100%, 0); } html.js [data-mov=mascara]:not(.mov-fin) { transition: transform var(--mov-l) var(--ease-suave) calc(var(--i, 0) * var(--mov-paso)); } /* Revelado de imagen: la foto se descubre de abajo arriba y se asienta */ html.js [data-mov=imagen] { clip-path: inset(0 0 0 0 round 6px); } html.js [data-mov=imagen]:not(.visto) { opacity: 1; clip-path: inset(12% 0 0 0 round 6px); } html.js [data-mov=imagen]:not(.mov-fin) { transition: clip-path var(--mov-xl) var(--ease-suave) calc(var(--i, 0) * var(--mov-paso)); } /* Los discos de Cómo ayudar son círculos en todo momento: crecen desde el centro */ html.js .how-it-works-image-block[data-mov=imagen] { clip-path: circle(50% at 50% 50%); } html.js .how-it-works-image-block[data-mov=imagen]:not(.visto) { clip-path: circle(36% at 50% 50%); } /* El velo de la foto grande de Sobre nosotros se recorta con ella (si no, la parte aún oculta se ve como una banda gris) */ html.js [data-mov=imagen] + .home-one-about-overlay { clip-path: inset(0 0 0 0 round 6px); } html.js [data-mov=imagen]:not(.visto) + .home-one-about-overlay { clip-path: inset(12% 0 0 0 round 6px); } html.js [data-mov=imagen]:not(.mov-fin) + .home-one-about-overlay { transition: clip-path var(--mov-xl) var(--ease-suave); } html.js [data-mov=imagen] img { transition: transform var(--mov-xl) var(--ease-suave) calc(var(--i, 0) * var(--mov-paso)); } html.js [data-mov=imagen]:not(.visto) img { transform: scale(1.08); } html.js [data-mov=imagen].mov-fin img { transition: transform 600ms var(--ease-suave); } /* ---------- Menú móvil (antes lo montaba webflow.js en un .w-nav-overlay) ---------- */ .w-icon-nav-menu::before { content: none !important; } @media (max-width: 991px) { .w-icon-nav-menu { display: grid; align-content: center; gap: 5px; width: 22px; height: 24px; } .barra { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform 240ms var(--ease-io), opacity var(--mov-s) var(--ease-sal); } .w-nav-button.w--open .barra:nth-child(1) { transform: translateY(7px) rotate(45deg); } .w-nav-button.w--open .barra:nth-child(2) { transform: scaleX(0); opacity: 0; } .w-nav-button.w--open .barra:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .w-nav-menu[data-nav-menu-open] { display: block !important; position: fixed !important; top: 0 !important; bottom: 0; left: 0 !important; right: auto !important; width: 290px; max-width: 85vw; min-width: 0; overflow-y: auto; text-align: left; background-color: var(--color--primary-color) !important; z-index: 1000; animation: menu-entra 320ms var(--ease-suave) both; } .w-nav-menu[data-nav-menu-open]:not(.cerrando) :is(.nav-menu-link, .w-dropdown, .nav-list-button .primary-button) { animation: enlace-entra 320ms var(--ease-sal) both; animation-delay: calc(120ms + var(--i, 0) * 40ms); } .w-nav-menu[data-nav-menu-open] .nav-menu-link { display: block; padding: 12px 0; min-height: 48px; } .w-nav-menu[data-nav-menu-open].cerrando { animation: menu-sale 220ms var(--ease-entra) both; } .velo-menu { position: fixed; inset: 0; z-index: 999; background: rgba(12, 22, 40, .45); animation: velo-entra 240ms var(--ease-sal) both; } .velo-menu.cerrando { animation: velo-sale 220ms var(--ease-entra) both; } html.menu-abierto { overflow: hidden; } } /* Enlace activo: además del color, subrayado (se lee sobre foto y sin ver el color) */ .nav-menu-link.w--current { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } @keyframes menu-entra { from { transform: translateX(-100%); } to { transform: none; } } @keyframes menu-sale { to { transform: translateX(-100%); } } @keyframes velo-entra { from { opacity: 0; } to { opacity: 1; } } @keyframes velo-sale { to { opacity: 0; } } @keyframes enlace-entra { from { opacity: 0; transform: translateX(-12px); } } /* ---------- Desplegable de idioma ---------- */ .w-dropdown-toggle { cursor: pointer; } .w-dropdown-list.w--open { display: block; } .nav-dropdown-icon4 { transition: transform var(--mov-s) var(--ease-io); } .w-dropdown-toggle.w--open .nav-dropdown-icon4 { transform: rotate(180deg); } .nav-dropdown-list { box-shadow: var(--sombra-pop); } .nav-dropdown-link-block { text-transform: none; border-radius: 6px; transition: background-color var(--mov-s) var(--ease-sal), color var(--mov-s) var(--ease-sal); } .nav-dropdown-link-block.actual { cursor: default; } .nav-dropdown-shape { transform: scaleX(0); transform-origin: left center; transition: transform var(--mov-s) var(--ease-sal); } .nav-dropdown-link-block:hover .nav-dropdown-shape, .nav-dropdown-link-block:focus-visible .nav-dropdown-shape, .nav-dropdown-link-block.actual .nav-dropdown-shape { transform: none; } .nav-dropdown-link-text { transition: transform var(--mov-s) var(--ease-sal); } a.nav-dropdown-link-block:hover .nav-dropdown-link-text { transform: translateX(4px); } .nav-dropdown-link-block.actual:hover { color: var(--color--wihte); } @media (min-width: 992px) { /* Centrado con los enlaces del menú (quedaba 4 px más alto) */ .nav-button-block .nav-dropdown-toggle-4 { position: relative; top: 4px; } .w-dropdown-list { display: block; visibility: hidden; opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; transition: opacity 150ms var(--ease-entra), transform 150ms var(--ease-entra), visibility 0s linear 150ms; } .w-dropdown-list.w--open { visibility: visible; opacity: 1; transform: none; transition: opacity var(--mov-s) var(--ease-sal), transform var(--mov-s) var(--ease-sal), visibility 0s; } .nav-button-block .nav-dropdown-list { min-width: 180px !important; width: auto; padding: 8px; } /* Cerrada, la lista sigue visible mientras se desvanece: misma posición que abierta (en Webflow, cerrada estaba en left:-300px y solo .w--open la devolvía a su sitio) */ .nav-button-block .nav-dropdown-list.mega-menu { left: auto; } .nav-dropdown-link-block { padding: 9px 12px; } .nav-dropdown-link-block:hover { background: rgba(255, 255, 255, .08); } } /* ---------- Slider de la home ---------- */ .w-slider .w-slide { transition: opacity 900ms var(--ease-io), visibility 0s linear 900ms; opacity: 0; visibility: hidden; } .w-slider .w-slide.activo { opacity: 1; visibility: visible; transition: opacity 900ms var(--ease-io), visibility 0s; } .w-slider:not(.listo) .w-slide:first-child { opacity: 1; visibility: visible; } .w-slider-arrow-left, .w-slider-arrow-right { cursor: pointer; border: 0; padding: 0; font: inherit; } .w-slider-dot { cursor: pointer; } .home-one-hero-bg-image.diferida { background-image: none !important; } /* Todas las diapositivas miden lo que la más alta: la foto de una diapositiva con menos texto ya no deja una franja azul debajo */ .home-one-hero-slider-mask { display: flex; } .home-one-hero-slider-mask > .w-slide { flex: 0 0 100%; height: auto; } /* El texto entra al cambiar de diapositiva (no en la primera carga: es la LCP) */ .w-slider.listo .w-slide :is(.hero-subtitle, .hero-title, .hero-except, .primary-button) { --i: 0; } .w-slider.listo .w-slide .hero-title { --i: 1; } .w-slider.listo .w-slide .hero-except { --i: 2; } .w-slider.listo .w-slide .primary-button { --i: 3; } .w-slider.listo .w-slide:not(.activo) :is(.hero-subtitle, .hero-title, .hero-except, .primary-button) { opacity: 0; transform: translate3d(0, var(--mov-dist), 0); transition: opacity var(--mov-s) var(--ease-entra), transform var(--mov-s) var(--ease-entra); } .w-slider.listo .w-slide.activo :is(.hero-subtitle, .hero-title, .hero-except, .primary-button) { opacity: 1; transform: none; transition: opacity 600ms var(--ease-sal) calc(var(--i) * var(--mov-paso) + 200ms), transform 600ms var(--ease-suave) calc(var(--i) * var(--mov-paso) + 200ms), background-color var(--mov-s) var(--ease-sal), color var(--mov-s) var(--ease-sal), box-shadow var(--mov-s) var(--ease-sal); } .w-slider.listo .w-slide.activo .primary-button:active { transform: translateY(1px) scale(.98); transition-duration: var(--mov-xs); transition-delay: 0s; } /* Fondo: se asienta despacio mientras la diapositiva está activa */ html.js .w-slide .home-one-hero-bg-image { transform: scale(1.05); transition: transform 7.5s linear; } html.js .w-slide.activo .home-one-hero-bg-image { transform: none; } /* Pausa con anillo de progreso */ .slider-pausa { position: absolute; z-index: 16; bottom: 18px; right: 200px; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; background: rgba(12, 22, 40, .35); color: #fff; transition: background-color var(--mov-s) var(--ease-sal), transform var(--mov-xs) var(--ease-sal); } .slider-pausa:hover { background: rgba(12, 22, 40, .6); } .slider-pausa > * { grid-area: 1 / 1; } .slider-pausa .anillo { width: 44px; height: 44px; transform: rotate(-90deg); } .slider-pausa .anillo circle { fill: none; stroke-width: 2; } .slider-pausa .anillo-fondo { stroke: rgba(255, 255, 255, .3); } .slider-pausa .anillo-progreso { stroke: #fff; stroke-dasharray: 120; stroke-dashoffset: 120; } .w-slider.corriendo .slider-pausa .anillo-progreso { animation: anillo var(--autoplay, 7000ms) linear forwards; } .w-slider.pausado .slider-pausa .anillo-progreso { animation-play-state: paused; } .slider-pausa .i-play { display: none; } .slider-pausa[aria-pressed="true"] .i-play { display: block; } .slider-pausa[aria-pressed="true"] .i-pausa { display: none; } /* Controles que solo existen con ag.js funcionando (mov-listo lo pone ag.js) */ html:not(.mov-listo) .slider-pausa, .w-slider.sin-auto .slider-pausa { display: none; } @keyframes anillo { to { stroke-dashoffset: 0; } } @media (min-width: 1920px) { .slider-pausa { right: 270px; } } @media (max-width: 991px) { .slider-pausa { right: 145px; bottom: 8px; } } @media (max-width: 767px) { .slider-pausa { right: 125px; bottom: 3px; } } .home-one-hero-slider-arrow .link-icon { transition: transform var(--mov-s) var(--ease-sal); } /* ---------- Compromisos de la home: tarjeta activa e imagen (solo escritorio) ---------- */ /* El espacio entre tarjetas no depende de cuál está activa: en Webflow la activa perdía su padding-top y la lista saltaba 30 px (y al activar con hover, la tarjeta se iba de debajo del ratón) */ .service-list-card-wrapper.active { padding-top: 30px; } .service-list-item:first-child .service-list-card-wrapper { padding-top: 0; } @media (max-width: 991px) { .service-list-card-wrapper.active { padding-top: 20px; } } @media (max-width: 767px) { .service-list-card-wrapper.active { padding-top: 0; } } @media (min-width: 992px) { .service-list-card-wrapper { cursor: pointer; } /* El fondo se rellena de izquierda a derecha (antes se animaba el width) */ .service-list-card-bg { width: 100% !important; z-index: 0; clip-path: inset(0 100% 0 0 round 6px); transition: clip-path 500ms var(--ease-suave); } .service-list-card-inner { position: relative; z-index: 1; } .service-list-card-bg.active { clip-path: inset(0 0 0 0 round 6px); } .service-list-card-title { position: relative; z-index: 2; transition: color var(--mov-s) var(--ease-sal) 80ms; } .service-list-card-title.active { color: #fff; } .service-list-card-title.inactive { color: var(--color--primary-color); } .service-list-image-wrapper { transition: opacity 400ms var(--ease-sal), transform 400ms var(--ease-suave); } .service-list-image-wrapper.active { opacity: 1; transform: none; z-index: 2; } .service-list-image-wrapper.inactive { opacity: 0; transform: scale(.96); pointer-events: none; } } /* En móvil la foto se ve limpia; al tocarla aparece su texto sobre un degradado de marca (en Webflow, el velo verde opaco solo aparecía al tocar: su estado inicial era opacidad 0) */ @media (max-width: 767px) { .service-list-image-block { cursor: pointer; -webkit-tap-highlight-color: transparent; } .service-thumbnail-overlay { background-image: linear-gradient(180deg, rgba(28, 53, 94, 0) 25%, rgba(28, 53, 94, .92) 85%) !important; opacity: 0; transition: opacity var(--mov-m) var(--ease-sal); } .service-thumbnail-overlay .service-short-details { transform: translateY(8px); transition: transform var(--mov-m) var(--ease-suave); } .service-list-image-block[aria-pressed=true] .service-thumbnail-overlay { opacity: 1; } .service-list-image-block[aria-pressed=true] .service-short-details { transform: none; } } /* ---------- ¿Por qué nosotros? (/donar): las tarjetas suben en bucle ---------- Como la interacción de Webflow (30 s por vuelta). La lista va duplicada (la copia, con aria-hidden) y las dos suben a la vez su propia altura más el hueco: el bucle no salta. Se detiene con el ratón encima, con foco o al tocarla. */ .why-us-marquee .why-us-content-block.copia { display: none; } @media (prefers-reduced-motion: no-preference) { .why-us-marquee .why-us-content-block.copia { display: flex; } .why-us-marquee .why-us-content-block { animation: marquesina 30s linear infinite; } .why-us-content-wrapper:hover .why-us-content-block, .why-us-content-wrapper:focus-within .why-us-content-block, .why-us-content-wrapper.detenida .why-us-content-block { animation-play-state: paused; } } @keyframes marquesina { to { transform: translate3d(0, calc(-100% - 30px), 0); } } /* Sin movimiento, la lista se ve entera y sin degradados que laven la primera tarjeta */ @media (prefers-reduced-motion: reduce) { .why-us-content-wrapper { height: auto !important; overflow: visible; } .why-us-content-wrapper :is(.why-us-top-overlay, .why-us-bottom-overlay) { display: none; } } /* ---------- Botones: hover, pulsado y elevación comunes (P5, P6) ---------- */ .primary-button, .secondary-button, .home-one-hero-slider-arrow, .footer-link-block, .nav-menu-link { transition: background-color var(--mov-s) var(--ease-sal), color var(--mov-s) var(--ease-sal), border-color var(--mov-s) var(--ease-sal), transform var(--mov-s) var(--ease-sal), box-shadow var(--mov-s) var(--ease-sal); } .secondary-button { color: var(--texto-sobre-naranja); } @media (hover: hover) and (pointer: fine) { .primary-button:hover, .secondary-button:not(.float):hover { transform: translateY(-2px); box-shadow: var(--sombra-1); } .home-one-hero-slider-arrow.w-slider-arrow-right:hover .link-icon { transform: translateX(3px); } .home-one-hero-slider-arrow.w-slider-arrow-left:hover .link-icon { transform: translateX(-3px); } .footer-link-block:hover { transform: scale(1.08); } } /* Pulsado: gana siempre al hover (por eso la clase repetida) */ .primary-button.primary-button:active, .secondary-button.secondary-button:active, .secondary-button.float:hover:active, .home-one-hero-slider-arrow.home-one-hero-slider-arrow:active, .slider-pausa.slider-pausa:active, .control-video.control-video:active, form[data-contacto] button[type=submit]:active { transform: translateY(1px) scale(.98); box-shadow: none; transition-duration: var(--mov-xs); } /* ---------- Tarjetas enlazadas (Hazte voluntario, miembro, Colabora hoy) ---------- */ /* La tarjeta se eleva sobre un fondo propio con aire alrededor (sin cambiar la maquetación): se anima la opacidad de ese fondo, no la sombra */ .tarjeta-enlazada { position: relative; isolation: isolate; border-radius: 12px; transition: transform var(--mov-m) var(--ease-suave); } .tarjeta-enlazada::before { content: ""; position: absolute; inset: -16px -16px -20px; z-index: -1; border-radius: 16px; background: #fff; box-shadow: var(--sombra-2); opacity: 0; pointer-events: none; transition: opacity var(--mov-m) var(--ease-sal); } .enlace-tarjeta { color: inherit; text-decoration: none; } .enlace-tarjeta::after { content: ""; position: absolute; inset: 0; } .how-it-works-image { transition: transform 600ms var(--ease-suave); } .how-it-works-card-title { transition: color var(--mov-s) var(--ease-sal); } .tarjeta-enlazada .how-it-works-card-title strong { position: relative; } /* Fuera del flujo: el título se centra solo por su texto */ .tarjeta-enlazada .how-it-works-card-title strong::after { content: "\2192"; position: absolute; left: 100%; top: 0; margin-left: .3em; opacity: 0; transform: translateX(-4px); transition: opacity var(--mov-s) var(--ease-sal), transform var(--mov-s) var(--ease-sal); } .tarjeta-enlazada:has(.enlace-tarjeta:focus-visible) .how-it-works-card-title strong::after { opacity: 1; transform: none; } .tarjeta-enlazada:has(.enlace-tarjeta:focus-visible) .how-it-works-card-title { color: var(--naranja-texto); } @media (hover: hover) and (pointer: fine) { .tarjeta-enlazada:hover { transform: translateY(-3px); } .tarjeta-enlazada:hover::before { opacity: 1; } .tarjeta-enlazada:hover .how-it-works-image { transform: scale(1.04); } .tarjeta-enlazada:hover .how-it-works-card-title { color: var(--naranja-texto); } .tarjeta-enlazada:hover .how-it-works-card-title strong::after { opacity: 1; transform: none; } } .enlace-tarjeta:focus-visible { outline: none !important; box-shadow: none; } .tarjeta-enlazada:has(.enlace-tarjeta:focus-visible) { outline: 3px solid var(--color--secondary-color); outline-offset: 18px; border-radius: 16px; } /* ---------- Botón flotante Colabora ---------- */ .secondary-button.float { font-weight: 700; color: var(--texto-sobre-naranja); bottom: calc(16px + env(safe-area-inset-bottom)); box-shadow: var(--sombra-pop); transition: opacity var(--mov-m) var(--ease-sal), transform var(--mov-m) var(--ease-suave), background-color var(--mov-s) var(--ease-sal), color var(--mov-s) var(--ease-sal); } html.js.mov-listo .secondary-button.float:not(.visible) { opacity: 0; transform: translateY(16px); pointer-events: none; visibility: hidden; transition: opacity 180ms var(--ease-entra), transform 180ms var(--ease-entra), visibility 0s linear 180ms; } @media (hover: hover) and (pointer: fine) { .secondary-button.float:hover { transform: translateY(-2px); } } /* ---------- Donación: importes, pestañas y nota de pago ---------- */ .combine-pricing4_component { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) !important; gap: 10px; width: 100%; } .combine-pricing4_component .dondate-button { place-self: stretch !important; } .combine-pricing4_tabs .w-tab-content { align-self: stretch; width: 100%; } .dondate-button { min-height: 48px; font-weight: 600; align-items: center; white-space: nowrap; transition: background-color var(--mov-s) var(--ease-sal), border-color var(--mov-s) var(--ease-sal), color var(--mov-s) var(--ease-sal), transform var(--mov-xs) var(--ease-sal), box-shadow var(--mov-s) var(--ease-sal); } .dondate-button:hover { color: var(--texto-sobre-naranja); } .dondate-button::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 6px; flex: none; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8L8 2M3.5 2H8v4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--mov-s) var(--ease-sal); } .dondate-button.dondate-button:active { transform: scale(.97); box-shadow: none; transition-duration: var(--mov-xs); } @media (hover: hover) and (pointer: fine) { .dondate-button:hover { transform: translateY(-2px); box-shadow: var(--sombra-1); } .dondate-button:hover::after { transform: translate(2px, -2px); } } .nota-pago { display: flex; gap: 6px; align-items: center; font-size: 14px; line-height: 1.4; color: var(--gris-texto); margin: 16px 0 0; } .nota-pago .icono { flex: none; } .w-tab-link { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; } .combine-pricing4_tab.w--current { color: var(--texto-sobre-naranja); } .w-tab-menu { position: relative; isolation: isolate; } .pestana-indicador { position: absolute; top: 0; left: 0; height: 0; border-radius: 99px; background: var(--color--secondary-color); z-index: -1; transition: transform var(--mov-m) var(--ease-io), width var(--mov-m) var(--ease-io); } .w-tabs:not(.listo) .pestana-indicador { transition: none; } .w-tabs.listo .w-tab-link { background: transparent !important; transition: color var(--mov-s) var(--ease-sal); } .w-tabs.cambiado .w-tab-pane.w--tab-active { animation: panel-entra 240ms var(--ease-sal) both; } .w-tabs.cambiado .w-tab-pane.w--tab-active .dondate-button { animation: panel-entra 240ms var(--ease-sal) both; animation-delay: calc(var(--i, 0) * 40ms); } @keyframes panel-entra { from { opacity: 0; transform: translateY(6px); } } /* ---------- Formulario de contacto ---------- */ .campo-trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } form[data-contacto] .w-input { border: 1px solid var(--borde-campo) !important; border-radius: 8px; transition: border-color var(--mov-s) var(--ease-sal), box-shadow var(--mov-s) var(--ease-sal); } form[data-contacto] .w-input:focus { border-color: var(--color--primary-color) !important; box-shadow: 0 0 0 3px rgba(243, 116, 67, .28); outline: none; } form[data-contacto] .w-input:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(243, 116, 67, .28); } form[data-contacto] .w-input[aria-invalid=true] { border-color: var(--error) !important; box-shadow: 0 0 0 3px rgba(181, 74, 58, .14); } .error-campo { color: var(--error); font-size: 14px; line-height: 1.4; margin: 6px 0 0; animation: aparece var(--mov-s) var(--ease-sal) both; } @keyframes aparece { from { opacity: 0; transform: translateY(-4px); } } .aviso-privacidad { margin: 4px 0 18px; font-size: 14px; line-height: 1.5; } .casilla-privacidad { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 16px; cursor: pointer; margin-bottom: 8px; } .casilla-privacidad input { appearance: none; flex: none; width: 20px; height: 20px; margin: 2px 0 0; border: 1.5px solid var(--color--primary-color); border-radius: 5px; background: #fff; display: grid; place-content: center; cursor: pointer; transition: background-color var(--mov-xs) var(--ease-sal), border-color var(--mov-xs) var(--ease-sal); } .casilla-privacidad input::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px) scale(0); transition: transform var(--mov-xs) var(--ease-sal); } .casilla-privacidad input:checked { background: var(--color--primary-color); } .casilla-privacidad input:checked::after { transform: rotate(45deg) translate(-1px, -1px); } .casilla-privacidad input[aria-invalid=true] { border-color: var(--error); box-shadow: 0 0 0 3px rgba(181, 74, 58, .14); } .aviso-privacidad .error-campo { margin: -2px 0 10px 30px; } .info-privacidad { font-size: 14px; color: var(--gris-texto); margin: 0; } form[data-contacto] button[type=submit] { display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; font: inherit; font-weight: 500; } form[data-contacto].enviando button[type=submit] { cursor: progress; } .boton-carga { display: none; width: 16px; height: 16px; margin-left: 10px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: girar .8s linear infinite; } form.enviando .boton-carga { display: inline-block; } @keyframes girar { to { transform: rotate(360deg); } } form[data-contacto] { transition: opacity var(--mov-s) var(--ease-entra), transform var(--mov-s) var(--ease-entra); } form[data-contacto].saliendo { opacity: 0; transform: translateY(-8px); } /* Tras enviar, la tarjeta pasa con una transición de su alto al de la confirmación (ag.js), que es un cierre completo: aro, titular manuscrito, texto y dos salidas */ .contact-form-block.con-respuesta { display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; } .contact-form-block.con-respuesta .w-form-done { width: 100%; } .contact-form-block .w-form-done { background: var(--color--primary-color); color: #fff; border-radius: 12px; padding: 48px 32px; position: relative; text-align: center; scroll-margin-top: 120px; scroll-margin-bottom: 120px; font-size: 18px; line-height: 1.5; } .contact-form-block .w-form-done .check { display: block; margin: 0 auto 14px; color: var(--color--secondary-color); } .contact-form-block .w-form-done .check .aro { stroke-dasharray: 100; stroke-dashoffset: 0; } .gracias-titulo { font-family: var(--font-family--title-font); font-size: clamp(30px, 4vw, 40px); line-height: 1.2; color: #fff; margin: 0 0 8px; } .gracias-texto { margin: 0 auto; max-width: 36ch; color: rgba(255, 255, 255, .88); } .gracias-acciones { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; margin-top: 28px; } .gracias-volver { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; padding: 12px 4px; transition: text-decoration-thickness var(--mov-s) var(--ease-sal), color var(--mov-s) var(--ease-sal); } .gracias-volver:hover { text-decoration-thickness: 2px; color: var(--color--secondary-color); } @media (max-width: 767px) { .contact-form-block .w-form-done { padding: 40px 20px; } } .contact-form-block .w-form-fail { background: var(--error-fondo); color: var(--color--primary-color); text-align: left; border-left: 4px solid var(--color--secondary-color); border-radius: 8px; padding: 16px 20px 16px 52px; position: relative; margin-top: 16px; font-weight: 500; } .contact-form-block .w-form-fail .aviso { position: absolute; left: 18px; top: 17px; color: var(--error); } .contact-form-block .w-form-fail a { color: var(--naranja-texto); text-decoration: underline; text-underline-offset: 3px; } .contact-form-block :is(.w-form-done, .w-form-fail):focus { outline: none; } html.js .contact-form-block :is(.w-form-done, .w-form-fail) { opacity: 0; transform: translateY(8px); transition: opacity var(--mov-m) var(--ease-sal), transform var(--mov-m) var(--ease-suave); } html.js .contact-form-block :is(.w-form-done, .w-form-fail).entra { opacity: 1; transform: none; } html.js .w-form-done .check .aro { stroke-dashoffset: 100; transition: stroke-dashoffset 600ms var(--ease-suave) var(--mov-m); } html.js .w-form-done .check path { stroke-dashoffset: 48; transition: stroke-dashoffset 500ms var(--ease-suave) calc(var(--mov-m) + 380ms); } html.js .w-form-done.entra .check :is(.aro, path) { stroke-dashoffset: 0; } html.js .w-form-done :is(.gracias-titulo, .gracias-texto, .gracias-acciones) { opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--ease-sal), transform 500ms var(--ease-suave); } html.js .w-form-done.entra :is(.gracias-titulo, .gracias-texto, .gracias-acciones) { opacity: 1; transform: none; } html.js .w-form-done.entra .gracias-titulo { transition-delay: 200ms; } html.js .w-form-done.entra .gracias-texto { transition-delay: 290ms; } html.js .w-form-done.entra .gracias-acciones { transition-delay: 380ms; } /* ---------- Pie ---------- */ .pie-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-top: 14px; padding-bottom: 28px; font-size: 14px; } .pie-legal a { color: rgba(255, 255, 255, .78) !important; opacity: 1; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding: 12px 4px; transition: color var(--mov-s) var(--ease-sal), background-size var(--mov-m) var(--ease-suave); } .pie-legal a:hover, .pie-legal a:focus-visible { color: #fff !important; background-size: 100% 1px; } .footer-link { transition: transform var(--mov-s) var(--ease-sal), color var(--mov-s) var(--ease-sal); } .footer-copyright-link { transition: color var(--mov-s) var(--ease-sal); } .footer-about-paragraph.legal { font-size: 15px; opacity: .85; line-height: 1.6; margin-top: 6px; } .footer-link-block { min-width: 44px; min-height: 44px; } @media (min-width: 992px) { /* Tres columnas repartidas: sin el hueco que dejaba el margin-left:auto de la de enlaces */ .footer-main-block { display: grid !important; grid-template-columns: minmax(0, 340px) minmax(200px, auto) minmax(0, 364px); justify-content: space-between; column-gap: 48px; } .footer-main-block > * { grid-area: auto !important; justify-self: stretch !important; } .footer-column { margin-left: 0; padding-right: 0; } } @media (max-width: 767px) { .pie-legal { padding-bottom: calc(88px + env(safe-area-inset-bottom)); } .footer-link { display: inline-block; padding: 10px 0; min-height: 44px; } .footer-copyright-link { display: inline-block; padding: 8px 0; } } /* ---------- Enlaces de texto: naranja legible ---------- */ .texto-legal a, .aviso-privacidad a, .cuerpo-404 p a, .text-link { color: var(--naranja-texto); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--mov-s) var(--ease-sal), text-decoration-color var(--mov-s) var(--ease-sal); } .texto-legal a:hover, .aviso-privacidad a:hover, .cuerpo-404 p a:hover, .text-link:hover { color: var(--color--primary-color); text-decoration-thickness: 2px; } /* ---------- Testimonios: foto de la tarjeta ---------- */ .testimonial-sidebar-image { width: 100%; max-width: 100%; height: 25rem; max-height: none; object-fit: cover; object-position: 50% 35%; float: none; display: block; } @media (max-width: 767px) { .testimonial-sidebar-image { height: 20rem; } } /* El botón de la tarjeta no se parte en dos líneas (Collaborez maintenant, a 768) */ .testimonial-sidebar-overlay .primary-button { white-space: nowrap; } @media (min-width: 768px) and (max-width: 991px) { .testimonial-sidebar-overlay .primary-button { padding-left: 22px; padding-right: 22px; } } /* ---------- Cabeceras interiores: velo de marca para que el título se lea ---------- Solo en /equipo y /donar: en Webflow sus cabeceras cambiaban el velo negro al 50 % de las demás por uno transparente y el título quedaba en 2:1 sobre la foto. Las demás ya llegan a 9:1 y no se oscurecen más. */ .breadcrumb-section { position: relative; isolation: isolate; } .breadcrumb-section:is(.team, .donate)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(28, 53, 94, .55) 0%, rgba(28, 53, 94, .15) 30%, rgba(12, 22, 40, .45) 100%), radial-gradient(60% 45% at 50% 55%, rgba(12, 22, 40, .52), transparent 72%); } .breadcrumb-title { text-shadow: 0 2px 18px rgba(12, 22, 40, .45); } /* ---------- /donar: medida de lectura y datos bancarios ---------- */ .about-intro-wrapper.donate .about-intro-except { max-width: min(68ch, 36em); } /* en Satoshi, 68ch son 930 px */ .cuentas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; margin-top: 24px; } .cuenta { background: #f2f3f7; border-radius: 12px; padding: 28px; } .cuenta h3 { font-size: 28px; margin: 0 0 14px; } .cuenta p { margin: 0 0 6px; } .cuenta .titular { font-weight: 700; color: var(--color--primary-color); } .dato-banco { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px !important; } .iban { font-family: inherit; font-variant-numeric: tabular-nums; letter-spacing: .04em; font-size: 19px; color: var(--color--primary-color); background: none; padding: 0; } .copiar { display: none; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--color--primary-color); border-radius: 999px; padding: 6px 14px; font-size: 14px; min-height: 36px; color: var(--color--primary-color); cursor: pointer; font-family: inherit; transition: background-color var(--mov-s) var(--ease-sal), color var(--mov-s) var(--ease-sal), transform var(--mov-xs) var(--ease-sal); } html.mov-listo .copiar { display: inline-flex; } .copiar:hover, .copiar.hecho { background: var(--color--primary-color); color: #fff; } .copiar:active { transform: scale(.97); } .copiar .texto-boton { transition: opacity 150ms var(--ease-sal); } .copiar.cambiando .texto-boton { opacity: 0; } /* ---------- Páginas legales y 404 ---------- */ .seccion-legal { padding: 70px 0 100px; } .pagina-legal .breadcrumb-section { height: auto; min-height: 0; padding: 128px 0 36px; } .pagina-legal h1 { font-size: clamp(36px, 5vw, 52px); } .cabecera-legal .section-subtitle-block { justify-content: center; margin-bottom: 6px; } .fecha-legal { color: rgba(255, 255, 255, .8); font-size: 15px; margin: 10px 0 0; text-align: center; } .texto-legal { max-width: min(68ch, 40em); margin: 0 auto; color: var(--color--text-color); font-size: 18px; line-height: 1.7; } .texto-legal h2 { font-family: var(--font-family--title-font); color: var(--color--primary-color); font-size: 28px; line-height: 1.2; margin: 42px 0 12px; scroll-margin-top: 100px; } .texto-legal h2:first-child { margin-top: 0; } .texto-legal p, .texto-legal ul { margin: 0 0 14px; } .texto-legal ul { padding-left: 22px; } .texto-legal li { margin-bottom: 6px; } .intro-transparencia { font-size: 20px; margin-bottom: 28px !important; } .texto-legal .documentos-transparencia { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 12px; } .documentos-transparencia li { display: grid; grid-template-columns: 1fr auto; gap: 2px 20px; align-items: center; margin: 0; padding: 18px 22px; border-radius: 6px; background: #f9f9f9; } .documento-nombre { color: var(--color--primary-color); font-weight: 500; } .documento-texto { grid-column: 1; font-size: 15px; line-height: 1.5; } .documento-accion { grid-column: 2; grid-row: 1 / span 2; font-size: 16px; white-space: nowrap; } @media (max-width: 767px) { .documentos-transparencia li { grid-template-columns: 1fr; padding: 16px 18px; } .documento-accion { grid-column: 1; grid-row: auto; margin-top: 8px; } } .indice-legal { background: #f2f3f7; border-radius: 12px; padding: 20px 24px; margin-bottom: 40px; font-size: 16px; } .indice-legal ol { columns: 2; column-gap: 32px; margin: 0; padding-left: 20px; } .indice-legal li { break-inside: avoid; margin-bottom: 6px; } .tabla-legal { overflow-x: auto; margin: 6px 0 16px; } .texto-legal table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; } .texto-legal th, .texto-legal td { border: 1px solid #dfe3ea; padding: 9px 11px; text-align: left; vertical-align: top; } .texto-legal th { background: #f2f3f7; color: var(--color--primary-color); } @media (prefers-reduced-motion: no-preference) { html:has(.indice-legal) { scroll-behavior: smooth; } } .seccion-legal:has(.cuerpo-404) { padding: 0; } .cuerpo-404 { text-align: center; padding: 72px 16px 96px; } .mascara-404 { overflow: hidden; padding-bottom: .08em; } .cifra-404 { display: block; font-family: var(--font-family--title-font); font-size: clamp(96px, 16vw, 160px); line-height: 1; color: var(--color--primary-color); } @media (prefers-reduced-motion: no-preference) { .cifra-404 { animation: sube-mascara var(--mov-l) var(--ease-suave) 120ms both; } } @keyframes sube-mascara { from { transform: translate3d(0, 100%, 0); } } .frase-404 { font-size: 20px; margin: 18px auto 0; max-width: 40ch; } .acciones-404 { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 28px 0 24px; } /* Una acción principal (volver al inicio) y dos secundarias de contorno, más ligeras */ .acciones-404 .secondary-button { background: transparent; border: 1.5px solid var(--color--primary-color); color: var(--color--primary-color); } .acciones-404 .secondary-button:hover { background: var(--color--primary-color); color: #fff; } @media (max-width: 479px) { .acciones-404 { display: grid; grid-template-columns: 1fr 1fr; max-width: 360px; margin-inline: auto; } .acciones-404 .primary-button { grid-column: 1 / -1; } .acciones-404 .w-button { text-align: center; justify-content: center; } } .otras-404 { font-size: 15px; color: var(--gris-texto); margin: 0 0 8px; } .utiles-404 { font-size: 14px; color: var(--gris-texto); margin: 0; } @media (max-width: 767px) { .seccion-legal { padding: 44px 0 70px; } .pagina-legal .breadcrumb-section { padding: 108px 0 32px; } .texto-legal { font-size: 16px; } .texto-legal h2 { font-size: 24px; } .indice-legal ol { columns: 1; } .texto-legal table { min-width: 0; } .texto-legal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .texto-legal table, .texto-legal tbody, .texto-legal tr, .texto-legal td { display: block; width: 100%; } .texto-legal tr { border: 1px solid #dfe3ea; border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; background: #fff; } .texto-legal td { border: 0; padding: 4px 0 10px; } .texto-legal td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color--primary-color); margin-bottom: 2px; } .tabla-legal { overflow: visible; } } /* ---------- Vídeo de /nosotros ---------- */ .about-intro-video { position: relative; } .about-intro-video video { background-size: cover; background-position: 50% 50%; } .control-video { position: absolute; right: 16px; bottom: 16px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; background: rgba(255, 255, 255, .9); color: var(--color--primary-color); box-shadow: var(--sombra-pop); transition: background-color var(--mov-s) var(--ease-sal), transform var(--mov-xs) var(--ease-sal); } .control-video > * { grid-area: 1 / 1; transition: opacity var(--mov-s) var(--ease-sal), transform var(--mov-s) var(--ease-sal); } .control-video .i-pausa { opacity: 0; transform: scale(.8); } .control-video[aria-pressed="true"] .i-pausa { opacity: 1; transform: none; } .control-video[aria-pressed="true"] .i-play { opacity: 0; transform: scale(.8); } html:not(.mov-listo) .control-video { display: none; } /* ---------- Enlaces a documentos ---------- */ .peso { opacity: .7; font-size: .85em; margin-left: .4em; font-weight: 400; } /* ---------- Rejillas con huecos ---------- */ @media (min-width: 992px) { .team-wrapper { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 30px; } .team-wrapper > .team-card { flex: 0 0 calc((100% - 60px) / 3); } } @media (min-width: 768px) and (max-width: 991px) { .how-it-works-wrapper > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 20px); } } /* ---------- Movimiento reducido ---------- */ @media (prefers-reduced-motion: reduce) { :root { --mov-dist: 0px; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; animation-delay: 0s !important; transition-delay: 0s !important; } html.js [data-mov] { opacity: 1 !important; transform: none !important; clip-path: none !important; } html.js [data-mov] img { transform: none !important; } html.js .w-slide .home-one-hero-bg-image { transform: none; } } /* ---------- Llamadas a la acción decididas el 22-10-2026 (_build/llamadas.py) ---------- */ /* Hero: la misma pareja en todas las diapositivas */ .hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; } .boton-contorno-claro { background-color: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8); } .boton-contorno-claro:hover { background-color: rgba(255, 255, 255, .12); color: #fff; } .w-slider.listo .w-slide .hero-acciones .primary-button + .primary-button { --i: 3.6; } @media (max-width: 479px) { .hero-acciones { gap: 10px; } .hero-acciones .primary-button { flex: 1 1 auto; padding-left: 20px; padding-right: 20px; } } /* El mapa de Kingsville, como enlace pequeño junto al antetítulo */ .hero-mapa { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; font-weight: 400; } .hero-mapa::after { content: " ↗"; } .hero-mapa:hover { text-decoration-thickness: 2px; } /* Importes mensuales: la cifra manda, el periodo acompaña */ .importe-periodo { font-size: .78em; font-weight: 400; opacity: .8; margin-left: 1px; } /* Donar: botón de la sección de empresas */ .boton-empresas { margin-top: 24px; } /* Formulario: motivo del mensaje en pastillas (una sola elección, opcional) */ .campo-motivo { grid-column: 1 / -1; border: 0; margin: 0; padding: 0; min-width: 0; } /* La leyenda copia la regla label de webflow.css: 22 px, 24 desde 1440 y 20 en móvil */ .campo-motivo legend { padding: 0; margin-bottom: 10px; color: #1c355e; font-weight: 500; font-size: 22px; line-height: 1.5; } @media screen and (min-width: 1440px) { .campo-motivo legend { font-size: 24px; } } @media screen and (max-width: 767px) { .campo-motivo legend { font-size: 20px; } } .opciones-motivo { display: flex; flex-wrap: wrap; gap: 10px; } .opcion-motivo { position: relative; display: inline-block; margin: 0; font-size: inherit; cursor: pointer; } .opcion-motivo input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .opcion-motivo span { display: inline-block; padding: 10px 18px; border: 1px solid var(--borde-campo); border-radius: 999px; background: #fff; color: #1c355e; font-size: 15px; line-height: 1.3; transition: background-color var(--mov-s) var(--ease-sal), color var(--mov-s) var(--ease-sal), border-color var(--mov-s) var(--ease-sal); } .opcion-motivo input:checked + span { background: #1c355e; border-color: #1c355e; color: #fff; } .opcion-motivo input:focus-visible + span { outline: 3px solid #F37443; outline-offset: 3px; } .opcion-motivo:active span { transform: scale(.98); } @media (hover: hover) and (pointer: fine) { .opcion-motivo:hover input:not(:checked) + span { border-color: #1c355e; } } /* ---------- Visor del libro (/libro, _build/extras.py) ---------- */ .seccion-legal:has(.cuerpo-libro) { padding: 56px 0 96px; } .cuerpo-libro { max-width: 1180px; margin: 0 auto; } .intro-libro { max-width: 60ch; margin: 0 auto 36px; text-align: center; font-size: 19px; line-height: 1.65; color: var(--color--text-color); text-wrap: pretty; } .visor-libro { outline: none; } .visor-escena { position: relative; display: flex; justify-content: center; align-items: center; background: #f2f3f7; border-radius: 16px; padding: clamp(16px, 3vw, 40px); min-height: 200px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: pan-y; } .visor-escena > .visor-pagina, .visor-pliego .visor-pagina { display: block; width: 100%; max-width: 560px; height: auto; aspect-ratio: 1; background: #fff; box-shadow: 0 10px 30px rgba(28, 53, 94, .16); } .visor-pliego { display: flex; justify-content: center; width: 100%; } .visor-pliego.doble .visor-pagina { width: 50%; } /* Lomo: una sombra suave donde se juntan las dos páginas */ .visor-pliego.doble { position: relative; } .visor-pliego.doble::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 48px; transform: translateX(-50%); background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.10) 48%, rgba(0,0,0,.14) 50%, rgba(0,0,0,.10) 52%, rgba(0,0,0,0)); pointer-events: none; } .visor-pliego.doble .visor-pagina:first-child { border-radius: 4px 0 0 4px; } .visor-pliego.doble .visor-pagina:last-child { border-radius: 0 4px 4px 0; } .visor-pliego:not(.doble) .visor-pagina { border-radius: 4px; } .visor-pliego.desde-der { animation: pliego-der var(--mov-m) var(--ease-suave) both; } .visor-pliego.desde-izq { animation: pliego-izq var(--mov-m) var(--ease-suave) both; } @keyframes pliego-der { from { opacity: 0; transform: translate3d(28px, 0, 0); } } @keyframes pliego-izq { from { opacity: 0; transform: translate3d(-28px, 0, 0); } } .visor-controles { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; } .visor-controles[hidden] { display: none; } .visor-contador { min-width: 9ch; margin: 0; text-align: center; font-variant-numeric: tabular-nums; color: var(--color--primary-color); font-weight: 500; } .visor-boton { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 1.5px solid var(--color--primary-color); background: #fff; color: var(--color--primary-color); cursor: pointer; transition: background-color var(--mov-s) var(--ease-sal), color var(--mov-s) var(--ease-sal), opacity var(--mov-s) var(--ease-sal), transform var(--mov-xs) var(--ease-sal); } .visor-boton svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .visor-boton:disabled { opacity: .3; cursor: default; } .visor-boton:not(:disabled):active { transform: scale(.94); } @media (hover: hover) and (pointer: fine) { .visor-boton:not(:disabled):hover { background: var(--color--primary-color); color: #fff; } } .visor-pantalla { margin-left: 10px; } .descarga-libro { text-align: center; margin: 22px 0 0; font-size: 16px; } .descarga-libro a { color: var(--naranja-texto); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .descarga-libro .peso { color: var(--gris-texto); display: inline-block; text-decoration: none; } /* Pantalla completa: fondo azul de la marca y el libro tan grande como quepa */ .visor-libro:fullscreen { background: #0f1d33; display: flex; flex-direction: column; justify-content: center; padding: 24px; } .visor-libro:fullscreen .visor-escena { background: transparent; padding: 0; flex: 1; } .visor-libro:fullscreen .visor-pliego { height: calc(100vh - 120px); align-items: center; } .visor-libro:fullscreen .visor-pagina { width: auto; max-width: none; height: 100%; max-height: calc(100vh - 120px); } .visor-libro:fullscreen .visor-pliego.doble .visor-pagina { width: auto; } .visor-libro:fullscreen .visor-contador { color: #fff; } .visor-libro:fullscreen .visor-boton { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; } @media (max-width: 767px) { .seccion-legal:has(.cuerpo-libro) { padding: 36px 0 64px; } .intro-libro { font-size: 17px; text-align: left; margin-bottom: 24px; } .visor-escena { background: transparent; padding: 0; } } /* Nosotros: la portada del libro lleva al visor */ .tarjeta-libro { display: flex; align-items: center; gap: 20px; max-width: 420px; padding: 14px 22px 14px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #e3e7ee; color: var(--color--primary-color); text-decoration: none; transition: transform var(--mov-s) var(--ease-sal), box-shadow var(--mov-s) var(--ease-sal); } .tarjeta-libro img { width: 96px; height: 96px; flex: none; border-radius: 4px; box-shadow: 0 6px 16px rgba(28, 53, 94, .2); } .tarjeta-libro-texto { display: grid; gap: 6px; } .tarjeta-libro-titulo { font-family: var(--font-family--title-font); font-size: 22px; line-height: 1.2; text-wrap: balance; } .tarjeta-libro-accion { color: var(--naranja-texto); font-weight: 500; } .tarjeta-libro-accion::after { content: "→"; display: inline-block; margin-left: 6px; transition: transform var(--mov-s) var(--ease-sal); } .tarjeta-libro:active { transform: scale(.98); } @media (hover: hover) and (pointer: fine) { .tarjeta-libro:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px #e3e7ee, var(--sombra-2); } .tarjeta-libro:hover .tarjeta-libro-accion::after { transform: translateX(4px); } } /* Gracias tras pagar en Stripe */ .seccion-legal:has(.cuerpo-gracias) { padding: 0; } .cuerpo-gracias { max-width: 40em; margin: 0 auto; text-align: center; padding: 64px 16px 96px; font-size: 18px; line-height: 1.7; color: var(--color--text-color); } .cuerpo-gracias p { margin: 0 0 14px; text-wrap: pretty; } .cuerpo-gracias a:not(.w-button) { color: var(--naranja-texto); text-decoration: underline; text-underline-offset: 3px; } .frase-gracias { font-family: var(--font-family--title-font); color: var(--color--primary-color); font-size: clamp(26px, 3.4vw, 34px); line-height: 1.25; margin-bottom: 18px !important; } .marca-gracias svg { width: 76px; height: 76px; margin: 0 auto 20px; display: block; fill: none; stroke: var(--color--secondary-color); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } @media (prefers-reduced-motion: no-preference) { .marca-gracias circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: traza 700ms var(--ease-suave) 150ms forwards; } .marca-gracias path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: traza 450ms var(--ease-suave) 700ms forwards; } } @keyframes traza { to { stroke-dashoffset: 0; } } .acciones-gracias { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; } .acciones-gracias .secondary-button { background: transparent; border: 1.5px solid var(--color--primary-color); color: var(--color--primary-color); } .acciones-gracias .secondary-button:hover { background: var(--color--primary-color); color: #fff; } /* ---------- Empresas que apoyan (portada, _build/empresas.py) ---------- Diseño A (Carlos, 22-10-2026): misma composición que los testimonios. Panel azul con el pincel a la izquierda; logos en casillas grises iguales, ninguno destaca */ .empresas-composicion { display: grid; grid-template-columns: 412px minmax(0, 1fr); gap: 30px; align-items: stretch; } .empresas-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 40px; border-radius: 6px; background: var(--color--primary-color); color: #fff; } .empresas-pincel { position: absolute; top: 0; right: 0; width: 150px; height: auto; pointer-events: none; } .empresas-panel-titulo { position: relative; max-width: 80%; margin: 0 0 16px; color: #fff; font-size: 32px; line-height: 1.3; } .empresas-panel-texto { position: relative; margin: 0; font-size: 18px; line-height: 1.6; text-wrap: pretty; } .empresas-panel .primary-button { align-self: flex-start; } .rejilla-empresas { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .empresa { display: flex; } .empresa-enlace { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 150px; padding: 16px; border-radius: 6px; background: #f9f9f9; transition: transform var(--mov-s) var(--ease-sal), box-shadow var(--mov-s) var(--ease-sal), background-color var(--mov-s) var(--ease-sal); } .empresa-enlace img { display: block; width: calc(var(--w) * .95px); max-width: 88%; height: auto; } .empresa-enlace:active { transform: scale(.985); } .empresa-invitacion .empresa-enlace { background: transparent; border: 2px dashed rgba(28, 53, 94, .28); color: var(--color--primary-color); font-family: var(--font-family--title-font); font-size: 22px; line-height: 1.2; text-align: center; text-wrap: balance; text-decoration: none; } @media (hover: hover) and (pointer: fine) { .empresa-enlace:hover { transform: translateY(-3px); background: #fff; box-shadow: var(--sombra-2); } } @media (max-width: 991px) { .empresas-composicion { grid-template-columns: 311px minmax(0, 1fr); } .empresas-panel { padding: 32px; } .empresas-pincel { width: 96px; } .empresas-panel-titulo { font-size: 24px; } .empresas-panel-texto { font-size: 16px; } .rejilla-empresas { gap: 12px; } .empresa-enlace { min-height: 110px; padding: 10px; } .empresa-enlace img { width: calc(var(--w) * .62px); } .empresa-invitacion .empresa-enlace { font-size: 16px; } } @media (max-width: 767px) { .empresas-composicion { grid-template-columns: 1fr; gap: 20px; } .empresas-panel { padding: 32px 28px; } .empresas-panel-titulo { font-size: 26px; } .rejilla-empresas { gap: 10px; } .empresa-enlace { min-height: 88px; padding: 8px; } .empresa-enlace img { width: calc(var(--w) * .5px); max-width: 92%; } .empresa-invitacion .empresa-enlace { font-size: 14px; } } /* ---------- Signos de apertura en la fuente de los títulos (textos.signos_apertura) ---------- El ¿ y el ¡ de Love Ya Like A Sister son pequeños y altos: se pinta encima el ? o el ! de la misma fuente girado 180°. El signo real sigue en el texto, solo deja de pintarse */ .signo-abre { position: relative; display: inline-block; -webkit-text-fill-color: transparent; } .signo-abre::before { content: attr(data-signo); position: absolute; inset: 0; text-align: center; -webkit-text-fill-color: currentcolor; transform: rotate(180deg); } @media (max-width: 991px) and (min-width: 768px) { .empresas-panel .primary-button { padding-left: 20px; padding-right: 20px; white-space: nowrap; } } /* ---------- Proyectos (27 oct 2026) ---------- Página con meta, barra de progreso y donación a elegir por proyecto. Tarjetas grises #f9f9f9 como los datos bancarios de /donar; la barra en el naranja de marca. */ .seccion-legal:has(.cuerpo-proyectos) { padding: 56px 0 100px; } .cuerpo-proyectos { max-width: 1140px; margin: 0 auto; color: var(--color--text-color); } .aviso-borrador { max-width: 720px; margin: 0 auto 28px; padding: 12px 18px; border-radius: 6px; text-align: center; background: #FFF4D6; color: #6B4E00; font-size: 15px; border: 1px dashed #D9A400; } .intro-proyectos { max-width: 60ch; margin: 0 auto 44px; text-align: center; font-size: 19px; line-height: 1.65; text-wrap: pretty; } .proyecto { background: #f9f9f9; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; scroll-margin-top: 110px; } .proyecto-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; } .proyecto-foto { width: 100%; height: 100% !important; object-fit: cover; display: block; } .proyecto-etiqueta { position: absolute; top: 16px; left: 16px; padding: 6px 12px; border-radius: 999px; background: var(--color--secondary-color); color: var(--texto-sobre-naranja); font-size: 14px; font-weight: 600; letter-spacing: .02em; } .proyecto-cuerpo { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 16px; flex: 1; } .proyecto-titulo { font-family: var(--font-family--title-font); color: var(--color--primary-color); font-size: 26px; line-height: 1.2; margin: 0; text-wrap: balance; } .proyecto-resumen { margin: 0; font-size: 16px; line-height: 1.65; text-wrap: pretty; } .proyecto-progreso { display: grid; gap: 8px; } .proyecto-cifras { margin: 0; font-size: 15px; color: var(--gris-texto); } .proyecto-cifras strong { font-size: 24px; color: var(--color--primary-color); font-weight: 600; margin-right: 4px; } .barra { height: 10px; border-radius: 999px; background: rgba(28, 53, 94, .12); overflow: hidden; } .barra span { display: block; height: 100%; width: var(--p); border-radius: inherit; background: var(--color--secondary-color); transform-origin: left; } html.js .proyecto:not(.visto) .barra span { transform: scaleX(0); } html.js .proyecto.visto .barra span { transition: transform 1.1s var(--ease-suave) .2s; } .proyecto-estado { margin: 0; display: flex; justify-content: space-between; font-size: 14px; color: var(--gris-texto); } .proyecto-estado span:first-child { color: var(--naranja-texto); font-weight: 600; } .proyecto-subtitulo { font-family: inherit; font-size: 15px; font-weight: 600; color: var(--color--primary-color); margin: 6px 0 0; } .proyecto-desglose { list-style: none; padding: 0; margin: 0; font-size: 15px; } .proyecto-desglose li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid rgba(28, 53, 94, .1); } .proyecto-desglose li span:last-child { white-space: nowrap; color: var(--color--primary-color); } .proyecto-donar { margin-top: auto; padding-top: 6px; display: grid; gap: 12px; } .importes { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; } .importes legend { font-size: 14px; color: var(--gris-texto); margin-bottom: 8px; padding: 0; } /* Webflow da a todo