/* =========================================================
 * Salud y Vida — capa de marca sobre el template ShopWise
 * Carga DESPUÉS de main.css. No editar main.css.
 * Color de marca: verde #159945 (extraído del sitio actual)
 * ========================================================= */

:root {
  /* 03/10/2026: el acento (botones, enlaces, etiquetas) pasa al verde oscuro.
     Con #159945 el texto blanco encima y el verde como texto daban 3.70:1,
     por debajo del 4.5 de AA. #0f7a37 da 5.44:1. El verde de marca sigue en
     --syv-green para lo decorativo (lineas, puntos del carrusel, iconos). */
  --accent-color: #0f7a37;          /* = --syv-green-dark */
  --heading-color: #143c22;         /* verde muy oscuro para títulos */
  --nav-hover-color: #0f7a37;
  --nav-dropdown-hover-color: #0f7a37;

  /* tonos derivados del verde de marca */
  --syv-green: #159945;
  --syv-green-dark: #0f7a37;
  --syv-green-800: #0c5f2b;
  --syv-green-tint: #e6f5ec;
  --syv-yellow: #eea419;            /* acento secundario existente */
}

/* ShopWise solo estiliza .btn-primary-action dentro de contenedores concretos
   (.hero, .about-2, .promo-cards...). Definimos un ESTILO BASE GLOBAL para que
   funcione como botón verde en cualquier página migrada (Ver más, footer, etc.).
   Las reglas más específicas del template siguen ganando donde existen. */
.btn-primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 12px 28px;
  background-color: var(--syv-green-dark);
  color: #fff;
  border: 1px solid var(--syv-green-dark);
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: all .25s ease;
  cursor: pointer;
}
.btn-primary-action:hover,
.btn-proceed:hover,
.cart-btn:hover,
.search-submit:hover {
  background-color: var(--syv-green-800);
  border-color: var(--syv-green-800);
  color: #fff;
}

/* Logo textual del template: lo ocultamos en favor de la imagen SyV */
.header .logo .sitename { font-weight: 700; }

/* Badge de conteo (carrito/favoritos) con verde de marca */
.header .badge-count { background-color: var(--syv-green-dark); }

/* Botón outline verde (usado fuera de los contenedores donde ShopWise lo estiliza) */
.btn-outline-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 11px 28px;
  background-color: transparent;
  color: var(--syv-green-dark);
  border: 1px solid var(--syv-green);
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: all .25s ease;
  cursor: pointer;
}
.btn-outline-action:hover {
  background-color: var(--syv-green-dark);
  color: #fff;
}

/* Badge de estatus de pedido (fallback verde si no lleva variante de color) */
.status-tag {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 50px;
  font-size: .8rem;
  font-weight: 600;
  background-color: var(--syv-green-tint);
  color: var(--syv-green-800);
}

/* Paginación con verde de marca (el Paginator emite .pagination/.page-link de Bootstrap) */
.pagination .page-item.active .page-link,
.pagination .active > .page-link,
.pagination .active > a {
  background-color: var(--syv-green-dark);
  border-color: var(--syv-green);
  color: #fff;
}
.pagination .page-link { color: var(--syv-green-dark); }
.pagination .page-link:hover { color: var(--syv-green-dark); }

/* WhatsApp flotante heredado */
.btn-whatsapp {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 998;
}
.btn-whatsapp img { display: block; }

/* ============================================================
   Documentos legales (privacidad.php, terminos_condiciones.php)
   Texto largo verbatim: se prioriza legibilidad, no tarjetas.
   ============================================================ */
.legal-doc {
  padding: 32px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 8px;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--default-color), transparent 92%);
}
.legal-doc > h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--syv-green);
  margin: 32px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--syv-green), transparent 82%);
}
.legal-doc > h3:first-child { margin-top: 0; }
.legal-doc p {
  text-align: justify;
  line-height: 1.75;
  margin-bottom: 14px;
}
.legal-doc a { color: var(--syv-green-dark); }
.legal-doc a:hover { color: var(--syv-green-800); }
.legal-doc .legal-firma {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  font-size: 14px;
}
.legal-doc ol, .legal-doc ul { line-height: 1.75; margin-bottom: 14px; }
@media (max-width: 575px) { .legal-doc { padding: 20px; } }

/* ============================================================
   Megamenú de Productos (products-megamenu-2)
   Celdas vacías: el grid del template es por filas de 4, así que
   los huecos necesitan un <a> que ocupe lugar sin verse ni ser
   clicable.
   ============================================================ */
