@charset "UTF-8";
/* -----------------------------------------------------------

	Theme Name: ZANMA v2.1
	Theme URI: ----
	Author: RoyPhoenix
	Author URI: http://royphoenix.com
	Description: ----
	License: Private
	License URI: http://www.gnu.org/licenses/gpl-2.0.html

----------------------------------------------------------- */
/*----------------------------------------------------*\
    ANIMATION
    -
    Mixins que contienen el efecto de animación
    modo de uso simple
    .elemento {
      @include animation-(TIMEs);
    }
\*----------------------------------------------------*/
/*----------------------------------------------------*\
    SHADOW
    -
    Mixin to add boxshadow
\*----------------------------------------------------*/
/*----------------------------------------------------*\
    SHADOW
    -
    Mixin to add boxshadow
\*----------------------------------------------------*/
/*----------------------------------------------------*\
    VALUES
    -
    General values for the project
\*----------------------------------------------------*/
/*----------------------------------------------------*\
    RESET
    -
    Limpia los margenes en los elementos
\*----------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
body, h1, h2, h3, h4, h5, h6, blockquote, p, pre, dl, dd, ol, ul, figure, hr, fieldset, legend {
  margin: 0;
  padding: 0;
}

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

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*----------------------------------------------------*\
    NORMALIZE
    -
    Elimina y normaliza la visualización en los
    distintos navegadores
\*----------------------------------------------------*/
html {
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article, aside, footer, header, nav, section {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

figcaption, figure, main {
  display: block;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b, strong {
  font-weight: inherit;
}

b, strong {
  font-weight: bolder;
}

ode, kbd, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

dfn {
  font-style: italic;
}

mark {
  background-color: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

audio, video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

img {
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

button, input, optgroup, select, textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button, input {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, html [type=button], [type=reset], [type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  display: inline-block;
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox], [type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details, menu {
  display: block;
}

summary {
  display: list-item;
}

canvas {
  display: inline-block;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

/*----------------------------------------------------*\
    GLOBAL SPACING
    -
    Espaciado general epara el todo el sitio, se
    define una unidad base de la que parten todas
    las demas variables
\*----------------------------------------------------*/
/*----------------------------------------------------*\
    FONTS
    -
    Import fonts from Google Fonts and Icons
\*----------------------------------------------------*/
@font-face {
  font-family: "icons";
  src: url("../icons/icons.eot");
  src: url("../icons/icons.eot") format("embedded-opentype"), url("../icons/icons.woff2") format("woff2"), url("../icons/icons.woff") format("woff"), url("../icons/icons.ttf") format("truetype"), url("../icons/icons.svg") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
body {
  font-family: "DM Sans", sans-serif;
  font-weight: 200;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Bebas Neue", sans-serif;
}

h1 {
  font-size: 48pt;
}

h2, h3 {
  font-size: 34pt;
}

h4, h5, h6 {
  font-size: 24pt;
}

/*----------------------------------------------------*\
    BOX-SIZING
    -
    Le da la propiedad a los elementos de ocupar su
    espacio normal sin inportar el padding
\*----------------------------------------------------*/
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/*----------------------------------------------------*\
    PAGE
    -
    Reglas generales para el canvas
\*----------------------------------------------------*/
html {
  font-size: 18px;
  line-height: 1.3333333333;
  font-family: "DM Sans", sans-serif;
  min-height: 100%;
  background: #FFF;
  color: #131315;
}

/*----------------------------------------------------*\
    SHARE
    -
    Share rules for the site styles
\*----------------------------------------------------*/
address, blockquote, p, pre, dl, ol, ul, figure, hr, table, fieldset {
  margin-bottom: calc 1.6666666667rem;
}

p {
  margin-bottom: 30px;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: calc 1.6666666667rem;
  margin-top: 0;
}

dd, ol, ul {
  margin-left: calc 1.6666666667rem;
}

.wrapper {
  width: 1280px;
  margin: 0 auto;
}
@media screen and (max-width: 1280px) {
  .wrapper {
    width: 100%;
    padding: 0 15px;
  }
}

/*----------------------------------------------------*\
    BODY SHADOW
    -
    Body shadow for the blur body in panels shows
\*----------------------------------------------------*/
body:before {
  content: "";
  display: block;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -15;
  transition: all 0.5s ease;
}

body.active:before {
  opacity: 1;
  z-index: 10;
}

/*----------------------------------------------------*\
    BTN
    -
    Buttons for all site
\*----------------------------------------------------*/
.btn {
  display: block;
  cursor: pointer;
}
.btn a {
  display: block;
  cursor: pointer;
}

button.btn {
  border: 0;
}

/*----------------------------------------------------*\
    ICO
    -
    Icons set
\*----------------------------------------------------*/
.icon {
  font-family: "icons";
  font-style: normal;
  font-weight: 100;
}

.icon--twitter:before {
  content: "\e849";
}

.icon--facebook:before {
  content: "\f09a";
}

.icon--facebook-alt:before {
  content: "\f308";
}

.icon--instagram:before {
  content: "\f16d";
}

.icon--snapchat:before {
  content: "\f2ac";
}

.icon--linkedin:before {
  content: "\f0e1";
}

.icon--youtube:before {
  content: "\f16a";
}

.icon--twitch:before {
  content: "\f1e8";
}

.icon--search:before {
  content: "\e801";
}

.icon--angle-down:before {
  content: "\e800";
}

.icon--angle-left:before {
  content: "\e802";
}

.icon--angle-right:before {
  content: "\e803";
}

.icon--angle-up:before {
  content: "\e804";
}

.icon--arrow-down:before {
  content: "\f175";
}

.icon--arrow-left:before {
  content: "\f177";
}

.icon--arrow-right:before {
  content: "\f178";
}

.icon--arrow-up:before {
  content: "\f176";
}

.icon--whatsapp:before {
  content: "\f232";
}

.icon--quote-open:before {
  content: "\e805";
}

.icon--quote-close:before {
  content: "\e806";
}

.icon--heart:before {
  content: "\e807";
}

.icon--heart-alter:before {
  content: "\e807";
}

.icon--star:before {
  content: "\e809";
}

.icon--star-alter:before {
  content: "\e80a";
}

.icon--check:before {
  content: "\e80b";
}

.icon--multiply:before {
  content: "\e80c";
}

.icon--plus:before {
  content: "\e80d";
}

.icon--minus:before {
  content: "\e80e";
}

.icon--lock:before {
  content: "\e80f";
}

.icon--lock-alter:before {
  content: "\f13e";
}

.icon--bookmark:before {
  content: "\e810";
}

.icon--bookmark-alter:before {
  content: "\f097";
}

.icon--like:before {
  content: "\e811";
}

.icon--dislike:before {
  content: "\e812";
}

.icon--like-alter:before {
  content: "\f164";
}

.icon--dislike-alter:before {
  content: "\f165";
}

.icon--quote-open-alter:before {
  content: "\f10d";
}

.icon--quote-close-alter:before {
  content: "\f10e";
}

.icon--text-ballon:before {
  content: "\e813";
}

.icon--text-ballons:before {
  content: "\e814";
}

.icon--text-ballon-alter:before {
  content: "\f0e5";
}

.icon--text-ballons-alter:before {
  content: "\f0e6";
}

.icon--warning:before {
  content: "\e815";
}

.icon--warning-alter:before {
  content: "\e816";
}

.icon--folder:before {
  content: "\e817";
}

.icon--folder-open:before {
  content: "\e818";
}

.icon--folder-alter:before {
  content: "\f114";
}

.icon--folder-open-alter:before {
  content: "\f115";
}

.icon--phone:before {
  content: "\e819";
}

.icon--gear:before {
  content: "\e81a";
}

.icon--tools:before {
  content: "\e81b";
}

.icon--gears:before {
  content: "\e81c";
}

.icon--cart:before {
  content: "\e81d";
}

.icon--cart-plus:before {
  content: "\f217";
}

.icon--cart-down:before {
  content: "\f218";
}

.icon--calendar:before {
  content: "\e81e";
}

.icon--event:before {
  content: "\f133";
}

.icon--log-out:before {
  content: "\e81f";
}

.icon--log-out:before {
  content: "\e820";
}

.icon--mic:before {
  content: "\f130";
}

.icon--sound:before {
  content: "\e821";
}

.icon--zoom-in:before {
  content: "\e822";
}

.icon--zoom-out:before {
  content: "\e823";
}

.icon--circle-down:before {
  content: "\e824";
}

.icon--circle-up:before {
  content: "\e825";
}

.icon--circle-left:before {
  content: "\f190";
}

.icon--circle-right:before {
  content: "\f18e";
}

.icon--down:before {
  content: "\e826";
}

.icon--up:before {
  content: "\e827";
}

.icon--left:before {
  content: "\e828";
}

.icon--right:before {
  content: "\e829";
}

.icon--angle-huge-down:before {
  content: "\e82a";
}

.icon--angle-huge-left:before {
  content: "\e82b";
}

.icon--angle-huge-right:before {
  content: "\e82c";
}

.icon--angle-huge-up:before {
  content: "\e82d";
}

.icon--angle-mini-left:before {
  content: "\f104";
}

.icon--anlge-mini-right:before {
  content: "\f105";
}

.icon--angle-mini-up:before {
  content: "\f106";
}

.icon--angle-mini-down:before {
  content: "\f107";
}

.icon--doble-angle-left:before {
  content: "\f100";
}

.icon--doble-angle-right:before {
  content: "\f101";
}

.icon--doble-angle-up:before {
  content: "\f102";
}

.icon--doble-angle-down:before {
  content: "\f103";
}

.icon--arrow-huge-down:before {
  content: "\e82e";
}

.icon--arrow-huge-left:before {
  content: "\e82f";
}

.icon--arrow-huge-right:before {
  content: "\e830";
}

.icon--arrow-huge-up:before {
  content: "\e831";
}

.icon--hand-right:before {
  content: "\e832";
}

.icon--hand-left:before {
  content: "\e833";
}

.icon--hand-up:before {
  content: "\e834";
}

.icon--hand-down:before {
  content: "\e835";
}

.icon--square-down:before {
  content: "\f150";
}

.icon--square-up:before {
  content: "\f151";
}

.icon--square-right:before {
  content: "\f152";
}

.icon--square-left:before {
  content: "\f191";
}

.icon--desktop-device:before {
  content: "\f108";
}

.icon--laptop-device:before {
  content: "\f109";
}

.icon--tablet-device:before {
  content: "\f10a";
}

.icon--mobile-device:before {
  content: "\f10b";
}

.icon--paper-plane:before {
  content: "\f1d8";
}

.icon--paper-plane-alter:before {
  content: "\f1d9";
}

.icon--ellipsis-vertical:before {
  content: "\f141";
}

.icon--ellipsis-horizontal:before {
  content: "\f142";
}

.icon--powe:before {
  content: "\e836";
}

.icon--toggle-off:before {
  content: "\f204";
}

.icon--toggle-on:before {
  content: "\f205";
}

.icon--point:before {
  content: "\f111";
}

.icon--point-alter:before {
  content: "\f10c";
}

.icon--copyright:before {
  content: "\f1f9";
}

.icon--paypal:before {
  content: "\f1ed";
}

.icon--vimeo:before {
  content: "\f194";
}

.icon--youtube-alter:before {
  content: "\f167";
}

.icon--music:before {
  content: "\e837";
}

.icon--flash:before {
  content: "\e838";
}

.icon--quote-open2:before {
  content: "\e839";
}

.icon--quote-close2:before {
  content: "\e83a";
}

.icon--play:before {
  content: "\e83b";
}

.icon--stop:before {
  content: "\e83c";
}

.icon--pausa:before {
  content: "\e83d";
}

.icon--to-start:before {
  content: "\e83e";
}

.icon--to-end:before {
  content: "\e83f";
}

.icon--fire:before {
  content: "\e840";
}

.icon--heart:before {
  content: "\e841";
}

.icon--heart-alter:before {
  content: "\e842";
}

.icon--star:before {
  content: "\e843";
}

.icon--tiktok:before {
  content: "\e844";
}

.icon--user:before {
  content: "\e845";
}

.icon--clock:before {
  content: "\e846";
}

.icon--mail:before {
  content: "\f0e0";
}

.icon--mail-alter:before {
  content: "\e847";
}

.icon--telegram:before {
  content: "\e84b";
}

.icon--threads:before {
  content: "\e84a";
}

.icon--bluesky:before {
  content: "\e848";
}

.icon--pinterest:before {
  content: "\f231";
}

.icon--menu:before {
  content: "\f0c9";
}

.icon--close:before {
  content: "\e84c";
}

/*----------------------------------------------------*\
    NAV
    -
    Top bar for teh site, contains logo, nav and
    navigaton button
\*----------------------------------------------------*/
.nav ul, .nav ol {
  display: flex;
  padding: 0;
  list-style: none;
}
.nav a {
  display: block;
  text-decoration: none;
}

/*----------------------------------------------------*\
    TOP BAR
    -
    Top bar for teh site, contains logo, nav and
    navigaton button
\*----------------------------------------------------*/
.info-card {
  margin-bottom: 120px;
}
@media screen and (max-width: 768px) {
  .info-card {
    margin-bottom: 60px;
  }
}
.info-card .wrapper,
.info-card > div {
  display: flex;
}
@media screen and (max-width: 768px) {
  .info-card .wrapper,
  .info-card > div {
    flex-direction: column;
  }
}
.info-card > div > div {
  width: 50%;
  padding-right: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
@media screen and (max-width: 768px) {
  .info-card > div > div {
    width: 100%;
    text-align: center;
    align-items: center;
  }
}
.info-card > div > div span {
  background: #D9070D;
  color: #FFF;
  font-size: 16px;
  letter-spacing: 0.3em;
  display: inline-block;
  padding: 8px;
}
.info-card > div > div h3 {
  font-family: "DM Sans", sans-serif;
  font-size: 32px;
  letter-spacing: 0.3em;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .info-card > div > div h3 {
    font-size: 26px;
  }
}
.info-card > div > div p {
  line-height: 1.6em;
}
.info-card img {
  width: 50%;
  height: auto;
  display: block;
}
@media screen and (max-width: 768px) {
  .info-card img {
    width: 100%;
  }
}

/*----------------------------------------------------*\
    TOP BAR
    -
    Top bar for teh site, contains logo, nav and
    navigaton button
\*----------------------------------------------------*/
.post-header {
  position: relative;
  margin-bottom: 120px;
}
@media screen and (max-width: 768px) {
  .post-header {
    margin-bottom: 60px;
  }
}
.post-header h1 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 15px 30px 15px 120px;
  background: #FFF;
  font-family: "DM Sans", sans-serif;
  text-transform: uppercase;
}
@media screen and (max-width: 768px) {
  .post-header h1 {
    font-size: 24px;
    padding: 15px;
    max-width: 60%;
  }
}
.post-header img {
  width: 100%;
  height: 600px;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (max-width: 768px) {
  .post-header img {
    height: 400px;
  }
}

.post-content.products-cat {
  margin-bottom: 120px;
}
.post-content.products-cat ul, .post-content.products-cat ol {
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .post-content.products-cat ul, .post-content.products-cat ol {
    flex-direction: column;
    align-items: center;
  }
}
.post-content.products-cat ul li,
.post-content.products-cat ol li {
  width: 25%;
  min-width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .post-content.products-cat ul li,
  .post-content.products-cat ol li {
    width: 70%;
    min-width: 70%;
  }
}
.post-content.products-cat ul li a,
.post-content.products-cat ol li a {
  width: 70%;
}
.post-content.products-cat ul li img,
.post-content.products-cat ol li img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.5s ease;
}
.post-content.products-cat ul li img:hover,
.post-content.products-cat ol li img:hover {
  filter: grayscale(0);
  opacity: 1;
}

.post-content.brands > div,
.post-content.brands > .wrapper {
  display: flex;
}
@media screen and (max-width: 768px) {
  .post-content.brands > div,
  .post-content.brands > .wrapper {
    flex-direction: column;
  }
}
.post-content.brands .manuals-list {
  width: 300px;
  margin-right: 30px;
}
@media screen and (max-width: 768px) {
  .post-content.brands .manuals-list {
    width: 100%;
    text-align: center;
    margin-bottom: 60px;
  }
}
.post-content.brands .manuals-list p {
  background: #D9070D;
  color: #FFF;
  padding: 15px;
  text-transform: uppercase;
  letter-spacing: 0.8em;
}
.post-content.brands .manuals-list ul,
.post-content.brands .manuals-list ol {
  list-style: none;
  padding: 0;
}
.post-content.brands .manuals-list ul li,
.post-content.brands .manuals-list ol li {
  margin-bottom: 15px;
  font-weight: 700;
}
.post-content.brands .manuals-list ul li a,
.post-content.brands .manuals-list ol li a {
  color: #131315;
  text-decoration: none;
  position: relative;
  display: inline-block;
}
.post-content.brands .manuals-list ul li a:after,
.post-content.brands .manuals-list ol li a:after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: #D9070D;
  transition: all 0.5s ease;
}
.post-content.brands .manuals-list ul li a:hover:after, .post-content.brands .manuals-list ul li a.is-hover::after,
.post-content.brands .manuals-list ol li a:hover:after,
.post-content.brands .manuals-list ol li a.is-hover::after {
  width: 100%;
}
.post-content.brands .manuals-grid {
  flex-grow: 1;
}
.post-content.brands .manuals-grid ul,
.post-content.brands .manuals-grid ol {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
}
.post-content.brands .manuals-grid ul li,
.post-content.brands .manuals-grid ol li {
  position: relative;
  margin: 0 15px 15px 15px;
  width: 30%;
  min-width: 30%;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .post-content.brands .manuals-grid ul li,
  .post-content.brands .manuals-grid ol li {
    width: calc(100% - 30px);
    min-width: calc(100% - 30px);
  }
}
.post-content.brands .manuals-grid ul img,
.post-content.brands .manuals-grid ol img {
  display: block;
  width: 100%;
  height: auto;
}
.post-content.brands .manuals-grid ul li a,
.post-content.brands .manuals-grid ol li a {
  color: #131315;
}
.post-content.brands .manuals-grid ul li a:hover strong, .post-content.brands .manuals-grid ul li a.is-hover strong,
.post-content.brands .manuals-grid ol li a:hover strong,
.post-content.brands .manuals-grid ol li a.is-hover strong {
  bottom: -1px;
}
.post-content.brands .manuals-grid ul li strong,
.post-content.brands .manuals-grid ol li strong {
  position: absolute;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  background: #FFF;
  padding: 15px;
  text-align: center;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 0.2em;
  transition: all 0.5s ease;
}
.post-content.brands .manuals-grid ul li strong:after,
.post-content.brands .manuals-grid ol li strong:after {
  content: "Descargar PDF";
  font-size: 12px;
  display: block;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
  .post-content.brands .manuals-grid ul li strong,
  .post-content.brands .manuals-grid ol li strong {
    bottom: 0;
  }
}

/*----------------------------------------------------*\
    TOP BAR
    -
    Top bar for teh site, contains logo, nav and
    navigaton button
\*----------------------------------------------------*/
/* ===== Navegación base ===== */
.tabs-nav {
  position: relative;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}
.tabs-nav .first-lvl,
.tabs-nav .second-lvl,
.tabs-nav .second-lvl-bar {
  list-style: none;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}
.tabs-nav .first-lvl {
  display: flex;
  flex-direction: row;
  gap: 0;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .tabs-nav .first-lvl {
    flex-direction: column;
    border: solid 1px #D9070D;
    border-left: solid 1px #D9070D;
  }
}
.tabs-nav .first-lvl > li {
  flex: 1 1 0;
  text-align: center;
  cursor: pointer;
  padding: 15px 0;
  outline: none; /* lo controlamos con :focus-visible */
  font-weight: 600;
  transition: all 0.5s ease;
}
@media screen and (max-width: 768px) {
  .tabs-nav .first-lvl > li {
    padding: 15px 0;
    border-bottom: solid 1px #D9070D;
  }
  .tabs-nav .first-lvl > li:last-child {
    border-bottom: none;
  }
}
.tabs-nav .first-lvl > li:hover {
  background: #D9070D;
  color: #FFF;
}
.tabs-nav .first-lvl > li.active {
  color: #FFF;
  background: #D9070D;
}
.tabs-nav .second-lvl {
  display: none !important;
}
.tabs-nav .second-lvl-bar {
  display: none;
  width: 100%;
  background: #D5D5D5;
}
.tabs-nav .second-lvl-bar.show {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: stretch;
}
@media screen and (max-width: 768px) {
  .tabs-nav .second-lvl-bar.show {
    flex-direction: column;
  }
}
.tabs-nav .second-lvl-bar > li {
  flex: 1 0 auto;
  text-align: center;
  cursor: pointer;
  padding: 8px 0;
  outline: none; /* control con :focus-visible */
}
.tabs-nav .second-lvl-bar > li.active {
  font-weight: 700;
}

.tabs-content {
  display: none;
  margin-top: 30px;
}
.tabs-content > div {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.tabs-content.is-active {
  display: block;
}
.tabs-content .wp-block-media-text {
  display: flex;
  width: 70%;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .tabs-content .wp-block-media-text {
    width: 100%;
  }
}
.tabs-content .wp-block-media-text > figure {
  width: 200px;
  height: 250px;
  margin: 0 30px 0 0;
}
.tabs-content .wp-block-media-text > figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.tabs-content .wp-block-media-text > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-grow: 1;
}
.tabs-content .wp-block-media-text > div h4 {
  font-family: "DM Sans", sans-serif;
  font-size: 28px;
}
@media screen and (max-width: 768px) {
  .tabs-content .wp-block-media-text > div h4 {
    font-size: 22px;
  }
}
.tabs-content .wp-block-media-text > div p {
  margin-bottom: 15px;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .tabs-content .wp-block-media-text > div p {
    font-size: 16px;
  }
}
.tabs-content .wp-block-media-text > div a {
  display: inline-block;
  padding: 15px;
  text-decoration: none;
  background: #D9070D;
  color: #FFF;
  min-width: 40%;
  font-size: 16px;
  text-align: center;
  transition: all 0.5s ease;
}
@media screen and (max-width: 768px) {
  .tabs-content .wp-block-media-text > div a {
    width: 100%;
    padding: 8px;
    font-size: 14px;
    font-weight: 700;
  }
}
.tabs-content .wp-block-media-text > div a:hover {
  background: #131315;
}

/* Quitar highlight azul en móviles (opcional) */
.tabs-nav .first-lvl > li,
.tabs-nav .second-lvl-bar > li {
  -webkit-tap-highlight-color: transparent;
}

.section-body > .wrapper > p {
  width: 50%;
  margin: 0 auto 120px auto;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .section-body > .wrapper > p {
    margin: 0 auto 30px auto;
    width: 100%;
  }
}

.section-title.archive {
  position: relative;
  margin-bottom: 120px;
}
@media screen and (max-width: 768px) {
  .section-title.archive {
    margin-bottom: 30px;
  }
}
.section-title.archive img {
  width: 100%;
  height: auto;
  display: block;
}
@media screen and (max-width: 768px) {
  .section-title.archive img {
    height: 300px;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.section-title.archive .page-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0px);
  width: 40%;
  background: #D9070D;
  padding: 30px 0;
  text-align: center;
  font-family: "DM Sans", sans-serif;
  text-transform: uppercase;
  color: #FFF;
}
@media screen and (max-width: 768px) {
  .section-title.archive .page-title {
    font-size: 28px;
    padding: 30px;
    width: auto;
  }
}

/*----------------------------------------------------*\
    TOP BAR
    -
    Top bar for teh site, contains logo, nav and
    navigaton button
\*----------------------------------------------------*/
.top-bar {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 15;
}
.top-bar > div,
.top-bar > .wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-bar .logo img {
  width: 160px;
  height: auto;
  display: block;
  margin: 15px 0;
}
@media screen and (max-width: 768px) {
  .top-bar .nav {
    display: none;
  }
}
.top-bar .nav li {
  margin-left: 15px;
}
.top-bar .nav li:hover a:after {
  width: 100%;
}
.top-bar .nav a {
  color: #FFF;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 600;
  position: relative;
}
.top-bar .nav a:after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: #D9070D;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.5s ease;
}
.top-bar .button {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .top-bar .button {
    display: flex;
  }
}
.top-bar .button button {
  background: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.top-bar .button span {
  display: block;
  width: 100%;
  height: 3px;
  background: #FFF;
  margin: 2px 0;
}

.navigation-box {
  position: fixed;
  top: 0;
  left: -200vw;
  width: 100%;
  padding: 15px;
  height: 100%;
  background: #131315;
  z-index: 20;
  transition: all 0.5s ease;
}
.navigation-box.active {
  left: 0;
}
.navigation-box .navigation-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
.navigation-box .logo {
  flex-grow: 1;
}
.navigation-box .logo img {
  width: 120px;
  height: auto;
  display: block;
}
.navigation-box .button button {
  background: none;
}
.navigation-box .button button:before {
  content: "\e80c";
  font-family: "icons";
  color: #FFF;
  font-size: 32px;
}
.navigation-box .nav ul {
  flex-direction: column;
  text-align: center;
}
.navigation-box .nav ul li {
  margin-bottom: 15px;
}
.navigation-box .nav ul a {
  color: #FFF;
}

/*----------------------------------------------------*\
    TOP BAR
    -
    Top bar for teh site, contains logo, nav and
    navigaton button
\*----------------------------------------------------*/
.gallery-slider {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  margin-bottom: 120px;
}
@media screen and (max-width: 768px) {
  .gallery-slider {
    margin-bottom: 60px;
  }
}

.slider-track {
  display: flex;
  transition: transform 0.45s ease;
  will-change: transform;
}

.slide {
  min-width: 100%;
  position: relative;
  color: #fff;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.slide img,
.slide picture,
.slide video {
  width: 100%;
  height: 700px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media screen and (max-width: 768px) {
  .slide img,
  .slide picture,
  .slide video {
    height: 500px;
  }
}

.slide-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 20px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 56%, rgba(0, 0, 0, 0.75) 100%);
  font-size: 15px;
}

.slider-btn {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  border: 0;
  background: #FFF;
  color: #131315;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-family: "icons";
  font-size: 32px;
  transition: all 0.5s ease;
}
@media screen and (max-width: 768px) {
  .slider-btn {
    width: 60px;
    height: 60px;
  }
}

.slider-btn:hover {
  background: #D9070D;
  color: #FFF;
}

.slider-btn:focus-visible {
  outline: 3px solid #5b9dff;
}

.btn-prev {
  left: 60px;
}
@media screen and (max-width: 768px) {
  .btn-prev {
    left: 15px;
  }
}
.btn-prev:before {
  content: "\e828";
}

.btn-next {
  right: 60px;
}
@media screen and (max-width: 768px) {
  .btn-next {
    right: 15px;
  }
}
.btn-next:before {
  content: "\e829";
}

.slider-btn svg {
  width: 22px;
  height: 22px;
}

.dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.dot {
  pointer-events: auto;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: none;
  padding: 0;
  cursor: pointer;
}

.dot[aria-current=true] {
  background: #fff;
}

/* Responsive alto automático según ancho */
@media (max-width: 640px) {
  :root {
    --slider-h: 240px;
  }
}
.masthead .intext {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background: #D9070D;
  color: #FFF;
  width: 50%;
  text-align: center;
  padding: 30px;
}
@media screen and (max-width: 768px) {
  .masthead .intext {
    width: 60%;
  }
}
.masthead .intext p {
  font-size: 38px;
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .masthead .intext p {
    font-size: 28px;
  }
}
.masthead .intext span {
  background: #131315;
  width: 140%;
  display: block;
  position: relative;
  left: -20%;
  margin-top: 30px;
  padding: 8px;
  font-size: 22px;
}
@media screen and (max-width: 768px) {
  .masthead .intext span {
    font-size: 18px;
  }
}

/*----------------------------------------------------*\
    TOP BAR
    -
    Top bar for teh site, contains logo, nav and
    navigaton button
\*----------------------------------------------------*/
.brands {
  margin-bottom: 120px;
}
@media screen and (max-width: 768px) {
  .brands {
    margin-bottom: 60px;
  }
}
.brands h3 {
  text-align: center;
  margin-bottom: 15px;
  font-family: "DM Sans", sans-serif;
  font-size: 32px;
  letter-spacing: 0.3em;
}
@media screen and (max-width: 768px) {
  .brands h3 {
    font-size: 26px;
  }
}
.brands .categories-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}
.brands .categories-nav li {
  width: 20%;
  max-width: 20%;
  margin: 10px;
}
@media screen and (max-width: 768px) {
  .brands .categories-nav li {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    margin: 0 0 10px 0;
  }
}
.brands .categories-nav li a {
  text-decoration: none;
}
.brands .categories-nav li a:hover span {
  background: #131315;
}
.brands .categories-nav span {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  text-align: center;
  text-transform: uppercase;
  background: #D9070D;
  color: #FFF;
  width: 100%;
  min-height: 60px;
  font-size: 15px;
  padding: 8px;
  font-weight: 300;
  transition: all 0.5s ease;
}

/*----------------------------------------------------*\
    TOP BAR
    -
    Top bar for teh site, contains logo, nav and
    navigaton button
\*----------------------------------------------------*/
.footer .wrapper,
.footer > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.footer img {
  margin-bottom: 15px;
}
.footer p {
  width: 70%;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .footer p {
    width: 100%;
    font-size: 14px;
  }
}

.footer-nav {
  border-top: solid 1px #131315;
  padding: 15px;
}
.footer-nav .nav {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .footer-nav .nav ul {
    flex-direction: column;
    text-align: center;
  }
}
.footer-nav .nav li {
  margin: 0 8px;
}
.footer-nav .nav a {
  text-transform: uppercase;
  font-size: 14px;
  color: #131315;
  font-weight: 400;
  transition: all 0.5s ease;
}
.footer-nav .nav a:hover {
  color: #D9070D;
}

/* Pages */
/* =========================
   Projects Landing Page
========================= */
.projects-page {
  /* ---------- HERO ---------- */
  /* ---------- BODY ---------- */
  /* Texto introductorio */
}
.projects-page .banner-mobile {
  display: none;
}
.projects-page figure {
  margin: 0 !important;
}
.projects-page figure img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.projects-page .projects-hero {
  position: relative;
  margin-bottom: 120px;
  overflow: hidden;
  height: 60vh;
}
.projects-page .projects-hero img {
  width: 100%;
  height: auto;
  display: block;
}
@media screen and (max-width: 768px) {
  .projects-page .projects-hero img {
    height: 300px;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.projects-page .projects-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}
.projects-page .projects-hero .wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 2;
  display: flex;
  justify-content: center;
  width: 100%;
}
.projects-page .projects-hero .page-title {
  background: #D9070D;
  color: #FFF;
  font-family: "DM Sans", sans-serif;
  text-transform: uppercase;
  font-size: clamp(2rem, 4vw, 3.2rem);
  padding: 30px 120px;
  text-align: center;
  width: 40%;
}
@media screen and (max-width: 768px) {
  .projects-page .projects-hero .page-title {
    width: auto;
    padding: 30px;
    font-size: 26px;
  }
}
.projects-page .projects-body {
  padding-bottom: 120px;
}
.projects-page .projects-body > .wrapper > p:first-child {
  width: 55%;
  margin: 0 auto 120px auto;
  text-align: center;
  font-size: 18px;
}
@media screen and (max-width: 768px) {
  .projects-page .projects-body > .wrapper > p:first-child {
    width: 100%;
    font-size: 16px;
    margin-bottom: 30px;
  }
}

/* =========================
   FORMULARIO – PROJECTS (LIGHT VERSION)
========================= */
.projects-page {
  /* ---------- Sección formulario ---------- */
  /* ---------- Texto superior ---------- */
  /* ---------- Card del formulario ---------- */
  /* ---------- Labels ---------- */
  /* ---------- Inputs ---------- */
  /* ---------- Submit ---------- */
  /* ---------- Validaciones ---------- */
}
.projects-page p {
  margin: 0 !important;
}
.projects-page .projects-form {
  background: #ffffff;
  padding: 60px 0 30px;
}
.projects-page .projects-form .wp-block-group__inner-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 30px;
  flex-direction: column;
  align-items: center;
}
.projects-page .projects-form h3 {
  color: #131315;
  font-size: 32px;
  text-transform: uppercase;
  margin-bottom: 15px;
  text-align: center;
}
.projects-page .projects-form p {
  color: rgba(19, 19, 21, 0.75);
  font-size: 16px;
  line-height: 1.6;
  max-width: 640px;
  text-align: left;
  width: 100%;
}
.projects-page .projects-form .wpcf7 {
  background: #ffffff;
  margin-top: 30px;
  padding: 30px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
  width: 60%;
}
.projects-page .projects-form .wpcf7 form {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.projects-page label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(19, 19, 21, 0.85);
}
.projects-page input,
.projects-page textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(19, 19, 21, 0.35);
  padding: 15px 0;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  color: #131315;
  outline: none;
  transition: all 0.25s ease;
}
.projects-page input::-moz-placeholder, .projects-page textarea::-moz-placeholder {
  color: rgba(19, 19, 21, 0.4);
}
.projects-page input::placeholder,
.projects-page textarea::placeholder {
  color: rgba(19, 19, 21, 0.4);
}
.projects-page input:focus,
.projects-page textarea:focus {
  border-bottom-color: #D9070D;
}
.projects-page textarea {
  min-height: 140px;
  resize: vertical;
}
.projects-page input[type=submit] {
  margin-top: 30px;
  align-self: center;
  background: #D9070D;
  color: #FFF;
  border: none;
  padding: 15px 120px;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}
.projects-page input[type=submit]:hover {
  background: #131315;
  color: #FFF;
}
.projects-page .wpcf7-not-valid-tip {
  margin-top: 4px;
  font-size: 12px;
  color: #D9070D;
  background: transparent;
}
.projects-page .wpcf7-response-output {
  margin-top: 30px;
  padding: 15px;
  border-top: 1px solid rgba(19, 19, 21, 0.15);
  color: rgba(19, 19, 21, 0.8);
  font-size: 14px;
  text-align: center;
}

/* =========================
   MOBILE FIXES – PROJECTS PAGE
========================= */
@media screen and (max-width: 768px) {
  .banner-desktop {
    display: none;
  }
  .banner-mobile {
    display: block !important;
  }
  .banner-mobile img {
    height: auto;
  }
  .projects-page {
    /* ---------- HERO ---------- */
    /* ---------- Texto introductorio ---------- */
    /* ---------- FORMULARIO ---------- */
    /* Card del formulario */
    /* Inputs */
    /* Botón */
  }
  .projects-page .projects-hero {
    height: 280px;
    margin-bottom: 30px;
  }
  .projects-page .projects-hero .page-title {
    font-size: 32px;
    padding: 15px 30px;
  }
  .projects-page .projects-body > .wrapper > p:first-child {
    margin-bottom: 30px;
    text-align: left;
  }
  .projects-page .projects-form {
    padding: 30px 15px;
  }
  .projects-page .projects-form .wp-block-group__inner-container {
    gap: 15px;
    align-items: stretch;
  }
  .projects-page .projects-form h3 {
    font-size: 22px;
    line-height: 1.2;
  }
  .projects-page .projects-form p {
    font-size: 15px;
  }
  .projects-page .projects-form .wpcf7 {
    width: 100%;
    padding: 30px;
    transform: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  }
  .projects-page input,
  .projects-page textarea {
    font-size: 16px; /* evita zoom en iOS */
    width: 100%;
  }
  .projects-page textarea {
    min-height: 120px;
  }
  .projects-page input[type=submit] {
    width: 100%;
    text-align: center;
    padding: 30px;
  }
}/*# sourceMappingURL=styles.css.map */