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

:root{/*VARIABLES*/
    /* Colores Primarios y Secundarios */
    --color-primary: #d32f2f; 
    --color-primary-dark: #b71c1c; 
    --color-secondary: #388e3c; 
    --color-accent: #5c5c5c;

    /*Color de sombras*/
    --color-shadown: rgba(0, 0, 0, 0.1);
    --color-shadown-max: rgba(0, 0, 0, 0.6);

    /* 🎨 Colores de Fondo Degradado*/
    --color-bcklight: #E4F8F9;
    --color-bcknormal: #C0F2EA;
    --color-bckdark: #91bac0;

    /* 🎨 Colores de Fondo y Texto */
    --color-background: #fff;
    --color-text: #3c3d3e;

    /* 🎨 Colores base */
    --color-white: #ffffff;
    --color-black: #000000;
    /* 🎨 Colores Fijos (No Cambian en Modo Oscuro) */
    --color-static-white: #ffffff;
    --color-static-black: #000000;

    /* 🎨 Colores de Estado */
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-error: #dc3545;

    /* 🎨 Escala de Grises con Transparencias */
    --gray-light: rgba(255, 255, 255, 0.2); /* Equivalente a gris claro */
    --gray-medium: rgba(0, 0, 0, 0.3); /* Equivalente a gris medio */
    --gray-dark: rgba(0, 0, 0, 0.6); /* Equivalente a gris oscuro */

    /* 🎨 Colores de Redes Sociales */
    --facebook: #1877f2;
    --messenger: #0084ff;
    --whatsapp: #25d366;
    --instagram: #e4405f;
    --youtube: #ff0000;
    --tiktok: #000000;
    --x: #000000; /*twitter*/
    --linkedin: #0077b5;
    --pinterest: #e60023;
    --snapchat: #fffc00;
    --telegram: #0088cc;
    --reddit: #ff4500;
    --discord: #5865f2;
    --twitch: #9146ff;
    --github: #181717;
    --dribbble: #ea4c89;
    --behance: #1769ff;
    }

._facebook  { background-color: var(--facebook);}
._messenger { background-color: var(--messenger);}
._whatsapp  { background-color: var(--whatsapp);}
._instagram { background-color: var(--instagram);}
._youtube   { background-color: var(--youtube);}
._tiktok    { background-color: var(--tiktok);}
._x         { background-color: var(--x);}
._linkedin  { background-color: var(--linkedin);}
._pinterest { background-color: var(--pinterest);}
._snapchat  { background-color: var(--snapchat);}
._telegram  { background-color: var(--telegram);}
._reddit    { background-color: var(--reddit);}
._discord   { background-color: var(--discord);}
._twitch    { background-color: var(--twitch);}
._github    { background-color: var(--github);}
._dribbble  { background-color: var(--dribbble);}
._behance   { background-color: var(--behance);}

.dark-mode { /* 🌙 Modo Oscuro */
    --color-background: #212529;
    --color-text: #dee2e6;
    /* Escala de grises ajustada en modo oscuro */
    --gray-light: rgba(255, 255, 255, 0.3);
    --gray-medium: rgba(255, 255, 255, 0.5);
    --gray-dark: rgba(255, 255, 255, 0.7);
    }

body {margin:0; font-family:regular; font-size:0.9em; color: var(--color-text); background: var(--color-background);}

/*PARA ESTRUTUCTURA GENERAL - TITULOS*/
h1, h2, h3, h4{font-weight: normal; line-height: 1.2; color: var(--color-text); padding-bottom: 10px;}
    h1{ font-size: 2.618em; font-family: bold;}
    h2{ font-size: 1.618em; font-family: regular; }
    h3{ font-size: 1.000em; font-family: bold; } 
    h4{ font-size: 0.750em; font-family: regular; } 

    @media (max-width: 767px) { /* Teléfonos */
        h1 { font-size: 2.0em; }
        h2 { font-size: 1.5em; }
        h3 { font-size: 1.0em; }
        }

p{line-height: 1.5; font-size: inherit; font-family: normal; margin: 0 0 1.5em 0; overflow-wrap: break-word; /*hyphens: auto; /*corta las palabras muy largas que no entren en input*/} /*Define un párrafo  */
q{display: block; padding:1em 0; color:var(--gray-medium); border-top: 1px solid var(--gray-medium); border-bottom: 1px solid var(--gray-medium); 
    font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size: 1.4em; } 	/*Define una cita corta*/

em{ line-height: 1; color:var(--color-primary); font-style: inherit;} /*Define énfasis en un texto - lo ocuprameos para notas en linea de texto*/  
strong{font-family: bold; color:inherit; font-weight: inherit;} /*Define un texto en negrita - adiferencia de <b> es texto que engloba se tiene que reforzar.*/
mark {background-color: var(--color-primary); color:var(--color-white); font-family: bold; padding: 2px 7px;} /*Define texto resaltado o marcado*/
/*address {font-style: normal;}     /*Define la información de contacto del autor / propietario del documento*/
/*<menu>        Define la lista de un menú*/
/*<option> 	    Define una opción en una lista desplegable*/
/*<sub> 	    Define un texto que es subíndice*/
/*<sup> 	    Define un texto que es superíndice*/

