/* ═══════════════════════════════════════════════════════════════
   Cazurretas — hoja de estilos del tema.
   Mismo armazón que el tema de Camijetas, con la identidad de esta tienda:
   el magenta del logo, Archivo para el texto, Zilla Slab para los titulares
   y Caveat Brush para los rótulos.
   Las fuentes son variables, autoalojadas: ni una llamada a Google.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url("../fuentes/archivo.woff2") format("woff2");
}
@font-face {
  font-family: "Zilla Slab"; font-style: normal; font-weight: 300 700;
  font-display: swap; src: url("../fuentes/zilla-slab.woff2") format("woff2");
}
@font-face {
  font-family: "Zilla Slab"; font-style: italic; font-weight: 300 700;
  font-display: swap; src: url("../fuentes/zilla-slab-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Caveat Brush"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fuentes/caveat-brush.woff2") format("woff2");
}
/* La del menú es la que traía Shopkeeper, para que la cabecera siga
   sonando a Cazurretas y no a un tema recién puesto. */
@font-face {
  font-family: "NeueEinstellung"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fuentes/NeueEinstellung-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Slab"; font-style: normal; font-weight: 700 900;
  font-display: swap; src: url("../fuentes/roboto-slab.woff2") format("woff2");
}
@font-face {
  font-family: "NeueEinstellung"; font-style: normal; font-weight: 600 700;
  font-display: swap; src: url("../fuentes/NeueEinstellung-Bold.woff2") format("woff2");
}

