@import url('https://fonts.googleapis.com/css?family=Exo:700');
@import url('https://fonts.googleapis.com/css?family=Abel');


.clDefaultCard{
  background: #e9e3e3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;

  
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display:flex; flex:1;max-width: 43%; min-width: 24%;
}


.clLeftIconCard{
  background: #eeecec;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  
  
}






.clCardBox{ margin: 3px;}

.clprodCardBox{ width: 510px;height: 345px; margin: 7px; border-radius: 7px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

}

.clprodCardBox .SideCard{  position: relative;
  
  
  /*transform: translate(-50%,-50%);*/
  width: 510px;
  height: 345px;
  background: transparent; } 



.card1 title{
  width:100%;
  text-align: center;
}
.card1 title h1{
  font-size:50px;
  
  
  font-family: 'Exo', sans-serif;
}
.card1 {
  text-align:center;
  position: absolute;
  left: 3px;
  width: 98%;
  height: 350px;
  margin-top: 3px;
  margin-bottom: 3px;
  background: linear-gradient(rgb(133, 160, 233),rgb(115, 151, 140));
  transition:.6s;
  
  transform: rotatex(60deg) translatey(-200px) translatez(-100px);
  box-shadow: 0px 20px 60px rgba(0,0,0, 0.5);
}
.card1:hover{
  transform: rotatex(0deg);
  transform: rotatez(0deg);
  transition:.6s;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
.card1 img{
  transform: translateY(15px);
  width:96%;
  height:120px;
}
.card1 h3{
  padding: 5px 8px;
  font-size:25px;
  font-family: 'Abel', sans-serif;
  color:rgb(255,255,255);
  font-weight: bolder;
  text-shadow: 0 0 2px rgb(255,255,255);
  transform: translatey(10px);
}

.card1 p{
  
  font-family: 'Abel', sans-serif;
  color: white;
  text-align:center;
  width:96%;
  transform: translatex(12px);
}

.clSahpe05 .clShapeText{ max-width:220px; width:120%; height:auto; max-height:70px; overflow:hidden; line-height:40px; 
  font-weight:bolder; color:rgb(255, 255, 255);
  text-shadow: 1px 1px 0 rgb(27, 28, 25); font-size:1.7em; font-weight: bolder;
  z-index:100;
  transform: rotate(-45deg);
  margin: -35px 0px 0px -30px;
  
  }


  .clSahpe05{
    background:transparent;
    
    position: absolute;
    top:-3px;
    left: -3px;
    width: 180px;
    height: 180px;
    display: flex;
    justify-content:center;
    align-items: center;
    overflow: hidden;
    text-align: center;
    z-index:10;
  
  }



  .clSahpe05:before{
    content: "";
    position: absolute;
    top:-103px;
    height: 180%;
    width: 40px;
    background: #ff1500;
    transform: rotate(45deg);
    
  }
  
  
/*****************************************************************************/
.clC2Content{display: flex; margin-left: -20px; position: relative; justify-content: space-around;}


.card2{
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  min-width: 450px;
  width: 450px;
  max-width: 550px; 
  margin: 0px 20px;
  display:flex; 
  flex-direction: column;
  flex: 0 0 450px;
  align-items: center;
  justify-content: center;

}

  



.card2 .face{
  width: 100%;
  height: 200px;
  transition: 0.5s;
}

.card2 .face.face1{
  position: relative;
  background: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  transform: translateY(100px);
  width: 100%;
  min-width: 450px;
  box-sizing: border-box;
  min-height: 310px;
}

.card2:hover .face.face1{
  background: #aeca10;
  transform: translateY(0);
}

.card2 .face.face1 .content{
  opacity: 1;
  transition: 0.5s;
  width: 100%;
  
  
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}

.card2:hover .face.face1 .content{
  opacity: 0.5;
}

.card2 .face.face1 .content img{
  width: 70%;
  max-width: 70%;
  height: auto;
  object-fit: contain;
}

.card2 .face.face1 .content h3{
  margin: 10px 0 0;
  padding: 0;
  color: var(--color-text, #111827); 
  text-align: center;
  font-size: 1.5em;
}

.card2 .face.face2{
  position: relative;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
  transform: translateY(-100px);
}

.card2:hover .face.face2{
  transform: translateY(0);
}

.card2 .face.face2 .content p{
  margin: 0;
  padding: 0;
overflow:hidden; max-height:145px;
}

.card2 .face.face2 .content a{
  margin: 15px 0 0;
  display:  inline-block;
  text-decoration: none;
  font-weight: 900;
  color: #333;
  padding: 5px;
  border: 1px solid #333;
}

.card2 .face.face2 .content a:hover{
  background: #333;
  color: #fff;
}




.card2 .face .content>img{
border-radius:10px;box-shadow:0px 0px 1px 4px #fff;

width: 90%;
max-width: 90%;
min-width: 90%;
height: auto;
object-fit: contain;

}


/*****************************************************************************/

.SideCard {
  position: relative;
  
  
  /*transform: translate(-50%,-50%);*/
  width: 360px;
  height: 410px;
  background: transparent;
}
.SideCard .image {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.SideCard .image img {
  width: 100%;
  transition: .5s;
}
.SideCard:hover .image img {
  opacity: .5;
  transform: translateX(30%);/*100%*/
}
.SideCard .details {
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;/*100%*/
  height: 100%;
  background: #a7a9ac ;
  transition: .5s;
  transform-origin: left;
  transform: perspective(2000px) rotateY(-90deg);
}
.SideCard:hover .details {
  transform: perspective(2000px) rotateY(0deg);
}
.SideCard .details .center {
  padding: 20px;
  text-align: center;
  background: #fff;
  position: absolute;
width:100%;
  top: 50%;
  transform: translateY(-50%);
}
.SideCard .details .center h1 {
  margin: 0;
  padding: 0;
  color: #2f2c7e;
  line-height: 20px;
  font-size: 20px;
  text-transform: uppercase;
font-weight:bolder;
}
.SideCard .details .center h1 span {
  font-size: 14px;
  color: #262626;
}
.SideCard .details .center p {
  margin: 10px 0;
  padding: 0;
  color: #262626;
}
.SideCard .details .center ul {
  margin: 10px auto 0;
  padding: 0;
  display: table;
width: 100%;
max-width:200px;

}
.SideCard .details .center ul li {
  list-style: none;
  margin: 0 5px;
width: 100%;
  

}
.SideCard .details .center ul li a {
  display: block;
  background: #2f2c7e;
  color: #fff;
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  transform: .5s;
}
.SideCard .details .center ul li a:hover {
  background: #aeca10;
color: #2f2c7e;
}

/*****************************************************************************/
/* Nuevas Cards - Agregadas sin modificar estilos existentes */

/* Card 3 - Efecto Zoom con Overlay */
.card3 {
  position: relative;
  width: 300px;
  height: 400px;
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-base) var(--easing-standard),
              box-shadow var(--duration-base) var(--easing-standard);
  cursor: pointer;
}

.card3:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.card3__media {
  width: 100%;
  height: 60%;
  overflow: hidden;
  position: relative;
}

.card3__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-base) var(--easing-standard);
}

