/* estilo.css — Comercio Red COMAL Paleta tomada del sitio institucional real (redcomal.org.hn): verde #319678 y dorado #F9BE47 leídos directo de sus estilos calculados, más el terracota del logo (el comal de barro) como acento de marca. El dorado real es muy claro para texto blanco encima (falla contraste), así que se usa solo en detalles sin texto (--dorado-vivo); los círculos/insignias con texto usan un dorado más oscuro (--dorado) con mejor contraste. Tipografía Poppins, consistente con el resto de entregables de Sistemas del Occidente. Todo en variables para poder ajustar sin tocar el resto del archivo. */ :root { --verde-oscuro: #1F6B54; --verde: #319678; --verde-suave: #E7F3EE; --dorado: #C08A1E; --dorado-vivo: #F9BE47; --terracota-logo: #A6592E; --taupe: #7D7160; --texto: #2A2E28; --texto-suave: #5B6058; --fondo: #FBFAF8; --tarjeta: #FFFFFF; --borde: #DFE7E2; --whatsapp: #25D366; --radio: 10px; --sombra: 0 2px 10px rgba(31, 107, 84, 0.1); } * { box-sizing: border-box; } /* Aplicada al mientras el panel de carrito o un modal está abierto (ver actualizarBloqueoScroll en js/carrito.js), para que el fondo no se desplace detrás del overlay. */ html.bloqueo-scroll, body.bloqueo-scroll { overflow: hidden; } body { margin: 0; font-family: 'Poppins', Arial, sans-serif; color: var(--texto); background: var(--fondo); line-height: 1.5; } h1, h2, h3 { font-weight: 600; margin: 0 0 .5em; } p { margin: 0 0 1em; color: var(--texto-suave); } .contenedor { max-width: 1100px; margin: 0 auto; padding: 0 20px; } a { color: var(--verde-oscuro); } /* --- Animaciones al hacer scroll (ver js/animaciones.js) --- */ /* Ocultas solo cuando js/animaciones.js confirma que corrió (clase puesta en por ese script) — así, si el archivo no carga por algún motivo, el contenido queda visible de entrada en vez de perderse detrás de un opacity:0 que nunca se quita. */ .revelar { transition: opacity .6s ease, transform .6s ease; } html.js-revelado .revelar { opacity: 0; transform: translateY(22px); } html.js-revelado .revelar.revelar--visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* --- Header --- */ .sitio-header { background: var(--tarjeta); border-top: 3px solid var(--terracota-logo); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 20; transition: box-shadow .2s ease; } .sitio-header--con-sombra { box-shadow: 0 4px 16px rgba(20, 40, 30, .1); } /* Banner de anuncios (js/anuncios.js) — solo aparece con MODO_API_REAL y al menos un anuncio vigente; el resto del tiempo queda [hidden]. Ronda 36: antes era texto plano sobre un pastel sin ícono ni jerarquía; ahora usa los colores de marca (ver ESTILOS_POR_TIPO en anuncios.js), un ícono por tipo, y el enlace es una pastilla en vez de texto subrayado. */ .anuncios-banner { font-size: .92rem; } .anuncios-banner__inner { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 46px 12px 20px; text-align: center; flex-wrap: wrap; } .anuncios-banner__icono { flex-shrink: 0; display: flex; opacity: .95; } .anuncios-banner__icono svg { width: 20px; height: 20px; display: block; } .anuncios-banner__texto { line-height: 1.4; } .anuncios-banner__enlace { flex-shrink: 0; padding: 4px 14px; border-radius: 999px; border: 1.5px solid currentColor; color: inherit; font-weight: 700; font-size: .82rem; text-decoration: none; white-space: nowrap; transition: background .2s ease; } .anuncios-banner__enlace:hover { background: rgba(255,255,255,.22); } .anuncios-banner--claro .anuncios-banner__enlace:hover { background: rgba(0,0,0,.08); } .anuncios-banner__cerrar { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.2); border: none; font-size: 1.1rem; line-height: 1; cursor: pointer; color: inherit; transition: background .2s ease; } .anuncios-banner__cerrar:hover { background: rgba(255,255,255,.34); } .anuncios-banner--claro .anuncios-banner__cerrar { background: rgba(0,0,0,.08); } .anuncios-banner--claro .anuncios-banner__cerrar:hover { background: rgba(0,0,0,.16); } .sitio-header__inner { display: flex; align-items: center; gap: 16px; padding: 14px 20px; flex-wrap: wrap; } .marca { text-decoration: none; display: flex; align-items: center; gap: 12px; } .marca__logo { height: 48px; width: auto; display: block; } .marca__tagline { display: block; font-size: .8rem; color: var(--texto-suave); font-weight: 500; } .nav-principal { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; } .nav-principal a { text-decoration: none; color: var(--texto); font-weight: 500; font-size: .95rem; } .nav-principal a:hover { color: var(--verde-oscuro); } .nav-principal a.activo { color: var(--verde-oscuro); font-weight: 700; border-bottom: 2px solid var(--dorado-vivo); } .boton-carrito { background: var(--verde-oscuro); color: #fff; border: none; border-radius: var(--radio); padding: 10px 16px; font-family: inherit; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } .boton-carrito:hover { background: var(--verde); } .boton-carrito__contador { background: var(--dorado); color: #fff; border-radius: 999px; min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; padding: 0 6px; } .boton-carrito__contador--pulso { animation: pulso-contador .4s ease; } @keyframes pulso-contador { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } } /* Animación de aparición reusada por .cabecera-editorial (Catálogo/Quiénes somos/Contacto) y por el héroe editorial de Inicio — ver "Rediseño editorial de Inicio" al final del archivo. */ @keyframes aparecer { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .boton { display: inline-block; text-decoration: none; padding: 12px 22px; border-radius: var(--radio); font-weight: 600; cursor: pointer; border: none; font-family: inherit; font-size: 1rem; text-align: center; } .boton--primario { background: var(--verde-oscuro); color: #fff; } .boton--primario:hover { background: var(--verde); } .boton--secundario { background: var(--taupe); color: #fff; } .boton--secundario:hover { opacity: .9; } .boton--whatsapp { background: var(--whatsapp); color: #fff; } .boton--whatsapp:hover { opacity: .9; } .boton--fantasma { background: transparent; color: var(--verde-oscuro); border: 1.5px solid var(--verde-oscuro); } .boton--fantasma:hover { background: var(--verde-suave); } .boton--ancho { display: block; width: 100%; } /* --- Destacados (Inicio) --- */ .destacados { padding: 56px 0 24px; } .destacados__cabecera { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .destacados__cabecera h2 { margin: 0; } .enlace-ver-todo { font-weight: 600; text-decoration: none; font-size: .9rem; } /* --- Cabecera genérica de página interna (Quiénes somos / Contacto) --- */ /* Cabecera editorial: banner con foto a sangre, usado por Catálogo, Quiénes somos y Contacto (reemplaza a la vieja .pagina-cabecera, un degradado plano sin foto). Es una versión más corta del .hero-editorial de Inicio — mismo lenguaje visual, menos protagonismo porque estas páginas tienen contenido propio debajo. */ .cabecera-editorial { position: relative; min-height: min(52vh, 420px); display: flex; align-items: flex-end; overflow: hidden; color: #fff; } .cabecera-editorial__medio { position: absolute; inset: 0; z-index: 0; } .cabecera-editorial__medio img { width: 100%; height: 100%; object-fit: cover; display: block; } .cabecera-editorial__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,53,42,.35) 0%, rgba(11,32,25,.55) 55%, rgba(11,32,25,.92) 100%); } .cabecera-editorial__contenido { position: relative; z-index: 1; padding: 44px 0 38px; animation: aparecer .7s ease; } .cabecera-editorial__ojo { text-transform: uppercase; letter-spacing: .14em; font-weight: 600; font-size: .78rem; color: var(--dorado-vivo); margin: 0 0 12px; } .cabecera-editorial h1 { color: #fff; margin: 0 0 12px; font-size: clamp(2rem, 4.6vw, 3.1rem); max-width: 17ch; } .cabecera-editorial__intro { color: rgba(255,255,255,.88); max-width: 620px; margin: 0 0 .5em; } .cabecera-editorial__lema { display: block; font-weight: 700; color: var(--dorado-vivo); text-transform: uppercase; letter-spacing: .03em; font-size: .9rem; margin-bottom: .5em; } .seccion-texto { padding: 40px 0; max-width: 720px; } .seccion-texto--ancha { max-width: 900px; } .lista-principios { margin: 16px 0 0; padding-left: 1.2em; } .lista-principios li { margin-bottom: 8px; color: var(--texto); } /* Encabezado de sección con ícono (Quiénes somos) */ .encabezado-icono { display: flex; align-items: center; gap: 12px; margin-bottom: .6em; } .encabezado-icono img { width: 40px; height: 40px; flex-shrink: 0; } .encabezado-icono h2 { margin: 0; } /* Galería de imágenes genéricas (Quiénes somos) — placeholders a reemplazar */ .galeria-generica { padding: 8px 0 40px; } .galeria-generica__nota { font-size: .8rem; font-style: italic; color: var(--texto-suave); margin-bottom: 12px; } .galeria-generica__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .galeria-generica__grid figure { margin: 0; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); transition: transform .2s ease, box-shadow .2s ease; } .galeria-generica__grid figure:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(31, 107, 84, .16); } .galeria-generica__grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .3s ease; } .galeria-generica__grid figure:hover img { transform: scale(1.05); } .galeria-generica__grid figcaption { padding: 10px 14px; font-weight: 600; font-size: .9rem; color: var(--verde-oscuro); } /* --- Secciones con fondo alterno (Quiénes somos) --- */ .seccion-alterna { background: var(--verde-suave); padding: 40px 0; } /* Tarjetas de "Nuestros rubros" (antes eran solo píldoras de color) — cada una es una foto genérica (la misma que ya usa ese rubro como respaldo en datos_productos.js, para que la web sea consistente) con un velo del color propio del rubro encima, para que el nombre siempre se lea bien sin importar la foto. --color-rubro va en "R,G,B" (sin el rgb(...)) para poder componer la transparencia del velo con rgba(). */ .grid-rubros { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } .tarjeta-rubro { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); background-image: linear-gradient(180deg, rgba(var(--color-rubro), .12) 0%, rgba(var(--color-rubro), .38) 55%, rgba(var(--color-rubro), .92) 100%), var(--foto-rubro); background-size: cover; background-position: center; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 8px; padding: 14px; transition: transform .2s ease, box-shadow .2s ease; } .tarjeta-rubro:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(31, 107, 84, .2); } .tarjeta-rubro__icono { width: 42px; height: 32px; object-fit: contain; /* Vuelve blanco el ícono (que en su archivo original trae el color del propio rubro) para que se lea sobre el velo de color de la tarjeta. */ filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0, 0, 0, .3)); } .tarjeta-rubro__nombre { color: #fff; font-weight: 700; font-size: .92rem; line-height: 1.25; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); } /* Misión y visión en paralelo (antes iban en dos párrafos apilados) */ .grid-mision-vision { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 4px; } .tarjeta-mision-vision { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 20px 22px; } .tarjeta-mision-vision h3 { margin: 0 0 8px; color: var(--verde-oscuro); font-size: 1.05rem; } .tarjeta-mision-vision p { margin: 0; } @media (max-width: 760px) { .grid-mision-vision { grid-template-columns: 1fr; } } /* --- Contacto --- */ .contacto-detalle { padding: 40px 0 56px; } .contacto__lista { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .contacto__lista li { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; display: flex; align-items: flex-start; gap: 12px; box-shadow: var(--sombra); transition: transform .2s ease, box-shadow .2s ease; } .contacto__lista li:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(31, 107, 84, .14); } .contacto__lista li img { flex-shrink: 0; } .contacto__lista li > div { display: flex; flex-direction: column; gap: 4px; } .contacto__lista strong { color: var(--verde-oscuro); font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; } .contacto-nota { font-size: .9rem; } /* --- Catálogo --- */ .catalogo { padding: 56px 0; } .catalogo__controles { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 24px; } .buscador { font-family: inherit; padding: 10px 14px; border: 1px solid var(--borde); border-radius: var(--radio); min-width: 220px; flex: 1 1 220px; } .filtros-rubro { display: flex; flex-wrap: wrap; gap: 8px; } .filtro-rubro { border: 1px solid var(--borde); background: var(--tarjeta); border-radius: 999px; padding: 6px 14px; font-family: inherit; font-size: .85rem; cursor: pointer; color: var(--texto); } .filtro-rubro[aria-pressed="true"] { background: var(--verde-oscuro); border-color: var(--verde-oscuro); color: #fff; } .grid-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; } .tarjeta-producto { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; box-shadow: var(--sombra); display: flex; flex-direction: column; transition: transform .22s ease, box-shadow .22s ease; animation: tarjeta-aparecer .4s ease both; animation-delay: calc(var(--i, 0) * 60ms); } .tarjeta-producto:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(31, 107, 84, .18); } @keyframes tarjeta-aparecer { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .tarjeta-producto__enlace-imagen { position: relative; } .tarjeta-producto__imagen { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--verde-suave); transition: transform .3s ease; } .tarjeta-producto:hover .tarjeta-producto__imagen { transform: scale(1.05); } .tarjeta-producto__cuerpo { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .insignia-rubro { display: inline-flex; align-items: center; align-self: flex-start; font-size: .7rem; font-weight: 600; line-height: 1; color: #fff; padding: 5px 10px; border-radius: 999px; } /* La insignia flota sobre la foto de la tarjeta (no la del encabezado de producto.html, que sigue en línea con el texto) — con su propia sombra para que se lea bien encima de cualquier foto, clara u oscura. */ .tarjeta-producto__insignia { position: absolute; top: 10px; left: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); } .tarjeta-producto h3 { font-size: 1.08rem; margin: 2px 0 0; line-height: 1.3; } .tarjeta-producto__descripcion { font-size: .85rem; line-height: 1.45; margin: 0 0 4px; } .tarjeta-producto__precios { font-size: .85rem; color: var(--texto); margin: 0; display: flex; flex-direction: column; gap: 3px; } .tarjeta-producto__precio-principal { font-size: 1.15rem; font-weight: 700; color: var(--verde-oscuro); } .tarjeta-producto__precio-principal small { font-size: .74rem; font-weight: 500; color: var(--texto-suave); } .tarjeta-producto__precio-mayorista { font-size: .78rem; color: var(--texto-suave); } .tarjeta-producto__precio-mayorista strong { color: var(--texto); font-weight: 600; } .tarjeta-producto__pie { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--borde); display: flex; align-items: center; gap: 8px; } .selector-cantidad { width: 60px; padding: 8px; border: 1px solid var(--borde); border-radius: var(--radio); font-family: inherit; } /* Selector de presentación (Libra/Fardo/etc, ver comercio/js/productos-ui.js) -- solo aparece en la tarjeta cuando el producto tiene presentaciones definidas en el panel; comparte fila con el selector de cantidad. */ .selector-presentacion { flex: 1; min-width: 0; padding: 8px 6px; border: 1px solid var(--borde); border-radius: var(--radio); font-family: inherit; font-size: .8rem; background: #fff; color: var(--texto); } .boton-agregar { flex: 1; background: var(--verde-oscuro); color: #fff; border: none; border-radius: var(--radio); padding: 9px 10px; font-family: inherit; font-weight: 500; cursor: pointer; } .boton-agregar:hover { background: var(--verde); } .mensaje-vacio { color: var(--texto-suave); font-style: italic; } /* --- Tarjeta de producto: enlace hacia su ficha (producto.html) --- */ /* Solo la foto y el título navegan; precio/cantidad/agregar se quedan en el grid para no interrumpir a quien solo quiere agregar rápido. */ .tarjeta-producto__enlace-imagen { display: block; } .tarjeta-producto__enlace-titulo { color: inherit; text-decoration: none; } .tarjeta-producto__enlace-titulo:hover { text-decoration: underline; } /* --- Ficha de producto (producto.html) --- */ .migas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .85rem; color: var(--texto-suave); padding-top: 18px; } .migas a { color: var(--texto-suave); text-decoration: none; } .migas a:hover { color: var(--verde-oscuro); text-decoration: underline; } .migas span[aria-current] { color: var(--texto); font-weight: 600; } .producto-detalle { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; padding-top: 24px; padding-bottom: 56px; } @media (max-width: 760px) { .producto-detalle { grid-template-columns: 1fr; gap: 24px; } } /* Mismo motivo que ".modal[hidden]"/".panel-carrito[hidden]" más abajo en este archivo: "display: grid" empata en especificidad con la regla nativa "[hidden]{display:none}", así que sin esto la ficha se vería mientras producto.js todavía no confirma que el producto existe. */ .producto-detalle[hidden] { display: none; } .producto-galeria__marco { position: relative; border-radius: 14px; overflow: hidden; box-shadow: var(--sombra); } .producto-galeria__principal { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--verde-suave); } /* Misma insignia flotante que ya usa la tarjeta de producto del grid — acá encima de la foto principal de la ficha, en vez de en línea junto al título, para que el título arranque la columna de info sin nada encima. */ .producto-galeria__insignia { position: absolute; top: 14px; left: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); } .producto-galeria__miniaturas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } /* Misma razón que ".producto-detalle[hidden]": "display: flex" gana el empate con "[hidden]{display:none}" si no se fuerza acá. */ .producto-galeria__miniaturas[hidden] { display: none; } .producto-galeria__miniatura { width: 72px; height: 54px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; cursor: pointer; } .producto-galeria__miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; } .producto-galeria__miniatura--activa { border-color: var(--verde-oscuro); } .producto-galeria__miniatura:hover { border-color: var(--verde); } .producto-info h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 12px; } .producto-info__descripcion { font-size: 1rem; } /* "Buy box": agrupa precio + cantidad + agregar en un solo panel, en vez de dejarlos sueltos sobre el fondo de la página — el patrón habitual de cualquier ficha de producto. */ .producto-compra { background: var(--verde-suave); border-radius: 14px; padding: 20px 22px; margin: 4px 0 18px; } .producto-info__precios { display: flex; flex-direction: column; gap: 4px; margin: 0 0 16px; } .producto-info__precio-principal { font-size: 1.3rem; font-weight: 700; color: var(--verde-oscuro); } .producto-info__precio-secundario { font-size: .88rem; color: var(--texto-suave); } .producto-info__precios strong { color: inherit; } .producto-info__precio-principal strong { color: var(--verde-oscuro); } /* Selector de presentación en la ficha (Libra/Fardo/etc) -- mismo criterio que en la tarjeta: solo se muestra si el producto tiene presentaciones. */ .producto-presentacion { margin: 0 0 16px; } .producto-presentacion label { display: block; font-size: .8rem; font-weight: 600; color: var(--texto-suave); margin-bottom: 4px; } .producto-presentacion select { width: 100%; padding: 9px 10px; border: 1px solid var(--borde); border-radius: var(--radio); font-family: inherit; font-size: .92rem; background: #fff; color: var(--texto); } .producto-info__accion { display: flex; gap: 10px; } .producto-info__accion .selector-cantidad { width: 72px; background: #fff; } .producto-info__accion .boton { flex: 1; } .producto-trazabilidad { font-size: .78rem; color: var(--texto-suave); background: var(--verde-suave); border: 1px solid #cbe6da; border-left: 4px solid var(--verde-oscuro); border-radius: var(--radio); padding: 12px 14px 13px; margin: 0 0 14px; } .producto-trazabilidad__encabezado { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; } .producto-trazabilidad__icono-marca { flex-shrink: 0; width: 20px; height: 20px; } .producto-trazabilidad__cod { margin: 0; font-size: .78rem; } .producto-trazabilidad__cod strong { color: var(--verde-oscuro); } .producto-trazabilidad__intro { margin: 0 0 10px; font-size: .76rem; line-height: 1.4; } .producto-trazabilidad__datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 12px; margin: 0; } .producto-trazabilidad__datos dt { display: flex; align-items: center; gap: 5px; font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--verde-oscuro); margin: 0 0 2px; } .producto-trazabilidad__icono { width: 12px; height: 12px; flex-shrink: 0; color: var(--verde); } .producto-trazabilidad__datos dd { font-size: .78rem; font-weight: 600; color: var(--texto); margin: 0; line-height: 1.3; } @media (max-width: 480px) { .producto-trazabilidad__datos { grid-template-columns: 1fr; gap: 12px; } } .producto-volver { margin: 0; font-size: .9rem; } .producto-no-encontrado { text-align: center; padding: 80px 20px; } .producto-no-encontrado h1 { margin-bottom: 10px; } .producto-relacionados { padding: 24px 0 60px; } .producto-relacionados h2 { margin: 0 0 16px; } /* Kicker reutilizable para anteponer a un

sobre fondo claro (a diferencia de ".cabecera-editorialojo", que usa dorado claro pensado para ir sobre una foto oscura, poco legible sobre fondo blanco). / .seccion-ojo { text-transform: uppercase; letter-spacing: .12em; font-weight: 600; font-size: .78rem; color: var(--dorado); margin: 0 0 6px; } / --- Cómo funciona --- / .como-funciona { background: var(--verde-suave); padding: 56px 0; } .pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; list-style: none; padding: 0; margin: 24px 0 0; } .pasos li { background: var(--tarjeta); border-radius: var(--radio); padding: 20px; box-shadow: var(--sombra); transition: transform .2s ease, box-shadow .2s ease; } .pasos li:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(31, 107, 84, .14); } .pasosnumero { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--dorado); color: #fff; font-weight: 700; margin-bottom: 10px; } / --- Botón flotante de WhatsApp (las 4 páginas) --- / .whatsapp-flotante { position: fixed; right: 20px; bottom: 20px; width: 56px; height: 56px; border-radius: 50%; background: var(--whatsapp); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.25); z-index: 25; transition: transform .2s ease, opacity .25s ease; animation: flotar-boton 2.6s ease-in-out infinite; } .whatsapp-flotante:hover { transform: scale(1.08); animation-play-state: paused; } .whatsapp-flotante--oculto { opacity: 0; pointer-events: none; } .whatsapp-flotante img { width: 34px; height: 34px; display: block; } @keyframes flotar-boton { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } / --- Footer --- Ronda 34: Irvin pidió algo más moderno -- se quita la marca de agua gigante "Red COMAL" (competía con el contenido) y la foto de fondo, y el degradado ahora se queda SOLO entre dos verdes de la propia paleta (--verde y --verde-oscuro), sin ir a tonos oscuros/casi negros como en la ronda 33. El aire "moderno" lo da un par de manchas de luz suaves (radial-gradient) en vez de una foto o texto de fondo. / .sitio-footer { position: relative; overflow: hidden; color: #fff; padding: 64px 0 0; font-size: .9rem; background: linear-gradient(135deg, var(--verde) 0%, var(--verde-oscuro) 100%); } .sitio-footer::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(640px circle at 88% -8%, rgba(255,255,255,.14), transparent 60%), radial-gradient(520px circle at 8% 115%, rgba(0,0,0,.14), transparent 60%); pointer-events: none; } .sitio-footergrid, .sitio-footerlegal { position: relative; z-index: 1; } .sitio-footergrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.14); } .sitio-footermarca { display: flex; flex-direction: column; gap: 14px; } .sitio-footerlogo { height: 56px; width: auto; display: block; align-self: flex-start; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); } .sitio-footermarca p { color: rgba(255,255,255,.82); font-size: .9rem; margin: 0; max-width: 320px; line-height: 1.55; } .sitio-footerredes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; } .sitio-footerredes a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; } .sitio-footerredes a svg { width: 18px; height: 18px; fill: currentColor; display: block; } .sitio-footerredes a:hover { background: var(--dorado-vivo); border-color: var(--dorado-vivo); color: var(--verde-oscuro); transform: translateY(-2px); } .sitio-footernav, .sitio-footercontacto { display: flex; flex-direction: column; gap: 11px; } .sitio-footernav h4, .sitio-footercontacto h4 { margin: 0 0 5px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--dorado-vivo); font-weight: 700; } .sitio-footernav a { color: #fff; text-decoration: none; font-size: .92rem; opacity: .88; transition: opacity .2s ease, padding-left .2s ease; } .sitio-footernav a:hover { opacity: 1; padding-left: 4px; } .sitio-footerlinea { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: .9rem; opacity: .9; transition: opacity .2s ease; } a.sitio-footerlinea:hover { opacity: 1; } .sitio-footerlinea svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .8; } .sitio-footerlegal { padding: 22px 0 26px; text-align: center; } .sitio-footerlegal p { color: rgba(255,255,255,.85); margin: 0 0 4px; } .sitio-footercredito { color: rgba(255,255,255,.55); font-size: .8rem; } @media (max-width: 720px) { .sitio-footergrid { grid-template-columns: 1fr; gap: 28px; } } / --- Panel de carrito --- / .fondo-panel { position: fixed; inset: 0; background: rgba(20, 30, 20, .45); z-index: 30; opacity: 0; transition: opacity .26s ease; } .fondo-panel.activo { opacity: 1; } .panel-carrito { position: fixed; top: 0; right: 0; height: 100%; width: min(380px, 100%); background: var(--tarjeta); box-shadow: -4px 0 20px rgba(0,0,0,.15); z-index: 31; padding: 20px; display: flex; flex-direction: column; overflow-y: auto; transform: translateX(100%); transition: transform .28s ease; } .panel-carrito.activo { transform: translateX(0); } / Mismo motivo que ".modal[hidden]" arriba: "display: flex" empataba en especificidad con la regla nativa "[hidden]{display:none}" y, al venir después en el archivo, el panel quedaba visible desde la carga inicial. / .panel-carrito[hidden] { display: none; } .panel-carritocabecera { display: flex; justify-content: space-between; align-items: center; } .panel-carritolista { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; } .item-carrito { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--borde); font-size: .9rem; } .item-carritoquitar { background: none; border: none; color: var(--taupe); cursor: pointer; font-size: .8rem; text-decoration: underline; padding: 0; } .panel-carritototal { display: flex; justify-content: space-between; font-size: 1.05rem; padding: 14px 0; border-top: 1px solid var(--borde); margin-top: auto; } .boton-cerrar { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--texto-suave); } / --- Modales --- / .modal { position: fixed; inset: 0; background: rgba(20, 30, 20, .45); display: flex; align-items: center; justify-content: center; z-index: 40; padding: 20px; opacity: 0; transition: opacity .22s ease; } .modal.activo { opacity: 1; } / El atributo [hidden] debe ganarle a ".modal{display:flex}": misma especificidad (0-1-0) y el navegador aplicaría la última regla del archivo, así que sin esto un modal "oculto" seguía interceptando clics. / .modal[hidden] { display: none; } .modalcaja { background: var(--tarjeta); border-radius: var(--radio); padding: 28px; max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; transform: scale(.95) translateY(8px); transition: transform .22s ease; } .modal.activo .modalcaja { transform: none; } .modalcaja .boton-cerrar { position: absolute; top: 14px; right: 14px; } / Ventana emergente de anuncios (ronda 24; rediseñada en la 36) — reutiliza .modal/.modalcaja de arriba. Antes la imagen quedaba metida dentro del padding de la tarjeta (se sentía como una imagen de formulario) y el botón de cerrar era un "✕" suelto sin fondo; ahora la imagen sangra a los bordes de la tarjeta y el botón de cerrar flota encima en una burbuja circular. Cuando no hay imagen (elImagen queda [hidden]), el selector de hermano de abajo cambia esa burbuja a un tono claro para que se lea bien sobre el fondo blanco de la tarjeta en vez de sobre una foto. / .modalcaja--anuncio { padding: 0; overflow: hidden; } .modalcaja--anuncio .anuncio-modalimagen { width: 100%; height: 210px; object-fit: cover; border-radius: 0; margin: 0; display: block; } / Sin esto, [hidden] (0-1-0) pierde contra la regla de arriba (0-2-0) y la imagen sin "src" queda mostrando el ícono de imagen rota del navegador -- mismo motivo que ya tiene la nota de .modal[hidden] más abajo. / .modalcaja--anuncio .anuncio-modalimagen[hidden] { display: none; } .anuncio-modalcerrar { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(0,0,0,.4); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease, transform .2s ease; z-index: 2; } .anuncio-modalcerrar:hover { background: rgba(0,0,0,.6); transform: scale(1.06); } .anuncio-modalimagen[hidden] ~ .anuncio-modalcerrar { background: var(--verde-suave); color: var(--verde-oscuro); } .anuncio-modalimagen[hidden] ~ .anuncio-modalcerrar:hover { background: #d8ebe2; } .anuncio-modalcuerpo { padding: 26px 28px 28px; } / Sin imagen no hay nada que empuje el botón de cerrar hacia abajo, así que se le da más aire arriba al cuerpo para que la pastilla/título no queden debajo de la burbuja circular. / .anuncio-modalimagen[hidden] ~ .anuncio-modalcuerpo { padding-top: 52px; } .anuncio-modaletiqueta { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; } .anuncio-modalmensaje { color: var(--texto-suave); white-space: pre-line; margin-bottom: 18px; } #formulario-cotizacion { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; } #formulario-cotizacion label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; font-weight: 500; } #formulario-cotizacion input, #formulario-cotizacion textarea { font-family: inherit; padding: 10px; border: 1px solid var(--borde); border-radius: var(--radio); font-size: .95rem; } .tipo-comprador { border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 14px; display: flex; gap: 16px; } .tipo-comprador legend { font-size: .85rem; font-weight: 600; padding: 0 4px; } .tipo-comprador label { flex-direction: row; align-items: center; font-weight: 400; } .confirmacionacciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; } .confirmacionacciones .boton { flex: 1 1 160px; } @media (max-width: 640px) { .hero h1 { font-size: 1.5rem; } .sitio-headerinner { justify-content: space-between; } .nav-principal { order: 3; width: 100%; justify-content: space-between; } / Sin la tagline, el logo y el botón de cotización caben en una sola fila incluso en pantallas angostas; si se ocultara la nav en vez de la tagline se perdería el acceso directo a "Contacto", etc. / .marcatagline { display: none; } } / ============================================================ Rediseño editorial de Inicio A pedido de Irvin, que compartió una referencia visual (estilo revista: fotos a sangre, tipografía enorme, tarjetas oscuras superpuestas) y pidió acercar Inicio a esa estética manteniendo la paleta real de Red COMAL (verde/dorado/terracota) — nada de colores ni cifras inventadas: el único dato numérico del héroe ("8 rubros productivos") ya se usaba en el sitio. Por ahora es solo Inicio (`body.pagina-inicio`); el resto de páginas no cambia todavía — si funciona, se extiende a Catálogo/Quiénes somos/Contacto en una próxima ronda. ============================================================ / :root { / Variante más oscura del verde de marca, solo para veils sobre fotos y paneles oscuros de esta sección — no es un color nuevo, es el mismo verde institucional oscurecido. / --verde-noche: #12352A; } / --- Héroe editorial --- / .hero-editorial { position: relative; min-height: min(86vh, 700px); display: flex; flex-direction: column; overflow: hidden; color: #fff; } .hero-editorialmedio { position: absolute; inset: 0; z-index: 0; } .hero-editorialmedio img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-editorialvelo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,53,42,.5) 0%, rgba(18,53,42,.3) 42%, rgba(11,32,25,.9) 100%); } .hero-editorialmarco { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; / padding-top/bottom nada más: el padding izq/der ya lo da .contenedor, y un padding abreviado acá se lo pisaría (misma especificidad, esta regla cae después en el archivo). / padding-top: 36px; padding-bottom: 40px; } .hero-editorialsuperior { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .hero-editorialojo { text-transform: uppercase; letter-spacing: .16em; font-weight: 600; font-size: .78rem; color: var(--dorado-vivo); margin: 0; } .hero-editorialdato { display: flex; align-items: baseline; gap: 8px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(6px); border-radius: 999px; padding: 8px 18px; } .hero-editorialdato strong { font-size: 1.5rem; line-height: 1; } .hero-editorialdato span { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; opacity: .9; } .hero-editorialtitulo { font-size: clamp(2.3rem, 6.4vw, 4.4rem); line-height: 1.04; margin: 0; color: #fff; max-width: 15ch; } .hero-editorialinferior { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; } .hero-editorialtexto { max-width: 460px; } .hero-editorialtexto p { color: rgba(255,255,255,.88); margin: 0 0 18px; } .hero-editorialacciones { display: flex; gap: 12px; flex-wrap: wrap; } .hero-editoriallema { margin: 0; text-align: right; font-size: clamp(1.2rem, 2.6vw, 1.8rem); line-height: 1.15; color: var(--dorado-vivo); font-weight: 600; } @media (max-width: 720px) { .hero-editoriallema { text-align: left; } .hero-editorialinferior { align-items: flex-start; } } / Botones "píldora" con ícono — solo en el héroe editorial / .pildora { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 10px 20px 10px 10px; border-radius: 999px; font-weight: 600; font-size: .95rem; transition: transform .15s ease, background .15s ease; } .pildora:hover { transform: translateY(-2px); } .pildoraicono { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.18); flex-shrink: 0; } .pildoraicono img { width: 18px; height: 18px; filter: brightness(0) invert(1); } .pildora--llena { background: var(--dorado-vivo); color: var(--verde-oscuro); } .pildora--llena .pildoraicono { background: rgba(31,107,84,.16); } .pildora--llena .pildoraicono img { filter: none; } .pildora--llena:hover { background: #fff; } .pildora--contorno { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.5); } .pildora--contorno:hover { background: rgba(255,255,255,.22); } / --- Franja de rubros (marquee horizontal) --- / .franja-rubros { background: var(--verde-suave); border-bottom: 1px solid var(--borde); overflow: hidden; padding: 16px 0; } .franja-rubrospista { display: flex; width: max-content; animation: desplazar-marquee 34s linear infinite; } .franja-rubros:hover .franja-rubrospista { animation-play-state: paused; } .franja-rubrositem { display: inline-flex; align-items: center; gap: 8px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 999px; padding: 8px 16px 8px 10px; margin-right: 14px; font-size: .85rem; font-weight: 600; color: var(--verde-oscuro); white-space: nowrap; } .franja-rubrositem img { width: 24px; height: 24px; } @keyframes desplazar-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .franja-rubrospista { animation: none; } } / --- Sobre Red COMAL --- / .seccion-sobre { padding: 64px 0; } .seccion-sobrecabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; } .seccion-sobreojo { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: .78rem; color: var(--dorado); margin: 0 0 10px; } .seccion-sobrecabecera h2 { margin: 0; max-width: 22ch; font-size: clamp(1.6rem, 3.2vw, 2.4rem); color: var(--verde-oscuro); } .seccion-sobrefoto { border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); margin-bottom: 28px; max-height: 420px; } .seccion-sobrefoto img { width: 100%; height: 100%; object-fit: cover; display: block; } .seccion-sobretexto { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } @media (max-width: 720px) { .seccion-sobretexto { grid-template-columns: 1fr; } } / --- "Por qué Red COMAL": tarjetas fotográficas oscuras --- / .oferta-editorial { background: var(--verde-oscuro); color: #fff; padding: 64px 0; } .oferta-editorialcabecera { max-width: 640px; margin-bottom: 32px; } .oferta-editorialojo { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: .78rem; color: var(--dorado-vivo); margin: 0 0 10px; } .oferta-editorialcabecera h2 { color: #fff; margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.4rem); } .oferta-editorialgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; } .tarjeta-oferta { position: relative; border-radius: var(--radio); overflow: hidden; aspect-ratio: 3 / 4; isolation: isolate; } .tarjeta-oferta img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .tarjeta-oferta:hover img { transform: scale(1.06); } .tarjeta-ofertavelo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,53,42,0) 40%, rgba(11,32,25,.92) 100%); z-index: 1; } .tarjeta-ofertatexto { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px; } .tarjeta-ofertatexto h3 { color: #fff; font-size: 1.05rem; margin: 0 0 4px; } .tarjeta-ofertatexto p { color: rgba(255,255,255,.82); font-size: .82rem; margin: 0; } / --- Cómo funciona (banda con foto a sangre + panel oscuro) --- / .franja-como-funciona { position: relative; color: #fff; overflow: hidden; } .franja-como-funcionamedio { position: absolute; inset: 0; z-index: 0; } .franja-como-funcionamedio img { width: 100%; height: 100%; object-fit: cover; display: block; } .franja-como-funcionamedio::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,32,25,.12) 0%, rgba(11,32,25,.32) 45%, rgba(11,32,25,.93) 78%); } .franja-como-funcionapanel { position: relative; z-index: 1; margin-left: auto; max-width: 460px; padding: 72px 20px; } .franja-como-funcionapanel h2 { color: #fff; margin: 0 0 22px; font-size: clamp(1.5rem, 3vw, 2.1rem); } .pasos-funciona { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 18px; } .pasos-funciona li { display: flex; gap: 14px; align-items: flex-start; } .pasos-funcionanumero { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--dorado-vivo); color: var(--verde-oscuro); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: .95rem; } .pasos-funciona h3 { margin: 0 0 2px; font-size: .98rem; color: #fff; } .pasos-funciona p { margin: 0; font-size: .85rem; color: rgba(255,255,255,.78); } @media (max-width: 760px) { .franja-como-funcionapanel { margin-left: 0; max-width: none; background: rgba(11,32,25,.8); } .franja-como-funcionamedio::after { background: linear-gradient(180deg, rgba(11,32,25,.35) 0%, rgba(11,32,25,.55) 40%, rgba(11,32,25,.92) 100%); } } / --- Galería "de la tierra a tu mesa" --- */ .galeria-cosecha { background: #fff; color: var(--texto); padding: 64px 0; } .galeria-cosechacabecera { max-width: 640px; margin-bottom: 32px; } .galeria-cosechacabecera h2 { color: var(--texto); margin: 0 0 12px; font-size: clamp(1.8rem, 4vw, 2.7rem); } .galeria-cosechaacento { color: var(--dorado); } .galeria-cosechacabecera p { color: var(--texto-suave); margin: 0 0 20px; } .galeria-cosechagrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-bottom: 28px; } .galeria-cosechagrid figure { margin: 0; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); } .galeria-cosechagrid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; transition: transform .4s ease; } .galeria-cosechagrid figure:hover img { transform: scale(1.05); } .galeria-cosecha__grid figcaption { padding: 10px 2px 0; font-weight: 600; font-size: .9rem; color: var(--texto-suave); }