/* ============================================================
   Ajustes propios modelo-6 (mapeo CMS ↔ Capatel Solar).
   Carga DESPUÉS de style-brand.css. No re-estiliza el tema:
   solo añade lo que el CMS necesita (precio, WhatsApp, thumbs).
   REGLA DE COLOR: los títulos usan el color principal del CMS
   (var(--brand)); el navy queda como tinta estructural.
   ============================================================ */

/* Títulos de sección en color del cliente (regla de colores) */
.section-title h5,
.about-title h5,
.slider-content h5 { color: var(--brand, #76c21b) !important; }

/* ===== Header top (barra de contacto) → fondo color SECUNDARIO, texto/íconos blancos ===== */
.header-top.second-header{
  background:var(--brand-ink,#0b2a31) !important;
  background-image:linear-gradient(90deg,var(--brand-ink,#0b2a31),color-mix(in srgb,var(--brand-ink,#0b2a31) 82%, var(--brand2,#010f2e))) !important;
  border:0 !important;color:#fff !important;padding:10px 0 !important
}
.header-top.second-header a,.header-top.second-header span,.header-cta ul li{color:#fff !important}
/* Todo el header-top en UNA sola fila (contacto + redes) — forzado */
.header-top.second-header .row{flex-wrap:nowrap !important;align-items:center}
.header-top.second-header .col-lg-6:first-child{flex:1 1 auto !important;max-width:none !important;width:auto !important}
.header-top.second-header .col-lg-6.d-none.d-lg-block,.header-top.second-header .header-social.text-right{white-space:nowrap;flex:0 0 auto !important;width:auto !important;max-width:none !important}
.header-cta ul{margin:0;padding:0;list-style:none;display:flex !important;flex-wrap:nowrap !important;align-items:center;gap:0 14px;white-space:nowrap}
.header-cta ul li{display:inline-flex !important;align-items:center;font-size:.78rem;white-space:nowrap}
.header-cta ul li i{color:#fff !important;margin-right:6px;font-size:.82rem;opacity:.9}
.header-social a{color:#fff !important;margin-left:12px;font-size:.95rem;opacity:.9;transition:.2s;display:inline-block}
.header-social a:hover{opacity:1;color:var(--brand,#76c21b) !important}
/* en pantallas medianas, aún más compacto para que no salte de línea */
@media (max-width:1300px){ .header-cta ul li{font-size:.72rem} .header-cta ul{gap:0 10px} }

/* ===== Menú desktop compacto → 7 opciones en una sola línea (forzado) =====
   OJO: solo el <ul> de PRIMER NIVEL (> nav > ul). Los submenús
   (.has-sub > ul) NO se tocan para que sigan ocultándose hasta el hover. */
@media (min-width:992px){
  #header-sticky .second-menu .main-menu > nav > ul{display:flex !important;flex-wrap:nowrap !important;white-space:nowrap;justify-content:flex-end;align-items:center}
  #header-sticky .second-menu .main-menu > nav > ul > li{margin-left:18px !important}
  #header-sticky .second-menu .main-menu > nav > ul > li > a{font-size:14px !important;letter-spacing:0 !important;white-space:nowrap}
  /* NO tocar .has-sub > ul: Capatel lo maneja (display:none + :hover display:block) */
}
@media (min-width:1200px){
  #header-sticky .second-menu .main-menu > nav > ul > li{margin-left:20px !important}
}

/* ===== Breadcrumb de sección (imagen de fondo + overlay de marca) ===== */
.cap-breadcrumb{position:relative;padding:70px 0;background-size:cover !important;background-position:center !important;overflow:hidden}
.cap-breadcrumb::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--brand2,#010f2e) 82%, transparent) 0%,color-mix(in srgb,var(--brand-ink,#0b2a31) 55%, transparent) 100%)}
.cap-breadcrumb .container{position:relative;z-index:1}
.cap-breadcrumb .breadcrumb-wrap h2{color:#fff;font-family:'Playfair Display',serif;font-size:2.4rem;margin-bottom:8px}
.cap-breadcrumb .breadcrumb-wrap nav span{color:rgba(255,255,255,.8)}
.cap-breadcrumb .breadcrumb-wrap nav a{color:var(--brand,#76c21b)}

/* ===== Logo: alto máximo 55px ===== */
#header-sticky .logo img,.footer-widget .f-widget-title img{max-height:55px !important;width:auto !important;object-fit:contain}

/* ===== Sección de contacto (contact.html) ===== */
.contact-area .contact-info{padding:44px 34px;border-radius:10px;color:#fff;height:100%;position:relative;background-color:#010f2e}
.contact-area .contact-info::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(1,15,46,.72),color-mix(in srgb,var(--brand2,#0b2a31) 78%, transparent));border-radius:10px}
.contact-area .contact-info > *{position:relative;z-index:1}
.contact-area .single-cta{border-bottom:1px solid rgba(255,255,255,.12)}
.contact-area .single-cta:last-child{border-bottom:0;margin-bottom:0 !important;padding-bottom:0 !important}
.contact-area .f-cta-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin-bottom:14px;
  background:var(--brand,#76c21b);color:#fff;font-size:20px}
.contact-area .contact-info h5{color:#fff;font-size:1.05rem;margin-bottom:6px;font-weight:600}
.contact-area .contact-info p,.contact-area .contact-info a{color:#e6ebf2;margin:0}
.contact-area .contact-info a:hover{color:var(--brand,#76c21b)}
.contact-area .contact-bg02{background:#fff;border-radius:10px;padding:40px 34px;box-shadow:0 14px 40px rgba(1,15,46,.08);height:100%}
.contact-area .contact-bg02 .section-title{text-align:left}
.contact-area .contact-field input,.contact-area .contact-field textarea,.contact-area .contact-field select{
  width:100%;background:#f6f7f9;border:1px solid #e6e8ee;border-radius:8px;padding:14px 16px;font:inherit;color:#333;transition:.2s}
.contact-area .contact-field textarea{min-height:130px;resize:vertical}
.contact-area .contact-field input:focus,.contact-area .contact-field textarea:focus,.contact-area .contact-field select:focus{
  outline:0;border-color:var(--brand,#76c21b);background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand,#76c21b) 22%, transparent)}
@media(max-width:991px){.contact-area .contact-info{margin-bottom:26px}}

/* ===== grid_block visual "3" = Intercalado ===== */
.cap-interca-row{margin-bottom:60px}
.cap-interca-img{border-radius:12px;overflow:hidden;box-shadow:0 16px 40px rgba(1,15,46,.14)}
.cap-interca-img img{width:100%;display:block;transition:transform .5s}
.cap-interca-img:hover img{transform:scale(1.05)}
.cap-interca-num{display:grid;place-items:center;min-height:220px;border-radius:12px;
  background:linear-gradient(135deg,var(--brand,#76c21b),var(--brand-lite,#a7da42))}
.cap-interca-num span{font-family:'Playfair Display',serif;font-size:5rem;font-weight:800;color:#fff}
.cap-interca-step{display:inline-block;color:var(--brand,#76c21b);font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
.cap-interca-body h3{font-size:1.7rem;margin-bottom:14px;color:#010f2e}
.cap-interca-body .pl-30{padding-left:30px}
@media(max-width:991px){.cap-interca-body{padding:22px 0 0 !important}.cap-interca-num{min-height:160px;margin-bottom:0}}

/* ===== Footer → fondo con colores SECUNDARIO + TERCIARIO ===== */
.cap-footer.footer-bg{
  background-color:var(--brand2,#010f2e) !important;
  background-image:linear-gradient(135deg,var(--brand2,#0b2a31) 0%,color-mix(in srgb,var(--brand-ink,#0b2a31) 60%, var(--brand2,#010f2e)) 100%),var(--foot-img) !important;
  background-blend-mode:multiply,normal !important;background-position:center !important;background-size:cover !important
}
.cap-footer .f-widget-title h2,.cap-footer .footer-link,.cap-footer .footer-link a,.cap-footer .f-contact span,.cap-footer .f-contact a,.cap-footer .footer-widget{color:#fff}
.cap-footer .footer-link a,.cap-footer .f-contact a{opacity:.85}
.cap-footer .footer-link a:hover,.cap-footer .f-contact a:hover{opacity:1;color:var(--brand,#76c21b)}
.cap-footer .copyright-wrap{background:rgba(0,0,0,.22);color:#dfe4ec}
/* iconos del footer en círculo con color de marca (no el azul default) */
.cap-footer .f-contact ul li i.icon{background:var(--brand,#76c21b) !important;color:#fff !important}
.cap-footer .f-contact ul li{color:#e6ebf2}

/* ===== Banda CTA final → gradiente de marca (no el verde cat-bg.png) ===== */
.features-area.cap-cta{
  background-color:var(--brand2,#010f2e) !important;
  background-image:linear-gradient(120deg,color-mix(in srgb,var(--brand2,#0b2a31) 88%, #000) 0%,var(--brand-ink,#0b2a31) 100%),var(--cta-img) !important;
  background-blend-mode:multiply,normal !important;background-size:cover !important;background-position:center !important
}
.features-area.cap-cta .cta-title h2{color:#fff !important}
.features-area.cap-cta .cta-title h5{color:var(--brand,#76c21b) !important}

/* IMPORTANTE: var() NO funciona dentro de gradientes con prefijo
   (-webkit/-moz/-ms), que es como Capatel define los botones/acentos.
   → redefinir con linear-gradient SIN prefijo + fallback sólido, para
   que el gradiente use el color del cliente (--brand → --brand-lite). */
.btn.ss-btn{
  background:var(--brand,#76c21b);
  background-image:linear-gradient(90deg,var(--brand,#76c21b) 0%,var(--brand-lite,#a7da42) 100%) !important;
  color:#fff !important;
}
.btn.ss-btn.active{
  background:#fff !important;background-image:none !important;color:var(--brand,#76c21b) !important;
}
.btn.ss-btn.active:hover{
  background:var(--brand,#76c21b) !important;color:#fff !important;
}
/* Acentos con gradiente de Capatel que también usan el prefijo */
.services-08 .section-title h5::before,
.section-title h5::before{background:var(--brand,#76c21b) !important}

/* Imagen de servicio (services-08) — thumb proporcionada + zoom */
.services-08-thumb a.popup-image { display:block; border-radius:10px; overflow:hidden; cursor:zoom-in; }
.services-08-thumb a.popup-image img { width:100%; height:200px; object-fit:cover; transition:transform .4s ease; }
.services-08-item:hover .services-08-thumb a.popup-image img { transform:scale(1.06); }
.services-08-thumb i.flaticon { line-height:1; }

/* Precio + botón WhatsApp del servicio */
.services-08-price { font-weight:800; color:var(--brand,#76c21b); font-size:1.15rem; margin:6px 0 12px; }
.services-08-wa { padding:8px 18px !important; font-size:14px !important; }
.services-08-wa i { margin-right:6px; }

/* Portfolio: cursor de lupa sobre las imágenes */
.portfolio .grid-item a.popup-image { cursor:zoom-in; display:block; }

/* FAB de WhatsApp flotante */
.wa-fab{position:fixed;right:22px;bottom:22px;z-index:9999;width:56px;height:56px;border-radius:50%;
  background:#25d366;color:#fff;display:grid;place-items:center;font-size:26px;text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.28);transition:transform .2s}
.wa-fab:hover{transform:scale(1.08);color:#fff}

/* Bloques que caen a modelo-8 (fallback) → contenerlos al ancho Capatel */
.mapa-block .wrap,.section .wrap{max-width:1200px;margin:0 auto;padding:0 15px}

/* El about-area sin imagen queda centrado */
.about-area .about-content.pl-30{padding-left:0}

/* ===== Menú móvil PROPIO (drawer) — multinivel, confiable =====
   No dependemos de meanmenu (su reveal no se renderizaba en este layout).
   Hamburger fijo + drawer lateral navy con submenús desplegables. */
html,body{overflow-x:hidden;max-width:100%}
.cap-burger,.cap-drawer,.cap-drawer-backdrop{display:none}
@media (max-width:991px){
  #header-sticky .main-menu,#header-sticky .col-xl-2.text-right,.mobile-menu,.mean-bar{display:none !important}
  #header-sticky .second-menu .logo{padding:12px 0}

  .cap-burger{display:flex;position:fixed;top:14px;right:16px;z-index:10000;
    width:46px;height:42px;flex-direction:column;justify-content:center;gap:6px;
    background:#fff;border:1px solid #e6e8ee;border-radius:9px;box-shadow:0 4px 16px rgba(1,15,46,.12);cursor:pointer}
  .cap-burger span{height:3px;width:24px;margin:0 auto;background:var(--brand,#76c21b);border-radius:2px}

  .cap-drawer-backdrop{display:block;position:fixed;inset:0;background:rgba(1,15,46,.55);
    opacity:0;visibility:hidden;transition:.3s;z-index:10000}
  .cap-drawer-backdrop.open{opacity:1;visibility:visible}

  .cap-drawer{display:block;position:fixed;top:0;right:-340px;width:308px;max-width:86vw;height:100%;
    background:#010f2e;z-index:10001;transition:right .32s ease;padding:64px 0 24px;overflow-y:auto;
    box-shadow:-8px 0 30px rgba(0,0,0,.35)}
  .cap-drawer.open{right:0}
  .cap-drawer-x{position:absolute;top:14px;right:16px;background:none;border:0;color:#fff;font-size:30px;line-height:1;cursor:pointer}

  .cap-drawer-nav{list-style:none;margin:0;padding:0}
  .cap-drawer-nav li{border-top:1px solid rgba(255,255,255,.08)}
  .cap-drawer-nav li a{display:block;color:#fff;text-decoration:none;padding:13px 24px;font-weight:500}
  .cap-drawer-nav li a:hover{color:var(--brand,#76c21b)}
  .cap-drawer-nav .has-sub > a{position:relative}
  .cap-drawer-nav .has-sub > a::after{content:"\203A";position:absolute;right:24px;top:11px;font-size:22px;transition:transform .2s}
  .cap-drawer-nav .has-sub.open > a::after{transform:rotate(90deg)}
  .cap-drawer-nav .has-sub > ul{list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;transition:max-height .3s;background:rgba(255,255,255,.04)}
  .cap-drawer-nav .has-sub.open > ul{max-height:640px}
  .cap-drawer-nav .has-sub > ul li a{padding-left:40px;font-weight:400;font-size:.94rem;color:#cfd6e2;border-top:0}
  .cap-drawer-wa{display:inline-block;margin:22px 24px 0}
}

/* Bloques adaptados: embed, event, video */
.cap-embed-box{background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(1,15,46,.08);padding:14px;overflow:hidden}
.cap-embed-box iframe{width:100%;border:0;display:block;min-height:520px;border-radius:8px}
.cap-event .cap-event-thumb img{width:100%;height:210px;object-fit:cover;display:block}
.cap-event h3 a{color:#010f2e}
.cap-event h3 a:hover{color:var(--brand,#76c21b)}
.video-area .s-video-wrap .popup-video img{width:74px;height:74px;transition:transform .2s}
.video-area .s-video-wrap .popup-video:hover img{transform:scale(1.1)}
/* Banda CTA / features con texto de marca en el kicker */
.features-area .cta-title h5{color:var(--brand,#76c21b) !important}

/* Hero: altura razonable para landing (Capatel usa 901px) + texto legible */
.slider-area .slider-bg{min-height:600px !important;padding:90px 0}
.slider-area .slider-content h5{color:var(--brand,#76c21b) !important;letter-spacing:3px;margin-bottom:14px}
.slider-area .slider-content h2{color:#fff !important;font-size:52px;line-height:1.15}
.slider-area .slider-content p{color:#eef1f6 !important;max-width:720px;margin:18px auto 0}
.slider-area .slider-content .ss-btn{margin-top:6px}

/* Services-08: asegurar tarjetas 3-up con aire y separador correcto */
.services-08 .services-08-item{padding:34px 26px;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(1,15,46,.06);height:100%;margin-bottom:30px;text-align:center;transition:.25s}
.services-08 .services-08-item:hover{box-shadow:0 18px 44px rgba(1,15,46,.12);transform:translateY(-4px)}
.services-08 .services-08-item--wrapper{border-bottom:none !important}
.services-08 .services-08-thumb{margin-bottom:18px}
.services-08 .services-08-thumb i.flaticon{font-size:56px;color:var(--brand,#76c21b);display:inline-block}
.services-08 .services-08-content h3{font-size:22px;margin-bottom:10px}
.services-08 .services-08-content h3 a{color:#010f2e}
.services-08 .services-08-content h3 a:hover{color:var(--brand,#76c21b)}