/* ============================================================
   🧩 RenderFront GRID v2.2 — Proporciones perfectas
   ============================================================ */

:root {
    --rf-gap: 1rem;
    --rf-space-1: 0.25rem;
    --rf-space-2: 0.5rem;
    --rf-space-3: 1rem;
    --rf-space-4: 1.5rem;
    --rf-space-5: 3rem;
}

/* Contenedor */
.rf-container {
    width: 100%;
    padding: 0 1rem;
    margin: 0 auto;
}

/* Filas */
.rf-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--rf-gap) * -0.5);
    margin-right: calc(var(--rf-gap) * -0.5);
    width: 100%;
}

/* Columnas base */
.rf-col,
[class*="rf-col-"] {
    padding-left: calc(var(--rf-gap) * 0.5);
    padding-right: calc(var(--rf-gap) * 0.5);

    flex: 0 0 auto;
    box-sizing: border-box;
}

/* COLUMNAS 12 SIMPLES (COMO BOOTSTRAP) */
.rf-col-1  { flex-basis: 8.3333%;  max-width: 8.3333%;  }
.rf-col-2  { flex-basis: 16.6666%; max-width: 16.6666%; }
.rf-col-3  { flex-basis: 25%;      max-width: 25%;      }
.rf-col-4  { flex-basis: 33.3333%; max-width: 33.3333%; }
.rf-col-5  { flex-basis: 41.6666%; max-width: 41.6666%; }
.rf-col-6  { flex-basis: 50%;      max-width: 50%;      }
.rf-col-7  { flex-basis: 58.3333%; max-width: 58.3333%; }
.rf-col-8  { flex-basis: 66.6666%; max-width: 66.6666%; }
.rf-col-9  { flex-basis: 75%;      max-width: 75%;      }
.rf-col-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
.rf-col-11 { flex-basis: 91.6666%; max-width: 91.6666%; }
.rf-col-12 { flex-basis: 100%;     max-width: 100%;     }

/* RESPONSIVE */
@media (max-width: 768px) {
    .rf-col-6,
    .rf-col-4,
    .rf-col-3 {
        flex-basis: 100%;
        max-width: 100%;
    }
}
/* ============================================================
   📱 RENDERFRONT — COLUMNAS ESPECÍFICAS PARA MÓVIL
   ============================================================ */

/* MÓVIL (hasta 768px) */
@media (max-width: 768px) {

    .rf-col-m-1  { flex-basis: 8.3333% !important;  max-width: 8.3333% !important; }
    .rf-col-m-2  { flex-basis: 16.6666% !important; max-width: 16.6666% !important; }
    .rf-col-m-3  { flex-basis: 25% !important;      max-width: 25% !important; }
    .rf-col-m-4  { flex-basis: 33.3333% !important; max-width: 33.3333% !important; }
    .rf-col-m-5  { flex-basis: 41.6666% !important; max-width: 41.6666% !important; }
    .rf-col-m-6  { flex-basis: 50% !important;      max-width: 50% !important; }
    .rf-col-m-7  { flex-basis: 58.3333% !important; max-width: 58.3333% !important; }
    .rf-col-m-8  { flex-basis: 66.6666% !important; max-width: 66.6666% !important; }
    .rf-col-m-9  { flex-basis: 75% !important;      max-width: 75% !important; }
    .rf-col-m-10 { flex-basis: 83.3333% !important; max-width: 83.3333% !important; }
    .rf-col-m-11 { flex-basis: 91.6666% !important; max-width: 91.6666% !important; }
    .rf-col-m-12 { flex-basis: 100% !important;     max-width: 100% !important; }
}



/* ============================================================
   🧱 COMPONENTES BASE
   ============================================================ */

/* TARJETAS */
.rf-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: 0.2s ease;
}

.rf-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* BOTONES */
.rf-btn {
    padding: 0.65rem 1.2rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    border: none;
    transition: 0.2s ease;
}

.rf-btn-primary {
    background: #0073aa;
    color: #fff;
}
.rf-btn-primary:hover {
    background: #005c88;
}

/* ============================================================
   📁 ACORDEÓN
   ============================================================ */

.rf-accordion {
    list-style: none;
     
    border-radius: 6px;
    margin: 1rem 0;
    overflow: hidden;
}

