/* ---------- Navigation ---------- */

/*
  The masthead is navy, not white: the logo's coral-and-teal mark washes out on
  white, and the header now reads as one piece with the hero below it.
*/
/* The header is sticky, so anchored targets need to clear it or they land
   underneath it. */
.section,
#interest-form,
#roles {
  scroll-margin-top: calc(var(--masthead-h) + var(--space-4));
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--navy);
  color: var(--on-dark);
}

/*
  Three columns so the logo sits on the true centre of the page rather than
  being pushed off it by whatever the nav happens to weigh.
*/
.masthead__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.masthead__inner > :first-child {
  grid-column: 2;
}

.masthead__logo {
  width: auto;
  height: 40px;
}

.masthead__nav {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.masthead__link {
  padding: 0.7rem var(--space-3);
  border-radius: var(--radius);
  font-size: var(--step-small);
  font-weight: 600;
  color: var(--on-dark);
  text-decoration: none;
  transition: background var(--motion-fast);
}

.masthead__link:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  padding: 0.6rem 1.3rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--motion-fast), transform var(--motion-fast),
    box-shadow var(--motion-fast);
}

.button:active {
  transform: translateY(1px);
}

/* Coral is the only action colour on the page. */
.button.primary {
  background: var(--coral);
  color: var(--on-dark);
  box-shadow: 0 8px 20px rgba(238, 63, 72, 0.28);
}

.button.primary:hover {
  background: #d3323b;
  box-shadow: 0 12px 26px rgba(238, 63, 72, 0.36);
}

/* ---------- Hero ---------- */

.hero {
  background:
    radial-gradient(circle at 8% 12%, rgba(93, 190, 180, 0.18) 0, transparent 46%),
    var(--navy);
  color: var(--on-dark);
  padding-block: clamp(var(--space-8), 4.5vw, var(--space-12));
}

/*
  One full screen on desktop, so nothing from the next section peeks into the
  first view and competes with the headline. Uses svh rather than vh: on a phone
  vh counts the browser chrome that is not actually there, which overflows.

  Desktop only. On a phone the stacked headline, lead, button and photo already
  fill more than a screen, and forcing a minimum on top of that only adds gaps.
*/
@media (min-width: 900px) {
  .hero {
    display: grid;
    align-content: center;
    min-height: calc(100vh - var(--masthead-h));
    min-height: calc(100svh - var(--masthead-h));
  }
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(var(--space-8), 5vw, var(--space-12));
  align-items: center;
}

.hero h1 {
  /* Sized for the current headline. 15ch was calibrated for a shorter one and
     broke this into five lines; 19ch fitted it until "En Dealbrand" became
     unbreakable, which needs one more line's worth of room. */
  max-width: 21ch;
  margin-block: var(--space-4) var(--space-4);
  /* Evens the line lengths instead of leaving a single short word stranded.
     Ignored by browsers that do not support it, which simply wrap as before. */
  text-wrap: balance;
}

.hero .lead {
  color: var(--on-dark-muted);
  max-width: 42ch;
}

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

/*
  Capped at the size its source can actually fill. hero.jpg is 976x705, so
  anything wider than ~470 CSS px is upscaled on a 2x screen and reads soft —
  which is what "low quality" actually was.
*/
.hero__media {
  margin: 0 0 0 auto;
  max-width: 470px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-raised);
}

/*
  height:auto is load-bearing. The <img> carries height="705" for layout
  stability, and a presentational height attribute beats aspect-ratio — which
  only applies when one dimension is auto. Without this the photo rendered at
  its full 705px and swallowed the hero.
*/
.hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ---------- Role cards ---------- */

.section__head {
  margin-bottom: var(--space-8);
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.role-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--navy);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--motion-base), transform var(--motion-base);
}

.role-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-raised);
}

/* The whole card is one button: one large, obvious target. */
.role-card__surface {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 0;
  margin: 0;
  padding: var(--space-4);
  background: var(--navy);
  color: var(--on-dark);
  text-align: center;
  cursor: pointer;
}

/*
  Photo and tint are separate layers so one card can correct its own exposure
  through --role-filter without touching the text sitting on top of it.
*/
.role-card__surface::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--role-photo, none);
  background-size: var(--role-size, cover);
  background-position: var(--role-focus, center);
  filter: var(--role-filter, none);
}

.role-card__surface::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Even, not bottom-heavy: the label now sits in the middle of the photo. */
  background: linear-gradient(
    180deg,
    rgba(var(--role-tint), 0.42) 0%,
    rgba(var(--role-tint), 0.58) 50%,
    rgba(var(--role-tint), 0.72) 100%
  );
  transition: opacity var(--motion-base);
}

