/* ==========================================================================
   COLMEN — coming soon
   Medidas tomadas del Figma "Web lanzamiento Colmen"
   Breakpoints: mobile (<600) · tablet (600–1023) · desktop (≥1024)
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2");
}

:root {
  --brown: #4f2b28;
  --cream: #f3ebe2;
  --on-brown: rgb(255 255 255 / 0.8);

  /* Duración de la animación del menú (marrón → beige) */
  --menu-time: 0.7s;
  --menu-ease: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- mobile (base) --- */
  --logo-top: 47px;
  --logo-h: 67px;
  --logo-gap: 44px;
  --foot-top: 45px;
  --foot-bottom: 60px;
  --foot-side: 29px;
  --tag-size: 24px;

  --menu-size: 48px;
  --menu-gap: 24px;

  /* botón + : tamaño del trazo y posición del centro respecto a la esquina */
  --hit: 88px;
  --ink: 37.09px;
  --stroke: 2.02px;
  --plus-right: 47.65px;
  --plus-bottom: 87.4px;
}

@media (min-width: 600px) {
  :root {
    --logo-top: 43px;
    --logo-h: 78px;
    --logo-gap: 39px;
    --foot-top: 60px;
    --foot-bottom: 59px;
    --tag-size: 32px;

    --menu-size: 72px;
    --menu-gap: 32px;

    --plus-right: 77.7px;
    --plus-bottom: 75.4px;
  }
}

@media (min-width: 1024px) {
  :root {
    --logo-top: 53px;
    --logo-h: 90px;
    --logo-gap: 53px;
    --foot-top: 75px;
    --foot-bottom: 81px;

    --menu-size: 96px;
    --menu-gap: 40px;

    --ink: 48.27px;
    --stroke: 2.63px;
    --plus-right: 89.3px;
    --plus-bottom: 93.8px;
  }
}

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

html {
  background: var(--brown);
  -webkit-text-size-adjust: 100%;
}

html.is-menu-open {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--brown);
  color: #fff;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Página
   -------------------------------------------------------------------------- */
.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(260px, 1fr) auto;
}

/* Logo */
.logo {
  display: flex;
  justify-content: center;
  padding: var(--logo-top) 24px var(--logo-gap);
}

.logo img {
  display: block;
  height: var(--logo-h);
  width: auto;
  max-width: 100%;
}

/* Imagen central (carrusel) */
.hero {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.hero__stack {
  position: absolute;
  inset: 0;
  margin-inline: auto;
  max-width: 860px;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* mobile: imagen a sangre, recortada por los lados */
  opacity: 0;
  transition: opacity var(--fade, 0ms) linear;   /* 0 = corte seco. Ej.: 400ms = fundido */
}

.hero__img.is-active {
  opacity: 1;
}

/* Imágenes horizontales: en móvil se ven enteras (no se recortan) */
.hero__img--wide {
  object-fit: contain;
}

@media (min-width: 600px) {
  .hero__stack {
    max-width: 768px;
  }

  .hero__img {
    object-fit: contain;      /* tablet / desktop: imagen entera, sin recortar */
  }
}

@media (min-width: 1024px) {
  .hero__stack {
    max-width: 860px;
  }
}

/* Tagline */
.foot {
  padding: var(--foot-top) var(--foot-side) var(--foot-bottom);
}

.tagline {
  margin: 0;
  font-size: var(--tag-size);
  color: var(--on-brown);
  max-width: 6.6em;           /* mobile: parte en dos líneas como en el diseño */
}

@media (min-width: 600px) {
  .foot {
    padding-inline: 24px;
  }

  .tagline {
    max-width: none;
    text-align: center;
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   Botón +  (dos barras finas; gira 45° y se convierte en ×)
   -------------------------------------------------------------------------- */
.plus {
  position: fixed;
  z-index: 20;
  width: var(--hit);
  height: var(--hit);
  right: calc(var(--plus-right) - var(--hit) / 2 + env(safe-area-inset-right, 0px));
  bottom: calc(var(--plus-bottom) - var(--hit) / 2 + env(safe-area-inset-bottom, 0px));
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--on-brown);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--menu-time) var(--menu-ease),
    color var(--menu-time) var(--menu-ease);
}

.plus::before,
.plus::after {
  content: "";
  grid-area: 1 / 1;
  width: var(--ink);
  height: var(--stroke);
  background: currentColor;
}

.plus::after {
  transform: rotate(90deg);
}

.plus:hover {
  color: #fff;
}

.plus[aria-expanded="true"] {
  color: rgb(79 43 40 / 0.8);
  transform: rotate(45deg);
}

.plus[aria-expanded="true"]:hover {
  color: var(--brown);
}

.plus:focus-visible,
.menu__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}

/* --------------------------------------------------------------------------
   Menú a pantalla completa: el fondo pasa de marrón a beige
   -------------------------------------------------------------------------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: var(--brown);
  opacity: 0;
  visibility: hidden;
  /* cierre: primero vuelve a marrón, luego se desvanece */
  transition:
    background-color var(--menu-time) var(--menu-ease),
    opacity 0.3s ease calc(var(--menu-time) * 0.5),
    visibility 0s linear calc(var(--menu-time) * 0.5 + 0.3s);
}

.menu.is-open {
  background: var(--cream);
  opacity: 1;
  visibility: visible;
  /* apertura: aparece ya en marrón y vira a beige */
  transition:
    background-color var(--menu-time) var(--menu-ease),
    opacity 0.3s ease,
    visibility 0s;
}

.menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--menu-gap);
}

.menu__link {
  display: block;
  font-size: var(--menu-size);
  color: var(--brown);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.menu.is-open .menu__link {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s ease calc(0.3s + var(--i) * 0.08s),
    transform 0.5s ease calc(0.3s + var(--i) * 0.08s);
}

.menu__link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

/* --------------------------------------------------------------------------
   Accesibilidad: menos movimiento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .plus,
  .menu,
  .menu.is-open,
  .menu__link,
  .menu.is-open .menu__link {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}