/* Hocico Phone — Página Tarifas · clara premium */
.tf-page{ background:#fff; }

/* hero */
.tf-hero{ text-align:center; padding:clamp(40px,7vw,56px) clamp(18px,5vw,56px) 12px;
  background:radial-gradient(60% 60% at 50% 0%, var(--hp-green-50) 0%, transparent 60%); }
.tf-eyebrow{ display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border-radius:999px; white-space:nowrap;
  background:#fff; border:1px solid var(--hp-green-100); font-size:12.5px; font-weight:700; color:var(--hp-green-700);
  box-shadow:0 4px 14px rgba(42,159,132,.08); }
.tf-h1{ font-family:var(--font-display); font-weight:800; font-size:clamp(32px,8.5vw,58px); line-height:1.04; letter-spacing:-.03em; margin:22px 0 0; color:var(--hp-ink); }
.tf-h1-em{ color:var(--hp-green); }
.tf-lede{ font-size:17px; line-height:1.6; color:var(--hp-graphite); margin:18px auto 0; max-width:540px; }

/* cards */
.tf-cards-wrap{ padding:40px 56px 20px; }
.tf-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1180px; margin:0 auto; opacity:1; animation:tffade .4s ease; }
.tf-cards-multi{ grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:1200px){ .tf-cards-multi{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px){ .tf-cards-multi{ grid-template-columns:repeat(2,1fr); } }
.tf-cat-tabs{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:26px; }
/* comparador selectivo */
.tf-cmp-pick{ max-width:1080px; margin:0 auto 26px; text-align:center; }
.tf-cmp-pick-l{ display:block; font-size:13px; font-weight:600; color:var(--hp-slate); margin-bottom:14px; }
.tf-cmp-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }
.tf-cmp-chip{ display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:999px; cursor:pointer; font-family:inherit;
  font-size:13px; font-weight:700; color:var(--hp-graphite); background:#fff; border:1px solid var(--hp-mist); transition:all .16s; white-space:nowrap; }
.tf-cmp-chip:hover{ border-color:var(--hp-green-200); color:var(--hp-green-700); }
.tf-cmp-chip.on{ color:#04130D; background:var(--hp-green-50); border-color:var(--hp-green); box-shadow:inset 0 0 0 1px var(--hp-green); }
.tf-cmp-table .tf-table-top, .tf-cmp-table .tf-trow{ display:grid; }
.tf-cmp-table .tf-thead{ flex-direction:column; align-items:flex-start; gap:3px; }
.tf-cat-tab{ padding:10px 20px; border-radius:999px; font-family:inherit; font-size:13.5px; font-weight:700; color:var(--hp-graphite);
  background:#fff; border:1px solid var(--hp-mist); cursor:pointer; transition:all .18s; white-space:nowrap; }
.tf-cat-tab:hover{ border-color:var(--hp-green-200); color:var(--hp-green-700); }
.tf-cat-tab.on{ color:#fff; background:linear-gradient(135deg,var(--hp-green),#28B98E); border-color:transparent; box-shadow:0 8px 18px -6px rgba(42,159,132,.5); }
.tf-card-biz{ display:inline-flex; align-items:center; gap:7px; margin-top:10px; padding:6px 11px; border-radius:999px; font-size:11.5px; font-weight:700; color:var(--hp-green-700); background:var(--hp-green-50); border:1px solid var(--hp-green-100); }
.tf-biz-note{ display:flex; align-items:center; gap:13px; max-width:1180px; margin:26px auto 0; padding:18px 22px; border-radius:16px; background:var(--hp-green-50); border:1px solid var(--hp-green-100); font-size:14px; line-height:1.5; color:var(--hp-graphite); font-weight:500; }
.tf-biz-note svg{ flex:0 0 auto; }
@media (max-width:760px){ .tf-cat-tabs{ flex-wrap:wrap; justify-content:center; } }
/* bestsellers: 3 → 2 → 1 columna en móvil + padding fluido */
@media (max-width:900px){ .tf-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .tf-cards{ grid-template-columns:1fr; } .tf-cards-wrap{ padding:32px 20px 16px; } .tf-cmp-pick{ padding:0 4px; } }
@keyframes tffade{ from{transform:translateY(10px);} to{transform:none;} }
.tf-card{ position:relative; border-radius:24px; padding:30px 26px; background:#fff; border:1px solid var(--hp-mist);
  box-shadow:0 18px 50px -30px rgba(20,36,31,.3); transition:transform .2s, box-shadow .25s, border-color .2s;
  display:flex; flex-direction:column; }
.tf-card:hover{ transform:translateY(-5px); box-shadow:0 30px 70px -32px rgba(20,36,31,.4); border-color:var(--hp-green-200); }
.tf-card.pop{ border:1.5px solid var(--hp-green); background:linear-gradient(180deg,#fff,var(--hp-green-50));
  box-shadow:0 30px 70px -28px rgba(42,159,132,.5); }
.tf-card-flag{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); white-space:nowrap;
  padding:6px 16px; border-radius:999px; font-size:11.5px; font-weight:800; letter-spacing:.03em; color:#04130D;
  background:linear-gradient(135deg,#2FE0A8,var(--hp-green)); box-shadow:0 8px 20px -6px rgba(42,159,132,.5); }
.tf-card-kicker{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--hp-green-700); }
.tf-card-name{ font-family:var(--font-display); font-weight:800; font-size:26px; letter-spacing:-.02em; color:var(--hp-ink); margin-top:8px; }
.tf-card-data{ font-size:14px; color:var(--hp-slate); margin-top:4px; font-weight:600; }
.tf-card-price{ display:flex; align-items:baseline; gap:5px; margin-top:18px; }
.tf-card-price b{ font-family:var(--font-display); font-weight:800; font-size:46px; letter-spacing:-.03em; color:var(--hp-ink); }
.tf-card-price span{ font-size:15px; color:var(--hp-slate); font-weight:600; }
.tf-card-donate{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--hp-coral); white-space:nowrap;
  margin-top:10px; padding:7px 12px; border-radius:999px; background:rgba(232,122,90,.08); }
.tf-card-feats{ list-style:none; padding:0; margin:22px 0; display:flex; flex-direction:column; gap:12px; flex:1; }
.tf-card-feats li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.4; color:var(--hp-graphite); font-weight:500; }
.tf-card-feats li svg{ flex:0 0 auto; margin-top:2px; }
.tf-card-cta{ display:flex; align-items:center; justify-content:center; gap:8px; padding:15px; border-radius:14px; cursor:pointer;
  font-size:15px; font-weight:800; color:var(--hp-green-700); border:1.5px solid var(--hp-green-300); background:#fff; transition:all .18s; }
.tf-card-cta:hover{ background:var(--hp-green-50); border-color:var(--hp-green); }
.tf-card-impact{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:14px; padding:11px 12px; border-radius:13px;
  font-size:12.5px; font-weight:600; color:var(--hp-coral); background:rgba(232,122,90,.09); }
.tf-card-impact b{ font-weight:800; }
.tf-card-cta.solid{ color:#04130D; border-color:transparent; background:linear-gradient(135deg,#2FE0A8,var(--hp-green));
  box-shadow:0 12px 26px -8px rgba(42,159,132,.5); }
.tf-card-cta.solid:hover{ transform:translateY(-2px); }

/* table */
.tf-table-sec{ padding:clamp(44px,7vw,60px) clamp(16px,5vw,56px) clamp(56px,8vw,88px); background:var(--hp-fog); margin-top:40px; }
.tf-table-head{ text-align:center; margin-bottom:40px; }
.tf-table-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; text-align:left; }
.tf-iva{ display:inline-flex; align-items:center; gap:9px; padding:7px 12px 7px 8px; border-radius:999px; cursor:pointer; flex:0 0 auto;
  font-family:inherit; font-size:12.5px; font-weight:700; color:var(--hp-graphite); background:#fff; border:1px solid var(--hp-mist); transition:all .18s; }
.tf-iva-sw{ width:38px; height:22px; border-radius:999px; background:var(--hp-mist); position:relative; transition:background .2s; }
.tf-iva-dot{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .2s; }
.tf-iva.on .tf-iva-sw{ background:var(--hp-green); }
.tf-iva.on .tf-iva-dot{ transform:translateX(16px); }
.tf-iva.on{ color:var(--hp-green-700); border-color:var(--hp-green-200); }
.tf-iva-note{ font-size:12px; color:var(--hp-slate); margin:-28px 0 28px; text-align:right; }
.tf-free-badge{ display:inline-flex; align-items:center; padding:4px 11px; border-radius:999px; font-size:12.5px; font-weight:800; white-space:nowrap;
  color:var(--hp-green-700); background:rgba(42,159,132,.12); }
.tf-mtabs{ display:none; }
.tf-sec-eyebrow{ text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:700; color:var(--hp-green); }
.tf-h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(26px,5vw,38px); letter-spacing:-.02em; margin:12px 0 0; color:var(--hp-ink); }
.tf-table{ max-width:1080px; margin:0 auto; background:#fff; border-radius:22px; overflow:hidden;
  border:1px solid var(--hp-mist); box-shadow:0 20px 60px -34px rgba(20,36,31,.35); opacity:1; animation:tffade .4s ease; }
.tf-table-top, .tf-trow{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; }
/* comparador: nº de columnas según planes elegidos (1ª col = etiquetas) */
.tf-cmp-n2 .tf-table-top, .tf-cmp-n2 .tf-trow{ grid-template-columns:1.3fr 1fr 1fr; }
.tf-cmp-n3 .tf-table-top, .tf-cmp-n3 .tf-trow{ grid-template-columns:1.3fr 1fr 1fr 1fr; }
.tf-table-top{ border-bottom:1px solid var(--hp-mist); }
.tf-tcell{ padding:18px 22px; display:flex; align-items:center; }
.tf-tcell.pop{ background:var(--hp-green-50); }
.tf-thead{ flex-direction:column; align-items:flex-start; gap:3px; padding-top:24px; padding-bottom:24px; }
.tf-thead.pop{ position:relative; }
.tf-thead-name{ font-weight:800; font-size:16px; color:var(--hp-ink); }
.tf-thead-price{ font-size:13px; color:var(--hp-slate); font-weight:700; }
.tf-thead-price span{ font-weight:500; }
.tf-tlabel{ font-size:13.5px; font-weight:600; color:var(--hp-graphite); }
.tf-trow{ border-bottom:1px solid var(--hp-mist); }
.tf-trow:nth-child(even of .tf-trow){ background:rgba(143,194,172,.02); }
.tf-cellval{ font-size:14px; font-weight:700; color:var(--hp-ink); }
.tf-tick{ width:24px; height:24px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--hp-green),#28B98E); box-shadow:0 4px 10px -3px rgba(42,159,132,.5); }
.tf-dash{ color:var(--hp-mist); font-weight:700; font-size:16px; }
.tf-trow.donate{ background:linear-gradient(90deg, rgba(232,122,90,.06), transparent); border-top:1px solid var(--hp-mist); }
.tf-trow.free{ background:linear-gradient(90deg, var(--hp-green-50), transparent); }
.tf-trow.free .tf-tlabel{ color:var(--hp-green-700); font-weight:800; }
.tf-trow.free .tf-cellval{ color:var(--hp-green-700); font-weight:800; }
.tf-trow.donate .tf-tlabel{ color:var(--hp-coral); font-weight:800; }
.tf-trow.donate .tf-cellval{ color:var(--hp-coral); font-weight:800; }
.tf-trow-cta .tf-tcell{ padding-top:20px; padding-bottom:24px; }
.tf-mini-cta{ display:inline-flex; align-items:center; justify-content:center; width:100%; padding:11px; border-radius:11px; cursor:pointer;
  font-size:13.5px; font-weight:800; color:var(--hp-green-700); border:1.5px solid var(--hp-green-300); background:#fff; transition:all .18s; }
.tf-mini-cta:hover{ background:var(--hp-green-50); }
.tf-mini-cta.solid{ color:#04130D; border-color:transparent; background:linear-gradient(135deg,#2FE0A8,var(--hp-green)); }
.tf-table-note{ max-width:1080px; margin:18px auto 0; font-size:12px; color:var(--hp-slate); line-height:1.5; text-align:center; }

/* ════ responsive · móvil: 1ª columna sticky + selector de plan ════ */
@media (max-width: 760px){
  .tf-table-head{ flex-direction:column; align-items:flex-start; gap:14px; }
  .tf-iva-note{ margin:-8px 0 18px; text-align:left; }
  .tf-mtabs{ display:flex; gap:6px; margin-bottom:14px; padding:5px; border-radius:18px; background:var(--hp-fog); border:1px solid var(--hp-mist); }
  .tf-mtab{ flex:1; min-width:0; padding:10px 8px; border-radius:13px; font-size:12.5px; font-weight:700; line-height:1.2; color:var(--hp-graphite); background:transparent; border:none; cursor:pointer; transition:all .18s; }
  .tf-mtab.on{ color:#fff; background:linear-gradient(135deg,var(--hp-green),#28B98E); }
  /* comparador móvil: UNA columna de plan a la vez (elegida con .tf-mtabs).
     Sin scroll horizontal ni position:sticky → evita por completo el bug de la
     1ª columna congelada en iOS Safari. El label queda fijo como 1ª columna del grid. */
  .tf-cmp-table{ overflow:hidden; }
  .tf-tcell{ padding:14px 16px; }
  .tf-cmp-n2 .tf-table-top, .tf-cmp-n2 .tf-trow,
  .tf-cmp-n3 .tf-table-top, .tf-cmp-n3 .tf-trow{ width:auto; grid-template-columns:minmax(116px,1.1fr) 2fr; }
  /* oculta todas las columnas de plan salvo la activa */
  .tf-cmp-table .tf-col{ display:none; }
  .tf-cmp-table.tf-show-0 .tf-col-0,
  .tf-cmp-table.tf-show-1 .tf-col-1,
  .tf-cmp-table.tf-show-2 .tf-col-2{ display:flex; }
}