/* =====================================================================
   CHECKOUT — Compra con tarjeta (P1-3) · Destino Castilla
   ---------------------------------------------------------------------
   Figma: página "🎨 Diseños gradas", sección "7. Compra - con tarjeta"
          (node 30127:67150). Frames maquetados:
            · 52-d-compra 11 (30127:67279)  desktop 1440x2403  → checkout
            · 53-m-compra 7  (30127:67541)  mobile  375x3919   → checkout
            · 60-d-compra 15 (30127:67481)  desktop 1440x869   → procesando
            · 61-m-compra 11 (30127:67707)  mobile  375x858    → procesando
            · 62-d-compra 16 (30127:67492)  desktop 1440x1033  → comprobante
            · 63-m-compra 12 (30127:67718)  mobile  375x1317   → comprobante
   Solo frontend (datos dummy). Todo bajo .chk-page para no colisionar con
   castilla.css ni con los otros partials de sección.
   Markup MODULAR por bloques: la sesión de "Compra con POS" (P1-4) reusa
   .chk-methods / .chk-pane / .chk-pay y solo añade su propio panel.
   ===================================================================== */

.chk-page {
	/* Paleta (muestreada del render de Figma) */
	--chk-olive-dark:  #302E12;
	--chk-gold:        #B08524;
	--chk-gold-dark:   #A37800;   /* título de la notificación */
	--chk-gold-soft:   #E8D9B5;   /* punto interior del radio activo */
	--chk-cream:       #FFF8E5;   /* fondo notificación */
	--chk-olive-base:  #A6A64F;   /* isotipo Ð */
	--chk-header:      #14142B;
	--chk-body:        #4E4B66;
	--chk-label:       #6E7191;
	--chk-placeholder: #A0A3BD;
	--chk-line:        #D9DBE9;
	--chk-input:       #EFF0F6;
	--chk-bg:          #FCFCFC;
	--chk-disabled:    #C5C7D8;
	--chk-success:     #27BE69;
	--chk-danger:      #D02F2F;
	--chk-danger-bg:   #FDF1F1;

	background: var(--chk-bg);
	color: var(--chk-body);
	font-family: 'Montserrat', sans-serif;
	overflow-x: hidden;
}
.chk-page *,
.chk-page *::before,
.chk-page *::after { box-sizing: border-box; }

.chk-page h1, .chk-page h2, .chk-page h3, .chk-page p, .chk-page ul { margin: 0; }
.chk-page ul { list-style: none; padding: 0; }
.chk-page fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.chk-page legend { padding: 0; float: left; width: 100%; }

/* Tinta del isotipo Ð (SVG inline con fill="currentColor") */
.chk-ink-olive { color: var(--chk-olive-base); }
.chk-ink-mist  { color: var(--chk-input); }
.chk-ink-olive svg, .chk-ink-mist svg { width: 100%; height: 100%; display: block; fill: currentColor; }

/* ------------------------------------------------------------------ *
 * 0. Chrome minimal del checkout (Figma 7/8)
 *    Header = banda oliva con SOLO el logo centrado (sin Menú/Ingresar/
 *    Spectrum). Footer = "Un proyecto de Spectrum" centrado en la banda.
 *    Se activa por la variante `minimal` del header + la clase de body
 *    `checkout-chrome` (ambas las setea inc/checkout.php). Tokens del
 *    chrome (--chrome-*) los define chrome.css sobre .site-header/.site-footer.
 * ------------------------------------------------------------------ */
/* .site-header--minimal se define en chrome.css (global) para reutilizarse en todo el evento. */

body.checkout-chrome .site-footer { padding-top: 28px; padding-bottom: 28px; }
body.checkout-chrome .site-footer__inner { display: flex; justify-content: center; align-items: center; }
body.checkout-chrome .site-footer__sitemap,
body.checkout-chrome .site-footer__divider,
body.checkout-chrome .site-footer__info,
body.checkout-chrome .site-footer__logo,
body.checkout-chrome .site-footer__by--mobile { display: none !important; }
body.checkout-chrome .site-footer__brand { flex-direction: row; align-self: auto; gap: 0; margin: 0; }
body.checkout-chrome .site-footer__by { display: inline-flex !important; align-self: center; color: var(--chrome-white); }
body.checkout-chrome .site-footer__by .icon-spectrum { color: var(--chrome-white); }

