/* gangachic custom styles */ /* ===================================================================== FIX 1: Overflow horizontal en móvil Causa: cart-drawer, search-offcanvas y newsletter-popup tienen offsetWidth=376px cuando el viewport es 360px, generando scroll horizontal. NOTA: overflow-x:hidden en convierte html en scroll container y elimina el scrollbar vertical. Usar overflow-x:clip en body únicamente: clip recorta sin crear scroll container. ===================================================================== */ body { overflow-x: clip; } /* ===================================================================== FIX 2: Espacio vacío excesivo entre precio y CTA en tarjetas de producto Causa: __color-row (22px) y __pills-row (26px) viven DENTRO del __cta-zone. Al colapsarlas sin ajustar el body (168px fijo), el margin-top:auto del cta-zone crece de 8px a 56px. Solución: colapsar las filas vacías Y reducir el body a 120px cuando ambas están vacías. 168px → 120px = 168 - 22(color) - 26(pills) = 120px (mantiene 8px de margen). ===================================================================== */ .product-miniature__color-row:not(:has(*)), .product-miniature__pills-row:not(:has(*)) { height: 0 !important; } .product-miniature__body:not(:has(.product-miniature__color-row > *)):not(:has(.product-miniature__pills-row > *)) { height: 120px !important; } /* ===================================================================== FIX 3: Botón "AÑADIR AL CARRITO" parte texto en 2 líneas en grid 6 cols En desktop xl, las tarjetas son ~195px de ancho — demasiado estrecho para el texto + icono en font-size 0.8rem. Reducimos a 0.7rem en xl. ===================================================================== */ @media (min-width: 1200px) { .product-miniature__cta-zone .btn { font-size: 0.68rem; gap: 0.2rem; padding: 0 0.25rem; letter-spacing: 0; } } /* ===================================================================== FIX 4: Tab "Crear una cuenta" se parte en 2 líneas en móvil (login) La clase real del tab es auth-card__tab (no .nav-tabs .nav-link). ===================================================================== */ @media (max-width: 575px) { .auth-card__tab { font-size: 0.82rem; padding-left: 0.6rem; padding-right: 0.6rem; white-space: nowrap; } } /* ===================================================================== FIX 5: Hero de listado — stats "PRODUCTOS/PÁGINAS" recortados en móvil Causa: CSS Grid 1fr auto. El título (ej. "Complementos" ~163px) excede el 1fr disponible (~103px) → stats salen 60px fuera del hero → overflow:hidden los recorta. Solución: en móvil < 480px, apilar los stats debajo del texto (1 columna) en lugar de forzar 2 columnas donde no caben. ===================================================================== */ @media (max-width: 479px) { .listing-hero { grid-template-columns: 1fr; row-gap: 0.75rem; } .listing-hero__stats { grid-column: 1; grid-row: auto; flex-direction: row; gap: 0.75rem; } .listing-hero__stat { flex: 1; } } /* ===================================================================== FIX 6: Flechas del carrusel (homepage) se superponen al nombre del producto Las clases reales son __btn--prev / __btn--next (no __prev/__next). El slider-wrap mide 390px; top:50% = 195px cae sobre el nombre del producto. Al 40% = 156px quedan en el área de imagen. ===================================================================== */ .gc-catfeat__btn--prev, .gc-catfeat__btn--next { top: 40% !important; } /* ===================================================================== FIX 7: Botón flotante "Filter" en listados solapa con CTAs de producto Añadimos más margen inferior al grid para evitar que el FAB tape el último producto visible. ===================================================================== */ #products { padding-bottom: 4rem; } /* ===================================================================== FIX 8: Carrito vacío — estado empty tiene demasiado espacio en blanco ===================================================================== */ .cart-grid-body .cart-overview:empty ~ .cart-empty-info, .cart-grid-body .no-items { margin-top: 2rem; margin-bottom: 2rem; } /* ===================================================================== FIX 9: product__block desplazado 12px extra hacia el interior en móvil Causa: _product.scss aplica margin: 0.375rem 0.75rem en < lg, mientras gc-catfeat tiene margin-left/right: 0. Resultado: descripción no alineada con los carruseles. Solución: anular el margen horizontal en mobile. ===================================================================== */ @media (max-width: 991.98px) { .page-product .product__block { margin-left: 0; margin-right: 0; } } /* ===================================================================== FIX 10: Cabecera de listado (hero) desalineada respecto a la grid Causa: #js-product-list-header tiene padding: 0 1.5rem/2rem/2.5rem en _product-list.scss, que empuja el hero hacia el interior mientras #products comienza en el borde del container. El hero tiene su propio padding interno — no necesita el padding del wrapper. ===================================================================== */ #js-product-list-header { padding-left: 0; padding-right: 0; } /* ===================================================================== BLOG — Header de categoría ===================================================================== */ .blog-listing-header { border-bottom: 3px solid var(--gc-primary, #1a7a4a); padding-bottom: 1.5rem; margin-bottom: 2rem; } .blog-listing-header__title { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; color: #111; margin: 0 0 .4rem; letter-spacing: -.02em; line-height: 1.15; } .blog-listing-header__desc { font-size: 1rem; color: #666; margin-bottom: 0; max-width: 56ch; } .blog-listing-header__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; } /* ===================================================================== BLOG — Section cards (raíz del blog) ===================================================================== */ .blog-section-grid { margin-top: .5rem; } .blog-section-card { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 1.6rem; border: 2px solid var(--bs-border-color, #dee2e6); border-radius: .625rem; color: inherit; text-decoration: none; font-weight: 700; font-size: 1.1rem; transition: border-color .15s, background .15s, color .15s; height: 100%; } .blog-section-card:hover { border-color: var(--gc-primary, #1a7a4a); background: rgba(26, 122, 74, .05); color: var(--gc-primary, #1a7a4a); } .blog-section-card__arrow { font-size: 1.25rem; flex-shrink: 0; transition: transform .15s; } .blog-section-card:hover .blog-section-card__arrow { transform: translateX(3px); } /* ===================================================================== BLOG — Listado de categoría CMS ===================================================================== */ .blog-categories { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; } .blog-categories__tag { display: inline-block; padding: .3rem .85rem; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 2rem; font-size: .85rem; color: inherit; text-decoration: none; transition: background .15s, color .15s; } .blog-categories__tag:hover, .blog-categories__tag--active { background: var(--gc-primary, #222); color: #fff; border-color: transparent; } .blog-listing-header__tags--article { margin-bottom: 1.25rem; } .blog-grid { margin-top: .5rem; } .blog-card__inner { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .5rem; overflow: hidden; transition: box-shadow .2s; } .blog-card__inner:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); color: inherit; } .blog-card__img-wrap { aspect-ratio: 16/9; overflow: hidden; background: #f5f5f5; } .blog-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .blog-card__inner:hover .blog-card__img { transform: scale(1.03); } .blog-card__img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(26,122,74,.07) 0%, rgba(26,122,74,.16) 100%); color: var(--gc-primary, #1a7a4a); } .blog-card__img-placeholder .material-icons { font-size: 2.5rem; opacity: .45; } .blog-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.25rem 1.25rem; } .blog-card__date { font-size: .8rem; color: #888; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .5rem; } .blog-card__title { font-size: 1.05rem; font-weight: 600; margin-bottom: .6rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .blog-card__excerpt { font-size: .9rem; color: #555; flex: 1; margin-bottom: .9rem; line-height: 1.6; } .blog-card__readmore { font-size: .85rem; font-weight: 600; display: flex; align-items: center; gap: .2rem; color: var(--gc-primary, #222); } .blog-card__readmore .material-icons { font-size: 1rem; } .blog-empty { color: #888; font-style: italic; padding: 2rem 0; } /* Blog — Artículo individual */ .page-cms__date { display: block; font-size: .8rem; color: #888; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1.25rem; } /* ===================================================================== CMS ARTICLE TYPOGRAPHY Scoped to .page-cms__body — no afecta páginas fuera del CMS. ===================================================================== */ /* Wrapper centrado para artículos de blog (excluye landings B2B e IDs especiales) */ .page-cms--article { max-width: 868px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } /* H1 del artículo — override de _cms.scss que lo deja en 26px (tamaño de H3) */ .page-cms__title { font-size: 2.25rem; line-height: 1.2; font-weight: 700; margin-bottom: 0.5rem; } /* Cuerpo del artículo: ancho óptimo de lectura (~70ch) */ .page-cms__body { font-size: 1rem; line-height: 1.7; } .page-cms__body p { margin-bottom: 1.1rem; } /* H2 — línea inferior verde para separar secciones */ .page-cms__body h2 { font-size: 1.75rem; font-weight: 700; border-bottom: 2px solid var(--gc-primary, #1a7a4a); padding-bottom: 0.3rem; margin-top: 2rem; margin-bottom: 1rem; } /* H3 — ligeramente más pequeño y con color del sistema */ .page-cms__body h3 { font-size: 1.3rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: .6rem; color: var(--gc-primary, #1a7a4a); } /* Blockquote — borde izquierdo verde + fondo tintado */ .page-cms__body blockquote { border-left: 4px solid var(--gc-primary, #1a7a4a); background: rgba(26, 122, 74, .05); padding: .75rem 1rem; margin-left: 0; margin-right: 0; border-radius: 0 .375rem .375rem 0; font-style: italic; color: #444; } .page-cms__body blockquote blockquote { margin-top: .5rem; border-left-color: #aaa; background: rgba(0, 0, 0, .03); } /* Código inline */ .page-cms__body code { background: #f0f4f0; color: #1a6640; padding: .15em .4em; border-radius: .2em; font-size: .875em; } /* Bloques de código (pre) */ .page-cms__body pre { background: #1e2028; color: #abb2bf; padding: 1.25rem; border-radius: .5rem; overflow-x: auto; margin: .5rem 0 1.5rem; font-size: .85rem; line-height: 1.55; } .page-cms__body pre code { background: none; color: inherit; padding: 0; font-size: inherit; border-radius: 0; } /* Tablas Markdown — bordes y cabecera verde */ .page-cms__body table { width: 100%; border-collapse: collapse; margin: .75rem 0 1.5rem; font-size: .92rem; } .page-cms__body table th, .page-cms__body table td { border: 1px solid var(--bs-border-color, #dee2e6); padding: .5rem .75rem; vertical-align: top; } .page-cms__body table th { background: var(--gc-primary, #1a7a4a); color: #fff; font-weight: 600; } .page-cms__body table tbody tr:nth-child(even) td { background: rgba(26, 122, 74, .04); } /* Lista de definición (dl/dt/dd) */ .page-cms__body dl { margin-bottom: 1.25rem; } .page-cms__body dl dt { font-weight: 700; margin-top: .75rem; color: #222; } .page-cms__body dl dd { margin-left: 1.5rem; padding-left: .75rem; border-left: 2px solid var(--bs-border-color, #dee2e6); color: #555; margin-bottom: .25rem; } /* Notas al pie (Markdown Extra genera .footnotes) */ .page-cms__body .footnotes { border-top: 1px solid var(--bs-border-color, #dee2e6); margin-top: 2.5rem; padding-top: 1rem; font-size: .85rem; color: #777; } .page-cms__body .footnotes ol { padding-left: 1.25rem; } /* Abreviaciones (Markdown Extra genera ) */ .page-cms__body abbr[title] { text-decoration: underline dotted; cursor: help; } /* Separadores horizontales */ .page-cms__body hr { border-color: var(--bs-border-color, #dee2e6); margin: 2rem 0; opacity: 1; } /* Imágenes — responsive y redondeadas */ .page-cms__body img { max-width: 100%; height: auto; border-radius: .375rem; margin: .5rem 0; } /* Details / Summary (HTML nativo) */ .page-cms__body details { border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .375rem; padding: .75rem 1rem; margin: 1rem 0; } .page-cms__body details summary { cursor: pointer; user-select: none; font-weight: 600; } .page-cms__body details[open] summary { margin-bottom: .5rem; } /* ===================================================================== CMS ARTICLE — LINKS Y BOTONES CTA EN CONTENIDO ===================================================================== */ .page-cms__body a { color: var(--gc-primary, #1a7a4a); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .page-cms__body a:hover { color: #145c38; text-decoration: none; } /* Botón CTA escrito en Markdown como HTML: */ .page-cms__body .btn-cta, .page-cms__body .btn-primary { display: inline-flex; align-items: center; gap: .4rem; margin: .5rem 0; text-decoration: none; } /* ===================================================================== CMS ARTICLE — BLOQUE CTA DE CONVERSIÓN AL FINAL ===================================================================== */ .cms-article-cta { margin-top: 2.5rem; padding: 1.5rem 1.75rem; background: rgba(26, 122, 74, .07); border-left: 4px solid var(--gc-primary, #1a7a4a); border-radius: 0 .5rem .5rem 0; } .cms-article-cta__text { margin-bottom: 1rem; font-size: 1rem; color: #333; line-height: 1.6; } .cms-article-cta__btn { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; } /* ===================================================================== CMS ARTICLE — NAVEGACIÓN PREV/NEXT ===================================================================== */ .cms-nav { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 2px solid var(--gc-primary, #1a7a4a); display: flex; gap: 1rem; flex-wrap: wrap; } .cms-nav__link { flex: 1 1 calc(50% - .5rem); min-width: 200px; display: flex; align-items: center; gap: .6rem; padding: .9rem 1.1rem; border: 1px solid #dee2e6; border-radius: .5rem; text-decoration: none; color: #333; transition: border-color .15s, background .15s; } .cms-nav__link:hover { border-color: var(--gc-primary, #1a7a4a); background: rgba(26, 122, 74, .04); color: #222; } .cms-nav__link--next { justify-content: flex-end; text-align: right; margin-left: auto; } .cms-nav__link small { display: block; font-size: .75rem; color: #888; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .15rem; } .cms-nav__link strong { display: block; font-size: 1rem; font-weight: 600; line-height: 1.3; } .cms-nav__link .material-icons { color: var(--gc-primary, #1a7a4a); font-size: 1.4rem; flex-shrink: 0; } /* ===================================================================== CMS ARTICLE — ARTÍCULOS RELACIONADOS ===================================================================== */ .cms-related { margin-top: 3rem; } .cms-related__title { font-size: 1.15rem; font-weight: 700; margin-bottom: 1.25rem; padding-bottom: .4rem; border-bottom: 2px solid var(--gc-primary, #1a7a4a); } .page-cms__body details[open] summary { margin-bottom: .5rem; } /* ===================================================================== CMS ARTICLE — BOTONES DE COMPARTIR EN REDES SOCIALES ===================================================================== */ .cms-share { display: flex; align-items: center; gap: .625rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid #e9ecef; } .cms-share__label { font-size: .85rem; color: #6c757d; margin-right: .25rem; } .cms-share__btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; color: #fff; transition: opacity .2s, transform .15s; text-decoration: none; } .cms-share__btn svg { width: 1.1rem; height: 1.1rem; fill: currentColor; } .cms-share__btn:hover { opacity: .85; transform: translateY(-2px); color: #fff; text-decoration: none; } .cms-share--header { margin-top: .5rem; margin-bottom: 1.5rem; padding-top: 0; border-top: none; } .cms-share--header .cms-share__btn { width: 1.75rem; height: 1.75rem; } .cms-share--header .cms-share__btn svg { width: .85rem; height: .85rem; } .cms-share__btn--whatsapp { background: #25d366; } .cms-share__btn--twitter { background: #000; } .cms-share__btn--facebook { background: #1877f2; } .cms-share__btn--tiktok { background: #010101; } .cms-share__btn--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }