/* Hallmark · genre: modern-minimal · macrostructure: Split contacto · design-system: design.md · designed-as-app
 * pre-emit critique: P4 H4 E4 S4 R5 V4 */
/* =========================================================================
 * Contacto · Rediseño 2026 (plantilla contacto-2026.php).
 * Reusa la cabecera de documento (.tl-doc-hero, definida aquí también por si
 * legal-2026.css no está encolada) y viste el formulario de CF7 con el
 * sistema. La lógica del formulario es la de siempre.
 * ========================================================================= */

/* Cabecera (misma receta que las páginas legales) */
.tl-doc-hero{
	margin-top:calc(-1 * var(--th-header-flow, 72px));
	padding:calc(var(--th-sp-2xl) + var(--th-header-flow, 72px)) 0 var(--th-sp-xl);
	background:linear-gradient(180deg,oklch(97.5% 0.015 75) 0%,var(--th-paper) 100%);
	border-bottom:var(--th-rule);
}
.tlc-contacto .th-eyebrow{display:inline-flex;align-items:center;gap:var(--th-sp-2xs)}
.tlc-contacto .tl-doc-hero__title{
	font-size:var(--th-section);
	font-weight:700;line-height:1.1;letter-spacing:-.025em;
	color:var(--th-ink);
	margin:var(--th-sp-2xs) 0 var(--th-sp-sm);
	overflow-wrap:anywhere;
}
.tl-contact-hero__sub{
	margin:0;max-width:52ch;
	font-size:var(--th-text-md);line-height:1.6;color:var(--th-ink-soft);
}

/* Dos columnas: datos + formulario */
.tl-contact{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
	gap:var(--th-sp-2xl);
	padding:var(--th-sp-2xl) 0 var(--th-sp-3xl);
	align-items:start;
}

/* Columna de datos */
.tl-contact__info{
	display:flex;flex-direction:column;gap:var(--th-sp-lg);
	background:var(--th-paper-2);
	border:var(--th-rule);
	border-radius:var(--th-radius-lg);
	padding:var(--th-sp-xl);
}
.tl-contact__item{display:flex;gap:var(--th-sp-sm);align-items:flex-start}
.tl-contact__icon{
	display:grid;place-items:center;flex:none;
	width:40px;height:40px;
	border-radius:var(--th-radius-sm);
	background:var(--th-paper);
	color:var(--th-accent-icon);
}
.tl-contact__label{
	margin:0 0 2px;
	font-family:var(--th-mono);font-size:var(--th-text-xs);font-weight:500;
	letter-spacing:.1em;text-transform:uppercase;
	color:var(--th-muted);
}
.tl-contact__value{
	margin:0;
	font-size:var(--th-text-base);line-height:1.55;color:var(--th-ink);
}
.tlc-contacto a.tl-contact__value,
.tlc-contacto a.tl-contact__value:link,
.tlc-contacto a.tl-contact__value:visited{color:var(--th-ink);text-decoration:none;font-weight:500}
.tlc-contacto a.tl-contact__value:hover{color:var(--th-accent-deep)}
.tlc-contacto .tl-contact__value a{color:var(--th-accent-deep);text-decoration:underline;text-underline-offset:2px}
.tlc-contacto .tl-contact__value a:hover{color:var(--th-ink)}