/* ------------------------------------------------------------------ *
 * 1. Volver  (Figma: Frame 696 · x=162, y=180)
 * ------------------------------------------------------------------ */
.chk-back { padding-top: 65px; }
.chk-back__inner { max-width: 1440px; margin: 0 auto; padding: 0 162px; }

.chk-back-link {
	display: inline-flex; align-items: center; gap: 8px;
	font-weight: 500; font-size: 16px; line-height: 20px;
	color: var(--chk-gold); text-decoration: none;
}
.chk-back-link:hover { color: var(--chk-gold-dark); text-decoration: none; }
.chk-back-link [class^="icon-"] { font-size: 16px; line-height: 1; }

/* ------------------------------------------------------------------ *
 * 2. Layout de 2 columnas
 *    Figma 1440: resumen 479 (a sangre por la izquierda, x=0) | gap 84 |
 *    formulario 828 (x=563..1391)
 * ------------------------------------------------------------------ */
.chk-layout {
	max-width: 1440px;
	margin: 0 auto;
	padding-top: 104px;            /* Figma: back(180+20=200) -> contenido(304) */
	padding-bottom: 100px;
	display: grid;
	grid-template-columns: minmax(300px, 479px) minmax(0, 828px);
	column-gap: 84px;
	align-items: start;
}
.chk-main { min-width: 0; }

/* ------------------------------------------------------------------ *
 * 3. Resumen de la reserva  (Figma: Group 336 · 479x570)
 *    Tarjeta "glass" 409x443 con inset 35/57 sobre la foto.
 * ------------------------------------------------------------------ */
.chk-summary {
	position: relative;
	width: 100%;
	aspect-ratio: 479 / 570;
	overflow: hidden;
	border-radius: 0 24px 24px 0;
}
.chk-summary__photo {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.chk-summary__card {
	position: absolute;
	left: 7.3%;              /* 35/479 */
	right: 7.3%;
	top: 10%;                /* 57/570 */
	bottom: 12.3%;           /* 70/570 */
	padding: 56px;
	border-radius: 24px;
	background: rgba(252, 252, 252, .88);
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	display: flex; flex-direction: column;
}
.chk-summary__model {
	font-weight: 500; font-size: 16px; line-height: 22px;
	color: var(--chk-header);
}
.chk-summary__num {
	margin-top: 4px;
	font-weight: 700; font-size: 36px; line-height: 40px;
	letter-spacing: .01em; text-transform: uppercase;
	color: var(--chk-header);
}
.chk-summary__meta {
	margin-top: 10px;
	font-weight: 500; font-size: 20px; line-height: 28px;
	color: var(--chk-header);
}
.chk-bullets { margin-top: 26px; display: grid; row-gap: 6px; }
.chk-bullets li {
	display: flex; align-items: center; gap: 12px;
	font-weight: 500; font-size: 16px; line-height: 22px;
	color: var(--chk-body);
}
.chk-bullet {
	width: 4px; height: 4px; border-radius: 50%;
	background: var(--chk-gold); flex: 0 0 4px;
}

/* ------------------------------------------------------------------ *
 * 4. Cabecera del formulario  (Figma: Frame 692 · 546x104 + isotipo 64x68)
 * ------------------------------------------------------------------ */
.chk-head { display: grid; grid-template-columns: 64px 1fr; column-gap: 48px; }
.chk-head__mark { width: 64px; height: 68px; }
.chk-head__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.chk-head__body { min-width: 0; }
.chk-title {
	font-weight: 700; font-size: 48px; line-height: 56px;
	letter-spacing: .01em; text-transform: uppercase;
	color: var(--chk-header);
}

/* Timer de sesión (Figma: componente "Status" del bloque de título) */
.chk-timer {
	margin-top: 8px;
	display: flex; align-items: center; gap: 8px;
	font-weight: 600; font-size: 14px; line-height: 20px;
	color: var(--chk-success);
}
.chk-timer__dot {
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--chk-success); flex: 0 0 12px;
}
.chk-head__note {
	margin-top: 8px;
	font-weight: 500; font-size: 14px; line-height: 20px;
	color: var(--chk-body);
	max-width: 613px;
}

