/*
Theme Name:   Subgráfica theme
 Theme URI:    https://subgrafica.com/
 Description:  Subgráfica WP theme - If you’re reading this, please say hi!!
 Author:       Subgráfica Estudio
 Author URI:   https://subgrafica.com/
 Template:     Divi
 Version:      6.0 AGO
 License:      Attribution-NonCommercial 4.0 International
 License URI:  https://creativecommons.org/licenses/by-nc/4.0/
 */


/* =========================================================
   1. TOKENS / VARIABLES
========================================================= */
 :root {

    /* Colores */
  --gr-cl: #F2F2F2;   /* gris claro */
  --gr: #D5D5D5;   /* gris */
  --gr-obs:#333333; /* gris oscuro para observaciones */
  --ne: #000000;   /* negro */
  --bl: #ffffff;   /* blanco */
  --na: #fd572b;
  --mo: #6a5bc6;
  --ve: #d8ff02;
  --gr-5:#5d5c5c;   /* gris 5d5d5d */
  --gr-b:#b2b2b2;   /* gris b2b2b2   */

  --ve-hover: #9fbc00;
  --transp: transparent;
	--translu: rgba(217, 217, 217, 0.3);
	--translu-2: rgba(255, 255, 255, 0.75);

  /* Tipografías y pesos */
  --ffa: 'bb-Sr', sans-serif;                 /* Fuente A principal  */
  --ffb: 'source-s',sans-serif;
  --ffc: 'server-m', monospace;
  --fwl-hai: 200;           /* Peso hair   */
  --fwl-reg: 400;           /* Peso regular */
  --fwl-med: 500;           /* Peso medio   */
  --fwl-bol: 700;           /* Peso bold    */

  /* Tamaños para encabezados */
  --fs-h1: clamp(1.8rem, 1vw + 2.6rem, 3.2rem);    /* H1 */
  --fs-h2: clamp(1.7rem, 1vw + 2.2rem, 2.2rem);    /* H2 */
  --fs-h3: clamp(1.6rem, 1vw + 2.0rem, 2.0rem);    /* H3 */
  --fs-h4: clamp(1.2rem, 1vw + 1.2rem, 1.8rem);    /* H4 */
  --fs-h5: clamp(1.0rem, 1vw + 1.1rem, 1.1rem);    /* H5 */
  --fs-h6: clamp(0.9rem, 1vw + 1rem, 0.80rem);   /* H6 */

  /* Tamaños para párrafos */
  --fs-p-pe:  clamp(0.8rem, 1vw + 1.05rem, 1.05rem);  /* Párrafo pequeño */
  --fs-p-nor: clamp(0.9rem, 1vw + 1.20rem, 1.20rem);  /* Párrafo normal  */
  --fs-p-gr:  clamp(0.9rem, 1vw + 1.10rem, 1.26rem);  /* Párrafo grande  */
  --fs-p-gi:  clamp(2.4rem, 1vw + 3vw, 5vw);  /* Párrafo gigante  */

  --fls: .1rem;
  /* Tamaños especiales */
  --fs-esp-h1: clamp(.9rem, 1vw + 1rem, 3.6rem); /* Especial H1 */
  --fs-esp-h4: clamp(.9rem, 1vw + 1rem, 2.2rem); /* Especial H4 */

  /* Line heights */
  --flh0: 100%;
  --flh1: 110%;
  --flh2: 150%;

  /* FITCO – INTEGRACIÓN VISUAL */

  --fitco-sign-in-font: var(--ffc);

  --fitco-sign-in-submit-button-background-color: var(--ne);
  --fitco-sign-in-submit-button-text-color: var(--bl);

  --fitco-sign-in-submit-button-hover-background-color: var(--ve);
  --fitco-sign-in-submit-button-hover-text-color: var(--ne);
}



/* =========================================================
   2. RESET / BASE
========================================================= */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/* =========================================================
   3. TIPOGRAFÍA Y TEXTO
========================================================= */
body {
  min-height: 100vh;
  min-height: 100dvh;
}

body {
  font-family: var(--ffb);
  font-size: 100% !important;
  font-weight: var(--fwl-reg);
  line-height: var(--flh1);
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}

::selection {
  background: var(--gr-obs);
  color:var(--bl);
}

::-moz-selection {
  background: var(--gr-obs);
  color:var(--bl);
}

a:active, a:active * {
  outline: none !important;
  outline-style: none !important;
}

a:focus, a:focus * {
  outline: none !important;
  outline-style: none !important;
}

 h1, h2, h3, h4, h5, h6 {
   font-weight: var(--fwl-reg);
    color: var(--ne) !important;
   -webkit-hyphens: none;
   -moz-hyphens: none;
   hyphens: none;
   text-justify: inter-character;
 }
 

 p {
   hyphens: none;
   -webkit-hyphens: none;
   -moz-hyphens: none;
   text-align: left;
   overflow-wrap: normal;
 }
br {
  margin-bottom: 6px;
}

a:link {
  text-decoration: none;
  opacity: 1;
  color: var(--na);
  font-weight: var(--fwl);
   transition-duration: 0.2s;
   -webkit-transition-timing-function: ease-in-out;
   transition-timing-function: ease-in-out;
 }

 a:hover {
   text-decoration: underline;
   opacity:  1;
   transition: all 0.2s ease-in-out;
 }

 a:visited {
   color: var(--na);
   opacity: .9;
 }
 /* Imágenes dentro de enlaces */
a img {
  transition: opacity 0.3s ease; /* transición base */
}

a:hover img {
  opacity: 0.9;
}

/* SVG inline dentro de enlaces */
a svg {
  transition: opacity 0.3s ease; /* transición base */
}

a:hover svg {
  opacity: 0.9;
}

a:visited svg {
  opacity: 1;
}

 h1 {
   font-family: var(--ffc);
   font-size: var(--fs-h1) !important;
   font-weight: var(--fwl-reg);
   line-height: var(--flh1);
 }
 h2 {
   font-family: var(--ffc);
   font-size: var(--fs-h2) !important;
   font-weight: var(--fwl-reg);
   line-height: var(--flh1);
 }
 h3 {
   font-family: var(--ffc);
   font-size: var(--fs-h3) !important;
   font-weight: var(--fwl-reg);
   line-height: var(--flh1);
   text-transform: uppercase;
 }
 h4 {
   font-family: var(--ffb);
   font-size: var(--fs-h4) !important;
   font-weight: var(--fwl-reg);
   line-height: var(--flh1);
 }
 h5 {
   font-family: var(--ffc);
   font-size: var(--fs-h5) !important;
   text-transform: uppercase;
   font-weight: var(--fwl-reg);
 }
 h6 {
   font-family: var(--ffc);
   font-size: var(--fs-h6) !important;
   text-transform: uppercase;
   font-weight: var(--fwl-reg);
 }
 blockquote {
 border-color: var(--azul_claro);
}
strong {
  font-weight: var(--fwl-reg) !important;
}
.par-gra p {
  font-size: var(--fs-p-gr) !important;
  line-height: var(--flh1);
}
.par-nor p {
  font-size: var(--fs-p-nor) !important;
  line-height: var(--flh1);
}
.par-peq p {
  font-size: var(--fs-p-pe) !important;

}
.par-gig p {
  font-family: var(--ffc) !important;
  font-size: var(--fs-p-gi) !important;
  line-height: var(--flh1);
}
.par-opc {
  opacity: .65;
 }
 .no-data {
  -webkit-user-select: none; /* Safari */
     -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* IE10+ */
          user-select: none; /* Estándar moderno: Chrome, Edge, Firefox, Opera, Safari */
}
.link-especifico a:link,
.link-especifico a:visited {
  text-decoration: none;
  opacity: 1;
  transition: opacity 0.3s ease, color 0.3s ease;
}
/* Link editorial */
.link-ed a:link,
.link-ed a:visited {
  text-decoration: none;
  color: inherit;
  opacity: 1;
  cursor: pointer;

  transition:
    text-decoration-color 0.2s ease;
}

/* Hover: solo subrayado */
.link-ed a:hover,
.link-ed a:focus {
  text-decoration: underline;
  text-decoration-color: currentColor;
  opacity: 1;
  cursor: pointer;
}
/* Estado visual permanente (sin hover ni link) */
.link-ed-active {
  text-decoration: underline;
  text-decoration-color: currentColor;
  cursor: default;
}

/* Activador de subrayado para typed */
.link-type .typed-output {
  text-decoration: none;
  cursor: pointer;
  transition:
    text-decoration-color 0.2s ease;
}

/* Hover: subrayado tipográfico */
.link-type:hover .typed-output {
  text-decoration: underline;
  text-decoration-color: currentColor;
}
/* Estado forzado (sin hover) */
.link-type.is-active .typed-output {
  text-decoration: underline;
  text-decoration-color: currentColor;
  cursor: default;
}
.direccion-link{
  display: inline-block;
  text-decoration: none;
  color: inherit;
}
.direccion-link .par-peq{
  font-size: var(--fs-p-pe) !important;
  line-height: var(--flh1);
  opacity: .65;
  margin: 0 !important;
  padding: 0 !important;
  
}
.direccion-link .par-gra{
    font-size: var(--fs-p-gr) !important;
  line-height: var(--flh1);
  margin: 0 !important;
  padding: 0 !important;
}

