/* Fuentes */
/* -------------------- */

/* montserrat 

font-family: 'Montserrat', sans-serif;
Extra Light 200 / Light 300 / Regular 400 / Medium 500

*/

:root {
    --montserrat: 'Montserrat', sans-serif;
}

:root {
    --light: 300;
    /* */
    --regular: 400;
    /* */
    --medium: 500;
    /* */
    --bold: 700;
    /* */
    --medium: 500;
}

:root {
    /* */
    --title-block: clamp(26px, 2.5vw, 46px);
    /* */
    --text-general: clamp(18px, 1.4vw, 22px);
    /* */
    --text-general-small: clamp(12px, 1.2vw, 14px);
    /* */
    --text-general-big: clamp(20px, 2vw, 22px);
}

/* Colores
***********************/

:root {
    --verde: #2C9942;
    /* */
    --rosa: #f8ebeb;
    /* */
    --gris: #B5B5B5;
    /* */
    --gris-oscuro: #2D362F;
    /* */
    --verde-claro: #9ce9de80;
}

/* Padding & Margin
***********************/

:root {
    --pm-interior-block: clamp(50px, 6vw, 100px);
    /* */
    --pm-interior-block-min: clamp(15px, 3vw, 50px);
    /* */
    --pm-interior-block-min-v: clamp(15px, 3vw, 50px) 0;
    /* */
    --pm-interior-block-v: clamp(50px, 6vw, 100px) 0;
    /* */
    --pm-interior-block-h: 0 clamp(30px, 6vw, 100px);
}

/* Width
***********************/

:root {
    --width-base: 90%;
    /* */
    --width-wide: 1440px;
    /* */
    --width-tablet: 980px;
}

/* Reset Styles
***********************/

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

html,
body,
div,
span,
h1,
p,
a,
dl,
dt,
dd,
ol,
ul,
li {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* Base */

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--montserrat);
    color: var(--gris-oscuro);
    font-size: 20px;
    /* background: url(../images/bg-body.jpg) #fff right top / auto 90vh no-repeat; */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--montserrat);
    font-weight: var(--regular);
    margin: 0;
    line-height: 1.1em;
}

a {
    color: #000;
    text-decoration: none;
    transition: all .2s;
}

a:hover {
    color: var(--azul);
}

img {
    width: 100%;
    height: auto;
}

p {
    font-size: var(--text-general);
    font-weight: var(--regular);
    line-height: 1.4em;
}

span.txt-verde {
    color: var(--verde);
}

span.display-block {
    display: block;
}

.hiddenScroll {
    overflow: hidden;
}

#scrolltop {
    position: fixed;
    bottom: 15px;
    right: 15px;
    padding: 1em;
    background-color: var(--verde);
    background-image: url(../images/scroll-top.svg);
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 5px;
    display: block;
    z-index: 9999;
}

/* Formulario */

input[type="text"],
input[type="date"],
input[type="time"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="password"],
input[type="password"],
select,
textarea {
    color: var(--gris-oscuro) !important;
    border: 0;
    line-height: 1em;
    padding: 10px;
    height: 50px;
    width: 100%;
    font-size: var(--text-general);
    text-align: left;
    border-radius: 0;
    font-family: var(--montserrat);
    background: var(--verde-claro);
    border-radius: 5px;
}

#form_login input {
    text-align: center;
}

input[type="text"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
    background: var(--rosa);
    transition: all .2s;
}

textarea {
    padding: 10px;
    min-height: 250px;
    text-align: left;
}

::placeholder {
    color: var(--gris-oscuro);
    opacity: .7;
    font-family: var(--montserrat);
    font-weight: 300;
}

:focus::placeholder {
    opacity: 1;
}

/* ------------ CARD ------------ */

.card {
    width: 95vw;
    height: calc(9/16 * 95vw);
    max-width: calc(16/9 * 95vh);
    max-height: 95vh;
    display: flex;
    position: relative;
    background: url("../images/pictures/screen-video.jpg") center center/cover;
    overflow: hidden;
}

.card-play {
    width: 80px;
    height: 80px;
    position: relative;
    z-index: 1;
    margin: auto;
    opacity: .8;
    background: url("../images/play.svg") center / contain;
    cursor: pointer;
    transition: opacity 0.3s ease-out;
}

.card-play:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #000;
    transition: all 0.5s ease-out;
}

