/* ============================================================
   CONTROL INTEGRAL DE PLAGAS
   Sistema de diseño: elegante y redondeado.
   Azul marino + cian corporativo (muestreado del logo).
   Ámbar cálido reservado para acciones (CTA).
   Tipografía: Outfit (títulos) + Manrope (texto).
   ============================================================ */

:root {
  /* Base oscura: azul marino profundo */
  --ink-900: #04182B;
  --ink-800: #08223A;
  --cyan: #40C0F0;
  --cyan-light: #90E0FF;
  --cyan-deep: #1E9ACD;
  --cyan-ink: #16759D;   /* cian legible sobre fondo claro (AA) */
  --cyan-soft: rgba(64, 192, 240, 0.12);

  /* Vidrio del encabezado: compartido con el submenu */
  --glass: rgba(14, 53, 86, 0.88);

  /* Acento cálido de acción */
  --amber: #FFB43D;
  --paper: #F6F9FC;
  --paper-line: #DCE6EF;
  --white: #FFFFFF;

  --text-dark: #0C1E2E;
  --text-muted: #5A7086;
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: #A9C4DA;

  --font-display: 'Outfit', 'Segoe UI', sans-serif;
  --font-body: 'Manrope', 'Segoe UI', sans-serif;

  /* Radios generosos y redondeados */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* Alto del encabezado: logo + relleno vertical + borde */
  --header-h: 135px;

  --max-width: 1240px;
  --space-2xs: 6px;
  --space-xs: 12px;
  --space-sm: 20px;
  --space-md: 36px;
  --space-lg: 72px;
  --space-xl: 116px;

  /* Sombras suaves y estratificadas */
  --shadow-sm: 0 1px 2px rgba(12, 30, 46, 0.04), 0 3px 10px rgba(12, 30, 46, 0.05);
  --shadow-md: 0 4px 14px rgba(12, 30, 46, 0.06), 0 14px 34px -10px rgba(12, 30, 46, 0.13);
  --shadow-lg: 0 10px 28px rgba(12, 30, 46, 0.08), 0 30px 64px -16px rgba(12, 30, 46, 0.22);
  --shadow-amber: 0 10px 30px -8px rgba(255, 180, 61, 0.5);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--text-dark);
  line-height: 1.65;
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-sm);
  position: relative;
}

/* ---------- Tipografía ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 5.6vw, 4.4rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.85rem); }
h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }

p { color: var(--text-muted); }
/* Aire entre parrafos consecutivos (bloques SEO y textos editoriales) */
p + p { margin-top: var(--space-sm); }

.lead {
  max-width: 56ch;
  margin-top: var(--space-sm);
  font-size: 1.1rem;
  line-height: 1.7;
}

/* Etiqueta de sección: versalita elegante con punto de acento */
.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan-ink);
  margin-bottom: var(--space-xs);
}

/* Separacion extra cuando la etiqueta sigue a una imagen */
.eyebrow--after-media {
  margin-top: var(--space-md);
}

/* Mas aire entre el titulo y el parrafo que lo sigue */
.eyebrow--after-media + h2 {
  margin-bottom: var(--space-sm);
}

/* Datos clave con iconos: enriquece los bloques SEO bajo las imagenes */
.fact-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}
.fact-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.96rem;
  line-height: 1.4;
  color: var(--text-dark);
  background: var(--white);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  box-shadow: var(--shadow-sm);
}
.fact-list svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--cyan-deep);
}

/* ---------- Secciones ---------- */

.section {
  padding: var(--space-xl) 0;
  position: relative;
}

/* Halo suave en secciones claras */
.section:not(.section-dark)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 80% 0%, rgba(64, 192, 240, 0.07), transparent 70%);
}

.section-dark {
  background: var(--ink-900);
  color: var(--text-on-dark);
}
.section-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 85% at 85% 8%, rgba(64, 192, 240, 0.22), transparent 62%),
    radial-gradient(ellipse 75% 70% at 0% 100%, rgba(31, 92, 147, 0.4), transparent 65%);
}
.section-dark .container { z-index: 1; }
.section-dark p { color: var(--text-on-dark-muted); }
.section-dark .eyebrow { color: var(--cyan-light); }
.section-dark h2 { color: var(--text-on-dark); }

/* Seccion "Por que elegirnos": foto de fondo con velo oscuro para
   mantener el contraste del texto sobre la imagen. */
.section-photo-cta {
  background:
    linear-gradient(rgba(4, 24, 43, 0.88), rgba(4, 24, 43, 0.88)),
    url('../img/fotos/tecnicos-de-control-de-plagas-en-cementerio-de-cali-fumigando.webp') 30% 70% / cover no-repeat;
}
.section-photo-cta--contacto {
  background:
    linear-gradient(rgba(4, 24, 43, 0.88), rgba(4, 24, 43, 0.88)),
    url('../img/fotos/tecnico-de-control-de-plagas-en-oficina-fumigando.webp') 30% 70% / cover no-repeat;
}
.section-photo-cta--artropodos {
  background:
    linear-gradient(rgba(4, 24, 43, 0.88), rgba(4, 24, 43, 0.88)),
    url('../img/fotos/2-tecnicos-de-control-de-plagas-en-oficinas-cali.webp') center / cover no-repeat;
}
.section-photo-cta--moscas {
  background:
    linear-gradient(rgba(4, 24, 43, 0.88), rgba(4, 24, 43, 0.88)),
    url('../img/fotos/tecnico-control-de-plagas-aplicando-tratamiento-para-el-control-de-moscas-cali.webp') center 20% / cover no-repeat;
}
.section-photo-cta--insectos {
  background:
    linear-gradient(rgba(4, 24, 43, 0.88), rgba(4, 24, 43, 0.88)),
    url('../img/fotos/tecnico-control-de-plagas-matando-hormigas.webp') center 20% / cover no-repeat;
}
.section-photo-cta--roedores {
  background:
    linear-gradient(rgba(4, 24, 43, 0.88), rgba(4, 24, 43, 0.88)),
    url('../img/fotos/2-tecnicos-de-control-de-plagas-en-alcaltarilla-trabajando.webp') center / cover no-repeat;
}
.section-photo-cta--aves {
  background:
    linear-gradient(rgba(4, 24, 43, 0.88), rgba(4, 24, 43, 0.88)),
    url('../img/fotos/palomas-pexels.jpg') center / cover no-repeat;
}
.section-photo-cta--madera {
  background:
    linear-gradient(rgba(4, 24, 43, 0.7), rgba(4, 24, 43, 0.7)),
    url('../img/fotos/termita-pexels.jpg') center / cover no-repeat;
}
.section-photo-cta--especiales {
  background:
    linear-gradient(rgba(4, 24, 43, 0.88), rgba(4, 24, 43, 0.88)),
    url('../img/fotos/operario-de-control-de-plagas-con-mascara-check-ok.webp') center / cover no-repeat;
}
.section-photo-cta--desinfeccion {
  background:
    linear-gradient(rgba(4, 24, 43, 0.88), rgba(4, 24, 43, 0.88)),
    url('../img/fotos/operario-de-control-de-plagas-con-mascara-check-ok.webp') center / cover no-repeat;
}
.section-photo-cta--lavado {
  background:
    linear-gradient(rgba(4, 24, 43, 0.88), rgba(4, 24, 43, 0.88)),
    url('../img/fotos/tecnico-control-de-plagas-lavando-tanque-de-agua.webp') center / cover no-repeat;
}
.section-photo-cta--contacto-hero {
  background:
    linear-gradient(rgba(4, 24, 43, 0.82), rgba(4, 24, 43, 0.82)),
    url('../img/fotos/call-center-pexels.jpg') center / cover no-repeat;
}

