@charset "UTF-8";
/*++++++++++++++++++++++++++++++++++++++++++++++++reset++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

:root {
   --color-primary: #f34414;
   --color-secondary: #ffffff;
   --color-terciary: #000000;
   --color-sube: #ffffff;
   --color-baja: #000000;
   /* Añadimos las versiones RGB para las transparencias */
   --color-primary-rgb: 243, 68, 20;
   --color-secondary-rgb: 255, 255, 255;
   --color-terciary-rgb: 0, 0, 0;
   --color-sube-rgb: 255, 255, 255;
   --color-baja-rgb: 0, 0, 0;
}
/* Box sizing rules */
* {
   margin: 0;
   padding: 0;
}

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

/* Prevent font size inflation */
html {
   -moz-text-size-adjust: none;
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
   margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
   list-style: none;
}

/* Set core body defaults */
body {
   min-height: 100dvh;
   line-height: 1.15;
   color: var(--color-terciary);
   background-color: var(--color-terciary);
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
   line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
   text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
   -webkit-text-decoration-skip: ink;
   text-decoration-skip-ink: auto;
   color: currentColor;
}

a,
a:visited {
   color: inherit;
}

/* Make images easier to work with */
img,
picture {
   max-width: 100%;
   display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
   font-family: inherit;
   font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
   min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
   scroll-margin-block: 5ex;
}

time {
   display: block;
}

html {
   font-size: 62.5%;
   scroll-behavior: smooth;
}

header {
   color: white;
   background: black;
   position: sticky;
   top: 0;
   z-index: 100;
}

body {
   font-family: "Inter", sans-serif;
   font-variation-settings: "wght" 400;
   font-optical-sizing: auto;
   font-style: normal;
}
h1,
strong {
   font-variation-settings: "wght" 900;
}
h2,
h3 {
   font-variation-settings: "wght" 700;
}
/* Contenedor principal */
main.site-main {
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
}

div.site {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-height: 100vh;
   background-color: var(--color-primary);
}

h1 {
   /* font-size: 5rem; */
   font-size: clamp(2rem, 6vw, 5rem);
   text-transform: uppercase;
   margin: 0;
   text-align: center;
}

.cursor-pointer {
   cursor: pointer;
}

/* LISTAS DE RESTAURANTES single-lista / LISTAS DE RESTAURANTES single-lista / LISTAS DE RESTAURANTES single-lista */

article.lista {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 3rem;
   color: black;
   padding: 2rem;
   max-width: 620px;
   overflow: hidden;
}

.lista-header {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
}

.lista-descripcion p {
   font-size: 2.1rem;
   font-variation-settings: "wght" 700;
   text-align: center;
}

.lista-title-image {
   display: flex;
   align-items: center;
   gap: 1rem;
}

.lista-featured-image {
   width: 50px;
   min-width: 50px;
   border-radius: 12px;
   overflow: hidden;
}

.localizacion-info {
   display: flex;
   align-items: center;
   gap: 1rem;
   border: 1px solid black;
   padding: 1rem 2rem;
   border-radius: 25px;
   text-decoration: none;
   transition: all 0.5s cubic-bezier(0.15, 1, 0.3, 1);
}
.localizacion-info-unlinked {
   display: flex;
   align-items: center;
   gap: 1rem;
   border: 1px solid black;
   padding: 1rem 2rem;
   border-radius: 25px;
   text-decoration: none;
   transition: all 0.5s cubic-bezier(0.15, 1, 0.3, 1);
}
.localizacion-info:hover {
   background-color: white;
   color: black;
   transform: scale(1.01);
   box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.1);
}
.localizacion-info p.localizacion,
.localizacion-info-unlinked p.localizacion {
   text-decoration: none;
   text-transform: uppercase;
   font-size: 1.4rem;
   font-variation-settings: "wght" 700;
}

.localizaciones-select {
   display: none;
}

.featured-image {
   width: 80px;
   min-width: 80px;
   border-radius: 16px;
   overflow: hidden;
}

