/**
 * VIVA Rent Flex — Estilos frontend
 *
 * Encolado condicionalmente por class-assets.php (Fase 2).
 * Solo en páginas que usan el catálogo, la ficha de producto o el carrito.
 *
 * Convención: todos los selectores usan el prefijo .rf- para evitar colisiones
 * con el tema Hello Elementor.
 */

@import url("variables.css");

/* -------------------------------------------------------------------------
   Base — reset + blindaje anti-herencia del tema, dentro del scope del plugin

   ".rf-plugin *" tiene la misma especificidad (0,1,0) que cualquier clase
   de componente ".rf-algo" declarada más abajo en este archivo: como el
   reset va primero en el orden de cascada, un componente más específico
   siempre puede pisarlo, pero por defecto gana sobre selectores de elemento
   del tema (ej. "a { color: ... }", especificidad 0,0,1) que de otro modo
   heredarían tipografía/color ajenos dentro del plugin.
------------------------------------------------------------------------- */

.rf-plugin * {
    box-sizing: border-box;
    font-family: var(--rf-f-body);
    color: inherit;
}

.rf-plugin {
    font-family: var(--rf-f-body);
    color: var(--rf-ink);
    background: transparent;
}

/* -------------------------------------------------------------------------
   Blindaje reforzado — headings y controles nativos (<h1-h6>, <button>,
   <input type="button|submit">).

   El kit global de Elementor (Site Settings > Tipografía/Botones) estiliza
   estos elementos con selectores "clase-del-kit + elemento" (ej.
   ".elementor-kit-9 h2", ".elementor-kit-9 button"), especificidad
   (0,1,1) — más específica que una sola clase de componente nuestra
   (0,1,0), y por eso le gana a ".rf-plugin *" y a reglas como
   ".rf-filter-btn { font-family: ... }" sin importar el orden de carga.

   Se duplica la clase de scope (".rf-plugin.rf-plugin") para subir a
   (0,2,1): gana siempre, sin depender del orden de las hojas de estilo y
   sin usar !important.
------------------------------------------------------------------------- */

.rf-plugin.rf-plugin h1,
.rf-plugin.rf-plugin h2,
.rf-plugin.rf-plugin h3,
.rf-plugin.rf-plugin h4,
.rf-plugin.rf-plugin h5,
.rf-plugin.rf-plugin h6 {
    font-family: var(--rf-f-display);
}

.rf-plugin.rf-plugin button,
.rf-plugin.rf-plugin input[type="button"],
.rf-plugin.rf-plugin input[type="submit"] {
    font-family: var(--rf-f-body);
}

/* -------------------------------------------------------------------------
   Tipografía utilitaria
------------------------------------------------------------------------- */

.rf-text-display {
    font-family: var(--rf-f-display);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.rf-text-body {
    font-family: var(--rf-f-body);
    font-weight: 400;
    line-height: 1.55;
}

.rf-eyebrow {
    font-family: var(--rf-f-mono);
    font-size:   var(--rf-mono-eyebrow-size);
    font-weight: var(--rf-mono-weight);
    letter-spacing: var(--rf-mono-tracking);
    text-transform: uppercase;
    color: var(--rf-navy-600);
}

/* -------------------------------------------------------------------------
   Botones base
------------------------------------------------------------------------- */

/* Selectores con ".rf-plugin " como ancestro (especificidad 0,2,x): el kit
   de Elementor estiliza <button>/<input type="button|submit"> con
   ".elementor-kit-N button" (0,1,1) — más específico que ".rf-btn-primary"
   sola (0,1,0). Sin el ancestro, el botón "Cotizar"/"Enviar cotización"
   (son <button>) heredaría el azul y el radius del tema en vez de los
   nuestros. Los botones que son <a> (ej. "Seguir explorando el catálogo")
   no lo necesitan por especificidad, pero se dejan igual por consistencia.

   Los estados :hover/:focus-visible del botón primario usan ADEMÁS el
   scope duplicado ".rf-plugin.rf-plugin" (especificidad 0,4,0 con el
   pseudo-clase incluido): el tema (Hello Elementor reset.css) trae
   "button:hover{background-color:#c36}" (magenta) — especificidad (0,1,1),
   igual de baja que el resto, pero se escapó del blindaje anterior (que
   solo cubría un nivel de ".rf-plugin "). Se sube un escalón más para que
   ningún hover nativo del tema pueda volver a ganar.

   :focus y :active van en la MISMA regla blindada: al hacer click con
   mouse el botón queda en :focus (no :focus-visible) y pasa por :active —
   estados que el tema/kit también estilizan en magenta y que el blindaje
   anterior no cubría (el botón se ponía magenta justo al clickearlo, ej.
   al disparar la validación de "Selecciona una talla"). */
.rf-plugin .rf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rf-space-2);
    font-family: var(--rf-f-body);
    font-size: var(--rf-text-base);
    font-weight: 600;
    line-height: 1;
    padding: var(--rf-space-3) var(--rf-space-6);
    border-radius: var(--rf-radius);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--rf-transition),
                border-color var(--rf-transition),
                color var(--rf-transition),
                box-shadow var(--rf-transition);
}

.rf-plugin .rf-btn-primary {
    background-color: var(--rf-navy-800);
    border-color: var(--rf-navy-800);
    color: var(--rf-white);
}

.rf-plugin.rf-plugin .rf-btn-primary:hover,
.rf-plugin.rf-plugin .rf-btn-primary:focus,
.rf-plugin.rf-plugin .rf-btn-primary:focus-visible,
.rf-plugin.rf-plugin .rf-btn-primary:active {
    background-color: var(--rf-navy-700);
    border-color: var(--rf-navy-700);
    box-shadow: var(--rf-shadow);
    color: var(--rf-white);
    text-decoration: none;
}

