@charset "utf-8";

/* ----------------------------------
Name: global.css
Version: 1.0.0
Autor: Fragmenta Soluciones Digitales
Website: https://www.fragmenta.mx
----------------------------------- */

/* ===================================
    Reset
====================================== */
*,
*::before,
*::after {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}
html { font-size: 16px !important;}
body {
     font-family: 'Roboto', sans-serif !important;
     -webkit-font-smoothing: antialiased;
     font-smooth: antialiased;
     /* font-size: 16px; */
     font-weight: 400;
     line-height: auto;
     color:#6D6D6D;
     background-color: #fff;
     margin: 0px;
}
body, html {min-height: 100%; -moz-osx-font-smoothing: grayscale;}

section{
  position: relative;
   overflow-x:clip;
}


a, a:active, a:focus { color: #2F254D;; text-decoration: none;transition:all .5s ease;}
a:hover, a:active{color: #2F254D; text-decoration: none; cursor: pointer;transition:all .5s ease;}
/*a:focus, a:active, button:focus, button:active, .btn-main.active.focus, .btn-main.active:focus, .btn-main.focus, .btn-main:active.focus, .btn-main:active:focus, .btn-main:focus {outline: none; box-shadow: none; } */

/*footer a, footer a:active, footer a:focus { color: #ffffff; text-decoration: none; font-size: 12px; line-height: 20px;}*/
/*footer a:hover, footer a:active{color: #1158A0; text-decoration: none; cursor: pointer;}
footer a:focus, footer a:active, footer button:focus, footer button:active, footer .btn-main.active.focus, footer .btn-main.active:focus, footer .btn-main.focus, footer .btn-main:active.focus, footer .btn-main:active:focus,footer  .btn-main:focus {outline: none; box-shadow: none; }

/*img {max-width:100%; height:auto; }*/


/* ===================================
    Typography
====================================== */
b, strong{font-weight: 700;}

/* heading */
h1, h2, h3, h4, h5, h6 {font-family: 'Onest', sans-serif; letter-spacing: 0;color: #4657A3;}

h1, .h1 {font-size:2.125rem; line-height:130%; font-weight: 400;}
h2, .h2 {font-size:1.5rem; line-height:130%; font-weight: 400;}
h3, .h3 {font-size:1.375rem; line-height:130%; font-weight: 400;}
h4, .h4 {font-size:1rem; line-height:130%; font-weight: 400;}
h5, .h5 {font-size:0.875rem; line-height:130%; font-weight: 400;}
h6, .h6 {font-size:0.75rem; line-height:150%; font-weight: 400;}

p {font-size:0.875rem;font-weight: 400;line-height:150%;}
.small {font-size:0.75rem;font-weight: 400;line-height:150%;}

/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {}
/* md  */ @media (min-width: 768px) {

h1, .h1 {font-size:2.375rem; line-height:130%; font-weight: 400;}
h2, .h2 {font-size:1.75rem; line-height:130%; font-weight: 400;}
h3, .h3 {font-size:1.625rem; line-height:130%; font-weight: 400;}
h4, .h4 {font-size:1.25rem; line-height:130%; font-weight: 400;}
h5, .h5 {font-size:1rem; line-height:130%; font-weight: 400;}
h6, .h6 {font-size:0.875rem; line-height:150%; font-weight: 400;}

p {font-size:1rem;font-weight: 400;line-height:150%;}

} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {

h1, .h1 {font-size:2.625rem; line-height:130%; font-weight: 400;}
h2, .h2 {font-size:2rem; line-height:130%; font-weight: 400;}

} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {}
/* xxl */ @media (min-width: 1400px) {}

.text-alt-orange{color: #F17D37;}
.text-alt-light-blue{color:#4A87C6;}
.text-main{color:#4657A3!important;}

.text-main-gray{color:#6D6D6D;}
.text-main-gray-dark{color:#424242;}

/* ===================================
    Background color
====================================== */

.img-background{
  width: 100%;
    object-fit: contain;
    position: absolute;
    bottom: 30px;
    left: 0px;
    z-index: -50;
}


.bg-main{
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.9) 64.9%, rgba(255, 255, 255, 0.2) 100%);
}

.bg-img-back{
  position: absolute;
  top:0px;
  left: 0px;
  width: 100%;
  height: 20%;
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 0;
}

/* ===================================
    Covers
====================================== */


/* ===================================
    Button
====================================== */

.btn-main {
  position: relative;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 65px;
  transition: all 0.7s;
  border: none;
  font-family: inherit;
  font-weight: 700;
  color: #fff;
  background-color: #F17D37;
}

.btn-main:hover {
  transition: all 0.7s;
  background-color: #4657A3;
  color:#fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn-main:active {
  transition: all 0.7s;
  transform: translateY(-1px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.btn-main::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 100px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all 0.4s;
}

.btn-main::after {
  background-color: #4657A3;
}

.btn-main:hover::after {
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
}


/*Link Flecha*/

.main-link a{color:#F17D37; text-decoration: none; font-size: 16px;font-weight: 500;}

.main-link a {
  -webkit-transition: ease-in-out 0.7s !important;
  -moz-transition: ease-in-out 0.7s !important;
  -ms-transition: ease-in-out 0.7s !important;
  -o-transition: ease-in-out 0.7s !important;
  transition: ease-in-out 0.7s !important;

}

.main-link i{color: #F17D37;font-size: 16px;transition: ease-in-out 0.7s !important;}


.main-link a:hover {
  margin-left: 20px;
  color: #4A87C6;
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
  text-decoration: underline;
}

.main-link a:hover i{color: #4A87C6;transition: ease-in-out 0.7s !important;}


/*Link Flecha alt*/

.main-link-alt a{color:#4457A2; text-decoration: none; font-size: 16px;font-weight: 500;}

.main-link-alt a {
  -webkit-transition: ease-in-out 0.7s !important;
  -moz-transition: ease-in-out 0.7s !important;
  -ms-transition: ease-in-out 0.7s !important;
  -o-transition: ease-in-out 0.7s !important;
  transition: ease-in-out 0.7s !important;

}

.main-link-alt i{color: #4457A2;font-size: 16px;transition: ease-in-out 0.7s !important;}


.main-link-alt a:hover {
  margin-left: 20px;
  color: #F17D37;
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
  text-decoration: underline;
}

.main-link-alt a:hover i{color: #F17D37;transition: ease-in-out 0.7s !important;}

.back a:hover {
  margin-left: -20px!important;
  color: #4A87C6;
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
}

/*Btn WhatsApp*/

.floating-whatsapp {
  position: fixed;
  top:80%;
  right: 25px;
  z-index: 9999;
}

.floating-whatsapp a {
  width: auto;
  height: auto;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .5s ease;
}

.floating-whatsapp img {
  width: 50px;
  height: 50px;
}

.floating-whatsapp a:hover{
  transform: translateX(5px) scale(1.1);
      transition: all .5s ease;
}

/* Botón cerrar */
.close-btn {
  position: absolute;
  top: -15px;
  right: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: #FFFFFF99;
  color: #555;
  font-size: 10px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
      transition: all .5s ease;
      display: flex!important;
justify-content: center!important;
align-items: center!important;
}

.close-btn:hover{
  background: #4657A3;
  color: #fff;
      transition: all .5s ease;
}

/* Oculto */
.floating-whatsapp.hide {
  opacity: 0;
  pointer-events: none;
  transform: scale(.8);
  transition: .3s ease;
}

/* ===================================
    Galerias
====================================== */

.swiper-pagination-bullet{
   background:#F17D37;
   opacity:1;
   margin-right: 5px!important;
   margin-left: 8px!important;
}


.swiper-pagination-bullet-active{
 background: #4A87C6;
 box-shadow: 0 0 0 3px rgba(70, 87, 163, 0.3);
}

/* ===================================
    Cards
====================================== */


.glass-card{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  /* base "blanca" pero translúcida */
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(0,0,0,0.06);

  box-shadow: 0 18px 55px rgba(0,0,0,0.12);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* capa 1: distorsión + blur (cristal) */
.glass-layer1{
  isolation: isolate;
  position: absolute;
  inset: 0;
  border-radius: inherit;

  filter: url(#glass-distortion);
  backdrop-filter: blur(10px) saturate(160%) contrast(110%);
  -webkit-backdrop-filter: blur(10px) saturate(160%) contrast(110%);

  opacity: .9;
  pointer-events: none;
}

/*underlay interno (para que se “note” incluso en fondo blanco) */
.glass-layer1::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(600px 240px at 20% 20%, rgba(0,0,0,0.06), transparent 60%),
    radial-gradient(700px 280px at 80% 70%, rgba(0,0,0,0.05), transparent 60%);
  filter: blur(16px);
  opacity: .55;
}

/* capa 2: highlights internos tipo iOS */
.glass-layer2{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.75),
    inset -3px 0 12px rgba(255,255,255,0.45),
    inset 3px 2px 6px rgba(255,255,255,0.35),
    inset -1px -1px 6px rgba(0,0,0,0.06);
  transition: box-shadow .25s ease, opacity .25s ease;
  opacity: .9;
}

/* contenido */
.glass-content{
  position: relative;
  z-index: 2;
}



/* hover sutil */
.glass-card-hover:hover{
  transform: translateY(-4px);
  box-shadow: 0 28px 85px rgba(0,0,0,0.16);
}

.glass-card-hover:hover .glass-layer2{
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.9),
    inset -3px 0 14px rgba(255,255,255,0.55),
    inset 4px 3px 8px rgba(255,255,255,0.45),
    inset -1px -2px 8px rgba(0,0,0,0.08);
}



.card-main .icon img{
  width: 100px;
}

/*Card glass*/

:root{
  /* === GLASS TOKENS === */
  --glass-bg: rgba(255,255,255,.45);     /* nivel de “blanco” */
  --glass-blur: 16px;                    /* blur fuerte pero limpio */
  --glass-saturate: 150%;

  --glass-stroke: rgba(255,255,255,.9);  /* borde principal */
  --glass-shadow: 0 28px 80px rgba(0,0,0,.14);

  --glass-highlight: rgba(255,255,255,.75);
}

.glass{
  position: relative;
  border-radius: 24px;

  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));

  box-shadow: var(--glass-shadow);
  border: 1px solid var(--glass-stroke);

  overflow: hidden;       /* necesario para highlights */
  isolation: isolate;     /* mejora el render del blur */

  transition: transform .25s ease, box-shadow .25s ease;
}


/* Stroke glass (borde degradado) */
.glass::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding: 1px;
  pointer-events:none;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,.95),
    rgba(255,255,255,.35),
    rgba(255,255,255,.85)
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* Highlight superior */
.glass::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  background: linear-gradient(
    180deg,
    var(--glass-highlight),
    rgba(255,255,255,0) 55%
  );
}

.glass--solid{
  --glass-bg: rgba(255,255,255,.9);
}

.glass--light{
  --glass-bg: rgba(255,255,255,.05);
}

.glass--strong{
  --glass-blur: 22px;
}

/* === GLASS SIN BLUR (para contenedores padre) === */
.glass--no-blur{
  /* look similar */
  background: rgba(255,255,255,.65);

  /* desactivar blur del padre */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  /* IMPORTANTÍSIMO: evitar que el padre afecte el blur del hijo */
  isolation: auto !important;
  overflow: visible !important;
}

/* mantiene stroke y highlight */
.glass--no-blur::before,
.glass--no-blur::after{
  opacity: 1;
}

/* === CARD BASE BLOG === */
.image-glass-card{
  position: relative;
  height: 320px;
  border-radius: 16px!important;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 22px 60px rgba(0,0,0,.18);
  transition: transform .35s ease, box-shadow .35s ease;
}

.image-glass-card .tag{
  width: auto;
  background: #4657A3;
  border-radius: 16px;
  padding: 5px 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  color: #fff;
  position: absolute;
  top:10px;
  right: 10px;
  z-index: 111;
  font-weight: 700;
  font-size: 12px;
}

.image-glass-card .tag span{
  margin: 0;
}

.image-glass-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
}

/* === BACKGROUND IMAGE === */
.image-glass-bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;

  transform: scale(1.05);
  transition: transform .6s ease;
}

.image-glass-card:hover .image-glass-bg{
  transform: scale(1);
}

/* overlay sutil para legibilidad */
.image-glass-bg::after{
  content:"";
  position:absolute;
  inset:0;
}

/* === GLASS INFO PANEL === */
.image-glass-info{
  width: 100%;
  position: absolute;
  bottom: 0px;

  padding: 15px 15px;
  border-radius: 16px!important;

  background: rgba(255,255,255,.65);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);

  box-shadow: 0 18px 45px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.85);

  transform: translateY(60%);
  transition: transform .45s ease;
}

/* hover: sube el panel */
.image-glass-card:hover .image-glass-info{
  transform: translateY(0);
}

/* === TEXT === */
.image-glass-info h4{
  font-family: 'Onest', sans-serif!important;
  letter-spacing: 0!important;
  height: 65px!important;
  position: relative;
  z-index: 10;
  font-weight: 500!important;
  color: #1E2022!important;
  display: -webkit-box!important;
  -webkit-box-orient: vertical!important;
  -webkit-line-clamp: 3!important;
  overflow: hidden!important;
}

.image-glass-info .content-description{
  height: 65px!important;
  overflow: hidden!important;
}

.image-glass-info p{
  font-family: 'Roboto', sans-serif !important;
  background-color: transparent!important;
  margin: 0;
  display: -webkit-box!important;
  -webkit-box-orient: vertical!important;
  -webkit-line-clamp: 3!important;
  overflow: hidden!important;
  margin-bottom: 0px;
  text-align: left!important;
}

.image-glass-info span{
  font-family: 'Roboto', sans-serif !important;
  background-color: transparent!important;
  margin: 0;
  display: -webkit-box!important;
  -webkit-box-orient: vertical!important;
  -webkit-line-clamp: 3!important;
  overflow: hidden!important;
  margin-bottom: 0px;
  text-align: left!important;
}

.main-font-card p{
  font-size:0.875rem!important;
  font-weight: 400!important;
  line-height:150%!important;
}

.main-font-card span{
  font-size:0.875rem!important;
  font-weight: 400!important;
  line-height:150%!important;
}

/* === GLASS STROKE + HIGHLIGHT === */
.image-glass-info::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit!important;
  padding: 1px;
  pointer-events:none;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,.95),
    rgba(255,255,255,.35),
    rgba(255,255,255,.85)
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.image-glass-info::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,.6),
    rgba(255,255,255,0) 55%
  );
}




