/* ===========================
   REVELPACK — CSS PRINCIPAL
   Paleta oficial:
   #F36F32 — Naranja principal
   #353334 — Carbón / negro
   #3F88C5 — Azul acento
   #136F63 — Verde acento
   #EBF2FA — Gris claro / fondos
   =========================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

:root {
  /* Paleta RevelPack */
  --orange:       #F36F32;
  --orange-dark:  #d85e22;
  --charcoal:     #353334;
  --charcoal-80:  rgba(53,51,52,0.8);
  --blue:         #3F88C5;
  --teal:         #136F63;
  --light:        #EBF2FA;
  --white:        #ffffff;
  --black:        #0a0a0a;

  /* Roles semánticos */
  --primary:      var(--orange);
  --primary-dark: var(--orange-dark);
  --bg-dark:      var(--charcoal);
  --bg-light:     var(--light);
  --accent:       var(--blue);

  /* Grises de apoyo */
  --gray-200: #e4e4e4;
  --gray-400: #999;
  --gray-600: #666;
  --gray-800: #333;

  /* Tipografía */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', sans-serif;

  /* Forma */
  --radius:    4px;
  --radius-lg: 12px;
  --shadow:    0 2px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.16);
  --transition: 0.25s ease;

  /* Espaciado fluido */
  --space-xs: clamp(8px,  1vw,   12px);
  --space-sm: clamp(12px, 2vw,   20px);
  --space-md: clamp(20px, 3vw,   32px);
  --space-lg: clamp(32px, 5vw,   56px);
  --space-xl: clamp(48px, 8vw,   96px);
  --px:       clamp(16px, 4vw,   40px);
  --gap:      clamp(16px, 2.5vw, 24px);
}

/* ---- RESET ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);color:var(--charcoal);background:var(--white);line-height:1.6;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{cursor:pointer;border:none;background:none;font:inherit;}

/* ---- TOPBAR ---- */
.topbar{
  background:var(--charcoal);
  color:rgba(255,255,255,0.8);
  text-align:center;
  padding:10px var(--px);
  font-size:clamp(0.68rem, 0.65rem + 0.2vw, 0.8rem);
  letter-spacing:0.04em;
}
.topbar a{color:var(--orange);text-decoration:underline;}

/* ---- HEADER ---- */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:var(--charcoal);
  border-bottom:1px solid rgba(255,255,255,0.08);
  box-shadow:0 2px 16px rgba(0,0,0,0.25);
}
.header-inner{
  max-width:1280px;margin:0 auto;padding:0 var(--px);
  display:flex;align-items:center;gap:clamp(16px,3vw,32px);height:72px;
}

/* LOGO */
.logo-img{display:flex;align-items:center;flex-shrink:0;}
.site-header .logo-img img{height:58px;width:auto;display:block;}
.mobile-nav .logo-img img{height:44px;width:auto;display:block;}
.footer-brand .logo-img{margin-bottom:16px;}
.footer-brand .logo-img img{height:44px;width:auto;display:block;}

/* ---- MAIN NAV ---- */
.main-nav{display:flex;align-items:center;flex:1;}
.main-nav>li{position:relative;}
.main-nav>li>a{
  display:block;padding:0 clamp(10px,1.5vw,16px);height:72px;line-height:72px;
  font-size:clamp(0.78rem, 0.75rem + 0.2vw, 0.875rem);font-weight:500;letter-spacing:0.01em;
  color:rgba(255,255,255,0.85);
  transition:color var(--transition);white-space:nowrap;
}
.main-nav>li>a:hover,.main-nav>li.active>a{color:var(--orange);}

