/* =========================================================
COSMO-VÍA · “Quiénes somos” (page ID 202)
Pegar en: Apariencia → Personalizar → CSS adicional
(o Elementor → Configuración de la página → CSS personalizado, si tenés Pro)

Todo está scopeado a .page-id-202: no afecta ninguna otra página.
Los colores se leen de los Global Colors del Kit de Elementor, así que
si cambiás la paleta en Site Settings, esta página cambia sola.
========================================================= */

/* ———- 1. Tokens · lo único que necesitás editar ———- */
.page-id-202 {
/* Acento dorado (el mismo gradiente que ya usan tus botones) */
–cv-gold-1: #F3C660;
–cv-gold-2: #FBB03B;
–cv-lila: #E5CEFE;

/* Texto y títulos: heredados del Kit, con fallback */
–cv-ink: var(–e-global-color-text, #F5F5F5);
–cv-title: var(–e-global-color-primary, #FFFFFF);

/* Superficie de las tarjetas.
>>> SI EL FONDO DEL HOME ES CLARO, cambiá estas dos líneas por:
–cv-card-bg: rgba(0,0,0,.035); –cv-card-bd: rgba(0,0,0,.10); */
–cv-card-bg: rgba(255, 255, 255, .045);
–cv-card-bd: rgba(255, 255, 255, .12);

–cv-radius: 20px;
–cv-pill: 60px;
}

/* ———- 2. Tipografía ———- */
.page-id-202 .cv-hero-title {
font-size: clamp(2.1rem, 5vw, 3.4rem);
line-height: 1.12;
font-weight: 600;
letter-spacing: -0.5px;
max-width: 20ch;
margin-inline: auto;
color: var(–cv-title);
}

.page-id-202 .cv-h2 {
font-size: clamp(1.6rem, 3.4vw, 2.4rem);
line-height: 1.2;
font-weight: 600;
letter-spacing: -0.3px;
color: var(–cv-title);
}

/* Subrayado dorado corto debajo de cada H2 */
.page-id-202 .cv-h2 .elementor-heading-title::after {
content: “”;
display: block;
width: 56px;
height: 3px;
margin: 18px auto 0;
border-radius: 3px;
background: linear-gradient(90deg, var(–cv-gold-1), var(–cv-gold-2));
}

.page-id-202 .cv-h3 .elementor-heading-title,
.page-id-202 .cv-founder-name .elementor-heading-title {
font-size: clamp(1.15rem, 2vw, 1.45rem);
line-height: 1.3;
font-weight: 600;
color: var(–cv-title);
}

.page-id-202 .cv-lead {
font-size: clamp(1rem, 1.6vw, 1.18rem);
line-height: 1.7;
max-width: 62ch;
margin-inline: auto;
color: var(–cv-ink);
}

.page-id-202 .cv-body,
.page-id-202 .cv-body p {
font-size: 1rem;
line-height: 1.75;
text-align: left; /* mata el justificado que hacía “ríos” en mobile */
color: var(–cv-ink);
}

.page-id-202 .cv-body p + p { margin-top: .85em; }

/* ———- 3. Grillas (reemplazan el flex del container) ———- */
.page-id-202 .cv-grid.e-con {
display: grid;
width: 100%;
align-items: stretch;
}

.page-id-202 .cv-grid-3.e-con { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-id-202 .cv-grid-2.e-con { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1024px) {
.page-id-202 .cv-grid-3.e-con { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
.page-id-202 .cv-grid-3.e-con,
.page-id-202 .cv-grid-2.e-con { grid-template-columns: 1fr; }
}

/* ———- 4. Tarjetas ———- */
.page-id-202 .cv-card.e-con {
background: var(–cv-card-bg);
border: 1px solid var(–cv-card-bd);
border-radius: var(–cv-radius);
backdrop-filter: blur(6px);
transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
height: 100%;
}

.page-id-202 .cv-card.e-con:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(–cv-gold-1) 55%, transparent);
box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55);
}

/* Glifos astrológicos de las tarjetas (SVG inline, sin librería de iconos) */
.page-id-202 .cv-card-icon svg.cv-glyph {
display: block;
width: 34px;
height: 34px;
color: var(–cv-gold-2);
}

/* ———- 5. Fundadores: foto + chips ———- */
.page-id-202 .cv-avatar img {
width: 170px;
height: 170px;
object-fit: cover;
border-radius: 50%;
border: 3px solid transparent;
background:
linear-gradient(var(–cv-card-bg), var(–cv-card-bg)) padding-box,
linear-gradient(208deg, var(–cv-gold-1) 26%, var(–cv-gold-2) 73%) border-box;
box-shadow: 0 10px 30px -12px rgba(251, 176, 59, .45);
}

.page-id-202 .cv-chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin: 0;
}