/* ---------- Salto de seccion en diagonal ---------- */

/* Cuna del color de ESTA seccion que se superpone a la anterior. Al
   pintarse despues (siguiente en el DOM), queda naturalmente encima
   sin necesitar z-index especial. Se salta la primera seccion de cada
   pagina (el hero): no hay nada antes que cubrir. */
.section:not(:first-of-type)::after {
  content: "";
  position: absolute;
  top: -46px;
  left: 0;
  right: 0;
  /* 3px mas que el salto visual (46px): el color de la cuna es igual
     al de la propia seccion, asi que esos 3px de mas no se notan, pero
     tapan la linea blanca que dejaba el redondeo de subpixeles del
     clip-path justo donde su borde debia tocar el borde de la seccion. */
  height: 49px;
  background: var(--paper);
  clip-path: polygon(0 93.9%, 100% 0, 100% 93.9%);
  pointer-events: none;
  z-index: 2;
  /* Promociona el pseudo-elemento a su propia capa GPU: el clip-path
     rasterizado directamente en el mismo paint que el fondo dejaba una
     linea de 1px sin cubrir (bug conocido de antialiasing de clip-path
     en Chromium). Al pintarse en una capa aparte y componerse despues,
     el borde queda limpio. */
  transform: translateZ(0);
  backface-visibility: hidden;
}
.section-dark:not(:first-of-type)::after { background: var(--ink-900); }

@media (max-width: 640px) {
  .section:not(:first-of-type)::after {
    top: -28px;
    height: 31px;
    clip-path: polygon(0 90.3%, 100% 0, 100% 90.3%);
  }
}

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 15px 32px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.24s ease, background 0.24s ease,
              color 0.24s ease, border-color 0.24s ease;
}

.btn-primary {
  background: var(--amber);
  color: var(--ink-900);
  box-shadow: var(--shadow-amber);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px -8px rgba(255, 180, 61, 0.62);
}
.btn-primary:active { transform: translateY(-1px); }

.btn-secondary {
  background: transparent;
  color: var(--text-on-dark);
  border-color: rgba(255, 255, 255, 0.3);
}
.btn-secondary:hover {
  border-color: var(--cyan);
  color: var(--cyan-light);
  transform: translateY(-3px);
}

.btn-row {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  flex-wrap: wrap;
}

.btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---------- Barra superior ---------- */

.topbar {
  background: var(--ink-800);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 44px;
}
.topbar-contact {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
/* Separador entre WhatsApp y telefono */
.topbar-contact > a + a {
  padding-left: var(--space-sm);
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.topbar-wa,
.topbar-tel {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--white);
  transition: color 0.2s ease;
}
.topbar-wa svg,
.topbar-tel svg {
  width: 17px;
  height: 17px;
  flex: none;
  transition: color 0.2s ease;
}
.topbar-wa svg { color: #25D366; }
.topbar-tel svg { color: var(--cyan); }

.topbar-wa:hover,
.topbar-tel:hover { color: var(--cyan-light); }
.topbar-wa:hover svg,
.topbar-tel:hover svg { color: var(--cyan-light); }

@media (max-width: 640px) {
  .topbar .container {
    justify-content: center;
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .topbar-contact {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2xs) var(--space-xs);
  }
  /* Al envolverse en dos lineas el separador estorba */
  .topbar-contact > a + a { padding-left: 0; border-left: none; }
  .topbar-wa,
  .topbar-tel { font-size: 0.9rem; }
}

/* ---------- Encabezado ---------- */

/* Transparente sobre el hero; toma fondo al desplazar */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  margin-bottom: calc(-1 * var(--header-h));
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.32s ease, border-color 0.32s ease,
              backdrop-filter 0.32s ease, border-radius 0.32s ease,
              box-shadow 0.32s ease;
}
/* Al desplazar: panel flotante con las esquinas inferiores redondeadas */
.site-header.scrolled {
  background: var(--glass);
  backdrop-filter: blur(16px);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  border-bottom-left-radius: var(--r-lg);
  border-bottom-right-radius: var(--r-lg);
  box-shadow: 0 10px 34px -14px rgba(0, 0, 0, 0.75);
}
/* Con el menú móvil abierto el panel continúa hacia abajo: sin curva */
.site-header:has(.nav-links-open) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
/* La primera sección se desliza por detrás del encabezado */
.site-header + .section {
  padding-top: calc(var(--space-lg) + var(--header-h));
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}
.site-header .logo img {
  height: 110px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header .logo:hover img { transform: scale(1.05); }

.nav-links { display: flex; gap: var(--space-md); list-style: none; align-items: center; }
.nav-links > li > a,
.nav-links > li > .dropdown-toggle {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  color: var(--text-on-dark);
  font-weight: 500;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  padding: 6px 0;
  transition: color 0.2s ease;
}
.nav-links > li > a::after,
.nav-links > li > .dropdown-toggle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  border-radius: var(--r-pill);
  background: var(--amber);
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links > li > a:hover::after,
.nav-links > li > a:focus-visible::after,
.nav-links > li > a[aria-current="page"]::after,
.nav-links > li:hover > .dropdown-toggle::after,
.nav-links > li > .dropdown-toggle[aria-current="page"]::after { width: 100%; }
.nav-links > li > a:hover,
.nav-links > li > a:focus-visible,
.nav-links > li > a[aria-current="page"],
.nav-links > li:hover > .dropdown-toggle,
.nav-links > li > .dropdown-toggle[aria-current="page"] { color: var(--amber); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-on-dark);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}

/* ---------- Menú desplegable ---------- */

.has-dropdown { position: relative; }
.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.dropdown-menu {
  list-style: none;
  position: absolute;
  top: calc(100% + 14px);
  left: -16px;
  background: var(--glass);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-md);
  padding: var(--space-xs);
  min-width: 268px;
  box-shadow: 0 24px 56px -16px rgba(0, 0, 0, 0.75);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.24s;
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown.dropdown-open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-menu li a {
  display: block;
  padding: 11px 16px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  color: var(--text-on-dark-muted);
  font-size: 0.96rem;
  font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.dropdown-menu li a:hover,
.dropdown-menu li a:focus-visible {
  background: rgba(255, 180, 61, 0.12);
  color: var(--amber);
  transform: translateX(4px);
}
/* El servicio de la pagina actual queda marcado en ambar al abrir el menu */
.dropdown-menu li a[aria-current="page"] {
  background: rgba(255, 180, 61, 0.12);
  color: var(--amber);
}

/* ---------- Hero ---------- */

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-lg);
  align-items: center;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  flex-wrap: wrap;
}
.hero-stat { display: flex; flex-direction: column; min-width: 0; }
.hero-stat b {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--cyan-light);
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}
.hero-stat span {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-on-dark-muted);
  margin-top: 4px;
}

