Terminos y condiciones
/* Contenedor */
.promo-card{
display:flex;
gap:22px;
align-items:center;
justify-content:space-between;
background: #ffffff;
border: 2px solid #1fa65a; /* verde */
border-radius: 10px;
padding: 18px;
max-width: 980px;
box-shadow: 0 4px 12px rgba(0,0,0,0.04);
font-family: Arial, sans-serif;
color: #1f2b22;
}
.promo-left{ flex:1; min-width:280px; }
.promo-right{ width:320px; }
.promo-card h2{
margin:0 0 8px 0;
font-size: 20px;
color:#0b6b3f;
}
.promo-card .big{
color:#0b6b3f;
font-size:28px;
font-weight:700;
margin-left:6px;
}
.promo-sub{
margin:0 0 14px 0;
color:#3d5a48;
font-size:14px;
}
.promo-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.btn{
display:inline-block;
padding:9px 14px;
border-radius:8px;
text-decoration:none;
font-weight:600;
cursor:pointer;
border:none;
}
.btn-shop{
background:#1fa65a;
color:#ffffff;
}
.btn-shop:hover{ filter:brightness(0.95); }
.btn-terms{
background:transparent;
border:2px solid #1fa65a;
color:#1fa65a;
}
.btn-terms:hover{ background:#f0fff5; }
.promo-features{
list-style:none;
margin:0;
padding:0;
color:#264235;
font-size:14px;
}
.promo-features li{ margin:6px 0; }
/* Modal */
.promo-modal{
display:none;
position:fixed;
inset:0;
background: rgba(0,0,0,0.45);
align-items:center;
justify-content:center;
z-index:10000;
padding:20px;
}
.promo-modal[aria-hidden="false"]{ display:flex; }
.promo-modal-content{
background:#fff;
width:100%;
max-width:720px;
border-radius:10px;
padding:20px 22px;
position:relative;
box-shadow:0 8px 24px rgba(0,0,0,0.2);
color:#163c2b;
}
.promo-modal h3{ margin-top:0; color:#0b6b3f; }
.promo-modal-body p, .promo-modal-body li{ font-size:14px; line-height:1.5; color:#23392f; }
.promo-modal-close{
position:absolute;
top:10px;
right:10px;
border:none;
background:transparent;
font-size:18px;
cursor:pointer;
}
/* Responsive */
@media (max-width:720px){
.promo-card{ flex-direction:column; align-items:flex-start; }
.promo-right{ width:100%; }
}
(function(){
const btnTerms = document.getElementById('promo-terms');
const modal = document.getElementById('promo-modal');
const modalClose = document.getElementById('promo-modal-close');
const goShop = document.getElementById('promo-go-shop');
btnTerms.addEventListener('click', () => {
modal.setAttribute('aria-hidden','false');
// focus trap simple
modal.querySelector('.promo-modal-content').focus();
});
modalClose.addEventListener('click', () => {
modal.setAttribute('aria-hidden','true');
btnTerms.focus();
});
// cerrar clic fuera del contenido
modal.addEventListener('click', (e) => {
if(e.target === modal) {
modal.setAttribute('aria-hidden','true');
btnTerms.focus();
}
});
// Si quieres que el botón "Ir a la tienda" lleve a una sección concreta:
// goShop.href = "/tienda"; -- ya viene así por defecto. Cambia la ruta si tu tienda está en otra URL.
})();