/* ===================================
    Cookies
====================================== */
/* =========================
   COOKIE BANNER (GLASS)
   ========================= */

/* Estado inicial: OCULTO (evita el flash) */
.cookie-banner{
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 9999;

  /* importante: misma transform base que la animación */
  transform: translateX(-50%) translateY(30px);

  /* oculto por defecto */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* estilo glass */
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 20px 60px rgba(0,0,0,.18);

  padding: 20px 15px;

  /* transición suave por si lo cierras sin animación */
  transition: opacity .25s ease, visibility .25s ease;
}

/* Estado visible */
.cookie-banner.cookie-show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  /* dispara animación de entrada */
  animation: cookieIn .6s ease forwards;
}

/* layout */
.cookie-content{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.cookie-text p{
  margin: 0;
}

/* buttons */
.cookie-actions{
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.btn-cookie{
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: all .25s ease;
  white-space: nowrap;
}

/* reject */
.btn-reject{
  background: transparent;
  color: #F97316;
  border: 1px solid rgba(249,115,22,.35);
}
.btn-reject:hover{
  background: rgba(249,115,22,.08);
}

/* accept */
.btn-accept{
  background: #F97316;
  color: #fff;
  box-shadow: 0 6px 18px rgba(249,115,22,.45);
}
.btn-accept:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(249,115,22,.55);
}

/* animation */
@keyframes cookieIn{
  from{
    opacity: 0;
    transform: translateX(-50%) translateY(30px);
  }
  to{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* responsive */
@media (max-width: 768px){
  .cookie-content{
    flex-direction: column;
    align-items: flex-start;
  }
  .cookie-actions{
    width: 100%;
    justify-content: center;
  }
}

/* overlay */
body.cookie-open::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) -15.16%,
    #FFFFFF 68.19%
  );
}
/* ===================================
    hover
====================================== */