.restaurant-card {
   display: flex;
   gap: 1rem;
   color: var(--color-secondary);
   background-color: rgba(0, 0, 0, 0.15);
   padding: 0.5rem;
   border-radius: 16px;
   align-items: flex-start;
   width: fill-available;
   width: -webkit-fill-available;
   transition: all 0.5s cubic-bezier(0.15, 1, 0.3, 1);
}
.restaurant-card:hover {
   background-color: var(--color-secondary);
   transform: scale(1.01);
   box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.1);
   color: var(--color-terciary);
}

.restaurant-card:hover .restaurant-info-secondary {
   border-top: 1px solid black;
}

.restaurant-card svg {
   fill: var(--color-secondary);
}
.restaurant-card:hover svg {
   fill: var(--color-terciary);
}

.down-arrow {
   height: 80px;
   display: flex;
   align-items: center;
}
.down-arrow .svg-icon {
   width: 24px;
   height: 24px;
   transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);
}

.restaurant-card.expanded .down-arrow .svg-icon {
   transform: rotate(180deg);
}

li.restaurant-item {
   list-style: none;
   display: flex;
   gap: 1rem;
}

ul.restaurant-list {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   margin: 0;
}

.restaurant-info {
   padding: 0.1rem;
   max-height: 80px;
   overflow: hidden;
   transition: max-height 1s cubic-bezier(0.15, 1, 0.3, 1);
}
.restaurant-info-primary {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-start;
   min-height: 75px;
}
.restaurant-info.expanded {
   max-height: 500px; /* Usa un valor suficientemente grande para la transición */
}

.restaurant-info h3 {
   font-size: 2rem;
   text-transform: uppercase;
}
.restaurant-info p {
   font-size: 1.2rem;
   line-height: 1.2em;
}

.restaurant-info .restaurant-descripcion {
   display: -webkit-box; /* Habilita el truncamiento */
   -webkit-line-clamp: 2; /* Limita a 3 líneas */
   -webkit-box-orient: vertical; /* Orientación vertical */
   overflow: hidden; /* Oculta el contenido adicional */
   text-overflow: ellipsis; /* Agrega puntos suspensivos */
   line-height: 1.4rem; /* Define la altura de línea */
   /* max-height: calc(1.4rem * 2);  */
   padding-right: 0.1rem; /* Espaciado a la derecha para evitar cortes */
   transition: all 0.3s cubic-bezier(0.15, 1, 0.3, 1); /* Suavizar la transición */
   padding-top: 1rem;
}

.restaurant-info.expanded .restaurant-descripcion {
   display: block; /* Mostrar el contenido completo */
   -webkit-line-clamp: unset;
   -webkit-box-orient: unset;
   overflow: visible;
   max-height: none;
}

.restaurant-info-secondary {
   border-top: 1px solid white;
   margin: 1rem 0;
   padding-top: 1rem;
   opacity: 0; /* Oculta inicialmente */
   transition: opacity 0.3s cubic-bezier(0.15, 1, 0.3, 1);
}
.restaurant-info-secondary p {
   font-size: 1.2rem;
   line-height: 1.2em;
   margin-bottom: 1.2rem;
}

.restaurant-card.expanded .restaurant-info-secondary {
   opacity: 1; /* Muestra la capa cuando se expande */
}