.page-id-202 .cv-chips span {
display: inline-block;
padding: 5px 13px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(–cv-lila) 45%, transparent);
background: color-mix(in srgb, var(–cv-lila) 10%, transparent);
color: var(–cv-lila);
font-size: .8rem;
font-weight: 500;
letter-spacing: .2px;
line-height: 1.4;
white-space: nowrap;
}

/* Glifo del signo dentro de cada chip (♈ ♉ ♊ …) */
.page-id-202 .cv-chips i {
font-style: normal;
margin-right: 7px;
font-size: 1.05em;
color: var(–cv-gold-1);
font-family: “Apple Symbols”, “Segoe UI Symbol”, “Noto Sans Symbols 2”,
“DejaVu Sans”, sans-serif;
}

/* ———- 6. Botones ———- */
.page-id-202 .cv-btn .elementor-button {
border-radius: var(–cv-pill);
padding: 14px 30px;
font-weight: 600;
font-size: .97rem;
letter-spacing: .2px;
border: 1.5px solid transparent;
transition: transform .22s ease, box-shadow .22s ease,
background .22s ease, color .22s ease, border-color .22s ease;
will-change: transform;
}

.page-id-202 .cv-btn .elementor-button:hover {
transform: translateY(-2px);
}

/* Primario: el gradiente dorado de la marca */
.page-id-202 .cv-btn-primary .elementor-button {
background: linear-gradient(208deg, var(–cv-gold-1) 26%, var(–cv-gold-2) 73%);
color: #201603;
box-shadow: 0 10px 26px -14px rgba(251, 176, 59, .8);
}

/* Hover corregido: el gradiente que tenías era inválido
(linear-gradient(180deg, #E5CEFE 100%, #FFFFFF 53%) → stops al revés) */
.page-id-202 .cv-btn-primary .elementor-button:hover {
background: linear-gradient(180deg, #FFFFFF 0%, var(–cv-lila) 100%);
color: #16111f;
box-shadow: 0 14px 30px -14px rgba(229, 206, 254, .75);
}

/* Secundario / fantasma */
.page-id-202 .cv-btn-ghost .elementor-button {
background: transparent;
color: var(–cv-lila);
border-color: color-mix(in srgb, var(–cv-lila) 55%, transparent);
}

.page-id-202 .cv-btn-ghost .elementor-button:hover {
background: var(–cv-lila);
border-color: var(–cv-lila);
color: #16111f;
}

.page-id-202 .cv-btn .elementor-button-icon svg,
.page-id-202 .cv-btn .elementor-button-icon i { font-size: .95em; }

/* La tarjeta del fundador empuja el botón al pie, así quedan alineados */
.page-id-202 .cv-founder.e-con { justify-content: flex-start; }
.page-id-202 .cv-founder > .elementor-widget-button { margin-top: auto; }

/* ———- 7. Hero: halo suave detrás del título ———- */
.page-id-202 .cv-hero.e-con {
position: relative;
overflow: hidden;
}

.page-id-202 .cv-hero.e-con::before {
content: “”;
position: absolute;
top: -160px;
left: 50%;
transform: translateX(-50%);
width: 720px;
height: 460px;
pointer-events: none;
z-index: 0;
background: radial-gradient(50% 50% at 50% 50%,
rgba(251, 176, 59, .16) 0%, rgba(251, 176, 59, 0) 70%);
}

.page-id-202 .cv-hero.e-con > * { position: relative; z-index: 1; }

/* ———- 8. Ritmo vertical y ancho ———- */
.page-id-202 .cv-section.e-con > .e-con-inner { max-width: 1140px; }
.page-id-202 .cv-actions.e-con { width: 100%; }

/* Respetar a quien pidió menos movimiento */
@media (prefers-reduced-motion: reduce) {
.page-id-202 .cv-card.e-con,
.page-id-202 .cv-btn .elementor-button { transition: none; }
.page-id-202 .cv-card.e-con:hover,
.page-id-202 .cv-btn .elementor-button:hover { transform: none; }
}