/* ===================================
   MiTienda — Branding Navy & Teal
   Archivo: assets/css/mitienda.css
   Versión: 2.1 (SaaS premium + conversión)
   =================================== */

/* ============ Tokens extendidos ============ */
:root{
  /* Tipografía fluida y leading coherente */
  --font-sans: var(--mitienda-font);
  --fs-xs: clamp(12px, .82vw, 13px);
  --fs-sm: clamp(13px, .9vw, 14px);
  --fs-base: clamp(15px, 1.1vw, 16px);
  --fs-lg: clamp(17px, 1.4vw, 18px);
  --fs-xl: clamp(20px, 2.2vw, 24px);
  --fs-2xl: clamp(28px, 3.5vw, 34px);
  --fs-3xl: clamp(36px, 5vw, 48px);
  --leading-tight: 1.15;
  --leading-normal: 1.45;

  /* Colores de feedback accesibles */
  --ok: #10B981;         /* emerald 500 */
  --ok-ink: #052E26;
  --warn: #F59E0B;       /* amber 500 */
  --error: #EF4444;      /* red 500 */
  --error-ink:#2F0B0B;

  /* Sombras y capas */
  --shadow-1: 0 8px 22px rgba(8,30,51,.24);
  --shadow-2: 0 12px 32px rgba(20,209,197,.16);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.06);

  /* Superficies “glass” */
  --glass-bg: rgba(255,255,255,.06);
  --glass-brd: rgba(255,255,255,.10);
  --glass-blur: 12px;

  /* Gradiente de texto */
  --text-grad: linear-gradient(135deg, #BFFCF4 0%, #8DE1FF 50%, #C6FFE9 100%);
}

/* ============ Base tipográfica y legibilidad ============ */
body{
  font-size: var(--fs-base);
  line-height: var(--leading-normal);
  text-rendering: optimizeLegibility;
}
h1,h2,h3{
  line-height: var(--leading-tight);
  letter-spacing: -.01em;
}
h1{ font-size: var(--fs-3xl) }
h2{ font-size: var(--fs-2xl) }
h3{ font-size: var(--fs-xl) }

