/* =========================
   LIORAT TOKENS (Color & FX)
   ========================= */
:root{
  --lr-bg-crystal: rgba(255,255,255,.86);
  --lr-ink: #111;
  --lr-ink-2: #000;
  --lr-text: #111;
  --lr-text-inv: #fff;
  --lr-gray-1: #fff;
  --lr-gray-2: #f5f5f5;
  --lr-gray-3: #e8e8e8;
  --lr-chip-idle: #f4f4f4;
  --lr-border-weak: rgba(17,17,17,.06);
  --lr-border: rgba(17,17,17,.10);
  --lr-border-strong: rgba(17,17,17,.12);
  --lr-ring: rgba(17,17,17,.12);
  --lr-ring-strong: rgba(17,17,17,.55);
  --lr-shadow-card: 0 10px 28px rgba(0,0,0,.06);
  --lr-shadow-btn: 0 6px 18px rgba(0,0,0,.12);
}

/* =========================
   Card base
   ========================= */
.lr-card{
  background: var(--lr-bg-crystal);
  backdrop-filter: blur(12px);
  border: 1px solid var(--lr-border-weak);
  box-shadow: var(--lr-shadow-card);
  border-radius: 16px;
}

/* =========================
   Pill buttons (primary + ghost)
   ========================= */
.lr-btn,
.lrsp .lrsp-actions .lr-btn,
.lrsp .lrsp-actions button#lrsp-next,
.lrsp .lrsp-actions button#lrsp-save{
  border-radius: 9999px;
  background: var(--lr-ink);
  color: var(--lr-text-inv);
  padding: .7rem 1.2rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border: 1px solid var(--lr-border-weak);
  transition: transform .06s ease, background .15s ease, color .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.lr-btn:hover{ background: var(--lr-ink-2); box-shadow: var(--lr-shadow-btn); }
.lr-btn:active{ transform: translateY(1px); }
.lr-btn[disabled], .lr-btn.is-loading{ opacity:.5; pointer-events:none; box-shadow:none; }

/* Ghost variant (Back) */
#lrsp-back,
.lrsp .lrsp-actions #lrsp-back{
  background: var(--lr-gray-1);
  color: var(--lr-text);
  border: 1px solid var(--lr-border-strong);
}
#lrsp-back:hover,
.lrsp .lrsp-actions #lrsp-back:hover{ background: var(--lr-gray-2); }

/* =========================
   Layout wizard
   ========================= */
.lrsp{ padding: 1.25rem; }
.lrsp-title{ font-family:"Playfair Display",serif; font-weight:700; margin:0 0 .25rem; }
.lrsp-subtitle{ opacity:.8; margin:0 0 1rem; }
.lrsp-actions{ display:flex; gap:.5rem; margin-top:1rem; }
.lrsp-actions [hidden]{ display:none !important; }
.lrsp-step-title{ font-weight:600; margin:.25rem 0 .75rem; }
.lrsp-header[hidden]{ display:none !important; }
.lrsp-header{ margin-bottom:.5rem; }

/* Contenido centrado y con margen del menú */
:root{ --lr-content-max: 880px; }
.entry-content .lrsp.lr-card,
.entry-content .lrsp-gate.lr-card,
.entry-content .lrsp-result.lr-card{
  max-width: var(--lr-content-max);
  margin: 2rem auto;
  width: 100%;
}
@media (min-width: 1024px){
  .entry-content .lrsp.lr-card,
  .entry-content .lrsp-gate.lr-card,
  .entry-content .lrsp-result.lr-card{
    border-radius: 16px;
  }
}

/* =========================
   Chips (selección multipasos)
   ========================= */
