/*
 Theme Name:  Santa Catalina
 Theme URI:   https://www.santacatalina.com
 Description: Child theme de twentytwentyfive
 Author:      Tu Nombre/Empresa
 Template:    twentytwentyfive
 Version:     1.0.0
 Text Domain: santacatalina
*/

/*@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');*/

body {
    font-family: "Inter", sans-serif;
}

body.home img.wp-block-cover__image-background.wp-post-image {
    transform: scaleX(-1);
}

.gb_marron {
    background-color: var(--wp--preset--color--beige-oscuro);
}

.is-style-text-subtitle {
    color: var(--wp--preset--color--nude);
    white-space: pre-wrap;
    line-height: 1.4;
    font-weight: 500;
    font-size: 24px;
}

.h1home {
    color: var(--wp--preset--color--blanco);
    white-space: pre-wrap;
    line-height: 1.1;
    display: block;
    margin-bottom: 0px;
    font-weight: 700;
    font-size: 70px;

}


.btn-home-conocenos a,
.btn-claro a {
    background-color: var(--wp--preset--color--nude);
    position: relative;
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 18px;
    font-size: 18px;
    font-weight: 400;
    border-radius: 0;
}

.btn-home-conocenos a:hover,
.btn-claro a:hover {
    background-color: var(--wp--preset--color--gamuza);
    color: var(--wp--preset--color--blanco);
}


.btn-oscuro a,
.ff-btn.ff-btn-submit.ff-btn-md.ff_btn_style {
    background-color: var(--wp--preset--color--gamuza);
    position: relative;
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    border-radius: 0;
    color: var(--wp--preset--color--blanco);
    padding-top: 12px;
    padding-right: 22px;
    padding-bottom: 12px;
    padding-left: 22px;

}

.btn-oscuro a:hover {
    background-color: var(--wp--preset--color--marron-medio);
    color: var(--wp--preset--color--nude);
}

.btn-arrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--wp--preset--color--negro);
    cursor: pointer;
    text-decoration: none;
    padding-right: 0 !important;
    padding-left: 0 !important;
    font-size: 14px;
}


.btn-arrow::after {
    content: "→";
    display: inline-block;
    transform: translateX(0);
    transition: transform .2s ease;
}

/* Hover: mueve la flecha */
.btn-arrow:hover::after,
.btn-arrow:focus-visible::after {
    transform: translateX(.35em);
}


.btn-arrow:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}



.textos-hero-home {
    max-width: 900px;
    margin: 130px auto 40px auto;

}

.textos-hero-home h2::after {

    display: none !important;
    background-color: transparent !important;
    margin: 0 !important;
}


.franja-marron {
    background-color: var(--wp--preset--color--marron-medio);
    margin-top: 0px;
    padding: 40px 0px;
    color: var(--wp--preset--color--blanco);
    font-size: 24px;
    text-align: center;
    letter-spacing: 1.2px;
}

