/* ============================================================

   GANAR SRL

   NUEVAS SECCIONES

   1. PERCHÉ SCEGLIERCI

   2. CONTATTI

   3. DOVE SIAMO / MAPPA

   ============================================================ */



/* ============================================================

   1. PERCHÉ SCEGLIERCI - RESPONSIVE MEJORADO

   ============================================================ */



.why-section {

  position: relative;

  width: 100%;

  min-height: 100vh;

  height: 100vh;

  overflow: hidden;

  background: #050505;

  color: #fff;

}



/* FONDO */

.why-background {

  position: absolute;

  inset: 0;

  background-image:

    linear-gradient(

      90deg,

      rgba(0, 0, 0, 0.94) 0%,

      rgba(0, 0, 0, 0.88) 45%,

      rgba(0, 0, 0, 0.72) 100%

    ),

    url("assets/why-background.jpg");

  background-size: cover;

  background-position: center;

  filter: grayscale(100%);

  transform: scale(1.02);

  z-index: 0;

}



/* OVERLAY */

.why-overlay {

  position: absolute;

  inset: 0;

  background: radial-gradient(

    circle at 75% 50%,

    rgba(255, 255, 255, 0.05),

    transparent 35%

  );

  z-index: 1;

}



/* CONTENIDO */

.why-content {

  position: relative;

  z-index: 2;

  width: min(1350px, 90vw);

  height: 100%;

  margin: 0 auto;

  padding: calc(var(--header-height) + 55px) 0 45px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}



/* HEADER */

.why-header {

  max-width: 950px;

  margin-bottom: 25px;

}



.why-label {

  display: block;

  margin-bottom: 14px;

  font-size: 0.7rem;

  font-weight: 400;

  letter-spacing: 0.35em;

  color: rgba(255, 255, 255, 0.55);

}



.why-header h2 {

  margin: 0;

  font-size: clamp(2.8rem, 5vw, 5rem);

  line-height: 1.02;

  font-weight: 300;

  letter-spacing: -0.04em;

}



.why-header p {

  max-width: 700px;

  margin-top: 20px;

  font-size: clamp(0.95rem, 1.3vw, 1.15rem);

  line-height: 1.6;

  font-weight: 300;

  color: rgba(255, 255, 255, 0.68);

}



/* GRID */

.why-grid {

  width: 100%;

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 18px;

}



/* ============================================================

   PERCHÉ SCEGLIERCI

   CLARO → OSCURO

   ============================================================ */



/* Estado inicial */

.why-section {

  background-color: #fff;

  transition: background-color 1.5s ease;

}



/* Elementos inicialmente ocultos */

.why-section .why-header,

.why-section .why-card {

  opacity: 0;

  transform: translateY(35px);

}



/* Estado final */

.why-section.is-visible {

  background-color: #000;

}



.why-section.is-visible .why-header,

.why-section.is-visible .why-card {

  opacity: 1;

  transform: translateY(0);



  transition:

    opacity 1.5s ease,

    transform 1.5s ease;

}



/* Encabezado */

.why-section.is-visible .why-header {

  transition-delay: 0.15s;

}



/* Cards */

.why-section.is-visible .why-card:nth-child(1) {

  transition-delay: 0.3s;

}



.why-section.is-visible .why-card:nth-child(2) {

  transition-delay: 0.45s;

}



.why-section.is-visible .why-card:nth-child(3) {

  transition-delay: 0.6s;

}



.why-section.is-visible .why-card:nth-child(4) {

  transition-delay: 0.75s;

}



/* CARD */

.why-card {

  position: relative;

  min-height: 250px;

  padding: 28px 25px 30px;

  border: 1px solid rgba(255, 255, 255, 0.25);

  border-radius: 14px;

  background: rgba(0, 0, 0, 0.48);

  backdrop-filter: blur(8px);

  display: flex;

  flex-direction: column;

  transition:

    transform 0.45s ease,

    border-color 0.45s ease,

    background 0.45s ease,

    box-shadow 0.45s ease;

}



