/* === Fondo transparente en la barra de contenido === */

#body-wrapper #body .content-title {

  background: transparent !important;

  box-shadow: none !important;

  border: none !important;

}



/* También el wrapper por si Quark lo pinta por herencia */

#body-wrapper #body .content-wrapper {

  background: transparent !important;

}



/* Asegura que el texto siga visible sobre fondos oscuros */

#body-wrapper #body .content-title h1,

#body-wrapper #body .content-title h2 {

  color: #fff !important; /* cámbialo según tu fondo */

}



/* === TARJETAS SF EXISTENTES === */

.sf-cards-wrapper {

  max-width: 1200px;

  width: 92%;

  margin: 0 auto 80px auto;

  color: #eaf6fb;

  font-family: Montserrat, Arial, sans-serif;

}



.sf-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  gap: 24px;

}



.sf-card-outer {

  perspective: 1000px;

  min-height: 200px;

}



.sf-inner {

  position: relative;

  width: 100%;

  height: 100%;

  transform-style: preserve-3d;

  transition: transform 0.6s;

  cursor: pointer;

}



.sf-card-outer:hover .sf-inner {

  transform: rotateX(180deg);

}



.sf-front, .sf-back {

  position: absolute;

  inset: 0;

  backface-visibility: hidden;

  border-radius: 18px;

  padding: 24px 22px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  box-shadow: 0 10px 26px rgba(0,0,0,.45);

}



.sf-front {

  background: rgba(7, 32, 48, 0.9);

  border: 1px solid rgba(255,255,255,.12);

  z-index: 2;

}



.sf-back {

  background: rgba(11, 65, 92, 0.96);

  border: 1px solid rgba(0, 240, 200, .45);

  transform: rotateX(180deg);

}



.sf-front div:first-child {

  font-weight: 800;

  font-size: 22px;

  margin-bottom: 10px;

}



.sf-front div:nth-child(2) {

  font-size: 15px;

  line-height: 1.4;

  color: #cfe9ff;

}



.sf-back div {

  font-size: 15px;

  line-height: 1.4;

  color: #eaf6fb;

}



/* === CABECERA Y MENÚ PRINCIPAL (NO ES FIJA) === */

.header {

  /* CAMBIADO A relative para que se desplace con el scroll */

  position: relative !important; 

  top: 0;

  margin-top: -40px;

  left: 0;

  right: 0;
  
  width: 100vw;

  margin-left: calc(50% - 50vw);

  margin-right: calc(50% - 50vw);

  height: 145px;

  background: rgba(9,33,41,0.3);

  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);

  border-bottom: 1px solid rgba(255,255,255,0.12);

  box-shadow: 0 4px 12px rgba(0,0,0,0.2);

  z-index: 9999;

  display: flex;

  align-items: flex-end;

  justify-content: center;

}


.header-inner {

  width: min(1200px, 92%);

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding-bottom: 5px;

}



.top-bar {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 16px;

}



.logo {

  display: flex;

  align-items: center;

  gap: 12px;

  text-decoration: none;

}



.logo img {

  height: 135px;

  width: auto;

  display: block;

}



.logo-text {

  display: flex;

  flex-direction: column;

  color: #ffffff;

  text-shadow: 0 2px 8px rgba(0,0,0,0.5);

  font-weight: 700;

    line-height: 1.2;

  font-family: Montserrat, Arial, sans-serif;

}



/* === MENÚ PRINCIPAL === */

nav {

  position: relative;

  display: flex;

  gap: 20px;

  align-items: center;

  margin-bottom: 22px;

  z-index: 100;

}



nav a {

  font: 600 18px/1 'Playfair Display', serif;

  color: #ffffff !important;

  text-decoration: none;

  padding: 10px 0;

  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);

  transition: color 0.3s ease;

}



/* 💥 CORRECCIÓN: Hover con Subrayado para todas las páginas 💥 */

nav a:hover {

  color: #aefaff !important; /* Color turquesa claro al hacer hover */

  text-decoration: underline !important; /* Asegura el subrayado */

  text-decoration-thickness: 3px !important; /* Grosor del subrayado */

  text-underline-offset: 4px !important; /* Separación del texto */

}



/* === SUBMENÚ ARMONIZADO === */

.menu-quienes {

  position: relative;

}



.submenu-quienes {

  display: none;

  position: absolute;

  top: 100%;

  left: 0;

  background: rgba(9,33,41,0.75);

  backdrop-filter: blur(4px);

  border: 1px solid rgba(255,255,255,0.08);

  box-shadow: 0 4px 8px rgba(0,0,0,0.2);

  min-width: 200px;

  padding: 5px 0;

  z-index: 1000;

}



.submenu-quienes a {

  display: block;

  padding: 10px 15px;

  font: 600 16px/1 'Playfair Display', serif;

  text-decoration: none;

  color: #ffffff !important;

    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

  transition: background 0.3s ease, color 0.3s ease;

}



/* 💥 CORRECCIÓN: Hover en el Submenú con Subrayado 💥 */

.submenu-quienes a:hover {

  background: rgba(255, 255, 255, 0.05);

  color: #aefaff !important; /* Color turquesa claro al hacer hover */

  text-decoration: underline !important; /* Asegura el subrayado en submenú */

}



/* Mostrar submenú al pasar el mouse */

.menu-quienes:hover .submenu-quienes {

  display: block !important;

}



/* === ESPACIADOR Y CONTENIDO PRINCIPAL === */

.spacer {

  /* Vuelve a la altura completa de la cabecera */

  height: 145px; 

}



.main-content {

  width: 100vw;

  margin-left: calc(50% - 50vw);

  margin-right: calc(50% - 50vw);

  /* Vuelve a usar la altura completa de la cabecera */

  min-height: calc(100vh - 145px); 

  display: flex;

  align-items: center;

    justify-content: center;

  background: linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.28)), url('/user/pages/01.home/water-6-min-optimized-ultra.g>  color: white;

  text-align: center;

  padding: 60px 20px;

}