/* ============================================================
   COMPARATIVA RICA + FAQ EXTENDIDA
   Drop-in styles. Usa tokens globales de :root.
   ============================================================ */

/* ---------- Toggle Mensual / Anual ---------- */
.cr-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  margin:0 auto 56px;
  padding:4px;
  background:var(--glass);
  border:1px solid var(--bd2);
  border-radius:999px;
  backdrop-filter:blur(12px);
  isolation:isolate;
  width:fit-content;
  margin-left:auto;
  margin-right:auto;
}
.cr-toggle{display:flex;justify-content:center}
.cr-section-toggle-wrap{display:flex;justify-content:center}
.cr-toggle-btn{
  position:relative;z-index:2;
  appearance:none;border:none;background:transparent;cursor:pointer;
  padding:10px 22px;
  font:600 14px/1 'DM Sans',sans-serif;
  color:var(--g);
  border-radius:999px;
  transition:color .35s cubic-bezier(.16,1,.3,1);
  display:inline-flex;align-items:center;gap:8px;
  white-space:nowrap;
}
.cr-toggle-btn.is-active{color:#fff}
.cr-toggle-btn:focus-visible{outline:2px solid var(--o);outline-offset:3px}
.cr-toggle-pill{
  font:700 11px/1 'JetBrains Mono',monospace;
  background:rgba(255,255,255,.18);
  color:inherit;
  padding:4px 8px;
  border-radius:999px;
  letter-spacing:.02em;
}
.cr-toggle-btn.is-active .cr-toggle-pill{background:rgba(255,255,255,.28)}
.cr-toggle-thumb{
  position:absolute;z-index:1;
  top:4px;bottom:4px;
  left:4px;
  width:calc(50% - 4px);
  background:linear-gradient(135deg,var(--o),var(--od));
  border-radius:999px;
  box-shadow:0 6px 20px rgba(249,115,22,.35);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.cr-toggle[data-period="annual"] .cr-toggle-thumb{transform:translateX(100%)}

/* Centra el toggle en su línea */
#comparativa-rica > .container > .cr-toggle{display:flex}

/* ---------- Tabla rica ---------- */
.cr-wrap{
  background:linear-gradient(145deg,rgba(20,20,30,.5),rgba(10,10,18,.7));
  border:1px solid var(--bd);
  border-radius:24px;
  padding:8px;
  backdrop-filter:blur(15px);
  margin-bottom:48px;
  max-width:100%;
  overflow:hidden;
}
.cr-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:18px;
}
.cr-scroll:focus-visible{outline:2px solid var(--o);outline-offset:2px}
.cr-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-family:'DM Sans',sans-serif;
  min-width:760px;
}
.cr-table thead th{
  position:sticky;top:0;
  background:var(--bg2);
  text-align:center;
  padding:24px 18px;
  font-family:Syne,sans-serif;
  font-weight:700;
  font-size:15px;
  color:var(--w);
  border-bottom:1px solid var(--bd2);
  vertical-align:top;
  z-index:2;
}
.cr-table thead th.cr-col-feat{text-align:left;padding-left:24px}
.cr-table thead th.cr-col-us{
  background:linear-gradient(180deg,rgba(249,115,22,.12),rgba(249,115,22,.04));
  border-left:1px solid rgba(249,115,22,.4);
  border-right:1px solid rgba(249,115,22,.4);
  position:relative;
}
.cr-table thead th.cr-col-us::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--o),var(--od));
}
.cr-col-title{display:block;font-size:16px;letter-spacing:-.01em}
.cr-col-sub{
  display:block;
  margin-top:6px;
  font:500 12px/1.4 'JetBrains Mono',monospace;
  color:var(--g);
  font-weight:400;
}
.cr-col-us .cr-col-sub{color:var(--ob)}
.cr-table tbody td{
  padding:18px;
  border-bottom:1px solid var(--bd);
  font-size:14.5px;
  color:var(--w);
  vertical-align:middle;
  text-align:center;
  background:transparent;
  transition:background .25s cubic-bezier(.16,1,.3,1);
}
.cr-table tbody tr:last-child td{border-bottom:none}
.cr-table tbody td.cr-feat{
  text-align:left;
  font-weight:500;
  color:var(--w);
  padding-left:24px;
  min-width:240px;
}
.cr-feat-note{
  display:inline-block;margin-left:8px;
  font:600 11px/1 'JetBrains Mono',monospace;
  color:var(--o);
  background:rgba(249,115,22,.1);
  border:1px solid rgba(249,115,22,.25);
  padding:3px 7px;border-radius:6px;
  letter-spacing:.02em;
}
.cr-table tbody tr:hover td{background:rgba(249,115,22,.04)}
.cr-table tbody tr:hover td.cr-col-us,
.cr-table tbody tr:hover td:nth-child(2){background:rgba(249,115,22,.07)}
.cr-table tbody td.cr-cell{position:relative}
.cr-table tbody td:nth-child(2){
  border-left:1px solid rgba(249,115,22,.25);
  border-right:1px solid rgba(249,115,22,.25);
  background:rgba(249,115,22,.025);
}

