/* =====================================================
   Extermiclean – style.css (claude-optimized)
   Paleta: azul marino #07294B | dorado #d4af37 | blanco
   CSS limpio, sin duplicados, con efectos visuales
   prefers-reduced-motion respetado vía AOS config
   ===================================================== */

/* ── Variables ── */
:root {
  --c-primary:   #07294B;
  --c-secondary: #0e4173;
  --c-accent:    #d4af37;
  --c-accent-h:  #c49b28;
  --c-bg-light:  #f7f9fc;
  --c-bg-dark:   #0a2c4a;
  --c-text:      #1f2937;
  --c-muted:     #4b5563;
  --c-white:     #ffffff;
  --container:   1200px;
  --r-sm: 8px; --r-md: 16px; --r-lg: 20px;
  --sh-sm: 0 4px 14px rgba(15,23,42,.06);
  --sh-md: 0 10px 28px rgba(15,23,42,.09);
  --sh-lg: 0 18px 44px rgba(15,23,42,.13);
  --tr: .22s ease;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.65; color: var(--c-text); background: #fff; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.container { width: 90%; max-width: var(--container); margin: 0 auto; }

/* ── Botones ── */
.btn {
  display: inline-block;
  padding: .8rem 1.5rem;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: .95rem;
  border: 2px solid transparent;
  text-align: center;
  cursor: pointer;
  transition: background var(--tr), color var(--tr), border-color var(--tr),
              transform var(--tr), box-shadow var(--tr);
}
.btn--primary { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.btn--primary:hover { background: var(--c-secondary); border-color: var(--c-secondary); transform: translateY(-2px); box-shadow: var(--sh-sm); }

.btn--secondary { background: #fff; color: var(--c-primary); border-color: var(--c-primary); }
.btn--secondary:hover { background: var(--c-primary); color: #fff; transform: translateY(-2px); }

.btn--small { font-size: .8rem; padding: .45rem .95rem; border-radius: 4px; background: var(--c-secondary); color: #fff; }
.btn--small:hover { background: var(--c-primary); }

.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn--ghost-light:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }

.btn--mobile-cta {
  background: linear-gradient(135deg,#d6a43a,#b8861e);
  color: #0b1e36;
  border-color: transparent;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(184,134,30,.28);
  margin-top: .5rem;
}
.btn--mobile-cta:hover { background: linear-gradient(135deg,#e3b552,#c9962d); transform: translateY(-2px); }

/* ── Hero buttons ── */
.hero__actions .btn--primary {
  background: linear-gradient(135deg,#d6a43a,#b8861e);
  color: #0b1e36;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  box-shadow: 0 14px 32px rgba(184,134,30,.28);
}
.hero__actions .btn--primary:hover { background: linear-gradient(135deg,#e3b552,#c9962d); transform: translateY(-2px); box-shadow: 0 18px 36px rgba(184,134,30,.36); }
.hero__actions .btn--secondary {
  background: rgba(255,255,255,.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 14px;
  backdrop-filter: blur(6px);
}
.hero__actions .btn--secondary:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); border-color: rgba(255,255,255,.5); }

/* ── Topbar ── */
.topbar { background: var(--c-primary); color: #fff; font-size: .85rem; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; padding: .35rem 0; flex-wrap: wrap; gap: .4rem; }
.topbar__left { display: flex; align-items: center; gap: .45rem; }
.topbar a { color: #fff; }
.topbar a:hover { text-decoration: underline; }

/* ── Header ── */
.header { background: #fff; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 12px rgba(7,41,75,.07); }
.header__inner { display: flex; align-items: center; justify-content: space-between; padding: .45rem 0; gap: 1rem; }
.header__logo img { height: 56px; width: auto; object-fit: contain; }

.header__nav ul { list-style: none; display: flex; gap: 1.15rem; }
.header__nav a { color: var(--c-primary); font-weight: 600; font-size: .92rem; position: relative; transition: color var(--tr); }
.header__nav a::after { content:""; position:absolute; left:0; bottom:-3px; width:0; height:2px; background:var(--c-accent); border-radius:2px; transition: width var(--tr); }
.header__nav a:hover { color: var(--c-secondary); }
.header__nav a:hover::after { width: 100%; }
.header__cta .btn { padding: .72rem 1.1rem; font-size: .86rem; }

/* ── Hamburger ── */
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; background: none; border: none; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--c-primary); border-radius: 2px; transition: all .3s; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Menú móvil ── */
.mobile-nav {
  display: none; position: fixed; inset: 0;
  background: var(--c-primary); z-index: 999;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 1.75rem;
}
.mobile-nav.open { display: flex; }
.mobile-nav a { color: #fff; font-size: 1.35rem; font-weight: 700; letter-spacing: .02em; transition: color var(--tr); }
.mobile-nav a:hover { color: var(--c-accent); }
.mobile-nav__close { position: absolute; top: 1.2rem; right: 1.5rem; font-size: 2rem; color: #fff; cursor: pointer; background: none; border: none; line-height: 1; }

/* ── Hero ── */
.hero { position: relative; overflow: hidden; height: 70vh; min-height: 500px; display: flex; align-items: center; color: #fff; }
.hero__background { position: absolute; inset: 0; z-index: 0; }
.hero__background img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero__background::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(7,19,40,.92) 0%, rgba(7,19,40,.76) 38%, rgba(7,19,40,.4) 62%, rgba(7,19,40,.1) 100%);
}
.hero__inner { position: relative; z-index: 2; }
.hero__content { max-width: 660px; }

/* Tagline / etiquetas hero */
.hero__tagline {
  display: inline-block; font-size: .85rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  background: rgba(212,175,55,.15); border: 1px solid rgba(212,175,55,.35);
  color: #f0d980; padding: .32rem .7rem; border-radius: 5px; margin-bottom: .7rem;
}

/* hero__location mejorado (briefing: más destacado, contraste, acento dorado discreto) */
.hero__location {
  display: inline-block; font-size: .82rem; font-weight: 600;
  letter-spacing: .03em;
  background: rgba(212,175,55,.12);
  border: 1px solid rgba(212,175,55,.3);
  color: rgba(255,255,255,.95);
  padding: .28rem .65rem; border-radius: 5px;
  margin-bottom: .75rem; margin-left: .4rem;
  backdrop-filter: blur(4px);
}

.hero h1 { font-size: clamp(2rem,4vw,3.1rem); font-weight: 800; line-height: 1.1; margin-bottom: 1rem; text-shadow: 0 3px 18px rgba(0,0,0,.3); }
.hero p { font-size: 1.08rem; max-width: 580px; margin-bottom: 1.75rem; color: rgba(255,255,255,.9); }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero__brandmark { position: absolute; right: clamp(1rem,4vw,3rem); top: 57%; transform: translateY(-50%); z-index: 2; }
.hero__brandmark img { width: min(280px,20vw); min-width: 165px; height: auto; }

/* ── Trust ── */
.trust { background: var(--c-bg-light); padding: 2.25rem 0; }
.trust__inner { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1.5rem; }
.trust__item { text-align: center; padding: .75rem; }
.trust__item h3 { color: var(--c-primary); margin-bottom: .25rem; }
.trust__item p { font-size: .9rem; color: var(--c-muted); }
.trust__item--experience { display: flex; align-items: center; justify-content: center; gap: 1rem; text-align: left; }
.trust__seal { position: relative; width: 110px; height: 110px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; background: radial-gradient(circle at 50% 50%, #fff9e5 0%, #f6e6b8 50%, #d4af37 90%, #b58a22 100%); border: 4px solid #d4af37; box-shadow: 0 4px 8px rgba(0,0,0,.25); flex-shrink: 0; }
.trust__seal::before { content:""; position:absolute; top:-8px; left:-8px; right:-8px; bottom:-8px; border-radius:50%; background:radial-gradient(circle at 50% 50%, rgba(253,243,212,.9) 0%, rgba(230,195,121,.7) 60%, rgba(212,175,55,.5) 100%); z-index:-1; box-shadow: 0 6px 12px rgba(0,0,0,.3); }
.trust__seal::after { content:"★"; position:absolute; top:-20px; left:50%; transform:translateX(-50%); font-size:1.6rem; color:#d4af37; text-shadow: 0 0 6px rgba(255,255,255,.7); }
.trust__seal-number { font-size: 2.2rem; line-height: 1; color: var(--c-bg-dark); }
.trust__seal-text { font-size: .9rem; color: var(--c-bg-dark); }
.trust__text h3 { margin-bottom: .2rem; color: var(--c-primary); }
.trust__text p { font-size: .9rem; color: var(--c-muted); }

/* ── Why ── */
.why { padding: 4rem 0; background: #fff; }
.why h2 { text-align: center; color: var(--c-primary); font-size: clamp(1.55rem,3vw,2.1rem); margin-bottom: .75rem; }
.why__inner > p, .why p { text-align: center; color: var(--c-muted); max-width: 740px; margin: 0 auto 2rem; }
.why__cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 1.1rem; }
.why__card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg,#fff,#fafbfd);
  border: 1px solid rgba(16,36,63,.09); border-radius: 16px;
  padding: 1.15rem 1.1rem 1.05rem;
  box-shadow: var(--sh-sm);
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
  text-align: center;
}
.why__card::before { content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:linear-gradient(90deg,#10243f,#1d4978 62%,#d6a43a); border-radius:16px 16px 0 0; }
.why__card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: rgba(16,36,63,.15); }
.why__card h3 { color: #10243f; margin-bottom: .45rem; font-size: 1rem; text-align: center; }
.why__card p { font-size: .9rem; color: var(--c-muted); margin: 0; text-align: center; }

/* ── Services (fondo gris claro) ── */
.services { background: linear-gradient(180deg,#f3f6f9,#eef2f6); padding: 4rem 0; }
.services > .container { background: rgba(255,255,255,.76); border: 1px solid rgba(16,36,63,.08); border-radius: 24px; box-shadow: 0 18px 44px rgba(15,23,42,.06); padding: 2rem 1.5rem; }
.services h2 { text-align: center; color: var(--c-primary); font-size: clamp(1.55rem,3vw,2.1rem); margin-bottom: .5rem; }
.services__intro { text-align: center; max-width: 700px; margin: 0 auto 2rem; color: #5b6472; }
.services__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; }
.service {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg,#fff,#f8fafc);
  border: 1px solid rgba(16,36,63,.12); border-radius: 18px;
  padding: 1.65rem 1.35rem 1.35rem; text-align: left;
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.service::before { content:""; position:absolute; top:0; left:0; width:100%; height:6px; background:linear-gradient(90deg,#10243f,#1e4877 58%,#d6a43a); }
.service:hover, .service:focus-within { transform: translateY(-7px); box-shadow: 0 20px 40px rgba(15,23,42,.13); border-color: rgba(16,36,63,.2); }
.service:hover::before { background: linear-gradient(90deg,#0f3157,#1d4c80 62%,#e2b658); }
.service h3 { color: #10243f; margin-bottom: .65rem; font-size: 1.1rem; }
.service p { font-size: .94rem; color: var(--c-muted); margin-bottom: 1rem; line-height: 1.55; }
.service__link { display: inline-flex; align-items: center; gap: .38rem; font-weight: 700; color: #12325a; font-size: .9rem; }
.service__link::after { content:"→"; transition: transform var(--tr); }
.service:hover .service__link::after { transform: translateX(4px); }

/* ── Sectors ── */
.sectors { background: linear-gradient(180deg,#eef3f8,#f7f9fb); padding: 4rem 0; }
.sectors > .container { background: rgba(255,255,255,.74); border: 1px solid rgba(16,36,63,.08); border-radius: 24px; box-shadow: 0 18px 44px rgba(15,23,42,.06); padding: 2rem 1.5rem; }
.sectors h2 { text-align: center; color: var(--c-primary); font-size: clamp(1.55rem,3vw,2.1rem); margin-bottom: 1.5rem; }
.sectors__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.35rem; }
.sector {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg,#fff,#f9fbfd);
  border: 1px solid rgba(16,36,63,.10); border-radius: 18px;
  padding: 1.45rem 1.25rem 1.25rem; text-align: left;
  box-shadow: 0 10px 26px rgba(15,23,42,.07);
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.sector::before { content:""; position:absolute; top:0; left:0; width:100%; height:5px; background:linear-gradient(90deg,#10243f,#173965 65%,#d6a43a); }
.sector:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: rgba(16,36,63,.16); }
.sector h3 { color: var(--c-primary); margin-bottom: .5rem; font-size: 1.05rem; }
.sector p { font-size: .9rem; color: var(--c-muted); }

/* Nota residencial */
.residential-note { margin-top: 1.6rem; padding: 1.35rem 1.45rem; border-radius: 18px; background: linear-gradient(135deg,#fff,#f4f7fb); border: 1px solid rgba(16,36,63,.12); box-shadow: 0 12px 28px rgba(15,23,42,.07); display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
.residential-note__content { text-align: left; }
.residential-note__eyebrow { display: block; color: var(--c-accent); font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .35rem; }
.residential-note h3 { color: var(--c-primary); font-size: 1.2rem; margin-bottom: .35rem; }
.residential-note p { color: var(--c-muted); margin: 0; max-width: 720px; }
.residential-note__btn { flex: 0 0 auto; border-radius: 12px; box-shadow: 0 10px 22px rgba(7,41,75,.14); }

/* ── Process ── */
.process { background: linear-gradient(180deg,#f3f6f9,#eef2f6); padding: 4rem 0; }
.process > .container { background: rgba(255,255,255,.74); border: 1px solid rgba(16,36,63,.08); border-radius: 24px; box-shadow: 0 18px 44px rgba(15,23,42,.06); padding: 2rem 1.5rem; }
.process h2 { text-align: center; color: var(--c-primary); font-size: clamp(1.55rem,3vw,2.1rem); margin-bottom: 2rem; }
.process__timeline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.35rem; }
.process__step {
  flex: 1; min-width: 220px;
  position: relative; overflow: hidden;
  background: linear-gradient(180deg,#fff,#f9fbfd);
  border: 1px solid rgba(16,36,63,.10); border-radius: 18px;
  padding: 1.5rem 1.2rem 1.25rem; text-align: left;
  box-shadow: 0 10px 26px rgba(15,23,42,.07);
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.process__step::before { content:""; position:absolute; top:0; left:0; width:100%; height:5px; background:linear-gradient(90deg,#10243f,#1b446f 60%,#d6a43a); }
.process__step:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: rgba(16,36,63,.16); }
.process__circle { width: 56px; height: 56px; background: linear-gradient(135deg,#10243f,#1d4c80 72%,#d6a43a); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; margin: 0 0 .9rem; box-shadow: 0 10px 20px rgba(16,36,63,.18); }
.process__step h3 { color: #10243f; margin-bottom: .5rem; font-size: 1.05rem; }
.process__step p { font-size: .9rem; color: var(--c-muted); }

/* ── Platform ── */
.platform { background: linear-gradient(180deg,#f7f9fc,#eef3f8); padding: 3.5rem 0; }
.platform__inner { text-align: center; }
.platform__eyebrow { display: inline-block; margin-bottom: .75rem; padding: .35rem .75rem; border-radius: 999px; background: rgba(14,65,115,.08); color: var(--c-secondary); font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.platform h2 { color: var(--c-primary); font-size: clamp(1.55rem,3vw,2.1rem); margin-bottom: .75rem; }
.platform__intro { max-width: 830px; margin: 0 auto 1.5rem; color: var(--c-muted); }
.platform__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-top: 1.5rem; }
.platform__card { background: #fff; border: 1px solid #dbe4ef; border-radius: 10px; padding: 1.25rem; text-align: left; box-shadow: var(--sh-sm); transition: transform var(--tr), box-shadow var(--tr); }
.platform__card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.platform__card h3 { color: var(--c-primary); margin-bottom: .45rem; font-size: 1rem; }
.platform__card p { margin: 0; font-size: .95rem; color: var(--c-muted); }
.platform__list { list-style: none; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem 1rem; margin: 1.5rem auto 0; max-width: 980px; text-align: left; }
.platform__list li { position: relative; background: rgba(255,255,255,.72); border-radius: 8px; padding: .9rem 1rem .9rem 2.2rem; color: #445063; border: 1px solid rgba(14,65,115,.10); font-size: .94rem; }
.platform__list li::before { content:"✓"; position:absolute; left:.9rem; top:.9rem; color:var(--c-accent); font-weight:800; }

/* ── CTA ── */
.cta { background: var(--c-primary); color: #fff; padding: 4rem 0; }
.cta__inner { display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start; justify-content: space-between; }
.cta__content { flex: 1; min-width: 280px; }
.cta__content h2 { margin-bottom: .6rem; font-size: clamp(1.6rem,3vw,2rem); color: #fff; }
.cta__content p { margin-bottom: 1.5rem; color: rgba(255,255,255,.8); }
.cta__buttons { display: flex; gap: 1rem; flex-wrap: wrap; }
.cta__buttons .btn--primary { background: var(--c-accent); color: var(--c-primary); border-color: var(--c-accent); box-shadow: 0 10px 22px rgba(214,164,58,.18); }
.cta__buttons .btn--primary:hover { background: #f2d478; color: var(--c-primary); border-color: #f2d478; transform: translateY(-2px); }
.cta__buttons .btn--secondary { border-color: #fff; color: #fff; background: transparent; }
.cta__buttons .btn--secondary:hover { background: #fff; color: var(--c-primary); transform: translateY(-2px); }
.cta__form { flex: 1; min-width: 280px; background: #fff; border-radius: var(--r-md); padding: 1.6rem 1.5rem; box-shadow: 0 20px 50px rgba(0,0,0,.18); }
.cta__form label { display: block; margin-bottom: 1rem; }
.cta__form span { display: block; margin-bottom: .25rem; color: var(--c-primary); font-weight: 600; font-size: .9rem; }
.cta__form input { width: 100%; padding: .65rem .9rem; border: 1.5px solid #d1d5db; border-radius: var(--r-sm); font-size: .95rem; transition: border-color var(--tr); }
.cta__form input:focus { outline: none; border-color: var(--c-secondary); }
.cta__form button { margin-top: .25rem; width: 100%; font-size: 1rem; padding: .9rem; }
.cta__form-note { margin-top: .75rem; font-size: .82rem; color: var(--c-muted); text-align: center; }

/* ── Brand closing ── */
.brand-closing { background: linear-gradient(135deg,#061c31,#0a2c4a 64%,#10243f); color: #fff; padding: 2rem 0 1.8rem; text-align: center; }
.brand-closing__inner { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.brand-closing__logo { height: 128px; width: auto; max-width: min(560px,90vw); object-fit: contain; }
.brand-closing p { color: rgba(255,255,255,.82); font-size: 1rem; }

/* ── Footer ── */
.footer { background: var(--c-bg-dark); color: #fff; }
.footer--slim { padding: 1.35rem 0 0; }
.footer__inner { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: space-between; padding-bottom: 1rem; }
.footer__col h4 { margin-bottom: .5rem; color: var(--c-accent); font-size: .95rem; }
.footer__col a { color: rgba(255,255,255,.85); display: block; margin-bottom: .3rem; font-size: .9rem; }
.footer__col a:hover { color: #fff; text-decoration: underline; }
.footer__bottom { background: #041e34; text-align: center; padding: .9rem 0; font-size: .83rem; color: #9ca3af; margin-top: 1rem; }

/* ── Subpáginas de servicios ── */
.service-hero { position: relative; overflow: hidden; background: #0b1629; color: #fff; }
.service-hero__image { position: absolute; inset: 0; z-index: 0; }
.service-hero__image img { width: 100%; height: 100%; object-fit: cover; object-position: center 34%; }
.service-hero::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(8,18,33,.92) 0%, rgba(8,18,33,.76) 28%, rgba(8,18,33,.42) 46%, rgba(8,18,33,.12) 64%, rgba(8,18,33,0) 78%);
  z-index: 1;
}
.service-hero__content { position: relative; z-index: 2; max-width: 760px; padding: 3.5rem 0 3rem; }
.service-hero__kicker { display: inline-block; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #d6a43a; margin-bottom: .8rem; }
.service-hero h1 { font-size: clamp(2rem,4vw,3.2rem); line-height: 1.07; margin-bottom: 1rem; color: #fff; text-shadow: 0 3px 16px rgba(0,0,0,.42); }
.service-hero p { font-size: 1.06rem; max-width: 700px; color: rgba(255,255,255,.92); margin-bottom: 1.5rem; text-shadow: 0 2px 10px rgba(0,0,0,.28); }
.service-actions { display: flex; gap: .9rem; flex-wrap: wrap; }

.service-hero__brandmark { position: absolute; right: clamp(1.25rem,4vw,3rem); top: 57%; transform: translateY(-50%); z-index: 2; }
.service-hero__brandmark img { width: min(255px,18vw); min-width: 148px; height: auto; }

.service-section { padding: 3rem 0; }
.service-section--light { background: #f5f7fa; }
.service-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 1rem; margin-top: 1.5rem; }
.service-card { background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 14px; padding: 1.2rem; box-shadow: 0 8px 24px rgba(15,23,42,.06); transition: transform var(--tr), box-shadow var(--tr); }
.service-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.service-card h3 { color: #10243f; margin-bottom: .45rem; font-size: 1.05rem; }
.service-card p { margin: 0; color: var(--c-muted); }
.service-list { display: grid; gap: .7rem; padding-left: 1.1rem; }
.process-list { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 1rem; margin-top: 1.5rem; }
.process-mini { background: #fff; border-radius: 14px; padding: 1.1rem; border-left: 4px solid #d6a43a; box-shadow: 0 8px 24px rgba(15,23,42,.06); }
.service-section h2, .service-section h2 { color: var(--c-primary); margin-bottom: .5rem; font-size: 1.6rem; }

.service-cta { background: linear-gradient(135deg,#081221,#10243f); color: #fff; padding: 3.5rem 0; }
.service-cta__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items: center; }
.service-cta h2 { color: #fff; margin-bottom: .5rem; font-size: 1.9rem; }
.service-cta p { color: rgba(255,255,255,.85); margin-bottom: 1.5rem; }
.service-cta__buttons { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.service-cta__buttons .btn--primary { background: var(--c-accent); color: var(--c-primary); border-color: var(--c-accent); }
.service-cta__buttons .btn--primary:hover { background: #f2d478; }
.service-cta__buttons .btn--secondary { background: transparent; border-color: #fff; color: #fff; }
.service-cta__buttons .btn--secondary:hover { background: #fff; color: var(--c-primary); }
.service-form { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 1.2rem; }
.service-form input { width: 100%; padding: .9rem 1rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); margin-bottom: .8rem; background: rgba(255,255,255,.95); font-size: .95rem; }
.service-form button { width: 100%; }
.service-cta__note { font-size: .85rem; color: rgba(255,255,255,.7); margin-top: .5rem; }
.back-link { display: inline-block; margin: 1.5rem 0; color: #10243f; font-weight: 700; }
.back-link:hover { text-decoration: underline; }

/* Body-specific image positions */
body.service--programas-integrales .service-hero__image img  { object-position: center 32%; }
body.service--insectos-rastreros   .service-hero__image img  { object-position: center 39%; }
body.service--control-de-roedores  .service-hero__image img  { object-position: center 34%; }
body.service--plagas-voladoras      .service-hero__image img  { object-position: center 32%; }
body.service--termitas-madera       .service-hero__image img  { object-position: center 37%; }
body.service--areas-verdes-exteriores .service-hero__image img { object-position: center 36%; }

/* ── Responsive ── */
@media (max-width: 980px) {
  .services__grid, .sectors__grid, .platform__grid, .platform__list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero__brandmark img { width: 180px; min-width: 0; }
  .service-hero__brandmark img { width: 165px; min-width: 0; }
}

@media (max-width: 768px) {
  .header__nav, .header__cta { display: none; }
  .hamburger { display: flex; }
  .topbar__inner { justify-content: center; }
  .hero { height: auto; min-height: 480px; padding: 3rem 0; }
  .hero__brandmark, .service-hero__brandmark { display: none !important; }
  .process__timeline { flex-direction: column; }
  .cta__inner { flex-direction: column; }
  .cta__buttons { flex-direction: column; }
  .residential-note { flex-direction: column; align-items: stretch; text-align: center; }
  .residential-note__content { text-align: center; }
  .residential-note__btn { width: 100%; }
  .brand-closing__logo { height: 96px; }
  .service-cta__grid { grid-template-columns: 1fr; }
  .service-hero::after { background: linear-gradient(180deg,rgba(8,18,33,.82),rgba(8,18,33,.6) 30%,rgba(8,18,33,.76) 60%,rgba(8,18,33,.92)); }
  body.service--programas-integrales .service-hero__image img  { object-position: center 34%; }
  body.service--insectos-rastreros   .service-hero__image img  { object-position: center 43%; }
  body.service--control-de-roedores  .service-hero__image img  { object-position: center 37%; }
  body.service--plagas-voladoras      .service-hero__image img  { object-position: center 35%; }
  body.service--termitas-madera       .service-hero__image img  { object-position: center 41%; }
  body.service--areas-verdes-exteriores .service-hero__image img { object-position: center 40%; }
}

@media (max-width: 560px) {
  .services__grid, .sectors__grid, .platform__grid, .platform__list, .why__cards { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.75rem; }
  .brand-closing__logo { height: 86px; }
  .services > .container, .sectors > .container, .process > .container { padding: 1.35rem 1rem; border-radius: 18px; }
}


/* ===== Fix post-Claude: conservar portada y layout aprobados ===== */

/* Topbar: teléfono y correo a la derecha como en la versión aprobada */
.topbar__inner {
  justify-content: flex-end !important;
  gap: 0.9rem !important;
  flex-wrap: wrap !important;
}

.topbar__left {
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  margin-left: auto !important;
}

/* Textos generales con más intensidad */
body {
  color: #162033 !important;
}

p,
li,
.service p,
.sector p,
.why__card p,
.process__step p,
.platform__card p,
.platform__list li,
.cta__content p,
.footer p {
  color: #293548 !important;
}

.hero p,
.hero__content p {
  color: rgba(255, 255, 255, 0.94) !important;
}

/* Hero: reducir tinte azul/difuminado agregado y conservar foto más natural */
.hero__background img {
  filter: brightness(0.55) contrast(1.02) saturate(1.02) !important;
}

.hero::before,
.hero::after {
  opacity: 0.72 !important;
}

/* Si se agregaron overlays azules intensos, bajar su presencia */
.hero__overlay,
.hero-overlay,
.hero .overlay,
.hero__gradient {
  opacity: 0.42 !important;
}

/* Logo overlay de portada: volver a esquina superior derecha aprobada */
.hero__brandmark {
  right: clamp(1.25rem, 3vw, 2.5rem) !important;
  top: clamp(1.25rem, 4vw, 2.25rem) !important;
  bottom: auto !important;
  transform: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.hero__brandmark img {
  width: min(280px, 20vw) !important;
  height: auto !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Por qué elegir: volver a 3 y 3 en escritorio */
.why__cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.1rem !important;
}

.why__card,
.why__card h3,
.why__card p {
  text-align: center !important;
}

/* Mantener servicios y sectores en 3 y 3 */
.services__grid,
.sectors__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Etiqueta de ubicación más destacada pero sobria */
.hero__location {
  background: rgba(214, 164, 58, 0.20) !important;
  border: 1px solid rgba(214, 164, 58, 0.45) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(7, 19, 35, 0.18) !important;
}

@media (max-width: 980px) {
  .why__cards,
  .services__grid,
  .sectors__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hero__brandmark {
    top: 1rem !important;
    right: 1rem !important;
  }

  .hero__brandmark img {
    width: 150px !important;
  }
}

@media (max-width: 640px) {
  .why__cards,
  .services__grid,
  .sectors__grid {
    grid-template-columns: 1fr !important;
  }

  .hero__brandmark {
    display: none !important;
  }
}


/* ===== Update30: corrección de confianza/contacto después de Claude ===== */

/* Evitar que el bloque de 20 años se comprima y rompa cada palabra en líneas separadas */
.trust__item--experience {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.25rem !important;
  text-align: left !important;
  min-width: 340px !important;
}

.trust__item--experience .trust__text {
  flex: 1 1 230px !important;
  min-width: 230px !important;
  max-width: 360px !important;
}

.trust__item--experience .trust__text h3 {
  margin-bottom: 0.35rem !important;
  line-height: 1.25 !important;
}

.trust__item--experience .trust__text p {
  color: #4b5563 !important;
  line-height: 1.45 !important;
  max-width: 360px !important;
  margin: 0 !important;
}

.trust__seal {
  flex: 0 0 auto !important;
}

/* Textos dentro de bloques oscuros: mantener blanco/legible */
.cta,
.brand-closing,
.footer,
.footer--slim {
  color: #ffffff !important;
}

.cta p,
.cta__content p,
.brand-closing p,
.footer p,
.footer a,
.footer__bottom p {
  color: rgba(255, 255, 255, 0.86) !important;
}

.cta__content h2,
.footer h4 {
  color: #ffffff !important;
}

/* Botones dentro del CTA: conservar jerarquía */
.cta__buttons .btn--primary {
  color: var(--color-primary) !important;
}

.cta__buttons .btn--secondary {
  color: #ffffff !important;
}

.cta__buttons .btn--secondary:hover {
  color: var(--color-primary) !important;
}

/* Formulario del bloque de contacto: sí debe conservar texto oscuro */
.cta__form,
.cta__form p,
.cta__form label,
.cta__form span {
  color: var(--color-primary) !important;
}

.cta__form input,
.cta__form textarea,
.cta__form select {
  color: #162033 !important;
}

/* Responsivo del bloque de experiencia */
@media (max-width: 780px) {
  .trust__item--experience {
    min-width: 0 !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .trust__item--experience .trust__text {
    min-width: 0 !important;
  }
}

@media (max-width: 520px) {
  .trust__item--experience {
    flex-direction: column !important;
    text-align: center !important;
  }

  .trust__item--experience .trust__text {
    max-width: 100% !important;
  }

  .trust__item--experience .trust__text p {
    text-align: center !important;
    max-width: 100% !important;
  }
}


/* ===== Update31 Parte 1: portada más natural y servicios legibles ===== */

/* Portada principal: reducir al mínimo el sombreado/tinte azul para recuperar color natural */
.hero__background img {
  filter: brightness(0.68) contrast(1.04) saturate(1.06) !important;
}

.hero::before,
.hero::after {
  opacity: 0.28 !important;
}

.hero__overlay,
.hero-overlay,
.hero .overlay,
.hero__gradient,
.hero__blue-overlay,
.hero__tint {
  opacity: 0.18 !important;
  background: rgba(8, 18, 33, 0.16) !important;
}

/* Mantener legibilidad del texto de portada sin oscurecer de más la foto */
.hero__content,
.hero__inner {
  text-shadow: 0 2px 16px rgba(0,0,0,0.28);
}

/* Logo de portada y servicios: posición superior derecha aprobada */
.hero__brandmark,
.service-hero__brandmark {
  right: clamp(1.25rem, 3vw, 2.5rem) !important;
  top: clamp(1.25rem, 4vw, 2.25rem) !important;
  bottom: auto !important;
  transform: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.hero__brandmark img {
  width: min(280px, 20vw) !important;
  height: auto !important;
  filter: none !important;
  opacity: 1 !important;
}

.service-hero__brandmark img {
  width: min(255px, 18vw) !important;
  height: auto !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Subpáginas de servicios: mantener imagen amplia y más visible como en versión aprobada */
@media (min-width: 781px) {
  .service-hero {
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
    overflow: hidden !important;
    background: #0b1629 !important;
  }

  .service-hero__image {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
  }

  .service-hero__image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .service-hero::after {
    background: linear-gradient(90deg, rgba(8,18,33,.78) 0%, rgba(8,18,33,.58) 24%, rgba(8,18,33,.28) 42%, rgba(8,18,33,.08) 62%, rgba(8,18,33,0) 78%) !important;
  }

  .service-hero__content {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    max-width: min(760px, 58vw) !important;
    padding: 2.25rem 0 !important;
  }
}

/* Corregir textos que se perdían en CTAs de subpáginas de servicio */
.service-cta,
.service-cta__grid,
.service-cta__content {
  color: #ffffff !important;
}

.service-cta h2,
.service-cta__content h2,
.service-cta p,
.service-cta__content p,
.service-cta__note {
  color: rgba(255,255,255,0.92) !important;
}

.service-cta h2,
.service-cta__content h2 {
  color: #ffffff !important;
}

/* El formulario dentro del CTA sí debe conservar texto oscuro */
.service-form,
.service-form p,
.service-form label,
.service-form span,
.service-cta__form,
.service-cta__form p,
.service-cta__form label,
.service-cta__form span {
  color: var(--color-primary) !important;
}

.service-form input,
.service-form textarea,
.service-form select,
.service-cta__form input,
.service-cta__form textarea,
.service-cta__form select {
  color: #162033 !important;
}

/* Animaciones sutiles y profesionales, respetando accesibilidad */
@media (prefers-reduced-motion: no-preference) {
  .service,
  .sector,
  .why__card,
  .process__step,
  .platform__card,
  .service-card {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }

  .service:hover,
  .sector:hover,
  .why__card:hover,
  .process__step:hover,
  .platform__card:hover,
  .service-card:hover {
    transform: translateY(-4px);
  }

  .btn,
  .service__link {
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  }

  .btn:hover,
  .service__link:hover {
    transform: translateY(-1px);
  }
}

@media (max-width: 980px) {
  .hero__brandmark,
  .service-hero__brandmark {
    top: 1rem !important;
    right: 1rem !important;
  }

  .hero__brandmark img {
    width: 150px !important;
  }

  .service-hero__brandmark img {
    width: 138px !important;
  }
}

@media (max-width: 780px) {
  .hero__brandmark,
  .service-hero__brandmark {
    display: none !important;
  }
}


/* Mejorar visibilidad del texto descriptivo debajo del título en héroes de servicios */
.service-hero__content > p,
.service-hero p {
  color: #ffffff !important;
  font-weight: 500;
  text-shadow: 0 3px 16px rgba(0,0,0,0.58) !important;
}

.service-hero__content > p {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(8,18,33,0.38) 0%, rgba(8,18,33,0.18) 70%, rgba(8,18,33,0.06) 100%);
  max-width: 740px;
}

@media (max-width: 768px) {
  .service-hero__content > p {
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
  }
}


/* Animaciones sutiles para subpáginas de servicios especializados */
@keyframes serviceFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes serviceImageSoftZoom {
  from {
    transform: scale(1.025);
  }
  to {
    transform: scale(1);
  }
}

@keyframes serviceBrandSoftIn {
  from {
    opacity: 0;
    transform: translateY(-50%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

/* Hero de cada servicio: entrada elegante por capas */
body[class*="service--"] .service-hero__image img {
  animation: serviceImageSoftZoom 1.35s ease-out both;
  transform-origin: center center;
}

body[class*="service--"] .service-hero__kicker,
body[class*="service--"] .service-hero h1,
body[class*="service--"] .service-hero__content > p,
body[class*="service--"] .service-actions {
  opacity: 0;
  animation: serviceFadeUp 0.7s ease-out forwards;
}

body[class*="service--"] .service-hero__kicker {
  animation-delay: 0.08s;
}

body[class*="service--"] .service-hero h1 {
  animation-delay: 0.18s;
}

body[class*="service--"] .service-hero__content > p {
  animation-delay: 0.30s;
}

body[class*="service--"] .service-actions {
  animation-delay: 0.42s;
}

body[class*="service--"] .service-hero__brandmark {
  opacity: 0;
  animation: serviceBrandSoftIn 0.8s ease-out 0.5s forwards;
}

/* Microinteracciones en CTAs de servicios */
body[class*="service--"] .service-actions .btn,
body[class*="service--"] .service-cta__buttons .btn {
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}

body[class*="service--"] .service-actions .btn:hover,
body[class*="service--"] .service-cta__buttons .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(8, 18, 33, 0.22);
}

/* Tarjetas y bloques interiores: sensación de profundidad sin verse exagerado */
body[class*="service--"] .service-card,
body[class*="service--"] .process-mini,
body[class*="service--"] .service-list li {
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    border-color 0.24s ease;
}

body[class*="service--"] .service-card:hover,
body[class*="service--"] .process-mini:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.10);
}

body[class*="service--"] .service-list li:hover {
  transform: translateX(3px);
}

/* Entrada suave de secciones, si el navegador permite animaciones al cargar */
body[class*="service--"] .service-section,
body[class*="service--"] .service-cta {
  animation: serviceFadeUp 0.75s ease-out both;
}

body[class*="service--"] .service-section:nth-of-type(2) {
  animation-delay: 0.12s;
}

body[class*="service--"] .service-section:nth-of-type(3) {
  animation-delay: 0.18s;
}

body[class*="service--"] .service-cta {
  animation-delay: 0.22s;
}

/* Respeto a usuarios o dispositivos con animaciones reducidas */
@media (prefers-reduced-motion: reduce) {
  body[class*="service--"] .service-hero__image img,
  body[class*="service--"] .service-hero__kicker,
  body[class*="service--"] .service-hero h1,
  body[class*="service--"] .service-hero__content > p,
  body[class*="service--"] .service-actions,
  body[class*="service--"] .service-hero__brandmark,
  body[class*="service--"] .service-section,
  body[class*="service--"] .service-cta {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  body[class*="service--"] .service-actions .btn,
  body[class*="service--"] .service-cta__buttons .btn,
  body[class*="service--"] .service-card,
  body[class*="service--"] .process-mini,
  body[class*="service--"] .service-list li {
    transition: none !important;
  }
}