/* ============================================================
===ESTILOS DE MAQUETACIÓN GENERAL===
===============================================================*/
*{
    margin:0;
    padding: 0;
}
html {
  scroll-behavior: smooth;
}

:root {
    --color-azul-1: #00668e;   /* Azul principal */
    --color-gris-1: #f0f1f5;
    --color-gris-2: #627284;
    --color-gris-3: rgba(0, 0, 0, 0.08);
    --color-verde-1: #00BAA4;
    --color-rojo-1: #fb0059;   
    --color-negro: #000;
    --color-blanco: #ffffff;    
    /*===MARGENES===*/
    --mt: 0px;
    --mr: 0px;
    --mb: 0px;
    --ml: 0px;
    --mtm: 0px;
    --mrm: 0px;
    --mbm: 0px;
    --mlm: 0px;
    /*===RELLENOS===*/
    --pg: 0pg;
    --pt: 0px;
    --pr: 0px;
    --pb: 0px;
    --pl: 0px;
    --pgm: 0px;
    --ptm: 0px;
    --prm: 0px;
    --pbm: 0px;
    --plm: 0px;
    /*===TAMAÑO DEFUENTE===*/
    --tamano-letra-pc: 0px;
    --tamano-letra-movil: 0px;
    /*===ANCHOS Y ALTOS===*/
    --ancho-var-pc: 0px;
    --ancho-var-movil: 0px;
    --alto-var-pc: 0px;
    --alto-var-movil: 0px;
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--color-gris-2);

}
p {
    font-size: 16px;
     margin-bottom: 20px ;
}
a {
    text-decoration: none;
    color:var(--color-verde-1) ;
}
@media (max-width: 767px) {
.br-pc{
    display: none;
}
}
h1{
    font-size: 35px;
    line-height: 1.3em;
}
h2 {
     font-size: 25px;
    line-height: 1.3em;
}
h3 {
     font-size: 17px;
    line-height: 1.3em;
}

@media (max-width: 767px) {
    h1{
    font-size: 25px;
    }
    h2 {
     font-size: 22px;
    }
    h3 {
     font-size: 19px;
    }
}
ul {
  list-style-position: inside;
  margin-bottom: 20px;
}
.logo-artefox{
    display: block;
    margin: auto;
    max-width: 200px;
}
@media (max-width: 767px) {
.logo-artefox{
    display: block;
    margin: auto;
    max-width: 130px;
}
}
/*===FLEX GENERAL===*/

/* Activar flex */
.flex {
  display: flex;
}

/* Dirección */
.flex-fila {
  flex-direction: row;
}

.flex-columna {
  flex-direction: column;
}

/* Alineación horizontal (justify-content) */
.justificar-inicio {
  justify-content: flex-start;
}

.justificar-centro {
  justify-content: center;
}

.justificar-fin {
  justify-content: flex-end;
}

.justificar-around {
  justify-content: space-around;
}

.justificar-between {
  justify-content: space-between;
}

/* Alineación vertical (align-items) */
.alinear-inicio {
  align-items: flex-start;
}

.alinear-centro {
  align-items: center;
}

.alinear-fin {
  align-items: flex-end;
}

/* Permitir que los elementos se envuelvan si hay poco espacio */
.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

/* Opción de crecer y ocupar el espacio */
.flex-1 {
  flex: 1;
}

/*===ESTILOS DE GRID===*/
.grid-fx {
    display: grid;
}

.gid-inline-fx{
    display: inline-grid;
}

@media (min-width: 767px) {
    .grid-2-fx {
    grid-template-columns: 1fr 1fr;
    }
    .grid-3-fx {
    grid-template-columns: 1fr 1fr 1fr;  
    }
    .grid-4-fx {
    grid-template-columns: 1fr 1fr 1fr 1fr;  
    }
    .grid-5-fx{
        grid-template-columns: repeat(5, 1fr);
    }
     .grid-6-fx{
        grid-template-columns: repeat(6, 1fr);
    }
    .grid-7-fx{
        grid-template-columns: repeat(7, 1fr);
    }
    .grid-8-fx{
        grid-template-columns: repeat(8, 1fr);
    }
    .grid-9-fx{
        grid-template-columns: repeat(9, 1fr);
    }
    .grid-10-fx{
        grid-template-columns: repeat(10, 1fr);
    }
    .grid-11-fx{
        grid-template-columns: repeat(11, 1fr);
    }
    .grid-12-fx{
        grid-template-columns: repeat(12, 1fr);
    }
}

