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

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            background: #f4f2ed;
            color: #17283d;
            font-family: "DM Sans", sans-serif;
            line-height: 1.6;
        }

        img {
            display: block;
            width: 100%;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        button {
            font: inherit;
        }


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

        :root {
            --navy: #0d1b2d;
            --navy-light: #17283d;
            --text: #243247;
            --muted: #687384;
            --cream: #f4f2ed;
            --white: #ffffff;
            --line: rgba(20, 37, 58, .16);

            --container: 1280px;
            --gutter: clamp(24px, 5vw, 72px);
        }


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

        .container {
            width: min(
                calc(100% - (var(--gutter) * 2)),
                var(--container)
            );
            margin-inline: auto;
        }

        .eyebrow {
            display: block;

            color: var(--muted);
            font-size: 18px;
            font-weight: 600;
            letter-spacing: .18em;
            text-transform: uppercase;
        }

        .section-title {
            margin: 0;

            font-family: "Playfair Display", serif;
            font-size: clamp(36px, 4vw, 58px);
            font-weight: 400;
            line-height: 1.1;
        }

        .section-line {
            width: 45px;
            height: 1px;
            margin-top: 22px;

            background: var(--navy);
        }


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

        .site-header {
            position: absolute;
            z-index: 20;

            top: 0;
            left: 0;

            width: 100%;
        }

        .header-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;

            min-height: 110px;
        }

        .brand {
            display: flex;
            flex-direction: column;
            line-height: 1;
        }

        .brand-name {
            color: var(--navy);

            font-family: "Playfair Display", serif;
            font-size: 30px;
            letter-spacing: .12em;
        }

        .brand-subtitle {
            margin-top: 9px;
            margin-left: 3px;

            color: var(--navy);

            font-size: 10px;
            font-weight: 600;
            letter-spacing: .55em;
        }

        .main-nav {
            display: flex;
            align-items: center;
            gap: clamp(24px, 3vw, 52px);
        }

        .main-nav a {
            position: relative;

            color: var(--navy);

            font-size: 16px;
            font-weight: 500;
        }

        .main-nav a::after {
            position: absolute;

            content: "";

            width: 0;
            height: 1px;

            left: 0;
            bottom: -10px;

            background: var(--navy);

            transition: width .25s ease;
        }

        .main-nav a:hover::after,
        .main-nav a.active::after {
            width: 100%;
        }

        .menu-toggle {
            display: none;

            border: 0;
            background: transparent;

            cursor: pointer;
        }


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

        .hero {
            min-height: 760px;

            display: flex;
            align-items: center;

            overflow: hidden;

            background-position: center;
            background-size: cover;
        }

        .hero-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(400px, 1fr);

            align-items: center;

            min-height: 760px;
        }

        .hero-content {
            max-width: 620px;
            padding-top: 100px;
        }

        .hero h1 {
            margin: 0;

            max-width: 620px;

            font-family: "Playfair Display", serif;
            font-size: clamp(52px, 5.3vw, 82px);
            font-weight: 400;
            line-height: 1.08;
            letter-spacing: -.03em;
        }

        .hero-description {
            max-width: 520px;
            margin-top: 34px;

            color: var(--text);

            font-size: 18px;
            line-height: 2;
        }

        .hero-description::before {
            display: block;

            content: "";

            width: 50px;
            height: 1px;

            margin-bottom: 22px;

            background: var(--navy);
        }

        .hero-image-mobile {
            display: none;
        }


        /* =====================================================
           ÁMBITOS
        ===================================================== */

        .practice-areas {
            padding: 95px 0 80px;
        }

        .areas-header {
            margin-bottom: 55px;
            text-align: center;
        }

        .areas-header h2 {
            margin: 0;

            font-size: 17px;
            font-weight: 600;
            letter-spacing: .16em;
            text-transform: uppercase;
        }

        .areas-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);

            border-top: 1px solid transparent;
        }

        .area-card {
            min-height: 320px;

            padding:
                8px
                clamp(20px, 3vw, 48px)
                20px;

            border-right: 1px solid var(--line);
        }

        .area-card:first-child {
            padding-left: 0;
        }

        .area-card:last-child {
            border-right: 0;
            padding-right: 0;
        }

        .area-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 46px;
            height: 46px;

            margin-bottom: 28px;

            color: var(--navy);
            font-size: 38px;
            line-height: 1;
        }

        .area-card h3 {
            margin: 0 0 18px;

            font-family: "Playfair Display", serif;
            font-size: clamp(26px, 2.2vw, 34px);
            font-weight: 400;
            line-height: 1.25;
        }

        .area-description {
            margin: 0;

            max-width: 260px;

            color: var(--muted);

            font-size: 17px;
            line-height: 1.8;
        }
		.area-card p {
			color: var(--muted);
			font-size: 17px;
		}

        .areas-summary {
            max-width: 850px;

            margin: 75px auto 0;
            text-align: center;
        }

        .areas-summary h3 {
            margin: 0 0 8px;

            font-family: "Playfair Display", serif;
            font-size: 26px;
            font-weight: 400;
        }

        .areas-summary p {
            margin: 0;

            color: var(--muted);
            font-size: 17px;
        }


        /* =====================================================
           MÉTODO
        ===================================================== */

        .method {
            padding: 95px 0;

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

        .method-header {
            margin-bottom: 60px;
        }

        .method-header h2 {
            margin: 0;

            font-family: "Playfair Display", serif;
            font-size: clamp(38px, 4vw, 60px);
            font-weight: 400;
        }

        .method-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
        }

        .method-step {
            min-height: 190px;

            padding:
                0
                clamp(20px, 3vw, 45px);

            border-right: 1px solid var(--line);
        }

        .method-step:first-child {
            padding-left: 0;
        }

        .method-step:last-child {
            padding-right: 0;
            border-right: 0;
        }

        .method-number {
            display: block;

            margin-bottom: 8px;

            font-family: "Playfair Display", serif;
            font-size: 42px;
            font-weight: 400;
        }

		.method-step h3 {
			margin: 0 0 15px;
			font-size: 20px;
			font-weight: 600;
			line-height: 26px;
		}

        .method-step p {
            max-width: 200px;

            margin: 0;

            color: var(--muted);

            font-size: 18px;
            line-height: 1.7;
        }
        section#inicio {
    position: relative;
    height: 100vh;
}
.animadita {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}.fondito {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.25;
}.persona {
    position: absolute;
    height: 92%;
    width: 500px;
    background-size: cover;
    z-index: 2;
    bottom: 0;
    right: 10%;
    max-height: 820px;
    background-repeat: no-repeat;
    background-position: center;
}
        /* =====================================================
           PERFIL
        ===================================================== */

        .profile {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

            background: #ece9e3;
        }
