/*
Theme Name: Agencia Estuma — Tienda
Theme URI: https://agenciaestuma.com
Author: Agencia Estuma
Author URI: https://agenciaestuma.com
Description: Plantilla base WooCommerce reutilizable de Agencia Estuma. Diseñada para tiendas artesanas (obradores, boutiques, artesanía) con portada personalizable y colores editables desde el Personalizador. Pensada para reskin rápido por cliente sin tocar código.
Version: 1.0.139
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: agenciaestuma-tienda
Tags: e-commerce, food-and-drink, custom-colors, custom-menu, featured-images, translation-ready
WC requires at least: 7.0
WC tested up to: 9.5
*/

/* ==========================================================================
   1. Tokens de diseño — paleta editable por cliente en Personalizar → Marca
   ========================================================================== */
:root {
  /* Color — se sobrescriben desde el Personalizador (aetienda_color_primario / secundario) */
  --primario: #004F71;       /* acentos, CTA — azul Estuma */
  --primario-osc: #003052;   /* hover */
  --secundario: #12293A;     /* títulos, contraste — azul marino Estuma */
  --secundario-osc: #000A1B; /* profundo */

  /* Fondos y texto */
  --miga: #FBF6EC;        /* fondo principal, tono papel */
  --miga-2: #F3EADA;      /* fondo alterno */
  --tinta: #12293A;       /* texto */
  --tinta-suave: #6B4F50; /* texto secundario */
  --blanco: #FFFFFF;

  /* Alias de compatibilidad (mismo valor, nombres alternativos) */
  --corteza: var(--secundario);
  --corteza-osc: var(--secundario-osc);
  --dorado: var(--primario);
  --dorado-osc: var(--primario-osc);
  --valle: var(--secundario);

  /* Tipografía */
  --f-display: "Fraunces", Georgia, serif;
  --f-body: "Karla", "Helvetica Neue", Arial, sans-serif;
  --f-menu: "Karla", "Helvetica Neue", Arial, sans-serif;

  /* Tamaños de encabezado fijos (H1-H6) — los usa el sistema de tamaño
     por módulo de Agencia Estuma → Home, para elegir "que este título se
     vea como un H2" en vez de un porcentaje arbitrario. */
  --tam-h1: clamp(2.2rem, 5vw, 3.6rem);
  --tam-h2: clamp(1.7rem, 3.5vw, 2.4rem);
  --tam-h3: 1.35rem;
  --tam-h4: 1.1rem;
  --tam-h5: .95rem;
  --tam-h6: .8rem;

  /* Layout */
  --ancho: 1200px;
  --radio: 14px;
  --sombra: 0 10px 30px rgba(62, 39, 18, .10);
  --transicion: .25s ease;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { overscroll-behavior-y: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--color-body, var(--miga));
  color: var(--tinta);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  padding-top: var(--altura-cabecera);
}

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

a { color: var(--dorado-osc); text-decoration: none; transition: color var(--transicion); }
a:hover { color: var(--corteza); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--dorado);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--corteza-osc);
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: .01em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.35rem; }

.contenedor {
  width: min(var(--ancho), calc(100% - 2.5rem));
  margin-inline: auto;
}
/* Botón inferior centrado, configurable por módulo desde
   Agencia Estuma → Home → Secciones de la portada. Sin espacio arriba
   (para que quede pegado visualmente al módulo al que pertenece) y con
   espacio abajo (que es lo que lo separa del siguiente módulo). */
.modulo-boton-inferior {
  text-align: center;
  padding: 0 1.25rem 3rem;
}
/* Variante "pantalla completa": sin límite de ancho, solo un margen lateral
   mínimo para que el contenido no toque el borde del navegador. */
.contenedor-completo {
  width: 100%;
  padding-inline: 2rem;
  box-sizing: border-box;
  margin-inline: auto;
}
@media (max-width: 600px) {
  .contenedor-completo { padding-inline: 1.25rem; }
}

/* Etiqueta pequeña sobre títulos */
.eyebrow {
  display: inline-block;
  font-size: var(--escala-eyebrow, var(--tam-h6));
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dorado-osc);
  margin-bottom: .6rem;
}

/* Botones */
.boton, .button, button.boton,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit {
  display: inline-block;
  background: var(--dorado);
  color: var(--blanco);
  font-family: var(--f-menu, var(--f-body));
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .03em;
  padding: .85em 1.8em;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transicion), transform var(--transicion);
}
.boton:hover, .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--corteza);
  color: var(--blanco);
  transform: translateY(-2px);
}
.boton--secundario { background: transparent; color: var(--corteza); box-shadow: inset 0 0 0 2px var(--corteza); }
.boton--secundario:hover { background: var(--corteza); }

/* Divisor "corteza greñada" (firma) */
.divisor-corteza {
  height: 26px;
  background:
    radial-gradient(circle at 12px -6px, transparent 16px, var(--miga-2) 17px) repeat-x;
  background-size: 40px 26px;
}
.divisor-corteza--invertido { transform: scaleY(-1); }

/* ==========================================================================
   3. Cabecera fija + dos zonas de navegación independientes
   ------------------------------------------------------------------------
   .menu-escritorio  → barra horizontal dentro de la cabecera (≥900px)
   .appbar-movil     → barra fija abajo, solo en smartphones (<900px)
   Cada una puede gestionarse con contenido distinto desde el plugin
   "Agencia Estuma — Opciones de Tienda" → Gestión de Menús.
   ========================================================================== */
:root {
  --altura-cabecera: 80px;
  --altura-appbar:   70px;
}

