@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/nunito-sans-v5-latin-regular.woff2') format('woff2'),
       url('../fonts/nunito-sans-v5-latin-regular.woff') format('woff');
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/nunitosans-bold.woff2') format('woff2'),
       url('../fonts/nunitosans-bold.woff') format('woff');
}


@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/opensans-regular-webfont.woff2') format('woff2'),
       url('../fonts/opensans-regular-webfont.woff') format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/opensans-bold-webfont.woff2') format('woff2'),
       url('../fonts/opensans-bold-webfont.woff') format('woff');
}


*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
}


img, picture, video, canvas/*, svg*/ {
  display: block; /* Requerido para que margin: auto funcione en imágenes */
  max-width: 100%; /* Responsividad */
  height: auto; /* Mantiene proporción */
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

.main-ubicaciones img {
  border: 0.6rem solid #ffffff;  
}

.centrado {
  margin: 0 auto;
}


/*CSS opcional para contenedores
Si el contenedor tiene un ancho fijo o máximo, asegúrate de que sea fluido o adaptable:*/
/*.image-container {
    max-width: 100%; Limita el ancho del contenedor
    overflow: hidden; Oculta cualquier desbordamiento si es necesario
}*/


input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

.main-contacto > .titular{
  grid-area: titular;
  width: 100%;
  text-align: center;
  padding: 5rem 0 1rem 0;
}

h1 {
font-family: 'Open Sans', sans-serif;
font-size: 5.5rem;
line-height: 5rem;
font-weight: 700;
color: #27465a;
width: 100%;
text-align: center;
padding: 0;
margin:0;
text-transform: none;
margin-bottom: 2rem;
text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
}

.inicio-principal > h1 {
font-family: 'Open Sans', sans-serif;
font-size: 5rem;
line-height: 5rem;
font-weight: 700;
color: #fff;
text-transform: none;
}

.tit-modelo > h1 {
  font-weight: 700;
  font-size: 5rem;
  line-height: 5.5rem;
}

h2 {
font-family: 'Open Sans', sans-serif;
font-size: 2.4rem; 
color: #27465a;
line-height: 2.4rem;
margin-bottom: 2rem;
}

.main-ubicaciones h2 {
  text-align: left;
}
i
.wrapper-m > h2 {
  width: 100%;
  font-size: 3rem;
  line-height: 3rem;
  text-align: center;
  padding: 0rem 0 0rem 0;
  color: #Fab13d;
}

.main-ubicaciones h2 {
  text-transform: uppercase;
  color: #071355;
  text-align: center;
  margin-bottom: 0;
}


.caracteristicas-in > .plan {
  color: #ffffff;
}

.caracteristicas-in > h2 {
  text-align: left; 
  color: #ffffff;
  width: 100%;
}

.especificaciones-in > h2 {
  text-align: left; 
  color: #aa1717;
  width: 100%;
}


.inicio-ubi > h1, .inicio-ubi > h2 {
font-family: 'Open Sans', sans-serif;
font-size: 4rem;
line-height: 4rem;
font-weight: 700;
color: #000;
text-transform: none;
}

.inicio-unakasa svg {
    width: 20rem;
    height: 20rem;
   }


@media screen and (min-width: 768px) {
  .caracteristicas-in > h2, .especificaciones-in > h2 {
    color: #aa1717;
  }

.caracteristicas-in > .plan {
  color: #454545;
}

}




h3 {
font-family: 'Nunito Sans Bold', sans-serif;
font-size: 2rem; 
line-height: 2rem;
margin-bottom: 2rem;
}

p {
font-size: 1.6rem; 
line-height: 2.4rem;
font-weight: 400;
}

.strong {
  font-weight: 700;
}

.blan {
  color: #ffffff;
}

.intro > p {
font-size: 1.8rem; 
line-height: 2.7rem;
font-weight: 700;
}


a {color: #194057;}

a:link {}

a:visited {}

a:focus {}

a:hover {}

a:active {}


a, label, nav p {
  text-decoration: none;
}


ul {
  list-style: none;
}

.caracteristicas-in > ul {
  list-style-position: inside;
  list-style-type: disclosure-closed;
  font-size: 1.6rem; 
  line-height: 2.4rem;
  font-weight: 400;
  color: #ffffff;
}


.especificaciones-in > ul {
  list-style-position: inside;
  list-style-type: disclosure-closed;
  font-size: 1.6rem; 
  line-height: 2.4rem;
  font-weight: 400;
  color: #454545;
}

.caracteristicas-in > ul > li::marker, .especificaciones-in > ul > li::marker {
  color: #aa1717;
}



@media screen and (min-width: 768px) {
  .caracteristicas-in > ul, .especificaciones-in > ul {
    color: #454545;
  }

  /*.caracteristicas-in > ul > li::marker, .especificaciones-in > ul > li::marker {
    color: #aa1717;
  }*/
}


html {
font-size: 10px;
}

body {
font-family: 'Nunito Sans', sans-serif;
font-weight: 400;
color: #454545;
height: 100%;
text-rendering: optimizeLegibility;
background-color: #ffffff;
}

/* LAYOUT */
#grid-container {
    display:grid;
    grid-template-rows: 9rem auto min-content;
    grid-template-columns:100%;
    grid-template-areas:
    'header'
    'main'
    'footer';
    min-height:100vh;
    min-height:100svh;
}

header {
  background:#27465a;
  width:100%;
  z-index: 200;
}

.header-1 {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


main {
  display: grid;
  justify-items: center;
  width:100%;
}

/* COLORES DE FONDO PARA main  */
.bg-ubicaciones {
  background-color: #f0eeea;
}

.fondo-gris {
  background-color: #dce5e6;
}


footer {
    display: grid; /* Para asegurar que ocupe toda el área del viewport disponible */
    grid-template-areas: 'footer-container';
    grid-template-columns: 1fr ;
    background: #27465a;
    border-top: 5px solid #E0b774;
    padding: 2rem 0 0 0;
    width: 100%; /* Ocupa todo el ancho del viewport */
}

/* FIN LAYOUT */

/**********   MAIN INDEX   ************/


.main-inicio {
  display: grid;
  grid-template-areas:
  'inicio-principal'
  'inicio-videos'
  'inicio-modelos'
  'inicio-cuotas-desde'
  'inicio-ubi'
  'inicio-requisitos'
  'inicio-formulario';
  justify-items: center;
  width:100%;
}

.inicio-video{
    background: #27465a;
    padding: 60px 20px;
    width: 100%;
    display: grid;
}
.inicio-video video{
    max-width: 900px;
    display: block;
    margin: 0 auto;
}

.inicio-principal {
  display: grid;
  grid-template-areas:
  'principal-in';
  grid-area: inicio-principal;
  justify-items: center;
  align-items: start;
  width: 100%;
  /*background-color: #Fab13d;*/
  /*background-image: url('../img/central-inicio.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 5rem 0 4rem 0;
  min-height: 60rem;*/
}


.principal-in {
  display: grid;
  grid-area: principal-in;
  justify-self: center;
  align-items: start;
  width: 100%;
  /*background-color: #999;*/
  /*width: clamp(320px, 96vw, 767px);*/
}




@media screen and (min-width: 768px) {

}

.inicio-modelos {
  display: grid;
  grid-template-areas:
  'modelos-in';
  grid-area: inicio-modelos;
  justify-items: center;
  width: 100%;
  background-color: #2d9183;
  padding: 5rem 0 4rem 0;
}


.modelos-in {
  display: grid;
  grid-area: modelos-in;
  grid-template-areas:
  'modelos-in-titu'
  'modelos-in-texto1'
  'modelos-in-imagen1'
  'modelos-in-texto2'
  'modelos-in-imagen2'
  'modelos-in-texto3'
  'modelos-in-imagen3';
  justify-items: center;
  align-items: start;
  grid-row-gap: 4rem;
  width: clamp(320px, 96vw, 767px);
}

/*
.modelos-in > h2 {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-align: center;
font-size: 4.2rem; 
color: #27465a;
line-height: 4.6rem;
margin-bottom: 4rem;
}
*/


.modelos-in h2 {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
text-align: center;
font-size: 5.5rem; 
color: #fff;
line-height: 5rem;
margin-bottom: 5rem;
text-transform: none;
}

.modelos-in h2 {
  z-index: 5;
  position: relative;
  color: white;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 1);
  }



.modelos-in h3 {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-align: center;
font-size: 4rem; 
color: #fff;
line-height: 4rem;
margin-bottom: 1rem;
}

.modelos-in p {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-align: center;
font-size: 2rem; 
color: #fff;
line-height: 2.5rem;
margin-bottom: 3rem;
}

.modelos-in p.medida {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-align: center;
font-size: 3rem; 
color: #aef0c2;
line-height: 3rem;
margin-bottom: 2rem;
}


.button-modelos {
  font-size: 1.8rem;
  font-weight: 700;
  background: #1A5F62;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 15px; /* Espaciado interno del botón */
  cursor: pointer;
  transition: background 0.3s ease;
  margin: 0 20% 0 20%;
}

.modelos-in-titu {
  display: grid;
  grid-area: modelos-in-titu;
  width: 100%;
}



.modelos-in-imagen1 {
  display: grid;
  grid-area: modelos-in-imagen1;
  max-width: 33rem;
  justify-items: center;
}


.modelos-in-imagen1 img {
  border: 0.6rem solid #fff;
  width: 100%;
  object-fit: cover;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.modelos-in-imagen1 img:hover {
  transform: scale(1.03);
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.4);
}


.modelos-in-texto1 {
  display: grid;
  grid-area: modelos-in-texto1;
  text-align: center;
  max-width: 33rem;
}

.modelos-in-imagen2 {
  display: grid;
  grid-area: modelos-in-imagen2;
  justify-items: center;
  max-width: 33rem;
}

.modelos-in-imagen2 img {
  border: 0.6rem solid #fff;
  width: 100%;
  object-fit: cover;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.modelos-in-imagen2 img:hover {
  transform: scale(1.03);
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.4);
}

.modelos-in-texto2 {
  display: grid;
  grid-area: modelos-in-texto2;
  text-align: center;
  max-width: 33rem;
}




.modelos-in-imagen3 {
  display: grid;
  grid-area: modelos-in-imagen3;
  justify-items: center;
  max-width: 33rem;
}

.modelos-in-imagen3 img {
  border: 0.6rem solid #fff;
  width: 100%;
  object-fit: cover;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.modelos-in-imagen3 img:hover {
  transform: scale(1.03);
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.4);
}

.modelos-in-texto3 {
  display: grid;
  grid-area: modelos-in-texto3;
  text-align: center;
  max-width: 33rem;
}



/* Pantallas medianas: 2 columnas */
@media (min-width: 768px) and (max-width: 1199px) {
  .modelos-in {
    grid-template-areas:
    'modelos-in-titu modelos-in-titu'
    'modelos-in-imagen1 modelos-in-imagen2'
    'modelos-in-texto1 modelos-in-texto2'
    'modelos-in-imagen3 -'
    'modelos-in-texto3 -';
     grid-column-gap: 0.5rem;
      width: clamp(728px, 96vw, 960px);
  }
}

/* Pantallas grandes: 3 columnas */
@media (min-width: 1200px) {
  .modelos-in {
    grid-template-areas:
    'modelos-in-titu modelos-in-titu modelos-in-titu'
    'modelos-in-imagen1 modelos-in-imagen2 modelos-in-imagen3'
    'modelos-in-texto1 modelos-in-texto2 modelos-in-texto3';
    grid-column-gap: 0.5rem;
    width: clamp(1160px, 96vw, 1400px);
  }
}


/*********************** FIN MODELOS  **************/

.inicio-cuotas-desde {
  display: grid;
  grid-template-areas:
  'cuotas-desde-in';
  grid-area: inicio-cuotas-desde;
  grid-template-columns: 1fr;
  justify-items: center;
  width: 100%;
  background-color: #fff;
  padding: 5rem 0 4rem 0;
}


.cuotas-desde-in {
  display: grid;
  grid-area: cuotas-desde-in;
  grid-template-columns: 1fr;
  justify-items: center;
  /*width: 100%;*/
  background-color: #fff;
  width: clamp(320px, 96vw, 767px);
}


@media (min-width: 768px) and (max-width: 1023px) {
  .cuotas-desde-in {
    width: clamp(728px, 96vw, 960px);
  }
}


@media (min-width: 1024px) {
  .cuotas-desde-in {
    width: clamp(1014px, 96vw, 1200px);
  }
}



.inicio-ubi {
  display: grid;
  grid-template-areas:
  'ubi-in';
  grid-area: inicio-ubi;
  justify-items: center;
  width: 100%;
  background-color: #333;
  padding: 5rem 0 4rem 0;
}

.ubi-in {
  display: grid;
  grid-area: ubi-in;
  justify-self: center;
  /*width: 100%;*/
  /*background-color: #888;*/
  width: clamp(320px, 90vw, 767px);
}



@media screen and (min-width: 768px) {
  .ubi-in {
  display: grid;
  grid-area: ubi-in;
  justify-self: center;
  width: 100%;
  /*background-color: #888;*/
  width: clamp(728px, 96vw, 900px);
  }
}  



.ubi-in h2 {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
text-align: left;
font-size: 5rem; 
color: #Fab13d;
line-height: 5rem;
margin-bottom: 5rem;
text-transform: none;
}

.ubi-in h3 {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-align: left;
font-size: 4rem; 
color: #b0c15a;
line-height: 4rem;
margin-bottom: 1rem;
text-transform: none;
}


.ubi-in p {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-align: left;
font-size: 2rem; 
color: #fff;
line-height: 2.5rem;
margin-bottom: 3rem;
}

.ubi-in img {
  border: 0.6rem solid #fff;
margin-bottom: 4rem;
}



/* FORMULARIO  INICIO */




.inicio-formulario {
  display: grid;
  grid-template-areas:
  'formulario-in';
  grid-area: inicio-formulario;
  justify-items: center;
  width: 100%;
  background-color: #333;
  padding: 5rem 0;
}


.formulario-in {
  display: grid;
  grid-template-areas:
  'formulario-in-texto'
  'formulario';
  /*justify-items: center;*/
  align-items: start;
  grid-row-gap: 0;
  width: clamp(320px, 96vw, 767px);
  padding: 0 10% 0 10%;
}




.formulario-in > .formulario {
  grid-area: formulario;
  display: flex;
  width: 100%
  /*justify-content: start;*/
  /*padding: 0 0 5rem 0;*/
}



.formulario-in-texto {
  display: grid;
  grid-area: formulario-in-texto;
  max-width: 33rem;
  /*justify-items: center;*/
  padding-bottom: 3rem;
}

.formulario-in-texto > h2 > span.una {
  color: #fda10f;
}

.formini-container {
  /*background: #fff;
  padding: 20px;
  border: 0.05rem solid #999999;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);*/
  width: 100%;
  max-width: 700px;
  text-align: left;
}
/*
    .formini-container h2 {
      text-align: center;
      margin-bottom: 2rem;
      color: #333;
    }
*/
    .formini-container label {
      display: block;
      margin-bottom: 2rem;
    }

    .formini-container label > p {
      font-size: 1.6rem;
      margin-bottom: 0.5rem;
      font-weight: 700;
      color: #ffffff;
    }

    .formini-container label > p.form-invalid-data-info {
      font-size: 1.6rem;
      margin: 0.5rem 0 0 0;
      font-weight: 700;
      color: red;
    }


    .formini-container input,
    .formini-container textarea {
      width: 100%;
      padding: 10px;
      margin: 0;
      /*border: 1px solid #ddd;
      border-radius: 5px;*/
      font-size: 1.6rem;
      color: #ffffff;
      background-color: #4d4949;
    }

    .formini-container textarea {
      resize: none;
      height: 10rem;
    }

    .formini-container button {
      background-color: #27465a;
      color: #fff;
      border: none;
      padding: 1rem;
      font-size: 1.6rem;
      /*border-radius: 5px;*/
      cursor: pointer;
      width: 100%;
      transition: background-color 0.3s;
    }

    .formini-container button:hover {
      background-color: #3a6582;
    }

    input[name="celular"], input[name="direccion"] {
      display: none;
    }
/*
    position: absolute;
    left: -9999px;
*/


p.c-ob {
font-size: 1.3rem;
color: #ffffff;
margin: 1rem 0 0 0;
}




    /* Responsive Design */
    @media (max-width: 480px) {
      .formini-container {
        padding: 15px;
      }

      .formini-container h2 {
        font-size: 20px;
      }

      .formini-container input,
      .formini-container textarea {
        font-size: 14px;
      }

      .formini-container button {
        font-size: 14px;
      }
    }


@media screen and (min-width: 768px) {
  .formulario-in {
  display: grid;
  grid-template-areas:
  'formulario-in-texto formulario';
  justify-items: center;
  align-items: start;
  grid-row-gap: 0;
  width: clamp(728px, 96vw, 900px);
  padding: 0;
  }

.formulario-in-texto {
  padding-bottom: 0;
}

}  





.formulario-in-texto > p, .formulario-in-texto > h2 {
text-align: left;
color: #ffffff;
}

.formulario-in-texto > h2 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 3rem;
  line-height: 3.2rem;
  margin: 2rem 0 2rem 0;
}

