/**
 * Solicitar Cotización Mercadito — Variantes de diseño del formulario
 * v7.2.0
 *
 * Capa OPCIONAL sobre el diseño en tarjetas de la v7.1.0 (quote.css).
 * Se carga SOLO en la página de cotización y en la pestaña "Formulario"
 * del panel de ajustes: el resto de la tienda no paga este peso.
 *
 * Cuatro ejes independientes, aplicados como clases en el contenedor:
 *   .scm-fs-<estilo>   Estilo base      (uno solo, exclusivo)
 *   .scm-fp-<paleta>   Paleta interna   (una sola, exclusiva)
 *   .scm-ff-<relleno>  Relleno          (uno solo, exclusivo)
 *   .scm-fx-<efecto>   Efectos          (varios, se acumulan)
 *
 * Sistema de tokens: cada tarjeta expone --scm-fc-accent (su color) y
 * --scm-fc-surface (su fondo). La PALETA asigna los acentos, el ESTILO
 * BASE decide la estructura, el RELLENO pinta el fondo y los EFECTOS
 * agregan movimiento. Por eso las cuatro dimensiones se combinan sin
 * pisarse: cada una toca capas distintas.
 *
 * Nota: esta capa usa color-mix() sin respaldo. Es deliberado — si un
 * navegador viejo no lo soporta, la declaración se descarta y queda el
 * diseño base de la v7.1.0, que sí trae respaldos. Degrada, no rompe.
 */

/* ========================================
   TOKENS POR TARJETA
======================================== */

.scm-quote-form-container--cards {
    --scm-fc-radius: 14px;
}

.scm-quote-form-container--cards .scm-fcard {
    --scm-fc-accent: var(--scm-primary);
    --scm-fc-surface: var(--scm-bg);
    --scm-fc-ink: var(--scm-text);
}

/* Cuando hay paleta activa, los íconos y títulos siguen el acento de
   SU tarjeta en lugar del azul fijo de la v7.1.0. */
.scm-fpal-on .scm-fcard-icon--solid,
.scm-fpal-on .scm-fcard-icon--green,
.scm-fpal-on .scm-fcard-icon--blue {
    background: var(--scm-fc-accent);
    color: #fff;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--scm-fc-accent) 35%, transparent);
}

.scm-fpal-on .scm-fcard-title {
    color: color-mix(in srgb, var(--scm-fc-accent) 78%, #0f172a);
}

.scm-fpal-on .scm-fcard--primary {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--scm-fc-accent) 4%, #fff) 0%,
        color-mix(in srgb, var(--scm-fc-accent) 10%, #fff) 100%
    );
    border-color: color-mix(in srgb, var(--scm-fc-accent) 22%, #fff);
}

.scm-fpal-on .scm-fcard .scm-input:focus {
    border-color: var(--scm-fc-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--scm-fc-accent) 20%, transparent);
}