.cabecera {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--altura-cabecera);
  z-index: 1000;
  background: var(--blanco);
  border-bottom: 1px solid rgba(63, 32, 33, .08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
  transition: var(--transicion);
}
/* Barra superior de contacto (Agencia Estuma → Header → Barra superior) */
.barra-superior {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1001;
  height: 40px;
  background: var(--secundario);
  color: var(--blanco);
  font-size: .82rem;
  display: flex;
  align-items: center;
}
.barra-superior__fila {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.2rem;
  width: 100%;
}
.barra-superior__separador {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,.35);
  flex-shrink: 0;
}
.barra-superior__item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.barra-superior__item:hover { opacity: .85; }
.barra-superior__icono { display: inline-flex; width: 15px; height: 15px; flex-shrink: 0; }
.barra-superior__icono svg { width: 100%; height: 100%; }
.barra-superior__ubicacion-texto-movil { display: none; }
body.tiene-barra-superior .cabecera { top: 40px; }
body.tiene-barra-superior { padding-top: calc(var(--altura-cabecera) + 40px) !important; }
@media (max-width: 680px) {
  .barra-superior__fila { gap: .8rem; justify-content: center; }
  .barra-superior__ubicacion-texto-completo { display: none; }
  .barra-superior__ubicacion-texto-movil { display: inline; }
}
@media (max-width: 420px) {
  .barra-superior__fila { gap: .6rem; }
  .barra-superior__texto-whatsapp { display: none; }
}
.cabecera__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
  padding: 0;
}
.cabecera__logo { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; overflow: hidden; }
.cabecera__logo .custom-logo-link { display: flex; align-items: center; }
.cabecera__logo img,
.cabecera__logo .custom-logo {
  height: var(--logo-alto-escritorio, 45px);
  max-height: var(--logo-alto-escritorio, 45px);
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
  transition: opacity var(--transicion);
}
.cabecera__logo:hover img { opacity: .82; }
.cabecera__lateral-boton-envoltorio { display: none; }
.cabecera__lateral-boton {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.cabecera__lateral-boton span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--secundario);
  border-radius: 2px;
  transition: transform var(--transicion), opacity var(--transicion);
}
.cabecera__buscar-boton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: none;
  border: none;
  color: var(--secundario);
  cursor: pointer;
  border-radius: 50%;
  transition: background var(--transicion);
}
.cabecera__buscar-boton:hover { background: rgba(0,79,113,.08); }
.cabecera__buscar-boton svg { width: 20px; height: 20px; }
.cabecera-buscador {
  display: none;
  border-top: 1px solid rgba(63,32,33,.08);
  padding: .8rem 0;
}
.cabecera-buscador--visible { display: block; }
.cabecera-buscador__form {
  display: flex;
  align-items: center;
  gap: .6rem;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.cabecera-buscador__form input[type="search"] {
  flex: 1;
  padding: .6rem .9rem;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  font-size: .95rem;
}
.cabecera-buscador__form button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  padding: 0;
  background: var(--primario);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.cabecera-buscador__form button svg { width: 18px; height: 18px; }

/* Menú lateral deslizante (móvil) */
.menu-lateral-fondo {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20,20,20,.45);
  z-index: 1200;
  opacity: 0;
  transition: opacity var(--transicion);
}
.menu-lateral-fondo--visible { display: block; opacity: 1; }
.menu-lateral {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(78vw, 320px);
  background: var(--blanco);
  z-index: 1201;
  transform: translateX(-100%);
  transition: transform var(--transicion);
  overflow-y: auto;
  padding: 1.2rem 0 2rem;
  box-shadow: 4px 0 24px rgba(0,0,0,.12);
}
.menu-lateral--abierto { transform: translateX(0); }
.menu-lateral__cabecera { display: flex; justify-content: flex-end; padding: 0 1.2rem .6rem; }
.menu-lateral__cerrar {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  background: none;
  border: none;
  color: var(--secundario);
  cursor: pointer;
  border-radius: 50%;
}
.menu-lateral__cerrar:hover { background: rgba(0,79,113,.08); }
.menu-lateral .menu-lista { list-style: none; margin: 0; padding: 0; }
.menu-lateral .menu-item a {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem 1.2rem;
  font-family: var(--f-menu, var(--f-body));
  font-size: 1rem;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
  transition: background var(--transicion);
}
.menu-lateral .menu-item a:hover,
.menu-lateral .current-menu-item > a {
  background: var(--menu-lateral-fondo-activo, #004F71);
  color: var(--menu-lateral-texto-activo, #fff);
}
.menu-lateral .menu-icono svg, .menu-lateral .menu-icono img { width: 20px; height: 20px; }
@media (min-width: 901px) {
  .menu-lateral, .menu-lateral-fondo, .cabecera__lateral-boton-envoltorio { display: none !important; }
}
.cabecera__nombre {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--secundario);
}

/* --- Ítems de menú: reglas compartidas por ambas zonas --- */
.menu-lista { list-style: none; margin: 0; padding: 0; }
.menu-item { display: flex; }
.menu-icono { line-height: 1; flex-shrink: 0; }
.menu-icono svg, .menu-icono img {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  object-fit: contain;
  display: block;
}

/* --- Zona 1: menú de escritorio (barra horizontal en la cabecera) --- */
.menu-escritorio { display: flex; align-items: center; }
.menu-escritorio .menu-lista { display: flex; align-items: center; gap: .25rem; }
.menu-escritorio .menu-icono { display: inline-flex; }
.menu-escritorio .menu-icono svg, .menu-escritorio .menu-icono img { width: 18px; height: 18px; }
.menu-escritorio a {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  font-family: var(--f-menu, var(--f-body));
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--tinta);
  border-radius: 8px;
  transition: var(--transicion);
  position: relative;
  text-decoration: none;
}
.menu-escritorio a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background: var(--primario);
  border-radius: 999px;
  transform: scaleX(0);
  transition: transform var(--transicion);
}
.menu-escritorio a:hover { color: var(--menu-escritorio-texto-activo, #fff); background: var(--menu-escritorio-fondo-activo, #004F71); }
.menu-escritorio a:hover::after,
.menu-escritorio .current-menu-item > a::after { transform: scaleX(1); }
.menu-escritorio .current-menu-item > a { color: var(--menu-escritorio-texto-activo, #fff); background: var(--menu-escritorio-fondo-activo, #004F71); }

@media (max-width: 900px) {
  .menu-escritorio { display: none; } /* en móvil manda la app-bar */
}

/* --- Acciones (carrito) --- */
.cabecera__acciones { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.cabecera__carrito {
  position: relative;
  font-weight: 700;
  color: var(--secundario);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .8rem;
  border-radius: 999px;
  transition: var(--transicion);
  text-decoration: none;
}
.cabecera__carrito:hover { background: rgba(255, 164, 0, .12); color: var(--primario-osc); }
.cabecera__carrito-num {
  background: var(--primario);
  color: var(--blanco);
  font-size: .75rem;
  min-width: 1.5em;
  height: 1.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 .35em;
  font-weight: 700;
}

/* Compensación por cabecera fija: el contenido empieza debajo */
#cabecera-espaciador { display: none; }

/* --- Zona 2: app-bar móvil (fija abajo, solo <900px) --- */
.appbar-movil { display: none; }

@media (max-width: 900px) {
  :root {
    --altura-cabecera: 60px;
    --altura-appbar:   68px;
  }
  body { padding-bottom: calc(var(--altura-appbar) + env(safe-area-inset-bottom, 0px)); }

  .cabecera__barra {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .cabecera__lateral-boton-envoltorio { grid-column: 1; justify-self: start; display: flex; }
  .cabecera__logo { grid-column: 2; justify-content: center; }
  .cabecera__acciones { grid-column: 3; justify-self: end; }
  .cabecera__logo img, .cabecera__logo .custom-logo { height: var(--logo-alto-tablet, 34px); max-height: var(--logo-alto-tablet, 34px); }

  .appbar-movil {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: var(--altura-appbar);
    z-index: 999;
    background: var(--blanco);
    border-top: 1px solid rgba(63, 32, 33, .08);
    box-shadow: 0 -2px 16px rgba(0, 0, 0, .06);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* Refuerzo: una franja sólida justo encima de la barra, del mismo
     color, para tapar cualquier rayita de 1-2px del contenido de
     detrás que pudiera colarse por el borde superior durante el
     scroll (costura de subpíxel, típica en iOS). */
  .appbar-movil::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -4px;
    height: 4px;
    background: var(--blanco);
  }
  .appbar-movil .menu-lista {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 0;
    flex: 1;
    width: 100%;
  }
  .appbar-movil .menu-item { flex: 1; display: flex; }
  .appbar-movil a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: .2rem;
    padding: .4rem .25rem .35rem;
    font-family: var(--f-menu, var(--f-body));
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--tinta-suave);
    text-transform: uppercase;
    text-decoration: none;
  }
  .appbar-movil .menu-icono { display: block; }
  .appbar-movil a:hover,
  .appbar-movil a:active,
  .appbar-movil .current-menu-item > a {
    color: var(--menu-movil-texto-activo, #fff);
    background: var(--menu-movil-fondo-activo, #004F71);
  }

  /* El carrito puede seguir en la cabecera arriba a la derecha */
  .cabecera__carrito { padding: .3rem .5rem; }
  .cabecera__carrito span[aria-hidden] { font-size: 1.3rem; }
}
@media (max-width: 480px) {
  :root { --altura-cabecera: 56px; }
  .cabecera__logo img, .cabecera__logo .custom-logo { height: var(--logo-alto-movil, 30px); max-height: var(--logo-alto-movil, 30px); }
  .appbar-movil a { font-size: .6rem; letter-spacing: .04em; }
}

/* --- Menú "dashboard": navegación de Mi Cuenta (WooCommerce) ---
   Se activa solo si hay ítems configurados en el plugin para esta zona.
   Tabs horizontales con scroll en móvil, visibles en cualquier ancho. */
.menu-dashboard {
  display: flex;
  gap: .25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 2rem;
  padding: .35rem;
  background: var(--miga-2);
  border-radius: 999px;
  scrollbar-width: none;
}
.menu-dashboard::-webkit-scrollbar { display: none; }
.menu-dashboard .menu-item { flex-shrink: 0; }
.menu-dashboard a {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.1rem;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--tinta-suave);
  border-radius: 999px;
  text-decoration: none;
  transition: var(--transicion);
}
.menu-dashboard .menu-icono { display: none; }
.menu-dashboard a:hover { color: var(--secundario); background: rgba(255,255,255,.6); }
.menu-dashboard .current-menu-item > a {
  background: var(--menu-dashboard-fondo-activo, #004F71);
  color: var(--menu-dashboard-texto-activo, #fff);
}


/* ==========================================================================
   4. Hero de portada — slider de imagen de fondo (1 o más slides)
   ========================================================================== */
.hero--fondo {
  position: relative;
  overflow: hidden;
}
.hero__slides {
  position: relative;
  min-height: var(--hero-altura, 64vh);
}
.hero__slide {
  position: relative;
  min-height: var(--hero-altura, 64vh);
  display: flex;
  align-items: center;
  background-color: var(--secundario);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Imagen <img> real del primer slide (en vez de background-image), para
   que el navegador pueda priorizar su carga (fetchpriority) y mejorar el
   LCP. Se comporta visualmente igual que un fondo: cubre todo el slide,
   detrás del degradado y del texto. */
.hero__slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Slider (2+ slides): todas apiladas, solo la activa visible */
.hero--slider .hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  transition: opacity .8s ease;
}
.hero--slider .hero__slide.is-active {
  opacity: 1;
  z-index: 1;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 100%);
  z-index: 0;
}
.hero__slide-contenido {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 4rem 0;
}
.hero__slide-contenido .eyebrow { color: var(--primario); }
.hero__slide-contenido h1 { color: var(--blanco); margin-bottom: .8rem; font-size: var(--escala-titulo, var(--tam-h1)); }
.hero__slide-contenido p {
  color: rgba(255,255,255,.92);
  font-size: var(--escala-texto, var(--tam-h4));
  max-width: 36em;
  margin: 0 auto 1.8rem;
}

/* Flechas de navegación */
.hero__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--blanco);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transicion);
}
.hero__flecha:hover { background: rgba(255,255,255,.2); }
.hero__flecha--prev { left: 1.5rem; }
.hero__flecha--next { right: 1.5rem; }

/* Puntos de navegación */
.hero__puntos {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: .6rem;
}
.hero__punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--blanco);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background var(--transicion);
}
.hero__punto.is-active,
.hero__punto:hover { background: var(--blanco); }

@media (max-width: 600px) {
  .hero__flecha { width: 38px; height: 38px; font-size: 1.2rem; }
  .hero__flecha--prev { left: .8rem; }
  .hero__flecha--next { right: .8rem; }
}

/* ==========================================================================
   5. Secciones de portada
   ========================================================================== */
.seccion { padding: 4.5rem 0; }
.bloque-categoria--secciones-productos .seccion { padding: 2.2rem 0; }
.seccion--alterna { background: var(--miga-2); }
.seccion__cabecera { text-align: center; max-width: 46em; margin: 0 auto 3rem; }
.seccion__cabecera h2 { font-size: var(--escala-titulo, var(--tam-h2)); }

/* Categorías / Destacados — tarjeta con imagen, configurable desde
   Agencia Estuma → Home (redondeo de esquinas vía --destacados-radio) */
.categorias {
  display: grid;
  grid-template-columns: repeat(var(--destacados-columnas, auto-fit), minmax(230px, 1fr));
  gap: 2rem;
}
@media (max-width: 900px) {
  .categorias { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .categorias { grid-template-columns: 1fr !important; }
}
.categoria {
  text-align: center;
  background: var(--blanco);
  border-radius: var(--destacados-radio, 12px);
  overflow: hidden;
  box-shadow: var(--sombra);
  transition: transform var(--transicion);
  display: flex;
  flex-direction: column;
}
.categoria:hover { transform: translateY(-6px); }
.categoria__imagen-enlace { display: block; }
.categoria img {
  border-radius: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  display: block;
}
.categoria__cuerpo { padding: 1.2rem 1.2rem 1.6rem; flex: 1; display: flex; flex-direction: column; }
.categoria__cuerpo h3 { margin: 0 0 .4rem; font-size: var(--escala-titulo-tarjeta, var(--tam-h3)); }
.categoria__cuerpo h3 a { color: inherit; }
.categoria__cuerpo p { font-size: var(--escala-texto, var(--tam-h4)); color: rgba(44, 33, 22, .75); margin: 0 0 1rem; }
.categoria__boton { margin-top: auto; align-self: center; }

/* Franja "desde 1920" */
.franja-historia {
  background: var(--corteza);
  color: var(--miga);
  text-align: center;
  padding: 4rem 0;
}
.franja-historia h2 { color: var(--miga); font-size: var(--escala-titulo, var(--tam-h2)); }
.franja-historia .eyebrow { color: var(--dorado); }
.franja-historia p { max-width: 42em; margin: 0 auto 1.8rem; opacity: .92; font-size: var(--escala-texto, var(--tam-h4)); }
.franja-historia .boton { background: var(--dorado); }
.franja-historia .boton:hover { background: var(--miga); color: var(--corteza); }

/* ==========================================================================
   5.5 Página de categoría — bloques por categoría
   ========================================================================== */
.pagina-categoria { padding: 0 0 3rem; }
.bloque-categoria { margin-bottom: 2.4rem; }
.bloque-categoria:last-child { margin-bottom: 0; }

.bloque-categoria--titulo_desc .categoria-titulo {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--secundario);
  margin: 0 0 .8rem;
}
.bloque-categoria--titulo_desc .categoria-descripcion {
  color: var(--tinta-suave);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 760px;
}
.bloque-categoria--titulo_desc .categoria-descripcion p:last-child { margin-bottom: 0; }

.bloque-categoria--banner .categoria-banner__img {
  width: 100%;
  height: auto;
  border-radius: var(--radio);
  display: block;
}

.bloque-categoria--subcategorias .categoria-subcategorias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.2rem;
}
.categoria-subcategoria {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: var(--subcategorias-color-fondo, #004F71);
  border-radius: var(--radio);
  overflow: hidden;
  text-align: center;
  color: #fff;
  font-weight: 600;
  font-size: .92rem;
  min-width: 0;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.categoria-subcategoria > span {
  display: block;
  padding: 1rem;
}
.categoria-subcategoria--sin-imagen {
  min-height: 100px;
  align-self: stretch;
  justify-content: center;
}
.categoria-subcategoria--sin-imagen > span { padding: 1.6rem 1rem; }
.categoria-subcategoria:hover { transform: translateY(-3px); box-shadow: var(--sombra); color: #fff; }
.categoria-subcategoria img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.bloque-categoria--filtros .woocommerce-ordering { margin-bottom: 1.6rem; }

.bloque-categoria--productos .woocommerce-pagination { margin-top: 2.4rem; }

.bloque-categoria--personalizado img { max-width: 100%; height: auto; border-radius: var(--radio); }
.bloque-categoria--personalizado { max-width: 760px; }
/* El módulo de "Secciones de productos" ya trae su propio .contenedor
   interno (reutilizado tal cual del sistema de módulos de Home) — al
   usarlo dentro de la página de categoría/tienda quedaría anidado dos
   veces, así que aquí se neutraliza el segundo para que no se vea más
   estrecho de la cuenta. */
.bloque-categoria--secciones-productos .contenedor {
  width: 100%;
  margin-inline: 0;
}

/* ==========================================================================
   6. WooCommerce — rejilla de productos (robusta, compatible con Elementor)
   ========================================================================== */
.woocommerce ul.products,
.woocommerce-page ul.products,
.elementor-widget-woocommerce-products ul.products,
.elementor-widget-wc-products ul.products,
ul.products.columns-4,
ul.products.columns-3,
ul.products.columns-2 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 2rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
/* WooCommerce (y algunos resets de tema) usan un "clearfix" clásico
   (::before/::after con content vacío) pensado para el maquetado
   antiguo con float — al convertir el <ul> en display:grid, ese
   pseudo-elemento pasa a contarse como una casilla más de la rejilla,
   ocupando la primera posición y desplazando todos los productos
   reales una casilla hacia la derecha. Lo anulamos explícitamente. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
ul.products::before,
ul.products::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 1024px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products.columns-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 780px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products.columns-4,
  ul.products.columns-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.2rem !important;
  }
}
@media (max-width: 460px) {
  .woocommerce ul.products,
  ul.products {
    grid-template-columns: 1fr !important;
  }
}

.woocommerce ul.products li.product,
ul.products li.product {
  position: relative;
  width: auto !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  background: var(--blanco);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  transition: transform var(--transicion);
  text-align: center;
}
.woocommerce ul.products li.product:hover { transform: translateY(-5px); }
.woocommerce ul.products li.product a img {
  margin: 0 !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--f-display);
  font-size: var(--escala-titulo-tarjeta, var(--tam-h3)) !important;
  color: var(--corteza-osc);
  padding: 1rem 1rem .2rem !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  line-height: 1.3 !important;
}
.tarjeta-producto-sku {
  display: block;
  padding: 0 1rem;
  font-size: var(--codigo-tamano, .82rem) !important;
  font-weight: 700;
  color: var(--codigo-color, var(--corteza-osc)) !important;
  letter-spacing: .02em;
}
.bloque-producto--codigo .producto-codigo {
  font-size: var(--codigo-tamano, .95rem) !important;
  color: var(--codigo-color, var(--corteza-osc)) !important;
  margin: 0 0 1rem;
}
.woocommerce ul.products li.product .price,
ul.products li.product .price {
  display: block !important;
  float: none !important;
  width: 100% !important;
  text-align: center !important;
  color: var(--dorado-osc) !important;
  font-weight: 700;
  font-size: 1.35rem !important;
  margin-bottom: 1rem !important;
}
.woocommerce ul.products li.product .price del,
ul.products li.product .price del {
  display: inline !important;
  float: none !important;
  font-size: .8em;
  font-weight: 400;
  opacity: .6;
  margin-right: .4em;
}
.woocommerce ul.products li.product .price ins,
ul.products li.product .price ins {
  display: inline !important;
  float: none !important;
  text-decoration: none;
}
.woocommerce ul.products li.product .onsale,
ul.products li.product .onsale {
  position: absolute !important;
  z-index: 4;
  background: var(--valle);
  border-radius: 999px;
  min-height: 0;
  line-height: 1;
  padding: .55em .9em;
  top: .8rem;
  left: .8rem;
  right: auto;
  margin: 0;
  color: var(--blanco);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Banner de disponibilidad: "Bajo pedido" / "Disponible online" --- */
.badge-disponibilidad {
  position: absolute;
  top: .8rem;
  right: .8rem;
  z-index: 5;
  padding: .4em .9em;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blanco);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
  pointer-events: none;
  white-space: nowrap;
}
/* En pantallas estrechas, "¡Oferta!" (arriba-izquierda) y esta etiqueta
   (arriba-derecha) pueden chocar si el producto tiene ambas a la vez.
   Solo cuando coinciden las apilamos en vertical (ambas a la izquierda);
   si no hay oferta, esta etiqueta se queda arriba como siempre. */
@media (max-width: 600px) {
  li.product:has(.onsale) .badge-disponibilidad {
    top: 2.6rem;
    left: .8rem;
    right: auto;
  }
}
.badge-disponibilidad--pedido { background: var(--secundario); }
.badge-disponibilidad--online { background: var(--primario); }

/* --- Contenedor de botones duales en la rejilla --- */
.tarjeta-producto-botones {
  display: flex;
  justify-content: center;
  gap: .6rem;
  padding: .9rem 1rem 1.3rem;
  margin-top: auto;
}
.tarjeta-producto-botones .button,
.tarjeta-producto-botones .boton-mas-info {
  flex: 1;
  margin: 0 !important;
  padding: .65em .5em !important;
  font-size: .78rem !important;
  text-align: center;
  white-space: normal;
  line-height: 1.25;
}
/* Nota: antes, en pantallas ≤780px, los botones se apilaban en vertical
   porque el texto largo ("MÁS INFORMACIÓN" / "Añadir a la cesta") no
   cabía en una fila. Ahora que los botones son compactos (icono, o
   icono + texto corto), se quedan siempre en línea — apilarlos dejaría
   un hueco vacío en las tarjetas de un solo botón (productos sin precio). */
/* Icono sustituyendo al texto en los botones de la tarjeta */
.boton-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.boton-icono svg {
  width: 20px;
  height: 20px;
  display: block;
}
.boton-icono-texto {
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}
/* Solo icono (sin texto pequeño): botón cuadrado y compacto */
.tarjeta-producto-botones .button:has(.boton-icono):not(:has(.boton-icono-texto)),
.tarjeta-producto-botones .boton-mas-info:has(.boton-icono):not(:has(.boton-icono-texto)) {
  padding: .65em !important;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
}
/* Icono + texto pequeño: botón con ambos en fila, ancho según contenido */
.tarjeta-producto-botones .button:has(.boton-icono-texto),
.tarjeta-producto-botones .boton-mas-info:has(.boton-icono-texto) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  flex: 0 1 auto;
  width: auto;
}

.boton-mas-info {
  background: transparent;
  color: var(--secundario);
  box-shadow: inset 0 0 0 2px var(--secundario);
}
.boton-mas-info:hover { background: var(--secundario); color: var(--blanco); }

/* ==========================================================================
   Ficha de producto individual — sistema de bloques
   Configurable en Agencia Estuma → Producto página (orden, visibilidad,
   relacionados, migas) y Agencia Estuma → Productos (banner/botones de
   las tarjetas en rejillas, que también aplican aquí en "relacionados").
   ========================================================================== */
.woocommerce div.product {
  margin-bottom: 4rem;
}
.bloque-producto { margin-bottom: 2.6rem; }

/* Modificadores de ancho (Agencia Estuma → Producto página, botón junto
   a cada bloque). Solo tiene sentido en bloques de ancho completo
   (migas, descripción larga, relacionados) — los de la fila de dos
   columnas (galería/resumen) ya tienen su propio ancho fijado. */
.bloque-producto--ancho-completo {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
/* Bloques marcados "Columna izquierda"/"Columna derecha" (Agencia
   Estuma → Producto página, botón de ancho) — cualquier cantidad de
   bloques consecutivos marcados igual se apilan juntos en su columna,
   y ambas columnas se colocan una junto a la otra (ver
   aetienda_render_columnas_producto en PHP). */
.producto-columnas {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem 3.5rem;
  margin-bottom: 2.6rem;
  align-items: flex-start;
}
.producto-columnas__col { flex: 1 1 380px; min-width: 0; }
.producto-columnas__col .bloque-producto { margin-bottom: 1.6rem; }
.producto-columnas__col .bloque-producto:last-child { margin-bottom: 0; }
.bloque-producto:last-child { margin-bottom: 0; }

/* Bloque personalizado de tipo "Columnas" (contenedor) — Agencia
   Estuma → Producto página → Bloques personalizados. Cada columna
   lleva dentro los bloques (de la ficha o personalizados) que se le
   hayan asignado, en el orden elegido. */
.producto-columnas-libres {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem 3.5rem;
  align-items: flex-start;
}
.producto-columnas-libres__col { min-width: 0; flex: 1 1 380px; display: flex; flex-direction: column; }
.producto-columnas-libres__col .bloque-producto { margin-bottom: 1.6rem; max-width: 100%; }
.producto-columnas-libres__col .bloque-producto:last-child { margin-bottom: 0; }
/* Estos bloques necesitan ocupar siempre todo el ancho para verse bien
   (imágenes, formulario de compra) — el resto (título, texto,
   precio...) puede encogerse a su contenido para que la alineación
   horizontal (izquierda/centro/derecha) tenga efecto real. */
.producto-columnas-libres__col .bloque-producto--galeria,
.producto-columnas-libres__col .bloque-producto--formulario-compra {
  width: 100%;
}
.producto-columnas-libres--50-50 .producto-columnas-libres__col { flex-basis: calc(50% - 1.75rem); }
.producto-columnas-libres--70-30 .producto-columnas-libres__col:first-child { flex-basis: calc(70% - 1.75rem); }
.producto-columnas-libres--70-30 .producto-columnas-libres__col:last-child { flex-basis: calc(30% - 1.75rem); }
.producto-columnas-libres--30-70 .producto-columnas-libres__col:first-child { flex-basis: calc(30% - 1.75rem); }
.producto-columnas-libres--30-70 .producto-columnas-libres__col:last-child { flex-basis: calc(70% - 1.75rem); }
.producto-columnas-libres--33-33-33 .producto-columnas-libres__col { flex-basis: calc(33.333% - 2.34rem); }
.producto-columnas-libres--100-100 .producto-columnas-libres__col { flex-basis: 100%; }
@media (max-width: 1000px) {
  .producto-columnas-libres--33-33-33 .producto-columnas-libres__col { flex-basis: calc(50% - 1.75rem); }
}
@media (max-width: 780px) {
  .producto-columnas-libres__col,
  .producto-columnas-libres--50-50 .producto-columnas-libres__col,
  .producto-columnas-libres--70-30 .producto-columnas-libres__col,
  .producto-columnas-libres--30-70 .producto-columnas-libres__col,
  .producto-columnas-libres--33-33-33 .producto-columnas-libres__col,
  .producto-columnas-libres--100-100 .producto-columnas-libres__col {
    flex-basis: 100%;
  }
}

/* Migas de pan — a pantalla completa (borde a borde), fuera del
   contenedor de 1200px del resto de la página. Color de fondo
   configurable en Agencia Estuma → Producto página (por defecto, el
   azul marino de Agencia Estuma). */
.bloque-producto--migas,
.bloque-categoria--migas {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 1rem 1.5rem;
  background: var(--migas-color-fondo, #004F71);
}
.bloque-producto--migas .woocommerce-breadcrumb,
.bloque-categoria--migas .woocommerce-breadcrumb {
  padding: 0;
  margin: 0;
  font-size: var(--migas-tamano, .78rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: left;
  color: var(--migas-color-texto, #ffffff);
}
.bloque-producto--migas .woocommerce-breadcrumb a,
.bloque-categoria--migas .woocommerce-breadcrumb a { color: var(--migas-color-texto, #ffffff) !important; opacity: .85; }
.bloque-producto--migas .woocommerce-breadcrumb a:hover,
.bloque-categoria--migas .woocommerce-breadcrumb a:hover { opacity: 1; }
.bloque-producto--migas .migas-de-pan__separador,
.bloque-categoria--migas .migas-de-pan__separador { opacity: .6; }

/* Título */
.bloque-producto--titulo .product_title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 600;
  color: var(--secundario);
  margin-bottom: 0;
  line-height: 1.1;
}

/* Categoría (y SKU) */
.bloque-producto--categoria .product_meta {
  font-size: .8rem;
  color: var(--tinta-suave);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.2rem;
}
.bloque-producto--categoria .product_meta > span { display: inline-flex; align-items: center; }
.bloque-producto--categoria .product_meta a {
  color: var(--primario);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,79,113,.3);
}
.bloque-producto--categoria .product_meta a:hover { border-color: var(--primario); }

/* Galería */
.bloque-producto--galeria { max-width: 100%; }
/* WooCommerce añade por compatibilidad la clase "images" a la galería,
   y trae de fábrica la regla ".woocommerce div.product div.images {
   width:48%; float:left}" — por especificidad le gana a nuestro CSS y
   es la causa real de que la galería apareciera encogida. La anulamos
   aquí explícitamente. */
.bloque-producto--galeria .woocommerce-product-gallery {
  width: 100% !important;
  float: none !important;
}
.bloque-producto--galeria .woocommerce-product-gallery { position: relative; }
.bloque-producto--galeria .woocommerce-product-gallery__wrapper {
  position: relative;
  width: 100%;
}
.bloque-producto--galeria .woocommerce-product-gallery__image,
.bloque-producto--galeria .woocommerce-product-gallery__image a {
  display: block;
  width: 100%;
}
.bloque-producto--galeria .woocommerce-product-gallery__image a { cursor: default; }
.bloque-producto--galeria img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.bloque-producto--galeria .woocommerce-product-gallery__trigger {
  display: none !important;
}
/* FlexSlider fija una altura en línea en .flex-viewport calculada en el
   momento de inicializar el slider — si eso ocurre antes de que la
   imagen tenga su ancho definitivo, la deja encajonada en una altura
   pequeña. Forzamos que la altura siempre sea automática. */
.bloque-producto--galeria .flex-viewport,
.bloque-producto--galeria .woocommerce-product-gallery__wrapper.slides {
  height: auto !important;
}
/* Por si FlexSlider genera alguna lista de navegación adicional sin
   nuestras clases (aparecería como viñetas sueltas sin estilo, una
   debajo de otra) — la ocultamos, dejando solo la que ya tenemos
   maquetada como puntos/miniaturas. */
.bloque-producto--galeria .flex-control-nav:not(.flex-control-thumbs) {
  display: none !important;
}
.bloque-producto--galeria .flex-control-thumbs {
  margin-top: 1.2rem;
  display: flex;
  justify-content: center;
  gap: .7rem;
  flex-wrap: wrap;
}
.bloque-producto--galeria .flex-control-thumbs li { list-style: none; }
.bloque-producto--galeria .flex-control-thumbs img {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  opacity: .6;
  transition: opacity var(--transicion), box-shadow var(--transicion);
  box-shadow: none;
}
.bloque-producto--galeria .flex-control-thumbs img.flex-active,
.bloque-producto--galeria .flex-control-thumbs img:hover {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--primario);
}

/* Flechas de navegación (prev/next) que añade flexslider cuando hay
   más de una imagen — ocultas por defecto, visibles en móvil donde el
   usuario desliza en vez de hacer clic en las miniaturas. */
.bloque-producto--galeria .flex-direction-nav {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bloque-producto--galeria .flex-direction-nav li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bloque-producto--galeria .flex-direction-nav a {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--galeria-indicadores-rgba, rgba(0,79,113,.62));
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  color: #fff;
  font-size: 0;
  cursor: pointer;
}
.bloque-producto--galeria .flex-direction-nav a::before {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.bloque-producto--galeria .flex-direction-nav .flex-prev { left: .6rem; }
.bloque-producto--galeria .flex-direction-nav .flex-prev::before { transform: rotate(135deg); margin-left: 3px; }
.bloque-producto--galeria .flex-direction-nav .flex-next { right: .6rem; }
.bloque-producto--galeria .flex-direction-nav .flex-next::before { transform: rotate(-45deg); margin-right: 3px; }

@media (max-width: 780px) {
  /* En móvil, con varias imágenes, se navega deslizando el dedo sobre
     la imagen principal (flexslider ya trae el swipe táctil activado
     por "wc-product-gallery-slider") — las miniaturas se convierten en
     puntitos indicadores (mantienen su función de clic) y se muestran
     las flechas como apoyo visual adicional. */
  .bloque-producto--galeria .flex-control-thumbs { gap: .5rem; margin-top: 1rem; width: 100%; }
  .bloque-producto--galeria .flex-control-thumbs li {
    position: relative;
    width: 8px !important;
    height: 8px !important;
    margin: 0 !important;
    float: none !important;
  }
  .bloque-producto--galeria .flex-control-thumbs li::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D9DEE2;
    transition: background var(--transicion), transform var(--transicion);
  }
  .bloque-producto--galeria .flex-control-thumbs li:has(img.flex-active)::after {
    background: var(--galeria-indicadores-solido, var(--primario));
    transform: scale(1.25);
  }
  .bloque-producto--galeria .flex-control-thumbs img,
  .bloque-producto--galeria .flex-control-thumbs img.flex-active {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px !important;
    height: 8px !important;
    min-width: 8px;
    margin: 0 !important;
    float: none !important;
    border-radius: 50%;
    opacity: 0 !important;
    box-shadow: none !important;
  }
  .bloque-producto--galeria .flex-direction-nav { display: block; }
}

/* Precio */
.bloque-producto--precio {
  display: inline-block;
}
.bloque-producto--precio p.price,
.bloque-producto--precio span.price {
  font-weight: 700;
  display: block;
  line-height: 1.2;
}
.bloque-producto--precio p.price del {
  font-size: var(--precio-tamano-venta, 1.3rem);
  font-weight: 400;
  margin-right: .6em;
  color: var(--precio-color-venta, var(--primario-osc));
}
.bloque-producto--precio p.price ins {
  font-size: var(--precio-tamano-oferta, 2.6rem);
  text-decoration: none;
  color: var(--precio-color-oferta, var(--primario-osc));
}
/* Precio sin oferta (una sola cantidad, sin del/ins) — usa el tamaño y
   color de oferta, ya que es el precio "de verdad" que se está
   mostrando. */
.bloque-producto--precio p.price:not(:has(ins)) {
  font-size: var(--precio-tamano-oferta, 2.6rem);
  color: var(--precio-color-oferta, var(--primario-osc));
}

/* Descripción corta */
.bloque-producto--descripcion-corta {
  color: var(--tinta-suave);
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 640px;
}

/* Formulario de compra */
.bloque-producto--formulario-compra form.cart {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.bloque-producto--formulario-compra .quantity .qty {
  border: 2px solid var(--miga-2);
  border-radius: 999px;
  padding: .7em .5em;
  width: 4.5em;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--tinta);
}
.bloque-producto--formulario-compra .button {
  border-radius: 999px;
  padding: 1em 2.4rem;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
  transition: transform var(--transicion), box-shadow var(--transicion), filter var(--transicion);
  background-color: var(--boton-cesta-color, var(--primario)) !important;
  color: #fff !important;
  border-color: var(--boton-cesta-color, var(--primario)) !important;
}
.bloque-producto--formulario-compra .button:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra);
  filter: brightness(90%);
}

/* Pestañas (Descripción larga) */
.bloque-producto--descripcion-larga .woocommerce-tabs { margin-top: 1rem; }
.bloque-producto--descripcion-larga .woocommerce-tabs ul.tabs::before { border-color: rgba(91,58,30,.15); }
.bloque-producto--descripcion-larga .woocommerce-tabs ul.tabs li {
  background: var(--miga-2);
  border-color: rgba(91,58,30,.15);
  border-radius: 10px 10px 0 0;
  font-weight: 600;
}
.bloque-producto--descripcion-larga .woocommerce-tabs ul.tabs li.active { background: var(--blanco); }
.bloque-producto--descripcion-larga .woocommerce-tabs .panel { line-height: 1.8; color: var(--tinta-suave); font-size: 1.02rem; }

/* Productos relacionados — reutiliza el mismo estilo de tarjeta que el
   resto del sitio (misma plantilla content-product.php de WooCommerce). */
.bloque-producto--relacionados {
  padding-top: 3.5rem;
  border-top: 1px solid rgba(63,32,33,.1);
}
.bloque-producto--relacionados .related.products {
  position: relative;
}
.bloque-producto--relacionados .related.products > h2 {
  font-family: var(--f-display);
  text-align: center;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-bottom: 2.2rem;
}
/* Rejilla de relacionados por CSS Grid — más fiable que un cálculo
   manual con flexbox (que en algunas filas no encajaba bien el
   redondeo del ancho). Grid reparte el espacio exacto entre columnas
   sin que haya que restar el gap a mano. */
.bloque-producto--relacionados ul.products,
.bloque-categoria--secciones-productos ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 2rem !important;
}
.bloque-producto--relacionados ul.products.columns-3,
.bloque-categoria--secciones-productos ul.products.columns-3 { grid-template-columns: repeat(3, 1fr) !important; }
.bloque-producto--relacionados ul.products.columns-2,
.bloque-categoria--secciones-productos ul.products.columns-2 { grid-template-columns: repeat(2, 1fr) !important; }
.bloque-producto--relacionados ul.products > li.product,
.bloque-categoria--secciones-productos ul.products > li.product {
  width: auto !important;
  flex: unset !important;
}
@media (max-width: 1024px) {
  .bloque-producto--relacionados ul.products,
  .bloque-categoria--secciones-productos ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 780px) {
  .bloque-producto--relacionados ul.products,
  .bloque-categoria--secciones-productos ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.2rem !important;
  }
}
/* En móvil, en vez de apilar en columnas, se desliza horizontalmente,
   con una fila de controles (flecha, puntos, flecha) DEBAJO — nunca
   encima de las imágenes, para no taparle el clic a la tarjeta. */