/* Cell marks */
.cr-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  font-weight:700;font-size:14px;
  margin-right:8px;
  vertical-align:middle;
}
.cr-mark-yes{
  background:rgba(34,197,94,.15);
  color:#22C55E;
  border:1px solid rgba(34,197,94,.3);
}
.cr-cell.cr-yes:not(:nth-child(2)) .cr-mark-yes{
  background:rgba(34,197,94,.1);
  color:#22C55E;
}
.cr-table tbody td:nth-child(2) .cr-mark-yes{
  background:linear-gradient(135deg,var(--o),var(--od));
  color:#fff;
  border:none;
  box-shadow:0 2px 8px rgba(249,115,22,.35);
}
.cr-mark-extra{
  background:rgba(234,179,8,.12);
  color:#EAB308;
  border:1px solid rgba(234,179,8,.3);
  font-size:18px;line-height:1;
}
.cr-mark-no{
  background:rgba(100,116,139,.12);
  color:var(--gd);
  border:1px solid rgba(100,116,139,.25);
  font-size:16px;line-height:1;
}
.cr-cell-text{
  font-size:13px;
  color:var(--g);
  vertical-align:middle;
  font-weight:500;
  position:relative;
}
.cr-cell.cr-yes .cr-cell-text{color:var(--w)}

/* Tooltip on extra */
.cr-tip{
  position:absolute;
  bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(4px);
  background:var(--bg3);
  border:1px solid var(--bd2);
  color:var(--w);
  padding:8px 12px;
  font:500 12px/1.4 'DM Sans',sans-serif;
  border-radius:8px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  z-index:5;
}
.cr-tip::after{
  content:"";
  position:absolute;
  top:100%;left:50%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:var(--bg3);
}
.cr-cell-text:hover .cr-tip,
.cr-mark-extra:hover + .cr-cell-text .cr-tip,
.cr-cell:hover .cr-tip{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* ---------- Trust badges ---------- */
.cr-badges{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:48px;
}
.cr-badge{
  display:flex;align-items:flex-start;gap:14px;
  padding:20px;
  background:linear-gradient(145deg,rgba(20,20,30,.5),rgba(10,10,18,.7));
  border:1px solid var(--bd);
  border-radius:16px;
  backdrop-filter:blur(12px);
  transition:border-color .3s,transform .3s;
}
.cr-badge:hover{
  border-color:rgba(249,115,22,.3);
  transform:translateY(-2px);
}
.cr-badge-ico{
  flex-shrink:0;
  width:42px;height:42px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(249,115,22,.12),rgba(249,115,22,.04));
  border:1px solid rgba(249,115,22,.25);
  color:var(--o);
}
.cr-badge-ico svg{width:22px;height:22px}
.cr-badge-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.cr-badge-text strong{
  font-family:Syne,sans-serif;
  font-size:14.5px;
  font-weight:700;
  color:var(--w);
  letter-spacing:-.01em;
}
.cr-badge-text span{
  font-size:13px;
  color:var(--g);
  line-height:1.45;
}

