/* ============================================================
   CM DESCANSO · SECCIONES (patterns) · G2
   El CSS de las secciones del sitio, portado del custom_css por-pagina de
   Elementor al sistema, reescrito para MARKUP DE BLOQUES.

   Dos reglas de oro del port (leelas antes de tocar nada):

   1. En Elementor el contenedor de seccion ya tenia display:flex (via sus
      custom props). Un Group de bloques con layout "default" NO. Por eso cada
      rotulo de layout aqui declara `display:flex` (o grid) EXPLICITO. Sin los
      `!important` de R21: aqui no hay Elementor peleando la cascada.

   2. base.css trae `.cmd-scope h1/h2/h3/p{...}` con especificidad (0,1,1). Una
      clase sola de rotulo `.cmd-x-title` es (0,1,0) y PIERDE el tamano/color
      contra la base (R26). Por eso toda regla que fije tipografia sobre un
      heading/parrafo va ANCLADA al root de su seccion: `.cmd-home-hero
      .cmd-home-hero-h1` es (0,2,0) y gana. Regla general del fichero: los
      rotulos de tipografia se escriben `.<root> .<rotulo>`.

   Orden de sitio (enqueue): tokens -> base -> components -> chrome -> SECTIONS.
   ============================================================ */

/* ============================================================
   HOME
   ============================================================ */

/* ---- 1. HERO (foto a sangre + eyebrow/h1/sub/cta sobre degradado) ---- */
.cmd-home-hero {
  position: relative; overflow: hidden;
  /* G10-polish (aviso Mario, "el spacing del hero se ve raro" en PC): 76vh se
     quedaba corto en pantallas anchas y el contenido llenaba el alto entero,
     con el kicker pegado al header sobre la zona CLARA de la foto (ilegible).
     Alto con suelo en px + techo, y un padding-top que garantiza aire bajo el
     header aunque el viewport sea bajo: el bloque de texto siempre asienta
     abajo, sobre el degradado oscuro. svh = viewport real en movil. */
  min-height: clamp(560px, 82svh, 860px);
  padding-top: 96px;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  background: #241f1a;
}
.cmd-home-hero .cmd-home-hero-photo { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; z-index: 0; }
.cmd-home-hero .cmd-home-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; max-width: none; }
.cmd-home-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(18,19,22,.30) 0%, rgba(18,19,22,.10) 34%, rgba(18,19,22,.86) 100%),
              linear-gradient(90deg, rgba(18,19,22,.62) 0%, rgba(18,19,22,.30) 38%, rgba(18,19,22,0) 68%);
}
/* ALINEACION A LA RETICULA (G6-polish, "no esta cuadrado"): el texto del hero
   arranca EXACTAMENTE donde arranca el logo (contenedor 1400 + 32px del
   header), no en un padding propio que descuadraba unos px. */
.cmd-home-hero { --hx: max(32px, calc((100% - 1400px) / 2 + 32px)); }
.cmd-home-hero .cmd-home-hero-eye,
.cmd-home-hero .cmd-home-hero-h1,
.cmd-home-hero .cmd-home-hero-sub,
.cmd-home-hero .cmd-home-hero-cta {
  position: relative; z-index: 2; width: 100%;
  padding-inline: var(--hx) clamp(1.5rem, 5vw, 4rem);
  max-width: calc(660px + var(--hx));
  box-sizing: border-box;
}
.cmd-home-hero .cmd-home-hero-eye { margin: 0 0 16px; color: rgba(244,240,232,.85); }
.cmd-home-hero .cmd-home-hero-h1 {
  margin: 0 0 18px; font-family: var(--cmd-font-display); font-weight: 480;
  font-size: clamp(2.6rem, 1.6rem + 4.2vw, 4.8rem); line-height: 1.04; letter-spacing: -.02em; color: var(--cmd-on-dark);
}
.cmd-home-hero .cmd-home-hero-sub {
  margin: 0 0 22px; font-family: var(--cmd-font-body); font-size: 18px; line-height: 1.5;
  color: var(--cmd-on-dark-mut);
  /* 52ch DE TEXTO: la regla compartida mete el padding de reticula dentro del
     max-width (border-box), asi que hay que sumarlo o el parrafo queda en
     ~170px reales (el "hero raro" de PC era en parte esto). */
  max-width: calc(52ch + var(--hx) + clamp(1.5rem, 5vw, 4rem));
}
/* CTA doble (G6-polish, "que venda"): comprar en terracota + visitar en fantasma
   de vidrio. La compra manda; la tienda fisica es el segundo camino real. */
.cmd-home-hero .cmd-home-hero-cta { margin-bottom: clamp(2rem, 5vw, 3.5rem); display: flex; gap: 18px; flex-wrap: wrap; }
.cmd-home-hero .cmd-home-hero-cta .wp-block-button__link {
  display: inline-block; background: var(--cmd-green); color: #FDFBF7; border-radius: var(--cmd-r-sm);
  padding: 16px 32px; font-family: var(--cmd-font-body); font-size: 15px; font-weight: 600;
  border: 0; transition: background .2s, color .2s, box-shadow .2s;
}
.cmd-home-hero .cmd-home-hero-cta .wp-block-button__link:hover { background: var(--cmd-green-deep); color: #FDFBF7; }
.cmd-home-hero .cmd-home-hero-cta .wp-block-button__link:active { transform: translateY(1px); }
.cmd-home-hero .cmd-home-hero-cta .cmd-hero-cta-ghost .wp-block-button__link {
  background: rgba(252, 250, 245, .14); color: var(--cmd-on-dark);
  -webkit-backdrop-filter: var(--cmd-glass2-blur-lite); backdrop-filter: var(--cmd-glass2-blur-lite);
  border: 1px solid rgba(244, 240, 232, .38);
}
.cmd-home-hero .cmd-home-hero-cta .cmd-hero-cta-ghost .wp-block-button__link:hover { background: rgba(252, 250, 245, .26); color: #fff; }
/* tarjeta glass en la esquina inferior derecha (la zona muerta de la foto):
   el diferencial real del negocio, flotando sobre el ambiente. Solo escritorio. */
.cmd-home-hero .cmd-hero-card {
  position: absolute; right: max(32px, calc((100% - 1400px) / 2 + 32px)); bottom: clamp(2rem, 5vw, 3.5rem);
  z-index: 2; max-width: 300px; padding: 16px 18px; border-radius: var(--cmd-r-lg);
  text-decoration: none; display: block;
  transition: transform .25s var(--cmd-ease-out), box-shadow .25s var(--cmd-ease-out);
}
.cmd-home-hero .cmd-hero-card:hover { transform: translateY(-2px); }
/* sobre foto OSCURA el cristal va oscuro con texto crema (vibrancy Apple);
   el fill claro de .cmd-glass2 aqui quedaba turbio */
.cmd-home-hero .cmd-hero-card { background: var(--cmd-glass2-sheen), rgba(30, 26, 21, .38); }
.cmd-home-hero .cmd-hero-card .cmd-hero-card-k { display: block; font-family: var(--cmd-font-body); font-size: 14px; font-weight: 600; color: var(--cmd-on-dark); letter-spacing: .012em; margin: 0 0 3px; }
.cmd-home-hero .cmd-hero-card .cmd-hero-card-t { display: block; font-family: var(--cmd-font-body); font-size: 12.5px; color: rgba(244, 240, 232, .8); letter-spacing: .012em; }
@media (max-width: 1023px) { .cmd-home-hero .cmd-hero-card { display: none; } }
@media (max-width: 600px) { .cmd-home-hero { min-height: min(88svh, 720px); padding-top: 72px; } }

/* ---- 2. CATEGORÍAS (rejilla de 4 tiles: foto 4/5 + nombre + enlace "Ver") ---- */
.cmd-home-cats-sec { background: var(--cmd-paper); padding-block: clamp(3rem, 6vw, 5rem); }

/* Layout: display EXPLÍCITO (Gutenberg no da flex; en Elementor lo daba .e-con).
   La rejilla es una fila de 4; cada tile es a su vez una columna (foto sobre meta). */
.cmd-home-cats-sec .cmd-home-cats-grid { display: flex; gap: clamp(1.2rem, 2.5vw, 2rem); }
.cmd-home-cats-sec .cmd-home-cat { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }

/* Foto: wp:image (figure > a > img). El fondo de recorte (var(--cmd-band)) y el zoom
   de hover ya viven en components.css sobre .cmd-home-cat-img img; no se duplican aquí. */
.cmd-home-cats-sec .cmd-home-cat-img { margin: 0; }
.cmd-home-cats-sec .cmd-home-cat-img a { display: block; }
.cmd-home-cats-sec .cmd-home-cat-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--cmd-r-md); margin: 0 0 14px; }

/* Meta: nombre a la izquierda, "Ver →" a la derecha, misma línea base. */
.cmd-home-cats-sec .cmd-home-cat-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }

/* Tipografía anclada al root (.cmd-home-cats-sec .cmd-...) para ganar a base.css. */
.cmd-home-cats-sec .cmd-home-cat-name { margin: 0; font-family: var(--cmd-font-display); font-size: 20px; font-weight: 480; color: var(--cmd-ink); letter-spacing: -.01em; }
.cmd-home-cats-sec .cmd-home-cat-link { margin: 0; }
.cmd-home-cats-sec .cmd-home-cat-link a { display: inline-flex; align-items: center; gap: 4px; font-family: var(--cmd-font-body); font-size: 14px; font-weight: 600; color: var(--cmd-green); text-decoration: none; }
.cmd-home-cats-sec .cmd-home-cat-link a span { display: inline-block; transition: transform .2s; }
.cmd-home-cats-sec .cmd-home-cat:hover .cmd-home-cat-link a span { transform: translateX(4px); }

/* Móvil/tablet: 2 columnas y meta apilada (nombres largos como "Bases y canapés"
   no caben junto a "Ver →" en 2 columnas; se apila siempre, no solo el más largo). */
@media (max-width: 880px) {
  .cmd-home-cats-sec .cmd-home-cats-grid { flex-wrap: wrap; }
  .cmd-home-cats-sec .cmd-home-cat { flex: 1 1 42%; width: 42%; }
  .cmd-home-cats-sec .cmd-home-cat-meta { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ---- 3. BESTSELLERS (shortcode [products ids=...] → `ul.products li.product`) ---- */
/* Port fiel al ORIGINAL: el bloque product-collection no renderiza de forma
   determinista desde post_content crudo (necesita inicializarse en el editor; se
   colaban productos por defecto). El shortcode `[products ids="..." orderby="post__in"]`
   renderiza server-side los IDs exactos con el markup clasico `ul.products li.product`,
   que es justo lo que el custom_css original estilaba. Los IDs (destacados de Woo) se
   editan en el pattern o marcando la estrella en el admin. */
.cmd-home-best-sec {
  background: var(--cmd-panel);
  border-top: 1px solid var(--cmd-line);
  border-bottom: 1px solid var(--cmd-line);
}
.cmd-home-best-sec .cmd-home-best-head {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.cmd-home-best-sec .cmd-home-best-h {
  margin: 0; font-family: var(--cmd-font-display); font-weight: 480;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); color: var(--cmd-ink);
}
/* rejilla clasica de Woo: 4 columnas, sin floats. !important gana a woocommerce.css
   (igual que en el original Elementor). */
/* .cmd-scope delante + !important en grid-template: la hoja clasica de Woo trae
   `.woocommerce ul.products` con su propia rejilla y mayor especificidad; sin esto
   salian 3 columnas + 1 en vez de 4. */
.cmd-scope .cmd-home-best-w ul.products {
  display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 26px; margin: 0; padding: 0;
}
/* el clearfix ::before/::after de Woo (display:table) se convierte en un ITEM del
   grid y ocupa la primera celda, empujando las 4 tarjetas una columna (la 4a envuelve).
   .cmd-scope + !important para matarlo de verdad. */
.cmd-scope .cmd-home-best-w ul.products::before,
.cmd-scope .cmd-home-best-w ul.products::after { display: none !important; content: none !important; }
/* anatomia de alturas iguales (G4-polish): mismo contrato de tarjeta que el
   archivo y los related de la PDP; precio anclado abajo, botones alineados. */
.cmd-home-best-w ul.products li.product {
  width: auto !important; margin: 0 !important; float: none !important; padding: 0; text-align: left;
  display: flex; flex-direction: column;
}
.cmd-home-best-w ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex; flex-direction: column; flex: 1 1 auto; text-decoration: none;
}
.cmd-home-best-w ul.products li.product a img {
  border-radius: var(--cmd-r-sm); margin-bottom: 12px; background: var(--cmd-band);
  aspect-ratio: 4 / 3; object-fit: cover; width: 100% !important; height: auto !important;
}
.cmd-home-best-w ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--cmd-font-display); font-size: 17px; color: var(--cmd-ink); padding: 0;
  font-weight: 480; letter-spacing: -.01em; line-height: 1.25;
}
.cmd-home-best-w ul.products li.product .price {
  font-family: var(--cmd-font-body); color: var(--cmd-ink); font-weight: 600; font-size: 14.5px;
  display: block; margin: auto 0 0; padding-top: 4px;
}
.cmd-home-best-w ul.products li.product .price del { opacity: .4; font-weight: 400; margin-right: 5px; }
.cmd-home-best-w ul.products li.product .star-rating,
.cmd-home-best-w ul.products li.product .onsale { display: none !important; }
.cmd-home-best-w ul.products li.product .button {
  background: var(--cmd-green) !important; color: #FDFBF7 !important;
  border: 0 !important; border-radius: var(--cmd-r-sm); margin-top: 12px !important;
  padding: 13px 16px !important; font-family: var(--cmd-font-body) !important; font-size: 14px !important;
  font-weight: 600 !important; text-transform: none !important; width: 100%; text-align: center;
  transition: background .2s;
}
.cmd-home-best-w ul.products li.product .button:hover {
  background: var(--cmd-green-deep) !important; color: #FDFBF7 !important;
}
.cmd-home-best-w ul.products li.product .added_to_cart { display: none; }
@media (max-width: 880px) {
  /* .cmd-scope + !important: la regla base es `.cmd-scope ... repeat(4,1fr)!important`;
     sin esto la media query perdia y se quedaban 4 columnas en movil (overflow). */
  .cmd-scope .cmd-home-best-w ul.products { grid-template-columns: 1fr 1fr !important; gap: 18px; }
}