/* Columna unica del hero.
   Ojo: .hero-solo ES el .container, que lleva margin:0 auto. Estrechar
   el propio contenedor lo centraba y el texto acababa sobre el tecnico.
   Se limita el contenido, no el contenedor. */
.hero-solo > * { max-width: 680px; }
.hero-solo h1 { font-size: clamp(2.2rem, 4.2vw, 3.5rem); }

/* Tarjeta de formulario */
.form-section-elegant {
  position: relative;
  background: var(--paper);
  overflow: hidden;
}
.section.form-section-elegant::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../img/fotos/call-center-pexels.jpg') center / cover no-repeat;
  opacity: 0.08;
  filter: grayscale(1);
  mask-image: linear-gradient(180deg, transparent, black 25%, black 75%, transparent);
  pointer-events: none;
}
.form-section-elegant::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--paper) 0%, rgba(246, 249, 252, 0.4) 40%, var(--paper) 100%);
  pointer-events: none;
}
.form-section-elegant .container { position: relative; z-index: 1; }

.contact-social-big { text-align: center; margin-bottom: var(--space-lg); }
.contact-social-title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}
.contact-social-icons { display: flex; justify-content: center; gap: var(--space-md); }
.contact-social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--white);
  color: var(--cyan-ink);
  box-shadow: var(--shadow-md);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease, box-shadow 0.3s ease;
}
.contact-social-icons svg { width: 30px; height: 30px; }
.contact-social-icons a:hover {
  transform: translateY(-4px) scale(1.06);
  color: var(--cyan-deep);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 480px) {
  .contact-social-icons a { width: 52px; height: 52px; }
  .contact-social-icons svg { width: 24px; height: 24px; }
}

.form-card {
  position: relative;
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--space-md);
  color: var(--text-dark);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.form-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--cyan-deep) 100%);
}
.form-card h2 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin-top: var(--space-2xs);
  text-align: center;
}
.form-card > p {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin-top: 2px;
  text-align: center;
}
.form-card form { margin-top: var(--space-xs); }

/* Compacto: campos emparejados y espaciado reducido */
.form-card .form-group { margin-bottom: 10px; }
.form-card .form-group label { font-size: 0.84rem; margin-bottom: 4px; }
.form-card .form-group input,
.form-card .form-group select,
.form-card .form-group textarea {
  padding: 10px 14px;
  font-size: 0.94rem;
}
.form-card .btn { width: 100%; margin-top: var(--space-2xs); padding: 13px 28px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.form-row .form-group { margin-bottom: 10px; }

@media (max-width: 460px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Formularios ---------- */

.form-group { margin-bottom: var(--space-sm); }
.form-group label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 7px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 13px 17px;
  border: 1.5px solid var(--paper-line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--text-dark);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px var(--cyan-soft);
}
.form-group textarea { resize: vertical; }

/* ---------- Etiquetas de plaga ---------- */

.pest-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
  max-width: 760px;
}
.pest-tag {
  font-size: 0.88rem;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-on-dark);
  transition: border-color 0.24s ease, background 0.24s ease, transform 0.24s ease;
}
.pest-tag:hover {
  border-color: var(--cyan);
  background: var(--cyan-soft);
  transform: translateY(-2px);
}
.section:not(.section-dark) .pest-tag {
  background: var(--white);
  border-color: var(--paper-line);
  color: var(--text-dark);
  box-shadow: var(--shadow-sm);
}

/* ---------- Mapa embebido ---------- */

.map-embed {
  margin-top: var(--space-md);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-lg);
  line-height: 0;
}
.map-embed iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

@media (max-width: 768px) {
  .map-embed iframe { height: 300px; }
}

/* ---------- Lista de marco legal ---------- */

.legal-list { list-style: none; margin-top: var(--space-md); }
.legal-list li {
  display: flex;
  gap: var(--space-xs);
  align-items: baseline;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--paper-line);
  color: var(--text-dark);
  font-size: 1rem;
  transition: padding-left 0.24s ease;
}
.legal-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  flex: none;
  transform: translateY(-2px);
}
.legal-list li:hover { padding-left: var(--space-2xs); }
.legal-list li:last-child { border-bottom: none; }
.section-dark .legal-list li {
  color: var(--text-on-dark-muted);
  border-color: rgba(255, 255, 255, 0.1);
}

/* ---------- Pie de página ---------- */