@media (max-width: 600px) {
  .bloque-producto--relacionados ul.products,
  .bloque-categoria--secciones-productos ul.products {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -1.25rem !important;
    padding: 0 1.25rem .6rem !important;
  }
  .bloque-categoria--subcategorias .categoria-subcategorias {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -1.25rem !important;
    padding: 0 1.25rem .6rem !important;
    gap: .8rem !important;
  }
  .bloque-producto--relacionados ul.products::-webkit-scrollbar,
  .bloque-categoria--secciones-productos ul.products::-webkit-scrollbar,
  .bloque-categoria--subcategorias .categoria-subcategorias::-webkit-scrollbar { display: none; }
  .bloque-producto--relacionados ul.products > li.product,
  .bloque-categoria--secciones-productos ul.products > li.product {
    flex: 0 0 78% !important;
    scroll-snap-align: start;
  }
  /* Un poco más ancha que "la mitad exacta" a propósito: incluso con
     solo 2 subcategorías (el caso más habitual) debe quedar overflow
     real que desplazar, si no las flechas saldrían deshabilitadas. */
  .bloque-categoria--subcategorias .categoria-subcategoria {
    flex: 0 0 62% !important;
    scroll-snap-align: start;
  }
  /* Fila de controles: flecha · puntos · flecha, todo en línea debajo
     de la lista — nunca superpuesto a las imágenes. */
  .relacionados-controles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
  }
  .relacionados-flecha {
    position: static;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    border: 1.5px solid #E5E7EB;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    color: var(--primario-osc, #12293A);
    cursor: pointer;
    padding: 0;
  }
  .relacionados-flecha:disabled { opacity: .35; cursor: default; }
  .relacionados-flecha::before {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
  }
  .relacionados-flecha--prev::before { transform: rotate(135deg); margin-left: 3px; }
  .relacionados-flecha--next::before { transform: rotate(-45deg); margin-right: 3px; }
  .relacionados-puntos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
  }
  .relacionados-puntos button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: #D9DEE2;
    cursor: pointer;
    transition: background .2s, transform .2s;
  }
  .relacionados-puntos button.activo {
    background: var(--primario);
    transform: scale(1.25);
  }
}
@media (min-width: 601px) {
  .relacionados-controles { display: none; }
}
.bloque-producto--relacionados .relacionados-boton-envoltorio {
  text-align: center;
  margin: 2.4rem 0 0;
}
.seccion__boton-envoltorio {
  text-align: center;
  margin: 2.4rem 0 0;
}

