/* ========== PALETA DE COLORES (8 base – UX/UI) ==========
   1. Primario (teal) – enlaces, iconos, acordeón
   2. Secundario (slate) – fondos oscuros, títulos, topbar
   3. Acento (teal, igual que primario) – nav, topbar der, activos
   4. CTA (azul) – botones principales, pestañas
   5. Texto – cuerpo
   6. Texto suave – secundario, pie
   7. Fondo – página
   8. Superficie – blanco, cards
   + WhatsApp (marca) – variable única
   El resto se deriva con color-mix/opacity.
========================================== */

/* Fuentes logo: BC Gaming (WALY) y Fabrico BC (REPAIR). Añadir .woff2/.woff en css/fonts/ si se usan. */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700&display=swap');
@font-face {
  font-family: 'BC Gaming';
  src: url('fonts/bc-gaming.woff2') format('woff2'), url('fonts/bc-gaming.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fabrico BC';
  src: url('fonts/fabrico-bc.woff2') format('woff2'), url('fonts/fabrico-bc.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* —— 8 colores base —— */
  --color-primario: #0d9488;
  --color-secundario: #1e293b;
  --color-acento: #0d9488;
  --color-cta: #2C4D8F;
  --color-texto: #334155;
  --color-texto-suave: #94a3b8;
  --color-fondo: #f8fafc;
  --color-blanco: #ffffff;
  /* Marca (fuera de la paleta de 8) */
  --color-whatsapp: #25d366;

  /* —— Derivados (hex fijos desde los 8 base; compatibilidad total) —— */
  --color-primario-oscuro: #0f766e;
  --color-cta-hover: #1e3a6e;
  --color-secundario-oscuro: #161f32;
  --color-acento-hover: #0f766e;
  --color-acento-claro: rgba(13, 148, 136, 0.12);
  --color-topbar: #2b3036;
  --color-pestana: #173268;
  --color-pestana-hover: #122352;
  --color-texto-oscuro: #1a1a1a;
  --color-texto-muy-suave: #cbd5e1;
  --color-fondo-claro: #f1f5f9;
  --color-fondo-muy-claro: #fafbfc;
  --color-borde-claro: #e2e8f0;

  /* Sombras y transiciones */
  --sombra: 0 2px 10px rgba(0,0,0,0.08);
  --transicion: 0.2s ease;
  --animacion-duracion: 0.6s;
  --animacion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========== KEYFRAMES ========== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse-soft {
  0%, 100% { box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(13, 148, 136, 0); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes whatsapp-glow {
  0%, 100% { box-shadow: 0 3px 12px rgba(37, 211, 102, 0.45); }
  50% { box-shadow: 0 4px 18px rgba(37, 211, 102, 0.6); }
}
@keyframes agendar-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(44, 77, 143, 0.45), 0 0 0 0 rgba(44, 77, 143, 0.25); }
  50% { box-shadow: 0 6px 24px rgba(44, 77, 143, 0.6), 0 0 0 6px rgba(44, 77, 143, 0); }
}

/* Logo móvil: Waly ≥4s → corte instantáneo → hueco → robot → corte → hueco → Waly. steps() evita interpolación. */
@keyframes logo-mobile-robot {
  0%, 33% { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -50%) scale(0.35); }
  36%, 60% { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
  63%, 100% { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -50%) scale(0.35); }
}
@keyframes logo-mobile-texto {
  0%, 32% { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
  33%, 63% { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -50%) scale(0.35); }
  64%, 100% { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
}

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

html {
}
body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  color: var(--color-texto);
  background: var(--color-fondo);
  line-height: 1.6;
  padding-top: 100px;
  overflow-x: hidden;
  min-width: 280px;
}
main {
  max-width: 100%;
}
@media (min-width: 769px) {
  body { padding-top: 112px; }
}

/* Imágenes y medios responsive (evitar desborde horizontal) */
img { max-width: 100%; vertical-align: middle; }
video, iframe { max-width: 100%; }
svg { max-width: 100%; height: auto; }
table { width: 100%; overflow-x: auto; display: block; }
@media (max-width: 360px) {
  .contenedor { padding-left: 0.75rem; padding-right: 0.75rem; }
}

a {
  color: var(--color-primario);
  text-decoration: none;
  transition: color var(--transicion);
}
a:hover { color: var(--color-primario-oscuro); }

/* Wrapper del header (doble barra fija) */
.header-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--color-blanco);
}

/* Barra superior: misma paleta que el sitio (secundario + primario) */
.topbar-one {
  width: 100%;
}
.topbar-one__container {
  width: 100%;
}
.topbar-one__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
}
.list-unstyled {
  list-style: none;
  margin: 0;
  padding: 0;
}
.topbar-one__info {
  display: flex;
  align-items: center;
  background: var(--color-secundario);
  padding: 0 0.5rem 0 0.75rem;
  flex: 1;
  min-height: 44px;
  min-width: 0;
  overflow: hidden;
}
@media (min-width: 480px) {
  .topbar-one__info { padding: 0 1.25rem 0 1.5rem; }
}
.topbar-one__info__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-blanco);
  font-size: 0.85rem;
  font-weight: 600;
}
@media (min-width: 380px) {
  .topbar-one__info__item { font-size: 0.95rem; }
}
.topbar-one__info__icon {
  color: var(--color-primario);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.topbar-one__info__ciudad {
  font-weight: 700;
}
.topbar-one__info__separador {
  color: var(--color-texto-muy-suave);
  margin: 0 0.15rem;
  font-weight: 400;
}
.topbar-one__right {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  background: var(--color-primario);
  padding: 0 0.75rem;
  min-width: 0;
  flex-shrink: 0;
}
@media (min-width: 480px) {
  .topbar-one__right { width: 20%; padding: 0 1.5rem; gap: 1.25rem; }
}
.topbar-one__right__call {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--color-blanco);
  font-weight: 700;
  padding: 0.35rem 0;
  transition: opacity 0.2s ease;
}
.topbar-one__right__call:hover {
  opacity: 0.9;
  color: var(--color-blanco);
}
.topbar-one__right__call__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,0.25);
  border-radius: 50%;
  flex-shrink: 0;
}
.topbar-one__right__call__icon .icon-telephone,
.topbar-one__right__call__icon .fa-phone {
  color: var(--color-blanco);
  font-size: 1rem;
}
.topbar-one__right__call__text {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-blanco);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
@media (min-width: 380px) {
  .topbar-one__right__call__text { font-size: 1.1rem; }
}
@media (min-width: 480px) {
  .topbar-one__right { padding: 0 1rem; min-width: 120px; }
  .topbar-one__right__call__text { font-size: 1.2rem; }
}
.topbar-one__right__whatsapp {
  color: var(--color-blanco);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.topbar-one__right__whatsapp:hover {
  color: var(--color-blanco);
  opacity: 0.9;
}


/* Barra principal: mismo lenguaje visual que hero y secciones (primario + secundario) */
.cabecera {
  height: 56px;
  background: var(--color-blanco);
  border-bottom: 1px solid var(--color-borde-claro);
  display: flex;
  align-items: stretch;
  padding: 0;
}
.cabecera__contenedor {
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
}
/* Zona logo: primario (teal) para unificar con hero y CTAs */
.cabecera__logo-zona {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1.25rem 0 1rem;
  background: var(--color-primario);
  color: var(--color-blanco);
  text-decoration: none;
  font-weight: 800;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
  min-width: 140px;
  transition: background 0.2s ease, color 0.2s ease;
}
.cabecera__logo-zona:hover {
  background: var(--color-primario-oscuro);
  color: var(--color-blanco);
}
.cabecera__logo-icono {
  font-size: 1.5rem;
  color: var(--color-blanco);
  flex-shrink: 0;
}
.cabecera__logo-lottie {
  width: 5.5rem !important;
  height: 5.5rem !important;
  min-width: 5.5rem !important;
  min-height: 5.5rem !important;
  flex-shrink: 0;
  display: block;
}
.cabecera__logo-lottie canvas,
.cabecera__logo-lottie svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}
.cabecera__logo-texto {
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-blanco);
}
.cabecera__logo-line1 {
  font-family: 'BC Gaming', 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
}

/* En móvil: logo = animación alternada robot → Waly → robot (solo uno visible) */
@media (max-width: 768px) {
  .cabecera__logo-zona {
    position: relative;
    overflow: hidden;
    gap: 0;
    min-height: 4.25rem;
    padding-right: 1.25rem;
  }
  .cabecera__logo-zona .cabecera__logo-lottie {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: center center;
    transform: translate(-50%, -50%);
    animation: logo-mobile-robot 12s steps(100, end) infinite;
  }
  .cabecera__logo-zona .cabecera__logo-texto {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: center center;
    transform: translate(-50%, -50%);
    animation: logo-mobile-texto 12s steps(100, end) infinite;
    white-space: nowrap;
  }
  .cabecera__logo-zona .cabecera__logo-line1 {
    font-size: 1.35rem;
    line-height: 1;
  }
}
.cabecera__nav-link {
  color: var(--color-secundario) !important;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cabecera__nav-link:hover { color: var(--color-primario) !important; }
.nav__separador {
  display: none;
}
@media (min-width: 901px) {
  .nav__separador {
    display: block;
    width: 2px;
    height: 1.2rem;
    background: var(--color-borde-claro);
    margin: 0 0.35rem;
    flex-shrink: 0;
  }
}
.cabecera__nav-link--pagar {
  color: var(--color-cta) !important;
  border: 1.5px solid var(--color-cta);
  border-radius: 6px;
  padding: 0.25rem 0.65rem !important;
}
.cabecera__nav-link--pagar:hover {
  background: var(--color-cta) !important;
  color: var(--color-blanco) !important;
}
.cabecera__nav-link--activo {
  color: var(--color-primario) !important;
  border-bottom: 2px solid var(--color-primario);
  padding-bottom: 2px;
}
.cabecera__flecha {
  font-size: 0.5rem;
  opacity: 0.8;
  margin-left: 2px;
}
.cabecera__cta {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.35rem;
  margin: 0.5rem 1rem 0.5rem 0;
  background: linear-gradient(135deg, var(--color-cta) 0%, #1e3a6e 100%);
  color: var(--color-blanco) !important;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  border-radius: 50px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 16px rgba(44, 77, 143, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease;
  animation: none;
}
.cabecera__cta:hover {
  animation: none;
  color: var(--color-blanco) !important;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 24px rgba(44, 77, 143, 0.55);
  filter: brightness(1.15);
  background: linear-gradient(135deg, #3a5fa8 0%, var(--color-cta) 100%);
}
.cabecera__cta i {
  font-size: 1.2em;
  line-height: 1;
}
.cabecera__cta:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 10px rgba(44, 77, 143, 0.4);
}
@media (min-width: 769px) {
  .cabecera { height: 64px; }
  .cabecera__logo-zona { padding: 0 1.75rem 0 1.5rem; min-width: 180px; clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%); }
  .cabecera__logo-icono { font-size: 1.75rem; }
  .cabecera__logo-lottie { width: 6rem !important; height: 6rem !important; min-width: 6rem !important; min-height: 6rem !important; }
  .cabecera__logo-line1 { font-size: 1.1rem; }
  .cabecera__cta {
    display: inline-flex;
    padding: 0.7rem 1.5rem;
    font-size: 1rem;
  }
  .cabecera__cta i { font-size: 1.3em; }
}
@media (min-width: 901px) {
  .cabecera__contenedor { justify-content: flex-start; }
  .cabecera__nav { flex: 1; justify-content: center; gap: 0.5rem; }
  .cabecera__nav-link { font-size: 0.85rem; padding: 0 0.6rem; }
}

.cabecera__nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding-left: 0.5rem;
}

.cabecera__nav > a {
  padding: 0.5rem 0.6rem;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}
.cabecera__nav > a:hover {
  background: rgba(13, 148, 136, 0.08);
}

/* Grupos del menú (Refrigeradores, Cocinas, Lavado, Climatizador) */
.nav__grupo {
  position: relative;
}
.nav__grupo > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.5rem 0.6rem;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav__grupo > a:hover {
  background: rgba(13, 148, 136, 0.08);
}
/* Enlaces directos dentro del dropdown (ítems del grupo) */
.dropdown > a {
  display: block;
  padding: 0.6rem 1rem;
  color: var(--color-secundario);
  font-weight: 500;
  font-size: 0.9rem;
  border-radius: 8px;
  margin: 0 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.dropdown > a:hover {
  background: rgba(13, 148, 136, 0.08);
  color: var(--color-primario);
}
.nav__reparaciones > a:not(.cabecera__nav-link)::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-left: 2px;
  opacity: 0.8;
}

/* Estilos de ítems del dropdown (compartidos móvil/escritorio) */
.dropdown__item {
  position: relative;
}
.dropdown__item > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem 0.6rem 1rem;
  color: var(--color-secundario);
  font-weight: 500;
  font-size: 0.9rem;
  border-radius: 8px;
  margin: 0 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.dropdown__item > a:hover {
  background: rgba(13, 148, 136, 0.08);
  color: var(--color-primario);
}
.dropdown__item.has-submenu > a::after {
  content: '';
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  margin-left: 8px;
  opacity: 0.7;
}
.dropdown a.dropdown__item {
  display: flex;
  align-items: center;
  padding: 0.6rem 1rem;
  margin: 0 6px;
  border-radius: 8px;
  font-size: 0.9rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.dropdown a.dropdown__item:hover {
  background: rgba(13, 148, 136, 0.08);
  color: var(--color-primario);
}

.subdropdown a {
  display: block;
  padding: 0.5rem 1rem 0.5rem 1rem;
  color: var(--color-texto);
  font-size: 0.9rem;
  border-radius: 8px;
  margin: 0 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.subdropdown a:hover {
  background: rgba(13, 148, 136, 0.08);
  color: var(--color-primario);
}

/* Hamburger móvil (visible por defecto – mobile-first, touch 44px) */
.cabecera__abrir,
.cabecera__cerrar {
  display: block;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-secundario);
  padding: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.cabecera__abrir { display: flex; }
.cabecera__cerrar { display: flex; position: absolute; top: 0.75rem; right: 0.75rem; }
@media (min-width: 901px) {
  .cabecera__abrir, .cabecera__cerrar { min-width: 0; min-height: 0; padding: 0.25rem; }
}

/* Navegación: drawer móvil por defecto */
.cabecera__nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  max-width: 85vw;
  height: 100vh;
  background: var(--color-blanco);
  flex-direction: column;
  align-items: stretch;
  padding: 4rem 1rem 1rem;
  box-shadow: -4px 0 20px rgba(0,0,0,0.1);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  gap: 0;
}
.cabecera__nav.activo { transform: translateX(0); }
.cabecera__nav > a,
.cabecera__nav .nav__grupo > a { padding: 0.6rem 1rem; }

/* Dropdown en móvil: acordeón */
.dropdown {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border: none;
  margin: 0;
  padding: 0 0 0 1rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  pointer-events: auto;
}
.nav__grupo.activo .dropdown { max-height: 500px; }
.dropdown__item.has-submenu > a::after {
  transform: rotate(90deg);
}
.subdropdown {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  margin: 0;
  padding: 0 0 0 1rem;
  box-shadow: none;
  border: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
  pointer-events: auto;
}
.dropdown__item.activo .subdropdown { max-height: 400px; }

/* Escritorio: menú horizontal y dropdown flotante */
@media (min-width: 901px) {
  .cabecera__abrir,
  .cabecera__cerrar { display: none; }
  .cabecera__nav {
    position: static;
    width: auto;
    max-width: none;
    height: auto;
    flex-direction: row;
    align-items: center;
    padding: 0;
    box-shadow: none;
    transform: none;
    overflow-y: visible;
    gap: 0.15rem;
  }
  .cabecera__nav.activo { transform: none; }
  .cabecera__nav > a {
    padding: 0.5rem 0.85rem;
    font-size: 0.95rem;
  }
  .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: -2px;
    padding-top: 6px;
    min-width: 248px;
    background: var(--color-blanco);
    border: 1px solid rgba(30, 41, 59, 0.08);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
    padding: 6px 0;
    max-height: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    z-index: 1001;
    pointer-events: none;
  }
  .nav__grupo.is-open .dropdown,
  .nav__grupo:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
    pointer-events: auto;
  }
  .dropdown__item.has-submenu > a::after { transform: none; }
  .subdropdown {
    position: absolute;
    left: 100%;
    top: -6px;
    margin-left: -4px;
    padding-left: 4px;
    min-width: 220px;
    background: var(--color-blanco);
    border: 1px solid rgba(30, 41, 59, 0.08);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
    padding: 6px 0;
    max-height: none;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    z-index: 1002;
    pointer-events: none;
  }
  .dropdown__item.is-open .subdropdown,
  .dropdown__item:hover .subdropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
    pointer-events: auto;
  }
}

/* Contenedor (mobile-first: padding cómodo en móvil) */
.contenedor {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 769px) {
  .contenedor { padding: 0 1.5rem; }
}

/* Animación entrada (al cargar) */
.animar-entrada {
  animation: fadeInUp var(--animacion-duracion) var(--animacion-ease) forwards;
}

/* Secciones que se animan al entrar en viewport (JS añade .visible) */
.seccion--animar {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s var(--animacion-ease), transform 0.7s var(--animacion-ease);
}
.seccion--animar.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero CTA (botón superior, touch-friendly en móvil) */
.hero-cta {
  background: var(--color-secundario);
  padding: 1.25rem 0;
  text-align: center;
}
.hero-cta .boton--grande {
  padding: 0.85rem 1.75rem;
  font-size: 1rem;
  border-radius: 100px;
  background: var(--color-primario);
  color: var(--color-blanco);
  font-weight: 700;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hero-cta .boton--grande:hover {
  background: var(--color-primario-oscuro);
  color: var(--color-blanco);
  transform: scale(1.05);
  animation: pulse-soft 1.5s ease infinite;
}
@media (min-width: 769px) {
  .hero-cta { padding: 2rem 0; }
  .hero-cta .boton--grande { padding: 0.9rem 2rem; font-size: 1.1rem; }
}

/* Hero con imagen de fondo (mobile-first) */
.hero {
  background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-primario-oscuro) 100%);
  color: var(--color-blanco);
  padding: 2rem 0;
  text-align: center;
  position: relative;
}
.hero--con-imagen {
  height: 48vh;
  min-height: 280px;
  display: flex;
  padding: 2.5rem 0;
  align-items: center;
  position: relative;
}
/* Sobre / sombra difuminada por debajo para leer el texto; el botón no se mueve */
.hero--con-imagen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.hero--con-imagen::after {
  display: none;
}

/* Hero específico para páginas de neveras (usa imagen distinta al principal) */
/* =====================================================
   Hero de páginas de categoría (nivel 1) — layout 2 columnas
   ===================================================== */