.direccion-link:hover{
  text-decoration: underline;
}


/* ============================
   SISTEMA DE COLORES UTILITARIOS
   ============================ */

/* Gris */
.c-gr, .c-gr * {
    color: var(--gr) !important;
}

/* Negro */
.c-ne, .c-ne * {
    color: var(--ne) !important;
}

/* Blanco */
.c-bl, .c-bl * {
    color: var(--bl) !important;
}

/* Naranja */
.c-na, .c-na * {
    color: var(--na) !important;
}

/* Morado */
.c-mo, .c-mo * {
    color: var(--mo) !important;
}

/* Verde */
.c-ve, .c-ve * {
    color: var(--ve) !important;
}
.upper, .upper * {
     text-transform: uppercase !important;
}


/* =========================================================
   4. LISTAS Y TEXTO DECORADO
========================================================= */

/* =========================================
   NAV BASE
========================================= */

.main-nav {
  display: flex;
  justify-content: center;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none !important;
  margin: 0;
  padding: 0;
  margin-top: -2px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

/* Links normales del menú */
.nav-list > li > a:not(.cta) {
  font-family: var(--ffc);
  font-size: var(--fs-h6) !important;
  text-transform: uppercase;
  letter-spacing: 0em !important;
  color: var(--bl);
  text-decoration: none;
  transition: opacity 0.25s ease;
}

.nav-list > li > a:not(.cta):hover {
  opacity: 0.6;
}
.nav-list > li > .nav-active {
  font-family: var(--ffc);
  font-size: var(--fs-h6);
  text-transform: uppercase;
  letter-spacing: 0em;
  color: var(--bl);
  text-decoration: none;
  opacity: .50;
  transition: opacity 0.25s ease;
  cursor: default;
}
/* =========================================
   SOLO AJUSTE DE TAMAÑO PARA CTA EN NAV
   (no redefine colores)
========================================= */

.nav-list .cta {
  height: 44px;
  padding-left: 28px !important;
  padding-right: 28px !important;
  font-size: var(--fs-h6) !important;
}

.nav-list-movil {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none !important;
  margin: 0;
  padding: 0 !important;
  margin-top: 0px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

/* Links normales del menú */
.nav-list-movil > li > a:not(.cta) {
  font-family: var(--ffc);
  font-size: var(--fs-h6) !important;
  text-transform: uppercase;
  letter-spacing: 0em !important;
  color: var(--bl);
  text-decoration: none;
  transition: opacity 0.25s ease;
}

.nav-list-movil > li > a:not(.cta):hover {
  opacity: 0.6;
}

/* =========================================
   SOLO AJUSTE DE TAMAÑO PARA CTA EN NAV
   (no redefine colores)
========================================= */

.nav-list-movil .cta {
  height: 44px;
  padding-left: 8px !important;
  padding-right: 8px !important;
  font-size: var(--fs-h6) !important;
}

.bg-bar {
background-color: var(--translu);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.bg-bar {
  transition: background-color 0.3s ease;
}

.bg-bar.footer-active {
background-color: rgba(30, 30, 30, 0.5);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}


.lista-base ul {
  line-height: 28px;
}
.lista-base ul li {
  margin-bottom: 12px;
  line-height: var(--flh1);
    font-size: var(--fs-p-nor);
  font-weight: var(--fwl-reg);
}

.lista-base ul li a,
.lista-base ol li a {
  opacity: 1;
}

.lista-base ul li a:hover,
.lista-base ol li a:hover {
  opacity: 1;
}
.lista-base ul li a:visited,
.lista-base ol li a:visited {
  opacity: 1;
}
/* Base para todos los p con ícono */
p.icono {
  position: relative;
  padding-left: 40px;   /* espacio para el ícono */
}

/* Estilo del pseudo-elemento */
p.icono::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* Ícono mapa */
p.icono.map::before {
  background-image: url("https://oliverrenecirugiaplastica.com/wp-content/themes/subgrafica-theme/data/img/iconos/icon_LO.svg");
}

/* Ícono teléfono */
p.icono.tel::before {
  background-image: url("https://oliverrenecirugiaplastica.com/wp-content/themes/subgrafica-theme/data/img/iconos/icon_WH.svg");
}

.typed-text-sub {
  font-family: var(--ffa);
  font-size: var(--fs-p-no) !important;
  font-weight: var(--fwl-reg);
}


/* ================================
   MARQUEE INFINITO - TEXTO
   ================================ */

/* Contenedor visible */
.marquee-wrapper {
  width: 100%;
  overflow: hidden;
}

/* Pista animada */
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee-scroll 30s linear infinite;
}

/* Lista horizontal */
.marquee-list {
  display: flex;
  list-style: none !important;
  margin: 0;
  padding: 0 0 0px 0em !important;
}

/* Elementos de la lista */
.marquee-list li {
  white-space: nowrap;
  margin-right: 3rem;
  font-family: var(--ffc);
  font-size: var(--fs-h2) !important;
  font-weight: var(--fwl-reg);
  line-height: var(--flh1);
  text-transform: uppercase;
  cursor: default;
}

/* Animación continua sin huecos */
@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* =========================================================
   ZONE ITEM BASE
========================================================= */

.zone-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px; /* espacio entre número y barra */
}

/* Número generado */

.zone-item::before {
    font-family: inherit;
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
    min-width: 40px;
    text-align: right;
}

/* Contenido por nivel */

.zone-1::before { content: "[1]"; }
.zone-2::before { content: "[2]"; }
.zone-3::before { content: "[3]"; }
.zone-4::before { content: "[4]"; }
.zone-5::before { content: "[5]"; }



/* =========================================================
/* =========================================================
   CTA — SISTEMA BASE (UNIDAD COMPLETA)
========================================================= */
.class-card h1,
.class-card h2,
.class-card h3,
.class-card h4,
.class-card h5,
.class-card h6 {
  color: inherit !important;
}
.cta {
  /* Variables por defecto (se sobreescriben por variante) */
  --cta-bg: var(--ne);
  --cta-color: var(--bl);
  --cta-arrow: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/flecha-boton_b_.svg");

  position: relative;
  display: inline-flex;
  align-items: center;

  height: 48px;
  padding-left: 30px;
  padding-right: 40px;

  font-family: var(--ffc);
  font-size: var(--fs-h6);
  text-transform: uppercase;
  text-decoration: none;

  background-color: var(--cta-bg);
  color: var(--cta-color) !important;

  cursor: pointer;
  overflow: visible;

  /* Fade sutil y controlado */
  transition:
    background-color 0.2s ease-out,
    color 0.2s ease-out;

  transition-duration: 0.2s !important;
  transition-timing-function: ease-out !important;

  /* Blindaje total contra estilos globales / Divi */
  animation: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Neutralizar comportamiento de enlaces */
.cta,
.cta:hover,
.cta:focus,
.cta:active,
.cta:visited {
  text-decoration: none !important;
  opacity: 1 !important;
  transition-property: background-color, color !important;
}


/* =========================================================
   CTA — SHAPE LATERAL (AFTER)
========================================================= */

.cta::after {
  content: "";
  position: absolute;
  top: 0;
  right: -24px;

  width: 28px;
  height: 48px;

  background-color: var(--cta-bg);

  mask: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/lateral.svg")
        center / contain no-repeat;
  -webkit-mask: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/lateral.svg")
                center / contain no-repeat;

  transition: background-color 0.2s ease-out !important;
}


/* =========================================================
   CTA — TEXTO
========================================================= */

.cta-text {
  text-shadow: none !important;
  position: relative;
  display: inline-block;
  color: inherit;
}


/* =========================================================
   CTA — FLECHA (OPCIONAL)
========================================================= */

.cta.has-arrow .cta-text::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background-image: var(--cta-arrow);
  background-size: contain;
  background-repeat: no-repeat;

  transition: transform 0.2s ease-out;
}

/* Movimiento de flecha en hover */
.cta.has-arrow:hover .cta-text::before {
  transform: translateY(-50%) translateX(3px);
}


/* =========================================================
   CTA — HOVER GLOBAL (UNIFICADO)
========================================================= */

.cta:hover {
  --cta-bg: var(--gr);
}

/* =========================================================
   CTA — VARIANTES DE COLOR
========================================================= */

/* Negro */
.cta-negro {
  --cta-bg: var(--ne);
  --cta-color: var(--bl);
  --cta-arrow: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/flecha-boton_b_.svg");
}
.cta-negro:hover {
  --cta-bg: var(--gr-obs);
  --cta-color: var(--bl);

}

/* Blanco */
.cta-blanco {
  --cta-bg: var(--bl);
  --cta-color: var(--ne);
  --cta-arrow: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/flecha-boton_n_.svg");
}

/* Naranja */
.cta-naranja {
  --cta-bg: var(--na);
  --cta-color: var(--ne);
  --cta-arrow: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/flecha-boton_n_.svg");
}

/* Morado */
.cta-morado {
  --cta-bg: var(--mo);
  --cta-color: var(--bl);
  --cta-arrow: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/flecha-boton_b_.svg");
}

/* Verde */
.cta-verde {
  --cta-bg: var(--ve);
  --cta-color: var(--ne);
  --cta-arrow: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/flecha-boton_n_.svg");
}
.cta-verde:hover {
  --cta-bg: var(--ne);
  --cta-color: var(--bl);
}
/* Verde obscuro */
.cta-verde-obs {
  --cta-bg: var(--ve);
  --cta-color: var(--ne);
  --cta-arrow: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/flecha-boton_n_.svg");
}
.cta-verde-obs:hover {
  --cta-bg: var(--gr);
  --cta-color: var(--ne);
}

/* =========================================
   CTA BLANCO OUTLINE
========================================= */

.cta-blanco-outline {
  background-color: transparent;
  border: 1px solid var(--bl);
  color: var(--bl) !important;
  opacity:1;
  transition:
  background-color 0.25s ease,
  color 0.25s ease;
}

/* Quitar lateral */
.cta-blanco-outline::after {
  display: none;
}

/* Quitar flecha */
.cta-blanco-outline .cta-text::before {
  display: none;
}

.cta-blanco-outline:hover {
  background-color: var(--bl);
  color: var(--ne) !important;
  border: 1px solid var(--bl);
  opacity: 1;
}

/* =========================================
   CTA BLANCO SIMPLE
========================================= */

.cta-blanco-simple {
  background-color: var(--bl);
  border: 1px solid var(--bl);
  color: var(--ne) !important;
  transition:background-color 0.25s ease,color 0.25s ease;
}

/* Quitar lateral */
.cta-blanco-simple::after {
  display: none;
}

/* Quitar flecha */
.cta-blanco-simple .cta-text::before {
  display: none;
}

.cta-blanco-simple:hover {
  background-color: var(--gr);
  border: 1px solid var(--gr);
  color: var(--ne) !important;
}
.cta-blanco-simple,
.cta-blanco-outline {
  padding-left: 30px !important;
  padding-right: 30px !important;
}

.cta-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px; /* separación entre botones */
  flex-wrap: wrap; /* opcional para responsive */
}
.cta-group p {
  display: inline-flex;
  margin: 0;
}

