/* =========================================================
   GALAXY ANDORRA — Home ecommerce
   Extraída de "Brand Book y Propuesta de Home" (acto 03)
   Paleta oficial: rojo #d00000 · blanco #ffffff · negro #0d0d0d
   Tipografía: Poppins
   ========================================================= */

@font-face { font-family:"Poppins"; font-weight:400; font-style:normal; font-display:swap; src:url("assets/fonts/Poppins-Regular.ttf") format("truetype"); }
@font-face { font-family:"Poppins"; font-weight:500; font-style:normal; font-display:swap; src:url("assets/fonts/Poppins-Medium.ttf") format("truetype"); }
@font-face { font-family:"Poppins"; font-weight:600; font-style:normal; font-display:swap; src:url("assets/fonts/Poppins-SemiBold.ttf") format("truetype"); }
@font-face { font-family:"Poppins"; font-weight:800; font-style:normal; font-display:swap; src:url("assets/fonts/Poppins-ExtraBold.ttf") format("truetype"); }
@font-face { font-family:"Poppins"; font-weight:900; font-style:normal; font-display:swap; src:url("assets/fonts/Poppins-Black.ttf") format("truetype"); }

/* ---------- Tokens ---------- */
:root{
  --red:#d00000;
  --red-hover:#ef1010;
  --red-ember:#7a0d0d;
  --paper:#ffffff;
  --ink:#0d0d0d;

  /* tema oscuro (por defecto) */
  --bg:#0d0d0d;
  --surface:#161616;
  --text:#ffffff;
  --text-dim:#a3a0a0;
  --text-dimmer:#6f6c6c;
  --line:rgba(255,255,255,0.09);
  --line-strong:rgba(255,255,255,0.16);
  --hover-tint:#1c1010;
  --header-bg:rgba(13,13,13,0.86);

  --maxw:1600px;
  --pad:clamp(16px, 2.5vw, 36px);
}
:root[data-theme="light"]{
  --bg:#ffffff;
  --surface:#f5f2f1;
  --text:#161313;
  --text-dim:#665f5f;
  --text-dimmer:#8f8888;
  --line:rgba(13,13,13,0.10);
  --line-strong:rgba(13,13,13,0.22);
  --hover-tint:#fbe9e8;
  --header-bg:rgba(255,255,255,0.88);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--bg); color:var(--text);
  font-family:"Poppins", ui-sans-serif, system-ui, sans-serif;
  font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .35s ease, color .35s ease;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--red); color:#fff; }

/* ---------- Barra de scroll (pedido explicito del cliente: "mejorar
   la estetica" de la de la pagina general y la de dentro de los
   megamenus) ---------- */
html{
  scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent;
}
html::-webkit-scrollbar{ width:11px; height:11px; }
html::-webkit-scrollbar-track{ background:transparent; }
html::-webkit-scrollbar-thumb{
  background-color:var(--line-strong); border-radius:999px;
  border:3px solid var(--bg); background-clip:padding-box;
}
html::-webkit-scrollbar-thumb:hover{ background-color:var(--red); }
/* Cualquier otro contenedor con scroll interno (megamenu, listas
   largas, etc.) hereda el mismo look, mas fino, via esta clase de
   utilidad en vez de repetir las 6 reglas cada vez. */
.scroll-thin{
  scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent;
}
.scroll-thin::-webkit-scrollbar{ width:8px; height:8px; }
.scroll-thin::-webkit-scrollbar-track{ background:transparent; }
.scroll-thin::-webkit-scrollbar-thumb{
  background-color:var(--line-strong); border-radius:999px;
}
.scroll-thin::-webkit-scrollbar-thumb:hover{ background-color:var(--red); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
/* la cabecera es sticky: los anclas no deben quedar debajo */
main [id], footer [id]{ scroll-margin-top:88px; }
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--red); color:#fff; padding:12px 20px; border-radius:0 0 10px 0; font-weight:700; font-size:.85rem;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

/* ---------- Barra promo ---------- */
.promo-bar{
  background:var(--red); color:#fff; text-align:center;
  font-size:.8rem; font-weight:600; padding:9px 12px; letter-spacing:.03em;
}

/* ---------- Cabecera ---------- */
.store-header{
  position:sticky; top:0; z-index:80;
  display:flex; align-items:center; gap:clamp(16px,2.5vw,34px);
  padding:14px var(--pad);
  background:var(--header-bg);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.store-header .inner{
  max-width:var(--maxw); margin:0 auto; width:100%;
  display:flex; align-items:center; gap:clamp(16px,2.5vw,34px);
}
.brand{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:1.05rem; letter-spacing:-.01em; flex:none; }
.brand img{ height:24px; width:auto; }
/* flex:1 sacado de aca (pedido 2026-09-02, Adrian: "el buscador debe
   abarcar todo el espacio libre de la barra") — antes ESTE era el que
   crecia, dejando al buscador en su ancho minimo. Ahora el nav mide lo
   que necesita su contenido, y el buscador (.pill-input-wrap, mas abajo)
   es el que absorbe el espacio libre. */
.store-nav{ display:flex; gap:clamp(16px,2vw,26px); list-style:none; margin:0; padding:0; font-size:.88rem; font-weight:600; color:var(--text-dim); flex:none; }
.store-nav li{ white-space:nowrap; }
.store-nav a{ transition:color .2s ease; }
.store-nav a:hover{ color:var(--text); }
.store-nav a.is-sale{ color:var(--red); }

/* ---------- Megamenu (subcategorias al pasar el mouse) ----------
   Pedido explicito del cliente: reproducir el megamenu de la tienda
   vieja (columnas de subcategoria + sus propios hijos, al hover de cada
   item del menu superior), con la estetica del sitio nuevo. Contenido
   armado en vivo en header.php desde galaxy_andorra_megamenu_children()
   (arbol real de categorias), no hardcodeado aca.
   Hover puro en CSS (sin JS): mismo criterio que .lang-switch/.icon-btn
   ya usan para sus propios desplegables, y evita duplicar logica de
   apertura/cierre. :focus-within cubre navegacion por teclado (tab
   hasta el link del item, las subcategorias quedan visitables con tab
   aunque el panel recien se muestre). En touch no hay hover — el link
   del item principal sigue funcionando igual como fallback (va a la
   categoria completa), no hace falta JS extra: el store-nav completo ya
   se oculta por debajo de 1080px hasta que exista el menu movil
   (pendiente aparte). */
/* Anclado al <nav> completo (no centrado en cada <li>) para que el
   panel nunca se salga del contenedor del header sin importar que tan
   a la derecha este el item — "Accesorios" es el mas cercano al borde
   y con un panel de hasta 920px centrado en el si se saldria de la
   pantalla en portatiles. */
nav[aria-label="Categorías principales"]{ position:relative; }
/* .megamenu arranca pegado al item (top:100%, SIN gap) y el "aire"
   visual antes del panel es padding-top transparente DENTRO de esta
   misma caja, no un margen que la separe — si hubiera un hueco real ahi
   el mouse pierde el hover de <li> al cruzarlo camino al panel y se
   cierra solo (bug real reportado: "se cierra al tratar de ir a una
   opcion"). El fondo/borde/sombra van en .megamenu-inner, que es la que
   se ve mas abajo; .megamenu en si queda invisible pero SIEMPRE
   hoverable en toda esa franja. */
.megamenu{
  position:absolute; top:100%; left:0; padding-top:14px;
  width:min(980px, calc(100vw - var(--pad) * 2));
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, visibility .18s;
  z-index:110;
}
.has-megamenu:hover .megamenu, .has-megamenu:focus-within .megamenu{
  opacity:1; visibility:visible; pointer-events:auto;
}
/* Panel de dos columnas estilo PROIRON (pedido 2026-08-31, referencia
   proiron.pe/collections/...): lista angosta de subcategorias a la
   izquierda (.megamenu-nav) + grid de tarjetas de producto a la derecha
   (.megamenu-panels), una .megamenu-panel por subcategoria, .app.js
   cambia cual esta activa (.is-active) al pasar el mouse por la lista.
   Reemplaza la grilla de columnas de texto que habia antes. */
.megamenu-inner{
  background:var(--surface); border:1px solid var(--line); border-top:2px solid var(--red);
  border-radius:14px; box-shadow:0 24px 48px rgba(0,0,0,.4);
  display:grid; grid-template-columns:220px 1fr;
  /* La pieza que faltaba (bug real, esto es lo que de verdad rompia el
     scroll): sin grid-template-rows, la unica fila implicita se calcula
     "auto" = tan alta como su contenido pida, SIN mirar el max-height del
     contenedor para nada — max-height+overflow:hidden solo recortaba el
     sobrante despues de que la fila ya crecio de mas, nunca le daba a los
     hijos una altura real de la que encogerse (por eso min-height:0 en
     .megamenu-nav/.megamenu-panels no alcanzaba solo). minmax(0,1fr)
     fuerza a la fila a quedarse DENTRO del max-height disponible, recien
     ahi el overflow-y:auto de los hijos tiene algo real que scrollear. */
  grid-template-rows:minmax(0, 1fr);
  max-height:min(70vh, 560px); overflow:hidden;
}
/* Bug real reportado 2026-08-31 ("no permite el scroll interno y hay
   cosas que no se ven"): un item de grid/flex tiene min-height:auto por
   default, que en la practica significa "nunca me encojo mas chico que
   mi contenido" — asi que aunque .megamenu-inner tenga max-height y
   .megamenu-nav/.megamenu-panels tengan overflow-y:auto, la FILA del
   grid crecia igual con todo el contenido (el scroll interno nunca
   llegaba a activarse) y lo que sobraba quedaba cortado por el
   overflow:hidden de .megamenu-inner. min-height:0 fuerza a que puedan
   encogerse hasta el alto real disponible, ahi si el scroll interno
   funciona. Mismo motivo por el que .section-products ya tiene flex:1
   sin min-width — problema analogo, eje distinto. */
.megamenu-nav{
  list-style:none; margin:0; padding:14px; border-right:1px solid var(--line);
  overflow-y:auto; min-height:0; display:flex; flex-direction:column; gap:2px;
}
.megamenu-nav-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:.82rem; font-weight:600; color:var(--text-dim); white-space:normal;
  padding:9px 10px; border-radius:8px;
  transition:background-color .15s ease, color .15s ease;
}
.megamenu-nav-item svg{ flex:none; opacity:.5; }
.megamenu-nav-item:hover, .megamenu-nav-item:focus, .megamenu-nav-item.is-active{
  background:var(--hover-tint); color:var(--text);
}
.megamenu-nav-item.is-active{ color:var(--red); }
.megamenu-panels{ position:relative; overflow-y:auto; min-height:0; padding:24px; }
.megamenu-panel{ display:none; }
.megamenu-panel.is-active{ display:block; }
.megamenu-products{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:18px 16px;
}
/* min-width:0 es el fix real (bug reportado 2026-08-31: "hay cosas que no
   se ven", nombres de producto desbordando sobre las columnas vecinas) —
   mismo motivo exacto que min-height:0 en .megamenu-panels mas arriba,
   eje horizontal esta vez: un item de GRID tiene min-width:auto por
   default, que le impide encogerse mas chico que su contenido (un precio
   o nombre largo sin espacios), asi que la tarjeta se salia de su
   columna real en vez de partir el texto en 2 lineas como pedia
   -webkit-line-clamp. */
.megamenu-product{ display:flex; flex-direction:column; gap:6px; min-width:0; }
/* Fondo BLANCO solido, no var(--hover-tint) — pedido 2026-08-31 ("las
   imagenes deberian tener todas el mismo fondo... como nos paso con los
   productos que corregimos"): en TODO el resto del sitio (tarjeta de
   producto .p-img, ficha individual, carrito) las fotos de producto van
   con fondo #fff fijo, nunca el gris translucido del tema oscuro — las
   fotos reales del catalogo estan fotografiadas sobre fondo blanco, asi
   que mezclarlas con var(--hover-tint) se veia inconsistente (recuadro
   blanco de la foto flotando sobre un gris que no combina). */
.megamenu-product-img{
  display:block; aspect-ratio:1/1; border-radius:10px; overflow:hidden;
  background:#fff;
}
.megamenu-product-img img{ width:100%; height:100%; object-fit:contain; padding:8px; }
.megamenu-product-name{
  font-size:.78rem; font-weight:500; color:var(--text-dim); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  overflow-wrap:break-word; transition:color .15s ease;
}
.megamenu-product:hover .megamenu-product-name{ color:var(--text); }
.megamenu-product-price{ font-size:.8rem; font-weight:700; color:var(--text); overflow-wrap:break-word; }
/* Precio rebajado en el megamenu (bug reportado 2026-09-04): el precio
   nuevo salia SUBRAYADO, porque <ins> lleva subrayado por defecto del
   navegador y aqui no habia ninguna regla que lo quitara.
   El precio nuevo se deja EXACTAMENTE igual que un precio normal (mismo
   color y peso que los productos sin rebaja) — pedido explicito del
   cliente: solo habia que quitar el subrayado, no cambiarle el color. El
   viejo si se apaga y se tacha, para que se distinga cual es cual. */
.megamenu-product-price del{
  color:var(--text-dimmer); font-weight:500; font-size:.86em; margin-right:5px;
  text-decoration:line-through;
}
.megamenu-product-price ins{
  text-decoration:none; color:inherit; font-weight:inherit; background:none;
}
.megamenu-product-price del .woocommerce-Price-amount{ text-decoration:inherit; }

.megamenu-sublist{
  list-style:none; margin:20px 0 0; padding:16px 0 0; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:6px 16px;
}
.megamenu-sublist a{ font-size:.78rem; color:var(--text-dim); }
.megamenu-sublist a:hover{ color:var(--red); }
.megamenu-view-all{
  display:inline-block; margin-top:18px; font-size:.78rem; font-weight:700; color:var(--red);
}
.megamenu-view-all:hover{ text-decoration:underline; }
/* flex:1 agregado (pedido 2026-09-02): ahora .store-actions es el que
   absorbe el espacio libre de la barra (antes lo hacia .store-nav), y
   adentro .pill-input-wrap (mas abajo) es el que crece de los hijos de
   ESTE contenedor — asi el buscador es lo que realmente se agranda, no
   los iconos de al lado. */
.store-actions{ display:flex; align-items:center; gap:12px; margin-left:auto; flex:1; min-width:0; }
/* Buscador mas presente en la cabecera (pedido 2026-08-31: "resaltar mas
   el buscador") — fondo propio en vez de transparente, un poco mas
   ancho/alto, y un anillo rojo suave al enfocar en vez de solo cambiar
   el borde, para que se note mas al hacer click. */
.pill-input-wrap{ position:relative; flex:1 1 auto; min-width:0; max-width:640px; }
.pill-input{
  display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box;
  border:1px solid var(--line); border-radius:999px; padding:11px 18px;
  color:var(--text-dimmer); font-size:.85rem; background:var(--hover-tint);
  font-family:inherit; min-width:240px; cursor:text;
  transition:border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.pill-input:hover{ border-color:var(--line-strong); }
.pill-input:focus-within{ border-color:var(--red); box-shadow:0 0 0 4px rgba(200,30,30,.12); }
.pill-input svg{ flex:none; }
.pill-input input{
  border:0; outline:0; background:transparent; width:100%;
  color:var(--text); font-family:inherit; font-size:.85rem;
}
.pill-input input::placeholder{ color:var(--text-dimmer); }

/* Desplegable de sugerencias en vivo, con foto real del producto — mas
   ancho que el input (pedido 2026-08-31: "mas llamativo... un poco mas
   ancha") y en grid de 2 columnas con fotos grandes, en vez de una lista
   angosta de filas, para que se sienta mas a la altura de un buscador
   con imagenes reales. */
/* Agrandado 2026-09-02 (pedido de Adrian: "el desplegable debe abarcar
   casi toda la pantalla, para poner mas cosas") — de un ancho fijo tipo
   tarjeta a casi todo el viewport, con mas alto disponible tambien, para
   que quepan mas productos/categorias sin sentirse apretado.
   position:fixed + centrado en el viewport (pedido 2026-09-02, Adrian:
   "sin salirse"): antes era position:absolute anclado a left:0 DEL
   BUSCADOR, no del viewport — como el buscador ya no esta pegado al
   borde izquierdo del header (ahora crece con flex:1), un ancho de hasta
   1100px anclado a su izquierda se salia por el borde derecho de la
   pantalla en monitores anchos. Centrado en el viewport nunca se sale,
   sin importar donde este el buscador. top:96px iguala el offset de
   sticky ya usado para el sidebar de filtros (altura del header). */
/* Agrandado de nuevo 2026-09-02 (pedido explicito: "que ocupe un 80% de
   la pagina, que se adapte a la pantalla") — 80vw/80vh reales (no un tope
   que en la practica quedaba mas chico), con min() solo como red de
   seguridad para que nunca se pase del alto real disponible bajo el
   header (100vh - 116px) en pantallas bajas. */
.search-suggest{
  position:fixed; top:96px; left:50%; translate:-50% 0;
  width:min(80vw, 1800px);
  background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--red);
  border-radius:16px; box-shadow:0 28px 56px rgba(0,0,0,.45);
  height:min(80vh, calc(100vh - 116px)); overflow-y:auto; overflow-x:hidden; z-index:120; padding:24px;
  box-sizing:border-box;
}
@media (max-width:900px){ .search-suggest{ width:min(94vw, 1800px); } }
/* Chips de categoria (pedido 2026-08-31: "recomendacion de categorias
   tambien") — fila arriba del todo, antes de los productos. */
.search-suggest-cats{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.search-suggest-chip{
  display:inline-block; font-size:.78rem; font-weight:600; color:var(--text);
  background:var(--hover-tint); border:1px solid var(--line); border-radius:999px;
  padding:7px 14px; transition:border-color .15s ease, color .15s ease;
}
.search-suggest-chip:hover{ border-color:var(--red); color:var(--red); }
/* Fichas que crecen segun la pantalla (pedido 2026-09-02: "que las fichas
   se vean mas grandes para que ocupen el espacio") — con el desplegable
   ahora en 80vw/80vh, un minmax fijo de 220px dejaba huecos vacios o
   demasiadas columnas chicas en monitores anchos. clamp() escala la
   columna minima (y con ella imagen/texto) segun el viewport: en pantallas
   chicas se queda igual que antes (220px), en monitores grandes crece
   hasta 340px, menos columnas pero cada una mas grande, llenando el
   espacio real disponible en vez de quedar apretadas en una esquina. */
.search-suggest-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(clamp(220px, 16vw, 340px), 1fr)); gap:clamp(10px, 1vw, 18px);
}
.search-suggest-item{
  display:flex; align-items:center; gap:clamp(12px, 1vw, 18px); padding:clamp(10px, .9vw, 16px); border-radius:12px;
  border:1px solid transparent; min-width:0;
  transition:background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.search-suggest-item:hover{ background:var(--hover-tint); border-color:var(--line); transform:translateY(-1px); }
.search-suggest-item img{
  flex:none; width:clamp(56px, 4.5vw, 84px); height:clamp(56px, 4.5vw, 84px); border-radius:10px; object-fit:contain;
  background:#fff; padding:4px; /* mismo fondo blanco que el resto de fotos de producto del sitio, ver .megamenu-product-img */
}
.search-suggest-info{ display:flex; flex-direction:column; gap:3px; min-width:0; overflow:hidden; }
.search-suggest-name{
  font-size:clamp(.82rem, .85vw, .98rem); font-weight:600; color:var(--text); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  word-break:break-word;
}
.search-suggest-price{ font-size:clamp(.8rem, .82vw, .95rem); font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:root[data-theme="light"] .search-suggest-price{ color:#000; }
.search-suggest-price del{ color:var(--text-dimmer); font-weight:500; margin-right:4px; }
.search-suggest-empty{ padding:20px; text-align:center; font-size:.82rem; color:var(--text-dimmer); }
.search-suggest-heading{
  margin:2px 4px 10px; font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-dimmer);
}
@media (max-width:560px){ .search-suggest-grid{ grid-template-columns:1fr; } }
.icon-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); flex:none; background:transparent; cursor:pointer; position:relative;
  transition:border-color .2s ease, color .2s ease;
}
.icon-btn:hover{ border-color:var(--red); color:var(--text); }
.icon-btn .count{
  position:absolute; top:-3px; right:-3px; min-width:17px; height:17px;
  background:var(--red); color:#fff; border-radius:999px;
  font-size:.62rem; font-weight:700; line-height:17px; text-align:center; padding:0 4px;
}
.lang-switch{ position:relative; flex:none; }
.lang-switch-toggle{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--text-dim);
  font-family:inherit; font-size:.68rem; font-weight:700; letter-spacing:.02em; cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.lang-switch-toggle:hover{ border-color:var(--red); color:var(--text); }
.lang-switch-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:140px; list-style:none; margin:0; padding:6px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 28px rgba(0,0,0,.35);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:120;
}
.lang-switch.is-open .lang-switch-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.lang-switch-menu a{
  display:block; padding:9px 12px; border-radius:8px; color:var(--text-dim); font-size:.86rem; text-decoration:none;
}
.lang-switch-menu a:hover{ background:var(--hover-tint); color:var(--text); }
.lang-switch-menu a[aria-current="true"]{ color:var(--red); font-weight:700; }
/* Boton hamburguesa: invisible en escritorio (donde .store-nav ya se ve
   entero), aparece SOLO por debajo de 1080px (mismo punto donde
   .store-nav desaparece, ver breakpoint de abajo) — antes de 2026-08-31
   este boton existia en el CSS pero display:none siempre, sin markup ni
   JS real detras (bug/hueco real: en mobile no habia forma de navegar
   categorias). Ahora abre el panel .mobile-nav-drawer (ver mas abajo). */
.nav-toggle{
  display:none; width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  align-items:center; justify-content:center; background:transparent; color:var(--text-dim);
  cursor:pointer; transition:border-color .2s ease, color .2s ease; flex:none;
}
.nav-toggle:hover{ border-color:var(--red); color:var(--text); }
/* Feedback real del cliente: en pantallas de laptop (1366-1440px tipico)
   el header se veia "muy apretado" — el buscador ya mas ancho (min-width
   190px) mas el menu con 7 items mas los iconos no entraban comodos
   antes de llegar al punto donde el menu se ocultaba del todo
   (1080px). Este breakpoint intermedio afloja los espacios sin llegar a
   esconder nada. */
@media (max-width:1360px){
  .store-header .inner{ gap:14px; }
  .store-nav{ gap:11px; font-size:.82rem; }
  .pill-input{ min-width:140px; }
}
@media (max-width:1080px){
  .store-nav{ display:none; }
  .pill-input{ min-width:0; }
  .nav-toggle{ display:flex; }
}
/* Idioma y tema salen de la barra en pantallas chicas (2026-09-08).
   Medido en las 9 paginas principales: con los 6 controles la fila
   terminaba en 369px sobre una pantalla de 360, y TODA la web se
   desplazaba en horizontal. Encogerlos no era opcion — con 38px ya
   estaban por debajo de lo comodo para un dedo. Los dos que son ajustes
   pasan al menu (ver .mobile-nav-foot), y en la barra quedan los tres de
   comprar: comparador, cuenta y carrito. */
@media (max-width:700px){
  .store-actions .lang-switch,
  .store-actions .theme-toggle{ display:none; }
}

@media (max-width:620px){
  .brand span{ display:none; }
  /* Solo el de la barra: en pantallas asi de angostas no cabe junto al
     logo y los iconos. El buscador sigue disponible dentro del menu
     (.mobile-nav-search), por eso el selector lleva .store-actions —
     sin el, esta regla ocultaba tambien el del menu. */
  .store-actions .pill-input{ display:none; }
}

/* ---------- Menu de categorias mobile (panel lateral, <1080px) ----------
   Mismo patron visual/estructural que .cart-drawer (overlay + aside que
   desliza), pero desde la IZQUIERDA en vez de la derecha, y con un
   acordeon simple para las subcategorias (ver mobileNavToggle en app.js). */
.mobile-nav-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:300;
  opacity:0; transition:opacity .25s ease;
}
.mobile-nav-overlay.is-open{ opacity:1; }
body.mobile-nav-locked{ overflow:hidden; }

.mobile-nav-drawer{
  position:fixed; top:0; left:0; height:100%; width:min(340px, 86vw);
  background:var(--bg); border-right:1px solid var(--line); z-index:301;
  display:flex; flex-direction:column;
  transform:translateX(-100%); transition:transform .3s ease;
}
.mobile-nav-drawer.is-open{ transform:translateX(0); }

.mobile-nav-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px; border-bottom:1px solid var(--line); flex:none;
}
.mobile-nav-head h2{ margin:0; font-size:1.1rem; font-weight:800; color:var(--text); }
.mobile-nav-close{
  width:34px; height:34px; border-radius:999px; border:1px solid var(--line); background:transparent;
  color:var(--text-dim); font-size:1.3rem; line-height:1; cursor:pointer; transition:border-color .2s ease, color .2s ease;
}
.mobile-nav-close:hover{ border-color:var(--red); color:var(--red); }

/* Buscador dentro del menu movil (2026-09-07). Va entre la cabecera y la
   lista, fuera de .mobile-nav-body, para que no se vaya con el scroll de
   las categorias: queda siempre a la vista. */
.mobile-nav-search{ position:relative; flex:none; padding:14px 16px; border-bottom:1px solid var(--line); }
.mobile-nav-search .pill-input{ width:100%; min-width:0; }
/* El panel de resultados es position:fixed y cubre la pantalla. El cajon
   tiene z-index:301, asi que sin subirlo el panel quedaria DEBAJO del
   propio menu y no se veria nada. Se baja tambien desde arriba para que
   no tape el campo donde se esta escribiendo. */
.mobile-nav-search .search-suggest{
  z-index:320; top:150px; height:min(78vh, calc(100vh - 170px));
  /* Alineado al cajon, no centrado en la pantalla: el .search-suggest de
     la barra es un panel centrado de 94vw, y dentro del menu sobresalia
     por la derecha del propio cajon. Con el mismo ancho y pegado a la
     izquierda queda justo debajo del campo donde se escribe. */
  left:0; translate:none; width:min(340px, 86vw);
}

.mobile-nav-body{ flex:1; overflow-y:auto; padding:12px 10px; }

/* Pie del menu: idioma y modo claro/oscuro. flex:none y fuera de
   .mobile-nav-body para que no se vaya con el scroll de las categorias. */
.mobile-nav-foot{
  flex:none; border-top:1px solid var(--line); padding:14px 16px;
  display:flex; flex-direction:column; gap:12px;
}
.mobile-nav-langs{ display:flex; flex-wrap:wrap; gap:8px; }
.mobile-nav-langs a{
  min-width:44px; padding:9px 12px; border-radius:999px; text-align:center;
  border:1px solid var(--line-strong); color:var(--text-dim);
  font-size:.78rem; font-weight:700; letter-spacing:.04em; text-decoration:none;
}
.mobile-nav-langs a.is-current{ background:var(--red); border-color:var(--red); color:#fff; }
.mobile-nav-theme{
  display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:0; padding:10px 2px; cursor:pointer;
  color:var(--text-dim); font-size:.86rem; font-weight:600; font-family:inherit;
}
.mobile-nav-theme:hover{ color:var(--text); }
.mobile-nav-list{ list-style:none; margin:0; padding:0; }
.mobile-nav-cat{ border-bottom:1px solid var(--line); }
.mobile-nav-cat:last-child{ border-bottom:0; }
.mobile-nav-cat-row{ display:flex; align-items:center; }
.mobile-nav-cat-row a{
  flex:1; display:block; padding:14px 10px; font-size:.95rem; font-weight:700; color:var(--text);
}
.mobile-nav-cat-row a.is-sale{ color:var(--red); }
/* Arreglo estetico 2026-09-01 (reportado por Adrian, "se ve feo"): es un
   <button> real (header.php) sin resetear el estilo nativo del
   navegador — el borde/fondo por defecto del boton se veia como un
   cuadro gris pegado a la flecha. Ahora circular y sin borde en reposo,
   mismo lenguaje visual que .mobile-nav-close de este mismo panel. */
.mobile-nav-expand{
  flex:none; width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; border-radius:999px; padding:0;
  color:var(--text-dim); cursor:pointer; transition:transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease;
}
.mobile-nav-expand:hover, .mobile-nav-expand:focus-visible{ background:var(--hover-tint); border-color:var(--line); color:var(--text); }
.mobile-nav-cat.is-expanded .mobile-nav-expand{ transform:rotate(90deg); color:var(--red); }
/* Bug real encontrado 2026-09-01 (reportado por Adrian, con captura): el
   JS ya alternaba la clase "is-expanded" al tocar la flecha, pero esta
   regla nunca existia — .mobile-nav-sub quedaba SIEMPRE visible sin
   importar el estado, solo la flecha giraba. Resultado: el panel entero
   se veia con TODAS las subcategorias de TODAS las categorias abiertas
   a la vez, ilegible. */
.mobile-nav-cat:not(.is-expanded) .mobile-nav-sub{ display:none; }
.mobile-nav-sub{
  list-style:none; margin:0 0 10px; padding:0 10px 0 20px;
  display:flex; flex-direction:column; gap:2px;
}
.mobile-nav-sub > li > a{
  display:block; padding:9px 10px; border-radius:8px; font-size:.86rem; font-weight:600; color:var(--text-dim);
}
.mobile-nav-sub > li > a:active, .mobile-nav-sub > li > a:hover{ background:var(--hover-tint); color:var(--text); }
.mobile-nav-subsub{
  list-style:none; margin:0 0 6px; padding:0 0 0 14px;
  display:flex; flex-direction:column; gap:1px;
}
.mobile-nav-subsub a{ display:block; padding:7px 10px; border-radius:8px; font-size:.8rem; color:var(--text-dimmer); }
.mobile-nav-subsub a:active, .mobile-nav-subsub a:hover{ background:var(--hover-tint); color:var(--text); }

/* ---------- Hero ---------- */
.site-hero{
  position:relative; min-height:min(78vh, 680px);
  display:flex; align-items:center; overflow:hidden; background:#000;
}
/* object-fit:cover en los dos — es el correcto para un hero panoramico
   cuando la imagen/video que se sube ya viene en el formato/proporcion
   que se pide en el panel (ver meta box del banner de tipo Hero). Las
   4 imagenes de ejemplo actuales (hero-slide-1..4.jpg) vienen en formato
   vertical (620x775, pensadas para una tarjeta angosta) y por eso se ven
   recortadas feo — el fix real es reemplazarlas por imagenes en el
   formato panoramico correcto, no cambiar como se recortan (pedido
   explicito del cliente: "no cambies el formato de las imagenes"). */
.site-hero video, .site-hero .hero-slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:opacity .6s ease;
}
.site-hero video{ opacity:1; }
.site-hero .hero-slide{ opacity:0; }
.site-hero.is-slides video{ opacity:0; }
.site-hero.is-slides .hero-slide{ opacity:1; }
.site-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(8,8,8,0.88) 0%, rgba(8,8,8,0.55) 32%, rgba(8,8,8,0.18) 62%, rgba(8,8,8,0.5) 100%),
    linear-gradient(0deg, rgba(8,8,8,0.75) 0%, rgba(8,8,8,0.1) 40%);
}
/* ---------- Banner de cabecera de categoria (pedido 2026-08-31) ----------
   Mismo lenguaje visual que .site-hero (overlay oscuro en gradiente,
   titulo blanco grande) pero mas bajo — es el encabezado de una pagina
   de listado, no el hero principal del home. */
