/* RAE Soluciones — capa compartida del sitio.
   Se carga DESPUES del <style> propio de cada pagina, asi que gana en empates.
   Aqui viven: cabecera, navegacion (incluido el menu movil sin JavaScript),
   pie, y los arreglos responsivos que el boceto no tenia. */

:root {
  --accent: #f37029;
  --navy: #122943;
  --tinta: #17263b;
  --gris: #5b6472;
  --linea: #eef1f4;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

img { max-width: 100%; height: auto; }

/* Enlace de salto: invisible hasta que se llega con el teclado.
   Se recorta con clip en vez de mandarlo a left:-9999px — sacarlo del lienzo
   ensancha el documento y provoca barra horizontal en el telefono. */
.saltar {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.saltar:focus {
  position: fixed; top: 0; left: 0; z-index: 100;
  width: auto; height: auto; margin: 0; padding: 12px 18px;
  overflow: visible; clip: auto; clip-path: none;
  background: var(--navy); color: #fff; border-radius: 0 0 8px 0;
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px;
}

/* ---------- CABECERA ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--linea);
}
.site-bar {
  max-width: 1180px; margin: 0 auto; padding: 14px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.site-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.site-brand span {
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 19px;
  letter-spacing: 1px; color: var(--accent);
}
.site-brand img { height: 32px; width: auto; display: block; }

/* OJO CON LA ESPECIFICIDAD, que aqui ya nos mordio una vez (los botones que se
   veian naranja sobre naranja): cada pagina trae `.rae-root a:not(.rae-btn)`
   con color naranja, y eso pesa (0,2,1) porque el :not() cuenta su argumento.
   Un `.site-nav a` (0,1,1) PIERDE aunque se cargue despues. Por eso las reglas
   de enlace de la cabecera y el pie van prefijadas con .rae-root. */
.site-nav {
  display: flex; align-items: center; gap: 26px;
  font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 14.5px;
}
.rae-root .site-nav a {
  color: var(--gris); text-decoration: none; white-space: nowrap;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.rae-root .site-nav a:hover { color: var(--tinta); }
.rae-root .site-nav a.activo { color: var(--tinta); border-bottom-color: var(--accent); }

.site-acciones { display: flex; align-items: center; gap: 18px; flex: none; }
.rae-root a.site-tel {
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px;
  color: var(--tinta); text-decoration: none; white-space: nowrap;
}
.rae-root a.site-brand { text-decoration: none; }
.site-cta { padding: 11px 20px; font-size: 14px; }

/* Menu movil: casilla oculta + etiqueta. Sin JavaScript, no se puede romper. */
.menu-toggle { position: absolute; opacity: 0; pointer-events: none; }
.menu-boton { display: none; }

/* El corte del menu esta en 1200 POR MEDIDA, no por gusto: con los seis
   apartados, la marca, el telefono y el boton, la barra pide ~1185px. Se probo
   1100 y a 1101, 1150 y 1180 seguia sacando barra horizontal. Si algun dia se
   anade un apartado mas al menu, este numero hay que volver a medirlo. */
@media (max-width: 1400px) and (min-width: 1201px) {
  .site-nav { gap: 16px; font-size: 13.5px; }
  .site-acciones { gap: 12px; }
  .site-cta { padding: 11px 14px; font-size: 13.5px; }
  .rae-root a.site-tel { font-size: 13.5px; }
}

@media (max-width: 1200px) {
  .site-bar { flex-wrap: wrap; padding: 12px 20px; gap: 12px; }

  .menu-boton {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; cursor: pointer;
    border: 1px solid var(--linea); border-radius: 8px; background: #fff;
    margin-left: auto;
  }
  .menu-boton span {
    display: block; height: 2px; width: 100%; background: var(--tinta); border-radius: 2px;
  }

  .site-nav {
    display: none; order: 3; flex-basis: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    border-top: 1px solid var(--linea); margin-top: 4px;
  }
  .site-nav a {
    padding: 13px 2px; border-bottom: 1px solid var(--linea); font-size: 15px;
  }
  .site-nav a.activo { border-bottom-color: var(--linea); color: var(--accent); }
  .menu-toggle:checked ~ .site-nav { display: flex; }
  .menu-toggle:focus-visible ~ .menu-boton { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* La cabecera es pegajosa: si el boton de accion se queda siempre visible se
     come ~90px de una pantalla de 844 durante todo el desplazamiento. Viaja
     dentro del menu, junto al telefono, que en movil tambien vale la pena. */
  .site-acciones {
    display: none; order: 4; flex-basis: 100%;
    flex-direction: column; align-items: stretch; gap: 12px;
    padding-bottom: 6px;
  }
  .menu-toggle:checked ~ .site-acciones { display: flex; }
  .rae-root a.site-tel { display: block; text-align: center; font-size: 15px; }
  .site-cta { width: 100%; }
}

/* ---------- AJUSTES RESPONSIVOS QUE EL BOCETO NO TRAIA ---------- */

@media (max-width: 900px) {
  .rae-container { padding-left: 20px; padding-right: 20px; }
  .rae-root h1 { font-size: 32px !important; line-height: 1.15 !important; letter-spacing: -.5px !important; }
  .rae-root h2 { font-size: 26px !important; line-height: 1.2 !important; }
  .rae-root section { padding-left: 0; padding-right: 0; }

  /* El boceto se dibujo a 1440px con filas flex de ancho holgado. En el telefono
     esas filas se salen, y NO es culpa del ancho: los hijos de un contenedor
     flex traen min-width:auto de fabrica, asi que se niegan a encoger por
     debajo de su contenido. Devolverles min-width:0 los deja ceder y envolver.
     Es la causa, no el sintoma: por eso no se esconde con overflow-x:hidden. */
  .rae-root [style*="display:flex"],
  .rae-root [style*="display:flex"] > * { min-width: 0; }
  .rae-root [style*="justify-content:space-between"] { flex-wrap: wrap; gap: 6px; }
  .rae-root [style*="white-space:nowrap"] { white-space: normal !important; }

  /* El boceto fija a mano min-width:320px y 300px en cuatro columnas. Con los
     20px de relleno a cada lado, en una pantalla de 320 eso pide 360 y saca la
     barra horizontal. Los anchos minimos escritos a mano no sobreviven al
     telefono pequeno. */
  .rae-root [style*="min-width:320px"],
  .rae-root [style*="min-width:300px"] { min-width: 0 !important; }
}

/* Las rejillas del boceto son de 2 y 3 columnas, dibujadas a 1440px. En un
   telefono de 390px una tarjeta con icono + texto no cabe en media columna:
   la caja mide 350 y el contenido pide 405, y eso es exactamente la barra
   horizontal. En pantalla estrecha van en una sola columna.
   El pie no entra aqui: usa clases propias, no estilos en linea. */
@media (max-width: 820px) {
  .rae-root [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 600px) {
  .rae-root h1 { font-size: 28px !important; }
  .rae-btn { width: 100%; }
}

/* ---------- FORMULARIO ---------- */

.rae-field input, .rae-field textarea, .rae-field select { font-family: 'Karla', sans-serif; }
.rae-field input:focus, .rae-field textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.form-nota { font-size: 13px; color: var(--gris); margin-top: 14px; }
.form-nota a { color: var(--accent); }

/* ---------- PIE ---------- */

.site-footer {
  background: var(--navy); color: #c3cbd6; margin-top: 0;
  font-family: 'Karla', sans-serif;
}
/* Tres columnas, no cuatro: la de "Donde estamos" se retiro a proposito.
   RAE no tiene ubicacion fisica de atencion y el domicilio fiscal es una casa
   particular, asi que la direccion de calle NO va en el sitio. No volver a
   anadirla "para el SEO local": la cobertura se dice por ciudad. */
.site-footer-grid {
  max-width: 1180px; margin: 0 auto; padding: 56px 32px 32px;
  display: grid; grid-template-columns: 1.6fr 1fr 1.1fr; gap: 48px;
}
.site-footer h3 {
  font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: #7a8492;
  margin: 0 0 16px;
}
.rae-root .site-footer a, .site-footer span {
  display: block; font-size: 14.5px; color: #c3cbd6; text-decoration: none;
  margin-bottom: 11px; line-height: 1.5;
}
.rae-root .site-footer a:hover { color: #fff; }
.site-footer-lema { font-size: 14.5px; color: #8d97a5; line-height: 1.6; margin: 16px 0 0; max-width: 320px; }
.site-footer-grid img { height: 36px; width: auto; display: block; }

.site-footer-legal {
  max-width: 1180px; margin: 0 auto; padding: 22px 32px 30px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
}
.site-footer-legal p, .rae-root .site-footer-legal a {
  font-size: 13px; color: #7a8492; margin: 0; text-decoration: none; display: inline;
}
.rae-root .site-footer-legal a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 900px) {
  .site-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; padding: 40px 20px 24px; }
  .site-footer-legal { padding: 20px; }
}
@media (max-width: 560px) {
  .site-footer-grid { grid-template-columns: 1fr; }
}