/* Mega dropdown */
.mega-menu{
  display:none;position:absolute;top:72px;left:50%;
  transform:translateX(-50%);
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:clamp(20px,3vw,32px);min-width:clamp(280px,40vw,500px);z-index:999;
}
.main-nav>li:hover .mega-menu{display:grid;}
.mega-menu.cols-2{grid-template-columns:1fr 1fr;gap:24px;}
.mega-menu.cols-3{grid-template-columns:1fr 1fr 1fr;gap:20px;}
.mega-menu-group h4{
  font-family:var(--font-display);font-size:clamp(0.62rem, 0.6rem + 0.15vw, 0.7rem);font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--gray-400);
  margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--gray-200);
}
.mega-menu-group ul li a{
  display:flex;align-items:center;gap:10px;padding:7px 0;
  font-size:clamp(0.78rem, 0.75rem + 0.2vw, 0.875rem);color:var(--gray-800);transition:color var(--transition);
}
.mega-menu-group ul li a:hover{color:var(--orange);}
.mega-menu-group ul li a::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--orange);flex-shrink:0;opacity:0.5;transition:opacity var(--transition);
}
.mega-menu-group ul li a:hover::before{opacity:1;}

/* ---- BOTONES ---- */
.header-cta{margin-left:auto;flex-shrink:0;}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 24px;border-radius:var(--radius);
  font-family:var(--font-body);font-weight:500;
  font-size:clamp(0.78rem, 0.75rem + 0.2vw, 0.875rem);
  letter-spacing:0.02em;transition:all var(--transition);cursor:pointer;
}
.btn-primary{background:var(--orange);color:var(--white);border:2px solid var(--orange);}
.btn-primary:hover{background:var(--orange-dark);border-color:var(--orange-dark);}
.btn-outline-white{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,0.55);}
.btn-outline-white:hover{background:var(--white);color:var(--charcoal);}
.btn-outline-dark{background:transparent;color:var(--charcoal);border:2px solid var(--charcoal);}
.btn-outline-dark:hover{background:var(--charcoal);color:var(--white);}
.btn-outline-orange{background:transparent;color:var(--orange);border:2px solid var(--orange);}
.btn-outline-orange:hover{background:var(--orange);color:var(--white);}
.btn-lg{
  padding:clamp(12px,2vw,15px) clamp(24px,3.5vw,36px);
  font-size:clamp(0.875rem, 0.85rem + 0.2vw, 1rem);
}

/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;margin-left:auto;padding:8px;}
.hamburger span{display:block;width:24px;height:2px;background:var(--white);transition:all var(--transition);}

/* ---- HERO ---- */
.hero{
  position:relative;min-height:clamp(520px,88vh,940px);display:flex;
  align-items:center;background:var(--charcoal);overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background-image:url('../images/HERO2.png');
  background-size:cover;background-position:center;opacity:1;
}
.hero-inner{
  position:relative;z-index:1;max-width:1280px;width:100%;
  margin:0 auto;
  padding:clamp(64px,10vw,100px) var(--px) clamp(48px,8vw,80px);
  text-align:left;
}
.hero-badge{
  display:inline-block;background:var(--orange);color:var(--white);
  font-family:var(--font-display);
  font-size:clamp(0.6rem, 0.58rem + 0.15vw, 0.7rem);
  font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  padding:6px 16px;border-radius:100px;
  margin-bottom:clamp(16px,3vw,28px);
}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(2rem, 1.2rem + 4vw, 5.5rem);
  font-weight:800;color:var(--white);
  line-height:1.05;letter-spacing:-0.03em;
  max-width:820px;margin-bottom:clamp(16px,3vw,24px);
}
.hero h1 em{font-style:normal;color:var(--orange);}
.hero p{
  font-size:clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  color:rgba(255,255,255,0.72);
  max-width:520px;margin-bottom:clamp(24px,4vw,40px);line-height:1.7;
}
.hero-actions{
  display:flex;align-items:center;gap:clamp(10px,2vw,16px);
  flex-wrap:wrap;margin-bottom:clamp(32px,6vw,64px);
}


/* ---- SECCIONES ---- */
section{padding:var(--space-xl) var(--px);}
.container{max-width:1280px;margin:0 auto;}
.section-label{
  font-family:var(--font-display);
  font-size:clamp(0.62rem, 0.6rem + 0.15vw, 0.72rem);
  font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--orange);margin-bottom:14px;display:block;
}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 1rem + 2.5vw, 3rem);
  font-weight:800;line-height:1.1;letter-spacing:-0.025em;margin-bottom:20px;
}
.section-subtitle{
  font-size:clamp(0.9rem, 0.85rem + 0.3vw, 1.05rem);
  color:var(--gray-600);max-width:560px;line-height:1.7;
}
.text-center{text-align:center;}
.text-center .section-subtitle{margin-left:auto;margin-right:auto;}

