/* Portada Flex 360: dos bloques. Con mouse, el bloque que se apunta se agranda,
   se levanta y su foto pasa a un loop de video. En pantallas táctiles no hay
   hover: los bloques se apilan y la foto tiene un zoom lento, sin video. */
:root {
  --dp: #00AEED;
  --ws: #D31F3F;
  --bg: #0e0e0e;
  --radius: 22px;
  --gap: 12px;
  --ease: cubic-bezier(.22, .8, .24, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: #fff;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.portal {
  display: flex;
  gap: var(--gap);
  padding: var(--gap);
  height: 100vh;
  height: 100dvh;
}

.door {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: flex-grow .7s var(--ease), transform .7s var(--ease), filter .5s ease;
}

.door-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 1.2s var(--ease), opacity .6s ease;
}
.door-video { opacity: 0; }

.door-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .7) 100%);
  transition: opacity .5s ease;
}
.door-dp .door-shade { background: linear-gradient(180deg, rgba(0, 20, 30, .05) 30%, rgba(0, 25, 38, .78) 100%); }
.door-ws .door-shade { background: linear-gradient(180deg, rgba(30, 0, 6, .05) 30%, rgba(38, 0, 8, .78) 100%); }

.door-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 0 24px 64px;
  transition: transform .7s var(--ease);
}
.door-logo { width: 170px; height: auto; }
.door-dp .door-logo { filter: brightness(0) invert(1); }
.door-title {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.15;
  max-width: 14ch;
  text-wrap: balance;
}
.door-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 28px;
  border-radius: 100px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.door-dp .door-btn { background: var(--dp); }
.door-ws .door-btn { background: var(--ws); }

/* ---------- Con mouse ---------- */
@media (hover: hover) and (pointer: fine) {
  .door:hover, .door:focus-visible { flex-grow: 1.6; transform: translateY(-6px); }
  .portal:has(.door:hover) .door:not(:hover),
  .portal:has(.door:focus-visible) .door:not(:focus-visible) { filter: saturate(.6) brightness(.7); }

  .door:hover .door-bg, .door:focus-visible .door-bg { transform: scale(1.04); }
  .door.is-playing .door-video { opacity: 1; }
  .door:hover .door-text, .door:focus-visible .door-text { transform: translateY(-14px); }
  .door:hover .door-btn, .door:focus-visible .door-btn { box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
  .door-dp:hover .door-btn, .door-dp:focus-visible .door-btn { background: #0098D1; }
  .door-ws:hover .door-btn, .door-ws:focus-visible .door-btn { background: #a8182f; }
}
.door:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }

/* ---------- Táctil / celular: bloques apilados ---------- */
@media (max-width: 767px), (hover: none) {
  .portal { flex-direction: column; }
  .door { align-items: center; }
  .door-text { padding: 24px; gap: 14px; }
  .door-logo { width: 130px; }
  .door-title { font-size: 22px; }
  .door-btn { padding: 10px 22px; font-size: 14px; }
  .door-video { display: none; }
  .door-bg { animation: door-drift 14s ease-in-out infinite alternate; }
  .door-ws .door-bg { animation-delay: -7s; }
  .door:active { transform: scale(.985); }
}
@keyframes door-drift {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .door, .door-bg, .door-text { transition: none; animation: none; }
  .door-video { display: none; }
}