.navmenu .products-megamenu-2 .category-links .sw-celda-vacia {
  pointer-events: none;
  visibility: hidden;
}
.navmenu .products-megamenu-2 .featured-section .sw-atajos {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.navmenu .products-megamenu-2 .featured-section .sw-atajos a {
  flex: 1;
  text-align: center;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--syv-green), transparent 60%);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--syv-green-dark);
  text-decoration: none;
}
.navmenu .products-megamenu-2 .featured-section .sw-atajos a:hover {
  background: var(--syv-green-dark);
  color: #fff;
}
.navmenu .products-megamenu-2 .featured-section .sw-panel-marca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  padding: 26px 24px;
  border-radius: 10px;
  background: linear-gradient(150deg, var(--syv-green) 0%, var(--syv-green-dark) 100%);
  color: #fff;
}
.navmenu .products-megamenu-2 .featured-section .sw-panel-marca i {
  font-size: 30px;
  opacity: .85;
  margin-bottom: 10px;
}
.navmenu .products-megamenu-2 .featured-section .sw-panel-marca h3 {
  color: #fff;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 8px;
}
.navmenu .products-megamenu-2 .featured-section .sw-panel-marca p {
  font-size: 13px;
  line-height: 1.5;
  opacity: .9;
  margin: 0 0 16px;
}
.navmenu .products-megamenu-2 .featured-section .sw-panel-marca .btn-shop {
  background: #fff;
  color: var(--syv-green-dark);
  border: 0;
  padding: 9px 20px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.navmenu .products-megamenu-2 .featured-section .sw-panel-marca .btn-shop:hover { background: #f0f0f0; }

/* El megamenú no puede pasarse del alto de pantalla: con overflow hidden
   los últimos enlaces quedaban invisibles e inalcanzables en portátiles. */
.navmenu .products-megamenu-2 .desktop-megamenu {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}
/* Los atajos del panel van apilados: son 3 y en fila no caben legibles */
.navmenu .products-megamenu-2 .featured-section .sw-atajos {
  flex-direction: column;
  gap: 8px;
}

/* El panel verde no debe comerse el espacio de los atajos */
.navmenu .products-megamenu-2 .featured-section {
  display: flex;
  flex-direction: column;
}
.navmenu .products-megamenu-2 .featured-section .sw-panel-marca {
  height: auto;
  flex: 0 1 auto;
}

/* ============================================================
   categorias.php — fichas de categoría SIN imagen
   Antes cada categoría mostraba la foto de un producto cualquiera,
   que no la representaba. Estas fichas no dependen de ningún
   archivo: una categoría nueva se ve bien desde el primer día.
   ============================================================ */
.category-list .cat-intro {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
}
.category-list .cat-intro p { color: var(--syv-green-dark); font-size: 15px; }

.category-list .cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  min-height: 160px;
  padding: 24px 16px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 10px;
  background: var(--surface-color);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.category-list .cat-tile:hover {
  transform: translateY(-4px);
  border-color: var(--syv-green);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--syv-green), transparent 85%);
}
.category-list .cat-tile-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--syv-green-tint);
  color: var(--syv-green);
  font-size: 24px;
  transition: background .18s ease, color .18s ease;
}
.category-list .cat-tile:hover .cat-tile-icono {
  background: var(--syv-green);
  color: #fff;
}
.category-list .cat-tile-nombre {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  color: var(--heading-color);
  margin-bottom: 4px;
}
.category-list .cat-tile:hover .cat-tile-nombre { color: var(--syv-green-dark); }
.category-list .cat-tile-conteo { font-size: 13px; color: var(--syv-muted, #6b7280); }

@media (max-width: 575px) {
  .category-list .cat-tile { min-height: 140px; padding: 18px 10px; }
  .category-list .cat-tile-icono { width: 46px; height: 46px; font-size: 20px; margin-bottom: 10px; }
  .category-list .cat-tile-nombre { font-size: 14px; }
}

/* ============================================================
   Blog (blog.php, blog_detalle.php) — tarjetas que NO dependen
   de una imagen: sin foto muestran un bloque de marca.
   ============================================================ */
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 10px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  border-color: var(--syv-green);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--syv-green), transparent 86%);
}
.blog-card-cover {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(150deg, var(--syv-green) 0%, var(--syv-green-dark) 100%);
}
.blog-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card-cover.sin-foto img { display: none; }
.blog-card-fallback,
.blog-card-cover.sin-foto::after {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.9);
  font-size: 44px;
}
.blog-card-cover.sin-foto::after { content: "\F685"; font-family: "bootstrap-icons"; }
.blog-card-cat {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: var(--syv-green-dark);
  font-size: 12px;
  font-weight: 600;
}
.blog-card-body { display: flex; flex-direction: column; padding: 18px; flex: 1; }
.blog-card-fecha { font-size: 12.5px; color: var(--syv-muted, #6b7280); margin-bottom: 6px; }
.blog-card-titulo { font-size: 17px; line-height: 1.35; margin: 0 0 8px; }
.blog-card-titulo a { color: var(--heading-color); text-decoration: none; }
.blog-card-titulo a:hover { color: var(--syv-green); }
.blog-card-resumen { font-size: 14px; color: var(--default-color); margin-bottom: 14px; flex: 1; }
.blog-card-link { font-weight: 600; font-size: 14px; color: var(--syv-green-dark); text-decoration: none; margin-top: auto; }
.blog-card-link i { transition: transform .15s ease; }
.blog-card-link:hover i { transform: translateX(3px); }

/* --- Detalle del artículo --- */
.blog-article-meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 13.5px; color: var(--syv-muted, #6b7280); margin-bottom: 18px; }
.blog-article-cat { padding: 4px 12px; border-radius: 999px; background: var(--syv-green-tint); color: var(--syv-green-dark); font-weight: 600; }
.blog-article-cover { border-radius: 12px; overflow: hidden; margin-bottom: 24px; }
.blog-article-lead { font-size: 18px; line-height: 1.6; color: var(--heading-color); font-weight: 500; margin-bottom: 22px; }
.blog-article-body { font-size: 16px; line-height: 1.8; }
.blog-article-body h2 { font-size: 22px; margin: 28px 0 12px; color: var(--syv-green-dark); }
.blog-article-body ul, .blog-article-body ol { line-height: 1.8; margin-bottom: 16px; }
.blog-article-body p { margin-bottom: 16px; }
.blog-article-foot { margin-top: 32px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 88%); }
.blog-recientes { margin-top: 56px; padding-top: 8px; }

/* FAQ: bloque de cierre */
.faq .faq-cta { padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); }

/* ============================================================
   Etiquetas (badges) de producto: DENTRO del marco de la foto
   Las fotos traen un marco verde propio horneado, con margen
   blanco. El badge en la esquina (12px) caía sobre la línea del
   marco. Se mete más adentro y se hace sólido para que lea claro.
   ============================================================ */
.best-sellers .badge-label,
.category-product-list .badge-label {
  top: 20px;
  left: 20px;
  padding: 4px 12px;
  font-weight: 600;
  border: 0;
  background: var(--syv-green-dark);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.best-sellers .badge-label.trending,
.category-product-list .badge-label.trending {
  background: #d98a00;   /* ámbar accesible */
  color: #fff;
}
.best-sellers .badge-label.discount,
.category-product-list .badge-label.discount {
  background: #159945;   /* Recomendado en verde de marca */
  color: #fff;
}

/* ============================================================
   Carrusel de productos (Swiper) en el index
   ============================================================ */
.best-sellers .product-carousel { position: relative; padding: 8px 0 44px; }
/* El slide es la tarjeta directamente (sw_product_card la emite con
   clase swiper-slide): que ocupe bien y tenga altura pareja. */
.best-sellers .product-carousel .swiper-slide { height: auto; }
.best-sellers .product-carousel .swiper-slide .product-card { height: 100%; }

.best-sellers .product-carousel .swiper-pagination { bottom: 8px; }
.best-sellers .product-carousel .swiper-pagination-bullet {
  background: color-mix(in srgb, var(--syv-green), transparent 55%);
  opacity: 1;
}
.best-sellers .product-carousel .swiper-pagination-bullet-active { background: var(--syv-green); }

.best-sellers .product-carousel .swiper-button-prev,
.best-sellers .product-carousel .swiper-button-next {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 86%);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  color: var(--syv-green);
  top: 40%;
}
.best-sellers .product-carousel .swiper-button-prev:hover,
.best-sellers .product-carousel .swiper-button-next:hover {
  background: var(--syv-green);
  color: #fff;
  border-color: var(--syv-green);
}
.best-sellers .product-carousel .swiper-button-prev::after,
.best-sellers .product-carousel .swiper-button-next::after { font-size: 16px; font-weight: 700; }
.best-sellers .product-carousel .swiper-button-prev { left: -6px; }
.best-sellers .product-carousel .swiper-button-next { right: -6px; }
@media (max-width: 992px) {
  .best-sellers .product-carousel .swiper-button-prev,
  .best-sellers .product-carousel .swiper-button-next { display: none; }
}

/* Etiqueta Gluten Free: top-right, convive con la etiqueta principal
   (que va top-left). Verde de marca, como la de Recomendado. */
.best-sellers .badge-label.badge-gf,
.category-product-list .badge-label.badge-gf {
  left: auto;
  right: 20px;
  top: 20px;
  background: #0f7a37;
  color: #fff;
  gap: 4px;
}
.best-sellers .badge-label.badge-gf i,
.category-product-list .badge-label.badge-gf i { font-size: 12px; }


/* =====================================================================
   Buscador inteligente — desplegable de sugerencias  (28/07/2026)
   Ver assets/js/buscador-inteligente.js y ajax/AjaxBuscador.php.
   El panel lo inyecta el JS dentro del propio <form class="search-bar">,
   por eso ese contenedor necesita posicionamiento.
   ===================================================================== */

form.search-bar { position: relative; }

.syv-sugerencias {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1080;               /* por encima del navbar sticky de ShopWise */
  max-height: min(70vh, 26rem);
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e3e6e8;
  border-radius: .5rem;
  box-shadow: 0 .75rem 1.75rem rgba(0, 0, 0, .14);
  padding: .25rem;
}

.syv-sugerencias[hidden] { display: none; }

.syv-sugerencia {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem;
  border-radius: .375rem;
  text-decoration: none;
  color: #212529;
}

/* .activa la marca el teclado; :hover el raton. Deben verse igual para
   que no haya dos "seleccionados" a la vez. */
.syv-sugerencia:hover,
.syv-sugerencia.activa {
  background-color: var(--syv-green-tint);
  color: #212529;
}

.syv-sugerencia-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: 0 0 44px;
  background: #f7f8f9;
  border-radius: .25rem;
}

