/*
Theme Name: SMC Theme
Theme URI: https://smc.propuesta.info
Description: Tema hijo de Hello Elementor para SMC Import - Export. Estilos propios y formularios.
Author: Inceptum
Author URI: https://www.inceptum.com
Template: hello-elementor
Version: 1.25.0
Text Domain: smc-theme
*/

/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root {
    --smc-negro: #2E3530;
    --smc-marron: #3F2B27;
    --smc-amarillo: #FCD363;
    --smc-crema: #FFF6DF;
    --smc-gris-claro: #F6F6F6;
    --smc-gris-oscuro: #848484;
    --smc-borde: #E1E1E1;
    --smc-radio: 24px;
    --smc-gap: 20px;
    --smc-ancho: 1140px;   /* ancho maximo del contenido (header + footer) */
    --smc-margen: 40px;    /* margen de seguridad lateral */
}

/* El margen lateral se reduce en pantallas pequenas */
@media (max-width: 1024px) { :root { --smc-margen: 24px; } }
@media (max-width: 767px)  { :root { --smc-margen: 20px; } }

/* El header es sticky: al saltar a un ancla (#servicios) hay que dejarle sitio */
html { scroll-padding-top: 84px; }

/* ==========================================================================
   2. PROTECCIONES SUAVES
   ========================================================================== */
img, svg, video, canvas { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6, p, li, a, span {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ==========================================================================
   3. FORMULARIO DE ALTA DE CLIENTE
   Referencia de partida: espiral.local/alta-cliente (clases col2/col3)
   ========================================================================== */

/* --- Bloques (fieldset) --- */
.wpcf7-form fieldset {
    border: 2px solid var(--smc-marron);
    border-radius: var(--smc-radio);
    padding: 40px 32px 32px;
    position: relative;
    margin-bottom: 40px;
}

.wpcf7-form fieldset h4 {
    background: #fff;
    padding: 0 14px;
    margin: 0;
    position: absolute;
    top: -13px;
    left: 26px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 600;
    color: var(--smc-marron);
    line-height: 1.6;
}

.wpcf7-form fieldset h4 span {
    font-size: 0.62em;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.wpcf7-form fieldset > p { margin-bottom: 0; }

/* --- Rejillas de columnas ---
   Elementor YA define .col3/.col2 como grid con !important (3 y 2 columnas).
   El problema: CF7 envuelve los labels en un <p>, y ese <p> es el unico hijo
   del grid -> ocupa 1/3. Con display:contents el <p> desaparece del layout y
   los labels pasan a ser los items del grid. */

.wpcf7-form .col3 > p,
.wpcf7-form .col2 > p,
.wpcf7-form .col2.dif > p {
    display: contents;
}

/* Separacion entre filas de columnas, y celda a ancho completo en el movil */
.wpcf7-form .col3 + .col2,
.wpcf7-form .col2 + .col3,
.wpcf7-form .col3 + .col3,
.wpcf7-form .col2 + .col2 { margin-top: var(--smc-gap); }

/* Separación vertical entre filas */
.wpcf7-form fieldset .col3,
.wpcf7-form fieldset .col2 { margin-bottom: 18px; }
.wpcf7-form fieldset .col3:last-child,
.wpcf7-form fieldset .col2:last-child { margin-bottom: 0; }

/* --- Etiquetas --- */
.wpcf7-form label {
    display: block;
    color: var(--smc-marron);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
}

.wpcf7-form label span.small {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--smc-gris-oscuro);
    margin-top: 2px;
}

/* --- Envoltorios de CF7: deben ocupar todo el ancho --- */
.wpcf7-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    position: relative;
}

/* --- Campos --- */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    margin-top: 6px;
    border: 1px solid var(--smc-borde);
    border-radius: 10px;
    background: #fff;
    font-size: 15px;
    line-height: 1.4;
    color: var(--smc-negro);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: #A9A9A9;
    opacity: 1;
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    outline: none;
    border-color: var(--smc-amarillo);
    box-shadow: 0 0 0 3px rgba(252, 211, 99, .40);
}

