@charset "UTF-8";
/*!
Theme Name: illux-profesional-3-0
Theme URI: http://underscores.me/
Author: Illux de México
Author URI: http://underscores.me/
Description: Tema 3.0 para Illux de México
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: illux-profesional-3-0
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Illux profesional 3.0 is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
	 ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
	 ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
	 ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* Interactive
	 ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
	 ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* Propios del proyecto
	 ========================================================================== */
/**
 * Todo lo que no definamos explícitamente lo normalizamos aquí, en vez de
 * dejar que cada navegador aplique su propio estilo por defecto.
 */
/**
 * Outline de foco por teclado consistente entre navegadores.
 */
:focus-visible {
  outline: none;
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

/* Typography
--------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
  margin: 0;
  font-family: Montserrat, sans-serif;
  font-size: inherit;
  font-weight: inherit;
}

p {
  margin-top: 0;
  margin-bottom: 0;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

blockquote {
  margin: 0 1.5rem;
}

address {
  margin: 0 0 1.5rem;
}

pre {
  background: #D6D6D6;
  font-family: "Courier 10 Pitch", courier, monospace;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  max-width: 100%;
  overflow: auto;
  padding: 1.5rem;
}

code,
kbd,
tt,
var {
  font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
  border-bottom: 1px dotted #D6D6D6;
  cursor: help;
}

mark,
ins {
  background: #D6D6D6;
  text-decoration: none;
}

big {
  font-size: 125%;
}

body,
button,
input,
select,
optgroup,
textarea {
  color: #191919;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

/* Elements
--------------------------------------------- */
body {
  background: #FFF;
}

hr {
  background-color: #D6D6D6;
  border: 0;
  height: 1px;
  margin-bottom: 1.5rem;
}

ul,
ol {
  margin: 0 0 1.5rem 3rem;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 1.5rem;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

img {
  height: auto;
  max-width: 100%;
}

figure {
  margin: 1rem 0;
}

table {
  margin: 0 0 1.5rem;
  width: 100%;
}

/* Links
--------------------------------------------- */
/* Forms
--------------------------------------------- */
select {
  border: 1px solid #D6D6D6;
}

textarea {
  width: 100%;
}

.site-main {
  padding-inline: clamp(1rem, 2vw, 2.5rem);
}

/* Composition de texto
--------------------------------------------- */
.composition-txt {
  display: flex;
  flex-direction: column;
  padding-inline: 0;
  padding-block: 2rem;
  gap: 0.75rem;
  align-items: flex-start;
  text-align: left;
}
.composition-txt--card {
  padding-block: 1rem 2rem;
}
.composition-txt--center {
  display: flex;
  flex-direction: column;
  padding-inline: 0;
  padding-block: 2rem;
  gap: 0.75rem;
  align-items: center;
  text-align: center;
}
.composition-txt--end {
  display: flex;
  flex-direction: column;
  padding-inline: 0;
  padding-block: 2rem;
  gap: 0.75rem;
  align-items: flex-end;
  text-align: right;
}
.composition-txt--padding-surface-inline {
  padding-inline: 1rem;
}
.composition-txt--gap-loose {
  gap: 2.25rem;
}
@media screen and (min-width: 36rem) {
  .composition-txt--gap-loose {
    gap: 2.625rem;
  }
}
@media screen and (min-width: 48rem) {
  .composition-txt--gap-loose {
    gap: 4rem;
  }
}

.head,
.text,
.action {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  text-align: inherit;
  gap: 0.75rem;
}
.head--layout-content-none,
.text--layout-content-none,
.action--layout-content-none {
  gap: 0;
}
.head--layout-content-compact,
.text--layout-content-compact,
.action--layout-content-compact {
  gap: 0.75rem;
}
.head--layout-content-tight,
.text--layout-content-tight,
.action--layout-content-tight {
  gap: 1rem;
}
.head--layout-content-support,
.text--layout-content-support,
.action--layout-content-support {
  gap: 1.125rem;
}
.head--layout-content-action,
.text--layout-content-action,
.action--layout-content-action {
  gap: 2rem;
}
.head--layout-content-separation,
.text--layout-content-separation,
.action--layout-content-separation {
  gap: 2.5rem;
}

/* Icon
--------------------------------------------- */
/**
 * Ícono (SVG inline de assets/icons/ con illux_icon()).
 *
 * Uso:
 *   <span class="icon icon--sm"><?php illux_icon( 'arrow' ); ?></span>
 *
 * Sin modificador mide 1em (el tamaño del texto que lo rodea). El color se
 * hereda del texto (currentColor); para cambiarlo, poner `color` en .icon o
 * en su contenedor. Los SVG deben usar fill/stroke="currentColor".
 */
.icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  color: inherit;
}
.icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.icon--xs {
  width: 0.75rem;
  height: 0.75rem;
}
.icon--sm {
  width: 1rem;
  height: 1rem;
}
.icon--md {
  width: 1.5rem;
  height: 1.5rem;
}
.icon--lg {
  width: 2.25rem;
  height: 2.25rem;
}
.icon--xl {
  width: 3rem;
  height: 3rem;
}

svg[data-icon=shop] {
  transform: scale(1.12);
}

svg[data-icon=arrow] path {
  stroke-width: 2;
}

svg[data-icon=close] path {
  stroke-width: 1.75;
}

/* Header
--------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 400;
  padding: 0.5rem;
  transition: transform 0.5s cubic-bezier(0.45, 0, 0.2, 1);
}
@media screen and (min-width: 48rem) {
  .site-header {
    padding: calc(1.125rem + 1rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}
.site-header--hidden:not(:focus-within):not(:has(.menu__nav.toggled, .menu--bubble)) {
  transform: translateY(-100%);
}

@media screen and (min-width: 600px) {
  .admin-bar .site-header {
    top: 46px;
  }
}
@media screen and (min-width: 783px) {
  .admin-bar .site-header {
    top: 32px;
  }
}
/* Menu
--------------------------------------------- */
@property --menu-bubble-height {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
.menu {
  border: 1px solid rgba(255, 255, 255, 0.231372549);
  position: relative;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  width: 100%;
  min-height: 3.2rem;
  padding-inline: clamp(1rem, 2vw, 2.5rem);
  border-radius: 0.375rem;
}
@media screen and (min-width: 48rem) and (max-width: calc(75rem - 0.02rem)) {
  .menu {
    --menu-bubble-height: calc(1rem + 2.75rem);
    transition: --menu-bubble-height 0.3s ease;
  }
}
@media screen and (min-width: 75rem) {
  .menu {
    --menu-bubble-height: calc(1rem + 3.75rem);
    min-height: 3.75rem;
    transition: --menu-bubble-height 0.3s ease;
  }
}
.menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: rgba(75, 75, 75, 0.6);
  backdrop-filter: blur(1.2rem);
  pointer-events: none;
}
@media screen and (min-width: 75rem) {
  .menu::before {
    display: none;
  }
}
.menu__bubble {
  display: none;
}
@media screen and (min-width: 48rem) {
  .menu__bubble {
    position: absolute;
    top: -1rem;
    left: -1rem;
    right: -1rem;
    z-index: -1;
    display: block;
    height: var(--menu-bubble-height);
    border-radius: 0.375rem;
    background-color: rgba(75, 75, 75, 0.6);
    backdrop-filter: blur(1.2rem);
    clip-path: inset(1rem 1rem 0 1rem round 0.375rem);
    transition: clip-path 0.3s ease;
  }
}
@media screen and (min-width: 48rem) and (max-width: calc(75rem - 0.02rem)) {
  .menu__bubble {
    z-index: -3;
    visibility: hidden;
    transition: clip-path 0.3s ease, visibility 0s linear 0.3s;
  }
}
@media screen and (min-width: 75rem) {
  .menu__panel:not(.menu__list) {
    visibility: hidden;
    opacity: 0;
    clip-path: inset(0 0 max(0px, 100% - var(--menu-bubble-height)) 0);
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }
  .menu__panel:not(.menu__list).menu__panel--active {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s ease, visibility 0s;
  }
}
@media screen and (min-width: 48rem) and (max-width: calc(75rem - 0.02rem)) {
  .menu__nav > .menu__panel, .menu__actions .menu__panel {
    visibility: hidden;
    opacity: 0;
    clip-path: inset(0 0 max(0px, 100% - var(--menu-bubble-height)) 0);
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }
  .menu__nav > .menu__panel.menu__panel--active, .menu__actions .menu__panel.menu__panel--active {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s ease, visibility 0s;
  }
}
@media screen and (min-width: 48rem) and (max-width: calc(75rem - 0.02rem)) {
  .menu.menu--bubble::before {
    opacity: 0;
    transition: none;
  }
  .menu--bubble .menu__bubble {
    visibility: visible;
  }
  .menu--bubble .menu__nav > .menu__list {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s ease, visibility 0s;
  }
}
@media screen and (min-width: 48rem) {
  .menu--bubble {
    transition: --menu-bubble-height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .menu--bubble .menu__bubble {
    clip-path: inset(0 round 0.375rem);
    transition: clip-path 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
  }
  .menu--bubble-resize {
    transition: --menu-bubble-height 0.5s cubic-bezier(0.45, 0, 0.2, 1);
  }
}
.menu__branding {
  display: flex;
  align-items: center;
}
.menu__branding .custom-logo-link img {
  display: block;
  width: 7.5rem;
  height: auto;
}
@media screen and (min-width: 75rem) {
  .menu__branding .custom-logo-link img {
    width: 9.7rem;
  }
}
.menu__nav {
  display: flex;
  align-items: center;
}
@media screen and (min-width: 48rem) and (max-width: calc(75rem - 0.02rem)) {
  .menu__nav {
    order: 1;
  }
}
@media screen and (min-width: 75rem) {
  .menu__nav {
    flex: 1;
    align-self: stretch;
    justify-content: center;
  }
}
.menu__list {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 75rem) {
  .menu__list {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 1.5rem;
  }
}
.menu__list > li:not(.menu__mobile-actions) > a {
  display: block;
  color: #FFF;
  text-decoration: none;
}
@media screen and (max-width: calc(48rem - 0.02rem)) {
  .menu__list > li:not(.menu__mobile-actions) > a {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
  }
}
.menu__list > li:not(.menu__mobile-actions) > a {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 1.5;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .menu__list > li:not(.menu__mobile-actions) > a {
    font-size: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .menu__list > li:not(.menu__mobile-actions) > a {
    font-size: 1rem;
  }
}
.menu__list > li:not(.menu__mobile-actions) > a:hover {
  color: #D6D6D6;
}
.menu__list .current-menu-item > a,
.menu__list .current_page_item > a {
  color: #A3A3A3;
}
.menu__arrow {
  display: none;
}
@media screen and (max-width: calc(48rem - 0.02rem)) {
  .menu__arrow {
    display: block;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
  }
}
.menu__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}
.menu__mobile-actions {
  display: none;
}
@media screen and (max-width: calc(48rem - 0.02rem)) {
  .menu__mobile-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1rem;
  }
  .menu__mobile-actions .menu__action {
    width: 1.5rem;
    height: 1.5rem;
  }
}
.menu__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: #FFF;
  cursor: pointer;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .menu__back {
    font-size: 0.875rem;
  }
}
@media screen and (min-width: 48rem) {
  .menu__back {
    font-size: 0.875rem;
  }
}
.menu__back:hover {
  color: #D6D6D6;
}
.menu__back:hover .menu__back-icon {
  transform: translateX(calc(1rem - 1.125rem)) rotate(180deg);
}
.menu__back-icon {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}
.menu__back-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.menu__close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: #FFF;
  cursor: pointer;
}
@media screen and (max-width: calc(75rem - 0.02rem)) {
  .menu__close {
    display: inline-flex;
  }
}
.menu__close svg {
  width: 1.5rem;
  height: 1.5rem;
}
.menu__close:hover {
  color: #D6D6D6;
}
.menu__close:active {
  color: #A3A3A3;
}
.menu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: #FFF;
  cursor: pointer;
}
.menu__toggle svg {
  width: 1.5rem;
  height: 1.5rem;
}
.menu__toggle svg path {
  stroke-width: 1.75;
}
.menu__toggle svg[data-icon=close] {
  transform: scale(0.85);
}
.menu__toggle:hover {
  color: #D6D6D6;
}
.menu__toggle-icon {
  display: flex;
}
.menu__toggle-icon--close {
  display: none;
}
.menu__toggle[aria-expanded=true] .menu__toggle-icon--open {
  display: none;
}
.menu__toggle[aria-expanded=true] .menu__toggle-icon--close {
  display: flex;
}
.menu--bubble .menu__toggle .menu__toggle-icon--open {
  display: none;
}
.menu--bubble .menu__toggle .menu__toggle-icon--close {
  display: flex;
}
.menu__toggle:active {
  color: #A3A3A3;
}
@media screen and (min-width: 75rem) {
  .menu__toggle {
    display: none;
  }
}
@media screen and (max-width: calc(48rem - 0.02rem)) {
  .menu__toggle {
    justify-content: flex-end;
  }
}
.menu__actions {
  display: none;
  align-items: center;
  gap: 1.5rem;
}
@media screen and (min-width: 48rem) {
  .menu__actions {
    display: flex;
  }
}
@media screen and (min-width: 48rem) and (max-width: calc(75rem - 0.02rem)) {
  .menu__actions {
    margin-left: auto;
  }
}
.menu__actions-divider {
  align-self: stretch;
  width: 0.5px;
  min-height: 1.5rem;
  background: #A3A3A3;
}
.menu__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  padding: 0;
  border: 0;
  background: none;
  color: #A3A3A3;
  cursor: pointer;
}
.menu__action svg {
  display: block;
  width: 100%;
  height: 100%;
}
.menu__action:hover {
  color: #FFF;
}

