/* ═══════════════════════════════════════════════
   UbicaSAT — about-legal.css
   Estilos compartidos por las plantillas
   `page-about.php` y `page-legal.php`. Ambas usan el
   scope visual de `.oficina-page` (hero, .card y
   tokens viven en main.css), por lo que aquí sólo
   añadimos los overrides del hero y los detalles
   propios: pasos numerados (about), TOC pegajosa
   (legal), aviso destacado y listado de hermanos.
   Se encola sólo en estas dos plantillas (ver
   inc/enqueue.php).
═══════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   HERO — overrides para about / legal
   El hero base (gradient, ::after, badges, etc.)
   vive en main.css. Aquí sólo cambiamos métricas:
   un poco más bajo y con título más pequeño.
─────────────────────────────────────────────── */
.about-page .oficina-hero,
.legal-page .oficina-hero{min-height:200px}
.about-page .oficina-hero__content,
.legal-page .oficina-hero__content{padding:32px 32px 28px}
.about-page .oficina-hero__title,
.legal-page .oficina-hero__title{font-size:34px;line-height:1.15}
/* font-size y color se redeclaran aquí porque la regla
   `.about-page p` (más abajo) tiene mayor especificidad
   que `.oficina-hero__sub` base de main.css y lo pintaría
   gris. Mantenemos los valores originales del subtítulo
   sobre el navy. */
.about-page .oficina-hero__sub,
.legal-page .oficina-hero__sub{font-size:14.5px;color:rgba(255,255,255,.78);margin:0 0 16px}

@media (max-width:640px){
    .about-page .oficina-hero__title,
    .legal-page .oficina-hero__title{font-size:26px}
}

/* ───────────────────────────────────────────────
   ABOUT — Sobre nosotros
─────────────────────────────────────────────── */
.about-page .about-content p,
.about-page .about-content li{font-size:15px;color:var(--gray-700,#3a4a5c);line-height:1.6}
.about-page .about-content :first-child{margin-top:0}
.about-page .about-content :last-child{margin-bottom:0}

.about-page p{font-size:15px;color:var(--gray-700,#3a4a5c);line-height:1.6;margin:0 0 14px}
.about-page p:last-child{margin-bottom:0}
.about-page p.muted{color:var(--gray-500,#6b7684);font-size:14px}
.about-page a{color:var(--teal,#1d5fa5);text-decoration:underline;text-decoration-thickness:1px;
    text-underline-offset:2px}
.about-page a:hover{color:#164a82}

/* Breadcrumb del hero: la regla `.about-page a` (arriba) tiene la
   misma especificidad que `.breadcrumb a` de main.css y al cargarse
   después le metería color teal + subrayado al "Inicio" del hero.
   Restauramos los estilos base del breadcrumb con un selector más
   específico para que conserve el mismo aspecto que en el resto del
   sitio (texto blanco semitransparente, sin subrayado en reposo). */
.about-page .breadcrumb a{color:inherit;text-decoration:none}
.about-page .breadcrumb a:hover{text-decoration:underline}

.about-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.about-step{display:flex;gap:14px;align-items:flex-start}
.about-step__num{flex-shrink:0;width:32px;height:32px;border-radius:50%;
    background:var(--teal,#1d5fa5);color:#fff;font-weight:700;font-size:14px;
    display:inline-flex;align-items:center;justify-content:center;
    font-family:'Sora',sans-serif}
.about-step__title{font-family:'Sora',sans-serif;font-size:15px;font-weight:700;
    color:var(--navy,#0f2235);margin:4px 0 6px}
.about-step__desc{font-size:14px;color:var(--gray-700,#3a4a5c);
    margin:0;line-height:1.55}

/* Aviso importante: solo cambia los colores tipográficos
   (título amber, cuerpo en marrón). Mantiene el aspecto
   neutro de la card (borde gris y fondo blanco) — antes
   las reglas de borde/fondo amber estaban presentes pero
   nunca llegaban a aplicarse porque `.about-page .card`
   las pisaba; tras centralizar `.card` en main.css quedan
   eliminadas para preservar el diseño original. */
.about-disclaimer .card__title{color:#7a5a2c}
.about-disclaimer .card__body p{color:#5b3d00}
.about-disclaimer .card__body p.muted{color:#7a5a2c}
.about-disclaimer__link{font-weight:700}

/* Bloque de contacto — corrige contraste + variante outline */
.about-page .btn-sat{color:#fff;text-decoration:none}
.about-page .btn-sat:hover{color:#fff;text-decoration:none}

.about-page .btn-sat.btn-outline{
    background:#fff;color:var(--teal);
    border:1px solid var(--teal)
}
.about-page .btn-sat.btn-outline:hover{
    background:var(--gray-50);color:var(--teal);
    box-shadow:0 4px 14px rgba(29,95,165,.15)
}

.about-contact__email{
    font-family:'DM Sans',sans-serif;font-size:16px;
    color:var(--navy);background:var(--gray-50);
    border:1px dashed var(--card-border);border-radius:8px;
    padding:10px 14px;display:inline-block;
    user-select:all;margin:0 0 14px
}
.about-contact__sep{color:var(--gray-500);font-style:italic;margin:0 2px}

.about-contact__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}

.about-contact .js-copy-email--ok{
    background:var(--green);color:#fff;border-color:var(--green)
}

/* ───────────────────────────────────────────────
   LEGAL — privacidad / términos / aviso
─────────────────────────────────────────────── */
.legal-grid{display:flex;flex-direction:column;gap:18px}

.legal-body{font-size:15px;color:var(--gray-700,#3a4a5c);line-height:1.65}
.legal-body :first-child{margin-top:0}
.legal-body :last-child{margin-bottom:0}
.legal-body h2{font-family:'Sora',sans-serif;font-size:20px;font-weight:700;
    color:var(--navy,#0f2235);margin:28px 0 10px;line-height:1.3;
    scroll-margin-top:88px}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{font-family:'Sora',sans-serif;font-size:16px;font-weight:700;
    color:var(--navy,#0f2235);margin:20px 0 8px;line-height:1.35}
.legal-body p{margin:0 0 14px}
.legal-body ul,
.legal-body ol{margin:0 0 14px;padding-left:22px}
.legal-body li{margin-bottom:6px}
.legal-body a{color:var(--teal,#1d5fa5);text-decoration:underline;
    text-decoration-thickness:1px;text-underline-offset:2px}
.legal-body a:hover{color:#164a82}
.legal-body strong{color:var(--navy,#0f2235)}

.legal-rule{border:0;border-top:1px solid var(--card-border,#e8ebee);
    margin:28px 0 18px}
.legal-disclaimer{font-size:13.5px;color:var(--gray-500,#6b7684);
    background:var(--gray-50,#f8f9fb);
    border-left:3px solid var(--teal,#1d5fa5);
    padding:12px 14px;border-radius:6px;line-height:1.55}
.legal-disclaimer strong{color:var(--navy,#0f2235)}

.legal-siblings__list{list-style:none;margin:0;padding:0;
    display:flex;flex-wrap:wrap;gap:8px}
.legal-siblings__list a{display:inline-flex;align-items:center;
    padding:8px 14px;font-size:13.5px;font-weight:600;
    color:var(--navy,#0f2235);background:var(--gray-50,#f8f9fb);
    border:1px solid var(--card-border,#e8ebee);
    border-radius:999px;transition:background .15s,color .15s,border-color .15s}
.legal-siblings__list a:hover{background:#fff;
    color:var(--teal,#1d5fa5);border-color:var(--teal,#1d5fa5)}

@media (max-width:520px){
    .about-step__num{width:28px;height:28px;font-size:13px}
}