/* ═══════════════════════════════════════════════
   UbicaSAT — main.css
   Base global: reset, variables, tipografía, layout,
   footer, ads, botones, badges, accesibilidad.
   El chrome de navegación vive en nav.css.
   ═══════════════════════════════════════════════ */

/* ─── Reset ligero ───────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
/* Eliminar el flash azul/gris al tocar elementos en mobile (iOS/Android).
   El feedback visual queda a cargo de :focus-visible y los hovers de los
   propios componentes. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
    -webkit-tap-highlight-color:transparent}
a,button,[role="button"],input,label,select,summary,textarea{
    -webkit-tap-highlight-color:transparent}
body{margin:0;padding:0;background:#f5f6f8;color:#1d2a3a;
    font-family:'DM Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,iframe{max-width:100%;display:block}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer;border:0;background:transparent;color:inherit;
    -webkit-tap-highlight-color:transparent}
ul,ol{padding:0;margin:0;list-style:none}
h1,h2,h3,h4{font-family:'Sora','DM Sans',sans-serif;font-weight:700;color:#0f2235;margin:0;line-height:1.25}

/* ─── Variables globales ─────────────────────── */
:root{
    --color-primary:#0f2235;
    --color-accent:#d4213d;
    --color-teal:#1d5fa5;
    --color-muted:#6b7684;
    --color-border:#e5e7ea;
    --color-card:#fff;
    --color-bg:#f5f6f8;
    --radius:10px;
    --shadow-sm:0 1px 2px rgba(15,34,53,.05);
    --shadow-md:0 4px 14px rgba(15,34,53,.08);
    --max-w:1100px;
    --gutter:20px;
}

/* ─── Sistema de breakpoints (referencia) ─────────
 *   480px  → móviles pequeños
 *   768px  → tablets
 *   1024px → laptops
 *   1280px → desktop
 *
 * Los media queries actuales mantienen sus valores
 * legacy (420 / 520 / 640 / 700 / 760 / 900) por
 * estabilidad visual ya validada en múltiples
 * dispositivos. Aplicar el sistema estándar de
 * forma progresiva en nuevos componentes o ajustes
 * puntuales — no en una refactorización masiva.
 * ─────────────────────────────────────────────── */

/* ─── Accesibilidad ──────────────────────────── */
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
.skip-link{position:absolute;left:-9999px;top:0;background:#0f2235;color:#fff;padding:10px 16px;z-index:9999}
.skip-link:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:4px}

/* ═══════════════════════════════════════════════
   BOTONES / CTA
═══════════════════════════════════════════════ */
.btn-sat{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:12px 22px;border-radius:8px;font-weight:700;font-size:15px;
    transition:transform .15s,box-shadow .15s,background .15s;text-decoration:none}
