/* ==========================================================================
   empresa.html — page-only styles
   Everything here composes f1.css components; unlayered rules win over @layer f1.*.
   ========================================================================== */

/* ---------- 1 · page hero ---------- */
.empresa-hero .page-hero__media img { object-position: 62% 32%; }
/* copy left, shared .hero-card (hidden ≤991 by f1.css) right */
.empresa-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  align-items: end;
  column-gap: var(--sp-xl);
}
.empresa-hero .page-hero__content { max-width: 56rem; }
/* the address line sits between the card head and its data rows: give it the same hairline as the head */
.empresa-hero__card .h5 { padding-bottom: .75rem; border-bottom: 1px solid color-mix(in srgb, #fff 16%, transparent); }
@media (max-width: 991px) {
  .empresa-hero__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 2 · quiénes somos ---------- */
.empresa-about__grid { --split: 1fr 1.08fr; --split-gap: var(--sp-3xl); }
.empresa-about__lead { max-width: 40ch; }
.empresa-about__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-m);
  width: 100%;
  padding-top: var(--sp-m);
  border-top: 1px solid var(--line);
  color: var(--fg-muted);
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: .015em;
}
.empresa-about__cols p { margin: 0; }
.empresa-about__media { margin: var(--sp-m); }
.empresa-about__chip { text-align: left; }
@media (max-width: 1280px) {
  .empresa-about__grid { --split-gap: var(--sp-2xl); }
  .empresa-about__cols { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}
@media (max-width: 991px) {
  .empresa-about__grid { row-gap: var(--sp-xl); }
  .empresa-about__media { max-width: 44rem; }
}
@media (max-width: 767px) {
  .empresa-about__cols { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .empresa-about__media { margin: .75rem .75rem 0; }
}

/* ---------- 3 · stats band ---------- */
.empresa-stats .stats { border-top: 0; }
.empresa-stats .stat {
  --stat-size: clamp(3.25rem, 1.4rem + 4.4vw, 6rem);
  gap: .875rem;
  padding-block: .75rem;
}
.empresa-stats .stat > .icon { margin-bottom: .5rem; }
.empresa-stats .stat__label { font-size: .8125rem; }
@media (max-width: 767px) {
  .empresa-stats .stat { padding-block: 1.5rem; }
  .empresa-stats .stat:nth-child(-n+2) { padding-top: .25rem; }
  .empresa-stats .stat:nth-child(n+3) { padding-bottom: .25rem; }
}
@media (max-width: 479px) {
  .empresa-stats .stat { --stat-size: clamp(2.5rem, 1rem + 7.5vw, 3.25rem); }
  .empresa-stats .stat__label { font-size: .6875rem; }
}

/* ---------- 4 · ¿por qué elegirnos? ---------- */
.empresa-why__intro { --split: 1.45fr 1fr; }
.empresa-why__intro .section-head .lead { max-width: 52ch; }
.empresa-why__intro .section-head .lead + .lead { margin-top: 0; }
.empresa-why__checks { padding-bottom: .25rem; }
.empresa-why__checks > li { padding-block: 1.125rem; border-color: var(--line-strong); }
.empresa-why__cards { margin-top: var(--sp-2xl); }
.empresa-why__cards .card__text { max-width: 40ch; }
@media (max-width: 991px) {
  .empresa-why__intro { row-gap: var(--sp-xl); }
}
/* card head wrapper (icon + index + title) is transparent to the card's flex layout except on tablet */
.empresa-why__card-head { display: contents; }
/* tablet: one card per row, laid out horizontally (title | text) instead of a lopsided 2 + 1 grid */
@media (max-width: 991px) and (min-width: 600px) {
  .empresa-why__cards { grid-template-columns: minmax(0, 1fr); --grid-gap: 1rem; }
  .empresa-why__cards .card {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--sp-l);
    row-gap: 1rem;
    align-items: start;
    --card-pad: 2rem;
  }
  .empresa-why__card-head { display: grid; gap: 1rem; grid-column: 1; grid-row: 1 / span 2; }
  .empresa-why__cards .card__top { margin-bottom: 0; }
  .empresa-why__cards .card__text { grid-column: 2; grid-row: 1; max-width: none; }
  .empresa-why__cards .card__footer { grid-column: 2; grid-row: 2; margin-top: 0; padding-top: 0; }
}
@media (max-width: 767px) and (min-width: 600px) {
  .empresa-why__cards .card { --card-pad: 1.5rem; }
}

/* ---------- 5 · ¿cómo trabajamos? ---------- */
.empresa-how__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-areas:
    "media head"
    "media steps"
    "media cta";
  grid-template-rows: auto auto 1fr;
  column-gap: var(--sp-3xl);
  row-gap: var(--sp-xl);
}
.empresa-how__head { grid-area: head; }
.empresa-how__media {
  grid-area: media;
  align-self: start;
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
  padding: .75rem;
}
.empresa-how__steps { grid-area: steps; }
.empresa-how__cta { grid-area: cta; align-self: start; }
.empresa-how__steps .timeline__item { padding-bottom: 3rem; }
.empresa-how__steps .timeline__item:last-child { padding-bottom: 0; }
@media (max-width: 991px) {
  .empresa-how__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "media" "steps" "cta";
    grid-template-rows: none;
  }
  .empresa-how__media { position: static; max-width: 34rem; }
}

