/* ==========================================================================
   BioClean · capa visual "confianza" (se carga DESPUÉS de main, theme-upgrade y pages)
   Lógica de color:
     - Azul petróleo profundo (--ink)  = autoridad, seriedad, cumplimiento
     - Verde azulado de marca (--brand) = limpieza, salud, identidad
     - Ámbar (--cta)                    = ÚNICA acción principal (cotizar). Contraste alto sobre oscuro y claro
     - Verde WhatsApp                   = solo para WhatsApp (reconocimiento inmediato)
     - Blanco y gris verdoso            = aire y legibilidad
   Para revertir todo: quitar el <link> a premium.css.
   ========================================================================== */
:root {
  --ink: #0b2b33;
  --ink-2: #123e49;
  --brand: #0d9488;
  --brand-d: #0f766e;
  --brand-l: #14b8a6;
  --cta: #f59e0b;
  --cta-d: #d98706;
  --soft: #f3faf8;
  --line: #dcebe8;
  --text: #33434d;
  --wa: #25d366;
  --wa-d: #128c4a;
  --r-lg: 18px;
  --r-md: 12px;
  --sh-sm: 0 2px 10px rgba(11, 43, 51, .06);
  --sh-md: 0 12px 32px -12px rgba(11, 43, 51, .22);
  --sh-lg: 0 24px 56px -24px rgba(11, 43, 51, .38);
  --heading-font: "Poppins", "Noto Sans", "Segoe UI", system-ui, sans-serif;
  --nav-font: "Poppins", "Noto Sans", "Segoe UI", system-ui, sans-serif;
  --heading-color: var(--ink);
  --default-color: var(--text);
  --nav-color: var(--ink);
  /* #0d9488 sobre blanco = 3.7:1 (insuficiente en texto pequeño); #0f766e = 5.5:1 */
  --accent-color: #0f766e;
  --nav-hover-color: #0f766e;
  --nav-dropdown-hover-color: #0f766e;
}
html { -webkit-text-size-adjust: 100%; }
body { font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5 { letter-spacing: -.01em; }
p { margin-bottom: 1rem; }
:focus-visible { outline: 3px solid var(--cta); outline-offset: 3px; border-radius: 6px; }

/* ---------- Encabezado ---------- */
.header { box-shadow: 0 1px 0 var(--line), 0 8px 24px -18px rgba(11, 43, 51, .35); }
.header .topbar { background: var(--ink) !important; height: 40px; }
.header .topbar .contact-info a, .header .topbar .contact-info i, .header .topbar .contact-info span,
.header .topbar .social-links a, .header .topbar .social-links i { color: #e6f4f1 !important; }
.header .topbar .contact-info a:hover { color: #fff !important; text-decoration: underline; }
.header .topbar .lang-current, .header .topbar .lang-current span, .header .topbar .lang-dropdown a { color: #3f4a56 !important; }
.header .topbar .lang-current i { color: var(--brand) !important; }
.header .topbar .lang-dropdown li.lang-active a { color: var(--brand-d) !important; }
.header .logo .sitename, .header .logo h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.header .logo .sitename::first-letter { color: var(--brand); }
.header .cta-btn, .header .cta-btn:focus {
  background: var(--cta) !important; background-image: none !important; color: var(--ink) !important;
  font-weight: 700; letter-spacing: .01em; text-transform: none; padding: 10px 24px;
  box-shadow: 0 10px 22px -10px rgba(245, 158, 11, .8);
}
.header .cta-btn:hover { background: var(--cta-d) !important; color: var(--ink) !important; transform: translateY(-1px); }
.navmenu a { font-weight: 500; }
@media (min-width: 1200px) { .navmenu > ul > li { padding: 15px 11px; } .navmenu a { font-size: 14.5px; } }
.lang-current { border-radius: 30px; }

/* ---------- Secciones ---------- */
section, .section { padding: 76px 0; }
.light-background { --background-color: var(--soft); }
.section-title { padding-bottom: 44px; }
.section-title h2 { font-size: clamp(1.65rem, 3.2vw, 2.15rem); font-weight: 700; color: var(--ink); padding-bottom: 18px; }
.section-title h2::before { display: none; }
.section-title h2::after { width: 56px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--brand), var(--cta)); }
.section-title p { max-width: 720px; margin: 0 auto; font-size: 1.05rem; }
@media (max-width: 767px) { section, .section { padding: 52px 0; } .section-title { padding-bottom: 30px; } }

/* ---------- Hero de la portada ---------- */
.hero { min-height: auto; padding: 84px 0 72px; }
.hero::after { background: linear-gradient(115deg, rgba(8, 30, 38, .95) 0%, rgba(11, 55, 63, .88) 48%, rgba(13, 148, 136, .55) 100%); }
.hero .welcome h2 { font-size: clamp(1.9rem, 4.4vw, 3.2rem); line-height: 1.15; font-weight: 700; max-width: 880px; }
.hero .welcome p { font-size: clamp(1.02rem, 1.7vw, 1.2rem); max-width: 780px; margin-top: 18px; line-height: 1.65; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 22px; padding: 0; list-style: none; }
.hero-chips li { display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28);
  color: #fff; border-radius: 40px; padding: 7px 14px; font-size: .86rem; font-weight: 500; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero-chips li i { color: var(--cta); }
.hero .content .why-box { background: #fff !important; color: var(--text); border-radius: var(--r-lg); box-shadow: var(--sh-lg); border: 1px solid var(--line); }
.hero .content .why-box h3 { color: var(--ink); font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 14px; }
.hero .content .why-box p { color: var(--text); }
.hero .content .why-box .more-btn { background: var(--ink) !important; color: #fff !important; border: 0; box-shadow: none; }
.hero .content .why-box .more-btn:hover { background: var(--brand-d) !important; }
.hero .content .icon-box { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--r-lg); padding: 30px 24px; }
.hero .content .icon-box i { color: var(--cta); }
@media (max-width: 767px) { .hero { padding: 48px 0 40px; } .hero .content { margin-top: 28px; } }

/* ---------- Botones: una sola acción principal ---------- */
.cta-primary, .btn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 28px; border-radius: 50px;
  background: var(--cta); color: var(--ink) !important; border: 2px solid var(--cta); font-weight: 700; font-size: 1rem;
  box-shadow: 0 14px 28px -14px rgba(245, 158, 11, .9); transition: transform .2s, box-shadow .2s, background .2s;
}
.cta-primary:hover, .btn-cta:hover { background: var(--cta-d); border-color: var(--cta-d); transform: translateY(-2px); color: var(--ink) !important; }
.cta-secondary { min-height: 48px; border-radius: 50px; border: 2px solid var(--brand); color: var(--ink); background: #fff; }
.cta-secondary:hover { background: var(--soft); color: var(--ink); }
.btn-wa-solid { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border-radius: 50px;
  background: var(--wa); color: #06361a !important; font-weight: 700; border: 2px solid var(--wa); transition: .2s; }
.btn-wa-solid:hover { background: #1fb858; transform: translateY(-2px); }
.hero .cta-secondary, .page-hero .cta-secondary, .page-cta .cta-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .85); }
.hero .cta-secondary:hover, .page-hero .cta-secondary:hover, .page-cta .cta-secondary:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* ---------- Tarjetas ---------- */
.services .service-item, .feature-card, .related-card, .coverage .coverage-item, .team .team-member, .ventaja-benefits .benefit, .ventaja-timeline .step {
  border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--sh-sm); background: #fff;
}
.services .service-item { padding: 38px 26px 34px; }
.services .service-item h3 { font-size: 1.2rem; color: var(--ink); }
.services .service-item p { font-size: .95rem; line-height: 1.65; color: var(--text); }
.services .service-item .icon { border-radius: 14px; background: linear-gradient(135deg, var(--brand-l), var(--brand-d)); box-shadow: 0 10px 20px -10px rgba(13, 148, 136, .8); }
.services .service-item .icon::before { display: none; }
.services .service-item:hover { background: #fff; border-color: var(--brand); transform: translateY(-5px); box-shadow: var(--sh-md); }
.services .service-item:hover .icon { background: linear-gradient(135deg, var(--brand-l), var(--brand-d)); }
.services .service-item:hover .icon i { color: #fff; }
.services .service-item:hover h3 { color: var(--brand-d); }
.services .service-item:hover p { color: var(--text); }
.feature-card:hover, .related-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--brand); }
.feature-card .icon { border-radius: 14px; background: linear-gradient(135deg, var(--brand-l), var(--brand-d)); }
img.img-fluid, .hero-photo, .about img, .departments .details img { border-radius: var(--r-lg); }

/* ---------- Página interna: banner oscuro ---------- */
section.page-hero { background: linear-gradient(125deg, #081e26 0%, var(--ink-2) 55%, #0d6f69 100%); color: #e6f4f1; padding: 52px 0 60px; overflow: hidden; position: relative; }
section.page-hero::before { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(20, 184, 166, .35), transparent 65%); pointer-events: none; }
.page-hero h1 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.15; }
.page-hero .lead-text { color: #d3e8e5; font-size: 1.12rem; }
.page-hero .crumbs, .page-hero .crumbs span { color: #a9cbc7; }
.page-hero .crumbs a { color: #7fe3d4; }
.page-hero .crumbs .current { color: #fff; }
.page-hero .seals span { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .26); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.page-hero .seals span i { color: var(--cta); }
.page-hero .hero-photo { border: 4px solid rgba(255, 255, 255, .18); box-shadow: var(--sh-lg); }
section.page-cta { background: linear-gradient(125deg, #081e26, var(--ink-2) 60%, #0d6f69); }
.page-cta .cta-primary { background: var(--cta); color: var(--ink) !important; border-color: var(--cta); }
.page-cta h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.repse-box { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--cta); box-shadow: var(--sh-sm); }
.repse-box i { color: var(--brand-d); }
.compliance-table { border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-sm); }
.compliance-table th { background: var(--ink); color: #fff; }

/* ---------- Preguntas frecuentes ---------- */
.faq .faq-container .faq-item { border-radius: var(--r-md); border: 1px solid var(--line); box-shadow: var(--sh-sm); }
.faq .faq-container .faq-item h3 { font-size: 1.04rem; font-weight: 600; color: var(--ink); }
.faq .faq-container .faq-active { background: #fff; border-color: var(--brand); box-shadow: var(--sh-md); color: var(--text); }
.faq .faq-container .faq-active h3, .faq .faq-container .faq-active h3:hover { color: var(--brand-d); }
.faq .faq-container .faq-active .faq-toggle { color: var(--brand-d); }

/* ---------- Pie de página ---------- */
footer#footer, footer#footer.light-background { background: var(--ink) !important; border-top: 4px solid var(--cta); }
footer#footer, footer#footer p, footer#footer span, footer#footer strong, footer#footer li, footer#footer a { color: #cfe3e0 !important; }
footer#footer h4 { color: #fff !important; }
footer#footer a:hover { color: var(--cta) !important; }
footer#footer .sitename { color: #fff !important; }
footer#footer .copyright { border-top: 1px solid rgba(255, 255, 255, .12); }
footer#footer .repse-reg { color: #9fc4bf !important; }
footer#footer .social-links a { border-color: rgba(255, 255, 255, .3); }

/* ---------- Formularios ---------- */
.form-hero { background: linear-gradient(125deg, #081e26, var(--ink-2) 60%, #0d6f69) !important; }
.form-hero h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.trust-bar { background: #fff; border-bottom: 1px solid var(--line); }
.form-card { border-radius: var(--r-lg); box-shadow: var(--sh-lg); border: 1px solid var(--line); }
.form-group input[type="text"], .form-group input[type="tel"], .form-group input[type="email"], .form-group input[type="number"], .form-group select, .form-group textarea { font-size: 16px; min-height: 48px; border-radius: var(--r-md); }
#btn-submit { background: var(--cta) !important; color: var(--ink) !important; font-weight: 700; border-radius: 50px; min-height: 54px; box-shadow: 0 14px 28px -14px rgba(245, 158, 11, .9); }
#btn-submit:hover { background: var(--cta-d) !important; }
.btn-next { background: var(--ink); border-color: var(--ink); }
.btn-next:hover { background: var(--brand-d); border-color: var(--brand-d); }
.steps-progress li.active, .steps-progress li.done { border-color: var(--brand); }

/* ---------- WhatsApp y barra móvil ---------- */
a.whatsapp-float { background: var(--wa) !important; box-shadow: 0 10px 24px -8px rgba(18, 140, 74, .7); }
.mbar { display: none; }
@media (max-width: 767px) {
  body { padding-bottom: 76px; }
  a.whatsapp-float { display: none !important; }
  .scroll-top { bottom: 88px !important; right: 12px !important; }
  .mbar { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 99998;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line);
    box-shadow: 0 -10px 30px -12px rgba(11, 43, 51, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .mbar a { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 52px; border-radius: 14px; font-weight: 700; font-size: .92rem; text-decoration: none; line-height: 1.1; text-align: center; }
  .mbar .m-call { background: var(--ink); color: #fff !important; }
  .mbar .m-quote { background: var(--cta); color: var(--ink) !important; }
  .mbar .m-wa { background: var(--wa); color: #06361a !important; }
  .mbar i { font-size: 1.15rem; }
  .header .cta-btn { display: none !important; }
  .page-hero .cta-actions a, .hero-cta a { flex: 1 1 100%; }
  .hero-chips li { font-size: .8rem; padding: 6px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Base de botones para páginas que no cargan pages.css (portadas) */
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 26px; font-weight: 700; font-size: 1rem; transition: .2s; }

/* ==========================================================================
   Capa "llamativa y profesional" (v2)
   ========================================================================== */
/* Encabezado translúcido */
.header { background: rgba(255, 255, 255, .92) !important; backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); }

/* Fondo con textura sutil en secciones claras */
.light-background { background-image: radial-gradient(rgba(13, 148, 136, .07) 1px, transparent 1px); background-size: 22px 22px; }

/* Banner: halos de luz detrás del título */
.hero .welcome { position: relative; }
.hero .welcome::before { content: ""; position: absolute; left: -80px; top: -90px; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, .22), transparent 65%); z-index: -1; pointer-events: none; filter: blur(4px); }
.hero .welcome h2 { text-shadow: 0 4px 30px rgba(0, 0, 0, .35); }

/* Botón principal con brillo al pasar el mouse */
.cta-primary, .btn-cta, #btn-submit { position: relative; overflow: hidden; }
.cta-primary::after, #btn-submit::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); transition: left .6s ease; pointer-events: none; }
.cta-primary:hover::after, #btn-submit:hover::after { left: 140%; }

/* Tarjetas: barra superior de color que aparece al pasar el mouse */
.services .service-item, .feature-card, .related-card, .coverage .coverage-item { position: relative; overflow: hidden; }
.services .service-item::after, .feature-card::after, .related-card::after, .coverage .coverage-item::after {
  content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: linear-gradient(90deg, var(--brand), var(--cta));
  transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.services .service-item:hover::after, .feature-card:hover::after, .related-card:hover::after, .coverage .coverage-item:hover::after { transform: scaleX(1); }
.related-card i { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(20, 184, 166, .14), rgba(15, 118, 110, .2)); color: var(--brand-d); font-size: 1.25rem; }

/* Fotos con zoom suave */
.departments .details img, .about img, .administracion img, .gallery img, .hero-photo { transition: transform .5s ease, box-shadow .5s ease; }
.departments .details img:hover, .about img:hover, .administracion img:hover { transform: scale(1.02); box-shadow: var(--sh-lg); }

/* Franja oscura del diferenciador (control en tiempo real) */
section.ventaja { background: linear-gradient(160deg, #081e26 0%, var(--ink) 45%, #0c4a50 100%) !important; position: relative; }
section.ventaja::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 300px at 85% 10%, rgba(20, 184, 166, .22), transparent 70%), radial-gradient(500px 260px at 10% 90%, rgba(245, 158, 11, .12), transparent 70%); }
section.ventaja > .container { position: relative; }
section.ventaja .section-title h2, section.ventaja .ventaja-headline { color: #fff; }
section.ventaja .ventaja-tagline { color: var(--cta); }
section.ventaja .ventaja-sub, section.ventaja .section-title p { color: #cfe3e0; }
section.ventaja .more-link { color: #7fe3d4; }
section.ventaja .more-link:hover { color: #fff; }
.ventaja-trust .seal { background: rgba(255, 255, 255, .07) !important; border: 1px solid rgba(255, 255, 255, .18) !important; color: #fff !important; box-shadow: none !important; }
.ventaja-trust .seal i { color: var(--cta) !important; }
.ventaja-timeline .step-num { background: var(--cta) !important; color: var(--ink) !important; box-shadow: 0 10px 22px -8px rgba(245, 158, 11, .7) !important; }
.ventaja-timeline .step, .ventaja-benefits .benefit { border-color: transparent !important; }
.ventaja-benefits .benefit-icon { color: var(--brand-d) !important; }
.ventaja-cta { border: 1px solid rgba(255, 255, 255, .14); }
.ventaja-cta .cta-primary { background: var(--cta) !important; color: var(--ink) !important; }

/* Zonas de cobertura: icono en ámbar */
.coverage .coverage-item .icon i, .coverage .coverage-item i { color: var(--brand-d); }

/* Cierre previo al pie: llamada a cotizar */
.pre-footer-cta { background: linear-gradient(120deg, #f59e0b 0%, #fbbf24 100%); padding: 44px 0; }
.pre-footer-cta h2 { color: var(--ink); font-weight: 700; font-size: clamp(1.4rem, 2.8vw, 2rem); margin: 0 0 6px; }
.pre-footer-cta p { color: #3a2a06; margin: 0; }
.pre-footer-cta .cta-actions { justify-content: flex-end; }
.pre-footer-cta .btn-dark-solid { display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 12px 28px; border-radius: 50px; background: var(--ink); color: #fff !important; font-weight: 700; transition: .2s; }
.pre-footer-cta .btn-dark-solid:hover { background: #000; transform: translateY(-2px); }
.pre-footer-cta .btn-wa-solid { background: #fff; border-color: #fff; color: #0b6b38 !important; }
@media (max-width: 991px) { .pre-footer-cta { text-align: center; } .pre-footer-cta .cta-actions { justify-content: center; margin-top: 18px; } }

/* El titular del banner ahora es H1 (antes H2; el H1 era el logo) */
.hero .welcome h1 { margin: 0; color: #fff; font-size: clamp(1.9rem, 4.4vw, 3.2rem); line-height: 1.15; font-weight: 700; max-width: 880px; text-shadow: 0 4px 30px rgba(0, 0, 0, .35); }