/*
Theme Name: Dueño Vargas & Asociados
Theme URI: https://herenciaspr.com/
Author: Dueño Vargas & Asociados
Description: Tema personalizado para la práctica de herencias y sucesiones.
Version: 1.9.2
Text Domain: dv-herencias
*/

/*==========================================================
    DUEÑO VARGAS & ASOCIADOS
    STYLE.CSS
==========================================================*/


/*==========================================================
    VARIABLES
==========================================================*/

:root{

    /* Colores */

    --primary:#0F1D30;
    --secondary:#C19B53;
    --background:#F7F5EE;
    --white:#FFFFFF;
    --text:#1A1A1A;
    --text-light:#6E6E6E;
    --border:#E5E2D9;

    /* Tipografía */

    --title:'Cormorant Garamond', serif;
    --body:'Inter', sans-serif;

    /* Tamaños */

    --container:1200px;

    --radius:6px;

    /* Sombras */

    --shadow-sm:0 6px 18px rgba(0,0,0,.08);

    --shadow-md:0 15px 40px rgba(0,0,0,.12);

    --shadow-lg:0 25px 60px rgba(0,0,0,.18);

    /* Transiciones */

    --transition:.35s ease;

}



/*==========================================================
    RESET
==========================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:var(--body);

    background:var(--background);

    color:var(--text);

    line-height:1.7;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

}



/*==========================================================
    IMÁGENES
==========================================================*/

img{

    display:block;

    width:100%;

    max-width:100%;

}



/*==========================================================
    ENLACES
==========================================================*/

a{

    text-decoration:none;

    color:inherit;

    transition:var(--transition);

}



/*==========================================================
    LISTAS
==========================================================*/

ul{

    list-style:none;

}



/*==========================================================
    BOTONES
==========================================================*/

button{

    border:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}



/*==========================================================
    CONTENEDOR
==========================================================*/

.container{

    width:min(92%, var(--container));

    margin:auto;

}



/*==========================================================
    SECCIONES
==========================================================*/

section{

    padding:100px 0;

    position:relative;

}



/*==========================================================
    TÍTULOS
==========================================================*/

h1,h2,h3,h4{

    font-family:var(--title);

    color:var(--primary);

    font-weight:700;

    line-height:1.15;

}

h1{

    font-size:72px;

}

h2{

    font-size:50px;

}

h3{

    font-size:28px;

}

h4{

    font-size:22px;

}

p{

    color:var(--text-light);

    font-size:16px;

}



/*==========================================================
    SUBTÍTULO
==========================================================*/

.section-subtitle{

    display:inline-block;

    margin-bottom:18px;

    color:var(--secondary);

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:13px;

    font-weight:600;

}



/*==========================================================
    ENCABEZADOS
==========================================================*/

.section-heading{

    text-align:center;

    margin-bottom:70px;

}

.section-heading h2{

    margin-top:12px;

}

.section-heading.center{

    text-align:center;

}



/*==========================================================
    BOTÓN DORADO
==========================================================*/

.btn-gold{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 34px;

    background:var(--secondary);

    color:var(--white);

    border-radius:var(--radius);

    font-weight:600;

    letter-spacing:.5px;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

}

.btn-gold:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-md);

}



/*==========================================================
    BOTÓN OUTLINE
==========================================================*/

.outline-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 30px;

    border:2px solid var(--secondary);

    color:var(--secondary);

    font-weight:600;

    transition:var(--transition);

}

.outline-btn:hover{

    background:var(--secondary);

    color:var(--white);

}



/*==========================================================
    UTILIDADES
==========================================================*/

.text-center{

    text-align:center;

}

.mt-30{

    margin-top:30px;

}

.mt-50{

    margin-top:50px;

}

.mb-30{

    margin-bottom:30px;

}

.mb-50{

    margin-bottom:50px;

}



/*==========================================================
    TARJETAS BASE
==========================================================*/

.presentation-box,
.service-card,
.about-box,
.office-card,
.contact-form{

    background:var(--white);

    border-radius:var(--radius);

    box-shadow:var(--shadow-sm);

}



/*==========================================================
    SELECCIÓN DE TEXTO
==========================================================*/

::selection{

    background:var(--secondary);

    color:var(--white);

}



/*==========================================================
    SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--background);

}

::-webkit-scrollbar-thumb{

    background:var(--secondary);

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:#a9833d;

}

/*==========================================================
    FIN PARTE 1
==========================================================*/

/*==========================================================
    HEADER
==========================================================*/

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    background:rgba(15,29,48,.95);

    backdrop-filter:blur(14px);

    transition:.35s ease;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.header.scrolled{

    background:#0F1D30;

    box-shadow:0 12px 30px rgba(0,0,0,.18);

}



/*==========================================================
    NAVBAR
==========================================================*/

.navbar{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



/*==========================================================
    LOGO
==========================================================*/

.logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

}

.logo img{

    height:62px;

    width:auto;

    transition:.35s;

}

.logo:hover img{

    transform:scale(1.04);

}



/*==========================================================
    MENU
==========================================================*/

.menu{

    display:flex;

    align-items:center;

    gap:40px;

}

.menu>li{

    position:relative;

}

.menu>li>a{

    display:flex;

    align-items:center;

    gap:8px;

    color:#FFF;

    font-size:15px;

    font-weight:500;

    letter-spacing:.3px;

    padding:34px 0;

    transition:.3s;

}

.menu>li>a:hover{

    color:var(--secondary);

}



/*==========================================================
    LINEA DORADA
==========================================================*/

.menu>li>a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:24px;

    width:0;

    height:2px;

    background:var(--secondary);

    transition:.35s;

}

.menu>li:hover>a::after{

    width:100%;

}



/*==========================================================
    DROPDOWN
==========================================================*/

.dropdown{

    position:relative;

}

