/**
 * Estilos del formulario de contacto.
 *
 * Usa las variables del tema hijo con valores de respaldo, igual que el
 * catálogo, para no depender de que el tema esté cargado.
 */

.gsc-bloque {
	/* Dentro de la sección de contacto el formulario ocupa su columna completa:
	   el ancho lo controla la cuadrícula, no el propio bloque. */
	max-width: 640px;
	margin: 0;
}

.gsc-contacto__col .gsc-bloque {
	max-width: none;
}

/* ==========================================================================
   Avisos de resultado
   ========================================================================== */

.gsc-aviso {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 26px;
	padding: 16px 20px;
	border-radius: var(--gs-radio-chico, 6px);
	border-left: 4px solid;
	font-size: .95rem;
	line-height: 1.55;
}

.gsc-aviso--ok {
	background-color: var(--gs-principal-claro, #E9EDF4);
	border-left-color: var(--gs-principal, #001F4E);
	color: #001536;
}

.gsc-aviso--error {
	background-color: #FEF3F2;
	border-left-color: #B42318;
	color: #912018;
}

/* ==========================================================================
   Campos
   ========================================================================== */

.gsc-campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 20px;
}

.gsc-campo label {
	font-size: .9rem;
	font-weight: 600;
	color: var(--gs-texto, #1F2937);
}

.gsc-obligatorio {
	color: #B42318;
}

.gsc-campo input[type="text"],
.gsc-campo input[type="email"],
.gsc-campo textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--gs-borde, #E5E7EB);
	border-radius: var(--gs-radio-chico, 6px);
	background-color: #FFFFFF;
	font-family: inherit;
	font-size: 1rem;
	color: var(--gs-texto, #1F2937);
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.gsc-campo input:focus,
.gsc-campo textarea:focus {
	outline: none;
	border-color: var(--gs-principal, #001F4E);
	box-shadow: 0 0 0 3px rgba(0, 31, 78, .15);
}

/* Se marca en rojo solo después de que la persona escribió algo inválido,
   no desde el primer momento: avisar antes de tiempo resulta hostil. */
.gsc-campo input:not(:placeholder-shown):invalid,
.gsc-campo textarea:not(:placeholder-shown):invalid {
	border-color: #E9A3A0;
}

.gsc-campo textarea {
	resize: vertical;
	min-height: 130px;
}

.gsc-ayuda {
	font-size: .82rem;
	color: var(--gs-texto-suave, #6B7280);
}

/* ==========================================================================
   Honeypot anti-spam
   ========================================================================== */

/* Se saca de la vista sin usar display:none ni visibility:hidden, porque
   algunos bots detectan justamente esas dos propiedades y evitan el campo. */
.gsc-trampa {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ==========================================================================
   Botón y notas
   ========================================================================== */

.gsc-acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 26px;
}

.gsc-boton {
	padding: 14px 32px;
	border: 2px solid var(--gs-principal, #001F4E);
	border-radius: var(--gs-radio-chico, 6px);
	background-color: var(--gs-principal, #001F4E);
	color: #FFFFFF;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.gsc-boton:hover,
.gsc-boton:focus {
	background-color: var(--gs-principal-oscuro, #001536);
	border-color: var(--gs-principal-oscuro, #001536);
	transform: translateY(-1px);
}

.gsc-nota {
	margin: 0;
	font-size: .82rem;
	color: var(--gs-texto-suave, #6B7280);
}

@media (max-width: 600px) {
	.gsc-boton {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gsc-boton {
		transition: none;
	}

	.gsc-boton:hover {
		transform: none;
	}
}

/* ==========================================================================
   PÁGINA DE CONTACTO: datos, redes y mapa
   ==========================================================================
   El diseño anterior usaba dos columnas de bloques de WordPress con anchos
   fijos en porcentaje (58% / 42%), que no se adaptaban: en pantallas medianas
   el formulario y los datos quedaban apretados uno contra otro.
   Acá se usa una cuadrícula que se reacomoda sola.
   ========================================================================== */

.gsc-contacto {
	display: grid;
	/* Una columna por defecto; dos en cuanto hay sitio.
	   No se usa auto-fit con minmax: eso crea tantas columnas como caben en el
	   ancho disponible, y con solo dos elementos en una pantalla de 1920px
	   generaba cuatro columnas, dejando dos vacías y el formulario a 394px
	   cuando tenía 1420 disponibles. */
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: start;
}

/* El corte va en 860px y no en un tamaño de dispositivo: es el ancho a partir
   del cual las dos columnas dejan de apretarse. */
@media (min-width: 860px) {
	.gsc-contacto {
		/* El formulario algo más ancho que los datos: es donde se escribe. */
		grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
		gap: 3rem;
	}
}

.gsc-contacto__intro {
	margin: 0 0 2rem;
	font-size: 1.05rem;
	line-height: 1.6;
	max-width: 62ch;
	color: var(--gs-texto, #1F2937);
}

/* --- Tarjeta de datos --- */

.gsc-datos {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	padding: 1.5rem;
	background-color: var(--gs-fondo-elevado, #FFFFFF);
	border: 1px solid rgba(0, 31, 78, .06);
	border-radius: var(--gs-radio, 10px);
	box-shadow: 0 1px 2px rgba(0, 31, 78, .04);
}

/* Cada dato es accionable: llamar, abrir WhatsApp, escribir, ver el mapa.
   En un móvil eso convierte un dato en una acción de un toque. */
.gsc-dato {
	display: flex;
	align-items: flex-start;
	gap: .9rem;
	padding: .8rem .6rem;
	border-radius: var(--gs-radio-chico, 6px);
	text-decoration: none;
	color: var(--gs-texto-suave, #6B7280);
	line-height: 1.5;
	transition: background-color 150ms ease;
}

.gsc-dato:hover,
.gsc-dato:focus {
	background-color: var(--gs-principal-claro, #E9EDF4);
	color: var(--gs-texto, #1F2937);
}

/* El horario no es un enlace: no debe parecerlo. */
.gsc-dato--estatico {
	cursor: default;
}

.gsc-dato--estatico:hover {
	background-color: transparent;
}

.gsc-dato__texto {
	font-size: .95rem;
}

.gsc-dato__texto strong {
	display: block;
	margin-bottom: .15rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gs-principal, #001F4E);
}

.gsc-icono {
	flex: 0 0 auto;
	width: 1.35rem;
	height: 1.35rem;
	margin-top: .15rem;
	stroke: var(--gs-acento, #C98937);
	fill: none;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* WhatsApp con su verde reconocible: es el canal que la gente busca primero */
.gsc-dato--whatsapp .gsc-icono {
	stroke: #25D366;
}

/* --- Redes sociales --- */

.gsc-redes {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: 1rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--gs-borde, #E5E7EB);
}

/* Botones circulares con solo el icono.
   El tamaño no es arbitrario: 2.75rem son 44px, la medida mínima recomendada
   para un objetivo táctil. Más chico y en un móvil cuesta acertarle. */
.gsc-red {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--gs-borde, #E5E7EB);
	border-radius: 50%;
	text-decoration: none;
	color: var(--gs-principal, #001F4E);
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.gsc-red .gsc-icono {
	width: 1.3rem;
	height: 1.3rem;
	margin: 0;
	stroke: currentColor;
}

/* --- Colores oficiales de cada red --------------------------------------
   Facebook usa un azul plano (#1877F2). Instagram no tiene color plano: su
   identidad es un degradado, y por eso su icono referencia el gradiente
   definido dentro del propio SVG en lugar de un color.
   ------------------------------------------------------------------------ */

.gsc-red--facebook .gsc-icono {
	stroke: #1877F2;
}

.gsc-red--instagram .gsc-icono {
	stroke: url(#gsc-degradado-ig);
}

/* Al pasar el cursor, el fondo toma el color de la marca y el icono pasa a
   blanco. Es la inversión que hace reconocible el botón sin cambiar de
   identidad. */
.gsc-red--facebook:hover,
.gsc-red--facebook:focus {
	background-color: #1877F2;
	border-color: #1877F2;
	transform: translateY(-2px);
}

.gsc-red--instagram:hover,
.gsc-red--instagram:focus {
	background-image: linear-gradient(45deg, #FEDA75, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5);
	border-color: #962FBF;
	transform: translateY(-2px);
}

/* En hover el trazo pasa a blanco. Para Instagram hace falta anular el
   degradado explícitamente: sin esto seguiría referenciando el gradiente y el
   icono se perdería sobre su propio fondo de colores. */
.gsc-red--facebook:hover .gsc-icono,
.gsc-red--facebook:focus .gsc-icono,
.gsc-red--instagram:hover .gsc-icono,
.gsc-red--instagram:focus .gsc-icono {
	stroke: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
	.gsc-red:hover {
		transform: none;
	}
}

/* --- Mapa --- */

.gsc-mapa {
	margin-top: 2.5rem;
	border-radius: var(--gs-radio, 10px);
	overflow: hidden;
	border: 1px solid rgba(0, 31, 78, .06);
	/* line-height 0 evita la franja blanca que los navegadores dejan debajo
	   de un iframe, al tratarlo como texto en línea. */
	line-height: 0;
	background-color: var(--gs-gris-fondo, #EEF0F4);
}

.gsc-mapa iframe {
	display: block;
	width: 100%;
}

@media (max-width: 600px) {
	.gsc-datos {
		padding: 1.1rem;
	}

	.gsc-mapa iframe {
		height: 280px;
	}
}

/* ==========================================================================
   PÁGINA DE CONTACTO — versión con encabezado y tarjetas
   ==========================================================================
   Estructura inspirada en la referencia que pasó Moshé:
     1. Dos columnas: datos en tarjetas · formulario en tarjeta elevada
     2. Mapa a lo ancho
   ========================================================================== */

/* --- 1. Datos en tarjetas ------------------------------------------------ */

/* Cada dato es su propia tarjeta, como las oficinas de la referencia. Antes
   era una lista dentro de un solo recuadro: se leía como un bloque de texto
   y no invitaba a tocar nada. */
.gsc-datos--tarjetas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .9rem;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.gsc-datos--tarjetas .gsc-dato {
	flex-direction: column;
	gap: .7rem;
	padding: 1.15rem 1.2rem;
	background-color: var(--gs-fondo-elevado, #FFFFFF);
	border: 1px solid rgba(0, 31, 78, .07);
	border-radius: var(--gs-radio, 10px);
	box-shadow: 0 1px 2px rgba(0, 31, 78, .04);
	transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
}

.gsc-datos--tarjetas .gsc-dato:hover,
.gsc-datos--tarjetas .gsc-dato:focus {
	background-color: var(--gs-fondo-elevado, #FFFFFF);
	box-shadow: 0 6px 18px rgba(0, 31, 78, .09);
	border-color: rgba(0, 31, 78, .14);
	transform: translateY(-2px);
}

.gsc-datos--tarjetas .gsc-dato--estatico:hover {
	box-shadow: 0 1px 2px rgba(0, 31, 78, .04);
	transform: none;
	border-color: rgba(0, 31, 78, .07);
}

.gsc-datos--tarjetas .gsc-icono {
	margin: 0;
	width: 1.5rem;
	height: 1.5rem;
}

/* La dirección ocupa las dos columnas: es el dato más largo y partido en una
   sola columna quedaría en cuatro renglones. */
.gsc-datos--tarjetas .gsc-dato:first-child {
	grid-column: 1 / -1;
}

/* Las redes, en su propia fila a lo ancho */
.gsc-datos--tarjetas .gsc-redes {
	grid-column: 1 / -1;
	margin: .3rem 0 0;
	padding: 0;
	border: 0;
	justify-content: flex-start;
}

/* --- 2. Formulario en tarjeta elevada ------------------------------------ */

.gsc-tarjeta-form {
	padding: 1.9rem;
	background-color: var(--gs-fondo-elevado, #FFFFFF);
	border: 1px solid rgba(0, 31, 78, .07);
	border-radius: var(--gs-radio, 10px);
	/* Sombra algo más marcada que en las tarjetas de datos: es el elemento con
	   el que se espera que la persona interactúe. */
	box-shadow: 0 10px 30px rgba(0, 31, 78, .07);
}

/* --- Pantallas chicas ---------------------------------------------------- */

@media (max-width: 600px) {
	/* Una tarjeta por fila: en 390px, dos columnas dejan los textos en
	   renglones de dos palabras. */
	.gsc-datos--tarjetas {
		grid-template-columns: 1fr;
	}

	.gsc-tarjeta-form {
		padding: 1.4rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gsc-datos--tarjetas .gsc-dato:hover {
		transform: none;
	}
}

/* ==========================================================================
   Asesores comerciales

   Es el diseño que aprobó el cliente, con sus medidas y colores.

   La regla que manda aquí: el recuadro tiene una altura fija y la imagen se
   encaja dentro con object-fit. Da igual cómo venga el archivo —cuadrado,
   vertical, apaisado, de mil o de diez mil píxeles—: entra sin deformarse.
   ========================================================================== */

.gs-team,
.gs-team * {
	box-sizing: border-box;
}

.gs-team {
	--gs-blue: #173452;
	--gs-blue-light: #52667d;
	--gs-gold: #c98937;
	--gs-green: #168447;
	--gs-green-dark: #106a39;
	--gs-green-light: #ebf8f0;
	--gs-border: #e2e9f0;
	--gs-background: #f5f8fb;

	width: 100%;

	/* 24 px arriba en vez de los 72 del modelo: aquí la sección va pegada a
	   la cabecera, sin título de página encima que la separe. */
	padding: 24px 24px 88px;

	background:
		radial-gradient(circle at 50% 0%, rgba(201, 137, 55, .08), transparent 420px),
		var(--gs-background);
	color: var(--gs-blue);
	font-family: inherit;
}

/* --- Encabezado ---------------------------------------------------------- */

/*
 * Sin tope de 720 px: era ese contenedor, y no el párrafo, el que partía la
 * frase de presentación en dos líneas.
 */
.gs-team__header {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto 40px;
	text-align: center;
}

/*
 * Sin el título grande debajo, este texto pasa a ser el encabezado de la
 * sección, así que necesita más peso visual del que tenía como antetítulo.
 */
.gs-team__eyebrow {
	display: inline-block;
	margin-bottom: 12px;
	color: var(--gs-gold);
	font-size: 19px;
	line-height: 1.35;
	font-weight: 750;
	letter-spacing: .08em;
	text-transform: uppercase;
}

@media (max-width: 640px) {
	.gs-team__eyebrow {
		font-size: 16px;
		letter-spacing: .06em;
	}
}

.gs-team__title {
	margin: 0;
	color: var(--gs-blue);
	font-size: clamp(34px, 4vw, 48px);
	line-height: 1.1;
	font-weight: 750;
	letter-spacing: -.035em;
}

/*
 * El ancho da para que la frase entre en una sola línea. Con los 610 px del
 * modelo se partía en dos y la segunda quedaba corta, con el texto colgando.
 */
.gs-team__intro {
	max-width: none;
	margin: 14px auto 0;
	color: var(--gs-blue-light);
	font-size: 16px;
	line-height: 1.65;
	text-wrap: balance;
}

/* En pantallas donde no quepa entera, se reparte en dos líneas parejas en
   lugar de dejar una palabra suelta abajo. */
@media (max-width: 900px) {
	.gs-team__intro {
		max-width: 610px;
	}
}

/* --- Retícula ------------------------------------------------------------ */

.gs-team__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 26px;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
}

/* --- Tarjeta ------------------------------------------------------------- */

.gs-advisor {
	display: flex;
	flex: 0 1 286px;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid var(--gs-border);
	border-radius: 20px;
	box-shadow:
		0 8px 24px rgba(20, 48, 75, .06),
		0 2px 5px rgba(20, 48, 75, .03);
	transition:
		transform .25s ease,
		box-shadow .25s ease,
		border-color .25s ease;
}

.gs-advisor:hover {
	transform: translateY(-6px);
	border-color: #d4dee8;
	box-shadow:
		0 20px 42px rgba(20, 48, 75, .13),
		0 5px 12px rgba(20, 48, 75, .05);
}

/* --- El recuadro de la foto ---------------------------------------------- */

/*
 * Altura fija, no proporción calculada. Esto es lo que hace que cualquier
 * archivo encaje: la caja manda y la imagen se adapta a ella.
 */
.gs-advisor__photo {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 205px;
	overflow: hidden;
	background: radial-gradient(circle at 50% 35%, #ffffff 0%, #f3f8fc 47%, #e9f1f7 100%);
}

/*
 * contain: la imagen entra entera dentro del recuadro, conservando su forma.
 * Nunca se recorta ni se estira, venga como venga el archivo. Apoyada abajo
 * para que todas queden a la misma línea de base.
 */
.gs-advisor__avatar {
	display: block;
	width: 100%;
	height: 100%;

	/* Aire alrededor: sin él, la figura toca los bordes del recuadro y las
	   más anchas parecen recortadas aunque no lo estén. */
	padding: 10px 16px 0;
	box-sizing: border-box;

	object-fit: contain;
	object-position: center bottom;
	transition: transform .35s ease;
}

.gs-advisor:hover .gs-advisor__avatar {
	transform: scale(1.025);
}

/* --- Distintivo de disponibilidad ---------------------------------------- */

.gs-advisor__status {
	position: absolute;
	z-index: 2;
	top: 14px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 32px;
	padding: 6px 11px;
	color: #40566d;
	background: rgba(255, 255, 255, .94);
	border: 1px solid rgba(220, 229, 237, .95);
	border-radius: 999px;
	box-shadow: 0 5px 14px rgba(20, 48, 75, .08);
	font-size: 12px;
	line-height: 1;
	font-weight: 650;
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
}

.gs-advisor__status-dot {
	position: relative;
	display: block;
	width: 9px;
	height: 9px;
	background: #24bd6b;
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(36, 189, 107, .13);
}

.gs-advisor__status-dot::after {
	position: absolute;
	inset: -4px;
	content: "";
	border: 1px solid rgba(36, 189, 107, .25);
	border-radius: 50%;
}

/* --- Información --------------------------------------------------------- */

.gs-advisor__content {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20px 20px 18px;
}

/* Altura mínima para que los botones queden alineados entre tarjetas aunque
   unos nombres ocupen dos líneas y otros una. */
.gs-advisor__identity {
	min-height: 51px;
}

.gs-advisor__name {
	margin: 0;
	color: var(--gs-blue);
	font-size: 18px;
	line-height: 1.3;
	font-weight: 750;
	letter-spacing: -.015em;
}

.gs-advisor__role {
	margin: 4px 0 0;
	color: var(--gs-gold);
	font-size: 13px;
	line-height: 1.4;
	font-weight: 700;
}

.gs-advisor__description {
	min-height: 44px;
	margin: 13px 0 17px;
	color: #64768a;
	font-size: 14px;
	line-height: 1.55;
}

/* --- Botón de WhatsApp --------------------------------------------------- */

.gs-advisor__whatsapp {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	min-height: 54px;
	padding: 8px 13px;
	color: var(--gs-green-dark) !important;
	background: var(--gs-green-light);
	border: 1px solid #ccebd8;
	border-radius: 13px;
	text-decoration: none !important;
	transition:
		transform .2s ease,
		color .2s ease,
		background-color .2s ease,
		border-color .2s ease,
		box-shadow .2s ease;
}

.gs-advisor__whatsapp:hover,
.gs-advisor__whatsapp:focus-visible {
	color: #ffffff !important;
	background: var(--gs-green);
	border-color: var(--gs-green);
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(22, 132, 71, .22);
}

.gs-advisor__whatsapp svg {
	flex: 0 0 25px;
	width: 25px;
	height: 25px;
	fill: #22b864;
	transition: fill .2s ease;
}

.gs-advisor__whatsapp:hover svg,
.gs-advisor__whatsapp:focus-visible svg {
	fill: #ffffff;
}

.gs-advisor__whatsapp span:not(.gs-advisor__arrow) {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 1px;
}

.gs-advisor__whatsapp small {
	color: #5c8a6d;
	font-size: 10px;
	line-height: 1.25;
	font-weight: 600;
}

.gs-advisor__whatsapp strong {
	color: inherit;
	font-size: 14px;
	line-height: 1.25;
	font-weight: 750;
	white-space: nowrap;
}

.gs-advisor__whatsapp:hover small,
.gs-advisor__whatsapp:focus-visible small {
	color: rgba(255, 255, 255, .83);
}

.gs-advisor__arrow {
	margin-left: auto;
	font-size: 19px;
	line-height: 1;
}

/* --- Correo -------------------------------------------------------------- */

.gs-advisor__email {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 7px;
	width: 100%;
	margin-top: 14px;
	color: #78899b !important;
	font-size: 12px;
	line-height: 1.45;
	text-align: center;
	text-decoration: none !important;
	overflow-wrap: anywhere;
	transition: color .2s ease;
}

.gs-advisor__email:hover,
.gs-advisor__email:focus-visible {
	color: var(--gs-blue) !important;
	text-decoration: underline !important;
}

.gs-advisor__email svg {
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
	margin-top: 1px;
	fill: currentColor;
}

/* --- Foco visible para quien navega con teclado -------------------------- */

.gs-advisor__whatsapp:focus-visible,
.gs-advisor__email:focus-visible {
	outline: 3px solid rgba(201, 137, 55, .35);
	outline-offset: 3px;
}

/* --- Tableta ------------------------------------------------------------- */

@media (max-width: 1024px) {
	.gs-team {
		padding: 60px 22px 76px;
	}

	.gs-team__grid {
		max-width: 760px;
		gap: 24px;
	}

	.gs-advisor {
		flex-basis: calc(50% - 12px);
		max-width: 355px;
	}

	.gs-advisor__photo {
		height: 230px;
	}
}

/* --- Móvil --------------------------------------------------------------- */

@media (max-width: 640px) {
	.gs-team {
		padding: 45px 16px 62px;
	}

	.gs-team__header {
		margin-bottom: 30px;
	}

	.gs-team__title {
		font-size: 32px;
		line-height: 1.15;
	}

	.gs-team__intro {
		margin-top: 12px;
		font-size: 14px;
		line-height: 1.6;
	}

	.gs-team__grid {
		display: grid;
		grid-template-columns: minmax(0, 360px);
		justify-content: center;
		gap: 20px;
	}

	.gs-advisor {
		width: 100%;
		max-width: 360px;
	}

	.gs-advisor__photo {
		height: 225px;
	}

	.gs-advisor__content {
		padding: 19px 18px 18px;
	}

	.gs-advisor__description {
		min-height: auto;
	}
}

/* --- Pantallas muy pequeñas ---------------------------------------------- */

@media (max-width: 360px) {
	.gs-team {
		padding-right: 12px;
		padding-left: 12px;
	}

	.gs-advisor__photo {
		height: 205px;
	}

	.gs-advisor__whatsapp {
		padding-right: 11px;
		padding-left: 11px;
	}

	.gs-advisor__whatsapp strong {
		font-size: 13px;
	}

	.gs-advisor__email {
		font-size: 11px;
	}
}

/* --- Menos animación para quien lo pide en su sistema -------------------- */

@media (prefers-reduced-motion: reduce) {
	.gs-advisor,
	.gs-advisor__avatar,
	.gs-advisor__whatsapp {
		transition: none;
	}

	.gs-advisor:hover,
	.gs-advisor:hover .gs-advisor__avatar {
		transform: none;
	}
}