.hero-cat {
  background-color: #e8f5f3 !important;
  background-image:
    linear-gradient(120deg, #e8f5f3 0%, #c8e8e4 30%, #a8d8d2 60%, #d4edf5 85%, #eaf4f9 100%) !important;
  position: relative;
  overflow: hidden;
  min-height: 420px;
  height: auto !important;
}
.hero-cat::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 0% 50%, rgba(255,255,255,0.35) 0%, transparent 65%),
    radial-gradient(ellipse 40% 55% at 95% 10%, rgba(255,255,255,0.25) 0%, transparent 55%);
  pointer-events: none;
}
.hero-cat::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 35% 55% at 48% 50%, rgba(255,255,255,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.hero-cat__inner {
  display: grid;
  grid-template-columns: 1fr clamp(260px, 35vw, 420px);
  align-items: center;
  gap: 2rem;
  padding: 3.5rem 0;
  position: relative;
  z-index: 1;
}
.hero-cat__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.hero-cat__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(13,148,136,0.15);
  border: 1px solid rgba(13,148,136,0.4);
  color: #0a5c52;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
}
.hero-cat__titulo {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  color: #0a2e28;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}
.hero-cat__subtitulo {
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  color: #1a4a42;
  line-height: 1.5;
  max-width: 480px;
  margin: 0;
}
.hero-cat__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.hero-cat__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.75rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
  white-space: nowrap;
}
.hero-cat__cta--principal {
  background: var(--color-primario, #0d9488);
  color: #fff;
  box-shadow: 0 4px 20px rgba(13,148,136,0.45);
}
.hero-cat__cta--principal:hover {
  background: var(--color-primario-oscuro, #0f766e);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(13,148,136,0.55);
  color: #fff;
}
.hero-cat__cta--wa {
  background: #25d366;
  color: #fff;
  border: 1.5px solid #1db954;
}
.hero-cat__cta--wa:hover {
  background: #1db954;
  transform: translateY(-2px);
  color: #fff;
}
.hero-cat__imagen {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.hero-cat__imagen::before {
  content: '';
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13,148,136,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.hero-cat__imagen img {
  width: 100%;
  max-width: 400px;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4));
  animation: hero-cat-float 4s ease-in-out infinite;
}
@keyframes hero-cat-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

@media (max-width: 900px) {
  .hero-cat__inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 2.5rem 0 0;
  }
  .hero-cat__texto {
    align-items: center;
    padding: 0 1rem;
  }
  .hero-cat__subtitulo { max-width: 100%; }
  .hero-cat__imagen {
    max-height: 220px;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
  }
  .hero-cat__imagen img {
    max-width: 260px;
    animation: none;
  }
  .hero-cat__imagen::before { display: none; }
}

/* ===================================================== */

/* Logo de marca en el hero — páginas de nivel 2 */
.hero-cat__logo-marca-wrapper {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border-radius: 10px;
  padding: 0.45rem 1rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.hero-cat__logo-marca {
  height: 36px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  filter: none;
  opacity: 1;
  display: block;
}

/* ===================================================== */

.hero--neveras {
  padding: 2.5rem 0;
  align-items: center;
  position: relative;
}


/* Hero LG (landing neveras LG) */
.hero--neveras.hero--lg {
  min-height: 52vh;
}
@media (min-width: 769px) {
  .hero--neveras.hero--lg {
    min-height: 55vh;
  }
}

/* Hero Samsung (landing neveras Samsung): logo en el banner */
.hero--neveras.hero--samsung {
  min-height: 52vh;
}
@media (min-width: 769px) {
  .hero--neveras.hero--samsung {
    min-height: 55vh;
  }
}
.hero--samsung .hero__logo-samsung {
  margin-bottom: 1rem;
}
.hero__logo-samsung img {
  height: auto;
  max-width: 200px;
  width: 100%;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
  display: block;
  margin: 0 auto;
}
@media (min-width: 769px) {
  .hero--samsung .hero__logo-samsung { margin-bottom: 1.25rem; }
  .hero__logo-samsung img { max-width: 260px; }
}

/* Hero Whirlpool (landing neveras Whirlpool): logo en el banner */
.hero--neveras.hero--whirlpool {
  min-height: 52vh;
}
@media (min-width: 769px) {
  .hero--neveras.hero--whirlpool {
    min-height: 55vh;
  }
}
.hero--whirlpool .hero__logo-whirlpool {
  margin-bottom: 1rem;
}
.hero__logo-whirlpool img {
  height: auto;
  max-width: 200px;
  width: 100%;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
  display: block;
  margin: 0 auto;
}
@media (min-width: 769px) {
  .hero--whirlpool .hero__logo-whirlpool { margin-bottom: 1.25rem; }
  .hero__logo-whirlpool img { max-width: 260px; }
}

/* Hero Haceb (landing neveras Haceb) */
.hero--neveras.hero--haceb {
  min-height: 52vh;
}
@media (min-width: 769px) {
  .hero--neveras.hero--haceb {
    min-height: 55vh;
  }
}

/* Hero Mabe (landing neveras Mabe) */
.hero--neveras.hero--mabe {
  min-height: 52vh;
}
@media (min-width: 769px) {
  .hero--neveras.hero--mabe {
    min-height: 55vh;
  }
}

/* Hero Kalley (landing neveras Kalley) */
.hero--neveras.hero--kalley {
  min-height: 52vh;
}
@media (min-width: 769px) {
  .hero--neveras.hero--kalley {
    min-height: 55vh;
  }
}

/* Hero Abba, Challenger, Centrales, Electrolux, Panasonic, General Electric, Frigidaire, Indurama, Hisense, Hyundai */
.hero--neveras.hero--abba,
.hero--neveras.hero--challenger,
.hero--neveras.hero--centrales,
.hero--neveras.hero--electrolux,
.hero--neveras.hero--panasonic,
.hero--neveras.hero--general-electric,
.hero--neveras.hero--frigidaire,
.hero--neveras.hero--indurama,
.hero--neveras.hero--hisense,
.hero--neveras.hero--hyundai,
.hero--neveras.hero--sueco {
  min-height: 52vh;
}
@media (min-width: 769px) {
  .hero--neveras.hero--abba,
  .hero--neveras.hero--challenger,
  .hero--neveras.hero--centrales,
  .hero--neveras.hero--electrolux,
  .hero--neveras.hero--panasonic,
  .hero--neveras.hero--general-electric,
  .hero--neveras.hero--frigidaire,
  .hero--neveras.hero--indurama,
  .hero--neveras.hero--hisense,
  .hero--neveras.hero--hyundai,
  .hero--neveras.hero--sueco {
    min-height: 55vh;
  }
}

/* Destacar "neveras Whirlpool" / "neveras Haceb" / "neveras Mabe" / "neveras Kalley" en el hero: sombra + resplandor */
.hero__titulo-destacado {
  text-shadow:
    0 0 12px rgba(3, 89, 129, 0.9),
    0 4px 12px rgba(0, 0, 0, 0.5);
  display: inline-block;
  padding: 0 0.1em;
}

/* Hero LG: logo sobre el hero */
.hero--lg .hero__logo-lg {
  margin-bottom: 1rem;
}
.hero__logo-lg img {
  height: auto;
  max-width: 200px;
  width: 100%;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
  display: block;
  margin: 0 auto;
}
@media (min-width: 769px) {
  .hero--lg .hero__logo-lg {
    margin-bottom: 1.25rem;
  }
  .hero__logo-lg img {
    max-width: 260px;
  }
}

.hero__contenido {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.hero__etiqueta {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 0.5rem;
  text-shadow: 2px 8px 14px rgb(0 0 0);
  color: #ffffff;
}
.hero__titulo {
  font-size: clamp(2.6rem, 8vw, 3.5rem);
  margin-bottom: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  color: #fdffff;
}
.hero__subtitulo {
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  opacity: 0.95;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.45;
  text-shadow: 0 1px 10px rgba(0,0,0,0.3);
  color: #ffffff;
}

/* Botón del hero (CTA principal a contacto): compacto y alineado a la derecha */
.hero__botones {
  position: absolute;
  bottom: -1rem;
  left: auto;
  right: 1rem;
  transform: none;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  padding: 0;
  width: auto;
  max-width: none;
}
.hero__boton-oferta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
  background: var(--color-cta);
  color: var(--color-blanco);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 100px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 40px;
  text-align: center;
  width: auto;
  white-space: nowrap;
  max-width: calc(100vw - 2rem);
}
.hero__boton-oferta:hover {
  background: var(--color-cta-hover);
  color: var(--color-blanco);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.hero__boton--principal {
  padding: 0.55rem 1.1rem;
  font-size: 0.85rem;
}
.hero__boton--wa {
  background: #25d366;
}
.hero__boton--wa:hover {
  background: #20bd5a;
}
.hero__boton--agendar {
  background: var(--color-whatsapp);
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45), 0 0 0 1px rgba(255,255,255,0.2) inset;
  font-weight: 700;
  gap: 0.5rem;
}
.hero__boton-oferta.hero__boton--agendar:hover {
  background: #1da851;
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.55), 0 0 0 1px rgba(255,255,255,0.25) inset;
  transform: translateY(-2px) scale(1.02);
  color: var(--color-blanco);
}

/* Botón principal del hero del index — color de marca */
.hero__boton--agendar-hero {
  background: var(--color-primario);
  box-shadow: 0 4px 20px rgba(13, 148, 136, 0.45), 0 0 0 1px rgba(255,255,255,0.18) inset;
  font-weight: 700;
  gap: 0.55rem;
  padding: 0.75rem 1.6rem;
  font-size: 1rem;
  letter-spacing: 0.01em;
}
.hero__boton-oferta.hero__boton--agendar-hero:hover {
  background: var(--color-primario-oscuro);
  box-shadow: 0 6px 28px rgba(13, 148, 136, 0.55), 0 0 0 1px rgba(255,255,255,0.22) inset;
  transform: translateY(-2px) scale(1.02);
  color: var(--color-blanco);
}

/* Botón hero directo en .hero (páginas reparaciones: sin wrapper .hero__botones) */
.hero > .hero__boton-oferta {
  position: absolute;
  bottom: -1rem;
  right: 1rem;
  left: auto;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  min-height: 40px;
  width: auto;
  max-width: calc(100vw - 2rem);
  white-space: nowrap;
}
@media (min-width: 480px) {
  .hero > .hero__boton-oferta {
    bottom: -1.15rem;
    right: 1.5rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.875rem;
    min-height: 42px;
  }
}
@media (min-width: 769px) {
  .hero > .hero__boton-oferta {
    bottom: -1.35rem;
    right: 2rem;
    padding: 0.65rem 1.5rem;
    font-size: 0.95rem;
    min-height: 44px;
  }
}
@media (max-width: 379px) {
  .hero > .hero__boton-oferta {
    white-space: normal;
    line-height: 1.25;
    padding: 0.5rem 0.85rem;
    font-size: 0.78rem;
  }
}
@media (max-width: 379px) {
  .hero__boton-oferta {
    white-space: normal;
    line-height: 1.25;
    padding: 0.5rem 0.85rem;
    font-size: 0.78rem;
  }
}
@media (min-width: 480px) {
  .hero__botones {
    bottom: -1.15rem;
    right: 1.5rem;
  }
  .hero__boton-oferta {
    padding: 0.6rem 1.25rem;
    font-size: 0.875rem;
    min-height: 42px;
  }
  .hero__boton--principal {
    padding: 0.65rem 1.35rem;
    font-size: 0.9rem;
  }
}
@media (min-width: 769px) {
  .hero__botones {
    bottom: -1.35rem;
    right: 2rem;
  }
  .hero__boton-oferta {
    padding: 0.65rem 1.5rem;
    font-size: 0.95rem;
    min-height: 44px;
  }
  .hero__boton--principal {
    padding: 0.7rem 1.6rem;
    font-size: 1rem;
  }
}

/* ========== HERO CON BUSCADOR (index) ========== */
.hero--busqueda {
  height: auto;
  min-height: 600px;
  padding-bottom: 52px; /* espacio para que el buscador sobresalga */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  background: linear-gradient(120deg, #e8f5f3 0%, #c8e8e4 30%, #a8d8d2 60%, #d4edf5 85%, #eaf4f9 100%) !important;
}

/* Asegura que ::before y ::after cubran todo incluyendo el padding inferior */
.hero--busqueda::before,
.hero--busqueda::after {
  bottom: 0;
}

/* Anular overlay oscuro heredado de hero--con-imagen en el index */
.hero--busqueda.hero--con-imagen::before {
  background: none;
}

/* Textos oscuros en el hero del index (fondo claro) */
.hero--busqueda .hero__etiqueta,
.hero--busqueda .hero__col--texto .hero__etiqueta {
  color: #0d5c4e;
  text-shadow: none;
  opacity: 1;
}

.hero--busqueda .hero__col--texto .hero__etiqueta::before {
  background: #0d9488;
}

.hero--busqueda .hero__titulo,
.hero--busqueda .hero__col--texto .hero__titulo {
  color: #0a2e28;
  text-shadow: none;
}

.hero--busqueda .hero__subtitulo,
.hero--busqueda .hero__col--texto .hero__subtitulo {
  color: #1a4a42;
  text-shadow: none;
  opacity: 1;
}

.hero--busqueda__contenido {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr clamp(260px, 33vw, 420px);
  align-items: center;
  gap: 3rem;
  padding-top: 4rem;
  padding-bottom: 2.5rem;
  text-align: left;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(2rem, 5vw, 5rem);
  padding-right: clamp(1rem, 3vw, 2rem);
  width: 100%;
  box-sizing: border-box;
}

/* Columna derecha: animación Lottie */
.hero__col--lottie {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

.hero__lottie {
  width: 100%;
  max-width: 420px;
  height: 400px;
  filter: drop-shadow(0 8px 32px rgba(0,0,0,0.15));
}

@media (max-width: 1024px) {
  .hero--busqueda__contenido {
    grid-template-columns: 1fr clamp(220px, 30vw, 320px);
  }
  .hero__lottie {
    height: 320px;
    max-width: 320px;
  }
}

@media (max-width: 768px) {
  .hero--busqueda__contenido {
    grid-template-columns: 1fr;
    padding-left: clamp(1.5rem, 6vw, 3rem);
    padding-right: clamp(1.5rem, 6vw, 3rem);
  }
  .hero__col--lottie {
    display: none;
  }
}

.hero--busqueda .hero__contenido {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

.hero--busqueda .hero__subtitulo {
  margin: 0 0 1.75rem;
  text-align: left;
}

.hero--busqueda .hero__etiqueta {
  text-align: left;
}

.hero__col--texto {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.hero__col--texto .hero__etiqueta {
  text-align: left;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  opacity: 0.85;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hero__col--texto .hero__etiqueta::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background: #4ade80;
  border-radius: 2px;
  flex-shrink: 0;
}

.hero__col--texto .hero__titulo {
  text-align: left;
  font-size: clamp(3.2rem, 6vw, 4.4rem);
  line-height: 1.15;
  margin-bottom: 1rem;
}

.hero__col--texto .hero__subtitulo {
  text-align: left;
  margin: 0 0 1.75rem;
  max-width: 480px;
  font-size: clamp(1rem, 2vw, 1.2rem);
  opacity: 0.88;
}

.hero__boton--inline {
  position: static !important;
  display: inline-flex !important;
  bottom: auto !important;
  right: auto !important;
  margin-bottom: 2.25rem;
  padding: 0.7rem 1.5rem;
  font-size: 0.95rem;
}


/* Buscador — sobresale hacia abajo desde el hero */
.hero__buscador {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(50%);
  z-index: 20;
  padding: 0 clamp(4.5rem, 20vw, 22rem);
  box-sizing: border-box;
}

.hero__buscador__inner {
  background: #ffffff;
  border-radius: 16px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.14),
    0 4px 16px rgba(0, 0, 0, 0.07);
  display: flex;
  align-items: stretch;
  overflow: visible;
  min-height: 96px;
  }

.hero__buscador__campo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 1.5rem;
  min-width: 0;
  cursor: pointer;
  transition: background 0.15s;
  background: #ffffff;
}

.hero__buscador__campo:hover {
  background: #f8fafc;
}

.hero__buscador__campo:focus-within {
  background: #f0f9ff;
}

.hero__buscador__label {
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94a3b8;
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  transition: color 0.15s;
}

.hero__buscador__campo:focus-within .hero__buscador__label {
  color: #0ea5e9;
}

.hero__buscador__label i {
  font-size: 0.65rem;
  width: 12px;
  text-align: center;
  color: #0ea5e9;
}

.hero__buscador__select {
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.97rem;
  font-weight: 600;
  color: #0f172a;
  padding: 0;
  cursor: pointer;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23cbd5e1' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.25rem center;
  padding-right: 1.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.hero__buscador__select:focus {
  color: #0284c7;
}

.hero__buscador__sep {
  width: 1px;
  background: #e9eef4;
  flex-shrink: 0;
  align-self: stretch;
  margin: 1.1rem 0;
}

.hero__buscador__btn {
  flex-shrink: 0;
  background: #0f172a;
  color: #ffffff;
  border: none;
  padding: 0 2.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
  transition: background 0.2s ease;
  min-height: 96px;
  letter-spacing: 0.03em;
  border-radius: 0 16px 16px 0;
}

/* Bordes redondeados izquierda en el primer trigger */
.hb-campo:first-child > .hb-trigger {
  border-radius: 16px 0 0 16px;
}

.hero__buscador__btn:hover {
  background: #0284c7;
}

.hero__buscador__btn i,
.hero__buscador__btn span {
  line-height: 1;
}

.hero__buscador__btn:active {
  transform: scale(0.98);
}

/* ---- Dropdowns personalizados del buscador (hb = hero buscador) ---- */
.hb-campo {
  flex: 1;
  position: relative;
  min-width: 0;
}

.hb-trigger {
  width: 100%;
  height: 100%;
  min-height: 96px;
  background: #ffffff;
  border: none;
  padding: 0.95rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  cursor: pointer;
  gap: 0.2rem;
  transition: background 0.15s;
  text-align: left;
}

.hb-trigger:hover {
  background: #f8fafc;
}

.hb-campo.hb-abierto > .hb-trigger {
  background: #f0f9ff;
}

.hb-trigger__label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  transition: color 0.15s;
  width: 100%;
}

.hb-trigger__label i {
  color: #0ea5e9;
  font-size: 0.65rem;
  width: 12px;
  text-align: center;
}

.hb-campo.hb-abierto .hb-trigger__label {
  color: #0ea5e9;
}

.hb-trigger__valor {
  font-size: 1.08rem;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 1.5rem);
  line-height: 1.3;
  transition: color 0.15s;
}

.hb-trigger__valor.hb-placeholder {
  color: #94a3b8;
  font-weight: 500;
}

.hb-trigger__arrow {
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.65rem;
  color: #cbd5e1;
  transition: transform 0.22s ease, color 0.15s;
  pointer-events: none;
}

.hb-campo.hb-abierto .hb-trigger__arrow {
  transform: translateY(-50%) rotate(180deg);
  color: #0ea5e9;
}

/* Menú desplegable */
.hb-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.14),
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.06);
  z-index: 500;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top left;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  pointer-events: none;
}

.hb-campo.hb-abierto .hb-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.hb-lista {
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #e2e8f0 transparent;
}

.hb-lista::-webkit-scrollbar {
  width: 4px;
}
.hb-lista::-webkit-scrollbar-track {
  background: transparent;
}
.hb-lista::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 4px;
}

.hb-opcion {
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #334155;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}

.hb-opcion i {
  font-size: 0.78rem;
  color: #94a3b8;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

.hb-opcion:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.hb-opcion:hover i {
  color: #0ea5e9;
}

.hb-opcion.hb-seleccionado {
  background: #eff6ff;
  color: #0284c7;
  font-weight: 600;
}

.hb-opcion.hb-seleccionado i {
  color: #0284c7;
}

.hb-opcion.hb-seleccionado::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.65rem;
  margin-left: auto;
  color: #0284c7;
}

/* ──────────────────────────────────────────────
   Calendario emergente (hb-calendario)
────────────────────────────────────────────── */
.hb-campo--fecha {
  position: relative;
}

.hb-campo--fecha .hb-trigger {
  border-radius: 0;
}

.hb-calendario {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
  padding: 1.25rem 1.1rem 1.1rem;
  z-index: 700;
  min-width: 290px;
  width: 310px;
  animation: calEntrada 0.18s ease;
}

@keyframes calEntrada {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.hb-cal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.hb-cal__mes {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.02em;
}

.hb-cal__nav {
  background: none;
  border: none;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #475569;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
  padding: 0;
}

.hb-cal__nav:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.hb-cal__semana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 0.35rem;
}

.hb-cal__semana span {
  font-size: 0.68rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0;
}

.hb-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.hb-cal__dia {
  background: none;
  border: none;
  cursor: pointer;
  aspect-ratio: 1;
  border-radius: 50%;
  font-size: 0.82rem;
  color: #0f172a;
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.hb-cal__dia:not([disabled]):hover {
  background: #e0f2fe;
  color: #0284c7;
}

.hb-cal__dia--hoy {
  border: 2px solid #0284c7;
  color: #0284c7;
  font-weight: 700;
}

.hb-cal__dia--seleccionado {
  background: #0f172a !important;
  color: #fff !important;
  font-weight: 700;
}

.hb-cal__dia--seleccionado:hover {
  background: #1e293b !important;
}

.hb-cal__dia--pasado {
  opacity: 0.32;
  pointer-events: none;
}

.hb-cal__dia--vacio {
  pointer-events: none;
}

/* Responsive dropdowns */
@media (max-width: 960px) {
  .hb-campo {
    width: 100%;
  }
  .hb-trigger {
    min-height: 60px;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
  }
  .hb-trigger__label {
    min-width: 110px;
    flex-shrink: 0;
  }
  .hb-trigger__valor {
    flex: 1;
    max-width: none;
  }
  .hb-trigger__arrow {
    position: static;
    transform: none;
    margin-left: auto;
    flex-shrink: 0;
  }
  .hb-campo.hb-abierto .hb-trigger__arrow {
    transform: rotate(180deg);
  }
  .hb-menu {
    left: 0;
    right: 0;
    min-width: 0;
    width: 100%;
    top: 100%;
    border-radius: 0 0 12px 12px;
  }
}

/* Sección inmediatamente después del hero con buscador necesita espacio extra */
.hero--busqueda + section,
.hero--busqueda + .seccion {
  padding-top: calc(2.5rem + 40px);
}

/* Responsive buscador */
@media (max-width: 960px) {
  .hero--busqueda {
    min-height: 540px;
    padding-bottom: 0;
  }
  .hero__buscador {
    position: static;
    transform: none;
    padding: 0 1rem 1.5rem;
  }
  .hero__buscador__inner {
    flex-direction: column;
    border-radius: 16px;
    min-height: auto;
    overflow: visible;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  }
  .hero__buscador__campo {
    border-radius: 0;
    padding: 0.85rem 1.25rem;
  }
  .hero__buscador__campo:focus-within {
    border-radius: 0;
    box-shadow: none;
    background: #f0f9ff;
  }
  .hero__buscador__sep {
    width: auto;
    height: 1px;
    background: #f1f5f9;
    margin: 0;
    align-self: auto;
  }
  .hero__buscador__btn {
    min-height: 56px;
    justify-content: center;
    border-radius: 0 0 16px 16px;
  }
  .hero--busqueda + section,
  .hero--busqueda + .seccion {
    padding-top: 2.5rem;
  }
}

@media (max-width: 600px) {
  .hero--busqueda {
    min-height: 460px;
  }
  .hero--busqueda__contenido {
    padding-top: 2.5rem;
    padding-bottom: 2rem;
  }
  .hero__col--texto .hero__titulo {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
  }
  .hero__boton--inline {
    margin-bottom: 1.5rem;
    width: 100%;
    justify-content: center;
  }
}

/* ========== PÁGINA QUIÉNES SOMOS ========== */
.hero--quienes {
  padding: 3rem 0;
  min-height: 42vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.hero--quienes__deco {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(255,255,255,0.06) 0%, transparent 40%);
  pointer-events: none;
}
.hero--quienes__deco::before,
.hero--quienes__deco::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  pointer-events: none;
}
.hero--quienes__deco::before {
  width: 280px;
  height: 280px;
  top: -80px;
  right: -60px;
}
.hero--quienes__deco::after {
  width: 160px;
  height: 160px;
  bottom: -40px;
  left: -30px;
}
.hero--quienes__contenido { position: relative; z-index: 1; }
.hero--quienes__etiqueta {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 0.5rem;
}
.hero--quienes__titulo {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  margin-bottom: 0.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.hero--quienes__subtitulo {
  font-size: 1.05rem;
  opacity: 0.95;
  max-width: 520px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .hero--quienes { padding: 4rem 0; min-height: 45vh; }
}

/* Bloque Nuestra empresa */
.empresa-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
.empresa-block__titulo-zona {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.empresa-block__icono-titulo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-primario-oscuro) 100%);
  color: var(--color-blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.3);
}
.empresa-block__titulo-zona .seccion__titulo { margin: 0; }
.empresa-block__texto p {
  color: var(--color-texto);
  line-height: 1.65;
  margin-bottom: 1rem;
}
.empresa-block__texto p:last-of-type { margin-bottom: 1.25rem; }
.empresa-block__puntos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.empresa-block__pill {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primario);
  background: rgba(13, 148, 136, 0.1);
  border-radius: 100px;
  border: 1px solid rgba(13, 148, 136, 0.25);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.empresa-block__pill:hover {
  background: rgba(13, 148, 136, 0.16);
  border-color: var(--color-primario);
  transform: translateY(-1px);
}
.empresa-block__destacado {
  position: relative;
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.1) 0%, rgba(13, 148, 136, 0.05) 100%);
  border-left: 4px solid var(--color-primario);
  border-radius: 0 16px 16px 0;
  padding: 1.75rem 1.5rem 1.75rem 2.5rem;
  box-shadow: 0 4px 20px rgba(13, 148, 136, 0.08);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.empresa-block__destacado:hover {
  box-shadow: 0 8px 28px rgba(13, 148, 136, 0.12);
  border-left-color: var(--color-primario-oscuro);
}
.empresa-block__quote-icon {
  position: absolute;
  top: 1.25rem;
  left: 1rem;
  font-size: 1.25rem;
  color: var(--color-primario);
  opacity: 0.5;
}
.empresa-block__etiqueta-frase {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primario);
  margin: 0 0 0.5rem;
}
.empresa-block__frase {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-secundario);
  font-style: normal;
  margin: 0;
  line-height: 1.55;
}
@media (min-width: 768px) {
  .empresa-block {
    grid-template-columns: 1.2fr 1fr;
    gap: 2.5rem;
  }
  .empresa-block__destacado { padding: 2rem 1.75rem 2rem 3rem; }
  .empresa-block__quote-icon { top: 1.5rem; left: 1.25rem; font-size: 1.35rem; }
  .empresa-block__frase { font-size: 1.2rem; }
  .empresa-block__etiqueta-frase { margin-bottom: 0.6rem; }
}