.rf-plugin .rf-btn-outline {
    background-color: transparent;
    border-color: var(--rf-navy-800);
    color: var(--rf-navy-800);
}

.rf-plugin.rf-plugin .rf-btn-outline:hover,
.rf-plugin.rf-plugin .rf-btn-outline:focus,
.rf-plugin.rf-plugin .rf-btn-outline:focus-visible,
.rf-plugin.rf-plugin .rf-btn-outline:active {
    background-color: var(--rf-navy-800);
    color: var(--rf-white);
    text-decoration: none;
}

/* -------------------------------------------------------------------------
   Indicador flotante del carrito (Grupo E)

   Reposicionado al lateral derecho, centrado en la mitad vertical de la
   pantalla — antes vivía abajo-a-la-derecha y chocaba con el botón fijo de
   WhatsApp del sitio (también fixed, bottom-right). Ambos siguen del lado
   derecho, pero ya no se solapan: WhatsApp vive abajo, esta burbuja vive a
   media altura.
------------------------------------------------------------------------- */

.rf-cart-indicator {
    position: fixed;
    top: 50%;
    right: var(--rf-space-5);
    z-index: var(--rf-z-cart);
    box-sizing: border-box;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--rf-navy-800);
    border-radius: 50%;
    box-shadow: var(--rf-shadow-lg);
    text-decoration: none;
    /* Promueve el elemento a su propia capa de composición: fixed +
       border-radius + box-shadow sin esto a veces pinta el círculo
       recortado/incompleto hasta el primer repaint. */
    will-change: transform;
    transition: box-shadow var(--rf-transition);
    /* translate(0, -50%) centra verticalmente — todos los demás estados
       (hover, animación) parten de este mismo offset y solo suman encima,
       nunca lo reemplazan, para no perder el centrado. */
    transform: translate(0, -50%);
    animation: rf-cart-attention 10s ease-in-out infinite;
}

.rf-cart-indicator:hover {
    /* Pausa la animación de "estoy aquí": mientras esté activa (infinite),
       su "transform" le gana en cascada al de :hover aunque este tenga
       mayor especificidad — son capas distintas. Al pausarla, el
       "transform" de acá abajo se aplica normalmente. */
    animation-play-state: paused;
    transform: translate(0, calc(-50% - 3px));
    box-shadow: var(--rf-shadow-xl);
    text-decoration: none;
}

/* "Estoy aquí": cada 10s, un pulso/rebote sutil que llama la atención y
   vuelve al reposo — el resto del ciclo queda completamente quieta. */
@keyframes rf-cart-attention {
    0%, 90%, 100% {
        transform: translate(0, -50%) scale(1);
    }
    93% {
        transform: translate(0, calc(-50% - 5px)) scale(1.1);
    }
    96% {
        transform: translate(0, -50%) scale(0.97);
    }
    98% {
        transform: translate(0, calc(-50% - 2px)) scale(1.03);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rf-cart-indicator {
        animation: none;
    }
}

/* Este indicador se inyecta en wp_footer, fuera del scope ".rf-plugin"
   (no hay ese ancestro disponible aquí), pero ya trae un id único en el
   markup — se usa para subir la especificidad (1,0,0), que le gana sin
   problema a ".elementor-kit-9 a{color:#287ABE}" (0,1,1) del kit de
   Elementor. El ícono usa stroke="currentColor", así que hereda este
   "color" — sin este empujón se pintaría azul del tema en vez de blanco. */
#rf-cart-indicator,
#rf-cart-indicator:hover {
    color: var(--rf-white);
}

.rf-cart-indicator__icon {
    width: 26px;
    height: 26px;
}

.rf-cart-indicator__count {
    position: absolute;
    top: -2px;
    right: -2px;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    background-color: var(--rf-secondary);
    color: var(--rf-white);
    border: 2px solid var(--rf-white);
    border-radius: 999px;
    font-family: var(--rf-f-body);
    font-size: var(--rf-text-xs);
    font-weight: 700;
    padding: 0 var(--rf-space-1);
}

.rf-cart-indicator[data-count="0"] {
    display: none;
}

@media (max-width: 480px) {
    .rf-cart-indicator {
        width: 48px;
        height: 48px;
        right: var(--rf-space-3);
    }

    .rf-cart-indicator__icon {
        width: 22px;
        height: 22px;
    }
}

/* =========================================================================
   Archive del CPT producto — /productos/
   (contenedor de página; el grid interior lo definen las reglas de catálogo)
========================================================================= */

/* Sin padding-top: esta vista (archive del CPT, y lo mismo aplica al
   shortcode [rf_catalog]) vive dentro de una pagina de Elementor, que ya
   controla su propio espaciado superior — un padding-top del plugin aqui
   se duplicaria con el del sitio. El espaciado inferior si se conserva. La
   unica vista que SI trae su propio padding-top es la single de producto
   (.rf-product-page / .rf-product-single), que se renderiza fuera del
   control de Elementor. */
.rf-catalog-archive {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--rf-space-6) var(--rf-space-12);
}

.rf-catalog-archive__header {
    margin-bottom: var(--rf-space-8);
}

.rf-catalog-archive__title {
    font-size:      var(--rf-text-4xl);
    font-weight:    900;
    letter-spacing: -0.02em;
    color:          var(--rf-navy-900);
    margin:         0;
}

@media (max-width: 768px) {
    .rf-catalog-archive {
        padding: 0 var(--rf-space-4) var(--rf-space-8);
    }
    .rf-catalog-archive__title {
        font-size: var(--rf-text-3xl);
    }
}

/* =========================================================================
   Catálogo — [rf_catalog]
========================================================================= */

.rf-catalog {
    width: 100%;
}

/* Filtros — slider horizontal de una sola línea (Grupo B) */
.rf-catalog__filters-wrap {
    position: relative;
    margin-bottom: var(--rf-space-8);
}

