/* ===== HEADER (igual que marcadores) ===== */
.page-template-page-sobrenosotros .custom-header,
.page-sobre-nosotros .custom-header {
  background-color: white;
  position: absolute;
}

.page-template-page-sobrenosotros .nav-menu li a,
.page-sobre-nosotros .nav-menu li a {
  color: #033840;
}

.page-template-page-sobrenosotros .nav-menu li.current-menu-item a,
.page-sobre-nosotros .nav-menu li.current-menu-item a,
.page-sobre-nosotros .nav-menu li a[href*="/contacto"]::before{
  background-color: #033840 !important;
  color: white !important;
}
.page-template-page-sobrenosotros .nav-menu li a:hover,
.page-sobre-nosotros .nav-menu li a:hover,
.page-sobre-nosotros .nav-menu li a[href*="/contacto"]:hover {
  background-color: #0e00da !important;
  color: white !important;
}

.page-template-page-sobrenosotros .login-icon a,
.page-template-page-sobrenosotros .cart-icon a,
.page-sobre-nosotros .login-icon a,
.page-sobre-nosotros .cart-icon a,
.page-sobre-nosotros .nav-menu li a[href*="/contacto"]::before,
.page-template-page-sobrenosotros .nav-menu li a[href*="/contacto"]::before{
  color: #033840;
}

.page-template-page-sobrenosotros .login-icon a:hover,
.page-template-page-sobrenosotros .cart-icon a:hover,
.page-sobre-nosotros .login-icon a:hover,
.page-sobre-nosotros .cart-icon a:hover,
.page-sobre-nosotros .nav-menu li a[href*="/contacto"]:hover,
.page-template-page-sobrenosotros .nav-menu li a[href*="/contacto"]:hover {
  background-color: #0e00da !important;
  color: white ;
}

/* ===== HERO (mismo patrón que marcadores con overlay ::before) ===== */
.page-template-page-sobrenosotros .sobre-nosotros-hero,
.page-sobre-nosotros .sobre-nosotros-hero {
  background-image: url('../images/lab4.webp'); /* ajusta si es .jpg */
  background-size: cover;
  background-position: center 70%;
  min-height: 75vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
  color: white;
  position: relative;
  overflow: hidden; /* para el overlay */
}
.page-template-page-sobrenosotros .hero-overlay {
  position: absolute;
  inset: 0;
  background:
radial-gradient(circle at top left, rgba(14, 0, 218, 0.4) 10%, transparent 40%),
radial-gradient(circle at 30% 10%, rgba(68, 223, 223, 0.4) 10%, transparent 40%),
radial-gradient(circle at 60% 10%, rgba(14, 0, 218, 0.4) 15%, transparent 40%),
  radial-gradient(circle at bottom right, rgba(68, 223, 223, 0.4) 10%, transparent 30%), 
  radial-gradient(circle at center, rgba(14, 0, 218, 0.2) 30%, transparent 50%),
radial-gradient(circle at 30% 80%, rgba(14, 0, 218, 0.3) 20%, transparent 30%),
  radial-gradient(circle at top right, rgba(0, 1, 1, 0.1) 15%, transparent 40%),
radial-gradient(circle at 65% 80%, rgba(68, 223, 223, 0.3) 10%, transparent 32%),
  radial-gradient(circle at bottom left, rgba(0, 1, 1, 0.1) 20%, transparent 40%),
rgba(4, 38, 43, 0.2);
  opacity: 0.85; /* ajusta si necesitas más transparencia */
  z-index: 1;
}
.page-template-page-sobrenosotros .sobre-nosotros-hero::before,
.page-sobre-nosotros .sobre-nosotros-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(5, 1, 62, 0.35); /* tu velo; puedes subir/bajar opacidad */
  z-index: 1;
}

.page-template-page-sobrenosotros .sobre-nosotros-hero .hero-content,
.page-sobre-nosotros .sobre-nosotros-hero .hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
    margin: 0;
  text-align: center;
}

.page-template-page-sobrenosotros .sobre-nosotros-hero h1,
.page-sobre-nosotros .sobre-nosotros-hero h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.page-template-page-sobrenosotros .sobre-nosotros-hero p,
.page-sobre-nosotros .sobre-nosotros-hero p {
  font-size: 30px;
  margin-bottom: 5rem;
  margin-top: 0.5rem;
}


.sobre-nosotros-intro {
  padding: 5rem 2rem;
  background-color: #fff;
}

.sobre-nosotros-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.sobre-nosotros-intro h2 {
  font-size: 2.5rem;
  font-weight: 800;
  color: #11c1bb; /* turquesa */
  margin-bottom: 0.5rem;
}

.sobre-nosotros-intro h3 {
  font-size: 1.5rem;
  color: #11c1bb;
  margin-bottom: 2rem;
}