/* Home intro (hero + inspiración)
--------------------------------------------- */
.home-intro {
  --home-intro-bg-height: calc(480px + 7rem);
  position: relative;
  isolation: isolate;
  margin-inline: calc(-1 * clamp(1rem, 2vw, 2.5rem));
  background: #191919;
}
@media screen and (min-width: 48rem) {
  .home-intro {
    --home-intro-bg-height: calc(max(640px, 115vh) + 15rem);
  }
}

/* Hero
--------------------------------------------- */
.hero {
  display: flex;
  align-items: center;
  min-height: 480px;
  height: 70vh;
  padding-inline: clamp(1rem, 2vw, 2.5rem);
}
@media screen and (min-width: 48rem) {
  .hero {
    min-height: 620px;
    height: 115vh;
  }
}
@media screen and (min-width: 75rem) {
  .hero {
    min-height: 720px;
    height: 115vh;
  }
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: var(--home-intro-bg-height, 100%);
  background: linear-gradient(180deg, rgba(25, 25, 25, 0) 20%, rgba(25, 25, 25, 0.5) 60%, #191919 94%);
  pointer-events: none;
}
.hero__bg {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  width: 100%;
  height: var(--home-intro-bg-height, 100%);
  object-fit: cover;
  object-position: center top;
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 75rem;
  margin: auto;
  color: #FFF;
}
.hero__title {
  margin: 0;
  text-shadow: 0 1px 4px rgba(25, 25, 25, 0.6);
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  line-height: 1.25;
  font-size: 1.5rem;
}
@media screen and (min-width: 36rem) {
  .hero__title {
    font-size: 2rem;
  }
}
@media screen and (min-width: 48rem) {
  .hero__title {
    font-size: 3.4rem;
    line-height: 0.95;
  }
}
@media screen and (min-width: 96rem) {
  .hero__title {
    font-size: 4rem;
  }
}
.hero__subtitle {
  margin: 0;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  line-height: 1.25;
  font-size: 1.25rem;
}
@media screen and (min-width: 36rem) {
  .hero__subtitle {
    font-size: 1.625rem;
  }
}
@media screen and (min-width: 48rem) {
  .hero__subtitle {
    font-size: 1.75rem;
  }
}
.hero__apoyo {
  text-shadow: 0 1px 4px rgba(25, 25, 25, 0.6);
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 1.5;
  font-size: 1rem;
}
@media screen and (min-width: 36rem) {
  .hero__apoyo {
    font-size: 1.125rem;
  }
}
@media screen and (min-width: 48rem) {
  .hero__apoyo {
    font-size: 1.125rem;
  }
}
.hero__apoyo-link {
  color: inherit;
  text-decoration: underline;
}
.hero__apoyo-link:hover, .hero__apoyo-link:visited {
  color: inherit;
}
.hero__search-group {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  gap: 1.125rem;
  width: 100%;
}
@media screen and (min-width: 36rem) {
  .hero__search-group {
    gap: 1.5rem;
  }
}
.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  gap: 0.75rem;
}
.hero__search-box {
  position: relative;
  width: 100%;
  max-width: 21.875rem;
}
@media screen and (min-width: 48rem) {
  .hero__search-box {
    max-width: 41.125rem;
  }
}
.hero__search {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  height: 2.8125rem;
  padding-block: 0.5rem;
  padding-inline: 1rem 0.5rem;
  border: 1px solid #D6D6D6;
  border-radius: 0.375rem;
  background-color: rgba(75, 75, 75, 0.6);
  backdrop-filter: blur(1.2rem);
  box-shadow: 0 0 4px 1px rgba(25, 25, 25, 0.6);
}
@media screen and (min-width: 48rem) {
  .hero__search {
    height: 3.9rem;
    padding-block: 0.75rem;
    padding-inline: 1.5rem 0.75rem;
  }
}
.hero__search:focus-within {
  border-color: #D6D6D6;
}
.hero__search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #FFF;
  outline: none;
  text-align: center;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 1.5;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .hero__search-input {
    font-size: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .hero__search-input {
    font-size: 1rem;
  }
}
.hero__search-input {
  font-size: 1rem;
}
@media screen and (min-width: 36rem) {
  .hero__search-input {
    font-size: 1.125rem;
  }
}
.hero__search-input::placeholder {
  color: #D6D6D6;
  opacity: 1;
}
.hero__search-input::-webkit-search-cancel-button {
  appearance: none;
}
.hero__search-button {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 0.25rem;
  background: #AC1C3C;
  color: #FFF;
  cursor: pointer;
}
.hero__search-button:hover {
  background: #CA475E;
}
.hero__search-button:focus-visible {
  outline: 2px solid #FFF;
  outline-offset: 2px;
}
.hero__search-button svg {
  display: block;
  width: 50%;
  height: 50%;
}
.hero__results {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  left: 0;
  z-index: 300;
  margin: 0;
  padding-block: 0.5rem;
  padding-inline: 0;
  border: 1px solid #D6D6D6;
  border-radius: 0.375rem;
  background-color: rgba(75, 75, 75, 0.6);
  backdrop-filter: blur(1.2rem);
  box-shadow: 0 0 7px 1px rgba(25, 25, 25, 0.6);
  list-style: none;
}
.hero__results[hidden] {
  display: none;
}
.hero__result {
  display: block;
  width: 100%;
  padding-block: 1rem;
  padding-inline: 1rem;
  border: 0;
  background: transparent;
  color: #FFF;
  text-align: left;
  cursor: pointer;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 1.5;
  font-size: 1rem;
}
@media screen and (min-width: 36rem) {
  .hero__result {
    font-size: 1.125rem;
  }
}
@media screen and (min-width: 48rem) {
  .hero__result {
    font-size: 1.125rem;
  }
}
@media screen and (min-width: 48rem) {
  .hero__result {
    padding-inline: 1.5rem;
  }
}
.hero__result:hover, .hero__result:focus-visible {
  color: #D6D6D6;
  outline: none;
}

/* Hero (video)
--------------------------------------------- */
.hero-video {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 480px;
  margin-inline: calc(-1 * clamp(1rem, 2vw, 2.5rem));
  padding-inline: clamp(1rem, 2vw, 2.5rem);
}
@media screen and (min-width: 48rem) {
  .hero-video {
    min-height: 640px;
  }
}
.hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(25, 25, 25, 0) 0%, rgba(25, 25, 25, 0.5) 40%, #191919 94%);
  pointer-events: none;
}
.hero-video__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.hero-video__content {
  position: relative;
  z-index: 1;
  width: 100%;
  color: #FFF;
}
.hero-video__title {
  margin: 0;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  line-height: 1.25;
  font-size: 1.5rem;
}
@media screen and (min-width: 36rem) {
  .hero-video__title {
    font-size: 2rem;
  }
}
@media screen and (min-width: 48rem) {
  .hero-video__title {
    font-size: 3.4rem;
    line-height: 0.95;
  }
}
@media screen and (min-width: 96rem) {
  .hero-video__title {
    font-size: 4rem;
  }
}
.hero-video__subtitle {
  margin: 0;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  line-height: 1.25;
  font-size: 1.25rem;
}
@media screen and (min-width: 36rem) {
  .hero-video__subtitle {
    font-size: 1.625rem;
  }
}
@media screen and (min-width: 48rem) {
  .hero-video__subtitle {
    font-size: 1.75rem;
  }
}

/* Footer
--------------------------------------------- */
.site-footer {
  background-color: #191919;
  color: #A3A3A3;
  padding-block: 4rem;
  padding-inline: clamp(1rem, 2vw, 2.5rem);
}
.site-footer__brand {
  margin-bottom: 3rem;
}
.site-footer__brand img {
  height: 1.75rem;
  width: auto;
}
.site-footer__columns {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  padding-bottom: 3rem;
}
.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  padding-top: 2rem;
}

