/* Contacto — capa Sortícula.
 *
 * La página venía entera del tema base: filetes a sangre, campos sin caja, un
 * botón de acento de borde a borde y el teléfono impreso dos veces. Era la
 * página más lejana de la marca de toda la tienda, y encima la que recibe a
 * quien ya se decidió y busca cómo hablar con alguien.
 *
 * Igual criterio que cart.css: no se reescribe el mecanismo del formulario
 * —`form.tpl` y `form-input.tpl` siguen intactos, con su campo trampa y su
 * reCAPTCHA—, se le cambia la materia. Todo sale de los tokens de paleta, así
 * que la página responde a las cinco luces como el resto del sitio.
 */

.sc-contacto {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--pad) var(--space-9);
	color: var(--fg);
}

/* --------------------------------- cabecera ------------------------------ */

.sc-contacto-head {
	padding: var(--space-7) 0 var(--space-6);
}

.sc-contacto-head .breadcrumbs {
	font-family: var(--sans);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: var(--track-caps-xs);
	text-transform: uppercase;
	color: var(--fg-muted);
	margin: 0 0 var(--space-5);
	display: flex;
	gap: var(--space-3);
	align-items: center;
}

.sc-contacto-head .breadcrumbs .crumb {
	color: inherit;
	text-decoration: none;
}

.sc-contacto-head .breadcrumbs .crumb.active {
	color: var(--accent);
}

.sc-contacto-head h1 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(38px, 6vw, 68px);
	line-height: 1;
	margin: 0;
	color: var(--fg);
}

.sc-contacto-head h1 .ital {
	font-style: italic;
	color: var(--accent);
}

.sc-contacto-intro {
	margin: var(--space-5) 0 0;
	max-width: 52ch;
	color: var(--fg-muted);
	font-size: var(--fs-body);
	line-height: 1.6;
}

/* ---------------------------------- rejilla ------------------------------ */

.sc-contacto-grid {
	display: grid;
	gap: var(--space-7);
	align-items: start;
}

@media (min-width: 900px) {
	.sc-contacto-grid {
		/* El formulario manda, pero la columna de canales tiene que caber sin
		   partir el botón de WhatsApp en dos líneas. */
		grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr);
		gap: var(--space-9);
	}
}

/* --------------------------------- canales ------------------------------- */

.sc-contacto-canales {
	display: grid;
	gap: var(--space-6);
	align-content: start;
}

.sc-canal {
	border-top: 1px solid var(--line);
	padding-top: var(--space-5);
	display: grid;
	gap: var(--space-3);
	justify-items: start;
}

/* El canal rápido no es un ítem más de una lista: es la respuesta a la pregunta
   que trae a esta página. Va en tarjeta, primero y con el único botón sólido. */
.sc-canal--destacado {
	border-top: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--space-6);
	gap: var(--space-4);
}

.sc-contacto .sc-label {
	font-family: var(--sans);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: var(--track-caps-xs);
	text-transform: uppercase;
	color: var(--fg-muted);
	margin: 0;
}

.sc-contacto .sc-canal a.lnk {
	color: var(--fg);
	text-decoration: none;
	font-size: var(--fs-body);
	line-height: 1.5;
	word-break: break-word;
}

.sc-contacto .sc-canal a.lnk:hover {
	color: var(--accent);
}

.sc-direccion {
	margin: 0;
	color: var(--fg);
	font-size: var(--fs-body);
	line-height: 1.6;
	max-width: 30ch;
}

.sc-canal-nota {
	margin: 0;
	color: var(--fg-muted);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

/* La utilidad .btn de los tokens solo aporta la transición; fuera de las
   secciones de la home nadie le da caja. Misma receta que el carrito vacío. */
.sc-contacto .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--btn-pad-lg);
	border-radius: 100px;
	font-family: var(--sans);
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: var(--track-caps-sm);
	text-transform: uppercase;
	text-decoration: none;
}

.sc-contacto .btn.primary {
	background: var(--accent);
	border: 1.5px solid var(--accent);
	color: var(--accent-ink);
}

.sc-contacto .btn.primary:hover {
	background: transparent;
	color: var(--accent);
}