.site-footer {
  background: var(--ink-900);
  color: var(--text-on-dark-muted);
  padding: var(--space-lg) 0 var(--space-md);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--cyan-deep) 55%, var(--amber) 100%);
}
.site-footer p { color: var(--text-on-dark-muted); font-size: 0.96rem; }
.site-footer a { color: var(--cyan-light); transition: opacity 0.2s ease; }
.site-footer a:hover { opacity: 0.75; }

.footer-eslogan {
  font-family: var(--font-display);
  font-size: 1.3rem !important;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--text-on-dark) !important;
  max-width: 46ch;
  border-left: 3px solid var(--cyan);
  border-radius: 2px;
  padding-left: var(--space-sm);
}

.footer-credit {
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.88rem !important;
  opacity: 0.75;
}
.footer-credit a { font-weight: 600; }

.footer-social {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  flex-wrap: wrap;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 9px 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-pill);
  transition: border-color 0.24s ease, background 0.24s ease, transform 0.24s ease;
}
.footer-social a svg { width: 18px; height: 18px; flex-shrink: 0; }
.footer-social a:hover {
  opacity: 1;
  border-color: var(--cyan);
  background: var(--cyan-soft);
  transform: translateY(-2px);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--space-lg);
}
/* Logo y bloque de marca centrados en su columna */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footer-logo { display: inline-block; }
.footer-logo img { height: 110px; width: auto; display: block; }
.footer-brand .footer-eslogan { margin-top: var(--space-sm); font-size: 1.05rem !important; }
.footer-col h4 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-on-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-sm);
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 0.94rem; }
.footer-contact-list li { color: var(--text-on-dark-muted); font-size: 0.94rem; line-height: 1.5; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
  padding-top: var(--space-xs);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.footer-bottom p { margin: 0; }
.footer-bottom .footer-credit { border-top: none; padding-top: 0; margin-top: 0; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- Botón flotante de WhatsApp ---------- */

.wa-widget { position: fixed; bottom: 28px; right: 28px; z-index: 200; }

.wa-bubble {
  position: absolute;
  bottom: 88px;
  right: 0;
  width: 300px;
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 20px 50px -12px rgba(4, 24, 43, 0.35);
  padding: var(--space-sm);
  opacity: 0;
  transform: translateY(16px) scale(0.94);
  pointer-events: none;
  transform-origin: bottom right;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.wa-bubble.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.wa-bubble::after {
  content: "";
  position: absolute;
  bottom: -8px;
  right: 30px;
  width: 18px;
  height: 18px;
  background: var(--white);
  transform: rotate(45deg);
  border-radius: 3px;
}
.wa-bubble-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: var(--paper);
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.wa-bubble-close:hover { background: var(--paper-line); color: var(--ink-900); }
.wa-bubble-link { display: block; }
.wa-bubble-header { display: flex; align-items: center; gap: 10px; padding-right: 20px; }
.wa-bubble-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ink-900);
  border: 2px solid #25D366;
  flex-shrink: 0;
}
.wa-bubble-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wa-bubble-who strong {
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-bubble-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: #1fa855;
  font-weight: 600;
}
.wa-bubble-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25D366;
  display: inline-block;
  animation: wa-dot-pulse 1.8s ease-in-out infinite;
}
.wa-bubble-text {
  margin-top: var(--space-sm);
  background: var(--paper);
  border-radius: 14px 14px 14px 4px;
  padding: 10px 14px;
  font-size: 0.9rem;
  color: var(--text-dark);
  line-height: 1.45;
}
.wa-bubble-cta {
  display: block;
  text-align: center;
  margin-top: var(--space-sm);
  padding: 10px;
  border-radius: var(--r-pill);
  background: #25D366;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  transition: background 0.2s ease, transform 0.2s ease;
}
.wa-bubble-link:hover .wa-bubble-cta { background: #1fbd5a; transform: translateY(-1px); }

@keyframes wa-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (max-width: 480px) {
  .wa-bubble { width: calc(100vw - 40px); right: -8px; }
}

.whatsapp-float {
  position: relative;
  bottom: 0;
  right: 0;
  background: #25D366;
  color: var(--white);
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 34px -6px rgba(37, 211, 102, 0.6);
  z-index: 200;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.whatsapp-float svg {
  width: 36px;
  height: 36px;
  /* La sacudida periodica llama la atencion sin ser constante */
  animation: wa-atencion 4s ease-in-out infinite;
  transform-origin: center;
}
/* Dos ondas desfasadas para un halo continuo */
.whatsapp-float::before,
.whatsapp-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.55);
  animation: pulse-ring 2.6s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
  pointer-events: none;
}
.whatsapp-float::after { animation-delay: 1.3s; }

.whatsapp-float:hover {
  transform: scale(1.09);
  box-shadow: 0 20px 46px -6px rgba(37, 211, 102, 0.78);
}
.whatsapp-float:hover svg { animation-play-state: paused; }

@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.8; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* Reposo la mayor parte del ciclo, luego una sacudida breve */
@keyframes wa-atencion {
  0%, 70%, 100% { transform: scale(1) rotate(0deg); }
  74% { transform: scale(1.18) rotate(-12deg); }
  78% { transform: scale(1.18) rotate(12deg); }
  82% { transform: scale(1.14) rotate(-9deg); }
  86% { transform: scale(1.1) rotate(7deg); }
  90% { transform: scale(1.05) rotate(-4deg); }
  94% { transform: scale(1) rotate(0deg); }
}

@media (max-width: 768px) {
  .wa-widget { bottom: 20px; right: 20px; }
  .whatsapp-float { width: 64px; height: 64px; }
  .whatsapp-float svg { width: 31px; height: 31px; }
  .wa-bubble { bottom: 76px; }
}

/* ---------- Entrada escalonada al cargar ---------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-solo > * {
  animation: rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.hero-solo > *:nth-child(1) { animation-delay: 0.05s; }
.hero-solo > *:nth-child(2) { animation-delay: 0.14s; }
.hero-solo > *:nth-child(3) { animation-delay: 0.23s; }
.hero-solo > *:nth-child(4) { animation-delay: 0.32s; }
.hero-solo > *:nth-child(5) { animation-delay: 0.41s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Adaptación a pantallas pequeñas ---------- */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .section { padding: var(--space-lg) 0; }
}