.card3:hover .card3__media img {
  transform: scale(1.1);
}

.card3__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(11, 94, 215, 0.9), transparent);
  opacity: 0;
  transition: opacity var(--duration-base) var(--easing-standard);
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
}

.card3:hover .card3__overlay {
  opacity: 1;
}

.card3__overlay-text {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
}

.card3__body {
  padding: var(--space-4);
  height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card3__title {
  margin: 0 0 var(--space-2);
  font-size: 1.25rem;
  color: var(--color-secondary);
  font-weight: 600;
}

.card3__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.card3__link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  margin-top: var(--space-3);
  transition: color var(--duration-fast) var(--easing-standard);
}

.card3__link:hover {
  color: var(--color-primary-600);
}

/* Card 4 - Minimalista con Borde Animado */
.card4 {
  position: relative;
  width: 300px;
  height: 350px;
  background: #fff;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: all var(--duration-base) var(--easing-standard);
  overflow: hidden;
}

.card4::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--color-primary), var(--color-accent), var(--color-primary));
  background-size: 200% 200%;
  border-radius: var(--radius-md);
  opacity: 0;
  z-index: -1;
  transition: opacity var(--duration-base) var(--easing-standard);
  animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.card4:hover::before {
  opacity: 1;
}

.card4:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.card4__icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-600));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  color: #fff;
  font-size: 2rem;
}

.card4__title {
  margin: 0 0 var(--space-3);
  font-size: 1.5rem;
  color: var(--color-secondary);
  font-weight: 700;
}

.card4__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Card 5 - Glassmorphism */
.card5 {
  position: relative;
  width: 320px;
  height: 400px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all var(--duration-base) var(--easing-standard);
  overflow: hidden;
}

.card5::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(11, 94, 215, 0.1), rgba(239, 176, 52, 0.1));
  opacity: 0;
  transition: opacity var(--duration-base) var(--easing-standard);
  z-index: -1;
}

.card5:hover::before {
  opacity: 1;
}

.card5:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.card5__header {
  margin-bottom: var(--space-4);
}

.card5__badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: rgba(11, 94, 215, 0.2);
  border: 1px solid rgba(11, 94, 215, 0.3);
  border-radius: 999px;
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.card5__title {
  margin: var(--space-3) 0 var(--space-2);
  font-size: 1.5rem;
  color: var(--color-secondary);
  font-weight: 700;
}

.card5__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.card5__footer {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.card5__button {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: rgba(11, 94, 215, 0.2);
  border: 1px solid rgba(11, 94, 215, 0.3);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all var(--duration-fast) var(--easing-standard);
}

.card5__button:hover {
  background: rgba(11, 94, 215, 0.3);
  border-color: rgba(11, 94, 215, 0.5);
}

/*****************************************************************************/
/* Estilos para el Catálogo de Cards */

.catalog-hero {
  text-align: center;
  padding: var(--space-12) var(--space-6);
}

.catalog-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--color-secondary);
  margin: 0 0 var(--space-4);
}