.rf-catalog__filters {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--rf-space-2);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: var(--rf-space-8);
}

.rf-catalog__filters::-webkit-scrollbar {
    display: none;
}

/* Indicador de que se puede hacer scroll: degradado a la derecha. No
   intercepta clics ni se mueve con el contenido (position: absolute sobre
   el wrapper, no dentro del área con overflow-x). */
.rf-catalog__filters-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 36px;
    background: linear-gradient(to right, transparent, var(--rf-white));
    pointer-events: none;
}

/* ".rf-plugin " como ancestro: son <button> (tabs), el kit de Elementor
   las estiliza con ".elementor-kit-N button" (0,1,1), más específico que
   ".rf-filter-btn" sola (0,1,0). Ver nota en "Botones base". */
.rf-plugin .rf-filter-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    font-family: var(--rf-f-body);
    font-size:   var(--rf-text-sm);
    font-weight: 600;
    line-height: 1;
    padding: var(--rf-space-2) var(--rf-space-5);
    border-radius: var(--rf-radius);
    border: 1.5px solid var(--rf-line);
    background: var(--rf-white);
    color: var(--rf-slate-600);
    cursor: pointer;
    transition: background-color var(--rf-transition),
                border-color var(--rf-transition),
                color var(--rf-transition);
}

.rf-plugin .rf-filter-btn:hover {
    border-color: var(--rf-navy-700);
    color: var(--rf-navy-700);
}

.rf-plugin .rf-filter-btn.is-active {
    background-color: var(--rf-navy-800);
    border-color:     var(--rf-navy-800);
    color:            var(--rf-white);
}

/* Grid */
.rf-catalog__grid {
    display: grid;
    gap: var(--rf-space-5);
}

.rf-grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.rf-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.rf-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.rf-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
    .rf-grid-cols-3,
    .rf-grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: 2 columnas (catálogo denso y escaneable); 1 sola en pantallas muy angostas. */
@media (max-width: 560px) {
    .rf-catalog__grid { gap: var(--rf-space-4); }

    .rf-grid-cols-2,
    .rf-grid-cols-3,
    .rf-grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 380px) {
    .rf-grid-cols-1,
    .rf-grid-cols-2,
    .rf-grid-cols-3,
    .rf-grid-cols-4 { grid-template-columns: 1fr; }
}

/* Tarjeta de producto — patrón e-commerce (imagen protagonista + acción icono) */
.rf-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Imagen — contenedor relativo que aloja el link de la imagen + el ícono
   flotante. aspect-ratio 4/5 (antes 3/4): cards más chicas — Grupo B. */
.rf-product-card__media-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: var(--rf-radius-lg);
    overflow: hidden;
    background-color: var(--rf-paper);
    box-shadow: var(--rf-shadow-sm);
    transition: box-shadow var(--rf-transition);
}

.rf-product-card:hover .rf-product-card__media-wrap {
    box-shadow: var(--rf-shadow);
}

.rf-product-card__media {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ".rf-plugin " como ancestro (0,2,0): el reset del tema trae
   "img{height:auto;max-width:100%}" (elemento, 0,0,1) — en teoria nuestra
   ".rf-product-card__img" sola (0,1,0) ya le gana, pero el kit de
   Elementor viene repitiendo este mismo patron con selectores mas
   especificos en otros elementos (ver notas de "Botones base"); se sube la
   especificidad aqui tambien para que el "cover" no dependa de eso. */
.rf-plugin .rf-product-card__img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    transition: transform var(--rf-transition-slow);
}

/* Mini zoom en hover — SOLO para cards sin imagen de hover; cuando hay una
   segunda imagen (--has-hover-img), el hover hace crossfade a esa imagen en
   vez de escalar. */
.rf-plugin .rf-product-card:not(.rf-product-card--has-hover-img):hover .rf-product-card__img {
    transform: scale(1.04);
}

/* Segunda imagen (primera de la galería distinta a la base): encima de la
   base, invisible hasta el hover. Absoluta dentro del <a>.rf-product-card
   __media (position:absolute + inset:0), debajo del badge/ícono (z-index 2). */
.rf-plugin .rf-product-card__img--hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--rf-transition-slow);
}

@media (hover: hover) {
    .rf-plugin .rf-product-card--has-hover-img:hover .rf-product-card__img--hover {
        opacity: 1;
    }
}

.rf-product-card__img-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--rf-gold-50) 0%, var(--rf-gold-100) 100%);
}

/* Categoría — eyebrow overlay arriba-izquierda sobre la imagen */
.rf-product-card__badge {
    position: absolute;
    top: var(--rf-space-3);
    left: var(--rf-space-3);
    z-index: 2;
    background: rgba(255, 255, 255, 0.94);
    color: var(--rf-navy-900);
    font-family: var(--rf-f-mono);
    font-size: 10px;
    font-weight: var(--rf-mono-weight);
    letter-spacing: var(--rf-mono-tracking);
    text-transform: uppercase;
    padding: 4px var(--rf-space-2);
    border-radius: 999px;
}

/* Acción de cotizar — ícono flotante esquina inferior derecha de la imagen.
   ".rf-plugin " como ancestro (0,2,0): es un <a>, y el kit de Elementor
   trae ".elementor-kit-9 a{color:#287ABE}" (0,1,1), más específico que
   ".rf-product-card__quote-btn" sola (0,1,0) — el ícono se veía azul de
   Elementor en vez de blanco. Misma técnica que en "Botones base". */
.rf-plugin .rf-product-card__quote-btn {
    position: absolute;
    right: var(--rf-space-3);
    bottom: var(--rf-space-3);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--rf-navy-900);
    color: var(--rf-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--rf-shadow);
    text-decoration: none;
    transition: background-color var(--rf-transition), transform var(--rf-transition), opacity var(--rf-transition);
}

