/** Shopify CDN: Minification failed

Line 281:16 Unexpected "`"

**/
@layer base {
/**
 * base-enova-theme — reset + base elements
 * Reset inspired by Josh Comeau's custom CSS reset.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Fuera `text-rendering: optimizeLegibility` y los dos `font-smoothing`: el primero
     no mejora nada en navegadores modernos y puede costar rendimiento, y los otros dos
     solo aplican en macOS —donde el sistema ya rasteriza en grises— y lo único que
     hacían era adelgazar el texto. La calidad real la dan los pesos reales de la
     variable + woff2 + `swap`. */
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: var(--header-offset, var(--header-height, 0px));
  /* Recorta bleed horizontal (100vw, animaciones) sin crear scrollport extra */
  overflow-x: clip;
  /* Sin esto, un swipe de trackpad con componente horizontal (ej. leyendo la
     marquesina del PDP) dispara el gesto nativo "volver/avanzar" del navegador
     o el rebote elástico — la página "se mueve" aunque no haya nada que
     scrollear. Solo bloquea el eje X; el scroll/pull-to-refresh vertical sigue igual. */
  overscroll-behavior-x: none;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  /* Nunito es variable y cubre 200..1000, así que ningún peso hace falta sintetizarlo.
     Si algún día faltara uno, esto lo deja a la vista en vez de mostrar una negrita
     falsa (que es lo que se ve "borroso"). */
  font-synthesis: none;
  background-color: var(--color-surface);
  color: var(--color-on-surface);
}

html:has(dialog[scroll-lock][open], details[scroll-lock][open]),
html[scroll-lock] {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Desktop: pad html so in-flow header + main stay put when scrollbar disappears. */
html[scroll-lock]:not([data-scroll-lock-freeze]) {
  padding-right: var(--scroll-lock-gap, 0px);
}

html[scroll-lock] body {
  overscroll-behavior: none;
}

@media (max-width: 1024px), (hover: none) {
  html[scroll-lock] body {
    touch-action: none;
  }
}

[data-scroll-lock-allow] {
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
textarea,
select,
button {
  font: inherit;
  color: inherit;
}

input,
textarea,
select {
  border-radius: var(--radius-sm);
}

select {
  background-color: var(--color-surface);
}

a {
  color: var(--color-accent);
  text-underline-offset: 0.15em;
}

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* El anillo de foco NO se ve al hacer clic ni al tocar; solo al navegar con teclado.
   `:focus-visible` ya lo resuelve en casi todo, pero Chrome sí lo dibuja al hacer clic en
   un `<summary>` (los acordeones y el menú de categorías), y ese anillo azul del navegador
   sobre una pastilla redondeada es justo lo que se veía mal. Aquí se anula ese caso.

   NO se quita el de teclado: sin él la tienda queda sin navegación visible por tabulador,
   incumple WCAG 2.4.7 y el test 8.6 de la suite («el focus ring nunca se elimina sin
   reemplazo») falla. Lo que se ve con el ratón desaparece; lo que necesita el teclado se
   queda, y con el color de la marca en vez del azul del navegador. */
:focus:not(:focus-visible) {
  outline: none;
}

summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  line-height: var(--leading-tight);
  font-weight: 600;
}

p {
  text-wrap: pretty;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

p:empty {
  display: none;
}

:is(p, h1, h2, h3, h4, h5, h6):first-child,
:empty:first-child + :where(p, h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}

:is(p, h1, h2, h3, h4, h5, h6):last-child,
:where(p, h1, h2, h3, h4, h5, h6) + :has(+ :empty:last-child) {
  margin-block-end: 0;
}

/* Section grid (from Skeleton — full-width utility) */
.shopify-section {
  --content-width: min(
    calc(var(--page-width) - var(--page-margin) * 2),
    calc(100% - var(--page-margin) * 2)
  );
  --content-margin: minmax(var(--page-margin), 1fr);
  --content-grid: var(--content-margin) var(--content-width) var(--content-margin);

  position: relative;
  display: grid;
  grid-template-columns: var(--content-grid);
  width: 100%;
}

.shopify-section > * {
  grid-column: 2;
}

.shopify-section > .full-width {
  grid-column: 1 / -1;
}

/* Chrome (header/footer): fuera del grid de contenido — shell 100vw */
.shopify-section.section-header,
.shopify-section.section-footer {
  display: block;
  width: 100%;
  max-width: none;
}

/* El pie se pega abajo en las páginas cortas (404, búsqueda sin resultados). El
   `margin-top: auto` vivía en el `<footer>`, que NO es el item flex de `body`: el item
   es este wrapper. Con el pie oscuro de la base no se notaba; con la tarjeta blanca
   flotando sí, porque debajo asomaba el gris de la página. */
.shopify-section.section-footer {
  margin-block-start: auto;
}

/* Wrapper de sección que no renderizó nada (ej. reseñas sin reseñas): Shopify
   igual emite el <div class="shopify-section"> vacío y el gap global le daría
   un hueco fantasma. :has(*) ignora nodos de texto/espacios en blanco. */
.shopify-section:not(:has(*)) {
  display: none;
}

/* Tipografía de secciones desde ajustes del tema */
.section__heading,
.carousel__title,
.carousel__intro h2,
.pdp-extras__tab {
  font-size: var(--section-heading-size, 1.75rem);
}

.section__body,
.carousel__subtitle {
  font-size: var(--section-body-size, 1rem);
}

/* Título de sección sobre fondo claro (Figma Home):
   titular regular, lh 1, tracking -1%, tinta al 78%. */
.carousel__intro h2 {
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--color-on-surface) 78%, transparent);
}