/* Alinear solo este botón a la derecha */
.cta-right {
  display: flex;
  justify-content: flex-end;
}
/* =====================================
   TYPED GRANDE – SOLO ESTE TYPER
===================================== */

.typed-grande .typed-output {
  font-family: var(--ffc) !important;
  font-size: var(--fs-p-gi) !important;
  line-height: var(--flh0);
  text-transform: none;
}
/* =========================================================
   SISTEMA DE TARJETAS – DEFINITIVO
   Estado visual controlado por .is-active
========================================================= */

/* =========================
   BASE TARJETA
========================= */

.class-card {
  position: relative;
  background-color: var(--ne);
  border: 1px solid var(--gr-obs);

  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    transform 0.35s linear;
}

/* =========================
   TEXTOS – ESTADO NORMAL
========================= */

.class-card .index-tarjeta {
  color: var(--ve);
  font-family: var(--ffc);
  font-size: var(--fs-h6) !important;
  text-transform: uppercase;
  font-weight: var(--fwl-reg);
  transition: color 0.3s ease;
}

.class-card .title-tarjeta {
  color: var(--bl);
  transition: color 0.3s ease;
}

.class-card .content-tarjeta {
  font-size: var(--fs-p-gr) !important;
  line-height: var(--flh1);
  color: var(--bl);
  opacity: .65;
  transition: color 0.3s ease;
}

/* =========================
   ICONOS – BASE
========================= */

.class-card .class-icon {
  width: 40px;
  height: 42px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.2s ease;
}

/* =========================
   ICONOS – NORMAL
========================= */

.class-card .icon-en {
  background-image: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/en_b.svg");
}

.class-card .icon-bu {
  background-image: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/bu_b.svg");
}

.class-card .icon-ki {
  background-image: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/ki_b.svg");
}

.class-card .icon-rz {
  background-image: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/rz-b.svg");
}

/* =========================================================
   ESTADO ACTIVO (controlado por JS)
========================================================= */

.class-card.is-active {
  background-color: var(--ve);
  border-color: var(--ve);
}

/* Textos activos */
.class-card.is-active .index-tarjeta {
  color: var(--ne);
}

.class-card.is-active .title-tarjeta {
  color: var(--ne);
}

.class-card.is-active .content-tarjeta {
  color: var(--ne);
  opacity: 1;
}

/* Iconos activos */
.class-card.is-active .icon-en {
  background-image: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/en_n.svg");
}

.class-card.is-active .icon-bu {
  background-image: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/bu_n.svg");
}

.class-card.is-active .icon-ki {
  background-image: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/ki_n.svg");
}

.class-card.is-active .icon-rz {
  background-image: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/rz_n.svg");
}

/* =========================================================
   CTA VERDE OBS DENTRO DE TARJETA
========================================================= */

/* Estado normal */
.class-card .cta-verde-obs {
  --cta-bg: var(--ve);
  --cta-color: var(--ne);
  --cta-arrow: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/flecha-boton_n_.svg");
}

/* Hover propio del botón */
.class-card .cta-verde-obs:hover {
  --cta-bg: var(--gr-obs) !important;
  --cta-color: var(--bl);
  --cta-arrow: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/flecha-boton_b_.svg");
}

/* Cuando la tarjeta está activa */
.class-card.is-active .cta-verde-obs:not(:hover) {
  --cta-bg: var(--ne);
  --cta-color: var(--bl);
  --cta-arrow: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/flecha-boton_b_.svg");
}

/* =========================================================
   ANIMACIÓN SOLO EN DESKTOP
========================================================= */

@media (hover: hover) and (pointer: fine) {

  .class-card.is-active {
    transform: translateY(-10px) scale(1.001);
    z-index: 10;
  }

}

/* =========================================================
   MÓVIL
   (sin movimiento, solo color)
========================================================= */

@media (max-width: 767px) {

  .class-card {
    transform: none !important;
  }

  .class-card.is-active {
    transform: none !important;
  }

}

/* -----------------------
typed-text-sub (estilo específico para subtítulos animados con Typed.js)
---------------------------*/
.typed-text-sub {
  display: inline-flex !important;
  align-items: flex-start;
  gap: 0.25em;
  font-family: var(--ffc);
  font-size: var(--fs-h5) !important;
  font-weight: var(--fwl-reg);
  text-transform: uppercase;
  line-height: 1.2;
  color: inherit;
  white-space: normal;
  overflow-wrap: break-word;
  position: relative;
  vertical-align: middle;
  min-height: calc(0em * 2) !important;
}

/* Solo activa hover donde tú decidas */
.typed-hover {
  cursor: pointer;
}

.typed-hover .typed-output {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.15em; /* opcional, puedes quitarlo si quieres 100% default */
  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}

.typed-hover:hover .typed-output {
  color: var(--na);
  text-decoration-color: currentColor;
}


/* ==========================================
   POPUP BURN – DESACTIVAR MAX WIDTH DIVI
========================================== */

#burn.popup-overlay .et_pb_row {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#burn.popup-overlay .et_pb_row .et_pb_column {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* -------------------------
   OVERLAY (CONTENEDOR)
-------------------------- */

.popup-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;

  z-index: 999999;

  /* Layout */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Scroll inteligente */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* Estado cerrado */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* Fade sutil */
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* Estado abierto */
.popup-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


@media screen and (min-width: 981px) {
  #et-boc .area-outer-wrap[data-da-type="popup"] {
    width: 100%;
  }
}
#et-boc .area-outer-wrap[data-da-type="popup"] {
  min-width: 320px;
  padding: 0px;
}
#et-boc .area-outer-wrap .da-close.evr-close {
    display: none !important;
}



/* -------------------------
   CONTENIDO REAL DEL POPUP
-------------------------- */

.popup-content {
  position: relative;

  /* Tamaño natural */
  width: 100%;
  max-width: 100%;

  height: auto;

  /* IMPORTANTE:
     El contenido NO scrollea */
  overflow: visible;

  /* Separación visual en mobile */
  margin: 40px 0;
}

/* -------------------------
   BOTÓN CERRAR
-------------------------- */

.popup-close {
  position: absolute;
  top: 20px;
  right: 20px;

  width: 40px;
  height: 40px;

  background: transparent;
  border: none;
  cursor: pointer;

  z-index: 1000000;
}

.popup-close::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/close.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.popup-close::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/close.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 1;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.popup-close:hover::after {
  opacity: 0.5;
  transform: rotate(0deg);
}
/* -------------------------
   BLOQUEO SCROLL BODY
-------------------------- */

html.no-scroll,
body.no-scroll {
  overflow: hidden !important;
  height: 100%;
  touch-action: none;
}

/* ==========================================================
   CONFIGURACIÓN GENERAL — SOLO BOTÓN .b-negro
   ========================================================== */