.lrsp .lrsp-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.lr-chip,
.lrsp .lr-chip{
  background: var(--lr-chip-idle);
  color: var(--lr-text);
  border-radius:9999px;
  padding:.45em 1em;
  font-size:.95rem;
  cursor:pointer;
  border:1px solid var(--lr-border-weak);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.lr-chip:hover:not(.is-blocked):not(.is-selected),
.lrsp .lr-chip:hover:not(.is-blocked):not(.is-selected){
  background: var(--lr-gray-3);
  color: var(--lr-text);
}
.lr-chip:focus,
.lrsp .lr-chip:focus{ outline:none; box-shadow:0 0 0 3px var(--lr-ring); }
.lr-chip.is-selected,
.lrsp .lr-chip.is-selected{
  background: var(--lr-ink);
  color: var(--lr-text-inv);
}
.lr-chip.is-blocked,
.lrsp .lr-chip.is-blocked{ opacity:.35; cursor:not-allowed; }

/* =========================
   Color Core (segmented controls)
   ========================= */
/* Grid compacta */
.lrsp .lrsp-color-grid--slim{
  display:grid; grid-template-columns: 1fr; gap:1rem;
}
@media (min-width: 720px){
  .lrsp .lrsp-color-grid--slim{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px){
  .lrsp .lrsp-color-grid--slim{ gap:1.1rem; }
}

/* Etiqueta */
.lrsp .lrsp-seg-label{ font-size:1.05rem; font-weight:700; margin:0 0 .45rem; }

/* Row cápsula */
.lrsp .lrsp-seg-row{
  display:flex; border-radius:9999px; overflow:hidden;
  border:1px solid var(--lr-border);
  background: var(--lr-bg-crystal);
  backdrop-filter: blur(8px);
}

/* Botón de segmento */
.lrsp .lrsp-seg-btn{
  flex:1; height:54px; border:0; background: var(--lr-chip-idle); color: var(--lr-text);
  font-size:1.05rem; font-weight:600; letter-spacing:.01em;
  cursor:pointer; position:relative; isolation:isolate;
  transition: filter .15s ease, box-shadow .15s ease, color .15s ease, transform .12s ease;
}
.lrsp .lrsp-seg-btn + .lrsp-seg-btn{ box-shadow: -1px 0 0 var(--lr-border-weak) inset; }
.lrsp .lrsp-seg-btn:hover{ filter: brightness(.98) saturate(1.05); }
.lrsp .lrsp-seg-btn:focus{ outline:none; box-shadow: 0 0 0 3px var(--lr-ring) inset; }

/* Capa decorativa con gradiente (no roba eventos) */
.lrsp .lrsp-seg-btn::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.96;
  background: var(--seg-bg, var(--lr-chip-idle));
  border-radius: inherit;
  pointer-events: none !important;
}
.lrsp .lrsp-seg-btn{ z-index:1; color: var(--seg-fg, var(--lr-text)); }

/* Seleccionado: anillo + leve elevación visible en cualquier fondo */
.lrsp .lrsp-seg-btn.is-selected{
  box-shadow:
    0 0 0 2px var(--lr-ring-strong) inset,
    0 1px 0 rgba(255,255,255,.35);
  transform: translateY(-1px);
}

/* Legibilidad reforzada en valores oscuros/vivos */
.lrsp .lrsp-seg-row[data-field="depth"]    .lrsp-seg-btn[data-value="deep"].is-selected,
.lrsp .lrsp-seg-row[data-field="contrast"] .lrsp-seg-btn[data-value="high"].is-selected,
.lrsp .lrsp-seg-row[data-field="chroma"]   .lrsp-seg-btn[data-value="vivid"].is-selected{
  color: var(--lr-text-inv);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* =========================
   Result + Palette
   ========================= */
.lrsp-result{ padding:1rem; }
.lrsp-result-head{ margin-bottom:.5rem; }
.lrsp-result-title{ font-size:1.35rem; margin:0 0 .25rem; font-weight:700; }
.lrsp-result-sub{ margin:.15rem 0; opacity:.9; }

.lrsp-score{ display:flex; flex-direction:column; gap:.35rem; margin:.5rem 0 1rem; }
.lrsp-score-item{ display:grid; grid-template-columns:120px 1fr 48px; gap:.5rem; align-items:center; }
.lrsp-score-name{ font-weight:600; }
.lrsp-score-bar{ height:8px; background:#eee; border-radius:9999px; position:relative; overflow:hidden; }
.lrsp-score-bar i{ position:absolute; left:0; top:0; bottom:0; width:0; background: var(--lr-ink); border-radius:9999px; }
.lrsp-score-pct{ text-align:right; opacity:.8; }

/* Paleta */
.lrsp-palette{ display:flex; gap:.4rem; margin:.25rem 0 1rem; min-height:28px; }
.lrsp-swatch{
  width:24px; height:24px; border-radius:50%;
  border:1px solid rgba(0,0,0,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}

/* Badges y CTA */
.lr-badge{ display:inline-block; padding:.25rem .6rem; font-size:.85rem; border-radius:9999px; background:#f1f1f1; border:1px solid rgba(0,0,0,.08); margin:.15rem .25rem .15rem 0; }
.lrsp-cta{ margin-top:.5rem; }
.lrsp-cta .lr-btn{ padding:.7rem 1.1rem; }

/* =========================
   Toast
   ========================= */
.lrsp-toast{
  position:fixed; left:50%; transform:translateX(-50%) translateY(-10px);
  bottom:20px; padding:.6rem .9rem; opacity:0; transition:opacity .2s, transform .2s;
}
.lrsp-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* Context section */
.lrsp-context{ padding:.5rem .5rem; background: transparent; border:0; box-shadow:none; }
.lrsp-context-group + .lrsp-context-group{ margin-top:.5rem; }

.lrsp-context-title{
  font-weight:700;
  font-size:1rem;
  margin:.25rem 0 .35rem;
  opacity:.95;
}


.lrsp-onboarding .lr-card {
    text-align: center;
    padding: 3rem 2rem;
    /* Usamos el efecto cristal que ya tienes definido */
    background: var(--lr-bg-crystal);
    backdrop-filter: blur(12px);
    border: 1px solid var(--lr-border-weak);
    box-shadow: var(--lr-shadow-card);
}

.lrsp-onboarding-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 2.5rem);
    font-weight: 700;
    color: #111;
    margin: 0 0 1rem;
}

.lrsp-onboarding-subtitle {
    font-size: 1.1rem;
    color: #555;
    max-width: 500px;
    margin: 0 auto 2.5rem auto;
    line-height: 1.6;
}


.lrsp-onboarding .lr-btn {
    background: var(--lr-ink, #111);
    color: var(--lr-text-inv, #fff);
    border-color: var(--lr-ink, #111);
}
.lrsp-onboarding .lr-btn:hover {
    background: var(--lr-ink-2, #000);
    border-color: var(--lr-ink-2, #000);
    box-shadow: var(--lr-shadow-btn, 0 6px 18px rgba(0,0,0,.12));
}


/* ========================================================
   ✅ ESTILOS MEJORADOS PARA UNA BIENVENIDA INMERSIVA
   ======================================================== */

/* 1. Hacemos que el contenedor principal rompa la caja y ocupe la pantalla */
.lrsp.lrsp--onboarding-active {
    /* Lógica para forzar el ancho completo */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    
    /* Le damos una altura generosa */
    min-height: 80vh;
    
    /* Centramos la tarjeta de cristal */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Fondo con imagen */
    background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url('/wp-content/uploads/liorat-studio-pro.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* 👇 --- AQUÍ LA MAGIA --- 👇 */
    /* 1. Añadimos el radio para redondear las esquinas */
    border-radius: 30px !important; /* Puedes ajustar este valor */
    
    /* 2. Ocultamos todo lo que se salga del borde redondeado (la imagen) */
    overflow: hidden !important; 
    
    /* Limpieza de otros estilos */
    border: none;
    box-shadow: none;
    padding: 2rem;
}

/* La tarjeta de cristal interna no necesita cambios */
.lrsp-onboarding {
    background: rgba(17, 17, 17, 0.35);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
    border-radius: 16px; /* Mantenemos sus propios bordes redondeados */
    padding: 3rem 2.5rem;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

/* 3. Títulos y subtítulos en blanco con sombra para legibilidad */
.lrsp-onboarding .lrsp-onboarding-title,
.lrsp-onboarding .lrsp-onboarding-subtitle {
    color: #fff; /* ✅ Texto en blanco */
    text-shadow: 0 1px 4px rgba(0,0,0,0.3); /* Sombra para resaltar */
}

/* 4. Botón con efecto de cristal claro */
.lrsp-onboarding .lr-btn {
    background: rgba(255, 255, 255, 0.2); /* ✅ Fondo de cristal claro */
    color: #fff; /* Texto blanco */
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    font-weight: 700;
}
.lrsp-onboarding .lr-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: none;
}

/* --- Responsividad --- */
@media (max-width: 720px){
  .lrsp.lrsp--onboarding-active{ padding: 2.5rem 1rem; }
  .lrsp-onboarding{ padding: 2.5rem 1.5rem; }
}

/* ========================================================
   ✅ NUEVO: ESTILOS PARA LA ETAPA DE SELECCIÓN DE COLOR (ColorStep)
   ======================================================== */

.lrcs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-top: 2rem;
}

.lrcs-question-title {
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--lr-sub, #555);
    margin-bottom: 1rem;
}

.lrcs-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.lrcs-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.lrcs-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--lr-shadow-card, 0 10px 28px rgba(0,0,0,.1));
}

.lrcs-card.is-selected {
    border-color: var(--lr-ink, #111);
    box-shadow: var(--lr-shadow-card, 0 10px 28px rgba(0,0,0,.1));
}

.lrcs-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lrcs-card-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.75rem;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    color: #fff;
    font-weight: 600;
    text-align: center;
    font-size: 0.9rem;
}

/* Checkmark para la tarjeta seleccionada */
.lrcs-card.is-selected::after {
    content: '✔';
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--lr-ink, #111);
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

@media(max-width: 600px) {
    .lrcs-options {
        gap: 1rem;
    }
}

/* ========================================================
   ✅ NUEVO: ESTILOS PARA LA ETAPA DE COLOR VISUAL (ColorStep)
   ======================================================== */

.lrcs-question-title {
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--lr-sub, #555);
    margin-bottom: 1.5rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.lrcs-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Estilos para las tarjetas de selección de modelo y prueba de pañuelo */
.lrcs-model-card,
.lrcs-drape-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    aspect-ratio: 3/4;
}

.lrcs-model-card:hover,
.lrcs-drape-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--lr-shadow-card, 0 10px 28px rgba(0,0,0,.1));
}

.lrcs-model-card.is-selected,
.lrcs-drape-card.is-selected {
    border-color: var(--lr-ink, #111);
    box-shadow: var(--lr-shadow-card, 0 10px 28px rgba(0,0,0,.1));
}

.lrcs-model-card img,
.lrcs-drape-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lrcs-model-card span,
.lrcs-drape-card .lrcs-card-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem 0.75rem;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: #fff;
    font-weight: 600;
    text-align: center;
    font-size: 1rem;
}

/* Checkmark para la tarjeta de pañuelo seleccionada */
.lrcs-drape-card.is-selected::after {
    content: '✔';
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--lr-ink, #111);
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
/* ========================================================
   ✅ CSS COMPLETO PARA LA ETAPA DE COLOR VISUAL (3 Pantallas)
   ======================================================== */

.lrcs-header {
    text-align: center;
    margin-bottom: 2rem;
}
.lrcs-question-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--lr-sub, #555);
    margin: 0;
}
.lrcs-microcopy {
    font-size: 0.9rem;
    color: #888;
    margin-top: 0.5rem;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
}

.lrcs-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.lrcs-model-card,
.lrcs-drape-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.25s ease;
    aspect-ratio: 3/4;
}

.lrcs-model-card:hover,
.lrcs-drape-card:hover {
    transform: scale(1.03);
    box-shadow: var(--lr-shadow-card, 0 10px 28px rgba(0,0,0,.1));
}

.lrcs-model-card.is-selected,
.lrcs-drape-card.is-selected {
    border-color: var(--lr-ink, #111);
    transform: scale(1.03);
    box-shadow: var(--lr-shadow-card, 0 10px 28px rgba(0,0,0,.1));
}

.lrcs-model-card img,
.lrcs-drape-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lrcs-model-card span {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 1rem 0.75rem;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: #fff;
    font-weight: 600;
    text-align: center;
    font-size: 1rem;
}

/* Checkmark para la tarjeta de pañuelo seleccionada */
.lrcs-drape-card.is-selected::after {
    content: '✔';
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--lr-ink, #111);
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    animation: popIn 0.3s ease;
}

@keyframes popIn {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
/* ========================================================
   ✅ REFINAMIENTO DE TEXTOS PARA LA ETAPA DE COLOR
   ======================================================== */

/* 1. Damos más importancia al título principal de la etapa */
.lrsp-color-step .lrsp-step-title {
    text-align: center;
    font-size: clamp(2rem, 5vw, 2.5rem); /* Hacemos el título "Color Core" más grande */
    margin-bottom: 1rem; /* Aumentamos el espacio debajo */
}

/* 2. Ajustamos el contenedor de los textos de instrucción */
.lrcs-header {
    text-align: center;
    margin-bottom: 2.5rem; /* Más espacio antes de las imágenes */
}

/* 3. Hacemos la instrucción más sutil y le damos más espacio para evitar malos saltos de línea */
.lrcs-question-title {
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--lr-sub, #555);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    text-wrap: pretty; /* ✅ REEMPLAZA 'balance' CON 'pretty' */
}

/* 4. Refinamos el microcopy para que sea aún más discreto */
.lrcs-microcopy {
    font-size: 0.9rem;
    color: #999;
    margin-top: 0.75rem;
}
/* ========================================================
   ✅ AJUSTE FINAL: Textos en una sola línea para Escritorio
   ======================================================== */

/* Estas reglas solo se aplican en pantallas de más de 768px de ancho */
@media (min-width: 769px) {
    
    .lrcs-question-title,
    .lrcs-microcopy {
        max-width: none; /* Eliminamos el límite de ancho */
        text-wrap: nowrap; /* Forzamos que no haya saltos de línea */
    }

}

/* ========================================================
   ✅ ESTILOS MEJORADOS PARA LA ETAPA DE "BODY TYPE"
   ======================================================== */

/* 1. La Parrilla (Grid) - Corregida para un layout balanceado de 3+2 */
.lrbs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Fuerza 3 columnas para un balance 3+2 */
    gap: 1.5rem;
    margin-top: 2rem;
}

/* 2. La Tarjeta (Card) - Tu nuevo diseño de fondo blanco y sombra */
.lrbs-card {
    position: relative;
    border-radius: 16px;
    cursor: pointer;
    border: 1px solid var(--lr-border, rgba(17,17,17,.10)); /* Borde gris sutil */
    background-color: #fff; /* Fondo blanco */
    transition: all 0.25s ease;
    text-align: center;
    overflow: hidden; /* Para que la imagen respete el borde redondeado */
}

.lrbs-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--lr-shadow-card, 0 10px 28px rgba(0,0,0,.1)); /* Sombra exterior al pasar el ratón */
}

.lrbs-card.is-selected {
    border: 2px solid var(--lr-ink, #111);
    transform: translateY(-5px);
    box-shadow: var(--lr-shadow-card, 0 10px 28px rgba(0,0,0,.1));
}

/* 3. La Ilustración */
.lrbs-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9/13; /* Proporción más ajustada a la ilustración */
    object-fit: contain;
    padding: 1.5rem 1rem 0.5rem; /* Espacio interior para que la ilustración respire */
}

/* 4. La Etiqueta (Label) - Ahora como texto simple debajo de la imagen */
.lrbs-card-label {
    padding: 0.5rem 1rem 1.25rem; /* Padding inferior para separar del borde */
    background: #fff; /* Fondo blanco consistente */
    color: var(--lr-text, #111); /* Texto negro */
    font-weight: 600;
    font-size: 0.9rem;
    transition: font-weight 0.2s;
}

.lrbs-card.is-selected .lrbs-card-label {
    font-weight: 700; /* Hacemos el texto más bold al seleccionar */
}

/* 5. Responsividad (2 columnas en móvil) */
@media(max-width: 768px) {
    .lrbs-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
}
/* ========================================================
   ✅ NUEVO: ESTILOS PARA LA ETAPA FINAL "CONTEXT"
   ======================================================== */

.lrcx-group {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--lr-border, rgba(17,17,17,.10));
}

.lrcx-group:first-child {
    margin-top: 0;
    padding-top: 1rem;
    border-top: none;
}

.lrcx-group-title {
    font-weight: 600;
    font-size: 1.1rem;
    text-align: center;
    color: var(--lr-sub, #555);
    margin-bottom: 1.5rem;
}

.lrsp-step[data-group-id="context"] .lrsp-chips {
    justify-content: center;
}
/* ========================================================
   ✅ NUEVO: ESTILOS PARA LA ETAPA "MY STYLE GOALS"
   ======================================================== */

.lrgs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Cuadrícula de 3 columnas */
    gap: 1.25rem; /* Espacio entre las tarjetas */
    margin-top: 2rem;
}

.lrgs-card {
    position: relative;
    border-radius: 12px;
    cursor: pointer;
    border: 1px solid var(--lr-border, rgba(17,17,17,.10));
    background-color: #fff;
    transition: all 0.25s ease;
    text-align: center;
    overflow: hidden;
    aspect-ratio: 1/1; /* Tarjetas cuadradas para las goals */
}

.lrgs-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--lr-shadow-card, 0 8px 20px rgba(0,0,0,.08));
}

.lrgs-card.is-selected {
    border: 2px solid var(--lr-ink, #111);
    transform: translateY(-5px);
    box-shadow: var(--lr-shadow-card, 0 8px 20px rgba(0,0,0,.08));
}

.lrgs-card img {
    display: block;
    width: 100%;
    height: 70%; /* La imagen ocupa el 70% superior */
    object-fit: cover; /* 'cover' para que la imagen llene el espacio */
    border-radius: 12px 12px 0 0; /* Bordes redondeados solo arriba */
    filter: brightness(0.95); /* Ligeramente más oscura para el texto */
    transition: filter 0.25s ease;
}

.lrgs-card.is-selected img {
    filter: brightness(1); /* Vuelve a brillo normal al seleccionar */
}


.lrgs-card-label {
    position: absolute; /* Para que esté siempre en la parte inferior */
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.75rem 0.5rem;
    background: #fff; /* Fondo blanco para el texto */
    color: var(--lr-text, #111);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.3;
    min-height: 30%; /* Para que el label ocupe el 30% inferior y el texto tenga espacio */
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--lr-border, rgba(17,17,17,.05));
    transition: background 0.2s, font-weight 0.2s;
}

.lrgs-card.is-selected .lrgs-card-label {
    background: var(--lr-ink, #111); /* Fondo negro al seleccionar */
    color: #fff; /* Texto blanco al seleccionar */
    font-weight: 700;
}


/* Responsividad: 2 columnas en pantallas medianas, 1 en móvil */
@media(max-width: 768px) {
    .lrgs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}
@media(max-width: 480px) {
    .lrgs-grid {
        grid-template-columns: 1fr; /* Una columna en móvil muy pequeño */
    }
}

/* ========================================================
   ✅ NUEVO: ESTILOS PARA LA ETAPA VISUAL "CONTEXT"
   ======================================================== */

.lrct-group {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--lr-border, rgba(17,17,17,.10));
}
.lrct-group:first-child {
    margin-top: 0;
    padding-top: 1rem;
    border-top: none;
}

.lrct-group-title {
    font-weight: 600;
    font-size: 1.1rem;
    text-align: center;
    color: var(--lr-sub, #555);
    margin-bottom: 1.5rem;
}

.lrct-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas en móvil */
    gap: 1rem; /* Espacio reducido para pantallas pequeñas */
}

.lrct-card {
    position: relative;
    border-radius: 12px;
    cursor: pointer;
    border: 2px solid transparent;
    background-color: #f9f9f9;
    transition: all 0.25s ease;
    overflow: hidden;
    aspect-ratio: 1/1; /* Tarjetas cuadradas */
}

.lrct-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--lr-shadow-card, 0 8px 20px rgba(0,0,0,.08));
}