.card-video {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    background: #000;
}

.card-video iframe {
    width: 100%;
    height: 100%;
}

.card:after {
    content: "";
    width: 250%;
    height: 250%;
    position: absolute;
    top: var(--y);
    left: var(--x);
    transform: translate(-50%, -50%);
    opacity: 0;
    background: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.3), transparent);
    transition: opacity 0.5s ease-out;
}

/* ------------ STATES ------------ */

.card:hover:after,
.card:hover .card-play {
    opacity: 1;
}

.video-is-open:after {
    display: none;
}

.video-is-open .card-play {
    opacity: 1;
}

.video-is-open .card-play:after {
    width: 2vh;
    height: 2vh;
    transform: translate(-50%, -50%) scale(88.8888888889);
    transition: transform 0.5s ease-out;
}

/* Keyframe - Global */

.keyframe {
    width: 100%;
    position: relative;
}

.keyframe-screen {
    width: 100%;
    height: 100vh;
}

.grid {
    display: grid;
}

.image-bg {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent;
}

/* Dropdown */

.dropbtn {
    background: transparent;
    color: #000;
    padding: 0;
    font-size: var(--text-general);
    border: none;
    cursor: pointer;
    transition: all .2s;
    display: block;
    width: 100%;
    text-transform: uppercase;
    font-family: var(--montserrat);
    font-weight: var(--bold);
}

#idioma-responsive .dropbtn {
    color: white;
}

.dropdown {
    position: absolute;
    display: block;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
}

#idioma.dropdown,
#idioma-responsive.dropdown {
    position: relative;
    display: block;
    bottom: inherit;
    left: inherit;
    transform: none;
    width: 35px;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background: var(--rosa);
    ;
    z-index: 1;
    width: 100%;
    text-align: center;
    border-radius: 5px;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: .3em 0;
    text-decoration: none;
    display: block;
    text-transform: uppercase;
}

/* Change color of dropdown links on hover */
/* .dropdown-content a:hover {
    background-color: #000;
    color: #fff;
} */

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
/* .dropdown:hover .dropbtn {
    background-color: var(--rosa);
} */

/* Botones */

.btn {
    color: var(--gris-oscuro);
    background: transparent;
    border-radius: 5px;
    padding: .5em 1.5em;
    text-decoration: none;
    font-size: var(--text-general);
    transition: all .2s;
    display: inline-block;
    font-weight: var(--bold);
    border: 1px solid var(--gris-oscuro);
}

.btn:hover {
    background: #000;
    color: #fff;
}

.icon-svg path,
.icon-svg polygon,
.icon-svg rect {
    fill: #fff;
    transition: all .2s;
}

.icon-svg circle {
    stroke: #fff;
    stroke-width: 1;
    transition: all .2s;
}

.icon-svg:hover path,
.icon-svg:hover polygon,
.icon-svg:hover rect {
    fill: var(--verde);
}

.icon-svg:hover circle {
    stroke: var(--verde);
}

.btn-ico-telefono {
    border-left: 1px solid black;
    padding-left: 1em;
}

.btn-ico-telefono .icon-svg {
    width: 1.3em;
    height: 1.3em;
}

.btn-ico-telefono .icon-svg path,
.btn-ico-telefono .icon-svg polygon,
.btn-ico-telefono .icon-svg rect {
    fill: black;
}

.btn-ico-telefono .icon-svg circle {
    stroke: black;
}

#menu-container-header-actions .btn-ico-telefono .icon-svg path,
#menu-container-header-actions .btn-ico-telefono .icon-svg polygon,
#menu-container-header-actions .btn-ico-telefono .icon-svg rect {
    fill: white;
}

#menu-container-header-actions .btn-ico-telefono .icon-svg circle {
    stroke: white;
}

/* Header */

#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(15px, 3vw, 25px) clamp(30px, 5vw, 50px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

#logo {
    position: relative;
    text-align: center;
}

#logo img {
    width: clamp(150px, 15vw, 250px);
}

#sellos img {
    width: clamp(80px, 10vw, 150px);
}

#header-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1em;
}

#main-menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2em;
    margin: 0 1em 0 0;
    padding: 0;
}

#main-menu li {
    list-style: none;
    margin: 0;
    padding: 1em 0;
    position: relative;
}

#main-menu li a {
    font-weight: var(--bold);
    color: black;
}