/* Sección con fondo claro */
.seccion--fondo-claro {
  background: var(--color-fondo-claro);
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: 1rem;
  padding-right: 1rem;
}
.seccion--fondo-claro .contenedor { max-width: 1300px; margin: 0 auto; }
@media (min-width: 768px) {
  .seccion--fondo-claro { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* Valores (Quiénes somos) */
.valores-quienes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.valores-quienes__card {
  background: var(--color-blanco);
  border-radius: 16px;
  padding: 2rem 1.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  border: 1px solid var(--color-borde-claro);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
}
.valores-quienes__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--color-primario);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.35s var(--animacion-ease);
}
.valores-quienes__card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.1);
  border-color: var(--color-primario);
}
.valores-quienes__card:hover::before { transform: scaleY(1); }
.valores-quienes__icono {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-primario-oscuro) 100%);
  color: var(--color-blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
  transition: transform 0.3s ease;
}
.valores-quienes__card:hover .valores-quienes__icono {
  transform: scale(1.08) rotate(-3deg);
}
.valores-quienes__titulo {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-secundario);
  margin: 0 0 0.5rem;
}
.valores-quienes__texto {
  font-size: 0.95rem;
  color: var(--color-texto);
  line-height: 1.55;
  margin: 0;
}
@media (min-width: 768px) {
  .valores-quienes {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
  }
  .valores-quienes__card { padding: 2rem 1.75rem; }
}
.seccion--animar .valores-quienes__card { opacity: 0; transform: translateY(24px); }
.seccion--animar.visible .valores-quienes__card {
  animation: fadeInUp 0.5s var(--animacion-ease) forwards;
}
.seccion--animar.visible .valores-quienes__card:nth-child(1) { animation-delay: 0.08s; }
.seccion--animar.visible .valores-quienes__card:nth-child(2) { animation-delay: 0.18s; }
.seccion--animar.visible .valores-quienes__card:nth-child(3) { animation-delay: 0.28s; }

/* CTA final Quiénes somos */
.cta-quienes {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: linear-gradient(135deg, var(--color-secundario) 0%, var(--color-secundario-oscuro) 100%);
  border-radius: 20px;
  color: var(--color-blanco);
}
.cta-quienes__titulo {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  color: var(--color-blanco);
}
.cta-quienes__texto {
  font-size: 1rem;
  opacity: 0.95;
  margin: 0 0 1.5rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.cta-quienes__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}
.cta-quienes__btn {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-quienes__btn:hover { transform: scale(1.05); }
.cta-quienes .boton--whatsapp {
  background: var(--color-whatsapp);
  color: var(--color-blanco);
  border: none;
}
.cta-quienes .boton--whatsapp:hover {
  background: #1da851;
  color: var(--color-blanco);
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
}
.cta-quienes .boton--primario {
  background: var(--color-blanco);
  color: var(--color-secundario);
  border: none;
}
.cta-quienes .boton--primario:hover {
  background: var(--color-fondo-claro);
  color: var(--color-secundario);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
@media (min-width: 768px) {
  .cta-quienes { padding: 3rem 2rem; }
  .cta-quienes__titulo { font-size: 1.75rem; }
}

/* ========== PÁGINA CONTACTO ========== */
.hero--contacto {
  padding: 3rem 0;
  min-height: 42vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.hero--contacto__deco {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 30%, rgba(255,255,255,0.1) 0%, transparent 45%),
              radial-gradient(circle at 20% 80%, rgba(255,255,255,0.06) 0%, transparent 40%);
  pointer-events: none;
}
.hero--contacto__deco::before,
.hero--contacto__deco::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  pointer-events: none;
}
.hero--contacto__deco::before {
  width: 320px;
  height: 320px;
  top: -100px;
  left: -80px;
}
.hero--contacto__deco::after {
  width: 180px;
  height: 180px;
  bottom: -50px;
  right: -40px;
}
.hero--contacto__contenido { position: relative; z-index: 1; }
.hero--contacto__etiqueta {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 0.5rem;
}
.hero--contacto__titulo {
  font-size: clamp(2rem, 6vw, 3rem);
  margin-bottom: 0.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.hero--contacto__subtitulo {
  font-size: 1.05rem;
  opacity: 0.95;
  max-width: 540px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .hero--contacto { padding: 4rem 0; min-height: 45vh; }
}

/* Grid datos de contacto */
.contacto-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.contacto-grid__card {
  background: var(--color-blanco);
  border: 1px solid var(--color-borde-claro);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contacto-grid__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.08);
  border-color: var(--color-primario);
}
.contacto-grid__card--wa:hover { border-color: var(--color-whatsapp); box-shadow: 0 14px 36px rgba(37, 211, 102, 0.2); }
.contacto-grid__icono {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(13, 148, 136, 0.12);
  color: var(--color-primario);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 1rem;
  transition: transform 0.3s ease, background 0.3s ease;
}
.contacto-grid__card--wa .contacto-grid__icono {
  background: rgba(37, 211, 102, 0.15);
  color: var(--color-whatsapp);
}
.contacto-grid__card:hover .contacto-grid__icono {
  transform: scale(1.1);
  background: rgba(13, 148, 136, 0.2);
}
.contacto-grid__card--wa:hover .contacto-grid__icono {
  background: rgba(37, 211, 102, 0.25);
}
.contacto-grid__titulo {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-secundario);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.35rem;
}
.contacto-grid__valor {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-texto-oscuro);
  margin: 0 0 0.25rem;
}
.contacto-grid__hint {
  font-size: 0.8rem;
  color: var(--color-texto-suave);
}
@media (min-width: 600px) {
  .contacto-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem; }
}
@media (min-width: 1024px) {
  .contacto-grid { grid-template-columns: repeat(4, 1fr); }
}
.seccion--animar .contacto-grid__card { opacity: 0; transform: translateY(20px); }
.seccion--animar.visible .contacto-grid__card {
  animation: fadeInUp 0.5s var(--animacion-ease) forwards;
}
.seccion--animar.visible .contacto-grid__card:nth-child(1) { animation-delay: 0.05s; }
.seccion--animar.visible .contacto-grid__card:nth-child(2) { animation-delay: 0.12s; }
.seccion--animar.visible .contacto-grid__card:nth-child(3) { animation-delay: 0.19s; }
.seccion--animar.visible .contacto-grid__card:nth-child(4) { animation-delay: 0.26s; }

/* ¿Qué necesitas? Acciones rápidas (página contacto) */
.pagina-contacto .seccion--fondo-claro .contenedor { max-width: 1300px; margin: 0 auto; }
.contacto-acciones {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.contacto-acciones__card {
  background: var(--color-blanco);
  border-radius: 16px;
  padding: 2rem 1.5rem;
  border: 1px solid var(--color-borde-claro);
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.contacto-acciones__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
  border-color: var(--color-primario);
}
.contacto-acciones__card:hover .contacto-acciones__cta { color: var(--color-primario); gap: 0.5rem; }
.contacto-acciones__icono {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-primario-oscuro) 100%);
  color: var(--color-blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1rem;
  transition: transform 0.3s ease;
}
.contacto-acciones__card:hover .contacto-acciones__icono { transform: scale(1.08); }
.contacto-acciones__titulo {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-secundario);
  margin: 0 0 0.5rem;
}
.contacto-acciones__texto {
  font-size: 0.95rem;
  color: var(--color-texto);
  line-height: 1.5;
  margin: 0 0 1rem;
  flex-grow: 1;
}
.contacto-acciones__cta {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primario);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.2s ease, gap 0.2s ease;
}
.contacto-acciones__cta i { font-size: 0.75rem; }
@media (min-width: 768px) {
  .contacto-acciones {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
  }
  .contacto-acciones__card { padding: 2rem 1.75rem; }
}
.seccion--animar .contacto-acciones__card { opacity: 0; transform: translateY(20px); }
.seccion--animar.visible .contacto-acciones__card {
  animation: fadeInUp 0.5s var(--animacion-ease) forwards;
}
.seccion--animar.visible .contacto-acciones__card:nth-child(1) { animation-delay: 0.08s; }
.seccion--animar.visible .contacto-acciones__card:nth-child(2) { animation-delay: 0.18s; }
.seccion--animar.visible .contacto-acciones__card:nth-child(3) { animation-delay: 0.28s; }

/* CTA principal contacto */
.contacto-cta {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-primario-oscuro) 100%);
  border-radius: 20px;
  color: var(--color-blanco);
}
.contacto-cta__titulo {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  color: var(--color-blanco);
}
.contacto-cta__texto {
  font-size: 1rem;
  opacity: 0.95;
  line-height: 1.55;
  margin: 0;
  max-width: 560px;
}
.contacto-cta__boton {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 12px;
  text-decoration: none;
  background: var(--color-whatsapp);
  color: var(--color-blanco);
  border: none;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.contacto-cta__boton:hover {
  background: #1da851;
  color: var(--color-blanco);
  transform: scale(1.05);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5);
}
@media (min-width: 768px) {
  .contacto-cta {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    padding: 2.5rem 2.5rem;
    gap: 2rem;
  }
  .contacto-cta__contenido { flex: 1; max-width: 520px; }
  .contacto-cta__titulo { font-size: 1.6rem; }
}

/* ===== Imagen del electrodoméstico en el formulario ===== */
.form-agendar__servicio-layout {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.form-agendar__servicio-img {
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  background: var(--color-acento-claro);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1.5px solid rgba(13,148,136,0.15);
}

.form-agendar__servicio-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  transition: opacity 0.3s ease;
}

.form-agendar__servicio-img__placeholder {
  font-size: 2rem;
  color: var(--color-primario);
  opacity: 0.4;
}

.form-agendar__servicio-layout .form-agendar__grid {
  flex: 1;
  min-width: 0;
}

@media (max-width: 480px) {
  .form-agendar__servicio-layout {
    flex-direction: column;
    gap: 0.75rem;
  }
  .form-agendar__servicio-img {
    width: 70px;
    height: 70px;
  }
}

/* ===== Tarjeta resumen de servicio seleccionado ===== */
.servicio-card-resumen {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--color-acento-claro);
  border: 1.5px solid rgba(13,148,136,0.18);
  border-radius: 12px;
  padding: 1rem;
}
.servicio-card-resumen__img {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: #fff;
  border-radius: 10px;
  border: 1.5px solid rgba(13,148,136,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.servicio-card-resumen__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.servicio-card-resumen__placeholder {
  font-size: 1.6rem;
  color: var(--color-primario);
  opacity: 0.35;
}
.servicio-card-resumen__info {
  flex: 1;
  min-width: 0;
}
.servicio-card-resumen__nombre {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-texto, #1a1a2e);
  margin: 0 0 0.4rem;
  line-height: 1.3;
}
.servicio-card-resumen__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
}
.servicio-card-resumen__chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(13,148,136,0.25);
  color: var(--color-primario);
}
.servicio-card-resumen__chip--cat {
  background: var(--color-primario);
  color: #fff;
  border-color: var(--color-primario);
}
.servicio-card-resumen__codigo {
  font-size: 0.75rem;
  color: var(--color-texto-suave);
  margin: 0;
}
.servicio-card-resumen__cambiar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primario);
  background: transparent;
  border: 1.5px solid var(--color-primario);
  border-radius: 7px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.servicio-card-resumen__cambiar:hover {
  background: var(--color-primario);
  color: #fff;
}
@media (max-width: 480px) {
  .servicio-card-resumen {
    flex-wrap: wrap;
  }
  .servicio-card-resumen__cambiar {
    width: 100%;
    justify-content: center;
  }
}

/* ===== Layout split de agendamiento (legacy — no se usa) ===== */
.agendar-hero-split {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

@media (min-width: 960px) {
  .agendar-hero-split {
    grid-template-columns: 420px 1fr;
    min-height: 100vh;
  }
}

.agendar-hero-split__panel--info {
  background: linear-gradient(160deg, var(--color-secundario) 0%, #0f2040 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2.5rem;
  gap: 1.5rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

@media (max-width: 959px) {
  .agendar-hero-split__panel--info {
    position: static;
    height: auto;
    padding: 2.5rem 1.5rem 1.5rem;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
    justify-content: flex-start;
  }
}

.agendar-hero-split__ilustracion {
  width: 100%;
  max-width: 280px;
  flex-shrink: 0;
}

@media (max-width: 959px) {
  .agendar-hero-split__ilustracion {
    width: 140px;
    max-width: 140px;
  }
}

.agendar-hero-split__ilustracion svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,0.25));
}

.agendar-hero-split__texto {
  width: 100%;
}

.agendar-hero-split__etiqueta {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primario);
  margin: 0 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.agendar-hero-split__titulo {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 0.75rem;
}

@media (max-width: 959px) {
  .agendar-hero-split__titulo { font-size: 1.6rem; }
}

.agendar-hero-split__subtitulo {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  margin: 0 0 1.5rem;
}

.agendar-hero-split__beneficios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.agendar-hero-split__beneficios li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.85);
}

.agendar-hero-split__beneficios li i {
  color: var(--color-primario);
  font-size: 0.95rem;
  flex-shrink: 0;
}

.agendar-hero-split__panel--form {
  background: #f8fafc;
  padding: 3rem 2rem;
  overflow-y: auto;
}

@media (max-width: 959px) {
  .agendar-hero-split__panel--form {
    padding: 1.5rem 1rem;
  }
}

/* ===== Formulario de agendamiento ===== */
.pagina-agendar .seccion--animar .form-agendar-wrap { opacity: 0; transform: translateY(20px); }
.pagina-agendar .seccion--animar.visible .form-agendar-wrap {
  animation: fadeInUp 0.5s var(--animacion-ease) forwards;
}
/* Quitar padding del seccion interno del panel form */
.agendar-hero-split__panel--form .seccion {
  padding: 0;
}
.form-agendar-wrap {
  max-width: 800px;
  margin: 0 auto;
  background: var(--color-blanco);
  border-radius: 20px;
  padding: 2rem 1.75rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  border: 1px solid var(--color-borde-claro);
}
.form-agendar__grupo {
  margin-bottom: 1.75rem;
}
.form-agendar__grupo:last-of-type { margin-bottom: 1.25rem; }
.form-agendar__subtitulo {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-primario);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 1rem;
  padding: 0.4rem 0.75rem;
  background: var(--color-acento-claro);
  border-radius: 6px;
  display: inline-block;
}
.form-agendar__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 600px) {
  .form-agendar__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .form-agendar__grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .form-agendar__grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .form-agendar__campo--ancho {
    grid-column: 1 / -1;
  }
}
.form-agendar__hint-servicio {
  font-size: 0.875rem;
  color: var(--color-texto-suave);
  margin-bottom: 0.75rem;
}
.form-agendar__campo input[readonly] {
  background: var(--color-fondo-claro);
  cursor: default;
}

/* ===== Bloqueo del formulario hasta confirmar electrodoméstico ===== */
.form-agendar-bloqueado {
  position: relative;
  max-height: 130px;
  overflow: hidden;
  opacity: 0.5;
  filter: blur(2px);
  pointer-events: none;
  user-select: none;
  transition: max-height 0.65s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.55s ease,
              filter 0.55s ease;
}
.form-agendar-bloqueado::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.95));
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.form-agendar-bloqueado--activo {
  max-height: 3000px;
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  user-select: auto;
}
.form-agendar-bloqueado--activo::after {
  opacity: 0;
  pointer-events: none;
}

/* ===== Wizard de pasos del formulario ===== */
.form-pasos-indicador {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 2rem;
}
.form-paso-ind {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  position: relative;
}
.form-paso-ind__num {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-borde-claro);
  color: var(--color-texto-suave);
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-borde-claro);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.form-paso-ind__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-texto-suave);
  text-align: center;
  white-space: nowrap;
  transition: color 0.25s;
}
.form-paso-ind--activo .form-paso-ind__num {
  background: var(--color-primario);
  color: #fff;
  border-color: var(--color-primario);
}
.form-paso-ind--activo .form-paso-ind__label {
  color: var(--color-primario);
}
.form-paso-ind--completo .form-paso-ind__num {
  background: var(--color-exito, #16a34a);
  color: #fff;
  border-color: var(--color-exito, #16a34a);
}
.form-paso-ind--completo .form-paso-ind__label {
  color: var(--color-exito, #16a34a);
}
.form-paso-ind__linea {
  flex: 1;
  height: 2px;
  min-width: 3rem;
  max-width: 5rem;
  background: var(--color-borde-claro);
  margin: 0 0.5rem;
  margin-bottom: 1.25rem;
  transition: background 0.25s;
}
.form-paso-ind__linea--activa {
  background: var(--color-primario);
}

/* Contenedores de cada paso */
.form-paso[hidden] { display: none; }

/* Navegación de pasos */
.form-paso__nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
}
.form-paso__nav--derecha {
  justify-content: flex-end;
}
.form-paso__nav-derecha {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

/* Botón secundario (Anterior) */
.boton--secundario {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid var(--color-borde-claro);
  background: transparent;
  color: var(--color-texto-suave);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.boton--secundario:hover {
  border-color: var(--color-primario);
  color: var(--color-primario);
  background: var(--color-acento-claro);
}

/* ===== Widget de ubicación con mapa (Paso 2) ===== */

/* Animación de pulso para el botón de ubicación automática */
@keyframes ubicacion-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(21, 101, 192, 0.45);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(21, 101, 192, 0);
  }
}

/* Botón GPS debajo del mapa — fondo color, letra blanca, con pulso */
.ubicacion-widget__gps-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 1rem 1.25rem;
  background: var(--color-primario, #1565c0);
  color: #fff;
  border: 2px solid var(--color-primario, #1565c0);
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s, opacity 0.2s;
}
.ubicacion-widget__gps-top--pulse {
  animation: ubicacion-pulse 1.8s ease-in-out infinite;
}
.ubicacion-widget__gps-top--pulse:hover,
.ubicacion-widget__gps-top--pulse:active {
  animation: none;
  box-shadow: 0 4px 14px rgba(21, 101, 192, 0.35);
}
.ubicacion-widget__gps-top:hover {
  background: #0d47a1;
  color: #fff;
  border-color: #0d47a1;
  transform: translateY(-1px);
}
.ubicacion-widget__gps-top:active {
  transform: scale(0.98);
}
.ubicacion-widget__gps-top:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  animation: none;
}

.ubicacion-widget {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.ubicacion-widget__buscador {
  position: relative;
}

.ubicacion-widget__buscar-icono {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-texto-suave);
  font-size: 0.9rem;
  pointer-events: none;
  z-index: 1;
}

.ubicacion-widget__input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  border: 1.5px solid var(--color-borde-claro);
  border-radius: 10px;
  font-size: 0.95rem;
  color: var(--color-texto, #1a1a2e);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.ubicacion-widget__input:focus {
  outline: none;
  border-color: var(--color-primario);
  box-shadow: 0 0 0 3px rgba(21,101,192,0.1);
}

.ubicacion-widget__sugerencias {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  border: 1.5px solid var(--color-borde-claro);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  list-style: none;
  margin: 0;
  padding: 0.3rem 0;
  max-height: 220px;
  overflow-y: auto;
}

.ubicacion-widget__sugerencias li {
  padding: 0.65rem 1rem;
  font-size: 0.875rem;
  color: var(--color-texto, #1a1a2e);
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  line-height: 1.4;
  transition: background 0.15s;
}

.ubicacion-widget__sugerencias li:hover,
.ubicacion-widget__sugerencias li[aria-selected="true"] {
  background: var(--color-acento-claro);
}

.ubicacion-widget__sugerencias li i {
  color: var(--color-primario);
  margin-top: 2px;
  flex-shrink: 0;
}

.ubicacion-widget__mapa-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.13);
}

.ubicacion-widget__mapa {
  height: 300px;
  width: 100%;
  display: block;
}

/* Atribución Leaflet discreta */
.ubicacion-widget__mapa .leaflet-control-attribution {
  font-size: 9px;
  opacity: 0.6;
  background: rgba(255,255,255,0.7);
  border-radius: 4px 0 0 0;
}

.ubicacion-widget__gps {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 1000;
  width: 40px;
  height: 40px;
  background: #fff;
  border: 1.5px solid var(--color-borde-claro);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-primario);
  font-size: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: background 0.2s, color 0.2s;
}

.ubicacion-widget__gps:hover {
  background: var(--color-primario);
  color: #fff;
  border-color: var(--color-primario);
}

/* Campo de dirección visible y editable (se llena desde el mapa) */
.ubicacion-widget__campo-direccion label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--color-texto, #1a1a2e);
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
}

.ubicacion-widget__campo-direccion label i {
  color: var(--color-primario);
  font-size: 0.95rem;
}