.footer-nav,
.footer-social {
  flex: 1 1 9rem;
}
.footer-nav__title,
.footer-social__title {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 1rem;
}
@media screen and (min-width: 36rem) {
  .footer-nav__title,
  .footer-social__title {
    font-size: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .footer-nav__title,
  .footer-social__title {
    font-size: 1rem;
  }
}
.footer-nav__title,
.footer-social__title {
  color: #A3A3A3;
  margin: 0 0 2rem;
}
.footer-nav__list,
.footer-social__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav a {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 1.5;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .footer-nav a {
    font-size: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .footer-nav a {
    font-size: 1rem;
  }
}
.footer-nav a {
  color: #FFF;
  text-decoration: none;
}
.footer-nav a:hover {
  color: #D6D6D6;
}

.footer-social__list {
  flex-direction: row;
  align-items: center;
  margin-bottom: 2rem;
}
.footer-social a {
  display: inline-flex;
  color: #FFF;
}
.footer-social a svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
}
.footer-social a:hover {
  color: #D6D6D6;
}
.footer-social__newsletter {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 1.5;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .footer-social__newsletter {
    font-size: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .footer-social__newsletter {
    font-size: 1rem;
  }
}
.footer-social__newsletter {
  border: 1px solid #A3A3A3;
  border-radius: 0.5rem;
  background: transparent;
  color: #FFF;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.footer-social__newsletter:hover {
  border-color: #FFF;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-legal a {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 1.5;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .footer-legal a {
    font-size: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .footer-legal a {
    font-size: 1rem;
  }
}
.footer-legal a {
  color: #A3A3A3;
  text-decoration: none;
}
.footer-legal a:hover {
  color: #FFF;
}

/* Button
--------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  min-height: 2.75rem;
  padding-inline: 2rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 1rem;
}
@media screen and (min-width: 36rem) {
  .btn {
    font-size: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .btn {
    font-size: 1rem;
  }
}
.btn {
  font-weight: 600;
}
@media screen and (min-width: 36rem) {
  .btn {
    width: auto;
  }
}
.btn__icon {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}
.btn__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.btn:disabled, .btn[disabled], .btn.btn--disabled {
  cursor: not-allowed;
}
.btn--primary {
  justify-content: flex-start;
  padding-left: 0;
  color: #191919;
}
.btn--primary:hover, .btn--primary:active {
  color: #191919;
}
.btn--primary:hover .btn__icon, .btn--primary:active .btn__icon {
  transform: translateX(calc(1.125rem - 1rem));
}
.btn--primary:disabled, .btn--primary[disabled], .btn--primary.btn--disabled {
  color: #D6D6D6;
}
.btn--primary.btn--inverse {
  color: #FFF;
}
.btn--primary.btn--inverse:hover, .btn--primary.btn--inverse:active {
  color: #FFF;
}
.btn--primary.btn--inverse:disabled, .btn--primary.btn--inverse[disabled], .btn--primary.btn--inverse.btn--disabled {
  color: #D6D6D6;
}
.btn--primary.btn--align-center {
  justify-content: center;
  padding-inline: 2rem;
}
.btn--primary.btn--align-center:disabled, .btn--primary.btn--align-center[disabled], .btn--primary.btn--align-center.btn--disabled {
  color: #D6D6D6;
}
.btn--secondary {
  background: transparent;
  border-color: #AC1C3C;
  color: #AC1C3C;
}
.btn--secondary:hover {
  background: #AC1C3C;
  border-color: #AC1C3C;
  color: #FFF;
  box-shadow: 0 0 4px 1px rgba(25, 25, 25, 0.6);
}
.btn--secondary:active {
  background: #AC1C3C;
  border-color: #AC1C3C;
  color: #FFF;
}
.btn--secondary:disabled, .btn--secondary[disabled], .btn--secondary.btn--disabled {
  background: #D6D6D6;
  border-color: #D6D6D6;
  color: #FFF;
}
.btn--secondary.btn--inverse {
  background: transparent;
  border-color: #FFF;
  color: #FFF;
}
.btn--secondary.btn--inverse:hover {
  background: #FFF;
  border-color: #FFF;
  color: #191919;
  box-shadow: 0 0 4px 1px rgba(25, 25, 25, 0.6);
}
.btn--secondary.btn--inverse:active {
  background: #FFF;
  border-color: #FFF;
  color: #191919;
}
.btn--secondary.btn--inverse:disabled, .btn--secondary.btn--inverse[disabled], .btn--secondary.btn--inverse.btn--disabled {
  background: #D6D6D6;
  border-color: #D6D6D6;
  color: #FFF;
}
.btn--secondary.btn--accent {
  background: #AC1C3C;
  border-color: #AC1C3C;
  color: #FFF;
}
.btn--secondary.btn--accent:hover {
  background: #FFF;
  border-color: #AC1C3C;
  color: #AC1C3C;
  box-shadow: 0 0 4px 1px rgba(25, 25, 25, 0.6);
}
.btn--secondary.btn--accent:active {
  background: #FFF;
  border-color: #AC1C3C;
  color: #AC1C3C;
}
.btn--secondary.btn--accent:disabled, .btn--secondary.btn--accent[disabled], .btn--secondary.btn--accent.btn--disabled {
  background: #D6D6D6;
  border-color: #D6D6D6;
  color: #FFF;
}
.btn--small {
  min-height: 2.25rem;
  padding-inline: 2rem;
}
.btn--small.btn--icon-only {
  min-width: 2.25rem;
}
.btn--icon-only {
  width: auto;
  min-width: 2.75rem;
  padding-inline: 0;
  justify-content: center;
}

/* Card
--------------------------------------------- */
.card {
  position: relative;
}
.card .composition-txt {
  align-items: center;
  text-align: center;
}
.card__link {
  color: inherit;
  text-decoration: none;
}
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card__link:focus-visible {
  outline: none;
}
.card__link:focus-visible::after {
  outline: 1px solid #D6D6D6;
  outline-offset: 2px;
}
.card__media {
  position: relative;
  overflow: hidden;
  border: 0.02rem solid #e5e5e5;
  border-radius: 0.25rem;
}
.card__media::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(180deg, rgba(25, 25, 25, 0) 0%, rgba(25, 25, 25, 0.5) 40%, #191919 94%);
  transform: scaleY(-1);
  opacity: 0.2;
  pointer-events: none;
}
.card__image {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4/5;
}
.card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.25rem;
}
.card__image .card__image-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__image-hover {
    opacity: 1;
    transform: scale(1.04);
    transition: transform 1.6s ease-out;
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .card:hover .card__image-hover {
    transform: none;
    transition: none;
  }
}
.card__title {
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  line-height: 1.25;
  font-size: 1rem;
}
@media screen and (min-width: 36rem) {
  .card__title {
    font-size: 1.125rem;
  }
}
@media screen and (min-width: 48rem) {
  .card__title {
    font-size: 1.125rem;
  }
}
.card__sku {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 1.5;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .card__sku {
    font-size: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .card__sku {
    font-size: 1rem;
  }
}
.card__sku {
  color: #A3A3A3;
  font-size: 1rem;
  font-weight: 500;
  display: inline-flex;
  align-items: flex-start;
  gap: 0.125rem;
}
.card__sku-copy {
  display: none;
  align-items: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  visibility: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .card__sku {
    position: relative;
    z-index: 1;
    cursor: pointer;
  }
  .card__sku:hover {
    color: #191919;
  }
  .card__sku-copy {
    display: inline-flex;
  }
  .card__sku:hover .card__sku-copy, .card__sku-copy:focus-visible, .card__sku-copy.is-copied {
    visibility: visible;
  }
}
.card__sku-icon {
  width: 0.75rem;
  height: 0.75rem;
}
.card__sku-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.card__sku-status:empty {
  display: none;
}
.card__sku-copy.is-copied .card__sku-icon {
  display: none;
}
.card__sku-status {
  color: #A3A3A3;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .card__sku-status {
    font-size: 0.875rem;
  }
}
@media screen and (min-width: 48rem) {
  .card__sku-status {
    font-size: 0.875rem;
  }
}
.card__sku-status {
  font-size: 0.75rem !important;
}
.card__meta {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .card__meta {
    font-size: 0.875rem;
  }
}
@media screen and (min-width: 48rem) {
  .card__meta {
    font-size: 0.875rem;
  }
}
.card__meta {
  color: #A3A3A3;
}
.card__top {
  position: absolute;
  top: 1rem;
  right: 0.75rem;
  left: 0.75rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
@media screen and (min-width: 75rem) {
  .card__top {
    top: 1.5rem;
    right: 1.5rem;
    left: 1.5rem;
  }
}
.card__data:only-child {
  margin-left: auto;
}
.card__badge {
  padding: 0.25rem;
  border-radius: 0.25rem;
  background: #191919;
  color: #FFF;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 1rem;
}
@media screen and (min-width: 36rem) {
  .card__badge {
    font-size: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .card__badge {
    font-size: 1rem;
  }
}
.card__badge {
  font-size: 1rem !important;
}
.card__data {
  padding: 0;
  border: none;
  background: none;
  color: #FFF;
  text-decoration: underline;
  cursor: pointer;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 1.5;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .card__data {
    font-size: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .card__data {
    font-size: 1rem;
  }
}
.card__data {
  font-size: 1rem !important;
}
.card__data:hover {
  color: #D6D6D6;
}

/* Card menu
--------------------------------------------- */
/**
 * Card de producto del megamenú (template-parts/components/card-menu.php).
 * Móvil: horizontal sobre $color-bg-subtle. Desde $bp-md: vertical, con
 * texto claro sobre el fondo oscuro del megamenú. .card-menu--vertical:
 * vertical en todos los tamaños (búsqueda por SKU en móvil).
 */
.card-menu {
  position: relative;
  display: grid;
  grid-template-columns: 22% 1fr;
  overflow: hidden;
  border-radius: 0.25rem;
  background: #F6F6F6;
}
.card-menu__image {
  display: block;
  overflow: hidden;
  border: 0.02rem solid #e5e5e5;
  border-radius: 0.25rem;
  background: #F6F6F6;
}
.card-menu__image img,
.card-menu__image video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-menu__image video {
  display: none;
}
@media screen and (min-width: 48rem) {
  .card-menu__image video {
    display: block;
  }
}
@media screen and (min-width: 48rem) {
  .card-menu__image .card-menu__video-fallback {
    display: none;
  }
}
.card-menu__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.125rem 1rem;
}
.card-menu__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  color: #191919;
  text-decoration: none;
  font-family: Montserrat, sans-serif;
  font-size: 1rem;
}
@media screen and (min-width: 48rem) {
  .card-menu__title {
    color: #FFF;
  }
}
.card-menu__title::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card-menu__sku {
  color: #D6D6D6;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .card-menu__sku {
    font-size: 0.875rem;
  }
}
@media screen and (min-width: 48rem) {
  .card-menu__sku {
    font-size: 0.875rem;
  }
}
.card-menu__sku {
  font-size: 0.875rem;
}
@media screen and (min-width: 48rem) {
  .card-menu {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: visible;
    border-radius: 0;
    background: none;
  }
  .card-menu .card-menu__image {
    aspect-ratio: 4/5;
    border-radius: 0.25rem;
  }
  .card-menu .card-menu__body {
    justify-content: flex-start;
    padding: 1.125rem 0 0;
  }
  .card-menu .card-menu__title {
    color: #FFF;
  }
}
.card-menu--vertical {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: visible;
  border-radius: 0;
  background: none;
}
.card-menu--vertical .card-menu__image {
  aspect-ratio: 4/5;
  border-radius: 0.25rem;
}
.card-menu--vertical .card-menu__body {
  justify-content: flex-start;
  padding: 1.125rem 0 0;
}
.card-menu--vertical .card-menu__title {
  color: #FFF;
}
@media screen and (min-width: 48rem) {
  .card-menu--vertical {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 0.75rem;
    font-size: 1rem;
  }
}

/* Card accesorio (producto)
--------------------------------------------- */
/**
 * Card de accesorio compatible (template-parts/components/card-accesorio.php).
 * Horizontal en todos los tamaños sobre $color-bg-subtle: imagen 22% y
 * título + SKU. Mismo diseño que .card-menu en móvil, pero independiente.
 */
.card-accesorio {
  position: relative;
  display: grid;
  grid-template-columns: 22% 1fr;
  max-width: 23.75rem;
  overflow: hidden;
  border-radius: 0.25rem;
  background: #F6F6F6;
}
.card-accesorio__image {
  display: block;
  aspect-ratio: 4/5;
  overflow: hidden;
  border: 0.02rem solid #e5e5e5;
  border-radius: 0.25rem;
}
.card-accesorio__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-accesorio__data {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: #191919;
  cursor: pointer;
}
.card-accesorio__data svg {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}
.card-accesorio:has(.card-accesorio__data) {
  grid-template-columns: 25.3% 1fr;
}
.card-accesorio:has(.card-accesorio__data) .card-accesorio__body {
  padding-right: 2.75rem;
}
.card-accesorio__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.125rem 1rem;
}
.card-accesorio__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  color: #191919;
  text-decoration: none;
  font-family: Montserrat, sans-serif;
  font-size: 1rem;
  line-height: 1.25;
  margin-block-end: 0.5rem;
}
.card-accesorio__sku {
  color: #A3A3A3;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .card-accesorio__sku {
    font-size: 0.875rem;
  }
}
@media screen and (min-width: 48rem) {
  .card-accesorio__sku {
    font-size: 0.875rem;
  }
}
.card-accesorio__sku {
  font-size: 1rem;
  font-weight: 500;
}
.card-accesorio--datos-tecnicos {
  grid-template-columns: 30% 1fr;
}
.card-accesorio--datos-tecnicos .card-accesorio__body {
  gap: 0.5rem;
}
.card-accesorio--datos-tecnicos .card-accesorio__title {
  line-height: 1.25;
}
.card-accesorio--datos-tecnicos .card-accesorio__sku {
  color: #A3A3A3;
}

/* Card project
--------------------------------------------- */
/**
 * Card de proyecto (template-parts/components/card-project-megamenu.php): siempre
 * rectangular (3:2), imagen a todo el card y el texto encima, abajo.
 */
.card-project-megamenu {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: 0.25rem;
  background: #F6F6F6;
  text-decoration: none;
}
.card-project-megamenu img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-project-megamenu::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(25, 25, 25, 0.6), transparent 60%);
}
.card-project-megamenu__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2rem 1rem;
  color: #FFF;
}
.card-project-megamenu__title {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 1.25;
  font-size: 1.125rem;
}
@media screen and (min-width: 36rem) {
  .card-project-megamenu__title {
    font-size: 1.25rem;
  }
}
@media screen and (min-width: 48rem) {
  .card-project-megamenu__title {
    font-size: 1.5rem;
  }
}
.card-project-megamenu__action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .card-project-megamenu__action {
    font-size: 0.875rem;
  }
}
@media screen and (min-width: 48rem) {
  .card-project-megamenu__action {
    font-size: 0.875rem;
  }
}
.card-project-megamenu__icon {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}
.card-project-megamenu__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Card proyecto
--------------------------------------------- */
.card-proyecto {
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 3/2;
  overflow: hidden;
  padding: 2.5rem;
  border-radius: 0.375rem;
  background: #191919;
  color: #FFF;
}
.card-proyecto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(25, 25, 25, 0) 0%, rgba(25, 25, 25, 0.5) 40%, #191919 94%);
  opacity: 0.6;
  pointer-events: none;
}
.card-proyecto__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-proyecto__content {
  padding-block: 0;
}
.card-proyecto__title {
  margin: 0;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  line-height: 1.25;
  font-size: 1rem;
}
@media screen and (min-width: 36rem) {
  .card-proyecto__title {
    font-size: 1.125rem;
  }
}
@media screen and (min-width: 48rem) {
  .card-proyecto__title {
    font-size: 1.125rem;
  }
}
.card-proyecto__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Chip
--------------------------------------------- */
/**
 * Chip: texto + icono de cerrar (ej. filtros elegidos,
 * template-parts/shop/filter-chips.php). Click = quitar.
 */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  height: 2.333333rem;
  padding-inline: 1rem;
  border: 0.5px solid #D6D6D6;
  border-radius: 5rem;
  background: #F6F6F6;
  color: #191919;
  white-space: nowrap;
  cursor: pointer;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .chip {
    font-size: 0.875rem;
  }
}
@media screen and (min-width: 48rem) {
  .chip {
    font-size: 0.875rem;
  }
}
@media screen and (min-width: 36rem) {
  .chip {
    height: 2rem;
  }
}
.chip:hover, .chip:active {
  background: #D6D6D6;
}
.chip__icon {
  flex-shrink: 0;
  width: 0.8rem;
  height: 0.8rem;
}
.chip__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.chip__spinner {
  display: none;
  flex-shrink: 0;
  width: 0.8rem;
  height: 0.8rem;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: chip-spin 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .chip__spinner {
    animation-duration: 1.5s;
  }
}
.chip[aria-busy=true] {
  cursor: progress;
}
.chip[aria-busy=true] .chip__icon {
  display: none;
}
.chip[aria-busy=true] .chip__spinner {
  display: block;
}

@keyframes chip-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Carousel
--------------------------------------------- */
.carousel {
  position: relative;
}
.carousel__nav {
  position: absolute;
  right: 0;
  bottom: calc(100% + 2rem);
  display: flex;
  gap: 0.5rem;
}
.carousel .swiper-button-prev,
.carousel .swiper-button-next {
  position: static;
  margin: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0.5rem;
  background: #191919;
  color: #FFF;
  cursor: pointer;
}
.carousel .swiper-button-prev .swiper-navigation-icon,
.carousel .swiper-button-next .swiper-navigation-icon {
  display: none;
}
.carousel .swiper-button-prev::after,
.carousel .swiper-button-next::after {
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
}
.carousel .swiper-button-prev:hover,
.carousel .swiper-button-next:hover {
  background: #D6D6D6;
}
.carousel .swiper-button-prev.swiper-button-disabled,
.carousel .swiper-button-next.swiper-button-disabled {
  background: transparent;
  color: #D6D6D6;
  opacity: 1;
  cursor: default;
  pointer-events: none;
}
.carousel .swiper-button-prev::after {
  transform: rotate(135deg);
  margin-left: 0.1875rem;
}
.carousel .swiper-button-next::after {
  transform: rotate(-45deg);
  margin-right: 0.1875rem;
}
.carousel__counter {
  margin: 0 0 0.75rem;
  color: inherit;
  font-variant-numeric: tabular-nums;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 500;
  line-height: 0.95;
  font-size: 0.75rem;
}
@media screen and (min-width: 36rem) {
  .carousel__counter {
    font-size: 0.75rem;
  }
}
@media screen and (min-width: 48rem) {
  .carousel__counter {
    font-size: 0.75rem;
  }
}
@media screen and (min-width: 75rem) {
  .carousel__counter {
    display: none;
  }
}