.et_pb_button.b-negro {
  font-family: var(--ffa);
  font-size: var(--fs-p-nor);
  font-weight: var(--fwl-reg);
  letter-spacing: var(--fls-tags);
  text-transform: uppercase;
  border-radius: 0px;
  border: 1px solid var(--bl);
  padding: 15px 50px 12px 30px !important;
  display: inline-block;
  position: relative;
  text-decoration: none;
  line-height: none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
  background-color: var(--bl);
  color: var(--ne) !important;
  border-color: var(--bl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  animation: bNegroDelayIn 0.4s ease-out forwards;
  animation-delay: 4s; /* ajusta el tiempo de retraso aquí */
}

/* Evitar crecimiento en hover */
.et_pb_button.b-negro:hover {
  padding: 15px 50px 12px 30px !important;
  border-width: 1px !important;
}

/* ==========================================================
   FLECHA — SOLO PARA .b-negro
   ========================================================== */

.et_pb_button.b-negro::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 48%;
  right: 20px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
  transition: transform 0.3s ease;
  background-image: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/flecha-boton_n_.svg");
}

/* Movimiento en hover */
.et_pb_button.b-negro:hover::before {
  transform: translate(3px, -50%);
}

/* ==========================================================
   COLORES EN HOVER — SOLO PARA .b-negro
   ========================================================== */

.et_pb_button.b-negro:hover {
  background-color: var(--ve);
  color: var(--ne) !important;
  border-color: var(--ve);
}

.et_pb_button.b-negro:hover::before {
  background-image: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/flecha-boton_n_.svg");
}


.btn-registro {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: var(--ffa);
    height: 48px;
    padding-left: 30px;
    padding-right: 40px;

    background-color: var(--bl);
    color: var(--ne);
    text-decoration: none;
    cursor: pointer;
    overflow: visible;
}


.btn-registro::after {
    content: "";
    position: absolute;
    top: 0;
  right: -24px;
  width: 28px;
  height: 48px;
    background-color:var(--bl);
    mask: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/lateral.svg") center/contain no-repeat;
    -webkit-mask: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/lateral.svg") center/contain no-repeat;
}

/* HOVER — shape cambia automáticamente */
.btn-registro:hover::after {
    background-color:var(--na);
}


.btn-registro:hover .btn-text::before {
    background-image: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/flecha-boton_n_.svg");
    transform: translateY(-50%) translateX(3px);
}

.btn-registro:hover {
    background-color: var(--na);
    color: var(--bl) !important;
}


.css-rln4gi {

  font-family: var(--ffc) !important;
  color: var(--bl)  !important;
  text-transform: uppercase  !important;
  font-size: var(--fs-h6) !important;
  text-decoration: none !important;
  font-weight:  var(--fwl-reg) !important;
}

/* =========================================
   FITCO LINK – ESTILO BASE
========================================= */

.popup-overlay .css-rln4gi {

  font-family: var(--ffc) !important;
  font-size: var(--fs-h6) !important;
  font-weight: var(--fwl-reg) !important;
  text-transform: uppercase !important;

  color: var(--bl) !important;
  text-decoration: none !important;

  background-color: transparent !important;
  border: 1px solid var(--bl) !important;
  border-radius: 0 !important;

  padding: 12px 24px !important;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease !important;
}


/* =========================================
   FITCO 
========================================= */

/*fitco propiedades */
  .calendar-background-gradient {
  margin-bottom: 30px !important;
}
  .calendar-tags {
  gap: 40px !important;
  margin-bottom: 34px;
}
.calendar-today {
  font-weight: var(--fwl-reg) !important;
  color: var(--fitco-calendar-title-color);
}
.css-8d2ims {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: var(--flh1) !important;
  letter-spacing: none !important;
  color: var(--ne) !important;
  box-sizing: border-box;
  cursor: text;
  border-radius: 0px !important;
}
.MuiSelect-select {
  color: var(--ne) !important;
  background-color: var(--bl) !important;
  font-family: var(--ffb) !important;
}
.MuiGrid-root {
  margin-bottom: 5px;
}
.calendar-filter-classes {
  padding-bottom:0px  ;
  font-family: var(--ffc);
}
.calendar-card {
  padding: 1rem;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
  max-height: 400px;
  margin-bottom: 1rem !important;
  border: 0px solid var(--fitco-calendar-subtitle-color);
  cursor: pointer;
  background-color: var(--ve);
}
.calendar-name-lesson {
  font-weight: var(--fwl-reg) !important;
  color: var(--fitco-calendar-title-color);
}
.calendar-name-lesson {
  font-weight: var(--fwl-reg) !important;
  color: var(--ne) !important;
  font-family: var(--ffc);
  font-size: var(--fs-p-gr) !important;
  line-height: var(--flh1);
  text-transform: uppercase;
  letter-spacing: 0px !important;
  min-height: 3em;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.5em;
}
.calendar-instructor {
  font-weight: var(--fwl-reg);
  color: var(--ne) !important;
  font-family: var(--ffb);
  font-size: var(--fs-p-nor) !important;
  line-height: var(--flh1);
  opacity: .65;
  margin-bottom: 20px;
}
.calendar-card {
  border: 0px solid var(--fitco-calendar-subtitle-color) !important;
  border: 0px solid #bbb !important;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0) !important;
}
.MuiBox-root.css-yo4n65 {
  border: 0px solid var(--fitco-sign-in-subtitle-color);
}

.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input.MuiOutlinedInput-input.css-qiwgdb {
  border-radius: 0px !important;
}
.signin-submit-button {

  background-color: var( --fitco-sign-in-submit-button-background-color ) !important;
  border-radius: 0px !important;
  font-family: var(--ffc);
  line-height: 1.75;
  padding: 6px 16px;
  border-radius: 0px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 0px;
}
.signin-subtitle {
  color: var(--fitco-sign-in-subtitle-color) !important;
  margin-bottom: var(--fitco-sign-in-subtitle-margin-bottom) !important;
  font-weight: var(--fwl-reg);
  color: var(--ne) !important;
  font-family: var(--ffb);
  font-size: var(--fs-p-gr) !important;
  line-height: var(--flh1);
}
.css-1lep2g7 {
  -moz-box-align: center;
  align-items: center;
  -moz-box-pack: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  outline: 0px;
  border: 0px;
  margin: 0px;
  cursor: pointer;
  user-select: none;
  appearance: none;
  text-transform: none;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.02857em;
  border-radius: 4px;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0px 3px;
  vertical-align: initial;
  color: var(--fitco-sign-in-submit-button-background-color);
  background-color: transparent !important;
  display: inline-block;
  font-size: 1rem;
  min-width: auto;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
  text-decoration-color: inherit;
  font-family: var(--fitco-sign-in-font),"Roboto","Helvetica","Arial",sans-serif;
}
.MuiButton-text {
  font-family: var(--ffb);
}
.MuiOutlinedInput-notchedOutline.css-igs3ac{
  font-family: var(--ffb);
  border: 0px;
}
.MuiInputBase-input {
  border: 0px;
}
.MuiSelect-select {
  border-radius: 0px;
}
#calendarClearButton {
  border-radius: 0px;
}
.signin-container {
  background-color: var(--fitco-sign-in-container-background-color) !important;
  padding: var(--fitco-sign-in-container-padding) !important;
  border-radius: var(--fitco-sign-in-container-border-radius) !important;
  box-shadow: 0px 4px 6px var(--fitco-sign-in-container-box-shadow-color) !important;
  font-family: var(--ffb) !important;
}
.css-1i34yem {
  padding: 30x 30px 30px;
  background: #CBCBCB !important;
  border-radius: 0px !important;
}
.profile-empty-state p {
  margin-bottom: 20px;
  opacity: .7;
  color: var(--fitco-sign-in-submit-button-color);
  text-align: center;
}
label {
  font-size: var(--fs-h6);
  color: var(--ne);
  padding-bottom: 0px;
  margin-bottom: 0px !important;
}

.popup-overlay .css-rln4gi:hover {

  background-color: var(--bl) !important;
  color: var(--ne) !important;
  border-color: var(--bl) !important;

  text-decoration: none !important;
}
.css-1bp1ao6 {
  font-family: var(--ffb) !important;
  font-weight:var(--fwl-reg) !important;
  font-size: 1rem;
  line-height: 1.4375em;
  letter-spacing: 0.00938em;
  color: rgba(0, 0, 0, 0.87);
  box-sizing: border-box;
  cursor: text;
  display: inline-flex;
  -moz-box-align: center;
  align-items: center;
  width: 100%;
  position: relative;
  border-radius: 0px !important;
}
.css-qc87zd input:autofill {
  box-shadow: 0 0 0 1000px var(--bl) inset !important;
  -webkit-text-fill-color: var(--fitco-sign-in-subtitle-color);
}
input.text, input.title, input[type="email"], input[type="password"], input[type="tel"], input[type="text"], select, textarea {
  background-color: #fff;
  border: 0px solid #bbb !important;
  padding: 2px;
  color: #4e4e4e;
}
.css-1ald77x {
  color: rgba(0, 0, 0, 0.6);
  font-family: var(--ffb) !important;
  font-weight: var(--fwl-reg) !important;
  transform: translate(0px, -20px) scale(0.75) !important;
}


.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-containedPrimary.MuiButton-sizeMedium.MuiButton-containedSizeMedium.MuiButton-colorPrimary.MuiButton-fullWidth.signin-submit-button.css-82eml7 {
  font-family: var(--ffb) !important;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 0px !important;
  padding: 12px 16px !important;
  font-family: var(--ffc) !important;
}