.role-card__surface > * {
  position: relative;
  z-index: 1;
}

/*
  A relative url() inside a custom property resolves against this stylesheet,
  not the document — declaring it inline in the HTML silently 404s.
*/
.role-card[data-role="promotor"] {
  --role-tint: var(--tint-promotor);
  --role-photo: url("../img/roles/promotor.jpg");
  --role-focus: 50% 40%;
}

.role-card[data-role="impulso"] {
  --role-tint: var(--tint-impulso);
  --role-photo: url("../img/roles/impulso.jpg");
  --role-focus: 38% center;
}

.role-card[data-role="mercaderista"] {
  --role-tint: var(--tint-mercaderista);
  --role-photo: url("../img/roles/mercaderista.jpg");
  --role-focus: 55% center;
}

/*
  No photo. The one available shot was a lead briefing a group and read wrong,
  so this card is colour until a real supervisor photograph exists — see
  assets/img/roles/README.md.
*/
.role-card[data-role="supervisor"] {
  --role-tint: var(--tint-supervisor);
}

/*
  Built to look chosen rather than broken. A flat block beside three photographs
  reads as a missing asset, so this carries its own light and depth: the same
  material as the tint veil on the other cards, just without a photo under it.
*/
.role-card--no-photo .role-card__surface::before {
  background-image:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.16) 0, transparent 55%),
    radial-gradient(circle at 78% 88%, rgba(0, 0, 0, 0.22) 0, transparent 52%);
  background-color: rgb(var(--role-tint));
}

/* Nothing to veil, so the veil is gone; the colour is the surface itself. */
.role-card--no-photo .role-card__surface::after {
  background: none;
}

.role-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.15;
}

.role-card.is-open {
  box-shadow: var(--shadow-raised);
}

.role-card.is-open .role-card__surface::after {
  opacity: 0.88;
}

/*
  Sits in front of the photo rather than below it. As a sibling block it grew
  the card downwards and shoved the whole grid around; as an overlay the card
  keeps its footprint and the photo stays the thing being explained.
*/
.role-card__panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
  /* Not opaque: the photo stays legible behind it, so the panel reads as
     sitting in front of the role rather than replacing it. */
  background: rgba(24, 50, 74, 0.88);
  backdrop-filter: blur(3px);
  color: var(--on-dark);
  animation: panel-in var(--motion-base) ease-out;
}

@keyframes panel-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .role-card__panel { animation: none; }
}

.role-card__panel[hidden] {
  display: none;
}

.role-card__pitch {
  font-size: var(--step-small);
  color: var(--on-dark-muted);
  text-align: center;
}

.role-card__panel .button {
  min-height: 40px;
  padding: 0.5rem 1.15rem;
  font-size: 0.9rem;
}

/* ---------- Form ---------- */

.form-shell {
  width: min(100% - 2.5rem, 760px);
}

.form-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  background: var(--paper);
  box-shadow: var(--shadow-card);
}

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

/* The role travels from the card, so the form states it rather than asking. */
.role-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-soft);
  transition: border-color var(--motion-fast), background var(--motion-fast);
}

.role-banner__label {
  font-size: var(--step-small);
  color: var(--ink-muted);
}

.role-banner strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
}

form.has-role .role-banner {
  border-color: var(--mint-ink);
  background: #eef6f5;
}

