/*
 * Home rediseñada (hero B). Sólo carga en la portada: ver almacen_home_assets() en functions.php.
 *
 * Es el CSS del mockup (tools/visual-diff/mockup/home-redesign.src.html) llevado a los bloques:
 * mismos tokens, mismas medidas, y los cortes del mockup (container queries de 1020 y 640 px)
 * pasados a media queries. Si se cambia una medida acá, cambiarla también en el mockup, o la
 * comparación de tools/visual-diff deja de servir.
 *
 * Todo cuelga de .home-v2-page (clase del <body>, sólo en la portada), así no toca el resto del
 * sitio aunque alguien encole esta hoja de más.
 */

.home-v2-page {
  /* Los tokens (colores, fuentes, íconos) están en header.css, que carga antes. */
  background: var(--s-cream);
  color: var(--s-ink);
  font: 400 15px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
}

/* ---------- base: sacar los márgenes de los layouts de bloques y del tema ---------- */
.home-v2-page .wp-site-blocks { padding: 0; }
.home-v2-page .wp-site-blocks > * { margin-block: 0; }
.home-v2-page :is(.home-v2, .site-footer, .site-tabbar) * { box-sizing: border-box; }
/* :where() deja estas dos en (0,1,1): le ganan a las de core y del tema, y pierden con cualquier
   regla de abajo que nombre la pieza. */
body.home-v2-page :where(.home-v2, .site-footer) :where(h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure) { margin: 0; letter-spacing: normal; }
body.home-v2-page :where(.home-v2, .site-footer) :where(.is-layout-flow, .is-layout-constrained, .is-layout-flex) > *,
body.home-v2-page :where(.home-v2, .site-footer):where(.is-layout-flow, .is-layout-constrained, .is-layout-flex) > * { margin-block: 0; }
.home-v2-page :is(.home-v2, .site-footer, .site-tabbar) a { color: inherit; text-decoration: none; }
.home-v2-page :is(.home-v2, .site-footer) img { display: block; max-width: 100%; }
.home-v2-page .home-v2 button { font-family: inherit; }
.home-v2-page .mx { max-width: 1160px; margin: 0 auto; padding-inline: 32px; }
/* El mockup equilibra los renglones de todos los títulos; sin esto cortan distinto. */
.home-v2-page :is(.home-v2, .site-footer) :is(h1, h2, h3) { text-wrap: balance; }
.home-v2-page .ph { border-bottom: 1px dashed currentColor; opacity: .85; }  /* texto que el local tiene que confirmar */
.home-v2-page :focus-visible { outline: 2px solid var(--s-gold); outline-offset: 2px; }

/* ícono antes del texto: <p class="i-pin">…</p> */
.home-v2-page :is(.i-pin, .i-truck, .i-wa)::before {
  content: ""; width: 14px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.home-v2-page .i-pin { --i: var(--i-pin); }
.home-v2-page .i-truck { --i: var(--i-truck); }
.home-v2-page .i-wa { --i: var(--i-wa); }

/* ---------- botones ---------- */
.home-v2-page .home-v2 .m-ctas,
.home-v2-page .home-v2 .wp-block-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.home-v2-page .btn { margin: 0; }
.home-v2-page .btn > .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 12px; font: 500 15px/1 var(--f-body); cursor: pointer; border: 0; box-shadow: none; text-decoration: none; }
.home-v2-page .btn-gold > .wp-block-button__link { background: var(--s-gold); color: var(--s-deep); }
/* style.css pinta de verde oscuro, levanta 2 px y da sombra a todo .btn, .wp-block-button__link y
   botón submit en hover, con !important y también sobre el wrapper del botón (que lleva la clase .btn).
   En la home cada botón tiene su propio hover, así que eso se anula acá. */
