/* =========================================================
   OFICINA Y UBICACION — SITIO PUBLICO

   Mismo lenguaje que el resto de la home: verde de marca, tarjeta
   blanca de esquinas suaves y sombra baja, tipografia Inter.
========================================================= */

.cgx-section,
.cgx-section *{ box-sizing:border-box; }

.cgx-section{
    padding:88px 0 104px;
    background:#fbfdfb;
    color:#101525;
    font-family:Inter,Montserrat,Arial,sans-serif;
}

.cgx-wrap{
    width:min(1260px,100%);
    margin:0 auto;
    padding:0 30px;
}

.cgx-head{
    max-width:670px;
    margin:0 auto 50px;
    text-align:center;
}

.cgx-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:16px;
    color:#27386e;
    font-size:10px;
    font-weight:850;
    letter-spacing:2.7px;
    text-transform:uppercase;
}

.cgx-eyebrow::before,
.cgx-eyebrow::after{
    content:"";
    width:22px;
    height:1px;
    background:#fcc640;
}

.cgx-head h2{
    margin:0 0 15px;
    color:#070a15;
    font-size:clamp(27px,2.6vw,35px);
    line-height:1.08;
    letter-spacing:-1.2px;
}

.cgx-head p{
    margin:0;
    color:#646c7b;
    font-size:14px;
    line-height:1.7;
}

.cgx-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px;
    align-items:start;
}

.cgx-panel{
    overflow:hidden;
    padding:19px;
    border:1px solid #e8e5df;
    border-radius:22px;
    background:#fff;
    box-shadow:0 17px 44px rgba(15,23,42,.075);
}

.cgx-panel-title{
    margin:0 0 14px;
    color:#101525;
    font-size:17px;
    font-weight:700;
    letter-spacing:-.3px;
}

.cgx-photo-marco,
.cgx-mapa-marco{
    overflow:hidden;
    border-radius:16px;
    background:#f4f2ee;
}

.cgx-photo-marco{ aspect-ratio:16/10; }
.cgx-mapa-marco{ aspect-ratio:16/11; }

.cgx-photo-marco img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.cgx-mapa-marco iframe{
    width:100%;
    height:100%;
    display:block;
    border:0;
}

.cgx-datos{
    margin-top:16px;
    display:flex;
    flex-direction:column;
    gap:11px;
}

.cgx-dato{
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:#414650;
    font-size:13px;
    line-height:1.5;
}

.cgx-dato i{
    margin-top:2px;
    color:#324377;
    font-size:13px;
}

.cgx-location-head{ margin-bottom:14px; }

.cgx-location-copy strong{
    display:block;
    color:#101525;
    font-size:13px;
    font-weight:750;
}

.cgx-location-copy span{
    color:#828998;
    font-size:12px;
}

@media(max-width:1050px){
    .cgx-grid{ grid-template-columns:1fr; gap:22px; }
}

@media(max-width:650px){
    .cgx-section{ padding:62px 0 76px; }
    .cgx-wrap{ padding:0 15px; }
    .cgx-head{ margin-bottom:38px; }
    .cgx-head h2{ font-size:24px; }
}