.signin-title h1{
  font-family: var(--ffc);
  font-size: var(--fs-h3) !important;
  font-weight: var(--fwl-reg);
  line-height: var(--flh1);
  text-transform: uppercase;
}
.css-9m3zg0 {
  margin: 0px 0px 0.35em;
  margin-bottom: 0.35em;
  font-weight: 400;
  font-size: 2.125rem !important;
  line-height: 1.235;
  letter-spacing: 0px !important;
  color: var(--ne) !important;
  font-family: var(--ffc) !important;  
  font-size: var(--fs-h3) !important;
  font-weight: var(--fwl-reg) !important;
  line-height: var(--flh1) !important;
  text-transform: uppercase !important;
}
.css-1lep2g7 {
  font-family: var(--ffc) !important;  
  font-size: var(--fs-h6) !important;
  font-weight: var(--fwl-reg) !important;
  line-height: var(--flh1) !important;
  text-transform: uppercase !important;
}
.MuiTypography-root.MuiTypography-h4.MuiTypography-gutterBottom.signin-title.css-9m3zg0 {
  font-family: var(--ffc);
  font-size: var(--fs-h3) !important;
  font-weight: var(--fwl-reg);
  line-height: var(--flh1);
  text-transform: uppercase;
}
.css-1b1rfkc {
  -moz-box-pack: center !important;
  justify-content: center !important;
}
css-yo4n65 {
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 0px !important;
  border: 0px solid var(--fitco-sign-in-subtitle-color) !;
}
.css-rln4gi:hover {
  color: var(--fitco-sign-in-submit-button-background-color) !important;
  color: var(--ne) !important;
}
.css-1p1xh3f {
  cursor: pointer;
  font-family: var(--ffc) !important;
  font-size: var(--fs-h6) !important;
  font-weight: var(--fwl-reg) !important;
  line-height: var(--flh1) !important;
  text-transform: uppercase !important;
  letter-spacing: 0px !important;
  color: rgb(25, 118, 210);
}
.MuiTypography-root.MuiTypography-body1.MuiTypography-alignCenter.MuiTypography-paragraph.css-1fxcex6 {
  font-weight: var(--fwl-reg) !important;
  font-size: var(--fs-h6) !important;
  line-height: var(--flh1) !important;
  letter-spacing: 0px !important;
  text-transform: uppercase !important;
  text-align: center;
  font-family: var(--ffc) !important;
}
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary.MuiButton-sizeMedium.MuiButton-textSizeMedium.MuiButton-colorPrimary.css-1bitck3 {
  font-weight: var(--fwl-reg) !important;
  font-size: var(--fs-h6) !important;
  line-height: var(--flh1) !important;
  letter-spacing: 0px !important;
  text-transform: uppercase !important;
  text-align: center;
  font-family: var(--ffc) !important;
}
.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation8.MuiPopover-paper.MuiMenu-paper.css-pwxzbm {
  border-radius: 0px !important;
}
.MuiTypography-root.MuiTypography-body1.css-7zap3e {
  font-size: var(--fs-h6);
}
.cta-blanco-outline:hover a {
  color: var(--ne) !important;
}
.cta-blanco-outline:hover .MuiTypography-root.MuiTypography-body1 {
  color: var(--ne) !important;
}
.plans-container.card-container {
  width: 100% !important;
  background-color: #cbcbcb;
}

/* ==========================================================
   ANIMACIÓN DE ENTRADA — RETRASO BOTÓN .b-negro
   ========================================================== */

@keyframes bNegroDelayIn {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(0px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
.blur-bg {
  background-color: var(--translu);
	backdrop-filter: blur(3px);
}
/* =========================================================
   FITCO – REEMPLAZO AVATAR INICIAL POR SVG
========================================================= */

.user-accounts-link .MuiAvatar-root {
  font-size: 0 !important;
  color: transparent !important;
  position: relative;
}

.user-accounts-link .MuiAvatar-root::before {
  content: "";
  position: absolute;
  inset: 0;

  background-color: var(--ve); /* color normal */

  mask: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/user.svg")
        center / contain no-repeat;
  -webkit-mask: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/user.svg")
        center / contain no-repeat;

  transition: background-color 0.25s ease;
}
.MuiTypography-root.MuiTypography-body1.css-7zap3e:hover {
  color: var(--ne) !important;
}
.user-accounts-link.cta-blanco-outline:hover 
.MuiAvatar-root::before {
  background-color: var(--ne); /* color hover */
}
.MuiButtonBase-root.MuiMenuItem-root.MuiMenuItem-gutters.css-1km1ehz:hover {
  background-color:var(--ve) !important;
}
#user-menu .MuiPaper-root {
  max-width: none !important;
}
/* Centrar texto dentro del dropdown */
#user-menu .MuiMenuItem-root {
  justify-content: center !important;
  text-align: center !important;
  font-family: var(--ffc);
  font-size: var(--fs-h6) !important;
  text-transform: uppercase;
}

/* Por si MUI envuelve el texto en Typography */
#user-menu .MuiTypography-root {
  text-align: center !important;
  width: 100%;
}
.MuiAvatar-root.MuiAvatar-circular.MuiAvatar-colorDefault.css-1llrwy8 {
  width: 30px;
  height: 30px;
  background-color:var(--transp);
}

.profile-modal.card-view.MuiBox-root.css-1p9wdpv {
  min-width: 80% !important;
  max-height: auto !important;
  min-height: 80vh !important;
  border: 0px !important;
}

.MuiTypography-root.MuiTypography-h5.css-xr4rwb {
  font-family: var(--ffc);
  font-size: var(--fs-h3) !important;
  font-weight: var(--fwl-reg);
  line-height: var(--flh1);
  text-transform: uppercase;
}
.MuiTypography-root.MuiTypography-subtitle1.css-1qot2el {
  font-family: var(--ffc);
  font-size: var(--fs-h5) !important;
  font-weight: var(--fwl-reg);
  line-height: var(--flh1);
  text-transform: uppercase;
}
/* TODAS las tabs */
.MuiTab-root {

  font-family: var(--ffc) !important;
  font-size: var(--fs-h6) !important;
  font-weight: var(--fwl-reg) !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}
.MuiTab-root.Mui-selected {
  color: var(--ne) !important;
  opacity: 1;
  font-weight:var(--fwl-reg) !important;
  border-bottom-color: transparent;
  background-color:var(--ve);
  letter-spacing:none !important;
}
.MuiButtonBase-root.MuiTab-root.MuiTab-textColorPrimary.Mui-selected.css-no14db {
  color: var(--bl) !important;
  background-color: var(--gr-b);
  border-color: var(--gr-5);
  opacity: 1 !important;
}
.profile-content.card-view.MuiBox-root.css-0 {
  background-color: var(--gr-b) !important;
  color: var(--fitco-sign-in-submit-button-color);
}
.MuiTabs-indicator.css-ttwr4n {
  background-color: var(--gr-5) !important;
  height: 0px !important;
}
.css-1m262mc .MuiTabs-indicator {
  background-color: var(--fitco-sign-in-submit-button-background-color);
  height: 3px;
}
.MuiTabs-root.css-1rdlb0x {
    margin-bottom: 0px;
}
.profile-section-header h6 {
  font-family: var(--ffc) !important;
  font-size: var(--fs-h5) !important;
  font-weight: var(--fwl-reg) !important;
  line-height: var(--flh1)  !important;
  text-transform: uppercase;
  color: var(--bl) !important;
  margin-top: 40px !important;
}
.profile-empty-state h6 {
  margin-bottom: 12px;
  font-weight:var(--fwl-reg) !important;
  color: var(--bl) !important;
  letter-spacing:none !important;
}
.profile-empty-state p {
  margin-bottom: 20px;
  opacity: 1!important;
  color: var(--gr) !important;
  letter-spacing:none !important;
}
.MuiBox-root.css-3ibk0a {
  width: 100%;
  background: var(--gr-cl);
  box-shadow: rgba(0, 0, 0, 0.07) 0px 0px 0px 0px;
  border-radius: 0px;
  padding: 20px;
  margin-bottom: 1px;
  display: flex;
  gap: 30px;
}
.MuiBox-root.css-1w4vxup {
  font-family: var(--ffc) !important;
  font-size: var(--fs-h5) !important;
  font-weight: var(--fwl-reg) !important;
  line-height: var(--flh1)  !important;
  text-transform: uppercase;
  color: var(--ne) !important;
  letter-spacing:none !important;
}
.MuiTypography-root.MuiTypography-body1.css-10sp7w0 {
  font-family: var(--ffc) !important;
  font-size: var(--fs-h5) !important;
  font-weight: var(--fwl-reg) !important;
  line-height: var(--flh1)  !important;
  text-transform: uppercase;
  color: var(--ne) !important;
  letter-spacing:none !important;
}
.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1.MuiCard-root.profile-card.card-view.css-6jakoc {
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0px !important;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 0px !important;
  border: 0px !important;
}
.MuiTypography-root.MuiTypography-h6.css-1bug5c8 {
  margin: 0px 0px 20px;
  font-size: var(--fs-p-gr) !important;
  font-family: var(--ffc) !important;
  font-weight: var(--fwl-reg) !important;
  line-height: var(--flh1)  !important;
  text-transform: uppercase;
  color: var(--ne) !important;
  letter-spacing:0 !important;
}
.MuiChip-root.MuiChip-filled.MuiChip-sizeSmall.MuiChip-colorDefault.MuiChip-filledDefault.css-15tnknl {
  height: 24px;
  border-radius: 16px;
  white-space: nowrap;
  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
  background-color: rgb(76, 175, 80);
  font-family: var(--ffc) !important;
  font-size: var(--fs-h6) !important;
  font-weight: var(--fwl-reg) !important;
  line-height: var(--flh1)  !important;
  text-transform: uppercase;
  color: var(--bl) !important;
  letter-spacing:0 !important;
}
.MuiChip-root.MuiChip-filled.MuiChip-sizeSmall.MuiChip-colorDefault.MuiChip-filledDefault.css-15tnknl {
  padding-left: 6px;
  padding-right: 6px;
  white-space: nowrap;
  padding-bottom: 7px;
  padding-top: 9px;
  cursor: default;
}
.MuiChip-root.MuiChip-filled.MuiChip-sizeSmall.MuiChip-colorDefault.MuiChip-filledDefault.css-j6zx0t {
  height: 24px;
  border-radius: 16px;
  white-space: nowrap;
    padding-left: 6px;
  padding-right: 6px;
  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
  background-color: red !important;
  font-family: var(--ffc) !important;
  font-size: var(--fs-h6) !important;
  font-weight: var(--fwl-reg) !important;
  line-height: var(--flh1)  !important;
  text-transform: uppercase;
  color: var(--bl) !important;
  letter-spacing:0 !important;
}

