/* Marca Esstudia para el portal de solicitudes (reservas.esstudia.co)
   Colores y tipografía tomados de esstudia.com: morado #3d3674, rojo #f94238, gris claro #edece8. */
:root {
  --ess-morado: #3d3674;
  --ess-morado-oscuro: #2f2a5c;
  --ess-rojo: #f94238;
  --ess-rojo-oscuro: #e0352c;
  --ess-gris: #edece8;
  --ess-fondo: #f5f4f1;
  --ess-texto: #2b2a33;
  --ess-suave: #6b6a75;
}

html, body {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
  color: var(--ess-texto);
}
body {
  margin: 0;
  min-height: 100vh;
  /* Mismo fondo de esstudia.com: blanco con formas orgánicas gris muy claro */
  background-color: #fff;
  background-image: url('/images/fondo_esstudia.png');
  background-repeat: repeat;
  background-size: 720px 720px;
}

/* ---------- Encabezado (igual al de esstudia.com) ---------- */
.ess-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.ess-topbar { background: var(--ess-morado); color: #fff; font-size: 13px; font-weight: 500; }
.ess-topbar .ess-wrap { display: flex; justify-content: space-between; align-items: center; min-height: 32px; }
.ess-topbar a { color: #fff; text-decoration: none; }
.ess-topbar svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 6px; fill: #fff; }

/* Barra con el logo: fija arriba al bajar por la página */
.ess-nav {
  --ess-margen: max(24px, calc((100vw - 1240px) / 2 + 24px));
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: stretch; justify-content: space-between;
  min-height: 80px; background: var(--ess-gris);
  box-shadow: 0 6px 24px rgba(61, 54, 116, .08);
}
.ess-logo {
  background: var(--ess-rojo); display: flex; align-items: center; justify-content: center;
  margin-left: var(--ess-margen); padding: 0 30px;
  transition: margin .35s ease, padding .35s ease;
}
.ess-logo img { height: 46px; width: auto; display: block; transition: height .35s ease; }
.ess-nav-texto { display: flex; align-items: center; gap: 28px; margin-right: var(--ess-margen); transition: margin .35s ease; }
/* Al bajar: el bloque rojo se pega al borde izquierdo y se ensancha, como en esstudia.com */
body.ess-scroll .ess-logo { margin-left: 0; padding: 0 max(48px, calc((100vw - 1240px) / 2 + 30px)); }
body.ess-scroll .ess-logo img { height: 50px; }
body.ess-scroll .ess-nav-texto { margin-right: max(24px, calc((100vw - 1240px) / 2)); }
.ess-header-espacio { height: 36px; }

.ess-nav-titulo { color: var(--ess-morado); font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.ess-nav-link {
  color: var(--ess-morado); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
  text-decoration: none; border: 2px solid #dcdad5; padding: 9px 16px; border-radius: 4px; background: #e2e0db;
}
.ess-nav-link:hover { background: var(--ess-morado); border-color: var(--ess-morado); color: #fff; text-decoration: none; }

/* ---------- Contenido ---------- */
h1, h2, h3, h4, h5 { font-family: 'Montserrat', sans-serif; font-weight: 700; }
h4[style], h5[style], .seccion { color: var(--ess-rojo) !important; letter-spacing: .02em; }
h1, h2, h3 { color: var(--ess-morado); }
label, .control-label, .form-label { color: var(--ess-morado); }
a { color: var(--ess-rojo); }

.btn { font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: .03em; border-radius: 6px !important; }
.btn-primary, .btn-danger {
  background-color: var(--ess-rojo) !important; border-color: var(--ess-rojo) !important; color: #fff !important;
}
.btn-primary:hover, .btn-danger:hover, .btn-primary:focus, .btn-danger:focus {
  background-color: var(--ess-rojo-oscuro) !important; border-color: var(--ess-rojo-oscuro) !important;
}
.btn-info {
  background-color: transparent !important; border: 2px solid var(--ess-morado) !important; color: var(--ess-morado) !important;
}
.btn-info:hover { background-color: var(--ess-morado) !important; color: #fff !important; }
.btn + .btn, .btn + input.btn, input.btn + input.btn { margin-left: 10px; }
.form-control:focus { border-color: var(--ess-morado) !important; box-shadow: 0 0 0 .15rem rgba(61, 54, 116, .15) !important; }

/* Tarjeta blanca para los formularios en computador y tablet (en celular queda como siempre) */
@media (min-width: 768px) {
  .ess-card {
    background: #fff; border-radius: 14px; box-shadow: 0 14px 40px rgba(61, 54, 116, .10);
    padding: 36px 44px !important; max-width: 1180px;
  }
  /* Formulario y botones van en dos bloques: se ven como una sola tarjeta */
  .ess-card-cuerpo { border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 0 !important;
                     box-shadow: 0 -6px 30px -8px rgba(61, 54, 116, .10), 12px 0 30px -14px rgba(61, 54, 116, .10), -12px 0 30px -14px rgba(61, 54, 116, .10); }
  .ess-card-cuerpo form { margin-bottom: 8px !important; }
  .ess-card-pie { border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 8px !important; padding-bottom: 36px !important; margin-bottom: 48px;
                  box-shadow: 0 18px 30px -10px rgba(61, 54, 116, .14), 12px 0 30px -14px rgba(61, 54, 116, .10), -12px 0 30px -14px rgba(61, 54, 116, .10); }
  .ess-card-pie .mb-5 { margin-bottom: 0 !important; }
  .ess-card .form-floating { margin-bottom: 14px; }
}
@media (min-width: 1200px) {
  .ess-card { padding: 44px 56px !important; }
}

/* ---------- Celular ---------- */
@media (max-width: 767px) {
  .ess-header-espacio { height: 24px; }
  .ess-topbar { display: none; }
  .ess-nav { min-height: 64px; }
  .ess-logo, body.ess-scroll .ess-logo { margin-left: 0; padding: 0 18px; }
  .ess-logo img, body.ess-scroll .ess-logo img { height: 34px; }
  .ess-nav-texto, body.ess-scroll .ess-nav-texto { margin-right: 0; }
  .ess-nav-titulo { display: none; }
  .ess-nav-texto { padding-right: 14px; }
  .ess-nav-link { font-size: 11px; padding: 7px 10px; }
}