@media (max-width: 767px) {
    .grid-movil-2-fx {
    grid-template-columns: 1fr 1fr;
    }
    .grid-movil-3-fx {
    grid-template-columns: 1fr 1fr 1fr;  
    }
    .grid-movil-4-fx {
    grid-template-columns: 1fr 1fr 1fr 1fr;  
    }    
    .grid-5-movil-fx{
        grid-template-columns: repeat(5, 1fr);
    }
     .grid-6-movil-fx{
        grid-template-columns: repeat(6, 1fr);
    }
    .grid-7-movil-fx{
        grid-template-columns: repeat(7, 1fr);
    }
    .grid-8-movil-fx{
        grid-template-columns: repeat(8, 1fr);
    }
    .grid-9-movil-fx{
        grid-template-columns: repeat(9, 1fr);
    }
    .grid-10-movil-fx{
        grid-template-columns: repeat(10, 1fr);
    }
    .grid-11-movil-fx{
        grid-template-columns: repeat(11, 1fr);
    }
    .grid-12-movil-fx{
        grid-template-columns: repeat(12, 1fr);
    }
}
@media (min-width: 767px){
    .gap-5-fx {
    gap: 5px;
    }
    .gap-10-fx {
    gap: 10px;
    }.gap-20-fx {
    gap: 20px;
    }
    .gap-30-fx {
    gap: 30px;
    }
    .gap-40-fx {
    gap: 40px;
    }
    .gap-50-fx {
    gap: 50px;
    }
    .gap-60-fx {
    gap: 60px;
    }
}

@media (max-width: 767px){
    .gap-movil-5-fx{
    gap:5px;
    }
    .gap-movil-10-fx{
    gap:10px;
    }
     .gap-movil-15-fx{
    gap:15px;
    }
     .gap-movil-20-fx{
    gap:20px;
    }
    .gap-30-movil-fx{
    gap:30px;
    }
    .gap-40-movil-fx{
    gap:40px;
    }
    .gap-50-movil-fx{
    gap:50px;
    }
    .gap-60-movil-fx{
    gap:60px;
    }       
}
 /*===FIN ESTILOS DE GRID===*/

/*===ESTILOS DE ICONO===*/
.icono-estilo-1-fx {
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin: 0 auto 20px auto;
}
.iconofuego:before {
    font-family: FontAwesome !important;
    font-weight: 900 !important;
    content: "\f7e4";
}
.iconoclick:before{
    font-family: FontAwesome !important;
    font-weight: 900 !important;
    content: "";
}
.iconotienda:before {
    font-family: 'FontAwesome' !important;
    font-weight: 900 !important;
    content: "";  
}
/*===FIN ESTILOS DE ICONO===*/



/*===COLORES TEXTOS / ICONOS===*/
.color-azul-1-fx {
    color:var(--color-azul-1);
}
.color-blanco-fx {
    color:var(--color-blanco);
}
.color-gris---fx {
    color:var(--color-bgris-1);
}
.color-rojo-fx-1 {   
     color:var(--color-rojo-1);
}

/*===COLORES TEXTOS / ICONOS===*/

/*===COLORES DE FONDO===*/
.fondo-azul-1-fx {
    background: var(--color-azul-1);
}

.fondo-blanco-fx {
    background: var(--color-blanco);
}
.fondo-gris-1-fx {
    background-color: var(--color-gris-1);
}
.fondo-gris-3-fx{
 background-color: var(--color-gris-3);

}
.fondo-rojo--1-fx {
    background: #A45F53;
}
.fondo-rojo-1-fx {
    background: #e9d9d6;
}
.fondo-verde-1-fx {
    background: var(--color-verde-1);
}
.fondo-verde-2-fx {
    background: darkslategray;
}
/*===FIN COLORES DE FONDO===*/

/*===COLORES DE BORDE===*/
.borde-gris-1-fx {
    border-color: rgba(0, 0, 0, 00.1);
}
.borde-gris-2-fx {
    border-color: rgba(0, 0, 0, 0.2);
}
.borde-azul-1-fx {
    border-color: var(--color-azul-1);
}
.borde-verde-1-fx {
    border-color: var(--color-verde-1);
}
.borde-rojo-fx-1 {
    border-color: #A45F53;
}
.borde-solido-fx {
    border-style: solid;
}