/************* FIN FORMULARIO INICIO ***************/



.inicio-requisitos {
  display: grid;
  grid-template-areas:
  'requisitos-in';
  grid-area: inicio-requisitos;
  justify-items: center;
  width: 100%;
  background-color: #Fab13d;
  padding: 10rem 0 10rem 0;
}


.requisitos-in {
  display: grid;
  grid-template-areas:
  'requisitos-in-titu'
  'requisitos-in-imagen1'
  'requisitos-in-imagen2'
  'requisitos-in-imagen3'
  'requisitos-in-imagen4';
  grid-area: requisitos-in;
  justify-items: center;
  justify-self: center;
  /*background-color: #888;*/
  grid-row-gap: 4rem;
  width: clamp(320px, 96vw, 767px);
}


.requisitos-in-titu {
  display: grid;
  grid-area: requisitos-in-titu;
  justify-self: center;
  justify-items: center;
  width: 100%;
}

.requisitos-in-titu > h2 {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
text-align: center;
font-size: 5.5rem; 
color: #27465a;
line-height: 5rem;
margin-bottom: 4rem;
text-shadow: 4px 4px 0 rgba(255, 255, 255, 1);
}

.requisitos-in-imagen1 {
  display: grid;
  grid-area: requisitos-in-imagen1;
  width: 100%;
  justify-self: center;
  justify-items: center;
}

