/*
  Postulaciones: composición propia de esta página. Primero celular.

  Regla de formas: nunca cerca ni por encima de un texto.
  Cada forma vive en una zona reservada sin contenido:
    hero      esquina superior derecha + franja inferior (padding-bottom del hero)
    reconoc.  esquina superior derecha, solo desde 1024 px, al costado del texto 2
    formulario franja inferior (padding-bottom de la sección)
  Si se agrega texto o se cambia un tamaño, revisar que las formas sigan en su zona;
  ante la duda, achicarlas.
*/

/* ======================= HERO ======================= */
.hero {
  position: relative;
  padding-block: calc(var(--space-4) + env(safe-area-inset-top, 0px)) calc(var(--space-4) + 44vw);
}

.hero__inner {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.hero__title {
  display: grid;
  justify-items: start;
  /* 65% del tamaño original del bloque Agencia Córdoba Innovar + Emprender */
  font-size: clamp(1.8rem, 0.9rem + 4.2vw, 4.25rem);
  font-weight: var(--w-extra);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: -0.015em;
}

.hero__mark {
  /* 65% del tamaño original del 10 + ANIVERSARIO */
  --mark-w: clamp(5.85rem, 3.6rem + 9.75vw, 10.4rem);
  margin-bottom: clamp(1.75rem, 1rem + 3.5vw, 3rem);
  letter-spacing: 0;
}

.hero__org {
  font-size: 0.36em;
  font-weight: var(--w-extra);
  letter-spacing: 0.01em;
  margin-bottom: 0.32em;
}

.hero__name > span {
  display: block;
}

/* Texto 1: tres líneas fijas desde 768 px (ver .lines en components.css) */
.hero__lead {
  max-width: 30ch;
  margin-top: var(--space-2);
  font-size: 1rem;
}

.hero__cta {
  margin-top: var(--space-2);
}

/* Formas del hero (portada.png + portada3.png) */
/* Esquina superior derecha, a distancia del 10. Lleva el degradado del 10 */
.hero__drop {
  --grad-angle: 70deg;
  width: 52vw;
  height: 30vw;
  top: -12vw;
  right: -14vw;
  border-bottom-left-radius: 72% 100%;
}

/* Franja inferior: diagonales que bajan hacia la derecha, debajo del botón */
.hero__slab,
.hero__pill,
.hero__pill-2 {
  rotate: -38deg;
}

.hero__slab {
  width: 60vw;
  height: 12vw;
  right: -18vw;
  bottom: 10vw;
}

.hero__pill {
  width: 40vw;
  height: 11vw;
  right: -14vw;
  bottom: 22vw;
}

.hero__pill-2 {
  width: 24vw;
  height: 11vw;
  right: 20vw;
  bottom: 2vw;
}

.hero__corner {
  display: none;
}

/* ======================= RECONOCIMIENTOS ======================= */
.awards {
  padding-top: var(--space-4);
}

.awards__grid {
  display: grid;
  gap: var(--space-5);
}

/* Texto 2: tres líneas fijas desde 768 px */
.awards .lead {
  font-size: 1rem;
}

/* 10 ANIVERSARIO como separador de sección y las tres categorías debajo */
.awards__row {
  display: grid;
  gap: var(--space-4);
}

.awards__list {
  width: 100%;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.awards__item {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--space-2);
  padding-block: var(--space-3);
  text-align: center;
}

.awards__desc {
  max-width: 34ch;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* Sin líneas en esta sección: el 10 ANIVERSARIO va solo y las categorías se separan por espacio */
.awards .divider-mark {
  justify-content: center;
  gap: clamp(0.6rem, 0.4rem + 1vw, 1.1rem);
}

.awards .divider-mark::before,
.awards .divider-mark::after {
  display: none;
}

.awards__item .award__name {
  font-size: var(--fs-xl);
}

/*
  Triángulo redondeado entrando desde la derecha (portada2.png): solo escritorio.
  Lleva el degradado del 10; como está rotado 45°, el ángulo se compensa a 0deg
  para que el amarillo quede arriba a la derecha.
*/
.awards__wedge {
  --grad-angle: 0deg;
  display: none;
  aspect-ratio: 1;
  rotate: 45deg;
  border-radius: 16%;
}

/* ======================= FORMULARIO ======================= */
.apply {
  padding-bottom: calc(var(--space-5) + 30vw);
}

.apply__grid {
  display: grid;
  gap: var(--space-4);
}

.apply__intro {
  container-type: inline-size;
}

/*
  "Reconocimientos" 15% más grande que antes; nunca más ancho que su columna
  (15 letras en Montserrat 800 ocupan unas 10.6 veces el tamaño de letra).
*/
.apply__title {
  font-size: min(clamp(2rem, 1.15rem + 4.15vw, 2.76rem), 100cqi / 10.6);
  font-weight: var(--w-extra);
  line-height: 1;
  text-transform: uppercase;
}

.apply__note {
  margin-top: var(--space-3);
  max-width: 38ch;
  color: var(--c-text-2);
  font-size: var(--fs-base);
}

.apply__note + .apply__note {
  margin-top: var(--space-2);
}

.apply-form {
  display: grid;
}

/* Cada tramo apila sus bloques; cada bloque, sus campos */
.apply-form__step {
  display: grid;
  gap: clamp(2.25rem, 1.75rem + 2vw, 3.25rem);
}

.apply-form__block {
  display: grid;
  gap: 1.25rem;
}

/* Bloque de la categoría: preguntas de elección rápida, con más aire entre ellas */
.apply-form__extra {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  gap: 1.75rem;
}

.apply-form__extra > legend {
  padding: 0;
  margin-bottom: 1.25rem;
}

.apply-form__extra[hidden] {
  display: none;
}

.apply-form__back {
  margin-bottom: calc(-1 * clamp(1rem, 0.5rem + 1.5vw, 2rem));
}

.apply-form__heading {
  font-size: var(--fs-md);
  font-weight: var(--w-bold);
  line-height: 1.2;
  letter-spacing: 0;
}

.field-group__legend.apply-form__heading {
  margin-bottom: 1.25rem;
}

.apply-form__next {
  padding-top: var(--space-1);
}

/*
  Cambio de tramo: el texto del tramo actual se transforma en el del nuevo en el
  mismo lugar, sin desplazamientos (los dos superpuestos, uno se apaga y el otro
  aparece). Lo hace swap() en postulaciones.js.
*/
.apply-form,
.apply-form__step {
  position: relative;
  align-content: start;
}

.apply-form.is-swapping {
  overflow: clip;
}

.apply-form__step.is-entering {
  position: absolute;
  inset: 0 0 auto 0;
}

.apply-form__submit {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

/* Franja inferior del formulario */
.apply__disc {
  width: 36vw;
  aspect-ratio: 1;
  right: -10vw;
  bottom: -18vw;
}

.apply__disc-2 {
  width: 18vw;
  aspect-ratio: 1;
  right: 30vw;
  bottom: -9vw;
}

/* Pop-up de postulación enviada */
.sent__ten {
  width: clamp(5.5rem, 4.5rem + 4vw, 7.5rem);
}

/* Esquina superior derecha del pop-up, lejos del título. Lleva el degradado del 10 */
.sent__drop {
  --grad-angle: 70deg;
  width: 46%;
  height: 26%;
  top: -12%;
  right: -16%;
  border-bottom-left-radius: 72% 100%;
}

/* ======================= PIE ======================= */
.site-footer {
  border-top: 1px solid var(--c-night-3);
}

/* ======================= TABLETA ======================= */
@media (min-width: 768px) {
  .hero {
    padding-bottom: calc(var(--space-4) + 30vw);
  }

  .hero__lead,
  .awards .lead {
    font-size: clamp(1.0625rem, 0.85rem + 0.45vw, 1.25rem);
  }

  .hero__drop {
    width: 40vw;
    height: 22vw;
    top: -10vw;
    right: -10vw;
  }

  .hero__slab {
    width: 44vw;
    height: 9vw;
    right: -12vw;
    bottom: 8vw;
  }

  .hero__pill {
    width: 28vw;
    height: 8vw;
    right: -10vw;
    bottom: 17vw;
  }

  .hero__pill-2 {
    width: 16vw;
    height: 8vw;
    right: 22vw;
    bottom: 2vw;
  }

  /* Tres categorías una al lado de la otra */
  .awards__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .awards__item {
    padding: var(--space-2) clamp(0.75rem, 0.2rem + 1.6vw, 2rem);
  }

  .awards__item .award__name {
    font-size: clamp(1.5rem, 0.3rem + 2.8vw, 2.85rem);
  }

  .apply {
    padding-bottom: calc(var(--space-5) + 18vw);
  }

  .apply__disc {
    width: 24vw;
    right: -8vw;
    bottom: -12vw;
  }

  .apply__disc-2 {
    width: 12vw;
    right: 18vw;
    bottom: -6vw;
  }
}

/* ======================= ESCRITORIO ======================= */
@media (min-width: 1024px) {
  .hero {
    min-height: min(100dvh, 62rem);
    display: grid;
    align-items: center;
    padding-block: var(--space-4) var(--space-5);
  }

  .hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--space-4);
  }

  .hero__inner > * {
    grid-column: 1;
  }

  .hero__inner > .hero__lead {
    grid-column: 1 / -1;
  }

  .hero__title {
    font-size: clamp(2.9rem, 0.65rem + 3.64vw, 4.55rem);
  }

  /* Del lado derecho, en la columna que el texto no usa (desde ~62% del ancho) */
  .hero__drop {
    width: 34vw;
    height: 19vw;
    top: -6vw;
    right: -6vw;
  }

  .hero__corner {
    display: block;
    width: 11vw;
    height: 11vw;
    right: -5.5vw;
    top: 38%;
    border-radius: 50%;
  }

  .hero__slab {
    width: 46vw;
    height: 9vw;
    right: -16vw;
    bottom: 16%;
  }

  .hero__pill {
    width: 26vw;
    height: 6.5vw;
    right: -6vw;
    bottom: 9%;
  }

  .hero__pill-2 {
    width: 12vw;
    height: 6.5vw;
    right: 14vw;
    bottom: 1vw;
  }

  .awards__wedge {
    display: block;
    width: 14vw;
    right: -8vw;
    top: -3vw;
  }

  .apply__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
  }

  .apply__title {
    font-size: min(clamp(2.3rem, 0.7rem + 2.53vw, 2.76rem), 100cqi / 10.6);
  }

  .apply__panel {
    max-width: 44rem;
  }

  .apply {
    padding-bottom: calc(var(--space-5) + 12vw);
  }

  /* Abajo a la izquierda, debajo del texto de la columna izquierda */
  .apply__disc {
    width: 16vw;
    left: -6vw;
    right: auto;
    bottom: -8vw;
  }

  .apply__disc-2 {
    width: 7vw;
    left: 12vw;
    right: auto;
    bottom: -3vw;
  }
}