/* Gradiente de texto utilitario */
.text-gradient{
  background: var(--text-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Links más visibles + subrayado elegante */
a{
  text-underline-offset: 3px;
  text-decoration-thickness: .08em;
}
a:hover{ text-decoration: underline }

/* ============ Micro-interacciones genericas ============ */
.hover-lift{ transition: transform .22s ease, box-shadow .22s ease }
.hover-lift:hover{ transform: translateY(-2px); box-shadow: var(--shadow-1) }

.glow-soft{ box-shadow: 0 0 0 0 rgba(20,209,197,.5); transition: box-shadow .24s ease }
.glow-soft:hover{ box-shadow: 0 0 0 6px rgba(20,209,197,.18) }

/* ============ Botones (CTAs) refinados ============ */
.ud-main-btn, .btn-cta{
  font-size: var(--fs-base);
  border-radius: var(--mitienda-radius-lg);
  box-shadow: var(--mitienda-shadow), var(--shadow-inset);
}
.ud-main-btn:hover, .btn-cta:hover{
  transform: translateY(-2px);
  filter: brightness(1.02);
}
.ud-main-btn:focus-visible, .btn-cta:focus-visible{
  outline: 3px solid rgba(20,209,197,.55);
  outline-offset: 2px;
}

/* Variantes de CTA */
.btn-cta--lg{ padding: 16px 26px; font-size: var(--fs-lg) }
.btn-cta--pill{ border-radius: 999px }
.btn-cta--ghost{ background: transparent !important; border:2px solid var(--mitienda-teal) !important; color:#E6F6F3 }
.btn-cta--block-mobile{ display:inline-flex; width: auto }
@media (max-width: 575.98px){
  .btn-cta--block-mobile{ width: 100% }
}

/* CTA sticky en mobile (mejora conversión en scroll) */
.cta-sticky{
  position: sticky; bottom: 18px; z-index: 40;
  display: flex; justify-content: center;
  pointer-events: none;
}
.cta-sticky .btn-cta{
  pointer-events: auto;
  box-shadow: 0 14px 32px rgba(0,0,0,.28), 0 0 0 6px rgba(20,209,197,.14);
}

/* Botón blanco más contrastado */
.ud-white-btn{
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}



/* ============ Hero con jerarquía y confianza ============ */
.ud-hero .badge{
  backdrop-filter: blur(6px);
  border-radius: 999px;
}
.ud-hero-title{ letter-spacing:-.015em }
.ud-hero .hero-meta{
  display:flex; flex-wrap:wrap; gap:8px 12px; margin-top: 14px;
}
.hero-meta .meta-chip{
  padding:6px 10px; border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid var(--mitienda-border);
  font-size: var(--fs-sm); color:#DFF7F3;
}

/* ============ Tarjetas / Superficies ============ */
.surface-glass{
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--mitienda-radius);
}
.section-card,
.ud-single-feature,
.ud-single-testimonial,
.ud-single-pricing{
  background: rgba(255,255,255,.045);
  border: 1px solid var(--mitienda-border);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

/* ============ Features ============ */
.ud-single-feature .ud-feature-icon{
  display: inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; font-size:22px; color:#0b2239;
  box-shadow: 0 6px 16px rgba(0,164,111,.22);
}

/* ============ Pricing (con badges y hovers) ============ */
.ud-pricing .price-switch{
  display:inline-flex; gap:6px; align-items:center;
  padding:6px; border-radius: 999px; background: rgba(255,255,255,.06);
  border: 1px solid var(--mitienda-border);
}
.price-switch .pill{
  padding:6px 12px; border-radius:999px; cursor:pointer; user-select:none;
  transition: background .18s ease, color .18s ease;
}
.price-switch .pill.is-active{
  background: rgba(20,209,197,.18);
  color:#CFFCF5; border:1px solid rgba(20,209,197,.32);
}

.ud-single-pricing .save-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background: rgba(20,209,197,.16);
  border:1px solid rgba(20,209,197,.28);
  color:#CFFCEF; font-weight:700; font-size: var(--fs-sm);
}

/* ============ Testimonios más creíbles ============ */
.ud-single-testimonial .author{
  display:flex; align-items:center; gap:12px; margin-top:12px;
}
.ud-single-testimonial .avatar{
  width:42px; height:42px; border-radius:999px; overflow:hidden;
  box-shadow: 0 0 0 3px rgba(20,209,197,.28);
}

/* ============ Formularios (accesibles) ============ */
.ud-form-group .hint{ font-size: var(--fs-sm); opacity:.8; margin-top:6px }

input:is([type="text"],[type="email"],[type="tel"]),
textarea{
  caret-color: var(--mitienda-teal);
}
input:focus, textarea:focus{
  background: rgba(255,255,255,.08);
}

/* Validación nativa con estilos accesibles */
input:required:invalid, textarea:required:invalid{
  border-color: rgba(239,68,68,.8);
}
input:required:invalid:focus, textarea:required:invalid:focus{
  box-shadow: 0 0 0 4px rgba(239,68,68,.22);
}
input:valid{ border-color: rgba(16,185,129,.6) }

/* Estados de ayuda */
.form-msg{
  margin-top:8px; padding:8px 12px; border-radius: 10px; font-size: var(--fs-sm);
}
.form-msg.ok{ background: rgba(16,185,129,.14); color:#D7FFF3; border:1px solid rgba(16,185,129,.28) }
.form-msg.error{ background: rgba(239,68,68,.12); color:#FFE2E2; border:1px solid rgba(239,68,68,.28) }

/* Grupo input + botón (newsletter) */
.input-group{
  display:flex; gap:10px; align-items:center;
}
.input-group > *{ flex: 1 1 auto }
.input-group .btn-cta{ flex: 0 0 auto }

/* ============ Footer pulido ============ */
.ud-footer .legal-links a{
  opacity:.85; transition: opacity .2s ease;
}
.ud-footer .legal-links a:hover{ opacity:1 }

/* ============ Utilidades de layout/espaciado ============ */
.container-narrow{ max-width: 980px; margin-inline: auto }
.container-tight{ max-width: 760px; margin-inline: auto }
.stack-sm > * + *{ margin-top: 8px }
.stack > * + *{ margin-top: 14px }
.stack-lg > * + *{ margin-top: 22px }

/* Chips de confianza/ventajas */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid var(--mitienda-border);
  font-size: var(--fs-sm); color:#E6F6F3;
}

/* ============ Animaciones (respeta reduced-motion) ============ */
@media (prefers-reduced-motion:no-preference){
  .fade-up{ opacity:0; transform: translateY(8px); animation: fadeUp .5s ease forwards }
  .delay-1{ animation-delay: .06s } .delay-2{ animation-delay: .12s } .delay-3{ animation-delay: .18s }
}
@keyframes fadeUp{ to{ opacity:1; transform:none } }

/* ============ Foco visible global reforzado ============ */
:focus-visible{
  outline: 3px solid var(--mitienda-teal);
  outline-offset: 2px;
  border-radius: 10px;
}

/* ============ Ajustes responsive ============ */
@media (max-width: 991.98px){
  .ud-hero{ padding-top: clamp(96px, 12vw, 120px) }
  .ud-single-pricing{ padding: 34px 22px }
}
@media (max-width: 575.98px){
  .ud-section-title h2{ font-size: clamp(22px, 7vw, 28px) }
  .ud-single-feature, .ud-single-testimonial{ padding: 18px }
}

/* ============ Modo superficie clara (sección blanca) ============ */
.light-surface .chip,
.light-surface .hero-meta .meta-chip{
  background:#000000; border-color:#E2E8F0; color:#0b2239;
}
.light-surface .ud-single-testimonial{ border-left-color: var(--mitienda-green) }

/* ===== Cobertura / Red Argentina ===== */
.ud-coverage .ar-network-wrapper{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--mitienda-border);
  border-radius: var(--mitienda-radius-lg);
}

#ar-network .ar-node {
  fill: var(--mitienda-teal);
  stroke: rgba(255,255,255,.65);
  stroke-width: .8;
  filter: drop-shadow(0 0 10px rgba(20,209,197,.35));
  transition: transform .18s ease, opacity .18s ease;
}

#ar-network .ar-node:hover { transform: scale(1.08) }

#ar-network .ar-label {
  font-family: var(--mitienda-font);
  font-size: 11px;
  fill: rgba(0, 0, 0, 0.85);
  pointer-events: none;
  user-select: none;
}