.borde-punteado-fx {
    border-style: dashed;
}
/*===COLORES DE BORDE===*/

/*===GROSOR DE BORDE===*/
.sin-borde-fx{
    border:none;
}
.ancho-borde-1-fx {
border-width: 1px;
}
.ancho-borde-2-fx {
border-width: 2px;
}
.ancho-borde-3-fx {
border-width: 3px;
}
.ancho-borde-4-fx {
border-width: 4px;
}
/*===GROSOR DE BORDE===*/

/*===BORDES REDONDOS===*/
.radius-4-fx { 
  border-radius: 4px;
}
.radius-6-fx { 
  border-radius: 6px;
}
.radius-8-fx { 
  border-radius: 8px;
}
.radius-10-fx { 
  border-radius: 10px;
}
.radius-100-fx{
    border-radius:100%;
    }
/*===FIN BORDES REDONDOS===*/

/*===RELLENOS (ESPACIOS INTERNOS)===*/
@media (min-width: 767px){
    .relleno-general-var-fx{
        padding: var(--pg);
    }
     .relleno-arriba-var-fx{    
    padding-top: var(--pt);
    }
    .relleno-derecha-var-fx{
    padding-right: var(--pr);
    }
    .relleno-abajo-var-fx{
    padding-bottom: var(--pb);
    }
    .relleno-izquierda-var-fx{
    padding-left: var(--pl);
    }
    .relleno-seccion-fx{
    padding:90px 20px;
    }
     .relleno-10-fx {
    padding: 10px;
    }  
    .relleno-15-fx {
    padding: 15px;
    }
    .relleno-20-fx {
    padding: 20px;
    }
     .relleno-30-fx {
    padding: 30px;
    }
    .relleno-40-fx {
    padding: 40px;
    }
}

@media (max-width: 767px){

    .relleno-general-movil-var-fx{
        padding: var(--pgm);
    }
     .relleno-arriba-movil-var-fx{    
    padding-top: var(--ptm);
    }
    .relleno-derecha-movil-var-fx{
    padding-right: var(--prm);
    }
    .relleno-abajo-movil-var-fx{
    padding-bottom: var(--pbm);
    }
    .relleno-izquierda-movil-var-fx{
    padding-left: var(--plm);
    }
    .relleno-seccion-fx{
    padding: 35px 15px;
    }
   .relleno-movil-10-fx {
    padding: 10px;
    }  
    .relleno-movil-15-fx {
    padding: 15px;
    }
    .relleno-movil-20-fx {
    padding: 20px;
    }
     .relleno-movil-30-fx {
    padding: 30px;
    }
    .relleno-movil-40-fx {
    padding: 40px;
    } 
}
/*===FIN RELLENOS (ESPACIOS INTERNOS)===*/


/*===TAMAMAÑOS DE FUENTE===*/
@media (min-width: 767px){
.tamano-letra-var-fx {
    font-size: var(--tamano-letra-pc);
}
}

@media (max-width: 767px){
    .tamano-letra-movil-var-fx{
    font-size: var(--tamano-letra-movil);
    }    
}
/*===FIN TAMAMAÑOS DE FUENTE===*/

/*===ESTILOS GENERALES TEXTOS===*/
.altura-minima-80-fx {
    min-height: 80px;
}
.mayusculas-fx {
    text-transform: uppercase;
}
.interletrado-2-fx {
    letter-spacing:2px ;
}

.letra-negrita-fx {
    font-weight: bold;
}
.texto-centrado-fx {
    text-align: center;
}
.texto-izquierda-fx {
    text-align: left;
}
/*===FIN ESTILOS GENERALES TEXTOS===*/

/*===MARGENES DIFERENTES===*/
.columna1 > div > div {
    margin-top: 6px;

}
.margen-auto-fx{
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 767px){
    .margen-arriba-var-fx{
    margin-top: var(--mt);
    }
    .margen-derecha-var-fx{
    margin-right: var(--mr);
    }
    .margen-abajo-var-fx{
    margin-bottom: var(--mb);
    }
    .margen-izquierda-var-fx{
    margin-left: var(--ml);
    }
     .margen-arriba-6-fx {
    margin-top: 6px ;
    }
    .margen-arriba-10-fx {
    margin-top: 10px ;
    }
    .margen-arriba-20-fx {
    margin-top: 20px ;
    }
    .margen-arriba-30-fx {
    margin-top: 30px ;
    }
    .margen-arriba-40-fx {
    margin-top: 40px ;
    }
    .margen-arriba-50-fx {
    margin-top: 50px ;
    }
    .margen-arriba-60-fx {
    margin-top: 60px ;
    }
 
    .margen-abajo-10-fx {
    margin-bottom: 10px ;
    }
    .margen-abajo-20-fx {
    margin-bottom: 20px ;
    }
    .margen-abajo-30-fx {
    margin-bottom: 30px ;
    }
    .margen-abajo-40-fx {
    margin-bottom: 40px ;
    }
    .margen-abajo-50-fx {
    margin-bottom: 50px ;
    }
    .margen-abajo-60-fx {
    margin-bottom: 60px ;
    }

}

