/* ============================================================
   SECCIONES v2 PREMIUM
   Services · Stats · Process · Diff · Testimonials · FAQ · CTA · Marquee
   ============================================================ */

/* ============================================================
   TECH MARQUEE — infinite scroll horizontal
   ============================================================ */
.rtd-marquee-section {
    padding: var(--rtd-space-7) 0;
    border-top: 1px solid var(--rtd-line);
    border-bottom: 1px solid var(--rtd-line);
    background: var(--rtd-bg-base);
    overflow: hidden;
}
.rtd-marquee-label {
    text-align: center;
    font-family: var(--rtd-font-mono);
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--rtd-text-subtle);
    margin-bottom: var(--rtd-space-5);
}
.rtd-marquee {
    display: flex;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.rtd-marquee-track {
    display: flex;
    gap: var(--rtd-space-9);
    animation: rtd-scroll-x 40s linear infinite;
    flex-shrink: 0;
}
@keyframes rtd-scroll-x {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.rtd-marquee-item {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    font-family: var(--rtd-font-mono);
    font-size: 13px;
    color: var(--rtd-text-muted);
    letter-spacing: 0.04em;
    transition: color var(--rtd-dur-base) var(--rtd-ease-out);
}
.rtd-marquee-item:hover { color: var(--rtd-text); }
.rtd-marquee-item svg {
    width: 18px; height: 18px;
    color: var(--rtd-crimson);
    flex-shrink: 0;
}
.rtd-marquee:hover .rtd-marquee-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .rtd-marquee-track { animation: none; }
}

/* ============================================================
   SERVICIOS v2 — duotone iconos + animated border + radial glow
   ============================================================ */
.rtd-services {
    position: relative;
    padding: var(--rtd-space-11) 0 var(--rtd-space-10);
}

.rtd-services-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--rtd-space-5);
}
@media (max-width: 900px) {
    .rtd-services-grid { grid-template-columns: 1fr; }
}

.rtd-service-card {
    position: relative;
    background: var(--rtd-bg-surface);
    border: 1px solid var(--rtd-line);
    border-radius: var(--rtd-r-xl);
    padding: var(--rtd-space-7);
    transition:
        background var(--rtd-dur-base) var(--rtd-ease-out),
        border-color var(--rtd-dur-base) var(--rtd-ease-out),
        transform var(--rtd-dur-base) var(--rtd-ease-out),
        box-shadow var(--rtd-dur-base) var(--rtd-ease-out);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
}

/* Gradient border animado al hover */
.rtd-service-card::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: var(--rtd-r-xl);
    padding: 1px;
    background: linear-gradient(135deg, transparent 0%, transparent 40%, var(--rtd-crimson) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--rtd-dur-base) var(--rtd-ease-out);
    pointer-events: none;
}

/* Radial glow en esquina superior derecha */
.rtd-service-card::after {
    content: '';
    position: absolute;
    top: -50px; right: -50px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, var(--rtd-crimson-glow), transparent 70%);
    opacity: 0;
    transition: opacity var(--rtd-dur-slow) var(--rtd-ease-out);
    pointer-events: none;
    filter: blur(40px);
}