#main-menu li a img {
    display: none;
}

.main-submenu {
    position: absolute;
    top: 50px;
    left: -10px;
    padding: .4em 1em;
    background: var(--rosa);
    border-radius: 10px;
    width: max-content;
    display: flex;
    flex-direction: column;
    gap: .5em;
    display: none;
}

.main-submenu::before {
    position: absolute;
    top: -5px;
    left: 15px;
    background: var(--rosa);
    border-radius: 2px;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    content: "";
}

.main-submenu li {
    font-size: var(--text-general-small);
    font-weight: 400;
    padding: .5em 0 !important;
}

.main-submenu li a:hover {
    color: var(--verde) !important;
}

#main-menu li:hover>.main-submenu {
    display: block;
}

/* Menú container*/

#menu-container-header,
#menu-container-footer-logo,
#menu-container-footer {
    display: none;
}

/* Overlay menú */

.toggle-button {
    height: 22px;
    width: 30px;
    cursor: pointer;
    z-index: 999;
    position: relative;
    visibility: hidden;
    display: none;
}

.toggle-button.toggle-active {
    position: fixed;
    right: clamp(30px, 5vw, 50px);
}

.bar {
    background-color: black;
    display: block;
    width: 100%;
    height: 3px;
    border: 0;
    -webkit-transition: all .35s ease;
    transition: all .35s ease;
}

.bar+.bar {
    margin-top: 6px;
}

.middle {
    top: 11px;
}

.bottom {
    top: 22px;
}

.toggle-button:hover .bar {
    background: #fff;
}

.toggle-active .bar {
    background-color: white;
}

.toggle-active .top {
    -webkit-transform: translateY(7px) translateX(0) rotate(45deg);
}

.toggle-active .middle {
    opacity: 0;
}

.toggle-active .bottom {
    -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
}

.toggle-active:hover .bar {
    background: var(--rosa);
}

.overlay {
    position: fixed;
    background: white;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .35s, visibility .35s, height .35s;
    z-index: 99;
}

.overlay a {
    pointer-events: none;
}

.overlay.nav-active a {
    pointer-events: auto;
}

.path-frontpage .overlay {
    visibility: hidden;
    display: none;
}

.nav-active {
    opacity: 1;
    visibility: visible;
    height: 100%;
    /*    max-height: 340px;*/
}


/* Ornamentos */

.orn-1 {
    position: absolute;
    width: clamp(100px, 10vw, 400px);
    top: calc(100% * 3);
    left: 0;
    z-index: 0;
}

.orn-2 {
    position: absolute;
    width: clamp(100px, 10vw, 400px);
    top: calc(100% * 5);
    right: 0;
    z-index: 0;
}

/* General */

.grid-column-content p {
    margin-bottom: 1em;
}

.grid-column-content p:last-child {
    margin-bottom: 0;
}

/* Keyframe - 1 */

#keyframe-1 {
    height: calc(9/16 * 80vw);
    background-image: url(../images/bg-body-completo.jpg);
    background-position: right top;
    background-size: contain;
    margin-top: 104px;
}

/* Keyframe - 2 */

#keyframe-2 {
    position: relative;
    text-align: center;
    width: var(--width-base);
    max-width: var(--width-wide);
    margin: auto;
}

h1 {
    font-size: clamp(32px, 3vw, 52px);
    color: var(--gris-oscuro);
    font-family: var(--montserrat);
    margin: .5em 1em;
    text-align: center;
    font-weight: bold;
}

#keyframe-2-logo img {
    width: clamp(250px, 20vw, 350px);
    margin: auto;
}

.grid-iconos {
    grid-template-columns: repeat(3, auto);
    grid-gap: clamp(10px, 6vw, 180px);
    justify-content: center;
    padding: var(--pm-interior-block-min-v);
}

.grid-iconos img {
    height: clamp(50px, 6vw, 200px);
}

.grid-iconos p {
    font-weight: var(--bold);
    text-align: center;
}

/* Keyframe - 3 */

#keyframe-3 {
    background: var(--verde-claro);
    position: relative;
}

#keyframe-3 .grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 1em;
    padding: var(--pm-interior-block-min-v);
    width: var(--width-base);
    max-width: var(--width-tablet);
    margin: auto;
}

#keyframe-3 .grid>div {
    border-radius: 10px;
}

