/* Alma Artesana · landing "en construcción" */

@layer reset, tokens, base, layout, components, motion;

@layer reset {
  body, h1, p, ul { margin: 0; }
  ul { padding: 0; list-style: none; }
  img, svg { display: block; max-inline-size: 100%; }
}

@layer tokens {
  :root {
    /* Marca */
    --color-mustard: #d99938;
    --color-cream: #e9cc6c;
    --color-ink: #272b26;

    --font-sans: "DM Sans", system-ui, sans-serif;
    --font-serif: "DM Serif Display", Georgia, serif;

    /* Semánticos */
    --page-bg: var(--color-mustard);
    --page-glow: color-mix(in oklab, var(--color-mustard), var(--color-cream) 55%);
    --text: var(--color-ink);
    --line: color-mix(in oklab, var(--color-ink) 30%, transparent);
    --chip-bg: var(--color-cream);
    --link-hover-bg: var(--color-ink);
    --link-hover-text: var(--color-cream);

    /* Escala fluida */
    --size-h1: clamp(1.9rem, 1.2rem + 3.2vw, 3.25rem);
    --size-lead: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    --size-small: 0.75rem;
    --size-logo: clamp(14rem, 10rem + 14vw, 17rem);

    --space-s: 0.75rem;
    --space-m: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    --space-l: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
    --frame-gap: clamp(0.75rem, 2vw, 1.5rem);

    --radius-pill: 100vmax;
    --tracking-wide: 0.2em;
    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

    /* Espacio de interpolación del degradado, solo si el navegador lo admite */
    --in-oklab: ;
  }

  @supports (background: linear-gradient(in oklab, white, black)) {
    :root { --in-oklab: in oklab; }
  }
}

@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    font-family: var(--font-sans);
    font-size: var(--size-lead);
    font-weight: 400;
    line-height: 1.6;
    color: var(--text);
    background:
      radial-gradient(ellipse 75% 60% at 50% 42% var(--in-oklab), var(--page-glow), var(--page-bg))
      var(--page-bg);
  }

  ::selection {
    background: var(--color-ink);
    color: var(--color-cream);
  }

  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@layer layout {
  body {
    box-sizing: border-box;
    min-block-size: 100vh;
    min-block-size: 100dvh;
    display: grid;
    padding: var(--frame-gap);
  }

  /* Marco fino: el contenido queda centrado y el lema anclado abajo */
  .frame {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    justify-items: center;
    gap: var(--space-m);
    padding: var(--space-m);
    border: 1px solid var(--line);
    text-align: center;
  }

  .hero {
    grid-row: 2;
    display: grid;
    justify-items: center;
    gap: var(--space-m);
  }

  .tagline {
    grid-row: 3;
    align-self: end;
  }
}

@layer components {
  /* El PNG trae mucho aire transparente arriba y abajo: se recorta con object-fit */
  .logo {
    inline-size: var(--size-logo);
    block-size: auto;
    aspect-ratio: 366 / 176;
    object-fit: cover;
    margin-block-end: var(--space-s);
  }

  .eyebrow {
    padding: 0.5em 1.1em 0.5em calc(1.1em + var(--tracking-wide));
    border-radius: var(--radius-pill);
    background: var(--chip-bg);
    font-size: var(--size-small);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  h1 {
    max-inline-size: 21ch;
    font-family: var(--font-serif);
    font-size: var(--size-h1);
    font-weight: 400;
    line-height: 1.08;
    text-wrap: balance;
  }

  .lead {
    max-inline-size: 40ch;
    text-wrap: pretty;
  }

  .contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-s);
    margin-block-start: var(--space-s);

    a {
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      gap: 0.6em;
      min-block-size: 2.75rem;
      padding: 0.5em 1.25em;
      border: 1px solid currentColor;
      border-radius: var(--radius-pill);
      color: inherit;
      font-weight: 500;
      line-height: 1.2;
      text-decoration: none;
      transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);

      &:hover {
        background-color: var(--link-hover-bg);
        border-color: var(--link-hover-bg);
        color: var(--link-hover-text);
      }

      &:focus-visible {
        outline: 2px solid var(--color-ink);
        outline-offset: 3px;
      }
    }

    svg {
      flex: none;
      inline-size: 1.25em;
      block-size: 1.25em;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .dot {
      fill: currentColor;
      stroke: none;
    }
  }

  .tagline p {
    padding-inline-start: var(--tracking-wide);
    font-size: var(--size-small);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  /* El logo es blanco: en alto contraste necesita su fondo de marca para verse */
  @media (forced-colors: active) {
    .logo {
      forced-color-adjust: none;
      background: var(--color-mustard);
    }
  }
}

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    .hero > *,
    .tagline {
      animation: rise 0.9s var(--ease-out) both;
      animation-delay: calc(var(--i, 0) * 90ms);
    }

    .hero > :nth-child(2) { --i: 1; }
    .hero > :nth-child(3) { --i: 2; }
    .hero > :nth-child(4) { --i: 3; }
    .hero > :nth-child(5) { --i: 4; }
    .tagline { --i: 6; }
  }

  @keyframes rise {
    from {
      opacity: 0;
      translate: 0 0.75rem;
    }
  }
}