.rtd-service-card:hover {
    background: var(--rtd-bg-elevated);
    transform: translateY(-4px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.rtd-service-card:hover::before { opacity: 1; }
.rtd-service-card:hover::after { opacity: 0.6; }

/* Variantes asimétricas (elevated-design) */
.rtd-service-card.is-featured  { grid-column: span 7; }
.rtd-service-card.is-compact   { grid-column: span 5; }
.rtd-service-card.is-wide      { grid-column: span 8; }
.rtd-service-card.is-narrow    { grid-column: span 4; }
.rtd-service-card.is-half      { grid-column: span 6; }
.rtd-service-card.is-third     { grid-column: span 4; }
@media (max-width: 900px) {
    .rtd-service-card.is-featured,
    .rtd-service-card.is-compact,
    .rtd-service-card.is-wide,
    .rtd-service-card.is-narrow,
    .rtd-service-card.is-half,
    .rtd-service-card.is-third {
        grid-column: span 1;
    }
}

/* Icon con duotone + hover sólido carmesí + rotate */
.rtd-service-icon {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(200,16,46,0.18), rgba(200,16,46,0.04));
    border: 1px solid var(--rtd-line-crimson);
    border-radius: var(--rtd-r-md);
    color: var(--rtd-crimson);
    margin-bottom: var(--rtd-space-5);
    position: relative;
    transition:
        background var(--rtd-dur-base) var(--rtd-ease-out),
        border-color var(--rtd-dur-base) var(--rtd-ease-out),
        transform var(--rtd-dur-slow) var(--rtd-ease-emphasized),
        box-shadow var(--rtd-dur-base) var(--rtd-ease-out);
    flex-shrink: 0;
}
.rtd-service-card:hover .rtd-service-icon {
    background: linear-gradient(135deg, var(--rtd-crimson), var(--rtd-crimson-deep));
    border-color: var(--rtd-crimson);
    color: #fff;
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 12px 28px rgba(200,16,46,0.35);
}
.rtd-service-icon svg {
    width: 32px;
    height: 32px;
    transition: transform var(--rtd-dur-slow) var(--rtd-ease-emphasized);
}
.rtd-service-card:hover .rtd-service-icon svg { transform: scale(1.05); }

.rtd-service-title {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.22;
    letter-spacing: -0.018em;
    color: var(--rtd-text);
    margin: 0 0 var(--rtd-space-3) 0;
}
.is-featured .rtd-service-title { font-size: 28px; }
.is-wide     .rtd-service-title { font-size: 26px; }

.rtd-service-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--rtd-text-muted);
    font-weight: 300;
    margin: 0 0 var(--rtd-space-5) 0;
    flex-grow: 1;
}

.rtd-service-list {
    list-style: none;
    padding: var(--rtd-space-4) 0 0 0;
    margin: 0;
    border-top: 1px solid var(--rtd-line);
    display: flex;
    flex-direction: column;
    gap: var(--rtd-space-2);
}
.rtd-service-list li {
    display: flex;
    align-items: center;
    gap: var(--rtd-space-3);
    font-size: 13px;
    color: var(--rtd-text-muted);
    font-weight: 300;
}
.rtd-service-list li::before {
    content: '';
    width: 6px; height: 1px;
    background: var(--rtd-crimson);
    flex-shrink: 0;
}

.rtd-service-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--rtd-crimson-soft);
    margin-top: var(--rtd-space-5);
    transition: gap var(--rtd-dur-base) var(--rtd-ease-out),
                color var(--rtd-dur-base) var(--rtd-ease-out);
}
.rtd-service-link:hover { gap: 10px; color: var(--rtd-crimson); }
.rtd-service-link svg { width: 14px; height: 14px; }

/* ============================================================
   PROCESS TIMELINE — 4 pasos con SVG connector animado
   ============================================================ */
.rtd-process {
    padding: var(--rtd-space-11) 0;
    background: linear-gradient(180deg, transparent 0%, var(--rtd-bg-base) 50%, transparent 100%);
}
.rtd-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--rtd-space-5);
    margin-top: var(--rtd-space-9);
    position: relative;
}
@media (max-width: 900px) {
    .rtd-process-grid { grid-template-columns: 1fr; gap: var(--rtd-space-7); }
}

/* Dashed connector line — animada con stroke-dashoffset */
.rtd-process-connector {
    position: absolute;
    top: 32px;
    left: 12%; right: 12%;
    height: 1px;
    z-index: 0;
    pointer-events: none;
}
.rtd-process-connector svg { width: 100%; height: 100%; }
.rtd-process-connector path {
    stroke: var(--rtd-line-crimson);
    stroke-width: 1;
    stroke-dasharray: 4 6;
    fill: none;
    animation: rtd-dash-move 30s linear infinite;
}
@keyframes rtd-dash-move { to { stroke-dashoffset: -100; } }
@media (max-width: 900px) {
    .rtd-process-connector { display: none; }
}

