@font-face {
  font-family: "Montserrat";
  font-weight: 400;
  src: url("./assets/fonts/Montserrat-Regular.otf");
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  font-weight: 700;
  src: url("./assets/fonts/Montserrat-Bold.otf");
  font-display: swap;
}

/* Paleta tomada de la foto del bodegón: --pared es la fila superior del fondo
   y --piso la inferior, así el hero se funde con el resto de la página. */
:root {
  --pared: #51aae2;
  --piso: #9ed4f2;
  --cielo-alto: #53ace3;
  --marino: #0f3470;
  --marino-profundo: #0a2350;
  --blanco: #fff;
  --script: "Cormorant Garamond", Georgia, serif;
  /* alto del hero en desktop: no ocupa toda la pantalla, el formulario llega antes */
  --alto-barra: 72px;
  --alto-hero: min(calc(100svh - var(--alto-barra)), 52vw);
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: "Montserrat", sans-serif;
  background: var(--piso);
  color: var(--marino);
}

/* ---------- Barra superior (como la del landing de Campanario) ---------- */
.barra-sup {
  position: relative;
  z-index: 3;
  height: var(--alto-barra);
  background: var(--blanco);
}

.barra-sup__interior {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 clamp(1rem, 4vw, 4rem);
}

.barra-sup__logo {
  width: clamp(8.5rem, 14vw, 12rem);
  height: auto;
}

.barra-sup__derecha {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.barra-sup__labarra img {
  display: block;
  width: 94px;
  height: auto;
}

/* Íconos sociales en círculo: marinos arriba, blancos en el footer */
.redes {
  list-style: none;
  display: flex;
  gap: 0.75rem;
}

.redes a {
  --redes-fondo: var(--marino);
  --redes-icono: var(--blanco);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--redes-fondo);
  color: var(--redes-icono);
  transition: transform 150ms ease;
}

.redes a:hover {
  transform: scale(1.08);
}

.redes svg {
  width: 45%;
  height: 45%;
  fill: currentColor;
}

@media (max-width: 480px) {
  .barra-sup__derecha {
    gap: 0.75rem;
  }

  .barra-sup__labarra img {
    width: 70px;
  }

  .barra-sup .redes {
    gap: 0.4rem;
  }

  .barra-sup .redes a {
    width: 34px;
    height: 34px;
  }
}

/* ---------- Header / Hero ---------- */
.hero {
  position: relative;
  height: var(--alto-hero);
  display: flex;
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 4rem);
  /* mismo color que el borde superior del fondo: si la escena se desplaza, no hay costura */
  background: var(--pared);
  isolation: isolate;
  overflow: hidden;
}

/* Fundido fijo al color del piso: con el parallax la escena baja y su borde
   inferior nunca coincide con el formulario, este velo lo cubre siempre */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16%;
  z-index: -1;
  background: linear-gradient(180deg, rgba(158, 212, 242, 0), var(--piso) 85%);
  pointer-events: none;
}

/* La escena ocupa todo el hero. Fondo y producto comparten lienzo, tamaño y
   object-position, por eso las botellas quedan exactamente sobre su sombra. */
.hero__escena {
  /* el sello crece con el ancho (alto ≈ 0.4 × su ancho) y las tapas quedan al
     24% del alto del hero: en pantallas anchas y bajas se bajan las botellas
     lo justo para que no queden bajo el sello (el hero recorta el piso sobrante) */
  --baja: max(0px, calc(min(12vw, 10.4rem) - 0.24 * var(--alto-hero) + 1.5rem));
  position: absolute;
  inset: var(--baja) 0 calc(-1 * var(--baja));
  /* funde el borde superior desplazado con la pared, sin costura */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 calc(var(--baja) * 2));
  mask-image: linear-gradient(180deg, transparent, #000 calc(var(--baja) * 2));
  z-index: -1;
  /* zoom por scroll: main.js publica --p (0→1) y el punto de las botellas en
     --ox/--oy, así la cámara se acerca a ellas y no al centro de la pantalla */
  /* zoom sutil: las botellas crecen hacia sus costados sin alcanzar el texto */
  transform: scale(calc(1 + var(--p, 0) * var(--zoom, 0.15)));
  transform-origin: var(--ox, 70%) var(--oy, 70%);
  will-change: transform;
}

.hero__capa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 100%;
}

/* Entrada: el producto aparece con un leve zoom anclado a su base, sin despegarse del piso */
.hero__capa--producto {
  transform-origin: 63% 83%;
  animation: producto-entra 700ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both;
}

