/* ------------------------------------------------*/
/* Custom Fonts Start */
/* ------------------------------------------------*/

/* Grift - Fuente principal (body, textos generales) */
@font-face {
  font-family: "Grift";
  src: url("../fonts/custom/Grift-Regular.otf") format("opentype");
  font-weight: 100 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Grift";
  src: url("../fonts/custom/Grift-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Grift";
  src: url("../fonts/custom/Grift-ExtraBold.otf") format("opentype");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

/* Patita - Fuente secundaria (títulos, headings, menú) */
@font-face {
  font-family: "Patita";
  src: url("../fonts/custom/Patita-Black.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------*/
/* Custom Fonts End */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Override Font Variables Start */
/* ------------------------------------------------*/
:root {
  --_font-default: "Grift", sans-serif;
  --_font-accent: "Patita", sans-serif;
}

/* Override directo: el shorthand "font:" de main.css puede */
/* fallar al parsear variables con comas, así que aplicamos */
/* font-family explícitamente donde sea necesario.          */
body,
p,
a,
li,
span,
input,
textarea,
button {
  font-family: "Grift", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.main-menu__link,
.marquee__item p,
.hero-04-title,
.mxd-services-cards__title p,
.footer-blocks__title-l,
.mxd-block__name h2,
.mxd-point-title,
.mxd-testimonials__quote p {
  font-family: "Patita", sans-serif;
}
/* ------------------------------------------------*/
/* Override Font Variables End */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Custom Logo Start */
/* ------------------------------------------------*/
.mxd-logo__image {
  width: auto;
  height: 4rem;
}
@media only screen and (min-width: 768px) {
  .mxd-logo__image {
    width: auto;
    height: 4.8rem;
  }
}

/* Logo swap: por defecto (light) muestra oscuro, oculta claro */
.logo-light { display: none; }
.logo-dark  { display: block; }

/* Cuando el sistema prefiere dark */
@media (prefers-color-scheme: dark) {
  .logo-light { display: block; }
  .logo-dark  { display: none; }
}

/* Cuando el toggle manual selecciona light */
[color-scheme=light] .logo-light { display: none; }
[color-scheme=light] .logo-dark  { display: block; }

/* Cuando el toggle manual selecciona dark */
[color-scheme=dark] .logo-light { display: block; }
[color-scheme=dark] .logo-dark  { display: none; }
/* ------------------------------------------------*/
/* Custom Logo End */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Custom Colors Start */
/* ------------------------------------------------*/

/* --- LIGHT THEME --- */
:root {
  /* Fondo principal */
  --base--light: #FFF8E1;
  --base-rgb--light: 255, 248, 225;
  --base-tint--light: #FFFDF5;
  --base-shade--light: #EDE5C8;
  /* Color acento principal (dorado) */
  --accent--light: #F7DC6B;
  --accent-rgb--light: 247, 220, 107;
  /* Color secundario (verde claro) */
  --additional--light: #BCEB7A;
  --additional-rgb--light: 188, 235, 122;
  /* Bordes/separadores adaptados al fondo */
  --st-muted--light: #EDE5C8;
  --neutral-transparent--light: rgba(255, 248, 225, 0.3);
}

/* --- DARK THEME --- */
:root {
  /* Fondo principal */
  --base--dark: #313133;
  --base-rgb--dark: 49, 49, 51;
  --base-tint--dark: #3A3A3C;
  --base-shade--dark: #252527;
  /* Color acento principal (cyan/turquesa) */
  --accent--dark: #73D2DE;
  --accent-rgb--dark: 115, 210, 222;
  /* Color secundario (beige) */
  --additional--dark: #E6D3A3;
  --additional-rgb--dark: 230, 211, 163;
  /* Bordes/separadores adaptados al fondo */
  --st-muted--dark: #3E3E40;
  --neutral-transparent--dark: rgba(49, 49, 51, 0.3);
}

/* Override para selectores [color-scheme] que usa el toggle */
[color-scheme=light] {
  --base: #FFF8E1;
  --base-rgb: 255, 248, 225;
  --base-tint: #FFFDF5;
  --base-shade: #EDE5C8;
  --accent: #F7DC6B;
  --accent-rgb: 247, 220, 107;
  --additional: #BCEB7A;
  --additional-rgb: 188, 235, 122;
  --st-muted: #EDE5C8;
  --neutral-transparent: rgba(255, 248, 225, 0.3);
}

[color-scheme=dark] {
  --base: #313133;
  --base-rgb: 49, 49, 51;
  --base-tint: #3A3A3C;
  --base-shade: #252527;
  --accent: #73D2DE;
  --accent-rgb: 115, 210, 222;
  --additional: #E6D3A3;
  --additional-rgb: 230, 211, 163;
  --st-muted: #3E3E40;
  --neutral-transparent: rgba(49, 49, 51, 0.3);
}

/* ------------------------------------------------*/
/* Custom Colors End */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Custom SVG Icons Start */
/* ------------------------------------------------*/

/* Base icon styles: usa ::before con mask-image para que
   la animación slide-right-up original funcione (anima i::before).
   El <i> es el contenedor con overflow:hidden, ::before es el ícono. */
.icon-arrow-right-up {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 1 !important;
  /* Limpiar mask-image del <i> */
  -webkit-mask-image: none;
  mask-image: none;
  background-color: transparent;
}
.icon-arrow-right-up::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: url('../img/icons/arrow-right-up.svg');
  mask-image: url('../img/icons/arrow-right-up.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: currentColor;
}
/* Tamaño en botones del header */
.btn-default .icon-arrow-right-up {
  width: 2.6rem !important;
  height: 2.6rem !important;
  min-width: 2.6rem;
  min-height: 2.6rem;
}
/* Tamaño en botones redondos */
.btn-round .icon-arrow-right-up {
  width: 3rem !important;
  height: 3rem !important;
  min-width: 3rem;
  min-height: 3rem;
}
/* Tamaño en botón del formulario (btn-form) */
.btn-form .icon-arrow-right-up {
  width: 2.6rem !important;
  height: 2.6rem !important;
  min-width: 2.6rem;
  min-height: 2.6rem;
}
/* Tamaño en botones de línea pequeños (footer, etc.) */
.btn-line-xsmall .icon-arrow-right-up,
.btn-muted .icon-arrow-right-up {
  width: 1.4rem !important;
  height: 1.4rem !important;
  min-width: 1.4rem;
  min-height: 1.4rem;
}

/* Theme toggle icons - replicar estilos de .mxd-color-switcher i */
.mxd-color-switcher img.icon-theme-toggle {
  display: inline-flex;
  position: relative;
  width: 3.2rem;
  height: 3.2rem;
  overflow: hidden;
  transform: scale(1);
  transition: transform var(--_animspeed-medium) var(--_animbezier);
}
@media only screen and (min-width: 768px) {
  .mxd-color-switcher img.icon-theme-toggle {
    width: 4.4rem;
    height: 4.4rem;
  }
}
.no-touch .mxd-color-switcher:hover img.icon-theme-toggle {
  transform: scale(0.92);
}

/* ------------------------------------------------*/
/* Custom SVG Icons End */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Custom Hamburger (trazo manual) Start */
/* ------------------------------------------------*/
.hamburger__line {
  height: 0.28rem !important;
  border-radius: 1rem !important;
}
/* Línea superior: ligeramente más corta y rotada */
.hamburger__line:first-of-type {
  width: 48% !important;
  transform: rotate(-2deg) translateX(-1px);
}
/* Línea inferior: un poco más larga y rotada al revés */
.hamburger__line:last-of-type {
  width: 54% !important;
  transform: rotate(1.5deg) translateX(1px);
}
/* ------------------------------------------------*/
/* Custom Hamburger (trazo manual) End */
/* ------------------------------------------------*/

p.t-medium-large {
  font-size: 2rem;
}

/* ------------------------------------------------*/
/* Preloader counter fix (Patita tiene ascendentes  */
/* más altos que Funnel Display, line-height .9     */
/* + overflow:hidden lo cortaba arriba)             */
/* ------------------------------------------------*/
.loader__count {
  overflow: visible;
}
.loader__content {
  overflow: visible;
}
.loader__count span {
  line-height: 1.1;
}

/* ------------------------------------------------*/
/* 404 marquee: Patita ascendentes más altos que   */
/* la fuente base, line-height 0.8 + overflow:     */
/* hidden en .mxd-section-fullscreen lo cortaba    */
/* arriba. Aumentar a 1.1 da espacio a ascendentes */
/* ------------------------------------------------*/
.marquee__text.text-xl {
  line-height: 1.1;
}

/* ------------------------------------------------*/
/* 404 marquee accent color                        */
/* ------------------------------------------------*/
.marquee.accent .marquee__text,
.marquee.accent .marquee__image {
  color: var(--accent);
}

/* ------------------------------------------------*/
/* Promo: fondo completo con blur (sin parallax)   */
/* ------------------------------------------------*/
.mxd-promo__bg {
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  filter: blur(4px);
  -webkit-filter: blur(4px);
  transform: scale(1.05); /* evita bordes blancos del blur */
}

/* ------------------------------------------------*/
/* Hero descr: fondo semitransparente sobre imagen  */
/* ------------------------------------------------*/
.mxd-hero-04__descr {
  background-color: rgba(var(--base-rgb), 0.7);
  border-radius: var(--_radius-l);
  padding: 3rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@media only screen and (min-width: 1200px) {
  .mxd-hero-04__descr {
    padding: 4rem 5rem;
  }
}

/* ------------------------------------------------*/
/* Card image-3: subir image-2 en desktop           */
/* ------------------------------------------------*/
@media only screen and (min-width: 1200px) {
  .mxd-services-cards__image.mxd-services-cards-image-3 .image-2 {
    bottom: -60px;
  }
}
@media only screen and (min-width: 1600px) {
  .mxd-services-cards__image.mxd-services-cards-image-3 .image-2 {
    bottom: -20px;
  }
}

/* ------------------------------------------------*/
/* Edition-specific parallax hero images            */
/* ------------------------------------------------*/
.prj-details-ed2-img-01 {
  background-image: url(../img/hero-ed2.jpg);
}
.prj-details-ed2-img-02 {
  background-image: url(../img/ed2-hero-pod.jpg);
}
.prj-details-ed3-img-01 {
  background-image: url(../img/hero-ed3.png);
}
.prj-details-ed3-img-02 {
  background-image: url(../img/ed3-pod.png);
}
.prj-details-ed4-img-01 {
  background-image: url(../img/ed4-hero.png);
}
.prj-details-ed4-img-05 {
  background-image: url(../img/ed4-img5.png);
}
.prj-details-eds-img-01 {
  background-image: url(../img/ed3-pod.png);
}

.preview-img-melele1 {
  background-image: url(../img/mel-img1.jpeg);
}

.preview-img-melele2 {
  background-image: url(../img/docu-melele.png);
}

.preview-img-melele3 {
  background-image: url(../img/mel-img2.jpeg);
}

.preview-img-melele4 {
  background-image: url(../img/mel-img3.jpeg);
}
.preview-img-melele5 {
  background-image: url(../img/mel-img4.jpeg);
}
/* ------------------------------------------------*/
/* Blog article: larger text for readability        */
/* ------------------------------------------------*/
.mxd-article__content p,
.mxd-article__content li {
  font-size: 2rem;
  line-height: 1.7;
}
@media only screen and (min-width: 768px) {
  .mxd-article__content p,
  .mxd-article__content li {
    font-size: 2.2rem;
  }
}

/* ------------------------------------------------*/
/* Blog article: references list spacing & font     */
/* ------------------------------------------------*/
.mxd-article__content ol.references {
  gap: 2.4rem;
}

/* ------------------------------------------------*/
/* Blog article: blockquote styling                 */
/* ------------------------------------------------*/
.mxd-article__content blockquote {
  margin: 3rem 0;
  padding: 2rem 0 2rem 3rem;
  border-left: 4px solid var(--accent);
}
.mxd-article__content blockquote .quote__text {
  font-size: 2.6rem;
  line-height: 1.4;
  color: var(--t-medium);
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .mxd-article__content blockquote .quote__text {
    font-size: 2.8rem;
  }
}
.mxd-article__block.block-quote {
  border-top: none;
  border-bottom: none;
  padding: 0;
}
.mxd-article__content ol.references li {
  font-family: "Grift", sans-serif;
}

/* ------------------------------------------------*/
/* Blog article: callout / aside box                */
/* ------------------------------------------------*/
.mxd-article__block.block-callout {
  border: 1px solid var(--st-muted);
  border-radius: var(--_radius-m);
  padding: 3rem;
}
.mxd-article__block.block-callout .callout__title {
  font: normal var(--fw-medium) 2.2rem/1.3 var(--_font-accent);
  color: var(--accent);
  margin-bottom: 1.6rem;
}
.mxd-article__block.block-callout p {
  font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent);
  color: var(--t-medium);
}
@media only screen and (min-width: 768px) {
  .mxd-article__block.block-callout {
    padding: 4rem;
  }
  .mxd-article__block.block-callout .callout__title {
    font-size: 2.4rem;
  }
  .mxd-article__block.block-callout p {
    font-size: 2rem;
  }
}