.rtd-process-step {
    position: relative;
    text-align: center;
    z-index: 1;
}
.rtd-process-num {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--rtd-space-5);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rtd-bg-deep);
    border: 1px solid var(--rtd-line-crimson);
    border-radius: 50%;
    font-family: var(--rtd-font-mono);
    font-size: 18px;
    font-weight: 500;
    color: var(--rtd-crimson);
    position: relative;
    transition: all var(--rtd-dur-slow) var(--rtd-ease-emphasized);
}
.rtd-process-step:hover .rtd-process-num {
    transform: scale(1.1);
    background: linear-gradient(135deg, var(--rtd-crimson), var(--rtd-crimson-deep));
    color: #fff;
    box-shadow: 0 12px 30px rgba(200,16,46,0.4);
}
.rtd-process-title {
    font-size: 17px;
    font-weight: 500;
    color: var(--rtd-text);
    margin: 0 0 var(--rtd-space-3) 0;
    letter-spacing: -0.01em;
}
.rtd-process-desc {
    font-size: 14px;
    color: var(--rtd-text-muted);
    line-height: 1.55;
    font-weight: 300;
}

/* ============================================================
   STATS — counter animation (números cuentan al entrar al viewport)
   ============================================================ */
.rtd-stats {
    position: relative;
    padding: var(--rtd-space-10) 0;
}
.rtd-stats::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 20% 20%, var(--rtd-crimson-glow), transparent 60%),
        radial-gradient(ellipse 50% 30% at 80% 80%, rgba(90,200,250,0.08), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.rtd-stats-inner {
    position: relative;
    z-index: 1;
    max-width: var(--rtd-content-default);
    margin: 0 auto;
    padding: 0 var(--rtd-space-5);
}
.rtd-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--rtd-space-6);
    padding: var(--rtd-space-7) 0;
    border-top: 1px solid var(--rtd-line);
    border-bottom: 1px solid var(--rtd-line);
}
@media (max-width: 900px) { .rtd-stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .rtd-stats-grid { grid-template-columns: 1fr; gap: var(--rtd-space-5); } }
.rtd-stat {
    display: flex;
    flex-direction: column;
    gap: var(--rtd-space-2);
}
.rtd-stat-num {
    font-family: var(--rtd-font-mono);
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 500;
    line-height: 1;
    color: var(--rtd-crimson);
    letter-spacing: -0.03em;
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.rtd-stat-num small {
    font-size: 0.45em;
    color: var(--rtd-text-muted);
    font-weight: 400;
}
.rtd-stat-label {
    font-size: 13px;
    color: var(--rtd-text-muted);
    font-weight: 400;
    line-height: 1.4;
}

/* ============================================================
   DIFERENCIADORES — timeline 5-7 con hover padding shift
   ============================================================ */
.rtd-diff {
    padding: var(--rtd-space-11) 0;
    background: var(--rtd-bg-base);
    position: relative;
}
.rtd-diff-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--rtd-space-8);
    align-items: start;
}
@media (max-width: 900px) {
    .rtd-diff-grid { grid-template-columns: 1fr; gap: var(--rtd-space-7); }
}

.rtd-diff-list {
    display: flex;
    flex-direction: column;
}

.rtd-diff-item {
    display: flex;
    gap: var(--rtd-space-5);
    padding: var(--rtd-space-5) 0;
    border-bottom: 1px solid var(--rtd-line);
    position: relative;
    transition: padding-left var(--rtd-dur-base) var(--rtd-ease-out);
}
.rtd-diff-item:last-child { border-bottom: 0; }
.rtd-diff-item:hover { padding-left: var(--rtd-space-3); }

.rtd-diff-num {
    font-family: var(--rtd-font-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--rtd-crimson);
    letter-spacing: 0.05em;
    flex-shrink: 0;
    width: 32px;
}