.dropdown-menu{

    position:absolute;

    top:100%;

    left:50%;

    transform:translateX(-50%) translateY(20px);

    min-width:270px;

    background:#FFF;

    border-radius:8px;

    overflow:hidden;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    box-shadow:0 20px 50px rgba(0,0,0,.15);

}

.dropdown:hover .dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateX(-50%) translateY(0);

}



/*==========================================================
    ITEMS DROPDOWN
==========================================================*/

.dropdown-menu li{

    border-bottom:1px solid #F0F0F0;

}

.dropdown-menu li:last-child{

    border:none;

}

.dropdown-menu a{

    display:block;

    padding:18px 24px;

    color:var(--text);

    font-size:15px;

    transition:.3s;

}

.dropdown-menu a:hover{

    background:var(--background);

    color:var(--secondary);

    padding-left:34px;

}



/*==========================================================
    BOTON HEADER
==========================================================*/

.btn-header{

    padding:14px 28px;

    background:var(--secondary);

    color:#FFF;

    border-radius:4px;

    font-size:14px;

    font-weight:600;

    letter-spacing:.5px;

    transition:.35s;

    box-shadow:0 10px 25px rgba(193,155,83,.25);

}

.btn-header:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(193,155,83,.35);

}



/*==========================================================
    MENU MOVIL
==========================================================*/

.menu-mobile{

    width:44px;

    height:44px;

    display:none;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    gap:6px;

    cursor:pointer;

}

.menu-mobile span{

    width:28px;

    height:2px;

    background:#FFF;

    transition:.3s;

}



/*==========================================================
    HEADER SPACE
==========================================================*/

body{

    padding-top:90px;

}



/*==========================================================
    EFECTOS
==========================================================*/

.menu i{

    font-size:11px;

    transition:.3s;

}

.dropdown:hover i{

    transform:rotate(180deg);

}



/*==========================================================
    HOVER GENERAL
==========================================================*/

.navbar a{

    transition:.35s;

}



/*==========================================================
    FIN PARTE 2
==========================================================*/

/*==========================================================
    HERO
==========================================================*/

.hero{

    position:relative;

    width:100%;

    height:100vh;

    min-height:750px;

    overflow:hidden;

    padding:0;

    background:#000;

}



/*==========================================================
    SLIDER
==========================================================*/

.slider{

    position:relative;

    width:100%;

    height:100%;

}



/*==========================================================
    SLIDES
==========================================================*/

.slide{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    transform:translate3d(0,0,0) scale(1.02);

    transition:
        opacity .95s cubic-bezier(.22,1,.36,1),
        transform .95s cubic-bezier(.22,1,.36,1),
        visibility .95s;

    will-change:opacity, transform;

}

.slide.active,
.slide.is-leaving,
.slide.enter-next,
.slide.enter-prev,
.slide.leave-next,
.slide.leave-prev{

    visibility:visible;

}

.slide.active{

    opacity:1;

    transform:translate3d(0,0,0) scale(1);

    z-index:2;

}

.slide.enter-next{

    opacity:0;

    transform:translate3d(90px,0,0) scale(1.02);

    z-index:3;

}

.slide.enter-prev{

    opacity:0;

    transform:translate3d(-90px,0,0) scale(1.02);

    z-index:3;

}

.slide.leave-next{

    opacity:0;

    transform:translate3d(-90px,0,0) scale(1.02);

    z-index:2;

}

.slide.leave-prev{

    opacity:0;

    transform:translate3d(90px,0,0) scale(1.02);

    z-index:2;

}



/*==========================================================
    IMAGENES
==========================================================*/

.slide img{

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scale(1);

    transition:
        transform 8s linear,
        filter .95s ease;

}

.slide.active img{

    transform:scale(1.08);

}

.slide.leave-next img,
.slide.leave-prev img{

    transform:scale(1.03);

}



/*==========================================================
    OVERLAY
==========================================================*/

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        to right,

        rgba(15,29,48,.82),

        rgba(15,29,48,.55),

        rgba(15,29,48,.35)

    );

}



/*==========================================================
    HERO CONTENT
==========================================================*/

.hero-content{

    position:absolute;

    top:50%;

    left:12%;

    transform:translateY(-50%);

    max-width:700px;

    z-index:5;

    color:#FFF;

}

.slide .hero-content > span,
.slide .hero-content > h1,
.slide .hero-content > .hero-main-title,
.slide .hero-content > h2,
.slide .hero-content > p,
.slide .hero-content > .btn-gold{

    opacity:0;

    transform:translateY(42px);

}



/*==========================================================
    TEXTO SUPERIOR
==========================================================*/

.hero-content span{

    display:inline-block;

    color:var(--secondary);

    letter-spacing:5px;

    font-size:14px;

    text-transform:uppercase;

    margin-bottom:20px;

}



/*==========================================================
    TITULO
==========================================================*/

.hero-content h1,
.hero-content .hero-main-title{

    font-family:var(--title);

    font-weight:700;

    color:#FFF;

    font-size:78px;

    line-height:1.05;

    margin-bottom:18px;

    max-width:650px;

}



/*==========================================================
    SUBTITULO
==========================================================*/

.hero-content h2{

    color:#FFF;

    font-size:36px;

    font-weight:500;

    margin-bottom:25px;

}



/*==========================================================
    PARRAFO
==========================================================*/

.hero-content p{

    color:rgba(255,255,255,.88);

    font-size:19px;

    line-height:1.8;

    max-width:560px;

    margin-bottom:40px;

}



/*==========================================================
    BOTON HERO
==========================================================*/

.hero .btn-gold{

    padding:18px 42px;

    font-size:15px;

    text-transform:uppercase;

    letter-spacing:2px;

}



/*==========================================================
    FLECHAS
==========================================================*/

.slider-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:62px;

    height:62px;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    color:#FFF;

    backdrop-filter:blur(10px);

    cursor:pointer;

    transition:.35s;

    z-index:20;

}

.slider-btn:hover{

    background:var(--secondary);

}

.prev{

    left:35px;

}

.next{

    right:35px;

}

.slider-btn i{

    font-size:18px;

}