@media (max-width: 768px) {
  :root { --header-h: 107px; }
  body { font-size: 16px; }
  .site-header .logo img { height: 82px; }

  .nav-links { display: none; }
  .nav-toggle { display: block; }

  .nav-links-open {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ink-900);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 0 var(--r-md) var(--r-md);
    padding: var(--space-sm);
    gap: var(--space-xs);
  }

  .has-dropdown:hover .dropdown-menu { opacity: 0; visibility: hidden; }
  .has-dropdown.dropdown-open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    position: static;
    transform: none;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.04);
    border: none;
    margin-top: var(--space-xs);
    min-width: 0;
    width: 100%;
  }

  .hero-stats { grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
  .btn { width: 100%; }
}

/* ============================================================
   COMPOSICION
   Primitivas que rompen la rejilla uniforme de tarjetas.
   ============================================================ */

/* ---------- Revelado al entrar en pantalla ---------- */

/* Se oculta solo si hay JS: sin el, el contenido se ve siempre */
.js .reveal > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js .reveal.visible > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal > * { opacity: 1; transform: none; transition: none; }
}

/* Cabecera de seccion centrada (servicios del home) */
.section-head--center {
  text-align: center;
}

/* ---------- Pagina de confirmacion (gracias.html) ---------- */

.thanks-card {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-xl) var(--space-md);
}
.thanks-icon {
  width: 84px;
  height: 84px;
  margin: 0 auto var(--space-md);
  border-radius: 50%;
  background: var(--cyan-soft);
  color: var(--cyan-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}
.thanks-icon svg { width: 44px; height: 44px; }
.thanks-icon--error { background: rgba(255, 180, 61, 0.15); color: var(--amber); }
.thanks-card .lead { margin: var(--space-sm) auto var(--space-md); }
.thanks-card .btn-row { margin-bottom: var(--space-sm); }
.btn-ghost {
  display: inline-block;
  margin-top: var(--space-xs);
  font-weight: 600;
  color: var(--cyan-ink);
}
.btn-ghost:hover { text-decoration: underline; }

/* ---------- Bento asimetrico de servicios ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  align-items: start;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}
.bento-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease, border-color 0.35s ease;
}
.bento-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--cyan);
}
.bento-media {
  position: relative;
  display: block;
  /* Alto fijo: con grid-auto-rows:auto la tarjeta crece segun el texto
     (que ahora incluye boton propio), y flex:1 dejaba la foto en 0px
     cuando el texto necesitaba mas espacio del que daba la fila fija. */
  flex: none;
  height: 200px;
  overflow: hidden;
}
/* La foto llena la tarjeta entera: object-fit:contain + relleno
   difuminado dejaba huecos blancos cuando la proporcion de la foto no
   coincidia con la de la caja, y ademas dependia de una variable --img
   fragil (su url() se resuelve relativa a la hoja que la consume, no
   al HTML donde se declara). Cover es simple y no deja huecos nunca. */
.bento-media img {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.bento-card:hover .bento-media img { transform: scale(1.04); }
.bento-body {
  padding: var(--space-sm) var(--space-sm) var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.bento-body h3 { margin-bottom: 4px; }
.bento-body .btn { align-self: center; }
.bento-body p { font-size: 0.95rem; margin-bottom: var(--space-xs); }
/* Fuerza 2 lineas en las tarjetas normales, todas del mismo ancho: sin
   esto un parrafo un poco mas largo que otro envuelve a 3 lineas y deja
   hueco debajo de las tarjetas vecinas mas cortas en la misma fila. La
   protagonista, sola en su fila, no lo necesita. */
.bento-card:not(.bento-card--hero) .bento-body p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bento-body .btn { margin-top: auto; }

/* Tamaños: uno protagonista, dos anchos, cuatro normales */
/* Protagonista a ancho completo y sola en su fila: emparejar una
   tarjeta alta con una normal en la misma fila deja hueco debajo de
   la mas baja (la fila crece a la mas alta, align-items:start no
   estira la corta para llenarlo). Las demas quedan todas iguales,
   sin excepciones de ancho, para que ninguna otra combinacion vuelva
   a mezclar alturas distintas en una misma fila. */
/* Fila protagonista: card a la izquierda, video promocional a la derecha */
.bento-hero-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start; /* El video arranca a la misma altura que el card */
  gap: var(--space-md);
}
.bento-card--hero .bento-body h3 { font-size: 1.5rem; }
.bento-card--hero .bento-media { height: 320px; }
/* oficinas.webp: las cabezas quedan en el 10-25% de la foto. La caja
   protagonista es muy ancha (todo el ancho) y baja (320px), asi que
   cover recorta cerca de 180px arriba y abajo; centrado se llevaba las
   caras. Se baja el punto de enfoque para conservarlas. */
.bento-card--hero .bento-media img { object-position: center 15%; }

/* Bloque del video promocional: elemento aparte de la tarjeta */
.bento-hero-video {
  min-width: 0;
}
.bento-hero-video__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.2;
  margin-bottom: var(--space-sm);
  text-align: center;
}

/* Nota de calidad y profesionalismo bajo el video: llena el espacio
   que deja la tarjeta protagonista (mas alta que la columna del video). */
.bento-hero-video__note {
  margin-top: var(--space-sm);
}
.bento-hero-video__note h4 {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  text-align: center;
}
.bento-hero-video__note p {
  font-size: 0.98rem;
  line-height: 1.65;
  margin-bottom: 10px;
}
.bento-hero-video__creds {
  list-style: none;
  display: grid;
  gap: 10px;
}
.bento-hero-video__creds li {
  position: relative;
  padding-left: 26px;
  font-size: 0.95rem;
  color: var(--text-dark);
}
.bento-hero-video__creds li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cyan-soft);
  border: 1.5px solid var(--cyan-deep);
}
.bento-hero-video__creds li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 7px;
  width: 6px;
  height: 3px;
  border-left: 2px solid var(--cyan-deep);
  border-bottom: 2px solid var(--cyan-deep);
  transform: rotate(-45deg);
}

/* ---------- Video Vimeo en la tarjeta protagonista ---------- */

/* Misma tecnica que la pagina de referencia: contenedor 16:9 con
   padding-top, iframe absoluto dentro y fondo negro mientras carga. */
.hero__vimeo-banner-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* Proporcion 16:9 (9 / 16 = 0.5625) */
  background-color: #000; /* Fondo negro mientras carga */
  border-radius: var(--r-md);
  overflow: hidden; /* Clave para los bordes redondeados */
  box-shadow: var(--shadow-md);
}

