/*
 * Trade in Motion — Geological services, navigation, form and footer.
 * Mobile-first styles based on the desktop and mobile Figma frames for phase 1.
 */

:root {
  --color-gold: #c2ba98;
  --color-gold-overlay: rgb(194 186 152 / 95%);
  --color-red: #b2292e;
  --color-ink: #191b20;
  --color-ink-overlay: rgb(25 27 32 / 95%);
  --color-text: #000;
  --color-white: #fff;
  --color-wave-light: #fde9e2;
  --color-wave-salmon: #ffaaa0;
  --color-wave-coral: #ff6f65;
  --color-wave-red: #f04d48;
  --color-page: #f6f6f5;
  --color-field: #ecebe7;
  --color-line: #cfcbbd;
  --color-success: #276d3b;
  --color-error: #9d2025;
  --font-family-body: Inter, Arial, Helvetica, sans-serif;
  --font-family-heading: Inter, Arial, Helvetica, sans-serif;
  --font-size-body: clamp(1rem, calc(0.97rem + 0.15vw), 1.125rem);
  --line-height-body: 1.55;
  --font-size-title: clamp(1.7rem, 6vw, 2.25rem);
  --line-height-title: 1.2;
  --font-size-banner: clamp(0.875rem, 1vw, 1rem);
  --header-height-mobile: 5rem;
  --header-height-desktop: 3rem;
  /* Franja de pantalla que ocupa el dock flotante en movil:
     1.5rem de separacion inferior + 5.625rem de alto, mas holgura. */
  --dock-clearance: 7.5rem;
  --content-width: 58.4375rem;
  --focus-ring: 0 0 0 0.1875rem rgb(178 41 46 / 45%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
  /* Keeps anchor targets clear of the sticky header. */
  scroll-padding-top: calc(var(--header-height-mobile) + 1rem);
}

body {
  min-width: 20rem;
  min-height: 100svh;
  margin: 0;
  display: flex;
  flex-direction: column;
  color: var(--color-text);
  background: var(--color-white);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  text-rendering: optimizeLegibility;
}

body.is-menu-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

[hidden] {
  display: none !important;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.65rem 0.9rem;
  color: var(--color-white);
  background: var(--color-red);
  border-radius: 0.25rem;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  flex: 0 0 auto;
  height: var(--header-height-mobile);
  color: var(--color-white);
  background: var(--color-ink-overlay);
}

.site-header__inner,
.mobile-menu__header {
  width: min(100%, 58.4375rem);
  height: 100%;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 8vw, 2.75rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-mark {
  display: inline-flex;
  width: 3.625rem;
  height: 2.625rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.desktop-nav {
  display: none;
}

.menu-button,
.menu-close {
  width: 3rem;
  height: 3rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.menu-button img {
  width: 2.6875rem;
  height: 2.3125rem;
  object-fit: contain;
}

.menu-close img {
  width: 3rem;
  height: 3rem;
}

/* Full-screen mobile navigation */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  color: var(--color-white);
  background: var(--color-ink);
  opacity: 0;
  transform: translateY(-0.75rem);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.mobile-menu.is-open {
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu__header {
  height: var(--header-height-mobile);
}

.mobile-nav {
  width: min(100% - 3rem, 22rem);
  margin: clamp(2.5rem, 8vh, 5rem) auto 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.7rem, 5vh, 3rem);
}

/* Con el fondo oscuro el blanco al 82% da 12.6:1 y el hover lo lleva a blanco
   pleno, 17.23:1. Sobre el dorado anterior el blanco era inviable: se quedaba
   en 1.73:1 y obligaba a tipografia negra. */
.mobile-nav__link,
.services-dropdown__trigger {
  padding: 0.25rem 0.65rem;
  color: rgb(255 255 255 / 82%);
  border-radius: 0.25rem;
  font-size: clamp(1rem, 4vw, 1.25rem);
  font-weight: 700;
  line-height: 1.4;
  transition: color 250ms ease-in-out;
}

.mobile-nav__link:hover,
.mobile-nav__link:focus-visible,
.services-dropdown__trigger:hover,
.services-dropdown__trigger:focus-visible {
  color: var(--color-white);
  background: transparent;
}

.services-dropdown {
  position: relative;
}

.services-dropdown summary {
  list-style: none;
}

.services-dropdown summary::-webkit-details-marker {
  display: none;
}

.services-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  cursor: pointer;
  user-select: none;
}

.services-dropdown__trigger::after {
  width: 0.45rem;
  height: 0.45rem;
  content: "";
  border-right: 0.125rem solid currentColor;
  border-bottom: 0.125rem solid currentColor;
  transform: translateY(-0.125rem) rotate(45deg);
  transition: transform 200ms ease;
}

.services-dropdown[open] > .services-dropdown__trigger::after {
  transform: translateY(0.125rem) rotate(225deg);
}

.services-dropdown__panel {
  display: grid;
  gap: 0.25rem;
  padding: 0.5rem;
  color: var(--color-white);
  background: rgb(25 27 32 / 97%);
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 0.75rem;
  box-shadow: 0 0.8rem 2rem rgb(0 0 0 / 38%);
}

.services-dropdown__item {
  min-height: 2.5rem;
  padding: 0.55rem 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(255 255 255 / 82%);
  border-radius: 0.5rem;
  font-weight: 700;
  line-height: 1.3;
  transition:
    color 250ms ease-in-out,
    background-color 200ms ease;
}

a.services-dropdown__item:hover,
a.services-dropdown__item:focus-visible {
  color: var(--color-white);
  background: rgb(255 255 255 / 12%);
}

/* Atenuado a proposito para leerse como deshabilitado, sin bajar de lo legible. */
.services-dropdown__item--disabled {
  color: rgb(255 255 255 / 55%);
  pointer-events: none;
  user-select: none;
}

.services-dropdown--mobile {
  width: 100%;
  text-align: center;
}

.services-dropdown--mobile .services-dropdown__panel {
  width: min(100%, 16rem);
  margin: 0.75rem auto 0;
  font-size: 1rem;
}

/* Geological page */
.page-content {
  position: relative;
  flex: 1 0 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--color-page);
}

/* Golden swoosh centered on every page. --parallax-shift comes from js/main.js. */
.page-decoration {
  position: absolute;
  top: 50%;
  right: -24rem;
  z-index: 1;
  width: 62rem;
  height: 39rem;
  max-width: none;
  opacity: 0.5;
  pointer-events: none;
  transform: translate3d(0, calc(-50% + var(--parallax-shift, 0rem)), 0);
  will-change: transform;
}

.section-shell {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 3rem), 60rem);
  margin-inline: auto;
}

.section-shell--narrow {
  max-width: 58.4375rem;
}

.geological-hero {
  width: 100%;
  overflow: hidden;
  background: #d4d0c6;
  line-height: 0;
}

.geological-hero img {
  width: 100%;
  height: clamp(27rem, 112vw, 38rem);
  object-fit: cover;
  object-position: 52% center;
}

/* Mobile-only floating social dock: fixed to the bottom edge on every page,
   above the content like the sticky header, hidden from tablet up. */