/* ---------- FAQ Search ---------- */
.fx-search-wrap{
  max-width:680px;
  margin:0 auto 36px;
}
.fx-search{
  position:relative;
  display:flex;align-items:center;
  background:linear-gradient(145deg,rgba(20,20,30,.5),rgba(10,10,18,.7));
  border:1px solid var(--bd2);
  border-radius:14px;
  padding:0 16px;
  backdrop-filter:blur(12px);
  transition:border-color .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1);
}
.fx-search:focus-within{
  border-color:rgba(249,115,22,.5);
  box-shadow:0 0 0 4px rgba(249,115,22,.12);
}
.fx-search-ico{
  flex-shrink:0;
  width:18px;height:18px;
  color:var(--g);
  margin-right:10px;
}
.fx-search:focus-within .fx-search-ico{color:var(--o)}
.fx-search-input{
  flex:1;min-width:0;
  appearance:none;background:transparent;border:none;outline:none;
  color:var(--w);
  font:500 15px/1 'DM Sans',sans-serif;
  padding:16px 0;
}
.fx-search-input::placeholder{color:var(--gd)}
.fx-search-input::-webkit-search-cancel-button{display:none}
.fx-search-clear{
  appearance:none;background:transparent;border:none;cursor:pointer;
  width:28px;height:28px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--g);font-size:20px;font-weight:300;line-height:1;
  transition:background .2s,color .2s;
  margin-left:8px;
}
.fx-search-clear:hover{background:rgba(255,255,255,.06);color:var(--w)}
.fx-search-clear:focus-visible{outline:2px solid var(--o);outline-offset:2px}
.fx-counter{
  margin-top:12px;
  font:500 13px/1.4 'JetBrains Mono',monospace;
  color:var(--g);
  text-align:center;
  min-height:18px;
}

/* ---------- FAQ items extra (búsqueda) ---------- */
.fx-list .faq-item{transition:border-color .3s cubic-bezier(.16,1,.3,1),opacity .3s,transform .3s}
.fx-list .faq-item.faq-hidden{display:none}
.fx-list .faq-q mark{
  background:rgba(249,115,22,.22);
  color:var(--w);
  padding:1px 3px;
  border-radius:3px;
  font-weight:700;
}
.fx-empty{
  max-width:680px;margin:24px auto 0;
  padding:32px 24px;
  text-align:center;
  background:linear-gradient(145deg,rgba(20,20,30,.5),rgba(10,10,18,.7));
  border:1px dashed var(--bd2);
  border-radius:14px;
  color:var(--g);
  font-size:14.5px;
}

