/**
 * 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;
	}
}