#keyframe-3 .grid .grid-column-1 {
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: 3;
    grid-column-end: 2;
}

#keyframe-3 .grid .grid-column-2,
#keyframe-3 .grid .grid-column-3 {
    padding-top: 90%;
}

/* Keyframe - 4 */

.grid-destacados {
    grid-gap: 5em;
    width: var(--width-base);
    max-width: var(--width-tablet);
    margin: auto;
    padding: var(--pm-interior-block-v);
}

.grid-column-content h2 {
    font-weight: var(--bold);
    text-transform: uppercase;
    font-style: italic;
    font-size: var(--title-block);
    margin-bottom: .5em;
}

.cita {
    margin-top: 1em;
    font-style: italic;
    font-weight: var(--regular) !important;
}

#keyframe-4 {
    grid-template-columns: clamp(100px, 10vw, 300px) auto;
}

#keyframe-4 .grid-column-content {
    text-align: right;
}

/* Keyframe - 5 */

#keyframe-5 {
    grid-template-columns: auto clamp(100px, 10vw, 300px);
}

/* Keyframe - 6 */

#keyframe-6 {
    grid-template-columns: clamp(100px, 10vw, 300px) auto;
}

#keyframe-6 .grid-column-content {
    text-align: right;
}

/* Keyframe - 7 */

#keyframe-7 {
    grid-template-columns: auto clamp(100px, 10vw, 300px);
}

/* Keyframe - 8 */

#keyframe-8 {
    background: var(--verde-claro);
    position: relative;
}

#keyframe-8 .keyframe-content {
    padding: var(--pm-interior-block-min-v);
    width: var(--width-base);
    max-width: var(--width-tablet);
    margin: auto;
    text-align: center;
}

#keyframe-8 h2 {
    font-style: italic;
    font-size: var(--title-block);
    margin-bottom: .5em;
    font-weight: var(--bold);
}

#keyframe-8-logo img {
    width: clamp(150px, 15vw, 250px);
    margin: 1.5em auto;
}

/* Keyframe - Video */

#keyframe-video {
    padding: var(--pm-interior-block-v);
}

#keyframe-video h2 {
    font-size: var(--title-block);
    margin-bottom: 1em;
    font-weight: var(--regular);
    text-align: center;
}

#keyframe-video .card {
    width: var(--width-base);
    max-width: var(--width-tablet);
    margin: auto;
    /* height: calc(9/16 * 51vw); */
    height: auto;
    aspect-ratio: 16/9;
    border-radius: 10px;
}

#keyframe-video #video {
    border-radius: 10px;
}

#keyframe-video .card-play {
    width: auto;
    height: auto;
    position: relative;
    z-index: 1;
    margin: auto;
    opacity: 1;
    background: transparent;
    cursor: pointer;
    color: #fff;
    border-radius: 5px;
    padding: .5em 1.5em;
    font-size: var(--text-general);
    transition: all .2s;
    display: inline-block;
    font-weight: var(--bold);
    border: 1px solid #fff;
}

#keyframe-video .card-play:hover {
    background: #000;
    border: 1px solid #000;
}

/* Keyframe - Contacto */

#keyframe-contacto h2 {
    font-size: var(--title-block);
    margin-bottom: 1em;
    font-weight: var(--bold);
    text-align: center;
}

.keyframe-contacto-content {
    width: var(--width-base);
    max-width: var(--width-tablet);
    margin: auto;
    padding: var(--pm-interior-block-h);
}

#form_info {
    grid-template-columns: 1fr;
    grid-gap: 1em;
    width: 100%;
}

#item-form-privacidad {
    padding: 0;
    display: flex;
    justify-content: center;
}

#item-form-texto-privacidad,
#item-form-comercial {
    padding: 0;
}

#item-form-privacidad label,
#item-form-texto-privacidad p,
#item-form-comercial label {
    color: var(--gris-oscuro);
    font-size: var(--text-general-small);
    font-family: var(--montserrat);
}

#item-form-privacidad label a,
#item-form-texto-privacidad p a,
#item-form-comercial label a {
    color: var(--gris-oscuro);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: .3em;
}

#item-form-privacidad label a:hover,
#item-form-texto-privacidad p a:hover,
#item-form-comercial label a:hover {
    color: var(--verde);
    text-decoration-style: solid;
}

#item-form-enviar {
    text-align: center;
    padding: 2em 0 3em;
}

