/*
landing.css
Estilos de la landing: hero con captura, beneficios, artículo, producto destacado y CTA final.
*/

/* Hero */
.hero { position: relative; overflow: hidden; text-align: center; background: linear-gradient(160deg, var(--color-primario-50) 0%, var(--fondo-principal) 55%, var(--color-acento-50) 100%); border-radius: var(--radio-xxl); padding: var(--espacio-16) var(--espacio-6); margin-bottom: var(--espacio-16); }
.hero::before { content: ''; position: absolute; top: -80px; right: -80px; width: 240px; height: 240px; border-radius: var(--radio-completo); background: radial-gradient(circle, rgba(45, 106, 79, 0.12) 0%, transparent 70%); }
.hero-eyebrow { position: relative; margin-bottom: var(--espacio-4); color: var(--color-acento-600); }
.hero-titulo { position: relative; font-size: var(--tamano-h1); max-width: 720px; margin: 0 auto var(--espacio-4); }
.hero-subtitulo { position: relative; font-size: 1.25rem; color: var(--texto-secundario); max-width: 640px; margin: 0 auto var(--espacio-10); }
@media (max-width: 767px) { .hero { padding: var(--espacio-10) var(--espacio-4); } .hero-titulo { font-size: var(--tamano-h2); } }

/* Formulario de captura */
.captura-formulario { position: relative; background-color: var(--fondo-principal); border-radius: var(--radio-xl); padding: var(--espacio-8); max-width: 480px; margin: 0 auto; box-shadow: var(--sombra-lg); text-align: left; }
.captura-formulario h3 { text-align: center; margin-bottom: var(--espacio-6); }
.campo-grupo { margin-bottom: var(--espacio-4); }
.campo-grupo label { display: block; font-weight: var(--peso-semibold); font-size: var(--tamano-small); margin-bottom: var(--espacio-2); }
.campo-grupo input, .campo-grupo select { width: 100%; padding: var(--espacio-3) var(--espacio-4); font-family: var(--fuente-principal); font-size: 1rem; color: var(--texto-principal); background-color: var(--fondo-principal); border: 2px solid var(--color-neutro-200); border-radius: var(--radio-lg); transition: border-color var(--transicion-rapida); }
.campo-grupo input:focus, .campo-grupo select:focus { outline: none; border-color: var(--color-primario-500); box-shadow: 0 0 0 3px var(--color-primario-100); }
.campo-grupo input.invalido, .campo-grupo select.invalido { border-color: var(--color-error); }
.campo-error { display: none; color: var(--color-error); font-size: var(--tamano-tiny); margin-top: var(--espacio-1); }
.campo-grupo input.invalido + .campo-error, .campo-grupo select.invalido + .campo-error, .campo-grupo:has(.invalido) .campo-error { display: block; }
.campo-celular-grupo { display: flex; gap: var(--espacio-2); }
.campo-pais { flex: 0 0 45%; }
.campo-numero { flex: 1; }
.formulario-enviar { width: 100%; margin-top: var(--espacio-6); }
.formulario-mensaje { display: none; margin-top: var(--espacio-4); padding: var(--espacio-3); border-radius: var(--radio-lg); font-size: var(--tamano-small); text-align: center; }
.formulario-mensaje.exito { display: block; background-color: var(--color-primario-100); color: var(--color-primario-800); }
.formulario-mensaje.error { display: block; background-color: rgba(214, 69, 69, 0.1); color: var(--color-error); }

/* Eyebrows y títulos de sección */
.seccion-eyebrow { text-align: center; margin-bottom: var(--espacio-2); color: var(--color-acento-600); }
.beneficios-seccion h3, .articulo-seccion h3 { text-align: center; margin-bottom: var(--espacio-8); }
.beneficios-seccion { margin-bottom: var(--espacio-16); }

/* Beneficios */
.beneficios-grid { display: grid; grid-template-columns: 1fr; gap: var(--espacio-5); }
@media (min-width: 768px) { .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); }

/* Artículo */
.articulo-seccion { background-color: var(--fondo-secundario); border-radius: var(--radio-xxl); padding: var(--espacio-12) var(--espacio-6); margin-bottom: var(--espacio-16); }
.articulo-texto { max-width: 640px; margin: 0 auto; }
.articulo-lista { list-style: none; padding: 0; margin-bottom: var(--espacio-8); }
.articulo-lista li { position: relative; padding-left: var(--espacio-8); margin-bottom: var(--espacio-3); }
.articulo-lista li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: var(--radio-completo); background-color: var(--color-primario-100); color: var(--color-primario-700); font-size: var(--tamano-tiny); font-weight: var(--peso-bold); display: flex; align-items: center; justify-content: center; }
.articulo-texto .btn { display: block; width: fit-content; margin: 0 auto; }

/* Producto destacado */
.producto-destacado { display: flex; flex-direction: column; gap: var(--espacio-8); align-items: center; margin-bottom: var(--espacio-16); }
@media (min-width: 768px) { .producto-destacado { flex-direction: row; } }
.producto-imagen { flex: 0 0 45%; }
.producto-imagen img { width: 100%; border-radius: var(--radio-xxl); box-shadow: var(--sombra-lg); }
.producto-info .seccion-eyebrow { text-align: left; }
.producto-info p { color: var(--texto-secundario); }
.producto-precio { font-family: var(--fuente-titulos); font-size: var(--tamano-h2); font-weight: var(--peso-extrabold); color: var(--color-primario-700); margin-bottom: var(--espacio-6); }

/* CTA final */
.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); }
.cta-final h3 { color: var(--texto-inverso); margin-bottom: var(--espacio-3); }
.cta-final p { color: var(--color-primario-100); max-width: 560px; margin: 0 auto var(--espacio-8); }
.cta-final .btn-secundario { color: var(--texto-inverso); border-color: var(--texto-inverso); }
.cta-final .btn-secundario:hover:not(:disabled) { background-color: var(--texto-inverso); color: var(--color-primario-800); }
@media (max-width: 767px) { .campo-celular-grupo { flex-direction: column; } .campo-pais { flex: 1; } }