/* Avisos */
.woocommerce-message, .woocommerce-info {
  border-top-color: var(--dorado);
  background: var(--miga-2);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--dorado-osc); }

/* Carrito y checkout */
.woocommerce table.shop_table {
  border: 1px solid rgba(91,58,30,.15);
  border-radius: var(--radio);
  overflow: hidden;
}
.woocommerce table.shop_table th { background: var(--miga-2); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 2px solid var(--miga-2);
  border-radius: 10px;
  padding: .7em 1em;
  background: var(--blanco);
}
#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment {
  background: var(--miga-2);
  border-radius: var(--radio);
}

/* Migas de pan (nunca mejor dicho) — para tienda/categoría; en la
   ficha de producto, el bloque de migas tiene su propio color más
   abajo y no debe verse afectado por esta regla. */
.woocommerce .woocommerce-breadcrumb:not(.bloque-producto--migas *):not(.bloque-categoria--migas *) { color: rgba(44,33,22,.6); font-size: .85rem; margin-bottom: 2rem; }
.woocommerce .woocommerce-breadcrumb:not(.bloque-producto--migas *):not(.bloque-categoria--migas *) a { color: var(--dorado-osc); }

/* Paginación */
.woocommerce nav.woocommerce-pagination ul { border: none; }
.woocommerce nav.woocommerce-pagination ul li { border: none; margin: 0 .2rem; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-radius: 999px;
  min-width: 2.4em;
  padding: .6em;
  font-weight: 700;
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--corteza); color: var(--blanco); }