/* ---- 4. COMO ELEGIR (3 criterios en columnas: h3 + texto + enlace a la guia).
   El LAYOUT de rejilla ya vive en components.css bajo `.cmd-scope .cmd-guide-*`
   (display:grid, columnas auto-fit responsive, gap, align, y el min-width de
   .cmd-guide-i / el margin-bottom de .cmd-guide-head), compartido con el
   shortcode [cmd_guia] de la PDP: NO se redeclara aqui (bloque "HUECOS MUERTOS").
   El markup de bloques APLANA la clase sobre el propio h2/h3/p, asi que los
   selectores descendientes de components (.cmd-guide-h h3, .cmd-guide-t p) ya no
   casan: la tipografia se aporta aqui ANCLADA al root para ganar a base.css. ---- */
.cmd-guide-sec { background: var(--cmd-paper); padding-block: clamp(3.5rem, 7vw, 6rem); }
.cmd-guide-sec .cmd-guide-head { text-align: center; }
.cmd-guide-sec .cmd-guide-title {
  margin: 0; font-family: var(--cmd-font-display); font-weight: 480;
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); color: var(--cmd-ink);
}
.cmd-guide-sec .cmd-guide-h {
  margin: 0 0 10px; font-family: var(--cmd-font-display); font-weight: 480;
  font-size: 20px; letter-spacing: -.01em; color: var(--cmd-ink);
}
.cmd-guide-sec .cmd-guide-t {
  margin: 0; font-family: var(--cmd-font-body); font-size: 14.5px;
  line-height: 1.65; color: var(--cmd-text);
}
.cmd-guide-sec .cmd-home-guide-more { margin: clamp(2rem, 4vw, 3rem) 0 0; text-align: center; }
.cmd-guide-sec .cmd-home-guide-more a {
  font-family: var(--cmd-font-body); font-size: 14px; font-weight: 600;
  color: var(--cmd-green); text-decoration: none;
}
.cmd-guide-sec .cmd-home-guide-more a:hover { color: var(--cmd-green-deep); }

/* ---- 5. BANDA LOCAL (banner editorial foto+degradado: titular mega y CTA ghost) ----
   El contenedor .cmd-editorial (flex column, justify-end, ::after, radio, min-height)
   viene de components.css: aqui NO se redefine. Se portan solo la banda, la foto, la
   tipografia sobre la foto y el CTA ghost. La foto de fachada es mas clara que el resto
   de banners, por eso el ::before de contraste extra vive solo en esta instancia
   (.cmd-home-local). Tipografia anclada al root (.cmd-ed-sec .cmd-x) para ganar a base.css. */
.cmd-ed-sec { background: var(--cmd-paper); padding-block: clamp(2rem, 4vw, 3.5rem); }

/* foto a sangre del banner (components.css estila .cmd-editorial-bg, no .cmd-ed-photo) */
.cmd-ed-sec .cmd-ed-photo { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; z-index: 0; }
.cmd-ed-sec .cmd-ed-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; max-width: none; }

/* refuerzo de contraste SOLO en esta instancia (fachada mas clara que brand-editorial) */
.cmd-ed-sec .cmd-home-local::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(18,19,22,.6) 0%, rgba(18,19,22,.25) 45%, rgba(18,19,22,.05) 70%);
}

/* eyebrow del banner: slot compartido con otras plantillas, SIN uso en la home.
   La base tipografica la da .cmd-eyebrow (base.css); aqui solo posicion sobre la foto */
.cmd-ed-sec .cmd-ed-eye {
  position: relative; z-index: 2; width: 100%;
  margin: 0 0 10px; padding: 0 clamp(1.5rem, 4vw, 3rem);
  color: rgba(244,240,232,.82); white-space: nowrap;
}

/* titular mega (h2), anclado al root para ganar tamano/color a base.css (.cmd-scope h2) */
.cmd-ed-sec .cmd-ed-mega {
  position: relative; z-index: 2; width: 100%; max-width: 640px;
  margin: 0; padding: 0 clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  font-family: var(--cmd-font-display); font-weight: 480;
  font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.9rem); line-height: 1.05;
  letter-spacing: -.018em; color: var(--cmd-on-dark);
}

/* CTA ghost (enlace a /contacto/), anclado para ganar color/subrayado a base.css */
.cmd-ed-sec .cmd-home-ed-cta {
  position: relative; z-index: 2; margin: 0;
  padding: 0 clamp(1.5rem, 4vw, 3rem) clamp(1.8rem, 4vw, 2.8rem);
}
.cmd-ed-sec .cmd-home-ed-cta a {
  display: inline-block; background: transparent; color: var(--cmd-on-dark);
  border: 1px solid rgba(244,240,232,.5); border-radius: var(--cmd-r-sm);
  padding: 13px 26px; font-family: var(--cmd-font-body); font-size: 14px; font-weight: 600;
  text-decoration: none; transition: background .2s, border-color .2s;
}
.cmd-ed-sec .cmd-home-ed-cta a:hover {
  background: rgba(244,240,232,.14); border-color: var(--cmd-on-dark); text-decoration: none;
}

/* ---- 6. SERVICIO (3 tiles: foto 4/3 + h3 + texto; mismo lenguaje de tile que Nosotros) ---- */
.cmd-trust2-sec { background: var(--cmd-paper); padding-block: clamp(3rem, 6vw, 5rem); }
.cmd-trust2-sec .cmd-tiles { display: flex; gap: clamp(1.2rem, 2.5vw, 2rem); }
.cmd-trust2-sec .cmd-tile { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
.cmd-trust2-sec .cmd-tile-img { width: 100%; margin: 0 0 16px; }
.cmd-trust2-sec .cmd-tile-img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--cmd-r-md); background: var(--cmd-panel); }
.cmd-trust2-sec .cmd-tile-h { margin: 0 0 8px; font-family: var(--cmd-font-display); font-size: 19px; font-weight: 480; color: var(--cmd-ink); letter-spacing: -.01em; }
.cmd-trust2-sec .cmd-tile-t { margin: 0; font-size: 14px; line-height: 1.6; color: var(--cmd-text); max-width: 36ch; }
@media (max-width: 880px) {
  .cmd-trust2-sec .cmd-tiles { flex-wrap: wrap; }
  .cmd-trust2-sec .cmd-tile { flex: 1 1 100%; width: 100%; }
}

/* ---- 7. HOME · REVISTA (dynamic-query: wp:query + wp:post-template con los 3
   ultimos posts; tarjeta .cmd-rev-i portada del componente revista del payload.
   El <a> unico que envolvia la tarjeta en Elementor se descompone en enlaces
   nativos: titulo (post-title isLink) + "Leer el articulo" (read-more)) ---- */
.cmd-rev-sec { background: var(--cmd-panel); border-top: 1px solid var(--cmd-line); padding-block: clamp(3rem, 6vw, 5rem); }

/* Cabecera: "ver todos" alineado a la derecha, titular debajo (display explicito:
   en Elementor .cmd-rev-head ya era flex; un Group de bloques no) */
.cmd-rev-sec .cmd-rev-head { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.cmd-rev-sec .cmd-rev-all { margin: 0; font-size: 13px; }
.cmd-rev-sec .cmd-rev-all a { color: var(--cmd-ink); text-decoration: none; font-weight: 500; }
.cmd-rev-sec .cmd-rev-all a:hover { color: var(--cmd-green); text-decoration: none; }
.cmd-rev-sec .cmd-rev-title { margin: 6px 0 26px; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); line-height: var(--cmd-lh-snug); color: var(--cmd-ink); font-weight: 480; }

/* Grid de 3 tarjetas: el <ul> de post-template es .cmd-rev; cada <li> es la card */
.cmd-rev-sec .cmd-rev { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); margin: 0; padding: 0; list-style: none; }
.cmd-rev-sec .cmd-rev > li.wp-block-post { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 22px; background: var(--cmd-paper); border: 1px solid var(--cmd-line); border-radius: var(--cmd-r-md); transition: border-color .15s; }
.cmd-rev-sec .cmd-rev > li.wp-block-post:hover { border-color: var(--cmd-ink); }

/* Rotulo fecha · categoria (sans uppercase tracked muted, NO mono: DESIGN.md
   prohibe labels en mono; el "·" separa post-date de post-terms) */
.cmd-rev-sec .cmd-rev-k { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--cmd-muted); }
.cmd-rev-sec .cmd-rev-k .wp-block-post-date,
.cmd-rev-sec .cmd-rev-k .wp-block-post-terms { margin: 0; font-family: var(--cmd-font-body); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--cmd-muted); }
.cmd-rev-sec .cmd-rev-k .wp-block-post-terms a { color: var(--cmd-muted); text-decoration: none; font-weight: inherit; }
.cmd-rev-sec .cmd-rev-k .wp-block-post-terms a:hover { color: var(--cmd-green); text-decoration: none; }
.cmd-rev-sec .cmd-rev-k .wp-block-post-terms::before { content: "·"; margin-inline-end: 6px; }

/* Titulo Fraunces (enlace al post) */
.cmd-rev-sec .cmd-rev-t { margin: 0; font-family: var(--cmd-font-display); font-size: 19px; font-weight: 480; line-height: 1.25; letter-spacing: -.01em; color: var(--cmd-ink); }
.cmd-rev-sec .cmd-rev-t a { color: var(--cmd-ink); text-decoration: none; }
.cmd-rev-sec .cmd-rev-t a:hover { color: var(--cmd-green); text-decoration: none; }

/* "Leer el articulo" (read-more) con la flecha animada via ::after
   (el span .cmd-rev-ar del original no cabe en el texto plano de read-more) */
.cmd-rev-sec .cmd-rev-m { margin-top: auto; padding-top: 8px; font-family: var(--cmd-font-body); font-size: 13px; color: var(--cmd-green); text-decoration: none; }
.cmd-rev-sec .cmd-rev-m:hover { text-decoration: none; }
.cmd-rev-sec .cmd-rev-m::after { content: "→"; display: inline-block; margin-inline-start: 6px; transition: transform .2s; }
.cmd-rev-sec .cmd-rev > li.wp-block-post:hover .cmd-rev-m::after { transform: translateX(4px); }

@media (max-width: 880px) { .cmd-rev-sec .cmd-rev { grid-template-columns: 1fr; } }