.home-v2-page :is(.wp-block-button, .wp-block-button__link):hover { transform: none; }
.home-v2-page .wp-block-button:hover { background-color: transparent !important; box-shadow: none; }
.home-v2-page .wp-block-button__link { transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.home-v2-page .btn-gold > .wp-block-button__link:hover { background: #BE9D52 !important; color: var(--s-deep); box-shadow: none; }
.home-v2-page .btn-line > .wp-block-button__link { background: transparent; color: var(--s-deep); box-shadow: inset 0 0 0 1.5px var(--s-deep); }
.home-v2-page .btn-line > .wp-block-button__link:hover { background: var(--s-deep) !important; color: var(--s-cream); box-shadow: inset 0 0 0 1.5px var(--s-deep); }
.home-v2-page :is(.btn-wa, .btn-wa-icon, .btn-pin) > .wp-block-button__link::before {
  content: ""; width: 20px; height: 20px; flex: none; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.home-v2-page :is(.btn-wa, .btn-wa-icon) { --i: var(--i-wa); }
.home-v2-page .btn-pin { --i: var(--i-pin); }
.home-v2-page .btn-wa > .wp-block-button__link::before { background: #2E8B57; }
.home-v2-page .btn-wa > .wp-block-button__link:hover::before { background: #9FE0B5; }
.m-more { font-weight: 700; font-size: 14px; color: var(--s-forest) !important; border-bottom: 1.5px solid var(--s-gold); padding-bottom: 2px; }

/* ---------- hero B: texto + fila de productos ---------- */
/* 1.05fr 1fr, 48 px y 56/48 px: es lo que muestra el mockup aprobado. Ahí la regla propia del hero B
   (.9fr 1.1fr, 44 px, 40 px) pierde por especificidad contra la del hero A, y lo que se aprobó es
   lo que se ve, no lo que dice esa regla. */
.home-hero .hb { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding-block: 56px 48px; }
.m-kicker { font: 700 12px/1.3 var(--f-body); letter-spacing: .16em !important; text-transform: uppercase; color: var(--s-forest); display: flex; align-items: center; gap: 10px; }
.m-kicker::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--s-gold); }
.home-v2-page .home-hero h1 { font: 600 clamp(36px, 4.3vw, 54px)/1.03 var(--f-display); color: var(--s-deep); margin: 14px 0 14px; letter-spacing: -.012em; }
.home-hero h1 em { font-style: italic; color: var(--s-forest); font-weight: 500; }
.home-v2-page .home-hero p.sub { font-size: 16.5px; color: var(--s-muted); margin: 0 0 22px; max-width: 44ch; }


.hb-rail { min-width: 0; }
.hb-head { display: flex; align-items: center; gap: 14px; }
/* Aire entre el título de la fila y las tarjetas. Con .home-v2-page delante para ganarle al reset de márgenes de arriba (línea 28), que lo dejaba en 0. */
.home-v2-page .hb-head { margin-bottom: 4px; }
.home-v2-page .hb-head h2 { margin: 0; font: 600 26px/1.1 var(--f-display); color: var(--s-deep); flex: 1; }
.hb-more { display: flex; }
.hb-arrows { display: flex; gap: 6px; }
.hb-arrows[hidden] { display: none; }
.hb-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--s-line); background: var(--s-paper); color: var(--s-deep); font: 500 22px/1 var(--f-body); cursor: pointer; padding: 0 0 3px; }
.hb-arrow:hover:not(:disabled) { border-color: var(--s-forest); }
.hb-arrow:disabled { opacity: .35; cursor: default; }

/* ---------- tarjetas de producto (las tres filas) ---------- */
/* style.css fija columnas, gap y el <li> de TODAS las grillas de producto con !important (ver su
   «Explicit column counts»). Para estas filas hace falta !important también: si no, la fila del
   hero queda en 4 columnas fijas y en el teléfono las grillas pasan a una sola columna. */
.home-v2-page .home-cards { margin: 0; }
.home-v2-page .home-cards .wc-block-product-template { list-style: none; margin: 0; padding: 0; }
.home-v2-page .home-cards .wc-block-product-template > li { margin: 0; width: auto !important; max-width: none; min-width: 0; padding: 0; display: grid !important; }
.home-v2-page .m-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; }
/* position: relative: los textos para lectores de pantalla del precio (absolutos) se ubicaban contra el
   body y no contra la fila; estiraban la home (523px en el teléfono, que se podía correr de costado). */