.why-card:hover {

  transform: translateY(-8px);

  border-color: rgba(255, 255, 255, 0.8);

  background: rgba(15, 15, 15, 0.82);

  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);

}



/* NUMBER */

.why-number {

  position: absolute;

  top: 20px;

  right: 22px;

  font-size: 0.65rem;

  letter-spacing: 0.18em;

  color: rgba(255, 255, 255, 0.35);

}



/* ICON */

/* .why-icon {

  width: 48px;

  height: 48px;

  margin-bottom: 28px;

  border: 1px solid rgba(255, 255, 255, 0.55);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

} */



/* .why-icon span {

  font-size: 0.65rem;

  letter-spacing: 0.1em;

  color: rgba(255, 255, 255, 0.8);

} */



/* CARD TITLE */

.why-card h3 {

  margin: 0;

  font-size: 1.2rem;

  line-height: 1.25;

  font-weight: 400;

}



/* CARD DESCRIPTION */

.why-card p {

  margin-top: 16px;

  font-size: 0.88rem;

  line-height: 1.55;

  font-weight: 300;

  color: rgba(255, 255, 255, 0.62);

}



/* ============================================================

   ANIMACIÓN PERCHÉ SCEGLIERCI

   ============================================================ */



.why-card {

  opacity: 0;

  transform: translateY(45px);

}



.why-section.is-visible .why-card {

  opacity: 1;

  transform: translateY(0);

  transition:

    opacity 0.7s ease,

    transform 0.7s cubic-bezier(0.22, 0.9, 0.3, 1);

}



.why-section.is-visible .why-card:nth-child(1) {

  transition-delay: 0.1s;

}

.why-section.is-visible .why-card:nth-child(2) {

  transition-delay: 0.2s;

}

.why-section.is-visible .why-card:nth-child(3) {

  transition-delay: 0.3s;

}

.why-section.is-visible .why-card:nth-child(4) {

  transition-delay: 0.4s;

}



/* ============================================================

   2. CONTACT SECTION - RESPONSIVE MEJORADO

   ============================================================ */



.contact-section {

  position: relative;

  width: 100%;

  height: 100vh;

  min-height: 700px;

  overflow: hidden;

  background: #050505;

  color: #fff;

}



/* FONDO */

.contact-background {

  position: absolute;

  inset: 0;

  background-image:

    linear-gradient(rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.96)),

    url("assets/contact-background.jpg");

  background-size: cover;

  background-position: center;

  filter: grayscale(100%);

  transform: scale(1.02);

  z-index: 0;

}



.contact-overlay {

  position: absolute;

  inset: 0;

  background: radial-gradient(

    circle at center,

    rgba(255, 255, 255, 0.035),

    transparent 55%

  );

  z-index: 1;

}



/* CONTENIDO */

.contact-content {

  position: relative;

  z-index: 2;

  width: min(1200px, 88vw);

  height: 100%;

  margin: 0 auto;

  padding: calc(var(--header-height) + 50px) 0 40px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}



/* HEADER */

.contact-header {

  max-width: 850px;

  margin-bottom: 50px;

}



.contact-label {

  display: block;

  margin-bottom: 18px;

  font-size: 0.7rem;

  letter-spacing: 0.35em;

  color: rgba(255, 255, 255, 0.5);

}



.contact-header h2 {

  margin: 0;

  font-size: clamp(2.8rem, 5vw, 5rem);

  line-height: 1.02;

  font-weight: 300;

  letter-spacing: -0.04em;

}



.contact-header p {

  max-width: 650px;

  margin-top: 25px;

  font-size: 1rem;

  line-height: 1.6;

  font-weight: 300;

  color: rgba(255, 255, 255, 0.65);

}



/* ============================================================

   CONTACTO - ANIMACIÓN DE ENTRADA

   EL FONDO NO CAMBIA

   ============================================================ */



