/* =================== Bienvenida (centrado + foto grande sin recortes) =================== */
:root{
  --c-azul:#0d59d8;
  --c-azul-osc:#0b317a;
  --c-cyan:#0ec7c3;
  --c-bg:#f4f9ff;
  --c-text:#1c1f24;
  --c-muted:#5e6a77;
}

/* Accesibilidad */
.sr-only{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}

/* ---------- Layout 2 columnas + separador ---------- */
.welcome-hero.exact{
  display:grid;
  grid-template-columns: 520px 12px 1fr; /* foto más ancha + separador + contenido */
  gap:0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--c-bg);
  box-shadow: 0 14px 38px rgba(11,49,122,.08);
}

/* Separador vertical */
.w-hero-sep{
  background:
    linear-gradient(#0a3b83,#0a3b83) left/3px 100% no-repeat,
    linear-gradient(180deg,#eef4ff,transparent) right/9px 100% no-repeat;
  opacity:.95;
}

/* ---------- Columna izquierda (fondo + patrón + foto centrada) ---------- */
.w-hero-left{
  position: relative;
  min-height: 640px; /* alto mayor para que la foto crezca */
  background: linear-gradient(135deg, var(--c-cyan) 0%, var(--c-azul) 60%, #0a3fb7 100%);
}
.w-hero-left::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(#ffffff33 2px, transparent 2px);
  background-size: 44px 44px;
  opacity:.45; pointer-events:none;
}

/* Foto SIN recortes y CENTRADA */
.w-hero-photo{
  position:absolute; inset:0;
  display:grid; place-items:center; /* centra vertical y horizontal */
  box-sizing:border-box;
  padding: 8px;                     /* menos padding => más grande */
  overflow: visible;                /* por si el PNG tiene contorno blanco */
}
.w-hero-photo img{
  height: 100%;        /* clave para que crezca en alto */
  width: auto;         /* respeta proporción */
  max-height: 100%;
  max-width: 100%;
  object-fit: contain; /* nunca recorta */
  object-position: center center;
  image-rendering: -webkit-optimize-contrast;
}

/* ---------- Columna derecha (todo centrado y limpio) ---------- */
.w-hero-right{
  position: relative;
  padding: 5px 5px 5px;
  color: var(--c-text);
  display:flex; flex-direction:column; align-items:center;
}

/* Header del escudo/título (grande y con su propio espacio) */
.w-hero-header{
  width:100%;
  display:flex; justify-content:center; align-items:center;
  background: transparent;
  border: transparent;
}
.u-wordmark-center{
  display:block;
  height: 100%;   /* grande; ajusta si quieres más */
  width:auto;
  object-fit:contain;
}

/* Tarjeta del mensaje */
.w-centered{ margin-left:auto; margin-right:auto; }

.w-hero-card{
  width:100%; max-width: 980px;
  margin: 10px auto 14px;
  padding: 24px 26px;
  background: radial-gradient(80% 120% at 15% 15%, #ffffff 0%, #eef6ff 55%, #e8f2ff 100%);
  border: 1px solid #dfe9f6;
  border-radius: 12px;
  box-shadow: inset 0 8px 22px rgba(11,49,122,.06);
}
.w-hero-card p{
  margin: 10px 0;
  font-size: 16.8px;
  line-height: 1.68;
  color: var(--c-text);
}
.w-hero-card .lead strong{
  color: var(--c-azul-osc);
  font-weight: 800;
}

/* Firma centrada */
.w-hero-sign{
  width:100%; max-width: 980px;
  text-align:center;
  color: var(--c-muted);
  font-size: 15px;
  margin: 0 auto 4px;
}
.w-hero-sign span{ display:inline-block; margin-top:2px; }
.w-hero-sign .lead{
  margin: 0 0 2px;
  font-size: 16.8px;           
}
.w-hero-sign .lead strong{
  color: var(--c-azul-osc);    
  font-weight: 800;            
}
.w-hero-sign span{
  color: var(--c-muted);
  font-size: 15px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px){
  .welcome-hero.exact{ grid-template-columns: 500px 12px 1fr; }
}
@media (max-width: 992px){
  .welcome-hero.exact{ grid-template-columns: 1fr; }
  .w-hero-left{ min-height: 520px; }
  .w-hero-sep{ display:none; }
  .w-hero-card{ padding: 20px; }
}
@media (max-width: 540px){
  .w-hero-left{ min-height: 440px; }
  .w-hero-photo{ padding: 10px; }
  .w-hero-card{ padding: 18px; border-radius: 10px; }
}