/* ════════════════════════════════════════════════════════════════════
   servicios-claro.css — el LISTADO con el estilo "Claro" (rediseño
   Apple, etapa 1, noviembre 2026). Render aprobado:
   docs/redisenio-apple/etapa1-listado.png
   Todo bajo body.to-claro: $SERVICIOS_CLARO = false en servicios.php
   devuelve el listado de siempre. Solo cambia la piel; la tarjeta la
   sigue armando buildServiceCard() y los tamaños compactos del celular
   ("zoom equilibrado", nov. 2026) se respetan.
   El header queda negro a propósito (como la barra de apple.com sobre
   páginas claras). Sin backdrop-filter ni animaciones nuevas.
   ════════════════════════════════════════════════════════════════════ */

body.to-claro { background: var(--c-bg); font-family: var(--to-font); -webkit-font-smoothing: antialiased; color: var(--c-txt); }
body.to-claro * { font-family: var(--to-font); }
body.to-claro .bi, body.to-claro [class^="bi-"], body.to-claro [class*=" bi-"] { font-family: bootstrap-icons !important; }
body.to-claro #main { background: var(--c-bg); }

/* ── Header (negro, como el inicio) ─────────────────────────────────── */
body.to-claro .header { background-color: rgba(0, 0, 0, .94) !important; box-shadow: none !important; }

/* ── Fondo de la sección: sin el degradé amarillo ───────────────────── */
body.to-claro .servicios-section { background: var(--c-bg); }

/* ── Encabezado ─────────────────────────────────────────────────────── */
body.to-claro .page-header-servicios h1 {
  font-weight: 700; letter-spacing: -.035em; line-height: 1.06; font-size: 46px; color: var(--c-txt);
}
/* La zona ("Mendoza", o "Guaymallén, Mendoza") en el degradé amarillo de la
   landing de todo el país, en su versión para fondo claro. */