.syv-sugerencia-cuerpo {
  display: flex;
  flex-direction: column;
  min-width: 0;                /* deja que el nombre largo se recorte */
  gap: .125rem;
}

.syv-sugerencia-nombre {
  font-size: .9rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El trozo que coincide con lo que escribio el cliente */
.syv-sugerencia-nombre strong {
  font-weight: 700;
  color: var(--syv-green-dark);
}

.syv-sugerencia-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
}

.syv-sugerencia-precio {
  font-weight: 600;
  color: var(--syv-green-dark);   /* AA sobre blanco; el verde de marca se queda corto */
}

.syv-sugerencia-gf {
  font-size: .7rem;
  font-weight: 600;
  padding: .05rem .4rem;
  border-radius: 1rem;
  color: var(--syv-green-dark);
  background: var(--syv-green-tint);
}

.syv-sugerencias-todo {
  display: block;
  margin-top: .25rem;
  padding: .55rem .5rem;
  border-top: 1px solid #eceff1;
  border-radius: .375rem;
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: var(--syv-green-dark);
}

.syv-sugerencias-todo:hover,
.syv-sugerencias-todo.activa {
  background-color: var(--syv-green-tint);
  color: var(--syv-green-dark);
}

.syv-sugerencias-vacio {
  padding: .75rem .5rem .25rem;
  font-size: .9rem;
  color: #495057;
}