/* ---- CABECERA DE PÁGINA · genérica (eyebrow + h1 + subtítulo de lectura, centrado sobre papel) ---- */
.cmd-page-header {
  background: var(--cmd-paper);
  /* solo padding SUPERIOR: el inferior lo ponia tambien la seccion siguiente
     (.cmd-read/.cmd-faq/.cmd-read-facts-sec, todas con padding-block completo) y
     se sumaban en un hueco enorme. El gap hacia el contenido lo da la regla de
     abajo (padding-top reducido de la seccion adyacente). */
  padding: clamp(3rem, 6vw, 5.5rem) 0 0;
}
/* cabecera -> contenido (y datos destacados -> lectura): gap unico y ajustado */
.cmd-page-header + .cmd-read,
.cmd-page-header + .cmd-faq,
.cmd-page-header + .cmd-read-facts-sec,
.cmd-read-facts-sec + .cmd-read { padding-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.cmd-page-header .cmd-page-header-in {
  display: flex; flex-direction: column; align-items: center;
  max-width: 720px; margin-inline: auto; padding-inline: 24px; text-align: center;
}
.cmd-page-header .cmd-page-header-eye { margin: 0 0 14px; }
.cmd-page-header .cmd-page-header-h1 {
  margin: 0; font-family: var(--cmd-font-display); font-weight: 480;
  font-size: var(--cmd-fs-h1); line-height: 1.06; letter-spacing: -.018em; color: var(--cmd-ink);
}
.cmd-page-header .cmd-page-header-sub {
  margin: 18px 0 0; max-width: 60ch; font-family: var(--cmd-font-serif);
  font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); line-height: 1.5; color: var(--cmd-ink);
}

/* ---- NOSOTROS · 1. HERO (cabecera de página: eyebrow + h1 grande + lead serif, centrado sobre papel) ---- */
.cmd-ab-hero-sec {
  background: var(--cmd-paper);
  padding-block: clamp(3.5rem, 7vw, 6rem);
  padding-inline: var(--cmd-s5);
}
.cmd-ab-hero { max-width: 760px; margin: 0 auto; text-align: center; }
.cmd-ab-hero-sec .cmd-eyebrow { margin: 0 0 16px; }
.cmd-ab-hero-sec .cmd-ab-h1 {
  margin: 0 0 22px;
  font-family: var(--cmd-font-display); font-weight: 480;
  font-size: var(--cmd-fs-display); line-height: 1.04; letter-spacing: -.02em;
  color: var(--cmd-ink);
}
.cmd-ab-hero-sec .cmd-ab-lead {
  margin: 0 auto; max-width: 56ch;
  font-family: var(--cmd-font-serif);
  font-size: clamp(1.1rem, 1.02rem + .4vw, 1.3rem); line-height: 1.5;
  color: var(--cmd-text);
}

/* ============================================================
   NOSOTROS
   ============================================================ */

/* ---- N. NOSOTROS · Historia (foto de la tienda a un lado + copy al otro, asimetrico) ---- */
.cmd-ab-sec {
  background: var(--cmd-paper);
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
/* Fila asimetrica: en Elementor era e-flex; un Group no. display:flex EXPLICITO.
   El .cmd-container del original se pliega aqui (max-width + centrado + padding-inline)
   para no depender de .cmd-scope y quitar un nivel de anidacion (como el HERO). */
.cmd-ab-sec .cmd-ab-row {
  display: flex;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
  max-width: var(--cmd-container);
  margin-inline: auto;
  padding-inline: var(--cmd-s5);
}
.cmd-ab-sec .cmd-ab-img { flex: 1 1 0; min-width: 0; margin: 0; }
.cmd-ab-sec .cmd-ab-img img {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: var(--cmd-r-md); background: var(--cmd-panel);
}
.cmd-ab-sec .cmd-ab-tx {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 16px;
}
/* Tipografia anclada al root (0,2,0) para ganar a base.css .cmd-scope p (0,1,1). */
.cmd-ab-sec .cmd-ab-p {
  margin: 0;
  font-family: var(--cmd-font-body);
  font-size: 16px; line-height: 1.7;
  color: var(--cmd-text); max-width: 52ch;
}
@media (max-width: 880px) {
  .cmd-ab-sec .cmd-ab-row { flex-wrap: wrap; }
  .cmd-ab-sec .cmd-ab-img,
  .cmd-ab-sec .cmd-ab-tx { flex: 1 1 100%; }
}

/* ---- DATOS DESTACADOS (3 mini-datos hairline: etiqueta + valor · reutilizable envios/pagos) ---- */
.cmd-read-facts-sec { background: var(--cmd-paper); padding-block: clamp(3rem, 6vw, 5.5rem); }
.cmd-read-facts-sec .cmd-read-facts {
  display: flex; flex-direction: column;
  max-width: 720px; margin: 0 auto; padding-inline: 24px;
  border-top: 1px solid var(--cmd-line);
}
.cmd-read-facts-sec .cmd-read-fact {
  display: flex; gap: 18px; align-items: baseline;
  border-bottom: 1px solid var(--cmd-line); padding: 13px 2px;
}
.cmd-read-facts-sec .cmd-rf-k {
  flex: 0 0 auto; min-width: 150px; margin: 0;
  font-family: var(--cmd-font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cmd-green);
}
.cmd-read-facts-sec .cmd-rf-v {
  flex: 1 1 auto; margin: 0;
  font-family: var(--cmd-font-body); font-size: 14.5px; color: var(--cmd-ink);
}
@media (max-width: 600px) {
  .cmd-read-facts-sec .cmd-read-fact { flex-wrap: wrap; gap: 2px; }
  .cmd-read-facts-sec .cmd-rf-k { min-width: 0; flex: 1 1 100%; }
}

/* ---- N. CUERPO DE LECTURA (columna de lectura centrada + prosa; páginas de texto/legales) ---- */
/* Flujo de bloque, NO flex: una columna de lectura es texto que fluye, no un
   layout flex como el hero. Por eso ningún rótulo declara display:flex aquí; el
   centrado lo da max-width + margin:auto (bloque), que es el modelo correcto
   para prosa. La regla de oro nº1 (display explícito) aplica a los layouts flex
   que Elementor daba y el port perdería; este no es uno. */
.cmd-read { background: var(--cmd-paper); padding-block: clamp(3rem, 6vw, 5.5rem); }
.cmd-read .cmd-read-in { max-width: 720px; margin: 0 auto; padding-inline: 24px; }

/* Cuerpo redactado: tipografía SIEMPRE anclada al root (.cmd-read .cmd-read-body ...)
   para ganarle a .cmd-scope h2/h3/p de base.css (0,1,1). Los enlaces (subrayado
   que se dibuja) y el <strong> los ponen base.css y components.css
   (.cmd-scope .cmd-read-body a): aquí NO se duplican. */
.cmd-read .cmd-read-body { font-family: var(--cmd-font-body); color: var(--cmd-text); }
.cmd-read .cmd-read-body > *:first-child { margin-top: 0; }
.cmd-read .cmd-read-body p { font-size: 17px; line-height: 1.75; margin: 0 0 1.1em; max-width: 66ch; }
.cmd-read .cmd-read-body h1 { display: none; }
.cmd-read .cmd-read-body h2 { font-family: var(--cmd-font-display); font-weight: 480; font-size: 26px; line-height: 1.15; letter-spacing: -.012em; color: var(--cmd-ink); margin: 48px 0 14px; }
.cmd-read .cmd-read-body h3 { font-family: var(--cmd-font-display); font-weight: 480; font-size: 20px; color: var(--cmd-ink); margin: 30px 0 8px; }
.cmd-read .cmd-read-body h4 { font-family: var(--cmd-font-body); font-weight: 600; font-size: 16px; color: var(--cmd-ink); margin: 24px 0 8px; }
.cmd-read .cmd-read-body ul,
.cmd-read .cmd-read-body ol { margin: 0 0 1.1em; padding-left: 1.3em; max-width: 66ch; }
.cmd-read .cmd-read-body li { font-size: 17px; line-height: 1.7; margin: 0 0 .45em; }
.cmd-read .cmd-read-body li::marker { color: var(--cmd-muted); }
.cmd-read .cmd-read-body blockquote { font-family: var(--cmd-font-serif); font-style: italic; font-size: 19px; color: var(--cmd-ink); border-left: 2px solid var(--cmd-green); padding-left: 20px; margin: 1.4em 0; }
.cmd-read .cmd-read-body img { max-width: 100%; height: auto; border-radius: var(--cmd-r-md); margin: 1.2em 0; }

/* ============================================================
   CONTACTO
   ============================================================ */

/* ---- N. CONTACTO (datos de tienda + formulario CF7 + mapa) ----
   Port de contacto-custom.css (verificado contra post-173.css servido).
   Cabecera renombrada cmd-read* -> cmd-contact* para auto-contener la
   seccion bajo su root; clases especificas cmd-c* conservadas verbatim.
   display:flex EXPLICITO en cada rotulo de layout; tipografia anclada al
   root (.cmd-contact .cmd-<rotulo>) para ganar a base.css. */
.cmd-contact { background: var(--cmd-paper); padding-block: clamp(3rem, 6vw, 5.5rem); }
.cmd-contact .cmd-contact-in { max-width: 1100px; margin: 0 auto; padding-inline: 24px; }

/* cabecera */
.cmd-contact .cmd-contact-head { margin-bottom: clamp(2rem, 4vw, 3rem); text-align: center; }
.cmd-contact .cmd-contact-eye { margin: 0 0 14px; }
.cmd-contact .cmd-contact-h1 {
  margin: 0; font-family: var(--cmd-font-display); font-weight: 480;
  font-size: var(--cmd-fs-h1); line-height: 1.06; letter-spacing: -.018em; color: var(--cmd-ink);
}

/* dos columnas: info (mas estrecha) + formulario (mas ancho) */
.cmd-contact .cmd-ccols {
  display: flex; flex-direction: row; align-items: flex-start;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

/* columna de datos: filas apiladas con hairline entre ellas */
.cmd-contact .cmd-cinfo { display: flex; flex-direction: column; flex: .85 1 0; min-width: 0; }
.cmd-contact .cmd-cinfo-row {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 2px;
  border-bottom: 1px solid var(--cmd-line);
}
.cmd-contact .cmd-cinfo-row:first-child { padding-top: 0; }
.cmd-contact .cmd-cinfo-ic { display: flex; flex: 0 0 auto; padding-top: 3px; color: var(--cmd-green); }
.cmd-contact .cmd-cinfo-ic svg { width: auto; height: 15px; fill: currentColor; display: block; }
.cmd-contact .cmd-cinfo-tx {
  flex: 1 1 auto; margin: 0; font-family: var(--cmd-font-body);
  font-size: 15.5px; line-height: 1.55; color: var(--cmd-ink);
}
.cmd-contact .cmd-cinfo-tx a { color: var(--cmd-ink); text-decoration: none; }
.cmd-contact .cmd-cinfo-tx a:hover { color: var(--cmd-green); }

/* columna del formulario (CF7 via shortcode) */
.cmd-contact .cmd-cform { display: flex; flex-direction: column; flex: 1.15 1 0; min-width: 0; }
.cmd-contact .cmd-cform-k {
  margin: 0 0 16px; font-family: var(--cmd-font-body); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cmd-muted);
}
.cmd-contact .cmd-cform-w .wpcf7-form p { margin: 0 0 14px; }
.cmd-contact .cmd-cform-w .wpcf7-form input[type=text],
.cmd-contact .cmd-cform-w .wpcf7-form input[type=email],
.cmd-contact .cmd-cform-w .wpcf7-form textarea {
  width: 100%; border: 1px solid var(--cmd-line-strong); border-radius: var(--cmd-r-sm); padding: 0 16px;
  background: #fff; font-family: var(--cmd-font-body); font-size: 15px; color: var(--cmd-ink);
  transition: border-color .15s;
}
.cmd-contact .cmd-cform-w .wpcf7-form input[type=text],
.cmd-contact .cmd-cform-w .wpcf7-form input[type=email] { min-height: 50px; }
.cmd-contact .cmd-cform-w .wpcf7-form textarea { padding-top: 14px; min-height: 130px; resize: vertical; }
.cmd-contact .cmd-cform-w .wpcf7-form input:focus,
.cmd-contact .cmd-cform-w .wpcf7-form textarea:focus { border-color: var(--cmd-ink); outline: 0; }
.cmd-contact .cmd-cform-w .wpcf7-form input[type=submit] {
  background: var(--cmd-ink); color: var(--cmd-on-dark); border: 0; border-radius: var(--cmd-r-sm);
  min-height: 52px; padding: 0 28px; font-family: var(--cmd-font-body); font-size: 15px;
  font-weight: 600; cursor: pointer; transition: background .2s;
}
.cmd-contact .cmd-cform-w .wpcf7-form input[type=submit]:hover { background: var(--cmd-green); }
.cmd-contact .cmd-cform-w .wpcf7-form-control-wrap { display: block; }
.cmd-contact .cmd-cform-w .wpcf7-not-valid-tip { font-size: 12.5px; color: var(--cmd-danger); margin-top: 4px; }
/* !important necesario: gana al CSS por defecto del plugin CF7 (que carga su hoja) */
.cmd-contact .cmd-cform-w .wpcf7-response-output {
  border-radius: var(--cmd-r-sm); font-family: var(--cmd-font-body); font-size: 13.5px;
  margin-top: 16px !important; padding: 12px 16px !important;
}

/* mapa (iframe embebido de Google Maps) */
.cmd-contact .cmd-cmap-sec { margin-top: clamp(2.5rem, 5vw, 4rem); }
.cmd-contact .cmd-cmap { border-radius: var(--cmd-r-md); overflow: hidden; border: 1px solid var(--cmd-line); }
.cmd-contact .cmd-cmap iframe { display: block; width: 100%; height: 360px; border: 0; }

/* movil: apila info y formulario */
@media (max-width: 880px) {
  .cmd-contact .cmd-ccols { flex-wrap: wrap; }
  .cmd-contact .cmd-cinfo,
  .cmd-contact .cmd-cform { flex: 1 1 100%; }
}

/* ============================================================
   AYUDA / FAQ
   ============================================================ */

/* ---- N. FAQ (columna de lectura + grupos + acordeón nativo wp:details) ---- */
.cmd-faq { background: var(--cmd-paper); padding-block: clamp(3rem, 6vw, 5.5rem); }
.cmd-faq .cmd-faq-in { max-width: 720px; margin: 0 auto; padding-inline: 24px; }

/* encabezado de página (eyebrow / h1 / entradilla) */
.cmd-faq .cmd-faq-eye { margin: 0 0 14px; }
.cmd-faq .cmd-faq-h1 {
  margin: 0; font-family: var(--cmd-font-display); font-weight: 480;
  font-size: var(--cmd-fs-h1); line-height: 1.06; letter-spacing: -.018em; color: var(--cmd-ink);
}
.cmd-faq .cmd-faq-lead {
  margin: 0 0 8px; font-family: var(--cmd-font-serif);
  font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); line-height: 1.5;
  color: var(--cmd-ink); max-width: 60ch;
}

