/* ============================================
   ÍCARO RB — NOSOTROS
   ============================================ */

/* Shared photographic background: Hero (mountains) + Quote/Tabs/Panel
   (fjord) are one continuous source photo, split into two crops that
   sit back to back with no visual seam — same pattern as Home. */

/* ---------- Hero (mountains + timeline) ---------- */
.nh-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 2846 / 2900;
  min-height: 640px;
  background-image: url('../img/nosotros-hero.jpg');
  background-size: cover;
  background-position: center top;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.nh-hero__title {
  position: relative;
  z-index: 2;
  padding-top: calc(var(--header-height) + 6vw);
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  /* Centrado real. Antes cada linea llevaba su propio margin-left en vw
     (25.5vw y 9.1vw), heredado del maquetado estatico: a 1440px eso dejaba
     una linea 189px a la derecha del centro y la otra 79px, asi que ni
     coincidian entre si ni con la pagina — y el desfase crecia o encogia
     con el ancho, porque el margen escalaba en vw y el texto en clamp().
     Ahora se centra como el titular de coberturas. */
  text-align: center;
}
.nh-hero__title .line {
  display: block;
  font-size: clamp(28px, 4vw, 50px);
  font-weight: var(--fw-bold);
  line-height: 1.14;
  color: var(--color-white);
}
.nh-hero__title .line--accent { color: var(--color-orange); }

.nh-timeline { position: absolute; inset: 0; z-index: 2; }
.nh-milestone {
  position: absolute;
  left: var(--x);
  top: var(--label-y);
  /* --w es la distancia hasta el hito siguiente menos un canal de respiro; lo
     pone la plantilla hito por hito. Sin el, el 4 y el 5 se pisaban (medido a
     1440px: 91x53 px de solape real de texto). Se usa como `width` y no dentro
     de un min() de max-width porque el navegador descartaba ese tercer
     argumento y la regla no hacia nada.
     El max-width es la red de seguridad: arranca en --x, asi que lo que le
     queda hasta el borde derecho es 100% - --x. */
  width: var(--w, 20vw);
  max-width: min(300px, calc(100% - var(--x) - 24px));
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .9s var(--ease-smooth), transform .9s var(--ease-smooth);
  transition-delay: var(--delay, 0s);
}
.nh-milestone.is-visible { opacity: 1; transform: translateX(0); }
.nh-milestone__year {
  font-size: clamp(26px, 3.2vw, 46px);
  font-weight: var(--fw-bold);
  color: var(--color-orange);
  line-height: 1;
  margin-bottom: 10px;
}
.nh-milestone__text {
  font-size: clamp(12px, 1.15vw, 16px);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: var(--color-white);
  max-width: 260px;
}
/* Connector + dot are positioned independently (not nested) so their
   top offset can be expressed as a simple % of the hero box, matching
   the exact PDF-measured dot position regardless of label text length.
   The line "grows" downward (scaleY from a top origin) in sync with its
   dot and label, instead of just fading in, for a more deliberate reveal. */
.nh-connector-line {
  position: absolute;
  left: var(--x);
  top: var(--line-top);
  width: 1px;
  height: var(--line-h);
  background: rgba(255, 255, 255, .55);
  transform-origin: top;
  transform: translateX(6px) scaleY(0);
  opacity: 0;
  transition: opacity .6s var(--ease-smooth), transform 1.1s var(--ease-smooth);
  transition-delay: var(--delay, 0s);
}
.nh-connector-line.is-visible { opacity: 1; transform: translateX(6px) scaleY(1); }
.nh-dot {
  position: absolute;
  left: var(--x);
  top: var(--dot-y);
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .15);
  transform: translate(0, -50%) scale(0);
  transition: transform .5s var(--ease-soft);
  transition-delay: calc(var(--delay, 0s) + 1s);
}
.nh-dot.is-visible { transform: translate(0, -50%) scale(1); }

/* ---------- Mid block: Quote + Tabs + Mission panel ---------- */
/* El borde de esta foto chocaba contra el de .nh-hero. No se arregla con un
   degradado a color plano: entre dos FOTOS, un tono liso solo cambia la línea
   por una banda neblinosa. Se hace un fundido cruzado de verdad — la imagen
   del mar sube 80px sobre la de la montaña y entra con máscara de opacidad. */
