/* =================================================================
   contact.css — page-contact.php (Template Name: Contact, Figma
   34-Contact-Page-Desktop, node-id=4508-18484, archivo BdUd1g6K6cuVm4036Z5p6p).
   Página estática (sin filtros/HTMX) — reusa .hero-title/.hero-desc (base.css) para el título y
   la descripción del hero, mismo criterio de reuso que el resto del tema.
   Breakpoint estándar 80rem (§12).
   ================================================================= */

@layer views {

	/* ---- Wrap de página: mismo patrón que .news-page/.search-page (§12.41). ---- */
	.contact-page {
		padding-inline: clamp(var(--space-m), 6vw, 7.5rem);
	}
	@media (width >= 80rem) {
		.contact-page { padding-inline: 0; }
	}
	.contact-page__inner {
		max-width: var(--container);
		margin-inline: auto;
	}

	/* ---- Hero: título + descripción, borde inferior full-bleed (mismo truco que .news-header,
	   news.css — .contact-hero llena el ancho de .contact-page__inner, centrada en el viewport). ---- */
	.contact-hero {
		position: relative;
		padding-block: 3rem;
	}
	.contact-hero::after {
		content: "";
		position: absolute;
		left: 50%; width: 100vw; margin-left: -50vw;
		bottom: 0;
		border-bottom: 1px solid #e5e5e5;
	}
	.contact-hero__desc {
		max-width: 585px;
	}
	@media (width < 48rem) {
		.contact-hero { padding-block: 1.5rem; }
	}

	/* ---- Layout principal: form (izquierda, flexible) + tarjeta de sede (derecha, ancho fijo). ---- */
	.contact-main {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 1.5rem;
		padding-block: clamp(3rem, 2rem + 5vw, 5rem);
	}
	@media (width < 64rem) {
		.contact-main { flex-direction: column; }
	}
	/* gap fijo de 135px en desktop (spec Figma) — SIN vw: .contact-page__inner ya tiene
	   max-width:var(--container)/1200px, así que un valor en vw sigue creciendo con el viewport
	   por encima de ese ancho aunque el contenido real ya no lo haga (el clamp anterior nunca
	   llegaba a 135px reales en ninguna pantalla — bug real reportado por el usuario). */
	@media (width >= 64rem) {
		.contact-main { gap: 8.4375rem; }
	}

	/* ---- Columna de formulario: shortcode real de Contact Form 7 (ver page-contact.php) — se
	   estilizan directo las clases que ESE form ya trae (row/col-sm-6/col-md-6/form-group/
	   form-control/btn-general/captcha-contact), nada inventado, para no romper nada si el usuario
	   edita el form desde el admin de CF7. ---- */
	.contact-form-col {
		flex: 1 1 640px;
		min-width: 0;
		width: 100%;
	}
	.contact-form-col .row {
		display: flex;
		gap: 1.5rem;
		margin: 0 0 1.5rem;
	}
	@media (width < 40rem) {
		.contact-form-col .row { flex-direction: column; }
	}
	.contact-form-col .col-sm-6.col-md-6 {
		flex: 1 1 0;
		min-width: 0;
	}
	.contact-form-col .form-group {
		display: flex;
		flex-direction: column;
		gap: .5rem;
		margin: 0 0 1.5rem;
	}
	.contact-form-col .row .form-group {
		margin: 0;
	}
	.contact-form-col label {
		font-family: var(--font-sans);
		font-weight: 600;
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-secondary, #767778);
	}
	.contact-form-col .wpcf7-form-control-wrap {
		display: block;
		width: 100%;
	}
	.contact-form-col .form-control {
		display: block;
		width: 100%;
		box-sizing: border-box;
		background: #fff;
		border: 1px solid #cacaca;
		border-radius: var(--dia-radius-sm, 4px);
		padding: 15px 24px;
		outline: none;
		font-family: var(--font-sans);
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		color: var(--dia-color-text-primary, #121212);
		resize: none;
	}
	.contact-form-col .form-control::placeholder {
		color: #a3a3a3;
	}
	.contact-form-col .form-group-comments .form-control {
		height: 130px;
	}
	.contact-form-col .captcha-contact {
		margin-bottom: 1.5rem;
	}
	.contact-form-col .btn-general {
		margin-top: .5rem;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 17px 24px;
		border: 1px solid var(--dia-color-border-strong, #232323);
		border-radius: var(--dia-radius-sm, 4px);
		background: none;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-primary, #121212);
		cursor: pointer;
	}
	/* Mismo hover que los botones de paginación/pills del sitio (news.css, pedido explícito de
	   David) — border #a7b7ca + gradiente gris + sombra compartida (--dia-btn-gray-gradient/
	   --dia-btn-gray-shadow, base.css), no el gris plano que había puesto acá. */
	.contact-form-col .btn-general:hover {
		border: 1px solid #a7b7ca;
		background: var(--dia-btn-gray-gradient);
		box-shadow: var(--dia-btn-gray-shadow);
	}
	.contact-form-col .wpcf7-not-valid-tip {
		margin-top: 4px;
		font-size: 13px;
		color: #c0392b;
	}
	.contact-form-col .wpcf7-response-output {
		margin: 1rem 0 0;
		padding: 12px 16px;
		border-radius: var(--dia-radius-sm, 4px);
		font-size: 14px;
	}

	/* ---- Estado "Message sent" (Figma nodo 4508:18550) — oculto/mostrado por contact-form.js al
	   enviar el form (evento wpcf7mailsent, ver ese archivo + page-contact.php). Colores DIA DS
	   Primitive/green (50/200/700), sin token propio en base.css todavía — hardcodeados acá, mismo
	   criterio que otros colores puntuales del tema.

	   2 cajas: `.contact-success-outer` (el contenedor gris claro #f9fafb con padding/radius que
	   el usuario mostró por captura 2026-07-30, mismo padding/wrapper que rodea el form en la
	   página real) + `.contact-success` (la tarjeta teal de adentro, tal cual el Figma). ---- */
	.contact-success-outer {
		background: #f9fafb;
		padding: 50px;
		border-radius: 8px;
	}
	/* El atributo `hidden` de page-contact.php solo pone display:none vía el stylesheet del propio
	   navegador (UA, prioridad más baja que CUALQUIER regla de autor) — un display propio de
	   autor le gana siempre y el bloque se veía SIEMPRE, antes de enviar el form (bug real
	   reportado por el usuario). Se pisa explícito acá. */
	.contact-success-outer[hidden] {
		display: none;
	}
	.contact-success {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #e8f0f2;
		border: 1px solid #e5e5dc;
		border-radius: 16px;
	}
	.contact-success__body {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.5rem;
		max-width: 464px;
		padding: clamp(2rem, 1.5rem + 2vw, 3rem) 1rem;
		text-align: center;
	}
	.contact-success__icon {
		display: flex;
		width: 80px; height: 80px;
		color: #2f646e;
	}
	.contact-success__title {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 24px;
		line-height: 32px;
		letter-spacing: -.5px;
		color: var(--dia-color-text-primary, #121212);
	}
	.contact-success__desc {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 400;
		font-size: 20px;
		line-height: 32px;
		color: var(--dia-color-text-primary, #121212);
	}
	.contact-success__footer {
		display: flex;
		justify-content: center;
		width: 100%;
		padding: 2rem;
		border-top: 1px solid #aecbd1;
	}
	.contact-success__cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 17px 24px;
		border: 1px solid var(--dia-color-border-strong, #232323);
		border-radius: var(--dia-radius-sm, 4px);
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-primary, #121212);
		text-decoration: none;
	}
	.contact-success__cta:hover {
		border: 1px solid #a7b7ca;
		background: var(--dia-btn-gray-gradient);
		box-shadow: var(--dia-btn-gray-shadow);
	}

	/* ---- Tarjeta "Our Headquarters": foto de fondo (ya viene editada/oscurecida del diseñador,
	   SIN scrim propio encima — pedido explícito del usuario 2026-07-30) + contenido en blanco. ---- */
	.contact-info-card {
		position: relative;
		flex: 0 0 380px;
		width: 380px;
		max-width: 100%;
		border-radius: 12px;
		overflow: hidden;
		isolation: isolate;
	}
	@media (width < 64rem) {
		.contact-info-card { width: 100%; flex: 1 1 auto; }
	}
	.contact-info-card__bg {
		position: absolute; inset: 0;
		z-index: -1;
	}
	.contact-info-card__bg img {
		width: 100%; height: 100%;
		object-fit: cover;
		object-position: bottom; /* pedido explícito del usuario 2026-07-30 */
	}
	.contact-info-card__content {
		display: flex;
		flex-direction: column;
		gap: 2rem;
		padding: 32px;
	}
	.contact-info-card__heading {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.contact-info-card__title {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 24px;
		line-height: 32px;
		letter-spacing: -.5px;
		color: var(--dia-color-text-inverse, #fff);
	}
	.contact-info-card__desc {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		color: var(--dia-color-text-inverse, #fff);
		opacity: .8;
	}
	.contact-info-row {
		display: flex;
		align-items: center;
		gap: 1rem;
	}
	.contact-info-row__icon {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px; height: 48px;
		border-radius: 12px;
		background: rgba(247, 248, 249, .15);
		border: 1px solid rgba(255, 255, 255, .2);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
		color: var(--dia-color-text-inverse, #fff);
	}
	.contact-info-row__text {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		color: var(--dia-color-text-inverse, #fff);
	}
	.contact-info-row__text a {
		color: inherit;
		text-decoration: none;
	}
	.contact-info-row__text a:hover {
		text-decoration: underline;
	}
	.contact-map {
		display: block;
		height: 230px;
		border-radius: 6px;
		overflow: hidden;
	}
	.contact-map img {
		width: 100%; height: 100%;
		object-fit: cover;
	}
}