.hero__vimeo-banner-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Boton flotante de sonido (mute/unmute) sobre el video */
.vimeo-unmute-btn {
  position: absolute;
  bottom: 15px;
  right: 15px;
  z-index: 100; /* Por encima del video */
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.vimeo-unmute-btn:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: scale(1.1);
}
.vimeo-unmute-icon { width: 20px; height: 20px; }
.vimeo-unmute-icon--loud { display: none; }
.vimeo-unmute-btn.is-unmuted .vimeo-unmute-icon--muted { display: none; }
.vimeo-unmute-btn.is-unmuted .vimeo-unmute-icon--loud { display: block; }

/* ---------- Secuencia de pasos ---------- */

.process-note {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--paper-line);
}
.process-note > div {
  background: var(--white);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
  overflow: hidden;
}
.process-note.reveal > div {
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease, border-color 0.35s ease;
  transition-delay: calc(var(--i, 0) * 80ms);
}
.process-note > div:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--cyan);
}
.process-note-media img { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.process-note > div:hover .process-note-media img { transform: scale(1.04); }
.process-note h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin-bottom: var(--space-xs);
}
.process-note p { color: var(--text-muted); }
.process-note .btn { margin-top: var(--space-sm); }
.process-note-media {
  height: 320px;
  margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) var(--space-md);
  overflow: hidden;
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.process-note-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.btn-sm {
  padding: 9px 20px;
  font-size: 0.88rem;
}

.btn-lg {
  padding: 20px 48px;
  font-size: 1.2rem;
}
.btn-center { display: flex; justify-content: center; margin-top: var(--space-lg); }

.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
  position: relative;
}
/* Linea que une los pasos y se dibuja al revelarse */
.steps::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 6%;
  right: 6%;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--cyan-deep));
  opacity: 0.35;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.reveal.visible .steps::before,
.steps.visible::before { transform: scaleX(1); }

.step { position: relative; }
.step .btn { margin-top: var(--space-sm); }
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ink-900);
  color: var(--cyan-light);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: var(--space-sm);
  position: relative;
  z-index: 1;
}
.section:not(.section-dark) .step-num {
  background: var(--white);
  color: var(--cyan-ink);
  border: 2px solid var(--cyan);
}
.step h3 { margin-bottom: 6px; }
.step p { font-size: 0.96rem; }

/* ---------- Guia vertical (linea de tiempo) ---------- */

.v-timeline-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}
.v-timeline-media {
  position: sticky;
  top: calc(var(--header-h) + var(--space-md));
  margin-top: var(--space-lg);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.v-timeline-media img { width: 100%; height: 420px; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .v-timeline-wrap { grid-template-columns: 1fr; }
  .v-timeline-media { position: static; order: -1; }
  .v-timeline-media img { height: 240px; }
}

.v-timeline {
  list-style: none;
  max-width: 720px;
  margin-top: var(--space-lg);
  position: relative;
}
.v-timeline li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: var(--space-md);
  position: relative;
  padding-bottom: var(--space-lg);
}
.v-timeline li:last-child { padding-bottom: 0; }
/* Linea vertical que conecta los circulos, centrada en la columna del numero */
.v-timeline li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 46px;
  left: 22px;
  width: 2px;
  bottom: -8px;
  background: var(--paper-line);
}
.v-timeline-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--white);
  color: var(--cyan-ink);
  border: 2px solid var(--cyan);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  position: relative;
  z-index: 1;
}
.v-timeline h3 { margin-bottom: 4px; }
.v-timeline p { font-size: 0.96rem; }

@media (max-width: 560px) {
  .v-timeline li { grid-template-columns: 36px 1fr; gap: var(--space-sm); }
  .v-timeline-num { width: 36px; height: 36px; font-size: 0.96rem; }
  .v-timeline li:not(:last-child)::before { left: 17px; top: 36px; }
}

/* ---------- Filas divididas, sin cajas ---------- */

.split-cols {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--space-lg);
  align-items: start;
}
.split-cols > header { position: sticky; top: calc(var(--header-h) + var(--space-md)); }

/* Hero de Nosotros: logo grande en tarjeta blanca junto al titular */
.hero-nosotros {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--space-lg);
}
.hero-nosotros-logo {
  justify-self: center;
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
}
.hero-nosotros-logo img {
  width: 100%;
  max-width: 200px;
  height: auto;
  display: block;
}
/* Imagen de la reseña historica junto al texto */
.hero-nosotros-media {
  justify-self: center;
  width: 100%;
  max-width: 480px;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero-nosotros-media img {
  width: 100%;
  height: auto;
  display: block;
}

/* Detalles: halo cian detras de la tarjeta del logo */
.hero-nosotros-logo {
  position: relative;
}
.hero-nosotros-logo::before {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: calc(var(--r-lg) + 22px);
  background: radial-gradient(ellipse 62% 62% at 50% 50%, rgba(64, 192, 240, 0.28), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

/* Flotacion suave del logo: arranca cuando termina el revelado */
@keyframes flotar-logo {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.hero-nosotros-logo {
  animation: flotar-logo 6s ease-in-out 1.4s infinite;
}

/* Hover en la imagen de la reseña historica: leve elevacion */
.hero-nosotros .hero-nosotros-media {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s ease;
}
.hero-nosotros .hero-nosotros-media:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

@media (max-width: 768px) {
  .hero-nosotros { grid-template-columns: 1fr; gap: var(--space-md); }
  .hero-nosotros-logo img { max-width: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-nosotros-logo { animation: none; }
}

.rows { display: flex; flex-direction: column; }
.row-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  align-items: baseline;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--paper-line);
  transition: padding-left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.row-item:last-child { border-bottom: 1px solid var(--paper-line); }
/* Filas sin cifra: el contenido ocupa todo el ancho */
.row-item:not(:has(.row-key)) { grid-template-columns: 1fr; }
.row-item:hover { padding-left: var(--space-xs); }
.section-dark .row-item { border-color: rgba(255, 255, 255, 0.12); }
.row-key {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--cyan-ink);
  line-height: 1.1;
  min-width: 4.5ch;
}
.section-dark .row-key { color: var(--cyan-light); }
.row-item h3 { margin-bottom: 3px; }
.row-item p { font-size: 0.97rem; }

/* ---------- Bloque editorial a dos columnas ---------- */

.section-photo {
  margin-top: var(--space-md);
  border-radius: var(--r-md);
  overflow: hidden;
  max-height: 320px;
}
.section-photo img { width: 100%; height: 320px; object-fit: cover; display: block; }
.section-photo--tall { max-height: 480px; }
.section-photo--tall img { height: 480px; }

.cert-media-stack { display: flex; flex-direction: column; gap: var(--space-sm); }
.cert-media-stack .section-photo { max-height: 220px; }
.cert-media-stack .section-photo img { height: 220px; }
.section-photo--contain { background: var(--white); border: 1px solid var(--paper-line); position: relative; }
.section-photo--contain img { object-fit: contain; }
.section-photo-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 6px 12px;
  background: rgba(4, 24, 43, 0.75);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 500;
  text-align: center;
}

.editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg) var(--space-md);
  margin-top: var(--space-md);
}
.editorial > div { border-top: 2px solid var(--cyan); padding-top: var(--space-sm); }
.editorial h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cyan-ink);
  margin-bottom: var(--space-xs);
}
.section-dark .editorial h3 { color: var(--cyan-light); }
.editorial p { font-size: 1.05rem; line-height: 1.7; }