/* Estado inicial */

.contact-section .contact-header,

.contact-section .contact-form-panel,

.contact-section .contact-info-panel,

.contact-section .contact-footer {

  opacity: 0;

  transform: translateY(35px);

}



/* Estado visible */

.contact-section.is-visible .contact-header,

.contact-section.is-visible .contact-form-panel,

.contact-section.is-visible .contact-info-panel,

.contact-section.is-visible .contact-footer {

  opacity: 1;

  transform: translateY(0);



  transition:

    opacity 1.5s ease,

    transform 1.5s ease;

}



/* ============================================================

   ENTRADA ESCALONADA

   ============================================================ */



/* Título */

.contact-section.is-visible .contact-header {

  transition-delay: 0.1s;

}



/* Panel izquierdo */

.contact-section.is-visible .contact-form-panel {

  transition-delay: 0.3s;

}



/* Panel derecho */

.contact-section.is-visible .contact-info-panel {

  transition-delay: 0.5s;

}



/* Footer */

.contact-section.is-visible .contact-footer {

  transition-delay: 0.7s;

}



/* GRID CONTACTOS */

.contact-grid {

  width: 100%;

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 18px;

}



/* CONTACT CARD */

.contact-card {

  position: relative;

  min-height: 180px;

  padding: 30px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  border: 1px solid rgba(255, 255, 255, 0.25);

  border-radius: 14px;

  background: rgba(0, 0, 0, 0.55);

  text-decoration: none;

  color: #fff;

  transition:

    transform 0.45s ease,

    background 0.45s ease,

    border-color 0.45s ease;

}



.contact-card:hover {

  transform: translateY(-7px);

  background: rgba(255, 255, 255, 0.08);

  border-color: rgba(255, 255, 255, 0.8);

}



/* CONTACT NUMBER */

.contact-number {

  position: absolute;

  top: 20px;

  right: 22px;

  font-size: 0.65rem;

  letter-spacing: 0.15em;

  color: rgba(255, 255, 255, 0.35);

}



/* CONTACT CONTENT */

.contact-card-content {

  margin-top: auto;

}



.contact-card-label {

  display: block;

  margin-bottom: 12px;

  font-size: 0.65rem;

  letter-spacing: 0.25em;

  color: rgba(255, 255, 255, 0.45);

}



.contact-card h3 {

  margin: 0;

  font-size: clamp(1rem, 1.5vw, 1.3rem);

  font-weight: 400;

  word-break: break-word;

}



/* ARROW */

.contact-arrow {

  position: absolute;

  right: 25px;

  bottom: 25px;

  font-size: 1.3rem;

  opacity: 0.5;

  transition:

    transform 0.3s ease,

    opacity 0.3s ease;

}



.contact-card:hover .contact-arrow {

  opacity: 1;

  transform: translate(4px, -4px);

}



/* FOOTER */

.contact-footer {

  margin-top: 45px;

  padding-top: 20px;

  border-top: 1px solid rgba(255, 255, 255, 0.15);

  display: flex;

  justify-content: space-between;

  font-size: 0.65rem;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.4);

}



/* ============================================================

   ANIMACIÓN CONTACTO

   ============================================================ */



.contact-header,

.contact-card,

.contact-footer {

  opacity: 0;

  transform: translateY(35px);

}



.contact-section.is-visible .contact-header {

  opacity: 1;

  transform: translateY(0);

  transition:

    opacity 0.7s ease,

    transform 0.7s ease;

}



.contact-section.is-visible .contact-card {

  opacity: 1;

  transform: translateY(0);

  transition:

    opacity 0.7s ease,

    transform 0.7s cubic-bezier(0.22, 0.9, 0.3, 1);

}



.contact-section.is-visible .contact-card:nth-child(1) {

  transition-delay: 0.15s;

}

.contact-section.is-visible .contact-card:nth-child(2) {

  transition-delay: 0.25s;

}