/* aspect-ratio en vez de un alto fijo/clamp (pedido 2026-09-01, segunda
   vuelta: "no se recorten" + "no dejar espacio negro") — la imagen real
   es 1560x320 (~4.875:1). Con aspect-ratio el contenedor SIEMPRE tiene
   exactamente la proporcion de la imagen, asi que object-fit:cover no
   tiene nada que recortar (encaja justo) y tampoco deja huecos (llena
   100%) — las dos cosas a la vez, en vez de tener que elegir entre
   cover (recorta) o contain (deja hueco) con un alto que no coincidia
   con la imagen. min-height es solo una red de seguridad para telefonos
   muy angostos, donde si puede recortar un poco en los costados (mejor
   eso que un banner de 60px de alto). */
/* Bug real encontrado 2026-09-02 (reportado por Adrian con captura: en
   monitores grandes el banner quedaba mas angosto que la pantalla, con
   un hueco en blanco al costado): sin width:100% explicito, un bloque
   con aspect-ratio + max-height puede calcular el ANCHO a partir del
   alto ya recortado por max-height en vez de llenar el contenedor —
   pasa justo en pantallas anchas, donde el alto pega en el techo de
   400px antes que el ancho llegue a completarse solo. width:100% fuerza
   que el ancho SIEMPRE sea el del contenedor (full-bleed real), el
   recorte de mas en pantallas muy anchas lo absorbe object-fit:cover. */
.category-hero{
  position:relative; width:100%; aspect-ratio:1560/320; min-height:160px; max-height:400px;
  overflow:hidden; background:#000; margin-bottom:8px;
}
.category-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* En movil la franja 4,9:1 dejaria el banner de apenas 73px de alto: el
   nombre de la categoria encima no entraria y la imagen no se veria.
   Se pasa a 2:1, que es la forma en la que el disenador entrega la
   version de movil (1774 x 887). Estuvo en 4:3 hasta el 16/09/2026 y
   recortaba por los lados justo donde estan los productos: en Camaras
   se comia media Sony a la izquierda y media Nikon a la derecha. Sin
   version de movil cargada, se usa la de escritorio recortada — se ve,
   pero pierde parte del diseno. */
@media (max-width:700px){
  .category-hero{ aspect-ratio:2/1; max-height:none; }
}
.category-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(8,8,8,.75) 0%, rgba(8,8,8,.15) 55%, rgba(8,8,8,.55) 100%);
}
/* Bug real encontrado 2026-09-01 (reportado por Adrian, con captura: el
   banner salia "super mas grande" en mobile, dejando aire de sobra sin
   nada). .category-hero-content vivia como item flex NORMAL dentro de
   .category-hero (display:flex) — eso significa que el contenido
   (titulo + bajada) podia forzar el ALTO del contenedor mas alla de lo
   que dicta aspect-ratio en categorias con texto mas largo, aunque
   max-height debiera frenarlo. Solucion real: sacar el texto del flujo
   flex por completo con position:absolute — asi el alto del banner
   depende SOLO de aspect-ratio/min/max-height, nunca del contenido, sin
   importar cuanto texto tenga esa categoria. (Antes tambien traia un bug
   de texto cortado por falta de min-width:0 en el item flex — ya no
   aplica con este approach, position:absolute no participa del calculo
   de flex en absoluto.) */
.category-hero-content{
  position:absolute; inset:0; z-index:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:0 var(--pad);
}
/* Revertido 2026-09-02 (pedido explicito de Adrian): el H1 vuelve a ser
   siempre el nombre real de la categoria (ver archive-product.php), asi
   que el tamaño grande original tiene sentido de nuevo — una palabra
   corta como "CÁMARAS" ocupando bien la franja del banner. */
.category-hero-content h1{
  font-size:clamp(1.6rem, 8vw, 5.6rem); font-weight:900; line-height:1; margin:0 0 10px;
  color:#fff; text-transform:uppercase; letter-spacing:.01em; font-style:italic;
  text-shadow:0 0 28px rgba(255,255,255,.55), 0 0 60px rgba(255,255,255,.25);
  overflow-wrap:break-word; word-break:break-word; max-width:100%; min-width:0;
}
/* Bug real encontrado 2026-09-02 (reportado por Adrian con captura): con
   line-clamp:3 el texto se cortaba con "…" aunque el banner todavia
   tenia aire de sobra abajo (max-height:400px sobra para el H1 grande +
   varias lineas de bajada). El clamp queda solo como red de seguridad
   para casos extremos (texto realmente larguisimo en un banner muy
   bajo), no para acortar el copy real del cliente en el caso normal. */
.category-hero-content p{
  margin:0; color:#e8e4e4; font-size:clamp(.75rem, 1.6vw, .95rem); max-width:680px; margin-inline:auto; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden;
}

.site-hero-content{
  position:relative; z-index:1;
  width:100%; max-width:var(--maxw); margin:0 auto;
  padding:clamp(28px,5vw,72px) var(--pad);
  transition:opacity .3s ease;
}
.site-hero-inner{ max-width:560px; }
.site-hero-content .k{
  font-size:.76rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:#ff8a8a; margin:0 0 14px;
}
.site-hero-content h1{
  font-size:clamp(2.1rem, 5.2vw, 4rem); font-weight:900; line-height:1.02;
  margin:0 0 14px; text-wrap:balance; color:#fff;
}
.site-hero-content p.lead{ margin:0 0 26px; color:#d9d5d5; font-size:1rem; max-width:460px; }
/* Boton solido rojo: UN SOLO componente para toda la web (CTA del hero,
   "Añadir al carrito" de la ficha de producto, "Finalizar compra",
   cualquier .button que genere WooCommerce). Antes esto estaba
   duplicado: .btn-red por un lado y una copia casi identica escondida
   detras de ".woocommerce a.button", que solo se activaba en paginas con
   la clase "woocommerce" en el body. Resultado: el mismo boton se veia
   distinto segun la pagina, y cualquier cambio habia que hacerlo dos
   veces. A partir de aca hay una sola definicion; si hace falta cambiar
   como se ve el boton rojo, se cambia SOLO ACA. */
.btn-red,
a.button, button.button, input.button, #place_order{
  height:52px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
  background:var(--red); color:#fff; font-weight:700; font-size:.88rem; line-height:1;
  padding:0 30px; border-radius:999px; border:0; cursor:pointer; font-family:inherit; text-decoration:none;
  transition:background .2s ease, transform .2s ease;
}
.btn-red:hover,
a.button:hover, button.button:hover, input.button:hover, #place_order:hover{
  background:var(--red-hover); transform:translateY(-1px);
}
a.button.disabled, button.button.disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.btn-outline{
  height:52px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:#fff; font-weight:700; font-size:.88rem; line-height:1;
  padding:0 30px; border-radius:999px; border:1px solid rgba(255,255,255,.5); cursor:pointer; font-family:inherit; text-decoration:none;
  transition:border-color .2s ease, background .2s ease;
}
.btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.hero-dots{
  position:absolute; z-index:1; right:clamp(18px,5vw,56px); bottom:26px;
  display:flex; gap:8px; opacity:0; transition:opacity .4s ease;
}
.site-hero.is-slides .hero-dots{ opacity:1; }
.hero-dots button{
  width:26px; height:3px; border-radius:2px; border:0; padding:0;
  background:rgba(255,255,255,0.25); cursor:pointer; transition:background .3s ease;
}
.hero-dots button.on{ background:var(--red); }

/* ---------- Tira de categorías ---------- */
.cat-strip{
  display:grid; grid-template-columns:repeat(6,1fr); gap:1px;
  background:var(--line); border-bottom:1px solid var(--line);
}
@media (max-width:900px){ .cat-strip{ grid-template-columns:repeat(3,1fr); } }
.cat-tile{
  background:var(--surface); padding:26px 12px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:11px;
  transition:background .25s ease;
}
.cat-tile:hover{ background:var(--hover-tint); }
/* Icono real (PNG blanco/rojo, ver front-page.php) apilado en un
   contenedor relative. Mas grande que el primer intento (40px, no 28px —
   pedido 2026-09-01: "en pantallas mas grandes se ven muy pequeños").
   Blanco/rojo se cruzan segun tema Y hover — bug real encontrado con el
   mismo pedido: en tema CLARO el icono blanco por defecto quedaba
   invisible (blanco sobre fondo casi blanco de .cat-tile). En claro se
   arranca directo en rojo (visible sobre fondo claro), no hace falta
   esperar al hover. */
.cat-tile-icon{ display:block; position:relative; width:40px; height:40px; flex:none; }
.cat-tile-icon img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  transition:opacity .25s ease;
}
.cat-tile-icon .icon-rojo{ opacity:0; }
.cat-tile:hover .icon-blanco{ opacity:0; }
.cat-tile:hover .icon-rojo{ opacity:1; }
:root[data-theme="light"] .cat-tile-icon .icon-blanco{ opacity:0; }
:root[data-theme="light"] .cat-tile-icon .icon-rojo{ opacity:1; }
.cat-tile span{ font-size:.78rem; font-weight:600; color:var(--text-dim); }

/* ---------- Secciones ---------- */
.site-section{ padding:clamp(36px,4.5vw,72px) var(--pad); max-width:var(--maxw); margin:0 auto; }
/* Panel diferenciado (pedido 2026-09-02: "que se diferencien en estilo, sin
   perder estetica") para "Otras personas lo compran juntos habitualmente"
   — mismo lenguaje visual que ya usan el resto de paneles destacados del
   sitio (.section-banner, .megamenu-inner, .search-suggest: borde superior
   rojo + fondo propio), en vez de inventar un estilo nuevo. Fondo tenue
   (--hover-tint, el mismo tinte rojizo sutil de siempre) para que se note
   que es una recomendacion "curada" distinta de la fila generica de abajo. */
.site-section--panel{
  background:var(--hover-tint); border-top:3px solid var(--red); border-radius:18px;
  padding-top:clamp(28px,3.5vw,48px); padding-bottom:clamp(28px,3.5vw,48px);
}
.site-section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; gap:16px; flex-wrap:wrap; }
.site-section-head h2{ margin:0; font-size:clamp(1.4rem,2.6vw,1.9rem); font-weight:800; color:var(--text); }
.site-section-head > a{ font-size:.84rem; font-weight:600; color:var(--red); }
.site-section-head > a:hover{ text-decoration:underline; }
/* Encabezado grafico de seccion (pedido 2026-09-02, version final):
   banner CON el copy ya incrustado en el diseño (el <h2> real queda solo
   para lectores de pantalla/SEO, oculto visualmente) — ocupa TODO el
   ancho de la seccion (pedido 2026-09-03: "que los banners tomen todo el
   espacio, como el de Polaris"). El "Ver todo" ya no es un link aparte al
   costado — es un boton flotante superpuesto en la esquina inferior
   derecha del propio banner. Fuente real 1024x210 (4.88:1).
   Probado 2026-09-03 con un set nuevo mejorado con IA (2172x724, 3:1) y
   revertido a pedido del cliente ("quedan muy grandes") — se espera que
   el diseñador mande las versiones definitivas antes de tocar esto de
   nuevo. */
.site-section-head--image{ display:block; margin-bottom:26px; }
/* container-type para que el titulo se pueda medir en % del ancho del
   BANNER (unidades cqw), no del viewport — ver .site-section-banner-titulo. */
.site-section-head-banner{ position:relative; container-type:inline-size; }
/* 2,36:1 desde el 2026-09-10, por decision del cliente y esta vez para
   quedarse: el contenedor toma la forma EXACTA del set del diseñador
   (3168 x 1344), asi que la imagen entra entera y no se recorta nada.

   Historia, para que no se vuelva a dar la vuelta sin saber por que:
   estas franjas nacieron en 4,9:1, llegaron los banners nuevos en 2,36:1
   y se recortaban; el 07/09 se volvio a 4,9:1 a la espera de que el
   diseñador reexportara. No va a reexportar: se midio banner por banner
   cuanto margen sin contenido tiene cada uno arriba y abajo, y cinco de
   los ocho no tienen NINGUNO — usan todo el alto. Recortarlos a una
   franja mas ancha se comeria producto o titular. Asi que manda la forma
   del banner.

   Se probo recortar los ocho a 3168 x 1235 para ganar algo de alto (lo
   que mide la franja roja que trae mal exportada el banner de reseñas), y
   se descarto por decision del cliente: los archivos van tal cual llegan
   del diseñador, sin tocarlos. Si se vuelve a plantear, el recorte estaba
   medido y no perdia contenido en ninguno, pero habia que anclarlo
   distinto en cada banner porque "Encuentra tu camara ideal" y "Segunda
   mano" llevan titular y sello pegados al borde de arriba.

   Lo que cuesta: cada cabecera pasa de unos 312px de alto a unos 648px en
   pantalla ancha, y el home se alarga cerca de 2300px. Asumido a
   sabiendas.

   Este sigue siendo el UNICO numero que hay que tocar si cambia la forma
   del set, junto con el de .testimonials-banner mas abajo. */
.site-section-banner-header{ width:100%; aspect-ratio:3168/1344; object-fit:cover; border-radius:14px; display:block; }
/* Arreglo puntual 2026-09-07: el archivo cargado hoy en "Encuentra tu
   camara ideal" es 2,36:1 y lleva el titular ARRIBA del todo, no centrado
   como los otros seis. Al recortarlo a la franja 4,9:1 desde el centro,
   el titular se perdia entero y solo quedaba media linea del subtitulo.
   Encuadrando desde arriba se conserva el texto.
   Cuando llegue la version reexportada en 4,9:1 esta regla deja de hacer
   nada por si sola: con la proporcion exacta no hay recorte que encuadrar,
   asi que no hace falta acordarse de quitarla. */
#camaras-destacadas .site-section-banner-header{ object-position:center top; }
/* Titulo en HTML sobre la cabecera (2026-09-04, pedido para Iluminacion:
   el diseño nuevo llega sin texto incrustado). Imita el tratamiento de los
   banners que SI lo traen: mayusculas, muy negrita, blanco y un halo
   suave. El halo no es decoracion: estas imagenes son fotos con zonas
   claras y oscuras, y sin el el texto se pierde justo donde la foto tiene
   luz. La sombra oscura de abajo hace el trabajo contrario en las zonas
   claras.
   pointer-events:none para que el titulo no se coma el clic del boton
   "Ver todo", que esta debajo en el mismo recuadro. */
/* El selector lleva .site-section-head delante por especificidad: la regla
   general .site-section-head h2 (0,1,1) le ganaba a .site-section-banner-titulo
   (0,1,0) y pintaba el titulo con el color de texto del tema — en modo
   claro, negro sobre una foto oscura (bug real al montarlo). */
/* ---------- Tratamiento POR DEFECTO del titulo en HTML ----------
   Es el que se monto el 04/09 para Iluminacion: centrado, una sola linea
   partida por el navegador. Lo conservan todas las cabeceras que todavia
   NO se han revisado contra la referencia del diseñador. Se van pasando
   al tratamiento nuevo de aqui abajo de una en una, segun las vaya
   aprobando el cliente.

   pointer-events:none para que el titulo no se coma el clic del boton
   "Ver todo", que esta debajo en el mismo recuadro.

   El selector lleva .site-section-head delante por especificidad: la regla
   general .site-section-head h2 (0,1,1) le ganaba a .site-section-banner-titulo
   (0,1,0) y pintaba el titulo con el color de texto del tema — en modo
   claro, negro sobre una foto oscura (bug real al montarlo). */
.site-section-head .site-section-banner-titulo{
  position:absolute; inset:0; z-index:1; margin:0;
  display:flex; align-items:center; justify-content:center;
  /* El padding lateral grande no es un margen: es lo que obliga al titulo
     a partirse en dos lineas centradas, como el ejemplo aprobado. Sin el,
     entra entero en una sola linea y queda como un pie de foto. */
  padding:0 clamp(16px, 29%, 460px);
  pointer-events:none; text-align:center; text-wrap:balance;
  color:#fff; text-transform:uppercase; font-weight:800;
  font-size:clamp(1rem, 3.2vw, 3.1rem); line-height:1.14; letter-spacing:.005em;
  text-shadow:0 0 34px rgba(255,255,255,.34), 0 2px 18px rgba(0,0,0,.55);
}
/* En movil la cabecera es mucho mas baja: el titulo tiene que caber entero
   sin taparla toda, y con menos margen lateral para que quepan mas
   palabras por linea. */
@media (max-width:700px){
  .site-section-head .site-section-banner-titulo{ padding:0 14px; font-size:clamp(.8rem, 4.2vw, 1.25rem); }
}

/* ---------- Tratamiento del diseñador (2026-09-10) ----------
   Solo lo llevan las cabeceras que ya se ajustaron una por una contra la
   referencia que mando el cliente. Se activa poniendole
   `header_titulo_lineas` a la seccion (ver functions.php), que es lo mismo
   que dice donde parte el titulo en dos.

   Hoy la lleva: "Lo mas comprado por nuestra comunidad".

   Lo que hace el diseño, medido sobre la imagen de referencia:
     - alineado a la IZQUIERDA, a un 3,8 % del borde
     - el bloque no esta centrado en vertical sino algo mas arriba, con su
       centro al 38,9 % del alto
     - dos lineas, medidas por la altura de las mayusculas: la primera
       ocupa un 8,8 % del alto del banner y la segunda un 5,4 %, o sea que
       la segunda mide un 61 % de la primera
     - mayusculas, el peso mas gordo que hay e inclinada
     - halo blanco suave para que no se pierda sobre las zonas oscuras de
       la foto, mas una sombra oscura que hace lo contrario sobre las claras

   Las medidas van en `cqw` (porcentaje del ANCHO del propio banner) y no
   en vw ni en px: asi el titulo conserva exactamente la misma proporcion
   con la imagen en cualquier pantalla, que es justo lo que no se conseguia
   con clamp(). Requiere el container-type de .site-section-head-banner.

   La inclinacion sale sintetica: Poppins no trae archivo de italica (ver
   los @font-face del principio) y la inclina el navegador. Es lo que se
   quiere aqui — el diseño usa una oblicua, no una cursiva de verdad. Lo
   unico que no se puede clavar es el ancho de letra: la tipografia del
   diseño es mas ancha que Poppins, asi que a igual altura la linea termina
   algo antes. Se iguala la ALTURA, que es la que da el peso visual. */
.site-section-head .site-section-banner-titulo--diseno{
  /* Lo que cambia de una cabecera a otra va en estas cinco variables, y
     cada seccion las pisa mas abajo con SUS medidas. Los valores de aqui
     son los de "Lo mas comprado por nuestra comunidad", que fue la
     primera que se ajusto. */
  --ga-t1:5.15cqw;       /* tamaño de la linea grande */
  --ga-t2:3.15cqw;       /* tamaño de la linea chica */
  --ga-centro:38.9%;     /* a que altura del banner queda el CENTRO del bloque */
  --ga-lado:flex-start;  /* flex-start = pegado a la izquierda, center = centrado */
  --ga-texto:left;
  --ga-padding:0 6% 0 3.4%;
  --ga-junta:.12em;      /* cuanto se separan las dos lineas entre si */
  --ga-color:#fff;       /* color del titular */
  --ga-peso:900;         /* grosor de la letra: 800 es ExtraBold, 900 Black */
  --ga-espaciado:-.01em; /* separacion entre letras */
  /* Ajuste fino del grosor. El tema solo tiene SemiBold (600) y ExtraBold
     (800) de Poppins, no hay Bold (700), asi que cuando el diseño cae
     entre los dos se coge el mas fino y se engorda con un contorno del
     mismo color. El contorno va en `em` para que escale con la letra. */
  --ga-trazo:0;
  /* Halo blanco para que no se pierda sobre las zonas oscuras de la foto,
     mas una sombra oscura que hace lo contrario sobre las claras. Alguna
     cabecera lo lleva a `none` porque su diseño usa el texto plano. */
  --ga-sombra:0 0 26px rgba(255,255,255,.45), 0 0 60px rgba(255,255,255,.2), 0 2px 16px rgba(0,0,0,.6);

  /* El bloque se coloca por su centro: si el centro va al C %, el borde de
     abajo tiene que quedarse a (100 - 2C) %. Asi cada seccion ajusta su
     posicion vertical con un solo numero. */
  inset:0 0 calc(100% - 2 * var(--ga-centro)) 0;
  flex-direction:column; justify-content:center; align-items:var(--ga-lado);
  padding:var(--ga-padding);
  text-align:var(--ga-texto); text-wrap:nowrap;
  font-weight:var(--ga-peso); font-style:italic;
  font-size:var(--ga-t1); line-height:1.02; letter-spacing:var(--ga-espaciado);
  color:var(--ga-color); text-shadow:var(--ga-sombra);
  -webkit-text-stroke:var(--ga-trazo) currentColor;
}
.site-section-banner-titulo--diseno .ga-t1{ font-size:var(--ga-t1); display:block; }
.site-section-banner-titulo--diseno .ga-t2{ font-size:var(--ga-t2); display:block; margin-top:var(--ga-junta); }
/* Subtitulo opcional de dos lineas, debajo del titular. Mas chico, sin
   mayusculas y con menos peso — ver "Segunda mano". */
.site-section-banner-titulo--diseno .ga-s1,
.site-section-banner-titulo--diseno .ga-s2{
  display:block; font-size:var(--ga-sub, 2.3cqw); text-transform:none;
  font-weight:var(--ga-sub-peso, 500); letter-spacing:0;
  line-height:var(--ga-sub-alto, 1.28);
}
.site-section-banner-titulo--diseno .ga-s1{ margin-top:var(--ga-sub-aire, 1.2cqw); }

/* "Encuentra tu camara ideal, seleccionada por expertos" (2026-09-10).
   Medido sobre la version del banner que trae el texto incrustado, que es
   la referencia que mando el cliente: linea grande con las mayusculas al
   10,42 % del alto, linea chica al 5,28 % (o sea la mitad justa), las dos
   CENTRADAS, y el bloque con su centro al 20,6 % — o sea arriba del todo,
   no en el medio como el de comunidad. En la web va la version SIN texto
   del banner, que ademas trae las camaras mas abajo justo para dejar sitio
   al titular. */
/* Montaje en UNA sola linea, con las dos partes del titular separadas por
   una raya (diseño de "Recien llegado"). Cambia bastante del apilado:
   aqui las dos partes miden lo mismo, no van inclinadas y llevan las
   letras muy separadas. */
/* El selector lleva .site-section-head delante para empatar en
   especificidad con .site-section-head .site-section-banner-titulo--diseno,
   que es quien pone flex-direction:column. Sin eso gana el apilado y las
   dos partes siguen saliendo una debajo de otra (pasó al montarlo). */
.site-section-head .site-section-banner-titulo--fila{
  flex-direction:row; align-items:center; justify-content:center;
  font-style:normal; font-weight:800; text-wrap:nowrap;
}
.site-section-head .site-section-banner-titulo--fila .ga-t1,
.site-section-head .site-section-banner-titulo--fila .ga-t2{ margin-top:0; flex:0 0 auto; }
.site-section-head .site-section-banner-titulo--fila .ga-regla{
  /* Se estira para ocupar todo el hueco que quede entre las dos partes,
     asi la raya mide lo que tenga que medir en cualquier pantalla sin
     tener que calcularla. */
  flex:1 1 auto; align-self:center;
  height:max(1px, .063cqw); background:currentColor;
  margin:0 var(--ga-regla-aire, 2%);
}

#camaras-destacadas .site-section-banner-titulo--diseno{
  --ga-t1:5.67cqw; --ga-t2:3.08cqw; --ga-centro:20.05%;
  --ga-lado:center; --ga-texto:center; --ga-padding:0 3%;
  /* En esta cabecera las dos lineas casi se tocan, muy distinto del de
     comunidad. Va en negativo porque hay que comerse el hueco que deja el
     alto de linea por debajo de la primera. */
  --ga-junta:-.33em;
}

.site-section-banner-cta{
  position:absolute; right:14px; bottom:14px; z-index:1;
  height:38px; display:inline-flex; align-items:center; padding:0 20px;
  border-radius:999px; background:var(--red); color:#fff; font-weight:700; font-size:.8rem;
  text-decoration:none; box-shadow:0 4px 14px rgba(0,0,0,.35);
  transition:background .2s ease, transform .2s ease;
}
.site-section-banner-cta:hover{ background:var(--red-hover); transform:translateY(-1px); text-decoration:none; }

/* Switch segmentado: Más vendidos ↔ Novedades */
.seg{
  display:flex; gap:4px; padding:4px; margin-right:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
}
.seg button{
  border:0; background:transparent; cursor:pointer; font-family:inherit;
  font-size:.8rem; font-weight:600; letter-spacing:.02em; color:var(--text-dim);
  padding:9px 20px; border-radius:999px; white-space:nowrap;
  transition:color .25s ease, background .25s ease;
}
.seg button:hover{ color:var(--text); }
.seg button.is-active{ background:var(--red); color:#fff; }
@media (max-width:620px){
  .seg{ width:100%; margin-right:0; }
  .seg button{ flex:1; padding:9px 12px; }
  .site-section-head > a{ display:none; }
}

/* Transición al cambiar de pestaña */
.product-grid.is-swapping .p-card{ opacity:0; transform:translateY(8px); }
.product-grid .p-card{ transition:opacity .28s ease, transform .28s ease, border-color .25s ease, box-shadow .25s ease; }
@media (prefers-reduced-motion: reduce){
  .product-grid.is-swapping .p-card{ opacity:1; transform:none; }
}

/* ---------- Layout tienda: filtros + grid ---------- */
.shop-layout{ display:grid; grid-template-columns:250px 1fr; gap:32px; align-items:start; }
@media (max-width:860px){ .shop-layout{ grid-template-columns:1fr; } }

.filters{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:22px 20px; position:sticky; top:96px;
}
.filters-toggle{ display:none; }
@media (max-width:860px){
  .filters{ position:static; }
  /* en móvil los filtros se pliegan para no empujar el catálogo */
  .filters-toggle{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    width:100%; margin-top:12px; padding:11px 14px;
    border:1px solid var(--line-strong); border-radius:10px;
    background:transparent; color:var(--text); font-family:inherit;
    font-size:.85rem; font-weight:600; cursor:pointer;
  }
  .filters-toggle svg{ width:16px; height:16px; transition:transform .25s ease; }
  .filters.is-open .filters-toggle svg{ transform:rotate(180deg); }
  .filters-body{ display:none; }
  .filters.is-open .filters-body{ display:block; }
}
.filters-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.filters-head h3{ margin:0; font-size:.95rem; font-weight:700; color:var(--text); }
.filters-head a#clearFilters,
.filters-head span#clearFilters{ all:unset; cursor:pointer; font-size:.75rem; color:var(--text-dimmer); }
.filters-head a#clearFilters:hover{ color:var(--red); }
.filters-head span#clearFilters[aria-disabled]{ cursor:default; opacity:.4; }
.filter-group{ padding:18px 0; border-top:1px solid var(--line); }
.filter-group h4{ margin:0 0 13px; font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); }
.filter-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; font-size:.85rem; color:var(--text-dim); cursor:pointer; }
.filter-row:hover{ color:var(--text); }
.filter-row .fk{ display:flex; align-items:center; gap:11px; }
.filter-row input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  width:16px; height:16px; border:1px solid var(--line-strong); border-radius:4px;
  margin:0; flex:none; cursor:pointer; position:relative;
}
.filter-row input[type="checkbox"]:checked{ background:var(--red); border-color:var(--red); }
.filter-row input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:5px; top:1px; width:4px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.filter-row .fc{ font-size:.74rem; color:var(--text-dimmer); font-variant-numeric:tabular-nums; }
/* [hidden] necesita quedar explicito: sin esto un <label class="filter-row">
   con el atributo `hidden` de HTML sigue visible, porque el `display:flex`
   de .filter-row (estilo de autor) le gana en cascada al `display:none` que
   pone el navegador para [hidden] (estilo de user-agent) — un estilo de
   autor siempre gana sobre uno del navegador sin importar el orden. Mismo
   bug real ya encontrado y corregido en el chat widget (.ga-chat-panel). */
.filter-row-extra[hidden]{ display:none; }
.filter-toggle-extra{
  display:block; width:100%; margin-top:6px; padding:0;
  background:none; border:0; font:inherit; appearance:none; -webkit-appearance:none;
  cursor:pointer; text-align:left; font-size:.78rem; font-weight:600; color:var(--red);
}
.filter-toggle-extra:hover{ text-decoration:underline; }
/* Slider de precio real: dos <input type="range"> superpuestos en el mismo
   carril, cada uno solo capta clics/arrastre en su propia manija (thumb);
   el resto del input es invisible y no bloquea al otro slider. */
