/* ==========================================================================
   La Casa del Pescador — hoja de estilos global (tema WordPress + WooCommerce)
   ========================================================================== */

:root {
  --verde-oscuro: #14251c;
  --verde-header: #1c2b20;
  --verde-medio: #33472f;
  --verde-boton: #2e4a2a;
  --verde-boton-hover: #23391f;
  --naranja: #e8621f;
  --naranja-hover: #cf5417;
  --crema: #f4f2ec;
  --crema-2: #ece9e0;
  --blanco: #ffffff;
  --texto: #1c1c1a;
  --texto-suave: #5a5a54;
  --borde: #ddd9cd;
  --ok: #2f7d3c;
  --alerta: #c0392b;
  --radius: 4px;
  --sombra: 0 4px 18px rgba(20, 37, 28, 0.12);
  --fuente: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fuente);
  color: var(--texto);
  background: var(--crema);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* ---------- Iconos SVG ---------- */
.icon { width: 1.15em; height: 1.15em; vertical-align: -0.2em; display: inline-block; flex-shrink: 0; }
.icon-star { width: 1em; height: 1em; vertical-align: -0.1em; }
.stars-svg { display: inline-flex; gap: 1px; color: #d99a1c; }
.stars-svg .star.empty { color: var(--borde); }
.badge .icon { width: 20px; height: 20px; }
.top-actions .icon .icon { width: 26px; height: 26px; }
.menu-toggle .icon { width: 24px; height: 24px; }
.fav-btn .icon, .card-actions .icon { width: 16px; height: 16px; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

.container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 32px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--naranja);
  color: #fff; padding: 10px 18px; z-index: 999; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Botones ---------- */
.btn, a.button, button.button, input.button, #respond input#submit,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  background: var(--verde-boton);
  color: #fff;
}
.btn-primary, .woocommerce a.button.checkout, .woocommerce #respond input#submit.alt,
.woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--naranja); color: #fff; }
.btn-primary:hover, .woocommerce a.button.alt:hover { background: var(--naranja-hover); }
.btn-dark, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.single_add_to_cart_button { background: var(--verde-boton); color: #fff; }
.btn-dark:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
.single_add_to_cart_button:hover { background: var(--verde-boton-hover); }
.btn-outline { background: transparent; border-color: currentColor; }
.btn-outline-light { background: transparent; border-color: rgba(255,255,255,0.7); color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,0.12); }
.btn-outline-dark { background: transparent; border-color: var(--verde-medio); color: var(--verde-boton); }
.btn-outline-dark:hover { background: rgba(46,74,42,0.08); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 0.85rem; }
.btn:disabled, .woocommerce a.button.disabled { opacity: 0.55; cursor: not-allowed; }

/* ==========================================================================
   TOPBAR / HEADER
   ========================================================================== */