/* ---------- 6 · TransGo (blueprint) ---------- */
.empresa-transgo { padding-block: calc(var(--section) * 1.2); }
.empresa-transgo__frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.empresa-transgo__plate-wrap {
  position: relative;
  z-index: 1;
  padding: var(--sp-l) var(--sp-l) var(--sp-l) 0;
}
/* centre divider of the technical drawing, running off to the section edges */
.empresa-transgo__plate-wrap::before {
  content: "";
  position: absolute;
  top: -100vh;
  bottom: -100vh;
  right: 0;
  width: 1px;
  background: var(--line-strong);
  opacity: .35;
  pointer-events: none;
}
.empresa-transgo__plate {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 20rem;
  padding: var(--sp-2xl) var(--sp-m);
  color: #fff;
  background: #000;
}
.empresa-transgo__plate::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 59, 48, .4) 0 1.2px, transparent 1.8px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(75% 90% at 100% 0%, #000 0%, transparent 70%);
          mask-image: radial-gradient(75% 90% at 100% 0%, #000 0%, transparent 70%);
}
.empresa-transgo__logo {
  position: relative;
  width: min(92%, 36rem);
  height: auto;
}
.empresa-transgo__tag { position: absolute; z-index: 1; color: #a3a3a3; }
.empresa-transgo__tag--tl { top: 1.25rem; left: 1.25rem; }
.empresa-transgo__tag--br { right: 1.25rem; bottom: 1.25rem; color: var(--red-400); }
.empresa-transgo__body {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1.25rem;
  padding: var(--sp-l) 0 var(--sp-l) var(--sp-2xl);
}
.empresa-transgo__body .h3 { max-width: 22ch; }
.empresa-transgo__body .rule-title { width: 100%; margin-top: var(--sp-s); }
.empresa-transgo__text {
  max-width: 48ch;
  color: var(--fg-muted);
  font-size: 1.125rem;
  line-height: 1.45;
  letter-spacing: .015em;
}
@media (max-width: 991px) {
  .empresa-transgo__frame { grid-template-columns: minmax(0, 1fr); }
  .empresa-transgo__plate-wrap { padding: var(--sp-l) 0 0; }
  .empresa-transgo__plate-wrap::before { display: none; }
  .empresa-transgo__plate { min-height: 16rem; }
  .empresa-transgo__body { padding: var(--sp-xl) var(--sp-m) var(--sp-l); }
}
@media (max-width: 767px) {
  .empresa-transgo__plate { min-height: 13rem; padding: 3.5rem 1.5rem; }
  .empresa-transgo__tag--tl { top: 1rem; left: 1rem; }
  .empresa-transgo__tag--br { right: 1rem; bottom: 1rem; }
}