/* ============================================================
   PLAGAS STOP — VARIANTE B · "Relief"
   Capa de estilo que se carga DESPUES de styles.css y reescribe
   el lenguaje visual sin tocar el marcado ni el JS.

   Referencia: Relief — cream-paper harbor under flat sky-blue
   · Lienzo crema (#f9f7f0), nunca blanco puro
   · Un solo acento cromatico: sky blue #2e96ff
   · Bloques de azul marino profundo #13426f sobre la crema
   · Sombras planas con desplazamiento solido, jamas desenfoque
   · Botones y badges siempre en pildora (40-70px)
   · Tracking uniforme -0.018em en toda la escala tipografica
   ============================================================ */

:root{
  /* --- paleta Relief mapeada sobre los tokens existentes --- */
  --navy:#13426F;          /* Deep Harbor */
  --navy-2:#13426F;
  --blue:#2E96FF;          /* Sky Pop — unico acento cromatico */
  --blue-deep:#0254A5;     /* Deep Wave */
  --cyan:#73B9FF;          /* Info Mist */
  --red:#2E96FF;           /* el acento rojo desaparece: todo es sky blue */
  --red-dark:#0254A5;
  --gold:#F5A623;          /* estrellas de calificacion: se conservan */
  --bg:#F9F7F0;            /* Warm Cream — lienzo de la pagina */
  --bg-tint:#EFF6FD;       /* banda sky clara para alternar secciones */
  --bg-tint-2:#BDE1F9;     /* Sky Tint — washes y estados activos */
  --ink:#333333;
  --gray:#616C8A;          /* Slate */
  --gray-light:#8A93A8;
  --line:#D0D5DD;          /* Fog */
  --green-safe:#13426F;    /* sin verdes fuera de ilustracion */
  --green-safe-bg:#EFF6FD;
  --white:#FFFFFF;

  /* --- elevacion: solo offsets solidos, nunca blur --- */
  --shadow-sm: rgba(0,0,0,.05) 0 3px 0 0;
  --shadow-md: rgba(0,0,0,.05) 0 3px 0 0;
  --shadow-lg: rgba(19,66,111,.10) 0 5px 0 0;
  --pop: rgba(154,207,246,.5) 0 7px 0 0;
  --pop-sm: rgba(154,207,246,.5) 0 5px 0 0;

  /* --- formas suaves: nada por debajo de 18px --- */
  --radius-s: 18px;
  --radius-m: 22px;
  --radius-l: 30px;

  --font-display:"Nunito", "Montserrat", sans-serif;
  --font-body:"Nunito", "Montserrat", sans-serif;
  --font-mono:"Nunito", "Montserrat", sans-serif;
}

/* ---------- base ---------- */
body{
  background:var(--bg);
  color:var(--ink);
  letter-spacing:-.018em;
}
h1,h2,h3,h4,h5{ letter-spacing:-.018em; color:var(--navy); }
.container{ max-width:1200px; }
section{ padding:80px 0; }

/* las bandas de crema y cielo alternan: el cambio de color es el divisor */
.section-tint{ background:var(--bg-tint); }
.section-navy{ background:var(--navy); }

/* ---------- tipografia de apoyo: fuera las versalitas mono ---------- */
.mono-tag, .eyebrow, .commit-num, .recap-list .k,
.trust-track span, .sector-strip .label, .lic-seal .lic-text span{
  font-family:var(--font-display);
  letter-spacing:-.018em;
  text-transform:none;
}
.eyebrow{ color:var(--blue); font-weight:700; }
.eyebrow::before{ background:var(--blue); }

/* pildoras de confianza */
.mono-tag{
  background:var(--bg-tint-2);
  color:var(--navy);
  border:none;
  border-radius:100px;
  padding:8px 20px;
  font-weight:700;
  font-size:13px;
}
.mono-tag.on-navy{
  background:rgba(255,255,255,.92);
  color:var(--navy);
  border:none;
}