.sobre-nosotros-intro p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #033840;
  text-align: justify;
}

.sobre-nosotros-intro .intro-image img {
  width: 100%;
  border-radius: 10px;
}

.sobre-nosotros-mision-vision {
  padding: 5rem 2rem;
  background-color: #fff;
}

.mision-vision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.mv-card {
  background-color: #033840; /* verde oscuro */
  color: #fff;
  padding: 2.5rem;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.mv-card:hover {
  transform: translateY(-8px);
}

.mv-card h3 {
  font-size: 2rem;
  color: #11c1bb; /* turquesa */
  margin-bottom: 1.2rem;
}

.mv-card p {
  font-size: 1.05rem;
  line-height: 1.7;
  text-align: justify;
}
.sobre-nosotros-credenciales {
  padding: 4rem 2rem;
  background-color: #fff;
}

.credenciales-card {
  background-color: #033840; /* verde oscuro */
  border-radius: 25px;
  padding: 3rem 2rem;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
}

.credenciales-card h2 {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2rem;
}

.credenciales-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.cred-item h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #11c1bb; /* turquesa */
  margin-bottom: 0.5rem;
}

.cred-item p {
  font-size: 1.1rem;
  color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
  .credenciales-grid {
    grid-template-columns: 1fr;
  }
}

.sobre-nosotros-valores {
  padding: 5rem 1rem;
  background: #fff;
  text-align: center;
}

.valores-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #11c1bb; /* turquesa */
  margin-bottom: 3rem;
}