.button-back {
   min-height: 30px;
   aspect-ratio: 1;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* NUMERACIÓN POSICIÓN DE LOS RESTAURANTES + TOOLTIP */

.card-generic__num {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   margin-top: 30px;
   font-variation-settings: "wght" 700;
   font-size: 1.4rem;
   padding: 0.1rem;
   text-align: center;
   border-radius: 50%;
   color: var(--color-terciary);
   position: relative;
   transition: all 0.3s ease;
   cursor: default;
}

.sube {
   color: var(--color-sube);
}

.baja {
   color: var(--color-baja);
}

.nuevo {
   color: var(--color-sube);
   font-size: 1.2rem;
}

.mantiene {
   color: var(--color-terciary);
}

/* Mejoras visuales para los estados */
/* .card-generic__num.cambio-positivo {
   background-color: rgba(var(--color-sube-rgb), 0.2);
}

.card-generic__num.cambio-negativo {
   background-color: rgba(var(--color-baja-rgb), 0.2);
}

.card-generic__num.nuevo-item {
   background-color: rgba(var(--color-sube-rgb), 0.15);
} */

/* Tooltip mejorado */
.card-generic__num:hover::after {
   content: attr(title);
   position: absolute;
   top: -34px;
   left: 50%;
   transform: translateX(-20%);
   background: var(--color-terciary);
   color: var(--color-primary);
   padding: 4px 8px;
   border-radius: 4px;
   font-size: 1rem;
   white-space: nowrap;
   z-index: 1000;
   font-variation-settings: "wght" 700;
}

/* Flecha del tooltip */
.card-generic__num:hover::before {
   content: "";
   position: absolute;
   top: -15px;
   left: 50%;
   transform: translateX(-50%);
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   border-top: 6px solid var(--color-terciary);
   z-index: 1000;
}

/* Animaciones para los cambios */
@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(-10px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.card-generic__num {
   animation: fadeIn 0.3s ease-out;
}

/* Ajustes para el contenedor de flechas */
.card-generic__num > div {
   line-height: 1;
   height: 15px;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* Estados hover mejorados */
.card-generic__num:hover.cambio-positivo {
   background-color: rgba(var(--color-sube-rgb), 0.15);
}

.card-generic__num:hover.cambio-negativo {
   background-color: rgba(var(--color-baja-rgb), 0.15);
}

.card-generic__num:hover.nuevo-item {
   background-color: rgba(var(--color-sube-rgb), 0.2);
}

/* Botón Saber Más debajo de las Listas */

.button-saber-mas {
   padding-bottom: 2rem;
}
.button-saber-mas a {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
   background-color: rgba(0, 0, 0, 0.15);
   padding: 1rem 2rem;
   border-radius: 25px;
   text-decoration: none;
   text-transform: uppercase;
   font-size: 1.4rem;
   color: var(--color-terciary);
   transition: all 0.5s cubic-bezier(0.15, 1, 0.3, 1);
   font-variation-settings: "wght" 700;
}
.button-saber-mas a:hover {
   background-color: white;
   color: black;
   transform: scale(1.01);
   box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ESTILOS PARA LOCALIZACIÓN single-localizacion / ESTILOS PARA LOCALIZACIÓN single-localizacion / ESTILOS PARA LOCALIZACIÓN single-localizacion */
/* Estilos para single-localizacion.php */

article.localizacion {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 3rem;
   color: black;
   padding: 2rem;
   max-width: 590px;
   overflow: hidden;
}
.localizacion-header {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
}

li.lista-item {
   list-style: none;
   display: flex;
   gap: 1rem;
}
.lista-card {
   display: flex;
   gap: 1rem;
   background-color: rgba(0, 0, 0, 0.15);
   color: var(--color-secondary);
   padding: 0.5rem;
   border-radius: 16px;
   align-items: center;
   max-width: 590px;
   transition: all 0.5s cubic-bezier(0.15, 1, 0.3, 1);
}
.lista-card:hover {
   background-color: var(--color-secondary);
   transform: scale(1.01);
   box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.1);
   color: var(--color-terciary);
}
.lista-card svg {
   fill: var(--color-secondary);
}
.lista-card:hover svg {
   fill: var(--color-terciary);
}
ul.lista-list {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   margin: 0;
}
ul.lista-list a {
   text-decoration: none;
}
.lista-info {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   /* width: fit-content; */
   width: 100%;
   width: -moz-available; /* Firefox */
   width: -webkit-fill-available; /* Chrome */
   width: fill-available; /* Estándar */
   min-width: 160px;
   padding: 0.1rem;
   max-height: 80px;
   min-height: 75px;
   overflow: hidden;
   justify-content: space-between;
}
.lista-info h3 {
   font-size: 2rem;
   text-transform: uppercase;
}
.lista-info p {
   font-size: 1.2rem;
   line-height: 1.2em;
}
.rotar-flecha {
   transform: rotate(-90deg);
}

/* ESTILOS PARA LOCALIZACIÓN ARCHIVE / ESTILOS PARA LOCALIZACIÓN ARCHIVE / ESTILOS PARA LOCALIZACIÓN ARCHIVE */
/* Estilos para archive-localizacion.php */

ul.localizaciones-list {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   margin: 0;
}

.localizaciones-list a {
   text-decoration: none;
}

.localizacion-card {
   list-style: none;
}
.localizacion-card {
   display: flex;
   min-width: 300px;
   gap: 1rem;
   background-color: rgba(0, 0, 0, 0.15);
   color: var(--color-secondary);
   padding: 0.5rem;
   border-radius: 16px;
   align-items: center;

   width: 100%;
   width: -moz-available; /* Firefox */
   width: -webkit-fill-available; /* Chrome */
   width: fill-available; /* Estándar */

   transition: all 0.5s cubic-bezier(0.15, 1, 0.3, 1);
}
.localizacion-card:hover {
   background-color: var(--color-secondary);
   transform: scale(1.01);
   box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.1);
   color: var(--color-terciary);
}
.localizacion-card:hover svg {
   fill: var(--color-terciary);
}

.localizacion-title {
   font-size: 2rem;
   text-transform: uppercase;
}

/* HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER */

.main-navigation {
   display: none;
}

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

.site-branding {
   display: flex;
   justify-content: center;
   width: 100%;
   width: -moz-available; /* Firefox */
   width: -webkit-fill-available; /* Chrome */
   width: fill-available; /* Estándar */
   padding: 1.5rem;
   font-size: 1.4rem;
   text-transform: uppercase;
   font-variation-settings: "wght" 700;
}
.site-branding a {
   text-decoration: none;
   color: var(--color-primary);
}

.hamburger-button {
   background: none;
   border: none;
   cursor: pointer;
   position: absolute;
   right: 0;
   width: 50px;
   height: 20px;
   z-index: 10; /* Asegura que esté por encima del lightbox */
}

.hamburger-icon {
   display: flex;
   width: 100%;
   height: 2px;
   background-color: var(--color-secondary);
   position: relative;
   transition: all 0.3s cubic-bezier(0.15, 1, 0.3, 1);
}

.hamburger-icon::before,
.hamburger-icon::after {
   content: "";
   position: absolute;
   width: 100%;
   height: 2px;
   background-color: var(--color-secondary);
   transition: all 0.3s cubic-bezier(0.15, 1, 0.3, 1);
}

.hamburger-icon::before {
   top: -8px;
}

.hamburger-icon::after {
   top: 8px;
}

/* Estado al abrir */
.hamburger-button[aria-expanded="true"] .hamburger-icon {
   background-color: transparent;
}

.hamburger-button[aria-expanded="true"] .hamburger-icon::before {
   transform: rotate(45deg);
   background-color: var(--color-terciary);
   top: 0;
}

.hamburger-button[aria-expanded="true"] .hamburger-icon::after {
   transform: rotate(-45deg);
   background-color: var(--color-terciary);
   top: 0;
}

.menu-lightbox {
   position: fixed;
   top: 0;
   right: 0;
   width: 100vw;
   height: 100vh;
   background-color: #f34414cc;
   color: white;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   opacity: 0; /* Inicialmente oculto */
   transform: scale(0.5); /* Escala inicial */
   transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.15, 1, 0.3, 1);
   z-index: 5;

   /* Efecto frosted glass */
   backdrop-filter: blur(15px); /* Desenfoque del fondo */
   border: 1px solid rgba(255, 255, 255, 0.3); /* Borde sutil */
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* Sombra opcional */
}

.menu-lightbox[aria-hidden="false"] {
   opacity: 1; /* Aparece */
   transform: scale(1); /* Escala completa */
   pointer-events: all; /* Desactiva interactividad */
}

/* Transición para el cierre */
.menu-lightbox[aria-hidden="true"] {
   opacity: 0;
   transform: scale(0.5); /* Regresa al estado inicial */
   pointer-events: none; /* Desactiva interactividad */
}

/* Menú */
.menu-list {
   display: flex;
   flex-direction: column;
   gap: 6rem;
   list-style: none;
   padding: 0;
   margin: 0;
}

.menu-list li {
   text-align: center;
}

.menu-list a {
   font-size: 4rem;
   color: var(--color-terciary);
   text-decoration: none;
   transition: color 0.3s cubic-bezier(0.15, 1, 0.3, 1);
   font-variation-settings: "wght" 700;
   text-transform: uppercase;
   border: 1px solid black;
   border-radius: 44px;
   padding: 2rem 3rem;
   transition: all 0.5s cubic-bezier(0.15, 1, 0.3, 1);
}

.menu-list a:hover {
   background-color: white;
   color: black;
   transform: scale(1.01);
   box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Botón cerrar */
.menu-close-button {
   position: absolute;
   top: 1rem;
   right: 1rem;
   background: none;
   border: none;
   color: white;
   font-size: 3rem;
   cursor: pointer;
}

/* Ocultar en Menú opción de Localizaciones cuando solo-madrid está activo */
.solo-madrid-active .menu-list li a[href*="localizaciones"] {
   display: none;
}

/* Si el elemento localizaciones es el último del menú y quieres evitar espacios vacíos */
.solo-madrid-active .menu-list li:has(a[href*="localizaciones"]) {
   display: none;
}

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

/* Contenedor del ticker */
.ticker {
   position: relative;
   width: 100%; /* Ancho completo del viewport */
   overflow: hidden; /* Oculta contenido fuera del contenedor */
   background-color: black; /* Fondo opcional */
   color: var(--color-secondary);
   font-size: 1.2rem; /* Tamaño del texto */
   font-weight: bold;
   white-space: nowrap; /* Evita saltos de línea */
   text-transform: uppercase;
   padding: 2rem 0;
   font-variation-settings: "wght" 700;
}

/* Wrapper del contenido animado */
.ticker__wrapper {
   display: flex; /* Alinea horizontalmente los elementos duplicados */
   animation: scroll linear infinite; /* La duración se define dinámicamente */
}

/* Contenido del texto */
.ticker__content {
   flex-shrink: 0; /* Evita que el contenido se reduzca */
   white-space: nowrap; /* Mantiene el texto en una línea */
   padding-right: 1rem; /* Espaciado entre repeticiones */
}

@keyframes scroll {
   from {
      transform: translateX(0); /* Empieza en el borde izquierdo */
   }
   to {
      transform: translateX(-100%); /* Desplaza todo hacia la izquierda */
   }
}

.social {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
   padding: 2rem;
   font-variation-settings: "wght" 600;
   color: var(--color-secondary);
}

.social-icons {
   display: flex;
   gap: 1rem;
}

.site-info {
   background-color: var(--color-terciary);
   color: var(--color-primary);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
   padding: 2rem;
}

.logo-footer {
   font-size: 4rem;
   text-transform: uppercase;
   font-variation-settings: "wght" 900;
   transition: all 0.5s cubic-bezier(0.15, 1, 0.3, 1);
}
.logo-footer:hover {
   transform: rotate(-3deg);
}
.logo-footer a,
.logo-claim a {
   text-decoration: none;
}
.logo-claim {
   font-variation-settings: "wght" 700;
   font-size: 1.4rem;
   color: var(--color-secondary);
   transition: all 0.5s cubic-bezier(0.15, 1, 0.3, 1);
}
.logo-claim:hover {
   transform: scale(1.01);
}

/* PÁGINAS PÁGINAS PÁGINAS PÁGINAS PÁGINAS PÁGINAS PÁGINAS PÁGINAS PÁGINAS PÁGINAS  */

.entry-content {
   margin: 0;
}
article.page {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 3rem;
   color: black;
   padding: 3rem;
   max-width: 750px;
   overflow: hidden;
   margin: 0;
}
.page-featured-image {
   width: 130px;
   border-radius: 12px;
   overflow: hidden;
}

.sobre-nosotros p,
.privacy-policy p {
   font-size: 1.7rem;
   margin-bottom: 1rem;
}
.page p strong {
   font-variation-settings: "wght" 900;
}
.page h2 {
   font-size: 1.7rem;
   margin-bottom: 1rem;
   font-variation-settings: "wght" 900;
}
.wp-block-heading {
   border-bottom: 1px solid var(--color-terciary);
   border-top: 1px solid var(--color-terciary);
   padding: 0.5rem 0;
}
.email {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 2rem;
   width: 100%;
}
.email h3 {
   font-size: 1.7rem;
   font-variation-settings: "wght" 900;
}
.email a {
   text-decoration: none;
}

.email-submit {
   color: var(--color-terciary);
   background-color: rgba(0, 0, 0, 0.15);
   padding: 1rem 2rem;
   border-radius: 25px;
   font-size: 1.4rem;
   cursor: pointer;
   transition: all 0.5s cubic-bezier(0.15, 1, 0.3, 1);
   font-variation-settings: "wght" 700;
}

.email-submit:hover {
   color: var(--color-terciary);
   background-color: var(--color-secondary);
   transform: scale(1.01);
   box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* NEWSLETTER NEWSLETTER NEWSLETTER NEWSLETTER NEWSLETTER NEWSLETTER NEWSLETTER NEWSLETTER NEWSLETTER */

.newsletter-container {
   max-width: 60%;
   min-width: 300px;
   margin: 3rem auto;
   background-color: var(--color-primary);
   border-radius: 16px;
   color: var(--color-terciary);
}

.newsletter-form {
   display: flex;
   flex-direction: column;
   gap: 2rem;
}

.form-group {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}

.form-group label {
   font-size: 1.4rem;
   font-variation-settings: "wght" 700;
}

.form-group input {
   padding: 1rem;
   border: 1px solid var(--color-terciary);
   border-radius: 8px;
   font-size: 1.4rem;
   background: var(--color-secondary);
}

.form-group input:focus {
   outline: none;
   border-color: var(--color-terciary);
   box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.newsletter-submit {
   background: var(--color-terciary);
   color: var(--color-secondary);
   border: 1px solid var(--color-terciary);
   padding: 1rem 2rem;
   border-radius: 25px;
   font-size: 1.4rem;
   cursor: pointer;
   transition: all 0.5s cubic-bezier(0.15, 1, 0.3, 1);
   font-variation-settings: "wght" 700;
   text-transform: uppercase;
}

.newsletter-submit:hover {
   color: var(--color-terciary);
   background-color: var(--color-secondary);
   border: 1px solid var(--color-terciary);
   transform: scale(1.01);
   box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.1);
}

.newsletter-response {
   font-size: 1.2rem;
   text-align: left;
   margin-top: 2rem;
}

.loading {
   text-align: center;
   color: var(--color-terciary);
   font-variation-settings: "wght" 700;
   padding: 1rem;
}

.newsletter-success {
   margin-top: 2rem;
   text-align: left;
   color: #242424;
}

.newsletter-success h3 {
   margin-bottom: 1rem;
   font-variation-settings: "wght" 700;
}

.newsletter-intro {
   text-align: center;
   border-bottom: 1px solid black;
}
.newsletter-outro {
   text-align: center;
   border-top: 1px solid black;
}

.newsletter-title {
   margin-bottom: 2rem;
   color: var(--color-terciary);
   width: auto;
   font-size: 3.2rem;
}

.newsletter-features {
   text-align: center;
   max-width: 590px;
   margin: 0 auto;
   padding: 2rem 0;
}

.newsletter-features ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

.newsletter-features li {
   font-size: 1.7rem;
   margin: 0.6rem 0;
   padding-left: 0.5rem;
   color: var(--color-terciary);
}

.newsletter-cta {
   margin: 2rem 0;
   color: var(--color-terciary);
   font-variation-settings: "wght" 700;
   text-align: left;
   font-size: 1.7rem;
}

.newsletter-guarantee {
   font-size: 1.2rem;
   opacity: 0.8;
   margin-top: 1rem;
   color: var(--color-terciary);
}

/* NEWSLETTER-POPUP NEWSLETTER-POPUP NEWSLETTER-POPUP NEWSLETTER-POPUP NEWSLETTER-POPUP NEWSLETTER-POPUP */

.newsletter-popup {
   /* position: fixed;
   bottom: 0;
   right: 0;
   width: 100%;
   height: 100%; */
   z-index: 9999;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
}

.newsletter-popup.is-visible {
   opacity: 1;
   visibility: visible;
}

.newsletter-popup__overlay {
   /* position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%; 
   background-color: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(15px);
   padding: 2rem;*/
   display: flex;
   justify-content: center;
   align-items: center;
}

.newsletter-popup__content {
   background-color: var(--color-primary);
   background-color: rgba(255, 255, 255, 0.5);
   backdrop-filter: blur(15px);
   padding: 3rem;
   border-radius: 16px;
   position: relative;
   max-width: 360px;
   width: 100%;
   transform: translateY(20px);
   transition: transform 0.3s ease;
}

.newsletter-popup.is-visible .newsletter-popup__content {
   transform: translateY(0);
}

.newsletter-popup__close {
   position: absolute;
   top: 1rem;
   right: 1rem;
   background: none;
   border: none;
   font-size: 2rem;
   cursor: pointer;
   color: var(--color-terciary);
   padding: 0.5rem;
   line-height: 1;
}

.newsletter-popup-container {
   max-width: 100%;
}

.wrapper-cookies-newsletter {
   position: fixed;
   bottom: 0;
   right: 0;
   z-index: 9999;
   padding: 1rem;
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

/* FRONTPAGE FRONTPAGE FRONTPAGE FRONTPAGE FRONTPAGE FRONTPAGE FRONTPAGE FRONTPAGE FRONTPAGE */

.logo-header {
   transition: all 0.5s cubic-bezier(0.15, 1, 0.3, 1);
}
.logo-header a {
   text-decoration: none;
}
.logo-header h1 {
   font-size: 7rem;
}
.logo-header:hover {
   transform: rotate(-3deg) !important;
}
.home-description p {
   font-size: 2.1rem;
   font-variation-settings: "wght" 700;
   text-align: center;
}

/* Estilos para la transición de página */

.page-transition {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: var(--color-primary);
   z-index: 9999;
   opacity: 1; /* Comienza visible */
   pointer-events: none;
   transition: opacity 0.5s ease;
}

.page-transition.is-active {
   opacity: 1;
   pointer-events: all;
}

.page-transition:not(.is-active) {
   opacity: 0;
}

/* Estilos base para animaciones */

.logo-header,
.home-description,
.localizacion-card {
   will-change: transform, opacity;
}

/* Contenedor principal */
.site-main {
   overflow-x: hidden;
}

/* Optimización de rendimiento */
.localizaciones-list {
   will-change: contents;
   backface-visibility: hidden;
}

.hidden-sound {
   position: fixed;
   top: -9999px;
   left: -9999px;
   width: 1px;
   height: 1px;
   opacity: 0.01;
   pointer-events: none;
   visibility: hidden;
}

/* COOKIES BANNER COOKIES BANNER COOKIES BANNER COOKIES BANNER COOKIES BANNER COOKIES BANNER */

.cookies-banner {
   /* position: fixed;
   bottom: 20px;
   right: 20px; 
   margin-left: 20px;*/
   max-width: 360px;
   width: fit-content;
   background-color: rgba(255, 255, 255, 0.5);
   backdrop-filter: blur(15px);
   color: black;
   padding: 2rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-direction: column;
   gap: 1rem;
   border-radius: 16px;
   z-index: 1000;
}

.cookies-banner p {
   font-size: 1.3rem;
   margin: 0;
}

.cookies-banner button {
   font-size: 1.3rem;
   background-color: rgba(0, 0, 0, 0.15);
   color: black;
   padding: 1rem 2rem;
   border: none;
   border-radius: 25px;
   cursor: pointer;
   transition: all 0.5s cubic-bezier(0.15, 1, 0.3, 1);
}
.cookies-banner button:hover {
   background-color: white;
   color: black;
   transform: scale(1.01);
   box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.1);
}