/* ============================================================
   Nicracan — Inicio: separador de contexto estilo Bershka.
   Dos paneles a pantalla completa, apilados en móvil.
   Requiere brand.css antes.
   ============================================================ */

html, body{ height:100%; }
body{ background:var(--ink); overflow:hidden; }

.gateway{
  display:flex;
  flex-direction:column;
  min-height:100svh;
}
@media(min-width:800px){
  .gateway{ flex-direction:row; }
}

/* ---------- marca centrada, por encima de ambos paneles ---------- */
.gateway-brand{
  position:absolute; top:28px; left:50%; transform:translateX(-50%);
  z-index:5; text-align:center; pointer-events:none;
  color:#fff; mix-blend-mode:difference;
}
@media(min-width:900px){ .gateway-brand{ top:44px; } }
.gateway-brand .name{
  font-family:'Oswald',sans-serif; font-size:15px; letter-spacing:0.28em;
  text-transform:uppercase; font-weight:600;
}
@media(min-width:900px){ .gateway-brand .name{ font-size:18px; letter-spacing:0.32em; } }
.gateway-brand .tag{
  margin-top:6px; font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:12.5px; opacity:0.85;
}
@media(min-width:900px){ .gateway-brand .tag{ font-size:14px; } }

/* ---------- panel ---------- */
.gateway-panel{
  position:relative; flex:1; overflow:hidden;
  min-height:50svh;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; cursor:pointer;
}
@media(min-width:800px){ .gateway-panel{ min-height:100svh; } }

.gateway-panel::before{
  content:''; position:absolute; inset:-3%; z-index:0;
  background-size:cover; background-position:center;
  transition:transform .7s cubic-bezier(.16,.8,.28,1);
  transform:scale(1);
}
.gateway-panel::after{
  content:''; position:absolute; inset:0; z-index:1;
  transition:background .5s ease;
}
.gateway-panel:hover::before{ transform:scale(1.07); }

/* Fondos provisionales (degradados de marca) — sustituir por foto/vídeo real en Fase 9 */
.gateway-panel--adiestramiento::before{
  background-image:linear-gradient(160deg, #1a1712 0%, var(--ink) 55%, #241d10 100%);
}
.gateway-panel--adiestramiento::after{
  background:linear-gradient(to bottom, rgba(13,13,13,0.35), rgba(13,13,13,0.6));
}
.gateway-panel--adiestramiento:hover::after{
  background:linear-gradient(to bottom, rgba(13,13,13,0.15), rgba(13,13,13,0.4));
}

.gateway-panel--peluqueria::before{
  background-image:linear-gradient(200deg, #2a2115 0%, #3a2f1c 55%, var(--ink) 100%);
}
.gateway-panel--peluqueria::after{
  background:linear-gradient(to bottom, rgba(13,13,13,0.35), rgba(13,13,13,0.6));
}
.gateway-panel--peluqueria:hover::after{
  background:linear-gradient(to bottom, rgba(13,13,13,0.15), rgba(13,13,13,0.4));
}

/* separador entre paneles */
.gateway-panel--adiestramiento{ border-bottom:1px solid var(--hair-dark); }
@media(min-width:800px){
  .gateway-panel--adiestramiento{ border-bottom:none; border-right:1px solid var(--hair-dark); }
}

/* ---------- contenido del panel ---------- */
.gateway-content{
  position:relative; z-index:2; text-align:center; padding:0 28px;
}
.gateway-kicker{
  font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
  font-size:15px; color:var(--gold-light); opacity:0; transform:translateY(6px);
  transition:opacity .4s ease, transform .4s ease; margin-bottom:14px;
}
@media(min-width:900px){ .gateway-kicker{ font-size:17px; } }
.gateway-panel:hover .gateway-kicker,
.gateway-panel:focus-visible .gateway-kicker{ opacity:0.9; transform:translateY(0); }

.gateway-title{
  font-family:'Oswald',sans-serif; text-transform:uppercase; font-weight:600;
  letter-spacing:0.05em; line-height:1.15; color:#fff;
  font-size:clamp(28px, 7vw, 52px);
}

.gateway-logo{
  display:block; margin:36px auto 0; width:clamp(120px, 16vw, 220px); height:auto;
  opacity:0.5; pointer-events:none; user-select:none;
}
@media(max-width:799px){
  .gateway-logo{ width:clamp(100px, 26vw, 160px); margin-top:28px; }
}

.gateway-underline{
  display:block; height:1.5px; width:0; margin:22px auto 0;
  background:linear-gradient(90deg, var(--gold), var(--gold-light));
  transition:width .5s cubic-bezier(.16,.8,.28,1);
}
.gateway-panel:hover .gateway-underline,
.gateway-panel:focus-visible .gateway-underline{ width:72px; }

.gateway-cta{
  display:block; margin-top:22px; font-family:'Oswald',sans-serif; font-size:11px;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--bone); opacity:0;
  transform:translateY(6px); transition:opacity .4s ease .05s, transform .4s ease .05s;
}
.gateway-panel:hover .gateway-cta,
.gateway-panel:focus-visible .gateway-cta{ opacity:0.75; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .gateway-panel::before{ transition:none; }
  .gateway-panel:hover::before{ transform:none; }
}