.species-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin-top: var(--space-sm);
}
.species-list li {
  position: relative;
  padding-left: 26px;
  font-size: 0.98rem;
  color: var(--text-dark);
}
.species-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cyan-soft);
  border: 1.5px solid var(--cyan-deep);
}
.species-list li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  width: 6px;
  height: 3px;
  border-left: 2px solid var(--cyan-deep);
  border-bottom: 2px solid var(--cyan-deep);
  transform: rotate(-45deg);
}
@media (max-width: 480px) {
  .species-list { grid-template-columns: 1fr; }
}

/* ---------- Enlaces a otros servicios, en linea ---------- */

.links-inline { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-md); }
.links-inline a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 10px 20px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-on-dark);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.links-inline a::after { content: "\2192"; color: var(--cyan); transition: transform 0.25s ease; }
.links-inline a:hover {
  border-color: var(--cyan);
  background: var(--cyan-soft);
  transform: translateY(-2px);
}
.links-inline a:hover::after { transform: translateX(3px); }
.section:not(.section-dark) .links-inline a {
  border-color: var(--paper-line);
  background: var(--white);
  color: var(--text-dark);
}

/* ---------- Galeria de fotos reales ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs);
  margin-top: var(--space-md);
}
.gallery figure {
  position: relative;
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper-line);
  box-shadow: var(--shadow-sm);
}
.gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery figure:hover img { transform: scale(1.05); }
/* Una sola foto: ocupa dos tercios y no queda perdida en la rejilla */
.gallery > figure:only-child { grid-column: span 2; }
.gallery figcaption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: inline-block;
  width: fit-content;
  padding: 8px 16px;
  background: var(--amber);
  border-radius: var(--r-pill);
  box-shadow: 0 6px 16px -4px rgba(4, 24, 43, 0.45);
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery figure:hover figcaption { transform: translateY(-3px); }
@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery > figure:only-child { grid-column: span 1; }
}

/* ---------- Materialidad ---------- */

/* Refraccion en el vidrio del encabezado y el submenu */
.site-header.scrolled,
.dropdown-menu { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 10px 34px -14px rgba(0, 0, 0, 0.75); }

/* Sin halos de neon: sombra tintada y borde interior */
.btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 22px -10px rgba(120, 78, 0, 0.55); }
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 14px 30px -12px rgba(120, 78, 0, 0.6); }
.whatsapp-float { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 26px -10px rgba(4, 24, 43, 0.6); }
.whatsapp-float:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 16px 34px -12px rgba(4, 24, 43, 0.7); }

/* Empuje fisico al pulsar */
.btn:active, .bento-card:active { transform: translateY(1px) scale(0.99); }

/* ---------- Adaptacion ---------- */

@media (max-width: 1024px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .bento-hero-row { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .bento-card--hero .bento-media { height: 240px; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
  .steps::before { display: none; }
  .split-cols { grid-template-columns: 1fr; gap: var(--space-md); }
  .split-cols > header { position: static; }
}

@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bento-card--hero .bento-media { height: 220px; }
  .steps { grid-template-columns: 1fr; gap: var(--space-sm); }
  .process-note { grid-template-columns: 1fr; gap: var(--space-sm); }
  .editorial { grid-template-columns: 1fr; gap: var(--space-md); }
  .row-item { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Hero con fotografia ---------- */

/* Sustituye los halos radiales por la foto del tecnico.
   La segunda declaracion mejora a WebP; si el navegador no entiende
   image-set la descarta y se queda con el JPEG de la primera. */
.hero-shot::before {
  z-index: 1;
  background-image: linear-gradient(95deg,
    rgba(4, 24, 43, 0.95) 0px,
    rgba(4, 24, 43, 0.92) 700px,
    rgba(4, 24, 43, 0.45) 880px,
    rgba(4, 24, 43, 0.12) 100%);
}

@media (max-width: 900px) {
  /* Apilado: el texto pasa por encima de la foto y necesita mas velo */
  .hero-shot::before {
    background-image: linear-gradient(180deg,
      rgba(4, 24, 43, 0.90) 0%,
      rgba(4, 24, 43, 0.93) 55%,
      rgba(4, 24, 43, 0.97) 100%);
  }
  .hero-slide::after {
    background-size: cover;
    background-position: 68% center;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
/* Una sola capa: la foto entera, anclada a la derecha, que se disuelve
   hacia la izquierda sobre el azul de la seccion. Antes habia dos capas
   (nitida en contain y relleno difuminado en cover) y, al no coincidir
   su encuadre, el punto donde la mascara dejaba de mezclar se veia como
   una linea vertical. */
.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--img);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
  transition: transform 0.9s ease-out; /* al ceder el turno, regresa sin salto */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.12) 16%,
    rgba(0, 0, 0, 0.45) 30%,
    rgba(0, 0, 0, 0.80) 42%,
    rgba(0, 0, 0, 0.95) 52%,
    #000 64%);
  mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.12) 16%,
    rgba(0, 0, 0, 0.45) 30%,
    rgba(0, 0, 0, 0.80) 42%,
    rgba(0, 0, 0, 0.95) 52%,
    #000 64%);
}

/* Por debajo de ~1172 px la foto (proporcion 1.5) ya no llena el alto y
   dejaria franjas horizontales. Con cover no hay franjas y el recorte
   cae por la izquierda, que va bajo el texto y esta velada. */
@media (max-width: 1172px) {
  .hero-slide::after { background-size: cover; }
}

/* Velo superior: sostiene el menu transparente sobre la zona clara */
.hero-shot::after {
  content: "";
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(4, 24, 43, 0.88) 0%,
    rgba(4, 24, 43, 0.55) 50%,
    rgba(4, 24, 43, 0) 100%);
}