.rf-accordion-item {
    margin-bottom: 1px;
    border-bottom:1px solid #ccc;
}

.rf-accordion-label {
    display: block;
    padding: 1rem;
    cursor: pointer;
    
    font-weight: 600;
    transition: 0.2s;
}

.rf-accordion-label:hover {
    background: #efefef;
}

.rf-accordion input[type="checkbox"] {
    display: none;
}

.rf-accordion-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: 0.3s ease;
    background: #fff;
    padding: 0 1rem;
}

.rf-accordion input:checked ~ .rf-accordion-content {
    max-height: 600px;
    opacity: 1;
    padding: 1rem;
}

/* ============================================================
   🗂️ TABS
   ============================================================ */

.rf-tabs {
    display: flex;
    border-bottom: 1px solid #ddd;
    margin-bottom: 1rem;
}

.rf-tab {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: 0.2s;
    border-bottom: 2px solid transparent;
}

.rf-tab.active {
    border-bottom-color: #0073aa;
    color: #0073aa;
}

/* ============================================================
   ⚙️ UTILIDADES
   ============================================================ */

.rf-text-center  { text-align: center; }
.rf-text-right   { text-align: right; }
.rf-text-left    { text-align: left; }

/* Centrado vertical */
.rf-center-y {
    display: flex;
    align-items: center;
}

/* Centrado horizontal */
.rf-center-x {
    display: flex;
    justify-content: center;
}

/* Centrado total (ya lo tienes) */
.rf-center {
    display: flex;
    align-items: center;
    justify-content: center;
}


.rf-mt-1 { margin-top: 1rem; }
.rf-mb-1 { margin-bottom: 1rem; }
.rf-pt-1 { padding-top: 1rem; }
.rf-pb-1 { padding-bottom: 1rem; }

.rf-gap-1 { gap: 0.5rem; }
.rf-gap-2 { gap: 1rem; }
.rf-gap-3 { gap: 2rem; }

/* DEBUG VISUAL */
.rf-debug [class*="rf-col-"] {
    outline: 1px dashed #77aaff;
    background: rgba(0, 112, 255, 0.05);
}
/* ============================================================
   📱 RENDERFRONT MÓVIL — 3 ZONAS
   ============================================================ */

@media (max-width: 768px) {

    .rf-mobile-wrapper {
        height: 100vh;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
        background: #fafafa;
    }

    /* ZONA 1 – IMAGEN FIJA ARRIBA */
    .rf-mobile-top {
        position: sticky;
        top: 0;
        z-index: 20;
        background: #fff;
        width: 100%;
    }

    .rf-mobile-image {
        width: 100%;
        height: auto;
        display: block;
    }

    /* ZONA 2 – SCROLL CENTRAL */
    .rf-mobile-scroll {
        flex: 1;
        overflow-y: auto;
        padding-bottom: 5rem; /* espacio por si se superpone */
    }

    /* ZONA 3 – BOTÓN FIJO ABAJO */
    .rf-mobile-bottom {
        position: sticky;
        bottom: 0;
        z-index: 30;
        width: 100%;
        background: white;
        padding: 1rem;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    }

    .rf-mobile-buy-btn {
        width: 100%;
        padding: 1.2rem;
        font-size: 1.4rem;
        border-radius: 8px;
        font-weight: 700;
    }
}


/* ============================================================
   📏 RENDERFRONT SPACERS — MÁRGENES
   Basado en Bootstrap — Versión ligera
   ============================================================ */


/* Margin top */
.rf-mt-1 { margin-top: var(--rf-space-1) !important; }
.rf-mt-2 { margin-top: var(--rf-space-2) !important; }
.rf-mt-3 { margin-top: var(--rf-space-3) !important; }
.rf-mt-4 { margin-top: var(--rf-space-4) !important; }
.rf-mt-5 { margin-top: var(--rf-space-5) !important; }

/* Margin bottom */
.rf-mb-1 { margin-bottom: var(--rf-space-1) !important; }
.rf-mb-2 { margin-bottom: var(--rf-space-2) !important; }
.rf-mb-3 { margin-bottom: var(--rf-space-3) !important; }
.rf-mb-4 { margin-bottom: var(--rf-space-4) !important; }
.rf-mb-5 { margin-bottom: var(--rf-space-5) !important; }

