:root{
  --vino:#8b1f35;
  --beige:#fff4e6;
  --dorado:#BC965C;
  --dorado-hover:#a27d49;
}

/* Layout general */
.page-wrap{ min-height:100dvh; }

/* Columna izquierda (hero) */
.hero-left{
  position:relative; /* para anclar la botonera */
  background: radial-gradient(1200px 600px at -10% -10%,
    #fcead7 0%, var(--beige) 45%, #f9efe2 100%);
}
.brand-badge{ letter-spacing:.14em; font-weight:700; color:var(--vino); }

/* Tarjeta de login */
.login-card{
  border:0; border-radius:20px; box-shadow:0 8px 30px rgba(0,0,0,.08);
}
.btn-dorado{
  background-color:var(--dorado); color:#fff; border-radius:12px; font-weight:600;
}
.btn-dorado:hover{ background-color:var(--dorado-hover); color:#fff; }
.form-control{ border-radius:12px; padding:.8rem .95rem; }
.form-label{ font-weight:600; color:#333; }
.errorlist, .alert-danger p{ margin:0; }

/* ===== Tarjetas de acceso (estilo con icono + título + descripción) ===== */

.access-grid{
  display:grid;
  gap:1.25rem;
  grid-template-columns: repeat(3, 1fr);
  margin-top:.35rem; /* un poco de aire desde el título */
}

.access-card{
  position: relative;
  display:flex;
  align-items:flex-start;
  gap:1rem;
  background:#fff;
  border:1px solid rgba(0,0,0,.05);
  border-radius:14px;
  padding:1rem 1.25rem 1.15rem;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}

.access-card::after{
  /* barrita dorada inferior, como en el diseño */
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:0;
  height:6px;
  background: var(--dorado);
  border-radius:0 0 12px 12px;
  opacity:.95;
}

.access-card:hover{
  transform: translateY(-3px);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}

.access-icon{
  width:48px; height:48px;
  display:grid; place-items:center;
  border-radius:12px;
  background:#fff; /* limpio detrás del ícono */
  flex:0 0 48px;
}

.access-icon i{
  font-size:32px;
  color:var(--dorado);
  line-height:1;
}

.access-body{ display:block; }

.access-title{
  display:block;
  font-weight:800;
  font-size:1.05rem;
  color:var(--vino);
  line-height:1.1;
  margin-bottom:.2rem;
}

.access-desc{
  display:block;
  font-size:.95rem;
  color:#666;        /* gris suave por defecto */
  line-height:1.35;
}

/* Hover: ambas líneas pasan a vino (como pediste) */
.access-card:hover .access-title,
.access-card:hover .access-desc{
  color:var(--vino);
}

/* Responsivo */
@media (max-width: 1199.98px){
  .access-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px){
  .access-grid{ grid-template-columns: 1fr; }
}


/* ===== Desktop: una sola “fuente de la verdad” ===== */
@media (min-width: 992px){            /* lg+ */
  .hero-content{ transform: translateY(-170px); } /* sube el bloque principal */
  .hero-left img{ max-height: 230px; }           /* compacta ilustración */
  .quick-links-hero{ bottom: 26vh; }             /* accesos un poquito despegados */
}
@media (min-width: 1200px){           /* xl+ */
  .hero-content{ transform: translateY(-190px); }
  .quick-links-hero{ bottom: 28vh; }
}
@media (min-width: 1400px){           /* xxl+ */
  .hero-content{ transform: translateY(-210px); }
  .quick-links-hero{ bottom: 30vh; }
}

/* Hover opcional: texto dorado */
/* .access-card:hover .access-text{ color:var(--dorado); } */

/* --- Ajuste fino: footer más arriba en esta vista --- */
/* (reduce el espacio superior del footer sólo cuando viene después del .page-wrap) */
.page-wrap + footer,
footer.site-footer,
footer.footer,
.app-footer{
  margin-top: 8px !important;   /* prueba 8–16px según te guste */
}

/* En móvil deja un poco más de aire para que no se sienta apretado */
@media (max-width: 767.98px){
  .page-wrap + footer,
  footer.site-footer,
  footer.footer,
  .app-footer{
    margin-top: 16px !important;
  }
}

/* --- Accesos rápidos: sepáralos un poquito de la imagen del hero --- */
@media (min-width: 992px){      /* lg+ */
  .quick-links-hero{ bottom: 24vh; }  /* antes 26vh → bájalos un pelín */
}
@media (min-width: 1200px){     /* xl+ */
  .quick-links-hero{ bottom: 26vh; }  /* antes 28vh */
}
@media (min-width: 1400px){     /* xxl+ */
  .quick-links-hero{ bottom: 28vh; }  /* antes 30vh */
}

/* (opcional) un pelito más de aire entre el título "Accesos rápidos" y las tarjetas */
.quick-links-hero .access-grid{ margin-top: .35rem; } /* antes .25rem */

/* Restablecer el título "INTRANET" visible y accesos debajo de la imagen */
/* Separar un poco más el título del header */
@media (min-width: 992px){        /* lg+ */
  .hero-content{ transform: translateY(-64px) !important; }  /* antes ~-78 */
}

@media (min-width: 1200px){       /* xl+ */
  .hero-content{ transform: translateY(-82px) !important; }  /* antes ~-96 */
}

@media (min-width: 1400px){       /* xxl+ */
  .hero-content{ transform: translateY(-96px) !important; }  /* antes ~-112 */
}

/* (Opcional) Hover: también el ícono en vino para coherencia visual */
.access-card:hover .access-icon i{ color: var(--vino); }