.rf-plugin .rf-product-card__quote-btn:hover,
.rf-plugin .rf-product-card__quote-btn:focus-visible {
    background-color: var(--rf-gold-500);
    color: var(--rf-white);
    transform: scale(1.08);
}

.rf-product-card__quote-icon {
    width: 18px;
    height: 18px;
}

/* El ícono de cotizar es SIEMPRE visible (desktop y mobile por igual): que
   quede claro que la card es interactuable sin depender de pasar el mouse. */

/* Overlay del nombre — SOLO desktop (Grupo B). En mobile se mantiene
   .rf-product-card__info (nombre debajo de la imagen), sin cambios. */
.rf-product-card__overlay {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: var(--rf-space-8) var(--rf-space-3) var(--rf-space-3);
    background: linear-gradient(to top, rgba(9, 25, 54, 0.85) 0%, rgba(9, 25, 54, 0) 100%);
    pointer-events: none;
}

/* ".rf-plugin " como ancestro: es un <a>, y el kit de Elementor trae
   ".elementor-kit-N a{color:#287ABE}" (0,1,1), más específico que
   ".rf-product-card__overlay-name" sola (0,1,0). Misma técnica que en
   ".rf-product-card__quote-btn". */
.rf-plugin .rf-product-card__overlay-name {
    display: block;
    /* El padre tiene pointer-events:none para dejar pasar los clics al link
       de la imagen; el nombre SÍ es clicable (es un <a> real, ver PHP). */
    pointer-events: auto;
    font-family: var(--rf-f-display);
    font-size: var(--rf-text-lg);
    font-weight: 700;
    line-height: 1.25;
    color: var(--rf-white);
    text-decoration: none;
    /* Deja aire a la derecha para no quedar debajo del ícono de cotizar. */
    padding-right: 48px;
}

.rf-plugin .rf-product-card__overlay-name:hover {
    text-decoration: underline;
}

/* Línea corta de info debajo de la card (tallas/colores/característica) —
   SOLO desktop. Una sola línea, se recorta con ellipsis si es muy larga. */
.rf-product-card__meta-line {
    display: none;
    margin: var(--rf-space-2) var(--rf-space-1) 0;
    font-size: var(--rf-text-xs);
    color: var(--rf-slate-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Info — nombre discreto + acción secundaria (ficha PDF) debajo de la
   imagen. Mobile: layout original, sin cambios ("lo que ya funciona"). */
.rf-product-card__info {
    padding: var(--rf-space-3) var(--rf-space-1) 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rf-product-card__name {
    font-family: var(--rf-f-body);
    font-size: var(--rf-text-sm);
    font-weight: 600;
    line-height: 1.35;
    color: var(--rf-navy-800);
    text-decoration: none;
    transition: color var(--rf-transition);
}

.rf-product-card__name:hover {
    color: var(--rf-gold-500);
}

/* Desktop (Grupo B): nombre en el overlay sobre la imagen en vez de debajo,
   más la línea corta de info. Va DESPUÉS de las reglas base de arriba a
   propósito: misma especificidad (0,1,0), así que el orden en la hoja de
   estilo decide — tiene que ganar la última. */
@media (min-width: 769px) {
    .rf-product-card__overlay {
        display: block;
    }

    .rf-product-card__info {
        display: none;
    }

    .rf-product-card__meta-line {
        display: block;
    }
}

/* Paginación del catálogo */
.rf-catalog__pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--rf-space-2);
    margin-top: var(--rf-space-10);
}

/* Sin botones (1 sola página tras filtrar): el <nav> queda vacío pero
   persiste en el DOM (el JS solo reemplaza su innerHTML) — se oculta así
   en vez de removerlo, para no tener que recrearlo si vuelve a haber
   más de una página. */
.rf-catalog__pagination:empty {
    display: none;
    margin-top: 0;
}

/* ".rf-plugin " como ancestro: son <button> (paginación). Ver nota en
   "Botones base". */
.rf-plugin .rf-page-btn {
    font-family: var(--rf-f-mono);
    font-size: var(--rf-text-sm);
    font-weight: 600;
    line-height: 1;
    min-width: 38px;
    height: 38px;
    padding: 0 var(--rf-space-2);
    border-radius: var(--rf-radius);
    border: 1.5px solid var(--rf-line);
    background: var(--rf-white);
    color: var(--rf-slate-600);
    cursor: pointer;
    transition: background-color var(--rf-transition),
                border-color var(--rf-transition),
                color var(--rf-transition);
}

.rf-plugin .rf-page-btn:hover {
    border-color: var(--rf-navy-700);
    color: var(--rf-navy-700);
}

.rf-plugin .rf-page-btn.is-active {
    background-color: var(--rf-navy-800);
    border-color:     var(--rf-navy-800);
    color:            var(--rf-white);
    cursor: default;
}

/* Estado vacío */
.rf-catalog__empty {
    color: var(--rf-slate-600);
    font-family: var(--rf-f-body);
    padding: var(--rf-space-12) 0;
    text-align: center;
}

/* =========================================================================
   Wrapper de la single de producto — templates/product-single.php
   Resuelve el choque con el header del tema (fijo/transparente): padding-top
   generoso y separación del footer. Fondo heredado del tema (sin tarjeta).
========================================================================= */

.rf-product-page {
    max-width: 1200px;
    margin: 0 auto 100px;
    padding: 80px 20px 60px;
}

@media (max-width: 768px) {
    .rf-product-page {
        margin-bottom: 60px;
        padding: 80px 20px 40px;
    }
}

/* =========================================================================
   Ficha individual de producto — templates/product-detail.php ([rf_product])
========================================================================= */

.rf-product-single {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--rf-space-12) var(--rf-space-6);
}

/* Layout dos columnas */
.rf-product-single__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--rf-space-12);
    align-items: start;
}