/*==========================================================
    DOTS
==========================================================*/

.slider-dots{

    position:absolute;

    left:50%;

    bottom:45px;

    transform:translateX(-50%);

    display:flex;

    gap:14px;

    z-index:20;

}

.dot{

    width:14px;

    height:14px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.7);

    cursor:pointer;

    transition:.3s;

}

.dot.active{

    background:var(--secondary);

    border-color:var(--secondary);

}



/*==========================================================
    ANIMACION TEXTO
==========================================================*/

.slide.active .hero-content span{

    animation:fadeUp .8s ease forwards;

}

.slide.active .hero-content h1,
.slide.active .hero-content .hero-main-title{

    animation:fadeUp 1s ease forwards;

}

.slide.active .hero-content h2{

    animation:fadeUp 1.2s ease forwards;

}

.slide.active .hero-content p{

    animation:fadeUp 1.4s ease forwards;

}

.slide.active .hero-content .btn-gold{

    animation:fadeUp 1.6s ease forwards;

}



/*==========================================================
    KEYFRAMES
==========================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(45px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@media (prefers-reduced-motion: reduce){

    .slide{

        transition:none;

        transform:none;

    }

    .slide img{

        transition:none;

        transform:none !important;

    }

    .slide .hero-content > span,
    .slide .hero-content > h1,
    .slide .hero-content > .hero-main-title,
    .slide .hero-content > h2,
    .slide .hero-content > p,
    .slide .hero-content > .btn-gold,
    .slide.active .hero-content > span,
    .slide.active .hero-content > h1,
    .slide.active .hero-content > h2,
    .slide.active .hero-content > p,
    .slide.active .hero-content > .btn-gold{

        animation:none !important;

        opacity:1;

        transform:none;

    }

}



/*==========================================================
    SCROLL INDICATOR
==========================================================*/

.hero::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    width:1px;

    height:70px;

    background:rgba(255,255,255,.35);

    transform:translateX(-50%);

    z-index:10;

}



/*==========================================================
    DECORACION DORADA
==========================================================*/

.hero::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:8px;

    height:100%;

    background:var(--secondary);

    z-index:10;

}



/*==========================================================
    FIN PARTE 3
==========================================================*/



/*==========================================================
    PRESENTACIÓN
==========================================================*/

.presentation{

    background:#F7F5EE;

    padding:120px 0;

}


.presentation-grid{

    display:block;

}


/*==========================================================
    SECCIONES
==========================================================*/

.presentation-box{

    padding:75px 0;

    background:transparent;

    border-bottom:1px solid rgba(15,29,48,.15);

    position:relative;

}


.presentation-box:first-child{

    padding-top:0;

}


.presentation-box:last-child{

    border-bottom:none;

    padding-bottom:0;

}


/*==========================================================
    TITULOS
==========================================================*/

.section-title-left{

    text-align:center;

    margin-bottom:40px;

}


.section-title-left span{

    display:block;

    width:45px;

    height:2px;

    background:var(--secondary);

    margin:0 auto 15px;

}


.section-title-left h2{

    font-size:42px;

    color:var(--primary);

}


/*==========================================================
    CAJA PRINCIPAL DE EXPERIENCIA
==========================================================*/

.presentation-box:first-child{

    text-align:center;

}


.presentation-box:first-child > .lead{

    max-width:850px;

    margin:0 auto 30px;

}


/* Caja que contiene el contenido */

.presentation-box:first-child .lead,
.presentation-box:first-child .experience-item{

    background:#FFF;

}


.presentation-box:first-child .lead{

    padding:35px 45px;

    border:1px solid var(--border);

    box-shadow:0 8px 25px rgba(15,29,48,.05);

}


.presentation-box:first-child .experience-item{

    max-width:850px;

    margin:0 auto 15px;

    padding:25px 35px;

    border:1px solid var(--border);

    text-align:left;

}


.experience-item h3{

    font-size:23px;

    margin-bottom:10px;

    color:var(--primary);

}


.experience-item p{

    line-height:1.8;

    margin:0;

}


/*==========================================================
    BOTON EXPERIENCIA
==========================================================*/

.presentation-box:first-child .outline-btn{

    display:inline-block;

    margin-top:20px;

    padding:14px 30px;

    background:#FFF;

    border:1px solid var(--secondary);

}


/*==========================================================
    NUESTRO DESPACHO
==========================================================*/

.presentation-box:nth-of-type(2){

    text-align:center;

}


.presentation-box:nth-of-type(2) .office-card{

    max-width:1000px;

    margin:0 auto 25px;

}


/* Caja individual del despacho */

.office-card{

    display:grid;

    grid-template-columns:340px 1fr;

    gap:40px;

    align-items:center;

    padding:30px;

    background:#FFF;

    border:1px solid var(--border);

    box-shadow:0 8px 25px rgba(15,29,48,.05);

    text-align:left;

    transition:.35s;

}


.office-card:hover{

    border-color:rgba(193,155,83,.6);

    transform:none;

    box-shadow:0 12px 30px rgba(15,29,48,.08);

}


/*==========================================================
    FOTO DEL ABOGADO
==========================================================*/

.office-card img{

    width:520px;

    height:430px;

    object-fit:cover;

    border-radius:4px;

    flex-shrink:0;

}


/* Primera foto ligeramente más grande */

.office-card:first-child img{

    width:340px;

    height:280px;

}


/*==========================================================
    INFORMACION DEL DESPACHO
==========================================================*/

.office-card h3{

    font-size:28px;

    margin-bottom:6px;

    color:var(--primary);

}


.office-card span{

    display:block;

    color:var(--secondary);

    font-size:13px;

    margin-bottom:15px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;

}


.office-card p{

    font-size:15px;

    line-height:1.8;

    margin:0;

}


/*==========================================================
    BOTON DESPACHO
==========================================================*/

