/* Archivo: style.css Funcion: Sistema de diseno principal del sitio publico HGW Espana (variables, tipografia, layout, componentes: navbar, hero, cards, FAQ, footer, formularios, botones). */ :root { --color-primary: #2e7d32; --color-primary-dark: #1b5e20; --color-primary-light: #60ad5e; --color-primary-soft: #e8f5e9; --color-white: #ffffff; --color-gray-soft: #f5f6f7; --color-gray: #6c757d; --color-gray-light: #e0e0e0; --color-dark: #1f2a24; --color-text: #33403a; --color-success: #2e7d32; --color-warning: #b06d00; --color-danger: #c62828; /* Tonos tierra: paleta "natural/organico" usada en paginas concretas (portada, conocenos...) que asi lo pidan explicitamente via su propia clase en (ver homepage.css, about.css). No se aplican por si solos en ningun sitio. */ --color-earth-cream: #f6f1e2; --color-earth-clay: #b9764f; --color-earth-clay-dark: #93603f; --color-earth-moss: #4a6741; --shadow-sm: 0 2px 6px rgba(31, 42, 36, 0.08); --shadow-md: 0 8px 24px rgba(31, 42, 36, 0.12); --shadow-lg: 0 16px 40px rgba(31, 42, 36, 0.16); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1); --transition: 0.3s var(--ease-smooth); --container-width: 1180px; --font-base: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { overflow-x: hidden; width: 100%; } body { margin: 0; font-family: var(--font-base); color: var(--color-text); background: var(--color-white); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 0.6em; color: var(--color-dark); } p { margin: 0 0 1em; } .container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 24px; } .section { padding: 72px 0; } .section-soft { background: radial-gradient(circle at 12% 18%, rgba(46, 125, 50, 0.05), transparent 42%), radial-gradient(circle at 88% 82%, rgba(46, 125, 50, 0.06), transparent 42%), var(--color-gray-soft); } .section-title { text-align: center; max-width: 640px; margin: 0 auto 48px; } .section-title .eyebrow { display: inline-block; color: var(--color-primary); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; margin-bottom: 10px; } .section-title h2 { position: relative; padding-bottom: 16px; font-size: clamp(1.6rem, 2.4vw, 2.4rem); } .section-title h2::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 56px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--color-primary-light), var(--color-primary-dark)); } .section-title p { color: var(--color-gray); } /* Variante para secciones sin "eyebrow", donde el h2 hace de titular principal y necesita algo mas de presencia (p.ej. "Ciencia y experiencia" en Inicio y Conocenos). */ .section-title-lg h2 { font-size: clamp(2.1rem, 3.6vw, 3.4rem); } /* ---------- Botones ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 13px 28px; border-radius: 999px; font-weight: 600; font-size: 0.95rem; line-height: 1.3; border: 2px solid transparent; cursor: pointer; transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition); white-space: normal; } .btn-primary { background: var(--color-primary); color: var(--color-white); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--color-primary-dark); box-shadow: var(--shadow-md); } .btn-outline { background: transparent; border-color: var(--color-white); color: var(--color-white); } .btn-outline:hover { background: var(--color-white); color: var(--color-primary-dark); } .btn-ghost { background: var(--color-white); color: var(--color-primary-dark); border-color: var(--color-gray-light); } .btn-ghost:hover { border-color: var(--color-primary); } .btn-secondary { background: var(--color-gray); color: var(--color-white); } .btn-secondary:hover { background: var(--color-dark); } .btn-whatsapp { background: #25d366; color: var(--color-white); font-weight: 700; box-shadow: var(--shadow-sm); } .btn-whatsapp:hover { background: #1ebe5a; box-shadow: var(--shadow-md); } .btn-sm { padding: 8px 18px; font-size: 0.85rem; } .btn-block { width: 100%; } /* ---------- Navbar ---------- */ .navbar { position: sticky; top: 0; z-index: 500; background: var(--color-white); box-shadow: var(--shadow-sm); } .navbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; max-width: var(--container-width); margin: 0 auto; gap: 16px; } .navbar-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; color: var(--color-primary-dark); } .navbar-brand img { height: 38px; width: auto; } .navbar-menu { display: flex; align-items: center; gap: 6px; } .navbar-menu > li { position: relative; } .navbar-link { display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; color: var(--color-text); transition: color var(--transition), background var(--transition); } .navbar-link:hover, .navbar-link.is-active { color: var(--color-primary-dark); background: var(--color-primary-soft); } .navbar-cta { margin-left: 8px; } .navbar-lang { display: flex; align-items: center; gap: 2px; margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--color-gray-light); } .navbar-lang a { padding: 4px 7px; border-radius: 6px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em; color: var(--color-gray); } .navbar-lang a:hover { color: var(--color-primary-dark); } .navbar-lang a.is-active { background: var(--color-primary-soft); color: var(--color-primary-dark); } .navbar-dropdown { position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px; background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 10px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); } /* Puente invisible que rellena el hueco de 8px entre el enlace y el desplegable: sin esto, al mover el raton hacia abajo desde el enlace el cursor pasa por una zona muerta y el desplegable se cierra antes de poder pinchar en sus enlaces. */ .navbar-dropdown::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; } .navbar-menu > li:hover .navbar-dropdown, .navbar-menu > li.is-open .navbar-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .navbar-dropdown a { display: block; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 0.9rem; color: var(--color-text); } .navbar-dropdown a:hover { background: var(--color-gray-soft); color: var(--color-primary-dark); } .navbar-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; } .navbar-toggle span { width: 26px; height: 2px; background: var(--color-dark); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); } /* El boton hamburguesa se transforma en una "X" al abrir el menu movil. */ .navbar-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .navbar-toggle.is-open span:nth-child(2) { opacity: 0; } .navbar-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Fondo oscuro detras del menu movil desplegado, para separarlo del contenido. */ .navbar-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 19, 0.45); z-index: 499; opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition); } .navbar-backdrop.is-open { opacity: 1; visibility: visible; } /* Hero / banner de inicio: ver assets/css/hero.css (archivo dedicado). */ /* ---------- Cards de producto ---------- */ .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 28px; } .card { background: var(--color-white); border-radius: var(--radius-md); border-top: 3px solid transparent; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); display: flex; flex-direction: column; } .card-media { background: var(--color-white); aspect-ratio: 1 / 1; overflow: hidden; box-sizing: border-box; padding: 14px; } .card-media img { width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in; } /* ---------- Lightbox: expandir imagen de producto ---------- */ .lightbox-overlay { position: fixed; inset: 0; background: rgba(15, 23, 19, 0.9); z-index: 1200; display: none; align-items: center; justify-content: center; padding: 24px; } .lightbox-overlay.is-visible { display: flex; } .lightbox-overlay img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-md); background: var(--color-white); } .lightbox-close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); color: var(--color-white); border: none; font-size: 1.8rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .lightbox-close:hover { background: rgba(255, 255, 255, 0.3); } [data-lightbox-trigger] { cursor: zoom-in; } .card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; gap: 10px; } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; width: fit-content; text-transform: uppercase; letter-spacing: 0.03em; } .badge-category { background: var(--color-primary-soft); color: var(--color-primary-dark); } .badge-in_stock { background: #e8f5e9; color: var(--color-success); } .badge-low_stock { background: #fff3e0; color: var(--color-warning); } .badge-out_of_stock { background: #ffebee; color: var(--color-danger); } .card-body h3 { font-size: 1.1rem; margin-bottom: 0; } /* Codigo de referencia (p.ej. pulseras/collares con el mismo nombre en distintas tallas), para poder diferenciar variantes identicas en el catalogo. */ .card-code { display: block; color: #c0392b; font-weight: 700; font-size: 0.78rem; } .card-body .desc { color: var(--color-gray); font-size: 0.92rem; flex: 1; } .card-price { font-size: 1.3rem; font-weight: 800; color: var(--color-primary-dark); } /* ---------- Filtros de categoria ---------- */ .filters-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; } .filter-chip { padding: 10px 20px; border-radius: 999px; background: var(--color-gray-soft); color: var(--color-text); font-weight: 600; font-size: 0.9rem; transition: background var(--transition), color var(--transition); border: 2px solid transparent; } .filter-chip:hover { border-color: var(--color-primary-light); } .filter-chip.is-active { background: var(--color-primary); color: var(--color-white); } /* Segunda fila de filtros (subcategorias): mas pequeña, separada de la fila de categorias. En movil se convierte en una unica linea deslizable (ver responsive.css): apiladas y envolviendo en varias filas, sumadas a la fila de categorias que ya envuelve la suya propia, ocupaban demasiado alto y se confundian visualmente con las categorias. */ .filters-bar-sub { margin-top: -22px; margin-bottom: 32px; } .filter-chip-sm { padding: 6px 16px; font-size: 0.8rem; background: var(--color-white); border: 1px solid var(--color-gray-soft); } /* ---------- Expertos ---------- */ .experts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; } .expert-card { background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 32px; text-align: center; } .expert-card img { width: 140px; height: 140px; border-radius: 50%; margin: 0 auto 18px; background: var(--color-gray-soft); object-fit: cover; object-position: top center; } .expert-card h3 { margin-bottom: 4px; } .expert-card .role { color: var(--color-primary); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 14px; } .expert-card p { color: var(--color-gray); font-size: 0.92rem; text-align: left; } /* ---------- Oportunidad / CTA banda ---------- */ .cta-band { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--color-primary-dark), var(--color-primary)); color: var(--color-white); border-radius: var(--radius-lg); padding: 56px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .cta-band::before, .cta-band::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; } .cta-band::before { width: 260px; height: 260px; background: rgba(255, 255, 255, 0.07); top: -110px; right: -60px; } .cta-band::after { width: 180px; height: 180px; background: rgba(255, 255, 255, 0.06); bottom: -100px; left: -40px; } .cta-band > div, .cta-band > a { position: relative; z-index: 1; } .cta-band h2 { color: var(--color-white); margin-bottom: 12px; } .cta-band p { color: rgba(255, 255, 255, 0.9); max-width: 520px; } /* ---------- Carrusel de historia (autoplay + arrastrable con el raton/dedo) ---------- */ .history-carousel { display: flex; align-items: center; gap: 14px; max-width: 760px; margin: 0 auto; } .history-track { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; cursor: grab; user-select: none; scrollbar-width: none; -ms-overflow-style: none; border-radius: var(--radius-lg); } .history-track::-webkit-scrollbar { display: none; } .history-track.is-dragging { cursor: grabbing; scroll-snap-type: none; } .history-slide { flex: 0 0 100%; scroll-snap-align: start; background: var(--color-white); box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); padding: 44px 48px; min-height: 240px; display: flex; flex-direction: column; justify-content: center; } .history-slide-label { display: inline-block; color: var(--color-primary); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.8rem; margin-bottom: 14px; } .history-slide p { margin: 0; color: var(--color-text); font-size: 1.05rem; line-height: 1.75; } .history-arrow { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--color-white); box-shadow: var(--shadow-md); color: var(--color-primary-dark); cursor: pointer; display: flex; align-items: center; justify-content: center; } .history-arrow svg { width: 18px; height: 18px; } .history-arrow:disabled { opacity: 0.3; cursor: default; } .history-dots { display: flex; justify-content: center; gap: 10px; margin-top: 22px; } .history-dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: var(--color-gray-light); cursor: pointer; padding: 0; transition: background var(--transition), transform var(--transition); } .history-dot.is-active { background: var(--color-primary); transform: scale(1.3); } .history-hint { text-align: center; color: var(--color-gray); font-size: 0.8rem; margin-top: 12px; } /* ---------- FAQ acordeon ---------- */ .faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .faq-item { background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; background: none; border: none; text-align: left; font-weight: 700; font-size: 1rem; color: var(--color-dark); cursor: pointer; } .faq-question .icon { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: transform var(--transition); } .faq-item.is-open .faq-question .icon { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--transition); padding: 0 24px; color: var(--color-gray); } .faq-item.is-open .faq-answer { padding: 0 24px 22px; } /* ---------- Contenido extra reutilizable (FAQ y Anuncios): imagen, YouTube, mapa ---------- */ .extra-media { margin-top: 14px; border-radius: var(--radius-md); overflow: hidden; } .extra-media img { width: 100%; display: block; } .extra-youtube { position: relative; width: 100%; padding-top: 56.25%; margin-top: 14px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-dark); } .extra-youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .extra-youtube button { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; color: var(--color-white); background: rgba(0, 0, 0, 0.4); border: none; cursor: pointer; font-weight: 600; } .extra-map-embed { position: relative; width: 100%; height: 280px; margin-top: 14px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-gray-soft); } .extra-map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .extra-map-embed button { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; color: var(--color-dark); background: var(--color-gray-soft); border: none; cursor: pointer; font-weight: 600; } .extra-map { margin-top: 14px; padding: 14px 18px; border-radius: var(--radius-md); background: var(--color-gray-soft); } .extra-map-label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--color-dark); } .extra-map .btn { margin-top: 10px; } /* ---------- Hoja de lista de precios (estilo documento de marca) ---------- */ .price-sheet { border: 2px solid var(--color-dark); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 40px; background: var(--color-white); } .price-sheet-banner { background: linear-gradient(120deg, var(--color-primary), var(--color-primary-dark)); color: var(--color-white); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 32px; flex-wrap: wrap; } .price-sheet-banner .brand { display: flex; align-items: center; gap: 14px; } .price-sheet-banner .brand img { height: 40px; filter: brightness(0) invert(1); } .price-sheet-banner h2 { color: var(--color-white); margin: 0; font-size: clamp(1.2rem, 2.4vw, 1.6rem); } .price-sheet-banner .flag { height: 34px; width: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); } .price-sheet-table-wrap { overflow-x: auto; } .price-sheet-table { width: 100%; min-width: 920px; border-collapse: collapse; background: var(--color-white); } .price-sheet-table th, .price-sheet-table td { padding: 10px 14px; border: 1px solid var(--color-gray-light); font-size: 0.86rem; text-align: center; } .price-sheet-table thead th { background: var(--color-white); text-transform: uppercase; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.02em; border-bottom: 2px solid var(--color-dark); color: var(--color-dark); } .price-sheet-table thead th.group-master { color: #7b4fa0; } .price-sheet-table thead th.group-dist { color: var(--color-primary-dark); } .price-sheet-table thead th.group-public { color: #a67c00; } .price-sheet-table .category-band th { background: #46462b; color: #f2d879; text-align: left; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.03em; padding: 10px 14px; } .price-sheet-table .category-band th.text-center { text-align: center; } .price-sheet-table td.col-product { text-align: left; min-width: 190px; } .product-cell { display: flex; align-items: center; gap: 10px; } .product-cell img { width: 46px; height: 46px; object-fit: contain; background: var(--color-gray-soft); border-radius: 6px; flex-shrink: 0; cursor: zoom-in; } .product-cell .code { display: block; color: #c0392b; font-weight: 700; font-size: 0.72rem; } .product-cell .name { display: block; font-weight: 700; color: var(--color-dark); } .product-cell .badge { margin-top: 4px; } .price-sheet-table tr.is-out-of-stock td { opacity: 0.55; filter: grayscale(40%); } .price-sheet-table tr.is-out-of-stock td.col-product { opacity: 1; filter: none; } .price-sheet-table td.col-desc { text-align: left; color: var(--color-gray); min-width: 140px; } .price-sheet-table td.bg-master { background: #e4d9f0; } .price-sheet-table td.bg-master-bv { background: #d3bee6; font-weight: 700; } .price-sheet-table td.bg-dist { background: #ddf0de; } .price-sheet-table td.bg-dist-bv { background: #c5e6c8; font-weight: 700; } .price-sheet-table td.bg-public { background: #fbf1bd; font-weight: 800; } /* ---------- Formularios ---------- */ .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group.full { grid-column: 1 / -1; } label { font-weight: 600; font-size: 0.9rem; color: var(--color-dark); } input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="file"], select, textarea { padding: 12px 14px; border: 1px solid var(--color-gray-light); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.95rem; background: var(--color-white); transition: border-color var(--transition), box-shadow var(--transition); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); } textarea { resize: vertical; min-height: 120px; } .field-error { color: var(--color-danger); font-size: 0.82rem; } .alert { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: 0.92rem; font-weight: 600; } .alert-success { background: #e8f5e9; color: var(--color-success); } .alert-error { background: #ffebee; color: var(--color-danger); } .alert-info { background: #e3f2fd; color: #0d47a1; } /* ---------- Footer (compacto: enlaces en fila, no en lista vertical) ---------- */ .footer { background: var(--color-dark); color: rgba(255, 255, 255, 0.8); padding: 32px 0 18px; font-size: 0.88rem; } .footer a:hover { color: var(--color-primary-light); } .footer-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 16px; } .footer-brand { display: flex; align-items: center; } .footer-brand img { height: 28px; filter: brightness(0) invert(1); display: block; } .footer-address { margin: 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); } .footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; } .footer-social { margin-bottom: 0; gap: 10px; align-items: center; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.85); transition: background var(--transition), color var(--transition), box-shadow var(--transition); } .footer-social svg { width: 18px; height: 18px; } .footer-social a:hover { background: var(--color-primary); color: var(--color-white); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: 16px; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 20px; font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); } .footer-legal { display: flex; gap: 4px 14px; flex-wrap: wrap; font-size: 0.78rem; } /* ---------- Cookie banner ---------- */ .cookie-banner { position: fixed; left: 20px; right: 20px; bottom: 20px; max-width: 560px; background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 24px; z-index: 1000; transform: translateY(140%); transition: transform 0.4s ease; } .cookie-banner.is-visible { transform: translateY(0); } .cookie-banner h3 { font-size: 1.05rem; margin-bottom: 8px; } .cookie-banner p { font-size: 0.88rem; color: var(--color-gray); margin-bottom: 16px; } .cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; } .cookie-modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 19, 0.55); z-index: 1100; display: none; align-items: center; justify-content: center; padding: 20px; } .cookie-modal-overlay.is-visible { display: flex; } .cookie-modal { background: var(--color-white); border-radius: var(--radius-lg); max-width: 520px; width: 100%; padding: 32px; max-height: 90vh; overflow-y: auto; } .cookie-modal h3 { margin-bottom: 18px; } .cookie-option { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--color-gray-light); } .cookie-option:last-of-type { border-bottom: none; } .switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .switch .slider { position: absolute; inset: 0; background: var(--color-gray-light); border-radius: 999px; cursor: pointer; transition: background var(--transition); } .switch .slider::before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: var(--color-white); border-radius: 50%; transition: transform var(--transition); } .switch input:checked + .slider { background: var(--color-primary); } .switch input:checked + .slider::before { transform: translateX(20px); } .switch input:disabled + .slider { opacity: 0.6; cursor: not-allowed; } .modal-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; } .info-box { background: var(--color-gray-soft); border-radius: var(--radius-md); padding: 28px; margin-top: 40px; } /* ---------- Aviso flotante generico (ej. "Enlace copiado" al compartir, ver app.js) ---------- */ .public-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 10px); background: var(--color-dark); color: var(--color-white); padding: 12px 22px; border-radius: var(--radius-md); font-size: 0.88rem; font-weight: 600; box-shadow: var(--shadow-lg); opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; z-index: 1400; pointer-events: none; max-width: calc(100% - 40px); text-align: center; } .public-toast.is-visible { opacity: 1; transform: translate(-50%, 0); } /* ---------- Boton flotante "Volver arriba" ---------- A proposito en la esquina IZQUIERDA (no la derecha, donde ya vive el FAB del carrito de la calculadora de puntos, calc-cart-fab): asi nunca se solapan, sea cual sea la pagina. */ .back-to-top { position: fixed; left: 20px; bottom: 20px; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--color-primary); color: var(--color-white); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s; z-index: 900; } .back-to-top svg { width: 20px; height: 20px; } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.25s ease, transform 0.25s ease; } @media (hover: hover) { .back-to-top:hover { background: var(--color-primary-dark); } } .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } /* ---------- Anuncios (blog corporativo) ---------- */ .announcements-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; } .announcement-card { background: var(--color-white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); display: flex; flex-direction: column; } .announcement-card .media { background: var(--color-gray-soft); aspect-ratio: 4 / 3; overflow: hidden; } .announcement-card .media img { /* aspect-ratio fijo + object-fit:contain: todas las tarjetas miden lo mismo (a diferencia de dejar que la imagen marque su propio alto), y la foto se ve completa sin recortes (a diferencia de object-fit:cover). Si una foto no es 4:3, se ve con un margen de color solido a los lados en vez de deformarse o recortarse. */ width: 100%; height: 100%; object-fit: contain; display: block; } .announcement-card .body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .announcement-date { font-size: 0.78rem; color: var(--color-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } /* ---------- Categoria y fecha de reunion en la tarjeta de "Anuncios" ---------- */ .announcement-category-badge { margin-left: 8px; } .announcement-event-date { text-transform: none; letter-spacing: normal; } /* ---------- Aviso destacado de fecha/hora de reunion (ficha de anuncio) ---------- */ .announcement-event-banner { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 18px; border-radius: var(--radius-md); background: var(--color-primary-soft); } .announcement-event-banner-icon { font-size: 1.6rem; flex-shrink: 0; } .announcement-event-banner strong { display: block; color: var(--color-primary-dark); font-size: 0.85rem; } .announcement-event-banner span { color: var(--color-dark); font-weight: 600; } .announcement-card h3 { font-size: 1.15rem; margin-bottom: 0; } .announcement-card .excerpt { color: var(--color-gray); font-size: 0.92rem; flex: 1; } .announcement-detail { max-width: 760px; margin: 0 auto; } .announcement-detail .media { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 28px; background: var(--color-gray-soft); } .announcement-detail .media img { width: 100%; display: block; } .announcement-detail .body { color: var(--color-text); } /* ---------- Navegacion cruzada entre documentos legales ---------- */ .legal-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--color-gray-light); } .legal-nav a { font-size: 0.85rem; color: var(--color-primary-dark); font-weight: 600; } .legal-nav a:hover { text-decoration: underline; } /* ---------- Tabla informativa generica (p.ej. tipos de cookies) ---------- */ .simple-table-wrap { overflow-x: auto; margin: 20px 0; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .simple-table { width: 100%; min-width: 640px; border-collapse: collapse; background: var(--color-white); } .simple-table th, .simple-table td { padding: 12px 14px; border-bottom: 1px solid var(--color-gray-light); text-align: left; font-size: 0.88rem; } .simple-table thead th { background: var(--color-gray-soft); font-weight: 700; color: var(--color-dark); } /* ---------- Paginas informativas / legales ---------- */ .page-hero { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--color-primary-dark), var(--color-primary)); color: var(--color-white); padding: 60px 0; text-align: center; } .page-hero::before, .page-hero::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; } .page-hero::before { width: 320px; height: 320px; background: rgba(255, 255, 255, 0.06); top: -140px; right: -60px; } .page-hero::after { width: 220px; height: 220px; background: rgba(255, 255, 255, 0.05); bottom: -130px; left: -50px; } .page-hero .container { position: relative; z-index: 1; } .page-hero h1 { color: var(--color-white); margin-bottom: 6px; } .breadcrumb { font-size: 0.85rem; color: rgba(255, 255, 255, 0.8); } .prose h2 { margin-top: 1.6em; } .prose p, .prose li { color: var(--color-text); } .prose ul { list-style: disc; padding-left: 22px; margin-bottom: 1em; } /* ---------- Institucional: mision, vision y valores ---------- */ .mission-vision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .value-card { background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 40px; } .value-card h2 { font-size: 1.3rem; margin-bottom: 10px; } .value-card p { color: var(--color-text); margin: 0; line-height: 1.7; } .value-icon { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .value-icon svg { width: 26px; height: 26px; } .values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; } .value-chip { background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 30px 24px; text-align: center; } .value-chip .value-icon { width: 48px; height: 48px; margin: 0 auto 16px; } .value-chip .value-icon svg { width: 22px; height: 22px; } .value-chip p { margin: 0; color: var(--color-text); font-size: 0.94rem; line-height: 1.6; } /* ---------- Detalle de producto ---------- */ .product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .product-detail .media { background: var(--color-gray-soft); border-radius: var(--radius-lg); padding: 40px; display: flex; align-items: center; justify-content: center; } .product-meta { display: flex; gap: 24px; flex-wrap: wrap; margin: 20px 0; padding: 18px 0; border-top: 1px solid var(--color-gray-light); border-bottom: 1px solid var(--color-gray-light); } .product-meta .meta-item .label { display: block; font-size: 0.78rem; color: var(--color-gray); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; } .product-meta .meta-item .value { font-weight: 700; } /* ---------- Botones de accion de la ficha de producto (Comprar / Ingredientes) ---------- */ .product-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } /* ---------- Modal "Ingredientes y composicion" ---------- */ .ingredients-modal { max-width: 560px; max-height: 80vh; display: flex; flex-direction: column; } /* ---------- Aviso antes de salir a la tienda oficial (healthgreenworld.com) ---------- */ .external-redirect-modal { max-width: 480px; } .external-redirect-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; } .external-redirect-modal-header h3 { margin: 0; } .external-redirect-modal-close { background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--color-gray); cursor: pointer; padding: 4px 8px; flex-shrink: 0; } .external-redirect-modal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } .external-redirect-modal-actions .btn { flex: 1 1 200px; } .ingredients-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .ingredients-modal-header h3 { margin: 0; } .ingredients-modal-close { background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--color-gray); cursor: pointer; padding: 4px 8px; } .ingredients-modal .rich-content { color: var(--color-text); overflow-y: auto; overflow-x: auto; font-size: 0.9rem; } .ingredients-modal .rich-content p { margin: 0 0 8px; } .ingredients-modal .rich-content p:last-child { margin-bottom: 0; } .ingredients-modal .rich-content table { border-collapse: collapse; width: 100%; margin: 4px 0 8px; font-size: 0.85rem; } .ingredients-modal .rich-content table td, .ingredients-modal .rich-content table th { border: 1px solid var(--color-gray-light); padding: 6px 10px; text-align: left; } .ingredients-modal .rich-content table th { background: var(--color-gray-soft); font-weight: 700; } /* ---------- Puntos de venta ---------- */ .store-photo { max-width: 720px; aspect-ratio: 4 / 3; margin: 0 auto 32px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .store-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .store-spotlight { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: stretch; margin-bottom: 32px; } .store-spotlight-map { height: 420px; margin-top: 0; border-radius: var(--radius-lg); } .store-spotlight-info { background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 36px; display: flex; flex-direction: column; } .store-spotlight-info h3 { color: var(--color-primary-dark); font-size: 1.4rem; margin: 12px 0 18px; } .store-spotlight-detail { display: flex; align-items: flex-start; gap: 12px; color: var(--color-gray); font-size: 0.98rem; margin-bottom: 8px; } .store-spotlight-detail .icon { flex-shrink: 0; font-size: 1.1rem; } .store-spotlight-hours { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-gray-light); } .store-spotlight-hours-title { font-weight: 700; color: var(--color-dark); margin-bottom: 8px; font-size: 0.95rem; } .store-spotlight-hours ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .store-spotlight-hours li { color: var(--color-gray); font-size: 0.92rem; } .store-spotlight-actions { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 24px; } /* ---------- Utilidades ---------- */ .text-center { text-align: center; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-lg { margin-top: 48px; } .mb-lg { margin-bottom: 48px; } .hidden { display: none !important; }