/* =========================================================
   T-Control · Nosotros
   The institutional description, then Misión, Visión and Valores as three
   panels in the process language: the open one widens and turns black,
   its name (written vertically while it is folded) fades, and its text
   arrives once it has opened; the values come in one by one.
   Texts: "Nosotros" of the inventory.
========================================================= */

.tc-about {
  --tc-open-ease: cubic-bezier(.65, 0, .35, 1);
  --tc-open-time: .9s;
  padding: clamp(96px, 10vw, 150px) clamp(20px, 4vw, 64px);
  border-bottom: 1px solid var(--tc-line);
  background: var(--tc-soft);
}

.tc-about__inner { max-width: 1680px; margin: 0 auto; }

.tc-about__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(28px, 6vw, 110px);
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.tc-about__intro .tc-head { margin: 0; }

.tc-about__lead { margin: 0; color: var(--tc-graphite); font-size: clamp(1.2rem, 1.8vw, 1.65rem); line-height: 1.45; }

/* ---------- panels ---------- */

.tc-about__panels { display: flex; gap: 10px; height: clamp(360px, 32vw, 440px); }

.tc-about__panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--tc-black);
  color: var(--tc-white);
  cursor: pointer;
  transition: flex-grow var(--tc-open-time) var(--tc-open-ease);
}
.tc-about__panel.is-active { flex-grow: 2.6; cursor: default; }

/* a reference photo per panel: grey and dark while folded, back to colour
   when it opens (as the process cards) */
.tc-about__panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(.42);
  scale: 1.08;
  transition: scale 1.4s var(--tc-ease), filter var(--tc-open-time) var(--tc-open-ease);
}
.tc-about__panel:hover:not(.is-active) img { filter: grayscale(1) brightness(.55); }
.tc-about__panel.is-active img { filter: grayscale(0) brightness(.8); scale: 1; }

.tc-about__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tc-black) 22%, transparent),
    transparent 35%,
    color-mix(in srgb, var(--tc-black) 88%, transparent));
}

/* folded: the name, big and vertical */
.tc-about__label {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  rotate: 180deg;
  writing-mode: vertical-rl;
  color: var(--tc-white);
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 5.2rem);
  line-height: 1;
  letter-spacing: .04em;
  transition: opacity .5s ease .35s, filter .5s ease .35s, color .4s ease;
}
.tc-about__panel.is-active .tc-about__label { opacity: 0; filter: blur(6px); transition: opacity .3s ease, filter .3s ease; }

.tc-about__body {
  position: absolute;
  right: clamp(24px, 3vw, 44px);
  bottom: clamp(24px, 3vw, 40px);
  left: clamp(24px, 3vw, 44px);
  opacity: 0;
  translate: 0 18px;
  filter: blur(4px);
  transition: opacity .3s ease, translate .3s ease, filter .3s ease;
}
.tc-about__panel.is-active .tc-about__body {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
  transition: opacity .7s var(--tc-ease) .45s, translate .7s var(--tc-ease) .45s, filter .7s var(--tc-ease) .45s;
}

.tc-about__body h3 { color: inherit; font-size: clamp(2.6rem, 3.6vw, 3.8rem); line-height: .9; }
.tc-about__body p { max-width: 560px; margin: 16px 0 0; color: color-mix(in srgb, var(--tc-white) 82%, transparent); font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.55; }

.tc-about__body ul { display: flex; flex-wrap: wrap; gap: 8px; max-width: 620px; margin: 18px 0 0; padding: 0; list-style: none; }
.tc-about__body li {
  padding: 9px 16px;
  border: 1px solid color-mix(in srgb, var(--tc-white) 22%, transparent);
  border-radius: 999px;
  color: var(--tc-white);
  font-size: .9rem;
  opacity: 0;
  translate: 0 10px;
  transition: opacity .3s ease, translate .3s ease;
}
.tc-about__panel.is-active .tc-about__body li {
  opacity: 1;
  translate: 0 0;
  transition: opacity .6s var(--tc-ease), translate .6s var(--tc-ease);
  transition-delay: calc(.6s + var(--i) * 80ms);
}

.tc-about__panel:focus-visible { outline: 3px solid var(--tc-black); outline-offset: 3px; }

@media (max-width: 1023.98px) {
  .tc-about__intro { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .tc-about__panel.is-active { flex-grow: 3.4; }
  .tc-about__label { font-size: 2.6rem; }
}

/* phone: stacked, all open */
@media (max-width: 760px) {
  .tc-about__panels { display: grid; height: auto; }
  .tc-about__panel { min-height: 340px; cursor: default; }
  .tc-about__panel img { scale: 1; filter: grayscale(0) brightness(.7); }
  .tc-about__label { display: none; }
  .tc-about__body { position: absolute; inset: auto 22px 24px 22px; opacity: 1; translate: none; filter: none; }
  .tc-about__body li { opacity: 1; translate: none; }

  /* scroll-driven (scripts/mobile-focus.js) */
  .tc-about__panel img { transition: scale 1.2s var(--tc-ease), filter .9s var(--tc-open-ease); }
  .tc-mfocus .tc-about__panel:not(.is-focus) img { scale: 1.06; filter: grayscale(1) brightness(.4); }
  .tc-about__body p, .tc-about__body li { transition: opacity .6s var(--tc-ease), translate .6s var(--tc-ease); }
  .tc-mfocus .tc-about__panel:not(.is-focus) .tc-about__body p,
  .tc-mfocus .tc-about__panel:not(.is-focus) .tc-about__body li { opacity: 0; translate: 0 12px; }
  .tc-mfocus .tc-about__panel.is-focus .tc-about__body li { transition-delay: calc(.2s + var(--i) * 70ms); }
}

@media (prefers-reduced-motion: reduce) {
  .tc-about *, .tc-about__panel { transition: none !important; }
}