/* El botón de envío vive en la tarjeta 3: hereda su acento. */
.scm-fpal-on .scm-btn-submit {
    background: linear-gradient(
        135deg,
        var(--scm-fc-accent),
        color-mix(in srgb, var(--scm-fc-accent) 75%, #000)
    );
    box-shadow: 0 6px 16px color-mix(in srgb, var(--scm-fc-accent) 30%, transparent);
}

.scm-fpal-on .scm-form-notice {
    background: color-mix(in srgb, var(--scm-fc-accent) 6%, #fff);
    border-color: color-mix(in srgb, var(--scm-fc-accent) 16%, #fff);
}

.scm-fpal-on .scm-notice-icon {
    color: var(--scm-fc-accent);
}

/* Piso de color bajo cualquier relleno.
   Los rellenos pintan SOLO background-image; sin este piso, la tarjeta 1
   se quedaba sin background-color (el atajo `background:` del degradado
   de .scm-fcard--primary lo había puesto en transparent) y se veía el
   gris del contenedor a través de la trama. Va después de la paleta y
   antes de los estilos base: los estilos que sí definen su propio fondo
   (sólido, vidrio, relieve, hundido, oscuro) lo sobrescriben por orden. */
.scm-quote-form-container--cards .scm-fcard {
    background-color: var(--scm-fc-surface);
}

/* ========================================
   PALETA INTERNA
======================================== */

/* Monocromática: un solo tono, tres profundidades */
.scm-fp-mono .scm-fcard--1 { --scm-fc-accent: var(--scm-primary); }
.scm-fp-mono .scm-fcard--2 { --scm-fc-accent: color-mix(in srgb, var(--scm-primary) 72%, #0f172a); }
.scm-fp-mono .scm-fcard--3 { --scm-fc-accent: color-mix(in srgb, var(--scm-primary) 60%, #64748b); }

/* Tres pasos: azul → verde → violeta */
.scm-fp-tres-pasos .scm-fcard--1 { --scm-fc-accent: #2563eb; }
.scm-fp-tres-pasos .scm-fcard--2 { --scm-fc-accent: #16a34a; }
.scm-fp-tres-pasos .scm-fcard--3 { --scm-fc-accent: #7c3aed; }

/* Marca de la tienda: usa los colores configurados en Ajustes.
   El acento va en la tarjeta 3 y el secundario en la 2, no al revés: el
   botón de envío vive en la tarjeta 3 y el secundario por defecto es un
   gris pizarra, que en un botón grande se lee como "deshabilitado". */
.scm-fp-marca .scm-fcard--1 { --scm-fc-accent: var(--scm-primary); }
.scm-fp-marca .scm-fcard--2 { --scm-fc-accent: var(--scm-secondary); }
.scm-fp-marca .scm-fcard--3 { --scm-fc-accent: var(--scm-accent); }

.scm-fp-oceano .scm-fcard--1 { --scm-fc-accent: #0284c7; }
.scm-fp-oceano .scm-fcard--2 { --scm-fc-accent: #0891b2; }
.scm-fp-oceano .scm-fcard--3 { --scm-fc-accent: #4f46e5; }

.scm-fp-atardecer .scm-fcard--1 { --scm-fc-accent: #ea580c; }
.scm-fp-atardecer .scm-fcard--2 { --scm-fc-accent: #dc2626; }
.scm-fp-atardecer .scm-fcard--3 { --scm-fc-accent: #db2777; }

.scm-fp-bosque .scm-fcard--1 { --scm-fc-accent: #15803d; }
.scm-fp-bosque .scm-fcard--2 { --scm-fc-accent: #059669; }
.scm-fp-bosque .scm-fcard--3 { --scm-fc-accent: #4d7c0f; }

.scm-fp-tierra .scm-fcard--1 { --scm-fc-accent: #b45309; }
.scm-fp-tierra .scm-fcard--2 { --scm-fc-accent: #a16207; }
.scm-fp-tierra .scm-fcard--3 { --scm-fc-accent: #78716c; }

/* Pastel: acentos suaves; el texto se oscurece para mantener contraste */
.scm-fp-pastel .scm-fcard--1 { --scm-fc-accent: #7aa2e8; }
.scm-fp-pastel .scm-fcard--2 { --scm-fc-accent: #7fc7a4; }
.scm-fp-pastel .scm-fcard--3 { --scm-fc-accent: #b09ae0; }

.scm-fp-pastel .scm-fcard-title {
    color: color-mix(in srgb, var(--scm-fc-accent) 55%, #0f172a);
}

/* Principal invertida: estructura en tinta, el color queda para el botón */
.scm-fp-invertida .scm-fcard { --scm-fc-accent: #0f172a; }

.scm-fp-invertida .scm-fcard-icon--solid,
.scm-fp-invertida .scm-fcard-icon--green,
.scm-fp-invertida .scm-fcard-icon--blue {
    background: #fff;
    color: var(--scm-primary);
    border: 1px solid var(--scm-border);
    box-shadow: none;
}

.scm-fp-invertida .scm-btn-submit {
    background: #0f172a;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.28);
}

/* ========================================
   ESTILO BASE
======================================== */

/* --- Elevación suave: sin borde, sombra difusa --- */
.scm-fs-elevacion .scm-fcard {
    border-color: transparent;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
}

/* --- Sombra en color: la sombra toma el acento de la tarjeta --- */
.scm-fs-sombra-color .scm-fcard {
    border-color: color-mix(in srgb, var(--scm-fc-accent) 14%, #fff);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--scm-fc-accent) 18%, transparent);
}

/* --- Contorno nítido: borde marcado, cero sombra --- */
.scm-fs-contorno .scm-fcard {
    border: 2px solid color-mix(in srgb, var(--scm-fc-accent) 45%, #fff);
    box-shadow: none;
}

/* --- Bloque sólido: la tarjeta entera se tiñe --- */
.scm-fs-solido .scm-fcard {
    background: color-mix(in srgb, var(--scm-fc-accent) 10%, #fff);
    border-color: color-mix(in srgb, var(--scm-fc-accent) 25%, #fff);
    box-shadow: none;
}

/* --- Vidrio esmerilado --- */
.scm-fs-vidrio .scm-fcard {
    background: color-mix(in srgb, var(--scm-fc-accent) 8%, rgba(255, 255, 255, 0.55));
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.1);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.scm-fs-vidrio .scm-input {
    background: rgba(255, 255, 255, 0.75);
}

/* --- Relieve suave (neumorfismo discreto) --- */
.scm-fs-relieve .scm-fcard {
    background: #f2f5f9;
    border-color: transparent;
    box-shadow: 6px 6px 14px rgba(15, 23, 42, 0.09), -6px -6px 14px rgba(255, 255, 255, 0.95);
}

.scm-fs-relieve .scm-input {
    background: #f7f9fc;
    border-color: transparent;
    box-shadow: inset 2px 2px 5px rgba(15, 23, 42, 0.07), inset -2px -2px 5px rgba(255, 255, 255, 0.9);
}

/* --- Panel hundido --- */
.scm-fs-hundido .scm-fcard {
    background: color-mix(in srgb, var(--scm-fc-accent) 5%, #f8fafc);
    border-color: color-mix(in srgb, var(--scm-fc-accent) 14%, #e2e8f0);
    box-shadow: inset 0 2px 8px rgba(15, 23, 42, 0.07);
}

/* --- Franja superior --- */
.scm-fs-franja-superior .scm-fcard {
    border-top: 4px solid var(--scm-fc-accent);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

/* --- Acento lateral --- */
.scm-fs-acento-lateral .scm-fcard {
    border-left: 5px solid var(--scm-fc-accent);
    border-radius: 6px var(--scm-fc-radius) var(--scm-fc-radius) 6px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

/* --- Borde degradado (truco padding-box / border-box) --- */
.scm-fs-borde-degradado .scm-fcard {
    border: 2px solid transparent;
    background:
        linear-gradient(var(--scm-fc-surface), var(--scm-fc-surface)) padding-box,
        linear-gradient(135deg,
            var(--scm-fc-accent),
            color-mix(in srgb, var(--scm-fc-accent) 35%, #fff)
        ) border-box;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

/* --- Papel apilado: hojas asomando por detrás --- */
.scm-fs-papel-apilado .scm-fcard {
    position: relative;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

.scm-fs-papel-apilado .scm-fcard::before,
.scm-fs-papel-apilado .scm-fcard::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 8px;
    right: 8px;
    bottom: -6px;
    height: 20px;
    border: 1px solid var(--scm-border);
    border-radius: 0 0 var(--scm-fc-radius) var(--scm-fc-radius);
    background: color-mix(in srgb, var(--scm-fc-accent) 4%, #fff);
}

.scm-fs-papel-apilado .scm-fcard::after {
    left: 16px;
    right: 16px;
    bottom: -12px;
    background: color-mix(in srgb, var(--scm-fc-accent) 8%, #fff);
}

.scm-fs-papel-apilado .scm-quote-form--cards {
    gap: 28px;
}

/* --- Plano y aireado: sin cajas, solo aire y separadores --- */
.scm-quote-form-container--cards.scm-fs-plano {
    background: transparent;
    border: 0;
    padding: 0;
}

.scm-fs-plano .scm-fcard {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 8px 0 26px;
    border-bottom: 1px solid var(--scm-border);
}

.scm-fs-plano .scm-quote-form--cards > .scm-fcard:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}

/* --- Ficha con pestaña: una lengüeta asoma sobre el borde superior ---
   La lengüeta se ancla al encabezado (y no a la tarjeta) porque los
   pseudo-elementos de la tarjeta ya los usan "Papel apilado", "Brillo
   deslizante" y "Borde giratorio": así este estilo se puede combinar
   con esos efectos sin pelearse por ::before/::after.
   Geometría: la tarjeta lleva 24px de padding superior y la lengüeta
   mide 20px, así que -44px la deja al ras del borde de la tarjeta. */
.scm-fs-pestana .scm-quote-form--cards {
    gap: 28px;
}

.scm-fs-pestana .scm-fcard {
    border-top-left-radius: 0;
    padding-top: 24px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.scm-fs-pestana .scm-fcard-head {
    position: relative;
}

.scm-fs-pestana .scm-fcard-head::before {
    content: '';
    position: absolute;
    top: -44px;
    left: -21px;
    width: 96px;
    height: 20px;
    border-radius: 8px 8px 0 0;
    background: var(--scm-fc-accent);
}

/* --- Modo oscuro --- */
.scm-quote-form-container--cards.scm-fs-oscuro {
    background: #0b1220;
    border-color: #1e293b;
}

.scm-fs-oscuro .scm-fcard {
    --scm-fc-surface: #111c30;
    background: #111c30;
    border-color: #1f2d47;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

.scm-fs-oscuro .scm-fcard--primary {
    background: linear-gradient(180deg, #13203a 0%, #101a2e 100%);
    border-color: color-mix(in srgb, var(--scm-fc-accent) 30%, #1f2d47);
}

.scm-fs-oscuro .scm-fcard-title {
    color: color-mix(in srgb, var(--scm-fc-accent) 45%, #f1f5f9);
}

.scm-fs-oscuro .scm-fcard-subtitle,
.scm-fs-oscuro .scm-field-hint,
.scm-fs-oscuro .scm-fcard-title-note {
    color: #94a3b8;
}

.scm-fs-oscuro .scm-label {
    color: #e2e8f0;
}

.scm-fs-oscuro .scm-input {
    background: #0d1728;
    border-color: #26364f;
    color: #e2e8f0;
    box-shadow: none;
}

.scm-fs-oscuro .scm-input::placeholder {
    color: #64748b;
}

.scm-fs-oscuro .scm-input:hover {
    border-color: #3b4d6b;
}

.scm-fs-oscuro .scm-form-notice {
    background: #0d1728;
    border-color: #26364f;
    color: #94a3b8;
}

.scm-fs-oscuro .scm-fcard-badge {
    background: color-mix(in srgb, #16a34a 25%, #0d1728);
    color: #86efac;
}

/* --- Resplandor al enfocar: la tarjeta se ilumina con el campo activo --- */
.scm-fs-resplandor-foco .scm-fcard {
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.scm-fs-resplandor-foco .scm-fcard:focus-within {
    border-color: var(--scm-fc-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--scm-fc-accent) 14%, transparent),
                0 12px 30px color-mix(in srgb, var(--scm-fc-accent) 20%, transparent);
}

/* ========================================
   RELLENO DE LA TARJETA
======================================== */

/* Sólido (reinicio): quita el degradado de la tarjeta 1 */
.scm-ff-solido .scm-fcard,
.scm-ff-solido .scm-fcard--primary {
    background: var(--scm-fc-surface);
    background-image: none;
}

.scm-ff-degradado-diagonal .scm-fcard {
    background-image: linear-gradient(
        135deg,
        color-mix(in srgb, var(--scm-fc-accent) 12%, #fff) 0%,
        #fff 60%
    );
}

.scm-ff-resplandor-esquina .scm-fcard {
    background-image: radial-gradient(
        circle at 100% 0%,
        color-mix(in srgb, var(--scm-fc-accent) 22%, transparent) 0%,
        transparent 55%
    );
}

.scm-ff-duotono .scm-fcard {
    background-image: linear-gradient(
        160deg,
        color-mix(in srgb, var(--scm-fc-accent) 14%, #fff) 0%,
        color-mix(in srgb, var(--scm-fc-accent) 14%, #fff) 42%,
        #fff 42%,
        #fff 100%
    );
}

.scm-ff-malla .scm-fcard {
    background-image:
        radial-gradient(at 15% 15%, color-mix(in srgb, var(--scm-fc-accent) 24%, transparent) 0px, transparent 55%),
        radial-gradient(at 85% 25%, color-mix(in srgb, var(--scm-fc-accent) 14%, transparent) 0px, transparent 50%),
        radial-gradient(at 60% 95%, color-mix(in srgb, var(--scm-fc-accent) 18%, transparent) 0px, transparent 55%);
}

.scm-ff-aurora .scm-fcard {
    background-image:
        radial-gradient(ellipse 80% 50% at 20% 0%, color-mix(in srgb, var(--scm-fc-accent) 26%, transparent), transparent),
        radial-gradient(ellipse 60% 40% at 90% 20%, color-mix(in srgb, #a855f7 22%, transparent), transparent),
        radial-gradient(ellipse 70% 40% at 50% 110%, color-mix(in srgb, #22d3ee 18%, transparent), transparent);
}

.scm-ff-puntos .scm-fcard {
    background-image: radial-gradient(
        color-mix(in srgb, var(--scm-fc-accent) 28%, transparent) 1px,
        transparent 1px
    );
    background-size: 14px 14px;
}

.scm-ff-rejilla .scm-fcard {
    background-image:
        linear-gradient(color-mix(in srgb, var(--scm-fc-accent) 12%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--scm-fc-accent) 12%, transparent) 1px, transparent 1px);
    background-size: 22px 22px;
}

.scm-ff-rayas .scm-fcard {
    background-image: repeating-linear-gradient(
        45deg,
        color-mix(in srgb, var(--scm-fc-accent) 8%, transparent) 0px,
        color-mix(in srgb, var(--scm-fc-accent) 8%, transparent) 8px,
        transparent 8px,
        transparent 18px
    );
}

/* Franja de encabezado: el head se convierte en banda de color.
   La tarjeta pierde su padding y cada zona pone el suyo. */
.scm-ff-franja-encabezado .scm-fcard {
    padding: 0;
    gap: 0;
    overflow: hidden;
    background-image: none;
}

.scm-ff-franja-encabezado .scm-fcard-head {
    padding: 18px 20px;
    background: color-mix(in srgb, var(--scm-fc-accent) 12%, #fff);
    border-bottom: 1px solid color-mix(in srgb, var(--scm-fc-accent) 20%, #fff);
}

.scm-ff-franja-encabezado .scm-fcard-body {
    padding: 20px;
}

.scm-fs-oscuro.scm-ff-franja-encabezado .scm-fcard-head,
.scm-fs-oscuro .scm-fcard .scm-fcard-head {
    border-bottom-color: #1f2d47;
}

.scm-fs-oscuro.scm-ff-franja-encabezado .scm-fcard-head {
    background: color-mix(in srgb, var(--scm-fc-accent) 22%, #0d1728);
}

/* ========================================
   EFECTOS (SE ACUMULAN)
======================================== */

/* Elevar al pasar */
.scm-fx-elevar .scm-fcard {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.scm-fx-elevar .scm-fcard:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}

/* Acercar */
.scm-fx-acercar .scm-fcard {
    transition: transform 0.25s ease;
}

.scm-fx-acercar .scm-fcard:hover {
    transform: scale(1.015);
}

/* Brillo deslizante */
.scm-fx-brillo .scm-fcard {
    position: relative;
    overflow: hidden;
}

.scm-fx-brillo .scm-fcard::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-18deg);
    transition: left 0.75s ease;
}

.scm-fx-brillo .scm-fcard:hover::after {
    left: 140%;
}

/* Anillo de foco */
.scm-fx-anillo-foco .scm-fcard {
    transition: box-shadow 0.25s ease;
}

.scm-fx-anillo-foco .scm-fcard:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--scm-fc-accent) 22%, transparent);
}

/* Icono con vida */
.scm-fx-icono-vivo .scm-fcard-icon {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scm-fx-icono-vivo .scm-fcard:hover .scm-fcard-icon {
    transform: rotate(-8deg) scale(1.1);
}

/* Entrada escalonada */
@keyframes scm-fcard-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.scm-fx-entrada .scm-fcard {
    animation: scm-fcard-in 0.5s ease both;
}

.scm-fx-entrada .scm-fcard--1 { animation-delay: 0.05s; }
.scm-fx-entrada .scm-fcard--2 { animation-delay: 0.16s; }
.scm-fx-entrada .scm-fcard--3 { animation-delay: 0.27s; }

/* Pulso en obligatorios */
@keyframes scm-required-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.25); }
}

.scm-fx-pulso .scm-required {
    display: inline-block;
    animation: scm-required-pulse 2s ease-in-out infinite;
}

/* Título en degradado */
.scm-fx-titulo-degradado .scm-fcard-title {
    background: linear-gradient(
        90deg,
        var(--scm-fc-accent),
        color-mix(in srgb, var(--scm-fc-accent) 55%, #0f172a)
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* El "(opcional)" del título queda fuera del degradado para no perder
   legibilidad: recupera color propio. */
.scm-fx-titulo-degradado .scm-fcard-title-note {
    background: none;
    -webkit-text-fill-color: var(--scm-text-muted);
    color: var(--scm-text-muted);
}

/* Icono en degradado */
.scm-fx-icono-degradado .scm-fcard-icon--solid,
.scm-fx-icono-degradado .scm-fcard-icon--green,
.scm-fx-icono-degradado .scm-fcard-icon--blue {
    background: linear-gradient(
        135deg,
        var(--scm-fc-accent),
        color-mix(in srgb, var(--scm-fc-accent) 45%, #fff)
    );
    color: #fff;
}

/* Borde giratorio */
@property --scm-spin-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes scm-border-spin {
    to { --scm-spin-angle: 360deg; }
}

.scm-fx-borde-giratorio .scm-fcard {
    position: relative;
    z-index: 0;
    border-color: transparent;
}

.scm-fx-borde-giratorio .scm-fcard::before {
    content: '';
    position: absolute;
    z-index: -2;
    inset: -2px;
    border-radius: calc(var(--scm-fc-radius) + 2px);
    background: conic-gradient(
        from var(--scm-spin-angle),
        transparent 0deg 250deg,
        var(--scm-fc-accent) 320deg,
        transparent 360deg
    );
    animation: scm-border-spin 4s linear infinite;
}

.scm-fx-borde-giratorio .scm-fcard::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: var(--scm-fc-surface);
}

/* El brillo deslizante también usa ::after; si ambos están activos,
   gana el brillo y el borde giratorio pinta su base con ::before. */
.scm-fx-borde-giratorio.scm-fx-brillo .scm-fcard::after {
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
}

.scm-fx-borde-giratorio.scm-fx-brillo .scm-fcard {
    background: var(--scm-fc-surface);
}

/* ========================================
   ACCESIBILIDAD Y RESPONSIVE
======================================== */

@media (prefers-reduced-motion: reduce) {
    .scm-fx-elevar .scm-fcard,
    .scm-fx-acercar .scm-fcard,
    .scm-fx-icono-vivo .scm-fcard-icon {
        transition: none;
    }

    .scm-fx-elevar .scm-fcard:hover,
    .scm-fx-acercar .scm-fcard:hover,
    .scm-fx-icono-vivo .scm-fcard:hover .scm-fcard-icon {
        transform: none;
    }

    .scm-fx-entrada .scm-fcard,
    .scm-fx-pulso .scm-required,
    .scm-fx-borde-giratorio .scm-fcard::before {
        animation: none;
    }

    .scm-fx-brillo .scm-fcard::after {
        transition: none;
    }
}

@media (max-width: 768px) {
    /* En móvil las sombras grandes y el papel apilado se comprimen:
       el ancho completo ya da suficiente separación visual. */
    .scm-fs-papel-apilado .scm-quote-form--cards {
        gap: 22px;
    }

    .scm-fs-pestana .scm-fcard-head::before {
        left: -17px;
        width: 82px;
    }
}