@media (max-width: 575.98px){
  #ar-network .ar-label { display: none; } /* limpio en pantallas chicas */
}

/* Animación de trazo para edges */
@keyframes drawEdge {
  to { stroke-dashoffset: 0; }
}

/* Respeta reduce motion */
@media (prefers-reduced-motion: reduce){
  #ar-network .ar-edge { animation: none !important; stroke-dasharray: 0 !important; }
}

/* ===== Mapa real: estilo de provincias ===== */
#ar-network #ar-map path,
#ar-network #ar-map polygon {
  fill: url(#provFill);
  stroke: rgba(255,255,255,.25);
  stroke-width: 1;
  transition: fill .18s ease, stroke .18s ease, filter .18s ease;
}

#ar-network #ar-map path:hover,
#ar-network #ar-map polygon:hover {
  stroke: rgba(57,163,255,.6);
  filter: drop-shadow(0 0 10px rgba(57,163,255,.25));
}

/* Nodos y etiquetas (reusamos tus estilos) */
#ar-network .ar-node {
  fill: var(--mitienda-teal);
  stroke: rgba(255,255,255,.65);
  stroke-width: .8;
  filter: drop-shadow(0 0 10px rgba(20,209,197,.35));
  transition: transform .18s ease, opacity .18s ease;
}
#ar-network .ar-node:hover { transform: scale(1.08) }
#ar-network .ar-label { font-family: var(--mitienda-font); font-size: 11px; fill: rgba(255,255,255,.85); pointer-events:none; user-select:none; }
@media (max-width: 575.98px){ #ar-network .ar-label { display: none; } }

/* Animación de los edges */
@keyframes drawEdge { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce){
  #ar-network .ar-edge { animation: none !important; stroke-dasharray: 0 !important; }
}

/* === Features (SaaS premium) ============================================ */
:root{
  /* tonos suaves para superficies oscuras */
  --feature-card-bg: rgba(255,255,255,.02);
  --feature-card-brd: rgba(255,255,255,.08);
  --feature-card-hover: rgba(255,255,255,.04);
}

/* Utilidad de texto tenue reutilizable */
.text-muted-80{ color: rgba(0, 0, 0, 0.8); }

/* Tarjeta de feature con borde degradado sutil */
.feature-card{
  position: relative;
  border-radius: 16px;
  background: var(--feature-card-bg);
  border: 1px solid var(--feature-card-brd);
  padding: 16px 16px 18px;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.feature-card:hover{
  transform: translateY(-3px);
  background: var(--feature-card-hover);
  box-shadow: 0 14px 32px rgba(0,0,0,.28);
  border-color: rgba(255,255,255,0.14);
}
/* Bisel degradado periférico (no llena el fondo) */
.feature-card::before{
  content:"";
  position:absolute; inset:0; border-radius:16px; padding:1px;
  background: linear-gradient(135deg, rgba(20,209,197,.6), rgba(57,163,255,.6)); /* teal→blue */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.35; pointer-events:none;
  transition: opacity .18s ease;
}
.feature-card:hover::before{ opacity:.65; }

/* Icono en medallón (escanea rápido cada beneficio) */
.feature-icon{
  width:48px; height:48px; display:grid; place-items:center;
  font-size:24px; line-height:1;
  border-radius:50%;
  background: radial-gradient(120% 120% at 30% 20%, rgba(20,209,197,.25), rgba(57,163,255,.20));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 0 24px rgba(20,209,197,.15), 0 6px 20px rgba(0,0,0,.25);
}

/* Chips (badges) para estado: Nuevo / Próx. */
.chip{
  position:absolute; top:10px; right:10px;
  font-size:.72rem; padding:.15rem .45rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.25);
  color:#000000;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.chip-new{
  border-color: rgba(20,209,197,.6);
  background: linear-gradient(90deg, rgba(20,209,197,.25), rgba(57,163,255,.25));
}
.chip-soon{ opacity:.85; }

/* Focus visible para teclado (a11y) */
.feature-card:focus-within{
  outline: 3px solid rgba(57,163,255,.55);
  outline-offset: 2px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .feature-card, .feature-card::before{ transition:none; }
}

/* Título de bloque features más firme */
.ud-section-title h2{ font-weight: 800; letter-spacing: .2px; }

/* Íconos Lucide: heredan color del contenedor */
.feature-icon { color: #08f300; }
.feature-card:hover .feature-icon { color: var(--mitienda-teal); }

/* Ajuste fino para SVGs generados por Lucide */
.feature-icon svg{
  display:block;
  width: 26px; height: 26px;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ===== Hero: sub-sub título (kicker) ===== */
.hero-subsub{
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: var(--fs-sm);            /* más chico que .lead */
  line-height: var(--leading-tight);
  color: #E6F6F3;                     /* alto contraste en fondo oscuro */
  opacity: .98;
  margin-top: .35rem;
  margin-bottom: clamp(12px, 2.5vw, 28px); /* << separa de los CTAs */
}

/* Punto de acento con glow suave (marca MiTienda) */
.hero-subsub::before{
  content:"";
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(90deg, var(--mitienda-teal), var(--mitienda-blue-ac));
  box-shadow: 0 0 0 4px rgba(2, 248, 105, 0.747);
  flex: 0 0 auto;
}

/* Variante compacta en mobile si querés */
@media (max-width: 575.98px){
  .hero-subsub{ letter-spacing: .07em; font-size: calc(var(--fs-sm) * .95); }
}

/* =========================================================
   Sección: Nuestros servicios (scoped a #servicios)
   Framework: Bootstrap 5 (Play)
   Branding: Navy & Teal — usa vars existentes si están definidas
   ========================================================= */

/* ===== Fondo degradé navy -> blanco con “auroras” teal/azul ===== */
#servicios{
  background: linear-gradient(to bottom, #081E33 0%, #F7FAFD 100%);
  background-repeat: no-repeat;
  background-image:
    radial-gradient(40rem 25rem at 25% 18%, rgba(20,209,197,.18) 0%, transparent 60%),
    radial-gradient(36rem 28rem at 75% 82%, rgba(57,163,255,.15) 0%, transparent 70%);
}

/* ===== Texto sobre fondo navy en el encabezado ===== */
#servicios .text-muted-80{ color: rgba(0, 0, 0, 0.82) !important; }
#servicios header .subtitle{ color: #000000; }

/* ===== Chips “stat” del header (no rompen badges .chip absolutas) ===== */
#servicios .chip{
  position: static !important;  /* evita position:absolute de otras variantes */
  display: inline-flex; align-items: center; gap:.4rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.45);
  background: transparent;
  color: #0c0c0c;
  font-size: .9rem;
  line-height: 1.2;
  box-shadow: var(--shadow-inset, inset 0 0 0 0 rgba(0,0,0,0)); /* respeta token si existe */
}
#servicios .chip::before{
  content:""; width:.5rem; height:.5rem; border-radius:50%;
  background: var(--mitienda-teal, #14D1C5);
  display:inline-block;
}

/* ===== Prueba social (glass suave) ===== */
#servicios .social-proof{
  display:inline-block;
  padding:.35rem .75rem;
  border-radius:.5rem;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(4px);
  color:#080808;
}
#servicios .social-proof i[data-lucide]{
  width:1rem; height:1rem; stroke-width:1.8; vertical-align:-2px;
}

