/* ========================================================================= RUDELARIS CBD — HOJA DE ESTILOS PRINCIPAL ========================================================================= Cómo está organizado este archivo (leelo antes de tocar nada): 1. VARIABLES GLOBALES -> colores, tipografías, espaciados. Si mañana cambian el logo o la paleta, se edita SOLO ACÁ y se actualiza todo el sitio automáticamente. 2. RESET / BASE -> reglas generales de HTML (body, links, etc). 3. UTILIDADES -> clases chicas reutilizables (contenedor, etc). 4. HEADER -> menú superior + botón "Ir a la tienda". 5. HERO -> portada principal. 6. NOSOTROS -> sección "quiénes somos". 7. PRODUCTOS -> grilla de las 6 variantes (3 productos x 2 medidas). Las tarjetas se generan con JS a partir de /js/products-data.js, así que el HTML de cada tarjeta NO se escribe a mano acá, se arma solo. 8. BENEFICIOS -> íconos de propiedades (natural, sin parabenos, etc). 9. DISTRIBUIDORES -> sección "¿Querés ser distribuidor?" + formulario de contacto. 10. FOOTER -> pie de página (repite el link a la tienda). 11. RESPONSIVE -> ajustes para celular. ========================================================================= */ /* ========================================================================= 1. VARIABLES GLOBALES — "puntos unificados" de diseño ========================================================================= */ :root { /* --- Colores extraídos del isologo de Rudelaris --- */ --color-verde-oscuro: #1f3d2b; /* verde principal: título, texto fuerte */ --color-verde: #2d5940; /* verde secundario: botones, líneas */ --color-verde-claro: #6b8f6f; /* verde suave: detalles, hover */ --color-lila: #9b7fc7; /* lila de la lavanda: acentos, "Calma" */ --color-lila-claro: #c9b8e6; /* lila pastel: fondos suaves */ --color-dorado: #b8932f; /* dorado del anillo del logo: detalles */ --color-crema: #f7f2e7; /* fondo general del sitio */ --color-crema-oscuro: #efe7d6; /* fondo de secciones alternadas */ --color-blanco: #ffffff; --color-texto: #2b2b23; /* texto de párrafos */ --color-texto-suave: #5c5c50; /* texto secundario / descripciones */ /* --- Tipografías --- Poppins (peso 700/800) para títulos, script para acentos tipo "Calma", y Poppins también para textos de uso general y botones (pesos más livianos). Se cargan desde Google Fonts en el del index.html. */ --fuente-titulos: 'Poppins', Arial, sans-serif; --fuente-acento: 'Dancing Script', cursive; --fuente-texto: 'Poppins', Arial, sans-serif; /* --- Espaciados reutilizables --- */ --espacio-seccion: 6rem; --espacio-seccion-mobile: 3.5rem; --radio-borde: 18px; --ancho-maximo: 1180px; /* --- Sombra suave reutilizable (tarjetas, header al hacer scroll) --- */ --sombra-suave: 0 10px 30px rgba(31, 61, 43, 0.08); } /* ========================================================================= 2. RESET / BASE ========================================================================= */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--fuente-texto); color: var(--color-texto); background-color: var(--color-crema); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } h1, h2, h3, h4 { font-family: var(--fuente-titulos); color: var(--color-verde-oscuro); line-height: 1.2; font-weight: 800; /* Poppins ExtraBold: compensa que ya no es serif */ } ul { list-style: none; } button { font-family: var(--fuente-texto); cursor: pointer; border: none; } /* ========================================================================= 3. UTILIDADES ========================================================================= */ .contenedor { width: 100%; max-width: var(--ancho-maximo); margin: 0 auto; padding: 0 1.5rem; } .seccion { padding: var(--espacio-seccion) 0; } .titulo-seccion { text-align: center; font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 0.75rem; } .subtitulo-seccion { text-align: center; color: var(--color-texto-suave); max-width: 620px; margin: 0 auto 3rem auto; font-size: 1.05rem; } /* Acento tipo "Calma" del logo: usar con moderación, solo para palabras clave (no para párrafos enteros, la tipografía script se lee mal en textos largos). */ .acento-script { font-family: var(--fuente-acento); color: var(--color-lila); font-size: 1.4em; } /* Botón principal (dorado/verde) reutilizado en header, hero y tarjetas */ .boton { display: inline-block; padding: 0.9rem 2rem; border-radius: 50px; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.03em; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .boton-primario { background-color: var(--color-verde-oscuro); color: var(--color-blanco); } .boton-primario:hover { background-color: var(--color-verde); transform: translateY(-2px); box-shadow: var(--sombra-suave); } .boton-secundario { background-color: transparent; color: var(--color-verde-oscuro); border: 1.5px solid var(--color-verde-oscuro); } .boton-secundario:hover { background-color: var(--color-verde-oscuro); color: var(--color-blanco); } /* ========================================================================= 4. HEADER ========================================================================= */ .header { position: sticky; top: 0; z-index: 100; background-color: rgba(247, 242, 231, 0.92); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(31, 61, 43, 0.08); } .header__contenido { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.5rem; } .header__marca { display: flex; align-items: center; gap: 0.6rem; } .header__logo { height: 46px; width: auto; } .header__nombre { font-family: var(--fuente-titulos); font-size: 1.3rem; color: var(--color-verde-oscuro); font-weight: 700; } .header__nav { display: flex; align-items: center; gap: 2rem; } .header__links { display: flex; gap: 1.8rem; } .header__links a { font-size: 0.92rem; font-weight: 500; color: var(--color-verde-oscuro); position: relative; } .header__links a::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background-color: var(--color-dorado); transition: width 0.25s ease; } .header__links a:hover::after { width: 100%; } /* Botón "Ir a la tienda": este es el link clave hacia el subdominio de WooCommerce (tienda.ruderalis.com.ar). Está centralizado en /js/main.js -> CONFIG.urlTienda, así que para cambiar el link no hay que tocar el HTML, se edita esa única línea. */ .header__boton-tienda { padding: 0.65rem 1.5rem; font-size: 0.9rem; } /* Botón hamburguesa (solo se muestra en mobile, ver sección RESPONSIVE) */ .header__menu-toggle { display: none; background: none; flex-direction: column; gap: 5px; padding: 0.5rem; } .header__menu-toggle span { width: 24px; height: 2px; background-color: var(--color-verde-oscuro); } /* ========================================================================= 5. HERO ========================================================================= */ .hero { padding: 4rem 0 var(--espacio-seccion) 0; overflow: hidden; } .hero__contenido { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; } .hero__etiqueta { display: inline-block; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-dorado); font-weight: 600; margin-bottom: 1rem; } .hero__titulo { font-size: clamp(2.4rem, 5vw, 3.6rem); margin-bottom: 1.2rem; } .hero__descripcion { font-size: 1.05rem; color: var(--color-texto-suave); max-width: 480px; margin-bottom: 2rem; } .hero__acciones { display: flex; gap: 1rem; flex-wrap: wrap; } .hero__imagen-wrap { position: relative; display: flex; align-items: center; justify-content: center; } .hero__imagen-circulo { width: 100%; max-width: 420px; aspect-ratio: 1 / 1; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--color-crema-oscuro), var(--color-lila-claro) 130%); display: flex; align-items: center; justify-content: center; box-shadow: var(--sombra-suave); /* Animación suave y continua tipo "flotando": sube/baja y se agranda apenas, en loop infinito. "ease-in-out" en las dos puntas hace que no se sienta un salto al reiniciar el ciclo. Si algún día se quiere apagar, alcanza con borrar esta línea (el círculo queda quieto). */ animation: flotar-circulo 6s ease-in-out infinite; } .hero__imagen-circulo img { /* La foto llena todo el círculo (antes acá iba el isologo chico centrado). object-fit: cover recorta la imagen si hace falta para que no se deforme. */ width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* Respeta a quienes configuraron "reducir movimiento" en su sistema operativo (accesibilidad): a ellos no se les anima el círculo. */ @media (prefers-reduced-motion: reduce) { .hero__imagen-circulo { animation: none; } } @keyframes flotar-circulo { 0%, 100% { transform: translateY(0) scale(1); box-shadow: var(--sombra-suave); } 50% { transform: translateY(-14px) scale(1.02); box-shadow: 0 22px 40px rgba(31, 61, 43, 0.14); } } /* ========================================================================= 6. NOSOTROS ========================================================================= */ .nosotros { background-color: var(--color-crema-oscuro); } .nosotros__contenido { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3rem; align-items: center; } .nosotros__imagen { border-radius: var(--radio-borde); overflow: hidden; box-shadow: var(--sombra-suave); background-color: var(--color-blanco); display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; } .nosotros__imagen img { /* Antes mostraba el isologo chico centrado; ahora es una foto de producto que ocupa toda la tarjeta. */ width: 100%; height: 100%; object-fit: cover; } .nosotros__texto h2 { margin-bottom: 1.2rem; } .nosotros__texto p { color: var(--color-texto-suave); margin-bottom: 1rem; } .nosotros__lista { margin-top: 1.5rem; display: grid; gap: 0.9rem; } /* Cada item: ícono + texto. Por defecto se ve la frase CORTA; al pasar el mouse (o hacer foco, para teclado/touch) se revela la frase COMPLETA en el mismo lugar, sin mover el resto de la página. */ .nosotros__item { display: flex; align-items: center; gap: 0.8rem; font-size: 0.95rem; border-radius: 10px; padding: 0.3rem 0.4rem; margin: -0.3rem -0.4rem; transition: background-color 0.2s ease; outline: none; } .nosotros__item:hover, .nosotros__item:focus-visible { background-color: rgba(184, 147, 47, 0.1); } .nosotros__item-icono { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background-color: var(--color-blanco); color: var(--color-dorado); display: flex; align-items: center; justify-content: center; } .nosotros__item-icono svg { width: 18px; height: 18px; } /* Truco de "grid stacking": corto y completo ocupan la MISMA celda de grilla (1 / 1), superpuestos, y se cruza la opacidad entre los dos. Así el contenedor mide lo que ocupa el texto completo (el más largo) y no hay saltos de layout al pasar el mouse. */ .nosotros__item-texto { display: grid; } .nosotros__item-corto, .nosotros__item-completo { grid-area: 1 / 1; transition: opacity 0.2s ease; } .nosotros__item-corto { font-weight: 600; color: var(--color-verde-oscuro); } .nosotros__item-completo { color: var(--color-texto-suave); opacity: 0; pointer-events: none; } .nosotros__item:hover .nosotros__item-corto, .nosotros__item:focus-visible .nosotros__item-corto { opacity: 0; } .nosotros__item:hover .nosotros__item-completo, .nosotros__item:focus-visible .nosotros__item-completo { opacity: 1; } /* ========================================================================= 7. PRODUCTOS ========================================================================= */ .productos__grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } /* Cada tarjeta de producto es generada por /js/main.js a partir de /js/products-data.js. Estructura esperada (ver esa función para el detalle): .tarjeta-producto > imagen + info + botón. */ .tarjeta-producto { background-color: var(--color-blanco); border-radius: var(--radio-borde); overflow: hidden; box-shadow: var(--sombra-suave); display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease; } .tarjeta-producto:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(31, 61, 43, 0.14); } .tarjeta-producto__imagen { aspect-ratio: 1 / 1; background: linear-gradient(160deg, var(--color-crema-oscuro), var(--color-lila-claro)); display: flex; align-items: center; justify-content: center; position: relative; } .tarjeta-producto__imagen img { width: 55%; height: 55%; object-fit: contain; } /* Placeholder que se muestra automáticamente cuando el producto todavía no tiene foto real cargada en products-data.js (imagen: null). */ .tarjeta-producto__placeholder { font-family: var(--fuente-titulos); font-size: 0.85rem; color: var(--color-verde); text-align: center; padding: 1rem; opacity: 0.7; } .tarjeta-producto__medida { position: absolute; top: 0.9rem; right: 0.9rem; background-color: var(--color-verde-oscuro); color: var(--color-blanco); font-size: 0.78rem; font-weight: 600; padding: 0.3rem 0.75rem; border-radius: 50px; } .tarjeta-producto__info { padding: 1.4rem 1.4rem 1.6rem 1.4rem; display: flex; flex-direction: column; flex-grow: 1; } .tarjeta-producto__linea { font-family: var(--fuente-acento); color: var(--color-lila); font-size: 1.1rem; margin-bottom: 0.1rem; } .tarjeta-producto__nombre { font-size: 1.15rem; margin-bottom: 0.5rem; } .tarjeta-producto__descripcion { font-size: 0.88rem; color: var(--color-texto-suave); margin-bottom: 1.1rem; flex-grow: 1; } .tarjeta-producto__pie { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; } .tarjeta-producto__precio { font-weight: 700; color: var(--color-verde-oscuro); font-size: 1.05rem; } /* Se agrega automáticamente cuando el precio todavía no está confirmado (precio: null en products-data.js), para no mostrar nunca un precio inventado en la página. */ .tarjeta-producto__precio--pendiente { font-size: 0.85rem; font-weight: 500; color: var(--color-texto-suave); font-style: italic; } .tarjeta-producto__boton { padding: 0.55rem 1.2rem; font-size: 0.82rem; background-color: var(--color-verde-oscuro); color: var(--color-blanco); border-radius: 50px; font-weight: 600; white-space: nowrap; } .tarjeta-producto__boton:hover { background-color: var(--color-dorado); } /* ========================================================================= 8. BENEFICIOS ========================================================================= */ .beneficios__grilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; } .beneficio__icono { width: 60px; height: 60px; margin: 0 auto 1rem auto; border-radius: 50%; background-color: var(--color-crema-oscuro); display: flex; align-items: center; justify-content: center; } /* Los 4 íconos son SVG de línea (stroke: currentColor), así que el "color" del ícono es simplemente el color de texto de su contenedor. Para agregar un 5to ícono con otro color de marca, alcanza con crear una clase más acá siguiendo el mismo patrón. */ .beneficio__icono svg { width: 28px; height: 28px; } .beneficio__icono--verde { color: var(--color-verde); } .beneficio__icono--verde-oscuro { color: var(--color-verde-oscuro); } .beneficio__icono--dorado { color: var(--color-dorado); } .beneficio__icono--lila { color: var(--color-lila); } .beneficio__titulo { font-family: var(--fuente-texto); font-weight: 600; font-size: 0.95rem; color: var(--color-verde-oscuro); margin-bottom: 0.4rem; } .beneficio__texto { font-size: 0.85rem; color: var(--color-texto-suave); } /* ========================================================================= 9. DISTRIBUIDORES ========================================================================= */ .distribuidores { background-color: var(--color-verde-oscuro); color: var(--color-crema); } .distribuidores__contenido { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3.5rem; align-items: start; } .distribuidores__texto h2 { color: var(--color-crema); /* sobre fondo oscuro, el h2 no puede ser verde */ margin-bottom: 1rem; } .distribuidores__descripcion { color: rgba(247, 242, 231, 0.8); margin-bottom: 1.5rem; max-width: 440px; } .distribuidores__beneficios { display: grid; gap: 0.8rem; } .distribuidores__beneficios li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.95rem; color: rgba(247, 242, 231, 0.85); } .distribuidores__beneficios li::before { content: '✦'; color: var(--color-dorado); flex-shrink: 0; } /* --- Formulario --- */ .distribuidores__form { background-color: var(--color-crema); border-radius: var(--radio-borde); padding: 2rem; box-shadow: var(--sombra-suave); display: grid; gap: 1.1rem; } .form__fila { display: grid; gap: 0.4rem; } .form__fila-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } .distribuidores__form label { font-size: 0.85rem; font-weight: 600; color: var(--color-verde-oscuro); } .distribuidores__form input, .distribuidores__form textarea { font-family: var(--fuente-texto); font-size: 0.95rem; color: var(--color-texto); background-color: var(--color-blanco); border: 1.5px solid rgba(31, 61, 43, 0.15); border-radius: 10px; padding: 0.7rem 0.9rem; resize: vertical; transition: border-color 0.2s ease; } .distribuidores__form input:focus, .distribuidores__form textarea:focus { outline: none; border-color: var(--color-verde); } .distribuidores__boton { justify-self: start; margin-top: 0.3rem; } /* Mensaje de confirmación/error tras enviar (ver js/main.js). Vacío por defecto: JS le agrega texto y una de las 2 clases de modificador. */ .distribuidores__form-estado { font-size: 0.85rem; font-weight: 500; min-height: 1.2em; } .distribuidores__form-estado--ok { color: var(--color-verde); } .distribuidores__form-estado--error { color: #b23a3a; } /* ========================================================================= 10. FOOTER ========================================================================= */ .footer { background-color: var(--color-verde-oscuro); color: var(--color-crema); padding: 3.5rem 0 1.5rem 0; } .footer__contenido { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; margin-bottom: 2.5rem; } .footer__marca { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; } .footer__logo { height: 40px; width: 40px; object-fit: contain; background-color: var(--color-crema); border-radius: 50%; padding: 6px; } .footer__nombre { font-family: var(--fuente-titulos); font-size: 1.15rem; } .footer__descripcion { font-size: 0.88rem; color: rgba(247, 242, 231, 0.75); max-width: 320px; } .footer__titulo-columna { font-family: var(--fuente-texto); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-dorado); margin-bottom: 1rem; } .footer__links { display: grid; gap: 0.6rem; } .footer__links a { font-size: 0.9rem; color: rgba(247, 242, 231, 0.85); } .footer__links a:hover { color: var(--color-dorado); } .footer__boton-tienda { margin-top: 0.5rem; } .footer__inferior { border-top: 1px solid rgba(247, 242, 231, 0.15); padding-top: 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem; font-size: 0.78rem; color: rgba(247, 242, 231, 0.6); } /* ========================================================================= 11. RESPONSIVE ========================================================================= */ @media (max-width: 900px) { .hero__contenido, .nosotros__contenido, .distribuidores__contenido { grid-template-columns: 1fr; } .form__fila-doble { grid-template-columns: 1fr; } .nosotros__imagen { order: -1; aspect-ratio: 16 / 9; } .productos__grilla { grid-template-columns: repeat(2, 1fr); } .beneficios__grilla { grid-template-columns: repeat(2, 1fr); } .footer__contenido { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { :root { --espacio-seccion: var(--espacio-seccion-mobile); } .header__links, .header__boton-tienda { display: none; } .header__menu-toggle { display: flex; } /* Menú mobile desplegado (JS le agrega/saca la clase .abierto) */ .header__nav.abierto { position: absolute; top: 100%; left: 0; right: 0; background-color: var(--color-crema); flex-direction: column; align-items: flex-start; padding: 1.5rem; gap: 1.2rem; box-shadow: var(--sombra-suave); } .header__nav.abierto .header__links { flex-direction: column; gap: 1rem; } .header__nav.abierto .header__boton-tienda { display: inline-block; } .productos__grilla { grid-template-columns: 1fr; } .beneficios__grilla { grid-template-columns: 1fr 1fr; } .footer__contenido { grid-template-columns: 1fr; } .hero__acciones { flex-direction: column; align-items: stretch; } .hero__acciones .boton { text-align: center; } .distribuidores__form { padding: 1.4rem; } }