.lrct-card.is-selected {
    border-color: var(--lr-ink, #111) !important;
    box-shadow: var(--lr-shadow-card, 0 8px 20px rgba(0,0,0,.08)) !important;
}

.lrct-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.lrct-card:hover img {
    transform: scale(1.05);
}

.lrct-card-label {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 0.75rem 0.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: #fff;
    font-weight: 600;
    text-align: center;
    font-size: 0.9rem;
    transition: all 0.25s ease;
}

.lrct-card.is-selected .lrct-card-label {
    background: var(--lr-ink, #111);
    font-weight: 700;
}

@media (min-width: 768px) {
    .lrct-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas en escritorio */
        gap: 1.25rem; /* Aumentamos ligeramente el espacio */
    }
}

/* ========================================================
   ✅ STYLES FOR THE ENHANCED RESULTS PAGE (ResultStep)
   ======================================================== */

.lrsp-result-header {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 3rem auto;
}
.lrsp-result-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.2rem, 5vw, 3rem);
    color: #111;
    margin: 0;
}
.lrsp-result-subtitle {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
    margin-top: 1rem;
}

.lrsp-result-card {
    padding: 1.5rem;
    background: #fff;
    border-radius: 16px;
}
@media(min-width: 768px) {
    .lrsp-result-card { padding: 2.5rem; }
}

