<!-- ============================================================
SARLEX — Sección de confianza para la tienda
Cómo usarla: copiá TODO este bloque (desde <section...> hasta
</section>) y pegalo en un bloque de "HTML personalizado" en
Tiendanube, donde quieras que aparezca en la página.
Los datos editables (precio, WhatsApp, reseñas) están marcados
con comentarios EDITAR.
============================================================ -->
<section id="sarlex-confianza">
<style>
#sarlex-confianza {
--bg: #F1EFE9;
--ink: #0F0F0F;
--paper: #FFFFFF;
--blue: #1E3AF5;
--yellow: #FFC93C;
--line: #D8D4C8;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg);
color: var(--ink);
padding: 56px 20px 64px;
box-sizing: border-box;
}
#sarlex-confianza *, #sarlex-confianza *::before, #sarlex-confianza *::after {
box-sizing: border-box;
}
#sarlex-confianza .sx-wrap {
max-width: 640px;
margin: 0 auto;
}
#sarlex-confianza .sx-tag {
display: inline-block;
background: var(--ink);
color: var(--paper);
font-weight: 700;
font-size: 13px;
padding: 6px 12px;
transform: rotate(-2deg);
margin-bottom: 22px;
}
#sarlex-confianza h2 {
font-family: 'Archivo Black', 'Inter', sans-serif;
font-size: 40px;
line-height: 1.05;
letter-spacing: -0.5px;
margin: 0 0 18px;
}
#sarlex-confianza h2 span {
color: var(--blue);
}
#sarlex-confianza .sx-sub {
font-size: 17px;
line-height: 1.55;
color: #45443E;
max-width: 46ch;
margin: 0 0 36px;
}
#sarlex-confianza .sx-list {
list-style: none;
margin: 0 0 28px;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
#sarlex-confianza .sx-item {
background: var(--paper);
border: 1px solid var(--line);
border-left: 6px solid var(--blue);
padding: 18px 18px;
display: flex;
gap: 14px;
align-items: flex-start;
}
#sarlex-confianza .sx-item b {
display: block;
font-size: 16px;
margin-bottom: 3px;
}
#sarlex-confianza .sx-item p {
margin: 0;
font-size: 14.5px;
color: #55534B;
line-height: 1.4;
}
#sarlex-confianza .sx-num {
font-family: 'Archivo Black', sans-serif;
font-size: 20px;
color: var(--blue);
min-width: 28px;
}
#sarlex-confianza .sx-cta {
background: var(--ink);
color: var(--paper);
padding: 22px 20px;
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 44px;
}
#sarlex-confianza .sx-cta-txt b {
display: block;
font-size: 16px;
margin-bottom: 2px;
}
#sarlex-confianza .sx-cta-txt p {
margin: 0;
font-size: 13.5px;
color: #C9C9C9;
}
#sarlex-confianza .sx-btn {
margin-left: auto;
flex-shrink: 0;
background: var(--yellow);
color: var(--ink);
font-weight: 700;
font-size: 14px;
text-decoration: none;
padding: 12px 16px;
white-space: nowrap;
}
#sarlex-confianza .sx-proof-title {
font-family: 'Archivo Black', sans-serif;
font-size: 26px;
line-height: 1.15;
margin: 0 0 24px;
}
#sarlex-confianza .sx-reviews {
display: flex;
flex-direction: column;
gap: 12px;
}
#sarlex-confianza .sx-review {
background: var(--paper);
border: 1px solid var(--line);
padding: 16px 18px;
font-size: 14.5px;
line-height: 1.5;
}
#sarlex-confianza .sx-review b {
display: block;
font-size: 13.5px;
margin-bottom: 4px;
}
@media (min-width: 640px) {
#sarlex-confianza { padding: 72px 32px 80px; }
#sarlex-confianza h2 { font-size: 52px; }
}
</style>
<div class="sx-wrap">
<span class="sx-tag">Compra sin vueltas</span>
<h2>Tu pack sale <span>hoy</span>, no en tres semanas</h2>
<p class="sx-sub">
Confirmamos tu talle y tu dirección antes de despachar, así el pedido
llega bien a la primera. Envío gratis a todo el país.
</p>
<ul class="sx-list">
<li class="sx-item">
<span class="sx-num">01</span>
<div>
<b>Envío gratis a todo el país</b>
<p>Pack de 3 remeras por $49.999, sin cargo extra de envío.</p>
</div>
</li>
<li class="sx-item">
<span class="sx-num">02</span>
<div>
<b>Pago seguro en la web</b>
<p>Tarjeta o el medio que prefieras, procesado por la tienda oficial.</p>
</div>
</li>
<li class="sx-item">
<span class="sx-num">03</span>
<div>
<b>Confirmamos por WhatsApp</b>
<p>Antes de despachar te escribimos para chequear talle y dirección.</p>
</div>
</li>
<li class="sx-item">
<span class="sx-num">04</span>
<div>
<b>Algodón peinado 24/1</b>
<p>La misma calidad que se ve en la foto, no un producto genérico.</p>
</div>
</li>
</ul>
<div class="sx-cta">
<div class="sx-cta-txt">
<b>¿Dudas antes de comprar?</b>
<p>Te contestamos directo por WhatsApp.</p>
</div>
<!-- EDITAR: si el número cambia, actualizalo también en el link -->
<a class="sx-btn" href="https://wa.me/5491132639822" target="_blank" rel="noopener">Escribinos</a>
</div>
<h3 class="sx-proof-title">Lo que dicen los que ya recibieron el suyo</h3>
<div class="sx-reviews">
<!-- EDITAR: reemplazá estas 3 por reseñas reales de tus clientes -->
<div class="sx-review">
<b>Nombre del cliente — Ciudad</b>
Comentario real del cliente sobre el producto y la entrega.
</div>
<div class="sx-review">
<b>Nombre del cliente — Ciudad</b>
Comentario real del cliente sobre el producto y la entrega.
</div>
<div class="sx-review">
<b>Nombre del cliente — Ciudad</b>
Comentario real del cliente sobre el producto y la entrega.
</div>
</div>
</div>
</section>