.presentation-box:nth-of-type(2) .outline-btn{

    display:inline-block;

    margin-top:15px;

    padding:14px 30px;

    background:#FFF;

    border:1px solid var(--secondary);

}


/*==========================================================
    AREAS DE PRACTICA
==========================================================*/

.presentation-box:nth-of-type(3){

    text-align:center;

}


.practice-list{

    max-width:900px;

    margin:0 auto 35px;

    padding:30px 40px;

    background:#FFF;

    border:1px solid var(--border);

    box-shadow:0 8px 25px rgba(15,29,48,.05);

    display:grid;

    grid-template-columns:repeat(2,1fr);

    column-gap:60px;

}


.practice-list li{

    display:flex;

    align-items:center;

    gap:12px;

    padding:13px 0;

    border-bottom:1px solid #ECECEC;

    transition:.3s;

}


.practice-list li:hover{

    padding-left:5px;

}


.practice-list li i{

    color:var(--secondary);

    font-size:13px;

}


.practice-list li:last-child{

    border-bottom:1px solid #ECECEC;

}


/*==========================================================
    ICONOS DE PRACTICA
==========================================================*/

.practice-grid{

    max-width:900px;

    margin:0 auto;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:18px;

}


.practice-card{

    min-height:120px;

    padding:25px 15px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    border:1px solid var(--border);

    background:#FFF;

    transition:.35s;

}


.practice-card:hover{

    background:var(--primary);

    color:#FFF;

    border-color:var(--primary);

    transform:translateY(-4px);

}


.practice-card i{

    display:block;

    font-size:30px;

    margin-bottom:14px;

    color:var(--secondary);

}


.practice-card:hover i{

    color:var(--secondary);

}


.practice-card span{

    display:block;

    font-weight:600;

}


/*==========================================================
    BOTONES
==========================================================*/

.presentation-box .outline-btn{

    transition:.35s;

}


.presentation-box .outline-btn:hover{

    background:var(--secondary);

    color:#FFF;

}


/*==========================================================
    DECORACION
==========================================================*/

.presentation-box::after{

    content:"";

    display:block;

    width:50px;

    height:2px;

    background:var(--secondary);

    margin:75px auto 0;

}


.presentation-box:last-child::after{

    display:none;

}


/*==========================================================
    FIN PARTE 4
==========================================================*/


/*==========================================================
    TODO TRÁMITE DE HERENCIAS
==========================================================*/

.about-herencias{

    background:var(--background);

    padding:130px 0;

}

.about-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:70px;

    align-items:start;

}

.about-content h2{

    margin-bottom:35px;

}

.about-content p{

    margin-bottom:25px;

    font-size:17px;

    line-height:2;

}

.about-box{

    padding:45px;

    border:1px solid var(--border);

    position:sticky;

    top:130px;

}

.about-box h3{

    margin-bottom:30px;

    font-size:28px;

}

.about-box ul{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.about-box li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    font-size:16px;

    color:var(--text);

    line-height:1.7;

}

.about-box li::before{

    content:"";

    width:8px;

    height:8px;

    background:var(--secondary);

    border-radius:50%;

    margin-top:10px;

    flex-shrink:0;

}

.about-message{

    margin-top:70px;

    padding:45px;

    background:#FFF;

    border-left:5px solid var(--secondary);

}

.about-message p{

    font-size:20px;

    color:var(--text);

    margin-bottom:18px;

}

.about-message strong{

    font-size:22px;

    color:var(--primary);

    font-family:var(--title);

}



/*==========================================================
    SERVICIOS
==========================================================*/

.services{

    background:#FFF;

    padding:130px 0;

}

.services-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}



/*==========================================================
    TARJETA
==========================================================*/

.service-card{

    position:relative;

    overflow:hidden;

    background:#FFF;

    border:1px solid var(--border);

    padding:45px;

    transition:.4s;

    min-height:420px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

}

.service-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

    border-color:var(--secondary);

}



/*==========================================================
    NUMERO
==========================================================*/

.service-number{

    position:absolute;

    right:30px;

    top:20px;

    font-size:72px;

    font-family:var(--title);

    color:rgba(193,155,83,.12);

    font-weight:700;

}



/*==========================================================
    ICONO
==========================================================*/

.service-icon{

    width:72px;

    height:72px;

    border-radius:50%;

    background:rgba(193,155,83,.10);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:30px;

}

.service-icon i{

    font-size:28px;

    color:var(--secondary);

}



/*==========================================================
    TITULO
==========================================================*/

.service-card h3{

    margin-bottom:20px;

    font-size:30px;

}

.service-card p{

    margin-bottom:35px;

    line-height:1.9;

    color:#434A54;

    font-weight:400;

}



/*==========================================================
    BOTON
==========================================================*/

.service-card a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--secondary);

    font-weight:600;

    transition:.35s;

}

.service-card:hover a{

    gap:18px;

}



/*==========================================================
    LINEA DORADA
==========================================================*/

.service-card::before{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:4px;

    background:var(--secondary);

    transition:.45s;

}

.service-card:hover::before{

    width:100%;

}



/*==========================================================
    EFECTO BRILLO
==========================================================*/

.service-card::after{

    content:"";

    position:absolute;

    top:-100%;

    left:-100%;

    width:220%;

    height:220%;

    background:linear-gradient(

        120deg,

        transparent,

        rgba(255, 255, 255, 0.925),

        transparent

    );

    transform:rotate(20deg);

    transition:1s;

}

.service-card:hover::after{

    top:100%;

    left:100%;

}



/*==========================================================
    CTA
==========================================================*/

.service-card.highlight{

    background:var(--primary);

    color:#FFF;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

}

.service-card.highlight h3{

    color:#FFF;

    margin-bottom:20px;

}

.service-card.highlight p{

    color:rgba(255,255,255,.85);

}

.service-card.highlight span{

    display:block;

    color:var(--secondary);

    letter-spacing:3px;

    margin-bottom:20px;

    font-size:13px;

    text-transform:uppercase;

}

