/* ==========================================================================
   TECNOGEN · Página "Nueva web próximamente"
   Mobile-first. Dos composiciones:
   1) Apilada  (celulares, tablets verticales)  → texto arriba, foto abajo
   2) Dividida (escritorio / tablets horizontales) → texto a la izquierda, foto a la derecha
   ========================================================================== */

/* ---------- Fuentes (autoalojadas) ---------- */
@font-face {
  font-family: "Antonio";
  src: url("../assets/fonts/antonio-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --orange: #eb5c20;
  --navy:   #1f3557;
  --white:  #ffffff;

  --font-display: "Antonio", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-text: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-text);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
h1, p { margin: 0; }

/* ==========================================================================
   1) COMPOSICIÓN APILADA (por defecto: celulares y tablets verticales)
   ========================================================================== */
.hero {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--white);
}

.hero__content {
  position: relative;
  z-index: 1;                                   /* el texto siempre sobre la foto */
  padding: clamp(3rem, 14vw, 6.5rem) clamp(1.25rem, 10vw, 5.5rem) clamp(2.25rem, 9vw, 4.5rem);
  margin-bottom: calc(-1 * clamp(0.75rem, 6vw, 3.5rem));  /* la foto "sube" ligeramente, como en el prototipo */
}

.logo {
  width: clamp(7.25rem, 37vw, 13.5rem);
  height: auto;
}

.title {
  margin-top: clamp(1.25rem, 5.4vw, 2.75rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 8.2vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
}
.title__line { display: block; }
.title__line--accent { color: var(--orange); }

.lead {
  max-width: 21.4em;
  margin-top: clamp(1rem, 4.4vw, 2rem);
  font-size: clamp(1rem, 4vw, 1.4rem);
  line-height: 1.5;
}

.cta-row { margin-top: clamp(1.1rem, 4.6vw, 2.1rem); }

.cta {
  font-weight: 600;
  font-size: clamp(1.2rem, 4.9vw, 1.9rem);
  line-height: 1.25;
  color: var(--orange);
}

/* El apretón de manos solo aparece en la versión dividida */
.handshake { display: none; }

.hero__media {
  margin-top: auto;                             /* ancla la foto al borde inferior */
  line-height: 0;
}
.hero__media picture,
.hero__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   2) COMPOSICIÓN DIVIDIDA
   · Pantallas anchas (≥ 900px y horizontales)
   · Celulares en horizontal (poca altura)
   ========================================================================== */
@media (min-width: 900px) and (min-aspect-ratio: 6/5),
       (min-width: 560px) and (max-height: 620px) and (orientation: landscape) {

  .hero {
    display: grid;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    align-items: stretch;
  }

  .hero__content {
    align-self: center;
    margin-bottom: 0;
    padding: clamp(1.5rem, 7vh, 4rem) 0 clamp(1.5rem, 7vh, 4rem) clamp(1.5rem, 6vw, 16rem);
  }

  .logo { width: clamp(6rem, 13.8vw, 18rem); }

  .title {
    margin-top: clamp(0.75rem, 1.7vw, 2.5rem);
    font-size: clamp(1.5rem, 4.3vw, 8rem);
    line-height: 1.1;
  }

  .lead {
    margin-top: clamp(0.6rem, 1.5vw, 2.25rem);
    font-size: clamp(0.8rem, 1.45vw, 2.2rem);
    line-height: 1.45;
  }

  /* El apretón de manos "cuelga" a la derecha de la frase final */
  .cta-row {
    position: relative;
    display: inline-block;
    margin-top: clamp(0.6rem, 1.3vw, 2rem);
  }
  .cta { font-size: clamp(0.95rem, 1.72vw, 2.6rem); }

  .handshake {
    display: block;
    position: absolute;
    left: calc(100% + 1.6vw);
    top: calc(50% + 1.15vw);
    transform: translateY(-50%);
    width: clamp(4rem, 10.9vw, 15rem);
    height: auto;
    pointer-events: none;
  }

  /* La foto rellena toda la altura de la columna y sangra a la derecha */
  .hero__media {
    position: relative;
    margin-top: 0;
  }
  .hero__media picture {
    position: absolute;
    inset: 0;
  }
  .hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;               /* conserva siempre los trazos naranjas de la izquierda */
  }
}

/* Pantallas menos anchas (iPad horizontal, 5:4, etc.): la foto gana espacio
   para que se vea al equipo completo y el texto se compacta un poco. */
@media (min-width: 900px) and (min-aspect-ratio: 6/5) and (max-aspect-ratio: 3/2) {
  .hero { grid-template-columns: minmax(0, 41fr) minmax(0, 59fr); }
  .hero__content { padding-left: clamp(1.5rem, 5vw, 16rem); }
  .logo  { width: clamp(6rem, 12.5vw, 18rem); }
  .title { font-size: clamp(1.5rem, 3.75vw, 8rem); }
  .lead  { font-size: clamp(0.85rem, 1.3vw, 2.2rem); }
  .cta   { font-size: clamp(0.95rem, 1.55vw, 2.6rem); }
  .handshake { width: clamp(4rem, 9.5vw, 15rem); }
}

/* ==========================================================================
   Entrada: una sola secuencia al cargar (logo → titular → texto → frase)
   ========================================================================== */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes reveal-media {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.reveal {
  animation: rise 0.8s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 90ms + 80ms);
}
.hero__media {
  animation: reveal-media 1.1s ease-out both;
  animation-delay: 200ms;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .hero__media { animation: none; }
}