:root{
    --maxw:1440px;
    --ink:#0B0D12;
    --ink-soft:#171A21;
    --line:rgba(255,255,255,.14);
    --focus:#4FA3FF;

    --utility-red:#C92A33;
    --utility-red-dark:#A6212A;
    --utility-navy:#030F27;

    --guerra-yellow:#F5CD51;
    --guerra-yellow-deep:#E4B72F;
    --guerra-black:#0A0A0A;

    --font-utility: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-guerra-head: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-guerra: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ -webkit-text-size-adjust:100%; }
  body{
    margin:0;
    font-family:var(--font-utility);
    color:#fff;
    background:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  }

  .skip-link{
    position:absolute;
    left:12px;
    top:-60px;
    background:#fff;
    color:var(--ink);
    padding:10px 18px;
    border-radius:0 0 8px 8px;
    z-index:1000;
    font-weight:700;
    font-size:14px;
    transition:top .15s ease;
  }
  .skip-link:focus{ top:0; }

  :focus-visible{
    outline:3px solid var(--focus);
    outline-offset:2px;
    border-radius:4px;
  }

  /* Ojo: esta clase se llama "catug-shell" (no "page"), a propósito. WordPress
     agrega la clase "page" al <body> de toda página normal (body_class()), así
     que un selector ".page" acá también le pegaba al <body> completo y lo
     dejaba fijo en 1440px de ancho en cualquier pantalla, rompiendo el sitio
     en mobile. */
  .catug-shell{
    width:var(--maxw);
    max-width:var(--maxw);
    margin:0 auto;
    min-height:100vh;
    background:var(--ink);
    position:relative;
    display:flex;
    flex-direction:column;
  }

  /* El tema de WordPress mete el shortcode dentro de un contenedor angosto
     de contenido; esto lo "rompe" para que la portada use el ancho
     completo de la pantalla, igual que en los catálogos. */
  .gate-root.catug-shell{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
  }

  /* ---------- Top bar ---------- */
  .gate-topbar{
    padding:12px 48px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    border-bottom:1px solid var(--line);
  }
  .gate-topbar-note{
    font-size:12.5px;
    color:#7C818C;
  }

  /* ---------- Intro ---------- */
  /* "color:#fff" explícito acá porque el h1 no trae color propio: sin esto
     hereda el color de encabezados que el tema WordPress define de forma
     global (gris casi negro), invisible sobre el fondo oscuro de esta
     sección — mismo patrón que ya usa .hero en las páginas de catálogo. */
  .gate-intro{
    text-align:center;
    padding:18px 40px 20px;
    color:#fff;
  }
  .gate-intro h1{
    font-size:34px;
    font-weight:700;
    margin:0 0 10px;
    letter-spacing:-.01em;
  }
  .gate-intro p{
    font-size:16px;
    color:#B7BCC6;
    max-width:620px;
    margin:0 auto;
    line-height:1.5;
  }

  /* ---------- Split selector ---------- */
  .gate-split{
    flex:1;
    display:grid;
    grid-template-columns:1fr 0 1fr;
    min-height:560px;
  }
  .gate-panel{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    text-align:center;
    padding:0 48px 56px;
    overflow:hidden;
    text-decoration:none;
    color:#fff;
    isolation:isolate;
    min-height:520px;
  }
  .gate-panel-bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    transform:scale(1.02);
    transition:transform .5s ease;
    z-index:-2;
  }
  .gate-panel:hover .gate-panel-bg,
  .gate-panel:focus-visible .gate-panel-bg{ transform:scale(1.08); }
  .gate-panel-overlay{
    position:absolute;
    inset:0;
    z-index:-1;
  }
  .gate-panel--utility .gate-panel-overlay{
    background:linear-gradient(180deg, rgba(3,15,39,.35) 0%, rgba(3,15,39,.55) 55%, rgba(3,15,39,.92) 100%);
  }
  .gate-panel--guerra .gate-panel-overlay{
    background:linear-gradient(180deg, rgba(10,10,10,.35) 0%, rgba(10,10,10,.55) 55%, rgba(10,10,10,.92) 100%);
  }
  .gate-panel-logo{
    height:64px;
    width:auto;
    margin:32px 0 22px;
    filter:drop-shadow(0 4px 18px rgba(0,0,0,.45));
  }
  .gate-panel--guerra .gate-panel-logo{
    height:52px;
    border-radius:10px;
    margin-top:36px;
  }
  .gate-panel-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    padding:6px 14px;
    border-radius:999px;
    margin:0 0 16px;
  }
  .gate-panel--utility .gate-panel-tag{
    background:rgba(201,42,51,.18);
    border:1px solid rgba(201,42,51,.5);
    color:#FF8A90;
  }
  .gate-panel--guerra .gate-panel-tag{
    background:rgba(245,205,81,.16);
    border:1px solid rgba(245,205,81,.45);
    color:var(--guerra-yellow);
  }
  .gate-panel p.gate-panel-desc{
    font-size:15px;
    line-height:1.6;
    color:#E4E7EC;
    max-width:400px;
    margin:0 0 26px;
  }
  .gate-panel-cta{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-weight:700;
    font-size:15.5px;
    padding:14px 30px;
    border-radius:999px;
    min-height:48px;
  }
  .gate-panel-cta svg{ width:18px; height:18px; transition:transform .15s ease; }
  .gate-panel:hover .gate-panel-cta svg,
  .gate-panel:focus-visible .gate-panel-cta svg{ transform:translateX(4px); }
  .gate-panel--utility .gate-panel-cta{ background:var(--utility-red); color:#fff; }
  .gate-panel--utility:hover .gate-panel-cta{ background:var(--utility-red-dark); }
  .gate-panel--guerra .gate-panel-cta{ background:var(--guerra-black); color:var(--guerra-yellow); }
  .gate-panel--guerra:hover .gate-panel-cta{ background:#1A1A1A; }

  .gate-divider{
    position:relative;
  }
  .gate-divider-label{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:2;
    background:var(--ink);
    border:1px solid var(--line);
    color:#8C8FA0;
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding:10px 16px;
    border-radius:999px;
    white-space:nowrap;
  }

  .gate-panel--utility{ font-family:var(--font-utility); }
  .gate-panel--utility h2{ font-family:var(--font-utility); font-weight:700; font-size:28px; margin:0 0 10px; }
  .gate-panel--guerra{ font-family:var(--font-guerra); }
  .gate-panel--guerra h2{ font-family:var(--font-guerra-head); font-weight:800; font-size:28px; margin:0 0 10px; }

  /* ---------- Footer ---------- */
  .gate-footer{
    border-top:1px solid var(--line);
    padding:20px 48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    font-size:12.5px;
    color:#7C818C;
  }
  .gate-footer a{ color:#B7BCC6; text-decoration:none; }
  .gate-footer a:hover{ color:#fff; text-decoration:underline; }
  .gate-footer-links{ display:flex; gap:20px; flex-wrap:wrap; }

  .visually-hidden{
    position:absolute !important;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap; border:0;
  }

  @media (max-width: 860px){
    .gate-split{ grid-template-columns:1fr; }
    .gate-divider{ display:none; }
    .gate-panel{ min-height:360px; }
    .gate-topbar{ flex-direction:row; align-items:center; justify-content:flex-end; padding:8px 24px; }
    .gate-intro{ padding:14px 24px 16px; }
    .gate-panel-logo{ margin-top:26px; }
    .gate-panel--guerra .gate-panel-logo{ margin-top:28px; }
    .gate-footer{ padding:18px 24px; }
  }