/* ===== TAILOVE — design tokens ===== */
:root{
  --dark:#1B4332;
  --dark-2:#12291F;
  --cream:#FBF3E1;
  --cream-2:#F5E6C3;
  --white:#FFFDF8;
  --gold:#C99A3D;
  --gold-light:#E8C567;
  --text-soft:#55645B;
  --text-soft-light:#C9D8CE;
  --border:#E7DDC4;
  --terracotta:#E3B8A3;
  --sage:#A9C7B8;
  --radius-lg:28px;
  --radius-md:20px;
  --radius-sm:14px;
  --shadow-soft:0 20px 50px rgba(27,67,50,.12);
  --shadow-strong:0 30px 70px rgba(27,67,50,.28);
  --container:1200px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{}
body{
  font-family:'Nunito Sans', sans-serif;
  color:var(--dark);
  background:var(--cream);
  overflow-x:hidden;
  line-height:1.5;
}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
.container{max-width:var(--container); margin:0 auto; padding:0 32px;}
h1,h2,h3,h4{font-family:'Fredoka', sans-serif; font-weight:600; line-height:1.1;}
section{position:relative;}

.eyebrow{
  font-size:14px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--gold); display:inline-block; margin-bottom:14px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 32px; border-radius:100px; font-weight:700; font-size:17px;
  font-family:'Nunito Sans', sans-serif; cursor:pointer; border:none;
  transition:transform .25s ease, box-shadow .25s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-3px);}
.btn-primary{
  background:linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  color:var(--dark); box-shadow:0 12px 30px rgba(201,154,61,.4);
}
.btn-primary:hover{box-shadow:0 18px 40px rgba(201,154,61,.55);}
.btn-outline{
  background:transparent; color:var(--white); border:2px solid rgba(255,255,255,.5);
}
.btn-outline:hover{background:rgba(255,255,255,.12);}
.btn-dark{
  background:var(--dark); color:var(--white);
}
.btn-dark:hover{box-shadow:0 18px 40px rgba(27,67,50,.35);}