.catalog-intro {
  font-size: 1.125rem;
  color: var(--color-text-muted);
  max-width: 60ch;
  margin: 0 auto;
  line-height: 1.7;
}

.catalog-section {
  margin-bottom: var(--space-8);
}

.catalog-section__header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-border);
}

.catalog-section__header h2 {
  font-size: 1.75rem;
  color: var(--color-secondary);
  margin: 0 0 var(--space-2);
}

.catalog-section__desc {
  color: var(--color-text-muted);
  font-size: 1rem;
  margin: 0 0 var(--space-3);
  line-height: 1.6;
}

.catalog-code {
  display: inline-block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  font-family: 'Courier New', monospace;
  font-size: 0.875rem;
  color: var(--color-primary);
  font-weight: 600;
}

.catalog-demo {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  padding: var(--space-8);
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.catalog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-top: var(--space-6);
}


@media (min-width: 1024px) {
  .catalog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


@media (min-width: 768px) {
  .catalog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.catalog-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
  transition: transform var(--duration-base) var(--easing-standard),
              box-shadow var(--duration-base) var(--easing-standard);
}

.catalog-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.catalog-item h3 {
  font-size: 1.25rem;
  color: var(--color-secondary);
  margin: 0 0 var(--space-4);
  font-weight: 600;
}

.catalog-item__preview {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 280px;
  padding: var(--space-4);
  background: #fff;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

@media (max-width: 767px) {
  .catalog-demo {
    min-height: 300px;
    padding: var(--space-4);
  }
  
  .catalog-section__header h2 {
    font-size: 1.5rem;
  }
  
  .catalog-item__preview {
    min-height: 200px;
  }
}









/*****************************************************************************/
/* Estilos para Publicaciones Grandes (1080px) */

.catalog-posts-section {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 3px solid var(--color-border);
}

.catalog-posts-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-items: center;
  margin-top: var(--space-6);
}

.catalog-post-large {
  width: 100%;
  max-width: 1080px;
  display: flex;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: transform var(--duration-base) var(--easing-standard),
              box-shadow var(--duration-base) var(--easing-standard);
}

.catalog-post-large:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.catalog-post-large__media {
  flex: 0 0 45%;
  max-width: 45%;
  overflow: hidden;
  position: relative;
}

.catalog-post-large__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-base) var(--easing-standard);
}

.catalog-post-large:hover .catalog-post-large__image {
  transform: scale(1.05);
}

.catalog-post-large__body {
  flex: 1;
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.catalog-post-large__title {
  margin: 0 0 var(--space-4);
  font-size: 1.875rem;
  color: var(--color-secondary);
  font-weight: 700;
  line-height: 1.3;
}

.catalog-post-large__content {
  color: var(--color-text, #111827);
  font-size: 1rem;
  line-height: 1.8;
}

.catalog-post-large__content p {
  margin: 0 0 var(--space-4);
}

.catalog-post-large__content p:last-child {
  margin-bottom: 0;
}

/* Variante con imagen a la derecha */
.catalog-post-large--reverse {
  flex-direction: row-reverse;
}

.catalog-post-large--reverse .catalog-post-large__media {
  flex: 0 0 45%;
  max-width: 45%;
}

@media (max-width: 1024px) {
  .catalog-post-large {
    max-width: 100%;
  }
  
  .catalog-post-large__title {
    font-size: 1.5rem;
  }
  
  .catalog-post-large__body {
    padding: var(--space-6);
  }
}

@media (max-width: 768px) {
  .catalog-post-large {
    flex-direction: column;
    max-width: 100%;
  }
  
  .catalog-post-large--reverse {
    flex-direction: column;
  }
  
  .catalog-post-large__media {
    flex: 0 0 auto;
    max-width: 100%;
    height: 300px;
  }
  
  .catalog-post-large__body {
    padding: var(--space-5);
  }
  
  .catalog-post-large__title {
    font-size: 1.375rem;
  }
  
  .catalog-post-large__content {
    font-size: 0.9375rem;
  }
  
  .catalog-posts-container {
    gap: var(--space-6);
  }
}

@media (max-width: 480px) {
  .catalog-post-large__media {
    height: 250px;
  }
  
  .catalog-post-large__body {
    padding: var(--space-4);
  }
  
  .catalog-post-large__title {
    font-size: 1.25rem;
  }
  
  .catalog-post-large__content {
    font-size: 0.875rem;
    line-height: 1.6;
  }
}

/******************************************media queries ******************************************/

@media (max-width: 1400px) { 

  .card2{
    
        
    min-width: 370px;
    
    flex:1;
    max-width: 500px; 
    margin: 0px 10px;
    flex-shrink: 1;
        
    
    
    
  
  }
  


}



@media (max-width: 1200px) { 

  .card2{
    
        
    min-width: 450px;
    
    flex:1;
    max-width: 550px; 
    margin: 0px 10px;
    flex-shrink: 1;
        
    
    
    
  
  }
  


}