.MuiButtonBase-root.MuiTab-root.MuiTab-textColorPrimary.css-no14db {
  opacity: 0.7;
  border: 0px solid transparent ! important;
  border-radius: 0px 0px 0px 0px;
  margin-right: 4px;
  transition: 0.3s;
}
.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation0.MuiAlert-root.MuiAlert-colorWarning.MuiAlert-standardWarning.MuiAlert-standard.css-rpl6rv {
}
.css-rpl6rv {
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0px !important;
  box-shadow: none;
  font-family: var(--ffb) !important;
  font-weight: var(--fwl-reg) !important;
  font-size: var(--fs-p-pe) !important;
  letter-spacing: 0px !important;
  display: flex;
  padding: 6px 16px;
  color: var(--bl) !important;
  background-color: var(--na) !important;
  margin-bottom: 30px;
}
.MuiAlert-icon.css-1l54tgj {
  color:var(--bl) !important;
}
.MuiSvgIcon-root.MuiSvgIcon-fontSizeInherit.css-1cw4hi4 {
  width: 35px;
  height: 35px;
  margin-top: 9px;
}
.MuiGrid-root.MuiGrid-item.MuiGrid-grid-xs-12.css-15j76c0 {
  padding-top: 30px;
}
.MuiGrid-root.MuiGrid-item.MuiGrid-grid-xs-6.css-1s50f5r {
  padding-top: 30px;
}
#profile-tabpanel-4 .MuiOutlinedInput-root {
}

#profile-tabpanel-4 .MuiInputBase-input {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  padding-left: 10px !important;
}

