/*

Id: pg-wc-02
Nombre: Wc02
Fecha: 19/03/25
Sistema: Site Mater
*/



/***************************
VARIABLES
**************************/
:root {
    /*
Fuentes
*/
    --font-size: 1rem; /* tama�o base de la fuente */
    --line-height: 1.5; /* interlineado base de la fuente */
    --container-min: 360;
    --container-max: 1280;
    /*
Personalizables
*/
    /* Theme*/
    --theme: #fff;
    --theme-dest: rgba(0,0,0,0.1);
    --theme-color: #152E47;
    --portada-color: #fff;
    --portada-gradient-color: 21,46,71;
    --font-color: #152E47;
    --primary: #234A70; /* colores */
    --primary-invert: #fff;
    --secondary: #d4c5b9;
    --secondary-invert: #1B3A58;
    --light: #f9f6f3;
    --light-invert: var(--font-color);
    --dark: #152E47;
    --dark-invert: #fff;
    --dark-transparent: rgba(21,46,71,0.85); /* color oscuro transparente */
    --white-transparent: rgba(255,255,255,0.92); /* color blanco transparente */
    --swiper-theme-color: var(--primary) !important;
    --bg-gradient: radial-gradient(circle, rgba(246,242,238,1) 0%, rgba(236,228,221,1) 50%, rgba(212,197,185,1) 100%);
    --color-fb: #0865FE;
    --color-ig: #C536A4;
    --color-tw: #0F1419;
    --color-wa: #1BD741;
    --radiusButton: 8px;
    --radiusBox: 24px;
    --radiusImg: var(--radiusBox) var(--radiusBox) var(--radiusBox) calc(var(--radiusButton) * 2);
    --radiusImg-left: var(--radiusBox) var(--radiusBox) calc(var(--radiusButton) * 2) var(--radiusBox); /* imagen a la izquierda: pico abajo a la derecha */
    --radiusImg-right: var(--radiusBox) var(--radiusBox) var(--radiusBox) calc(var(--radiusButton) * 2); /* imagen a la derecha: pico abajo a la izquierda */
    --radius1: 8px;
    --radius2: var(--radiusBox);
    --bold1: 600;
    --bold2: 700;
    --font1: 'Inter';
    --font2: 'Montserrat';
    --awesome: 'Font Awesome 7 Pro';
    --max-width: 1680px; /* Ancho m�ximo del container */
    --padding-h: clamp(1rem, 1.5vw + 0.7rem, 3rem); /* padding horizontal de los section, se aumenta en los @media */
    --padding-v: clamp(3rem, 6vw + 2rem, 7rem); /* padding vertical de los section, se aumenta en los @media*/
    --padding-inner: clamp(1rem, 2vw + 0.5rem, 2rem); /* Espacio interior de los componentes  */

    --width-logo: 120px; /* Tama�o del logo, se aumenta en los @media */
    /*
Altura dispositivo
*/
    --app-height: 100vh; /* Altura del disposivo */
    --header-height: 0px; /* Altura de la cabecera */
}

@media screen and (min-width: 601px) {
    :root {
        --width-logo: 140px;
    }
}

@media screen and (min-width: 821px) {
    :root {
        --width-logo: 160px;
    }
}

@media screen and (min-width: 1200px) {
    :root {
        --width-logo: 180px;
    }
}

*, *:after, *:before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-text-size-adjust: none;
}
/*************** Preloader ***************/
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    font-size: 3rem;
    color: var(--primary);
    opacity: 1;
    visibility: visible;
    transition: opacity 300ms ease-in-out, visibility 0ms linear 300ms;
    animation: preloaderFailSafe 0s 3000ms forwards;
}

@keyframes preloaderFailSafe {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

#preloader svg {
    opacity: 0;
    fill: var(--primary);
    animation: 200ms preloaderShow 300ms forwards linear;
}

@keyframes preloaderShow {
    from {
        opacity: 0
    }

    to {
        opacity: 1;
    }
}


#preloader.hide {
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease-in-out, visibility 0ms linear 300ms;
}


/** Chatbot Elfsight **/
body:has(.nav--is-active) .elfsight-cont {
	position:relative;
	z-index:0;
}
/*********************/

/***********************************************/

a {
    color: var(--primary);
}

b, strong {
    font-weight:var(--bold1);
}
a[href^="tel:"]:not([class]) { white-space: nowrap;
    color: currentColor;
    text-decoration: none;
}

html {
    font-family:var(--font1);
    color: var(--font-color);
    font-size: var(--font-size);
    font-weight:400;
	text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
    line-height: var(--line-height);
}

body {
    min-width: 300px;
    overflow-x:hidden;
	position:relative;
}

body .content,
body .header{
    transition: all 400ms ease, background 300ms ease;
}

body.no-scroll {
    overflow: hidden;
}

body.no-scroll .content,
body.no-scroll .header {
    transform: translate(max(-100%,-540px));
}


/* Separacion peque�a entre bloques */
.sep-top{
    margin-top: min(var(--padding-v), 1.5rem);
}
.sep-bottom{
    margin-bottom: min(var(--padding-v), 1.5rem);
}

/***************************
404
**************************/
.error404{
    min-height:60vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}
.error404__title{
    font-size:clamp(120px,30vw, 300px);
    letter-spacing:12px;
    font-family: var(--font1);
    font-weight:var(--bold1);
    line-height:0.75em;
    margin:0;
    color:#D9D9D9;
}
.error404__container{
    background:#D9D9D9;
    padding:var(--padding-v) var(--padding-h);
    width:100%;
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
}

.error404 .title--1{
    color:#666;
    margin-bottom:1.75rem;
}
.error404 .button{
    background:#4d4d4d;
    color:#fff;
    font-weight:normal;
    padding:0.75rem 1.25rem;
    border-radius:4px;
    font-size: 1.125rem;
    min-width:140px;
}

/***************************
COOKIES Y LEGAL
**************************/
div[data-tpc="rpl"] {
    background: #f5f5f5;
    padding: 30px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    font-size: 120%;
    color: #333;
    height: 100%;
	width:100%;
}

div[data-tpc="rpl"] span {
    display: block;
    padding: 16px;
    border: 2px dashed #ccc;
}

#dvAviso {
    text-align: left;
}

#dvAviso ul {
    padding-left: 22px;
    margin-bottom: 1.25rem;
}

#dvAviso .enc {
    font-weight: var(--bold1);
    font-size: 1.2rem;
}



/***************************
SECCIONES
**************************/
.section { /* Seccion normal */
    padding: var(--padding-v) var(--padding-h);
}
.section.section--s { /* Seccion con menos padding vertical */
    padding: min(var(--padding-v), 3rem) var(--padding-h);
}
.section > .section.container{
    border-radius:var(--radiusBox);
}
main > .section:first-child:last-child:not(:has(.landing)) {
    padding-top: min(var(--padding-v), 3rem);
}
.section.section--gap-v { /* section con padding s�lo vertical */
    padding: var(--padding-v) 0;
}
.section.section--gap-h { /* section con padding s�lo horizontal */
    padding: 0 var(--padding-h);
}
.section.section--nogap { /* section sin padding */
    padding: 0;
}
.section.section--nogap-down { /* section sin padding abajo */
    padding-bottom: 0;
}
.section.section--nogap-up { /* section sin padding abajo */
    padding-top: 0;
}
.section--border, *:not(.galeria-portada):not(.portada) + .section--comp,  .section--comp:first-child{
	border-top:1px solid rgba(0,0,0,0.05);
}
.section--primary { /* color de fondo y texto de los section */
    background: var(--primary);
    color: var(--primary-invert);
    --fade-bg: var(--primary);
}
.section--primary a:not(.button){ /* color de fondo y texto de los section */
    color: var(--primary-invert);
}
.section--secondary {
    background: var(--secondary);
    color: var(--secondary-invert);
    --fade-bg: var(--secondary);
}
.section--secondary a:not(.button){
    color: var(--secondary-invert);
}
.section--light {
    background: var(--light);
    color: var(--light-invert);
    --fade-bg: var(--light);
}
.section--dark {
    background: var(--dark);
    color: var(--dark-invert);
    --fade-bg: var(--dark);
}
.section--dark a:not(.button){
    color: var(--dark-invert);
}