/* ==========================================================================
   7. Contenido y blog
   ========================================================================== */
.pagina-cabecera { background: var(--miga-2); padding: 3.5rem 0; text-align: center; }
/* Migas de pan (Agencia Estuma → Productos → Migas de pan) */
.migas-de-pan {
  display: block;
  font-size: .82rem;
  color: var(--tinta-suave);
  padding: 1rem 0;
}
.migas-de-pan a { color: var(--tinta-suave); text-decoration: underline; text-underline-offset: 2px; }
.migas-de-pan a:hover { color: var(--primario); }
.migas-de-pan__separador { opacity: .5; padding: 0 .1rem; }
.contenido { padding: 3.5rem 0; }
body.single-product .contenido,
body.single-product main#contenido,
body.aetienda-migas-completas .contenido,
body.aetienda-migas-completas main#contenido {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.single-product .woocommerce div.product {
  margin-top: 0 !important;
}
.contenido--estrecho .entrada { max-width: 760px; margin-inline: auto; }
.entrada img { border-radius: var(--radio); }

.lista-entradas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}
.tarjeta-entrada {
  background: var(--blanco);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
}
.tarjeta-entrada img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.tarjeta-entrada__cuerpo { padding: 1.4rem 1.4rem 1.8rem; flex: 1; display: flex; flex-direction: column; }
.tarjeta-entrada__fecha { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dorado-osc); font-weight: 700; }
.tarjeta-entrada h3 { margin: .4rem 0 .5rem; font-size: var(--escala-titulo-tarjeta, var(--tam-h3)); }
.tarjeta-entrada h3 a { color: var(--corteza-osc); }
.tarjeta-entrada__cuerpo p { font-size: var(--escala-texto, var(--tam-h4)); margin: 0 0 1rem; }
.tarjeta-entrada__boton { margin-top: auto; align-self: center; }

