/*
 * SGM Landing Mayoristas — Estilos del portal
 *
 * Tokens del sitio:
 *   Primary    : #2B2521 (tinta oscura — panel derecho, botones, texto)
 *   Accent     : #C6855F (terracota — focus, toggles, links, éxito)
 *   Mid text   : #766C61 (texto secundario, subheading)
 *   Muted      : #A0978A / #8A8074 (eyebrow, labels)
 *   Light bg   : #F5F2EC (crema panel derecho)
 *   Border     : #D8D1C4 / #E2DCD0
 *   Left panel : tipografía blanca #FFFDFA sobre foto con overlay rgba(0,0,0,0.32)
 *
 * Tipografía: Libre Franklin (variable, panel izquierdo + coherencia panel derecho)
 *             Roboto fallback para el panel derecho / botones donde aplica.
 *             Questrial → reemplazada por Libre Franklin en titulares del panel izq.
 *
 * NO usar: Cormorant Garamond, Hanken Grotesk
 *
 * TEMPLATE: la página "mayoristas" usa _wp_page_template = elementor_header_footer.
 * Bajo este template Elementor renderiza header/footer reales del sitio y el
 * shortcode [sgm_mayorista_portal] cae directamente en el body (sin
 * .entry-content ni .is-layout-constrained). El portal es full-width por
 * defecto — no se necesita hack de márgenes negativos.
 *
 * SCOPE: todo el CSS de esta página se scopea con la body class propia
 * .sgm-portal-page (agregada via filtro body_class en SGM_Landing::add_body_class(),
 * resuelta por slug con is_page(self::PAGE_SLUG)) — NUNCA por ID de post
 * (page-id-N difiere entre entornos: bug detectado 2026-07-01, el clon local
 * tenía page-id-4997 hardcodeado y no aplicaba en prod).
 *
 * HISTORIAL: se eliminó el bleed-hack TT5 (margin negativo +
 * --wp--preset--spacing--50) porque bajo elementor_header_footer no hay
 * contenedor constrained que romper. Si alguna vez se revierte el template
 * a default (TT5), restaurar esas reglas desde git.
 *
 * 2026-06-29: Panel izquierdo rediseñado — foto de fondo (sasha-login.jpg) con
 * velo oscuro, tipografía Libre Franklin variable, textos actualizados al
 * diseño SG_BannerMayorista. Wordmark "SASHA" agregado al pie del panel.
 * 2026-06-29: Panel izquierdo: overlay rgba(0,0,0,0.32) plano (sin gradiente),
 * background-position center bottom. Panel derecho: paleta exacta de Selene
 * (#F5F2EC fondo, #2B2521 tinta, #C6855F acento, #766C61 muted, etc.).
 */