.franja-marron div,
.franja-recomendacion div {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.franja-recomendacion {
    padding: 40px 0px;
}

.marcas div {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 0px;
}


.franja-recomendacion blockquote {
    border: none;
}

/* Bloque H2 + barra decorativa */


.wp-block-group.wp-block-group-is-layout-constrained:has(> h2.wp-block-heading + .subrayado-beige) {
    --gap-outer: clamp(24px, 4vw, 56px);
    --gap-between: clamp(12px, 1.5vw, 20px);
    padding-block: var(--gap-outer);
    min-width: 0;
}

.wp-block-group.wp-block-group-is-layout-constrained:has(> h2.wp-block-heading + .subrayado-beige-alto) {
    --gap-outer: clamp(24px, 4vw, 56px);
    --gap-between: clamp(12px, 1.5vw, 20px);

    padding-block: var(--gap-outer);
    min-width: 0;
}

.wp-block-group.wp-block-group-is-layout-constrained>h2.wp-block-heading {
    margin: 0;
    text-align: center;
    line-height: 1.15;
    hyphens: auto;
    overflow-wrap: anywhere;
    position: relative;
    z-index: 1;
    padding-top: 33px;
    padding-bottom: 63px;
}

.wp-block-group.wp-block-group-is-layout-constrained>h2.wp-block-heading+.subrayado-beige {
    display: block;
    margin: var(--gap-between) auto;
    inline-size: clamp(36px, 6vw, 72px);
    block-size: clamp(12px, 0.9vw, 55px);
    background: var(--wp--preset--color--beige-claro);
}

/* Barra corta centrada debajo del H2 */
.wp-block-group.wp-block-group-is-layout-constrained>h2.wp-block-heading+.subrayado-beige-alto {
    display: block;
    margin: var(--gap-between) auto;
    inline-size: clamp(36px, 6vw, 72px);
    block-size: clamp(12px, 0.9vw, 55px);
    background: var(--wp--preset--color--beige-claro);
    margin-top: 52px;
}


.wp-block-group.wp-block-group-is-layout-constrained>h2.wp-block-heading+.subrayado-beige::before,
.wp-block-group.wp-block-group-is-layout-constrained>h2.wp-block-heading+.subrayado-beige::after {
    content: none !important;
}

.wp-block-group.wp-block-group-is-layout-constrained>h2.wp-block-heading+.subrayado-beige-alto::before,
.wp-block-group.wp-block-group-is-layout-constrained>h2.wp-block-heading+.subrayado-beige-alto::after {
    content: none !important;
}


.m-0 {
    margin: 0;
}

.wp-block-cover .wp-block-cover__inner-container.is-layout-flow.wp-block-cover-is-layout-flow>h1 {
    position: absolute;
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    text-align: center;
    width: min(100%, 1100px);
    line-height: 1.15;
    z-index: 1;
    place-items: center;
    color: var(--wp--preset--color--blanco);
    word-break: break-word;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(28px, 6vw, 72px);
    /* tamaño fluido */
}

/* TÍTULOS H2 GENERALES */
h2 {
    color: var(--wp--preset--color--marron-oscuro);
    letter-spacing: -0.8px;
    word-break: break-word;
    font-weight: 700;
    font-style: normal;
    font-size: 40px;
    text-align: center;
    margin: 40px auto 0;
}

/* Variante H2 alineado a la izquierda (páginas internas, etc.) */
h2.tit {
    color: var(--wp--preset--color--marron-oscuro);
    letter-spacing: -0.8px;
    word-break: break-word;
    font-weight: 700;
    font-style: normal;
    font-size: 40px;
    text-align: left;
    margin: 40px 0 0;
    height: auto;
}

/* Barra decorativa bajo algunos títulos:
   - se aplica a los H2 de Gutenberg (clase wp-block-heading)
   - y a cualquier elemento al que le pongas la clase .h2 */
h2.wp-block-heading::after,
.h2::after {
    content: "";
    display: block;
    width: 5.25rem;
    height: 0.625rem;
    /*background-color: var(--wp--preset--color--beige-claro);*/
	background-color: var(--wp--preset--color--marron-medio);
    inline-size: clamp(36px, 6vw, 72px);
    block-size: clamp(12px, 0.9vw, 55px);
    margin: 1.375rem auto 0;
}

h2.tit.wp-block-heading::after,
.h2::after {
    content: "";
    display: block;
    width: 5.25rem;
    height: 0.625rem;
    background-color: var(--wp--preset--color--blanco);
    inline-size: clamp(0px, 6vw, 72px);
    block-size: clamp(0px, 0.9vw, 55px);
    margin: 1.375rem auto 0;
}




.wp-block-heading h2::after,
.h2::after {
    content: "";
    display: block;
    width: 5.25rem;
    height: 0.625rem;
    background-color: var(--wp--preset--color--marron-oscuro);
    margin: 1.375rem auto 0;
}

h3.tit {
    color: var(--wp--preset--color--marron-medio);
    letter-spacing: -0.8px;
    word-break: break-word;
    font-weight: 700;
    font-style: normal;
    font-size: 33px;
    letter-spacing: -0.8px;
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 75px;
    padding-top: 40px;
    text-align: left;

}

h3.category {

    color: var(--wp--preset--color--marron-oscuro);
    letter-spacing: -0.8px;
    font-weight: 700;
    font-size: 23px;
    flex-shrink: 0;
    text-align: center;

}

h3.type {

    color: var(--wp--preset--color--marron-oscuro);
    letter-spacing: -0.8px;
    font-weight: 700;
    font-size: 23px;
    flex-shrink: 0;
    text-align: center;
    padding-bottom: 42px;
    padding-top: 22px;
}

.bg-beige-claro {

    background-color: var(--wp--preset--color--beige-claro-opacidad) !important;
}

.bg-nude {

    background-color: var(--wp--preset--color--nude-opacidad) !important;

}

.bg-gris-claro {

    background-color: var(--wp--preset--color--gris-claro) !important;

}

.bg-crema {
    background-color: var(--wp--preset--color--crema);
}


.trio-servicios h3 {
    color: var(--wp--preset--color--marron-oscuro) !important;
    font-weight: 600;
}

.trio-servicios h3,
.trio-servicios p {
    padding-left: 20px;
}

.trio-servicios p {
    color: var(--wp--preset--color--negro);
    font-size: 18px;
}

.grid-fotos {
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0px;
    grid-auto-rows: minmax(0, auto);
}

.franja-recomendacion {
    background-color: var(--wp--preset--color--crema);
}

.wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--wp--preset--color--marron-medio) !important;
}

