/* ==================================================
   Paleta Grupo Rehabilar
   Dorado #B3895C · Gris #808080 · Azul marino #0E233E
   Sustituye al esquema de color de la plantilla (scheme-01.css).
   ================================================== */
* {
  --brand-gold: #B3895C;
  --brand-gold-rgb: 179, 137, 92;
  /* Dorado oscurecido para texto pequeño sobre fondo claro (contraste AA 5.2:1) */
  --brand-gold-text: #8A6641;
  --brand-gray: #808080;
  --brand-navy: #0E233E;
  --brand-navy-rgb: 14, 35, 62;
  /* Azul marino aclarado para bandas y fondos secundarios */
  --brand-navy-light: #1B3A63;

  /* variables de la plantilla */
  --primary-color: var(--brand-gold);
  --primary-color-rgb: var(--brand-gold-rgb);

  --secondary-color: var(--brand-gray);
  --secondary-color-rgb: 128, 128, 128;

  --bg-light: #F7F4EF;

  --bg-dark-1: var(--brand-navy);
  --bg-dark-1-rgb: var(--brand-navy-rgb);
  --bg-dark-2: #0B1C32;
  --bg-dark-3: #081527;

  --heading-font-color: var(--brand-navy);
  --subtitle-color: var(--brand-gold-text);
  --subtitle-color-dark: var(--brand-gold);

  /* Botones dorados con texto azul marino (contraste 4.8:1); al pasar el ratón, azul marino */
  --btn-color: var(--brand-navy);
  --btn-hover-color: #ffffff;
  --btn-hover-bg: var(--brand-navy);

  --logo-width: 200px;
  --logo-footer-width: 260px;
}

/* Fondo del lienzo en azul marino: el rebote del navegador al llegar al final de la página
   (touchpad) se funde con el footer en lugar de mostrar una franja blanca. */
html { background-color: var(--brand-navy); }
body { background-color: #ffffff; }

/* utilidades de marca */
.text-navy { color: var(--brand-navy) !important; }
.text-gold { color: var(--brand-gold) !important; }
.bg-navy { background-color: var(--brand-navy) !important; }
.bg-navy-light { background-color: var(--brand-navy-light) !important; }

/* Texto blanco de la plantilla sobre dorado -> azul marino para mantener el contraste */
.bg-color.text-light,
.bg-color.text-white,
.bg-color .text-white,
.bg-color.text-light h1, .bg-color.text-light h2, .bg-color.text-light h3, .bg-color.text-light h4 {
  color: var(--brand-navy) !important;
}

/* Botones sobre fondos azul marino: al pasar el ratón pasan a blanco */
.section-dark a.btn-main:hover,
.bg-dark a.btn-main:hover,
.bg-navy a.btn-main:hover,
.jarallax.bg-dark-1 a.btn-main:hover {
  background: #ffffff;
  color: var(--brand-navy);
}
button.btn-main:hover {
  color: var(--btn-hover-color);
  background: var(--btn-hover-bg);
}

/* Logos de marca: el alto manda (el horizontal es más ancho que el de la plantilla) */
header #logo img.logo-main,
header #logo img.logo-scroll {
  height: 60px;
  width: auto;
  max-width: none;
}
header #logo img.logo-mobile {
  height: 46px;
  width: auto;
}
footer .logo-footer {
  height: auto;
}
/* ==================================================
   Menú móvil: despliegue y cierre animados (ver theme/js/rehabilar.js)
   ================================================== */
header.header-mobile.rh-menu-anim {
  transition: height .45s cubic-bezier(.2, .7, .2, 1);
}
header.header-mobile.rh-menu-closing {
  transition-duration: .38s;
}
html.rh-menu-lock,
html.rh-menu-lock body {
  overflow: hidden;
}

/* Enlaces: entran escalonados al abrir y se desvanecen al cerrar */
header.header-mobile #mainmenu > li {
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity .3s ease, transform .4s cubic-bezier(.2, .7, .2, 1);
}
header.header-mobile.menu-open #mainmenu > li {
  opacity: 1;
  transform: none;
}
header.header-mobile.menu-open #mainmenu > li:nth-child(1) { transition-delay: .10s; }
header.header-mobile.menu-open #mainmenu > li:nth-child(2) { transition-delay: .16s; }
header.header-mobile.menu-open #mainmenu > li:nth-child(3) { transition-delay: .22s; }
header.header-mobile.menu-open #mainmenu > li:nth-child(4) { transition-delay: .28s; }
header.header-mobile.menu-open #mainmenu > li:nth-child(5) { transition-delay: .34s; }
header.header-mobile.menu-open #mainmenu > li:nth-child(6) { transition-delay: .40s; }
header.header-mobile.menu-open.rh-menu-closing #mainmenu > li {
  opacity: 0;
  transform: translateY(-8px);
  transition-delay: 0s;
  transition-duration: .2s;
}