.contact-section.is-visible .contact-card:nth-child(3) {

  transition-delay: 0.35s;

}



.contact-section.is-visible .contact-footer {

  opacity: 1;

  transform: translateY(0);

  transition:

    opacity 0.7s ease 0.45s,

    transform 0.7s ease 0.45s;

}



/* ============================================================

   RESPONSIVE MEJORADO

   ============================================================ */



/* === TABLET GRANDE (1024px - 1200px) === */

@media (max-width: 1200px) {

  .why-content {

    width: 92vw;

    padding-top: calc(var(--header-height) + 45px);

  }



  .why-grid {

    gap: 14px;

  }



  .why-card {

    min-height: 230px;

    padding: 24px 22px 26px;

  }



  .contact-content {

    width: 92vw;

    padding-top: calc(var(--header-height) + 40px);

  }



  .contact-grid {

    gap: 14px;

  }



  .contact-card {

    min-height: 160px;

    padding: 26px 24px;

  }

}



/* === TABLET (768px - 1024px) === */

@media (max-width: 1024px) {

  .why-section {

    height: auto;

    min-height: 100vh;

  }



  .why-content {

    min-height: 100vh;

    padding-top: calc(var(--header-height) + 80px);

    padding-bottom: 50px;

    justify-content: flex-start;

  }



  .why-header {

    margin-bottom: 35px;

  }



  .why-header h2 {

    font-size: clamp(2.5rem, 6vw, 3.5rem);

  }



  .why-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 14px;

  }



  .why-card {

    min-height: 200px;

    padding: 22px 20px 24px;

  }



  .why-card h3 {

    font-size: 1.1rem;

  }



  .why-card p {

    font-size: 0.85rem;

    margin-top: 12px;

  }



  .contact-section {

    height: auto;

    min-height: 100vh;

  }



  .contact-content {

    min-height: 100vh;

    padding-top: calc(var(--header-height) + 80px);

    padding-bottom: 45px;

    justify-content: flex-start;

  }



  .contact-header {

    margin-bottom: 35px;

  }



  .contact-header h2 {

    font-size: clamp(2.5rem, 6vw, 3.5rem);

  }



  .contact-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 14px;

  }



  .contact-card {

    min-height: 150px;

    padding: 24px 22px;

  }



  .contact-card h3 {

    font-size: 1rem;

  }

}



/* === TABLET PEQUEÑA (600px - 768px) === */

@media (max-width: 768px) {

  .why-content {

    width: 94vw;

    padding-top: calc(var(--header-height) + 70px);

    padding-bottom: 40px;

  }



  .why-header {

    margin-bottom: 25px;

  }



  .why-label {

    font-size: 0.6rem;

    letter-spacing: 0.28em;

    margin-bottom: 14px;

  }



  .why-header h2 {

    font-size: clamp(2.2rem, 8vw, 2.8rem);

  }



  .why-header p {

    font-size: 0.9rem;

    margin-top: 16px;

  }



  .why-grid {

    grid-template-columns: 1fr 1fr;

    gap: 12px;

  }



  .why-card {

    min-height: 180px;

    padding: 20px 18px 22px;

  }



  /* .why-icon {

    width: 40px;

    height: 40px;

    margin-bottom: 20px;

  } */



  .why-card h3 {

    font-size: 1rem;

  }



  .why-card p {

    font-size: 0.82rem;

    margin-top: 10px;

  }



  .why-number {

    top: 16px;

    right: 18px;

    font-size: 0.6rem;

  }



  .contact-content {

    width: 94vw;

    padding-top: calc(var(--header-height) + 70px);

    padding-bottom: 40px;

  }



  .contact-header {

    margin-bottom: 28px;

  }



  .contact-label {

    font-size: 0.6rem;

    letter-spacing: 0.28em;

    margin-bottom: 14px;

  }



  .contact-header h2 {

    font-size: clamp(2.2rem, 8vw, 2.8rem);

  }



  .contact-header p {

    font-size: 0.9rem;

    margin-top: 18px;

  }



  .contact-grid {

    grid-template-columns: 1fr 1fr;

    gap: 12px;

  }



  .contact-card {

    min-height: 140px;

    padding: 20px 18px;

  }



  .contact-card-label {

    font-size: 0.6rem;

    margin-bottom: 8px;

  }



  .contact-card h3 {

    font-size: 0.95rem;

  }



  .contact-number {

    top: 16px;

    right: 18px;

    font-size: 0.6rem;

  }



  .contact-arrow {

    right: 18px;

    bottom: 18px;

    font-size: 1.1rem;

  }



  .contact-footer {

    flex-direction: column;

    gap: 8px;

    margin-top: 30px;

    padding-top: 16px;

    text-align: center;

  }

}