#enviar {
    border: 1px solid var(--gris-oscuro);
    border-radius: 5px;
    cursor: pointer;
    transition: all .2s;
    margin: auto;
    font-family: var(--montserrat) !important;
    text-transform: uppercase;
}

#enviar:hover {
    color: #000;
    background: #fff;
}

#contacto-footer {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 5em;
    padding: var(--pm-interior-block-h);
}

#contacto-footer p {
    font-size: var(--text-general-small);
}

#contacto-footer p span {
    font-weight: var(--bold);
}

.ico-localizacion,
.ico-telefono {
    padding-left: 25px;
    background-size: auto 16px;
    background-repeat: no-repeat;
    background-position: 0 0;
}

.ico-localizacion {
    background-image: url(../images/ico-localizacion.svg);
}

.ico-telefono {
    background-image: url(../images/ico-telefono.svg);
}

#grid-logos {
    padding: var(--pm-interior-block);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(10px, 6vw, 180px);
}

.grid-logos-item img {
    /* width: clamp(80px, 6vw, 150px); */
    width: auto;
    max-width: clamp(80px, 6vw, 150px);
    height: auto;
    max-height: clamp(60px, 6vw, 100px);
}

.grid-logos-item:last-child img {
    /* width: clamp(80px, 6vw, 150px); */
    width: auto;
    max-width: clamp(1000px, 6vw, 200px);
    height: auto;
    max-height: clamp(60px, 6vw, 150px);
}

/* Keyframe - FOOTER */

#keyframe-footer {
    display: flex;
    flex-direction: column;
    gap: 2em;
    align-items: center;
    padding: var(--pm-interior-block-min);
    background: var(--gris-oscuro);
}

#rrss {
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 2em;
}

.icon-social .icon-svg {
    width: 2em;
    height: 2em;
}

#logo-footer {
    flex-basis: 100%;
}

#logo-footer img {
    width: clamp(200px, 20vw, 400px);
    margin: auto;
}

/* Keyframe - LEGAL */

#keyframe-legal {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em 1em 2em;
    background: var(--gris-oscuro);
    gap: 2em;
}

#keyframe-legal p {
    display: inline-block;
    font-size: var(--text-general-small);
    color: var(--gris);
}

#keyframe-legal p a {
    color: #fff;
}

#keyframe-legal p a:hover {
    color: var(--verde);
}

.legal {
    padding: 4em 0;
}

.legal main {
    width: 90%;
    max-width: 960px;
    margin: auto;
}

.legal h2 {
    font-size: var(--text-general-big);
    margin: 2em 0 1em;
    font-weight: var(--medium);
}

.legal p {
    font-size: var(--text-general);
    margin-bottom: 1em;
}

.creditos {
    background: #fff;
    text-align: center;
}

.creditos p {
    font-size: var(--text-general-small);
    padding: 1em;
}

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

@media all and (max-width: 1280px) {
    .toggle-button {
        visibility: visible;
        display: block;
    }

    #menu-container {
        height: 100vh;
        background-image: url(../images/bg-menu-responsive.png);
        background-color: var(--rosa);
        background-position: right top;
        background-size: contain;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #menu-container-header {
        display: flex;
        width: calc(100% - 36px);
        padding: clamp(15px, 3vw, 25px) clamp(30px, 5vw, 50px);
        align-items: center;
        align-content: center;
        justify-content: space-between;
        gap: .3em;
    }

    #menu-container-header-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .3em;
    }

    #menu-container-header-actions .btn-ico-telefono {
        border-left: 1px solid white;
    }

    #menu-container-content {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: clamp(45px, 8vw, 60px);
        position: relative;
        background: var(--rosa);
    }

    #menu-container-content::before {
        content: "";
        clip-path: polygon(0 43%, 100% 0, 100% 100%, 0% 100%);
        width: 100%;
        background: var(--rosa);
        height: 200px;
        position: absolute;
        top: -95px;
        left: 0;
        z-index: 0;
    }

    #main-menu {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 1em;
        margin: 0 clamp(30px, 5vw, 50px);
        padding: 0;
        flex-direction: column;
        position: relative;
        z-index: 1;
    }

    #main-menu li a {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 1em;
    }

    #main-menu li {
        padding: 0;
        font-size: .8em;
    }

    #main-menu li a img {
        display: inherit;
        width: 1.8em;
    }

    .main-submenu {
        position: relative;
        top: 0;
        left: 0;
        padding: 0 0 0 75px;
        width: auto;
        display: block;
        background-color: transparent;
    }

    #menu-container-footer-logo {
        display: flex;
        justify-content: center;
        position: relative;
        z-index: 1;
    }

    #menu-container-header-logo img,
    #menu-container-footer-logo img {
        width: clamp(150px, 15vw, 250px);
    }

    #menu-container-footer {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 1em 1em;
        flex-wrap: wrap;
        text-align: center;
        gap: 1em;
        position: relative;
        z-index: 1;
    }

    #menu-container-footer p {
        display: inline-block;
        font-size: var(--text-general-small);
        color: var(--gris);
    }
    #keyframe-1{
        margin-top: 68px;
    }
}

