/* Layout base */
.ty-wrap{
    --bg:#f8fafc;               /* Fondo muy claro */
    --card:#ffffff;             /* Tarjetas blancas */
    --muted:#475569;            /* Texto secundario */
    --txt:#0f172a;              /* Texto principal */
    --acc:#2563eb;              /* Botones principales: azul */
    --acc-2:#16a34a;            /* Verde para pasos activos */
    --border:rgba(0,0,0,.08);   /* Borde muy sutil */
  
    color:var(--txt);
    background:var(--bg);
    padding:32px 16px;
    margin-top:60px;
  }
  
  .ty-hero,
  .ty-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:0 6px 20px rgba(0,0,0,.05);
  }
  
  .ty-hero{
    padding:28px;
    text-align:center;
    margin:0 auto 24px;
    max-width:980px;
  }
  
  .ty-hero__icon{
    font-size:40px;
    margin-bottom:8px;
  }
  
  .ty-hero__title{
    margin:0 0 6px;
    font-size:28px;
    line-height:1.2;
  }
  
  .ty-hero__subtitle{
    margin:0;
    color:var(--muted);
  }
  
  .ty-cta-row{
    margin-top:16px;
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
  }
  
  .ty-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:42px;
    padding:0 18px;
    border-radius:12px;
    font-weight:600;
    border:1px solid var(--border);
    transition:.2s;
    cursor:pointer;
  }
  
  .ty-btn:hover{
    transform:translateY(-1px);
  }
  
  .ty-btn--primary{
    background:var(--acc);
    color:#fff;
    border-color:transparent;
  }
  
  .ty-btn--ghost{
    background:transparent;
    color:var(--txt);
  }
  
  .ty-btn--whatsapp{
    background:#25d366;
    color:#fff;
    border-color:#1db954;
  }
  
  /* Steps */
  .ty-steps{
    max-width:980px;
    margin:0 auto 24px;
  }
  
  .ty-steps__list{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin:0;
    padding:0;
    list-style:none;
  }
  
  .ty-steps__list li{
    position:relative;
    padding:14px;
    border:1px dashed var(--border);
    border-radius:14px;
    background:#f9fafb;
    text-align:center;
  }
  
  .ty-steps .dot{
    width:10px;
    height:10px;
    border-radius:50%;
    display:inline-block;
    margin-right:8px;
    background:var(--border);
  }
  
  .ty-steps li.is-done .dot{
    background:var(--acc-2);
  }
  
  .ty-steps li.is-active .dot{
    background:var(--acc);
  }
  
  .ty-steps .label{
    font-size:14px;
    color:var(--txt);
  }
  
  /* Grid general */
  .ty-grid{
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:24px;
  }
  
  @media (max-width:992px){
    .ty-grid{grid-template-columns:1fr;}
  }
  
  .ty-card{
    padding:22px;
  }
  
  /* Key/Value simple */
  .ty-kv{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:8px;
  }
  
  .ty-kv li{
    display:flex;
    justify-content:space-between;
    gap:16px;
    color:var(--muted);
  }
  
  .ty-kv li strong{
    color:var(--txt);
  }
  
  .ty-kv.small li{
    font-size:14px;
  }
  
  /* Productos */
  .ty-items{
    list-style:none;
    margin:12px 0 0;
    padding:0;
    display:grid;
    gap:12px;
  }
  
  .ty-item{
    display:grid;
    grid-template-columns:60px 1fr auto;
    gap:12px;
    align-items:center;
  }
  
  .ty-thumb{
    width:60px;
    height:60px;
    border-radius:10px;
    object-fit:cover;
    background:#f1f5f9;
    border:1px solid var(--border);
  }
  
  .ty-thumb--ph{
    display:grid;
    place-items:center;
    font-size:22px;
  }
  
  .ty-item__data .name{
    font-weight:600;
  }
  
  .ty-item__data .meta{
    color:var(--muted);
    font-size:13px;
  }
  
  .ty-item__price{
    font-weight:700;
  }
  
  /* Totales */
  .ty-totals{
    margin-top:16px;
    border-top:1px solid var(--border);
    padding-top:12px;
    display:grid;
    gap:8px;
  }
  
  .ty-totals > div{
    display:flex;
    justify-content:space-between;
    color:var(--muted);
  }
  
  .ty-totals > div.is-total{
    color:var(--txt);
    font-size:18px;
    font-weight:800;
  }
  
  /* Direcciones / Próximos pasos */
  .ty-address__cols{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
  }
  
  @media (max-width:640px){
    .ty-address__cols{grid-template-columns:1fr;}
  }
  
  .ty-section-title,
  .ty-card__title{
    margin:0 0 10px;
    font-size:18px;
  }
  
  .ty-list{
    margin:0;
    padding-left:18px;
    color:var(--muted);
  }
  
  /* Confianza */
  .ty-trust__list{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    list-style:none;
    margin:0;
    padding:0;
  }
  
  .ty-trust__list li{
    background:#f1f5f9;
    border:1px solid var(--border);
    padding:8px 12px;
    border-radius:999px;
    font-size:14px;
  }
  
  /* Recomendados */
  .ty-recos{
    max-width:1200px;
    margin:26px auto 0;
  }
  
  .ty-recos__title{
    text-align:center;
    font-size:22px;
    margin:0 0 12px;
  }
  
  .ty-recos__grid{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    padding:12px;
  }
  
  /* Divisor sutil */
  .ty-divider{
    height:1px;
    background:var(--border);
    margin:12px 0;
  }
  