/* Contained content axis (footer, PLP, contained modules).
   Full-bleed: 100% + gutter exacto (--site-padding), sin doble inset. */
.layout-content {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--site-padding);
}

/* Las dos filas de navegación de la cabecera se alinean con el CONTENIDO de la página, no
   con el borde de la ventana: `max-width: var(--page-width)` + `margin-inline: auto` y el
   mismo gutter que el eje de contenido, así que su borde interior cae exactamente donde
   empieza cualquier sección. Antes eran shell al 100% y en pantallas anchas el logo quedaba
   a 40px del borde mientras el contenido arrancaba centrado 80px más adentro — se notaba
   como un desajuste entre la cabecera y el héroe.

   La marquesina NO usa esta clase: sigue a sangre, que es lo que pide el diseño. */
.header__container {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--site-padding);
}

.layout-shell--full {
  grid-column: 1 / -1;
  width: 100%;
}

.layout-read {
  max-width: 65ch;
}

/* Motion reveal initial state (progressive enhancement) */
/* Solo se oculta si hay JS que vaya a revelarlo (la clase no-js la quita un
   script inline en <head>, antes del primer pintado). Sin JS el contenido se
   ve, que es el principio no negociable del tema; además axe medía estos
   elementos como invisibles.

   Este comentario estaba SIN CERRAR y se comía el CSS que venía detrás hasta el
   siguiente `*/`. Hoy solo se tragaba un `@media` vacío, así que no rompía nada — pero
   la primera regla que alguien hubiera escrito ahí habría muerto en silencio. */

/* Caps micro-type — nav, product cards, form labels */
.text-caps {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1;
  text-transform: uppercase;
}

/* Section frame — per-section vertical padding + margin via settings
   (padding_top / padding_bottom / margin_top / margin_bottom).
   Width: contained by default (.shopify-section col 2); add `full-width` for full bleed. */
.section-frame {
  padding-block-start: var(--section-pt, 0px);
  padding-block-end: var(--section-pb, 0px);
  margin-block-start: var(--section-mt, 0px);
  margin-block-end: var(--section-mb, 0px);
}

/* Visually hidden utility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Skip link (a11y) ─────────────────────────────────────────────────────────
   Fuera de pantalla hasta recibir foco; al enfocarse aterriza arriba a la
   izquierda, por encima de cualquier overlay. Nunca `display:none`: eso lo
   quitaría del orden de tabulación y con él el requisito. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  text-decoration: underline;
  border-radius: 0 0 var(--radius-base) 0;
  transform: translateY(-100%);
}

.skip-link:focus-visible,
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

#MainContent:focus {
  outline: none;
}
}