/* ---- VALUE PROPS ---- */
.value-props{background:var(--light);}
.value-props-intro{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--space-md);margin-bottom:var(--space-lg);flex-wrap:wrap;
}
.value-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));
  gap:var(--gap);
}
.value-card{
  background:var(--white);border-radius:var(--radius-lg);
  padding:clamp(20px,3vw,32px) clamp(18px,2.5vw,28px);
  border:1px solid var(--gray-200);
  transition:box-shadow var(--transition),transform var(--transition);
}
.value-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);}
.value-icon{
  width:48px;height:48px;background:var(--light);
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;font-size:1.4rem;
}
.value-card h3{font-family:var(--font-display);font-size:clamp(0.875rem, 0.85rem + 0.18vw, 1rem);font-weight:700;margin-bottom:10px;}
.value-card p{font-size:clamp(0.78rem, 0.76rem + 0.12vw, 0.875rem);color:var(--gray-600);line-height:1.6;}

/* ---- PRODUCTS ---- */
.products-section{background:var(--white);}
.products-intro{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:var(--space-lg);gap:var(--space-md);flex-wrap:wrap;
}
.products-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));
  gap:var(--gap);
}
.product-card{
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--gray-200);
  transition:box-shadow var(--transition),transform var(--transition);
  cursor:pointer;background:var(--white);
}
.product-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);}
.product-card-img{height:clamp(150px,18vw,200px);overflow:hidden;background:var(--light);}
.product-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease;}
.product-card:hover .product-card-img img{transform:scale(1.05);}
.product-card-img-placeholder{
  height:200px;background:var(--light);
  display:flex;align-items:center;justify-content:center;font-size:3rem;
}
.product-card-body{padding:clamp(14px,2vw,20px);}
.product-card-body h3{font-family:var(--font-display);font-size:clamp(0.83rem, 0.8rem + 0.18vw, 0.95rem);font-weight:700;margin-bottom:6px;}
.product-card-body p{font-size:clamp(0.73rem, 0.71rem + 0.12vw, 0.82rem);color:var(--gray-600);line-height:1.5;text-align:justify;}
.products-more{text-align:center;margin-top:clamp(32px,5vw,48px);}
.products-more p{color:var(--gray-600);margin-bottom:20px;}

/* ---- SERVICES ---- */
.services-section{background:var(--charcoal);color:var(--white);}
.services-section .section-title{color:var(--white);}
.services-section .section-subtitle{color:rgba(255,255,255,0.6);}
.services-intro{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:var(--space-lg);gap:var(--space-md);flex-wrap:wrap;
}
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));
  gap:2px;background:rgba(255,255,255,0.06);
  border-radius:var(--radius-lg);overflow:hidden;
}
.service-item{
  background:rgba(255,255,255,0.03);
  padding:clamp(24px,4vw,40px) clamp(20px,3vw,36px);
  transition:background var(--transition);
  border-top:3px solid transparent;
}
.service-item:hover{background:rgba(243,111,50,0.08);border-top-color:var(--orange);}
.service-number{
  font-family:var(--font-display);
  font-size:clamp(0.62rem, 0.6rem + 0.15vw, 0.7rem);
  font-weight:700;letter-spacing:0.14em;color:var(--orange);margin-bottom:16px;display:block;
}
.service-item h3{font-family:var(--font-display);font-size:clamp(0.9rem, 0.88rem + 0.2vw, 1.05rem);font-weight:700;margin-bottom:12px;color:var(--white);}
.service-item p{font-size:clamp(0.78rem, 0.76rem + 0.12vw, 0.875rem);color:rgba(255,255,255,0.55);line-height:1.65;}