@media (max-width: 768px) {
    .rf-product-single__inner {
        grid-template-columns: 1fr;
        gap: var(--rf-space-8);
    }
}

/* Galería sticky al hacer scroll — solo desktop (mobile queda en flujo normal).
   top generoso para que quede aire visible entre el navbar y la imagen. */
@media (min-width: 769px) {
    .rf-product-single__gallery {
        position: sticky;
        top: 220px;
    }
}

/* Galería */
.rf-gallery__main {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--rf-radius-lg);
    overflow: hidden;
    background-color: var(--rf-paper);
    border: 1px solid var(--rf-line);
}

.rf-gallery__main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity var(--rf-transition);
}

/* Zoom lupa sobre la imagen principal — solo dispositivos con mouse. El CSS
   aplica el scale en hover; el punto ampliado (transform-origin) lo mueve el
   JS inline de product-detail.php siguiendo el cursor. El overflow:hidden de
   .rf-gallery__main ya recorta la imagen escalada. */
@media (hover: hover) and (pointer: fine) {
    .rf-gallery__main {
        cursor: zoom-in;
    }

    .rf-gallery__main-img {
        transition: opacity var(--rf-transition), transform 0.15s ease-out;
    }

    .rf-gallery__main:hover .rf-gallery__main-img {
        transform: scale(2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rf-gallery__main-img {
        transition: opacity var(--rf-transition);
    }
}

.rf-gallery__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--rf-gold-50) 0%, var(--rf-gold-100) 100%);
}

.rf-gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rf-space-2);
    margin-top: var(--rf-space-3);
}

/* ".rf-plugin " como ancestro: es <button>. Ver nota en "Botones base". */
.rf-plugin .rf-gallery__thumb-btn {
    width: 64px;
    height: 64px;
    border: 2px solid transparent;
    border-radius: var(--rf-radius);
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    background: none;
    transition: border-color var(--rf-transition);
}

.rf-plugin .rf-gallery__thumb-btn:hover,
.rf-plugin .rf-gallery__thumb-btn.is-active {
    border-color: var(--rf-navy-700);
}

.rf-gallery__thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Contenido del producto */
.rf-product-single__content {
    display: flex;
    flex-direction: column;
    gap: var(--rf-space-5);
}

.rf-product-single__cat {
    display: block;
    color: var(--rf-slate-400);
}

/* ".rf-plugin.rf-plugin " (0,2,1): el kit de Elementor trae
   ".elementor-kit-N h1{font-size:48px;...}" (0,1,1) — mas especifico que
   ".rf-product-single__title" sola (0,1,0). Sin esto, el tamano real
   heredaba el del kit en vez del nuestro (por eso hoy se ve tan grande).
   Grupo C: 2.8-3rem en vez del tamano del kit. */
.rf-plugin.rf-plugin .rf-product-single__title {
    font-size: 2.875rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--rf-navy-900);
    margin: 0;
}

@media (max-width: 768px) {
    .rf-plugin.rf-plugin .rf-product-single__title {
        font-size: 2.25rem;
    }
}

/* Descripción corta */
.rf-product-single__desc {
    color: var(--rf-slate-600);
    font-size: var(--rf-text-lg);
    line-height: 1.6;
    margin: 0;
}

/* Acciones */
.rf-product-single__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rf-space-3);
    padding-top: var(--rf-space-2);
    border-top: 1px solid var(--rf-line);
}

.rf-product-single__footer {
    margin-top: var(--rf-space-12);
    padding-top: var(--rf-space-8);
    border-top: 1px solid var(--rf-line);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--rf-space-8);
}

@media (max-width: 768px) {
    .rf-product-single__footer {
        grid-template-columns: 1fr;
        gap: var(--rf-space-6);
    }
}

/* Título de columna — deliberadamente chico (tope pedido: max 2rem; acá va
   bien por debajo, es una etiqueta de columna, no un subtítulo de página).
   ".rf-plugin.rf-plugin " (0,2,1): mismo motivo que ".../title" arriba —
   le gana al "h2{font-size:48px}" del kit de Elementor. */
.rf-plugin.rf-plugin .rf-product-single__footer-col-title {
    font-family: var(--rf-f-display);
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--rf-navy-700);
    margin: 0 0 var(--rf-space-3);
}

.rf-product-single__footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Descripción larga (post_content) */
.rf-product-single__description {
    margin-top: var(--rf-space-12);
    padding-top: var(--rf-space-8);
    border-top: 1px solid var(--rf-line);
}

.rf-product-single__description-inner {
    max-width: 760px;
    font-family: var(--rf-f-body);
    font-size: var(--rf-text-base);
    color: var(--rf-ink);
    line-height: 1.7;
}

/* =========================================================================
   Utilidades
========================================================================= */

.rf-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================================
   Elementos de formulario base (input / select)
========================================================================= */

.rf-input,
.rf-select,
.rf-textarea {
    font-family: var(--rf-f-body);
    font-size: var(--rf-text-base);
    color: var(--rf-ink);
    background: var(--rf-white);
    border: 1.5px solid var(--rf-line);
    border-radius: var(--rf-radius);
    padding: var(--rf-space-3) var(--rf-space-4);
    width: 100%;
    line-height: 1.4;
    transition: border-color var(--rf-transition), box-shadow var(--rf-transition);
    -webkit-appearance: none;
    appearance: none;
}

.rf-input:focus,
.rf-select:focus,
.rf-textarea:focus {
    outline: none;
    border-color: var(--rf-gold-500);
    box-shadow: 0 0 0 3px rgba(47,109,176,0.15);
}

.rf-textarea {
    resize: vertical;
    font-family: inherit;
}

.rf-input--qty {
    width: 72px;
    text-align: center;
    padding: var(--rf-space-2) var(--rf-space-2);
}

.rf-input--error {
    border-color: #c0392b;
}