.nh-mid {
  margin-top: -80px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 80px);
          mask-image: linear-gradient(180deg, transparent 0, #000 80px);
  /* Sin `no-repeat` la mascara se repite (es el valor por defecto) y lo que
     sobresalga de la caja cae en la franja transparente del siguiente mosaico:
     desaparece sin dejar rastro. */
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  position: relative;
  width: 100%;
  /* La caja CRECE con su contenido. Antes la altura la fijaba la proporcion de
     la foto y en movil el panel de VALORES —bastante mas alto que el de
     MISION— se salia 510px (medido a 375px): el texto se cortaba a media frase
     y el boton CONTACTANOS no llegaba a verse nunca. El minimo reproduce la
     misma altura de antes cuando el contenido cabe, asi que en escritorio no
     cambia nada. */
  min-height: max(900px, calc(100vw * 3404 / 2768));
  background-image: url('../img/nosotros-mid.jpg');
  background-size: cover;
  background-position: center top;
  background-color: #0A1B3D;
}

.nh-quote {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 9.9vw var(--container-pad) 0;
}
.nh-quote p {
  max-width: 1100px;
  margin: 0 auto;
  font-size: clamp(16px, 1.7vw, 22px);
  font-weight: var(--fw-regular);
  line-height: 1.55;
  color: var(--color-white);
}

.nh-tabs {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: var(--container-max);
  margin: 11.5vw auto 0;
  padding: 0 var(--container-pad);
}
.nh-tab {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.6vw, 34px);
  font-weight: var(--fw-bold);
  letter-spacing: .01em;
  color: var(--color-white);
  padding: 0 0 14px;
  position: relative;
  transition: color var(--dur-fast);
}
.nh-tab::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--color-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-soft);
}
.nh-tab.is-active { color: var(--color-orange); }
.nh-tab.is-active::after { transform: scaleX(1); }
.nh-tab--vision { align-self: flex-start; margin-top: -5.1vw; }
.nh-tab:hover { color: var(--color-orange); }

.nh-panel-wrap { position: relative; z-index: 2; padding: 30.7vw var(--container-pad) 0; }
.nh-panel {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: var(--radius-lg);
  background: rgba(6, 16, 38, .28);
  backdrop-filter: blur(3px);
  padding: 2.35vw 4vw 4.25vw;
  text-align: center;
  animation: nh-float 7s ease-in-out infinite;
}
@keyframes nh-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .nh-panel { animation: none; }
}
.nh-panel__content { display: none; }
.nh-panel__content.is-active {
  display: block;
  animation: nh-fade-in .5s var(--ease-smooth);
}
@keyframes nh-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.nh-panel p {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.7;
  color: var(--color-white-70, rgba(255, 255, 255, .88));
  color: rgba(255, 255, 255, .9);
  max-width: 980px;
  margin: 0 auto 26px;
}
.nh-panel p:last-child { margin-bottom: 0; }
.nh-value { margin-bottom: 26px; }
.nh-value:last-child { margin-bottom: 0; }
.nh-value__title {
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: var(--fw-bold);
  color: var(--color-orange);
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.nh-value__text {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  color: rgba(255, 255, 255, .9);
  max-width: 900px;
  margin: 0 auto;
}

.nh-panel-cta { display: flex; justify-content: center; margin-top: 5.45vw; position: relative; z-index: 2; }
.nh-panel-cta .btn { width: max-content; }

.nh-connector {
  position: relative;
  z-index: 2;
  width: 1px;
  height: clamp(60px, 10.75vw, 160px);
  background: rgba(255, 255, 255, .35);
  margin: 2.78vw auto 0;
}

/* ---------- Team intro (solid navy gradient) ---------- */
.nh-team-section {
  position: relative;
  /* Igual que en coberturas.css: el degradado subía hasta #16255A y el pie es
     #04081A. El fundido va en los últimos 110px (el propio padding inferior),
     así no toca las tarjetas del equipo. */
  background:
    linear-gradient(180deg, rgba(4, 8, 26, 0) 92%, rgba(4, 8, 26, .45) 96.5%, #04081A 100%),
    linear-gradient(180deg, #04081A 0%, #0B1638 55%, #16255A 100%);
  padding: 12.2vw 0 110px;
  overflow: hidden;
}
.nh-team-intro {
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--container-pad) 60px;
}
.nh-team-intro h2 {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  margin-bottom: 30px;
}
.nh-team-intro h2 em { font-style: normal; color: var(--color-orange); }
.nh-team-intro p {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.7;
  color: rgba(255, 255, 255, .88);
  margin-bottom: 20px;
}
.nh-team-intro p:last-child { margin-bottom: 0; }

/* ---------- Team cards: 4 featured photos, upright row, even gaps ---------- */
/* El reparto depende del ancho, y el limite lo pone la CARA TRASERA, no la foto:
   ahi entran nombre, puesto, bio, correo y telefono. La bio mas larga (Karla,
   440 caracteres en espanol, 434 en ingles) necesita 292px de tarjeta.
     >=1320px  fila de cuatro, como el diseno aprobado (tarjetas de 292px)
     861-1319  dos por dos (~400px)
     <=860     una columna (el cliente confirmo que en movil asi esta bien)
   El corte estuvo en 1200 hasta la ronda 11, y de 1200 a 1319 la tarjeta de
   Karla volteada perdia su nombre por arriba y su telefono por abajo: el
   contenido va centrado y la cara recorta lo que sobra (medido: 40px a 1200,
   6px a 1280, 0 desde 1320). La letra ya esta en el suelo de 12px, asi que lo
   que cede es el reparto.
   El reparto vive en el bloque responsive del final de esta hoja. */
.nh-team-cards {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad) 20px;
  gap: 34px;
}
.nh-team-card {
  position: relative;
  width: min(100%, 400px);
  aspect-ratio: 511 / 759;
  perspective: 1400px;
  cursor: pointer;
  transform: translateY(0);
  transition: transform var(--dur-fast) var(--ease-soft), z-index 0s;
  z-index: 1;
}
.nh-team-card:hover { transform: translateY(-10px); z-index: 5; }
.nh-team-card.is-flipped { transform: translateY(-10px); z-index: 6; }

.nh-team-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .7s var(--ease-smooth);
  transform-style: preserve-3d;
}
.nh-team-card.is-flipped .nh-team-card__inner { transform: rotateY(180deg); }

