/* ════════════════════════════════════════════════════════════════════
   oficio-claro.css — las páginas de oficio (/oficios, /oficios/<oficio>,
   /oficios/<oficio>/<zona>) en "Claro" (rediseño Apple, etapa 4,
   noviembre 2026). Render aprobado: docs/redisenio-apple/etapa4.html (3).
   Mismo idioma que el listado: foto redonda, estrellas, botón verde.
   Todo bajo body.of-claro: $OFICIO_CLARO = false devuelve la página de
   siempre. Solo la piel: el HTML que leen Google y las IAs (lista, JSON-LD,
   links internos, paginación) no cambia. Sin backdrop-filter ni animaciones.
   ════════════════════════════════════════════════════════════════════ */

body.of-claro { background: var(--c-bg); color: var(--c-txt); -webkit-font-smoothing: antialiased; }
body.of-claro .of-wrap, body.of-claro .of-wrap h1, body.of-claro .of-wrap h2 { font-family: var(--to-font); }
body.of-claro #header { background-color: #000 !important; }

/* ── Encabezado ─────────────────────────────────────────────────────── */
body.of-claro .of-crumbs,
body.of-claro .of-crumbs a { color: var(--c-ter); }
body.of-claro .of-h1 {
  font-size: 34px; font-weight: 700; letter-spacing: -.035em; line-height: 1.08; color: var(--c-txt); margin: 6px 0 12px;
}
body.of-claro .of-intro { color: var(--c-sec); font-size: 16px; }
body.of-claro .of-chip { background: var(--c-card); border: 1px solid var(--c-borde-fuerte); color: var(--c-txt); }
body.of-claro .of-chip .bi { color: var(--c-sec); }
body.of-claro .of-chip .bi-star-fill { color: var(--to-estrella); }
body.of-claro .of-chip .bi-whatsapp { color: var(--to-verde-accion); }

/* ── Tarjetas: foto redonda + "Ver perfil" verde ────────────────────── */
body.of-claro .of-card {
  background: var(--c-card); border: 1px solid var(--c-borde-fuerte); border-radius: 20px;
  box-shadow: var(--c-sombra); padding: 14px; align-items: center; gap: 14px; min-height: 0;
}
@media (hover: hover) { body.of-claro .of-card:hover { border-color: var(--c-txt); box-shadow: var(--c-sombra); } }
body.of-claro .of-card img {
  width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); background: #e8e8ed;
}
body.of-claro .of-card-body { flex: 1 1 auto; }
body.of-claro .of-card-nombre { font-size: 17px; letter-spacing: -.01em; color: var(--c-txt); }
body.of-claro .of-card-serv { color: var(--c-sec); }
body.of-claro .of-card-meta { color: var(--c-sec); }
body.of-claro .of-card-meta .bi-star-fill { color: var(--to-estrella); }
/* Sin sello de plan en la tarjeta (misma regla que el listado). */
body.of-claro .of-card-pro { display: none; }
/* El botón es solo dibujo: la tarjeta entera ya es el link al perfil. */
body.of-claro .of-card::after {
  content: "Ver perfil"; flex: 0 0 auto; align-self: center;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--to-verde-accion); color: #fff; font-weight: 700; font-size: 14.5px; white-space: nowrap;
  box-shadow: 0 4px 12px var(--to-verde-accion-sombra);
}

/* ── Paginación ─────────────────────────────────────────────────────── */
body.of-claro .of-pag a { background: var(--c-card); border: 1px solid var(--c-borde-fuerte); color: var(--c-txt); }
body.of-claro .of-pag span { color: var(--c-ter); border-color: var(--c-borde); }

/* ── "Otras zonas", "Otros oficios", el hub ─────────────────────────── */
body.of-claro .of-h2 {
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-sec); margin: 28px 2px 12px;
}
body.of-claro .of-links a {
  background: var(--c-card); border: 1px solid var(--c-borde-fuerte); color: var(--c-txt); box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
@media (hover: hover) { body.of-claro .of-links a:hover { background: #fff; border-color: var(--c-txt); } }
body.of-claro .of-links .bi { color: var(--c-ter); }
body.of-claro .of-links .of-n { color: var(--c-ter); }
body.of-claro .of-rubro h2 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--c-txt); }
body.of-claro .of-rubro h2 .bi { color: var(--c-txt); }
body.of-claro .of-vacio { background: var(--c-card); border: 1px solid var(--c-borde-fuerte); color: var(--c-sec); }

/* ── "¿Trabajás de esto?" en negro con la pastilla amarilla ─────────── */
body.of-claro .of-cta { background: #000; border-radius: var(--to-r-lg); padding: 24px 20px; }
body.of-claro .of-cta h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
body.of-claro .of-cta a { background: var(--to-amarillo); color: #000; font-weight: 700; min-height: 50px; }

/* ── Footer: gris claro, como el resto del sitio ────────────────────── */
body.of-claro .footer {
  background-color: var(--c-bg) !important; color: var(--c-sec) !important;
  border-top: 0 !important; margin-top: 0 !important;
}
body.of-claro .footer h4 { color: var(--c-txt); }
body.of-claro .footer a { color: var(--c-sec); }

@media (min-width: 576px) { body.of-claro .of-h1 { font-size: 40px; } }
@media (max-width: 360px) {
  body.of-claro .of-card { padding: 12px; gap: 10px; }
  body.of-claro .of-card img { width: 52px; height: 52px; flex-basis: 52px; }
  body.of-claro .of-card::after { padding: 0 12px; font-size: 13.5px; }
}

/* ── Ancho y columnas (nov. 2026) ───────────────────────────────────────
   Con "Ver perfil" adentro, tres columnas dejaban ~150px para el nombre y la
   zona. Como el listado: una columna en el celular, dos desde 768px. */
body.of-claro .of-grid { grid-template-columns: minmax(0, 1fr); }
body.of-claro .of-card-body { min-width: 0; }
body.of-claro .of-intro { max-width: 78ch; }
@media (min-width: 768px) {
  body.of-claro .of-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Mismo ancho y margen que .to-volver-bar (assets/php/volver.php): 1320px,
   12px de costado en el celular y 24px desde 992px. */
body.of-claro .of-wrap { max-width: 1320px; padding-left: 12px; padding-right: 12px; }
@media (min-width: 992px) { body.of-claro .of-wrap { padding-left: 24px; padding-right: 24px; } }
/* Celular: el botón al costado dejaba ~120px para nombre y zona. Va abajo,
   a todo el ancho (sigue siendo dibujo: la tarjeta entera es el link). */
@media (max-width: 575.98px) {
  body.of-claro .of-card { flex-wrap: wrap; row-gap: 12px; }
  body.of-claro .of-card-body { flex: 1 1 0; }
  body.of-claro .of-card::after { flex: 1 0 100%; box-sizing: border-box; justify-content: center; }
  body.of-claro .of-card-meta span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* Respaldo sin JS del corrimiento bajo el header fijo (90px): volver.php lo
   vuelve a medir, pero así la página no arranca tapada mientras carga. */
body.of-claro #header + .to-volver-bar { margin-top: 90px; }
/* La palabra clave del título con el degradé de la marca (como servicios.php). */
body.of-claro .of-h1 .g {
  background: var(--to-amarillo-grad-claro); -webkit-background-clip: text; background-clip: text; color: transparent;
}