:root{--ink:#1a1a1a;--amber:#f2ca50;--orange:#ff7a3d;--cream:#fff8ec;--line:#eee2c8;}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Poppins',sans-serif;color:var(--ink);background:var(--cream);overflow-x:hidden;}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px;position:relative;}

/* Elementos laterales flotantes en TODA la página */
.blob{position:absolute;border-radius:50%;pointer-events:none;z-index:0;}
.blob.gold{background:radial-gradient(circle,rgba(242,202,80,.55),transparent 70%);}
.blob.orange{background:radial-gradient(circle,rgba(255,122,61,.4),transparent 70%);}
@keyframes floatY{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-26px) rotate(6deg);}}
@keyframes floatX{0%,100%{transform:translateX(0);}50%{transform:translateX(18px);}}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}


/* HERO */
.hero{position:relative;padding:70px 0 60px;overflow:hidden;}
.blob.b1{width:280px;height:280px;top:-70px;right:6%;animation:floatY 8s ease-in-out infinite;}
.blob.b2{width:190px;height:190px;bottom:-30px;left:2%;animation:floatX 9s ease-in-out infinite;}
.blob.b3{width:140px;height:140px;top:40%;right:22%;animation:floatY 7s ease-in-out infinite reverse;}
.hero-badge{display:inline-flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--ink);border-radius:100px;padding:10px 20px;font-size:13px;font-weight:700;margin-bottom:28px;animation:floatY 4s ease-in-out infinite;}
.hero-badge .star{color:var(--orange);animation:spin 6s linear infinite;display:inline-block;}
h1.hero-t{font-size:76px;font-weight:900;line-height:1;letter-spacing:-.03em;margin-bottom:24px;}
h1.hero-t .hl{position:relative;display:inline-block;color:var(--ink);}
h1.hero-t .hl::after{content:'';position:absolute;left:0;bottom:6px;width:100%;height:18px;background:var(--amber);z-index:-1;transform:skewX(-6deg);}
.hero-sub{font-size:18px;color:#555;max-width:520px;margin-bottom:36px;font-weight:400;}
.hero-cta{display:flex;gap:16px;margin-bottom:56px;flex-wrap:wrap;}

.hero-visual{position:relative;border-radius:32px;overflow:hidden;height:460px;box-shadow:0 30px 60px rgba(26,26,26,.15);}
.hero-visual img{width:100%;height:100%;object-fit:cover;}
.hero-visual .float-card{position:absolute;background:#fff;border-radius:18px;padding:18px 22px;box-shadow:0 14px 30px rgba(26,26,26,.18);display:flex;align-items:center;gap:12px;}
.hero-visual .fc1{top:28px;left:-24px;animation:floatY 5s ease-in-out infinite;}
.hero-visual .fc2{bottom:32px;right:-20px;animation:floatX 5s ease-in-out infinite;}
.fc-dot{width:38px;height:38px;border-radius:10px;background:var(--amber);display:flex;align-items:center;justify-content:center;font-weight:800;}
.fc-text b{display:block;font-size:15px;}
.fc-text small{font-size:12px;color:#777;}

/* STATS FLOTANTES a los lados del hero */
.side-stat{position:absolute;background:#fff;border:2px solid var(--ink);border-radius:20px;padding:16px 22px;text-align:center;z-index:5;}
.side-stat.s1{top:18%;left:-10px;animation:floatY 6s ease-in-out infinite;}
.side-stat.s2{bottom:10%;right:-14px;animation:floatY 7s ease-in-out infinite reverse;}
.side-stat b{font-size:26px;font-weight:900;display:block;}
.side-stat small{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#777;}

/* CTA BUTTONS (hero + final) — override el .btn / .btn-outline transparente del CSS global,
   solo dentro de estas secciones para no afectar otras vistas */
.hero-cta .btn,
.final-cta .btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:var(--amber);
  font-weight:800;font-size:15px;
  padding:16px 30px;border-radius:100px;
  text-decoration:none;border:2px solid var(--ink);
  box-shadow:0 12px 26px rgba(26,26,26,.2);
  transition:.3s cubic-bezier(.2,.8,.2,1);
  position:relative;overflow:hidden;
}
.hero-cta .btn:hover,
.final-cta .btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 18px 34px rgba(26,26,26,.28);}
.hero-cta .btn::after,
.final-cta .btn::after{
  content:'';position:absolute;top:0;left:-75%;width:45%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(242,202,80,.45),transparent);
  transform:skewX(-20deg);transition:left .7s ease;
}
.hero-cta .btn:hover::after,.final-cta .btn:hover::after{left:130%;}

/* Botón secundario "profesional": blanco + borde ink, el amber queda solo como
   acento (punto) para no verse tan amarillo */
.hero-cta .btn-outline,
.final-cta .btn-outline{
  display:inline-flex;align-items:center;gap:10px;
  background:#fff;color:var(--ink);
  font-weight:700;font-size:15px;
  padding:15px 28px 15px 22px;border-radius:100px;
  text-decoration:none;border:2px solid var(--ink);
  transition:.3s cubic-bezier(.2,.8,.2,1);
  position:relative;overflow:hidden;
}
.hero-cta .btn-outline::before,
.final-cta .btn-outline::before{
  content:'';width:8px;height:8px;border-radius:50%;
  background:var(--amber);flex-shrink:0;
  transition:.3s;
}
.hero-cta .btn-outline:hover,
.final-cta .btn-outline:hover{
  background:var(--ink);color:#fff;transform:translateY(-3px) scale(1.02);
  box-shadow:0 14px 28px rgba(26,26,26,.22);
}
.hero-cta .btn-outline:hover::before,
.final-cta .btn-outline:hover::before{background:var(--amber);box-shadow:0 0 10px var(--amber);}

/* NAV RÁPIDA — pills de anclas para saltar de sección sin scrollear.
   Vive dentro del .hero, no toca el menú superior del layout. */
.quick-nav{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:52px;}
.quick-nav a{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;color:#555;
  font-size:12.5px;font-weight:700;
  padding:9px 16px;border-radius:100px;
  border:1.5px solid var(--line);
  text-decoration:none;transition:.25s;
}
.quick-nav a:hover{border-color:var(--ink);color:#fff;background:var(--ink);transform:translateY(-2px);}

/* FRANJA DE ESTADÍSTICAS — entre el hero y "Nosotros", para no dejar tanto vacío */
.stats-strip{
  background:var(--ink);border-radius:28px;
  padding:40px 50px;margin:0 0 90px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  position:relative;z-index:2;
  box-shadow:0 24px 50px rgba(26,26,26,.18);
}
.stat-item{text-align:center;}
.stat-item b{display:block;font-size:34px;font-weight:900;color:var(--amber);letter-spacing:-.02em;}
.stat-item span{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.65);}
.stat-item + .stat-item{border-left:1px solid rgba(255,255,255,.12);}
@media(max-width:960px){
  .stats-strip{grid-template-columns:1fr 1fr;padding:30px 24px;}
  .stat-item + .stat-item{border-left:none;}
}

/* SCROLL REVEAL — fade + slide al entrar en viewport (activado por JS) */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);}
.reveal.in-view{opacity:1;transform:translateY(0);}