/* === MOBILE (480px - 600px) === */

@media (max-width: 600px) {

  .why-content {

    width: 92vw;

    padding-top: calc(var(--header-height) + 60px);

    padding-bottom: 30px;

  }



  .why-header {

    margin-bottom: 22px;

  }



  .why-header h2 {

    font-size: clamp(2rem, 10vw, 2.4rem);

  }



  .why-header p {

    font-size: 0.85rem;

    margin-top: 14px;

  }



  .why-grid {

    grid-template-columns: 1fr;

    gap: 12px;

  }



  .why-card {

    min-height: 160px;

    padding: 18px 16px 20px;

  }



  /* .why-icon {

    width: 36px;

    height: 36px;

    margin-bottom: 16px;

  }



  .why-icon span {

    font-size: 0.6rem;

  } */



  .why-card h3 {

    font-size: 0.95rem;

  }



  .why-card p {

    font-size: 0.8rem;

    margin-top: 8px;

  }



  .why-number {

    top: 14px;

    right: 16px;

    font-size: 0.55rem;

  }



  .why-background {

    background-position: center 30%;

  }



  .contact-content {

    width: 92vw;

    padding-top: calc(var(--header-height) + 60px);

    padding-bottom: 30px;

  }



  .contact-header {

    margin-bottom: 22px;

  }



  .contact-header h2 {

    font-size: clamp(2rem, 10vw, 2.4rem);

  }



  .contact-header p {

    font-size: 0.85rem;

    margin-top: 14px;

  }



  .contact-grid {

    grid-template-columns: 1fr;

    gap: 12px;

  }



  .contact-card {

    min-height: 120px;

    padding: 18px 16px;

  }



  .contact-card-label {

    font-size: 0.55rem;

    margin-bottom: 6px;

  }



  .contact-card h3 {

    font-size: 0.9rem;

  }



  .contact-number {

    top: 14px;

    right: 16px;

    font-size: 0.55rem;

  }



  .contact-arrow {

    right: 16px;

    bottom: 16px;

    font-size: 1rem;

  }



  .contact-footer {

    margin-top: 25px;

    padding-top: 14px;

    font-size: 0.6rem;

  }

}



/* === MÓVILES MUY PEQUEÑOS (hasta 400px) === */

@media (max-width: 400px) {

  .why-content {

    padding-top: calc(var(--header-height) + 50px);

  }



  .why-header h2 {

    font-size: 1.8rem;

  }



  .why-header p {

    font-size: 0.8rem;

  }



  .why-card {

    min-height: 140px;

    padding: 16px 14px 18px;

  }



  .why-card h3 {

    font-size: 0.9rem;

  }



  .why-card p {

    font-size: 0.75rem;

  }



  .contact-content {

    padding-top: calc(var(--header-height) + 50px);

  }



  .contact-header h2 {

    font-size: 1.8rem;

  }



  .contact-header p {

    font-size: 0.8rem;

  }



  .contact-card {

    min-height: 110px;

    padding: 16px 14px;

  }



  .contact-card h3 {

    font-size: 0.85rem;

  }

}



