/* ============================================================
   Hero-c component: contacto's "two doors" hero.

   .puerta__title/.puerta__lead font-sizes are literal clamp()s, not
   var(--fz-hero)/var(--fz-lead) — contacto.css has its own :root with
   different clamp bounds than base.css's shared tokens (--fz-lead in
   particular is already used by several other components at different
   bounds), so reusing those names here would silently resize things
   wrong instead of colliding outright. Same trap as empresa's
   --fz-h1/--fz-h2, different page.
   ============================================================ */

.hero-c {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--black);
  position: relative;
}
.puerta {
  position: relative;
  padding: 8.75rem var(--pad-x) 5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  min-height: 100svh;
  cursor: pointer;
  transition: background 0.5s var(--ease), opacity 0.6s var(--ease);
  overflow: hidden;
  border: 0;
  text-align: left;
}
/* Hover feedback: soft zoom on the content, dim the opposite door. */
.puerta__top,
.puerta__bottom {
  transition: transform 0.7s var(--ease);
  transform-origin: left center;
  will-change: transform;
}
.puerta:hover .puerta__top {
  transform: scale(1.025);
}
.puerta:hover .puerta__bottom {
  transform: translateY(-0.375rem);
}
.hero-c:hover .puerta:not(:hover) {
  opacity: 0.45;
}
.puerta--azul {
  background: var(--blue);
  color: var(--green);
}
.puerta--negro {
  background: var(--black);
  color: var(--green);
}
.puerta::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}
.puerta:last-child::after {
  display: none;
}

.puerta__top {
  position: relative;
  z-index: 1;
}
.puerta__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.85;
  margin-bottom: 1.25rem;
}
.puerta__title {
  display: block;
  font-size: clamp(2.75rem, 7.6vw, 7.75rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin-top: 6vh;
  /* Keep words from breaking mid-word: shrink first if it needs to. */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
.puerta__lead {
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  line-height: 1.4;
  max-width: 28ch;
  margin-top: 1.75rem;
  opacity: 0.95;
  font-weight: 400;
}
.puerta__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 3.75rem;
}
.puerta__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 1.0625rem;
  font-weight: 700;
  padding: 1.125rem 1.75rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: currentColor;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
  cursor: pointer;
}
.puerta__cta .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.625rem;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: currentColor;
  color: inherit;
  transition: transform 0.3s var(--ease);
}
.puerta__cta .arrow svg {
  width: 0.75rem;
  height: 0.75rem;
  display: block;
}
.puerta__cta .arrow svg path {
  stroke: var(--blue);
}
.puerta--negro .puerta__cta .arrow svg path {
  stroke: var(--black);
}
.puerta__cta:hover {
  background: currentColor;
  transform: translateY(-0.125rem);
}
.puerta__cta:hover .arrow {
  transform: translateY(0.25rem) rotate(135deg);
}
.puerta--azul .puerta__cta:hover .arrow {
  background: var(--blue);
}
.puerta--azul .puerta__cta:hover .arrow svg path {
  stroke: var(--green);
}
.puerta--negro .puerta__cta:hover .arrow {
  background: var(--black);
}
.puerta--negro .puerta__cta:hover .arrow svg path {
  stroke: var(--green);
}
.puerta__cta:hover span {
  color: var(--blue);
}
.puerta--negro .puerta__cta:hover span {
  color: var(--black);
}

.puerta__meta {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.55;
  text-align: right;
  line-height: 1.8;
}

@media (max-width: 900px) {
  .hero-c {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .puerta {
    min-height: 80vh;
    padding: 7.5rem var(--pad-x) 3.75rem;
  }
  .puerta::after {
    display: none;
  }
  .puerta:first-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
}

@media (max-width: 820px) {
  .puerta__bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    margin-top: 44px;
  }
  .puerta__cta {
    justify-content: space-between;
    width: 100%;
  }
  .puerta__meta {
    text-align: left;
  }
}