.MuiTypography-root.MuiTypography-subtitle2.css-1gr4axz {
  font-family: var(--ffc) !important;
  font-size: var(--fs-p-nor) !important;
  font-weight: var(--fwl-reg) !important;
  line-height: var(--flh1)  !important;
  text-transform: uppercase;
  color: var(--ne) !important;
  letter-spacing:0 !important;
  margin: 0px !important;
  padding-bottom: 5px !important;
}
.MuiTypography-root.MuiTypography-body2.css-uzxhi5 {
  margin: 0px;
  font-family: var(--ffb) !important;
  font-weight: var(--fwl-reg) !important;
  line-height: var(--flh1)  !important;
  letter-spacing: 0.01071em;
  color: var(--ne) !important;
  font-size: var(--fs-p-pe) !important;
}
.profile-content .MuiTab-root.Mui-selected {
  color: var(--bl) !important;
  background-color: var(--gr-5) !important;
  border: 1px solid var(--gr-5) !important;
  opacity: 1 !important;
}
.MuiTabs-root.css-50mrii {
}
.css-50mrii {
  overflow: hidden;
  min-height: 48px;
  display: flex;
  border-bottom: 1px var(--gr-5) !important;
}
.MuiTypography-root.MuiTypography-body2.css-4dsunc {
  margin: 0px;
  font-family: var(--ffb) !important;
  font-weight: var(--fwl-reg) !important;
  line-height: var(--flh1) !important;
  letter-spacing: 0.01071em;
  color: var(--ne) !important;
  font-size: var(--fs-p-pe) !important;
}
.MuiGrid-root.MuiGrid-container.MuiGrid-spacing-xs-2.css-isbt42 {
  background-color: var(--gr);
  margin-left: 0px;
  padding: 10px 30px 30px 16px !important;
  width: 100% !important;
}
.MuiGrid-root.MuiGrid-item.MuiGrid-grid-xs-12.css-15j76c0 {
  padding-left: 16px !important;
}
.MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary.MuiInputBase-fullWidth.MuiInputBase-formControl.MuiInputBase-adornedEnd.MuiAutocomplete-inputRoot.css-segi59 {
    padding: 0px !important;
}
.MuiTabs-root.css-50mrii {
  margin-bottom: 0px!important;
  border-bottom: 1px var(--gr-5) !important;
}
.MuiBox-root.css-j4qnjt {
  padding: 20px;
  margin:0px;
  background-color: var(--gr-5) !important;
}
#profile-tabpanel-1 .MuiTab-root.Mui-selected {
  color: var(--ne) !important;
  background-color: var(--ve) !important;
  border: 1px solid var(--ve) !important;
}
.MuiTypography-root.MuiTypography-subtitle1.css-1vzkrlb {
  margin-top: 12px;
  font-family: var(--ffc) !important;
  font-size: var(--fs-h6) !important;
  line-height: var(--flh1)  !important;
  letter-spacing: 0px !important;
  font-weight: var(--fwl-reg) !important;
  cursor: pointer;
}
.profile-button.card-view, .profile-button.list-view {
  background-color: var(--fitco-sign-in-submit-button-background-color);
  color: var(--fitco-sign-in-submit-button-color);
  border: 1px solid var(--fitco-sign-in-submit-button-background-color);
 
  font-family: var(--ffc) !important;
  font-weight: var(--fwl-reg) !important;
  font-size: var(--fs-h6) !important;
  line-height: var(--flh1)  !important;
  text-transform: uppercase !important;
  letter-spacing: 0px !important;
  padding-top: 18px;
  padding-bottom: 16px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 0px  !important;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1);
  color: rgb(255, 255, 255);
  background-color: rgb(25, 118, 210);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 0px;
}
.profile-button.card-view:hover, .profile-button.list-view:hover {
  background-color: var(--fitco-sign-in-submit-button-color);
  color: var(--bl) !important;
  border-color: var(--fitco-sign-in-submit-button-color);
  text-decoration: none;
  background-color: rgb(21, 101, 192);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 0px;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-containedPrimary.MuiButton-sizeMedium.MuiButton-containedSizeMedium.MuiButton-colorPrimary.css-jgz2ss {
  display: inline-flex;
  -moz-box-align: center;
  align-items: center;
  -moz-box-pack: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  outline: 0px;
  border: 0px;
  margin: 0px;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  appearance: none;
  text-decoration: none;
  font-family: var(--ffc) !important;
  font-size: var(--fs-h6) !important;
  font-weight: var(--fwl-reg) !important;
  line-height: var(--flh1)  !important;
  text-transform: uppercase !important;
  color: var(--ne) !important;
  letter-spacing:none !important;
  height: 44px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  border-radius: 0px !important;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
  background-color: var(--fitco-sign-in-submit-button-background-color);
  color: var(--fitco-sign-in-submit-button-color);
}
.MuiTypography-root.MuiTypography-body1.css-ogk82t {
  color: rgb(51, 51, 51);
  line-height: 16px;
  margin: 0px 5px 3px 0px;
  font-family: var(--ffb);
  letter-spacing: 0px !important;
  font-size: var(--fs-p-pe);
  font-weight: var(--fwl-reg);
}
.MuiChip-root.MuiChip-filled.MuiChip-sizeSmall.MuiChip-colorDefault.MuiChip-filledDefault.css-zb7o0q {
  max-width: 100%;
  font-family: var(--ffc) !important;
  font-size: var(--fs-h6) !important;
  font-weight: var(--fwl-reg) !important;
  line-height: var(--flh1)  !important;
  text-transform: uppercase;
  color: var(--bl) !important;
  padding-bottom: 1px;
  padding-top: 4px;
  cursor:default;
}
.MuiChip-root.MuiChip-filled.MuiChip-sizeSmall.MuiChip-colorDefault.MuiChip-filledDefault.css-1ng7i1j {
  max-width: 100%;
  font-family: var(--ffc) !important;
  font-size: var(--fs-h6) !important;
  font-weight: var(--fwl-reg) !important;
  line-height: var(--flh1)  !important;
  text-transform: uppercase;
  color: var(--bl) !important;
  padding-bottom: 1px;
  padding-top: 4px;
  cursor:default;
}
.MuiChip-root.MuiChip-filled.MuiChip-sizeSmall.MuiChip-colorDefault.MuiChip-filledDefault.css-2hzh28 {
  max-width: 100%;
  font-family: var(--ffc) !important;
  font-size: var(--fs-h6) !important;
  font-weight: var(--fwl-reg) !important;
  line-height: var(--flh1)  !important;
  text-transform: uppercase;
  color: var(--bl) !important;
  padding-bottom: 1px;
  padding-top: 4px;
  cursor:default;
}
.MuiChip-root.MuiChip-filled.MuiChip-sizeSmall.MuiChip-colorDefault.MuiChip-filledDefault.css-16eq71l {
  max-width: 100%;
  font-family: var(--ffc) !important;
  font-size: var(--fs-h6) !important;
  font-weight: var(--fwl-reg) !important;
  line-height: var(--flh1)  !important;
  text-transform: uppercase;
  color: var(--bl) !important;
  padding-bottom: 1px;
  padding-top: 4px;
  cursor:default;
}
.MuiChip-root.MuiChip-filled.MuiChip-sizeSmall.MuiChip-colorDefault.MuiChip-filledDefault.css-1p04yd6 {
  font-family: var(--ffc) !important;
  font-size: 12px !important;
  font-weight: var(--fwl-reg) !important;
  line-height: var(--flh1)  !important;
  text-transform: uppercase;
  color: var(--bl) !important;
  padding-bottom: 1px;
  padding-top: 3px;
  margin-top: -4px;
  cursor:default;
}
.MuiTypography-root.MuiTypography-body1.css-1xfh8fh {
  font-family: var(--ffc) !important;
  font-size: 12px !important;
  font-weight: var(--fwl-reg) !important;
  line-height: var(--flh1) !important;
  text-transform: uppercase;
  color: var(--ne) !important;
  padding-bottom: 10px;
  padding-top: 3px;
  cursor: default;
}
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary.MuiButton-sizeMedium.MuiButton-textSizeMedium.MuiButton-colorPrimary.css-188deuc {
  font-family: var(--ffc) !important;
  font-weight: var(--fwl-reg) !important;
  line-height: var(--flh1) !important;
  letter-spacing: 0px !important;
  min-width: 64px;
  padding: 20px 20px 18px 20px;
  border-radius: 0px;
  font-size: var(--fs-h6) !important;
  width: auto !important;
  height: 30px;
  min-height: 0px;
  background-color: var(--ne) !important;
  color: var(--bl) !important;
}
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary.MuiButton-sizeMedium.MuiButton-textSizeMedium.MuiButton-colorPrimary.css-188deuc:hover {
  font-family: var(--ffc) !important;
  font-weight: var(--fwl-reg) !important;
  line-height: var(--flh1) !important;
  letter-spacing: 0px !important;
  min-width: 64px;
  padding: 20px 20px 18px 20px;
  border-radius: 0px;
  font-size: var(--fs-h6) !important;
  width: auto !important;
  height: 30px;
  min-height: 0px;
  background-color: var(--ve) !important;
  color: var(--ne) !important;
}
.css-1bwqmd1 {
  font-family: var(--ffc) !important;
  font-weight: var(--fwl-reg) !important;
  letter-spacing: 0px !important;
  border-radius: 0px !important;
  font-size: var(--fs-h6) !important;
  color: var(--ne) !important;
  opacity: .65 !important;
  line-height: var(--flh1) !important;
  text-transform: uppercase !important;
}
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary.MuiButton-sizeMedium.MuiButton-textSizeMedium.MuiButton-colorPrimary.css-1bwqmd1 {
  margin-top: 11px !important;
}
.MuiTypography-root.MuiTypography-body1.css-1voctps {
  margin: 0px;
  font-family:var(--ffc) !important;
  font-weight: var(--fwl-reg) !important;
  line-height: var(--flh1) !important;
  letter-spacing: 0px !important;
  color: var(--ne) !important;
  font-size: var(--fs-h6) !important;
  text-transform: uppercase;
  background-color: var(--ve) !important;
  padding: 10px 16px;
  border-radius: 0px !important;  
}
.MuiBox-root.css-22v7jx {
  position: relative;
  background-color: rgb(255, 255, 255);
  padding: 32px;
  outline: none;
  font-family: var(--ffb);
  width: 400px;
  border-radius: 0px;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 0px !important;
}
.text-center.secondary-message {
  font-family: var(--ffb) !important;
  font-weight: var(--fwl-reg) !important;
  font-size: var(--fs-p-nor) !important;
  line-height: var(--flh1) !important;
  letter-spacing: 0px !important;
  color: var(--ne) !important;
  text-align: center;
  margin-bottom: 20px;
 } 
 .MuiTypography-root.MuiTypography-h6.primary-message.css-79tooc {
  font-family: var(--ffc);
  font-size: var(--fs-h5) !important;
  font-weight: var(--fwl-reg);
  line-height: var(--flh1);
  text-transform: uppercase;
  letter-spacing: 0px !important;
  margin-top: 40px;
  margin-bottom: 10px;
  color: var(--ne);
}
.MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-outlinedPrimary.MuiButton-sizeMedium.MuiButton-outlinedSizeMedium.MuiButton-colorPrimary.css-k9tc3f {
  margin: 0px 30px 0px 0px;
  text-decoration: none;
  text-transform: uppercase !important;
  font-weight: var(--fwl-reg) !important;
  font-size: var(--fs-h6) !important;
  line-height: var(--flh1);
  letter-spacing: 0px !important;
  min-width: 64px;
  padding: 5px 15px;
  border-radius: 0px !important;
  color: var(--ve) !important;
  background-color: var(--ne) !important;
  border: 0px solid !important;
  font-family: var(--ffc) !important;
}
.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-containedPrimary.MuiButton-sizeMedium.MuiButton-containedSizeMedium.MuiButton-colorPrimary.css-mor18e {
  margin: 0px 30px 0px 0px;
  text-decoration: none;
  text-transform: uppercase !important;
  font-weight: var(--fwl-reg) !important;
  font-size: var(--fs-h6) !important;
  line-height: var(--flh1);
  letter-spacing: 0px !important;
  min-width: 64px;
  padding: 15px 20px;
  border-radius: 0px !important;
  color: var(--ne) !important;
  background-color: var(--ve) !important;
  border: 0px solid !important;
  font-family: var(--ffc) !important;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 0px !important;
}
.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation24.MuiDialog-paper.MuiDialog-paperScrollPaper.MuiDialog-paperWidthXs.MuiDialog-paperFullWidth.css-wzexkd {
  color: rgba(0, 0, 0, 0.87);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 0px !important;
  margin: 32px;
  position: relative;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  max-height: calc(100% - 64px);
  max-width: 500px;
  width: calc(100% - 64px);
  border-radius: 0px !important;
  padding: 16px !important;
  background: var(--fitco-background-color, #ffffff);
}
.MuiDialog-paperWidthXs #modal-title {
  text-align: center !important;
  font-family: var(--ffc) !important;
  text-transform: uppercase !important;
  font-size: var(--fs-h5) !important;
  color: var(--ne) !important;
  font-weight: var(--fwl-reg) !important;
  letter-spacing: 0px !important;
  line-height: var(--flh2) !important;
}
.MuiDialog-paperWidthXs #modal-description {
  text-align: center !important;
  font-family: var(--ffb) !important;
  font-size: var(--fs-p-nor) !important;
  color: var(--ne) !important;
  font-weight: var(--fwl-reg) !important;
  letter-spacing: 0px !important;
  line-height: var(--flh2) !important;
}
.MuiButtonBase-root.MuiMenuItem-root.MuiMenuItem-gutters.css-19sxtc6  {
  font-weight: var(--fwl-reg) !important;
  font-size: var(--fs-p-pe) !important;
  line-height:var(--flh1) !important;
  color: var(--ne);
  background-color: var(--bl) !important;
  font-family: var(--ffb) !important;
}
.MuiButtonBase-root.MuiMenuItem-root.MuiMenuItem-gutters.css-19sxtc6:hover {
  color: var(--bl) !important;
  background-color: var(--gr-5) !important;
}
.MuiBox-root.css-c4p50z {
  margin-bottom: 40px;
}
.plan-card-title {
  font-weight: var(--fwl-reg) !important;
  color: var(--ne) !important;
  font-family: var(--ffc);
  font-size: var(--fs-h4) !important;
  line-height: var(--flh1);
  text-transform: uppercase;
  letter-spacing: 0px !important;
  min-height: 40px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.5em;
}
.plan-card-payment-type {
  font-weight: var(--fwl-reg);
  color: var(--ne) !important;
  font-family: var(--ffb);
  font-size: var(--fs-p-nor) !important;
  line-height: var(--flh1);
  opacity: .65;
  margin-bottom: 20px;
}
.plan-card {
  background-color: var(--fitco-plans-card-container-background-color);
  box-sizing: border-box;
  padding: 20px !important;
  color: var(--fitco-plans-card-description-color);
  border-radius: 0px !important;
  box-shadow: 0px 0px 0px rgba(0,0,0,0) !important;
  width: 100%;
  max-width: 350px;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  height: 100%;
}


