/* GoodPlann · superficie (cierre) */

.gp .surface{ position:relative; margin-top:0; padding:clamp(30px,5vh,64px) 0 0; overflow:hidden;
  background:
    radial-gradient(60% 40% at 50% 112%, rgba(255,224,150,.28), transparent 62%),
    linear-gradient(180deg, #17627a 0%, #1f7f82 20%, #2f9a92 42%, #4bb6a6 64%, #74d6c7 84%, #96e6d7 100%); }
.gp .surface-copy{ position:relative; z-index:2; text-align:center; }
.gp .s-k{ font-size:11.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--tiffany); }
.gp .s-h{ margin:14px auto 0; font-weight:900; font-size:clamp(2.2rem,5.4vw,3.9rem); letter-spacing:-.03em; color:var(--snow); max-width:17ch; text-wrap:balance; line-height:1.05; }
.gp .s-h span{ background:linear-gradient(100deg,#FF7A3D,#FFB03A); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gp .s-p{ margin:18px auto 0; max-width:54ch; color:#EAF7F2; font-size:clamp(1.08rem,1.5vw,1.25rem); line-height:1.62; }
.gp .s-final{ margin:26px auto 0; max-width:22ch; font-weight:900; font-size:clamp(1.8rem,4.4vw,3rem); line-height:1.12; letter-spacing:-.025em; color:var(--snow); text-wrap:balance; }
.gp .s-final span{ background:linear-gradient(100deg,#FF7A3D,#FFB03A); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gp .s-cta{ margin:26px auto 0; display:flex; flex-direction:column; align-items:center; gap:12px; }
.gp .surface .cta-note{ color:#E6F5F0; opacity:.95; }
.gp .surface .trust{ justify-content:center; color:#DCEFEA; }
.gp .surface .trust i{ background:#7DE2D1; }
/* card premium que resalta el cierre emocional (compra impulsiva) */
.gp .s-close{ position:relative; max-width:660px; margin:32px auto 0; padding:clamp(30px,4.2vw,50px) clamp(24px,4vw,52px);
  border-radius:28px; text-align:center; overflow:visible;
  background:linear-gradient(180deg, rgba(15,29,35,.86), rgba(9,18,24,.92));
  border:1px solid rgba(125,226,209,.4);
  box-shadow:0 44px 110px rgba(0,0,0,.55), 0 0 60px rgba(125,226,209,.14), inset 0 1px 0 var(--glass-hi);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); }
.gp .s-close::before{ content:""; position:absolute; left:34px; right:34px; top:0; height:4px; border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,#FF6B4A,#FF9E4D,#C8FF00,#7DE2D1); }
.gp .s-close::after{ content:""; position:absolute; z-index:-1; inset:-16%;
  background:radial-gradient(closest-side, rgba(255,99,89,.42), transparent 70%),
    radial-gradient(closest-side, rgba(125,226,209,.42), transparent 72%);
  filter:blur(64px); animation:cardGlow 5s ease-in-out infinite; }
.gp .s-close .s-final{ margin:0 auto; }
.gp .s-close .s-cta{ margin-top:24px; }
/* burbujeo al salir a la superficie */
.gp .s-bubbles{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.gp .s-bub{ position:absolute; bottom:0; border-radius:50%; opacity:0;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.7), rgba(150,230,215,.25) 60%, transparent 72%);
  border:1px solid rgba(255,255,255,.3); }
.gp .surface.go .s-bub{ animation:sBub linear infinite; }
@keyframes sBub{ 0%{ opacity:0; transform:translateY(40px) scale(.6) } 15%{ opacity:.7 } 100%{ opacity:0; transform:translateY(-46vh) scale(1.2) } }
.gp .scene{ position:relative; z-index:1; margin-top:24px; height:clamp(220px,32vh,360px); }
.gp .scene svg{ position:absolute; bottom:-1px; left:0; width:100%; height:100%; display:block; }
.gp .boat{ transform-box:fill-box; transform-origin:center; animation:bob 6s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-1deg) } 50%{ transform:translateY(-8px) rotate(1deg) } }
/* buceador sube y el barco zarpa */
.gp .boat-wrap{ transform:translateX(0); }
.gp .surface.go .boat-wrap{ animation:setSail 5s ease-in-out 3s forwards; }
@keyframes setSail{ 0%{ transform:translateX(0) } 100%{ transform:translateX(150px) } }