.service-button{

    display:inline-block;

    margin-top:25px;

    padding:16px 34px;

    background:var(--secondary);

    color:#FFF;

    font-weight:600;

}



/*==========================================================
    HOVER CTA
==========================================================*/

.service-card.highlight:hover{

    transform:translateY(-10px);

}



/*==========================================================
    DIVISOR
==========================================================*/

.services .section-heading{

    margin-bottom:90px;

}

.services .section-heading span{

    display:inline-block;

    color:var(--secondary);

    letter-spacing:4px;

    margin-bottom:18px;

}

.services .section-heading h2{

    font-size:52px;

}



/*==========================================================
    FIN PARTE 5
==========================================================*/

/*==========================================================
    BIOGRAPHY
==========================================================*/

.biography{

    background:#FFF;

    padding:130px 0;

}

.biography-grid{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:80px;

    align-items:center;

}

.biography-image{

    position:relative;

}

.biography-image::before{

    content:"";

    position:absolute;

    top:-25px;

    left:-25px;

    width:100%;

    height:100%;

    border:3px solid var(--secondary);

    z-index:0;

}

.biography-image img{

    position:relative;

    z-index:1;

    border-radius:8px;

    box-shadow:var(--shadow-lg);

}

.biography-content h2{

    margin:15px 0 30px;

}

.biography-content p{

    margin-bottom:22px;

    line-height:1.9;

    font-size:16px;

}

.bio-contact{

    margin-top:35px;

    padding-top:25px;

    border-top:1px solid var(--border);

}

.bio-contact h4{

    margin-bottom:10px;

}

.bio-contact a{

    color:var(--secondary);

    font-weight:600;

}



/*==========================================================
    CONTACT
==========================================================*/

.contact{

    background:var(--background);

    padding:130px 0;

}

.contact-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:start;

}

.contact-info h2{

    margin:15px 0 25px;

}

.contact-info p{

    margin-bottom:35px;

    line-height:1.9;

}

.contact-info ul{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.contact-info li{

    display:flex;

    align-items:center;

    gap:18px;

    font-size:16px;

}

.contact-info i{

    width:48px;

    height:48px;

    border-radius:50%;

    background:var(--secondary);

    color:#FFF;

    display:flex;

    align-items:center;

    justify-content:center;

}



/*==========================================================
    FORM
==========================================================*/

.contact-form{

    padding:45px;

    border:1px solid var(--border);

}

.form-group{

    margin-bottom:22px;

}

.contact-form input,

.contact-form textarea{

    width:100%;

    padding:18px 20px;

    border:1px solid #DDD;

    background:#FFF;

    outline:none;

    font-family:var(--body);

    transition:.35s;

    font-size:15px;

}

.contact-form textarea{

    resize:vertical;

    min-height:180px;

}

.contact-form input:focus,

.contact-form textarea:focus{

    border-color:var(--secondary);

    box-shadow:0 0 0 4px rgba(193,155,83,.12);

}



/*==========================================================
    FOOTER
==========================================================*/

.footer{

    background:var(--primary);

    color:#FFF;

    padding-top:90px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:50px;

    padding-bottom:60px;

}

.footer img{

    width:180px;

    margin-bottom:25px;

}

.footer p{

    color:rgba(255,255,255,.75);

    line-height:1.9;

}

.footer h3{

    color:#FFF;

    margin-bottom:25px;

    font-size:24px;

}

.footer ul{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.footer li{

    color:rgba(255,255,255,.75);

    transition:.3s;

}

.footer li:hover{

    color:var(--secondary);

    padding-left:8px;

}

.footer a{

    color:inherit;

}



/*==========================================================
    SOCIAL
==========================================================*/

.socials{

    display:flex;

    gap:15px;

    margin-top:25px;

}

.socials a{

    width:45px;

    height:45px;

    border:1px solid rgba(255,255,255,.15);

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.35s;

}

.socials a:hover{

    background:var(--secondary);

    border-color:var(--secondary);

}



/*==========================================================
    COPYRIGHT
==========================================================*/

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.08);

    padding:25px 0;

    text-align:center;

}

.footer-bottom p{

    margin:0;

    color:rgba(255,255,255,.65);

    font-size:14px;

}



/*==========================================================
    WHATSAPP
==========================================================*/

.whatsapp{

    position:fixed;

    right:25px;

    bottom:25px;

    width:62px;

    height:62px;

    border-radius:50%;

    background:#25D366;

    color:#FFF;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    z-index:999;

    box-shadow:0 10px 25px rgba(0,0,0,.2);

    transition:.35s;

}

.whatsapp:hover{

    transform:scale(1.08);

}



/*==========================================================
    BACK TOP
==========================================================*/

.back-top{

    position:fixed;

    right:25px;

    bottom:100px;

    width:52px;

    height:52px;

    background:var(--secondary);

    color:#FFF;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:998;

}

.back-top.show{

    opacity:1;

    visibility:visible;

}



/*==========================================================
    HOVER GENERAL
==========================================================*/

button,

a,

input,

textarea{

    transition:.35s ease;

}



/*==========================================================
    FIN STYLE.CSS
==========================================================*/


/* Mantiene el carrusel de noticias a ancho completo al colocarlo después de Experiencia */
.presentation-grid > .home-news-feed{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
}

/*==========================================================
    CARRUSEL / FEED DE NOTICIAS EN INICIO
==========================================================*/
.home-news-feed{
    background:#FFFFFF;
    padding:120px 0;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}
.home-news-feed .section-heading{
    max-width:760px;
    margin:0 auto 55px;
}
.home-news-feed .section-heading p{
    max-width:650px;
    margin:18px auto 0;
    color:#4C5561;
}
.fts-news-feed{
    max-width:1180px;
    margin:0 auto;
    padding:22px;
    background:var(--background);
    border:1px solid var(--border);
    box-shadow:0 12px 35px rgba(15,29,48,.06);
}
.fts-news-feed:empty::before{
    content:"El carrusel de noticias se mostrará aquí cuando Feed Them Social esté activo en WordPress.";
    display:block;
    padding:35px;
    text-align:center;
    color:#4C5561;
}