/* ===== reveal-on-scroll ===== */
.reveal{opacity:0; transform:translateY(36px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-delay-1{transition-delay:.1s;}
.reveal-delay-2{transition-delay:.2s;}
.reveal-delay-3{transition-delay:.3s;}
.reveal-delay-4{transition-delay:.4s;}

/* ===== NAV ===== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:20px 0; transition:background .3s ease, padding .3s ease, box-shadow .3s ease;
}
.nav.scrolled{
  background:rgba(251,243,225,.92); backdrop-filter:blur(14px);
  padding:12px 0; box-shadow:0 4px 24px rgba(27,67,50,.08);
}
.nav .container{display:flex; align-items:center; justify-content:space-between;}
.nav-logo img{height:38px; width:auto;}
.nav-links{display:flex; gap:36px; align-items:center;}
.nav-links a{font-weight:700; font-size:15px; color:var(--dark); position:relative; padding:4px 0;}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--gold);
  transition:width .25s ease;
}
.nav-links a:hover::after{width:100%;}
.nav-cta{display:flex; align-items:center; gap:16px;}
.nav-cta .btn{padding:12px 26px; font-size:15px;}
.burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:8px;}
.burger span{width:26px; height:3px; background:var(--dark); border-radius:3px; transition:.3s;}
.mobile-menu{
  position:fixed; inset:0; background:var(--dark); z-index:1100;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:32px;
  transform:translateX(100%); transition:transform .35s ease;
}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu a{color:var(--cream); font-size:28px; font-weight:700; font-family:'Fredoka',sans-serif;}
.mobile-menu .close-menu{position:absolute; top:28px; right:32px; background:none; border:none; color:var(--cream); font-size:32px; cursor:pointer;}

/* ===== HERO ===== */
.hero{
  position:relative;
  min-height:100vh; display:flex; align-items:center;
  background:linear-gradient(160deg, var(--cream) 0%, var(--cream-2) 100%);
  padding:160px 0 100px; overflow:hidden;
}
.hero .container{display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center;}
.hero-paw{
  position:absolute; opacity:.10; pointer-events:none;
}
.hero-paw.p1{width:220px; top:8%; left:-60px; transform:rotate(-18deg);}
.hero-paw.p2{width:160px; bottom:6%; left:38%; transform:rotate(12deg);}
.hero-blob{
  position:absolute; border-radius:50%; filter:blur(10px); z-index:0; pointer-events:none;
}
.hero-blob.b1{width:500px; height:500px; background:radial-gradient(circle, rgba(232,197,103,.35), transparent 70%); top:-150px; right:-100px;}
.hero-text{position:relative; z-index:2;}
.hero h1{font-size:clamp(40px,5.4vw,68px); margin-bottom:22px;}
.hero h1 .accent{color:var(--gold);}
.hero p.lead{font-size:20px; color:var(--text-soft); max-width:520px; margin-bottom:34px;}
.hero-ctas{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:36px;}
.store-badges{display:flex; gap:14px; flex-wrap:wrap;}
.store-badges img{height:52px; width:auto; border-radius:8px; transition:transform .2s ease;}
.store-badges a:hover img{transform:translateY(-3px);}
.hero-stats{display:flex; gap:36px; margin-top:36px;}
.hero-stat b{font-family:'Fredoka',sans-serif; font-size:34px; color:var(--dark); display:block;}
.hero-stat span{font-size:14px; color:var(--text-soft); font-weight:700;}

.hero-visual{position:relative; z-index:2; display:flex; justify-content:center;}
.phone-stack{position:relative; width:440px; height:580px;}
.phone-card{
  position:absolute; width:225px; border-radius:26px; overflow:hidden;
  box-shadow:var(--shadow-strong); border:6px solid var(--white);
}
.phone-card.pc1{top:34px; left:107px; z-index:3; transform:rotate(-2deg);}
.phone-card.pc2{top:-6px; right:-14px; z-index:2; transform:rotate(18deg);}
.phone-card.pc3{bottom:-6px; left:-14px; z-index:1; transform:rotate(-20deg); opacity:.94;}
.phone-card img{width:100%; display:block;}
.hero-tag{
  position:absolute; z-index:4; display:flex; align-items:center; gap:10px;
  background:var(--dark); color:var(--gold-light); border-radius:100px; padding:7px 20px 7px 8px;
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:15px; white-space:nowrap;
  box-shadow:0 14px 30px rgba(27,67,50,.32); animation:float 4s ease-in-out infinite;
}
.hero-tag .tag-ic{
  width:34px; height:34px; border-radius:50%; background:var(--dark); color:var(--gold-light);
  border:2px solid var(--gold-light); display:flex; align-items:center; justify-content:center;
}
.hero-tag .tag-ic svg{width:18px; height:18px;}
.hero-tag.t1{top:-2%; right:-10%;}
.hero-tag.t2{top:15%; left:-22%; animation-delay:.8s;}
.hero-tag.t3{top:47%; right:-12%; animation-delay:1.6s;}
.hero-tag.t4{top:61%; left:-24%; animation-delay:.4s;}
.hero-tag.t5{bottom:4%; right:-8%; animation-delay:1.2s;}
.floating-badge{
  position:absolute; background:var(--white); border-radius:100px; padding:12px 20px;
  box-shadow:var(--shadow-soft); display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:14px; z-index:4; animation:float 4s ease-in-out infinite;
}
.floating-badge.fb1{top:0%; right:-4%;}
.floating-badge.fb2{bottom:4%; left:-6%; animation-delay:1.2s;}
.floating-badge .dot{width:10px; height:10px; border-radius:50%; background:#4CAF6D;}
@keyframes float{0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);}}

/* ===== SECTION HEADERS ===== */
.section-head{max-width:680px; margin:0 auto 60px; text-align:center;}
.section-head h2{font-size:clamp(32px,4vw,48px); margin-bottom:16px;}
.section-head p{font-size:18px; color:var(--text-soft);}
.section-pad{padding:120px 0;}

/* ===== COMO FUNCIONA ===== */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
.step-card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:36px 28px; text-align:center; transition:transform .3s ease, box-shadow .3s ease;
}
.step-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-soft);}
.step-num{
  width:52px; height:52px; border-radius:50%; background:var(--dark); color:var(--gold-light);
  display:flex; align-items:center; justify-content:center; font-family:'Fredoka',sans-serif;
  font-size:22px; font-weight:700; margin:0 auto 20px;
}
.step-card h3{font-size:21px; margin-bottom:10px;}
.step-card p{font-size:15px; color:var(--text-soft);}

/* ===== FEATURES ===== */
.features-wrap{
  background:var(--dark); border-radius:40px; padding:80px 60px; position:relative; overflow:hidden;
}
.features-wrap .hero-paw{opacity:.06;}
.features-wrap .section-head h2,
.features-wrap .section-head p{color:var(--cream);}
.features-wrap .section-head p{color:var(--text-soft-light);}
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; position:relative; z-index:2;}
.feature-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-md);
  padding:34px; transition:background .3s ease, transform .3s ease;
}
.feature-card:hover{background:rgba(255,255,255,.09); transform:translateY(-6px);}
.feature-icon{
  width:52px; height:52px; border-radius:14px; background:var(--gold-light);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px; font-size:24px;
}
.feature-card h3{color:var(--cream); font-size:21px; margin-bottom:10px;}
.feature-card p{color:var(--text-soft-light); font-size:15px;}