@media (max-width: 767px){
    .margen-arriba-movil-var-fx{
    margin-top: var(--mtm);
    }
    .margen-derecha-movil-var-fx{
    margin-right: var(--mrm);
    }
    .margen-abajo-movil-var-fx{
    margin-bottom: var(--mbm);
    }
    .margen-izquierda-movil-var-fx{
    margin-left: var(--mlm);
    }
    .margen-arriba-movil-6-fx {
    margin-top: 6px;
    }
    .margen-arriba-movil-10-fx {
    margin-top: 10px;
    }
    .margen-arriba-movil-20-fx {
    margin-top: 20px;
    }
    .margen-arriba-movil-30-fx {
    margin-top: 30px ;
    }
    .margen-arriba-movil-40-fx {
    margin-top: 40px ;
    }
    .margen-arriba-movil-50-fx {
    margin-top: 50px ;
    }
    .margen-arriba-movil-60-fx {
    margin-top: 60px ;
    }
   .margen-abajo-movil-10-fx {
    margin-bottom: 10px ;
    }
   .margen-abajo-movil-20-fx {
    margin-bottom: 20px ;
    }
   .margen-abajo-movil-30-fx {
    margin-bottom: 30px ;
    }
   .margen-abajo-movil-40-fx {
    margin-bottom:40px ;
    }
   .margen-abajo-movil-50-fx {
    margin-bottom: 50px ;
    }
   .margen-abajo-movil-60-fx {
    margin-bottom: 60px ;
    }
}
/*===FIN MARGENES DIFERENTES===*/


/*===DIFERENTES ANCHOS y ALTOS===*/
@media (min-width: 767px){
.alto-var-pc-fx{
min-height: var(--alto-var-pc);
}
}

@media (max-width: 767px){
.alto-var-movil-fx{
min-height: var(--alto-var-movil);
}
}


.ancho-completo-fx{
    width: 100%;
}
@media (min-width: 767px){
.ancho-completo-pc-fx{
    width: 100%;
}
}
@media (max-width: 767px){
.ancho-completo-movil-fx{
    width: 100%;
}
}
@media (min-width: 767px){
.ancho-var-pc-fx{
min-width: var(--ancho-var-pc);
}
}


@media (max-width: 767px){
.ancho-var-pc-fx{
min-width: var(--ancho-var-movil);
}
}

@media (min-width: 767px){
.ancho-var-maximo-pc-fx{
max-width: var(--ancho-var-pc);
}
}


@media (max-width: 767px){
.ancho-var-maximo-movil-fx{
max-width: var(--ancho-var-movil);
}
}

.ancho-maximo-1400-fx {
    max-width: 1400px;
}
.ancho-maximo-800-fx {
    max-width: 800px;
}

.ancho-maximo-650-fx {
    max-width: 650px;
}

.ancho-maximo-450-fx {
    max-width: 450px;
}
/*===DIFERENTES ANCHOS===*/

/*===OTROS ESTILOS GENERALES===*/
.boton-fx {
    padding: 16px 15px;
    border-radius: 4px;
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    text-align: center;
    border-right: 8px solid var(--color-azul-1);
    border-bottom: 8px solid var(--color-azul-1);
    border-top: 2px solid var(--color-azul-1);
    border-left: 2px solid var(--color-azul-1);
    color: var(--color-azul-1);
    font-weight: 600;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease;
}


.boton-fx-2{
    box-sizing: border-box;
    padding: 22px 24px;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: transform 0.2s ease;    
}
.boton-fx:hover, .boton-fx-2:hover{
  transform: translateY(-2px); /* pequeño levantamiento visual */
  transition: transform 0.2s ease;
}
@media (max-width: 767px){
    .boton-fx-2{
    padding: 12px 8px;
    letter-spacing: 1px;
    cursor: pointer;
    font-size: 11px;    
    }
    .boton-fx {
    padding: 12px 10px;
    font-size: 12px;
    letter-spacing: 1px;
    }
}