/* === ORIENTACIÓN PAISAJE EN MÓVIL === */

@media (orientation: landscape) and (max-height: 600px) {

  .why-section {

    height: auto;

    min-height: 100vh;

  }



  .why-content {

    padding-top: calc(var(--header-height) + 40px);

    padding-bottom: 30px;

    justify-content: flex-start;

  }



  .why-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 10px;

  }



  .why-card {

    min-height: 140px;

    padding: 16px 14px 18px;

  }



  /* .why-icon {

    width: 32px;

    height: 32px;

    margin-bottom: 12px;

  } */



  .why-card h3 {

    font-size: 0.9rem;

  }



  .why-card p {

    font-size: 0.75rem;

    margin-top: 6px;

  }



  .contact-section {

    height: auto;

    min-height: 100vh;

  }



  .contact-content {

    padding-top: calc(var(--header-height) + 40px);

    padding-bottom: 30px;

    justify-content: flex-start;

  }



  .contact-grid {

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

  }



  .contact-card {

    min-height: 110px;

    padding: 16px 14px;

  }



  .contact-card h3 {

    font-size: 0.85rem;

  }

}



/* === REDUCED MOTION === */

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

  .why-card,

  .contact-header,

  .contact-card,

  .contact-footer {

    opacity: 1 !important;

    transform: none !important;

    transition: none !important;

  }



  .why-card:hover,

  .contact-card:hover {

    transform: none !important;

  }

}



/* ============================================================

   3. LOCATION / MAPA

============================================================ */

.location-section {

  position: relative;

  width: 100%;

  height: 100vh;

  min-height: 700px;

  overflow: hidden;

  background: #050505;

  color: #fff;

}



/* ------------------------------------------------------------

   MAPA - INTERACTIVO

------------------------------------------------------------ */

.location-map {

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: auto;

}



.location-map iframe {

  display: block;

  width: 100%;

  height: 100%;

  border: 0;

  filter: grayscale(100%) contrast(1.1) brightness(0.7);



  pointer-events: auto;

}



/* ------------------------------------------------------------

   OVERLAY - SOLO PARA DEGRADADO, NO BLOQUEA EL MAPA

------------------------------------------------------------ */

.location-overlay {

  position: absolute;

  inset: 0;

  z-index: 1;

  background: linear-gradient(

    90deg,

    rgba(0, 0, 0, 0.94) 0%,

    rgba(0, 0, 0, 0.82) 38%,

    rgba(0, 0, 0, 0.35) 72%,

    rgba(0, 0, 0, 0.18) 100%

  );

  pointer-events: none;

}



/* ------------------------------------------------------------

   CONTENIDO - MISMO QUE LAS DEMÁS SECCIONES

------------------------------------------------------------ */

.location-content {

  position: relative;

  z-index: 2;

  width: min(1350px, 90vw);

  height: 100%;

  margin: 0 auto;

  padding: calc(var(--header-height) + 50px) 0 50px;



  display: flex;

  flex-direction: column;

  justify-content: center;

  pointer-events: none;

}



/* ------------------------------------------------------------

   HEADER - PERMITE INTERACCIÓN

------------------------------------------------------------ */

.location-header {

  max-width: 600px;

  pointer-events: auto;

}



.location-label {

  display: block;

  margin-bottom: 20px;

  font-size: 0.7rem;

  letter-spacing: 0.35em;

  color: rgba(255, 255, 255, 0.55);

}



.location-header h2 {

  margin: 0;

  font-size: clamp(3.5rem, 7vw, 7rem);

  line-height: 0.92;

  font-weight: 300;

  letter-spacing: -0.05em;

}



.location-header p {

  max-width: 520px;

  margin-top: 30px;

  font-size: 1rem;

  line-height: 1.6;

  font-weight: 300;

  color: rgba(255, 255, 255, 0.7);

}



/* ------------------------------------------------------------

   INFORMACIÓN - PERMITE INTERACCIÓN

------------------------------------------------------------ */