.section--halflight {
    background: linear-gradient(to bottom, var(--light) 50%, #fff 50%);
    /* fondo a dos mitades: el fade usa la clara, que es la de arriba */
    --fade-bg: var(--light);
}

.section--gradient {
    background: var(--bg-gradient);
    /* aproximacion: el degradado no es un color plano */
    --fade-bg: var(--light);
}
.section--bg { /* section con imagen de fondo */
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.section--radius {
    margin:0 1rem;
    border-radius:var(--radiusBox);
    overflow:hidden;
}
.section--bg,
.section--filter {
    /* foto de fondo: no hay color plano, el fade tira del velo oscuro */
    --fade-bg: var(--dark-transparent);
}

.section--filter:before { /* section con filtro de color por detr�s del texto */
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0,0.4);
    z-index: 1;
}
.section--filter .container {
    position: relative;
    z-index: 1;
}

.container { /* container con ancho m�ximo */
    width:100%;
    max-width: var(--max-width);
    margin: 0 auto;
}
.container--s { /* container con ancho m�ximo de 60% */
    max-width: calc( var(--max-width) * 0.75);
}
.container--xl { /* container con ancho m�ximo de +40% */
    max-width: calc( var(--max-width) * 1.4);
}

.container--xs { /* container con ancho m�ximo de 40% */
    max-width: calc( var(--max-width) * 0.35);
}
.container[data-position="left"], .container__inner[data-position="left"] { /* posicionar el container a la izquierda */
    margin: 0 auto 0 0
}
.container[data-position="right"], .container__inner[data-position="right"] { /* posicionar el container a la derecha */
    margin: 0 0 0 auto;
}

.container--box { /* container con fondo y padding */
    padding: var(--padding-inner);
    border-radius:var(--radiusBox);
    background: var(--white-transparent);
    --fade-bg: var(--white-transparent);
}

.block {
    display: inline-block
}

/***************************
BUTTON
**************************/
        .button {
            --transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative;
            padding: 0.7em 1.25em;
            display: inline-block;
            vertical-align:middle;
            text-decoration: none;
            border-radius: var(--radiusButton);
            margin: 3px;
            cursor: pointer;
            font-weight: 600;
            overflow: hidden;
            border: none;
            transition: var(--transition);
            z-index: 1;
            line-height: 1.2;
            user-select: none;
        }

        .button > span > span {
            font-size: 0.85rem;
            opacity: .75;
            display: block;
            text-align: left
        }
       .button > span, .button > i {
            position: relative;
            z-index: 3;
            transition: var(--transition);
        }

        /* ICONOS */
        .button i:first-child:not(:only-child) {
            margin-right: 0.5em;
            margin-left: 0;
        }

        .button:hover i:first-child:not(:only-child) {
            transform: rotate(-15deg);
        }

        .button i:last-child:not(:only-child) {
            margin-left: 0.5em;
            margin-right: 0;
        }

        .button:hover i:last-child:not(:only-child) {
            transform: translateX(6px);
        }

        .button--ico i:first-child:last-child {
            margin: 0;
        }

        .button--ico:hover i {
            transform: scale(1.15);
        }

        /* HOVER Y ACTIVE */
        .button:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.2);
        }

        .button:active {
            transform: translateY(-1px);
        }

        /* TAMAÑOS ESCALABLES */
        .button--s { font-size: 0.85rem; }
        .button--xl { font-size: 1.25rem; }

        /* VARIANTES DE FORMA */
        .button--ico {
            padding: 0;
            width: 2.5em;
            height: 2.5em;
            border-radius: 50%;
            display:inline-flex;
            align-items: center;
            justify-content: center;
        }

        .button--s.button--ico {
            width: 28px;
            height: 28px;
        }

        /* EFECTOS DE BORDE */
        .button--border-gradient {
            background: white;
            color: var(--dark);
            z-index: 1;
            --grad: linear-gradient(45deg, #4f46e5, #ec4899);
        }

        .button--border-gradient::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: var(--radiusButton); 
            padding: 2px;
            background: var(--grad);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            transition: var(--transition);
        }

        .button--border-gradient:hover::before {
            padding: 3px;
            filter: hue-rotate(90deg);
        }

        /* EFECTOS DE RELLENO */
        .button[class*="sweep"]::before,
        .button--radial::before {
            content: "";
            position: absolute;
            z-index: 2;
            background: rgba(255, 255, 255, 0.2);
            transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
        }

        .button--sweep-right::before { 
            top: 0; left: 0; right: 0; bottom: 0; 
            transform: scaleX(0); 
            transform-origin: left; 
        }

        .button--sweep-right:hover::before { transform: scaleX(1); }

        .button--radial::before {
            top: 50%; left: 50%;
            width: 2em; height: 2em;
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0);
            transition: transform 0.6s ease;
        }

        .button--radial:hover::before { transform: translate(-50%, -50%) scale(15); }

        /* EFECTOS DE SUBRAYADO */
        .button--underline {
            background: var(--light); 
            color: var(--dark);
        }

        .button--underline::after {
            content: "";
            position: absolute;
            bottom: 0;
            height: 3px;
            background: var(--primary);
            transition: var(--transition);
        }

        .button--underline-center::after { 
            left: 50%; width: 0; 
            transform: translateX(-50%); 
            pointer-events:none; 
        }

        .button--underline-center:hover::after { width: 100%; }

        /* NEUMORFISMO */
        .button--neumorph {
            background: #f0f2f5;
            color: var(--dark);
            box-shadow: 6px 6px 12px #d1d9e6, -6px -6px 12px #ffffff;
        }

        .button--neumorph:hover {
            box-shadow: 2px 2px 5px #d1d9e6, -2px -2px 5px #ffffff;
            transform: translateY(-2px);
        }

        /* SHINE */
        .button--shine {
            background: var(--primary);
            color: white;
        }

        .button--shine::after {
            content: "";
            position: absolute;
            top: 0; left: -100%;
            width: 50%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transform: skewX(-25deg);
            z-index: 2;
        }

        .button--shine:hover::after {
            left: 150%;
            transition: all 0.6s ease;
        }

        /* ESTILO OUTLINED */
        .button--outlined {
            color: var(--dark);
            box-shadow: inset 0 0 0 2px currentColor;
            background: transparent;
        }

        .button--outlined:hover {
            box-shadow: inset 0 0 0 2px var(--primary);
            color: var(--primary);          
            transform: translateY(-2px);
        }

        .button--outlined-bold {
            color: var(--dark);
            background: transparent;
            box-shadow: inset 0 0 0 3px var(--dark);
        }

        .button--outlined-bold:hover {
            background: var(--dark);
            color: white;
            box-shadow: inset 0 0 0 3px var(--dark);
            transform: translateY(0);
        }

        /* ESTILO OPACITY */
        .button--opacity {
            background: var(--primary);
            color: var(--primary-invert);
        }

        .button--opacity:hover {
            filter: brightness(1.2) opacity(0.9);
            transform: translateY(-2px);
        }

/* color white: fondo blanco y texto del color de la web (salvo outlined y opacity) */
.button--white:not(.button--outlined):not(.button--opacity) {
    background: #fff;
    color: var(--font-color);
}

.button--white.button--outlined {
    color: #fff;
}


/* bg primary */
.button--primary {
    background: var(--primary);
    color: var(--primary-invert);
}

/* bg secondary */
.button--secondary {
    background: var(--secondary);
    color: var(--secondary-invert);
}

/* bg dark */
.button--dark {
    background: var(--dark);
    color: var(--dark-invert);
}

/* bg light */
.button--light {
    background: var(--light);
    color: var(--light-invert);
}

/* outlined border */
.button--outlined {
    box-shadow: inset 0 0 0 1px currentColor;
}
.button--outlined::before {
    background:rgba(255,255,255,0.1);
}
/* bg whatsapp */
.button--whatsapp {
    background: var(--color-wa);
    color: #fff;
}

/* bg facebook */
.button--fb {
    background: var(--color-fb);
    color:#fff;
}

/* bg instagram */
.button--ig {
    background: var(--color-ig);
    color: #fff;
}

/* ---------------------------------------------------------------
   BOTÓN INTERACTIVO (.button--draw)

   Línea tenue en reposo; al hover un trazo recorre todo el
   contorno y el icono se dibuja mediante un barrido.

   --draw-color: color del boton (fondo solido).
   --draw-fg:    color del texto/icono.
   --draw-line:  color del borde (mas oscuro que el fondo; en los claros, primary).
   Se usa rgb(from ... r g b) para que el fondo sea solido aunque la
   variable de color lleve canal alfa (p. ej. --secondary).
   --------------------------------------------------------------- */

