/* ===========================
   Variables & base
   =========================== */
:root{
  --accent:#3ecf6d; --accent-2:#23a455; --graphite:#2b3640;
  --ink:#11212d; --muted:#5f6a6e; --bg:#f2f6f5; --card:#ffffff;
  --shadow:0 18px 40px rgba(10,31,28,.18);
  --seamH:120px;

  /* Control independiente barra/logo/hero */
  --headerH:60px;        /* altura barra */
  --logoNavH:100px;       /* altura logo dentro de la barra */
  --peekHero:-80px;       /* cuánto asoma la sección siguiente */
}

*{ box-sizing:border-box } html{ scroll-behavior:smooth }
body{ margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--ink); background:var(--bg); line-height:1.6; font-size:16px }
h1,h2,h3{ font-family:Lora,Georgia,'Times New Roman',serif; margin:0 0 .5rem 0; line-height:1.2 }
.section-title{ font-size:2.2rem } p{ margin:.5rem 0 1rem }

/* ===========================
   NAV (tinte translúcido)
   =========================== */
.navbar{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:linear-gradient(to bottom, rgba(17,33,45,.64), rgba(17,33,45,.38));
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.2rem 1rem; max-width:1200px; margin:0 auto;
  min-height:var(--headerH);
}
.brand{ display:flex; align-items:center; line-height:0; position:relative; z-index:101 }
.nav-logo{ height:var(--logoNavH); width:auto; display:block }

.nav-toggle{ display:none; background:none; border:0; cursor:pointer }
.nav-toggle span{ display:block; width:26px; height:2px; background:#fff; margin:6px 0 }

.nav-links{ list-style:none; display:flex; gap:1.2rem; margin:0; padding:0; position:relative; z-index:100 }
.nav-links li{ display:flex; align-items:center }
.nav-links a{ color:#fff; text-decoration:none; font-weight:700 }
.nav-links a:hover{ color:#c4f3d5 }

.has-submenu{ position:relative }
.submenu{
  display:none; position:absolute; top:100%; left:0;
  background:rgba(8,20,17,.95);
  border:1px solid rgba(255,255,255,.12);
  border-radius:.7rem; padding:.5rem 0; list-style:none; min-width:220px; z-index:120;
  transform:none; transform-origin:top left; text-align:left;
}
.submenu a{ display:block; padding:.55rem 1rem; white-space:nowrap; color:#fff }

/* Escritorio: dropdown por hover (alineado arriba-izquierda) */
@media (hover:hover) and (pointer:fine){
  .has-submenu:hover > .submenu{ display:block }
}

/* ===========================
   HERO (sin ondas, solo por contexto)
   =========================== */
.hero{
  position:relative;
  min-height:calc(100vh - var(--peekHero));
  display:grid; place-items:center; text-align:center; color:#fff; z-index:0;
  background:url('hero-bg3.jpg') center 25% / cover no-repeat;
}
.hero-vis,.ripple-burst{ display:none !important; }
.hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.35)); z-index:1 }
.hero-content{ position:relative; max-width:980px; padding:3.6rem 1rem; z-index:2 }
.hero-logo-img{ height:260px; width:auto; margin-bottom:1rem }
.hero h1{ font-size:2.7rem; margin:.5rem 0 1rem }
.hero p{ font-size:1.15rem; color:#e8faf0 }

/* Fundido con la siguiente sección */
.hero::after{
  content:''; position:absolute; left:0; right:0; bottom:-60px; height:120px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,0) 60%);
}
@supports (-webkit-mask-image: linear-gradient(black, white)) or (mask-image: linear-gradient(black, white)){
  .hero{
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0, rgba(0,0,0,1) calc(100% - var(--seamH)), rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0, rgba(0,0,0,1) calc(100% - var(--seamH)), rgba(0,0,0,0) 100%);
  }
  .hero::after{ background:none }
}

