/*

Id: pg-wc-19
Nombre: Wc19
Fecha: 04/03/25
Sistema: Site Mater
*/



/***************************
VARIABLES
**************************/
:root {
    --font-size: 1rem; /* tamaño base de la fuente */
    --line-height: 1.5; /* interlineado base de la fuente */
    --container-min: 360;
    --container-max: 1280;
    --font-color: #2c2c2c;
    --primary: #d02643; /* colores */
    --accent: var(--primary);
    --primary-invert: #fff;
    --secondary: #333;
    --secondary-invert: #fff;
    --light: #f5f5f5;
    --light2: #f8eeee;
    --light-invert: var(--font-color);
    --dark: #333;
    --dark-invert: #fff;
    --dark-transparent: rgba(0,0,0,0.8); /* color negro transparente */
    --white-transparent: rgba(255,255,255,0.8); /* color blanco transparente */
    --swiper-theme-color: var(--primary) !important;
    --bg-gradient: radial-gradient(circle, rgba(238,242,243,1) 0%, rgba(238,238,238,1) 50%, rgba(179,193,204,1) 100%);
    --color-fb: #0865FE;
    --color-ig: #C536A4;
    --color-tw: #0F1419;
    --color-wa: #1BD741;
    --radiusButton: 3px;
    --radiusBox: 3px;
    --radiusImg: 0;
    --radius1: 3px;
    --radius2: var(--radiusBox);
    --bold1: 600;
    --bold2: 700;
    --bold3: 500;
    --font1: 'Montserrat', sans-serif;
    --font2: 'Playfair Display', serif;
    --awesome: 'Font Awesome 7 Pro', 'Font Awesome 6 Pro';
    --max-width: 1280px; /* 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: 90px; /* Tamaño del logo, se aumenta en los @media */
    --app-height: 100vh; /* Altura del disposivo */
    --header-height: 0px; /* Altura de la cabecera */
}

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

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

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

*, *: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;
}

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

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

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);
    line-height: var(--line-height); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}

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

body.no-scroll {
    overflow: hidden;
}

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



/***************************
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);
}

.section--secondary {
    background: var(--secondary);
    color: var(--secondary-invert);
}
.section--secondary a:not(.buttonLink){
    color: var(--secondary-invert);
}
.section--light {
    background: var(--light);
    color: var(--light-invert);
}
.section--dark {
    background: var(--dark);
    color: var(--dark-invert);
}
.section--dark a:not(.buttonLink){
    color: var(--dark-invert);
}

.section--gradient {
    background: var(--bg-gradient);
}
.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--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.6);
    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.5);
}
.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-h);
    background: var(--white-transparent);
}

.block {
    display: inline-block
}

/***************************
BUTTON
**************************/
.gb-text i:first-child{margin-right: 4px;}
.gb-text i:last-child{margin-left: 4px;}

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

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

.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: 10%;
    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.35em;
    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);
}
.title:last-child {
    margin:0;
}


.title--1 {
    --max-size: 36;
    --min-size: 28;
}

.title--2 {
    --max-size: 28;
    --min-size: 24;
}

.title--3 {
    --max-size: 24;
    --min-size: 22;
}

.title--4 {
    --max-size: 20;
    --min-size: 18;
}


.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 {
 margin:0 0 0 1.25rem;
}
.list li:not(:last-child) {
    margin: 0 0 0.4rem;
}

/* Lista timeline */
.list-timeline {
  list-style: none;
  padding-left: 0;
  margin: 0;
  counter-reset: item;
  margin-top:2rem;
  max-width: 964px;
  margin-left:auto;
  margin-right: auto;
}

.list-timeline > li {
  counter-increment: item;
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

.list-timeline > li::before {
  content: counter(item);
  background-color: #c0392b;
  color: white;
  font-weight: bold;
  min-width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  transform:translateY(-4px);
}

/* div contenedor del texto + ol anidado */
.list-timeline > li > div {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ol anidado */
.list-timeline ol {
  list-style: none;
  padding-left: 0;
  counter-reset: subitem;
  margin:0;
}

.list-timeline ol li {
  counter-increment: subitem;
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

.list-timeline ol li::before {
  content: counter(subitem);
  
  background-color: #f9e0de;
  color: #c0392b;
  font-weight: bold;
  min-width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
  transform:translateY(0px);
}

/*
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 li ul {
    list-style: none;
}

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

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



    /*
Lista items
*/
    .list-items {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        margin: 0;
        gap:4px;
        justify-content: center;
    }
    .list-items li:hover{
        opacity: 0.75;
    }

    .list-items li a{
        color:inherit;
        text-decoration: none;
    }
    .list-items li {
        display: inline-flex;
        padding: 0.35rem 0.75rem;
        background: var(--primary);
        color: var(--primary-invert);
        border-radius: var(--radiusBox);
        transition: all 300ms ease;
    }

    .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 strong{
        margin-left:4px;
    }
    .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(--primary);
    }


    .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;
        }
    }





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

    .img-cover, .img-cover img {
        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);
    }

    .separator{
            height:1px;
            background: #ddd;
            margin:min(3rem,var(--padding-v)) 0;
            border:0;
    }
    /***************************
MAPA
**************************/
    .mapa {
        height: 30vh;
        min-height: 260px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #f5f5f5;
    }

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



/***************************
IFRAMES
**************************/
    .iframe {
        position: relative;
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }

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