/* =============================================================================
   theme-limpiezas.css — Identidad "Limpiezas Profesionales"
   Azul océano + verde menta. Higiene, método, frescura.
   ========================================================================== */

body.theme-limpiezas {
  /* Color tokens */
  --accent: #0077b6;
  --accent-strong: #023e8a;
  --accent-soft: rgba(0, 119, 182, 0.12);
  --accent-shadow: 0 12px 26px -12px rgba(0, 119, 182, 0.7);

  --bg: #f4f9fd;
  --surface: #ffffff;
  --border: #e3eef7;
  --border-strong: #c8dcea;

  --heading: #22223b;
  --text: #333a4d;
  --text-soft: #5c6b82;

  --bg-input: #fbfdff;
  --valid: #2a9d8f;
  --error: #e63946;

  /* Cross-nav (promueve portes) */
  --promo-bg: linear-gradient(90deg, #a4161a, #d62828 55%, #e63946);
  --promo-accent: #ffd6d6;
  --promo-fab-bg: #a4161a;

  /* Hero */
  --hero-bg-a: #023e8a;
  --hero-bg-b: #0077b6;
  --hero-glow-a: rgba(46, 196, 182, 0.45);
  --hero-glow-b: rgba(2, 62, 138, 0.6);
  --hero-title: #ffffff;
  --hero-fg: rgba(255, 255, 255, 0.9);
  --hero-accent: #2ec4b6;
  --hero-art-opacity: 0.95;

  --footer-bg: #0b2545;
  --footer-fg: rgba(255, 255, 255, 0.78);

  --focus-ring: 0 0 0 3px rgba(0, 119, 182, 0.35);
}

/* Acento esmeralda para subsecciones */
.accent-mint {
  --accent: #2ec4b6;
  --accent-strong: #2a9d8f;
  --accent-soft: rgba(46, 196, 182, 0.14);
  --accent-shadow: 0 12px 26px -12px rgba(42, 157, 143, 0.7);
}

/* Ilustración del hero */
.hero__art--limpiezas {
  max-width: 300px;
}

.hero__art--limpiezas img {
  filter: drop-shadow(0 0 28px rgba(46, 196, 182, 0.18));
}

/* Sellos de confianza */
.seals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  padding: 1.4rem 1rem;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}

.seal svg {
  width: 34px;
  height: 34px;
  color: var(--accent-strong);
}

.seal strong {
  color: var(--heading);
  font-size: 0.98rem;
}

.seal span {
  font-size: 0.85rem;
  color: var(--text-soft);
}

/* Protocolo paso a paso */
.protocol {
  display: grid;
  gap: 1rem;
  counter-reset: step;
}

.protocol li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.15rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.protocol li::before {
  content: counter(step, decimal-leading-zero);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
}

.protocol strong {
  display: block;
  color: var(--heading);
  margin-bottom: 0.2rem;
}

.protocol p {
  font-size: 0.93rem;
  color: var(--text-soft);
}

/* Equipamiento */
.equipment {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.equipment li {
  padding: 1.2rem;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}

.equipment svg {
  width: 28px;
  height: 28px;
  color: var(--accent-strong);
  margin-bottom: 0.7rem;
}

.equipment strong {
  display: block;
  color: var(--heading);
  margin-bottom: 0.25rem;
}

.equipment span {
  font-size: 0.9rem;
  color: var(--text-soft);
}

@media (max-width: 900px) {
  .seals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .equipment {
    grid-template-columns: 1fr;
  }
}