/* ==========================================================================
   TUWEBLOCAL — COMPONENTES DE MICROSERVICIOS Y PRECIOS (v. 2026-08-14)
   Complementa a twl-theme: usa sus tokens y clases base (.section, .h2, .btn…)
   ========================================================================== */

/* --- Rejillas de planes y tarjetas de precio --- */
.twl-plans{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;max-width:900px;margin:0 auto}
.twl-plans--3{grid-template-columns:repeat(3,1fr);max-width:none}
.twl-micro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.twl-price-card{background:#fff;border:1px solid #d8ecf5;border-radius:18px;padding:1.7rem 1.5rem;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(16,42,67,.06);transition:transform .25s ease,box-shadow .25s ease,border-color .25s}
.twl-price-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,42,67,.12);border-color:rgba(23,107,224,.45)}
.twl-price-card h3{font-size:1.25rem;margin-bottom:.45rem}
.twl-price-card .twl-dolor{color:#41545f;font-size:.95rem;margin-bottom:1rem;min-height:2.6em}
.twl-price-card ul{list-style:none;margin:0 0 1.2rem;padding:0}
.twl-price-card ul li{padding:.34rem 0 .34rem 1.5rem;position:relative;color:#41545f;font-size:.95rem}
.twl-price-card ul li::before{content:"✓";position:absolute;left:0;color:#1e9e63;font-weight:700}
.twl-price-card .twl-cta-row{margin-top:auto;display:flex;flex-direction:column;gap:.6rem}
.twl-price{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;margin-bottom:1.1rem}
.twl-price__main{font-size:2rem;font-weight:800;font-style:italic;color:var(--color-brand,#176be0)}
.twl-price__unit{font-size:1rem;font-weight:700;color:var(--color-brand,#176be0)}
.twl-price__alta{font-size:.9rem;color:#41545f;width:100%}
.twl-price-card--featured{border:2px solid var(--color-brand,#176be0);position:relative}
.twl-price-card--featured::after{content:"El más contratado";position:absolute;top:-.9rem;left:50%;transform:translateX(-50%);background:var(--color-brand,#176be0);color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.5px;padding:.28rem .95rem;border-radius:30px;white-space:nowrap}

/* --- Etiquetas de estado --- */
.twl-badge{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.5px;padding:.28rem .8rem;border-radius:30px;margin-bottom:.8rem}
.twl-badge--on{background:#e3f6ec;color:#177a4c;border:1px solid #bfe8d2}
.twl-badge--soon{background:#fff4e0;color:#9a6a11;border:1px solid #f3ddb0}

/* --- Bloque de honestidad --- */
.twl-honesty{background:#fff8ee;border:1px solid #f3ddb0;border-left:5px solid #e8a33d;border-radius:14px;padding:1.5rem 1.6rem;max-width:850px;margin:0 auto}
.twl-honesty h3{font-size:1.15rem;margin-bottom:.7rem}
.twl-honesty ul{list-style:none;margin:0;padding:0}
.twl-honesty ul li{padding:.4rem 0 .4rem 1.6rem;position:relative;color:#41545f}
.twl-honesty ul li::before{content:"·";position:absolute;left:.4rem;font-weight:800;color:#e8a33d;font-size:1.4rem;line-height:1.1}

/* --- Comparativa honesta (sí / no) --- */
.twl-compare{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;max-width:900px;margin:0 auto}
.twl-compare > div{border-radius:16px;padding:1.5rem 1.6rem;border:1px solid #d8ecf5}
.twl-compare__si{background:#f0faf4}
.twl-compare__no{background:#fdf3f2}
.twl-compare h3{font-size:1.1rem;margin-bottom:.7rem}
.twl-compare ul{list-style:none;margin:0;padding:0}
.twl-compare ul li{padding:.38rem 0 .38rem 1.6rem;position:relative;color:#41545f}
.twl-compare__si ul li::before{content:"✓";position:absolute;left:0;color:#1e9e63;font-weight:700}
.twl-compare__no ul li::before{content:"✗";position:absolute;left:0;color:#c65b52;font-weight:700}

/* --- Bloque "dos sistemas en uno" y destacados --- */
.twl-duo{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;max-width:950px;margin:0 auto}
.twl-duo > div{background:#fff;border:1px solid #d8ecf5;border-radius:16px;padding:1.6rem}
.twl-duo h3{font-size:1.12rem;margin-bottom:.6rem}
.twl-duo p{color:#41545f}
.twl-duo-note{max-width:950px;margin:1.2rem auto 0;text-align:center;font-weight:600;color:var(--color-ink,#102a43)}

/* --- Bloque reencuadre --- */
.twl-reframe{background:var(--color-soft,#eef6fb);border-radius:18px;padding:2.2rem 2rem;max-width:850px;margin:0 auto;text-align:left}
.twl-reframe h2{margin-bottom:1rem}
.twl-reframe p{color:#41545f;margin-bottom:.9rem}
.twl-reframe p:last-child{margin-bottom:0}
.twl-reframe strong{color:var(--color-ink,#102a43)}

/* --- Añádele (complemento) --- */
.twl-addon{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;background:#fff;border:1px dashed rgba(23,107,224,.5);border-radius:16px;padding:1.3rem 1.6rem;max-width:850px;margin:0 auto}
.twl-addon p{margin:0;color:#41545f}
.twl-addon strong{color:var(--color-ink,#102a43)}

/* --- Nota legal de precios --- */
.twl-finenote{font-size:.88rem;color:#5c6f7b;max-width:760px;margin:1.2rem auto 0;text-align:center}

/* --- Calculadora --- */
.twl-calc{max-width:760px;margin:0 auto;background:#fff;border:1px solid #d8ecf5;border-radius:18px;box-shadow:0 10px 30px rgba(16,42,67,.06);overflow:hidden}
.twl-calc__tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid #e3f0f6}
.twl-calc__tab{flex:1 1 auto;background:var(--color-soft,#eef6fb);border:0;border-right:1px solid #e3f0f6;padding:.85rem .6rem;font:inherit;font-weight:700;font-size:.88rem;color:#41545f;cursor:pointer;transition:background .2s,color .2s}
.twl-calc__tab:last-child{border-right:0}
.twl-calc__tab[aria-selected="true"]{background:#fff;color:var(--color-brand,#176be0);box-shadow:inset 0 -3px 0 var(--color-brand,#176be0)}
.twl-calc__panel{padding:1.6rem}
.twl-calc__panel[hidden]{display:none}
.twl-calc label{display:flex;flex-direction:column;gap:.35rem;font-weight:600;color:var(--color-ink,#102a43);margin-bottom:1rem;font-size:.95rem}
.twl-calc input,.twl-calc select{padding:.75rem .9rem;border:1px solid #cfe1ea;border-radius:10px;font:inherit;background:#fff;color:#213a49}
.twl-calc__result{background:var(--color-soft,#eef6fb);border-radius:14px;padding:1.4rem 1.5rem;margin-top:.4rem}
.twl-calc__result p{margin:0 0 .5rem;color:#41545f}
.twl-calc__result strong{color:var(--color-brand-deep,#0d4ba0);font-size:1.25rem}
.twl-calc__result .twl-calc__big{font-size:1.05rem}
.twl-calc__actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1rem}

/* --- Bloque estándar "Lo que puedes añadir a tu web" --- */
.twl-upsell{background:var(--color-soft,#eef6fb);border-radius:18px;padding:2rem 1.8rem;max-width:950px;margin:0 auto}
.twl-upsell h2,.twl-upsell h3{margin-bottom:1rem}
.twl-upsell ul{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.4rem}
.twl-upsell ul li{padding:.3rem 0}
.twl-upsell ul li a{font-weight:700;color:var(--color-brand,#176be0);text-decoration:none}
.twl-upsell ul li a:hover{text-decoration:underline}
.twl-upsell ul li span{display:block;font-size:.9rem;color:#41545f;font-weight:400}
.twl-upsell .twl-upsell__cta{margin:0;color:#41545f}

/* --- Responsive --- */
@media(max-width:900px){
  .twl-plans,.twl-plans--3,.twl-micro-grid,.twl-compare,.twl-duo{grid-template-columns:1fr}
  .twl-upsell ul{grid-template-columns:1fr}
  .twl-calc__tab{flex:1 1 50%;border-bottom:1px solid #e3f0f6}
}