/* Estilos específicos para la página Nosotros */
.about-hero {
  padding: 4rem 0 2rem;
  background: linear-gradient(180deg, rgba(30,58,138,0.04), rgba(5,150,105,0.02));
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 2rem;
  align-items: center;
}
.hero-content .section-tag { display:block; margin-bottom: .5rem; }
.hero-media img { width:100%; height:auto; border-radius: .75rem; box-shadow: var(--shadow-md); }
.lead-text { font-size: 1.18rem; color: var(--text-secondary); margin-bottom: 1.5rem; line-height: 1.9; }
.cards-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin: 3rem 0; }
/* Unified mission+vision card */
.mission-vision-box { padding: 2.25rem; border-radius: var(--radius-md); box-shadow: var(--shadow-md); border: 1px solid rgba(2,6,23,0.04); position: relative; overflow: hidden; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: var(--text-inverse); }
.mission-vision-box p { font-size: 1.50rem; line-height: 2.1; color: inherit; margin: 0 0 1rem 0; }
.mission-icon,
.vision-icon {
  /* Use a fixed square area and center the glyph to avoid visual size differences
     between platform emoji renderers. Increase font-size so icons are prominent. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  font-size: 3.5rem; /* explicit font-size to force parity */
  line-height: 1;
  margin-bottom: 0.75rem;
  /* Prefer common color emoji fonts but allow fallbacks */
  font-family: 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', 'Twemoji Mozilla', sans-serif;
  vertical-align: middle;
}

/* Headings inside unified card: keep clear hierarchy and spacing */
.mission-vision-box h3 {
  font-size: 1.75rem;
  margin: 0 0 1rem 0;
  color: var(--text-inverse);
  font-weight: 700;
}
.mission-vision-box .vision-title {
  margin-top: 1.5rem; /* espacio entre misión y visión */
}

/* Vision box: usar fondo oscuro y texto blanco para contraste */
/* legacy .vision-box left in place but not used; unified card is .mission-vision-box */

/* Alineación consistente: centrar contenido de ambas tarjetas */
/* Alinear a la izquierda para ambas tarjetas (consistencia) */
.mission-vision-box {
  text-align: left;
}

/* Copiar la animación presente en .mission-box::before a .vision-box::before */
.mission-vision-box::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  animation: rotate 20s linear infinite;
}

.values-section { margin-top: 2.25rem; }
.values-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.values-list li { background: white; padding: 1.1rem 1.5rem; border-radius: .5rem; border: 1px solid rgba(2,6,23,0.03); box-shadow: var(--shadow-sm); font-size: 1.08rem; line-height: 1.8; }

/* Homogenize non-heading text across the page (excludes mission/vision body to preserve larger size) */
/* Note: exclude .about-core p so mission/vision paragraphs keep their larger size */
.about-core, .about-hero .section-description, .about-hero .lead-text, .values-list li {
  font-size: 1.12rem;
  line-height: 1.85;
  color: var(--text-secondary);
}

/* CTA alignment */
.hero-content .cta-group { margin-top: 1rem; display:flex; gap: .75rem; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .cards-grid { grid-template-columns: 1fr; }
  .values-list { grid-template-columns: 1fr; }
  .hero-media { order: -1; margin-bottom: 1rem; }
}

/* Reduce mission/vision body size slightly on small screens for better fit */
@media (max-width: 600px) {
  .mission-vision-box p {
    /* slightly smaller on small screens for better fit */
    font-size: 1.15rem;
    line-height: 1.95;
  }
}

/* CTA at bottom */
.page-cta { margin-top: 2rem; display:flex; justify-content:center; }
.page-cta .cta-group { justify-content:center; }

/* --- Forzar tamaño y line-height coherente para Misión y Visión --- */
/* Regla específica para evitar que otras hojas sobrescriban el tamaño */
.about-core .cards-grid .mission-vision-box p {
  font-size: 1.50rem;   /* tamaño desktop solicitado */
  line-height: 2.10;    /* espacio vertical para mejor lectura */
  color: inherit;
  margin: 0 0 1rem 0;
}

/* Ajuste responsivo: reducir en móviles para evitar reflow excesivo */
@media (max-width: 600px) {
  .about-core .cards-grid .mission-box p,
  .about-core .cards-grid .vision-box p {
    font-size: 1.15rem;
    line-height: 1.95;
  }
}

/* Force left alignment with high specificity to override global .mission-box centering */
.about-core .cards-grid .mission-box,
.about-core .cards-grid .vision-box,
.about-core .cards-grid .mission-box h3,
.about-core .cards-grid .vision-box h3,
.about-core .cards-grid .mission-box p,
.about-core .cards-grid .vision-box p {
  text-align: left !important;
}

/* Specific override for icon size inside the about section to beat global rules */
.about-core .cards-grid .mission-vision-box .mission-icon,
.about-core .cards-grid .mission-vision-box .vision-icon {
  /* Strong override to ensure both icons use the same sizing on this page */
  font-size: 3.5rem !important;
  width: 3.5rem !important;
  height: 3.5rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ---- Solución definitiva al parpadeo de la barra de desplazamiento ----
   Explicación: en algunas configuraciones las animaciones con translateY y
   pseudo-elementos pueden causar un overflow visual temporal que muestra la
   barra vertical mientras se animan los elementos. Para eliminar el parpadeo
   de forma segura en esta página aplicamos dos medidas:
   1) Forzar la presencia de la barra vertical (evita cambio visual cuando
      aparece/desaparece). 2) Contener animaciones dentro de sus contenedores
      y dar hints al navegador para compositing.
   Si prefieres no tener la barra siempre visible, puedo en su lugar encapsular
   cada elemento animado en un contenedor con overflow:hidden (requiere editar
   HTML o reglas más específicas).
*/

/* Forzar scrollbar vertical siempre visible en esta página para evitar parpadeos */
html, body {
  overflow-y: scroll !important;
}

/* Contener animaciones dentro de los bloques principales para que no causen
   overflow visual (evita que pseudo-elementos o transformaciones provoquen
   scroll temporal). */
.about-hero, .hero, .page-cta, .cta-group, .hero__content, .hero__stats {
  overflow: hidden;
}

/* Indicar al navegador que estas propiedades cambiarán (mejora rendimiento y
   reduce repaints que puedan contribuir al salto) */
.hero__badge, .hero__title, .hero__lead, .hero__stats, .cta-group, .btn {
  will-change: transform, opacity;
}