/* título de cada grupo de preguntas (h2) */
.cmd-faq .cmd-faq-group-h {
  margin: clamp(2rem, 4vw, 3rem) 0 4px;
  font-family: var(--cmd-font-display); font-weight: 480;
  font-size: 22px; line-height: 1.28; letter-spacing: -.012em; color: var(--cmd-ink);
}
.cmd-faq .cmd-faq-lead + .cmd-faq-group-h { margin-top: clamp(1rem, 2vw, 1.5rem); }

/* acordeón nativo: <details>/<summary>, sin JS propio.
   El borde superior del grupo lo aporta .cmd-acc (components.css); aquí van
   el ítem, el rótulo clicable y el panel. El color/subrayado del enlace de la
   respuesta ya lo da .cmd-scope .cmd-acc-tx a (components.css): no se duplica. */
.cmd-faq .cmd-acc-item { border-bottom: 1px solid var(--cmd-line); }
.cmd-faq .cmd-acc-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer; padding: 15px 4px; list-style: none;
  font-family: var(--cmd-font-display); font-size: 17px; font-weight: 480;
  color: var(--cmd-ink); letter-spacing: -.01em; line-height: 1.3;
}
.cmd-faq .cmd-acc-item > summary::-webkit-details-marker { display: none; }
/* el "+" que gira a "×" al abrir (sustituye al icono FontAwesome del original) */
.cmd-faq .cmd-acc-item > summary::after {
  content: "+"; flex: 0 0 auto;
  font-family: var(--cmd-font-body); font-size: 20px; font-weight: 400; line-height: 1;
  color: var(--cmd-muted); transition: transform .25s var(--cmd-ease);
}
.cmd-faq .cmd-acc-item[open] > summary::after { transform: rotate(45deg); }
/* respuesta */
.cmd-faq .cmd-acc-tx {
  margin: 0; padding: 0 4px 18px;
  font-size: 15px; line-height: 1.72; color: var(--cmd-text); max-width: 64ch;
}

/* ============================================================
   ARCHIVO DE PRODUCTO (tienda + categoría) · G4a
   Port del custom_css del template Elementor 25612 a bloques. El loop de
   productos lo renderiza el bloque woocommerce/legacy-template (markup clásico
   ul.products), envuelto en .cmd-arch-grid-w para que su CSS aplique. El título
   y el breadcrumb clásicos se suprimen por hooks (functions.php); la cabecera
   (h1 + count + chips) la pone el template.
   ============================================================ */
.cmd-arch-head-sec { background: var(--cmd-paper); padding-block: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); }
.cmd-arch-head { text-align: center; max-width: 900px; margin: 0 auto; padding-inline: 24px; }
/* h1 anclado al root para ganar a base.css (.cmd-scope h1 = 0,1,1) */
.cmd-arch-head .cmd-arch-h1 {
  font-family: var(--cmd-font-display); font-weight: 480; font-size: var(--cmd-fs-display);
  line-height: 1.02; letter-spacing: -.02em; color: var(--cmd-ink); margin: 0;
}
.cmd-arch-head .cmd-arch-count {
  margin-top: 14px; font-family: var(--cmd-font-mono); font-size: 12px;
  letter-spacing: .04em; color: var(--cmd-muted);
}
.cmd-arch-head .cmd-arch-count p { margin: 0; font: inherit; color: inherit; }
/* chips de subcategoría: pills fantasma, flex explícito (el Group no lo da) */
.cmd-arch-head .cmd-arch-chips-wrap {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
}
.cmd-arch-head .cmd-arch-chips-wrap:not(:has(.cmd-archchip)) { display: none; }
/* chips de subcategoria en glass ligero (G5-polish): pills de navegacion sobre
   el papel, cristal sutil con hairline; al hover se marcan en tinta */
.cmd-archchip {
  display: inline-block; padding: 9px 20px; border: 1px solid var(--cmd-line-strong);
  border-radius: var(--cmd-r-pill); font-family: var(--cmd-font-body); font-size: 13.5px; font-weight: 500;
  color: var(--cmd-ink); text-decoration: none;
  background: rgba(252, 250, 245, .45);
  -webkit-backdrop-filter: var(--cmd-glass2-blur-lite); backdrop-filter: var(--cmd-glass2-blur-lite);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: background .15s, border-color .15s;
}
.cmd-archchip:hover { background: rgba(252, 250, 245, .85); border-color: var(--cmd-ink); }

/* banner editorial: SOLO en colchones (body class puesta en functions.php) */
.cmd-arch-editorial-sec { display: none; padding-block: clamp(1rem, 2vw, 1.5rem); }
body.cmd-arch-cat-colchones .cmd-arch-editorial-sec { display: block; }
.cmd-arch-editorial-sec .cmd-container { padding-inline: 24px; }
.cmd-arch-editorial-sec .cmd-editorial {
  display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch;
  position: relative; overflow: hidden; min-height: clamp(360px, 40vw, 540px);
  border-radius: var(--cmd-r-md); background: #241f1a;
}
.cmd-arch-editorial-sec .cmd-ed-photo { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; z-index: 0; }
.cmd-arch-editorial-sec .cmd-ed-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; max-width: none; }
.cmd-arch-editorial-sec .cmd-editorial::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(18,19,22,.14) 0%, rgba(18,19,22,.02) 34%, rgba(18,19,22,.74) 100%),
              linear-gradient(90deg, rgba(18,19,22,.44) 0%, rgba(18,19,22,.12) 46%, rgba(18,19,22,0) 76%);
}
.cmd-arch-editorial-sec .cmd-ed-mega {
  position: relative; z-index: 2; width: 100%; margin: 0;
  padding: 0 clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  font-family: var(--cmd-font-display); font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.9rem);
  line-height: 1.05; font-weight: 480; color: var(--cmd-on-dark); letter-spacing: -.018em; max-width: 640px;
}

/* cuerpo: ordering + rejilla (legacy loop) + paginación */
.cmd-arch-body-sec { background: var(--cmd-paper); padding-block: clamp(1rem, 3vw, 2rem) clamp(3rem, 6vw, 5rem); }
.cmd-arch-body-sec .cmd-arch-grid-w { max-width: var(--cmd-container); margin-inline: auto; padding-inline: var(--cmd-s5); }
.cmd-arch-grid-w .woocommerce-result-count,
.cmd-arch-grid-w .woocommerce-breadcrumb { display: none; }
.cmd-arch-grid-w .woocommerce-ordering { margin: 0 0 clamp(1.5rem, 3vw, 2.2rem); text-align: right; }
.cmd-arch-grid-w .woocommerce-ordering select.orderby {
  min-height: 46px; border: 1px solid var(--cmd-line-strong); border-radius: var(--cmd-r-sm); padding: 0 34px 0 14px;
  background-color: #fff; font-family: var(--cmd-font-body); font-size: 13.5px; color: var(--cmd-ink); cursor: pointer;
}
.cmd-scope .cmd-arch-grid-w ul.products {
  display: grid !important; grid-template-columns: repeat(4, 1fr) !important;
  gap: clamp(1.5rem, 3vw, 2.2rem) 22px; margin: 0; padding: 0;
}
.cmd-scope .cmd-arch-grid-w ul.products::before,
.cmd-scope .cmd-arch-grid-w ul.products::after { display: none !important; content: none !important; }
/* anatomia de tarjeta con alturas IGUALES (G4-polish): la fila entera alinea
   titulo/descripcion arriba y precio+boton abajo, aunque un titulo ocupe 2
   lineas y otro 1. El <a> del loop es flex column y el precio se ancla al
   fondo con margin-top:auto; el boton (fuera del <a>) cae alineado debajo. */
.cmd-arch-grid-w ul.products li.product {
  width: auto !important; margin: 0 !important; float: none !important; padding: 0;
  text-align: left; display: flex; flex-direction: column;
}
.cmd-arch-grid-w ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex; flex-direction: column; flex: 1 1 auto; text-decoration: none;
}
.cmd-arch-grid-w ul.products li.product a img {
  border-radius: var(--cmd-r-sm); margin-bottom: 14px; background: var(--cmd-band);
  aspect-ratio: 4 / 3; object-fit: cover; width: 100% !important; height: auto !important;
}
.cmd-arch-grid-w ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--cmd-font-display); font-size: 17px; color: var(--cmd-ink); padding: 0;
  font-weight: 480; letter-spacing: -.01em; line-height: 1.25; margin: 0 0 4px;
}
/* mini-descripcion del producto en la tarjeta (hook en functions.php): para que
   quien no sabe que colchon es para el pueda orientarse SIN entrar en cada ficha.
   Jerarquia visual por `order` (el DOM trae titulo→precio→desc): nombre → que es
   → precio anclado abajo, junto al boton. */