/* La foto pide mas alto para que el tecnico se lea completo */
.hero-shot { padding-bottom: var(--space-xl); min-height: 88vh; display: flex; align-items: center; }
.hero-shot > .container { width: 100%; z-index: 2; }

@media (max-width: 900px) {
  .hero-solo { max-width: 100%; }
  .hero-shot { min-height: 0; display: block; }
}

/* ---------- Pulso de atencion en el CTA principal ---------- */

/* Solo en el boton de WhatsApp del hero: repetirlo en cada boton
   primario convertiria el efecto en ruido. */
.btn-pulse { position: relative; }
.btn-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--amber);
  animation: onda-boton 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
  pointer-events: none;
}
.btn-pulse:hover::after { animation-play-state: paused; }

@keyframes onda-boton {
  0%   { transform: scale(1); opacity: 0.8; }
  70%  { transform: scale(1.16); opacity: 0; }
  100% { transform: scale(1.16); opacity: 0; }
}

/* Sombra de apoyo: la foto tiene zonas claras bajo el texto del hero */
.hero-solo h1,
.hero-solo .lead,
.hero-stat b,
.hero-stat span { text-shadow: 0 1px 14px rgba(4, 24, 43, 0.6); }

.site-header:not(.scrolled) .nav-links > li > a,
.site-header:not(.scrolled) .nav-links > li > .dropdown-toggle {
  text-shadow: 0 1px 10px rgba(4, 24, 43, 0.75);
}

/* Sobre fotografia el tono tenue no da contraste suficiente */
.hero-solo .lead { color: #DCE9F4; }
.hero-stat span { color: #C9DCEC; }

@media (max-width: 460px) {
  .hero-stats { grid-template-columns: 1fr; }
}

/* ---------- Carrusel del hero ---------- */

.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-slide.is-active { opacity: 1; }

/* Duracion de cada fotografia. La lee main.js para que el zoom lento
   de la imagen termine justo cuando cambia la fotografia. */
:root { --slide-ms: 6000ms; }

/* Zoom lento, sutil y constante mientras la foto esta en pantalla */
@keyframes hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
.hero-slide.is-active::after {
  animation: hero-zoom var(--slide-ms) linear forwards;
}

/* Sin JS se ve la primera, que ya viene activa desde el HTML */
.hero-slide--1 { --img: url('../img/control-de-plagas-en-cali.jpg'); }
.hero-slide--2 { --img: url('../img/tecnico-control-de-plagas-bagoneta.jpg'); }
.hero-slide--3 { --img: url('../img/operario-de-control-de-plagas-cocina.jpg'); }

@supports (background-image: image-set(url('a.webp') type('image/webp'))) {
  .hero-slide--1 { --img: image-set(url('../img/control-de-plagas-en-cali.webp') type('image/webp'), url('../img/control-de-plagas-en-cali.jpg') type('image/jpeg')); }
  .hero-slide--2 { --img: image-set(url('../img/tecnico-control-de-plagas-bagoneta.webp') type('image/webp'), url('../img/tecnico-control-de-plagas-bagoneta.jpg') type('image/jpeg')); }
  .hero-slide--3 { --img: image-set(url('../img/operario-de-control-de-plagas-cocina.webp') type('image/webp'), url('../img/operario-de-control-de-plagas-cocina.jpg') type('image/jpeg')); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero-slide.is-active::after { animation: none; }
}

/* En la cocina el operario esta en el tercio izquierdo: la mascara que
   disuelve ese lado lo borraria, asi que esta llena el encuadre.
   Se ancla a la izquierda: con cover el porcentaje mueve la imagen en
   sentido contrario, y en 90% el operario caia al 28% del hero. En 0%
   sube al 37%, que es lo mas a la derecha posible sin ampliar la foto
   ni recortarla por arriba. */
.hero-slide--3::after {
  background-size: cover;
  background-position: left center;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Sobre pantallas anchas las fotos del tecnico (1) y de la bagoneta (2)
   se muestran enteras (contain) pegadas al borde derecho: se echan un
   poco a la izquierda, hacia el espacio azul, para que no queden tan
   recargadas contra el borde. La cocina va aparte, a la derecha. */
@media (min-width: 1173px) {
  .hero-slide--1::after { background-position: 80% center; }
  .hero-slide--2::after { background-position: 90% center; }
}

.social-follow {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.social-follow p { max-width: 56ch; margin-top: var(--space-2xs); }

.contact-info-centered { text-align: center; }
.contact-info-centered .rows { align-items: center; }
.contact-info-centered .row-item { grid-template-columns: 1fr; justify-items: center; }
.contact-info-centered .social-follow p { margin-left: auto; margin-right: auto; }
.contact-info-centered .social-badges { justify-content: center; }

/* ---------- Insignias de redes sociales ---------- */

.social-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.social-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  width: 108px;
  text-align: center;
}
.social-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  color: #fff;
  box-shadow: var(--shadow-md);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}
.social-badge-icon svg { width: 32px; height: 32px; }
.social-badge:hover .social-badge-icon { transform: translateY(-4px) scale(1.05); }
.social-badge span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-on-dark);
}
.social-badge-icon.ico-facebook { background: #1877F2; }
.social-badge-icon.ico-instagram { background: linear-gradient(135deg, #FEDA75 0%, #FA7E1E 26%, #D62976 55%, #962FBF 78%, #4F5BD5 100%); }
.social-badge-icon.ico-tiktok { background: #111318; }
.social-badge-icon.ico-google { background: var(--amber); color: var(--ink-900); }

@media (max-width: 480px) {
  .social-badges { gap: var(--space-sm); justify-content: center; }
  .social-badge { width: 84px; }
  .social-badge-icon { width: 58px; height: 58px; }
  .social-badge-icon svg { width: 27px; height: 27px; }
}