.syv-sugerencias-pista {
  padding: 0 .5rem .75rem;
  font-size: .8rem;
  color: #6c757d;
}

@media (max-width: 575.98px) {
  .syv-sugerencia-img { width: 38px; height: 38px; flex-basis: 38px; }
  .syv-sugerencia-nombre { font-size: .85rem; }
}

/* =====================================================================
   Observaciones de la dueña — versión nueva (27/08/2026)
   Documento: DOCS/Observaciones págin web -nueva versión-.md
   ===================================================================== */

/* ---------------------------------------------------------------------
   Obs. 1, 2 y 3 — Barra superior
   Antes: fondo casi blanco, texto gris al 30 % de transparencia y los
   iconos de Facebook/Instagram en ese mismo gris. La dueña reportó que
   "no se observan", y es literal: gris claro sobre blanco verdoso no
   llega ni a 2:1 de contraste (WCAG AA pide 4.5:1).
   Ahora: barra verde, texto blanco centrado, iconos blancos.
   03/10/2026: el verde de marca con blanco a 13.5px daba 3.70:1 (AA pide
   4.5 para texto normal); con el verde oscuro da 5.44:1.
   --------------------------------------------------------------------- */
.header .utility-bar {
  background-color: var(--syv-green-dark);
  border-bottom: 0;
  padding: 7px 0;
}

/* La leyenda va centrada respecto a la PÁGINA, no respecto al hueco que
   dejan la moneda y las redes: por eso el bloque derecho se saca del
   flujo en absoluto en vez de repartir el ancho con flex. */
.header .utility-bar .utility-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
}
.header .utility-bar .utility-derecha {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.header .utility-bar .utility-centro .utility-links { justify-content: center; }

.header .utility-bar .utility-row .utility-link,
.header .utility-bar .utility-row .utility-link:focus,
.header .utility-bar .utility-row .dropdown-toggle.utility-link {
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
}
.header .utility-bar .utility-row .utility-link i { font-size: 15px; }
.header .utility-bar .utility-row a.utility-link i { font-size: 17px; }
.header .utility-bar .utility-row .utility-link:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, .18);
}
.header .utility-bar .dropdown-menu .dropdown-item.active {
  background-color: var(--syv-green-dark);
}

/* En móvil la barra estaba oculta del todo (main.css la apaga bajo 768px).
   El "envío gratis" es justo el mensaje que más conviene ver en el móvil,
   así que se recupera: se queda la leyenda y se van moneda y redes, que
   sí caben en el pie. */
@media (max-width: 768px) {
  .header .utility-bar { display: block; padding: 6px 0; }
  .header .utility-bar .utility-derecha { display: none; }
  .header .utility-bar .utility-row .utility-link {
    font-size: 12px;
    padding: 2px 6px;
    text-align: center;
    line-height: 1.35;
  }
}

