/* ===== QUIENES ===== */
.wrap-about {
	background: var(--section-bg); /* Usa variable */
	padding: 56px 0;
}

.about-title,
.about-subtitle {
	font-size: clamp(26px, 4vw, 36px);
	font-weight: 900;
	margin-bottom: 12px;
	position: relative;
	display: inline-block;
	
}

.about-title::after,
.about-subtitle::after {
	content: "";
	display: block;
	width: 140px;
	height: 4px;
	background: var(--red);
	border-radius: 999px;
	margin-top: 6px;
}

.about-text {
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--text-secondary); /* Usa variable */
	margin: 0 0 20px;
}


.reveal-animation {
	overflow: hidden;
	position: relative;
}


/* Animaciones de revelado */
.reveal-animation {
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.80s ease-out;
	margin-bottom: 40px;
}

.reveal-animation.animated {
	opacity: 1;
	transform: translateY(0);
}

/* Efecto de aparición por palabras (opcional) */
.about-text {
	overflow: hidden;
}

.about-text span {
	opacity: 0;
	transition: opacity 0.3s ease-out;
}

.about-text.animated span {
	opacity: 1;
}

/* === FIX INSTANTÁNEO: sin invert, negro puro y sin líneas === */

/* 7) Eliminar el "pelo" blanco entre bloques */
img,picture,video,canvas{ display:block; }         /* sin gap baseline */
section{ margin-block:0; }                          /* sin colapso márgenes */
section>*:first-child{ margin-top:0; }
section>*:last-child{  margin-bottom:0; }

/* ==== Estilo moderno para la sección QUIÉNES SOMOS ==== */
#quienes {
    padding: 60px 20px;
    background: var(--bg); /* Usa variable */
}

/* Títulos */
#quienes .about-title {
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 900;
    color: var(--text-primary); /* Usa variable */
    margin-bottom: 14px;
    position: relative;
    display: inline-block;
}

#quienes .about-title::after {
    content: "";
    display: block;
    width: 90px;
    height: 3px;
    background-color: var(--red);
    border-radius: 999px;
    margin-top: 6px;
}

/* Párrafos */
#quienes .about-text {
    color: var(--text-secondary); /* Usa variable */
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 24px;
    text-align: justify;
}

/* Palabras clave: más sutil */
#quienes .about-text strong {
    color: var(--red);
    font-weight: 700;
}

/* Animación suave */
#quienes .reveal-animation {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

#quienes .reveal-animation.animated {
    opacity: 1;
    transform: translateY(0);
}

/* ===== WHO / QUIÉNES SOMOS (header encima de las tarjetas) ===== */
.who-wrap {
  max-width: 1120px;
  margin: 0 auto 22px;
  padding: 18px;
}

.who-card {
  background: var(--card-bg); /* Usa variable */
  color: var(--text-primary);
  border-radius: 18px;
  padding: 24px 28px;
  box-shadow: var(--shadow);
  transition: background .25s ease, color .25s ease, box-shadow .25s ease,
              transform .20s ease;
  border: 1px solid rgba(0,0,0,0.03);
}

/* pequeño efecto hover cuando se mueva el mouse (opcional) */
.who-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,0.08); }

/* Título grande estilo Canva */
.who-title {
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin: 0 0 10px;
  display: inline-block;
  position: relative;
  color: var(--text-primary);
}

/* barra roja debajo del título (centrada respecto al texto) */
.who-title::after {
  content: "";
  display: block;
  width: 48%;
  max-width: 260px;
  height: 4px;
  background: var(--red);
  margin-top: 10px;
  border-radius: 999px;
}

/* Párrafo explicativo dentro de la tarjeta (texto tipo lead) */
.who-lead {
  margin: 10px 0 0;
  font-size: 0.99rem;
  line-height: 1.65;
  color: var(--text-secondary); /* Usa variable */
  text-align: justify;
  text-justify: inter-word;
}

/* ===== Dark mode (bloque vacío) ===== */


.info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.info-card {
  background: var(--card-bg); /* Usa variable */
  border-radius: 14px;
  padding: 28px 22px;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
  text-align: center;
  color: var(--text-primary);
}

.info-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}

.info-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 10px;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
}

.info-card h3::after {
  content: "";
  display: block;
  width: 60%;
  height: 3px;
  background: var(--red);
  margin: 6px auto 0;
  border-radius: 2px;
}

.info-card p {
  font-size: 0.95rem;
  color: var(--text-secondary); /* Usa variable */
  line-height: 1.6;
  text-align: justify;
  text-justify: inter-word;
  line-height: 1.6;
}