/* ===== Separador luminoso ===== */
#servicios .sep{
  width:110px; height:2px; border:0;
  background: linear-gradient(90deg, var(--mitienda-teal,#14D1C5), var(--mitienda-blue-ac,#39A3FF));
  opacity:.6; margin-inline:auto;
}

/* ===== Cards (glass + barra superior de acento gradiente) ===== */
#servicios .surface-glass{
  /* respeta tu clase global, acá reforzamos sólo dentro de la sección */
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.64);
  border-radius: .75rem;
  box-shadow: var(--shadow-1, 0 2px 6px rgba(0,0,0,.10));
  position: relative;
  overflow: clip;
  color: #0E2235; /* texto oscuro legible sobre fondo claro */
}
#servicios .surface-glass::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:4px;
  background: linear-gradient(90deg, var(--mitienda-teal,#14D1C5), var(--mitienda-blue-ac,#39A3FF));
}
#servicios .feature-card:hover,
#servicios .section-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-2, 0 4px 12px rgba(0,0,0,.15));
}
#servicios .feature-card,
#servicios .section-card{
  transition: transform .2s ease, box-shadow .2s ease;
}
/* Texto muted dentro de cards claras */
#servicios .surface-glass .text-muted-80{ color: rgba(0,0,0,.62) !important; }