/* ---------------------------------------------------------------------
   Obs. 4 — Logo más grande
   El tamaño vive aquí y no en un atributo style del HTML para poder
   bajarlo en pantallas pequeñas, donde un logo de 76px empujaría los
   botones de cuenta y carrito fuera de la barra.
   --------------------------------------------------------------------- */
.header .main-bar .logo img.syv-logo-img {
  max-height: 76px;
  width: auto;
  margin-right: 0;
}
@media (max-width: 1199.98px) {
  .header .main-bar .logo img.syv-logo-img { max-height: 62px; }
}
@media (max-width: 575.98px) {
  .header .main-bar .logo img.syv-logo-img { max-height: 48px; }
}

/* ---------------------------------------------------------------------
   Obs. 7 — Barra de navegación centrada y con más presencia
   La franja pasa de blanca a verde muy claro con un filete verde debajo,
   y los enlaces suben de 14px/500 a 15px/600. El verde oscuro sobre el
   tinte da contraste de sobra para AA.
   --------------------------------------------------------------------- */
.header .nav-strip {
  background-color: var(--syv-green-tint);
  border-bottom: 2px solid color-mix(in srgb, var(--syv-green), transparent 75%);
}

/* Bajo 1200px el menu se recoge en el boton de hamburguesa y la franja se
   queda sin contenido: si conservara el fondo verde quedaria una raya
   suelta de 4px bajo la cabecera. */
@media (max-width: 1199.98px) {
  .header .nav-strip {
    background-color: transparent;
    border-bottom: 0;
  }
}

@media (min-width: 1200px) {
  .header .nav-strip .navmenu > ul { justify-content: center; }

  /* main.css quita el padding lateral al primer y último enlace para
     alinearlos con el borde; centrado, eso descuadra la fila. */
  .header .nav-strip .navmenu li:first-child > a { padding-left: 15px; }
  .header .nav-strip .navmenu li:last-child > a { padding-right: 15px; }

  .header .nav-strip .navmenu > ul > li > a {
    font-size: 15px;
    font-weight: 600;
    color: var(--syv-green-800);
    padding-top: 14px;
    padding-bottom: 14px;
    border-bottom: 3px solid transparent;
  }
  .header .nav-strip .navmenu > ul > li:hover > a,
  .header .nav-strip .navmenu > ul > li > a.active {
    color: var(--syv-green-dark);
    border-bottom-color: var(--syv-green);
  }
}

/* ---------------------------------------------------------------------
   Obs. 13 — Contadores del catálogo con el signo más
   El "+" es texto fijo; el número lo sigue animando purecounter, que
   necesita ser el dueño exclusivo del contenido de su propio span.
   --------------------------------------------------------------------- */
.stats .metric-value-mas { display: inline-flex; align-items: baseline; }
.stats .metric-value-mas .purecounter { display: inline; }

/* ---------------------------------------------------------------------
   Obs. 15 y 16 — Datos de contacto
   --------------------------------------------------------------------- */
.contact-2 .info-card .info-line { margin-bottom: 2px; }
.contact-2 .info-card .info-etiqueta { font-weight: 600; }
/* Verde oscuro y no el gris del parrafo: si el correo y los telefonos son
   clicables (obs. 16) tienen que PARECERLO antes de pasar el raton. */
.contact-2 .info-card a { color: var(--syv-green-dark); text-decoration: none; }
.contact-2 .info-card a:hover { color: var(--syv-green-800); text-decoration: underline; }
.footer .footer-contact a { color: var(--syv-green-dark); text-decoration: none; }
.footer .footer-contact a:hover { color: var(--syv-green-800); text-decoration: underline; }

/* ---------------------------------------------------------------------
   Obs. 22 — Panel lateral de iniciar sesión / registro con foto real
   La foto va arriba y SIN velo encima (el objetivo era justamente que se
   vean las personas); el texto vive en el bloque verde de abajo, donde el
   contraste del blanco está garantizado sin depender de la imagen.
   --------------------------------------------------------------------- */
.login .side-panel-foto {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
  overflow: hidden;
}
.login .side-panel-foto::after { display: none; }
.login .side-panel-foto .side-panel-foto-img {
  flex: 1 1 auto;
  min-height: 210px;
  background-image: url("../../img/tienda_new.jpg");
  background-size: cover;
  background-position: center 22%;
}
.login .side-panel-foto .side-panel-content {
  padding: 26px 30px 30px;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--syv-green), #000 4%) 0%,
              var(--syv-green-800) 100%);
}
.login .side-panel-foto .side-panel-content p { margin-bottom: 20px; }
.login .side-panel-foto .brand-icon { margin-bottom: 16px; }

/* ---------------------------------------------------------------------
   Obs. 23 — Saludo de bienvenida tras iniciar sesión
   --------------------------------------------------------------------- */
.account .syv-bienvenida { border-left: 4px solid var(--syv-green); }
.account .syv-bienvenida h4 { color: var(--syv-green-800); font-weight: 700; }
.account .syv-bienvenida p { font-size: 16px; margin: 0; }