.requisitos-in-imagen2 {
  display: grid;
  grid-area: requisitos-in-imagen2;
    justify-self: center;
  justify-items: center;
  width: 100%;
}

.requisitos-in-imagen3 {
  display: grid;
  grid-area: requisitos-in-imagen3;
    justify-self: center;
  justify-items: center;
  width: 100%;
}


.requisitos-in-imagen4 {
  display: grid;
  grid-area: requisitos-in-imagen4;
    justify-self: center;
  justify-items: center;
  width: 100%;
}



/* Pantallas medianas: 2 columnas */
@media (min-width: 768px) and (max-width: 1023px) {
  .requisitos-in {
    grid-template-areas:
    'requisitos-in-titu requisitos-in-titu'
    'requisitos-in-imagen1 requisitos-in-imagen2'
    'requisitos-in-imagen3 requisitos-in-imagen4';
    grid-column-gap: 4rem;
    width: clamp(728px, 96vw, 960px);
  }
}

/* Pantallas grandes: 4 columnas */
@media (min-width: 1024px) {
  .requisitos-in {
    grid-template-areas:
    'requisitos-in-titu requisitos-in-titu requisitos-in-titu requisitos-in-titu'
    'requisitos-in-imagen1 requisitos-in-imagen2 requisitos-in-imagen3 requisitos-in-imagen4';
    grid-column-gap: 4rem;
    width: clamp(1014px, 96vw, 1200px);
  }
}

