/* Generado por gen_build.py a partir de gen_bloques.py. No editar a mano: la fuente es el generador. */

:root {
  --lulo-navy: var(--wp--preset--color--lulo-navy, #27364B);
  --lulo-deep: var(--wp--preset--color--lulo-deep, #2A323D);
  --lulo-soft: var(--wp--preset--color--lulo-soft, #727F92);
  --lulo-accent: var(--wp--preset--color--lulo-accent, #27364B);
  --lulo-accent-d: var(--wp--preset--color--lulo-accent-d, #2A323D);
  --lulo-blanco: var(--wp--preset--color--lulo-blanco, #FFFFFF);
  --lulo-band: var(--wp--preset--color--lulo-band, #F6F8F9);
  --lulo-band-2: var(--wp--preset--color--lulo-band-2, #EEF2F4);
  --lulo-line: var(--wp--preset--color--lulo-line, #DFE5E9);
  --lulo-line-2: var(--wp--preset--color--lulo-line-2, #EDF1F3);
  --lulo-ink: var(--wp--preset--color--lulo-ink, #27364B);
  --lulo-muted: var(--wp--preset--color--lulo-muted, #727F92);
  --lulo-olive: var(--wp--preset--color--lulo-olive, #2E4E37);
  --lulo-gold: var(--wp--preset--color--lulo-gold, #727F92);
  --lulo-aviso: var(--wp--preset--color--lulo-aviso, #E8F1FA);
  --lulo-aviso-ink: var(--wp--preset--color--lulo-aviso-ink, #1F5C8B);
  --lulo-pedido: var(--wp--preset--color--lulo-pedido, #DDE329);
  --lulo-navy-rgb: 39,54,75;
  --lulo-deep-rgb: 42,50,61;
  --lulo-soft-rgb: 114,127,146;
  --lulo-accent-rgb: 39,54,75;
  --lulo-accent-d-rgb: 42,50,61;
  --lulo-blanco-rgb: 255,255,255;
  --lulo-band-rgb: 246,248,249;
  --lulo-band-2-rgb: 238,242,244;
  --lulo-line-rgb: 223,229,233;
  --lulo-line-2-rgb: 237,241,243;
  --lulo-ink-rgb: 39,54,75;
  --lulo-muted-rgb: 114,127,146;
  --lulo-olive-rgb: 46,78,55;
  --lulo-gold-rgb: 114,127,146;
  --lulo-aviso-rgb: 232,241,250;
  --lulo-aviso-ink-rgb: 31,92,139;
  --lulo-pedido-rgb: 221,227,41;
  --lulo-w: 1260px;
  --lulo-radio-control: 5px;
  --lulo-radio-tarjeta: 8px;
  --lulo-fuente: "Helvetica Neue", "Helvetica Neue LT Std", Helvetica, Arial, sans-serif;
}

/* Envoltura común de todo bloque lulo/* — los valores llegan como variables desde render.php */
.lulo-bloque {
  box-sizing: border-box;
  font-family: var(--lulo-fuente);
  padding-top: var(--lulo-es, 0px);
  padding-bottom: var(--lulo-ei, 0px);
  padding-left: var(--lulo-el, 0px);
  padding-right: var(--lulo-el, 0px);
  border-radius: var(--lulo-radio, 0px);
  min-width: 0;
}
.lulo-bloque *, .lulo-bloque *::before, .lulo-bloque *::after { box-sizing: border-box; }
.lulo-bloque > * { min-width: 0; }
.lulo-ancho-contenedor { max-width: var(--lulo-w); margin-left: auto; margin-right: auto; }
.lulo-ancho-completo { width: 100%; }
.lulo-wrap { max-width: var(--lulo-w); margin: 0 auto; padding: 0 clamp(18px, 3.6vw, 34px); width: 100%; min-width: 0; }
.lulo-wrap > * { min-width: 0; }
.lulo-bloque img { max-width: 100%; display: block; }
.lulo-bloque a { text-decoration: none; }
.lulo-bloque button:not(.lulo-btn):not(.lulo-addbtn):not([data-step]) { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.lulo-bloque :focus-visible { outline: 2px solid var(--lulo-accent); outline-offset: 2px; }

@media (max-width: 760px) {
  .lulo-bloque { padding-top: var(--lulo-esm, var(--lulo-es, 0px)); padding-bottom: var(--lulo-eim, var(--lulo-ei, 0px)); }
  .lulo-oculto-movil { display: none !important; }
}
@media (min-width: calc(760px + 1px)) {
  .lulo-oculto-escritorio { display: none !important; }
}

/* Escala tipográfica (sección 6.1): el estilo visual va separado del nivel semántico */
.lulo-t-display, .lulo-t-titulo-1, .lulo-t-titulo-2, .lulo-t-titulo-3 {
  font-family: var(--lulo-fuente); font-weight: 500; line-height: 1.16; letter-spacing: -.019em; margin: 0;
}
.lulo-t-display  { font-size: clamp(31px, 3.7vw, 46px); letter-spacing: -0.028em; line-height: 1.1; }
.lulo-t-titulo-1 { font-size: 26px; }
.lulo-t-titulo-2 { font-size: 19px; }
.lulo-t-titulo-3 { font-size: 16px; }
.lulo-t-etiqueta { font-family: var(--lulo-fuente); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; margin: 0; }
.lulo-t-cuerpo   { font-family: var(--lulo-fuente); font-size: 15.5px; line-height: 1.55; margin: 0; }
@media (max-width: 760px) {
  .lulo-t-display  { font-size: 31px; }
  .lulo-t-titulo-1 { font-size: 23px; }
  .lulo-t-titulo-2 { font-size: 17px; }
  .lulo-t-titulo-3 { font-size: 15px; }
  .lulo-t-cuerpo   { font-size: 15px; }
}

/* Cabeza de sección: etiqueta, título, subtítulo y enlace a la derecha */
.lulo-sec__cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.lulo-sec__cabeza > * { min-width: 0; }
.lulo-sec__etiqueta { color: var(--lulo-muted); margin-bottom: 5px; }
.lulo-sec__titulo { color: var(--lulo-navy); margin: 0; }
.lulo-sec__sub { color: var(--lulo-muted); margin: 5px 0 0; font-size: 14px; }
.lulo-sec__enlace { font-size: 13.5px; font-weight: 600; color: var(--lulo-accent); white-space: nowrap; }
.lulo-sec__enlace--texto { font-size: 12.5px; font-weight: 400; color: var(--lulo-muted); }
@media (max-width: 760px) {
  .lulo-sec__cabeza { margin-bottom: 14px; align-items: baseline; }
}

/* Botones */
.lulo-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 24px;
  border-radius: var(--lulo-radio-control); font-family: var(--lulo-fuente); font-weight: 600; font-size: 14.5px;
  line-height: 1; white-space: nowrap; border: 1px solid transparent; text-decoration: none; cursor: pointer;
}
.lulo-btn--primario { background: var(--lulo-navy); color: #fff; border-color: var(--lulo-navy); }
.lulo-btn--primario:hover { background: var(--lulo-deep); border-color: var(--lulo-deep); }
.lulo-btn--secundario { background: #fff; color: var(--lulo-navy); border-color: var(--lulo-line); }
.lulo-btn--secundario:hover { border-color: var(--lulo-navy); }
/* Sobre fondo oscuro: el primario se invierte y el secundario queda en línea */
.lulo-oscuro .lulo-btn--primario, .lulo-btn--claro { background: #fff; color: var(--lulo-navy); border-color: #fff; }
.lulo-oscuro .lulo-btn--primario:hover, .lulo-btn--claro:hover { background: var(--lulo-band); border-color: var(--lulo-band); }
.lulo-oscuro .lulo-btn--secundario, .lulo-btn--fantasma { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.lulo-oscuro .lulo-btn--secundario:hover, .lulo-btn--fantasma:hover { background: rgba(255,255,255,.1); border-color: #fff; }
@media (max-width: 760px) {
  .lulo-cta .lulo-btn { flex: 1 1 auto; padding: 0 14px; }
}

/* ---- Tarjeta de producto global ---- */
.lulo-tarjetas { display: grid; grid-template-columns: repeat(var(--lulo-col-esc, 4), minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.lulo-tarjetas > * { min-width: 0; }
.lulo-tarjeta { border: 1px solid var(--lulo-line); border-radius: var(--lulo-radio-tarjeta); overflow: hidden; display: flex; flex-direction: column; background: #fff; min-width: 0; margin: 0; padding: 0; list-style: none; }
.lulo-tarjeta:hover { border-color: var(--lulo-navy); }
.lulo-tarjeta__foto { position: relative; display: block; aspect-ratio: 1 / 1; padding: 0; background: #fff; border-bottom: 1px solid var(--lulo-line-2); overflow: hidden; }
.lulo-tarjeta__foto img { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); max-width: none; max-height: none; object-fit: contain; }
.lulo-tarjeta__tag { position: absolute; top: 10px; left: 10px; background: var(--lulo-navy); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .08em; padding: 3px 7px; border-radius: 3px; text-transform: uppercase; }
.lulo-tarjeta__cuerpo { padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.lulo-tarjeta__marca { font-size: 10px; font-weight: 600; letter-spacing: .13em; color: var(--lulo-muted); text-transform: uppercase; }
.lulo-tarjeta__nombre { font-size: 14.5px; font-weight: 500; line-height: 1.34; margin: 0; color: var(--lulo-ink); letter-spacing: -.01em; }
.lulo-tarjeta__nombre a { color: inherit; text-decoration: none; }
.lulo-tarjeta__meta { font-size: 12.5px; color: var(--lulo-muted); overflow-wrap: anywhere; }
.lulo-tarjeta__stock { font-weight: 600; color: var(--lulo-olive); }
.lulo-tarjeta__stock--bajo { color: var(--lulo-muted); }
.lulo-tarjeta__pie { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.lulo-tarjeta__muro { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 38px; border: 1px solid var(--lulo-line); border-radius: var(--lulo-radio-control); font-size: 13px; font-weight: 600; color: var(--lulo-navy); background: #fff; text-decoration: none; }
.lulo-tarjeta__muro:hover { border-color: var(--lulo-navy); background: var(--lulo-band); }
.lulo-tarjeta__muro svg { opacity: .6; }
.lulo-tarjeta__precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.lulo-tarjeta__precio b { font-size: 16px; font-weight: 600; color: var(--lulo-navy); }
.lulo-tarjeta__precio span { font-size: 11.5px; color: var(--lulo-muted); }
.lulo-tarjeta__precio em { font-style: normal; color: var(--lulo-olive); font-weight: 600; }
.lulo-tarjeta__compra { display: flex; gap: 6px; align-items: center; margin: 0; width: 100%; min-width: 0; }
.lulo-tarjeta .lulo-stepper { display: flex; border: 1px solid var(--lulo-line); border-radius: var(--lulo-radio-control); height: 36px; flex: 0 0 96px; width: 96px; overflow: hidden; background: #fff; }
.lulo-tarjeta .lulo-stepper button { flex: 0 0 28px; width: 28px; font-size: 16px; color: var(--lulo-navy); background: #fff; border: none; cursor: pointer; padding: 0; font-family: inherit; }
.lulo-tarjeta .lulo-stepper input { flex: 1 1 auto; min-width: 0; width: 100%; border: none; text-align: center; font: inherit; font-size: 14px; font-weight: 600; outline: none; color: var(--lulo-ink); background: #fff; padding: 0; -moz-appearance: textfield; appearance: textfield; }
.lulo-tarjeta .lulo-stepper input::-webkit-outer-spin-button, .lulo-tarjeta .lulo-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lulo-tarjeta .lulo-addbtn { flex: 1 1 auto; min-width: 0; height: 36px; border-radius: var(--lulo-radio-control); background: var(--lulo-navy); color: #fff; font: inherit; font-weight: 600; font-size: 13px; border: none; cursor: pointer; white-space: nowrap; padding: 0 8px; }
.lulo-tarjeta .lulo-addbtn:hover { background: var(--lulo-deep); }
/* Carrusel de tarjetas: pista con desplazamiento a pasos; las flechas las pinta el bloque */
.lulo-tarjetas--carrusel { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; overscroll-behavior-x: contain; }
.lulo-tarjetas--carrusel::-webkit-scrollbar { display: none; }
.lulo-tarjetas--carrusel > .lulo-tarjeta { flex: 0 0 calc((100% - 14px * (var(--lulo-col-esc, 4) - 1)) / var(--lulo-col-esc, 4)); scroll-snap-align: start; }
@media (max-width: 1080px) {
  .lulo-tarjetas { grid-template-columns: repeat(var(--lulo-col-tab, 3), minmax(0, 1fr)); }
  .lulo-tarjetas--carrusel > .lulo-tarjeta { flex-basis: calc((100% - 14px * (var(--lulo-col-tab, 3) - 1)) / var(--lulo-col-tab, 3)); }
}
@media (max-width: 760px) {
  .lulo-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lulo-tarjetas--carrusel { gap: 10px; }
  .lulo-tarjetas--carrusel > .lulo-tarjeta { flex-basis: calc((100% - 10px) / 2); }
  .lulo-tarjeta__foto { padding: 10px; }
  .lulo-tarjeta__cuerpo { padding: 11px 11px 12px; }
  .lulo-tarjeta__nombre { font-size: 13.5px; }
  .lulo-tarjeta__meta { font-size: 12px; }
  .lulo-tarjeta__compra { flex-wrap: wrap; }
  .lulo-tarjeta .lulo-stepper { flex: 1 1 100%; width: 100%; }
  .lulo-tarjeta .lulo-stepper input { font-size: 16px; }
  .lulo-tarjeta .lulo-addbtn { flex: 1 1 100%; }
}

/* Retículas que WooCommerce arma por su cuenta (bloques de producto) */
.wc-block-grid__products, .wc-block-product-template { display: grid !important; grid-template-columns: repeat(var(--lulo-col-esc, 4), minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 1080px) { .wc-block-grid__products, .wc-block-product-template { grid-template-columns: repeat(var(--lulo-col-tab, 3), minmax(0, 1fr)); } }
@media (max-width: 760px) { .wc-block-grid__products, .wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
/* Cada ítem es la misma tarjeta del tema: foto cuadrada, nombre a dos líneas, y precio + botón anclados abajo a la misma altura en toda la fila */
.wc-block-grid__product, .wc-block-product { margin: 0 !important; width: auto !important; max-width: none !important; border: 1px solid var(--lulo-line); border-radius: var(--lulo-radio-tarjeta); padding: 0; background: #fff; display: flex; flex-direction: column; text-align: left; overflow: hidden; min-width: 0; }
.wc-block-grid__product:hover, .wc-block-product:hover { border-color: var(--lulo-navy); }
.wc-block-grid__product-link { display: contents; }
.wc-block-grid__product-image, .wc-block-components-product-image { position: relative; aspect-ratio: 1 / 1; display: block; padding: 0; margin: 0 !important; border-bottom: 1px solid var(--lulo-line-2); background: #fff; overflow: hidden; }
.wc-block-grid__product-image a, .wc-block-components-product-image a { display: block; }
.wc-block-grid__product-image img, .wc-block-components-product-image img { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); max-width: none; max-height: none; object-fit: contain; }
.wc-block-grid__product-title, .wc-block-product .wp-block-post-title { font-size: 14.5px; font-weight: 500; line-height: 1.34; color: var(--lulo-ink); letter-spacing: -.01em; margin: 13px 14px 0 !important; padding: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.68em; }
.wc-block-grid__product-title a, .wc-block-product .wp-block-post-title a { color: inherit; text-decoration: none; }
.wc-block-grid__product-price, .wc-block-components-product-price { margin: auto 14px 0 !important; padding-top: 12px; font-size: 15px; font-weight: 600; color: var(--lulo-ink); font-variant-numeric: tabular-nums; text-align: left; line-height: 1.2; }
.wc-block-grid__product-price del, .wc-block-components-product-price del { color: var(--lulo-muted); font-weight: 400; }
.wc-block-grid__product-add-to-cart, .wc-block-components-product-button { margin: auto 14px 14px !important; }
.wc-block-grid__product-price ~ .wc-block-grid__product-add-to-cart, .wc-block-components-product-price ~ .wc-block-components-product-button { margin-top: 8px !important; }
.wc-block-grid__product-add-to-cart .wp-block-button__link, .wc-block-components-product-button .wp-block-button__link { display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; padding: 0 8px; border-radius: var(--lulo-radio-control); background: var(--lulo-navy); color: #fff; font: inherit; font-weight: 600; font-size: 13px; border: none; white-space: nowrap; text-decoration: none; }
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover, .wc-block-components-product-button .wp-block-button__link:hover { background: var(--lulo-deep); color: #fff; }
.wc-block-grid__product-onsale { position: absolute; top: 10px; left: 10px; background: var(--lulo-navy); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .08em; padding: 3px 7px; border-radius: 3px; text-transform: uppercase; border: none; }
@media (max-width: 760px) {
  .wc-block-grid__product-title, .wc-block-product .wp-block-post-title { font-size: 13.5px; margin: 11px 11px 0 !important; }
  .wc-block-grid__product-price, .wc-block-components-product-price { margin: auto 11px 0 !important; }
  .wc-block-grid__product-add-to-cart, .wc-block-components-product-button { margin: auto 11px 12px !important; }
  .wc-block-grid__product-price ~ .wc-block-grid__product-add-to-cart, .wc-block-components-product-price ~ .wc-block-components-product-button { margin-top: 8px !important; }
}
/* Título de respaldo que no debe verse pero sí existir (un H1 por página) */
.lulo-oculto-visual { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0; }