/* Contenedor */
.valores-wrap {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
.valores-wrap img {
width: 80%;
    height: auto;
    display: block;
    margin: 6rem auto 0 auto;
}
/* Etiquetas encima de la curva */
.valores-labels {
  list-style: none;
  margin: 0;
  padding: 0;
}
.valores-labels .v {
  position: absolute;
  transform: translate(-50%, -50%);
  font-weight: 400;
  font-size: clamp(1rem, 2vw + .2rem, 1.6rem);
  white-space: nowrap;
}
.v.compromiso   { left: 17%; top: 45%; color: #11c1bb; }
.v.calidad      { left: 32.5%; top: 25%; color: #2f6bff; }
.v.etica        { left: 47%; top: 50%; color: #1c2bd6; }
.v.excelencia   { left: 62%; top: 32%; color: #0d1e59; }
.v.accesibilidad{ left: 82%; top: 50%; color: #033840; }

/* Responsive */
/* ===========================
   TABLETS (≤ 1024px)
   =========================== */
@media (max-width: 1024px) {
  /* Hero */
  .page-template-page-sobrenosotros .sobre-nosotros-hero,
  .page-sobre-nosotros .sobre-nosotros-hero {
    min-height: 60vh;
    align-items: flex-end;
    padding: 0 24px;
  }
  .page-template-page-sobrenosotros .sobre-nosotros-hero h1,
  .page-sobre-nosotros .sobre-nosotros-hero h1 {
    font-size: 2.4rem;
  }
  .page-template-page-sobrenosotros .sobre-nosotros-hero p,
  .page-sobre-nosotros .sobre-nosotros-hero p {
    font-size: 1.25rem; /* ~20px */
    margin-bottom: 3rem;
  }

  /* Grids → 1 columna para dar aire */
  .sobre-nosotros-grid,
  .mision-vision-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 900px;
  }

  /* Tarjetas MV */
  .mv-card {
    padding: 2rem;
  }
  .mv-card h3 {
    font-size: 1.75rem;
  }
  .mv-card p {
    font-size: 1rem;
  }

  /* Credenciales: 3 → 2 columnas */
  .credenciales-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  /* Valores: imagen más grande y posiciones suavizadas */
  .valores-wrap img {
    width: 90%;
    margin-top: 4rem;
  }
  .valores-labels .v {
    font-size: clamp(1rem, 1.8vw + .2rem, 1.4rem);
  }
  /* Ajustes leves de posición para tablet */
  .v.compromiso   { left: 18%; top: 48%; }
  .v.calidad      { left: 33%; top: 30%; }
  .v.etica        { left: 50%; top: 53%; }
  .v.excelencia   { left: 66%; top: 36%; }
  .v.accesibilidad{ left: 84%; top: 53%; }
}

/* ===========================
   TELÉFONOS (≤ 768px)
   =========================== */
@media (max-width: 768px) {
  /* Header flotante sobre hero — deja respiro arriba */
  .page-template-page-sobrenosotros .sobre-nosotros-hero,
  .page-sobre-nosotros .sobre-nosotros-hero {
    min-height: 52vh;
    padding-top: 5rem; /* por si el header se superpone */
    padding-left: 18px;
    padding-right: 18px;
  }
  .page-template-page-sobrenosotros .sobre-nosotros-hero h1,
  .page-sobre-nosotros .sobre-nosotros-hero h1 {
    font-size: 2rem;
    margin-bottom: .5rem;
  }
  .page-template-page-sobrenosotros .sobre-nosotros-hero p,
  .page-sobre-nosotros .sobre-nosotros-hero p {
    font-size: 1.05rem;
    margin-bottom: 2rem;
  }

  /* Intro */
  .sobre-nosotros-intro { padding: 3.5rem 1.25rem; }
  .sobre-nosotros-intro h2 { font-size: 2rem; }
  .sobre-nosotros-intro h3 { font-size: 1.25rem; margin-bottom: 1.25rem; }
  .sobre-nosotros-intro p { font-size: 1rem; line-height: 1.65; }
  .sobre-nosotros-intro .intro-image img { border-radius: 12px; }

  /* Misión / Visión */
  .sobre-nosotros-mision-vision { padding: 3.5rem 1.25rem; }
  .mision-vision-grid { gap: 1.5rem; }
  .mv-card { padding: 1.5rem; border-radius: 14px; }
  .mv-card h3 { font-size: 1.5rem; }
  .mv-card p { font-size: .98rem; }

  /* Credenciales: 2 → 1 columna en móviles */
  .credenciales-card { padding: 2rem 1.25rem; border-radius: 18px; }
  .credenciales-card h2 { font-size: 1.6rem; margin-bottom: 1.25rem; }
  .credenciales-grid { grid-template-columns: 1fr; gap: 1rem; }
  .cred-item h3 { font-size: 1.35rem; }
  .cred-item p { font-size: 1rem; }

  /* Valores */
  .sobre-nosotros-valores { padding: 3.5rem 1rem; }
  .valores-title { font-size: 1.8rem; margin-bottom: 2rem; }
  .valores-wrap img { width: 100%; margin-top: 2.5rem; }

  /* Mantén etiquetas sobre la curva pero más centradas y con toques de top */
  .valores-labels .v { font-weight: 500; }
  .v.compromiso   { left: 20%; top: 50%; }
  .v.calidad      { left: 35%; top: 34%; }
  .v.etica        { left: 50%; top: 56%; }
  .v.excelencia   { left: 66%; top: 38%; }
  .v.accesibilidad{ left: 83%; top: 56%; }
}

/* ===========================
   TELÉFONOS PEQUEÑOS (≤ 480px)
   =========================== */
@media (max-width: 480px) {
  /* Hero compacto */
  .page-template-page-sobrenosotros .sobre-nosotros-hero,
  .page-sobre-nosotros .sobre-nosotros-hero {
    min-height: 46vh;
    padding-top: 4.5rem;
  }
  .page-template-page-sobrenosotros .sobre-nosotros-hero h1,
  .page-sobre-nosotros .sobre-nosotros-hero h1 {
    font-size: 1.7rem;
  }
  .page-template-page-sobrenosotros .sobre-nosotros-hero p,
  .page-sobre-nosotros .sobre-nosotros-hero p {
    font-size: .98rem;
    margin-bottom: 1.5rem;
  }

  /* Texto general */
  .sobre-nosotros-intro h2 { font-size: 1.7rem; }
  .sobre-nosotros-intro h3 { font-size: 1.1rem; }
  .sobre-nosotros-intro p  { font-size: .98rem; text-align: left; }

  /* MV cards */
  .mv-card { padding: 1.25rem; }
  .mv-card h3 { font-size: 1.25rem; }
  .mv-card p { font-size: .95rem; }

  /* Credenciales */
  .credenciales-card { padding: 1.5rem 1rem; }
  .credenciales-card h2 { font-size: 1.4rem; }
  .cred-item h3 { font-size: 1.2rem; }
  .cred-item p { font-size: .98rem; }

  /* Valores: si el overlay molesta, apila etiquetas como lista legible */
  .valores-wrap { max-width: 100%; }
  .valores-wrap img { width: 100%; margin-top: 1.75rem; }

  /* Cambia las etiquetas absolutas a flujo normal para máxima legibilidad */
  .valores-labels { 
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem .75rem;
    margin-top: 1rem;
  }
  .valores-labels .v {
    position: static;
    transform: none;
    text-align: center;
    padding: .35rem .5rem;
    border-radius: 10px;
    background: rgba(3,56,64,0.06);
    font-size: 1rem;   /* mantiene legibilidad */
  }
  /* Opcional: prioriza orden visual */
  .v.compromiso { order: 1; }
  .v.calidad { order: 2; }
  .v.etica { order: 3; }
  .v.excelencia { order: 4; }
  .v.accesibilidad { order: 5; }
}