.ubicacion-widget__campo-direccion input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 1rem;
  border: 2px solid #86efac;
  border-radius: 10px;
  font-size: 0.95rem;
  background: #f0fdf4;
  color: #166534;
  font-weight: 500;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.ubicacion-widget__campo-direccion input[type="text"]:focus {
  outline: none;
  border-color: #16a34a;
  background: #fff;
  color: var(--color-texto, #1a1a2e);
  box-shadow: 0 0 0 3px rgba(22,163,74,0.12);
}

/* Animación al llenarse desde el mapa */
.ubicacion-widget__input--llenado {
  animation: dir-flash 1.2s ease;
}

@keyframes dir-flash {
  0%   { background: #bbf7d0; border-color: #16a34a; }
  60%  { background: #bbf7d0; border-color: #16a34a; }
  100% { background: #f0fdf4; border-color: #86efac; }
}

.ubicacion-widget__dir-ayuda {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--color-texto-suave, #64748b);
  margin-top: 0.3rem;
  line-height: 1.4;
}

.ubicacion-widget__dir-ayuda i {
  color: #16a34a;
  flex-shrink: 0;
}

.ubicacion-widget__detalle {
  margin-top: 0;
}

.form-agendar__campo-opcional {
  font-weight: 400;
  color: var(--color-texto-suave);
  font-size: 0.8rem;
}

/* Pin personalizado del mapa (compatible MapTiler SDK) */
.ubicacion-marker {
  cursor: grab;
}
.ubicacion-marker:active {
  cursor: grabbing;
}
.ubicacion-marker__pin {
  font-size: 2.4rem;
  color: var(--color-primario, #1565c0);
  line-height: 1;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.35));
  transition: transform 0.15s ease;
  display: block;
  user-select: none;
}
.ubicacion-marker__pin:hover {
  transform: scale(1.15);
}

/* ===== Sección Fecha, Hora e Información ===== */

.form-agendar__subtitulo i {
  color: var(--color-primario);
  margin-right: 0.35rem;
  font-size: 0.95em;
}

/* Label compartido para fecha y franja */
.fecha-hora__label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-texto, #1a1a2e);
  margin-bottom: 0.5rem;
}
.fecha-hora__label i {
  color: var(--color-primario);
}

/* Fecha */
.fecha-hora__fecha-wrap {
  margin-bottom: 1.25rem;
}

/* Wrapper sin overflow hidden — solo da espacio para las sombras */
.fecha-selector-wrap {
  padding: 4px 0 6px;
}

/* Fila única deslizable */
.fecha-selector {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.45rem;
  overflow-x: scroll;
  padding: 4px 4px 4px 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primario, #1565c0) transparent;
  cursor: grab;
}
.fecha-selector:active { cursor: grabbing; }
.fecha-selector::-webkit-scrollbar {
  height: 4px;
}
.fecha-selector::-webkit-scrollbar-track {
  background: transparent;
}
.fecha-selector::-webkit-scrollbar-thumb {
  background: var(--color-primario, #1565c0);
  border-radius: 4px;
}

.fecha-dia-btn {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  padding: 0.55rem 0.65rem;
  min-width: 58px;
  border: 2px solid var(--color-borde-claro);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
  user-select: none;
}
.fecha-dia-btn:hover {
  border-color: var(--color-primario);
  background: var(--color-acento-claro, #e8f0fe);
}
.fecha-dia-btn--activo {
  border-color: var(--color-primario);
  background: var(--color-primario);
  box-shadow: 0 3px 10px rgba(21,101,192,0.28);
}
.fecha-dia-btn__etiqueta {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-texto-suave, #64748b);
}
.fecha-dia-btn__num {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--color-texto, #1a1a2e);
  line-height: 1;
}
.fecha-dia-btn__mes {
  font-size: 0.7rem;
  color: var(--color-texto-suave, #64748b);
  text-transform: uppercase;
}
/* Estado activo: todo en blanco */
.fecha-dia-btn--activo .fecha-dia-btn__etiqueta,
.fecha-dia-btn--activo .fecha-dia-btn__num,
.fecha-dia-btn--activo .fecha-dia-btn__mes {
  color: #fff;
}
.fecha-hora__hint {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--color-texto-suave, #64748b);
  margin-top: 0.35rem;
}
.fecha-hora__hint i { color: var(--color-primario); }

/* Franjas horarias como tarjetas */
.fecha-hora__franjas-wrap {
  margin-bottom: 1.25rem;
}
.fecha-hora__franjas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}
@media (min-width: 480px) {
  .fecha-hora__franjas {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Tarjeta de franja */
.franja-card {
  cursor: pointer;
}
.franja-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.franja-card__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1.1rem 0.5rem;
  border: 2px solid var(--color-borde-claro);
  border-radius: 12px;
  background: #fff;
  text-align: center;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
  user-select: none;
}
.franja-card__inner i {
  font-size: 1.15rem;
  color: var(--color-texto-suave, #64748b);
  transition: color 0.18s;
}
.franja-card__hora {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-texto, #1a1a2e);
  line-height: 1.2;
}
.franja-card__desc {
  font-size: 0.72rem;
  color: var(--color-texto-suave, #64748b);
}

/* Estado hover */
.franja-card:hover .franja-card__inner {
  border-color: var(--color-primario);
  background: var(--color-acento-claro, #e8f0fe);
}

/* Estado seleccionado */
.franja-card input[type="radio"]:checked + .franja-card__inner {
  border-color: var(--color-primario);
  background: var(--color-primario);
  box-shadow: 0 3px 10px rgba(21,101,192,0.25);
}
.franja-card input[type="radio"]:checked + .franja-card__inner i,
.franja-card input[type="radio"]:checked + .franja-card__inner .franja-card__hora,
.franja-card input[type="radio"]:checked + .franja-card__inner .franja-card__desc {
  color: #fff;
}

/* Campo descripción problema */
.fecha-hora__problema label {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}
.fecha-hora__problema label i {
  color: var(--color-primario);
  font-size: 0.95em;
  margin-top: 1px;
}
.fecha-hora__problema textarea {
  resize: vertical;
  min-height: 80px;
}

/* ===== Modal de confirmación agendamiento ===== */
body.modal-abierto { overflow: hidden; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal[hidden] { display: none; }
.modal.modal--visible {
  opacity: 1;
  visibility: visible;
}
.modal.modal--visible[hidden] { display: flex; }
.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}
.modal__contenido {
  position: relative;
  background: var(--color-blanco);
  border-radius: 16px;
  padding: 2rem;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.modal__cerrar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-texto-suave);
}
.modal__cerrar:hover { color: var(--color-texto); }
.modal__titulo {
  font-size: 1.35rem;
  color: var(--color-secundario);
  margin-bottom: 1rem;
}
.modal__texto {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-texto);
}
.modal__texto--secundario {
  font-size: 0.9rem;
  color: var(--color-texto-suave);
  margin-top: 0.5rem;
}
.modal__icono {
  font-size: 3rem;
  margin-bottom: 1rem;
  text-align: center;
}
.modal__icono--exito { color: #16a34a; }
.modal__icono--error { color: #dc2626; }
.modal__acciones {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.modal__boton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  padding: 0.65rem 1.25rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.2s ease, background 0.2s ease;
}
.form-agendar__campo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.form-agendar__campo label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-texto);
}
.form-agendar__campo .req { color: var(--color-primario); }
.form-agendar__campo input,
.form-agendar__campo select,
.form-agendar__campo textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--color-borde-claro);
  border-radius: 10px;
  background: var(--color-fondo-claro);
  color: var(--color-texto);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-agendar__campo input:focus,
.form-agendar__campo select:focus,
.form-agendar__campo textarea:focus {
  outline: none;
  border-color: var(--color-primario);
  box-shadow: 0 0 0 3px var(--color-acento-claro);
}
.form-agendar__campo input.error,
.form-agendar__campo select.error,
.form-agendar__campo textarea.error {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.05);
}
.form-agendar__campo textarea {
  resize: vertical;
  min-height: 100px;
}
.form-agendar__campo select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23334155' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.form-agendar__enviar {
  padding-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.form-agendar__boton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 1rem 1.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 12px;
  background: var(--color-primario);
  color: var(--color-blanco);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(13, 148, 136, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.form-agendar__boton:hover {
  background: var(--color-primario-oscuro);
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(13, 148, 136, 0.5);
}
.form-agendar__hint {
  font-size: 0.82rem;
  color: var(--color-texto-suave);
  text-align: center;
  line-height: 1.5;
}

/* Barra de navegación paso 3 */
.paso3-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-borde-claro);
  margin-top: 0.25rem;
}
.paso3-nav__anterior {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 2px solid var(--color-borde-claro);
  border-radius: 10px;
  background: #fff;
  color: var(--color-texto-suave, #64748b);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.paso3-nav__anterior:hover {
  border-color: var(--color-primario);
  color: var(--color-primario);
  background: var(--color-acento-claro, #e8f0fe);
}
.paso3-nav__enviar {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  height: 46px;
  padding: 0 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: #0d9488;
  color: #fff;
  box-shadow: 0 3px 12px rgba(13,148,136,0.3);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.paso3-nav__enviar:hover {
  background: #0f766e;
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(13,148,136,0.45);
}

/* ===== Página Pagar (solo estructura, no funcional) ===== */
.form-pago__resumen {
  background: var(--color-fondo-claro);
  border-radius: 12px;
  padding: 1.25rem;
}
.form-pago__resumen-fila {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-borde-claro);
}
.form-pago__resumen-fila:last-child { border-bottom: none; }
.form-pago__monto { font-size: 1.25rem; color: var(--color-primario); }
.form-pago__opciones {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.form-pago__opcion {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--color-borde-claro);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.form-pago__opcion:hover { border-color: var(--color-primario); }
.form-pago__opcion input:checked + span { font-weight: 700; }
.form-pago__opcion:has(input:checked) {
  border-color: var(--color-primario);
  background: var(--color-acento-claro);
}
.form-pago__opcion input { accent-color: var(--color-primario); }
.form-pago__opcion span { display: flex; align-items: center; gap: 0.5rem; }

/* ===== Página Pagar - Rediseño ===== */
.pago-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 2rem;
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

/* --- Resumen sticky --- */
.pago-resumen-card {
  background: #fff;
  border: 1px solid var(--color-borde-claro);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pago-resumen__icono {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--color-acento-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--color-primario);
}
.pago-resumen__etiqueta {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-texto-claro, #64748b);
  margin: 0 0 0.15rem;
}
.pago-resumen__servicio {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-texto, #1e293b);
  margin: 0;
}
.pago-resumen__codigo {
  font-size: 0.82rem;
  color: var(--color-texto-claro, #64748b);
  margin: 0.15rem 0 0;
}
.pago-resumen__separador {
  border: none;
  border-top: 1px solid var(--color-borde-claro);
}
.pago-resumen__total-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.pago-resumen__total-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-texto-claro, #64748b);
}
.pago-resumen__total {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-primario);
  line-height: 1;
}

/* --- Badges seguridad --- */
.pago-badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  border-top: 1px solid var(--color-borde-claro);
  padding-top: 1rem;
}
.pago-badge {
  font-size: 0.78rem;
  color: var(--color-texto-claro, #64748b);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.pago-badge i { color: var(--color-primario); font-size: 0.8rem; }

/* --- Columna formulario --- */
.pago-formulario-wrap {
  background: #fff;
  border: 1px solid var(--color-borde-claro);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  overflow: hidden;
}

/* --- Tabs --- */
.pago-tabs {
  display: flex;
  border-bottom: 2px solid var(--color-borde-claro);
  background: var(--color-fondo-muy-claro, #fafbfc);
}
.pago-tab {
  flex: 1;
  padding: 1rem 0.75rem;
  border: none;
  background: transparent;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-texto-claro, #64748b);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
}
.pago-tab:hover { color: var(--color-primario); }
.pago-tab--activo {
  color: var(--color-primario);
  border-bottom-color: var(--color-primario);
  font-weight: 700;
  background: #fff;
}

/* --- Paneles --- */
.pago-tab-panel { padding: 1.5rem 0 0.5rem; }
.pago-tab-panel[hidden] { display: none; }

/* --- Campos de tarjeta --- */
.pago-campo {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.pago-campo--ancho { grid-column: 1 / -1; }
.pago-campo label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-texto, #1e293b);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.pago-campo input {
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--color-borde-claro);
  border-radius: 10px;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.pago-campo input:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 3px var(--color-acento-claro);
}
.pago-fila-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.pago-cvv-ayuda {
  color: var(--color-texto-claro, #94a3b8);
  cursor: help;
  font-size: 0.82rem;
}

/* --- Preview tarjeta --- */
.pago-tarjeta-preview {
  background: linear-gradient(135deg, var(--color-primario), var(--color-primario-oscuro, #0f766e));
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  min-height: 70px;
}
.pago-tarjeta-num-preview {
  font-size: 1.05rem;
  font-family: monospace;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.9);
}
.pago-tarjeta-red {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --- Botón pagar --- */
.pago-boton-pagar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.9rem;
  background: var(--color-primario);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  margin-top: 0.5rem;
}
.pago-boton-pagar:hover {
  background: var(--color-primario-oscuro, #0f766e);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(13,148,136,0.35);
}
.pago-boton-pagar--whatsapp { background: #25d366; }
.pago-boton-pagar--whatsapp:hover { background: #1da851; }

.pago-hint {
  font-size: 0.78rem;
  color: var(--color-texto-claro, #94a3b8);
  margin: 0.75rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  justify-content: center;
}

/* --- Panel PSE --- */
.pago-pse__header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.pago-pse__icono {
  font-size: 1.75rem;
  color: var(--color-primario);
  margin-top: 0.1rem;
}
.pago-pse__titulo {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.2rem;
  color: var(--color-texto, #1e293b);
}
.pago-pse__desc {
  font-size: 0.85rem;
  color: var(--color-texto-claro, #64748b);
  margin: 0;
}
.pago-pse__instruccion {
  font-size: 0.9rem;
  color: #475569;
  margin: 0.75rem 0 0;
  line-height: 1.6;
}
.pago-pse__pasos {
  padding-left: 1.25rem;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--color-texto, #1e293b);
}
.pago-pse__bancos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.pago-pse__bancos span {
  background: var(--color-fondo-claro);
  border: 1px solid var(--color-borde-claro);
  border-radius: 6px;
  padding: 0.3rem 0.65rem;
  font-size: 0.78rem;
  color: var(--color-texto, #1e293b);
}

/* --- Panel Nequi --- */
.pago-nequi__header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.pago-nequi__icono {
  font-size: 1.75rem;
  color: #7c3aed;
  margin-top: 0.1rem;
}
.pago-nequi__titulo {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.2rem;
  color: var(--color-texto, #1e293b);
}
.pago-nequi__desc {
  font-size: 0.85rem;
  color: var(--color-texto-claro, #64748b);
  margin: 0;
}
.pago-nequi__pasos {
  padding-left: 1.25rem;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--color-texto, #1e293b);
}
.pago-nequi__numero {
  background: #f5f3ff;
  border: 1.5px solid #ddd6fe;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: center;
  text-align: center;
}
.pago-nequi__num-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7c3aed;
}
.pago-nequi__num {
  font-size: 1.6rem;
  font-weight: 800;
  color: #5b21b6;
  letter-spacing: 0.05em;
}
.pago-nequi__instruccion {
  font-size: 0.85rem;
  color: var(--color-texto-claro, #64748b);
  margin: 0 0 1rem;
  text-align: center;
}
.pago-nequi__separador {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
  color: var(--color-texto-claro, #94a3b8);
  font-size: 0.8rem;
}
.pago-nequi__separador::before,
.pago-nequi__separador::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--color-borde-claro);
}

/* --- Aviso de método alternativo --- */
.pago-metodo-aviso {
  background: var(--color-fondo-claro);
  border-left: 3px solid var(--color-primario);
  border-radius: 0 8px 8px 0;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: var(--color-texto, #1e293b);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.pago-metodo-aviso i { color: var(--color-primario); margin-top: 0.1rem; flex-shrink: 0; }

/* --- Contenedor botón Wompi --- */
.pago-paneles-wrap {
  padding: 0 1.75rem 1.75rem;
}
.wompi-boton-seccion {
  padding: 0 1.75rem 1.75rem;
}
.wompi-boton-separador {
  border-top: 1px solid #e2e8f0;
  margin-bottom: 1.25rem;
}
/* Botón Wompi oculto — solo se activa programáticamente */
.wompi-boton-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.pago-boton-pse {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem 1.5rem;
  background: var(--color-primario, #0d9488);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  box-sizing: border-box;
}
.pago-boton-pse:hover { background: var(--color-primario-oscuro, #0f766e); color: #fff; text-decoration: none; }
.pago-boton-pse:active { transform: scale(0.98); }
.pago-seguro-nota {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: #64748b;
  margin: 0.6rem 0 0;
}
.pago-seguro-nota i { color: var(--color-primario, #0d9488); }

/* --- Banner de pago completado --- */
.pago-banner-exito {
  grid-column: 1 / -1;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.pago-banner-exito[hidden] { display: none; }
.pago-banner-exito > i {
  font-size: 2rem;
  color: #16a34a;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.pago-banner-exito strong {
  display: block;
  font-size: 1.1rem;
  color: #15803d;
  margin-bottom: 0.25rem;
}
.pago-banner-exito p {
  font-size: 0.9rem;
  color: #166534;
  margin: 0;
}

/* ──────────────────────────────────────────────
   Stripe Elements
────────────────────────────────────────────── */
.stripe-card-wrap {
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.875rem 1rem;
  background: #fff;
  margin-bottom: 1rem;
  transition: border-color 0.2s;
}
.stripe-card-wrap:focus-within {
  border-color: var(--color-primario, #1e40af);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}
.stripe-card-errors {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #ef4444;
}
.stripe-card-errors[hidden] { display: none; }

.stripe-boton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem 1.5rem;
  background: var(--color-primario, #0d9488);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s, transform 0.1s;
  margin-top: 0.25rem;
}
.stripe-boton:hover:not(:disabled) { background: var(--color-primario-oscuro, #0f766e); }
.stripe-boton:active:not(:disabled) { transform: scale(0.98); }
.stripe-boton:disabled { opacity: 0.55; cursor: not-allowed; }

.pago-stripe-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 0.75rem;
}
.pago-stripe-badge i { color: var(--color-primario, #0d9488); }
.pago-stripe-badge strong { color: var(--color-primario, #0d9488); }

/* Aviso pronto disponible */
.pago-disponible-pronto {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #92400e;
  margin-bottom: 1rem;
}
.pago-disponible-pronto i { margin-top: 2px; color: #d97706; flex-shrink: 0; }
.pago-disponible-pronto[hidden] { display: none; }

/* ──────────────────────────────────────────────
   Nequi QR
────────────────────────────────────────────── */
.nequi-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 1rem;
}
.nequi-qr-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 148px;
  height: 148px;
  background: #f5f3ff;
  border: 2px solid #c4b5fd;
  border-radius: 12px;
  padding: 0.75rem;
  gap: 0.35rem;
}
.nequi-qr-svg {
  width: 100px;
  height: 100px;
}
.nequi-qr-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: #7c3aed;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nequi-qr-instruccion {
  font-size: 0.8rem;
  color: #64748b;
  margin: 0;
}

/* Monto Nequi */
.nequi-monto-transferir {
  background: #faf5ff;
  border: 1.5px solid #e9d5ff;
  border-radius: 10px;
  padding: 0.875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.nequi-monto-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}
.nequi-monto-fila span { color: #64748b; }
.nequi-monto-fila strong { color: #1a2233; font-weight: 700; }
#nequi-monto-display { color: #7c3aed; font-size: 1rem; }

/* ──────────────────────────────────────────────
   PSE panel extras
────────────────────────────────────────────── */
.pago-pse__bancos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}
.pago-pse__bancos span {
  background: #f1f5f9;
  border-radius: 6px;
  padding: 0.2rem 0.6rem;
  font-size: 0.78rem;
  color: #475569;
}

/* --- Responsive mobile --- */
@media (max-width: 700px) {
  .pago-layout {
    grid-template-columns: 1fr;
    padding: 1rem 0.75rem 2rem;
    gap: 1.25rem;
  }
  .pago-resumen-card {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.25rem;
  }
  .pago-resumen__icono { display: none; }
  .pago-resumen__total { font-size: 1.6rem; }
  .pago-badges { flex-direction: row; flex-wrap: wrap; border-top: none; padding-top: 0; gap: 0.5rem; width: 100%; }
  .pago-resumen__separador { display: none; }
  .pago-tarjeta-preview { min-height: 56px; padding: 1rem; }
  .pago-tarjeta-num-preview { font-size: 0.9rem; }
}

/* Cuadros oferta: pestañas dinámicas + paneles (estilo Javeriana exacto) */
.hero--busqueda + section,
.hero--busqueda + .seccion {
  padding-top: calc(3rem + 60px);
}

/* ========== SERVICIOS CARDS ========== */
.servicios-cards {
  background: #f8f9fb;
  padding-top: 3rem;
  padding-bottom: 4.5rem;
}
.servicios-cards__contenedor {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
}
.servicios-cards__cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2.25rem;
  gap: 1rem;
}
.servicios-cards__cabecera-texto {
  flex: 1;
}
.servicios-cards__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-acento, #0d9488);
  margin: 0 0 0.45rem;
}
.servicios-cards__titulo {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.15;
}

/* Grid mobile-first: 1 col → 2 col → 3 col */
.servicios-cards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 540px) {
  .servicios-cards__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}
@media (min-width: 860px) {
  .servicios-cards__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
  }
}

/* Tarjeta individual */
.servicio-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 1.1rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease;
}
.servicio-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.13);
}

/* Imagen */
.servicio-card__img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e2e8f0;
}
.servicio-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.servicio-card:hover .servicio-card__img img {
  transform: scale(1.05);
}

/* Variante para imágenes SVG/ilustraciones con fondo transparente */
.servicio-card__img--ilustracion {
  background: linear-gradient(135deg, #e8f4fd 0%, #dbeafe 60%, #eff6ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.servicio-card__img--ilustracion img {
  object-fit: contain;
  padding: 1rem;
  width: 100%;
  height: 100%;
}
.servicio-card:hover .servicio-card__img--ilustracion img {
  transform: scale(1.04) translateY(-3px);
}

/* Lottie player dentro de cards de servicio */
.servicio-card__lottie {
  width: 100%;
  height: 100%;
  display: block;
}

.servicio-card__lottie--sm {
  width: 80%;
  height: 80%;
}

.servicio-card__lottie--lg {
  width: 120%;
  height: 120%;
}

/* Badge */
.servicio-card__badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  background: #0f172a;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3em 0.8em;
  border-radius: 100px;
}
.servicio-card__badge--verde {
  background: var(--color-acento, #0d9488);
}

/* Cuerpo de texto */
.servicio-card__body {
  padding: 1.2rem 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}
.servicio-card__titulo {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}
.servicio-card__desc {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0;
  line-height: 1.55;
  flex: 1;
}
.servicio-card__cta {
  display: inline-block;
  margin-top: 0.55rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-acento, #0d9488);
  transition: gap 0.2s ease;
}
.servicio-card:hover .servicio-card__cta {
  text-decoration: underline;
}

@media (max-width: 540px) {
  .servicios-cards {
    padding-top: 2.5rem;
    padding-bottom: 3rem;
  }
  .servicios-cards__contenedor {
    padding: 0 1rem;
  }
}

/* Bloque presentación: 1 columna en móvil (mobile-first) */
.bloque-presentacion {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem 0;
}
.bloque-presentacion__texto {
  min-width: 0; /* evita desborde en grid */
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.bloque-presentacion__texto h2 {
  font-size: 1.35rem;
  color: var(--color-primario);
  margin-bottom: 0.75rem;
  font-weight: 700;
  max-width: 100%;
}
.bloque-presentacion__texto p {
  margin-bottom: 0.75rem;
  max-width: 100%;
}
.bloque-presentacion__imagen {
  aspect-ratio: 4/3;
  min-height: 220px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
/* Imagen principal = logo (p. ej. neveras LG): limpio y profesional */
.bloque-presentacion__imagen--logo {
  aspect-ratio: 16/10;
  min-height: 200px;
  background: linear-gradient(145deg, #f8f9fa 0%, #e9ecef 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
/* Imágenes de producto: se ven completas y centradas, se ajustan al contenedor */
.bloque-presentacion__imagen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform 0.6s var(--animacion-ease);
}
.bloque-presentacion__imagen--logo img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 180px;
  object-fit: contain;
  object-position: center;
}
.bloque-presentacion__imagen:hover img {
  transform: scale(1.03);
}
.bloque-presentacion__imagen--logo:hover img {
  transform: scale(1.03);
}

/* Variante destacada para páginas de servicio sin marca */
.bloque-presentacion__imagen--destacada {
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 4px 16px rgba(13,148,136,0.12);
  border: 2px solid rgba(13,148,136,0.12);
  background: #f4f8f7;
}
.bloque-presentacion__imagen--destacada img {
  object-fit: contain;
  object-position: center;
  padding: 0.5rem;
}

/* Trust badges — indicadores de confianza */
.trust-badges {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  margin-bottom: 1.5rem;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-primario-claro, #e6f7f5);
  color: var(--color-primario, #0d9488);
  border: 1px solid rgba(13,148,136,0.2);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
.trust-badge i {
  font-size: 0.85rem;
  flex-shrink: 0;
}
@media (min-width: 769px) {
  .bloque-presentacion {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding: 2.5rem 0;
  }
  .bloque-presentacion__texto h2 { font-size: 1.5rem; margin-bottom: 1rem; }
  .bloque-presentacion__imagen { min-height: 280px; }
  .bloque-presentacion__imagen--logo { min-height: 240px; padding: 2.5rem; }
  .bloque-presentacion__imagen--logo img { max-height: 220px; }
}

/* Título pregunta (sección destacada, legible en móvil) */
.titulo-pregunta {
  background: var(--color-secundario);
  color: var(--color-blanco);
  padding: 1.25rem 1rem;
  text-align: center;
}
.titulo-pregunta h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
}

.titulo-pregunta.visible h2 {
  animation: fadeInUp 0.6s var(--animacion-ease) forwards;
}
.titulo-pregunta.seccion--animar h2 {
  opacity: 0;
  transform: translateY(12px);
}

/* Grid de servicios: 1 columna en móvil (mobile-first) */
#servicios-reparacion .seccion__titulo { margin-bottom: 0.5rem; }
#servicios-reparacion .seccion__intro { margin-bottom: 1.5rem; }
/* ──────────────────────────────────────────────
   Sección servicios por categorías
────────────────────────────────────────────── */
.cat-servicios {
  background: #f8f9fb;
  padding: 3rem 0 2.5rem;
}


.cat-grupo {
  margin-bottom: 3rem;
}

.cat-grupo__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid #e2e8f0;
}

.cat-grupo__titulo {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.02em;
}
.cat-grupo__titulo::after {
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  background: #2563eb;
  border-radius: 2px;
  margin-top: 7px;
}

.cat-grupo__header-derecha {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cat-grupo__ver-todos {
  font-size: 0.82rem;
  color: #0284c7;
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: gap 0.2s ease, color 0.2s ease;
}

.cat-grupo__ver-todos:hover {
  color: #0369a1;
  gap: 0.5rem;
}

.cat-grupo__nav-wrap {
  display: flex;
  gap: 0.45rem;
  align-items: center;
}

.cat-grupo__nav {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: #334155;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s, opacity 0.18s, transform 0.15s;
  flex-shrink: 0;
}

.cat-grupo__nav:hover:not(:disabled) {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
  box-shadow: 0 3px 10px rgba(15,23,42,0.18);
  transform: scale(1.08);
}

.cat-grupo__nav:disabled {
  opacity: 0.28;
  cursor: default;
  box-shadow: none;
}

/* Wrapper necesario para overflow:hidden sin cortar sombras */
.cat-grupo__grid-wrap {
  /* overflow-x oculta el carrusel; padding compensa el recorte visual de sombras */
  overflow: hidden;
  padding-bottom: 10px;
  margin-bottom: -10px;
}

.cat-grupo__grid {
  display: flex;
  gap: 1.75rem;
  transition: transform 0.35s ease;
  will-change: transform;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.cat-card {
  flex: 0 0 auto;
  width: min(340px, 85vw);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
  scroll-snap-align: start;
}

.cat-card:hover {
  transform: translateY(-5px);
}

.cat-card__img {
  width: 100%;
  height: 280px;
  border-radius: 22px;
  overflow: hidden;
  background: #e2e8f0;
  position: relative;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
  transition: box-shadow 0.25s ease;
}
.cat-card:hover .cat-card__img {
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.15);
}

.cat-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.cat-card:hover .cat-card__img img {
  transform: scale(1.07);
}

/* SVG/ilustración en cat-card */
.cat-card__img--svg {
  background: linear-gradient(135deg, #e8f4fd 0%, #dbeafe 60%, #eff6ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cat-card__img--svg img {
  object-fit: contain;
  padding: 0.5rem;
}
.cat-card:hover .cat-card__img--svg img {
  transform: scale(1.05) translateY(-2px);
}

/* Badge "Reparar" dentro de la imagen */
.cat-card__badge-rep {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #2563eb;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 10px 3px 8px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(37,99,235,0.25);
}

/* Overlay oscuro en hover */
.cat-card__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0);
  border-radius: inherit;
  transition: background 0.25s ease;
  pointer-events: none;
}
.cat-card:hover .cat-card__img::after {
  background: rgba(15, 23, 42, 0.14);
}

/* Footer con nombre + CTA */
.cat-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.75rem;
  padding: 0 0.25rem;
}

.cat-card__footer-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cat-card__nombre {
  font-size: 1.18rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
}

.cat-card__sub {
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 500;
  line-height: 1.3;
}

.cat-card__cta-mini {
  font-size: 0.8rem;
  font-weight: 700;
  color: #2563eb;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.cat-card:hover .cat-card__cta-mini {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 1200px) {
  .cat-card {
    width: min(280px, 85vw);
  }
  .cat-card__img {
    width: 100%;
    height: 235px;
  }
}

@media (max-width: 1024px) {
  .cat-card {
    width: min(240px, 85vw);
  }
  .cat-card__img {
    width: 100%;
    height: 200px;
  }
}

@media (max-width: 860px) {
  .cat-card {
    width: min(200px, 75vw);
  }
  .cat-card__img {
    width: 100%;
    height: 170px;
  }
}

@media (max-width: 540px) {
  .cat-card {
    width: min(160px, 72vw);
  }
  .cat-card__img {
    width: 100%;
    height: 140px;
    border-radius: 16px;
  }
  .cat-grupo__grid {
    gap: 0.9rem;
  }
}

/* Sección marcas / línea blanca (mobile-first) */
/* Sección marcas: ancho completo, más dinámica */
.seccion--marcas {
  background: linear-gradient(180deg, rgba(13, 148, 136, 0.06) 0%, rgba(255,255,255,0.5) 100%);
  padding: 2rem 0 2.5rem;
  overflow: hidden;
}
.seccion--marcas__texto {
  margin-bottom: 1.5rem;
}
@media (min-width: 769px) {
  .seccion--marcas { padding: 2.5rem 0 3rem; }
  .seccion--marcas__texto { margin-bottom: 2rem; }
}
.seccion--marcas .seccion__titulo {
  text-align: center;
  margin-bottom: 0.5rem;
}
.seccion--marcas p {
  text-align: center;
  margin-bottom: 0;
}

/* Grid de logos: ancho completo, celdas con espacio y efecto hover */
.grid-logos-marcas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  width: 100%;
  max-width: 100%;
  padding: 0 1rem;
  margin: 0 auto;
}
.grid-logos-marcas__celda {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1rem;
  background: #fff;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border: 1px solid rgba(0,0,0,0.04);
}
.grid-logos-marcas__celda:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.grid-logos-marcas__celda img {
  max-width: 100%;
  height: auto;
  max-height: 56px;
  width: auto;
  object-fit: contain;
  transition: transform 0.25s ease;
}
.grid-logos-marcas__celda:hover img {
  transform: scale(1.05);
}
.grid-logos-marcas__letra {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #1e293b;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  flex-shrink: 0;
}
.grid-logos-marcas__nombre {
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
  text-align: center;
  line-height: 1.2;
}
.grid-logos-marcas__celda:has(.grid-logos-marcas__letra) {
  flex-direction: column;
  gap: 0.2rem;
}
@media (min-width: 480px) {
  .grid-logos-marcas {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    padding: 0 1.5rem;
  }
  .grid-logos-marcas__celda img { max-height: 62px; }
}
@media (min-width: 769px) {
  .grid-logos-marcas {
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
    padding: 0 2rem;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
  }
  .grid-logos-marcas__celda {
    padding: 1.5rem 1.25rem;
  }
  .grid-logos-marcas__celda img { max-height: 72px; }
}
@media (min-width: 1100px) {
  .grid-logos-marcas { padding: 0 3rem; }
}

/* Secciones (mobile-first) */
.seccion {
  padding: 2rem 0;
}
.seccion__titulo {
  font-size: 1.35rem;
  color: var(--color-secundario);
  margin-bottom: 0.75rem;
  font-weight: 700;
}
@media (min-width: 769px) {
  .seccion { padding: 3.5rem 0; }
  .seccion__titulo { font-size: 1.5rem; margin-bottom: 1rem; }
}

/* Sección con .contenedor directo: padding lateral suficiente y botones con respiro */
.seccion.contenedor > .seccion__titulo {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.seccion.contenedor > p {
  max-width: 72ch;
  overflow-wrap: break-word;
  word-wrap: break-word;
  line-height: 1.65;
  margin-bottom: 1rem;
}
.seccion.contenedor > p:last-child {
  margin-bottom: 0;
}
/* Botones en línea dentro de sección: gap y wrap */
.seccion.contenedor > p > .boton,
.seccion.contenedor > p .boton {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-right: 0.75rem;
  margin-bottom: 0.5rem;
  vertical-align: middle;
}
@media (min-width: 769px) {
  .seccion.contenedor {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Sección Servicio a domicilio en Cali: más aire y legible */
.seccion-domicilio {
  padding-left: 0;
  padding-right: 0;
}
.seccion-domicilio__inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.seccion-domicilio__titulo {
  margin-bottom: 1.25rem;
  text-align: center;
}
.seccion-domicilio__texto {
  max-width: 720px;
  margin: 0 auto;
}
.seccion-domicilio__texto p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-texto);
  margin-bottom: 1rem;
}
.seccion-domicilio__texto p:last-child {
  margin-bottom: 0;
}
.seccion-domicilio__texto strong {
  color: var(--color-secundario);
  font-weight: 600;
}
@media (min-width: 480px) {
  .seccion-domicilio__inner { padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 769px) {
  .seccion-domicilio__inner { padding-left: 2.5rem; padding-right: 2.5rem; }
  .seccion-domicilio__titulo { margin-bottom: 1.5rem; }
  .seccion-domicilio__texto p { font-size: 1.05rem; line-height: 1.7; }
}
@media (max-width: 360px) {
  .seccion-domicilio__inner { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* Sección beneficio (estilo Mercado Libre): título + subtítulo + tarjetas con icono */
.beneficio-seccion {
  padding: 2.5rem 1rem 3.5rem;
  background: #fff;
}
.beneficio-seccion__header {
  text-align: center;
  margin-bottom: 1.5rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.beneficio-seccion__header--proceso {
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
}
.beneficio-seccion__titulo {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-texto-oscuro);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}
.beneficio-seccion__subtitulo {
  font-size: 1rem;
  color: #333;
  margin: 0;
  line-height: 1.5;
}

.beneficio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 1300px;
  margin: 0 auto;
}
.beneficio-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: rgba(13, 148, 136, 0.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border: 1px solid rgba(13, 148, 136, 0.15);
}
.beneficio-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
/* Zona izquierda: solo el icono en su recuadro (división clara) */
.beneficio-card__izq {
  flex-shrink: 0;
  width: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border-right: 1px solid rgba(13, 148, 136, 0.2);
  background: rgba(255,255,255,0.4);
}
.beneficio-card__icono {
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,0.95);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primario);
  font-size: 1.35rem;
}
/* Zona derecha: etiqueta, título y descripción */
.beneficio-card__der {
  flex: 1;
  min-width: 0;
  padding: 1.25rem 1.25rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.beneficio-card__etiqueta {
  display: inline-block;
  background: var(--color-texto-oscuro);
  color: var(--color-blanco);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  align-self: flex-start;
}
.beneficio-card__numero {
  width: 28px;
  height: 28px;
  background: var(--color-primario);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.beneficio-card__titulo {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-texto-oscuro);
  margin-bottom: 0.35rem;
}
.beneficio-card__texto {
  font-size: 0.9rem;
  color: #333;
  margin: 0;
  line-height: 1.45;
}
.beneficio-card--ancho {
  grid-column: 1 / -1;
}
.beneficio-card--paso .beneficio-card__etiqueta {
  display: none;
}

@media (min-width: 481px) {
  .beneficio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}
@media (min-width: 769px) {
  .beneficio-seccion { padding: 3rem 2rem 4rem; }
  .beneficio-seccion__titulo { font-size: 2rem; }
  .beneficio-grid {
    gap: 1.5rem;
    padding: 0 0.5rem;
  }
  .beneficio-card { min-height: 160px; }
  .beneficio-card__izq { width: 100px; padding: 1.25rem; }
  .beneficio-card__icono { width: 56px; height: 56px; font-size: 1.4rem; }
  .beneficio-card__der { padding: 1.5rem 1.5rem 1.5rem 1.25rem; }
  .beneficio-card__titulo { font-size: 1.2rem; }
  .beneficio-grid--proceso .beneficio-card { min-height: 150px; }
}

/* Animación entrada beneficio */
.seccion--animar .beneficio-card { opacity: 0; transform: translateY(20px); }
.seccion--animar.visible .beneficio-card {
  animation: fadeInUp 0.5s var(--animacion-ease) forwards;
}
.seccion--animar.visible .beneficio-card:nth-child(1) { animation-delay: 0.05s; }
.seccion--animar.visible .beneficio-card:nth-child(2) { animation-delay: 0.12s; }
.seccion--animar.visible .beneficio-card:nth-child(3) { animation-delay: 0.19s; }
.seccion--animar.visible .beneficio-card:nth-child(4) { animation-delay: 0.26s; }
.seccion--animar.visible .beneficio-card:nth-child(5) { animation-delay: 0.33s; }
.seccion--animar.visible .beneficio-grid--proceso .beneficio-card:nth-child(1) { animation-delay: 0.05s; }
.seccion--animar.visible .beneficio-grid--proceso .beneficio-card:nth-child(2) { animation-delay: 0.15s; }
.seccion--animar.visible .beneficio-grid--proceso .beneficio-card:nth-child(3) { animation-delay: 0.25s; }
.seccion--animar.visible .beneficio-grid--proceso .beneficio-card:nth-child(4) { animation-delay: 0.35s; }

/* Tarjetas (uso en otras páginas) – mobile-first 1 columna */
.grid-tarjetas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
.tarjeta {
  background: var(--color-blanco);
  padding: 1.25rem;
  border-radius: 10px;
  box-shadow: var(--sombra);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
@media (min-width: 481px) {
  .grid-tarjetas { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
  .tarjeta { padding: 1.5rem; }
}
.seccion--animar.visible .tarjeta {
  animation: fadeInUp 0.5s var(--animacion-ease) forwards;
}
.seccion--animar .tarjeta { opacity: 0; transform: translateY(20px); }
.seccion--animar.visible .tarjeta:nth-child(1) { animation-delay: 0.05s; }
.seccion--animar.visible .tarjeta:nth-child(2) { animation-delay: 0.12s; }
.seccion--animar.visible .tarjeta:nth-child(3) { animation-delay: 0.19s; }
.seccion--animar.visible .tarjeta:nth-child(4) { animation-delay: 0.26s; }

.tarjeta:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.tarjeta__titulo {
  font-size: 1.1rem;
  color: var(--color-secundario);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

/* Proceso (uso en otras páginas) – mobile-first 1 columna */
.proceso {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
  text-align: center;
}
@media (min-width: 481px) {
  .proceso { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
}
.seccion--animar .proceso__paso { opacity: 0; transform: translateY(16px); }
.seccion--animar.visible .proceso__paso {
  animation: fadeInUp 0.5s var(--animacion-ease) forwards;
}
.seccion--animar.visible .proceso__paso:nth-child(1) { animation-delay: 0.05s; }
.seccion--animar.visible .proceso__paso:nth-child(2) { animation-delay: 0.15s; }
.seccion--animar.visible .proceso__paso:nth-child(3) { animation-delay: 0.25s; }
.seccion--animar.visible .proceso__paso:nth-child(4) { animation-delay: 0.35s; }

.proceso__paso {
  padding: 1.25rem;
  background: var(--color-blanco);
  border-radius: 10px;
  box-shadow: var(--sombra);
}
.proceso__numero {
  width: 40px;
  height: 40px;
  background: var(--color-primario);
  color: var(--color-blanco);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin: 0 auto 0.75rem;
}
.proceso__nombre { font-weight: 600; color: var(--color-secundario); margin-bottom: 0.25rem; }
.proceso__texto { font-size: 0.9rem; color: var(--color-texto); }

/* Lista de áreas */

/* Sección única: CTA (izq) + Lista comunas con scroll (der) */
.cta-comunas {
  padding: 0;
  overflow: hidden;
  position: relative;
  margin-top: -1px;
}
/* Ola/curva decorativa entre beneficio y CTA (forma del SVG proporcionado) */
.cta-comunas::before {
  content: '';
  display: block;
  width: 100%;
  height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23161f32' d='M0,160L26.7,170.7C53.3,181,107,203,160,229.3C213.3,256,267,288,320,304C373.3,320,427,320,480,298.7C533.3,277,587,235,640,218.7C693.3,203,747,213,800,197.3C853.3,181,907,139,960,128C1013.3,117,1067,139,1120,165.3C1173.3,192,1227,224,1280,213.3C1333.3,203,1387,149,1413,122.7L1440,96L1440,320L1413.3,320C1386.7,320,1333,320,1280,320C1226.7,320,1173,320,1120,320C1066.7,320,1013,320,960,320C906.7,320,853,320,800,320C746.7,320,693,320,640,320C586.7,320,533,320,480,320C426.7,320,373,320,320,320C266.7,320,213,320,160,320C106.7,320,53,320,27,320L0,320Z'/%3E%3C/svg%3E") no-repeat center top;
  background-size: 100% 100%;
  position: relative;
  top: 0;
  left: 0;
}
@media (min-width: 769px) {
  .cta-comunas::before { height: 100px; }
}
.cta-comunas__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: auto;
  padding: 2rem 1rem 2.5rem;
  gap: 1.5rem;
  background-image:
    linear-gradient(to bottom, var(--color-secundario-oscuro) 0%, rgba(22, 31, 50, 0.94) 8%, rgba(22, 31, 50, 0.88) 100%),
    linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.9) 100%);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
@media (min-width: 769px) {
  .cta-comunas__inner {
    flex-direction: row;
    height: 100vh;
    min-height: 520px;
    align-items: center;
    justify-content: space-around;
    padding: 2rem 1.5rem;
    gap: 2rem;
    background-image:
      linear-gradient(to bottom, var(--color-secundario-oscuro) 0%, rgba(22, 31, 50, 0.92) 6%, rgba(22, 31, 50, 0) 16%),
      linear-gradient(135deg, rgba(30, 41, 59, 0.78) 0%, rgba(15, 23, 42, 0.85) 100%),
      url(../img/califondo.jpg);
  }
}
@media (min-width: 1024px) {
  .cta-comunas__inner { padding: 2rem 2.5rem; }
}
.cta-comunas__cta {
  padding: 0 0 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 100%;
  text-align: center;
}
@media (min-width: 769px) {
  .cta-comunas__cta { padding: 2.5rem 1.75rem 2rem; max-width: 520px; text-align: left; }
}
.cta-comunas__eyebrow {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.85);
  margin: 0 0 1.25rem;
  text-transform: uppercase;
  line-height: 1.3;
}
.cta-comunas__titulo {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.75rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
@media (min-width: 769px) {
  .cta-comunas__titulo { margin-bottom: 1.25rem; }
}
.cta-comunas__subtitulo {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.88);
  margin: 0 0 2rem;
  line-height: 1.55;
  max-width: 420px;
}
.cta-comunas__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--color-whatsapp);
  color: var(--color-blanco) !important;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  align-self: center;
  min-height: 48px;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
}
.cta-comunas__boton:hover {
  background: #1da851;
  color: var(--color-blanco);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
}
.cta-comunas__boton--agendar {
  background: var(--color-primario);
  box-shadow: 0 4px 16px rgba(13, 148, 136, 0.35);
}
.cta-comunas__boton--agendar:hover {
  background: var(--color-primario-oscuro);
  box-shadow: 0 6px 20px rgba(13, 148, 136, 0.45);
}
.cta-comunas__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
}
@media (min-width: 769px) {
  .cta-comunas__botones { justify-content: flex-start; }
}
.cta-comunas__comunas {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  height: auto;
  max-height: 65vh;
  min-height: 280px;
  border-radius: 16px;
  background: #fff;
  padding: 1.25rem 1rem 1rem;
  border: none;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 2px 12px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
}
@media (min-width: 769px) {
  .cta-comunas__comunas {
    width: 36%;
    min-width: 320px;
    max-width: 420px;
    height: 70%;
    max-height: 75vh;
    min-height: 400px;
    margin: 0;
    border-radius: 20px;
    padding: 1.5rem 1.5rem 1.25rem;
  }
}
.cta-comunas__comunas-titulo {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-secundario);
  margin: 0 0 0.35rem;
  letter-spacing: -0.02em;
  text-align: center;
}
.cta-comunas__comunas-intro {
  font-size: 0.85rem;
  color: var(--color-texto);
  margin: 0 0 1.25rem;
  opacity: 0.9;
  text-align: center;
  line-height: 1.4;
}
.cta-comunas__acordeon {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  border: none;
  border-radius: 12px;
  background: #f1f5f9;
  padding: 6px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
  -webkit-overflow-scrolling: touch;
}
.cta-comunas__acordeon::-webkit-scrollbar {
  width: 8px;
}
.cta-comunas__acordeon::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.04);
  border-radius: 4px;
  margin: 4px 0;
}
.cta-comunas__acordeon::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 4px;
}
.cta-comunas__acordeon::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.2);
}
.cta-comunas__nota {
  font-size: 0.8rem;
  color: var(--color-texto);
  margin: 1rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0,0,0,0.06);
  text-align: center;
}
.cta-comunas__nota a { font-weight: 500; }

@media (min-width: 769px) {

  .cta-comunas__cta { padding: 3rem 2.5rem 2.5rem; }
  .cta-comunas__titulo { font-size: 2.85rem; margin-bottom: 1.5rem; }
  .cta-comunas__subtitulo { font-size: 1.2rem; margin-bottom: 2.25rem; line-height: 1.6; }
  .cta-comunas__comunas { padding: 1.5rem; }
}

@media (min-width: 1024px) {
  .cta-comunas__inner { min-height: 400px; }
  .cta-comunas__titulo { font-size: 3.25rem; }
  .cta-comunas__subtitulo { font-size: 1.25rem; }
  .cta-comunas__boton { font-size: 1.15rem; padding: 1.1rem 2.25rem; }
}

/* Áreas acordeón (dentro de cta-comunas o solo): compacto y sutil */
.areas-cali__intro {
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  color: var(--color-texto);
}
/* Acordeón comunas dentro de CTA: diseño mejorado */
.cta-comunas__acordeon .areas-cali__item {
  border: none;
  border-radius: 10px;
  margin-bottom: 6px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.cta-comunas__acordeon .areas-cali__item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.cta-comunas__acordeon .areas-cali__item:last-child { margin-bottom: 0; }
.cta-comunas__acordeon .areas-cali__item summary {
  padding: 0.7rem 1rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-secundario);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 46px;
  transition: background 0.2s ease, color 0.2s ease;
}
.cta-comunas__acordeon .areas-cali__item summary::after {
  content: '+';
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 148, 136, 0.1);
  color: var(--color-primario);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease;
}
.cta-comunas__acordeon .areas-cali__item[open] summary::after {
  content: '−';
  background: var(--color-primario);
  color: #fff;
}
.cta-comunas__acordeon .areas-cali__item summary:hover {
  background: rgba(13, 148, 136, 0.04);
}
.cta-comunas__acordeon .areas-cali__item summary:hover::after {
  background: rgba(13, 148, 136, 0.18);
}
.cta-comunas__acordeon .areas-cali__item[open] summary {
  background: rgba(13, 148, 136, 0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.cta-comunas__acordeon .areas-cali__barrios,
.cta-comunas__acordeon .areas-cali__consulta {
  padding: 0.65rem 1rem 0.9rem;
  font-size: 0.83rem;
  background: var(--color-fondo-muy-claro);
  border-top: 1px solid rgba(0,0,0,0.05);
}
.cta-comunas__acordeon .areas-cali__barrios {
  gap: 0.4rem 0.65rem;
}
.cta-comunas__acordeon .areas-cali__barrios li {
  padding: 0.28rem 0.55rem;
  background: var(--color-borde-claro);
  border-radius: 6px;
  font-size: 0.81rem;
  color: var(--color-texto);
}
.areas-cali__acordeon {
  max-width: 420px;
  margin: 0 auto;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0,0,0,0.02);
}
.areas-cali__item {
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.areas-cali__item:last-child {
  border-bottom: none;
}
.areas-cali__item summary {
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  color: var(--color-texto);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.15s ease;
}
.areas-cali__item summary::-webkit-details-marker { display: none; }
.areas-cali__item summary::after {
  content: '+';
  font-size: 1rem;
  color: var(--color-primario);
  font-weight: 300;
}
.areas-cali__item[open] summary::after {
  content: '−';
}
.areas-cali__item summary:hover {
  background: rgba(13, 148, 136, 0.06);
}
.areas-cali__item[open] summary {
  background: rgba(13, 148, 136, 0.06);
  font-weight: 500;
}
.areas-cali__barrios,
.areas-cali__consulta {
  margin: 0;
  padding: 0.4rem 0.75rem 0.65rem;
  font-size: 0.8rem;
  color: var(--color-texto);
  background: #fff;
  border-top: 1px solid rgba(0,0,0,0.05);
}
.areas-cali__barrios {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
}
.areas-cali__barrios li {
  padding: 0.15rem 0.4rem;
  background: rgba(0,0,0,0.04);
  border-radius: 4px;
}
.areas-cali__consulta {
  line-height: 1.4;
}
.areas-cali__nota {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--color-texto);
}
.areas-cali__nota a { font-weight: 500; }

.lista-areas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
  list-style: none;
  margin-top: 1rem;
}
.lista-areas li { padding: 0.35rem 0; }

/* Contacto (mobile-first) */
.contacto-block {
  background: var(--color-blanco);
  padding: 1.25rem;
  border-radius: 10px;
  box-shadow: var(--sombra);
  margin-top: 1rem;
  max-width: 500px;
}
.contacto-block p { margin-bottom: 0.5rem; }
.contacto-block a { font-weight: 600; }
@media (min-width: 769px) {
  .contacto-block { padding: 2rem; }
}

/* Botón CTA */
.boton {
  display: inline-block;
  background: var(--color-primario);
  color: var(--color-blanco);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  transition: background var(--transicion);
  border: none;
  cursor: pointer;
  font-size: 1rem;
  min-height: 44px;
  line-height: 1.25;
  text-align: center;
}
.boton:hover { background: var(--color-primario-oscuro); color: var(--color-blanco); }

/* Footer (mobile-first) */
.pie {
  background: var(--color-secundario);
  color: var(--color-texto-muy-suave);
  padding: 0;
  position: relative;
  overflow: hidden;
}
.pie__svg-wrap {
  width: 100%;
  height: 40px;
  line-height: 0;
}
.pie__wave {
  width: 100%;
  height: 100%;
}
.pie__wave-path { opacity: 0.5; }
.pie__wave-line { }
.pie__inner {
  padding: 1.5rem 1rem 1rem;
  text-align: center;
}
.pie__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 2rem;
  max-width: 900px;
  margin: 0 auto;
}
.pie__block {
  text-align: center;
}
.pie__block--brand { text-align: center; }
.pie__brand {
  display: inline-block;
  font-family: 'BC Gaming', 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  color: var(--color-blanco);
  text-decoration: none;
  margin-bottom: 0.25rem;
}
.pie__brand:hover { color: var(--color-primario); }
.pie__tagline {
  font-size: 0.85rem;
  color: var(--color-texto-muy-suave);
  margin: 0;
  opacity: 0.9;
}
.pie__title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-texto-muy-suave);
  margin: 0 0 0.75rem;
  opacity: 0.9;
}
.pie__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pie__list li { margin-bottom: 0.5rem; }
.pie__list li:last-child { margin-bottom: 0; }
.pie__list a {
  color: var(--color-texto-suave);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color var(--transicion);
}
.pie__list a:hover { color: var(--color-blanco); }
.pie__list--contacto li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.pie__list--contacto a,
.pie__list--contacto span { display: inline-flex; align-items: center; gap: 0.5rem; }
.pie__icon {
  width: 1.25rem;
  text-align: center;
  color: var(--color-primario);
  font-size: 0.9rem;
}
.pie__icon--wa { color: var(--color-whatsapp); }
.pie__bottom {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}
.pie__copy {
  font-size: 0.8rem;
  margin: 0;
  color: var(--color-texto-muy-suave);
  opacity: 0.85;
}
.pie a { color: var(--color-texto-suave); }
.pie a:hover { color: var(--color-blanco); }
@media (min-width: 769px) {
  .pie__inner { padding: 2rem 1.5rem 1.25rem; }
  .pie__grid {
    grid-template-columns: 1fr auto auto;
    text-align: left;
    gap: 2rem 3rem;
  }
  .pie__block { text-align: left; }
  .pie__block--brand { text-align: left; }
  .pie__brand { font-size: 1.35rem; margin-bottom: 0.35rem; }
  .pie__tagline { font-size: 0.9rem; }
  .pie__title { margin-bottom: 0.85rem; font-size: 0.75rem; }
  .pie__list--contacto li { justify-content: flex-start; }
  .pie__bottom { margin-top: 1.75rem; padding-top: 1.25rem; }
  .pie__copy { font-size: 0.85rem; }
}

/* WhatsApp flotante: icono oficial, más grande y visible (safe-area para notch) */
.whatsapp-flotante {
  position: fixed;
  bottom: max(24px, env(safe-area-inset-bottom));
  right: max(24px, env(safe-area-inset-right));
  width: 56px;
  height: 56px;
  min-width: 48px;
  min-height: 48px;
  background: var(--color-whatsapp);
  color: var(--color-blanco);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);
  z-index: 999;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.whatsapp-flotante i {
  font-size: 1.75rem;
  line-height: 1;
}
.whatsapp-flotante:hover {
  transform: scale(1.1);
  color: var(--color-blanco);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.6);
}
@media (min-width: 480px) {
  .whatsapp-flotante { width: 64px; height: 64px; }
  .whatsapp-flotante i { font-size: 2rem; }
}
@media (min-width: 769px) {
  .whatsapp-flotante {
    width: 88px;
    height: 88px;
    bottom: max(28px, env(safe-area-inset-bottom));
    right: max(28px, env(safe-area-inset-right));
    font-size: 2.75rem;
  }
  .whatsapp-flotante i { font-size: 2.75rem; }
}

/* Página de producto */
.pagina-producto .hero__titulo { font-size: clamp(1.25rem, 3vw, 1.75rem); }
.pagina-producto .seccion:first-of-type { padding-top: 1.5rem; }

/* Respeta preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .cabecera__cta { animation: none !important; }
  .animar-entrada,
  .seccion--animar,
  .tarjeta-servicio,
  .tarjeta,
  .proceso__paso,
  .beneficio-card,
  .titulo-pregunta.seccion--animar h2,
  .servicio-card {
    transform: none !important;
    transition: none !important;
  }
  .hero-cta .boton--grande:hover { animation: none; }
  .bloque-presentacion__imagen:hover img,
  .tarjeta-servicio:hover .tarjeta-servicio__img img { transform: none; }
}

/* Lista de servicios / problemas en páginas de reparación */
.lista-servicio {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  max-width: 640px;
}
.lista-servicio li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-borde-claro);
  color: var(--color-texto);
}
.lista-servicio li:last-child { border-bottom: none; }
.lista-servicio .fa-check-circle {
  color: var(--color-primario);
  flex-shrink: 0;
}

/* Botón primario (igual que .boton, para semántica) */
.boton--primario { background: var(--color-primario); color: var(--color-blanco); }
.boton--primario:hover { background: var(--color-primario-oscuro); color: var(--color-blanco); }

/* Banda destacada en páginas de servicio */
.seccion--destacada {
  background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-primario-oscuro) 100%);
  color: var(--color-blanco);
  padding: 2rem 0;
}
.seccion__titulo--claro { color: var(--color-blanco); margin: 0; text-align: center; }

/* Lista de marcas (grid) */
.lista-marcas {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem 1.5rem;
  color: var(--color-texto);
}
.lista-marcas li {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--color-borde-claro);
}
.lista-marcas li:last-child { border-bottom: none; }

/* Grid marcas neveras: logo + texto, enlace a landing por marca */
.grid-marcas-neveras {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}
.marca-nevera-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--color-blanco);
  border-radius: 12px;
  text-decoration: none;
  color: var(--color-texto);
  border: 1px solid var(--color-borde-claro);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}
.marca-nevera-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  border-color: var(--color-primario);
  color: var(--color-texto);
}
.marca-nevera-card__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 44px;
}
.marca-nevera-card__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.marca-nevera-card__letra {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primario);
  color: var(--color-blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
}
.marca-nevera-card__texto {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
}
@media (min-width: 480px) {
  .grid-marcas-neveras { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .marca-nevera-card__logo { width: 80px; height: 48px; }
  .marca-nevera-card__texto { font-size: 1rem; }
}
@media (min-width: 769px) {
  .grid-marcas-neveras {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
  }
  .marca-nevera-card { padding: 1.25rem 1.5rem; }
  .marca-nevera-card__logo { width: 88px; height: 52px; }
}

/* Qué incluye: tarjetas dinámicas con CTA */
.incluye-servicio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.incluye-servicio__card {
  background: var(--color-blanco);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  text-align: center;
  border: 1px solid var(--color-borde-claro);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
}
.incluye-servicio__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primario), var(--color-primario-oscuro));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s ease;
}
.incluye-servicio__card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  border-color: var(--color-primario);
}
.incluye-servicio__card:hover::before {
  transform: scaleX(1);
}
.incluye-servicio__card:hover .incluye-servicio__icono {
  transform: scale(1.1);
  color: var(--color-primario-oscuro);
}
.incluye-servicio__icono {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.15) 0%, rgba(13, 148, 136, 0.08) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primario);
  font-size: 1.5rem;
  transition: transform 0.3s ease, color 0.25s ease;
}
.incluye-servicio__titulo {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-texto-oscuro);
  margin-bottom: 0.5rem;
}
.incluye-servicio__texto {
  font-size: 0.9rem;
  color: var(--color-texto);
  line-height: 1.45;
  margin-bottom: 1.25rem;
}
.incluye-servicio__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 100px;
  text-decoration: none;
  background: var(--color-primario);
  color: var(--color-blanco);
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
  box-shadow: 0 3px 12px rgba(13, 148, 136, 0.35);
}
.incluye-servicio__cta:hover {
  background: var(--color-primario-oscuro);
  color: var(--color-blanco);
  transform: scale(1.05);
  box-shadow: 0 5px 18px rgba(13, 148, 136, 0.45);
}
.incluye-servicio__cta--whatsapp {
  background: var(--color-whatsapp);
  box-shadow: 0 3px 12px rgba(37, 211, 102, 0.4);
}
.incluye-servicio__cta--whatsapp:hover {
  background: #1da851;
  color: var(--color-blanco);
  box-shadow: 0 5px 18px rgba(37, 211, 102, 0.5);
}
@media (min-width: 600px) {
  .incluye-servicio {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    margin-top: 2rem;
  }
  .incluye-servicio__card { padding: 2rem 1.5rem; }
  .incluye-servicio__icono { width: 72px; height: 72px; font-size: 1.65rem; }
  .incluye-servicio__titulo { font-size: 1.2rem; }
}
.seccion--animar.visible .incluye-servicio__card {
  animation: fadeInUp 0.5s var(--animacion-ease) forwards;
}
.seccion--animar .incluye-servicio__card { opacity: 0; transform: translateY(24px); }
.seccion--animar.visible .incluye-servicio__card:nth-child(1) { animation-delay: 0.08s; }
.seccion--animar.visible .incluye-servicio__card:nth-child(2) { animation-delay: 0.18s; }
.seccion--animar.visible .incluye-servicio__card:nth-child(3) { animation-delay: 0.28s; }

