.pricing-table {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  font-family: "Segoe UI", sans-serif;
  color: #333;
  background-color: #171717;
  padding: 40px 0;
}

.plan {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  text-align: center;
  width: 300px;
  padding: 25px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.plan:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.plan-header {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #fff;
  border-radius: 10px;
  padding: 12px 0;
}

.plan-standard .plan-header { background: #00a2ff; }
.plan-plus .plan-header { background: #7b3efc; }
.plan-premium .plan-header { background: #4b0082; }
.plan-vip .plan-header { background: linear-gradient(135deg, #d4af37, #b8860b); }

.plan-name {
  font-size: 18px;
  font-weight: 600;
  margin: 10px 0;
}

.plan ul {
  list-style: none;
  padding: 0;
  text-align: left;
  margin: 20px 0;
}

.plan ul li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}

.plan ul li::before {
  content: "✔";
  color: #00c853;
  font-weight: bold;
  margin-right: 8px;
}

.plan-vip ul li::before {
  color: #d4af37;
}

.price {
  font-size: 26px;
  font-weight: bold;
  color: #000;
  margin-bottom: 5px;
}

.old-price {
  text-decoration: line-through;
  color: #888;
  font-size: 14px;
}

.discount {
  background: #ffea00;
  color: #000;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  display: inline-block;
  margin: 10px 0;
}

.button {
  display: inline-block;
  background: #00a2ff;
  color: #fff;
  padding: 10px 25px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
}

.button:hover {
  background: #007acc;
}

/* Botón y detalles especiales para el plan VIP */
.plan-vip {
  background: linear-gradient(180deg, #fff8e1, #fff);
  border: 2px solid #d4af37;
}

.plan-vip .button {
  background: linear-gradient(135deg, #d4af37, #b8860b);
  color: #000;
}

.plan-vip .button:hover {
  background: linear-gradient(135deg, #b8860b, #a67c00);
  color: #fff;
}

/* Calculadora */

    :root{
      --std: #00a2ff;
      --plus:#7b3efc;
      --premium:#4b0082;
      --vip:#d4af37;
      --bg:#0f1724;
      --card-bg: #33363b;
      --text:#000000;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }

    .calculator{
        max-width:900px;
        margin:0 auto;
        background: #ffffff;
        color: #33363b;
        border-radius:12px;
        padding:20px;
        box-shadow:0 8px 24px rgba(5, 22, 99, 0.6)}

    h1{
        font-size:20px;
        margin:0 0 12px}
        
    .row{display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap}
    label{display:block;font-size:13px;color:#000000;margin-bottom:6px}
    option{
      color: #000000;
     }
    select,input[type="number"],.readonly{background:transparent;border:1px solid #0f1724;padding:10px;border-radius:8px;color:var(--text);min-width:160px}
    .readonly{padding:10px 12px}
    .panel{display:flex;gap:12px}
    .summary{flex:1;background:var(--card-bg);padding:16px;border-radius:10px;color: #ffffff;}
    .controls{flex:1;min-width:260px}
    .big{font-size:24px;font-weight:700}
    .muted{font-size:12px;color:#b7babe}
    .total-box{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding:12px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));border:1px solid rgba(255,255,255,0.04)}
    button.calc{background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));border:1px solid rgba(0, 0, 0, 0.555);padding:10px 14px;border-radius:8px;color:var(--text);cursor:pointer}
    button.calc:hover{
        background: #33363b;
        color: #ffffff;
    }
    .color-pill{height:36px;width:36px;border-radius:8px;display:inline-block;margin-left:8px;border:2px solid rgba(0,0,0,0.25)}
    .note{font-size:13px;color:#b7babe;margin-top:8px}
    @media (max-width:720px){.panel{flex-direction:column}.controls{width:100%}}

    .incluye-section {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background-color: #33363b;
  padding: 40px 20px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  max-width: 900px;
  margin: 0 auto;
  font-family: "Segoe UI", sans-serif;
}

.incluye-img {
  flex: 1;
  min-width: 280px;
  text-align: center;
  position: relative;
}

.incluye-img img {
  width: 100%;
  max-width: 320px;
  border-radius: 20px;
}

.incluye-badge {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #1d55fd;
  color: rgb(255, 255, 255);
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: bold;
  font-size: 18px;
}

.incluye-text {
  flex: 1;
  min-width: 300px;
  padding: 20px 30px;
}

.incluye-text h2 {
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 15px;
}

.incluye-text ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.incluye-text ul li {
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 10px;
  padding-left: 25px;
  position: relative;
}

.incluye-text ul li::before {
  content: "✔";
  color: #0bb783;
  font-weight: bold;
  position: absolute;
  left: 0;
}

.incluye-section {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background-color: #fff;
  padding: 40px 20px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  max-width: 900px;
  margin: 0 auto;
  font-family: "Segoe UI", sans-serif;
}

.incluye-img {
  flex: 1;
  min-width: 280px;
  text-align: center;
  position: relative;
}

.incluye-img img {
  width: 100%;
  max-width: 320px;
  border-radius: 20px;
}

.incluye-badge {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #0bb783;
  color: white;
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: bold;
  font-size: 14px;
}

.incluye-text {
  flex: 1;
  min-width: 300px;
  padding: 20px 30px;
}

.incluye-text h2 {
  font-size: 26px;
  font-weight: 700;
  color: #111;
  margin-bottom: 15px;
}

.incluye-text ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.incluye-text ul li {
  font-size: 16px;
  color: #444;
  margin-bottom: 10px;
  padding-left: 25px;
  position: relative;
}

.incluye-text ul li::before {
  content: "✔";
  color: #0bb783;
  font-weight: bold;
  position: absolute;
  left: 0;
}

.listado-lateral {
  background-color: #171717;
  padding: 15px 25px;
  border-radius: 10px;
  width: 450px;
  font-family: Arial, sans-serif;
  margin: 20px 0;
  
}

.listado-lateral ul {
  list-style: none;
  padding: 0;
  margin: 0;
  
}

.listado-lateral li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid #3b3b3b;
 
}

.listado-lateral li:last-child {
  border-bottom: none;
}

.listado-lateral a {
  text-decoration: none;
  color: #000;
  flex-grow: 1;
  display: flex;
  align-items: center;
  font-weight: 500;
  color: #ffffff;
  font-size: 16px;
}

.listado-lateral a:hover {
  color: #007bff;
}

.listado-lateral .circle {
  width: 20px;
  height: 20px;
  color: #ffffff;
  background-color: blue;
  border-radius: 50%;
  margin-right: 20px;
}

.listado-lateral .plus {
  font-size: 18px;
  color: #000;
  margin-left: 10px;
}

@media (max-width:720px){
.listado-lateral {
  width: 390px; 
}

.listado-lateral a {
  font-size: 14px;
}

}