/* ============================================
   FUENTE POPPINS - FAMILIA COMPLETA
   ============================================ */

/* Thin (100) */
@font-face {
  font-family: 'Mi-Poppins';
  src: url('../fonts/poppins/Poppins-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mi-Poppins';
  src: url('../fonts/poppins/Poppins-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Mi-Poppins';
  src: url('../fonts/poppins/Poppins-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mi-Poppins';
  src: url('../fonts/poppins/Poppins-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Mi-Poppins';
  src: url('../fonts/poppins/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mi-Poppins';
  src: url('../fonts/poppins/Poppins-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Mi-Poppins';
  src: url('../fonts/poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mi-Poppins';
  src: url('../fonts/poppins/Poppins-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Mi-Poppins';
  src: url('../fonts/poppins/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mi-Poppins';
  src: url('../fonts/poppins/Poppins-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Mi-Poppins';
  src: url('../fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mi-Poppins';
  src: url('../fonts/poppins/Poppins-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Mi-Poppins';
  src: url('../fonts/poppins/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mi-Poppins';
  src: url('../fonts/poppins/Poppins-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Mi-Poppins';
  src: url('../fonts/poppins/Poppins-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mi-Poppins';
  src: url('../fonts/poppins/Poppins-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Mi-Poppins';
  src: url('../fonts/poppins/Poppins-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mi-Poppins';
  src: url('../fonts/poppins/Poppins-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ============================================
   Variables del Proyecto
   ============================================ */

:root {
    /* Fuente y tipografia */
    --fuente--principal: 'Mi-Poppins';
    --tamano--principal: 1rem;
    --tamaño--secundario: .8rem;
    --tamano--pequeno: 0.75rem;
    --espaciado--texto: 1px;
    --text-decoration-hover-offset: 3px;

    /*>>>> Colors <<<<*/

    --color--primary: #15ad3c;
    --color--secondary: #f5f5f5;
    --color--tertiary: #004D35;
    --color--text: #000;
    --color--text_secondary: #6b7280;
    --color--hover_primary: #15AD3CE8;
    --color--hover_secondary: #15AD3C38;
    --color--hover_tertiary: #f3f4f6;
    
    
    /*>>>> Gradients <<<<*/

    --gradient--primary-to-tertiary: linear-gradient(270deg, var(--color--primary) 0%, var(--color--tertiary) 100%);
    
    /*>>>> Shadow <<<<*/

    --shadow--natural: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);

    /*>>>> Otros estilos <<<<*/

    --borde--principal: 5px;
    --border-contenedores: 10px;
    --tiempo--transiciones: .3s;
    --espaciado-general: 20px;
    --tamano-contenedores: min(90vw ,1280px);
}

/* ============================================
   Estilos Generales
   ============================================ */
* {
  margin: 0;
  padding: 0;
  font-family: var(--fuente--principal) !important;
}

*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

*::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 50px;
}

*::-webkit-scrollbar-thumb {
  background: var(--color--primary);
  border-radius: 50px;
}

html {
  overflow-x: hidden;
}

body {
  background-color: var(--color--secondary);
  font-family: var(--fuente--principal) !important;
}


#primary {
  overflow-x: hidden;
}

h2, h3 {
  font-size: var(--tamano--principal);
  line-height: 1;
}

p {
  font-size: var(--tamaño--secundario);
  color: var(--color--text_secondary);
}
ul {
    list-style: none !important;
}

.woocommerce-error, .woocommerce-info, .woocommerce-message {
  box-sizing: border-box !important;
  margin: 10px !important;
  width: 90% !important;
  align-self: center !important; 
  justify-self: center !important;
}

/* ============================================
   Font-Weight
   ============================================ */

.font-thin { font-weight: 100; }
.font-extralight { font-weight: 200; }
.font-light { font-weight: 300; }
.font-regular { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }

.font-italic { font-style: italic; }

/* ============================================
   Iconos
   ============================================ */

[class^="icon-"], 
[class*=" icon-"] {
    /*display: inline-block; No es necesario aun*/
    width: var(--tamano--principal);
    height: var(--tamano--principal);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.icon-box { background-image: url(../icons/Box.svg); }
.icon-phone { background-image: url(../icons/Phone.svg); }
.icon-shop { background-image: url(../icons/Shop.svg); }
.icon-heart { background-image: url(../icons/Heart.svg); }
.icon-user { background-image: url(../icons/User.svg); } 
.icon-login { background-image: url(../icons/Login\ 2.svg); }
.icon-cart { background-image: url(../icons/Cart-Large-2.svg); }
.icon-arrow-right { background-image: url(../icons/Alt-Arrow-Right.svg); }
.icon-arrow-left { background-image: url(../icons/Alt-Arrow-Left.svg); }
.icon-arrow-down { background-image: url(../icons/Alt\ Arrow\ Down.svg); }
.icon-ubicacion { background-image: url(../icons/Map\ Point\ Wave.svg); }
.icon-search { background-image: url(../icons/Magnifer.svg); }
.icon-home-2 { background-image: url(../icons/Home\ 2.svg); width: 25px; height: 25px;}
.icon-dashboard { background-image: url(../icons/Widget\ 4.svg); width: 25px; height: 25px;}
.icon-notes { background-image: url(../icons/Notes.svg); width: 25px; height: 25px;}
.icon-user-id { background-image: url(../icons/User\ Id.svg); width: 25px; height: 25px;}
.icon-power { background-image: url(../icons/Power.svg); width: 25px; height: 25px;}
.icon-hamburger { display: flex; background-image: url(../icons/Hamburger\ Menu.svg); width: 25px; height: 25px; }

.logo-islabeya { display: flex; background-image: url(../img/Favicon.svg); width: 25px; height: 25px; }

.icon-feature-history { background-image: url(../icons/History-2.svg); }
.icon-feature-shield-check { background-image: url(../icons/Shield-Check.svg); }
.icon-feature-medal-ribbons-star { background-image: url(../icons/Medal-Ribbons-Star.svg); }
.icon-feature-box { background-image: url(../icons/Box-1.svg); }
.icon-feature-call-chat-rounded { background-image: url(../icons/Call-Chat-Rounded.svg); }

.icono-provincia { background-image: url(../icons/Ubicacion/Point\ On\ Map.svg); background-repeat: no-repeat; background-position: center; background-size: cover;}
.icono-municipio { background-image: url(../icons/Ubicacion/Point\ On\ Map\ Perspective.svg); background-repeat: no-repeat; background-position: center; background-size: cover;}


.icon-white {
  filter: brightness(0) invert(1);
}

.icon-chocolate {
  filter: brightness(0) saturate(100%) invert(22%) sepia(67%) saturate(1425%) hue-rotate(342deg) brightness(93%) contrast(88%);
}




/*===================================================================================================
Botones Generales
===================================================================================================*/

.btn, .submit {
    display: flex;
    justify-content: center;
    background-color: white;
    font-size: var(--tamaño--secundario);
    font-style: normal;
    text-decoration: none;
    padding: 10px;
    border-radius: var(--borde--principal);
    border: 0px;
    color: var(--color--text);
    transition: var(--tiempo--transiciones);
    letter-spacing: var(--espaciado--texto);
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    gap: 5px;
}

.btn-second, .submit {
    background-color: var(--color--primary) !important;
    color: var(--color--secondary) !important;
}

.btn-second:hover, .submit:hover {
    background-color: var(--color--hover_primary) !important;
}

.btn:hover {
    background-color: var(--color--hover_secondary);
}