/* --- Campo de archivo --- */
.wpcf7-form input[type="file"] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    border: 2px solid var(--smc-marron);
    border-radius: 10px;
    padding: 9px;
    font-size: 14px;
    background: #fff;
}

/* --- Botón de envío --- */
.wpcf7-form button.wpcf7-submit,
.wpcf7-form input.wpcf7-submit {
    display: block;
    margin: 28px auto 0;
    padding: 15px 46px;
    background: var(--smc-amarillo);
    color: var(--smc-marron);
    border: 2px solid var(--smc-marron);
    border-radius: 60px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .3px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .1s ease;
}

.wpcf7-form button.wpcf7-submit:hover,
.wpcf7-form input.wpcf7-submit:hover {
    background: var(--smc-marron);
    color: #fff;
}

.wpcf7-form button.wpcf7-submit:active { transform: scale(.98); }

/* --- Casilla de aceptación --- */
.wpcf7-form .wpcf7-acceptance { display: block; }
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }

.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 22px;
    height: 22px;
    margin: 0;
}

.wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label {
    position: relative;
    display: inline-block;
    padding-left: 34px;
    line-height: 22px;
    cursor: pointer;
    font-size: 15px;
    color: var(--smc-negro);
}

.wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    border: 2px solid var(--smc-marron);
    border-radius: 5px;
    background: #fff;
    transition: background .15s ease;
}

.wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label::after {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    opacity: 0;
    transition: opacity .15s ease;
}

.wpcf7-form .wpcf7-acceptance input:checked + .wpcf7-list-item-label::before {
    background: var(--smc-marron);
}
.wpcf7-form .wpcf7-acceptance input:checked + .wpcf7-list-item-label::after {
    opacity: 1;
}

/* --- Textos de politicas y clausulas --- */
.wpcf7-form .politicas { margin-top: 20px; }
.wpcf7-form .politicas p {
    font-size: 12px;
    line-height: 1.55;
    color: var(--smc-gris-oscuro);
}

/* ==========================================================================
   4. SELECTOR DE IDIOMAS CON BANDERAS
   Elementor pone el heading como grid en movil y el span con ancho propio.
   Se fuerzan con selectores de alta especificidad (clases repetidas).
   ========================================================================== */

.e-n-tabs .e-n-tabs-heading.e-n-tabs-heading.e-n-tabs-heading.e-n-tabs-heading {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, 46px) !important;
    grid-auto-flow: row !important;
    justify-content: center !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 40px !important;
}

.e-n-tabs-heading.e-n-tabs-heading .e-n-tab-title.e-n-tab-title {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    flex: 0 0 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 50% !important;
}

.e-n-tabs-heading.e-n-tabs-heading .e-n-tab-title .e-n-tab-title-text.e-n-tab-title-text {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    border: 2px solid transparent !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    transition: transform .2s ease, border-color .2s ease;
}

.e-n-tabs-heading.e-n-tabs-heading .e-n-tab-title:hover .e-n-tab-title-text { transform: scale(1.08); }
.e-n-tabs-heading.e-n-tabs-heading .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text {
    border-color: var(--smc-marron) !important;
    transform: scale(1.10);
}