.rf-input:disabled,
.rf-select:disabled,
.rf-textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--rf-paper);
}

.rf-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2346596B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--rf-space-3) center;
    padding-right: var(--rf-space-8);
}

/* Botón variante pequeña */
.rf-plugin .rf-btn--sm {
    font-size: var(--rf-text-xs);
    padding: var(--rf-space-1) var(--rf-space-3);
}

/* =========================================================================
   Campos de formulario estructurados
========================================================================= */

.rf-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--rf-space-2);
}

.rf-form-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.rf-form-label {
    font-family: var(--rf-f-body);
    font-size: var(--rf-text-sm);
    font-weight: 600;
    color: var(--rf-navy-800);
    display: flex;
    align-items: center;
    gap: var(--rf-space-1);
}

.rf-form-required {
    color: var(--rf-gold-500);
    font-weight: 700;
}

.rf-form-optional {
    color: var(--rf-slate-400);
    font-weight: 400;
    font-size: var(--rf-text-xs);
}

.rf-form-row {
    display: grid;
    gap: var(--rf-space-5);
}

.rf-form-row--2 { grid-template-columns: 1fr 1fr; }
.rf-form-row--3 { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 700px) {
    .rf-form-row--2,
    .rf-form-row--3 { grid-template-columns: 1fr; }
}

@media (min-width: 701px) and (max-width: 900px) {
    .rf-form-row--3 { grid-template-columns: 1fr 1fr; }
}

.rf-form-radios {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rf-space-4);
}

.rf-radio-label {
    display: flex;
    align-items: center;
    gap: var(--rf-space-2);
    font-family: var(--rf-f-body);
    font-size: var(--rf-text-base);
    color: var(--rf-ink);
    cursor: pointer;
}

.rf-radio {
    width: 16px;
    height: 16px;
    accent-color: var(--rf-gold-500);
    cursor: pointer;
}

/* Mensajes de feedback */
.rf-form-messages {
    font-family: var(--rf-f-body);
    font-size: var(--rf-text-sm);
    border-radius: var(--rf-radius);
    padding: 0;
}

.rf-form-messages:not(:empty) {
    padding: var(--rf-space-3) var(--rf-space-4);
}

.rf-form-messages--error {
    background: #fdf2f2;
    color: #c0392b;
    border: 1px solid #f5c6cb;
}

.rf-form-messages--success {
    background: var(--rf-green-50);
    color: var(--rf-green-dark);
    border: 1px solid var(--rf-green);
}

/* =========================================================================
   Selector de variables — [rf_quote_button]
========================================================================= */

/* width:100% explicito: .rf-quote-selector es el unico hijo de
   .rf-product-single__actions (flex row, wrap). Sin ancho explicito, un
   item de flex se dimensiona "shrink-to-fit" en vez de llenar la fila —
   por eso quedaba un margen fantasma a la derecha en mobile. */
.rf-quote-selector {
    display: flex;
    flex-direction: column;
    gap: var(--rf-space-4);
    width: 100%;
}

/* Precio del producto — "$X per unit · per event rental" o "Quote on request" */
.rf-quote-selector__price {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: var(--rf-space-2);
    font-family: var(--rf-f-body);
}

.rf-quote-selector__price-amount {
    font-family: var(--rf-f-display);
    font-size: var(--rf-text-3xl);
    color: var(--rf-navy-900);
    line-height: 1;
}

.rf-quote-selector__price-terms {
    font-size: var(--rf-text-sm);
    color: var(--rf-slate-600);
}

.rf-quote-selector__price--on-request {
    font-family: var(--rf-f-mono);
    font-size: var(--rf-mono-eyebrow-size);
    font-weight: var(--rf-mono-weight);
    letter-spacing: var(--rf-mono-tracking);
    text-transform: uppercase;
    color: var(--rf-gold-500);
}

/* Size del producto en la ficha (debajo del título) */
.rf-product-single__size {
    margin: 0;
    font-size: var(--rf-text-sm);
    color: var(--rf-slate-600);
    letter-spacing: 0.02em;
}

/* Filas del selector. La fila de Cantidad + botón usa su propio ancho —
   ver .rf-quote-selector__row--submit. */
.rf-quote-selector__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--rf-space-8);
}

/* Fila de Cantidad + boton "Cotizar": ancho propio (NO hereda el 50/50 de
   la fila de arriba) — Cantidad angosta y fija, boton con un ancho maximo
   razonable en vez de estirarse a lo que quede libre. Esta fila siempre
   tiene los mismos 2 campos, sin importar si el producto tiene talla y/o
   color o ninguno de los dos (esa variacion vive en la fila de arriba, no
   en esta), asi que el ancho del boton queda siempre igual. */
.rf-quote-selector__row--submit {
    grid-template-columns: minmax(100px, 160px) auto;
    align-items: end;
    gap: var(--rf-space-4);
}

.rf-quote-selector__row--submit .rf-quote-selector__submit {
    width: auto;
    min-width: 200px;
    max-width: 260px;
    justify-self: start;
}

@media (max-width: 700px) {
    .rf-quote-selector__row {
        grid-template-columns: 1fr;
    }

    /* Pedido explicito (con captura): a diferencia de Talla+Color, la fila
       de Cantidad + boton "Cotizar" NO colapsa a 1 columna en mobile — se
       mantiene lado a lado, Cantidad angosta + boton llenando el resto. */
    .rf-quote-selector__row--submit {
        grid-template-columns: minmax(72px, 110px) 1fr;
    }

    .rf-quote-selector__row--submit .rf-quote-selector__submit {
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }
}