/* ------------------------------------------------------------------ *
 * 5. Búsqueda por DPI  (Figma: Frame 767 · 828x124, bg #EFF0F6)
 * ------------------------------------------------------------------ */
.chk-dpi {
	margin-top: 48px;
	background: var(--chk-input);
	border-radius: 16px;
	padding: 24px;
}
.chk-dpi__label {
	font-weight: 500; font-size: 16px; line-height: 20px;
	color: var(--chk-header);
}
.chk-dpi__row { margin-top: 16px; display: flex; align-items: center; gap: 16px; }
.chk-search {
	position: relative;
	width: 327px; max-width: 100%;
	height: 40px;
	background: #fff;
	border: 1px solid var(--chk-line);
	border-radius: 8px;
	display: flex; align-items: center;
	padding: 0 16px 0 42px;
}
.chk-search__icon {
	position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
	font-size: 16px; color: var(--chk-placeholder); line-height: 1;
}
.chk-search input {
	width: 100%; border: 0; background: transparent; outline: none;
	font-family: inherit; font-weight: 500; font-size: 16px; color: var(--chk-header);
}
.chk-search input::placeholder { color: var(--chk-placeholder); }

/* ------------------------------------------------------------------ *
 * 6. Botones
 * ------------------------------------------------------------------ */