/* ---------- Mapa propio de la oficina (activos/js/oficina-mapa.js) ---------- */
.ofm-mapa{ position:relative; aspect-ratio:16/11; overflow:hidden; border-radius:16px; background:#e9ecef; }
.ofm-mapa .maplibregl-canvas{ outline:none; }
.ofm-espera{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#6e6e73; font-size:13px; }
.ofm-controles{ position:absolute; top:12px; left:12px; right:12px; z-index:2; display:flex; gap:8px; align-items:center; pointer-events:none; }
.ofm-controles > *{ pointer-events:auto; }
.ofm-capas{ display:flex; padding:3px; border-radius:11px; background:rgba(255,255,255,.95); box-shadow:0 6px 18px rgba(0,0,0,.16); }
.ofm-capas button{ border:0; background:transparent; padding:7px 12px; border-radius:8px; font:600 12.5px/1 inherit; color:#1d1d1f; cursor:pointer; }
.ofm-capas button.activo{ background:#08143b; color:#fff; }
.ofm-ico{ width:36px; height:36px; display:inline-grid; place-items:center; border:0; border-radius:11px; background:rgba(255,255,255,.95); box-shadow:0 6px 18px rgba(0,0,0,.16); color:#1d1d1f; font:700 12px/1 inherit; cursor:pointer; }
.ofm-ico:first-of-type{ margin-left:auto; }
.ofm-ico.activo{ background:#08143b; color:#FFC400; }
.ofm-ico svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ofm-ruta{ position:absolute; left:12px; right:12px; bottom:12px; z-index:2; display:flex; align-items:center; gap:14px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.97); box-shadow:0 10px 26px rgba(0,0,0,.18); }
.ofm-modos{ display:flex; gap:4px; }
.ofm-modos button{ border:0; padding:7px 10px; border-radius:9px; background:#f2f2f4; font:600 12px/1 inherit; color:#1d1d1f; cursor:pointer; }
.ofm-modos button.activo{ background:#08143b; color:#fff; }
.ofm-cifras{ display:flex; gap:18px; margin-left:auto; }
.ofm-cifras div{ display:flex; flex-direction:column; }
.ofm-cifras strong{ font-size:15px; color:#101525; }
.ofm-cifras span{ font-size:11px; color:#6e6e73; }
.ofm-quitar{ width:28px; height:28px; border:0; border-radius:50%; background:#f2f2f4; font-size:18px; line-height:1; cursor:pointer; color:#1d1d1f; }
.ofm-pin{ position:relative; width:44px; height:52px; display:grid; place-items:start center; cursor:pointer; }
.ofm-pin-punto{ width:44px; height:44px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:#08143b; display:grid; place-items:center; box-shadow:0 8px 20px rgba(8,20,59,.45); border:3px solid #FFC400; }
.ofm-pin-punto svg{ width:22px; height:22px; transform:rotate(45deg); fill:#FFC400; stroke:#08143b; stroke-width:1.2; }
.ofm-pin-pulso{ position:absolute; left:50%; bottom:-6px; width:18px; height:18px; margin-left:-9px; border-radius:50%; background:rgba(255,196,0,.55); animation:ofmPulso 1.8s ease-out infinite; }
@keyframes ofmPulso{ 0%{ transform:scale(.6); opacity:.9; } 100%{ transform:scale(3.2); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .ofm-pin-pulso{ animation:none; } }
.ofm-yo{ width:16px; height:16px; border-radius:50%; background:#1a73e8; border:3px solid #fff; box-shadow:0 0 0 6px rgba(26,115,232,.25); }
.ofm-ficha{ margin-top:14px; display:flex; flex-direction:column; gap:3px; }
.ofm-ficha strong{ color:#101525; font-size:14px; font-weight:700; }
.ofm-ficha > span{ color:#646c7b; font-size:13px; }
.ofm-coords{ display:flex; align-items:center; gap:8px; color:#828998; font-size:12px; margin-top:2px; }
.ofm-coords button{ width:26px; height:26px; display:grid; place-items:center; border:0; border-radius:8px; background:#f2f2f4; cursor:pointer; color:#414650; }
.ofm-coords svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; }
.ofm-acciones{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.ofm-secundarias{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.ofm-boton{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:0 14px; border:1px solid #e3e3e8; border-radius:12px; background:#fff; color:#1d1d1f; font:600 13px/1 inherit; text-decoration:none; cursor:pointer; }
.ofm-boton:hover{ background:#f5f5f7; }
.ofm-boton.principal{ background:#08143b; border-color:#08143b; color:#fff; }
.ofm-boton.principal:hover{ background:#0d1f57; }
.ofm-boton svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; }
.ofm-estado{ margin:8px 0 0; min-height:16px; font-size:12px; color:#646c7b; }
.ofm.ofm-grande .ofm-mapa{ position:fixed; inset:0; z-index:100000; aspect-ratio:auto; border-radius:0; }
.ofm-mapa:fullscreen{ aspect-ratio:auto; border-radius:0; }
@media(max-width:650px){
    .ofm-mapa{ aspect-ratio:4/5; }
    .ofm-ruta{ flex-wrap:wrap; gap:10px; }
    .ofm-cifras{ margin-left:0; }
    .ofm-boton{ font-size:12.5px; padding:0 8px; }
}

.ofm-ruta[hidden],.ofm-controles[hidden]{ display:none !important; }
.ofm-mapa .maplibregl-ctrl-attrib{ font-size:10px; background:rgba(255,255,255,.7); }

/* Marcador elegante: tarjeta blanca con el nombre y punta. */
.ofm-pin{ position:relative; display:flex; flex-direction:column; align-items:center; width:auto; height:auto; cursor:pointer; }
.ofm-pin-tarjeta{ display:flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:999px; background:#fff; box-shadow:0 10px 24px rgba(8,20,59,.28); white-space:nowrap; }
.ofm-pin-tarjeta img{ width:28px; height:28px; border-radius:50%; object-fit:contain; background:#fff; }
.ofm-pin-tarjeta b{ display:block; font-size:12.5px; font-weight:650; color:#08143b; line-height:1.15; }
.ofm-pin-tarjeta small{ display:block; font-size:10.5px; color:#6e6e73; line-height:1.2; }
.ofm-pin-pata{ width:12px; height:12px; margin-top:-6px; background:#fff; transform:rotate(45deg); box-shadow:4px 4px 8px rgba(8,20,59,.18); }
.ofm-pin-pulso{ position:absolute; left:50%; bottom:-8px; width:14px; height:14px; margin-left:-7px; border-radius:50%; background:#FFC400; box-shadow:0 0 0 3px #fff; animation:ofmPulso2 2s ease-out infinite; }
@keyframes ofmPulso2{ 0%{ box-shadow:0 0 0 3px #fff,0 0 0 3px rgba(255,196,0,.6); } 100%{ box-shadow:0 0 0 3px #fff,0 0 0 18px rgba(255,196,0,0); } }

/* Foto y mapa del mismo tamaño, tarjetas a la misma altura y con poco
   espacio entre ellas para que todo se vea mas grande. */
.cgx-grid{ gap:12px; align-items:stretch; }
#oficina .cgx-wrap{ width:min(1320px,100%); }
.cgx-panel{ display:flex; flex-direction:column; }
.cgx-photo-marco{ aspect-ratio:16/11; }
@media(max-width:1050px){ .cgx-grid{ gap:12px; } }
.ofm-secundarias .ofm-boton{ font-family:inherit !important; font-size:13px !important; font-weight:500 !important; }