/* Margin left */
.rf-ml-1 { margin-left: var(--rf-space-1) !important; }
.rf-ml-2 { margin-left: var(--rf-space-2) !important; }
.rf-ml-3 { margin-left: var(--rf-space-3) !important; }
.rf-ml-4 { margin-left: var(--rf-space-4) !important; }
.rf-ml-5 { margin-left: var(--rf-space-5) !important; }

/* Margin right */
.rf-mr-1 { margin-right: var(--rf-space-1) !important; }
.rf-mr-2 { margin-right: var(--rf-space-2) !important; }
.rf-mr-3 { margin-right: var(--rf-space-3) !important; }
.rf-mr-4 { margin-right: var(--rf-space-4) !important; }
.rf-mr-5 { margin-right: var(--rf-space-5) !important; }

/* Margin horizontal (mx) */
.rf-mx-1 { margin-left: var(--rf-space-1) !important; margin-right: var(--rf-space-1) !important; }
.rf-mx-2 { margin-left: var(--rf-space-2) !important; margin-right: var(--rf-space-2) !important; }
.rf-mx-3 { margin-left: var(--rf-space-3) !important; margin-right: var(--rf-space-3) !important; }
.rf-mx-4 { margin-left: var(--rf-space-4) !important; margin-right: var(--rf-space-4) !important; }
.rf-mx-5 { margin-left: var(--rf-space-5) !important; margin-right: var(--rf-space-5) !important; }

/* Margin vertical (my) */
.rf-my-1 { margin-top: var(--rf-space-1) !important; margin-bottom: var(--rf-space-1) !important; }
.rf-my-2 { margin-top: var(--rf-space-2) !important; margin-bottom: var(--rf-space-2) !important; }
.rf-my-3 { margin-top: var(--rf-space-3) !important; margin-bottom: var(--rf-space-3) !important; }
.rf-my-4 { margin-top: var(--rf-space-4) !important; margin-bottom: var(--rf-space-4) !important; }
.rf-my-5 { margin-top: var(--rf-space-5) !important; margin-bottom: var(--rf-space-5) !important; }

/* Margin auto (centra elementos) */
.rf-mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Paneles de tabs ocultos por defecto */
.rf-tab-panel {
    display: none;
}

/* Panel activo visible */
.rf-tab-panel.active {
    display: block;
}


/* Contenedor horizontal */
.rf-color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Punto de color */
.rf-color-dot {
    width: 32px;
    height: 32px;
    
    border-radius: 50%;
    border:1px solid #ccc;
    cursor: pointer;
    transition: 
        transform .15s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

/* Estado seleccionado */
.rf-color-dot.active {
    transform: scale(1);                       /* ❗ No encogerse */
    border-color: #000;
    box-shadow: 0 0 0 4px rgba(0, 115, 170, 0.25); /* halo */
}

.rf-color-dot.texture {
    background-size: 300% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 48px;
    height: 48px;
}

/* Hover */
.rf-color-dot:hover {
    transform: scale(1.12);
}

/* Móvil: puntos más grandes */
@media (max-width: 768px) {
    .rf-color-dot {
        width: 42px;
        height: 42px;
    }
}

/* === TABS SUPERIORES === */
.rf-category-tab {
    font-size: 1.4rem;
    font-weight: 700;
    padding: 0.75rem 1rem;
    cursor: pointer;
    text-align: center;
    border-bottom: 3px solid transparent;
    transition: 0.25s ease;
}

.rf-category-tab.active {
    color: #000000;
    border-bottom-color: #000000;
}

/* === SUBTABS  === */
.rf-subtab {
    font-size: 1.2rem;
    padding: 0.5rem 0;
    cursor: pointer;
    transition: 0.25s ease;
    text-align: center;
    border-bottom: 2px solid transparent;
}

@media (max-width: 768px) {

    .rf-subtab {
        font-size: 0.95rem;     /* ↓ reduce tamaño */
        padding: 0.4rem 0;      /* ↓ menos espacio vertical */
        border-bottom-width: 2px;
    }

    
}

.rf-subtab.active {
    color: #000000;
    border-bottom-color: #000000;
}


.rf-separator-vertical {
    width: 100%;
    height: 1px; /* ajusta según tu diseño */
    background: #e0e0e0;
    
    margin: 40px 0px; /* separación lateral */
}