.rtd-diff-content h3 {
    font-size: 19px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--rtd-text);
    margin: 0 0 var(--rtd-space-2) 0;
    letter-spacing: -0.012em;
}
.rtd-diff-content p {
    font-size: 14px;
    color: var(--rtd-text-muted);
    line-height: 1.6;
    margin: 0;
    font-weight: 300;
}

/* ============================================================
   TESTIMONIOS v2 — comilla gigante decorativa + premium
   ============================================================ */
.rtd-testimonials {
    padding: var(--rtd-space-11) 0;
    position: relative;
}
.rtd-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--rtd-space-5);
    margin-top: var(--rtd-space-8);
}
@media (max-width: 900px) {
    .rtd-testimonial-grid { grid-template-columns: 1fr; }
}

.rtd-testimonial {
    background: var(--rtd-bg-surface);
    border: 1px solid var(--rtd-line);
    border-radius: var(--rtd-r-xl);
    padding: var(--rtd-space-7) var(--rtd-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--rtd-space-5);
    transition: all var(--rtd-dur-base) var(--rtd-ease-out);
    position: relative;
    overflow: hidden;
}
.rtd-testimonial::before {
    content: '"';
    position: absolute;
    top: -40px; right: 20px;
    font-size: 200px;
    line-height: 1;
    color: var(--rtd-crimson);
    opacity: 0.06;
    font-family: Georgia, serif;
    font-weight: 700;
    pointer-events: none;
}
.rtd-testimonial:hover {
    background: var(--rtd-bg-elevated);
    border-color: var(--rtd-line-crimson);
    transform: translateY(-3px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

.rtd-testimonial-stars {
    display: flex;
    gap: 2px;
    color: var(--rtd-amber);
}
.rtd-testimonial-stars svg { width: 16px; height: 16px; }

.rtd-testimonial-quote {
    font-size: 16px;
    line-height: 1.65;
    font-weight: 300;
    color: var(--rtd-text);
    margin: 0;
    flex-grow: 1;
}

.rtd-testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--rtd-space-3);
    padding-top: var(--rtd-space-4);
    border-top: 1px solid var(--rtd-line);
}
.rtd-testimonial-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rtd-crimson), var(--rtd-crimson-deep));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(200,16,46,0.3);
}
.rtd-testimonial-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}
.rtd-testimonial-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--rtd-text);
}
.rtd-testimonial-role {
    font-size: 12px;
    color: var(--rtd-text-subtle);
}

/* ============================================================
   FAQ — accordion premium con schema.org markup
   ============================================================ */
.rtd-faq {
    padding: var(--rtd-space-11) 0;
}
.rtd-faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--rtd-space-3);
    margin-top: var(--rtd-space-7);
}
.rtd-faq-item {
    background: var(--rtd-bg-surface);
    border: 1px solid var(--rtd-line);
    border-radius: var(--rtd-r-lg);
    transition: border-color var(--rtd-dur-base) var(--rtd-ease-out),
                background var(--rtd-dur-base) var(--rtd-ease-out);
    overflow: hidden;
}
.rtd-faq-item:hover { border-color: var(--rtd-line-crimson); }
.rtd-faq-item[open] {
    border-color: var(--rtd-line-crimson);
    background: var(--rtd-bg-elevated);
}

.rtd-faq-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rtd-space-4);
    padding: var(--rtd-space-5) var(--rtd-space-6);
    cursor: pointer;
    list-style: none;
    font-size: 17px;
    font-weight: 500;
    color: var(--rtd-text);
    letter-spacing: -0.01em;
    transition: color var(--rtd-dur-base) var(--rtd-ease-out);
}
.rtd-faq-summary::-webkit-details-marker { display: none; }
.rtd-faq-summary:hover { color: var(--rtd-crimson-soft); }