/* ===== GALLERY / SOCIAL PROOF ===== */
.gallery-wrap{position:relative; padding:0 64px;}
.gallery-track{
  display:flex; gap:24px; overflow-x:auto; padding:10px 4px 30px; scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.gallery-track::-webkit-scrollbar{display:none;}
.gallery-item{
  flex:0 0 auto; width:240px; scroll-snap-align:start; border-radius:var(--radius-md);
  overflow:hidden; box-shadow:var(--shadow-soft); transition:transform .3s ease;
}
.gallery-item:hover{transform:translateY(-8px) scale(1.02);}
.gallery-item img{width:100%; aspect-ratio:4/5; object-fit:cover;}
.gallery-arrow{
  position:absolute; top:44%; transform:translateY(-50%); z-index:5;
  width:52px; height:52px; border-radius:50%; background:var(--white); border:1px solid var(--border);
  box-shadow:var(--shadow-soft); display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:26px; line-height:1; color:var(--dark); font-weight:700;
  transition:background .2s ease, transform .2s ease;
}
.gallery-arrow:hover{background:var(--gold-light); transform:translateY(-50%) scale(1.08);}
.gallery-arrow.prev{left:0;}
.gallery-arrow.next{right:0;}
@media (max-width:768px){
  .gallery-wrap{padding:0 8px;}
  .gallery-arrow{width:42px; height:42px; font-size:22px;}
}

/* ===== PRICING ===== */
.pricing-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:stretch;}
.price-card{
  background:var(--white); border:2px solid var(--border); border-radius:var(--radius-lg);
  padding:44px; display:flex; flex-direction:column; gap:22px;
}
.price-card.premium{
  background:var(--dark); border-color:var(--dark); color:var(--cream); position:relative;
  box-shadow:var(--shadow-strong);
}
.plan-rows{display:flex; flex-direction:column; gap:10px;}
.plan-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 20px; border:1.5px solid rgba(255,255,255,.18); border-radius:var(--radius-sm);
}
.plan-row b{font-family:'Fredoka',sans-serif; font-size:20px; font-weight:600; display:block;}
.plan-row small{display:block; font-size:13px; color:var(--gold-light); font-weight:700;}
.plan-price{font-family:'Fredoka',sans-serif; font-size:26px; font-weight:600; color:var(--gold-light);}
.plan-row.best{background:rgba(232,197,103,.14); border-color:var(--gold-light);}
.addons-head{text-align:center; margin:64px 0 28px;}
.addons-head h3{font-size:28px; margin-bottom:8px;}
.addons-head p{color:var(--text-soft); font-size:16px;}
.addons-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px;}
.addon-card{
  background:var(--white); border:2px solid var(--border); border-radius:var(--radius-lg); padding:36px;
  display:flex; flex-direction:column; gap:14px;
}
.addon-card h4{font-family:'Fredoka',sans-serif; font-size:24px; display:flex; align-items:center; gap:10px;}
.addon-ic{
  width:42px; height:42px; border-radius:50%; background:var(--dark); display:inline-flex;
  align-items:center; justify-content:center; font-size:20px;
}
.addon-card > p{color:var(--text-soft); font-size:15px; margin-bottom:6px;}
.addon-row{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:14px 18px; background:var(--cream); border-radius:var(--radius-sm); font-weight:700; font-size:15px;
}
.addon-row b{font-family:'Fredoka',sans-serif; font-size:20px; color:var(--dark);}
.price-badge{
  position:absolute; top:-16px; right:36px; background:var(--gold-light); color:var(--dark);
  font-weight:800; font-size:13px; padding:8px 20px; border-radius:100px; letter-spacing:.5px;
}
.price-card h3{font-size:26px;}
.price-card.premium h3{color:var(--gold-light);}
.price-tag{font-family:'Fredoka',sans-serif; font-size:44px;}
.price-tag span{font-size:16px; font-weight:400; font-family:'Nunito Sans',sans-serif; color:var(--text-soft);}
.price-card.premium .price-tag span{color:var(--text-soft-light);}
.price-list{display:flex; flex-direction:column; gap:14px;}
.price-list li{display:flex; align-items:flex-start; gap:12px; font-size:15px; font-weight:600;}
.price-list .tick{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--gold-light);
  color:var(--dark); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900;
}
.price-card.premium .price-list .tick{background:var(--gold-light); color:var(--dark);}
.addon-note{
  margin-top:24px; background:rgba(201,154,61,.08); border:1px dashed var(--gold);
  border-radius:var(--radius-sm); padding:20px 24px; font-size:14px; color:var(--text-soft);
}