:root {
  /* La marca: el magenta del logo manda, y el negro es cálido para que no
     compita con el estampado de las prendas, casi siempre en negro. */
  --ink: #14100F;
  --paper: #ffffff;
  --sand: #F6F1EF;
  --yellow: #FFC400;
  --purple: #7A1146;
  --muted: #8a8380;
  --primary: #CE0066;       /* principal: botones, «¡La quiero!» */
  --secondary: #FFC400;     /* contraste: ofertas y avisos */
  --pink: #CE0066;
  --sale: #CE0066;
  --maxw: 1280px;
  --font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Archivo", var(--font-sans);
  --font-title: "Zilla Slab", Georgia, serif;
  --font-hand: "Caveat Brush", var(--font-title);
  --font-menu: "NeueEinstellung", var(--font-sans);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; overflow-x: clip;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
body { font-size: 16px; line-height: 1.6; }

a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; height: auto; display: block; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.btn,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  display: inline-block;
  background: var(--ink); color: #fff;
  padding: 14px 28px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; font-size: 14px;
  border: none; border-radius: 0; cursor: pointer;
  font-family: var(--font-sans); line-height: 1.2;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: #000; color: #fff; }
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt { background: var(--primary); color: #fff; }
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { background: #b4e800; color: #0d0d0d; }
/* Un botón que aún no se puede pulsar (una variable sin talla elegida, por
   ejemplo) tiene que PARECER apagado. WooCommerce lo deja de su color de
   marca al 50 %, que se lee como «lila» y no como «elige una talla». */
.woocommerce a.button.disabled, .woocommerce button.button.disabled,
.woocommerce input.button.disabled, .woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce a.button.alt.disabled, .woocommerce button.button.alt.disabled,
.woocommerce input.button.alt.disabled, .woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled[disabled] {
  background: #e2e2e2; color: #767676; cursor: not-allowed; opacity: 1;
}
.woocommerce a.button.alt.disabled:hover, .woocommerce button.button.alt.disabled:hover,
.woocommerce button.button.alt:disabled:hover { background: #e2e2e2; color: #767676; }

.btn--light { background: #fff; color: var(--ink); }

/* ── Salto al contenido (accesibilidad) ── */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 20px;
}
.saltar:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* ── Cabecera ───────────────────────────── */
.topbar {
  background: var(--ink); color: #fff;
  font-family: var(--font-menu);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
}
/* El aviso de la barra de arriba, como el que tenía la tienda. */
.topbar__aviso { color: #fff; opacity: .92; text-transform: none; letter-spacing: .02em; }
@media (max-width: 900px) { .topbar__aviso { display: none; } }
.topbar__inner { display: flex; align-items: center; gap: 28px; height: 40px; }
.topbar__spacer { flex: 1; }
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 78px; font-family: var(--font-display); font-weight: 700;
  font-size: 22px; text-transform: none;
}
/* Los enlaces viven en su propio bloque: si no caben, envuelven entre ellos
   sin empujar al carrito a la línea de abajo. */
.nav__enlaces {
  display: flex; align-items: center; justify-content: center;
  flex: 1 1 auto; flex-wrap: wrap; gap: 10px 26px;
  /* Como en Shopkeeper: su letra, en seminegrita y mayúsculas. El cuerpo sí
     sube —el suyo eran 13 px, que en esta cabecera se quedaban pequeños. */
  font-family: var(--font-menu);
  font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.nav ul { list-style: none; margin: 0; padding: 0; display: contents; }
.nav li { display: inline-flex; align-items: center; }
.logo {
  font-family: var(--font-display); font-weight: 900; font-size: 30px;
  font-style: italic; color: var(--ink);
  flex: 0 0 auto; white-space: nowrap;   /* el nombre de la tienda no se parte */
}
.logo img { max-height: 46px; width: auto; }
.cart-badge {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; border-radius: 999px;
  background: var(--pink); color: #fff; font-size: 11px; font-weight: 700;
}
.socials { display: inline-flex; align-items: center; gap: 14px; }
.socials a { display: inline-flex; opacity: 0.85; transition: opacity 0.2s; }
.socials a:hover { opacity: 1; }
/* «Mi cuenta» y «Carrito», a la derecha del menú y pegados a la bolsa.
   Más pequeños que las secciones de la tienda: son accesos, no navegación. */
.nav__cuenta {
  display: inline-flex; align-items: center; gap: 20px; flex: 0 0 auto;
  font-family: var(--font-menu);
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
}
.nav__cuenta a { white-space: nowrap; opacity: .78; transition: opacity .2s; }
.nav__cuenta a:hover { opacity: 1; }
/* En pantalla estrecha estorban: el icono de la bolsa ya lleva al carrito. */
@media (max-width: 1100px) { .nav__cuenta { display: none; } }

.nav__cart { position: relative; display: inline-flex; align-items: center; }
.nav__cart .cart-badge { position: absolute; top: -7px; right: -9px; }

/* menú móvil */
.nav__abrir { display: none; background: none; border: 0; color: inherit; cursor: pointer; padding: 6px; }
.nav { position: relative; }

/* Lo que solo existe dentro del panel del menú del móvil. */
.nav__movil { display: none; }

@media (max-width: 900px) {
  /* La cabecera se queda arriba al bajar: en el móvil, volver al menú
     significaba subir hasta el principio de una página de cinco pantallas. */
  .cabecera { position: sticky; top: 0; z-index: 60; background: var(--paper); }
  body.tiene-hero .cabecera { background: transparent; transition: background .25s; }
  body.tiene-hero.nav-pegada .cabecera { background: var(--ink); }
  body.tiene-hero.nav-pegada .nav,
  body.tiene-hero.nav-pegada .nav .logo { color: #fff; }
  .nav { gap: 12px; min-height: 64px; }
  .logo { font-size: 22px; }
  .nav__abrir { display: inline-flex; order: 3; }
  .nav__cart { order: 2; }

  /* El menú se guarda tras el botón y baja como panel. */
  .nav__enlaces { display: none; }
  .nav.abierto .nav__enlaces {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; color: var(--ink); padding: 14px 20px; gap: 4px;
    z-index: 40; box-shadow: 0 14px 34px rgba(0,0,0,.2);
    max-height: 72vh; overflow-y: auto; font-size: 18px;
  }
  .nav.abierto .nav__enlaces a,
  .nav.abierto .nav__ddbtn { color: var(--ink); padding: 8px 0; }

  /* Dentro del panel, los desplegables ya están abiertos: no hay hover. */
  .nav.abierto .nav__dd { position: static; display: flex; flex-direction: column; }
  .nav.abierto .nav__ddmenu {
    position: static; display: flex; transform: none; box-shadow: none;
    min-width: 0; padding: 0 0 6px 14px; max-height: none;
  }
  .nav.abierto .nav__ddmenu a { padding: 7px 0; font-size: 16px; }
  .nav.abierto .nav__grupolista a { padding-left: 14px; }

  /* Buscador y accesos de cliente, al fondo del panel. */
  .nav__movil { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linea, #e6e1d8); }
  .nav__buscar { display: flex; align-items: center; gap: 8px; border: 1px solid #ccc; padding: 10px 12px; }
  .nav__buscar input[type="search"] { border: 0; flex: 1; font-size: 16px; background: none; color: var(--ink); min-width: 0; }
  .nav__buscar input[type="search"]:focus { outline: none; }
  .nav__buscar button { background: none; border: 0; color: var(--ink); display: inline-flex; cursor: pointer; padding: 0; }
  .nav__movilenlace {
    font-family: var(--font-menu); font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em; color: var(--ink); padding: 4px 0;
  }

  /* En una pantalla estrecha la barra de arriba se queda con lo justo:
     el buscador y las redes. «Mi cuenta» y «Carrito» ya están en el menú y
     en el icono de la bolsa. */
  .topbar__inner { gap: 10px; flex-wrap: nowrap; }
  .topbar__spacer { display: none; }        /* sin nada que empujar, estorba */
  .topsearch { flex: 1 1 60px; min-width: 0; }
  .topsearch input { width: 100%; min-width: 0; }
  .socials { flex: 0 0 auto; }
  .container { padding: 0 16px; }
  /* El nombre de la tienda cede antes que sacar el menú de la pantalla. */
  .logo { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 420px) {
  .socials a:nth-child(n+3) { display: none; }   /* dos redes bastan */
}

/* ── Hero ───────────────────────────────── */
/* 400 px menos de los que ocupaba: seguía siendo una apertura a sangre, pero
   sin comerse la pantalla entera y dejando ver lo que hay debajo. El mínimo
   evita que en una pantalla baja se quede en nada. */
.hero {
  position: relative;
  /* El tope contaba dos veces el hueco de abajo: restaba 400 px de pantalla Y
     además el texto reserva otros ~300 para el carrusel, que va DENTRO del
     hero. En un portátil quedaban 455 px para 700 de contenido y el titular se
     salía por arriba, donde la cabecera se lo comía. Ahora se descuenta solo
     la cabecera y lo que se quiere dejar asomando. Medido a 1280, 1366, 1440,
     1512, 1680, 1920 y 2560. */
  height: 800px; max-height: calc(100svh - 150px); min-height: 520px;
  background: var(--sand); overflow: hidden;
}
/* Los 400 px que se le restan son para el escritorio. En un teléfono esa
   cuenta dejaba el hero en el mínimo (440 px, media pantalla) y la portada
   abría en un recorte sin aire. Aquí manda la pantalla, no la resta. */
@media (max-width: 900px) {
  .hero { height: auto; max-height: none; min-height: min(72svh, 560px); }
}
/* Sin vídeo ni foto de fondo el hero se queda en lo que ocupa el carrusel:
   una pantalla entera de color plano no es una portada. */
.hero--sinfondo { height: auto; min-height: 0; padding: 34px 0 8px; }
.hero--sinfondo::after { display: none; }
.hero--sinfondo .hero__carousel { position: static; padding-bottom: 28px; }
/* Sin foto detrás no hay dónde superponer: el texto pasa a ocupar su sitio,
   encima del carrusel, en vez de flotar sobre él. */
.hero--sinfondo .hero__slides { position: static; }
.hero--sinfondo .hero__slide { position: static; }
.hero--sinfondo .hero__texto {
  position: static; inset: auto; padding: 8px 24px 26px;
  max-width: var(--maxw); margin: 0 auto;
}
.hero--sinfondo .hero__texto--con-carrusel.hero__texto--abajo { padding-bottom: 26px; }
.hero--sinfondo .hero__titular { font-size: clamp(30px, 4.6vw, 56px); }
/* «Texto claro» quiere decir «sobre una foto oscura». Sin foto, el fondo es
   claro y ese blanco desaparece: manda la tinta. */
.hero--sinfondo .hero__texto--claro { color: var(--ink); }
.hero--sinfondo .hero__texto--claro .hero__titular,
.hero--sinfondo .hero__texto--claro .hero__entradilla,
.hero--sinfondo .hero__texto--claro .hero__ante { text-shadow: none; }
.hero--sinfondo .hero__texto--claro .hero__ante { color: var(--primary); }
.hero--sinfondo .hero__texto--claro .hero__cta { background: var(--primary); color: #fff; }
.hero--sinfondo .hero__velo { display: none; }
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 260px;
  background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0));
  z-index: 1; pointer-events: none;
}
/* ── Varias portadas rotando ────────────────────────────────
   Las escenas se apilan en el mismo hueco y se cruzan con un fundido. La que
   no está activa queda fuera del alcance del ratón y del teclado. */
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .7s ease, visibility 0s linear .7s;
}
.hero__slide.es-activa { opacity: 1; visibility: visible; transition: opacity .7s ease; }
/* Sin varias escenas no hay nada que cruzar: se ve y ya. */
.hero:not(.hero--rotante) .hero__slide { opacity: 1; visibility: visible; transition: none; }

.hero__flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  border: 0; background: rgba(0,0,0,.28); color: #fff; cursor: pointer;
  width: 46px; height: 46px; border-radius: 50%;
  font-size: 30px; line-height: 1; display: grid; place-items: center;
  transition: background .2s ease; backdrop-filter: blur(2px);
}
.hero__flecha:hover { background: rgba(0,0,0,.5); }
.hero__flecha--prev { left: 16px; }
.hero__flecha--next { right: 16px; }

.hero__puntos {
  position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); bottom: 18px;
  display: flex; justify-content: center; gap: 10px;
  /* Una píldora detrás: los puntos tienen que verse igual sobre una foto
     clara que sobre una oscura, y la foto la elige otro. */
  background: rgba(0,0,0,.3); border-radius: 999px; padding: 8px 12px;
  backdrop-filter: blur(3px);
}
.hero__punto {
  width: 10px; height: 10px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid rgba(255,255,255,.9); background: transparent;
  transition: background .2s ease, transform .2s ease;
}
.hero__punto.es-activo { background: #fff; transform: scale(1.25); }
.hero__punto:hover { background: rgba(255,255,255,.6); }

/* Con carrusel de producto debajo, los puntos y las flechas se suben para no
   quedar encima de las tarjetas. */
.hero:has(.hero__carousel) .hero__puntos { bottom: auto; top: 24px; }
.hero:has(.hero__carousel) .hero__flecha { top: 38%; }

/* ── El texto sobre la imagen del hero ──────────────────────
   La foto manda: el texto se coloca donde la imagen deje sitio, con un velo
   por debajo cuando hace falta para poder leerlo. */
.hero__velo {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.15) 42%, rgba(0,0,0,.6));
}
/* Con texto oscuro el velo aclara en vez de oscurecer: si no, se pierde. */
.hero__velo--claro { background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.35) 55%, rgba(255,255,255,.6)); }
.hero__texto {
  position: absolute; inset: 0; z-index: 2;
  display: flex; padding: clamp(24px, 5vw, 72px);
  pointer-events: none;   /* el carrusel de abajo sigue siendo pulsable */
}
/* Arriba hay que dejar sitio: sobre el hero, la cabecera va superpuesta y se
   comería el antetítulo. */
.hero__texto--arriba { align-items: flex-start; padding-top: clamp(110px, 11vw, 165px); }
/* «safe»: si el bloque no cabe, se alinea por arriba en vez de desbordar hacia
   fuera del hero. Sin esto, en cuanto falta sitio el texto se sube por encima
   y la cabecera lo tapa — que es justo lo que pasaba. La primera declaración
   es el recambio para navegadores que no entiendan «safe». */
.hero__texto--centro { align-items: center; align-items: safe center; }
.hero__texto--abajo  { align-items: flex-end; align-items: safe flex-end; }
.hero__texto--izquierda { justify-content: flex-start; text-align: left; }
.hero__texto--derecha   { justify-content: flex-end; text-align: right; }
.hero__texto--centro.hero__texto--centro { }
.hero__texto.hero__texto--centro:not(.hero__texto--izquierda):not(.hero__texto--derecha) { justify-content: center; text-align: center; }

.hero__bloque {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 46ch; pointer-events: auto;
  /* El bloque se alinea por el LADO, nunca heredando del padre: ahí
     «flex-end» significa «abajo», y heredarlo empujaba el texto a la
     derecha en cuanto el bloque tenía sitio de sobra. */
  align-items: flex-start;
}
.hero__texto--derecha .hero__bloque { margin-left: auto; align-items: flex-end; }
.hero__texto--centro:not(.hero__texto--izquierda):not(.hero__texto--derecha) .hero__bloque { align-items: center; }

.hero__ante {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase; opacity: .92;
}
.hero__titular {
  font-family: var(--font-title); font-weight: 800; margin: 0;
  /* Miraba solo al ancho: en una pantalla ancha pero baja, 76 px a dos líneas
     no dejaban sitio para la entradilla ni el botón. Ahora también mira al alto. */
  font-size: clamp(34px, min(6.2vw, 8svh), 76px); line-height: 1.02; letter-spacing: -.01em;
  text-wrap: balance;
}
.hero__entradilla {
  font-size: clamp(16px, 1.5vw, 20px); line-height: 1.5; margin: 0;
  max-width: 42ch; opacity: .95;
}
.hero__cta { align-self: flex-start; margin-top: 6px; }
.hero__texto--derecha .hero__cta { align-self: flex-end; }
.hero__texto--centro:not(.hero__texto--izquierda):not(.hero__texto--derecha) .hero__cta { align-self: center; }

/* Texto claro sobre foto: sombra suave, que un velo no siempre basta. */
.hero__texto--claro { color: #fff; }
.hero__texto--claro .hero__titular { text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.hero__texto--claro .hero__entradilla,
.hero__texto--claro .hero__ante { text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.hero__texto--claro .hero__cta { background: var(--primary); color: #fff; }
.hero__texto--claro .hero__cta:hover { background: #a80054; color: #fff; }

/* Texto oscuro: para fotos claras, donde el blanco desaparece. */
.hero__texto--oscuro { color: var(--ink); }
.hero__texto--oscuro .hero__cta { background: var(--ink); color: #fff; }

/* La variante manuscrita, la misma letra de los títulos de sección. */
.hero__texto--mano .hero__titular { font-family: var(--font-hand); font-weight: 700; line-height: .95; }

/* Con carrusel abajo, el texto no debe pisarlo. */
.hero__texto--con-carrusel.hero__texto--abajo { padding-bottom: clamp(210px, 24vw, 300px); }

/* Alturas: no toda portada quiere una foto a pantalla completa. */
.hero--medio { height: 620px; max-height: 70svh; }
.hero--bajo  { height: 420px; max-height: 52svh; }

@media (max-width: 640px) {
  .hero__bloque { max-width: none; }
  /* Ojo: aquí no vale el atajo «padding», que pisaría el hueco que la
     posición «arriba» reserva para la cabecera superpuesta. */
  .hero__texto { padding-left: 22px; padding-right: 22px; padding-bottom: 22px; }
  .hero__texto--centro, .hero__texto--abajo { padding-top: 22px; }
  .hero__texto--arriba { padding-top: 124px; }
  /* En vertical, el carrusel ocupa más parte de la pantalla. */
  .hero__texto--con-carrusel.hero__texto--abajo { padding-bottom: 270px; }
  /* En vertical las flechas se comen el titular. Se pasa con el dedo, y
     los puntos siguen ahí para ir a una portada concreta. */
  .hero__flecha { display: none; }
  /* En una pantalla estrecha, el texto a la derecha se lee peor que centrado. */
  .hero__texto--derecha { justify-content: center; text-align: center; }
  .hero__texto--derecha .hero__bloque { margin-left: 0; align-items: center; }
  .hero__texto--derecha .hero__cta { align-self: center; }
}
body.tiene-hero .cabecera { position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
body.tiene-hero .topbar { background: rgba(0,0,0,0.3); }
body.tiene-hero .nav { color: #fff; }
body.tiene-hero .nav .logo { color: #fff; }

/* Sobre una foto clara, el menú blanco se pierde: se va a tinta con el texto. */
body.hero-en-oscuro .nav,
body.hero-en-oscuro .nav .logo { color: var(--ink); }
body.hero-en-oscuro .topbar { background: rgba(0,0,0,.55); }

/* ── Carrusel superpuesto en la base de la hero ── */
.hero__carousel { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 3; }
.herocar { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
.herocar__track {
  display: flex; gap: 18px; justify-content: center; align-items: flex-end;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px 44px; scrollbar-width: none;
}
.herocar__track::-webkit-scrollbar { display: none; }
.herocard { flex: 0 0 auto; width: 186px; scroll-snap-align: center; background: transparent; }
.herocard__media { background: transparent; aspect-ratio: 1 / 1; display: grid; place-items: center; }
.herocard__media img {
  width: 100%; height: 100%; object-fit: contain;
  transition: filter 0.35s ease; transform-origin: 50% 0%;
}
.herocard:hover .herocard__media img { animation: flutter 0.8s ease-in-out infinite; }
@keyframes flutter {
  0%, 100% { transform: skewX(0deg) rotate(0deg); }
  20% { transform: skewX(3deg) rotate(0.6deg); }
  50% { transform: skewX(-2.6deg) rotate(-0.5deg); }
  80% { transform: skewX(2deg) rotate(0.4deg); }
}
.herocard__stars {
  text-align: center; font-size: 13px; margin: 8px 0 10px; min-height: 19px;
  color: #f5a623; text-shadow: 0 2px 8px rgba(0,0,0,0.65);
}
.herocard__box {
  background: var(--primary); color: #fff;
  border-radius: 10px; padding: 9px 12px 12px;
  text-align: center; box-shadow: 0 10px 26px rgba(0,0,0,0.32);
}
.herocard__name {
  /* Roboto Slab en negrita: la misma familia de palo con remate que los
     titulares, pero con más cuerpo para que aguante sobre el color. */
  font-family: "Roboto Slab", var(--font-title);
  font-weight: 800; font-style: normal; font-size: 17px; letter-spacing: -.01em;
  margin: 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.herocard__price { font-size: 14px; font-weight: 600; color: #fff; }
.herocard__price .old, .herocard__price del { color: rgba(255,255,255,.7); text-decoration: line-through; margin-right: 6px; }
.herocard__price .now, .herocard__price ins { color: #fff; font-weight: 800; text-decoration: none; }
.herocard__price bdi { color: inherit; }
.herocar__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  border: none; cursor: pointer; background: transparent; color: #fff;
  font-size: 44px; line-height: 1; text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}
.herocar__nav--prev { left: 8px; }
.herocar__nav--next { right: 8px; }
@media (max-width: 640px) {
  .herocard { width: 150px; }
  .herocar__track { justify-content: flex-start; padding: 6px 12px; }
  .herocar__nav { display: none; }
}

/* ── Banners del plugin de la tienda ────── */
.banners { display: flex; flex-direction: column; }
.banner img { width: 100%; height: auto; display: block; }
.banner__enlace { display: block; }

/* ── Banner promocional ─────────────────── */
.promo { display: grid; grid-template-columns: 1fr 2fr; min-height: 320px; }
.promo__left {
  background: var(--ink); color: #fff; display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: 18px; padding: 40px; text-align: center;
}
.promo__title { font-family: var(--font-title); font-size: 54px; margin: 0; }
.promo__img { object-fit: cover; width: 100%; height: 100%; }

/* ── Títulos de sección ─────────────────── */
.section { padding: 56px 0; }
.section__bar {
  background: var(--ink); color: #fff; font-family: var(--font-hand);
  font-size: 40px; font-weight: 700; text-align: center; padding: 18px;
  /* Sin esto, el margen que el navegador da a los <h2> deja una franja
     blanca de 33 px entre el hero y la barra del título. */
  margin: 0;
}
.section__title {
  font-family: var(--font-hand); font-size: 52px; font-weight: 700;
  text-align: center; margin: 0 0 32px; text-wrap: balance;
}

/* ── Mosaico (Top Ventas) ───────────────── */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.tiles--2 { grid-template-columns: repeat(2, 1fr); }
.tiles--4 { grid-template-columns: repeat(4, 1fr); }
.tiles--5 { grid-template-columns: repeat(5, 1fr); }
/* Con aire, el mosaico deja de ir a sangre: las prendas respiran y el bloque
   se mete en el ancho del resto de la página. */
.tiles--aire {
  gap: 22px;
  max-width: var(--maxw); margin: 0 auto; padding: 34px 24px 8px;
}
.tiles--aire .tile { background: var(--sand); }
.tiles--aire .tile__cap { padding: 14px 16px; }
.tile { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--sand); }
.tile__img, .tile__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile__img { transition: transform 0.45s ease; z-index: 0; }
.tile__video { opacity: 0; transition: opacity 0.3s ease; z-index: 1; }
.tile.is-playing .tile__video { opacity: 1; }
.tile:hover .tile__img { transform: scale(1.05); }
.tile__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.72));
  opacity: 0; transition: opacity 0.25s ease;
}
.tile:hover .tile__cap, .tile:focus-within .tile__cap { opacity: 1; }
.tile__name { font-family: var(--font-title); font-weight: 800; font-size: clamp(18px, 2vw, 26px); }
.tile__price { font-size: 15px; }
.tile__price s { color: #cfcfcf; margin-right: 6px; }
@media (max-width: 1000px) {
  .tiles--4, .tiles--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .tiles, .tiles--2, .tiles--4, .tiles--5 { grid-template-columns: repeat(2, 1fr); }
  .tiles--aire { gap: 14px; padding: 22px 16px 4px; }
}

/* Un trozo del logotipo, enorme y casi transparente, detrás del mosaico. */
.mosaico { position: relative; }
.mosaico--marca::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--marca);
  background-repeat: no-repeat;
  /* Grande y descentrado a propósito: se ve un trozo del logotipo, no el
     logotipo entero. */
  background-size: auto 115%;
  background-position: 14% 52%;
  opacity: .10;
}
.mosaico--marca > .tiles { position: relative; z-index: 1; }
@media (max-width: 700px) { .mosaico--marca::before { background-size: auto 110%; opacity: .06; } }

/* ── Rejilla de productos ───────────────── */
/* «ul.products» a secas, además de la versión con .woocommerce: el shortcode
   [product_category] dentro de una página normal pinta la lista SIN ese
   envoltorio, y sin esto la rejilla no se aplicaba y las fotos salían
   diminutas. Pasa en las páginas Camisetas, Sudaderas e Infantil. */
.grid,
ul.products,
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  list-style: none; margin: 0; padding: 0; float: none;
}
@media (max-width: 900px) {
  .grid, ul.products, .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); }
}
/* En el móvil se quedan DOS columnas, no una: con una sola, la portada medía
   ocho pantallas de scroll y ver el catálogo era un viaje. Con dos, la foto
   sigue leyéndose (unos 165 px de ancho en un iPhone) y la portada baja a
   unas cinco pantallas. */
@media (max-width: 520px) {
  .grid, ul.products, .woocommerce ul.products, .woocommerce-page ul.products {
    grid-template-columns: repeat(2, 1fr); gap: 18px 14px;
  }
  .card__name, ul.products li.product .woocommerce-loop-product__title { font-size: 14px; }
  .card__price, ul.products li.product .price { font-size: 14px; }
}
/* Una fila con menos prendas que columnas (Sudaderas e Infantil tienen dos)
   se quedaba pegada a la izquierda con medio ancho vacío: se centra, y las
   tarjetas conservan el tamaño de la rejilla en vez de estirarse. */
.grid:has(> :nth-child(1):nth-last-child(2)),
.grid:has(> :nth-child(1):nth-last-child(3)) { justify-content: center; }
.grid:has(> :nth-child(1):nth-last-child(2)) { grid-template-columns: repeat(2, minmax(0, 280px)); }
.grid:has(> :nth-child(1):nth-last-child(3)) { grid-template-columns: repeat(3, minmax(0, 280px)); }
@media (max-width: 900px) {
  .grid:has(> :nth-child(1):nth-last-child(3)) { grid-template-columns: repeat(2, minmax(0, 280px)); }
}
@media (max-width: 520px) {
  /* Con dos prendas caben las dos en fila; con tres, dos arriba y una abajo. */
  .grid:has(> :nth-child(1):nth-last-child(2)),
  .grid:has(> :nth-child(1):nth-last-child(3)) { grid-template-columns: repeat(2, 1fr); justify-content: stretch; }
}

/* Si la página pide tres columnas, se respetan. */
ul.products.columns-3, .woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
ul.products.columns-2, .woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
  ul.products.columns-3, .woocommerce ul.products.columns-3 { grid-template-columns: repeat(2, 1fr); }
}
ul.products li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
/* WooCommerce fija el ancho con un selector de tres clases
   («ul.products.columns-3 li.product»: 30,75 %), que gana al de dos aunque
   esta hoja vaya después. El atributo iguala esa especificidad. Sin esto,
   cada tarjeta se quedaba en 121 px dentro de una columna de 392. */
ul.products[class*="columns-"] li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
  margin: 0; width: auto; float: none; clear: none; padding: 0;
}
ul.products li.product::before,
ul.products::after, ul.products::before,
.woocommerce ul.products li.product::before,
.woocommerce ul.products::after,
.woocommerce ul.products::before { content: none; }
/* La tarjeta ocupa su celda entera; la imagen manda sobre el tamaño. */
ul.products li.product .card,
.woocommerce ul.products li.product .card { width: 100%; }
ul.products li.product .card__media,
.woocommerce ul.products li.product .card__media { width: 100%; }
/* Y el envoltorio que pone el shortcode no debe encoger la lista. */
.pagina__cuerpo .woocommerce { width: 100%; }

.card { position: relative; text-align: center; }
.card__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: transparent; border-radius: 4px; }
.card__img, .card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.card__video { opacity: 0; transition: opacity 0.25s ease; }
.card.is-playing .card__video { opacity: 1; }
.card__badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-weight: 800; font-size: 12px; letter-spacing: 0.05em;
  padding: 6px 12px; border-radius: 999px; color: #fff;
}
.card__badge--oferta { background: var(--sale); }
.card__badge--nuevo { background: var(--secondary); color: var(--ink); }
.card__badge--agotado { background: #555; }
.card__want {
  background: var(--primary); color: #fff;
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 3; opacity: 0; transition: opacity 0.2s ease; white-space: nowrap;
}
.card:hover .card__want, .card:focus-within .card__want { opacity: 1; }
.card__stars { color: #f5a623; font-size: 13px; margin-top: 12px; }
.card__name { font-family: var(--font-title); font-size: 22px; font-weight: 700; margin: 4px 0; }
.card__price { font-size: 15px; }
.card__price .old, .card__price del { color: var(--muted); text-decoration: line-through; margin-right: 8px; }
.card__price .now, .card__price ins { color: var(--sale); font-weight: 700; text-decoration: none; }

/* ── Escaparate (archivo de producto) ───── */
.escaparate { padding: 40px 0 72px; }
.escaparate__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.escaparate__titulo { font-family: var(--font-hand); font-size: 52px; margin: 0; }
.escaparate__desc { color: var(--muted); max-width: 60ch; }
/* Contador y orden, uno al lado del otro: WooCommerce los hace flotar y se
   montan encima el uno del otro fuera de su maquetación. */
.escaparate__cab > div:last-child { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.woocommerce .woocommerce-result-count { color: var(--muted); font-size: 14px; margin: 0; float: none; }
.woocommerce .woocommerce-ordering { margin: 0; float: none; }
.woocommerce-ordering select { border: 1px solid #ddd; padding: 10px 14px; font-size: 14px; font-family: var(--font-sans); }
.woocommerce-pagination { margin: 48px 0 0; text-align: center; }
.woocommerce-pagination ul { display: inline-flex; gap: 6px; list-style: none; padding: 0; margin: 0; border: 0; }
.woocommerce-pagination li { border: 0; }
.woocommerce-pagination a, .woocommerce-pagination span {
  display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid #e2e2e2; font-weight: 700;
}
.woocommerce-pagination span.current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ── Ficha de producto ──────────────────── */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 48px 0 0; }
@media (max-width: 860px) { .pdp { grid-template-columns: 1fr; } }
.pdp__gallery { position: relative; background: transparent; }
/* La galería de WooCommerce: que ocupe su columna entera y la foto respire. */
.pdp .woocommerce-product-gallery { width: 100% !important; float: none; margin: 0; opacity: 1 !important; }
.pdp .woocommerce-product-gallery__wrapper { margin: 0; }
.pdp .woocommerce-product-gallery__image img { width: 100%; height: auto; display: block; }
.pdp .flex-viewport { background: var(--sand); }
/* Las miniaturas salían de 28 px en una columna de 592: FlexSlider y el CSS
   de WooCommerce le fijan el ancho a la imagen, y ganaban al del tema. Se les
   fuerza el ancho de su casilla, que con cuatro fotos son unos 140 px. */
.pdp .flex-control-thumbs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  list-style: none; margin: 14px 0 0; padding: 0; width: 100%;
}
.pdp .flex-control-thumbs li { width: auto !important; float: none !important; margin: 0 !important; }
.pdp .flex-control-thumbs img {
  width: 100% !important; height: auto !important; max-width: none !important;
  display: block; cursor: pointer; opacity: .55; transition: opacity .2s;
  aspect-ratio: 1 / 1; object-fit: contain; background: var(--sand);
}
.pdp .flex-control-thumbs img.flex-active, .pdp .flex-control-thumbs img:hover { opacity: 1; }
/* Con más de cuatro fotos no conviene achicarlas: bajan de fila. */
@media (max-width: 520px) {
  .pdp .flex-control-thumbs { grid-template-columns: repeat(4, 1fr); gap: 8px; }
}
.pdp .woocommerce-product-gallery__trigger { top: 12px; right: 12px; z-index: 3; }
.pdp__collection { color: var(--muted); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.pdp__name { font-family: var(--font-title); font-size: 46px; font-weight: 800; line-height: 1.06; margin: 6px 0 12px; text-wrap: balance; }
.pdp__price, .pdp .price { font-size: 22px; margin: 8px 0; color: var(--ink); font-weight: 700; }
.pdp .price bdi { color: inherit; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--ink); }
.pdp .price del { color: var(--muted); margin-right: 10px; }
.pdp .price ins { color: var(--sale); font-weight: 800; text-decoration: none; }
.pdp__field { margin: 14px 0; }
.pdp__field label { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
.pdp__field select, .pdp__qty input { border: 1px solid #ccc; padding: 14px; width: 100%; font-size: 15px; }
.woocommerce div.product form.cart .variations { width: 100%; border: 0; margin-bottom: 18px; }
.woocommerce div.product form.cart .variations td { padding: 6px 0; display: block; }
.woocommerce div.product form.cart .variations label {
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  font-family: var(--font-sans);
}
.woocommerce div.product form.cart .variations select { border: 1px solid #ccc; padding: 13px; width: 100%; font-size: 15px; }
.woocommerce div.product form.cart .quantity { margin-right: 12px; }
.woocommerce .quantity input.qty { border: 1px solid #ccc; padding: 13px 8px; width: 72px; text-align: center; }
/* La ficha técnica de abajo (SKU, categoría, etiquetas): cada dato en su línea. */
.pdp .product_meta { border-top: 1px solid #eee; margin-top: 22px; padding-top: 16px; font-size: 14px; color: var(--muted); }
.pdp .product_meta > span { display: block; margin-bottom: 4px; }
.pdp .product_meta a { color: var(--ink); }

.pdp__extra { padding: 56px 0 72px; }
.woocommerce-tabs ul.tabs { list-style: none; display: flex; gap: 24px; padding: 0 0 12px; margin: 0 0 24px; border-bottom: 1px solid #eee; }
.woocommerce-tabs ul.tabs li a {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 14px; letter-spacing: 0.05em; color: var(--muted);
}
.woocommerce-tabs ul.tabs li.active a { color: var(--ink); }

/* Relacionados y ventas cruzadas: la misma rejilla que el resto. */
.related > h2, .upsells > h2, .cross-sells > h2 {
  font-family: var(--font-hand); font-weight: 700; font-size: 40px;
  text-align: center; margin: 56px 0 28px;
}
.woocommerce ul.products li.product a img { margin: 0; }
.woocommerce ul.products li.product .card__name { font-size: 20px; }

/* ── Valoraciones ───────────────────────── */
.resumen-resenas {
  display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: center;
  background: var(--sand); padding: 24px 28px; margin: 0 0 32px;
}
.resumen-resenas__nota { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.resumen-resenas__media { font-family: var(--font-title); font-size: 52px; font-weight: 800; line-height: 1; }
.resumen-resenas__estrellas { color: #f5a623; font-size: 18px; letter-spacing: 2px; }
.resumen-resenas__total { font-size: 13px; color: var(--muted); }
.resumen-resenas__barras { display: grid; gap: 6px; max-width: 420px; }
.resumen-resenas__fila { display: grid; grid-template-columns: 42px 1fr 40px; gap: 10px; align-items: center; font-size: 13px; }
.resumen-resenas__etiqueta { color: var(--muted); white-space: nowrap; }
.resumen-resenas__barra { background: #e2ded3; height: 8px; border-radius: 999px; overflow: hidden; }
.resumen-resenas__barra span { display: block; height: 100%; background: #f5a623; }
.resumen-resenas__n { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  .resumen-resenas { grid-template-columns: 1fr; gap: 18px; }
  .resumen-resenas__barras { max-width: none; }
}

/* La lista de valoraciones: la de WooCommerce, con la letra del tema. */
.woocommerce #reviews #comments > h2 {
  font-family: var(--font-hand); font-weight: 700; font-size: 34px; margin: 0 0 20px;
}
.woocommerce #reviews ol.commentlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.woocommerce #reviews ol.commentlist li { margin: 0; padding: 18px 0; border-bottom: 1px solid #ececec; }
/* Los selectores llevan #comments a propósito: es la especificidad con la
   que WooCommerce dibuja la caja de cada reseña, y sin igualarla gana él. */
.woocommerce #reviews #comments ol.commentlist li .comment_container { display: block; background: none; border: 0; padding: 0; }
.woocommerce #reviews #comments ol.commentlist li .comment-text { border: 0; margin: 0; padding: 0; border-radius: 0; }
.woocommerce #reviews #comments ol.commentlist li img.avatar {
  /* Un avatar gris genérico no dice nada y roba el ancho del texto. */
  display: none;
}
.woocommerce #reviews ol.commentlist li .comment-text { border: 0; margin: 0; padding: 0; }
/* Las estrellas, del mismo dorado que en las tarjetas de producto. */
.woocommerce #reviews #comments .comment-text .star-rating { float: none; margin: 0 0 6px; color: #f5a623; }
.woocommerce #reviews #comments .star-rating::before { color: #e2ded3; }
.woocommerce #reviews .comment-text p.meta { font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.woocommerce #reviews .comment-text p.meta strong { color: var(--ink); font-weight: 700; font-size: 14px; }
.woocommerce #reviews .comment-text .description p { margin: 0; font-size: 15.5px; line-height: 1.55; }
.woocommerce .woocommerce-pagination + #comments { margin-top: 0; }

/* El formulario, con los campos del tema. */
.woocommerce #review_form_wrapper { margin-top: 34px; }
.woocommerce #review_form #respond .comment-reply-title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; font-size: 14px; display: block; margin-bottom: 12px;
}
.woocommerce #review_form #respond textarea,
.woocommerce #review_form #respond input[type="text"],
.woocommerce #review_form #respond input[type="email"] {
  border: 1px solid #ccc; padding: 12px 14px; font-size: 15px; width: 100%;
  font-family: var(--font-sans); border-radius: 0;
}
.woocommerce #review_form #respond .comment-form-rating label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.woocommerce p.stars a { color: #f5a623; }

/* ── Editorial y newsletter ─────────────── */
.editorial { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.editorial__text { padding: 60px; display: flex; flex-direction: column; justify-content: center; }
.editorial__title { font-family: var(--font-hand); font-size: 40px; font-weight: 700; margin: 0 0 16px; }
.editorial img { width: 100%; height: 100%; object-fit: cover; min-height: 360px; }
.newsletter { position: relative; color: #fff; text-align: center; background: #000; }
.newsletter__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.newsletter__grid img { height: 340px; width: 100%; object-fit: cover; opacity: 0.3; }
.newsletter__overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; padding: 20px;
}
.newsletter__headline { font-family: var(--font-hand); font-size: 40px; font-weight: 700; margin: 0; }

/* ── Contenido de páginas (aviso legal, FAQ…) ── */
.pagina { padding: 56px 0 72px; }
.pagina__titulo { font-family: var(--font-hand); font-size: 52px; margin: 0 0 28px; text-wrap: balance; }
/* El cuerpo de una página no se encajona: dentro puede venir una sección a
   sangre heredada del tema anterior. Lo que sí se limita es el texto, para
   que se lea en una columna cómoda. */
.pagina__cuerpo > p,
.pagina__cuerpo > ul,
.pagina__cuerpo > ol,
.pagina__cuerpo > h2,
.pagina__cuerpo > h3,
.pagina__cuerpo > blockquote,
.pagina__cuerpo > .prosa,
.pagina__cuerpo > .titular-heredado { max-width: 68ch; }
.pagina__cuerpo > * + * { margin-top: 4px; }
.prosa { max-width: 68ch; }
.prosa p, .prosa li { font-size: 16.5px; line-height: 1.7; }
.prosa h2 { font-family: var(--font-title); font-size: 28px; margin: 34px 0 12px; }
.prosa h3 { font-family: var(--font-title); font-size: 21px; margin: 26px 0 10px; }
.prosa img { margin: 20px 0; }
.prosa table { width: 100%; border-collapse: collapse; }
.prosa td, .prosa th { border-bottom: 1px solid #eee; padding: 10px; text-align: left; }
.prosa a { text-decoration: underline; }

/* ── Contenido heredado del tema anterior ── */
/* Filas y columnas de WPBakery: ya solo envuelven, no maquetan. */
.vcfila { display: contents; }
.vcimagen { margin: 20px 0; }
.vcwidget { margin: 0 0 24px; }
.titular-heredado {
  font-family: var(--font-hand); font-weight: 700; font-size: 40px;
  margin: 0 0 18px; text-wrap: balance;
}
.pagina .titular-heredado + .prosa { margin-top: -6px; }
/* Sección con foto de fondo (la cabecera de Distribuidores). */
.seccion-fondo {
  position: relative; display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center; color: #fff;
  padding: 60px 24px; text-align: center;
  /* A sangre, aunque esté dentro del contenedor de la página. */
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  margin-bottom: 44px; max-width: 100vw;
}
.seccion-fondo::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.42); }
.seccion-fondo__interior { position: relative; max-width: 900px; }
.seccion-fondo .titular-heredado, .seccion-fondo h1, .seccion-fondo h2 { color: #fff; }
.socials--enlinea { color: var(--ink); gap: 18px; margin: 12px 0; }
/* Caja destacada heredada del tema anterior. */
.destacado {
  border-left: 3px solid var(--primary); background: var(--sand);
  padding: 16px 20px; margin: 0 0 20px;
}
.destacado p:last-child { margin-bottom: 0; }

/* Preguntas frecuentes. */
.faq { max-width: 68ch; display: flex; flex-direction: column; gap: 2px; }
.faq__item { border-bottom: 1px solid var(--linea, #e6e6e6); }
.faq__item summary {
  cursor: pointer; padding: 16px 0; font-family: var(--font-display);
  font-weight: 700; font-size: 17px; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: " +"; color: var(--muted); }
.faq__item[open] summary::after { content: " –"; }
.faq__item .prosa { padding: 0 0 18px; }

/* Widgets del pie. */
.footer__widget + .footer__widget { margin-top: 26px; }
.footer__widget ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 14px; color: #cfcfcf; }
.footer__widget li { list-style: none; }
.footer__widget img { margin: 8px 0; }
.footer__widget iframe { max-width: 100%; border: 0; }

/* ── El pie que pinta Elementor ─────────────────────────────
   El contenido es suyo y sigue editándose desde el constructor; esto solo le
   pone la letra del menú y ordena la jerarquía, que estaba toda al mismo peso
   y en negrita. */
.elementor-location-footer {
  font-family: var(--font-menu);
}
/* Los títulos de columna: pequeños, en versales y con menos peso visual que
   los enlaces, que son lo que la gente busca. Cuatro clases porque Elementor
   fija la tipografía de cada widget con tres y, si no, gana él. */
.elementor-location-footer .elementor-widget.elementor-widget-heading .elementor-heading-title,
.elementor-location-footer .elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-menu);
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  opacity: .72; margin-bottom: 6px;
}
/* Los enlaces: sin negrita, con aire entre líneas y un subrayado que aparece
   al pasar por encima en vez de estar siempre puesto. */
.elementor-location-footer .elementor-widget-text-editor,
.elementor-location-footer .elementor-widget-text-editor p,
.elementor-location-footer .elementor-widget-text-editor li {
  font-family: var(--font-menu);
  font-size: 15px; font-weight: 400; line-height: 2.1;
}
.elementor-location-footer .elementor-widget-text-editor ul { list-style: none; padding: 0; margin: 0; }
.elementor-location-footer a {
  font-weight: 500; text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color .18s ease, opacity .18s ease;
  opacity: .94;
}
.elementor-location-footer a:hover { opacity: 1; border-bottom-color: currentColor; }

/* El logotipo, a un tamaño que no compita con el resto del pie. */
.elementor-location-footer .elementor-widget-image img { max-width: 100%; height: auto; }
.elementor-location-footer .elementor-widget.elementor-widget-image img[src*="LOGO"] { max-width: 210px; }

/* Los medios de pago vienen con el fondo blanco incrustado en la propia
   imagen, y sobre el magenta eso se lee como un marco descuidado. No se
   puede recortar sin comerse los blancos de las tarjetas, así que se le da
   forma de tarjeta a propósito: fondo, esquinas y aire. */
.elementor-location-footer .elementor-widget.elementor-widget-image img[src*="paypal"] {
  max-width: 210px; background: #fff; border-radius: 8px;
  padding: 10px 12px; box-sizing: border-box;
}
.elementor-location-footer .elementor-widget-image + .elementor-widget-image { margin-top: 16px; }

/* Las columnas alineadas a la izquierda, acompañando al logotipo, en vez de
   centradas cada una por su cuenta. */
@media (min-width: 761px) {
  .elementor-location-footer .elementor-widget.elementor-widget-heading,
  .elementor-location-footer .elementor-widget.elementor-widget-text-editor,
  .elementor-location-footer .elementor-widget.elementor-widget-heading .elementor-heading-title,
  .elementor-location-footer .elementor-widget.elementor-widget-text-editor .elementor-widget-container,
  .elementor-location-footer .elementor-widget.elementor-widget-text-editor p { text-align: left; }
}

/* Una línea final con el aviso de siempre, separada del resto. */
.pie__cierre {
  background: var(--primary); color: #fff;
  font-family: var(--font-menu); font-size: 12.5px; letter-spacing: .04em;
  padding: 0 24px 26px;
}
.pie__cierre__interior {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  max-width: var(--maxw); margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,.28); padding-top: 18px;
}
.pie__cierre__texto { opacity: .85; }
.pie__cierre .socials { gap: 16px; }
.pie__cierre .socials a { opacity: .85; }
.pie__cierre .socials a:hover { opacity: 1; }

@media (max-width: 760px) {
  .elementor-location-footer .elementor-widget-text-editor,
  .elementor-location-footer .elementor-widget-text-editor p,
  .elementor-location-footer .elementor-widget-text-editor li { line-height: 1.9; font-size: 14.5px; }
  .pie__cierre__interior { justify-content: center; text-align: center; }
}

/* ── Pie ──────────────────────────────────
   Amarillo de marca: es el fondo donde el logotipo (magenta con sombra
   negra) se lee entero; sobre negro la sombra desaparecía. */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px;
  overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;
}
.pie { background: var(--yellow); color: var(--ink); font-family: var(--font-menu); }
.pie__interior { max-width: var(--maxw); margin: 0 auto; padding: 64px 24px 34px; }
.pie a { color: inherit; text-decoration: none; }

.pie__marca {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  padding-bottom: 34px; margin-bottom: 38px; border-bottom: 2px solid var(--ink);
}
.pie__logo { display: block; line-height: 0; transition: transform .25s ease; }
.pie__logo img { width: 280px; max-width: 100%; height: auto; }
.pie__logo:hover { transform: rotate(-2deg) scale(1.02); }
.pie__lema {
  margin: 0; max-width: 34ch; text-align: right;
  font-family: var(--font-title); font-weight: 600; font-size: 20px; line-height: 1.3;
}
.pie__lema-mano {
  display: block; margin-top: 4px; color: var(--primary);
  font-family: var(--font-hand); font-weight: 400; font-size: 30px; line-height: 1; transform: rotate(-2deg);
}

.pie__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.pie__titulo {
  margin: 0 0 14px; font-family: var(--font-menu); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink); opacity: .7;
}
.pie__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15px; line-height: 1.35; }
.pie__col a {
  font-weight: 500; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size .2s ease, color .2s ease; padding-bottom: 1px;
}
.pie__col a:hover, .pie__col a:focus-visible { color: var(--primary); background-size: 100% 2px; }
.pie__dato { opacity: .8; }
.pie__col--contacto a { overflow-wrap: anywhere; }
.pie__distribuidor {
  display: inline-block; margin-top: 6px; padding: 7px 12px !important; border: 2px solid var(--ink);
  border-radius: 999px; font-weight: 700 !important; background: none !important; font-size: 13px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease !important;
}
.pie__distribuidor:hover, .pie__distribuidor:focus-visible {
  background-color: var(--ink) !important; color: var(--yellow) !important; border-color: var(--ink);
}

.pie__garantias {
  display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap;
  margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(20, 16, 15, .2);
}
.pie__pagos { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pie__etiqueta {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; opacity: .75;
}
.pie__logos-pago { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.pago {
  width: 54px; height: 34px; border-radius: 6px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 0 rgba(20, 16, 15, .18), inset 0 0 0 1px rgba(20, 16, 15, .08);
}
.pago svg { display: block; width: 36px; height: 24px; }
.pago--mastercard svg, .pago--maestro svg { width: 32px; height: 20px; }
.pago--visa svg { width: 42px; height: 28px; }
.pago--amex { background: #2E77BC; }
.pago--amex svg { width: 30px; height: 30px; }
.pago--amex svg path { fill: #fff; }
.pago--paypal svg { width: 22px; height: 22px; }
.pie__envio { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }

@media (max-width: 900px) {
  .pie__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
}
@media (max-width: 760px) {
  .pie__interior { padding: 48px 20px 28px; }
  .pie__marca { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pie__logo img { width: 230px; }
  .pie__lema { text-align: left; font-size: 18px; }
  .pie__lema-mano { font-size: 27px; }
  .pie__garantias { flex-direction: column; align-items: flex-start; }
  .promo { grid-template-columns: 1fr; }
  .newsletter__grid { grid-template-columns: 1fr 1fr; }
  .editorial { grid-template-columns: 1fr; }
  .editorial__text { padding: 36px 24px; }
}
@media (max-width: 420px) {
  .pie__col--contacto { grid-column: 1 / -1; }
  /* Legal son tres enlaces cortos: en fila a todo el ancho, sin dejar un hueco al lado. */
  .pie__col:nth-child(3) { grid-column: 1 / -1; }
  .pie__col:nth-child(3) ul { display: flex; flex-wrap: wrap; gap: 8px 18px; }
}
/* Con el pie de color, el cierre magenta empieza justo debajo: sin la línea
   fina que solo tenía sentido sobre el pie oscuro. */
.pie + .pie__cierre { padding-top: 0; }
.pie + .pie__cierre .pie__cierre__interior { border-top: 0; padding-top: 22px; }

/* ── Finalizar compra ──────────────────────
   Dos columnas: el formulario a la izquierda y «Tu pedido» fijo a la derecha,
   como una tarjeta con la sombra negra desplazada del logotipo. Campos grandes
   con borde de tinta y el botón de pagar en magenta: limpio, pero con peso. */
.woocommerce-checkout .woocommerce { --campo-alto: 52px; }

/* ¿Ya eres cliente? / ¿Tienes un cupón?: dos líneas discretas, no dos cajones. */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  border: 0; background: var(--sand); border-radius: 8px;
  padding: 12px 16px; margin: 0 0 10px; font-size: 14px;
}
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a { color: var(--primary); font-weight: 700; }
.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout form.woocommerce-form-login {
  border: 2px solid var(--ink); border-radius: 10px; padding: 18px; margin: 0 0 16px;
}

.woocommerce-checkout form.woocommerce-checkout { margin-top: 28px; }
@media (min-width: 981px) {
  .woocommerce-checkout form.woocommerce-checkout {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
    grid-template-areas: "avisos avisos" "datos titulo" "datos resumen";
    grid-template-rows: auto auto 1fr; column-gap: 56px; align-items: start;
  }
  .woocommerce-checkout form.woocommerce-checkout > .woocommerce-NoticeGroup { grid-area: avisos; }
  .woocommerce-checkout #customer_details { grid-area: datos; }
  .woocommerce-checkout #order_review_heading { grid-area: titulo; }
  .woocommerce-checkout #order_review { grid-area: resumen; position: sticky; top: 24px; }
}

/* Facturación y envío, una encima de otra (WooCommerce las pone en dos medias columnas). */
.woocommerce-checkout #customer_details.col2-set .col-1,
.woocommerce-checkout #customer_details.col2-set .col-2 { float: none; width: 100%; max-width: none; }
.woocommerce-checkout #customer_details .col-2 { margin-top: 26px; }

.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--font-title); font-weight: 700; font-size: 28px; line-height: 1.1;
  margin: 0 0 20px; padding-bottom: 12px; border-bottom: 2px solid var(--ink);
}
.woocommerce-checkout #order_review_heading { border-bottom: 0; padding-bottom: 0; }
.woocommerce-checkout #customer_details h3#ship-to-different-address { font-size: 18px; border-bottom: 0; padding: 0; margin: 0 0 14px; }
.woocommerce-checkout #ship-to-different-address label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }

/* Rejilla de campos: nombre/apellidos, provincia/código postal y teléfono/email van en pareja. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
  grid-column: 1 / -1; float: none; width: auto; margin: 0; padding: 0;
}
@media (min-width: 561px) {
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout #billing_state_field, .woocommerce-checkout #shipping_state_field,
  .woocommerce-checkout #billing_phone_field { grid-column: 1 !important; }
  .woocommerce-checkout .form-row-last,
  .woocommerce-checkout #billing_postcode_field, .woocommerce-checkout #shipping_postcode_field,
  .woocommerce-checkout #billing_email_field { grid-column: 2 !important; }
}

.woocommerce-checkout .form-row label {
  display: block; margin: 0 0 7px; font-family: var(--font-menu); font-weight: 700;
  font-size: 12px; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.woocommerce-checkout .form-row .required { color: var(--primary); text-decoration: none; border: 0; }
.woocommerce-checkout .form-row .optional { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .7; }
.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
  width: 100%; min-height: var(--campo-alto); box-sizing: border-box;
  border: 2px solid var(--ink); border-radius: 8px; background: #fff;
  padding: 12px 14px; font: 500 16px/1.3 var(--font-sans); color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.woocommerce-checkout .select2-container .select2-selection--single { display: flex; align-items: center; padding: 0 14px; }
.woocommerce-checkout .select2-container .select2-selection__rendered { padding: 0 !important; line-height: 1.3 !important; color: var(--ink) !important; }
.woocommerce-checkout .select2-container .select2-selection__arrow { top: 50% !important; transform: translateY(-50%); right: 10px !important; }
.woocommerce-checkout .form-row textarea.input-text { min-height: 96px; }
.woocommerce-checkout .form-row .input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .select2-container--focus .select2-selection--single,
.woocommerce-checkout .select2-container--open .select2-selection--single {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(206, 0, 102, .18);
}
.woocommerce-checkout .form-row.woocommerce-invalid .input-text,
.woocommerce-checkout .form-row.woocommerce-invalid .select2-selection { border-color: #b3261e; }
.woocommerce-checkout .woocommerce-additional-fields { margin-top: 22px; }
.woocommerce-checkout .woocommerce-account-fields { margin-top: 14px; }
.woocommerce-checkout input[type="checkbox"], .woocommerce-checkout input[type="radio"] {
  accent-color: var(--primary); width: 18px; height: 18px; flex: 0 0 auto;
}
/* Las casillas no son etiquetas de campo: en minúscula y a tamaño de texto. */
.woocommerce-checkout .form-row label.woocommerce-form__label-for-checkbox,
.woocommerce-checkout #customer_details h3 label.woocommerce-form__label-for-checkbox {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 500; line-height: 1.4;
}

/* La tarjeta del pedido. */
.woocommerce-checkout #order_review {
  background: #fff; border: 2px solid var(--ink); border-radius: 14px;
  box-shadow: 7px 7px 0 var(--ink); padding: 22px 22px 24px;
}
.woocommerce-checkout #order_review .shop_table { border: 0; margin: 0 0 8px; width: 100%; border-collapse: collapse; font-size: 15px; }
.woocommerce-checkout #order_review .shop_table th,
.woocommerce-checkout #order_review .shop_table td { border: 0; padding: 10px 0; vertical-align: top; background: none; }
.woocommerce-checkout #order_review .shop_table thead { display: none; }
.woocommerce-checkout #order_review .shop_table tbody tr { border-bottom: 1px solid rgba(20, 16, 15, .12); }
.woocommerce-checkout #order_review .shop_table .product-name { font-weight: 700; padding-right: 12px; }
.woocommerce-checkout #order_review .shop_table .product-quantity { color: var(--primary); }
.woocommerce-checkout #order_review .shop_table .product-total,
.woocommerce-checkout #order_review .shop_table tfoot td { text-align: right; white-space: nowrap; }
.woocommerce-checkout #order_review .shop_table .variation { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 6px 0 0; font-weight: 400; font-size: 13px; color: var(--muted); }
.woocommerce-checkout #order_review .shop_table .variation dt,
.woocommerce-checkout #order_review .shop_table .variation dd { margin: 0; padding: 0; float: none; }
.woocommerce-checkout #order_review .shop_table .variation dd p { margin: 0; }
.woocommerce-checkout #order_review .shop_table tfoot th { font-weight: 500; text-align: left; }
.woocommerce-checkout #order_review .shop_table tfoot tr.shipping td,
.woocommerce-checkout #order_review .shop_table tfoot tr.woocommerce-shipping-totals td { white-space: normal; }
.woocommerce-checkout #order_review #shipping_method { list-style: none; margin: 0; padding: 0; }
.woocommerce-checkout #order_review #shipping_method li { margin: 0 0 4px; }
.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td { padding-top: 16px; border-top: 2px solid var(--ink); }
.woocommerce-checkout #order_review .order-total th { font-family: var(--font-title); font-size: 22px; font-weight: 700; }
.woocommerce-checkout #order_review .order-total td > strong .amount { font-family: var(--font-title); font-size: 30px; font-weight: 700; color: var(--primary); }
.woocommerce-checkout #order_review .order-total small,
.woocommerce-checkout #order_review .order-total small .amount { display: block; font: 400 12px/1.4 var(--font-sans); color: var(--muted); }
.woocommerce-checkout #order_review .order-total small .amount { display: inline; }

/* Métodos de pago como opciones que se ven elegidas. */
.woocommerce-checkout #payment { background: none; border-radius: 0; margin-top: 14px; }
.woocommerce-checkout #payment ul.payment_methods { border: 0; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
.woocommerce-checkout #payment ul.payment_methods li {
  list-style: none; margin: 0; padding: 14px 14px 14px 16px; border: 2px solid rgba(20, 16, 15, .18);
  border-radius: 10px; background: #fff; transition: border-color .15s ease;
}
.woocommerce-checkout #payment ul.payment_methods li:has(> input:checked) { border-color: var(--primary); }
.woocommerce-checkout #payment ul.payment_methods li > label { font-weight: 700; font-size: 16px; cursor: pointer; margin-left: 6px; }
.woocommerce-checkout #payment div.payment_box {
  background: var(--sand); color: var(--ink); border-radius: 8px; margin: 10px 0 0; padding: 10px 12px; font-size: 13.5px;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment div.form-row.place-order { padding: 0; margin: 0; background: none; }

/* El aviso legal: breve y legible, en una caja con desplazamiento propio. */
.woocommerce-checkout .woocommerce-privacy-policy-text { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 0 0 12px; }
.woocommerce-checkout .woocommerce-privacy-policy-text > div {
  width: auto !important; height: auto !important; max-height: 116px; overflow: auto;
  border: 1px solid rgba(20, 16, 15, .15); border-radius: 8px; padding: 10px 12px;
}
.woocommerce-checkout .woocommerce-privacy-policy-text p { margin: 0 0 8px; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .validate-required { margin: 6px 0 16px; }

/* El botón de pagar. */
.woocommerce-checkout #place_order {
  float: none; display: block; width: 100%; min-height: 58px; border: 2px solid var(--ink); border-radius: 10px;
  background: var(--primary); color: #fff; cursor: pointer;
  font: 800 18px/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--ink); transition: transform .12s ease, box-shadow .12s ease;
}
.woocommerce-checkout #place_order:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--ink); }
.woocommerce-checkout #place_order:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.woocommerce-checkout #place_order:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.woocommerce-checkout #payment .place-order { flex-wrap: wrap; }
.compra-confianza { margin-top: 18px; display: grid; gap: 10px; justify-items: start; width: 100%; flex: 1 0 100%; clear: both; }
.compra-confianza__texto { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.compra-confianza .pie__logos-pago { gap: 6px; }
.compra-confianza .pago { width: 46px; height: 30px; }

@media (max-width: 980px) {
  .woocommerce-checkout #order_review_heading { margin-top: 34px; }
}
/* En pantallas de hasta 1150 px de alto (portátiles y 1080p) la tarjeta es más alta que la
   ventana: fija, su final (botones de PayPal) quedaría fuera de la vista. */
@media (min-width: 981px) and (max-height: 1150px) {
  .woocommerce-checkout #order_review { position: static; }
}
@media (max-width: 560px) {
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper { grid-template-columns: minmax(0, 1fr); }
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row { grid-column: 1 / -1 !important; }
  .woocommerce-checkout #customer_details h3, .woocommerce-checkout #order_review_heading { font-size: 24px; }
  .woocommerce-checkout #order_review { padding: 18px 16px 20px; box-shadow: 5px 5px 0 var(--ink); }
}

/* ── Avisos de WooCommerce ──────────────── */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top: 3px solid var(--primary); background: var(--sand);
  padding: 16px 20px; margin: 0 0 24px; list-style: none;
}
.woocommerce-error { border-top-color: var(--secondary); }
/* WooCommerce mete un icono con su propia fuente delante de cada aviso, y
   cuando esa fuente no llega se ve un cuadrado con una interrogación. El
   aviso ya se distingue por su franja de color: fuera el icono. */
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { content: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { padding-left: 20px; }
.woocommerce-info a, .woocommerce-message a { font-weight: 700; text-decoration: underline; }

/* ── Buscador ───────────────────────────── */
.topsearch {
  display: inline-flex; align-items: center; background: rgba(255,255,255,0.14);
  border-radius: 999px; padding: 2px 4px 2px 12px;
}
.topsearch input { background: transparent; border: 0; color: #fff; font-size: 12px; width: 130px; outline: none; }
.topsearch input::placeholder { color: rgba(255,255,255,0.6); }
.topsearch button { background: transparent; border: 0; color: #fff; cursor: pointer; display: inline-flex; padding: 4px 6px; }

/* ── Desplegable de categorías ──────────── */
.nav__dd { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.nav__ddmenu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  display: none; flex-direction: column; background: #fff; color: #111;
  min-width: 230px; max-height: 66vh; overflow-y: auto;
  box-shadow: 0 14px 34px rgba(0,0,0,0.22); padding: 8px 0; z-index: 40; border-radius: 4px;
}
.nav__dd:hover .nav__ddmenu, .nav__dd:focus-within .nav__ddmenu { display: flex; }
.nav__ddmenu a { padding: 9px 20px; font-size: 15px; white-space: nowrap; color: #111; font-family: var(--font-sans); font-weight: 500; }
.nav__ddmenu a:hover { background: var(--sand); color: var(--secondary); }
/* Tercer nivel: un grupo con su título dentro del mismo panel, en vez de un
   desplegable encima de otro que hay que perseguir con el ratón. */
.nav__grupo { display: flex; flex-direction: column; border-top: 1px solid #eee; margin-top: 6px; padding-top: 6px; }
.nav__grupotit {
  padding: 8px 20px 4px; font-family: var(--font-display); font-size: 11.5px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.nav__grupolista { display: flex; flex-direction: column; }
.nav__grupolista a { padding-left: 30px; }

@media (max-width: 1200px) { .nav__enlaces { gap: 10px 22px; } .nav { font-size: 19px; } }
.nav a:hover, .nav .nav__ddbtn:hover, .nav__dd:hover .nav__ddbtn { color: var(--primary); }

/* ── Respeto por quien pide menos movimiento ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .herocard:hover .herocard__media img { animation: none; }
}