@media (max-width: 767px) {
  img {
    border: 0 !important;
  }
}

/****** UBICACIONES *******/

.main-ubicaciones {
  display: grid;
  grid-template-areas:
  'titular'
  'departamento-central'
  'mapa-central'
  'cuota-central'
  'departamento-concepcion'
  'mapa-concepcion'
  'cuota-concepcion';
  justify-items: center;
  justify-self: center;
  width: 96%;
}

 

.main-ubicaciones > .titular{
  grid-area: titular;
  width: 100%;
  padding: 5rem 0 4rem 0;
}

.main-ubicaciones > .departamento-central{
  grid-area: departamento-central;
  text-align: center;
  width: 100%;
  padding: 4rem 0.5rem 1rem 0.5rem;
}

.main-ubicaciones > .mapa-central {
  grid-area: mapa-central;
  width: 100%;
  margin: 0 0 3rem 0;
}


.main-ubicaciones > .cuota-central {
  grid-area: cuota-central;
  text-align: left;
  width: 100%;
  margin-bottom: 2rem;
  /*height: 10rem;
  display: flex;*/
  justify-content: left;
  /*align-items: center;*/
}

.main-ubicaciones > .departamento-concepcion{
  grid-area: departamento-concepcion;
  text-align: center;
  width: 100%;
  padding: 4rem 0.5rem 1rem 0.5rem;
}

.main-ubicaciones > .mapa-concepcion {
  grid-area: mapa-concepcion;
  width: 100%;
  margin: 0 0 3rem 0;
}

.main-ubicaciones > .cuota-concepcion {
  text-align: left;
  width: 100%;
  margin-bottom: 10rem;
  justify-content: left;
}




@media screen and (min-width: 900px) {
.main-ubicaciones {
  display: grid;
  grid-template-areas:
  'titular titular'
  'departamento-central departamento-concepcion'
  'mapa-central mapa-concepcion'
  'cuota-central cuota-concepcion';
  /*grid-template-rows: 9rem 3rem auto min-content;*/
  /*grid-template-columns: 100%;*/
  /*row-gap:2rem;*/
  grid-column-gap: 2rem;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  /*width: 100%;*/
  width: clamp(900px, 96vw, 1300px);
}




.main-ubicaciones > .cuota-central {
  margin-bottom: 10rem;
}



}



/****** FIN UBICACIONES *******/



/************* MODELOS ***************/


.main-modelos {
  display: grid;
  grid-template-areas:
  'titular'
  'intro'
  'cardsarea';
  justify-items: center;
  width: 100%;
  /*background-color: #Fab13d;*/
}


.main-modelos > .titular{
  grid-area: titular;
  width: 100%;
  /*background-color: #999999;*/
  padding: 5rem 0 1rem 0;
}

.main-modelos > .intro {
  grid-area: intro;
  text-align: center;
  width: 100%;
  padding-bottom: 8rem;
}

.main-modelos > .cardsarea {
  grid-area: cardsarea;
  text-align: center;
  width: 100%;
  padding-bottom: 4rem;
}


@media screen and (max-width: 480px) {
 /* .main-modelos {
    width: clamp(320px, 90vw, 480px);
  }*/

}

@media screen and (min-width: 481px) and (max-width: 767px) {
  .main-modelos {
    width: clamp(461px, 90vw, 767px);
  }
}

@media screen and (min-width: 768px) and (max-width: 1365px) {
  .main-modelos {
    width: clamp(768px, 80vw, 1023px);
  }
  .main-modelos > .intro {
    width: clamp(420px, 80vw, 660px);
  }

  .main-modelos > .cardsarea {
    width: clamp(420px, 80vw, 660px);
  }

}


@media screen and (min-width: 1366px)/* and (max-width: 1920px) */{
  .main-modelos, .mapa-contacto {
    width: clamp(1000px, 70vw, 1100px);
  }
    .main-modelos > .intro {
    width: clamp(520px, 80vw, 767px);
  }

  .main-modelos > .cardsarea {
    width: clamp(420px, 80vw, 660px);
  }

}
/************* FIN MODELOS ***************/

/************* MODELO ***************/

.main-modelo {
  display: grid;
  grid-template-areas:
  'tit-modelo'
  'caracteristicas-icono'
  'caracteristicas'
  'plano'
  'especificaciones'
  'fachada';
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto auto;
  justify-items: center;
  align-items: start;
  width: 100%;
}


.derecha {
  display: contents; /* Hace que sus hijos hereden el grid padre */
}

