/* ============================================================
   UPFACE · Gloria Botero — Estilos compartidos (3 landings)
   Paleta oficial UPFACE:
     Verde salvia #9FAF9C · Beige #F3EFEA · Rosa suave #E6CFCF
     Gris texto   #4A4A4A · Dorado detalle #D6B36A
   Tipografías: Playfair Display (títulos) · Montserrat (texto)
   ============================================================ */

:root{
  --salvia:#9FAF9C;   --salvia-dark:#7c8c79;
  --beige:#F3EFEA;    --beige-deep:#ECE4D9;
  --rosa:#E6CFCF;     --rosa-deep:#dcb9b9;
  --gris:#4A4A4A;     --gris-soft:#6a6a6a;
  --dorado:#D6B36A;   --dorado-dark:#c39f52;
  --blanco:#FBFAF8;
  --sombra:0 24px 70px -34px rgba(74,74,74,.4);
  --sombra-soft:0 12px 40px -20px rgba(74,74,74,.28);
  --radio:20px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Montserrat',sans-serif;color:var(--gris);background:var(--beige);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,.serif{font-family:'Playfair Display',serif;font-weight:500;line-height:1.14;color:var(--gris)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:min(1200px,92%);margin-inline:auto}
section{padding:clamp(64px,9vw,128px) 0}
.eyebrow{font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--dorado-dark);font-weight:600;margin-bottom:18px}
.lead{font-size:1.06rem;max-width:62ch;color:var(--gris-soft)}
.center{text-align:center}
.center .lead{margin-inline:auto}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:.55em;padding:16px 36px;border-radius:100px;font-weight:600;font-size:.92rem;letter-spacing:.01em;cursor:pointer;border:1.5px solid transparent;transition:transform .3s,box-shadow .3s,background .3s,color .3s;text-align:center}
.btn-primary{background:var(--gris);color:var(--beige)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 34px -16px rgba(74,74,74,.65)}
.btn-gold{background:var(--dorado);color:#fff;box-shadow:0 12px 26px -14px rgba(214,179,106,.8)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 20px 38px -14px rgba(214,179,106,.9);background:var(--dorado-dark)}
.btn-outline{background:transparent;color:var(--gris);border-color:var(--gris)}
.btn-outline:hover{background:var(--gris);color:var(--beige)}
.btn-lg{padding:19px 44px;font-size:1rem}

/* Header */
header{position:fixed;inset:0 0 auto 0;z-index:100;padding:20px 0;transition:.4s}
header.scrolled{background:rgba(251,250,248,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(74,74,74,.08);padding:13px 0}
.nav{display:flex;align-items:center;justify-content:space-between}
.logo{font-family:'Playfair Display',serif;font-size:1.5rem;letter-spacing:.2em;font-weight:600}
.logo span{color:var(--dorado-dark)}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;font-weight:500;position:relative}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--dorado);transition:.3s}
.nav-links a:not(.btn):hover::after,.nav-links a.active:not(.btn)::after{width:100%}
.nav-links a.active:not(.btn){color:var(--dorado-dark)}
.menu-btn{display:none;background:none;border:none;font-size:1.7rem;cursor:pointer;color:var(--gris)}