.hero__capa--fondo {
  animation: aparece 500ms ease both;
}

/* ---------- Advertencia Ley 21.363 (sello negro, arriba a la derecha) ---------- */
.advertencia {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: clamp(15rem, 30vw, 26rem);
  height: auto;
}

/* ---------- Texto ---------- */
.hero__texto {
  position: relative;
  max-width: 34rem;
  padding-bottom: 4vh;
  color: var(--blanco);
}

/* la entrada va en los hijos */
.hero__texto > * {
  animation: sube 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero__texto > :nth-child(1) { animation-delay: 50ms; }
.hero__texto > :nth-child(2) { animation-delay: 120ms; }
.hero__texto > :nth-child(3) { animation-delay: 180ms; }
.hero__texto > :nth-child(4) { animation-delay: 240ms; }

.hero__logo {
  display: block;
  width: min(100%, 26rem);
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(10, 35, 80, 0.3));
}


.hero__titulo {
  margin-top: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(3rem, 5.4vw, 5.75rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 24px rgba(10, 35, 80, 0.3);
}

.hero__bajada {
  margin-top: 0.75rem;
  max-width: 24rem;
  font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  line-height: 1.3;
  text-shadow: 0 2px 12px rgba(10, 35, 80, 0.35);
}

.hero__piknic {
  display: block;
  margin-top: 1rem;
  width: min(100%, 17rem);
  height: auto;
  filter: drop-shadow(0 4px 14px rgba(10, 35, 80, 0.3));
}

@keyframes producto-entra {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sube {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes aparece {
  from {
    opacity: 0;
  }
}

/* Mobile: texto arriba sobre la pared lisa y la escena debajo, recortada
   para que las botellas llenen el ancho */
@media (max-width: 900px) {
  .hero {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
    /* aire extra arriba para que el sello de advertencia no tape el logo */
    padding: 7.5rem 0 0;
    text-align: center;
  }

  .hero__texto {
    max-width: none;
    padding: 0 1rem;
  }

  .hero__logo {
    margin: 0 auto;
    width: min(80%, 20rem);
  }

  .hero__titulo {
    margin-top: 1rem;
  }

  .hero__bajada {
    margin-inline: auto;
  }

  .hero__piknic {
    margin-inline: auto;
    width: min(70%, 14rem);
  }

  .hero__texto {
    z-index: 1;
  }

  /* el borde superior de la foto se funde con la pared lisa de arriba */
  .hero__escena {
    --zoom: 0.07;
    position: relative;
    inset: auto;
    z-index: 0;
    margin-top: -3rem;
    aspect-ratio: 1;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%);
    mask-image: linear-gradient(180deg, transparent, #000 22%);
  }

  /* centra las botellas: su centro está al 63% del lienzo */
  .hero__capa {
    object-position: 70% 100%;
  }
}

/* Respeta la preferencia de menos movimiento del sistema */
@media (prefers-reduced-motion: reduce) {
  .hero__texto > *,
  .hero__capa {
    animation: none !important;
  }

  .hero__escena {
    transform: none !important;
  }


}

/* ---------- Verificación de edad ---------- */
.edad {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 1rem;
  /* gradiente de marca translúcida sobre el sitio desenfocado, sin caja:
     logo y botones flotan y el hero se adivina detrás */
  background: linear-gradient(
    180deg,
    rgba(81, 170, 226, 0.55) 0%,
    rgba(44, 111, 181, 0.7) 55%,
    rgba(15, 52, 112, 0.85) 100%
  );
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--blanco);
}

.edad[hidden] {
  display: none;
}

.edad__caja {
  width: min(100%, 26rem);
  text-align: center;
  animation: sube 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.edad__logo {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(10, 35, 80, 0.3));
}

.edad__titulo {
  margin: 2rem 0 1.25rem;
  font-weight: 700;
  font-size: 1.3rem;
}

.edad__acciones {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.edad__aviso {
  margin-top: 1.25rem;
  font-size: 0.9rem;
}

.boton {
  font: 700 0.95rem "Montserrat", sans-serif;
  text-transform: uppercase;
  padding: 0.75rem 1.75rem;
  border-radius: 50px;
  border: 2px solid var(--blanco);
  cursor: pointer;
}

.boton--primario {
  background: var(--blanco);
  color: var(--marino);
}

.boton--secundario {
  background: transparent;
  color: var(--blanco);
}

/* ---------- Formulario ---------- */
main {
  position: relative;
  z-index: 2;
  background: var(--piso);
}

.content {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}

#form-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 0.5rem 0 0;
  color: var(--marino);
}

.form-title {
  text-align: center;
  margin-bottom: 0;
}

.form-title h2 {
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 3vw, 2rem);
}

.form-title p {
  font-family: var(--script);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
}

#trusarchform {
  width: 100%;
}