/* ---------- botones: pildora + pop shadow ---------- */
.btn{
  border-radius:40px;
  font-weight:700;
  letter-spacing:-.018em;
  padding:14px 28px;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.btn:hover{ transform:translateY(2px); }
.btn-primary{
  background:var(--blue);
  color:#fff;
  box-shadow:var(--pop);
}
.btn-primary:hover{ background:var(--blue); box-shadow:var(--pop-sm); }

/* CTA de auxilio: unica excepcion cromatica del sistema.
   Rojo Ferrari con la misma sombra plana de 7px, en su propio tono,
   para que el boton de urgencia rompa por encima del sky blue. */
.btn-help, .btn-primary.btn-help{
  background:#E10600;
  color:#fff;
  box-shadow:rgba(225,6,0,.32) 0 7px 0 0;
}
.btn-help:hover, .btn-primary.btn-help:hover{
  background:#B00500;
  box-shadow:rgba(225,6,0,.32) 0 5px 0 0;
}
.btn-ghost{
  background:transparent;
  border:2px solid #fff;
  color:#fff;
  box-shadow:none;
}
.btn-ghost:hover{ background:rgba(255,255,255,.14); }
.btn-outline{
  border:2px solid var(--blue-deep);
  color:var(--blue-deep);
  background:transparent;
  box-shadow:none;
}
.btn-outline:hover{ border-color:var(--blue); color:var(--blue); background:transparent; }
.btn:disabled, .btn:disabled:hover{ background:var(--line); color:#fff; box-shadow:none; }

/* ---------- header ----------
   el hero ya no es oscuro, asi que el header arranca en version clara:
   logo azul, enlaces navy y boton de icono con borde fog desde el inicio */
.site-header.scrolled{
  background:rgba(249,247,240,.94);
  border-bottom:1px solid var(--line);
  box-shadow:none;
}
.brand-logo--light{ display:none; }
.brand-logo--dark{ display:block; }
.brand-sub{ color:var(--blue); border-left-color:var(--line); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; }
.main-nav a{ color:var(--navy); font-weight:700; opacity:1; }
.main-nav a:hover{ color:var(--blue); }
.icon-btn{ border-radius:40px; border-color:var(--line); color:var(--navy); }
.icon-btn:hover{ border-color:var(--blue); color:var(--blue); background:var(--bg-tint-2); }
.nav-toggle{ border-radius:40px; color:var(--navy); border-color:var(--line); }
.mobile-drawer{ background:var(--navy); }

/* ---------- hero: banda de cielo plana y sin peso ---------- */
.hero{
  background:linear-gradient(180deg,#DCEDFB 0%, #CDE7FB 55%, #F9F7F0 100%);
}
/* la fotografia pasa a ser atmosfera, no protagonista */
.hero-collage{ opacity:.14; filter:saturate(.35); }
.hero-collage figcaption{ display:none; }
.hero-scrim{
  background:linear-gradient(180deg, rgba(205,231,251,.55) 0%, rgba(249,247,240,.15) 60%, rgba(249,247,240,.85) 100%);
}
.hero-content{ color:var(--navy); }
.hero h1{ color:var(--navy); }
.hero h1 em{
  background:none;
  -webkit-text-fill-color:var(--blue);
  color:var(--blue);
}
.hero p.lead{ color:var(--ink); }
.hero-stats{ border-top:1px solid var(--line); }
.hero-stats div b{ color:var(--navy); }
.hero-stats div span{ color:var(--gray); }
.hero .btn-ghost{
  border-color:var(--navy);
  color:var(--navy);
}
.hero .btn-ghost:hover{ background:rgba(19,66,111,.07); }
.scroll-cue{ color:var(--navy); }
.scroll-cue .line{ background:linear-gradient(180deg, rgba(19,66,111,.6), transparent); }

/* ---------- quiz: tarjeta blanca elevada sobre el cielo ---------- */
.hero-quiz .quiz-panel{
  background:#fff;
  border:none;
  border-radius:var(--radius-l);
  box-shadow:rgba(19,66,111,.10) 0 7px 0 0;
  backdrop-filter:none;
}
.quiz-panel{ background:#fff; border-radius:var(--radius-l); }
.quiz-progress span{ border-radius:40px; background:var(--line); }
.quiz-progress span.done{ background:var(--blue); }
.quiz-step p.q{ color:var(--navy); font-weight:800; }
.q-num{
  background:var(--bg-tint-2);
  color:var(--navy);
  border-radius:40px;
  padding:3px 10px;
  font-weight:700;
}
.quiz-options label{ border-radius:40px; border-color:var(--line); }
.quiz-options label:has(input:checked){
  background:var(--bg-tint-2);
  border-color:var(--blue);
  color:var(--navy);
  font-weight:700;
}
.quiz-options label:has(input[type="checkbox"]:checked){
  background:var(--bg-tint-2);
  border-color:var(--blue);
}
.quiz-number input{ border-radius:40px; border-color:var(--line); background:#fff; }
.quiz-result{ border:2px dashed var(--blue); border-radius:var(--radius-s); background:var(--bg-tint); }
.recap-list{ border-radius:var(--radius-s); border-color:var(--line); }
.recap-link{ border-radius:40px; }
.recap-empty{ border-radius:var(--radius-s); }

/* ---------- franjas y marquesinas ---------- */
.trust-strip{ background:var(--navy); }
.trust-track span{ font-weight:700; letter-spacing:-.018em; }
.trust-track span::before{ color:var(--cyan); }

/* ---------- tarjetas: bloques navy sobre la crema ---------- */
.service-card,
.pest-card,
.commit-card,
.testi-card,
.protected-card,
.client-logo,
.location-wrap,
.form-wrap,
.team-visual{
  border-radius:var(--radius-l);
}
.service-card{
  background:var(--navy);
  border:none;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.service-card:hover{ transform:translateY(-4px); box-shadow:rgba(0,0,0,.05) 0 6px 0 0; }
.service-body h3{ color:#fff; }
.service-body p{ color:rgba(255,255,255,.78); }
.service-link{ color:var(--cyan); font-weight:700; }
.service-icon{ background:var(--blue); color:#fff; border-radius:40px; box-shadow:none; }

.pest-card{ border:none; box-shadow:var(--shadow-sm); }
.pest-card:hover{ transform:translateY(-4px); box-shadow:rgba(0,0,0,.05) 0 6px 0 0; }

.commit-card{
  background:var(--navy);
  border:none;
  padding:28px;
}
.commit-card h4{ color:#fff; }
.commit-card p{ color:rgba(255,255,255,.78); }
.commit-card svg{ color:var(--cyan); }
.commit-num{ color:rgba(255,255,255,.55); font-weight:700; }
.commit-grid{ gap:20px; }

.testi-card, .testi-featured{
  background:var(--navy);
  border:none;
  border-radius:var(--radius-l);
  box-shadow:none;
  padding:28px;
}
.testi-card p.quote, .testi-featured blockquote p{ color:rgba(255,255,255,.88); }
.testi-person b, .testi-featured .testi-person b{ color:#fff; }
.testi-person span{ color:rgba(255,255,255,.62); }
.testi-avatar{ background:var(--blue); color:#fff; }
.testi-avatar--azul{ background:var(--blue); }
.testi-avatar--verde{ background:var(--cyan); color:var(--navy); }
.testi-featured::before{ color:rgba(255,255,255,.14); }
.testi-featured .testi-person{ border-top-color:rgba(255,255,255,.18); }

.protected-card{ background:#fff; border:none; box-shadow:var(--shadow-sm); padding:28px; }
.protected-card .badge{ background:var(--bg-tint-2); color:var(--navy); border-radius:100px; border:none; }
.species-tile{ background:var(--bg-tint); border:none; border-radius:var(--radius-s); }
.species-tile svg{ color:var(--blue); }
.species-tile b{ color:var(--navy); }

.seal{ background:var(--bg-tint-2); border:none; border-radius:40px; }
.seal svg{ color:var(--navy); }
.value-item svg{ color:var(--blue); }
.team-visual{ background:var(--navy); }
.team-quote{ border-radius:var(--radius-s); }
.client-logo{ background:#fff; border:1px solid var(--line); box-shadow:none; }
.client-logo:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); }

.mip-num{ border-radius:40px; border-color:rgba(255,255,255,.3); }
.mip-step.is-active .mip-num{ background:var(--blue); border-color:var(--blue); }

.sector-pills span{ background:var(--bg-tint-2); color:var(--navy); border:none; border-radius:100px; font-weight:700; }
.sector-pills svg{ color:var(--navy); }

/* ---------- base de operaciones (dentro de "Nuestro equipo") ----------
   Sin mapa y sin boton: encabezado y datos viven en una sola ficha navy.
   El titulo ocupa la primera columna y los cinco datos se reparten en
   dos columnas a su derecha, asi la seccion entra completa de un vistazo. */
.location-block{ margin-top:56px; }
.location-wrap{ grid-template-columns:1fr; }
.location-info{
  display:grid;
  grid-template-columns:minmax(210px,.85fr) repeat(2, minmax(0,1fr));
  gap:20px 36px;
  padding:32px 36px;
  align-items:start;
}
.loc-head{ grid-row:span 3; align-self:center; }
.loc-head .eyebrow{ color:var(--cyan); }
.loc-head .eyebrow::before{ background:var(--cyan); }
.loc-head h3{ color:#fff; font-size:23px; margin-top:8px; line-height:1.2; }

/* ---------- contacto y formulario ---------- */
.location-wrap, .form-wrap{ border:none; box-shadow:var(--shadow-lg); overflow:hidden; }
.location-info{ background:var(--navy); }
.loc-row svg{ color:var(--cyan); }
.form-panel{ background:#fff; }
.field input, .field select, .field textarea{
  border-radius:var(--radius-s);
  border-color:var(--line);
  background:#fff;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--blue);
  box-shadow:none;
}
.field label{ color:var(--navy); }
.form-disclaimer{ border-radius:var(--radius-s); background:var(--bg-tint); border:none; }
.form-disclaimer svg{ color:var(--blue); }
.form-status{ border-radius:var(--radius-s); }

/* ---------- footer ---------- */
.site-footer{ background:var(--navy); }

/* ---------- limpieza: fuera todo desenfoque ---------- */
.site-header, .hero-quiz .quiz-panel, .mono-tag{
  backdrop-filter:none;
}

/* ---------- responsive de la ficha de operaciones ---------- */
@media (max-width:1000px){
  .location-info{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .loc-head{ grid-row:auto; grid-column:1 / -1; align-self:start; }
}
@media (max-width:700px){
  .location-info{ grid-template-columns:1fr; padding:28px; gap:18px; }
  .location-block{ margin-top:44px; }
}

/* ---------- alternancia de bandas tras reordenar secciones ----------
   Orden: hero, franja navy, testimonios (crema), servicios (cielo),
   quienes somos (crema), plagas (cielo), compromisos (navy)...
   En Relief el cambio de color es el divisor, asi que ninguna banda
   del mismo tono puede quedar pegada a otra. */
#plagas{ background:var(--bg-tint); }

/* ---------- combo de colonias por código postal ---------- */
.field-hint{
  margin-top:7px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--gray);
}
.field select[disabled]{ color:var(--gray-light); background:var(--bg-tint); cursor:not-allowed; }
.field select[hidden], .field input[hidden]{ display:none; }
.field select + input[type="text"]{ margin-top:10px; }

/* ---------- encuadre de las fotos de servicios ----------
   Son retratos verticales y la tarjeta recorta una franja baja, que dejaba
   al técnico sin cabeza. Subimos el punto de interés para que se vea la
   persona completa de cintura para arriba. */
.service-media{ height:220px; }
/* solo las dos fotos verticales nuevas: la de termitas ya encuadraba bien */
.service-media img[src$="residencial.webp"],
.service-media img[src$="comercial.webp"]{ object-position:center 22%; }

/* ============================================================
   DENSIDAD: menos scroll sin quitar información
   La página medía 14.6 pantallas. Aquí se recorta el aire muerto
   (padding vertical, huecos, altos fijos) y se aprovecha el ancho,
   que en escritorio sobraba. Ningún dato desaparece.
   ============================================================ */

section{ padding:56px 0; }
.section-head{ margin-bottom:26px; }
.section-head h2{ margin-top:6px; }
.section-head p{ margin-top:10px; }

/* catálogo de plagas: de 4 columnas a las que quepan.
   Con 16 tarjetas pasa de 4 filas a 3 en pantallas anchas. */
.pest-grid{ grid-template-columns:repeat(auto-fill, minmax(178px,1fr)); gap:14px; }
.pest-card{ aspect-ratio:4/3.4; }
.pest-overlay{ padding:14px; }
.pest-overlay p{ font-size:12.5px; line-height:1.45; margin-top:4px; }

/* servicios y compromisos: rejillas más apretadas */
.services-grid{ gap:20px; }
.service-media{ height:190px; }
.service-body{ padding:30px 20px 22px; }
.commit-grid{ gap:16px; }
.commit-card{ padding:22px; }
.commit-card svg{ margin-top:10px; }
.commit-card h4{ margin-top:12px; }

/* equipo y especies protegidas: menos separación entre columnas */
.team-wrap{ gap:44px; }
.team-values{ gap:14px 22px; margin-top:22px; }
.protected-wrap{ gap:32px; }
.protected-card{ padding:24px; }

/* testimonios: el bloque más alto en proporción a lo que dice */
.testi-duo{ gap:20px; }
.testi-card, .testi-featured{ padding:24px; }
.testi-featured blockquote{ margin-top:14px; }

/* contacto */
.form-panel{ padding:34px; }
.quiz-panel{ padding:34px; }
.field{ margin-top:14px; }
.location-block{ margin-top:40px; }

@media (max-width:900px){
  section{ padding:44px 0; }
  .pest-grid{ grid-template-columns:repeat(auto-fill, minmax(148px,1fr)); }
}

/* el hero medía una pantalla completa más el padding: se ajusta a su contenido
   sin dejar de llenar la primera vista */
.hero{ min-height:auto; padding:128px 0 64px; }
.hero-stats{ margin-top:36px; padding-top:20px; }
.hero-actions{ margin-top:26px; }
.hero p.lead{ margin-top:16px; }
.hero-badges{ margin-bottom:16px; }

/* ---------- densidad en móvil ----------
   Es donde llega el tráfico de los anuncios y donde más caro sale cada
   scroll. Se aprieta lo que en una pantalla de 375px sobra: catálogo a tres
   columnas, fotos de servicio más bajas y menos aire entre bloques. */
@media (max-width:640px){
  section{ padding:38px 0; }
  .section-head{ margin-bottom:20px; }

  /* 16 plagas pasan de 8 filas a 6 */
  .pest-grid{ grid-template-columns:repeat(3,1fr); gap:10px; }
  .pest-card{ aspect-ratio:1/1.12; }
  .pest-overlay{ padding:10px; }
  .pest-overlay b{ font-size:12.5px; line-height:1.2; }
  .pest-overlay p{ display:none; }          /* el detalle vive en la tarjeta grande */

  .service-media{ height:150px; }
  .service-body{ padding:26px 18px 20px; }
  .services-grid{ gap:14px; }

  .quiz-panel, .form-panel{ padding:24px; }
  .hero{ padding:104px 0 44px; }
  .hero-stats{ margin-top:26px; padding-top:16px; gap:14px 10px; }
  .team-wrap{ gap:28px; }
  .protected-wrap{ gap:22px; }
  .location-block{ margin-top:30px; }
  .testi-duo{ gap:14px; }
}

/* ---------- carrusel de testimonios ----------
   Las diapositivas se apilan en la misma celda de la rejilla en vez de
   desplazarse en una tira: así el bloque mide siempre lo mismo (lo que ocupa
   el testimonio más largo) y no da saltos al cambiar, que es lo que más
   molesta de un carrusel. */
.testi-carrusel{ position:relative; }
.testi-pista{ display:grid; }
.testi-slide{
  grid-area:1 / 1;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease, visibility .35s;
}
.testi-slide.activo{ opacity:1; visibility:visible; transform:none; }

.testi-nav{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin-top:22px;
}
.testi-flecha{
  width:42px; height:42px; flex:none;
  border-radius:40px;
  border:2px solid var(--line);
  background:transparent;
  color:var(--navy);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s, color .2s, background .2s;
}
.testi-flecha:hover{ border-color:var(--blue); color:var(--blue); background:var(--bg-tint); }
.testi-flecha svg{ width:20px; height:20px; }

.testi-puntos{ display:flex; gap:8px; }
.testi-puntos button{
  width:9px; height:9px; padding:0;
  border:none; border-radius:40px;
  background:var(--line);
  transition:background .25s, width .25s;
}
.testi-puntos button[aria-selected="true"]{ background:var(--blue); width:26px; }

@media (max-width:640px){
  .testi-nav{ gap:14px; margin-top:18px; }
  .testi-flecha{ width:38px; height:38px; }
}

/* El primer párrafo de cada testimonio hace de entradilla y styles.css lo pinta
   en azul marino. Sobre la tarjeta navy quedaba invisible: texto del mismo
   color que el fondo. Venía así desde antes del carrusel; ahí se perdía la
   frase de apertura de la SEV. */
.testi-featured blockquote p:first-child{ color:#fff; }