﻿/*
 * Descripción: CUSTOM
 * Copyright (c) 2025
 *
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

:root {
  --body-background:#fff;
  --footer-background:#fff;
  --body-color:#000;
  --colordest:#df3856;
  --color-gris-100:#dfe3e8;
  --color-gris-200:#d1d5db;
  --color-gris-300:#8d8d8d;
  --color-gris-400:#6d7379;
  --color-gris-500:#565656;
  --overlay-background: rgba(0,0,0,0.6);
  --form-background:#ffffff;
  --msg-background:#dfe3e8;
  --msg-text:#000;
  --form-border:#d1d5db;
  --color-borde:#d1d5db;
  --form-text:#000000;
  --fuente-principal:'Montserrat', sans-serif, Arial, Helvetica;
  --fuente-secundaria:'Bebas Neue', cursive, sans-serif;
  --filter-colordest: brightness(0) saturate(100%) invert(35%) sepia(73%) saturate(5097%) hue-rotate(333deg) brightness(94%) contrast(84%);
  --filter-blanco: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7475%) hue-rotate(236deg) brightness(112%) contrast(100%);
}
.dark {
  --body-background:#202020;
  --footer-background:#202020;
  --body-color:#ffffff;
  --form-background:#444444;
  --form-border:#565656;
  --form-text:#ffffff;
}
body{
  font-family: var(--fuente-principal);
  background-color: var(--body-background);
  color: var(--body-color);
}    
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}    
.scrollbar::-webkit-scrollbar-thumb:hover {background: #111111;}
.scrollbar::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 4px;
}
.scrollbar::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background-color: transparent;
}
.scrollbar::-webkit-scrollbar-thumb {
  background-color: #111111;
  border-radius: 4px;
}
.msg-content{
  font-family:inherit;
  position: fixed;
  z-index: 100000;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  height: auto;
  max-width: 100%;
  width:100%;
  pointer-events: none;
}
.msg-zone{
  display: flex;
  flex-direction: column;
  position:relative;
  margin: 0 auto;
  top: .5em;
  z-index: 100000;
  max-width: 520px;
  padding:1em;
  height: auto;
  max-height: 85%;
}
.msg{
  background-color: var(--msg-background);
  background-size: 16px 16px;
  display:flex;
  align-items: center;
  justify-content: left;
  color: var(--msg-text);
  margin-bottom:15px;
  width: 100%;
  padding:8px 15px;
  border-radius: 4px;
  font-size:0.875em;
  line-height: 150%;
  pointer-events: auto;
}
.msg.ko{   
  background: var(--msg-background) url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22snackbar-error%22%20transform%3D%22translate(-4786%20-2998)%22%3E%3Crect%20id%3D%22Rect%C3%A1ngulo_11634%22%20data-name%3D%22Rect%C3%A1ngulo%2011634%22%20width%3D%2216%22%20height%3D%2216%22%20transform%3D%22translate(4786%202998)%22%20fill%3D%22none%22%2F%3E%3Cpath%20id%3D%22Icon_ionic-ios-close%22%20data-name%3D%22Icon%20ionic-ios-close%22%20d%3D%22M18.707%2C17.287%2C22.993%2C13a1%2C1%2C0%2C0%2C0-1.42-1.42l-4.286%2C4.286L13%2C11.581A1%2C1%2C0%2C1%2C0%2C11.581%2C13l4.286%2C4.286-4.286%2C4.286A1%2C1%2C0%2C0%2C0%2C13%2C22.993l4.286-4.286%2C4.286%2C4.286a1%2C1%2C0%2C0%2C0%2C1.42-1.42Z%22%20transform%3D%22translate(4776.715%202988.713)%22%20fill%3D%22%23e50c0c%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat center left 15px;
  padding-left:40px;
}
.msg.ok{
  background: var(--msg-background) url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22snackbar-success%22%20transform%3D%22translate(-1180%20-936)%22%3E%3Crect%20id%3D%22Rect%C3%A1ngulo_7199%22%20data-name%3D%22Rect%C3%A1ngulo%207199%22%20width%3D%2216%22%20height%3D%2216%22%20transform%3D%22translate(1180%20936)%22%20fill%3D%22none%22%2F%3E%3Cpath%20id%3D%22Icon_awesome-check%22%20data-name%3D%22Icon%20awesome-check%22%20d%3D%22M5.434%2C16.342l-5.2-5.23a.808.808%2C0%2C0%2C1%2C0-1.138L1.366%2C8.836a.8.8%2C0%2C0%2C1%2C1.131%2C0L6%2C12.359l7.5-7.546a.8.8%2C0%2C0%2C1%2C1.131%2C0l1.131%2C1.138a.808.808%2C0%2C0%2C1%2C0%2C1.138l-9.2%2C9.253A.8.8%2C0%2C0%2C1%2C5.434%2C16.342Z%22%20transform%3D%22translate(1180%20933.423)%22%20fill%3D%22%233fb848%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat center left 15px;
  padding-left:40px;
}
.btn-close {
  font-size: 1.5em;
  color: var(--msg-text);
  font-weight: normal;
  line-height: 15px;
  cursor: pointer;
  transition: 0.3s;
  margin-left: auto;
  order: 1;
  padding:6px 8px;
  padding-right:0px;
}
/*custom*/
.header-fixed + article, .header-fixed + div, .header-fixed + section {
  margin-top: 60px;
}
.container-image-top{
  width: 100%;
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-repeat:no-repeat;
  background-position: top;
  background-size: cover;
  clip-path: ellipse(85% 100% at top);
  padding:36px 0 20px 0px;
  min-height: 500px;
  margin-bottom:60px;
}
.container-image-top:has(.cards-zone){
  clip-path: none;
  padding-top:200px;
  padding-bottom:0px;
  min-height: auto;
}    
@media (max-width: 991px) {
  .cards-zone{
    justify-content: center;
    flex-wrap: wrap;
  }      
  .container-image-top{
    clip-path: ellipse(150% 100% at top);
    min-height: 400px;
  }
}
@media (max-width: 480px) {
  .container-image-top{
    padding:60px 0px;
    min-height: auto;
  }
  .container-image-top:has(.cards-zone) {
    padding-top: 128px;
  }
}