/* Grid problemas que reparamos (neveras) */
.problemas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.problemas-grid__card {
  background: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.problemas-grid__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--color-primario);
  border-radius: 4px 0 0 4px;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.3s var(--animacion-ease);
}
.problemas-grid__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  border-color: var(--color-primario);
}
.problemas-grid__card:hover::before { transform: scaleY(1); }
.problemas-grid__icono {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(13, 148, 136, 0.12);
  color: var(--color-primario);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
  transition: transform 0.25s ease, background 0.25s ease;
}
.problemas-grid__card:hover .problemas-grid__icono {
  transform: scale(1.08);
  background: rgba(13, 148, 136, 0.18);
}
.problemas-grid__titulo {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-texto-oscuro);
  line-height: 1.35;
  margin: 0 0 0.75rem;
}
.problemas-grid__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primario);
  margin-top: auto;
  transition: gap 0.2s ease, color 0.2s ease;
}
.problemas-grid__cta:hover { color: var(--color-primario-oscuro); gap: 0.6rem; }
.problemas-grid__cta i { font-size: 0.75rem; }
.problemas-grid__footer {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--color-texto);
}
.problemas-grid__footer a {
  color: var(--color-primario);
  font-weight: 600;
}
.problemas-grid__footer a:hover { text-decoration: underline; }
@media (min-width: 768px) {
  .problemas-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
  }
  .problemas-grid__card { padding: 1.75rem 1.5rem; }
  .problemas-grid__titulo { font-size: 1.1rem; }
}
@media (min-width: 1024px) {
  .problemas-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}