.image{
  transition-duration: 5s;
}

.hover-zoom:hover .image,
.parent:hover .hover-zoom .image {
	transform: scale(1.1);
	transition-duration: 5s;
}

.hover-zoom-rotate:hover .image,
.parent:hover .hover-zoom-rotate .image {
	transform: scale(1.1) rotate(3deg);
	transition-duration: 7s;
}


/* ===================================
    Call to action
====================================== */


/* ===================================
    Paginador
====================================== */


.pagination{
  align-items: center;
}

.page-link{
  background: transparent;
  border: 0px solid #BB2026;
  color: #F17D37;
  opacity: 1;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 3px;
  cursor: pointer;
}

.page-link:hover{
  background: transparent;
  color: #4A87C6!important;
  opacity: 1;
}

.page-link:focus{
  box-shadow: 0 0 0 0rem rgba(13, 110, 253, .25);
}


.pagination .active{
  width: 30px;
height: 30px;
background: #FFBD96;
border-color: #F17D37;
color: #fff;
text-decoration: none;
opacity: 1;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.first .page-link{
  color:#A8A8A8;
  border-radius: 0px ;
  border: 1px solid transparent !important;
  width: auto;
  height: auto;
  margin: 0px;
  opacity: 1;
}

.pagination .disabled{
  opacity: .35;
cursor: auto;
pointer-events: none;
}



.pagination .disabled:focus{
  border: 0px;
}

.last .page-link{
  color:#A8A8A8;
  border-radius: 0px;
  border: 1px solid transparent;
  width: auto;
  height: auto;
  margin: 0px;
  opacity: 1;
}

.prev .page-link{
  color: #A8A8A8;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 3px;
  padding: 0px;
  border: none!important;
  opacity: 1;
}

.next .page-link{

  color: #A8A8A8;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 3px;
  padding: 0px;
  border: none!important;
  opacity: 1;
}

.prev .page-link:hover{
  color: #4657A3!important;
}


.next .page-link:hover{
  color: #4657A3!important;
}

.last .page-link:hover{
  color: #4657A3!important;
  background: transparent !important;

}

.first .page-link:hover{
  color: #4657A3!important;
  background: transparent !important;

}

.pagination li {
  list-style: none;
  margin: 0 4px;
}

.pagination li.dots span {
  padding: 6px 10px;
  color: #999;
  font-weight: 600;
  user-select: none;
}

/*Focus*/


.pagination a:focus{
outline: none; box-shadow: none;
}

.next a:focus{
outline: none; box-shadow: none;
background: transparent;
color: #D42C1C;
}
.prev a:focus{
outline: none; box-shadow: none;
background: transparent;
color: #D42C1C;
}

.last a:focus{
outline: none; box-shadow: none;
background: transparent;
}

.first a:focus{
outline: none; box-shadow: none;
background: transparent;
}

/* ===================================
    Grid
====================================== */

.grid-1fr{grid-template-columns: 1fr;}
.grid-50{grid-template-columns: 1fr 1fr}
.no-gap{gap:0px;}
.gap-10{gap:10px;}
.gap-20{gap:20px;}
.gap-30{gap:30px;}
.gap-40{gap:40px;}
.gap-50{gap:50px;}
.gap-100{gap:100px;}
.order-1{order:1!important;}
.order-2{order:2!important;}

/* ===================================
    Alertas
====================================== */

.noti-info{
  color:#fff;
  background: #4A87C6;
  border-radius: 10px;
  padding: 15px;
}


/* ===================================
    Forms
====================================== */



/* ====== INPUTS / SELECT / TEXTAREA (look Figma) ====== */
.glass-form .form-control,
.glass-form .form-select{
  height: 44px;
  border-radius: 10px;            /* en tu captura se ve 8-10 */
  background-color: #F9F9F9;
  color: #949494;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
  padding: 10px 14px;
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
  font-size: 14px;
}

/* Placeholder suave */
.glass-form .form-control::placeholder{
  color: rgba(0,0,0,0.45);
}

/* Textarea grande como la captura */
.glass-form textarea.form-control{
  height: 120px;      /* parecido a tu figma */
  resize: none;
  padding-top: 12px;
}

/* Focus “clean” (sin glow azul feo) */
.glass-form .form-control:focus,
.glass-form .form-select:focus{
  background-color: #FFFFFF;
  border-color: rgba(0,0,0,0.10);
  box-shadow:
    0 0 0 3px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

/* ====== BOTÓN (tu .main-btn-main) ======
   No lo toco mucho porque ya lo tienes,
   solo lo centro y le doy spacing. */
.glass-form .main-btn-main{
  border-radius: 999px;
}



/* ===================================
    borders
====================================== */



/* ===================================
    Responsive
====================================== */

/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {


} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {



/*Grid*/
.sm-grid-80{grid-template-columns: 80% 1fr;}
.sm-grid-75{grid-template-columns: 75% 1fr;}
.sm-grid-70{grid-template-columns: 70% 1fr;}
.sm-grid-65{grid-template-columns: 65% 1fr;}
.sm-grid-60{grid-template-columns: 60% 1fr;}
.sm-grid-55{grid-template-columns: 55% 1fr;}
.sm-grid-50{grid-template-columns: 1fr 1fr;}
.sm-grid-45{grid-template-columns: 45% 1fr;}
.sm-grid-35{grid-template-columns: 35% 1fr;}
.sm-grid-30{grid-template-columns: 30% 1fr;}
.sm-grid-3fr{grid-template-columns: repeat(3,1fr);}
.sm-no-gap{gap:0px;}
.sm-gap-10{gap:10px;}
.sm-gap-20{gap:20px;}
.sm-gap-30{gap:30px;}
.sm-gap-40{gap:40px;}
.sm-gap-50{gap:50px;}
.sm-gap-100{gap:100px;}
.sm-order-1{order:1!important;}
.sm-order-2{order:2!important;}



}
/* md  */ @media (min-width: 768px) {

/*Cards*/
.image-glass-info{
  transform: translateY(57%);
}
.image-glass-info h4{height: 80px!important;}
.image-glass-info .content-description{height: 70px!important;}
.main-font-card p{font-size:1rem!important;}
.main-font-card span{font-size:1rem!important;}

/*Grid*/
.md-grid-80{grid-template-columns: 80% 1fr;}
.md-grid-75{grid-template-columns: 75% 1fr;}
.md-grid-70{grid-template-columns: 70% 1fr;}
.md-grid-65{grid-template-columns: 65% 1fr;}
.md-grid-60{grid-template-columns: 60% 1fr;}
.md-grid-55{grid-template-columns: 55% 1fr;}
.md-grid-50{grid-template-columns: 1fr 1fr;}
.md-grid-45{grid-template-columns: 45% 1fr;}
.md-grid-40{grid-template-columns: 40% 1fr;}
.md-grid-35{grid-template-columns: 35% 1fr;}
.md-grid-30{grid-template-columns: 30% 1fr;}
.md-grid-3fr{grid-template-columns: repeat(3,1fr);}
.md-no-gap{gap:0px;}
.md-gap-10{gap:10px;}
.md-gap-20{gap:20px;}
.md-gap-30{gap:30px;}
.md-gap-40{gap:40px;}
.md-gap-50{gap:50px;}
.md-gap-100{gap:100px;}
.md-order-1{order:1!important;}
.md-order-2{order:2!important;}



} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {

/*Grid*/
.lg-grid-80{grid-template-columns: 80% 1fr;}
.lg-grid-75{grid-template-columns: 75% 1fr;}
.lg-grid-70{grid-template-columns: 70% 1fr;}
.lg-grid-65{grid-template-columns: 65% 1fr;}
.lg-grid-60{grid-template-columns: 60% 1fr;}
.lg-grid-55{grid-template-columns: 55% 1fr;}
.lg-grid-50{grid-template-columns: 1fr 1fr;}
.lg-grid-45{grid-template-columns: 45% 1fr;}
.lg-grid-40{grid-template-columns: 40% 1fr;}
.lg-grid-35{grid-template-columns: 35% 1fr;}
.lg-grid-30{grid-template-columns: 30% 1fr;}
.lg-grid-3fr{grid-template-columns: repeat(3,1fr);}
.lg-no-gap{gap:0px;}
.lg-gap-10{gap:10px;}
.lg-gap-20{gap:20px;}
.lg-gap-30{gap:30px;}
.lg-gap-40{gap:40px;}
.lg-gap-50{gap:50px;}
.lg-gap-100{gap:100px;}
.lg-order-1{order:1!important;}
.lg-order-2{order:2!important;}


} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {}
/* xxl */ @media (min-width: 1400px) {}