/* Cada bandera por orden de pestana */
.e-n-tabs-heading.e-n-tabs-heading .e-n-tab-title:nth-child(1) .e-n-tab-title-text { background-image: url(assets/banderas/bandera-espanha.svg) !important; }
.e-n-tabs-heading.e-n-tabs-heading .e-n-tab-title:nth-child(2) .e-n-tab-title-text { background-image: url(assets/banderas/Flag_of_the_United_Kingdom.png) !important; }
.e-n-tabs-heading.e-n-tabs-heading .e-n-tab-title:nth-child(3) .e-n-tab-title-text { background-image: url(assets/banderas/Flag_of_Germany.svg) !important; }
.e-n-tabs-heading.e-n-tabs-heading .e-n-tab-title:nth-child(4) .e-n-tab-title-text { background-image: url(assets/banderas/Flag_of_France.png) !important; }
.e-n-tabs-heading.e-n-tabs-heading .e-n-tab-title:nth-child(5) .e-n-tab-title-text { background-image: url(assets/banderas/Flag_of_Italy.png) !important; }
.e-n-tabs-heading.e-n-tabs-heading .e-n-tab-title:nth-child(6) .e-n-tab-title-text { background-image: url(assets/banderas/Flag_of_the_Netherlands.png) !important; }
.e-n-tabs-heading.e-n-tabs-heading .e-n-tab-title:nth-child(7) .e-n-tab-title-text { background-image: url(assets/banderas/Flag_of_Portugal.png) !important; }

@media (max-width: 767px) {
    .e-n-tabs-heading.e-n-tabs-heading.e-n-tabs-heading {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, 40px) !important;
    }
    .e-n-tabs-heading.e-n-tabs-heading .e-n-tab-title.e-n-tab-title {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        flex: 0 0 40px !important;
        height: 40px !important;
        min-height: 40px !important;
    }
}

/* ==========================================================================
   5. RESPONSIVE
   ========================================================================== */

/* --- TABLET --- */
@media (max-width: 1024px) {
    /* El Kit de Elementor (854) baja el texto base a 13px en tablet y movil
       (16px en escritorio). No es intencionado y se lee mal: se devuelve a 16px
       pisando la variable del kit, no elemento a elemento. */
    html:root .elementor-kit-854 { --e-global-typography-text-font-size: 16px !important; }

    .wpcf7-form fieldset { padding: 34px 24px 26px; }
    .wpcf7-form .col3 > p { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wpcf7-form .col2.dif > p { grid-template-columns: 1.6fr 1fr; }
}

/* --- TABLET: las 4 tarjetas de la home ---
   A 768px el contenedor las dejaba en 4 columnas de 169px y partia las palabras
   ("Transparenci/a", "24-48/h"). En movil Elementor ya las apila: aqui solo tablet. */
@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-element-5ef9629f > .e-con-inner { flex-wrap: wrap !important; }
    .elementor-element-5ef9629f > .e-con-inner > .e-con { flex: 0 0 calc(50% - 12px) !important; }
}