.lrsp-result-section {
    padding: 2rem 0;
    border-bottom: 1px solid #f0f0f0;
}
.lrsp-result-card > div:first-of-type { padding-top: 0; }
.lrsp-result-card > div:last-of-type { border-bottom: none; }

.lrsp-result-section-title {
    font-family: 'Playfair Display', serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #999;
    margin: 0 0 2rem;
}

/* Archetypes Section */
.archetype-summary {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.archetype-primary, .archetype-secondary {
    display: flex;
    flex-direction: column;
}
.archetype-summary span { font-size: 0.9rem; color: #555; }
.archetype-summary strong { font-size: 1.5rem; font-weight: 700; font-family: 'Playfair Display', serif; color: #111; }
.lrsp-score-chart { display: grid; gap: 0.75rem; max-width: 500px; }
.lrsp-score-item { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 1rem; }
.lrsp-score-name { font-weight: 600; font-size: 0.9rem; }
.lrsp-score-bar { height: 6px; background: #f0f0f0; border-radius: 99px; overflow: hidden; }
.lrsp-score-bar i { display: block; height: 100%; background: #111; border-radius: 99px; transition: width 1s ease-out; }

/* Color Section */
.color-universe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.color-diagnosis p { margin: 0 0 0.5rem; color: #333; }
.color-diagnosis p:last-child { margin-bottom: 0; }
.color-diagnosis p strong { color: #111; }
.color-diagnosis .season-desc { font-style: italic; color: #555; margin-top: 0.5rem; }
.lrsp-palette { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: flex-end; }
.lrsp-swatch { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);}

/* Silhouette Section */
.body-recs-grid { display: grid; grid-template-columns: 200px 1fr; gap: 2rem; align-items: center; }
.body-recs-img { background: #f9f9f9; border-radius: 12px; padding: 1rem; }
.body-recs-img img { max-width: 100%; height: auto; display: block; }
.lrsp-recs-list { list-style: none; padding-left: 0; margin: 0; }
.lrsp-recs-list p { color: #333; line-height: 1.6; margin: 0; }


/* The Liorat Edit Section */
.liorat-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
.liorat-edit-item { text-align: center; }
.liorat-edit-item img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 12px; margin-bottom: 0.75rem; }
.liorat-edit-item span { font-weight: 600; font-size: 0.9rem; color: #333; }

/* Final CTA */
.lrsp-final-cta { text-align: center; padding: 4rem 1rem 2rem; }
.lrsp-final-cta h3 { font-family: 'Playfair Display', serif; font-size: 1.8rem; margin: 0 0 1rem; }
.lrsp-final-cta p { max-width: 500px; margin: 0 auto 2rem; color: #555; line-height: 1.6; }

/* Responsive Adjustments for Results Page */
@media(max-width: 768px) {
    .color-universe-grid, .body-recs-grid { grid-template-columns: 1fr; }
    .lrsp-palette { justify-content: flex-start; margin-top: 1.5rem; }
    .body-recs-img { width: 150px; margin: 0 auto 1.5rem; }
    .lrsp-recs-list { text-align: center; }
}


/* ========================================================
   ✅ NUEVO: ESTILOS PARA LA PÁGINA DE RESULTADOS (ResultStep)
   ======================================================== */

.lrsp-result-header {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 3rem auto;
}
.lrsp-result-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.2rem, 5vw, 3rem);
    color: #111;
    margin: 0;
}
.lrsp-result-subtitle {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
    margin-top: 1rem;
}

.lrsp-result-card {
    padding: 1.5rem;
    background: #fff;
    border-radius: 16px;
}
@media(min-width: 768px) {
    .lrsp-result-card { padding: 2.5rem; }
}

.lrsp-result-section {
    padding: 2rem 0;
    border-bottom: 1px solid #f0f0f0;
}
.lrsp-result-card > div:first-of-type { padding-top: 0; }
.lrsp-result-card > div:last-of-type { border-bottom: none; }

.lrsp-result-section-title {
    font-family: 'Playfair Display', serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #999;
    margin: 0 0 2rem;
}

/* Sección Arquetipos */
.archetype-summary {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
}
.archetype-primary, .archetype-secondary {
    display: flex;
    flex-direction: column;
}
.archetype-summary span { font-size: 0.9rem; color: #555; }
.archetype-summary strong { font-size: 1.5rem; font-weight: 700; font-family: 'Playfair Display', serif; color: #111; }
.lrsp-score-chart { display: grid; gap: 0.75rem; max-width: 500px; }
.lrsp-score-item { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 1rem; }
.lrsp-score-name { font-weight: 600; font-size: 0.9rem; }
.lrsp-score-bar { height: 6px; background: #f0f0f0; border-radius: 99px; overflow: hidden; }
.lrsp-score-bar i { display: block; height: 100%; background: #111; border-radius: 99px; }

/* Sección Color */
.color-universe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.color-diagnosis p { margin: 0 0 0.5rem; color: #333; }
.color-diagnosis p strong { color: #111; }
.color-diagnosis .season-desc { font-style: italic; color: #555; margin-top: 0.5rem; }
.lrsp-palette { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: flex-end; }
.lrsp-swatch { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); }

/* Sección Silueta */
.body-recs-grid { display: grid; grid-template-columns: 200px 1fr; gap: 2rem; align-items: center; }
.body-recs-img { background: #f9f9f9; border-radius: 12px; padding: 1rem; }
.body-recs-img img { max-width: 100%; height: auto; }
.lrsp-recs-list { list-style: none; padding-left: 0; margin: 0; display: grid; gap: 0.75rem; }
.lrsp-recs-list li { padding-left: 1.75rem; position: relative; color: #333; line-height: 1.6; }
.lrsp-recs-list li::before { content: '✔'; position: absolute; left: 0; top: 4px; color: #111; font-weight: bold; }

/* The Liorat Edit */
.liorat-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
.liorat-edit-item { text-align: center; }
.liorat-edit-item img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 12px; margin-bottom: 0.75rem; }
.liorat-edit-item span { font-weight: 600; font-size: 0.9rem; color: #333; }

/* CTA Final */
.lrsp-final-cta { text-align: center; padding: 4rem 1rem 2rem; }
.lrsp-final-cta h3 { font-family: 'Playfair Display', serif; font-size: 1.8rem; margin: 0 0 1rem; }
.lrsp-final-cta p { max-width: 500px; margin: 0 auto 2rem; color: #555; line-height: 1.6; }
.lrsp-final-cta .lr-btn { background: #111; color: #fff; }

@media(max-width: 768px) {
    .color-universe-grid, .body-recs-grid { grid-template-columns: 1fr; }
    .lrsp-palette { justify-content: flex-start; margin-top: 1.5rem; }
    .body-recs-img { width: 150px; margin: 0 auto; }
    .lrsp-recs-list { text-align: left; }
}

/* ========================================================
   ✅ NUEVO: ESTILOS PARA LA ETAPA "STYLE PERSONALITY"
   ======================================================== */

.lrps-grid {
    display: grid;
    /* Un grid flexible que se adapta */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.lrps-card {
    position: relative;
    border-radius: 12px;
    cursor: pointer;
    border: 2px solid transparent;
    background-color: #f9f9f9;
    transition: all 0.25s ease;
    overflow: hidden;
    aspect-ratio: 4/5; /* Proporción vertical para las imágenes de arquetipo */
}

.lrps-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--lr-shadow-card, 0 10px 28px rgba(0,0,0,.1));
}

.lrps-card.is-selected {
    border-color: var(--lr-ink, #111);
    box-shadow: var(--lr-shadow-card, 0 10px 28px rgba(0,0,0,.1));
}

.lrps-card.is-blocked {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(80%);
}
.lrps-card.is-blocked:hover {
    transform: none;
    box-shadow: none;
}

.lrps-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lrps-card-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem 0.75rem;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: #fff;
    font-weight: 600;
    text-align: center;
    font-size: 1rem;
    transition: all 0.25s ease;
}

.lrps-card.is-selected .lrps-card-label {
    background: var(--lr-ink, #111);
    font-weight: 700;
}

/* ========================================================
   ✅ NUEVO: ESTILOS PARA LA ETAPA "PREFERRED FIT"
   ======================================================== */

.lrfs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.lrfs-card {
    position: relative;
    border-radius: 12px;
    cursor: pointer;
    border: 2px solid transparent;
    background-color: #f9f9f9;
    transition: all 0.25s ease;
    overflow: hidden;
    aspect-ratio: 4/5; /* Proporción vertical */
}

.lrfs-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--lr-shadow-card, 0 10px 28px rgba(0,0,0,.1));
}

.lrfs-card.is-selected {
    border-color: var(--lr-ink, #111);
    box-shadow: var(--lr-shadow-card, 0 10px 28px rgba(0,0,0,.1));
}

.lrfs-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain; /* 'contain' para que se vea bien la ilustración del torso */
    padding: 1.5rem 1rem;
}

.lrfs-card-label {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 1rem 0.75rem;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: #fff;
    font-weight: 600;
    text-align: center;
    font-size: 1rem;
    transition: all 0.25s ease;
}

.lrfs-card.is-selected .lrfs-card-label {
    background: var(--lr-ink, #111);
}

@media(max-width: 600px) {
    .lrfs-grid {
        /* En móvil, aún 3 columnas pero más pequeñas, o puedes cambiar a 1 */
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }
    .lrfs-card-label {
        font-size: 0.8rem;
    }
}

/* ========================================================
   ✅ ESTILOS MEJORADOS PARA LA ETAPA "HEM LENGTH"
   ======================================================== */

/* 1. La Parrilla (Grid) - Corregida para un layout balanceado de 4+3 */
.lrhs-grid {
    display: grid;
    /* Forzamos 4 columnas en escritorio para un balance 4+3 */
    grid-template-columns: repeat(4, 1fr); 
    gap: 1.25rem;
    margin-top: 2rem;
}

/* 2. La Tarjeta (Card) - Nuevo diseño limpio con fondo blanco */
.lrhs-card {
    position: relative;
    border-radius: 16px;
    cursor: pointer;
    border: 1px solid var(--lr-border, rgba(17,17,17,.10));
    background-color: #fff; /* Fondo blanco */
    transition: all 0.25s ease;
    text-align: center;
    overflow: hidden;
}

.lrhs-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--lr-shadow-card, 0 10px 28px rgba(0,0,0,.08));
}

.lrhs-card.is-selected {
    border: 2px solid var(--lr-ink, #111);
    box-shadow: var(--lr-shadow-card, 0 10px 28px rgba(0,0,0,.08));
}

/* 3. La Ilustración */
.lrhs-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9/16;
    object-fit: contain;
    padding: 1.5rem 1rem 0.5rem;
}

/* 4. La Etiqueta (Label) - Ahora como texto simple debajo */
.lrhs-card-label {
    padding: 0.5rem 1rem 1rem;
    background: #fff;
    color: var(--lr-text, #111); /* Texto negro */
    font-weight: 600;
    font-size: 0.9rem;
}

.lrhs-card.is-selected .lrhs-card-label {
    font-weight: 700;
}

/* 5. Responsividad: 3 columnas en móvil */
@media(max-width: 768px) {
    .lrhs-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}
@media(max-width: 480px) {
    .lrhs-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en móvil muy pequeño */
    }
}

/* ========================================================
   ✅ ESTILOS REFINADOS PARA LA ETAPA "GO-TO SILHOUETTE"
   ======================================================== */

.lrss-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.lrss-card {
    position: relative;
    border-radius: 16px;
    cursor: pointer;
    border: 1px solid var(--lr-border, rgba(17,17,17,.10));
    background-color: #fff;
    transition: all 0.25s ease;
    text-align: center;
    overflow: hidden;
    /* aspect-ratio: 9/16;  <-- ✅ LÍNEA ELIMINADA */
}

.lrss-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--lr-shadow-card, 0 10px 28px rgba(0,0,0,.08));
}

.lrss-card.is-selected {
    border: 2px solid var(--lr-ink, #111);
    box-shadow: var(--lr-shadow-card, 0 10px 28px rgba(0,0,0,.08));
}

.lrss-card img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    /* ✅ PADDING AJUSTADO PARA DAR MÁS PROTAGONISMO A LA IMAGEN */
    padding: 2rem 1.5rem 0.5rem; 
}

.lrss-card-label {
    padding: 0.5rem 1rem 1.25rem;
    background: #fff;
    color: var(--lr-text, #111);
    font-weight: 600;
    font-size: 1rem; /* ✅ TAMAÑO LIGERAMENTE AUMENTADO */
}

.lrss-card.is-selected .lrss-card-label {
    font-weight: 700;
}

/* Responsividad (sin cambios) */
@media(max-width: 768px) {
    .lrss-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
}

/* ========================================================
   ✅ NUEVO: ESTILOS PARA LA ETAPA "ACCENTS YOU ENJOY"
   ======================================================== */

.lras-group {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--lr-border, rgba(17,17,17,.10));
}
.lras-group:first-child {
    margin-top: 0;
    padding-top: 1rem;
    border-top: none;
}

.lras-group-title {
    font-weight: 600;
    font-size: 1.1rem;
    text-align: center;
    color: var(--lr-sub, #555);
    margin: 0 0 1.5rem;
}

.lras-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    justify-content: center;
}

.lras-card {
    position: relative;
    border-radius: 12px;
    cursor: pointer;
    border: 2px solid transparent;
    background-color: #fff;
    border: 1px solid var(--lr-border, rgba(17,17,17,.10));
    transition: all 0.25s ease;
    overflow: hidden;
    aspect-ratio: 1/1; /* Tarjetas cuadradas para detalles */
}

.lras-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--lr-shadow-card, 0 8px 20px rgba(0,0,0,.08));
}

.lras-card.is-selected {
    border-color: var(--lr-ink, #111);
    box-shadow: var(--lr-shadow-card, 0 8px 20px rgba(0,0,0,.08));
}

.lras-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lras-card-label {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 0.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
    color: #fff;
    font-weight: 600;
    text-align: center;
    font-size: 0.8rem;
    transition: all 0.25s ease;
}

.lras-card.is-selected .lras-card-label {
    background: var(--lr-ink, #111);
}

/* ========================================================
   ✅ ESTILOS MEJORADOS PARA LA SECCIÓN DE ARQUETIPOS
   ======================================================== */

/* Contenedor principal de la sección de arquetipos */
.archetype-summary {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Columna principal más ancha */
    gap: 2rem;
    align-items: flex-start;
    margin-bottom: 2.5rem;
}

/* Tarjeta visual para el Arquetipo Primario */
.archetype-primary {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #f0f0f0;
}

.archetype-primary span, .archetype-secondary span {
    font-size: 0.9rem;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.archetype-primary strong, .archetype-secondary strong {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 4vw, 2.2rem);
    color: #111;
    margin: 0.25rem 0 0.75rem;
    line-height: 1.2;
}

.archetype-primary p {
    margin: 0;
    color: #333;
    line-height: 1.6;
}

/* Arquetipos Secundarios (más sencillos) */
.archetype-secondary strong {
    font-size: 1.5rem;
}

/* Responsividad para la sección de arquetipos */
@media(max-width: 768px) {
    .archetype-summary {
        grid-template-columns: 1fr; /* Apilamos en móvil */
        gap: 1.5rem;
    }
}

/* ========================================================
   ✅ ESTILOS REFORZADOS PARA LA GALERÍA "THE LIORAT EDIT"
   ======================================================== */

/* La cuadrícula (Grid) */
.liorat-edit-grid {
    display: grid;
    /* Crea columnas flexibles que se adaptan al espacio disponible */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem; /* Espacio entre las tarjetas */
}

/* Cada item de la cápsula */
.liorat-edit-item {
    text-align: center;
    /* Asegura que cada item ocupe su propia celda sin desbordarse */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.liorat-edit-item img {
    width: 100%;
    height: auto; /* Mantiene la proporción de la imagen */
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 0.75rem;
    display: block; /* Asegura que no haya espacios extra debajo de la imagen */
}

.liorat-edit-item span {
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
    line-height: 1.4;
}

/* ========================================================
   ✅ NUEVO: ESTILOS PARA LA SELECCIÓN GUIADA DE ARQUETIPOS
   ======================================================== */

/* Posicionamiento de la etiqueta (badge) */
.lrps-card .lrps-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: #111;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255,255,255,0.5);
    display: none; /* Oculta por defecto */
    animation: fadeInBadge 0.3s ease;
}

@keyframes fadeInBadge {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Efecto sutil en la imagen seleccionada para que la etiqueta resalte */
.lrps-card.is-selected img {
    filter: brightness(0.9);
}
/* ========================================================
   ✅ NUEVO: ESTILOS PARA EL SUBTÍTULO DE LAS ETAPAS
   ======================================================== */

/* Hacemos que los títulos de las etapas se centren por defecto */
.lrsp-step-title {
    text-align: center;
}

/* Estilos para el nuevo subtítulo (ej. "Select up to 2 options") */
.lrsp-step-subtitle {
    font-size: 0.95rem;
    color: #6b7280; /* Un gris suave para que no compita con el título */
    text-align: center;
    margin: -0.75rem 0 1.5rem; /* Margen negativo para acercarlo al título */
}

/* Estilos para el subtítulo (ej. "Select up to 2 options") */
.lrsp-step-subtitle {
    font-size: 0.95rem;
    color: #6b7280;
    text-align: center;
    margin: -0.75rem 0 1.5rem;
}

/* ========================================================
   ✅ NUEVO: ESTILOS PARA LA TRANSICIÓN SUAVE EN COLOR CORE
   ======================================================== */

.lrcs-content-wrapper {
    transition: opacity 0.2s ease-in-out;
    opacity: 1;
}

.lrcs-content-wrapper.is-fading {
    opacity: 0;
}



/* =========================================================================
   ✅ CÓDIGO RECOMENDADO: Diseño adaptativo para TODAS las etapas
   ========================================================================= */

/* Por defecto (móvil), 2 columnas para todas las etapas */
.lrps-grid, /* Style Personality */
.lrfs-grid, /* Preferred Fit */
.lrhs-grid, /* Hem Length */
.lrss-grid, /* Silhouette */
.lrgs-grid, /* Style Goals */
.lras-grid, /* Accents */
.lrbs-grid, /* Body Type */
.lrct-grid  /* Lifestyle & Constraints */ {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* En pantallas más grandes, cambiamos a 3 columnas */
@media (min-width: 768px) {
    .lrps-grid,
    .lrfs-grid,
    .lrhs-grid,
    .lrss-grid,
    .lrgs-grid,
    .lras-grid,
    .lrbs-grid,
    .lrct-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}



/* Quita padding del wrapper SOLO cuando el onboarding está activo */
body.lrsp-bleed .inside-article,
body.lrsp-bleed .entry-content,
body.lrsp-bleed .site-main,
body.lrsp-bleed .grid-container{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* el bloque de cristal interior no se toca */