.centrado-vertical-fx {
    justify-content: center;
    flex-direction: column;
    display: flex;
}
.bloque-centrado-fx {
    margin-left:auto ;
    margin-right: auto;
}
.numeros-pro-fx {
    font-size: 45px;
    font-weight: 800;
    color:#000;
}

@media (min-width: 767px){
    .pegado-scroll{
    position: sticky;
    top: 30px; /* se pegará al borde superior */
    }
}
/*===OTROS ESTILOS GENERALES===*/

/*===VIDEO CON FONDO DE COMPUTADOR PORTATIL===*/

.contenedor-padre-video-portatil-portatil{
    max-width: 800px;
    position: relative;
}

.contenedor-video-portatil{
    padding-top: 61.9%;
    background-image: url("https://nodosmexico.com/wp-content/uploads/2025/02/fondo-video-2.png");
    position: relative;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.contenedor-video-portatil video{
    position: absolute;
    top: 4.6%;
    left: 50%;
    width: 90.5%;
    height: 84.59%;
    transform: translateX(-50%);
    background: #000;
    object-fit: cover;
}

/*===VIDEO CON FONDO DE COMPUTADOR PORTATIL===*/


/*===ESTILOS FORMULARIO===*/
label{
    font-size: 15px;
}
@media (max-width: 767px){
 label{
    font-size: 13px;
}

}
input[type="text"], input[type="tel"], input[type="url"], select, textarea {
    background-color: rgba(0, 0, 0, 0.07);
    border: 2px solid #D1D5DB; /* Borde gris claro */
    border-radius: 0; 
    padding: 0.8rem 0.75rem; 
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s; /* Transición suave */
    box-sizing: border-box;
    color:var(--color-gris-2);
}
        
input:focus, select:focus, textarea:focus {
    outline: none; 
    border-color: #00668E; /* Tu color principal */
   
}
        
input[type="radio"]:checked { 
    accent-color: #00668E;
      
}

input[type="color"] {
-webkit-appearance: none; -moz-appearance: none; appearance: none;
width: 100%; height: 40px; border: none; cursor: pointer;
background-color: transparent; padding: 0;
}

input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; border-radius: 0.375rem; }
input[type="color"]::-webkit-color-swatch { 
border: 1px solid #D1D5DB; /* Borde gris claro */
border-radius: 0.375rem; 
}

select {
-webkit-appearance: none; -moz-appearance: none; appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
}

/*===ESTILOS FORMULARIO===*/


  /*====ACORDEON PREGUNTAS FRECUENTES====*/
/* CONTENEDOR */
.accordion {
    width: 100%;
    font-family: sans-serif;
}

/* TITULOS */
.accordion .title {
    padding: 20px 40px 20px 20px;
    margin: 0;
    cursor: pointer;
    user-select: none;
    transition: all 0.7s ease;
    border: solid 3px #000;
    font-size: 16px;
    border-radius: 7px;
    font-weight: 200;
    position: relative;
    line-height: 1.4em;
}

.accordion .title.active{
    background: #f0f1f4;
    border-radius: 10px 10px 0 0;
    transition: all 0.7s ease;
}

.accordion .title:after{
    content: "+";
    font-size: 26px;
    background: #666;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -15px;
    transition: all 0.7s ease;
}

.accordion .title.active:after{
    content: "-";
    line-height: 1;
    display: block;
    text-align: center;
    background: #000;
    transition: all 0.7s ease;
}


.accordion .title:hover {
    background: #f0f1f4;
    color:#666;
    transition: all 0.7s ease;
}

/* CONTENIDO OCULTO */
.accordion .content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 15px;
    border:solid 3px #000;
    border-top: none;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.7s ease;
    margin-bottom: 10px;
    line-height: 1.2em;

}

/* CONTENIDO ACTIVO */
.accordion .title.active + .content {
    max-height: max-content; /* valor seguro */
    opacity: 1;
    padding: 15px; 
    transition: all 0.7s ease;
}

/*====ACORDEON PREGUNTAS FRECUENTES====*/

/* ============================================================
===FIN ESTILOS DE MAQUETACIÓN GENERAL===
===============================================================*/