/* ==========================================================================
   8. Pie con máscara corporativa (firma visual de la marca)
   ========================================================================== */
.pie {
  position: relative;
  background: var(--miga);
  color: var(--secundario);
  padding: 0 0 2rem;
  margin-top: 0;
}
/* Fondo blanco → se funde con la máscara (que es sobre blanco) */
.pie__contenido { padding: 3rem 0 2rem; }
.pie a { color: var(--pie-color-enlaces, var(--primario-osc)); font-weight: 700; }
.pie a:hover { color: var(--secundario); }

/* Cabecera del pie: logo + texto, centrados */
.pie__cabecera {
  text-align: center;
  max-width: 42em;
  margin: 0 auto 3rem;
}
.pie__cabecera .custom-logo-link,
.pie__logo-enlace { display: inline-block; margin-bottom: 1rem; }
.pie__cabecera .custom-logo,
.pie__logo-propio { max-width: 180px; max-height: 70px; width: auto; height: auto; margin-inline: auto; }
.pie__nombre {
  font-family: var(--f-display);
  font-size: 1.4rem;
  color: var(--secundario);
  margin: 0 0 1rem;
}
.pie__texto { color: var(--pie-color-texto, var(--tinta-suave)); margin: 0; }

/* Rejilla de 4 columnas: Tienda / Contacto / Horario / Avisos legales */
.pie__rejilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 900px) {
  .pie__rejilla { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .pie__rejilla { grid-template-columns: 1fr; }
}
.pie h4 {
  color: var(--pie-color-titulos, var(--secundario));
  font-size: .9rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-family: var(--f-body);
  font-weight: 700;
  border-bottom: 3px solid var(--primario);
  padding-bottom: .5rem;
  display: inline-block;
  margin-bottom: 1rem;
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .55rem; color: var(--pie-color-texto, var(--tinta-suave)); display: flex; align-items: center; gap: .5rem; }
.pie__icono-linea { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }

/* Redes sociales, centradas, debajo de la rejilla */
.pie__redes {
  display: flex;
  justify-content: center;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.pie__red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  background: var(--primario);
  color: var(--blanco) !important;
  border-radius: 999px;
  font-weight: 700;
  overflow: hidden;
  transition: background var(--transicion), transform var(--transicion);
}
.pie__red:hover { background: var(--secundario); transform: translateY(-3px); }
.pie__red img { width: 20px; height: 20px; object-fit: contain; }

.pie__legal {
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 1.5rem;
  font-size: .85rem;
  color: var(--pie-color-copyright, var(--tinta-suave));
  text-align: center;
}

/* ==========================================================================
   9. Utilidades y accesibilidad
   ========================================================================== */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px; width: 1px;
  overflow: hidden;
  position: absolute !important;
  word-wrap: normal !important;
}
.salto-contenido {
  position: absolute;
  left: -9999px;
  background: var(--corteza);
  color: var(--blanco);
  padding: .8em 1.4em;
  z-index: 999;
}
.salto-contenido:focus { left: 1rem; top: 1rem; }