.contact-header-flex {
    display: flex;
    justify-content: space-between;
    gap: clamp(28px, 4vw, 72px);
    width: 100%;
    align-items: center;
}

.contact-header-flex .left {
    flex: 1 1 52%;
}

.contact-header-flex .right {
    flex: 0 0 clamp(520px, 46%, 680px);
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}.contact-header-flex input {
    width: 100%;
    box-sizing: border-box;
    background: white;
    border-radius: 9px;
    border: none;
    padding: 6px 10px;
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
}.contact-header-flex input.wpcf7-submit {
    background: #4663ff;
    color: white;
    padding: 10px;
    font-weight: 700;
}.contact-header-flex textarea {
    height: 49px;
    border: none;
    border-radius: 9px;
    padding: 6px 10px;
    resize: none;
}.contact-header-flex .wpcf7-spinner {
    display: none;
}

        /* =====================================================
           FORMULARIO MEJORADO (VERSION ESTATICA)
        ===================================================== */

        .contact-form-enhanced {
            width: 100%;
            max-width: none;
            margin-left: 0;

            padding: 20px;
            border: 1px solid rgba(255,255,255,.18);
            border-radius: 14px;

            background: rgba(255,255,255,.08);
            backdrop-filter: blur(3px);
        }

        .contact-form-enhanced .form-row {
            margin-bottom: 12px;
        }

        .contact-form-enhanced .form-row-inline {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .contact-form-enhanced .form-row-half {
            min-width: 0;
        }

        .contact-form-enhanced .hp-field {
            position: absolute;
            left: -9999px;
            width: 1px;
            height: 1px;
            overflow: hidden;
            opacity: 0;
            pointer-events: none;
        }

        .contact-form-enhanced label {
            display: block;
            margin-bottom: 6px;

            color: rgba(255,255,255,.85);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: .04em;
            text-transform: uppercase;
        }

        .contact-form-enhanced input,
        .contact-form-enhanced textarea {
            width: 100%;
            box-sizing: border-box;

            border: 1px solid rgba(255,255,255,.25);
            border-radius: 10px;

            padding: 12px 14px;

            color: #fff;
            background: rgba(7,16,29,.45);

            font-size: 15px;
            line-height: 1.4;

            transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
        }

        .contact-form-enhanced textarea {
            min-height: 110px;
            resize: vertical;
        }

        .contact-form-enhanced input::placeholder,
        .contact-form-enhanced textarea::placeholder {
            color: rgba(255,255,255,.5);
        }

        .contact-form-enhanced input:focus,
        .contact-form-enhanced textarea:focus {
            outline: none;
            border-color: rgba(255,255,255,.6);
            box-shadow: 0 0 0 3px rgba(255,255,255,.14);
            background: rgba(7,16,29,.62);
        }

        .form-submit {
            display: inline-flex;
            justify-content: center;
            align-items: center;

            width: 100%;
            min-height: 46px;

            border: 0;
            border-radius: 10px;
            margin-top: 4px;

            color: #13253b;
            background: #f4f2ed;

            font-size: 14px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;

            cursor: pointer;
            transition: transform .2s ease, opacity .2s ease;
        }

        .form-submit:hover {
            transform: translateY(-1px);
            opacity: .92;
        }

        .form-submit:active {
            transform: translateY(0);
        }

        .form-feedback {
            min-height: 18px;
            margin: 10px 0 0;

            color: rgba(255,255,255,.88);
            font-size: 13px;
        }

        .form-feedback.is-error {
            color: #ffd1d1;
        }

        .form-feedback.is-success {
            color: #c6ffd4;
        }

        .contact-form-enhanced .is-invalid {
            border-color: #ffc2c2;
            box-shadow: 0 0 0 3px rgba(255,194,194,.18);
        }
        .profile-image {
            min-height: 650px;


            background-position: center;
            background-size: cover;
        }

        .profile-content {
            display: flex;
            align-items: center;

            padding:
                clamp(40px, 20px, 10px)
                var(--gutter)
        }

        .profile-content-inner {
            max-width: 700px;
        }

        .profile-content h2 {
            margin: 0 0 12px;

            font-family: "Playfair Display", serif;
            font-size: clamp(40px, 2.5vw, 50px);
            font-weight: 400;
        }

        .profile-text {
            margin-top: 35px;

            color: var(--text);

            font-size: 16px;
            line-height: 1.9;
        }

        .profile-text p {
            margin: 0 0 10px;
			font-size: 16px;
        }

        .profile-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);

            margin-top: 25px;
        }

        .profile-stat {
            padding: 0 28px;

            border-right: 1px solid var(--line);
        }

        .profile-stat:first-child {
            padding-left: 0;
        }

        .profile-stat:last-child {
            padding-right: 0;
            border-right: 0;
        }

        .profile-stat strong {
            display: block;

            margin-bottom: 5px;

            color: var(--navy);

            font-size: 24px;
            font-weight: 600;
        }

        .profile-stat span {
            color: var(--muted);

            font-size: 15px;
            line-height: 1.5;
        }


        /* =====================================================
           CONTACTO
        ===================================================== */

        .contact {
            padding: 95px 0 35px;

            color: white;
            background: var(--navy);
        }

        .contact-header {
            margin-bottom: 60px;
        }

        .contact-header .eyebrow {
            color: rgba(255,255,255,.58);
        }

        .contact-header h2 {
            margin: 0 0 20px;

            font-family: "Playfair Display", serif;
            font-size: clamp(46px, 5vw, 70px);
            font-weight: 400;
        }

        .contact-header p {
            margin: 0;

            max-width: 550px;

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

            font-size: 19px;
            line-height: 1.8;
        }

        /*
        Las tres casillas tienen el mismo ancho.
        La dirección se adapta internamente al espacio.
        */

        .contact-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);

            border-top: 1px solid rgba(255,255,255,.18);
            border-bottom: 1px solid rgba(255,255,255,.18);
        }

        .contact-item {
            display: flex;
            align-items: flex-start;
            gap: 18px;

            min-height: 145px;
            padding: 32px;

            border-right: 1px solid rgba(255,255,255,.18);
        }

        .contact-item:first-child {
            padding-left: 0;
        }

        .contact-item:last-child {
            padding-right: 0;
            border-right: 0;
        }

        .contact-icon {
            flex: 0 0 30px;

            width: 30px;
            height: 30px;

            color: white;
        }

        .contact-label {
            display: block;

            margin-bottom: 4px;

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

            font-size: 11px;
            font-weight: 600;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        .contact-value {
            display: block;

            color: white;

            font-size: 17px;
            line-height: 1.7;
        }

        .contact-value a:hover {
            opacity: .7;
        }


        /* =====================================================
           REDES
        ===================================================== */

        .social-bar {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 35px;

            padding: 28px 0;

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

        .social-link {
            display: flex;
            align-items: center;
            gap: 10px;

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

            font-size: 13px;

            transition: opacity .2s ease;
        }

        .social-link:hover {
            opacity: .55;
        }

        .social-link i {
            width: 21px;
            height: 21px;
            font-size: 20px;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }


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

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;

            padding: 28px 0 0;

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

            font-size: 11px;
        }

        .footer-links {
            display: flex;
            gap: 20px;
        }


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

        .whatsapp {
            position: fixed;
            z-index: 50;

            right: 25px;
            bottom: 25px;

            display: flex;
            align-items: center;
            justify-content: center;

            width: 62px;
            height: 62px;

            border-radius: 50%;

            color: white;
            background: #25d366;

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

            transition:
                transform .25s ease,
                box-shadow .25s ease;
        }

        .whatsapp:hover {
            transform: translateY(-4px);

            box-shadow: 0 15px 40px rgba(0,0,0,.3);
        }

        .whatsapp i {
            font-size: 33px;
            line-height: 1;
            display: inline-flex;
        }

        .whatsapp i::before {
            font-size: inherit;
            line-height: 1;
        }

        .whatsapp-tooltip {
            position: absolute;
            right: calc(100% + 12px);
            top: 50%;
            transform: translateY(-50%) translateX(10px);

            padding: 8px 12px;
            border-radius: 6px;

            background: #111;
            color: #fff;

            font-size: 13px;
            white-space: nowrap;

            opacity: 0;
            visibility: hidden;
            pointer-events: none;

            transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
        }

        .whatsapp:hover .whatsapp-tooltip {
            opacity: 1;
            visibility: visible;
            transform: translateY(-50%) translateX(0);
        }


        /* =====================================================
           RESPONSIVE TABLET
        ===================================================== */

        @media (max-width: 1200px) {

            .contact-header-flex .right {
                flex: 0 0 48%;
            }

        }

        @media (max-width: 1024px) {

            .hero {
                min-height: 680px;
            }

            .hero-grid {
                min-height: 680px;
                grid-template-columns: 1fr 1fr;
            }

            .areas-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .area-card {
                min-height: 270px;

                padding: 30px;

                border-bottom: 1px solid var(--line);
            }

            .area-card:nth-child(2) {
                border-right: 0;
            }

            .area-card:nth-child(3) {
                padding-left: 0;
            }

            .method-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 50px 0;
            }

            .method-step:nth-child(2) {
                border-right: 0;
            }

            .method-step:nth-child(3) {
                padding-left: 0;
            }

            .profile {
                grid-template-columns: 1fr;
            }

            .profile-image {
                min-height: 550px;
            }

            .contact-item {
                padding: 30px 20px;
            }

        }


        /* =====================================================
           RESPONSIVE MOBILE
        ===================================================== */

        @media (max-width: 768px) {

            .site-header {
                position: absolute;
            }

            .header-inner {
                min-height: 85px;
            }

            .brand-name {
                font-size: 23px;
            }

            .brand-subtitle {
                font-size: 8px;
            }

            .menu-toggle {
                display: block;
            }

            .main-nav {
                position: absolute;

                top: 85px;
                left: 0;

                display: none;
                flex-direction: column;
                align-items: flex-start;

                width: 100%;

                padding: 30px var(--gutter);

                background: rgba(244,242,237,.98);

                box-shadow: 0 15px 30px rgba(0,0,0,.08);
            }

            .main-nav.open {
                display: flex;
            }
            section#inicio {
                height: auto !important;
            }
            .contact-header-flex .left {
                margin-bottom: 30px;
            }

            .contact-form-enhanced {
                width: 100%;
                margin-left: 0;
            }

            .contact-form-enhanced .form-row-inline {
                grid-template-columns: 1fr;
                gap: 0;
            }
            .contact-header-flex {
                display: block;
            }
            .animadita { display: none; }
            .hero {
                display: block;

                min-height: auto;

                background: var(--cream);
            }

            .hero-grid {
                display: block;
                min-height: auto;
            }

            .hero-content {
                padding-top: 145px;
                padding-bottom: 55px;
            }

            .hero h1 {
                font-size: clamp(48px, 13vw, 70px);
            }

            .hero-description {
                font-size: 15px;
            }

            .hero-image-mobile {
                display: block;
                position: relative;
                overflow: hidden;

                height: 550px;

                background:
                    linear-gradient(
                        rgba(13,27,45,.04),
                        rgba(13,27,45,.04)
                    ),
                    url("assets/images/cesar-hero.jpg");

                background-position: center;
                background-size: cover;
            }

            .hero-image-mobile::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);

                width: min(88vw, 440px);
                height: 100%;

                background-image: url("../images/cesaranima.png");
                background-repeat: no-repeat;
                background-position: center bottom;
                background-size: contain;
                pointer-events: none;
            }

            .practice-areas,
            .method,
            .contact {
                padding: 70px 0;
            }

            .areas-header {
                margin-bottom: 35px;
            }

            .areas-grid {
                grid-template-columns: 1fr;
            }

            .area-card,
            .area-card:first-child,
            .area-card:last-child,
            .area-card:nth-child(3) {
                min-height: auto;

                padding: 35px 0;

                border-right: 0;
                border-bottom: 1px solid var(--line);
            }

            .areas-summary {
                margin-top: 55px;
            }

            .areas-summary h3 {
                font-size: 21px;
            }

            .method-header {
                margin-bottom: 45px;
            }

            .method-grid {
                grid-template-columns: 1fr;
                gap: 0;
            }

            .method-step,
            .method-step:first-child,
            .method-step:last-child,
            .method-step:nth-child(3) {
                min-height: auto;

                padding: 30px 0;

                border-right: 0;
                border-bottom: 1px solid var(--line);
            }

            .method-step:last-child {
                border-bottom: 0;
            }

            .profile-image {
                min-height: 420px;
            }

            .profile-content {
                padding:
                    65px
                    var(--gutter);
            }

            .profile-stats {
                grid-template-columns: 1fr;
                gap: 0;
            }

            .profile-stat,
            .profile-stat:first-child,
            .profile-stat:last-child {
                padding: 20px 0;

                border-right: 0;
                border-bottom: 1px solid var(--line);
            }

            .profile-stat:last-child {
                border-bottom: 0;
            }

            .contact-header {
                margin-bottom: 45px;
            }

            .contact-grid {
                grid-template-columns: 1fr;
            }

            .contact-item,
            .contact-item:first-child,
            .contact-item:last-child {
                min-height: auto;

                padding: 28px 0;

                border-right: 0;
                border-bottom: 1px solid rgba(255,255,255,.18);
            }

            .contact-item:last-child {
                border-bottom: 0;
            }

            .social-bar {
                justify-content: flex-start;
            }

            .footer-bottom {
                flex-direction: column;
                align-items: flex-start;
                gap: 18px;
            }

            .whatsapp {
                width: 56px;
                height: 56px;

                right: 18px;
                bottom: 18px;
            }

            .whatsapp-tooltip {
                display: none;
            }

        }