/*
/* Reset para body y html - sin márgenes ni padding */
html {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
overflow-x: hidden;
}
body {
margin: 0 !important;
padding: 0 !important;
padding-top: 80px !important;
width: 100% !important;
overflow-x: hidden;
position: relative;
}
/* Estilos para main - igual que React */
main {
margin: 0;
padding: 0;
width: 100%;
position: relative;
}
/* Estilos del Header Canastas de Víveres - Exactamente como React */
.header-canastas {
background: #ffffff;
border-bottom: 1px solid #d1d5db;
/* shadow-sm de Tailwind */
--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 1000 !important;
width: 100% !important;
margin: 0 !important;
display: block !important;
}
.header-canastas .container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-inline: calc(0.25rem * 6); /* px-6 = 1.5rem = 24px */
}
@media (min-width: 1024px) {
.header-canastas .container {
padding-inline: calc(0.25rem * 12); /* lg:px-12 = 3rem = 48px */
}
}
/* Header Content - Contenedor principal flex */
.header-canastas .header-content {
display: flex;
align-items: center;
justify-content: space-between;
height: 80px;
}
/* Logo Button */
.header-canastas .logo-btn {
display: flex;
align-items: center;
background: none;
border: none;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
cursor: pointer;
}
.header-canastas .logo-btn .logo-img {
height: 100px;
width: auto;
max-width: 280px;
object-fit: contain;
transition: opacity 0.15s ease;
}
.header-canastas .logo-btn:hover .logo-img {
opacity: 0.8;
}
.header-canastas .logo-btn:focus,
.header-canastas .logo-btn:focus-visible {
outline: none;
}
/* Desktop Navigation */
.header-canastas .nav-desktop {
display: none;
}
@media (min-width: 1024px) {
.header-canastas .nav-desktop {
display: flex;
align-items: center;
gap: 2rem; /* gap-8 = 2rem */
}
}
.header-canastas .nav-desktop .nav-link {
font-family: Montserrat, sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
color: #111827;
background: none;
border: none;
cursor: pointer;
padding: 0;
margin: 0;
font: inherit;
line-height: inherit;
transition-property: color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 0.15s;
text-decoration: none;
display: inline-block;
}
.header-canastas .nav-desktop .nav-link:focus,
.header-canastas .nav-desktop .nav-link:focus-visible {
outline: none;
}
.header-canastas .nav-desktop .nav-link:hover,
.header-canastas .nav-desktop .nav-link.active {
color: #70a83b;
}
/* Botón CTA - Button component styles */
.header-canastas .btn-cotizacion {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
white-space: nowrap;
font-size: 0.875rem;
font-weight: 500;
font-family: Montserrat, sans-serif;
height: 2.25rem; /* h-9 */
padding: 0.75rem 1.5rem; /* py-3 px-6 */
background: #70a83b;
color: #ffffff;
border-radius: 0.5rem; /* rounded-lg */
border: none;
cursor: pointer;
text-decoration: none;
transition-property: background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 0.15s;
font-size: 16px;
font-weight: 600;
line-height: 1.5;
pointer-events: auto;
opacity: 1;
outline: none;
}
.header-canastas .btn-cotizacion:hover {
background: #608d33;
color: #ffffff;
}
.header-canastas .btn-cotizacion:focus,
.header-canastas .btn-cotizacion:focus-visible {
outline: none;
border-color: var(--ring, oklch(0.708 0 0));
--tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow, 0 0 #0000), var(--tw-inset-ring-shadow, 0 0 #0000), var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-color: color-mix(in oklab, var(--ring, oklch(0.708 0 0)) 50%, transparent);
}
.header-canastas .btn-cotizacion svg {
pointer-events: none;
flex-shrink: 0;
width: 1rem;
height: 1rem;
}
/* Mobile Menu Button */
.header-canastas .mobile-menu-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
background: transparent;
border: none;
cursor: pointer;
color: #111827;
}
@media (min-width: 1024px) {
.header-canastas .mobile-menu-btn {
display: none;
}
}
.header-canastas .mobile-menu-btn:focus {
outline: none;
box-shadow: none;
}
.header-canastas .mobile-menu-btn .menu-icon,
.header-canastas .mobile-menu-btn .close-icon {
display: block;
width: 24px;
height: 24px;
}
/* Mobile Menu */
.header-canastas .mobile-menu {
display: none;
padding: 1rem 0;
border-top: 1px solid #d1d5db;
}
.header-canastas .mobile-menu .nav-mobile {
display: flex;
flex-direction: column;
gap: 1rem; /* gap-4 = 1rem */
}
.header-canastas .mobile-menu .nav-mobile .nav-link {
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 500;
color: #111827;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem 0; /* py-2 */
transition-property: color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 0.15s;
text-align: left;
font: inherit;
line-height: inherit;
margin: 0;
text-decoration: none;
display: block;
width: 100%;
}
.header-canastas .mobile-menu .nav-mobile .nav-link:focus,
.header-canastas .mobile-menu .nav-mobile .nav-link:focus-visible {
outline: none;
}
.header-canastas .mobile-menu .nav-mobile .nav-link:hover,
.header-canastas .mobile-menu .nav-mobile .nav-link.active {
color: #70a83b;
}
.header-canastas .mobile-menu .btn-cotizacion-mobile {
width: 100%;
text-align: center;
margin-top: 0.5rem;
}
/* Responsive */
@media (max-width: 576px) {
.header-canastas .container {
padding-inline: calc(0.25rem * 4); /* px-4 = 1rem = 16px en móvil pequeño */
}
.header-canastas .logo-btn .logo-img {
height: 60px;
max-width: 220px;
}
}
/* Estilos del Footer Canastas de Víveres */
/* Asegurar que el body use flexbox para empujar el footer al final */
body {
display: flex !important;
flex-direction: column !important;
min-height: 100vh !important;
}
main {
flex: 1 !important;
}
.footer-canastas {
background-color: #2F4A25; /* Color exacto del diseño */
color: #ffffff;
width: 100%;
margin: 0;
padding: 0;
margin-top: auto;
}
.footer-canastas .container {
max-width: 1100px;
margin: 0 auto;
padding-block: 2rem; /* 48px - igual que py-12 */
}
/* Para pantallas grandes (>= 64rem / 1024px) */
/* Footer Top - 4 Columnas */
.footer-top {
margin-bottom: 2rem;
}
.footer-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3rem;
margin-top: 2rem;
}
/* Títulos de sección */
.footer-widget h3 {
font-family: Montserrat, sans-serif;
font-size: 20px;
font-weight: 700;
color: #ffffff;
margin-bottom: 1.5rem;
text-align: left;
}
/* Columna 1: Canastas de Víveres */
.footer-brand h3 {
margin-bottom: 1rem;
}
.footer-brand p {
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
text-align: left;
margin: 0;
}
/* Columna 2: Navegación */
.footer-nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-nav ul li {
margin-bottom: 0.5rem;
}
.footer-nav ul li a {
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-nav ul li a:hover {
color: #ffffff;
}
/* Columna 3: Contacto */
.footer-contact .contact-item {
display: flex;
align-items: center;
margin-bottom: 1rem;
font-family: Montserrat, sans-serif;
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
}
.footer-contact .contact-item .icon {
width: 20px;
height: 20px;
margin-right: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
}
.footer-contact .contact-item .icon svg {
width: 100%;
height: 100%;
fill: none;
stroke: #ffffff;
color: #ffffff;
}
.footer-contact .contact-item span {
flex: 1;
}
.footer-contact .contact-item a {
opacity: .75;
font-family: Montserrat, sans-serif;
font-size: 14px;
color: #ffffff; /* Color naranja/marrón para el email */
text-decoration: none;
transition: color 0.3s ease;
}
.footer-contact .contact-item a:hover {
color: #d97706; /* Color naranja más claro al hover */
}
/* Columna 4: Síguenos */
.footer-social .social-icons {
display: flex;
gap: 1rem;
list-style: none;
padding: 0;
margin: 0;
}
.footer-social .social-icons li {
width: 40px;
height: 40px;
border-radius: 50%;
background: oklab(0.999994 0.0000455678 0.0000200868 / 0.1);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
cursor: pointer;
}
.footer-social .social-icons li:hover {
background: rgb(112, 168, 59);
border-color: #ffffff;
color: #ffffff;
opacity: 0.8;
}
.footer-social .social-icons li svg {
width: 20px;
height: 20px;
fill: none;
stroke: #ffffff;
color: #ffffff;
}
.footer-social .social-icons li a {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: inherit;
}
.footer-social .social-icons li a:hover {
opacity: 0.7;
}
/* Separador horizontal */
.footer-separator {
height: 1px;
opacity: .25;
background: rgba(255, 255, 255, 0.2); /* Separador más claro como en la imagen */
margin-block: 2rem; /* Usar margin-block para evitar distorsión */
width: 100%;
}
.footer-bottom .container {
padding-block-start: 0;
padding-block-end: 2rem;
padding-left: 0;
padding-right: 0;
}
.footer-copyright {
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 400;
opacity: .75;
text-align: center !important;
color: #f8f5ec;
margin: 0;
margin-block: 25px;
}
/* Responsive */
@media (max-width: 991px) {
.footer-row {
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem;
}
}
@media (max-width: 576px) {
.footer-row {
grid-template-columns: 1fr;
gap: 2rem;
.footer-widget h3 {
font-size: 16px;
}
.footer-brand p,
.footer-nav ul li a,
.footer-contact .contact-item {
font-size: 13px;
}
}
}
/* Estilos de la Sección Home */
.home-hero {
background: #ffffff;
padding: 4rem 0;
width: 100%;
}
@media (min-width: 1024px) {
.home-hero {
padding: 6rem 0;
}
}
.home-hero .container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-inline: calc(0.25rem * 6);
/* px-6 = 1.5rem = 24px */
}
@media (min-width: 1024px) {
.home-hero .container {
padding-inline: calc(0.25rem * 12);
/* lg:px-12 = 3rem = 48px */
}
}
.home-hero-content {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: center;
}
@media (min-width: 1024px) {
.home-hero-content {
grid-template-columns: 1fr 1fr;
gap: 4rem;
}
}
/* Columna Izquierda - Texto y Botones */
.home-hero-text {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.home-hero-title {
font-family: Montserrat, sans-serif;
font-family: Montserrat, sans-serif;
font-size: clamp(32px, 5vw, 48px);
font-weight: 700;
line-height: 1.2;
color: #2f4a25;
margin: 0;
}
.home-hero-description {
font-size: 18px;
line-height: 1.7;
font-family: Montserrat, sans-serif;
font-weight: 400;
color: #4b5563;
margin: 0;
}
.home-hero-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 0.5rem;
}
@media (min-width: 640px) {
.home-hero-buttons {
flex-direction: row;
}
}
.btn-primary-green {
font-family: Montserrat, sans-serif;
background: #70a83b;
color: #ffffff;
padding: 0.425rem 2rem;
border-radius: 10px;
font-weight: 600;
font-size: 1rem;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
}
.btn-primary-green:hover {
background: #5d8a2f;
color: #ffffff;
}
.btn-outline-green {
font-family: Montserrat, sans-serif;
background: #ffffff;
color: #70a83b;
padding: 0.525rem 2rem;
border-radius: 10px;
font-weight: 600;
font-size: 1rem;
text-decoration: none;
border: 2px solid #70a83b;
cursor: pointer;
transition: all 0.3s ease;
display: inline-block;
text-align: center;
}
.btn-outline-green:hover {
background: #70a83b;
color: #ffffff;
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(112, 168, 59, 0.3);
}
/* Botón WhatsApp con el mismo estilo que btn-primary-green */
.btn-whatsapp {
font-family: Montserrat, sans-serif !important;
background: #70a83b !important;
color: #ffffff !important;
padding: 0.425rem 2rem !important;
border-radius: 10px !important;
font-weight: 600 !important;
font-size: 1rem !important;
text-decoration: none !important;
border: none !important;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex !important;
align-items: center;
justify-content: center;
text-align: center;
gap: 0.5rem;
}
.btn-whatsapp:hover {
background: #5d8a2f !important;
color: #ffffff !important;
text-decoration: none !important;
}
/* Columna Derecha - Imagen */
.home-hero-image {
width: 100%;
height: auto;
}
.home-hero-image-wrapper {
width: 100%;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.home-hero-image-wrapper img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
/* Responsive Hero */
@media (max-width: 640px) {
.btn-primary-green,
.btn-outline-green {
width: 100%;
}
}
@media (max-width: 576px) {
.home-hero {
padding: 2.5rem 0;
}
.home-hero .container {
padding-inline: calc(0.25rem * 6);
/* px-6 = 1.5rem = 24px */
}
.home-hero-title {
font-size: 2rem;
}
.home-hero-description {
font-size: 1rem;
}
}
/* Sección Categorías de Presentación */
.home-categorias {
background: #f8f5ec;
padding: 4rem 0;
width: 100%;
}
@media (min-width: 1024px) {
.home-categorias {
padding: 6rem 0;
}
}
.home-categorias .container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-inline: calc(0.25rem * 6);
/* px-6 = 1.5rem = 24px */
}
@media (min-width: 1024px) {
.home-categorias .container {
padding-inline: calc(0.25rem * 12);
/* lg:px-12 = 3rem = 48px */
}
}
.categorias-header {
text-align: center;
margin-bottom: 3rem;
}
.categorias-title {
font-family: Montserrat, sans-serif;
font-size: clamp(28px, 4vw, 36px);
font-weight: 600;
color: #2f4a25;
margin: 0 0 1rem 0;
}
.categorias-subtitle {
font-family: Montserrat, sans-serif;
font-size: 17px;
font-weight: 400;
color: #4b5563;
margin: 0 auto;
line-height: 1.6;
max-width: 42rem;
}
.categorias-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 640px) {
.categorias-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.categorias-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.categoria-card {
background: #ffffff;
border-radius: 0.875rem;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
min-height: 450px;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.categoria-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.categoria-card-image {
width: 100%;
position: relative;
padding-top: 106%; /* Mantener proporción como en el proyecto funcional */
overflow: hidden;
background: #f3f4f6;
}
.categoria-card-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.categoria-card:hover .categoria-card-image img {
transform: scale(1.05);
}
.categoria-card-content {
padding: 2rem 1.5rem;
display: flex;
flex-direction: column;
flex: 1;
gap: 1rem;
}
.categoria-card-title {
font-family: Montserrat, sans-serif;
font-size: 1.25rem;
font-weight: 600;
color: #2f4a25;
margin: 0;
}
.categoria-card-description {
font-family: Montserrat, sans-serif;
font-size: 0.9375rem;
font-weight: 400;
color: #4b5563;
line-height: 1.6;
margin: 0;
flex: 1;
}
.btn-categoria {
font-family: Montserrat, sans-serif;
background: #ffffff;
color: #70a83b;
padding: 0.425rem 1.5rem;
border-radius: 0.5rem;
font-weight: 600;
font-size: 0.9375rem;
text-decoration: none;
border: 1px solid #70a83b;
cursor: pointer;
transition: all 0.3s ease;
display: inline-block;
text-align: center;
margin-top: auto;
width: 100%;
pointer-events: none; /* Evita que el botón capture el click, toda la tarjeta es clickeable */
}
.btn-categoria:hover {
background: #70a83b;
color: #ffffff;
text-decoration: none;
}
/* Responsive Categorías */
@media (max-width: 576px) {
.home-categorias {
padding: 3rem 0;
}
.home-categorias .container {
padding-inline: calc(0.25rem * 6);
/* px-6 = 1.5rem = 24px */
}
.categorias-header {
margin-bottom: 2rem;
}
.categorias-title {
font-size: 1.75rem;
}
.categorias-subtitle {
font-size: 1rem;
}
}
/* Sección Beneficios para tu empresa */
.home-beneficios {
background: #ffffff;
padding: 4rem 0;
width: 100%;
}
@media (min-width: 1024px) {
.home-beneficios {
padding: 6rem 0;
}
}
.home-beneficios .container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-inline: calc(0.25rem * 6);
/* px-6 = 1.5rem = 24px */
}
@media (min-width: 1024px) {
.home-beneficios .container {
padding-inline: calc(0.25rem * 12);
/* lg:px-12 = 3rem = 48px */
}
}
.beneficios-header {
text-align: center;
margin-bottom: 3rem;
}
.beneficios-title {
font-family: Montserrat, sans-serif;
font-size: clamp(28px, 4vw, 36px);
font-weight: 600;
color: #2f4a25;
margin: 0 0 1rem 0;
}
.beneficios-subtitle {
font-family: Montserrat, sans-serif;
font-size: 17px;
font-weight: 400;
color: #4b5563;
margin: 0 auto;
line-height: 1.6;
max-width: 42rem;
}
.beneficios-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 640px) {
.beneficios-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.beneficios-grid {
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
}
.beneficio-item {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.beneficio-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: #f8f5ec;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0;
}
.beneficio-icon svg {
width: 32px;
height: 32px;
stroke: #70a83b;
fill: none;
}
.beneficio-title {
font-family: Montserrat, sans-serif;
font-size: 1.125rem;
font-weight: 600;
color: #2f4a25;
margin: 0;
}
.beneficio-description {
font-family: Montserrat, sans-serif;
font-size: 0.9375rem;
font-weight: 400;
color: #4b5563;
line-height: 1.6;
margin: 0;
}
/* Responsive Beneficios */
@media (max-width: 576px) {
.home-beneficios {
padding: 3rem 0;
}
.home-beneficios .container {
padding-inline: calc(0.25rem * 6);
/* px-6 = 1.5rem = 24px */
}
.beneficios-header {
margin-bottom: 2rem;
}
.beneficios-title {
font-size: 1.75rem;
}
.beneficios-subtitle {
font-size: 1rem;
}
}
/* Sección Preguntas Frecuentes (FAQ) */
.home-faq {
background: #f8f5ec;
padding: 4rem 0;
width: 100%;
}
@media (min-width: 1024px) {
.home-faq {
padding: 6rem 0;
}
}
.home-faq .container {
max-width: 800px;
margin-left: auto;
margin-right: auto;
padding-inline: calc(0.25rem * 6);
/* px-6 = 1.5rem = 24px */
}
@media (min-width: 1024px) {
.home-faq .container {
padding-inline: calc(0.25rem * 12);
/* lg:px-12 = 3rem = 48px */
}
}
.faq-header {
text-align: center;
margin-bottom: 3rem;
}
.faq-title {
font-family: Montserrat, sans-serif;
font-size: clamp(28px, 4vw, 36px) !important;
font-weight: 600;
color: #2f4a25 !important;
margin: 0 0 1rem 0;
}
.faq-subtitle {
font-family: Montserrat, sans-serif;
font-size: 17px;
font-weight: 400;
color: #4b5563;
margin: 0;
}
.faq-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.faq-item {
background: #ffffff;
border-radius: 0.875rem;
border: 1px solid #d1d5db;
padding: 0.75rem;
box-shadow: none;
overflow: hidden;
}
.faq-item:last-child {
border-bottom: none;
}
.faq-question {
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 600;
text-align: left;
width: 100%;
flex: 1;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin: 0;
padding: 0.5rem 0;
cursor: pointer;
display: flex;
color: #2f4a25;
border-radius: 0.375rem;
background: transparent;
border: none;
outline: none;
}
.faq-question:hover {
color: #70a83b;
text-decoration: underline;
}
.faq-question:focus,
.faq-question:focus-visible {
outline: none;
border-color: var(--ring, oklch(0.708 0 0));
--tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow, 0 0 #0000), var(--tw-inset-ring-shadow, 0 0 #0000), var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-color: color-mix(in oklab, var(--ring, oklch(0.708 0 0)) 50%, transparent);
}
.faq-question:disabled {
pointer-events: none;
opacity: 0.5;
}
.faq-question span {
flex: 1;
}
.faq-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
pointer-events: none;
color: var(--muted-foreground, #717182);
transition: transform 0.2s ease-out;
transform: translateY(0.125rem);
}
.faq-item[data-state="open"] .faq-icon {
transform: translateY(0.125rem) rotate(180deg);
}
.faq-answer {
overflow: hidden;
height: 0;
transition: height 0.2s ease-out;
}
.faq-answer-inner {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 0.875rem;
}
.faq-answer p {
font-family: Inter, sans-serif;
font-size: 15px;
font-weight: 400;
color: rgb(75, 85, 99);
line-height: 1.7;
margin: 0;
}
/* Responsive FAQ */
@media (max-width: 576px) {
.home-faq {
padding: 3rem 0;
}
.home-faq .container {
padding-inline: calc(0.25rem * 6);
/* px-6 = 1.5rem = 24px */
}
.faq-header {
margin-bottom: 2rem;
}
.faq-subtitle {
font-size: 1rem;
}
.faq-item {
padding: 1rem;
}
}
/* Sección CTA */
.home-cta {
background: #ffffff;
padding: 4rem 0;
width: 100%;
}
@media (min-width: 1024px) {
.home-cta {
padding: 6rem 0;
}
}
.home-cta .container {
max-width: 800px;
margin-left: auto;
margin-right: auto;
padding-inline: calc(0.25rem * 6);
/* px-6 = 1.5rem = 24px */
text-align: center;
}
@media (min-width: 1024px) {
.home-cta .container {
padding-inline: calc(0.25rem * 12);
/* lg:px-12 = 3rem = 48px */
}
}
.cta-title {
font-family: Montserrat, sans-serif;
font-size: clamp(28px, 4vw, 36px);
font-weight: 600;
color: #2f4a25;
margin: 0 0 1.5rem 0;
}
.cta-description {
font-family: Montserrat, sans-serif;
font-size: 17px;
font-weight: 400;
color: #4b5563;
line-height: 1.7;
margin: 0 auto 2rem auto;
max-width: 42rem;
}
.cta-buttons {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
}
@media (min-width: 640px) {
.cta-buttons {
flex-direction: row;
gap: 1rem;
}
}
.cta-whatsapp {
display: flex;
align-items: center;
gap: 0.5rem;
color: #4b5563;
}
.whatsapp-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: #25d366;
color: #ffffff;
}
.whatsapp-icon svg {
width: 20px;
height: 20px;
}
.cta-whatsapp span {
font-family: Montserrat, sans-serif;
font-size: 15px;
font-weight: 400;
}
/* Responsive CTA */
@media (max-width: 640px) {
.cta-buttons {
width: 100%;
}
.btn-primary-green {
width: 100%;
}
}
/* productos */
/* ============================================
TU CSS PERSONALIZADO (INTEGRADO)
============================================ */
/* Products Page Section */
.products-page-section {
background: #ffffff;
width: 100%;
overflow: visible !important;
}
/* FIX CRITICO PARA STICKY:
Si el body o html tienen overflow-x: hidden, el sticky muere.
'clip' es una alternativa moderna que a veces funciona mejor con sticky.
*/
html, body {
overflow-x: clip !important; /* Forzar clip sobre hidden para permitir sticky vertical */
}
/* ============================================
SIDEBAR STICKY - CSS PURO
============================================ */
.products-info-sidebar {
width: 100%;
display: block;
visibility: visible;
opacity: 1;
z-index: 10;
position: static;
top: auto;
}
/* Sidebar sticky cuando el usuario hace scroll (solo desktop) */
@media (min-width: 1024px) {
.products-info-sidebar {
/* Sticky CSS nativo */
position: -webkit-sticky;
position: sticky;
/* CALCULO MATEMATICO:
80px (Altura Header Fijo) + 20px (Espacio deseado) = 100px
*/
top: 100px;
align-self: start; /* CRUCIAL en grid/flex */
max-height: calc(100vh - 120px); /* Ajustado para no chocar con footer */
overflow-y: auto;
overflow-x: hidden;
z-index: 900; /* Menor que el header (1000) */
}
/* Scrollbar personalizado */
.products-info-sidebar::-webkit-scrollbar { width: 6px; }
.products-info-sidebar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.products-info-sidebar::-webkit-scrollbar-thumb { background: #70a83b; border-radius: 10px; }
.products-info-sidebar::-webkit-scrollbar-thumb:hover { background: #5d8a2e; }
}
/* Móvil: estático */
@media (max-width: 1023px) {
.products-info-sidebar {
position: static;
top: auto;
max-height: none;
overflow-y: visible;
}
}
/* Header Section */
.products-header-section {
background: #f8f5ec;
padding: 3rem 0;
width: 100%;
overflow: visible !important;
}
@media (min-width: 1024px) { .products-header-section { padding: 4rem 0; } }
/* Container */
.products-container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 1.5rem;
padding-right: 1.5rem;
overflow: visible !important;
}
@media (min-width: 1024px) { .products-container { padding-left: 3rem; padding-right: 3rem; } }
/* Main Title */
.products-main-title {
font-family: Montserrat, sans-serif;
font-size: clamp(32px, 5vw, 48px);
font-weight: 700;
line-height: 1.2;
color: #2f4a25;
margin: 0 0 1rem 0;
}
.products-main-description {
font-family: Montserrat, sans-serif;
font-size: 18px;
color: #4b5563;
max-width: 48rem;
line-height: 1.7;
margin: 0;
}
/* Content Section */
.products-content-section {
padding: 3rem 0;
width: 100%;
overflow: visible !important;
}
@media (min-width: 1024px) { .products-content-section { padding: 4rem 0; } }
.products-wrapper { width: 100%; overflow: visible !important; }
/* Tabs Navigation */
.products-tabs-nav {
margin-bottom: 3rem;
overflow-x: hidden;
overflow-y: visible;
display: block !important;
width: 100%;
}
.products-tabs-list {
display: flex;
flex-wrap: nowrap;
width: 100%;
background: transparent;
border-bottom: 1px solid #d1d5db;
gap: 0.5rem;
padding-bottom: 0.5rem;
}
.products-tab-item {
background: transparent;
border: none;
border-bottom: 2px solid transparent;
border-radius: 5px 5px 0 0;
padding: 0.625rem 1.25rem;
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 600;
color: #4b5563;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
display: inline-block;
transition: all 0.15s ease;
flex-shrink: 0;
min-width: fit-content;
}
.products-tab-item:hover { color: #70a83b; }
.products-tab-item.products-tab-active {
border: 1px solid #70a83b;
border-bottom: 2px solid #70a83b;
border-radius: 12px 12px 0 0;
color: #70a83b;
background: transparent;
}
/* Content Grid - LA CLAVE DEL LAYOUT */
.products-content-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: start; /* Importante */
overflow: visible;
}
@media (min-width: 1024px) {
.products-content-grid {
grid-template-columns: 2fr 1fr; /* 2/3 productos, 1/3 sidebar */
gap: 1.5rem;
align-items: start; /* Esto permite que la columna derecha no se estire, permitiendo sticky */
overflow: visible;
}
/* Orden visual */
.products-info-sidebar { order: 2; }
.products-items-grid { order: 1; }
}
/* Products Items Grid */
.products-items-grid { display: block; width: 100%; }
/* Category Content */
.products-category-content {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
width: 100%;
}
@media (min-width: 640px) { .products-category-content { grid-template-columns: repeat(2, 1fr); } }
/* Cards */
.products-item-card {
background: #ffffff;
border-radius: 0.875rem;
border: 1px solid #d1d5db;
transition: box-shadow 0.15s ease, transform 0.2s ease;
display: flex;
flex-direction: column;
height: auto;
min-height: 450px;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.products-item-card:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.products-item-image {
width: 100%;
aspect-ratio: 4/5;
overflow: hidden;
background: #f3f4f6;
border-radius: 0.875rem 0.875rem 0 0;
}
.products-item-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
transition: transform 0.3s ease;
display: block;
}
.products-item-card:hover .products-item-img { transform: scale(1.05); }
.products-item-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
min-height: 250px;
}
.products-item-badges {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.products-badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-family: Montserrat, sans-serif;
font-size: 12px;
font-weight: 600;
line-height: 1;
}
.products-badge-green { background-color: rgb(248, 245, 236); color: #70a83b; border: 1px solid #70a83b; }
.products-badge-yellow { background: #f4b41a; color: #2f4a25; }
.products-badge-red { background: #c65b3f; color: #ffffff; }
.products-item-title {
font-family: Montserrat, sans-serif;
font-size: 20px;
font-weight: 600;
color: #2f4a25;
margin: 0 0 1rem 0;
}
.products-item-features {
list-style: none;
padding: 0;
margin: 0 0 1.5rem 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
flex-grow: 0;
}
.products-feature-item {
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.products-check-icon {
width: 16px;
height: 16px;
color: #70a83b;
flex-shrink: 0;
margin-top: 0.125rem;
}
.products-feature-item span {
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #4b5563;
}
.products-feature-item.products-feature-more {
font-weight: 600;
color: #70a83b;
}
.products-feature-item.products-feature-more span {
color: #70a83b;
}
.products-feature-item.products-feature-more svg {
stroke: #70a83b;
}
.products-item-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0.4rem 1rem;
border: 1px solid #70a83b;
border-radius: 0.5rem;
background: transparent;
color: #70a83b;
font-family: Montserrat, sans-serif;
font-size: 15px;
text-decoration: none;
pointer-events: none; /* Evita que el botón capture el click, toda la tarjeta es clickeable */
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
margin-top: auto;
}
/* Hover del botón cuando se pasa el mouse sobre la tarjeta */
.products-item-card:hover .products-item-button {
background: #70a83b;
color: #ffffff;
}
.products-info-card {
background: #f8f5ec;
border-radius: 0.875rem;
padding: 2rem;
border: 1px solid #d1d5db;
}
.products-info-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
background: #70a83b;
color: #ffffff;
margin-bottom: 1rem;
}
.products-info-icon svg { width: 24px; height: 24px; }
.products-info-title {
font-family: Montserrat, sans-serif;
font-size: 22px;
font-weight: 600;
color: #2f4a25;
margin: 0 0 0.75rem 0;
}
.products-info-description {
font-family: Montserrat, sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.6;
color: #4b5563;
margin: 0 0 1.5rem 0;
}
.products-info-list {
list-style: none;
padding: 0;
margin: 0 0 1.5rem 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.products-info-list-item { display: flex; align-items: flex-start; gap: 0.5rem; }
.products-info-list-item span { font-family: Montserrat, sans-serif; font-size: 14px; font-weight: 400; color: #4b5563; }
.products-info-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0.45rem 1rem;
border-radius: 0.5rem;
background: #70a83b;
color: #ffffff;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: background-color 0.15s ease;
margin-bottom: 1rem;
}
.products-info-button:hover { color: #ffffff; background: #608d33; }
.products-info-footer {
font-family: Montserrat, sans-serif;
font-size: 13px;
font-weight: 400;
color: #4b5563;
text-align: center;
margin: 0;
}
/* Estilos para grid de categorías en página de productos - Usa el mismo CSS que las cartas de productos */
.categorias-grid-products {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
width: 100%;
}
@media (min-width: 640px) {
.categorias-grid-products {
grid-template-columns: repeat(2, 1fr);
}
}
/* Clases específicas para las cartas de "todas las categorías" */
.category-all-card {
background: #ffffff;
border-radius: 0.875rem;
border: 1px solid #d1d5db;
transition: box-shadow 0.15s ease, transform 0.2s ease;
display: flex;
flex-direction: column;
height: auto;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.category-all-card:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.category-all-image {
width: 100%;
aspect-ratio: 4/5;
overflow: hidden;
border-radius: 0.875rem 0.875rem 0 0;
}
.category-all-img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
transition: transform 0.3s ease;
display: block;
}
.category-all-card:hover .category-all-img {
transform: scale(1.05);
}
.category-all-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
gap: 0.5rem; /* Espacio mínimo entre elementos */
}
.category-all-title {
font-family: Montserrat, sans-serif;
font-size: 1.125rem;
font-weight: 600;
color: #2f4a25;
margin: 0;
line-height: 1.4;
}
.category-all-description {
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #4b5563;
margin: 0;
}
.category-all-button {
font-family: Montserrat, sans-serif;
background: #ffffff;
color: #70a83b;
padding: 0.5rem 1.5rem;
border-radius: 0.5rem;
font-weight: 600;
font-size: 0.9375rem;
text-decoration: none;
border: 1px solid #70a83b;
cursor: pointer;
transition: all 0.3s ease;
display: inline-block;
text-align: center;
margin-top: auto; /* Empuja el botón al final de la carta */
width: 100%;
pointer-events: none; /* Evita que el botón capture el click, toda la tarjeta es clickeable */
}
.category-all-card:hover .category-all-button {
background: #70a83b;
color: #ffffff;
}
@media (max-width: 640px) {
.products-header-section, .products-content-section { padding: 2rem 0; }
.products-main-title { font-size: 28px; }
.products-main-description { font-size: 16px; }
.products-tab-item { padding: 0.5rem 1rem; font-size: 14px; }
.products-item-body, .products-info-card { padding: 1rem; }
}
/* DETALLE DE PRODUCTO */
/* Product Detail Page Section */
.product-detail-section {
background: #ffffff;
width: 100%;
min-height: 100vh;
}
/* Breadcrumb */
.product-breadcrumb {
background: rgb(248, 245, 236);
padding: 1rem 0;
}
.product-detail-container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
@media (min-width: 1024px) {
.product-detail-container {
padding-left: 3rem;
padding-right: 3rem;
}
}
.breadcrumb-nav {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
font-family: Montserrat, sans-serif;
font-size: 14px;
}
.breadcrumb-link {
color: #2f4a25;
font-size: 16px;
font-weight: 500;
text-decoration: none;
transition: color 0.15s ease;
}
.breadcrumb-link:hover {
color: #70a83b;
}
.breadcrumb-icon {
color: #9ca3af;
width: 16px;
height: 16px;
flex-shrink: 0;
}
.breadcrumb-text,
.breadcrumb-current {
color: #2f4a25;
font-size: 15px;
font-weight: 500;
}
.breadcrumb-current-product {
color: #2f4a25;
font-size: 15px;
font-weight: 600;
}
/* Main Product Section */
.product-main-section {
background: #ffffff;
padding: 2.5rem 0 3.5rem;
overflow: visible; /* Sin overflow para que sticky funcione */
}
@media (min-width: 1024px) {
.product-main-section {
padding: 2.5rem 0 4rem;
overflow: visible; /* Sin overflow para que sticky funcione */
}
}
.product-detail-grid {
margin-top: 25px;
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: start; /* Importante para que sticky funcione */
overflow: visible; /* Sin overflow para que sticky funcione */
}
@media (min-width: 1024px) {
.product-detail-grid {
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start; /* CRUCIAL: permite que sticky funcione */
overflow: visible;
}
/* Grid específico para información del producto (limita el sticky) */
.product-info-grid {
align-items: start; /* CRUCIAL para sticky */
overflow: visible;
/* Este grid solo contiene hasta product-info-wrapper */
/* Cuando el wrapper termina, el grid termina y el sticky se detiene */
}
}
/* Product Gallery - STICKY */
.product-gallery {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
position: static; /* En móvil: estático */
}
/* Sticky en desktop - la galería baja con el scroll solo hasta "Pedido mínimo" (dentro de product-info-wrapper) */
@media (min-width: 1024px) {
/* CRUCIAL: El sticky se limita por la altura del contenedor padre (.product-info-grid) */
/* El sticky se detendrá exactamente cuando termine .product-info-grid (que termina con .product-info-wrapper) */
/* Asegurar que el grid padre limite correctamente el sticky - NO debe extenderse más allá */
.product-info-grid {
align-items: start; /* CRUCIAL: permite que sticky funcione correctamente */
/* La altura del grid será la altura del contenido más alto (el wrapper) */
/* Cuando el wrapper termina, el grid termina y el sticky se detiene */
height: fit-content; /* IMPORTANTE: el grid solo toma la altura del contenido */
min-height: 0; /* Permite que el grid se ajuste al contenido */
}
.product-gallery {
position: -webkit-sticky;
position: sticky;
top: 100px; /* 80px (header) + 20px (espacio) = 100px */
align-self: start; /* CRUCIAL: comienza desde arriba */
/* El sticky se detendrá cuando termine .product-info-grid */
/* No necesita max-height porque el contenedor padre lo limita */
}
/* El wrapper define la altura del grid */
.product-info-wrapper {
width: 100%;
/* Este wrapper contiene todo hasta "Pedido mínimo" */
/* Su altura determina la altura del grid y por tanto dónde termina el sticky */
}
}
.product-main-image-wrapper {
width: 100%;
aspect-ratio: 1 / 1;
background: #f9fafb;
border-radius: 10px;
border: 1px solid #e5e7eb;
overflow: hidden;
}
.product-main-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 10px;
}
.product-thumbnails {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.75rem;
width: 100%;
}
.thumbnail-button {
width: 100%;
aspect-ratio: 1 / 1;
padding: 0;
border: 2px solid #d1d5db;
border-radius: 0.5rem;
background: #f9fafb;
cursor: pointer;
transition: all 0.15s ease;
overflow: hidden;
}
.thumbnail-button:hover {
border-color: #9ca3af;
}
.thumbnail-button.active {
border: 4px solid #70a83b;
}
.thumbnail-button img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Product Details - Ya no se usa en la nueva estructura, pero lo mantenemos por compatibilidad */
.product-details {
display: flex;
flex-direction: column;
gap: 3rem;
}
/* Grid específico para la información del producto (donde funciona el sticky) */
/* .product-info-grid hereda los estilos de .product-detail-grid */
/* Este grid solo contiene la galería y el wrapper de información */
/* El sticky se detendrá cuando termine este grid */
/* Wrapper para limitar el sticky solo hasta "Pedido mínimo" (antes del formulario) */
.product-info-wrapper {
display: flex;
flex-direction: column;
gap: 3rem; /* Mismo gap que product-details tenía originalmente */
align-self: start; /* CRUCIAL: permite que el sticky funcione correctamente */
width: 100%; /* Ocupa todo el ancho de la columna */
}
/* Sección del formulario (fuera del grid sticky) */
.product-form-section {
width: 100%;
padding-top: 0.5rem;
margin-top: 1rem;
}
@media (min-width: 1024px) {
.product-form-section {
padding-top: 0.5rem;
margin-top: 1rem;
}
}
.product-form-wrapper {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1024px) {
.product-form-wrapper {
/* Alinear el formulario a la derecha, con el MISMO ancho que la columna de características */
/* El grid tiene: 2 columnas (1fr 1fr) con gap de 4rem */
/* El contenedor tiene padding de 3rem a cada lado y max-width de 1200px */
/* Cada columna del grid tiene: (1200px - 6rem - 4rem) / 2 = (1200px - 10rem) / 2 */
/* Usamos el mismo cálculo para que coincida exactamente */
max-width: calc((1200px - 6rem - 4rem) / 2); /* Exactamente el mismo ancho que product-info-wrapper */
margin-left: auto;
margin-right: 0; /* Sin margen derecho para moverlo más a la derecha */
padding-left: 0;
padding-right: 0;
}
}
.product-info {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.product-title {
font-family: Montserrat, sans-serif;
font-size: 35px;
font-weight: 700;
max-width: 500px;
color: #2f4a25;
margin-top: -12px;
text-transform: lowercase;
}
.product-title::first-letter {
text-transform: uppercase;
}
.product-description {
font-family: Montserrat, sans-serif;
color: #4b5563;
font-size: 17px;
line-height: 1.7;
margin: 0;
}
/* Product Badges */
.product-badges {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.product-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 1rem;
background: #f8f5ec;
border: 1px solid #70a83b;
border-radius: 0.5rem;
font-family: Montserrat, sans-serif;
font-size: 12px;
font-weight: 600;
color: #70a83b;
}
.badge-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* Product Characteristics */
.product-characteristics {
background: #f8f5ec;
border-radius: 0.75rem;
padding: 1.5rem;
}
.characteristics-title {
font-family: Montserrat, sans-serif;
font-size: 18px;
font-weight: 700;
color: #2f4a25;
margin: 0 0 1rem 0;
}
.characteristics-list {
display: flex;
flex-direction: column;
gap: 0;
}
.characteristic-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 1rem 0;
border-bottom: 1px solid rgb(209, 213, 219);;
}
.characteristic-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.characteristic-item:first-child {
padding-top: 0;
}
.characteristic-label {
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 600;
color: #374151;
}
.characteristic-value {
font-family: Montserrat, sans-serif;
font-size: 14px;
line-height: 1.5;
color: #4b5563;
}
/* Consultation Form */
.consultation-form {
background: #ffffff;
border: 2px solid #70a83b;
border-radius: 0.75rem;
padding: 1.5rem;
}
@media (min-width: 1024px) {
.consultation-form {
padding: 2rem;
}
}
.form-header {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.5rem;
}
.form-icon {
width: 40px;
height: 40px;
background: #70a83b;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #ffffff;
margin-top: -0.5rem;
}
.form-icon svg {
width: 20px;
height: 20px;
}
.form-title {
font-family: Montserrat, sans-serif;
font-size: 1.25rem;
font-weight: 700;
color: #2f4a25;
margin: 0 0 0.5rem 0;
}
.form-subtitle {
font-family: Montserrat, sans-serif;
font-size: 0.9375rem;
line-height: 1.5;
color: #4b5563;
margin: 0;
}
/* Form Styles */
.product-form {
display: flex;
flex-direction: column;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 640px) {
.form-row {
grid-template-columns: 1fr 1fr;
}
}
.form-label {
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 700;
color: #2f4a25;
}
.form-input,
.form-textarea {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
font-family: Montserrat, sans-serif;
font-size: 14px;
color: #111827;
background: #f3f4f6;
transition: all 0.15s ease;
}
.form-input::placeholder,
.form-textarea::placeholder {
color: #9ca3af;
}
.form-input:focus,
.form-textarea:focus {
outline: none;
border-color: #d1d5db;
background: #ffffff;
box-shadow: none;
}
.form-textarea {
resize: vertical;
min-height: 100px;
}
.form-error {
font-family: Montserrat, sans-serif;
font-size: 12px;
color: #dc2626;
min-height: 1.25rem;
}
.btn-form-submit {
width: 100%;
padding: 0.5rem 1.5rem;
background: #70a83b;
color: #ffffff;
border: none;
border-radius: 0.5rem;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease;
margin-top: 0.5rem;
}
.btn-form-submit:hover {
background: #608d33;
}
.form-footer {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 1rem;
background: rgb(248, 245, 236);
border-radius: 0.5rem;
margin-top: 0.5rem;
}
.form-footer .check-icon {
width: 16px;
height: 16px;
color: #70a83b;
flex-shrink: 0;
margin-top: 0.125rem;
}
.form-footer p {
font-family: Montserrat, sans-serif;
font-size: 13px;
line-height: 1.5;
color: #4b5563;
margin: 0;
}
.form-footer p strong {
color: rgb(75, 85, 99);
font-weight: 600;
}
/* Related Products Section */
.related-products-section {
background: #f8f5ec;
padding: 3rem 0 4rem;
width: 100%;
}
.related-products-title {
font-family: Montserrat, sans-serif;
font-size: clamp(24px, 4vw, 32px);
font-weight: 700;
color: #2f4a25;
margin: 1rem 0 2rem 0;
text-align: center;
}
.related-products-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 768px) {
.related-products-grid {
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
}
.related-product-card {
background: #ffffff;
border-radius: 0.75rem;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease, transform 0.2s ease;
text-decoration: none;
color: inherit;
cursor: pointer;
display: flex;
flex-direction: column;
height: 100%;
}
.related-product-card:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
.related-product-image-wrapper {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #f9fafb;
}
.related-product-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.related-product-card:hover .related-product-image {
transform: scale(1.1);
}
.related-product-badge {
display: inline-block;
width: fit-content;
padding: 0.175rem 0.75rem;
border-radius: 0.375rem;
font-family: Montserrat, sans-serif;
font-size: 12px;
font-weight: 600;
text-transform: capitalize;
letter-spacing: 0.025em;
margin-bottom: 0.5rem;
white-space: nowrap;
}
.related-product-badge-yellow {
background: rgb(244, 180, 26);
color: #2f4a25;
}
.related-product-badge-red {
background: rgb(198, 91, 63) ;
color: #ffffff;
}
.related-product-badge-green {
background: rgb(248, 245, 236);
border: 1px solid rgb(112, 168, 59);
color: rgb(112, 168, 59);
}
.related-product-info {
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
flex-grow: 1;
}
.related-product-title {
font-family: Montserrat, sans-serif;
font-size: 18px;
font-weight: 700;
color: #2f4a25;
margin: 0;
line-height: 1.3;
}
.related-product-category {
font-family: Montserrat, sans-serif;
font-size: 14px;
color: #6b7280;
margin: 0;
}
.related-product-button {
display: inline-block;
padding: 0.4rem 1.25rem;
border: 1px solid #70a83b;
border-radius: 10px;
background: transparent;
color: #70a83b;
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 600;
text-decoration: none;
text-align: center;
transition: all 0.15s ease;
margin-top: auto;
pointer-events: none; /* Evita que el botón capture el click, toda la tarjeta es clickeable */
cursor: pointer;
}
/* Hover del botón cuando se pasa el mouse sobre la tarjeta */
.related-product-card:hover .related-product-button {
background: #70a83b;
color: #ffffff;
}
/* Mensaje de Confirmación (reemplaza al formulario) */
.confirmacion-mensaje {
background: #ffffff;
border: 2px solid #70a83b;
border-radius: 12px;
padding: 1.5rem;
animation: fadeIn 0.3s ease;
}
.confirmacion-mensaje-content {
display: flex;
align-items: center;
gap: 1.5rem;
}
.confirmacion-mensaje-icon {
width: 64px;
height: 64px;
min-width: 64px;
background: transparent;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 0;
}
.confirmacion-mensaje-img {
width: 64px;
height: 64px;
object-fit: contain;
}
.confirmacion-mensaje-text {
flex: 1;
}
.confirmacion-mensaje-title {
font-family: Montserrat, sans-serif;
font-size: 18px;
font-weight: 700;
color: #2f4a25;
margin: 0 0 0.5rem 0;
line-height: 1.3;
}
.confirmacion-mensaje-description {
font-family: Montserrat, sans-serif;
font-size: 14px;
color: #6b7280;
margin: 0;
line-height: 1.5;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (max-width: 640px) {
.confirmacion-mensaje {
padding: 1.25rem;
}
.confirmacion-mensaje-content {
gap: 1rem;
}
.confirmacion-mensaje-icon {
width: 56px;
height: 56px;
min-width: 56px;
}
.confirmacion-mensaje-img {
width: 56px;
height: 56px;
}
.confirmacion-mensaje-title {
font-size: 16px;
}
.confirmacion-mensaje-description {
font-size: 13px;
}
}
/* NOSTROS */
/* Estilos de la Sección Nosotros */
.nosotros-section {
background: #f8f5ec;
padding: 4rem 0;
width: 100%;
}
@media (min-width: 1024px) {
.nosotros-section {
padding: 6rem 0;
}
}
.nosotros-section .container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-inline: calc(0.25rem * 6);
/* px-6 = 1.5rem = 24px */
}
@media (min-width: 1024px) {
.nosotros-section .container {
padding-inline: calc(0.25rem * 12);
/* lg:px-12 = 3rem = 48px */
}
}
.nosotros-content {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: center;
}
@media (min-width: 1024px) {
.nosotros-content {
grid-template-columns: 1fr 1fr;
gap: 4rem;
}
}
/* Columna Izquierda - Texto */
.nosotros-text {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.nosotros-title {
font-family: Montserrat, sans-serif;
font-size: clamp(32px, 5vw, 48px);
font-weight: 700;
line-height: 1.2;
color: #2f4a25;
margin: 0;
}
.nosotros-description {
font-size: 18px;
line-height: 1.7;
font-family: Montserrat, sans-serif;
font-weight: 400;
color: #4b5563;
margin: 0;
}
/* Columna Derecha - Imagen */
.nosotros-image {
width: 100%;
height: auto;
}
.nosotros-image-wrapper {
width: 100%;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.nosotros-image-wrapper img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
/* Responsive Nosotros */
@media (max-width: 640px) {
.nosotros-section {
padding: 3rem 0;
}
}
/* Trajectory Section */
.trayectoria-section {
background: #ffffff;
padding: 4rem 0;
width: 100%;
}
@media (min-width: 1024px) {
.trayectoria-section {
padding: 6rem 0;
}
}
.trayectoria-section .container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-inline: calc(0.25rem * 6);
}
@media (min-width: 1024px) {
.trayectoria-section .container {
padding-inline: calc(0.25rem * 12);
}
}
.trayectoria-header {
text-align: center;
margin-bottom: 3rem;
}
.trayectoria-title {
font-family: Montserrat, sans-serif;
font-size: clamp(28px, 4vw, 40px);
font-weight: 700;
color: #2f4a25;
margin: 0 0 1rem 0;
}
.trayectoria-subtitle {
font-family: Montserrat, sans-serif;
font-size: 17px;
line-height: 1.7;
color: #4b5563;
margin: 0;
}
.trayectoria-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 768px) {
.trayectoria-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
}
.trayectoria-card {
background: rgb(248, 245, 236);
border-radius: 0.75rem;
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.trayectoria-header-card {
display: flex;
align-items: center;
gap: 1rem;
}
.trayectoria-icon {
width: 50px;
height: 50px;
min-width: 50px;
min-height: 50px;
background: #70a83b;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
flex-shrink: 0;
}
.trayectoria-icon svg {
width: 24px;
height: 24px;
stroke: #ffffff;
}
.trayectoria-card-title {
font-family: Montserrat, sans-serif;
font-size: 20px;
font-weight: 700;
color: #2f4a25;
margin: 0;
line-height: 1.3;
flex: 1;
}
.trayectoria-card-text {
font-family: Montserrat, sans-serif;
font-size: 16px;
line-height: 1.7;
color: #4b5563;
margin: 0;
}
/* Why Choose Us Section */
.porque-section {
background: #f8f5ec;
padding: 4rem 0;
width: 100%;
}
@media (min-width: 1024px) {
.porque-section {
padding: 6rem 0;
}
}
.porque-section .container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-inline: calc(0.25rem * 6);
}
@media (min-width: 1024px) {
.porque-section .container {
padding-inline: calc(0.25rem * 12);
}
}
.porque-header {
text-align: center;
margin-bottom: 3rem;
}
.porque-title {
font-family: Montserrat, sans-serif;
font-size: clamp(28px, 4vw, 36px);
font-weight: 600;
color: #2f4a25;
margin: 0 0 1rem 0;
}
.porque-subtitle {
font-family: Montserrat, sans-serif;
font-size: 17px;
line-height: 1.7;
color: #4b5563;
margin: 0;
}
.porque-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 768px) {
.porque-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
}
@media (min-width: 1024px) {
.porque-grid {
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
}
.porque-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
}
.porque-icon-wrapper {
width: 64px;
height: 64px;
min-width: 64px;
min-height: 64px;
background: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.porque-icon-wrapper svg {
width: 28px;
height: 28px;
}
.porque-card-title {
font-family: Montserrat, sans-serif;
font-size: 18px;
font-weight: 700;
color: #2f4a25;
margin: 0;
line-height: 1.3;
}
.porque-card-text {
font-family: Montserrat, sans-serif;
font-size: 15px;
line-height: 1.7;
color: #4b5563;
margin: 0;
}
/* Milestones Timeline Section */
.hitos-section {
background: #ffffff;
padding: 4rem 0;
width: 100%;
}
@media (min-width: 1024px) {
.hitos-section {
padding: 6rem 0;
}
}
.hitos-section .container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-inline: calc(0.25rem * 6);
}
@media (min-width: 1024px) {
.hitos-section .container {
padding-inline: calc(0.25rem * 12);
}
}
.hitos-header {
text-align: center;
margin-bottom: 2rem;
}
.hitos-title {
font-family: Montserrat, sans-serif;
font-size: clamp(28px, 4vw, 36px);
font-weight: 600;
color: #2f4a25;
margin: 0 0 1rem 0;
}
.hitos-subtitle {
font-family: Montserrat, sans-serif;
font-size: 17px;
line-height: 1.7;
color: #4b5563;
margin: 0;
}
.hitos-timeline {
position: relative;
max-width: 900px;
margin: 0 auto;
}
.hitos-timeline::before {
content: '';
position: absolute;
left: 49.95%;
top: 0;
bottom: 0;
width: 4px;
background: rgb(209, 213, 219)
;
transform: translateX(-50%);
}
@media (max-width: 768px) {
.hitos-timeline::before {
left: 1.5rem;
}
}
.hito-item {
position: relative;
width: 100%;
display: flex;
align-items: flex-start;
min-height: 120px;
}
.hito-item:last-child {
margin-bottom: 0;
}
.hito-item-left {
justify-content: flex-end;
padding-right: calc(50% + 0.75rem);
}
.hito-item-right {
justify-content: flex-start;
padding-left: calc(50% + 0.75rem);
}
@media (max-width: 768px) {
.hito-item {
padding-left: 3rem;
padding-right: 0;
justify-content: flex-start;
}
}
.hito-content {
width: calc(120% - 1.75rem);
max-width: 550px;
background: #ffffff;
border-radius: 0.75rem;
padding: 1.5rem;
text-align: left;
}
.hito-item-left .hito-content {
text-align: right;
}
.hito-item-right .hito-content {
text-align: left;
}
@media (max-width: 768px) {
.hito-content {
width: 100%;
max-width: none;
text-align: left;
}
.hito-item-left .hito-content {
text-align: left;
}
}
.hito-dot {
width: 22px;
height: 22px;
min-width: 22px;
min-height: 22px;
background: #70a83b;
border-radius: 50%;
border: 3px solid #ffffff;
position: absolute;
left: 50%;
top: calc(1.5rem + 1.625rem + 0.375rem);
transform: translateX(-50%) translateY(-50%);
z-index: 10;
flex-shrink: 0;
}
@media (max-width: 768px) {
.hito-dot {
left: 1.5rem;
top: calc(1.5rem + 1.625rem + 0.375rem);
transform: translateX(-50%) translateY(-50%);
}
}
.hito-year {
display: inline-block;
background: #70a83b;
color: #ffffff;
padding: 0.375rem 1rem;
border-radius: 20px;
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 600;
margin-bottom: 0.75rem;
}
.hito-title {
font-family: Montserrat, sans-serif;
font-size: 20px;
font-weight: 700;
color: #2f4a25;
margin: 0 0 0.75rem 0;
line-height: 1.3;
}
.hito-description {
font-family: Montserrat, sans-serif;
font-size: 15px;
line-height: 1.7;
color: #4b5563;
margin: 0;
}
@media (max-width: 768px) {
.hito-dot {
left: 1.5rem;
transform: translate(-50%, -50%);
}
}
/* Commitment Section */
.compromiso-section {
background: #f8f5ec;
padding: 4rem 0;
width: 100%;
}
@media (min-width: 1024px) {
.compromiso-section {
padding: 6rem 0;
}
}
.compromiso-section .container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-inline: calc(0.25rem * 6);
}
@media (min-width: 1024px) {
.compromiso-section .container {
padding-inline: calc(0.25rem * 12);
}
}
.compromiso-header {
text-align: center;
margin-bottom: 3rem;
}
.compromiso-title {
font-family: Montserrat, sans-serif;
font-size: clamp(28px, 4vw, 36px);
font-weight: 700;
color: #2f4a25;
margin: 0 0 1rem 0;
}
.compromiso-subtitle {
font-family: Montserrat, sans-serif;
font-size: 17px;
line-height: 1.7;
color: #4b5563;
margin: 0;
}
.compromiso-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 768px) {
.compromiso-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
}
@media (min-width: 1024px) {
.compromiso-grid {
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
}
.compromiso-card {
background: #ffffff;
border-radius: 0.75rem;
padding: 1rem 1.5rem;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 0.8rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.compromiso-icon-wrapper {
width: 53px;
height: 53px;
min-width: 53px;
min-height: 53px;
background: rgb(248, 245, 236);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.compromiso-icon-wrapper svg {
width: 25px;
height: 25px;
stroke: #70a83b;
}
.compromiso-card-title {
font-family: Montserrat, sans-serif;
font-size: 18px;
font-weight: 700;
color: #2f4a25;
margin: 0;
line-height: 1.3;
}
.compromiso-card-text {
font-family: Montserrat, sans-serif;
font-size: 15px;
line-height: 1.7;
color: #4b5563;
margin: 0;
}
/* CTA Section */
.cta-section {
width: 100%;
display: flex;
flex-direction: column;
}
.cta-top-bar {
width: 100%;
height: 8px;
background: #f8f5ec;
}
.cta-content {
width: 100%;
background: #ffffff;
padding: 4rem 0;
}
@media (min-width: 1024px) {
.cta-content {
padding: 6rem 0;
}
}
.cta-content .container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-inline: calc(0.25rem * 6);
text-align: center;
}
@media (min-width: 1024px) {
.cta-content .container {
padding-inline: calc(0.25rem * 12);
}
}
.cta-title {
font-family: Montserrat, sans-serif;
font-size: clamp(24px, 4vw, 36px);
font-weight: 700;
color: #2f4a25;
margin: 0 0 1.5rem 0;
line-height: 1.3;
}
.cta-description {
font-family: Montserrat, sans-serif;
font-size: 17px;
line-height: 1.7;
color: #4b5563;
margin: 0 auto 2rem;
max-width: 550px;
}
.cta-button {
display: inline-block;
background: #70a83b;
color: #ffffff;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 600;
padding: 0.4rem 2rem;
border-radius: 0.5rem;
text-decoration: none;
transition: background-color 0.2s ease;
}
.cta-button:hover {
color: #ffffff;
background: #5d8a2f;
}
.cta-bottom-bar {
width: 100%;
height: 12px;
background: #2f4a25;
}
/* CORPORATIVOS
*/
/* Estilos para la sección de catálogos corporativos */
.corporativos-section {
padding: 60px 0;
background-color: #f8f5ec;
min-height: calc(100vh - 200px);
width: 100%;
}
.corporativos-section .container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-inline: calc(0.25rem * 6); /* px-6 = 1.5rem = 24px */
}
@media (min-width: 1024px) {
.corporativos-section .container {
padding-inline: calc(0.25rem * 12); /* lg:px-12 = 3rem = 48px */
}
}
.corporativos-content {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-inline: calc(0.25rem * 6); /* px-6 = 1.5rem = 24px */
display: flex;
flex-direction: column;
align-items: center;
}
@media (min-width: 1024px) {
.corporativos-content {
padding-inline: calc(0.25rem * 12); /* lg:px-12 = 3rem = 48px */
}
}
.corporativos-title {
color: #705036;
text-align: center;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 10px;
margin-top: 0;
}
.corporativos-subtitle {
color: #705036;
text-align: center;
font-size: 1.1rem;
margin-bottom: 10px;
}
.corporativos-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 30px;
justify-items: center;
align-items: center;
width: 100%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.catalogo-card {
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
width: 100%;
max-width: 280px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.catalogo-card:hover {
transform: translateY(-5px);
}
.catalogo-link {
text-decoration: none;
color: inherit;
display: block;
}
.catalogo-image-wrapper {
margin-bottom: 15px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}
.catalogo-card:hover .catalogo-image-wrapper {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.catalogo-image {
width: 100%;
height: auto;
max-width: 250px;
display: block;
margin: 0 auto;
object-fit: contain;
}
.catalogo-banner {
background-color: #d32f2f;
padding: 10px 15px;
border-radius: 4px;
position: relative;
}
.catalogo-banner::before,
.catalogo-banner::after {
content: '★';
color: #ffd700;
font-size: 1.2rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.catalogo-banner::before {
left: 10px;
}
.catalogo-banner::after {
right: 10px;
}
.catalogo-banner-text {
color: #fff;
font-weight: 600;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Responsive */
@media (max-width: 768px) {
.corporativos-title {
font-size: 2rem;
}
.corporativos-subtitle {
font-size: 1rem;
}
.corporativos-grid {
grid-template-columns: 1fr;
gap: 25px;
justify-items: center;
}
.catalogo-card {
max-width: 100%;
}
.catalogo-image {
max-width: 100%;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.corporativos-grid {
grid-template-columns: repeat(2, 1fr);
justify-items: center;
}
}
@media (min-width: 1025px) {
.corporativos-grid {
grid-template-columns: repeat(3, 1fr);
justify-items: center;
align-items: center;
}
/* Centrar el último elemento cuando hay 4 elementos (3+1) */
.corporativos-grid .catalogo-card:nth-child(4) {
grid-column: 2;
justify-self: center;
}
}
/* CONTACTO */
/* Contact Page Styles */
.contact-page {
background: #ffffff;
width: 100%;
}
.contact-page .container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-inline: calc(0.25rem * 6); /* px-6 = 1.5rem = 24px */
}
@media (min-width: 1024px) {
.contact-page .container {
padding-inline: calc(0.25rem * 12); /* lg:px-12 = 3rem = 48px */
}
}
/* Header Section */
.contact-header {
background: #f8f5ec;
padding: 3rem 0;
width: 100%;
}
@media (min-width: 1024px) {
.contact-header {
padding: 4rem 0;
}
}
.contact-title {
font-family: Montserrat, sans-serif;
font-size: clamp(32px, 5vw, 48px);
font-weight: 700;
line-height: 1.2;
color: #2f4a25;
margin: 0 auto 1rem;
}
.contact-description {
font-family: Montserrat, sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1.7;
color: #4b5563;
max-width: 48rem;
}
/* Main Contact Section */
.contact-main-section {
padding: 3rem 0;
width: 100%;
}
@media (min-width: 1024px) {
.contact-main-section {
padding: 4rem 0;
}
}
.contact-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
}
@media (min-width: 1024px) {
.contact-grid {
grid-template-columns: 2fr 3fr;
gap: 6rem;
}
}
/* Contact Info Column (Left) */
.contact-info-column {
display: flex;
flex-direction: column;
gap: 1rem;
}
.contact-info-title {
font-family: Montserrat, sans-serif;
font-size: 24px;
font-weight: 700;
color: #2f4a25;
margin: 0 0 1rem 0;
}
.contact-info-item {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.contact-info-icon {
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
background: rgb(248, 245, 236);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contact-info-icon svg {
width: 20px;
height: 20px;
stroke: #70a83b;
}
.contact-info-content {
flex: 1;
}
.contact-info-label {
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 600;
color: #2f4a25;
margin: 0 0 0.5rem 0;
}
.contact-info-text {
font-family: Montserrat, sans-serif;
font-size: 15px;
line-height: 1.6;
color: #4b5563;
margin: 0;
}
.contact-info-text + .contact-info-text {
margin-top: 0.25rem;
}
.contact-actions {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 0.5rem;
}
.btn-whatsapp {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: rgb(37, 211, 102);
color: #ffffff;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 600;
padding: 0.4rem 1.5rem;
border-radius: 0.5rem;
text-decoration: none;
transition: background-color 0.2s ease;
}
.btn-whatsapp:hover {
color: #ffffff;
background: #5d8a2f;
}
.btn-whatsapp svg {
width: 20px;
height: 20px;
stroke: currentColor;
}
.btn-call {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: #ffffff;
color: #70a83b;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 600;
padding: 0.4rem 1.5rem;
border: 2px solid #70a83b;
border-radius: 0.5rem;
text-decoration: none;
transition: all 0.2s ease;
}
.btn-call:hover {
background: #70a83b;
color: #ffffff;
}
.btn-call svg {
width: 20px;
height: 20px;
stroke: currentColor;
}
.contact-guarantee {
display: flex;
gap: 0.75rem;
align-items: flex-start;
background: #f8f5ec;
padding: 1rem;
border-radius: 0.5rem;
margin-top: 0.5rem;
}
.contact-guarantee svg {
width: 20px;
height: 20px;
stroke: #70a83b;
flex-shrink: 0;
margin-top: 0.125rem;
}
.contact-guarantee p {
font-family: Montserrat, sans-serif;
font-size: 14px;
line-height: 1.6;
color: #4b5563;
margin: 0;
}
.contact-guarantee p strong {
font-weight: 700;
}
/* Contact Form Column (Right) */
.contact-form-column {
width: 100%;
}
.contact-form-card {
background: #ffffff;
border-radius: 0.75rem;
padding: 2rem;
border: 2px solid #d1d5db;
}
.contact-form-title {
font-family: Montserrat, sans-serif;
font-size: 24px;
font-weight: 700;
color: #2f4a25;
margin: 0 0 0.5rem 0;
}
.contact-form-description {
font-family: Montserrat, sans-serif;
font-size: 15px;
line-height: 1.6;
color: #4b5563;
margin: 0 0 1rem 0;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 768px) {
.form-row {
grid-template-columns: 1fr 1fr;
}
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-label {
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 700;
color: #374151;
}
.form-input,
.form-textarea {
width: 100%;
padding: 0.5rem 1rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
font-family: Montserrat, sans-serif;
font-size: 15px;
color: #111827;
background: #f3f4f6;
transition: all 0.15s ease;
}
.form-input::placeholder,
.form-textarea::placeholder {
color: #9ca3af;
}
.form-input:focus,
.form-textarea:focus {
outline: none;
border-color: #70a83b;
background: #ffffff;
box-shadow: 0 0 0 3px rgba(112, 168, 59, 0.1);
}
.form-textarea {
resize: vertical;
min-height: 60px;
height: 10px;
}
.btn-submit {
background: #70a83b;
color: #ffffff;
font-family: Montserrat, sans-serif;
font-size: 15px;
font-weight: 600;
padding: 0.5rem 1.5rem;
border: none;
margin-top: 10px;
border-radius: 0.5rem;
cursor: pointer;
transition: background-color 0.2s ease;
width: 100%;
}
.btn-submit:hover {
background: #5d8a2f;
}
.form-confidentiality {
font-family: Montserrat, sans-serif;
font-size: 13px;
line-height: 1.5;
color: #4b5563;
margin: 0;
margin-top: 10px;
text-align: center;
}
/* Office Location Section */
.location-section {
background: rgb(243, 244, 246) ;
padding: 5rem 0;
width: 100%;
}
.location-section .container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-inline: calc(0.25rem * 6);
}
@media (min-width: 1024px) {
.location-section .container {
padding-inline: calc(0.25rem * 12);
}
}
.location-title {
font-family: Montserrat, sans-serif;
font-size: 28px;
font-weight: 600;
color: #2f4a25;
text-align: center;
margin: 0 0 1.8rem 0;
}
.location-content {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.location-card {
width: 100%;
background: rgb(229, 231, 235);
border-radius: 0.75rem;
padding: 2rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 1.5rem;
height: 500px;
margin: 0 auto;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.location-icon {
display: flex;
align-items: center;
justify-content: center;
}
.location-icon svg {
width: 60px;
height: 60px;
stroke: #70a83b;
}
.location-address {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.location-address p {
font-family: Montserrat, sans-serif;
font-size: 16px;
color: #4b5563;
margin: 0;
}
.btn-maps {
display: inline-flex;
align-items: center;
justify-content: center;
background: #ffffff;
color: #70a83b;
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 600;
padding: 0.4rem 1.5rem;
border: 1px solid #70a83b;
border-radius: 0.5rem;
text-decoration: none;
transition: all 0.2s ease;
}
.btn-maps:hover {
background: #70a83b;
color: #ffffff;
}
/* FAQ Section */
.faq-section {
background: #ffffff;
padding: 3.3rem 0;
width: 100%;
}
.faq-section .container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-inline: calc(0.25rem * 6);
text-align: center;
}
@media (min-width: 1024px) {
.faq-section .container {
padding-inline: calc(0.25rem * 12);
}
}
.faq-title_q {
font-family: Montserrat, sans-serif;
font-size: 24px;
font-weight: 600;
color: #2f4a25;
}
.faq-description {
font-family: Montserrat, sans-serif;
font-size: 16px;
line-height: 1.7;
color: #4b5563;
margin: 0 auto 2rem;
max-width: 700px;
}
.btn-faq {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: #ffffff;
color: rgb(112, 168, 59);
font-family: Montserrat, sans-serif;
font-size: 15px;
font-weight: 600;
padding: 0.4rem 1.2rem;
border: 1px solid rgb(112, 168, 59);
border-radius: 0.5rem;
text-decoration: none;
transition: all 0.2s ease;
}
.btn-faq:hover {
color: #ffffff;
border-color: #70a83b;
background: rgb(112, 168, 59);
}
.btn-faq svg {
width: 20px;
height: 20px;
stroke: currentColor;
}
/* PRECIOS FLOTANTES */
/* ==========================
Botón flotante de Precios al Por Mayor
=============================== */
.precios-mayor-float {
position: fixed;
width: 80px;
height: 80px;
top: 50%;
right: 0;
transform: translateY(-50%);
background-color: #70a83b;
color: #fff;
border-radius: 20px 0 0 20px;
text-align: center;
font-size: 11px;
font-weight: bold;
box-shadow: 0 4px 12px rgba(112, 168, 59, 0.4);
z-index: 999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
text-decoration: none;
cursor: pointer;
padding: 8px 5px;
line-height: 1.2;
margin-top: -40px;
}
.precios-mayor-float:hover {
background-color: #5d8a2f;
transform: translateY(-50%) translateX(-5px);
box-shadow: 0 6px 16px rgba(112, 168, 59, 0.6);
text-decoration: none;
color: #fff;
}
.precios-mayor-float:active {
transform: translateY(-50%) translateX(-3px);
}
.precios-mayor-float p {
margin: 0;
font-size: 11px;
line-height: 1.2;
text-transform: uppercase;
}
.precios-mayor-float span {
display: none;
margin-top: 5px;
}
.precios-mayor-float span svg {
width: 18px;
height: 18px;
}
.precios-mayor-float.show {
right: 320px;
transform: translateY(-50%);
}
/* Formulario flotante */
.form-precios-mayor {
position: fixed;
top: 50%;
right: -320px;
width: 320px;
z-index: 998;
transition: right 0.5s ease, transform 0.5s ease;
background-color: #f5f5f5;
border-radius: 10px 0 0 10px;
box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
max-height: calc(100vh - 120px);
overflow-y: auto;
transform: translateY(-50%);
}
.form-precios-mayor.show {
right: 0;
transform: translateY(-50%);
}
/* Tab del formulario */
.form-precios-mayor__tab {
background-color: #70a83b;
color: #fff;
padding: 12px 15px;
border-radius: 10px 0 0 0;
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
line-height: 1.3;
text-align: left;
}
.form-precios-mayor__tab p {
margin: 0;
font-size: 13px;
}
/* Contenedor del formulario */
.form-precios-mayor__form {
padding: 20px 15px;
background-color: #f5f5f5;
}
.form-precios-mayor__form .form-group {
margin-bottom: 15px;
}
.form-precios-mayor__form label {
display: block;
margin-bottom: 5px;
font-size: 13px;
color: #333;
font-weight: 500;
}
.form-precios-mayor__form input,
.form-precios-mayor__form textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
color: #333;
background-color: #fff;
box-sizing: border-box;
font-family: inherit;
}
.form-precios-mayor__form input:focus,
.form-precios-mayor__form textarea:focus {
outline: none;
border-color: #70a83b;
box-shadow: 0 0 0 2px rgba(112, 168, 59, 0.1);
}
.form-precios-mayor__form input::placeholder,
.form-precios-mayor__form textarea::placeholder {
color: #999;
}
.form-precios-mayor__form button {
width: 100%;
padding: 12px;
background-color: #70a83b;
color: #fff;
border: none;
border-radius: 4px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
text-transform: uppercase;
}
.form-precios-mayor__form button:hover {
background-color: rgb(93, 138, 47);
}
.form-precios-mayor__form button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
/* Loading */
.form-precios-mayor__loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
display: none;
align-items: center;
justify-content: center;
z-index: 10;
border-radius: 10px 0 0 10px;
}
.form-precios-mayor__loading.show {
display: flex;
}
.form-precios-mayor__loading-content {
text-align: center;
}
.form-precios-mayor__loading-content svg {
width: 30px;
height: 30px;
color: #70a83b;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Mensaje de éxito */
.form-precios-mayor__message-sent {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.95);
display: none;
align-items: center;
justify-content: center;
z-index: 10;
border-radius: 10px 0 0 10px;
}
.form-precios-mayor__message-sent.show {
display: flex;
}
.form-precios-mayor__message-sent-content {
text-align: center;
padding: 20px;
}
.form-precios-mayor__message-sent-content h4 {
font-size: 18px;
color: #70a83b;
margin-bottom: 10px;
}
.form-precios-mayor__message-sent-content p {
font-size: 14px;
color: #666;
margin-bottom: 15px;
}
.form-precios-mayor__message-sent-content svg {
width: 40px;
height: 40px;
color: #70a83b;
stroke: #70a83b;
}
/* Responsive: ajustar en móviles */
@media (max-width: 768px) {
.precios-mayor-float {
width: 70px;
height: 70px;
top: 50%;
transform: translateY(-50%);
margin-top: -35px;
font-size: 10px;
padding: 6px 4px;
}
.precios-mayor-float p {
font-size: 10px;
}
.precios-mayor-float.show {
right: 280px;
transform: translateY(-50%);
}
.form-precios-mayor {
width: 280px;
right: -280px;
top: 50%;
transform: translateY(-50%);
}
.form-precios-mayor.show {
transform: translateY(-50%);
}
.form-precios-mayor__tab {
padding: 10px 12px;
font-size: 12px;
}
.form-precios-mayor__form {
padding: 15px 12px;
}
.compras-unidad-float {
top: 50%;
transform: translateY(calc(-50% + 90px));
}
.compras-unidad-float.show {
transform: translateY(calc(-50% + 90px));
}
}
/* Botón de Compras por Unidad (debajo del de precios al por mayor, pero arriba de WhatsApp) */
.compras-unidad-float {
top: 50%;
transform: translateY(calc(-50% + 100px));
background-color: #70a83b;
}
.compras-unidad-float:hover {
background-color: #5d8a2f;
transform: translateY(calc(-50% + 100px)) translateX(-5px);
text-decoration: none;
color: #fff;
}
.compras-unidad-float:active {
transform: translateY(calc(-50% + 100px)) translateX(-3px);
}
.compras-unidad-float.show {
right: 320px;
transform: translateY(calc(-50% + 100px));
}
/* Ajustar posición cuando hay botón de WhatsApp */
@media (min-width: 769px) {
.precios-mayor-float {
top: 50%;
transform: translateY(-50%);
margin-top: -40px;
}
.compras-unidad-float {
top: 50%;
transform: translateY(calc(-50% + 100px));
}
}
/* Responsive para botón de compras por unidad */
@media (max-width: 768px) {
.compras-unidad-float {
bottom: 80px;
}
.compras-unidad-float.show {
right: 280px;
}
}
/* 404
*/
/* Estilos para la página 404 */
.error-404-section {
min-height: calc(100vh - 200px);
display: flex;
align-items: center;
justify-content: center;
padding: 3rem 1rem;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.error-404-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.error-404-image {
text-align: center;
}
.error-404-img {
max-width: 100%;
height: auto;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
.error-404-text {
text-align: left;
}
.error-404-title {
font-size: 8rem;
font-weight: 900;
color: #70a83b;
margin: 0;
line-height: 1;
font-family: 'Montserrat', sans-serif;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.error-404-subtitle {
font-size: 2.5rem;
font-weight: 700;
color: #111827;
margin: 1rem 0;
font-family: 'Montserrat', sans-serif;
}
.error-404-description {
font-size: 1.125rem;
color: #6b7280;
line-height: 1.6;
margin: 1.5rem 0 2.5rem 0;
max-width: 500px;
}
.error-404-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.error-404-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1.75rem;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
border-radius: 0.5rem;
transition: all 0.3s ease;
font-family: 'Montserrat', sans-serif;
border: 2px solid transparent;
}
.error-404-button-primary {
background: #70a83b;
color: #ffffff;
}
.error-404-button-primary:hover {
background: #608d33;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(112, 168, 59, 0.4);
}
.error-404-button-secondary {
background: transparent;
color: #70a83b;
border-color: #70a83b;
}
.error-404-button-secondary:hover {
background: #70a83b;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(112, 168, 59, 0.3);
}
.error-404-button svg {
transition: transform 0.3s ease;
}
.error-404-button:hover svg {
transform: translateX(4px);
}
/* Responsive */
@media (max-width: 968px) {
.error-404-content {
grid-template-columns: 1fr;
gap: 3rem;
text-align: center;
}
.error-404-text {
text-align: center;
}
.error-404-title {
font-size: 6rem;
}
.error-404-subtitle {
font-size: 2rem;
}
.error-404-description {
margin-left: auto;
margin-right: auto;
}
.error-404-actions {
justify-content: center;
}
}
@media (max-width: 576px) {
.error-404-section {
padding: 2rem 1rem;
}
.error-404-title {
font-size: 4rem;
}
.error-404-subtitle {
font-size: 1.5rem;
}
.error-404-description {
font-size: 1rem;
}
.error-404-button {
width: 100%;
justify-content: center;
}
.error-404-actions {
flex-direction: column;
}
}
/* WHATSAPP */
/* ==========================
Botón flotante de WhatsApp
=============================== */
.whatsapp-float {
position: fixed;
width: 60px;
height: 60px;
bottom: 20px;
right: 20px;
background-color: #25d366;
color: #fff;
border-radius: 50%;
text-align: center;
font-size: 30px;
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
text-decoration: none;
cursor: pointer;
}
.whatsapp-float:hover {
background-color: #20ba5a;
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(37, 211, 102, 0.6);
}
.whatsapp-float:active {
transform: scale(0.95);
}
.whatsapp-float svg {
width: 32px;
height: 32px;
fill: #fff;
}
/* Responsive: ajustar tamaño en móviles */
@media (max-width: 768px) {
.whatsapp-float {
width: 56px;
height: 56px;
bottom: 15px;
right: 15px;
}
.whatsapp-float svg {
width: 28px;
height: 28px;
}
}
/* Animación de pulso opcional */
@keyframes whatsapp-pulse {
0% {
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}
50% {
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.6);
}
100% {
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}
}
.whatsapp-float {
animation: whatsapp-pulse 2s ease-in-out infinite;
}
/* ABOUT */
/* About Page Styles */
.about-page {
background: #ffffff;
width: 100%;
}
/* Container */
.about-page .container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-inline: calc(0.25rem * 6); /* px-6 = 1.5rem = 24px */
}
@media (min-width: 1024px) {
.about-page .container {
padding-inline: calc(0.25rem * 12); /* lg:px-12 = 3rem = 48px */
}
}
/* Section Header */
.section-header {
text-align: center;
margin-bottom: 3rem;
}
.section-title {
font-family: Montserrat, sans-serif;
font-size: clamp(28px, 4vw, 36px);
font-weight: 600;
color: #2f4a25;
margin: 0 0 1rem 0;
}
.section-subtitle {
font-family: Montserrat, sans-serif;
font-size: 17px;
font-weight: 400;
color: #4b5563;
max-width: 48rem;
margin: 0 auto;
}
/* Hero Section */
.about-hero {
background: #f8f5ec;
padding: 4rem 0;
width: 100%;
}
@media (min-width: 1024px) {
.about-hero {
padding: 6rem 0;
}
}
.about-hero-content {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: center;
}
@media (min-width: 1024px) {
.about-hero-content {
grid-template-columns: 1fr 1fr;
gap: 4rem;
}
}
.about-hero-text {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.about-title {
font-family: Montserrat, sans-serif;
font-size: clamp(32px, 5vw, 48px);
font-weight: 700;
line-height: 1.2;
color: #2f4a25;
margin: 0;
}
.about-description {
font-family: Montserrat, sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1.7;
color: #4b5563;
margin: 0;
}
.about-hero-image {
position: relative;
}
.about-image-wrapper {
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.about-image {
width: 100%;
height: auto;
object-fit: cover;
display: block;
}
/* Story Section */
.about-story {
background: #ffffff;
padding: 4rem 0;
width: 100%;
}
@media (min-width: 1024px) {
.about-story {
padding: 6rem 0;
}
}
.story-stats {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 768px) {
.story-stats {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
.story-stat {
background: #f8f5ec;
border-radius: 0.875rem;
padding: 2rem;
}
.stat-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.stat-icon {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
background: #70a83b;
color: #ffffff;
}
.stat-icon svg {
width: 24px;
height: 24px;
}
.stat-title {
font-family: Montserrat, sans-serif;
font-size: 22px;
font-weight: 600;
color: #2f4a25;
margin: 0;
}
.stat-description {
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
color: #4b5563;
margin: 0;
}
/* Why Section */
.about-why {
background: #f8f5ec;
padding: 4rem 0;
width: 100%;
}
@media (min-width: 1024px) {
.about-why {
padding: 6rem 0;
}
}
.why-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 640px) {
.why-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.why-grid {
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
}
.why-item {
text-align: center;
}
.why-icon-wrapper {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
margin-bottom: 1rem;
}
.why-icon-wrapper svg {
width: 32px;
height: 32px;
color: #70a83b;
}
.why-title {
font-family: Montserrat, sans-serif;
font-size: 18px;
font-weight: 600;
color: #2f4a25;
margin: 0 0 0.75rem 0;
}
.why-description {
font-family: Montserrat, sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.6;
color: #4b5563;
margin: 0;
}
/* Timeline Section */
.about-timeline {
background: #ffffff;
padding: 4rem 0;
width: 100%;
}
@media (min-width: 1024px) {
.about-timeline {
padding: 6rem 0;
}
}
.timeline-wrapper {
position: relative;
}
.timeline-line {
display: none;
}
@media (min-width: 1024px) {
.timeline-line {
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background: #d1d5db;
}
}
.timeline-items {
display: flex;
flex-direction: column;
gap: 3rem;
}
.timeline-item {
position: relative;
}
@media (min-width: 1024px) {
.timeline-item {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
position: relative;
}
}
.timeline-dot {
display: none;
}
@media (min-width: 1024px) {
.timeline-dot {
display: block;
position: absolute;
left: 50%;
top: 2rem;
transform: translateX(-50%);
width: 1rem;
height: 1rem;
border-radius: 50%;
background: #70a83b;
border: 4px solid #ffffff;
z-index: 1;
}
}
.timeline-content {
position: relative;
}
@media (min-width: 1024px) {
.timeline-content.timeline-left {
text-align: right;
padding-right: 3rem;
}
.timeline-content.timeline-right {
grid-column-start: 2;
text-align: left;
padding-left: 3rem;
}
}
.timeline-year {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.375rem 1rem;
border-radius: 9999px;
background: #70a83b;
color: #ffffff;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 600;
margin-bottom: 0.75rem;
}
.timeline-title {
font-family: Montserrat, sans-serif;
font-size: 22px;
font-weight: 600;
color: #2f4a25;
margin: 0 0 0.75rem 0;
}
.timeline-description {
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
color: #4b5563;
margin: 0;
}
/* Commitment Section */
.about-commitment {
background: #f8f5ec;
padding: 4rem 0;
width: 100%;
}
@media (min-width: 1024px) {
.about-commitment {
padding: 6rem 0;
}
}
.commitment-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 640px) {
.commitment-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.commitment-grid {
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
}
.commitment-item {
background: #ffffff;
border-radius: 0.875rem;
padding: 1.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
transition-property: box-shadow;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 0.15s;
}
.commitment-item:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.commitment-icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
background: #f8f5ec;
margin-bottom: 1rem;
}
.commitment-icon-wrapper svg {
width: 28px;
height: 28px;
color: #70a83b;
}
.commitment-title {
font-family: Montserrat, sans-serif;
font-size: 18px;
font-weight: 600;
color: #2f4a25;
margin: 0 0 0.75rem 0;
}
.commitment-description {
font-family: Montserrat, sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.6;
color: #4b5563;
margin: 0;
}
/* CTA Section */
.about-cta {
background: #ffffff;
padding: 4rem 0;
width: 100%;
text-align: center;
}
@media (min-width: 1024px) {
.about-cta {
padding: 6rem 0;
}
}
.about-cta .container {
max-width: 800px;
}
.cta-title {
font-family: Montserrat, sans-serif;
font-size: clamp(28px, 4vw, 36px);
font-weight: 600;
color: #2f4a25;
margin: 0 0 1.5rem 0;
}
.cta-description {
font-family: Montserrat, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
color: #4b5563;
max-width: 42rem;
margin: 0 auto 2rem auto;
}
.btn-cta-primary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1rem 2rem;
border-radius: 0.5rem;
background: #70a83b;
color: #ffffff;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition-property: background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 0.15s;
}
.btn-cta-primary:hover {
background: #608d33;
}
/* Responsive */
@media (max-width: 640px) {
.about-hero {
padding: 3rem 0;
}
.about-story,
.about-why,
.about-timeline,
.about-commitment,
.about-cta {
padding: 3rem 0;
}
.about-title {
font-size: 32px;
}
.about-description {
font-size: 16px;
}
.section-header {
margin-bottom: 2rem;
}
.section-title {
font-size: 28px;
}
.section-subtitle {
font-size: 15px;
}
.story-stat,
.commitment-item {
padding: 1.5rem;
}
.stat-title,
.timeline-title,
.commitment-title {
font-size: 20px;
}
.stat-description,
.timeline-description,
.commitment-description {
font-size: 15px;
}
}
/* TAILWIND */
/* CSS Variables - Tailwind Theme */
:root {
--font-size: 16px;
--background: #fff;
--foreground: oklch(0.145 0 0);
--default-transition-duration: 0.15s;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Base Reset - Tailwind Base Layer */
*, :after, :before, ::backdrop {
box-sizing: border-box;
border: 0 solid;
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
tab-size: 4;
line-height: 1.5;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-feature-settings: normal;
font-variation-settings: normal;
-webkit-tap-highlight-color: transparent;
font-size: var(--font-size);
}
body {
line-height: inherit;
background-color: var(--background);
color: var(--foreground);
}