.seccion--animar .problemas-grid__card { opacity: 0; transform: translateY(20px); }
.seccion--animar.visible .problemas-grid__card {
  animation: fadeInUp 0.45s var(--animacion-ease) forwards;
}
.seccion--animar.visible .problemas-grid__card:nth-child(1) { animation-delay: 0.05s; }
.seccion--animar.visible .problemas-grid__card:nth-child(2) { animation-delay: 0.1s; }
.seccion--animar.visible .problemas-grid__card:nth-child(3) { animation-delay: 0.15s; }
.seccion--animar.visible .problemas-grid__card:nth-child(4) { animation-delay: 0.2s; }
.seccion--animar.visible .problemas-grid__card:nth-child(5) { animation-delay: 0.25s; }
.seccion--animar.visible .problemas-grid__card:nth-child(6) { animation-delay: 0.3s; }
.seccion--animar.visible .problemas-grid__card:nth-child(7) { animation-delay: 0.35s; }
.seccion--animar.visible .problemas-grid__card:nth-child(8) { animation-delay: 0.4s; }
.seccion--animar.visible .problemas-grid__card:nth-child(9) { animation-delay: 0.45s; }
.seccion--animar.visible .problemas-grid__card:nth-child(10) { animation-delay: 0.5s; }
.seccion--animar.visible .problemas-grid__card:nth-child(11) { animation-delay: 0.55s; }

/* Consejos de prevención (daños comunes neveras) */
.consejos-prevencion {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.consejos-prevencion__card {
  background: var(--color-blanco);
  border: 1px solid var(--color-borde-claro);
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.consejos-prevencion__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
  border-color: var(--color-primario);
}
.consejos-prevencion__icono {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(13, 148, 136, 0.12);
  color: var(--color-primario);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  transition: transform 0.25s ease;
}
.consejos-prevencion__card:hover .consejos-prevencion__icono { transform: scale(1.08); }
.consejos-prevencion__titulo {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-texto-oscuro);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}
.consejos-prevencion__texto {
  font-size: 0.9rem;
  color: var(--color-texto);
  line-height: 1.5;
  margin: 0;
}
@media (min-width: 768px) {
  .consejos-prevencion {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
  }
  .consejos-prevencion__card { padding: 1.75rem 1.5rem; }
}
@media (min-width: 1024px) {
  .consejos-prevencion { grid-template-columns: repeat(4, 1fr); }
}
.seccion--animar .consejos-prevencion__card { opacity: 0; transform: translateY(20px); }
.seccion--animar.visible .consejos-prevencion__card {
  animation: fadeInUp 0.45s var(--animacion-ease) forwards;
}
.seccion--animar.visible .consejos-prevencion__card:nth-child(1) { animation-delay: 0.06s; }
.seccion--animar.visible .consejos-prevencion__card:nth-child(2) { animation-delay: 0.12s; }
.seccion--animar.visible .consejos-prevencion__card:nth-child(3) { animation-delay: 0.18s; }
.seccion--animar.visible .consejos-prevencion__card:nth-child(4) { animation-delay: 0.24s; }

/* Bloque fallas técnicas + CTA mantenimiento */
.daños-fallas {
  margin-top: 2rem;
  padding: 1.75rem 1.5rem;
  background: var(--color-fondo-claro);
  border-radius: 16px;
  border-left: 4px solid var(--color-primario);
}
.daños-fallas__titulo {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-secundario);
  margin: 0 0 1rem;
}
.daños-fallas__lista {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.daños-fallas__lista li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: var(--color-texto);
  line-height: 1.45;
}
.daños-fallas__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primario);
}
.daños-fallas__mantenimiento {
  font-size: 0.95rem;
  color: var(--color-texto);
  line-height: 1.5;
  margin: 0 0 1.25rem;
}
.daños-fallas__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-blanco);
  background: var(--color-whatsapp);
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(37, 211, 102, 0.35);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.daños-fallas__cta:hover {
  background: #1da851;
  color: var(--color-blanco);
  transform: scale(1.03);
  box-shadow: 0 5px 18px rgba(37, 211, 102, 0.45);
}
.daños-fallas__cta--agendar {
  background: var(--color-primario);
  box-shadow: 0 3px 12px rgba(13, 148, 136, 0.35);
}
.daños-fallas__cta--agendar:hover {
  background: var(--color-primario-oscuro);
  box-shadow: 0 5px 18px rgba(13, 148, 136, 0.45);
}

/* Repuestos por categorías */
.repuestos-categorias {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.repuestos-categorias__card {
  background: var(--color-blanco);
  border: 1px solid var(--color-borde-claro);
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.repuestos-categorias__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
  border-color: var(--color-primario);
}
.repuestos-categorias__icono {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(13, 148, 136, 0.12);
  color: var(--color-primario);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  transition: transform 0.25s ease;
}
.repuestos-categorias__card:hover .repuestos-categorias__icono { transform: scale(1.08); }
.repuestos-categorias__titulo {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-texto-oscuro);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}
.repuestos-categorias__texto {
  font-size: 0.9rem;
  color: var(--color-texto);
  line-height: 1.5;
  margin: 0;
}
@media (min-width: 768px) {
  .repuestos-categorias {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
  }
  .repuestos-categorias__card { padding: 1.75rem 1.5rem; }
}
@media (min-width: 1024px) {
  .repuestos-categorias { grid-template-columns: repeat(4, 1fr); }
}
.seccion--animar .repuestos-categorias__card { opacity: 0; transform: translateY(20px); }
.seccion--animar.visible .repuestos-categorias__card {
  animation: fadeInUp 0.45s var(--animacion-ease) forwards;
}
.seccion--animar.visible .repuestos-categorias__card:nth-child(1) { animation-delay: 0.06s; }
.seccion--animar.visible .repuestos-categorias__card:nth-child(2) { animation-delay: 0.12s; }
.seccion--animar.visible .repuestos-categorias__card:nth-child(3) { animation-delay: 0.18s; }
.seccion--animar.visible .repuestos-categorias__card:nth-child(4) { animation-delay: 0.24s; }

.repuestos-cta {
  margin-top: 2rem;
  padding: 1.5rem 1.25rem;
  background: var(--color-fondo-claro);
  border-radius: 14px;
  text-align: center;
}
.repuestos-cta__texto {
  font-size: 0.95rem;
  color: var(--color-texto);
  line-height: 1.5;
  margin: 0 0 1rem;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.repuestos-cta__boton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Enlace volver (landing por marca) */
.enlace-volver {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--color-primario);
}
.enlace-volver:hover { color: var(--color-primario-oscuro); }