.cmd-arch-grid-w ul.products li.product a img { order: 0; }
.cmd-arch-grid-w ul.products li.product .woocommerce-loop-product__title { order: 1; }
.cmd-arch-grid-w ul.products li.product .cmd-loop-desc {
  order: 2;
  margin: 2px 0 10px; font-family: var(--cmd-font-body); font-size: 13.5px;
  line-height: 1.55; color: var(--cmd-text); opacity: .85;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cmd-arch-grid-w ul.products li.product .price { order: 3; font-family: var(--cmd-font-body); color: var(--cmd-ink); font-weight: 600; font-size: 14.5px; display: block; margin: auto 0 0; padding-top: 6px; }
.cmd-arch-grid-w ul.products li.product .price del { opacity: .4; font-weight: 400; margin-right: 5px; }
.cmd-arch-grid-w ul.products li.product .star-rating,
.cmd-arch-grid-w ul.products li.product .onsale, .cmd-arch-grid-w .onsale { display: none !important; }
.cmd-arch-grid-w ul.products li.product .button {
  /* G10h: el CTA de tarjeta pasa de fantasma a TERRACOTA (Mario: "que llame
     la atencion"); mismo lenguaje que el add-to-cart de la PDP */
  background: var(--cmd-green) !important; color: #FDFBF7 !important; border: 0 !important;
  border-radius: var(--cmd-r-sm); margin-top: 12px !important; padding: 13px 16px !important; font-family: var(--cmd-font-body) !important;
  font-size: 14px !important; font-weight: 600 !important; text-transform: none !important; width: 100%; text-align: center;
  transition: background .2s;
}
.cmd-arch-grid-w ul.products li.product .button:hover { background: var(--cmd-green-deep) !important; color: #FDFBF7 !important; }
.cmd-arch-grid-w ul.products li.product .button:active { transform: translateY(1px); }
.cmd-arch-grid-w ul.products li.product .added_to_cart { display: none; }
.cmd-arch-grid-w .woocommerce-pagination { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }
.cmd-arch-grid-w .woocommerce-pagination ul.page-numbers { display: flex; gap: 6px; justify-content: center; list-style: none; margin: 0; padding: 0; border: 0; }
.cmd-arch-grid-w .page-numbers { font-family: var(--cmd-font-body); font-size: 14px; color: var(--cmd-muted); padding: 8px 12px; border-radius: var(--cmd-r-sm); text-decoration: none; }
.cmd-arch-grid-w .page-numbers.current { color: var(--cmd-ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.cmd-arch-grid-w a.page-numbers:hover { color: var(--cmd-ink); }
@media (max-width: 960px) { .cmd-scope .cmd-arch-grid-w ul.products { grid-template-columns: repeat(2, 1fr) !important; } .cmd-arch-grid-w .woocommerce-ordering { text-align: center; } }
@media (max-width: 600px) { .cmd-scope .cmd-arch-grid-w ul.products { grid-template-columns: 1fr !important; } }

/* ============================================================
   FICHA DE PRODUCTO (PDP) · G4b
   Port del custom_css de la plantilla Elementor 25481 (25 KB) al markup de
   bloques. Reglas ya cubiertas por components.css NO se repiten: galeria
   sticky, layout de .cmd-guide-grid, grid titulo|acordeon de .cmd-specs2-in,
   motion de firmeza/capas/reveals, hover de related, fondo de packshots. El
   banner editorial (.cmd-ed-sec), los tiles (.cmd-trust2-sec) y la rejilla de
   revista los da la seccion HOME de arriba. Aqui: hero+buy-box, selector de
   medidas (chips), acordeon nativo (wp:details), firmeza (look), related e
   intro. Gating R17 por body-class (cmd-has-*, en shortcodes.php): en bloques
   no existe el wrapper .elementor-shortcode que Elementor auto-ocultaba.
   Tipografia anclada con 2 clases para ganar a base.css (.cmd-scope h/p = 0,1,1).
   ============================================================ */

/* ---- HERO: galeria (sticky, en components) + columna de compra ----
   ABOVE THE FOLD (G5-polish): el conjunto breadcrumb→titulo→precio→medida→CTA
   debe caber en 1440x900. Margenes verticales del buy-box en escala corta. */
.cmd-pdp { padding: 6px 0 0; background: var(--cmd-paper); }
.cmd-pdp .cmd-pdp-in { display: flex; align-items: flex-start; max-width: 1320px; margin: 0 auto; padding: 14px 24px 52px; gap: clamp(2.5rem, 5vw, 5rem); }
.cmd-pdp .cmd-pdp-gallery { flex: 1.45 1 0; min-width: 0; }
.cmd-pdp .cmd-pdp-info { flex: .8 1 0; min-width: 0; padding-top: 4px; position: relative; }

/* galeria clasica (woocommerce_show_product_images): ratio fijo + tiras de miniaturas */
.cmd-pgal { position: relative; }
.cmd-pgal .woocommerce-product-gallery { margin: 0; width: 100%; }
.cmd-pgal img { border-radius: var(--cmd-r-sm); }
.cmd-pgal .woocommerce-product-gallery__image > a, .cmd-pgal .woocommerce-product-gallery__image { display: block; width: 100%; }
.cmd-pgal .woocommerce-product-gallery__image > a > img, .cmd-pgal .woocommerce-product-gallery__image > img { aspect-ratio: 4/3; object-fit: cover; width: 100% !important; height: auto !important; display: block; }
.cmd-pgal .flex-control-thumbs { margin-top: 12px; display: flex; gap: 8px; padding: 0; flex-wrap: nowrap; overflow-x: auto; list-style: none; }
.cmd-pgal .flex-control-thumbs li { width: 62px !important; height: 62px !important; flex: 0 0 62px; margin: 0; }
.cmd-pgal .flex-control-thumbs img { border-radius: var(--cmd-r-sm); width: 62px !important; height: 62px !important; object-fit: cover; cursor: pointer; opacity: .5; transition: opacity .15s; }
.cmd-pgal .flex-control-thumbs img:hover, .cmd-pgal .flex-control-thumbs .flex-active { opacity: 1; }
/* el flash "¡Oferta!" (relic Woodmart) fuera en todo el scope: galeria, upsell y related.
   El shortcode de upsell/related no envuelve en .woocommerce, por eso no basta con
   .woocommerce span.onsale; el design system nunca quiere ese badge. */
.cmd-scope span.onsale, .cmd-pgal .onsale { display: none !important; }
/* badge dinamico sobre la galeria ([cmd_badge]) */
.cmd-pgal .cmd-tagbadge { position: absolute; top: 14px; left: 14px; z-index: 5; }
/* badge sobre foto: el vidrio lo pone .cmd-glass2 (la clase viene del shortcode
   [cmd_badge]); aqui tipografia y radio */
.cmd-pgal .cmd-tagbadge span {
  display: inline-block; font-family: var(--cmd-font-body); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cmd-ink);
  border-radius: var(--cmd-r-md); padding: 6px 11px;
}
body:not(.cmd-has-badge) .cmd-pgal .cmd-tagbadge { display: none; }

/* ---- BUY-BOX ---- */
.cmd-pdp-info .cmd-breadcrumb, .cmd-pdp-info .cmd-breadcrumb .woocommerce-breadcrumb { font-family: var(--cmd-font-body); font-size: 12px; letter-spacing: .02em; color: var(--cmd-muted); margin-bottom: 12px; }
.cmd-pdp-info .cmd-breadcrumb a { color: var(--cmd-muted); }
.cmd-pdp-info .cmd-breadcrumb a:hover { color: var(--cmd-ink); }
.cmd-pdp-info .cmd-ptitle h1 { font-family: var(--cmd-font-display); font-weight: 480; font-size: clamp(2rem, 1.4rem + 1.7vw, 2.7rem); line-height: 1.05; color: var(--cmd-ink); letter-spacing: -.018em; margin: 0; }
.cmd-pdp-info .cmd-rating { display: flex; gap: 12px; margin: 10px 0 14px; align-items: center; }
.cmd-pdp-info .cmd-rating-n { margin: 0; font-size: 13px; color: var(--cmd-muted); }
.cmd-pdp-info .cmd-pprice .price { margin: 0 0 2px; }
.cmd-pdp-info .cmd-pprice .woocommerce-Price-amount, .cmd-pdp-info .cmd-pprice .price ins { font-family: var(--cmd-font-body); font-weight: 600; font-size: 23px; color: var(--cmd-ink); text-decoration: none; }
.cmd-pdp-info .cmd-pprice .price del { opacity: .4; font-weight: 400; font-size: 16px; margin-right: 6px; }
.cmd-pdp-info .cmd-pprice ins, .cmd-pdp-info .cmd-pprice ins .woocommerce-Price-amount { color: var(--cmd-ink) !important; text-decoration: none !important; font-weight: 600; }
.cmd-pdp-info .cmd-pshort { margin: 12px 0 18px; font-size: 15px; line-height: 1.7; color: var(--cmd-text); max-width: 44ch; }
.cmd-pdp-info .cmd-pshort p { margin: 0 0 8px; }

/* form de compra clasico (variations_form): tabla de variaciones + select nativo (oculto por JS) */
.cmd-pcart form.cart { display: block; margin: 0; }
.cmd-pcart .quantity { display: none !important; }
.cmd-pcart .variations { margin: 0 0 14px; width: 100%; border: 0; }
.cmd-pcart .variations tr { display: block; margin-bottom: 6px; }
.cmd-pcart .variations td, .cmd-pcart .variations th { display: block; padding: 0; border: 0; width: 100%; }
.cmd-pcart .variations tr + tr { margin-top: 10px; }
.cmd-pcart .variations .label, .cmd-pcart .variations th.label { display: block !important; padding: 0 !important; }
.cmd-pcart .variations .label label { font-family: var(--cmd-font-body); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cmd-muted); margin: 0 0 8px; display: block; }
.cmd-pcart .variations select { width: 100%; min-height: 52px; border: 1px solid var(--cmd-line-strong); border-radius: var(--cmd-r-sm); padding: 0 14px; background: #fff !important; font-family: var(--cmd-font-body); font-size: 14.5px; font-weight: 500; color: var(--cmd-ink); margin: 0 0 6px; cursor: pointer; transition: border-color .15s; }
.cmd-pcart .variations select:hover, .cmd-pcart .variations select:focus { border-color: var(--cmd-ink); outline: 0; }
/* "Limpiar" fuera (G4-polish): con el selector de chips no hay estado "sin elegir"
   al que volver; el reset vaciaba el <select> pero los chips seguian marcados
   (desincronizacion visible). Ruido menos en el camino al boton de compra. */
.cmd-pcart .reset_variations { display: none !important; }
.cmd-pcart .woocommerce-variation-price .price, .cmd-pcart .woocommerce-variation-price ins, .cmd-pcart .woocommerce-variation-price ins *, .cmd-pcart .woocommerce-variation-price .price * { font-family: var(--cmd-font-body); font-size: 22px; font-weight: 600; color: var(--cmd-ink) !important; text-decoration: none !important; }
.cmd-pcart .woocommerce-variation-price del, .cmd-pcart .woocommerce-variation-price del * { font-size: 16px !important; font-weight: 400 !important; opacity: .4; color: var(--cmd-muted) !important; }
.cmd-pcart .stock, .cmd-pdp-info .stock { color: var(--cmd-muted) !important; font-size: 13px; font-weight: 400; margin-top: 4px; }
/* "100 disponibles" fuera (G5-polish): con stock normal es ruido entre el precio
   y el boton (above the fold); los estados de SIN stock si se muestran */
.cmd-pcart .stock.in-stock { display: none !important; }
.cmd-pcart .woocommerce-variation-description { display: none !important; }
.cmd-pcart .single_variation { margin: 0 0 12px; }
.cmd-pcart .woocommerce-variation-add-to-cart { margin-top: 8px; }

/* selector de medidas en 2 pasos (chips ancho/largo, JS en functions.php) */
.cmd-sel-wrap { margin: 6px 0 4px; }
.cmd-sel-row { margin-bottom: 10px; }
.cmd-sel-lbl { display: block; font-family: var(--cmd-font-body); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cmd-muted); margin: 0 0 12px; }
.cmd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cmd-chip { -webkit-appearance: none; appearance: none; position: relative; overflow: visible; min-width: 54px; min-height: 44px; padding: 0 16px; background: #fff; border: 1px solid var(--cmd-line-strong); border-radius: var(--cmd-r-sm); cursor: pointer; font-family: var(--cmd-font-body); font-size: 14px; font-weight: 600; line-height: 1; color: var(--cmd-ink); }
.cmd-chip:hover { border-color: var(--cmd-ink); background: #fff; color: var(--cmd-ink); }
.cmd-chip.is-sel, .cmd-chip.is-sel:hover { background: var(--cmd-ink); border-color: var(--cmd-ink); color: var(--cmd-on-dark); }
.cmd-chip.is-off { opacity: .3; pointer-events: none; text-decoration: line-through; }
.cmd-chip-tag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 3; white-space: nowrap; background: var(--cmd-green); color: #fff; font-size: 9px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: 2px 6px; border-radius: var(--cmd-r-sm); pointer-events: none; box-shadow: 0 1px 3px rgba(42,38,34,.18); }
.cmd-sel-out { margin: 2px 0 12px; font-family: var(--cmd-font-body); font-size: 13.5px; color: var(--cmd-text); }
.cmd-sel-out strong { color: var(--cmd-ink); font-weight: 600; }
.cmd-sel-dot { color: var(--cmd-muted); margin: 0 2px; }
.cmd-sel-help { display: inline-flex; align-items: center; gap: 6px; font-family: var(--cmd-font-body); font-size: 13px; color: var(--cmd-green); text-decoration: none; transition: color .15s; }
.cmd-sel-help:hover { color: var(--cmd-green-deep); }
.cmd-sel-help span { transition: transform .2s; }
.cmd-sel-help:hover span { transform: translateX(3px); }

/* boton anadir al carrito · CAMINO DE COMPRA EN TERRACOTA (G5-polish):
   los botones que COMPRAN llevan el acento del sistema en reposo (era solo
   hover y no destacaba sobre el resto de tinta); los de navegacion
   ("Seleccionar opciones") siguen fantasma. La vista encuentra la compra sola. */
.cmd-pdp-info .cmd-pcart .single_add_to_cart_button, .cmd-pdp-info .cmd-pcart .single_add_to_cart_button.disabled, .cmd-pdp-info .cmd-pcart .single_add_to_cart_button:disabled { background: var(--cmd-green) !important; color: #FDFBF7 !important; opacity: 1 !important; border: 0 !important; border-radius: var(--cmd-r-sm) !important; min-height: 58px !important; width: 100% !important; display: block !important; font-family: var(--cmd-font-body) !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: .01em; text-transform: none !important; transition: background .2s, box-shadow .2s; cursor: pointer; }
.cmd-pdp-info .cmd-pcart .single_add_to_cart_button.disabled, .cmd-pdp-info .cmd-pcart .single_add_to_cart_button:disabled { opacity: .55 !important; cursor: default; }
.cmd-pdp-info .cmd-pcart .single_add_to_cart_button:hover { background: var(--cmd-green-deep) !important; }
/* en las rejillas, el "Añadir al carrito" directo (producto simple, compra real)
   tambien va en terracota; "Seleccionar opciones" (navegar) queda fantasma */
.cmd-scope ul.products li.product .button.ajax_add_to_cart { background: var(--cmd-green) !important; color: #FDFBF7 !important; border-color: var(--cmd-green) !important; }
.cmd-scope ul.products li.product .button.ajax_add_to_cart:hover { background: var(--cmd-green-deep) !important; border-color: var(--cmd-green-deep) !important; color: #FDFBF7 !important; }

/* reassure + CTA tienda + paybar */
.cmd-reassure p { margin: 12px 0 14px; font-size: 12.5px; color: var(--cmd-muted); text-align: center; }
.cmd-instore { display: flex; align-items: center; gap: 11px; margin-top: 6px; padding: 14px 18px; border: 1px solid var(--cmd-line-strong); border-radius: var(--cmd-r-sm); cursor: pointer; text-decoration: none; transition: background .2s, border-color .2s; }
.cmd-instore:hover { background: var(--cmd-panel); border-color: var(--cmd-ink); }
.cmd-instore-ic { display: flex; align-items: center; color: var(--cmd-green); }
.cmd-instore-t { font-family: var(--cmd-font-body); font-size: 14px; font-weight: 500; color: var(--cmd-ink); line-height: 1.3; }
.cmd-instore-ar { margin-left: auto; display: flex; align-items: center; color: var(--cmd-muted); }
.cmd-paybar { display: flex; gap: 18px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--cmd-line); flex-wrap: wrap; justify-content: center; }
.cmd-paybar .cmd-pay-i p { margin: 0; font-size: 11.5px; color: var(--cmd-muted); letter-spacing: .02em; }
body:not(.cmd-has-garantia) .cmd-paybar-garantia { display: none; }

/* upsell "combinalo con" en el buy-box (oculto si el producto no tiene upsells).
   G4-polish: una mini-tarjeta horizontal POR FILA (dos columnas de ~200px
   partian el precio en 3 lineas). El <a> del loop encierra imagen+titulo+precio:
   con display:contents sus hijos pasan a ser celdas del grid del li
   (thumb 56px | titulo / precio), que es el layout que el markup no permitia. */
.cmd-upsell { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--cmd-line); }
.cmd-upsell:not(:has(.cmd-upsell-w ul.products)) { display: none; }
.cmd-upsell-k p { margin: 0 0 10px; font-family: var(--cmd-font-body); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cmd-muted); }
.cmd-upsell-w .up-sells > h2 { display: none !important; }
.cmd-scope .cmd-upsell-w ul.products { display: grid !important; grid-template-columns: 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cmd-upsell-w ul.products::before, .cmd-upsell-w ul.products::after { display: none !important; content: none !important; }
.cmd-upsell-w ul.products li.product {
  width: auto !important; margin: 0 !important; float: none !important; padding: 0;
  border: 1px solid var(--cmd-line); border-radius: var(--cmd-r-md); background: #fff;
  transition: border-color .15s, box-shadow .15s; list-style: none;
}
.cmd-upsell-w ul.products li.product:hover { border-color: var(--cmd-ink); box-shadow: 0 2px 10px rgba(42,38,34,.06); }
/* el grid vive en el PROPIO <a> del loop (img, h2 y precio son hijos directos):
   thumb 56px | titulo arriba / precio debajo. Toda la tarjeta es el enlace. */
.cmd-upsell-w ul.products li.product a.woocommerce-LoopProduct-link {
  display: grid !important; grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto; column-gap: 12px; row-gap: 1px;
  align-items: center; align-content: center;
  padding: 10px 14px 10px 10px; text-decoration: none;
}
.cmd-upsell-w ul.products li.product a img { width: 56px !important; height: 56px !important; object-fit: cover; border-radius: var(--cmd-r-sm); margin: 0; grid-column: 1; grid-row: 1 / 3; background: var(--cmd-band); }
.cmd-upsell-w ul.products li.product .woocommerce-loop-product__title { display: block !important; font-family: var(--cmd-font-body); font-size: 13px; font-weight: 600; color: var(--cmd-ink); padding: 0; margin: 0; line-height: 1.35; grid-column: 2; grid-row: 1; align-self: end; }
.cmd-upsell-w ul.products li.product .price { font-size: 12.5px; color: var(--cmd-muted); margin: 0; grid-column: 2; grid-row: 2; align-self: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-upsell-w ul.products li.product .price del { display: none; }
.cmd-upsell-w ul.products li.product .button, .cmd-upsell-w ul.products li.product .added_to_cart, .cmd-upsell-w ul.products li.product .star-rating { display: none !important; }

/* ---- INTRO ---- */
.cmd-intro { background: var(--cmd-paper); border-top: 1px solid var(--cmd-line); }
.cmd-intro .cmd-intro-in { max-width: 980px; margin: 0 auto; padding-inline: 24px; }
.cmd-intro .cmd-sc-intro .cmd-eyebrow { margin: 0 0 14px; }
.cmd-intro .cmd-intro-p { margin: 0; font-family: var(--cmd-font-display); font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem); line-height: 1.32; color: var(--cmd-ink); letter-spacing: -.01em; max-width: 34ch; }
.cmd-intro .cmd-intro-p strong { font-weight: 560; color: var(--cmd-ink); }
body:not(.cmd-has-intro) .cmd-intro { display: none; }

/* ---- SPECS2 + FAQ: acordeon nativo (wp:details), como la pagina FAQ ---- */
.cmd-faq-sec { background: var(--cmd-panel); border-top: 1px solid var(--cmd-line); }
.cmd-specs2 .cmd-specs2-h h2 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); margin: 0 0 28px; color: var(--cmd-ink); font-weight: 480; }
.cmd-specs2 .cmd-acc-item { border-bottom: 1px solid var(--cmd-line); }
.cmd-specs2 .cmd-acc-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; padding: 15px 4px; list-style: none; font-family: var(--cmd-font-display); font-size: 18px; font-weight: 480; color: var(--cmd-ink); letter-spacing: -.01em; line-height: 1.3; }
.cmd-specs2 .cmd-acc-item > summary::-webkit-details-marker { display: none; }
.cmd-specs2 .cmd-acc-item > summary::after { content: "+"; flex: 0 0 auto; font-family: var(--cmd-font-body); font-size: 20px; font-weight: 400; line-height: 1; color: var(--cmd-muted); transition: transform .25s var(--cmd-ease); }
.cmd-specs2 .cmd-acc-item[open] > summary::after { transform: rotate(45deg); }
.cmd-specs2 .cmd-acc-tx { padding: 0 4px 18px; }
.cmd-specs2 .cmd-acc-tx p { margin: 0; font-size: 15px; line-height: 1.72; color: var(--cmd-text); max-width: 64ch; }
body:not(.cmd-has-nucleo) .cmd-acc-i-nucleo { display: none; }
body:not(.cmd-has-accfirm) .cmd-acc-i-accfirm { display: none; }
/* tabla de atributos dentro del primer acordeon */
.cmd-specs2 .cmd-spectable { padding: 0 4px 18px; }
.cmd-specs2 .cmd-spectable table.shop_attributes { width: 100%; border: 0; border-collapse: collapse; margin: 0; }
.cmd-specs2 .cmd-spectable table.shop_attributes tr { border-bottom: 1px solid var(--cmd-line); }
.cmd-specs2 .cmd-spectable table.shop_attributes tr:last-child { border-bottom: 0; }
.cmd-specs2 .cmd-spectable table.shop_attributes tr[class*="medida"] { display: none; }
.cmd-specs2 .cmd-spectable table.shop_attributes th, .cmd-specs2 .cmd-spectable table.shop_attributes td { border: 0 !important; padding: 10px 0; font-size: 14.5px; background: transparent !important; }
.cmd-specs2 .cmd-spectable table.shop_attributes th { font-family: var(--cmd-font-body); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--cmd-muted); font-weight: 600; width: 42%; text-align: left; vertical-align: top; }
.cmd-specs2 .cmd-spectable table.shop_attributes td { color: var(--cmd-ink); text-align: left; font-weight: 500; }
.cmd-specs2 .cmd-spectable table.shop_attributes td p { margin: 0; }

/* ---- LAS CAPAS ---- */
.cmd-capas-sec { background: var(--cmd-band); }
.cmd-capas-sec .cmd-capas-sc { display: flex; gap: clamp(2rem, 5vw, 5rem); align-items: center; max-width: 1180px; margin: 0 auto; }
.cmd-capas-sec .cmd-cs-body { flex: 1 1 0; min-width: 0; }
.cmd-capas-sec .cmd-cs-body .cmd-eyebrow { margin: 0 0 6px; display: block; }
.cmd-capas-sec .cmd-caph-p { margin: 6px 0 18px; font-family: var(--cmd-font-display); font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem); line-height: 1.06; font-weight: 480; color: var(--cmd-ink); letter-spacing: -.018em; }
.cmd-capas-sec .cmd-cs-lead-p { font-size: 16px; line-height: 1.62; color: var(--cmd-text); max-width: 40ch; margin: 0 0 14px; }
.cmd-capas-sec .cmd-caption-p { margin: 0; font-family: var(--cmd-font-serif); font-style: italic; color: var(--cmd-green); font-size: 1.05rem; }
.cmd-capas-sec .cmd-cs-stack { flex: 1 1 0; min-width: 0; border-radius: var(--cmd-r-md); overflow: hidden; border: 1px solid var(--cmd-line); box-shadow: var(--cmd-sh-2); }
.cmd-capas-sec .cmd-cs { padding: 16px 22px; width: 100%; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.cmd-capas-sec .cmd-cs-k p { margin: 0; font-family: var(--cmd-font-display); font-size: 16px; letter-spacing: -.01em; color: var(--cmd-ink); font-weight: 480; display: flex; align-items: baseline; }
.cmd-capas-sec .cmd-cs-n { font-family: var(--cmd-font-mono); opacity: .5; margin-right: 10px; font-weight: 400; font-size: 12px; }
.cmd-capas-sec .cmd-cs-d p { margin: 0; font-family: var(--cmd-font-body); font-size: 13px; line-height: 1.5; color: rgba(42,38,34,.62); max-width: 46ch; }
.cmd-capas-sec .cmd-cs-light .cmd-cs-k p { color: var(--cmd-on-dark); }
.cmd-capas-sec .cmd-cs-light .cmd-cs-n { opacity: .6; color: var(--cmd-on-dark); }
.cmd-capas-sec .cmd-cs-light .cmd-cs-d p { color: rgba(244,240,232,.76); }
body:not(.cmd-has-capas) .cmd-capas-sec { display: none; }

/* ---- FIRMEZA (el look; el motion de la barra lo da components.css) ---- */
.cmd-firm-sec { padding: clamp(2rem, 4vw, 3rem) 24px; }
.cmd-firm-sec .cmd-firm { max-width: 780px; margin: 0 auto; background: var(--cmd-panel); border: 1px solid var(--cmd-line); border-radius: var(--cmd-r-md); padding: 24px 28px; }
.cmd-firm-sec .cmd-firm-head { margin-bottom: 14px; display: flex; justify-content: space-between; align-items: baseline; }
.cmd-firm-sec .cmd-firm-head .cmd-eyebrow { margin: 0; }
.cmd-firm-sec .cmd-firm-v-p { margin: 0; font-family: var(--cmd-font-display); font-size: 16px; color: var(--cmd-ink); font-weight: 480; }
.cmd-firm-sec .cmd-firm-scale { height: 6px; border-radius: var(--cmd-r-pill); margin: 0 0 8px; width: 100%; }
.cmd-firm-sec .cmd-firm-dot { position: absolute; top: 50%; width: 16px; height: 16px; min-height: 16px; border-radius: 50%; background: var(--cmd-green); transform: translate(-50%, -50%); border: 3px solid var(--cmd-panel); display: block; }
.cmd-firm-sec .cmd-firm-ends { margin-bottom: 12px; display: flex; justify-content: space-between; }
.cmd-firm-sec .cmd-firm-e-p { margin: 0; font-size: 11px; color: var(--cmd-muted); letter-spacing: .04em; text-transform: uppercase; }
.cmd-firm-sec .cmd-firm-t-p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--cmd-text); }
body:not(.cmd-has-firmeza) .cmd-firm-sec { display: none; }