.yoast-breadcrumbs {
    padding-block: var(--wp--preset--spacing--50);
    padding-inline-start: var(--wp--preset--spacing--50);
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.4;
    color: var(--wp--preset--color--negro);
}


span.wp-block-navigation-item__label {
    font-size: 15px;
    margin-left: 5px;
}

li.current-menu-item a span {
    text-decoration: underline;
}

figure.wp-block-image.img-cover img,
.wp-block-image.img-cover img,
figure.img-cover img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    object-position: center;
}

figure.wp-block-image.img-cover,
.wp-block-image.img-cover,
figure.img-cover {
    margin: 0 !important;
}

:root {
    --wp--style--global--content-size: 76% !important;
    --wp--style--global--wide-size: 1340px;
}

main {
    margin-top: 0 !important;
}

main p,
footer p {
    font-size: 17px;
}

.pad-44 {
    padding: 24px;
    text-align: center;
}

.margin-bottom-block {
    margin-bottom: 33px;
}

.margin-top-90 {
    margin-top: 90px;
}

.margin-bottom-90 {
    margin-bottom: 90px;
}

footer {
    border-top: solid 1px var(--wp--preset--color--gris);
}

.ff-default .ff-el-form-control {
    background-color: var(--wp--preset--color--blanco);
}

.ff-default .ff-el-input--label label {
    font-size: 17px;
}

:root :where(.wp-element-button, .wp-block-button__link) {

    font-size: auto !important;
}

.despegable div div div {

    flex-basis: 100% !important;
    text-align: center !important;
}

.wp-block-column .is-vertically-aligned-center .is-layout-flow .wp-block-column-is-layout-flow {

    flex-basis: 100% !important;
    text-align: center !important;
}


.trio-color h4 {

    text-align: center;
    font-weight: bold;
    font-size: 19px;

}

.trio-color div {
    margin: 0 !important;

}

.trio-color div {
    padding: 35px;
    height: 70px;
    text-align: center;
    vertical-align: middle;

}

.img-check {

    max-height: 150px;
}

header .yoast-breadcrumbs {

    display: block;
    padding-left: 0 !important;
}

.yoast-breadcrumbs {
    display: none;
}

ul.wp-block-list {

    font-size: 17px;
}

.cabecera-menu {

    justify-content: space-between;
    padding-right: 50px !important;

}