/* ===== DESCUBRE TEASER ===== */
.descubre-wrap{
  background:var(--dark); border-radius:40px; padding:80px 60px; position:relative; overflow:hidden;
}
.descubre-wrap .hero-paw{opacity:.07;}
.descubre-head{max-width:680px; margin:0 auto 50px; text-align:center; position:relative; z-index:2;}
.descubre-head h2{color:var(--cream); font-size:clamp(30px,4vw,44px); margin:14px 0 16px;}
.descubre-head p{color:var(--text-soft-light); font-size:17px;}
.descubre-categories{
  display:grid; grid-template-columns:repeat(5,1fr); gap:20px; position:relative; z-index:2; margin-bottom:48px;
}
.cat-chip{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:20px;
  padding:28px 14px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
  transition:transform .3s ease, background .3s ease;
}
.cat-chip:hover{transform:translateY(-6px); background:rgba(255,255,255,.1);}
.cat-icon{
  width:56px; height:56px; border-radius:16px; background:var(--gold-light);
  display:flex; align-items:center; justify-content:center; font-size:26px; flex:0 0 auto;
}
.cat-chip span{color:var(--cream); font-size:14px; font-weight:700;}
.descubre-cta{text-align:center; position:relative; z-index:2;}
@media (max-width:980px){
  .descubre-categories{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:560px){
  .descubre-categories{grid-template-columns:repeat(2,1fr);}
}

/* ===== SOCIAL ICONS ===== */
.social-row{display:flex; gap:14px; margin-top:20px;}
.social-icon{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; color:var(--text-soft-light);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.social-icon:hover{background:var(--gold-light); color:var(--dark); transform:translateY(-3px);}

/* ===== CTA BANNER ===== */
.cta-banner{
  background:linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  border-radius:40px; padding:80px 60px; text-align:center; position:relative; overflow:hidden;
}
.cta-banner h2{font-size:clamp(30px,4vw,48px); color:var(--dark); margin-bottom:16px;}
.cta-banner p{font-size:18px; color:var(--dark); opacity:.85; margin-bottom:34px;}
.cta-banner .store-badges{justify-content:center;}

/* ===== FOOTER ===== */
footer{background:var(--dark-2); color:var(--text-soft-light); padding:80px 0 32px;}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:50px; margin-bottom:60px;}
.footer-logo img{height:34px; margin-bottom:18px;}
.footer-top p{font-size:14px; line-height:1.7; max-width:280px;}
.footer-col h4{color:var(--cream); font-size:15px; margin-bottom:18px; font-family:'Nunito Sans',sans-serif; font-weight:800;}
.footer-col ul{display:flex; flex-direction:column; gap:12px;}
.footer-col a{font-size:14px; transition:color .2s ease;}
.footer-col a:hover{color:var(--gold-light);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); padding-top:28px; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:14px; font-size:13px; color:#6E8478;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 980px){
  .nav-links, .nav-cta .btn:first-child{display:none;}
  .burger{display:flex;}
  .hero .container{grid-template-columns:1fr; text-align:center;}
  .hero-text p.lead{margin-left:auto; margin-right:auto;}
  .hero-ctas, .store-badges, .hero-stats{justify-content:center;}
  .hero-visual{margin-top:40px;}
  .steps{grid-template-columns:repeat(2,1fr);}
  .feature-grid{grid-template-columns:1fr;}
  .pricing-grid{grid-template-columns:1fr;}
  .features-wrap, .descubre-wrap, .cta-banner{border-radius:24px; padding:50px 28px;}
  .footer-top{grid-template-columns:1fr 1fr; gap:36px;}
}
@media (max-width: 560px){
  .container{padding:0 20px;}
  .section-pad{padding:80px 0;}
  .steps{grid-template-columns:1fr;}
  .phone-stack{width:340px; height:450px; transform:scale(.82);}
  .footer-top{grid-template-columns:1fr;}
}

@media (max-width:980px){
  .addons-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .hero-tag{font-size:13px; padding:5px 14px 5px 6px; gap:7px;}
  .hero-tag .tag-ic{width:28px; height:28px;}
  .hero-tag .tag-ic svg{width:15px; height:15px;}
  .hero-tag.t1{right:-4%;} .hero-tag.t2{left:-6%;} .hero-tag.t3{right:-6%;} .hero-tag.t4{left:-8%;} .hero-tag.t5{right:-2%;}
  .addon-card{padding:26px;}
  .plan-row{padding:12px 16px;}
}