/* ==========================================================================
   NUDA — Página «Contáctanos» (page-contactanos.php)
   Tarjetas de canal, formulario de cotización, horario/asesoría y mapa.
   El banner rojo (.nuda-shop-hero) está en nuda-site.css.
   ========================================================================== */

body.nuda-contact-page,
body.nuda-contact-page .site,
body.nuda-contact-page .site-main { background: #fff; }
.nuda-contact-page .site,
.nuda-contact-page .site-main { max-width: none; margin: 0; padding: 0; }

.nuda-contact { color: var(--nuda-ink); font-family: var(--nuda-body); }
.nuda-contact *,
.nuda-contact *::before,
.nuda-contact *::after { box-sizing: border-box; }

.nuda-contact__wrap,
.nuda-contact-map__wrap {
	width: min(var(--nuda-container), 100% - var(--nuda-gutter) * 2);
	margin: 0 auto;
}
.nuda-contact__wrap { padding: 36px 0 80px; }

html body .nuda-contact h2 { letter-spacing: 0 !important; text-transform: none; }
.nuda-contact p { margin: 0; }

/* Tarjeta base */
.nuda-contact-card {
	border: 1px solid var(--nuda-line);
	border-radius: 16px;
	background: #fff;
}

.nuda-contact__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	color: var(--nuda-red);
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none;
}
.nuda-contact__link svg { transition: transform .25s var(--nuda-ease); }
.nuda-contact__link:hover { color: var(--nuda-red-dark); }
.nuda-contact__link:hover svg { transform: translateX(3px); }