/* Establece el orden EXPLÍCITO para todos los elementos */
  .tit-modelo {
    order: 1;
  }
  .caracteristicas-icono {
    order: 2;
  }
  .caracteristicas {
    order: 3; /* Originalmente dentro de .right-column */
  }
  .plano {
    order: 4;
  }
  .especificaciones {
    order: 5; /* Originalmente dentro de .right-column */
  }
  .fachada {
    order: 6;
  }

.tit-modelo {
  grid-area: tit-modelo;
  padding: 3rem 0 2rem 0;
}

.caracteristicas-icono {
  grid-area: caracteristicas-icono;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  width: 36rem;
  text-align: center;
  padding: 0 0 2rem 0;
}

  /* Estilos para cada celda */
  .grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .grid-item svg {
    width: 3rem;
    height: 3rem;
   }

  .grid-item p {
    margin: 0rem 0 0rem 0; 
  }

  .grid-item p sup {
    font-size: 1.15rem;
  }


.caracteristicas {
  grid-area: caracteristicas;
  display: flex;
  justify-content: center;
  height: 100%;
  background-color: #27465a;
  padding: 4rem 0 4rem 0;
  width: 100%;
}


.caracteristicas-in {
  display: flex;
  flex-direction: column; /* Para apilar el contenido verticalmente */
  /*align-items: center;    Centra horizontalmente */
  text-align: left;     /* Centra el texto en cada línea */
  /*width: clamp(320px, 90vw, 480px);*/
  /*padding: 0 25% 0 25%;*/
  width: 30rem;  
}


.plano {
  grid-area: plano;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4rem 0;
}


  .especificaciones {
    grid-area: especificaciones;
    display: flex;
    flex-direction: column; /* Apila el contenido verticalmente */
    justify-content: center;
    align-items: flex-start;
    background-color: transparent;
    padding: 0 0 4rem 0;
    height: auto;
  }

.especificaciones-in {
  display: flex;
  flex-direction: column;
  /*align-items: center;*/
  text-align: left;
  /*padding: 0 25% 0 25%;*/
  width: 30rem;
}

@media screen and (min-width: 768px) {
  .especificaciones-in {
    width: auto;
  }
}

.fachada {
grid-area: fachada;
padding-bottom: 0;
}




@media screen and (min-width: 768px) {
  .main-modelo {
    display: grid;
    grid-template-areas:
      'tit-modelo tit-modelo tit-modelo'
      'caracteristicas-icono caracteristicas-icono caracteristicas-icono'
      'plano - derecha'
      'plano - derecha'
      'fachada fachada fachada';
    grid-template-columns: 10fr 1fr 10fr;
    grid-template-rows: auto auto auto auto auto;
    grid-column-gap: 2rem;
    justify-items: center;
    align-items: start;
    width: clamp(767px, 100vw, 767px);
  }



/* Nuevo contenedor para la columna derecha */
.derecha {
  grid-area: derecha;
  grid-column: 3;
  display: grid;
  grid-template-rows: auto auto; /* 2 filas independientes */
  gap: 0;
  align-content: start; /* Alinea todo arriba */
}



  .caracteristicas {
    grid-row: 1;
    display: flex;
    flex-direction: column; /* Apila el contenido verticalmente */
    justify-content: center; /* Centra verticalmente dentro de su propia celda */
    align-items: flex-start;
    background-color: transparent;
    padding: 4rem 0 4rem 0;
    height: auto;
  }


.caracteristicas-in {
  padding: 0;
}


.especificaciones {
    grid-row: 2;
    display: flex;
    flex-direction: column; /* Apila el contenido verticalmente */
    justify-content: center;
    align-items: flex-start;
    background-color: transparent;
    padding: 0 0 4rem 0;
    height: auto;
  }


.especificaciones-in {
  padding: 0;
}

.fachada {
padding-bottom: 5rem;
}


}





/************* FIN MODELOS ***************/





/************* NOSOTROS ***************/




.main-nosotros {
  display: grid;
  grid-template-areas:
  'unakasa-in';
  justify-items: center;
  /*justify-self: center;*/
  width: 100%;
  background-color: #295775;
  padding: 5rem 0 4rem 0;
}

.unakasa-in {
  display: grid;
  grid-area: unakasa-in;
  grid-template-areas:
  'unakasa-in-titu'
  'unakasa-in-body'
  'unakasa-in-features'
  'unakasa-in-img';
  grid-template-columns: 1fr;
  justify-items: center;
  /*justify-self: center;*/
  /*text-align: center;*/
  /*background-color: #999;*/
  row-gap: 3rem;
  width: clamp(320px, 90vw, 767px);
}

@media screen and (min-width: 768px) {
  .unakasa-in {
    display: grid;
    grid-area: unakasa-in;
    grid-template-areas:
    'unakasa-in-titu unakasa-in-img'
    'unakasa-in-body unakasa-in-img'
    'unakasa-in-features unakasa-in-img';
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 7rem;
    grid-row-gap: 2rem;
    justify-items: stretch;
    justify-self: center;
    /*text-align: center;*/
    width: clamp(728px, 90vw, 1200px);
  }
}

.unakasa-in img {
  /*border: 0.6rem solid #fff;*/
}


.unakasa-in-titu{
  grid-area: unakasa-in-titu;
  text-align: center;
  width: 100%;
  /*background-color: blueviolet;*/
}

.unakasa-in-titu > h2 {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-align: left;
font-size: 4.2rem; 
color: #fff;
line-height: 4.6rem;
margin-bottom: 2rem;
}

.unakasa-in-titu > h2 > span.viv {
  color: #fda10f;
}

.unakasa-in-body {
  grid-area: unakasa-in-body;
  text-align: center;
  width: 100%;
  /*background-color: yellow;*/
}

.unakasa-in-body > p {
font-weight: 400;
text-align: left;
font-size: 1.9rem; 
color: #fff;
line-height: 2.5rem;
margin-bottom: 1rem;
}



.unakasa-in-features {
  grid-area: unakasa-in-features;
  /*text-align: center;*/
  width: 100%;
  /*background-color: red;*/
}

.unakasa-in-features > ul > li {
  font-weight: 400;
  text-align: left;
  font-size: 2.4rem; 
  color: #fff;
  line-height: 3rem;
  margin-bottom: 1.5rem;
  color: #fff;
  list-style: none;
  padding-left: 3rem;
  position: relative;
}