/* ---------- Light mode ---------- */
html[data-theme="light"] .cr-toggle{
  background:rgba(15,23,42,.04);
  border-color:rgba(15,23,42,.1);
}
html[data-theme="light"] .cr-toggle-btn{color:#475569}
html[data-theme="light"] .cr-toggle-btn.is-active{color:#fff}

html[data-theme="light"] .cr-wrap{
  background:#FFFFFF;
  border-color:rgba(15,23,42,.08);
}
html[data-theme="light"] .cr-table thead th{
  background:#FAFAF7;
  color:#0F172A;
  border-bottom-color:rgba(15,23,42,.1);
}
html[data-theme="light"] .cr-table thead th.cr-col-us{
  background:linear-gradient(180deg,rgba(249,115,22,.1),rgba(249,115,22,.02));
}
html[data-theme="light"] .cr-col-sub{color:#64748B}
html[data-theme="light"] .cr-col-us .cr-col-sub{color:#C2410C}
html[data-theme="light"] .cr-table tbody td{
  color:#0F172A;
  border-bottom-color:rgba(15,23,42,.06);
}
html[data-theme="light"] .cr-table tbody tr:hover td{background:rgba(249,115,22,.05)}
html[data-theme="light"] .cr-table tbody td:nth-child(2){
  background:rgba(249,115,22,.03);
  border-left-color:rgba(249,115,22,.3);
  border-right-color:rgba(249,115,22,.3);
}
html[data-theme="light"] .cr-cell-text{color:#475569}
html[data-theme="light"] .cr-cell.cr-yes .cr-cell-text{color:#0F172A}
html[data-theme="light"] .cr-mark-no{color:#94A3B8;background:rgba(15,23,42,.05);border-color:rgba(15,23,42,.1)}

html[data-theme="light"] .cr-tip{
  background:#0F172A;
  border-color:rgba(15,23,42,.2);
  color:#F8FAFC;
}
html[data-theme="light"] .cr-tip::after{border-top-color:#0F172A}

html[data-theme="light"] .cr-badge{
  background:#FFFFFF;
  border-color:rgba(15,23,42,.08);
}
html[data-theme="light"] .cr-badge:hover{border-color:rgba(249,115,22,.4)}
html[data-theme="light"] .cr-badge-text strong{color:#0F172A}
html[data-theme="light"] .cr-badge-text span{color:#475569}

html[data-theme="light"] .fx-search{
  background:#FFFFFF;
  border-color:rgba(15,23,42,.1);
}
html[data-theme="light"] .fx-search:focus-within{
  border-color:rgba(249,115,22,.5);
  box-shadow:0 0 0 4px rgba(249,115,22,.1);
}
html[data-theme="light"] .fx-search-input{color:#0F172A}
html[data-theme="light"] .fx-search-input::placeholder{color:#94A3B8}
html[data-theme="light"] .fx-search-ico{color:#64748B}
html[data-theme="light"] .fx-search:focus-within .fx-search-ico{color:#C2410C}
html[data-theme="light"] .fx-search-clear{color:#64748B}
html[data-theme="light"] .fx-search-clear:hover{background:rgba(15,23,42,.05);color:#0F172A}
html[data-theme="light"] .fx-counter{color:#64748B}
html[data-theme="light"] .fx-list .faq-q mark{color:#0F172A}
html[data-theme="light"] .fx-empty{
  background:#FFFFFF;
  border-color:rgba(15,23,42,.15);
  color:#475569;
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .cr-badges{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .cr-table{min-width:680px}
  .cr-table thead th,
  .cr-table tbody td{padding:14px 12px;font-size:13.5px}
  .cr-table tbody td.cr-feat{padding-left:16px;min-width:200px}
  .cr-table thead th.cr-col-feat{padding-left:16px}
  .cr-feat{
    position:sticky;left:0;
    background:var(--bg2);
    z-index:1;
  }
  html[data-theme="light"] .cr-feat{background:#FAFAF7}
  .cr-table thead th.cr-col-feat{
    position:sticky;left:0;
    background:var(--bg2);
    z-index:3;
  }
  html[data-theme="light"] .cr-table thead th.cr-col-feat{background:#FAFAF7}
  .cr-tip{font-size:11px;padding:6px 10px}
  .cr-mark{width:22px;height:22px;font-size:12px;margin-right:6px}
  .cr-cell-text{font-size:12px}
}
@media (max-width:560px){
  .cr-badges{grid-template-columns:1fr}
  .cr-toggle-btn{padding:9px 16px;font-size:13px}
  .fx-search-input{font-size:14px;padding:14px 0}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .cr-toggle-thumb,
  .cr-toggle-btn,
  .cr-tip,
  .cr-badge,
  .fx-search,
  .fx-list .faq-item,
  .faq-icon,
  .faq-a{transition:none !important}
  .fx-list .faq-item.open .faq-a{transition:none !important}
}