/* ==========================================================================
   Pensiones & Asociados — Estilos propios
   Complementa a Tailwind (compilado en public/css/tailwind.css). Replica las medidas del sitio original
   (tema Bridge + Elementor). Las variables de color están documentadas en
   docs/COLORES.md y deben coincidir con el bloque @theme de resources/css/tailwind.css.
   ========================================================================== */

/* Mismo orden de capas que Tailwind v4: los componentes van antes que las
   utilidades, así una clase de Tailwind (p. ej. md:text-[26px]) puede ajustar
   un componente .pa-*. */
@layer theme, base, components, utilities;

:root {
    /* Paleta corporativa (ver docs/COLORES.md para actualizar) */
    --brand:    #363A77;   /* azul marino: h1, h2, menú, botones */
    --brand-2:  #989AB4;   /* lavanda: h3, hover, tarjetas */
    --ink:      #5F5F5F;   /* texto base */
    --soft:     #F1F1F1;   /* barra superior y secciones claras */

    --container: 1140px;
}

@layer components {

    /* --------------------------------------------------------------------------
       Base (tipografía del tema Bridge)
       -------------------------------------------------------------------------- */
    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: 'Poppins', sans-serif;
        font-size: 18px;
        line-height: 26px;
        color: var(--ink);
        background: #fff;
    }

    ::selection {
        background: var(--brand-2);
        color: #fff;
    }

    /* --------------------------------------------------------------------------
       Utilidades de marca (respaldo de las de Tailwind)
       -------------------------------------------------------------------------- */
    .bg-brand   { background-color: var(--brand); }
    .bg-brand-2 { background-color: var(--brand-2); }
    .bg-soft    { background-color: var(--soft); }
    .text-brand { color: var(--brand); }
    .text-brand-2 { color: var(--brand-2); }
    .text-ink   { color: var(--ink); }

    /* --------------------------------------------------------------------------
       Rejilla tipo Elementor: contenedor de 1140px y columnas con 10px de padding
       -------------------------------------------------------------------------- */
    .pa-container {
        max-width: var(--container);
        margin-inline: auto;
        display: flex;
        flex-wrap: wrap;
    }
    .pa-col {
        flex: 1 1 0;
        min-width: 0;
        padding: 10px;
    }

    /* Anchos fijos de columna (elementor-col-33 / col-66) */
    .pa-col--33 { flex: 0 0 33.333%; }
    .pa-col--66 { flex: 0 0 66.666%; }

    /* Sección estándar: padding vertical del 10% del ancho */
    .pa-section {
        padding: 10% 0;
    }

    /* Fondo fotográfico: <img srcset> a sangre detrás del contenido (helper bg_image()) */
    .pa-has-bg {
        position: relative;
        isolation: isolate;
    }
    .pa-bg {
        position: absolute;
        inset: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    .pa-bg--left { object-position: center left; }

    /* Sección con fondo de imagen y altura mínima (hero y bloques fotográficos) */
    .pa-hero {
        padding: 86px 0;
    }
    .pa-hero > .pa-container {
        min-height: 400px;
        align-items: center;
    }

    /* Slideshow de fondo del hero de inicio (fade 500 ms, 5 s por imagen) */
    .pa-slideshow {
        position: relative;
        overflow: hidden;
    }
    .pa-slideshow > .pa-slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity .5s ease;
    }
    .pa-slideshow > .pa-slide.is-active {
        opacity: 1;
    }
    .pa-slideshow > .pa-container {
        position: relative;
    }

    /* --------------------------------------------------------------------------
       Tarjetas de título (widget "Info Cards" de Qi Addons)
       -------------------------------------------------------------------------- */
    .pa-card {
        padding: 10px 25px 0 25px;
    }
    .pa-card > .pa-card-title {
        margin: 0 0 15px;
        font-size: 30px;
        line-height: 40px;
        font-weight: 500;
    }
    .pa-card--white    { background: #fff; }
    .pa-card--white    > .pa-card-title { color: var(--brand-2); }
    .pa-card--lavender { background: var(--brand-2); }
    .pa-card--lavender > .pa-card-title { color: #fff; }

    /* h1 del hero de inicio (estilo h1 de Bridge) */
    .pa-card--white > h1.pa-card-title {
        font-size: 60px;
        line-height: 70px;
        font-weight: 400;
        letter-spacing: -1px;
        color: var(--brand);
    }
    /* Subtítulo del hero de inicio */
    .pa-card > p.pa-card-title {
        font-size: 19px;
        line-height: 26px;
        font-weight: 400;
    }
    /* Tarjetas pequeñas (estilo h3 de Bridge: 21px/30px) */
    .pa-card > .pa-card-title--sm {
        font-size: 21px;
        line-height: 30px;
        font-weight: 400;
    }
    /* Títulos de las páginas internas */
    .pa-card > .pa-card-title.pa-page-title {
        font-size: 46px;
        line-height: 1.2;
    }

    /* Tarjetas apiladas con desplazamiento (valores / pilares) */
    .pa-stack > .pa-card {
        text-align: right;
        margin-left: 180px;
    }
    .pa-stack > .pa-card--white {
        margin-left: 86px;
    }

    /* --------------------------------------------------------------------------
       Títulos y textos (widget "Heading" de Elementor)
       -------------------------------------------------------------------------- */
    .pa-heading {
        margin: 0;
        font-family: 'Poppins', sans-serif;
        line-height: 1.5em;
    }
    .pa-label  { font-size: 24px; font-weight: 400; text-align: right; }   /* "Nosotros." */
    .pa-lead   { font-size: 24px; font-weight: 500; text-align: justify; }
    .pa-text   { font-size: 18px; font-weight: 400; text-align: justify; color: #818181; }
    .pa-small  { font-size: 16px; font-weight: 400; text-align: justify; color: var(--brand); }
    .pa-banner { font-size: 24px; font-weight: 400; text-align: center; color: #fff; }

    /* h2 de Bridge (30px/40px, peso 500) */
    .pa-h2 {
        margin: 0;
        font-size: 30px;
        line-height: 40px;
        font-weight: 500;
        color: var(--brand);
    }

    .pa-heading + .pa-heading {
        margin-top: 20px;
    }

    /* Servicios */
    .pa-phase-title {
        margin: 0 0 20px;
        font-size: 32px;
        font-weight: 800;
        line-height: 1.2;
        color: var(--brand-2);
    }
    .pa-service-title {
        margin: 20px 0 10px;
        font-size: 18px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--brand);
    }
    .pa-service-text {
        margin: 0;
        font-size: 14px;
        line-height: 1.5em;
        text-align: justify;
        color: #000;
    }

    /* Texto legal (Aviso de Privacidad) */
    .pa-legal {
        padding: 60px 20px 80px;
    }
    .pa-legal-body {
        max-width: 860px;
        margin-inline: auto;
        font-size: 16px;
        line-height: 1.7;
        text-align: justify;
    }
    .pa-legal-body h2 {
        margin: 40px 0 12px;
        font-size: 22px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--brand);
    }
    .pa-legal-body h3 {
        margin: 24px 0 8px;
        font-size: 17px;
        font-weight: 600;
        color: var(--brand-2);
    }
    .pa-legal-body p,
    .pa-legal-body ul,
    .pa-legal-body ol { margin: 0 0 14px; }
    .pa-legal-body ul { list-style: disc;    padding-left: 24px; }
    .pa-legal-body ol { list-style: decimal; padding-left: 24px; }
    .pa-legal-body ul ul { margin: 6px 0 0; list-style: circle; }
    .pa-legal-body li + li { margin-top: 6px; }
    .pa-legal-body strong { font-weight: 600; color: var(--brand); }
    .pa-legal-body a { color: var(--brand); text-decoration: underline; word-break: break-word; }
    .pa-legal-body a:hover { color: var(--brand-2); }
    .pa-legal-updated { font-size: 14px; color: #818181; }
    .pa-legal-consent {
        margin-top: 40px !important;
        padding: 20px 24px;
        border-left: 4px solid var(--brand-2);
        background: var(--soft);
    }

    /* --------------------------------------------------------------------------
       Botones (píldora de 35px de radio)
       -------------------------------------------------------------------------- */
    .pa-btn {
        display: inline-block;
        padding: 14.5px 36px;
        border-radius: 35px;
        border-bottom: 1px solid var(--brand-2);
        font-family: 'Poppins', sans-serif;
        font-size: 14px;
        line-height: 16px;
        letter-spacing: .19px;
        text-transform: uppercase;
        color: #fff;
        background-color: var(--brand);
        transition: background-color .3s ease, color .3s ease;
    }
    .pa-btn:hover { background-color: var(--brand-2); color: #fff; }

    .pa-btn--lavender { background-color: var(--brand-2); }
    .pa-btn--lavender:hover { background-color: #000; }

    /* --------------------------------------------------------------------------
       Header
       -------------------------------------------------------------------------- */
    .pa-topbar {
        background: var(--soft);
        padding: 1% 0;
    }
    .pa-topbar-item {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
        color: #0F0E0E;
    }
    .pa-topbar-item svg {
        width: 15px;
        height: 15px;
        fill: var(--brand-2);
    }
    .pa-nav a {
        font-size: 14px;
        font-weight: 600;
        color: var(--brand);
        padding: 13px 20px;
    }
    .pa-nav a:hover,
    .pa-nav a.is-active {
        color: var(--brand-2);
    }

    /* Iconos sociales (cuadrados de color, icono de 14px) */
    .pa-social {
        display: inline-flex;
        gap: 5px;
    }
    .pa-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
    }
    .pa-social a:hover { opacity: .9; }
    .pa-social svg {
        width: 14px;
        height: 14px;
        fill: #fff;
    }
    .pa-social .is-whatsapp  { background: #128C7E; }
    .pa-social .is-facebook  { background: #3B5998; }
    .pa-social .is-instagram { background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045); }
    .pa-social .is-pinterest { background: #C8232C; }
    /* En el footer original Instagram es naranja liso */
    .pa-footer .pa-social .is-instagram { background: #F56300; }

    /* --------------------------------------------------------------------------
       Botón flotante de WhatsApp ("Simple Chat Button")
       -------------------------------------------------------------------------- */
    .pa-chat {
        position: fixed;
        right: 20px;
        bottom: 20px;
        z-index: 60;
    }
    .pa-chat-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #25D366;
        box-shadow: 0 6px 8px 2px rgba(0, 0, 0, .15);
        transition: transform .2s ease-in-out;
    }
    .pa-chat-button:hover { transform: scale(1.06); }
    .pa-chat-button svg {
        width: 34px;
        height: 34px;
        fill: #fff;
    }
    .pa-chat-text {
        position: absolute;
        right: 70px;
        bottom: 15px;
        width: max-content;
        padding: 5px 10px;
        border-radius: 5px;
        background: #fff;
        color: #000;
        font-size: 13px;
        font-weight: 700;
        line-height: 1em;
        letter-spacing: -.03em;
        box-shadow: 0 6px 8px 2px rgba(0, 0, 0, .15);
        user-select: none;
    }

    /* --------------------------------------------------------------------------
       Formulario de contacto (campos con línea inferior sobre fondo azul)
       -------------------------------------------------------------------------- */
    .pa-field {
        width: 100%;
        padding: 6px 4px;
        border: 0;
        border-bottom: 1px solid #F0F0F0;
        background: transparent;
        font-size: 15px;
        color: #F0F0F0;
    }
    .pa-field::placeholder { color: #F0F0F0; opacity: .85; }
    .pa-field:focus { outline: none; border-bottom-color: #fff; }

    .pa-submit {
        width: 100%;
        padding: 15px 5px;
        border: 1px solid #fff;
        border-radius: 35px;
        background: transparent;
        color: #fff;
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
    }
    .pa-submit:hover { background: var(--brand-2); border-color: transparent; }

    input.is-invalid,
    textarea.is-invalid {
        border-bottom-color: #fca5a5 !important;
    }

    /* --------------------------------------------------------------------------
       Responsive (los mismos cortes que Elementor: 1024px y 767px)
       -------------------------------------------------------------------------- */
    @media (max-width: 1024px) {
        .pa-stack > .pa-card,
        .pa-stack > .pa-card--white { margin-left: 70px; }
    }

    @media (max-width: 767px) {
        body { font-size: 16px; }
        .pa-container { flex-direction: column; }
        .pa-col { flex-basis: auto; }
        .pa-hero--inner { padding: 0; }
        .pa-hero--inner .pa-col:empty { display: none; }

        .pa-card--white > h1.pa-card-title { font-size: 38px; line-height: 46px; }
        .pa-card > .pa-card-title.pa-page-title { font-size: 34px; }
        .pa-stack > .pa-card,
        .pa-stack > .pa-card--white { margin-left: 0; }

        .pa-label { text-align: left; }
        .pa-lead,
        .pa-text,
        .pa-small,
        .pa-banner { font-size: 14px; }
    }

    /* --------------------------------------------------------------------------
       Accesibilidad
       -------------------------------------------------------------------------- */
    :focus-visible {
        outline: 2px solid var(--brand-2);
        outline-offset: 2px;
    }

    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        .pa-slideshow > .pa-slide { transition: none; }
    }

}