/* ===== Iconografía Lucide coherente ===== */
#servicios i[data-lucide]{
  width: 1.5rem;  /* ~24px */
  height: 1.5rem;
  stroke-width: 1.6;
}

/* ===== Badge circular para iconos (mejora de legibilidad) ===== */
#servicios .icon-badge{
  display:inline-grid; place-items:center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: linear-gradient(180deg, rgba(20,209,197,.15), rgba(57,163,255,.10));
  border: 1px solid rgba(0,0,0,.08);
  margin-right: .5rem;
}
#servicios .icon-badge > i[data-lucide]{
  width: 1.1rem; height: 1.1rem; stroke-width: 1.8;
  color: #0E2235;
}

/* ===== Grid de funcionalidades (panel admin) ===== */
#servicios .feature-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  gap: .5rem 1rem;
}

/* ===== Timeline (vertical en mobile, horizontal en md+) ===== */
#servicios .timeline-list{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 2.25rem; /* espacio para línea/steps en mobile */
}
#servicios .timeline-list::before{
  /* Línea vertical en mobile */
  content:"";
  position:absolute;
  top:.75rem; bottom:.75rem; left: .9rem;
  width:2px; background: rgba(0,0,0,.15);
}
#servicios .timeline-list li{
  display:flex; align-items:center;
}
#servicios .timeline-list .step-number{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.5rem; height:1.5rem;
  margin-left:-2.25rem; /* se asienta sobre la línea vertical */
  background: var(--mitienda-teal,#14D1C5);
  color:#fff; font-weight:700; font-size:.75rem;
  border-radius:999px; flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(20,209,197,.15);
}

