/* ==========================================================================
   TUWEBLOCAL — COMPONENTES DE MICROSERVICIOS Y PRECIOS (v2 · 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-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-ico-lg{font-size:2rem;line-height:1;display:block;margin-bottom:.7rem}
.twl-price{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;margin-bottom:1.1rem}
.twl-price--center{justify-content:center}
.twl-price__main{font-size:1.9rem;font-weight:800;font-style:italic;color:var(--color-brand,#176be0);white-space:nowrap}
.twl-price__unit{font-size:1rem;font-weight:700;color:var(--color-brand,#176be0)}
.twl-price__alta{font-size:.9rem;color:#5c6f7b;width:100%}

/* --- 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}

/* --- Rejilla de características (qué incluye) --- */
.twl-feats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;max-width:950px;margin:0 auto}
.twl-feat{background:#fff;border:1px solid #e3f0f6;border-radius:14px;padding:1.15rem 1.25rem;display:flex;gap:.85rem;align-items:flex-start;box-shadow:0 6px 18px rgba(16,42,67,.05)}
.twl-feat > span:first-child{font-size:1.45rem;line-height:1.25;flex:0 0 auto}
.twl-feat p{margin:0;color:#41545f;font-size:.96rem}
.twl-feat p strong{display:block;color:var(--color-ink,#102a43);font-size:1rem;margin-bottom:.15rem}

/* --- 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}

/* --- Bloques con imagen lateral (confianza) --- */
.twl-media{display:grid;grid-template-columns:1.1fr .9fr;gap:2.2rem;align-items:center;max-width:1000px;margin:0 auto}
.twl-media--flip{grid-template-columns:.9fr 1.1fr}
.twl-media img{width:100%;height:auto;border-radius:16px;box-shadow:0 12px 30px rgba(16,42,67,.14)}
.twl-media h2{margin-bottom:.8rem}
.twl-media p{color:#41545f;margin-bottom:.8rem}
.twl-media p:last-child{margin-bottom:0}

/* --- Franja de casos con imagen --- */
.twl-cases{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;max-width:950px;margin:0 auto}
.twl-case{background:#fff;border:1px solid #d8ecf5;border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(16,42,67,.07);display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}
.twl-case:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,42,67,.13)}
.twl-case img{width:100%;height:190px;object-fit:cover;display:block}
.twl-case > div{padding:1.2rem 1.35rem 1.4rem}
.twl-case h3{font-size:1.12rem;margin-bottom:.4rem}
.twl-case p{margin:0;color:#41545f;font-size:.95rem}

/* --- 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;margin:0}
.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}
.twl-reframe--center{text-align:center}
.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)}
.twl-addon .twl-price{margin:0}

/* --- Notas y utilidades --- */
.twl-finenote{font-size:.88rem;color:#5c6f7b;max-width:760px;margin:1.2rem auto 0;text-align:center}
.twl-finenote--left{text-align:left;margin-inline:0}
.twl-datalist{list-style:none;padding:0;margin:0}
.twl-datalist li{padding:.6rem 0;color:#41545f}
.twl-btn-row{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.twl-mt{margin-top:1.4rem}
.twl-narrow{max-width:850px;margin-inline:auto}
.twl-wide{max-width:1000px;margin-inline:auto}
.twl-cell-full{grid-column:1 / -1}

/* --- 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.2rem}
.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}

/* --- Prosa SEO al pie de páginas de servicio --- */
.twl-seoprosa{max-width:850px;margin:0 auto}
.twl-seoprosa h2{margin-bottom:.9rem}
.twl-seoprosa h3{margin:1.4rem 0 .5rem;font-size:1.15rem}
.twl-seoprosa p{color:#41545f;margin-bottom:.9rem}

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