/*
Theme Name: Legardí (hijo de md)
Template: md
Description: Tema hijo de md para Legardí.
Version: 1.6.0
Text Domain: md-legardi
*/

/* ===== Fuente ===== */
:root {
    --font-primary: "DM Sans", sans-serif;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

/* ===== Encabezado ===== */
body::before {
    content: "";
    display: block;
    height: 50px;
    background-color: #25443d;
}

.MD-nav {
    background-color: #ffffff;
}

.MD-nav-logo img {
    height: 70px;
}

@media (max-width: 980px) {
    .MD-nav-logo img {
        height: 56px;
    }
}

@media (max-width: 640px) {
    .MD-nav-logo img {
        height: 46px;
    }
}

/* Logo del menú siempre visible: */
/* .MD-nav .MD-nav-logo { opacity: 1; transform: none; pointer-events: auto; } */

/* ===== Home ===== */
.MD-main {
    background-color: #25443d;
}

.MD-main-frases,
.MD-main-frases-txt {
    color: #d9d9d9;
}

.MD-main-frases-txt.is-active::after {
    color: #ffffff;
}

/* Isotipo detrás de las frases */
.MD-main-hero-image {
    display: none;
}

/* ===== Nuestra Firma ===== */
.MD-firma-media {
    display: none;
}

.MD-firma-part-1-content,
.MD-firma-part-2-content,
.MD-firma-part-3-content {
    width: 100%;
}

/* ===== Áreas de práctica ===== */
.MD-areas {
    background-color: #25443d;
}

/* ===== Equipo y Aliados ===== */
.MD-equipo-card-media img,
.MD-aliados-card img {
    filter: none;
}

/* Tarjetas de Aliados */
.MD-aliados-card,
.MD-aliados-detail-card,
.MD-aliados-detail-content {
    border-radius: 20px;
}

.MD-aliados-card img,
.MD-aliados-detail-card img {
    border-radius: 12px;
}

.MD-aliados-card {
    height: auto;
}

@media (min-width: 981px) {
    .MD-aliados-card {
        min-height: 340px;
    }
}

/* ===== Contacto ===== */
.MD-contacto-content {
    width: min(90vw, 100%);
}

.MD-contacto-form {
    min-width: 0;
}

.MD-contacto-form :is(input, textarea, select) {
    max-width: 100%;
}

/* ===== Tamaño de letra ===== */
:root {
    --size-xs: 16px;
    --size-base: 18px;
    --size-h1: 52px;
    --size-h2: 36px;
    --size-h3: 28px;
    --size-h4: 22px;
}

@media (max-width: 980px) {
    :root {
        --size-xs: 15px;
        --size-base: 17px;
        --size-h1: clamp(32px, 4.9vw, 48px);
        --size-h2: clamp(26px, 3.4vw, 34px);
        --size-h3: clamp(21px, 2.6vw, 26px);
        --size-h4: clamp(19px, 2.2vw, 21px);
    }
}

@media (max-width: 640px) {
    :root {
        --size-xs: 15px;
        --size-base: 17px;
    }
}

p {
    line-height: 1.6;
}

.MD-areas-card-label { font-size: 16px; }
.MD-equipo-card-name { font-size: 20px; }
.MD-equipo-card-role { font-size: 17px; }
.MD-equipo-card-mail { font-size: 15px; }
.MD-equipo-modal-mail { font-size: 16px; }
.MD-aliados-card-name { font-size: 18px; }
.MD-aliados-card-role { font-size: 16px; }
.MD-aliados-card-tag { font-size: 14px; }
.MD-aliados-detail-name { font-size: 19px; }
.MD-aliados-detail-role { font-size: 17px; }
.MD-aliados-detail-tag { font-size: 14px; }
.MD-contacto-message { font-size: 17px; }
.MD-contacto-field textarea { font-size: 17px; }
.MD-contacto-copy { font-size: 14px; }

/* ===== Perfil de miembro del equipo ===== */
.MD-equipo-card {
    display: block;
    text-decoration: none;
}

.MD-miembro-hero {
    background-color: #25443d;
    color: #ffffff;
}

.MD-miembro-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 40px;
    display: flex;
    align-items: center;
    gap: 56px;
}

