/* ============================================================
   JAUREGUI — Portada / selector de división
   Composición editorial: imagen a sangre en cada mitad, logo
   anclado a la esquina exterior, y nada más encima que lo
   imprescindible. Todo el peso visual lo lleva la fotografía.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  --bg:        #0B0C0D;
  --fg:        #FFFFFF;
  --muted:     rgba(255, 255, 255, .58);
  --line:      rgba(255, 255, 255, .16);

  --force:      #FF7A18;   /* ámbar de soldadura */
  --collection: #C6A87C;   /* champagne */

  --pad:   clamp(24px, 3.2vw, 52px);   /* margen interior de cada panel */
  --ease:  cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* --- IMÁGENES DE FONDO ---------------------------------------
     Fotos reales de obra, recortadas a retrato 3:4 desde los
     originales del cliente. Para cambiarlas basta sustituir el
     archivo o apuntar aquí a otro.
     ------------------------------------------------------------ */
  --img-force:      url("../assets/img/bg-force.webp");
  --img-collection: url("../assets/img/bg-collection.webp");
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}
a { color: inherit; text-decoration: none; }
svg { display: block; }

/* ---------- 3. El split 50 / 50 ---------- */
.split {
  position: relative;
  height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.half {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--pad);
  cursor: pointer;
}
.half--force      { --accent: var(--force);      --img: var(--img-force); }
.half--collection { --accent: var(--collection); --img: var(--img-collection); }

/* --- Imagen a sangre ---
   En capa propia para poder escalarla sin arrastrar el texto. */
.half__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform 1.4s var(--ease-out), filter .8s var(--ease);
  filter: grayscale(.35) contrast(1.04) brightness(.82);
}
.half:hover .half__bg {
  transform: scale(1.07);
  filter: grayscale(0) contrast(1.06) brightness(.95);
}

/* --- Velo de legibilidad ---
   Oscuro arriba y abajo, transparente al centro: cubre exactamente
   donde va el texto y deja respirar la imagen en el medio. */
.half__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(6, 7, 8, .78) 0%,
      rgba(6, 7, 8, .30) 26%,
      rgba(6, 7, 8, .22) 52%,
      rgba(6, 7, 8, .80) 100%);
  transition: opacity .7s var(--ease);
}
.half:hover .half__veil { opacity: .88; }

/* Atenúa la mitad que no se está apuntando */
.half::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #06070A;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s var(--ease);
}
.split:has(.half:hover) .half:not(:hover)::after { opacity: .42; }

/* ---------- 4. Contenido ---------- */
.half__row {
  position: relative;
  z-index: 3;
  display: flex;
}
/* Simetría espejo: cada panel empuja su contenido hacia el borde
   EXTERIOR de la pantalla, dejando limpio el eje central. */
.half--force      .half__row { justify-content: flex-start; }
.half--collection .half__row { justify-content: flex-end; text-align: right; }

/* --- Logo en la esquina --- */
.logo {
  height: clamp(58px, 6.4vw, 92px);
  display: grid;
  place-items: center;
  color: var(--fg);
  /* Doble sombra: una cerrada que dibuja el borde contra fondos claros
     y otra abierta que despega la pieza de la imagen. */
  filter:
    drop-shadow(0 1px 2px  rgba(0, 0, 0, .55))
    drop-shadow(0 8px 26px rgba(0, 0, 0, .45));
  transition: transform .8s var(--ease-out);
}
.logo svg { height: 100%; width: auto; }
.half--force .logo svg { height: 116%; }   /* compensación óptica: pesa más */
.half:hover .logo { transform: translateY(-3px); }

/* --- Bloque inferior --- */
.half__foot {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  /* flex-start, no stretch: si no, el subrayado del enlace se estira de
     borde a borde del panel en lugar de ceñirse al texto. */
  align-items: flex-start;
  gap: 14px;
}
.half--collection .half__foot { align-items: flex-end; text-align: right; }

.half__name {
  font-size: clamp(26px, 3vw, 46px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.02em;
  margin: 0;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
}
.half__kicker {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

/* Enlace: sólo texto y una regla que se llena de color al pasar */
.half__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 9px;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.half__link svg { transition: transform .4s var(--ease); }
.half:hover .half__link { color: var(--fg); border-color: var(--accent); }
.half:hover .half__link svg { transform: translateX(4px); }
.half--collection .half__link { flex-direction: row-reverse; }
.half--collection .half__link svg { transform: scaleX(-1); }
.half--collection:hover .half__link svg { transform: scaleX(-1) translateX(4px); }

/* ---------- 5. Marca madre y divisoria ---------- */
.mark {
  position: fixed;
  top: var(--pad);
  left: 0;
  right: 0;
  z-index: 20;
  /* Se centra con text-align, NO con translateX: la animación de entrada
     (.reveal) resetea transform a none y descentraría la marca. */
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .42em;
  text-indent: .42em;      /* compensa el tracking del último carácter */
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
  pointer-events: none;
}

.divider {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  z-index: 15;
  transform: translateX(-.5px);
  background: rgba(255, 255, 255, .22);
  pointer-events: none;
}

/* ---------- 6. Entrada ---------- */
.divider { transform-origin: center; scale: 1 0; transition: scale 1.1s var(--ease-out); }
[data-ready] .divider { scale: 1 1; }

.reveal { opacity: 0; transform: translateY(16px); }
[data-ready] .reveal {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--d, 0ms);
}
html:not([data-ready]) .half__bg { opacity: 0; }
.half__bg { transition: transform 1.4s var(--ease-out), filter .8s var(--ease), opacity 1s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
  .divider { scale: 1 1; }
  .reveal { opacity: 1; transform: none; }
  .half__bg { opacity: 1; }
}

/* ---------- 7. Responsive ---------- */
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .half { padding: clamp(20px, 5vw, 34px); }
  .half:first-child { padding-top: 64px; }

  /* En vertical la simetría espejo se pierde: ambos paneles alinean a la
     izquierda, que es como se lee. */
  .half--collection .half__row { justify-content: flex-start; text-align: left; }
  .half--collection .half__foot { align-items: flex-start; text-align: left; }
  .half--collection .half__link { flex-direction: row; }
  .half--collection .half__link svg { transform: none; }
  .half--collection:hover .half__link svg { transform: translateX(4px); }

  .divider {
    top: 50%; left: 0;
    width: 100%; height: 1px;
    transform: translateY(-.5px);
    scale: 0 1;
  }
  [data-ready] .divider { scale: 1 1; }
  .mark { top: 22px; }
  .logo { height: clamp(48px, 12vw, 68px); }
}