.btn-sat:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(212,33,61,.25)}
.btn-red{background:var(--color-accent);color:#fff}
.btn-red:hover{background:#b81c34}
.btn-teal{background:var(--color-teal);color:#fff}
.btn-teal:hover{background:#164a82;box-shadow:0 6px 16px rgba(29,95,165,.28)}
.btn-outline{background:#fff;color:var(--color-primary);border:1px solid var(--color-border)}
.btn-outline:hover{background:#f4f8fc;border-color:#cfdbe6}

/* ═══════════════════════════════════════════════
   BADGES + BREADCRUMB
═══════════════════════════════════════════════ */
.badge-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
    font-size:11px;font-weight:600;letter-spacing:.01em}
.badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-pill--green{background:#e6f5ec;color:#1e7b3c}
.badge-pill--blue{background:#e4eff9;color:#1d5fa5}
.badge-pill--amber{background:#fff4d8;color:#a66800}
.badge-pill--red{background:#fde5e9;color:#b81c34}

.breadcrumb{font-size:12px;color:rgba(255,255,255,.82);display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.breadcrumb a{color:inherit;opacity:.9;transition:opacity .15s}
.breadcrumb a:hover{opacity:1;text-decoration:underline}
.breadcrumb__sep{opacity:.55}
.breadcrumb [aria-current="page"]{font-weight:600;color:#fff}

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
.site-footer{background:#0a1a28;color:rgba(255,255,255,.72);margin-top:56px;
    font-size:13px;padding:44px 0 22px}
.site-footer__inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}

.footer-grid{display:grid;gap:36px;margin-bottom:30px}
.footer-grid--cols-1{grid-template-columns:1fr}
.footer-grid--cols-2{grid-template-columns:1.2fr 1fr}
.footer-grid--cols-3{grid-template-columns:1.3fr 1fr 1.2fr}
.footer-grid--cols-4{grid-template-columns:1.3fr 1fr 1fr 1.2fr}

.footer-col__title{font-family:'Sora',sans-serif;font-size:11px;font-weight:700;
    text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.42);
    margin:0 0 14px}

.footer-brand{display:inline-flex;align-items:center;gap:8px;font-family:'Sora',sans-serif;
    font-weight:800;font-size:17px;color:#fff;margin-bottom:14px}
.footer-brand__img{height:34px;width:auto;filter:brightness(0) invert(1)}
.footer-disclaimer{font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.55);max-width:34ch;margin:0}

.footer-menu{display:flex;flex-direction:column;gap:9px}
.footer-menu a{color:rgba(255,255,255,.62);font-size:13.5px;transition:color .15s}
.footer-menu a:hover{color:#fff}

.footer-states{columns:2;column-gap:18px}
.footer-states li{break-inside:avoid;margin-bottom:7px}
.footer-states a{color:rgba(255,255,255,.6);font-size:13px;transition:color .15s}
.footer-states a:hover{color:#fff}

.footer-legal{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
.footer-legal a{color:rgba(255,255,255,.62);font-size:13.5px;transition:color .15s}
.footer-legal a:hover{color:#fff}

.footer-bottom{padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}
.footer-copyright{margin:0;font-size:12px;color:rgba(255,255,255,.42)}

@media (max-width:900px){
    .footer-grid--cols-3,
    .footer-grid--cols-4{grid-template-columns:1fr 1fr}
    .footer-col--brand{grid-column:1/-1}
}
@media (max-width:560px){
    .footer-grid,
    .footer-grid--cols-2,
    .footer-grid--cols-3,
    .footer-grid--cols-4{grid-template-columns:1fr;gap:28px}
    .footer-states{columns:2}
}

/* ═══════════════════════════════════════════════
   ADS (AdSense wrappers)
═══════════════════════════════════════════════ */
.ad-wrapper{background:#f8f9fb;border:1px dashed #e2e6ea;border-radius:10px;
    padding:14px;text-align:center;min-height:90px;margin:18px 0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.ad-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#9ba5b0;margin:0}
.adsbygoogle{width:100%}

/* ═══════════════════════════════════════════════
   PÁGINAS GENÉRICAS (page.php, 404.php, index.php)
═══════════════════════════════════════════════ */
.generic-main{max-width:760px;margin:0 auto;padding:40px 20px}
.generic-main .entry-title{font-size:32px;margin-bottom:24px}
.generic-main .entry-content p{margin:0 0 1em}
.generic-main a{color:var(--color-teal);text-decoration:underline}
.muted{color:var(--color-muted);margin:0}

/* Helpers */
.text-center{text-align:center}

/* ═══════════════════════════════════════════════
   HOME (front-page.php)
═══════════════════════════════════════════════ */
.home-main{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter) 48px}

/* ─── Hero ────────────────────────────────────── */
.home-hero{position:relative;margin:22px 0 28px;border-radius:14px;overflow:hidden;
    background:linear-gradient(135deg,#0f2235 0%,#1a3450 55%,#25496b 100%);
    min-height:280px;color:#fff;isolation:isolate}
.home-hero__bg{position:absolute;inset:0;pointer-events:none;opacity:.45;mix-blend-mode:screen}
.home-hero::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(15,34,53,0) 0%,rgba(15,34,53,.55) 100%);z-index:1}
.home-hero__content{position:relative;z-index:2;padding:44px 36px 38px}
.home-hero__title{font-family:'Sora','DM Sans',sans-serif;font-size:40px;font-weight:800;
    letter-spacing:-.015em;color:#fff;margin:0 0 8px;line-height:1.08}
.home-hero__sub{font-size:15px;color:rgba(255,255,255,.82);margin:0 0 22px}
.home-hero__hint{font-size:12.5px;color:rgba(255,255,255,.6);margin:14px 0 0}

/* ─── Buscador estado→ciudad ──────────────────── */
.home-search{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.home-search__field{display:flex;flex-direction:column;gap:4px;flex:1 1 220px;min-width:0}
.home-search__label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;
    font-weight:600;color:rgba(255,255,255,.72)}
.home-search select{appearance:none;-webkit-appearance:none;font:inherit;
    background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230f2235'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 10px center;
    background-size:18px;border:1px solid rgba(255,255,255,.18);border-radius:10px;
    padding:12px 38px 12px 14px;color:#0f2235;font-size:14.5px;font-weight:500;
    line-height:1.25;box-shadow:0 2px 8px rgba(15,34,53,.18);cursor:pointer;
    transition:box-shadow .15s,transform .15s}
.home-search select:hover:not(:disabled){box-shadow:0 4px 14px rgba(15,34,53,.22)}
.home-search select:disabled{opacity:.55;cursor:not-allowed}
.home-search__btn{flex:0 0 auto;white-space:nowrap;padding:13px 22px}

@media (max-width:640px){
    .home-hero__title{font-size:30px}
    .home-hero__content{padding:28px 20px 24px}
    .home-hero__sub{margin-bottom:18px}
    .home-search{flex-direction:column;align-items:stretch;gap:12px}
    .home-search__field{gap:3px;flex:0 0 auto}
    .home-search__label{font-size:10.5px}
    .home-search select{padding:11px 38px 11px 13px;font-size:14px}
    .home-search__btn{width:100%;margin-top:2px;padding:12px 20px}
    .home-hero__hint{margin-top:12px;font-size:12px;line-height:1.45}
}
@media (max-width:420px){
    .home-hero__content{padding:24px 16px 22px}
    .home-hero__title{font-size:26px}
}

/* ─── Secciones home ──────────────────────────── */
.home-section__title{font-family:'Sora',sans-serif;font-size:22px;font-weight:800;
    color:var(--color-primary);margin:0 0 6px}
.home-section__lead{font-size:14px;color:var(--color-muted);margin:0 0 18px;max-width:68ch}
.home-estados,.home-calculadoras{margin-top:36px}

/* ─── Grid de estados (duplicado mínimo de archive.css para la home) ─── */
.home-estado-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.home-estado-grid .estado-card{background:#fff;border:1px solid var(--color-border);
    border-radius:10px;padding:14px 40px 14px 16px;display:flex;align-items:center;
    justify-content:space-between;gap:8px;position:relative;color:var(--color-primary);
    font-family:'Sora',sans-serif;font-weight:600;font-size:14px;
    transition:background .15s,border-color .15s,transform .15s,box-shadow .15s}
.home-estado-grid .estado-card:hover{background:#f4f8fc;border-color:#cfdbe6;
    transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.home-estado-grid .estado-card__name{line-height:1.2}
.home-estado-grid .estado-card__arrow{position:absolute;right:14px;top:50%;
    transform:translateY(-50%);color:var(--color-teal);font-weight:700;transition:transform .15s}
.home-estado-grid .estado-card:hover .estado-card__arrow{transform:translateY(-50%) translateX(3px)}

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

/* ─── Miniatura de estado (cluster home) ─────────
   Se activa cuando la página de estado tiene
   estado_imagen_principal y el toggle global del
   Customizer "mostrar_miniatura_estado" está encendido.
   Cambia el layout de la card a columna con imagen en
   la parte superior. */
.home-estado-grid .estado-card--has-thumb{padding:0;overflow:hidden;flex-direction:column;
    align-items:stretch;justify-content:flex-start;gap:0}
.home-estado-grid .estado-card__thumb{display:block;aspect-ratio:16/10;
    background:#eef2f6;overflow:hidden}
.home-estado-grid .estado-card__thumb-img{display:block;width:100%;height:100%;
    object-fit:cover;transition:transform .25s ease}
.home-estado-grid .estado-card--has-thumb:hover .estado-card__thumb-img{transform:scale(1.04)}
.home-estado-grid .estado-card--has-thumb .estado-card__name{padding:14px 40px 14px 16px;
    line-height:1.2}
.home-estado-grid .estado-card--has-thumb .estado-card__arrow{top:auto;bottom:14px;
    transform:none;right:14px}
.home-estado-grid .estado-card--has-thumb:hover .estado-card__arrow{transform:translateX(3px)}

/* ─── Calculadoras ────────────────────────────── */
.calc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.calc-card{background:#fff;border:1px solid var(--color-border);border-radius:12px;
    padding:18px 44px 18px 18px;display:flex;flex-direction:column;gap:6px;position:relative;
    color:var(--color-primary);transition:background .15s,border-color .15s,
    transform .15s,box-shadow .15s}
.calc-card:hover{background:#f4f8fc;border-color:#cfdbe6;transform:translateY(-1px);
    box-shadow:var(--shadow-md)}
.calc-icon{font-size:22px;line-height:1;margin-bottom:2px}
.calc-titulo{font-family:'Sora',sans-serif;font-weight:700;font-size:15.5px;color:var(--color-primary)}
.calc-desc{font-size:13px;color:var(--color-muted);line-height:1.45}
.calc-arrow{position:absolute;right:16px;top:18px;color:var(--color-accent);font-weight:700;
    transition:transform .15s}
.calc-card:hover .calc-arrow{transform:translateX(3px)}

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

/* ═══════════════════════════════════════════════
   SCOPE COMPARTIDO `.oficina-page`
   ───────────────────────────────────────────────
   Tokens, contenedor, hero y patrón de tarjeta
   compartidos por las plantillas que usan el scope
   `.oficina-page`: page-ciudad.php, page-estado.php,
   page-about.php y page-legal.php.

   Se centraliza aquí (en lugar de duplicarse en
   page-ciudad.css / archive.css / about-legal.css)
   para mantener una única fuente de verdad. Los
   overrides específicos por plantilla siguen viviendo
   en sus archivos respectivos.
═══════════════════════════════════════════════ */
.oficina-page{
    --navy:#0f2235;
    --red:#d4213d;
    --red-light:#fde5e9;
    --teal:#1d5fa5;
    --green:#1e7b3c;
    --green-light:#e6f5ec;
    --amber:#c47b00;
    --amber-light:#fff8e6;
    --gray-50:#f8f9fb;
    --gray-100:#f1f3f5;
    --gray-200:#e5e7ea;
    --gray-300:#d5dae0;
    --gray-500:#6b7684;
    --gray-700:#3a4a5c;
    --card-border:#e8ebee;
    --radius:12px;

    max-width:1100px;margin:0 auto;padding:0 20px 40px;
}

/* ─── Hero base ───────────────────────────────── */
.oficina-hero{position:relative;margin:22px 0 18px;border-radius:14px;overflow:hidden;
    background:linear-gradient(135deg,#0f2235 0%,#1a3450 60%,#25496b 100%);min-height:230px;
    color:#fff;isolation:isolate}
.oficina-hero__bg{position:absolute;inset:0;pointer-events:none;opacity:.45;mix-blend-mode:screen}
.oficina-hero::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(15,34,53,0) 0%,rgba(15,34,53,.55) 100%);z-index:1}
.oficina-hero__content{position:relative;z-index:2;padding:34px 32px 30px}

.oficina-hero__title{font-family:'Sora',sans-serif;font-size:38px;font-weight:800;letter-spacing:-.01em;
    color:#fff;margin:0 0 6px;line-height:1.1}
.oficina-hero__sub{font-size:14.5px;color:rgba(255,255,255,.78);margin:0 0 18px}
.oficina-hero__badges{display:flex;flex-wrap:wrap;gap:8px}
.oficina-hero .badge-pill{background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(6px)}
.oficina-hero .badge-pill--green{background:rgba(40,160,80,.25);color:#bdf3cf}
.oficina-hero .badge-pill--blue{background:rgba(70,140,210,.25);color:#bfdbf6}
.oficina-hero .badge-pill--amber{background:rgba(210,150,50,.25);color:#f7dc9e}
.oficina-hero .badge-pill--red{background:rgba(220,70,90,.28);color:#fbc7cf}

@media (max-width:640px){
    .oficina-hero__title{font-size:29px}
    .oficina-hero__content{padding:26px 22px 24px}
}

/* ─── Body container ──────────────────────────── */
.oficina-body{display:flex;flex-direction:column;gap:18px}

/* ─── Patrón base de tarjeta ──────────────────── */
.card{background:#fff;border:1px solid var(--card-border);border-radius:var(--radius);
    box-shadow:0 1px 2px rgba(15,34,53,.04);overflow:hidden}
.card__header{padding:14px 18px;border-bottom:1px solid var(--card-border);
    display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card__title{font-family:'Sora',sans-serif;font-size:15px;font-weight:700;color:var(--navy);margin:0}
.card__body{padding:18px}