:root{ --accent: var(--rw-accent, #ffc107); --muted:#6b7280; }
.page-contact .container{max-width:1120px;margin:0 auto;padding:0 16px}

/* HERO */
.ct-hero{
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(255,255,255,0)),
              var(--hero) center/cover no-repeat;
  color:#0b2a5a;
}
.ct-hero .panel{
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.75));
  border-radius:18px; padding:28px 24px; margin:32px auto 28px; text-align:center;
  max-width:900px; box-shadow:0 12px 30px rgba(0,0,0,.08);
}
.ct-hero h1{font-family:"Cinzel",serif;font-size:clamp(28px,6vw,56px);margin:0 0 8px}
.ct-hero p{margin:0;color:#243b6b;font-weight:600}

/* FORM */
.ct-form{padding:22px 0 8px;background:#fff}
.ct-form .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f{display:block;margin:16px 0}
.f>span{display:block;font-weight:700;margin-bottom:6px}
.input{display:flex;align-items:center;gap:8px;border:1px solid #e6e6e6;border-radius:12px;padding:10px 12px;background:#fff}
.input .ico{opacity:.55}
.input input{border:0;outline:none;width:100%;font-size:16px}
textarea{width:100%;border:1px solid #e6e6e6;border-radius:12px;padding:12px;font-size:16px;resize:vertical;min-height:120px}

.rw-cta.big{display:inline-block;padding:12px 18px;border-radius:12px;background:var(--accent);color:#111;font-weight:800;margin-top:10px;text-decoration:none}
.err{color:#c62828;font-size:13px;margin-top:6px;min-height:1em}
.sent.ok{color:#276749;font-weight:700;margin-top:10px}

/* CTA SPLIT */
.ct-split{background:#eef2f8;padding:24px 0}
.split{display:grid;grid-template-columns:1fr 12px 1fr;gap:18px;align-items:center;border-radius:16px;padding:22px;background:#e9eef6}
.split .box{text-align:center;padding:10px}
.split .divider{width:2px;height:100%;background:#0f2046;opacity:.8;border-radius:2px}
.split h3{font-family:"Cinzel",serif;font-size:28px;margin:0 0 6px}
.split p{margin:0 0 10px;color:#111}

/* CARDS */
.ct-cards{padding:22px 0 44px;background:#f7f7f7}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.card{
  display:block;background:#e9eef6;border-radius:16px;padding:22px;text-decoration:none;color:#111;
  position:relative; box-shadow:0 6px 18px rgba(0,0,0,.05);
}
.card h4{font-weight:800;font-size:24px;margin:0 0 6px}
.card p{margin:0 0 8px;color:#111}
.card .arrow{position:absolute;right:18px;bottom:18px;font-size:28px;color:#0f2046}

/* Responsive */
@media (max-width: 900px){
  .ct-form .grid-2{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:10px}
  .split .divider{display:none}
  .cards{grid-template-columns:1fr}
}
/* Centrar el formulario y limitar el ancho */
#contactForm{
  max-width: 900px;   /* ancho del bloque de campos */
  margin: 0 auto;     /* centrado horizontal */
}

/* Dos columnas centradas dentro del formulario */
.ct-form .grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
}

/* Inputs bonitos y consistentes con la paleta */
.input, textarea{
  border:1px solid #e6e6e6;
  border-radius:12px;
  background:#fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.04);
}
.input:focus-within, textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,193,7,.25);
  outline:none;
}

/* Alinear el botón al centro bajo el formulario */
#contactForm .rw-cta.big{
  display:block;
  width: 220px;
  margin: 16px auto 0;  /* auto => centrado */
  text-align:center;
}

/* En móvil, 1 sola columna */
@media (max-width: 900px){
  .ct-form .grid-2{ grid-template-columns:1fr; }
}
/* Espaciado y buen wrap en móviles para los CTA del header */
.rw-right{ gap:10px; flex-wrap:wrap; }
.rw-right .rw-cta{ white-space:nowrap; }
/* ancho del formulario centrado */
.contact-form #contactForm{ max-width:900px; margin:0 auto; }

/* grid de dos columnas que se centra dentro del form */
.contact-form .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }

/* inputs y textarea bonitos y consistentes */
.contact-form .input,
.contact-form textarea{
  border:1px solid #e6e6e6; border-radius:12px; background:#fff;
  box-shadow:0 6px 14px rgba(0,0,0,.04);
  padding:10px 12px;
}
.contact-form .input{ display:flex; align-items:center; gap:8px; }
.contact-form .input input{ border:0; outline:none; width:100%; font-size:16px; background:transparent; }
.contact-form textarea{ width:100%; min-height:120px; resize:vertical; font-size:16px; }
.contact-form .input:focus-within, .contact-form textarea:focus{
  border-color:#ffc107; box-shadow:0 0 0 3px rgba(255,193,7,.25); outline:none;
}

.contact-form .rw-cta.big{ display:block; width:220px; margin:16px auto 0; text-align:center; }

.err{ color:#c62828; font-size:13px; margin-top:6px; min-height:1em; }
.sent.ok{ color:#276749; font-weight:700; margin-top:10px; }

/* hero de contacto reusando estilos */
.hero.contact-hero{
  background: linear-gradient(#00000045,#00000030),
              url('https://images.unsplash.com/photo-1519681393784-d120267933ba?q=80&w=2000&auto=format&fit=crop') center/cover no-repeat;
}
.hero.contact-hero .hero-title{ color:#fff; }
.hero.contact-hero .lead{ color:#fff; font-weight:600; }

/* bloque doble y cartas (igual que antes) */
.ct-split{ background:#eef2f8; padding:24px 0; }
.split{ display:grid; grid-template-columns:1fr 12px 1fr; gap:18px; align-items:center; border-radius:16px; padding:22px; background:#e9eef6; }
.split .box{ text-align:center; padding:10px; }
.split .divider{ width:2px; height:100%; background:#0f2046; opacity:.8; border-radius:2px; }
.ct-cards{ padding:22px 0 44px; background:#f7f7f7; }
.cards{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.card{ display:block; background:#e9eef6; border-radius:16px; padding:22px; text-decoration:none; color:#111; position:relative; box-shadow:0 6px 18px rgba(0,0,0,.05); }
.card .arrow{ position:absolute; right:18px; bottom:18px; font-size:28px; color:#0f2046; }

@media (max-width: 900px){
  .contact-form .grid-2{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; gap:10px; }
  .split .divider{ display:none; }
  .cards{ grid-template-columns:1fr; }
}
/* ===== Dropdown accesible para "Acerca de" ===== */
.rw-nav > li { position: relative; }

.rw-has-sub > .rw-nav-label{
  display:inline-flex; align-items:center; gap:6px;
  cursor:pointer; opacity:.95;
}
.rw-has-sub > .rw-nav-label::after{ content:"▾"; font-size:.8em; }

.rw-sub{
  position:absolute;
  top:100%;           /* ← SIN GAP: pega el menú al botón */
  left:0;
  display:none;       /* se muestra con .is-open / hover / focus */
  min-width:220px;
  padding:10px;
  background: var(--accent);
  color:#fff;
  border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  z-index:300;        /* por encima del header (header ~100), debajo del modal (1000) */
}

.rw-sub li{ list-style:none; }
.rw-sub a{
  display:block;
  padding:10px 14px;
  color:#fff;
  text-decoration:none;
  border-radius:8px;
}
.rw-sub a:hover, .rw-sub a:focus{ background: rgba(255,255,255,.12); }

/* Mostrar el menú en hover/focus/estado abierto */
.rw-has-sub:hover .rw-sub,
.rw-has-sub:focus-within .rw-sub,
.rw-has-sub.is-open .rw-sub{ display:block; }
/* caret bien centrado respecto al texto */
.rw-has-sub > .rw-nav-label::after{
  content:"▾";
  margin-left:6px;
  transform: translateY(1px);
}

/* evita desplazamientos por márgenes inesperados */
.rw-nav > li{ margin:0; position:relative; }