/* =====================================================================
   Landing del cumpleaños · Isabel María
   Móvil: tarjeta vertical  ·  Escritorio: panorámico a dos columnas
   ===================================================================== */
:root{
  --deep:#3a5a6b;--sea:#7fb4c4;--sky:#cfe6ee;--foam:#eef7fa;
  --shell:#f4c9d4;--shell-deep:#e79bae;--rose:#f4a7c0;--rose-hot:#ec7ca0;
  --pearl:#fdfbf7;--sand:#f3ede2;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:'Jost',sans-serif;color:var(--deep);min-height:100vh;overflow-x:hidden}

/* Fondo mar con purpurina y burbujas */
.cumple-bg{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:linear-gradient(170deg,#bfe2ec 0%, #8cc0cf 55%, #6aa6b8 100%)}
.shimmer{position:absolute;inset:0;opacity:.6;pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 18% 24%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 68% 16%, #fff, transparent),
    radial-gradient(1px 1px at 42% 54%, #fff, transparent),
    radial-gradient(2px 2px at 84% 46%, #fdeef2, transparent),
    radial-gradient(1.5px 1.5px at 30% 72%, #fff, transparent),
    radial-gradient(1px 1px at 56% 34%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 10% 60%, #fff, transparent),
    radial-gradient(1px 1px at 92% 70%, #fdeef2, transparent);
  animation:twinkle 3.5s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.35}to{opacity:.8}}
.bubble{position:absolute;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),rgba(255,255,255,.15));
  bottom:-20px;animation:floatUp linear infinite}
@keyframes floatUp{0%{transform:translateY(0);opacity:0}15%{opacity:.7}100%{transform:translateY(-100vh);opacity:0}}
.float{position:absolute;opacity:.95;filter:drop-shadow(0 3px 6px rgba(58,90,107,.3));animation:bob 5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-7px) rotate(4deg)}}

/* Elementos coastal flotando por todo el fondo */
.bg-float{position:absolute;width:34px;pointer-events:none;
  filter:drop-shadow(0 4px 8px rgba(58,90,107,.2));animation:drift 14s ease-in-out infinite}
.bgf1{top:12%;left:6%;width:44px;animation-delay:0s}
.bgf2{top:22%;right:8%;width:52px;animation-delay:2s}
.bgf3{top:50%;left:4%;width:30px;animation-delay:4s}
.bgf4{top:62%;right:6%;width:40px;animation-delay:1s}
.bgf5{top:38%;left:48%;width:26px;animation-delay:3s}
@keyframes drift{0%,100%{transform:translate(0,0) rotate(0deg)}
  33%{transform:translate(10px,-16px) rotate(12deg)}
  66%{transform:translate(-8px,-8px) rotate(-10deg)}}

/* Olas animadas al fondo */
.waves{position:absolute;left:0;right:0;bottom:0;height:140px;overflow:hidden}
.waves svg{position:absolute;bottom:0;left:0;width:200%;height:140px}
.wave-1{animation:waveMove 11s linear infinite}
.wave-2{animation:waveMove 8s linear infinite reverse}
.wave-3{animation:waveMove 6s linear infinite}
@keyframes waveMove{from{transform:translateX(0)}to{transform:translateX(-25%)}}

@keyframes twinkle{from{opacity:.35}to{opacity:.8}}
@media (prefers-reduced-motion:reduce){.shimmer,.bubble,.float,.bg-float,.wave-1,.wave-2,.wave-3,.cumple-name{animation:none}}

/* =====================================================================
   MÓVIL (base): tarjeta vertical
   ===================================================================== */
.cumple-wrap{position:relative;z-index:1;max-width:460px;margin:0 auto;
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:36px 20px}

.cumple-hero{position:relative;text-align:center;color:#fff;padding:20px 10px 26px}
.cf1{top:6px;left:10%;width:40px;animation-delay:.2s}
.cf2{top:0;right:12%;width:32px;animation-delay:1s}
.cf3{top:70px;right:20%;width:28px;animation-delay:.6s}
.cf4{top:90px;left:8%;width:34px;animation-delay:1.4s}
.party-badge{display:inline-block;font-size:12.5px;font-weight:500;letter-spacing:.02em;
  background:linear-gradient(135deg,var(--rose),var(--rose-hot));color:#fff;
  padding:8px 18px;border-radius:999px;margin-bottom:14px;
  box-shadow:0 8px 20px -8px rgba(236,124,160,.7);animation:pulseBadge 2.4s ease-in-out infinite}
@keyframes pulseBadge{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.eyebrow{font-size:11px;letter-spacing:.4em;text-transform:uppercase;font-weight:500;color:#f4f9fb}
.cumple-name{font-family:'Parisienne',cursive;font-size:clamp(64px,20vw,90px);line-height:.9;margin:6px 0 4px;
  background:linear-gradient(100deg,#fff 0%, #ffd9e6 30%, #f4a7c0 50%, #ffd9e6 70%, #fff 100%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 12px rgba(236,124,160,.5));
  animation:shine 5s linear infinite}
@keyframes shine{to{background-position:200% center}}
.cumple-sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:19px;color:#fff}
.cumple-handle{font-size:13px;letter-spacing:.05em;color:rgba(255,255,255,.9);margin-top:4px}

.cumple-card{position:relative;background:var(--pearl);border-radius:26px;padding:30px 26px;
  box-shadow:0 26px 60px -28px rgba(58,90,107,.6);text-align:center;
  border:1px solid rgba(255,255,255,.6)}
.cumple-card::before{content:"";position:absolute;inset:0;border-radius:26px;padding:2px;
  background:linear-gradient(135deg,rgba(244,167,192,.6),rgba(127,180,196,.5),rgba(255,209,102,.4));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.7}
.lead{font-family:'Cormorant Garamond',serif;font-size:20px;line-height:1.5;color:var(--deep);position:relative}
.lead em{color:var(--rose-hot);font-style:italic}

.cd-rows{margin:22px 0;border-top:1px solid rgba(58,90,107,.14);border-bottom:1px solid rgba(58,90,107,.14);position:relative}
.cd-row{display:flex;align-items:center;gap:14px;padding:13px 4px;text-align:left}
.cd-row + .cd-row{border-top:1px solid rgba(58,90,107,.09)}
.cd-ic{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:18px;
  background:linear-gradient(150deg,var(--sky),var(--shell));
  box-shadow:0 4px 10px -4px rgba(58,90,107,.35), 0 0 0 1px rgba(255,255,255,.6) inset}
.cd-lbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8aa9b4}
.cd-val{font-size:15.5px;color:var(--deep);font-weight:500}

/* Cuenta atrás */
.countdown{display:flex;justify-content:center;gap:8px;margin:6px 0 22px;position:relative}
.cd-box{flex:1;max-width:78px;background:linear-gradient(160deg,#fff,#fdf2f6);
  border:1px solid rgba(244,167,192,.4);border-radius:14px;padding:12px 4px;text-align:center;
  box-shadow:0 8px 20px -14px rgba(236,124,160,.5)}
.cd-num{display:block;font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:500;color:var(--rose-hot);line-height:1}
.cd-u{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8aa9b4}
.cd-live{font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--rose-hot);padding:10px;
  animation:pulseBadge 1.6s ease-in-out infinite}

.note{background:linear-gradient(150deg,#fff4f8,#fdfbf7);border:1px dashed rgba(231,155,174,.5);
  border-radius:14px;padding:15px;font-size:13.5px;color:#7a93a0;line-height:1.55}
.note strong{color:var(--rose-hot)}
.sig{margin-top:16px;font-family:'Parisienne',cursive;font-size:24px;color:var(--rose)}

/* =====================================================================
   ESCRITORIO: panorámico a dos columnas
   ===================================================================== */
@media (min-width:900px){
  .cumple-wrap{max-width:1100px;flex-direction:row;align-items:center;gap:0;
    padding:40px;min-height:100vh}
  .cumple-hero{flex:1;text-align:left;padding:40px 50px 40px 30px}
  .cumple-hero .eyebrow{display:inline-flex;align-items:center;gap:12px}
  .cumple-hero .eyebrow::after{content:"";width:60px;height:1.5px;background:rgba(255,255,255,.6)}
  .cumple-name{font-size:clamp(90px,9vw,128px);margin:10px 0 8px}
  .cumple-sub{font-size:26px}
  .cumple-handle{font-size:15px}
  .cf1{top:20px;left:auto;right:12%;width:52px}
  .cf2{top:120px;right:4%;width:40px}
  .cf3{top:auto;bottom:14%;left:8%;right:auto;width:38px}

  .cumple-card{flex:0 0 420px;padding:44px 40px;border-radius:30px;text-align:left;
    box-shadow:0 36px 80px -34px rgba(58,90,107,.7)}
  .lead{font-size:22px}
  .cd-row{padding:15px 4px}
  .countdown{justify-content:flex-start}
  .cd-box{max-width:82px}
  .note{text-align:left}
  .sig{text-align:right;font-size:26px}
}

/* Pantallas muy anchas: un poco más de aire */
@media (min-width:1300px){
  .cumple-wrap{max-width:1200px}
  .cumple-name{font-size:140px}
}