/* ============================================================ PALETA OFICIAL — MANUAL DE MARCA PECES AL AGUA ============================================================ */ :root{ --azul-profundo:#0C3F5C; --azul-medio:#116B96; --azul:#1E9AD6; --azul-claro:#8FD6EE; --espuma:#E9F6FC; --amarillo:#F5C93C; --naranja:#E9601E; --coral:#F07C4A; --verde:#7FBF4D; --morado:#9B6FD0; --rojo:#D6453B; --arena:#E3E4BC; --arena-clara:#F2F3DF; --tinta:#0E3348; --tinta-suave:#41647A; --display:'Fredoka',system-ui,sans-serif; --mano:'Caveat',cursive; --texto:'Nunito',system-ui,sans-serif; --sombra:0 10px 30px rgba(12,63,92,.10); /* Capas de vidrio: profundidad en vez de bloques planos */ --vidrio:rgba(255,255,255,.62); --vidrio-borde:rgba(255,255,255,.85); --vidrio-oscuro:rgba(255,255,255,.1); --vidrio-oscuro-borde:rgba(255,255,255,.22); --brillo-cian:0 0 0 1px rgba(30,154,214,.14),0 18px 44px -12px rgba(30,154,214,.34); --brillo-naranja:0 0 0 1px rgba(233,96,30,.16),0 18px 44px -12px rgba(233,96,30,.42); --sombra-honda:0 24px 54px rgba(12,63,92,.20); --ease:cubic-bezier(.22,.9,.3,1); --rebote:cubic-bezier(.34,1.56,.64,1); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:auto} /* Solo los saltos por ancla se animan; el gesto del dedo queda nativo. */ @media(prefers-reduced-motion:no-preference){ html:focus-within{scroll-behavior:smooth} } .pane[id],section[id]{scroll-margin-top:96px} body{font-family:var(--texto);color:var(--tinta);background:#fff;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--display);line-height:1.12;font-weight:600;letter-spacing:-.01em} img,video{max-width:100%;display:block} a{color:inherit;text-decoration:none} .wrap{width:min(1220px,92vw);margin-inline:auto} .tex::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E")} .tex>*{position:relative;z-index:1} .eyebrow{font-family:var(--display);font-size:.76rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--naranja);display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem} .eyebrow::before{content:'';width:26px;height:2px;border-radius:2px;background:currentColor;flex:none} .eyebrow.azul{color:var(--azul)} .eyebrow.clara{color:var(--amarillo)} .sub-seo{font-size:.95rem;color:var(--tinta-suave);font-weight:700;margin-top:.6rem} h2.tit{font-size:clamp(2.3rem,4.6vw,3.9rem);color:var(--azul-profundo);max-width:18ch;letter-spacing:-.025em;line-height:1.06} .sec-azul h2.tit,.sec-azul h3{color:#fff} .cabecera{max-width:46rem;margin-bottom:3rem} .cabecera p{margin-top:1.15rem;color:var(--tinta-suave);font-size:1.14rem;max-width:44ch} .sec-azul .cabecera p{color:rgba(255,255,255,.85)} .sec{padding:5.5rem 0;position:relative} .sec-espuma{background: radial-gradient(ellipse 80% 60% at 18% 0%,rgba(143,214,238,.42),transparent 62%), radial-gradient(ellipse 70% 60% at 92% 78%,rgba(245,201,60,.2),transparent 60%), linear-gradient(175deg,#F4FBFE 0%,var(--espuma) 55%,#DFF1FA 100%)} .sec-arena{background: radial-gradient(ellipse 76% 60% at 82% 4%,rgba(240,124,74,.22),transparent 62%), radial-gradient(ellipse 70% 60% at 8% 92%,rgba(143,214,238,.32),transparent 60%), linear-gradient(172deg,#FBFBF2 0%,var(--arena-clara) 60%,#E8E9CE 100%)} .sec-azul{background:linear-gradient(168deg,var(--azul) 0%,var(--azul-medio) 55%,var(--azul-profundo) 100%);color:#fff} /* ---------- BOTONES con squash ---------- */ .btn{position:relative;display:inline-flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:600;font-size:1.04rem; padding:1rem 2.1rem;border-radius:999px;border:0;cursor:pointer;white-space:nowrap;overflow:hidden;isolation:isolate; transition:transform .34s var(--rebote),box-shadow .34s var(--ease),filter .3s} /* Brillo que barre al pasar el mouse: da materialidad, no es un rectangulo de color */ .btn::before{content:'';position:absolute;inset:0;z-index:-1; background:linear-gradient(120deg,transparent 12%,rgba(255,255,255,.42) 46%,transparent 72%); transform:translateX(-130%);transition:transform .72s var(--ease)} .btn:hover::before{transform:translateX(130%)} /* Burbujas que ascienden del boton primario: el CTA pertenece a esta marca */ .btn-burbuja .bb{position:absolute;bottom:6px;border-radius:50%;pointer-events:none;z-index:1; background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95),rgba(255,255,255,.3) 55%,transparent 72%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);opacity:0} .btn-burbuja:hover .bb{animation:bbsube 1.5s ease-out infinite} @keyframes bbsube{0%{opacity:0;transform:translateY(0) scale(.5)}18%{opacity:.95}100%{opacity:0;transform:translateY(-52px) scale(1.25)}} /* Realce superior: simula volumen sin sombras falsas */ .btn::after{content:'';position:absolute;inset:0 0 auto 0;height:48%;z-index:-1;border-radius:999px 999px 40% 40%/999px 999px 100% 100%; background:linear-gradient(180deg,rgba(255,255,255,.28),transparent)} .btn:hover{transform:translateY(-4px) scale(1.04)} .btn:active{transform:translateY(-1px) scale(.95)} .btn-primary{background:linear-gradient(165deg,#F5772F,var(--naranja) 60%,#CF4E12);color:#fff;box-shadow:var(--brillo-naranja)} .btn-primary:hover{box-shadow:0 0 0 1px rgba(233,96,30,.2),0 26px 56px -14px rgba(233,96,30,.55)} .btn-azul{background:linear-gradient(165deg,#3FADE2,var(--azul) 58%,#127AAE);color:#fff;box-shadow:var(--brillo-cian)} .btn-azul:hover{box-shadow:0 0 0 1px rgba(30,154,214,.22),0 26px 56px -14px rgba(30,154,214,.5)} .btn-blanco{background:var(--vidrio);color:var(--azul-profundo);box-shadow:inset 0 0 0 1px var(--vidrio-borde),0 16px 40px -12px rgba(12,63,92,.3); -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6)} .btn-ghost{background:rgba(255,255,255,.4);color:var(--azul-profundo);box-shadow:inset 0 0 0 1.5px rgba(30,154,214,.42); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .btn-ghost:hover{background:var(--espuma)} .btn{justify-content:center;align-self:flex-start} .btn .fl{transition:transform .3s var(--rebote)} .btn:hover .fl{transform:translateX(5px)} .progreso{position:fixed;top:0;left:0;height:4px;width:0;z-index:99; background:linear-gradient(90deg,var(--azul-claro),var(--amarillo));box-shadow:0 0 12px rgba(245,201,60,.6)} /* ---------- NAV ---------- */ .nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);border-bottom:1px solid rgba(30,154,214,.14);transition:box-shadow .3s} .nav.scrolled{box-shadow:0 8px 26px rgba(12,63,92,.10)} .nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:.75rem 0;gap:1.2rem} .nav .marca{justify-self:start} .nav .menu{justify-self:center} .nav .nav-cta{justify-self:end} .marca{display:flex;align-items:center;gap:.6rem} .marca .logo-img{height:46px;width:auto;flex:none;transition:transform .5s var(--rebote)} .marca:hover .logo-img{transform:scale(1.06) rotate(-3deg)} .foot .marca .logo-pie{height:52px} .marca b{font-family:var(--display);font-size:1.24rem;line-height:1;color:var(--azul);font-weight:600} .marca b span{display:block} .menu{display:flex;align-items:center;gap:1.5rem;justify-content:center} .menu .btn{padding:.72rem 1.4rem;font-size:.96rem} .menu>a{font-family:var(--display);font-weight:500;font-size:1rem;color:var(--azul-profundo);position:relative;padding:.25rem 0} .menu>a::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:0;border-radius:3px;background:var(--amarillo);transition:width .3s var(--ease)} .menu>a:hover::after{width:100%} .menu .btn::after{display:none} .redes-cap{display:flex;gap:.1rem;background:var(--espuma);border-radius:999px;padding:.28rem .4rem;margin-left:-.4rem} .redes-cap a{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--azul-medio);transition:.3s var(--rebote)} .redes-cap a:hover{background:#fff;color:var(--naranja);transform:translateY(-3px) scale(1.15)} .redes-cap a::after{display:none} .burger{display:none;position:relative;z-index:130;background:none;border:0;cursor:pointer;padding:.4rem} .burger span{display:block;width:26px;height:3px;border-radius:3px;background:var(--azul-profundo);margin:5px 0;transition:.3s var(--ease)} body.menu-abierto .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)} body.menu-abierto .burger span:nth-child(2){opacity:0} body.menu-abierto .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} /* ---------- HERO: el logo manda ---------- */ .hero-logo{width:min(620px,80vw);height:auto;display:block;margin:0 auto 1.4rem; filter:drop-shadow(0 10px 30px rgba(4,32,50,.7)) drop-shadow(0 2px 8px rgba(4,32,50,.5)); opacity:0;transform:translateY(22px) scale(.94); animation:entraLogo 1s var(--rebote) .15s forwards} @keyframes entraLogo{to{opacity:1;transform:none}} .hero-lugar{display:block;text-align:center;color:var(--amarillo); font-family:var(--display);font-weight:600;font-size:.9rem;letter-spacing:.16em; text-transform:uppercase;margin-top:1rem} .hero-cta{margin-top:.2rem} @media(max-width:860px){ .hero-logo{width:min(360px,86vw);margin-bottom:1rem} .hero-lugar{font-size:.74rem;letter-spacing:.1em;margin-top:.8rem} } /* ---------- NAV: se ancla en vidrio al bajar, con el logo reducido y centrado ---------- */ .nav{transition:box-shadow .35s var(--ease),background .35s var(--ease),padding .35s var(--ease)} .nav .logo-img{transition:height .35s var(--ease),opacity .35s var(--ease)} .nav.scrolled{background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7); box-shadow:0 6px 30px -12px rgba(12,63,92,.3);border-bottom-color:rgba(255,255,255,.5)} .nav.scrolled .wrap{padding:.45rem 0} .nav.scrolled .logo-img{height:36px} /* En la portada el logo del nav se oculta mientras el hero lo muestra grande */ .home .nav .marca{opacity:0;pointer-events:none;transition:opacity .4s var(--ease)} .home .nav.scrolled .marca{opacity:1;pointer-events:auto} /* ---------- HERO ---------- */ .hero{position:relative;min-height:90vh;display:flex;align-items:center;padding:4.5rem 0 9rem;overflow:hidden} .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden; background:linear-gradient(155deg,#33ACE4 0%,#1E9AD6 50%,#116B96 100%)} .hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* Halos que respiran: el color vive aqui, no en rectangulos */ .halo{position:absolute;border-radius:50%;filter:blur(70px);z-index:1;pointer-events:none;mix-blend-mode:screen;animation:respirar 15s ease-in-out infinite alternate} .halo.a{width:44vw;height:44vw;left:-12%;top:-16%;background:rgba(245,201,60,.34)} .halo.b{width:38vw;height:38vw;right:-8%;bottom:-18%;background:rgba(240,124,74,.32);animation-delay:-6s} .halo.c{width:34vw;height:34vw;left:42%;top:52%;background:rgba(143,214,238,.4);animation-delay:-11s} @keyframes respirar{to{transform:translate3d(5%,-6%,0) scale(1.18)}} /* Velo de lectura: sin esto el titular blanco compite con el video. Mas denso a la izquierda, donde vive el texto. */ .hero-bg::after{content:'';position:absolute;inset:0; background: radial-gradient(ellipse 78% 68% at 50% 44%,rgba(30,154,214,.2),rgba(17,107,150,.46) 72%,rgba(12,63,92,.66) 100%), linear-gradient(180deg,rgba(9,52,78,.42) 0%,transparent 30%,transparent 66%,rgba(9,52,78,.6) 100%)} /* En movil el texto ocupa todo el ancho: el velo se vuelve vertical */ @media(max-width:860px){.hero-bg::after{background:linear-gradient(180deg,rgba(9,52,78,.44) 0%,rgba(17,107,150,.56) 45%,rgba(9,52,78,.76) 100%)}} .hero{display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:7rem 0 2.5rem} .hero-centro{position:relative;z-index:3;text-align:center;display:flex;flex-direction:column;align-items:center;flex:1;justify-content:center} .hero .lead{margin:1.4rem auto 0;max-width:44ch;text-align:center;font-size:1.16rem} .hero .cta{justify-content:center;margin-top:2.4rem} .baja{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:.4rem;margin-top:3rem;color:rgba(255,255,255,.8); font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800} .baja i{display:block;width:1px;height:38px;background:linear-gradient(transparent,#fff);animation:bajar 2.4s ease-in-out infinite} .baja:hover{color:#fff} .hero h1{font-size:clamp(3.2rem,9vw,7.5rem);color:#fff;max-width:13ch;letter-spacing:-.045em;line-height:.96; text-shadow:0 8px 60px rgba(4,32,50,.55)} .hero h1 .w{display:inline-block;opacity:0;transform:translateY(28px) scale(.86)} .hero h1 .w.in{animation:entraPalabra .62s var(--rebote) forwards} @keyframes entraPalabra{to{opacity:1;transform:none}} .hero h1 .c1{color:var(--amarillo)} .hero h1 .c2{color:var(--azul-claro)} .hero h1 .c3{color:var(--coral)} .hero .seo{color:rgba(255,255,255,.9);font-weight:700;font-size:.98rem;margin-top:.9rem} .hero .lead{margin-top:1.2rem;font-size:1.08rem;color:rgba(255,255,255,.88);max-width:33rem} .hero .cta{display:flex;gap:.9rem;margin-top:2.1rem;flex-wrap:wrap} /* Reflejo de vidrio sobre el video: lo convierte en objeto, no en recuadro */ /* datos con contador */ .datos{position:relative;z-index:3;margin-top:3rem} .datos .caja{background:linear-gradient(150deg,rgba(255,255,255,.22),rgba(255,255,255,.08));border:0; -webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);border-radius:24px; box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.22),0 24px 54px -20px rgba(4,32,50,.6); display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));overflow:hidden} /* min-width:0 es lo que impide que un item de grid empuje la caja y se salga */ .datos .it{min-width:0;padding:1.25rem .85rem;text-align:center;color:#fff;border-right:1px solid rgba(255,255,255,.18);transition:background .3s} .datos .it:last-child{border-right:0} .datos .it:hover{background:rgba(255,255,255,.1)} .datos .it b{display:block;font-family:var(--display);font-size:1.55rem;font-weight:600;color:var(--amarillo);white-space:nowrap;margin-bottom:.15rem} .datos .it span{display:block;font-size:.7rem;line-height:1.3;letter-spacing:.02em;text-transform:uppercase;opacity:.9;font-weight:700; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .burbuja{position:absolute;border-radius:50%;cursor:pointer;z-index:2; background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9),rgba(255,255,255,.16) 46%,rgba(255,255,255,.05) 72%); border:1px solid rgba(255,255,255,.5);animation:subir linear infinite} @keyframes subir{0%{transform:translateY(0);opacity:0}10%{opacity:.8}90%{opacity:.6}100%{transform:translateY(-118vh) translateX(30px);opacity:0}} .burbuja.pop{animation:pop .5s var(--rebote) forwards} @keyframes pop{60%{transform:scale(1.5)}to{transform:scale(2.4);opacity:0}} .ola-abs{position:absolute;left:0;right:0;bottom:-1px;z-index:4;width:100%;display:block} .ola-abs path{animation:ondear 9s ease-in-out infinite alternate} @keyframes ondear{to{d:path("M0 78c180 22 360 22 540 -2s360 -26 540 -2 240 28 360 18v34H0z")}} /* ---------- REVEAL ---------- */ .rv{opacity:0;transform:translateY(30px) scale(.97);transition:opacity .7s var(--ease),transform .7s var(--rebote)} .rv.in{opacity:1!important;transform:none} .bf{filter:blur(8px);opacity:0;transform:translateY(18px);transition:filter 1s var(--ease),opacity 1s var(--ease),transform 1s var(--ease)} .bf.in{filter:blur(0);opacity:1;transform:none} /* ---------- TAPA DE SUBPAGINA ---------- */ /* ---------- TAPA DE SUBPAGINA: viva, no un bloque de color ---------- */ .tapa{position:relative;min-height:62vh;display:flex;align-items:center;overflow:hidden;padding:7.5rem 0 5rem} .tapa-fondo{position:absolute;inset:0;z-index:0;background:linear-gradient(155deg,#33ACE4,var(--azul-medio) 55%,var(--azul-profundo))} .tapa-fondo video{width:100%;height:100%;object-fit:cover;opacity:.82} /* Velo mucho mas claro: el movimiento del video se tiene que ver. Solo se oscurece la franja donde vive el texto. */ .tapa-fondo::after{content:'';position:absolute;inset:0; background:linear-gradient(100deg,rgba(9,52,78,.72) 0%,rgba(17,107,150,.42) 46%,rgba(30,154,214,.16) 100%), linear-gradient(180deg,rgba(4,32,50,.4) 0%,transparent 34%,transparent 68%,rgba(9,52,78,.34) 100%)} .tapa .wrap{position:relative;z-index:3} .tapa .eyebrow{color:var(--amarillo)} .tapa h1{font-size:clamp(2.3rem,5.6vw,4.4rem);color:#fff;max-width:17ch;letter-spacing:-.035em;line-height:1.03; text-shadow:0 8px 50px rgba(4,32,50,.5)} .tapa p{margin-top:1.2rem;color:rgba(255,255,255,.9);font-size:1.1rem;max-width:46ch} .tapa-baja{display:inline-flex;align-items:center;gap:.5rem;margin-top:2rem;color:rgba(255,255,255,.85); font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800} .tapa-baja i{display:block;width:26px;height:26px;border-radius:50%;position:relative; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)} .tapa-baja i::after{content:'';position:absolute;left:50%;top:8px;width:6px;height:6px;margin-left:-3px; border-right:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(45deg);animation:bajar 2.2s ease-in-out infinite} .tapa-baja:hover{color:#fff} .tapa-ola{position:absolute;left:0;right:0;bottom:-1px;z-index:4;width:100%;display:block} /* Burbujas clicables tambien aqui: cada pagina invita a jugar */ .tapa .burbuja{z-index:2} @media(max-width:860px){ .tapa{min-height:46vh;padding:6rem 0 3.4rem} .tapa p{font-size:.98rem} .tapa-baja{margin-top:1.4rem} } /* ---------- MENU: pagina activa ---------- */ .menu>a.activo{color:var(--azul)} .menu>a.activo::after{width:100%;background:var(--azul)} /* ---------- CONCEPTO: texto a la izquierda, foto protagonista a la derecha ---------- */ .concepto-txt h2{max-width:16ch} .concepto-txt>p{margin-top:1.1rem;color:var(--tinta-suave);font-size:1.12rem;line-height:1.65;max-width:44ch} .concepto-txt .sub-seo{margin-top:1rem;font-size:.92rem;color:var(--azul-medio);opacity:.85;font-weight:700} .concepto-txt .btn{margin-top:1.8rem} /* Brillo de vidrio: convierte la foto en objeto, no en recuadro */ /* Marco de color que respira detras */ @media(max-width:860px){ .concepto-txt{text-align:center} .concepto-txt>p{font-size:1rem} .concepto-txt .btn{width:100%;justify-content:center} } /* ---------- CONCEPTO: entrada conceptual de la foto ---------- La foto no aparece: emerge. Sube, se revela con una mascara que se abre desde abajo y el marco de color se enciende despues. */ /* ---------- CTA vivo: late, brilla y empuja ---------- */ .cta-vivo{position:relative;animation:latir-cta 3.4s ease-in-out infinite} @keyframes latir-cta{ 0%,100%{box-shadow:var(--brillo-naranja)} 50%{box-shadow:0 0 0 1px rgba(233,96,30,.24),0 22px 50px -12px rgba(233,96,30,.7)}} .cta-vivo::after{border-radius:999px} /* Aro que sale del boton como una onda */ .cta-vivo .onda{position:absolute;inset:0;border-radius:999px;z-index:-2; box-shadow:0 0 0 0 rgba(233,96,30,.55);animation:onda-cta 3.4s ease-out infinite} @keyframes onda-cta{0%{box-shadow:0 0 0 0 rgba(233,96,30,.5)}70%{box-shadow:0 0 0 18px rgba(233,96,30,0)}100%{box-shadow:0 0 0 0 rgba(233,96,30,0)}} .cta-vivo:hover{animation-play-state:paused} @media(max-width:860px){ .cta-vivo{animation:none} .cta-vivo .onda{animation:none} } /* ---------- CONCEPTO: fondo con profundidad ---------- El fondo plano hacia que la seccion se sintiera vacia. Ahora hay capas: un degradado hondo, dos halos que respiran y una onda que separa del bloque anterior. */ #concepto{position:relative;overflow:hidden;isolation:isolate;padding-top:6rem; background:linear-gradient(168deg,#EAF6FC 0%,var(--espuma) 40%,#D9EEF9 100%)} /* Degradado de enlace con el hero: quita el corte seco */ #concepto::after{content:'';position:absolute;left:0;right:0;top:0;height:180px;z-index:-1;pointer-events:none; background:linear-gradient(180deg,rgba(12,63,92,.16) 0%,rgba(30,154,214,.06) 45%,transparent 100%)} #concepto .halo-c{position:absolute;border-radius:50%;filter:blur(70px);z-index:-1;pointer-events:none;will-change:transform;transform:translateZ(0);contain:paint} #concepto .halo-c.a{width:48vw;height:48vw;left:-14%;top:8%;background:rgba(143,214,238,.42)} #concepto .halo-c.b{width:42vw;height:42vw;right:-10%;bottom:-12%;background:rgba(30,154,214,.28)} /* Trama de puntos muy sutil: da textura sin ensuciar */ #concepto::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.5; background-image:radial-gradient(circle,rgba(30,154,214,.16) 1px,transparent 1px); background-size:26px 26px; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000,transparent 78%); mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000,transparent 78%)} @media(max-width:860px){ #concepto .halo-c{display:none} .concepto-txt .eyebrow,.concepto-txt h2,.concepto-txt p,.concepto-txt .btn{transform:translateX(-22px)} } /* ---------- Titular del concepto: entra palabra por palabra ---------- */ .concepto-txt h2 .linea-1,.concepto-txt h2 .linea-2{white-space:normal} .concepto-txt h2 .pal{display:inline-block;opacity:0;transform:translateY(24px) rotate(-2deg); transition:opacity .7s var(--ease),transform .9s cubic-bezier(.19,1,.22,1)} .concepto-txt.in h2 .pal{opacity:1;transform:none} /* "océano" se subraya con un trazo que crece */ /* ---------- CTA: menos latido, mas materia ---------- */ .cta-vivo{animation:none;overflow:visible} .cta-vivo .onda{animation:onda-cta 4.2s ease-out infinite} .cta-vivo:hover .onda{animation-play-state:paused} /* Punto verde de disponibilidad: informa, no solo decora */ .cta-vivo .punto-hoy{width:9px;height:9px;border-radius:50%;background:#5BE28B;flex:none; box-shadow:0 0 0 0 rgba(91,226,139,.8);animation:pulso-hoy 2.6s infinite} @keyframes pulso-hoy{70%{box-shadow:0 0 0 8px rgba(91,226,139,0)}100%{box-shadow:0 0 0 0 rgba(91,226,139,0)}} /* ---------- CONCEPTO: solo texto, centrado y con presencia ---------- */ #concepto{text-align:center} .concepto-txt{max-width:56rem;margin-inline:auto;display:flex;flex-direction:column;align-items:center} .concepto-txt .eyebrow{justify-content:center} .concepto-txt .eyebrow::before{display:none} .concepto-txt h2{max-width:22ch;font-size:clamp(2.4rem,5.4vw,4.4rem);letter-spacing:-.036em;line-height:1.04} .concepto-txt>p{margin-top:1.7rem;color:var(--tinta-suave);font-size:clamp(1.08rem,1.5vw,1.3rem); line-height:1.6;max-width:38ch} .concepto-txt .sub-seo{margin-top:1.2rem;font-size:.94rem;color:var(--azul-medio);opacity:.9; font-weight:700;max-width:40ch} .concepto-txt .btn{margin-top:2.4rem;align-self:center} #concepto{padding:8rem 0} /* Entrada: sube con inercia larga, no desde el lado */ .concepto-txt .eyebrow,.concepto-txt>p,.concepto-txt .btn{ opacity:0;transform:translateY(26px) !important; transition:opacity .9s var(--ease),transform 1.1s cubic-bezier(.19,1,.22,1)} .concepto-txt.in .eyebrow{opacity:1;transform:none !important;transition-delay:.05s} .concepto-txt.in>p{opacity:1;transform:none !important;transition-delay:.84s} .concepto-txt.in .sub-seo{transition-delay:.96s} .concepto-txt.in .btn{opacity:1;transform:none !important;transition-delay:1.08s} /* El titular se compone palabra por palabra, subiendo y desenfocando */ .concepto-txt h2 .linea-1,.concepto-txt h2 .linea-2{white-space:normal} .concepto-txt h2 .pal{display:inline-block;opacity:0; transform:translateY(38px) scale(.94);filter:blur(6px); transition:opacity .8s var(--ease),transform 1s cubic-bezier(.19,1,.22,1),filter .8s var(--ease)} .concepto-txt.in h2 .pal{opacity:1;transform:none;filter:blur(0)} /* Escalonado: las palabras viven dentro de dos lineas, asi que se calcula por linea y por posicion dentro de ella. */ .concepto-txt.in h2 .linea-1 .pal:nth-child(1){transition-delay:.12s} .concepto-txt.in h2 .linea-1 .pal:nth-child(2){transition-delay:.17s} .concepto-txt.in h2 .linea-1 .pal:nth-child(3){transition-delay:.22s} .concepto-txt.in h2 .linea-1 .pal:nth-child(4){transition-delay:.27s} .concepto-txt.in h2 .linea-1 .pal:nth-child(5){transition-delay:.32s} .concepto-txt.in h2 .linea-1 .pal:nth-child(6){transition-delay:.37s} .concepto-txt.in h2 .linea-2 .pal:nth-child(1){transition-delay:.46s} .concepto-txt.in h2 .linea-2 .pal:nth-child(2){transition-delay:.53s} .concepto-txt.in h2 .linea-2 .pal:nth-child(3){transition-delay:.6s} .concepto-txt.in h2 .linea-2 .pal:nth-child(4){transition-delay:.65s} .concepto-txt.in h2 .linea-2 .pal:nth-child(5){transition-delay:.7s} @media(max-width:860px){ #concepto{padding:4rem 0} .concepto-txt{max-width:none} .concepto-txt h2{font-size:2rem;max-width:100%} .concepto-txt>p{font-size:1.02rem;margin-top:1.1rem} .concepto-txt .btn{width:100%;justify-content:center;margin-top:1.6rem} .concepto-txt h2 .pal{transform:translateY(22px) scale(.96);filter:blur(4px)} } /* ---------- IDENTIDAD TIPOGRAFICA DE LA SECCION ---------- El texto se veia de procesador porque todo tenia el mismo peso, el mismo color y el mismo tamano. Aqui se le da jerarquia. */ .concepto-txt h2{display:flex;flex-direction:column;gap:.1em} /* Primera linea: mas pequena, en peso medio, casi una entrada */ .concepto-txt h2 .linea-1{display:block;font-weight:500;font-size:.58em; color:var(--azul-medio);letter-spacing:-.01em;opacity:.95} /* Segunda linea: el golpe. Grande, peso alto, azul profundo */ .concepto-txt h2 .linea-2{display:block;font-weight:700;letter-spacing:-.04em;color:var(--azul-profundo)} /* "refugio" se distingue solo por color. Seis intentos de trazo detras o debajo terminaron compitiendo con el CTA naranja. */ .concepto-txt h2 .marca-oceano{color:var(--naranja);letter-spacing:-.03em;white-space:nowrap} /* Parrafos: dos niveles, no un bloque plano */ .concepto-txt>p{margin-top:2rem;color:var(--tinta);font-size:clamp(1.18rem,1.75vw,1.5rem); line-height:1.52;max-width:52ch;font-weight:600} /* El enfasis usa la manuscrita, no negrita: se siente de marca */ .concepto-txt p em{font-style:normal;font-weight:800;color:var(--azul)} /* El kicker deja de ser una etiqueta suelta */ .concepto-txt .eyebrow{position:relative;padding-bottom:.7rem;margin-bottom:.4rem} .concepto-txt .eyebrow::after{content:'';position:absolute;left:50%;bottom:0; width:34px;height:3px;margin-left:-17px;border-radius:3px; background:linear-gradient(90deg,var(--amarillo),var(--coral))} /* El subtitulo SEO se separa con una linea fina, como un pie de foto */ .concepto-txt .sub-seo{margin-top:1.7rem;padding-top:1.3rem;position:relative;max-width:52ch; font-size:.92rem;color:var(--azul-medio);opacity:.8;font-weight:700;letter-spacing:.01em} .concepto-txt .sub-seo::before{content:'';position:absolute;left:50%;top:0; width:56px;height:1px;margin-left:-28px;background:rgba(12,63,92,.18)} @media(max-width:860px){ .concepto-txt h2 .linea-1{font-size:.66em} .concepto-txt>p{font-size:1.06rem;max-width:100%;margin-top:1.4rem;line-height:1.55} } /* ---------- TITULAR DE LA TAPA: entra palabra por palabra ---------- */ .tapa-tit .pal{display:inline-block;opacity:0; transform:translateY(44px) rotate(2deg) scale(.9);filter:blur(9px); transition:opacity .85s var(--ease),transform 1.05s cubic-bezier(.19,1,.22,1),filter .85s var(--ease)} .tapa.lista .tapa-tit .pal{opacity:1;transform:none;filter:blur(0)} .tapa.lista .tapa-tit .pal:nth-child(1){transition-delay:.18s} .tapa.lista .tapa-tit .pal:nth-child(2){transition-delay:.26s} .tapa.lista .tapa-tit .pal:nth-child(3){transition-delay:.34s} .tapa.lista .tapa-tit .pal:nth-child(4){transition-delay:.42s} .tapa.lista .tapa-tit .pal:nth-child(5){transition-delay:.5s} .tapa.lista .tapa-tit .pal:nth-child(6){transition-delay:.58s} .tapa.lista .tapa-tit .pal:nth-child(7){transition-delay:.66s} .tapa.lista .tapa-tit .pal:nth-child(n+8){transition-delay:.74s} /* El kicker abre y el resto sigue */ .tapa .eyebrow,.tapa p,.tapa-baja{opacity:0;transform:translateY(22px); transition:opacity .8s var(--ease),transform .9s cubic-bezier(.19,1,.22,1)} .tapa.lista .eyebrow{opacity:1;transform:none;transition-delay:.06s} .tapa.lista p{opacity:1;transform:none;transition-delay:.82s} .tapa.lista .tapa-baja{opacity:1;transform:none;transition-delay:.98s} /* El fondo se asienta: arranca ampliado y vuelve a su sitio */ /* El video no depende de la clase que pone el JS: se asienta solo desde el primer fotograma, sin esperar a la entrada del texto. */ .tapa-fondo video{animation:asienta-video 2.6s cubic-bezier(.19,1,.22,1) both} @keyframes asienta-video{from{transform:scale(1.1)}to{transform:none}} @media(max-width:860px){ .tapa-tit .pal{transform:translateY(26px) rotate(1.4deg) scale(.94);filter:blur(6px)} .tapa-fondo video{animation-duration:2s} } /* ---------- VITRINA DE EXPERIENCIAS EN LA PORTADA ---------- */ .vitrina{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem} .vit{display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:rgba(255,255,255,.74); -webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6); box-shadow:inset 0 0 0 1px var(--vidrio-borde),0 18px 42px -16px rgba(12,63,92,.28); transition:transform .45s var(--rebote),box-shadow .4s var(--ease)} .vit:hover{transform:translateY(-8px);box-shadow:inset 0 0 0 1px #fff,0 30px 62px -18px rgba(12,63,92,.36)} .vit-media{position:relative;display:block;aspect-ratio:16/11;overflow:hidden;background:var(--azul-profundo)} .vit-media video{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)} .vit:hover .vit-media video{transform:scale(1.07)} .vit-txt{display:block;padding:1.1rem 1.2rem 1.3rem} .vit-txt b{display:block;font-family:var(--display);font-size:1.14rem;font-weight:600;color:var(--azul-profundo);line-height:1.2} .vit-txt i{display:block;margin-top:.3rem;font-style:normal;font-size:.86rem;color:var(--tinta-suave);font-weight:700} @media(max-width:1080px){.vitrina{grid-template-columns:repeat(2,1fr)}} @media(max-width:860px){ .vitrina{display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory; margin-inline:-4vw;padding:.2rem 4vw 1rem;scrollbar-width:none} .vitrina::-webkit-scrollbar{display:none} .vit{flex:0 0 auto;width:74vw;max-width:290px;scroll-snap-align:center} .vit:hover{transform:none} } /* ---------- VITRINA: criatura, edad y entrada escalonada ---------- */ .vit-media{position:relative} .vit-edad{position:absolute;left:12px;top:12px;z-index:3;background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--azul-profundo); font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase; padding:.3rem .7rem;border-radius:999px;box-shadow:0 6px 16px -6px rgba(12,63,92,.4)} .vit-bicho{position:absolute;right:10px;bottom:-20px;z-index:4;width:56px;height:42px;display:block;cursor:pointer; filter:drop-shadow(0 8px 16px rgba(12,63,92,.35));transition:transform .5s var(--rebote)} .vit-bicho svg{width:100%;height:100%;display:block;animation:nadita 5s ease-in-out infinite} .vit:hover .vit-bicho{transform:translateY(-6px) scale(1.12) rotate(-7deg)} .vit-txt{padding-top:1.6rem} /* Entrada escalonada: la vitrina se arma sola en cascada */ .vitrina .vit{opacity:0;transform:translateY(26px) scale(.96); transition:opacity .6s var(--ease),transform .6s var(--rebote),box-shadow .4s var(--ease)} .vitrina .vit.in{opacity:1;transform:none} .vitrina .vit:nth-child(1).in{transition-delay:0s} .vitrina .vit:nth-child(2).in{transition-delay:.07s} .vitrina .vit:nth-child(3).in{transition-delay:.14s} .vitrina .vit:nth-child(4).in{transition-delay:.21s} .vitrina .vit:nth-child(5).in{transition-delay:.28s} .vitrina .vit:nth-child(6).in{transition-delay:.35s} @media(max-width:860px){.vit-bicho{width:46px;height:34px;right:8px;bottom:-16px}.vit-txt{padding-top:1.4rem}} /* ---------- POR QUE ---------- */ .porque{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center} .porque .foto{border-radius:30px;aspect-ratio:1/1;box-shadow:var(--sombra);display:grid;place-items:center;text-align:center;color:#fff;padding:2rem; background:linear-gradient(150deg,var(--amarillo),var(--coral))} .ph{font-family:var(--display);font-size:.88rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;opacity:.95;line-height:1.7} .ph small{display:block;font-family:var(--texto);text-transform:none;letter-spacing:0;font-size:.8rem;opacity:.82;margin-top:.5rem;font-weight:600} /* ---------- EXPERIENCIAS ---------- */ .exp-layout{display:grid;grid-template-columns:340px 1fr;gap:1.8rem;align-items:start} .selector{display:grid;gap:.7rem;position:sticky;top:100px} .sel{position:relative;display:flex;align-items:center;gap:1rem;text-align:left;width:100%;cursor:pointer;overflow:hidden; background:var(--vidrio);border:0;border-radius:22px;padding:1rem 1.15rem;font:inherit;isolation:isolate; -webkit-backdrop-filter:blur(16px) saturate(1.7);backdrop-filter:blur(16px) saturate(1.7); box-shadow:inset 0 0 0 1px var(--vidrio-borde),0 12px 30px -10px rgba(12,63,92,.22); transition:transform .4s var(--rebote),box-shadow .4s var(--ease),background .4s} /* Halo de color que aparece por detras del vidrio al activarse */ .sel::before{content:'';position:absolute;inset:-40% -10% auto -10%;height:150%;z-index:-1;opacity:0; background:radial-gradient(ellipse at 18% 50%,rgba(30,154,214,.5),transparent 62%); transition:opacity .45s var(--ease)} .sel:hover{transform:translateX(8px) scale(1.015);box-shadow:inset 0 0 0 1px #fff,0 20px 44px -12px rgba(12,63,92,.3)} .sel:hover::before{opacity:.5} .sel.on{background:rgba(255,255,255,.82);box-shadow:inset 0 0 0 1.5px rgba(30,154,214,.55),var(--brillo-cian)} .sel.on::before{opacity:1} .sel .ic svg{animation:nadita 4.6s ease-in-out infinite} .sel:nth-child(2) .ic svg{animation-delay:-.9s} .sel:nth-child(3) .ic svg{animation-delay:-1.8s} .sel:nth-child(4) .ic svg{animation-delay:-2.7s} .sel:nth-child(5) .ic svg{animation-delay:-3.6s} @keyframes nadita{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-3px) rotate(-4deg)}65%{transform:translateY(2px) rotate(3deg)}} .sel.on .ic svg{animation-duration:2.4s} /* Aureola que late detras del icono activo: el icono deja de ser un adorno */ .sel .ic::after{content:'';position:absolute;inset:-6px;border-radius:22px;z-index:-1;opacity:0; background:radial-gradient(circle,rgba(30,154,214,.55),transparent 68%);transition:opacity .45s var(--ease)} .sel.on .ic::after{opacity:1;animation:latir-ic 2.6s ease-in-out infinite} @keyframes latir-ic{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.16);opacity:1}} /* Estela de burbujitas fijas detras del icono activo */ .sel.on .ic{transform:scale(1.06)} .burbujita{position:absolute;border-radius:50%;pointer-events:none;z-index:4; background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95),rgba(143,214,238,.5) 60%,transparent 74%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);animation:bbpop 1.1s ease-out forwards} @keyframes bbpop{0%{opacity:0;transform:translate(0,0) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-46px) scale(1.3)}} .sel .ic{position:relative;width:54px;height:54px;flex:none;display:grid;place-items:center;border-radius:17px;padding:9px; background:linear-gradient(155deg,rgba(255,255,255,.9),rgba(233,246,252,.55)); box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(30,154,214,.16),0 6px 16px -6px rgba(12,63,92,.28); transition:transform .5s var(--rebote),box-shadow .4s var(--ease)} .sel.on .ic{box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(30,154,214,.4),0 10px 24px -6px rgba(30,154,214,.55)} /* REGLA DEFENSIVA: un sin width/height toma 300x150 por defecto y rompe cualquier contenedor. Todo SVG inline se dimensiona por su caja. */ .ic svg,.criatura{width:100%;height:100%;display:block} .sel:hover .ic{transform:scale(1.16) rotate(-9deg)} .sel.on .ic{animation:saltito .55s var(--rebote)} @keyframes saltito{0%{transform:scale(1)}40%{transform:scale(1.3) rotate(-14deg)}70%{transform:scale(.94) rotate(7deg)}100%{transform:none}} .sel b{display:block;font-family:var(--display);font-size:1.04rem;font-weight:600;color:var(--azul-profundo);line-height:1.25} .sel span.sub{font-size:.82rem;color:var(--tinta-suave);font-weight:700} .sel.oculto{opacity:.3;pointer-events:none;filter:grayscale(.75)} .panel{background:rgba(255,255,255,.72);border-radius:30px;overflow:hidden; -webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7); box-shadow:inset 0 0 0 1px var(--vidrio-borde),0 34px 70px -22px rgba(12,63,92,.34); display:grid;grid-template-columns:320px 1fr;min-height:460px} .pane{display:none} .pane.on{display:contents} .stories{position:relative;background:var(--azul-profundo);aspect-ratio:13/18;overflow:hidden;cursor:pointer} .stories .slide{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease);display:grid;place-items:center;text-align:center;color:#fff;padding:1.4rem} .stories .slide.on{opacity:1} .stories .slide video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0} .stories .slide.g1{background:linear-gradient(160deg,var(--azul),var(--azul-medio))} .stories .slide.g2{background:linear-gradient(160deg,var(--coral),var(--naranja))} .stories .slide.g3{background:linear-gradient(160deg,var(--verde),#3F8A32)} .stories .slide.g4{background:linear-gradient(160deg,var(--morado),#5C3B92)} .segs{position:absolute;top:11px;left:11px;right:11px;display:flex;gap:4px;z-index:5} .seg{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.42);overflow:hidden} .seg .f{display:block;height:100%;width:0;background:#fff} .seg.done .f{width:100%} .seg.run .f{animation:segfill var(--ms) linear forwards} @keyframes segfill{from{width:0}to{width:100%}} .stories.pausa .seg.run .f{animation-play-state:paused} .marca-ia{position:absolute;left:10px;bottom:10px;z-index:6;background:rgba(12,63,92,.72);color:#fff; font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.26rem .6rem;border-radius:999px} .cumple-video{position:relative} .stories .hint{position:absolute;bottom:12px;right:12px;z-index:5;background:rgba(255,255,255,.92); color:var(--azul-profundo);font-size:.68rem;font-weight:800;padding:.28rem .6rem;border-radius:999px;opacity:0;transition:.3s} .stories.pausa .hint{opacity:1} .info{padding:2.3rem 2.3rem 2.1rem;display:flex;flex-direction:column;gap:.7rem} .info .tag{align-self:flex-start;font-size:.71rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--azul-medio);background:var(--espuma);padding:.35rem .85rem;border-radius:999px} .info h3{font-size:clamp(1.7rem,2.4vw,2.2rem);color:var(--azul-profundo);letter-spacing:-.02em;line-height:1.1} .info .seo-mini{font-size:.85rem;color:var(--tinta-suave);font-weight:700} .info p{color:var(--tinta-suave);font-size:1rem} .chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.3rem} .chip{background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(12,63,92,.1);border:0;border-radius:999px;padding:.4rem .9rem;font-size:.82rem;font-weight:700;color:var(--azul-profundo);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); transition:transform .3s var(--rebote)} .chip:hover{transform:translateY(-3px) rotate(-2deg)} .info .tarifa{margin-top:auto;padding-top:1.2rem;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px dashed rgba(12,63,92,.16)} .info .tarifa .v{font-family:var(--display);font-size:1.85rem;font-weight:600;color:var(--naranja);line-height:1.05} .info .tarifa .v small{display:block;font-family:var(--texto);font-size:.73rem;color:var(--tinta-suave);font-weight:800;letter-spacing:.05em;text-transform:uppercase} .edades{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:2rem} .edades .lb{font-family:var(--display);font-weight:600;color:var(--azul-profundo);margin-right:.3rem} .eda{border:0;background:rgba(255,255,255,.62);border-radius:999px;padding:.55rem 1.25rem; -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); box-shadow:inset 0 0 0 1.5px rgba(30,154,214,.28),0 4px 14px -6px rgba(12,63,92,.2); font-family:var(--display);font-weight:500;font-size:.97rem;color:var(--azul-profundo);cursor:pointer; transition:transform .34s var(--rebote),box-shadow .34s var(--ease),background .34s} .eda:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1.5px rgba(30,154,214,.5),0 10px 24px -8px rgba(30,154,214,.4)} .eda.on{background:linear-gradient(165deg,#3FADE2,var(--azul) 60%,#127AAE);color:#fff;transform:translateY(-3px) scale(1.04); box-shadow:var(--brillo-cian)} .pend{font-size:.8rem;color:#8A6A00;background:#FFF6DA;border:1px dashed var(--amarillo);border-radius:999px;padding:.3rem .8rem;font-weight:700} /* ---------- PARA TI ---------- */ .parati{display:grid;grid-template-columns:.95fr 1.05fr;gap:4rem;align-items:center} .beneficios{display:grid;gap:1rem;margin-top:1.8rem} .ben{display:flex;gap:1rem;align-items:flex-start} .ben .ic{width:50px;height:50px;flex:none;display:grid;place-items:center;transition:transform .5s var(--rebote)} .ben:hover .ic{transform:scale(1.18) rotate(8deg)} .ben h4{font-size:1.05rem;margin-bottom:.15rem;color:#fff} .ben p{font-size:.94rem;color:rgba(255,255,255,.82)} .marco-video{border-radius:30px;overflow:hidden;aspect-ratio:13/16;border:5px solid rgba(255,255,255,.42);box-shadow:var(--sombra-honda);background:var(--azul-profundo)} .marco-video video{width:100%;height:100%;object-fit:cover} /* ---------- CUMPLEANOS ---------- */ .planes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem} .plan{background:rgba(255,255,255,.74);border-radius:28px;padding:2.2rem 1.9rem 2.3rem; -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6); box-shadow:inset 0 0 0 1px var(--vidrio-borde),0 22px 50px -18px rgba(12,63,92,.3); display:flex;flex-direction:column;gap:.7rem;position:relative;border:2px solid transparent; animation:sway 7s ease-in-out infinite alternate;transition:transform .4s var(--rebote),box-shadow .4s} .plan:nth-child(2){animation-delay:-2.3s} .plan:nth-child(3){animation-delay:-4.6s} @keyframes sway{from{transform:rotate(-.7deg)}to{transform:rotate(.7deg)}} .plan:hover{animation-play-state:paused;transform:translateY(-10px) rotate(0) scale(1.02);box-shadow:var(--sombra-honda)} .plan.destacado{border-color:transparent;box-shadow:inset 0 0 0 2px rgba(245,201,60,.85),0 26px 60px -18px rgba(245,201,60,.5)} .plan .flag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--amarillo);color:var(--azul-profundo); font-family:var(--display);font-weight:600;font-size:.78rem;padding:.3rem 1rem;border-radius:999px;white-space:nowrap} .plan .meta{font-size:.71rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--azul-medio); background:var(--espuma);padding:.35rem .8rem;border-radius:999px;align-self:flex-start} .plan h3{font-size:1.5rem;color:var(--azul-profundo)} .plan .claim{font-family:var(--mano);font-size:1.45rem;color:var(--naranja);line-height:1} .plan .desc{font-size:.93rem;color:var(--tinta-suave);flex:1} .plan .val{font-family:var(--display);font-size:1.9rem;color:var(--azul-profundo);font-weight:600;line-height:1.1} .plan .val small{display:block;font-family:var(--texto);font-size:.73rem;color:var(--tinta-suave);font-weight:800;letter-spacing:.05em;text-transform:uppercase} .cumple-video{border-radius:26px;overflow:hidden;aspect-ratio:13/18;box-shadow:var(--sombra-honda);background:var(--azul-profundo);border:5px solid #fff} .cumple-video video{width:100%;height:100%;object-fit:cover} .cumple-video img{width:100%;height:100%;object-fit:cover} .cumple-grid{display:grid;grid-template-columns:300px 1fr;gap:2.5rem;align-items:center;margin-bottom:3.5rem} /* ---------- COMO JUGAMOS: rejilla ordenada, no piezas sueltas ---------- */ .jugamos{display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center;margin-bottom:3.2rem} .jugamos .texto p{margin-top:1.1rem;color:var(--tinta-suave);font-size:1.08rem;max-width:42ch} .jugamos .media{position:relative;border-radius:30px;overflow:hidden;aspect-ratio:4/3;background:var(--azul-profundo); box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 34px 76px -24px rgba(4,32,50,.55); transform:perspective(1400px) rotateY(-5deg);transition:transform .9s var(--ease)} .jugamos .media:hover{transform:perspective(1400px) rotateY(0) translateY(-6px)} .jugamos .media video{width:100%;height:100%;object-fit:cover} .jugamos .media::after{content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(125deg,rgba(255,255,255,.2) 0%,transparent 36%,transparent 72%,rgba(143,214,238,.14) 100%)} .jugamos .sello{position:absolute;left:14px;bottom:14px;z-index:3;background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--azul-profundo); font-family:var(--display);font-weight:600;font-size:.78rem;padding:.4rem .85rem;border-radius:999px} @media(max-width:860px){ .jugamos{grid-template-columns:1fr;gap:1.6rem;margin-bottom:2rem} .jugamos .media{aspect-ratio:16/11;transform:none} .jugamos .texto p{font-size:.98rem} } /* ============================================================ NUESTRA INSPIRACION — EL DESCENSO ------------------------------------------------------------ La seccion no describe la filosofia Reggio: la ejecuta. Bajar es descender; los cuatro hallazgos se pasan a distintas velocidades; el visitante elige cual abre y en que orden, y la bitacora le devuelve su propio recorrido. Todo se calcula desde la posicion real del scroll (--p): nada corre solo. El unico bucle continuo es el aliento de las burbujas. ============================================================ */ .hondo{position:relative;height:210vh} .escena,.lienzo,.titular,.frase,.ficha,.bitacora{min-width:0;max-width:100%} .frase .pal{max-width:100%} .escena{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden; background:linear-gradient(170deg,#3FB2E4 0%,var(--azul) 22%,var(--azul-medio) 58%,var(--azul-profundo) 100%)} /* Cuanto más bajas, menos luz llega */ .oscuridad{position:absolute;inset:0;pointer-events:none;z-index:3; background:linear-gradient(180deg,rgba(4,32,47,.14) 0%,rgba(4,32,47,.86) 100%); opacity:var(--p,0)} /* La luz de la superficie se cierra a medida que te alejas de ella */ .superficie{position:absolute;left:50%;top:-12%;width:140%;height:88%;z-index:1;pointer-events:none; transform:translateX(-50%) scaleX(calc(1 - var(--p,0) * .8));transform-origin:50% 0; opacity:calc(1 - var(--p,0) * .92); background:conic-gradient(from 168deg at 50% -8%, transparent 0deg,rgba(255,255,255,.16) 4deg,transparent 8deg, transparent 10deg,rgba(255,255,255,.10) 13deg,transparent 17deg, transparent 20deg,rgba(255,255,255,.18) 23deg,transparent 28deg); filter:blur(18px)} /* Partículas: velocidad ligada a la velocidad del scroll */ .motas{position:absolute;inset:0;z-index:2;pointer-events:none;display:block;width:100%;height:100%} /* El entorno responde a donde estás mirando */ .linterna{position:absolute;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;z-index:2; pointer-events:none;border-radius:50%;opacity:.5; background:radial-gradient(circle,rgba(255,255,255,.20),rgba(255,255,255,.06) 42%,transparent 68%); transform:translate3d(var(--lx,50vw),var(--ly,50vh),0)} .lienzo{position:absolute;inset:0;z-index:4} /* ---------- La frase emerge con tu scroll ---------- */ /* Rotulo, frase y firma se mueven como una sola pieza */ .titular{position:absolute;left:50%;top:var(--frase-top,26%);transform:translate(-50%,-50%); width:min(58rem,90vw);text-align:center} .hondo .eyebrow{justify-content:center;color:var(--amarillo);margin-bottom:1.1rem} .hondo .eyebrow::before{display:none} .frase{position:relative;margin:0; font-family:var(--display);font-weight:600;color:#fff; font-size:clamp(1.9rem,4.6vw,3.7rem);line-height:1.08;letter-spacing:-.035em; text-shadow:0 6px 40px rgba(4,32,50,.45)} .frase .pal{display:inline-block;will-change:transform,opacity} .frase .oceano{color:var(--amarillo)} .frase-firma{margin-top:.9rem;font-family:var(--mano);font-weight:500; font-size:clamp(1rem,1.6vw,1.35rem);letter-spacing:0;color:rgba(255,255,255,.72)} /* ---------- Los cuatro hallazgos: burbujas de verdad ---------- Una burbuja no es un circulo blanco: es una pelicula transparente. Por eso el centro deja pasar el agua (backdrop-filter), el borde concentra la luz, y el iris aparece solo en el reborde. */ .hallazgo{position:absolute;left:var(--x);top:var(--y); /* --dy: te los vas pasando. --sc: se acercan y se alejan. Las tres propiedades (translate, scale, transform) se componen sin pisarse, asi el aliento no pelea con el desplazamiento. */ transform:translate(-50%,calc(-50% + var(--dy,0px)));scale:var(--sc,1);will-change:transform; width:108px;height:108px;padding:0;border:0;background:none;cursor:pointer;z-index:5; display:flex;flex-direction:column;align-items:center;justify-content:center; border-radius:50%;overflow:visible;font:inherit;color:#fff;text-align:center; opacity:.42; transition:width .68s var(--rebote),height .68s var(--rebote), opacity .5s var(--ease),padding .68s var(--rebote); animation:alienta 6.4s ease-in-out infinite,tiembla 12s ease-in-out infinite} /* La pelicula: transparente por dentro, luz acumulada en el borde */ .hallazgo::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-2; background: radial-gradient(circle at 50% 50%,transparent 52%,rgba(255,255,255,.09) 73%, rgba(255,255,255,.40) 91%,rgba(255,255,255,.88) 99%,transparent 100%), radial-gradient(circle at 30% 24%,rgba(255,255,255,.34),rgba(255,255,255,.05) 44%,transparent 60%); -webkit-backdrop-filter:blur(4px) saturate(1.6);backdrop-filter:blur(4px) saturate(1.6); box-shadow:inset 0 0 24px rgba(255,255,255,.24),0 16px 42px -14px rgba(4,32,50,.72); transition:box-shadow .5s var(--ease)} @supports not (backdrop-filter:blur(1px)){ .hallazgo::before{background: radial-gradient(circle at 50% 50%,rgba(255,255,255,.10) 52%,rgba(255,255,255,.22) 73%, rgba(255,255,255,.5) 91%,rgba(255,255,255,.9) 99%,transparent 100%), radial-gradient(circle at 30% 24%,rgba(255,255,255,.4),rgba(255,255,255,.08) 44%,transparent 60%)} } /* Tinte interno: solo al abrirse, y solo abajo, donde va el texto */ .hallazgo::after{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0; background:linear-gradient(180deg,transparent 22%,rgba(5,36,56,.30) 58%,rgba(5,36,56,.58) 100%); transition:opacity .45s var(--ease)} .hallazgo.abierto::after{opacity:1} /* Iris: el arcoiris del jabon vive en el reborde, nunca en el centro */ .iris{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1; opacity:.55;mix-blend-mode:screen; background:conic-gradient(from 200deg, rgba(143,214,238,.85),rgba(245,201,60,.7) 18%,rgba(240,124,74,.6) 34%, rgba(155,111,208,.7) 52%,rgba(127,191,77,.6) 68%,rgba(143,214,238,.85) 88%,rgba(255,255,255,.7)); -webkit-mask-image:radial-gradient(circle,transparent 68%,#000 88%,transparent 100%); mask-image:radial-gradient(circle,transparent 68%,#000 88%,transparent 100%); animation:gira 26s linear infinite} @keyframes gira{to{rotate:360deg}} /* Los dos reflejos especulares */ .brillos{position:absolute;inset:0;border-radius:inherit;pointer-events:none; background: radial-gradient(ellipse 20% 12% at 28% 20%,rgba(255,255,255,.95),transparent 70%), radial-gradient(ellipse 9% 6% at 71% 76%,rgba(255,255,255,.6),transparent 70%); filter:blur(.4px)} .hallazgo:focus-visible{outline:3px solid var(--amarillo);outline-offset:6px} /* Cerca de tu atencion: despierta */ .hallazgo.cerca{opacity:.82} /* Ya lo descubriste: se queda encendida */ .hallazgo.visto{opacity:.95} .hallazgo.visto::before{box-shadow:inset 0 0 28px rgba(255,255,255,.3), 0 16px 42px -14px rgba(4,32,50,.72),0 0 0 2px rgba(245,201,60,.45)} /* Abierta: sigue siendo burbuja, solo que grande */ .hallazgo.abierto{width:min(21.5rem,86vw);height:min(21.5rem,86vw);padding:1.4rem;opacity:1;z-index:7; animation-play-state:paused,running} .hallazgo.abierto::before{box-shadow:inset 0 0 46px rgba(255,255,255,.3), 0 32px 70px -18px rgba(4,32,50,.8)} /* La criatura vive dentro de la burbuja */ .bicho{width:var(--ib);height:var(--ib);flex:none;display:block;translate:0 var(--iy,0px); filter:drop-shadow(0 7px 16px rgba(4,32,50,.5)); transition:width .68s var(--rebote),height .68s var(--rebote),translate .5s var(--ease)} .bicho img{width:100%;height:100%;object-fit:contain;display:block} .hallazgo.abierto .bicho{width:var(--ibo);height:var(--ibo);translate:0 0} .ficha{display:block;opacity:0;max-height:0;overflow:hidden; transition:opacity .34s var(--ease),max-height .5s var(--ease)} .hallazgo.abierto .ficha{opacity:1;max-height:10rem;transition-delay:.24s,0s} .ficha b{display:block;margin-top:.7rem;font-family:var(--display);font-weight:600; font-size:1.14rem;line-height:1.22;color:#fff;text-shadow:0 2px 14px rgba(4,32,50,.7)} .ficha i{display:block;margin-top:.45rem;font-style:normal;font-size:.95rem;line-height:1.5; color:rgba(255,255,255,.9);max-width:21ch;margin-inline:auto; text-shadow:0 2px 12px rgba(4,32,50,.7)} /* Aliento y temblor: ninguna burbuja sincronizada con otra, y ninguna perfectamente redonda, porque las de verdad no lo son */ @keyframes alienta{0%,100%{translate:0 0}50%{translate:0 -12px}} @keyframes tiembla{ 0%,100%{border-radius:50% 50% 50% 50% / 50% 50% 50% 50%} 28%{border-radius:54% 46% 49% 51% / 47% 53% 47% 53%} 55%{border-radius:47% 53% 54% 46% / 53% 48% 52% 47%} 80%{border-radius:52% 48% 46% 54% / 49% 46% 54% 51%}} .hallazgo:nth-of-type(2){animation-duration:7.8s,14s;animation-delay:-2.1s,-4s} .hallazgo:nth-of-type(3){animation-duration:5.6s,10s;animation-delay:-3.4s,-7s} .hallazgo:nth-of-type(4){animation-duration:8.6s,16s;animation-delay:-1.2s,-2s} /* ---------- La nota de observación ---------- */ .bitacora{position:absolute;left:50%;bottom:4.5vh;transform:translateX(-50%);z-index:6; width:min(34rem,90vw);text-align:center;pointer-events:none; transition:bottom .8s var(--ease) .35s} .bitacora.arriba{bottom:calc(5vh + 11rem)} .bitacora .linea{font-family:var(--mano);font-weight:600;color:var(--amarillo); font-size:clamp(1.15rem,2.3vw,1.55rem);line-height:1.35;min-height:2.4em; text-shadow:0 2px 18px rgba(4,32,50,.6); transition:opacity .4s var(--ease),transform .4s var(--ease)} .bitacora .linea.cambia{opacity:0;transform:translateY(7px)} .rastro{display:flex;justify-content:center;gap:.4rem;margin-top:.7rem} .rastro span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28); transition:background .4s var(--ease),transform .4s var(--rebote)} .rastro span.on{background:var(--amarillo);transform:scale(1.5)} /* El cierre no es una pastilla blanca pegada al fondo: es la quinta burbuja, y emerge desde abajo cuando ya descubriste las cuatro. OJO: NO se puede llamar .cierre. Esa clase ya es la seccion final de la portada, y reusarla la dejaba con opacity:0 y pointer-events:none. */ .hondo .emerger{position:absolute;left:50%;bottom:5vh;z-index:8; transform:translate(-50%,52px);opacity:0;pointer-events:none; transition:opacity .8s var(--ease) .35s,transform 1s var(--rebote) .35s} .emerger.on{opacity:1;transform:translate(-50%,0);pointer-events:auto} .emerger a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:.28rem;width:154px;height:154px;border-radius:50%;color:#fff;text-align:center; font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.16; text-shadow:0 2px 14px rgba(4,32,50,.75); background: radial-gradient(circle at 50% 50%,transparent 50%,rgba(255,255,255,.10) 71%, rgba(245,201,60,.55) 90%,rgba(255,255,255,.92) 99%,transparent 100%), radial-gradient(circle at 30% 24%,rgba(255,255,255,.34),rgba(255,255,255,.05) 44%,transparent 60%); -webkit-backdrop-filter:blur(4px) saturate(1.6);backdrop-filter:blur(4px) saturate(1.6); box-shadow:inset 0 0 28px rgba(255,255,255,.26),0 20px 48px -14px rgba(4,32,50,.78); animation:alienta 6s ease-in-out infinite,tiembla 13s ease-in-out infinite} .emerger a .fl{font-size:1.15rem;opacity:.85;transition:transform .4s var(--rebote)} .emerger a:hover .fl{transform:translateX(5px)} .emerger a:hover{box-shadow:inset 0 0 34px rgba(255,255,255,.34),0 26px 56px -14px rgba(4,32,50,.82)} .emerger a:focus-visible{outline:3px solid var(--amarillo);outline-offset:7px} @supports not (backdrop-filter:blur(1px)){ .emerger a{background: radial-gradient(circle at 50% 50%,rgba(6,44,68,.5) 50%,rgba(255,255,255,.2) 71%, rgba(245,201,60,.6) 90%,rgba(255,255,255,.95) 99%,transparent 100%), radial-gradient(circle at 30% 24%,rgba(255,255,255,.4),rgba(255,255,255,.08) 44%,transparent 60%)} } /* Indicio inicial */ .indicio{position:absolute;left:50%;bottom:4.5vh;transform:translateX(-50%);z-index:6; display:flex;flex-direction:column;align-items:center;gap:.5rem; font-family:var(--display);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase; color:rgba(255,255,255,.75);transition:opacity .5s var(--ease)} .indicio i{width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.7),transparent); animation:cae 2.1s ease-in-out infinite} @keyframes cae{0%{transform:scaleY(.2);transform-origin:top;opacity:0} 40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);transform-origin:bottom;opacity:0}} .indicio.fuera{opacity:0;pointer-events:none} /* ---------- Móvil ---------- */ @media(max-width:720px){ .hondo{height:230vh} .titular{width:92vw} .frase{font-size:clamp(1.85rem,8.4vw,2.4rem);line-height:1.08} .frase::before{left:-.2em;top:-.16em;font-size:.55em} .frase::after{font-size:.55em} .hallazgo{width:88px;height:88px} .bicho{width:calc(var(--ib) * .82);height:calc(var(--ib) * .82)} .hallazgo.abierto{left:50%;top:50%;width:min(20rem,88vw);height:min(20rem,88vw)} .hallazgo.abierto .bicho{width:calc(var(--ibo) * .86);height:calc(var(--ibo) * .86)} .linterna{width:400px;height:400px;margin:-200px 0 0 -200px;opacity:.34} .bitacora{bottom:3vh;width:92vw} /* No sube: la burbuja abierta se centra, no hay nada que esquivar. El calc de la 836 es de escritorio y hay que anularlo aqui. */ .bitacora.arriba{bottom:calc(3vh + 4.6rem)} .emerger{bottom:3vh} /* Salida sintetica: la burbuja de 132px se comia el sitio de la bitacora. El
se anula para que la pastilla quede en una sola linea. */ .emerger a{width:auto;height:auto;border-radius:999px;flex-direction:row;gap:.5rem; padding:.72rem 1.35rem;font-size:.95rem;background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.42);box-shadow:none} .emerger a br{display:none} .ficha i{font-size:.9rem;max-width:22ch} } /* ---------- Sin movimiento: la sección se aplana y se lee ---------- */ .plano .hondo{height:auto} .plano .escena{position:static;height:auto;padding:5rem 0 4rem} .plano .lienzo{position:static} .plano .titular{position:static;transform:none;width:min(58rem,90vw);margin:0 auto 3rem;opacity:1} .plano .frase .pal{opacity:1!important;transform:none!important;filter:none!important} .plano .hallazgo{position:static;transform:none;translate:none;scale:none; width:min(21rem,90vw);height:auto;border-radius:34px;padding:1.6rem 1.4rem; opacity:1;margin:0 auto 1.2rem;animation:none} .plano .hallazgo::after{opacity:1} .plano .iris{display:none} .plano .bicho{width:70px;height:70px;translate:none} .plano .ficha{opacity:1;max-height:none} .plano .motas,.plano .linterna,.plano .superficie,.plano .oscuridad,.plano .indicio{display:none} .plano .bitacora,.plano .emerger{position:static;transform:none;opacity:1;margin:2rem auto 0} /* ---------- DINAMISMO EN LAS DOS SECCIONES DE TEXTO ---------- */ /* Burbujas que suben de fondo. El acta pide fondo estatico DETRAS DEL TEXTO: estas viven en los margenes laterales y no cruzan la zona de lectura. */ .burbujeo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .burbujeo span{position:absolute;bottom:-60px;border-radius:50%; background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),rgba(255,255,255,.15) 48%,transparent 72%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); animation:sube-b linear infinite} @keyframes sube-b{0%{transform:translateY(0) translateX(0);opacity:0} 12%{opacity:.7}88%{opacity:.5} 100%{transform:translateY(-120vh) translateX(26px);opacity:0}} /* En la seccion de concepto: burbujas laterales tambien */ #concepto .burbujeo span{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95),rgba(143,214,238,.35) 50%,transparent 74%); box-shadow:inset 0 0 0 1px rgba(30,154,214,.22)} @media(max-width:860px){ .burbujeo{display:none} } /* ---------- TRES CATEGORIAS: la foto manda ---------- */ /* Velo de color por categoria: identifica sin tapar la foto */ /* Entrada escalonada */ @media(max-width:640px){ } /* ---------- CATEGORIAS: dinamismo real ---------- La foto se desplaza a distinta velocidad que la tarjeta mientras haces scroll. Eso da profundidad de verdad, no un hover suelto. */ /* Borde de color que se dibuja al entrar */ /* El titulo sube al pasar el mouse y arrastra la descripcion */ /* La etiqueta se despega de la foto */ @media(max-width:640px){ /* En movil el hover no existe: el movimiento lo da el propio carrusel. La tarjeta centrada crece y las vecinas se atenuan. */ } /* ---------- CATEGORIAS: piezas inmersivas, no tarjetas de plantilla ---------- La foto ocupa todo y el texto vive encima. Es un sitio de experiencias: la imagen tiene que llevar el peso, no un bloque blanco debajo. */ /* Velo que oscurece solo abajo: la decoracion se ve, el texto se lee */ /* Etiqueta con punto que late: informa que esta activo */ /* Texto sobre la foto */ /* Entrada: se revelan desde abajo con mascara */ @media(max-width:640px){ /* Sin hover: la tarjeta centrada muestra su descripcion */ } /* ---------- ZIGZAG DE CATEGORIAS ---------- Alterna foto e informacion en cada fila. Crea progresion narrativa y da a cada categoria su propio momento, sin pedir leer un bloque largo. Funciona porque las fotos tienen valor informativo, no decorativo. */ .filas{display:flex;flex-direction:column;gap:7rem} .fila{display:grid;grid-template-columns:1.32fr .88fr;gap:3.6rem;align-items:center} .fila:nth-child(even){grid-template-columns:.88fr 1.32fr} .fila:nth-child(even) .fila-media{order:2} .fila:nth-child(even) .fila-txt{order:1} .fila-media{position:relative} .fila-marco{position:relative;display:block;border-radius:32px;overflow:hidden; background:var(--azul-profundo); box-shadow:0 34px 76px -28px rgba(4,32,50,.6),inset 0 0 0 1px rgba(255,255,255,.5)} .fila-marco img{position:absolute;left:0;top:-34px;width:100%;height:calc(100% + 68px); object-fit:cover;object-position:center;display:block; transform:translateY(var(--par,0px));transition:transform 1.2s cubic-bezier(.19,1,.22,1)} .fila-marco{position:relative} /* Marco de color detras, distinto por categoria */ .fila-media::before{content:'';position:absolute;inset:-16px;z-index:-1;border-radius:44px;opacity:.42;filter:blur(26px)} .f-1 .fila-media::before{background:linear-gradient(140deg,var(--azul-claro),var(--azul))} .f-2 .fila-media::before{background:linear-gradient(140deg,var(--amarillo),var(--naranja))} .f-3 .fila-media::before{background:linear-gradient(140deg,#A8DC7E,var(--verde))} .fila-eti{position:absolute;left:16px;top:16px;z-index:3;display:inline-flex;align-items:center;gap:0; background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); color:var(--azul-profundo);font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase; padding:.45rem 1rem;border-radius:999px;box-shadow:0 8px 22px -8px rgba(4,32,50,.45); opacity:calc((var(--p) - .28) * 3);transform:translateY(calc((1 - var(--p)) * -18px))} .fila-txt h3{font-family:var(--display);font-weight:600;font-size:clamp(2rem,3.6vw,3rem); color:var(--azul-profundo);letter-spacing:-.03em;line-height:1.06} .fila-txt>p{margin-top:.9rem;color:var(--tinta-suave);font-size:1.08rem;line-height:1.55;max-width:38ch} /* Desglose: lo que contiene cada categoria */ .fila-items{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.6rem} .fila-items li{position:relative;display:flex;align-items:baseline;gap:.7rem; padding:.7rem .9rem;border-radius:16px;background:rgba(255,255,255,.7); box-shadow:inset 0 0 0 1px rgba(12,63,92,.08); opacity:0;transform:translateX(-18px); transition:opacity .7s var(--ease),transform .95s cubic-bezier(.19,1,.22,1), background .3s,box-shadow .3s} .fila-items li:hover{background:#fff;box-shadow:inset 0 0 0 1px rgba(30,154,214,.28),0 10px 24px -10px rgba(12,63,92,.25);padding-left:1.2rem} .it-p{width:9px;height:9px;border-radius:50%;flex:none;position:relative;top:-1px; background:radial-gradient(circle at 32% 28%,#fff,var(--azul-claro) 50%,var(--azul)); box-shadow:0 2px 6px -2px rgba(30,154,214,.7)} .f-2 .it-p{background:radial-gradient(circle at 32% 28%,#fff,var(--amarillo) 50%,var(--naranja)); box-shadow:0 2px 6px -2px rgba(233,96,30,.7)} .f-3 .it-p{background:radial-gradient(circle at 32% 28%,#fff,#A8DC7E 50%,var(--verde)); box-shadow:0 2px 6px -2px rgba(127,191,77,.7)} .fila-items b{font-family:var(--display);font-weight:600;font-size:1rem;color:var(--azul-profundo);flex:none} .fila-items i{font-style:normal;font-size:.86rem;color:var(--tinta-suave);margin-left:auto;text-align:right} .fila-cta{margin-top:1.8rem} .f-2 .fila-cta{background:linear-gradient(165deg,#F5772F,var(--naranja) 60%,#CF4E12);box-shadow:var(--brillo-naranja)} /* Entrada: la foto llega del lado que le toca */ .fila-txt h3,.fila-txt>p,.fila-cta{opacity:0;transform:translateY(22px); transition:opacity .8s var(--ease),transform .9s cubic-bezier(.19,1,.22,1)} @media(max-width:900px){ .filas{gap:3.4rem} .fila,.fila:nth-child(even){grid-template-columns:1fr;gap:1.4rem} .fila .fila-media,.fila:nth-child(even) .fila-media{order:0} .fila .fila-txt,.fila:nth-child(even) .fila-txt{order:0} .fila .fila-media,.fila:nth-child(even) .fila-media{transform:translateY(calc((1 - var(--p)) * 26px)) scale(calc(.96 + var(--p) * .04));opacity:calc(var(--p) * 1.4)} .fila-items li,.fila:nth-child(even) .fila-items li{transform:translateY(14px)} .fila-marco{border-radius:22px} .fila-media::before{inset:-8px;filter:blur(14px)} .fila-txt h3{font-size:1.8rem} .fila-txt>p{font-size:1rem;max-width:100%} .fila-items li{padding:.65rem .8rem;flex-wrap:wrap} .fila-items i{margin-left:auto;font-size:.8rem} .fila-cta{width:100%;justify-content:center;margin-top:1.4rem} } /* ---------- FOTOS SIN ZOOM ---------- Cada foto conserva su proporcion real. Forzar un formato comun era lo que recortaba la decoracion de cumpleanos. */ .f-1 .fila-marco{aspect-ratio:1117/1400} .f-2 .fila-marco{aspect-ratio:1400/835} .f-3 .fila-marco{aspect-ratio:1381/1400} /* ---------- MINITARJETAS: entrada y reaccion propias ---------- Cada item entra girando levemente sobre su eje y se asienta. Al pasar el mouse crece la burbuja, el texto avanza y aparece una flecha que antes no estaba: recompensa el gesto. */ .fila-items li{cursor:default;overflow:hidden; transform-origin:left center;will-change:transform,opacity} /* La burbuja crece y late al pasar el mouse */ .it-p{transition:transform .45s var(--rebote),box-shadow .35s var(--ease)} .fila-items li:hover .it-p{transform:scale(1.5)} .fila-items li:hover{transform:translateX(6px)!important;background:#fff} .fila-items b{transition:transform .4s var(--rebote)} .fila-items li:hover b{transform:translateX(2px)} /* Flecha que aparece al pasar el mouse */ .fila-items li::after{content:'→';position:absolute;right:.9rem; font-family:var(--display);font-weight:600;color:var(--azul); opacity:0;transform:translateX(-8px);transition:opacity .35s var(--ease),transform .4s var(--rebote)} .f-2 .fila-items li::after{color:var(--naranja)} .f-3 .fila-items li::after{color:#4E9A2E} .fila-items li:hover::after{opacity:1;transform:none} .fila-items li:hover i{opacity:0;transform:translateX(10px)} .fila-items i{transition:opacity .3s var(--ease),transform .35s var(--ease)} @media(max-width:900px){ .fila-items li,.fila:nth-child(even) .fila-items li{transform:translateY(12px) rotate(0) scale(.98)} .fila-items li::after{display:none} .fila-items li:hover i{opacity:1;transform:none} } /* ---------- ENTRADA LIGADA AL SCROLL ---------- --p va de 0 a 1 segun donde este la fila en pantalla. Todo se interpola sobre ese valor: si devuelves el scroll, se devuelve. No es una animacion que corre sola, es la fila respondiendo al gesto. */ .fila{--p:0} .fila-media{ opacity:calc(var(--p) * 1.4); transform:translateX(calc((1 - var(--p)) * -52px)) scale(calc(.94 + var(--p) * .06))} .fila:nth-child(even) .fila-media{ transform:translateX(calc((1 - var(--p)) * 52px)) scale(calc(.94 + var(--p) * .06))} .fila-txt h3{opacity:calc((var(--p) - .1) * 2.4); transform:translateY(calc((1 - var(--p)) * 34px))} .fila-txt>p{opacity:calc((var(--p) - .2) * 2.6); transform:translateY(calc((1 - var(--p)) * 28px))} .fila-cta{opacity:calc((var(--p) - .62) * 3.2); transform:translateY(calc((1 - var(--p)) * 22px))} /* Los items entran uno detras de otro: cada uno arranca mas tarde */ .fila-items li{opacity:0;transform:translateY(24px) rotate(-2deg) scale(.95)} .fila:nth-child(even) .fila-items li{transform:translateY(24px) rotate(2deg) scale(.95)} .fila-items li:nth-child(1){--d:.30} .fila-items li:nth-child(2){--d:.40} .fila-items li:nth-child(3){--d:.50} .fila-items li:nth-child(4){--d:.60} .fila.viva .fila-items li, .fila:nth-child(even).viva .fila-items li{ --q:clamp(0,calc((var(--p) - var(--d)) * 4),1); opacity:var(--q); transform:translateY(calc((1 - var(--q)) * 24px)) rotate(calc((1 - var(--q)) * -2deg)) scale(calc(.95 + var(--q) * .05))} .fila:nth-child(even).viva .fila-items li{ transform:translateY(calc((1 - var(--q)) * 24px)) rotate(calc((1 - var(--q)) * 2deg)) scale(calc(.95 + var(--q) * .05))} /* El hover sigue mandando sobre el avance */ .fila-items li:hover{transform:translateX(6px) rotate(0) scale(1)!important;opacity:1!important} /* Sin JS o con motion reducido, todo visible */ .fila:not(.viva) .fila-items li{opacity:1;transform:none} .fila{transition:none} /* ---------- CATEGORIAS: fondo con capas ---------- El fondo plano hacia que las filas flotaran en el vacio. */ #categorias{position:relative;overflow:hidden;isolation:isolate;padding:7rem 0; background:linear-gradient(172deg,#F4FBFE 0%,var(--espuma) 38%,#DDF0FA 72%,#F4FBFE 100%)} #categorias::before{content:'';position:absolute;inset:0;z-index:-2;opacity:.55; background-image:radial-gradient(circle,rgba(30,154,214,.18) 1px,transparent 1px); background-size:28px 28px; -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent); mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)} /* Manchas de color detras de cada fila, del tono de su categoria */ #categorias .mancha{position:absolute;z-index:-1;border-radius:50%;filter:blur(110px);pointer-events:none} #categorias .mancha.a{width:46vw;height:46vw;left:-16%;top:6%;background:rgba(30,154,214,.26)} #categorias .mancha.b{width:40vw;height:40vw;right:-14%;top:38%;background:rgba(245,201,60,.26)} #categorias .mancha.c{width:42vw;height:42vw;left:-12%;bottom:2%;background:rgba(127,191,77,.22)} /* Linea que conecta las filas: el zigzag se lee como recorrido */ .filas{position:relative} .filas::before{content:'';position:absolute;left:50%;top:6%;bottom:6%;width:2px;z-index:-1; background:repeating-linear-gradient(180deg,rgba(30,154,214,.28) 0 7px,transparent 7px 15px)} /* La foto gana presencia */ .fila-marco{box-shadow:0 44px 92px -30px rgba(4,32,50,.6),inset 0 0 0 1px rgba(255,255,255,.6)} .fila-media::before{inset:-22px;border-radius:52px;opacity:.5;filter:blur(34px)} @media(max-width:900px){ #categorias{padding:3.4rem 0} #categorias .mancha{display:none} .filas::before{display:none} .fila-marco{box-shadow:0 22px 50px -20px rgba(4,32,50,.5)} } /* ---------- COSTURA ENTRE SECCIONES ---------- El paso de Por que a Inspiracion era un corte recto. Una ola cierra la seccion clara y abre la azul. */ .ola-corte{position:absolute;left:0;right:0;bottom:-1px;z-index:3;width:100%;display:block; height:clamp(50px,7vw,110px);pointer-events:none} .ola-corte path{fill:var(--azul)} /* La ola de concepto entrega el color al descenso: tiene que ser EXACTAMENTE el tono con el que abre .escena, o queda una costura visible. */ #concepto .ola-corte path{fill:#3FB2E4} #concepto{padding-bottom:9rem} /* ---------- BOTONES CON CRIATURA ---------- Al pasar el mouse asoma un pez desde el borde: recompensa el gesto con algo de la marca, no con un cambio de color mas. */ .btn-bicho{position:relative;overflow:hidden} .btn-bicho .pez-btn{position:absolute;right:-42px;top:50%;width:30px;height:22px; margin-top:-11px;opacity:0;pointer-events:none; transition:transform .6s var(--rebote),opacity .4s var(--ease)} .btn-bicho:hover .pez-btn{opacity:.95;transform:translateX(-158px) scaleX(-1)} .btn-bicho .pez-btn svg{width:100%;height:100%;display:block} @media(max-width:860px){ #concepto{padding-bottom:4.5rem} .btn-bicho .pez-btn{display:none} } /* ---------- BLINDAJE CONTRA DESBORDE HORIZONTAL ---------- Un hijo de flex no baja de su ancho de contenido salvo min-width:0. Sin eso, en pantallas angostas el bloque empuja y el texto se sale. */ html,body{overflow-x:clip;max-width:100%} .wrap{max-width:100%} .concepto-txt,.concepto-txt>*,.concepto-txt h2, .concepto-txt h2 .linea-1,.concepto-txt h2 .linea-2{min-width:0;max-width:100%} .concepto-txt{width:100%} .concepto-txt h2{width:100%} .fila,.fila-txt,.fila-txt>*,.fila-items,.fila-items li{min-width:0} /* ---------- BANDAS INMERSIVAS ---------- */ .banda{position:relative;min-height:62vh;display:grid;place-items:center;overflow:hidden;text-align:center;color:#fff} .banda video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .banda::after{content:'';position:absolute;inset:0;z-index:1; background:radial-gradient(ellipse 66% 62% at 50% 50%,rgba(9,52,78,.28),rgba(9,52,78,.8) 100%)} .banda .wrap{position:relative;z-index:2;max-width:46rem} .banda .kicker{font-family:var(--mano);font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--amarillo);display:block;margin-bottom:.3rem} .banda h2{font-size:clamp(2rem,4.4vw,3.4rem);color:#fff;max-width:100%;letter-spacing:-.03em;text-shadow:0 6px 40px rgba(4,32,50,.6)} .banda p{margin-top:1.2rem;font-size:1.1rem;color:rgba(255,255,255,.9);max-width:34rem;margin-inline:auto} @media(max-width:860px){.banda{min-height:52vh}.banda.corta{min-height:36vh}} /* ---------- BANDA ACUARIO (inmersion) ---------- */ .acuario{position:relative;min-height:88vh;display:grid;place-items:center;overflow:hidden;text-align:center;color:#fff} .acuario video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .acuario::after{content:'';position:absolute;inset:0;z-index:1; background:radial-gradient(ellipse 62% 58% at 50% 50%,rgba(12,63,92,.2),rgba(12,63,92,.82) 100%)} .acuario .wrap{position:relative;z-index:2;max-width:52rem} .acuario .kicker{font-family:var(--mano);font-size:clamp(1.6rem,3vw,2.4rem);color:var(--amarillo);display:block;margin-bottom:.4rem} .acuario h2{font-size:clamp(2.2rem,5vw,4rem);color:#fff;text-shadow:0 6px 40px rgba(12,63,92,.6);max-width:100%} .acuario p{margin-top:1.4rem;font-size:1.12rem;color:rgba(255,255,255,.92);max-width:38rem;margin-inline:auto} .acuario .bloques{display:flex;gap:2.6rem;justify-content:center;flex-wrap:wrap;margin-top:3rem} .acuario .bq{min-width:120px} .acuario .bq b{display:block;font-family:var(--display);font-size:2.1rem;color:var(--amarillo);line-height:1} .acuario .bq span{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;opacity:.88} .acuario .prof{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3; display:flex;flex-direction:column;align-items:center;gap:.4rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;opacity:.75} .acuario .prof i{display:block;width:1px;height:34px;background:linear-gradient(#fff,transparent);animation:bajar 2.4s ease-in-out infinite} @keyframes bajar{0%,100%{opacity:.2;transform:translateY(-6px)}50%{opacity:1;transform:translateY(6px)}} @media(max-width:860px){.acuario{min-height:76vh}} /* ---------- CUMPLEANOS: media por plan y selector de tematica ---------- */ .plan-media{position:relative;margin:-2.2rem -1.9rem 1.2rem;aspect-ratio:16/10;overflow:hidden;background:var(--azul-profundo)} .plan-media video{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .plan:hover .plan-media video{transform:scale(1.07)} .plan-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(255,255,255,.9))} .plan-media .marca-ia{z-index:3} /* Highlights tipo Instagram: la mama ya sabe usar esto sin que se lo expliquen */ .highlights{display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.2rem} .hl{border:0;background:none;cursor:pointer;font:inherit;padding:0;display:flex;flex-direction:column; align-items:center;gap:.55rem;width:88px;transition:transform .4s var(--rebote)} .hl:hover{transform:translateY(-5px)} .hl-aro{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;padding:3px; background:linear-gradient(140deg,rgba(12,63,92,.16),rgba(12,63,92,.16));transition:background .4s var(--ease),box-shadow .4s var(--ease)} .hl-foto{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;border:3px solid #fff;background:var(--espuma)} .hl-foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(.28) saturate(.9) brightness(.94);transition:filter .45s var(--ease),transform .8s var(--ease)} .hl:hover .hl-foto img{transform:scale(1.09)} .hl-nom{font-family:var(--display);font-weight:500;font-size:.82rem;color:var(--tinta-suave); line-height:1.15;text-align:center;transition:color .3s} /* El anillo se enciende como una historia sin ver */ .hl.on .hl-aro>.hl-foto{animation:girar-aro 7s linear infinite reverse} .hl.on .hl-aro{background:conic-gradient(from 210deg,var(--amarillo),var(--naranja),var(--coral),var(--azul),var(--amarillo)); box-shadow:0 10px 26px -8px rgba(233,96,30,.6);animation:girar-aro 7s linear infinite} @keyframes girar-aro{to{transform:rotate(360deg)}} .hl.on .hl-foto{transform:rotate(0)} .hl.on .hl-foto img{filter:none} .hl.on .hl-nom{color:var(--azul-profundo);font-weight:600} .hl.on{transform:translateY(-5px)} @media(max-width:860px){ .highlights{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:.9rem; margin-inline:-4vw;padding:.3rem 4vw 1rem;scroll-snap-type:x mandatory;scrollbar-width:none} .highlights::-webkit-scrollbar{display:none} .hl{flex:0 0 auto;width:74px;scroll-snap-align:center} .hl-aro{width:66px;height:66px} .hl-nom{font-size:.74rem} } /* legado */ .tema{border:0;cursor:pointer;font:inherit;border-radius:999px;padding:.6rem 1.2rem; font-family:var(--display);font-weight:500;font-size:.95rem;color:var(--azul-profundo); background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); box-shadow:inset 0 0 0 1.5px rgba(30,154,214,.24),0 4px 14px -6px rgba(12,63,92,.18); transition:transform .34s var(--rebote),box-shadow .34s var(--ease),background .34s} .tema:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1.5px rgba(30,154,214,.5),0 10px 24px -8px rgba(30,154,214,.4)} .tema.on{background:linear-gradient(165deg,#F5772F,var(--naranja) 60%,#CF4E12);color:#fff;transform:translateY(-3px) scale(1.04);box-shadow:var(--brillo-naranja)} /* Las fotos son verticales; sin tope la celda crecia a 1184px. La relacion se fija aqui y el recorte lo resuelve object-fit. */ /* ---------- HISTORIAS: la imagen manda, el texto acompana ---------- */ .historias{position:relative;border-radius:28px;overflow:hidden;background:var(--azul-profundo); aspect-ratio:251/450;max-height:760px;margin-inline:auto;width:100%;max-width:430px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 34px 74px -22px rgba(4,32,50,.6); user-select:none;-webkit-user-select:none} .hist-slide{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease)} .hist-slide.on{opacity:1} .hist-slide img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block} /* Copia ampliada y borrosa detras: rellena el marco sin recortar la foto */ .hist-slide::before{content:'';position:absolute;inset:-8%;z-index:0; background-image:var(--fondo);background-size:cover;background-position:center; filter:blur(26px) saturate(1.25) brightness(.72);transform:scale(1.12)} /* Velo solo abajo: la foto se ve entera y el texto igual se lee */ .historias::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(180deg,rgba(4,32,50,.42) 0%,transparent 22%,transparent 44%,rgba(4,32,50,.86) 100%)} .hist-segs{position:absolute;top:12px;left:12px;right:12px;z-index:5;display:flex;gap:4px} .hist-seg{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.38);overflow:hidden} .hist-seg i{display:block;height:100%;width:0;background:#fff;border-radius:2px} .hist-seg.vista i{width:100%} .hist-seg.corre i{animation:histfill var(--ms,5200ms) linear forwards} @keyframes histfill{from{width:0}to{width:100%}} .historias.pausa .hist-seg.corre i{animation-play-state:paused} /* Zonas de toque: izquierda vuelve, derecha avanza. Como en Instagram. */ .hist-zona{position:absolute;top:0;bottom:0;width:34%;z-index:6;border:0;background:none;cursor:pointer; -webkit-tap-highlight-color:transparent} .hist-zona.atras{left:0} .hist-zona.adelante{right:0} .historias .marca-ia{top:26px;bottom:auto;left:12px;z-index:5} @media(max-width:860px){ .historias{aspect-ratio:9/15;max-height:none;max-width:none;border-radius:24px;margin-inline:-1vw} } /* ---------- HISTORIAS: foto a la izquierda, valor a la derecha ---------- */ .hist-bloque{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);gap:2.4rem;align-items:start} .historias{margin-inline:0;max-width:none} .hist-info{display:flex;flex-direction:column;gap:.7rem;padding-top:.4rem} .hist-info h3{font-size:clamp(1.7rem,3vw,2.4rem);color:var(--azul-profundo);letter-spacing:-.025em;line-height:1.08} .hist-info>p{color:var(--tinta-suave);font-size:1.04rem;max-width:44ch} .hist-lista{list-style:none;display:grid;gap:.55rem;margin:.5rem 0 0;padding:0} .hist-lista li{position:relative;padding-left:1.7rem;font-size:.96rem;color:var(--azul-profundo);font-weight:600;line-height:1.35} .hist-lista li::before{content:'';position:absolute;left:0;top:.32em;width:15px;height:15px;border-radius:50%; background:radial-gradient(circle at 34% 30%,#fff,var(--amarillo) 55%,var(--naranja) 100%); box-shadow:0 2px 7px -2px rgba(233,96,30,.7)} .hist-lista.compacta li{font-size:.88rem;font-weight:400;color:var(--tinta-suave);padding-left:1.5rem} .hist-lista.compacta li::before{width:12px;height:12px;top:.36em; background:radial-gradient(circle at 34% 30%,#fff,var(--azul-claro) 55%,var(--azul) 100%); box-shadow:0 2px 6px -2px rgba(30,154,214,.6)} .hist-base{margin-top:1rem;padding:1.1rem 1.2rem;border-radius:20px; background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); box-shadow:inset 0 0 0 1px var(--vidrio-borde),0 12px 30px -14px rgba(12,63,92,.24)} .hist-base .eyebrow{margin-bottom:.6rem} .hist-cta{margin-top:1.2rem;display:flex;flex-direction:column;gap:.7rem;align-items:flex-start} .hist-nota{font-size:.82rem;color:var(--tinta-suave);max-width:36ch;line-height:1.4} @media(max-width:980px){ .hist-bloque{grid-template-columns:1fr;gap:1.4rem} .historias{max-width:460px;margin-inline:auto} .hist-info{padding-top:0} .hist-cta .btn{width:100%;justify-content:center} .hist-nota{max-width:none;text-align:center;align-self:center} } /* ---------- PLANES: ficha con lo que incluye ---------- */ .plan-incluye{list-style:none;display:grid;gap:.5rem;margin:.9rem 0 .2rem;padding:0} .plan-incluye li{position:relative;padding-left:1.6rem;font-size:.9rem;color:var(--tinta-suave);line-height:1.35} .plan-incluye li::before{content:'';position:absolute;left:0;top:.36em;width:14px;height:14px;border-radius:50%; background:radial-gradient(circle at 34% 30%,#fff,var(--azul-claro) 55%,var(--azul) 100%); box-shadow:0 2px 6px -2px rgba(30,154,214,.7)} .plan-incluye li::after{content:'';position:absolute;left:4px;top:.62em;width:5px;height:2.5px; border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(-45deg)} .plan .meta{display:inline-flex;align-items:center;gap:.4rem} .plan .val{margin-top:.6rem;padding-top:.9rem;border-top:1px dashed rgba(12,63,92,.16)} @media(max-width:860px){.plan-incluye li{font-size:.85rem;padding-left:1.5rem}} /* ---------- FILOSOFIA ---------- */ .filos{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem} .filo{background:rgba(255,255,255,.7);border-radius:28px;padding:2.3rem 2.1rem;position:relative;overflow:hidden; -webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6); box-shadow:inset 0 0 0 1px var(--vidrio-borde),0 20px 46px -16px rgba(12,63,92,.26); transition:transform .45s var(--rebote),box-shadow .4s var(--ease)} .filo:hover{box-shadow:inset 0 0 0 1px #fff,0 30px 64px -18px rgba(12,63,92,.34)} .filo:hover{transform:translateY(-7px)} .filo::before{content:'';position:absolute;right:-46px;top:-46px;width:160px;height:160px;background:var(--espuma); border-radius:48% 52% 56% 44%/46% 50% 50% 54%;animation:morph 14s ease-in-out infinite} @keyframes morph{0%,100%{border-radius:48% 52% 56% 44%/46% 50% 50% 54%;transform:rotate(0)}50%{border-radius:56% 44% 48% 52%/52% 46% 54% 48%;transform:rotate(9deg)}} .filo>*{position:relative;z-index:1} .filo h3{font-size:1.4rem;color:var(--azul-profundo);margin-bottom:.5rem} .filo p{font-size:.98rem;color:var(--tinta-suave);margin-top:.8rem} .filo .link{display:inline-block;margin-top:1.1rem;font-family:var(--display);font-weight:600;color:var(--azul)} .filo-foto{margin:-2.3rem -2.1rem 1.4rem;aspect-ratio:16/9;overflow:hidden;background:var(--espuma)} .filo-foto img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)} .filo:hover .filo-foto img{transform:scale(1.06)} /* ---------- AGENDA ---------- */ .semana{display:grid;grid-template-columns:repeat(7,1fr);gap:.75rem;margin-top:2.2rem} .dia{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);border-radius:18px;padding:1.1rem .7rem;text-align:center;transition:transform .36s var(--rebote),background .3s} .dia:hover{transform:translateY(-7px) scale(1.04);background:rgba(255,255,255,.22)} .dia.hoy-es{background:var(--amarillo);border-color:var(--amarillo);color:var(--azul-profundo)} .dia .d{font-family:var(--display);font-size:.8rem;font-weight:600;letter-spacing:.12em;opacity:.88} .dia .estado{font-family:var(--display);font-size:.96rem;font-weight:600;margin-top:.5rem;line-height:1.25} .dia .hora{font-size:.74rem;opacity:.82;margin-top:.3rem;font-weight:700} .dia.cerrado{background:rgba(12,63,92,.4);border-color:rgba(255,255,255,.14)} .nota-agenda{margin-top:1.6rem;font-size:.9rem;color:rgba(255,255,255,.76);display:flex;gap:.6rem;align-items:flex-start;max-width:54rem} /* ---------- AGENDA con fondo vivo ---------- */ #agenda{position:relative;overflow:hidden} #agenda .fondo-vivo{position:absolute;inset:0;z-index:0;pointer-events:none} #agenda .fondo-vivo video{width:100%;height:100%;object-fit:cover;opacity:.5} #agenda .fondo-vivo::after{content:'';position:absolute;inset:0; background:linear-gradient(170deg,rgba(30,154,214,.86) 0%,rgba(17,107,150,.9) 50%,rgba(12,63,92,.94) 100%)} #agenda>.wrap{position:relative;z-index:2} /* ---------- CONFIANZA ---------- */ .google-badge{display:inline-flex;align-items:center;gap:.6rem;background:#fff;border:1px solid rgba(12,63,92,.12); border-radius:999px;padding:.55rem 1.1rem;box-shadow:var(--sombra);font-size:.88rem;font-weight:800;color:var(--azul-profundo)} .google-badge .est{color:var(--amarillo);letter-spacing:1px} .aliados{display:flex;gap:2.6rem;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:3.5rem;padding-top:2.5rem;border-top:1px solid rgba(12,63,92,.1)} .aliado{font-family:var(--display);font-size:1.12rem;font-weight:600;color:var(--tinta-suave);opacity:.45;filter:grayscale(1);transition:.4s var(--rebote)} .aliado:hover{opacity:1;filter:none;color:var(--azul);transform:translateY(-5px) scale(1.06)} /* ---------- CONFIANZA: el testimonio en video manda ---------- */ #confianza{background: radial-gradient(ellipse 70% 60% at 88% 6%,rgba(245,201,60,.22),transparent 60%), radial-gradient(ellipse 76% 62% at 6% 92%,rgba(143,214,238,.34),transparent 62%), linear-gradient(172deg,#F7FCFE 0%,var(--espuma) 58%,#DCEFF9 100%)} .conf-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:2.4rem} .conf-cab h2{max-width:20ch} .conf-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:2.2rem;align-items:stretch} .conf-video{position:relative;border-radius:28px;overflow:hidden;background:var(--azul-profundo);aspect-ratio:9/13; box-shadow:inset 0 0 0 1px var(--vidrio-borde),0 30px 68px -22px rgba(12,63,92,.4)} .conf-video video{width:100%;height:100%;object-fit:cover} .conf-etiqueta{position:absolute;left:12px;bottom:12px;z-index:3;background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--azul-profundo); font-family:var(--display);font-weight:600;font-size:.8rem;padding:.38rem .85rem;border-radius:999px} .conf-lado{display:flex;flex-direction:column;gap:1.4rem} .conf-cita{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center; background:linear-gradient(160deg,var(--azul) 0%,var(--azul-medio) 60%,var(--azul-profundo) 100%); border-radius:28px;padding:2.6rem 2.4rem;color:#fff;overflow:hidden; box-shadow:0 30px 68px -24px rgba(17,107,150,.6)} .conf-cita .cm{font-family:var(--display);font-size:4.5rem;line-height:.5;color:var(--amarillo);display:block;margin-bottom:.8rem} .conf-cita p{font-family:var(--display);font-weight:500;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.12;letter-spacing:-.02em} .conf-cita cite{display:block;margin-top:1.1rem;font-style:normal;font-size:.9rem;color:rgba(255,255,255,.8);font-weight:700} .conf-datos{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem} .conf-datos>div{background:rgba(255,255,255,.72);border-radius:20px;padding:1.1rem .8rem;text-align:center; -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); box-shadow:inset 0 0 0 1px var(--vidrio-borde),0 12px 30px -12px rgba(12,63,92,.22); transition:transform .4s var(--rebote)} .conf-datos>div:hover{transform:translateY(-5px)} .conf-datos b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--naranja);white-space:nowrap} .conf-datos span{display:block;font-size:.68rem;line-height:1.25;text-transform:uppercase;letter-spacing:.03em;font-weight:800;color:var(--tinta-suave);margin-top:.2rem} @media(max-width:860px){ .conf-grid{grid-template-columns:1fr;gap:1.2rem} .conf-video{aspect-ratio:9/11} .conf-cita{padding:1.8rem 1.5rem} .conf-datos{grid-template-columns:1fr 1fr;gap:.6rem} .conf-cab{margin-bottom:1.5rem} } /* ---------- CIERRE ---------- */ .cierre{background:linear-gradient(165deg,var(--azul-medio),var(--azul-profundo));color:#fff;text-align:center;padding:6rem 0;position:relative;overflow:hidden} .ballena{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(950px,120%);opacity:.09;z-index:0;pointer-events:none;animation:respira 12s ease-in-out infinite} @keyframes respira{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-52%) scale(1.05)}} .cierre .wrap{position:relative;z-index:2} .cierre h2{font-size:clamp(2rem,4.3vw,3.2rem);max-width:20ch;margin-inline:auto;color:#fff} .cierre h2 em{font-style:normal;font-family:var(--mano);color:var(--amarillo);font-size:1.15em} .cierre p{margin-top:1.1rem;font-size:1.05rem;color:rgba(255,255,255,.88);max-width:40rem;margin-inline:auto} .cierre .cta{display:flex;gap:.9rem;justify-content:center;margin-top:2.2rem;flex-wrap:wrap} .cierre .datos-pie{display:flex;gap:3rem;justify-content:center;flex-wrap:wrap;margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.18)} .cierre .datos-pie div{text-align:center} .cierre .datos-pie b{display:block;font-family:var(--display);color:var(--amarillo);font-size:1rem;margin-bottom:.25rem} .cierre .datos-pie span{font-size:.9rem;color:rgba(255,255,255,.8)} /* ---------- FOOTER ---------- */ .foot{background:var(--azul-profundo);color:rgba(255,255,255,.78);padding:3.5rem 0 2rem} .foot .grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:2.5rem} .foot h4{font-family:var(--display);color:var(--amarillo);font-size:1rem;margin-bottom:1rem;font-weight:600} .foot a:hover{color:var(--amarillo)} .foot ul{list-style:none;display:grid;gap:.5rem;font-size:.92rem} .foot .marca b,.foot .marca b span{color:#fff} .foot .desc{font-size:.92rem;margin-top:1rem;max-width:26rem} .legal{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.83rem} /* ---------- BARRA DE ACCION (solo movil) ---------- Vive en la raiz y arranca oculta. Antes estaba dentro del media query de movil, asi que en escritorio no tenia ninguna regla y el navegador la pintaba como bloque suelto al final de la pagina. */ .barra-movil{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;gap:.6rem} /* ---------- FAB + PEZ ---------- */ .fab{position:fixed;right:20px;bottom:20px;z-index:70;width:60px;height:60px;border-radius:50%;background:#25D366; display:grid;place-items:center;box-shadow:0 10px 28px rgba(37,211,102,.42);transition:transform .36s var(--rebote)} .fab:hover{transform:scale(1.13) rotate(-8deg)} .fab::before{content:'';position:absolute;inset:0;border-radius:50%;background:#25D366;animation:pulso 2.6s infinite;z-index:-1} @keyframes pulso{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.75);opacity:0}} .pezfab{position:fixed;right:44px;bottom:46px;width:38px;height:26px;z-index:69;opacity:0;pointer-events:none} .pezfab.nada{animation:nadar 8s var(--ease)} @keyframes nadar{ 0%{transform:translate(0,0) rotate(0) scale(.6);opacity:0} 8%{opacity:1;transform:translate(-40px,-16px) scale(1)} 30%{transform:translate(-180px,-56px) rotate(-9deg)} 55%{transform:translate(-380px,-18px) rotate(7deg)} 80%{transform:translate(-600px,-66px) rotate(-11deg);opacity:1} 100%{transform:translate(-800px,-30px) rotate(5deg);opacity:0}} .pezfab .aleta{transform-origin:right center;animation:aletear .3s ease-in-out infinite alternate} @keyframes aletear{from{transform:scaleX(.66) rotate(-11deg)}to{transform:scaleX(1) rotate(11deg)}} .criatura{cursor:pointer;transition:transform .4s var(--rebote)} .criatura:hover{transform:scale(1.1) rotate(-7deg)} .criatura.baila{animation:baile .7s var(--rebote)} @keyframes baile{0%{transform:none}25%{transform:rotate(-16deg) scale(1.14)}55%{transform:rotate(13deg) scale(1.1)}80%{transform:rotate(-6deg)}100%{transform:none}} /* ---------- RESPONSIVE ---------- */ @media(max-width:1080px){ .exp-layout{grid-template-columns:1fr} .selector{position:static;grid-template-columns:repeat(2,1fr)} .panel{grid-template-columns:260px 1fr} .planes,.testis{grid-template-columns:repeat(2,1fr)} .semana{grid-template-columns:repeat(4,1fr)} .datos .caja{grid-template-columns:repeat(2,1fr)} .datos .it:nth-child(2){border-right:0} .cumple-grid,.testi-video{grid-template-columns:230px 1fr} } @media(max-width:860px){ .burger{display:block} /* fixed y no sticky: sticky se cae si un ancestro recorta el overflow. .oculto lo retira al bajar; el JS lo devuelve al subir. */ .nav{position:fixed;top:0;left:0;right:0;z-index:125; transition:transform .34s var(--ease),box-shadow .3s var(--ease),background .35s var(--ease),padding .35s var(--ease)} /* Con sesion abierta la barra de admin ocupa el tope: el header fijo quedaba escondido detras de ella. */ body.admin-bar .nav{top:46px} .nav.oculto{transform:translateY(-100%)} body.menu-abierto .nav.oculto{transform:none} body{padding-top:62px} /* Aire en el bloque "Por que": en movil venia sin respiro. */ .concepto-txt{padding-block:1.4rem} .concepto-txt h2.tit{margin-bottom:1.1rem;line-height:1.18} .concepto-txt p{margin-block:1rem;line-height:1.7} .concepto-txt .sub-seo{margin-top:1.5rem} .concepto-txt .btn{margin-top:1.9rem} /* AQUI ESTABA EL BUG DEL MENU EN MOVIL. .nav.scrolled lleva backdrop-filter, y un elemento con backdrop-filter se vuelve el bloque contenedor de sus hijos position:fixed. Al bajar, el menu dejaba de medirse contra la pantalla y se medía contra la barra: por eso solo aparecia bien arriba del todo. Mientras el menu esta abierto se anula el filtro y el menu vuelve a ser de la pantalla. */ body.menu-abierto .nav{background:transparent;box-shadow:none; -webkit-backdrop-filter:none!important;backdrop-filter:none!important} /* La barra de abajo estorba con el menu encima */ body.menu-abierto .barra-movil{opacity:0;pointer-events:none;transition:opacity .25s} body.menu-abierto .nav .logo-img{filter:brightness(0) invert(1)} /* justify-self:center del nav de escritorio hacia que este panel fijo se encogiera al ancho de su contenido y quedara medio visible. Se anula. */ .nav .menu,.menu{justify-self:stretch!important;align-self:stretch!important} .menu{position:fixed;top:0;left:0;width:100vw;height:100dvh;height:100vh;inset:auto; background:linear-gradient(160deg,var(--azul),var(--azul-profundo)); flex-direction:column;align-items:center;justify-content:center;gap:1.6rem; transform:translateX(100%);transition:transform .42s var(--ease);z-index:120; padding:5rem 1.5rem calc(2rem + env(safe-area-inset-bottom));overflow-y:auto} body.menu-abierto .menu{transform:none} body.menu-abierto{overflow:hidden} .menu>a{color:#fff;font-size:1.55rem} .nav .wrap{grid-template-columns:1fr auto;gap:.8rem} .nav .nav-cta{display:none} .nav .marca{justify-self:start} .hero .wrap,.porque,.parati,.filos,.cumple-grid,.testi-video{grid-template-columns:1fr} .panel{grid-template-columns:1fr} .stories{aspect-ratio:16/11} .selector{grid-template-columns:1fr} .planes,.testis{grid-template-columns:1fr} .foot .grid{grid-template-columns:1fr 1fr} .sec{padding:4rem 0} } @media(max-width:520px){ .semana{grid-template-columns:repeat(2,1fr)} .foot .grid{grid-template-columns:1fr} .info{padding:1.8rem 1.5rem} } @media(max-width:860px){ /* El pez cruzaba 800px sobre un viewport de 390 y tapaba los CTA del hero. En movil hace un recorrido corto y se queda cerca del boton. */ .pezfab.nada{animation:nadar-movil 7s var(--ease)} @keyframes nadar-movil{ 0%{transform:translate(0,0) scale(.6);opacity:0} 12%{opacity:1;transform:translate(-30px,-14px) scale(.9)} 50%{transform:translate(-120px,-46px) rotate(-8deg)} 82%{transform:translate(-210px,-20px) rotate(6deg);opacity:1} 100%{transform:translate(-280px,-52px);opacity:0}} /* Las burbujas del hero no deben pasar por encima del texto en pantallas angostas */ .burbuja{opacity:.5} } .desliza{display:none} .ver-detalle{display:none} .puntos{display:none} /* ========================================================== MOVIL: se cambia el eje. En vez de apilar todo en vertical, las colecciones se deslizan en horizontal con snap. Objetivo: ver, entender y agendar sin scroll infinito. ========================================================== */ @media(max-width:860px){ /* --- menos aire: el scroll se acorta sin perder respiracion --- */ .sec{padding:3.2rem 0} .cabecera{margin-bottom:2rem} h2.tit{font-size:clamp(1.9rem,7.4vw,2.5rem)} .cabecera p{font-size:1rem} /* --- bandas inmersivas mas cortas: 3 pantallas completas era mucho --- */ .banda{min-height:38vh} .banda.corta{min-height:30vh} .acuario{min-height:56vh} .acuario .bloques{gap:1.6rem;margin-top:1.8rem} .acuario .bq b{font-size:1.6rem} .acuario .prof{display:none} /* --- EXPERIENCIAS: fila deslizable, no lista vertical --- */ .selector{display:flex!important;gap:.7rem;overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; padding:.3rem .3rem 1rem;margin-inline:-4vw;padding-inline:4vw; scrollbar-width:none} .selector::-webkit-scrollbar{display:none} .sel{flex:0 0 auto;width:76vw;max-width:290px;scroll-snap-align:center} .sel:hover{transform:none} .sel .ic{width:52px;height:52px} .exp-layout{gap:.4rem} /* --- PLANES: mismo patron --- */ .planes{display:flex!important;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;padding:1.2rem .3rem 1.4rem; margin-inline:-4vw;padding-inline:4vw;scrollbar-width:none} .planes::-webkit-scrollbar{display:none} .plan{flex:0 0 auto;width:82vw;max-width:330px;scroll-snap-align:center;animation:none} .plan:hover{transform:none} /* --- pista visual de que hay mas al lado --- */ .desliza{display:flex;align-items:center;justify-content:center;gap:.5rem; font-family:var(--display);font-weight:500;font-size:.82rem;color:var(--tinta-suave); margin-top:-.4rem;margin-bottom:.2rem} .desliza i{display:inline-block;width:26px;height:2px;border-radius:2px;background:currentColor;opacity:.4; animation:corre 1.9s ease-in-out infinite} @keyframes corre{0%,100%{transform:translateX(-5px);opacity:.25}50%{transform:translateX(5px);opacity:.75}} .sec-azul .desliza,.sec-azul .desliza i{color:rgba(255,255,255,.75)} /* --- AGENDA: la semana en fila deslizable --- */ .semana{display:flex!important;gap:.6rem;overflow-x:auto;scroll-snap-type:x mandatory; padding-bottom:.8rem;margin-inline:-4vw;padding-inline:4vw;scrollbar-width:none} .semana::-webkit-scrollbar{display:none} .dia{flex:0 0 auto;width:38vw;max-width:150px;scroll-snap-align:center} .dia:hover{transform:none} body{padding-bottom:0} .fab{bottom:88px} .pezfab{bottom:114px} /* --- testimonios y filosofia sin tanto alto --- */ .testi-video{padding:1.2rem;gap:1.2rem} .filo{padding:1.9rem 1.5rem} .filo-foto{margin:-1.9rem -1.5rem 1.2rem} .info{padding:1.6rem 1.4rem} .info h3{font-size:1.5rem} } @media(max-width:520px){ .sel{width:80vw} .plan{width:86vw} .dia{width:44vw} } /* ========================================================== MOVIL v2: patron de app. Barra inferior siempre visible, menos secciones, tipografia mas compacta, tap targets de 48px. ========================================================== */ @media(max-width:860px){ /* --- BARRA INFERIOR PERSISTENTE (como Instagram: nunca se esconde) --- */ .barra-movil{display:flex;align-items:stretch;justify-content:center;box-sizing:border-box;width:100%;max-width:100vw;overflow:hidden; transform:translateY(var(--esconde,0));transition:transform .38s var(--ease),opacity .25s; padding:.5rem .9rem calc(.5rem + env(safe-area-inset-bottom)); background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6); box-shadow:0 -4px 20px -8px rgba(12,63,92,.26),inset 0 1px 0 rgba(255,255,255,.95)} /* Un solo CTA: dos botones competian y llenaban la pantalla */ .barra-movil .btn{flex:1 1 auto;width:auto;min-width:0;max-width:100%;align-self:stretch; min-height:50px;padding:.85rem 1rem;font-size:1rem;border-radius:14px} .barra-movil .btn-blanco{display:none} body{padding-bottom:68px} .foot{padding-bottom:5rem} /* El FAB duplicaba el CTA de la barra: sobra en movil */ .fab,.pezfab{display:none} /* --- MENOS SECCIONES: dos bandas eran 2 pantallas de puro ambiente --- */ #tunel,#burbujas{display:none} .acuario{min-height:52vh} /* --- ESCALA COMPACTA --- */ .sec{padding:2.6rem 0} .cabecera{margin-bottom:1.5rem} h2.tit{font-size:1.72rem;line-height:1.12;max-width:100%} .cabecera p{font-size:.97rem;line-height:1.55} .sub-seo{font-size:.84rem} .eyebrow{font-size:.68rem;margin-bottom:.5rem} .info h3{font-size:1.4rem} .info p{font-size:.95rem} .plan h3{font-size:1.3rem} .filo h3{font-size:1.2rem} .filo p{font-size:.93rem} .acuario h2{font-size:1.9rem} .acuario p{font-size:.98rem} /* --- BOTONES: objetivos de 48px y esquinas de app --- */ .btn{min-height:48px;padding:.85rem 1.5rem;font-size:.98rem;border-radius:16px} .info .tarifa .btn,.plan .btn{width:100%;justify-content:center;align-self:stretch} .btn::after{border-radius:16px 16px 40% 40%/16px 16px 100% 100%} /* --- BENEFICIOS: de lista larga a rejilla de 2 --- */ .beneficios{grid-template-columns:1fr 1fr;gap:.7rem} .ben{flex-direction:column;gap:.5rem;background:rgba(255,255,255,.12);border-radius:16px;padding:.9rem .8rem} .ben .ic{width:38px;height:38px} .ben h4{font-size:.9rem;line-height:1.2} .ben p{font-size:.8rem;line-height:1.35} /* --- FILOSOFIA: dos tarjetas altas -> compactas --- */ .filo{padding:1.5rem 1.2rem} .filo-foto{margin:-1.5rem -1.2rem 1rem;aspect-ratio:2/1} /* --- PIE: acordeon en vez de cuatro columnas apiladas --- */ .foot .grid{grid-template-columns:1fr;gap:1.2rem} .foot ul{font-size:.88rem;gap:.4rem} .foot .desc{font-size:.88rem} .legal{font-size:.78rem;margin-top:1.8rem} /* --- CIERRE Y CONFIANZA mas ajustados --- */ .cierre{padding:3.4rem 0} .cierre .datos-pie{gap:1.4rem;margin-top:1.8rem;padding-top:1.4rem} .cierre .datos-pie div{flex:1 1 45%} .testi{padding:1.4rem 1.3rem} .testi p{font-size:.92rem} .aviso{font-size:.82rem;padding:.9rem 1rem} .aliados{gap:1.4rem;margin-top:2rem;padding-top:1.6rem} .aliado{font-size:.95rem} } @media(max-width:520px){ h2.tit{font-size:1.58rem} .beneficios{grid-template-columns:1fr 1fr} } @media(max-width:860px){ /* --- EXPERIENCIAS: la ficha se compacta. El texto largo se pliega detras de "Ver detalle" para que la tarjeta quepa en una pantalla. --- */ .stories{aspect-ratio:16/10} .info{padding:1.3rem 1.2rem;gap:.55rem} .info .seo-mini{display:none} .info .desc-larga{max-height:0;overflow:hidden;opacity:0; transition:max-height .45s var(--ease),opacity .35s var(--ease),margin .45s var(--ease)} .info.abierta .desc-larga{max-height:280px;opacity:1;margin-top:.2rem} .ver-detalle{display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;border:0;background:none; font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--azul);cursor:pointer;padding:.4rem 0;min-height:44px} .ver-detalle span{display:inline-block;transition:transform .35s var(--rebote)} .info.abierta .ver-detalle span{transform:rotate(180deg)} .chips{gap:.4rem} .chip{font-size:.76rem;padding:.32rem .7rem} .info .tarifa{padding-top:.9rem;gap:.7rem} .info .tarifa .v{font-size:1.55rem} } /* ========================================================== RENDIMIENTO DE SCROLL backdrop-filter obliga al navegador a releer y desenfocar el fondo en cada fotograma. Con 36 elementos usandolo, el scroll se traba. Se conserva solo donde aporta (nav, barra movil, tira de datos) y se cambia por color solido en tarjetas, que son la mayoria. ========================================================== */ .sel,.panel,.plan,.filo,.testi,.chip,.eda,.hl-aro,.hist-base,.vit, .conf-datos>div,.tema,.btn-blanco,.btn-ghost,.aviso{ -webkit-backdrop-filter:none!important;backdrop-filter:none!important} .sel{background:rgba(255,255,255,.92)} .panel{background:rgba(255,255,255,.94)} .plan{background:rgba(255,255,255,.93)} .filo{background:rgba(255,255,255,.92)} .vit{background:rgba(255,255,255,.93)} .hist-base{background:rgba(255,255,255,.9)} .conf-datos>div{background:rgba(255,255,255,.92)} .chip{background:rgba(255,255,255,.88)} .eda{background:rgba(255,255,255,.9)} .btn-blanco{background:rgba(255,255,255,.94)} .btn-ghost{background:rgba(255,255,255,.72)} /* Capas que se mueven: se avisa al navegador para que las suba a la GPU */ .hero-bg video,.tapa-fondo video,.banda video,.acuario video,.fondo-vivo video, .halo,.burbuja,.pezfab{will-change:transform;transform:translateZ(0)} .nav{will-change:background,box-shadow} /* En moviles y equipos modestos se apaga lo puramente decorativo */ @media(max-width:860px){ .halo{display:none} .filo::before{animation:none} .plan{animation:none} .sel .ic svg{animation:none} .vit-bicho svg{animation:none} } /* ========================================================== MOVIL v3: cada seccion se mueve distinto. Experiencias -> acordeon vertical (elegir entre 6 se hace viendo las 6) Historias -> casi pantalla completa, como una story real Colecciones -> carrusel con snap e indicador de posicion ========================================================== */ @media(max-width:860px){ /* --- HISTORIAS a pantalla --- */ .hist-bloque{gap:0} .historias{max-width:none!important;margin-inline:-4vw;border-radius:0;max-height:78vh} .hist-segs{top:14px;left:14px;right:14px} .hist-info{padding:1.3rem 0 0} .hist-info h3{font-size:1.55rem} .hist-info>p{font-size:.95rem} /* --- EXPERIENCIAS en acordeon, no carrusel --- */ .selector{display:grid!important;gap:.6rem;overflow:visible!important;margin-inline:0!important;padding:0!important} .sel{width:100%!important;max-width:none!important} .sel::after{content:'';position:absolute;right:1.1rem;top:50%;width:9px;height:9px;margin-top:-6px; border-right:2px solid var(--azul);border-bottom:2px solid var(--azul);transform:rotate(45deg); transition:transform .4s var(--rebote);opacity:.55} .sel.on::after{transform:rotate(-135deg);margin-top:-2px;opacity:1} .exp-layout{display:flex;flex-direction:column;gap:.6rem} .panel{border-radius:22px} /* --- indicador de posicion en carruseles --- */ .puntos{display:flex;gap:.4rem;justify-content:center;margin-top:.2rem} .puntos i{width:6px;height:6px;border-radius:50%;background:rgba(12,63,92,.22);transition:.35s var(--ease)} .puntos i.on{width:20px;border-radius:99px;background:var(--azul)} .vitrina{scroll-padding-inline:4vw} .vit{width:78vw;max-width:320px} .vit-media{aspect-ratio:16/12} } /* ---------- CONCEPTO en movil: compacto y con la foto primero ---------- */ @media(max-width:860px){ #concepto{padding-top:2.8rem;padding-bottom:2.8rem} #concepto::after{height:110px} .concepto-txt h2{font-size:1.72rem;max-width:100%} .concepto-txt>p{font-size:1rem;max-width:100%;margin-top:.8rem} .concepto-txt .sub-seo{font-size:.85rem;margin-top:.7rem} .concepto-txt .btn{margin-top:1.2rem} /* La entrada lateral se acorta: en pantalla angosta 38px se siente brusco */ .concepto-txt .eyebrow,.concepto-txt h2,.concepto-txt p,.concepto-txt .btn{transform:translateY(18px)} .concepto-txt h2 .pal{transform:translateY(14px)} } /* ---------- FILOSOFIA Y CATEGORIAS EN MOVIL ---------- */ @media(max-width:860px){ /* Cada fila de categoria se lee como una tarjeta completa */ .fila{padding:0} .fila-txt{padding:0 .2rem} .fila-txt h3{font-size:1.9rem;letter-spacing:-.03em} .fila-eti{left:12px;top:12px;font-size:.62rem;padding:.36rem .8rem} .fila-items{gap:.5rem;margin-top:1.2rem} .fila-items li{padding:.75rem .9rem;border-radius:14px; background:rgba(255,255,255,.86);box-shadow:inset 0 0 0 1px rgba(12,63,92,.07),0 6px 16px -8px rgba(12,63,92,.18)} .fila-items b{font-size:.96rem} .fila-items i{font-size:.8rem} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} .rv,.bf{opacity:1;transform:none;filter:none} .hero h1 .w{opacity:1;transform:none} html{scroll-behavior:auto} } /* ============================================================ CUMPLEAÑOS — TRES PLANES CON COTIZADOR Todas las clases van prefijadas cp-. Ver la nota en peces.js. ============================================================ */ :root{ --azul-profundo:#0C3F5C; --azul-medio:#116B96; --azul:#1E9AD6; --azul-claro:#8FD6EE; --espuma:#E9F6FC; --amarillo:#F5C93C; --naranja:#E9601E; --coral:#F07C4A; --verde:#7FBF4D; --morado:#9B6FD0; --rojo:#D6453B; --tinta:#0E3348; --tinta-suave:#41647A; --display:'Fredoka',system-ui,sans-serif; --mano:'Caveat',cursive; --texto:'Nunito',system-ui,sans-serif; --ease:cubic-bezier(.22,.9,.3,1); --rebote:cubic-bezier(.34,1.56,.64,1); } .cp-pila{display:grid;gap:2.2rem} .cp-carta,.cp-cuerpo,.cp-arriba,.cp-galeria,.cp-escena{min-width:0;max-width:100%} /* ================= TARJETA ================= */ .cp-carta{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); border-radius:34px;overflow:hidden; background:linear-gradient(158deg,rgba(255,255,255,.96),rgba(233,246,252,.93)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 36px 74px -30px rgba(12,63,92,.55)} /* ---------- VISOR: una sola foto grande, completa, sin recorte ---------- El fondo es la misma foto desenfocada, así una vertical y una horizontal conviven sin franjas muertas y sin perder nada de la decoración. */ .cp-galeria{position:relative;display:flex;flex-direction:column;gap:6px;padding:6px;background:var(--c)} .cp-escena{position:relative;flex:1;min-height:340px;border-radius:29px 6px 6px 6px;overflow:hidden;background:#08344B} .cp-capa{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)} .cp-capa.cp-on{opacity:1} .cp-capa .cp-fondo{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover; filter:blur(28px) saturate(1.3) brightness(.62);transform:scale(1.04)} .cp-capa .cp-real{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1; transform:translate(calc((1 - var(--pe,1)) * var(--dir,1) * -26px),calc((.5 - var(--pe,.5)) * 22px))} .cp-leyenda{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:3.4rem 1.2rem 1.05rem;color:#fff; font-size:1.02rem;font-weight:700;line-height:1.3;text-shadow:0 2px 12px rgba(4,32,50,.95); background:linear-gradient(transparent,rgba(4,32,50,.35) 40%,rgba(4,32,50,.88)); transition:opacity .3s var(--ease),transform .45s var(--ease)} .cp-leyenda.cp-cambia{opacity:0;transform:translateY(8px)} .cp-lupa{position:absolute;right:12px;top:12px;z-index:4;width:34px;height:34px;border-radius:50%;border:0; cursor:pointer;background:rgba(255,255,255,.92);color:var(--azul-profundo);font-size:.9rem; box-shadow:0 8px 20px -6px rgba(4,32,50,.7);transition:transform .35s var(--rebote)} .cp-lupa:hover{transform:scale(1.1)} /* Las miniaturas: ninguna es un destino final, todas pueden subir */ .cp-tira{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .cp-mini{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;border:0;cursor:pointer;padding:0; background:#08344B;box-shadow:inset 0 0 0 0 rgba(255,255,255,0); transition:box-shadow .35s var(--ease),transform .4s var(--rebote),opacity .35s var(--ease)} .cp-mini:first-child{border-bottom-left-radius:29px} .cp-mini:last-child{border-bottom-right-radius:29px} .cp-mini img{width:100%;height:100%;object-fit:cover;opacity:.72;transition:opacity .35s var(--ease),transform .8s var(--ease)} .cp-mini:hover img{opacity:1;transform:scale(1.08)} .cp-mini.cp-on{box-shadow:inset 0 0 0 3px #fff;transform:translateY(-2px)} .cp-mini.cp-on img{opacity:1} .cp-mini .cp-barra{position:absolute;left:0;bottom:0;height:3px;width:0;background:#fff;z-index:2} .cp-mini.cp-on .cp-barra{animation:corre 5.4s linear forwards} @keyframes corre{to{width:100%}} .cp-galeria.cp-quieta .cp-mini.cp-on .cp-barra{animation-play-state:paused} /* La que vuela de miniatura a grande */ .cp-vuela{position:fixed;z-index:150;border-radius:8px;overflow:hidden;pointer-events:none; box-shadow:0 30px 60px -20px rgba(4,32,50,.8)} .cp-vuela img{width:100%;height:100%;object-fit:cover} .cp-cuerpo{position:relative;padding:2rem 2rem 1.8rem;display:flex;flex-direction:column;justify-content:center;gap:.85rem} .cp-bicho{position:absolute;right:-14px;top:-12px;width:clamp(88px,10vw,124px);opacity:.92;pointer-events:none; filter:drop-shadow(0 12px 20px rgba(12,63,92,.28));animation:nada 6.6s ease-in-out infinite} @keyframes nada{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -10px;rotate:-3deg}} .cp-orden{font-family:var(--mano);font-size:1.2rem;font-weight:700;color:var(--c);line-height:1} .cp-cuerpo h3{font-family:var(--display);font-weight:600;font-size:clamp(1.45rem,2.3vw,1.95rem); color:var(--azul-profundo);letter-spacing:-.02em;line-height:1.1;margin-top:.1rem;max-width:14ch} .cp-cuando{font-size:.82rem;font-weight:800;color:var(--tinta-suave);margin-top:.4rem} .cp-arriba>p{color:var(--tinta-suave);font-size:.94rem;margin-top:.55rem} /* El sello dice lo unico que separa un plan del otro: si el parque es solo tuyo o no. Antes era un recuadro plano de color; ahora tiene riel lateral, icono en pastilla, textura diagonal y una etiqueta que le da jerarquia. El icono es SVG, no emoji: el emoji no se renderiza igual en todos los equipos y en Windows salia un cuadrado vacio. */ .cp-sello{position:relative;display:flex;gap:.8rem;align-items:flex-start;margin-top:.85rem; padding:.85rem 1rem .85rem 1.15rem;border-radius:18px;overflow:hidden; background:#fff; box-shadow:inset 0 0 0 1px var(--sr,rgba(12,63,92,.12)),0 14px 30px -20px var(--sa,rgba(12,63,92,.6)); transition:box-shadow .4s var(--ease),transform .4s var(--rebote)} .cp-sello:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--sa),0 20px 38px -20px var(--sa)} /* riel de color a la izquierda */ .cp-sello::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px; background:linear-gradient(var(--sa),color-mix(in srgb,var(--sa) 55%,#fff))} /* textura diagonal muy tenue, para que no quede un bloque liso */ .cp-sello::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5; background:repeating-linear-gradient(122deg,var(--st) 0 2px,transparent 2px 11px)} .cp-sello>*{position:relative;z-index:1} .cp-sello .cp-ico{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center; background:linear-gradient(160deg,color-mix(in srgb,var(--sa) 62%,#fff),var(--sa)); box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 16px -8px var(--sa)} .cp-sello .cp-ico svg{width:19px;height:19px;display:block;fill:none;stroke:#fff;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round} .cp-sello .cp-dice{min-width:0;font-size:.85rem;line-height:1.34;color:var(--st2)} .cp-sello b{display:block;font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--sb); line-height:1.2;margin-bottom:.1rem} .cp-sello .cp-tag{display:inline-block;margin-top:.4rem;font-size:.63rem;font-weight:800;letter-spacing:.13em; text-transform:uppercase;color:var(--sa);background:color-mix(in srgb,var(--sa) 13%,#fff); border-radius:999px;padding:.24rem .6rem;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sa) 28%,#fff)} /* Abierto al publico: aviso honesto, en ambar */ .cp-sello.cp-abierto{--sa:#D9A200;--sr:rgba(217,162,0,.3);--st:rgba(217,162,0,.09);--sb:#5E4800;--st2:#7A6220} /* Exclusivo: toma el color del propio plan, porque es una virtud suya */ .cp-sello.cp-privado{--sa:var(--c);--sr:color-mix(in srgb,var(--c) 26%,transparent); --st:color-mix(in srgb,var(--c) 8%,transparent);--sb:var(--azul-profundo);--st2:var(--tinta-suave)} .cp-precios{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem} .cp-plan{flex:1;min-width:100px;background:rgba(255,255,255,.92);border-radius:15px;padding:.55rem .65rem; box-shadow:inset 0 0 0 1px rgba(12,63,92,.09)} .cp-plan .cp-n{font-size:.7rem;font-weight:800;color:var(--tinta-suave);letter-spacing:.03em;text-transform:uppercase} .cp-plan .cp-v{display:block;font-family:var(--display);font-weight:600;font-size:1.1rem;color:var(--naranja);line-height:1.15} .cp-incluye{display:grid;grid-template-columns:1fr 1fr;gap:.42rem;margin-top:.8rem} .cp-inc{display:flex;gap:.5rem;align-items:flex-start;padding:.5rem .6rem;border-radius:13px; background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px rgba(12,63,92,.08); font-size:.77rem;line-height:1.22;color:var(--tinta-suave);transition:transform .35s var(--rebote)} .cp-inc:hover{transform:translateY(-2px)} .cp-inc .cp-ic{flex:none;width:19px;height:19px;border-radius:50%;margin-top:.05rem; background:radial-gradient(circle at 32% 28%,#fff,rgba(143,214,238,.85) 55%,rgba(30,154,214,.3)); box-shadow:inset 0 0 0 1px rgba(30,154,214,.35)} .cp-inc b{display:block;font-family:var(--display);font-weight:600;color:var(--azul-profundo);font-size:.83rem} .cp-acciones{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.95rem;padding-top:.85rem;border-top:1px dashed rgba(12,63,92,.18)} .cp-btn{display:inline-flex;align-items:center;gap:.45rem;border:0;cursor:pointer;font:inherit; font-family:var(--display);font-weight:600;font-size:.9rem;border-radius:999px;padding:.72rem 1.3rem; transition:transform .35s var(--rebote);text-decoration:none} .cp-btn-wa{background:linear-gradient(165deg,#42CC63,#25A24A);color:#fff;box-shadow:0 14px 30px -12px rgba(37,162,74,.9)} .cp-btn-ver{background:rgba(255,255,255,.92);color:var(--azul-profundo);box-shadow:inset 0 0 0 1.5px rgba(30,154,214,.4)} .cp-btn:hover{transform:translateY(-3px)} /* ---------- pantalla completa ---------- */ .cp-pleno{position:fixed;inset:0;z-index:220;background:rgba(4,32,50,.94);display:none;place-items:center;padding:4vh 4vw; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .cp-pleno.cp-on{display:grid} .cp-pleno figure{display:grid;place-items:center;gap:.9rem} .cp-pleno img{max-width:92vw;max-height:80vh;object-fit:contain;border-radius:16px;box-shadow:0 40px 90px -30px #000} .cp-pleno figcaption{color:#fff;font-family:var(--display);font-weight:500;font-size:1rem;text-align:center;max-width:48ch} .cp-pleno button{position:absolute;border:0;cursor:pointer;background:rgba(255,255,255,.92);color:var(--azul-profundo); border-radius:50%;width:46px;height:46px;font-size:1.2rem} .cp-pleno .cp-ce{top:20px;right:22px;width:40px;height:40px} .cp-pleno .cp-an{left:3vw;top:50%;transform:translateY(-50%)} .cp-pleno .cp-si{right:3vw;top:50%;transform:translateY(-50%)} /* ================= POPUP ================= */ .cp-telon{position:fixed;inset:0;z-index:200;opacity:0;pointer-events:none;background:rgba(4,32,50,.55); -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);transition:opacity .45s var(--ease)} .cp-telon.cp-on{opacity:1;pointer-events:auto} .cp-detalle{position:fixed;left:50%;bottom:0;z-index:201;width:min(48rem,96vw);max-height:90vh; transform:translate(-50%,102%);transition:transform .65s var(--rebote); border-radius:32px 32px 0 0;overflow:hidden;display:flex;flex-direction:column; background:linear-gradient(172deg,#2FA6DE 0%,var(--azul) 30%,var(--azul-medio) 72%,var(--azul-profundo) 100%); box-shadow:0 -30px 90px -30px rgba(4,32,50,.9)} .cp-detalle.cp-on{transform:translate(-50%,0)} .cp-burbujas{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .cp-burbujas i{position:absolute;bottom:-40px;border-radius:50%; background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.8),rgba(255,255,255,.12) 48%,transparent 72%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);animation:sube linear infinite} @keyframes sube{0%{transform:translateY(0);opacity:0}12%{opacity:.7}100%{transform:translateY(-90vh) translateX(20px);opacity:0}} .cp-det-cab{position:relative;z-index:4;padding:1.1rem 1.5rem .3rem;flex:none} .cp-det-cab .cp-eti{font-family:var(--mano);font-size:1.1rem;font-weight:700;color:var(--amarillo);line-height:1} .cp-det-cab h2{font-family:var(--display);font-weight:600;color:#fff;letter-spacing:-.02em; font-size:clamp(1.3rem,4vw,1.7rem);line-height:1.1} .cp-det-cab .cp-sub{color:rgba(255,255,255,.86);font-size:.84rem;font-weight:700;margin-top:.15rem} .cp-det-bicho{position:absolute;right:3.4rem;top:-.4rem;width:clamp(58px,9vw,84px);z-index:5; filter:drop-shadow(0 12px 20px rgba(4,32,50,.55));animation:nada 7.4s ease-in-out infinite} .cp-cerrar{position:absolute;right:1rem;top:1rem;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer; background:rgba(255,255,255,.94);color:var(--azul-profundo);z-index:6;font-size:.9rem; box-shadow:0 10px 24px -8px rgba(4,32,50,.8)} .cp-cuerpo-det{position:relative;z-index:4;flex:1;overflow-y:auto;padding:.6rem 1.5rem 1.2rem;-webkit-overflow-scrolling:touch} .cp-paso{margin-top:.85rem} .cp-paso h4{font-family:var(--display);font-weight:600;font-size:.79rem;letter-spacing:.14em;text-transform:uppercase; color:rgba(255,255,255,.72);margin-bottom:.42rem} .cp-ops{display:flex;gap:.38rem;flex-wrap:wrap} .cp-ops.cp-rueda{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:.3rem;scroll-snap-type:x proximity} .cp-ops.cp-rueda::-webkit-scrollbar{display:none} .cp-ops.cp-rueda .cp-op{flex:none;scroll-snap-align:start} .cp-op{border:0;cursor:pointer;font:inherit;font-family:var(--display);font-weight:600;font-size:.84rem; color:#fff;background:rgba(255,255,255,.14);border-radius:15px;padding:.52rem .82rem; box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);text-align:left;line-height:1.2; transition:all .3s var(--ease),transform .35s var(--rebote)} .cp-op:hover{background:rgba(255,255,255,.24)} .cp-op em{display:block;font-style:normal;font-family:var(--texto);font-size:.7rem;font-weight:800; color:var(--amarillo);margin-top:.12rem} .cp-op.cp-on{background:#fff;color:var(--azul-profundo);box-shadow:0 10px 24px -10px rgba(4,32,50,.75);transform:translateY(-2px)} .cp-op.cp-on em{color:var(--naranja)} .cp-extra{display:flex;align-items:center;gap:.55rem;padding:.48rem .55rem .48rem .8rem;border-radius:15px; background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);margin-bottom:.38rem} .cp-extra .cp-t{flex:1;min-width:0;color:#fff;font-size:.85rem;line-height:1.2} .cp-extra .cp-t b{display:block;font-family:var(--display);font-weight:600;font-size:.92rem} .cp-extra .cp-t span{color:rgba(255,255,255,.75);font-size:.75rem} .cp-extra .cp-p{font-family:var(--display);font-weight:600;color:var(--amarillo);font-size:.88rem;white-space:nowrap} .cp-cont{display:flex;align-items:center;gap:.28rem;flex:none} .cp-cont button{width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;font-size:1rem;line-height:1; background:rgba(255,255,255,.9);color:var(--azul-profundo);font-weight:800;transition:transform .3s var(--rebote)} .cp-cont button:hover{transform:scale(1.1)} .cp-cont button:disabled{opacity:.35;cursor:default;transform:none} .cp-cont .cp-n{min-width:24px;text-align:center;color:#fff;font-family:var(--display);font-weight:600} .cp-pliegue{margin-top:.85rem;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)} .cp-pliegue>button{width:100%;border:0;cursor:pointer;font:inherit;font-family:var(--display);font-weight:600; font-size:.87rem;color:#fff;background:none;padding:.7rem .9rem;display:flex;justify-content:space-between;align-items:center} .cp-pliegue>button .cp-fl{transition:transform .4s var(--rebote)} .cp-pliegue.cp-abierto>button .cp-fl{transform:rotate(180deg)} .cp-pliegue .cp-caja{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)} .cp-pliegue.cp-abierto .cp-caja{grid-template-rows:1fr} .cp-pliegue .cp-caja>div{overflow:hidden;min-height:0} .cp-lista{padding:0 .9rem .85rem;margin:0} .cp-lista li{list-style:none;position:relative;padding-left:1.05rem;color:rgba(255,255,255,.9);font-size:.84rem; line-height:1.38;margin-bottom:.26rem} .cp-lista li::before{content:'';position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--amarillo)} .cp-resumen{margin-top:.95rem;border-radius:20px;padding:.9rem 1rem; background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.32)} .cp-resumen h4{font-family:var(--display);font-weight:600;font-size:.96rem;color:#fff;margin-bottom:.4rem} .cp-res-li{display:flex;justify-content:space-between;gap:.7rem;align-items:baseline;color:rgba(255,255,255,.94); font-size:.85rem;padding:.28rem 0;border-bottom:1px dashed rgba(255,255,255,.2)} .cp-res-li:last-child{border-bottom:0} .cp-res-li .cp-q{font-family:var(--display);font-weight:600;color:var(--amarillo);white-space:nowrap} .cp-res-li.cp-cot .cp-q{color:rgba(255,255,255,.72);font-family:var(--texto);font-size:.77rem;font-weight:800} .cp-det-pie{position:relative;z-index:5;flex:none;display:flex;gap:.7rem;justify-content:space-between;align-items:center; padding:.72rem 1.5rem;background:rgba(4,32,50,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);flex-wrap:wrap} .cp-total{color:#fff;line-height:1.1} .cp-total .cp-v{font-family:var(--display);font-weight:600;font-size:1.35rem} .cp-total .cp-n{display:block;font-size:.66rem;font-weight:800;color:rgba(255,255,255,.7);letter-spacing:.05em;text-transform:uppercase} .cp-total .cp-mas{display:block;font-size:.69rem;color:var(--amarillo);font-weight:800} @media(max-width:900px){ .cp-carta{grid-template-columns:1fr} .cp-escena{min-height:0;aspect-ratio:4/3;border-radius:29px 29px 6px 6px} .cp-mini:first-child{border-bottom-left-radius:6px} .cp-mini:last-child{border-bottom-right-radius:6px} .cp-cuerpo{padding:1.4rem 1.2rem} .cp-bicho{width:76px;right:-6px;top:-16px} .cp-cuerpo h3{max-width:none} .cp-incluye{grid-template-columns:1fr} .cp-detalle{width:100vw;max-height:94vh;border-radius:24px 24px 0 0} .cp-det-cab,.cp-cuerpo-det,.cp-det-pie{padding-left:1rem;padding-right:1rem} .cp-det-pie{position:sticky;bottom:0} .cp-btn{flex:1;justify-content:center} } @media(prefers-reduced-motion:reduce){ .cp-bicho,.cp-det-bicho,.cp-burbujas i,.cp-mini.cp-on .cp-barra{animation:none} .cp-detalle{transition:none} } /* ---------- CUMPLEAÑOS: el scroll mueve lo que ya hay ---------- No cambia el diseño. Solo ata a la posicion real del scroll dos cosas que ya existian: el fondo de la tapa y la tarjeta de video vertical. Nada se dispara solo, todo interpola sobre --pc. */ .tapa-fondo video{will-change:transform} #cumpleanos .tapa-fondo video, .tapa .tapa-fondo video{transform:translateY(var(--par-tapa,0)) scale(1.06)} .cumple-video{ transform:translateY(calc((1 - var(--pc,0)) * 34px)) rotate(calc((1 - var(--pc,0)) * -2.2deg)) scale(calc(.96 + var(--pc,0) * .04)); transition:box-shadow .5s var(--ease);will-change:transform} .cumple-video:hover{box-shadow:0 34px 64px -22px rgba(12,63,92,.55)} .cumple-grid .concepto-txt, .cumple-grid > div:last-child{transform:translateY(calc((1 - var(--pc,0)) * 18px));opacity:calc(.35 + var(--pc,0) * .65)} @media(prefers-reduced-motion:reduce){ .cumple-video,.cumple-grid > div:last-child{transform:none!important;opacity:1!important} .tapa-fondo video{transform:scale(1.06)!important} } /* ---------- CUMPLEAÑOS: las tarjetas ligadas al scroll ---------- Cinco efectos, todos interpolando sobre --pe (0 al asomarse, 1 centrada). Ninguno se dispara solo. Si el navegador pide menos movimiento, --pe queda en 1 y la tarjeta se ve exactamente igual que ahora, quieta. */ /* Entran alternadas: la primera por la derecha, la segunda por la izquierda, la tercera por la derecha. --dir invierte el sentido. El desplazamiento lateral lo recorta html,body{overflow-x:clip}. */ .cp-carta{--dir:1; transform:translateX(calc((1 - var(--pe,1)) * var(--dir) * 120px)) translateY(calc((1 - var(--pe,1)) * 26px)) rotate(calc((1 - var(--pe,1)) * var(--dir) * .9deg)) scale(calc(.965 + var(--pe,1) * .035)); opacity:calc(.35 + var(--pe,1) * .65); will-change:transform} .cp-carta:nth-of-type(even){--dir:-1} /* La foto se resiste al movimiento lateral (ver .cp-capa .cp-real arriba): da peso, como si la tarjeta arrastrara la imagen en vez de llevarla pegada. */ /* El cuerpo de texto llega un instante despues que la foto */ .cp-cuerpo{transform:translateX(calc((1 - var(--pe,1)) * var(--dir) * 34px));opacity:calc(.4 + var(--pe,1) * .6)} /* La foto grande se mueve más despacio que la tarjeta: profundidad real */ .cp-capa .cp-fondo{transform:scale(calc(1.04 + var(--pe,1) * .06)) translateY(calc((.5 - var(--pe,.5)) * -14px))} /* La criatura entra nadando desde el borde */ .cp-bicho{transform:translateX(calc((1 - var(--pe,1)) * 46px)) rotate(calc((1 - var(--pe,1)) * 12deg)); opacity:calc(var(--pe,1) * .92)} /* Las miniaturas se reparten como cartas, una detrás de otra */ .cp-mini{opacity:calc(var(--m,1));transform:translateY(calc((1 - var(--m,1)) * 16px))} /* El riel de color del borde superior se dibuja al entrar */ .cp-galeria{position:relative} .cp-galeria::after{content:'';position:absolute;left:6px;right:6px;top:0;height:3px;z-index:5; border-radius:0 0 4px 4px;background:#fff;opacity:.85; transform:scaleX(var(--pe,1));transform-origin:left} @media(prefers-reduced-motion:reduce){ .cp-carta,.cp-cuerpo,.cp-capa .cp-real,.cp-capa .cp-fondo,.cp-bicho,.cp-mini{transform:none!important;opacity:1!important} .cp-galeria::after{transform:none} } /* ---------- EXPERIENCIAS: tarifas desplegables y recomendaciones ---------- Prefijo ex- por la misma razon que cp-: .tar, .precio, .quien y .ver son nombres demasiado genericos para soltarlos en este CSS. */ .ex-acciones{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center} .ex-ver{position:relative} .ex-cheq{display:inline-block;transition:transform .45s var(--rebote)} .ex-ver[aria-expanded="true"] .ex-cheq{transform:rotate(180deg)} .ex-tabla{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)} .ex-tabla.ex-abierta{grid-template-rows:1fr} .ex-tabla>div{overflow:hidden;min-height:0} .ex-rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;padding-top:1rem} .ex-tar{background:rgba(255,255,255,.9);border-radius:18px;padding:.85rem .9rem; box-shadow:inset 0 0 0 1px rgba(12,63,92,.09); opacity:0;transform:translateY(12px); transition:opacity .45s var(--ease),transform .5s var(--ease),box-shadow .35s var(--ease)} .ex-tabla.ex-abierta .ex-tar{opacity:1;transform:none} .ex-tabla.ex-abierta .ex-tar:nth-child(1){transition-delay:.06s} .ex-tabla.ex-abierta .ex-tar:nth-child(2){transition-delay:.14s} .ex-tabla.ex-abierta .ex-tar:nth-child(3){transition-delay:.22s} .ex-tar:hover{box-shadow:inset 0 0 0 1.5px rgba(30,154,214,.4),0 14px 30px -14px rgba(30,154,214,.6)} .ex-quien{display:block;font-family:var(--display);font-weight:600;font-size:.95rem; color:var(--azul-profundo);line-height:1.2} .ex-quien span{display:block;font-family:var(--texto);font-size:.78rem;color:var(--tinta-suave); font-weight:700;margin-top:.12rem} .ex-precio{display:block;font-family:var(--display);font-weight:600;font-size:1.35rem; color:var(--naranja);margin-top:.5rem;line-height:1} /* La recomendacion se dice con palabras, no como requisito en una ficha */ .ex-sugerencia{display:flex;align-items:flex-start;gap:.6rem;margin-top:.7rem; font-family:var(--mano);font-weight:600;font-size:1.12rem;line-height:1.3;color:var(--azul-medio)} .ex-gota{flex:none;width:18px;height:18px;margin-top:.15rem;border-radius:50%; background:radial-gradient(circle at 32% 28%,#fff,rgba(143,214,238,.85) 55%,rgba(30,154,214,.28)); box-shadow:inset 0 0 0 1px rgba(30,154,214,.35); animation:ex-burbujea 3.6s ease-in-out infinite} @keyframes ex-burbujea{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} @media(max-width:720px){ .ex-rejilla{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ .ex-gota{animation:none} } /* Dos piezas que solo usa Experiencias dentro de la tarjeta */ .ex-tarifa{margin-top:.7rem;font-family:var(--display);font-weight:600;font-size:1.02rem; color:var(--naranja);line-height:1.25} .ex-nota{margin-top:.9rem;font-family:var(--mano);font-weight:600;font-size:1.12rem; line-height:1.3;color:var(--azul-medio)} /* ---------- Para ellos y para ti: mosaico que prueba lo que promete ---------- */ /* Tres columnas: una foto ancha arriba y tres cuadradas debajo. Con dos columnas, las tres pequenas dejaban una casilla vacia al final. */ .pt-mosaico{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;min-width:0} .pt-foto{position:relative;margin:0;overflow:hidden;border-radius:22px;background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 22px 46px -28px rgba(0,0,0,.8); opacity:calc(.25 + var(--pt,1) * .75); transform:translateY(calc((1 - var(--pt,1)) * 26px)) scale(calc(.97 + var(--pt,1) * .03)); transition:box-shadow .45s var(--ease)} .pt-foto:first-child{grid-column:1 / -1} .pt-mosaico>.pt-foto:nth-child(n+5){display:none} .pt-foto img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .8s var(--ease)} .pt-foto:hover img{transform:scale(1.05)} .pt-foto:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 30px 60px -24px rgba(0,0,0,.9)} /* El pie aparece al pasar el mouse: en reposo manda la foto, no el texto. */ .pt-foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:2rem .95rem .8rem; font-family:var(--display);font-weight:400;font-size:.82rem;color:#fff;line-height:1.3; letter-spacing:.005em; background:linear-gradient(transparent,rgba(4,32,47,.88)); opacity:0;transform:translateY(8px); transition:opacity .45s var(--ease),transform .5s var(--ease)} .pt-foto:hover figcaption,.pt-foto:focus-within figcaption{opacity:1;transform:none} .pt-foto:first-child{aspect-ratio:16/10} .pt-foto:not(:first-child){aspect-ratio:1/1} @media(max-width:720px){ .pt-mosaico{grid-template-columns:repeat(3,1fr)} .pt-foto figcaption{font-size:.74rem;padding:1.1rem .6rem .5rem} } @media(prefers-reduced-motion:reduce){ .pt-foto{opacity:1;transform:none} } /* Experiencias: las tarjetas van una debajo de otra, sin apilarse ni moverse. La firma de esta pagina es el contenido, no el efecto. */ .cp-pila.ex-torre{display:grid;gap:clamp(2.4rem,5vw,4.5rem)} /* ============================================================ MOVIL: correcciones de tacto y de entrada ============================================================ */ /* 1. En pantalla tactil no existe el hover, pero el navegador lo deja pegado tras el toque. Por eso una tarjeta se quedaba levantada y parecia montarse sobre la siguiente. Aqui se anulan todos los desplazamientos de hover donde no hay raton. */ @media (hover:none){ .filo:hover,.plan:hover,.ben:hover,.cp-carta:hover,.pt-foto:hover, .cp-sello:hover,.ex-tar:hover,.cp-btn:hover,.co-btn:hover{transform:none} .filo:hover{box-shadow:inset 0 0 0 1px #fff,0 18px 44px -22px rgba(12,63,92,.28)} } /* 2. La entrada en movil es solo un fundido corto. El desplazamiento y la escala hacian que dos tarjetas seguidas se cruzaran mientras entraban, y al subir el scroll quedaban a medio camino. Asi entra suave, rapido y en los dos sentidos. */ @media (max-width:860px){ .rv{opacity:0;transform:none;transition:opacity .38s ease} .rv.in{opacity:1!important;transform:none} .filos{gap:1.15rem} .filo{padding:1.7rem 1.35rem} .filo-foto{margin:-1.7rem -1.35rem 1.1rem;aspect-ratio:16/10} .filo h3{font-size:1.28rem} .filo p{font-size:.94rem} } /* 3. La barra de abajo NO se esconde: es el CTA permanente. */ .barra-movil{transform:none!important} /* 4. Una sola X. Las tres lineas ya se convierten en X al abrir, asi que no se crea otra. Lo que faltaba era que se viera contra el fondo azul y que fuera comoda de tocar. */ .menu-cerrar{display:none!important} @media(max-width:860px){ /* La X del burger, blanca y con area de toque de 46 px */ body.menu-abierto .burger{padding:.72rem;border-radius:50%; background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)} body.menu-abierto .burger span{background:#fff} body.menu-abierto .burger:active{transform:scale(.93)} } /* ====================== CONTACTANOS (co-) ====================== Modulo nuevo: prefijo propio para no chocar con nada existente. */ .co{padding:3.4rem 0 4rem;background:linear-gradient(#eaf6fd,#fff 34%)} .co-ola{position:relative;height:340px;overflow:hidden; --co-corte:url("data:image/svg+xml;utf8,"); -webkit-mask-image:var(--co-corte);mask-image:var(--co-corte); -webkit-mask-size:100% 100%;mask-size:100% 100%; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .co-ola iframe{width:100%;height:100%;border:0;display:block; filter:saturate(.84) contrast(1.05) hue-rotate(-6deg)} .co-buba{position:absolute;bottom:-30px;border-radius:50%;pointer-events:none;z-index:2;opacity:0; background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),rgba(255,255,255,.18) 55%,rgba(255,255,255,.06)); box-shadow:inset 0 0 8px rgba(255,255,255,.5);animation:co-sube linear infinite} @keyframes co-sube{0%{transform:translateY(0);opacity:0}12%{opacity:.72}88%{opacity:.48} 100%{transform:translateY(-420px) translateX(18px);opacity:0}} .co-pin{position:absolute;left:50%;top:44%;width:15px;height:15px;margin:-7px 0 0 -7px;z-index:3; border-radius:50%;background:var(--naranja,#f4691f);pointer-events:none; box-shadow:0 0 0 0 rgba(244,105,31,.55);animation:co-lat 2.6s infinite} @keyframes co-lat{70%{box-shadow:0 0 0 24px rgba(244,105,31,0)}100%{box-shadow:0 0 0 0 rgba(244,105,31,0)}} .co-pista{position:absolute;right:.8rem;top:.8rem;z-index:3;pointer-events:none; background:rgba(12,63,92,.72);color:#fff;font-size:.72rem;font-weight:600; padding:.32rem .68rem;border-radius:999px;transition:opacity .5s var(--ease)} .co-bajo{display:grid;gap:.7rem;margin-top:-2.6rem;position:relative;z-index:4} .co-dato{position:relative;display:block;width:100%;text-align:left;font:inherit;color:inherit; background:#fff;border:1px solid rgba(30,154,214,.2);border-radius:20px; padding:1.05rem 1.1rem .95rem;cursor:pointer;overflow:hidden;text-decoration:none; box-shadow:0 16px 34px -22px rgba(12,63,92,.6); transition:transform .34s var(--rebote),box-shadow .34s var(--ease),border-color .3s} .co-dato::after{content:'';position:absolute;right:-38px;bottom:-38px;width:92px;height:92px; border-radius:50%;background:rgba(30,154,214,.07);transition:transform .5s var(--ease)} .co-dato:hover{transform:translateY(-5px);box-shadow:0 24px 42px -22px rgba(12,63,92,.62); border-color:rgba(30,154,214,.5)} .co-dato:hover::after{transform:scale(1.35)} .co-dato:focus-visible{outline:3px solid var(--amarillo,#ffd23f);outline-offset:4px} .co-bicho{width:44px;height:44px;margin-bottom:.55rem;display:block;object-fit:contain; filter:drop-shadow(0 5px 10px rgba(12,63,92,.22)); transition:transform .5s var(--rebote)} .co-dato:hover .co-bicho{transform:translateY(-3px) rotate(-6deg)} .co-dato h4{margin:0 0 .18rem;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase; color:var(--azul,#1e9ad6);font-weight:800} .co-dato p{margin:0;font-size:.95rem;line-height:1.45;font-weight:600;word-break:break-word} .co-dato small{display:block;margin-top:.3rem;font-size:.78rem;font-weight:500;color:#5c7d92} .co-accion{display:block;margin-top:.6rem;font-size:.76rem;font-weight:700; color:var(--azul,#1e9ad6);opacity:.55;transition:opacity .3s} .co-dato:hover .co-accion{opacity:1} .co-estado{display:inline-flex;align-items:center;gap:.36rem;margin-top:.4rem; font-size:.76rem;font-weight:700;padding:.2rem .6rem;border-radius:999px} .co-estado i{width:7px;height:7px;border-radius:50%;display:block} .co-estado.co-abierto{background:rgba(37,211,102,.16);color:#12703c} .co-estado.co-abierto i{background:#25D366;animation:co-lat 2.2s infinite} .co-estado.co-cerrado{background:rgba(12,63,92,.09);color:#4b6b80} .co-estado.co-cerrado i{background:#8fa9b8} .co-acciones{display:grid;gap:.55rem;margin-top:1rem} .co-aviso{position:fixed;left:50%;bottom:1.2rem;transform:translate(-50%,20px);z-index:130; background:var(--azul-profundo,#0c3f5c);color:#fff;padding:.62rem 1.1rem;border-radius:999px; font-size:.85rem;font-weight:600;opacity:0;pointer-events:none; transition:opacity .3s var(--ease),transform .3s var(--rebote)} .co-aviso.ver{opacity:1;transform:translate(-50%,0)} @media(min-width:861px){ .co-ola{height:440px} .co-bajo{grid-template-columns:repeat(4,1fr)} .co-acciones{grid-template-columns:1fr 1fr;max-width:32rem;margin-inline:auto} } @media(hover:none){ .co-dato:hover{transform:none;box-shadow:0 16px 34px -22px rgba(12,63,92,.6)} .co-dato:hover .co-bicho{transform:none} .co-accion{opacity:1} } @media(prefers-reduced-motion:reduce){ .co-buba,.co-pin,.co-estado.co-abierto i{animation:none} } /* ====================== GALERIA OJOS DE BUEY (gb-) ====================== La portilla del submarino que ya existe en la entrada, repetida. */ .gb{padding:3.2rem 0 4rem; background:radial-gradient(120% 80% at 50% -10%,#2a93cc 0%,#12557f 40%,#062033 100%); color:#fff} .gb .eyebrow{color:var(--amarillo,#ffd23f);justify-content:center} .gb h2{text-align:center;color:#fff} .gb h2 em{font-style:normal;color:var(--amarillo,#ffd23f)} .gb .gb-intro{text-align:center;max-width:34rem;margin:0 auto 2.2rem; line-height:1.65;color:rgba(255,255,255,.82)} .gb-banco{display:grid;gap:.9rem;grid-template-columns:repeat(2,1fr)} .gb-ojo{position:relative;display:block;padding:0;border:0;cursor:pointer;overflow:hidden; background:#0a2c44;font:inherit;color:inherit;border-radius:26px;aspect-ratio:3/4; box-shadow:0 20px 44px -20px rgba(2,18,30,.9), inset 0 0 0 6px rgba(255,255,255,.16), inset 0 0 0 11px rgba(30,154,214,.5); transform:rotate(var(--gr,0deg)); animation:gb-flota 7s var(--ease) infinite;animation-delay:var(--gd,0s); transition:transform .5s var(--rebote),box-shadow .4s var(--ease)} @keyframes gb-flota{0%,100%{translate:0 0}50%{translate:0 -9px}} .gb-ojo:hover,.gb-ojo:focus-visible{transform:rotate(0deg) scale(1.03);outline:0; box-shadow:0 28px 54px -20px rgba(2,18,30,.95), inset 0 0 0 6px rgba(255,255,255,.3), inset 0 0 0 11px rgba(255,210,63,.75)} .gb-ojo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)} .gb-ojo:hover img{transform:scale(1.07)} .gb-vidrio{position:absolute;inset:0;pointer-events:none;border-radius:inherit;mix-blend-mode:screen; background:radial-gradient(80% 50% at 26% 12%,rgba(255,255,255,.42),transparent 62%), linear-gradient(180deg,transparent 58%,rgba(2,24,40,.5))} .gb-ojo::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(180deg,transparent 62%,rgba(2,24,40,.66))} .gb-pie{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:.9rem .95rem;text-align:center} .gb-pie b{display:inline-block;font-size:1.02rem;line-height:1.15;font-weight:800; text-shadow:0 2px 14px rgba(2,24,40,.95),0 1px 3px rgba(2,24,40,.8)} .gb-ojo.gb-circulo{border-radius:50%;aspect-ratio:1/1} .gb-ojo.gb-circulo .gb-pie{padding-bottom:1.5rem} .gb-ojo.gb-ancha{aspect-ratio:4/3} .gb-visor{position:fixed;inset:0;z-index:140;display:none;place-items:center;padding:1.2rem; background:rgba(3,20,34,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .gb-visor.abierto{display:grid} .gb-visor img{max-width:100%;max-height:74vh;border-radius:20px;display:block; box-shadow:0 30px 70px -24px rgba(0,0,0,.9)} .gb-txt{text-align:center;margin-top:1rem;color:#fff} .gb-txt b{display:block;font-size:1.1rem} .gb-txt i{font-style:normal;font-size:.88rem;color:rgba(255,255,255,.75)} .gb-cerrar{position:absolute;top:1rem;right:1rem;width:44px;height:44px;border-radius:50%; border:0;background:rgba(255,255,255,.16);color:#fff;font-size:1.4rem;cursor:pointer} @media(min-width:861px){ .gb-banco{grid-template-columns:repeat(4,1fr);gap:1.1rem} .gb-ojo.gb-grande{grid-column:span 2;grid-row:span 2;aspect-ratio:auto} .gb-ojo.gb-ancha{grid-column:span 2;aspect-ratio:16/9} } @media(hover:none){ .gb-ojo{animation:none} .gb-ojo:hover{transform:rotate(var(--gr,0deg))} .gb-ojo:hover img{transform:none} } @media(prefers-reduced-motion:reduce){ .gb-ojo{animation:none} } /* ---------- Conocenos abre con la galeria: el video es el fondo del titulo ---------- */ .gb{position:relative;overflow:hidden;padding-top:clamp(4rem,14vh,7rem)} .gb-fondo-caja{position:absolute;inset:0;z-index:0;overflow:hidden} .gb-fondo{width:100%;height:100%;object-fit:cover;display:block} .gb-velo{position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(4,32,50,.42) 0%,rgba(6,32,51,.62) 46%,#062033 88%)} .gb .wrap{position:relative;z-index:2} .gb-tit{text-align:center;color:#fff;font-weight:800;margin:.75rem 0 .6rem; font-size:clamp(2rem,7vw,3.2rem);line-height:1.08;text-shadow:0 4px 26px rgba(4,32,50,.6)} .gb-tit em{font-style:normal;color:var(--amarillo,#ffd23f)} /* Rejilla pareja: mismas cajas. La vida va en la entrada, no en el tamano. */ .gb-banco{grid-auto-rows:1fr} .gb-ojo{aspect-ratio:3/4;transform:none;animation:none} .gb-ojo:hover,.gb-ojo:focus-visible{transform:scale(1.03)} @media(min-width:861px){ .gb-banco{grid-auto-rows:15rem} .gb-ojo{aspect-ratio:auto;height:100%} .gb-ojo.gb-grande{grid-column:span 2;grid-row:span 2} } /* Entrada: cada portilla llega a su modo y a su tiempo. */ .gb-ojo{opacity:0} .gb-ojo.gb-dentro{opacity:1} .gb-ojo:nth-child(4n+1).gb-dentro{animation:gb-sube .8s var(--rebote) both} .gb-ojo:nth-child(4n+2).gb-dentro{animation:gb-izq .85s var(--rebote) both} .gb-ojo:nth-child(4n+3).gb-dentro{animation:gb-crece .75s var(--rebote) both} .gb-ojo:nth-child(4n+4).gb-dentro{animation:gb-der .85s var(--rebote) both} @keyframes gb-sube{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}} @keyframes gb-izq{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}} @keyframes gb-der{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}} @keyframes gb-crece{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ .gb-ojo{opacity:1} .gb-ojo.gb-dentro{animation:none} } /* La celda que sobraba: invitacion, no foto de relleno. */ .gb-invita{display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:.55rem;padding:1.4rem 1.1rem;border-radius:26px;color:#fff; aspect-ratio:3/4; background:linear-gradient(155deg,rgba(30,154,214,.34),rgba(6,32,51,.72)); box-shadow:inset 0 0 0 6px rgba(255,255,255,.14),inset 0 0 0 11px rgba(255,210,63,.42), 0 20px 44px -20px rgba(2,18,30,.9)} .gb-invita b{font-size:1.06rem;line-height:1.2;font-weight:800} .gb-invita p{margin:0;font-size:.85rem;line-height:1.5;color:rgba(255,255,255,.82);max-width:20ch} .gb-invita .btn{margin-top:.35rem;font-size:.88rem;padding:.7rem 1.05rem} @media(min-width:861px){ .gb-invita{aspect-ratio:auto;height:100%} .gb-ojo.gb-ancha{grid-column:span 2} } /* El iframe de Maps se roba la rueda del raton y la pagina parece trabada. Un escudo encima lo neutraliza hasta que alguien decide usarlo. */ .co-escudo{position:absolute;inset:0;z-index:4;border:0;cursor:pointer; background:rgba(6,32,51,0);color:#fff;font:inherit;font-size:.78rem;font-weight:700; display:flex;align-items:flex-end;justify-content:center;padding-bottom:1.1rem; text-shadow:0 2px 10px rgba(4,32,50,.9);opacity:.001;transition:opacity .3s var(--ease)} .co-escudo:hover,.co-escudo:focus-visible{opacity:1;outline:0; background:linear-gradient(180deg,rgba(6,32,51,0) 60%,rgba(6,32,51,.5))} .co-escudo.fuera{display:none} /* --- 1. En celular la rejilla es de 2 columnas: la ancha ocupa las dos --- */ .gb-banco{grid-auto-rows:auto} .gb-ojo.gb-ancha{grid-column:span 2;aspect-ratio:16/9} @media(min-width:861px){ .gb-banco{grid-auto-rows:15rem} .gb-ojo.gb-ancha{aspect-ratio:auto} } /* --- 2. La invitacion deja de ser una caja generica --- */ .gb-invita{position:relative;overflow:hidden;gap:.5rem;padding:1.6rem 1.2rem; background:linear-gradient(160deg,#0d4d73,#062033 78%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 20px 44px -20px rgba(2,18,30,.9)} .gb-invita::before{content:'';position:absolute;left:50%;top:-28%;width:150%;aspect-ratio:1; translate:-50% 0;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(30,154,214,.42),transparent 62%)} .gb-invita::after{content:'';position:absolute;right:-14%;bottom:-12%;width:62%;aspect-ratio:1; background:url('../img/inspiracion/medusa.png') center/contain no-repeat; opacity:.2;pointer-events:none;transform:rotate(-12deg)} .gb-invita>*{position:relative;z-index:1} .gb-invita b{font-size:1.16rem;letter-spacing:-.01em;line-height:1.16} .gb-invita p{font-size:.86rem;color:rgba(255,255,255,.8)} .gb-invita .btn{margin-top:.5rem} /* --- 3. "Te esperamos en El Poblado": una sola linea y entrada palabra a palabra --- */ .co h2.tit{line-height:1.12; margin-inline:auto} .co h2.tit .pl{display:inline-block;opacity:0;transform:translateY(16px) rotate(2deg); transition:opacity .5s var(--ease),transform .6s var(--rebote)} .co.dentro h2.tit .pl{opacity:1;transform:none} .co.dentro h2.tit .pl:nth-child(1){transition-delay:.04s} .co.dentro h2.tit .pl:nth-child(2){transition-delay:.10s} .co.dentro h2.tit .pl:nth-child(3){transition-delay:.16s} .co.dentro h2.tit .pl:nth-child(4){transition-delay:.22s} .co.dentro h2.tit .pl:nth-child(5){transition-delay:.28s} @media(prefers-reduced-motion:reduce){ .co h2.tit .pl{opacity:1;transform:none;transition:none} } /* --- El submarino manda: dos columnas tambien en celular --- */ .gb-ojo.gb-grande{grid-column:span 2;aspect-ratio:4/3} @media(min-width:861px){ .gb-ojo.gb-grande{grid-column:span 2;grid-row:span 2;aspect-ratio:auto} } /* --- La invitacion: contenido centrado de verdad --- */ .gb-invita{text-align:center;align-items:center;justify-content:center} .gb-invita p{margin-inline:auto} .gb-invita .btn{align-self:center;justify-content:center;min-width:11rem} /* --- "Te esperamos en El Poblado" cabe en una sola linea --- */ .co h2.tit{max-width:none;text-wrap:balance; font-size:clamp(1.35rem,3.5vw,2.2rem)} /* Las cuatro tarjetas de contacto ocupaban una pantalla entera en celular. */ .co-bajo{grid-template-columns:1fr 1fr} .co-dato{padding:.85rem .9rem .8rem;border-radius:16px} .co-bicho{width:32px;height:32px;margin-bottom:.4rem} .co-dato h4{font-size:.6rem;letter-spacing:.1em} .co-dato p{font-size:.86rem;line-height:1.3} .co-dato small{font-size:.72rem;margin-top:.2rem} .co-accion{font-size:.7rem;margin-top:.4rem} .co-estado{font-size:.68rem;padding:.16rem .5rem;margin-top:.3rem} @media(min-width:861px){ .co-bajo{grid-template-columns:repeat(4,1fr)} .co-dato{padding:1.05rem 1.1rem .95rem;border-radius:20px} .co-bicho{width:44px;height:44px;margin-bottom:.55rem} .co-dato p{font-size:.95rem;line-height:1.45} } /* h2.tit de la linea 42 trae max-width:18ch y el titulo de contacto mide 25 caracteres. Antes esto apuntaba a .co-cabeza, clase que nunca existio. */ .co h2.tit{max-width:none} @media(min-width:861px){ .co h2.tit{white-space:nowrap;font-size:clamp(1.9rem,3.4vw,2.9rem)} } /* El pie de la portada: enlaces reales, no marcadores. */ .datos-pie a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.32)} .datos-pie a:hover{border-bottom-color:var(--amarillo,#ffd23f)} .cierre .cta{flex-wrap:wrap;justify-content:center;gap:.6rem} /* ====================== CALENDARIO (cal-) ====================== */ #agenda .cal-pestanas{display:flex;gap:.35rem;max-width:24rem;margin:1.4rem auto 1rem; background:rgba(255,255,255,.16);padding:.28rem;border-radius:999px; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} #agenda .cal-pestanas button{flex:1;padding:.68rem .4rem;border:0;border-radius:999px;font:inherit; font-weight:700;font-size:.92rem;background:none;color:rgba(255,255,255,.82);cursor:pointer; transition:background .3s var(--ease),color .3s} #agenda .cal-pestanas button.on{background:#fff;color:var(--azul-profundo)} #agenda .cal-barra{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-bottom:.9rem} #agenda .cal-barra button{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.12);color:#fff;font-size:1.15rem;cursor:pointer;line-height:1; transition:background .25s,transform .25s var(--ease)} #agenda .cal-barra button:hover{background:#fff;color:var(--azul-profundo)} #agenda .cal-barra button:active{transform:scale(.92)} #agenda .cal-rango{font-weight:800;font-size:1rem;color:#fff;min-width:12rem;text-align:center} .cal-marco{--calh:56px;--calc:126px; background:rgba(255,255,255,.97);border-radius:20px;overflow:hidden; box-shadow:0 22px 48px -24px rgba(2,24,40,.75)} .cal-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .cal-rejilla{min-width:calc(50px + var(--calc) * 7)} .cal-cabeza{display:grid;grid-template-columns:50px repeat(7,var(--calc)); border-bottom:1px solid rgba(30,154,214,.2)} .cal-cabeza div{padding:.55rem .2rem;text-align:center} .cal-cabeza .dsem{display:block;font-size:.65rem;font-weight:800;letter-spacing:.07em; text-transform:uppercase;color:#7d9aad} .cal-cabeza .dnum{display:block;font-size:1.1rem;font-weight:800;line-height:1.25;color:var(--azul-profundo)} .cal-cabeza .hoy .dnum{color:#fff;background:var(--azul);width:28px;height:28px;border-radius:50%; margin:0 auto;display:grid;place-items:center;font-size:.88rem} .cal-cuerpo{display:grid;grid-template-columns:50px repeat(7,var(--calc))} .cal-horas{border-right:1px solid rgba(30,154,214,.16)} .cal-horas span{display:block;height:var(--calh);font-size:.65rem;color:#7d9aad; padding:.15rem .4rem 0;text-align:right;font-weight:700} .cal-col{position:relative;border-right:1px solid rgba(30,154,214,.09)} .cal-col:last-child{border-right:0} .cal-franja{height:var(--calh);border-bottom:1px solid rgba(30,154,214,.09)} .cal-ev{position:absolute;left:4px;right:4px;border-radius:11px;padding:.36rem .42rem; overflow:hidden;color:#fff;font-weight:700;display:flex;gap:.34rem;align-items:flex-start; box-shadow:0 5px 12px -6px rgba(12,63,92,.7)} .cal-ev img{width:22px;height:22px;flex:none;object-fit:contain;display:block; filter:drop-shadow(0 2px 4px rgba(4,32,50,.45))} .cal-ev b{display:block;font-size:.72rem;line-height:1.15} .cal-ev small{display:block;font-weight:600;opacity:.92;font-size:.62rem;margin-top:.1rem;line-height:1.25} .cal-jl{background:rgba(245,201,60,.26);color:#6b5200;box-shadow:none;border:1px dashed rgba(180,140,0,.5)} .cal-mb{background:linear-gradient(150deg,#a97fdb,#9B6FD0)} .cal-jc{background:linear-gradient(150deg,#95cf68,#7FBF4D)} .cal-arrecife{background:linear-gradient(150deg,#f4834a,#E9601E)} .cal-mar{background:linear-gradient(150deg,#e05f56,#D6453B)} .cal-corales{background:linear-gradient(150deg,#ae87dc,#9B6FD0)} .cal-otro{background:linear-gradient(150deg,#3f7d9e,#0c3f5c)} .cal-leyenda{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center; margin-top:1rem;font-size:.82rem;color:rgba(255,255,255,.9);font-weight:600} .cal-leyenda span{display:flex;align-items:center;gap:.4rem} .cal-leyenda i{width:12px;height:12px;border-radius:4px;display:block} .ly-jl{background:rgba(245,201,60,.6);border:1px dashed rgba(255,255,255,.6)} .ly-mb{background:#9B6FD0}.ly-jc{background:#7FBF4D} .ly-arr{background:#E9601E}.ly-mar{background:#D6453B} .ly-cor{background:#9B6FD0}.ly-otro{background:#0c3f5c} .cal-nota{margin-top:.9rem;text-align:center;font-size:.85rem;color:rgba(255,255,255,.78)} @media(max-width:860px){ .cal-marco{--calc:104px;--calh:50px} } /* --- Calendario compacto: la rejilla llena el marco y el bloque respira menos --- */ #agenda .cabecera{margin-bottom:.8rem} #agenda .cabecera h2.tit{font-size:clamp(1.5rem,3.6vw,2.1rem);max-width:24ch;line-height:1.14} #agenda .cabecera p{font-size:.92rem;max-width:44ch;margin-top:.4rem} #agenda .cal-pestanas{margin:1rem auto .7rem} #agenda .cal-barra{margin-bottom:.7rem;gap:.7rem} #agenda .cal-barra button{width:32px;height:32px;font-size:1rem} #agenda .cal-rango{font-size:.92rem;min-width:10rem} #agenda .cal-leyenda{margin-top:.7rem;font-size:.76rem;gap:.4rem .8rem} #agenda .cal-nota{margin-top:.6rem;font-size:.8rem} #agenda .cal-nota + div{margin-top:.9rem!important} /* La rejilla ocupa todo el ancho disponible en vez de dejar un hueco */ @media(min-width:861px){ .cal-marco{--calh:50px} .cal-rejilla{min-width:0;width:100%} .cal-cabeza,.cal-cuerpo{grid-template-columns:46px repeat(7,1fr)} } /* En celular la rejilla se desliza, con columnas justas para que quepan 3 dias */ @media(max-width:860px){ .cal-marco{--calc:96px;--calh:46px;border-radius:16px} .cal-ev{border-radius:9px;padding:.28rem .32rem;gap:.26rem} .cal-ev img{width:17px;height:17px} .cal-ev b{font-size:.66rem} .cal-ev small{font-size:.57rem} .cal-cabeza .dnum{font-size:.98rem} #agenda .cal-leyenda{font-size:.72rem} } /* Vista de un dia en celular: la columna ocupa todo el ancho, sin deslizar */ @media(max-width:860px){ .cal-marco.cal-undia .cal-rejilla{min-width:0;width:100%} .cal-marco.cal-undia .cal-cabeza, .cal-marco.cal-undia .cal-cuerpo{grid-template-columns:46px 1fr} .cal-marco.cal-undia .cal-scroll{overflow-x:hidden} .cal-marco.cal-undia .cal-ev{padding:.45rem .6rem;gap:.5rem} .cal-marco.cal-undia .cal-ev img{width:24px;height:24px} .cal-marco.cal-undia .cal-ev b{font-size:.85rem} .cal-marco.cal-undia .cal-ev small{font-size:.72rem} .cal-marco.cal-undia .cal-cabeza .dnum{font-size:1.3rem} #agenda .cal-rango{min-width:8rem} } /* El boton de WhatsApp, centrado */ #agenda .cal-nota + div{text-align:center} /* cal compacto movil: menos aire, leyenda corta, bloques legibles */ @media(max-width:860px){ #agenda .cabecera{margin-bottom:.5rem} #agenda .cabecera p{font-size:.86rem;max-width:38ch} #agenda .cal-pestanas{margin:.8rem auto .55rem} #agenda .cal-barra{margin-bottom:.55rem} #agenda .cal-leyenda{margin-top:.55rem;font-size:.72rem;gap:.3rem .7rem} #agenda .cal-nota{margin-top:.5rem;font-size:.76rem} #agenda .cal-nota + div{margin-top:.7rem!important} .cal-marco.cal-undia .cal-ev{align-items:center} .cal-marco.cal-undia .cal-ev div{min-width:0} .cal-marco.cal-undia .cal-ev b{font-size:.88rem;white-space:nowrap} .cal-marco.cal-undia .cal-ev small{font-size:.72rem} } /* Cabeceras con distincion entre dia y numero */ .cal-cabeza{background:linear-gradient(180deg,rgba(30,154,214,.1),rgba(30,154,214,.02))} .cal-cabeza .dsem{color:var(--azul,#1e9ad6);font-weight:800} .cal-cabeza .dnum{color:var(--azul-profundo,#0c3f5c);font-weight:800} .cal-cabeza div + div{border-left:1px solid rgba(30,154,214,.12)} /* Panel de detalle al tocar un bloque */ .cal-detalle{position:relative;display:none;margin-top:.7rem;padding:1rem 2.4rem 1rem 1.1rem; background:#fff;border-radius:16px;color:var(--azul-profundo,#0c3f5c); border-left:5px solid var(--azul,#1e9ad6); box-shadow:0 14px 32px -20px rgba(2,24,40,.75);text-align:left} .cal-detalle.on{display:block;animation:cal-sube .34s var(--ease) both} .cal-detalle.cerrado{border-left-color:#D6453B} @keyframes cal-sube{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .cal-detalle b{display:block;font-size:1.05rem;margin-bottom:.15rem} .cal-det-hora{margin:0;font-size:.92rem} .cal-det-hora strong{color:var(--azul,#1e9ad6)} .cal-det-sub{margin:.2rem 0 0;font-size:.85rem;color:#5c7d92} .cal-det-aviso{margin:.45rem 0 0;font-size:.83rem;font-weight:700;color:#b32d2e} .cal-cerrar{position:absolute;top:.6rem;right:.6rem;width:30px;height:30px;border-radius:50%; border:0;background:rgba(12,63,92,.08);color:var(--azul-profundo,#0c3f5c);font-size:1.1rem;cursor:pointer} .cal-ev{cursor:pointer} /* descenso ligero en movil: fuera las capas de ambiente que corren en bucle. Quedan el fondo, el titular y las burbujas al scrollear. */ @media(max-width:860px){ #inspiracion .motas, #inspiracion .linterna{display:none} .hallazgo{animation:none!important} .hallazgo::before{box-shadow:inset 0 0 22px rgba(255,255,255,.26),0 10px 24px -12px rgba(4,32,50,.6)} } /* ====================== RESEÑAS (rs-) ====================== */ .rs{position:relative;overflow:hidden;padding:3rem 0 3rem;color:#fff; background:radial-gradient(140% 100% at 50% -20%,#3fb0e2 0%,#1a6d9e 26%,#0a3b5c 58%,#041a2b 100%)} .rs-caustica{position:absolute;inset:-20%;pointer-events:none;opacity:.3;mix-blend-mode:screen; background:radial-gradient(38% 22% at 22% 18%,rgba(255,255,255,.55),transparent 60%), radial-gradient(30% 18% at 62% 34%,rgba(255,255,255,.42),transparent 62%), radial-gradient(34% 20% at 82% 12%,rgba(255,255,255,.4),transparent 60%); filter:blur(26px);animation:rs-ondula 16s ease-in-out infinite} @keyframes rs-ondula{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-4%,2%,0) scale(1.08)}} .rs-rayo{position:absolute;top:-30%;width:13vw;height:160%;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.15),transparent 74%); filter:blur(18px);transform:rotate(10deg);animation:rs-vaiven 15s ease-in-out infinite} @keyframes rs-vaiven{0%,100%{transform:rotate(10deg) translateX(0)}50%{transform:rotate(6deg) translateX(34px)}} .rs-banco{position:absolute;left:0;right:0;top:0;height:100%;pointer-events:none;z-index:1} .rs-banco svg{position:absolute;animation:rs-cruza linear infinite} @keyframes rs-cruza{from{transform:translateX(108vw)}to{transform:translateX(-24vw)}} .rs-hondo svg{filter:blur(3.5px);opacity:.3} .rs-cerca{z-index:6}.rs-cerca svg{filter:blur(1.4px);opacity:.48} .rs-buba{position:absolute;bottom:-40px;border-radius:50%;pointer-events:none;opacity:0;z-index:6; background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),rgba(255,255,255,.14) 55%,rgba(255,255,255,.04)); animation:rs-sube linear infinite} @keyframes rs-sube{0%{transform:translateY(0)}14%{opacity:.55}86%{opacity:.3}100%{transform:translateY(-110%) translateX(24px);opacity:0}} .rs-cab{position:relative;z-index:5;max-width:58rem;margin:0 auto 1.6rem;padding:0 1.1rem;text-align:center} .rs h2.tit{color:#fff;text-align:center;margin-bottom:1.1rem;text-shadow:0 4px 24px rgba(4,32,50,.5)} .rs h2.tit em{font-style:normal;color:var(--amarillo,#ffd23f)} .rs .eyebrow{justify-content:center;color:var(--amarillo,#ffd23f)} .rs-panel{display:grid;gap:.9rem;text-align:left; background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.26);border-radius:22px; padding:1.1rem 1.35rem;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); box-shadow:0 20px 44px -24px rgba(2,18,30,.9),inset 0 1px 0 rgba(255,255,255,.3)} .rs-marca{display:flex;align-items:center;gap:1rem} .rs-n{font-size:3rem;font-weight:800;line-height:.92;letter-spacing:-.035em} .rs-est{display:flex;gap:.16rem} .rs-est svg{width:18px;height:18px;fill:var(--amarillo,#ffd23f);filter:drop-shadow(0 2px 4px rgba(4,32,50,.4))} .rs-cuenta{font-weight:800;font-size:.96rem;margin-top:.26rem} .rs-fuente{display:inline-flex;align-items:center;gap:.35rem;font-size:.76rem;font-weight:600;opacity:.82;margin-top:.1rem} .rs-g{background:#fff;color:#4285F4;width:17px;height:17px;border-radius:50%; display:grid;place-items:center;font-weight:800;font-size:.7rem;flex:none} .rs-sello{display:inline-flex;align-items:center;gap:.4rem;font-size:.66rem;font-weight:800; letter-spacing:.1em;text-transform:uppercase;opacity:.75;margin-bottom:.3rem} .rs-resumen p{margin:0;font-size:.98rem;line-height:1.5;font-weight:600;min-height:3em} .rs-cursor{display:inline-block;width:2px;height:1.05em;background:var(--amarillo,#ffd23f); vertical-align:-.16em;margin-left:2px;animation:rs-parpadea 1s steps(2) infinite} @keyframes rs-parpadea{50%{opacity:0}} @media(min-width:861px){ .rs-panel{grid-template-columns:auto 1fr;gap:1.6rem;align-items:center} .rs-resumen{border-left:1px solid rgba(255,255,255,.22);padding-left:1.6rem} } .rs-pista{position:relative;z-index:4;overflow:hidden;padding:.9rem 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 90%,transparent)} .rs-cinta{display:flex;gap:1.4rem;width:max-content;animation:rs-corre 88s linear infinite} .rs-pista:hover .rs-cinta{animation-play-state:paused} @keyframes rs-corre{from{transform:translateX(0)}to{transform:translateX(-50%)}} .rs-ojo{position:relative;width:25rem;flex:none;text-decoration:none;display:block;border-radius:26px; padding:6px;background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,.14)); box-shadow:0 26px 52px -26px rgba(2,18,30,1),inset 0 0 0 1px rgba(255,255,255,.4); transition:transform .38s var(--ease),box-shadow .38s} .rs-ojo::after{content:'';position:absolute;inset:6px;border-radius:21px;pointer-events:none;z-index:3; background:linear-gradient(155deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.1) 24%,transparent 46%)} .rs-ojo:hover{transform:translateY(-8px) scale(1.015); box-shadow:0 34px 62px -26px rgba(2,18,30,1),inset 0 0 0 1px rgba(255,210,63,.85)} .rs-vidrio{position:relative;background:#fff;color:var(--azul-profundo,#0c3f5c);border-radius:21px; padding:1.35rem 1.45rem;display:flex;flex-direction:column;min-height:15rem;border-top:5px solid var(--c)} .rs-top{display:flex;align-items:center;gap:.7rem} .rs-ini{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center; background:var(--c);color:#fff;font-weight:800;font-size:1.1rem;box-shadow:inset 0 -3px 8px rgba(0,0,0,.18)} .rs-quien{font-weight:800;font-size:1rem;line-height:1.15} .rs-meta{font-size:.72rem;color:#7d9aad;font-weight:600;margin-top:.14rem;display:flex; align-items:center;gap:.3rem;flex-wrap:wrap} .rs-guia{background:rgba(66,133,244,.12);color:#1a5fc0;font-weight:800;padding:.08rem .4rem;border-radius:5px;font-size:.67rem} .rs-mini{margin:.75rem 0 0} .rs-mini svg{width:15px;height:15px;fill:#F5B301;filter:none} .rs-cita{margin:.5rem 0 0;font-size:1.04rem;line-height:1.45;font-weight:700} .rs-cita::before{content:'“';color:var(--c);font-size:1.9rem;line-height:0;vertical-align:-.42rem} .rs-cita::after{content:'”';color:var(--c);font-size:1.9rem;line-height:0;vertical-align:-.42rem} .rs-ctx{margin:.6rem 0 0;font-size:.86rem;line-height:1.5;color:#5c7d92;font-weight:500;flex:1; padding-top:.6rem;border-top:1px solid rgba(30,154,214,.16)} .rs-ver{margin-top:.85rem;font-size:.75rem;font-weight:800;color:var(--azul,#1e9ad6)} .rs-datos{position:relative;z-index:5;display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem; max-width:52rem;margin:1.8rem auto 0;padding:0 1.1rem;text-align:center} @media(min-width:721px){ .rs-datos{grid-template-columns:repeat(4,1fr)} } .rs-datos b{display:block;font-size:1.7rem;font-weight:800;color:var(--amarillo,#ffd23f)} .rs-datos span{display:block;font-size:.8rem;opacity:.85;margin-top:.15rem} .rs-pie{position:relative;z-index:5;text-align:center;margin-top:1.6rem;padding:0 1.1rem} .rs-pie .btn{display:inline-flex;align-items:center;gap:.5rem} .rs-legal{margin-top:.8rem;font-size:.75rem;opacity:.62} @media(max-width:860px){ .rs-ojo{width:19.5rem} .rs-vidrio{padding:1.1rem 1.15rem;min-height:14rem} .rs-cita{font-size:.96rem} .rs-n{font-size:2.5rem} .rs-banco,.rs-caustica{display:none} } @media(prefers-reduced-motion:reduce){ .rs-cinta,.rs-caustica,.rs-rayo,.rs-banco svg,.rs-buba,.rs-cursor{animation:none} } /* --- un solo oceano: sin costuras entre agenda, resenas y cierre --- */ .rs{background:linear-gradient(180deg, rgba(10,59,92,0) 0%, #0a3b5c 14%, #072e4a 52%, #062033 100%), radial-gradient(120% 70% at 50% 0%,#1a6d9e 0%,transparent 62%); background-color:#0a3b5c;margin-top:-1px} #agenda{padding-bottom:3.4rem} .cierre{margin-top:-1px} .rs-caustica{opacity:.18} /* El titular en una sola linea */ .rs h2.tit{max-width:none;font-size:clamp(1.5rem,3.6vw,2.3rem)} @media(min-width:861px){ .rs h2.tit{white-space:nowrap} } /* El 4,8 en celular: en fila, no apilado */ @media(max-width:860px){ .rs-panel{padding:1rem 1.1rem;gap:.75rem} .rs-marca{align-items:center;gap:.85rem} .rs-n{font-size:2.9rem} .rs-est svg{width:16px;height:16px} .rs-cuenta{font-size:.9rem} .rs-resumen{border-top:1px solid rgba(255,255,255,.2);padding-top:.75rem} .rs-resumen p{font-size:.92rem;min-height:2.6em} .rs h2.tit{font-size:1.45rem;line-height:1.2} } /* Dia sin Juego Libre por evento privado: rayado, no hueco blanco */ .cal-cerrado{color:#5c7d92; background:repeating-linear-gradient(45deg,#eef3f6,#eef3f6 7px,#e2eaef 7px,#e2eaef 14px); box-shadow:none;border:1px dashed rgba(12,63,92,.22)} .cal-cerrado b{color:#3a5a6e} .cal-cerrado small{opacity:.85}