body.to-claro .page-header-servicios h1 .g {
  background: var(--to-amarillo-grad-claro); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
body.to-claro .breadcrumbs-custom ol,
body.to-claro .breadcrumbs-custom a { color: var(--c-ter); }
body.to-claro .psh-trust { color: var(--c-sec); }
body.to-claro .psh-trust i { color: var(--to-verde-ok); }

/* ── Filtros: tarjeta blanca, sin vidrio ────────────────────────────── */
body.to-claro .filter-container {
  background: var(--c-card); border: 0; border-radius: var(--to-r-lg);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.to-claro .filtros-toggle { color: var(--c-txt); }
body.to-claro .filtros-toggle-ico { background: var(--c-bg); color: var(--c-txt); border-radius: 12px; }
body.to-claro .filtros-toggle-tit { font-weight: 600; }
body.to-claro .filtros-badge { background: var(--c-txt); color: #fff; }
body.to-claro .filtros-toggle-res { color: var(--c-sec); }
body.to-claro .filter-container .filter-label { color: var(--c-sec); }
body.to-claro .filter-container .dropdown-toggle,
body.to-claro .filter-container .location-select {
  background-color: var(--c-bg); border: 0; border-radius: 12px; box-shadow: none; color: var(--c-txt);
}
body.to-claro .filter-hint { background: var(--c-bg); border: 0; border-radius: 12px; color: var(--c-sec); }

/* ── Explorá por rubro ──────────────────────────────────────────────── */
body.to-claro .rubro-card {
  background: var(--c-card); border: 0; border-radius: var(--to-r-lg); box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
body.to-claro .rubro-card-icon { background: var(--c-bg); color: var(--c-txt); }
body.to-claro .rubro-card-count { color: var(--c-ter); }
body.to-claro .rubros-vermas { background: var(--c-card); border: 0; color: var(--c-txt); border-radius: 999px; }

/* ── Orden ──────────────────────────────────────────────────────────── */
body.to-claro .res-orden { color: var(--c-sec); font-weight: 500; }
body.to-claro .res-orden select {
  background-color: var(--c-card); border: 0; border-radius: 999px; font-weight: 600; color: var(--c-txt);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

/* ── Tarjeta del profesional ────────────────────────────────────────── */
/* Contorno: borde de 1px + sombra suave en dos capas, para que cada perfil
   se separe del gris y del de al lado sin verse "encajonado". */
body.to-claro .servicio-item {
  background: var(--c-card); border: 1px solid rgba(0,0,0,.07); border-radius: var(--to-r-lg);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.06);
}
body.to-claro .servicio-item:hover { box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 12px 28px rgba(0,0,0,.09); border-color: rgba(0,0,0,.1); }
body.to-claro .servicio-item h3 { font-weight: 600; letter-spacing: -.015em; color: var(--c-txt); }
body.to-claro .servicio-item .si-link:hover h3 { text-decoration: none; }
body.to-claro .si-foto { background: var(--c-bg); }
body.to-claro .servicio-rating .rating-count,
body.to-claro .servicio-meta { color: var(--c-sec); }
body.to-claro .servicio-meta i { color: var(--c-ter); }
body.to-claro .servicio-meta .zona-match { background: #fff6cc; color: #5c4a00; border-radius: 6px; }
body.to-claro .servicio-chip { background: var(--c-bg); border: 0; color: var(--c-sec); font-weight: 500; }
body.to-claro .servicio-chip.is-match { background: #fff6cc; border: 0; color: #5c4a00; font-weight: 600; }
body.to-claro .servicio-chip-mas { background: var(--c-bg); border: 0; color: var(--c-ter); }

body.to-claro .si-btn { border-radius: 12px; font-weight: 600; }
body.to-claro .si-btn-contacto { background: var(--c-txt); color: #fff; }
body.to-claro .si-btn-contacto:hover { background: #000; color: #fff; }
body.to-claro .si-btn-perfil { background: var(--c-bg); color: var(--c-txt); border: 0; }
body.to-claro .si-btn-perfil:hover { background: #e8e8ed; color: var(--c-txt); }
@media (max-width: 767.98px) {
  body.to-claro .page-header-servicios h1 { font-size: 32px; text-align: center; }
  body.to-claro .page-header-servicios { text-align: center; }
  body.to-claro .page-header-servicios .psh-trust { margin-top: 10px; }
  body.to-claro .page-header-servicios .breadcrumbs-custom ol,
  body.to-claro .page-header-servicios .psh-trust { justify-content: center; }
  body.to-claro .servicio-item { border-radius: 18px; }
  /* En el celular "Ver perfil" es el botón principal: verde, como en el render. */
  body.to-claro .si-btn-perfil { background: var(--to-verde-ok); color: #fff; border-radius: 12px; }
  body.to-claro .si-btn-perfil:hover { background: #2fb350; color: #fff; }
}

/* ── Paginación ─────────────────────────────────────────────────────── */
body.to-claro .pagination .page-item .page-link { background: var(--c-card); border: 0; color: var(--c-txt); border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
body.to-claro .pagination .page-item.active .page-link { background: var(--c-txt); color: #fff; }

/* ── Footer: gris claro (mismo criterio que el inicio) ──────────────── */
body.to-claro .footer {
  background-color: var(--c-bg) !important; color: var(--c-sec) !important;
  border-top: 1px solid var(--c-borde) !important; margin-top: 0 !important;
}
body.to-claro .footer h4 { color: var(--c-txt); letter-spacing: .02em; }
body.to-claro .footer a { color: var(--c-sec); }
body.to-claro .footer a:hover { color: var(--c-txt); }

/* ══ Más contraste (pedido del dueño, nov. 2026: "lo veo muy plano") ══ */
body.to-claro .servicio-item { border-color: var(--c-borde-fuerte); box-shadow: var(--c-sombra); }
body.to-claro .servicio-item h3 { color: #000; font-weight: 700; }
body.to-claro .servicio-rating .stars,
body.to-claro .servicio-rating .stars i { color: var(--to-estrella); }
body.to-claro .servicio-rating .rating-score { color: #000; font-weight: 700; }
body.to-claro .servicio-chip.is-match,
body.to-claro .servicio-meta .zona-match { background: var(--to-amarillo); color: #000; font-weight: 700; }
body.to-claro .servicio-chip { background: #e5e5ea; color: #3a3a3c; }
body.to-claro .si-btn-perfil { background: var(--c-card); border: 1.5px solid var(--c-txt); color: var(--c-txt); }
body.to-claro .si-btn-perfil:hover { background: var(--c-txt); color: #fff; }
body.to-claro .filter-container { border: 1px solid var(--c-borde-fuerte); box-shadow: var(--c-sombra); }
body.to-claro .filtros-toggle-ico { background: var(--to-amarillo); color: #000; }
body.to-claro .res-orden select { border: 1.5px solid var(--c-borde-fuerte); }
@media (max-width: 767.98px) {
  body.to-claro .si-btn-perfil { background: var(--to-verde-ok); border: 0; color: #fff; box-shadow: 0 6px 16px rgba(52,199,89,.35); }
  body.to-claro .si-btn-perfil:hover { background: #2fb350; color: #fff; }
}

/* ══ Botones del listado (pedido del dueño, nov. 2026) ══
   Compu: el verde lo lleva "Escribile" (el contacto); "Ver perfil" queda
   blanco con borde. Celular: "Escribile" no se muestra y "Ver perfil"
   pasa a ser el botón principal, verde. Mismo verde de acción en los dos. */
body.to-claro .si-btn-contacto { background: var(--to-verde-accion); color: #fff; box-shadow: var(--to-verde-accion-sombra); }
body.to-claro .si-btn-contacto:hover { background: var(--to-verde-accion-hover); color: #fff; }
@media (max-width: 767.98px) {
  body.to-claro .si-btn-perfil { background: var(--to-verde-accion); color: #fff; border: 0; box-shadow: var(--to-verde-accion-sombra); }
  body.to-claro .si-btn-perfil:hover { background: var(--to-verde-accion-hover); color: #fff; }
}