/* Botones */
.btn{ display:inline-block; padding:.9rem 1.2rem; border-radius:1rem; text-decoration:none; font-weight:700 }
.btn-primary{ background:var(--accent); color:#07120f; box-shadow:0 10px 30px rgba(62,207,109,.35) }
.btn-primary:hover{ background:var(--accent-2) }
.btn-outline{ border:2px solid #fff; color:#fff; margin-left:.5rem; background:transparent }
.btn-outline:hover{ background:#ffffff20 }

/* ===========================
   Portada sectores (contexto)
   =========================== */
.sectors{
  position:relative; padding:4rem 1rem;
  background:linear-gradient( rgba(8,20,17,.18), rgba(8,20,17,.18) ), url('bg-general-real.png') center/cover no-repeat;
  background-blend-mode:multiply; color:#11212d;
  margin-top: calc(-1 * var(--seamH)/1.2);
  padding-top: calc(4rem + var(--seamH)/1.2);
}
.seam{ position:absolute; left:0; right:0; height:120px; pointer-events:none }
.seam--top{ top:-60px; background:linear-gradient(to top, rgba(0,0,0,.18), rgba(0,0,0,0) 65%) }
.seam--bottom{ bottom:-60px; background:linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,0) 65%) }

.container{ max-width:1200px; margin:0 auto }
.sector-grid{ display:grid; gap:1.2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) }
.sector-card{ border-radius:1.2rem; padding:1.4rem; text-decoration:none; color:var(--graphite); display:flex; flex-direction:column; gap:.45rem; box-shadow:var(--shadow) }
.sector-card i{ font-size:28px; color:#2f3a3d }
.sector-card h3{ margin:.1rem 0; font-size:1.25rem }
.sector-card p{ color:#3a474d; font-size:.98rem }
.pastel-green{ background:#cfead8 } .pastel-blue{ background:#cfe0ff } .pastel-lime{ background:#d9f5c7 }
.pastel-silver{ background:#dfe7eb } .pastel-peach{ background:#ffe0b8 } .pastel-sky{ background:#cbe9ff } .pastel-lilac{ background:#e8d9ff }

/* ===========================
   Secciones de servicio (fondos con fundido)
   =========================== */
.service-section{ background-size:cover; background-position:center; position:relative; padding:6rem 1rem; background-color:rgba(8,20,17,.12); background-blend-mode:multiply; z-index:0 }
.service-content{ position:relative; display:grid; gap:2rem; grid-template-columns: 1.1fr .9fr; align-items:center; max-width:1200px; margin:0 auto }
.service-text{ max-width:65ch; color:#fff }
.service-text p{ text-align:justify; text-justify:inter-word; hyphens:auto }
.service-text .checks{ list-style:none; padding:0; margin:1rem 0 0 0 }
.service-text .checks li{ margin:.35rem 0 }
.service-text .checks i{ color:#9cf3b6; margin-right:.35rem }
.service-image img{ width:100%; height:auto; border-radius:1rem; box-shadow:var(--shadow) }
.service-image.left{ order:-1 }

.service-section::before{
  content:''; position:absolute; left:0; right:0; top:calc(-1 * var(--seamH)/2); height:var(--seamH); pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.16), rgba(0,0,0,0) 65%)
}
.service-section::after{
  content:''; position:absolute; left:0; right:0; bottom:calc(-1 * var(--seamH)/2); height:var(--seamH); pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.16), rgba(0,0,0,0) 65%)
}
.service-section + .service-section{ margin-top: calc(-1 * var(--seamH)/1.2); padding-top: calc(6rem + var(--seamH)/1.2) }

@supports (-webkit-mask-image: linear-gradient(black, white)) or (mask-image: linear-gradient(black, white)){
  .service-section{
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,1) var(--seamH), rgba(0,0,0,1) calc(100% - var(--seamH)), rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,1) var(--seamH), rgba(0,0,0,1) calc(100% - var(--seamH)), rgba(0,0,0,0) 100%);
  }
  .service-section::before,.service-section::after{ background:none !important }
  .service-section + .service-section{ margin-top: calc(-1 * var(--seamH)); padding-top: calc(6rem + var(--seamH)) }
}

/* ===========================
   FAQ & Contacto
   =========================== */