.wp-block-image.ratio-2-3 {
    position: relative;
    width: 100%;
    padding-top: 150%;
    overflow: hidden;
}


.wp-block-image.ratio-2-3>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}



.wp-block-image.ratio-1-1 {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
}


.wp-block-image.ratio-1-1>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.margin-bottom-30 {

    margin-bottom: 30px;
}


/* Limitar el ancho del selector de idioma en la cabecera */
.cabecera-menu .wpml-language-switcher-block {
    width: auto !important;
    flex: 0 0 auto;
}

.wpml-language-switcher-block {

    color: #fff;

}

.cabecera-menu {
    display: flex;
    align-items: center;
    column-gap: 1rem;
}


.cabecera-menu>.wp-block-group:first-child {
    margin-right: auto;
	margin-left: 40px;
}


.cabecera-menu nav.wp-block-navigation,
.cabecera-menu .wpml-language-switcher-block {
    flex: 0 0 auto;
}


.cabecera-menu .wpml-language-switcher-block {
    width: auto !important;

}

.current-language-item {
    display: flex;
    align-items: center;
    font-size: 15px;
}

.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content{

    color:var(--wp--preset--color--blanco);
}

footer .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content{

    color:var(--wp--preset--color--negro);
}


.santa-catalina-text {
  
    font-family: 'Cinzel', serif;  
    font-weight: 700; 
    text-align: center; 
    line-height: 1.2;
    margin-bottom: 5px; 
}

.santa-catalina-text.decoracion {
    font-size: 14px; 
    font-weight: 400;
    letter-spacing: 0.2em; 
    margin-bottom: 0;
}

/* ===== Responsive ≤ 1017px ===== */

@media (max-width: 1018px) {
    .cabecera-menu {
        flex-wrap: nowrap !important;

    }

    .cabecera-menu ul {
        align-items: baseline !important;
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;

    }

    span.wp-block-navigation-item__label {

        font-size: 14px !important;
        margin-left: 0;

    }

    .wp-block-cover .wp-block-cover__inner-container.is-layout-flow.wp-block-cover-is-layout-flow>h1 {

        top: 65%;
        font-size: 66px;
    }

    .h1home {

        font-size: 45px;
    }

    .textos-hero-home {

        max-width: 700px;
        margin-top: 35px;
    }


    .franja-marron {

        font-size: 22px;
    }

    h2 {

        font-size: 27px;
        height: 65px;
        padding-top: 40px;
        max-width: 100% !important;
    }


    h3.tit {

        font-size: 22px;
    }

    .wp-block-group.wp-block-group-is-layout-constrained:has(> h2.wp-block-heading + .subrayado-beige) {
        --gap-outer: 24px;
        --gap-between: 12px;
    }

    .wp-block-group.wp-block-group-is-layout-constrained:has(> h2.wp-block-heading + .subrayado-beige-alto) {
        --gap-outer: 24px;
        --gap-between: 12px;
    }

    .wp-block-group.wp-block-group-is-layout-constrained>h2.wp-block-heading+.subrayado-beige {
        inline-size: clamp(32px, 10vw, 60px);
        block-size: 14px;
        position: static !important;
    }

    .wp-block-group.wp-block-group-is-layout-constrained>h2.wp-block-heading+.subrayado-beige-alto {
        inline-size: clamp(32px, 10vw, 60px);
        block-size: 14px;
        position: static !important;
        margin-top: 32px !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: middle;
        overflow: visible;
        justify-content: center;
        padding-top: calc(2rem + 24px);
    }

    .wp-block-navigation .wp-block-navigation-item__label {
        overflow-wrap: break-word;
    }

    span.wp-block-navigation-item__label {

        font-size: 14px;
        margin-left: 0;


    }

    /* Bloques y orden en responsive */

    .bloq-image-order .wp-block-columns {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: clamp(12px, 2.5vw, 20px);
    }

    .bloq-image-order .wp-block-columns>.wp-block-column {
        flex: 1 1 auto;
        width: 100% !important;
        margin: 0 !important;
        min-width: 0;

    }


    .bloq-image-order .wp-block-columns>.wp-block-column:has(.wp-block-heading) {
        order: 1;
    }

    .bloq-image-order .wp-block-columns>.wp-block-column:has(.wp-block-image),
    .bloq-image-order .wp-block-columns>.wp-block-column:has(figure),
    .bloq-image-order .wp-block-columns>.wp-block-column:has(img),
    .bloq-image-order .wp-block-columns>.wp-block-column:has(.wp-block-cover),
    .bloq-image-order .wp-block-columns>.wp-block-column:has(.wp-block-media-text__media) {
        order: 2;
    }


    .bloq-image-order .wp-block-heading {
        margin: 0;
        line-height: 1.2;
        hyphens: auto;
        overflow-wrap: anywhere;
    }

    .bloq-image-order .wp-block-image,
    .bloq-image-order figure {
        margin: 0 !important;
    }

    .bloq-image-order img {
        display: block;
        width: 100%;
        height: auto;

    }

    .current-language-item {
        display: flex;
        align-items: center;
        font-size: 13px;
    }


    .bloque-marcas.wp-block-group.wp-block-group-is-layout-constrained>h2.wp-block-heading {

        padding-bottom: 0px !important;
    }


}