/* CARD DE CLIENTES — a la derecha del hero, con eslogan + CTA para agendar */
.client-promo{
  position:absolute;
  top:4%;
  right:-36px;
  max-width:230px;
  background:#fff;
  border:2px solid var(--ink);
  border-radius:24px;
  padding:22px 24px;
  box-shadow:0 20px 40px rgba(26,26,26,.16);
  z-index:6;
  animation:floatY 6.5s ease-in-out infinite;
  transition:.35s cubic-bezier(.2,.8,.2,1);
}
.client-promo:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(26,26,26,.22);border-color:var(--amber);}
.client-promo .cp-pill{
  display:inline-block;background:var(--amber);color:var(--ink);
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  padding:5px 12px;border-radius:100px;margin-bottom:12px;
}
.client-promo h4{font-size:16px;font-weight:800;line-height:1.3;margin-bottom:8px;}
.client-promo p{font-size:12.5px;color:#666;line-height:1.5;margin-bottom:16px;}
.client-promo a{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--ink);color:var(--amber);
  font-size:12.5px;font-weight:800;
  padding:11px 18px;border-radius:100px;text-decoration:none;
  transition:.3s;
}
.client-promo a:hover{background:var(--orange);color:#fff;}

/* SECTION */
.section{padding:110px 0;position:relative;}
.section-head{max-width:600px;margin:0 auto 60px;text-align:center;}
.pill{display:inline-block;background:var(--ink);color:var(--amber);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:8px 18px;border-radius:100px;margin-bottom:18px;}
.section-head h2{font-size:42px;font-weight:900;letter-spacing:-.02em;margin-bottom:14px;}
.section-head p{color:#666;font-size:16px;}

/* ABOUT */
.about-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:center;}
.about-img{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:4/5;transform:rotate(-2deg);box-shadow:0 24px 50px rgba(26,26,26,.15);}
.about-img img{width:100%;height:100%;object-fit:cover;}
.value-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.vcard{background:#fff;border-radius:20px;padding:26px;transition:.35s cubic-bezier(.2,.8,.2,1);border:2px solid transparent;}
.vcard:hover{transform:translateY(-6px) rotate(-1deg);border-color:var(--amber);box-shadow:0 16px 32px rgba(26,26,26,.1);}
.vcard .ic{width:46px;height:46px;border-radius:12px;background:var(--amber);display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-weight:800;transition:.35s cubic-bezier(.2,.8,.2,1);}
.vcard:hover .ic{transform:rotate(-10deg) scale(1.1);}
.vcard h4{font-size:15px;font-weight:700;margin-bottom:6px;}
.vcard p{font-size:13px;color:#666;line-height:1.5;}

/* SERVICIOS */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.svc-card{background:#fff;border-radius:24px;padding:32px;transition:.35s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden;}
.svc-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(26,26,26,.14);}
.svc-card:nth-child(odd):hover{transform:translateY(-8px) rotate(-1.5deg);}
.svc-card:nth-child(even):hover{transform:translateY(-8px) rotate(1.5deg);}
.svc-ic{width:50px;height:50px;border-radius:14px;background:var(--ink);color:var(--amber);display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-size:20px;transition:.35s cubic-bezier(.2,.8,.2,1);}
.svc-card:hover .svc-ic{transform:scale(1.12) rotate(8deg);background:var(--amber);color:var(--ink);}
.svc-card h3{font-size:17px;font-weight:700;margin-bottom:8px;}
.svc-card p{font-size:14px;color:#666;line-height:1.55;}

/* PRECIOS */
.pricing{background:var(--ink);border-radius:40px;padding:80px 60px;position:relative;overflow:hidden;}
.pricing .section-head h2, .pricing .section-head p{color:#fff;}
.pricing .pill{background:var(--amber);color:var(--ink);}
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;position:relative;z-index:2;}
.pcard{background:#242424;border-radius:24px;padding:44px 36px;transition:.3s;}
.pcard.feat{background:linear-gradient(160deg,var(--amber),#e8b93a);}
.pcard:hover{transform:translateY(-6px);}
.pcard .tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;background:rgba(255,255,255,.12);color:#fff;padding:6px 14px;border-radius:100px;margin-bottom:20px;}
.pcard.feat .tag{background:rgba(26,26,26,.15);color:var(--ink);}
.pcard h3{color:#fff;font-size:20px;font-weight:700;margin-bottom:10px;}
.pcard.feat h3{color:var(--ink);}
.pcard .desc{color:rgba(255,255,255,.6);font-size:13px;margin-bottom:26px;}
.pcard.feat .desc{color:rgba(26,26,26,.65);}
.pnum{font-size:56px;font-weight:900;color:var(--amber);letter-spacing:-.03em;}
.pcard.feat .pnum{color:var(--ink);}
.pcard .per{display:block;color:rgba(255,255,255,.5);font-size:12px;margin-bottom:26px;}
.pcard.feat .per{color:rgba(26,26,26,.55);}
.pcard ul{list-style:none;display:grid;gap:10px;border-top:1px solid rgba(255,255,255,.12);padding-top:22px;}
.pcard.feat ul{border-top-color:rgba(26,26,26,.15);}
.pcard li{font-size:13px;color:rgba(255,255,255,.8);padding-left:22px;position:relative;}
.pcard.feat li{color:rgba(26,26,26,.8);}
.pcard li::before{content:'✓';position:absolute;left:0;color:var(--amber);font-weight:800;}
.pcard.feat li::before{color:var(--ink);}

/* SOCIAL */
.soc-grid{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;}
.soc-card{display:flex;align-items:center;gap:12px;background:#fff;border-radius:100px;padding:16px 30px;text-decoration:none;color:var(--ink);font-weight:700;font-size:14px;box-shadow:0 8px 20px rgba(26,26,26,.06);transition:.3s;}
.soc-card:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 14px 28px rgba(26,26,26,.12);background:var(--amber);}
.soc-card .icwrap{width:32px;height:32px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;}

.final{text-align:center;padding:120px 0;position:relative;}
.final h2{font-size:52px;font-weight:900;letter-spacing:-.02em;max-width:640px;margin:0 auto 18px;}
.final p{color:#555;margin-bottom:36px;}
.final-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

footer{text-align:center;padding:36px 0;font-size:13px;color:#888;border-top:2px solid var(--ink);}

@media(max-width:960px){
  .about-wrap,.svc-grid,.price-grid{grid-template-columns:1fr;}
  h1.hero-t{font-size:44px;}
  .final h2{font-size:34px;}
  .side-stat,.blob,.client-promo{display:none;}
  .pricing{padding:50px 24px;border-radius:24px;}
}