.nh-team-card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 18px 34px rgba(0, 0, 0, .35);
}
.nh-team-card__face--front {
  background: radial-gradient(120% 120% at 50% 30%, #c4c2c6 0%, #b3b0b5 55%, #99969b 100%);
}
.nh-team-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom center;
}
/* La flecha de voltear estaba, pero no se veia: el icono es un chip GRIS CLARO
   con las flechas en blanco y las fotos del equipo tienen fondo de estudio
   tambien gris claro, asi que se fundia con la tarjeta. Encima seguia a 24px,
   la medida de cuando las tarjetas iban en fila de cuatro y median 230px; a
   400px de ancho ya no se leia como un boton. Chip oscuro detras, mas tamano
   y opacidad plena. */
.nh-team-card__flip-icon {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: clamp(42px, 11vw, 50px);
  height: auto;
  padding: 7px;
  border-radius: 16px;
  background: rgba(6, 16, 38, .58);
  border: 1px solid rgba(255, 255, 255, .38);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  opacity: 1;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .38);
  transition: transform var(--dur-fast) var(--ease-soft);
}
.nh-team-card:hover .nh-team-card__flip-icon { transform: scale(1.08); }
.nh-team-card__face--back {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, #0E2054 0%, #061029 100%);
  border: 1px solid rgba(255, 255, 255, .25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 28px;
}
.nh-team-card__back-name {
  font-size: 21px;
  font-weight: var(--fw-bold);
  color: var(--color-white);
  margin-bottom: 8px;
  line-height: 1.2;
}
.nh-team-card__back-role {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--color-orange);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.nh-team-card__back-bio {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
  margin-bottom: 20px;
  /* Ya no hace falta el scroll interno: a 400px la bio entra completa. */
}
.nh-team-card__back-email {
  font-size: 13.5px;
  color: var(--color-white);
  border-top: 1px solid rgba(255, 255, 255, .25);
  padding-top: 14px;
  width: 100%;
  word-break: break-word;
}
.nh-team-card__back-phone {
  font-size: 13.5px;
  color: rgba(255, 255, 255, .85);
  margin-top: 6px;
  width: 100%;
}

/* ---------- Accordion: collaborators by area ---------- */
.nh-accordion {
  max-width: 900px;
  margin: 70px auto 0;
  padding: 0 var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.nh-accordion__item {
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .03);
  overflow: hidden;
  transition: background var(--dur-fast);
}
.nh-accordion__item.is-open { background: rgba(255, 255, 255, .06); }
.nh-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 30px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.nh-accordion__chevron {
  width: 14px;
  height: auto;
  opacity: 0;
  transform: rotate(90deg);
  transition: opacity var(--dur-fast), transform var(--dur-fast);
  flex: 0 0 auto;
}
.nh-accordion__item.is-open .nh-accordion__chevron {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(72%) sepia(45%) saturate(1000%) hue-rotate(340deg) brightness(101%);
}
.nh-accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease-smooth);
}
.nh-accordion__panel-inner {
  padding: 0 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.nh-collab__name {
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: var(--fw-semibold);
  color: var(--color-orange);
  margin-bottom: 2px;
}
.nh-collab__role {
  font-size: clamp(13px, 1vw, 15px);
  color: rgba(255, 255, 255, .75);
  margin-bottom: 4px;
}
.nh-collab__email {
  font-size: clamp(13px, 1vw, 15px);
  color: var(--color-white);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast);
}
.nh-collab__email:hover { border-color: rgba(255, 255, 255, .5); }

