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

/* VARIABLES GLOBALES  */
:root { /* PALETA DE COLORES*/
    --color-white: #fff;
    --color-black: #000;
    --color-gray-light: #ccc;
    --color-gray-dark: #333;

    --color-prim:#F5853B;
    --color-sec: #4C4B4E;
    --color-ter: #FF6600;

    /* Colores de redes sociales (no cambian en modo oscuro) */
    --color-facebook: #3b5998;
    --color-youtube: #e62117;
    --color-twitter: #00acee;
    --color-instagram: #dd2a7b;
    --color-whatsapp: #25d366;

    /* Fondo y texto principales */
    --background-color: #f7f7f7;
    --text-color: #555;

    /*OTRAS VARIABLES*/

    }

/* Modo oscuro automático *//*
@media (prefers-color-scheme: dark) {
    :root {
        --color-white: #ddd;
        --color-black: #000;
        --color-gray-light: #666;
        --color-gray-dark: #111;

        --background-color: #121212;
        --text-color: #ddd;
        }
    }*/

/* Alternativa con una clase - modo manual del usuario */
.dark-mode {
    --color-white: #ddd;
    --color-black: #000;
    --color-gray-light: #666;
    --color-gray-dark: #111;

    --background-color: #121212;
    --text-color: #ddd;
    }

/* Aplicación de variables */
body { font-family: regular; font-size: 0.9em; color: var(--text-color); background-color: var(--background-color) }

/*PARA ESTRUTUCTURA GENERAL*/
h1{font-family: medium; font-size: 2.617em; line-height: 1; margin-bottom: 30px;}
h2{font-family: bold; font-size: 1.618em; line-height: 1; margin-bottom: 20px;}
h3{font-family: bold; font-size: 1.0em; line-height: 1; margin-bottom: 10px;}

p{font-size: 1.0em; text-indent: 3em;} /*Define un párrafo  */
q{display: block; padding:20px 0px; color:var(--color-lihgt); border-top: 1px solid var(--color-lihgt); border-bottom: 1px solid var(--color-lihgt); 
    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-prim); 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-prim); color:var(--color-white); font-family: bold; padding: 2px 7px;} /*Define texto resaltado o marcado*/

/*PARA FORMULARIOS*/
/* Example HTML
    <form>
        <input type="text" class="inputBase inputNormal" placeholder="Escribe algo...">
        <textarea class="inputBase inputTextarea" placeholder="Mensaje"></textarea>
        <input type="text" class="inputBase inputSearch" placeholder="Buscar...">
        <button type="submit" class="button">Enviar</button>
    </form>*/
input[type=text], textarea {/*padding:12px 20px;*/ margin:8px 0; border: 1px solid #eee; font-family: regular; font-size: 0.9em;}
    input[type=text]:focus, textarea:focus {box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);}
input[type=submit] {font-family: regular; font-size: 0.8em; padding:12px 20px; margin:8px 0; background-color: var(--color-sec); color: var(--color-white); cursor: pointer; transition: 0.2s Ease-in-out; }
    input[type=submit]:hover {font-family: bold; background-color: var(--color-sec); box-shadow: 0px 0px 10px 0px rgba(229,204,162,1); transform: scale(1.1);}

    .inputTextarea{ resize: vertical; width: 100%; height: 300px; padding:12px 20px; border-radius: 4px;}
    .inputNormal{width: 100%; padding:12px 20px; border-radius: 4px;}
    .inputSearch{width: 100%; padding:12px 20px 12px 40px; border-radius: 4px 0px 0px 4px; background: url(../simg/--search.png) no-repeat 10px center;}
/*
    .inputBase {
        width: 100%;
        padding: 12px 20px;
        border: 1px solid #eee;
        border-radius: 4px;
        font-family: regular;
        font-size: 0.9em;
        background-color: #fff;
        color: #333;
        transition: box-shadow 0.2s ease-in-out;
    }
    
    .inputBase:focus {
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
        outline: none;
    }
    

    .inputTextarea {
        resize: vertical;
        height: 300px;
    }
    
    .inputSearch {
        padding-left: 40px;
        background: url(../simg/--search.png) no-repeat 10px center;
        border-radius: 4px 0 0 4px;
    }
    

    .button {
        font-family: regular;
        font-size: 0.8em;
        padding: 12px 20px;
        margin: 8px 0;
        background-color: #cbdad3; 
        color: #fff;
        cursor: pointer;
        border: none;
        border-radius: 4px;
        transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }
    
    .button:hover {
        font-family: bold;
        box-shadow: 0px 0px 10px 0px rgba(229, 204, 162, 1);
    }*/



/*/////////////////// FUENTE TIPOGRÁFICA DE LA WEBPAGE /////////////////// ../font/ */
/*@font-face { font-family: 'regular'; fontRregular
  @font-face { font-family: 'light'; fontLight
  @font-face { font-family: 'bold'; fontBold        */
  @font-face { font-family: 'regular';
    src: url('../sfont/Roboto-Regular.eot');
    src: url('../sfont/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
         url('../sfont/Roboto-Regular.woff') format('woff'),
         url('../sfont/Roboto-Regular.ttf') format('truetype'),
         url('../sfont/Roboto-Regular.svg#existencelight') format('svg');
    font-weight: normal;
    font-style: normal;}

@font-face { font-family: 'light';
    src: url('../sfont/Montserrat-Light.woff2') format('woff2'),
         url('../sfont/Montserrat-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
        
@font-face { font-family: 'medium';
    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-Black.woff2') format('woff2'),
            url('../sfont/Montserrat-Black.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
    
/*icons softsitesfont_iconsb-webfont*/
@font-face { font-family: 'softicon';
    src: url('../sfont/softsitesfont_icon.eot');
    src: url('../sfont/softsitesfont_icon.eot?#iefix') format('embedded-opentype'),
         url('../sfont/softsitesfont_icon.woff') format('woff'),
         url('../sfont/softsitesfont_icon.ttf') format('truetype'),
         url('../sfont/softsitesfont_icon.svg#existencelight') format('svg');
    font-weight: normal;
    font-style: normal;}