.plan-card .plan-card-header .plan-card-price-section {
  font-size: 20px;
  font-weight: bold;
  color: var(--fitco-plans-card-description-color);
  margin: 0;
}
.plan-card-price-section {
  font-weight: var(--fwl-reg) !important;
  color: var(--ne) !important;
  font-family: var(--ffb);
  font-size: var(--fs-h3) !important;
  line-height: var(--flh1);
  text-transform: uppercase;
  letter-spacing: 0px !important;
}

/* =====================================
   CONTACT FORM 7 - CAMPOS
   ===================================== */

/* Campos de texto, email, tel, etc. dentro de CF7 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="password"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
max-width: 100%;
box-sizing: border-box;
margin-bottom: 5px;
background-color: transparent;
border: none !important;
border-bottom: 1px solid var(--ne) !important;
padding-bottom: 0px;
padding-left: 0px;
padding-top: 0px;
color: var(--gr-obs) !important;
font-size: var(--fs-p-pe);
font-family: var(--ffb);
}
.wpcf7-form-control.wpcf7-acceptance {
  font-size: var(--ffc) !important;
  font-weight: var(--fwl-reg) !important;
  font-size: var(--fs-h6) !important;
}
.uacf7-row {
  margin-bottom: 20px;
  padding-bottom: 10px;
}

/* Ajuste responsivo: en móviles ocupa todo el ancho */
@media (max-width: 480px) {
  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="password"],
  .wpcf7 input[type="tel"],
  .wpcf7 select,
  .wpcf7 textarea {
    width: 100%;
  }
}

/* Etiquetas */
.wpcf7-form label {
  font-weight: var(--fwl-reg);
  font-family: var(--ffc);
  margin-bottom: 15px;
  text-transform: uppercase;
  color: var(--ne ) !important;
}

/* =============================
   UACF7 Country Select
   ============================= */
#uacf7_country_select .country-select,
#uacf7_country_select .country-select .wpcf7-uacf7_country_dropdown {
  width: 100%;
  max-width: 310px;
}

.country-select.inside input,
.country-select.inside input[type="text"] {
  padding-right: 6px;
  padding-left: 52px;
  margin-left: 0;
  margin-bottom: 10px !important;
}

.country-select .flag-dropdown {
  top: -10px;
}

.country-select.inside .flag-dropdown:hover .selected-flag {
  background-color: var(--transp);
}

/* =====================================
   MENSAJES DE RESPUESTA
   ===================================== */
.wpcf7 form .wpcf7-response-output {
  padding: 1em 1em !important;
  margin: 20px 0 0;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  border-color: #ffb900;
  background-color: #ffb900;
  font-size: var(--fs-h6);
  font-weight: var(--fwl-reg);
  font-family: var(--ffc);
  text-transform: uppercase;
}
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output {
  border-color: #46b450;
  font-size: var(--fs-h6);
  font-weight: var(--fwl-reg);
  font-family: var(--ffc);
  color: var(--ne);
}

.wpcf7-not-valid-tip {
  color: #dc3232;
  font-size: var(--fs-h6);
  font-weight: var(--fwl-reg);
  font-family: var(--ffc);
  display: block;
}

.wpcf7 form.sent .wpcf7-response-output {
  background-color: #46b450;
 font-size: var(--fs-h6);
  font-weight: var(--fwl-reg);
  font-family: var(--ffc);
  color: var(--ne);
}

/* =====================================
   SPINNER
   ===================================== */
.wpcf7-spinner {
  visibility: hidden;
  display: inline-block;
  background-color: var(--az);
  opacity: 1;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 100%;
  padding: 0;
  margin: -10px 10px;
  position: relative;
}

/* =====================================
   BOTÓN DE ENVÍO
   ===================================== */
.wpcf7-form-control.wpcf7-submit.has-spinner {
  font-size: var(--fs-h6);
  font-weight: var(--fwl-reg);
  font-family: var(--ffc);
  text-transform: uppercase;
  line-height: 1em;
  background-color: var(--ne);
  color: var(--bl) !important;
  border-radius: 0;
  border: 1px solid var(--az);
  padding: 15px 25px 15px 25px !important;
  margin-top: 15px;
  display: inline-block;
  position: relative;
  text-decoration: none;
  transition: background-color 0.3s ease;
  opacity: 1;
  cursor: pointer;
}

.wpcf7-form-control.wpcf7-submit.has-spinner:hover {
  background-color: var(--na);
  color: var(--bl) !important;
  transition: background-color 0.3s ease;
}
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output {
  font-weight: var(--fwl-bol);
  margin-bottom: 15px;
  text-transform: uppercase;
}

.wpcf7-list-item {
  display: inline-block;
  margin: 0 0 0 0em;
}
.wpcf7-form-control.wpcf7-submit.has-spinner {
  font-family: var(--ffc) !important;
  font-size: var(--fs-h6) !important;
    font-weight: var(--fwl-reg) !important;
  text-transform: uppercase !important;
}

/* =========================================================
   7. LAYOUT Y UTILIDADES
========================================================= */
.vertical {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.bottom {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.et_pb_row {
    max-width: 100% !important;
}
.et_pb_section {
  background-color: transparent;
}

.et_pb_section.has-background {
  background-color: unset;
}
/* =========================================================
   8. EFECTOS Y ANIMACIONES
========================================================= */


.et_pb_preload, .et_pb_section.et_pb_section_video.et_pb_preload {
  position: relative;
  background: var(--ne) !important;
}
.et_pb_preload::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: url(https://agenciapart.mx/x/wp-content/themes/Divi/includes/builder/styles/images/preloader.gif) no-repeat;
  border-radius: 32px;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  display: none !important;
}

 /* Fade effect overlay-*/
 .animate {
   animation: fader 8s infinite linear;
 }

 @-webkit-keyframes fader {
   0% {
     opacity: 0;
   }

   80% {
     opacity: 0;
   }

   100% {
     opacity: 1;
   }
 }
 .effect::after {
     animation: grain 6s steps(10) infinite;
     background-image: url('https://subgrafica.com/data/img/grain.png');
     background-repeat: repeat;
     content: '';
     height: 300%;
     left: -100%;
     opacity: .04;
     pointer-events: none;
     position: fixed;
     top: -100%;
     transition: opacity 0.4s ease;
     width: 300%;
     will-change: transform;
     z-index: 3;
   }

 @keyframes grain {
   0% { transform: translate(20%, -15%) }
   10% { transform: translate(-20%, -15%) }
   20% { transform: translate(20%, -5%) }
   30% { transform: translate(-20%, -5%) }
   40% { transform: translate(20%, 5%) }
   50% { transform: translate(-20%, 5%) }
   60% { transform: translate(20%, 15%) }
   70% { transform: translate(-20%, 15%) }
   80% { transform: translate(20%, 5%) }
   90% { transform: translate(-20%, 5%) }
   100% { transform: translate(20%, -5%) }
 }

 /*  animation: fade-object 0.8s ease-out 0.2s forwards;
  transition: background 0.3s ease, transform 0.3s ease; */

 @keyframes fade-object {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* ============================
   MEDIA QUERIES DEFINITIVOS
============================ */

/* 1. Mundo móvil (tablets verticales + celulares) */
@media (max-width: 880px) {
  .wpcf7-form label {
  margin-bottom: 25px;
}
  .et_animated {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
}
@media (max-width: 880px) {

  .bg-bar {
    background-color: rgba(30, 30, 30, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

}

/* 2. Todo hasta desktop mediano (incluye tablets horizontales y laptops pequeñas) */
@media (max-width: 1365px) {
  /* estilos para pantallas <= 1365px */
}

/* 3. Desktop grande en adelante */
@media (min-width: 1366px) {
  /* estilos para pantallas >= 1366px */
}

@media (max-width: 767px) {
  .class-card {
    min-height: 45vh !important;
  }


  .class-card,
  .class-card:hover {
    background-color: var(--ne) !important;
    border-color: rgba(255,255,255,0.4) !important;
    transform: none !important;
    transition: none !important;
  }

  /* =========================
     TEXTOS: SIN CAMBIO
  ========================= */

 .class-card .index-tarjeta {
    color: var(--ve) !important;
  }
  .class-card .title-tarjeta,
  .class-card .content-tarjeta {
    color:var(--bl) !important;
    background-color: var(--ne) !important;
  }
  

  .class-card:hover .index-tarjeta,
  .class-card:hover .title-tarjeta,
  .class-card:hover .content-tarjeta,
  .class-icon {
    color:var(--bl) !important;
  }
  .class-card:hover .icon-en {
    background-image: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/en_b.svg");
  }

  .class-card:hover .icon-bu {
    background-image: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/bu_b.svg");
  }

  .class-card:hover .icon-ki {
    background-image: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/ki_b.svg");
  }
  .class-card:hover .icon-rz {
    background-image: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/rz-b.svg");
  }
  /* CTA — CAMBIO POR HOVER DE TARJETA (NO hover del botón) */
  .class-card:hover .cta-verde-obs:not(:hover) {
    --cta-bg: var(--ve-hover);
    --cta-color: var(--ne);
    --cta-arrow: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/flecha-boton_n_.svg");
  }

}