.top-utility-bar { background: var(--verde-oscuro); color: #e7ebe2; padding: 8px 0; }
.top-utility-bar .container { display: flex; align-items: center; justify-content: center; }
.top-utility-bar .envio { font-size: 0.8rem; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
/* Avisos rotativos: se apilan en la misma celda y van entrando desde abajo */
.avisos-rotativos { display: grid; justify-items: center; overflow: hidden; height: 20px; }
.avisos-rotativos .aviso { grid-area: 1 / 1; opacity: 0; transform: translateY(100%); transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s ease; }
.avisos-rotativos .aviso.is-active { opacity: 1; transform: translateY(0); }
.avisos-rotativos .aviso.is-leaving { opacity: 0; transform: translateY(-100%); }
.avisos-rotativos .aviso strong { color: #fff; font-weight: 700; }
.avisos-rotativos .aviso .icon { color: var(--naranja); }
.avisos-rotativos .aviso .icon-whatsapp { color: #25d366; }
@media (prefers-reduced-motion: no-preference) {
  .avisos-rotativos .aviso-truck.is-active .icon { animation: camionRueda 1.6s ease-in-out infinite; }
}
@keyframes camionRueda { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } 55% { transform: translateX(3px) translateY(-1px); } 60% { transform: translateX(3px); } }

.topbar { background: var(--verde-header); color: #fff; padding: 14px 0; }
.topbar .container { display: flex; align-items: center; gap: 28px; }
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-badge { display: flex; align-items: center; justify-content: center; }
.logo img { height: 84px; width: auto; display: block; filter: brightness(0) invert(1); }
.logo img.logo-img-footer { height: 70px; }

.search-form { flex: 0 1 640px; max-width: 640px; margin: 0 auto; }
.search-form form { display: flex; background: #fff; border-radius: 3px; overflow: hidden; }
.search-form input { flex: 1; border: none; padding: 12px 16px; font-size: 0.95rem; outline: none; color: var(--texto); }
.search-form button { background: #fff; border: none; padding: 0 18px; color: var(--verde-boton); font-size: 1.1rem; }

.top-actions { display: flex; align-items: center; gap: 26px; flex-shrink: 0; }
.top-actions .action { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: #fff; line-height: 1.35; }
.top-actions .action .icon {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  align-self: center; line-height: 1; height: 32px; width: 32px;
}
.top-actions .action .label strong { display: block; font-size: 0.85rem; }
.top-actions .action .label strong a { color: inherit; }
.top-actions .action .label strong a:hover { text-decoration: underline; }
.badge {
  position: absolute; top: -8px; right: -9px; background: var(--naranja); color: #fff;
  font-size: 0.62rem; font-weight: 700; border-radius: 50%; width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.menu-toggle { display: none; background: transparent; border: none; color: #fff; font-size: 1.5rem; }

.mainnav { background: var(--verde-medio); color: #fff; position: relative; z-index: 20; }
.mainnav .container { display: flex; align-items: center; justify-content: center; gap: 20px; }
.mainnav ul.nav-links { display: flex; flex-wrap: wrap; justify-content: center; }
.mainnav ul.nav-links > li { position: relative; }
.mainnav ul.nav-links a { display: flex; align-items: center; gap: 4px; padding: 13px 16px; font-size: 0.88rem; font-weight: 600; white-space: nowrap; color: #fff; }
.mainnav ul.nav-links a:hover, .mainnav ul.nav-links li.current-menu-item > a { background: rgba(255,255,255,0.08); }
.mainnav ul.nav-links a.destacado { color: var(--naranja); }
.mainnav ul.nav-links a .icon { width: 12px; height: 12px; }

/* ---------- Desplegable de subcategorías (hover) ---------- */
.mainnav li.has-dropdown > .cat-dropdown {
  display: none; position: absolute; top: 100%; left: 0; min-width: 240px;
  background: #fff; color: var(--texto); border-radius: 0 0 4px 4px; box-shadow: var(--sombra);
  z-index: 30; padding: 6px 0;
}
.mainnav li.has-dropdown:hover > .cat-dropdown,
.mainnav li.has-dropdown:focus-within > .cat-dropdown {
  display: block;
}
.cat-flyout { list-style: none; margin: 0; padding: 0; min-width: 240px; }
.cat-flyout li { position: relative; }
/* Prefijo .mainnav ul.nav-links para ganar a ".mainnav ul.nav-links a" (texto blanco de la barra) */
.mainnav ul.nav-links .cat-flyout li a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 18px; font-size: 0.85rem; font-weight: 600; line-height: 1.3; color: var(--texto); white-space: nowrap;
}
.mainnav ul.nav-links .cat-flyout li a:hover { background: var(--crema-2); color: var(--verde-boton); }
.mainnav ul.nav-links .cat-flyout li a .icon { width: 13px; height: 13px; flex-shrink: 0; color: var(--texto-suave); }
.cat-flyout li.has-flyout > .cat-flyout {
  display: none; position: absolute; top: -6px; left: 100%;
  background: #fff; box-shadow: var(--sombra); border-radius: 4px; padding: 6px 0;
}
.cat-flyout li.has-flyout:hover > .cat-flyout,
.cat-flyout li.has-flyout:focus-within > .cat-flyout {
  display: block;
}

.breadcrumb, .woocommerce-breadcrumb { font-size: 0.82rem; color: var(--texto-suave); padding: 16px 0 0; }
.breadcrumb a:hover, .woocommerce-breadcrumb a:hover { text-decoration: underline; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; min-height: 420px; display: flex; align-items: center; color: #fff; background-size: cover; background-position: center; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,20,14,0.75) 0%, rgba(10,20,14,0.25) 55%, rgba(10,20,14,0.05) 100%); }
.hero .container { position: relative; z-index: 1; display: flex; justify-content: flex-end; }
.hero-card { background: rgba(15,25,18,0.86); padding: 40px; max-width: 480px; border-radius: 2px; }
.hero-card h1 { font-size: 2.1rem; line-height: 1.2; margin: 0 0 14px; }
.hero-card p { color: #dfe4da; margin: 0 0 20px; font-size: 0.98rem; }
.hero-card .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.hero-meta { display: flex; gap: 22px; font-size: 0.8rem; color: #cfd6c8; flex-wrap: wrap; }
.hero-meta span { display: flex; align-items: center; gap: 6px; }
.hero-left .container { justify-content: flex-start; }
.hero-left .hero-card { background: rgba(15,25,18,0.86); }
.hero-simple { min-height: 260px; }
.hero-simple .hero-card { max-width: 620px; background: transparent; padding: 0; }
.hero-simple .eyebrow, .contacto-hero .eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 0.78rem; color: var(--naranja); font-weight: 700; margin-bottom: 10px; }
.eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 0.78rem; color: var(--naranja); font-weight: 700; margin-bottom: 10px; display: block; }

/* ==========================================================================
   SECCIONES GENERALES
   ========================================================================== */
section { padding: 48px 0; }
.section-tight { padding: 32px 0; }
.section-title { font-size: 1.5rem; margin: 0 0 6px; }
.section-sub { color: var(--texto-suave); margin: 0 0 24px; font-size: 0.95rem; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.bg-crema2 { background: var(--crema-2); }
.bg-dark { background: var(--verde-oscuro); color: #fff; }
.bg-dark .section-sub { color: #c3cabc; }

.modalidades-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px; }
.modalidad-card { position: relative; aspect-ratio: 3/4; border-radius: 3px; overflow: hidden; background-size: cover; background-position: center; color: #fff; display: flex; align-items: flex-end; }
.modalidad-card::before { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.72) 100%); }
.modalidad-card span { position: relative; z-index: 1; padding: 12px 10px; font-weight: 800; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }
.modalidad-card:hover::before { background: linear-gradient(180deg, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.8) 100%); }
.modalidades-hint { text-align: center; color: var(--texto-suave); font-size: 0.9rem; margin-top: 14px; }

/* Producto exclusivo El Carpero */
.exclusiva-card { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; background: #fff; border: 1px solid var(--borde); border-radius: 4px; overflow: hidden; box-shadow: var(--sombra); }
.exclusiva-info { padding: 40px 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.exclusiva-badge { display: inline-flex; align-items: center; gap: 7px; background: #e30613; color: #fff; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; padding: 7px 14px; border-radius: 40px; }
.exclusiva-badge svg { width: 15px; height: 15px; }
.exclusiva-logo { height: 70px; width: auto; object-fit: contain; }
.exclusiva-info h2 { font-size: 1.9rem; line-height: 1.15; margin: 4px 0 0; }
.exclusiva-info p { color: var(--texto-suave); font-size: 0.98rem; line-height: 1.55; margin: 0; }
.exclusiva-info .btn { margin-top: 6px; }
.exclusiva-media { position: relative; min-height: 340px; background: #c9122a; }
.exclusiva-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 768px) {
  .exclusiva-card { grid-template-columns: 1fr; }
  .exclusiva-info { padding: 28px 24px; order: 2; }
  .exclusiva-info h2 { font-size: 1.5rem; }
  .exclusiva-media { order: 1; min-height: 240px; }
}

.triple-banner { display: grid; grid-template-columns: 0.85fr 2.6fr 0.85fr; gap: 0; background: #fff; border: 1px solid var(--borde); border-radius: 3px; overflow: hidden; }
.banner-panel { position: relative; background-size: cover; background-position: center; color: #fff; padding: 32px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; }
.banner-panel.dark::before { content:""; position:absolute; inset:0; background: rgba(10,18,12,0.62); }
.banner-panel > * { position: relative; z-index: 1; }
.banner-panel h3 { font-size: 1.5rem; margin: 0 0 10px; }
.banner-panel p { font-size: 0.9rem; color: #e4e8de; margin: 0 0 18px; }
.banner-panel .actions { display: flex; gap: 10px; flex-wrap: wrap; }

.product-panel { padding: 26px 20px; background: #fff; color: var(--texto); min-width: 0; }
.product-panel-head { display:flex; justify-content: space-between; align-items:flex-start; margin-bottom: 14px; }
.product-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--borde); margin-bottom: 16px; }
.product-tabs button { background:none; border:none; padding: 8px 0; font-weight:600; color: var(--texto-suave); border-bottom: 2px solid transparent; }
.product-tabs button.active { color: var(--texto); border-color: var(--naranja); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ==========================================================================
   FICHA DE PRODUCTO (réplica de mockups/FichaProducto.png)
   ========================================================================== */
.pdp { padding-top: 18px; }
.pdp-layout { display: grid; grid-template-columns: 76px minmax(0, 1.35fr) minmax(0, 1fr) 300px; gap: 24px; align-items: start; }

/* Galería */
.pdp-thumbs { display: flex; flex-direction: column; gap: 10px; }
.pdp-thumbs button { padding: 0; background: #fff; border: 1px solid var(--borde); border-radius: 6px; overflow: hidden; cursor: pointer; aspect-ratio: 1 / 1; transition: border-color .15s ease; }
.pdp-thumbs button:hover { border-color: var(--verde-medio); }
.pdp-thumbs button.active { border: 2px solid var(--verde-boton); }
.pdp-thumbs img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pdp-main-img { position: relative; background: #fff; border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 24px; }
.pdp-main-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pdp-nav-arrow { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--borde); background: #fff; color: var(--texto); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.pdp-nav-arrow:hover { background: var(--crema); }
.pdp-nav-arrow svg { width: 20px; height: 20px; }
.pdp-zoom { position: absolute; right: 16px; bottom: 16px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--texto); border-radius: 6px; }
.pdp-zoom:hover { background: var(--crema); }
.pdp-zoom svg { width: 20px; height: 20px; }

/* Información */
.pdp-info .marca { display: block; font-size: 0.82rem; font-weight: 800; letter-spacing: 1.2px; color: var(--verde-boton); text-transform: uppercase; margin-bottom: 6px; }
.pdp-info h1 { font-size: 1.65rem; line-height: 1.2; margin: 0 0 10px; }
.pdp-info .valoracion { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; margin-bottom: 14px; }
.pdp-info .valoracion a { color: var(--texto); }
.pdp-info .valoracion a:hover { text-decoration: underline; }
.pdp-tags { display: flex; gap: 6px; margin-bottom: 10px; }
.pdp-tags .tag { display: inline-block; padding: 5px 10px; border-radius: 3px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: #fff; background: var(--alerta); }
.pdp-tags .tag.exclusiva { background: var(--verde-oscuro); }
.pdp-info .precio-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 4px 0 14px; }
.pdp-info .descuento { background: var(--alerta); color: #fff; font-size: 0.8rem; font-weight: 800; padding: 3px 8px; border-radius: 3px; }
.pdp-info .precio-actual, .pdp-info .precio-actual .amount { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.pdp-info .precio-actual ins { text-decoration: none; }
.pdp-info .precio-actual del, .pdp-info .precio-actual del .amount { font-size: 1.05rem; font-weight: 500; color: var(--texto-suave); margin-left: 6px; }
.pdp-stock { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; color: var(--texto-suave); margin: 0; }
.pdp-stock::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex-shrink: 0; margin-right: 2px; }
.pdp-stock strong { font-weight: 700; color: var(--ok); }
.pdp-stock.bajo::before { background: #d99a1c; }
.pdp-stock.bajo strong { color: #b07a10; }
.pdp-stock.agotado::before { background: var(--alerta); }
.pdp-stock.agotado strong { color: var(--alerta); }
.pdp-mini-ventajas { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.pdp-mini-ventajas span { display: inline-flex; align-items: center; gap: 12px; font-size: 0.88rem; color: var(--texto); }
.pdp-mini-ventajas svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--texto); }

/* "Elige tu opción" (botones de variación) */
.pdp-opciones-wrap { margin-top: 24px; }
.pdp-opciones { margin-bottom: 12px; }
.pdp-opciones-label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 10px; }
.pdp-opciones-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-opciones-btns button { min-width: 72px; padding: 11px 18px; background: #fff; border: 1px solid var(--borde); border-radius: 4px; font-size: 0.88rem; font-weight: 600; color: var(--texto); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.pdp-opciones-btns button:hover { border-color: var(--verde-medio); }
.pdp-opciones-btns button.active { border: 2px solid var(--verde-boton); background: var(--crema); padding: 10px 17px; }
.pdp-opciones-btns button:disabled { opacity: 0.4; cursor: not-allowed; }
.pdp-opciones-hint { font-size: 0.75rem; color: var(--texto-suave); margin: 4px 0 0; }

/* Caja de compra */
.buy-box { background: #fff; border: 1px solid var(--borde); border-radius: 8px; padding: 22px; box-shadow: var(--sombra); }
.buy-box button.single_add_to_cart_button.button,
.buy-box button.single_add_to_cart_button.button.alt { width: 100%; min-height: 50px; border-radius: 6px; font-size: 1rem; font-weight: 700; background: var(--verde-boton); color: #fff; }
.buy-box button.single_add_to_cart_button.button:hover { background: var(--verde-boton-hover); }
.buy-box button.single_add_to_cart_button::before { content: ""; width: 22px; height: 22px; flex-shrink: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Etiqueta "Cantidad" sobre el selector −/+ */
.buy-box .cantidad-selector { position: relative; margin-top: 26px; }
.buy-box .cantidad-selector::before { content: "Cantidad"; position: absolute; left: 0; top: -26px; font-size: 0.9rem; font-weight: 600; color: var(--texto); white-space: nowrap; }
/* Con botones "Elige tu opción" en la info, el select y el precio duplicado se ocultan */
.buy-box.has-swatches table.variations,
.buy-box.has-swatches .woocommerce-variation-price { display: none; }
.buy-box .pdp-fav { margin-top: 10px; min-height: 48px; border-radius: 6px; border-color: var(--verde-boton); color: var(--texto); font-weight: 600; }
.buy-box .pdp-fav svg { width: 20px; height: 20px; }
.buy-box .pdp-fav.active { background: var(--crema); }
.buy-box .pdp-fav.active svg { fill: var(--alerta); color: var(--alerta); }

/* Parte inferior */
.pdp-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; margin-top: 40px; align-items: start; }
.pdp-content { grid-column: 1; grid-row: 1; background: #fff; border: 1px solid var(--borde); border-radius: 8px; padding: 0 26px 26px; }
.pdp-reviews-card { grid-column: 2; grid-row: 1 / span 2; background: #fff; border: 1px solid var(--borde); border-radius: 8px; padding: 24px; }
.pdp-bottom .ventajas-mini { grid-column: 1; grid-row: 2; }
.pdp-related { grid-column: 1; grid-row: 3; }
.pdp-bottom .banner-guias-lateral { grid-column: 2; grid-row: 3; align-self: stretch; margin: 0; border-radius: 8px; min-height: 220px; }
.pdp-bottom .banner-guias-lateral h3 { margin: 0 0 8px; font-size: 1.35rem; }
.pdp-bottom .banner-guias-lateral p { margin: 0 0 14px; color: #dfe4da; font-size: 0.9rem; }
.pdp-bottom .banner-guias-lateral .btn { width: fit-content; }

/* Pestañas */
.pdp-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--borde); margin: 0 -26px 22px; padding: 0 12px; }
.pdp-tabs button { appearance: none; -webkit-appearance: none; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 15px 14px; font-size: 0.9rem; font-weight: 700; color: var(--texto-suave); cursor: pointer; transition: color .15s ease, border-color .15s ease; }
.pdp-tabs button:hover { color: var(--texto); }
.pdp-tabs button.active { color: var(--verde-oscuro); border-bottom-color: var(--verde-boton); }
.tab-panel > h2 { font-size: 1.2rem; margin: 0 0 10px; }
.pdp-descripcion { color: var(--texto-suave); max-width: 75ch; line-height: 1.6; }
.pdp-descripcion p:last-child { margin-bottom: 0; }

/* Franja de ventajas */
.ventajas-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; background: var(--crema-2); border-radius: 8px; padding: 20px 22px; }
.ventajas-mini .ventaja { display: flex; gap: 14px; align-items: flex-start; }
.ventajas-mini .ventaja + .ventaja { border-left: 1px solid var(--borde); padding-left: 18px; }
.ventajas-mini .ventaja .ico { display: inline-flex; flex: 0 0 auto; color: var(--texto); font-size: 0; padding-top: 2px; }
.ventajas-mini .ventaja .ico svg { width: 30px; height: 30px; stroke-width: 1.5; }
.ventajas-mini .ventaja h4 { margin: 0 0 3px; font-size: 0.86rem; }
.ventajas-mini .ventaja p { margin: 0; font-size: 0.78rem; color: var(--texto-suave); line-height: 1.4; }

/* Tabla de especificaciones */
.especs-tabla { width: 100%; max-width: 580px; border-collapse: collapse; font-size: 0.92rem; border: 1px solid var(--borde); border-radius: 6px; overflow: hidden; }
.especs-tabla td { padding: 12px 16px; vertical-align: top; }
.especs-tabla td:first-child { font-weight: 700; color: var(--texto); width: 38%; }
.especs-tabla td:last-child { color: var(--texto-suave); }
.especs-tabla tr:nth-child(odd) { background: var(--crema); }
.especs-tabla tr + tr td { border-top: 1px solid var(--borde); }

/* Tarjeta "Lo que dicen otros pescadores" */
.pdp-reviews-card h3 { font-size: 1.15rem; margin: 0 0 16px; }
.resumen-valoraciones { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: start; margin: 0 0 22px; }
.resumen-nota .num { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.resumen-nota .sobre { font-size: 1rem; font-weight: 600; color: var(--texto-suave); }
.resumen-nota .stars { margin: 8px 0 6px; }
.resumen-nota p { margin: 0; font-size: 0.78rem; color: var(--texto-suave); line-height: 1.4; }
.barra-rating { display: flex; align-items: center; gap: 8px; margin: 0 0 7px; font-size: 0.78rem; color: var(--texto-suave); }
.barra-rating > span:first-child { flex: 0 0 26px; font-weight: 700; color: var(--texto); white-space: nowrap; }
.barra-rating > span:last-child { flex: 0 0 34px; text-align: right; font-variant-numeric: tabular-nums; }
.barra-rating .bar { flex: 1; height: 7px; background: var(--crema-2); border-radius: 20px; overflow: hidden; }
.barra-rating .bar > span { display: block; height: 100%; background: var(--naranja); border-radius: 20px; }

/* Completa tu equipo (tarjetas compactas horizontales) */
.completa-tu-equipo-head { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 14px; }
.completa-tu-equipo-head h2 { font-size: 1.25rem; margin: 0; }
.completa-tu-equipo-head a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 0.88rem; }
.completa-tu-equipo-head svg { width: 14px; height: 14px; }
.pdp-related .grid-productos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pdp-related .product-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; align-content: start; padding: 12px; border-radius: 8px; }
.pdp-related .product-card .thumb { grid-column: 1; grid-row: 1 / span 4; width: 72px; margin: 0; }
.pdp-related .product-card > :not(.thumb) { grid-column: 2; }
.pdp-related .product-card .tags-wrap,
.pdp-related .product-card .stock,
.pdp-related .product-card .card-actions { display: none; }
.pdp-related .product-card .nombre { font-size: 0.8rem; line-height: 1.3; margin: 2px 0 4px; }
.pdp-related .product-card .precio-row { font-size: 0.95rem; margin: 2px 0 0; }

@media (max-width: 1300px) {
  .pdp-layout { grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1fr); }
  .pdp-layout .buy-box-wrap { grid-column: 2 / -1; }
  .pdp-bottom { grid-template-columns: minmax(0, 1fr) 340px; }
  .pdp-related .grid-productos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ventajas-mini { grid-template-columns: repeat(2, 1fr); }
  .ventajas-mini .ventaja + .ventaja { border-left: 0; padding-left: 0; }
}
@media (max-width: 900px) {
  .pdp-layout { grid-template-columns: 1fr; }
  .pdp-layout .buy-box-wrap { grid-column: auto; order: 4; }
  .pdp-thumbs { flex-direction: row; overflow-x: auto; order: 2; }
  .pdp-thumbs button { flex: 0 0 70px; }
  .pdp-main-img { order: 1; }
  .pdp-info { order: 3; }
  .pdp-bottom { grid-template-columns: 1fr; }
  .pdp-bottom > * { grid-column: auto !important; grid-row: auto !important; }
}
@media (max-width: 560px) {
  .pdp-content { padding: 0 16px 20px; }
  .pdp-tabs { margin: 0 -16px 18px; padding: 0; overflow-x: auto; flex-wrap: nowrap; }
  .pdp-tabs button { white-space: nowrap; padding: 13px 12px; }
  .ventajas-mini, .pdp-related .grid-productos { grid-template-columns: 1fr; }
  .resumen-valoraciones { grid-template-columns: 1fr; }
}

.product-carousel-wrap { position: relative; }
.product-carousel-wrap::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 6px; width: 44px;
  background: linear-gradient(to right, rgba(255,255,255,0), #fff); pointer-events: none;
}
.product-carousel-wrap.at-end::after { opacity: 0; }
.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid var(--borde);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 10px rgba(20,37,28,0.18); color: var(--texto);
}
.carousel-arrow.prev { left: -6px; }
.carousel-arrow.next { right: -6px; }
.carousel-arrow[hidden] { display: none; }
.product-carousel { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.product-carousel::-webkit-scrollbar { height: 6px; }
.product-carousel::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 4px; }

/* ---------- Tarjeta de producto (grid + carrusel) ---------- */
.product-card, ul.products li.product {
  background: #fff; border: 1px solid var(--borde); border-radius: 3px; padding: 14px;
  position: relative; display: flex; flex-direction: column; scroll-snap-align: start;
}
.product-carousel .product-card { flex: 0 0 165px; width: 165px; }
.grid-productos, ul.products {
  display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 18px;
  list-style: none; margin: 0; padding: 0;
}
.product-card .tags-wrap {
  position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.product-card .tag, ul.products li.product .tag,
.product-card .onsale, ul.products li.product .onsale {
  background: var(--naranja); color: #fff; font-size: 0.65rem; font-weight: 800;
  padding: 3px 8px; border-radius: 2px; letter-spacing: 0.5px; margin: 0;
}
.product-card .tags-wrap .tag { position: static; }
.tag.exclusiva { background: var(--verde-oscuro); }
.product-card .thumb, ul.products li.product a { aspect-ratio: 1/1; border-radius: 2px; overflow: hidden; margin-bottom: 10px; background: var(--crema-2); display: block; width: 100%; }
.product-card .thumb img, ul.products li.product a img { width: 100%; height: 100%; object-fit: cover; }
.product-card .marca { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.5px; color: var(--texto-suave); text-transform: uppercase; }
.product-card .nombre, ul.products li.product h2, ul.products li.product .woocommerce-loop-product__title { font-size: 0.9rem; font-weight: 600; margin: 3px 0 6px; }
.product-card .nombre a:hover { text-decoration: underline; }
.stars, .star-rating { color: #d99a1c; font-size: 0.8rem; letter-spacing: 1px; }
.star-rating { overflow: hidden; position: relative; height: 1em; line-height: 1em; width: 5.4em; font-family: serif; }
.star-rating::before { content: "☆☆☆☆☆"; float: left; top: 0; left: 0; position: absolute; }
.star-rating span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em; }
.star-rating span::before { content: "★★★★★"; top: 0; position: absolute; left: 0; }
.stars .count { color: var(--texto-suave); font-weight: 400; margin-left: 4px; }
.precio-row, .price { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 4px; font-size: 1.15rem; font-weight: 800; }
.price ins { text-decoration: none; }
.price del { text-decoration: line-through; color: var(--texto-suave); font-size: 0.85rem; font-weight: 400; order: 2; }
.precio { font-size: 1.15rem; font-weight: 800; }
.precio-antes { text-decoration: line-through; color: var(--texto-suave); font-size: 0.85rem; }
.stock, p.stock { font-size: 0.78rem; display: flex; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--texto); }
.stock::before, p.stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.stock.bajo::before { background: #d99a1c; }
.stock.agotado::before, p.stock.out-of-stock::before { background: var(--alerta); }

.card-actions { margin-top: auto; display: flex; gap: 8px; }
.card-actions .btn, .card-actions a.button { flex: 1; padding: 10px; font-size: 0.85rem; text-align: center; }
.fav-btn { flex: 0 0 auto !important; width: 40px; padding: 0 !important; border: 1px solid var(--borde); background: #fff !important; color: var(--texto) !important; }
.fav-btn.active { color: var(--naranja) !important; border-color: var(--naranja); }

.ventajas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; background: var(--crema-2); padding: 28px; border-radius: 3px; }
.ventaja { display: flex; gap: 14px; align-items: flex-start; }
.ventaja .ico { font-size: 1.7rem; }
.ventaja h4 { margin: 0 0 4px; font-size: 0.98rem; }
.ventaja p { margin: 0; font-size: 0.85rem; color: var(--texto-suave); }

.guias-preview { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
.guia-card { background: var(--verde-oscuro); color: #fff; border-radius: 3px; overflow: hidden; display: flex; flex-direction: column; }
.guia-card .img { aspect-ratio: 16/10; background-size: cover; background-position: center; }
.guia-card .body { padding: 20px; }
.guia-card .tag-cat { display:inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--naranja); margin-bottom: 8px; }
.guia-card h3 { font-size: 1.05rem; margin: 0 0 6px; }
.guia-card p { font-size: 0.85rem; color: #cfd6c8; margin: 0 0 10px; }
.guia-card a.leer { color: #fff; font-weight: 600; font-size: 0.85rem; }

.tienda-strip { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; align-items: stretch; background: var(--verde-oscuro); border-radius: 3px; overflow:hidden;}
.tienda-strip .txt { padding: 30px; color: #fff; }
.tienda-strip .txt h4 { font-size: 1.2rem; margin: 0 0 8px; }
.tienda-strip .txt p { font-size: 0.85rem; color: #c3cabc; margin: 0 0 16px; }
.tienda-strip .foto { background-size: cover; background-position: center; min-height: 220px; }
.tienda-strip .actions { display:flex; gap: 10px; flex-wrap: wrap; }

.cta-final { position: relative; background-size: cover; background-position: center; color: #fff; padding: 44px 0; }
.cta-final::before { content:""; position:absolute; inset:0; background: rgba(8,16,10,0.72); }
.cta-final .container { position: relative; z-index: 1; display:flex; align-items:center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-final h2 { margin: 0 0 6px; font-size: 1.5rem; }
.cta-final p { margin: 0; color: #dfe4da; font-size: 0.9rem; }
.cta-final .actions { display:flex; gap: 12px; flex-wrap: wrap; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer.site-footer { background: var(--verde-oscuro); color: #cfd6c8; padding: 46px 0 20px; font-size: 0.85rem; }
.footer-top { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; flex: 1; }
.footer-cols h5 { color: #fff; font-size: 0.85rem; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.footer-cols li { margin-bottom: 8px; }
.footer-cols a:hover { color: #fff; text-decoration: underline; }
.footer-social { display: flex; gap: 12px; margin-top: 12px; }
.footer-social a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #46543f; display: flex; align-items: center; justify-content: center; }
.footer-social a:hover { background: rgba(255,255,255,0.08); }
.icon-whatsapp { stroke: none; } /* icono relleno: sin contorno */
/* Pie inferior en tres zonas: © a la izquierda, crédito en el centro, enlaces legales a la derecha */
.footer-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px 24px; }
.footer-copy { margin: 0; font-size: 0.8rem; color: #9fab97; justify-self: start; }
.footer-bottom .legal-links { justify-self: end; }
.footer-bottom .legal-links a:hover { color: #fff; }
.footer-credito { margin: 0; font-size: 0.8rem; color: #9fab97; justify-self: center; text-align: center; }
@media (max-width: 760px) { .footer-bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; } .footer-copy, .footer-bottom .legal-links { justify-self: center; justify-content: center; } .footer-credito { order: 3; } }
.footer-credito a { color: #fff; font-weight: 700; transition: color .2s; }
.footer-credito a:hover { color: var(--naranja); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid #2a3a26; padding-top: 20px; }
.footer-badges { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.footer-badges .badge-item { display: flex; gap: 8px; align-items: center; }
.legal-links { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.8rem; color: #9fab97; }

/* ==========================================================================
   PLP / CATALOGO (WooCommerce archive)
   ========================================================================== */
.plp-layout { display: grid; grid-template-columns: 270px 1fr; gap: 30px; align-items: start; }
.filtros { background: #fff; border: 1px solid var(--borde); border-radius: 3px; padding: 20px; position: sticky; top: 20px; }
.filtros h3 { font-size: 0.95rem; margin: 0 0 14px; text-transform: uppercase; letter-spacing: 0.5px; }
.filtro-grupo { border-bottom: 1px solid var(--borde); padding: 14px 0; }
.filtro-grupo:first-of-type { padding-top: 0; }
.filtro-grupo summary { font-weight: 700; font-size: 0.88rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.filtro-grupo summary::-webkit-details-marker { display: none; }
.filtro-grupo summary::after { content: "▾"; font-size: 0.7rem; color: var(--texto-suave); }
.filtro-grupo[open] summary::after { content: "▴"; }
.filtro-opcion { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; margin: 8px 0; }
.buscar-marca { width: 100%; padding: 7px 10px; border: 1px solid var(--borde); border-radius: 3px; margin-bottom: 8px; font-size: 0.82rem; }
.chips-activos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.chip { background: #fff; border: 1px solid var(--borde); border-radius: 20px; padding: 6px 12px; font-size: 0.8rem; display: flex; align-items: center; gap: 8px; }
.chip a, .chip button { background: none; border: none; font-weight: 700; color: var(--texto); }
/* Widgets nativos de WooCommerce dentro de los filtros facetados */
.filtro-grupo .widget_layered_nav ul, .filtro-grupo .widget_rating_filter ul { list-style: none; padding: 0; margin: 8px 0 0; }
.filtro-grupo .widget_layered_nav li, .filtro-grupo .widget_rating_filter li { margin-bottom: 8px; font-size: 0.85rem; }
.filtro-grupo .widget_layered_nav li a, .filtro-grupo .widget_rating_filter li a { display: flex; justify-content: space-between; }
.filtro-grupo .widget_layered_nav li.chosen a::before { content: "✓ "; }
.price_slider { margin-bottom: 14px; }
.price_slider_amount { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; margin-top: 10px; }
.price_slider_amount .button { padding: 6px 12px; font-size: 0.78rem; }
.ui-slider { position: relative; height: 4px; background: var(--borde); border-radius: 4px; margin: 10px 4px; }
.ui-slider .ui-slider-range { position: absolute; height: 100%; background: var(--verde-boton); border-radius: 4px; }
.ui-slider .ui-slider-handle { position: absolute; width: 14px; height: 14px; background: var(--verde-boton); border-radius: 50%; top: -5px; cursor: pointer; margin-left: -7px; }

.plp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.plp-title h1 { font-size: 2rem; margin: 8px 0 8px; }
.plp-title p { color: var(--texto-suave); max-width: 60ch; font-size: 0.92rem; margin: 0; }
.plp-hero-img { width: 320px; max-width: 100%; border-radius: 3px; overflow: hidden; }
.plp-hero-img img { height: 180px; object-fit: cover; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.toolbar .woocommerce-result-count { font-size: 0.85rem; color: var(--texto-suave); margin: 0; }
.toolbar select { padding: 8px 12px; border: 1px solid var(--borde); border-radius: 3px; background: #fff; }
.paginacion { text-align: center; margin-top: 30px; }
.woocommerce-pagination ul { display: inline-flex; gap: 6px; }
.woocommerce-pagination a, .woocommerce-pagination span.current { padding: 8px 14px; border: 1px solid var(--borde); border-radius: 3px; display: inline-block; }
.woocommerce-pagination span.current { background: var(--verde-boton); color: #fff; border-color: var(--verde-boton); }

.wc-free-shipping-notice { background: var(--crema-2); border-left: 4px solid var(--naranja); padding: 12px 18px; border-radius: 3px; margin-bottom: 20px; font-size: 0.9rem; }
.wc-free-shipping-notice.ok { border-color: var(--ok); }

.completa-equipo { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.completa-equipo a { position: relative; border-radius: 3px; overflow: hidden; aspect-ratio: 4/3; color: #fff; display: flex; align-items: flex-end; padding: 14px; font-weight: 700; font-size: 0.85rem; background-size: cover; background-position: center; }
.completa-equipo a::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.7) 100%); }
.completa-equipo a span { position: relative; z-index: 1; }

/* ==========================================================================
   FICHA DE PRODUCTO (WooCommerce single-product por defecto, reestilizado)
   ========================================================================== */
.woocommerce div.product {
  display: grid; grid-template-columns: 1fr 420px; gap: 40px; align-items: start; margin-top: 24px;
}
.woocommerce div.product .woocommerce-product-gallery { border: 1px solid var(--borde); border-radius: 3px; overflow: hidden; background: #fff; }
.woocommerce div.product .woocommerce-product-gallery__image img { width: 100%; height: auto; object-fit: cover; }
.woocommerce div.product .flex-control-thumbs { display: flex; gap: 8px; padding: 8px; list-style: none; margin: 0; }
.woocommerce div.product .flex-control-thumbs li { width: 70px; }
.woocommerce div.product .flex-control-thumbs img { border: 1px solid var(--borde); border-radius: 3px; cursor: pointer; }

.woocommerce div.product .product_title { font-size: 1.7rem; margin: 0 0 8px; }
.woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 1.9rem; font-weight: 800; display: block; margin-bottom: 8px; }
.woocommerce div.product .woocommerce-product-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 0.9rem; }
.woocommerce div.product form.cart { border: 1px solid var(--borde); border-radius: 3px; padding: 22px; background: #fff; margin-top: 18px; }
.woocommerce div.product form.cart .quantity { display: inline-flex; align-items: center; border: 1px solid var(--borde); border-radius: 3px; margin-right: 10px; }
.woocommerce div.product form.cart .quantity input.qty { width: 50px; border: none; text-align: center; font-weight: 700; padding: 10px 0; }
.woocommerce div.product table.variations { width: 100%; margin-bottom: 16px; }
.woocommerce div.product table.variations td { padding: 6px 0; }
.woocommerce div.product table.variations select { width: 100%; padding: 10px; border: 1px solid var(--borde); border-radius: 3px; }
.woocommerce div.product .woocommerce-variation-price { font-weight: 700; margin: 10px 0; }
.woocommerce div.product .stock { font-size: 0.85rem; margin: 10px 0; }
.woocommerce div.product .stock.out-of-stock { color: var(--alerta); }

/* Misma UI pero sin depender del wrapper "div.product" (nuestro single-product.php lo evita) */
.buy-box form.cart {
  margin: 0; display: flex; flex-direction: column; align-items: stretch; gap: 14px;
}
.buy-box table.variations { width: 100%; margin: 0 0 4px; border-collapse: collapse; }
.buy-box table.variations tbody, .buy-box table.variations tr { display: block; }
.buy-box table.variations tr { display: flex; align-items: center; gap: 14px; padding: 4px 0; }
.buy-box table.variations td { padding: 0; }
.buy-box table.variations td.label { flex: 0 0 90px; }
.buy-box table.variations td.value { flex: 1; min-width: 0; }
.buy-box table.variations label { font-weight: 700; font-size: 0.85rem; margin: 0; display: block; }
.buy-box table.variations select { width: 100%; padding: 11px 12px; border: 1px solid var(--borde); border-radius: 4px; background: #fff; font-size: 0.9rem; cursor: pointer; }
.buy-box table.variations select:focus { outline: none; border-color: var(--verde-boton); box-shadow: 0 0 0 3px rgba(20,37,28,0.08); }
.buy-box .reset_variations { margin-top: 4px; }
.buy-box .woocommerce-variation-price { font-weight: 700; margin: 0; }
.buy-box .woocommerce-variation-availability { margin: 0; }
.buy-box .woocommerce-variation-availability p.stock { margin: 0; }
.buy-box .reset_variations { display: inline-block; font-size: 0.8rem; color: var(--texto-suave); }
.buy-box .single_variation_wrap { margin: 0; display: flex; flex-direction: column; gap: 14px; }

/* Selector de cantidad (−/+), generado por woocommerce/global/quantity-input.php */
.cantidad-selector { display: flex; align-items: center; gap: 0; border: 1px solid var(--borde); border-radius: 3px; width: fit-content; }
.cantidad-selector button { width: 38px; height: 38px; background: #fff; border: none; font-size: 1.1rem; color: var(--texto); }
.cantidad-selector button:hover { background: var(--crema-2); }
.cantidad-selector input.qty { width: 44px; height: 38px; border: none; border-left: 1px solid var(--borde); border-right: 1px solid var(--borde); text-align: center; font-weight: 700; -moz-appearance: textfield; }
.cantidad-selector input.qty::-webkit-outer-spin-button,
.cantidad-selector input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buy-box .single_add_to_cart_button { width: 100%; margin: 0; }

.buy-box-info { list-style: none; padding: 18px 0 0; margin: 18px 0 0; border-top: 1px solid var(--borde); display: flex; flex-direction: column; gap: 14px; font-size: 0.85rem; }
.buy-box-info li { display: flex; gap: 10px; align-items: flex-start; }
.buy-box-info li svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; color: var(--texto-suave); }
.buy-box-info strong { display: block; line-height: 1.3; }
.buy-box-info span.sub { display: block; color: var(--texto-suave); }

.woocommerce-tabs { margin: 40px 0 24px; grid-column: 1 / -1; }
.woocommerce-tabs ul.tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--borde); list-style: none; padding: 0; margin: 0 0 24px; }
.woocommerce-tabs ul.tabs li { padding: 0; }
.woocommerce-tabs ul.tabs li a { display: block; padding: 10px 0; font-weight: 700; color: var(--texto-suave); }
.woocommerce-tabs ul.tabs li.active a { color: var(--texto); border-bottom: 2px solid var(--naranja); }
.woocommerce-tabs .panel { max-width: 900px; }

.woocommerce-Reviews #comments ol.commentlist { list-style: none; padding: 0; margin: 20px 0; }
.woocommerce-Reviews .comment_container { display: flex; gap: 14px; border-bottom: 1px solid var(--borde); padding: 16px 0; }
.woocommerce-Reviews .comment-text { flex: 1; }
.woocommerce-Reviews .comment-form-rating select { padding: 8px; border: 1px solid var(--borde); border-radius: 3px; }
.woocommerce-Reviews .comment-form p label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.88rem; }
.woocommerce-Reviews .comment-form input, .woocommerce-Reviews .comment-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 3px; }
.woocommerce-Reviews .comment-form input[type="checkbox"] { width: auto; }
.woocommerce-Reviews .comment-form-rating label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.88rem; }

/* Selector de estrellas interactivo (sustituye al texto "1 de 5 estrellas…") */
p.stars { display: inline-flex; margin: 2px 0 16px; line-height: 1; }
p.stars a { position: relative; width: 1.5em; height: 1.5em; display: inline-block; text-indent: -9999px; text-decoration: none; font-size: 1.4rem; color: #e6b800; }
p.stars a::before { content: "\2606"; position: absolute; left: 0; top: 0; width: 100%; text-align: center; text-indent: 0; }
p.stars:hover a::before { content: "\2605"; }
p.stars a:hover ~ a::before { content: "\2606"; }
p.stars.selected a.active::before { content: "\2605"; }
p.stars.selected a.active ~ a::before { content: "\2606"; }
p.stars.selected a:not(.active)::before { content: "\2605"; }

.related.products, .up-sells.upsells.products, .cross-sells { grid-column: 1 / -1; margin-top: 20px; }
.related.products h2, .up-sells h2, .cross-sells h2 { font-size: 1.3rem; margin-bottom: 16px; }

.banner-guias-lateral { position: relative; border-radius: 3px; overflow: hidden; color: #fff; padding: 24px; min-height: 160px; display: flex; flex-direction: column; justify-content: flex-end; background-size: cover; background-position: center; margin-top: 20px; }
.banner-guias-lateral::before { content:""; position:absolute; inset:0; background: rgba(10,18,12,0.6); }
.banner-guias-lateral > * { position: relative; z-index: 1; }

/* ==========================================================================
   CARRITO / CHECKOUT / MI CUENTA (WooCommerce por defecto)
   ========================================================================== */
.woocommerce table.shop_table { width: 100%; border-collapse: collapse; margin: 20px 0; background: #fff; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 14px; border-bottom: 1px solid var(--borde); text-align: left; }
.woocommerce table.shop_table img { width: 64px; border-radius: 3px; }
.woocommerce .cart-collaterals .cart_totals { background: #fff; border: 1px solid var(--borde); border-radius: 3px; padding: 20px; max-width: 420px; margin-left: auto; }
.woocommerce form .form-row { margin-bottom: 14px; }
.woocommerce form .form-row label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; }
.woocommerce form .form-row input:not([type="checkbox"]):not([type="radio"]),
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--borde); border-radius: 3px; font-family: inherit;
}
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox {
  display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer;
}
.woocommerce form .form-row input[type="checkbox"],
.woocommerce form .form-row input[type="radio"] {
  width: auto; height: auto; margin: 0;
}
.woocommerce-form-login .form-row.woocommerce-form-row--first,
.woocommerce-form-login .form-row.woocommerce-form-row--last { display: block; }
.woocommerce-form-login .lost_password { margin-top: 12px; }

/* Mi cuenta: mostrar solo login o solo registro, nunca los dos a la vez */
#customer_login .u-column2.col-2 { display: none; }
#customer_login.show-register .u-column1.col-1 { display: none; }
#customer_login.show-register .u-column2.col-2 { display: block; }
.lcp-account-switch { margin: 16px 0 0; font-size: 0.88rem; color: var(--texto-suave); }
.lcp-account-switch a { font-weight: 700; color: var(--verde-boton); cursor: pointer; }
.lcp-account-switch a:hover { text-decoration: underline; }

/* Botón nativo de mostrar contraseña de WP/WooCommerce: depende de dashicons
   (no cargado en el front-end) y queda roto/aplastado. Lo ocultamos y usamos
   el nuestro (lcp-pwd-toggle, ver js/main.js). */
.wp-hide-pw, .show-password-input { display: none !important; }
.lcp-pwd-wrap { position: relative; }
.lcp-pwd-wrap input[type="password"], .lcp-pwd-wrap input[type="text"] { padding-right: 42px !important; }
.lcp-pwd-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  background: none !important; border: none !important; padding: 4px !important; width: auto !important;
  display: flex; align-items: center; justify-content: center; color: var(--texto-suave); cursor: pointer;
}
.lcp-pwd-toggle:hover { color: var(--texto); }
.woocommerce-checkout #payment { background: var(--crema-2); border-radius: 3px; padding: 20px; margin-top: 20px; }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; }
.woocommerce-MyAccount-navigation li { margin-bottom: 8px; }
.woocommerce-MyAccount-navigation li a { padding: 10px 14px; display: block; background: #fff; border: 1px solid var(--borde); border-radius: 3px; }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--verde-boton); color: #fff; border-color: var(--verde-boton); }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
  background: var(--crema-2); border-left: 4px solid var(--verde-boton); padding: 14px 18px; border-radius: 3px; list-style: none; margin: 0 0 20px;
}
.woocommerce-error { border-color: var(--alerta); }

/* ==========================================================================
   GUIAS
   ========================================================================== */
/* ==========================================================================
   GUÍAS DE PESCA (réplica de mockups/GuiaDePesca.png)
   ========================================================================== */
.guias-hero { display: grid; grid-template-columns: 1.5fr 1fr; min-height: 340px; background: var(--crema); }
.guias-hero .foto { background-size: cover; background-position: center; min-height: 260px; }
.guias-hero .txt { padding: 44px 48px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.guias-hero .eyebrow { color: var(--texto-suave); letter-spacing: 1px; font-size: 0.74rem; font-weight: 500; margin-bottom: 18px; }
.guias-hero h1 { font-size: 2.35rem; line-height: 1.13; margin: 0 0 16px; }
.guias-hero p { color: var(--texto-suave); font-size: 0.98rem; line-height: 1.5; margin: 0 0 24px; max-width: 46ch; }
.guias-hero .btn { background: var(--verde-oscuro); border-radius: 4px; min-height: 44px; }
.guias-hero .btn:hover { background: var(--verde-boton-hover); }

.guias-listado { padding: 22px 0 18px; }
.tabs-modalidad { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 0 0 22px; }
.tabs-modalidad button { background: transparent; border: 1px solid var(--borde); padding: 9px 30px; border-radius: 30px; font-weight: 500; font-size: 0.85rem; color: var(--texto); cursor: pointer; transition: background .15s ease, color .15s ease; }
.tabs-modalidad button:hover { background: #fff; }
.tabs-modalidad button.active { background: var(--verde-oscuro); color: #fff; border-color: var(--verde-oscuro); }

.guias-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-auto-rows: minmax(150px, auto); gap: 14px; }
.guia-tile { position: relative; overflow: hidden; border-radius: 6px; padding: 22px 24px; color: #fff; background-color: var(--verde-oscuro); background-size: cover; background-position: center; display: flex; flex-direction: column; align-items: flex-start; min-height: 150px; transition: transform .2s ease; }
.guia-tile:hover { transform: translateY(-2px); }
.guia-tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,14,10,0.9) 0%, rgba(8,14,10,0.62) 52%, rgba(8,14,10,0.25) 100%); }
.guia-tile > * { position: relative; z-index: 1; }
.guia-tile.grande { grid-row: span 2; padding: 26px 30px 28px; }
.guia-tile .tag-cat { background: #2f4a2c; color: #fff; padding: 5px 10px; border-radius: 5px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; margin: 0 0 10px; }
.guia-tile h3 { font-size: 1.08rem; line-height: 1.25; margin: 0; max-width: 24ch; }
.guia-tile.grande h3 { font-size: 1.7rem; line-height: 1.18; max-width: 18ch; margin-bottom: 14px; }
.guia-tile p { display: none; font-size: 0.92rem; line-height: 1.5; color: #d5dbcd; margin: 0 0 16px; max-width: 34ch; }
.guia-tile.grande p { display: block; margin-top: auto; }
.guia-tile .leer { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 0.85rem; }
.guia-tile .leer svg { width: 16px; height: 16px; }

.guias-bloque { padding: 0 0 14px; }
.guias-material { display: flex; align-items: center; gap: 18px; background: var(--crema-2); border-radius: 8px; padding: 18px 22px; }
.guias-material .ico-circle { background: transparent; color: var(--texto); border: 1px solid var(--borde); width: 64px; height: 64px; }
.guias-material .intro { flex: 0 0 300px; }
.guias-material h2 { font-size: 1.08rem; margin: 0 0 4px; }
.guias-material p { margin: 0 0 12px; font-size: 0.8rem; color: var(--texto-suave); line-height: 1.4; }
.guias-material .btn { background: var(--verde-oscuro); border-radius: 4px; min-height: 40px; padding: 9px 20px; font-size: 0.85rem; }
.guias-material .flecha { flex: 0 0 auto; width: 28px; height: 36px; background: none; border: 0; color: var(--texto); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.guias-material .flecha svg { width: 18px; height: 18px; }
.guias-material .tira { flex: 1; min-width: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.guias-material .tira::-webkit-scrollbar { display: none; }
.guias-material .item { flex: 0 0 150px; scroll-snap-align: start; padding: 0 12px; display: flex; flex-direction: column; gap: 4px; font-size: 0.72rem; color: var(--texto); }
.guias-material .item + .item { border-left: 1px solid var(--borde); }
.guias-material .item .img { height: 76px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.guias-material .item img { max-height: 76px; width: auto; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }
.guias-material .item .nombre { line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.guias-material .item .precio { font-weight: 700; font-size: 0.78rem; }
.guias-material .item .precio del { font-weight: 400; color: var(--texto-suave); }
.guias-material .item .precio ins { text-decoration: none; }

.guias-bloque-final { padding-bottom: 46px; }
.guias-final { display: grid; grid-template-columns: 1.54fr 1fr; gap: 14px; }
.guias-tienda { position: relative; border-radius: 8px; overflow: hidden; min-height: 158px; background-color: var(--verde-oscuro); background-size: cover; background-position: right center; color: #fff; display: flex; }
.guias-tienda::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--verde-oscuro) 0%, rgba(20,37,28,0.94) 30%, rgba(20,37,28,0.2) 62%, rgba(20,37,28,0) 100%); }
.guias-tienda .txt { position: relative; z-index: 1; padding: 26px 30px; max-width: 360px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.guias-tienda h2 { font-size: 1.5rem; line-height: 1.15; margin: 0 0 8px; }
.guias-tienda p { font-size: 0.82rem; color: #d6dccf; line-height: 1.4; margin: 0 0 14px; }
.guias-tienda .btn { border-radius: 4px; padding: 8px 18px; font-size: 0.85rem; min-height: 36px; }
.guias-newsletter { display: flex; align-items: center; gap: 20px; background: var(--crema-2); border-radius: 8px; padding: 24px 26px; }
.guias-newsletter .ico-circle { background: transparent; color: var(--texto); border: 1px solid var(--borde); width: 64px; height: 64px; }
.guias-newsletter .cuerpo { flex: 1; min-width: 0; }
.guias-newsletter h2 { font-size: 1.15rem; margin: 0 0 4px; }
.guias-newsletter p { font-size: 0.82rem; color: var(--texto-suave); margin: 0 0 12px; }
.guias-newsletter form { display: flex; gap: 8px; flex-wrap: wrap; }
.guias-newsletter input[type="email"] { flex: 1; min-width: 160px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 4px; background: #fff; font-size: 0.85rem; }
.guias-newsletter .btn { background: var(--verde-oscuro); border-radius: 4px; padding: 10px 20px; min-height: 40px; }
.guias-newsletter .check { width: 100%; display: flex; gap: 6px; align-items: center; font-size: 0.72rem; color: var(--texto-suave); }
.guias-newsletter .check input { width: auto; }
.guias-newsletter .check label { margin: 0; font-weight: 400; }


.material-relacionado-guias { display: flex; align-items: center; gap: 20px; background: var(--crema-2); border-radius: 3px; padding: 20px; }
.material-relacionado-guias .productos-mini { display: flex; gap: 16px; overflow-x: auto; }
.mini-prod { min-width: 130px; text-align: left; }
.mini-prod img { aspect-ratio: 1/1; object-fit: cover; border-radius: 3px; margin-bottom: 6px; }
.mini-prod .nombre { font-size: 0.8rem; font-weight: 600; margin-bottom: 2px; }
.mini-prod .precio { font-size: 0.85rem; font-weight: 700; }

.newsletter-box { display: flex; align-items: center; gap: 16px; background: var(--crema-2); border-radius: 3px; padding: 26px; }
.newsletter-box form { display: flex; gap: 10px; flex: 1; flex-wrap: wrap; }
.newsletter-box input[type="email"] { flex: 1; min-width: 200px; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 3px; }
.newsletter-box .check { width: 100%; font-size: 0.78rem; color: var(--texto-suave); display: flex; gap: 6px; align-items: flex-start; }

.articulo-header { max-width: 780px; margin: 0 auto 30px; text-align: left; }
.articulo-header .tag-cat { display: inline-block; background: var(--verde-boton); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 4px 10px; border-radius: 3px; text-transform: uppercase; margin-bottom: 14px; }
.articulo-header h1 { font-size: 2.1rem; margin: 0 0 12px; }
.articulo-meta { font-size: 0.85rem; color: var(--texto-suave); }
.articulo-body { max-width: 780px; margin: 0 auto; font-size: 1.02rem; }
.articulo-body img { border-radius: 3px; margin: 22px 0; }
.articulo-body h2 { margin-top: 34px; font-size: 1.35rem; }
.articulo-body h3 { margin-top: 26px; font-size: 1.1rem; }
.articulo-body ul, .articulo-body ol { padding-left: 22px; margin: 14px 0; list-style: revert; }
.articulo-body li { margin-bottom: 6px; }
.articulo-body p { margin: 0 0 16px; color: #2c2c28; }

/* ==========================================================================
   CONOCENOS
   ========================================================================== */
.tres-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.tres-fotos figure { margin: 0; }
.tres-fotos img { border-radius: 3px; aspect-ratio: 4/3; object-fit: cover; margin-bottom: 12px; }
.tres-fotos h4 { margin: 0 0 6px; font-size: 1rem; }
.tres-fotos p { margin: 0; font-size: 0.85rem; color: var(--texto-suave); }

.modalidades-strip { background: var(--verde-oscuro); color: #fff; border-radius: 3px; padding: 34px; display: flex; align-items: center; gap: 40px; justify-content: space-between; flex-wrap: wrap; }
.modalidades-strip .txt { max-width: 320px; }
.modalidades-strip h3 { font-size: 1.4rem; margin: 0 0 10px; }
.modalidades-strip p { font-size: 0.88rem; color: #c3cabc; margin: 0 0 16px; }
.modalidades-iconos { display: flex; gap: 26px; flex-wrap: wrap; }
.modalidades-iconos div { text-align: center; font-size: 0.82rem; max-width: 76px; }
.modalidades-iconos .ico { font-size: 1.8rem; display: block; margin-bottom: 8px; }

.dos-columnas-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.col-cta { position: relative; border-radius: 3px; overflow: hidden; min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; color: #fff; background-size: cover; background-position: center; }
.col-cta::before { content:""; position:absolute; inset:0; background: rgba(10,18,12,0.5); }
.col-cta > * { position: relative; z-index: 1; }
.col-cta .ico-circle { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 1.3rem; }
.col-cta h3 { margin: 0 0 8px; font-size: 1.25rem; }
.col-cta p { margin: 0 0 16px; font-size: 0.88rem; }

.fachada-cta { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.fachada-cta img { height: 100%; object-fit: cover; }
.fachada-cta .txt { background: var(--verde-oscuro); color: #fff; padding: 44px; display: flex; flex-direction: column; justify-content: center; }
.fachada-cta h2 { font-size: 1.6rem; margin: 0 0 10px; }
.fachada-cta p { color: #c3cabc; margin: 0 0 18px; }

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contacto-stack { display: flex; flex-direction: column; gap: 24px; padding-top: 28px; padding-bottom: 56px; }

/* Etiqueta naranja en píldora (igual que las de los banners de marca de la portada) */
.contacto-tag { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; background: var(--naranja); color: #fff; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; padding: 7px 14px; border-radius: 40px; }
.contacto-tag svg { width: 15px; height: 15px; }

/* Cabecera: banner oscuro con la fachada fundida a la derecha */
.contacto-hero { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; min-height: 440px; border-radius: 10px; overflow: hidden; background: var(--verde-oscuro); color: #fff; box-shadow: var(--sombra); }
.contacto-hero .txt { position: relative; z-index: 1; padding: 48px 52px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; }
.contacto-hero h1 { font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1; margin: 4px 0 0; font-weight: 900; letter-spacing: -0.5px; color: #fff; }
.contacto-hero .lema { margin: 0; max-width: 26em; font-size: 1.08rem; line-height: 1.5; color: rgba(255,255,255,0.85); }
.contacto-hero .foto { position: relative; background-size: cover; background-position: center; min-height: 300px; }
.contacto-hero .foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--verde-oscuro) 0%, rgba(20,37,28,0.35) 28%, rgba(20,37,28,0) 55%); }
.contacto-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin: 8px 0 4px; padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,0.14); width: 100%; max-width: 520px; }
.contacto-datos li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.85rem; color: rgba(255,255,255,0.7); line-height: 1.4; }
.contacto-datos .ico { flex: 0 0 34px; height: 34px; border-radius: 50%; background: rgba(232,98,31,0.16); color: var(--naranja); display: inline-flex; align-items: center; justify-content: center; }
.contacto-datos .ico svg { width: 17px; height: 17px; stroke-width: 2; }
.contacto-datos strong { display: block; color: #fff; font-size: 0.92rem; font-weight: 700; }
.contacto-hero .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.contacto-hero .acciones .btn { min-height: 48px; padding: 12px 22px; font-weight: 700; }

/* Tres vías de contacto */
.contacto-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.contacto-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: 28px 26px 26px; box-shadow: 0 2px 10px rgba(20,37,28,0.05); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; overflow: hidden; }
.contacto-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--naranja); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.contacto-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20,37,28,0.12); border-color: transparent; }
.contacto-card:hover::before { transform: scaleX(1); }
/* Icono en círculo (genérico: también lo usan Conócenos, Guías y Favoritos) */
.ico-circle { flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%; background: var(--verde-oscuro); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.ico-circle svg { width: 28px; height: 28px; stroke-width: 1.7; }
.contacto-page .ico-circle { width: 52px; height: 52px; border-radius: 14px; }
.contacto-page .ico-circle svg { width: 24px; height: 24px; stroke-width: 1.9; vertical-align: 0; }
.contacto-card .cabecera { display: flex; align-items: center; gap: 16px; }
.contacto-card .ico-circle { background: rgba(232,98,31,0.12); color: var(--naranja); transition: background .25s ease, color .25s ease; }
.contacto-card:hover .ico-circle { background: var(--naranja); color: #fff; }
.contacto-card h3 { margin: 0 0 3px; font-size: 1.3rem; line-height: 1.15; }
.contacto-card p { margin: 0; color: var(--texto-suave); font-size: 0.9rem; line-height: 1.4; }
.contacto-card .dato-grande { display: flex; flex-direction: column; gap: 12px; width: 100%; margin: 22px 0 20px; padding: 16px 18px; border-radius: 8px; background: var(--crema); flex: 1; justify-content: center; }
.contacto-card .dato-grande a { display: flex; flex-direction: column; font-size: 1.2rem; font-weight: 800; color: var(--texto); line-height: 1.25; word-break: break-word; transition: color .2s; }
.contacto-card .dato-grande a:hover { color: var(--naranja); }
.contacto-card .dato-grande .sub { font-size: 0.85rem; font-weight: 500; color: var(--texto-suave); margin-top: 2px; }
.contacto-card .dato-grande small { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--texto-suave); margin-bottom: 2px; }
.contacto-card .btn { min-height: 48px; font-weight: 700; gap: 10px; }
.contacto-card .btn svg { width: 18px; height: 18px; transition: transform .25s ease; }
.contacto-card .btn:hover svg { transform: translateX(4px); }

/* Mapa */
.donde-estamos { display: grid; grid-template-columns: 340px 1fr; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 2px 10px rgba(20,37,28,0.05); scroll-margin-top: 90px; }
.donde-estamos .info { padding: 34px 32px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.donde-estamos .eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 0.72rem; font-weight: 800; color: var(--naranja); margin-bottom: 6px; }
.donde-estamos .info h2 { font-size: 1.9rem; line-height: 1.1; margin: 0 0 24px; }
.donde-estamos .info ul { display: flex; flex-direction: column; gap: 18px; margin: 0 0 26px; }
.donde-estamos .info li { display: flex; gap: 14px; font-size: 0.86rem; color: var(--texto-suave); line-height: 1.45; }
.donde-estamos .info li .ico { flex: 0 0 36px; height: 36px; border-radius: 50%; background: rgba(232,98,31,0.1); color: var(--naranja); display: inline-flex; align-items: center; justify-content: center; }
.donde-estamos .info li .ico svg { width: 18px; height: 18px; stroke-width: 2; }
.donde-estamos .info li strong { display: block; color: var(--texto); font-size: 0.96rem; font-weight: 700; }
.donde-estamos .info li a:hover { color: var(--naranja); }
.donde-estamos .info .btn { min-height: 46px; font-weight: 700; }
.donde-estamos .mapa { min-height: 420px; }
.donde-estamos .mapa iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; filter: saturate(0.85); }

/* Banner del equipo */
.contacto-banner { display: grid; grid-template-columns: 1.4fr 1fr; background: var(--verde-oscuro); border-radius: 10px; overflow: hidden; min-height: 280px; box-shadow: var(--sombra); }
.contacto-banner .foto { position: relative; background-size: cover; background-position: center; }
.contacto-banner .foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,37,28,0) 50%, var(--verde-oscuro) 100%); }
.contacto-banner .txt { color: #fff; padding: 36px 44px 36px 12px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; }
.contacto-banner h2 { font-size: 2.2rem; line-height: 1.05; margin: 0; font-weight: 900; color: #fff; }
.contacto-banner p { margin: 0 0 6px; color: rgba(255,255,255,0.82); font-size: 0.98rem; line-height: 1.5; max-width: 24em; }
.contacto-banner .btn { min-height: 46px; font-weight: 700; }

/* Franja de compra online */
.contacto-online { position: relative; display: flex; align-items: center; gap: 22px; background: #fff; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; padding: 26px 34px; min-height: 120px; }
.contacto-online .ico-circle { background: rgba(232,98,31,0.12); color: var(--naranja); }
.contacto-online .txt { flex: 0 1 430px; }
.contacto-online h2 { font-size: 1.5rem; margin: 0 0 4px; }
.contacto-online p { margin: 0; color: var(--texto-suave); font-size: 0.92rem; line-height: 1.45; }
.contacto-online > .btn { min-height: 46px; font-weight: 700; position: relative; z-index: 1; }
.contacto-online .foto { position: absolute; right: 0; top: 0; bottom: 0; width: 34%; background-size: cover; background-position: center; }
.contacto-online .foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 50%); }

/* Página de favoritos */
[data-fav-page] .fav-loading, [data-fav-page] .fav-vacio { display: none; }
[data-fav-page].is-loading .fav-loading { display: flex; align-items: center; gap: 10px; padding: 30px 0; color: var(--texto-suave); }
[data-fav-page].is-loading [data-fav-grid], [data-fav-page].is-empty [data-fav-grid] { display: none !important; }
[data-fav-page].is-empty .fav-vacio { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 60px 20px 80px; max-width: 520px; margin: 0 auto; }
.fav-vacio .ico-circle { width: 72px; height: 72px; margin-bottom: 18px; }
.fav-vacio h2 { font-size: 1.5rem; margin: 0 0 8px; }
.fav-vacio p { color: var(--texto-suave); margin: 0 0 22px; }
.fav-loading .spinner { width: 18px; height: 18px; border: 2px solid var(--borde); border-top-color: var(--verde-boton); border-radius: 50%; animation: lcp-spin .7s linear infinite; }
@keyframes lcp-spin { to { transform: rotate(360deg); } }
.fav-btn.active svg { fill: currentColor; }

.form-contacto { background: #fff; border: 1px solid var(--borde); border-radius: 3px; padding: 30px; max-width: 700px; margin: 0 auto; }
.form-contacto .campo { margin-bottom: 16px; }
.form-contacto label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; }
.form-contacto input, .form-contacto select, .form-contacto textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--borde); border-radius: 3px; font-family: inherit; font-size: 0.92rem;
}
.form-contacto .fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-msg { display: none; margin-top: 14px; padding: 12px 16px; border-radius: 3px; font-size: 0.88rem; }
.form-msg.ok { display: block; background: #e4f2e5; color: var(--ok); }
.form-msg.error { display: block; background: #fbe6e3; color: var(--alerta); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--borde); }
.faq-item summary { padding: 18px 4px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--texto-suave); }
.faq-item[open] summary::after { content: "–"; }
.faq-item .respuesta { padding: 0 4px 18px; color: var(--texto-suave); font-size: 0.94rem; }
.faq-categorias { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.faq-categorias button { background: #fff; border: 1px solid var(--borde); padding: 8px 16px; border-radius: 30px; font-size: 0.85rem; font-weight: 600; }
.faq-categorias button.active { background: var(--verde-oscuro); border-color: var(--verde-oscuro); color: #fff; }

/* ==========================================================================
   404
   ========================================================================== */
.error-404 { text-align: center; padding: 90px 0; }
.error-404 .code { font-size: 5rem; font-weight: 800; color: var(--verde-boton); margin: 0; }
.error-404 p { color: var(--texto-suave); max-width: 46ch; margin: 10px auto 26px; }

/* ==========================================================================
   MOVIL / TOAST / OTROS
   ========================================================================== */
.mobile-filter-bar { display: none; }
.toast {
  position: fixed; bottom: 24px; right: 24px; background: var(--verde-oscuro); color: #fff;
  padding: 14px 20px; border-radius: 4px; font-size: 0.88rem; box-shadow: var(--sombra);
  transform: translateY(140%); transition: transform 0.25s ease; z-index: 500; max-width: 320px;
}
.toast.show { transform: translateY(0); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
  .modalidades-grid { grid-template-columns: repeat(4, 1fr); }
  .triple-banner { grid-template-columns: 1fr; }
  .grid-productos, ul.products { grid-template-columns: repeat(3, 1fr); }
  .completa-equipo { grid-template-columns: repeat(3, 1fr); }
  .guias-grid { grid-template-columns: 1fr 1fr; }
  .guia-tile.grande { grid-column: span 2; grid-row: auto; }
  .guias-hero { grid-template-columns: 1fr; }
  .guias-hero .txt { padding: 32px 26px; }
  .guias-material { flex-wrap: wrap; }
  .guias-material .intro { flex: 1 1 260px; }
  .guias-material .tira { flex: 1 1 100%; order: 3; }
  .guias-material .flecha { display: none; }
  .guias-final { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
  .woocommerce div.product { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .menu-toggle { display: block; }
  .mainnav ul.nav-links { display: none; flex-direction: column; width: 100%; }
  .mainnav.open ul.nav-links { display: flex; }
  .mainnav .container { flex-wrap: wrap; }

  /* En móvil el hover no existe: se despliega al pulsar el icono (ver main.js) */
  .mainnav ul.nav-links a { justify-content: space-between; }
  .mainnav li.has-dropdown > .cat-dropdown,
  .cat-flyout li.has-flyout > .cat-flyout {
    display: none; position: static; box-shadow: none; width: 100%; min-width: 0;
    background: rgba(255,255,255,0.05); border-radius: 0; padding-left: 14px;
  }
  .mainnav li.has-dropdown.open > .cat-dropdown,
  .cat-flyout li.has-flyout.open > .cat-flyout { display: block; }
  .mainnav li.has-dropdown:hover > .cat-dropdown,
  .mainnav li.has-dropdown:focus-within > .cat-dropdown,
  .cat-flyout li.has-flyout:hover > .cat-flyout,
  .cat-flyout li.has-flyout:focus-within > .cat-flyout { display: none; }
  .mainnav li.has-dropdown.open > .cat-dropdown { display: block; }
  .cat-flyout li.has-flyout.open > .cat-flyout { display: block; }
  .mainnav ul.nav-links .cat-flyout li a { color: #fff; }
  .mainnav ul.nav-links .cat-flyout li a:hover { background: rgba(255,255,255,0.08); color: #fff; }
  .mainnav ul.nav-links .cat-flyout li a .icon { color: #fff; }
  .top-utility-bar { display: none; }
  .search-form { order: 3; flex-basis: 100%; }
  .topbar .container { flex-wrap: wrap; }
  .top-actions .label { display: none; }
  .plp-layout { grid-template-columns: 1fr; }
  .filtros { position: fixed; inset: 0 0 0 auto; width: 86%; max-width: 340px; z-index: 400; overflow-y: auto; transform: translateX(100%); transition: transform 0.25s ease; border-radius: 0; }
  .filtros.open { transform: translateX(0); }
  .mobile-filter-bar { display: flex; gap: 10px; margin-bottom: 16px; }
  .mobile-filter-bar button { flex: 1; }
  .grid-productos, ul.products { grid-template-columns: repeat(2, 1fr); }
  .ventajas, .specs-grid { grid-template-columns: repeat(2, 1fr); }
  .completa-equipo { grid-template-columns: repeat(2, 1fr); }
  .guias-grid { grid-template-columns: 1fr; }
  .guia-tile.grande { grid-column: auto; }
  .guias-hero h1 { font-size: 1.8rem; }
  .guias-newsletter { flex-direction: column; align-items: flex-start; }
  .tabs-modalidad button { padding: 8px 18px; }
  .guias-preview { grid-template-columns: 1fr; }
  .tres-fotos, .dos-columnas-cta, .contacto-cards, .contacto-hero, .fachada-cta, .donde-estamos { grid-template-columns: 1fr; }
  .contacto-banner { grid-template-columns: 1fr; }
  .contacto-banner .foto { min-height: 200px; }
  .contacto-banner .foto::after { background: linear-gradient(180deg, rgba(20,37,28,0) 55%, var(--verde-oscuro) 100%); }
  .contacto-banner .txt { padding: 8px 26px 28px; }
  .contacto-hero .txt { padding: 30px 24px 32px; order: 2; }
  .contacto-hero .foto { min-height: 220px; order: 1; }
  .contacto-hero .foto::before { background: linear-gradient(180deg, rgba(20,37,28,0) 55%, var(--verde-oscuro) 100%); }
  .contacto-hero h1 { font-size: 2.2rem; }
  .contacto-datos { grid-template-columns: 1fr; }
  .contacto-hero .acciones .btn { flex: 1 1 100%; }
  .donde-estamos .mapa, .donde-estamos .mapa iframe { min-height: 300px; }
  .contacto-online { flex-direction: column; align-items: flex-start; padding-bottom: 150px; }
  .contacto-online .foto { width: 100%; top: auto; height: 120px; }
  .contacto-online .foto::after { background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 60%); }
  .tienda-strip { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
  .footer-top { flex-direction: column; }
  .form-contacto .fila-2 { grid-template-columns: 1fr; }
  .cta-final .container { flex-direction: column; align-items: flex-start; }
  .newsletter-box { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .container { padding: 0 18px; }
  .modalidades-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-productos, ul.products { grid-template-columns: 1fr 1fr; }
  .hero-card { padding: 26px; max-width: 100%; }
  .hero-card h1 { font-size: 1.5rem; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   CATÁLOGO / PLP (réplica de mockups/PLP.png) + FOOTER 6 columnas
   ========================================================================== */
.plp-top { padding: 4px 0 0; }
.plp-head { align-items: center; flex-wrap: nowrap; margin-bottom: 26px; }
.plp-title { flex: 1; min-width: 0; }
.plp-title .breadcrumb { padding: 14px 0 0; }
.plp-title h1 { font-size: 2.3rem; margin: 10px 0 12px; }
.plp-title .desc { max-width: 52ch; line-height: 1.55; margin: 0 0 14px; }
.plp-title .total { font-size: 0.95rem; margin: 0; color: var(--texto); }
.plp-hero-img { flex: 0 0 auto; width: 460px; border-radius: 4px; }
.plp-hero-img img { width: 100%; height: 150px; object-fit: cover; display: block; }
.plp-listado { padding-bottom: 22px; }

.plp-layout { grid-template-columns: 230px minmax(0, 1fr); gap: 28px; }
.filtros { background: transparent; border: 0; padding: 0; top: 16px; font-size: 0.85rem; }
.filtros-cab { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid var(--borde); border-radius: 3px 3px 0 0; padding: 12px 14px 4px; }
.filtros h3 { font-size: 0.82rem; margin: 0; text-transform: uppercase; letter-spacing: 0.3px; }
.limpiar-filtros { display: flex; align-items: center; gap: 6px; font-size: 0.74rem; color: var(--texto-suave); background: #fff; border-left: 1px solid var(--borde); border-right: 1px solid var(--borde); padding: 4px 14px 12px; border-bottom: 1px solid var(--borde); }
.limpiar-filtros:hover { color: var(--texto); }
.filtro-grupo { background: #fff; border: 1px solid var(--borde); border-top: 0; padding: 14px; }
.filtro-grupo:last-of-type { border-radius: 0 0 3px 3px; }
.filtro-grupo:first-of-type { padding-top: 14px; }
.filtro-grupo summary { font-size: 0.86rem; align-items: center; }
.filtro-grupo > *:not(summary) { margin-top: 10px; }
.filtro-grupo .widget_layered_nav ul, .filtro-grupo .widget_rating_filter ul { margin: 0; }
.filtro-grupo .widget_layered_nav li, .filtro-grupo .widget_rating_filter li { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; font-size: 0.8rem; }
.filtro-grupo .widget_layered_nav li a, .filtro-grupo .widget_rating_filter li a,
.filtro-check { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-start; }
.filtro-grupo .widget_layered_nav li a::before, .filtro-check::before { content: ""; flex: 0 0 14px; width: 14px; height: 14px; border: 1px solid #b9bfae; border-radius: 3px; background: #fff; box-sizing: border-box; }
.filtro-grupo .widget_layered_nav li.chosen a::before, .filtro-check.on::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; background: var(--verde-oscuro); border-color: var(--verde-oscuro); color: #fff; font-size: 0.62rem; line-height: 1; }
.filtro-grupo .widget_layered_nav li .count { color: var(--texto-suave); font-size: 0.76rem; }
.filtro-check { font-size: 0.8rem; }
.buscar-marca { margin: 10px 0 8px; padding: 7px 10px; font-size: 0.78rem; }
/* Listas largas (Marca tiene más de 100) con scroll propio para que el filtro no baje más que los productos */
.filtro-grupo .widget_layered_nav ul { max-height: 290px; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #c9cdbf transparent; }
.filtro-grupo .widget_layered_nav ul::-webkit-scrollbar { width: 6px; }
.filtro-grupo .widget_layered_nav ul::-webkit-scrollbar-thumb { background: #c9cdbf; border-radius: 3px; }
/* En escritorio el panel acompaña al scroll sin pasar nunca de la altura de la pantalla */
@media (min-width: 901px) {
  .filtros { max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c9cdbf transparent; }
}
.ui-slider { background: var(--borde); }
.ui-slider .ui-slider-range { background: var(--verde-oscuro); }
.ui-slider .ui-slider-handle { background: var(--verde-oscuro); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--verde-oscuro); }
.price_slider_amount .button { background: var(--verde-oscuro); color: #fff; border: 0; border-radius: 3px; }

.chips-activos { margin-bottom: 14px; }
.chip { background: var(--crema-2); border-color: transparent; border-radius: 4px; padding: 7px 12px; }
.chip svg { width: 12px; height: 12px; }

.toolbar { justify-content: flex-start; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; padding: 10px 10px 10px 16px; background: #fff; border: 1px solid var(--borde); border-radius: 10px; }
.toolbar .mostrando { order: -1; font-size: 0.8rem; color: var(--texto-suave); margin: 0 auto 0 0; }
.toolbar .orden-label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: var(--texto-suave); }
.orden-botones { display: inline-flex; gap: 3px; padding: 4px; border-radius: 40px; background: var(--crema); border: 1px solid var(--borde); }
.orden-botones a { padding: 7px 15px; font-size: 0.8rem; font-weight: 600; color: var(--texto); border-radius: 40px; white-space: nowrap; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.orden-botones a.active { background: var(--verde-oscuro); color: #fff; box-shadow: 0 2px 6px rgba(20,37,28,0.25); }
.orden-botones a:not(.active):hover { background: #fff; color: var(--naranja); }

.plp-layout .grid-productos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.plp-layout .product-card { padding: 10px 10px 12px; border-radius: 3px; }
.plp-layout .product-card .thumb { aspect-ratio: 1 / 0.82; background: #fff; margin-bottom: 8px; }
.plp-layout .product-card .thumb img { object-fit: contain; padding: 4px; }
.plp-layout .product-card .marca { font-size: 0.64rem; letter-spacing: 0.4px; font-weight: 600; }
.plp-layout .product-card .nombre { font-size: 0.82rem; font-weight: 600; margin: 2px 0 4px; min-height: 2.4em; line-height: 1.2; }
.plp-layout .product-card .stars { font-size: 0.7rem; }
.plp-layout .product-card .precio-row { font-size: 1rem; margin: 8px 0 3px; }
.plp-layout .product-card .stock { font-size: 0.7rem; margin-bottom: 8px; }
.plp-layout .card-actions .btn { background: var(--verde-oscuro); border-radius: 2px; padding: 8px; display: flex; align-items: center; justify-content: center; }
.plp-layout .card-actions .btn:hover { background: var(--verde-boton-hover); }
.plp-layout .card-actions .btn .icon { width: 17px; height: 17px; }
.plp-layout .fav-btn { border-radius: 2px; width: 44px; height: 36px; }
.plp-layout .product-card .tags-wrap { top: 8px; left: auto; right: 0; }
.plp-layout .product-card .tag { border-radius: 2px 0 0 2px; }
.plp-layout .product-card .tag.exclusiva { border-radius: 2px; }

.plp-equipo { padding: 0 0 36px; }
.completa-box { display: flex; align-items: center; gap: 22px; background: var(--crema-2); border-radius: 4px; padding: 14px 16px; }
.completa-box .intro { flex: 0 0 250px; }
.completa-box h2 { font-size: 1.15rem; margin: 0 0 6px; }
.completa-box p { font-size: 0.74rem; color: var(--texto-suave); margin: 0; line-height: 1.4; }
.completa-box .completa-equipo { flex: 1; min-width: 0; gap: 8px; }
.completa-box .completa-equipo a { aspect-ratio: 16 / 10; padding: 8px; font-size: 0.76rem; border-radius: 2px; }

/* Footer: 5 bloques, categorías en dos columnas */
.footer-cols { grid-template-columns: 1.7fr 1fr 1fr 1.2fr 0.8fr 0.9fr; }
.footer-cols > div:first-child ul { columns: 2; column-gap: 24px; }
.footer-cols > div:first-child li { break-inside: avoid; }

@media (max-width: 1200px) {
  .plp-hero-img { width: 340px; }
  .plp-layout .grid-productos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .completa-box { flex-wrap: wrap; }
  .completa-box .intro { flex: 1 1 100%; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .plp-head { flex-wrap: wrap; }
  .plp-hero-img { width: 100%; }
  .plp-hero-img img { height: 170px; }
  .plp-layout { grid-template-columns: 1fr; }
  .plp-layout .grid-productos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar .orden-label { margin-left: 0; }
  .orden-botones { overflow-x: auto; max-width: 100%; }
  .toolbar .mostrando { margin-left: 0; width: 100%; }
  .filtros-cab, .limpiar-filtros, .filtro-grupo { border-radius: 0; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .plp-title h1 { font-size: 1.9rem; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}

/* Filtro de precio: sin cortes y con botón compacto */
.filtro-grupo .widget_price_filter { overflow: visible; }
.filtro-grupo .price_slider_wrapper { padding: 6px 9px 0; }
.filtro-grupo .price_slider { margin: 8px 0 14px; }
.filtro-grupo .price_slider_amount { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 4px; }
.filtro-grupo .price_slider_amount .price_label { order: 1; font-size: 0.8rem; color: var(--texto); white-space: normal; text-align: center; }
.filtro-grupo .price_slider_amount .button { order: 2; width: 100%; padding: 8px 12px; font-size: 0.8rem; margin: 0; }
.filtro-grupo .price_slider_amount .clear { display: none; }
.filtro-grupo .price_slider_amount input[type="text"] { display: none; }

/* ---------- Catálogo: panel de filtros en una sola tarjeta ---------- */
.filtros { background: #fff; border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 2px 12px rgba(20,37,28,0.05); }
@media (max-width: 900px) { .filtros { border: 0; border-radius: 0; box-shadow: none; } }
.filtros-cab { display: flex; align-items: center; gap: 10px; background: var(--verde-oscuro); color: #fff; border: 0; border-radius: 0; padding: 14px 16px; }
.filtros-ico { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,0.12); display: inline-flex; align-items: center; justify-content: center; }
.filtros-ico svg { width: 16px; height: 16px; }
.filtros h3 { flex: 1; min-width: 0; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.8px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filtros-cab .limpiar-filtros { white-space: nowrap; }
.limpiar-filtros { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 5px 10px; border: 0; border-radius: 40px; background: var(--naranja); color: #fff; font-size: 0.72rem; font-weight: 700; transition: background .2s; }
.limpiar-filtros svg { width: 12px; height: 12px; stroke-width: 3; }
.limpiar-filtros:hover { background: var(--naranja-hover); color: #fff; }
.filtros-cab .menu-toggle { color: #fff; }
.filtro-grupo, .filtro-grupo:first-of-type { background: transparent; border: 0; border-bottom: 1px solid var(--crema-2); border-radius: 0; padding: 14px 18px; }
.filtro-grupo:last-of-type { border-bottom: 0; border-radius: 0; }
.filtro-grupo summary { font-size: 0.88rem; font-weight: 700; color: var(--texto); transition: color .2s; }
.filtro-grupo summary:hover { color: var(--naranja); }
.filtro-grupo summary::after, .filtro-grupo[open] summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; color: var(--texto-suave); }
.filtro-grupo[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
/* Opciones: fila entera clicable, con el número a la derecha */
.filtro-grupo .widget_layered_nav li, .filtro-grupo .widget_rating_filter li { position: relative; margin: 0 0 2px; padding: 5px 8px; border-radius: 6px; font-size: 0.82rem; transition: background .15s ease; }
.filtro-grupo .widget_layered_nav li:hover, .filtro-grupo .widget_rating_filter li:hover { background: var(--crema); }
.filtro-grupo .widget_layered_nav li a, .filtro-grupo .widget_rating_filter li a { gap: 10px; flex: 1; min-width: 0; }
.filtro-grupo .widget_layered_nav li a::after { content: ""; position: absolute; inset: 0; } /* toda la fila es el enlace */
.filtro-grupo .widget_layered_nav li .count { margin-left: auto; font-size: 0.72rem; color: var(--texto-suave); }
.filtro-grupo .widget_layered_nav li a::before, .filtro-check::before { flex: 0 0 16px; width: 16px; height: 16px; border: 1.5px solid #b9bfae; border-radius: 4px; transition: border-color .15s ease, background .15s ease; }
.filtro-grupo .widget_layered_nav li:hover a::before, .filtro-check:hover::before { border-color: var(--naranja); }
.filtro-grupo .widget_layered_nav li.chosen a::before, .filtro-check.on::before { font-size: 0.66rem; }
.filtro-grupo .widget_layered_nav li.chosen { background: rgba(232,98,31,0.08); font-weight: 700; }
.filtro-check { padding: 5px 8px; margin-left: -8px; border-radius: 6px; font-size: 0.82rem; }
.filtro-check:hover { background: var(--crema); }
.buscar-marca { width: 100%; margin: 12px 0 8px; padding: 9px 12px 9px 34px; border: 1px solid var(--borde); border-radius: 8px; background: var(--crema) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a5a54' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E") no-repeat 11px center / 15px; font-size: 0.8rem; font-family: inherit; transition: border-color .2s, background-color .2s; }
.buscar-marca:focus { outline: 0; border-color: var(--naranja); background-color: #fff; }
.ui-slider { height: 4px; }
.ui-slider .ui-slider-handle { width: 16px; height: 16px; top: -6px; margin-left: -8px; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--verde-oscuro), 0 2px 5px rgba(0,0,0,0.2); }
.filtro-grupo .price_slider_amount .price_label { font-weight: 700; }
.filtro-grupo .price_slider_amount .button { border-radius: 8px; padding: 10px 12px; font-weight: 700; }

/* ---------- Catálogo: tarjetas de producto (los botones de carrito y favorito no cambian) ---------- */
@media (min-width: 901px) {
  .plp-layout .grid-productos { gap: 18px; }
  .plp-layout .product-card { display: flex; flex-direction: column; padding: 12px 12px 14px; border: 1px solid var(--borde); border-radius: 12px; background: #fff; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
  .plp-layout .product-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20,37,28,0.13); border-color: transparent; }
  .plp-layout .product-card .thumb { aspect-ratio: 1 / 0.9; margin: 0 0 12px; border-radius: 8px; overflow: hidden; background: #fff; }
  .plp-layout .product-card .thumb img { padding: 8px; transition: transform .4s ease; }
  .plp-layout .product-card:hover .thumb img { transform: scale(1.06); }
  .plp-layout .product-card .marca { font-size: 0.66rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--naranja); }
  .plp-layout .product-card .nombre { margin: 4px 0 0; font-size: 0.86rem; font-weight: 600; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .plp-layout .product-card .nombre a:hover { color: var(--naranja); }
  .plp-layout .product-card .stars { margin-top: 6px; }
  .plp-layout .product-card .precio-row { margin: 12px 0 8px; font-size: 1.3rem; font-weight: 800; color: var(--verde-oscuro); line-height: 1; }
  .plp-layout .product-card .precio-row del { font-size: 0.8rem; font-weight: 500; color: var(--texto-suave); margin-right: 6px; }
  .plp-layout .product-card .precio-row ins { text-decoration: none; color: var(--naranja); }
  /* Disponibilidad en pastilla de color */
  .plp-layout .product-card .stock { align-self: flex-start; margin: 0 0 12px; padding: 3px 10px 3px 8px; border-radius: 40px; font-size: 0.7rem; font-weight: 700; background: #e8f3ea; color: var(--ok); }
  .plp-layout .product-card .stock.bajo { background: #fbf1da; color: #9a6a0a; }
  .plp-layout .product-card .stock.agotado { background: #f9e5e2; color: var(--alerta); }
  .plp-layout .product-card .card-actions { margin-top: auto; }
  /* Etiquetas (Oferta, -20%, Exclusiva) arriba a la izquierda sobre la foto */
  .plp-layout .product-card .tags-wrap { top: 20px; left: 20px; right: auto; z-index: 2; }
  .plp-layout .product-card .tag, .plp-layout .product-card .tag.exclusiva { border-radius: 4px; font-weight: 800; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
}

/* ---------- Catálogo en móvil (réplica de la maqueta) ---------- */
.mobile-meta, .vista-toggle, .cargar-mas { display: none; }
@media (max-width: 900px) {
  .toolbar { display: none; }
  .mobile-filter-bar { align-items: stretch; margin-bottom: 12px; }
  .mobile-filter-bar .btn { background: var(--verde-oscuro); color: #fff; border-radius: 4px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
  .vista-toggle { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--borde); border-radius: 4px; overflow: hidden; background: #fff; }
  .vista-toggle button { flex: 0 0 auto; width: 44px; border: 0; background: transparent; color: var(--texto); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
  .vista-toggle button + button { border-left: 1px solid var(--borde); }
  .vista-toggle button.active { background: var(--crema-2); }
  .mobile-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; margin-bottom: 8px; color: var(--texto); }
  .mobile-meta select { border: 0; background: transparent; font-size: 0.8rem; font-weight: 500; padding: 4px 2px; color: var(--texto); }

  /* Vista lista */
  .plp-layout .grid-productos[data-view="list"] { grid-template-columns: 1fr; gap: 0; }
  .plp-layout .grid-productos[data-view="list"] .product-card { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto; column-gap: 14px; align-content: start; background: transparent; border: 0; border-top: 1px solid var(--borde); border-radius: 0; padding: 14px 0; }
  .plp-layout .grid-productos[data-view="list"] .product-card:first-child { border-top: 0; }
  .plp-layout .grid-productos[data-view="list"] .thumb { grid-column: 1; grid-row: 1 / span 5; aspect-ratio: 1; margin: 0; align-self: center; background: transparent; }
  .plp-layout .grid-productos[data-view="list"] .product-card > :not(.thumb):not(.tags-wrap):not(.card-actions) { grid-column: 2 / 4; }
  .plp-layout .grid-productos[data-view="list"] .nombre { min-height: 0; font-size: 0.92rem; margin: 2px 0 4px; }
  .plp-layout .grid-productos[data-view="list"] .precio-row { font-size: 1.1rem; margin: 6px 0 2px; grid-column: 2; }
  .plp-layout .grid-productos[data-view="list"] .stock { grid-column: 2; margin: 0; }
  .plp-layout .grid-productos[data-view="list"] .card-actions { grid-column: 3; grid-row: 4 / span 2; align-self: end; margin: 0; gap: 6px; }
  .plp-layout .grid-productos[data-view="list"] .card-actions .btn { flex: 0 0 34px; width: 34px; height: 30px; padding: 0; }
  .plp-layout .grid-productos[data-view="list"] .fav-btn { width: 30px; height: 30px; }
  .plp-layout .grid-productos[data-view="list"] .tags-wrap { top: 18px; left: 0; right: auto; }

  /* Vista cuadrícula */
  .plp-layout .grid-productos[data-view="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  .cargar-mas { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; padding: 14px; background: var(--crema-2); border-radius: 4px; font-size: 0.9rem; font-weight: 500; }
  .cargar-mas .icon { width: 16px; height: 16px; }
  .paginacion { display: none; }
}

/* Botón de la tarjeta: nunca se corta el texto; agotado atenuado */
.product-card .card-actions .btn { overflow: hidden; white-space: nowrap; }
.product-card.outofstock .card-actions .btn, .product-card .card-actions .btn.disabled { opacity: 0.45; }

/* ==========================================================================
   PORTADA (réplica de mockups/Home.png)
   ========================================================================== */
.hero { min-height: 300px; }
.hero::before { background: linear-gradient(90deg, rgba(10,20,14,0.18) 0%, rgba(10,20,14,0) 60%); }
.hero .container { align-self: stretch; align-items: stretch; }
.hero-card { max-width: 520px; padding: 26px 32px; border-radius: 0; background: rgba(40,44,36,0.9); display: flex; flex-direction: column; justify-content: center; }
.hero-card h1 { font-size: 2.2rem; line-height: 1.1; margin: 0 0 12px; }
.hero-card p { margin: 0 0 18px; color: #eef0ea; }
.hero-card .btn { padding: 10px 20px; font-size: 0.9rem; }
.hero-card .hero-actions { margin-bottom: 14px; }

.modalidades-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.modalidad-card { aspect-ratio: 5 / 3; border-radius: 3px; }
.modalidad-card span { padding: 10px 12px; font-family: Impact, "Arial Narrow", "Haettenschweiler", sans-serif; font-weight: 400; font-size: 1.1rem; letter-spacing: 0.4px; text-shadow: 0 1px 4px rgba(0,0,0,0.6); line-height: 1.1; }
.modalidades-hint { margin-top: 10px; color: var(--texto); font-size: 0.88rem; }

/* Fila central: carpfishing | productos | cebos */
.triple-banner { grid-template-columns: 1.15fr 1.75fr 0.95fr; gap: 14px; background: transparent; border: 0; border-radius: 0; overflow: visible; }
.triple-banner > * { border-radius: 4px; overflow: hidden; }
.triple-banner .product-panel { background: #fff; border: 1px solid var(--borde); padding: 18px 16px; }
.triple-banner .product-panel .section-title { font-size: 1.25rem; }
.triple-banner .product-panel .section-sub { font-size: 0.72rem; margin: 0; }

.banner-carp { padding: 0; justify-content: center; align-items: flex-end; background-position: left center; min-height: 340px; }
.banner-carp::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(236,233,224,0) 20%, rgba(236,233,224,0.93) 52%, rgba(236,233,224,0.97) 100%); }
.banner-carp .txt { width: 56%; padding: 28px 24px 28px 0; color: var(--texto); }
.banner-carp h3 { font-size: 1.75rem; line-height: 1.12; margin: 0 0 12px; color: var(--texto); }
.banner-carp p { color: var(--texto-suave); font-size: 0.8rem; line-height: 1.45; margin: 0 0 16px; }
.banner-carp .btn-outline-dark { background: transparent; }

.banner-cebos { justify-content: flex-start; min-height: 340px; padding: 24px 22px; }
.banner-cebos.dark::before { background: linear-gradient(180deg, rgba(10,14,10,0.55) 0%, rgba(10,14,10,0.25) 55%, rgba(10,14,10,0.5) 100%); }
.banner-cebos h3 { font-size: 1.75rem; line-height: 1.12; }
.banner-cebos p { font-size: 0.78rem; }
.banner-cebos .marcas-logos { margin-top: auto; display: flex; align-items: center; gap: 22px; padding-top: 14px; }
.banner-cebos .marcas-logos img { height: 34px; width: auto; border-radius: 3px; }

/* Franja de ventajas */
.ventajas { grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 16px 28px; border-radius: 4px; }
.ventajas .ventaja { align-items: center; justify-content: center; gap: 16px; }
.ventajas .ventaja .ico { font-size: 0; color: var(--texto); }
.ventajas .ventaja .ico svg { width: 40px; height: 40px; stroke-width: 1.3; }
.ventajas .ventaja h4 { font-size: 0.95rem; margin: 0 0 3px; }
.ventajas .ventaja p { font-size: 0.7rem; line-height: 1.4; }

/* Guías + tienda física en una sola fila */
.home-guias-tienda { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.home-guias { display: grid; grid-template-columns: 1.25fr 1.25fr 0.85fr 0.85fr; gap: 6px; background: var(--verde-oscuro); color: #fff; border-radius: 4px; overflow: hidden; min-height: 126px; }
.home-guias .intro { padding: 22px 20px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.home-guias h2 { font-size: 1.3rem; line-height: 1.15; margin: 0 0 8px; }
.home-guias p { font-size: 0.72rem; color: #d4dacd; margin: 0 0 14px; line-height: 1.4; }
.home-guias .btn-outline-light { border-radius: 2px; padding: 7px 14px; font-size: 0.74rem; }
.home-guia-card { position: relative; display: flex; align-items: flex-end; padding: 12px; background-size: cover; background-position: center; color: #fff; font-weight: 600; font-size: 0.78rem; line-height: 1.25; }
.home-guia-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.78) 100%); }
.home-guia-card span { position: relative; z-index: 1; }
.home-guia-card:hover::before { background: linear-gradient(180deg, rgba(0,0,0,0.05) 25%, rgba(0,0,0,0.85) 100%); }

.home-tienda { display: grid; grid-template-columns: 1.7fr 1fr; background: var(--crema-2); border-radius: 4px; overflow: hidden; min-height: 126px; }
.home-tienda .foto { background-size: cover; background-position: center; min-height: 126px; }
.home-tienda .txt { padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.home-tienda h2 { font-size: 1.05rem; line-height: 1.2; margin: 0 0 6px; }
.home-tienda p { font-size: 0.66rem; color: var(--texto-suave); line-height: 1.4; margin: 0 0 10px; }
.home-tienda .actions { display: flex; gap: 6px; flex-wrap: wrap; }
.home-tienda .btn { padding: 6px 12px; font-size: 0.7rem; border-radius: 2px; }

/* Banner final más compacto */
.cta-final { padding: 18px 0; }
.cta-final::before { background: rgba(8,16,10,0.55); }
.cta-final .container { justify-content: center; gap: 60px; }
.cta-final h2 { font-size: 1.5rem; }
.cta-final p { font-size: 0.78rem; }
.cta-final .btn { padding: 10px 20px; font-size: 0.88rem; }

@media (max-width: 1200px) {
  .modalidades-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .triple-banner { grid-template-columns: 1fr; }
  .banner-carp, .banner-cebos { min-height: 280px; }
  .home-guias-tienda { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero .container { padding: 0; }
  .hero-card { max-width: 100%; margin: 150px 0 0; padding: 24px 20px; }
  .ventajas { grid-template-columns: 1fr; }
  .ventajas .ventaja { justify-content: flex-start; }
  .home-guias { grid-template-columns: 1fr 1fr; }
  .home-guias .intro { grid-column: 1 / -1; }
  .home-guia-card { min-height: 130px; }
  .home-tienda { grid-template-columns: 1fr; }
  .cta-final .container { gap: 18px; }
}
@media (max-width: 560px) {
  .modalidades-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .banner-carp .txt { width: 100%; padding: 24px 20px; }
  .banner-carp::before { background: linear-gradient(180deg, rgba(236,233,224,0.1) 0%, rgba(236,233,224,0.95) 60%); }
  .banner-carp { align-items: flex-end; }
}

/* ==========================================================================
   CONÓCENOS (réplica de mockups/Conocenos.png)
   ========================================================================== */
.conocenos-hero { position: relative; min-height: 380px; display: flex; align-items: center; background-color: var(--verde-oscuro); background-size: cover; background-position: right center; color: #fff; padding: 0; }
.conocenos-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,12,9,0.92) 0%, rgba(8,12,9,0.78) 38%, rgba(8,12,9,0.1) 75%); }
.conocenos-hero .container { position: relative; z-index: 1; }
.conocenos-hero .txt { max-width: 560px; padding: 40px 0; }
.conocenos-hero h1 { font-size: 3.1rem; line-height: 1.05; margin: 0 0 18px; }
.conocenos-hero p { font-size: 1.1rem; line-height: 1.5; margin: 0 0 26px; max-width: 30ch; color: #f0f2ec; }
.btn-hero-outline { background: rgba(20,37,28,0.7); border: 1px solid #5d7458; color: #fff; border-radius: 4px; padding: 11px 20px; }
.btn-hero-outline:hover { background: var(--verde-oscuro); }

.conocenos-intro { padding: 22px 0 14px; }
.conocenos-intro-grid { display: grid; grid-template-columns: 1.05fr 1fr 1fr 1fr; gap: 18px; align-items: start; }
.conocenos-intro .intro { align-self: center; padding-right: 10px; }
.conocenos-intro h2 { font-size: 1.9rem; line-height: 1.12; margin: 0 0 14px; }
.conocenos-intro .intro p { font-size: 0.95rem; line-height: 1.55; color: var(--texto); margin: 0; }
.conocenos-intro figure { margin: 0; }
.conocenos-intro figure img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 3px; margin-bottom: 12px; }
.conocenos-intro figure h4 { margin: 0 0 4px; font-size: 0.95rem; }
.conocenos-intro figure p { margin: 0; font-size: 0.8rem; color: var(--texto-suave); line-height: 1.4; }

.conocenos-bloque { padding: 10px 0 14px; }
.modalidades-strip { border-radius: 4px; padding: 26px 30px; gap: 30px; flex-wrap: nowrap; }
.modalidades-strip .txt { flex: 0 0 280px; max-width: none; }
.modalidades-strip h3 { font-size: 1.6rem; line-height: 1.12; }
.modalidades-strip .btn { border-radius: 2px; }
.modalidades-iconos { flex: 1; display: flex; justify-content: space-between; gap: 12px; flex-wrap: nowrap; }
.modalidades-iconos a { flex: 1; text-align: center; font-size: 0.85rem; max-width: none; display: flex; flex-direction: column; align-items: center; }
.modalidades-iconos a:hover { color: #9fd18a; }
.modalidades-iconos .ico { color: #8fc97a; margin-bottom: 10px; }
.modalidades-iconos .ico svg { width: 46px; height: 46px; stroke-width: 1.3; }

.dos-columnas-cta { gap: 14px; }
.col-cta { min-height: 213px; padding: 34px 36px; justify-content: center; background-color: var(--crema-2); background-position: right center; background-size: auto 100%; background-repeat: no-repeat; color: var(--texto); }
.col-cta::before { background: linear-gradient(90deg, var(--crema-2) 0%, var(--crema-2) 38%, rgba(236,233,224,0.55) 62%, rgba(236,233,224,0) 100%); }
.col-cta .ico-circle { width: 44px; height: 44px; background: var(--verde-oscuro); color: #fff; margin-bottom: 12px; }
.col-cta h3 { font-size: 1.6rem; margin: 0 0 6px; }
.col-cta p { font-size: 0.85rem; max-width: 30ch; color: var(--texto); margin: 0 0 14px; }
.col-cta .btn { width: fit-content; border-radius: 2px; }

.fachada-cta { padding: 0; margin-top: 14px; grid-template-columns: 1.55fr 1fr; background: var(--crema-2); }
.fachada-cta .foto { background-size: cover; background-position: center; min-height: 260px; }
.fachada-cta .txt { background: var(--crema-2); color: var(--texto); padding: 36px 40px; align-items: flex-start; }
.fachada-cta h2 { font-size: 1.9rem; line-height: 1.15; margin: 0 0 10px; }
.fachada-cta p { color: var(--texto-suave); margin: 0 0 20px; }
.fachada-cta .lugar { margin-top: 22px; font-size: 0.9rem; color: var(--texto); }

@media (max-width: 1200px) {
  .conocenos-intro-grid { grid-template-columns: repeat(3, 1fr); }
  .conocenos-intro .intro { grid-column: 1 / -1; }
  .modalidades-strip { flex-wrap: wrap; }
  .modalidades-iconos { flex-wrap: wrap; justify-content: flex-start; }
  .modalidades-iconos a { flex: 0 0 90px; }
}
@media (max-width: 900px) {
  .conocenos-hero h1 { font-size: 2.3rem; }
  .conocenos-hero::before { background: rgba(8,12,9,0.7); }
  .col-cta { background-size: cover; }
  .col-cta::before { background: linear-gradient(90deg, var(--crema-2) 0%, rgba(236,233,224,0.88) 100%); }
  .fachada-cta .foto { min-height: 200px; }
}
@media (max-width: 560px) {
  .conocenos-intro-grid { grid-template-columns: 1fr; }
}

.modalidades-iconos .ico svg { width: 52px; height: 52px; stroke-width: 1.5; }

/* Ficha: la descripción de la variación (copia del texto largo) no se muestra en la caja de compra */
.buy-box .woocommerce-variation-description,
.buy-box .woocommerce-variation .woocommerce-variation-description { display: none; }
.buy-box .woocommerce-variation-availability { margin: 0; }

/* Conócenos: bloque de modalidades en móvil/tablet */
@media (max-width: 900px) {
  .modalidades-strip { flex-direction: column; align-items: stretch; gap: 22px; padding: 26px 22px; }
  .modalidades-strip .txt { flex: 0 0 auto; max-width: none; }
  .modalidades-iconos { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 8px; }
  .modalidades-iconos a { flex: none; font-size: 0.78rem; }
  .modalidades-iconos .ico svg { width: 42px; height: 42px; }
}
@media (max-width: 560px) {
  .modalidades-iconos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   MARCAS
   ========================================================================== */
.marcas-hero { padding: 6px 0 22px; }
.marcas-hero h1 { font-size: 2.3rem; margin: 10px 0 8px; }
.marcas-hero .sub { color: var(--texto-suave); max-width: 70ch; margin: 0 0 20px; }
.marcas-buscador { display: flex; align-items: center; gap: 10px; max-width: 520px; background: #fff; border: 1px solid var(--borde); border-radius: 4px; padding: 0 14px; }
.marcas-buscador .icon { color: var(--texto-suave); }
.marcas-buscador input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 13px 0; font-size: 0.95rem; font-family: inherit; }
.marcas-buscador .total { font-size: 0.78rem; color: var(--texto-suave); white-space: nowrap; }

.marcas-propias { padding: 0 0 26px; }
.marcas-propias h2 { font-size: 1.15rem; margin: 0 0 14px; }
.marcas-propias-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.marca-propia { position: relative; display: flex; align-items: center; gap: 22px; background: var(--verde-oscuro); color: #fff; border-radius: 4px; padding: 26px 28px; min-height: 120px; transition: transform .2s ease; }
.marca-propia:hover { transform: translateY(-2px); }
.marca-propia .tag { position: absolute; top: 12px; right: 12px; background: var(--naranja); color: #fff; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; padding: 3px 8px; border-radius: 2px; }
.marca-propia img { height: 58px; width: auto; border-radius: 3px; background: #fff; padding: 4px 8px; }
.marca-propia .logo-texto { font-family: Impact, "Arial Narrow", sans-serif; font-style: italic; font-size: 2.4rem; letter-spacing: 1px; line-height: 1; }
.marca-propia .num { font-size: 0.85rem; color: #d4dacd; margin-left: auto; }
.marca-propia .ver { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.85rem; }
.marca-propia .ver svg { width: 16px; height: 16px; }

.marcas-listado { padding: 0 0 30px; }
.marcas-az { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.marcas-az button { min-width: 36px; padding: 7px 12px; border: 1px solid var(--borde); background: #fff; border-radius: 30px; font-size: 0.8rem; font-weight: 600; color: var(--texto); cursor: pointer; transition: background .15s ease, color .15s ease; }
.marcas-az button:hover { background: var(--crema-2); }
.marcas-az button.active { background: var(--verde-oscuro); border-color: var(--verde-oscuro); color: #fff; }
.marcas-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.marca-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; background: #fff; border: 1px solid var(--borde); border-radius: 4px; padding: 22px 14px; min-height: 128px; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.marca-card[hidden] { display: none; }
.marca-card:hover { border-color: var(--verde-boton); transform: translateY(-2px); box-shadow: var(--sombra); }
.marca-card .inicial { width: 38px; height: 38px; border-radius: 50%; background: var(--crema-2); color: var(--verde-boton); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; margin-bottom: 6px; }
.marca-card .nombre { font-weight: 700; font-size: 0.95rem; line-height: 1.2; overflow-wrap: anywhere; }
.marca-card .num { font-size: 0.76rem; color: var(--texto-suave); }
.marcas-vacio { text-align: center; color: var(--texto-suave); padding: 30px 0; }

.marcas-cta { padding: 0 0 46px; }
.marcas-cta-box { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--crema-2); border-radius: 4px; padding: 26px 30px; }
.marcas-cta-box h2 { font-size: 1.3rem; margin: 0 0 4px; }
.marcas-cta-box p { margin: 0; color: var(--texto-suave); font-size: 0.9rem; }

@media (max-width: 1200px) { .marcas-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .marcas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .marcas-propias-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .marcas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marca-propia { flex-wrap: wrap; padding: 22px 20px; }
  .marca-propia .num { margin-left: 0; }
  .marcas-az { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
}

.marca-propia .nom { font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.marca-propia .nom small { display: block; font-weight: 400; font-size: 0.78rem; color: #d4dacd; margin-top: 3px; }
.marca-propia .ver { margin-left: auto; }

/* ==========================================================================
   MI CUENTA (WooCommerce)
   ========================================================================== */
.page-wide .section-title { font-size: 2rem; margin: 6px 0 22px; }
.page-wide .articulo-body { max-width: none; }
.woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; background: #fff; border: 1px solid var(--borde); border-left: 4px solid var(--verde-boton);
  padding: 14px 18px; border-radius: 4px; list-style: none; margin: 0 0 20px; font-size: 0.92rem; outline: 0;
}
.woocommerce-error { border-left-color: var(--alerta); }
.woocommerce-info { border-left-color: var(--naranja); }
.woocommerce-message .button, .woocommerce-info .button { order: 2; margin-left: auto; padding: 8px 16px; font-size: 0.82rem; }
.woocommerce-error li, .woocommerce-info li, .woocommerce-message li { list-style: none; margin: 0; padding: 0; }
.woocommerce-error:focus, .woocommerce-info:focus, .woocommerce-message:focus { outline: 0; }

.woocommerce-account .woocommerce { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
.woocommerce-account:not(.logged-in) .woocommerce { display: block; }

.articulo-body .woocommerce-MyAccount-navigation ul { list-style: none; padding: 8px; margin: 0; background: #fff; border: 1px solid var(--borde); border-radius: 6px; }
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation li + li { margin-top: 2px; }
.woocommerce-MyAccount-navigation li a { display: flex; align-items: center; justify-content: space-between; border: 0; background: transparent; border-radius: 4px; padding: 12px 14px; font-size: 0.92rem; font-weight: 600; color: var(--texto); transition: background .15s ease; }
.woocommerce-MyAccount-navigation li a::after { content: "›"; color: var(--texto-suave); font-size: 1.1rem; }
.woocommerce-MyAccount-navigation li a:hover { background: var(--crema-2); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--verde-oscuro); color: #fff; }
.woocommerce-MyAccount-navigation li.is-active a::after { color: #fff; }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--alerta); }

.woocommerce-MyAccount-content { background: #fff; border: 1px solid var(--borde); border-radius: 6px; padding: 28px 30px; font-size: 0.95rem; line-height: 1.6; min-width: 0; }
.woocommerce-MyAccount-content > p:first-child { font-size: 1.05rem; }
.woocommerce-MyAccount-content p { color: var(--texto-suave); margin: 0 0 14px; }
.woocommerce-MyAccount-content p strong, .woocommerce-MyAccount-content p a { color: var(--texto); }
.woocommerce-MyAccount-content p a { text-decoration: underline; text-underline-offset: 2px; }
.woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3 { font-size: 1.2rem; margin: 0 0 14px; }
.woocommerce-MyAccount-content fieldset { border: 1px solid var(--borde); border-radius: 4px; margin: 22px 0; padding: 16px 18px; }
.woocommerce-MyAccount-content legend { font-weight: 700; padding: 0 8px; }

/* Formularios */
.woocommerce form .form-row { margin: 0 0 16px; }
.woocommerce form .form-row label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 6px; }
.woocommerce form .form-row .required { color: var(--alerta); text-decoration: none; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-page form input[type="email"], .woocommerce-page form input[type="password"], .woocommerce-page form input[type="text"] {
  width: 100%; padding: 11px 13px; border: 1px solid var(--borde); border-radius: 4px; background: #fff; font-family: inherit; font-size: 0.95rem; color: var(--texto);
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row select:focus, .woocommerce form .form-row textarea:focus { outline: 2px solid rgba(46,74,42,0.25); border-color: var(--verde-boton); }
.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: calc(50% - 8px); float: left; }
.woocommerce form .form-row-first { margin-right: 16px; }
.woocommerce form .form-row-wide, .woocommerce form .clear { clear: both; }
.woocommerce form em { font-size: 0.78rem; color: var(--texto-suave); }

/* Pedidos / tablas */
.woocommerce table.shop_table { width: 100%; border-collapse: collapse; border: 1px solid var(--borde); border-radius: 6px; overflow: hidden; font-size: 0.9rem; }
.woocommerce table.shop_table th { text-align: left; background: var(--crema); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--texto-suave); padding: 12px 14px; }
.woocommerce table.shop_table td { padding: 14px; border-top: 1px solid var(--borde); vertical-align: middle; }
.woocommerce table.shop_table td a:not(.button) { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.woocommerce table.shop_table .button { padding: 7px 14px; font-size: 0.8rem; }

/* Direcciones */
.woocommerce-Addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.woocommerce-Addresses .woocommerce-Address { border: 1px solid var(--borde); border-radius: 6px; padding: 18px 20px; background: var(--crema); }
.woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.woocommerce-Address-title h2, .woocommerce-Address-title h3 { margin: 0; font-size: 1.05rem; }
.woocommerce-Address-title a { font-size: 0.82rem; font-weight: 600; color: var(--verde-boton); text-decoration: underline; }
.woocommerce-Address address { font-style: normal; color: var(--texto-suave); line-height: 1.6; }

/* Acceso / registro (sin sesión) */
.woocommerce-account:not(.logged-in) .u-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.woocommerce-account:not(.logged-in) .u-column1, .woocommerce-account:not(.logged-in) .u-column2 { width: auto; float: none; }
.woocommerce-form-login, .woocommerce-form-register { background: #fff; border: 1px solid var(--borde) !important; border-radius: 6px; padding: 26px 28px !important; margin: 0 !important; }
.woocommerce-account:not(.logged-in) h2 { font-size: 1.3rem; margin: 0 0 14px; }
.woocommerce-form-login .woocommerce-form-login__submit, .woocommerce-form-register .button { width: 100%; padding: 13px; margin-top: 6px; }
.woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; font-weight: 400 !important; }
.woocommerce-form-login__rememberme input { width: auto !important; }
.lost_password { margin: 12px 0 0; font-size: 0.85rem; }
.lost_password a { text-decoration: underline; }

@media (max-width: 900px) {
  .woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; }
  .articulo-body .woocommerce-MyAccount-navigation ul { display: flex; overflow-x: auto; gap: 4px; padding: 6px; }
  .woocommerce-MyAccount-navigation li { flex: 0 0 auto; }
  .woocommerce-MyAccount-navigation li a { white-space: nowrap; gap: 8px; padding: 10px 14px; }
  .woocommerce-MyAccount-navigation li a::after { display: none; }
  .woocommerce-MyAccount-content { padding: 22px 18px; }
  .woocommerce-Addresses, .woocommerce-account:not(.logged-in) .u-columns { grid-template-columns: 1fr; }
  .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; float: none; margin-right: 0; }
}

/* Añadir rápido desde el listado */
.card-actions { position: relative; }
.card-actions .btn.loading { opacity: 0.6; cursor: progress; }
.card-actions .btn.added { background: var(--ok); }
.card-actions .btn:disabled { opacity: 0.4; cursor: not-allowed; }
.quick-options { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 20; background: #fff; border: 1px solid var(--borde); border-radius: 6px; box-shadow: var(--sombra); padding: 10px; display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.quick-options[hidden] { display: none; }
.quick-options .quick-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--texto-suave); }
.quick-options button { text-align: left; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 4px; background: #fff; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.quick-options button:hover { border-color: var(--verde-boton); background: var(--crema); }

/* Footer: avisos y medios de pago a la derecha */
.footer-top { flex-wrap: nowrap; align-items: flex-start; gap: 36px; }
.footer-cols { grid-template-columns: 1.7fr 1fr 1fr 1.1fr 1.2fr 0.9fr; }
.footer-pay { flex: 0 0 230px; display: flex; flex-direction: column; gap: 14px; color: #fff; font-size: 0.92rem; }
.footer-pay .badge-item { display: flex; align-items: center; gap: 12px; }
.footer-pay .badge-item .icon { width: 26px; height: 26px; stroke-width: 1.4; }
.pay-logos { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.pay-visa { font-family: Georgia, serif; font-weight: 900; font-style: italic; font-size: 1.35rem; letter-spacing: 0.5px; color: #fff; }
.pay-mc { position: relative; display: inline-flex; flex-direction: column; align-items: center; width: 40px; }
.pay-mc i { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: #eb001b; }
.pay-mc i + i { background: #f79e1b; margin-left: -9px; mix-blend-mode: screen; opacity: 0.95; }
.pay-mc { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.pay-mc small { flex-basis: 100%; text-align: center; font-size: 0.45rem; color: #cfd6c8; line-height: 1; margin-top: 2px; }
.pay-paypal { font-weight: 800; font-style: italic; font-size: 1.1rem; color: #fff; }
.pay-paypal b { color: #79b8ee; }
.pay-klarna { font-weight: 800; font-size: 1.1rem; color: #fff; letter-spacing: -0.3px; }
@media (max-width: 1200px) { .footer-top { flex-wrap: wrap; } .footer-cols { flex: 1 1 100%; grid-template-columns: repeat(3, 1fr); } .footer-pay { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 28px; } }
@media (max-width: 900px) { .footer-top { flex-direction: column; } .footer-cols { grid-template-columns: repeat(2, 1fr); } }

/* Footer: las columnas nunca empujan el contenido fuera de la pantalla (5 columnas reales, textos largos parten línea) */
.footer-cols { min-width: 0; grid-template-columns: minmax(250px, 2fr) minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1.3fr) minmax(0, 0.8fr); column-gap: 32px; }
.footer-cols > div { min-width: 0; }
.footer-cols li { overflow-wrap: anywhere; line-height: 1.35; }
.footer-cols > div:first-child ul { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.footer-cols > div:first-child li { text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.3px; }
@media (max-width: 1400px) {
  .footer-top { flex-wrap: wrap; }
  .footer-cols { flex: 1 1 100%; }
  .footer-pay { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.1); }
}
@media (max-width: 1100px) { .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-cols > div:first-child { grid-column: 1 / -1; } .footer-cols > div:first-child ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-cols > div:first-child ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Hero home: pescador al amanecer, tarjeta a la derecha */
.hero { min-height: 320px; background-position: left center; background-size: cover; }
.hero::before { display: none; }
.hero-card { background: rgba(40,44,36,0.92); max-width: 440px; margin-right: 6%; }
@media (max-width: 900px) { .hero { background-position: 20% top; background-size: auto 220px; background-repeat: no-repeat; background-color: #2b3326; } .hero-card { margin-right: 0; } }

/* Hero home v2: tarjeta anclada como en la maqueta */
.hero { min-height: 300px; height: 15vw; background-size: cover; background-position: center; }
.hero .container { position: static; }
.hero-card { position: absolute; top: 12px; bottom: 0; right: 12.8%; width: max(26.1%, 400px); max-width: none; margin: 0; padding: 18px 28px; background: rgba(40,44,36,0.93); box-sizing: border-box; }
.hero-card h1 { font-size: clamp(1.6rem, 2.1vw, 2.2rem); }
.hero-card p { margin-bottom: 14px; }
@media (max-width: 900px) { .hero { height: auto; min-height: 0; background-size: auto 220px; } .hero-card { position: static; width: 100%; margin: 150px 0 0; padding: 24px 20px; } .hero .container { position: relative; } }
/* Móvil: la foto ocupa una franja completa arriba (sin recortes) y el texto va debajo, sin taparla */
@media (max-width: 900px) {
  .hero-home { display: block; background-color: #2b3326; background-image: none !important; } /* la foto pasa a .hero-foto-movil */
  .hero-home .container { padding: 0; }
  .hero-home .hero-card { margin: 0; border-radius: 0; background: #2b3326; }
  .hero-foto-movil { display: block; height: 230px; background-size: cover; background-position: 30% center; }
}
@media (min-width: 901px) { .hero-foto-movil { display: none; } }

/* Menú móvil: botón ☰ / ✕ y lista con scroll propio para que el botón de cerrar siga a la vista */
[data-menu-toggle] .ico-cerrar { display: none; }
[data-menu-toggle][aria-expanded="true"] .ico-abrir { display: none; }
[data-menu-toggle][aria-expanded="true"] .ico-cerrar { display: inline-flex; }
[data-menu-toggle] span { display: inline-flex; }
@media (max-width: 900px) {
  .mainnav.open ul.nav-links { max-height: calc(100vh - 170px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; }
}

/* Contadores de cabecera */
.top-actions .badge { min-width: 18px; width: auto; height: 18px; padding: 0 5px; border-radius: 9px; top: -7px; right: -10px; box-sizing: border-box; }
.top-actions .badge[hidden] { display: none; }

/* Buscador animado */
.search-form form { transition: box-shadow .25s ease, transform .25s ease; border-radius: 4px; }
.search-form { transition: flex-basis .3s ease, max-width .3s ease; }
.search-form form:hover { box-shadow: 0 0 0 2px rgba(255,255,255,0.25); }
.search-form form:focus-within { box-shadow: 0 0 0 3px var(--naranja), 0 8px 22px rgba(0,0,0,0.35); transform: translateY(-1px); }
.search-form button { transition: background .2s ease, color .2s ease; }
.search-form button .icon { transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.search-form form:hover button .icon { transform: scale(1.12); }
.search-form form:focus-within button { background: var(--naranja); color: #fff; }
.search-form form:focus-within button .icon { transform: rotate(-12deg) scale(1.15); }
.search-form input::placeholder { transition: opacity .3s ease, transform .3s ease; }
.search-form input.ph-out::placeholder { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) { .search-form *, .search-form form { transition: none !important; } }

/* El Carpero: marca propia con más presencia en portada */
.elc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.elcarpero-home .exclusiva-card { grid-template-columns: 1.15fr 1fr; border-width: 2px; border-color: #c9122a; }
.elcarpero-home .exclusiva-info h2 { font-size: 2.2rem; }
.elc-productos { margin-top: 22px; }
.elc-productos-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.elc-productos-head h3 { font-size: 1.35rem; margin: 0; }
.elc-productos-head a { font-weight: 700; font-size: 0.9rem; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 6px; }
.elc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* Página Marcas: franja del producto exclusivo El Carpero, con la estética del banner de El Carpero de portada */
.marca-propia-v2 { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 32px; padding: 26px 32px; border-radius: 10px; overflow: hidden; color: #fff; background: linear-gradient(120deg, #12080a 0%, #2a0a10 55%, #5c0d19 100%); box-shadow: var(--sombra); }
.marca-propia-v2 .mp-logo { height: 84px; width: auto; padding-right: 32px; border-right: 1px solid rgba(255,255,255,0.14); }
.marca-propia-v2 .mp-info { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.marca-propia-v2 .mp-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--naranja); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; padding: 5px 12px; border-radius: 40px; }
.marca-propia-v2 .mp-tag svg { width: 13px; height: 13px; }
.marca-propia-v2 .mp-nombre { font-size: 1.35rem; font-weight: 800; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.3px; }
.marca-propia-v2 .mp-nombre:hover { color: #ffb48c; }
.marca-propia-v2 .mp-sub { margin: 0; font-size: 0.88rem; color: rgba(255,255,255,0.75); }
.marca-propia-v2 .mp-compra { display: flex; flex-direction: column; align-items: stretch; gap: 8px; text-align: center; }
.marca-propia-v2 .mp-precio { font-size: 1.7rem; font-weight: 900; line-height: 1; }
.marca-propia-v2 .mp-precio del { font-size: 0.9rem; font-weight: 500; opacity: .7; margin-right: 6px; }
.marca-propia-v2 .mp-precio ins { text-decoration: none; }
.marca-propia-v2 .btn { font-weight: 700; padding: 11px 22px; }
.marca-propia-v2 .btn svg { width: 16px; height: 16px; transition: transform .2s ease; }
.marca-propia-v2 .btn:hover svg { transform: translateX(3px); }
.marca-propia-v2 .mp-todos { font-size: 0.78rem; color: rgba(255,255,255,0.75); text-decoration: underline; text-underline-offset: 3px; }
.marca-propia-v2 .mp-todos:hover { color: #fff; }
.marca-propia-v2 .mp-foto { width: 130px; height: 130px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; transform: rotate(3deg); box-shadow: 0 10px 24px rgba(0,0,0,0.35); transition: transform .3s ease; }
.marca-propia-v2 .mp-foto img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.marca-propia-v2:hover .mp-foto { transform: rotate(0) scale(1.04); }
@media (max-width: 1000px) {
  .marca-propia-v2 { grid-template-columns: minmax(0, 1fr) auto; gap: 20px; padding: 24px; }
  .marca-propia-v2 .mp-logo { grid-column: 1 / -1; height: 64px; padding: 0 0 16px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.14); }
  .marca-propia-v2 .mp-foto { grid-row: 2; grid-column: 2; width: 100px; height: 100px; }
  .marca-propia-v2 .mp-compra { grid-column: 1 / -1; }
}
/* Cabecera de la fila de productos bajo cada banner de marca: etiqueta, título con la marca en naranja, línea y botón */
.marcas-slider .elc-productos-head { align-items: flex-end; gap: 18px; margin: 4px 0 16px; }
.marcas-slider .elc-productos-head::after { content: ""; flex: 1; order: 1; height: 1px; margin-bottom: 15px; background: linear-gradient(90deg, var(--borde), rgba(221,217,205,0)); }
.marcas-slider .elc-productos-head .eph-titulo { display: flex; flex-direction: column; gap: 2px; }
.marcas-slider .elc-productos-head .eph-kicker { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--texto-suave); }
.marcas-slider .elc-productos-head h3 { font-size: 1.6rem; font-weight: 900; line-height: 1.1; letter-spacing: -0.3px; }
.marcas-slider .elc-productos-head h3 span { color: var(--naranja); }
.marcas-slider .elc-productos-head .eph-ver { order: 2; flex: 0 0 auto; padding: 8px 16px; border: 1.5px solid var(--verde-oscuro); border-radius: 40px; font-size: 0.82rem; font-weight: 700; text-decoration: none; color: var(--verde-oscuro); transition: background .2s, color .2s; }
.marcas-slider .elc-productos-head .eph-ver svg { width: 15px; height: 15px; transition: transform .2s; }
.marcas-slider .elc-productos-head .eph-ver:hover { background: var(--verde-oscuro); color: #fff; }
.marcas-slider .elc-productos-head .eph-ver:hover svg { transform: translateX(3px); }
@media (max-width: 600px) { .marcas-slider .elc-productos-head::after { display: none; } .marcas-slider .elc-productos-head h3 { font-size: 1.3rem; } }
.marca-propia-todos { margin: 10px 0 0; text-align: right; font-weight: 700; font-size: 0.9rem; }
.marca-propia-todos a { text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 900px) { .elc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .elcarpero-home .exclusiva-info h2 { font-size: 1.6rem; } }

/* Menú: "Ofertas" destacado */
.mainnav ul.nav-links a[href*="on_sale"], .mainnav ul.nav-links a.destacado {
  background: var(--naranja); color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  margin: 6px 0 6px 8px; padding: 7px 18px; border-radius: 40px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.mainnav ul.nav-links a[href*="on_sale"]::before, .mainnav ul.nav-links a.destacado::before { content: "%"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%; background: #fff; color: var(--naranja); font-size: 0.7rem; font-weight: 900; }
.mainnav ul.nav-links a[href*="on_sale"]:hover, .mainnav ul.nav-links a.destacado:hover { background: #e8601a; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
@media (prefers-reduced-motion: no-preference) { .mainnav ul.nav-links a[href*="on_sale"] { animation: ofertaPulso 2.8s ease-in-out infinite; } }
@keyframes ofertaPulso { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(232,96,26,0.55); } 85% { box-shadow: 0 0 0 8px rgba(232,96,26,0); } }
@media (max-width: 900px) { .mainnav ul.nav-links a[href*="on_sale"] { margin: 8px 12px; display: inline-flex; } }

/* Menú: "Marcas" como un enlace más (mismo tamaño y espaciado), en mayúsculas y naranja para que destaque sin competir con Ofertas */
.mainnav ul.nav-links a[href$="/marcas/"], .mainnav ul.nav-links a[href$="/marcas"] { position: relative; text-transform: uppercase; font-weight: 800; letter-spacing: 0.5px; color: #ff8f52; transition: color .2s ease; }
.mainnav ul.nav-links a[href$="/marcas/"]::before, .mainnav ul.nav-links a[href$="/marcas"]::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 18px; transform: translateY(-50%); background: rgba(255,255,255,0.22); }
.mainnav ul.nav-links a[href$="/marcas/"]:hover, .mainnav ul.nav-links a[href$="/marcas"]:hover { color: #fff; }
@media (max-width: 900px) { .mainnav ul.nav-links a[href$="/marcas/"]::before, .mainnav ul.nav-links a[href$="/marcas"]::before { display: none; } }

/* Marcas destacadas en portada (Sonik, Nytro) */
.marca-dest { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 380px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--sombra); color: #fff; background: var(--verde-oscuro); }
.marca-dest-nytro { background: #0b0b0c; }
.marca-dest-info { padding: 44px 48px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; }
.marca-dest-tag { display: inline-flex; align-items: center; gap: 7px; background: var(--naranja); font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; padding: 7px 14px; border-radius: 40px; }
.marca-dest-tag svg { width: 15px; height: 15px; }
.marca-dest-nombre { font-size: clamp(3.2rem, 7vw, 5.6rem); line-height: 0.95; margin: 4px 0 0; text-transform: uppercase; letter-spacing: 3px; font-weight: 900; color: #fff; }
.marca-dest-lema { font-size: 1.3rem; font-weight: 700; margin: 0; }
.marca-dest-info p { margin: 0; max-width: 30em; font-size: 0.98rem; line-height: 1.55; opacity: 0.9; }
.marca-dest-media { position: relative; min-height: 340px; background: radial-gradient(ellipse at 60% 45%, #ffffff 0%, #d9ddd8 55%, #aeb4ad 100%); display: flex; align-items: center; justify-content: center; gap: 4%; padding: 24px; }
.marca-dest-nytro .marca-dest-media { background: radial-gradient(ellipse at 60% 45%, #ffffff 0%, #e4e4e4 55%, #b9b9b9 100%); }
.marca-dest-media img { width: 30%; max-height: 300px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,0.3)); transition: transform .3s ease; }
.marca-dest-media .mdm-0 { width: 44%; max-height: 330px; transform: rotate(-4deg); }
.marca-dest-media .mdm-1 { transform: rotate(3deg) translateY(10px); }
.marca-dest-media .mdm-2 { transform: rotate(-2deg) translateY(-8px); }
.marca-dest:hover .marca-dest-media img { transform: scale(1.05) rotate(0); }
.marca-dest-section .elc-productos { margin-top: 22px; }
@media (max-width: 900px) { .marca-dest { grid-template-columns: 1fr; } .marca-dest-info { padding: 28px 24px; order: 2; } .marca-dest-media { order: 1; min-height: 240px; } .marca-dest-lema { font-size: 1.1rem; } }

/* El Carpero: panel de portada con el mismo impacto que las marcas destacadas */
.elcarpero-home .exclusiva-card { min-height: 420px; grid-template-columns: 1fr 1.1fr; border: 0; color: #fff; background: linear-gradient(120deg, #12080a 0%, #2a0a10 60%, #5c0d19 100%); box-shadow: var(--sombra); }
.elcarpero-home .exclusiva-info { padding: 48px 52px; justify-content: center; gap: 14px; }
.elcarpero-home .exclusiva-logo { height: 96px; width: auto; max-width: 100%; padding: 0; background: none; border-radius: 0; }
.elcarpero-home .exclusiva-info h2.elc-nombre { font-size: clamp(3.2rem, 7vw, 5.6rem); line-height: 0.95; text-transform: uppercase; letter-spacing: 3px; font-weight: 900; color: #fff; margin: 4px 0 0; }
.elcarpero-home .elc-lema { font-size: 1.3rem; font-weight: 700; color: #fff; }
.elcarpero-home .exclusiva-info p { color: rgba(255,255,255,0.88); max-width: 32em; }
.elcarpero-home .exclusiva-media { background: #12080a; overflow: hidden; }
.elcarpero-home .exclusiva-media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #2a0a10 0%, rgba(42,10,16,0) 30%); pointer-events: none; }
.elcarpero-home .exclusiva-media img { transition: transform .5s ease; }
.elcarpero-home .exclusiva-card:hover .exclusiva-media img { transform: scale(1.04); }
.elcarpero-home .btn-dark { background: transparent; border: 2px solid #fff; color: #fff; }
.elcarpero-home .btn-dark:hover { background: #fff; color: #12080a; }
@media (max-width: 900px) { .elcarpero-home .exclusiva-card { grid-template-columns: 1fr; min-height: 0; } .elcarpero-home .exclusiva-info { padding: 28px 24px; } .elcarpero-home .exclusiva-media::before { display: none; } .elcarpero-home .exclusiva-info h2.elc-nombre { font-size: 2.6rem; } }

/* El Carpero: el logo hace de título (el h2 queda solo para lectores de pantalla y SEO) */
.elcarpero-home .exclusiva-info h2.elc-nombre { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.elcarpero-home .exclusiva-logo { height: 116px; margin: 2px 0 4px; }
.elcarpero-home .exclusiva-info { padding-top: 40px; padding-bottom: 40px; }
.elcarpero-home .exclusiva-badge { background: var(--naranja); border: 0; backdrop-filter: none; padding: 7px 14px; gap: 7px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.4px; color: #fff; }
.elcarpero-home .exclusiva-badge svg { color: #fff; fill: currentColor; width: 15px; height: 15px; }
@media (max-width: 900px) { .elcarpero-home .exclusiva-logo { height: 90px; } }

/* Marcas con logo (Sonik): igual que El Carpero, el logo hace de título y el h2 queda para lectores de pantalla y SEO */
.marca-dest.con-logo .marca-dest-nombre { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.marca-dest-logo { display: block; height: auto; width: 100%; max-width: 380px; margin: 10px 0 8px; }
@media (max-width: 900px) { .marca-dest-logo { max-width: 260px; } }

/* Carrusel de marcas destacadas: las diapositivas se apilan en la misma celda (altura estable) y se funden */
.ms-viewport { display: grid; }
.ms-slide { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .6s ease, visibility 0s linear .6s; }
.ms-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .6s ease; }
.marcas-slider .container { position: relative; --ms-h: 420px; }
.marcas-slider .exclusiva-card, .marcas-slider .marca-dest { min-height: var(--ms-h); }
/* Indicadores sobre el banner: rayitas finas, la activa se rellena con el tiempo que falta para el cambio */
.ms-controls { position: absolute; left: 0; right: 0; top: calc(var(--ms-h) - 34px); z-index: 5; display: flex; justify-content: center; gap: 8px; pointer-events: none; }
.ms-tab { pointer-events: auto; position: relative; width: 34px; height: 3px; padding: 0; border: 0; border-radius: 2px; background: rgba(255,255,255,0.4); overflow: visible; cursor: pointer; transition: background .2s; }
.ms-tab::before { content: ""; position: absolute; inset: -12px -2px; } /* zona de clic más grande */
.ms-tab:hover { background: rgba(255,255,255,0.7); }
.ms-tab::after { content: ""; position: absolute; inset: 0; border-radius: 2px; background: #fff; transform: scaleX(0); transform-origin: left; }
.ms-tab.is-active::after { animation: ms-progress var(--ms-delay, 7s) linear forwards; }
.marcas-slider.is-paused .ms-tab.is-active::after { animation-play-state: paused; }
.marcas-slider.no-auto .ms-tab.is-active::after { animation: none; transform: scaleX(1); }
@keyframes ms-progress { to { transform: scaleX(1); } }
@media (max-width: 900px) {
  .marcas-slider .container { --ms-h: 0px; }
  .marcas-slider .exclusiva-card, .marcas-slider .marca-dest { min-height: 0; }
  .ms-controls { top: 214px; } /* sobre la foto (240px de alto en móvil) */
}

/* Tarjetas de producto del carrusel de marcas: foto limpia sobre blanco, nombre a 2 líneas, precio protagonista, estado en pastilla */
.marcas-slider .elc-grid { gap: 20px; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card { padding: 0; border-radius: 10px; overflow: hidden; border-color: var(--borde); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(20,37,28,0.16); border-color: var(--verde-medio); }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .thumb { aspect-ratio: 1 / 0.92; margin: 0; border-radius: 0; background: #fff; border-bottom: 1px solid var(--crema-2); }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .thumb img { object-fit: contain; padding: 14px; transition: transform .4s ease; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card:hover .thumb img { transform: scale(1.06); }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .marca { margin: 14px 16px 0; font-size: 0.68rem; letter-spacing: 1px; color: var(--naranja); }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .nombre { margin: 4px 16px 0; font-size: 0.92rem; line-height: 1.3; font-weight: 600; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-transform: none; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .stars { margin: 6px 16px 0; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .precio-row { margin: 10px 16px 0; font-size: 1.4rem; font-weight: 800; color: var(--verde-oscuro); }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .stock { align-self: flex-start; margin: 8px 16px 14px; padding: 4px 10px 4px 9px; border-radius: 40px; background: #e8f3ea; color: var(--ok); font-size: 0.72rem; font-weight: 700; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .stock.bajo { background: #fbf1da; color: #9a6a0a; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .stock.agotado { background: #f9e5e2; color: var(--alerta); }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .card-actions { padding: 0 16px 16px; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .card-actions .btn { display: flex; align-items: center; justify-content: center; border-radius: 6px; padding: 11px; background: var(--verde-oscuro); transition: background .2s; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .card-actions .btn:hover { background: var(--naranja); }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .card-actions .btn[disabled] { background: var(--crema-2); color: var(--texto-suave); opacity: 1; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .fav-btn { width: 44px; border-radius: 6px; transition: color .2s, border-color .2s; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .fav-btn:hover { border-color: var(--alerta); color: var(--alerta) !important; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .tags-wrap { top: 12px; left: 12px; }

:is(.marcas-slider, .product-panel, .guia-material) .product-card .specs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 16px 0; padding: 0; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .specs li { background: var(--crema); border: 1px solid var(--borde); border-radius: 4px; padding: 2px 8px; font-size: 0.72rem; font-weight: 600; color: var(--texto-suave); }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .nombre { font-size: 1rem; font-weight: 700; min-height: 2.6em; }

/* Carrusel "Lo que más se está llevando": tarjetas algo más anchas y precios de oferta legibles */
.product-panel .product-carousel { gap: 16px; padding: 4px 2px 10px; }
.product-panel .product-carousel .product-card { flex: 0 0 196px; width: 196px; }
.product-panel .product-card .nombre { font-size: 0.92rem; }
.product-panel .product-card .precio-row { flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 1.3rem; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .precio-row ins { text-decoration: none; color: var(--naranja); order: 1; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .precio-row del { order: 2; font-size: 0.82rem; font-weight: 500; color: var(--texto-suave); text-decoration: line-through; opacity: .8; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .precio-row .woocommerce-Price-amount { text-decoration: inherit; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .tag.dto { background: var(--naranja); font-size: 0.72rem; padding: 4px 9px; border-radius: 4px; }

/* Pestañas del carrusel de productos: pastillas con icono */
.product-panel .product-tabs { gap: 8px; border-bottom: 0; margin-bottom: 18px; }
.product-panel .product-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: 1px solid var(--borde); border-radius: 40px; background: #fff; font-size: 0.88rem; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.product-panel .product-tabs button .icon { width: 16px; height: 16px; color: var(--naranja); transition: color .2s; }
/* Pestaña Ofertas: el mismo distintivo "%" que el botón OFERTAS del menú */
.product-panel .product-tabs .tab-dto { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--naranja); color: #fff; font-size: 0.7rem; font-weight: 900; line-height: 1; }
.product-panel .product-tabs button:hover { border-color: var(--texto-suave); color: var(--texto); }
.product-panel .product-tabs button.active { background: var(--verde-oscuro); border-color: var(--verde-oscuro); color: #fff; }
.product-panel .product-tabs button.active .icon { color: #fff; }

/* Estado de stock sobre la foto (arriba a la derecha) en las tarjetas del carrusel de marcas y de productos */
:is(.marcas-slider, .product-panel, .guia-material) .product-card .stock { position: absolute; top: 12px; right: 12px; z-index: 2; margin: 0; align-self: auto; box-shadow: 0 1px 4px rgba(0,0,0,0.12); backdrop-filter: blur(3px); }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .stock { background: rgba(232,243,234,0.95); }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .stock.bajo { background: rgba(251,241,218,0.97); }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .stock.agotado { background: rgba(249,229,226,0.97); }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .precio-row { margin-bottom: 14px; }

/* Tarjetas de producto (carrusel de marcas, "Lo que más se está llevando", guías): versión pulida */
:is(.marcas-slider, .product-panel, .guia-material) .product-card { border-radius: 14px; border-color: #e6e2d8; box-shadow: 0 1px 3px rgba(20,37,28,0.04); }
/* Foto sobre un fondo cálido; multiply funde el blanco de las fotos de producto con ese fondo */
:is(.marcas-slider, .product-panel, .guia-material) .product-card .thumb { aspect-ratio: 1 / 0.86; border-bottom: 0; background: radial-gradient(ellipse at 50% 40%, #ffffff 0%, #f4f2ec 75%, #ece9e0 100%); }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .thumb img { padding: 18px; mix-blend-mode: multiply; }
/* Texto compacto y sin huecos: el espacio sobrante va encima del precio, que queda alineado al pie en toda la fila */
:is(.marcas-slider, .product-panel, .guia-material) .product-card .marca { margin-top: 14px; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .nombre { min-height: 0; margin-top: 3px; font-size: 0.98rem; line-height: 1.3; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .specs { margin-top: 10px; gap: 5px; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .specs li { background: var(--crema); border: 0; border-radius: 40px; padding: 3px 10px; font-size: 0.7rem; font-weight: 700; color: var(--verde-medio); }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .precio-row { margin-top: auto; padding-top: 14px; font-size: 1.45rem; letter-spacing: -0.3px; }
/* Botones: carrito con texto, y si está agotado lo dice en lugar de un botón vacío */
:is(.marcas-slider, .product-panel, .guia-material) .product-card .card-actions { gap: 8px; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .card-actions .btn { gap: 8px; border-radius: 8px; font-size: 0.82rem; font-weight: 700; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .card-actions .btn:not([disabled])::after { content: "Añadir"; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .card-actions .btn[disabled] { background: repeating-linear-gradient(-45deg, #f4f2ec 0 8px, #efece4 8px 16px); color: #9a9a90; cursor: not-allowed; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .card-actions .btn[disabled]::after { content: "Sin stock"; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .fav-btn { border-radius: 8px; border-color: #e6e2d8; }

/* Estado de stock sobre la foto: pastilla blanca con punto de color (sobria, se lee sobre cualquier foto) */
:is(.marcas-slider, .product-panel, .guia-material) .product-card .stock,
:is(.marcas-slider, .product-panel, .guia-material) .product-card .stock.bajo,
:is(.marcas-slider, .product-panel, .guia-material) .product-card .stock.agotado { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 40px; background: rgba(255,255,255,0.94); box-shadow: 0 2px 8px rgba(20,37,28,0.12); color: var(--texto); font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(47,125,60,0.15); }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .stock.bajo::before { background: #d99a1c; box-shadow: 0 0 0 3px rgba(217,154,28,0.18); }
/* Agotado: etiqueta oscura y foto atenuada, para que se distinga de un vistazo sin gritar en rojo */
:is(.marcas-slider, .product-panel, .guia-material) .product-card .stock.agotado { background: rgba(28,28,26,0.82); color: #fff; backdrop-filter: blur(4px); }
:is(.marcas-slider, .product-panel, .guia-material) .product-card .stock.agotado::before { background: #ff7b6b; box-shadow: none; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card.outofstock .thumb img { filter: grayscale(0.55); opacity: 0.6; transition: opacity .3s ease, filter .3s ease, transform .4s ease; }
:is(.marcas-slider, .product-panel, .guia-material) .product-card.outofstock:hover .thumb img { filter: none; opacity: 1; }

.product-panel .product-tabs .tab-new { background: var(--naranja); color: #fff; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.6px; line-height: 1; padding: 4px 6px; border-radius: 4px; transform: rotate(-4deg); }

/* Portada: dos pilares (Carpfishing / Depredadores) */
.dual-banner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.dual-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 210px; padding: 24px 28px; color: #fff; border-radius: var(--radius); overflow: hidden; background-size: cover; background-position: center; box-shadow: var(--sombra); isolation: isolate; }
.dual-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,14,10,0.05) 20%, rgba(10,14,10,0.78) 100%); transition: background .3s ease; }
.dual-tile:hover::before { background: linear-gradient(180deg, rgba(10,14,10,0.15) 10%, rgba(10,14,10,0.88) 100%); }
.dual-tile { transition: transform .25s ease; }
.dual-tile:hover { transform: translateY(-3px); }
.dual-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 1.9rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; line-height: 1; }
.dual-kicker em { font-style: normal; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.4px; background: var(--naranja); padding: 5px 10px; border-radius: 40px; }
.dual-tile strong { font-size: 1rem; font-weight: 600; max-width: 28em; }
.dual-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 700; font-size: 0.9rem; }
.dual-cta svg { width: 16px; height: 16px; transition: transform .2s ease; }
.dual-tile:hover .dual-cta svg { transform: translateX(4px); }
@media (max-width: 800px) { .dual-banner { grid-template-columns: 1fr; } .dual-tile { min-height: 170px; padding: 20px; } .dual-kicker { font-size: 1.5rem; } }

/* Depredadores: bloque propio */
.marca-dest-depre { background: linear-gradient(120deg, #07202a 0%, #0d3a47 60%, #14251c 100%); }
.marca-dest-depre .marca-dest-media { background: radial-gradient(ellipse at 60% 45%, #ffffff 0%, #dbe6e8 55%, #a9bcc0 100%); }
.marca-dest-depre .marca-dest-nombre { font-size: clamp(2.8rem, 6vw, 4.8rem); }
.depre-subcats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.depre-sub { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; background: #fff; border: 1px solid var(--borde); border-radius: 10px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.depre-sub:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(20,37,28,0.14); border-color: var(--verde-medio); }
.depre-sub-img { flex: 0 0 68px; height: 68px; border-radius: 8px; background: #fff; border: 1px solid var(--crema-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.depre-sub-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.depre-sub-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.depre-sub-txt strong { font-size: 0.92rem; line-height: 1.25; }
.depre-sub-txt small { font-size: 0.74rem; color: var(--texto-suave); }
.depre-panel { margin-top: 22px; border: 1px solid var(--borde); border-radius: 10px; }
@media (max-width: 1000px) { .depre-subcats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .depre-sub-img { flex-basis: 56px; height: 56px; } .depre-sub { gap: 10px; } }

/* Depredadores: foto de ambiente (lucio) en lugar de collage de producto, fundida con el panel */
.marca-dest-depre .marca-dest-media.depre-foto { background-size: cover; background-position: 40% 40%; display: block; padding: 0; }
.marca-dest-depre .marca-dest-media.depre-foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0d3a47 0%, rgba(13,58,71,0.55) 22%, rgba(13,58,71,0) 55%); }
.marca-dest-depre .marca-dest-tag svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
@media (max-width: 900px) { .marca-dest-depre .marca-dest-media.depre-foto::before { background: linear-gradient(180deg, rgba(13,58,71,0) 55%, rgba(13,58,71,0.9) 100%); } }

/* Banner "Cebos que marcan la diferencia": foto del producto, degradado granate y logo grande sin fondo */
.banner-cebos { background-size: cover; background-position: 62% center; }
.banner-cebos.dark::before { background: linear-gradient(180deg, rgba(18,8,10,0.92) 0%, rgba(18,8,10,0.55) 42%, rgba(18,8,10,0.2) 62%, rgba(18,8,10,0.88) 100%); }
.banner-cebos .marcas-logos { justify-content: center; padding-top: 14px; }
.banner-cebos .marcas-logos img { height: 84px; width: auto; border-radius: 0; background: none; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5)); }

/* Banner "El carpfishing es lo nuestro": foto del pescador con carpa, texto claro sobre degradado oscuro */
.banner-carp { align-items: flex-end; justify-content: flex-start; background-size: cover; background-position: 38% center; min-height: 340px; }
.banner-carp::before { background: linear-gradient(180deg, rgba(10,14,10,0.1) 0%, rgba(10,14,10,0.35) 35%, rgba(10,14,10,0.9) 100%); }
.banner-carp .txt { width: 100%; padding: 24px 22px; color: #fff; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.banner-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--naranja); color: #fff; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; padding: 6px 12px; border-radius: 40px; margin-bottom: 12px; }
.banner-tag svg { width: 13px; height: 13px; }
.banner-carp h3 { color: #fff; font-size: 2rem; line-height: 1.05; font-weight: 900; margin: 0 0 10px; }
.banner-carp p { color: rgba(255,255,255,0.9); font-size: 0.85rem; margin: 0 0 16px; }
.banner-carp .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.banner-carp .btn-outline-light { border: 2px solid #fff; color: #fff; background: transparent; }
.banner-carp .btn-outline-light:hover { background: #fff; color: var(--verde-oscuro); }
@media (max-width: 900px) { .banner-carp::before { background: linear-gradient(180deg, rgba(10,14,10,0.1) 0%, rgba(10,14,10,0.9) 100%); } .banner-carp .txt { padding: 24px 20px; } }

/* Panel izquierdo del carrusel de productos: Carpfishing y Depredadores con el mismo peso */
.banner-duo { padding: 0; display: flex; flex-direction: column; gap: 2px; min-height: 340px; background: #fff; }
.banner-duo::before { display: none; }
.duo-tile { position: relative; flex: 1 1 0; min-height: 170px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 4px; padding: 18px 20px; color: #fff; background-size: cover; background-position: center; overflow: hidden; isolation: isolate; }
.duo-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,14,10,0.05) 20%, rgba(10,14,10,0.85) 100%); transition: background .3s ease; }
.duo-tile:hover::before { background: linear-gradient(180deg, rgba(10,14,10,0.2) 10%, rgba(10,14,10,0.92) 100%); }
.duo-tile h3 { margin: 0; font-size: 1.55rem; line-height: 1; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: #fff; }
.duo-tile p { margin: 0; font-size: 0.8rem; color: rgba(255,255,255,0.9); }
.duo-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.8rem; font-weight: 700; }
.duo-cta svg { width: 14px; height: 14px; transition: transform .2s ease; }
.duo-tile:hover .duo-cta svg { transform: translateX(4px); }
.duo-badge { position: absolute; top: 12px; left: 12px; background: var(--naranja); color: #fff; font-size: 0.68rem; font-weight: 800; padding: 5px 10px; border-radius: 40px; }
@media (max-width: 900px) { .banner-duo { flex-direction: row; min-height: 0; } .duo-tile { min-height: 190px; } }
@media (max-width: 520px) { .banner-duo { flex-direction: column; } }

/* Guías: hero a todo el ancho con el texto dentro de la imagen */
.guias-hero { position: relative; display: flex; align-items: center; min-height: 440px; background: var(--verde-oscuro); isolation: isolate; overflow: hidden; }
.guias-hero .foto { position: absolute; inset: 0; z-index: -2; min-height: 0; background-size: cover; background-position: 70% center; }
.guias-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,14,10,0.88) 0%, rgba(10,14,10,0.62) 40%, rgba(10,14,10,0.1) 75%, rgba(10,14,10,0) 100%); }
.guias-hero .txt { width: 100%; max-width: 1500px; margin: 0 auto; padding: 56px 32px; color: #fff; }
.guias-hero .txt > * { max-width: 560px; }
.guias-hero .eyebrow { display: inline-flex; background: var(--naranja); color: #fff; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; padding: 7px 14px; border-radius: 40px; margin-bottom: 18px; }
.guias-hero h1 { color: #fff; font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.05; font-weight: 900; margin: 0 0 16px; }
.guias-hero p { color: rgba(255,255,255,0.9); font-size: 1.05rem; max-width: 46ch; }
.guias-hero .btn { background: var(--naranja); }
.guias-hero .btn:hover { background: var(--naranja-hover); }
@media (max-width: 900px) { .guias-hero { min-height: 380px; align-items: flex-end; } .guias-hero::before { background: linear-gradient(180deg, rgba(10,14,10,0.2) 0%, rgba(10,14,10,0.9) 100%); } .guias-hero .txt { padding: 32px 20px; } }

/* Guía individual: hero con imagen, cuerpo legible, material relacionado y "sigue leyendo" */
.guia-hero-art { position: relative; min-height: 420px; display: flex; flex-direction: column; justify-content: space-between; background-size: cover; background-position: center; color: #fff; isolation: isolate; padding: 18px 0 44px; }
.guia-hero-art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,14,10,0.55) 0%, rgba(10,14,10,0.3) 35%, rgba(10,14,10,0.9) 100%); }
.guia-hero-art .breadcrumb, .guia-hero-art .breadcrumb a { color: rgba(255,255,255,0.85); margin: 0; }
.guia-hero-art-txt { margin-top: 110px; max-width: 820px; }
.guia-hero-tag { display: inline-block; background: var(--naranja); color: #fff; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; padding: 7px 14px; border-radius: 40px; margin-bottom: 16px; }
.guia-hero-art h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.08; font-weight: 900; margin: 0 0 16px; }
.guia-hero-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; font-size: 0.85rem; color: rgba(255,255,255,0.88); }
.guia-hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.guia-hero-meta svg { width: 15px; height: 15px; }

.guia-cuerpo { max-width: 760px; font-size: 1.1rem; line-height: 1.75; }
.guia-cuerpo > p:first-of-type { font-size: 1.25rem; line-height: 1.6; font-weight: 500; color: var(--texto); }
.guia-cuerpo p { color: #2c2c28; margin: 0 0 20px; }
.guia-cuerpo h2 { position: relative; margin: 44px 0 14px; padding-left: 16px; font-size: 1.55rem; line-height: 1.2; }
.guia-cuerpo h2::before { content: ""; position: absolute; left: 0; top: 0.12em; bottom: 0.12em; width: 5px; border-radius: 3px; background: var(--naranja); }
.guia-cuerpo h3 { margin: 30px 0 10px; font-size: 1.2rem; }
.guia-cuerpo ul, .guia-cuerpo ol { margin: 0 0 22px; padding-left: 24px; }
.guia-cuerpo li { margin-bottom: 8px; }
.guia-cuerpo li::marker { color: var(--naranja); font-weight: 700; }
.guia-cuerpo img { border-radius: 8px; margin: 28px 0; }
.guia-cuerpo blockquote { margin: 28px 0; padding: 16px 22px; border-left: 5px solid var(--verde-medio); background: var(--crema-2); border-radius: 0 8px 8px 0; font-size: 1.05rem; }

.guia-cta { max-width: 760px; margin: 40px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 24px 28px; border-radius: 10px; color: #fff; background: linear-gradient(120deg, var(--verde-oscuro), var(--verde-medio)); }
.guia-cta h3 { margin: 0 0 4px; font-size: 1.2rem; color: #fff; }
.guia-cta p { margin: 0; font-size: 0.92rem; color: rgba(255,255,255,0.85); }

.guia-material, .guia-sigue { margin-top: 56px; }
.guia-material .elc-productos-head h2, .guia-sigue h2 { font-size: 1.5rem; margin: 0; }
.guia-material .elc-productos-head { margin-bottom: 18px; }
.guia-sigue h2 { margin-bottom: 18px; }
.guia-material .elc-grid { gap: 20px; }
.guia-sigue-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.guia-sigue-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 220px; padding: 20px; border-radius: 10px; overflow: hidden; color: #fff; background-size: cover; background-position: center; isolation: isolate; transition: transform .25s ease; }
.guia-sigue-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,14,10,0) 25%, rgba(10,14,10,0.88) 100%); }
.guia-sigue-card:hover { transform: translateY(-3px); }
.guia-sigue-card small { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: #ffb48a; }
.guia-sigue-card span { font-size: 1.1rem; font-weight: 800; line-height: 1.25; color: #fff; }
@media (max-width: 900px) { .guia-hero-art { min-height: 340px; } .guia-hero-art-txt { margin-top: 70px; } .guia-sigue-grid { grid-template-columns: 1fr; } .guia-cuerpo { font-size: 1.04rem; } }

/* Guía individual: aire entre la imagen de cabecera y el texto */
.guia-articulo > article.section { padding-top: 64px; padding-bottom: 72px; }
.guia-cuerpo > :first-child { margin-top: 0; }
@media (max-width: 900px) { .guia-articulo > article.section { padding-top: 40px; padding-bottom: 48px; } }

/* Guía individual: artículo en tarjeta + barra lateral fija, material a todo el ancho */
.guia-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; max-width: 1180px; margin: 0 auto; }
.guia-main { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 44px 52px; box-shadow: 0 4px 18px rgba(20,37,28,0.06); }
.guia-main .guia-cuerpo { max-width: none; margin: 0; }
.guia-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 20px; }
.guia-side .guia-cta { max-width: none; margin: 0; display: block; padding: 26px; }
.guia-side .guia-cta h3 { font-size: 1.25rem; margin-bottom: 8px; }
.guia-side .guia-cta p { margin-bottom: 18px; line-height: 1.5; }
.guia-side-box { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 22px; }
.guia-side-box h3 { margin: 0 0 14px; font-size: 1.1rem; }
.guia-side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.guia-side-list a { display: flex; gap: 14px; align-items: center; }
.guia-side-list .thumb { flex: 0 0 84px; height: 64px; border-radius: 8px; background-size: cover; background-position: center; transition: transform .25s ease; }
.guia-side-list a:hover .thumb { transform: scale(1.04); }
.guia-side-list .txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.guia-side-list small { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--naranja); }
.guia-side-list strong { font-size: 0.9rem; line-height: 1.3; }
.guia-side-list a:hover strong { text-decoration: underline; }
.guia-side-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 700; font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px; }
.guia-side-all svg { width: 14px; height: 14px; }
.guia-material { max-width: 1180px; margin: 64px auto 0; padding-top: 40px; border-top: 1px solid var(--borde); }
@media (max-width: 1000px) { .guia-layout { grid-template-columns: 1fr; gap: 28px; } .guia-side { position: static; } .guia-main { padding: 28px 22px; } }
@media (max-width: 900px) { .guia-material .elc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* FAQ: cabecera con buscador, preguntas en tarjetas y bloque de ayuda */
.faq-hero { position: relative; padding: 18px 0 84px; color: #fff; background: radial-gradient(ellipse at 85% 0%, rgba(232,98,31,0.28) 0%, rgba(232,98,31,0) 55%), linear-gradient(120deg, var(--verde-oscuro) 0%, var(--verde-medio) 100%); }
.faq-hero .breadcrumb, .faq-hero .breadcrumb a { color: rgba(255,255,255,0.8); }
.faq-hero-txt { max-width: 720px; margin: 28px auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.faq-hero-tag { display: inline-flex; align-items: center; gap: 7px; background: var(--naranja); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; padding: 7px 14px; border-radius: 40px; margin-bottom: 16px; }
.faq-hero-tag svg { width: 15px; height: 15px; }
.faq-hero h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 900; line-height: 1.1; margin: 0 0 12px; }
.faq-hero-txt > p { color: rgba(255,255,255,0.88); font-size: 1.02rem; margin: 0 0 26px; max-width: 52ch; }
.faq-search { position: relative; width: 100%; max-width: 560px; }
.faq-search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: var(--texto-suave); pointer-events: none; }
.faq-search input { width: 100%; padding: 16px 20px 16px 48px; border: 0; border-radius: 40px; font: inherit; font-size: 0.98rem; background: #fff; color: var(--texto); box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.faq-search input:focus { outline: 3px solid rgba(232,98,31,0.55); }

.faq-section { padding: 0 0 56px; }
.faq-section .faq-categorias { margin: -22px auto 34px; position: relative; z-index: 2; }
.faq-categorias button { box-shadow: 0 2px 8px rgba(20,37,28,0.1); cursor: pointer; transition: transform .2s ease, border-color .2s ease; }
.faq-categorias button:hover { transform: translateY(-2px); border-color: var(--verde-medio); }
.faq-list { max-width: 860px; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: #fff; border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; transition: box-shadow .25s ease, border-color .25s ease; }
.faq-item:hover { border-color: var(--verde-medio); }
.faq-item[open] { border-color: var(--naranja); box-shadow: 0 8px 24px rgba(20,37,28,0.1); }
.faq-item.faq-nomatch { display: none !important; }
.faq-item summary { padding: 20px 24px; font-size: 1.04rem; gap: 16px; }
.faq-item summary::after { content: "+"; flex: 0 0 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--crema-2); color: var(--texto); font-size: 1.3rem; line-height: 1; transition: background .2s, color .2s, transform .25s; }
.faq-item[open] summary::after { content: "+"; background: var(--naranja); color: #fff; transform: rotate(45deg); }
.faq-item .respuesta { margin: 0 24px 22px; padding: 16px 0 0; font-size: 0.98rem; line-height: 1.65; color: #46463f; border-top: 1px solid var(--crema-2); }
.faq-item .respuesta p:last-child { margin-bottom: 0; }
.faq-vacio { text-align: center; color: var(--texto-suave); padding: 30px 0; }

.faq-ayuda { padding: 0 0 72px; }
.faq-ayuda-card { max-width: 860px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 32px 36px; border-radius: 14px; color: #fff; background: linear-gradient(120deg, var(--verde-oscuro), var(--verde-medio)); }
.faq-ayuda-card h2 { margin: 0 0 6px; font-size: 1.4rem; color: #fff; }
.faq-ayuda-card p { margin: 0; color: rgba(255,255,255,0.85); max-width: 46ch; line-height: 1.5; }
@media (max-width: 700px) { .faq-hero { padding-bottom: 64px; } .faq-item summary { padding: 16px 18px; font-size: 0.98rem; } .faq-item .respuesta { margin: 0 18px 18px; } .faq-ayuda-card { padding: 24px 22px; } }

/* FAQ: botón +/× dibujado con líneas (centrado exacto al girar) */
.faq-item summary::after { content: ""; --ico: var(--texto); background: linear-gradient(var(--ico), var(--ico)) center / 14px 2px no-repeat, linear-gradient(var(--ico), var(--ico)) center / 2px 14px no-repeat, var(--crema-2); font-size: 0; transition: background-color .2s, transform .25s; }
.faq-item:hover summary::after { background-color: #e3dfd2; }
.faq-item[open] summary::after { content: ""; --ico: #fff; background-color: var(--naranja); transform: rotate(45deg); }

/* FAQ: cabecera con foto de fondo y el logo como marca de agua */
.faq-hero { overflow: hidden; isolation: isolate; background: linear-gradient(120deg, rgba(20,37,28,0.94) 0%, rgba(28,43,32,0.86) 55%, rgba(51,71,47,0.78) 100%), radial-gradient(ellipse at 85% 0%, rgba(232,98,31,0.28) 0%, rgba(232,98,31,0) 55%), url('../images/hero-home.jpg') center / cover no-repeat, var(--verde-oscuro); }
.faq-hero::after { content: ""; position: absolute; z-index: -1; right: 3%; top: 50%; width: min(520px, 42vw); aspect-ratio: 900 / 464; transform: translateY(-50%) rotate(-6deg); background: url('../images/logo.png') center / contain no-repeat; opacity: 0.1; pointer-events: none; }
.faq-hero::before { content: ""; position: absolute; z-index: -1; left: -4%; bottom: -30%; width: min(420px, 36vw); aspect-ratio: 900 / 464; transform: rotate(8deg); background: url('../images/logo.png') center / contain no-repeat; opacity: 0.05; pointer-events: none; }
@media (max-width: 700px) { .faq-hero::after { width: 78vw; right: -12%; opacity: 0.08; } .faq-hero::before { display: none; } }

/* Catálogo / categoría: cabecera tipo banner con la foto de fondo y el texto encima */
.plp-top { position: relative; padding: 14px 0 0; margin-bottom: 28px; background-size: cover; background-position: center; background-color: var(--verde-oscuro); color: #fff; isolation: isolate; }
.plp-top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,14,10,0.9) 0%, rgba(10,14,10,0.72) 45%, rgba(10,14,10,0.25) 100%); }
.plp-top-oferta::before { background: linear-gradient(90deg, rgba(10,14,10,0.9) 0%, rgba(40,16,6,0.72) 45%, rgba(232,98,31,0.25) 100%); }
.plp-top .breadcrumb, .plp-top .breadcrumb a { color: rgba(255,255,255,0.85); padding: 0; margin: 0; }
.plp-top .plp-head { margin: 0; padding: 48px 0 56px; }
.plp-top .plp-title h1 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 900; line-height: 1.05; margin: 14px 0 14px; text-transform: none; }
.plp-top .plp-title .desc { color: rgba(255,255,255,0.9); font-size: 1.05rem; max-width: 56ch; }
.plp-kicker { display: inline-flex; align-items: center; gap: 7px; background: var(--naranja); color: #fff; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; padding: 7px 14px; border-radius: 40px; }
.plp-kicker svg { width: 14px; height: 14px; }
.plp-top .plp-title .total { display: inline-flex; align-items: baseline; gap: 6px; margin-top: 4px; padding: 7px 16px; border-radius: 40px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); color: #fff; font-size: 0.92rem; backdrop-filter: blur(4px); }
.plp-top .plp-title .total strong { font-size: 1.1rem; }
@media (max-width: 700px) { .plp-top .plp-head { padding: 32px 0 38px; } }

/* Banner de modalidades: 3 pilares (Carpfishing / Depredadores / Feeder) */
.dual-banner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dual-banner .dual-kicker { font-size: 1.55rem; flex-wrap: wrap; row-gap: 8px; }
@media (max-width: 1000px) { .dual-banner { grid-template-columns: 1fr; } .dual-banner .dual-kicker { font-size: 1.5rem; } }

/* Encuadre del fondo de cabecera por categoría */
.plp-top.plp-cat-feeder { background-position: 70% 88%; }

/* ==========================================================================
   PORTADA: animaciones (aparición al hacer scroll + efectos al pasar el ratón)
   Todo se desactiva si el visitante pide reducir el movimiento.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Cabecera: el bloque de texto entra al cargar, con sus elementos escalonados */
  .hero-home .hero-card { animation: heroEntra .7s cubic-bezier(.2,.7,.2,1) both; }
  .hero-home .hero-card > * { animation: heroEntra .6s cubic-bezier(.2,.7,.2,1) both; }
  .hero-home .hero-card > :nth-child(1) { animation-delay: .15s; }
  .hero-home .hero-card > :nth-child(2) { animation-delay: .27s; }
  .hero-home .hero-card > :nth-child(3) { animation-delay: .39s; }
  .hero-home .hero-card > :nth-child(4) { animation-delay: .51s; }
  .hero-home .hero-foto-movil { animation: fotoEntra 1.2s ease-out both; }

  /* Aparición al hacer scroll (main.js marca los bloques con data-reveal) */
  .reveal-on [data-reveal] { opacity: 0; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; }
  .reveal-on [data-reveal="up"] { transform: translateY(28px); }
  .reveal-on [data-reveal="left"] { transform: translateX(-32px); }
  .reveal-on [data-reveal="right"] { transform: translateX(32px); }
  .reveal-on [data-reveal="zoom"] { transform: scale(.92) translateY(14px); }
  .reveal-on [data-reveal].is-revealed { opacity: 1; transform: none; }

  /* Modalidades: la tarjeta sube y la foto se acerca */
  .modalidad-card { transition: transform .3s ease, box-shadow .3s ease; }
  .modalidad-card::after { content: ""; position: absolute; inset: 0; background: inherit; background-size: cover; transform: scale(1); transition: transform .6s ease; z-index: 0; }
  .modalidad-card::before { z-index: 1; transition: background .3s ease; }
  .modalidad-card span { z-index: 2; transition: transform .3s ease; }
  .modalidad-card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(20,37,28,0.25); }
  .modalidad-card:hover::after { transform: scale(1.08); }
  .modalidad-card:hover span { transform: translateY(-3px); }

  /* Guías: igual que las modalidades */
  .home-guia-card { overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
  .home-guia-card::after { content: ""; position: absolute; inset: 0; background: inherit; background-size: cover; transition: transform .6s ease; z-index: 0; }
  .home-guia-card::before { z-index: 1; }
  .home-guia-card span { z-index: 2; }
  .home-guia-card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0,0,0,0.3); }
  .home-guia-card:hover::after { transform: scale(1.08); }

  /* Ventajas: el icono da un pequeño salto */
  .ventajas .ventaja .ico svg { transition: transform .35s cubic-bezier(.3,1.6,.5,1), color .25s ease; }
  .ventajas .ventaja:hover .ico svg { transform: translateY(-4px) scale(1.08); color: var(--naranja); }

  /* Banner de cebos: la foto se desplaza despacio al pasar el ratón */
  .banner-cebos { transition: background-position 1.2s ease; }
  .banner-cebos:hover { background-position: 56% center; }

  /* Tienda física: la foto se acerca */
  .home-tienda .foto { transition: transform .8s ease; }
  .home-tienda { isolation: isolate; }
  .home-tienda:hover .foto { transform: scale(1.05); }

  /* Depredadores: la foto del banner se acerca */
  .marca-dest-depre .depre-foto { transition: transform .8s ease; }
  .marca-dest-depre { isolation: isolate; }
  .marca-dest-depre:hover .depre-foto { transform: scale(1.04); }

  /* Banner final: la foto de fondo se mueve muy despacio (efecto "Ken Burns") */
}
@media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
  .cta-final { background-size: 115% auto; animation: kenBurns 24s ease-in-out infinite alternate; }
}
@keyframes heroEntra { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fotoEntra { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes kenBurns { from { background-position: 30% 40%; } to { background-position: 70% 60%; } }

/* Resto de páginas (Quiénes somos, Marcas, catálogo/Ofertas, Guías, FAQ): efectos al pasar el ratón */
@media (prefers-reduced-motion: no-preference) {
  /* Marcas: la tarjeta sube y la inicial se vuelve naranja */
  .marca-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
  .marca-card:hover { transform: translateY(-4px); border-color: var(--naranja); }
  .marca-card .inicial { transition: background .25s ease, color .25s ease, transform .3s cubic-bezier(.3,1.6,.5,1); }
  .marca-card:hover .inicial { background: var(--naranja); color: #fff; transform: scale(1.1); }
  /* Guías: la tarjeta sube un poco más y la flecha de "Leer" avanza */
  .guia-tile { transition: transform .3s ease, box-shadow .3s ease; }
  .guia-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,0.25); }
  .guia-tile .leer svg { transition: transform .25s ease; }
  .guia-tile:hover .leer svg { transform: translateX(4px); }
  /* Quiénes somos: iconos de modalidades con salto */
  .modalidades-iconos .ico svg { transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
  .modalidades-iconos a:hover .ico svg { transform: translateY(-5px) scale(1.06); }
  .dos-columnas-cta .col-cta { transition: transform .3s ease, box-shadow .3s ease; }
  .dos-columnas-cta .col-cta:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20,37,28,0.18); }
}

/* Catálogo: "Completa tu equipo" con fotos reales de producto en tarjetas blancas */
.completa-box { padding: 18px 20px; border-radius: 12px; }
.completa-box h2 { font-size: 1.25rem; font-weight: 800; }
.completa-box .completa-equipo { gap: 12px; }
.completa-box .completa-equipo a.completa-item { aspect-ratio: auto; padding: 0; display: flex; flex-direction: column; align-items: stretch; background: #fff; color: var(--texto); border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; font-size: 0.82rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.completa-box .completa-equipo a.completa-item::before { display: none; }
.completa-item .ci-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: radial-gradient(ellipse at 50% 40%, #ffffff 0%, #f4f2ec 80%); color: var(--texto-suave); }
.completa-item .ci-img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; mix-blend-mode: multiply; transition: transform .4s ease; }
.completa-item .ci-img .icon { width: 34px; height: 34px; opacity: .5; }
.completa-item .ci-nombre { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 9px 12px; font-weight: 800; border-top: 1px solid var(--crema-2); }
.completa-item .ci-nombre .icon { width: 14px; height: 14px; color: var(--naranja); transition: transform .25s ease; }
.completa-box .completa-equipo a.completa-item:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(20,37,28,0.14); border-color: var(--naranja); }
.completa-item:hover .ci-img img { transform: scale(1.08); }
.completa-item:hover .ci-nombre .icon { transform: translateX(3px); }

/* Marcas: tarjeta con la misma estructura con o sin logo (zona visual fija + pie con nombre y nº de productos) */
.marcas-grid .marca-card { padding: 0; gap: 0; justify-content: flex-start; align-items: stretch; overflow: hidden; border-radius: 10px; }
.marca-card .marca-visual { display: flex; align-items: center; justify-content: center; height: 92px; padding: 10px 14px; background: #fff; }
.marca-card .marca-visual img { width: auto; height: 100%; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .3s ease; }
.marca-card .marca-visual .inicial { width: 52px; height: 52px; margin: 0; font-size: 1.15rem; font-weight: 900; text-transform: uppercase; }
.marca-card .marca-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; background: var(--crema); border-top: 1px solid var(--crema-2); text-align: left; transition: background .25s ease; }
.marca-card .marca-pie .nombre { min-width: 0; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca-card .marca-pie .num { flex: 0 0 auto; font-size: 0.68rem; font-weight: 700; color: var(--texto-suave); background: #fff; border-radius: 40px; padding: 2px 8px; }
.marca-card:hover .marca-pie { background: rgba(232,98,31,0.1); }
.marca-card:hover .marca-visual img { transform: scale(1.06); }