.MD-miembro-hero-text {
    flex: 1 1 0;
    min-width: 0;
}

.MD-miembro-back {
    display: inline-block;
    margin-bottom: 32px;
    color: #d9d9d9;
    font-size: var(--size-xs);
    text-decoration: none;
}

.MD-miembro-back:hover {
    color: #ffffff;
    text-decoration: underline;
}

.MD-miembro-role {
    margin: 0 0 8px;
    color: #d9d9d9;
    font-size: var(--size-h4);
    font-weight: var(--medium);
}

.MD-miembro-name {
    margin: 0 0 32px;
    color: #ffffff;
    line-height: 1.1;
}

.MD-miembro-contact {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 40px;
}

.MD-miembro-contact li {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.MD-miembro-contact-label {
    color: #d9d9d9;
    font-size: var(--size-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.MD-miembro-contact a {
    color: #ffffff;
    text-decoration: none;
}

.MD-miembro-contact a:hover {
    text-decoration: underline;
}

.MD-miembro-hero-media {
    flex: 0 0 auto;
    width: min(36vw, 420px);
    aspect-ratio: 3 / 4;
    border-radius: 20px;
    overflow: hidden;
}

.MD-miembro-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.MD-miembro-perfil {
    max-width: 900px;
    margin: 0 auto;
    padding: 64px 40px;
}

.MD-miembro-section-title {
    margin: 0 0 24px;
    color: var(--color-primary);
}

.MD-miembro-bio p {
    margin: 0 0 1em;
}

.MD-miembro-bio p:last-child {
    margin-bottom: 0;
}

.MD-miembro-otros {
    max-width: 1440px;
    margin: 0 auto;
    padding: 64px 40px 84px;
    background: #f3f3f3;
}

.MD-miembro-otros .MD-miembro-section-title {
    text-align: center;
}

@media (max-width: 980px) {
    .MD-miembro-hero-inner {
        flex-direction: column-reverse;
        align-items: flex-start;
        padding: 40px 16px;
        gap: 28px;
    }

    .MD-miembro-hero-media {
        width: min(80vw, 360px);
        align-self: center;
    }

    .MD-miembro-back {
        margin-bottom: 20px;
    }

    .MD-miembro-perfil,
    .MD-miembro-otros {
        padding: 40px 16px;
    }
}

/* ===== Menú: Mesa de Negocios ===== */
@media (max-width: 980px) {
    .MD-nav.menu-open .MD-nav-list {
        max-height: calc(100vh - 110px);
        overflow-y: auto;
    }
}

/* ===== Menú: desplegable de Áreas ===== */
.MDL-nav-sub {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
}

.MDL-nav-sub-toggle {
    border: 0;
    padding: 4px;
    background: transparent;
    color: var(--color-primary);
    display: inline-flex;
    cursor: pointer;
}

.MDL-nav-sub-toggle svg {
    transition: rotate 0.25s ease;
}

.MDL-nav-sub.is-open .MDL-nav-sub-toggle svg {
    rotate: 180deg;
}

.MDL-nav-sub-list {
    list-style: none;
    margin: 0;
}

.MDL-nav-sub-all a {
    font-weight: var(--bold);
}

@media (min-width: 981px) {
    .MDL-nav-sub-list {
        position: absolute;
        top: 100%;
        left: -16px;
        z-index: 30;
        min-width: 280px;
        margin-top: 12px;
        padding: 10px 0;
        border-radius: 14px;
        background: #ffffff;
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.14);
        opacity: 0;
        visibility: hidden;
        translate: 0 8px;
        transition: opacity 0.25s ease, translate 0.25s ease, visibility 0s linear 0.25s;
    }

    /* Evita que se cierre al mover el mouse hacia la lista */
    .MDL-nav-sub-list::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -14px;
        height: 14px;
    }

    .MDL-nav-sub:hover .MDL-nav-sub-list,
    .MDL-nav-sub:focus-within .MDL-nav-sub-list,
    .MDL-nav-sub.is-open .MDL-nav-sub-list {
        opacity: 1;
        visibility: visible;
        translate: 0 0;
        transition: opacity 0.25s ease, translate 0.25s ease;
    }

    .MDL-nav-sub:hover .MDL-nav-sub-toggle svg {
        rotate: 180deg;
    }

    .MDL-nav-sub-list a {
        display: block;
        padding: 9px 20px;
        white-space: nowrap;
    }

    .MDL-nav-sub-list a:hover {
        color: var(--color-primary);
        background: rgba(37, 68, 61, 0.08);
    }

    .MDL-nav-sub-all {
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px solid rgba(37, 68, 61, 0.12);
    }
}

@media (max-width: 980px) {
    .MDL-nav-sub {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .MDL-nav-sub-toggle {
        padding: 10px;
    }

    .MDL-nav-sub-list {
        grid-column: 1 / -1;
        max-height: 0;
        padding: 0 0 0 16px;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .MDL-nav-sub.is-open .MDL-nav-sub-list {
        max-height: 640px;
    }

    .MD-nav-list-item .MDL-nav-sub-list a {
        padding: 8px 2px;
        font-size: calc(var(--size-base) * 0.92);
    }
}

/* Compensa el menú fijo */
[id^="area-"] {
    scroll-margin-top: var(--mdl-nav-h, 80px);
}

/* ===== Mesa de Negocios ===== */
.MDL-mesa {
    position: relative;
    isolation: isolate;
    clip-path: inset(0);
    color: #ffffff;
    background-color: #1a1a1a;
}

/* Fondo fijo */
.MDL-mesa-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: #1a1a1a;
    background-position: center;
    background-size: cover;
}

.MDL-mesa-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.MDL-mesa-hero {
    max-width: 1200px;
    min-height: 420px;
    margin: 0 auto;
    padding: 80px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 64px;
}

.MDL-mesa-hero-logo {
    width: min(32vw, 320px);
    height: auto;
}

.MDL-mesa-hero-title {
    margin: 0;
    color: #ffffff;
    font-weight: var(--regular, 400);
    line-height: 1.1;
}

.MDL-mesa-intro {
    background-color: #ffffff;
    color: #333333;
}

/* Ancho de las secciones del Home */
.MDL-mesa-intro-content {
    max-width: 1440px;
    margin: 0 auto;
    padding: 72px var(--spacing-lg);
}

.MDL-mesa-intro-content p {
    margin: 0 0 1.2em;
    color: #666666;
}

.MDL-mesa-intro-content > p:first-child {
    margin-bottom: 1.6em;
    color: #1a1a1a;
    font-size: var(--size-h4);
    line-height: 1.5;
}

.MDL-mesa-intro-content > :last-child {
    margin-bottom: 0;
}

.MDL-mesa-members {
    max-width: 1000px;
    margin: 0 auto;
    padding: 80px 40px;
}

.MDL-mesa-section-title {
    margin: 0 0 48px;
    color: #ffffff;
    font-weight: var(--regular, 400);
    text-align: center;
}

.MDL-mesa-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 64px;
}

.MDL-mesa-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
}

