/* =============================================================================
   WorkHard — Sucursales Experience
   =============================================================================
   Capa de estilos sobre el markup estándar de Uncode/WPBakery para la página
   /sucursales/ (post ID 130661). NO se toca el template — solo CSS de skin
   sobre selectores estándar, mismo lenguaje visual del resto del sitio.

   Estructura real verificada en vivo (Uncode no usa .wpb_wrapper/.vc_column-inner
   acá, usa su propio .uncol > .uncoltable > .uncell > .uncont):
   - Fila de sedes (grid de 4 tarjetas): .row.row-parent.col-half-gutter
     > .wpb_row.row-inner > .wpb_column.column_parent (col-lg-3) x4
   - Tarjeta (contenido con padding real): .uncell.no-block-padding.has-bg > .uncont
   - Nombre sede: .vc_custom_heading_wrap .heading-text h3
   - Mapa: .wpb_raw_code.wpb_raw_html
   - Dirección + botón (fila interna): .uncode_text_column p / .btn-container a.btn

   IMPORTANTE: nunca aplicar display:flex a .wpb_column — Uncode calcula el
   ancho de las columnas vía table-cell y flex rompe ese cálculo (bug ya visto
   en /formulario/ y en la galería sticky de producto). Acá no se toca ningún
   .wpb_column ni .uncoltable — solo se le da estilo visual a .uncont (el
   contenedor de contenido interno), que no participa en ese cálculo de ancho.
   ============================================================================= */

body.page-id-130661{
  --wh-green:#00eb00;
  --wh-ink:#0a0a0a;
  --wh-surface:#141414;
  --wh-surface-2:#1f1f1f;
}

/* ---------- Título principal + subtítulo ---------- */
body.page-id-130661 .row.row-parent:first-of-type .vc_custom_heading_wrap:first-child h4{
  font-family:'Krona One', sans-serif !important;
  font-weight:600 !important;
  line-height:1.25 !important;
  letter-spacing:.01em;
  font-size:clamp(24px, 3.4vw, 38px) !important;
}
body.page-id-130661 .row.row-parent:first-of-type .vc_custom_heading_wrap:first-child img{
  filter: drop-shadow(0 0 10px rgba(0,235,0,.35));
}
body.page-id-130661 .row.row-parent:first-of-type .vc_custom_heading_wrap:nth-child(2) h2.h4{
  font-family:'Nunito', sans-serif !important;
  font-weight:600 !important;
  font-size:18px !important;
  color:rgba(255,255,255,.68) !important;
  margin-top:14px !important;
}

/* ---------- Grid de sedes: tarjetas ---------- */
body.page-id-130661 .row.row-parent.col-half-gutter > .wpb_row.row-inner > .wpb_column.column_parent{
  padding-top:10px !important;
  padding-bottom:30px !important;
}
body.page-id-130661 .row.row-parent.col-half-gutter .uncell.no-block-padding.has-bg > .uncont{
  background:var(--wh-surface) !important;
  border:1px solid var(--wh-surface-2) !important;
  border-radius:20px !important;
  padding:26px 20px 24px !important;
  margin:0 10px !important;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
body.page-id-130661 .row.row-parent.col-half-gutter .uncell.no-block-padding.has-bg > .uncont:hover{
  border-color:rgba(0,235,0,.4) !important;
  box-shadow:0 0 0 3px rgba(0,235,0,.08), 0 0 30px 4px rgba(0,235,0,.22);
  transform:translateY(-3px);
}

/* Nombre de la sede */
body.page-id-130661 .row.row-parent.col-half-gutter .vc_custom_heading_wrap h3{
  font-family:'Krona One', sans-serif !important;
  font-weight:600 !important;
  font-size:18px !important;
  line-height:1.3 !important;
  letter-spacing:.01em;
  margin-bottom:0 !important;
}

/* Mapa embebido */
body.page-id-130661 .row.row-parent.col-half-gutter .wpb_raw_code.wpb_raw_html{
  border-radius:14px !important;
  overflow:hidden !important;
  border:1px solid var(--wh-surface-2) !important;
  line-height:0;
}
body.page-id-130661 .row.row-parent.col-half-gutter .wpb_raw_code.wpb_raw_html iframe{
  display:block !important;
  width:100% !important;
  height:230px !important;
  background:var(--wh-surface-2);
  /* Google Maps Embed (gratuito, sin API key) no soporta un "dark theme"
     nativo vía parámetros de URL — eso solo existe en la Maps JavaScript
     API con Cloud-based Map Styling (requiere API key + billing). Como
     alternativa sin credenciales, se simula un mapa oscuro invirtiendo los
     colores del iframe con un filtro CSS (truco estándar usado en varios
     sitios). Calles/agua quedan oscuras, las etiquetas siguen siendo
     legibles. Si más adelante WorkHard obtiene una API key de Google Maps,
     se puede reemplazar por un estilo dark nativo real. */
  filter: invert(90%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

/* Dirección (texto) */
body.page-id-130661 .row.row-parent.col-half-gutter .uncode_text_column p{
  font-family:'Nunito', sans-serif !important;
  font-size:14.5px !important;
  line-height:1.5 !important;
  color:rgba(255,255,255,.72) !important;
  text-align:center !important;
  margin:16px 0 18px !important;
}

/* Botón "Ver Google Maps" */
body.page-id-130661 .row.row-parent.col-half-gutter .btn-container{
  display:block !important;
  text-align:center !important;
}
body.page-id-130661 .row.row-parent.col-half-gutter .btn-container a.btn{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px;
  background:var(--wh-green) !important;
  color:var(--wh-ink) !important;
  border:none !important;
  border-radius:30px !important;
  font-family:'Nunito', sans-serif !important;
  font-weight:800 !important;
  font-size:11.5px !important;
  letter-spacing:.05em;
  padding:11px 22px !important;
  box-shadow:0 0 0 4px rgba(0,235,0,.08), 0 0 22px 3px rgba(0,235,0,.3);
  transition:transform .2s ease, box-shadow .2s ease;
}
body.page-id-130661 .row.row-parent.col-half-gutter .btn-container a.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 6px rgba(0,235,0,.12), 0 0 30px 5px rgba(0,235,0,.45);
  color:var(--wh-ink) !important;
}
body.page-id-130661 .row.row-parent.col-half-gutter .btn-container a.btn i{
  color:var(--wh-ink) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  body.page-id-130661 .row.row-parent.col-half-gutter .uncell.no-block-padding.has-bg > .uncont{
    margin:0 0 20px !important;
  }
}
@media (max-width: 767px){
  body.page-id-130661 .row.row-parent.col-half-gutter .wpb_raw_code.wpb_raw_html iframe{
    height:200px !important;
  }
}