/* Navigation
--------------------------------------------- */
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.5rem;
}
.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
  display: flex;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  flex: 1 0 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  text-align: end;
  flex: 1 0 50%;
}

/* Breadcrumbs
--------------------------------------------- */
.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumbs__item {
  display: flex;
  align-items: center;
}
.breadcrumbs__item:not(:first-child)::before {
  content: "/";
  margin-inline: 0.5rem;
  color: #191919;
}
.breadcrumbs__link, .breadcrumbs__active {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .breadcrumbs__link, .breadcrumbs__active {
    font-size: 0.875rem;
  }
}
@media screen and (min-width: 48rem) {
  .breadcrumbs__link, .breadcrumbs__active {
    font-size: 0.875rem;
  }
}
.breadcrumbs__link {
  color: #191919;
  text-decoration: underline;
}
.breadcrumbs__link:hover {
  color: #D6D6D6;
}
.breadcrumbs__active {
  color: #A3A3A3;
  text-decoration: none;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
  display: block;
}

.post,
.page {
  margin: 0 0 1.5rem;
}

.updated:not(.published) {
  display: none;
}

.page-content,
.entry-content,
.entry-summary {
  margin: 1.5rem 0 0;
}

.page-links {
  clear: both;
  margin: 0 0 1.5rem;
}

/* Comments
--------------------------------------------- */
.comment-content a {
  word-wrap: break-word;
}

.bypostauthor {
  display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
  margin: 0 0 1.5rem;
}
.widget select {
  max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
  display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
  margin-bottom: 1.5rem;
  max-width: 100%;
}
.wp-caption img[class*=wp-image-] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wp-caption .wp-caption-text {
  margin: 1rem 0;
}

.wp-caption-text {
  text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
  margin-bottom: 1.5rem;
  display: grid;
  grid-gap: 1.5rem;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.gallery-columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
  grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
  grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
  grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
  grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
  display: block;
}

/* Skeleton
--------------------------------------------- */
/**
 * Skeleton de texto (template-parts/components/skeleton.php): líneas grises
 * con brillo que ocupan el lugar de un contenido mientras carga. Cada línea
 * puede llevar un cuadro delante (ej. imitar checkboxes).
 *
 * Toma el tamaño del texto del contenedor: la línea mide lo mismo que una
 * línea de texto (1lh) y la barra lo que la letra (1em).
 */
.skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.skeleton__line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 1lh;
}
.skeleton__line[hidden] {
  display: none;
}
.skeleton__box, .skeleton__text {
  background: linear-gradient(90deg, #D6D6D6 25%, #A3A3A3 50%, #D6D6D6 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton__box, .skeleton__text {
    animation: none;
  }
}
.skeleton__box {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}
.skeleton__text {
  width: 60%;
  height: 1em;
  border-radius: 0.25rem;
}
.skeleton__line:nth-child(3n+2) .skeleton__text {
  width: 45%;
}
.skeleton__line:nth-child(3n+3) .skeleton__text {
  width: 70%;
}

@keyframes skeleton-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}
/**
 * Skeleton de imagen: poner la clase en cualquier <img>. Muestra el brillo
 * como fondo mientras carga; js/skeleton-image.js le pone .is-loaded al
 * terminar (o fallar) y el fondo se quita.
 *
 * La imagen necesita ocupar su espacio antes de cargar (width/height en la
 * <img> o un aspect-ratio), si no mide 0 y el skeleton no se ve.
 */
.skeleton-image {
  background: linear-gradient(90deg, #D6D6D6 25%, #A3A3A3 50%, #D6D6D6 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-image {
    animation: none;
  }
}
.skeleton-image.is-loaded {
  background: none;
  animation: none;
}

/* Tabs
--------------------------------------------- */
/**
 * Tabs: alternan entre vistas relacionadas dentro de un mismo contexto
 * (template-parts/components/tabs.php + js/tabs.js).
 * El tab seleccionado lleva aria-selected="true".
 */