.MDL-mesa-card-media {
    display: block;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 5 / 4;
    margin-bottom: 20px;
    border-radius: 20px;
    overflow: hidden;
    background-color: #f2f2f2;
}

.MDL-mesa-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.4s ease;
}

.MDL-mesa-card:hover .MDL-mesa-card-media img {
    transform: scale(1.04);
}

.MDL-mesa-card-role,
.MDL-mesa-card-name {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.MDL-mesa-card:hover .MDL-mesa-card-name {
    text-decoration: underline;
}

/* Formularios */
.MDL-mesa-forms {
    max-width: 840px;
    margin: 0 auto;
    padding: 40px 40px 96px;
}

.MDL-mesa-forms-card {
    padding: 56px 48px;
    border-radius: 24px;
    background-color: #f0f0f0;
    color: #1a1a1a;
}

.MDL-mesa-form + .MDL-mesa-form {
    margin-top: 48px;
    padding-top: 48px;
    border-top: 1px solid #d0d0d0;
}

.MDL-mesa-form-title {
    margin: 0 0 32px;
    color: #1a1a1a;
    font-weight: var(--regular, 400);
    text-align: center;
}

.MDL-mesa-form-pitch {
    display: block;
    width: 100%;
    min-height: 180px;
    margin-bottom: 16px;
    padding: 20px 24px;
    border: 0;
    border-radius: 12px;
    background-color: #1b312c;
    color: #ffffff;
    font-size: var(--size-h4);
    resize: vertical;
}

.MDL-mesa-form-pitch::placeholder {
    color: #e6e6e6;
}

.MDL-mesa-form-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.MDL-mesa-form-fields input {
    width: 100%;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    background-color: #dddddd;
    color: #1a1a1a;
}

.MDL-mesa-form-pitch:focus-visible,
.MDL-mesa-form-fields input:focus-visible {
    outline: 2px solid #25443d;
    outline-offset: 2px;
}

.MDL-mesa-form-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.MDL-mesa-form-note {
    margin: 12px 0 0;
    color: #777777;
    font-size: var(--size-xs);
}

.MDL-mesa-form-submit {
    display: block;
    margin: 24px auto 0;
    padding: 10px 36px;
    border: 0;
    border-radius: 999px;
    background-color: #25443d;
    color: #ffffff;
    cursor: pointer;
}

.MDL-mesa-form-submit:hover {
    background-color: #1b312c;
}

.MDL-mesa-form-message {
    margin-bottom: 20px;
    padding: 12px 18px;
    border-radius: 12px;
}

.MDL-mesa-form-message.is-success {
    background-color: #dbe9e2;
    color: #1b312c;
}

.MDL-mesa-form-message.is-error {
    background-color: #f6dede;
    color: #7a1f1f;
}

/* ===== Perfil de miembro de la Mesa ===== */
.MDL-mesa-miembro {
    min-height: 100vh;
}

.MDL-mesa-miembro-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 56px 40px 96px;
    text-align: center;
}