/* ---- PROCESS ---- */
.process-section{background:var(--light);}
.process-steps{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:0;margin-top:var(--space-lg);position:relative;
}
.process-steps::before{
  content:'';position:absolute;top:28px;
  left:calc(100% / 12);right:calc(100% / 12);
  height:2px;background:linear-gradient(90deg,var(--orange) 0%,var(--blue) 100%);z-index:0;
}
.process-step{text-align:center;padding:0 clamp(6px,1.5vw,12px);position:relative;z-index:1;}
.step-dot{
  width:clamp(40px,5vw,56px);height:clamp(40px,5vw,56px);background:var(--white);
  border:3px solid var(--orange);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto clamp(12px,2vw,20px);
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(0.8rem, 0.78rem + 0.15vw, 1rem);color:var(--orange);
  box-shadow:0 0 0 6px var(--light);
}
.process-step h4{font-family:var(--font-display);font-size:clamp(0.75rem, 0.73rem + 0.15vw, 0.875rem);font-weight:700;margin-bottom:8px;}
.process-step p{font-size:clamp(0.68rem, 0.66rem + 0.1vw, 0.78rem);color:var(--gray-600);line-height:1.5;}

/* ---- TESTIMONIALS ---- */
.testimonials-section{background:var(--white);}
.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));
  gap:var(--gap);margin-top:var(--space-lg);
}
.testimonial-card{
  background:var(--light);border-radius:var(--radius-lg);
  padding:clamp(20px,3vw,32px);
  border:1px solid var(--gray-200);
  display:flex;flex-direction:column;gap:20px;
  border-top:3px solid var(--orange);
}
.testimonial-stars{display:flex;gap:4px;}
.testimonial-stars span{color:var(--orange);font-size:0.9rem;}
.testimonial-text{font-size:clamp(0.83rem, 0.81rem + 0.12vw, 0.93rem);color:var(--gray-800);line-height:1.7;flex:1;}
.testimonial-name{font-family:var(--font-display);font-weight:700;font-size:clamp(0.78rem, 0.76rem + 0.12vw, 0.875rem);}
.testimonial-company{font-size:clamp(0.7rem, 0.68rem + 0.1vw, 0.8rem);color:var(--gray-400);}

/* ---- FAQ ---- */
.faq-section{background:var(--light);}
.faq-inner{display:grid;grid-template-columns:1fr 2fr;gap:clamp(32px,6vw,80px);align-items:start;}
.faq-item{border-bottom:1px solid var(--gray-200);}
.faq-question{
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(14px,2.5vw,22px) 0;cursor:pointer;
  font-family:var(--font-display);
  font-size:clamp(0.85rem, 0.83rem + 0.15vw, 0.95rem);
  font-weight:600;gap:16px;transition:color var(--transition);
}
.faq-question:hover{color:var(--orange);}
.faq-icon{
  width:28px;height:28px;background:var(--orange);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  color:var(--white);font-size:1.1rem;font-weight:300;
  transition:transform var(--transition);
}
.faq-item.open .faq-icon{transform:rotate(45deg);}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.35s ease;}
.faq-answer-inner{font-size:clamp(0.8rem, 0.78rem + 0.12vw, 0.9rem);color:var(--gray-600);line-height:1.75;padding-bottom:22px;}

/* ---- CTA FINAL ---- */
.cta-section{background:var(--orange);padding:var(--space-xl) var(--px);text-align:center;}
.cta-section .section-title{color:var(--white);max-width:640px;margin:0 auto 20px;}
.cta-section p{color:rgba(255,255,255,0.8);margin-bottom:40px;font-size:clamp(0.9rem, 0.88rem + 0.2vw, 1.05rem);}
.cta-actions{display:flex;gap:clamp(10px,2vw,16px);justify-content:center;flex-wrap:wrap;}