.filter-price .f-range{ height:14px; position:relative; margin:16px 2px 14px; }
.filter-price .f-range i{
  position:absolute; top:5px; left:0; right:0; height:4px;
  border-radius:2px; background:var(--line-strong); display:block; pointer-events:none;
}
.filter-price .f-range i::before{
  content:""; position:absolute; top:0; bottom:0;
  left:var(--fill-start,0%); right:var(--fill-end,0%);
  background:var(--red); border-radius:2px;
}
.price-slider{
  position:absolute; top:0; left:0; width:100%; height:14px; margin:0;
  appearance:none; -webkit-appearance:none; background:transparent; pointer-events:none;
}
.price-slider::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none; pointer-events:auto;
  width:14px; height:14px; border-radius:50%; margin-top:0;
  background:#fff; border:2px solid var(--red); cursor:pointer;
}
.price-slider::-moz-range-thumb{
  pointer-events:auto; width:10px; height:10px; border-radius:50%;
  background:#fff; border:2px solid var(--red); cursor:pointer;
}
.price-slider::-webkit-slider-runnable-track{ background:transparent; height:14px; }
.price-slider::-moz-range-track{ background:transparent; height:14px; }
.filter-price .f-labels{ display:flex; justify-content:space-between; gap:10px; }
.filter-price .f-labels input[type="number"]{
  width:100%; min-width:0; font-size:.78rem; font-variant-numeric:tabular-nums;
  color:var(--text); background:var(--bg); border:1px solid var(--line-strong);
  border-radius:8px; padding:6px 8px; font-family:inherit;
}
.filter-stars{ color:#e8b400; letter-spacing:2px; font-size:.88rem; }
.filter-apply{
  display:block; width:100%; text-align:center; margin-top:20px;
  background:var(--red); color:#fff; font-weight:700; font-size:.84rem;
  padding:12px; border-radius:10px; border:0; cursor:pointer; font-family:inherit;
  transition:background .2s ease;
}
.filter-apply:hover{ background:var(--red-hover); }

/* ---------- Ficha de producto ---------- */
/* auto-fill en vez de un numero fijo de columnas (pedido 2026-09-01:
   "demasiado grandes los productos... en pantallas grandes" — con
   repeat(3,1fr) fijo, una pantalla 2K/ultrawide igual mostraba solo 3
   columnas GIGANTES, la foto dominaba y el titulo (tamaño fijo) quedaba
   perdido/ilegible en proporcion. Con minmax cada tarjeta tiene un ancho
   razonable siempre, y aparecen mas columnas solas en pantallas grandes
   en vez de estirar 3 tarjetas enormes. */
.product-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:20px; }
/* 2 columnas en movil, no 1 (2026-09-08). Con una sola, cada ficha medía
   358x527px: se veia producto y medio por pantalla, y el catalogo tiene
   mas de 2.000. Es ademas lo que hace cualquier tienda en el movil. La
   ficha aguanta bien a ~170px de ancho — el bloque de productos sugeridos
   del carrito ya funciona desde 150px. */
@media (max-width:600px){
  .product-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
}
/* Bug real reportado 2026-09-02 (Adrian: "los botones de añadir al
   carrito deben estar alineados y del mismo tamaño"): sin flex-column +
   margin-top:auto en el precio/boton, una tarjeta con titulo de 1 linea
   y otra de 3 lineas quedaban con el boton a distinta altura dentro de
   la misma fila — el grid ya iguala el ALTO de cada tarjeta (CSS Grid
   por defecto), pero el CONTENIDO adentro no se anclaba al fondo. */
