/* Componentes compartidos */ /* ── Botón con relieve (lenguaje retro) ── */ .btn { display: inline-block; font-weight: 800; font-size: 13.5px; border-radius: var(--r-lg); padding: 13px 24px; transition: transform .08s ease, box-shadow .08s ease; } .btn--buy { background: var(--coral); color: #fff; box-shadow: var(--lift); } /* coral SOLO compra */ .btn--buy:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--coral-d); } .btn--ghost { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 2px rgba(247,241,217,.5); } .btn--green { background: var(--green); color: var(--cream); box-shadow: 0 5px 0 #2c4534; } .btn--green:active { transform: translateY(3px); box-shadow: 0 2px 0 #2c4534; } .btn--gold { background: var(--gold); color: var(--ink); box-shadow: 0 5px 0 #c8901f; } /* ofertas/captación, NO compra */ .btn--gold:active { transform: translateY(3px); box-shadow: 0 2px 0 #c8901f; } /* ── Promo bar ── */ .promo-bar { background: var(--ink); color: var(--cream); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-align: center; padding: 9px 12px; } /* ── Header ── */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--cream); border-bottom: 1px solid rgba(59,91,68,.12); transition: box-shadow .2s; } .site-header.is-scrolled { box-shadow: 0 4px 16px rgba(36,48,41,.08); } .site-header__row { display: flex; align-items: center; justify-content: space-between; padding-block: 12px; } .site-header__logo img { height: 22px; } .site-header__icons { display: flex; gap: 20px; align-items: center; } .icon-btn { width: 32px; height: 32px; background: transparent; color: var(--green); position: relative; } .icon-btn[data-icon]::before { content: ""; display: block; width: 100%; height: 100%; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; background: currentColor; } .icon-btn[data-icon="search"] { --ic: url('../icons/search.svg'); } .icon-btn[data-icon="cart"] { --ic: url('../icons/cart.svg'); } .icon-btn[data-icon="menu"] { --ic: url('../icons/menu.svg'); } .cart-count { position: absolute; top: -6px; right: -8px; background: var(--coral); color: #fff; font-size: 9px; font-weight: 800; min-width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; padding: 0 3px; } /* ── Footer ── */ .site-footer { background: var(--green); color: var(--cream); padding-block: 28px; margin-top: 8px; } .site-footer__logo { height: 26px; filter: brightness(0) invert(1); margin-bottom: 10px; } .site-footer__tag { font-family: var(--font-display); font-style: italic; opacity: .9; margin-bottom: 14px; } .site-footer__contact { font-style: normal; font-size: 13px; line-height: 1.6; opacity: .85; margin-bottom: 14px; } .site-footer__links { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; margin-bottom: 16px; } .site-footer__links a { border-bottom: 1px solid rgba(247,241,217,.3); padding-bottom: 2px; } .site-footer__copy { font-size: 11px; opacity: .82; } @media (min-width: 768px) { .site-header__logo img { height: 28px; } } /* ── Carrusel + tarjeta de producto ── */ .carousel { position: relative; } .carousel__track { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; } .carousel__track::-webkit-scrollbar { display: none; } /* ── Carrusel "cinta de aeropuerto" (marquee) ── La clase .is-belt la añade marquee.js sólo cuando el efecto está activo (hay tarjetas y no hay prefers-reduced-motion). Sin JS o con movimiento reducido se queda como carrusel normal scrollable. El bucle es sin costuras porque marquee.js duplica las tarjetas y la animación traslada -50% (justo un set). */ .carousel--belt.is-belt { overflow: hidden; } .carousel--belt.is-belt .carousel__track { overflow: visible; width: max-content; scroll-snap-type: none; padding-bottom: 0; animation: rulos-belt linear infinite; will-change: transform; } .carousel--belt.is-belt:hover .carousel__track { animation-play-state: paused; } .carousel--belt.is-belt .product-card { flex: 0 0 auto; width: 200px; scroll-snap-align: none; } @media (min-width: 768px) { .carousel--belt.is-belt .product-card { width: 240px; } } @keyframes rulos-belt { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .carousel--belt.is-belt .carousel__track { animation: none; } } /* Columna flex + el botón con margin-top:auto (abajo): así el "Añadir" queda a la misma altura en toda la fila aunque unos nombres ocupen una línea y otros dos. */ .product-card { flex: 0 0 47%; scroll-snap-align: start; background: var(--card); border-radius: var(--r-lg); padding: 12px; box-shadow: var(--shadow-card); position: relative; display: flex; flex-direction: column; } /* z-index: el recuadro de la imagen es position:relative (lo necesita la 2ª foto del hover), y va DESPUÉS en el HTML. Sin esto, el distintivo de oferta queda debajo de la foto y se ve solo la esquinita. */ .product-card__tag { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--gold); color: var(--ink); font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: 7px; letter-spacing: .01em; } /* Flex (NO grid): con grid+place-items, el height:100% de la imagen no se resuelve contra el alto de la caja y la imagen desborda → se recorta. Con flex sí funciona. */ /* aspect-ratio (no alto fijo): el recuadro escala con el ancho de la tarjeta y queda cuadrado en móvil y escritorio, dando espacio grande a la foto del producto. */ .product-card__img { aspect-ratio: 1 / 1; background: linear-gradient(135deg,#e7dcb0,#d8cda0); border-radius: var(--r-sm); margin: 6px 0 9px; display: flex; align-items: center; justify-content: center; color: #9a8f63; font-size: 9px; overflow: hidden; } /* Imagen real del producto dentro de la tarjeta (WooCommerce): entera, sin recortar. */ .product-card__img img { width: 100%; height: 100%; object-fit: contain; } .product-card__name { font-family: var(--font-ui); font-size: 17px; font-weight: 700; line-height: 1.32; margin-bottom: 7px; } /* margin-bottom aquí (y no margin-top en el botón, que ahora es auto) para garantizar un hueco mínimo entre precio y botón cuando la tarjeta es corta. */ .product-card__price { font-family: var(--font-ui); font-weight: 800; color: var(--green); font-size: 21px; letter-spacing: -.01em; margin-bottom: 10px; } .product-card__from { font-size: 12px; font-weight: 600; color: rgba(36,48,41,.6); letter-spacing: 0; margin-right: 2px; } .product-card__price s { color: rgba(36,48,41,.7); font-size: 14px; font-weight: 400; margin-left: 5px; } /* Botón ancho con icono + texto centrados (antes era un cuadradito con el "+" suelto). */ .product-card__add { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: auto; padding: 11px 12px; border-radius: var(--r-sm); background: var(--coral); color: #fff; font-family: var(--font-ui); font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: 0 3px 0 var(--coral-d); } .product-card__add-ic { width: 18px; height: 18px; flex: 0 0 auto; } .product-card__add:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--coral-d); } @media (min-width: 768px) { .product-card { flex-basis: 23%; } } /* ── Iconos de "características" (reutilizables, mismo truco de máscara) ── */ .ico { display: inline-block; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; } .ico--store { --ic: url('../icons/store.svg'); } .ico--bike { --ic: url('../icons/bike.svg'); } .ico--advice { --ic: url('../icons/advice.svg'); } .ico--corn { --ic: url('../icons/corn.svg'); } /* ── Etiqueta de producto (distintivo con icono) ── Va arriba a la DERECHA de la tarjeta: arriba a la izquierda ya vive el badge de oferta y se solaparían en los productos que tengan las dos cosas. */ .prod-etiqueta { display: inline-flex; align-items: center; gap: 6px; background: var(--green-2); color: #fff; font-family: var(--font-ui); font-size: 12px; font-weight: 700; line-height: 1; padding: 6px 10px; border-radius: var(--r-pill); white-space: nowrap; } .prod-etiqueta .ico { width: 14px; height: 14px; flex: 0 0 auto; } .product-card__etiqueta { position: absolute; top: 10px; right: 10px; z-index: 2; } /* En la ficha va suelta bajo el precio, más grande y sin posicionar. */ .pdp__etiqueta { margin-bottom: 14px; } .pdp__etiqueta .prod-etiqueta { font-size: 13.5px; padding: 8px 13px; } .pdp__etiqueta .ico { width: 16px; height: 16px; } /* ── Menú de navegación (drawer) ── */ .nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 88%; max-width: 360px; background: var(--cream); z-index: 90; transform: translateX(100%); transition: transform .28s ease; display: flex; flex-direction: column; box-shadow: -8px 0 50px rgba(36,48,41,.25); overflow-y: auto; } .nav-drawer.is-open { transform: none; } .nav-backdrop { position: fixed; inset: 0; background: rgba(36,48,41,.45); z-index: 85; opacity: 0; visibility: hidden; transition: opacity .28s; } .nav-backdrop.is-open { opacity: 1; visibility: visible; } .nav-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid rgba(59,91,68,.12); } .nav-drawer__title { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--green); } .nav-drawer__close { font-size: 20px; color: var(--ink); background: transparent; } .nav-menu { list-style: none; padding: 6px 0; margin: 0; } .nav-menu > li { border-bottom: 1px solid rgba(59,91,68,.08); } .nav-link { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 15px 18px; font-size: 16px; font-weight: 600; color: var(--ink); background: transparent; text-align: left; } .nav-sign { color: var(--green); font-size: 20px; width: 20px; text-align: center; } .nav-sub { list-style: none; margin: 0; padding: 0 0 8px; display: none; } .nav-group.is-open .nav-sub { display: block; } .nav-sub a { display: block; padding: 9px 18px 9px 32px; font-size: 14px; color: rgba(36,48,41,.8); } .nav-sub a:hover { color: var(--green); } .nav-drawer__foot { margin-top: auto; padding: 18px; background: var(--green); color: var(--cream); font-size: 13px; line-height: 1.6; } .nav-drawer__foot a { border-bottom: 1px solid rgba(247,241,217,.3); } /* ── Carrito (drawer) ── */ .cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 90%; max-width: 380px; background: var(--cream); z-index: 95; transform: translateX(100%); transition: transform .28s ease; display: flex; flex-direction: column; box-shadow: -8px 0 50px rgba(36,48,41,.25); } .cart-drawer.is-open { transform: none; } .cart-backdrop { position: fixed; inset: 0; background: rgba(36,48,41,.45); z-index: 92; opacity: 0; visibility: hidden; transition: opacity .28s; } .cart-backdrop.is-open { opacity: 1; visibility: visible; } .cart-drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid rgba(59,91,68,.12); font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--green); } .cart-drawer__head button { font-size: 20px; color: var(--ink); background: transparent; } .cart-drawer__body { flex: 1; overflow-y: auto; padding: 6px 16px; } .cart-empty { text-align: center; color: rgba(36,48,41,.6); padding: 48px 0; line-height: 1.7; } .cart-item { display: grid; grid-template-columns: 52px 1fr auto auto; gap: 10px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(59,91,68,.1); } .cart-item__thumb { width: 52px; height: 52px; border-radius: 9px; overflow: hidden; background: linear-gradient(135deg,#e7dcb0,#d8cda0); display: grid; place-items: center; } .cart-item__thumb img { width: 100%; height: 100%; object-fit: cover; } .cart-item__thumb--ph { color: #9a8f63; font-size: 9px; } .cart-item__info h4 { font-size: 14px; font-weight: 700; margin-bottom: 2px; line-height: 1.3; } .cart-item__price { font-size: 14px; color: var(--green); font-weight: 700; } .cart-item__qty { display: flex; align-items: center; background: var(--card); border-radius: var(--r-md); box-shadow: inset 0 0 0 1.5px rgba(59,91,68,.2); } .cart-item__qty button { width: 28px; height: 34px; color: var(--green); font-size: 16px; background: transparent; } .cart-item__qty span { width: 26px; text-align: center; font-weight: 700; font-size: 14px; } .cart-item__remove { color: rgba(36,48,41,.45); font-size: 14px; background: transparent; width: 24px; } .cart-drawer__foot { padding: 16px; border-top: 2px solid var(--green); } .cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; margin-bottom: 12px; } .cart-subtotal strong { font-size: 22px; color: var(--green); } .cart-checkout { display: block; text-align: center; width: 100%; } .cart-viewcart { display: block; text-align: center; width: 100%; margin-top: 9px; color: var(--green); font-weight: 700; font-size: 13px; text-decoration: underline; } .cart-note { font-size: 11px; color: rgba(36,48,41,.55); text-align: center; margin-top: 10px; } /* Ocultar el enlace "Ver carrito" que WooCommerce añade solo tras el AJAX: ahora se abre el cajón del carrito en su lugar, así que ese texto sobra y se veía mal. */ .added_to_cart, a.added_to_cart.wc-forward { display: none !important; } .product-card__add.loading::after { display: none; } /* sin spinner: basta con que se abra el cajón */ /* ── Buscador (overlay) ── */ .search-overlay { position: fixed; inset: 0; background: rgba(36,48,41,.5); z-index: 96; display: none; align-items: flex-start; justify-content: center; padding: 80px 16px; } .search-overlay.is-open { display: flex; } .search-box { position: relative; background: var(--cream); border-radius: var(--r-lg); padding: 12px; display: flex; gap: 8px; align-items: center; width: 100%; max-width: 560px; box-shadow: 0 20px 50px rgba(0,0,0,.3); } .search-box input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 12px; border: 1.5px solid rgba(59,91,68,.25); border-radius: var(--r-md); background: #fff; } .search-close { position: absolute; top: -42px; right: 0; color: var(--cream); font-size: 22px; background: transparent; } /* ── Micro-interacciones (hover, sobre todo en escritorio) ── */ @media (hover: hover) { .product-card { transition: transform .14s ease, box-shadow .14s ease; } .product-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(36,48,41,.13); } .btn--buy:hover, .btn--green:hover, .btn--gold:hover { filter: brightness(1.05); } .product-card__add:hover { filter: brightness(1.06); } } .cart-item__free { color: var(--coral); font-weight: 800; } .cart-item--free { background: #fff6e0; border-radius: 8px; } /* Selector de regalo 5+1 en la página del carrito */ .rulos-gift { background: #fff6e0; border: 1.5px dashed var(--gold); border-radius: var(--r-md); padding: 14px 16px; margin: 16px 0; } .rulos-gift__title { font-family: var(--font-display); color: var(--green); font-size: 18px; margin-bottom: 4px; } .rulos-gift__info { font-size: 14px; margin-bottom: 10px; } .rulos-gift__pick { display: flex; gap: 8px; flex-wrap: wrap; } .rulos-gift__select { font: inherit; font-size: 14px; padding: 9px 10px; border-radius: var(--r-md); border: 1.5px solid rgba(59,91,68,.25); background: var(--card); color: var(--ink); } .rulos-gift__add { background: var(--coral); color: #fff; font-weight: 700; border-radius: var(--r-md); padding: 9px 16px; } .rulos-gift__done { font-size: 13px; color: var(--green); font-weight: 600; } .rulos-free-tag { color: var(--coral); font-weight: 800; } .cart-giftnote { background: #fff6e0; border-radius: 8px; padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 10px; } .cart-giftnote a { color: var(--coral); text-decoration: underline; } /* ══ Barra de categorías + megamenús (solo escritorio) ═════════════════════════ En móvil no existe: manda el cajón lateral. El hover no existe en táctil y 9 subcategorías por familia no caben en una barra. */ .mainnav { display: none; } @media (min-width: 992px) { /* El cajón y su hamburguesa dejan de hacer falta: la navegación está a la vista. */ .icon-btn--menu { display: none; } .mainnav { display: block; background: var(--green); } /* justify-content: center — las entradas van centradas en la página, no pegadas al logo. */ .mainnav__row { display: flex; align-items: stretch; justify-content: center; gap: 10px; } .mainnav__link { display: flex; align-items: center; gap: 7px; padding: 14px 20px; background: transparent; border: 0; font-family: var(--font-ui); font-size: 17px; font-weight: 700; letter-spacing: .02em; color: var(--cream); cursor: pointer; position: relative; } /* Subrayado que crece desde el centro: el "dinámico" sin ser un circo. */ .mainnav__link::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 6px; height: 2px; background: var(--gold); border-radius: 2px; transition: left .22s ease, right .22s ease; } .mainnav__item:hover .mainnav__link::after, .mainnav__link:hover::after, .mainnav__link:focus-visible::after, .mainnav__item.is-open .mainnav__link::after { left: 14px; right: 14px; } .mainnav__caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .22s ease; } .mainnav__item.is-open .mainnav__caret { transform: rotate(-135deg) translateY(-2px); } /* ── Panel del megamenú ── */ .mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--card); border-top: 3px solid var(--gold); box-shadow: 0 18px 40px rgba(36,48,41,.16); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 40; } .mainnav__item.is-open .mega { opacity: 1; visibility: visible; transform: none; } .mainnav { position: relative; } /* ancla del panel: ocupa todo el ancho de la barra */ .mega__inner { padding-block: 26px 22px; } .mega__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 32px; } .mega__cols--marcas { grid-template-columns: repeat(4, 1fr); } .mega__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm); font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--ink); transition: background .15s ease, color .15s ease, transform .15s ease; } .mega__link:hover, .mega__link:focus-visible { background: var(--cream); color: var(--green); transform: translateX(3px); } .mega__all { display: inline-block; margin-top: 16px; padding: 10px 18px; border-radius: var(--r-pill); background: var(--green); color: var(--cream); font-family: var(--font-ui); font-size: 14px; font-weight: 700; transition: background .15s ease, transform .15s ease; } .mega__all:hover { background: var(--green-2); transform: translateX(3px); } /* Al hacer scroll la cabecera se compacta un pelín: se gana pantalla sin perder el menú. */ .site-header.is-scrolled .site-header__row { padding-block: 8px; } .site-header.is-scrolled .site-header__logo img { height: 24px; } .site-header.is-scrolled .mainnav__link { padding-block: 10px; } .site-header__row, .site-header__logo img, .mainnav__link { transition: padding .2s ease, height .2s ease; } } @media (prefers-reduced-motion: reduce) { .mega, .mainnav__link::after, .mainnav__caret, .mega__link, .mega__all { transition: none; } } /* ── Aviso de cookies ── Barra inferior: se apoya sobre la tienda sin taparla ni bloquear la compra. Aceptar y Rechazar tienen el MISMO tamaño y peso: la AEPD exige que rechazar cueste lo mismo que aceptar. Solo cambia el color. */ .cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--card, #fffdf5); border-top: 3px solid var(--green, #3b5b44); box-shadow: 0 -6px 24px rgba(36, 48, 41, .14); padding: 16px; animation: cookies-subir .35s ease-out; } /* Ver la nota de .cookies-panel[hidden]: si algún día esta regla gana un `display`, el atributo hidden dejaría de funcionar. Esto lo blinda. */ .cookies[hidden] { display: none; } @keyframes cookies-subir { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .cookies { animation: none; } } .cookies__inner { max-width: 1100px; margin-inline: auto; display: flex; flex-direction: column; gap: 14px; } .cookies__title { font-family: var(--font-display, 'Fraunces', serif); color: var(--green, #3b5b44); font-size: 18px; margin: 0 0 4px; } .cookies__texto p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink, #243029); } .cookies__texto a { color: var(--green, #3b5b44); text-decoration: underline; } .cookies__acciones { display: flex; flex-direction: column; gap: 10px; } .cookies__acciones .btn { width: 100%; } .cookies__link { background: none; border: 0; padding: 8px; font: inherit; font-size: 14px; color: var(--green, #3b5b44); text-decoration: underline; cursor: pointer; } /* Botón de contorno: mismo tamaño y peso que el de acción, distinto color. OJO: no reutilizar .btn--ghost, que ya existe arriba para el hero (crema sobre foto oscura). Redefinirla dejaba el "Ver ofertas" del hero en verde sobre una foto verde oscuro, ilegible. */ .btn--outline { background: transparent; color: var(--green, #3b5b44); border: 2px solid var(--green, #3b5b44); } .btn--outline:hover { background: rgba(59, 91, 68, .08); } /* "Configurar cookies" del pie: es un