/* ===== Responsive ≤ 825px ===== */

@media (max-width: 825px) {

    .wp-block-cover .wp-block-cover__inner-container.is-layout-flow.wp-block-cover-is-layout-flow>h1 {
        top: 76%;
        font-size: clamp(18px, 6vw, 72px);
    }

    span.wp-block-navigation-item__label {

        font-size: 13px;
        margin-left: 0;

    }

    .margin-40 {

        margin-top: 60px;
    }

    h2.tit {

        height: auto;
        text-align: center;
        display: inline-block;
    }


    .cabecera-menu .wpml-language-switcher-block a {

        font-size: 18px !important;
        color: #fff;
    }

    .wp-block-navigation.idioma {
        font-family: "Inter", system-ui, sans-serif;
        /* la que quieras */
        font-size: 0.875rem;
        /* más pequeño que el menú */
        font-weight: 400;
        text-transform: none;
        letter-spacing: 0;
    }


    .wp-block-navigation.idioma .wp-block-navigation-item__label {
        font-size: inherit;

    }

    .current-language-item {
        display: flex;
        align-items: center;
        font-size: 13px;
    }

    .franja-marron {

        padding-left: 13px;
        padding-right: 13px;


    }

}

/* ===== Responsive ≤599px ===== */

@media (max-width: 599px) {
    .cabecera-menu {

        padding-right: 12px !important;
    }

    .cabecera-menu ul.wp-block-navigation__container.has-text-color.is-responsive {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
    }

    .cabecera-menu ul,
    span.wp-block-navigation-item__label {
        font-size: 20px !important;
        font-weight: bold;
    }

    h2 {


        max-width: 100% !important;
    }

    .margin-40 {

        margin-top: 160px;

    }
    .margin-top-bot{

        margin-top: 100px; 
    }

    h2.tit {

        height: auto;
        text-align: center;
        display: inline-block;
    }

    .cabecera-menu .wpml-language-switcher-block a {

        font-size: 18px !important;
        color: #fff;
    }

    .wpml-language-switcher-blockspan .current-language-item span a {

        font-size: 18px !important;
        color: #fff;
    }

    .wp-block-navigation.idioma {
        font-family: "Inter", system-ui, sans-serif;
        /* la que quieras */
        font-size: 0.875rem !important;
        /* más pequeño que el menú */
        font-weight: 400;
        text-transform: none;
        letter-spacing: 0;
    }

    /* Aseguramos que la etiqueta use ese tamaño */
    .wp-block-navigation.idioma .wp-block-navigation-item__label {
        font-size: inherit;

    }

    .franja-marron {

        padding-left: 13px;
        padding-right: 13px;


    }

    .franja-marron p {

        text-align: justify;
        font-size: 15px;
    }





}