.unakasa-in-features > ul > li::before {
  background: url("../img/check.svg") no-repeat;
  background-size: auto;
  -webkit-background-size: contain;
  background-size: contain;
  content: "";
  display: inline-block;
  height: 2.4rem;
  left: 0;
  position: absolute;
  top: 0.4rem;
  width: 2rem;
  box-sizing: inherit;
}




.unakasa-in-img{
  grid-area: unakasa-in-img;
  text-align: center;
  width: 100%;
}


/****** SLIDER ********/


.slider-nav::before {
  position: absolute;
  content: "";
  padding: 2rem;
  width: 5rem;
  height: 5rem;
}

.slider-nav-round .slider-nav::after, .slider-nav-square .slider-nav::after {
  background-color: var(--swiffy-slider-nav-dark);
  width: 4rem;
  height: 4rem;
  margin: .5rem;
}


/************* FIN NOSOTROS ***************/








/************* CONTACTO ***************/



.main-contacto {
  display: grid;
  grid-template-areas:
  'titular'  
  'formulario'
  'mapa'
  'direccion';
  grid-template-columns: 1fr;
  grid-column-gap: 2rem;
  justify-items: center;
  width: 100%;
}

.main-contacto > .titular{
  grid-area: titular;
  width: 100%;
  text-align: center;
  padding: 5rem 0 1rem 0;
}

.main-contacto > .titular > h1 {
  text-align: center;
}

.main-contacto > .formulario {
  grid-area: formulario;
  display: flex;
  justify-content: center;
  padding-bottom: 5rem;
}

.main-contacto > .direccion {
  grid-area: direccion;
  text-align: center;
  width: 100%;
  padding-bottom: 4rem;
}

.main-contacto > .direccion h2{
  margin: 2rem 0 1rem 0;
}

.main-contacto > .mapa {
  grid-area: mapa;
  text-align: center;
  width: 100%;
  padding-bottom: 4rem;
}


.main-contacto label > p.form-invalid-data-info {
      font-size: 1.6rem;
      margin: 0;
      font-weight: 700;
      color: red;
    }


@media screen and (min-width: 481px) and (max-width: 767px) {
  .main-contacto {
    width: clamp(461px, 90vw, 767px);
  }
}

@media screen and (min-width: 768px) and (max-width: 1365px) {
  .main-contacto {
    display: grid;
    grid-template-areas:
    'titular titular'  
    'mapa formulario'
    'direccion direccion';
    grid-template-columns: 2fr 1fr;
    grid-column-gap: 2rem;
    justify-items: left;
    width: clamp(768px, 95vw, 1365px);
  }

  .main-contacto > .titular{
  text-align: left;
  }

  .main-contacto > .titular > h1 {
  text-align: left;
  }

  .main-contacto > .formulario {
  text-align: left;
  padding-bottom: 1rem;
  }

  .main-contacto > .direccion {
  grid-area: direccion;
  text-align: left;
  padding-top: 4rem;
}

  .main-contacto > .mapa {
  text-align: left;

  }

}


@media screen and (min-width: 1366px)/* and (max-width: 1920px) */{
  .main-contacto {
  display: grid;
  grid-template-areas:
  'titular titular'  
  'mapa formulario'
  'direccion formulario';
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 2rem;
  justify-items: left;
  width: clamp(1150px, 85vw, 1200px);
  }

  .main-contacto > .mapa {
  width: clamp(520px, 80vw, 767px);
  }

  .main-contacto > .titular{
  text-align: left;
  }

  .main-contacto > .titular > h1 {
  text-align: left;
  }

  .main-contacto > .formulario {
  text-align: left;
  padding-bottom: 1rem;
  }

  .main-contacto > .direccion {
  text-align: left;
  }

  .main-contacto > .mapa {
  text-align: left;

  }

}


/***** mapa ********/

#map {
  position: relative;
  width: 100%; /* El ancho será siempre el 100% del contenedor */
  padding-bottom: 56.25%; /* Relación de aspecto 16:9 (altura / ancho * 100) */
  height: 0; /* Altura inicial 0 para que solo se use el padding */
  overflow: hidden;
}

#map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Ajusta al ancho del contenedor */
  height: 100%; /* Ajusta a la altura calculada por el padding */
  border: 0;
}

.leaflet-control-attribution.leaflet-control a:first-child { display: none; }



/* FORMULARIO */


.form-container {
      background: #fff;
      padding: 20px;
      border: 0.05rem solid #999999;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
      width: 100%;
      max-width: 400px;
      height: 600px;
      text-align: left;
    }

    .form-container h2 {
      text-align: center;
      margin-bottom: 2rem;
      color: #333;
    }

    .form-container label {
      font-size: 1.6rem;
      display: block;
      margin-bottom: 5px;
      font-weight: 700;
      color: #555;
    }

    .form-container input,
    .form-container textarea {
      width: 100%;
      padding: 10px;
      margin-bottom: 0.5rem;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 16px;
    }

    .form-container textarea {
      resize: none;
      height: 100px;
    }

    .form-container button {
      background-color: #007BFF;
      color: #fff;
      border: none;
      padding: 10px;
      font-size: 16px;
      border-radius: 5px;
      cursor: pointer;
      width: 100%;
      transition: background-color 0.3s;
    }

    .form-container button:hover {
      background-color: #0056b3;
    }

    /* Responsive Design */
    @media (max-width: 480px) {
      .form-container {
        padding: 15px;
      }

      .form-container h2 {
        font-size: 20px;
      }

      .form-container input,
      .form-container textarea {
        font-size: 14px;
      }

      .form-container button {
        font-size: 14px;
      }
    }

/************* FIN CONTACTO ***************/


/************ GALERÍA **************/

.main-galeria {
  display: grid;
  grid-template-areas:
  'titular'  
  'wrapper-m';
  grid-template-columns: 1fr;
  grid-row-gap: 2rem;
  justify-items: center;
  width: 100%;
}

.main-galeria > .titular{
  grid-area: titular;
  width: 100%;
  text-align: center;
  padding: 5rem 0 1rem 0;
}

/******** MASONRY *****************/
.wrapper-m {
    max-width: 95%;
    margin: 0 auto;
}

.center {
    text-align:center;
}

.masonry {
    column-count: 1;
    column-gap: 1rem;
}

