:root{
  --nav:#0f1630;
  --blue:#1f2f6a;      /* footer + ctas */
  --light:#f4efe9;
  --text:#0e1116;
  --muted:#6b7280;
  --card:#ffffff;
  --shadow:0 8px 24px rgba(0,0,0,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--text);background:var(--light)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1180px,92vw);margin:0 auto}

/* NAV */
nav{background:var(--nav);position:sticky;top:0;z-index:20;box-shadow:var(--shadow)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:18px}
.brand img{height:36px}
.menu{display:flex;align-items:center;gap:22px;color:#fff}
.dropdown{ position:relative }
.drop-btn{ color:#fff; cursor:pointer }
.drop-panel{
  position:absolute; top:calc(100% + 10px); left:0;
  background:#0e1532; border-radius:12px; padding:10px;
  min-width:220px; box-shadow:0 8px 24px rgba(0,0,0,.25);
  z-index:1000;
  opacity:0; transform:translateY(6px);
  pointer-events:none; transition:opacity .16s ease, transform .16s ease;
}
.dropdown.open .drop-panel,
.dropdown:hover .drop-panel{ opacity:1; transform:none; pointer-events:auto; }
.drop-item{display:block;padding:10px 12px;border-radius:10px;color:#fff}
.drop-item:hover{background:#192044}
.cta{background:#24C1A0;color:#062b24;padding:12px 18px;border-radius:999px;font-weight:900;box-shadow:0 6px 18px rgba(36,193,160,.25)}

/* HERO */
.hero{position:relative;overflow:hidden}
.hero img{width:100%;height:64vh;object-fit:cover}
.hero .overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 16px}
.hero h1{color:#fff;font-size:clamp(26px,5vw,52px);line-height:1.06;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.hero p{margin-top:10px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.35)}

/* SECTION */
.section{padding:40px 0}
.section h2{font-size:clamp(22px,3.2vw,36px);margin:0 0 10px}
.section p.lead{color:var(--muted);margin:0 0 18px}

/* SOLUCIONES */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card .cover{aspect-ratio:16/10}
.card .cover img{width:100%;height:100%;object-fit:cover}
.card .content{padding:16px}
.card h3{margin:4px 0 8px}
.card ul{margin:0 0 14px 0; padding:0; list-style:none}
.card li{display:flex; gap:10px; align-items:flex-start; margin:8px 0}
.card li svg{flex:0 0 18px; width:18px; height:18px; margin-top:2px; color:#1a2b57}
.card .actions{padding:0 16px 18px}
.btn{display:inline-block;background:#1a2b57;color:#fff;padding:10px 14px;border-radius:12px;font-weight:700}

/* SECTORES */
.slider{position:relative}
.slider-track{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:6px;scrollbar-width:none}
.slider-track::-webkit-scrollbar{display:none}
.sector{min-width:280px;flex:0 0 280px;background:var(--card);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.sector .ph{aspect-ratio:4/3}
.sector .ph img{width:100%;height:100%;object-fit:cover}
.sector .name{padding:10px 12px;font-weight:700}
.slider .nav{position:absolute;top:42%;transform:translateY(-50%);background:#0e1532;color:#fff;border:none;border-radius:999px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow)}
.slider .prev{left:-10px}.slider .next{right:-10px}

/* FRAGANCIAS */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.chip{border:1px solid #cbd5e1;border-radius:999px;padding:8px 12px;background:#fff;cursor:pointer;font-weight:600}
.chip.active{background:#10b981;border-color:#10b981;color:#fff}
.frag-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.frag{background:var(--card);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.frag .ph{aspect-ratio:1/1}
.frag .ph img{width:100%;height:100%;object-fit:cover}
.frag .name{padding:10px 12px;font-weight:700}

/* BENEFICIOS */
.benefits{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:end}
.benefit-card{background:var(--card);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.benefit-card .img{aspect-ratio:4/3}
.benefit-card .img img{width:100%;height:100%;object-fit:cover}
.benefit-card .label{padding:12px 14px;font-weight:800;text-align:center}
.sep{font-size:40px;font-weight:900;color:#192044;display:flex;align-items:center;justify-content:center;margin-bottom:22px}

/* FORM */
.form-card{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:16px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.inp{width:100%;padding:12px 14px;border:1px solid #e0e0e0;border-radius:12px;background:#fff}
.choice{display:flex;gap:8px;margin:8px 0 0;flex-wrap:wrap}
.choice .opt{padding:9px 12px;border-radius:999px;border:1px solid #10b981;color:#0a7a5b;background:#f3faf7;cursor:pointer;user-select:none}
.choice .opt.active{background:#10b981;color:#fff;border-color:#10b981}
textarea.inp{height:120px;resize:vertical}

/* FOOTER */
footer{background:var(--blue);color:#fff;margin-top:40px}
.footer-inner{padding:28px 0;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.footer-contact{display:flex;flex-direction:column;gap:4px}
.social{display:flex;gap:14px;align-items:center}
.social a{display:flex;width:38px;height:38px;border-radius:50%;background:#223064;align-items:center;justify-content:center}
.social img, .social svg{width:22px;height:22px}

/* Responsive */
@media (max-width:980px){
  .cards{grid-template-columns:1fr}
  .frag-grid{grid-template-columns:repeat(2,1fr)}
  .benefits{grid-template-columns:1fr;gap:12px}
  .sep{display:none}
  .hero img{height:54vh}
  .row{grid-template-columns:1fr}
}


/* === Patch v7: hero adjustments & mobile tweaks === */

/* Hero: azul al texto pequeño */
.hero h1 + p { color: var(--blue); }

/* Hero: subir textos en desktop (ajuste solicitado) */
@media (min-width: 1024px){
  .hero h1,
  .hero h1 + p {
    transform: translateY(-540px);
  }
}

/* Hero: ocultar el texto pequeño en móvil */
@media (max-width: 767px){
  .hero h1 + p { display: none !important; }
}

/* Nav: evitar que se desordene en desktop */
@media (min-width: 1024px){
  .nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
  .menu{ display:flex; align-items:center; gap:22px; }
}

/* Logo imagen: asegurar visibilidad */
.brand img{ max-height:36px; height:auto; display:block; }

/* === Patch hero & nav (v8) ==================================== */

/* 1) Variables y capa de seguridad */
:root{
  /* Ajusta esta variable si quieres subir/bajar más el texto en desktop */
  --hero-shift-desktop: -10px; /* en lugar de -300px para no sacarlo del viewport */
}

/* 2) Asegurar que los textos del hero siempre estén por encima y visibles */
.hero, .hero-home { position: relative; }
.hero h1, .hero-home h1,
.hero p,  .hero-home p {
  position: relative;
  z-index: 2;
}

/* 3) Subir los textos en desktop + texto pequeño en azul */
@media (min-width: 1024px){
  .hero h1, .hero-home h1 {
    transform: translateY(var(--hero-shift-desktop));
  }
  /* el p que sigue inmediatamente al H1 (subtítulo) */
  .hero h1 + p, .hero-home h1 + p {
    transform: translateY(calc(var(--hero-shift-desktop) - 8px));
    color: var(--blue);
  }
}

/* 4) En móvil ocultar el subtítulo y no mover el título */
@media (max-width: 767px){
  .hero h1 + p, .hero-home h1 + p {
    display: none !important;
  }
  .hero h1, .hero-home h1 {
    transform: none;
  }
}

/* 5) Evitar que el hero recorte el texto si se desplaza */
.hero .container, .hero-home .container { overflow: visible; }

/* 6) Nav desktop: mantener alineado (por si se desordenó) */
@media (min-width: 1024px){
  .nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
  .menu{ display:flex; align-items:center; gap:22px; }
}

/* 7) Logo visible en todas las vistas */
.brand img{ max-height:36px; height:auto; display:block; }

/* ===== Fixes móvil (pegar al final de styles.css) ===== */

/* 1) Evitar desplazamiento horizontal en móvil */
html, body {
  width: 100%;
  overflow-x: hidden;
}

/* Asegura que nada se desborde horizontalmente */
.hero, .hero-home, .hero-hogar,
.container, .cards, .sectores, .benefits-row {
  max-width: 100%;
  overflow-x: clip; /* oculta cualquier pixel sobrante de sliders/sombras */
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 2) Logo responsive (se ve en móvil y desktop) */
.brand img {
  height: 28px;         /* altura en móvil */
  width: auto;
  display: block;
}
@media (min-width: 768px) {
  .brand img { height: 36px; }  /* tu valor actual para desktop */
}


/* === Minimal fix pack (v3) === */

/* 1) Logo visible en móvil */
.brand img{display:block;height:28px;width:auto;}
@media(min-width:980px){ .brand img{height:36px;} }

/* 2) Menú hamburguesa solo en móvil */
.hamburger{display:none;background:transparent;border:0;color:#fff;font-size:26px;line-height:1;padding:6px 8px;cursor:pointer;}
@media(max-width:980px){
  .hamburger{display:block;}
  nav .menu{
    display:none;flex-direction:column;gap:10px;
    position:absolute;left:0;right:0;top:100%;
    background:var(--nav);padding:14px 20px;z-index:9999;
  }
  nav .menu.open{display:flex;}
  /* Submenú de Soluciones por toque */
  .dropdown .drop-panel{
    position:static;background:transparent;box-shadow:none;padding:0 0 0 12px;
    opacity:1;transform:none;pointer-events:auto;display:none;
  }
  .dropdown.open .drop-panel{display:block;}
}

/* 3) Hero: subir texto sin cambiar HTML */
.hero .overlay .container{transform:translateY(-60px);}
@media(min-width:980px){ .hero .overlay .container{transform:translateY(-120px);} }

/* 4) Botón flotante de WhatsApp con PNG provisto */
.wa-float{position:fixed;right:16px;bottom:16px;width:56px;height:56px;z-index:10000;display:flex;align-items:center;justify-content:center;}
.wa-float img{width:100%;height:100%;object-fit:contain;display:block;}



/* === FAQ styles === */
.faq .faq-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
.faq .faq-illus{min-height:260px;border-radius:16px;background:#e9ecf6;background-size:cover;background-position:center;box-shadow:var(--shadow)}
.faq .faq-list h2{margin:0 0 12px 0}
.faq .faq-item{background:var(--card);border:1px solid #e5e7eb;border-radius:12px;margin-bottom:10px;overflow:hidden}
.faq .faq-item summary{list-style:none;cursor:pointer;padding:16px 18px;font-weight:600;color:#1f2f6a;display:flex;align-items:center;justify-content:space-between}
.faq .faq-item summary::-webkit-details-marker{display:none}
.faq .faq-item summary::after{content:'▾';transition:transform .2s ease}
.faq .faq-item[open] summary::after{transform:rotate(-180deg)}
.faq .faq-answer{padding:0 18px 16px 18px;color:var(--text)}
@media(min-width:980px){
  .faq .faq-grid{grid-template-columns:1fr 1.3fr}
  .faq .faq-illus{min-height:380px}
}



/* === FAQ vertical image sizing (refined) === */
.faq .faq-grid{align-items:stretch;}
@media (min-width:980px){
  .faq .faq-grid{grid-template-columns:minmax(340px, 420px) 1fr; gap:32px;}
  .faq .faq-illus{height:100%; min-height:auto;}
}
.faq .faq-illus{
  background-size:cover;
  background-position:center;
  border-radius:28px;
  position:relative;
  overflow:hidden;
}
/* Decorative corner (optional) */
.faq .faq-illus::before{
  content:"";
  position:absolute;
  top:-14px; left:-14px;
  width:110px; height:110px;
  background:#31d7c7;
  border-radius:22px;
  transform:rotate(45deg);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}