/* ======================= MOVIMIENTO DE ENTRADA ======================= */
@media (prefers-reduced-motion: no-preference) {
  .hero .shape {
    animation: shape-in 1.3s var(--ease) both;
  }

  .hero .shape:nth-child(2) { animation-delay: 0.08s; }
  .hero .shape:nth-child(3) { animation-delay: 0.16s; }
  .hero .shape:nth-child(4) { animation-delay: 0.22s; }
  .hero .shape:nth-child(5) { animation-delay: 0.3s; }
  .hero .shape:nth-child(6) { animation-delay: 0.38s; }

  .hero__title > *,
  .hero__lead,
  .hero__cta {
    animation: rise-in 1s var(--ease) both;
  }

  .hero__org { animation-delay: 0.12s; }
  .hero__name { animation-delay: 0.2s; }
  .hero__lead { animation-delay: 0.32s; }
  .hero__cta { animation-delay: 0.42s; }

  .modal[open] .modal__body > * {
    animation: rise-in 0.7s var(--ease) both;
  }

  .modal__body > :nth-child(2) { animation-delay: 0.08s; }
  .modal__body > :nth-child(3) { animation-delay: 0.16s; }
  .modal__body > :nth-child(4) { animation-delay: 0.24s; }
}

@keyframes shape-in {
  from {
    translate: 14vw -8vw;
    opacity: 0;
  }
}

@keyframes rise-in {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
}