.mobile-social-bar {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 40;
  width: min(calc(100% - 2rem), 26rem);
  height: 5.625rem;
  padding-inline: 0;
  display: flex;
  align-items: center;
  /* space-evenly reparte todo el sobrante en seis huecos iguales (los cuatro
     interiores mas los dos extremos). Sin gap ni padding propios: cualquiera
     de los dos sumaria a los extremos y dejarian de medir igual que el resto. */
  justify-content: space-evenly;
  gap: 0;
  background: rgb(242 239 228 / 90%);
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 999px;
  transform: translateX(-50%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}

.mobile-social-bar a {
  display: inline-flex;
  border-radius: 0.25rem;
}

/* Icons are painted via mask so they can take the exact #9E936A tone. */
.mobile-social-bar__icon {
  /* Se queda en 3.125rem en moviles grandes y cede algo por debajo de ~455px,
     que es donde 5 circulos de 50px dejarian de caber con holgura. Sin esto
     space-evenly no tiene sobrante que repartir y la fila desborda. */
  width: clamp(2.375rem, 11vw, 3.125rem);
  height: clamp(2.375rem, 11vw, 3.125rem);
  display: block;
  background: #9e936a;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}

.mobile-social-bar a:nth-child(1) .mobile-social-bar__icon {
  --icon: url("data:image/svg+xml,%3Csvg%20width%3D%2229%22%20height%3D%2230%22%20viewBox%3D%220%200%2029%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cmask%20id%3D%22li-cut%22%3E%20%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2215%22%20r%3D%2214.5%22%20fill%3D%22white%22%2F%3E%20%3Cpath%20transform%3D%22translate%287.3%207.8%29%20scale%280.6%29%22%20d%3D%22M20.447%2020.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853%200-2.136%201.445-2.136%202.939v5.667H9.351V9h3.414v1.561h.046c.477-.9%201.637-1.85%203.37-1.85%203.601%200%204.267%202.37%204.267%205.455v6.286zM5.337%207.433c-1.144%200-2.063-.926-2.063-2.065%200-1.138.92-2.063%202.063-2.063%201.14%200%202.064.925%202.064%202.063%200%201.139-.925%202.065-2.064%202.065zm1.782%2013.019H3.555V9h3.564v11.452zM22.225%200H1.771C.792%200%200%20.774%200%201.729v20.542C0%2023.227.792%2024%201.771%2024h20.451C23.2%2024%2024%2023.227%2024%2022.271V1.729C24%20.774%2023.2%200%2022.222%200h.003z%22%20fill%3D%22black%22%2F%3E%20%3C%2Fmask%3E%20%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2215%22%20r%3D%2214.5%22%20fill%3D%22%239E936A%22%20mask%3D%22url%28%23li-cut%29%22%2F%3E%20%3C%2Fsvg%3E");
}

.mobile-social-bar a:nth-child(2) .mobile-social-bar__icon {
  --icon: url("data:image/svg+xml,%3Csvg%20width%3D%2229%22%20height%3D%2230%22%20viewBox%3D%220%200%2029%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20transform%3D%22translate%280%200.5%29%20scale%281.2083%29%22%20d%3D%22M9.101%2023.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085%201.848-5.978%205.858-5.978.401%200%20.955.042%201.468.103a8.68%208.68%200%200%201%201.141.195v3.325a8.623%208.623%200%200%200-.653-.036%2026.805%2026.805%200%200%200-.733-.009c-.707%200-1.259.096-1.675.309a1.686%201.686%200%200%200-.679.622c-.258.42-.374.995-.374%201.752v1.297h3.919l-.386%202.103-.287%201.564h-3.246v8.245C19.396%2023.238%2024%2018.179%2024%2012.044c0-6.627-5.373-12-12-12s-12%205.373-12%2012c0%205.628%203.874%2010.35%209.101%2011.647Z%22%20fill%3D%22black%22%2F%3E%20%3C%2Fsvg%3E");
}

.mobile-social-bar a:nth-child(3) .mobile-social-bar__icon {
  --icon: url("data:image/svg+xml,%3Csvg%20width%3D%2229%22%20height%3D%2230%22%20viewBox%3D%220%200%2029%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cmask%20id%3D%22instagram-cut%22%3E%20%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2215%22%20r%3D%2214.5%22%20fill%3D%22white%22%2F%3E%20%3Cpath%20transform%3D%22translate%287.8%208.3%29%20scale%280.56%29%22%20d%3D%22M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228%201.3877-.6652.6677-1.075%201.3368-1.3802%202.127-.2954.7638-.4956%201.6365-.552%202.914-.0564%201.2775-.0689%201.6882-.0626%204.947.0062%203.2586.0206%203.6671.0825%204.9473.061%201.2765.264%202.1482.5635%202.9107.308.7889.72%201.4573%201.388%202.1228.6679.6655%201.3365%201.0743%202.1285%201.38.7632.295%201.6361.4961%202.9134.552%201.2773.056%201.6884.069%204.9462.0627%203.2578-.0062%203.668-.0207%204.9478-.0814%201.28-.0607%202.147-.2652%202.9098-.5633.7889-.3086%201.4578-.72%202.1228-1.3881.665-.6682%201.0745-1.3378%201.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982%201.33%2020.628.9208%2019.8378.6165%2019.074.321%2018.2017.1197%2016.9244.0645%2015.6471.0093%2015.236-.005%2011.977.0014%208.718.0076%208.31.0215%207.0301.0839m.1402%2021.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814%201.3783-.9003.423-.1651%201.0575-.3614%202.227-.4171%201.2655-.06%201.6447-.072%204.848-.079%203.2033-.007%203.5835.005%204.8495.0608%201.169.0508%201.8053.2445%202.228.408.5608.216.96.4754%201.3816.895.4217.4194.6816.8176.9005%201.3787.1653.4217.3617%201.056.4169%202.2263.0602%201.2655.0739%201.645.0796%204.848.0058%203.203-.0055%203.5834-.061%204.848-.051%201.17-.245%201.8055-.408%202.2294-.216.5604-.4763.96-.8954%201.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953%205.5864A1.44%201.44%200%201%200%2018.39%204.144a1.44%201.44%200%200%200-1.437%201.4424M5.8385%2012.012c.0067%203.4032%202.7706%206.1557%206.173%206.1493%203.4026-.0065%206.157-2.7701%206.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156%202.771-6.1496%206.1738M8%2012.0077a4%204%200%201%201%204.008%203.9921A3.9996%203.9996%200%200%201%208%2012.0077%22%20fill%3D%22black%22%2F%3E%20%3C%2Fmask%3E%20%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2215%22%20r%3D%2214.5%22%20fill%3D%22%239E936A%22%20mask%3D%22url%28%23instagram-cut%29%22%2F%3E%20%3C%2Fsvg%3E");
}

.mobile-social-bar a:nth-child(4) .mobile-social-bar__icon {
  --icon: url("data:image/svg+xml,%3Csvg%20width%3D%2229%22%20height%3D%2230%22%20viewBox%3D%220%200%2029%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cmask%20id%3D%22x-cut%22%3E%20%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2215%22%20r%3D%2214.5%22%20fill%3D%22white%22%2F%3E%20%3Cpath%20transform%3D%22translate%286.53%206.65%29%20scale%280.56%29%22%20d%3D%22M21.7423%202.33411H25.7446L17.0008%2012.6609L27.2872%2026.7133H19.233L12.9247%2018.1906L5.70653%2026.7133H1.70181L11.0542%2015.6676L1.1864%202.33411H9.44507L15.1473%2010.1242L21.7423%202.33411ZM20.3377%2024.2379H22.5554L8.24003%204.67951H5.86018L20.3377%2024.2379Z%22%20fill%3D%22black%22%2F%3E%20%3C%2Fmask%3E%20%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2215%22%20r%3D%2214.5%22%20fill%3D%22%239E936A%22%20mask%3D%22url%28%23x-cut%29%22%2F%3E%20%3C%2Fsvg%3E");
}

.mobile-social-bar a:nth-child(5) .mobile-social-bar__icon {
  --icon: url("data:image/svg+xml,%3Csvg%20width%3D%2229%22%20height%3D%2230%22%20viewBox%3D%220%200%2029%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cmask%20id%3D%22yt-cut%22%3E%20%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2215%22%20r%3D%2214.5%22%20fill%3D%22white%22%2F%3E%20%3Cpath%20d%3D%22M11.6%209.4%20L21%2015%20L11.6%2020.6%20Z%22%20fill%3D%22black%22%2F%3E%20%3C%2Fmask%3E%20%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2215%22%20r%3D%2214.5%22%20fill%3D%22%239E936A%22%20mask%3D%22url%28%23yt-cut%29%22%2F%3E%20%3C%2Fsvg%3E");
}

/* Floating WhatsApp button, always on screen, en las 10 paginas. */
.whatsapp-button {
  position: fixed;
  right: 1.25rem;
  bottom: 10.5rem;
  z-index: 40;
  width: 4.5rem;
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border: 0.1875rem solid var(--color-gold);
  border-radius: 50%;
  box-shadow: 0 0.25rem 0.9rem rgb(39 35 25 / 18%);
}

.whatsapp-button img {
  width: 2.125rem;
  height: 2.125rem;
}

.geological-intro {
  padding-block: clamp(3.5rem, 10vw, 5.25rem);
  background: var(--color-page);
}

.section-title {
  max-width: 48rem;
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-title);
  font-weight: 700;
  line-height: var(--line-height-title);
}

.section-title::after {
  content: "";
  width: 3.5rem;
  height: 0.1875rem;
  margin-top: 1rem;
  display: block;
  background: var(--color-gold);
}

.intro-copy {
  max-width: 58rem;
  margin-top: 2.25rem;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.intro-copy p {
  margin: 0;
}

.intro-copy p + p {
  margin-top: 1.55rem;
}

.geological-services {
  position: relative;
  padding-block: 1rem clamp(4.5rem, 12vw, 7rem);
  overflow: hidden;
  background: var(--color-page);
}

.geological-services::before,
.geological-services::after {
  content: "";
  position: absolute;
  z-index: 1;
  border: 1px solid rgb(194 186 152 / 32%);
  border-radius: 50%;
  pointer-events: none;
}

.geological-services::before {
  top: 15rem;
  right: -8rem;
  width: 17rem;
  height: 17rem;
  box-shadow:
    0 0 0 2.7rem rgb(194 186 152 / 5%),
    0 0 0 5.4rem rgb(194 186 152 / 4%);
}

.geological-services::after {
  bottom: 11rem;
  left: -7rem;
  width: 14rem;
  height: 14rem;
  box-shadow: 0 0 0 3.5rem rgb(194 186 152 / 5%);
}

.services-title {
  margin: 0 0 clamp(2.3rem, 8vw, 4rem);
  font-size: clamp(1.55rem, 5.5vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.service-grid {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  list-style: none;
}

.service-card {
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--color-white);
  box-shadow: 0 0.25rem 1.1rem rgb(39 35 25 / 5%);
}

.service-card p {
  min-height: 6.8rem;
  margin: 0;
  padding: 1.9rem clamp(1.2rem, 6vw, 2.5rem) 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.96rem, 3.7vw, 1.0625rem);
  line-height: 1.32;
  text-align: center;
}

.service-card img {
  width: 100%;
  height: auto;
  align-self: end;
  aspect-ratio: 455 / 235;
  object-fit: cover;
}

/* Contact form */
.contact-section {
  padding-block: clamp(4rem, 12vw, 7.25rem);
  background: var(--color-white);
}

.contact-form {
  min-width: 0;
  max-width: 100%;
  margin-top: clamp(2.75rem, 8vw, 4.5rem);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  background: var(--color-page);
  border: 1px solid rgb(194 186 152 / 42%);
}

.contact-form__identity,
.contact-form__details,
.form-message-fields {
  display: grid;
}

.contact-form__identity {
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.contact-form__details {
  margin-top: 2rem;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.form-message-fields {
  align-content: start;
  gap: 1.25rem;
}

.contact-form__identity,
.contact-form__details,
.form-message-fields {
  min-width: 0;
  max-width: 100%;
}

.form-field {
  min-width: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0.72rem 0.8rem;
  display: block;
  color: var(--color-text);
  background: var(--color-field);
  border: 1px solid var(--color-line);
  border-radius: 0.625rem;
  font: inherit;
  font-weight: 400;
  line-height: 1.35;
  transition:
    border-color 150ms ease,
    background-color 150ms ease;
}

.form-field input,
.form-field select {
  height: 2.75rem;
}

.form-field textarea {
  min-height: 12.5rem;
  resize: vertical;
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover,
.application-field input:hover,
.application-field textarea:hover,
.application-field select:hover {
  border-color: var(--color-gold);
}

/* Selects drop the native look: rounded field with the brand-red caret. */
.form-field select,
.people-first-page .application-field select {
  padding-right: 2.6rem;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10'%3E%3Cpath d='M1 1h12L7 9Z' fill='%23B2292E'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  cursor: pointer;
}

.form-field select {
  border: 1px solid var(--color-line);
  border-radius: 0.625rem;
}

/*
 * iOS Safari zooms the viewport when a focused form control is below 16px.
 * Keep mobile controls at 16px so the form remains stable while editing.
 */
@media (max-width: 47.999rem) {
  .form-field input,
  .form-field select,
  .form-field textarea {
    font-size: 1rem;
  }
}

.form-trap {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.contact-form__actions {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}

.form-status {
  min-height: 1.4rem;
  margin: 0;
  flex: 1 1 auto;
  font-size: 0.875rem;
  line-height: 1.4;
}

.form-status[data-state="success"] {
  color: var(--color-success);
}

.form-status[data-state="error"] {
  color: var(--color-error);
}

.submit-button {
  min-width: 8.75rem;
  min-height: 2.75rem;
  padding: 0.7rem 1.5rem;
  align-self: flex-end;
  /* Texto oscuro sobre el dorado: en blanco el contraste era de 1.95:1, por
     debajo del 4.5:1 que pide WCAG AA. El hover lo devuelve a blanco porque
     alli el fondo ya es rojo. */
  color: var(--color-text);
  background: var(--color-gold);
  border: 0;
  border-radius: 0.625rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    transform 150ms ease;
}

.submit-button:hover,
.submit-button:focus-visible {
  color: var(--color-white);
  background: var(--color-red);
}

.submit-button:active {
  transform: translateY(0.0625rem);
}

.submit-button:disabled {
  cursor: wait;
  opacity: 0.62;
}

/* Footer */
.site-footer {
  position: relative;
  min-height: 28rem;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--color-white);
}

.site-footer__content {
  position: relative;
  z-index: 3;
  width: min(100% - 3rem, var(--content-width));
  margin-inline: auto;
  padding-top: 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}

.footer-logo {
  display: block;
  width: 5.625rem;
  height: 6.8125rem;
}

.footer-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-links {
  width: min(100%, 21rem);
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2.5rem, 14vw, 5rem);
}

.footer-links__column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.78rem;
}

.footer-links a,
.legal-links a {
  border-radius: 0.2rem;
  font-size: 0.75rem;
  line-height: 1.4;
  transition: color 150ms ease;
}

.footer-links a:hover,
.footer-links a:focus-visible,
.legal-links a:hover,
.legal-links a:focus-visible {
  color: var(--color-red);
}

.social-links {
  display: none;
}

.legal-links {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  text-align: center;
}

.footer-art {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 9.75rem;
  overflow: hidden;
}

.footer-wave {
  position: absolute;
  left: -15%;
  width: 130%;
  border-radius: 52% 48% 0 0 / 82% 72% 0 0;
  transform-origin: center bottom;
}

.footer-wave--light {
  bottom: 0;
  height: 9.5rem;
  background: var(--color-wave-light);
  transform: rotate(2deg) translateX(-2%);
}

.footer-wave--salmon {
  bottom: -1.8rem;
  height: 8rem;
  background: var(--color-wave-salmon);
  transform: rotate(-2deg) translateX(5%);
}

.footer-wave--coral {
  bottom: -2.7rem;
  height: 6.7rem;
  background: var(--color-wave-coral);
  transform: rotate(1.5deg) translateX(-6%);
}

.footer-wave--red {
  bottom: -3.8rem;
  height: 6rem;
  background: var(--color-wave-red);
  transform: rotate(-1deg) translateX(9%);
}

.copyright {
  position: absolute;
  right: 1rem;
  bottom: 1.1rem;
  left: 1rem;
  z-index: 4;
  margin: 0;
  color: var(--color-white);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* El dock flotante se pega al borde inferior de la pantalla, asi que tapaba
   el copyright al llegar al final de la pagina. Se sube la ola y el texto por
   encima de esa franja; el hueco que queda al pie es justo por donde flota. */
@media (max-width: 47.999rem) {
  .site-footer {
    /* El min-height crece a la par que el padding: si no, se lo come y el
       contenido no baja, con lo que el copyright se monta sobre los legales. */
    min-height: calc(28rem + var(--dock-clearance));
    padding-bottom: var(--dock-clearance);
  }

  .footer-art {
    bottom: var(--dock-clearance);
  }

  .copyright {
    bottom: calc(1.1rem + var(--dock-clearance));
  }
}

@media (min-width: 48rem) {
  html {
    scroll-padding-top: calc(var(--header-height-desktop) + 1rem);
  }

  .site-header {
    height: var(--header-height-desktop);
  }

  .site-header__inner {
    width: min(calc(100% - 4rem), var(--content-width));
    padding-inline: 0;
  }

  /* 2rem de alto; el ancho conserva la proporcion 58x42 del SVG. */
  .brand-mark {
    width: 2.75rem;
    height: 2rem;
  }

  .desktop-nav {
    display: flex;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }

  /* Match the sibling nav links exactly: inherit alone left it at body size. */
  .services-dropdown--desktop .services-dropdown__trigger {
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    gap: 0.45rem;
  }

  .services-dropdown--desktop .services-dropdown__trigger::after {
    width: 0.4rem;
    height: 0.4rem;
  }

  .services-dropdown--desktop .services-dropdown__panel {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 50%;
    z-index: 30;
    width: 12rem;
    transform: translateX(-50%);
  }

  .services-dropdown--desktop .services-dropdown__panel::before {
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 0.75rem;
    content: "";
  }

  .services-dropdown--desktop .services-dropdown__item {
    justify-content: flex-start;
    font-size: 0.875rem;
  }

  .desktop-nav__link {
    padding: 0.35rem 0.6rem;
    color: rgb(255 255 255 / 82%);
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    transition: color 250ms ease-in-out;
  }

  .desktop-nav__link:hover,
  .desktop-nav__link:focus-visible {
    color: var(--color-white);
    background: transparent;
  }

  .menu-button,
  .mobile-menu {
    display: none !important;
  }

  .section-shell {
    width: min(calc(100% - 4rem), 60rem);
  }

  .geological-hero img {
    height: min(62.5vw, 50rem);
    object-position: center;
  }

  .mobile-social-bar {
    display: none;
  }

  /* Inset grows with the viewport so it keeps the Figma spacing at any width. */
  .whatsapp-button {
    right: clamp(2rem, 6.5vw, 7rem);
    bottom: clamp(2rem, 6.5vw, 7rem);
    width: 3.75rem;
    height: 3.75rem;
  }

  .whatsapp-button img {
    width: 2.25rem;
    height: 2.25rem;
  }

  .geological-intro {
    padding-block: 5.5rem 6.25rem;
  }

  .intro-copy {
    margin-top: 2.7rem;
  }

  .geological-services {
    padding-block: 1.25rem 7.75rem;
  }

  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .service-card p {
    min-height: 6.75rem;
    padding: 1.75rem 2rem 1.2rem;
    font-size: 1rem;
  }

  .contact-form__identity {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }

  .contact-form__details {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .form-message-fields {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    align-items: start;
  }

  .contact-form__actions {
    flex-direction: row;
    align-items: center;
  }

  .site-footer {
    min-height: 20.25rem;
  }

  .site-footer__content {
    width: min(calc(100% - 4rem), var(--content-width));
    padding-top: 1.5rem;
    grid-template-columns: 5.625rem minmax(17rem, 1fr) auto;
    grid-template-areas:
      "logo links social"
      "legal legal legal";
    align-items: center;
    justify-items: start;
    column-gap: clamp(2.5rem, 5vw, 4.125rem);
  }

  .footer-logo {
    grid-area: logo;
  }

  .footer-links {
    grid-area: links;
    width: 100%;
    margin-top: 0;
    column-gap: clamp(2.25rem, 5vw, 4.5rem);
  }

  .social-links {
    grid-area: social;
    display: flex;
    align-items: center;
    gap: clamp(0.7rem, 1.7vw, 1.25rem);
  }

  .social-links a {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition:
      transform 160ms ease,
      opacity 160ms ease;
  }

  .social-links a:hover,
  .social-links a:focus-visible {
    opacity: 0.72;
    transform: translateY(-0.125rem);
  }

  .social-links img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .legal-links {
    grid-area: legal;
    width: 100%;
    margin-top: 3rem;
  }

  .footer-art {
    height: 9.5rem;
  }

  .footer-wave {
    left: -8%;
    width: 116%;
  }

  .footer-wave--light {
    transform: rotate(1.3deg) translateX(-4%);
  }

  .footer-wave--salmon {
    transform: rotate(-1.2deg) translateX(7%);
  }

  .footer-wave--coral {
    transform: rotate(0.8deg) translateX(-5%);
  }

  .footer-wave--red {
    transform: rotate(-0.6deg) translateX(11%);
  }
}

/* Tablet: preserve two service columns while giving the form more room. */
@media (min-width: 48rem) and (max-width: 64rem) {
  .site-header__inner,
  .section-shell,
  .site-footer__content {
    width: min(calc(100% - 3rem), 60rem);
  }

  .desktop-nav {
    gap: clamp(1.5rem, 4vw, 2.75rem);
  }

  .geological-hero img {
    height: clamp(30rem, 62.5vw, 40rem);
  }

  .geological-intro {
    padding-block: 4.5rem 5.25rem;
  }

  .geological-services {
    padding-bottom: 6.5rem;
  }

  .service-card p {
    min-height: 8.25rem;
    padding-inline: 1.5rem;
  }

  .contact-section {
    padding-block: 5.5rem 6.5rem;
  }

  .contact-form {
    padding: 2rem;
  }

  .contact-form__identity {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .contact-form__details {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .form-message-fields {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    align-items: start;
  }

  .form-field--message textarea {
    min-height: 12.5rem;
  }

  .site-footer__content {
    column-gap: 2rem;
  }

  .social-links {
    gap: 0.65rem;
  }
}

@media (min-width: 80rem) {
  .site-header__inner,
  .site-footer__content {
    width: var(--content-width);
  }
}

/* Above Full HD the hero grows with the viewport so it keeps the exact
   1920×1080 framing (heads visible); svh caps it on short ultrawide screens. */
@media (min-width: 120rem) {
  .geological-hero img {
    height: min(41.67vw, 90vh);
    height: min(41.67vw, 90svh);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* People First */
.people-first-page {
  font-family: var(--font-family-body);
}

/* Igual que el menu: sobre el dorado, tipografia oscura. En blanco el texto
   de la franja se quedaba en 1.95:1. */
.people-banner {
  position: relative;
  z-index: 10;
  min-height: 9.375rem;
  color: var(--color-text);
  background: var(--color-gold);
}

.people-banner__inner {
  width: min(calc(100% - 2.5rem), var(--content-width));
  min-height: inherit;
  margin-inline: auto;
  padding-block: 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  align-items: start;
  gap: 1rem;
}

.people-banner p {
  max-width: 100%;
  margin: 0;
  font-size: var(--font-size-banner);
  font-weight: 700;
  line-height: 1.45;
}

.cta-button {
  width: auto;
  min-width: 7.0625rem;
  max-width: 100%;
  min-height: 2.3125rem;
  padding: 0.6rem 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  /* Texto oscuro sobre el blanco del boton: en dorado se leia a 1.95:1. El
     borde dorado se mantiene, es lo que lo ata al banner. */
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-gold);
  border-radius: 0.625rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  transition: none;
}

.cta-button:hover,
.cta-button:focus-visible {
  color: var(--color-text);
  background: var(--color-white);
}

@media (max-width: 47.99rem) {
  .people-banner .cta-button {
    justify-self: center;
  }
}

.people-content {
  overflow: hidden;
  background: var(--color-page);
}

.people-shell {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 2.5rem), 58.5rem);
  margin-inline: auto;
}

.people-intro {
  padding-block: 3.125rem 4rem;
  background: var(--color-page);
}

.people-intro h1,
.people-application-section h2 {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-title);
  font-weight: 700;
  line-height: var(--line-height-title);
}

.people-intro__copy {
  margin-top: 2.25rem;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.people-intro__copy p {
  margin: 0;
}

.people-intro__copy p + p {
  margin-top: 1.5rem;
}

.people-intro__copy .people-social + p {
  margin-top: 1.5rem;
}

.people-social {
  width: min(100%, 18rem);
  margin: 1.5rem auto;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: rgb(242 239 228 / 92%);
  border-radius: 999px;
}

.people-social a {
  width: 1.8125rem;
  height: 1.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.people-social img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.people-hero {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: #d8d2c7;
}

.people-hero img {
  width: 100%;
  height: 10.3125rem;
  object-fit: cover;
  object-position: center;
}

.success-stories {
  position: relative;
  background: var(--color-white);
}

.success-stories__inner {
  width: 100%;
  margin-inline: auto;
  padding-block: 3.5rem 4.5rem;
}

.success-stories h2 {
  margin: 0 1.25rem 3.5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}

.success-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.success-story + .success-story {
  margin-top: 4.5rem;
}

.success-story h3 {
  margin: 0 1.25rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

.success-story h3::after {
  content: "";
  width: 7rem;
  height: 0.125rem;
  margin-top: 0.65rem;
  display: block;
  background: var(--color-gold);
}

.success-story img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.success-story__copy {
  padding: 1.5rem 1.25rem 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.success-story__copy h4 {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
}

.success-story__copy h4:not(:first-child) {
  margin-top: 1.75rem;
}

.success-story__copy p {
  margin: 0;
}

.people-application-section {
  position: relative;
  scroll-margin-top: 1rem;
  padding-block: 4.5rem 6rem;
  overflow: hidden;
  background: var(--color-white);
}

.people-application-form {
  position: relative;
  z-index: 2;
  margin-top: 3.5rem;
  display: grid;
  gap: 2rem;
}

.application-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

.application-field {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.375;
}

.application-field input,
.application-field textarea,
.application-field select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 2.75rem;
  padding: 0.72rem 0.8rem;
  color: var(--color-text);
  background: var(--color-field);
  border: 1px solid var(--color-line);
  border-radius: 0.625rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.375;
  transition:
    border-color 150ms ease,
    background-color 150ms ease;
}

.application-field a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.application-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.application-fieldset legend {
  margin-bottom: 1.25rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.375;
}

.application-fieldset label {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 1rem;
  line-height: 1.375;
}

.application-fieldset input[type="radio"],
.application-fieldset input[type="checkbox"] {
  width: 1.0625rem;
  height: 1.0625rem;
  margin: 0.15rem 0 0;
  flex: 0 0 auto;
  accent-color: var(--color-red);
}

.application-fieldset--authorization {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
}

.application-fieldset--authorization legend {
  width: 100%;
}

.application-fieldset--checklist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.application-fieldset--checklist legend {
  width: 100%;
}

/* The file name follows the field's line box, so line-height — not flex —
   is what centres it against the button. */
.application-upload input[type="file"] {
  padding-block: 0;
  padding-inline: 0.5rem;
  line-height: 2.625rem;
  cursor: pointer;
}

.application-upload input[type="file"]::file-selector-button {
  height: 1.75rem;
  margin-right: 0.75rem;
  padding-inline: 0.5rem 0.75rem;
  color: var(--color-text);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--color-line);
  font: inherit;
  font-weight: 700;
  line-height: 1.75rem;
  vertical-align: middle;
  cursor: pointer;
}

.application-introduction-note {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.375;
}

.application-introduction-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  overflow-wrap: anywhere;
}

.people-application-form__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.application-progress {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.5rem;
}

.application-progress[hidden] {
  display: none;
}

.application-progress__track {
  position: relative;
  height: 0.625rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-field);
}

.application-progress__bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--color-red);
  transition: width 180ms ease;
}

.application-progress__track[data-mode="indeterminate"]
  .application-progress__bar {
  width: 40%;
  animation: application-progress-slide 1.1s ease-in-out infinite;
}

.application-progress__label {
  margin: 0;
  color: var(--color-text);
  font-size: 0.875rem;
  line-height: 1.4;
}

@keyframes application-progress-slide {
  from {
    transform: translateX(-125%);
  }

  to {
    transform: translateX(275%);
  }
}

.people-application-form__actions .submit-button {
  width: min(100%, 13rem);
  justify-self: end;
}

@media (prefers-reduced-motion: reduce) {
  .application-progress__track[data-mode="indeterminate"]
    .application-progress__bar {
    width: 100%;
    transform: none;
    animation: none !important;
  }
}

@media (min-width: 48rem) {
  .people-banner {
    min-height: 4.5625rem;
  }

  .people-banner__inner {
    width: min(calc(100% - 4rem), var(--content-width));
    padding-block: 0.8rem;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: normal;
    align-items: center;
    gap: 2rem;
  }

  .people-banner p {
    max-width: 39rem;
  }

  .people-banner .cta-button {
    justify-self: auto;
  }

  .people-intro {
    padding-block: 3.75rem 5.25rem;
  }

  .people-intro__copy {
    margin-top: 2.5rem;
  }

  .people-social {
    display: none;
  }

  .people-hero img {
    height: clamp(23rem, 37.5vw, 30rem);
  }

  .success-stories {
    width: min(calc(100% - 4rem), 70.5rem);
    margin-inline: auto;
    border-inline: 3px solid var(--color-red);
    border-top: 0;
    border-bottom: 3px solid var(--color-red);
    border-radius: 0 0 1.5625rem 1.5625rem;
  }

  .success-stories__inner {
    width: min(calc(100% - 5rem), 62rem);
    padding-block: 3.5rem 7rem;
  }

  .success-stories h2 {
    margin-bottom: 4rem;
  }

  .success-story {
    grid-template-columns: minmax(16rem, 25rem) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(2rem, 5vw, 5rem);
  }

  .success-story + .success-story {
    margin-top: 6.5rem;
  }

  .success-story h3 {
    grid-column: 1 / -1;
    margin-inline: 0;
  }

  .success-story img {
    grid-column: 1;
    width: 100%;
  }

  .success-story__copy {
    grid-column: 2;
    padding: 0;
  }

  .success-story--copy-first .success-story__copy {
    grid-column: 1;
    grid-row: 2;
  }

  .success-story--copy-first img {
    grid-column: 2;
    grid-row: 2;
  }

  .people-application-section {
    padding-block: 6rem 8rem;
  }

  .application-grid--identity {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .application-grid--profile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .application-fieldset--authorization {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .application-fieldset--authorization legend {
    grid-column: 1 / -1;
  }

  .application-fieldset--checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
  }

  .application-fieldset--checklist legend {
    grid-column: 1 / -1;
  }

  .people-application-form__actions {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

@media (min-width: 64.001rem) {
  .application-grid--identity {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* From 1536px up the 30rem cap would crop the crew vertically; height: auto
   follows the photo's natural 2867×897 ratio so nobody is cut off. */
@media (min-width: 96rem) {
  .people-hero img {
    height: auto;
  }
}

@media (min-width: 48rem) and (max-width: 64rem) {
  .people-shell {
    width: min(calc(100% - 3rem), 58.5rem);
  }

  .success-stories {
    width: min(calc(100% - 3rem), 70.5rem);
  }

  .success-stories__inner {
    width: min(calc(100% - 4rem), 62rem);
  }

  .success-story {
    grid-template-columns: minmax(15rem, 0.9fr) minmax(0, 1.1fr);
    column-gap: 2rem;
  }

  .application-grid--profile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Staff page */
.staff-page .page-content,
.staff-page .people-intro,
.staff-page .staff-team,
.staff-page .staff-consultation,
.staff-page .member-profile {
  background: var(--color-white);
}

.staff-team {
  padding-block: 0 clamp(3rem, 9vw, 4.5rem);
}

.staff-team__title {
  text-align: center;
}

.staff-team__title,
.staff-consultation__title {
  margin: 0 0 clamp(2rem, 7vw, 2.75rem);
  font-size: clamp(1.35rem, 5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
}

.staff-grid {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  list-style: none;
}

.staff-card {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 1.5rem 1.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 0.375rem;
  text-align: center;
}

/* Placeholder portrait: initials until the real photographs arrive. */
.staff-card__portrait {
  width: 7.5rem;
  height: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  background: var(--color-gold);
  border: 0.1875rem solid var(--color-red);
  border-radius: 50%;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  object-fit: cover;
}

img.staff-card__portrait {
  width: 10.5rem;
  height: 10.5rem;
  padding: 0;
  background: transparent;
  border: 0;
}

.staff-card__name {
  margin: 0.75rem 0 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
}

.staff-card__role {
  min-height: 2.7rem;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.staff-card__link {
  margin-top: auto;
  padding: 0.7rem 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  background: var(--color-red);
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  transition: background-color 200ms ease;
}

.staff-card__link:hover,
.staff-card__link:focus-visible {
  background: #8f2024;
}

.staff-consultation {
  padding-block: 0 clamp(3.5rem, 10vw, 5rem);
}

.staff-form {
  display: grid;
  gap: 1.5rem;
}

.staff-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

.staff-form__actions {
  display: grid;
  gap: 1rem;
}

@media (min-width: 48rem) {
  .staff-team__title {
    text-align: left;
  }

  .staff-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem 1.5rem;
  }

  /* Last row centres its two cards, matching the Figma desktop frame. */
  .staff-card:nth-child(4) {
    grid-column: 1 / 2;
    justify-self: end;
    transform: translateX(50%);
  }

  .staff-card:nth-child(5) {
    grid-column: 2 / 3;
    justify-self: end;
    transform: translateX(50%);
  }

  /* A single card on the last row occupies the full centre column. */
  .staff-card:nth-child(4):last-child {
    grid-column: 2 / 3;
    justify-self: stretch;
    transform: none;
  }

  .staff-card__portrait {
    width: 8.5rem;
    height: 8.5rem;
    font-size: 2.1rem;
  }

  .staff-form__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .staff-form__actions {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

/* Individual staff member profile */
.member-profile {
  padding-block: clamp(2rem, 7vw, 3rem) clamp(2.5rem, 8vw, 3.5rem);
  text-align: center;
}

.member-profile__portrait {
  width: clamp(8rem, 32vw, 11rem);
  height: auto;
  margin-inline: auto;
}

.member-profile__name {
  margin: 1.25rem 0 0.35rem;
  font-size: clamp(1.3rem, 5vw, 1.6rem);
  font-weight: 700;
  line-height: 1.25;
}

.member-profile__role {
  margin: 0;
  color: var(--color-red);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}




.member-profile__bio {
  margin: clamp(1.75rem, 6vw, 2.5rem) auto 0;
  max-width: 44rem;
  display: grid;
  gap: 1.1rem;
  text-align: left;
}

.member-profile__bio p {
  margin: 0;
}

/* Visible marker while the real biography is pending. */
.member-profile__placeholder {
  padding: 1rem 1.25rem;
  color: var(--color-error);
  background: var(--color-field);
  border-left: 0.25rem solid var(--color-red);
  font-style: italic;
}

.member-profile__qr {
  margin: clamp(2rem, 7vw, 2.75rem) auto 0;
  width: fit-content;
}

.member-profile__qr img {
  width: clamp(9rem, 34vw, 12rem);
  height: auto;
}

@media (min-width: 48rem) {
  .member-profile__bio {
    text-align: center;
  }
}

/* Legal pages: sober, text-first layout */
.legal-page .page-content {
  background: var(--color-white);
}

.legal-document {
  padding-block: clamp(2.5rem, 8vw, 4rem) clamp(3rem, 9vw, 4.5rem);
}

.legal-document__title {
  margin: 0;
  font-size: clamp(1.6rem, 6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
}

.legal-document__updated {
  margin: 0.6rem 0 0;
  color: #5f5c52;
  font-size: 0.9375rem;
}

.legal-lead {
  margin: clamp(1.75rem, 6vw, 2.5rem) 0 0;
  max-width: 46rem;
}

.legal-section {
  margin-top: clamp(1.75rem, 6vw, 2.5rem);
  max-width: 46rem;
}

.legal-section h2 {
  margin: 0 0 0.75rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.legal-section p {
  margin: 0 0 0.9rem;
}

.legal-section p:last-child {
  margin-bottom: 0;
}

.legal-list {
  margin: 0.35rem 0 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.45rem;
}

.legal-list li {
  padding-left: 0.15rem;
}

.legal-list li::marker {
  color: var(--color-gold);
}

.legal-section a,
.legal-contact a {
  color: var(--color-red);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.legal-contact {
  margin-top: 0.9rem;
  font-style: normal;
  line-height: 1.7;
}

@media (min-width: 48rem) {
  .legal-section h2 {
    font-size: 1.125rem;
  }
}

/* ==========================================================================
   Podcast — People First
   Cabecera tipo pagina de show (patron Apple Podcasts), ultimo episodio
   destacado y catalogo. El reproductor es una fachada: se pinta el thumbnail
   y el iframe de YouTube solo se inserta al pulsar. Mobile-first.
   ========================================================================== */

.podcast-shell {
  width: min(100% - 2.5rem, var(--content-width));
  margin-inline: auto;
}

/* --- Cabecera --- */
.podcast-hero {
  position: relative;
  z-index: 2;
  padding: clamp(2.25rem, 8vw, 4rem) 0 clamp(2.5rem, 8vw, 4.25rem);
  overflow: hidden;
  color: var(--color-white);
  background: #161310;
}

.podcast-hero__bg {
  position: absolute;
  inset: 0;
  /* Version reducida a proposito: va con blur(22px) y opacidad 0.45,
     asi que la resolucion del original no aporta nada aqui. */
  background: url("../img/podcast/hero-backdrop.webp") center / cover;
  opacity: 0.45;
  filter: blur(22px) saturate(115%);
  transform: scale(1.15);
}

.podcast-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(
    105deg,
    rgb(18 15 12 / 95%) 0%,
    rgb(18 15 12 / 78%) 46%,
    rgb(178 41 46 / 38%) 100%
  );
}

.podcast-hero__inner {
  position: relative;
  z-index: 2;
  width: min(100% - 2.5rem, var(--content-width));
  margin-inline: auto;
  display: grid;
  justify-items: center;
  gap: clamp(1.5rem, 5vw, 2.375rem);
  text-align: center;
}

.podcast-hero__art {
  position: relative;
  width: clamp(9.5rem, 42vw, 13.25rem);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 1rem;
  background: linear-gradient(150deg, #2a2520, #12100d);
  box-shadow: 0 1.125rem 2.75rem rgb(0 0 0 / 55%);
}

.podcast-hero__art > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  opacity: 0.92;
}

.podcast-hero__lockup {
  position: absolute;
  inset: auto 0 0;
  padding: 0.8rem 0.875rem;
  text-align: left;
  background: linear-gradient(to top, rgb(0 0 0 / 88%), transparent);
}

.podcast-hero__lockup b {
  display: block;
  font-size: 1.1875rem;
  line-height: 1.05;
  letter-spacing: 0.03em;
}

.podcast-hero__lockup span {
  display: block;
  margin-top: 0.25rem;
  color: var(--color-gold);
  font-size: 0.6rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.podcast-hero__eyebrow {
  margin: 0 0 0.65rem;
  color: var(--color-gold);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.podcast-hero__title {
  margin: 0;
  font-size: clamp(2.5rem, 11vw, 3.875rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.podcast-hero__sub {
  margin: 0.5rem 0 0;
  color: rgb(255 255 255 / 82%);
  font-size: clamp(1.0625rem, 4vw, 1.25rem);
  font-weight: 500;
}

.podcast-hero__host {
  margin: 1.125rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: rgb(255 255 255 / 78%);
  font-size: 0.875rem;
}

.podcast-hero__host img {
  width: 1.875rem;
  height: 1.875rem;
  flex: 0 0 auto;
  object-fit: cover;
  border: 0.09375rem solid var(--color-gold);
  border-radius: 50%;
}

.podcast-hero__host a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.podcast-hero__stats {
  margin: 0.45rem 0 0;
  color: rgb(255 255 255 / 55%);
  font-size: 0.78125rem;
}

.podcast-hero__cta {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
}

.podcast-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  padding: 0.75rem 1.375rem;
  color: var(--color-white);
  background: var(--color-red);
  border: 0;
  border-radius: 999px;
  font-size: 0.90625rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 180ms ease,
    filter 180ms ease;
}

.podcast-btn:hover,
.podcast-btn:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-0.0625rem);
}

.podcast-btn__tri {
  width: 0;
  height: 0;
  border-top: 0.4375rem solid transparent;
  border-bottom: 0.4375rem solid transparent;
  border-left: 0.6875rem solid currentcolor;
}

.podcast-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.6875rem 1.0625rem;
  color: var(--color-white);
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: background-color 180ms ease;
}

.podcast-chip:hover,
.podcast-chip:focus-visible {
  background: rgb(255 255 255 / 18%);
}

/* --- Reproductor (fachada) --- */
.episode__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  background: #111;
  border: 0;
  border-radius: 0.6875rem;
  cursor: pointer;
}

.episode__thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.88;
  transition:
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 300ms ease;
}

.episode__thumb:hover > img,
.episode__thumb:focus-visible > img {
  opacity: 1;
  transform: scale(1.06);
}

.episode__play {
  position: absolute;
  inset: 0;
  width: 3.25rem;
  height: 3.25rem;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(178 41 46 / 95%);
  border-radius: 50%;
  box-shadow: 0 0.375rem 1.375rem rgb(0 0 0 / 40%);
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.episode__play::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 0.1875rem;
  border-top: 0.4375rem solid transparent;
  border-bottom: 0.4375rem solid transparent;
  border-left: 0.6875rem solid var(--color-white);
}

.episode__thumb:hover .episode__play,
.episode__thumb:focus-visible .episode__play {
  transform: scale(1.12);
}

.episode__dur {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 0.1875rem 0.5rem;
  color: var(--color-white);
  background: rgb(0 0 0 / 82%);
  border-radius: 0.3125rem;
  font-size: 0.71875rem;
  font-weight: 700;
}

/* El iframe sustituye a la fachada conservando la caja. */
.episode__frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 0.6875rem;
}

/* --- Ultimo episodio --- */
.podcast-latest {
  position: relative;
  z-index: 2;
  padding: clamp(2rem, 7vw, 3.25rem) 0 clamp(1.5rem, 5vw, 2.5rem);
  background: var(--color-page);
}

.podcast-latest__eyebrow {
  margin: 0 0 0.875rem;
  color: var(--color-red);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.podcast-latest__card {
  display: grid;
  gap: 1.25rem;
  padding: 1rem;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1.625rem rgb(0 0 0 / 7%);
}

.podcast-latest__card .episode__title {
  font-size: clamp(1.25rem, 5vw, 1.625rem);
}

/* Ecualizador: solo decorativo, marca que hay audio detras. */
.podcast-eq {
  margin-top: 1rem;
  display: flex;
  align-items: flex-end;
  gap: 0.1875rem;
  height: 1.625rem;
}

.podcast-eq i {
  width: 0.1875rem;
  background: var(--color-gold);
  border-radius: 0.125rem;
  animation: podcast-eq 1.05s ease-in-out infinite;
}

@keyframes podcast-eq {
  0%,
  100% {
    height: 22%;
  }

  50% {
    height: 100%;
  }
}

/* --- Texto de la seccion --- */
.podcast-about {
  position: relative;
  z-index: 2;
  padding: clamp(1.5rem, 5vw, 2.5rem) 0;
  background: var(--color-page);
}

.podcast-about__title,
.podcast-episodes__title {
  margin: 0 0 1.125rem;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-title);
  line-height: var(--line-height-title);
}

.podcast-about p {
  margin: 0 0 1rem;
  max-width: 44rem;
}

.podcast-about p:last-child {
  margin-bottom: 0;
}

/* --- Catalogo --- */
.podcast-episodes {
  position: relative;
  z-index: 2;
  padding: clamp(1.75rem, 6vw, 3rem) 0 clamp(2.5rem, 8vw, 4rem);
  background: var(--color-page);
}

.episode-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.75rem;
  list-style: none;
}

.episode__card {
  display: grid;
  gap: 1rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--color-line);
}

.episode:last-child .episode__card {
  padding-bottom: 0;
  border-bottom: 0;
}

.episode__num {
  margin: 0;
  color: var(--color-red);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.episode__title {
  margin: 0.4375rem 0 0;
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.episode__desc {
  margin: 0.625rem 0 0;
  color: #4a4a46;
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* Recortada a 3 lineas por defecto: el texto sigue en el DOM y visible,
   que es lo que importa para SEO, pero la lista se mantiene escaneable. */
.episode__desc[data-clamp]:not(.is-open) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.episode__more {
  margin-top: 0.4375rem;
  padding: 0;
  color: var(--color-red);
  background: transparent;
  border: 0;
  border-radius: 0.25rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

.episode__more:hover {
  text-decoration: underline;
}

.episode__kw {
  margin: 0.75rem 0 0;
  display: inline-block;
  padding: 0.25rem 0.625rem;
  color: #6f6849;
  background: var(--color-field);
  border-radius: 999px;
  font-size: 0.71875rem;
  font-weight: 600;
}

/* Entrada escalonada al hacer scroll. */
[data-reveal] {
  opacity: 0;
  transform: translateY(0.875rem);
  transition:
    opacity 520ms ease,
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (min-width: 48rem) {
  .podcast-hero__inner {
    grid-template-columns: auto 1fr;
    align-items: end;
    justify-items: start;
    gap: 2.375rem;
    text-align: left;
  }

  .podcast-hero__host,
  .podcast-hero__cta {
    justify-content: flex-start;
  }

  .podcast-latest__card {
    grid-template-columns: 23.5rem 1fr;
    gap: 1.875rem;
    padding: 1.25rem;
  }

  /* Al darle play, el destacado deja la miniatura de 23.5rem y pasa a una
     sola columna: el video ocupa todo el ancho de la tarjeta y la ficha del
     episodio baja debajo. */
  .podcast-latest__card.is-playing {
    grid-template-columns: 1fr;
  }

  .episode__card {
    grid-template-columns: 1fr 15.5rem;
    align-items: start;
    gap: 1.75rem;
  }

  /* El thumbnail va a la derecha, como en el diseno de Figma. */
  .episode__card > .episode__thumb,
  .episode__card > .episode__frame {
    order: 2;
  }

  /* Al reproducir, la tarjeta pasa a una columna y el video ocupa todo el
     ancho: 15.5rem se queda corto para ver nada. */
  .episode__card.is-playing {
    grid-template-columns: 1fr;
  }

  .episode__card.is-playing > .episode__frame {
    order: 0;
  }

  .episode__title {
    font-size: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .podcast-eq i {
    height: 60%;
    animation: none;
  }

  .episode__thumb > img,
  .episode__play,
  [data-reveal] {
    transition: none;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* Respaldo: si el embed falla (YouTube devuelve error 153 cuando el origen
   no le convence, p. ej. abriendo el HTML con file://), siempre queda una
   via directa al video. Ademas son enlaces reales para SEO. */
.episode__watch {
  margin: 0.625rem 0 0;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: #6f6849;
  font-size: 0.8125rem;
  font-weight: 600;
}

.episode__watch:hover,
.episode__watch:focus-visible {
  color: var(--color-red);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* El iframe entra creciendo y fundiendo, para que el cambio de miniatura a
   video a ancho completo se lea como una expansion y no como un salto. */
.episode__frame {
  animation: podcast-frame-in 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: center top;
}

@keyframes podcast-frame-in {
  from {
    opacity: 0;
    transform: scale(0.94);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

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

/* Boton "More videos": el catalogo arranca con unos pocos episodios y va
   revelando el resto por tandas, para no dejar una pagina interminable.
   Lo crea el JS, asi que sin JS se ven los 22 y no se pierde nada. */
.episode-more {
  margin: 2rem auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.75rem;
  color: var(--color-red);
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.episode-more:hover,
.episode-more:focus-visible {
  background: var(--color-field);
  border-color: var(--color-gold);
  transform: translateY(-0.0625rem);
}

.episode-more__count {
  color: #6f6849;
  font-weight: 600;
}

.episode-more::after {
  width: 0.4rem;
  height: 0.4rem;
  content: "";
  border-right: 0.125rem solid currentcolor;
  border-bottom: 0.125rem solid currentcolor;
  transform: translateY(-0.125rem) rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .episode-more {
    transition: none;
  }
}

/* ==========================================================================
   Pagina 404
   Reutiliza la caja de las paginas legales (.page-content + .people-shell) y
   solo añade el bloque de error: codigo, titulo, CTA y lista de destinos.
   Las rutas del HTML son absolutas porque el 404 se sirve desde cualquier
   profundidad de URL.
   ========================================================================== */

.error-document {
  padding-block: clamp(2.5rem, 8vw, 4rem) clamp(3rem, 9vw, 4.5rem);
}

.error-document__code {
  margin: 0;
  color: var(--color-gold);
  font-size: clamp(3.5rem, 14vw, 6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.error-document__title {
  margin: 0.5rem 0 0;
  font-size: clamp(1.6rem, 6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
}

.error-document__lead {
  margin: clamp(1rem, 4vw, 1.35rem) 0 0;
  max-width: 34rem;
}

/* Sigue el patron solido de .podcast-btn (blanco sobre rojo) y no el de
   .cta-button: ese vive sobre el banner dorado, y aqui el fondo es claro,
   donde el dorado sobre blanco se queda en 1.95:1 de contraste. */
.error-document__cta {
  margin-top: clamp(1.5rem, 5vw, 2rem);
  min-height: 2.75rem;
  padding: 0.75rem 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  color: var(--color-white);
  background: var(--color-red);
  border: 0;
  border-radius: 999px;
  font-size: 0.90625rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: filter 180ms ease;
}

.error-document__cta:hover {
  filter: brightness(1.08);
}

.error-document__cta:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .error-document__cta {
    transition: none;
  }
}

.error-document__suggestions {
  margin-top: clamp(2.5rem, 8vw, 3.5rem);
  max-width: 46rem;
  padding-top: clamp(1.5rem, 5vw, 2rem);
  border-top: 1px solid var(--color-line);
}

.error-document__suggestions h2 {
  margin: 0 0 1.25rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.error-document__links {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
  list-style: none;
}

.error-document__links li {
  display: grid;
  gap: 0.2rem;
}

.error-document__links a {
  color: var(--color-red);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  justify-self: start;
}

.error-document__links span {
  color: #5f5c52;
  font-size: 0.9375rem;
  line-height: 1.5;
}

@media (min-width: 48rem) {
  .error-document__suggestions h2 {
    font-size: 1.125rem;
  }
}

/* Aviso por campo en el formulario de candidaturas.
   El servidor rechaza por longitud y por formato, pero antes no se decia
   cual ni cuanto: esto lo dice mientras se escribe, no al enviar. */
.field-note {
  margin: 0.3rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: #6f6849;
}

.field-note--error {
  color: var(--color-error);
  font-weight: 600;
}

.field-note--warn {
  color: #8a6d1f;
  font-weight: 600;
}

.application-field :is(input, textarea).is-invalid {
  border-color: var(--color-error);
  box-shadow: 0 0 0 0.0625rem var(--color-error);
}

/* El contador va a la derecha, bajo el area de texto. */
.field-note--counter {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* El area de objetivos profesionales hereda el estilo de los campos, pero
   no su altura fija: necesita crecer y poder redimensionarse en vertical. */
.application-field textarea {
  height: auto;
  min-height: 6rem;
  resize: vertical;
}

/* Main Home and Workforce Strategy Advisory */
.home-page,
.advisory-page {
  background: var(--color-page);
}

.home-page main,
.advisory-page main,
.home-page main :is(h1, h2, h3, p, li, a, blockquote),
.advisory-page main :is(h1, h2, h3, p, li, a) {
  opacity: 1;
}

.home-shell {
  width: min(100% - 2rem, 74rem);
  margin-inline: auto;
}

.home-section {
  padding-block: clamp(3.5rem, 9vw, 7rem);
}

.section-kicker {
  margin: 0 0 0.75rem;
  color: var(--color-red);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-hero {
  position: relative;
  min-height: clamp(34rem, 78svh, 47rem);
  display: grid;
  align-items: end;
  overflow: hidden;
  color: var(--color-white);
  isolation: isolate;
}

.home-hero__image,
.home-hero__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-hero__image {
  z-index: -2;
  object-fit: cover;
  object-position: 64% center;
}

.home-hero__overlay {
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(11 12 13 / 8%) 0%, rgb(11 12 13 / 76%) 100%),
    linear-gradient(90deg, rgb(11 12 13 / 88%) 0%, rgb(11 12 13 / 52%) 54%, transparent 82%);
}

.home-hero__content {
  width: min(100% - 2rem, 74rem);
  margin-inline: auto;
  padding-block: clamp(4rem, 12vw, 7rem);
}

.home-hero__eyebrow {
  max-width: 42rem;
  margin: 0 0 1rem;
  color: #f2d885;
  font-size: clamp(0.75rem, 2vw, 0.95rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.home-hero h1 {
  max-width: 48rem;
  margin: 0;
  font-size: clamp(2rem, 7vw, 4.6rem);
  line-height: 1.04;
  text-wrap: balance;
}

.home-hero__actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cta-button--solid,
.cta-button--outline {
  min-height: 3rem;
  padding: 0.75rem 1.25rem;
  border-radius: 0.25rem;
  font-weight: 800;
}

.cta-button--solid {
  color: var(--color-white);
  background: var(--color-red);
  border: 1px solid var(--color-red);
}

.cta-button--outline {
  color: var(--color-white);
  background: rgb(0 0 0 / 16%);
  border: 1px solid rgb(255 255 255 / 76%);
  backdrop-filter: blur(4px);
}

.home-about {
  background: var(--color-white);
}

.home-split {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.home-copy h2,
.home-section-heading h2,
.home-quote h2,
.advisory-intro h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.8rem, 5vw, 3.35rem);
  line-height: 1.1;
  text-wrap: balance;
}

.home-copy p:not(.section-kicker) {
  max-width: 43rem;
  margin: 0 0 1rem;
  color: #3f403f;
}

.home-media-card {
  margin: 0;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 1.3rem 3.5rem rgb(49 46 35 / 14%);
}

.home-media-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.home-services-overview {
  background: #eeece5;
}

.home-section-heading {
  max-width: 49rem;
  margin-bottom: clamp(2rem, 6vw, 3.5rem);
}

.home-section-heading > p:last-child {
  color: #51524f;
}

.home-section-heading--center {
  margin-inline: auto;
  text-align: center;
}

.home-service-portals {
  display: grid;
  gap: 1.25rem;
}

.home-service-portal {
  display: grid;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 1rem;
}

.home-service-portal > img {
  width: 100%;
  height: 100%;
  min-height: 15rem;
  object-fit: cover;
}

.home-service-portal > div {
  padding: clamp(1.5rem, 5vw, 3rem);
}

.home-service-portal h3 {
  margin: 0 0 1rem;
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  line-height: 1.15;
}

.home-service-portal p:not(.section-kicker) {
  color: #4c4d49;
}

/* Movil: la foto pasa a fondo de la tarjeta con un velo oscuro encima y el
   texto en blanco. Ademas de ser lo pedido, quita de en medio un fallo real:
   el img llevaba height:100% dentro de una fila de rejilla de altura
   automatica, y esa dependencia circular la resuelve cada motor a su manera
   (Chrome daba los 240px del min-height, Safari de iOS el alto de la tarjeta
   entera, dejando el texto oscuro sobre la foto sin nada que lo separase).
   Con position:absolute el porcentaje se mide contra el ancestro posicionado,
   que ya tiene alto definido por el texto, y no hay nada que interpretar. */
@media (max-width: 47.999rem) {
  .home-service-portal {
    position: relative;
    isolation: isolate;
  }

  .home-service-portal > img {
    position: absolute;
    inset: 0;
    min-height: 0;
  }

  .home-service-portal::after {
    position: absolute;
    inset: 0;
    content: "";
    /* El suelo del 74% no es estetico sino de contraste: sobre el pixel mas
       claro que pueda tener la foto, el dorado del rotulo queda en 5.07:1 y
       el blanco en 9.9:1. Con un 62% el dorado caia a 3.04:1. */
    background: linear-gradient(
      to bottom,
      rgb(0 0 0 / 60%) 0%,
      rgb(0 0 0 / 70%) 55%,
      rgb(0 0 0 / 80%) 100%
    );
  }

  /* z-index sobre el velo, que como ::after se pinta despues de los hijos. */
  .home-service-portal > div {
    position: relative;
    z-index: 1;
    min-height: 20rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .home-service-portal h3,
  .home-service-portal p:not(.section-kicker),
  /* El rotulo va en blanco y no en dorado: en la primera tarjeta cae sobre una
     ventana casi blanca de la foto (rgb 252,254,254) y ahi arriba el velo es
     del 62%, con lo que el dorado se queda en 3.19:1. En blanco sube a 6.33:1.
     El CTA si va dorado: esta abajo, donde el velo llega al 78%, y da 6.83:1.
     Rojo de marca descartado en ambos: sobre el velo no pasa de 3.25:1. */
  .home-service-portal .section-kicker {
    color: var(--color-white);
  }

  .home-service-portal .text-cta {
    color: var(--color-gold);
  }
}

.text-cta {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-red);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.home-quote {
  color: var(--color-white);
  background: var(--color-ink);
}

.home-quote .section-kicker {
  color: #e9cc72;
}

.home-quote blockquote {
  margin: clamp(2rem, 6vw, 4rem) 0 0;
  padding-left: clamp(1rem, 4vw, 2rem);
  border-left: 0.28rem solid var(--color-red);
}

.home-quote blockquote p {
  max-width: 62rem;
  margin: 0;
  font-size: clamp(1.2rem, 3vw, 2rem);
  line-height: 1.45;
}

.home-testimonials {
  padding-block: clamp(3rem, 8vw, 5rem);
  background: var(--color-page);
}

.home-testimonials__slider {
  margin-top: clamp(2rem, 5vw, 3rem);
}

.home-testimonials__viewport {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.home-testimonials__viewport::-webkit-scrollbar {
  display: none;
}

.home-testimonials__viewport > * {
  scroll-snap-align: start;
}

.testimonial-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.testimonial-nav__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  cursor: pointer;
}

.testimonial-nav__button:hover {
  border-color: var(--color-gold);
}

.testimonial-nav__button svg {
  width: 1rem;
  height: 1rem;
}

.testimonial-nav__dots {
  display: flex;
  gap: 0.5rem;
}

.testimonial-nav__dot {
  width: 0.6rem;
  height: 0.6rem;
  padding: 0;
  background: #cfcbbd;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.testimonial-nav__dot[aria-current="true"] {
  background: var(--color-red);
}

/* Objetivo tactil de 44px sin engordar el punto visible. */
.testimonial-nav__dot::before {
  content: "";
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  margin: -1.075rem;
}

@media (min-width: 48rem) {
  .home-testimonials__viewport {
    grid-auto-columns: calc(50% - 0.625rem);
  }
}

.home-testimonial {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  margin: 0;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 1rem;
}

.home-testimonial__logo {
  /* align-self: la tarjeta es flex en columna, asi que el stretch por defecto
     estiraba el logo a todo el ancho y anulaba el width:auto. */
  align-self: start;
  width: auto;
  height: 2.75rem;
  margin-bottom: 0.25rem;
  object-fit: contain;
}

/* Las tarjetas sin logo reservan su hueco para que todas las citas arranquen
   a la misma altura dentro de la fila. */
.home-testimonial:not(:has(.home-testimonial__logo))::before {
  content: "";
  height: 2.75rem;
  margin-bottom: 0.25rem;
}

.home-testimonial blockquote {
  margin: 0;
  padding-left: 1rem;
  border-left: 0.2rem solid var(--color-gold);
}

.home-testimonial blockquote p {
  margin: 0;
  color: #3f403f;
}

/* margin-top auto: las firmas quedan a ras de la parte inferior aunque una
   cita sea bastante mas larga que la otra. */
.home-testimonial figcaption {
  margin-top: auto;
  display: grid;
  gap: 0.15rem;
}

.home-testimonial__name {
  font-weight: 800;
}

.home-testimonial__role {
  color: #5d5e58;
  font-size: 0.92rem;
}

/* Cinta de logos: la pista lleva cuatro copias identicas del listado y la
   animacion desplaza exactamente una (25%), asi el bucle no tiene costura. */
.home-logos {
  padding-block: clamp(2.5rem, 7vw, 4.5rem);
  background: var(--color-white);
}

.home-logos__group + .home-logos__group {
  margin-top: clamp(2.25rem, 6vw, 3.5rem);
}

.home-logos__title {
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  color: #3f403f;
  font-size: clamp(0.98rem, 2.2vw, 1.12rem);
  font-weight: 800;
  text-align: center;
}

.logo-marquee {
  /* Difuminado en los extremos para que los logos entren y salgan sin cortarse en seco. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
}

.logo-marquee__track {
  width: max-content;
  display: flex;
  align-items: center;
  gap: clamp(1.75rem, 4.5vw, 3.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
  animation: logo-marquee-scroll 48s linear infinite;
}

.logo-marquee--customers .logo-marquee__track {
  animation-duration: 34s;
}

.logo-marquee:hover .logo-marquee__track,
.logo-marquee:focus-within .logo-marquee__track {
  animation-play-state: paused;
}

@keyframes logo-marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-100% / var(--copias, 4)));
  }
}

.logo-marquee {
  /* Los archivos traen margen propio, asi que object-fit encaja el margen
     tambien: la caja necesita ser generosa para que la marca se lea. */
  --logo-ancho: clamp(9rem, 17vw, 13rem);
  --logo-alto: clamp(4.25rem, 9vw, 6rem);
  overflow: hidden;
}

/* Clientes son solo tres: en una cinta que se mueve tendrian que repetirse
   para cubrir el ancho, asi que esta fila va fija y centrada. */
.logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 6vw, 4.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.logo-row li {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(9rem, 17vw, 13rem);
  height: clamp(4.25rem, 9vw, 6rem);
  overflow: hidden;
}

.logo-row img {
  width: clamp(9rem, 17vw, 13rem);
  height: clamp(4.25rem, 9vw, 6rem);
  object-fit: contain;
}

.logo-row .logo-marquee__item--padded img {
  transform: scale(2.3);
}

.logo-marquee__track li {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--logo-ancho);
  height: var(--logo-alto);
  overflow: hidden;
}

/* Medida fija y no un porcentaje: la li es un grid sin filas declaradas, asi
   que la fila se auto-dimensiona al contenido y un height:100% resolvia
   contra esa fila en vez de contra la caja. Los logos se pintaban a 112px
   dentro de 72 y se salian por arriba y por abajo. */
.logo-marquee__track img {
  width: var(--logo-ancho);
  height: var(--logo-alto);
  object-fit: contain;
}

/* Los archivos no traen el mismo encuadre, asi que hace falta compensar a ojo
   para que todos pesen visualmente lo mismo. i-80 viene recortado al ras;
   canada-logo es un cuadrado 500x500 donde el escudo ocupa una franja
   estrecha del centro, y sin ampliarlo se veria a un tercio de sus vecinos.
   Lo que se sale del recuadro es margen blanco, asi que recortarlo no pierde
   nada. */
.logo-marquee__item--tight img {
  transform: scale(0.8);
}

.logo-marquee__item--padded img {
  transform: scale(2.3);
}

/* Sin animacion se ocultan las copias y queda una sola fila, centrada y
   envolviendo, en vez de cuatro repeticiones que habria que arrastrar. */
@media (prefers-reduced-motion: reduce) {
  .logo-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .logo-marquee__track {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 1.5rem;
    animation: none;
  }

  .logo-marquee__track li[aria-hidden="true"] {
    display: none;
  }
}

.home-consultation,
.advisory-consultation {
  padding-block: clamp(3.5rem, 9vw, 6rem);
  background: var(--color-white);
}

.advisory-intro {
  padding-block: clamp(3rem, 8vw, 6rem);
  background: var(--color-white);
}

.advisory-intro .home-shell {
  max-width: 74rem;
}

.advisory-intro__lead {
  max-width: 58rem;
  margin: 0;
  color: #464740;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
}

.advisory-services {
  padding-block: clamp(2rem, 6vw, 5rem) clamp(4rem, 10vw, 7rem);
  background: #eeece5;
}

.advisory-services__grid {
  display: grid;
  gap: 1.25rem;
}

.advisory-card {
  min-width: 0;
  display: grid;
  /* auto 1fr, no dos filas automaticas: al estirarse la tarjeta hasta la altura
     de su vecina el sobrante se repartia entre las dos filas, la foto crecia y
     bajaba el bloque de texto. Asi el sobrante lo absorbe solo el texto y todas
     las fotos miden igual. */
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: var(--color-ink);
  border-radius: 0.75rem;
  box-shadow: 0 1rem 2.5rem rgb(74 49 34 / 9%);
}

/* Alternancia negro / rojo siguiendo el orden de lectura. Con la rejilla de
   dos columnas eso deja la izquierda oscura y la derecha roja; la quinta
   tarjeta, que ocupa el ancho completo, vuelve a oscuro. */
.advisory-card:nth-child(even) {
  background: var(--color-red);
}

.advisory-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.advisory-card__copy {
  padding: clamp(1.4rem, 4vw, 2.4rem);
  color: var(--color-white);
}

.advisory-card h2 {
  margin: 0 0 0.85rem;
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  line-height: 1.18;
}

.advisory-card p {
  margin: 0;
  color: rgb(255 255 255 / 94%);
}

@media (min-width: 48rem) {
  .home-shell,
  .home-hero__content {
    width: min(100% - 4rem, 74rem);
  }

  .home-split {
    grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.92fr);
    gap: clamp(2.5rem, 6vw, 5rem);
  }

  .home-service-portal {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .home-service-portal--reverse > img {
    order: 2;
  }

  .advisory-services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Un titulo de una linea y otro de dos dejaban los parrafos a distinta
     altura en la rejilla de dos columnas: se reserva el alto de dos lineas. */
  .advisory-card:not(.advisory-card--wide) h2 {
    min-height: 2.36em;
  }

  .advisory-card--wide {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
  }

  .advisory-card--wide img {
    height: 100%;
    aspect-ratio: auto;
  }

  .advisory-card--wide .advisory-card__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media (min-width: 70rem) {
  .home-hero__content {
    padding-left: 1rem;
  }

  .home-service-portals,
}