/* ===========================================================
   Berckholtz & Compañía (B&Co.) — portada
   =========================================================== */

:root {
  --pink:  #ff57d4;
  --red:   #eb1f00;
  --black: #000000;

  --pad: clamp(1.25rem, 4vw, 4rem);

  /* Tipografía fluida derivada de los pt de referencia (mobile ≈ 52/42pt sobre ~1080px) */
  --fs-links:   clamp(1.25rem, 5.5vw, 2.75rem);  /* Instagram & Contacto */
  --fs-tagline: clamp(1.05rem, 4.3vw, 2.25rem);  /* MARCAS CON LEGADO    */
}

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

/* Oculto visualmente pero accesible para lectores de pantalla y SEO */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html, body { height: 100%; }

body {
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 300;
  color: var(--black);
  background: var(--pink);

  width: 100%;
  max-width: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Evita que el contenido (p. ej. texto nowrap) ensanche los items flex
   más allá del viewport. */
.masthead, .stage, .footer { min-width: 0; }

/* ---------- MOBILE (por defecto) ---------------------------
   Banda roja arriba con el wordmark · cuerpo rosa con el blob
   · contacto + tagline abajo sobre rosa.
   ---------------------------------------------------------- */

.masthead {
  background: var(--red);
  padding: var(--pad);
  display: flex;
  align-items: center;
}

.wordmark {
  width: 100%;
  height: auto;
  display: block;
}

.stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
}

.logo {
  /* el GIF está recortado a su contenido: borde visible = borde de la caja */
  width: min(66%, 22rem);
  height: auto;
  display: block;
}

.footer {
  padding: var(--pad);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.links {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-links);
  line-height: 1.05;
  min-width: 0;
}

.links a {
  color: var(--black);
  text-decoration: none;
}

.links a:hover { opacity: 0.7; }

.arrow {
  display: inline-block;
  font-weight: 400;
}

.tagline {
  font-size: var(--fs-tagline);
  text-align: right;
  align-self: flex-end;
  min-width: 0;
}

/* ---------- DESKTOP / HORIZONTAL ---------------------------
   Área rosa arriba (wordmark + blob a la izquierda) ·
   banda roja abajo con contacto + tagline.
   ---------------------------------------------------------- */

@media (min-width: 768px) and (orientation: landscape) {
  :root {
    --pad: clamp(2rem, 4vw, 5rem);
    --fs-links:   clamp(2.25rem, 4vw, 4.5rem);
    --fs-tagline: clamp(2rem, 3.6vw, 4rem);
  }

  /* el wordmark vive sobre el rosa, no sobre el rojo */
  .masthead {
    background: var(--pink);
    padding-bottom: 0;
  }

  .wordmark { width: 100%; }

  .stage {
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: clamp(1rem, 3vw, 3rem);
  }

  .logo { width: min(26%, 22rem); }

  /* el pie pasa a ser la banda roja inferior; contenido alineado al baseline inferior */
  .footer {
    background: var(--red);
    flex: 0 0 auto;
    align-items: flex-end;
    min-height: clamp(9rem, 22vh, 16rem);
  }

  /* en desktop la segunda línea se muestra como "& Contacto ↘" */
  .contacto::before { content: "& "; }

  .links { align-self: flex-end; }
  .tagline { align-self: flex-end; }
}