/* ── @font-face — Libre Franklin variable ────────────────────────────────── */
@font-face {
	font-family: 'Libre Franklin';
	src: url('../fonts/LibreFranklin-VariableFont_wght.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ── Ocultar el título de página WP (inofensivo bajo Elementor, por si acaso) */
.sgm-portal-page .wp-block-post-title {
	display: none;
}

/*
 * ── Sticky footer — landing mayoristas ───────────────────────────────────────
 *
 * En mobile el portal se apila en columna (panel izquierdo + panel derecho).
 * En pantallas cortas o en la tab de login (contenido liviano), el footer puede
 * quedar flotando por encima del fondo del viewport.
 *
 * Técnica: flex column en body con el portal creciendo (flex:1) para llenar
 * el espacio libre entre header y footer.
 *
 * Scoped a .sgm-portal-page (body class propia, agregada via body_class por
 * slug) para NO afectar ninguna otra página del sitio.
 * Idéntico al patrón de .woocommerce-account en sgm-myaccount.css.
 */
body.sgm-portal-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* El portal es el único hijo visible de contenido — crece para llenar el espacio.
   max-height: none anula la restricción desktop (que evitaba que el portal superara
   el viewport) — en sticky-footer mode, el portal puede crecer sin límite vertical. */
body.sgm-portal-page > .sgm-portal {
	flex: 1 0 auto;
	max-height: none;
}

/* Header y footer no crecen */
body.sgm-portal-page > .elementor-location-header,
body.sgm-portal-page > [data-elementor-type="header"],
body.sgm-portal-page > .elementor-location-footer,
body.sgm-portal-page > [data-elementor-type="footer"] {
	flex: 0 0 auto;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ── Portal — contenedor 2 paneles ──────────────────────────────────────── */
.sgm-portal {
	display: flex;
	min-height: calc(100vh - 120px); /* ocupa casi toda la altura entre header y footer */
	max-height: calc(100vh - 60px);  /* no crece más allá del viewport (header ≈ 60-72px según viewport) */
	font-family: 'Libre Franklin', 'Roboto', sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #2B2521;
	background-color: #F5F2EC; /* crema de fondo por si el tema deja gaps entre paneles */
	width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANEL IZQUIERDO — Editorial / foto de fondo
═══════════════════════════════════════════════════════════════════════════ */
.sgm-panel--left {
	flex: 1.15 1 360px;
	/* Foto de fondo: sasha-login.jpg (1200×1800, cover, centrada abajo).
	   Sin background-color base oscuro — el overlay ::before es semitransparente leve
	   para que la foto se vea claramente. */
	background-image: url('../img/sasha-login.jpg');
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
	color: #FFFDFA;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center; /* centra verticalmente el editorial */
	padding: 4rem 5rem;
	position: relative;
	min-height: 0; /* no forzar altura mínima — el portal ya tiene min-height */
}

/* Overlay plano y leve sobre la foto — la foto del mate debe verse claramente,
   solo lo suficiente para que el texto #FFFDFA quede legible.
   Sin gradiente: color sólido semitransparente. */
.sgm-panel--left::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.42);
	z-index: 0;
	pointer-events: none;
}

.sgm-panel-left__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	/* El inner debe quedar sobre el velo */
	position: relative;
	z-index: 1;
}

/* Copy editorial — centrado vertical heredado del flex del panel */
.sgm-editorial {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	max-width: 600px;
}

.sgm-eyebrow {
	font-family: 'Libre Franklin', 'Roboto', sans-serif;
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: none;
	color: rgba(255, 253, 250, 0.80);
	margin: 0;
}

/* Eyebrow en panel derecho — "Portal mayorista": uppercase, letter-spacing .3em, 11px, #A0978A */
.sgm-eyebrow--dark {
	color: #A0978A;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-size: 11px;
}

/* Titular — Libre Franklin, uppercase, "SASHA GATS" en bold (700) via <strong>,
   el resto en light (300). Color #FFFDFA (blanco cálido exacto del diseño). */
.sgm-titular {
	font-family: 'Libre Franklin', 'Roboto', sans-serif;
	font-size: clamp(2.2rem, 3.8vw, 3.5rem);
	font-weight: 300; /* peso base "liviano" para las palabras sin <strong> */
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: #FFFDFA;
	margin: 0;
	white-space: nowrap; /* el único corte lo da el <br> tras "Sasha Gats" */
}

/* "SASHA GATS" dentro del titular: peso bold */
.sgm-titular strong {
	font-weight: 700;
	font-style: normal;
}

/* Separador guion antes de la descripción */
.sgm-editorial-sep {
	display: block;
	color: rgba(255, 253, 250, 0.55);
	font-size: 0.9rem;
	line-height: 1;
	margin-bottom: -0.4rem; /* acercar visualmente a la descripción */
}

.sgm-descripcion {
	font-family: 'Libre Franklin', 'Roboto', sans-serif;
	font-size: 0.9rem;
	font-weight: 300;
	color: rgba(255, 253, 250, 0.82);
	margin: 0;
	line-height: 1.7;
}

/* Bullets */
.sgm-bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.sgm-bullets li {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	font-family: 'Libre Franklin', 'Roboto', sans-serif;
	font-size: 0.88rem;
	font-weight: 300;
	color: rgba(255, 253, 250, 0.85);
}

.sgm-bullet-dot {
	color: rgba(255, 253, 250, 0.65);
	font-size: 1rem;
	line-height: 1.5;
	flex-shrink: 0;
}

/* Wordmark — imagen del logo blanco al pie del panel izquierdo.
   Reemplaza el texto "S·A·S·H·A" por sasha-logo-white.png (900×200).
   2026-06-29: cambiado de <p> de texto a <img> para fidelidad exacta al diseño. */
.sgm-wordmark {
	margin-top: 2rem; /* espacio entre bullets y logo */
	display: block;
	line-height: 0; /* evita espacio extra bajo el img */
}

.sgm-wordmark img {
	width: 170px;   /* ancho visual ~160-190px según spec */
	height: auto;
	display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANEL DERECHO — Auth / claro
═══════════════════════════════════════════════════════════════════════════ */
.sgm-panel--right {
	flex: 1 1 420px;
	background-color: #F5F2EC;
	display: flex;
	align-items: flex-start;   /* inner siempre arranca desde arriba → scroll baja, no corta arriba */
	justify-content: center;
	padding: 1.5rem 3.5rem;
	min-height: 0;
	overflow-y: auto;
}

/* Tab login: el inner es pequeño → centrarlo verticalmente con margin auto */
.sgm-panel--right .sgm-panel-right__inner {
	margin-top: auto;
	margin-bottom: auto;
}

/* Tab solicitud activo: el inner ocupa casi todo el panel → pegarlo arriba para no cortar */
.sgm-panel--right:has(#sgm-panel-solicitud.sgm-tab-panel--active) .sgm-panel-right__inner {
	margin-top: 0;
	margin-bottom: 0;
}

.sgm-panel-right__inner {
	width: 100%;
	max-width: 440px;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

/* Bloque heading + subheading dinámicos (encima de las tabs) */
.sgm-auth-header {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

/* Heading de autenticación — "Ingresá a tu cuenta" / "Solicitá tu acceso":
   color #2B2521, ~34px, Libre Franklin peso 400, sentence-case */
.sgm-auth-heading {
	font-family: 'Libre Franklin', 'Roboto', sans-serif;
	font-size: 34px;
	font-weight: 400;
	color: #2B2521;
	margin: 0;
	text-transform: none;
}

/* Subheading de autenticación — color #766C61, 14px, line-height 1.6 */
.sgm-auth-subheading {
	font-size: 14px;
	color: #766C61;
	margin: 0;
	line-height: 1.6;
}

/* ── Avisos / alertas ──────────────────────────────────────────────────── */
.sgm-aviso {
	padding: 0.75rem 1rem;
	border-radius: 4px;
	font-size: 0.88rem;
	line-height: 1.5;
}

/* Aviso en form solicitud: más compacto */
.sgm-form--solicitud + * .sgm-aviso--info,
#sgm-panel-solicitud > .sgm-aviso--info {
	padding: 0.3rem 0.65rem;
	font-size: 0.8rem;
	line-height: 1.35;
}

.sgm-aviso--info {
	background: #EFEAE0;
	border: 1px solid #E2DCD0;
	color: #766C61;
}

.sgm-aviso--error {
	background: #fdf2f2;
	color: #9e3a3a;
	border-left: 3px solid #c96060;
}

.sgm-aviso--warning {
	background: #fdf8f0;
	color: #7a5a2e;
	border-left: 3px solid #D4C9B7;
}

/* ── Tabs ──────────────────────────────────────────────────────────────── */
.sgm-tabs {
	display: flex;
	border-bottom: 1px solid #E2DCD0;
	gap: 0;
}

.sgm-tab {
	flex: 1;
	background: none;
	border: none;
	padding: 0.5rem 1rem;
	font-family: 'Libre Franklin', 'Roboto', sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #A89F92;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 0.18s, border-color 0.18s;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sgm-tab:hover {
	color: #2B2521;
}

.sgm-tab--active {
	color: #2B2521;
	border-bottom-color: #2B2521;
}

/* ── Indicador de tab activo — cambia INSTANTÁNEO (sin deslizamiento) ───── */
.sgm-tabs {
	position: relative; /* contexto para el indicador absoluto */
}

.sgm-tab-indicator {
	position: absolute;
	bottom: -1px;
	left: 0;
	height: 2px;
	background-color: #2B2521;
	/* Sin transición: el indicador salta instantáneo, solo el wrap anima */
}

/* ── Contenedor de paneles — anima su altura (acordeón) ─────────────────── */
.sgm-panels-wrap {
	overflow: hidden;
	transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
	.sgm-panels-wrap {
		transition: none;
	}
}

/* ── Panels de tab — swap instantáneo, sin fade ni slide ────────────────── */
.sgm-tab-panel {
	display: none;      /* inactivo: fuera del flujo, no ocupa espacio     */
}

.sgm-tab-panel--active {
	display: block;     /* activo: en flujo, define la altura del wrap      */
}

/* ── Formulario base ───────────────────────────────────────────────────── */
.sgm-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Form solicitud: gap reducido para que entre en viewport */
.sgm-form--solicitud {
	gap: 0.65rem;
}

/* Grid 2 columnas para el form de solicitud */
.sgm-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

/* Grid solicitud: gap reducido vertical */
.sgm-form--solicitud .sgm-form-grid {
	gap: 0.5rem 1rem; /* row-gap 0.5rem, column-gap 1rem */
}

.sgm-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

/* Campos del form solicitud: label+input más compactos */
.sgm-form--solicitud .sgm-field {
	gap: 0.2rem;
}

.sgm-field--full {
	grid-column: 1 / -1;
}

.sgm-field--check {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.sgm-label {
	font-size: 11px;
	font-weight: 500;
	color: #8A8074;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sgm-label-optional {
	font-weight: 400;
	color: #8A8074;
	font-size: 11px;
	margin-left: 0.25rem;
}

.sgm-required {
	color: #8A8074;
	margin-left: 0.15rem;
}

/* Inputs — estilo subrayado (sin caja cerrada) */
.sgm-portal .sgm-input,
.sgm-portal input[type="text"],
.sgm-portal input[type="email"],
.sgm-portal input[type="password"],
.sgm-portal input[type="tel"],
.sgm-portal textarea {
	width: 100% !important;
	padding: 9px 2px !important;
	border: none !important;
	border-bottom: 1px solid #D8D1C4 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	font-family: 'Libre Franklin', 'Roboto', sans-serif;
	font-size: 15px;
	color: #2B2521;
	transition: border-bottom-color 0.18s;
	outline: none;
	-webkit-appearance: none;
}

.sgm-portal .sgm-input:focus,
.sgm-portal input[type="text"]:focus,
.sgm-portal input[type="email"]:focus,
.sgm-portal input[type="password"]:focus,
.sgm-portal input[type="tel"]:focus,
.sgm-portal textarea:focus {
	border-bottom-color: #C6855F !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	background: transparent !important;
}

.sgm-portal .sgm-input::placeholder,
.sgm-portal input::placeholder,
.sgm-portal textarea::placeholder {
	color: #B4AC9E;
}

.sgm-textarea {
	resize: vertical;
	min-height: 80px;
}

/* Textarea del form solicitud más compacto */
.sgm-form--solicitud .sgm-textarea {
	min-height: 52px;
	rows: 2;
}

/* Inputs en form solicitud — padding vertical reducido */
.sgm-form--solicitud .sgm-input,
.sgm-form--solicitud input[type="text"],
.sgm-form--solicitud input[type="email"],
.sgm-form--solicitud input[type="tel"],
.sgm-form--solicitud textarea {
	padding: 5px 2px !important;
	font-size: 0.875rem;
}

/* Selects — mismo estilo subrayado que los inputs */
.sgm-portal select.sgm-input,
.sgm-portal .sgm-form--solicitud select {
	width: 100% !important;
	padding: 5px 2px !important;
	border: none !important;
	border-bottom: 1px solid #D8D1C4 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	font-family: 'Libre Franklin', 'Roboto', sans-serif;
	font-size: 15px;
	color: #2B2521;
	transition: border-bottom-color 0.18s;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.sgm-portal select.sgm-input:focus,
.sgm-portal .sgm-form--solicitud select:focus {
	border-bottom-color: #C6855F !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* Input con botón mostrar/ocultar contraseña */
.sgm-input-wrap {
	position: relative;
	display: flex;
}

.sgm-input-wrap .sgm-input--pw {
	padding-right: 5.5rem;
}

.sgm-btn-showpw {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	background: none;
	border: none;
	padding: 0 0.85rem;
	font-size: 11px;
	font-weight: 500;
	color: #C6855F;
	cursor: pointer;
	white-space: nowrap;
	font-family: 'Libre Franklin', 'Roboto', sans-serif;
	transition: color 0.15s;
}

.sgm-btn-showpw:hover {
	color: #2B2521;
}

/* Checkbox — "Recordarme": 13px, #766C61; accent-color #2B2521 */
.sgm-check-label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 13px;
	color: #766C61;
	cursor: pointer;
	line-height: 1.45;
}

.sgm-check {
	flex-shrink: 0;
	margin-top: 0.15rem;
	accent-color: #2B2521;
	width: 15px;
	height: 15px;
}

/* ── Links ─────────────────────────────────────────────────────────────── */
.sgm-link {
	color: #2B2521;
	text-decoration: underline;
	font-size: inherit;
}

.sgm-link:hover {
	color: #766C61;
}

/* "¿Olvidaste tu contraseña?" — 13px, #766C61, border-bottom underline */
.sgm-link--forgot {
	font-size: 13px;
	white-space: nowrap;
	color: #766C61;
	text-decoration: none;
	border-bottom: 1px solid #D8D1C4;
}

.sgm-link--forgot:hover {
	color: #2B2521;
}

/* Link acento en footer — "Solicitá tu acceso" y similares */
.sgm-link--inline {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: 'Libre Franklin', 'Roboto', sans-serif;
	text-decoration: underline;
	color: #C6855F;
	font-size: inherit;
}

.sgm-link--inline:hover {
	color: #2B2521;
}

/* ── Botones ───────────────────────────────────────────────────────────── */
.sgm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 1.5rem;
	border-radius: 4px;
	font-family: 'Libre Franklin', 'Roboto', sans-serif;
	font-size: 0.92rem;
	font-weight: 600;
	cursor: pointer;
	border: none;
	text-decoration: none;
	transition: background-color 0.18s, color 0.18s;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* Botón INGRESAR / Enviar solicitud: #2B2521 fondo, #F5F2EC texto */
.sgm-btn--primary {
	background-color: #2B2521;
	color: #F5F2EC;
}

.sgm-btn--primary:hover {
	background-color: #3d352d;
}

.sgm-btn--full {
	width: 100%;
}

/* ── Footer del form — texto #766C61, link/acento #C6855F ─────────────── */
.sgm-form__footer {
	margin: 0;
	text-align: center;
	font-size: 0.85rem;
	color: #766C61;
}

/* ── Estado de éxito ───────────────────────────────────────────────────── */
.sgm-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1rem;
	padding: 2rem 0;
}

/* Ícono: borde 1.5px #C6855F, color #C6855F; sin background sólido */
.sgm-success__icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: transparent;
	border: 1.5px solid #C6855F;
	color: #C6855F;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	font-weight: 700;
}

/* Título: #2B2521 */
.sgm-success__titulo {
	font-family: 'Libre Franklin', 'Roboto', sans-serif;
	font-size: 1.35rem;
	font-weight: 400;
	color: #2B2521;
	margin: 0;
}

/* Texto: #766C61 */
.sgm-success__texto {
	font-size: 0.92rem;
	color: #766C61;
	max-width: 320px;
	margin: 0;
	line-height: 1.6;
}

/* ── Honeypot — siempre oculto ─────────────────────────────────────────── */
.sgm-honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
	opacity: 0;
	pointer-events: none;
	tab-size: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — paneles apilados en mobile
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
	.sgm-portal {
		flex-direction: column;
		min-height: auto;
		max-height: none; /* en mobile el portal crece sin límite vertical */
		height: auto; /* en mobile el portal puede crecer libremente */
	}

	.sgm-panel--left {
		padding: 2.5rem 1.5rem 3rem;
		justify-content: flex-start;
		align-items: flex-start;
		/*
		 * FIX 2026-07-01b (bug reportado por Yago en prod): el panel tiene
		 * flex: 1.15 1 360px en desktop. En mobile (columna), ese flex-basis
		 * 360px define la altura del item IGNORANDO el alto real del contenido
		 * (clampeado por min-height a 420px), y el contenido medía 512px →
		 * el wordmark blanco desbordaba 52px por debajo de la foto y quedaba
		 * flotando sobre la zona crema del panel de auth (invisible).
		 * flex-basis:auto hace que el panel crezca con su contenido, así la
		 * foto de fondo SIEMPRE contiene al logo.
		 */
		flex-basis: auto;
		/* En mobile la foto cubre el panel apilado; min-height da contexto visual */
		min-height: 420px;
	}

	/* Aire pedido por Yago: el logo respira dentro de la foto */
	.sgm-panel--left .sgm-wordmark {
		margin-top: 2rem;
		padding-bottom: 0.5rem;
	}

	.sgm-panel--right {
		padding: 2.5rem 1.5rem 2rem;
		align-items: flex-start;
		min-height: auto;
		overflow-y: visible; /* en mobile puede scrollear la página */
	}

	/* Aire pedido por Yago: el eyebrow "PORTAL MAYORISTA" con padding propio */
	.sgm-panel--right .sgm-eyebrow--dark {
		padding-top: 0.25rem;
	}

	.sgm-panel-right__inner {
		max-width: 100%;
	}

	.sgm-form-grid {
		grid-template-columns: 1fr;
	}

	.sgm-field--full {
		grid-column: 1;
	}

	.sgm-titular {
		font-size: 1.7rem;
	}

	.sgm-wordmark img {
		width: 130px;
	}

	/* En mobile restaurar inputs a tamaño normal */
	.sgm-form--solicitud .sgm-input,
	.sgm-form--solicitud input[type="text"],
	.sgm-form--solicitud input[type="email"],
	.sgm-form--solicitud input[type="tel"],
	.sgm-form--solicitud textarea {
		padding: 8px 2px !important;
		font-size: 0.92rem;
	}

	.sgm-form--solicitud .sgm-form-grid {
		gap: 0.75rem;
	}
}