.MDL-mesa-back {
    display: inline-block;
    margin-bottom: 32px;
    color: #d9d9d9;
    font-size: var(--size-xs);
    text-decoration: none;
}

.MDL-mesa-back:hover {
    color: #ffffff;
    text-decoration: underline;
}

.MDL-mesa-miembro-media {
    width: min(80vw, 420px);
    aspect-ratio: 5 / 4;
    margin: 0 auto 32px;
    border-radius: 20px;
    overflow: hidden;
    background-color: #f2f2f2;
}

.MDL-mesa-miembro-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.MDL-mesa-miembro-role {
    margin: 0 0 8px;
    color: #d9d9d9;
    text-transform: uppercase;
}

.MDL-mesa-miembro-name {
    margin: 0 0 32px;
    color: #ffffff;
    font-weight: var(--regular, 400);
    text-transform: uppercase;
}

.MDL-mesa-miembro-bio {
    text-align: justify;
}

.MDL-mesa-miembro-bio p {
    margin: 0 0 1em;
}

.MDL-mesa-miembro-bio p:last-child {
    margin-bottom: 0;
}

@media (max-width: 980px) {
    .MDL-mesa-hero {
        min-height: 0;
        flex-direction: column;
        gap: 28px;
        padding: 56px 16px;
        text-align: center;
    }

    .MDL-mesa-hero-logo {
        width: min(60vw, 240px);
    }

    .MDL-mesa-intro-content,
    .MDL-mesa-members {
        padding: 48px 16px;
    }

    .MDL-mesa-forms {
        padding: 24px 16px 64px;
    }

    .MDL-mesa-forms-card {
        padding: 36px 20px;
    }

    .MDL-mesa-miembro-inner {
        padding: 40px 16px 64px;
    }

    .MDL-mesa-miembro-bio {
        text-align: left;
    }
}

@media (max-width: 640px) {
    .MDL-mesa-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }
}

/* ===== Animaciones ===== */
html.mdl-anim {
    scroll-behavior: smooth;
}

section[id] {
    scroll-margin-top: var(--mdl-nav-h, 80px);
}

