.card{background:#fff;border-radius:16px;box-shadow:0 2px 12px rgba(0,0,0,.06);padding:24px}
    .kpi{border-radius:16px}
    .pill{border:1px solid #e2e8f0;border-radius:12px;padding:8px 10px;font-size:12px}
    .pill.active{border-color:#6366f1;background:#eef2ff;color:#4338ca}
    .btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:12px;padding:.6rem .9rem;font-weight:600}
    .btn-ghost{background:#fff;color:#0f172a;box-shadow:0 1px 6px rgba(0,0,0,.08)}
    .btn-ghost:hover{box-shadow:0 3px 10px rgba(0,0,0,.12)}
    .btn-primary{background:#10b981;color:#fff}
    .btn-primary:hover{filter:brightness(.95)}
    .navlink{padding: 0.5rem 0.75rem;
      border-radius: 0.5rem;
      font-size: 0.875rem;
      font-weight: 500;}
    .navlink.active{background:#eef2ff;color:#3730a3;font-weight:700}
    .muted{color:#64748b}
    .icon-slot{display:inline-block;width:20px;height:20px;vertical-align:middle;opacity:.85}
    /* Estilo para etiquetas deshabilitadas */
    /* Estilo para etiquetas deshabilitadas */
    .disabled-label {
      color: #94a3b8; /* Tailwind slate-400 */
      cursor: not-allowed;
    }

 /* KPI fijo arriba en todas las pantallas */
    .kpi-sticky {
      position: fixed;
      top: 70px; /* Después del header */
      left: 16px;
      right: 16px;
      width: auto;
      z-index: 998;
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
      transition: all 0.3s ease;
    }

    /* Grid responsive del KPI */
    .kpi-sticky .grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 0.5rem;
      text-align: center;
    }

    .kpi-sticky .grid > div {
      padding: 0.5rem 0.25rem;
    }

    .kpi-sticky .text-2xl {
      font-size: 1.25rem;
    }

    .kpi-sticky .text-sm {
      font-size: 0.75rem;
    }

 /* Margen superior para evitar que tape contenido - FORZADO */
    body .main-with-sticky {
      padding-top: 120px !important;
    }
    /* Ajustes para desktop */
    @media (min-width: 1024px) {
      .kpi-sticky {
        top: 80px;
        left: 24px;
        right: 24px;
        box-shadow: 0 6px 25px rgba(0,0,0,0.18);
      }
      
      .kpi-sticky .grid {
        gap: 1rem;
      }

      .kpi-sticky .grid > div {
        padding: 0.75rem 0.5rem;
      }

      .kpi-sticky .text-2xl {
        font-size: 1.5rem;
      }

      .kpi-sticky .text-sm {
        font-size: 0.875rem;
      }
      
       body .main-with-sticky {
        padding-top: 160px !important;
      }
    }

    /* Para pantallas extra grandes, centrar el KPI */
    @media (min-width: 1280px) {
      .kpi-sticky {
        left: 50%;
        right: auto;
        width: 800px;
        transform: translateX(-50%);
      }
    }

    /* En tablets, mantener comportamiento normal */
    @media (min-width: 768px) and (max-width: 1023px) {
      .main-with-sticky {
        padding-right: 0;
      }
    }


    /* Cards de análisis a la misma altura - simple */
    @media (min-width: 1024px) {
      .grid.items-stretch .analysis-card {
        display: flex;
        flex-direction: column;
      }
      
      .analysis-card .space-y-3 {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }

  
/* FAQ Styles - MEJORADOS: más minimalistas y delicados */
        .faq-container {
            background: #fff;
            border-radius: 20px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
            border: 1px solid rgba(0, 0, 0, 0.04);
            max-width: 800px;
            margin: 0 auto;
        }

        .faq-item {
            border-bottom: 1px solid rgba(0, 0, 0, 0.04);
            transition: all 0.2s ease;
        }

        .faq-item:last-child {
            border-bottom: none;
        }

        .faq-item:hover {
            background-color: rgba(248, 250, 252, 0.5);
        }

        .faq-summary {
            padding: 1.5rem 2rem;
            cursor: pointer;
            font-weight: 500;
            color: #334155;
            font-size: 0.95rem;
            line-height: 1.5;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: color 0.2s ease;
        }

        .faq-summary:hover {
            color: #1e293b;
        }

        .faq-summary::after {
            content: '+';
            font-size: 1.2rem;
            color: #94a3b8;
            font-weight: 300;
            transition: all 0.3s ease;
            min-width: 20px;
            text-align: center;
        }

        .faq-item[open] .faq-summary::after {
            content: '−';
            color: #64748b;
            transform: rotate(180deg);
        }

        .faq-content {
            padding: 0 2rem 1.5rem 2rem;
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.7;
            margin-top: -0.5rem;
        }

        .faq-content a {
            color: #4f46e5;
            font-weight: 600;
            text-decoration: none;
            position: relative;
            padding: 2px 4px;
            border-radius: 4px;
            transition: all 0.3s ease;
            background: linear-gradient(to right, rgba(79, 70, 229, 0.08) 0%, rgba(79, 70, 229, 0.08) 100%);
            background-size: 0% 100%;
            background-repeat: no-repeat;
            background-position: left center;
        }

        .faq-content a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 4px;
            right: 4px;
            height: 2px;
            background: linear-gradient(to right, #4f46e5, #7c3aed);
            border-radius: 1px;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.3s ease;
        }

        .faq-content a:hover {
            color: #3730a3;
            background-size: 100% 100%;
            transform: translateY(-1px);
        }

        .faq-content a:hover::after {
            transform: scaleX(1);
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .faq-summary {
                padding: 1.25rem 1.5rem;
                font-size: 0.9rem;
            }

            .faq-content {
                padding: 0 1.5rem 1.25rem 1.5rem;
                font-size: 0.85rem;
            }
        }

/* ====== FIXES sin tocar HTML ====== */

/* 1) KPI de arriba con puntas redondeadas visibles */
.kpi-sticky{
  border-radius:16px;       /* redondeado como el resto */
  overflow:hidden;          /* muestra el degradé redondeado */
}

/* 2) Igualar altura de tarjetas (solo desktop) */
@media (min-width:1024px){
  .grid.items-stretch .analysis-card{
    display:flex;           /* ya lo tenías, lo reforzamos */
    flex-direction:column;
    height:100%;            /* esto faltaba para estirar al mismo alto */
  }
  .analysis-card .space-y-3{
    flex:1;                 /* que el contenido llene la tarjeta */
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }
}

/* 3) SOLO MÓVIL: tarjeta(s) de resultados compactas y sin desborde */
@media (max-width:640px){
  /* compactar la tarjeta (no cambia desktop) */
  .analysis-card{
    padding:16px !important;     /* antes ~24px */
  }
  .analysis-card h3{
    font-size:1rem !important;   /* título un poco más chico */
    margin-bottom:.5rem !important;
  }
  .analysis-card .p-3{
    padding:10px !important;     /* filas más compactas */
  }
  .analysis-card .text-xl,
  .analysis-card .font-bold.text-xl{
    font-size:1.05rem !important; /* números grandes un toque más chicos */
  }

  /* clave para evitar que $1.000.000 empuje y se salga */
  .analysis-card .flex{
    min-width:0;                 /* permite que el contenido se encoja */
    gap:8px;                     /* aire entre label y valor */
    flex-wrap:wrap;              /* autoriza salto de línea */
  }
  /* el valor de la derecha puede saltar abajo y partirse */
  .analysis-card .flex > span:last-child,
  #basePrice, #finalUnit, #totalInvest,
  #revUnit, #unitProfit, #totalRevenue, #totalProfit{
    flex:1 1 100%;               /* toma toda la línea abajo si hace falta */
    text-align:right;
    overflow-wrap:anywhere;      /* corta números largos ($1.000.000) */
    word-break:break-word;       /* fallback */
    line-height:1.2;
  }

  /* (opcional) KPI más chico para que nunca desborde en celu */
  .kpi-sticky .text-2xl{ font-size:1.05rem !important; }
  .kpi-sticky .text-sm{  font-size:.70rem  !important; }
}

/* =========================
   DESKTOP: KPI alineado a la columna derecha
   y tarjetas sin espacio extra arriba
   (no se toca el HTML)
   ========================= */
@media (min-width:1024px){
  /* 1) El KPI deja de ser fixed y pasa a sticky dentro de su columna.
        Así toma exactamente el ancho de esa columna y respeta el flujo. */
  .kpi-sticky{
    position: sticky !important;
    top: 80px;            /* queda visible al hacer scroll */
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    transform: none !important;  /* por si tenías translateX en XL */
    margin: 0 0 12px 0;          /* un respiro con las tarjetas */
  }

  /* 2) Quitamos el padding-top global que habías agregado para el KPI fijo.
        Como ahora es sticky, ya no hace falta empujar el contenido hacia abajo. */
  body .main-with-sticky{
    padding-top: 0 !important;
  }

  /* 3) Las dos tarjetas de la derecha a la MISMA altura (refuerzo). */
  .grid.items-stretch .analysis-card{
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .analysis-card .space-y-3{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

/* (opcional) XL: si antes centrabas el KPI con un ancho fijo,
   lo anulamos para que siga coincidiendo con la columna derecha */
@media (min-width:1280px){
  .kpi-sticky{
    left: auto !important;
    right: auto !important;
    width: 100% !important;
  }
}