.button--draw {
    --draw-color: var(--primary);
    --draw-fg: var(--primary-invert);
    --draw-solid: rgb(from var(--draw-color) r g b / 1);
    --draw-line: color-mix(in srgb, var(--draw-solid) 55%, #000);

    position: relative;
    overflow: hidden;

    background: var(--draw-solid);
    color: var(--draw-fg);
    border-radius: var(--radiusBox);
    padding: 0.9em 1.8em;

    box-shadow:
        inset 0 0 0 1px
        var(--draw-line);
}


/* ---------------------------------------------------------------
   CONTEXTOS SOBRE FONDOS DE COLOR
   --------------------------------------------------------------- */

.section--primary .button--draw,
.section--dark .button--draw,
.sectionImage--2 .button--draw,
.icon-txt--card .button--draw {
    --draw-color: var(--primary-invert);
    --draw-fg: var(--primary);
    --draw-line: var(--primary);
}


/* ---------------------------------------------------------------
   VARIANTES DE COLOR
   --------------------------------------------------------------- */

.button.button--draw.button--primary {
    --draw-color: var(--primary);
    --draw-fg: var(--primary-invert);
    --draw-line: color-mix(in srgb, var(--draw-solid) 55%, #000);
}

.button.button--draw.button--secondary {
    --draw-color: var(--secondary);
    --draw-fg: var(--secondary-invert);
    --draw-line: color-mix(in srgb, var(--draw-solid) 55%, #000);
}

.button.button--draw.button--dark {
    --draw-color: var(--dark);
    --draw-fg: var(--dark-invert);
    --draw-line: color-mix(in srgb, var(--draw-solid) 55%, #000);
}

/* Claros: el borde va en primary para que se note */
.button.button--draw.button--light {
    --draw-color: var(--light);
    --draw-fg: var(--primary);
    --draw-line: var(--primary);
}

.button.button--draw.button--white {
    --draw-color: #fff;
    --draw-fg: var(--primary);
    --draw-line: var(--primary);
}

.button.button--draw:is(
    .button--primary,
    .button--secondary,
    .button--dark,
    .button--light,
    .button--white
) {
    background: var(--draw-solid);
    color: var(--draw-fg);
}


/* ---------------------------------------------------------------
   HOVER / FOCUS
   El fondo sigue solido y se acerca un poco al color del texto.
   --------------------------------------------------------------- */

.button--draw:hover,
.button--draw:focus-visible,
.button--draw:active,
.button.button--draw:is(
    .button--primary,
    .button--secondary,
    .button--dark,
    .button--light,
    .button--white
):is(:hover, :focus-visible) {
    transform: none;
    color: var(--draw-fg);

    box-shadow:
        inset 0 0 0 1px
        var(--draw-line);

    background:
        color-mix(in srgb, var(--draw-solid) 88%, var(--draw-fg));
}


/* ---------------------------------------------------------------
   TRAZO DEL CONTORNO
   Cada pseudo es el borde completo de la píldora (forma final, sin
   deformarse); lo que se anima es su recorte (clip-path):
   ::before descubre la mitad de arriba de izquierda a derecha y,
   a continuación, ::after la mitad de abajo de derecha a izquierda.
   --------------------------------------------------------------- */

.button--draw::before,
.button--draw::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 2;

    box-sizing: border-box;
    border: 2PX solid var(--draw-line);
    border-radius: inherit;

    pointer-events: none;
    opacity: 0;

    /* Al salir: se desvanece y, ya invisible, vuelve a ocultarse */
    transition:
        opacity 0.25s ease,
        clip-path 0s 0.25s;
}


/* Mitad de arriba: oculta desde la derecha */

.button--draw::before {
    clip-path: inset(0 100% 50% 0);
}


/* Mitad de abajo: oculta desde la izquierda */

.button--draw::after {
    clip-path: inset(50% 0 0 100%);
}


/* ---------------------------------------------------------------
   PRIMERA MITAD DEL TRAZO (arriba, izquierda → derecha)
   --------------------------------------------------------------- */

.button--draw:hover::before,
.button--draw:focus-visible::before {
    opacity: 1;
    clip-path: inset(0 0 50% 0);

    transition:
        opacity 0s,
        clip-path 0.25s linear;
}


/* ---------------------------------------------------------------
   SEGUNDA MITAD DEL TRAZO (abajo, derecha → izquierda)
   --------------------------------------------------------------- */

.button--draw:hover::after,
.button--draw:focus-visible::after {
    opacity: 1;
    clip-path: inset(50% 0 0 0);

    transition:
        opacity 0s,
        clip-path 0.25s linear 0.25s;
}


/* ---------------------------------------------------------------
   ICONO
   Oculto visualmente en reposo pero conserva su espacio.
   --------------------------------------------------------------- */

.button.button--draw i {
    transform: none;
    opacity: 0;

    clip-path: inset(0 100% 0 0);

    transition:
        opacity 0.25s ease,
        clip-path 0s 0.25s;
}


/* ---------------------------------------------------------------
   ICONO AL ENTRAR
   El segundo selector iguala el peso de ".button:hover i:first-child /
   :last-child:not(:only-child)" para anular su giro/desplazamiento.
   --------------------------------------------------------------- */

.button--draw:hover i,
.button--draw:focus-visible i,
.button.button--draw:is(:hover, :focus-visible) i:not(:only-child) {
    transform: none;
    opacity: 1;

    clip-path: inset(0 0 0 0);

    transition:
        clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
        opacity 0.5s ease 0.15s;
}


/* ---------------------------------------------------------------
   DISPOSITIVOS SIN HOVER (movil / tablet)
   Con "animate animate--scroll" en el boton, base.js le pone
   .animate--is-animated al entrar en pantalla: aqui ese estado hace
   lo mismo que el hover (trazo del contorno + icono) y se queda fijo.
   Uso: <a class="button button--draw animate animate--scroll">
   --------------------------------------------------------------- */

@media (hover: none) {

    .button--draw.animate--is-animated::before {
        opacity: 1;
        clip-path: inset(0 0 50% 0);

        transition:
            opacity 0s 1s,
            clip-path 0.25s linear 1s;
    }

    .button--draw.animate--is-animated::after {
        opacity: 1;
        clip-path: inset(50% 0 0 0);

        transition:
            opacity 0s 1.25s,
            clip-path 0.25s linear 1.25s;
    }

    .button.button--draw.animate--is-animated i {
        opacity: 1;
        clip-path: inset(0 0 0 0);

        transition:
            clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.15s,
            opacity 0.5s ease 1.15s;
    }
}


/* ---------------------------------------------------------------
   MOVIMIENTO REDUCIDO
   --------------------------------------------------------------- */

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

    .button--draw::before,
    .button--draw::after,
    .button--draw:hover::before,
    .button--draw:hover::after,
    .button--draw i,
    .button--draw:hover i,
    .button--draw.animate--is-animated::before,
    .button--draw.animate--is-animated::after,
    .button.button--draw.animate--is-animated i {
        transition: none;
    }
}


/* ---------------------------------------------------------------
   BOTON RELLENO (.button--fill) - alternativa a button--draw
   Solido, con el radio asimetrico de la web (tres esquinas redondeadas y
   una pequena). El icono va en una "ficha" a la derecha; si el boton no
   lleva <i>, la ficha muestra una flecha. Al hover el fondo cambia de
   color (invierte los colores) y la ficha se invierte.
   Variantes: button--primary (defecto), --secondary, --dark, --light, --white.
   Uso: <a class="button button--fill button--primary"><span>Texto</span></a>
   --------------------------------------------------------------- */

.button.button--fill:not(.button--outlined) {
    --fill-bg: var(--primary);
    --fill-fg: var(--primary-invert);
    --fill-hover-bg: rgb(from var(--secondary) r g b / 1);
    --fill-hover-fg: var(--secondary-invert);
    --fill-r: calc(var(--radiusButton) * 2);
    --fill-chip: 2.4em;
    --fill-pad: 0.5em;
    display: inline-flex;
    align-items: center;
    gap: 1.25em;
    padding: var(--fill-pad) var(--fill-pad) var(--fill-pad) 1.6em;
    min-height: calc(var(--fill-chip) + var(--fill-pad) * 2);
    background: var(--fill-bg);
    color: var(--fill-fg);
    border-radius: var(--fill-r) var(--fill-r) var(--fill-r) calc(var(--radiusButton) * 0.5);
    box-shadow: none;
    transform: none;
    transition: background 350ms ease, color 350ms ease;
}

/* Variantes (la especificidad gana a .button--white y compania) */
.button.button--fill.button--secondary:not(.button--outlined) {
    --fill-bg: rgb(from var(--secondary) r g b / 1);
    --fill-fg: var(--secondary-invert);
    --fill-hover-bg: var(--primary);
    --fill-hover-fg: var(--primary-invert);
}

.button.button--fill.button--dark:not(.button--outlined) {
    --fill-bg: var(--dark);
    --fill-fg: var(--dark-invert);
    --fill-hover-bg: rgb(from var(--secondary) r g b / 1);
    --fill-hover-fg: var(--secondary-invert);
}

.button.button--fill.button--light:not(.button--outlined) {
    --fill-bg: var(--light);
    --fill-fg: var(--primary);
    --fill-hover-bg: var(--primary);
    --fill-hover-fg: var(--primary-invert);
}

.button.button--fill.button--white:not(.button--outlined) {
    --fill-bg: #fff;
    --fill-fg: var(--primary);
    --fill-hover-bg: var(--primary);
    --fill-hover-fg: var(--primary-invert);
}

.button.button--fill:is(:hover, :focus-visible) {
    background: var(--fill-hover-bg);
    color: var(--fill-hover-fg);
    transform: none;
    box-shadow: none;
}

/* Ficha del icono (el <i> del boton o, si no hay, una flecha) */
.button.button--fill > i,
.button.button--fill:not(:has(> i))::after {
    order: 2;
    flex-shrink: 0;
    width: var(--fill-chip);
    height: var(--fill-chip);
    margin: 0;
    display: grid;
    place-items: center;
    font-size: 0.9em;
    border-radius: calc(var(--fill-r) * 0.6) calc(var(--fill-r) * 0.6) calc(var(--fill-r) * 0.6) 3px;
    background: color-mix(in srgb, var(--fill-fg) 16%, transparent);
    color: var(--fill-fg);
    position: relative;
    z-index: 3;
    transform: none;
    transition: background 450ms ease, color 450ms ease, transform 450ms cubic-bezier(.22,.8,.28,1);
}

.button.button--fill:not(:has(> i))::after {
    content: "\f061";
    font-family: var(--awesome);
    font-weight: 300;
    line-height: 1;
}

/* Al hover la ficha se invierte y crece un poco */
.button.button--fill:is(:hover, :focus-visible) > i,
.button.button--fill:not(:has(> i)):is(:hover, :focus-visible)::after {
    background: var(--fill-hover-fg);
    color: var(--fill-hover-bg);
    transform: scale(1.08);
}

.button.button--fill > span {
    position: relative;
    z-index: 3;
}

/* En las bandas (fondo --secondary) el hover pasa a blanco en vez de beige */
.sectionImage--2 .button.button--fill:not(.button--outlined):is(.button--primary, .button--dark, :not([class*="button--"])) {
    --fill-hover-bg: #fff;
    --fill-hover-fg: var(--primary);
}

/* si ademas lleva button--opacity, sin su filtro de brillo al hover */
.button.button--fill.button--opacity:hover {
    filter: none;
}

.button.button--fill:focus-visible {
    outline: 2px solid var(--fill-hover-bg);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .button.button--fill,
    .button.button--fill > i,
    .button.button--fill::after {
        transition: none;
    }
}


/***************************
TEXTOS
**************************/
p {
    margin: 0 0 1.25rem;
}

p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   SUBITEM
   Las superficies (fondo, bordes, sombras) no se escriben en cada variante:
   salen de tokens que cada contexto reescribe segun el fondo del section.
   --fade-bg es el color del degradado de corte del desplegable.
   ========================================================================== */

/* Contexto por defecto: section de fondo BLANCO */
.subitem {
    --subitem-bg: var(--light); /* relleno de accent y soft */
    --subitem-bg-card: #fff; /* relleno de card */
    --subitem-border: color-mix(in srgb, var(--font-color) 10%, transparent);
    --subitem-border-hover: color-mix(in srgb, var(--font-color) 15%, transparent);
    --subitem-shadow: color-mix(in srgb, var(--dark) 5%, transparent);
    --subitem-title: var(--font-color);
    --subitem-text: color-mix(in srgb, var(--font-color) 80%, transparent);
    --subitem-accent: var(--primary); /* linea, filete y botones de realce */
    --subitem-accent-fg: var(--primary-invert);

    border-radius: var(--radiusBox);
    position: relative;
}

.subitem:not(:last-child) {
    margin-bottom: 1.25rem;
}

.subitem .desplegables + .button {
    padding: 6px 12px;
    height: 32px;
    font-size: 0.95rem;
    font-weight: inherit;
    margin: 0;
}

/* Section clara: la caja pasa a blanco para despegarse del fondo */
.section--light .subitem,
.section--halflight .subitem,
.section--gradient .subitem {
    --subitem-bg: #fff;
    --subitem-bg-card: #fff;
    --subitem-border: color-mix(in srgb, var(--dark) 8%, transparent);
    --subitem-border-hover: color-mix(in srgb, var(--dark) 16%, transparent);
}

/* Section oscura o de color: la caja se levanta aclarando el color del
   section. Opaco y no transparente, porque el degradado del desplegable
   tiene que poder tapar el texto.
   (--bg y --filter no entran: ahi el contenido va en .container--box) */
.section--dark .subitem {
    --subitem-base: var(--dark);
}
.section--primary .subitem {
    --subitem-base: var(--primary);
    /* el acento dorado desapareceria sobre su propio color: pasa al invert */
    --subitem-accent: var(--primary-invert);
    --subitem-accent-fg: var(--primary);
}
.section--secondary .subitem {
    --subitem-base: var(--secondary);
}

.section--dark .subitem,
.section--primary .subitem,
.section--secondary .subitem {
    --subitem-bg: color-mix(in srgb, var(--subitem-base) 88%, #fff);
    --subitem-bg-card: color-mix(in srgb, var(--subitem-base) 88%, #fff);
    --subitem-border: color-mix(in srgb, var(--dark-invert) 18%, transparent);
    --subitem-border-hover: color-mix(in srgb, var(--dark-invert) 35%, transparent);
    --subitem-shadow: color-mix(in srgb, var(--dark) 20%, transparent);
    --subitem-title: inherit;
    --subitem-text: inherit;
}

/* ==========================================================================
   1. .subitem--accent (dorado elegante)
   ========================================================================== */
.subitem--accent {
    --fade-bg: var(--bg-component);
    padding: 1rem;
    background-color: var(--bg-component);
    border-left: 4px solid var(--accent-color);
    border-radius: 0 var(--radiusBox) var(--radiusBox) 0;
    box-shadow: var(--component-shadow);
}

.subitem--accent .desplegables + .button {
    background: none;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
}

.subitem--accent .desplegables + .button:hover,
.subitem--accent .desplegables + .button:focus-visible {
    background-color: var(--accent-color);
    color: var(--subitem-accent-fg);
}

/* ==========================================================================
   2. .subitem--card (tarjeta elevada con sombra suave)
   ========================================================================== */
.subitem--card {
    --fade-bg: var(--item-bg);
    padding: 1rem;
    background-color: var(--item-bg);
    border: 1px solid var(--component-line);
    box-shadow: var(--component-shadow);
}

.subitem--card .desplegables + .button {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid var(--accent-color);
    background: none;
    padding: 4px 8px;
    border-radius: 0;
    color: var(--accent-color);
}

.subitem--card .desplegables + .button:hover,
.subitem--card .desplegables + .button:focus-visible {
    background-color: var(--accent-color);
    color: var(--subitem-accent-fg);
}

/* ==========================================================================
   3. .subitem--soft (suave pastel / neutro)
   ========================================================================== */
.subitem--soft {
    --fade-bg: var(--bg-component);
    padding: 1rem;
    background-color: var(--bg-component);
    border: 1px solid var(--component-line);
    /* el filete superior es la marca de la variante: si lleva el mismo gris
     que el borde de 1px no se lee, asi que sube al tono de contraste */
    border-top: 4px solid var(--component-line-strong);
}

.subitem--soft .title {
    color: var(--subitem-title);
}

.subitem--soft .desplegables p {
    color: var(--subitem-text);
}

.subitem--soft .desplegables + .button {
    background: var(--component-line);
    border: 1px solid var(--component-line-strong);
    color: inherit;
}

.subitem--soft .desplegables + .button:hover,
.subitem--soft .desplegables + .button:focus-visible {
    background: var(--component-line-strong);
}


.blockquote {
    color:var(--primary);
    font-weight:var(--bold1);
    font-style:italic;
    margin: 0 0 1.25rem;
    display:flex;
}

.blockquote .title {
margin:0 0 0.5rem;
}
.blockquote .title ~ p {
    color: var(--secondary);
}

.blockquote:before {
    content: '';
    width: 60px;
    height: 1px;
    background: var(--primary);
    display: block;
    margin-top: 10px;
    margin-right: 0.5rem;
    flex-shrink: 0;
}
.blockquote:last-child {
    margin-bottom: 0;
}

/*
Titulos
*/
.title {
    font-family: var(--font2);
    line-height: 1.25em;
    margin: 0 0 0.5em;
    font-weight: var(--bold2);
    text-wrap: balance;
    --font-size: calc(var(--min-size) * 1px + (var(--max-size) - var(--min-size)) * (100vw - var(--container-min) * 1px) / (var(--container-max) - var(--container-min)));
    font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}
.subtitle:not(:first-child) {
    margin: -0.4em 0  1em 0;
}

.subtitle {
    line-height: var(--line-height);
    margin: 0 0 0.5em;
    font-weight: var(--bold1);
    font-size: 0.9rem;
    color: var(--secondary);
}

.section:has(.cols) .title:after{
    display:none;
}
.title:last-child {
    margin:0;
}


.title--1 {
        --max-size: 34;
        --min-size: 27;
        --title-bar: linear-gradient(90deg, var(--primary), var(--secondary));
}

    /* Acento sobre los title--1: barra primary que se funde en secondary */
    .title--1::before {
        content: "";
        display: block;
        width: 3.5rem;
        height: 4px;
        margin-bottom: 0.25em;
        border-radius: 4px;
        background: var(--title-bar);
    }

    .title--1.font--center::before,
    .font--center .title--1::before,
    .error404 .title--1::before {
        margin-inline: auto;
    }

/* Sobre fondos de color la barra arranca en secondary para que se vea */
.section--primary .title--1,
.section--dark .title--1,
.sectionImage .title--1 {
    --title-bar: linear-gradient(90deg, var(--secondary), color-mix(in srgb, var(--secondary) 30%, transparent));
}

.title--2 {
    --max-size: 30;
    --min-size: 25;
}

.title--3 {
    --max-size: 24;
    --min-size: 22;
    font-family: var(--font2);
    font-weight: var(--bold2);
}

.title--4 {
    --max-size: 22;
    --min-size: 20;
    font-family:var(--font2);
    font-weight:var(--bold2);
}


.family--primary {
    font-family: var(--font1);
}

.family--secondary {
    font-family: var(--font2);
}

.font--xs, .font--s, .font--m, .font--l, .font--xl, .font--xxl, .font--3xl {
    --font-size: calc(var(--min-size) * 1px + (var(--max-size) - var(--min-size)) * (100vw - var(--container-min) * 1px) / (var(--container-max) - var(--container-min)));
    font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}


.font--3xl {
    --max-size: 60;
    --min-size: 48;
}

.font--xxl {
    --max-size: 48;
    --min-size: 40;
}

.font--xl {
    --max-size: 36;
    --min-size: 28;
}

.font--l {
    --max-size: 32;
    --min-size: 24;
}

.font--m {
    --max-size: 24;
    --min-size: 20;
}

.font--s {
    --max-size: 20;
    --min-size: 18;
}

.font--xs {
    --max-size: 14;
    --min-size: 12;
}

.font--center {
text-align:center;
}
.font--primary {
    color:var(--primary);
}
.font--secondary {
    color: var(--secondary);
}
.font--invert {
    color: var(--primary-invert);
}
.font--base {
    color: var(--font-color);
}

/***************************
LISTAS
**************************/
.list {
    list-style:none;
}
.list li:not(:last-child) {
    margin: 0 0 0.4rem;
}

/*
Lista contacto
*/
.list-contact {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
}

.list-contact__title {
    margin-bottom: 0.4rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.4rem;
    font-weight:var(--bold1);
    display:block;
}

.list-contact:not(:last-child) {
    margin: 0 0 1.25rem;
}

/* list-contact--iconos: cada dato en una fila tipo tarjeta con el icono en
   un recuadro primary con el radio asimetrico de los iconos de la web */
.list-contact--iconos {
    grid-gap: 0.75rem;
    margin-top: 1.5rem;
}

    .list-contact--iconos > li {
        display: grid;
        grid-template-columns: 3rem 1fr;
        column-gap: 1rem;
        align-items: center;
        padding: 0.85rem 1rem;
        background: var(--light);
        border: 1px solid rgb(from var(--secondary) r g b / 0.6);
        border-radius: calc(var(--radiusButton) * 2);
        text-align: left;
        transition: border-color 300ms ease, transform 300ms ease;
    }

        .list-contact--iconos > li:hover {
            border-color: var(--primary);
            transform: translateX(4px);
        }

        .list-contact--iconos > li > i {
            grid-row: span 2;
            width: 3rem;
            height: 3rem;
            display: grid;
            place-items: center;
            font-size: 1.15rem;
            background: var(--primary);
            color: var(--primary-invert);
            border-radius: var(--radiusBox) var(--radiusBox) var(--radiusBox) var(--radiusButton);
        }

        .list-contact--iconos > li > .list-contact__title {
            margin: 0;
            padding: 0;
            border: 0;
            font-family: var(--font1);
            font-size: 0.8rem;
            font-weight: var(--bold1);
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: color-mix(in srgb, var(--font-color) 60%, transparent);
        }

        .list-contact--iconos > li > span:not(.list-contact__title) {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.5rem;
            font-weight: var(--bold1);
            color: var(--primary);
            overflow-wrap: anywhere;
        }

            .list-contact--iconos > li > span:not(.list-contact__title) a:not(.button) {
                color: var(--primary);
                text-decoration: none;
            }

/* Pagina de contacto: formulario en tarjeta calida (como dual--radius) */
.section--contacto .dual__item--box .dual__inner {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: var(--radiusImg);
    border: 1px solid rgb(from var(--secondary) r g b / 0.7);
    background: linear-gradient(135deg, var(--light) 40%, color-mix(in srgb, rgb(from var(--secondary) r g b / 1) 35%, var(--light)));
    --fade-bg: var(--light);
}

    .section--contacto .dual__item--box .title::before {
        content: "";
        display: block;
        width: 3.5rem;
        height: 4px;
        margin: 0 auto 0.75em;
        border-radius: 4px;
        background: linear-gradient(90deg, var(--primary), var(--secondary));
    }

/* Mapa dentro del contenedor con el radio asimetrico de la web */
.mapa--radius {
    overflow: hidden;
    border-radius: var(--radiusImg);
    border: 1px solid rgb(from var(--secondary) r g b / 0.7);
    background: var(--light);
}
.list-contact li ul {
    list-style: none;
}

.list-contact li ul li {
    display: inline-block;
}

.list-contact li ul:not(.buttons__social) li:not(:first-child):not(:has(.button:not(.button--ico)))::before {
    content: '-';
    display: inline-block;
    margin: 0 4px;
}

/*
Lista items
*/
.list-items {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.list-items:not(:last-child) {
    margin: 0 0 1.25rem;
}

.list-items li {
    display: inline-flex;
    padding: 0.5rem 1rem;
    background: var(--primary);
    color: var(--primary-invert);
    border-radius: var(--radiusBox);
    margin: 0.2rem;
}
.list-items--light li {
    background: var(--light);
    color: var(--light-invert);
}

.list-items--dark li {
    background: var(--dark);
    color: var(--dark-invert);
}


/*
Lista puntos
*/
.list-points {
    padding-left: 1.25rem;
}

.list-points:not(:last-child) {
    margin: 0 0 1.25rem;
}

.list-points li:not(:last-child) {
    margin: 0 0 0.5rem;
}

.list-points ul {
    margin: 0 0 0 1.25rem;
    margin-top: 0.5rem;
}

.list-points--contact > li:not(:last-child) {
    margin: 0 0 1.25rem;
}

/*
Lista iconos
*/
.list-icons {
    margin: 0;
    list-style: none;
}

.list-icons:not(:last-child) {
    margin: 0 0 1.25rem;
}

.list-icons li {
    display: flex;
}

.list-icons li:not(:last-child) {
    margin: 0 0 0.8rem;
}

.list-icons:not(.list-icons--customize) li:before{
    content: '\f00c';
    font-family: var(--awesome);
    margin-right: 0.5rem;
    font-weight: 600;
    color: var(--primary);
}
.list-icons--customize li i:not(.fab):not(.fa-brands) {
    content: '\f00c';
    font-family: var(--awesome);
    margin-right: 0.5rem;
	line-height:var(--line-height);
    color: var(--secondary);
}


.list-icons--inline {
    display: flex;
    flex-wrap: wrap;
    margin-left: -1rem;
}

.list-icons.list-icons--inline li {
    padding: 0.5rem 1rem;
    margin:0;
}

/*
Lista marcas
*/
.list-marcas {
    display: flex;
    gap:0.5rem;
    justify-content:center;
    flex-wrap:wrap;
    list-style: none;
    text-align: center;
    font-size:0.9rem;
    line-height:1.25em;
}
.list-marcas:not(:last-child) {
    margin: 0 0 1.25rem;
}

.list-marcas li {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    width: 100%;
    display: block;
    width:calc(50% - 0.5rem);
    padding: 0.25rem;
    max-width:200px;
    transition: border-color 300ms ease;
}

.list-marcas li a{
    text-decoration:none;
    color:inherit;
    display:block;
}


.list-marcas li span {
    display: block;
    padding: 0.25rem 0.25rem 0;
}

.list-marcas li:has(a):hover {
    border: 1px solid rgba(0,0,0,0.5);
}

.list-marcas img {
    display: block;
    aspect-ratio:1;
    background:#fff;
    width: 100%;
    object-fit:contain;
	padding:12px;
}
@media screen and (min-width: 601px) {
    .list-marcas li {
        width:calc(25% - 0.5rem);
    }
}
@media screen and (min-width: 821px) {
    .list-marcas li {
        width:calc(20% - 0.5rem);
    }
}

/*
Lista n�meros
*/
.list-numbers {
    list-style:none;
    counter-reset:section;
    display:grid;
    grid-template-columns:1fr;
    grid-gap:var(--padding-h);
}

.list-numbers li {
    display:flex;
    text-align:left;
    margin:0;
}
.list-numbers li .title{
    padding-bottom:0.25em;
    border-bottom:1px solid rgba(0,0,0,0.1);
}

.list-numbers li:before{
	min-width:38px;
    counter-increment: section;
    content:counter(section);
    font-weight:var(--bold1);
    font-size:4rem;
    color:var(--primary);
    margin-right:1rem;
    line-height:1em;
}

@media screen and (min-width: 821px) {
    .list-numbers {
        grid-template-columns:1fr 1fr;
    }
}

/*
Lista timeline
*/
.list-timeline:not(:last-child) {
    margin: 0 0 1.8rem;
}
.list-timeline li {
    padding-bottom: 1.75rem;
    border-left: 1px solid var(--primary);
    position: relative;
    padding-left: 1.5rem;
    margin-left: 1rem;
    list-style: none;
}

.list-timeline li:before {
    content: "";
    width: 16px;
    height: 16px;
    background: #fff;
    border: 1px solid var(--primary);
    box-shadow: 3px 3px 0 var(--primary);
    border-radius: 50%;
    position: absolute;
    left: -9px;
    top: 0;
}
.list-timeline .title{
 margin:0 0 0.5em;
}

.list-timeline li:last-child {
    border: 0;
    padding-bottom: 0;
}


/*
Lista cajas
*/
.list-box {
	--number: var(--mobile);
	display: grid;
	grid-template-columns: repeat(var(--number), 1fr);
    --list-gap:max(1rem, min(calc(2.5 * var(--padding-h) / var(--number)), var(--padding-h))) ;
    grid-gap: var(--list-gap);
}
.list-box:not(:last-child) {
    margin: 0 0 1.8rem;
}
.list-box li {
	list-style: none;
	padding: var(--padding-inner);
}

.list-box li:nth-child(2n+1) {
	background: var(--primary);
	color: var(--primary-invert);
}

.list-box li:nth-child(2n) {
	background: var(--secondary);
	color: var(--secondary-invert);
}

@media screen and (min-width: 601px) {
	.list-box {
		--number: var(--tablet);
		grid-template-columns: repeat(var(--tablet), 1fr);
	}
}

@media screen and (min-width: 1024px) {
	.list-box {
		--number: var(--pc);
		grid-template-columns: repeat(var(--pc), 1fr);
	}
}

/***************************
IMAGENES
**************************/
.img-responsive {
    display: block;
    width: 100%;
    border-radius:var(--radiusImg);
}

.img-cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius:var(--radiusImg);
}
.img-contain {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius:var(--radiusImg);
}

/***************************
VIDEOS IFRAME
**************************/
.iframe {
    position: relative;
    padding-bottom: 56.25%;
    overflow: hidden;
}

.iframe > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/***************************
MAPA
**************************/
.mapa {
    height: 50vh;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
}

.mapa iframe {
    width: 100%;
    display: block;
    flex: 1;
}

/***************************
FLECHA GO TOP
**************************/
.go-top {
    opacity: .8;
    cursor: pointer;
    z-index: 3;
    position: fixed;
    bottom: 0;
    right: 8px;
    display: none;
    width: 42px;
    height: 42px;
    text-align: center;
    background-color: var(--primary);
    opacity:0.90;
    color: white;
    border-radius: 4px 4px 0 0;
    justify-content: center;
    align-items: center;
    transition: transform 300ms ease;
}

.go-top i {
    font-size: 26px;
    display: block;
}

/***************************
FORMULARIO
**************************/
.formulario {
    background: #f5f5f5;
    padding: 20px;
}

/***************************
IFRAMES
**************************/
.iframe {
    position: relative;
    padding-bottom: 56.25%;
    overflow: hidden;
}

.iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/***************************
GRID COLUMNS
**************************/
/* Columnas con grid, hay que especificar en el html las variables. style="--mobile: 2; --tablet: 4; --pc: 6" */
.grid-auto:not(:first-child){margin-top: min(var(--padding-v), 1.5rem);}
.grid-auto:not(:last-child){margin-bottom: min(var(--padding-v),1.5rem);}
.grid-auto {
    --number: var(--mobile);
    display: grid;
    grid-template-columns: repeat(var(--number),1fr);
    --grid-gap: clamp(1.25rem, calc(4vw / var(--number)), 2rem);
    grid-gap: var(--grid-gap);
}
.grid-auto > * {
    display:flex;
    flex-direction:column;
}


/***************************
FLEX COLUMNS
**************************/
/* Columnas con grid, hay que especificar en el html las variables. style="--mobile: 2; --tablet: 4; --pc: 6" */
.flex-auto:not(:first-child){margin-top: -0.5rem;}
.flex-auto:not(:last-child){margin-bottom: -0.5rem;}
.flex-auto {
    --number: var(--mobile); 
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    --flex-gap:  clamp(1.25rem, calc(4vw / var(--number)), 2rem);
    margin: calc((var(--flex-gap) * -1)/2);
}
.flex-auto > * {
    display: flex;
    flex-direction: column;
    
    width: calc(100% / var(--number));
    padding:calc(var(--flex-gap)/2);
}



/************************
GRID_MOSAICO
************************/
.grid-mosaico {
    --gap: 0.75rem;
    display: grid;
    grid-gap: var(--gap);
}

.grid-mosaico > * {
    display: flex;
    flex-direction: column;
}

.grid-mosaico[data-type="text"] {
    --gap: 1.5rem;
}



@media screen and (max-width: 600px) {
    .grid-mosaico[data-type="text"] {
        grid-template-columns: repeat(2, 1fr);
    }

    main .section .grid-mosaico[data-type="text"] > *[data-full-row-mv="true"],
    main .section .grid-mosaico[data-type="text"] > * {
        grid-column: span 2;
        grid-row:auto;
    }
}


.grid-mosaico {
    grid-template-columns: repeat(12, 1fr);
}
/* 1 elementos */
/****************/
.grid-mosaico[data-items="1"] > * {
    grid-column-start: 1;
    grid-column-end: 13;
}
/* 2 elementos */
/****************/
.grid-mosaico[data-items="2"] > *:first-child, .grid-mosaico[data-items="2"] > *:nth-child(2n-1) {
    grid-column-start: 1;
    grid-column-end: 9;
}

.grid-mosaico[data-items="2"] > *:nth-child(2n) {
    grid-column-start: 9;
    grid-column-end: 13;
}

.grid-mosaico[data-items="2"] > *:nth-child(4n-1) {
    grid-column-start: 1;
    grid-column-end: 5;
}

.grid-mosaico[data-items="2"] > *:nth-child(4n) {
    grid-column-start: 5;
    grid-column-end: 13;
}
/* 3 elementos */
/****************/
.grid-mosaico[data-items="3"] > *:first-child, .grid-mosaico[data-items="3"] > *:nth-child(3n-2) {
    grid-column-start: 1;
    grid-column-end: 9;
    grid-row: span 2;
}

.grid-mosaico[data-items="3"] > *:nth-child(2), .grid-mosaico[data-items="3"] > *:nth-child(3n-1) {
    grid-column-start: 9;
    grid-column-end: 13;
}

.grid-mosaico[data-items="3"] > *:nth-child(3n) {
    grid-column-start: 9;
    grid-column-end: 13;
}

.grid-mosaico[data-items="3"] > *:nth-child(6n-1) {
    grid-column-start: 5;
    grid-column-end: 13;
    grid-row: span 2;
}

.grid-mosaico[data-items="3"] > *:nth-child(6n), .grid-mosaico[data-items="3"] > *:nth-child(6n-2) {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row: span 1;
}

/* 3B elementos */
/****************/
.grid-mosaico[data-items="3b"] > *:first-child, .grid-mosaico[data-items="3b"] > *:nth-child(3n-2) {
    grid-column-start: 1;
    grid-column-end: 13;
}

.grid-mosaico[data-items="3b"] > *:nth-child(2), .grid-mosaico[data-items="3b"] > *:nth-child(3n-1) {
    grid-column-start: 1;
    grid-column-end: 6;
}

.grid-mosaico[data-items="3b"] > *:nth-child(3n) {
    grid-column-start: 6;
    grid-column-end: 13;
}

.grid-mosaico[data-items="3b"] > *:nth-child(6n-1) {
    grid-column-start: 1;
    grid-column-end: 8;
}

.grid-mosaico[data-items="3b"] > *:nth-child(6n-2) {
    grid-column-start: 1;
    grid-column-end: 13;
}

.grid-mosaico[data-items="3b"] > *:nth-child(6n) {
    grid-column-start: 8;
    grid-column-end: 13;
}

/* 4 elementos */
/****************/
.grid-mosaico[data-items="4"] > *:first-child, .grid-mosaico[data-items="4"] > *:nth-child(4n-3) {
    grid-column-start: 1;
    grid-column-end: 8;
}

.grid-mosaico[data-items="4"] > *:nth-child(2), .grid-mosaico[data-items="4"] > *:nth-child(4n-2) {
    grid-column-start: 8;
    grid-column-end: 13;
}

.grid-mosaico[data-items="4"] > *:nth-child(3), .grid-mosaico[data-items="4"] > *:nth-child(4n-1) {
    grid-column-start: 6;
    grid-column-end: 13;
    grid-row: 2;
}

.grid-mosaico[data-items="4"] > *:nth-child(4n) {
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row:2;
}
/* 4B elementos */
/****************/
@media screen and (max-width: 820px) {
    .grid-mosaico[data-items="4b"] {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-mosaico[data-items="4b"] > *:first-child, .grid-mosaico[data-items="4b"] > *:nth-child(4n-3) {
        grid-column-start: 1;
        grid-column-end: 2;
    }

    .grid-mosaico[data-items="4b"] > *:nth-child(2), .grid-mosaico[data-items="4b"] > *:nth-child(4n-2) {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row: span 2;
    }

    .grid-mosaico[data-items="4b"] > *:nth-child(3), .grid-mosaico[data-items="4b"] > *:nth-child(4n-1) {
        grid-column-start: 1;
        grid-column-end: 2;
        
    }

    .grid-mosaico[data-items="4b"] > *:nth-child(4n) {
        grid-column-start: 1;
        grid-column-end: 3;
    }
}

@media screen and (min-width: 821px) {
    .grid-mosaico[data-items="4b"] > *:first-child, .grid-mosaico[data-items="4b"] > *:nth-child(4n-3) {
        grid-column-start: 1;
        grid-column-end: 5;
    }

    .grid-mosaico[data-items="4b"] > *:nth-child(2), .grid-mosaico[data-items="4b"] > *:nth-child(4n-2) {
        grid-column-start: 5;
        grid-column-end: 9;
    }

    .grid-mosaico[data-items="4b"] > *:nth-child(3), .grid-mosaico[data-items="4b"] > *:nth-child(4n-1) {
        grid-column-start: 9;
        grid-column-end: 13;
        grid-row: span 2;
    }

    .grid-mosaico[data-items="4b"] > *:nth-child(4n) {
        grid-column-start: 1;
        grid-column-end: 9;
    }
}
/* 5 elementos */
/****************/
.grid-mosaico[data-items="5"] > *:first-child, .grid-mosaico[data-items="5"] > *:nth-child(5n-4) {
    grid-column-start: 1;
    grid-column-end: 7;
}

.grid-mosaico[data-items="5"] > *:nth-child(2), .grid-mosaico[data-items="5"] > *:nth-child(5n-3) {
    grid-column-start: 7;
    grid-column-end: 13;
}

.grid-mosaico[data-items="5"] > *:nth-child(3), .grid-mosaico[data-items="5"] > *:nth-child(5n-2) {
    grid-column-start: 1;
    grid-column-end: 5;
}

.grid-mosaico[data-items="5"] > *:nth-child(4), .grid-mosaico[data-items="5"] > *:nth-child(5n-1) {
    grid-column-start: 5;
    grid-column-end: 9;
}

.grid-mosaico[data-items="5"] > *:nth-child(5n) {
    grid-column-start: 9;
    grid-column-end: 13;
}
/* 5b elementos */
/****************/
.grid-mosaico[data-items="5b"] > *:first-child, .grid-mosaico[data-items="5b"] > *:nth-child(3n-2) {
    grid-column-start: 1;
    grid-column-end: 9;
    grid-row: span 2;
}

.grid-mosaico[data-items="5b"] > *:nth-child(2), .grid-mosaico[data-items="5b"] > *:nth-child(3n-1) {
    grid-column-start: 9;
    grid-column-end: 13;
}

.grid-mosaico[data-items="5b"] > *:nth-child(3n) {
    grid-column-start: 9;
    grid-column-end: 13;
}

.grid-mosaico[data-items="5b"] > *:nth-child(6n-1) {
    grid-column-start: 7;
    grid-column-end: 13;
    grid-row: span 1;
}

.grid-mosaico[data-items="5b"] > *:nth-child(6n), .grid-mosaico[data-items="5b"] > *:nth-child(6n-2) {
    grid-column-start: 1;
    grid-column-end: 7;
    grid-row: span 1;
}


@media screen and (min-width: 821px) {
    .grid-mosaico[data-items="5b"] > *:first-child, .grid-mosaico[data-items="5b"] > *:nth-child(5n-4) {
        grid-column-start: 1;
        grid-column-end: 7;
        grid-row: span 2;
    }

    .grid-mosaico[data-items="5b"] > *:nth-child(2), .grid-mosaico[data-items="5b"] > *:nth-child(5n-3) {
        grid-column-start: 7;
        grid-column-end: 10;
    }

    .grid-mosaico[data-items="5b"] > *:nth-child(3), .grid-mosaico[data-items="5b"] > *:nth-child(5n-2) {
        grid-column-start: 10;
        grid-column-end: 13;
    }

    .grid-mosaico[data-items="5b"] > *:nth-child(4), .grid-mosaico[data-items="5b"] > *:nth-child(5n-1) {
        grid-column-start: 7;
        grid-column-end: 10;
    }

    .grid-mosaico[data-items="5b"] > *:nth-child(5n) {
        grid-column-start: 10;
        grid-column-end: 13;
    }

    .grid-mosaico[data-items="5b"] > *:nth-child(10n-4) {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row: span 1;
    }

    .grid-mosaico[data-items="5b"] > *:nth-child(10n-3) {
        grid-column-start: 4;
        grid-column-end: 7;
    }

    .grid-mosaico[data-items="5b"] > *:nth-child(10n-2) {
        grid-column-start: 7;
        grid-column-end: 13;
        grid-row: span 2;
    }

    .grid-mosaico[data-items="5b"] > *:nth-child(10n-1) {
        grid-column-start: 1;
        grid-column-end: 4;
    }

    .grid-mosaico[data-items="5b"] > *:nth-child(10n) {
        grid-column-start: 4;
        grid-column-end: 7;
    }
}


/* 6 elementos */
/****************/
.grid-mosaico[data-items="6"] > *:first-child, .grid-mosaico[data-items="6"] > *:nth-child(6n-5) {
    grid-column-start: 1;
    grid-column-end: 9;
    grid-row: span 2;
}

.grid-mosaico[data-items="6"] > *:nth-child(2), .grid-mosaico[data-items="6"] > *:nth-child(6n-4) {
    grid-column-start: 9;
    grid-column-end: 13;
}

.grid-mosaico[data-items="6"] > *:nth-child(3), .grid-mosaico[data-items="6"] > *:nth-child(6n-3) {
    grid-column-start: 9;
    grid-column-end: 13;
}

.grid-mosaico[data-items="6"] > *:nth-child(4), .grid-mosaico[data-items="6"] > *:nth-child(6n-2) {
    grid-column-start: 1;
    grid-column-end: 5;
}

.grid-mosaico[data-items="6"] > *:nth-child(5), .grid-mosaico[data-items="6"] > *:nth-child(6n-1) {
    grid-column-start: 5;
    grid-column-end: 9;
}

.grid-mosaico[data-items="6"] > *:nth-child(6n) {
    grid-column-start: 9;
    grid-column-end: 13;
}

.grid-mosaico[data-items="6"] > *:nth-child(12n-4) {
    grid-column-start: 5;
    grid-column-end: 13;
    grid-row: span 2;
}

.grid-mosaico[data-items="6"] > *:nth-child(9n), .grid-mosaico[data-items="6"] > *:nth-child(12n-5) {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row: span 1;
}
/* 6b elementos */
/****************/
.grid-mosaico[data-items="6b"] > *:first-child, .grid-mosaico[data-items="6b"] > *:nth-child(6n+1) {
    grid-column-start: 1;
    grid-column-end: 8;
    grid-row: span 2;
}

.grid-mosaico[data-items="6b"] > *:nth-child(2), .grid-mosaico[data-items="6b"] > *:nth-child(6n+2) {
    grid-column-start: 8;
    grid-column-end: 13;
}

.grid-mosaico[data-items="6b"] > *:nth-child(3), .grid-mosaico[data-items="6b"] > *:nth-child(6n+3) {
    grid-column-start: 8;
    grid-column-end: 13;
}

.grid-mosaico[data-items="6b"] > *:nth-child(4), .grid-mosaico[data-items="6b"] > *:nth-child(6n+4) {
    grid-column-start: 1;
    grid-column-end: 6;
}

.grid-mosaico[data-items="6b"] > *:nth-child(5), .grid-mosaico[data-items="6b"] > *:nth-child(6n+5) {
    grid-column-start: 6;
    grid-column-end: 13;
    grid-row: span 2;
}

.grid-mosaico[data-items="6b"] > *:nth-child(6), .grid-mosaico[data-items="6b"] > *:nth-child(6n+6) {
    grid-column-start: 1;
    grid-column-end: 6;
}


@media screen and (min-width: 821px) {
    .grid-mosaico[data-items="6b"] > *:first-child, .grid-mosaico[data-items="6b"] > *:nth-child(6n+1) {
        grid-column-start: 1;
        grid-column-end: 7;
        grid-row: span 2;
    }

    .grid-mosaico[data-items="6b"] > *:nth-child(2), .grid-mosaico[data-items="6b"] > *:nth-child(6n+2) {
        grid-column-start: 7;
        grid-column-end: 10;
    }

    .grid-mosaico[data-items="6b"] > *:nth-child(3), .grid-mosaico[data-items="6b"] > *:nth-child(6n+3) {
        grid-column-start: 10;
        grid-column-end: 13;
    }

    .grid-mosaico[data-items="6b"] > *:nth-child(4), .grid-mosaico[data-items="6b"] > *:nth-child(6n+4) {
        grid-column-start: 7;
        grid-column-end: 13;
        grid-row: span 2;
    }

    .grid-mosaico[data-items="6b"] > *:nth-child(5), .grid-mosaico[data-items="6b"] > *:nth-child(6n+5) {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row: span 1;
    }

    .grid-mosaico[data-items="6b"] > *:nth-child(6), .grid-mosaico[data-items="6b"] > *:nth-child(6n+6) {
        grid-column-start: 4;
        grid-column-end: 7;
    }
}

/* 8 elementos */
/****************/
/* Zigzag: filas de dos piezas que alternan ancha (2/3) y estrecha (1/3),
   como la variante de 2 elementos. Se repite cada 4 elementos.
   [      1      ][  2  ]
   [  3  ][      4      ]
   [      5      ][  6  ]
   [  7  ][      8      ]  */
.grid-mosaico[data-items="8"] > *:nth-child(4n+1) {
    grid-column-start: 1;
    grid-column-end: 9;
}

.grid-mosaico[data-items="8"] > *:nth-child(4n+2) {
    grid-column-start: 9;
    grid-column-end: 13;
}

.grid-mosaico[data-items="8"] > *:nth-child(4n+3) {
    grid-column-start: 1;
    grid-column-end: 5;
}

.grid-mosaico[data-items="8"] > *:nth-child(4n+4) {
    grid-column-start: 5;
    grid-column-end: 13;
}

/* Movil (<=720px): en el zigzag la pieza estrecha se queda en 1/3 y el texto
   no cabe. Aqui todas las piezas miden media anchura (el texto cabe) y el
   mosaico se mantiene con alturas: una pieza alta de dos filas junto a dos
   bajas apiladas, alternando el lado. El titulo se reduce un poco.
   [  1  ][  2  ]
   [  1  ][  3  ]
   [  4  ][  5  ]
   [  6  ][  5  ]
   [  7  ][  8  ]  */
@media screen and (max-width: 720px) {
    .grid-mosaico[data-items="8"] > *:nth-child(8n+1),
    .grid-mosaico[data-items="8"] > *:nth-child(8n+4),
    .grid-mosaico[data-items="8"] > *:nth-child(8n+6),
    .grid-mosaico[data-items="8"] > *:nth-child(8n+7) {
        grid-column-start: 1;
        grid-column-end: 7;
    }

    .grid-mosaico[data-items="8"] > *:nth-child(8n+2),
    .grid-mosaico[data-items="8"] > *:nth-child(8n+3),
    .grid-mosaico[data-items="8"] > *:nth-child(8n+5),
    .grid-mosaico[data-items="8"] > *:nth-child(8n+8) {
        grid-column-start: 7;
        grid-column-end: 13;
    }

    /* piezas altas (dos filas) */
    .grid-mosaico[data-items="8"] > *:nth-child(8n+1),
    .grid-mosaico[data-items="8"] > *:nth-child(8n+5) {
        grid-row: span 2;
    }

    .grid-mosaico[data-items="8"] .title {
        --max-size: 20;
        --min-size: 17;
        hyphens: auto;
        overflow-wrap: break-word;
    }
}

/* PC (>=1024px): el zigzag se duplica en horizontal. 24 columnas = dos
   bloques de 12; los elementos 1-4 van a la izquierda y los 5-8 a la
   derecha, y "dense" hace que suban a las mismas filas (8 items en 2 filas).
   [    1    ][ 2 ][    5    ][ 6 ]
   [ 3 ][    4    ][ 7 ][    8    ]  */
@media screen and (min-width: 1024px) {
    .grid-mosaico[data-items="8"] {
        grid-template-columns: repeat(24, 1fr);
        grid-auto-flow: dense;
    }

    .grid-mosaico[data-items="8"] > *:nth-child(8n+5) {
        grid-column-start: 13;
        grid-column-end: 21;
    }

    .grid-mosaico[data-items="8"] > *:nth-child(8n+6) {
        grid-column-start: 21;
        grid-column-end: 25;
    }

    .grid-mosaico[data-items="8"] > *:nth-child(8n+7) {
        grid-column-start: 13;
        grid-column-end: 17;
    }

    .grid-mosaico[data-items="8"] > *:nth-child(8n+8) {
        grid-column-start: 17;
        grid-column-end: 25;
    }
}

.grid-mosaico > * > div{
	flex:1;
	display:flex;
	flex-direction:column;
}

/***************************
MAIN
**************************/
main {
    min-height:50vh;
}



/***************************
RESPONSIVE
**************************/

/* Estilos >= 600px */
@media screen and (min-width: 601px) {

    /***************************
    GRID COLUMNS TABLET
    **************************/
    .grid-auto { --number: var(--tablet); }

    /***************************
    FLEX COLUMNS
    **************************/
    .flex-auto { --number: var(--tablet); }

    /*
    Lista contacto
    */
    .list-contact--double {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: var(--padding-h);
        grid-row-gap: 1rem;
    }
	

}


/* Estilos >= 1024px */
@media screen and (min-width: 1024px) {

    .columns{
        column-count:2;
        column-gap:30px;
        text-align:left;
    }	
    /***************************
    GRID COLUMNS TABLET
    **************************/
    .grid-auto { --number: var(--pc); }

    /***************************
    FLEX COLUMNS
    **************************/
    .flex-auto { --number: var(--pc); }
}

/* Estilos >= 1280px */
@media screen and (min-width: 1280px) {

    /***************************
    GRID COLUMNS TABLET
    **************************/
    .grid-auto { --number: var(--pc-xl,var(--pc)); }

    /***************************
    FLEX COLUMNS
    **************************/
    .flex-auto { --number: var(--pc-xl,var(--pc)); }
}