/* ---- GUIA (layout en components; aqui tipografia + fondo) ---- */
.cmd-guide-sec { background: var(--cmd-paper); }
.cmd-guide-sec .cmd-guide-head { text-align: center; }
.cmd-guide-sec .cmd-guide-title h2 { margin: 0; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); color: var(--cmd-ink); font-weight: 480; }
.cmd-guide-sec .cmd-guide-h h3 { font-family: var(--cmd-font-display); font-size: 20px; font-weight: 480; color: var(--cmd-ink); letter-spacing: -.01em; }
.cmd-guide-sec .cmd-guide-t p { font-size: 14.5px; line-height: 1.65; color: var(--cmd-text); }
#como-elegir { scroll-margin-top: 130px; }
body:not(.cmd-has-guia) .cmd-guide-sec { display: none; }

/* ---- RELATED (grid + tarjeta + boton ghost) ---- */
.cmd-cross .cmd-cross-h h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); margin: 0 0 26px; color: var(--cmd-ink); font-weight: 480; }
.cmd-related .related > h2, .cmd-related > h2 { display: none; }
.cmd-scope .cmd-related ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 26px; margin: 0; padding: 0; list-style: none; }
.cmd-related ul.products::before, .cmd-related ul.products::after { display: none !important; content: none !important; }
/* misma anatomia de alturas iguales que el archivo (G4-polish): imagen a ratio
   fijo (una miniatura no cuadrada desnivelaba toda la fila), precio anclado al
   fondo del <a> flex y boton alineado entre tarjetas. */