/* Lista de repuestos (3 columnas en desktop) */
.lista-repuestos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 2rem;
  margin: 1.5rem 0;
}
.lista-repuestos ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lista-repuestos li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--color-borde-claro);
  color: var(--color-texto);
}
@media (min-width: 600px) {
  .lista-repuestos { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .lista-repuestos { grid-template-columns: repeat(3, 1fr); }
}

/* Lista proceso (cómo lo hacemos) */
.lista-proceso {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  max-width: 720px;
}
.lista-proceso li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-borde-claro);
  color: var(--color-texto);
  padding-left: 0.5rem;
}
.lista-proceso li:last-child { border-bottom: none; }
.lista-proceso strong { color: var(--color-primario); }

/* Timeline proceso (cómo lo hacemos) */
.proceso-timeline {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  max-width: 640px;
  position: relative;
}
.proceso-timeline::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-primario) 0%, rgba(13, 148, 136, 0.3) 100%);
  border-radius: 2px;
}
.proceso-timeline__paso {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding-bottom: 1.5rem;
  position: relative;
}
.proceso-timeline__paso:last-child { padding-bottom: 0; }
.proceso-timeline__numero {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primario);
  color: var(--color-blanco);
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.proceso-timeline__paso:hover .proceso-timeline__numero {
  transform: scale(1.12);
  box-shadow: 0 3px 12px rgba(13, 148, 136, 0.45);
}
.proceso-timeline__contenido {
  padding-top: 0.1rem;
}
.proceso-timeline__titulo {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primario);
  margin: 0 0 0.35rem;
  line-height: 1.3;
}
.proceso-timeline__texto {
  font-size: 0.95rem;
  color: var(--color-texto);
  line-height: 1.5;
  margin: 0;
}
.seccion--animar .proceso-timeline__paso {
  opacity: 0;
  transform: translateX(-16px);
}
.seccion--animar.visible .proceso-timeline__paso {
  animation: fadeInRight 0.4s var(--animacion-ease) forwards;
}
.seccion--animar.visible .proceso-timeline__paso:nth-child(1) { animation-delay: 0.05s; }
.seccion--animar.visible .proceso-timeline__paso:nth-child(2) { animation-delay: 0.1s; }
.seccion--animar.visible .proceso-timeline__paso:nth-child(3) { animation-delay: 0.15s; }
.seccion--animar.visible .proceso-timeline__paso:nth-child(4) { animation-delay: 0.2s; }
.seccion--animar.visible .proceso-timeline__paso:nth-child(5) { animation-delay: 0.25s; }
.seccion--animar.visible .proceso-timeline__paso:nth-child(6) { animation-delay: 0.3s; }
.seccion--animar.visible .proceso-timeline__paso:nth-child(7) { animation-delay: 0.35s; }
.seccion--animar.visible .proceso-timeline__paso:nth-child(8) { animation-delay: 0.4s; }
.seccion--animar.visible .proceso-timeline__paso:nth-child(9) { animation-delay: 0.45s; }

.seccion__intro { margin-bottom: 0.75rem; color: var(--color-texto); }
.seccion__cta-texto { margin-top: 1.5rem; }

.boton--whatsapp {
  background: var(--color-whatsapp);
  color: var(--color-blanco);
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.boton--whatsapp:hover {
  filter: brightness(1.08);
  color: var(--color-blanco);
  background: #25d366;
}

.boton--agendar {
  background: var(--color-primario);
  color: var(--color-blanco);
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.boton--agendar:hover {
  background: var(--color-primario-oscuro);
  color: var(--color-blanco);
}

/* Botones CTA destacados (más grandes y dinámicos) */
.botones-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}
.botones-cta .boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, filter 0.2s ease;
}
.botones-cta .boton i {
  font-size: 1.15em;
}
.botones-cta .boton:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}
.botones-cta .boton:active {
  transform: translateY(-1px);
}

/* Tamaño XL para botones principales */
.boton--xl {
  padding: 1rem 1.75rem;
  font-size: 1.1rem;
  border-radius: 12px;
  min-height: 52px;
}
@media (min-width: 480px) {
  .boton--xl {
    padding: 1.1rem 2rem;
    font-size: 1.15rem;
    min-height: 56px;
  }
  .botones-cta { gap: 1.25rem; margin-top: 1.75rem; }
}

/* ========== RESPONSIVE: móvil y pantallas muy pequeñas ========== */

/* Móvil genérico: evitar desbordes y mejorar legibilidad */
@media (max-width: 768px) {
  .bloque-presentacion {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .bloque-presentacion__texto {
    padding-inline: 0.5rem;
  }
  .seccion.contenedor > .seccion__titulo,
  .seccion.contenedor > p {
    padding-inline: 0.5rem;
  }
  .hero--con-imagen {
    min-height: 260px;
    height: auto;
    padding: 1.5rem 0.75rem 3.5rem;
  }
  .hero__contenido {
    padding: 0 0.5rem;
  }
  .hero__etiqueta {
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    margin-bottom: 0.35rem;
  }
  .hero__titulo {
    font-size: clamp(1.5rem, 7vw, 2.2rem);
    margin-bottom: 1rem;
    line-height: 1.25;
  }
  .hero__subtitulo {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    padding: 0 0.25rem;
  }
  .hero__subtitulo {
    display: none;
  }
  .hero-cat__subtitulo {
    display: none;
  }
  .hero__botones {
    max-width: calc(100% - 2rem);
    padding: 0 0.5rem;
    bottom: -1rem;
  }
  .hero__boton-oferta {
    padding: 0.85rem 1.25rem;
    font-size: 0.95rem;
    min-height: 48px;
  }
  .titulo-pregunta {
    padding: 1rem 0.75rem;
  }
  .titulo-pregunta h2 {
    font-size: clamp(1.1rem, 4.5vw, 1.5rem);
    line-height: 1.35;
    padding: 0 0.25rem;
  }
  .seccion {
    padding: 1.5rem 0;
  }
  .seccion__titulo {
    font-size: 1.2rem;
    padding: 0 0.25rem;
  }
  .grid-logos-marcas {
    padding: 0 0.75rem;
    gap: 0.75rem;
  }
  .grid-logos-marcas__celda {
    padding: 1rem 0.75rem;
  }
  .grid-logos-marcas__celda img {
    max-height: 48px;
  }
  .cta-comunas__inner {
    padding: 1.5rem 0.75rem 2rem;
  }
  .cta-comunas__eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
  }
  .cta-comunas__titulo {
    font-size: clamp(1.35rem, 5vw, 1.75rem);
  }
  .cta-comunas__subtitulo {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
  }
  .cta-comunas__boton {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
  .cta-comunas__comunas {
    max-height: 55vh;
    min-height: 260px;
    padding: 1rem 0.75rem;
  }
  .beneficio-seccion {
    padding: 1.5rem 0.75rem 2.5rem;
  }
  .beneficio-seccion__titulo {
    font-size: 1.4rem;
  }
  .beneficio-seccion__subtitulo {
    font-size: 0.9rem;
  }
  .beneficio-card__izq {
    width: 72px;
    padding: 0.75rem;
  }
  .beneficio-card__icono {
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
  }
  .beneficio-card__der {
    padding: 1rem 1rem 1rem 0.75rem;
  }
  .beneficio-card__titulo {
    font-size: 1rem;
  }
  .beneficio-card__texto {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .pie__inner { padding: 1.25rem 0.75rem; flex-direction: column; text-align: center; }
  .titulo-pregunta h2 { font-size: 1.15rem; line-height: 1.4; }
  .hero--con-imagen { min-height: 240px; padding: 1.25rem 0.5rem 3.25rem; }
  .servicio-card__titulo { font-size: 1rem; }
  .tarjeta-servicio__titulo {
    font-size: 0.95rem;
    padding: 0.85rem 0.75rem;
  }
  .seccion-domicilio__inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .seccion-domicilio__texto p {
    font-size: 0.95rem;
  }
  .seccion.contenedor > .seccion__titulo,
  .seccion.contenedor > p {
    padding-inline: 0.75rem;
  }

  /* Páginas reparaciones: bloques específicos en móvil */
  .hero.hero--neveras,
  .hero.hero--lg {
    min-height: 240px;
    padding: 1.25rem 0.75rem 3rem;
  }
  .hero.hero--neveras .hero__contenido,
  .hero.hero--lg .hero__contenido {
    padding: 0 0.5rem;
  }
  .hero.hero--neveras .hero__titulo,
  .hero.hero--lg .hero__titulo {
    font-size: clamp(1.25rem, 6vw, 1.75rem);
    line-height: 1.3;
  }
  .hero.hero--neveras .hero__subtitulo,
  .hero.hero--lg .hero__subtitulo {
    font-size: 0.9rem;
  }
  .bloque-presentacion {
    gap: 1.25rem;
    padding: 1rem 0.75rem;
  }
  .bloque-presentacion__texto {
    padding-inline: 0.75rem;
  }
  .bloque-presentacion__texto h2 {
    font-size: 1.2rem;
  }
  .bloque-presentacion__texto p {
    font-size: 0.95rem;
  }
  .bloque-presentacion__imagen {
    min-height: 200px;
  }
  .bloque-presentacion__imagen--logo {
    min-height: 180px;
    padding: 1.5rem;
  }
  .bloque-presentacion__imagen--logo img {
    max-height: 140px;
  }
  .botones-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    margin-top: 1.25rem;
  }
  .botones-cta .boton,
  .botones-cta .boton--xl {
    width: 100%;
    min-width: 0;
    justify-content: center;
    min-height: 48px;
    padding: 0.9rem 1rem;
    font-size: 1rem;
  }
  .grid-marcas-neveras {
    gap: 0.6rem;
    margin-top: 1rem;
    grid-template-columns: repeat(2, 1fr);
  }
  .marca-nevera-card {
    padding: 0.75rem 0.85rem;
    gap: 0.65rem;
    border-radius: 10px;
    min-height: 56px;
  }
  .marca-nevera-card__logo {
    width: 52px;
    height: 32px;
    flex-shrink: 0;
  }
  .marca-nevera-card__letra {
    width: 34px;
    height: 34px;
    font-size: 0.95rem;
  }
  .marca-nevera-card__texto {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
  }
  .seccion--destacada {
    padding: 1.5rem 0.75rem;
  }
  .seccion--destacada .seccion__titulo--claro {
    font-size: 1.1rem;
    line-height: 1.4;
    padding: 0 0.5rem;
  }
  .daños-fallas {
    margin-top: 1.5rem;
    padding: 1.25rem 1rem;
    border-radius: 12px;
  }
  .daños-fallas__titulo {
    font-size: 1.05rem;
  }
  .daños-fallas__lista li,
  .daños-fallas__mantenimiento {
    font-size: 0.9rem;
  }
  .daños-fallas__cta {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }
  .problemas-grid {
    gap: 1rem;
    margin-top: 1.25rem;
  }
  .problemas-grid__card {
    padding: 1.25rem 1rem;
  }
  .problemas-grid__titulo {
    font-size: 0.95rem;
    line-height: 1.35;
  }
  .problemas-grid__footer {
    font-size: 0.9rem;
    margin-top: 1.25rem;
  }
  .incluye-servicio {
    gap: 1.25rem;
    margin-top: 1.25rem;
  }
  .incluye-servicio__card {
    padding: 1.5rem 1.25rem;
  }
  .incluye-servicio__icono {
    width: 56px;
    height: 56px;
    font-size: 1.35rem;
  }
  .incluye-servicio__titulo {
    font-size: 1.05rem;
  }
  .incluye-servicio__texto {
    font-size: 0.85rem;
  }
  .incluye-servicio__cta {
    font-size: 0.85rem;
    padding: 0.6rem 1rem;
  }
  .repuestos-categorias {
    gap: 1rem;
    margin-top: 1.25rem;
  }
  .repuestos-categorias__card {
    padding: 1.25rem 1rem;
  }
  .repuestos-categorias__titulo {
    font-size: 1rem;
  }
  .repuestos-categorias__texto {
    font-size: 0.85rem;
  }
  .lista-marcas {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .lista-servicio li {
    font-size: 0.9rem;
    padding: 0.6rem 0;
  }
}

@media (max-width: 380px) {
  .topbar-one__info__item {
    font-size: 0.8rem;
  }
  .topbar-one__right__call__text {
    font-size: 0.9rem;
  }
  .cabecera__logo-line1 { font-size: 1.1rem; line-height: 1; }
  .cabecera__logo-lottie { width: 4.25rem !important; height: 4.25rem !important; min-width: 4.25rem !important; min-height: 4.25rem !important; }
  .hero__etiqueta {
    font-size: 1rem;
  }
  .hero__titulo {
    font-size: 1.35rem;
  }
  .beneficio-card--ancho .beneficio-card__titulo {
    font-size: 1rem;
  }
  .beneficio-card--ancho .beneficio-card__texto {
    font-size: 0.85rem;
  }
}

@media (max-width: 360px) {
  body { padding-top: 92px; }
  .cabecera { height: 48px; }
  .cabecera__logo-line1 { font-size: 1rem; line-height: 1; }
  .cabecera__logo-lottie { width: 3.5rem !important; height: 3.5rem !important; min-width: 3.5rem !important; min-height: 3.5rem !important; }
  .cabecera__logo-zona { min-width: 110px; padding: 0 1.25rem 0 0.5rem; }
  .topbar-one__inner { min-height: 40px; }
  .topbar-one__info, .topbar-one__right { min-height: 40px; }
  .contenedor {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .bloque-presentacion {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .bloque-presentacion__texto {
    padding-inline: 0.5rem;
  }
  .bloque-presentacion__texto h2 {
    font-size: 1.1rem;
  }
  .seccion.contenedor > .seccion__titulo {
    font-size: 1.1rem;
  }
  .seccion.contenedor > .seccion__titulo,
  .seccion.contenedor > p {
    padding-inline: 0.5rem;
  }
  .botones-cta .boton,
  .botones-cta .boton--xl {
    padding: 0.85rem 0.75rem;
    font-size: 0.95rem;
  }
  .hero__botones {
    max-width: calc(100% - 1rem);
  }
  .hero.hero--neveras .hero__titulo,
  .hero.hero--lg .hero__titulo {
    font-size: 1.15rem;
  }
  .grid-marcas-neveras {
    gap: 0.5rem;
  }
  .marca-nevera-card {
    padding: 0.75rem 0.85rem;
  }
  .marca-nevera-card__logo {
    width: 48px;
    height: 32px;
  }
  .marca-nevera-card__texto {
    font-size: 0.8rem;
  }
  .grid-servicios {
    gap: 1rem;
  }
  .grid-logos-marcas {
    padding: 0 0.5rem;
    gap: 0.5rem;
  }
  .grid-logos-marcas__celda {
    padding: 0.75rem 0.5rem;
  }
  .grid-logos-marcas__celda img {
    max-height: 42px;
  }
  .cta-comunas__comunas {
    max-width: 100%;
  }
  .pie__copy { font-size: 0.75rem; }
}

/* ══════════════════════════════════════════════════════════
   BUSCADOR DEL HOME — estado de error
═══════════════════════════════════════════════════════════ */
.hb-campo.hb-error .hb-trigger {
  border-color: #e53935 !important;
  box-shadow: 0 0 0 2px rgba(229,57,53,0.22) !important;
  animation: hb-shake 0.35s ease;
}

@keyframes hb-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-5px); }
  60%       { transform: translateX(5px); }
  80%       { transform: translateX(-3px); }
}

.hb-tooltip-error {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #c62828;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  pointer-events: none;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.hb-tooltip-error[hidden] {
  display: none;
}

.hb-tooltip-error::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #c62828;
}

/* El campo necesita position relative para el tooltip */
.hb-campo[data-hb-id="electrodomestico"] {
  position: relative;
}

/* ══════════════════════════════════════════════════════════
   SELECTOR INTERACTIVO DE SERVICIO — formulario agendar
═══════════════════════════════════════════════════════════ */
.selector-servicio {
  background: #f0f7ff;
  border: 1.5px solid #c3d9f5;
  border-radius: 14px;
  margin-bottom: 2rem;
  overflow: visible;
}

.selector-servicio__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem;
  min-width: 0;
}