.masonry .mItem {
  display: inline-block;
  margin-bottom: 0.5rem;
  width: 100%;
}


@media screen and (min-width: 768px) and (max-width: 991px) {
  .masonry {
    column-count: 2;
  }
}


@media (min-width: 992px) {
  .masonry {
    column-count: 3;
  }
}

/************ FIN GALERÍA **************/


/* ******* FOOTER *********** */

.footer-container {
  grid-area: footer-container;
    display: flex;
    flex-direction: column; /* Fila superior e inferior en columnas */
    width: 100%; /* Asegura que ocupe todo el ancho del footer */
    /*max-width: 1200px;  Limita el ancho máximo para pantallas grandes */
    /*margin: 0 auto;  Centra horizontalmente en pantallas anchas */
    gap: 2rem; /* Espaciado entre filas */
    padding-bottom: 4rem;
}

.footer-row {
    display: flex;
    width: 100%; /* Cada fila ocupa todo el ancho del contenedor */
    justify-content: space-between; /* Espacio uniforme entre columnas */
    gap: 2rem; /* Espacio entre las columnas */
}

.row-top {
    justify-content: space-between; /* Asegura distribución uniforme */
    align-items: flex-start; /* Alinea las columnas en la parte superior */
    width: 100%; /* Fila superior ocupa todo el ancho disponible */
    padding: 0 10%;
}

.row-bottom {
    justify-content: center; /* Centra horizontalmente el contenido */
    align-items: flex-start; /* Alinea el contenido arriba */
    border-top: 2px solid #ffffff;
    width: 100%; /* Fila inferior ocupa todo el ancho */
    background-color: #193242;
    padding: 2rem 0;
}

.column {
    flex: 1; /* Las columnas se expanden uniformemente */
    max-width: 300px; /* Define un ancho máximo */
    min-width: 150px; /* Define un ancho mínimo */
    /*text-align: center;  Opcional: centra el texto */
    /*border: 1px solid #E0b774; Para visualizar los bordes */
    padding: 1rem;
}

.column-full {
    width: 100%; /* Ocupa toda la fila */
    text-align: center; /* Centra el texto */
    padding: 1rem;
}



@media (max-width: 991px) {
    .footer-row {
        flex-direction: column; /* Apila las columnas en una disposición vertical */
        gap: 1rem; /* Espacio entre las filas */
        align-items: center; /* Centra las columnas horizontalmente */
    }

    .row-top {
        justify-content: center; /* Centra horizontalmente todas las columnas */
        align-items: center; /* Centra el contenido en el eje horizontal */
    }

    .column {
        width: 100%; /* Las columnas ocupan todo el ancho del contenedor */
        max-width: 500px; /* Limita el ancho máximo de las columnas */
        text-align: center; 
        padding: 1rem; /* Añade algo de espacio interno */
        display: flex; /* Flexbox para manejar contenido interno */
        flex-direction: column; /* Contenido interno en dirección vertical */
        align-items: center; /* Centra la columna horizontalmente en el contenedor */
    }
}






.footer-svg {
  height: 2.6rem;
}

footer p {
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.8rem;
  margin-bottom: 1rem;
  margin-top: 0rem;
}

  footer .column > p.tit {
    color: #Fab13d;
    font-weight: 700;
    font-size: 1.6rem;
  line-height: 1.9rem;
  }


.container {
  display: flex;
  align-items: center; /* Alineación vertical */
  /*justify-content: center;  Alineación horizontal */
  gap: 0.5rem; /* Espaciado entre el SVG y el texto */
  /*height: 100vh; Opcional: para centrar en toda la pantalla */
  padding: 0rem 0 2rem 0;
}


.container-horario {
  display: flex;
  align-items: center; /* Alineación vertical */
  /*justify-content: center;  Alineación horizontal */
  gap: 0.5rem; /* Espaciado entre el SVG y el texto */
  /*height: 100vh; Opcional: para centrar en toda la pantalla */
 padding: 0.5rem 0 1rem 0; 
}



.column-full > .container {
  justify-content: center; 
}

.icon {
  width: 3.2rem;
  height: 3.2rem;
}

.text {
  font-size: 1.5rem; /* Tamaño del texto */
  color: #fff;
}

span.horario {
  color: #Fab13d;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.9rem;
}



/*********** MENÚ **************/

.menu-icon {
  display: none;
  position: absolute;
  top: 3rem;
  right: 2rem;
}


#menu-toggle, #submenu-toggle, #submenu-toggle2 {
    display: none;
}

.menu a:hover, .submenu label:hover {
    color: #Fab13d;
}

nav ul {
    display: flex;
}

nav ul li {
    position: relative;
}

nav ul li a, nav ul li label {
    display: block;
    cursor: pointer;
}

nav ul .submenu:hover .submenu-items {
    display: block;
}

nav ul .submenu-items {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #27465a;
}

.logo {
  padding-left: 3.5rem;
  padding-top: 1rem;
  height: 8rem;
  line-height: 8rem;
}


.logo-svg {
  height: 7rem;
}

nav {
  height: 9rem;
}

nav > ul.menu > li > a, nav > ul.menu > li.submenu > label{
height: 9rem;
}

nav > ul.menu > li.submenu > ul.submenu-items > li > a{
height: 4rem;
}

nav a, nav li {
  font-size: 1.6rem;
  /*font-weight: 700;*/
  color: #ffffff;
}


.menu a, .menu label {
  display: flex;
  align-items: center;
  padding: 0 1rem;
}

.submenu a {
  width: 170px;
  display: flex;
  align-items: center;
  padding: 0 1.6rem;
}


@media (max-width: 768px){

.menu-icon {
    cursor: pointer;
    display: block;
}

    nav ul.menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 9rem;
        left: 0;
        width: 100%;
        background-color: #27465a;
        z-index: 1000;
    }
    nav ul li {
        width: 100%;
    }
    #menu-toggle:checked + .menu-icon + nav ul.menu {
        display: flex;
    }


    #submenu-toggle + label + .submenu-items {
        position: static;
        display: none;
    }



    #submenu-toggle:checked + label + .submenu-items {
        display: block;
    }

    #submenu-toggle:checked + label {
        background-color: #000000;
    }

    .logo {
      padding-left: 2rem;
    }

    .submenu a {
         width: 100%;
    }

    nav > ul.menu > li > a, nav > ul.menu > li.submenu > label{
    height: 4.5rem;
    }


    nav > ul.menu > li.submenu > ul.submenu-items > li > a{
    padding-left: 4rem;
    }

    .menu a, .menu label {
      padding-left: 1.6rem;
    }

    #submenu-toggle:checked + label {
     background-color: #0b1942;
    }