/* Horizontal a partir de md */
@media (min-width: 768px){
  #servicios .timeline-list{
    padding-left: 0; gap: 0;
    flex-direction: row; align-items: center; justify-content: space-between;
  }
  #servicios .timeline-list::before{
    /* Línea horizontal pasando por el centro */
    top: 50%; left: 1.5rem; right: 1.5rem; height:2px; width:auto;
    background: rgba(0,0,0,.15);
  }
  #servicios .timeline-list li{
    flex: 1 1 0; justify-content: center;
  }
  #servicios .timeline-list .step-number{
    margin-left: 0; /* ya no precisamos compensar */
    box-shadow: 0 0 0 3px rgba(20,209,197,.12);
  }
}

/* ===== Comparativo + Stats ===== */
#servicios .compare{ color:#0E2235; }
#servicios .compare-card{
  background: rgba(255,255,255,.78);
  border:1px solid rgba(0,0,0,.06);
  border-radius:.75rem;
  box-shadow: var(--shadow-1, 0 2px 6px rgba(0,0,0,.08));
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#servicios .compare-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-2, 0 4px 12px rgba(0,0,0,.12));
}

/* Etiquetas de encabezado del comparativo */
#servicios .tag-good,
#servicios .tag-neutral{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.2rem .55rem; border-radius:999px; font-size:.8rem; line-height:1.1;
  border:1px solid transparent;
}
#servicios .tag-good{
  background: linear-gradient(90deg, rgba(20,209,197,.12), rgba(57,163,255,.10));
  border-color: rgba(20,209,197,.35);
  color:#0E2235;
}
#servicios .tag-neutral{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.08);
  color:#0E2235;
}

/* Checks y X del comparativo */
#servicios .icon-good{
  width:1.1rem; height:1.1rem; stroke-width:2;
  color: var(--mitienda-teal,#14D1C5); flex:0 0 auto; margin-top:.15rem;
}
#servicios .icon-bad{
  width:1.1rem; height:1.1rem; stroke-width:2;
  color: rgba(220, 53, 69, .9); /* rojo accesible */
  flex:0 0 auto; margin-top:.15rem;
}