.home-v2-page .hb-track { position: relative; display: grid !important; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 12px) / 2.4); grid-template-columns: none !important; gap: 12px !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.home-v2-page .hb-track::-webkit-scrollbar { display: none; }
.home-v2-page .hb-track > li { scroll-snap-align: start; }
/* Cada tarjeta es un contenedor: cuando queda angosta (fila del hero entre 1020 y 1280 px), el precio
   y el botón van uno arriba del otro en vez de desbordar la tarjeta y comerse el espacio entre ellas. */
.home-v2-page .home-cards .wc-block-product-template > li { container-type: inline-size; }
.home-v2-page .home-cards li[hidden] { display: none !important; }

.home-v2-page .pc { background: var(--s-paper); border: 1px solid var(--s-line); border-radius: 18px; padding: 12px; display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto; gap: 8px; text-align: left; }
.home-v2-page .pc-img { position: relative; background: #fff; border-radius: 12px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; margin: 0 !important; }
.home-v2-page .pc-img > a { display: grid; place-items: center; width: 100%; height: 100%; }
/* Pistas fijas al cuadro: las fotos de más abajo llegan con loading="lazy" y sizes="auto", y WordPress
   les pone contain-intrinsic-size: 3000px 1500px. Con pistas automáticas ese alto estiraba la fila y la
   foto quedaba fuera del cuadro (un cuadro en blanco). */
.home-v2-page :is(.pc-img, .pc-img > a) { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.home-v2-page .pc-img img { width: 82% !important; height: 82% !important; object-fit: contain !important; aspect-ratio: auto !important; margin: 0; color: transparent; font-size: 0; }  /* si la foto no carga, que no aparezca el nombre (alt) debajo del descuento */
.home-v2-page .pc .off { position: absolute; top: 8px; left: 8px; background: var(--s-gold); color: var(--s-deep); font-weight: 800; font-size: 13px; line-height: 1.55; padding: 4px 9px; border-radius: 8px; font-variant-numeric: tabular-nums; z-index: 1; }
.home-v2-page .pc .badges { display: flex; gap: 6px; flex-wrap: wrap; min-height: 22px; }
.home-v2-page .pc .bd { font-size: 11px; line-height: 1.45; font-weight: 800; letter-spacing: .04em; padding: 3px 8px; border-radius: 6px; background: var(--s-sage); color: var(--s-forest); text-transform: uppercase; }
.home-v2-page .pc .bd.tacc { background: #F3E6C4; color: #6E5418; }
.home-v2-page .pc .bd.gr { background: #EDE6DA; color: #5C4E35; }
.home-v2-page .pc .pc-name { margin: 0; font: 700 15px/1.3 var(--f-body); color: var(--s-deep); text-transform: none; text-align: left; }
.home-v2-page .pc .pc-name a { display: inline; }
/* Los nombres del ERP son largos y en mayúsculas: dos renglones como mucho, como en la tienda. */
.home-v2-page .pc .pc-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.home-v2-page .pc .meta { font-size: 12.5px; color: var(--s-muted); margin: 0; font-variant-numeric: tabular-nums; }
.home-v2-page .pc .until { font-size: 12px; font-weight: 700; color: var(--s-gold-ink); margin: 0; align-self: end; justify-self: start; }
.home-v2-page .pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.home-v2-page .pc .price { margin: 0; font: 800 19px/1 var(--f-body); color: var(--s-deep); font-variant-numeric: tabular-nums; text-align: left; }
.home-v2-page .pc .price .wc-block-components-product-price { display: inline-flex; flex-direction: row-reverse; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; font: inherit; }
.home-v2-page .pc .price ins { text-decoration: none; background: none; font-weight: inherit; padding: 0; }
.home-v2-page .pc .price del { font-size: 13px; font-weight: 600; color: var(--s-muted); margin-left: 4px; opacity: 1; }
.home-v2-page .pc .price .granel-unidad { font-size: 12px; font-weight: 700; color: var(--s-muted); text-transform: none; order: -1; margin-left: 4px; }  /* order: con row-reverse, -1 la deja después del precio */
.home-v2-page .pc-foot > .wp-block-button { margin: 0 !important; padding: 0; flex: none; }
.home-v2-page .pc-foot > .shop-add-to-cart { padding: 0; }  /* style.css le da el aire de la tarjeta de la tienda */  /* .add, o .shop-add-to-cart en el de granel (almacen-granel.php) */
.home-v2-page .pc-foot > .wp-block-button .wp-block-button__link { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; height: 40px; min-height: 0; width: auto; padding: 0 16px; margin: 0; border-radius: 10px; border: 0; background: var(--s-forest); color: #fff; font: 500 13.5px/1 var(--f-body); cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: normal; }
.home-v2-page .pc-foot > .wp-block-button .wp-block-button__link:hover { background: var(--s-deep) !important; box-shadow: none; }
.home-v2-page .pc-foot > .wp-block-button .wp-block-button__link[aria-disabled="true"] { background: var(--s-sage); color: var(--s-forest); }
.home-v2-page .pc .added_to_cart, .home-v2-page .pc .wc-block-components-product-button > span:has(> .added_to_cart) { display: none; }  /* el span también: WooCommerce lo muestra al agregar y, vacío, suma el gap de 12px abajo del botón */
@container (max-width: 240px) {
  .home-v2-page .pc-foot { flex-direction: column; align-items: stretch; gap: 8px; }
  .home-v2-page .pc-foot > .wp-block-button .wp-block-button__link { width: 100%; }
  .home-v2-page .pc .price { font-size: 17px; }
}

/* ---------- confianza ---------- */
.m-trust { border-block: 1px solid var(--s-line); background: var(--s-paper); }
.m-trust .mx { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-block: 18px; }
.m-trust .t-item { display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; align-items: center; font-size: 13.5px; color: var(--s-muted); line-height: 1.35; }
.m-trust .t-item::before {
  content: ""; width: 26px; height: 26px; grid-row: span 2; background: var(--s-forest);
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.m-trust .i-steth { --i: var(--i-steth); }
.m-trust .i-card { --i: var(--i-card); }
.m-trust .i-store { --i: var(--i-store); }
.m-trust .t-item.i-truck::before { width: 26px; height: 26px; }
.m-trust b { display: block; color: var(--s-deep); font-size: 14px; }
.m-trust .t-item > span { justify-self: start; }

/* ---------- cabeceras de sección ---------- */
.home-v2-page .m-sec { padding-block: 56px 8px; }
/* La última sección antes del pie: el mismo aire que dejan la tienda y /mayoristas/ arriba del pie. */
.home-v2-page .home-visit { padding-bottom: 64px; }
/* Consulta, mayoristas y «Vení al local» van seguidas y sin título de fila arriba: 40px entre una y otra
   (8 + 32 y 0 + 40) en vez de los 64 de las secciones con título. */
.home-v2-page .home-whole { padding-block: 32px 0; }
.home-v2-page .home-visit { padding-top: 40px; }
.home-v2-page .m-sh { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.home-v2-page .m-sh h2 { font: 600 clamp(28px, 3.4vw, 38px)/1.05 var(--f-display); margin: 0; color: var(--s-deep); }
.home-v2-page .m-sh p { margin: 6px 0 0; color: var(--s-muted); font-size: 15px; }
.home-v2-page .m-sh .sh-more { display: flex; margin: 0; }

/* ---------- comprar por necesidad ---------- */
.m-needs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.home-v2-page .need { position: relative; background: var(--s-paper); border: 1px solid var(--s-line); border-radius: 16px; padding: 16px 14px 14px; display: grid; gap: 10px; align-content: start; transition: border-color .2s, transform .2s; }
.need:hover { border-color: var(--s-forest); transform: translateY(-2px); }
.need .mk { width: 44px; height: 44px; border-radius: 50%; background: var(--s-sage); display: grid; place-items: center; color: var(--s-forest); font: 700 italic 17px/1 var(--f-display); }
.need .mk:is(.mk-tacc, .mk-leaf)::before {
  content: ""; width: 24px; height: 24px; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.need .mk-tacc { --i: var(--i-tacc); }
.need .mk-leaf { --i: var(--i-leaf); }
.need .mk-leaf::before { width: 22px !important; height: 22px !important; }
.need-name { font-size: 15px; font-weight: 700; color: var(--s-deep); line-height: 1.2; }
.need-name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.need-desc { font-size: 12.5px; color: var(--s-muted); line-height: 1.35; }

/* ---------- secciones del almacén ---------- */
.m-depts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.home-v2-page .dept { position: relative; background: var(--s-paper); border: 1px solid var(--s-line); border-radius: 18px; padding: 20px 20px 18px; display: grid; gap: 10px; align-content: start; }
.home-v2-page .dept h3 { margin: 0; font: 600 23px/1.1 var(--f-display); color: var(--s-deep); }
.dept h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.dept:hover h3 { color: var(--s-forest); }
.home-v2-page .dept ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.home-v2-page .dept li { margin: 0; font-size: 13px; }
/* Cada pastilla abre su categoría: va por encima del link estirado del título (el ::after de arriba). */
.home-v2-page .dept li a { position: relative; z-index: 1; display: block; padding: 5px 10px; border-radius: 999px; background: var(--s-cream); color: var(--s-ink); text-decoration: none; }
.home-v2-page .dept li a:hover { background: var(--s-sage); color: var(--s-deep); }

/* ---------- consulta nutricional ---------- */
.home-v2-page .m-consult { background: var(--s-deep); color: #EDE8DC; border-radius: 24px; padding: 40px; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: 36px; row-gap: 26px; align-items: center; }
.home-v2-page .m-consult h2 { font: 600 clamp(30px, 3.8vw, 42px)/1.05 var(--f-display); margin: 0 0 12px; color: #F5F0E8; }
.m-consult h2 em { color: var(--s-gold); font-style: italic; font-weight: 500; }
.home-v2-page .m-consult .consult-copy > p { margin: 0 0 22px; color: #C9D1C1; }
.home-v2-page .m-consult .alt { display: block; margin: 14px 0 0 !important; font-size: 13.5px; color: #C9D1C1; }
.m-consult .alt a { text-decoration: underline; text-decoration-color: var(--s-gold); text-underline-offset: 3px; }
.home-v2-page .consult-photo { margin: 0; position: relative; grid-row: span 2; align-self: stretch; }
.home-v2-page .consult-photo img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; object-position: 50% 18%; border-radius: 18px; }
.home-v2-page .consult-photo figcaption { position: absolute; left: 12px; bottom: 12px; margin: 0; background: rgba(44, 62, 45, .88); color: #F5F0E8; font-size: 12.5px; line-height: 1.55; font-weight: 700; padding: 6px 10px; border-radius: 8px; text-align: left; }
.home-v2-page .steps { grid-column: 2; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; counter-reset: s; }
.home-v2-page .steps li { margin: 0; background: rgba(245, 240, 232, .07); border: 1px solid rgba(245, 240, 232, .12); border-radius: 16px; padding: 18px; counter-increment: s; display: grid; gap: 6px; align-content: start; }
.steps li::before { content: counter(s); font: 600 italic 30px/1 var(--f-display); color: var(--s-gold); }
.steps strong { color: #F5F0E8; font-size: 15px; }
.steps span { font-size: 13px; color: #BFC9B6; line-height: 1.45; }

/* ---------- mayoristas ---------- */
.home-v2-page .m-whole { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; border: 1.5px dashed #CDBF9E; border-radius: 18px; padding: 22px 26px; background: #FBF6EA; }
.home-v2-page .m-whole h3 { margin: 0 0 4px; font: 600 25px/1.1 var(--f-display); color: var(--s-deep); }
.home-v2-page .m-whole p { margin: 0; color: var(--s-muted); font-size: 14.5px; }

/* ---------- el local ---------- */
.m-visit { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
/* Mapa de verdad (embed de Google, el mismo que abre «Cómo llegar»), con carga diferida: se pide
   recién cuando la sección se acerca a la pantalla. El fondo es lo que se ve mientras carga. */
.home-v2-page .map { position: relative; border-radius: 20px; overflow: hidden; min-height: 260px; background: #E3E6D8; }
.home-v2-page .map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.home-v2-page .visit-card { background: var(--s-paper); border: 1px solid var(--s-line); border-radius: 20px; padding: 26px; display: grid; gap: 16px; align-content: start; }
.home-v2-page .visit-card h3 { margin: 0; font: 600 30px/1.05 var(--f-display); color: var(--s-deep); }
.home-v2-page .hours { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 14.5px; margin: 0; font-variant-numeric: tabular-nums; }
.hours dt { color: var(--s-muted); }
.home-v2-page .hours dd { margin: 0; font-weight: 700; color: var(--s-deep); }
.home-v2-page .visit-addr { font-size: 14.5px; color: var(--s-muted); }
.home-v2-page .visit-card .row { display: flex; gap: 10px; flex-wrap: wrap; }
.home-v2-page .visit-card .btn > .wp-block-button__link { height: 46px; font-size: 14px; }
.home-v2-page .visit-card .btn > .wp-block-button__link::before { width: 18px; height: 18px; }

/* ---------- footer ---------- */
.home-v2-page .m-foot { padding-top: 0 !important; margin-top: 56px; background: var(--s-deep); color: #C9D1C1; font-size: 13.5px; }
.m-foot .mx { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; padding-block: 40px; }
.home-v2-page .m-foot h5 { margin: 0 0 10px; font: 700 11px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--s-gold); }
.home-v2-page .m-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.home-v2-page .m-foot li { margin: 0; }
.home-v2-page .m-foot a { color: inherit !important; }  /* style.css: footer a { color: #F5F0E8 !important } */
.home-v2-page .m-foot a:hover { color: #F5F0E8 !important; }
.m-foot .f-social a + a::before { content: " · "; }
.home-v2-page .m-foot .brand { font: 600 24px/1.1 var(--f-display); color: #F5F0E8; margin-bottom: 8px; }
.m-legal { border-top: 1px solid rgba(245, 240, 232, .12); }
.m-legal .mx { padding-block: 14px; font-size: 12px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.m-legal :is(.f-seller, .f-service) { flex-basis: 100%; }

/* ---------- WhatsApp flotante y barra del teléfono ---------- */
/* En el editor los esconde editor.css: fijos, taparían el lienzo. */
.m-fab { position: fixed; right: 20px; bottom: 20px; width: 56px; height: 56px; border-radius: 50%; background: #2E8B57; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45); z-index: 40; }
.m-fab .i-wa-lg { width: 28px; height: 28px; background: currentColor; -webkit-mask: var(--i-wa) center / contain no-repeat; mask: var(--i-wa) center / contain no-repeat; }
.m-tabbar { display: none; }

/* ---------- tablet ---------- */
@media (max-width: 1020px) {
  .m-needs { grid-template-columns: repeat(3, 1fr); }
  .home-v2-page .m-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .m-depts { grid-template-columns: repeat(2, 1fr); }
  .home-v2-page .m-consult { grid-template-columns: 1fr; }
  .home-v2-page .steps { grid-column: auto; }
  .home-hero .hb { grid-template-columns: 1fr; gap: 28px; }
  .home-v2-page .hb-track { grid-auto-columns: calc((100% - 3 * 12px) / 3.3); }
  .home-v2-page .consult-photo { grid-row: auto; }
  .home-v2-page .consult-photo img { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .m-trust .mx { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- teléfono ---------- */
@media (max-width: 640px) {
  .home-v2-page .mx { padding-inline: 16px; }
  .home-v2-page .m-ctas > .btn { flex: 1 1 100%; }
  .home-v2-page .m-ctas > .btn > .wp-block-button__link { width: 100%; }
  .m-trust .mx { grid-template-columns: 1fr 1fr; gap: 12px; padding-block: 14px; }
  .m-trust .t-item { font-size: 12px; }
  .home-v2-page .m-sec { padding-block: 36px 4px; }
  .home-v2-page .home-visit { padding-bottom: 48px; }
  .home-v2-page .home-whole { padding-block: 20px 0; }
  .home-v2-page .home-visit { padding-top: 24px; }
  .m-needs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 132px; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .home-v2-page .m-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .home-v2-page .pc { padding: 8px; border-radius: 14px; }
  .home-v2-page .pc-foot { flex-direction: column; align-items: stretch; gap: 8px; }
  .home-v2-page .pc-foot > .wp-block-button .wp-block-button__link { width: 100%; }
  .home-v2-page .pc .price { font-size: 17px; }
  .m-depts { grid-template-columns: 1fr; gap: 10px; }
  .home-v2-page .dept { padding: 16px; }
  .home-v2-page .dept ul { display: none; }
  .home-v2-page .dept h3 { font-size: 21px; }
  .home-v2-page .m-consult { padding: 26px 20px; border-radius: 0; margin-inline: -16px; }
  .home-v2-page .consult-photo img { aspect-ratio: 4 / 3.4; }
  /* stretch: la grilla de escritorio centra, y en columna eso deja la fila del ancho de su contenido. */
  .home-hero .hb { display: flex; flex-direction: column; align-items: stretch; gap: 22px; padding-block: 26px 28px; }
  .home-hero .hb-copy { display: contents; }
  .home-hero .m-kicker { order: 1; }
  .home-v2-page .home-hero h1 { order: 2; font-size: 32px; margin: 10px 0 18px; }
  .hb-rail { order: 3; margin-inline: -16px; }
  .hb-head { padding-inline: 16px; }
  .home-v2-page .hb-head h2 { font-size: 21px; }
  .hb-arrows { display: none !important; }
  .home-v2-page .hb-track { grid-auto-columns: 156px; gap: 10px !important; padding-inline: 16px !important; scroll-padding-left: 16px; }
  .home-v2-page .home-hero p.sub { order: 4; margin: 20px 0 0; font-size: 15px; }  /* abajo, sólo el gap de .hb (22px): con margen sumaba 38px hasta «Ver productos» */
  .home-hero .m-ctas { order: 5; }
  .home-v2-page .steps { grid-template-columns: 1fr; }
  .home-v2-page .steps li { grid-template-columns: auto 1fr; column-gap: 14px; padding: 14px; }
  .steps li::before { grid-row: span 2; }
  .m-visit { grid-template-columns: 1fr; }
  .home-v2-page .map { min-height: 220px; }
  .m-foot .mx { grid-template-columns: repeat(2, minmax(0, 1fr)); }  /* minmax: «arrepentimiento» no ensancha la grilla a 320px */
  .m-foot .mx > div:last-child { grid-column: 1 / -1; }  /* Contacto a lo ancho: el email y el teléfono no se cortan */
  .m-foot .mx > div:first-child { grid-column: 1 / -1; }
  .home-v2-page .m-foot { margin-top: 36px; }
  .home-v2-page { padding-bottom: 64px; }
  .m-fab { bottom: 84px; width: 52px; height: 52px; right: 14px; }
  .m-tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; background: var(--s-paper); border-top: 1px solid var(--s-line); padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .m-tabbar > * { display: grid; justify-items: center; gap: 2px; font: 700 11px/1.55 var(--f-body); color: var(--s-muted); padding: 4px 0; background: none; border: 0; cursor: pointer; }
  .m-tabbar > *::before {
    content: ""; width: 22px; height: 22px; background: currentColor;
    -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
  }
  .m-tabbar .on { color: var(--s-forest); }
  .m-tabbar .i-tab-search { --i: var(--i-search); }
  .m-tabbar .i-tab-grid { --i: var(--i-grid); }
  .m-tabbar .i-tab-steth { --i: var(--i-steth); }
  .m-tabbar .i-tab-cart { --i: var(--i-cart); }
  /* El número de home.js, en la esquina de arriba a la derecha del ícono del carrito. Verde con
     blanco (6,35:1) y no el dorado del header: el dorado sobre esta barra clara da 2,22:1 y el
     círculo se pierde. */
  .m-tabbar .i-tab-cart { position: relative; }
  .m-tabbar .m-tab-n { position: absolute; top: -4px; left: calc(50% + 6px); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--s-forest); color: #fff; font: 700 12px/20px var(--f-body); text-align: center; font-variant-numeric: tabular-nums; }
}

@media (prefers-reduced-motion: reduce) {
  .home-v2-page *, .home-v2-page *::before, .home-v2-page *::after { transition: none !important; animation: none !important; }
}