.role-banner__change {
  margin-left: auto;
  font-size: var(--step-small);
  font-weight: 600;
  color: var(--mint-ink);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.form-grid label {
  display: grid;
  gap: 0.4rem;
  font-size: var(--step-small);
  font-weight: 700;
}

input,
select {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background-color: var(--paper);
  transition: border-color var(--motion-fast);
}

.form-grid input,
.form-grid select {
  min-height: 48px;
  width: 100%;
}

/* Browsers give a select their own control chrome; this keeps it on the same
   visual system as the text inputs beside it. */
.form-grid select {
  appearance: none;
  padding-right: 2.25rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px;
  background-position: right 1.15rem center, right 0.85rem center;
  background-repeat: no-repeat;
}

.form-grid input:hover,
.form-grid select:hover {
  border-color: var(--mint-ink);
}

.profile-field {
  display: grid;
  gap: 0.4rem;
  margin-bottom: var(--space-3);
  font-size: var(--step-small);
  font-weight: 700;
}

.profile-field select {
  min-height: 48px;
  width: 100%;
  appearance: none;
  padding-right: 2.25rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px;
  background-position: right 1.15rem center, right 0.85rem center;
  background-repeat: no-repeat;
}

/* Disabled until a card is chosen, so the state has to read as waiting rather
   than as broken. */
.profile-field select:disabled {
  color: var(--ink-muted);
  background-color: var(--paper-soft);
  cursor: not-allowed;
}

.file-field {
  display: grid;
  gap: 0.4rem;
  margin-top: var(--space-3);
  font-size: var(--step-small);
  font-weight: 700;
}

/*
  The marker earns its meaning from the legend under the form; on its own an
  asterisk tells a first-time visitor nothing.
*/
.req {
  color: var(--coral-ink);
  font-weight: 700;
  text-decoration: none;
  cursor: help;
}

.form-legend {
  margin-bottom: var(--space-2);
  font-size: var(--step-small);
  color: var(--ink-muted);
}

.file-field__hint {
  font-weight: 400;
  color: var(--ink-muted);
}

/* The native file button is the one control browsers style least alike, so it
   is repainted to match the buttons already on the page. */
.file-field input[type="file"] {
  border: 1px dashed var(--line);
  padding: 0.65rem;
  font-size: var(--step-small);
}

.file-field input[type="file"]::file-selector-button {
  margin-right: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.45rem 0.9rem;
  font-family: var(--font-body);
  font-size: var(--step-small);
  color: var(--ink);
  background-color: var(--paper-soft);
  cursor: pointer;
  transition: border-color var(--motion-fast);
}

.file-field input[type="file"]::file-selector-button:hover {
  border-color: var(--mint-ink);
}

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-soft);
  font-size: var(--step-small);
  cursor: pointer;
}

.check input {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  accent-color: var(--mint-ink);
}

.form-submit {
  justify-self: start;
  min-width: 220px;
}

.field-error,
.error-summary {
  color: var(--coral-ink);
  font-size: var(--step-small);
  font-weight: 700;
}

.field-error:empty {
  display: none;
}

.error-summary {
  border: 1px solid rgba(238, 63, 72, 0.45);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: #fdf1f2;
}

.error-summary[hidden],
.success[hidden],
.review-line[hidden] {
  display: none;
}

.success {
  border: 1px solid var(--mint-ink);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: #eefaf8;
  font-weight: 600;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy);
  color: var(--on-dark-muted);
  padding-block: var(--space-8);
  font-size: var(--step-small);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-footer img {
  height: 34px;
  width: auto;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }

  .hero__media {
    order: -1;
  }

  .hero__media img {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 900px) {
  .role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
  The lead is four clauses long. On a phone that is five lines between the
  headline and the button, pushing the call to action off the first screen. The
  headline already carries the message, so the paragraph steps aside.
*/
/*
  The centred-logo grid needs three columns' worth of room. Below this the nav
  column is squeezed until "Perfiles" and "Postular" break letter by letter, so
  the masthead falls back to the ordinary two-ended layout: on a phone a centred
  logo is a luxury, a legible button is not.
*/
@media (max-width: 760px) {
  /* Still a grid, just two columns. Flex here inherited flex-wrap:wrap and the
     nav dropped to a second row. */
  .masthead__inner {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  .masthead__inner > :first-child {
    grid-column: 1;
  }

  .masthead__nav {
    grid-column: 2;
  }

  .masthead__logo {
    height: 32px;
  }

  .masthead__nav {
    flex-shrink: 0;
  }

  .masthead__link,
  .masthead__nav .button {
    white-space: nowrap;
  }
}

@media (max-width: 760px) {
  .hero .lead {
    display: none;
  }
}

@media (max-width: 760px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-submit {
    justify-self: stretch;
  }
}

@media (max-width: 560px) {
  .role-grid {
    grid-template-columns: 1fr;
  }

  .role-card__surface {
    aspect-ratio: 16 / 10;
  }

  .masthead__inner {
    flex-wrap: wrap;
    justify-content: center;
  }

  .masthead__nav {
    width: 100%;
    justify-content: space-between;
  }

  .role-banner__change {
    margin-left: 0;
  }
}

/* Legal links must be reachable from every page: Meta's app review checks that
   the privacy policy is publicly accessible, and Ley 29733 expects the notice
   to be available at the point of collection. */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-4);
  font-size: var(--step-small);
}

.site-footer__legal a {
  color: var(--on-dark-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__legal a:hover {
  color: var(--on-dark);
}