/* Hero base */
.hero{min-height:100vh;display:grid;align-items:center;position:relative;overflow:hidden;background:var(--beige)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:96px}
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.7);border:1px solid rgba(214,179,106,.4);padding:8px 16px;border-radius:100px;font-size:.76rem;font-weight:600;letter-spacing:.05em;margin-bottom:24px;color:var(--gris)}
.pill .d{width:8px;height:8px;border-radius:50%;background:var(--salvia);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero h1{font-size:clamp(2.7rem,6vw,4.7rem);letter-spacing:-.015em}
.hero h1 em{font-style:normal;color:var(--salvia-dark)}
.hero .lead{margin:26px 0 34px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero-cta .note{font-size:.8rem;color:var(--gris-soft)}
.hero-stats{display:flex;gap:40px;margin-top:54px;flex-wrap:wrap}
.hero-stats .num{font-family:'Playfair Display',serif;font-size:2rem}
.hero-stats .lbl{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#8a8a8a}

.hero-visual{position:relative}
.hero-photo{aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:var(--beige-deep);box-shadow:var(--sombra)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.float-card{position:absolute;background:var(--blanco);border-radius:16px;box-shadow:var(--sombra);padding:14px 18px;display:flex;align-items:center;gap:12px}
.float-card .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.2rem}
.float-card small{display:block;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#8a8a8a}
.float-card strong{font-family:'Playfair Display';font-weight:500;font-size:.98rem}
.fc-1{top:24px;left:-28px;animation:floaty 5s ease-in-out infinite}
.fc-2{bottom:34px;right:-26px;animation:floaty 6s ease-in-out infinite .8s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* Marquee */
.marquee{background:var(--salvia);color:#fff;padding:16px 0;overflow:hidden;white-space:nowrap}
.marquee div{display:inline-block;animation:scroll 30s linear infinite}
.marquee span{font-family:'Playfair Display',serif;font-size:1.1rem;margin:0 36px}
.marquee span::before{content:"✦";color:var(--dorado);margin-right:36px;font-style:normal;font-size:.8rem;vertical-align:middle}
@keyframes scroll{to{transform:translateX(-50%)}}

/* Head bloque */
.head{max-width:62ch;margin-bottom:56px}
.head.center{margin-inline:auto}
.head h2{font-size:clamp(2rem,4.2vw,3.1rem)}

/* Grid tarjetas genérico */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card-soft{background:var(--beige);border-radius:var(--radio);padding:32px 28px;transition:.35s;border:1px solid rgba(74,74,74,.05)}
.card-soft.white{background:var(--blanco)}
.card-soft:hover{transform:translateY(-6px);box-shadow:var(--sombra-soft)}
.card-soft .ic{width:52px;height:52px;border-radius:14px;background:#fff;display:grid;place-items:center;font-size:1.4rem;margin-bottom:18px;box-shadow:var(--sombra-soft)}
.card-soft .ic svg{width:26px;height:26px;fill:none;stroke:var(--dorado-dark);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.float-card .ico svg{width:22px;height:22px;fill:none;stroke:var(--gris);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pain .top svg{width:28px;height:28px;fill:none;stroke:var(--dorado-dark);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.card-soft h3{font-size:1.18rem;margin-bottom:8px}
.card-soft p{font-size:.9rem;color:var(--gris-soft)}

/* Tarjetas de camino (home) */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.path{position:relative;border-radius:24px;display:flex;flex-direction:column;justify-content:flex-end;padding:44px;color:var(--gris);box-shadow:var(--sombra-soft);transition:.4s;border:1px solid rgba(74,74,74,.05)}
.path:hover{transform:translateY(-8px);box-shadow:var(--sombra)}
.path.gym{background:var(--salvia)}
.path.ase{background:var(--rosa)}
.path .tagx{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;margin-bottom:12px;color:var(--gris);opacity:.65}
.path h3{color:var(--gris);font-size:2rem;margin-bottom:12px}
.path p{font-size:.95rem;color:var(--gris);opacity:.85;margin-bottom:24px;max-width:40ch}
.path .go{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.9rem;background:var(--gris);color:#fff;padding:13px 28px;border-radius:100px;align-self:flex-start;transition:.3s}
.path:hover .go{background:var(--dorado);color:#fff}

/* Sensaciones / pains */
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pain{background:var(--blanco);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra-soft);border:1px solid rgba(74,74,74,.05)}
.pain .top{width:56px;height:56px;margin:30px 0 0 30px;border-radius:16px;background:var(--beige);display:grid;place-items:center;box-shadow:var(--sombra-soft)}
.pain .bd{padding:20px 30px 32px}
.pain h3{font-size:1.3rem;margin-bottom:10px}
.pain p{font-size:.9rem;color:var(--gris-soft)}

/* Chips técnicas */
.tec{background:var(--salvia-dark);color:#fff}
.tec .eyebrow{color:var(--dorado)}
.tec h2{color:#fff}
.tec .lead{color:rgba(255,255,255,.85)}
.chips{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px;justify-content:center}
.chip{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);padding:12px 24px;border-radius:100px;font-size:.92rem;font-weight:500;transition:.3s;backdrop-filter:blur(4px)}
.chip:hover{background:var(--dorado);border-color:var(--dorado);transform:translateY(-3px)}

/* Pasos numerados */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:s}
.step{background:var(--blanco);border-radius:var(--radio);padding:40px 32px;position:relative;border:1px solid rgba(74,74,74,.05);transition:.35s}
.step:hover{transform:translateY(-6px);box-shadow:var(--sombra-soft)}
.step::before{counter-increment:s;content:"0" counter(s);font-family:'Playfair Display';font-size:3rem;color:var(--rosa-deep);display:block;margin-bottom:12px;font-weight:600}
.step h3{font-size:1.35rem;margin-bottom:10px}
.step p{font-size:.92rem;color:var(--gris-soft)}

/* Planes */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.plan{background:var(--blanco);border-radius:24px;padding:40px 32px;display:flex;flex-direction:column;border:1px solid rgba(74,74,74,.07);transition:.35s;position:relative}
.plan:hover{transform:translateY(-8px);box-shadow:var(--sombra)}
.plan.top{outline:2px solid var(--dorado);transform:scale(1.03)}
.plan.top:hover{transform:scale(1.03) translateY(-8px)}
.plan .badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--dorado);color:#fff;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:7px 18px;border-radius:100px}
.plan .name{font-family:'Playfair Display';font-size:1.5rem;margin-bottom:4px}
.plan .sub{font-size:.82rem;color:var(--dorado-dark);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:22px}
.plan .price{font-family:'Playfair Display';font-size:3rem;line-height:1;margin-bottom:4px}
.plan .price sup{font-size:1.1rem;vertical-align:super;color:var(--gris-soft)}
.plan .per{font-size:.82rem;color:var(--gris-soft);margin-bottom:24px}
.plan .gift{background:var(--beige);border-radius:12px;padding:12px 16px;font-size:.84rem;font-weight:600;margin-bottom:24px;color:var(--salvia-dark)}
.plan ul{list-style:none;margin-bottom:30px;flex:1}
.plan li{font-size:.9rem;padding:8px 0 8px 28px;position:relative;color:var(--gris-soft)}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--salvia);font-weight:700}
.plans-note{text-align:center;margin-top:30px;font-size:.86rem;color:var(--gris-soft)}

/* Sobre Gloria */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}
.about-photo{aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:var(--beige-deep);box-shadow:var(--sombra);position:relative;display:grid;place-items:center}
.about-photo img{width:100%;height:100%;object-fit:cover}
.about-photo.framed img{width:82%;height:auto;border-radius:50%}
.about-photo .cert{position:absolute;bottom:18px;left:18px;right:18px;background:rgba(251,250,248,.92);backdrop-filter:blur(6px);border-radius:14px;padding:14px 18px;font-size:.82rem;font-weight:600;z-index:2}
.about-photo .cert small{display:block;color:var(--dorado-dark);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:2px}
.about blockquote{font-family:'Playfair Display';font-size:1.5rem;line-height:1.42;margin:24px 0;color:var(--salvia-dark)}
.about .sign{font-family:'Playfair Display';font-size:1.7rem;color:var(--dorado-dark);margin-top:22px}
.timeline{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.tl{flex:1;min-width:110px;background:var(--beige);border-radius:14px;padding:16px;text-align:center;border:1px solid rgba(74,74,74,.05)}
.tl .yr{font-family:'Playfair Display';font-size:1.1rem;color:var(--dorado-dark)}
.tl small{font-size:.74rem;color:var(--gris-soft)}

/* Galería de transformación (antes/después) */
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tcard{border-radius:16px;overflow:hidden;background:var(--blanco);box-shadow:var(--sombra-soft);border:1px solid rgba(74,74,74,.05);transition:.35s}
.tcard:hover{transform:translateY(-6px);box-shadow:var(--sombra)}
.tcard .ph{aspect-ratio:3/4;overflow:hidden;background:var(--beige-deep);display:grid;place-items:center}
.tcard .ph img{width:100%;height:100%;object-fit:cover}
.tcard .ph .ph-fallback{font-size:.72rem;color:var(--gris-soft);text-align:center;padding:10px}
.tcard .cap{padding:14px 12px;text-align:center}
.tcard .cap .yr{font-family:'Playfair Display';color:var(--dorado-dark);font-size:1.05rem;display:block}
.tcard .cap small{font-size:.74rem;color:var(--gris-soft)}
.tcard.first .ph::after{content:"ANTES";position:absolute;margin:10px;background:rgba(74,74,74,.8);color:#fff;font-size:.6rem;letter-spacing:.12em;padding:4px 10px;border-radius:100px;align-self:flex-start;justify-self:start}
.tcard.last .ph::after{content:"HOY";position:absolute;margin:10px;background:var(--dorado);color:#fff;font-size:.6rem;letter-spacing:.12em;padding:4px 10px;border-radius:100px;align-self:flex-start;justify-self:start}
.tcard .ph{position:relative}
@media(max-width:700px){.tgrid{grid-template-columns:repeat(2,1fr)}}

/* Precio grande / oferta */
.price-tag{display:inline-flex;align-items:baseline;gap:14px;margin:20px 0 30px;font-family:'Playfair Display'}
.price-tag .old{font-size:1.4rem;opacity:.7;text-decoration:line-through}
.price-tag .new{font-size:3rem}
.price-tag .new sup{font-size:1.2rem;vertical-align:super}

/* CTA final */
.cta-final{background:var(--salvia);color:#fff;text-align:center;border-radius:32px;padding:clamp(52px,7vw,92px) 24px;position:relative;overflow:hidden}
.cta-final.rosa{background:var(--rosa-deep)}
.cta-final::after{content:"";position:absolute;width:440px;height:440px;border-radius:50%;background:rgba(255,255,255,.09);top:-170px;right:-130px}
.cta-final::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:rgba(214,179,106,.18);bottom:-150px;left:-100px}
.cta-final h2{color:#fff;font-size:clamp(2rem,4.4vw,3.3rem);position:relative}
.cta-final p{max-width:54ch;margin:18px auto 10px;position:relative;opacity:.95}
.cta-final .price-tag{position:relative}

/* Formulario (asesoría / diagnóstico) */
.formcard{background:var(--blanco);border-radius:24px;padding:clamp(28px,4vw,48px);box-shadow:var(--sombra-soft);border:1px solid rgba(74,74,74,.05);max-width:640px;margin-inline:auto}
.formcard .fg{margin-bottom:20px}
.formcard label{display:block;font-size:.82rem;font-weight:600;margin-bottom:8px;letter-spacing:.02em}
.formcard input,.formcard select,.formcard textarea{width:100%;padding:14px 16px;border:1.5px solid var(--beige-deep);border-radius:12px;font-family:inherit;font-size:.95rem;color:var(--gris);background:var(--beige);transition:.25s}
.formcard input:focus,.formcard select:focus,.formcard textarea:focus{outline:none;border-color:var(--salvia);background:#fff}
.formcard .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.formcard .btn{width:100%;justify-content:center;margin-top:8px}
.form-note{font-size:.78rem;color:var(--gris-soft);text-align:center;margin-top:14px}

/* FAQ */
.faq-item{background:var(--blanco);border-radius:14px;margin-bottom:14px;overflow:hidden;border:1px solid rgba(74,74,74,.05)}
.faq-q{padding:22px 26px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:1rem;gap:20px}
.faq-q span{color:var(--dorado-dark);font-size:1.5rem;transition:.3s;flex-shrink:0}
.faq-a{max-height:0;overflow:hidden;transition:.4s ease}
.faq-a p{padding:0 26px 22px;font-size:.92rem;color:var(--gris-soft)}
.faq-item.open .faq-a{max-height:300px}
.faq-item.open .faq-q span{transform:rotate(45deg)}

/* Footer */
footer{background:var(--gris);color:#d9d5cf;padding:72px 0 30px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:48px}
footer .logo{color:#fff;margin-bottom:16px}
footer h4{color:#fff;font-family:'Montserrat';font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
footer a{display:block;font-size:.9rem;margin-bottom:10px;color:#c3bfb8;transition:.2s}
footer a:hover{color:var(--dorado)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.8rem;color:#a8a49d}

/* WhatsApp float */
.wa{position:fixed;bottom:26px;right:26px;z-index:200;width:60px;height:60px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(37,211,102,.65);transition:.3s}
.wa:hover{transform:scale(1.1)}
.wa svg{width:32px;height:32px;fill:#fff}

/* Reveal */
.reveal{opacity:0;transform:translateY(30px);transition:.8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* Responsive */
@media(max-width:920px){
  .hero-grid,.about,.foot-grid{grid-template-columns:1fr;gap:44px}
  .hero-visual{order:-1;max-width:400px;margin-inline:auto}
  .grid-3,.pains,.steps,.plans,.paths{grid-template-columns:1fr}
  .plan.top{transform:none}
  .plan.top:hover{transform:translateY(-8px)}
  .about-photo{max-width:400px;margin-inline:auto}
  .nav-links{position:fixed;inset:0 0 0 auto;width:80%;max-width:330px;background:var(--blanco);flex-direction:column;justify-content:center;padding:40px;transform:translateX(100%);transition:.4s;box-shadow:var(--sombra)}
  .nav-links.open{transform:none}
  .menu-btn{display:block;z-index:110}
}
@media(max-width:600px){
  .hero-stats{gap:24px}
  .float-card{display:none}
  .formcard .row{grid-template-columns:1fr}
}