.cmd-related ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; padding: 0; text-align: left; list-style: none; display: flex; flex-direction: column; }
.cmd-related ul.products li.product a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; flex: 1 1 auto; text-decoration: none; }
.cmd-related ul.products li.product a img {
  border-radius: var(--cmd-r-sm); margin-bottom: 12px;
  aspect-ratio: 1 / 1; object-fit: cover; width: 100% !important; height: auto !important;
}
.cmd-related ul.products li.product .woocommerce-loop-product__title { font-family: var(--cmd-font-display); font-size: 17px; color: var(--cmd-ink); padding: 0; font-weight: 480; letter-spacing: -.01em; line-height: 1.25; }
.cmd-related ul.products li.product .price { font-family: var(--cmd-font-body); color: var(--cmd-ink); font-weight: 600; font-size: 14.5px; display: block; margin: auto 0 0; padding-top: 4px; }
.cmd-related ul.products li.product .price del { opacity: .4; font-weight: 400; margin-right: 5px; }
.cmd-related ul.products li.product .star-rating { display: none; }
.cmd-related ul.products li.product .button { background: transparent !important; color: var(--cmd-ink) !important; border: 1px solid var(--cmd-line-strong) !important; border-radius: var(--cmd-r-sm); margin-top: 12px !important; padding: 10px 14px !important; font-family: var(--cmd-font-body) !important; font-size: 13px !important; font-weight: 600 !important; text-transform: none !important; width: 100%; text-align: center; transition: background .2s, border-color .2s; }
.cmd-related ul.products li.product .button:hover { background: var(--cmd-ink) !important; color: var(--cmd-on-dark) !important; border-color: var(--cmd-ink) !important; }
.cmd-related ul.products li.product .added_to_cart { display: none; }

/* ---- REVISTA: la rejilla la da la HOME; aqui la tarjeta-enlace ([cmd_revista]) ---- */
.cmd-rev-sec .cmd-rev-i { display: flex; flex-direction: column; gap: 8px; padding: 22px; background: var(--cmd-paper); border: 1px solid var(--cmd-line); border-radius: var(--cmd-r-md); text-decoration: none; transition: border-color .15s; }
.cmd-rev-sec .cmd-rev-i:hover { border-color: var(--cmd-ink); text-decoration: none; }

/* ---- RITMO DE ESPACIADO (G4-polish) ----
   Regla: cambio de fondo o de capitulo = seccion entera (--cmd-section);
   dos secciones seguidas del MISMO fondo = la segunda entra a medio ritmo
   (el doble padding sumaba ~14rem de vacio entre bloques hermanos). El
   orden de secciones de la PDP es fijo en el template, por eso el sibling
   selector es fiable aqui. */
.cmd-intro + .cmd-specs2 { padding-top: clamp(1.5rem, 3vw, 2.5rem); }              /* paper → paper */
.cmd-bento-sec + .cmd-guide-sec { padding-top: clamp(1.5rem, 3vw, 2.5rem); }       /* paper → paper */
.cmd-guide-sec + .cmd-trust2-sec { padding-top: clamp(1.5rem, 3vw, 2.5rem); }      /* paper → paper */
.cmd-trust2-sec + .cmd-ed-sec { padding-top: clamp(1rem, 2vw, 1.5rem); }           /* paper → paper (banner es tarjeta) */
/* el bento es la lectura de datos de las capas: entra a medio ritmo tras ellas */
.cmd-capas-sec + .cmd-bento-sec { padding-top: clamp(2rem, 4vw, 3rem); }

/* ---- FICHA TECNICA EN BENTO (G6) · [cmd_ficha_bento] ----
   Tiles de dato real sobre panel linen, radios de sistema, numeros grandes en
   Fraunces. La escala de firmeza reutiliza .cmd-firm-scale/fill/dot (motion de
   components.css incluido). Se oculta entera sin datos suficientes. ---- */
body:not(.cmd-has-bento) .cmd-bento-sec { display: none; }
.cmd-bento-sec { background: var(--cmd-paper); }
.cmd-bento-head h2 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); margin: 0 0 24px; color: var(--cmd-ink); font-weight: 480; }
.cmd-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1180px; }
.cmd-bt {
  background: var(--cmd-panel); border: 1px solid var(--cmd-line); border-radius: var(--cmd-r-md);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.cmd-bt-wide { grid-column: span 2; }
.cmd-bt-k { font-family: var(--cmd-font-body); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cmd-muted); margin-bottom: 2px; }
.cmd-bt-v { font-family: var(--cmd-font-display); font-size: 17.5px; font-weight: 480; line-height: 1.3; color: var(--cmd-ink); letter-spacing: -.01em; }
.cmd-bt-t { font-family: var(--cmd-font-body); font-size: 13px; line-height: 1.55; color: var(--cmd-text); opacity: .85; margin-top: 2px; }
.cmd-bt-big { font-family: var(--cmd-font-display); font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3rem); font-weight: 480; line-height: 1; color: var(--cmd-ink); letter-spacing: -.02em; }
.cmd-bt-big small { font-size: .42em; font-weight: 500; color: var(--cmd-muted); letter-spacing: 0; }
.cmd-bt-num { justify-content: flex-start; }
/* la escala de firmeza dentro del tile */
.cmd-bt-firm .cmd-firm-head-mini { display: flex; justify-content: flex-end; margin: -26px 0 10px; }
.cmd-bt-firm .cmd-firm-v-p { margin: 0; font-family: var(--cmd-font-display); font-size: 16px; color: var(--cmd-ink); font-weight: 480; }
.cmd-bt-firm .cmd-firm-scale { height: 6px; border-radius: var(--cmd-r-pill); margin: 6px 0 8px; width: 100%; position: relative; }
.cmd-bt-firm .cmd-firm-dot { position: absolute; top: 50%; width: 16px; height: 16px; min-height: 16px; border-radius: 50%; background: var(--cmd-green); transform: translate(-50%, -50%); border: 3px solid var(--cmd-panel); display: block; }
.cmd-bt-firm .cmd-firm-ends { display: flex; justify-content: space-between; margin-bottom: 6px; }
.cmd-bt-firm .cmd-firm-e-p { margin: 0; font-size: 11px; color: var(--cmd-muted); letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 880px) {
  .cmd-bento { grid-template-columns: 1fr 1fr; }
}

/* ---- TIPOGRAFIA (G4-polish): minimos de lectura unificados.
   Cuerpo de tarjeta/apoyo nunca baja de 14.5px; caption/precio-apoyo 13.5px. ---- */
.cmd-trust2-sec .cmd-tile-t p { font-size: 14.5px; }
.cmd-paybar .cmd-pay-i p { font-size: 12px; }

/* ---- BARRA STICKY DE COMPRA (G4-polish) · pildora glass v2 flotante.
   Aparece cuando el boton real de compra sale del viewport por arriba;
   el CTA replica el add-to-cart (o te devuelve al buy-box si falta la
   medida). Markup y JS en functions.php (solo is_product). ---- */
/* body.cmd .cmd-buybar (0,2,1): base.css trae `body.cmd > *{position:relative;z-index:1}`
   (0,1,1) que ganaba a `.cmd-buybar` (0,1,0) y dejaba la barra EN FLUJO al final
   del body en vez de fija (encontrado con el escaneo de reglas, no a ojo). */
body.cmd .cmd-buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 210;
  padding: 0 14px calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateY(120%); transition: transform .38s var(--cmd-ease-out);
  pointer-events: none;
}
body.cmd .cmd-buybar.is-on { transform: none; }
.cmd-buybar.is-on .cmd-buybar-in { pointer-events: auto; }
/* el vidrio lo pone .cmd-glass2 (components.css, la clase va en el markup);
   aqui solo la geometria de la pildora */
.cmd-buybar-in {
  display: flex; align-items: center; gap: 14px;
  max-width: 640px; margin: 0 auto; padding: 10px 10px 10px 20px;
  border-radius: var(--cmd-r-lg);
}
@media (prefers-reduced-motion: reduce) {
  .cmd-buybar { transition: none; }
}
/* con el drawer del mini-cart ABIERTO la barra desaparece: flotaba sobre el
   boton "Finalizar compra" del drawer y no dejaba pagar (aviso de Mario) */