/* --- MOVIL --- */
@media (max-width: 767px) {
    .wpcf7-form fieldset {
        padding: 30px 18px 22px;
        border-radius: 16px;
        margin-bottom: 30px;
    }

    .wpcf7-form fieldset h4 {
        left: 14px;
        font-size: 12px;
        letter-spacing: 1.5px;
        padding: 0 10px;
        top: -10px;
    }

    .wpcf7-form fieldset h4 span { display: block; }

    /* Todo a una columna */
    .wpcf7-form .col3 > p,
    .wpcf7-form .col2 > p,
    .wpcf7-form .col2.dif > p {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .wpcf7-form fieldset .col3,
    .wpcf7-form fieldset .col2 { margin-bottom: 14px; }

    /* 16px evita el zoom automatico en iOS */
    .wpcf7-form input[type="text"],
    .wpcf7-form input[type="email"],
    .wpcf7-form input[type="tel"],
    .wpcf7-form input[type="url"],
    .wpcf7-form input[type="number"],
    .wpcf7-form select,
    .wpcf7-form textarea { font-size: 16px; }

    .wpcf7-form button.wpcf7-submit,
    .wpcf7-form input.wpcf7-submit {
        width: 100%;
        padding: 15px 20px;
    }

    .e-n-tabs-heading { gap: 8px; }
    .e-n-tabs-heading .e-n-tab-title .e-n-tab-title-text { width: 36px; height: 36px; }
}

/* ==========================================================================
   6. CORRECCIONES DE LAYOUT EN MOVIL
   Contenedores de Elementor con margenes laterales grandes que desbordan.
   ========================================================================== */
@media (max-width: 767px) {
    .elementor-element-0c45a0c {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   7. BANNER DE COOKIES (Complianz) — estilos propios de SMC
   El CSS del plugin se carga despues, asi que se sube la especificidad
   con html:root para que estas variables ganen.
   ========================================================================== */
html:root {
    --cmplz_banner_background_color: #ffffff;
    --cmplz_banner_border_color: #F0E6D2;
    --cmplz_banner_border_radius: 20px;
    --cmplz_banner_width: 540px;
    --cmplz_text_color: #3F2B27;
    --cmplz_hyperlink_color: #3F2B27;

    /* Boton Aceptar: amarillo SMC con borde marron */
    --cmplz_button_accept_background_color: #FCD363;
    --cmplz_button_accept_border_color: #3F2B27;
    --cmplz_button_accept_text_color: #3F2B27;

    /* Boton Denegar: blanco con borde suave */
    --cmplz_button_deny_background_color: #ffffff;
    --cmplz_button_deny_border_color: #E1E1E1;
    --cmplz_button_deny_text_color: #3F2B27;

    /* Boton preferencias */
    --cmplz_button_settings_background_color: #ffffff;
    --cmplz_button_settings_border_color: #E1E1E1;
    --cmplz_button_settings_text_color: #3F2B27;

    --cmplz_button_border_radius: 50px;
    --cmplz_button_font_size: 15px;
    --cmplz_title_font_size: 17px;
    --cmplz_text_font_size: 13px;
    --cmplz_link_font_size: 13px;

    --cmplz_slider_active_color: #FCD363;
    --cmplz_slider_inactive_color: #D9D9D9;
    --cmplz_category_header_always_active_color: #3F2B27;
}

/* Titulo y textos */
.cmplz-cookiebanner .cmplz-title { font-weight: 600; }
.cmplz-cookiebanner .cmplz-message { line-height: 1.55; }

/* Botones: borde como en el resto del sitio */
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    border-width: 2px !important;
    font-weight: 600 !important;
    letter-spacing: .2px;
    transition: background-color .2s ease, color .2s ease;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
    background-color: #3F2B27 !important;
    color: #ffffff !important;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover {
    background-color: #F6F6F6 !important;
}

/* Enlaces a las politicas */
.cmplz-cookiebanner .cmplz-links .cmplz-link {
    text-decoration: none !important;
    font-weight: 500;
    border-bottom: 1px solid currentColor;
}
.cmplz-cookiebanner .cmplz-links .cmplz-link:hover { opacity: .75; }

/* Sombra mas suave */
.cmplz-cookiebanner { box-shadow: rgba(0, 0, 0, .10) 0 12px 32px !important; }

/* En movil: ancho completo y botones apilados */
@media (max-width: 768px) {
    .cmplz-cookiebanner { border-radius: 20px 20px 0 0 !important; }
    .cmplz-cookiebanner .cmplz-buttons { flex-direction: column; }
}

/* ==========================================================================
   8. HEADER — barra blanca estilo Apple
   Referencia de estructura: espiral.local (barra blanca + logo + menu)
   ========================================================================== */

/* La barra: fondo blanco propio, borde inferior sutil */
.elementor-location-header {
    background: #ffffff;
    border-bottom: 1px solid #F0EDE8;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
    position: sticky;       /* la barra acompana al scroll */
    top: 0;
    z-index: 999;
    transition: box-shadow .25s ease;
}

/* Contenedor: alto comodo y aire a los lados */
.elementor-location-header .elementor-element-757dfd0b {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    transition: padding .25s ease;
}

/* --- GRID: el contenido nunca toca los bordes --- */
.elementor-location-header .e-con-inner {
    max-width: var(--smc-ancho);
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--smc-margen) !important;
    padding-right: var(--smc-margen) !important;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
}

/* El logo vive en una tarjeta blanca que cuelga, igual que en espiral.local */
.elementor-location-header .elementor-element-1c30c55e {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    align-self: flex-start !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff;
    border-radius: 0 0 22px 22px;
    box-shadow: 0 12px 26px rgba(63, 43, 39, .10);
    padding: 14px 32px 0;
    height: 120px;
    margin-top: -12px;      /* toca el borde superior de la barra */
    margin-bottom: -34px;   /* asoma por debajo de la barra */
    position: relative;
    z-index: 5;
    transition: height .25s ease, padding .25s ease, margin .25s ease,
                border-radius .25s ease, box-shadow .25s ease;
}
/* El menu ocupa el resto y se pega al borde derecho del grid */
.elementor-location-header .elementor-element-7e724649 {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

/* Logo */
.elementor-location-header .elementor-widget-image img {
    max-height: 72px;
    transition: max-height .25s ease;
    width: auto;
    display: block;
    margin: 0 auto;
}

/* --- MOVIL / TABLET ---
   Hamburguesa a la izquierda · logo centrado · aire a los lados. */
@media (max-width: 1024px) {
    .elementor-location-header .e-con-inner {
        justify-content: center !important;
    }

    /* Espaciador derecho: empuja el logo al centro exacto */
    .elementor-location-header .e-con-inner::after {
        content: '';
        order: 3;
        flex: 1 1 0%;
        min-width: 0;
    }

    /* La hamburguesa manda: primera y a la izquierda */
    .elementor-location-header .elementor-element-7e724649 {
        order: 1;
        flex: 1 1 0% !important;
        width: auto !important;
        justify-content: flex-start !important;
    }
    /* Elementor pone align-self:flex-end en el widget del menu: la hamburguesa
       se iba al borde derecho de su hueco, es decir PEGADA al logo (0px de aire
       a 390, 768 y 1024). Al margen izquierdo del grid. */
    .elementor-location-header .elementor-element-7e724649 > .elementor-element-1e07548 {
        align-self: flex-start !important;
    }
    /* El logo, en el centro */
    .elementor-location-header .elementor-element-1c30c55e {
        order: 2;
        padding: 12px 20px 0;
        height: 92px;
        margin-top: -12px;
        margin-bottom: -26px;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 8px 18px rgba(63, 43, 39, .10);
    }

    .elementor-location-header .elementor-widget-image img { max-height: 50px; }

    /* La hamburguesa del header la pone Elementor core (.elementor-menu-toggle) */
    .elementor-location-header .elementor-menu-toggle {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
        margin: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .elementor-location-header .elementor-menu-toggle i,
    .elementor-location-header .elementor-menu-toggle svg {
        color: #3F2B27;
        fill: #3F2B27;
        font-size: 22px;
        width: 22px;
        height: 22px;
    }
    /* El desplegable sale del flujo: al abrirse ya no empuja la pagina hacia
       abajo (antes main bajaba 324px) y su margin-top de 45px ya no engorda la
       barra cuando esta cerrado. */
    .elementor-location-header .elementor-element-7e724649,
    .elementor-location-header .elementor-element-1e07548 { position: static !important; }
    /* Selector muy especifico a proposito: Elementor pisa el margin-top con
       .elementor-918 ... .elementor-nav-menu__container{margin-top:45px!important} */
    html .elementor-location-header .elementor-element.elementor-element-1e07548
        .elementor-nav-menu__container.elementor-nav-menu--dropdown {
        position: absolute !important;
        top: 100% !important;
        left: var(--smc-margen) !important;
        right: auto !important;
        margin-top: 0 !important;
        min-width: 230px;
        max-width: calc(100vw - 2 * var(--smc-margen));
        background: #ffffff;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 14px 28px rgba(63, 43, 39, .14);
        overflow: hidden;
        z-index: 30;
    }

    /* Desplegable movil: enlaces con area tactil de 44px */
    .elementor-location-header .elementor-nav-menu--dropdown a {
        min-height: 44px;
        display: flex;
        align-items: center;
        font-size: 15px;
    }
}

/* --- BARRA COMPACTA AL HACER SCROLL ---
   La clase .smc-stuck va en <html> (functions.php) para que el header y la
   pildora de idioma (que vive fuera del header) se encojan a la vez. */
html.smc-stuck .elementor-location-header .elementor-element-757dfd0b {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
html.smc-stuck .elementor-location-header .elementor-element-1c30c55e {
    height: 56px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 18px !important;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 6px 14px rgba(63, 43, 39, .10);
}
html.smc-stuck .elementor-location-header .e-con-inner { padding-top: 0 !important; }
html.smc-stuck .elementor-location-header .elementor-widget-image img { max-height: 38px; }
html.smc-stuck .elementor-location-header { box-shadow: 0 4px 16px rgba(0, 0, 0, .08); }
html.smc-stuck .smc-lang { top: 12px; }

/* Sin animaciones para quien las tiene desactivadas */
@media (prefers-reduced-motion: reduce) {
    .elementor-location-header,
    .elementor-location-header .elementor-element-757dfd0b,
    .elementor-location-header .elementor-element-1c30c55e,
    .elementor-location-header .elementor-widget-image img,
    .smc-lang { transition: none !important; }
}

/* --- ACCESIBILIDAD: foco visible --- */
.elementor-location-header a:focus-visible,
.elementor-location-header button:focus-visible,
.elementor-location-footer a:focus-visible {
    outline: 2px solid #FCD363;
    outline-offset: 3px;
    border-radius: 6px;
}

/* Transicion de la pildora de idioma (la dibuja functions.php) */
.smc-lang { transition: top .25s ease; }

/* ==========================================================================
   9. FOOTER — estilo Apple (limpio, con aire)
   Estructura: menu legal | copyright | redes sociales
   ========================================================================== */

/* La barra del pie: fondo crema suave, mas calido que el blanco puro */
.elementor-location-footer {
    background: #FBF8F3;
    border-top: 1px solid #F0EDE8;
    padding-top: 44px;
    padding-bottom: 28px;
}

/* OJO: el footer no lleva .e-con-inner; el grid va en el contenedor padre. */
.elementor-location-footer .e-con-inner {
    align-items: center;
}

/* --- Reparto de la fila principal ---
   Fila 1: marca (logo) | menu legal | redes sociales
   Fila 2: copyright a todo el ancho, con linea fina arriba
*/
/* --- GRID: mismo ancho y mismos margenes que el header --- */
.elementor-location-footer .elementor-element-691dc740 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 26px 32px !important;
    max-width: var(--smc-ancho);
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--smc-margen) !important;
    padding-right: var(--smc-margen) !important;
    width: 100%;
    box-sizing: border-box;
}

/* Marca: el logo azul a la izquierda */
.elementor-location-footer .elementor-element-7b8f6eb {
    order: 1;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}
.elementor-location-footer .elementor-element-7b8f6eb img {
    height: 52px !important;
    width: auto !important;
    max-height: none !important;
    display: block;
}

/* Menu legal: se lleva el espacio central */
.elementor-location-footer .elementor-element-9d122d6 {
    order: 2;
    /* sin redes sociales: el menu legal se pega a la derecha */
    flex: 0 1 auto !important;
    margin-left: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    padding: 0 !important;
}

/* El aire lo pone el grid, no cada caja */
.elementor-location-footer .elementor-element-7b8f6eb,
.elementor-location-footer .elementor-element-2dae803c {
    padding: 0 !important;
}

/* Redes sociales: a la derecha */
.elementor-location-footer .elementor-element-2dae803c {
    order: 3;
    flex: 0 0 auto !important;
    width: auto !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* Copyright: barra inferior a todo el ancho */
.elementor-location-footer .elementor-element-be73bd56 {
    order: 4;
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-top: 12px;
    padding: 24px 0 0 !important;
    border-top: 1px solid #EFE7DB;
}

/* --- Menu legal: en una sola fila, centrado --- */
.elementor-location-footer .elementor-nav-menu {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center;
    gap: 6px 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.elementor-location-footer .elementor-nav-menu > li {
    margin: 0 !important;
    padding: 0;
}

.elementor-location-footer .elementor-nav-menu > li > a {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #3F2B27;
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease;
}

.elementor-location-footer .elementor-nav-menu > li > a:hover {
    color: #D6955F;
    border-bottom-color: #FCD363;
}

/* --- Copyright --- */
.elementor-location-footer .elementor-widget-text-editor,
.elementor-location-footer .elementor-widget-text-editor p {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.7;
    color: #6B635D;   /* contraste AA sobre el crema */
    text-align: center;
    margin: 0;
}

.elementor-location-footer .elementor-widget-text-editor a {
    color: #3F2B27;
    text-decoration: underline;
    text-decoration-color: #C9BCA8;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-color .18s ease;
}

.elementor-location-footer .elementor-widget-text-editor a:hover {
    text-decoration-color: #FCD363;
}

/* --- Redes sociales --- */
.elementor-location-footer .elementor-icon-list-items {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    /* Elementor mete margenes negativos en inline-items: hay que anularlos */
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0;
}

.elementor-location-footer .elementor-icon-list-item {
    margin: 0 !important;
    padding: 0;
}

.elementor-location-footer .elementor-icon-list-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #ECE3D6;
    color: #3F2B27;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.elementor-location-footer .elementor-icon-list-item a:hover {
    background: #FCD363;
    border-color: #FCD363;
    color: #3F2B27;
    transform: translateY(-2px);
}

.elementor-location-footer .elementor-icon-list-icon i,
.elementor-location-footer .elementor-icon-list-icon svg {
    font-size: 15px;
    width: 15px;
    height: 15px;
}

/* --- MOVIL --- */
@media (max-width: 767px) {
    .elementor-location-footer { padding-top: 34px; padding-bottom: 24px; }

    /* Todo apilado y centrado: marca, menu, redes, copyright */
    .elementor-location-footer .elementor-element-691dc740 {
        flex-direction: column !important;
        align-items: center !important;
        gap: 18px !important;
    }
    .elementor-location-footer .elementor-element-7b8f6eb { order: 1; }
    .elementor-location-footer .elementor-element-9d122d6 { order: 2; width: 100% !important; }
    .elementor-location-footer .elementor-element-2dae803c { order: 3; justify-content: center !important; }
    .elementor-location-footer .elementor-element-be73bd56 {
        order: 4;
        width: 100% !important;
        margin-top: 8px;
        padding-top: 20px !important;
    }
    .elementor-location-footer .elementor-element-7b8f6eb img { height: 46px !important; }

    .elementor-location-footer .elementor-nav-menu { gap: 4px 18px; }

    /* En el pie, el menu legal se muestra como enlaces (no como hamburguesa) */
    .elementor-location-footer .elementor-nav-menu--main {
        display: block !important;
    }
    .elementor-location-footer .elementor-menu-toggle,
    .elementor-location-footer .elementor-nav-menu--dropdown {
        display: none !important;
    }
    /* Enlaces legales: area tactil comoda */
    .elementor-location-footer .elementor-nav-menu > li > a {
        font-size: 13px;
        padding: 8px 0;
    }
    .elementor-location-footer .elementor-icon-list-items { gap: 12px; }
    .elementor-location-footer .elementor-icon-list-item a { width: 36px; height: 36px; }
}