/* =============================================================
   EL JM — Que la fiesta no termine
   Identidad: cartel urbano nocturno. Degradado azul noche,
   acento ámbar, tipografía condensada de alto impacto que
   hace eco del logo agrietado/rayo.
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@400;500;600;700&display=swap");

:root {
  --azul-noche: #060c17;
  --azul-medio: #14314f;
  --azul-claro: #2c6089;
  --panel: #0d1c2f;
  --panel-2: #122842;
  --ambar: #f2994a;
  --ambar-fuerte: #ff8a1e;
  --texto: #f5f7fb;
  --texto-tenue: #a9bcd0;
  --linea: #23415f;

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Oswald", "Segoe UI", sans-serif;
}

/* ---------- RESET BÁSICO ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--azul-noche);
  color: var(--texto);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1.03;
  text-transform: uppercase;
}

:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* =============================================================
   HEADER + MENÚ
   ============================================================= */

.header {
  position: relative;
  background: linear-gradient(
    135deg,
    var(--azul-noche) 0%,
    var(--azul-medio) 55%,
    var(--azul-claro) 100%
  );
  overflow: hidden;
}

.header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.025) 0 2px,
    transparent 2px 60px
  );
  pointer-events: none;
}

.menu {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 24px;
  position: relative;
  z-index: 50;
}

.logo {
  width: 78px;
  height: auto;
}

/* ---------- HERO ---------- */

.header-content {
  display: flex;
  flex-direction: column; /* Alinea todo en una sola columna vertical */
  align-items: center;    /* Centra los bloques horizontalmente */
  
  /* ========================================================= */
  /* 📐 MEDIDA 1: DISTANCIA ENTRE EL BOTÓN Y LA IMAGEN        */
  /* Ajusta este valor (ej. 20px, 40px) para acercar o alejar  */
  /* ========================================================= */
  gap: 30px; 
  
  padding: 40px 24px 110px;
  position: relative;
  z-index: 2;
}

.header-txt {
  width: 100%;
  max-width: 600px;    /* Limita el ancho del texto para que no se estire feo */
  text-align: center;  /* Centra el texto y el botón. Si lo quieres a la izquierda, cámbialo a left */
}


.header-txt span {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ambar);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 1.05rem;
  margin-bottom: 10px;
}

.header-txt h1 {
  font-size: clamp(2.8rem, 7.2vw, 5.6rem);
  color: var(--texto);
  letter-spacing: 0.01em;
  margin-bottom: 26px;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.45);
}

.header-txt p {
  color: var(--texto-tenue);
  max-width: 50ch;
  font-size: 1.05rem;
  
  /* ========================================================= */
  /* 📐 MEDIDA 2: DISTANCIA ENTRE EL TEXTO Y EL BOTÓN         */
  /* Baja este número si quieres que el botón suba más         */
  /* ========================================================= */
  margin-bottom: 24px; 
}


.header-img {
  flex: 1 1 150px;
  display: flex;
  justify-content: center;
}

.header-img img {
  /* CAMBIA ESTE VALOR: original era 400px */
  max-width: 320px; /* <--- Pon 320px si la quieres más chica, o 500px si la quieres más grande */
  
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}




/* ---------- BOTÓN PRINCIPAL ---------- */

.btn-1 {
  display: inline-block;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  font-size: 1.05rem;
  color: var(--azul-noche);
  background: var(--ambar);
  padding: 15px 36px;
  border: 2px solid var(--ambar);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.btn-1:hover,
.btn-1:focus-visible {
  background: transparent;
  color: var(--ambar);
  box-shadow: 0 0 0 2px var(--ambar) inset;
  transform: translateY(-2px);
}

/* =============================================================
   SECCIÓN LICORES
   ============================================================= */

.services-1 {
  padding: 100px 24px;
  text-align: center;
  background: var(--azul-noche);
}

.services-1 h2,
.redes h2 {
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  color: var(--texto);
}

.linea-decorativa,
.linea-decorativa-redes {
  width: 80px;
  height: 4px;
  background: var(--ambar);
  margin: 18px auto 54px;
}

.info .linea-decorativa {
  margin: 18px 0 24px;
}

.licores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  text-align: left;
}

.licor-card {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-top: 3px solid var(--ambar);
  padding: 28px;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.licor-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.6);
}

.licor-img-wrapper {
  background: var(--panel-2);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 20px;
}