body:has(.wc-block-components-drawer__screen-overlay:not(.wc-block-components-drawer__screen-overlay--is-hidden)) .cmd-buybar,
body:has(dialog[open] .wc-block-mini-cart__drawer) .cmd-buybar,
body.cmd-drawer-open .cmd-buybar { display: none !important; }
.cmd-buybar-txt { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.cmd-buybar-name { font-family: var(--cmd-font-body); font-size: 13.5px; font-weight: 600; color: var(--cmd-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-buybar-meta { font-family: var(--cmd-font-body); font-size: 12.5px; color: var(--cmd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-buybar-cta {
  flex: 0 0 auto; -webkit-appearance: none; appearance: none; cursor: pointer;
  background: var(--cmd-green); color: #FDFBF7; border: 0; border-radius: var(--cmd-r-pill);
  min-height: 46px; padding: 0 22px; font-family: var(--cmd-font-body);
  font-size: 14px; font-weight: 600; letter-spacing: .01em;
  transition: background .2s, box-shadow .2s;
}
.cmd-buybar-cta:hover { background: var(--cmd-green-deep); box-shadow: 0 4px 14px rgba(26,28,22,.14); }

/* ============================================================
   BUSQUEDA (index.html · body.search) · G5-polish
   Los resultados salian a ancho completo con los titulares en el color
   de enlace (terracota) — "texto pegado a la izquierda". Columna de
   lectura centrada, titulares en tinta, hairlines entre resultados.
   ============================================================ */
body.search .cmd-main .wp-block-query { max-width: 760px; margin-inline: auto; }
body.search .cmd-main .wp-block-post-title { font-family: var(--cmd-font-display); font-size: 24px; font-weight: 480; letter-spacing: -.012em; line-height: 1.25; margin: 0 0 6px; }
body.search .cmd-main .wp-block-post-title a { color: var(--cmd-ink); text-decoration: none; transition: color .15s; }
body.search .cmd-main .wp-block-post-title a:hover { color: var(--cmd-green); }
body.search .cmd-main .wp-block-post-excerpt { color: var(--cmd-text); font-size: 15px; line-height: 1.7; }
body.search .cmd-main .wp-block-post-template > li,
body.search .cmd-main .wp-block-post-template > .wp-block-post { padding: 22px 0; border-bottom: 1px solid var(--cmd-line); margin: 0; }
body.search .cmd-main .wp-block-query-pagination { margin-top: clamp(1.5rem, 3vw, 2.5rem); justify-content: center; font-family: var(--cmd-font-body); font-size: 14px; }
body.search .cmd-main .wp-block-query-pagination a { color: var(--cmd-muted); text-decoration: none; }
body.search .cmd-main .wp-block-query-pagination a:hover { color: var(--cmd-ink); }

/* ---- RESPONSIVE PDP ---- */
@media (max-width: 880px) {
  .cmd-pdp .cmd-pdp-in { flex-wrap: wrap; gap: 26px; }
  .cmd-pdp .cmd-pdp-gallery, .cmd-pdp .cmd-pdp-info { flex: 1 1 100%; }
  .cmd-capas-sec .cmd-capas-sc { flex-wrap: wrap; }
  .cmd-capas-sec .cmd-cs-body, .cmd-capas-sec .cmd-cs-stack { flex: 1 1 100%; }
  .cmd-upsell-w ul.products { grid-template-columns: 1fr; }
  .cmd-scope .cmd-related ul.products { grid-template-columns: 1fr 1fr; gap: 18px; }
  .cmd-buybar { padding-inline: 10px; }
  .cmd-buybar-in { padding: 8px 8px 8px 16px; border-radius: var(--cmd-r-lg); }
}

/* ============================================================
   404 (templates/404.html) · G8 SEO
   Antes: redirect soft-404 a home (R20). Ahora 404 real con
   buscador + accesos a las 4 categorias, en voz de la casa.
   ============================================================ */
.cmd-404 { max-width: 720px; text-align: center; padding-block: clamp(2.5rem, 7vw, 5rem); }
.cmd-404-eyebrow { font-family: var(--cmd-font-mono, monospace); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--cmd-clay); margin: 0 0 14px; }
.cmd-404-h1 { font-family: var(--cmd-font-display); font-weight: 480; letter-spacing: -.02em; line-height: 1.1; margin: 0 0 16px; }
.cmd-404-lead { color: var(--cmd-text); font-size: 17px; line-height: 1.7; max-width: 52ch; margin: 0 auto 30px; }
.cmd-404-search { max-width: 460px; margin: 0 auto 26px; }
.cmd-404-search .wp-block-search__inside-wrapper { border: 1px solid var(--cmd-line); border-radius: var(--cmd-r-lg, 14px); overflow: hidden; }
.cmd-404-cats { justify-content: center; gap: 10px; margin-bottom: 28px; }
.cmd-404-help { color: var(--cmd-muted); font-size: 15px; line-height: 1.7; margin: 0; }
.cmd-404-help a { color: var(--cmd-ink); text-decoration: underline; text-underline-offset: 3px; }
.cmd-404-help a:hover { color: var(--cmd-green); }

/* ============================================================
   TEXTO EDITORIAL DE CATEGORIA (G8 SEO) · debajo del grid
   Columna de lectura centrada, mismo tono que el resto del sistema.
   ============================================================ */
.cmd-arch-catseo-sec { padding-block: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--cmd-line); margin-top: clamp(2rem, 5vw, 3.5rem); }
.cmd-cat-editorial { }
.cmd-cat-editorial-in { max-width: 720px; margin-inline: auto; }
.cmd-cat-editorial-in h2 { font-family: var(--cmd-font-display); font-weight: 480; letter-spacing: -.018em; line-height: 1.15; font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 18px; }
.cmd-cat-editorial-in p { color: var(--cmd-text); font-size: 16px; line-height: 1.75; margin: 0 0 16px; }
.cmd-cat-editorial-in p:last-child { margin-bottom: 0; }
.cmd-cat-editorial-in a { color: var(--cmd-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .15s; }
.cmd-cat-editorial-in a:hover { color: var(--cmd-green); }

/* ============================================================
   G10-POLISH (20-jul, ronda Mario): movil centrado + lupa fuera
   ============================================================ */

/* La lupa de zoom de la galeria Woo flotaba suelta sobre la esquina (PC y
   movil). Fuera hasta que llegue la galeria buena (sprint aparte): el zoom
   actual ni se descubre ni aporta. */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger { display: none !important; }

/* Cabeceras de seccion CENTRADAS en movil (aviso Mario: "lo que llevas dentro"
   y FAQ quedaban clavadas a la izquierda). En una columna estrecha el rotulo
   centrado respira; el cuerpo de texto sigue a la izquierda (legibilidad). */
@media (max-width: 640px) {
  .cmd-capas-sec .cmd-cs-body .cmd-eyebrow,
  .cmd-capas-sec .cmd-caph-p,
  .cmd-capas-sec .cmd-cs-lead-p,
  .cmd-capas-sec .cmd-caption-p { text-align: center; }
  .cmd-capas-sec .cmd-cs-lead-p { margin-inline: auto; }
  .cmd-faq .cmd-faq-eye, .cmd-faq .cmd-faq-h1, .cmd-faq .cmd-faq-lead { text-align: center; }
  .cmd-faq .cmd-faq-lead { margin-inline: auto; }
}

/* ============================================================
   G10h · CATEGORIA QUE VENDE (diseño Fable, ronda Mario 20-jul)
   ============================================================ */

/* ---- Los recomendados de la casa (3 tarjetas gancho arriba) ---- */
.cmd-arch-dest-sec { background: var(--cmd-band); padding-block: clamp(2rem, 4vw, 3.2rem); }
.cmd-destacados .cmd-dest-eye { margin: 0 0 18px; }
.cmd-destacados .cmd-dest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.cmd-destacados .cmd-dest-card {
  display: flex; flex-direction: column; text-decoration: none; background: #fff;
  border-radius: var(--cmd-r-md); overflow: hidden; border: 1px solid var(--cmd-line);
  transition: transform .22s var(--cmd-ease-out), box-shadow .22s;
}
.cmd-destacados .cmd-dest-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(42, 38, 34, .10); }
.cmd-destacados .cmd-dest-img { display: block; background: var(--cmd-band); }
.cmd-destacados .cmd-dest-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.cmd-destacados .cmd-dest-chip {
  align-self: flex-start; margin: 14px 16px 0; padding: 4px 10px; border-radius: var(--cmd-r-pill);
  background: var(--cmd-green-soft); color: var(--cmd-green-deep);
  font-family: var(--cmd-font-body); font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.cmd-destacados .cmd-dest-name { margin: 8px 16px 2px; font-family: var(--cmd-font-display); font-size: 19px; font-weight: 480; color: var(--cmd-ink); letter-spacing: -.01em; }
.cmd-destacados .cmd-dest-price { margin: 0 16px 16px; font-size: 14.5px; color: var(--cmd-text); }
.cmd-destacados .cmd-dest-price del { color: var(--cmd-muted); margin-right: 6px; }
.cmd-destacados .cmd-dest-price ins { text-decoration: none; font-weight: 600; color: var(--cmd-ink); }
/* movil: fila con scroll-snap, se ven 1,3 tarjetas (invita a deslizar).
   overflow-x:clip en seccion y wrapper: sin el, Chrome propaga el ancho del
   carril snap al documento y la pagina entera scrollea de lado (qa overflow). */
@media (max-width: 760px) {
  .cmd-arch-dest-sec, .cmd-destacados { overflow-x: clip; }
  .cmd-destacados .cmd-dest-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .cmd-destacados .cmd-dest-grid::-webkit-scrollbar { display: none; }
  .cmd-destacados .cmd-dest-card { flex: 0 0 74%; scroll-snap-align: start; }
}

/* ---- Barra de filtro + orden ---- */
.cmd-archbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 auto clamp(1.2rem, 2.5vw, 2rem); }
.cmd-archbar .cmd-fz-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmd-archbar .cmd-fz-lbl { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cmd-muted); font-weight: 600; margin-right: 2px; }
.cmd-archbar .cmd-fz-pill {
  border: 1px solid var(--cmd-line-strong); background: transparent; color: var(--cmd-ink);
  border-radius: var(--cmd-r-pill); padding: 7px 14px; font-family: var(--cmd-font-body);
  font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background .18s, color .18s, border-color .18s;
}
.cmd-archbar .cmd-fz-pill:hover { border-color: var(--cmd-ink); }
.cmd-archbar .cmd-fz-pill.is-on { background: var(--cmd-ink); border-color: var(--cmd-ink); color: var(--cmd-paper); }
.cmd-archbar .cmd-ordena { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.cmd-archbar .cmd-ord-lnk { color: var(--cmd-text); text-decoration: none; }
.cmd-archbar .cmd-ord-lnk:hover { color: var(--cmd-ink); }
.cmd-archbar .cmd-ord-lnk.is-on { color: var(--cmd-ink); font-weight: 600; border-bottom: 2px solid var(--cmd-green); }
.cmd-archbar .cmd-ord-sep { color: var(--cmd-line-strong); }

/* ---- CTA de las tarjetas del grid: el camino de compra en terracota
   (Mario: "el boton de seleccionar opciones que llame mas la atencion") ---- */
.cmd-scope ul.products li.product .button {
  display: block; width: 100%; text-align: center; box-sizing: border-box;
  background: var(--cmd-green); color: #FDFBF7; border: 0; border-radius: var(--cmd-r-sm);
  padding: 13px 18px; margin-top: 10px; font-family: var(--cmd-font-body);
  font-size: 14.5px; font-weight: 600; text-transform: none; letter-spacing: .01em;
  transition: background .2s;
}
.cmd-scope ul.products li.product .button:hover { background: var(--cmd-green-deep); color: #FDFBF7; }
.cmd-scope ul.products li.product .button:active { transform: translateY(1px); }

/* ---- Densidad movil (Mario: "menos scroll sin apiñar"): las bandas grandes
   bajan su respiracion en pantallas estrechas ---- */
@media (max-width: 640px) {
  .cmd-arch-dest-sec { padding-block: 1.6rem; }
  .cmd-arch-editorial-sec .cmd-editorial .cmd-ed-mega { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .cmd-tiles-sec, .cmd-arch-catseo-sec, .cmd-revista-sec { padding-block: 2.2rem; }
  .cmd-home-cats-sec { padding-block: 2.2rem; }
}

/* Guardia anti-scroll lateral en movil: el carril snap de destacados expande
   el scrollWidth del documento aunque el contenedor este capado (rareza de
   layout de Chrome; biseccionado: solo el tamaño de las tarjetas lo dispara).
   clip y no hidden: clip NO crea contenedor de scroll y el header sticky y el
   snap interno siguen funcionando. */
@media (max-width: 960px) {
  html, body.cmd { overflow-x: clip; }
}