/*==========================================================
    PÁGINA DE CITAS / CALENDLY
==========================================================*/
.appointment-page{
    background:var(--background);
    padding:85px 0 110px;
}
.appointment-intro{
    max-width:820px;
    margin:0 auto 45px;
    text-align:center;
}
.appointment-intro h1{
    font-size:clamp(44px,5vw,68px);
    margin:10px 0 18px;
}
.appointment-intro p{
    max-width:680px;
    margin:0 auto;
    color:#4C5561;
    line-height:1.9;
}
.calendly-shell{
    max-width:1150px;
    margin:0 auto;
    padding:20px;
    background:#FFFFFF;
    border:1px solid var(--border);
    box-shadow:0 18px 45px rgba(15,29,48,.08);
}
.calendly-inline-widget{
    width:100%;
}
@media(max-width:768px){
    .home-news-feed{padding:80px 0;}
    .appointment-page{padding:65px 0 80px;}
    .calendly-shell{padding:8px;}
    .calendly-inline-widget{height:760px !important;}
}


/* ==========================================================
   NAVEGACIÓN CON PREGUNTAS FRECUENTES
========================================================== */
@media (min-width:1025px){
    .navbar{gap:18px;}
    .menu{gap:clamp(14px,1.5vw,26px);}
    .menu>li>a{font-size:14px;white-space:nowrap;}
    .btn-header{flex-shrink:0;white-space:nowrap;}
}


/*==========================================================
    LEGIBILIDAD DE TARJETAS DE SERVICIOS
==========================================================*/
.service-card > *{
    position:relative;
    z-index:2;
}
.service-card::before{
    z-index:3;
}
.service-card::after{
    z-index:1;
    pointer-events:none;
}
.service-card h3{
    color:#0F1D30;
    font-weight:700;
}
.service-card p{
    color:#364152 !important;
    font-weight:450;
}
.service-card > a{
    color:#9A7534;
    font-weight:700;
}
.service-card .service-number{
    color:rgba(193,155,83,.24);
}
.service-card.highlight p{
    color:rgba(255,255,255,.90) !important;
}
.service-card.highlight h3{
    color:#FFFFFF;
}

/*==========================================================
    PÁGINAS DE SERVICIOS
==========================================================*/
.service-page-hero{
    padding:85px 0 80px;
    text-align:center;
    background:linear-gradient(120deg,#0F1D30 0%,#152A45 72%,#20344C 100%);
    border-bottom:1px solid rgba(193,155,83,.35);
}
.service-page-hero .section-subtitle{
    margin-bottom:16px;
}
.service-page-hero h1{
    margin:0;
    color:#FFFFFF;
    font-size:clamp(44px,5.5vw,72px);
    font-weight:600;
}
.service-detail{
    padding:90px 0 110px;
    background:var(--background);
}
.service-detail-shell{
    max-width:1050px;
    margin:0 auto;
    overflow:hidden;
    background:#FFFFFF;
    border:1px solid var(--border);
    box-shadow:0 18px 55px rgba(15,29,48,.09);
}
.service-detail-image{
    max-width:700px;
    margin:55px auto 0;
    padding:0 35px;
}
.service-detail-image img{
    width:100%;
    max-height:430px;
    object-fit:cover;
    border-radius:5px;
    box-shadow:0 12px 32px rgba(15,29,48,.12);
}
.service-detail-content{
    padding:55px 75px 65px;
}
.service-detail-content h2{
    max-width:820px;
    margin:0 auto 38px;
    text-align:center;
    font-size:clamp(34px,4vw,48px);
    font-weight:600;
}
.service-detail-content h3{
    margin:38px 0 18px;
    font-size:30px;
}
.service-detail-content p{
    margin:0 0 24px;
    color:#39424E;
    font-size:17px;
    line-height:1.95;
}
.service-detail-lead{
    margin-top:32px !important;
    color:#0F1D30 !important;
    font-weight:650 !important;
}
.service-detail-emphasis{
    margin:34px 0 !important;
    padding:24px 28px;
    color:#0F1D30 !important;
    background:#F7F5EE;
    border-left:4px solid #C19B53;
    font-family:var(--title);
    font-size:22px !important;
    line-height:1.55 !important;
}
.service-detail-list{
    display:grid;
    gap:13px;
    margin:8px 0 34px;
    padding:0;
}
.service-detail-list li{
    position:relative;
    padding-left:25px;
    color:#303945;
    font-size:16px;
    line-height:1.75;
}
.service-detail-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:.72em;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#C19B53;
}
.service-detail-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
    padding:42px 55px;
    background:#0F1D30;
    border-top:1px solid rgba(193,155,83,.28);
}
.service-detail-cta span{
    display:block;
    margin-bottom:8px;
    color:#C19B53;
    font-size:11px;
    font-weight:700;
    letter-spacing:2px;
}
.service-detail-cta h3{
    margin:0;
    color:#FFFFFF;
    font-size:30px;
    font-weight:500;
}
.service-detail-cta .btn-gold{
    flex-shrink:0;
}
@media(max-width:768px){
    .service-page-hero{padding:65px 0 60px;}
    .service-detail{padding:65px 0 80px;}
    .service-detail-image{margin-top:32px;padding:0 20px;}
    .service-detail-content{padding:38px 28px 45px;}
    .service-detail-content p{font-size:16px;}
    .service-detail-cta{flex-direction:column;align-items:flex-start;padding:34px 28px;}
    .service-detail-cta h3{font-size:27px;}
}


/*==========================================================
    HERO - CONTROL DE ANIMACION POR JAVASCRIPT
==========================================================*/
html.dv-hero-motion .hero .slide{
    transition:none;
}
html.dv-hero-motion .hero .slide.active .hero-content > span,
html.dv-hero-motion .hero .slide.active .hero-content > h1,
html.dv-hero-motion .hero .slide.active .hero-content > .hero-main-title,
html.dv-hero-motion .hero .slide.active .hero-content > h2,
html.dv-hero-motion .hero .slide.active .hero-content > p,
html.dv-hero-motion .hero .slide.active .hero-content > .btn-gold{
    animation:none;
}


