:root{
  --brand-blue:#0d476d;
  --brand-blue-2:#1b5676;
  --accent-orange:#f39a63;
}

.py-5 {
  padding: 0rem !important;
}

.titulo-conctacto {
  font-weight: 800;
  font-size: 3rem;
  color: #004080; /* Azul oscuro */
  text-align: center;
  margin-bottom: 1.5rem;
}

.titulo-rule{
  display:block; width: clamp(220px, 55%, 760px); height:3px;
  background: var(--rule); border-radius: 2px;
  margin: 0 auto 28px;
}

.titulo-rule--alt{ background: #d6e4f1; }

.sucursal-card{
  background:#fff;
  border-radius:20px;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  padding:2rem;
}
.sucursal-title{
  color:#0d476d;            /* azul corporativo */
  font-weight:800;
  font-size:2rem;
}
.sucursal-address{
  color:#123e63;
  font-size:1.35rem;
  line-height:1.35;
}
.sucursal-map{
  width:100%;
  height:260px;             /* alto “mini-mapa” */
  border-radius:16px;
  overflow:hidden;
}
.sucursal-photo {
  display: block;
  overflow: hidden;
  border-radius: 16px;      /* ajusta según tu diseño */
  aspect-ratio: 16 / 9;     /* mismo formato que el mapa */
  background: #f3f5f7;      /* color de fondo mientras carga */
}

.sucursal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .35s ease;
}
.sucursal-photo:hover img {
  transform: scale(1.03);
}
.sucursal-photo:focus-visible {
  outline: 3px solid #0d6efd;
  outline-offset: 4px;
}

.contact-section{
  background: radial-gradient(ellipse at 20% 0%, rgba(13,71,109,.03), transparent 60%),
              radial-gradient(ellipse at 80% 100%, rgba(13,71,109,.04), transparent 60%);
}

.contact-title{
  color:var(--brand-blue);
  font-weight:800;
  font-size:3rem;
  line-height:1;
}

.contact-label{
  color:var(--brand-blue);
  font-weight:600;
  margin-bottom:.35rem;
  display:block;
}

.req-star{ color:var(--brand-blue-2); font-weight:800; }

.contact-control{
  border:2px solid rgba(13,71,109,.35);
  border-radius:10px;
  padding:.9rem 1rem;
  font-size:1.05rem;
  background:#fff;
}
.contact-control:focus{
  border-color:var(--brand-blue);
  box-shadow:0 0 0 .25rem rgba(13,71,109,.15);
}

.contact-textarea{ min-height:160px; resize:vertical; }

.contact-check{ width:1.2rem; height:1.2rem; border:2px solid rgba(13,71,109,.6); }
.contact-check:checked{ background-color:var(--brand-blue); border-color:var(--brand-blue); }
.contact-check-label{ color:#123e63; }

.contact-cta{
  background:var(--accent-orange);
  color:#fff;
  font-weight:700;
  border-radius: 8px;
  padding:.85rem 2.2rem;
  box-shadow:0 8px 20px rgba(243,154,99,.35);
  transition:.2s ease;
}
.contact-cta:hover{ transform:translateY(-1px); opacity:.95; }
.contact-cta:disabled{ opacity:.6; cursor:not-allowed; }

/* ===== Reveal base ===== */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(2px);
  transition:
    opacity .7s ease,
    transform .7s ease,
    filter .7s ease;
  transition-delay: var(--delay, 0s);
  will-change: opacity, transform, filter;
}

/* Estados/tipos */
.reveal.fade-in   { transform: none; }
.reveal.fade-up   { transform: translateY(14px); }
.reveal.slide-left  { transform: translateX(-24px); }
.reveal.slide-right { transform: translateX(24px); }
.reveal.zoom-in   { transform: scale(.96); }

.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Accesibilidad: usuarios con “reduced motion” */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; filter: none; }
}


/* Responsive */
@media (max-width: 992px){
  .sucursal-address{ font-size:1.1rem; }
}

/* Envuelve ambas secciones en un contenedor padre */
.pagina-contacto {
  display: flex;
  flex-direction: column;
}

/* Asigna órdenes: formulario primero */
#contacto { order: 1; }
#bloque-sucursales { order: 2; }

/* Si quisieras revertir en mobile/desktop, puedes usar media queries */
@media (min-width: 992px) {
  #contacto { order: 1; }
  #bloque-sucursales { order: 2; }
}

/* Fondo suave para toda la página de contacto */
.page-soft-bg{
  /* mismo fondo que usabas en .contact-section */
  background:
    radial-gradient(ellipse at 20% 0%,   rgba(13,71,109,.03), transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(13,71,109,.04), transparent 60%);
}

/* Los sections no deben pintar otro color de fondo */
.contact-section,
#sucursales{
  background: transparent;
}

/* Por si hay “margin collapse” entre sections, evita artefactos */
.page-soft-bg { overflow: hidden; }