/* ── Canales ──────────────────────────────────────────────────────────────── */
.nuda-contact__channels {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}
.nuda-contact-channel {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	margin: 0;
	padding: 30px 28px;
	transition: border-color .2s, box-shadow .2s;
}
.nuda-contact-channel:hover { border-color: #f0c4c4; box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .25); }
.nuda-contact__badge {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	border: 1px solid var(--nuda-line);
	border-radius: 50%;
	color: var(--nuda-red);
	box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .25);
}
html body .nuda-contact .nuda-contact-channel__title {
	margin: 4px 0 8px;
	color: var(--nuda-ink);
	font: 600 1.4375rem/1.2 var(--nuda-display);
}
.nuda-contact-channel p { color: #555; font-size: 1rem; line-height: 1.5; }

/* ── Formulario + lateral ─────────────────────────────────────────────────── */
.nuda-contact__main {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
	align-items: start;
}
.nuda-contact-form { grid-column: span 2; padding: 50px; }
html body .nuda-contact .nuda-contact-form__title {
	margin: 0 0 12px;
	color: var(--nuda-ink);
	font: 700 2.25rem/1.15 var(--nuda-display);
}
.nuda-contact-form__lead { color: #444; font-size: 1.125rem; line-height: 1.5; }

.nuda-contact-form__notice {
	margin-top: 22px !important;
	padding: 14px 18px;
	border-radius: 10px;
	font-size: .9375rem;
}
.nuda-contact-form__notice.is-success { background: #eaf7ee; color: #1d6b35; }
.nuda-contact-form__notice.is-error { background: #fdeaea; color: var(--nuda-red-dark); }

.nuda-contact-form__form { margin-top: 36px; }
.nuda-contact-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.nuda-contact-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px 20px;
}
.nuda-field { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.nuda-field--full { grid-column: 1 / -1; }
.nuda-field label {
	color: var(--nuda-ink);
	font-size: 1rem;
	font-weight: 500;
}
.nuda-contact abbr { color: var(--nuda-red); text-decoration: none; border: 0; cursor: help; }

html body .nuda-contact .nuda-field input,
html body .nuda-contact .nuda-field textarea {
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 20px;
	border: 1px solid #dcdcdc;
	border-radius: 6px;
	background: #fff;
	color: var(--nuda-ink);
	font: 400 1rem/1.4 var(--nuda-body);
	box-shadow: none;
	outline: none;
	transition: border-color .2s, box-shadow .2s;
}
html body .nuda-contact .nuda-field textarea { height: 150px; padding: 16px 20px; resize: vertical; }
.nuda-contact .nuda-field input::placeholder,
.nuda-contact .nuda-field textarea::placeholder { color: #a3a3a3; }
html body .nuda-contact .nuda-field input:focus,
html body .nuda-contact .nuda-field textarea:focus {
	border-color: var(--nuda-red);
	box-shadow: 0 0 0 3px rgba(214, 0, 0, .12);
}

.nuda-contact-form__consent {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 26px 0 0;
	color: #444;
	font-size: .9375rem;
	cursor: pointer;
}
html body .nuda-contact .nuda-contact-form__consent input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--nuda-red);
	cursor: pointer;
}

html body .nuda-contact .nuda-contact-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	height: 62px;
	margin-top: 44px;
	padding: 0 24px;
	border: 0;
	border-radius: 6px;
	background: var(--nuda-red);
	color: #fff;
	font: 600 1.125rem/1 var(--nuda-body);
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: background-color .2s;
}
html body .nuda-contact .nuda-contact-form__submit:hover { background: var(--nuda-red-dark); }
.nuda-contact-form__submit svg { width: 16px; height: 16px; }

/* Lateral */
.nuda-contact__aside { display: grid; gap: 30px; }
.nuda-contact-hours,
.nuda-contact-help { padding: 38px 40px 40px; }
html body .nuda-contact .nuda-contact-aside__title {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	color: var(--nuda-ink);
	font: 600 1.3125rem/1.2 var(--nuda-display);
}
.nuda-contact-aside__title svg { flex: 0 0 auto; width: 28px; height: 28px; color: var(--nuda-red); }

.nuda-contact-hours dl { margin: 26px 0 0; padding-top: 26px; border-top: 1px solid var(--nuda-line); }
.nuda-contact-hours dl > div + div { margin-top: 24px; }
.nuda-contact-hours dt { font-size: 1rem; font-weight: 600; }
.nuda-contact-hours dd { margin: 6px 0 0; color: #444; font-size: 1.0625rem; }

.nuda-contact-help p { margin-top: 26px; color: #555; font-size: 1rem; line-height: 1.55; }
.nuda-contact-help .nuda-contact__link { margin-top: 26px; }

/* ── Mapa + «Encuéntranos» ────────────────────────────────────────────────── */
.nuda-contact-map { padding: 80px 0; background: #f3f3f3; }
.nuda-contact-map__wrap {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
	align-items: start;
}
.nuda-contact-map__frame {
	grid-column: span 2;
	overflow: hidden;
	height: 474px;
	border: 1px solid var(--nuda-line);
	border-radius: 16px;
	background: #e5e5e5;
}
.nuda-contact-map__frame iframe { display: block; width: 100%; height: 100%; border: 0; }

.nuda-contact-find { padding: 40px; }
html body .nuda-contact .nuda-contact-find__title {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 30px;
	color: var(--nuda-ink);
	font: 600 1.5rem/1.2 var(--nuda-display);
}
.nuda-contact-find__title svg { color: var(--nuda-red); }
.nuda-contact-find ul { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.nuda-contact-find li { display: flex; align-items: flex-start; gap: 16px; }
.nuda-contact-find li > svg { flex: 0 0 auto; margin-top: 1px; color: var(--nuda-ink); }
.nuda-contact-find li strong { display: block; margin-bottom: 4px; font-size: 1rem; font-weight: 600; }
.nuda-contact-find li span { display: block; color: #555; font-size: 1rem; line-height: 1.45; }

.nuda-contact-find__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 56px;
	margin-top: 32px;
	border: 1.5px solid var(--nuda-red);
	border-radius: 6px;
	color: var(--nuda-red);
	font-size: 1.0625rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}
.nuda-contact-find__btn:hover { background: var(--nuda-red); color: #fff; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
	.nuda-contact-channel { padding: 24px 22px; gap: 16px; }
	.nuda-contact__badge { width: 52px; height: 52px; }
	.nuda-contact-form { padding: 40px; }
	.nuda-contact-hours,
	.nuda-contact-help,
	.nuda-contact-find { padding: 32px; }
}

@media (max-width: 1024px) {
	.nuda-contact__channels { grid-template-columns: 1fr; gap: 16px; }
	.nuda-contact__main,
	.nuda-contact-map__wrap { grid-template-columns: 1fr; }
	.nuda-contact-form,
	.nuda-contact-map__frame { grid-column: auto; }
	.nuda-contact__aside { grid-template-columns: 1fr 1fr; gap: 26px; }
	.nuda-contact-map { padding: 56px 0; }
	.nuda-contact-map__frame { height: 380px; }
}

@media (max-width: 640px) {
	.nuda-contact__wrap { padding: 24px 0 56px; }
	.nuda-contact-form { padding: 28px 20px; }
	html body .nuda-contact .nuda-contact-form__title { font-size: 1.75rem; }
	.nuda-contact-form__lead { font-size: 1rem; }
	.nuda-contact-form__form { margin-top: 26px; }
	.nuda-contact-form__grid { grid-template-columns: 1fr; gap: 20px; }
	.nuda-contact-form__consent { align-items: flex-start; }
	html body .nuda-contact .nuda-contact-form__submit { height: 56px; margin-top: 30px; }
	.nuda-contact__aside { grid-template-columns: 1fr; }
	.nuda-contact-hours,
	.nuda-contact-help,
	.nuda-contact-find { padding: 26px 22px; }
	.nuda-contact-map__frame { height: 320px; }
}