.location-info {

  width: min(650px, 100%);

  margin-top: 50px;

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));



  gap: 15px;

  pointer-events: auto;

}



/* ------------------------------------------------------------

   INFO ITEM

------------------------------------------------------------ */

.location-info-item {

  padding: 22px 24px;

  border-top: 1px solid rgba(255, 255, 255, 0.3);

  display: flex;

  flex-direction: column;

  gap: 9px;

}



.location-info-item span {

  font-size: 0.62rem;

  letter-spacing: 0.25em;

  color: rgba(255, 255, 255, 0.45);

}



.location-info-item strong {

  font-size: 1rem;

  font-weight: 400;

}



/* ------------------------------------------------------------

   BOTÓN MAPA

------------------------------------------------------------ */

.location-button {

  grid-column: 1 / -1;

  min-height: 60px;

  padding: 0 24px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border: 1px solid rgba(255, 255, 255, 0.55);

  border-radius: 7px;

  background: rgba(0, 0, 0, 0.5);

  font-size: 0.75rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  text-decoration: none;

  color: #fff;

  transition:

    background 0.35s ease,

    color 0.35s ease,

    border-color 0.35s ease;



  pointer-events: auto;

}



.location-button:hover {

  background: #fff;

  color: #000;

  border-color: #fff;

}



.location-button span:last-child {

  font-size: 1.2rem;

  transition: transform 0.3s ease;

}



.location-button:hover span:last-child {

  transform: translate(4px, -4px);

}



/* ============================================================

   ANIMACIÓN MAPA

============================================================ */

.location-header,

.location-info {

  opacity: 0;

  transform: translateY(40px);

}



.location-section.is-visible .location-header {

  opacity: 1;

  transform: translateY(0);

  transition:

    opacity 0.8s ease,

    transform 0.8s cubic-bezier(0.22, 0.9, 0.3, 1);

}



.location-section.is-visible .location-info {

  opacity: 1;

  transform: translateY(0);

  transition:

    opacity 0.8s ease 0.2s,

    transform 0.8s cubic-bezier(0.22, 0.9, 0.3, 1) 0.2s;

}



/* ============================================================

   TABLET

============================================================ */

@media (max-width: 1000px) {

  .location-content {

    width: 90vw;

  }

}



/* ============================================================

   TABLET PEQUEÑA

============================================================ */

@media (max-width: 800px) {

  .location-section {

    height: auto;

    min-height: 100vh;

  }



  .location-content {

    min-height: 100vh;

    padding-top: 110px;

    padding-bottom: 45px;

    justify-content: center;

  }



  .location-info {

    margin-top: 35px;

  }

}



/* ============================================================

   MOBILE

============================================================ */

@media (max-width: 600px) {

  .location-content {

    width: 90vw;

    padding-top: 100px;

  }



  .location-overlay {

    background: linear-gradient(

      180deg,

      rgba(0, 0, 0, 0.9) 0%,

      rgba(0, 0, 0, 0.78) 55%,

      rgba(0, 0, 0, 0.5) 100%

    );

  }



  .location-header h2 {

    font-size: clamp(3.2rem, 15vw, 5rem);

  }



  .location-header p {

    font-size: 0.9rem;

  }



  .location-info {

    grid-template-columns: 1fr;

    margin-top: 30px;

  }



  .location-info-item {

    padding: 17px 20px;

  }



  .location-button {

    grid-column: auto;

    min-height: 55px;

    font-size: 0.65rem;

  }

}



/* ============================================================

   MÓVILES MUY PEQUEÑOS

============================================================ */

@media (max-width: 400px) {

  .location-header h2 {

    font-size: 3rem;

  }

}



/* ============================================================

   REDUCED MOTION

============================================================ */

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

  .location-header,

  .location-info {

    opacity: 1 !important;

    transform: none !important;

    transition: none !important;

  }

}