/* FUENTE TIPOGRÁFICA DE LA WEBPAGE /////////////////////////////////////////////////////////////////////// ../font/ */
  @font-face { font-family: 'regular';
    src: url('../sfont/Montserrat-Medium.woff2') format('woff2'),
         url('../sfont/Montserrat-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

@font-face { font-family: 'bold';
    src: url('../sfont/Montserrat-Bold.woff2') format('woff2'),
         url('../sfont/Montserrat-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

@font-face { font-family: 'black';
    src: url('../sfont/Montserrat-ExtraBold.woff2') format('woff2'),
         url('../sfont/Montserrat-ExtraBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
    
@font-face { font-family: 'light';
    src: url('../sfont/Montserrat-Thin.woff2') format('woff2'),
         url('../sfont/Montserrat-Thin.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

@font-face { font-family: 'normal';
    src: url('../sfont/OpenSans-Medium.woff2') format('woff2'),
            url('../sfont/OpenSans-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

/*Iconos desarrollados por icon.softsites*/
@font-face { font-family: 'softicon';
    src: url('../sfont/softsitesfont_iconsb.woff2') format('woff2'),
         url('../sfont/softsitesfont_iconsb.woff') format('woff');
    font-weight: normal;
    font-style: normal;}


/* EXTRUCTURA GENERALES BASE /////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Clase para cambiar la fuente por iconos, y puedan ocparse como logos o iconos en diferentes lugares*/
.classIcon{display:flex; align-items:center; justify-content:center; font-family:softicon;}

/* Sección que se ecarga de poner el 100x100 de la pagina*/
.section_all { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; position: relative;}

/* Contenedor base para secciones. Define el ancho estándar (74%) y centra el contenido. 
Se usa como base para cualquier sección que necesite una estructura uniforme en la página. */
.section_container { width: 81%; margin: 0 auto; padding: 3% 3% 0 3%; }

.section_subcontainer { width: 100%; margin: 0 auto; padding: 3% 3% 0% 3%;}

/* Agrega un margen superior del 7%. Útil para separar secciones sin afectar el ancho o el padding. */
.section_margin_top { margin-top: 7%; }

/* Usa el 100% del ancho disponible, eliminando márgenes laterales. 
Ideal para secciones que deben ocupar todo el espacio disponible, como banners o encabezados. */
.section_full_width { width: 100%; margin: 0; padding: 3% 5% 0 5%; }

/* Aplica márgenes laterales del 13%, sin afectar la parte superior e inferior. 
Útil para centrar contenido sin modificar el espacio entre secciones. */
.section_side_margin { margin: 0 13%; }

/* Aplica un padding interno del 3% en la parte superior y 13% en los lados.
Se usa para separar el contenido interno del borde del contenedor. */
.section_padding { padding: 3% 13% 0 13%; }

/* Combina margen superior (7%) con padding lateral (13%). 
Útil para secciones que requieren espacio alrededor pero mantienen un ancho definido. */
.section_margin_padding { margin-top: 7%; padding: 5% 13% 0 13%; }

/* Adaptación para pantallas medianas (tablets y laptops pequeñas).
Reduce el ancho y ajusta los márgenes para mejorar la legibilidad en dispositivos más pequeños. */
@media (max-width: 1024px) {
    .section_container { width: 90%; padding: 5% 8% 0 8%; }
    .section_side_margin { margin: 0 8%; }
    .section_padding { padding: 5% 8% 0 8%; }
    .section_margin_padding { padding: 6% 8% 0 8%; }
}

/* Adaptación para pantallas pequeñas (móviles). 
Maximiza el ancho y reduce los márgenes laterales para aprovechar mejor el espacio en pantallas estrechas. */
@media (max-width: 768px) {
    .section_container { width: 100%; padding: 6% 5% 0 5%; }
    .section_side_margin { margin: 0 5%; }
    .section_padding { padding: 6% 5% 0 5%; }
    .section_margin_padding { padding: 7% 5% 0 5%; }
}
/*
.sectionPadding{ padding:3% 13% 0% 13%; width: 74%;}
.sectionMargin{ margin: 7% 13% 0% 13%; }
.sectionMarginSimple{ margin: 7% 0% 0% 0%; }
.sectionMarginInvested{ margin: 0% 13% 0% 13%; width: 74%;}
.sectionMarginPadding{ margin: 7% 0% 0% 0%; padding: 5% 13% 0% 13%; }
*/
.backcolor_gradient{ background: radial-gradient(circle at top right, var(--color-bcklight), var(--color-bcknormal), var(--color-bckdark)); }
.backcolor_main{ background: radial-gradient(circle at top right, var(--color-primary), var(--color-primary-dark)); }

.background_splita { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient( circle at right center,  var(--color-bcklight) 10%, transparent 50%); z-index: -1; }
.background_splitb { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient( circle at left bottom,  var(--color-bcklight) 10%, transparent 50%); z-index: -1;}

.border_radius{border-radius: 7px;}
.border_radius_min{border-radius: 7px;}

.borderShadown{ box-shadow: 0px 0px 20px 5px var(--color-shadown);}
.borderShadownMax{ box-shadow: 0px 0px 15px 0px var(--color-shadown-max);}

.button{background-color: var(--color-prim); color: var(--color-white); font-family: bold; font-size: 1em; padding: 10px 20px; margin: 10px 0px; border-radius: 0px; cursor: pointer; transition:0.2s Ease-in-out;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);}
.button:hover{background-color: var(--color-white); color: var(--color-prim); padding: 10px 25px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);}


/* MEDIDAS GENERALES /////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 1199px) {/* Laptops y escritorios pequeños (992px - 1199px) */}
@media only screen and (max-width: 991px) { /* Tablets (Pantallas medianas, 768px a 991px) */ } 
@media only screen and (max-width: 767px) { /* Teléfonos (Pantallas pequeñas, 0px a 767px) */ }