/* Stats bar */
#servicios .stats{
  display:grid; gap:.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 576px){
  #servicios .stats{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
#servicios .stat{
  display:flex; align-items:center; gap:.6rem;
  padding:.75rem 1rem; border-radius:.75rem;
  background: rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow-1, 0 2px 6px rgba(0,0,0,.06));
  color:#0E2235;
}
#servicios .stat i[data-lucide]{
  width:1.25rem; height:1.25rem; stroke-width:1.8;
  color:#0E2235; opacity:.9;
}
#servicios .stat strong{ font-size:1rem; }
#servicios .stat span{ opacity:.75; }

/* ===== Trust footer (sellos de confianza) ===== */
#servicios .trust-footer{ color:#0E2235; }
#servicios .trust-badges{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .75rem 1rem;
}
@media (min-width: 768px){
  #servicios .trust-badges{
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
}
#servicios .trust-badge{
  display:flex; align-items:center; gap:.5rem;
  font-size:.95rem; line-height:1.25;
  white-space: nowrap;
}
#servicios .trust-badge .icon-badge{
  width: 2rem; height: 2rem;
  background: linear-gradient(180deg, rgba(20,209,197,.15), rgba(57,163,255,.10));
  border: 1px solid rgba(0,0,0,.08);
}
#servicios .trust-badge .icon-badge i[data-lucide]{
  width: 1.1rem; height: 1.1rem; stroke-width:1.8; color:#0E2235;
}

/* ===== FAQ accesible ===== */
#servicios .faq-card{ color:#0E2235; }
#servicios .faq-item + .faq-item{ margin-top:.5rem; }
#servicios .faq-item details{
  border:1px solid rgba(0,0,0,.08);
  border-radius:.6rem;
  background: rgba(255,255,255,.75);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
#servicios .faq-item details[open]{
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow-1, 0 2px 6px rgba(0,0,0,.08));
}
#servicios .faq-item summary{
  list-style:none; cursor:pointer; user-select:none;
  padding:.85rem 1rem;
  display:flex; align-items:center; justify-content:space-between;
  position:relative;
}
#servicios .faq-item summary::-webkit-details-marker{ display:none; }
#servicios .faq-item .q{
  display:flex; align-items:center; gap:.5rem; font-weight:600;
}
#servicios .faq-item .q i[data-lucide]{
  width:1.25rem; height:1.25rem; stroke-width:1.8;
  color:#0E2235; opacity:.9;
}
/* Flecha indicadora (sin JS) */
#servicios .faq-item summary::after{
  content:"";
  width:.6rem; height:.6rem; margin-left:.75rem;
  border-right:2px solid rgba(0,0,0,.55);
  border-bottom:2px solid rgba(0,0,0,.55);
  transform: rotate(-45deg);
  transition: transform .2s ease, border-color .2s ease;
}
#servicios .faq-item details[open] summary::after{
  transform: rotate(45deg);
}
#servicios .faq-item .a{
  padding: 0 1rem 1rem 1rem;
  color: rgba(14,34,53,.9);
}
#servicios .faq-item summary:focus-visible{
  outline:3px dashed var(--mitienda-teal,#14D1C5);
  outline-offset:2px;
  border-radius:.6rem;
}

/* ===== CTA accesible ===== */
#servicios .btn-cta{ transition: transform .2s ease, box-shadow .2s ease; }
#servicios .btn-cta:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-2, 0 4px 12px rgba(0,0,0,.15));
}
#servicios a:focus-visible, #servicios button:focus-visible{
  outline: 3px dashed var(--mitienda-teal,#14D1C5);
  outline-offset: 2px;
}

/* ===== Sticky CTA (mobile) ===== */
#servicios .cta-sticky-bar{
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 1000;
  transform: translateY(110%);
  transition: transform .2s ease;
  padding: .5rem .75rem;
  /* glass + borde superior con acento */
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--mitienda-teal,#14D1C5), var(--mitienda-blue-ac,#39A3FF)) 1;
  /* safe areas y nav inferior si existiera */
  padding-bottom: calc(.5rem + env(safe-area-inset-bottom));
}
#servicios .cta-sticky-bar.is-visible{ transform: translateY(0); }
#servicios .cta-sticky-bar .text-trust{
  color: #0E2235; opacity:.8;
}