/* Botón: hamburguesa que se transforma en X */
#menu-btn {
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0;
  line-height: 1;
  color: var(--brand-navy);
  background: linear-gradient(currentColor, currentColor) center / 22px 2px no-repeat !important;
  transition: background-size .25s ease;
}
header.header-mobile.header-light #menu-btn { color: var(--brand-navy); }
#menu-btn::before,
#menu-btn.menu-open::before,
#menu-btn::after {
  content: "";
  position: absolute;
  left: 7px;
  width: 22px;
  height: 2px;
  font-size: 0;
  border-radius: 2px;
  background: currentColor;
  transition: top .3s cubic-bezier(.2, .7, .2, 1), transform .35s cubic-bezier(.2, .7, .2, 1) .05s;
}
#menu-btn::before { top: 10px; }
#menu-btn::after { top: 24px; }
#menu-btn.menu-open {
  background-size: 0 2px !important;
}
#menu-btn.menu-open::before { top: 17px; transform: rotate(45deg); }
#menu-btn.menu-open::after { top: 17px; transform: rotate(-45deg); }
#menu-btn:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 4px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  header.header-mobile.rh-menu-anim,
  header.header-mobile #mainmenu > li,
  #menu-btn,
  #menu-btn::before,
  #menu-btn::after { transition: none !important; }
}

.footer-tagline {
  color: var(--brand-gold);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
}

/* ==================================================
   Pie: WhatsApp con el número y redes sociales
   ================================================== */
.rh-wa-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(var(--brand-gold-rgb), .55);
  color: var(--brand-gold);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.rh-wa-inline i { font-size: 20px; line-height: 1; }
.rh-wa-inline:hover,
.rh-wa-inline:focus-visible {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--brand-navy);
  transform: translateY(-2px);
}
.rh-wa-inline:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }

.rh-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rh-social a {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  color: #ffffff;
  font-size: 16px;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.rh-social a:hover,
.rh-social a:focus-visible {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--brand-navy);
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .rh-wa-inline,
  .rh-social a { transition: none; }
}

/* ==================================================
   Botón flotante de WhatsApp (views/layouts/_whatsapp.php)
   Verde oficial de WhatsApp: es el color por el que se reconoce al instante.
   ================================================== */
.rh-wa {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1030;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25D366;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  animation: rh-wa-pulse 3s ease-out infinite;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease, background-color .3s ease;
}
.rh-wa i {
  font-size: 32px;
  line-height: 1;
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
/* Etiqueta solo para lectores de pantalla: el icono ya identifica el botón */
.rh-wa-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Detalle de marca: anillo dorado que se abre al pasar el ratón */
.rh-wa::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--brand-gold);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .35s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.rh-wa:hover,
.rh-wa:focus-visible {
  color: #ffffff;
  background: #1EBE5A;
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .34);
  animation: none;
}
.rh-wa:hover::after,
.rh-wa:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}
.rh-wa:hover i {
  transform: rotate(-12deg) scale(1.08);
}
.rh-wa:focus-visible {
  outline: none;
}

/* Latido suave en dorado para llamar la atención sin tapar contenido */
@keyframes rh-wa-pulse {
  0%   { box-shadow: 0 10px 28px rgba(0, 0, 0, .28), 0 0 0 0 rgba(var(--brand-gold-rgb), .5); }
  70%  { box-shadow: 0 10px 28px rgba(0, 0, 0, .28), 0 0 0 16px rgba(var(--brand-gold-rgb), 0); }
  100% { box-shadow: 0 10px 28px rgba(0, 0, 0, .28), 0 0 0 0 rgba(var(--brand-gold-rgb), 0); }
}

/* El botón "volver arriba" sube para no solaparse con el de WhatsApp */
#back-to-top.show { bottom: 98px; }

/* Oculto mientras el menú móvil está desplegado */
html.rh-menu-lock .rh-wa {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 575.98px) {
  .rh-wa { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .rh-wa i { font-size: 28px; }
  #back-to-top.show { bottom: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .rh-wa,
  .rh-wa i,
  .rh-wa::after { animation: none; transition: none; }
}

@media print {
  .rh-wa { display: none; }
}