/*
producto.css
Estilos de la página de producto: hero, precio y acciones, beneficios, pasos, ciencia y CTA final.
*/
/* Hero del producto */
.producto-hero { display: flex; flex-direction: column; gap: var(--espacio-8); background: linear-gradient(135deg, var(--color-primario-50) 0%, var(--fondo-principal) 60%, var(--color-acento-50) 100%); border-radius: var(--radio-xxl); padding: var(--espacio-12) var(--espacio-8); margin-bottom: var(--espacio-16); }
@media (min-width: 768px) { .producto-hero { flex-direction: row; align-items: center; padding: var(--espacio-12); } }
.producto-info { flex: 1; }
.producto-info h6 { margin-bottom: var(--espacio-2); color: var(--color-acento-600); }
.producto-descripcion { font-size: 1.125rem; color: var(--texto-secundario); line-height: var(--linea-relajada); margin-bottom: var(--espacio-6); }
.producto-imagen { flex: 0 0 40%; display: flex; justify-content: center; }
.producto-imagen img { width: 100%; border-radius: var(--radio-xxl); box-shadow: var(--sombra-xl); }
/* Precio y acciones */
.producto-precio { margin-bottom: var(--espacio-6); }
.precio-monto { display: block; font-family: var(--fuente-titulos); font-size: var(--tamano-h1); font-weight: var(--peso-extrabold); color: var(--color-primario-700); letter-spacing: var(--letras-compacto); }
.precio-nota { display: block; font-size: var(--tamano-small); color: var(--texto-terciario); margin-top: var(--espacio-1); }
.producto-acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-3); }
/* Beneficios (grid 2x2) */
.producto-beneficios h6, .producto-como-funciona h6 { text-align: center; margin-bottom: var(--espacio-2); color: var(--color-acento-600); }
.producto-beneficios h3, .producto-como-funciona h3, .producto-ciencia h3, .producto-cta-final h3 { text-align: center; margin-bottom: var(--espacio-8); }
.producto-beneficios { margin-bottom: var(--espacio-16); }
.producto-beneficios-grid { display: grid; grid-template-columns: 1fr; gap: var(--espacio-5); }
@media (min-width: 768px) { .producto-beneficios-grid { grid-template-columns: repeat(2, 1fr); } }
.beneficio-card { background-color: var(--fondo-secundario); border-radius: var(--radio-xl); padding: var(--espacio-6); border-top: 4px solid var(--color-primario-500); transition: all var(--transicion-normal); }
.beneficio-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-md); border-top-color: var(--color-acento-500); }
.beneficio-card h4 { margin-bottom: var(--espacio-2); }
.beneficio-card p { margin: 0; color: var(--texto-secundario); font-size: var(--tamano-small); line-height: var(--linea-relajada); }
/* Cómo funciona (pasos numerados) */
.producto-como-funciona { margin-bottom: var(--espacio-16); }
.pasos-lista { list-style: none; counter-reset: paso; padding: 0; max-width: var(--ancho-contenido-medio); margin: 0 auto; }
.pasos-lista li { counter-increment: paso; position: relative; padding: var(--espacio-4) var(--espacio-4) var(--espacio-4) var(--espacio-16); margin-bottom: var(--espacio-4); background-color: var(--fondo-principal); border: 1px solid var(--color-neutro-100); border-radius: var(--radio-xl); box-shadow: var(--sombra-sm); }
.pasos-lista li::before { content: counter(paso); position: absolute; left: var(--espacio-4); top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: var(--radio-completo); background: linear-gradient(135deg, var(--color-primario-500), var(--color-primario-700)); color: var(--texto-inverso); font-family: var(--fuente-titulos); font-weight: var(--peso-bold); display: flex; align-items: center; justify-content: center; }
.pasos-lista li strong { color: var(--color-primario-700); }
/* Ciencia */
.producto-ciencia { background-color: var(--fondo-secundario); border-radius: var(--radio-xxl); padding: var(--espacio-12) var(--espacio-6); margin-bottom: var(--espacio-16); }
.ciencia-contenido { max-width: var(--ancho-contenido-medio); margin: 0 auto; }
.ciencia-contenido p { line-height: var(--linea-relajada); margin-bottom: var(--espacio-4); }
.ciencia-contenido p:last-child { margin-bottom: 0; }
/* CTA final */
.producto-cta-final { background: linear-gradient(135deg, var(--color-primario-700) 0%, var(--color-primario-900) 100%); border-radius: var(--radio-xxl); padding: var(--espacio-12) var(--espacio-6); text-align: center; margin-bottom: var(--espacio-8); }
.producto-cta-final h3 { color: var(--texto-inverso); margin-bottom: var(--espacio-3); }
.producto-cta-final p { color: var(--color-primario-100); max-width: 560px; margin: 0 auto var(--espacio-8); }
.producto-cta-final .btn-comprar { box-shadow: var(--sombra-lg); color: var(--texto-inverso); }
/* Responsive */
@media (max-width: 767px) { .producto-hero { padding: var(--espacio-8) var(--espacio-4); } .producto-imagen { order: -1; flex: 1; } .producto-acciones { flex-direction: column; } .producto-acciones .btn { width: 100%; } }