/* ==========================================================================
   IoTgrow.tech · Planes
   Extiende assets/css/home.css: usa sus tokens, botones y footer.
   Solo define lo propio de la página de precios.
   ========================================================================== */

/* ---------- Hero ---------- */
.pl-hero{
  background:#f4f2e9;
  border-bottom:1px solid #e6e1d3;
  padding:58px 0 54px;
}
.pl-hero .eyebrow{color:#7a7566; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.15em; text-transform:uppercase}
.pl-hero .eyebrow span{color:#15803d; font-weight:600}
.pl-hero .hero-kicker-line{display:inline-block; width:36px; height:1px; background:#15803d; vertical-align:middle; margin-right:10px}

.pl-hero h1{
  margin:18px 0 16px;
  max-width:18ch;
  font-size:clamp(36px,4.6vw,58px);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.045em;
  color:#121a12;
}
.pl-hero h1 em{
  display:block;
  margin-top:2px;
  font-family:'Instrument Serif',Georgia,serif;
  font-style:italic;
  font-weight:400;
  font-size:1.06em;
  line-height:1.03;
  letter-spacing:-.02em;
  color:#166534;
}
.pl-lead{max-width:56ch; font-size:17px; line-height:1.65; color:#575c52}
.pl-note{max-width:68ch; margin-top:18px; font-size:14.5px; line-height:1.65; color:#575c52}

/* ---------- Grid de planes ---------- */
.pl-planes{padding-top:0; margin-top:-34px; position:relative; z-index:1}

.pl-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  align-items:stretch;
}

.pl-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:26px 24px 24px;
  background:#fff;
  border:1px solid var(--s200);
  border-radius:18px;
  box-shadow:0 18px 40px -34px rgb(15 23 42/.4);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pl-card:hover{transform:translateY(-3px); border-color:var(--s300); box-shadow:0 26px 50px -34px rgb(15 23 42/.45)}

.pl-card--destacado{
  border-color:var(--g700);
  box-shadow:
    0 0 0 1px var(--g700),
    0 30px 60px -38px rgb(20 83 45/.5);
}

.pl-flag{min-height:22px; margin:0; line-height:1}
.pl-card-head{display:block}
.pl-card-head h2{font-size:18px; font-weight:800; letter-spacing:-.025em; line-height:1.2}
.pl-alias{
  display:block;
  margin-top:4px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--s500);
}
.pl-desc{min-height:0; font-size:13.5px; line-height:1.55; color:var(--s500)}

.pl-precio{display:flex; align-items:baseline; gap:8px; margin-top:2px}
.pl-monto{
  font-family:'JetBrains Mono',monospace;
  font-size:34px; font-weight:600; letter-spacing:-.03em; color:var(--s900);
  line-height:1;
}
.pl-monto small{font-size:12px; font-weight:600; letter-spacing:.08em; color:var(--s500); margin-right:5px; vertical-align:2px}
.pl-periodo{font-size:13px; color:var(--s500)}
.pl-anual{font-size:11.5px; color:var(--s500); margin-top:-6px}

.pl-precio--gratis{flex-direction:column; align-items:flex-start; gap:2px}
.pl-precio--gratis .pl-periodo{font-size:12.5px}

.pl-feats{display:grid; gap:9px; margin:6px 0 4px; flex:1}
.pl-feats li{
  position:relative;
  padding-left:20px;
  font-size:13px;
  line-height:1.5;
  color:var(--s600);
}
.pl-feats li::before{
  content:"";
  position:absolute; left:0; top:5px;
  width:11px; height:11px;
  border-radius:3px;
  background:var(--g100);
  border:1px solid var(--g200);
}
.pl-feats li::after{
  content:"";
  position:absolute; left:3px; top:8px;
  width:5px; height:3px;
  border-left:1.5px solid var(--g700);
  border-bottom:1.5px solid var(--g700);
  transform:rotate(-45deg);
}

.pl-btn-disabled{opacity:.75; cursor:default; pointer-events:none}
.pl-anual-link{text-align:center; font-size:12px; color:var(--s500); text-decoration:underline; text-underline-offset:3px}
.pl-anual-link:hover{color:var(--g800)}

.pl-moneda{margin-top:18px; text-align:center; font-size:12px; color:var(--s500)}

/* ---------- Tabla comparativa ---------- */
.pl-compare{padding:64px 0}
.pl-table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--s200); border-radius:16px; background:#fff}
.pl-table{width:100%; border-collapse:separate; border-spacing:0; font-size:14px; min-width:640px}
.pl-table th,.pl-table td{padding:14px 16px; text-align:left; vertical-align:middle}
.pl-table thead th{
  background:var(--s50);
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--s600);
  border-bottom:1px solid var(--s200);
}
.pl-table thead th:first-child{border-top-left-radius:16px}
.pl-table thead th:last-child{border-top-right-radius:16px}
.pl-table tbody th{
  font-weight:600; color:var(--s800); font-size:13px;
  border-top:1px solid var(--s100);
}
.pl-table tbody td{color:var(--s600); border-top:1px solid var(--s100)}
.pl-table tbody tr td:nth-child(4){background:#f6fdf8}

/* ---------- FAQ ---------- */
.pl-faq{padding-top:58px; padding-bottom:10px}
.pl-faq-list{display:grid; gap:10px; max-width:820px}
.pl-faq-item{
  background:#fff;
  border:1px solid var(--s200);
  border-radius:12px;
  padding:16px 18px;
}
.pl-faq-item summary{
  cursor:pointer;
  font-size:15px;
  font-weight:600;
  color:var(--s800);
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.pl-faq-item summary::-webkit-details-marker{display:none}
.pl-faq-item summary::after{
  content:"+";
  font-size:20px;
  font-weight:400;
  color:var(--g700);
  line-height:1;
}
.pl-faq-item[open] summary::after{content:"−"}
.pl-faq-item p{margin:12px 0 2px; font-size:14px; line-height:1.7; color:var(--s600)}

/* ---------- Dashboard a medida ---------- */
.pl-custom{
  background:linear-gradient(180deg,#f1f5f9 0%,#eaf1f6 100%);
  border-top:1px solid var(--s200);
  border-bottom:1px solid var(--s200);
  padding:64px 0 68px;
}
.pl-custom-head{max-width:660px; margin:0 auto 38px; text-align:center}
.pl-custom-head .eyebrow{display:inline-flex; align-items:center; color:var(--g700)}
.pl-custom-head .hero-kicker-line{display:inline-block; width:36px; height:1px; background:var(--g700); margin-right:10px}
.pl-custom-head h2{
  margin:14px 0 12px;
  font-size:clamp(24px,2.8vw,34px); font-weight:800; line-height:1.12;
  letter-spacing:-.033em; color:var(--s900);
}
.pl-custom-lead{margin:0; font-size:16px; line-height:1.65; color:var(--s600)}

.pl-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}

.pl-step{
  position:relative;
  background:#fff;
  border:1px solid var(--s200);
  border-radius:16px;
  padding:26px 24px;
  box-shadow:0 1px 2px rgb(15 23 42/.04);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pl-step:hover{
  transform:translateY(-3px);
  border-color:var(--g200);
  box-shadow:0 26px 46px -34px rgb(20 83 45/.45);
}

.pl-step-icon{
  display:grid; place-items:center;
  width:44px; height:44px; margin-bottom:18px;
  border-radius:12px;
  background:var(--g50); border:1px solid var(--g100); color:var(--g700);
}
.pl-step-icon .icon{width:21px; height:21px}

.pl-step-num{
  position:absolute; top:18px; right:22px;
  font-family:'Instrument Serif',Georgia,serif; font-style:italic;
  font-size:40px; line-height:1; letter-spacing:-.02em;
  color:#86efac;
  user-select:none;
}

.pl-step h3{margin:0 0 8px; font-size:17px; font-weight:700; letter-spacing:-.02em; color:var(--s900)}
.pl-step p{margin:0; font-size:14px; line-height:1.65; color:var(--s600)}

@media (max-width:900px){
  .pl-custom{padding:52px 0 56px}
  .pl-steps{grid-template-columns:1fr}
  .pl-step{padding:22px 20px}
  .pl-step-num{font-size:34px; top:16px; right:18px}
}

/* ---------- CTA ---------- */
.pl-cta{padding-top:54px; padding-bottom:88px}
.pl-cta-box{
  padding:38px 40px;
  border-radius:20px;
  background:linear-gradient(135deg,#14532d 0%,#166534 55%,#15803d 100%);
  color:#dcfce7;
  box-shadow:0 36px 60px -46px rgb(20 83 45/.75);
}
.pl-cta-box h2{color:#fff; font-size:clamp(22px,2.4vw,30px); font-weight:800; letter-spacing:-.03em}
.pl-cta-box p{margin:12px 0 0; max-width:60ch; font-size:15px; line-height:1.7; color:#d1fae5}
.pl-cta-actions{display:flex; align-items:center; flex-wrap:wrap; gap:14px 24px; margin-top:24px}
.pl-cta-link{color:#fff; border-color:rgba(255,255,255,.45)}
.pl-cta-link:hover{color:#fff; border-color:#fff}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .pl-grid{grid-template-columns:repeat(2,1fr)}
  .pl-desc{min-height:0}
}

@media (max-width:768px){
  .pl-hero{padding:40px 0 46px}
  .pl-planes{margin-top:-26px}
  .pl-compare{padding:52px 0}
  .pl-cta-box{padding:28px 24px}
}

@media (max-width:600px){
  .pl-grid{grid-template-columns:1fr; gap:16px}
  .pl-card{padding:22px 20px}
  .pl-card--destacado{padding-top:24px}
  .pl-hero h1{font-size:32px}
  .pl-lead{font-size:16px}
  .pl-monto{font-size:30px}
  .pl-faq{padding-top:44px}
}

/* Tabla comparativa apilada en celular */
@media (max-width:700px){
  .pl-table-wrap{border:0; background:transparent; overflow:visible; border-radius:0}
  .pl-table{display:block; min-width:0; font-size:13px}
  .pl-table thead{display:none}
  .pl-table tbody{display:grid; gap:10px}

  .pl-table tbody tr{
    display:grid;
    grid-template-columns:1fr 1fr;
    background:#fff;
    border:1px solid var(--s200);
    border-radius:12px;
    overflow:hidden;
  }

  .pl-table tbody th{
    grid-column:1 / -1;
    padding:10px 14px;
    background:var(--s50);
    border-top:0;
    font-size:10.5px;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:var(--s600);
  }

  .pl-table tbody td{
    position:relative;
    padding:28px 14px 12px;
    border-top:1px solid var(--s100);
    font-size:13px;
  }
  .pl-table tbody td::before{
    content:attr(data-col);
    position:absolute;
    top:9px; left:14px;
    font-size:9.5px;
    font-weight:700;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:var(--s500);
  }
  .pl-table tbody td.pl-td-wide{grid-column:1 / -1}
  .pl-table tbody tr td:nth-child(4){background:transparent}
}