.tabs__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tabs__tab {
  padding: 1rem 2rem;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: #A3A3A3;
  white-space: nowrap;
  cursor: pointer;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 1rem;
}
@media screen and (min-width: 36rem) {
  .tabs__tab {
    font-size: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .tabs__tab {
    font-size: 1rem;
  }
}
.tabs__tab:hover {
  color: #D6D6D6;
}
.tabs__tab[aria-selected=true] {
  border-bottom-color: #191919;
  color: #191919;
}
.tabs__panel[hidden] {
  display: none;
}

/* Megamenu
--------------------------------------------- */
/**
 * Megamenú de Productos (template-parts/components/megamenu.php).
 * Vive dentro del <li class="menu-item-megamenu"> del menú principal.
 * Desktop ($bp-lg): es uno de los paneles de la burbuja del menú
 * (.menu__panel, _menu.scss); se abre con hover o foco en Productos y sigue
 * así mientras el mouse esté dentro del menú (js/menu-bubble.js). El fondo
 * y el efecto burbuja son de .menu__bubble.
 *
 * Móvil y tablet (antes de $bp-lg): el megamenú va dentro de la lista
 * (.menu__list), que se abre con la hamburguesa (.menu__nav.toggled,
 * js/navigation.js). En móvil ocupa toda la pantalla con los links en
 * columna y el megamenú es un panel que abre el link de Productos; en
 * tablet van los links en fila arriba y debajo el megamenú completo (ver
 * más abajo).
 *
 * Efecto burbuja en móvil: .menu__list se coloca detrás de la barra
 * (z-index: -1) con el mismo fondo oscuro translúcido. Cerrado, su
 * clip-path recorta exactamente la forma de la barra; al abrirse se infla
 * hacia abajo y $bubble hacia arriba y a los lados. Mientras está abierto,
 * .menu deja su fondo transparente para que se vea como un solo contenedor.
 * En móvil el megamenú es un subpanel (.menu__subpanel, _subpanel.scss)
 * que abre el link de Productos.
 * En tablet la lista es un panel de la burbuja del menú (.menu__bubble),
 * igual que la búsqueda: js/menu-bubble.js la abre al abrirse la
 * hamburguesa y, al pasar de una a otra, la burbuja no se cierra.
 *
 * Ventana de tipo (.megamenu__detail, js/megamenu.js): al hacer click en un
 * tipo de Interior / Exterior se abre desde la mitad de Exterior, encima de
 * Nuestras líneas y Productos nuevos, deslizándose desde el borde derecho; su borde izquierdo lo pone
 * el JS en --megamenu-detail-left. Simula una ventana: es transparente (se
 * ve el fondo de la burbuja) y lo que tapa se desvanece mientras entra. El
 * catálogo de atrás queda inhabilitado (.megamenu--detail).
 *
 * Excepción al estilo editorial sin transiciones: las animaciones del
 * menú y del megamenú se conservan a propósito.
 */
@media screen and (min-width: 75rem) {
  .menu-item-megamenu {
    display: flex;
    align-items: center;
    align-self: stretch;
  }
}

@media screen and (min-width: 75rem) {
  .menu:has(.megamenu.menu__panel--active) .menu__list > li > a {
    color: #D6D6D6;
  }
  .menu:has(.megamenu.menu__panel--active) .menu__list > .menu-item-megamenu > a {
    color: #FFF;
  }
  .menu .menu__list > li > a {
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
  }
  .menu:has(.megamenu--detail) .menu__list > li > a {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.4s;
  }
  .menu:has(.megamenu--detail) .menu__nav {
    pointer-events: none;
  }
  .menu:has(.megamenu--detail) .megamenu {
    pointer-events: auto;
  }
}
@media screen and (min-width: 48rem) {
  .menu .menu__actions {
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
  }
  .menu:has(.megamenu--detail) .menu__actions {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.4s;
  }
}
.megamenu {
  display: none;
}
@media screen and (min-width: 75rem) {
  .megamenu {
    position: absolute;
    top: -1rem;
    left: -1rem;
    right: -1rem;
    z-index: -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    padding: calc(1rem + 3.75rem + 2.5rem + 2rem) calc(4rem + 1rem) calc(2rem + 4rem);
  }
}
.megamenu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.megamenu__catalog {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  border-right: 0.2px solid rgba(255, 255, 255, 0.08);
  clip-path: inset(-1rem);
  transition: border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1), clip-path 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.megamenu__title-link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  align-self: flex-start;
  min-height: 2.75rem;
  color: #FFF;
  text-decoration: none;
  cursor: pointer;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  font-size: 1rem;
}
@media screen and (min-width: 36rem) {
  .megamenu__title-link {
    font-size: 1.125rem;
  }
}
@media screen and (min-width: 48rem) {
  .megamenu__title-link {
    font-size: 1.125rem;
  }
}
.megamenu__title-link:hover {
  color: #FFF;
}
.megamenu__title-link:hover .megamenu__title-icon {
  transform: translateX(calc(1.125rem - 1rem));
}
.megamenu__title-icon {
  flex-shrink: 0;
  width: 0.75em;
  height: 0.75em;
  transition: transform 0.2s ease;
}
.megamenu__title-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.megamenu__columns {
  display: flex;
  gap: 3.5rem;
}
.megamenu__column {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}
.megamenu__heading {
  color: #FFF;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 1rem;
}
@media screen and (min-width: 36rem) {
  .megamenu__heading {
    font-size: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .megamenu__heading {
    font-size: 1rem;
  }
}
.megamenu__heading {
  font-weight: 600;
}
.megamenu__list {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}
.megamenu__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: #FFF;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .megamenu__link {
    font-size: 0.875rem;
  }
}
@media screen and (min-width: 48rem) {
  .megamenu__link {
    font-size: 0.875rem;
  }
}
.megamenu__link {
  font-weight: 300;
}
.megamenu__link:hover {
  color: #D6D6D6;
}
.megamenu__link:hover .megamenu__icon {
  color: #D6D6D6;
}
@media screen and (min-width: 75rem) {
  .megamenu__link {
    font-size: 1rem;
  }
}
.megamenu__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: #A3A3A3;
}
.megamenu__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.megamenu__all {
  color: #FFF;
  text-decoration: underline;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .megamenu__all {
    font-size: 0.875rem;
  }
}
@media screen and (min-width: 48rem) {
  .megamenu__all {
    font-size: 0.875rem;
  }
}
.megamenu__all:hover {
  color: #D6D6D6;
}
.megamenu__news {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}
.megamenu__news-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.megamenu__news-title {
  color: #FFF;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  font-size: 1rem;
}
@media screen and (min-width: 36rem) {
  .megamenu__news-title {
    font-size: 1.125rem;
  }
}
@media screen and (min-width: 48rem) {
  .megamenu__news-title {
    font-size: 1.125rem;
  }
}
.megamenu__products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.megamenu--detail .megamenu__catalog {
  border-right-color: transparent;
  clip-path: inset(-1rem var(--megamenu-detail-clip, 0px) -1rem -1rem);
  opacity: 0.4;
  pointer-events: none;
}
.megamenu__news, .megamenu__column:last-child {
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
.megamenu--detail .megamenu__news {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.4s;
}
@media screen and (min-width: 75rem) {
  .megamenu--detail .megamenu__column:last-child {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.4s;
  }
}
.megamenu__detail {
  position: absolute;
  right: 0;
  left: var(--megamenu-detail-left, 50%);
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 3.5rem;
  overflow: hidden;
  padding: 2rem;
  border-radius: 0.375rem;
  box-shadow: 0 0 7px 1px rgba(25, 25, 25, 0.6);
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.4s, opacity 0.15s ease;
}
@media screen and (min-width: 75rem) {
  .megamenu__detail {
    top: 0;
    bottom: 0;
  }
}
.megamenu__detail--open {
  visibility: visible;
  transform: none;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s, opacity 0.15s ease;
}
@media screen and (min-width: 48rem) and (max-width: calc(75rem - 0.02rem)) {
  .menu__nav:not(.toggled) .megamenu__detail {
    opacity: 0;
  }
}
.megamenu__detail-main, .megamenu__project {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  min-width: 0;
}
.megamenu__detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.megamenu__detail-top {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.megamenu__empty {
  margin: 0;
  color: #D6D6D6;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 1.5;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .megamenu__empty {
    font-size: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .megamenu__empty {
    font-size: 1rem;
  }
}
.megamenu__detail-title {
  color: #FFF;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  line-height: 1.25;
  font-size: 1rem;
}
@media screen and (min-width: 36rem) {
  .megamenu__detail-title {
    font-size: 1.125rem;
  }
}
@media screen and (min-width: 48rem) {
  .megamenu__detail-title {
    font-size: 1.125rem;
  }
}
.megamenu__project {
  padding-left: 3.5rem;
  border-left: 0.2px solid rgba(255, 255, 255, 0.08);
}
.megamenu__project-heading {
  color: #FFF;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  font-size: 1rem;
}
@media screen and (min-width: 36rem) {
  .megamenu__project-heading {
    font-size: 1.125rem;
  }
}
@media screen and (min-width: 48rem) {
  .megamenu__project-heading {
    font-size: 1.125rem;
  }
}

@media screen and (max-width: calc(75rem - 0.02rem)) {
  .menu::before {
    transition: opacity 0s linear 0.3s;
  }
  .menu:has(.menu__nav.toggled)::before {
    opacity: 0;
    transition: none;
  }
  .menu__list {
    position: absolute;
    top: -1rem;
    left: -1rem;
    right: -1rem;
    z-index: -1;
    display: flex;
    overflow-y: auto;
    padding: calc(1rem + 2.75rem + 2rem) calc(clamp(1rem, 2vw, 2.5rem) + 1rem) 2rem;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  .menu__list.is-scrolling {
    scrollbar-color: #A3A3A3 transparent;
  }
  @supports not (scrollbar-width: thin) {
    .menu__list::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
    .menu__list::-webkit-scrollbar-track, .menu__list::-webkit-scrollbar-thumb {
      background: transparent;
    }
    .menu__list::-webkit-scrollbar-thumb {
      border-radius: 5rem;
    }
    .menu__list.is-scrolling::-webkit-scrollbar-thumb {
      background: #A3A3A3;
    }
  }
}
@media screen and (max-width: calc(48rem - 0.02rem)) {
  .menu__list {
    border-radius: 0.375rem;
    background-color: rgba(75, 75, 75, 0.6);
    backdrop-filter: blur(1.2rem);
    visibility: hidden;
    clip-path: inset(1rem 1rem calc(100% - 1rem - 2.75rem) 1rem round 0.375rem);
    transition: clip-path 0.3s ease, visibility 0s linear 0.3s;
  }
  .menu__nav.toggled .menu__list {
    visibility: visible;
    clip-path: inset(0 round 0.375rem);
    transition: clip-path 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
  }
  .menu__list {
    flex-direction: column;
    gap: 1.5rem;
    height: calc(100dvh - 2 * (1.125rem - 1rem));
  }
  .menu__list::before {
    content: "";
    position: absolute;
    top: calc(1rem + 2.75rem + 1rem);
    left: 0;
    right: 0;
    height: 0.5px;
    background: rgba(163, 163, 163, 0.4);
    pointer-events: none;
  }
  .menu__list:has(.menu__subpanel--open)::before {
    display: none;
  }
  body:has(.menu__nav.toggled) {
    overflow: hidden;
  }
  .megamenu__catalog {
    padding-top: 0;
    border-right: 0;
  }
  .megamenu__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .megamenu__column:last-child {
    grid-column: 1/-1;
    padding-top: 2rem;
  }
  .megamenu__title-link, .megamenu__heading {
    font-family: "Hanken Grotesk", sans-serif;
    font-weight: 400;
    line-height: 1.5;
    font-size: 1rem;
  }
}
@media screen and (max-width: calc(48rem - 0.02rem)) and (min-width: 36rem) {
  .megamenu__title-link, .megamenu__heading {
    font-size: 1.125rem;
  }
}
@media screen and (max-width: calc(48rem - 0.02rem)) and (min-width: 48rem) {
  .megamenu__title-link, .megamenu__heading {
    font-size: 1.125rem;
  }
}
@media screen and (max-width: calc(48rem - 0.02rem)) {
  .megamenu__link, .megamenu__all {
    font-family: "Hanken Grotesk", sans-serif;
    font-weight: 300;
    line-height: 1.5;
    font-size: 0.875rem;
  }
}
@media screen and (max-width: calc(48rem - 0.02rem)) and (min-width: 36rem) {
  .megamenu__link, .megamenu__all {
    font-size: 1rem;
  }
}
@media screen and (max-width: calc(48rem - 0.02rem)) and (min-width: 48rem) {
  .megamenu__link, .megamenu__all {
    font-size: 1rem;
  }
}
@media screen and (max-width: calc(48rem - 0.02rem)) {
  .megamenu__list {
    gap: 0.75rem;
  }
  .megamenu__column:last-child .megamenu__link {
    text-decoration: underline;
  }
  .megamenu__title-link, .megamenu__heading, .megamenu__link, .megamenu__all {
    font-size: 1rem !important;
  }
  .megamenu__title-icon {
    width: 1em;
    height: 1em;
  }
  .megamenu__news, .megamenu__detail {
    display: none;
  }
}
@media screen and (min-width: 48rem) and (max-width: calc(75rem - 0.02rem)) {
  .megamenu {
    transition: opacity 0.2s ease, visibility 0s;
  }
  .menu__list:not(.menu__panel--active) .megamenu {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }
  .menu:has(.menu__nav.toggled) .menu__list > li > a {
    color: #D6D6D6;
  }
  .menu:has(.menu__nav.toggled) .menu__list > .menu-item-megamenu > a {
    color: #FFF;
  }
  .menu__list > li > a {
    clip-path: inset(-1rem);
    transition: clip-path 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .menu:has(.megamenu--detail) .menu__list > li > a {
    clip-path: inset(-1rem var(--megamenu-detail-clip, 0px) -1rem -1rem);
    opacity: 0.4;
    pointer-events: none;
  }
  .menu__list {
    z-index: -2;
    overflow-x: hidden;
  }
  .menu__list:has(.megamenu--detail) {
    overflow-y: hidden;
  }
  .menu__list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem 1.5rem;
    max-height: calc(100dvh - 2 * 1.125rem);
  }
  .menu-item-megamenu {
    display: contents;
  }
  .menu:has(.menu__nav.toggled):has(.megamenu--detail) .menu__toggle {
    visibility: hidden;
  }
  .menu:has(.menu__nav.toggled):has(.megamenu--detail) .menu__nav {
    pointer-events: none;
  }
  .menu:has(.menu__nav.toggled):has(.megamenu--detail) .menu__list {
    pointer-events: auto;
  }
  .megamenu {
    order: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    flex-basis: 100%;
    gap: 2rem;
  }
  .megamenu__catalog {
    padding-right: 2rem;
  }
  .megamenu__detail {
    top: 0;
    height: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    align-content: start;
  }
  .megamenu__detail--open {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  .megamenu__detail--open.is-scrolling {
    scrollbar-color: #A3A3A3 transparent;
  }
  @supports not (scrollbar-width: thin) {
    .megamenu__detail--open::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
    .megamenu__detail--open::-webkit-scrollbar-track, .megamenu__detail--open::-webkit-scrollbar-thumb {
      background: transparent;
    }
    .megamenu__detail--open::-webkit-scrollbar-thumb {
      border-radius: 5rem;
    }
    .megamenu__detail--open.is-scrolling::-webkit-scrollbar-thumb {
      background: #A3A3A3;
    }
  }
  .menu__nav:not(.toggled) .megamenu__close {
    visibility: hidden;
  }
  .megamenu__project {
    padding-top: 2rem;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 0;
  }
  .megamenu__columns {
    display: grid;
    grid-template-columns: auto auto;
  }
}
@media screen and (min-width: 48rem) and (max-width: calc(75rem - 0.02rem)) and (max-width: calc(56.25rem - 0.02rem)) {
  .megamenu__products {
    grid-template-columns: repeat(2, 1fr);
  }
  .megamenu__products > :nth-child(n+3) {
    display: none;
  }
}
/* Section inspiración (home)
--------------------------------------------- */
.section-inspiracion {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 16.6667vw - 6rem, 9rem);
  --inspiracion-padding-inline: clamp(1rem, 2vw, 2.5rem);
  padding-inline: var(--inspiracion-padding-inline);
  padding-block: 8rem;
  color: #FFF;
}
@media screen and (max-width: calc(36rem - 0.02rem)) {
  .section-inspiracion {
    --inspiracion-padding-inline: 2rem;
    gap: 6rem;
    padding-block: 0;
  }
}
@media screen and (min-width: 75rem) {
  .section-inspiracion {
    grid-template-columns: 22.5rem minmax(0, 1fr);
    align-items: end;
    padding-inline: 5rem 0;
    margin-top: -5rem;
  }
}
@media screen and (min-width: 96rem) {
  .section-inspiracion {
    grid-template-columns: 28.0625rem minmax(0, 1fr);
  }
}
.section-inspiracion__explora {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 26.875rem;
  overflow: hidden;
  padding: 2.5rem;
  border-radius: 0.375rem;
  background: linear-gradient(180deg, rgb(23.3333333333%, 23.3333333333%, 23.3333333333%) 0%, rgb(14.3137254902%, 14.3137254902%, 14.3137254902%) 100%);
  box-shadow: 0 0 7px 1px rgba(25, 25, 25, 0.6);
}
@media screen and (min-width: 75rem) {
  .section-inspiracion__explora {
    height: auto;
    aspect-ratio: 3/4;
  }
}
@media screen and (max-width: calc(75rem - 0.02rem)) {
  .section-inspiracion__explora {
    width: 100%;
    max-width: 20rem;
    justify-self: center;
  }
}
@media screen and (min-width: 36rem) and (max-width: calc(75rem - 0.02rem)) {
  .section-inspiracion__explora {
    max-width: 23.75rem;
    height: 31.25rem;
  }
}
.section-inspiracion__explora::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(25, 25, 25, 0) 0%, rgba(25, 25, 25, 0.5) 40%, #191919 94%);
  opacity: 0.4;
  pointer-events: none;
}
.section-inspiracion__explora-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.section-inspiracion__explora-content {
  position: relative;
  z-index: 1;
}
.section-inspiracion__explora-title {
  margin: 0;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  line-height: 1.25;
  font-size: 1.25rem;
}
@media screen and (min-width: 36rem) {
  .section-inspiracion__explora-title {
    font-size: 1.625rem;
  }
}
@media screen and (min-width: 48rem) {
  .section-inspiracion__explora-title {
    font-size: 1.75rem;
  }
}
.section-inspiracion__explora-text {
  margin: 0;
  color: #A3A3A3;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 1.25;
  font-size: 1.125rem;
}
@media screen and (min-width: 36rem) {
  .section-inspiracion__explora-text {
    font-size: 1.25rem;
  }
}
@media screen and (min-width: 48rem) {
  .section-inspiracion__explora-text {
    font-size: 1.5rem;
  }
}
.section-inspiracion__proyectos {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 0;
}
.section-inspiracion__proyectos .carousel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 25%;
  background: linear-gradient(90deg, rgba(25, 25, 25, 0) 0%, rgba(25, 25, 25, 0.5) 40%, #191919 94%);
  opacity: 0.8;
  pointer-events: none;
}
@media screen and (max-width: calc(75rem - 0.02rem)) {
  .section-inspiracion__proyectos {
    gap: 0;
  }
  .section-inspiracion__proyectos .section-inspiracion__proyectos-header {
    display: contents;
  }
  .section-inspiracion__proyectos .section-inspiracion__proyectos-title {
    order: 1;
    margin-bottom: 1.5rem;
  }
  .section-inspiracion__proyectos .carousel {
    order: 2;
    margin-right: calc(-1 * var(--inspiracion-padding-inline));
  }
  .section-inspiracion__proyectos .section-inspiracion__proyectos-mas {
    order: 3;
    align-self: flex-start;
    margin-top: 1.125rem;
  }
  .section-inspiracion__proyectos .card-proyecto {
    aspect-ratio: 3/2.8;
    padding: 2rem 1rem;
  }
  .section-inspiracion__proyectos .card-proyecto__content {
    gap: 0;
  }
  .section-inspiracion__proyectos .card-proyecto__link {
    height: 0;
    min-height: 0;
    padding: 0;
    overflow: visible;
  }
  .section-inspiracion__proyectos .card-proyecto__link .btn__icon {
    display: none;
  }
  .section-inspiracion__proyectos .card-proyecto__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
.section-inspiracion__proyectos .swiper-wrapper {
  --swiper-wrapper-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}
@media screen and (max-width: calc(75rem - 0.02rem)) {
  .section-inspiracion__proyectos .swiper-wrapper {
    --swiper-wrapper-transition-timing-function: linear;
  }
}
@media screen and (min-width: 75rem) {
  .section-inspiracion__proyectos .swiper-slide {
    width: auto !important;
  }
  .section-inspiracion__proyectos .card-proyecto {
    width: 39.25rem;
    aspect-ratio: 3.1/2;
  }
}
@media screen and (min-width: 96rem) {
  .section-inspiracion__proyectos .card-proyecto {
    width: 49rem;
  }
}
.section-inspiracion__proyectos-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2.5rem;
}
.section-inspiracion__proyectos-header .btn {
  width: auto;
}
.section-inspiracion__proyectos-title {
  margin: 0;
  padding-top: 1rem;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  line-height: 1.25;
  font-size: 1.25rem;
}
@media screen and (min-width: 36rem) {
  .section-inspiracion__proyectos-title {
    font-size: 1.625rem;
  }
}
@media screen and (min-width: 48rem) {
  .section-inspiracion__proyectos-title {
    font-size: 1.75rem;
  }
}
.section-inspiracion__proyectos .carousel__nav {
  right: 2.5rem;
  bottom: calc(100% + 2rem);
}
@media screen and (max-width: calc(75rem - 0.02rem)) {
  .section-inspiracion__proyectos .carousel__nav {
    display: none;
  }
}
.section-inspiracion__proyectos .swiper-button-prev, .section-inspiracion__proyectos .swiper-button-next {
  width: 3rem;
  height: 3rem;
  background: transparent;
  color: #FFF;
}
.section-inspiracion__proyectos .swiper-button-prev::after, .section-inspiracion__proyectos .swiper-button-next::after {
  width: calc(3rem * 0.3);
  height: calc(3rem * 0.3);
}
.section-inspiracion__proyectos .swiper-button-prev:hover, .section-inspiracion__proyectos .swiper-button-next:hover {
  background: transparent;
  color: #D6D6D6;
}
.section-inspiracion__proyectos .swiper-button-prev.swiper-button-disabled, .section-inspiracion__proyectos .swiper-button-next.swiper-button-disabled {
  color: #A3A3A3;
}
@media screen and (max-width: calc(75rem - 0.02rem)) {
  .section-inspiracion__explora-content {
    position: static;
  }
  .section-inspiracion__explora-content > .head,
  .section-inspiracion__explora-content > .text {
    position: relative;
    z-index: 1;
  }
  .section-inspiracion__explora-action {
    position: absolute;
    inset: 0;
    z-index: 2;
  }
  .section-inspiracion__explora-link {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    border-radius: 0.375rem;
  }
  .section-inspiracion__explora-link .btn__icon {
    display: none;
  }
  .section-inspiracion__explora-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/**
 * "Recursos y soporte para tu proyecto" (template-parts/home/section-recursos.php).
 * Fondo gris de orilla a orilla; contenido al 93% centrado, igual que
 * "Productos destacados" (sass/front-page/_front-page.scss).
 *
 * Móvil: todo en una columna. Tablet ($bp-sm): Documentación arriba y las dos
 * cards lado a lado. Desktop ($bp-laptop): Documentación a la izquierda y las
 * cards apiladas a la derecha, con su contenido en fila.
 */
.section-recursos {
  margin-inline: calc(-1 * clamp(1rem, 2vw, 2.5rem));
  padding: 4rem clamp(1rem, 2vw, 2.5rem);
  background-color: #F6F6F6;
}
@media screen and (min-width: 75rem) {
  .section-recursos {
    padding-block: 5rem;
  }
}
.section-recursos__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 93%;
  margin-inline: auto;
}
@media screen and (min-width: 75rem) {
  .section-recursos__inner {
    gap: 2rem;
  }
}
.section-recursos__title {
  margin: 0;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  line-height: 1.25;
  font-size: 1.25rem;
}
@media screen and (min-width: 36rem) {
  .section-recursos__title {
    font-size: 1.625rem;
  }
}
@media screen and (min-width: 48rem) {
  .section-recursos__title {
    font-size: 1.75rem;
  }
}
.section-recursos__grid {
  display: grid;
  gap: 3rem;
}
@media screen and (min-width: 75rem) {
  .section-recursos__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.section-recursos__docs-media {
  aspect-ratio: 7/3;
  overflow: hidden;
  border-radius: 0.25rem;
  background-color: #D6D6D6;
}
.section-recursos__docs-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section-recursos__docs-txt {
  padding-block: 1rem 0;
}
.section-recursos__docs-title, .section-recursos__docs-text {
  margin: 0;
}
.section-recursos__docs-title {
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  line-height: 1.25;
  font-size: 1rem;
}
@media screen and (min-width: 36rem) {
  .section-recursos__docs-title {
    font-size: 1.125rem;
  }
}
@media screen and (min-width: 48rem) {
  .section-recursos__docs-title {
    font-size: 1.125rem;
  }
}
.section-recursos__docs-text {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 1.5;
  font-size: 1rem;
}
@media screen and (min-width: 36rem) {
  .section-recursos__docs-text {
    font-size: 1.125rem;
  }
}
@media screen and (min-width: 48rem) {
  .section-recursos__docs-text {
    font-size: 1.125rem;
  }
}
@media screen and (min-width: 75rem) {
  .section-recursos__docs-text {
    max-width: 75%;
  }
}
.section-recursos__cards {
  display: grid;
  gap: 1rem;
}
@media screen and (min-width: 36rem) and (max-width: calc(75rem - 0.02rem)) {
  .section-recursos__cards {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
@media screen and (min-width: 75rem) {
  .section-recursos__cards {
    grid-template-rows: 1fr 1fr;
    gap: 1.125rem;
  }
}
.section-recursos__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem 1.5rem;
  border-radius: 0.25rem;
  background-color: #191919;
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 2px 8px 0 rgba(25, 25, 25, 0.12);
  color: #FFF;
}
@media screen and (min-width: 75rem) {
  .section-recursos__card {
    padding: 3rem 2.5rem;
  }
}
.section-recursos__card-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.section-recursos__card-title, .section-recursos__card-text {
  margin: 0;
}
.section-recursos__card-title {
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  line-height: 1.25;
  font-size: 1rem;
}
@media screen and (min-width: 36rem) {
  .section-recursos__card-title {
    font-size: 1.125rem;
  }
}
@media screen and (min-width: 48rem) {
  .section-recursos__card-title {
    font-size: 1.125rem;
  }
}
.section-recursos__card-text {
  display: none;
  max-width: 26rem;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 1.5;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .section-recursos__card-text {
    font-size: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .section-recursos__card-text {
    font-size: 1rem;
  }
}
@media screen and (min-width: 75rem) {
  .section-recursos__card-text {
    display: block;
  }
}
.section-recursos__card-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
@media screen and (min-width: 75rem) {
  .section-recursos__card-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
  }
}
.section-recursos__card-actions .btn {
  width: auto;
}
.section-recursos__card-btn {
  min-width: 10rem;
}
@media screen and (min-width: 75rem) {
  .section-recursos__card-btn {
    min-width: 0;
  }
}

/* Search
--------------------------------------------- */
/**
 * Búsqueda del header (template-parts/components/search.php).
 * Tablet y desktop ($bp-md). Es uno de los paneles de la burbuja del menú
 * (.menu__panel, _menu.scss): se abre con click en la lupa y sigue
 * abierta mientras el input tenga el foco (js/menu-bubble.js). El fondo y
 * el efecto burbuja son de .menu__bubble.
 *
 * .search no está posicionado, así que el panel se coloca respecto a .menu,
 * igual que la burbuja.
 */
.search {
  display: flex;
}
.search__panel {
  display: none;
}
@media screen and (min-width: 48rem) {
  .search__panel {
    position: absolute;
    top: -1rem;
    left: -1rem;
    right: -1rem;
    z-index: -1;
    display: block;
    padding: calc(1rem + 2.75rem + 2rem) 1rem 2rem;
  }
}
@media screen and (min-width: 48rem) and (max-width: calc(75rem - 0.02rem)) {
  .search__panel {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 2 * 1.125rem);
    padding-top: calc(var(--menu-links-height, 3.75rem) + 2rem);
    pointer-events: none;
  }
  .search__panel .search__form,
  .search__panel .search__results {
    pointer-events: auto;
  }
}
@media screen and (min-width: 75rem) {
  .search__panel {
    padding: calc(1rem + 3.75rem + 2rem) calc(4rem + 1rem) 2rem;
  }
}
.search__form {
  position: relative;
}
@media screen and (min-width: 75rem) {
  .search__form {
    width: 80%;
    margin-inline: auto;
  }
}
.search__input {
  width: 100%;
  min-height: 2.75rem;
  padding-block: 1rem;
  padding-inline: 2rem calc(2rem * 2 + 1.25rem);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 0.5rem;
  background: none;
  color: #FFF;
  outline: none;
  appearance: none;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 1.5;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .search__input {
    font-size: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .search__input {
    font-size: 1rem;
  }
}
.search__input::placeholder {
  color: #A3A3A3;
}
.search__input::-webkit-search-cancel-button {
  appearance: none;
}
.search__input:focus {
  border-color: #FFF;
}
.search__ghost {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-block: 1rem;
  padding-inline: 2rem calc(2rem * 2 + 1.25rem);
  border: 1px solid transparent;
  overflow: hidden;
  white-space: pre;
  pointer-events: none;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 1.5;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .search__ghost {
    font-size: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .search__ghost {
    font-size: 1rem;
  }
}
.search__ghost[hidden] {
  display: none;
}
.search__ghost-typed {
  color: transparent;
}
.search__ghost-rest {
  color: #A3A3A3;
  cursor: pointer;
  pointer-events: auto;
}
.search__submit {
  position: absolute;
  top: 50%;
  right: 2rem;
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: #FFF;
  cursor: pointer;
  transform: translateY(-50%);
}
.search__submit svg {
  display: block;
  width: 100%;
  height: 100%;
}
.search__submit:hover {
  color: #D6D6D6;
}
.search__results {
  container-type: inline-size;
}
@media screen and (min-width: 48rem) {
  .search__results:not(:empty) {
    margin-top: 2rem;
  }
}
@media screen and (max-width: calc(75rem - 0.02rem)) {
  .search__results {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  .search__results.is-scrolling {
    scrollbar-color: #A3A3A3 transparent;
  }
  @supports not (scrollbar-width: thin) {
    .search__results::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
    .search__results::-webkit-scrollbar-track, .search__results::-webkit-scrollbar-thumb {
      background: transparent;
    }
    .search__results::-webkit-scrollbar-thumb {
      border-radius: 5rem;
    }
    .search__results.is-scrolling::-webkit-scrollbar-thumb {
      background: #A3A3A3;
    }
  }
}
.search__result {
  display: grid;
  gap: calc(2rem + 2rem);
}
@media screen and (min-width: 48rem) {
  .search__result {
    gap: 2rem;
  }
}
@media screen and (min-width: 75rem) {
  .search__result {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}
@media screen and (min-width: 75rem) {
  .search__result--models {
    grid-template-columns: auto minmax(0, 1fr);
  }
}
@media screen and (min-width: 75rem) {
  .search__result--docs {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}
.search__documents {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  min-width: 0;
}
.search__documents-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.search__documents-header .btn {
  width: auto;
}
.search__document-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.search__document-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-block: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.search__document-row:first-child {
  padding-top: 0;
}
.search__document-product {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}
.search__document-name {
  color: #FFF;
  text-decoration: none;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 1rem;
}
@media screen and (min-width: 36rem) {
  .search__document-name {
    font-size: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .search__document-name {
    font-size: 1rem;
  }
}
.search__document-name:hover {
  color: #D6D6D6;
}
.search__document-sku {
  color: rgba(255, 255, 255, 0.6);
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 500;
  line-height: 0.95;
  font-size: 0.75rem;
}
@media screen and (min-width: 36rem) {
  .search__document-sku {
    font-size: 0.75rem;
  }
}
@media screen and (min-width: 48rem) {
  .search__document-sku {
    font-size: 0.75rem;
  }
}
.search__document-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.search__document-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .search__document-link {
    font-size: 0.875rem;
  }
}
@media screen and (min-width: 48rem) {
  .search__document-link {
    font-size: 0.875rem;
  }
}
.search__document-link:hover, .search__document-link.is-active {
  color: #FFF;
}
.search__document-link.is-active {
  font-weight: 600;
}
.search__document-icon, .search__document-download {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}
.search__document-icon svg, .search__document-download svg {
  display: block;
  width: 100%;
  height: 100%;
}
.search__document-icon {
  width: 1rem;
  height: 1rem;
}
.search__product, .search__projects {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  min-width: 0;
}
@media screen and (min-width: 48rem) and (max-width: calc(75rem - 0.02rem)) {
  .search__projects .card-project-megamenu {
    width: 50%;
  }
}
@media screen and (min-width: 75rem) {
  .search__projects {
    padding-left: 2rem;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
  }
}
.search__heading {
  color: #FFF;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  font-size: 1rem;
}
@media screen and (min-width: 36rem) {
  .search__heading {
    font-size: 1.125rem;
  }
}
@media screen and (min-width: 48rem) {
  .search__heading {
    font-size: 1.125rem;
  }
}
.search__product-main {
  display: grid;
  grid-template-columns: 70%;
  justify-content: start;
  align-items: start;
  gap: calc(2rem + 2rem);
}
@media screen and (min-width: 48rem) {
  .search__product-main {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 2rem;
  }
}
@media screen and (min-width: 56.25rem) {
  .search__product-main {
    grid-template-columns: 25cqi auto auto;
  }
}
@media screen and (min-width: 75rem) {
  .search__product-main {
    grid-template-columns: calc(((100cqi - 2rem) / 2 - 2 * 0.75rem) / 3) auto auto;
  }
}
.search__models-main {
  display: grid;
  align-items: start;
  gap: calc(2rem + 2rem);
}
@media screen and (min-width: 48rem) {
  .search__models-main {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
  }
}
@media screen and (min-width: 75rem) {
  .search__models-main {
    grid-template-columns: calc(3 * calc(((100cqi - 2rem) / 2 - 2 * 0.75rem) / 3) + 2 * 0.75rem) auto;
    justify-content: start;
  }
}
@media screen and (min-width: 56.25rem) {
  .search__models-main:has(.search__models-grid > :nth-child(2):last-child) {
    grid-template-columns: minmax(0, 2fr) auto minmax(0, 1fr);
  }
}
@media screen and (min-width: 75rem) {
  .search__models-main:has(.search__models-grid > :nth-child(2):last-child) {
    grid-template-columns: calc(2 * calc(((100cqi - 2rem) / 2 - 2 * 0.75rem) / 3) + 0.75rem) auto;
    padding-right: calc(calc(((100cqi - 2rem) / 2 - 2 * 0.75rem) / 3) + 0.75rem);
  }
}
@media screen and (min-width: 48rem) {
  .search__models-main:has(.search__models-grid > :nth-child(2):last-child) .search__models-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (min-width: 75rem) {
  .search__models-main:has(.search__models-grid > :nth-child(2):last-child) .search__models-grid {
    grid-template-columns: repeat(2, calc(((100cqi - 2rem) / 2 - 2 * 0.75rem) / 3));
  }
}
.search__models {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  min-width: 0;
}
.search__models-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
@media screen and (max-width: calc(48rem - 0.02rem)) {
  .search__models-header {
    display: contents;
  }
  .search__models-header .btn {
    order: 1;
    align-self: flex-start;
  }
}
.search__models-header .btn {
  width: auto;
}
.search__models-grid {
  display: grid;
  gap: 0.75rem;
}
@media screen and (min-width: 48rem) {
  .search__models-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media screen and (min-width: 75rem) {
  .search__models-grid {
    grid-template-columns: repeat(3, calc(((100cqi - 2rem) / 2 - 2 * 0.75rem) / 3));
  }
}
.search__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.search__group-title {
  color: #FFF;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 1rem;
}
@media screen and (min-width: 36rem) {
  .search__group-title {
    font-size: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .search__group-title {
    font-size: 1rem;
  }
}
.search__family {
  color: #FFF;
  text-decoration: none;
  white-space: nowrap;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .search__family {
    font-size: 0.875rem;
  }
}
@media screen and (min-width: 48rem) {
  .search__family {
    font-size: 0.875rem;
  }
}
.search__family:hover {
  color: #D6D6D6;
}
.search__count {
  color: #D6D6D6;
}
.search__docs {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.search__doc {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  color: #FFF;
  text-decoration: none;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .search__doc {
    font-size: 0.875rem;
  }
}
@media screen and (min-width: 48rem) {
  .search__doc {
    font-size: 0.875rem;
  }
}
.search__doc:hover {
  color: #D6D6D6;
}
.search__doc-icon, .search__doc-download {
  width: 1em;
  height: 1em;
}
.search__doc-icon svg, .search__doc-download svg {
  display: block;
  width: 100%;
  height: 100%;
}
.search__doc-icon {
  width: 1.5rem;
  height: 1.5rem;
}
.search__doc-download {
  margin-left: 1.5rem;
}
.search__more {
  color: #FFF;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .search__more {
    font-size: 0.875rem;
  }
}
@media screen and (min-width: 48rem) {
  .search__more {
    font-size: 0.875rem;
  }
}
.search__more:hover {
  color: #D6D6D6;
}
.search__related {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  margin-bottom: calc(2rem + 2rem);
}
@media screen and (min-width: 48rem) {
  .search__related {
    margin-bottom: 2rem;
  }
}
.search__understood {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.125rem;
}
.search__understood-title {
  color: #FFF;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 1rem;
}
@media screen and (min-width: 36rem) {
  .search__understood-title {
    font-size: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .search__understood-title {
    font-size: 1rem;
  }
}
.search__notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.125rem;
  color: #FFF;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 1.5;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .search__notice {
    font-size: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .search__notice {
    font-size: 1rem;
  }
}
.search__notice-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}
.search__notice-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.search__chip--missing {
  border-color: #AC1C3C;
  background: #AC1C3C;
  color: #FFF;
}
.search__chip--missing:hover, .search__chip--missing:active {
  background: #AC1C3C;
}
.search__chip--missing .chip__label {
  text-decoration: line-through;
}
.search__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.search__skus {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  max-height: calc(2.75rem + 2 * 0.5rem);
  margin: calc(-1 * 0.5rem) calc(-1 * 0.5rem) 0;
  padding: 0.5rem;
  overflow: hidden;
  list-style: none;
}
@media screen and (max-width: calc(48rem - 0.02rem)) {
  .search__skus {
    max-height: calc(8.25rem + 2 * 1rem + 2 * 0.5rem);
  }
}
.search__sku {
  width: auto;
}
.search__empty {
  margin: 0;
  padding: 1rem 2rem;
  border: 1px solid #FF383C;
  border-radius: 0.5rem;
  color: #FFF;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 1.5;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .search__empty {
    font-size: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .search__empty {
    font-size: 1rem;
  }
}
.search__empty a {
  color: #FFF;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 1rem;
}
@media screen and (min-width: 36rem) {
  .search__empty a {
    font-size: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .search__empty a {
    font-size: 1rem;
  }
}
@media screen and (max-width: calc(48rem - 0.02rem)) {
  .search__subpanel.menu__subpanel {
    overflow: hidden;
  }
}

/* Subpanel de móvil (después de megamenu y search: ver el archivo)
--------------------------------------------- */
/**
 * Subpanel de móvil (.menu__subpanel, js/menu-subpanel.js): ventana dentro
 * de la burbuja de la hamburguesa (.menu__list) que entra desde la derecha
 * y tapa los links. La abre su opener ([data-menu-subpanel]): el link de
 * Productos (megamenú) o la lupa (búsqueda). Su fila de arriba
 * (.menu__subpanel-top, menu-subpanel-top.php) reemplaza al logo y la
 * hamburguesa: flecha de regreso a los links y X que cierra todo el menú.
 *
 * Va después de los componentes que lo usan (_components.scss): su display
 * le gana al de cada uno (.megamenu).
 */
.menu__subpanel-top {
  display: none;
}

@media screen and (max-width: calc(48rem - 0.02rem)) {
  .menu__list:has(.menu__subpanel--open) {
    overflow-y: hidden;
  }
  .menu__list > li > a,
  .menu__list .menu__mobile-actions > button,
  .menu__list .menu__mobile-actions > .menu__actions-divider {
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
  }
  .menu__list:has(.menu__subpanel--open) > li > a, .menu__list:has(.menu__subpanel--open) .menu__mobile-actions > button, .menu__list:has(.menu__subpanel--open) .menu__mobile-actions > .menu__actions-divider {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.4s;
  }
  .menu:has(.menu__nav.toggled):has(.menu__subpanel--open) .menu__branding,
  .menu:has(.menu__nav.toggled):has(.menu__subpanel--open) .menu__toggle {
    visibility: hidden;
  }
  .menu:has(.menu__nav.toggled):has(.menu__subpanel--open) .menu__nav {
    pointer-events: none;
  }
  .menu:has(.menu__nav.toggled):has(.menu__subpanel--open) .menu__list {
    pointer-events: auto;
  }
  .menu__subpanel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem calc(clamp(1rem, 2vw, 2.5rem) + 1rem) 2rem;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.4s, opacity 0.15s ease;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  .menu__subpanel.is-scrolling {
    scrollbar-color: #A3A3A3 transparent;
  }
  @supports not (scrollbar-width: thin) {
    .menu__subpanel::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
    .menu__subpanel::-webkit-scrollbar-track, .menu__subpanel::-webkit-scrollbar-thumb {
      background: transparent;
    }
    .menu__subpanel::-webkit-scrollbar-thumb {
      border-radius: 5rem;
    }
    .menu__subpanel.is-scrolling::-webkit-scrollbar-thumb {
      background: #A3A3A3;
    }
  }
  .menu__subpanel--open {
    visibility: visible;
    transform: none;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s, opacity 0.15s ease;
  }
  .menu__nav:not(.toggled) .menu__subpanel {
    opacity: 0;
  }
  .menu__subpanel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.75rem;
    margin-inline: calc(-1 * (clamp(1rem, 2vw, 2.5rem) + 1rem));
    padding-inline: calc(clamp(1rem, 2vw, 2.5rem) + 1rem);
    padding-bottom: 1rem;
    border-bottom: 0.5px solid rgba(163, 163, 163, 0.4);
  }
  .menu__subpanel-top .menu__back {
    justify-content: flex-start;
    width: 2.75rem;
    height: 2.75rem;
  }
  .menu__subpanel-top .menu__close {
    justify-content: flex-end;
  }
  .menu__subpanel-top .menu__back-icon, .menu__subpanel-top .menu__close svg {
    width: 1.5rem;
    height: 1.5rem;
  }
}
/* Accordion
--------------------------------------------- */
/**
 * Acordeón — <details> / <summary> nativos (abre y cierra sin JS).
 * Mismo diseño que los grupos de filtro de la tienda, pero independiente.
 *
 * Uso:
 *   <div class="accordion">
 *     <details class="accordion__item">
 *       <summary class="accordion__title">
 *         Título
 *         <span class="accordion__icon" aria-hidden="true"><?php illux_icon( 'chevron-up' ); ?></span>
 *       </summary>
 *       <div class="accordion__content">…</div>
 *     </details>
 *   </div>
 */
.accordion__item {
  border-bottom: 0.75px solid #D6D6D6;
  transition: height 0.3s cubic-bezier(0.77, 0, 0.175, 1);
}
.accordion__item.is-animating {
  overflow: hidden;
}
.accordion__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  color: #191919;
  list-style: none;
  cursor: pointer;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 1.5;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .accordion__title {
    font-size: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .accordion__title {
    font-size: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .accordion__title {
    min-height: 3.375rem;
  }
}
.accordion__title::-webkit-details-marker {
  display: none;
}
.accordion__title:hover {
  color: #D6D6D6;
}
.accordion__icon {
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  transform: rotate(180deg);
  transition: transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);
}
@media (prefers-reduced-motion: reduce) {
  .accordion__icon {
    transition: none;
  }
}
.accordion__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.accordion__title:hover > .accordion__icon, .accordion__item[open] > .accordion__title > .accordion__icon {
  transform: rotate(0deg);
}
.accordion__content {
  padding-inline: 1.5rem;
  padding-bottom: 1.5rem;
}

/* Recursos descargables (ficha de producto y Datos técnicos)
--------------------------------------------- */
.product-docs {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 1rem;
  list-style: none;
}
.product-docs__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  color: #191919;
  text-decoration: none;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .product-docs__item {
    font-size: 0.875rem;
  }
}
@media screen and (min-width: 48rem) {
  .product-docs__item {
    font-size: 0.875rem;
  }
}
.product-docs__item:hover {
  color: #D6D6D6;
}
.product-docs__icon svg, .product-docs__download svg {
  display: block;
  width: 100%;
  height: 100%;
}
.product-docs__icon {
  width: 1.5rem;
  height: 1.5rem;
}
.product-docs__download {
  width: 1rem;
  height: 1rem;
}
.product-docs__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.product-docs__row .product-docs__item {
  flex: 1;
  grid-template-columns: auto 1fr;
  min-width: 0;
}
.product-docs__action {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: #191919;
  cursor: pointer;
}
.product-docs__action svg {
  display: block;
  width: 1rem;
  height: 1rem;
}
.product-docs__action:hover {
  color: #A3A3A3;
}

/* Datos técnicos (ventanita del botón de la card)
--------------------------------------------- */
/**
 * Datos técnicos — ventanita del botón "Datos técnicos" de la card
 * (template-parts/components/datos-tecnicos.php). La posiciona
 * js/datos-tecnicos.js en coordenadas de la página (scrollea con el botón):
 * data-side="right" a la derecha del botón, "left" a la izquierda. La flecha
 * apunta al botón a la altura de --datos-tecnicos-arrow-y. Abierta:
 * .datos-tecnicos--open (no [hidden], para animar también el cierre).
 *
 * Móvil (< $bp-md): toda la pantalla, de orilla a orilla, sin flecha;
 * aparece desde abajo. El JS no la posiciona (ve
 * el position: fixed).
 */
.datos-tecnicos {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  width: min(24rem, 100vw - 2 * 1rem);
  border-radius: 0.375rem;
  background-color: #FFF;
  border: 1px solid #D6D6D6;
  box-shadow: 0 2px 8px 0 rgba(25, 25, 25, 0.12);
  color: #191919;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.77, 0, 0.175, 1), transform 0.2s cubic-bezier(0.77, 0, 0.175, 1), visibility 0s linear 0.2s;
}
.datos-tecnicos[data-side=right] {
  transform: translateX(-0.5rem);
}
.datos-tecnicos[data-side=left] {
  transform: translateX(0.5rem);
}
.datos-tecnicos--open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: opacity 0.2s cubic-bezier(0.77, 0, 0.175, 1), transform 0.2s cubic-bezier(0.77, 0, 0.175, 1), visibility 0s;
}
.datos-tecnicos--open[data-side] {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .datos-tecnicos {
    transition: none;
  }
  .datos-tecnicos--open {
    transition: none;
  }
}
.datos-tecnicos:focus {
  outline: none;
}
@media screen and (max-width: calc(48rem - 0.02rem)) {
  .datos-tecnicos {
    position: fixed;
    inset: 0;
    z-index: 500;
    width: auto;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
  }
  .datos-tecnicos, .datos-tecnicos[data-side] {
    transform: translateY(0.5rem);
  }
  .datos-tecnicos--open, .datos-tecnicos--open[data-side] {
    transform: none;
  }
  .datos-tecnicos::before {
    display: none;
  }
}
.datos-tecnicos::before {
  content: "";
  position: absolute;
  top: var(--datos-tecnicos-arrow-y, 2rem);
  width: 0.75rem;
  height: 0.75rem;
  background-color: inherit;
  transform: translate(-50%, -50%) rotate(45deg);
}
.datos-tecnicos[data-side=right]::before {
  left: 0;
}
.datos-tecnicos[data-side=left]::before {
  left: 100%;
}
.datos-tecnicos__header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  padding-inline: 1.5rem;
  border-bottom: 0.75px solid #D6D6D6;
  margin-top: 1rem;
}
@media screen and (max-width: calc(48rem - 0.02rem)) {
  .datos-tecnicos__header {
    position: relative;
    z-index: 1;
  }
  .datos-tecnicos--scrolled .datos-tecnicos__header {
    box-shadow: 0 2px 8px 0 rgba(25, 25, 25, 0.12);
  }
}
@media screen and (min-width: 48rem) {
  .datos-tecnicos__header {
    justify-content: flex-end;
    min-height: 2.625rem;
    margin-bottom: 0.5rem;
    border-bottom: 0;
  }
}
.datos-tecnicos__title {
  margin: 0;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 1.5;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .datos-tecnicos__title {
    font-size: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .datos-tecnicos__title {
    font-size: 1rem;
  }
}
.datos-tecnicos__title {
  font-weight: bold;
}
@media screen and (min-width: 48rem) {
  .datos-tecnicos__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
.datos-tecnicos__actions {
  display: flex;
  align-items: center;
  margin-inline-end: calc((1.5rem - 2.75rem) / 2);
}
@media screen and (min-width: 48rem) {
  .datos-tecnicos__actions {
    margin-inline-end: calc((1rem - 2.75rem) / 2);
  }
}
.datos-tecnicos__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: #191919;
  cursor: pointer;
}
.datos-tecnicos__icon-btn svg {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}
@media screen and (min-width: 48rem) {
  .datos-tecnicos__icon-btn svg {
    width: 1rem;
    height: 1rem;
  }
}
.datos-tecnicos__icon-btn:hover {
  color: #A3A3A3;
}
.datos-tecnicos__icon-btn:focus-visible {
  outline: 1px solid #D6D6D6;
  outline-offset: -0.25rem;
}
.datos-tecnicos__body {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: calc(48rem - 0.02rem)) {
  .datos-tecnicos__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}
.datos-tecnicos__skeleton {
  padding: 1rem 1.5rem;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 1rem;
}
@media screen and (min-width: 36rem) {
  .datos-tecnicos__skeleton {
    font-size: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .datos-tecnicos__skeleton {
    font-size: 1rem;
  }
}
.datos-tecnicos__body[hidden], .datos-tecnicos__skeleton[hidden] {
  display: none;
}
.datos-tecnicos__product {
  padding: 1.5rem 1.5rem 0.5rem;
}
@media screen and (min-width: 48rem) {
  .datos-tecnicos__product {
    display: none;
  }
}
.datos-tecnicos__specs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1.5rem 2.25rem;
}
.datos-tecnicos__list {
  margin: 0;
}
.datos-tecnicos__row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  align-items: center;
  gap: 1.5rem;
  min-height: 2.25rem;
  border-bottom: 0.75px solid #D6D6D6;
  color: #191919;
  font-size: 1rem;
}
.datos-tecnicos__label, .datos-tecnicos__value {
  margin: 0;
}
.datos-tecnicos__value {
  font-size: 0.875rem;
  text-align: end;
  color: #A3A3A3;
}
.datos-tecnicos__more {
  align-self: flex-start;
  color: #191919;
  text-decoration: underline;
  font-size: 1rem;
  font-weight: 500;
}
.datos-tecnicos__more:hover {
  color: #A3A3A3;
}
.datos-tecnicos__docs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-inline: 1.5rem;
  padding-bottom: 1rem;
}
.datos-tecnicos__subtitle {
  margin: 0;
  font-size: 1rem;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 600;
}
.datos-tecnicos .product-docs {
  gap: 0;
  padding: 0;
}
.datos-tecnicos .product-docs li + li {
  border-top: 0.75px solid #D6D6D6;
}
.datos-tecnicos .product-docs__item {
  min-height: 2.25rem;
  color: #191919;
  font-size: 1rem;
}
.datos-tecnicos .product-docs__item:hover {
  color: #A3A3A3;
}
.datos-tecnicos .product-docs__download,
.datos-tecnicos .product-docs__action {
  color: #191919;
}
.datos-tecnicos .product-docs__row {
  min-height: 2.25rem;
}
.datos-tecnicos__share-menu {
  position: absolute;
  top: 100%;
  right: 2.25rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-width: 10rem;
  padding-block: 0.5rem;
  border: 1px solid #D6D6D6;
  border-radius: 0.375rem;
  background-color: #FFF;
  box-shadow: 0 2px 8px 0 rgba(25, 25, 25, 0.12);
}
.datos-tecnicos__share-menu[hidden] {
  display: none;
}
.datos-tecnicos__share-item {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 0;
  background: none;
  color: #191919;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 1rem;
}
@media screen and (min-width: 36rem) {
  .datos-tecnicos__share-item {
    font-size: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .datos-tecnicos__share-item {
    font-size: 1rem;
  }
}
.datos-tecnicos__share-item:hover {
  background-color: #F6F6F6;
}
.datos-tecnicos__share-status {
  padding: 0 1rem;
  color: #A3A3A3;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .datos-tecnicos__share-status {
    font-size: 0.875rem;
  }
}
@media screen and (min-width: 48rem) {
  .datos-tecnicos__share-status {
    font-size: 0.875rem;
  }
}
.datos-tecnicos__share-status:empty {
  display: none;
}
.datos-tecnicos__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-block: 1rem;
  padding-inline: 1.5rem;
  border-top: 0.75px solid #D6D6D6;
  background-color: #FFF;
}
@media screen and (min-width: 48rem) {
  .datos-tecnicos__footer {
    justify-content: center;
  }
}
.datos-tecnicos__footer .btn {
  width: auto;
}
@media screen and (min-width: 36rem) {
  .datos-tecnicos__footer .btn {
    display: none;
  }
}
.datos-tecnicos__footer .btn--primary {
  white-space: nowrap;
  display: flex;
}
@media screen and (max-width: calc(48rem - 0.02rem)) {
  .datos-tecnicos__footer {
    position: sticky;
    bottom: 0;
    padding-block: 2rem;
  }
  .datos-tecnicos--more .datos-tecnicos__footer {
    box-shadow: 0 -2px 8px 0 rgba(25, 25, 25, 0.12);
  }
}

@media screen and (max-width: calc(48rem - 0.02rem)) {
  html:has(.datos-tecnicos--open),
  body:has(.datos-tecnicos--open) {
    overflow: hidden;
  }
}

.home .site-main {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
@media screen and (min-width: 36rem) {
  .home .site-main {
    gap: 6rem;
  }
}
@media screen and (min-width: 75rem) {
  .home .site-main {
    gap: 8rem;
  }
}

.featured-products {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 93%;
  margin-inline: auto;
  container-type: inline-size;
  --featured-bleed: calc(3.7634408602cqw + clamp(1rem, 2vw, 2.5rem));
}
@media screen and (min-width: 75rem) {
  .featured-products {
    gap: 2rem;
  }
}
.featured-products__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
}
.featured-products__header h1 {
  margin: 0;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  line-height: 1.25;
  font-size: 1.25rem;
}
@media screen and (min-width: 36rem) {
  .featured-products__header h1 {
    font-size: 1.625rem;
  }
}
@media screen and (min-width: 48rem) {
  .featured-products__header h1 {
    font-size: 1.75rem;
  }
}
.featured-products__chips {
  display: flex;
  flex-basis: 100%;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.featured-products__chips::-webkit-scrollbar {
  display: none;
}
.featured-products__chip {
  flex-shrink: 0;
  min-height: 2rem;
  padding-inline: 1rem;
  border: 0;
  border-radius: 5rem;
  background: #F6F6F6;
  color: #191919;
  white-space: nowrap;
  cursor: pointer;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  line-height: 0.95;
  font-size: 0.875rem;
}
@media screen and (min-width: 36rem) {
  .featured-products__chip {
    font-size: 0.875rem;
  }
}
@media screen and (min-width: 48rem) {
  .featured-products__chip {
    font-size: 0.875rem;
  }
}
.featured-products__chip:hover {
  background: #D6D6D6;
}
.featured-products__chip[aria-pressed=true] {
  background: #191919;
  color: #FFF;
  cursor: default;
}
.featured-products .card .composition-txt {
  padding-block: 1rem 1.5rem;
}
.featured-products:has(.card__data[aria-expanded=true]) .carousel {
  opacity: 0.4;
}
.featured-products .carousel {
  margin-right: calc(-1 * var(--featured-bleed));
}
.featured-products .carousel__nav {
  right: var(--featured-bleed);
}
.featured-products .swiper-button-prev,
.featured-products .swiper-button-next {
  width: 3rem;
  height: 3rem;
  background: transparent;
  color: #191919;
}
.featured-products .swiper-button-prev::after,
.featured-products .swiper-button-next::after {
  width: calc(3rem * 0.3);
  height: calc(3rem * 0.3);
}
.featured-products .swiper-button-prev:hover,
.featured-products .swiper-button-next:hover {
  background: transparent;
  color: #A3A3A3;
}
.featured-products .swiper-button-prev.swiper-button-disabled,
.featured-products .swiper-button-next.swiper-button-disabled {
  background: transparent;
  color: #D6D6D6;
}
@media screen and (max-width: calc(75rem - 0.02rem)) {
  .featured-products .carousel__nav {
    display: none;
  }
  .featured-products {
    gap: 0;
  }
  .featured-products .featured-products__header {
    display: contents;
  }
  .featured-products .featured-products__header h1 {
    order: 1;
    margin-bottom: 1rem;
  }
  .featured-products .featured-products__chips {
    order: 1;
    margin-right: calc(-1 * var(--featured-bleed));
    margin-bottom: 1.5rem;
  }
  .featured-products .carousel {
    order: 2;
  }
  .featured-products .featured-products__mas {
    order: 3;
    align-self: flex-start;
    width: auto;
    margin-top: calc(1.125rem - 1.5rem);
  }
  .featured-products .carousel::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 25%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #FFF);
    opacity: 0.8;
    pointer-events: none;
  }
}
@media screen and (max-width: calc(36rem - 0.02rem)) {
  .featured-products .card__image {
    aspect-ratio: 4.3/5;
  }
  .featured-products .card__meta {
    display: none;
  }
  .featured-products .card .head {
    gap: 0.5rem;
  }
  .featured-products .card__sku {
    color: inherit;
  }
}

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
  display: block;
}

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #D6D6D6;
  border-radius: 0.375rem;
  box-shadow: 0 0 4px 1px rgba(25, 25, 25, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #AC1C3C;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 1rem 1.5rem;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
  outline: 0;
}

.alignleft {
  /*rtl:ignore*/
  float: left;
  /*rtl:ignore*/
  margin-right: 1.5rem;
  margin-bottom: 1.5rem;
}

.alignright {
  /*rtl:ignore*/
  float: right;
  /*rtl:ignore*/
  margin-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem;
}

/**
 * Helpers: clases de una sola responsabilidad que se ponen en el HTML para
 * ajustar algo puntual sin crear un modificador nuevo.
 * Llevan !important porque woocommerce.css se carga después de style.css y
 * ganaría con la misma especificidad.
 */
.u-size-font-default {
  font-size: 1rem !important;
}

.u-color--primary {
  color: #AC1C3C !important;
}

.u-color--secondary {
  color: #CA475E !important;
}

.u-color--text {
  color: #191919 !important;
}

.u-font--title {
  font-family: Montserrat, sans-serif !important;
}

.u-font--body {
  font-family: "Hanken Grotesk", sans-serif !important;
}

.u-text--center {
  text-align: center !important;
}

.u-text--right {
  text-align: right !important;
}

.u-text--left {
  text-align: left !important;
}

.u-text--bold {
  font-weight: 700 !important;
}

.u-text--semibold {
  font-weight: 600 !important;
}

.u-text--regular {
  font-weight: 500 !important;
}

.u-text--light {
  font-weight: 300 !important;
}

.u-font-style--italic {
  font-style: italic !important;
}

.u-font-style--normal {
  font-style: normal !important;
}

.u-font--uppercase {
  text-transform: uppercase !important;
}

.u-font--lowercase {
  text-transform: lowercase !important;
}

.u-font--capitalize {
  text-transform: capitalize !important;
}

.u-padding-right-0 {
  padding-right: 0 !important;
}

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments
	- Helpers

--------------------------------------------------------------*/