:root{
  --footer-h: 40px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

html, body{ height:100%; margin:0; background:#fff; }

/* GRID principal */
.page{
  min-height:100svh;
  padding-bottom:var(--footer-h);
  display:grid;
  grid-template-columns: 1fr 1fr; /* texto | imagen (desktop) */
}

/* LOGO */
.brand{
  position:fixed; top:16px; left:16px; z-index:15;
  display:flex; align-items:center; gap:10px;
  opacity:0; transform:translateY(-8px);
  animation: fadeUp .9s var(--ease) 2.0s forwards;
}
.brand img{ height:40px; width:auto; display:block; }
.brand .name{ font-weight:600; font-size:1.2rem; }

/* COLUMNA IZQUIERDA */
.left-panel{
  display:flex; align-items:center;
  padding:72px 24px 24px 24px;  /* más arriba */
  position:relative; z-index:2;
}
.left-wrap{
  width:100%;
  max-width:640px;
  /* +20px en desktop */
  margin-left: clamp(44px, 7vw, 100px);
}

.slogan{ margin:8px 0 8px 0; line-height:1.2; }
.slogan .w{
  display:block;
  font-weight:300;
  font-size:clamp(2.3rem, 4.6vw, 3.2rem);
  letter-spacing:.3px;
  text-shadow:0 1px 3px rgba(0,0,0,.18);
  opacity:0; transform:translateY(10px);
}
.slogan .w strong{ font-weight:800; }

/* Desalineado */
.slogan .w:nth-child(1){ margin-left:.3rem; }     /* gestión */
.slogan .w:nth-child(2){ margin-left:1.6rem; }    /* administración */
.slogan .w:nth-child(3){ margin-left:.8rem; }     /* control */

/* Aparición escalonada (+0.1s) */
.slogan .w:nth-child(1){ animation: fadeUp .8s var(--ease) .1s forwards; }
.slogan .w:nth-child(2){ animation: fadeUp .8s var(--ease) .7s forwards; }
.slogan .w:nth-child(3){ animation: fadeUp .8s var(--ease) 1.3s forwards; }

/* ACCIONES (centradas) */
.actions{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px; max-width:520px;
  margin: 28px auto 0;  /* separadas y centradas */
  opacity:0; transform:translateY(10px);
  animation: fadeUp .8s var(--ease) 1.6s forwards; /* +0.2s */
}
.btn-lg{ padding:.8rem 1.1rem; }

/* Registrarse: blanco semitransparente */
.btn-register{
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.12);
  color:#111;
}
.btn-register:hover{
  background: rgba(255,255,255,0.95);
  color:#000;
}

/* “Olvidé…” con sombra blanca para legibilidad */
.aux-links{
  max-width:520px; margin:10px auto 0; padding-left:8px;
  font-size:.92rem;
  opacity:0; transform:translateY(6px);
  animation: fadeUp .7s var(--ease) 1.85s forwards;
}
.aux-links a{
  text-decoration:none;
  text-shadow:
    0 0 8px rgba(255,255,255,.85),
    0 1px 0 rgba(255,255,255,.95);
}

/* COLUMNA DERECHA: imagen */
.right-panel{
  background:url("https://admcrece.com/assets/img/bg-home.webp") center center no-repeat;
  background-size: contain;     /* que se vea completa */
  background-color:#fff;
  opacity:0; transform:translateX(16px);
  animation: fadeInRight 1.0s var(--ease) .2s forwards; /* +0.1s */
}

/* FOOTER */
footer{
  position:fixed; left:0; right:0; bottom:0; height:var(--footer-h);
  display:flex; align-items:center; justify-content:center;
  padding:0 12px; background:#000; color:#fff;
  font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  z-index:20;
  opacity:0; transform:translateY(8px);
  animation: fadeUp .8s var(--ease) 2.0s forwards; /* +0.2s */
}
footer a{ color:#9cc3ff; text-decoration:none; }

/* --------- MOBILE --------- */
@media (max-width: 992px){
  .page{ grid-template-columns:1fr; }
  .brand{ left:12px; top:12px; }
  .brand .name{ display:inline; } /* mostramos el texto en mobile */

  /* Fondo ocupa toda la pantalla, con doble overlay:
     - ::before oblicuo blanco sólido (0–25% aprox)
     - ::after gradiente 25–75% de blanco a transparente */
  .right-panel{
    position:fixed; inset:0; z-index:0;
    background:url("https://admcrece.com/assets/img/bg-home.webp") right bottom no-repeat;
    background-size: contain;
    animation-delay:.1s;
  }
  .right-panel::before{
    content:""; position:absolute; inset:0;
    background:#fff;
    /* oblicuo: blanco sólido en el top, cae hasta ~30% */
    clip-path: polygon(0 0, 100% 0, 100% 18%, 0 32%);
    pointer-events:none;
  }
  .right-panel::after{
    content:""; position:absolute; inset:0;
    background:
      linear-gradient(
        to bottom,
        rgba(255,255,255,1) 25%,
        rgba(255,255,255,.88) 40%,
        rgba(255,255,255,.65) 55%,
        rgba(255,255,255,.25) 75%,
        rgba(255,255,255,0) 100%
      );
    pointer-events:none;
  }

  .left-panel{
    z-index:1;
    justify-content:flex-start; /* subimos el bloque */
    padding:86px 18px 24px;
  }
  .left-wrap{
    margin-left:0;
    width:min(92vw, 520px);
    margin-inline:auto;            /* contenedor centrado */
  }
  .slogan{ text-align:left; }
  .slogan .w{ margin-left:0 !important; } /* base a la izquierda */
  .slogan .w:nth-child(2){ margin-left:1.0rem !important; } /* “administración” + offset */

  /* Botones un poco más cerca del slogan */
  .actions{ grid-template-columns:1fr; margin-top: 16px; }
  .aux-links{ text-align:left; padding-left:2px; }

  footer{ font-size:.78rem; }
}

/* Animaciones */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeInRight {
  from{ opacity:0; transform:translateX(18px); }
  to  { opacity:1; transform:translateX(0); }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .brand, .slogan .w, .actions, .aux-links, .right-panel, footer { opacity:1; transform:none; }
}