/* ==========================================================================
   10. Parches: ocultar título/tagline duplicados y widgets accidentales
   ========================================================================== */
/* Widgets de Elementor que muestran título/tagline redundantes en portada
   (el tema ya muestra el logo en la cabecera; título+tagline se convierten en ruido) */
body.home .elementor-widget-site-title,
body.home .elementor-widget-site-tagline,
body.home .elementor-widget-page-title:not(.tema-permite-titulo),
/* Bloques Gutenberg */
body.home .wp-block-site-title,
body.home .wp-block-site-tagline,
body.home .wp-block-post-title,
/* Clásicos WP */
body.home > .site-title,
body.home > .site-description {
  display: none !important;
}
/* Escape hatch: añade la clase .tema-permite-titulo a un widget de Elementor
   para dejarlo visible aunque coincida con las reglas anteriores. */

/* ==========================================================================
   12. Firma de agencia — badge "Arquitectura publicitaria · Estuma"
   ========================================================================== */
.pie__estuma {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  width: 100%;
  padding: 1.1rem 1rem;
  background: var(--primario);
  text-decoration: none;
  transition: background var(--transicion);
}
.pie__estuma:hover { background: var(--primario-osc); }
.pie__estuma-tag {
  font-family: var(--f-body);
  font-size: .78rem;
  font-weight: 600;
  color: var(--blanco);
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: .01em;
}
.pie__estuma-logo {
  height: 22px !important;
  width: auto !important;
  max-width: 90px !important;
  display: block;
}

/* ==========================================================================
   Slider móvil para rejillas (Destacados / Productos / Entradas)
   Activable por módulo desde Agencia Estuma → Home. Sin JavaScript:
   scroll horizontal nativo con "snap" a cada tarjeta, más ligero y con
   mejor soporte táctil que un slider por JS.
   ========================================================================== */
@media (max-width: 600px) {
  ul.products.columns-4.grid-slider-movil,
  .categorias.grid-slider-movil,
  .lista-entradas.grid-slider-movil {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem !important;
    padding-bottom: .6rem;
    margin: 0 -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .grid-slider-movil > * {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  .grid-slider-movil::-webkit-scrollbar { height: 5px; }
  .grid-slider-movil::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 999px; }
  .grid-slider-movil::-webkit-scrollbar-track { background: transparent; }
}