/*==========================================================
    CARRUSEL REAL DE FEED THEM SOCIAL EN INICIO
==========================================================*/
.fts-news-feed{
    position:relative;
    overflow:hidden;
}

.dv-fts-carousel{
    position:relative;
    width:100%;
    margin-top:8px;
}

.dv-fts-carousel-viewport{
    width:100%;
    overflow:hidden;
    padding:5px 3px 15px;
    touch-action:pan-y;
}

.dv-fts-carousel-track{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:stretch;
    gap:24px;
    margin:0 !important;
    padding:0 !important;
    transform:translate3d(0,0,0);
    will-change:transform;
}

.fts-news-feed .dv-fts-carousel-item{
    box-sizing:border-box !important;
    float:none !important;
    clear:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:22px !important;
    height:auto !important;
    background:#FFFFFF !important;
    border:1px solid rgba(15,29,48,.10) !important;
    border-radius:6px;
    box-shadow:0 10px 28px rgba(15,29,48,.08);
    overflow:hidden;
}

.fts-news-feed .dv-fts-carousel-item img{
    max-width:100%;
    height:auto;
}

.fts-news-feed .dv-fts-carousel-item a{
    overflow-wrap:anywhere;
}

.dv-fts-carousel-controls{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin-top:24px;
}

.dv-fts-carousel-controls.is-hidden{
    display:none;
}

.dv-fts-carousel-arrow{
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(15,29,48,.15);
    border-radius:50%;
    background:#FFFFFF;
    color:var(--primary);
    box-shadow:0 7px 20px rgba(15,29,48,.08);
    transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s ease;
}

.dv-fts-carousel-arrow:hover,
.dv-fts-carousel-arrow:focus-visible{
    background:var(--primary);
    color:#FFFFFF;
    border-color:var(--primary);
    transform:translateY(-2px);
}

.dv-fts-carousel-dots{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    max-width:420px;
}

.dv-fts-carousel-dot{
    width:9px;
    height:9px;
    padding:0;
    border:0;
    border-radius:99px;
    background:rgba(15,29,48,.22);
    transition:width .3s ease,background .3s ease;
}

.dv-fts-carousel-dot.active{
    width:28px;
    background:var(--secondary);
}

.dv-fts-carousel-arrow:focus-visible,
.dv-fts-carousel-dot:focus-visible{
    outline:2px solid var(--secondary);
    outline-offset:3px;
}

/* Neutraliza anchos/float que el plugin suele colocar en los posts. */
.fts-news-feed .fts-jal-single-fb-post.dv-fts-carousel-item,
.fts-news-feed .fts-mashup-post-wrap.dv-fts-carousel-item,
.fts-news-feed .fts-instagram-inline-block-centered.dv-fts-carousel-item,
.fts-news-feed .fts-instagram-photo-post-wrap.dv-fts-carousel-item,
.fts-news-feed .fts-youtube-popup-gallery.dv-fts-carousel-item,
.fts-news-feed .fts-tweeter-wrap.dv-fts-carousel-item{
    width:auto !important;
    max-width:none !important;
    display:block !important;
}

@media(max-width:680px){
    .fts-news-feed{padding:14px;}
    .dv-fts-carousel-track{gap:16px;}
    .fts-news-feed .dv-fts-carousel-item{padding:18px !important;}
    .dv-fts-carousel-controls{gap:12px;margin-top:18px;}
    .dv-fts-carousel-arrow{width:42px;height:42px;flex-basis:42px;}
}

@media(prefers-reduced-motion:reduce){
    .dv-fts-carousel-track,
    .dv-fts-carousel-arrow,
    .dv-fts-carousel-dot{transition:none !important;}
}

/*==========================================================
    FEED THEM SOCIAL EN PAGINA DE NOTICIAS
==========================================================*/
.news-page-feed{
    margin-top:10px;
}

.dv-news-demo-post h3{
    margin:20px 0 12px;
    color:#0F1D30;
    font-size:26px;
}

.dv-news-demo-post p{
    margin:0 0 20px;
    color:#46515F;
    line-height:1.75;
}

.dv-news-demo-post > a{
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:#9A7534;
    font-weight:700;
}