.licor-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.licor-card:hover .licor-img-wrapper img {
  transform: scale(1.06);
}

.licor-card h3 {
  font-size: 1.5rem;
  color: var(--ambar);
  margin-bottom: 10px;
}

.licor-card p {
  color: var(--texto-tenue);
  font-family: var(--font-body);
  font-size: 0.95rem;
  text-transform: none;
  margin-bottom: 20px;
}

.btn-licor {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--texto);
  border-bottom: 2px solid var(--ambar);
  padding-bottom: 2px;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.btn-licor:hover,
.btn-licor:focus-visible {
  color: var(--ambar);
}

/* =============================================================
   SECCIÓN SOBRE NOSOTROS
   ============================================================= */

.info {
  padding: 100px 24px;
  background: linear-gradient(
    160deg,
    var(--azul-medio) 0%,
    var(--azul-noche) 70%
  );
}

.info-wrapper {
  display: flex;
  align-items: center;
  gap: 50px;
}

.info-txt {
  flex: 1 1 420px;
}

.info-txt h2 {
  font-size: clamp(2.1rem, 5vw, 3.2rem);
}

.info-txt p {
  color: var(--texto-tenue);
  font-family: var(--font-body);
  text-transform: none;
  margin-bottom: 28px;
  max-width: 60ch;
}

.info-banner {
  flex: 1 1 320px;
  display: flex;
  justify-content: center;
}

.banner-neon-box {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 2px solid var(--ambar);
}

.banner-neon-box img {
  width: 60%;
}

/* =============================================================
   SECCIÓN REDES SOCIALES
   ============================================================= */

.redes {
  padding: 100px 24px;
  text-align: center;
  background: var(--azul-noche);
}

.redes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
  max-width: 640px;
  margin: 0 auto;
}

.redes-card {
  background: var(--panel);
  border: 1px solid var(--linea);
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.redes-icono {
  width: 46px;
  height: 46px;
  margin-bottom: 6px;
  color: var(--ambar);
}

.redes-card h3 {
  font-size: 1.2rem;
  letter-spacing: 0.03em;
}

.redes-card span {
  color: var(--texto-tenue);
  font-size: 0.95rem;
  text-transform: none;
}

.redes-card:hover,
.redes-card:focus-visible {
  border-color: var(--ambar);
  box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.6);
  transform: translateY(-6px);
}

/* =============================================================
   FOOTER
   ============================================================= */

.footer {
  text-align: center;
  padding: 28px 24px;
  background: var(--azul-noche);
  border-top: 1px solid var(--linea);
  color: var(--texto-tenue);
  font-family: var(--font-body);
  font-size: 0.85rem;
}

/* =============================================================
   RESPONSIVE — TABLET
   ============================================================= */

@media (max-width: 900px) {
  .info-wrapper {
    flex-direction: column;
    text-align: center;
  }

  .info-txt p {
    margin-left: auto;
    margin-right: auto;
  }

  .header-content {
    flex-direction: column-reverse;
    text-align: center;
    padding-bottom: 50px;
  }

  .header-txt p {
    margin-left: auto;
    margin-right: auto;
  }
}

/* =============================================================
   RESPONSIVE — MÓVIL (menú hamburguesa)
   ============================================================= */

@media (max-width: 720px) {
  .header-content {
    justify-content: flex-start;
    padding-top: 20px;
    padding-bottom: 40px;
    gap: 20px;
  }

  .header-img {
    order: -1;
  }

  .header-img img {
    max-width: 160px;
    margin: 0 auto;
  }

  .header-txt h1 {
    font-size: 2.5rem;
  }

  .licores-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .container {
    padding: 0 16px;
  }
  .menu {
    padding: 16px;
  }
  .logo {
    width: 60px;
  }
}

/* Coloca la imagen debajo del texto y del botón */
.header-content {
  flex-direction: column-reverse; /* Pone la imagen abajo y el texto arriba */
  justify-content: center;
  align-items: center;
  text-align: center; /* Centra el texto y el botón para alinearse con la imagen */
  gap: 30px;          /* <--- CONTROL DE DISTANCIA GENERAL */
}

/* Ajustes opcionales de separación interna */
.header-txt p {
  margin-bottom: 24px; /* <--- DISTANCIA ENTRE PÁRRAFO Y BOTÓN */
}

.header-img {
  flex: 0 1 auto;
}