/* ═══════════════════════════════════════════════
   UbicaSAT — archive.css
   Listado de oficinas por estado (page-estado.php).
   Se encola SOLO en esa plantilla.

   Los tokens del scope `.oficina-page`, el patrón base
   `.card` y `.oficina-hero` viven en main.css (compartidos
   con page-ciudad.php, page-about.php y page-legal.php).
   Aquí sólo van overrides y componentes propios del
   listado: estado-hero, estado-grid, estado-card.
   ═══════════════════════════════════════════════ */

/* ─── HERO override (estado) ─────────────────── */
.estado-hero .oficina-hero__title{font-size:34px}

/* ─── Intro del listado ────────────────────────── */
.oficina-intro{font-size:14.5px;color:var(--gray-700);line-height:1.65}
.oficina-intro p{margin:0 0 1em}
.oficina-intro p:last-child{margin-bottom:0}

/* ─── Grid de ciudades ─────────────────────────── */
.estado-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.estado-card{background:var(--gray-50);border:1px solid var(--gray-100);border-radius:10px;
    padding:16px 18px;display:flex;flex-direction:column;gap:4px;position:relative;
    transition:background .15s,border-color .15s,transform .15s}
.estado-card:hover{background:#eef3f9;border-color:#cfdbe6;transform:translateY(-1px)}
.estado-card__name{font-family:'Sora',sans-serif;font-weight:700;color:var(--navy);font-size:15px;margin:0;line-height:1.25}
h3.estado-card__name{font-size:15px}
.estado-card__sub{font-size:12px;color:var(--gray-500)}
.estado-card__arrow{position:absolute;right:14px;top:16px;color:var(--teal);font-weight:700;
    transition:transform .15s}
.estado-card:hover .estado-card__arrow{transform:translateX(3px)}
.estado-grid__ad{grid-column:1/-1}

/* ─── Cards enriquecidas (page-estado) ─────────── */
.estado-card--rich{padding:16px 44px 16px 18px;gap:6px}
.estado-card--rich .estado-card__name{margin-bottom:2px}
.estado-card__meta{display:flex;gap:6px;align-items:baseline;font-size:12.5px;margin-top:4px}
.estado-card__label{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
    color:var(--gray-500);font-weight:600}
.estado-card__value{color:var(--navy);font-weight:600}
.estado-card__address{font-size:12.5px;color:var(--gray-700);line-height:1.4;margin-top:2px}

.estado-seo-nota{margin:18px 0 0;padding-top:14px;border-top:1px dashed var(--gray-200);
    font-size:13px;color:var(--gray-500);line-height:1.55}

@media (max-width:900px){.estado-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.estado-grid{grid-template-columns:1fr}}

/* ─── Miniatura en cards de ciudad ───────────────
   Se activa cuando la ficha tiene oficina_imagen_principal
   y el toggle del Customizer está encendido. Cambia el
   padding a 0 para que la imagen llegue a los bordes,
   y devuelve el padding al contenido textual dentro. */
.estado-card--has-thumb{padding:0;overflow:hidden;display:flex;flex-direction:column}
.estado-card__thumb{display:block;aspect-ratio:16/10;background:#f1f3f5;overflow:hidden}
.estado-card__thumb-img{display:block;width:100%;height:100%;object-fit:cover;
    transition:transform .25s ease}
.estado-card--has-thumb:hover .estado-card__thumb-img{transform:scale(1.03)}
.estado-card--has-thumb > *:not(.estado-card__thumb){padding-left:16px;padding-right:16px}
.estado-card--has-thumb .estado-card__name{padding-top:14px}
.estado-card--has-thumb .estado-card__arrow{right:16px;top:auto;bottom:14px}
.estado-card--has-thumb > *:last-child{padding-bottom:16px}