/* ============================================================================
   RemoteDesk - tema-vivo.css
   1) Micro-interacciones y animaciones sutiles (solo con "reducir movimiento" OFF)
   2) Modo oscuro completo (activado con html[data-theme="dark"], ver js/tema.js)
   Se carga al final: no modifica los demas archivos CSS.
   ========================================================================== */

:root{
  --rd-ease:cubic-bezier(.2,.7,.2,1);
  --rd-lift:0 16px 32px -18px rgba(6,78,59,.45);
}
html{color-scheme:light}
html[data-theme=dark]{color-scheme:dark}
::selection{background:#bbf7d0;color:#052e1f}

/* ---------------------------------------------------------------------------
   Boton de cambio de tema (inyectado por js/tema.js en la cabecera)
   ------------------------------------------------------------------------- */
.rd-theme-toggle{
  position:relative;flex-shrink:0;display:inline-grid;place-items:center;
  width:44px;height:44px;padding:0;margin:0;
  border:1px solid #cbd5e1;border-radius:12px;background:#fff;color:#334155;cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .25s ease,transform .2s var(--rd-ease);
}
.rd-theme-toggle svg{grid-area:1/1;width:20px;height:20px;transition:transform .55s var(--rd-ease),opacity .3s ease}
.rd-theme-toggle .i-sun{opacity:0;transform:rotate(-90deg) scale(.4)}
html[data-theme=dark] .rd-theme-toggle .i-sun{opacity:1;transform:none}
html[data-theme=dark] .rd-theme-toggle .i-moon{opacity:0;transform:rotate(90deg) scale(.4)}
.rd-theme-toggle:hover{border-color:#047857;color:#047857;box-shadow:0 6px 14px -8px rgba(4,120,87,.6)}
.rd-theme-toggle:active{transform:scale(.94)}
.rd-theme-toggle:focus-visible{outline:3px solid #047857;outline-offset:3px}
.header .rd-theme-toggle{min-height:44px}

/* Transicion suave solo durante el cambio de tema */
html.rd-theme-anim *,html.rd-theme-anim *::before,html.rd-theme-anim *::after{
  transition:background-color .4s ease,color .4s ease,border-color .4s ease,fill .4s ease,stroke .4s ease,box-shadow .4s ease!important;
}

/* ---------------------------------------------------------------------------
   Animaciones de entrada y efectos al pasar el mouse
   ------------------------------------------------------------------------- */
@keyframes rd-fade{from{opacity:0}to{opacity:1}}
@keyframes rd-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes rd-ring{0%{transform:scale(1);opacity:.65}100%{transform:scale(1.7);opacity:0}}

/* Revelado al hacer scroll (lo agrega js/tema.js a lo que esta bajo el pliegue) */
.rd-pre{opacity:0;transform:translateY(16px)}
.rd-in{opacity:1;transform:none;transition:opacity .55s ease,transform .55s var(--rd-ease)}

@media (prefers-reduced-motion:no-preference){

  /* Cambio de seccion: el panel entra con un leve ascenso y sus bloques en cascada */
  .inner-panel:not([hidden])>*{animation:rd-rise .5s var(--rd-ease) backwards}
  .inner-panel:not([hidden])>*:nth-child(1){animation-delay:.00s}
  .inner-panel:not([hidden])>*:nth-child(2){animation-delay:.06s}
  .inner-panel:not([hidden])>*:nth-child(3){animation-delay:.12s}
  .inner-panel:not([hidden])>*:nth-child(4){animation-delay:.18s}
  .inner-panel:not([hidden])>*:nth-child(5){animation-delay:.24s}
  .inner-panel:not([hidden])>*:nth-child(n+6){animation-delay:.30s}

  /* Tarjetas de cada rejilla entran escalonadas */
  .inner-panel:not([hidden]) .rd-grid>*,
  .inner-panel:not([hidden]) #svcTrack>*,
  .inner-panel:not([hidden]) .rd-client-list>*,
  .inner-panel:not([hidden]) .rd-faq-grid>*{animation:rd-rise .55s var(--rd-ease) backwards}
  .inner-panel:not([hidden]) .rd-grid>*:nth-child(1),.inner-panel:not([hidden]) #svcTrack>*:nth-child(1),.inner-panel:not([hidden]) .rd-client-list>*:nth-child(1),.inner-panel:not([hidden]) .rd-faq-grid>*:nth-child(1){animation-delay:.10s}
  .inner-panel:not([hidden]) .rd-grid>*:nth-child(2),.inner-panel:not([hidden]) #svcTrack>*:nth-child(2),.inner-panel:not([hidden]) .rd-client-list>*:nth-child(2),.inner-panel:not([hidden]) .rd-faq-grid>*:nth-child(2){animation-delay:.16s}
  .inner-panel:not([hidden]) .rd-grid>*:nth-child(3),.inner-panel:not([hidden]) #svcTrack>*:nth-child(3),.inner-panel:not([hidden]) .rd-client-list>*:nth-child(3),.inner-panel:not([hidden]) .rd-faq-grid>*:nth-child(3){animation-delay:.22s}
  .inner-panel:not([hidden]) .rd-grid>*:nth-child(4),.inner-panel:not([hidden]) #svcTrack>*:nth-child(4),.inner-panel:not([hidden]) .rd-client-list>*:nth-child(4),.inner-panel:not([hidden]) .rd-faq-grid>*:nth-child(4){animation-delay:.28s}
  .inner-panel:not([hidden]) .rd-grid>*:nth-child(n+5),.inner-panel:not([hidden]) #svcTrack>*:nth-child(n+5),.inner-panel:not([hidden]) .rd-client-list>*:nth-child(n+5),.inner-panel:not([hidden]) .rd-faq-grid>*:nth-child(n+5){animation-delay:.34s}

  /* Portada: entrada de tarjetas y bloque express */
  .cards>.tile{animation:rd-rise .55s var(--rd-ease) backwards}
  .cards>.tile:nth-child(1){animation-delay:.04s}
  .cards>.tile:nth-child(2){animation-delay:.10s}
  .cards>.tile:nth-child(3){animation-delay:.16s}
  .cards>.tile:nth-child(4){animation-delay:.22s}
  .cards>.tile:nth-child(5){animation-delay:.28s}
  .cards>.tile:nth-child(n+6){animation-delay:.34s}
  .express{animation:rd-fade .6s ease .3s backwards}

  /* Cabecera y pie */
  .rd-header-inner,.header{animation:rd-fade .45s ease backwards}

  /* Tarjetas: elevacion y realce del borde */
  .rd-card,.service-card,.client-reference,#preguntas details{
    transition:transform .3s var(--rd-ease),box-shadow .3s var(--rd-ease),border-color .25s ease,background-color .25s ease;
  }
  .rd-card:focus-within,.service-card:focus-within{border-color:#74b99a}
  .rd-price{transition:transform .3s var(--rd-ease)}

  /* Botones: elevacion, presion y brillo suave */
  .rd-button,.svc-add-btn,.rd-theme-toggle{
    transition:transform .2s var(--rd-ease),box-shadow .25s ease,background-color .2s ease,border-color .2s ease,color .2s ease;
  }
  .rd-button:active,.svc-add-btn:active{transform:translateY(0) scale(.98);box-shadow:none}

  /* Menu superior: subrayado que se desliza (escritorio) */
  .rd-primary-nav a{position:relative}
  .rd-primary-nav a:not([aria-current=page])::after{
    content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;
    background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .28s var(--rd-ease);
  }
  .rd-primary-nav a:not([aria-current=page]):hover::after,
  .rd-primary-nav a:not([aria-current=page]):focus-visible::after{transform:scaleX(1)}
  .rd-primary-nav a{transition:color .18s ease}
  .rd-primary-nav a:hover{color:#047857}

  /* Menu lateral: barra indicadora y desplazamiento */
  .inner-sidebar a{position:relative;transition:background-color .18s,color .18s,border-color .18s,transform .25s var(--rd-ease)}
  .inner-sidebar a::before{
    content:"";position:absolute;left:-1px;top:24%;bottom:24%;width:3px;border-radius:3px;
    background:#047857;transform:scaleY(0);transition:transform .3s var(--rd-ease);
  }
  .inner-sidebar a[aria-current]::before{transform:scaleY(1)}

  /* Logo: giro y escala suaves */
  .rd-brand img,.brand img{transition:transform .45s var(--rd-ease)}

  /* Pie de pagina: enlaces que se desplazan */
  .rd-footer-grid a:not(.rd-brand){display:block;transition:color .18s ease,transform .22s var(--rd-ease)}

  /* Preguntas frecuentes: contenido que se despliega con suavidad */
  #preguntas details[open]>:not(summary){animation:rd-rise .35s var(--rd-ease)}
  #preguntas summary::after{transition:background-color .2s ease,transform .3s var(--rd-ease)}
  #preguntas details[open] summary::after{transform:rotate(180deg)}

  /* Formulario: foco con halo suave */
  #contactForm input,#contactForm select,#contactForm textarea,.rd-form input,.rd-form select,.rd-form textarea{
    transition:border-color .2s ease,box-shadow .25s ease,background-color .2s ease;
  }
  #contactForm input:focus,#contactForm select:focus,#contactForm textarea:focus{box-shadow:0 0 0 4px rgba(4,120,87,.14)}

  /* Fotografia de la pagina Nosotros */
  #nosotros .inner-team-grid>div:first-child img{transition:transform .8s var(--rd-ease)}
  #nosotros .inner-team-grid>div:first-child:hover img{transform:scale(1.04)}

  /* Pasos de "Como funciona" */
  .step-dot{transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .25s var(--rd-ease)}
  #como-funciona .step-panel{animation:rd-rise .4s var(--rd-ease)}

  /* Boton flotante de WhatsApp: pulso muy discreto */
  .rd-floating-wa{transition:transform .25s var(--rd-ease),background-color .2s ease}
  .rd-floating-wa::after{
    content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(4,120,87,.55);
    pointer-events:none;animation:rd-ring 3.4s ease-out 1.2s infinite;
  }
  .rd-floating-wa:hover::after{animation-play-state:paused;opacity:0}

  /* Solo en dispositivos con mouse */
  @media (hover:hover){
    .rd-card:hover,.service-card:hover{transform:translateY(-4px);box-shadow:var(--rd-lift);border-color:#74b99a}
    .rd-card:hover .rd-price{transform:scale(1.04);transform-origin:left center}
    .client-reference:hover .client-monogram{transform:scale(1.08)}
    .rd-button:hover,.svc-add-btn:hover{transform:translateY(-2px);box-shadow:0 12px 22px -12px rgba(4,120,87,.7)}
    .rd-button-secondary:hover{box-shadow:0 10px 20px -14px rgba(15,23,42,.55)}
    .rd-text-cta{transition:letter-spacing .25s var(--rd-ease),color .2s ease}
    .rd-text-cta:hover{letter-spacing:.015em}
    .inner-sidebar a:hover{transform:translateX(3px)}
    .rd-brand:hover img,.brand:hover img{transform:rotate(-8deg) scale(1.07)}
    .rd-footer-grid a:not(.rd-brand):hover{transform:translateX(4px);color:#fff}
    #preguntas details:hover{border-color:#74b99a;box-shadow:0 8px 18px -14px rgba(6,78,59,.55)}
    .step-dot:hover{transform:scale(1.08)}
    .rd-floating-wa:hover{transform:scale(1.08)}
    .tile:hover .select{background:#047857;color:#fff;border-color:#047857}
  }

  /* El panel con scroll no debe recortar la elevacion de las tarjetas */
  .inner-panel{padding-top:8px;margin-top:-6px;padding-left:6px;margin-left:-6px}
}

/* Cabecera en pantallas chicas: tema + menu + solicitar soporte en UNA sola fila */
@media (max-width:1100px){
  .rd-header-inner .rd-theme-toggle{order:1;margin-left:auto}
  .rd-header-inner .rd-menu-toggle{order:2;margin-left:0}
  .rd-header-inner .rd-nav-cta{order:3}
  .rd-header-inner .rd-primary-nav{order:4}
}
@media (max-width:560px){
  .rd-header-inner{gap:4px;padding-left:10px;padding-right:10px}
  .rd-header-inner .rd-theme-toggle{width:40px;height:40px;border-radius:10px}
  .rd-header-inner .rd-menu-toggle{font-size:0;width:40px;min-width:40px;padding:0;display:inline-grid;place-items:center}
  .rd-header-inner .rd-menu-toggle span{font-size:20px;line-height:1}
  .rd-header-inner .rd-nav-cta{padding:8px 8px;margin-left:2px}
  .rd-header-inner .rd-brand{gap:4px}
}

/* En movil el menu es vertical: el subrayado deslizante se reemplaza por un fondo */
@media (max-width:1100px){
  .rd-primary-nav a::after{display:none!important}
  .rd-primary-nav a:hover{background:#eef4f0;border-radius:8px}
}
@media (max-width:700px){
  .inner-sidebar a::before{display:none}
}

/* ---------------------------------------------------------------------------
   Modo claro: ajuste minimo de tono en grises pequenos para llegar a 4.5:1 (WCAG AA)
   ------------------------------------------------------------------------- */
.inner-sidebar>p{color:#5a6b60}
.inner-bottom{color:#566a5d}
.inner-panel .text-slate-500{color:#516074}
.step-dot{color:#64748b}

/* ============================================================================
   MODO OSCURO
   ========================================================================== */
html[data-theme=dark]{
  --d-bg:#0b1210;--d-s1:#111a17;--d-s2:#17221e;--d-s3:#1e2c27;
  --d-line:#27362f;--d-line2:#34473f;
  --d-ink:#e8f1ed;--d-ink2:#c5d3cc;--d-mut:#98aba2;
  --d-acc:#34d399;--d-acc2:#6ee7b7;--d-tint:#0f2a21;--d-tint2:#143626;--d-edge:#2a5a45;
  --rd-ink:var(--d-ink);--rd-muted:var(--d-mut);--rd-blue:var(--d-acc);
  --rd-lift:0 18px 34px -18px rgba(0,0,0,.85);
}

/* Base */
html[data-theme=dark] body{background:var(--d-bg);color:var(--d-ink)}
html[data-theme=dark] .has-inner-shell{background:var(--d-bg)}
html[data-theme=dark] ::selection{background:#065f46;color:#ecfdf5}
html[data-theme=dark] :focus-visible{outline-color:var(--d-acc)}
html[data-theme=dark] .rd-wrap h1,html[data-theme=dark] .rd-wrap h2,html[data-theme=dark] .rd-wrap h3{color:var(--d-ink)}

/* Cabecera */
html[data-theme=dark] .rd-header-inner .rd-brand,html[data-theme=dark] .rd-brand,html[data-theme=dark] .brand{color:var(--d-ink)}
/* Logo: version clara por defecto; en oscuro se muestra la version luminosa (misma geometria) */
.rd-logo-dark{display:none}
html[data-theme=dark] .rd-logo-light{display:none}
html[data-theme=dark] .rd-logo-dark{display:block;filter:drop-shadow(0 0 7px rgba(95,240,172,.3))}
html[data-theme=dark] .rd-site-header{background:rgba(11,18,16,.92);border-bottom-color:var(--d-line)}
html[data-theme=dark] .header{background:var(--d-s1);border-bottom-color:var(--d-line)}
html[data-theme=dark] .proof{background:#2a2314;color:#ecd08f}
html[data-theme=dark] .rd-menu-toggle,html[data-theme=dark] .menu{background:var(--d-s2);border-color:var(--d-line2);color:var(--d-ink)}
html[data-theme=dark] .menu[aria-expanded=true]{background:var(--d-tint2)}
html[data-theme=dark] .rd-primary-nav a,html[data-theme=dark] nav a{color:var(--d-mut)}
html[data-theme=dark] .rd-primary-nav a:hover,html[data-theme=dark] nav a:hover{color:var(--d-acc2)}
html[data-theme=dark] .rd-primary-nav a[aria-current=page],html[data-theme=dark] nav a[aria-current]{color:var(--d-acc);border-bottom-color:var(--d-acc)}
html[data-theme=dark] .rd-theme-toggle{background:var(--d-s2);border-color:var(--d-line2);color:var(--d-acc2)}
html[data-theme=dark] .rd-theme-toggle:hover{border-color:var(--d-acc);color:#fff;box-shadow:0 6px 16px -8px rgba(52,211,153,.55)}
@media (max-width:1100px){html[data-theme=dark] .rd-primary-nav a:hover{background:var(--d-s2)}}

/* Botones */
html[data-theme=dark] .rd-button-secondary{background:var(--d-s2);color:var(--d-acc2);border-color:var(--d-line2)}
html[data-theme=dark] .rd-button-secondary:hover{background:var(--d-tint2);color:#fff;border-color:var(--d-acc)}
html[data-theme=dark] .rd-dialog .rd-button-secondary{color:var(--d-acc2)}
html[data-theme=dark] .svc-add-btn{background:transparent}
html[data-theme=dark] .svc-add-btn:hover{background:var(--d-tint2);border-color:var(--d-acc)}
html[data-theme=dark] .svc-add-btn.is-added{background:#047857;color:#fff}

/* Tarjetas, bloques y texto */
html[data-theme=dark] .rd-card,
html[data-theme=dark] .service-card,
html[data-theme=dark] .tile,
html[data-theme=dark] .client-reference,
html[data-theme=dark] #preguntas details,
html[data-theme=dark] #contactForm{background:var(--d-s1);border-color:var(--d-line)}
html[data-theme=dark] .rd-card{box-shadow:0 10px 26px -16px rgba(0,0,0,.8)}
html[data-theme=dark] .rd-note{background:var(--d-tint);border-left-color:var(--d-acc)}
html[data-theme=dark] .rd-section-alt{background:var(--d-s1)}
html[data-theme=dark] .rd-client-list span{border-color:var(--d-line);color:var(--d-ink2)}
html[data-theme=dark] .rd-price{color:var(--d-ink)!important}
html[data-theme=dark] .rd-frequent p,html[data-theme=dark] .rd-trust-tags{color:var(--d-mut)}
html[data-theme=dark] .rd-wrap p>a:not(.rd-button),
html[data-theme=dark] .rd-wrap li>a,
html[data-theme=dark] .rd-form p a,
html[data-theme=dark] .rd-section-heading a,
html[data-theme=dark] .rd-text-cta,
html[data-theme=dark] .rd-inline-links a,
html[data-theme=dark] .rd-trust a,
html[data-theme=dark] .rd-dialog a{color:var(--d-acc2)}
html[data-theme=dark] .rd-card-enterprise,html[data-theme=dark] .rd-card-personal{border-top-color:var(--d-acc)}
@media (prefers-reduced-motion:no-preference){
  @media (hover:hover){
    html[data-theme=dark] .rd-card:hover,html[data-theme=dark] .service-card:hover{border-color:var(--d-edge)}
    html[data-theme=dark] #preguntas details:hover{border-color:var(--d-edge);box-shadow:0 8px 18px -14px rgba(0,0,0,.8)}
  }
}

/* Estructura de paginas interiores */
html[data-theme=dark] .inner-sidebar{border-right-color:var(--d-line);scrollbar-color:#3a4f46 transparent}
html[data-theme=dark] .inner-sidebar>p{color:var(--d-mut)}
html[data-theme=dark] .inner-sidebar a{color:var(--d-ink2)}
html[data-theme=dark] .inner-sidebar a:hover{background:var(--d-s2);color:var(--d-acc2)}
html[data-theme=dark] .inner-sidebar a[aria-current]{background:var(--d-tint2);color:var(--d-acc2);border-color:var(--d-edge)}
html[data-theme=dark] .inner-sidebar a::before{background:var(--d-acc)}
html[data-theme=dark] .inner-heading,html[data-theme=dark] .inner-bottom{border-color:var(--d-line)}
html[data-theme=dark] .inner-bottom{color:var(--d-mut)}
html[data-theme=dark] .inner-bottom a,html[data-theme=dark] .inner-return{color:var(--d-acc)}
html[data-theme=dark] .inner-panel{scrollbar-color:#3a4f46 transparent}
html[data-theme=dark] .inner-full-footer{background:var(--d-s1)!important;color:var(--d-ink2)!important}
html[data-theme=dark] .inner-full-footer a{color:var(--d-acc)!important}
html[data-theme=dark] .rd-footer{background:#070c0b;border-top-color:var(--d-line)}
html[data-theme=dark] .rd-footer a{color:var(--d-acc2)}
@media (max-width:700px){html[data-theme=dark] .inner-sidebar a{border-color:var(--d-line)}}

/* Contacto, formularios y dialogos */
html[data-theme=dark] .rd-form input,
html[data-theme=dark] .rd-form textarea,
html[data-theme=dark] .rd-form select,
html[data-theme=dark] .rd-dialog textarea,
html[data-theme=dark] .rd-cart-segment,
html[data-theme=dark] #contactForm input,
html[data-theme=dark] #contactForm select,
html[data-theme=dark] #contactForm textarea,
html[data-theme=dark] #requestPopup input:not([type=hidden]):not([type=radio]),
html[data-theme=dark] #requestPopup textarea{background:var(--d-s2);border-color:var(--d-line2);color:var(--d-ink)}
html[data-theme=dark] #contactForm input:focus,
html[data-theme=dark] #contactForm select:focus,
html[data-theme=dark] #contactForm textarea:focus,
html[data-theme=dark] #requestPopup input:not([type=radio]):focus,
html[data-theme=dark] #requestPopup textarea:focus{background:var(--d-s1);border-color:var(--d-acc);outline-color:var(--d-acc);box-shadow:0 0 0 4px rgba(52,211,153,.16)}
html[data-theme=dark] #contactForm label,
html[data-theme=dark] #requestPopup label,
html[data-theme=dark] #requestPopup .device-selector legend{color:var(--d-ink2)}
html[data-theme=dark] input::placeholder,html[data-theme=dark] textarea::placeholder{color:#7f938a}
html[data-theme=dark] .rd-error{color:#fca5a5}
html[data-theme=dark] .rd-dialog,
html[data-theme=dark] #requestPopup{background:var(--d-s1);color:var(--d-ink);border-color:var(--d-line)}
html[data-theme=dark] #requestPopup .quick-intro,
html[data-theme=dark] #requestPopup .quick-hint,
html[data-theme=dark] #requestPopup .quick-privacy{color:var(--d-mut)}
html[data-theme=dark] #requestPopup .popup-context{color:var(--d-acc)}
html[data-theme=dark] #requestPopup a{color:var(--d-acc2)}
html[data-theme=dark] #requestPopup .device-choice{background:var(--d-s2);border-color:var(--d-line2);color:var(--d-ink2)}
html[data-theme=dark] #requestPopup .device-choice:has(input:checked){background:var(--d-tint2);border-color:var(--d-acc);color:var(--d-acc2)}
html[data-theme=dark] #requestPopup .quick-submit{color:#fff}
html[data-theme=dark] .popup-close,
html[data-theme=dark] #requestPopup .popup-close,
html[data-theme=dark] .rd-modal-close,
html[data-theme=dark] .detail-close{background:var(--d-s3);color:var(--d-ink2);border-color:var(--d-line2)}
html[data-theme=dark] #requestPopup .popup-close:hover,
html[data-theme=dark] .rd-modal-close:hover,
html[data-theme=dark] .detail-close:hover{background:var(--d-tint2);color:#fff}
html[data-theme=dark] #detailLightbox{background:var(--d-s1);border-color:var(--d-line)}
html[data-theme=dark] .detail-bar{background:var(--d-s1);border-bottom-color:var(--d-line)}
html[data-theme=dark] .detail-bar h2{color:var(--d-ink)}
html[data-theme=dark] .rd-dialog::backdrop,html[data-theme=dark] #requestPopup::backdrop,html[data-theme=dark] #detailLightbox::backdrop{background:rgba(2,6,5,.72)}

/* Nosotros, Ayuda, Servicios */
html[data-theme=dark] .client-intro>p:last-child{color:var(--d-ink2)}
html[data-theme=dark] .client-reference{color:var(--d-ink)!important}
html[data-theme=dark] .rd-client-list .client-monogram{background:var(--d-tint2);color:var(--d-acc2)}
html[data-theme=dark] .client-eyebrow,html[data-theme=dark] .rd-client-list .client-arrow,html[data-theme=dark] .client-source a{color:var(--d-acc)!important}
html[data-theme=dark] .client-info small,html[data-theme=dark] .client-source{color:var(--d-mut)}
html[data-theme=dark] #preguntas summary::after{background:var(--d-tint2);color:var(--d-acc2)}
html[data-theme=dark] #preguntas details[open]{border-color:var(--d-edge)}
html[data-theme=dark] #como-funciona #stepPanels{background:var(--d-s1);border-color:var(--d-line)}
html[data-theme=dark] .step-dot{background:var(--d-s2);border-color:var(--d-line2);color:var(--d-mut)}
html[data-theme=dark] .step-dot.is-done{background:var(--d-tint2);border-color:var(--d-edge);color:var(--d-acc2)}
html[data-theme=dark] .step-track:not(.is-done){background:var(--d-line2)}
html[data-theme=dark] #como-funciona .step-panel>a{background:var(--d-tint2);color:var(--d-acc2)}
html[data-theme=dark] #como-funciona #stepPause,
html[data-theme=dark] #como-funciona #stepPrev,
html[data-theme=dark] #como-funciona #stepNext{color:var(--d-acc2)}
html[data-theme=dark] #seguridad{border:1px solid var(--d-line)}

/* Utilidades Tailwind usadas en el sitio */
html[data-theme=dark] .bg-white{background-color:var(--d-s1)}
html[data-theme=dark] .bg-slate-50{background-color:var(--d-s2)}
html[data-theme=dark] .bg-slate-100{background-color:var(--d-s3)}
html[data-theme=dark] .text-ink-900,html[data-theme=dark] .text-ink-800{color:var(--d-ink)}
html[data-theme=dark] .text-slate-700,html[data-theme=dark] .text-slate-600{color:var(--d-ink2)}
html[data-theme=dark] .text-slate-500,html[data-theme=dark] .text-slate-400{color:var(--d-mut)}
html[data-theme=dark] .border-slate-100,html[data-theme=dark] .border-slate-200{border-color:var(--d-line)}
html[data-theme=dark] .bg-brand-50{background-color:var(--d-tint)}
html[data-theme=dark] .bg-brand-100,html[data-theme=dark] .hover\:bg-brand-100:hover{background-color:var(--d-tint2)}
html[data-theme=dark] .bg-amber-50{background-color:#2a2314}
html[data-theme=dark] .border-amber-200{border-color:#5b4a1f}
html[data-theme=dark] .text-amber-700{color:#f0cf8a}
html[data-theme=dark] .text-brand-600,html[data-theme=dark] .text-brand-700{color:var(--d-acc)}
html[data-theme=dark] .hover\:text-brand-700:hover{color:var(--d-acc2)}
html[data-theme=dark] .shadow-card,html[data-theme=dark] .shadow-soft{--tw-shadow:0 10px 26px -14px rgba(0,0,0,.75)}
html[data-theme=dark] .ring-slate-50{--tw-ring-color:var(--d-line)}

/* Ajustes por especificidad: reglas con ID o contexto de coherencia-corporativa.css */
html[data-theme=dark] #nosotros .bg-brand-50,
html[data-theme=dark] .service-card .bg-brand-50,
html[data-theme=dark] body.has-inner-shell .bg-brand-50:not(#seguridad *){background-color:var(--d-tint)}
html[data-theme=dark] #servicios .text-brand-600,html[data-theme=dark] #servicios .text-brand-700,
html[data-theme=dark] #nosotros .text-brand-600,html[data-theme=dark] #nosotros .text-brand-700,
html[data-theme=dark] .service-card .text-brand-600,html[data-theme=dark] .service-card .text-brand-700,
html[data-theme=dark] body.has-inner-shell :is(.text-brand-600,.text-brand-700):not(#seguridad *){color:var(--d-acc)}
html[data-theme=dark] .service-card .border-brand-600,
html[data-theme=dark] body.has-inner-shell .border-brand-600:not(#seguridad *){border-color:var(--d-acc)}
html[data-theme=dark] .svc-add-btn{color:var(--d-acc2)}
html[data-theme=dark] .svc-add-btn.is-added{color:#fff}

/* Portada */
html[data-theme=dark] .intro p:not(.eyebrow),
html[data-theme=dark] .muted,html[data-theme=dark] .eyebrow,html[data-theme=dark] .legal,
html[data-theme=dark] .quiet,html[data-theme=dark] .chooser-label,html[data-theme=dark] .chooser-info,
html[data-theme=dark] .category,html[data-theme=dark] .from,html[data-theme=dark] .period,
html[data-theme=dark] .tile p{color:var(--d-mut)}
html[data-theme=dark] .chooser-info b{color:var(--d-ink2)}
html[data-theme=dark] .chooser-info a,html[data-theme=dark] .small-link,html[data-theme=dark] .section-top a{color:var(--d-acc)}
html[data-theme=dark] .small-link:hover,html[data-theme=dark] .catalog-link:hover,html[data-theme=dark] .quiet:hover{color:var(--d-acc2)}
html[data-theme=dark] .segments button{color:var(--d-ink2)}
html[data-theme=dark] .segments button[aria-pressed=true]{border-color:var(--d-edge);background:var(--d-tint2);color:var(--d-acc2)}
@media (max-width:750px){
  html[data-theme=dark] .segments button{background:var(--d-s2);border-color:var(--d-line)}
  html[data-theme=dark] .segments button[aria-pressed=true]{background:var(--d-tint2);border-color:var(--d-edge)}
}
@media (hover:hover){
  html[data-theme=dark] .segments button:hover{background:var(--d-s3);border-color:var(--d-edge)}
  html[data-theme=dark] .segments button[aria-pressed=true]:hover{background:var(--d-tint2)}
}
html[data-theme=dark] .tile strong{color:var(--d-ink)}
html[data-theme=dark] .tile h3{color:var(--d-ink)}
html[data-theme=dark] .service-icon{color:var(--d-acc)}
html[data-theme=dark] .select{background:var(--d-s2);border-color:var(--d-line2);color:var(--d-acc2)}
html[data-theme=dark] .select:hover,html[data-theme=dark] .select:focus-visible{background:#047857;border-color:#047857;color:#fff}
html[data-theme=dark] .catalog-link{color:var(--d-ink2);border-bottom-color:var(--d-line)}
html[data-theme=dark] #personal .tile-featured{background:linear-gradient(145deg,#10281f,var(--d-s1) 65%);border-color:var(--d-edge);box-shadow:0 4px 16px rgba(0,0,0,.4)}
html[data-theme=dark] #personal .tile-featured .featured-label{background:var(--d-tint2);color:var(--d-acc2)}
html[data-theme=dark] #personal .tile-featured:hover{border-color:var(--d-acc)}
html[data-theme=dark] body>footer,html[data-theme=dark] footer{border-top-color:var(--d-line)}
html[data-theme=dark] body>footer{color:var(--d-ink2)}
html[data-theme=dark] .skip{background:var(--d-s2);color:var(--d-ink)}

/* Scrollbars */
html[data-theme=dark] *{scrollbar-color:#3a4f46 transparent}

/* Planes mensuales (portada) en modo oscuro */
html[data-theme=dark] .plan-label{color:var(--d-mut)}
html[data-theme=dark] .plan-includes li{color:var(--d-ink2)}
html[data-theme=dark] .plan-includes li::before{background:var(--d-tint2)}
html[data-theme=dark] .plan-includes li::after{border-color:var(--d-acc2)}
html[data-theme=dark] .plan-note{color:var(--d-mut)}
html[data-theme=dark] .plan-note strong{color:var(--d-ink2)}
html[data-theme=dark] #business .tile-featured{background:linear-gradient(145deg,#10281f,var(--d-s1) 65%);border-color:var(--d-edge);box-shadow:0 4px 16px rgba(0,0,0,.4)}
html[data-theme=dark] #business .tile-featured .featured-label{background:var(--d-tint2);color:var(--d-acc2)}
html[data-theme=dark] #business .tile-featured .select{background:#047857;border-color:#047857;color:#fff}
html[data-theme=dark] #business .tile-featured .select:hover,html[data-theme=dark] #business .tile-featured .select:focus-visible{background:#059669;border-color:#059669}
html[data-theme=dark] #business .tile-featured:hover{border-color:var(--d-acc)}

/* ---------------------------------------------------------------------------
   Plan destacado (Empresas > Planes mensuales): Profesional
   ------------------------------------------------------------------------- */
.rd-card-featured{
  position:relative;
  border-color:#047857 #74b99a #74b99a #74b99a;
  background:linear-gradient(160deg,#f0f8f4,#fff 62%);
  box-shadow:0 10px 28px -16px rgba(4,120,87,.45);
}
.rd-badge-featured{
  position:absolute;top:-12px;left:24px;
  padding:5px 12px;border-radius:999px;
  background:#047857;color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;
  box-shadow:0 4px 10px -4px rgba(4,120,87,.55);
}
/* Los otros planes pasan a boton secundario para que el destacado guie la mirada */
#planes .rd-card-enterprise:not(.rd-card-featured) .rd-button-enterprise{background:#fff;color:#047857;border-color:#abc6bc}
#planes .rd-card-enterprise:not(.rd-card-featured) .rd-button-enterprise:hover{background:#e8f0ec;color:#065f46;border-color:#74b99a}
@media (prefers-reduced-motion:no-preference){
  @media (hover:hover){.rd-card-featured:hover{box-shadow:0 18px 36px -16px rgba(4,120,87,.55)}}
}
html[data-theme=dark] .rd-card-featured{
  border-color:var(--d-acc) var(--d-edge) var(--d-edge) var(--d-edge);
  background:linear-gradient(160deg,#10281f,var(--d-s1) 62%);
  box-shadow:0 10px 28px -16px rgba(0,0,0,.7);
}
html[data-theme=dark] .rd-badge-featured{background:var(--d-acc);color:#04261a;box-shadow:0 4px 12px -4px rgba(52,211,153,.5)}
html[data-theme=dark] #planes .rd-card-enterprise:not(.rd-card-featured) .rd-button-enterprise{background:var(--d-s2);color:var(--d-acc2);border-color:var(--d-line2)}
html[data-theme=dark] #planes .rd-card-enterprise:not(.rd-card-featured) .rd-button-enterprise:hover{background:var(--d-tint2);color:#fff;border-color:var(--d-acc)}