/* ---------------------------------------------------------------------
   Obs. 24 — Historial de pedidos con fondo intercalado
   Un pedido sí y otro no sobre verde muy claro. Se toca solo el fondo y
   el borde: el texto sigue siendo el mismo gris oscuro, así que el
   contraste no baja de AA en ninguna de las dos filas.
   --------------------------------------------------------------------- */
.account .orders-grid .order-card.order-card-alt {
  background: var(--syv-green-tint);
  border-color: color-mix(in srgb, var(--syv-green), transparent 78%);
}
.account .orders-grid .order-card.order-card-alt:hover {
  border-color: color-mix(in srgb, var(--syv-green), transparent 55%);
}

/* ---------------------------------------------------------------------
   Obs. 21 — Reparto del pie de página
   El problema no era el número de columnas sino el reparto: con
   col-4/2/3/3 de Bootstrap cada columna ocupa su carril completo aunque
   su contenido sea corto, y todo el sobrante se acumulaba en un hueco
   grande entre "Salud y Vida" y "Síguenos".
   Aquí las columnas pasan a medir lo que mide su contenido y el sobrante
   se reparte a partes iguales entre ellas (space-between), que es lo que
   hace que el bloque se lea equilibrado.
   Debajo de 992px se vuelve al comportamiento normal de Bootstrap.
   --------------------------------------------------------------------- */
@media (min-width: 992px) {
  .footer .footer-main .row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
  }
  .footer .footer-main .row > [class*="col-"] {
    flex: 0 1 auto;
    width: auto;
    max-width: none;
  }
  .footer .footer-main .footer-about { max-width: 340px; }
}

/* ---------------------------------------------------------------------
   Obs. 5 — Cabecera de resultados del buscador con "Ordenar por"
   El título y el selector comparten fila. En móvil se apilan y el
   selector pasa a ancho completo: en 390px, en línea, el <select>
   quedaba de 90px y no se leía ninguna opción.
   --------------------------------------------------------------------- */