/* El swatch es un <button>: el reset.css del tema trae
   "button:hover, button:focus { background-color:#c36; color:#fff }

.rf-form-field--checkbox {
    flex-direction: row;
}

.rf-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--rf-space-2);
    font-family: var(--rf-f-body);
    font-size: var(--rf-text-sm);
    color: var(--rf-ink);
    cursor: pointer;
}

.rf-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--rf-gold-500);
    cursor: pointer;
}

@media (max-width: 768px) {

    .rf-checkbox-label {
        min-height: 44px;
    }

    .rf-checkbox {
        width: 20px;
        height: 20px;
    }
}

/* =========================================================================
   Pagina de cotizacion — [rf_quote_page] (Grupo D)
   Envuelve el carrito ([rf_carrito_cotizacion]) y el formulario
   ([rf_formulario_cotizacion]) en dos columnas: carrito flexible y STICKY
   a la izquierda, formulario de ancho fijo en flujo normal a la derecha
   (el formulario suele ser mas largo que la lista, asi que es la columna
   que conviene que scrollee). En mobile, una sola columna (carrito arriba,
   formulario abajo, sin sticky).
========================================================================= */

/* Sin padding-top: shortcode insertado dentro de una pagina de Elementor,
   que ya controla su propio espaciado superior (ver nota en
   .rf-catalog-archive). */
.rf-quote-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--rf-space-6) var(--rf-space-12);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: var(--rf-space-10);
    align-items: start;
}

/* Titulo de pagina — arriba de las dos columnas, ocupa todo el ancho del
   grid. El titulo propio del carrito (dentro de .rf-quote-page__cart)
   se oculta aca para no duplicarlo; su subtitulo queda como encabezado de
   esa columna. ".rf-plugin.rf-plugin " (0,2,1): es un <h1>, mismo motivo
   que ".rf-product-single__title" — le gana al "h1{font-size:48px}" del
   kit de Elementor. */
.rf-plugin.rf-plugin .rf-quote-page__title {
    grid-column: 1 / -1;
    font-size: var(--rf-text-3xl);
    font-weight: 900;
    color: var(--rf-navy-900);
    margin: 0 0 var(--rf-space-2);
}

.rf-quote-page .rf-cart__title {
    display: none;
}

/* Sticky la columna del carrito (no el formulario): position:sticky no
   fuerza alturas por si solo — con pocos productos, la columna es corta y
   sencillamente no llega a "engancharse" en ningun lado, se comporta como
   flujo normal sin verse rara. */
.rf-quote-page__cart {
    position: sticky;
    top: 120px;
}

@media (max-width: 900px) {
    .rf-quote-page {
        grid-template-columns: 1fr;
        padding: 0 var(--rf-space-4) var(--rf-space-8);
    }

    .rf-quote-page__cart {
        position: static;
        top: auto;
    }
}

/* Formulario como panel — solo cuando vive en la columna sticky de la
   pagina de cotizacion; el shortcode [rf_formulario_cotizacion] suelto en
   otro lado no se ve afectado. */
.rf-quote-page__form .rf-quote-form-wrap {
    background: var(--rf-white);
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-radius-lg);
    padding: var(--rf-space-6);
    box-shadow: var(--rf-shadow-sm);
}

/* =========================================================================
   Carrito de cotización — [rf_carrito_cotizacion]
========================================================================= */

.rf-cart {
    font-family: var(--rf-f-body);
}

.rf-cart__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rf-space-5);
    padding: var(--rf-space-10) 0;
}

.rf-cart__empty-text {
    color: var(--rf-slate-600);
    font-size: var(--rf-text-lg);
    margin: 0;
}

.rf-cart__header {
    margin-bottom: var(--rf-space-6);
}

.rf-cart__title {
    font-size: var(--rf-text-2xl);
    font-weight: 800;
    color: var(--rf-navy-900);
    margin: 0 0 var(--rf-space-1);
}

.rf-cart__subtitle {
    color: var(--rf-slate-600);
    margin: 0;
}

/* Encabezado tipo tabla — mismo reparto izquierda/derecha que las filas */
.rf-cart__table-header {
    display: flex;
    justify-content: space-between;
    gap: var(--rf-space-4);
    padding: 0 var(--rf-space-5) var(--rf-space-2);
    font-size: var(--rf-text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rf-slate-400);
}

.rf-cart__items {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-radius-lg);
    overflow: hidden;
}

.rf-cart-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--rf-space-4);
    padding: var(--rf-space-5);
    background: var(--rf-white);
    border-bottom: 1px solid var(--rf-line);
    transition: background-color var(--rf-transition);
}

.rf-cart-item:last-child { border-bottom: none; }
.rf-cart-item:hover { background: var(--rf-paper); }

/* -------------------------------------------------------------------------
   Izquierda de la fila: imagen + nombre + atributos + detalles
------------------------------------------------------------------------- */

.rf-cart-item__left {
    display: flex;
    gap: var(--rf-space-4);
    flex: 1;
    min-width: 0;
}

.rf-cart-item__thumb {
    flex-shrink: 0;
    display: block;
    width: 64px;
    height: 64px;
    border-radius: var(--rf-radius);
    overflow: hidden;
    background: var(--rf-paper);
    border: 1px solid var(--rf-line);
}

.rf-cart-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rf-cart-item__thumb-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--rf-gold-50) 0%, var(--rf-gold-100) 100%);
}

.rf-cart-item__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rf-space-1);
}

.rf-cart-item__name {
    font-weight: 600;
    font-size: var(--rf-text-base);
    color: var(--rf-navy-800);
    text-decoration: none;
}

.rf-cart-item__name:hover { color: var(--rf-gold-500); }

.rf-cart-item__attrs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rf-space-1) var(--rf-space-3);
    font-size: var(--rf-text-xs);
    color: var(--rf-slate-600);
}

/* Detalles adicionales — <details>/<summary> nativo, colapsado por
   defecto. El textarea adentro sigue siendo editable (misma
   funcionalidad de siempre). */
.rf-cart-item__details {
    margin-top: var(--rf-space-1);
}