.nh-carousel-cta { display: flex; justify-content: center; margin-top: 56px; }


/* Reveal helpers reused from site-wide animation vocabulary */
.nh-reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-smooth), transform .9s var(--ease-smooth); }
.nh-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* El título del hero es ahora un <h1> semántico (accesibilidad §15); se neutralizan
   los estilos por defecto del elemento — la tipografía la ponen los .line. */
h1.nh-hero__title { margin: 0; font-size: inherit; font-weight: inherit; }


/* ============================================
   RESPONSIVE — vive aquí, no en responsive.css
   Esa hoja se carga antes que esta y sus reglas perderían por orden de fuente.
   ============================================ */

/* ---------- Equipo: dos por dos, y en fila de cuatro a partir de 1320 ---------- */
@media (min-width: 861px) {
  .nh-team-cards { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}
@media (min-width: 1320px) {
  .nh-team-cards { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  /* A 292px de ancho la cara trasera va justa: el cuerpo baja un punto y
     los márgenes se aprietan. Nada baja de 12px, que es el suelo legible. */
  .nh-team-card__face--back { padding: 22px 18px; }
  .nh-team-card__back-name { font-size: 18px; margin-bottom: 6px; }
  .nh-team-card__back-role { font-size: 12px; letter-spacing: .06em; margin-bottom: 12px; }
  .nh-team-card__back-bio { font-size: 12.5px; line-height: 1.5; margin-bottom: 12px; }
  .nh-team-card__back-email,
  .nh-team-card__back-phone { font-size: 12px; }
  .nh-team-card__back-email { padding-top: 10px; }
  /* Y al voltearla, la tarjeta se adelanta: el mismo texto se lee un 15% más
     grande sin tocar la retícula, que es lo que hacía ilegible la fila de
     cuatro en la versión anterior. */
  .nh-team-card.is-flipped { transform: translateY(-10px) scale(1.15); z-index: 20; }
}

@media (max-width: 1080px) {
  /* El alto lo fija el bloque de <=1180: aqui ya no se toca .nh-hero.
     Los margin-left en vw que habia aqui se eliminaron: el titular se centra. */
  .nh-hero__title .line { font-size: clamp(24px, 5.5vw, 40px); }

  .nh-tabs { flex-wrap: wrap; height: auto; gap: 20px 28px; margin-top: 14vw; padding-top: 20px; }
  .nh-tab--vision { align-self: flex-end; margin-top: 0; }

  .nh-panel-wrap { padding-top: 16vw; }
  .nh-panel { padding: 40px 28px; }

  .nh-card { width: calc(50% - 13px); }
}

/* El timeline en diagonal necesita MUCHO ancho: el ultimo hito arranca al 81%
   y mide 20vw, asi que por debajo de ~1180px se sale por la derecha y pisa al
   anterior (medido: a 900px el quinto llegaba a 909). Por debajo de ese ancho
   se replantea como lista apilada bajo el titulo — el mismo orden de revelado,
   leido de arriba a abajo en vez de izquierda a derecha. */
@media (max-width: 1180px) {
  .nh-hero {
    aspect-ratio: auto;
    min-height: 0;
    height: auto;
    /* 50px de aire + los 80px que .nh-mid sube por el fundido cruzado. Sin
       ese margen extra, en movil el ultimo hito quedaba debajo de la cita de
       la seccion siguiente. En escritorio no se notaba porque el timeline
       flota sobre una foto con espacio de sobra. */
    padding-bottom: 130px;
  }
  .nh-hero__title { padding-top: calc(var(--header-height) + 14vw); padding-bottom: 8vw; }

  .nh-timeline {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 30px var(--container-pad) 0;
  }
  .nh-milestone {
    position: static;
    width: 100%;
    max-width: 420px;
    transform: translateY(24px);
    padding-left: 20px;
    border-left: 2px solid rgba(255, 255, 255, .4);
  }
  .nh-milestone.is-visible { transform: translateY(0); }
  .nh-connector-line, .nh-dot { display: none; }
  .nh-milestone__year { font-size: clamp(22px, 6vw, 32px); }
  .nh-milestone__text { max-width: none; }
  /* Apilado, el texto cae sobre la parte iluminada de la montana y se perdia.
     La sombra lo despega del fondo sin tener que oscurecer la foto. */
  .nh-milestone__year,
  .nh-milestone__text {
    text-shadow: 0 1px 2px rgba(2, 6, 20, .9), 0 2px 14px rgba(2, 6, 20, .75);
  }

}

@media (max-width: 860px) {
  /* ---- El barco, y qué se apoya sobre él ----
     La foto se dibujaba con `cover`, así que su escala dependía del ALTO de la
     sección… que a su vez depende del contenido. Bajar la cita empujó todo lo
     demás y los títulos MISIÓN / VISIÓN / VALORES y el panel acabaron encima
     del barco. Y como el alto cambia al elegir otra pestaña (VALORES es mucho
     más largo que MISIÓN), el barco se movía con cada clic: colocar el texto
     "esquivándolo" era imposible mientras la foto escalara con la caja.
     Ahora la foto tiene un alto FIJO de 1200px, así que el barco ocupa siempre
     la franja 384-600 (está entre el 32% y el 50% de la imagen, medido), y el
     contenido se reparte alrededor: la cita arriba, los títulos justo antes de
     la proa y el panel por debajo de la popa. Lo que sobresalga de esos 1200px
     cae sobre el color de fondo, con la foto fundida a ese mismo color en su
     último tramo para que no se vea el borde. */
  .nh-mid {
    background-image:
      linear-gradient(180deg,
        rgba(10, 27, 61, 0) 76%, rgba(10, 27, 61, .85) 94%, #0A1B3D 100%),
      url('../img/nosotros-mid.jpg');
    background-size: 100% 1200px, auto 1200px;
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top;
  }
  /* La cita arranca pasado el fundido de 80px (antes caía dentro y salía
     semitransparente sobre la roca). El alto mínimo la hace previsible: sin él,
     una línea de más o de menos según el ancho movería todo lo que sigue. */
  .nh-quote { padding-top: 150px; min-height: 290px; }
  .nh-tabs { margin-top: 30px; padding-top: 0; }
  .nh-panel-wrap { padding-top: 255px; }

  .nh-team-cards { gap: 28px; }
  .nh-accordion__trigger { padding: 18px 22px; }
  .nh-accordion__panel-inner { padding: 0 22px 22px; }
}

@media (max-width: 640px) {
  .nh-quote p { font-size: 15px; }
  .nh-tab { font-size: 18px; }

  .nh-team-intro h2 { font-size: 24px; }

  .nh-team-cards { gap: 24px; }
  .nh-team-card__face--back { padding: 24px 20px; }
}

/* Por debajo de 420px la tarjeta baja de 340px de ancho y la bio mas larga
   (la de Karla) se salia 37px de su propia cara. Se aprieta lo justo. */
@media (max-width: 420px) {
  .nh-team-card__face--back { padding: 20px 16px; }
  .nh-team-card__back-name { font-size: 19px; }
  .nh-team-card__back-role { font-size: 12px; margin-bottom: 14px; }
  .nh-team-card__back-bio { font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
  .nh-team-card__back-email,
  .nh-team-card__back-phone { font-size: 12.5px; }
  .nh-team-card__back-email { padding-top: 11px; }
}

/* A 320px la tarjeta baja de 280px y ni encogiendo el texto entra la bio mas
   larga. Antes que cortarla o meterle scroll, se alarga la tarjeta: la foto
   solo recorta un poco mas (object-fit: cover). */
@media (max-width: 359px) {
  .nh-team-card { aspect-ratio: 1 / 1.75; }

  /* A 320px la cita crecía a ocho líneas y las tres pestañas no cabían en un
     renglón (VALORES saltaba al siguiente): entre las dos cosas, los títulos
     acababan sobre el barco otra vez. Medido: la caja de las pestañas pasaba
     de 36 a 92px de alto. */
  .nh-quote { padding-top: 130px; }
  .nh-quote p { font-size: 14px; }
  .nh-tab { font-size: 15px; }
}