/* ========================================================================== TEMA: BABY SHOWER · dirección de arte "DULCE ESPERA" ESCRITO POR estilos.js — no lo edites a mano: cambia la receta y vuelve a correrlo. LA IDEA: una espera tranquila. Cielo de acuarela, nubes, un globo aerostático con su osito y ramas de eucalipto. Todo suave: sin contornos de tinta, con orillas redondas y sombras de algodón. La entrada es un MÓVIL DE CUNA que se mece de verdad cuando lo tocas. TEORÍA DEL COLOR: verde salvia (calma, naturaleza) con crema; el terracota del botón es su complementario cálido. Paleta neutra: sirve para niño o niña. 60 crema · 30 salvia · 10 terracota y mostaza. CONTRASTE MEDIDO (fórmula WCAG, calculado al generar): sobre papel #FFFAF1 → tinta 10.0 · suave 6.0 · marca 6.5 · acento 5.2 sobre bloque #E0EADC → tinta 8.4 · suave 5.1 · marca 5.5 · acento hondo 6.4 sobre fuerte #3E5A47 → blanco 7.6 · etiqueta #F4EEDD 6.6 blanco sobre el botón #A9502A → 5.4 ========================================================================== */ :root{ --papel:#FFFAF1; --papel-hondo:#E0EADC; --tinta:#34433A; --tinta-suave:#566458; --marca:#44624D; --marca-claro:#9DB9A0; --acento:#A9502A; --acento-hondo:#853C1C; --fuerte:#3E5A47; --sol:#F0CF8A; --sombra-color:#C9DCC6; --f-display:"Quicksand", system-ui, sans-serif; --f-texto:"Nunito", system-ui, sans-serif; --radio:24px; --borde:1.5px solid #CFDDCB; } body{ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.13'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M10 95.5Q10 99.9 14.4 99.9Q10 99.9 10 104.3Q10 99.9 5.6 99.9Q10 99.9 10 95.5Z' fill='%23E9B95B' opacity='0.5'/%3E%3Cpath d='M32.1 32.2Q32.1 38.8 38.7 38.8Q32.1 38.8 32.1 45.4Q32.1 38.8 25.5 38.8Q32.1 38.8 32.1 32.2Z' fill='%23E9B95B' opacity='0.5'/%3E%3Cpath d='M173.2 142.5Q173.2 146.6 177.3 146.6Q173.2 146.6 173.2 150.7Q173.2 146.6 169.1 146.6Q173.2 146.6 173.2 142.5Z' fill='%23E9B95B' opacity='0.5'/%3E%3Cpath d='M151.9 125.1Q151.9 128.2 155 128.2Q151.9 128.2 151.9 131.3Q151.9 128.2 148.8 128.2Q151.9 128.2 151.9 125.1Z' fill='%23E9B95B' opacity='0.3'/%3E%3Cpath d='M145.3 32.2Q145.3 36.3 149.4 36.3Q145.3 36.3 145.3 40.4Q145.3 36.3 141.2 36.3Q145.3 36.3 145.3 32.2Z' fill='%23E9B95B' opacity='0.4'/%3E%3Cpath d='M177.8 15Q177.8 18.8 181.6 18.8Q177.8 18.8 177.8 22.6Q177.8 18.8 174 18.8Q177.8 18.8 177.8 15Z' fill='%23E9B95B' opacity='0.5'/%3E%3Cpath d='M23.9 6.1Q23.9 12.1 29.9 12.1Q23.9 12.1 23.9 18.1Q23.9 12.1 17.9 12.1Q23.9 12.1 23.9 6.1Z' fill='%23E9B95B' opacity='0.4'/%3E%3Cpath d='M172.7 63.9Q172.7 68.1 176.9 68.1Q172.7 68.1 172.7 72.3Q172.7 68.1 168.5 68.1Q172.7 68.1 172.7 63.9Z' fill='%23E9B95B' opacity='0.4'/%3E%3Cpath d='M187.6 165.4Q187.6 172.3 194.5 172.3Q187.6 172.3 187.6 179.2Q187.6 172.3 180.7 172.3Q187.6 172.3 187.6 165.4Z' fill='%23E9B95B' opacity='0.4'/%3E%3C/svg%3E") 0 0/200px 200px, var(--papel); } .portada__nombre,.pie__nombre{ font-family:"Dancing Script", "Quicksand", cursive; font-weight:700; letter-spacing:0; } /* ══════════ LA ENTRADA ══════════ */ .entrada{ overflow:hidden; background: radial-gradient(64% 36% at 50% 52%, rgba(255,250,241,.74), transparent 74%), url("fondo.svg") center bottom/cover no-repeat, #FFF6E6; } .entrada::before{ /* destellos que giran despacito detrás del gancho */ content:""; position:absolute; z-index:-1; pointer-events:none; left:50%; top:53%; width:170vmax; height:170vmax; margin:-85vmax 0 0 -85vmax; background:repeating-conic-gradient(rgba(233,185,91,.16) 0 5deg, transparent 5deg 10deg); -webkit-mask-image:radial-gradient(circle, #000 0, rgba(0,0,0,.6) 14%, transparent 34%); mask-image:radial-gradient(circle, #000 0, rgba(0,0,0,.6) 14%, transparent 34%); animation:girarRayos 80s linear infinite; } .entrada--fuera::before{ animation:none; } @keyframes girarRayos{ to{ transform:rotate(360deg); } } .entrada__para{ color:#34433A; font-weight:800; } .entrada__nombre{ background:#fff; color:var(--marca); border:var(--borde); border-radius:999px; padding:.2rem 1.1rem .3rem; box-shadow:0 10px 24px -12px rgba(62,90,71,.45); margin:.35rem 0 .9rem; } .entrada__pista{ background:#fff; color:var(--tinta); border:var(--borde); border-radius:999px; padding:.4rem 1.15rem; box-shadow:0 10px 24px -12px rgba(62,90,71,.45); } .entrada__marcador{ color:var(--tinta); font-weight:800; text-shadow:0 0 4px #fff, 0 0 4px #fff, 0 0 9px #fff, 0 0 14px #fff; } /* El móvil de cuna cuelga de su cordón y se mece (la física la pone el núcleo) */ .cuerda{ width:2px; height:34px; background:#B9A06A; } .gancho.movil{ width:min(66vw,260px); transform-origin:50% -34px; animation:mecerMovil 4.2s ease-in-out infinite; } .gancho.movil .gancho__svg{ filter:drop-shadow(0 14px 16px rgba(62,90,71,.28)); } @keyframes mecerMovil{ 0%,100%{ transform:rotate(-4deg); } 50%{ transform:rotate(4deg); } } .gancho.movil.abre{ animation:subirMovil .9s cubic-bezier(.5,-0.3,.7,.4) forwards; } @keyframes subirMovil{ 0%{ transform:translateY(0); opacity:1; } 25%{ transform:translateY(18px); opacity:1; } 100%{ transform:translateY(-90vh); opacity:0; } } /* ══════════ LA PORTADA ══════════ */ .portada{ isolation:isolate; background: radial-gradient(52% 29% at 50% 43%, rgba(255,250,241,.97) 0%, rgba(255,250,241,.74) 55%, transparent 100%), url("fondo.svg") center bottom/cover no-repeat, #FFF6E6; } .portada__arriba,.portada__anos{ color:var(--tinta); font-weight:600; } .portada__anos{ font-family:var(--f-display); font-size:1.2rem; margin-bottom:.3rem; } .portada__edad{ font-family:var(--f-display); font-weight:700; font-size:clamp(6rem,34vw,11rem); line-height:.86; color:var(--acento); text-shadow:4px 4px 0 #fff, 9px 9px 0 var(--sombra-color); } .portada__nombre{ color:var(--marca); text-shadow:3px 3px 0 #fff; line-height:1.2; font-size:clamp(3rem,15vw,4.8rem); text-shadow:2px 2px 0 #fff; } .portada__fecha{ background:#fff; border:var(--borde); border-radius:18px; box-shadow:0 14px 30px -16px rgba(62,90,71,.45); padding:.6rem 1.25rem; } .portada__fecha .fcol{ color:var(--tinta); } .portada__lugar{ margin-top:1.15rem; background:var(--fuerte); color:#fff; font-weight:700; padding:.42rem 1rem; border-radius:999px; border:2px solid #fff; } .portada__lugar{ font-size:.86rem; } .portada__flecha span{ border-color:#fff; filter:drop-shadow(0 2px 0 #34433A); } /* ══════════ BLOQUES FUERTES — el color hondo del fondo baja y se vuelve sección ══════════ */ .seccion.saludo{ max-width:none; padding-top:4.2rem; padding-bottom:1.8rem; position:relative; } .seccion.saludo > *{ max-width:640px; margin-left:auto; margin-right:auto; position:relative; } .saludo, .momento{ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M10 95.5Q10 99.9 14.4 99.9Q10 99.9 10 104.3Q10 99.9 5.6 99.9Q10 99.9 10 95.5Z' fill='%23F0CF8A' opacity='0.5'/%3E%3Cpath d='M32.1 32.2Q32.1 38.8 38.7 38.8Q32.1 38.8 32.1 45.4Q32.1 38.8 25.5 38.8Q32.1 38.8 32.1 32.2Z' fill='%23F0CF8A' opacity='0.5'/%3E%3Cpath d='M173.2 142.5Q173.2 146.6 177.3 146.6Q173.2 146.6 173.2 150.7Q173.2 146.6 169.1 146.6Q173.2 146.6 173.2 142.5Z' fill='%23F0CF8A' opacity='0.5'/%3E%3Cpath d='M151.9 125.1Q151.9 128.2 155 128.2Q151.9 128.2 151.9 131.3Q151.9 128.2 148.8 128.2Q151.9 128.2 151.9 125.1Z' fill='%23F0CF8A' opacity='0.3'/%3E%3Cpath d='M145.3 32.2Q145.3 36.3 149.4 36.3Q145.3 36.3 145.3 40.4Q145.3 36.3 141.2 36.3Q145.3 36.3 145.3 32.2Z' fill='%23F0CF8A' opacity='0.4'/%3E%3Cpath d='M177.8 15Q177.8 18.8 181.6 18.8Q177.8 18.8 177.8 22.6Q177.8 18.8 174 18.8Q177.8 18.8 177.8 15Z' fill='%23F0CF8A' opacity='0.5'/%3E%3Cpath d='M23.9 6.1Q23.9 12.1 29.9 12.1Q23.9 12.1 23.9 18.1Q23.9 12.1 17.9 12.1Q23.9 12.1 23.9 6.1Z' fill='%23F0CF8A' opacity='0.4'/%3E%3Cpath d='M172.7 63.9Q172.7 68.1 176.9 68.1Q172.7 68.1 172.7 72.3Q172.7 68.1 168.5 68.1Q172.7 68.1 172.7 63.9Z' fill='%23F0CF8A' opacity='0.4'/%3E%3Cpath d='M187.6 165.4Q187.6 172.3 194.5 172.3Q187.6 172.3 187.6 179.2Q187.6 172.3 180.7 172.3Q187.6 172.3 187.6 165.4Z' fill='%23F0CF8A' opacity='0.4'/%3E%3C/svg%3E") 0 0/200px 200px, var(--fuerte); } .saludo::before{ content:""; position:absolute; top:0; left:0; right:0; height:60px; pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60' viewBox='0 0 240 60'%3E%3Cpath d='M30 0V18' stroke='%23C9D6C6' stroke-width='1.4'/%3E%3Cpolygon points='30,18 32.4,23.7 38.6,24.2 33.9,28.3 35.3,34.3 30,31.1 24.7,34.3 26.1,28.3 21.4,24.2 27.6,23.7' fill='%23F0CF8A'/%3E%3Cpath d='M82 0V34' stroke='%23C9D6C6' stroke-width='1.4'/%3E%3Cpolygon points='82,34 84.9,41 92.5,41.6 86.7,46.5 88.5,53.9 82,50 75.5,53.9 77.3,46.5 71.5,41.6 79.1,41' fill='%23F0CF8A'/%3E%3Cpath d='M134 0V12' stroke='%23C9D6C6' stroke-width='1.4'/%3E%3Cpolygon points='134,12 136.1,17.1 141.6,17.5 137.4,21.1 138.7,26.5 134,23.6 129.3,26.5 130.6,21.1 126.4,17.5 131.9,17.1' fill='%23F0CF8A'/%3E%3Cpath d='M186 0V28' stroke='%23C9D6C6' stroke-width='1.4'/%3E%3Cpolygon points='186,28 188.6,34.4 195.5,34.9 190.3,39.4 191.9,46.1 186,42.5 180.1,46.1 181.7,39.4 176.5,34.9 183.4,34.4' fill='%23F0CF8A'/%3E%3C/svg%3E") center top/240px 60px repeat-x; } .saludo .etiqueta{ color:#F4EEDD; } .saludo__nombre{ color:#fff; } .saludo__pases{ background:var(--sol); color:var(--tinta); border:2px solid #fff; } .momento{ padding-top:2.4rem; padding-bottom:4rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M10 95.5Q10 99.9 14.4 99.9Q10 99.9 10 104.3Q10 99.9 5.6 99.9Q10 99.9 10 95.5Z' fill='%23F0CF8A' opacity='0.5'/%3E%3Cpath d='M32.1 32.2Q32.1 38.8 38.7 38.8Q32.1 38.8 32.1 45.4Q32.1 38.8 25.5 38.8Q32.1 38.8 32.1 32.2Z' fill='%23F0CF8A' opacity='0.5'/%3E%3Cpath d='M173.2 142.5Q173.2 146.6 177.3 146.6Q173.2 146.6 173.2 150.7Q173.2 146.6 169.1 146.6Q173.2 146.6 173.2 142.5Z' fill='%23F0CF8A' opacity='0.5'/%3E%3Cpath d='M151.9 125.1Q151.9 128.2 155 128.2Q151.9 128.2 151.9 131.3Q151.9 128.2 148.8 128.2Q151.9 128.2 151.9 125.1Z' fill='%23F0CF8A' opacity='0.3'/%3E%3Cpath d='M145.3 32.2Q145.3 36.3 149.4 36.3Q145.3 36.3 145.3 40.4Q145.3 36.3 141.2 36.3Q145.3 36.3 145.3 32.2Z' fill='%23F0CF8A' opacity='0.4'/%3E%3Cpath d='M177.8 15Q177.8 18.8 181.6 18.8Q177.8 18.8 177.8 22.6Q177.8 18.8 174 18.8Q177.8 18.8 177.8 15Z' fill='%23F0CF8A' opacity='0.5'/%3E%3Cpath d='M23.9 6.1Q23.9 12.1 29.9 12.1Q23.9 12.1 23.9 18.1Q23.9 12.1 17.9 12.1Q23.9 12.1 23.9 6.1Z' fill='%23F0CF8A' opacity='0.4'/%3E%3Cpath d='M172.7 63.9Q172.7 68.1 176.9 68.1Q172.7 68.1 172.7 72.3Q172.7 68.1 168.5 68.1Q172.7 68.1 172.7 63.9Z' fill='%23F0CF8A' opacity='0.4'/%3E%3Cpath d='M187.6 165.4Q187.6 172.3 194.5 172.3Q187.6 172.3 187.6 179.2Q187.6 172.3 180.7 172.3Q187.6 172.3 187.6 165.4Z' fill='%23F0CF8A' opacity='0.4'/%3E%3C/svg%3E") 0 0/200px 200px, radial-gradient(70% 55% at 50% 46%, #5C7E66 0%, transparent 72%), var(--fuerte); } .momento__foto{ position:relative; z-index:1; border:9px solid #fff; border-radius:26px; box-shadow:0 22px 40px -14px rgba(0,0,0,.55); } .momento::after{ /* calcomanía */ content:"con amor"; position:absolute; z-index:2; top:.8rem; right:max(3%, calc(50% - 225px)); width:94px; height:94px; display:grid; place-items:center; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 124 124'%3E%3Cpath d='M118 62L111 71.8L113.7 83.4L103.6 89.8L101.6 101.6L89.8 103.6L83.4 113.7L71.8 111L62 118L52.2 111L40.6 113.7L34.2 103.6L22.4 101.6L20.4 89.8L10.3 83.4L13 71.8L6 62L13 52.2L10.3 40.6L20.4 34.2L22.4 22.4L34.2 20.4L40.6 10.3L52.2 13L62 6L71.8 13L83.4 10.3L89.8 20.4L101.6 22.4L103.6 34.2L113.7 40.6L111 52.2Z' transform='translate(4 4)' fill='%2344624D' opacity='.9'/%3E%3Cpath d='M118 62L111 71.8L113.7 83.4L103.6 89.8L101.6 101.6L89.8 103.6L83.4 113.7L71.8 111L62 118L52.2 111L40.6 113.7L34.2 103.6L22.4 101.6L20.4 89.8L10.3 83.4L13 71.8L6 62L13 52.2L10.3 40.6L20.4 34.2L22.4 22.4L34.2 20.4L40.6 10.3L52.2 13L62 6L71.8 13L83.4 10.3L89.8 20.4L101.6 22.4L103.6 34.2L113.7 40.6L111 52.2Z' fill='%23F0CF8A' stroke='%2344624D' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; font-family:var(--f-display); font-weight:700; font-size:.92rem; color:var(--tinta); transform:rotate(12deg); } /* ══════════ BLOQUES SUAVES (las secciones "alterna") ══════════ */ .seccion.alterna{ position:relative; padding-top:5.4rem; padding-bottom:4rem; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.12'/%3E%3C/svg%3E"), radial-gradient(70% 50% at 0% 0%, rgba(242,184,160,.32), transparent 70%), radial-gradient(70% 55% at 100% 30%, rgba(233,185,91,.24), transparent 70%), linear-gradient(180deg, #EAF0E6 0%, #E0EADC 100%); } .seccion.alterna::before{ content:""; position:absolute; top:0; left:0; right:0; height:60px; pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60' viewBox='0 0 240 60'%3E%3Cpath d='M30 0V18' stroke='%23B9A06A' stroke-width='1.4'/%3E%3Cpolygon points='30,18 32.4,23.7 38.6,24.2 33.9,28.3 35.3,34.3 30,31.1 24.7,34.3 26.1,28.3 21.4,24.2 27.6,23.7' fill='%23E9B95B'/%3E%3Cpath d='M82 0V34' stroke='%23B9A06A' stroke-width='1.4'/%3E%3Cpolygon points='82,34 84.9,41 92.5,41.6 86.7,46.5 88.5,53.9 82,50 75.5,53.9 77.3,46.5 71.5,41.6 79.1,41' fill='%23E9B95B'/%3E%3Cpath d='M134 0V12' stroke='%23B9A06A' stroke-width='1.4'/%3E%3Cpolygon points='134,12 136.1,17.1 141.6,17.5 137.4,21.1 138.7,26.5 134,23.6 129.3,26.5 130.6,21.1 126.4,17.5 131.9,17.1' fill='%23E9B95B'/%3E%3Cpath d='M186 0V28' stroke='%23B9A06A' stroke-width='1.4'/%3E%3Cpolygon points='186,28 188.6,34.4 195.5,34.9 190.3,39.4 191.9,46.1 186,42.5 180.1,46.1 181.7,39.4 176.5,34.9 183.4,34.4' fill='%23E9B95B'/%3E%3C/svg%3E") center top/240px 60px repeat-x; } .seccion.alterna > *{ position:relative; } .seccion.alterna .linea__hora, .seccion.alterna .faq__item summary::after{ color:var(--acento-hondo); } .titulo{ padding-bottom:.7rem; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M3 8C22 2 40 10 60 6s38-5 57 0' fill='none' stroke='%23E9B95B' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center bottom/104px 11px; } /* ══════════ LAS PIEZAS ══════════ */ .cuenta__caja, .tarjeta{ border:var(--borde); border-radius:20px; box-shadow:0 14px 28px -16px rgba(62,90,71,.45), 0 2px 0 #CFDDCB; background:#fff; position:relative; } .cuenta__caja{ } .tarjeta__icono{ width:58px; height:58px; padding:9px; border-radius:50%; background:var(--sol); border:0; color:var(--tinta); } .dedicatoria__texto{ position:relative; background:#fff; border:var(--borde); border-radius:26px; padding:1.3rem 1.2rem; box-shadow:0 14px 28px -16px rgba(62,90,71,.45), 0 2px 0 #CFDDCB; margin-bottom:2.1rem; } .dedicatoria__texto::after{ /* la colita del globo de diálogo */ content:""; position:absolute; left:50%; bottom:-12px; width:22px; height:22px; margin-left:-11px; background:#fff; border-right:var(--borde); border-bottom:var(--borde); transform:rotate(45deg); } .galeria{ position:relative; } .galeria::after{ content:"¡ya casi!"; position:absolute; z-index:2; top:1.3rem; right:.3rem; width:88px; height:88px; display:grid; place-items:center; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 124 124'%3E%3Cpath d='M118 62L111 71.8L113.7 83.4L103.6 89.8L101.6 101.6L89.8 103.6L83.4 113.7L71.8 111L62 118L52.2 111L40.6 113.7L34.2 103.6L22.4 101.6L20.4 89.8L10.3 83.4L13 71.8L6 62L13 52.2L10.3 40.6L20.4 34.2L22.4 22.4L34.2 20.4L40.6 10.3L52.2 13L62 6L71.8 13L83.4 10.3L89.8 20.4L101.6 22.4L103.6 34.2L113.7 40.6L111 52.2Z' transform='translate(4 4)' fill='%2344624D' opacity='.9'/%3E%3Cpath d='M118 62L111 71.8L113.7 83.4L103.6 89.8L101.6 101.6L89.8 103.6L83.4 113.7L71.8 111L62 118L52.2 111L40.6 113.7L34.2 103.6L22.4 101.6L20.4 89.8L10.3 83.4L13 71.8L6 62L13 52.2L10.3 40.6L20.4 34.2L22.4 22.4L34.2 20.4L40.6 10.3L52.2 13L62 6L71.8 13L83.4 10.3L89.8 20.4L101.6 22.4L103.6 34.2L113.7 40.6L111 52.2Z' fill='%23F0CF8A' stroke='%2344624D' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; font-family:var(--f-display); font-weight:700; font-size:.82rem; color:var(--tinta); transform:rotate(-11deg); } .foto img{ border:6px solid #fff; border-radius:20px; box-shadow:0 12px 24px -12px rgba(62,90,71,.45); } .galeria__grid{ gap:1rem; } .foto__hueco{ border:2px dashed var(--marca-claro); background:#fff; border-radius:20px; } .linea__paso::before{ background:#fff; } .mapa{ border:6px solid #fff; box-shadow:0 14px 28px -16px rgba(62,90,71,.45); } .notas__lista li{ background:#fff; border:1.5px solid #CFDDCB; border-left:7px solid var(--acento); box-shadow:0 10px 22px -16px rgba(62,90,71,.45); } .faq__item{ background:#fff; border:1.5px solid #CFDDCB; box-shadow:0 10px 22px -16px rgba(62,90,71,.45); } .boton--linea{ background:#fff; border:var(--borde); color:var(--marca); } /* ══════════ CONFIRMAR — el segundo bloque fuerte: aquí el botón jala el ojo ══════════ (va DESPUÉS de .seccion.alterna: las dos reglas pesan igual y gana la última) */ .seccion.rsvp{ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M10 95.5Q10 99.9 14.4 99.9Q10 99.9 10 104.3Q10 99.9 5.6 99.9Q10 99.9 10 95.5Z' fill='%23F0CF8A' opacity='0.5'/%3E%3Cpath d='M32.1 32.2Q32.1 38.8 38.7 38.8Q32.1 38.8 32.1 45.4Q32.1 38.8 25.5 38.8Q32.1 38.8 32.1 32.2Z' fill='%23F0CF8A' opacity='0.5'/%3E%3Cpath d='M173.2 142.5Q173.2 146.6 177.3 146.6Q173.2 146.6 173.2 150.7Q173.2 146.6 169.1 146.6Q173.2 146.6 173.2 142.5Z' fill='%23F0CF8A' opacity='0.5'/%3E%3Cpath d='M151.9 125.1Q151.9 128.2 155 128.2Q151.9 128.2 151.9 131.3Q151.9 128.2 148.8 128.2Q151.9 128.2 151.9 125.1Z' fill='%23F0CF8A' opacity='0.3'/%3E%3Cpath d='M145.3 32.2Q145.3 36.3 149.4 36.3Q145.3 36.3 145.3 40.4Q145.3 36.3 141.2 36.3Q145.3 36.3 145.3 32.2Z' fill='%23F0CF8A' opacity='0.4'/%3E%3Cpath d='M177.8 15Q177.8 18.8 181.6 18.8Q177.8 18.8 177.8 22.6Q177.8 18.8 174 18.8Q177.8 18.8 177.8 15Z' fill='%23F0CF8A' opacity='0.5'/%3E%3Cpath d='M23.9 6.1Q23.9 12.1 29.9 12.1Q23.9 12.1 23.9 18.1Q23.9 12.1 17.9 12.1Q23.9 12.1 23.9 6.1Z' fill='%23F0CF8A' opacity='0.4'/%3E%3Cpath d='M172.7 63.9Q172.7 68.1 176.9 68.1Q172.7 68.1 172.7 72.3Q172.7 68.1 168.5 68.1Q172.7 68.1 172.7 63.9Z' fill='%23F0CF8A' opacity='0.4'/%3E%3Cpath d='M187.6 165.4Q187.6 172.3 194.5 172.3Q187.6 172.3 187.6 179.2Q187.6 172.3 180.7 172.3Q187.6 172.3 187.6 165.4Z' fill='%23F0CF8A' opacity='0.4'/%3E%3C/svg%3E") 0 0/200px 200px, radial-gradient(80% 45% at 50% 0%, #5C7E66 0%, transparent 70%), var(--fuerte); padding-top:5.4rem; padding-bottom:4rem; } .seccion.rsvp::before{ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60' viewBox='0 0 240 60'%3E%3Cpath d='M30 0V18' stroke='%23C9D6C6' stroke-width='1.4'/%3E%3Cpolygon points='30,18 32.4,23.7 38.6,24.2 33.9,28.3 35.3,34.3 30,31.1 24.7,34.3 26.1,28.3 21.4,24.2 27.6,23.7' fill='%23F0CF8A'/%3E%3Cpath d='M82 0V34' stroke='%23C9D6C6' stroke-width='1.4'/%3E%3Cpolygon points='82,34 84.9,41 92.5,41.6 86.7,46.5 88.5,53.9 82,50 75.5,53.9 77.3,46.5 71.5,41.6 79.1,41' fill='%23F0CF8A'/%3E%3Cpath d='M134 0V12' stroke='%23C9D6C6' stroke-width='1.4'/%3E%3Cpolygon points='134,12 136.1,17.1 141.6,17.5 137.4,21.1 138.7,26.5 134,23.6 129.3,26.5 130.6,21.1 126.4,17.5 131.9,17.1' fill='%23F0CF8A'/%3E%3Cpath d='M186 0V28' stroke='%23C9D6C6' stroke-width='1.4'/%3E%3Cpolygon points='186,28 188.6,34.4 195.5,34.9 190.3,39.4 191.9,46.1 186,42.5 180.1,46.1 181.7,39.4 176.5,34.9 183.4,34.4' fill='%23F0CF8A'/%3E%3C/svg%3E") center top/240px 60px repeat-x; } .rsvp .etiqueta{ color:#F4EEDD; } .rsvp .titulo{ color:#fff; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M3 8C22 2 40 10 60 6s38-5 57 0' fill='none' stroke='%23F0CF8A' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E"); } .rsvp__intro{ color:#F4EEDD; } .rsvp__intro b{ color:var(--sol); } .formulario{ border:var(--borde); box-shadow:0 24px 44px -20px rgba(0,0,0,.5); } /* ══════════ EL PIE ══════════ */ .pie{ overflow:hidden; background: linear-gradient(180deg, var(--fuerte) 0%, rgba(62,90,71,.74) 42%, rgba(40,60,46,.9) 100%), url("fondo.svg") center bottom/cover no-repeat, var(--fuerte); } .portada__arriba{ letter-spacing:.3em; text-transform:uppercase; font-size:.78rem; color:var(--marca); } .pie__nombre{ font-size:2.6rem; } .dedicatoria__texto{ font-style:italic; }