.rtd-faq-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rtd-line);
    border-radius: 50%;
    color: var(--rtd-crimson);
    flex-shrink: 0;
    transition: transform var(--rtd-dur-base) var(--rtd-ease-emphasized),
                background var(--rtd-dur-base) var(--rtd-ease-out);
}
.rtd-faq-icon svg {
    width: 14px;
    height: 14px;
    transition: transform var(--rtd-dur-base) var(--rtd-ease-emphasized);
}
.rtd-faq-item[open] .rtd-faq-icon {
    background: var(--rtd-crimson);
    color: #fff;
}
.rtd-faq-item[open] .rtd-faq-icon svg { transform: rotate(45deg); }

.rtd-faq-body {
    padding: 0 var(--rtd-space-6) var(--rtd-space-5);
    font-size: 15px;
    line-height: 1.7;
    color: var(--rtd-text-muted);
    font-weight: 300;
    max-width: 900px;
}

/* ============================================================
   CHATBOT CTA — banda destacada (mantenida)
   ============================================================ */
.rtd-chatbot-cta {
    position: relative;
    padding: var(--rtd-space-10) 0;
    overflow: hidden;
}
.rtd-chatbot-card {
    position: relative;
    max-width: var(--rtd-content-default);
    margin: 0 auto var(--rtd-space-5);
    padding: var(--rtd-space-9);
    background:
        linear-gradient(135deg, rgba(200, 16, 46, 0.06) 0%, rgba(20, 25, 35, 0.4) 60%),
        var(--rtd-bg-surface);
    border: 1px solid var(--rtd-line-crimson);
    border-radius: var(--rtd-r-2xl);
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--rtd-space-7);
    align-items: center;
    overflow: hidden;
}
@media (max-width: 900px) {
    .rtd-chatbot-card {
        grid-template-columns: 1fr;
        padding: var(--rtd-space-7);
    }
}

.rtd-chatbot-bg {
    position: absolute;
    right: -100px; top: -100px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, var(--rtd-crimson-glow), transparent 60%);
    pointer-events: none;
    filter: blur(40px);
}

.rtd-chatbot-content {
    position: relative;
    z-index: 1;
}

.rtd-chatbot-visual {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}

.rtd-chat-mock {
    background: var(--rtd-bg-deep);
    border: 1px solid var(--rtd-line);
    border-radius: var(--rtd-r-lg);
    padding: var(--rtd-space-5);
    width: 100%;
    max-width: 320px;
    box-shadow: var(--rtd-shadow-xl);
    font-family: var(--rtd-font-sans);
}
.rtd-chat-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    margin-bottom: var(--rtd-space-3);
    max-width: 80%;
    line-height: 1.45;
}
.rtd-chat-bubble.user {
    background: var(--rtd-crimson);
    color: #fff;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}
.rtd-chat-bubble.bot {
    background: var(--rtd-bg-elevated);
    color: var(--rtd-text);
    border: 1px solid var(--rtd-line);
    border-bottom-left-radius: 4px;
}

/* ============================================================
   FINAL CTA — gran cierre con glow radial premium
   ============================================================ */
.rtd-final-cta {
    position: relative;
    padding: var(--rtd-space-11) 0 var(--rtd-space-10);
    text-align: center;
    overflow: hidden;
}
.rtd-final-cta::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 800px; height: 800px;
    background: radial-gradient(circle, var(--rtd-crimson-glow), transparent 60%);
    filter: blur(60px);
    opacity: 0.4;
    z-index: 0;
    pointer-events: none;
}
.rtd-final-cta-inner {
    position: relative;
    z-index: 1;
}
.rtd-final-cta-title {
    font-size: clamp(38px, 5vw, 72px);
    font-weight: 200;
    line-height: 1.04;
    letter-spacing: -0.038em;
    color: var(--rtd-text);
    margin: 0 auto var(--rtd-space-5);
    max-width: 900px;
}
.rtd-final-cta-actions {
    display: flex;
    justify-content: center;
    gap: var(--rtd-space-4);
    flex-wrap: wrap;
    margin-top: var(--rtd-space-7);
}