.syv-orden-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
}
.syv-orden-bar .syv-orden-titulo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.syv-orden-bar .syv-orden-titulo h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: var(--heading-color);
}
.syv-orden-bar .syv-orden-conteo {
  font-size: 14px;
  font-weight: 600;
  color: var(--syv-green-dark);
  background: var(--syv-green-tint);
  padding: 3px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.syv-orden-bar .syv-orden-form {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.syv-orden-bar .syv-orden-form label {
  font-size: 14px;
  font-weight: 600;
  color: var(--default-color);
  white-space: nowrap;
  margin: 0;
}
.syv-orden-bar .syv-orden-form select {
  min-width: 210px;
  padding: 9px 34px 9px 14px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 78%);
  border-radius: 8px;
  background-color: var(--surface-color);
  color: var(--default-color);
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23159945'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}
.syv-orden-bar .syv-orden-form select:focus {
  outline: 0;
  border-color: var(--syv-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--syv-green), transparent 85%);
}

@media (max-width: 767.98px) {
  .syv-orden-bar { align-items: stretch; }
  .syv-orden-bar .syv-orden-titulo h2 { font-size: 21px; }
  .syv-orden-bar .syv-orden-form { width: 100%; }
  .syv-orden-bar .syv-orden-form select { flex: 1; min-width: 0; }
}

/* ---------------------------------------------------------------------
   Preguntas frecuentes — el número, sin la "Q"
   El template pintaba "Q1, Q2…" (de *Question*, en inglés). Ahora es solo
   el número, y con un dígito la píldora de ShopWise quedaba un óvalo
   estrecho y desalineado con las demás: se le pone ancho y alto mínimos
   para que 1 y 10 ocupen lo mismo y la columna quede a plomo.
   --------------------------------------------------------------------- */
.faq .faq-item .faq-badge {
  min-width: 28px;
  height: 28px;
  padding: 2px 8px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
}

/* ---------------------------------------------------------------------
   Obs. 33 — Ayuda bajo un campo del formulario
   Los requisitos de la clave se leen ANTES de escribirla, no después de
   que el formulario la rechace.
   --------------------------------------------------------------------- */
.syv-campo-ayuda {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}
.syv-campo-ayuda i { color: var(--syv-green); margin-right: 4px; }

/* ---------------------------------------------------------------------
   Obs. 35 — La foto de iniciar sesión, del mismo alto que en Regístrate
   La foto ocupaba "lo que sobrara" del alto de la columna (flex: 1 1 auto),
   y el formulario de iniciar sesión es ~195px más corto que el de registro:
   con la misma regla la foto medía 210px ahí contra 381px en Regístrate, y
   se veía aplastada. Ahora la foto mide lo mismo en las dos páginas y es el
   bloque verde el que se estira. El formulario corto se centra en vertical
   para que el sobrante no quede todo en un hueco blanco al final.
   --------------------------------------------------------------------- */
@media (min-width: 992px) {
  .login .side-panel-foto .side-panel-foto-img {
    flex: 0 0 340px;
    min-height: 340px;
  }
  .login .side-panel-foto .side-panel-content { flex: 1 1 auto; }
  .login .auth-card .form-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------
   Obs. 36 — Títulos de sección más llamativos
   El título va sobre una franja verde muy clara y un poco más grande. Se
   toca solo `.container.section-title`, que es la variante que usan la
   portada, Conócenos y los relacionados de la ficha; blog_detalle usa
   `.section-title` sin `.container` y se queda como estaba.
   El verde oscuro sobre el tinte da 8,7:1 de contraste, muy por encima
   del 4,5 de AA.
   --------------------------------------------------------------------- */
.container.section-title {
  background: var(--syv-green-tint);
  border: 1px solid color-mix(in srgb, var(--syv-green), transparent 82%);
  border-radius: 14px;
  padding-top: 24px;
  padding-bottom: 24px;
  margin-bottom: 40px;
}
.container.section-title h2 {
  font-size: 36px;
  color: var(--syv-green-800);
  margin-bottom: 16px;
  padding-bottom: 14px;
}
/* Sin subtitulo debajo, el margen del h2 dejaba un hueco verde vacio bajo la
   raya mas alto que el aire de arriba. */
.container.section-title h2:last-child { margin-bottom: 0; }
/* La raya gris del template se apaga: sobre el tinte se veía sucia. Queda
   solo el trazo verde, ahora más ancho y grueso. */
.container.section-title h2::before { display: none; }
.container.section-title h2::after {
  width: 96px;
  height: 4px;
  border-radius: 2px;
  background: var(--syv-green);
}
.container.section-title p { color: color-mix(in srgb, var(--syv-green-800), transparent 20%); }

@media (max-width: 767.98px) {
  .container.section-title { border-radius: 10px; padding-top: 20px; padding-bottom: 20px; }
  .container.section-title h2 { font-size: 26px; }
}

/* ---------------------------------------------------------------------
   Asterisco de campo obligatorio
   Las pantallas de checkout (form_pago.php y pago.php) ya marcaban los
   campos con <span class="required">*</span>, pero esa clase SOLO estaba
   definida en assets/css/style.css — la hoja de la plantilla vieja, que
   estas páginas ya no cargan. Resultado: el asterisco salía del mismo gris
   que la etiqueta y no se distinguía de nada.
   El rojo da 5,9:1 sobre blanco, por encima del 4,5 de AA.
   --------------------------------------------------------------------- */
.required {
  color: #c62828;
  font-weight: 700;
  margin-left: 2px;
}

/* =====================================================================
   Revisión en celular (03/10/2026)
   Probado a 375px de ancho útil en demo. Nada de esto toca escritorio
   salvo el contraste de enlaces, que fallaba en todos los tamaños.
   ===================================================================== */

/* --- Contraste de enlaces ---------------------------------------------
   main.css pinta los enlaces con --accent-color (#159945): 3.70:1 sobre
   blanco, por debajo del 4.5 de AA. Se cambia SOLO el color de texto;
   botones, etiquetas y fondos siguen con el verde de marca. Las reglas con
   clase de main.css (pie, menú...) siguen mandando sobre esta. */
a { color: var(--syv-green-dark); }
a:hover { color: var(--syv-green-800); }
.about-2 .intro-block .label-badge { color: var(--syv-green-dark); }
.faq .faq-item.faq-active h3 { color: var(--syv-green-dark); }
.login .forgot-link { color: var(--syv-green-dark); }
.product-details .info-tabs .tab-nav .nav-link.active { color: var(--syv-green-dark); }
/* "Disponible" venía en #16a34a: 3.30:1. */
.product-details .product-detail-card .detail-header .stock-indicator { color: var(--syv-green-dark); }

/* --- Botones flotantes (WhatsApp y "subir") ---------------------------
   El encabezado tiene z-index 997 y WhatsApp 998: el menú móvil, que vive
   dentro del encabezado, quedaba DEBAJO del botón. Con el menú abierto no
   hacen falta, así que se ocultan. */
.mobile-nav-active .btn-whatsapp,
.mobile-nav-active .scroll-top { display: none !important; }

@media (max-width: 767.98px) {
  /* En teléfono el WhatsApp flotante se quita: interfería con la vista.
     Pasa al encabezado, junto al menú (.action-whatsapp en
     sw_header_body.php). De 768px en adelante sigue flotante. */
  .btn-whatsapp { display: none; }
  .header .main-bar .action-group .action-whatsapp { color: var(--syv-green-dark); }

  /* "Subir" a la izquierda: a la derecha tapaba el botón de agregar al
     carrito de las tarjetas. */
  .scroll-top { right: auto; left: 12px; bottom: 12px; width: 36px; height: 36px; }

  /* Aire al final para que el copyright no quede debajo del botón. */
  .footer .footer-bottom { padding-bottom: 60px; }

  /* "Síguenos": main.css centra los iconos en celular, pero el título y el
     botón "Escríbenos" van a la izquierda. */
  .footer .footer-main .social-icons { justify-content: flex-start; }
}

/* "Síguenos": los iconos de redes y el botón "Escríbenos" comparten eje
   central. El contenedor mide lo que el botón (el más ancho) y los iconos
   se centran encima; el título sigue a la izquierda como las otras columnas. */
.footer .footer-main .footer-siguenos {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

/* En teléfono el botón va en la misma línea que los iconos, a su derecha.
   Caben en 360px (132px de iconos + 12px + ~150px de botón); el wrap es
   solo red de seguridad para pantallas más angostas. */
@media (max-width: 767.98px) {
  .footer .footer-main .footer-siguenos {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
  }
  .footer .footer-main .footer-siguenos > div { margin-top: 0 !important; }
}

/* Sin zoom en pantallas táctiles (ver initDriftZoom en main.js): el cursor
   de cruz ya no aplica. */
@media (hover: none), (pointer: coarse) {
  .product-details .image-showcase .main-image-container img { cursor: default; }
}

/* --- Zonas táctiles ----------------------------------------------------
   Los enlaces del pie medían 21px de alto y los teléfonos 17px: difíciles
   de acertar con el dedo. */
@media (max-width: 991.98px) {
  .footer .footer-main .footer-links li { margin-bottom: 2px; }
  .footer .footer-main .footer-links a { display: inline-block; padding: 7px 0; }
  .footer .footer-contact a { display: inline-block; padding: 6px 0; }
  .page-title .breadcrumbs a { display: inline-block; padding: 6px 0; }
  .cart .cart-item .remove-btn { width: 44px; height: 44px; }
}

/* --- Carruseles a dos por fila -----------------------------------------
   sw_product_carousel() pasa de 1 a 2 productos por vista bajo 576px; con
   la mitad del ancho, la tarjeta se compacta. */
@media (max-width: 575.98px) {
  .product-carousel .product-card .product-body { padding: 10px; }
  .product-carousel .product-card .product-title { font-size: 13px; line-height: 1.3; }
  .product-carousel .product-card .product-price { font-size: 14px; }
  .product-carousel .product-card .cart-btn { width: 36px; height: 36px; }
  .product-carousel .product-card .badge-label { font-size: 10px; padding: 3px 7px; }
}

/* --- Foto del equipo en iniciar sesión / regístrate ----------------------
   El panel lateral con la foto se oculta bajo 992px (d-none d-lg-block),
   así que en celular no se veía. Esta franja la repone arriba del formulario. */
.login .syv-auth-foto-movil {
  height: 190px;
  background-image: url("../../img/tienda_new.jpg");
  background-size: cover;
  background-position: center 22%;
}

/* --- Compra desde el celular (14/10/2026) --------------------------------
   Recorrido real a 390px: carrito -> form_pago -> pago. */

/* Safari en iPhone acerca la página al tocar cualquier campo con letra menor
   de 16px, y ShopWise los pone en 14px (checkout, cupón, login, buscador).
   En el paso 1 de la compra la página saltaba de zoom en cada uno de los
   12 campos. */
@media (max-width: 991.98px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  select,
  textarea { font-size: 16px !important; }
}

@media (max-width: 767.98px) {
  /* Pasos de la compra: main.css esconde el nombre bajo 768px y quedaban
     tres círculos "1 2 3" sin decir qué es cada uno. */
  .checkout .step-indicator .step-text { display: inline; font-size: 12px; }
  .checkout .step-indicator .step-pill { padding: 6px 8px; gap: 5px; }
  .checkout .step-indicator .step-pill .step-num { width: 22px; height: 22px; font-size: 12px; }
  .checkout .step-indicator .step-connector { width: 10px; }

  /* El botón "subir" flota sobre las etiquetas de los formularios del
     carrito y del checkout (tapaba "Número de transferencia"). */
  body:has(section.checkout) .scroll-top,
  body:has(section.cart) .scroll-top { display: none !important; }

  /* Ficha: el nombre salía dos veces (título de página y tarjeta), y el
     precio y "Agregar al carrito" quedaban más de una pantalla abajo. Se
     deja la miga de pan y el nombre de la tarjeta. */
  body:has(.product-details) .page-title h1 { display: none; }
  body:has(.product-details) .page-title { padding-top: 12px; padding-bottom: 6px; }
  .product-details.section { padding-top: 20px; }
  .product-details .image-showcase .main-image-container { aspect-ratio: auto; height: 260px; }
}

/* En teléfonos de 320px los tres nombres no caben: queda solo el del paso actual. */
@media (max-width: 359.98px) {
  .checkout .step-indicator .step-pill:not(.active) .step-text { display: none; }
}