.p-card{
  display:flex; flex-direction:column;
  border:1px solid rgba(13,13,13,0.10); border-radius:14px; overflow:hidden;
  background:#fff; position:relative;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.p-card:hover{ border-color:rgba(13,13,13,0.22); transform:translateY(-3px); box-shadow:0 22px 44px -24px rgba(0,0,0,0.55); }
.p-card .p-img{ position:relative; aspect-ratio:1/1; overflow:hidden; background:#fff; }
.p-card .p-img img{ width:100%; height:100%; object-fit:contain; transition:transform .5s ease; }
.p-card:hover .p-img img{ transform:scale(1.03); }
.p-card .badge{
  position:absolute; top:12px; left:12px; z-index:1;
  background:var(--red); color:#fff; font-size:.68rem; font-weight:700;
  padding:5px 10px; border-radius:6px; letter-spacing:.03em;
}
/* Corazon de "lista de deseos" en la ficha de producto (ver
   galaxy_andorra_product_card() / p-wishlist-btn en functions.php y app.js).
   Arriba a la derecha de la imagen, simetrico al badge de arriba a la
   izquierda. */
.p-card .p-wishlist-btn{
  position:absolute; top:10px; right:10px; z-index:1;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:999px; border:0; background:rgba(255,255,255,0.92); color:#8a8686;
  cursor:pointer; transition:color .2s ease, transform .15s ease;
}
.p-card .p-wishlist-btn svg{ width:17px; height:17px; }
.p-card .p-wishlist-btn:hover{ color:var(--red); transform:scale(1.08); }
.p-card .p-wishlist-btn.is-active{ color:var(--red); }
.p-card .p-wishlist-btn.is-loading{ opacity:.6; pointer-events:none; }
.p-body{ padding:16px 18px 20px; display:flex; flex-direction:column; flex:1; }
.p-body .cat{ font-size:.7rem; color:#8a8686; text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
/* min-height + line-clamp (pedido 2026-09-02: "se ve mucho espacio en
   blanco" entre nombre y precio) — el titulo SIEMPRE reserva el alto de
   2 lineas, tenga 1 o 2 lineas de texto real, para que el precio/boton
   sigan alineados entre tarjetas de la misma fila sin depender de
   margin-top:auto (que estiraba TODO el hueco libre hacia el precio,
   viendose como un salto grande en vez de un respiro chico y parejo). */
.p-body h3{
  margin:7px 0 4px; font-size:.98rem; font-weight:600; line-height:1.3; color:#141414;
  min-height:2.6em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* margin-top:auto (no un valor fijo) — empuja el precio/boton SIEMPRE al
   fondo de la tarjeta, sin importar cuantas lineas ocupe el titulo
   arriba, para que el boton quede a la misma altura en toda la fila.
   Bug real reportado 2026-09-02 ("la ficha de 3 telefonos se ve
   descuadrada"): con precio y boton lado a lado (flex row), un producto
   VARIABLE (ej. Samsung Galaxy S26, con rango "1.139,00€ – 1.549,00€" en
   vez de un precio simple) no entraba en el espacio que quedaba libre
   junto al boton de ancho fijo (150px) — el texto del rango se partia en
   2-3 lineas sueltas, descuadrando esa tarjeta contra las vecinas de
   precio simple. Precio arriba y boton abajo (columna, ancho completo
   cada uno) resuelve esto de raiz: el precio tiene TODO el ancho de la
   tarjeta para acomodarse, sin importar si es un numero simple o un
   rango, y el boton queda siempre en la misma posicion. */
.p-body .price-row{ display:flex; flex-direction:column; align-items:stretch; margin-top:0; padding-top:14px; gap:10px; }
/* Bug real (encontrado 2026-09-02, "diferenciar los precios tachados"): la
   regla ".p-body .price small" nunca coincidia con nada — WooCommerce arma
   el precio con oferta como <del>...</del><ins>...</ins>, sin ningun
   <small> de por medio, asi que el precio tachado se veia igual de grande
   y del mismo color que el final. Se apunta a la etiqueta real (del), sin
   tocar el color del precio final (#141414, tal cual estaba). */
.p-body .price{ font-weight:800; font-size:1.05rem; font-variant-numeric:tabular-nums; color:#141414; }
.p-body .price del{ color:#a0a0a0; font-weight:500; font-size:.76em; margin-right:6px; }
/* Anidado a proposito bajo .p-card: le da mas especificidad que el boton
   rojo generico de mas abajo (a.button), asi gana siempre sin importar
   en que pagina este la tarjeta, sin necesitar ningun :not(). */
/* width fijo (no min-width) + white-space:nowrap (pedido 2026-09-02:
   "que sea igual en todas sin importar que"): con min-width solo, un texto
   mas largo ("Añadir al carrito") partia a 2 lineas dentro del mismo
   ancho que un texto corto de 1 sola linea ("Leer más"), asi que la CAJA
   quedaba igual de ancha pero mas ALTA en unas tarjetas que en otras.
   width:150px cubre "Añadir al carrito" en una sola linea al tamaño de
   fuente actual, con margen. */
.p-card .add-btn{
  display:inline-block; height:auto; width:150px; white-space:nowrap; text-align:center; box-sizing:border-box;
  font-size:.75rem; font-weight:700; color:var(--red);
  border:1px solid rgba(208,0,0,0.4); padding:8px 10px; border-radius:8px;
  background:transparent; cursor:pointer; font-family:inherit;
  transition:background .2s ease, color .2s ease;
}
.p-card .add-btn:hover{ background:var(--red); color:#fff; }
/* Tarjetas descuadradas (visto por Adrian en el movil, 18/09/2026):
   1. El bloque de precio ocupa el alto que sobra y el boton se ancla al
      fondo: si una tarjeta lleva «Te ahorras» y la de al lado no, los dos
      botones siguen a la misma altura.
   2. En movil (2 columnas) el ancho fijo de 150 px no cabe: el hueco dentro
      de la tarjeta es de unos 137 px y el boton se salia por la derecha.
      Ahi el boton ocupa todo el ancho de la tarjeta.
   3. «Te ahorras 90,00 €» en una sola linea en movil. */
.p-body .price-row{ flex:1; }
.p-body .price-row .add-btn{ margin-top:auto; }
@media (max-width:600px){
  .p-body{ padding:12px 12px 14px; }
  .p-card .add-btn{ width:100%; padding:9px 6px; font-size:.74rem; }
  .p-body .galaxy-ahorro--tarjeta{ white-space:nowrap; font-size:.68rem; padding:3px 7px; max-width:100%; }
}
.disclaimer{ text-align:center; font-size:.78rem; color:var(--text-dimmer); margin-top:26px; }

/* ---------- Tira de valor ---------- */
.value-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
@media (max-width:860px){ .value-strip{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .value-strip{ grid-template-columns:1fr; } }
/* background:var(--hover-tint) (no --surface, pedido 2026-09-02: "que se
   diferencie un poco mas del apartado de categorias" — con --surface las
   dos franjas quedaban identicas, pegado el efecto se perdia). Mismo tinte
   rojizo sutil que ya se usa para hover en toda la web (on-brand, no es un
   color nuevo), pero distinto de la franja de categorias justo arriba. */
.value-item{ background:var(--hover-tint); padding:26px 24px; display:flex; gap:14px; align-items:flex-start; }
.value-item svg{ width:24px; height:24px; stroke:var(--red); fill:none; flex:none; margin-top:2px; }
/* "Garantia" se quedo con el <svg> de arriba (sin icono rojo entregado
   todavia); las otras 3 ya son <img> reales — mismo tamaño/posicion para
   que las 4 se vean parejas en la franja. */
.value-item img{ width:24px; height:24px; object-fit:contain; flex:none; margin-top:2px; }
.value-item h3{ margin:0 0 4px; font-size:.9rem; font-weight:700; color:var(--text); }
.value-item p{ margin:0; font-size:.8rem; color:var(--text-dimmer); }

/* ---------- Marcas ---------- */
.brand-strip{
  overflow:hidden; padding:36px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.brand-strip-track{
  display:flex; flex-wrap:nowrap; gap:clamp(22px,5vw,60px); align-items:center; width:max-content;
  animation:brand-strip-scroll 90s linear infinite;
}
.brand-strip:hover .brand-strip-track{ animation-play-state:paused; }
.brand-strip a{ font-weight:800; letter-spacing:.06em; color:var(--text-dimmer); font-size:1rem; opacity:.75; white-space:nowrap; flex:none; text-decoration:none; transition:opacity .25s ease, color .25s ease; }
.brand-strip a:hover{ opacity:1; color:var(--text-dim); }

/* ---------- Logos reales de marca en la cinta (2026-09-10) ----------
   Antes la cinta solo pintaba el NOMBRE de cada marca. Ahora, si la marca
   tiene logo cargado (ver inc/admin-marcas-logos.php) se pinta el logo, y
   si no, sigue saliendo el nombre — asi una marca nueva no deja un hueco
   mientras no le consigan el logotipo.

   La caja es del MISMO tamaño para todos, y el logo va con
   object-fit:contain dentro. Eso no es pereza: los logos llegan sobre un
   lienzo transparente de 700 x 200 donde el diseñador ya los normalizo
   opticamente, uno cuadrado ocupa poco ancho y uno alargado casi todo. Si
   en vez de esto se recortara el margen de cada uno y se pintaran todos a
   la misma altura, los logotipos bajos y anchos (Hasselblad, PGYTECH)
   saldrian gigantes al lado de los cuadrados (Apple, Leica). 119 x 34 es
   exactamente la proporcion 3,5:1 del lienzo. */
.brand-strip-item{ display:flex; align-items:center; justify-content:center; flex:none; }
.brand-strip-item-logo{ width:119px; height:34px; }
.brand-strip-logo{
  width:100%; height:100%; object-fit:contain; display:block;
  /* Los logos son de un solo color, gris plomo #4A4A4A sobre
     transparencia, pensados para fondo claro. Este tema arranca en OSCURO
     (el bloque :root de arriba es el oscuro, y [data-theme="light"] es el
     que lo pisa), y sobre fondo oscuro ese gris queda casi invisible. Se
     sube el brillo en vez de invertir: invertir dejaria con los colores
     cambiados cualquier logotipo a color que suban mas adelante. */
  filter:brightness(1.9);
  transition:filter .25s ease;
}
.brand-strip a:hover .brand-strip-logo{ filter:brightness(2.6); }
:root[data-theme="light"] .brand-strip-logo,
:root[data-theme="light"] .brand-strip a:hover .brand-strip-logo{ filter:none; }
@media (max-width:700px){
  .brand-strip-item-logo{ width:98px; height:28px; }
}

@keyframes brand-strip-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .brand-strip{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .brand-strip-track{ animation:none; }
}

/* ---------- Hero de producto (rediseño 2026-08-27) ---------- */
.product-hero{
  position:relative; min-height:min(72vh, 620px);
  display:flex; align-items:center; overflow:hidden; background:#000;
}
.product-hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.product-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(8,8,8,0.88) 0%, rgba(8,8,8,0.55) 32%, rgba(8,8,8,0.18) 62%, rgba(8,8,8,0.5) 100%),
    linear-gradient(0deg, rgba(8,8,8,0.75) 0%, rgba(8,8,8,0.1) 40%);
}
.product-hero-copy{
  position:relative; z-index:1; width:100%; max-width:var(--maxw); margin:0 auto;
  padding:clamp(28px,5vw,72px) var(--pad);
}
.product-hero-copy .k{ color:#ff8a8a; font-weight:700; font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; margin:0 0 14px; }
.product-hero-copy h1{ font-size:clamp(2.2rem,5vw,3.6rem); font-weight:900; line-height:1.05; margin:0 0 16px; color:#fff; max-width:640px; }
.product-hero-copy .lead{ color:#d9d5d5; font-size:1.02rem; max-width:460px; margin:0 0 28px; }
.product-hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- Filas destacadas en carrusel horizontal (rediseño) ----------
   Pedido explicito del cliente: "las secciones destacadas, que sean un
   carrusel, no unas debajo de otras" — antes usaba el mismo grid de la
   tienda (3 columnas, envuelve a filas nuevas). Ahora es una fila con
   scroll horizontal + snap, cada tarjeta con ancho fijo. Los botones de
   flecha son JS-opcionales (funciona con scroll/swipe nativo igual sin
   JS, ver app.js para el enhancement de las flechas). */
.product-grid-curated{
  display:flex; gap:20px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity;
  scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab;
}
.product-grid-curated::-webkit-scrollbar{ display:none; }
.product-grid-curated .p-card{ flex:0 0 260px; scroll-snap-align:start; }
@media (max-width:600px){ .product-grid-curated .p-card{ flex-basis:220px; } }
/* Mientras se arrastra o hay inercia en curso (ver app.js), se apaga el
   snap y se evita seleccionar texto/imagenes de las tarjetas — si no,
   el snap "pelea" contra el movimiento manual y se ve entrecortado. */
.product-grid-curated.is-dragging{
  cursor:grabbing; scroll-snap-type:none; user-select:none;
}
.product-grid-curated.is-dragging .p-card{ pointer-events:none; }
.site-section-curated{ position:relative; }
/* .section-products envuelve las filas (antes era 1 sola fila con
   flechas). Bug real reportado 2026-09-02: "las filas no deben moverse
   juntas" — antes esta seccion tenia UN solo .product-grid-curated con
   grid-auto-flow:column repartiendo las tarjetas en 2 filas visuales
   DENTRO del mismo contenedor con scroll, asi que ambas filas
   compartian el mismo scrollLeft y se movian pegadas. Ahora
   .section-products apila 2 <div class="curated-row"> independientes
   (ver galaxy_andorra_render_curated_row en functions.php), cada una con
   su propio .product-grid-curated + su propio par de flechas — cada fila
   scrollea sola. Las secciones CON banner lateral (.has-banner) siguen
   usando un solo grid que envuelve (sin filas ni flechas), no les aplica
   este cambio. */
.section-products{ position:relative; min-width:0; flex:1; display:flex; flex-direction:column; gap:18px; }
.curated-row{ position:relative; }
.curated-arrow{
  position:absolute; top:50%; translate:0 -50%; z-index:1;
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:var(--bg); color:var(--text); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:border-color .2s ease;
}
.curated-arrow:hover{ border-color:var(--red); }
.curated-arrow.prev{ left:-14px; }
.curated-arrow.next{ right:-14px; }
@media (max-width:700px){ .curated-arrow{ display:none; } }

/* ---------- Banner lateral de seccion (pedido 2026-08-31, referencia
   proiron.pe): panel promocional vertical a un costado de la fila de
   productos, en vez de ocupar todo el ancho como kit_limpieza/sequra. Si
   la posicion no tiene banner cargado, .has-banner nunca se agrega
   (ver galaxy_andorra_render_curated_row) y la seccion se ve igual que
   siempre — no deja hueco vacio. ---------- */
.site-section-curated.has-banner{ display:flex; gap:28px; align-items:flex-start; }
/* Mas grande y con marca propia (pedido 2026-08-31: "que no parezca un
   producto mas") — borde superior rojo grueso (mismo lenguaje visual que
   .megamenu-inner/.search-suggest, "esto es una pieza destacada del
   sitio"), sombra propia para que se sienta elevado sobre el carrusel de
   tarjetas planas, y texto mas grande.
   position:sticky (pedido 2026-09-02, referencia proiron.pe): el banner
   queda fijo en pantalla mientras las filas de productos a su lado pasan
   scrolleando (scroll normal de la pagina, ya no scroll horizontal), y se
   "suelta" solo cuando el grid de productos termina — eso lo hace sticky
   de forma nativa, sin JS, porque el banner no puede salirse de la altura
   de .site-section-curated.has-banner (su contenedor). top:96px iguala el
   offset ya usado por el sidebar de filtros de la tienda (mismo alto de
   header). */
.section-banner{
  position:sticky; top:96px; flex:0 0 320px; border-radius:18px; overflow:hidden;
  display:block;
  /* Bug real reportado 2026-09-02 ("en pantalla mas pequeña se recorta el
     banner y se pierde el efecto"): con min-height:820px fijo, en una
     ventana con menos de 96px(top) + 820px de alto disponible, el sticky
     empuja el texto/CTA (anclados abajo con justify-content:flex-end)
     por debajo del borde inferior de la pantalla — nunca se ve, aunque el
     elemento "exista". height con min() lo limita a lo que realmente cabe
     en el viewport visible (100vh menos el offset sticky y un margen),
     asi el banner completo, con su texto, siempre esta a la vista. */
  height:min(820px, calc(100vh - 140px)); min-height:280px;
  border-top:4px solid var(--red);
  box-shadow:0 20px 40px rgba(0,0,0,.35);
}
.section-banner img, .section-banner video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.section-banner-text{
  position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; gap:10px;
  padding:32px 26px; background:linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.82) 100%);
  color:#fff; justify-content:flex-end;
}
.section-banner-kicker{ font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--red); }
.section-banner-text strong{ font-size:1.5rem; line-height:1.2; }
.section-banner-text > span:not([class]){ font-size:.88rem; color:rgba(255,255,255,.82); line-height:1.45; }
.section-banner-btn{
  display:inline-block; margin-top:8px; align-self:flex-start;
  background:var(--red); color:#fff; font-size:.82rem; font-weight:700;
  padding:11px 20px; border-radius:999px;
}
/* El carrusel normal (.product-grid-curated) es de una sola fila con
   scroll horizontal; cuando hay banner lateral pasa a ser un grid de
   varias filas (envuelve) para que efectivamente "pasen filas" al lado
   del banner fijo mientras se hace scroll vertical normal de la pagina,
   en vez de una sola fila angosta. Las flechas de carrusel no aplican a
   un grid que envuelve, se ocultan. */
.site-section-curated.has-banner .product-grid-curated{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  grid-template-rows:none; grid-auto-flow:row; grid-auto-columns:auto;
  overflow:visible; cursor:auto;
}
.site-section-curated.has-banner .product-grid-curated .p-card{ flex:none; }
.site-section-curated.has-banner .curated-arrow{ display:none; }
/* Movil (2026-09-18, pedido de Adrian): la misma rejilla de 2 columnas que
   la tienda (.product-grid). Esta regla es mas especifica que la de la
   tienda y la anulaba: salia una tarjeta por fila y cada una de estas dos
   secciones media mas de 9.000 px. Ademas solo las 8 primeras (4 filas):
   el resto esta a un toque en «Ver todo» de la cabecera. */
@media (max-width:600px){
  .site-section-curated.has-banner .product-grid-curated{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
  .site-section-curated.has-banner .product-grid-curated .p-card:nth-child(n+9){ display:none; }
}
/* Bug real encontrado 2026-09-04: en movil y tablet el panel no se veia.
   No estaba oculto — colapsaba a 0px de ancho. Al pasar el contenedor a
   flex-direction:column, el eje transversal pasa a ser el horizontal, y
   con el align-items:flex-start heredado el panel se encoge al ancho de
   su contenido; como TODOS sus hijos (img/video y .section-banner-text)
   son position:absolute, ese contenido mide 0. Resultado: existia en el
   DOM pero con 0px de ancho, invisible.
   Se llego a arreglar (pedido del cliente 2026-09-04: "que se muestren en
   movil, pudiera ser en panoramica arriba de las secciones") poniendolo
   apaisado encima de la fila de productos, con align-self:stretch y una
   altura en clamp.

   REVERTIDO el 2026-09-10, tambien por decision del cliente: "en movil no
   van esos banners, ocultalos". Se deja escrita la historia entera porque
   el bug del ancho 0px es de los que se repiten: si algun dia se vuelven
   a mostrar en movil, NO basta con quitar el display:none — hace falta el
   align-self:stretch, o el panel vuelve a colapsar.

   Se oculta con display:none y no quitando el HTML: la imagen del panel
   es vertical y esta pensada para la columna del escritorio, asi que en
   movil no aporta; pero sigue en el DOM para que el mismo marcado valga
   en las dos vistas, sin duplicar plantillas. */
@media (max-width:900px){
  .site-section-curated.has-banner{ flex-direction:column; gap:18px; }
  .site-section-curated.has-banner .section-banner{ display:none; }
}

/* ---------- Banner ancho (kit de limpieza / sequra) ----------
   Rediseñado 2026-08-27 despues de ver la referencia real que mando el
   cliente (un banner grafico ancho tipo "Kit de Limpieza: imprescindible
   para fotografos", con el texto ya incluido en la propia imagen, no
   texto de HTML superpuesto). La imagen destacada del banner se muestra
   completa a lo ancho; si ADEMAS se cargo subtitulo/texto de boton en
   wp-admin, se superpone como refuerzo (util si la imagen es una foto
   sin texto propio) — funciona en los dos casos sin romper ninguno. */
/* Bug real encontrado 2026-09-03 ("casi no se ven en pantallas grandes"):
   el contenedor tenia min-height:120px/max-height:220px SIN relacion con
   la proporcion real de la imagen (1560x160 = 9.75:1). object-fit:cover
   escala para cubrir AMBAS dimensiones del recuadro, y como el recuadro
   es mucho mas "alto" en proporcion que la imagen, terminaba forzando un
   zoom mucho mayor que el que parece a simple vista con solo mirar el
   ancho (hasta ~37% de sobre-escalado en pantallas anchas, no ~2%).
   aspect-ratio:1560/160 hace que el contenedor SIEMPRE tenga la misma
   proporcion que la imagen real — object-fit:cover ya no necesita
   estirar de mas, solo escala por ancho (maximo real ~2.5%, con
   --maxw:1600px vs imagen de 1560px de ancho — practicamente imperceptible).
   Probado 2026-09-03 con un set nuevo mejorado con IA (2172x724/1902x827)
   y revertido a pedido del cliente ("quedan muy grandes") — se espera que
   el diseñador mande las versiones definitivas antes de tocar esto de
   nuevo. */
.strip-banner{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
/* 9,75:1, la franja del documento de medidas. Es solo el valor por
   defecto: front-page.php escribe encima la proporcion REAL de la imagen
   cargada (ver 'image_ratio' en galaxy_andorra_banner_to_array), asi que
   si un dia se sube un archivo con otra forma se muestra entero igual, sin
   recortarlo y sin tener que tocar este CSS. */
.strip-banner-inner{
  position:relative; display:block; border-radius:16px; overflow:hidden;
  text-decoration:none; aspect-ratio:1560/160; background:var(--surface);
  /* container-type para poder medir el texto de Polaris en % del ancho de
     la propia franja (unidades cqw), no del viewport. */
  container-type:inline-size;
}
.strip-banner-inner img{ display:block; width:100%; height:100%; object-fit:cover; }
.strip-banner-text{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:4px;
  padding:20px clamp(20px,4vw,48px); color:#fff; max-width:60%;
  background:linear-gradient(90deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 60%, transparent 100%);
}
.strip-banner-text strong{ font-size:1.15rem; font-weight:800; }
.strip-banner-text span{ font-size:.88rem; color:#e6e2e2; }
/* Variante "sequra": el pedido paso de "chico" a "que ocupe todo el
   ancho de la pagina" (feedback del cliente, 2026-08-27). La imagen real
   (1920x800) es mas "cuadrada" que la tira del kit de limpieza
   (1560x160, 1560/160=9.75) — su proporcion real (1920/800=2.4) es la
   misma que aspect-ratio:12/5 de aca abajo, asi que a todo el ancho
   tampoco se recorta nada con object-fit:contain (las proporciones
   coinciden exacto). */
.strip-banner--sm .strip-banner-inner{
  aspect-ratio:12/5; min-height:0; background:#fff;
}
.strip-banner--sm .strip-banner-inner img{ max-height:none; height:100%; object-fit:contain; }
.strip-banner--sm .strip-banner-text{ padding:10px clamp(16px,3vw,32px); }
.strip-banner--sm .strip-banner-text strong{ font-size:.92rem; }
.strip-banner--sm .strip-banner-text span{ font-size:.78rem; }
/* Variante "polaris": banner del home-2026-09-02, fuente real 1024x210
   (4.88:1), distinta a kit_limpieza/sequra — su propio aspect-ratio para
   que object-fit:cover no sobre-escale por el mismo bug ya resuelto
   arriba (aspect-ratio de contenedor vs. imagen real). */
.strip-banner--polaris .strip-banner-inner{ aspect-ratio:1024/210; }

/* ---------- Proporción de móvil (2026-09-04) ----------
   Una franja de 9,75:1 en un móvil de 390px queda de 37px de alto: el
   texto incrustado no se puede leer. Por eso la version de movil se pide
   apaisada 3:1, pero el contenedor tiene que cambiar de forma tambien, o
   la imagen nueva entraria igual de aplastada.
   La clase --movil la pone PHP SOLO cuando hay una version de movil
   cargada de verdad. Es a proposito: sin ella, cambiar la proporcion
   recortaria la imagen de escritorio por los lados, y estas franjas
   llevan el texto incrustado a lo ancho — cortaria justo las palabras.
   Mejor una franja fina pero completa que una alta con el texto cortado. */
@media (max-width:700px){
  .strip-banner--movil .strip-banner-inner{ aspect-ratio:3/1; }
  .strip-banner--polaris.strip-banner--movil .strip-banner-inner{ aspect-ratio:2/1; }
  .site-section-head-banner--movil .site-section-banner-header,
  .site-section-head-banner--movil .testimonials-banner{ aspect-ratio:2/1; }
}

/* ---------- Reseñas de Google (plugin Site Reviews) ----------
   Reescrito 2026-08-27 despues de ver el HTML REAL que genera el plugin
   (antes se habia escrito el CSS a ciegas, adivinando nombres de clase, y
   quedo "esteticamente horrible" segun feedback del cliente — las clases
   reales del plugin son .glsr-*, con su propio hoja de estilos clara/
   generica que choca contra este tema oscuro). Todo lo de aca abajo pisa
   ese estilo por defecto con las clases reales confirmadas en el HTML
   renderizado, no adivinadas. */
.testimonials{
  max-width:var(--maxw); margin:0 auto; padding:clamp(32px,5vw,56px) var(--pad);
  text-align:center;
}
/* Misma forma que las cabeceras de seccion (ver .site-section-banner-header):
   el banner de esta seccion sale del mismo set de 3168 x 1344.
   Sin margen inferior propio: desde 2026-09-10 va dentro de un
   .site-section-head--image, que ya pone su separacion. Con los dos
   quedaba el doble de aire debajo. */
/* 1235 de alto y no 1344: este banner viene mal exportado del diseñador,
   con una franja roja lisa de 109 px pegada al borde inferior tapando el
   trozo de escena que falta. Se corta AQUI, con el contenedor, y no
   recortando el archivo: la imagen se sigue subiendo tal cual desde
   wp-admin y el corte lo hace object-fit:cover con object-position en
   `top`, que se come exactamente esos 109 px por abajo.
   Esta clase es solo del banner de reseñas, asi que las otras siete
   cabeceras no se enteran de este recorte (usan .site-section-banner-header).
   El dia que llegue una version bien exportada, se vuelve a 3168/1344 y
   se quita el object-position. */
.testimonials-banner{ width:100%; aspect-ratio:3168/1235; object-fit:cover; object-position:center top; border-radius:14px; margin:0 auto; display:block; }
.review-form-toggle{
  height:44px; padding:0 22px; margin-bottom:32px; border-radius:999px; border:1px solid var(--line-strong);
  background:transparent; color:var(--text); font-weight:700; font-size:.85rem; font-family:inherit;
  cursor:pointer; transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.review-form-toggle:hover{ border-color:var(--red); color:var(--red); }
.review-form-toggle[aria-expanded="true"]{ background:var(--red); border-color:var(--red); color:#fff; }

/* Formulario de reseña ([site_reviews_form]) — mismo criterio que
   .testimonials-summary/.testimonials-list: clases reales del plugin
   confirmadas en el HTML renderizado, no adivinadas. */
.review-form-panel{
  max-width:560px; margin:0 auto 40px; text-align:left;
  background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:clamp(20px,3vw,32px);
}
.review-form-panel .glsr-field{ margin-bottom:16px; }
.review-form-panel .glsr-label span{ display:block; font-size:.82rem; font-weight:600; color:var(--text-dim); margin-bottom:6px; }
.review-form-panel .glsr-input, .review-form-panel .glsr-textarea, .review-form-panel .glsr-select{
  width:100%; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--text);
  padding:10px 14px; font-family:inherit; font-size:.88rem; transition:border-color .2s ease;
}
.review-form-panel .glsr-input:focus, .review-form-panel .glsr-textarea:focus, .review-form-panel .glsr-select:focus{
  outline:0; border-color:var(--red);
}
.review-form-panel .glsr-textarea{ resize:vertical; }
.review-form-panel .glsr-field-toggle{ display:flex; align-items:flex-start; gap:10px; font-size:.8rem; color:var(--text-dim); }
.review-form-panel .glsr-field-error{ color:var(--red); font-size:.78rem; margin-top:4px; }
.review-form-panel [data-field="submit-button"]{ margin-top:8px; }
.review-form-panel .glsr-button{
  height:48px; padding:0 28px; border-radius:999px; border:0; background:var(--red); color:#fff;
  font-weight:700; font-size:.88rem; font-family:inherit; cursor:pointer; transition:background .2s ease;
}
.review-form-panel .glsr-button:hover{ background:var(--red-hover); }

.testimonials-summary{
  background:var(--bg); border:1px solid var(--line); border-radius:16px;
  padding:28px; max-width:340px; margin:0 auto 32px;
}
.testimonials-summary .glsr-summary-percentages{ display:none; } /* barras de desglose 1-5 estrellas: recargado para una tarjeta de resumen chica, no aporta aca */
.testimonials-summary .glsr-summary-rating .glsr-tag-value{ font-size:1.6rem; font-weight:800; color:var(--text); display:block; }
.testimonials-summary .glsr-summary-stars{ margin:8px 0; }
.testimonials-summary .glsr-summary-text{ color:var(--text-dimmer); font-size:.82rem; }
.testimonials-summary .glsr-star-full{ color:#e8b400; }
.testimonials-summary .glsr-star-rating{ display:inline-flex; gap:2px; justify-content:center; }

/* Efecto "coverflow": la tarjeta centrada se ve grande y nitida, las de
   los costados se achican y difuminan segun que tan lejos del centro
   estan — pedido explicito del cliente con referencias visuales. El
   calculo de escala/opacidad por tarjeta es JS (ver app.js,
   "Coverflow de reseñas"), esto define los valores base/transicion; JS
   solo escribe --coverflow-scale/--coverflow-opacity por tarjeta.
   overflow-x:auto + scroll-snap siguen siendo la base (funciona con
   touch/trackpad nativo), el JS es una mejora visual encima, no un
   reemplazo del scroll real. */
.testimonials-list{ position:relative; padding:0 56px; }
.testimonials-list .glsr-reviews{
  display:flex; gap:16px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; padding:30px 0;
  text-align:left; scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab;
}
.testimonials-list .glsr-reviews::-webkit-scrollbar{ display:none; }
.testimonials-list .glsr-reviews.is-dragging{
  cursor:grabbing; scroll-snap-type:none; user-select:none;
}
.testimonials-list .glsr-reviews.is-dragging .glsr-review{ pointer-events:none; }
.testimonials-list .glsr-review{
  --coverflow-scale:0.86; --coverflow-opacity:0.55;
  flex:0 0 280px; scroll-snap-align:center;
  background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:18px;
  display:flex; flex-direction:column; gap:8px;
  transform:scale(var(--coverflow-scale)); opacity:var(--coverflow-opacity);
  transition:transform .3s ease, opacity .3s ease, box-shadow .3s ease;
}
.testimonials-list .glsr-review[data-coverflow-active]{
  --coverflow-scale:1; --coverflow-opacity:1;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.5); border-color:var(--red);
}
.testimonials-list .glsr-review-avatar{ order:0; }
.testimonials-list .glsr-review-avatar img{ width:36px !important; height:36px !important; border-radius:50%; }
.testimonials-list .glsr-review-author{ order:1; margin-top:-6px; }
.testimonials-list .glsr-review-author .glsr-tag-value{ color:var(--text); font-weight:700; font-size:.86rem; }
.testimonials-list .glsr-review-verified{ order:2; color:#1db954; display:inline-flex; align-items:center; gap:4px; font-size:.72rem; margin-top:-4px; }
.testimonials-list .glsr-review-verified svg{ width:14px; height:14px; }
.testimonials-list .glsr-review-title{ order:3; margin-top:6px; }
.testimonials-list .glsr-review-title .glsr-tag-value{ color:var(--text); font-weight:700; font-size:.95rem; }
.testimonials-list .glsr-review-rating{ order:4; }
.testimonials-list .glsr-star-rating{ display:inline-flex; gap:2px; }
.testimonials-list .glsr-star-full{ color:#e8b400; }
.testimonials-list .glsr-review-date{ order:5; }
.testimonials-list .glsr-review-date .glsr-tag-value{ color:var(--text-dimmer); font-size:.76rem; }
.testimonials-list .glsr-review-content{ order:6; color:var(--text-dim); font-size:.88rem; line-height:1.5; }
.testimonials-list .glsr-review-content p{ margin:0; }

/* ---------- Opiniones de producto (desde 2026-09-14) ----------
   Sustituyen al plugin Site Reviews en la portada y se anaden a la ficha.
   Mismo aspecto que tenia el carrusel: las reglas .glsr-* de arriba se
   quedan por si se reactivase el plugin, pero ya no se usan.
   La tarjeta .review-card es la misma en la portada (carrusel coverflow)
   y en la ficha (lista), asi que un cambio de diseno se hace una vez. */
.testimonials-summary{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.testimonials-summary-value{ font-size:1.6rem; font-weight:800; color:var(--text); line-height:1; }
.testimonials-summary-stars{ color:#e8b400; letter-spacing:2px; font-size:1.05rem; }
.testimonials-summary-text{ color:var(--text-dimmer); font-size:.82rem; }

.review-card{
  background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:18px;
  display:flex; flex-direction:column; gap:6px; text-align:left;
}
.review-card-author{ margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.review-card-author strong{ color:var(--text); font-weight:700; font-size:.86rem; }
.review-card-verified{ color:#1db954; font-size:.72rem; }
.review-card-title{ margin:4px 0 0; color:var(--text); font-weight:700; font-size:.95rem; line-height:1.3; }
.review-card-rating{ margin:0; color:#e8b400; letter-spacing:2px; }
.review-card-date{ margin:0; color:var(--text-dimmer); font-size:.76rem; }
.review-card-content{ color:var(--text-dim); font-size:.88rem; line-height:1.55; }
.review-card-content p{ margin:0 0 6px; }
.review-card-content p:last-child{ margin-bottom:0; }
.review-card-product{ margin-top:auto; padding-top:8px; font-size:.78rem; font-weight:600; color:var(--red); text-decoration:none; }
.review-card-product:hover{ text-decoration:underline; }

/* Carrusel de la portada: mismas reglas de coverflow que antes. */
.testimonials-list .reviews-track{
  display:flex; gap:16px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; padding:30px 0;
  scrollbar-width:none; -ms-overflow-style:none; cursor:grab;
}
.testimonials-list .reviews-track::-webkit-scrollbar{ display:none; }
.testimonials-list .reviews-track.is-dragging{ cursor:grabbing; scroll-snap-type:none; user-select:none; }
.testimonials-list .reviews-track.is-dragging .review-card{ pointer-events:none; }
.testimonials-list .review-card{
  --coverflow-scale:0.86; --coverflow-opacity:0.55;
  flex:0 0 280px; scroll-snap-align:center;
  transform:scale(var(--coverflow-scale)); opacity:var(--coverflow-opacity);
  transition:transform .3s ease, opacity .3s ease, box-shadow .3s ease;
}
.testimonials-list .review-card[data-coverflow-active]{
  --coverflow-scale:1; --coverflow-opacity:1;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.5); border-color:var(--red);
}

/* Bloque de opiniones de la ficha */
a.p-single-rating{ text-decoration:none; }
a.p-single-rating:hover .p-single-rating-count{ color:var(--red); text-decoration:underline; }
/* ---------- Opiniones de la ficha (rehecho 16/09/2026) ----------
   Antes: titulo pequeño, una linea de texto con la media y, debajo, el
   formulario metido en una caja de 760px pegada a la izquierda mientras
   las tarjetas de opinion ocupaban todo el ancho. Quedaba descolgado.
   Ahora la nota media manda en la cabecera y el formulario ocupa el mismo
   ancho que las tarjetas, con los campos a dos columnas. */
.p-single-reviews-head{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:12px 26px;
  padding-bottom:18px; margin-bottom:22px; border-bottom:1px solid var(--line);
}
.p-single-reviews-head h2{ margin:0; }
.p-single-reviews-nota{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.p-single-reviews-media{ font-size:1.9rem; font-weight:800; color:var(--text); line-height:1; }
.p-single-reviews-de5{ font-size:.82rem; color:var(--text-dimmer); }
.p-single-reviews-estrellas{ color:#e8b400; letter-spacing:1px; font-size:1rem; }
.p-single-reviews-cuantas{ font-size:.86rem; color:var(--text-dim); }

/* Sin opiniones todavia: invitacion centrada, no un parrafo suelto. */
.p-single-reviews-empty{ text-align:center; padding:26px 20px 30px; }
.p-single-reviews-empty-estrellas{ font-size:1.6rem; color:var(--line-strong); letter-spacing:3px; }
.p-single-reviews-empty-titulo{ margin:10px 0 4px; font-size:1.05rem; font-weight:700; color:var(--text); }
.p-single-reviews-empty-texto{ margin:0; color:var(--text-dim); }

.p-single-reviews-summary{ display:flex; align-items:center; gap:10px; margin:0 0 18px; color:var(--text-dim); }
.p-single-reviews-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; margin-bottom:22px; }
.p-single-reviews-empty{ margin:0 0 18px; }
/* Formulario de opinion en la ficha. Reajustado el 16/09/2026: tenia los
   campos mas bajos que el resto de la web y el boton sin estilo, asi que
   se veia como un formulario suelto pegado a la pagina. Ahora usa las
   mismas medidas que el pago y el contacto (campos de 50px, esquinas de
   10px, boton rojo de 52px). */
.p-single-review-form{
  border:1px solid var(--line-strong); border-radius:16px; padding:0 26px;
  background:var(--surface);
}
.p-single-review-form summary{ cursor:pointer; padding:20px 0; font-weight:700; color:var(--text); list-style:none; }
.p-single-review-form summary::-webkit-details-marker{ display:none; }
.p-single-review-form summary::after{ content:"+"; float:right; color:var(--red); font-weight:800; }
.p-single-review-form[open] summary::after{ content:"–"; }
.review-form{ padding:4px 0 26px; }
.review-form-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 22px; }
.review-form-field--ancho{ grid-column:1 / -1; }
.review-form-field{ margin:0 0 18px; }
.review-form-field label, .review-form-stars legend{ display:block; font-size:.82rem; font-weight:600; color:var(--text-dim); margin-bottom:8px; }
.review-form-field input, .review-form-field textarea{
  width:100%; box-sizing:border-box; background:var(--bg); color:var(--text);
  border:1px solid var(--line-strong); border-radius:10px; padding:12px 14px; font:inherit; font-size:1rem;
  min-height:50px;
}
.review-form-field input:focus, .review-form-field textarea:focus{ outline:none; border-color:var(--red); }
.review-form-field textarea{ resize:vertical; }
/* Estrellas con radios: se pintan de derecha a izquierda para que al pasar
   por encima de una se iluminen tambien las anteriores, sin JavaScript. */
/* La leyenda va ENCIMA de las estrellas, como el resto de etiquetas de
   campo; antes flotaba a su lado y parecia texto suelto. */
.review-form-stars{ border:0; padding:0; margin:0 0 18px; }
.review-form-stars legend{ padding:0; }
.review-form-stars .review-form-estrellas{ display:inline-flex; flex-direction:row-reverse; justify-content:flex-end; }
.review-form-stars input{ position:absolute; opacity:0; width:1px; height:1px; }
.review-form-stars label{ font-size:1.7rem; line-height:1; color:var(--line-strong); cursor:pointer; padding:0 2px; transition:color .15s ease; }
.review-form-stars label:hover, .review-form-stars label:hover ~ label,
.review-form-stars input:checked ~ label{ color:#e8b400; }
.review-form-stars input:focus-visible + label{ outline:2px solid var(--red); outline-offset:2px; border-radius:4px; }
.review-form-pie{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.review-form-note{ font-size:.8rem; color:var(--text-dimmer); margin:0; }
.review-form .button{ width:auto; }
@media (max-width:760px){
  .review-form-grid{ grid-template-columns:1fr; gap:0; }
}
@media (max-width:600px){
  .p-single-review-form{ padding:0 16px; }
  .p-single-reviews-head{ gap:8px 18px; }
  .review-form-pie{ flex-direction:column; align-items:stretch; }
  .review-form .button{ width:100%; }
  .review-form-note{ text-align:center; }
}

/* ---------- Opiniones: tarjetas con volumen (2026-09-14) ----------
   Pedido explicito: que no se vean planas. Tres capas de profundidad:
   - La tarjeta: degradado muy suave con un toque del rojo de la marca,
     brillo fino en el borde superior y sombra en dos niveles (una cercana
     y dura, otra lejana y difusa), que es lo que la despega del fondo.
   - Detalles: comillas grandes al fondo y la inicial del cliente en un
     circulo con el degradado rojo.
   - En el carrusel de la portada, giro 3D real: perspectiva en la pista y
     cada tarjeta con rotateY/translateZ calculados en app.js segun su
     distancia al centro. La central se adelanta y brilla en rojo.
   Se apoya en las variables del tema (--bg, --surface, --line...), asi que
   vale igual para el tema oscuro y el claro. */
.review-card{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:18px; padding:22px 20px 18px; gap:7px;
  background:var(--bg);
  background:linear-gradient(160deg, color-mix(in srgb, var(--surface) 88%, var(--red) 12%) 0%, var(--bg) 58%);
  border:1px solid var(--line-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 2px 6px -2px rgba(0,0,0,.28),
    0 22px 44px -26px rgba(0,0,0,.6);
}
.review-card::before{
  content:"\201C"; position:absolute; z-index:-1; top:-26px; right:12px;
  font:700 150px/1 Georgia, "Times New Roman", serif; color:var(--red); opacity:.10;
  pointer-events:none;
}
.review-card::after{
  content:""; position:absolute; left:18px; right:18px; top:0; height:2px; border-radius:0 0 2px 2px;
  background:linear-gradient(90deg, transparent, var(--red), transparent);
  opacity:0; transition:opacity .35s ease;
}
.review-card-author{ gap:10px; }
.review-card-avatar{
  flex:none; width:38px; height:38px; border-radius:50%;
  display:inline-grid; place-items:center;
  font-weight:800; font-size:.95rem; color:#fff;
  background:linear-gradient(135deg, var(--red-hover), var(--red-ember));
  box-shadow:0 6px 14px -6px var(--red), inset 0 1px 0 rgba(255,255,255,.25);
}
.review-card-rating{ text-shadow:0 0 12px rgba(232,180,0,.35); }

/* Ficha: la lista no gira, pero la tarjeta se levanta al pasar por encima. */
.p-single-reviews-list .review-card{ transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
@media (hover:hover){
  .p-single-reviews-list .review-card:hover{
    transform:translateY(-4px);
    border-color:color-mix(in srgb, var(--red) 45%, var(--line-strong));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 4px 10px -4px rgba(0,0,0,.3), 0 30px 50px -28px rgba(0,0,0,.65);
  }
  .p-single-reviews-list .review-card:hover::after{ opacity:1; }
}

/* Carrusel 3D de la portada */
.testimonials-list .reviews-track{ perspective:1300px; perspective-origin:50% 45%; padding:44px 0 56px; }
.testimonials-list .review-card{
  --coverflow-rotate:0deg; --coverflow-z:0px;
  flex:0 0 300px;
  transform:translateZ(var(--coverflow-z)) rotateY(var(--coverflow-rotate)) scale(var(--coverflow-scale));
  transform-origin:50% 50%;
  backface-visibility:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.2,1), opacity .4s ease, box-shadow .4s ease, border-color .4s ease;
  will-change:transform;
}
.testimonials-list .review-card[data-coverflow-active]{
  border-color:color-mix(in srgb, var(--red) 70%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 0 1px color-mix(in srgb, var(--red) 55%, transparent),
    0 36px 70px -30px rgba(0,0,0,.7),
    0 24px 60px -28px color-mix(in srgb, var(--red) 60%, transparent);
}
.testimonials-list .review-card[data-coverflow-active]::after{ opacity:1; }
.testimonials-list .reviews-track.is-dragging .review-card{ transition:none; }
/* Con muchas opiniones, la mas larga estiraba todas las tarjetas del
   carrusel a su altura y quedaban con medio hueco vacio. En la portada se
   ensenan 6 lineas de texto; la opinion completa esta en la ficha. */
.testimonials-list .reviews-track{ align-items:flex-start; }
.testimonials-list .review-card{ min-height:330px; }
.testimonials-list .review-card-content{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; line-clamp:6; overflow:hidden;
}
.testimonials-list .review-card-content p{ display:inline; }
.testimonials-list .review-card-content p + p::before{ content:" "; }

/* Caja de la nota media (2026-09-14): con el mismo lenguaje que las
   tarjetas (degradado, borde, linea roja arriba, sombra en dos niveles) en
   vez de la caja plana que tenia. Nota y estrellas en horizontal, separadas
   por una linea fina. Solo cambia el aspecto, el contenido es el mismo. */
.testimonials .testimonials-summary{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:row; align-items:center; justify-content:center; gap:20px;
  width:fit-content; max-width:calc(100% - 32px); margin:0 auto 8px; padding:18px 30px 18px 28px;
  border-radius:18px; border:1px solid var(--line-strong);
  background:var(--bg);
  background:linear-gradient(160deg, color-mix(in srgb, var(--surface) 86%, var(--red) 14%) 0%, var(--bg) 62%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 2px 6px -2px rgba(0,0,0,.28),
    0 26px 50px -28px rgba(0,0,0,.6),
    0 18px 40px -30px color-mix(in srgb, var(--red) 55%, transparent);
}
.testimonials .testimonials-summary::before{
  content:""; position:absolute; z-index:-1; left:-30px; top:50%; width:140px; height:140px; transform:translateY(-50%);
  background:radial-gradient(circle, color-mix(in srgb, var(--red) 28%, transparent) 0%, transparent 70%);
  pointer-events:none;
}
.testimonials .testimonials-summary::after{
  content:""; position:absolute; left:18px; right:18px; top:0; height:2px; border-radius:0 0 2px 2px;
  background:linear-gradient(90deg, transparent, var(--red), transparent);
}
.testimonials .testimonials-summary-value{
  font-size:2.7rem; font-weight:800; line-height:1; letter-spacing:-.02em;
  color:var(--text);
  background:linear-gradient(180deg, var(--text) 30%, color-mix(in srgb, var(--text) 55%, var(--red) 45%) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.testimonials .testimonials-summary-stars{
  padding-left:20px; border-left:1px solid var(--line-strong);
  font-size:1.45rem; letter-spacing:4px; line-height:1; color:#e8b400;
  text-shadow:0 0 14px rgba(232,180,0,.45), 0 2px 0 rgba(0,0,0,.18);
}
@media (max-width:480px){
  .testimonials .testimonials-summary{ gap:14px; padding:14px 20px; }
  .testimonials .testimonials-summary-value{ font-size:2.2rem; }
  .testimonials .testimonials-summary-stars{ padding-left:14px; font-size:1.2rem; letter-spacing:3px; }
}

/* "Leer opinion completa" y la ventana con la opinion entera */
.review-card-more{
  align-self:flex-start; margin:-2px 0 0; padding:0; border:0; background:none;
  color:var(--red); font:inherit; font-size:.8rem; font-weight:700; cursor:pointer;
}
.review-card-more:hover{ text-decoration:underline; }
.review-card-more:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:4px; }
.testimonials-list .review-card.is-truncated{ cursor:pointer; }
.review-modal{
  border:0; padding:0; background:transparent; color:inherit;
  width:min(580px, calc(100vw - 32px)); max-width:none; max-height:none; overflow:visible;
}
.review-modal::backdrop{ background:rgba(0,0,0,.62); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.review-modal .review-card{
  max-height:min(82vh, 760px); overflow:auto; padding:30px 26px 24px;
  animation:reviewModalIn .32s cubic-bezier(.2,.7,.2,1);
}
.review-modal .review-card::after{ opacity:1; }
.review-modal .review-card-content{ font-size:.96rem; line-height:1.65; }
.review-modal-close{
  position:absolute; top:-14px; right:-14px; z-index:2;
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--bg); color:var(--text);
  font-size:1.35rem; line-height:1; display:grid; place-items:center;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.5);
}
.review-modal-close:hover{ border-color:var(--red); color:var(--red); }
@media (max-width:640px){ .review-modal-close{ top:8px; right:8px; } }
@keyframes reviewModalIn{ from{ opacity:0; transform:translateY(14px) scale(.97); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .review-modal .review-card{ animation:none; } }
/* Responsive del carrusel (2026-09-14).
   En tablet y movil la primera tarjeta arranca CENTRADA y las vecinas
   asoman por los lados, que es lo que hace que se note el 3D. Se consigue
   con relleno lateral de media pista menos media tarjeta: asi el
   scroll-snap puede centrar tambien la primera y la ultima. En escritorio
   no se toca: ahi caben cuatro tarjetas y el arranque a la izquierda llena
   el ancho. Las flechas se quitan por debajo de 700 px como en el resto de
   carruseles del tema; en movil se desliza con el dedo. */
@media (max-width:900px){
  .testimonials-list{ padding:0; }
  .testimonials-list .reviews-track{
    --tarjeta:280px;
    padding:34px calc(50% - var(--tarjeta) / 2) 48px;
    scroll-padding-inline:calc(50% - var(--tarjeta) / 2);
    gap:14px;
  }
  .testimonials-list .review-card{ flex-basis:var(--tarjeta); min-height:310px; }
  .testimonials-list .curated-arrow{ z-index:3; }
  .testimonials-list .curated-arrow.prev{ left:4px; }
  .testimonials-list .curated-arrow.next{ right:4px; }
}
@media (max-width:480px){
  .testimonials{ padding-left:12px; padding-right:12px; }
  .testimonials-list .reviews-track{ --tarjeta:min(76vw, 280px); gap:10px; padding-top:28px; padding-bottom:40px; }
  .testimonials-list .review-card{ min-height:0; padding:18px 16px 16px; }
  .testimonials-list .review-card-content{ -webkit-line-clamp:5; line-clamp:5; }
  .review-card::before{ font-size:120px; top:-22px; }
  .review-modal .review-card{ padding:26px 18px 20px; max-height:86vh; }
}

/* Los banners con version de movil se imprimen envueltos en <picture>
   (ver galaxy_andorra_banner_picture en functions.php). <picture> es un
   elemento en linea, asi que sin esto agregaria una caja de linea propia
   con su hueco de baseline, y las reglas de posicion escritas para
   "el <img> hijo directo de X" dejarian de aplicar. display:contents lo
   saca del layout y deja al <img> exactamente donde estaba cuando no
   habia version de movil — mismo diseño con y sin ella. */
picture{ display:contents; }

/* ---------- Newsletter ---------- */
.news-band{
  background:linear-gradient(120deg, var(--red-ember), var(--red));
  padding:clamp(32px,4.5vw,56px) var(--pad);
  display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between;
  color:#fff;
}
.news-band .news-inner{
  max-width:var(--maxw); margin:0 auto; width:100%;
  display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between;
}
/* ---------- Fondo de imagen del newsletter (pedido 2026-09-04: "en el
   newsletter en vez del cuadro rojo, ira un banner de fondo") ----------
   La clase --img solo la pone front-page.php cuando hay imagen cargada,
   asi que sin banner la franja sigue siendo exactamente el degradado
   rojo de antes: nada que revertir si el cliente no sube nada.
   El velo oscuro no es decoracion: el titular, el texto y el formulario
   van en blanco encima, y sin el una foto clara los dejaria ilegibles.
   Es mas fuerte a la izquierda, que es donde cae el texto. */
.news-band--img{ position:relative; background:#111; isolation:isolate; }
.news-band--img .news-band-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:-2; /* debajo del velo y del contenido, sin sacarlos de flujo */
}
.news-band--img::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.3) 100%);
}
/* En movil el contenido se apila y ocupa todo el ancho: el velo tiene que
   ser parejo, no mas claro de un lado. */
@media (max-width:700px){
  .news-band--img::after{ background:rgba(0,0,0,.66); }
}
.news-band h2{ margin:0 0 5px; font-size:1.4rem; font-weight:800; }
.news-band p{ margin:0; font-size:.86rem; color:rgba(255,255,255,0.85); }
.news-form{ display:flex; border-radius:999px; overflow:hidden; border:1px solid rgba(255,255,255,0.5); }
.news-form input{
  border:0; outline:0; padding:14px 20px; background:rgba(0,0,0,0.2);
  color:#fff; font-size:.86rem; width:250px; font-family:inherit;
}
.news-form input::placeholder{ color:rgba(255,255,255,0.65); }
.news-form button{
  border:0; background:#0d0d0d; color:#fff; font-weight:700; font-size:.84rem;
  padding:14px 24px; cursor:pointer; font-family:inherit; transition:background .2s ease;
}
.news-form button:hover{ background:#000; }
.news-msg{ display:block; width:100%; font-size:.8rem; margin-top:10px; color:rgba(255,255,255,0.95); }

/* ---------- Pie ---------- */
/* ---------- Pie con fondo de plasma + galaxia ---------- */
.site-footer{ position:relative; overflow:hidden; isolation:isolate; background:var(--bg); }
.foot-inner{
  position:relative; z-index:2;
  padding:clamp(64px,7vw,116px) var(--pad) 44px;
  max-width:var(--maxw); margin:0 auto;
}
.foot-fx{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; pointer-events:none; z-index:0;
}
/* el desenfoque va en CSS (GPU) y no por fotograma en el canvas */
.foot-fx--plasma{ filter:blur(44px) saturate(165%); opacity:.76; }
.foot-fx--stars{ z-index:1; opacity:1; }
:root[data-theme="light"] .foot-fx--plasma{ opacity:.3; }
:root[data-theme="light"] .foot-fx--stars{ opacity:.9; }
/* velo que protege el contraste del texto sin apagar la galaxia:
   denso arriba a la izquierda, se abre hacia el núcleo (abajo derecha) */
.site-footer::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 130% at 88% 80%, rgba(13,13,13,0) 0%, rgba(13,13,13,0.50) 45%, rgba(13,13,13,0.68) 100%),
    linear-gradient(180deg, rgba(13,13,13,0.40) 0%, rgba(13,13,13,0.08) 45%, rgba(13,13,13,0.34) 100%);
}
:root[data-theme="light"] .site-footer::before{
  background:
    radial-gradient(120% 130% at 88% 78%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.6) 45%, rgba(255,255,255,0.8) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.2) 45%, rgba(255,255,255,0.5) 100%);
}
/* el texto del pie se apoya sobre el fondo animado */
.foot-inner{ text-shadow:0 1px 14px rgba(0,0,0,0.55); }
:root[data-theme="light"] .foot-inner{ text-shadow:0 1px 12px rgba(255,255,255,0.85); }
.foot-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:36px; margin-bottom:40px; }
@media (max-width:860px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-grid h3{ font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dimmer); margin:0 0 16px; }
.foot-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.foot-grid ul a{ font-size:.85rem; color:var(--text-dim); }
.foot-grid ul a:hover{ color:var(--text); }
.foot-brand{ display:flex; align-items:center; gap:9px; font-weight:800; margin-bottom:12px; color:var(--text); font-size:1rem; }
.foot-brand img{ height:24px; }
.foot-desc{ font-size:.84rem; color:var(--text-dimmer); max-width:290px; margin:0 0 18px; }
.foot-social{ display:flex; gap:10px; }
.foot-social a{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--text-dim);
  transition:border-color .2s ease, color .2s ease;
}
.foot-social a:hover{ border-color:var(--red); color:var(--text); }
.foot-social svg{ width:16px; height:16px; }
.foot-bottom{
  border-top:1px solid var(--line); padding-top:22px;
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  font-size:.76rem; color:var(--text-dimmer);
}
.foot-bottom .legal{ display:flex; gap:18px; flex-wrap:wrap; }
.foot-bottom .legal a:hover{ color:var(--text); }

/* ---------- Toggle de tema ---------- */
.theme-toggle{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); background:transparent; cursor:pointer; flex:none;
  transition:border-color .2s ease, color .2s ease;
}
.theme-toggle:hover{ border-color:var(--red); color:var(--text); }
.theme-toggle svg{ width:17px; height:17px; }
.theme-toggle .i-moon{ display:none; }
:root[data-theme="light"] .theme-toggle .i-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .i-moon{ display:block; }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .p-card:hover{ transform:none; }
}

/* ---------- Ficha de producto individual ---------- */
.p-breadcrumb{
  max-width:var(--maxw); margin:22px auto 0; padding:0 var(--pad);
  font-size:.78rem; color:var(--text-dimmer); display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.p-breadcrumb a{ color:var(--text-dimmer); transition:color .2s ease; }
.p-breadcrumb a:hover{ color:var(--red); }
.p-breadcrumb a:last-child, .p-breadcrumb span.cat, .p-breadcrumb span.cat a{ color:var(--text-dim); font-weight:600; }

.p-single{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(28px,4.5vw,64px);
  max-width:var(--maxw); margin:22px auto 0; padding:0 var(--pad);
}
@media (max-width:860px){ .p-single{ grid-template-columns:1fr; } }

/* --- Galería --- */
.p-single-media-main{
  position:relative; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  /* Blanco fijo, no var(--surface): las fotos de producto reales vienen
     casi todas con fondo blanco, y con object-fit:contain (elegido a
     proposito por el cliente para no recortar productos con fotos que no
     encajan en el marco) el "letterbox" tiene que ser blanco tambien
     para que no se note, o en modo oscuro quedaria un rectangulo blanco
     flotando sobre un fondo casi negro.
     Marco 1/1 (cuadrado), no 4/5: el catalogo real mezcla fotos muy
     panoramicas (objetivos sueltos, ej. 800x483px, casi 5:3) con fotos
     mas verticales (camaras de pie). Un marco cuadrado es el punto medio
     que minimiza el espacio vacio en ambos casos sin recortar nada —
     4/5 (mas alto que ancho) dejaba un hueco enorme en las fotos anchas,
     encontrado por el cliente probando el objetivo Sony. */
  background:#fff; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
}
.p-single-media-main img{ width:100%; height:100%; object-fit:contain; display:block; }
.p-single-media-main .badge{
  position:absolute; top:16px; left:16px; z-index:1;
  background:var(--red); color:#fff; font-size:.72rem; font-weight:700;
  padding:6px 12px; border-radius:7px; letter-spacing:.03em;
}
.p-single-thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.p-single-thumb{
  width:64px; height:64px; padding:0; border-radius:10px; overflow:hidden; cursor:pointer;
  border:2px solid var(--line); background:#fff; transition:border-color .2s ease;
}
.p-single-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.p-single-thumb:hover{ border-color:var(--line-strong); }
.p-single-thumb.is-active{ border-color:var(--red); }

/* --- Resumen --- */
.p-single-summary{ display:flex; flex-direction:column; align-items:flex-start; }
.p-single-brand{
  font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--red); margin-bottom:10px;
}
.p-single-summary h1{ margin:0 0 12px; font-size:clamp(1.6rem,3vw,2.3rem); font-weight:800; color:var(--text); line-height:1.12; }

.p-single-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:20px; font-size:.8rem; }
.p-single-meta .cat{ color:var(--text-dimmer); text-transform:uppercase; letter-spacing:.06em; font-weight:600; font-size:.72rem; }
.p-single-meta .cat a{ color:inherit; }
.p-single-rating{ color:#e8b400; letter-spacing:1px; display:inline-flex; align-items:center; gap:5px; }
.p-single-rating-count{ color:var(--text-dimmer); letter-spacing:0; font-size:.78rem; }
.p-single-sku{ color:var(--text-dimmer); }

.p-single-price{
  font-size:1.9rem; font-weight:800; color:var(--text);
  padding:20px 0; border-top:1px solid var(--line); width:100%;
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.p-single-price ins{ text-decoration:none; }
/* color explicito (no opacity, que solo atenuaba el mismo color de fondo) */
.p-single-price del{ color:var(--text-dimmer); font-size:.55em; font-weight:600; }
.p-single-price .woocommerce-Price-currencySymbol{ font-size:.7em; }

.p-single-stock{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.82rem; font-weight:600; margin-bottom:22px;
}
.p-single-stock svg{ width:16px; height:16px; flex:none; }
.p-single-stock.in-stock{ color:#1eb45a; }
.p-single-stock.out-of-stock{ color:var(--red); }

.p-single-desc{ color:var(--text-dim); font-size:.92rem; line-height:1.65; margin-bottom:26px; }

/* Desde 2026-09-01 .p-single-cart tiene DOS hijos directos: el
   <form class="cart"> de WooCommerce y el boton de comparar (antes era
   el unico hijo, el flex vivia solo en el form) — display:flex aca
   ademas del form adentro, para que el boton de comparar quede al lado
   en vez de debajo. */
.p-single-cart{
  padding:6px 0 28px; margin-bottom:26px; border-bottom:1px solid var(--line); width:100%;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.p-single-cart form.cart{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.p-single-compare-btn{
  display:flex; align-items:center; gap:8px; padding:0 20px; height:52px;
  border-radius:999px; border:1.5px solid var(--line); background:transparent; color:var(--text-dim);
  font-family:inherit; font-size:.88rem; font-weight:700; cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.p-single-compare-btn:hover{ border-color:var(--red); color:var(--red); }
.p-single-compare-btn.is-active{ border-color:var(--red); color:var(--red); background:var(--hover-tint); }

/* Selector de cantidad con botones +/- (agregados por JS alrededor del
   input nativo de WooCommerce, que sigue siendo el que se envia). Sin
   ambito a .p-single-cart a proposito: es la MISMA definicion que se usa
   en la ficha de producto y en las filas del carrito, para no terminar
   con dos reglas de distinta especificidad peleando por el mismo input
   (eso fue lo que rompio el selector la vez anterior). Altura fija e
   igual en el selector y en el boton para que no queden descuadrados. */
.quantity{
  display:flex; align-items:stretch; height:52px; box-sizing:border-box;
  border:1px solid var(--line-strong); border-radius:999px; overflow:hidden; flex:none;
}
.qty-step{
  width:40px; height:100%; padding:0; border:0; background:transparent; color:var(--text-dim);
  display:flex; align-items:center; justify-content:center; line-height:1;
  font-size:1.15rem; cursor:pointer; font-family:inherit; transition:background .2s ease, color .2s ease;
}
.qty-step:hover{ background:var(--hover-tint); color:var(--red); }
.quantity .qty{
  width:48px; height:100%; padding:0; margin:0; border:0; text-align:center;
  background:transparent; color:var(--text); font-family:inherit; font-size:.9rem;
  -moz-appearance:textfield; box-sizing:border-box;
}
.quantity .qty::-webkit-outer-spin-button, .quantity .qty::-webkit-inner-spin-button{ appearance:none; margin:0; }

.p-single-trust{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.p-single-trust li{ display:flex; align-items:center; gap:11px; font-size:.82rem; color:var(--text-dim); }
.p-single-trust svg{ width:19px; height:19px; stroke:var(--red); fill:none; flex:none; }

.p-single-full-desc{
  max-width:var(--maxw); margin:52px auto 0; padding:36px var(--pad) 0; border-top:1px solid var(--line);
  color:var(--text-dim); font-size:.92rem; line-height:1.75;
}
.p-single-full-desc h2{ font-size:1.1rem; font-weight:800; margin:0 0 14px; color:var(--text); }

/* Tabla de especificaciones (atributos de producto) en la ficha */
.p-single-specs .woocommerce-product-attributes{
  width:100%; max-width:640px; border-collapse:collapse; border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
.p-single-specs .woocommerce-product-attributes-item{ border-bottom:1px solid var(--line); }
.p-single-specs .woocommerce-product-attributes-item:last-child{ border-bottom:0; }
.p-single-specs .woocommerce-product-attributes-item__label,
.p-single-specs .woocommerce-product-attributes-item__value{
  padding:12px 16px; font-size:.88rem; vertical-align:top;
}
.p-single-specs .woocommerce-product-attributes-item__label{
  width:38%; background:var(--surface); color:var(--text-dim); font-weight:600;
}
.p-single-specs .woocommerce-product-attributes-item__value{ color:var(--text); }
.p-single-specs .woocommerce-product-attributes-item__value p{ margin:0; }

/* ---------- Paginas de contenido generico (page.php) ---------- */
/* Cubre paginas estaticas (Contacto, FAQ, legales) y las paginas que
   genera WooCommerce por shortcode (Carrito, Checkout, Mi cuenta), que
   llegan con el mismo wrapper .page-content. */
.page-content{
  color:var(--text-dim); font-size:.95rem; line-height:1.75; max-width:820px;
}
.page-content h2, .page-content h3{ color:var(--text); font-weight:800; margin:32px 0 14px; }
.page-content h2:first-child, .page-content h3:first-child{ margin-top:0; }
.page-content p{ margin:0 0 16px; }

/* ---------- Financiación (rediseño 2026-09-01) ----------
   El texto sigue viniendo tal cual de wp-admin (the_content(), sin
   tocar), esto solo le da presentacion: intro destacada, "cards" para
   cada seccion (h3 + su parrafo, agrupados con un borde/fondo comun via
   selectores de hermanos, sin envolver nada en PHP) y una fila de chips
   con los plazos. */
.financing-wrap{ max-width:760px; margin:0 auto; }
.financing-terms{
  list-style:none; display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  margin:0 0 40px; padding:0;
}
.financing-terms li{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:16px 22px; text-align:center; font-size:1.5rem; font-weight:900; color:var(--red);
  min-width:84px;
}
.financing-terms li span{
  display:block; font-size:.66rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-dimmer); margin-top:2px;
}
.financing-content h2{
  font-size:1.5rem; font-weight:900; margin:0 0 14px; color:var(--text); text-align:center;
}
.financing-content > p:first-of-type{
  font-size:1.05rem; color:var(--text-dim); text-align:center; max-width:600px; margin:0 auto 40px;
}
.financing-content h3{
  font-size:1.05rem; font-weight:800; color:var(--text); margin:0 0 10px;
  padding:20px 0 0 18px; border-left:3px solid var(--red);
}
.financing-content h3 + p{
  margin:0 0 28px; padding-left:18px; border-left:3px solid var(--line);
  color:var(--text-dim); font-size:.9rem; line-height:1.7;
}
.financing-disclaimer, .financing-content p.disclaimer{
  text-align:center; font-size:.78rem; color:var(--text-dimmer); font-style:italic; margin-top:12px;
}
.page-content ul, .page-content ol{ margin:0 0 16px; padding-left:22px; }
.page-content li{ margin-bottom:6px; }
.page-content a:not(.button){ color:var(--red); }
.page-content a:not(.button):hover{ text-decoration:underline; }

/* WooCommerce (carrito, checkout, mi cuenta) hereda el ancho completo de
   .site-section en vez del max-width angosto de .page-content de texto. */
.page-content:has(.woocommerce){ max-width:none; }

/* Sin scope a ".woocommerce" a proposito: esa clase solo esta en el body
   de algunas paginas (tienda, carrito, checkout, mi cuenta) pero NO en el
   home (usa front-page.php, no es una pagina que WooCommerce reconozca
   como propia). Escribir estas reglas dependiendo de esa clase es
   exactamente lo que causaba que un mismo componente (tabla de carrito,
   inputs de formulario, botones) se viera distinto segun la pagina en la
   que estuviera. table.shop_table y .form-row son marcado propio de
   WooCommerce que no aparece en ningun otro lado, asi que no hace falta
   ese scope para evitar pisar otra cosa. */
table.shop_table{
  width:100%; border-collapse:collapse; margin:0 0 28px; border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
table.shop_table th, table.shop_table td{
  padding:14px 16px; border-bottom:1px solid var(--line); text-align:left; color:var(--text); font-size:.88rem;
}
table.shop_table thead th{ background:var(--surface); font-weight:700; }
table.shop_table tr:last-child td{ border-bottom:0; }

form .form-row input.input-text,
form .form-row textarea,
form .form-row select{
  background:var(--surface); border:1px solid var(--line); border-radius:8px; color:var(--text);
  padding:10px 12px; font-family:inherit; font-size:.9rem;
}
form .form-row label{ color:var(--text-dim); font-size:.85rem; margin-bottom:6px; display:block; }

/* Estado de carga mientras se espera la respuesta del AJAX de carrito
   (añadir/quitar): mismo patron en toda la web, no solo en estos botones. */
.add_to_cart_button.loading, .single_add_to_cart_button.loading{ opacity:.6; pointer-events:none; }

.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice{
  list-style:none; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--red);
  border-radius:8px; padding:14px 18px; margin:0 0 22px; color:var(--text);
}

/* Layout de "Mi cuenta": menu fijo a la izquierda tipo sidebar + contenido
   a la derecha (ver woocommerce/myaccount/my-account.php del tema, que
   envuelve nav+contenido en ".myaccount-layout"), en vez de la fila de
   pildoras horizontal que quedaba suelta arriba del contenido. */
.myaccount-layout{ display:grid; grid-template-columns:240px 1fr; gap:28px; align-items:start; }
@media (max-width:820px){
  .myaccount-layout{ grid-template-columns:1fr; }
}

.woocommerce-MyAccount-navigation{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:10px;
  position:sticky; top:24px;
}
@media (max-width:820px){
  .woocommerce-MyAccount-navigation{ position:static; }
}
.woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.woocommerce-MyAccount-navigation li{ margin:0; }
.woocommerce-MyAccount-navigation a{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:10px;
  color:var(--text-dim); font-size:.9rem; font-weight:600; transition:background .15s ease, color .15s ease;
}
.woocommerce-MyAccount-navigation .account-nav-icon{
  display:flex; width:19px; height:19px; flex:0 0 19px; color:inherit;
}
.woocommerce-MyAccount-navigation .account-nav-icon svg{ width:100%; height:100%; }
.woocommerce-MyAccount-navigation li.is-active a{ background:var(--red); color:#fff; }
.woocommerce-MyAccount-navigation a:hover{ background:var(--bg); color:var(--text); }
.woocommerce-MyAccount-navigation li.is-active a:hover{ background:var(--red); color:#fff; }
/* "Salir" (customer-logout) se separa un poco del resto del menu, es una
   accion distinta a navegar entre secciones de la cuenta. */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout{
  margin-top:8px; padding-top:8px; border-top:1px solid var(--line);
}

/* Contenido de cada pestaña de Mi Cuenta (pedidos, direcciones, datos,
   etc.): misma tarjeta que se usa en el resto del sitio, en vez de texto
   suelto directo sobre el fondo. El dashboard tiene su propio layout de
   tarjetas (ver .account-dashboard mas abajo) en vez de usar esta caja. */
.woocommerce-MyAccount-content{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:30px;
}
.woocommerce-MyAccount-content p{ color:var(--text-dim); line-height:1.7; margin:0 0 14px; }
.woocommerce-MyAccount-content p:last-child{ margin-bottom:0; }
.woocommerce-MyAccount-content a:not(.button){ color:var(--red); }
.woocommerce-MyAccount-content mark{ background:none; color:var(--text); font-weight:700; padding:0; }

/* Dashboard: bienvenida + tarjetas de estadisticas + accesos directos
   (ver woocommerce/myaccount/dashboard.php del tema). Vive dentro de
   ".woocommerce-MyAccount-content" pero sin el padding/max-width de texto
   plano, por eso se le saca el padding de la caja padre y se maneja el
   propio adentro de cada tarjeta. */
.woocommerce-MyAccount-content:has(.account-dashboard){ padding:0; background:none; border:0; }
.account-dashboard-welcome{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px 30px;
  margin-bottom:20px; display:flex; align-items:center; flex-wrap:wrap; gap:6px 18px;
}
.account-dashboard-hello{ margin:0; font-size:1.05rem; color:var(--text); flex:1 1 auto; }
.account-dashboard-hello strong{ font-weight:800; }
.account-dashboard-since{ margin:0; color:var(--text-dimmer); font-size:.82rem; }
.account-dashboard-logout{ color:var(--red); font-size:.85rem; font-weight:600; }
.account-dashboard-logout:hover{ text-decoration:underline; }

.account-dashboard-stats{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:20px;
}
@media (max-width:640px){ .account-dashboard-stats{ grid-template-columns:1fr; } }
.account-stat-card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px;
  display:flex; flex-direction:column; gap:6px;
}
.account-stat-value{ font-size:1.6rem; font-weight:800; color:var(--text); line-height:1; }
.account-stat-value--status{ font-size:1.1rem; }
.account-stat-value--muted{ color:var(--text-dimmer); }
.account-stat-label{ color:var(--text-dimmer); font-size:.8rem; }

.account-dashboard-actions{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
@media (max-width:640px){ .account-dashboard-actions{ grid-template-columns:1fr; } }
.account-action-card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px;
  display:flex; align-items:flex-start; gap:14px; transition:border-color .15s ease;
}
.account-action-card:hover{ border-color:var(--red); }
.account-action-icon{
  display:flex; align-items:center; justify-content:center; width:38px; height:38px; flex:0 0 38px;
  border-radius:10px; background:var(--bg); color:var(--red);
}
.account-action-icon svg{ width:19px; height:19px; }
.account-action-text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.account-action-text strong{ color:var(--text); font-size:.92rem; }
.account-action-text span{ color:var(--text-dimmer); font-size:.8rem; line-height:1.5; }

/* Campos bloqueados del formulario "Detalles de la cuenta" (email): se
   muestran de solo lectura en vez de editables libremente, ver
   woocommerce/myaccount/form-edit-account.php del tema. */
.account-field-locked input{ background:var(--bg); color:var(--text-dimmer); cursor:not-allowed; }
.account-field-locked-note{ display:block; margin-top:6px; color:var(--text-dimmer); font-size:.78rem; }

/* Lista de deseos (ver woocommerce/myaccount/wishlist.php): mismas
   tarjetas .p-card que el resto del sitio, pero sin el panel de filtros
   de ".shop-layout" (aca no aplica) y algo mas angosta la columna porque
   vive dentro de la tarjeta de contenido de Mi cuenta. */
.product-grid--plain{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:900px){ .product-grid--plain{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px){ .product-grid--plain{ grid-template-columns:1fr; } }

/* Bonos de descuento / bonos de abono (ver woocommerce/myaccount/coupons.php
   y credit-notes.php): mismo reset de doble borde que el resto de tablas
   "shop_table" del sitio. */
.galaxy-coupons-table, .galaxy-credit-notes-table{ width:100%; border-collapse:collapse; }
.galaxy-coupons-table th, .galaxy-credit-notes-table th{
  text-align:left; padding:10px 8px; font-size:.76rem; text-transform:uppercase;
  letter-spacing:.04em; color:var(--text-dimmer); border-bottom:2px solid var(--line);
}
.galaxy-coupons-table td, .galaxy-credit-notes-table td{
  padding:12px 8px; border-bottom:1px solid var(--line); font-size:.88rem; color:var(--text-dim);
}
.galaxy-coupon-code{ background:none; color:var(--red); font-weight:700; padding:0; letter-spacing:.03em; }
.galaxy-credit-notes-intro{ color:var(--text-dimmer); font-size:.85rem; margin-bottom:18px; }

/* Mis datos personales (ver woocommerce/myaccount/mis-datos.php) */
.galaxy-mis-datos-intro{ color:var(--text-dimmer); font-size:.85rem; margin-bottom:14px; max-width:640px; }
.galaxy-mis-datos-group{ margin-top:28px; }
.galaxy-mis-datos-group h3{ font-size:.95rem; font-weight:800; color:var(--text); margin:0 0 10px; }
.galaxy-mis-datos-table{ width:100%; border-collapse:collapse; margin-bottom:14px; }
.galaxy-mis-datos-table th{
  text-align:left; padding:8px; font-size:.78rem; color:var(--text-dimmer);
  border-bottom:1px solid var(--line); width:220px; vertical-align:top;
}
.galaxy-mis-datos-table td{ padding:8px; border-bottom:1px solid var(--line); font-size:.85rem; color:var(--text-dim); }

/* Boton "Descargar factura" dentro del detalle de pedido (ver
   woocommerce_order_details_after_order_table en functions.php). */
.galaxy-invoice-link{ margin-top:18px; }

/* Libreta de direcciones (varias, no solo facturacion/envio fijas) — ver
   woocommerce/myaccount/address-book.php y galaxy_andorra_get_address_book()
   en functions.php. Reemplaza el resumen nativo de WooCommerce (2
   direcciones fijas), que ya no se usa. */
.galaxy-address-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:22px; }
@media (max-width:640px){ .galaxy-address-grid{ grid-template-columns:1fr; } }
.galaxy-address-card{
  background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:22px;
  display:flex; flex-direction:column; gap:10px;
}
.galaxy-address-card-badges{ display:flex; flex-wrap:wrap; gap:6px; }
.galaxy-address-badge{
  background:var(--red); color:#fff; font-size:.68rem; font-weight:700;
  padding:4px 9px; border-radius:6px; letter-spacing:.02em;
}
.galaxy-address-card h3{ margin:0; font-size:1rem; font-weight:800; color:var(--text); }
.galaxy-address-card address{ font-style:normal; color:var(--text-dim); font-size:.88rem; line-height:1.7; }
.galaxy-address-card-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:6px; }
.galaxy-address-card-actions form{ display:contents; }
.button-link{
  background:none; border:0; padding:0; color:var(--red); font-size:.82rem; font-weight:600;
  font-family:inherit; cursor:pointer;
}
.button-link:hover{ text-decoration:underline; }
.galaxy-address-delete{ color:var(--text-dimmer); }
.galaxy-address-delete:hover{ color:var(--red); }
.galaxy-address-add{ display:inline-block; }

/* "Actualizaciones del pedido": bloque nativo de WooCommerce
   (woocommerce/myaccount/view-order.php) que muestra las notas visibles
   para el cliente -las mismas que genera "woocommerce_order_status_changed"
   en functions.php cada vez que cambia el estado-, reemplazando el
   historial de estados que mostraba la tienda vieja. */
.woocommerce-OrderUpdates{
  list-style:none; margin:0 0 26px; padding:0; border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
.woocommerce-OrderUpdate{ padding:12px 16px; border-bottom:1px solid var(--line); font-size:.86rem; }
.woocommerce-OrderUpdate:last-child{ border-bottom:0; }
.woocommerce-OrderUpdate-meta{ margin:0 0 4px; color:var(--text-dimmer); font-size:.8rem; }
.woocommerce-OrderUpdate-description{ color:var(--text-dim); }
.woocommerce-OrderUpdate-description p{ margin:0; }

/* Tabla de pedidos (listado) y tabla de detalle: mismo reset de doble
   borde que ya se aplico en el carrito y el checkout (esta tabla tambien
   lleva la clase "shop_table", que le pone su propio border-bottom a
   cada celda ademas del de la fila). */
.woocommerce-orders-table.shop_table tbody td,
.woocommerce-orders-table.shop_table tbody th,
.woocommerce-table--order-details.shop_table tbody td,
.woocommerce-table--order-details.shop_table tbody th,
.woocommerce-table--order-details.shop_table tfoot td,
.woocommerce-table--order-details.shop_table tfoot th{ border:0; }
.woocommerce-orders-table tbody tr{ border-bottom:1px solid var(--line); }
.woocommerce-orders-table tbody tr:last-child{ border-bottom:0; }
.woocommerce-orders-table-cell-order-status mark{ background:none; color:inherit; padding:0; }

/* ---------- Carrito (shortcode clasico [woocommerce_cart]) ---------- */
/* Dos columnas: items a la izquierda, resumen fijo a la derecha. El
   <form class="woocommerce-cart-form"> (ver woocommerce/cart/cart.php del
   tema) envuelve tanto la tabla de productos como .cart-collaterals -asi
   el cupon y "Actualizar carrito" pueden vivir dentro de la tarjeta de
   totales y seguir siendo parte de este mismo form para el POST- pero
   visualmente no debe pesar como una columna propia: display:contents lo
   saca de la caja sin sacarlo del DOM, asi sus dos hijos (la tabla y
   collaterals) son los que arman las columnas del grid, como si el form
   no estuviera. Solo cuando el carrito tiene productos: si esta vacio,
   WooCommerce pone otros tres elementos distintos (notices-wrapper,
   wc-empty-cart-message, return-to-shop) y el mismo grid los
   descuadraba, por eso el :has() limita el grid a cuando realmente hay
   .cart-collaterals en algun lado adentro. */
body.woocommerce-cart .woocommerce-cart-form{ display:contents; }
body.woocommerce-cart .woocommerce:has(.cart-collaterals){
  display:grid; grid-template-columns:1fr 360px; gap:40px; align-items:start;
}
@media (max-width:900px){
  body.woocommerce-cart .woocommerce:has(.cart-collaterals){ grid-template-columns:1fr; }
}
/* WooCommerce siempre pone .woocommerce-notices-wrapper como PRIMER hijo
   de .woocommerce, tenga o no avisos que mostrar (si esta vacio no se ve,
   pero sigue contando como hijo del grid). Sin esta linea, el grid de
   arriba lo trataba como si fuera la columna de items, empujando el
   carrito real a la columna angosta de 360px y el resumen a una fila
   aparte. Se lo saca del flujo de columnas para que ocupe todo el ancho
   arriba, y el carrito + resumen se acomoden como corresponde debajo. */
body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper{
  grid-column:1 / -1;
}
body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper:has(.woocommerce-message, .woocommerce-error, .woocommerce-info){
  margin-bottom:8px;
}

/* La tabla de items se desarma visualmente en una grilla de columnas fijas
   (imagen / nombre / precio / cantidad / subtotal / quitar), mismo dato,
   mismo <table> semantico para accesibilidad. Grid en vez de flex+order a
   proposito: con flex+order, si el ancho de las columnas fijas (precio,
   cantidad, subtotal) mas el nombre no entraban en una sola linea, el
   flex-wrap mandaba cantidad y subtotal a una segunda fila suelta, con
   pinta de precio duplicado. El grid asigna cada celda a su columna
   explicitamente por clase, sin importar el ancho disponible ni el orden
   real de las celdas en el HTML, asi que nunca se corta a la mitad. */
:root{ --cart-grid-cols: 76px minmax(0,1fr) 100px 148px 110px 40px; }
.cart-items-col{ min-width:0; }
.woocommerce-cart-form__contents{ width:100%; border-collapse:collapse; }
.woocommerce-cart-form__contents thead{ display:block; }
.woocommerce-cart-form__contents thead tr{
  display:grid; grid-template-columns:var(--cart-grid-cols); gap:16px; align-items:center;
  padding:0 0 6px;
}
/* Selector con dos clases (".shop_table.woocommerce-cart-form__contents",
   ambas presentes en la misma tabla) a proposito: "table.shop_table thead
   th" mas abajo encadena tres elementos (table, thead, th) contra los dos
   de este selector, y en especificidad CSS la cantidad de elementos
   encadenados desempata cuando las clases son las mismas — con una sola
   clase perdia esa pulseada y le quedaba pegado el fondo gris de esa
   regla generica a cada celda del encabezado por separado (la vs que se
   ve "parchada" en vez de una sola barra pareja). */
.shop_table.woocommerce-cart-form__contents thead th{
  border:0; padding:0; background:none; font-size:.76rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; color:var(--text-dimmer);
}
.woocommerce-cart-form__contents thead th.product-price,
.woocommerce-cart-form__contents thead th.product-subtotal{ text-align:right; }
/* Un poco de aire extra entre "Precio" y "Cantidad": la columna de precio
   ya esta alineada a la derecha, asi que un padding-right corre el texto
   hacia la izquierda sin tocar el ancho de columna ni desalinear el resto
   de la fila. */
.woocommerce-cart-form__contents thead th.product-price{ padding-right:14px; }
.woocommerce-cart-form__contents tbody{ display:block; }
.woocommerce-cart-form__cart-item{
  display:grid; grid-template-columns:var(--cart-grid-cols); gap:16px; align-items:center;
  padding:20px 0; border-bottom:1px solid var(--line);
}
/* Selector con dos clases a proposito (no solo ".woocommerce-cart-form__cart-item
   td"): "table.shop_table td" (mas abajo, especificidad 0,1,2) le pone su
   propio border-bottom a CADA celda; con una sola clase esta regla empata
   en especificidad y pierde por orden, y quedaba una lineita corta debajo
   de cada celda ademas de la linea completa que separa una fila de la
   siguiente. Con dos clases (0,2,1) le gana sin importar el orden. */
.woocommerce-cart-form__cart-item.cart_item td{ border:0; padding:0; }
/* grid-row:1 explicito en las seis celdas a proposito: sin esto, el
   auto-placement de grid las reparte en dos filas implicitas (el orden
   real en el HTML es quitar-imagen-nombre-precio-cantidad-subtotal, y al
   pedirle a "quitar" la columna 6 sin fila fija, el motor la deja sola en
   la fila 1 y empuja el resto — que pide columnas 1 a 5 — a una fila 2
   nueva, descuadrando toda la fila y duplicando la altura). */
.product-remove{ grid-column:6; grid-row:1; justify-self:end; }
.product-remove .remove{
  display:flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:999px; border:1px solid var(--line); color:var(--text-dim);
  font-size:1.1rem; line-height:1; text-decoration:none; transition:border-color .2s ease, color .2s ease;
}
.product-remove .remove:hover{ border-color:var(--red); color:var(--red); }
.product-thumbnail{ grid-column:1; grid-row:1; }
.product-thumbnail img{ width:76px; height:76px; object-fit:cover; border-radius:10px; background:#fff; }
.product-name{ grid-column:2; grid-row:1; color:var(--text); font-weight:700; font-size:.92rem; min-width:0; }
.woocommerce-cart-form__cart-item .product-name a{ color:inherit; }
.product-name .remove{ display:none; } /* WooCommerce a veces duplica el remove aca segun tema padre */
.product-price{ grid-column:3; grid-row:1; color:var(--text-dim); font-size:.88rem; text-align:right; }
/* Especificidad extra (dos clases) para ganarle a ".woocommerce-cart-form__cart-item.cart_item td{padding:0}"
   de mas arriba, mismo motivo que ese comentario: incluir la clase de la
   fila ademas de la de la celda. */
.woocommerce-cart-form__cart-item .product-price{ padding-right:14px; }
.product-quantity{ grid-column:4; grid-row:1; }
.product-subtotal{ grid-column:5; grid-row:1; text-align:right; color:var(--text); font-weight:700; }

/* Debajo de 760px no entran las 6 columnas con un ancho legible, asi que
   la fila pasa a formato "ficha": imagen a la izquierda, nombre arriba a
   la derecha, boton de quitar flotando en la esquina, y precio/cantidad/
   subtotal como renglones etiqueta-valor debajo (la etiqueta sale del
   mismo data-title que WooCommerce ya trae en cada <td>, pensado
   originalmente para su propio CSS responsive que no estamos usando). */
@media (max-width:760px){
  .woocommerce-cart-form__contents thead{ display:none; }
  .woocommerce-cart-form__cart-item{
    position:relative; grid-template-columns:64px minmax(0,1fr); grid-template-rows:auto auto auto auto;
    row-gap:8px; column-gap:14px; padding-right:44px;
  }
  .product-thumbnail{ grid-column:1; grid-row:1 / 5; }
  .product-thumbnail img{ width:64px; height:64px; }
  .product-name{ grid-column:2; grid-row:1; }
  .product-remove{ position:absolute; top:20px; right:0; justify-self:auto; }
  .product-price, .product-quantity, .product-subtotal{
    grid-column:2; display:flex; align-items:center; justify-content:space-between; text-align:left;
  }
  .product-price{ grid-row:2; }
  .product-quantity{ grid-row:3; }
  .product-subtotal{ grid-row:4; }
  .product-price::before, .product-quantity::before, .product-subtotal::before{
    content:attr(data-title); color:var(--text-dimmer); font-size:.78rem; font-weight:600;
  }
}

.cart_totals{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px;
}
.cart_totals h2{ margin:0 0 18px; font-size:1.1rem; font-weight:800; color:var(--text); }

/* Cupon + "Actualizar carrito": viven adentro de esta misma tarjeta (ver
   woocommerce/cart/cart-totals.php del tema), justo debajo del titulo y
   antes de la tabla de subtotal/total, en vez de en su propia fila suelta
   pegada contra la tabla de productos como venia por defecto. */
.cart-totals-actions{
  display:flex; flex-direction:column; gap:10px;
  padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--line);
}
.cart-totals-actions .coupon{ display:flex; gap:8px; }
.cart-totals-actions .coupon #coupon_code{
  flex:1; min-width:0; background:var(--bg); border:1px solid var(--line); border-radius:8px; color:var(--text);
  padding:0 14px; font-family:inherit; font-size:.86rem; height:44px; box-sizing:border-box;
}
/* Boton secundario (contorno, no solido) para acciones que no son la
   compra en si: aplicar cupon. El unico boton rojo solido de la tarjeta
   tiene que ser "Finalizar compra". */
.cart-totals-actions .coupon button.button{
  height:44px; padding:0 20px; flex:none; background:transparent; border:1px solid var(--line-strong); color:var(--text);
  font-size:.82rem;
}
.cart-totals-actions .coupon button.button:hover{ border-color:var(--red); color:var(--red); transform:none; }
/* "Actualizar carrito" es una accion secundaria de mantenimiento (solo
   hace falta si se cambio una cantidad a mano), no una decision de
   compra: un link de texto discreto pesa menos en la jerarquia visual que
   un boton mas al lado del cupon. */
.cart-update-link{
  align-self:flex-start; background:none; border:0; padding:0; margin:0;
  color:var(--text-dimmer); font-family:inherit; font-size:.8rem; font-weight:600;
  text-decoration:underline; cursor:pointer;
}
.cart-update-link:hover{ color:var(--red); }

.cart_totals table{ width:100%; border-collapse:collapse; }
/* Mismo reset que en la tabla de "Tu pedido" del checkout: esta tabla
   tambien lleva la clase "shop_table", que le pone su propio border-bottom
   a cada th/td por separado ademas de la linea que ya pone el <tr>. */
.cart_totals table.shop_table th, .cart_totals table.shop_table td{ border:0; padding:0; }
.cart_totals tr{ display:flex; justify-content:space-between; align-items:baseline; padding:11px 0; border-bottom:1px solid var(--line); }
.cart_totals tr:last-child{ border-bottom:0; }
.cart_totals th{ font-weight:600; color:var(--text-dim); font-size:.86rem; text-align:left; }
.cart_totals td{ text-align:right; color:var(--text); font-size:.9rem; }
.cart_totals .order-total th, .cart_totals .order-total td{ font-size:1.15rem; font-weight:800; color:var(--text); }
.cart_totals .woocommerce-shipping-destination{ color:var(--text-dimmer); font-size:.8rem; }

/* ---------- Arreglos de la caja de totales del carrito ----------
   Reportado 2026-09-04. Dos cosas rotas:
   1) Las opciones de envio salian con viñeta de lista (el <ul> de
      WooCommerce trae list-style:disc y sangria del navegador, y aqui no
      habia ninguna regla que lo quitara).
   2) "Total" y el importe aparecian pegados y partidos en dos lineas: el
      importe grande MAS el "(incluye X IGI)" no caben en los 360px de la
      columna, asi que el bloque desbordaba. Ahora el aviso del IGI baja a
      su propia linea, mas pequeño. */
.cart_totals ul.woocommerce-shipping-methods{
  list-style:none; margin:0; padding:0;
}
.cart_totals ul.woocommerce-shipping-methods li{
  display:flex; align-items:center; gap:8px; margin:0 0 6px; padding:0;
}
.cart_totals ul.woocommerce-shipping-methods li:last-child{ margin-bottom:0; }
.cart_totals ul.woocommerce-shipping-methods label{
  margin:0; cursor:pointer; font-size:.88rem; color:var(--text);
}
.cart_totals ul.woocommerce-shipping-methods input[type=radio]{ margin:0; flex:none; }

/* La celda del envio necesita su propio ancho: con el texto de ayuda
   debajo, alinearla a la derecha la dejaba ilegible. */
.cart_totals .woocommerce-shipping-totals td{ text-align:left; }
.cart_totals .woocommerce-shipping-totals th{ white-space:nowrap; }
/* El hueco entre la etiqueta y el valor va como gap de la fila: poner
   padding en el <th> no funcionaba, porque ".cart_totals
   table.shop_table th{padding:0}" gana por especificidad. */
.cart_totals tr{ gap:16px; }

/* Total: importe en su linea y el IGI debajo, sin desbordar la columna. */
.cart_totals .order-total td{ text-align:right; line-height:1.3; }
.cart_totals .order-total .includes_tax{
  display:block; margin-top:3px;
  font-size:.78rem; font-weight:600; color:var(--text-dim); white-space:nowrap;
}

.wc-proceed-to-checkout{ margin-top:18px; }
.wc-proceed-to-checkout .checkout-button{ width:100%; text-align:center; }

.wc-empty-cart-message{ text-align:center; padding:40px 0 8px; }
.return-to-shop{ text-align:center; margin:20px 0 0; }

/* ---------- Checkout (shortcode clasico [woocommerce_checkout]) ----------
   Misma logica de dos columnas que el carrito: formulario a la izquierda,
   resumen fijo (pedido + metodos de pago + boton de compra) a la derecha
   en una tarjeta tipo .cart_totals. El template (woocommerce/checkout/
   form-checkout.php del tema) envuelve el formulario y el resumen en dos
   <div> propios -".checkout-form-col" / ".checkout-summary-col"- en vez
   de dejarlos como tres hermanos sueltos: con tres hermanos, para armar
   dos columnas hacia falta que el formulario abarcara dos filas de grid a
   la vez (una por cada hermano de la derecha), y CSS Grid reparte el alto
   que le falta a un item que abarca varias filas "auto" de forma pareja
   entre esas filas en vez de darselo a la que en verdad lo necesita -
   quedaba un hueco enorme entre el titulo "Tu pedido" y la tarjeta de
   abajo-. Con un wrapper por columna, cada columna es UN solo item de
   grid con su propio alto natural, sin nada que repartir. */
form.checkout.woocommerce-checkout{
  display:grid; grid-template-columns:1fr 400px; gap:40px; align-items:start;
}
.checkout-form-col{ grid-column:1; }
.checkout-summary-col{ grid-column:2; }
/* Errores de validacion del checkout: WooCommerce mete un
   ".woocommerce-NoticeGroup-checkout" como hijo suelto DIRECTO del
   <form> (ni en .checkout-form-col ni en .checkout-summary-col, no tiene
   columna asignada en el grid), asi que aparecia atravesado arriba de
   todo, empujando el resto de la pagina. Ademas repite el mismo mensaje
   como parrafo debajo de CADA campo con error, lo que además descuadraba
   los pares (un campo con error quedaba mas alto que su pareja de fila).
   Los dos se ocultan: el mensaje se muestra como toast flotante en su
   lugar (misma politica de mensajes que el resto del sitio — ver
   "checkout_error" en app.js), y el campo en si ya marca el error con
   borde rojo, sin necesidad de repetir el texto siete veces en la
   pantalla. */
.woocommerce-NoticeGroup-checkout,
.checkout-inline-error-message{ display:none; }
.form-row.woocommerce-invalid input.input-text,
.form-row.woocommerce-invalid select,
.form-row.woocommerce-invalid textarea,
.form-row.woocommerce-invalid .select2-selection{ border-color:var(--red); }
/* El heading "Tu pedido" y #order_review, adentro de .checkout-summary-col,
   tienen que leerse como una sola tarjeta -igual que ".cart_totals" en el
   carrito, donde el titulo si esta adentro de la caja-. El heading se
   pinta con el mismo fondo/borde/radio que la tarjeta pero solo redondeado
   arriba y sin borde inferior, y la tarjeta de abajo sin borde superior ni
   radio arriba: quedan pegados, se ven como una unica caja continua. */
#order_review_heading{
  margin:0; font-size:1.1rem; font-weight:800; color:var(--text);
  background:var(--surface); border:1px solid var(--line); border-bottom:0;
  border-radius:16px 16px 0 0; padding:26px 26px 4px;
}
#order_review{
  background:var(--surface); border:1px solid var(--line); border-top:0;
  border-radius:0 0 16px 16px; padding:12px 26px 26px;
}
@media (max-width:900px){
  form.checkout.woocommerce-checkout{ grid-template-columns:1fr; }
  .checkout-form-col{ grid-column:1; }
  .checkout-summary-col{ grid-column:1; }
}

/* col-1 (facturacion) y col-2 (envio a otra direccion + notas del pedido)
   dentro de #customer_details van apiladas, no lado a lado: col-2 casi
   siempre esta vacia o solo con el campo de notas, meterla en una segunda
   columna angosta se veia desbalanceado. */
.col2-set{ display:flex; flex-direction:column; gap:32px; }
.woocommerce-billing-fields h3, .woocommerce-additional-fields h3{
  margin:0 0 18px; font-size:1.1rem; font-weight:800; color:var(--text);
}

/* Sistema de columnas de los campos: WooCommerce marca cada <p class="form-row">
   con form-row-first/form-row-last (mitad y mitad, lado a lado) o
   form-row-wide (ancho completo) segun el campo. Flex con basis en vez de
   float (el mecanismo clasico de WooCommerce, que dependia de su propio
   CSS que ya no cargamos). */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-address-fields__field-wrapper{
  display:flex; flex-wrap:wrap; gap:18px 20px;
}
/* Selector con dos clases (wrapper + .form-row) a proposito: ".page-content p"
   (una regla generica de texto, mas arriba) le pone margin-bottom:16px a
   CUALQUIER parrafo dentro de .page-content, .form-row incluido — y como
   esta fila YA tiene separacion propia por el gap del flex de arriba, ese
   margen de mas se sumaba al gap y quedaba el doble de espacio entre
   campos del que se veia bien. Con dos clases le gana en especificidad a
   ".page-content p" (que solo tiene una) y se anula del todo, dejando que
   el gap sea la UNICA fuente de separacion vertical. */
.woocommerce-billing-fields__field-wrapper .form-row,
.woocommerce-additional-fields__field-wrapper .form-row,
.woocommerce-shipping-fields__field-wrapper .form-row,
.woocommerce-address-fields__field-wrapper .form-row{ margin:0; }
/* display:flex column + justify-content:flex-end (no solo flex:1 1 100%):
   algunos campos (Apartamento/piso, por ejemplo) tienen una etiqueta que
   solo es para lectores de pantalla -invisible pero SIN alto propio-,
   mientras que su compañero de fila (Direccion de la calle) si tiene
   etiqueta visible. Sin esto, el input del que no tiene etiqueta quedaba
   pegado arriba de su fila mientras el otro input, empujado por su
   etiqueta, quedaba mas abajo — dos inputs de la misma fila a distinta
   altura. Alineando el contenido de cada fila contra abajo, los dos
   inputs terminan siempre a la misma altura sin tocar el marcado de
   accesibilidad (la etiqueta invisible se sigue leyendo igual). */
.form-row{ flex:1 1 100%; display:flex; flex-direction:column; justify-content:flex-end; }
.form-row-first, .form-row-last{ flex:1 1 calc(50% - 10px); }
.form-row-wide, .form-row.notes{ flex:1 1 100%; }
@media (max-width:520px){
  .form-row-first, .form-row-last{ flex:1 1 100%; }
}
.form-row .required{ color:var(--red); text-decoration:none; }
.form-row .optional{ color:var(--text-dimmer); font-weight:400; }
.form-row textarea{ width:100%; resize:vertical; min-height:70px; }
.form-row .woocommerce-input-wrapper{ display:block; width:100%; }

/* Select2 (pais/provincia): sustituye el <select> nativo por su propio
   markup (el select original queda oculto), asi que hay que vestir sus
   clases en vez de las de un <select> comun. El panel desplegable
   (.select2-dropdown) se cuelga directo de <body>, fuera de la tarjeta,
   por eso sus reglas van sueltas y no anidadas bajo ningun contenedor. */
.select2-container{ width:100% !important; }
.select2-container .select2-selection--single{
  height:44px; background:var(--surface); border:1px solid var(--line); border-radius:8px;
  display:flex; align-items:center; padding:0 12px;
}
.select2-container .select2-selection__rendered{ color:var(--text); font-size:.9rem; padding:0; line-height:1.3; }
.select2-container .select2-selection__arrow{ height:42px; right:8px; }
.select2-container .select2-selection__arrow b{ border-color:var(--text-dimmer) transparent transparent transparent; }
.select2-container--open .select2-selection__arrow b{ border-color:transparent transparent var(--text-dimmer) transparent; }
.select2-dropdown{
  background:var(--surface); border:1px solid var(--line); border-radius:8px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.35);
}
.select2-search--dropdown{ padding:8px; background:var(--surface); }
.select2-search--dropdown .select2-search__field{
  background:var(--bg); border:1px solid var(--line); border-radius:6px; color:var(--text);
  padding:8px 10px; font-family:inherit; font-size:.86rem; outline:0;
}
.select2-results__option{ color:var(--text-dim); font-size:.88rem; padding:9px 12px; }
.select2-results__option--highlighted{ background:var(--red) !important; color:#fff !important; }
.select2-results__option[aria-selected="true"]{ background:var(--hover-tint); }

/* Tabla "Tu pedido" dentro del resumen: mismo look que .cart_totals ya
   definido para el carrito (filas flex con borde inferior, total mas
   grande), reutilizando esas reglas via el mismo selector table.shop_table
   ya que #order_review no lleva la clase cart_totals. */
.woocommerce-checkout-review-order-table{ width:100%; border-collapse:collapse; margin:0 0 20px; }
.woocommerce-checkout-review-order-table thead{ display:none; }
/* "table.shop_table th, table.shop_table td" (mas arriba) le pone su
   propio border-bottom a CADA celda; esta tabla tambien lleva la clase
   "shop_table", asi que sin este reset quedaba una linea corta por celda
   ADEMAS de la linea completa de la fila (mismo bug que se arreglo antes
   en la tabla del carrito, ver comentario ahi). Selector con dos clases
   para ganarle en especificidad. */
.woocommerce-checkout-review-order-table.shop_table tbody td,
.woocommerce-checkout-review-order-table.shop_table tfoot th,
.woocommerce-checkout-review-order-table.shop_table tfoot td{ border:0; padding:0; }
.woocommerce-checkout-review-order-table tbody tr{
  display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--line);
}
.woocommerce-checkout-review-order-table tbody td.product-name{ color:var(--text-dim); font-size:.86rem; }
.woocommerce-checkout-review-order-table tbody td.product-name .product-quantity{ color:var(--text-dimmer); font-weight:400; }
.woocommerce-checkout-review-order-table tbody td.product-total{ color:var(--text); font-weight:700; font-size:.86rem; text-align:right; flex:none; }
.woocommerce-checkout-review-order-table tfoot tr{
  display:flex; justify-content:space-between; align-items:baseline; padding:11px 0; border-bottom:1px solid var(--line);
}
.woocommerce-checkout-review-order-table tfoot tr:last-child{ border-bottom:0; }
.woocommerce-checkout-review-order-table tfoot th{ font-weight:600; color:var(--text-dim); font-size:.86rem; text-align:left; }
.woocommerce-checkout-review-order-table tfoot td{ text-align:right; color:var(--text); font-size:.9rem; }
.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout-review-order-table tfoot tr.order-total td{ font-size:1.15rem; font-weight:800; color:var(--text); }

/* Metodos de pago: cada uno es un <li> con un radio + titulo, y al
   marcarlo despliega su propio ".payment_box" (instrucciones de
   transferencia, redireccion a pasarela, etc.). */
.wc_payment_methods{ list-style:none; margin:0 0 20px; padding:0; }
.wc_payment_methods li.wc_payment_method{
  border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:10px;
}
.wc_payment_methods li.wc_payment_method:has(input:checked){ border-color:var(--red); }
.payment_method_label, .wc_payment_method > label{
  display:flex; align-items:center; gap:10px; cursor:pointer; font-weight:700; font-size:.9rem; color:var(--text);
}
.wc_payment_method input.input-radio{ accent-color:var(--red); width:16px; height:16px; flex:none; }
.wc_payment_method img{ height:20px; margin-left:auto; }
.payment_box{
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
  color:var(--text-dim); font-size:.85rem; line-height:1.6;
}
.payment_box p{ margin:0 0 8px; }
.payment_box ul.wc_bacs_bank_details{ list-style:none; margin:8px 0 0; padding:0; }
.payment_box ul.wc_bacs_bank_details li{ padding:2px 0; }
.payment_box .wc_bacs_bank_details_account_name{ font-weight:700; color:var(--text); }

.woocommerce-terms-and-conditions-wrapper{ margin:16px 0; font-size:.8rem; color:var(--text-dimmer); line-height:1.6; }
.woocommerce-terms-and-conditions-wrapper a{ color:var(--red); }
.form-row.place-order{ margin:0; }
.form-row.place-order .button{ width:100%; }
#order_review .woocommerce-info{ margin-bottom:0; }

/* ---------- Pagina de "Pedido recibido" ---------- */
.woocommerce-order{ max-width:760px; }
.woocommerce-order .woocommerce-thankyou-order-received{
  font-size:1.05rem; font-weight:700; color:var(--text); margin:0 0 20px;
}
.woocommerce-order-overview{
  list-style:none; display:flex; flex-wrap:wrap; gap:18px; margin:0 0 28px; padding:20px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
}
.woocommerce-order-overview li{ flex:1 1 160px; font-size:.85rem; color:var(--text-dim); }
.woocommerce-order-overview li strong{ display:block; margin-top:2px; color:var(--text); font-size:.95rem; }
.woocommerce-order-details h2, .woocommerce-order-downloads h2, .woocommerce-customer-details h2{
  margin:0 0 16px; font-size:1.05rem; font-weight:800; color:var(--text);
}

/* ---------- Mi cuenta: login / registro ----------
   La tienda vieja (PrestaShop, themes/warehouse/templates/customer/
   authentication.tpl) no mostraba login y registro juntos: mostraba uno
   solo, con un link abajo que revelaba el otro en su lugar. Se replica
   con dos paneles en el mismo <div id="accountAuth"> (ver woocommerce/
   myaccount/form-login.php del tema) donde solo uno tiene la clase
   "is-active" a la vez — el toggle esta en app.js. Ancho acotado y
   centrado a proposito: ".page-content:has(.woocommerce)" (mas arriba)
   le saca el max-width angosto a cualquier pagina de WooCommerce para
   que carrito y checkout usen todo el ancho, pero un formulario corto
   estirado a toda la pantalla se ve pobre. */
.account-auth{ max-width:440px; margin:0 auto; }
.account-auth-pane{ display:none; }
.account-auth-pane.is-active{ display:block; }
.account-auth-pane{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:30px;
}
.account-auth-pane h2{ margin:0 0 20px; font-size:1.2rem; font-weight:800; color:var(--text); }
.account-auth-switch{ margin-top:6px; }
.account-auth-switch hr{ border:0; border-top:1px solid var(--line); margin:20px 0; }
.account-auth-toggle{ color:var(--red); font-weight:600; font-size:.88rem; }
.account-auth-toggle:hover{ text-decoration:underline; }

/* Campos extra del registro (tratamiento, checkboxes de consentimiento),
   calcados de la tienda vieja. */
.galaxy-radio-group{ display:flex; gap:20px; }
.galaxy-radio-group label{ display:flex; align-items:center; gap:6px; font-size:.88rem; color:var(--text-dim); cursor:pointer; }
.galaxy-radio-group input[type="radio"]{ accent-color:var(--red); width:16px; height:16px; }
.register-checkbox{ display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.register-checkbox label{ display:flex; align-items:flex-start; gap:8px; font-size:.85rem; color:var(--text-dim); cursor:pointer; }
.register-checkbox input[type="checkbox"]{ accent-color:var(--red); width:16px; height:16px; flex:none; margin-top:2px; }
.register-checkbox-hint{ margin-left:24px; font-size:.76rem; color:var(--text-dimmer); line-height:1.5; }

.woocommerce-form-row.form-row{ margin-bottom:4px; }
.woocommerce-form-login__rememberme{
  display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--text-dim); cursor:pointer; margin-bottom:16px;
}
.woocommerce-form-login__rememberme input[type="checkbox"]{ accent-color:var(--red); width:16px; height:16px; }
.woocommerce-form-login__submit, .woocommerce-form-register__submit{ width:100%; }
.woocommerce-LostPassword{ margin:14px 0 0; font-size:.85rem; }
.woocommerce-LostPassword a{ color:var(--red); }

/* Boton de mostrar/ocultar contraseña: WooCommerce lo agrega por JS sin
   ningun icono propio (dependia del sprite de su hoja de estilos, que no
   cargamos). Un ojo dibujado en CSS puro via mask, mismo color que el
   resto de iconos del sitio; tachado cuando esta en modo "mostrar
   contraseña" (clase .display-password que ya alterna el mismo JS). */
.password-input{ position:relative; }
.password-input input{ padding-right:42px !important; width:100%; }
.show-password-input{
  position:absolute; top:0; right:0; width:44px; height:100%; border:0; background:transparent;
  cursor:pointer; padding:0;
}
.show-password-input::before{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:19px; height:19px; background:var(--text-dimmer);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
}
.show-password-input:hover::before{ background:var(--text); }
.show-password-input.display-password::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a21.4 21.4 0 0 1 5.06-5.94M9.9 4.24A10.6 10.6 0 0 1 12 5c7 0 11 7 11 7a21.5 21.5 0 0 1-2.16 3.19M1 1l22 22'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a21.4 21.4 0 0 1 5.06-5.94M9.9 4.24A10.6 10.6 0 0 1 12 5c7 0 11 7 11 7a21.5 21.5 0 0 1-2.16 3.19M1 1l22 22'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Vista previa del carrito (panel lateral) ---------- */
.cart-drawer-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:300;
  opacity:0; transition:opacity .25s ease;
}
.cart-drawer-overlay.is-open{ opacity:1; }
body.cart-drawer-locked{ overflow:hidden; }

.cart-drawer{
  position:fixed; top:0; right:0; height:100%; width:min(400px, 100vw);
  background:var(--bg); border-left:1px solid var(--line); z-index:301;
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .3s ease;
}
.cart-drawer.is-open{ transform:translateX(0); }

.cart-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px; border-bottom:1px solid var(--line); flex:none;
}
.cart-drawer-head h2{ margin:0; font-size:1.1rem; font-weight:800; color:var(--text); }
.cart-drawer-close{
  width:34px; height:34px; border-radius:999px; border:1px solid var(--line); background:transparent;
  color:var(--text-dim); font-size:1.3rem; line-height:1; cursor:pointer; transition:border-color .2s ease, color .2s ease;
}
.cart-drawer-close:hover{ border-color:var(--red); color:var(--red); }

.cart-drawer-body{ flex:1; overflow-y:auto; padding:20px 22px; display:flex; flex-direction:column; }
.cart-drawer-empty{ color:var(--text-dim); text-align:center; margin:40px 0; }

.cart-drawer-items{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.cart-drawer-item{ display:flex; align-items:center; gap:12px; }
.cart-drawer-item-img{ flex:none; }
.cart-drawer-item-img img{ width:56px; height:56px; object-fit:cover; border-radius:8px; background:#fff; }
.cart-drawer-item-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.cart-drawer-item-name{
  color:var(--text); font-weight:700; font-size:.85rem; text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cart-drawer-item-qty{ color:var(--text-dim); font-size:.78rem; }
.cart-drawer-item-remove{
  flex:none; width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  border-radius:999px; color:var(--text-dimmer); font-size:1rem; text-decoration:none; transition:color .2s ease;
}
.cart-drawer-item-remove:hover{ color:var(--red); }
.cart-drawer-item-remove.loading{ opacity:.4; pointer-events:none; }

.cart-drawer-more{
  display:block; text-align:center; margin-top:14px; padding:10px 0;
  color:var(--red); font-size:.8rem; font-weight:700; text-decoration:none;
  border:1px dashed var(--red); border-radius:8px; background:var(--hover-tint);
  transition:background .2s ease, border-color .2s ease;
}
.cart-drawer-more:hover{ background:var(--red); color:#fff; border-color:var(--red); border-style:solid; }

.cart-drawer-subtotal{
  display:flex; justify-content:space-between; align-items:baseline; margin-top:20px; padding-top:18px;
  border-top:1px solid var(--line); color:var(--text); font-size:.95rem;
}
.cart-drawer-subtotal strong{ font-size:1.2rem; }

.cart-drawer-actions{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.cart-drawer-actions .button{
  height:48px; box-sizing:border-box; display:flex; align-items:center; justify-content:center;
  border-radius:999px; font-weight:700; font-size:.86rem; text-decoration:none; transition:background .2s ease, border-color .2s ease;
}
/* Anidadas bajo .cart-drawer-actions (2 clases) a proposito: le gana en
   especificidad al boton rojo generico (a.button, 1 clase + elemento),
   asi que "Ver carrito" mantiene su look de contorno sin importar en que
   pagina este el panel, sin necesitar :not() ni depender de la clase
   "woocommerce" del body. */
.cart-drawer-actions .cart-drawer-view{ background:transparent; border:1px solid var(--line-strong); color:var(--text); }
.cart-drawer-actions .cart-drawer-view:hover{ background:transparent; border-color:var(--red); color:var(--red); }
.cart-drawer-actions .cart-drawer-checkout{ background:var(--red); color:#fff; border:1px solid var(--red); }
.cart-drawer-actions .cart-drawer-checkout:hover{ background:var(--red-hover); }

/* ---------- Mensaje flotante (exito / error) ---------- */
/* position:fixed a proposito: no participa del flujo del documento, asi
   que nunca empuja contenido ni cambia el scroll, a diferencia de los
   avisos clasicos de WooCommerce que reemplaza. */
.site-toast{
  position:fixed; left:50%; bottom:28px; z-index:400;
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--red);
  border-radius:10px; padding:13px 16px 13px 20px; color:var(--text); font-size:.86rem; font-weight:600;
  box-shadow:0 14px 32px rgba(0,0,0,.35);
  transform:translate(-50%, 16px); opacity:0; pointer-events:none; max-width:min(90vw, 420px);
  transition:opacity .25s ease, transform .25s ease;
}
.site-toast.is-visible{ transform:translate(-50%, 0); opacity:1; pointer-events:auto; }
.site-toast::before{
  content:""; width:8px; height:8px; border-radius:999px; background:var(--red); flex:none;
}
.site-toast--success{ border-left-color:#1eb45a; }
.site-toast--success::before{ background:#1eb45a; }
.site-toast--error{ border-left-color:var(--red); }
.site-toast--error::before{ background:var(--red); }
.site-toast-text{ flex:1; line-height:1.4; }
.site-toast-close{
  flex:none; width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  border:0; background:transparent; color:var(--text-dimmer); font-size:1.15rem; line-height:1;
  cursor:pointer; border-radius:999px; transition:color .2s ease, background .2s ease;
}
.site-toast-close:hover{ color:var(--text); background:var(--hover-tint); }
@media (max-width:480px){
  .site-toast{ left:16px; right:16px; bottom:20px; max-width:none; transform:translateY(16px); }
  .site-toast.is-visible{ transform:translateY(0); }
}

/* ---------- «Acaban de comprar esto» (inc/compras-recientes.php) ---------- */
/* Misma familia que .site-toast, pero abajo a la izquierda: a la derecha esta
   el chat del agente. */
.compra-reciente{
  position:fixed; left:clamp(14px,3vw,28px); bottom:clamp(14px,3vw,28px); z-index:390;
  display:flex; align-items:flex-start; gap:6px;
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--red);
  border-radius:10px; padding:10px 8px 10px 10px; max-width:340px;
  box-shadow:0 14px 32px rgba(0,0,0,.35);
  transform:translateY(16px); opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.compra-reciente.is-visible{ transform:translateY(0); opacity:1; pointer-events:auto; }
.compra-reciente-enlace{ display:flex; align-items:center; gap:12px; color:var(--text); text-decoration:none; min-width:0; }
.compra-reciente-foto{ width:56px; height:56px; flex:none; object-fit:contain; background:#fff; border-radius:8px; }
.compra-reciente-texto{ display:flex; flex-direction:column; gap:2px; min-width:0; font-size:.8rem; line-height:1.35; }
.compra-reciente-quien{ color:var(--text-dim); }
.compra-reciente-producto{
  color:var(--text); font-weight:600;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.compra-reciente-enlace:hover .compra-reciente-producto{ color:var(--red); }
.compra-reciente-cuando{ color:var(--text-dimmer); font-size:.75rem; }
.compra-reciente-cerrar{
  flex:none; width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  border:0; background:transparent; color:var(--text-dimmer); font-size:1.15rem; line-height:1;
  cursor:pointer; border-radius:999px; transition:color .2s ease, background .2s ease;
}
.compra-reciente-cerrar:hover{ color:var(--text); background:var(--hover-tint); }
.compra-reciente-cerrar:focus-visible, .compra-reciente-enlace:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
@media (max-width:480px){
  /* Deja libre la esquina derecha para el boton del chat. */
  .compra-reciente{ left:12px; right:84px; bottom:16px; max-width:none; }
}
@media (prefers-reduced-motion: reduce){
  .compra-reciente{ transition:none; transform:none; }
}

/* ---------- Página de Contacto ---------- */
/* Ver page-contacto.php: formulario a la izquierda, datos de la tienda +
   mapa a la derecha (misma logica de columnas que checkout: la columna
   angosta queda fija con position:sticky mientras la larga scrollea). */
.contact-layout{ display:grid; grid-template-columns:1fr 380px; gap:32px; align-items:start; }
@media (max-width:900px){ .contact-layout{ grid-template-columns:1fr; } }
/* min-width:0 en las dos tarjetas y en el desplegable (2026-09-08).
   Un elemento de grid trae min-width:auto, o sea que no puede encoger por
   debajo del ancho minimo de su contenido; y un <select> exige de minimo
   lo que mida su opcion mas larga ("Selecciona un motivo…"). Entre eso y
   los 30px de padding, la tarjeta pedia 375px dentro de una columna de
   296: la pagina de contacto se desplazaba 47px en horizontal en un movil
   de 360px, el peor desborde de toda la web. */
.contact-layout > *{ min-width:0; }
.contact-form select.input-text,
.contact-form .input-text{ min-width:0; max-width:100%; }
@media (max-width:520px){
  /* 30px de margen interior a cada lado se comen un sexto de la pantalla. */
  .contact-form-card, .contact-info-card{ padding:22px 18px; }
}

.contact-form-card, .contact-info-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:30px;
}
.contact-info-card{ position:sticky; top:24px; }
@media (max-width:900px){ .contact-info-card{ position:static; } }
.contact-form-card h3, .contact-info-card h3{ margin:0 0 10px; font-size:1.1rem; font-weight:800; color:var(--text); }
.contact-form-intro{ color:var(--text-dim); font-size:.88rem; line-height:1.6; margin:0 0 22px; }

.contact-form .form-row{ margin-bottom:16px; }
.contact-form label{ color:var(--text-dim); font-size:.85rem; margin-bottom:6px; display:block; }
.contact-form select.input-text{ width:100%; }
.contact-form textarea.input-text{ width:100%; resize:vertical; }
.contact-form input[type="file"]{ color:var(--text-dim); font-size:.85rem; }
/* Honeypot: existe en el HTML para que los bots lo completen, pero un
   humano nunca deberia verlo ni poder llegar ahi con el teclado. */
.contact-honeypot{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

.contact-info-list{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:14px; }
.contact-info-list li{ display:flex; align-items:flex-start; gap:10px; color:var(--text-dim); font-size:.9rem; line-height:1.5; }
.contact-info-list svg{ width:18px; height:18px; flex:none; margin-top:2px; color:var(--red); }
.contact-info-list a{ color:var(--text-dim); }
.contact-info-list a:hover{ color:var(--red); }

.contact-map{ border-radius:12px; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; }
.contact-map iframe{ width:100%; height:100%; border:0; display:block; }

/* ---------- Página de Preguntas frecuentes ---------- */
/* Mismo lenguaje visual que el sidebar de Mi cuenta (menu vertical fijo +
   panel de contenido a la derecha), ver page-faq.php. Las categorias son
   pestañas (role="tab") que muestran/ocultan su panel; cada pregunta
   dentro del panel activo es un acordeon independiente. */
.faq-layout{ display:grid; grid-template-columns:280px 1fr; gap:28px; align-items:start; }
@media (max-width:820px){ .faq-layout{ grid-template-columns:1fr; } }

.faq-categories{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:10px;
  position:sticky; top:24px;
}
@media (max-width:820px){
  .faq-categories{ position:static; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}
.faq-categories ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
@media (max-width:820px){ .faq-categories ul{ flex-direction:row; } }
.faq-category-btn{
  display:block; width:100%; text-align:left; padding:12px 14px; border-radius:10px; border:0;
  background:none; color:var(--text-dim); font-size:.88rem; font-weight:600; font-family:inherit;
  cursor:pointer; transition:background .15s ease, color .15s ease;
}
@media (max-width:820px){ .faq-category-btn{ white-space:nowrap; width:auto; } }
.faq-category-btn:hover{ background:var(--bg); color:var(--text); }
.faq-category-btn.is-active{ background:var(--red); color:#fff; }

.faq-panels{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:10px 26px;
}
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item:last-child{ border-bottom:0; }
.faq-question{ margin:0; }
.faq-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;
  padding:18px 4px; background:none; border:0; text-align:left; cursor:pointer; font-family:inherit;
  color:var(--text); font-size:.95rem; font-weight:700;
}
.faq-toggle svg{ width:18px; height:18px; flex:none; color:var(--text-dimmer); transition:transform .2s ease; }
.faq-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); color:var(--red); }
.faq-answer{ padding:0 4px 20px; color:var(--text-dim); font-size:.88rem; line-height:1.7; }
.faq-answer p{ margin:0 0 12px; }
.faq-answer p:last-child{ margin-bottom:0; }

/* ---------- Blog (listado) ---------- */
/* Misma logica visual que .p-card (tarjeta de producto) pero con su
   propia clase: el blog no tiene precio ni boton de compra, y la imagen
   de portada es panoramica (16/9) en vez del 4/5 vertical de producto. */
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:1080px){ .post-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .post-grid{ grid-template-columns:1fr; } }

.post-card{
  border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.post-card:hover{ border-color:var(--line-strong); transform:translateY(-3px); box-shadow:0 22px 44px -24px rgba(0,0,0,0.35); }
.post-card-img{ display:block; aspect-ratio:16/9; overflow:hidden; background:var(--bg); }
.post-card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.post-card:hover .post-card-img img{ transform:scale(1.03); }
.post-card-img-placeholder{ display:block; width:100%; height:100%; background:var(--bg); }
.post-card-body{ padding:18px 20px 22px; }
.post-card-body .cat{ font-size:.7rem; color:var(--text-dimmer); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
.post-card-body h3{ margin:8px 0 8px; font-size:1.02rem; font-weight:700; line-height:1.35; color:var(--text); }
.post-card-body h3 a{ color:inherit; }
.post-card-excerpt{ color:var(--text-dim); font-size:.85rem; line-height:1.6; margin:0 0 12px; }
.post-card-date{ color:var(--text-dimmer); font-size:.78rem; }

/* grid-column:1/-1 a proposito: dentro de .product-grid (grid de 3
   columnas, ver mas abajo) este nav es un item mas del grid — sin esto
   solo ocupa la primera columna y el centrado queda pegado a la
   izquierda de toda la fila (bug real reportado por el cliente). En el
   blog (donde tambien se usa esta misma clase) no hace daño: el post-grid
   ahi no es su padre directo. */
.post-pagination{ display:flex; justify-content:center; gap:8px; margin-top:36px; grid-column:1/-1; }
.post-pagination span, .post-pagination a{
  display:flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 10px;
  border-radius:8px; border:1px solid var(--line); color:var(--text-dim); font-size:.88rem; font-weight:600;
}
.post-pagination a:hover{ border-color:var(--red); color:var(--red); }
.post-pagination span.current{ background:var(--red); border-color:var(--red); color:#fff; }

/* ---------- Blog (entrada individual) ---------- */
.post-single{ max-width:760px; }
.post-back{ display:inline-block; color:var(--text-dimmer); font-size:.85rem; font-weight:600; margin-bottom:20px; }
.post-back:hover{ color:var(--red); }
.post-single .cat{ display:inline-block; font-size:.72rem; color:var(--red); text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-bottom:10px; }
.post-single h1{ margin:0 0 14px; font-size:clamp(1.5rem,3vw,2.1rem); font-weight:800; color:var(--text); line-height:1.25; }
.post-single-meta{ color:var(--text-dimmer); font-size:.85rem; margin-bottom:26px; }
.post-single-cover{ border-radius:16px; overflow:hidden; margin-bottom:30px; aspect-ratio:16/9; }
.post-single-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-single-content{ color:var(--text-dim); font-size:.98rem; line-height:1.8; }
.post-single-content h2, .post-single-content h3{ color:var(--text); font-weight:800; margin:32px 0 14px; }
.post-single-content p{ margin:0 0 18px; }
.post-single-content ul, .post-single-content ol{ margin:0 0 18px; padding-left:22px; }
.post-single-content li{ margin-bottom:8px; }
.post-single-content img{ max-width:100%; height:auto; border-radius:12px; margin:8px 0 18px; }
.post-single-content a{ color:var(--red); }
.post-single-content a:hover{ text-decoration:underline; }
.post-single-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:34px; padding-top:24px; border-top:1px solid var(--line); }
.post-tag{
  background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:6px 14px;
  font-size:.78rem; color:var(--text-dim); font-weight:600;
}

/* ---------- Segunda Mano (landing) ---------- */
.second-hand-intro{ max-width:720px; color:var(--text-dim); font-size:.95rem; line-height:1.7; margin-bottom:32px; }
.second-hand-intro p{ margin:0 0 14px; }

.second-hand-scale{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; margin-bottom:36px;
}
@media (max-width:900px){ .second-hand-scale{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){ .second-hand-scale{ grid-template-columns:1fr; } }
.second-hand-scale-item{
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px;
  display:flex; gap:12px; align-items:flex-start;
}
.second-hand-scale-num{
  display:flex; align-items:center; justify-content:center; width:32px; height:32px; flex:none;
  border-radius:999px; background:var(--red); color:#fff; font-weight:800; font-size:.95rem;
}
.second-hand-scale-item strong{ display:block; color:var(--text); font-size:.9rem; margin-bottom:4px; }
.second-hand-scale-item p{ margin:0; color:var(--text-dimmer); font-size:.78rem; line-height:1.5; }

.second-hand-cta{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:28px 30px;
  margin-bottom:40px; text-align:center;
}
.second-hand-cta h3{ margin:0 0 8px; color:var(--text); font-size:1.1rem; }
.second-hand-cta p{ margin:0 0 18px; color:var(--text-dim); font-size:.9rem; }

.second-hand-products-title{ font-size:1.1rem; font-weight:800; color:var(--text); margin:0 0 18px; }

/* ---------- Comparador de productos (desactivado por defecto, ver
   GALAXY_ANDORRA_COMPARE_ENABLED en functions.php) ---------- */
.p-card .p-compare-btn{
  position:absolute; top:48px; right:10px; z-index:1;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:999px; border:0; background:rgba(255,255,255,0.92); color:#8a8686;
  cursor:pointer; transition:color .2s ease, transform .15s ease;
}
.p-card .p-compare-btn svg{ width:16px; height:16px; }
.p-card .p-compare-btn:hover{ color:var(--red); transform:scale(1.08); }
.p-card .p-compare-btn.is-active{ color:var(--red); background:#fff; }

/* ---------- Comparador de productos (rediseño 2026-08-31) ----------
   Sigue siendo un <table> real (accesibilidad + alineacion de filas
   entre columnas, que es lo que hace que un comparador sirva de algo),
   pero con el mismo lenguaje visual que el resto del sitio: fondo blanco
   fijo en las fotos (igual que .p-img/.p-single-media-main), header
   pegajoso al hacer scroll vertical Y horizontal (para tablas largas de
   specs con 4 columnas angostas), zebra striping para que se pueda
   seguir una fila con la vista, y boton rojo primario consistente con
   el resto del sitio en la fila de "Añadir al carrito". */
.compare-empty{
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
  padding:64px 24px; color:var(--text-dim);
}
.compare-empty svg{ color:var(--text-dimmer); }
.compare-empty p{ margin:0; font-size:1.05rem; font-weight:700; color:var(--text); }
.compare-empty span{ font-size:.88rem; max-width:360px; }
.compare-empty .button{ margin-top:6px; }

/* Sin scroll vertical propio (pedido 2026-08-31: "no hace falta un
   cuadro con scroll propio, puede estar fuera del cuadro") — la pagina
   entera scrollea, no una caja aparte. Overflow-x se mantiene SOLO para
   pantallas angostas con las 4 columnas de producto (ahi si hace falta
   poder correr la vista a los costados). */
.compare-table-wrap{
  overflow-x:auto; border:1px solid var(--line); border-radius:16px;
}
table.compare-table{ width:100%; border-collapse:separate; border-spacing:0; min-width:640px; }
table.compare-table th, table.compare-table td{
  padding:16px 18px; text-align:left; vertical-align:top; font-size:.88rem;
  border-bottom:1px solid var(--line);
}
table.compare-table tbody tr:nth-child(odd) td{ background:var(--hover-tint); }
table.compare-table td{ color:var(--text-dim); }

/* Columna de etiquetas (izquierda) pegajosa en el eje horizontal, header
   de productos pegajoso en el eje vertical — asi en una tabla larga de
   specs siempre se sabe que fila/columna se esta mirando. */
.compare-row-label{
  position:sticky; left:0; z-index:2; background:var(--surface);
  color:var(--text-dimmer); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  width:160px; min-width:160px;
}
/* SIN sticky vertical (pedido 2026-08-31: sacar la caja con scroll
   propio) — con toda la pagina scrolleando, un header de tabla pegajoso
   terminaba tapando a medias las filas de abajo (Marca/Categoria), se
   veia roto. El header de columnas simplemente scrollea con el resto,
   como cualquier tabla normal. */
table.compare-table thead th{ background:var(--surface); border-bottom:2px solid var(--red); }

.compare-product-header{ text-align:center; min-width:180px; position:relative; padding-top:38px; }
.compare-remove{
  position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--line); background:var(--bg); color:var(--text-dimmer);
  font-size:1rem; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:border-color .2s ease, color .2s ease;
}
.compare-remove:hover{ border-color:var(--red); color:var(--red); }
.compare-product-img{
  display:block; aspect-ratio:1/1; max-width:150px; margin:0 auto 12px; border-radius:12px; overflow:hidden;
  background:#fff; /* mismo fondo blanco fijo que el resto de fotos de producto del sitio */
}
.compare-product-img img{ width:100%; height:100%; object-fit:contain; padding:8px; }
.compare-product-name{ display:block; color:var(--text); font-weight:700; font-size:.9rem; line-height:1.3; margin-bottom:6px; }
.compare-product-name:hover{ color:var(--red); }
.compare-product-price{ display:block; color:var(--text); font-weight:700; font-size:.95rem; }
.compare-product-price ins{ text-decoration:none; color:var(--red); }
.compare-product-price del{ color:var(--text-dimmer); font-weight:500; font-size:.82rem; }

.compare-stock{ display:inline-block; padding:4px 10px; border-radius:999px; font-size:.76rem; font-weight:700; }
.compare-stock.in{ background:rgba(60,180,100,.14); color:#3cb464; }
.compare-stock.out{ background:rgba(200,30,30,.14); color:var(--red); }

.compare-specs-divider th{
  background:var(--surface); color:var(--text); font-size:.78rem; padding-top:20px; border-bottom:1px solid var(--line);
}
.compare-cta-row td{ text-align:center; padding-top:20px; padding-bottom:20px; }
.compare-cta{ width:100%; }

/* ---------- Aviso de cookies ---------- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--surface); border-top:1px solid var(--line);
  padding:18px clamp(18px,4vw,40px); box-shadow:0 -10px 30px -14px rgba(0,0,0,0.35);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px;
}
.cookie-banner p{ margin:0; color:var(--text-dim); font-size:.85rem; line-height:1.6; max-width:760px; }
.cookie-banner a{ color:var(--red); }
.cookie-banner a:hover{ text-decoration:underline; }
.cookie-banner .button{ flex:none; height:42px; padding:0 26px; }
@media (max-width:640px){
  .cookie-banner{ flex-direction:column; text-align:center; }
}
/* En un telefono este aviso ocupaba 206-228px, un cuarto de la pantalla,
   encima del contenido y hasta que lo cierren (medido 2026-09-08). Se
   compacta: menos margen, texto mas justo y el detalle legal en una linea
   secundaria mas pequeña, con el boton siempre a la vista sin scroll. */
@media (max-width:640px){
  .cookie-banner{ padding:14px 16px; gap:12px; }
  .cookie-banner p{ font-size:.78rem; line-height:1.45; }
  .cookie-banner .button{ width:100%; height:44px; }
}

/* Aviso con consentimiento real (desde 2026-09-14): texto y opciones a la
   izquierda, botones a la derecha. "Rechazar" y "Aceptar" tienen el mismo
   peso visual a proposito: la ley pide que rechazar sea igual de facil. */
.cookie-banner[hidden]{ display:none !important; }
.cookie-banner-texto{ flex:1 1 520px; max-width:760px; display:grid; gap:12px; }
.cookie-banner-opciones{ display:grid; gap:8px; }
.cookie-banner-opciones[hidden]{ display:none; }
.cookie-opcion{ display:flex; gap:10px; align-items:flex-start; font-size:.82rem; line-height:1.45; color:var(--text-dim); cursor:pointer; }
.cookie-opcion strong{ color:var(--text); font-weight:600; }
.cookie-opcion input{ margin-top:3px; accent-color:var(--red); width:16px; height:16px; flex:none; }
.cookie-opcion input:disabled{ cursor:not-allowed; }
.cookie-banner-acciones{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.cookie-banner-acciones .button[hidden]{ display:none; }
.cookie-banner .button.button-secondary{ background:transparent; color:var(--text); border:1px solid var(--line); }
.cookie-banner .button.button-secondary:hover{ background:transparent; border-color:var(--text-dim); }
@media (max-width:640px){
  .cookie-banner-texto{ flex-basis:auto; text-align:left; }
  .cookie-banner-acciones{ display:grid; grid-template-columns:1fr 1fr; width:100%; gap:8px; }
  .cookie-banner-acciones [data-cookies="configurar"],
  .cookie-banner-acciones [data-cookies="guardar"]{ grid-column:1 / -1; order:3; }
  .cookie-banner-acciones .button{ height:42px; padding:0 12px; }
}

/* ---------- Marcas / Fabricantes ---------- */
.page-lead{ margin:6px 0 0; color:var(--text-dim); font-size:.92rem; max-width:640px; }

.brands-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:16px;
}
.brand-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:28px 16px; text-align:center; transition:border-color .2s ease, transform .15s ease;
}
.brand-card:hover{ border-color:var(--red); transform:translateY(-2px); }
.brand-card-name{ color:var(--text); font-weight:800; font-size:1rem; }
.brand-card-count{ color:var(--text-dimmer); font-size:.78rem; }

/* ---------- Copy SEO de categoria (archive-product.php) ----------
   Contenido real migrado de la tienda vieja (campo "description" del
   termino de categoria) — texto/tablas con estilos en linea pensados
   para un fondo claro (fondo #f5f5f5, texto #111/#333), se sobreescriben
   con !important para que se vean bien en modo oscuro Y claro sin tocar
   el contenido migrado. Colapsado por defecto (degradado + "Leer mas")
   para no saturar la pagina — el texto completo sigue en el HTML desde
   el primer momento, el buscador lo ve igual este o no expandido. */
.category-seo-copy{
  max-width:var(--maxw); margin:8px auto 0; padding:0 var(--pad) clamp(32px,5vw,56px);
}
.category-seo-copy-body{
  position:relative; max-height:280px; overflow:hidden;
  padding-top:28px; border-top:1px solid var(--line);
  color:var(--text-dim); font-size:.92rem; line-height:1.7;
}
.category-seo-copy-body::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:90px;
  background:linear-gradient(to bottom, transparent, var(--bg));
  pointer-events:none;
}
.category-seo-copy-body.is-expanded{ max-height:none; }
.category-seo-copy-body.is-expanded::after{ display:none; }
.category-seo-copy-body h2{ color:var(--text); font-size:1.5rem; font-weight:800; line-height:1.25; margin:32px 0 12px; }
.category-seo-copy-body h2:first-child{ margin-top:0; }
.category-seo-copy-body h3{ color:var(--text); font-size:1.15rem; font-weight:700; line-height:1.3; margin:22px 0 10px; }
.category-seo-copy-body p{ margin:0 0 12px; }
.category-seo-copy-body strong{ color:var(--text); }
.category-seo-copy-body ul{ margin:0 0 12px; padding-left:20px; }
.category-seo-copy-body li{ margin-bottom:4px; }
.category-seo-copy-body table{ width:100% !important; border-collapse:collapse !important; margin:12px 0 20px !important; font-size:.85rem !important; }
.category-seo-copy-body th{
  background:var(--surface) !important; color:var(--text) !important; border:1px solid var(--line) !important;
  padding:10px 14px !important; text-align:left !important; font-weight:700 !important;
}
.category-seo-copy-body td{
  background:transparent !important; color:var(--text-dim) !important; border:1px solid var(--line) !important;
  padding:10px 14px !important;
}
.category-seo-copy-body td strong{ color:var(--text) !important; }
.category-seo-copy-toggle{
  display:block; margin:16px auto 0; height:40px; padding:0 22px; border-radius:999px;
  border:1px solid var(--line-strong); background:transparent; color:var(--text);
  font-weight:700; font-size:.82rem; font-family:inherit; cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.category-seo-copy-toggle:hover{ border-color:var(--red); color:var(--red); }

/* ---------- Sugeridos dentro del carrito ----------
   Van en .cart-collaterals, la columna derecha de 360px. Antes usaban la
   plantilla por defecto de WooCommerce (<ul class="products">), que este
   tema no estiliza en ningun sitio: salian con vinetas y las fotos a
   tamano completo, una debajo de otra (bug reportado 2026-09-04). Ahora
   usan la misma .p-card del catalogo (ver woocommerce/cart/cross-sells.php)
   y aqui solo se ajusta la rejilla al ancho de esa columna. */
.galaxy-cross-sells{ margin-top:28px; }
.galaxy-cross-sells > h2{
  font-size:1.05rem; font-weight:800; margin:0 0 14px; color:var(--text);
}
.galaxy-cross-sells-grid{
  /* auto-fit y no un 2 fijo: cuando WooCommerce solo encuentra UN sugerido
     (porque el resto ya esta en el carrito), con 2 columnas fijas quedaba
     media columna vacia al lado. Asi una sola tarjeta ocupa el ancho. */
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px;
}
/* Tarjetas compactas: en 170px de ancho, el tamano normal no entra. */
.galaxy-cross-sells-grid .p-card{ padding:10px; }
.galaxy-cross-sells-grid .p-card-title{ font-size:.82rem; line-height:1.35; }
.galaxy-cross-sells-grid .p-card-price, .galaxy-cross-sells-grid .price{ font-size:.9rem; }
.galaxy-cross-sells-grid .p-card-media{ aspect-ratio:1/1; }
.galaxy-cross-sells-grid .button, .galaxy-cross-sells-grid .add_to_cart_button{
  font-size:.78rem; padding:7px 10px; width:100%; text-align:center;
}
@media (max-width:900px){
  .galaxy-cross-sells-grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ==================================================================
   Popups (2026-09-04) — ver inc/popups.php
   ==================================================================
   La imagen es 4:3 fijo, en escritorio y en movil: es la forma en la
   que se le pide al diseñador, y mantenerla igual en las dos evita
   tener que hacer dos diseños distintos del mismo aviso.
   El ancho maximo (520px) sale de que a 4:3 eso da 390px de alto; con
   titulo, texto y boton debajo, el popup entero ronda los 600px y entra
   completo en un portatil de 768px de alto sin tener que hacer scroll
   dentro de la ventana. */
.ga-popup{
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
/* El [hidden] explicito es necesario: la regla de arriba pone
   display:flex, que le gana al display:none del navegador para [hidden]
   por especificidad (bug ya visto en los KPI del escritorio de wp-admin,
   2026-09-01). Sin esto el popup se veria desde que carga la pagina. */
.ga-popup[hidden]{ display:none; }
.ga-popup-fondo{
  position:absolute; inset:0; background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.ga-popup-caja{
  position:relative; z-index:1; width:100%; max-width:520px;
  max-height:calc(100vh - 40px); overflow:auto; overscroll-behavior:contain;
  background:var(--surface); color:var(--text);
  border:1px solid var(--line-strong); border-top:4px solid var(--red);
  border-radius:18px; box-shadow:0 30px 60px rgba(0,0,0,.5);
  animation:ga-popup-entra .28s ease both;
}
@keyframes ga-popup-entra{
  from{ opacity:0; transform:translateY(14px) scale(.98); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .ga-popup-caja{ animation:none; }
}
.ga-popup-cerrar{
  position:absolute; top:10px; right:10px; z-index:2;
  width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(0,0,0,.55); color:#fff; font-size:1.5rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease;
}
.ga-popup-cerrar:hover{ background:var(--red); }
.ga-popup-img{ display:block; aspect-ratio:4/3; overflow:hidden; }
.ga-popup-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.ga-popup-texto{
  padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; text-align:center;
}
.ga-popup-texto strong{ font-size:1.25rem; font-weight:800; line-height:1.25; }
.ga-popup-texto p{ margin:0; font-size:.9rem; color:var(--text-dim); line-height:1.5; }
.ga-popup-btn{
  align-self:center; margin-top:6px;
  background:var(--red); color:#fff; font-weight:700; font-size:.9rem;
  padding:12px 26px; border-radius:999px; text-decoration:none;
  transition:background .15s ease, transform .15s ease;
}
.ga-popup-btn:hover{ background:var(--red-hover); transform:translateY(-1px); text-decoration:none; }
@media (max-width:520px){
  .ga-popup{ padding:14px; }
  .ga-popup-texto{ padding:16px 18px 20px; }
  .ga-popup-texto strong{ font-size:1.1rem; }
}

/* ---------- Tipografia en movil (2026-09-08) ----------
   El distintivo de las fichas ("OFERTA", "NUEVO") estaba a 10,9px y la
   linea de categoria a 11,2px, por debajo del minimo comodo de lectura en
   un telefono. Solo se suben en movil: en escritorio se miran a mas
   distancia relativa y ahi si funcionan.

   Va al FINAL del archivo a proposito. Puesto mas arriba no servia de
   nada: `.p-card .badge` se define en la linea ~1010 con la misma
   especificidad, y a igualdad de especificidad gana la que aparece
   despues. Comprobado en produccion: seguia calculando 10.88px. */
@media (max-width:700px){
  .p-card .badge{ font-size:.74rem; padding:5px 9px; }
  .p-body .cat{ font-size:.74rem; }
  .blog-card .cat, .post-card .cat{ font-size:.74rem; }
}

/* "Recien llegado — antes que se agote" (2026-09-10). Medido sobre la
   version del banner que trae el texto incrustado: las dos partes del
   mismo tamaño, con las mayusculas al 2,98 % del alto, muy espaciadas,
   ocupando de lado a lado del 13 % al 87 % del ancho, y la raya de en
   medio de 2 px yendo del 35,6 % al 57,7 %. El bloque va arriba, con el
   centro de las letras al 11,5 % del alto. */
#novedades .site-section-banner-titulo--diseno{
  --ga-t1:1.72cqw; --ga-t2:1.72cqw; --ga-centro:11.53%;
  --ga-padding:0 13.01%;
  --ga-regla-aire:1.5%;
  letter-spacing:.2em;
}

/* "Captura lo que antes no podias alcanzar" (2026-09-10). El unico de los
   cuatro que va en ROJO y sin halo: el diseño lo pone plano sobre el
   cielo, que ya es claro y hace suficiente contraste. Las dos lineas
   miden lo mismo, centradas y practicamente pegadas, con el bloque a
   media altura. El rojo es el del propio diseño, muestreado del archivo
   del diseñador. */
#drones-estabilizacion .site-section-banner-titulo--diseno{
  --ga-t1:4.83cqw; --ga-t2:4.83cqw; --ga-centro:47.15%;
  --ga-lado:center; --ga-texto:center;
  /* El relleno es asimetrico a proposito: en el diseño el bloque no esta
     centrado del todo, va un poco a la derecha para dejar libre el dron
     grande de la esquina izquierda. */
  --ga-padding:0 3% 0 7%;
  --ga-junta:-.22em;
  --ga-color:#d70d0b;
  --ga-sombra:none;
  /* Mucho mas fina que las demas. Con el peso Black el texto rojo se
     apelmazaba y costaba leerlo. Medido contra el archivo del diseñador
     comparando el grosor del trazo con la altura de la letra (que es la
     unica forma justa de compararlo, porque los dos archivos estan a
     resoluciones distintas): el diseño esta en 0,333 y con Black salia
     0,46. SemiBold es el peso de Poppins que cae en ese 0,333. */
  --ga-peso:600;
  /* Poppins es mas estrecha que la tipografia del diseño: a igual altura
     de letra la linea se quedaba en el 56 %% del ancho del banner y el
     diseño ocupa el 59,2 %%. Se recupera separando las letras en vez de
     agrandarlas, que ademas es lo que hace que se lea mejor. */
  --ga-espaciado:.035em;
  /* SemiBold solo llega a 0,244 de trazo sobre altura y el diseño esta en
     0,333: el contorno cubre la diferencia. */
  --ga-trazo:.031em;
}

/* "Tu confianza, nuestra prioridad." (2026-09-10). Las dos lineas van
   CENTRADAS. Al medirlo automaticamente parecia alineado a la derecha,
   porque la coma de la primera linea y el punto de la segunda alargan sus
   cajas y hacian que las dos terminaran casi en la misma vertical; mirando
   el diseño se ve que estan centradas. Medido sobre el archivo: mayusculas
   de la linea 1 al 10,42 % del alto de la imagen y de la linea 2 al
   6,10 % (el 59 % de la primera), con el centro del bloque al 48,03 %.

   OJO con ese ultimo numero: esos porcentajes estan medidos sobre la
   imagen COMPLETA (1344 px), pero el contenedor recorta la franja roja y
   se queda en 1235. Por eso --ga-centro no es 48,03 sino 52,27: el mismo
   punto de la foto, expresado sobre la altura que de verdad se ve
   (48,03 x 1344 / 1235). Los tamaños de letra no hay que convertirlos
   porque van en % del ANCHO, que no cambia. */
.testimonials .site-section-banner-titulo--diseno{
  --ga-t1:6.03cqw; --ga-t2:3.53cqw; --ga-centro:52.27%;
  --ga-lado:center; --ga-texto:center; --ga-padding:0 3%;
  --ga-junta:-.05em;
}

/* "Sonido profesional para cada produccion" (2026-09-10). Alineado a la
   izquierda, pegado al borde (2,84 % del ancho) y con el bloque a media
   altura. Medido sobre el archivo del diseñador: mayusculas de la linea 1
   al 6,55 % del alto y de la linea 2 al 3,87 % (el 59 % de la primera),
   con 1,49 % de aire entre las dos. */
#audio-pro .site-section-banner-titulo--diseno{
  --ga-t1:3.79cqw; --ga-t2:2.24cqw; --ga-centro:50.37%;
  --ga-lado:flex-start; --ga-texto:left; --ga-padding:0 6% 0 2.84%;
  --ga-junta:-.05em;
}

/* ---------- Texto del banner de Polaris (2026-09-10) ----------
   Antes iba incrustado en la imagen. Ahora es HTML, con el banner sin
   letras debajo, para que se traduzca a los 5 idiomas y para que el
   enlace tenga nombre accesible.

   Medido sobre el archivo del diseñador (3168 x 1344):
     - todo alineado a la izquierda, el titular arranca en el 4,51 % del
       ancho y el subtitulo en el 5,08 %
     - titular de dos lineas del MISMO tamaño, mayusculas al 10,9 % del
       alto, practicamente pegadas (0,29 % de aire entre ellas)
     - subtitulo de dos lineas, mayusculas al 2,57 %, con 1,93 % entre
       ellas, y 2,91 % de separacion respecto al titular
     - la palabra POLARIS va en azul, muestreado del propio archivo

   Las medidas van en cqw (% del ancho de la franja) para que la
   proporcion entre texto e imagen sea la misma en cualquier pantalla. */
.polaris-copy{
  position:absolute; left:4.51%; top:29.6%; right:46%;
  display:flex; flex-direction:column; align-items:flex-start;
  pointer-events:none; text-align:left;
  color:#fff; text-transform:uppercase; font-weight:900; font-style:italic;
  text-shadow:0 0 26px rgba(255,255,255,.4), 0 0 60px rgba(255,255,255,.18), 0 2px 16px rgba(0,0,0,.6);
}
.polaris-titular{ margin:0; font-size:6.3cqw; line-height:1.0; letter-spacing:-.01em; }
.polaris-titular span{ display:block; white-space:nowrap; }
.polaris-sub{ margin:2.1cqw 0 0 .57%; font-size:1.49cqw; line-height:1.62; letter-spacing:.01em; }
.polaris-sub span{ display:block; white-space:nowrap; }
.polaris-sub b{ color:#548cc9; font-weight:900; }

/* "Segunda mano" (2026-09-10). Titular de dos lineas de tamaños DISTINTOS
   (la segunda al 69 % de la primera, no al 59 % como el resto) y ademas
   un subtitulo de dos lineas sin mayusculas. Todo pegado a la izquierda.
   Medido sobre el archivo del diseñador: mayusculas de la linea 1 al
   11,16 % del alto y de la linea 2 al 7,66 %, subtitulo con las dos
   lineas ocupando un 5,55 % cada una contando subidas y bajadas. */
#segunda-mano .site-section-banner-titulo--diseno{
  --ga-t1:6.46cqw; --ga-t2:4.43cqw; --ga-centro:49.5%;
  --ga-lado:flex-start; --ga-texto:left; --ga-padding:0 45% 0 4.8%;
  --ga-junta:-.12em;
  --ga-sub:2.36cqw; --ga-sub-peso:500; --ga-sub-aire:1.15cqw; --ga-sub-alto:1.34;
}

/* ---------- Texto del banner del kit de limpieza (2026-09-10) ----------
   Tres lineas centradas, la del medio en rojo, y una tercera mucho mas
   chica debajo. Medido sobre el archivo del diseñador (3168 x 1344):
     - "KIT DE": mayusculas al 10,94 % del alto
     - "LIMPIEZA": al 10,57 %, en el rojo del propio archivo (#e71c1c)
     - la linea de abajo: al 2,31 %
     - 1,56 % de aire entre la 1 y la 2, y 2,46 % entre la 2 y la 3
     - el bloque centrado en horizontal, con su centro vertical al 48,33 % */
.kit-copy{
  position:absolute; inset:0 0 3.34% 0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  pointer-events:none; text-align:center;
  color:#fff; text-transform:uppercase; font-weight:900; font-style:italic;
  line-height:1; letter-spacing:-.01em;
  text-shadow:0 0 26px rgba(255,255,255,.35), 0 2px 16px rgba(0,0,0,.6);
}
.kit-copy span{ display:block; }
.kit-l1{ font-size:6.33cqw; }
.kit-l2{ font-size:6.12cqw; color:#e71c1c; margin-top:.03em; text-shadow:0 2px 16px rgba(0,0,0,.6); }
.kit-l3{ font-size:1.34cqw; margin-top:.9em; letter-spacing:.02em; }

/* ---------- Texto del banner de seQura (2026-09-10) ----------
   Tres piezas sueltas sobre la imagen sin letras, cada una en su sitio,
   todas medidas sobre el archivo del diseñador (3168 x 1344):
     - el titular de dos lineas a la izquierda, centrado sobre el 25,5 %
       del ancho, con su centro vertical al 49,8 %
     - el logotipo de seQura del 70,42 % al 92,14 % del ancho y del
       40,48 % al 55,13 % del alto
     - la linea chica debajo, del 64,65 % al 93,72 % del ancho, con la
       primera mitad en color crema (#ecd0ac, muestreado del archivo) y la
       segunda en blanco

   El logotipo va como <img> y no como texto porque es una marca: se
   recorto del propio banner del diseñador y se guardo con transparencia.
   Ver assets/img/sequra-logo.webp. */
.sequra-copy{
  position:absolute; left:0; width:51%; top:0; bottom:.36%; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  pointer-events:none; text-align:center;
  color:#fff; text-transform:uppercase; font-weight:900; font-style:italic;
  line-height:1.06; letter-spacing:-.01em;
  text-shadow:0 0 24px rgba(0,0,0,.55), 0 2px 14px rgba(0,0,0,.6);
}
.sequra-copy span{ display:block; }
.sq-l1{ font-size:2.99cqw; }
.sq-l2{ font-size:3.02cqw; }
/* El selector lleva .strip-banner-inner delante porque la regla general
   `.strip-banner-inner img` (0,1,1) le gana a `.sq-logo` (0,1,0) y le
   imponia width:100%; height:100%; object-fit:cover — el logotipo salia a
   pantalla completa (pasó al montarlo). */
.strip-banner-inner img.sq-logo{
  position:absolute; left:70.42%; width:21.72%; top:40.48%; height:auto;
  object-fit:contain; z-index:1; pointer-events:none;
}
.sq-sub{
  position:absolute; left:64.65%; right:6.28%; top:56.6%; z-index:1;
  pointer-events:none; text-align:center;
  color:#fff; text-transform:uppercase; font-weight:800; font-style:italic;
  font-size:.78cqw; letter-spacing:.01em; line-height:1;
  text-shadow:0 1px 8px rgba(0,0,0,.7);
}
.sq-sub b{ color:#ecd0ac; font-weight:800; }

/* ---------- Video y etiquetas de producto (desde 2026-09-14) ---------- */
.p-single-videos{ display:grid; gap:14px; margin:0 0 22px; }
.p-single-video, .p-single-video-frame{
  position:relative; display:block; width:100%; max-width:860px; aspect-ratio:16/9; border:0; padding:0;
  border-radius:14px; overflow:hidden; background:#000; cursor:pointer;
}
.p-single-video img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.92; transition:opacity .2s ease; }
.p-single-video:hover img{ opacity:1; }
.p-single-video-play{
  position:absolute; left:50%; top:50%; width:72px; height:50px; transform:translate(-50%,-50%);
  background:var(--red); border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.p-single-video-play::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-35%,-50%);
  border-style:solid; border-width:11px 0 11px 19px; border-color:transparent transparent transparent #fff;
}
.p-single-video:focus-visible{ outline:3px solid var(--red); outline-offset:3px; }
/* Etiquetas del producto. Son las mismas de la tienda vieja, que tambien
   las enseña enlazadas a su buscador, pero hay fichas con 25 y un muro de
   chips grandes se comia la pagina (16/09/2026): se les baja el peso, se
   agrupan bajo un titulo y el resto va detras de un boton. */
.p-single-tags-bloque{ margin:18px 0 0; }
.p-single-tags-titulo{
  display:block; font-size:.72rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-dimmer); margin-bottom:8px;
}
.p-single-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; }
.p-single-tags li[hidden]{ display:none; }
.p-single-tags a{
  display:inline-block; padding:3px 10px; border:1px solid var(--line); border-radius:999px;
  font-size:.74rem; color:var(--text-dimmer); text-decoration:none;
  transition:border-color .2s ease, color .2s ease;
}
.p-single-tags a:hover{ border-color:var(--red); color:var(--red); }
.p-single-tags-mas{
  margin-top:8px; padding:0; border:0; background:none; cursor:pointer;
  font:inherit; font-size:.74rem; color:var(--text-dim); text-decoration:underline;
}
.p-single-tags-mas:hover{ color:var(--red); }

/* ---------- Aviso de vuelta de stock (desde 2026-09-15) ---------- */
.p-single-aviso-stock{ margin:18px 0 0; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.p-single-aviso-stock[hidden]{ display:none; }
.p-single-aviso-stock-titulo{ margin:0 0 10px; font-weight:700; }
.p-single-aviso-stock-form{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.p-single-aviso-stock-form[hidden]{ display:none; }
.p-single-aviso-stock-form input[type="email"]{ flex:1 1 220px; min-width:0; height:46px; padding:0 14px; border:1px solid var(--line); border-radius:999px; background:var(--bg, #fff); color:var(--text); font:inherit; }
.p-single-aviso-stock-form .button{ height:46px; padding:0 24px; }
.p-single-aviso-stock-texto{ flex:1 1 100%; margin:0; color:var(--text-dim); font-size:.88rem; }
.p-single-aviso-stock-trampa{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
.p-single-aviso-stock-privacidad{ margin:10px 0 0; font-size:.76rem; color:var(--text-dim); }
.p-single-aviso-stock-privacidad a{ color:var(--red); }

/* ---------- Disponibilidad y plazo (desde 2026-09-15) ---------- */
.p-single-stock.backorder{ color:#b7791f; }
.p-single-plazo{ margin:6px 0 0; font-size:.86rem; color:var(--text-dim); }

/* ---------- Cuenta atras de ofertas (desde 2026-09-15) ---------- */
.galaxy-cuenta-atras{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; background:var(--red); color:#fff; font-size:.8rem; font-weight:700; font-variant-numeric:tabular-nums; }
.galaxy-cuenta-atras[hidden]{ display:none; }
.galaxy-cuenta-atras svg{ width:15px; height:15px; flex:none; }
.galaxy-cuenta-atras--ficha{ margin:8px 0 4px; }
.galaxy-cuenta-atras--tarjeta{ margin:0 0 8px; padding:3px 9px; font-size:.72rem; }
.galaxy-cuenta-atras--tarjeta svg{ width:12px; height:12px; }

/* ---------- Mensajes de pedido (desde 2026-09-15) ---------- */
.galaxy-mensajes-pedido{ margin:30px 0; }
.galaxy-mensajes-lista{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:10px; }
.galaxy-mensaje{ padding:12px 16px; border:1px solid var(--line); border-radius:12px; font-size:.86rem; max-width:85%; }
.galaxy-mensaje--equipo{ align-self:flex-end; background:var(--surface); }
.galaxy-mensaje-meta{ margin:0 0 4px; color:var(--text-dimmer); font-size:.8rem; }
.galaxy-mensaje-texto{ color:var(--text-dim); overflow-wrap:anywhere; }
.galaxy-mensaje-form{ display:flex; flex-direction:column; gap:10px; }
.galaxy-mensaje-form label{ font-size:.9rem; color:var(--text-dim); }
.galaxy-mensaje-form textarea{ width:100%; padding:12px; border:1px solid var(--line); border-radius:10px; font:inherit; resize:vertical; }
.galaxy-mensaje-form .button{ align-self:flex-start; }

/* ---------- Pagina de compra clara y comoda (15/09/2026) ----------
   Pensada para que cualquiera compre sin dudar: letra y campos mas
   grandes, tres pasos numerados (Tus datos, Tu pedido, Forma de pago),
   y cada opcion de envio y de pago como una tarjeta que se pulsa entera,
   con el estado elegido muy visible. Ver inc/pagos.php y
   woocommerce/checkout/payment*.php. */

/* Campos */
.woocommerce-checkout form .form-row label{ font-size:.95rem; font-weight:600; color:var(--text); margin-bottom:7px; }
.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row select,
.woocommerce-checkout form .form-row textarea{
  width:100%; min-height:50px; font-size:1rem; padding:12px 14px; border-radius:10px; border-color:var(--line-strong);
}
.woocommerce-checkout form .form-row input.input-text:focus,
.woocommerce-checkout form .form-row textarea:focus{ outline:2px solid var(--red); outline-offset:1px; border-color:transparent; }
.woocommerce-checkout .select2-container .select2-selection--single{ height:50px; border-radius:10px; border-color:var(--line-strong); }
.woocommerce-checkout .select2-container .select2-selection__rendered{ font-size:1rem; }
.woocommerce-checkout .select2-container .select2-selection__arrow{ height:48px; }
.woocommerce-checkout #ship-to-different-address label{ display:flex; align-items:center; gap:10px; font-size:1rem; font-weight:700; cursor:pointer; }
.woocommerce-checkout #ship-to-different-address input{ width:20px; height:20px; accent-color:var(--red); }

/* Pasos numerados */
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout #order_review_heading,
.galaxy-pago-cabecera{ display:flex; align-items:center; gap:12px; font-size:1.25rem; font-weight:800; color:var(--text); }
.woocommerce-checkout .woocommerce-billing-fields > h3::before,
.woocommerce-checkout #order_review_heading::before,
.galaxy-pago-cabecera::before{
  display:inline-grid; place-items:center; width:32px; height:32px; flex:none; border-radius:50%;
  background:var(--red); color:#fff; font-size:.95rem; font-weight:800;
}
.woocommerce-checkout .woocommerce-billing-fields > h3::before{ content:"1"; }
.woocommerce-checkout #order_review_heading::before{ content:"2"; }
.galaxy-pago-cabecera::before{ content:"3"; }
.galaxy-pago-cabecera{ margin:28px 0 14px; }

/* Resumen del pedido, un poco mas grande */
.woocommerce-checkout-review-order-table tbody td.product-name,
.woocommerce-checkout-review-order-table tbody td.product-total,
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td{ font-size:.95rem; }
.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout-review-order-table tfoot tr.order-total td{ font-size:1.3rem; }

/* Envio: una tarjeta por opcion (carrito y pago) */
.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals,
.cart_totals tr.woocommerce-shipping-totals{ display:block; padding:16px 0; }
.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals th,
.cart_totals tr.woocommerce-shipping-totals th{ display:block; margin:0 0 10px; font-size:1rem; font-weight:700; color:var(--text); text-align:left; }
.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals td,
.cart_totals tr.woocommerce-shipping-totals td{ display:block; text-align:left; }
ul#shipping_method{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
ul#shipping_method li{ position:relative; margin:0; padding:0; }
ul#shipping_method li::before{ content:none; }
ul#shipping_method li input.shipping_method{ position:absolute; opacity:0; width:1px; height:1px; }
ul#shipping_method li label{
  display:flex; align-items:center; gap:12px; min-height:64px; margin:0; padding:12px 16px; cursor:pointer;
  background:var(--bg); border:2px solid var(--line-strong); border-radius:12px; text-align:left;
}
ul#shipping_method li input[type="radio"] + label::before{
  content:""; width:22px; height:22px; flex:none; border-radius:50%; border:2px solid var(--text-dimmer); background:var(--bg);
}
ul#shipping_method li input:checked + label{ border-color:var(--red); background:var(--hover-tint); }
ul#shipping_method li input:checked + label::before{ border-color:var(--red); background:var(--red); box-shadow:inset 0 0 0 4px var(--bg); }
ul#shipping_method li input:focus-visible + label{ outline:3px solid var(--red); outline-offset:2px; }
.galaxy-envio-textos{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.galaxy-envio-nombre{ font-size:.98rem; font-weight:700; color:var(--text); }
.galaxy-envio-plazo{ font-size:.86rem; color:var(--text-dim); }
.galaxy-envio-precio{ font-size:1rem; font-weight:800; color:var(--text); white-space:nowrap; }

/* Pago: una tarjeta por metodo */
.woocommerce-checkout-payment .wc_payment_methods{ margin:0 0 18px; }
.wc_payment_methods li.wc_payment_method{ position:relative; border:0; padding:0; margin:0 0 12px; }
.wc_payment_methods li.wc_payment_method:has(input:checked){ border:0; }
.wc_payment_method > input.input-radio{ position:absolute; opacity:0; width:1px; height:1px; }
.galaxy-pago-opcion{
  display:flex; align-items:center; gap:14px; min-height:78px; padding:14px 16px; cursor:pointer;
  background:var(--bg); border:2px solid var(--line-strong); border-radius:14px;
}
.galaxy-pago-marca{ width:22px; height:22px; flex:none; border-radius:50%; border:2px solid var(--text-dimmer); background:var(--bg); }
.galaxy-pago-icono{ width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:12px; background:var(--surface); color:var(--text); }
.galaxy-pago-icono svg{ width:28px; height:28px; }
.galaxy-pago-textos{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.galaxy-pago-titulo{ font-size:1rem; font-weight:700; color:var(--text); line-height:1.3; }
.galaxy-pago-resumen{ font-size:.88rem; font-weight:400; color:var(--text-dim); line-height:1.4; }
.wc_payment_method > input:checked + .galaxy-pago-opcion{ border-color:var(--red); background:var(--hover-tint); }
.wc_payment_method > input:checked + .galaxy-pago-opcion .galaxy-pago-marca{ border-color:var(--red); background:var(--red); box-shadow:inset 0 0 0 4px var(--bg); }
.wc_payment_method > input:checked + .galaxy-pago-opcion .galaxy-pago-icono{ color:var(--red); background:var(--bg); }
.wc_payment_method > input:focus-visible + .galaxy-pago-opcion{ outline:3px solid var(--red); outline-offset:2px; }
/* El detalle del metodo elegido cuelga de su tarjeta */
.wc_payment_method:has(> input:checked) .galaxy-pago-opcion{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
.wc_payment_methods .payment_box{
  margin:0; padding:14px 16px 16px; border:2px solid var(--red); border-top:0; border-radius:0 0 14px 14px;
  background:var(--hover-tint); color:var(--text); font-size:.92rem; line-height:1.6;
}
.wc_payment_method:not(:has(> input:checked)) .payment_box{ display:none !important; }

/* Boton y confianza */
.woocommerce-checkout #place_order{ min-height:58px; font-size:1.08rem; border-radius:14px; }
.galaxy-pago-seguro{ display:flex; align-items:center; justify-content:center; gap:8px; margin:12px 0 0; font-size:.88rem; color:var(--text-dim); text-align:center; }
.galaxy-pago-seguro svg{ width:17px; height:17px; flex:none; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{ font-size:.86rem; color:var(--text-dim); }
/* Ajustes tras revisar capturas (15/09/2026) */
form.checkout.woocommerce-checkout{ grid-template-columns:1fr 440px; }
@media (max-width:900px){ form.checkout.woocommerce-checkout{ grid-template-columns:1fr; } }
.woocommerce-checkout-payment ul.wc_payment_methods{ padding-left:0; margin-left:0; }
/* Foco neutro: el rojo se confundia con un campo con error */
.woocommerce-checkout form .form-row input.input-text:focus,
.woocommerce-checkout form .form-row textarea:focus{ outline:2px solid var(--text); outline-offset:1px; border-color:transparent; }
.galaxy-pago-seguro{ justify-content:flex-start; text-align:left; }
.woocommerce-checkout-review-order-table tbody td.product-name .product-quantity{ white-space:nowrap; }
@media (max-width:600px){
  #order_review_heading{ padding:20px 16px 4px; }
  #order_review{ padding:10px 16px 20px; }
  ul#shipping_method li label{ padding:12px; gap:10px; }
  .galaxy-pago-opcion{ padding:12px; gap:10px; }
  .galaxy-pago-icono{ width:38px; height:38px; }
  .galaxy-pago-icono svg{ width:24px; height:24px; }
}

/* ---------- Tabla de la política de cookies (16/09/2026) ---------- */
.galaxy-tabla-cookies{ width:100%; border-collapse:collapse; margin:18px 0 26px; font-size:.88rem; display:block; overflow-x:auto; }
.galaxy-tabla-cookies th, .galaxy-tabla-cookies td{ border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; }
.galaxy-tabla-cookies th{ background:var(--surface); font-weight:700; color:var(--text); white-space:nowrap; }
.galaxy-tabla-cookies td{ color:var(--text-dim); }
.galaxy-tabla-cookies td:first-child{ color:var(--text); font-weight:600; overflow-wrap:anywhere; }
.galaxy-tabla-cookies{ min-width:100%; }
.galaxy-tabla-cookies tbody td:first-child{ min-width:210px; }
.galaxy-tabla-cookies th:nth-child(2), .galaxy-tabla-cookies td:nth-child(2){ min-width:150px; }
.galaxy-tabla-cookies th:nth-child(4), .galaxy-tabla-cookies td:nth-child(4),
.galaxy-tabla-cookies th:nth-child(5), .galaxy-tabla-cookies td:nth-child(5){ min-width:120px; }

/* ---------- Bajadas de precio (16/09/2026) ----------
   Pedido de Galaxy en la reunion del 15/09: "que se note solo con poner el
   precio de oferta". La chapa de la imagen ya decia el porcentaje en la
   tarjeta; ahora tambien en la ficha, y debajo del precio se dice cuanto
   se ahorra el cliente en euros, que es lo que de verdad convence.
   El color va con el rojo de la casa, no se mete un verde nuevo. */
.galaxy-ahorro{
  display:inline-flex; align-items:center; gap:5px;
  font-weight:700; letter-spacing:.01em; color:var(--red);
  background:color-mix(in srgb, var(--red) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--red) 34%, transparent);
  border-radius:999px; padding:4px 11px; line-height:1.25;
  width:fit-content;
}
.galaxy-ahorro .woocommerce-Price-amount{ font-weight:700; }
.galaxy-ahorro-icono{ font-size:1.05em; line-height:1; }
.galaxy-ahorro--tarjeta{ font-size:.76rem; padding:3px 9px; }
.galaxy-ahorro--ficha{ font-size:.92rem; margin:-6px 0 18px; }

/* ---------- Packs (16/09/2026) ----------
   Lo que lleva dentro el pack, en la ficha. Se apoya en los mismos tokens
   del tema; no introduce colores nuevos. */
.galaxy-pack{
  margin:22px 0 0; padding:18px; border:1px solid var(--line-strong);
  border-radius:16px; background:var(--surface);
}
.galaxy-pack-titulo{ font-size:1rem; margin:0 0 14px; letter-spacing:.01em; }
.galaxy-pack-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.galaxy-pack-pieza{ display:flex; align-items:center; gap:14px; }
.galaxy-pack-foto{ flex:0 0 64px; }
.galaxy-pack-foto img{
  width:64px; height:64px; object-fit:contain; border-radius:10px;
  background:var(--paper); display:block;
}
.galaxy-pack-datos{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.galaxy-pack-datos a{ font-weight:600; text-decoration:none; color:var(--text); }
.galaxy-pack-datos a:hover{ color:var(--red); }
.galaxy-pack-cantidad{ font-size:.8rem; color:var(--text-dim); }
.galaxy-pack-precio{ font-size:.85rem; color:var(--text-dim); }
.galaxy-pack-ahorro{
  margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line);
  font-weight:600; color:var(--red);
}
@media (max-width:520px){
  .galaxy-pack{ padding:14px; }
  .galaxy-pack-foto, .galaxy-pack-foto img{ flex-basis:52px; width:52px; height:52px; }
}

/* ---------- Venta cruzada con descuento (16/09/2026) ---------- */
.galaxy-vc{
  margin:22px 0 0; padding:18px; border-radius:16px;
  border:1px solid color-mix(in srgb, var(--red) 30%, transparent);
  background:color-mix(in srgb, var(--red) 7%, transparent);
}
.galaxy-vc-titulo{ font-size:1rem; margin:0 0 4px; color:var(--red); }
.galaxy-vc-texto{ margin:0 0 14px; font-size:.86rem; color:var(--text-dim); }
.galaxy-vc-lista{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px;
}
.galaxy-vc-item a{ text-decoration:none; color:var(--text); display:block; }
.galaxy-vc-item img{
  width:100%; aspect-ratio:1/1; object-fit:contain; background:var(--paper);
  border-radius:10px; display:block; margin-bottom:8px;
}
.galaxy-vc-nombre{ display:block; font-size:.82rem; font-weight:600; line-height:1.3; }
.galaxy-vc-precios{ display:block; margin-top:6px; font-size:.84rem; }
.galaxy-vc-precios del{ color:var(--text-dimmer); margin-right:6px; }
.galaxy-vc-precios ins{ text-decoration:none; font-weight:700; color:var(--red); }
.galaxy-vc-nota{ margin:14px 0 0; font-size:.78rem; color:var(--text-dim); }
.galaxy-vc-etiqueta{
  display:block; margin-top:4px; font-size:.78rem; font-weight:600; color:var(--red);
}

/* ---------- Avisos de promoción en la ficha (16/09/2026) ----------
   Cashback, Plan Renove y avisos. Tres tonos para que se distingan de un
   vistazo sin meter colores nuevos: el rojo de la casa para la promoción,
   un verde sobrio para el Plan Renove (es "recuperar", no "rebaja") y un
   gris neutro para los avisos. */
.galaxy-promo-ficha{
  display:flex; gap:14px; align-items:flex-start;
  margin:18px 0 0; padding:16px 18px; border-radius:14px;
  border:1px solid var(--line-strong); background:var(--surface);
}
.galaxy-promo-ficha-icono{ font-size:1.3rem; line-height:1.2; flex:0 0 auto; }
.galaxy-promo-ficha-cuerpo{ min-width:0; }
.galaxy-promo-ficha-titulo{
  margin:0; font-weight:700; color:var(--text); font-size:.95rem;
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.galaxy-promo-ficha-importe{ font-size:1.05rem; font-weight:800; }
.galaxy-promo-ficha-texto{ margin:6px 0 0; font-size:.86rem; color:var(--text-dim); line-height:1.6; }
.galaxy-promo-ficha-enlace{
  display:inline-block; margin-top:8px; font-size:.82rem; font-weight:600;
  color:var(--red); text-decoration:underline;
}
.galaxy-promo-ficha--promo{
  border-color:color-mix(in srgb, var(--red) 34%, transparent);
  background:color-mix(in srgb, var(--red) 8%, transparent);
}
.galaxy-promo-ficha--promo .galaxy-promo-ficha-importe{ color:var(--red); }
.galaxy-promo-ficha--renove{
  border-color:color-mix(in srgb, #1b7f3b 34%, transparent);
  background:color-mix(in srgb, #1b7f3b 8%, transparent);
}
.galaxy-promo-ficha--renove .galaxy-promo-ficha-importe{ color:#1b7f3b; }
.galaxy-promo-ficha--renove .galaxy-promo-ficha-enlace{ color:#1b7f3b; }

/* ---------- Franja promocional dentro del catálogo (16/09/2026) ---------- */
.galaxy-bn{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) 4px;
}
/* Tope de altura por si suben una imagen con otra proporcion: sin esto,
   una imagen cuadrada se comeria la pantalla entera encima del catalogo. */
.galaxy-bn img{
  width:100%; height:auto; max-height:340px; object-fit:cover; display:block; border-radius:14px;
}
@media (max-width:700px){
  .galaxy-bn img{ max-height:260px; }
}
.galaxy-bn-enlace{ display:block; }

/* ---------- Fidelidad: saldo del cliente (16/09/2026) ---------- */
.galaxy-saldo{
  margin:0 0 18px; padding:16px 18px; border-radius:14px;
  border:1px solid color-mix(in srgb, var(--red) 30%, transparent);
  background:color-mix(in srgb, var(--red) 7%, transparent);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.galaxy-saldo-titulo{ margin:0; font-weight:700; color:var(--text); }
.galaxy-saldo-nota{ margin:0; font-size:.84rem; color:var(--text-dim); }
/* El selector lleva el contenedor delante a proposito: en el carrito hay
   una regla de WooCommerce mas especifica que pintaba el enlace de rojo, y
   el boton salia rojo sobre rojo, sin texto visible (16/09/2026). */
.galaxy-saldo a.galaxy-saldo-boton{
  display:inline-flex; align-items:center; height:40px; padding:0 18px;
  border-radius:999px; background:var(--red); color:#fff; font-weight:700;
  font-size:.82rem; text-decoration:none; transition:background .2s ease;
}
.galaxy-saldo a.galaxy-saldo-boton:hover{ background:var(--red-hover); color:#fff; }
.galaxy-saldo a.galaxy-saldo-boton.is-activo{
  background:transparent; color:var(--red); border:1px solid var(--red);
}
.galaxy-saldo-cuenta-total{
  font-size:2.2rem; font-weight:800; color:var(--red); margin:0 0 6px; line-height:1;
}
.galaxy-saldo-tabla{ width:100%; border-collapse:collapse; margin-top:18px; }
.galaxy-saldo-tabla th, .galaxy-saldo-tabla td{
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); font-size:.9rem;
}
.galaxy-saldo-tabla th{ font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dimmer); }
.galaxy-saldo-tabla .es-positivo{ color:var(--text); font-weight:700; }
.galaxy-saldo-tabla .es-negativo{ color:var(--text-dim); }
@media (max-width:600px){
  .galaxy-saldo{ flex-direction:column; align-items:stretch; }
  .galaxy-saldo-boton{ justify-content:center; }
}

/* ==========================================================================
   Compra sin registrarse (inc/invitados.php)
   ========================================================================== */

/* Enlace al seguimiento, debajo del formulario de acceso. */
.galaxy-invitado-enlace{
  margin:1.1rem 0 0;
  padding-top:1rem;
  border-top:1px solid var(--line);
  font-size:.92rem;
  color:var(--text-dim);
}
.galaxy-invitado-enlace a{
  color:var(--red);
  font-weight:600;
  text-decoration:none;
}
.galaxy-invitado-enlace a:hover{ text-decoration:underline; }

/* Tarjeta de "guarda esta compra en tu cuenta". */
.galaxy-invitado-alta{
  max-width:640px;
  margin:2.5rem auto 0;
  padding:1.6rem 1.7rem;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
}
.galaxy-invitado-alta h3{
  margin:0 0 .5rem;
  font-size:1.18rem;
  line-height:1.3;
}
.galaxy-invitado-alta-texto{
  margin:0 0 1.2rem;
  font-size:.95rem;
  line-height:1.5;
  color:var(--text-dim);
}
.galaxy-invitado-alta-form{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:.9rem;
}
.galaxy-invitado-alta-campo{
  flex:1 1 260px;
  margin:0 !important;
}
.galaxy-invitado-alta-campo label{
  display:block;
  margin-bottom:.35rem;
  font-size:.9rem;
  font-weight:600;
}
.galaxy-invitado-alta-campo input[type="password"]{
  width:100%;
}
/* El medidor de fuerza de WooCommerce, que se inyecta dentro del campo. */
.galaxy-invitado-alta-campo .woocommerce-password-strength{
  margin-top:.4rem;
  font-size:.82rem;
  border-radius:6px;
}
.galaxy-invitado-alta-form .button{
  flex:0 0 auto;
  margin:0;
}

@media (max-width:520px){
  .galaxy-invitado-alta{ padding:1.3rem 1.1rem; }
  .galaxy-invitado-alta-form .button{ width:100%; }
}

/* Formulario nativo de seguimiento de pedido, con el estilo del tema. */
.woocommerce form.track_order{
  max-width:560px;
  margin:1.5rem 0 0;
  padding:1.6rem 1.7rem;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
}
.woocommerce form.track_order p:first-child{ margin-top:0; }
.woocommerce form.track_order .form-row{ margin-bottom:1rem; }
.woocommerce form.track_order label{
  display:block;
  margin-bottom:.35rem;
  font-size:.9rem;
  font-weight:600;
}
.woocommerce form.track_order input[type="text"],
.woocommerce form.track_order input[type="email"]{ width:100%; }
.woocommerce form.track_order .button{ margin-top:.3rem; }

@media (max-width:520px){
  .woocommerce form.track_order{ padding:1.3rem 1.1rem; }
  .woocommerce form.track_order .button{ width:100%; }
}

/* El seguimiento y los datos del pedido marcan numero, fecha y estado con
   <mark>, que el navegador pinta de amarillo. Se le da el color de marca. */
.woocommerce mark,
.woocommerce-order mark,
.woocommerce-order-details mark{
  background:transparent;
  color:var(--red);
  font-weight:600;
}