/* -------------------------------- formulario ----------------------------- */

.sc-contacto-form {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--space-7) var(--space-6);
}

@media (min-width: 900px) {
	.sc-contacto-form {
		padding: var(--space-8) var(--space-7);
	}
}

/* El tema encierra cada campo en un `.form-group` con filetes a sangre y la
   etiqueta dentro de una barra gris. Se desarma para que el campo sea un campo. */
.sc-contacto .form-group {
	border: 0;
	margin: 0 0 var(--space-5);
	padding: 0;
	background: none;
}

.sc-contacto .form-label {
	display: block;
	padding: 0 0 var(--space-3);
	font-family: var(--sans);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: var(--track-caps-xs);
	text-transform: uppercase;
	color: var(--fg-muted);
}

.sc-contacto .form-control {
	width: 100%;
	background: transparent;
	border: 1px solid var(--line-strong);
	border-radius: 8px;
	padding: 14px 16px;
	font-family: var(--sans);
	font-size: var(--fs-body);
	color: var(--fg);
	transition:
		border-color 0.25s,
		box-shadow 0.25s;
}

.sc-contacto .form-control::placeholder {
	/* El apagado normal (--fg-muted mezcla 91% hacia --fg) queda casi igual que
	   el texto escrito y no se distingue el ejemplo del dato. Acá sí conviene
	   bajar de verdad, pero sin pasar de 4.5:1 sobre --surface. */
	color: color-mix(in srgb, var(--fg) 62%, var(--surface));
	opacity: 1;
}

.sc-contacto .form-control:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

.sc-contacto .form-control-area {
	resize: vertical;
	min-height: 150px;
	line-height: 1.6;
}

/* El botón de envío del tema llega con `btn btn-primary btn-big`, que en
   style-colors.scss.tpl toma los colores FIJOS del panel: se veía igual en las
   cinco paletas. Se le devuelve el acento de la paleta viva. */
.sc-contacto .sc-form-submit,
.sc-contacto .sc-form button[type='submit'] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	margin-top: var(--space-4);
	padding: var(--btn-pad-lg);
	border-radius: 100px;
	border: 1.5px solid var(--accent);
	background: var(--accent);
	color: var(--accent-ink);
	font-family: var(--sans);
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: var(--track-caps-sm);
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background 0.3s,
		color 0.3s,
		transform 0.35s var(--ease);
}

.sc-contacto .sc-form-submit:hover {
	background: transparent;
	color: var(--accent);
	transform: translateY(-3px);
}

/* El reCAPTCHA lo inyecta la plataforma con su propio recuadro blanco: no se
   puede teñir, pero sí dejar de estar pegado al borde del campo anterior. */
.sc-contacto .g-recaptcha,
.sc-contacto [class*='recaptcha'] {
	margin: var(--space-5) 0 0;
}

/* --------------------------------- avisos -------------------------------- */

.sc-contacto-aviso {
	margin: 0 0 var(--space-6);
	color: var(--fg-muted);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

.sc-contacto-ok,
.sc-contacto-error {
	margin: 0 0 var(--space-6);
	padding: var(--space-5);
	border-radius: var(--radius);
	font-size: var(--fs-body);
	line-height: 1.6;
}

.sc-contacto-ok {
	border: 1px solid var(--accent);
	color: var(--fg);
}

.sc-contacto-ok p,
.sc-contacto-ok strong {
	display: block;
	margin: var(--space-3) 0 0;
}

/* El error no puede ser rojo de sistema: en Brasa el fondo YA es oxblood. Se
   marca con un filete grueso a la izquierda, que funciona en las cinco. */
.sc-contacto-error {
	border: 1px solid var(--line-strong);
	border-left: 3px solid var(--fg);
	color: var(--fg);
}

.sc-contacto-producto {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin: 0 0 var(--space-6);
	padding-bottom: var(--space-5);
	border-bottom: 1px solid var(--line);
}

.sc-contacto-producto img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 8px;
}

.sc-contacto-producto p {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--fg-muted);
	line-height: 1.5;
}

.sc-contacto-producto a {
	color: var(--fg);
}