.faq{ padding:4rem 1rem }
.faq .faq-list{ max-width:900px; margin:0 auto }
.faq details{ background:#fff; border-radius:.9rem; box-shadow:var(--shadow); padding:1rem 1.25rem; margin-bottom:.9rem }
.faq summary{ cursor:pointer; font-weight:700 }
.faq p{ margin:.6rem 0 0; color:#415058; font-size:1rem; line-height:1.7 }

.contact{ padding:4rem 1rem }
.contact-card{ background:#e8f7ef; border:1px solid #bfead1; border-radius:1.2rem; text-align:center; padding:2rem; box-shadow:var(--shadow) }
.contact a{ color:#0f5c38; font-weight:700 }

/* ===========================
   Modal & formulario
   =========================== */
.modal{ position:fixed; inset:0; display:none; z-index:1000 }
.modal.is-open{ display:block }
.modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(2px) }
.modal__box{ position:relative; max-width:820px; margin:6vh auto; background:#fff; border-radius:1.2rem; padding:1.5rem; box-shadow:var(--shadow) }
.modal__close{ position:absolute; top:.4rem; right:.7rem; background:none; border:0; font-size:2rem; line-height:1; cursor:pointer; color:#5b6a70 }

.form-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; margin-top:1rem }
.form-full{ grid-column: 1/-1 }
.form-group{ display:flex; flex-direction:column }
.form-group label{ font-weight:700; font-size:.95rem; margin-bottom:.25rem; color:#22323a }
.form-group input,.form-group textarea{ border:1px solid #d8e2e6; border-radius:.7rem; padding:.75rem .9rem; font-size:1rem; outline:none }
.form-group input:focus,.form-group textarea:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(62,207,109,.15) }
.form-feedback{ margin-top:.6rem; font-weight:600 }
.hp-field{ position:absolute; left:-9999px; opacity:0 }

/* ===========================
   Anclas con header fijo
   =========================== */
.sectors, .service-section, .faq, .contact { scroll-margin-top: calc(var(--headerH) + 20px) }

/* ===========================
   Responsive base
   =========================== */
@media (max-width: 992px){
  .service-content{ grid-template-columns: 1fr }
  .service-image{ order:-1 }
}

/* ===========================
   MÓVIL (≤768px): panel hamburguesa + submenú Servicios
   Hover en desktop, Tap en móvil (como pediste)
   =========================== */
@media (max-width: 768px){
  .nav-toggle{ display:block }

  /* Panel del menú al abrirse */
  .nav-links{
    position:absolute; right:1rem; top:100%;
    background:#0a1f1c; border:1px solid rgba(255,255,255,.08);
    border-radius:.9rem; display:none; flex-direction:column; padding:.5rem; min-width:260px;
    align-items:stretch; z-index:120;
  }
  .nav-links.show{ display:flex !important; }

  .nav-links > li{ align-items:stretch }
  .nav-links > li > a{ width:100%; text-align:left; padding:.65rem .75rem; }

  /* Servicios: etiqueta | lista */
  .nav-links .has-submenu{
    display:grid;
    grid-template-columns: 110px 1fr;
    gap:.25rem 1rem;
    align-items:start;
    padding:.25rem 0;
    width:100%;
  }
  /* Etiqueta pulsable en móvil */
  .nav-links .has-submenu > a{
    grid-column:1; padding:.65rem .75rem; text-align:left;
    pointer-events:auto; color:#fff; opacity:.95;
  }
  /* Lista de sectores: oculta por defecto; visible con .open */
  .nav-links .has-submenu > .submenu{
    grid-column:2; position:static; display:none;
    margin:0; padding:0; border:0; background:transparent;
    text-align:left; transform:none;
  }
  .nav-links .has-submenu.open > .submenu{ display:block; }

  .nav-links .has-submenu > .submenu li a{
    display:block; padding:.55rem .75rem; border-radius:.5rem; text-align:left;
  }
  .nav-links .has-submenu > .submenu li a:hover{
    background: rgba(255,255,255,.06);
  }

  /* Ajustes generales móviles */
  .hero{ min-height:calc(100vh - var(--peekHero)) }
  .hero-logo-img{ height:210px }
  .hero h1{ font-size:2.2rem }
  .hero p{ font-size:1.02rem }
  .section-title{ font-size:1.8rem }
  .form-grid{ grid-template-columns:1fr }
  .nav-logo{ height:var(--logoNavH) }
}

/* Ventana estrecha con ratón (desktop reducido): dropdown flotante por hover */
@media (max-width: 768px) and (hover:hover) and (pointer:fine){
  .has-submenu{ position:relative; }
  .submenu{
    position:absolute; top:100%; left:0; right:auto;
    transform:none; transform-origin:top left; text-align:left;
    display:none;
  }
  .has-submenu:hover > .submenu{ display:block; }
}