#submenu-toggle2 + label + .submenu-items {
position: static;
display: none;
}

#submenu-toggle2:checked + label + .submenu-items {
display: block;
}

#submenu-toggle2:checked + label {
background-color: #000000;
}

#submenu-toggle2:checked + label {
background-color: #0b1942;
}
}


/* SELECT */

.custom-select {
  min-width: 300px;
  /*max-width: 200px;*/
  /*position: relative;*/
}

.custom-select select {
  appearance: none;
  /*width: 100%;*/
  font-size: 1.15rem;
  padding: 0.675em 6em 0.675em 1em;
  background-color: #fff;
  border: 1px solid #caced1;
  border-radius: 0.25rem;
  color: #000;
  cursor: pointer;
}

.custom-select::before,
.custom-select::after {
  --size: 0.3rem;
  content: "";
  position: absolute;
  right: 1rem;
  pointer-events: none;
}

.custom-select::before {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-bottom: var(--size) solid black;
  top: 40%;
}

.custom-select::after {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-top: var(--size) solid black;
  top: 55%;
}






/************ select con click *******************/


  /* Contenedor del dropdown */
  .dropdown {
    /*position: relative;*/
    display: inline-block;
  }

  /* Oculta el checkbox */
  .dropdown-checkbox {
    display: none;
  }

  /* Estilos del botón */
  .dropdown-label {
    /*background-color: #3498db;*/
    color: #000000;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 1.2rem;
    display: inline-block;
    border-radius: 2px;
    border: 1px solid #000;
  }

  /* Contenedor de las opciones */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    /*box-shadow: 0px 8px 16px rgba(0,0,0,0.2);*/
    /*margin-top: 8px;*/
    z-index: 1;
    border-radius: 2px;
  }

  /* Opciones del dropdown */
  .dropdown-content a {
    color: black;
    padding: 1rem 1rem;
    text-decoration: none;
    display: block;
  }

  .dropdown-content a:hover {
    background-color: #ddd;
  }

  /* Muestra el menú cuando el checkbox está marcado */
  .dropdown-checkbox:checked ~ .dropdown-content {
    display: block;
  }


.text-top, .text-bottom {
    text-align: center; /* Centra el texto horizontalmente */
}







/* Card Container */
.card {
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  width: 25rem;  
  /*transition: transform 0.3s ease, box-shadow 0.3s ease;*/
  margin-bottom: 3.5rem;
}
/*responsive*/
.card {
  /*width: 90%;*/
  max-width: 25rem;
}

.container-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  gap: 1rem;
  /*padding: 20px;*/
  justify-items: center;
}



/* Card Image */
.card-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Card Content */
.card-content {
  padding: 2rem 2rem 1rem 2rem;
}

/* Card Title */
.card-title {
  margin: 0 0 1rem 0;
  font-size: 2.4rem;
  color: #333;
}

/* Card Description */
.card-description {
  margin: 5px 0;
  font-size: 1.8rem;
  color: #333;
}


/* Card Footer */
.card-footer {
  display: flex;
  flex-direction: column; /* Coloca el texto y botones en columna */
  align-items: center;
  padding: 2rem; /* Padding alrededor del footer */
  background: #eeede8;
}

/* Texto de la Sección Footer */
.card-footer-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 2rem; /* Separación entre el texto y los botones */
  text-align: center;
}

.card-footer-text-duplex {
  margin-bottom: 0;
}

/* Botones dentro del Footer */
.card-footer-buttons {
  display: flex;
  justify-content: space-evenly;
  gap: 10px; /* Espaciado entre los botones */
  width: 100%; /* Los botones ocupan todo el ancho del footer */
}

/* Botón General */
.card-button {
  font-size: 1.8rem;
  font-weight: 700;
  background: #1A5F62;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 15px; /* Espaciado interno del botón */
  cursor: pointer;
  transition: background 0.3s ease;
}

.card-button:hover {
  background: #3EB766;
}


.rect {
  display: inline-block;
  height: auto;
  /*margin: 0 0 5rem 0;*/
  background-color: #Fab13d;
  padding: 0.8rem 1.5rem 0.8rem 1.5rem;
  color: #000000;
  /*border-radius: 5px;*/
}



.contenedor-responsivo {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}



@media screen and (max-width: 320px){
  #wabutton{position: fixed;bottom: 0;right: 0;z-index: 99;}
  #wabutton > p > a > svg{width: 180px;height: 60px;}
}
@media screen and (min-width: 321px) and (max-width: 767px){
  #wabutton{position: fixed;bottom: 5px;right: 5px;z-index: 99;}
  #wabutton > p > a > svg{width: 180px;height: 70px;}
}
@media screen and (min-width: 768px){
  #wabutton{position: fixed;bottom: 15px;right: 30px;z-index: 99;}
  #wabutton > p > a > svg{width: 180px;height: 70px;}
}


/*----------------------  RESPONSIVE TABLE -----------------------------*/

.responsive-table {
width: 100%;
max-width: 64rem;
border-collapse: collapse;
margin: 0 auto;
font-size: 1.6rem;
}
.responsive-table td {
padding: 1rem;
text-align: left;
border: 0.1rem solid #ddd;
vertical-align: top;
}

.responsive-table th {
padding: 1rem;
text-align: left;
border: 0.1rem solid #ddd;
vertical-align: middle;
}

.responsive-table tr:nth-child(odd) {
background-color: #f7efef; /* Color para las filas impares */
}
.responsive-table tr:nth-child(even) {
background-color: #ffffff; /* Color para las filas pares */
}
.responsive-table th {
background-color: #27465a;
color: white;
height: 6.5rem;
}
@media (max-width: 60rem) {
.responsive-table {
font-size: 1.4rem;
}
.responsive-table th, 
.responsive-table td {
padding: 0.8rem;
}
}