/* Aparición al hacer scroll (mismos selectores que js/animaciones.js) */
.mdl-anim :is(.MD-firma-title, .MD-firma-part-1-content, .MD-firma-part-2-content, .MD-firma-part-3-content,
.MD-clientes-title, .MD-clientes-carousel, .MD-areas-title, .MD-areas-subtitle, .MD-areas-card,
.MD-equipos-title, .MD-equipos-subtitle, .MD-equipo-card, .MD-aliados-intro, .MD-aliados-card,
.MD-contacto-title, .MD-contacto-card, .MD-contacto-form):not(.is-revealed) {
    opacity: 0;
}

.mdl-anim .is-revealed {
    animation: mdl-reveal 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--mdl-delay, 0ms) backwards;
}

@keyframes mdl-reveal {
    from {
        opacity: 0;
        translate: 0 36px;
    }
}

/* Equipo: hover */
.MD-equipo-card-media {
    position: relative;
}

.MDL-equipo-card-cta {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    padding-bottom: 24px;
    background: linear-gradient(to top, rgba(37, 68, 61, 0.88) 0%, rgba(37, 68, 61, 0.2) 60%, rgba(37, 68, 61, 0) 100%);
    color: #ffffff;
    font-weight: var(--bold);
    opacity: 0;
    translate: 0 12px;
    transition: opacity 0.35s ease, translate 0.35s ease;
}

.MDL-equipo-card-cta span {
    transition: translate 0.35s ease;
}

.MD-equipo-card:hover .MDL-equipo-card-cta,
.MD-equipo-card:focus-visible .MDL-equipo-card-cta {
    opacity: 1;
    translate: 0 0;
}

.MD-equipo-card:hover .MDL-equipo-card-cta span {
    translate: 4px 0;
}

@media (hover: none) {
    .MDL-equipo-card-cta {
        display: none;
    }
}

/* Aliados: detalle */
.MD-aliados-panel.mdl-allies {
    position: relative;
}

.mdl-allies.is-open .MD-aliados-carousel {
    pointer-events: none;
}

.mdl-allies .MD-aliados-detail {
    position: absolute;
    inset: 0;
    z-index: 2;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
}

.mdl-allies .MD-aliados-detail-card {
    flex: 0 0 auto;
    max-width: none;
    padding: 12px;
    display: flex;
    flex-direction: column;
}

.mdl-allies .MD-aliados-detail-card img {
    height: 220px;
    flex: 0 0 220px;
    aspect-ratio: auto;
    object-position: center 10%;
}

.mdl-allies .MD-aliados-detail-name {
    margin-top: 8px;
}

.mdl-allies .MD-aliados-detail-content {
    align-self: stretch;
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.mdl-allies .MD-aliados-detail-text {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 48px;
    scrollbar-width: thin;
    scrollbar-color: rgba(37, 68, 61, 0.4) transparent;
}

/* Aliados: controles */
.mdl-allies .MD-aliados-control {
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mdl-allies .MD-aliados-control:focus-visible {
    outline: 2px solid #25443d;
    outline-offset: 2px;
}

.mdl-allies .MD-aliados-control.is-prev,
.mdl-allies .MD-aliados-control.is-next,
.mdl-allies .MD-aliados-control.is-close {
    width: 40px;
    height: 40px;
    padding: 9px;
    border: 1px solid #25443d;
    border-radius: 50%;
    background-color: transparent;
    color: #25443d;
}

.mdl-allies .MD-aliados-control svg {
    display: block;
    width: 100%;
    height: 100%;
}

.mdl-allies .MD-aliados-control:hover {
    background-color: #25443d;
    color: #ffffff;
}

.mdl-allies .MD-aliados-control.is-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
}

.mdl-allies .MD-aliados-controls {
    flex: 0 0 auto;
    padding-top: 12px;
}

@media (max-width: 980px) {
    .mdl-allies .MD-aliados-detail-card img {
        height: 350px;
        flex-basis: 350px;
        object-position: center top;
    }
}

/* Aliados: detalle en celular */
@media (max-width: 640px) {
    .mdl-allies .MD-aliados-detail {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .mdl-allies .MD-aliados-detail-card {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        column-gap: 12px;
        align-items: center;
        padding: 10px;
    }

    .mdl-allies .MD-aliados-detail-card img {
        grid-row: 1 / span 3;
        width: 72px;
        height: 72px;
    }

    .mdl-allies .MD-aliados-detail-name {
        margin-top: 0;
    }
}