/**
 * Roll&Comb · Ficha de producto (single-product.php)
 * Portado de prototipos/producto-302e.html
 */

        /* --- BREADCRUMB --- */
        .breadcrumb {
            background: var(--rc-bg-light);
            padding: 16px 20px;
            border-bottom: 1px solid var(--rc-gray-100);
            font-size: 14px;
            color: var(--rc-gray-500);
        }
        .breadcrumb__inner {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
        }
        .breadcrumb a {
            color: var(--rc-gray-500);
            text-decoration: none;
            transition: color .2s;
        }
        .breadcrumb a:hover { color: var(--rc-black); }
        .breadcrumb__separator { color: var(--rc-gray-300); }
        .breadcrumb__current { color: var(--rc-black); font-weight: 600; }

        /* --- PRODUCTO HERO --- */
        .producto-hero {
            background: var(--rc-white);
            padding: 48px 20px 64px;
        }
        .producto-hero__inner {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 56px;
            align-items: start;
        }
        .producto-gallery__main {
            background: var(--rc-white);
            border: 1px solid var(--rc-gray-100);
            border-radius: var(--rc-radius-xl);
            overflow: hidden;
            aspect-ratio: 4/3;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--rc-shadow-md);
        }
        .producto-gallery__main img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
            padding: 12px;
            box-sizing: border-box;
        }
        .producto-gallery__thumbs {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
            margin-top: 12px;
        }
        .producto-gallery__thumb {
            aspect-ratio: 1;
            border-radius: var(--rc-radius-md);
            background: var(--rc-white);
            border: 1px solid var(--rc-gray-100);
            overflow: hidden;
            cursor: pointer;
            transition: border-color .2s;
        }
        .producto-gallery__thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .producto-gallery__thumb--active {
            border-color: var(--rc-amber);
        }
        .producto-gallery__thumb--placeholder {
            background: repeating-linear-gradient(
                45deg,
                var(--rc-bg-warm),
                var(--rc-bg-warm) 8px,
                var(--rc-bg-light) 8px,
                var(--rc-bg-light) 16px
            );
            cursor: default;
        }

        .producto-info__eyebrow {
            display: inline-block;
            background: var(--rc-amber);
            color: var(--rc-black);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            padding: 6px 14px;
            border-radius: var(--rc-radius-pill);
        }
        .producto-info__title {
            font-size: clamp(28px, 4vw, 40px);
            font-weight: 800;
            color: var(--rc-black);
            line-height: 1.15;
            margin: 14px 0 12px;
        }
        .producto-info__tagline {
            font-size: 17px;
            line-height: 1.5;
            color: var(--rc-black-soft);
            margin: 0 0 24px;
        }
        .producto-info__stock {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(22, 163, 74, 0.1);
            color: var(--rc-green);
            font-weight: 700;
            font-size: 14px;
            padding: 8px 14px;
            border-radius: var(--rc-radius-pill);
            margin-bottom: 18px;
        }
        .producto-info__stock::before {
            content: '';
            display: block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--rc-green);
        }
        .producto-info__stock--agotada {
            background: rgba(255, 193, 7, 0.18);
            color: var(--rc-black);
        }
        .producto-info__stock--agotada::before {
            background: var(--rc-amber);
        }
        .producto-info__stock { margin-bottom: 6px; }
        .producto-info__stock-note {
            font-size: 12px;
            color: var(--rc-gray-500);
            margin: 0 0 18px;
            padding-left: 2px;
        }
        .producto-info__price--reserva {
            color: var(--rc-amber-dark);
        }
        .producto-info__price-original {
            font-size: 18px;
            color: var(--rc-gray-500);
            text-decoration: line-through;
            font-weight: 500;
        }
        .producto-info__price-save {
            display: inline-block;
            background: var(--rc-amber);
            color: var(--rc-black);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.5px;
            padding: 4px 10px;
            border-radius: var(--rc-radius-pill);
            margin-left: 4px;
            vertical-align: middle;
        }
        .producto-info__embarque {
            background: var(--rc-bg-warm);
            border: 1px solid rgba(255, 193, 7, 0.4);
            border-radius: var(--rc-radius-md);
            padding: 12px 16px;
            margin: 0 0 18px;
            font-size: 14px;
            color: var(--rc-black-soft);
            line-height: 1.5;
        }
        .producto-info__embarque strong { color: var(--rc-black); }
        .producto-info__price-row {
            display: flex;
            align-items: baseline;
            gap: 12px;
            margin-bottom: 8px;
        }
        .producto-info__price {
            font-size: 36px;
            font-weight: 800;
            color: var(--rc-black);
        }
        .producto-info__price-note {
            font-size: 14px;
            color: var(--rc-gray-500);
        }
        .producto-info__installments {
            font-size: 14px;
            color: var(--rc-black-soft);
            margin-bottom: 22px;
        }
        .producto-info__installments strong { color: var(--rc-black); }

        .producto-info__benefits {
            list-style: none;
            padding: 0;
            margin: 0 0 28px;
        }
        .producto-info__benefits li {
            position: relative;
            padding-left: 28px;
            margin-bottom: 10px;
            font-size: 15px;
            line-height: 1.5;
            color: var(--rc-black-soft);
        }
        .producto-info__benefits li::before {
            content: '✓';
            position: absolute;
            left: 0;
            top: 0;
            color: var(--rc-amber);
            font-weight: 800;
            font-size: 18px;
        }

        .producto-info__ctas {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 24px;
        }
        .producto-info__ctas .rc-btn { width: 100%; text-align: center; padding: 16px; font-size: 17px; }

        .producto-info__trust {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            padding-top: 20px;
            border-top: 1px solid var(--rc-gray-100);
        }
        .producto-info__trust-item {
            font-size: 13px;
            color: var(--rc-black-soft);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .producto-info__trust-item::before {
            content: '★';
            color: var(--rc-amber);
        }

        @media (max-width: 800px) {
            .producto-hero__inner { grid-template-columns: 1fr; gap: 32px; }
            .producto-info__price { font-size: 30px; }
        }

        /* --- PARA QUIEN ES --- */
        .para-quien {
            background: var(--rc-bg-warm);
            padding: 56px 20px;
        }
        .para-quien__inner {
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
        }
        .para-quien__title {
            font-size: clamp(22px, 3vw, 28px);
            font-weight: 800;
            color: var(--rc-black);
            margin: 0 0 16px;
        }
        .para-quien__desc {
            font-size: 17px;
            line-height: 1.6;
            color: var(--rc-black-soft);
            margin: 0;
        }
        .para-quien__highlight {
            color: var(--rc-amber);
            font-weight: 800;
        }
        .para-quien__lead {
            font-size: 17px;
            line-height: 1.6;
            color: var(--rc-black-soft);
            margin: 0 auto;
            max-width: 720px;
        }
        .para-quien__usos {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
            margin: 32px 0 24px;
            text-align: left;
        }
        .para-quien__uso {
            background: var(--rc-white);
            border-radius: var(--rc-radius-lg);
            padding: 22px 22px 24px;
            border: 1px solid var(--rc-gray-100);
            border-top: 3px solid var(--rc-amber);
        }
        .para-quien__uso h3 {
            font-size: 17px;
            font-weight: 800;
            color: var(--rc-black);
            margin: 0 0 8px;
        }
        .para-quien__uso p {
            font-size: 14.5px;
            line-height: 1.55;
            color: var(--rc-black-soft);
            margin: 0;
        }
        .para-quien__upsell {
            font-size: 15px;
            color: var(--rc-black-soft);
            margin: 0;
        }
        @media (max-width: 800px) {
            .para-quien__usos { grid-template-columns: 1fr; gap: 12px; }
        }

        /* --- BENEFICIOS GRID --- */
        .beneficios-detalle {
            background: var(--rc-white);
            padding: 72px 20px;
        }
        .beneficios-detalle__inner {
            max-width: 1100px;
            margin: 0 auto;
        }
        .beneficios-detalle__grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 28px;
            margin-top: 40px;
        }
        .beneficio-card {
            background: var(--rc-bg-light);
            border-radius: var(--rc-radius-lg);
            padding: 28px;
            border: 1px solid var(--rc-gray-100);
        }
        .beneficio-card__icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--rc-amber);
            color: var(--rc-black);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            font-weight: 800;
            margin-bottom: 16px;
        }
        .beneficio-card__title {
            font-size: 18px;
            font-weight: 800;
            color: var(--rc-black);
            margin: 0 0 8px;
        }
        .beneficio-card__desc {
            font-size: 15px;
            line-height: 1.55;
            color: var(--rc-black-soft);
            margin: 0;
        }
        @media (max-width: 700px) {
            .beneficios-detalle__grid { grid-template-columns: 1fr; }
        }

        /* --- ESPECIFICACIONES --- */
        .especs {
            background: var(--rc-bg-light);
            padding: 72px 20px;
        }
        .especs__inner {
            max-width: 800px;
            margin: 0 auto;
        }
        .especs__table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 32px;
            background: var(--rc-white);
            border-radius: var(--rc-radius-lg);
            overflow: hidden;
            box-shadow: var(--rc-shadow-sm);
        }
        .especs__table th,
        .especs__table td {
            text-align: left;
            padding: 16px 20px;
            border-bottom: 1px solid var(--rc-gray-100);
            font-size: 15px;
        }
        .especs__table tr:last-child th,
        .especs__table tr:last-child td { border-bottom: none; }
        .especs__table th {
            background: var(--rc-bg-warm);
            color: var(--rc-black);
            font-weight: 700;
            width: 40%;
        }
        .especs__table td {
            color: var(--rc-black-soft);
        }

        /* --- COMO SE USA --- */
        .como-usar {
            background: var(--rc-white);
            padding: 72px 20px;
        }
        .como-usar__inner {
            max-width: 1100px;
            margin: 0 auto;
        }
        .como-usar__steps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 32px;
            margin-top: 40px;
        }
        .paso {
            text-align: center;
            position: relative;
        }
        .paso__num {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: var(--rc-black);
            color: var(--rc-amber);
            font-size: 24px;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 18px;
        }
        .paso__title {
            font-size: 18px;
            font-weight: 800;
            color: var(--rc-black);
            margin: 0 0 8px;
        }
        .paso__desc {
            font-size: 15px;
            line-height: 1.55;
            color: var(--rc-black-soft);
            margin: 0;
        }
        @media (max-width: 700px) {
            .como-usar__steps { grid-template-columns: 1fr; }
        }

        /* --- GARANTÍAS / TRUST SECTION --- */
        .garantias {
            background: var(--rc-bg-warm);
            padding: 72px 20px;
        }
        .garantias__inner {
            max-width: 1100px;
            margin: 0 auto;
        }
        .garantias__grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-top: 40px;
        }
        .garantia-card {
            background: var(--rc-white);
            border-radius: var(--rc-radius-lg);
            padding: 24px 22px;
            border: 1px solid var(--rc-gray-100);
            box-shadow: var(--rc-shadow-sm);
            text-align: center;
        }
        .garantia-card__icon {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: var(--rc-amber);
            color: var(--rc-black);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: 800;
            margin: 0 auto 14px;
        }
        .garantia-card__title {
            font-size: 16px;
            font-weight: 800;
            color: var(--rc-black);
            margin: 0 0 8px;
            line-height: 1.3;
        }
        .garantia-card__desc {
            font-size: 14px;
            line-height: 1.5;
            color: var(--rc-black-soft);
            margin: 0;
        }
        @media (max-width: 900px) {
            .garantias__grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 500px) {
            .garantias__grid { grid-template-columns: 1fr; }
        }

        /* --- MÁS SOBRE LA 141 / SHORTS --- */
        .mas-141 {
            background: var(--rc-white);
            padding: 72px 20px;
        }
        .mas-141__inner {
            max-width: 900px;
            margin: 0 auto;
        }
        .mas-141__grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 24px;
            margin-top: 40px;
            justify-items: center;
        }
        .video-card--vertical {
            max-width: 360px;
            width: 100%;
        }
        .video-card--vertical .video-card__embed {
            padding-bottom: 177.78%;
        }
        .video-card__placeholder {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--rc-amber);
            font-weight: 700;
            font-size: 14px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            background: var(--rc-black);
        }

        /* --- COMPARATIVA --- */
        .comparativa {
            background: var(--rc-bg-light);
            padding: 72px 20px;
        }
        .comparativa__inner {
            max-width: 1100px;
            margin: 0 auto;
        }
        .comparativa__table-wrap {
            overflow-x: auto;
            margin-top: 32px;
            background: var(--rc-white);
            border-radius: var(--rc-radius-lg);
            box-shadow: var(--rc-shadow-sm);
        }
        .comparativa__table {
            width: 100%;
            border-collapse: collapse;
            min-width: 600px;
        }
        .comparativa__table th,
        .comparativa__table td {
            text-align: left;
            padding: 14px 18px;
            border-bottom: 1px solid var(--rc-gray-100);
            font-size: 14px;
        }
        .comparativa__table thead th {
            background: var(--rc-black);
            color: var(--rc-white);
            font-weight: 700;
        }
        .comparativa__table tbody th {
            background: var(--rc-bg-warm);
            font-weight: 700;
            color: var(--rc-black);
        }
        .comparativa__row--actual {
            background: rgba(255, 193, 7, 0.08);
        }
        .comparativa__row--actual td,
        .comparativa__row--actual th {
            color: var(--rc-black);
            font-weight: 700;
        }
        .comparativa__cta-row {
            text-align: center;
            margin-top: 24px;
        }

        /* --- DESCARGAS --- */
        .descargas {
            background: var(--rc-white);
            padding: 72px 20px;
        }
        .descargas__inner {
            max-width: 800px;
            margin: 0 auto;
        }
        .descargas__list {
            list-style: none;
            padding: 0;
            margin: 32px 0 0;
            display: grid;
            gap: 16px;
        }
        .descarga-item {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 20px;
            align-items: center;
            background: var(--rc-bg-light);
            border: 1px solid var(--rc-gray-100);
            border-radius: var(--rc-radius-lg);
            padding: 20px 24px;
        }
        .descarga-item__icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 56px;
            background: var(--rc-amber);
            color: var(--rc-black);
            font-weight: 800;
            font-size: 13px;
            border-radius: var(--rc-radius-sm);
            letter-spacing: 1px;
        }
        .descarga-item__title {
            font-size: 16px;
            font-weight: 700;
            color: var(--rc-black);
            margin: 0 0 4px;
        }
        .descarga-item__desc {
            font-size: 14px;
            color: var(--rc-black-soft);
            margin: 0;
        }
        .descarga-item__btn {
            padding: 10px 18px;
            font-size: 14px;
            color: var(--rc-black);
            border-color: var(--rc-black);
        }
        @media (max-width: 600px) {
            .descarga-item {
                grid-template-columns: auto 1fr;
                grid-template-areas: "icon body" "btn btn";
                gap: 12px 16px;
            }
            .descarga-item__icon { grid-area: icon; }
            .descarga-item__body { grid-area: body; }
            .descarga-item__btn { grid-area: btn; width: 100%; text-align: center; }
        }

        /* --- VIDEOS PRODUCTO --- */
        .videos-producto {
            background: var(--rc-bg-light);
            padding: 72px 20px;
        }
        .videos-producto__inner {
            max-width: 1200px;
            margin: 0 auto;
        }
        .videos-producto__grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            margin-top: 40px;
        }
        .video-card {
            background: var(--rc-white);
            border-radius: var(--rc-radius-lg);
            overflow: hidden;
            box-shadow: var(--rc-shadow-sm);
        }
        .video-card__embed {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            background: var(--rc-black);
        }
        .video-card__embed iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
        .video-card__caption {
            padding: 14px 18px;
            font-size: 15px;
            font-weight: 700;
            color: var(--rc-black);
            margin: 0;
        }
        .videos-producto__note {
            text-align: center;
            font-size: 13px;
            color: var(--rc-gray-500);
            margin: 24px 0 0;
            font-style: italic;
        }
        @media (max-width: 900px) {
            .videos-producto__grid { grid-template-columns: 1fr; }
        }

        /* --- FAQ ya en design-system, dejamos hook --- */
        .faq-producto {
            background: var(--rc-white);
            padding: 72px 20px;
        }
        .faq-producto__inner {
            max-width: 800px;
            margin: 0 auto;
        }

        /* --- CTA FINAL --- */
        .cta-final-producto {
            background: var(--rc-black);
            color: var(--rc-white);
            padding: 64px 20px;
            text-align: center;
        }
        .cta-final-producto h2 {
            font-size: clamp(24px, 3vw, 32px);
            font-weight: 800;
            margin: 0 0 16px;
            color: var(--rc-white);
        }
        .cta-final-producto p {
            font-size: 17px;
            line-height: 1.5;
            margin: 0 0 28px;
            color: rgba(255,255,255,0.85);
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        /* --- SECTION TITLE shared --- */
        .section-title {
            text-align: center;
            margin: 0 auto 8px;
            max-width: 800px;
        }
        .section-title h2 {
            font-size: clamp(24px, 3.5vw, 32px);
            font-weight: 800;
            color: var(--rc-black);
            margin: 0 auto 12px;
            text-align: center;
        }
        .section-title p {
            font-size: 16px;
            line-height: 1.5;
            color: var(--rc-black-soft);
            max-width: 600px;
            margin: 0 auto;
            text-align: center;
        }