/* ========================================================================== DONA.CSS — página de donación, contra DISENOWEB_DONACION.ai (1440/768/375) -------------------------------------------------------------------------- Va LA ÚLTIMA del de dona.html. Reusa a propósito lo que ya existe en vez de inventar de nuevo: · .form / .campo / .consentimiento (paginas.css) → los datos del donante · .pendiente (paginas.css) → el aviso honesto de cobro · .btn-dona (estilo.css) → el botón "Donar $X ahora" · --nube-chip (estilo.css, la máscara de .cifra) → las tarjetas de Impacto · --coral (estilo.css) → el trazo de los 3 iconos Sólo son nuevos: el hero fotográfico, la rejilla de montos y la rejilla de métodos de pago — piezas que no existían en ninguna otra página. ========================================================================== */ :root{ /* Verdes propios de Donación: medidos del .ai, no coinciden con --verde (#70CC03, más amarillo) ni con --verde-mapa/--verde-boletin. Son un verde de marca distinto para esta página, como el sitio ya hace con --azul-chip para el chip del medio en las cifras de Inicio. */ --verde-aporte:#5BCB19; --verde-dona:#00AA00; } /* ========================== 1. HERO ========================== */ .dona-hero{ position:relative; overflow:hidden; line-height:0; margin-top:calc(-1 * var(--nav-alto)); padding-top:0; background:transparent; } /* BUG encontrado: --nav-alto (estilo.css) vale 78px fijo, pero .cabecera real mide 86.5px en escritorio — 8.5px que dejaban una franja blanca entre la tira negra de redes (.social-top) y el hero. Mismo bug/mismo fix que voluntarios.css — ver el comentario largo ahí. */ @media (min-width:901px){ .dona-hero{ margin-top:calc(-1 * var(--nav-alto) - 8.5px) } } .dona-hero-img{ display:block; width:100%; height:auto } .dona-hero-corte{ position:absolute; bottom:-1px; left:0; width:100%; height:64px; background:url('img/hero-corte-pincel.webp') bottom center / 100% 100% no-repeat; pointer-events:none; z-index:10; } /* ========================== 2. PASO 1 — MONTO ========================== */ .dona-paso1{ padding:64px 0 56px; background:#fff } .dona-paso-num{ display:block; font-size:14px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; color:var(--verde-aporte); margin-bottom:6px; } .dona-paso1 h2, .dona-paso2 h2{ font-size:clamp(28px,3.4vw,40px); font-weight:900; letter-spacing:.02em; text-transform:uppercase; margin:0 0 34px; } .dona-seleccionado{ margin-bottom:30px } .dona-seleccionado-label{ display:block; font-size:13px; font-weight:400; letter-spacing:.1em; text-transform:uppercase; color:#666; margin-bottom:10px; } .dona-monto-display{ display:flex; align-items:stretch; max-width:420px; border:2px solid var(--verde-aporte); border-radius:10px; overflow:hidden; } .dona-dollar{ display:grid; place-items:center; flex:none; width:52px; background:var(--verde-aporte); color:#fff; font-weight:900; font-size:18px; } .dona-monto-display span:last-child{ flex:1; padding:14px 18px; font-size:24px; font-weight:300; letter-spacing:.04em; } .dona-tier-label{ font-size:13px; font-weight:400; letter-spacing:.08em; text-transform:uppercase; color:#666; margin:26px 0 14px; } .dona-montos-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; } .dona-monto-btn{ border:0; border-radius:8px; padding:14px 10px; background:var(--verde-aporte); color:#fff; font:inherit; font-size:14px; font-weight:900; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; } .dona-monto-btn:hover{ transform:translateY(-2px); box-shadow:0 4px 0 rgba(0,0,0,.12) } .dona-monto-btn--activo{ background:var(--morado-hondo); box-shadow:0 0 0 3px rgba(73,45,145,.25); } /* El .ai centra todo el bloque "Otro valor" bajo la rejilla de montos, no lo deja pegado al canto izquierdo de la columna — .env no lo centraba solo (max-width sin margin:auto se queda a la izquierda). El campo, además, es más ancho que los 420px de antes (medido: ~44% del ancho de la columna). */ .dona-otro-valor{ margin:30px auto 0; max-width:520px } .dona-otro-label{ display:block; font-size:13px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; text-align:center; margin-bottom:10px; } .dona-monto-input{ display:flex; align-items:stretch; border:2px solid var(--verde-aporte); border-radius:10px; overflow:hidden; } .dona-monto-input input{ flex:1; min-width:0; border:0; padding:14px 18px; font:inherit; font-size:16px; text-align:center; background:#FAFAFA; color:var(--negro); } .dona-monto-input input:focus{ outline:none; background:#fff } @media (max-width:900px){ .dona-montos-grid{ grid-template-columns:repeat(4,1fr) } } @media (max-width:600px){ .dona-paso1{ padding:48px 0 40px } .dona-montos-grid{ grid-template-columns:repeat(3,1fr); gap:10px } .dona-monto-btn{ padding:12px 6px; font-size:12.5px } } /* ========================== 3. PASO 2 — DATOS ========================== */ .dona-paso2{ padding:16px 0 64px; background:#fff } /* Toggle Donación única / Mensual recurrente: mismos radios ocultos + caja verde a lo grande usados en .dona-metodo-opt más abajo, un solo patrón "tarjeta seleccionable" para las dos rejillas. */ .dona-frecuencia{ display:flex; gap:14px; flex-wrap:wrap } .dona-freq-opt{ flex:1 1 200px; position:relative; cursor:pointer; } .dona-freq-opt input{ position:absolute; opacity:0; width:1px; height:1px } .dona-freq-opt span{ display:block; text-align:center; padding:13px 20px; border-radius:10px; background:var(--verde-aporte); color:#fff; font-weight:900; font-size:14px; box-shadow:inset 0 0 0 2px transparent; } .dona-freq-opt input:checked + span{ box-shadow:inset 0 0 0 3px var(--morado-hondo); } .dona-freq-opt input:focus-visible + span{ outline:2px solid var(--azul); outline-offset:2px } .dona-form{ margin-top:26px } .dona-check{ display:flex; gap:10px; align-items:flex-start; font-size:14px; font-weight:300; cursor:pointer; } .dona-check input{ width:18px; height:18px; flex:none; margin-top:2px; accent-color:var(--morado-hondo) } .dona-check a{ color:var(--morado-hondo); font-weight:900 } .dona-metodo h3{ font-size:13px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; margin:0 0 14px; padding-top:14px; border-top:2px solid var(--verde-aporte); } .dona-metodo-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; } .dona-metodo-opt{ position:relative; cursor:pointer } .dona-metodo-opt input{ position:absolute; opacity:0; width:1px; height:1px } .dona-metodo-caja{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 10px; border-radius:14px; background:#F1F1F1; box-shadow:inset 0 0 0 2px transparent; text-align:center; transition:box-shadow .15s ease, background .15s ease; } .dona-metodo-caja img{ height:28px; width:auto; max-width:70%; object-fit:contain } .dona-metodo-caja b{ font-size:12.5px; font-weight:400 } .dona-metodo-opt input:checked + .dona-metodo-caja{ background:#fff; box-shadow:inset 0 0 0 3px var(--verde-aporte); } .dona-metodo-opt input:focus-visible + .dona-metodo-caja{ outline:2px solid var(--azul); outline-offset:2px } .dona-btn-submit{ width:100%; justify-content:center; margin-top:8px; font-size:19px; padding:18px; } .dona-seguro{ display:flex; align-items:center; justify-content:center; gap:8px; margin:14px 0 0; font-size:13.5px; color:#555; } .dona-seguro svg{ width:16px; height:16px; flex:none; fill:#555 } .dona-estado{ margin-top:14px; padding:12px 16px; border-radius:12px; background:#F0FBE8; color:#2b6b0f; font-size:14px; font-weight:300; } @media (max-width:900px){ .dona-metodo-grid{ grid-template-columns:repeat(3,1fr) } } @media (max-width:600px){ .dona-metodo-grid{ grid-template-columns:repeat(2,1fr) } .dona-btn-submit{ font-size:16px; padding:15px } } /* ========================== 4. IMPACTO ========================== */ .dona-impacto-corte-top{ height:42px; margin-bottom:-2px; background:url('img/dona-corte-impacto-top.webp') bottom center / 100% 100% no-repeat; position:relative; z-index:2; pointer-events:none; } .dona-impacto{ position:relative; padding:70px 0 84px; background:var(--verde-dona); color:#fff; text-align:center; } .dona-impacto-corte-bottom{ position:absolute; bottom:0; left:0; width:100%; height:44px; background:url('img/dona-corte-impacto-bottom.webp') top center / 100% 100% no-repeat; pointer-events:none; z-index:5; } .dona-impacto-tag{ display:block; font-size:14px; font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:#FEAB00; margin-bottom:8px; } .dona-impacto h2{ font-size:clamp(26px,3.2vw,38px); font-weight:900; text-transform:uppercase; margin:0 0 46px; } .dona-impacto-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; max-width:900px; margin-inline:auto; } /* Misma máscara --nube-chip que .cifra en Inicio: un ::before recortado en flor, el contenido encima sin recortarse nunca. */ .dona-impacto-card{ position:relative; aspect-ratio:1/.92; display:grid; place-content:center; gap:6px; padding:20px; } .dona-impacto-card::before{ content:""; position:absolute; inset:0; z-index:0; background:#C5E896; -webkit-mask-image:var(--nube-chip); mask-image:var(--nube-chip); -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; } .dona-impacto-card > *{ position:relative; z-index:1 } .dona-impacto-card img{ width:56px; height:auto; margin-inline:auto } .dona-impacto-card b{ display:block; font-size:17px; font-weight:900; color:var(--verde-dona); text-transform:uppercase; line-height:1.15; } .dona-impacto-card small{ display:block; font-size:12px; font-weight:400; color:#fff } /* La tarjeta del medio, más oscura, como el chip azul de en medio en .cifra: mismo criterio de alternar tono para que la fila no se lea plana. */ .dona-impacto-card:nth-child(2)::before{ background:#8FCF4A } .dona-impacto-card:nth-child(2) b{ color:#fff } .dona-impacto-nota{ max-width:56ch; margin:40px auto 0; font-size:14px; font-weight:300; } @media (max-width:600px){ .dona-impacto{ padding:56px 0 48px } .dona-impacto-grid{ grid-template-columns:1fr; max-width:280px; gap:26px } .dona-impacto h2{ margin-bottom:34px } }