.selector-servicio__cabecera {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.selector-servicio__icono {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--color-primario, #1565c0);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.3rem;
}

.selector-servicio__cabecera-texto {
  min-width: 0;
}

.selector-servicio__titulo {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-texto, #1a1a2e);
  margin: 0 0 0.2rem;
  line-height: 1.3;
}

.selector-servicio__desc {
  font-size: 0.875rem;
  color: #5c6b80;
  margin: 0;
}

/* Select personalizado: trigger + dropdown con iconos */
.selector-servicio__electro-select {
  position: relative;
  margin: 0.5rem 0 0;
}

.selector-servicio__select-trigger {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 2px solid #c3d9f5;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a1a2e;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

.selector-servicio__select-trigger:hover {
  border-color: var(--color-primario, #1565c0);
  background: #f0f7ff;
}

.selector-servicio__select-trigger:focus {
  outline: none;
  border-color: var(--color-primario, #1565c0);
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.2);
}

.selector-servicio__select-trigger[aria-expanded="true"] {
  border-color: var(--color-primario, #1565c0);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.selector-servicio__select-trigger-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.selector-servicio__select-trigger-icon:empty {
  display: none;
}

.selector-servicio__select-trigger-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.selector-servicio__select-trigger-label {
  flex: 1;
  min-width: 0;
}

.selector-servicio__select-trigger-arrow {
  flex-shrink: 0;
  font-size: 0.8rem;
  color: #64748b;
  transition: transform 0.2s;
}

.selector-servicio__select-trigger[aria-expanded="true"] .selector-servicio__select-trigger-arrow {
  transform: rotate(180deg);
}

.selector-servicio__select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: min(55vh, 340px);
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  border: 2px solid var(--color-primario, #1565c0);
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 20;
  padding: 0.5rem;
  padding-bottom: 1rem;
  -webkit-overflow-scrolling: touch;
}

.selector-servicio__select-dropdown[hidden] {
  display: none;
}

/* Escritorio: sin select, grid siempre visible como antes */
@media (min-width: 768px) {
  .selector-servicio__select-trigger {
    display: none;
  }
  .selector-servicio__select-dropdown {
    position: static;
    display: block;
    max-height: none;
    overflow: visible;
    border: none;
    border-top: none;
    box-shadow: none;
    padding: 0.5rem 0 0;
  }
  .selector-servicio__select-dropdown[hidden] {
    display: block;
  }
}

/* Móvil: lista compacta (1 fila por equipo). Escritorio: grid de tarjetas */
.selector-servicio__electro-grid {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
}

.selector-servicio__card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  min-height: 48px;
  background: #fff;
  border: 2px solid #c3d9f5;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1a1a2e;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  overflow: visible;
}

.selector-servicio__card:hover {
  border-color: var(--color-primario, #1565c0);
  background: #f0f7ff;
}

.selector-servicio__card:focus {
  outline: none;
  border-color: var(--color-primario, #1565c0);
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.2);
}

.selector-servicio__card--seleccionado,
.selector-servicio__card[aria-pressed="true"] {
  border-color: var(--color-primario, #1565c0);
  background: #e3f2fd;
  box-shadow: 0 0 0 2px rgba(21, 101, 192, 0.25);
}

.selector-servicio__card-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.selector-servicio__card-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.selector-servicio__card-label {
  flex: 1;
  min-width: 0;
  text-align: left;
  line-height: 1.35;
  word-break: normal;
  overflow-wrap: break-word;
  min-height: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
  box-sizing: border-box;
}

/* A partir de 768px: grid de tarjetas (escritorio/tablet) */
@media (min-width: 768px) {
  .selector-servicio__electro-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
  }

  .selector-servicio__card {
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 1.25rem 0.5rem;
    min-height: 150px;
    height: 100%;
  }

  .selector-servicio__card-icon {
    width: 56px;
    height: 56px;
  }

  .selector-servicio__card-icon img {
    width: 52px;
    height: 52px;
  }

  .selector-servicio__card-label {
    flex: none;
    width: 100%;
    text-align: center;
    justify-content: center;
    min-height: 2.85em;
    padding: 0 0.15rem;
  }
}

/* Select oculto: solo para lógica, no visible */
.selector-servicio__select-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.selector-servicio__campos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.selector-servicio__campo--marca {
  grid-column: 1 / -1;
  width: 100%;
}

.selector-servicio__campo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.selector-servicio__campo label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #334155;
}

.selector-servicio__campo--marca label {
  font-size: 0.95rem;
}

.selector-servicio__opcional {
  font-weight: 400;
  color: #8898aa;
  font-size: 0.85rem;
}

.selector-servicio__campo select {
  width: 100%;
  max-width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #c3d9f5;
  border-radius: 10px;
  font-size: 1rem;
  background: #fff;
  color: #1a1a2e;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  appearance: auto;
  box-sizing: border-box;
}

.selector-servicio__campo--marca select {
  padding: 0.9rem 1.15rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  background: linear-gradient(to bottom, #fafbff 0%, #f5f8ff 100%);
  border-color: #b8d4f0;
  color: #1e293b;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

.selector-servicio__campo--marca select option {
  padding: 0.5rem 0.75rem;
  font-size: 0.98rem;
  font-weight: 500;
  background: #fff;
  color: #1e293b;
}

.selector-servicio__campo--marca select option:first-child {
  color: #64748b;
  font-weight: 400;
}

.selector-servicio__campo select:focus {
  outline: none;
  border-color: var(--color-primario, #1565c0);
  box-shadow: 0 0 0 3px rgba(21,101,192,0.12);
}

.selector-servicio__campo--marca select:focus {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

.selector-servicio__campo select:disabled {
  background: #f1f5f9;
  color: #64748b;
  cursor: not-allowed;
  border-color: #e2e8f0;
}

.selector-servicio__campo--marca select:disabled {
  background: #f8fafc;
  box-shadow: none;
}

.selector-servicio__error {
  font-size: 0.85rem;
  color: #c62828;
  background: #fff3f3;
  border-left: 3px solid #e53935;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  margin-top: 0.25rem;
}

.selector-servicio__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  background: var(--color-primario, #1565c0);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.selector-servicio__btn:hover {
  background: var(--color-primario-oscuro, #0d47a1);
  transform: translateY(-1px);
}

.selector-servicio__btn:active {
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   NIVEL 2 — Estilos exclusivos para pagina-servicio-marca (prefijo m2-)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variables compartidas nivel 2 ───────────────────────────────────────── */
:root {
  --m2-radio: 16px;
  --m2-sombra: 0 4px 20px rgba(0,0,0,0.08);
  --m2-sombra-hover: 0 8px 28px rgba(0,0,0,0.14);
  --m2-fondo-alt: #f4f8f7;
  --m2-color-top: var(--color-primario, #0d9488);
}

/* ── 1. Bloque presentacion mejorado ──────────────────────────────────────── */
.m2-intro .bloque-presentacion__imagen--destacada {
  border-radius: var(--m2-radio);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.13);
  position: relative;
}

.m2-intro .bloque-presentacion__imagen--destacada img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--m2-radio);
  transition: transform 0.4s ease;
}

.m2-intro .bloque-presentacion__imagen--destacada:hover img {
  transform: scale(1.025);
}

.m2-intro .trust-badge {
  font-size: 0.82rem;
  padding: 0.4rem 1rem;
  border-width: 1.5px;
  box-shadow: 0 1px 4px rgba(13,148,136,0.10);
}

.m2-intro .botones-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* ── 2. Cobertura ─────────────────────────────────────────────────────────── */
.m2-cobertura {
  background: var(--m2-fondo-alt);
}

.m2-cobertura__inner {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  background: #fff;
  border-radius: var(--m2-radio);
  padding: 2rem 2rem 2rem 1.75rem;
  box-shadow: var(--m2-sombra);
  border-left: 4px solid var(--m2-color-top);
}

.m2-cobertura__icono-dec {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-primario, #0d9488) 0%, var(--color-primario-oscuro, #0a7c72) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 4px 12px rgba(13,148,136,0.25);
}

.m2-cobertura__contenido {
  flex: 1;
}

.m2-cobertura__contenido .seccion__titulo {
  margin-top: 0;
}

.m2-cobertura__texto {
  max-width: 72ch;
  line-height: 1.7;
  color: var(--color-texto, #374151);
}

@media (max-width: 600px) {
  .m2-cobertura__inner {
    flex-direction: column;
    padding: 1.5rem 1.25rem;
  }
}

/* ── 3. Modelos / Chips ───────────────────────────────────────────────────── */
.m2-modelos__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.25rem;
  margin-bottom: 1.75rem;
}

.m2-modelos__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: #fff;
  border: 1.5px solid var(--color-primario, #0d9488);
  color: var(--color-primario, #0d9488);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 1px 6px rgba(13,148,136,0.10);
  transition: background 0.2s, color 0.2s, transform 0.15s;
}

.m2-modelos__chip i {
  font-size: 0.75rem;
  flex-shrink: 0;
}

.m2-modelos__chip:hover {
  background: var(--color-primario, #0d9488);
  color: #fff;
  transform: translateY(-1px);
}

.m2-modelos__cta {
  text-align: center;
  margin-top: 0.5rem;
}

/* ── 5. Qué incluye — override dentro de nivel 2 ─────────────────────────── */
.m2-incluye {
  background: var(--m2-fondo-alt);
}

.m2-incluye__wrapper .incluye-servicio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.m2-incluye__wrapper .incluye-servicio__card {
  background: #fff;
  border-radius: var(--m2-radio);
  padding: 2rem 1.5rem 1.5rem;
  box-shadow: var(--m2-sombra);
  border-top: 4px solid var(--m2-color-top);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
  border-left: none;
}

.m2-incluye__wrapper .incluye-servicio__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--m2-sombra-hover);
}

.m2-incluye__wrapper .incluye-servicio__icono {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primario, #0d9488) 0%, var(--color-primario-oscuro, #0a7c72) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 14px rgba(13,148,136,0.25);
}

.m2-incluye__wrapper .incluye-servicio__titulo {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--color-titulo, #1a202c);
}

.m2-incluye__wrapper .incluye-servicio__texto {
  font-size: 0.9rem;
  color: var(--color-texto, #374151);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 1.25rem;
}

.m2-incluye__wrapper .incluye-servicio__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.5rem 1.1rem;
  border-radius: 8px;
  background: var(--color-primario, #0d9488);
  color: #fff;
  text-decoration: none;
  transition: background 0.2s;
  border: none;
}

.m2-incluye__wrapper .incluye-servicio__cta--whatsapp {
  background: #25d366;
}

.m2-incluye__wrapper .incluye-servicio__cta:hover {
  background: var(--color-primario-oscuro, #0a7c72);
}

.m2-incluye__wrapper .incluye-servicio__cta--whatsapp:hover {
  background: #1da851;
}

/* ── 6. Problemas — grid mejorado ────────────────────────────────────────── */
.m2-problemas__grid .m2-problemas__card {
  background: #fff;
  border-radius: var(--m2-radio);
  padding: 1.75rem 1.25rem 1.25rem;
  box-shadow: var(--m2-sombra);
  border-top: 3px solid var(--m2-color-top);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.m2-problemas__card::before {
  display: none !important;
}

.m2-problemas__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--m2-sombra-hover);
}

.m2-problemas__icono {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(13,148,136,0.12) 0%, rgba(13,148,136,0.06) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--color-primario, #0d9488);
  margin-bottom: 0.85rem;
}

.m2-problemas__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-primario, #0d9488);
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  background: rgba(13,148,136,0.08);
  text-decoration: none;
  margin-top: auto;
  transition: background 0.2s, color 0.2s;
}

.m2-problemas__cta:hover {
  background: var(--color-primario, #0d9488);
  color: #fff;
}

/* ── 7. Fallas / Daños — layout 2 columnas ───────────────────────────────── */
.m2-daños {
  background: var(--m2-fondo-alt);
}

.m2-daños__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin-top: 1.25rem;
}

@media (min-width: 769px) {
  .m2-daños__layout {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 2.5rem;
  }
}

.m2-daños__lista-col {
  background: #fff;
  border-radius: var(--m2-radio);
  padding: 1.75rem;
  box-shadow: var(--m2-sombra);
  border-left: 4px solid var(--color-primario, #0d9488);
}

.m2-daños__subtitulo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-titulo, #1a202c);
  margin-top: 0;
  margin-bottom: 1rem;
}

.m2-daños__lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.m2-daños__lista li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-texto, #374151);
}

.m2-daños__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primario, #0d9488);
  flex-shrink: 0;
}

.m2-daños__cta-col {
  display: flex;
  flex-direction: column;
}

.m2-daños__cta-card {
  background: #fff;
  border-radius: var(--m2-radio);
  padding: 2rem;
  box-shadow: var(--m2-sombra);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  height: 100%;
}

.m2-daños__cta-icono {
  font-size: 2rem;
  color: var(--color-primario, #0d9488);
  background: rgba(13,148,136,0.10);
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.m2-daños__mantenimiento {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--color-texto, #374151);
  margin: 0;
  flex: 1;
}

/* ── 8. Repuestos ─────────────────────────────────────────────────────────── */
.m2-repuestos__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

@media (min-width: 600px) {
  .m2-repuestos__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .m2-repuestos__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.m2-repuestos__card {
  background: #fff;
  border-radius: var(--m2-radio);
  padding: 1.75rem 1.25rem;
  box-shadow: var(--m2-sombra);
  border-top: 4px solid var(--m2-color-top);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.m2-repuestos__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--m2-sombra-hover);
}

.m2-repuestos__icono {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(13,148,136,0.14) 0%, rgba(13,148,136,0.06) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--color-primario, #0d9488);
  margin-bottom: 1rem;
}

.m2-repuestos__titulo {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-titulo, #1a202c);
  margin-bottom: 0.5rem;
}

.m2-repuestos__texto {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--color-texto, #374151);
  flex: 1;
}

.m2-repuestos__cta {
  margin-top: 2.5rem;
  background: linear-gradient(135deg, var(--color-primario, #0d9488) 0%, var(--color-primario-oscuro, #0a7c72) 100%);
  border-radius: var(--m2-radio);
  padding: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.m2-repuestos__cta-texto {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
  max-width: 520px;
}

/* ── 9. Timeline mejorado para nivel 2 ───────────────────────────────────── */
.m2-proceso {
  background: var(--m2-fondo-alt);
}

.m2-proceso__wrapper .proceso-timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 100%;
  position: relative;
  list-style: none;
  padding: 0;
  margin-top: 1.75rem;
}

.m2-proceso__wrapper .proceso-timeline::before {
  display: none;
}

@media (min-width: 769px) {
  .m2-proceso__wrapper .proceso-timeline {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

.m2-proceso__wrapper .proceso-timeline__paso {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--m2-radio);
  padding: 1.5rem 1.25rem 1.25rem;
  box-shadow: var(--m2-sombra);
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
  border-top: 3px solid transparent;
  gap: 0;
}

.m2-proceso__wrapper .proceso-timeline__paso:hover {
  transform: translateY(-3px);
  box-shadow: var(--m2-sombra-hover);
  border-top-color: var(--m2-color-top);
}

@media (max-width: 768px) {
  .m2-proceso__wrapper .proceso-timeline__paso {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    border-top: none;
    border-left: 3px solid var(--m2-color-top);
    padding: 1.1rem 1.1rem 1.1rem 1.1rem;
    border-radius: 10px;
    margin-bottom: 0.75rem;
  }
  .m2-proceso__wrapper .proceso-timeline__paso:hover {
    transform: none;
    border-left-color: var(--color-primario-oscuro, #0a7c72);
  }
}

.m2-proceso__wrapper .proceso-timeline__numero {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primario, #0d9488) 0%, var(--color-primario-oscuro, #0a7c72) 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.85rem;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(13,148,136,0.3);
}

@media (max-width: 768px) {
  .m2-proceso__wrapper .proceso-timeline__numero {
    margin-bottom: 0;
  }
}

.m2-proceso__wrapper .proceso-timeline__contenido {
  flex: 1;
}

.m2-proceso__wrapper .proceso-timeline__titulo {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-titulo, #1a202c);
  margin-bottom: 0.35rem;
}

.m2-proceso__wrapper .proceso-timeline__texto {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--color-texto, #374151);
  margin: 0;
}

/* ── 10. Por qué elegirnos — cards verticales ────────────────────────────── */
.m2-beneficios__wrapper .beneficio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 600px) {
  .m2-beneficios__wrapper .beneficio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .m2-beneficios__wrapper .beneficio-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.m2-beneficios__wrapper .beneficio-card {
  background: #fff;
  border-radius: var(--m2-radio);
  padding: 2rem 1.5rem;
  box-shadow: var(--m2-sombra);
  border-top: 4px solid var(--m2-color-top);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
  min-height: unset;
}

.m2-beneficios__wrapper .beneficio-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--m2-sombra-hover);
}

.m2-beneficios__wrapper .beneficio-card__izq {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primario, #0d9488) 0%, var(--color-primario-oscuro, #0a7c72) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 1rem;
  margin-right: 0;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(13,148,136,0.25);
}

.m2-beneficios__wrapper .beneficio-card__der {
  flex: 1;
}

.m2-beneficios__wrapper .beneficio-card__der h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--color-titulo, #1a202c);
}

.m2-beneficios__wrapper .beneficio-card__der p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-texto, #374151);
  margin: 0;
}

/* ── 11. Teléfonos de soporte ─────────────────────────────────────────────── */
.m2-telefonos {
  background: var(--m2-fondo-alt);
}

.m2-telefonos__card {
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
  background: #fff;
  border-radius: var(--m2-radio);
  padding: 2rem 2rem 2rem 1.75rem;
  box-shadow: var(--m2-sombra);
  border-left: 4px solid var(--m2-color-top);
}

.m2-telefonos__icono-dec {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-primario, #0d9488) 0%, var(--color-primario-oscuro, #0a7c72) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 4px 12px rgba(13,148,136,0.25);
}

.m2-telefonos__contenido {
  flex: 1;
}

.m2-telefonos__contenido .seccion__titulo {
  margin-top: 0;
}

.m2-telefonos__texto {
  max-width: 64ch;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.m2-telefonos__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

@media (max-width: 600px) {
  .m2-telefonos__card {
    flex-direction: column;
    padding: 1.5rem 1.25rem;
  }

  .m2-telefonos__acciones {
    flex-direction: column;
    align-items: stretch;
  }

  .m2-telefonos__acciones .boton {
    text-align: center;
    justify-content: center;
  }
}

/* ── Sello de marca en bloque presentación nivel 2 ───────────────────────── */
.m2-presentacion__imagen-wrap {
  position: relative;
  overflow: visible !important;
}

.m2-presentacion__sello {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #fff;
  border-radius: 50px;
  padding: 0.55rem 1.25rem 0.55rem 0.85rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.14);
  border: 1.5px solid rgba(13,148,136,0.15);
  white-space: nowrap;
  z-index: 2;
}

.m2-presentacion__sello-texto {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-primario, #0d9488);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.m2-presentacion__sello-logo {
  height: 30px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

/* En mobile el sello queda debajo sin superponerse */
@media (max-width: 768px) {
  .m2-presentacion__sello {
    position: static;
    transform: none;
    margin: 1rem auto 0;
    width: fit-content;
  }

  .m2-presentacion__imagen-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

/* ── Fondos alternados nivel 2 ───────────────────────────────────────────── */
.m2-presentacion { background: #fff; }
.m2-intro        { background: #fff; }
.m2-cobertura    { background: var(--m2-fondo-alt); }
.m2-modelos      { background: #fff; }
.m2-incluye      { background: var(--m2-fondo-alt); }
.m2-problemas    { background: #fff; }
.m2-daños        { background: var(--m2-fondo-alt); }
.m2-repuestos    { background: #fff; }
.m2-proceso      { background: var(--m2-fondo-alt); }
.m2-beneficios   { background: #fff; }
.m2-telefonos    { background: var(--m2-fondo-alt); }

/* ── fin m2 ──────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════
   SPRINT 4 — Mejoras grid de marcas en móvil
══════════════════════════════════════════════════════════ */

/* Tap feedback en móvil (active state) */
@media (max-width: 768px) {
  .marca-nevera-card:active {
    transform: scale(0.97);
    background: #f0faf9;
    border-color: var(--color-primario);
  }
}

/* ≤480px: cards más compactas con logo más prominente */
@media (max-width: 480px) {
  .grid-marcas-neveras {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  .marca-nevera-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.85rem 0.5rem;
    gap: 0.4rem;
    min-height: 80px;
    justify-content: center;
  }
  .marca-nevera-card__logo {
    width: 64px;
    height: 38px;
  }
  .marca-nevera-card__texto {
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    width: 100%;
  }
  .marca-nevera-card__letra {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }
}

/* ══════════════════════════════════════════════════════════
   MEJORAS RESPONSIVE MÓVIL — prioridad teléfonos
   Aplicadas sobre la cascada existente
══════════════════════════════════════════════════════════ */

/* ── 1. Topbar: ocultar horario en teléfonos para evitar wrap ── */
@media (max-width: 480px) {
  .topbar-one__info__separador,
  .topbar-one__info__horario {
    display: none;
  }
  .topbar-one__info__item {
    gap: 0.4rem;
  }
}

/* ── 2. Header: mostrar botón CTA "Agendar" desde 480px ── */
@media (min-width: 480px) and (max-width: 768px) {
  .cabecera__cta {
    display: inline-flex;
    padding: 0.45rem 0.85rem;
    font-size: 0.78rem;
    margin: 0.35rem 0.5rem 0.35rem 0;
    gap: 0.35rem;
    box-shadow: 0 2px 10px rgba(44, 77, 143, 0.35);
  }
  .cabecera__cta i {
    font-size: 1em;
  }
}

/* ── 3. Buscador hero: tap targets mínimo 48px ── */
@media (max-width: 960px) {
  .hb-trigger {
    min-height: 52px;
  }
  .hero__buscador__btn {
    min-height: 52px;
  }
  .hero__buscador__campo {
    min-height: 52px;
  }
}

/* ── 4. Buscador hero en móvil: campos verticales más usables ── */
@media (max-width: 540px) {
  .hero__buscador__inner {
    flex-direction: column;
    min-height: unset;
    border-radius: 14px;
  }
  .hero__buscador__campo {
    min-height: 56px;
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid #e9eef4;
  }
  .hero__buscador__campo:last-of-type {
    border-bottom: none;
  }
  .hero__buscador__sep {
    display: none;
  }
  .hero__buscador__select {
    font-size: 1rem;
    min-height: 28px;
  }
  .hero__buscador__btn {
    border-radius: 0 0 14px 14px;
    min-height: 52px;
    justify-content: center;
    width: 100%;
  }
}

/* ── 5. Botones en acordeón de comunas: ancho completo en móvil ── */
@media (max-width: 600px) {
  .cta-comunas__acordeon .areas-cali__consulta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .cta-comunas__acordeon .areas-cali__consulta a,
  .cta-comunas__acordeon .areas-cali__consulta button {
    width: 100%;
    display: flex;
    justify-content: center;
    min-height: 48px;
    align-items: center;
    box-sizing: border-box;
  }
  .cta-comunas__botones {
    flex-direction: column;
    align-items: stretch;
  }
  .cta-comunas__boton {
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
}

/* ── 6. Formulario de agendamiento: mapa y botones en móvil ── */
@media (max-width: 600px) {
  .ubicacion-widget__mapa {
    height: 240px;
  }
  .form-agendar-wrap {
    padding: 1.5rem 1rem;
    border-radius: 14px;
  }
  .form-agendar__campo input,
  .form-agendar__campo select,
  .form-agendar__campo textarea {
    min-height: 48px;
    font-size: 1rem;
  }
  .form-agendar__boton {
    min-height: 52px;
    font-size: 1rem;
  }
  .paso3-nav__anterior {
    width: 52px;
    height: 52px;
  }
  .paso3-nav__enviar {
    height: 52px;
    font-size: 1rem;
  }
}

/* ── 7. Mejorar padding del contenedor en móviles pequeños ── */
@media (max-width: 360px) {
  .form-agendar-wrap {
    padding: 1.25rem 0.75rem;
  }
  .hero__buscador__inner {
    border-radius: 12px;
  }
}

/* ══════════════════════════════════════════════════════════
   SPRINT 2 — Heroes y Buscador en Móvil
══════════════════════════════════════════════════════════ */

/* ── 1. Hero buscador del index: quitar min-height y padding-bottom en móvil ── */
@media (max-width: 768px) {
  .hero--busqueda {
    min-height: unset;
    padding-bottom: 0;
  }
  .hero--busqueda__contenido {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 2rem;
    padding-bottom: 1rem;
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .hero--busqueda {
    min-height: unset;
  }
  .hero--busqueda .hero__col--texto .hero__titulo {
    font-size: clamp(1.6rem, 7vw, 2rem);
  }
  .hero__boton--agendar-hero {
    width: 100%;
    justify-content: center;
  }
}

/* ── 2. Hero categorías (nivel 1): padding-bottom y quitar doble padding del texto ── */
@media (max-width: 900px) {
  .hero-cat__inner {
    padding: 2rem 0 1.5rem;
  }
  .hero-cat__texto {
    padding: 0;
  }
}

/* ── 3. Hero categorías: imagen SVG menos agresiva + min-height libre en móvil ── */
@media (max-width: 600px) {
  .hero-cat {
    min-height: unset;
  }
  .hero-cat__imagen {
    max-height: 160px;
    mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  }
  .hero-cat__imagen img {
    max-width: 200px;
  }
  .hero-cat__titulo {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  /* Logo de marca nivel 2: reducir tamaño en móvil */
  .hero-cat__logo-marca-wrapper {
    padding: 0.3rem 0.75rem;
  }
  .hero-cat__logo-marca {
    height: 28px;
    max-width: 100px;
  }
}

/* ── 4. Hero categorías: breakpoint ≤480px — botones en columna, texto compacto ── */
@media (max-width: 480px) {
  .hero-cat__acciones {
    flex-direction: column;
    width: 100%;
    align-items: center;
    padding: 0 1rem;
  }
  .hero-cat__cta {
    width: 100%;
    max-width: 320px;
    justify-content: center;
    text-align: center;
    padding: 0.75rem 1rem;
  }
  .hero-cat__subtitulo {
    font-size: 0.9rem;
    line-height: 1.5;
  }
  .hero-cat__badge {
    font-size: 0.72rem;
  }
}

/* ══════════════════════════════════════════════════════════
   SPRINT 3 — SVG del hero se mueve a la segunda sección en móvil
══════════════════════════════════════════════════════════ */

/* Desktop: SVG del hero visible, SVG en segunda sección oculto */
.hero-cat__imagen--desktop {
  display: flex;
}
.bloque-presentacion__svg-movil,
.bloque-presentacion__imagen .bloque-presentacion__svg-movil {
  display: none !important;
}

/* Móvil ≤600px: ocultar SVG del hero, mostrar SVG en segunda sección */
@media (max-width: 600px) {
  .hero-cat__imagen--desktop {
    display: none;
  }
  .bloque-presentacion__img-desktop,
  .bloque-presentacion__imagen .bloque-presentacion__img-desktop {
    display: none !important;
  }
  .bloque-presentacion__svg-movil,
  .bloque-presentacion__imagen .bloque-presentacion__svg-movil {
    display: block !important;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.12));
  }
  /* La segunda sección en móvil: contenedor de imagen se adapta al SVG */
  .bloque-presentacion__imagen {
    aspect-ratio: unset;
    min-height: unset;
    overflow: visible;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    padding: 0.5rem 0;
  }
}

/* ══════════════════════════════════════════════════════════════
   BUSCADOR HERO — REDISEÑO MÓVIL ≤600px
   Compacta los campos al layout de fila (label | valor | flecha)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* 1. Cada campo: romper height:100% del base, layout fila compacta */
  .hb-trigger {
    height: auto;
    min-height: 48px;
    padding: 0.5rem 0.9rem;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    border-bottom: none;
  }
  .hb-trigger__label {
    font-size: 0.7rem;
    min-width: 80px;
    color: #64748b;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
    width: auto;
  }
  .hb-trigger__valor {
    font-size: 0.92rem;
    flex: 1;
    max-width: none;
  }
  .hb-trigger__arrow {
    position: static;
    transform: none;
    margin-left: auto;
    flex-shrink: 0;
  }

  /* 2. Separadores: usar border-bottom en .hb-campo en vez de .sep */
  .hero__buscador__sep {
    display: none;
  }
  .hb-campo:not(:last-child) {
    border-bottom: 1px solid #e8f0f5;
  }

  /* 3. Contenedor: sombra y radio reducidos */
  .hero__buscador__inner {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    border-radius: 14px;
  }

  /* 4. Botón: verde primario, integrado al borde inferior */
  .hero__buscador__btn {
    min-height: 50px;
    font-size: 0.95rem;
    border-radius: 0 0 14px 14px;
    background: var(--color-primario, #0d9488);
  }

  /* 5. Menú desplegable: position fixed para salir de cualquier overflow */
  .hb-menu {
    position: fixed;
    left: 1rem;
    right: 1rem;
    width: auto;
    top: auto;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    z-index: 9999;
  }

  /* 6. Opciones: tap targets generosos (mín. 44px WCAG) */
  .hb-opcion {
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    min-height: 44px;
    white-space: normal;
  }
}

/* ── Buscador hero: ocultar completamente en móvil ≤768px ── */
@media (max-width: 768px) {
  .hero__buscador {
    display: none;
  }
}