/*==========================================================
    NUESTRO DESPACHO / BIOGRAFÍA
==========================================================*/
.bio-page-hero{
    padding:85px 0 0;
    background:linear-gradient(110deg,#0A1727 0%,#0F1D30 62%,#172A41 100%);
    overflow:hidden;
    border-top:1px solid rgba(255,255,255,.06);
}
.bio-page-hero-grid{
    min-height:600px;
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(360px,.75fr);
    gap:70px;
    align-items:center;
}
.bio-page-hero-copy{
    padding:65px 0 85px;
    position:relative;
    z-index:2;
}
.bio-page-hero-copy h1{
    margin:8px 0 14px;
    max-width:760px;
    color:#FFF;
    font-size:clamp(52px,6vw,82px);
    font-weight:600;
}
.bio-page-hero-copy > p:not(.bio-credentials){
    max-width:660px;
    margin:0 0 30px;
    color:rgba(255,255,255,.8);
    font-size:18px;
    line-height:1.9;
}
.bio-credentials{
    margin:0 0 22px;
    color:#C19B53 !important;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
}
.bio-page-portrait{
    position:relative;
    align-self:end;
    min-height:540px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
}
.bio-page-portrait::before{
    content:"";
    position:absolute;
    width:380px;
    height:380px;
    right:10%;
    top:18%;
    border:1px solid rgba(193,155,83,.42);
    border-radius:50%;
    box-shadow:0 0 0 34px rgba(193,155,83,.045),0 0 0 68px rgba(193,155,83,.028);
}
.bio-page-portrait img{
    position:relative;
    z-index:2;
    width:min(100%,520px);
    max-height:585px;
    object-fit:contain;
    object-position:bottom center;
}
.bio-profile-section{
    background:#F7F5EE;
    padding:120px 0;
}
.bio-profile-wrap{
    max-width:1040px;
}
.bio-section-heading{
    margin-bottom:48px;
}
.bio-section-heading.center{
    text-align:center;
    max-width:820px;
    margin:0 auto 50px;
}
.bio-section-heading > span{
    display:inline-block;
    margin-bottom:12px;
    color:#C19B53;
    font-size:12px;
    font-weight:700;
    letter-spacing:3px;
}
.bio-section-heading h2{
    margin:0;
    font-size:clamp(38px,4.5vw,58px);
    font-weight:600;
}
.bio-section-heading p{
    margin:18px auto 0;
    color:#4B5563;
    line-height:1.9;
}
.bio-copy{
    background:#FFF;
    padding:64px 70px;
    border:1px solid #E5E2D9;
    box-shadow:0 14px 42px rgba(15,29,48,.07);
}
.bio-copy p{
    margin:0 0 23px;
    color:#3F4854;
    font-size:16px;
    line-height:1.95;
}
.bio-highlight-box,
.bio-principles{
    margin:42px 0;
    padding:38px 42px;
    background:#F7F5EE;
    border-left:4px solid #C19B53;
}
.bio-highlight-box h3,
.bio-principles h3{
    margin:0 0 24px;
    font-size:28px;
}
.bio-list{
    display:grid;
    gap:13px;
}
.bio-list-two{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:42px;
}
.bio-list li{
    position:relative;
    padding-left:22px;
    color:#2E3743;
    line-height:1.75;
}
.bio-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:.72em;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#C19B53;
}
.bio-quote{
    margin:45px 0;
    padding:34px 40px;
    background:#0F1D30;
    color:#FFF;
    border-left:5px solid #C19B53;
    font-family:var(--title);
    font-size:30px;
    line-height:1.45;
}
.bio-emphasis{
    font-family:var(--title);
    font-size:24px !important;
    color:#0F1D30 !important;
}
.bio-consult-cta{
    margin-top:50px;
    padding:42px 48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    background:#0F1D30;
    border:1px solid rgba(193,155,83,.28);
}
.bio-consult-cta span{
    color:#C19B53;
    font-size:11px;
    font-weight:700;
    letter-spacing:2.5px;
}
.bio-consult-cta h3{
    margin:8px 0 10px;
    color:#FFF;
    font-size:32px;
}
.bio-consult-cta p{
    max-width:650px;
    color:rgba(255,255,255,.7);
}
.bio-consult-cta .btn-gold{
    flex-shrink:0;
}
.bio-seminars-section{
    padding:110px 0 125px;
    background:#FFF;
}
.bio-seminars-image{
    max-width:1050px;
    height:330px;
    margin:0 auto 68px;
    overflow:hidden;
    border:1px solid #E5E2D9;
}
.bio-seminars-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.seminar-list{
    max-width:1000px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 28px;
}
.seminar-list li{
    padding:18px 20px 18px 48px;
    position:relative;
    background:#F7F5EE;
    border:1px solid #E5E2D9;
    color:#2E3743;
    line-height:1.6;
}
.seminar-list li::before{
    content:"\f00c";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    position:absolute;
    left:20px;
    top:19px;
    color:#C19B53;
}
@media(max-width:900px){
    .bio-page-hero-grid{grid-template-columns:1fr;gap:10px;min-height:auto;text-align:center;}
    .bio-page-hero-copy{padding:55px 0 15px;}
    .bio-page-hero-copy > p:not(.bio-credentials){margin-left:auto;margin-right:auto;}
    .bio-page-portrait{min-height:420px;}
    .bio-page-portrait::before{right:50%;transform:translateX(50%);}
    .bio-copy{padding:46px 38px;}
    .bio-list-two,.seminar-list{grid-template-columns:1fr;}
    .bio-consult-cta{flex-direction:column;align-items:flex-start;}
}
@media(max-width:600px){
    .bio-page-hero{padding-top:45px;}
    .bio-page-portrait{min-height:350px;}
    .bio-page-portrait::before{width:270px;height:270px;}
    .bio-profile-section,.bio-seminars-section{padding:75px 0;}
    .bio-copy{padding:32px 24px;}
    .bio-highlight-box,.bio-principles{padding:28px 24px;}
    .bio-quote{padding:28px 24px;font-size:25px;}
    .bio-consult-cta{padding:32px 26px;}
    .bio-seminars-image{height:230px;margin-bottom:50px;}
}


/*==========================================================
    AJUSTE FINAL CTA SERVICIOS - FONDO AZUL Y BOTÓN LEGIBLE
==========================================================*/
.service-card.highlight{
    background:#0F1D30 !important;
    background-image:none !important;
    border-color:#0F1D30 !important;
    color:#FFFFFF !important;
}
.service-card.highlight::after{
    display:none !important;
}
.service-card.highlight .service-content{
    position:relative;
    z-index:4;
}
.service-card.highlight h3{
    color:#FFFFFF !important;
}
.service-card.highlight p{
    color:rgba(255,255,255,.92) !important;
}
.service-card.highlight .service-button,
.service-card.highlight .service-button:visited,
.service-card.highlight .service-button:hover,
.service-card.highlight .service-button:focus{
    background:#C19B53 !important;
    color:#FFFFFF !important;
    opacity:1 !important;
}


/*==========================================================
    CONTEXTO SEO VISIBLE - INTEGRADO AL DISEÑO
==========================================================*/
.about-message .seo-keywords-line{
    margin:24px 0 0;
    padding-top:20px;
    border-top:1px solid var(--border);
    color:#4C5561;
    font-family:var(--body);
    font-size:15px;
    font-weight:400;
    line-height:1.85;
}