/* ===== Movimiento reducido ===== */
@media (prefers-reduced-motion: reduce){
  #servicios *{ transition:none !important; animation:none !important; }
  #servicios .feature-card:hover,
  #servicios .section-card:hover,
  #servicios .btn-cta:hover{
    transform:none !important; box-shadow: inherit !important;
  }
  #servicios .cta-sticky-bar{ transition:none !important; }
}



/* ============================
   Pricing — MiTienda (Bootstrap 5)
   Sección: #planes
   ============================ */

/* ===== Badge de descuento Pro ===== */
.badge-discount-pro{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .9rem;
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff4d4f 0%, #ff6a88 50%, #ff9068 100%);
  box-shadow: 0 6px 18px rgba(255,77,79,.35);
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* Icono */
.badge-discount-pro i{
  font-size: .9rem;
  opacity: .9;
}

/* Brillo animado */
.badge-discount-pro::after{
  content:"";
  position:absolute;
  top:0; left:-40%;
  width:40%; height:100%;
  background: linear-gradient(120deg, rgba(255,255,255,.5) 0%, transparent 60%);
  transform: skewX(-25deg);
  animation: shine 2.8s ease-in-out infinite;
}
@keyframes shine{
  0%{ left:-40%; }
  50%{ left:110%; }
  100%{ left:110%; }
}

/* Hover/focus con micro-animación */
.badge-discount-pro:hover,
.badge-discount-pro:focus{
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(255,77,79,.45);
  transition: all .25s ease;
}

/* ===== Plan Pro destacado ===== */
.plan-featured{
  /* borde degradé con “frame” suave */
  --mt-grad: conic-gradient(from 180deg at 50% 50%, #0D6EFD, #39A3FF, #14D1C5, #0D6EFD);
  position: relative;
  border: 1px solid rgba(13,110,253,.25) !important;
  box-shadow: 0 20px 50px -20px rgba(13,110,253,.45), 0 0 0 6px rgba(13,110,253,.08);
}
.plan-featured::before{
  /* marco degradé sutil */
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  padding:1px; /* grosor del marco */
  background: var(--mt-grad);
  -webkit-mask:
     linear-gradient(#000 0 0) content-box,
     linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  border-radius: calc(1rem + 1px);
  pointer-events:none;
}

/* Halo animado para captar mirada */
.plan-featured__halo{
  position:absolute; inset:-12%; z-index:-1; border-radius:28px;
  background: radial-gradient(40% 35% at 50% 0%, rgba(13,110,253,.25), transparent 60%),
              radial-gradient(50% 50% at 50% 100%, rgba(20,209,197,.18), transparent 70%);
  filter: blur(12px);
  animation: haloFloat 6s ease-in-out infinite alternate;
}
@keyframes haloFloat{
  0%{ transform: translateY(0); opacity:.9; }
  100%{ transform: translateY(6px); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .plan-featured__halo{ animation: none; }
}

/* Badge RECOMENDADO */
.plan-featured__badge{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  padding:.35rem .85rem;
  border-radius:999px;
  background:#0D6EFD; color:#fff;
  box-shadow:0 10px 24px rgba(13,110,253,.35);
  border:1px solid rgba(255,255,255,.35);
}

/* CTA del Pro un poco más grande */
.btn-cta-pro{
  padding:1rem 1.1rem;
  font-size:1.05rem;
  box-shadow: 0 12px 28px rgba(13,110,253,.38);
}

/* Reforzar contraste del descuento (si usás el badge-discount-pro anterior) */
.badge-discount-pro{
  margin-top:.5rem;
}

/* Reordenamiento: Pro primero en mobile, centrado en desktop ya está con order-* */