.chk-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	border: 0; border-radius: 40px;
	font-family: inherit; font-weight: 600; font-size: 16px; line-height: 1;
	cursor: pointer; text-decoration: none;
	transition: background .18s ease, color .18s ease;
	/* <input type=submit|button> nativo ignora background sin appearance:none (WebKit) */
	-webkit-appearance: none; appearance: none;
}
.chk-btn--primary { background: var(--chk-gold); color: #fff; padding: 12px 24px; }
.chk-btn--primary:hover { background: var(--chk-gold-dark); color: #fff; }
.chk-btn--sm { height: 41px; padding: 0 24px; }
.chk-btn--pay { min-width: 248px; height: 52px; padding: 0 28px; white-space: nowrap; }
.chk-btn[disabled], .chk-btn.is-disabled {
	background: var(--chk-disabled); color: #fff; cursor: not-allowed; pointer-events: none;
}
/* <input type=button|submit>: el reboot de Bootstrap ([type=button]{appearance:button})
   y la regla nativa ganan por especificidad a .chk-btn — se scopea con .chk-page. */
.chk-page .chk-btn { -webkit-appearance: none; appearance: none; }
.chk-page .chk-btn--primary { background: var(--chk-gold); color: #fff; }
.chk-page .chk-btn--primary:hover { background: var(--chk-gold-dark); color: #fff; }
.chk-page .chk-btn--pay,
.chk-page .chk-btn--finish { background: var(--chk-gold); color: #fff; }
.chk-page .chk-btn--pay:hover,
.chk-page .chk-btn--finish:hover { background: var(--chk-gold-dark); color: #fff; }
.chk-page .chk-btn[disabled], .chk-page .chk-btn.is-disabled { background: var(--chk-disabled); color: #fff; }

/* ------------------------------------------------------------------ *
 * 7. Formulario de datos personales (Figma: "form checkout" 828x698)
 * ------------------------------------------------------------------ */
.chk-form { margin-top: 48px; }
.chk-form__title {
	font-weight: 700; font-size: 20px; line-height: 24px;
	color: var(--chk-header);
}
.chk-form__hint {
	margin-top: 14px;
	font-weight: 500; font-size: 14px; line-height: 18px;
	color: var(--chk-header);
}
.chk-grid {
	margin-top: 22px;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 32px; row-gap: 24px;
}
.chk-grid--cards { row-gap: 16px; }
.chk-cell--empty { display: block; }

/* Campo con línea inferior (Figma: "Text Input" 398x60) */
.chk-field {
	position: relative;
	height: 60px;
	border-bottom: 2px solid var(--chk-line);
	display: flex; align-items: center;
	padding: 0 20px;
}
.chk-field input,
.chk-field select {
	width: 100%; border: 0; background: transparent; outline: none;
	font-family: inherit; font-weight: 500; font-size: 16px; line-height: 20px;
	color: var(--chk-header);
}
.chk-field input::placeholder { color: var(--chk-placeholder); }
.chk-field:focus-within { border-bottom-color: var(--chk-gold); }
.chk-field--narrow { max-width: 146px; }

/* ------------------------------------------------------------------ *
 * 7-bis. Método POS (Figma "8. Compra - con POS", nodo 30127:67769)
 *   clave de asesor (4 dígitos) → código de autorización → Finalizar
 * ------------------------------------------------------------------ */
.chk-pos { display: flex; flex-direction: column; gap: 40px; margin-top: 8px; }
.chk-pos__label {
	margin: 0 0 28px;
	font-weight: 500; font-size: 16px; line-height: 20px;
	color: var(--chk-header);
}
.chk-pos__pin { display: flex; gap: 16px; }
/* Especificidad elevada: la regla global input[type=text] de castilla.css
   (width:100%) tiene más peso que una sola clase y estiraba las casillas. */
.chk-pos__pin .chk-pos__box {
	width: 50px; height: 56px; margin: 0; padding: 0;
	border: 0; border-bottom: 2px solid var(--chk-line);
	border-radius: 8px 8px 0 0;
	background: var(--chk-input);
	text-align: center;
	font-family: inherit; font-weight: 500; font-size: 18px; color: var(--chk-header);
	outline: none;
	transition: background .18s ease, border-color .18s ease;
}
.chk-pos__pin .chk-pos__box:focus { border-bottom-color: var(--chk-gold); }
.chk-pos__pin .chk-pos__box.is-filled { background: #E9F6EE; border-bottom-color: #27BE69; }
.chk-pos__step--auth .chk-field { max-width: 232px; }
.chk-pos__action { margin-top: 8px; }

/* La clave de asesor real la genera el plugin pincodeInput sobre #code-pos:
   .pincode-input-container > input.pincode-input-text (+ .success en el
   contenedor al validar, lo añade page-pago-reserva.php). Se estiliza con la
   misma spec del Figma (4 casillas 50x56, gap 16, esquinas sup. 8px, subrayado
   dorado; verde #27BE69 al completar) que la maqueta tenía en .chk-pos__box.
   width:!important vence a input[type=text]{width:100%} de castilla.css. */
.chk-pane--pos .pincode-input-container { display: flex; gap: 16px; }
.chk-pane--pos .pincode-input-text {
	width: 50px !important; height: 56px; margin: 0; padding: 0;
	border: 0; border-bottom: 2px solid var(--chk-line);
	border-radius: 8px 8px 0 0;
	background: var(--chk-input);
	text-align: center;
	font-family: inherit; font-weight: 500; font-size: 18px; color: var(--chk-header);
	box-shadow: none; outline: none;
	transition: background .18s ease, border-color .18s ease;
}
.chk-pane--pos .pincode-input-text:focus { border-bottom-color: var(--chk-gold); background: var(--chk-input); }
.chk-pane--pos .pincode-input-container.success .pincode-input-text { background: #E9F6EE; border-bottom-color: #27BE69; }
.chk-btn--finish {
	min-width: 140px; height: 56px; padding: 0 32px;
	background: var(--chk-gold); color: #fff;
}
.chk-btn--finish:hover { background: var(--chk-gold-dark); color: #fff; }

/* Grupos de radios */
.chk-radios { padding-left: 16px; }
.chk-radios__legend {
	font-weight: 700; font-size: 16px; line-height: 22px;
	color: var(--chk-header);
	margin-bottom: 14px;
}
.chk-radio { display: flex; align-items: center; gap: 14px; height: 44px; cursor: pointer; }
.chk-radio input { position: absolute; opacity: 0; pointer-events: none; }
.chk-radio__mark {
	width: 32px; height: 32px; border-radius: 50%;
	background: var(--chk-line); flex: 0 0 32px;
	display: grid; place-items: center;
}
.chk-radio__mark::after {
	content: ''; width: 12px; height: 12px; border-radius: 50%;
	background: transparent;
}
.chk-radio input:checked + .chk-radio__mark { background: var(--chk-gold); }
.chk-radio input:checked + .chk-radio__mark::after { background: var(--chk-gold-soft); }
.chk-radio__text {
	font-weight: 500; font-size: 16px; line-height: 22px; color: var(--chk-body);
}

/* Separador (Figma: Vector 2 · 738px) */
.chk-sep {
	margin: 40px 0 0;
	border: 0; border-top: 1px solid var(--chk-line);
	width: 738px; max-width: 100%;
}

/* ------------------------------------------------------------------ *
 * 8. Método de pago: tabs + notificación
 *    (Figma: Frame 802 · 828x216 · Tabs 180x40 · Notification 482x102)
 * ------------------------------------------------------------------ */
.chk-methods { margin-top: 40px; }
.chk-methods__title {
	font-weight: 700; font-size: 24px; line-height: 26px;
	letter-spacing: .01em; text-transform: uppercase;
	color: var(--chk-header);
}
.chk-tabs { margin-top: 24px; display: flex; width: 360px; max-width: 100%; }
.chk-tab {
	flex: 1 1 0; height: 40px;
	background: transparent; border: 0;
	border-bottom: 2px solid var(--chk-placeholder);
	font-family: inherit; font-weight: 600; font-size: 16px; line-height: 1;
	color: var(--chk-placeholder);
	cursor: pointer;
}
.chk-tab.is-active { color: var(--chk-gold); border-bottom-color: var(--chk-gold); }

.chk-note {
	margin-top: 24px;
	width: 482px; max-width: 100%;
	background: var(--chk-cream);
	border-radius: 12px;
	padding: 16px 20px;
	display: grid; grid-template-columns: 24px 1fr; column-gap: 12px;
}
.chk-note__icon {
	width: 24px; height: 24px; border-radius: 50%;
	border: 2px solid var(--chk-gold-dark);
	color: var(--chk-gold-dark);
	display: grid; place-items: center;
	font-weight: 700; font-size: 14px; line-height: 1;
}
.chk-note__title {
	font-weight: 700; font-size: 18px; line-height: 24px;
	color: var(--chk-gold-dark);
}
.chk-note__text {
	margin-top: 4px;
	font-weight: 500; font-size: 14px; line-height: 20px;
	color: var(--chk-header);
}
/* Variante de error (no existe frame propio en Figma; se deriva del mismo
   componente Notification para el estado de FALLO del pago). */
.chk-note--error { background: var(--chk-danger-bg); }
.chk-note--error .chk-note__icon { border-color: var(--chk-danger); color: var(--chk-danger); }
.chk-note--error .chk-note__title { color: var(--chk-danger); }

/* ------------------------------------------------------------------ *
 * 9. Panel de datos de la tarjeta (Figma: Frame 803 · 828x290)
 *    .chk-pane es el contenedor genérico que reusa la variante POS.
 * ------------------------------------------------------------------ */
.chk-pane { margin-top: 24px; }
.chk-pane[hidden] { display: none; }
.chk-pane__title {
	font-weight: 700; font-size: 16px; line-height: 22px;
	color: var(--chk-header);
}
.chk-pane__lead {
	margin-top: 16px;
	font-weight: 500; font-size: 14px; line-height: 20px;
	color: var(--chk-header);
}
.chk-pane__list { margin-top: 6px; display: grid; row-gap: 0; }
.chk-pane__list li {
	position: relative; padding-left: 20px;
	font-weight: 500; font-size: 14px; line-height: 20px;
	color: var(--chk-header);
}
.chk-pane__list li::before {
	content: '·'; position: absolute; left: 8px; top: -1px;
	color: var(--chk-header); font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * 10. Pie de pago: badges + botón + logos (Figma: Frame 706 · 828x217)
 * ------------------------------------------------------------------ */
.chk-pay { margin-top: 44px; }
.chk-badges {
	display: flex; gap: 32px; justify-content: center;
	max-width: 404px; margin: 0 auto;
}
.chk-badge {
	flex: 1 1 186px; height: 69px;
	border: 1px dashed var(--chk-line);
	border-radius: 8px;
	display: grid; place-items: center; text-align: center;
	font-weight: 500; font-size: 16px; line-height: 20px;
	color: var(--chk-header);
	background: #fff;
	padding: 8px;
}
.chk-pay__action {
	margin-top: 48px;
	display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.chk-pay__cards { width: 171px; height: 32px; display: block; }

/* ------------------------------------------------------------------ *
 * 11. Estado "Estamos procesando tu pago"
 *     (Figma: 60-d-compra 15 / 61-m-compra 11)
 * ------------------------------------------------------------------ */
.chk-processing {
	position: relative;
	min-height: 652px;
	background: var(--chk-bg);
	display: grid; place-items: center;
	overflow: hidden;
	text-align: center;
}
.chk-processing[hidden] { display: none; }
.chk-processing__texture {
	position: absolute;
	left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 874px; height: 934px;
	opacity: 1;
	pointer-events: none;
}
.chk-processing__texture img { width: 100%; height: 100%; object-fit: contain; display: block; }
.chk-processing__inner { position: relative; width: 298px; max-width: 90%; }
.chk-processing__logo { width: 143px; height: auto; display: block; margin: 0 auto; }
.chk-processing__logo svg { width: 100%; height: auto; display: block; }
.chk-processing__logo svg path { fill: var(--chk-olive-dark); }
.chk-processing__text {
	margin-top: 40px;
	font-weight: 500; font-size: 20px; line-height: 28px;
	color: var(--chk-header);
}

/* ------------------------------------------------------------------ *
 * 12. Comprobante de pago (éxito)
 *     (Figma: 62-d-compra 16 · 1440x1033 / 63-m-compra 12)
 * ------------------------------------------------------------------ */
.chk-voucher { position: relative; overflow: hidden; padding: 100px 0 132px; }
.chk-voucher__texture {
	position: absolute; right: -55px; top: -22px;
	width: 874px; height: 934px; opacity: 1; pointer-events: none;
}
.chk-voucher__texture img { width: 100%; height: 100%; object-fit: contain; display: block; }
.chk-voucher__inner {
	position: relative;
	max-width: 1440px; margin: 0 auto; padding: 0 162px;
}
.chk-voucher__head { display: grid; grid-template-columns: 64px 1fr; column-gap: 48px; }
.chk-voucher__title {
	font-weight: 700; font-size: 44px; line-height: 53px;
	letter-spacing: .01em; text-transform: uppercase;
	color: var(--chk-header);
}
.chk-voucher__lead {
	margin-top: 8px; max-width: 716px;
	font-weight: 500; font-size: 16px; line-height: 22px;
	color: var(--chk-header);
}
.chk-voucher__lead strong { font-weight: 700; }

.chk-data {
	margin-top: 48px;
	display: grid; grid-template-columns: repeat(2, minmax(0, 390px));
	column-gap: 48px;
	max-width: 828px;
}
.chk-data__title {
	font-weight: 700; font-size: 20px; line-height: 28px;
	color: var(--chk-header);
	margin-bottom: 24px;
}
.chk-data__list { display: grid; row-gap: 16px; }
.chk-data__k {
	font-weight: 500; font-size: 14px; line-height: 20px; color: var(--chk-label);
}
.chk-data__v {
	font-weight: 500; font-size: 16px; line-height: 22px; color: var(--chk-header);
}
.chk-voucher__sep {
	margin: 48px 0 0; border: 0; border-top: 1px solid var(--chk-line);
	max-width: 828px;
}
.chk-voucher__actions { margin-top: 48px; }
.chk-btn--download { width: 276px; height: 56px; padding: 0 24px; }

/* ================================================================== *
 * RESPONSIVE
 * ================================================================== */

/* --- tablet / desktop pequeño --- */
@media (max-width: 1279px) {
	.chk-layout { column-gap: 48px; padding-left: 0; padding-right: 24px; }
	.chk-back__inner { padding: 0 40px; }
	.chk-voucher__inner { padding: 0 40px; }
	.chk-title { font-size: 40px; line-height: 46px; }
	.chk-summary__card { padding: 40px; }
	.chk-summary__num { font-size: 30px; line-height: 34px; }
}

/* --- mobile (Figma 53-m / 61-m / 63-m · 375) --- */
@media (max-width: 991px) {
	.chk-back { padding-top: 80px; }
	.chk-back__inner { padding: 0 24px; }

	.chk-layout {
		display: flex;
		flex-direction: column;
		padding: 0;
	}
	.chk-main { padding: 0 24px; order: 1; }

	/* El resumen del apartamento va al final en mobile (Figma: resumen-mobile) */
	.chk-summary {
		order: 2;
		margin-top: 48px;
		aspect-ratio: 375 / 532;
		border-radius: 0;
		width: 100%;
	}
	.chk-summary__card {
		left: 6.4%; right: 6.4%; top: 9%; bottom: 9%;
		padding: 32px 24px;
	}
	.chk-summary__num { font-size: 28px; line-height: 32px; }
	.chk-summary__meta { font-size: 18px; line-height: 26px; }

	.chk-head { display: block; margin-top: 68px; }
	.chk-head__mark { width: 64px; height: 68px; margin-bottom: 24px; }
	.chk-title { font-size: 28px; line-height: 34px; }
	.chk-head__note { margin-top: 12px; }

	.chk-dpi { margin-top: 48px; padding: 16px; border-radius: 16px; }
	.chk-dpi__label { line-height: 20px; }
	.chk-dpi__row { margin-top: 16px; gap: 8px; }
	.chk-search { width: 196px; flex: 1 1 auto; }
	.chk-btn--sm { padding: 0 16px; }

	.chk-form { margin-top: 40px; }
	.chk-grid { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
	.chk-cell--empty { display: none; }
	.chk-radios { padding-left: 0; margin-top: 16px; }
	.chk-field--narrow { max-width: 146px; }

	.chk-sep { margin-top: 32px; width: 100%; }
	.chk-methods { margin-top: 32px; }
	.chk-methods__title { font-size: 22px; line-height: 26px; }
	.chk-tabs { width: 100%; }
	.chk-note { width: 100%; }

	.chk-pane { margin-top: 32px; }
	.chk-pay { margin-top: 32px; padding-bottom: 8px; }
	.chk-badges { gap: 16px; max-width: 100%; }
	.chk-badge { flex: 1 1 155px; }
	.chk-pay__action { margin-top: 32px; }

	.chk-processing { min-height: 652px; }
	.chk-processing__texture { width: 100%; height: auto; }
	.chk-processing__text { font-size: 20px; line-height: 28px; }

	.chk-voucher { padding: 56px 0 72px; }
	.chk-voucher__inner { padding: 0 24px; }
	.chk-voucher__head { display: block; }
	.chk-voucher__title { font-size: 26px; line-height: 32px; margin-top: 48px; }
	.chk-voucher__texture { right: -180px; top: 540px; width: 458px; height: 489px; }
	.chk-data { grid-template-columns: minmax(0, 1fr); row-gap: 0; margin-top: 40px; }
	.chk-data__block + .chk-data__block { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--chk-line); }
	.chk-voucher__actions { margin-top: 32px; }
	.chk-btn--download { width: 100%; }
}

/* LTSM-5628: disclaimer destacado de bloqueo de tarjeta (pantalla de pago con tarjeta) */
.card-disclaimer {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px 18px;
    background: #FFF8E9;
    border: 1px solid #F0D488;
    border-left: 4px solid #946300;
    border-radius: 8px;
    color: #6E5A1E;
    font-size: 14px;
    line-height: 22px;
}

.card-disclaimer__icon {
    color: #946300;
    font-size: 20px;
    line-height: 22px;
    flex: 0 0 auto;
}

.card-disclaimer__body {
    flex: 1 1 auto;
}

.card-disclaimer__body strong {
    color: #946300;
}

@media (max-width: 575px) {
    .card-disclaimer {
        flex-direction: column;
        gap: 8px;
    }
}