/* ---- FOOTER ---- */
.site-footer{
  background:var(--charcoal);color:rgba(255,255,255,0.6);
  padding:clamp(48px,7vw,72px) var(--px) clamp(24px,4vw,32px);
}
.footer-grid{
  max-width:1280px;margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:clamp(24px,4vw,48px);margin-bottom:clamp(32px,5vw,56px);
}
.footer-brand p{font-size:clamp(0.78rem, 0.76rem + 0.12vw, 0.875rem);line-height:1.7;max-width:280px;margin-bottom:24px;}
.social-links{display:flex;gap:12px;}
.social-link{
  width:36px;height:36px;background:rgba(255,255,255,0.1);
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:0.9rem;transition:background var(--transition);
}
.social-link:hover{background:var(--orange);color:var(--white);}
.footer-col h4{
  font-family:var(--font-display);
  font-size:clamp(0.68rem, 0.66rem + 0.12vw, 0.78rem);
  font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--white);margin-bottom:20px;
}
.footer-col ul li{margin-bottom:10px;}
.footer-col ul li a{font-size:clamp(0.78rem, 0.76rem + 0.12vw, 0.875rem);transition:color var(--transition);}
.footer-col ul li a:hover{color:var(--orange);}
.footer-bottom{
  max-width:1280px;margin:0 auto;padding-top:32px;
  border-top:1px solid rgba(255,255,255,0.1);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
}
.footer-bottom p{font-size:clamp(0.7rem, 0.68rem + 0.1vw, 0.8rem);}

/* ---- MOBILE NAV ---- */
.mobile-nav{
  display:none;position:fixed;inset:0;
  background:var(--charcoal);z-index:2000;
  flex-direction:column;padding:clamp(16px,3vw,24px);overflow-y:auto;
}
.mobile-nav.open{display:flex;}
.mobile-nav-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;}
.mobile-nav-close{font-size:1.5rem;padding:8px;cursor:pointer;color:var(--white);}
.mobile-nav ul li a{
  display:block;padding:16px 0;
  font-family:var(--font-display);
  font-size:clamp(1rem, 0.95rem + 0.4vw, 1.1rem);
  font-weight:700;color:rgba(255,255,255,0.85);
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.mobile-nav ul li a:hover{color:var(--orange);}
.mobile-nav .btn-primary{width:100%;justify-content:center;margin-top:24px;}

/* ---- SCROLL REVEAL ---- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.6s ease,transform 0.6s ease;}
.reveal.visible{opacity:1;transform:none;}

/* ---- RESPONSIVE ---- */
@media(max-width:768px){
  .hero{
    min-height:clamp(360px,70vh,600px);
    align-items:flex-start;
  }
  .hero-bg{
    background-position:center top;
    background-size:cover;
    width:100%;
    max-width:100%;
    height:auto;
  }
  .hero-inner{
    padding:clamp(40px,8vw,64px) var(--px) clamp(32px,6vw,48px);
    text-align:left;
    width:100%;
  }
  .hero h1{
    font-size:clamp(1.75rem,7vw,2.8rem);
    max-width:100%;
  }
  .hero p{
    max-width:100%;
    font-size:clamp(0.9rem,3.5vw,1rem);
  }
  .hero-badge{
    font-size:clamp(0.55rem,2.5vw,0.65rem);
    margin-bottom:clamp(12px,2.5vw,20px);
  }
  .hero-actions{
    flex-direction:column;
    align-items:flex-start;
    gap:clamp(8px,2vw,12px);
    margin-bottom:clamp(20px,4vw,36px);
  }
  .hero-actions .btn{width:100%;justify-content:center;}
}
@media(max-width:1024px){
  .process-steps{grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,32px);}
  .process-steps::before{display:none;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .main-nav{display:none;}
  .hamburger{display:flex;}
  .header-cta{display:none;}
  .faq-inner{grid-template-columns:1fr;gap:clamp(24px,4vw,40px);}
}
@media(max-width:640px){
  .process-steps{grid-template-columns:repeat(2,1fr);gap:clamp(16px,3vw,24px);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .value-props-intro,.products-intro,.services-intro{flex-direction:column;align-items:flex-start;}
}
@media(max-width:480px){
  .process-steps{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .cta-actions{flex-direction:column;}
  .cta-actions .btn{width:100%;justify-content:center;}
}