/* ============================================================
   AbogadoPE — polish.css
   Capa de mejora visual. Se carga al final, despues de
   styles.css y del <style> propio de cada pagina.
   Additiva: no elimina reglas existentes, solo mejora.
   ============================================================ */

:root { --ease: cubic-bezier(.4, 0, .2, 1); }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

/* ── Foco accesible ─────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(199, 133, 10, .5);
    outline-offset: 2px;
    border-radius: 6px;
}

::selection { background: rgba(199, 133, 10, .22); }

/* ── Scrollbar sutil (WebKit) ───────────────────────────── */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border: 3px solid #fff; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Header con blur ────────────────────────────────────── */
.header {
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    box-shadow: 0 1px 0 rgba(15, 43, 74, .06);
}

/* ── Enlaces "ver todos": la flecha se desliza ──────────── */
.link-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap .2s var(--ease), color .2s var(--ease);
}
.link-more:hover { text-decoration: none; gap: 11px; }

/* ── Encabezados de seccion con barra de acento ─────────── */
.section-header h2,
.section-v2-header h2 { position: relative; padding-left: 16px; }

.section-header h2::before,
.section-v2-header h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: .92em;
    background: var(--accent);
    border-radius: 3px;
}

/* ── Tarjetas: elevacion y zoom de imagen ───────────────── */
.article-card,
.home-ncard,
.cat-img-card,
.testimonial-card,
.service-row {
    transition: transform .28s var(--ease),
                box-shadow .28s var(--ease),
                border-color .28s var(--ease);
}

.article-card:hover,
.home-ncard:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(15, 43, 74, .16);
    border-color: rgba(199, 133, 10, .45);
}

.cat-img-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(15, 43, 74, .22);
}

.article-card .article-img img,
.home-ncard-img img,
.cat-img-card img {
    transition: transform .6s var(--ease);
}

.article-card:hover .article-img img,
.home-ncard:hover .home-ncard-img img,
.cat-img-card:hover img { transform: scale(1.06); }

/* ── Botones: transicion uniforme ───────────────────────── */
.btn-cta,
.btn-outline {
    transition: transform .2s var(--ease),
                box-shadow .2s var(--ease),
                background-color .2s var(--ease),
                color .2s var(--ease),
                border-color .2s var(--ease);
}

/* ── Estadisticas: numeros con acento ───────────────────── */
.stat-num { color: var(--accent); }
.stat-item { transition: transform .25s var(--ease); }
.stat-item:hover { transform: translateY(-3px); }

/* ── Hero del inicio: mas profundidad ───────────────────── */
.hero-split {
    position: relative;
    background:
        radial-gradient(1100px 520px at 86% -12%, rgba(199, 133, 10, .22), transparent 60%),
        linear-gradient(135deg, #0F2B4A 0%, #12314f 55%, #0b2340 100%);
}
.hero-img-main { box-shadow: 0 24px 50px rgba(0, 0, 0, .35); }
.hero-float-card { box-shadow: 0 18px 40px rgba(0, 0, 0, .26); }

/* ── Paginas internas: banda de encabezado de marca ─────── */
.page-header {
    background: linear-gradient(135deg, #0F2B4A 0%, #12314f 100%) !important;
    border-bottom: none !important;
}

.page-header h1 { color: #FFFFFF; }

.page-header p,
.page-header .breadcrumb,
.page-header .breadcrumb a { color: rgba(255, 255, 255, .78); }

.page-header .breadcrumb a:hover { color: var(--accent); }

.page-header .tag { background: rgba(255, 255, 255, .14); color: #FFFFFF; }
.page-header .tag--accent { background: rgba(199, 133, 10, .92); color: #FFFFFF; }

/* ── Contenido interno: tarjeta y tipografia ───────────── */
.main-content {
    box-shadow: 0 1px 3px rgba(15, 43, 74, .06), 0 12px 30px rgba(15, 43, 74, .05);
}

.main-content h2 { scroll-margin-top: 90px; }

.main-content blockquote,
.info-box { border-radius: 10px; }

/* ── Pasos numerados ────────────────────────────────────── */
.step-number { box-shadow: 0 6px 14px rgba(15, 43, 74, .22); }

/* ── FAQ: apertura suave ────────────────────────────────── */
.faq-item { transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.faq-item:hover { box-shadow: 0 4px 14px rgba(15, 43, 74, .07); }

/* ── Footer: enlaces con desplazamiento ─────────────────── */
.footer-col a { transition: transform .18s var(--ease), color .18s var(--ease); }
.footer-col a:hover { transform: translateX(3px); }

/* ── Respeto a reduce-motion ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}