/* ---------- Formulario TrustArc ---------- */
/* Solo selectores estables (ta-upm-*): las clases hasheadas cambian por versión */

#trusarchform .ta-upm-modal-content,
#trusarchform .ta-upm-modal-header,
#trusarchform .ta-upm-modal-body,
#trusarchform .ta-upm-modal-footer,
#trusarchform .ta-upm-form {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  color: var(--marino) !important;
}

/* El logo ya está en el banner: se oculta el que inyecta TrustArc */
#trusarchform .ta-form-logo {
  display: none !important;
}

#trusarchform .ta-upm-label {
  color: var(--marino) !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-transform: uppercase !important;
}

#trusarchform .ta-upm-required {
  color: var(--marino) !important;
}

#trusarchform .ta-upm-input,
#trusarchform .ta-upm-date-picker-input-container,
#trusarchform .react-datepicker__input-container input {
  background: rgba(255, 255, 255, 0.55) !important;
  color: var(--marino) !important;
  border: 2px solid var(--marino) !important;
  border-radius: 24px !important;
  box-shadow: none !important;
}

#trusarchform .react-datepicker__input-container {
  background: transparent !important;
}

#trusarchform .ta-upm-input::placeholder,
#trusarchform .ta-upm-date-picker-input-container::placeholder {
  color: rgba(15, 52, 112, 0.55) !important;
}

#trusarchform .ta-upm-select__control {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 2px solid var(--marino) !important;
  border-radius: 24px !important;
  box-shadow: none !important;
}

#trusarchform .ta-upm-select__single-value,
#trusarchform .ta-upm-select__placeholder,
#trusarchform .ta-upm-select__input,
#trusarchform .ta-upm-select__indicator {
  color: var(--marino) !important;
}

#trusarchform .ta-upm-select__indicator-separator {
  background-color: rgba(15, 52, 112, 0.35) !important;
}

/* El desplegable y el calendario sí van en blanco, para que se lean */
#trusarchform .ta-upm-select__menu,
.ta-upm-select__menu,
.react-datepicker {
  background: var(--blanco) !important;
  color: #1e293b !important;
  border-radius: 16px !important;
  overflow: hidden;
}

#trusarchform .ta-upm-select__option,
.ta-upm-select__option {
  color: #1e293b !important;
}

#trusarchform .ta-upm-checkbox-container,
#trusarchform .ta-upm-checkbox-message,
#trusarchform .ta-upm-static-text-container,
#trusarchform .ta-upm-static-text-details,
#trusarchform .ta-upm-error-message {
  color: var(--marino) !important;
}

#trusarchform .ta-upm-checkbox-styled {
  border-color: var(--marino) !important;
}

#trusarchform a,
#trusarchform a span,
#trusarchform .ta-upm-static-text-details span[style],
#trusarchform .ta-upm-checkbox-message span[style] {
  color: var(--marino) !important;
}

#trusarchform a {
  text-decoration: underline !important;
}

#trusarchform .ta-upm-field-hidden {
  display: none !important;
}

#trusarchform .ta-upm-button {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border-radius: 50px !important;
  padding: 10px 45px !important;
}

#trusarchform .ta-upm-button__primary {
  background: var(--marino) !important;
  color: var(--blanco) !important;
  border: 2px solid var(--marino) !important;
}

#trusarchform .ta-upm-button__secondary {
  background: transparent !important;
  color: var(--marino) !important;
  border: 2px solid var(--marino) !important;
}

/* ---------- Footer ---------- */
footer {
  position: relative;
  z-index: 2;
  background: var(--marino);
  color: var(--blanco);
  padding: 2rem 1rem 1.5rem;
}

.footer__interior {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer__logo {
  width: 11rem;
  height: auto;
}

/* en el footer los círculos van blancos con el ícono marino */
footer .redes a {
  --redes-fondo: var(--blanco);
  --redes-icono: var(--marino);
  width: 48px;
  height: 48px;
}

/* "Preferencias sobre cookies" de TrustArc, debajo del formulario */
#teconsent,
#teconsent a {
  color: var(--marino) !important;
}

/* TrustArc deja ~56px de aire sobre el primer campo (margen + padding del modal) */
#trusarchform .ta-upm-modal-content {
  margin-top: 0 !important;
}

#trusarchform .ta-upm-modal-body {
  padding-top: 0.5rem !important;
}