/* Formulario CF7 vestido con el sistema */
.tl-contact__form{
	background:var(--th-paper);
	border:var(--th-rule);
	border-radius:var(--th-radius-lg);
	padding:var(--th-sp-xl);
}
.tlc-contacto .tl-contact__form-title{
	font-size:var(--th-text-xl);font-weight:600;letter-spacing:-.02em;
	color:var(--th-ink);
	margin:0 0 var(--th-sp-lg);
}
.tl-contact__form .wpcf7 p{margin:0 0 var(--th-sp-md);color:var(--th-ink-soft);font-weight:500}
.tlc-contacto .tl-contact__form input[type="text"],
.tlc-contacto .tl-contact__form input[type="email"],
.tlc-contacto .tl-contact__form input[type="tel"],
.tlc-contacto .tl-contact__form textarea{
	width:100%;
	min-height:48px;
	margin-top:var(--th-sp-2xs);
	padding:12px 14px;
	background:var(--th-paper);
	border:1px solid var(--th-border-strong);
	border-radius:10px;
	font-family:var(--th-font);font-size:var(--th-text-base);color:var(--th-text);
	box-shadow:none;
	transition:border-color var(--th-dur) var(--th-ease),box-shadow var(--th-dur) var(--th-ease);
}
.tlc-contacto .tl-contact__form textarea{min-height:150px;resize:vertical}
.tlc-contacto .tl-contact__form input:focus,
.tlc-contacto .tl-contact__form textarea:focus{
	outline:none;
	border-color:var(--th-accent);
	box-shadow:0 0 0 3px oklch(73.2% 0.161 57.2 / .18);
}
.tlc-contacto .tl-contact__form .wpcf7-not-valid{border-color:var(--th-err)}
.tl-contact__form .wpcf7-not-valid-tip{
	margin-top:var(--th-sp-2xs);
	font-size:var(--th-text-sm);font-weight:600;color:var(--th-err);
}
.tlc-contacto .tl-contact__form input[type="submit"],
.tlc-contacto .tl-contact__form .wpcf7-submit{
	display:inline-flex;align-items:center;justify-content:center;
	min-height:52px;width:100%;padding:0 var(--th-sp-xl);
	background:var(--th-accent);
	border:1px solid var(--th-accent);
	border-radius:var(--th-pill);
	color:#fff;font-family:var(--th-font);font-size:var(--th-text-base);font-weight:600;
	letter-spacing:.01em;text-transform:none;box-shadow:none;cursor:pointer;
	transition:background var(--th-dur) var(--th-ease),border-color var(--th-dur) var(--th-ease);
}
.tlc-contacto .tl-contact__form .wpcf7-submit:hover{background:var(--th-accent-deep);border-color:var(--th-accent-deep);color:#fff}
.tlc-contacto .tl-contact__form .wpcf7-submit:focus-visible{outline:2px solid var(--th-focus);outline-offset:3px}
/* CF7 deshabilita el envío hasta marcar el consentimiento. */
.tlc-contacto .tl-contact__form .wpcf7-submit:disabled{opacity:.45;cursor:not-allowed}

/* Checkbox de consentimiento dibujado a medida, como el del popup de acceso. */
.tlc-contacto .tl-contact__form input[type="checkbox"]{
	appearance:none;-webkit-appearance:none;
	width:20px;height:20px;flex:0 0 20px;margin:0 8px 0 0;padding:0;
	display:inline-grid;place-items:center;
	vertical-align:-4px;
	background:var(--th-paper);
	border:2px solid var(--th-border-strong);
	border-radius:6px;
	cursor:pointer;
	transition:background var(--th-dur) var(--th-ease),border-color var(--th-dur) var(--th-ease);
}
.tlc-contacto .tl-contact__form input[type="checkbox"]::before{
	content:"";width:12px;height:12px;
	background:#fff;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
	transform:scale(0);
	transition:transform .18s cubic-bezier(.34,1.4,.44,1);
}
.tlc-contacto .tl-contact__form input[type="checkbox"]:hover:not(:checked){border-color:var(--th-ink)}
.tlc-contacto .tl-contact__form input[type="checkbox"]:checked{background:var(--th-accent);border-color:var(--th-accent)}
.tlc-contacto .tl-contact__form input[type="checkbox"]:checked::before{transform:scale(1)}
.tlc-contacto .tl-contact__form input[type="checkbox"]:focus-visible{outline:2px solid var(--th-focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
	.tlc-contacto .tl-contact__form input[type="checkbox"]::before{transition:none}
}
.tl-contact__form .wpcf7-spinner{margin:var(--th-sp-xs) auto 0;display:block}
.tl-contact__form .wpcf7-response-output{
	margin:var(--th-sp-md) 0 0;padding:var(--th-sp-sm) var(--th-sp-md);
	border:1px solid var(--th-border-strong) !important;
	border-radius:var(--th-radius-sm);
	font-size:var(--th-text-sm);
}
.tl-contact__form .wpcf7-mail-sent-ok,
.tl-contact__form form.sent .wpcf7-response-output{border-color:var(--th-ok) !important;color:var(--th-ok)}
.tl-contact__form form.invalid .wpcf7-response-output,
.tl-contact__form form.failed .wpcf7-response-output{border-color:var(--th-err) !important;color:var(--th-err)}

@media (max-width:899px){
	.tl-contact{grid-template-columns:minmax(0,1fr);gap:var(--th-sp-lg)}
	.tl-contact__info{order:2}
	.tl-contact__form{order:1}
}