.rf-cart-item__details-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--rf-space-1);
    font-size: var(--rf-text-xs);
    font-weight: 600;
    color: var(--rf-gold-500);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.rf-cart-item__details-toggle::-webkit-details-marker {
    display: none;
}

.rf-cart-item__details-toggle:hover {
    color: var(--rf-navy-700);
}

.rf-cart-item__details-arrow {
    width: 10px;
    height: 7px;
    flex-shrink: 0;
    transition: transform var(--rf-transition);
}

.rf-cart-item__details[open] .rf-cart-item__details-arrow {
    transform: rotate(180deg);
}

.rf-cart-item__details-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rf-space-2);
    margin-top: var(--rf-space-2);
    max-width: 420px;
}

.rf-cart-item__details-body .rf-textarea {
    width: 100%;
}

/* -------------------------------------------------------------------------
   Derecha de la fila: cantidad (con label) + eliminar. Ninguno de los dos
   ocupa todo el ancho — se ajustan a su contenido.
------------------------------------------------------------------------- */

.rf-cart-item__right {
    display: flex;
    align-items: flex-start;
    gap: var(--rf-space-3);
    flex-shrink: 0;
}

.rf-cart-item__qty-field {
    flex-shrink: 0;
}

.rf-cart-item__qty-field .rf-form-label {
    white-space: nowrap;
}

/* ".rf-plugin " como ancestro: es <button>. Ver nota en "Botones base". */
.rf-plugin .rf-cart-item__remove {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-top: 1.6rem; /* alinea con el input, no con el label */
    border: none;
    background: none;
    cursor: pointer;
    color: var(--rf-slate-400);
    font-size: 18px;
    line-height: 1;
    border-radius: var(--rf-radius);
    transition: color var(--rf-transition), background-color var(--rf-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.rf-cart-item__remove:hover {
    color: #c0392b;
    background: #fdf2f2;
}

@media (max-width: 560px) {
    .rf-cart-item {
        flex-wrap: wrap;
    }

    .rf-cart-item__right {
        width: 100%;
        justify-content: flex-end;
    }
}

/* =========================================================================
   Formulario de cotización — [rf_formulario_cotizacion]
========================================================================= */

.rf-quote-form-wrap {
    font-family: var(--rf-f-body);
}

/* Honeypot: invisible para humanos */
.rf-quote-form__honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
    height: 0;
    overflow: hidden;
}

.rf-quote-form-header {
    margin-bottom: var(--rf-space-8);
}

/* ".rf-plugin.rf-plugin " (0,2,1): es un <h2>, mismo motivo que
   ".rf-product-single__title" — le gana al "h2{font-size:48px}" del kit
   de Elementor (por eso hoy se ve enorme). Tamano de encabezado de
   columna, no de titulo de pagina — "Lista de cotizacion" es el titulo de
   pagina real (.rf-quote-page__title). */
.rf-plugin.rf-plugin .rf-quote-form-header__title {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--rf-navy-900);
    margin: 0 0 var(--rf-space-2);
}

.rf-quote-form-header__sub {
    color: var(--rf-slate-600);
    font-size: var(--rf-text-lg);
    margin: 0;
}

.rf-quote-form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--rf-space-6);
}

.rf-quote-form__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rf-space-5);
    padding-top: var(--rf-space-4);
    border-top: 1px solid var(--rf-line);
}

/* Ancho completo de la columna del formulario; la nota baja a su propia
   linea (el footer ya es flex-wrap, no hace falta tocar nada mas).
   ".rf-plugin " como ancestro (0,2,0): es un <button type="submit">, y el
   reset.css del tema trae "[type=submit],button{width:auto}" — el
   selector de atributo "[type=submit]" tiene la MISMA especificidad
   (0,1,0) que ".rf-quote-form__submit" sola, empate que se resolvia por
   orden de carga a favor del tema. Se sube un escalon para ganar siempre. */
.rf-plugin .rf-quote-form__submit {
    width: 100%;
}

.rf-quote-form__note {
    color: var(--rf-slate-400);
    font-size: var(--rf-text-sm);
    margin: 0;
}

/* -------------------------------------------------------------------------
   Página de éxito — [rf_cotizacion_exito]
------------------------------------------------------------------------- */

/* Sin padding-top: shortcode insertado dentro de una pagina de Elementor,
   que ya controla su propio espaciado superior (ver nota en
   .rf-catalog-archive). */
.rf-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 var(--rf-space-6) var(--rf-space-12);
    max-width: 560px;
    margin: 0 auto;
    gap: var(--rf-space-5);
}

.rf-success__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--rf-space-2);
}

.rf-success__icon svg {
    display: block;
}

.rf-success__title {
    font-family: var(--rf-f-display);
    font-size: var(--rf-text-3xl);
    font-weight: 800;
    color: var(--rf-navy-900);
    margin: 0;
    line-height: 1.15;
}

.rf-success__folio {
    display: inline-block;
    font-family: var(--rf-f-mono);
    font-size: var(--rf-text-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rf-secondary);
    background: var(--rf-paper);
    border: 1px solid var(--rf-line);
    padding: var(--rf-space-1) var(--rf-space-3);
    border-radius: var(--rf-radius-full);
    margin: 0;
}

.rf-success__message {
    color: var(--rf-slate-600);
    font-size: var(--rf-text-base);
    line-height: 1.6;
    max-width: 44ch;
    margin: 0;
}

.rf-success__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--rf-space-3);
    margin-top: var(--rf-space-3);
}

@media (max-width: 480px) {
    .rf-success {
        padding: 0 var(--rf-space-4) var(--rf-space-8);
    }
    .rf-success__title {
        font-size: var(--rf-text-2xl);
    }
    .rf-success__actions .rf-btn {
        width: 100%;
        justify-content: center;
    }
}