@media all and (max-width: 1024px) {}

@media all and (max-width: 780px) {
    :root {
        --pm-interior-block: clamp(50px, 6vw, 100px) 30px;
    }

    #header-actions {
        gap: .3em;
        flex-wrap: wrap;
    }

    .btn-ico-telefono {
        margin-right: 0.5em;
        padding-left: .7em;
    }

    #keyframe-1 {
        height: calc(4/3 * 80vw);
        background-image: url(../images/bg-body-responsive.jpg);
    }

    .grid-iconos,
    #keyframe-3 .grid,
    #keyframe-8 .keyframe-content {
        padding: var(--pm-interior-block-v);
    }

    #keyframe-4 {
        padding-top: 3em;
    }

    #keyframe-7 {
        padding-bottom: 3em;
    }

    .grid-destacados {
        grid-gap: 1em;
        grid-template-columns: 1fr !important;
        padding: var(--pm-interior-block-min-v);
    }

    .grid-column-icon {
        height: clamp(100px, 10vw, 150px);
        order: 1;
    }

    .grid-column-icon img {
        height: 100%;
        order: 1;
    }

    .grid-column-content {
        order: 2;
        text-align: center !important;
    }

    #keyframe-5 .keyframe-footer {
        padding: 2em 1em;
    }

    #keyframe-contacto {
        grid-template-columns: 1fr;
    }

    #contacto-footer {
        gap: .5em;
        flex-direction: column;
        text-align: center;
    }

    .rrss {
        gap: clamp(20px, 1.5vw, 40px);
    }

    .icon-social .icon-svg {
        width: 1.2em;
        height: 1.2em;
    }

    input[type="text"],
    input[type="date"],
    input[type="time"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="password"],
    input[type="password"],
    select,
    textarea {
        background: rgba(156, 233, 222, 0.5);
    }

    #keyframe-footer {
        padding-top: 2em;
        justify-content: center;
        flex-wrap: wrap;
        text-align: center;
    }

    #contacto-footer p span {
        display: block;
    }

    .ico-localizacion,
    .ico-telefono {
        padding-left: 0;
        background-position: center 0;
        padding-top: 20px;
    }
}

@media all and (max-width: 480px) {
    #keyframe-legal {
        flex-wrap: wrap;
        text-align: center;
        gap: 1em;
    }

    /* #keyframe-legal p {
        flex-basis: 100%;
    } */

    #web-footer {
        flex-basis: 100%;
        margin: 1em;
    }

    #form_info {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

    #item-form-nombre,
    #item-form-comentarios,
    #item-form-acciones {
        grid-column: auto;
    }
}

.notification-success {
    background-color: #1bd760;
    color: #ffffff;
    float:left;
    font-size: var(--text-general);
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
}

.notification-error {
    background-color: #de5959;
    color: #ffffff;
    float:left;
    font-size: var(--text-general);
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
}


#barraaceptacion {
    display: block;
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    padding-bottom: 0px;
    width: 100%;
    text-align: center;
    background-color: #ccad5b;
    color: #000;
    z-index: 99999;
}

.inner-barraaceptacion {
    width: 100%;
    font-size: 16px;
    padding: 30px 0;
    line-height: 2;
}

.inner-barraaceptacion a.ok {
    text-decoration: none;
    color: #ccad5b;
    font-weight:normal;
    background: #000;
    padding: 5px 8px;
    margin-left: 5px;
}

.inner-barraaceptacion a.info {
    margin-left: 5px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    background: #ccad5b;
    padding: 5px 8px;
    border:1px solid #fff;
}