/*DEFINICIÓN VARIABLES*/

:root{

--color-principal:#FFFFFF;
--color-secondary: #5ba5c0 ;

--color-background: #F2F7F9;
--color-transparent: transparent;

--color-icon: #B5B6B7;
--color-titles: #222222;
--color-subtitle: #888;
--color-text: #555;


--color-border-reviews:#E5E6E7;
--color-company: #A5A6A7;
--color-background-certificate: #f5f5f5;
--color-background-contact:  #FCFCFC;



}


/* ESTILOS GENERALES*/

html{

font-size: 62.5%; /*Equivale a 10px*/

}

img{

filter: blur(0px);
transition: all 300ms ease-in-out;

}

img:hover{

filter: blur(0.5px);

}

body{


width: 100%;
height: auto;
background: var(--color-background);
font-family: "Poppins", Arial, Helvetica, sans-serif;
font-size: 1.5rem;
color: var(--color-text);
overflow: hidden;

}

h1, h2, h3, h4 h5, h6{



color: var(--color-titles);


}

/*Imagen de fondo*/

body{

background-image: url(../img/fondo.png);
background-size: cover;
background-repeat:no-repeat;
background-position: -28px -120px;
max-width: 100%;
margin: 0 auto;
padding: 20px;


}

/* Estructura principal o layout*/


.layout{


position: relative;
min-width: 1290px;
width: 75%;
height: 85vh;
min-height: 80vh;
margin: 13vh auto;
margin-left: 6rem;
margin-top: 4rem;
display: grid;
grid-template-areas: "aside content";
grid-template-columns: 30% 70%;}

/*Sombra detrás del layout*/
.layout{
border-radius: 4rem;
box-shadow: 0 0 100px -5px rgba(0,0,0,0.25);}

/*Barra lateral azul*/

.layout {
  border-radius: 78rem;
  box-shadow: 61px 21px 127px -5px rgba(82, 73, 198, 0.24);
  background-color: var(--color-secondary);
}
.layout__aside{


grid-area: aside;

border-radius: 4rem 0rem 0rem 4rem;



}

.aside__user-info{


display: flex;
flex-direction: column;
align-items: center;
text-align: center;

min-height: 100%;
min-width: rem;
border-radius: 2rem;
background-color: var(--color-secondary);
color: var(--color-principal);

}

.user-info__container-image{

position: relative;
display: inline-block;
margin-top: 7rem;
width: 18rem;
z-index: 1;




}






.user-info__image{

width: 100%;
background-color: var(--color-principal) ;

border-radius: 20rem;



}

.user-info__container-image::after{
    content: "";

    top: 5%;
    left: 9%;
    z-index: -1;

    width: 100%;
    height: 100%;
   
    background-image: -webkit-repeating-radial-gradient(center,center white, white 1px, transparent 1px, transparent 100%);
    background-size: 0.6rem 0.6rem;
    border-radius: 30rem;
  opacity: 0.4;
   



}

.user-info__name{
margin-top: 2.6rem;
color: var(--color-principal);
font-size: 3.2rem;
font-weight: bold;



}

.user-info__job{

font-size: 1.7rem;
font-weight: 200;
color: var(--color-principal);
}

.user-info__links{


margin-bottom: 3.6rem;

}

.links__social{

text-align: center;
margin-top: 2rem;
display:flex;
flex-direction: row;
}

.social__option{

height: 3rem;
width: 3rem;
font-size: 1.8rem;
line-height: 3.2rem;
opacity: 0.9;
border-radius: 3rem;
transition: all 300ms ease-in-out;

}


.social__option:hover{

opacity: 1;
background-color: rgba(255, 255, 255, 0.20);

}

.user-info__buttons{

margin-top: 2rem;
margin-bottom: 9rem;


}

.user-info__btn {
	border: 2px solid var(--color-principal);
	padding: 3rem;
	padding-bottom: 1.3rem;
	padding-top: 1.3rem;
	border-radius: 3.2rem;
	color: var(--color-principal);
	box-shadow: 0 10px 10px -8px rgba(0,0,0,.22);
	transition: all 300ms ease-in-out;
	position: relative;
	/* padding-bottom: 2rem; */
	margin-bottom: -4rem;
  margin-top: -2rem;
}

.user-info__btn:hover{

background: var(--color-principal);
color: var(--color-secondary);

}

.user-info__footer{

position: absolute;
bottom: 2rem;
font-size: 1.2rem;


}




/*Contenedor principal*/



.layout__content{


grid-area: content;
background: var(--color-secondary);
border-radius: 0 10rem 10rem 0;
height: 100%;
min-height: 100%;
}

.content__page{

min-height: 100%;
  background-color: var(--color-principal);
  border-radius: 3.2rem;
align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page__name{

font-size: 6rem;
margin-bottom: 1rem;


}

.page__job{

font-size: 2.1rem;
font-weight: lighter;
color: var(--color-subtitle);


}

/*pMenu de navegacion lateral*/
.layout__menu{

display: block;
position: absolute;
top: 0;
right: -10.5rem;
background-color: var(--color-transparent);
min-width: 11rem;


}

.menu__list{
width: 60%;
position: relative;
background-color:var(--color-principal);
min-height: 32rem;
box-shadow: 0 0 3rem -0.5rem rgba(0,0,0,.15);
border-radius: 6rem;
display: flex;

padding: 2rem 0;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin-left: 2.5rem;


}

.menu__icon{

color: var(--color-icon);
font-size: 2.8rem;
transition: all 300ms ease-in-out;

}

.menu__option{

display: block;
width: 100%;
text-align: center;



}

.menu__option:hover .menu__icon
{

color: var(--color-secondary);

}


.menu__overlay{
opacity: 0;
display: block;
opacity:0;
padding: 0.5rem 1rem; 
margin-top: -2.8rem;
background-color: var(--color-secondary);
white-space: nowrap;
color: var(--color-principal);
position: absolute;
right: 0;
transition: all 300ms ease-in-out;
border-radius: 2rem;


}

.fa-instagram{

transition: all 300ms ease-in-out;

}

.fa-youtube{

transition: all 300ms ease-in-out;

}

.fa-youtube:hover {
  content: "\f167";
  color: rgb(255, 10, 10);
  opacity: 0.9;

}

.fa-instagram:hover {
  content: "\f16d";
  color: pink;
}

.menu__option:hover .menu__overlay{

  opacity:1;
  right: -130%;



}

/* ESTILOS GENERALES (SOBRE MI Y OTRAS PÁGINAS)*/

.content__about,
.content__resume,
.content__portfolio,
.content__blog,
.content__contact
{

overflow: auto;
height: 100%;
padding: 6rem;
padding-right: 3rem;
min-height: 100%;

min-height: 100%;

  display: block;

}

.about__header,
.resume__header,
.portfolio__header,
.blog__header,
.contact__header{

margin-bottom: 4.5rem;
display: inline-block;


}

.about__title,
.resume__title,
.portfolio__title,
.blog__title,
.contact__title{

font-size: 3.2rem;
position: relative;

}


.about__title::after,
.resume__title::after,
.portfolio__title::after,
.blog__title::after,
.contact__title::after
{

  content: "";
  position: absolute;
 right: -2.5rem ;
  top: 2rem;
  right: -2rem;
  background-image: -webkit-repeating-radial-gradient(center center, var(--color-secondary), var(--color-secondary) 1px, transparent 0px, transparent 100px);
  background-size: 6px 6px;
  width: 5rem;
  height: 3rem;
  opacity: 0.5;
}



.title__color,
.subtitle__color{

color: var(--color-secondary);

}



/*informacion personal*/

.about__personal-info{

width: 100%;
display: flex;
flex-direction: row;
margin-bottom: 5rem;


}

.personal-info__bio{

flex-basis: 55%


}

.personal-info__data{

flex-basis: 45%;
padding: 0 1.5rem;

}

.personal-info__description{

font-size: 1.5rem;
line-height: 2.4rem;


}

.personal-info__option{


margin-bottom: 1rem;

}

.personal-info__title{
margin-right: 0.5rem;
  color: var(--color-secondary);
  font-weight: 600;
  margin-right: 0.5rem;
}

/* Accesibilidad básica */
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* Suavidad sin marear */
@media (prefers-reduced-motion: no-preference) {
  .services__service { transition: transform .25s ease, box-shadow .25s ease; }
  .services__service:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
  .user-info__btn { transition: filter .2s ease, transform .2s ease; }
  .user-info__btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
}

/* Imágenes accesibles y limpias */
.user-info__image { border-radius: 9999px; box-shadow: 0 6px 18px rgba(0,0,0,.15); }

/* Tipografía y legibilidad */
.personal-info__description { line-height: 1.7; max-width: 60ch; }



/*maquetando los servicios*/
/*estilos generales compartidos about y opras secciones*/
.about__services,
.about__reviews,
.about__clients,
.about__prices,
.about__extra,
.resume__title{

width: 100%;
margin-bottom: 3rem;
}


.services__header,
.reviews__header,
.clients__header,
.prices__header,
.extra__header,
.resume__subheader,
.contact__form-header{
margin-bottom: 2.5rem;
display: inline-block;
padding-right: 1.2rem;
position: relative;

}





.services__title,
.reviews__title,
.clients__title,
.prices__title,
.extra__title,
.resume__title,
.resume__subtitle,
.contact-header__title
{

font-size: 2.1rem;


}

.services__title::after,
.reviews__title::after,
.clients__title::after,
.prices__title::after,
.extra__title::after,
.resume__title::after,
.contact-header__title::after

{

  content: "";
  position: absolute;
  top: 1.5rem;
right:0;
  background-image: -webkit-repeating-radial-gradient(center center, var(--color-secondary), var(--color-secondary) 1px, transparent 0px, transparent 3px);
  background-size: 6px 6px;
  width: 3rem;
  height: 2rem;
  opacity:0.5;
}

.services__container{

display: flex;
width: 100%;
flex-direction: row;
flex-wrap: wrap;



}

.services__service{

flex-basis:calc(50% - 3rem);
margin-bottom: 2.5rem;;
margin-right: 3rem;

}

.services__title,
.reviews__title
{

font-size: 2.1rem;

}

.service__real-icon{


color: var(--color-secondary);
font-size: 3.8rem;

}

.service__title{

font-size: 1.8rem;
margin: 0.5rem 0;


}


.services__container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.5rem;
}

.services__service{
  background: #fff;
  border-radius: 16px;
  padding: 1.25rem 1.25rem 1.5rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.services__service:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
}

.service__icon{
  width:48px;height:48px;display:grid;place-items:center;
  border-radius:12px;background:rgba(0,0,0,.05);margin-bottom:.75rem;
}

.service__real-icon{ font-size:1.2rem; }

.service__title{ margin:0 0 .25rem 0; font-weight:700; }
.service__description{ margin:0; line-height:1.6; }


.service__logo-link {
  display: inline-block;
  margin-top: 0.75rem;
}

.service__logo {
  height: 48px; /* Tamaño pequeño */
  width: auto;
  border-radius: 6px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service__logo:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}


.timeline__logo{

 height: 100px; /* tamaño más pequeño */
  width: auto;  /* mantiene proporción original */
  opacity: 0.85; /* opcional, para que no destaque demasiado */

}



.timeline__client-logo {
  height: 50px; /* tamaño más pequeño */
  width: auto;  /* mantiene proporción original */
  opacity: 0.85; /* opcional, para que no destaque demasiado */
}


.service__description{

font-size: 1.5rem;
text-align: justify;


}

/*REVIEWS*/

.reviews__container{

width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.reviews__review{

flex-basis: calc(50% - 2.5rem);
border: 2px solid var(--color-border-reviews);
border-radius: 2rem;
padding-top: 0 ;
padding-right: 2.5rem;
padding-left: 2.5rem;
padding-bottom: 1.5rem;
margin-right: 2.5rem;
margin-top: 4.5rem;
margin-right: 2.5rem;
margin-bottom: 1rem;

}

.review__image-container{

width: 100%;

}

.review__image{


max-width: 9rem;
max-height: 9rem;
border-radius: 9rem;
margin:  0 auto;
margin-top: -4.5rem;
margin-bottom: 2rem;
box-shadow: 0px 10px 10px -8px rgba(0, 0, 0, 0.22);

}

.review__description{

margin-bottom: 1rem;


}

.practicas__container{

margin-top: 100px;

}

.review__text{


font-size: 1.5rem;

line-height: 2.4rem;

}

.review__author{

margin-top: 2rem;
display: flex;
flex-direction: row;
justify-content: space-between;


}

.review__name{


margin-bottom: 0.5rem;
font-size: 1.5rem;

}

.review__company{

color: var(--color-company);
font-weight: 300;
font-size: 1.3rem;

}

.review__icon{


font-size: 4rem;
opacity: 0.5;
color: var(--color-secondary);

}

/*lenguajes de programación*/

.about__languages{


width: 100%;
margin-bottom: 2rem;

}

.languages__header{

margin-bottom: 3rem;


}

.languages__container{

display: flex;
flex-direction: row;
justify-content: space-between;


}



.languages__link{

display: block;
width: 100%;
opacity: 0.8;
transition: all 300ms linear;

}

.languages__link:hover{


  opacity: 1;
  transform: translateY(1rem);
z-index: 1;
  }

.languages__image{
margin-top: 2rem;
width: 12rem;
padding: 1.5rem;
margin-bottom: 1.5rem;
transition: all 300ms ease-in-out;

}

.languages__item{

transition: all 300ms ease-in-out;

}

.languages__image:hover{

  background-color: var(--color-background-certificate);
  border-radius: 9rem;
  opacity: 1;
  box-shadow: 0 0 1rem 0.7rem var(--color-secondary);


  
  }

/*PRECIOS*/


.prices__container{

margin-bottom: 5rem;
display: flex;
flex-direction: row;


}

.price__box{

flex-basis: calc(50% );
border: 2px solid var(--color-border-reviews);
padding:3rem ;
margin-right: 3rem;
text-align: center;
border-radius: 1.5rem;
transition: all 300ms ease-in-out;
height: 100%;



}

.price__box:last-of-type{


margin-right: 0rem;

}

.price__box:hover{


box-shadow:  0 18px 24px -5px rgba(0,0,0,.15);
transform: translateY(1rem);
 
}

.prices__subtitle{


margin-bottom: 3rem;



}

.prices__text{


display: inline-block;
position: relative;

}

.prices__box:hover .prices__text::after{


content: "";
height: 2px;
background-color: var(--color-secondary);
left: 0;
bottom: -3px;
height: 2px;
right: 0;

}

.prices__number{
display: block;
font-size: 4.2rem;
line-height: 1;
color: var(--color-titles);

}

.prices__advice{


color: var(--color-subtitle);
display: block;

}

.prices__buy{

padding-top: 2.5rem;
padding-bottom: 3rem;

}

.prices__btn{

border: 2px solid var(--color-border-reviews);
box-shadow: 0 10px 10px -8px var(--color-border-reviews);
border-radius: 3rem;
padding: 1.2rem 3.1rem;
display: inline-block;
transition: all 300ms ease-in-out;

}

.prices__btn:hover{

border: 2ps solid var(--color-secondary);
background-color: var(--color-secondary);
color: var(--color-principal);



}

.prices__reward{


font-size: 1.4rem;
padding: 0.6rem;

}

.prices__container{
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.price__box{
  background:#fff; border-radius:16px; padding:1.25rem 1.25rem 1.5rem;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.price__box:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.10); }
.price__box--featured{ border:2px solid rgba(0,114,255,.18); }
.prices__badge{
  display:inline-block; margin-left:.5rem; font-size:.75rem; font-weight:700;
  padding:.2rem .5rem; border-radius:999px; background:linear-gradient(135deg,#0072ff,#a8ff00); color:#000;
}
.prices__price{ margin:.5rem 0 1rem; }
.prices__number{ font-size:1.4rem; font-weight:800; }
.prices__advice{ display:block; opacity:.7; }
.prices__features{ list-style:none; padding:0; margin:0 0 1rem 0; }
.prices__reward{ margin:.35rem 0; }
.prices__btn{
  display:inline-block; padding:.6rem 1rem; border-radius:10px; text-decoration:none; font-weight:700;
  background:#f2f2f2; color:#111; transition:transform .2s ease, box-shadow .2s ease;
}
.prices__btn:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.15); }
.prices__btn--primary{
  background: #0ea5e9; color:#000;
}

.about__price-note {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border-radius: 12px;
  background: #f8f9fa;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

.price-note__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #111;
}

.price-note__text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #555;
}


/*Informacion extra*/

.about__highlights { margin-top: 2rem; }
.highlights__container{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;
}
.highlight__item{
  background:#fff; padding:1rem; border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  display:flex; align-items:center; gap:.75rem;
  font-size:.95rem; font-weight:500;
  transition:transform .2s ease, box-shadow .2s ease;
}
.highlight__item:hover{ transform:translateY(-3px); box-shadow:0 6px 16px rgba(0,0,0,.10); }
.highlight__icon{ width:28px; height:28px; flex:0 0 28px; }



/*curriculum*/

.resume__container{

  display: flex;
flex-direction: row;
width: 100%;


}

.resume__left{

flex-basis: 58%;
margin-right: 1.5rem;

}

.resume__timelines{

margin-bottom: 5rem;

}

.timelines__timeline{

position: relative;
width: 100%;
display: flex;
flex-direction: row;
margin-bottom: 1.5rem;

}

.timeline__header{


flex-basis: 30%;
text-align: right;
padding-right: 2.5rem;
}

.timeline__year{

margin: 0.3rem 0;
line-height: 1.9rem;
font-size: 1.5rem;

}

.timeline__company{

display: block;
font-size: 1.3rem;
font-weight: 300;
color: var(--color-company);}





.timeline__description{
width: 70%;
padding-left: 2.5rem;
padding-right: 1.5rem;


}

.timeline__title{

font-size: 1.6rem;
margin-bottom:0.3rem;

}

.timeline__text{

font-size: 1.4rem;
margin-bottom: 1rem;

}

.timeline__divider{
top: 0;
left: 30%;
bottom: -3.8rem;
width: 2px;
background-color: var(--color-background-scrollbar);
position: absolute;

}

.timeline__divider::before{

content: "";
position: absolute;
margin-top: 0.4rem;
margin-left: -0.8rem;
opacity: 0.25;
width: 1.7rem;
height: 1.7rem;
background-color: var(--color-secondary);
border-radius: 10rem;


}

/*curriculum derecha*/

.resume__right{

flex-basis: 41%;
padding: 0px 1.5rem;
margin-top: 64px;
}

.resume__skills{

width: 100%;
margin-bottom: 3rem;

}

.skills__title{

display: flex;
justify-content: space-between;

}

.skills__text{

font-size: 1.3rem;
line-height: 1.4rem;
margin-bottom: 0.4rem;

}

.skills__number{

font-size: 1.1rem;
line-height: 1.4rem;
margin-bottom: 0.4rem;
color: var(--color-subtitle);

}

.skills__percentage{
  width: 40%;
height: 0.8rem;
background-color: var(--color-secondary);
border: 2px solid var(--color-principal);
border-radius: 1rem;}


.skills__percentage--p1{

width:90%

}

.skills__percentage--p2{width:80%}
.skills__percentage--p3{width:70%}
.skills__percentage--p4{width:60%}
.skills__percentage--p5{width:97%}
.skills__percentage--p6{width:20%}
.skills__percentage--p7{width:40%}
.skills__percentage--p8{width:93%}

.skills__progressbar{
height: 1rem;
background-color: var(--color-principal);
border: 1px solid var(--color-secondary);
border-radius: 1rem;
margin-bottom: 1.5rem;

}




.timeline__divider::after{

  content: "";
  position: absolute;
  margin-top: 0.8rem;
  margin-left: -0.4rem;
  opacity: 1;
  background-color:var(--color-principal) ;
  width: 0.9rem;
  height: 0.9rem;
border: 2px solid var(--color-secondary);
  border-radius: 10rem;
  
  
  }


  .knowledges__list{

display: flex;
flex-direction: row;
flex-wrap: wrap;


  }

  .knowledges__option{

background: var(--color-secondary);
border-radius: 0.3rem;
color: var(--color-principal);
font-size: 1.4rem;
padding: 0.1rem 1rem;
margin: 0.3rem 0.3rem;

  }

  .knowledges__option:hover{

color: var(--color-secondary);
background-color: var(--color-principal);


  }


  .certificates__container{

display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 3rem;
  }

  .certificates__certificate{

flex-basis:calc( 50% - 1.5rem);

border: 2px solid var(--color-border-reviews);
display: flex;
flex-direction: row;

  }


  .certificate__logo{


width: 15rem;
height: 100%;
background-color: var(--color-background-certificate);
padding:2.5rem;
display: flex;
justify-content: center;
align-items: center;

  }

  .certificate__content{


    padding: 2rem 2.5rem;
  }

  .certificate__title{

font-size: 1.6rem;
margin-bottom: 0.5rem;

  }

  .certificate__id{

display: block;
font-size: 1.3rem;
color: var(--color-subtitle);
margin-bottom: 0.3rem;


  }

  .certificate__date{

font-size: 1.2rem;
color: var(--color-subtitle);
opacity: 0.9;

  }

  /*Portfolio*/

  .portfolio__navbar{

margin-bottom: 3rem;


  }

  .portfolio__menu{

display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1.5rem;

  }

  .portfolio__option{


font-size: 1.3rem;
opacity: 0.6;

  }

  .portfolio__option--active{

opacity: 1;


  }

  .portfolio__link{

cursor: pointer;

  }

  .portfolio__link:hover{

color: var(--color-secondary);
text-shadow: 0 0 1px rgba(0,0,0,.22);

  }

  .portfolio__gallery{

display: flex;
flex-direction: row;
flex-wrap: wrap;
  }

  .gallery__item{
position: relative;
flex-basis: 33%;
padding: 0.7rem;

  }

  .gallery__container-image{

overflow: hidden;
transition: all 300ms ease-in-out;

  }

  .gallery__container-image:hover{

   border-radius: 0.5rem;
   box-shadow: 0 0 10px gray;
   transform: translateY(-0.3rem);
      }

  .gallery__image{


transition: all 300ms ease-in-out;

  }

  .gallery__item:hover .gallery__image{

transform: scale(1.1);
border-radius: 2rem;

  }

  .gallery__title{

font-size: 1.6rem;
padding: 1.5rem 0;
font-weight: bold;
  }

 .gallery__icon{
opacity: 0;
border-radius: 1rem;
  position: absolute;
  top: 0;
background-color: var(--color-principal);
color: var(--color-secondary);
width: 3rem;
height: 3rem;
font-size: 1.6rem;
text-align: center;
line-height: 3rem;
right: 1.5rem;
transition: all 450ms ease-in-out;
top: 1.5rem;
 }

 .gallery__category{
opacity: 0;
  position: absolute;
  top: 0;
background-color: var(--color-principal);
color: var(--color-secondary);
padding: 0.2rem;
left: 1rem;
height: 3rem;
font-size: 1.1rem;
text-align: center;
line-height: 3rem;
border-radius: 1rem;
transition: all 450ms ease-in-out;
top: 1.5rem;

 }

 .gallery__item:hover .gallery__icon,
 .gallery__item:hover .gallery__category{

opacity: 1;
box-shadow: 0px 0px 10px gray inset;
 }

 /*BLOG*/


.case-study {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  margin-bottom: 2rem;
}

.case-study__banner {
  position: relative;
  cursor: pointer;
}
.case-study__image {
  width: 100%;
  display: block;
}
.case-study__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.7));
  color: white;
}
.case-study__title {
  font-size: 1.5rem;
  margin: 0;
}
.case-study__subtitle {
  font-size: 1rem;
  opacity: 0.9;
}

.case-study__content {
  max-height: 0;
  overflow: hidden;
  padding: 0 1.5rem;
  transition: max-height 0.6s ease, padding 0.3s ease;
}
.case-study.expanded .case-study__content {
  max-height: 2000px; /* suficiente para mostrar todo */
  padding: 1.5rem;
}

.case-study__gallery {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 0.5rem 0;
}
.case-study__gallery img {
  border-radius: 8px;
  max-width: 300px;
}

.case-study__links {
  margin-top: 1rem;
  display: flex;
  gap: 1rem;
}

.btn {
  padding: 0.6rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
}
.btn--primary {
  background: linear-gradient(45deg, #5ca6c4, #a8ff00);
  color: #fff;
}
.btn--secondary {
  background: #eee;
  color: #333;
}

 


/* página de contacto*/

.contact__container{


display: flex;
flex-direction: row;

}

.contact__info{

flex-basis: 33%;
padding: 0 1.5rem;

}

.contact__form-box{

flex-basis: 66%;
padding: 0 1.5rem;

}

.contact__data{

width: 100%;
margin-bottom: 1.5rem;
padding: 2rem 1rem;
text-align: center;
background-color: var(--color-background-contact);
border: 0.1rem solid var(--color-border-reviews);


}

.contact__icon{

font-size: 3.3rem;
color: var(--color-secondary);

}

.contact__subtitle{

font: size 1.5rem;
margin-top: 1rem ;

}

.form__label{

position: absolute;
top: 1rem;
left: 1.5rem;

color: var(--color-company);
transition: all 300ms ease-in-out;
pointer-events: none;
}

.form__input:focus~label,
.form__input:not(:placeholder-shown)~label{

top: -2rem;
left: 0;
z-index: 1;
font-size: 1.3rem;
color: var(--color-secondary);



}

.form__input::-webkit-input-placeholder{

color: transparent;

}

.form__input::-moz-placeholder{

  color: transparent;
  
  }

.form__container{

  display: flex;
flex-direction: row;

}

.form__left{

flex-basis: 100%;
margin-right: 1.5rem ;
width: 100%;
}


.form__group{

position: relative;
margin-bottom: 2.15rem;
margin-bottom: 2.5rem;
}

.form__input{

position: relative;
width: 100%;
display: block;
border: 0.2rem solid var(--color-border-reviews);
border-radius: 0.5rem;
outline: none;
height: 4.2rem;
font-size: 1.5rem;
padding-top: 1rem;
padding-bottom:1rem ;
padding-left: 1.2rem;
padding-right: 2.5rem;
transition: all 300ms ease-in-out;
width: 100%;
line-height: 2.1rem;
}

.form__input:hover,
 .form__input:focus{

box-shadow: 0px 10px 10px -8px var(--color-icon);
transform: translateY(-2px);
background-color: var(--color-background-contact);
border: 0.2rem solid var(--color-secondary)
}




.form__right{

flex-basis: 50%;
max-width: 100%;
max-height: 100%;

}

.form__group--textarea{

height: 100%;


}

.form__input--textarea{
max-width: 100%;
min-width: 100%;
display: block;
height: 100%;
min-height: 100%;
height: auto;
resize: none;
}

.form__button{

  padding: 1rem 3rem;
  font-size: 1.5rem;
border-radius: 3rem;
cursor: pointer;
background-color: var(--color-principal);
border: 0.2rem solid var(--color-secondary);
color: var(--color-titles);
box-shadow:0 1rem 1rem -8px rgba(0, 0, 0, 0.22) ;
transition: all 300ms ease-in-out;
}

.form__button:hover{

background-color: var(--color-secondary);
color: var(--color-principal);


}

.contact__map{


width: 100%;
min-height: 15rem;
margin-bottom: 3.5rem;
overflow: hidden;
border-radius: 2rem;

}

.contact__iframe{

width: 100%;
height: 14rem;

}


/* ===== Timeline — versión pulida ===== */
:root{
  --ink:#0f172a;          /* texto titular */
  --muted:#475569;        /* texto cuerpo */
  --accent:#99b4d1;       /* tu azul */
  --card:#f6f9fc;         /* fondo suave para logo/chips */
  --border:#e6edf5;       /* borde sutil */
}

/* Bloque principal */
.timeline__description{ 
  margin-top:.75rem; 
  max-width:65ch;            /* ancho óptimo de lectura */
  line-height:1.7; 
  color:var(--muted);
}
.timeline__title{
  margin:.15rem 0 .65rem;
  font-weight:800;
  color:var(--ink);
}

/* Texto intro */
.timeline__text{
  margin:.25rem 0 .9rem; 
  line-height:1.7;
}

/* Lista técnica en grid (escaneable) */
.timeline__list{ 
  margin:0; 
  padding-left:1.1rem; 
  display:grid; 
  gap:.4rem; 
}
.timeline__list li{ color:var(--muted); }
.timeline__list strong{ color:var(--ink); }

/* Año + logo del centro (bajo el año) */
.timeline__header{
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  gap:.4rem;
}
.timeline__logo{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:.35rem .5rem;
  display:flex; 
  align-items:center; 
  justify-content:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.timeline__logo img{
  height:52px; width:auto; display:block;
}
.timeline__logo:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.timeline__company{
  color:#7a889b; 
  font-size:.9rem; 
  text-align:center; 
  max-width:12rem;
}

/* Accentos sutiles */
.timeline__description a{ color:var(--ink); border-bottom:1px dashed var(--accent); }
.timeline__description a:hover{ color:var(--accent); }



/* Layout dos columnas para experiencia */
.experience-row{
  display:grid;
  grid-template-columns: 1fr 320px; /* ajusta ancho de la columna de barras */
  gap:2rem;
  align-items:start;
}
@media (max-width: 900px){
  .experience-row{ grid-template-columns: 1fr; }
}

/* Reutiliza tu estilo base de barras (.skills__progressbar, .skills__percentage) */
/* Solo definimos los anchos de las nuevas barras (modificadores xp) */
.skills__percentage--xp1{ width:90%; }
.skills__percentage--xp2{ width:80%; }
.skills__percentage--xp3{ width:75%; }
.skills__percentage--xp4{ width:70%; }

/* Opcional: tono distinto para diferenciar "prácticas" visualmente */
.resume__skills--xp .skills__percentage{
  background-color:#7fb0cf;     /* un pelín más oscuro que #99b4d1 */
}
.resume__skills--xp .resume__subtitle{
  margin-bottom:.75rem;
}

.gallery__container-image {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.gallery__link {
  display: block;
  position: relative;
}

.gallery__image,
.gallery__image--hover {
  display: block;
  width: 100%;
  height: auto;
  transition: 300ms ease;
}

/* La imagen de hover queda encima y oculta */
.gallery__image--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.02);
  pointer-events: none; /* no captura clicks */
}

/* Oscurecemos un poco el fondo en hover */
.gallery__container-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.15);
  opacity: 0;
  transition: 300ms ease;
  pointer-events: none;
}

/* HOVER: blur a la base + aparece la de hover + velo sutil */
.gallery__container-image:hover .gallery__image {
  filter: blur(0.9px);
  transform: scale(1.03);
}

.gallery__container-image:hover .gallery__image--hover {
  opacity: 1;
  transform: scale(1.00);
}

.gallery__container-image:hover::after {
  opacity: 1;
}

/* Accesibilidad: reduce animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
  .gallery__image,
  .gallery__image--hover,
  .gallery__container-image::after {
    transition: none;
  }
}


.gallery__item {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.gallery__item.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.95);
}


:root{
  --bar-a:#4f46e5; --bar-b:#0ea5e9; --track:#e5e7eb;
  --ink:#0f172a; --muted:#6b7280; --today:#11182722;
}

.portfolio__timeline{background:#fff;padding:1.5rem;margin-top:2rem;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.06);}
.portfolio__timeline-title{margin:0 0 1rem;font-size:1.4rem;font-weight:600;color:var(--ink);}

.tl-header,.tl-row{display:grid;grid-template-columns:220px 1fr;gap:10px 14px;align-items:center;margin-bottom:.6rem;}
.tl-col-label{color:var(--ink);} .tl-meta{color:var(--muted);font-size:.9rem;}

.tl-months,.tl-track{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;position:relative;}
.tl-months span{color:var(--muted);font-size:.85rem;text-align:center;}

.tl-track::before{content:"";position:absolute;inset:auto 0 0 0;top:50%;height:10px;transform:translateY(-50%);background:var(--track);border-radius:999px;}
.tl-bar{grid-column:var(--start)/span var(--span);height:10px;border-radius:999px;background:var(--color,#4f46e5);position:relative;box-shadow:0 6px 14px rgba(0,0,0,.15);}

.tl-badge{position:absolute;top:-28px;left:8px;font-size:.8rem;padding:.18rem .5rem;border-radius:999px;white-space:nowrap;user-select:none}
.tl-badge--progress{background:#e0e7ff;color:#1e1b4b;border:1px solid #c7d2fe;}
.tl-badge--done{background:#dcfce7;color:#065f46;border:1px solid #bbf7d0;}
.tl-badge--planned{background:#fef9c3;color:#854d0e;border:1px solid #fde68a;}

/* Tooltip minimalista */
.tl-badge[data-tooltip]{
  position:relative;
}
.tl-badge[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;left:0;bottom:calc(100% + 6px);
  background:#111; color:#fff; font-size:.75rem;
  padding:.25rem .5rem; border-radius:6px;
  opacity:0; transform:translateY(4px);
  pointer-events:none; transition:opacity .18s ease,transform .18s ease;
  white-space:nowrap;
}
.tl-badge[data-tooltip]:hover::after{
  opacity:1; transform:translateY(0);
}

/* Línea de hoy (opcional, si añades en JS) */
.tl-track .tl-today{grid-column:var(--today-col)/span 1;width:2px;background:var(--today);justify-self:stretch}

/* Responsive */
@media (max-width:900px){
  .tl-header,.tl-row{grid-template-columns:1fr}
  .tl-months span{font-size:.75rem}
}
@media (max-width:560px){
  .tl-months{grid-template-columns:repeat(6,1fr)}
  .tl-months span:nth-child(2n){display:none} /* muestra Ene, Mar, May... */
}



.user-info__container-image {
  position: relative;
}
.user-info__image {
  
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.user-info__container-image::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: conic-gradient(
    #5ba5c0, #99c9da, #3a7a91, #5ba5c0
  );
  animation: spin 8s linear infinite;
  z-index: -1;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Botón Descargar CV — premium con degradado dinámico */
.user-info__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 1.2rem 2.6rem;
  border-radius: 999px;

  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.02em;

  color: #fff;
  background: linear-gradient(135deg, #5ba5c0, #3a7a91);
  background-size: 200% 200%; /* para animar el degradado */
  border: none;

  box-shadow: 0 6px 18px rgba(0,0,0,.22);
  cursor: pointer;
  text-decoration: none;

  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.user-info__btn:hover {
  animation: gradientFlow 3s ease infinite;
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 14px 28px rgba(0,0,0,.3);
  filter: brightness(1.1);
}

.user-info__btn:active {
  transform: scale(0.97);
  box-shadow: 0 6px 16px rgba(0,0,0,.25) inset;
}

@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* Botón Descargar CV — degradado dinámico en movimiento */
.user-info__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 1.2rem 2.8rem;
  border-radius: 999px;

  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.02em;

  color: #fff;
  background: linear-gradient(270deg, #5ba5c0, #3a7a91, #5ba5c0);
  background-size: 400% 400%; /* más grande para poder animar */
  border: none;

  box-shadow: 0 6px 18px rgba(0,0,0,.22);
  cursor: pointer;
  text-decoration: none;

  margin-top: 2rem;
  margin-bottom: 2rem;

  animation: gradientShift 8s ease infinite; /* animación constante */
  transition: transform .25s ease, box-shadow .25s ease;
}

.user-info__btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 26px rgba(0,0,0,.3);
}

.user-info__btn:active {
  transform: scale(0.97);
  box-shadow: 0 6px 16px rgba(0,0,0,.25) inset;
}

/* Animación suave del degradado */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* Efecto premium para la barra de navegación derecha */
.menu__icon {
  color: var(--color-icon);
  font-size: 2.6rem;
  transition: transform .25s ease, color .25s ease, text-shadow .25s ease;
}

.menu__option:hover .menu__icon {
  color: var(--color-secondary);
  transform: scale(1.15);
  text-shadow: 0 0 12px rgba(91,165,192,0.6);
}

/* Tooltip (overlay) más elegante */
.menu__overlay {
  opacity: 0;
  padding: .5rem 1rem;
  margin-top: -2.8rem;
  background: rgba(91,165,192,0.9);
  backdrop-filter: blur(6px);
  border-radius: 1rem;
  color: #fff;
  font-size: 1.3rem;
  white-space: nowrap;
  position: absolute;
  right: -140%;
  transition: opacity .3s ease, transform .3s ease;
  transform: translateX(-10px);
}

.menu__option:hover .menu__overlay {
  opacity: 1;
  transform: translateX(0);
}


/* === Barra derecha de navegación — upgrade visual ======================= */
/* Iconos: más presencia y feedback */
.menu__icon{
  color: var(--color-icon);
  font-size: 2.8rem;
  transition: transform .25s ease, color .25s ease, text-shadow .25s ease, box-shadow .25s ease;
  border-radius: 12px; /* para el glow */
}
.menu__option:hover .menu__icon,
.menu__link:focus-visible .menu__icon{
  color: var(--color-secondary);
  transform: scale(1.15);
  text-shadow: 0 0 14px rgba(91,165,192,.65);
  box-shadow: 0 0 0 6px rgba(91,165,192,.10);
}

/* Tooltip/overlay: glass suave y aparición más elegante */
.menu__overlay{
  opacity: 0;
  padding: .55rem 1rem;
  margin-top: -2.6rem;
  background: rgba(91,165,192,.85);
  color: #fff;
  backdrop-filter: blur(8px) saturate(120%);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  font-size: 1.3rem;
  white-space: nowrap;
  position: absolute;
  right: -150%;
  transform: translateX(-8px);
  transition: opacity .28s ease, transform .28s ease;
}
.menu__option:hover .menu__overlay,
.menu__link:focus-visible + .menu__overlay{
  opacity: 1;
  transform: translateX(0);
}

/* Estado activo: icono marcado sutilmente */
.menu__link.menu__link--active .menu__icon{
  color: var(--color-secondary);
  text-shadow: 0 0 10px rgba(91,165,192,.45);
}

/* Accesibilidad teclado: foco claro en el enlace contenedor */
.menu__link:focus-visible{
  outline: 3px solid rgba(153,201,218,.8);
  outline-offset: 6px;
  border-radius: 14px;
}

/* =========================================================
   CURRICULUM — TARJETAS UNIFICADAS (IA / DISEÑO / CÓDIGO / PRÁCTICAS)
   - Minimalista, acento azul, transiciones elegantes
   - Sin cambios de HTML. Alta especificidad y seguro para responsive.
   ========================================================= */

/* --- CONTENEDORES QUE SERÁN TARJETA --- */
/* IA + DISEÑO + CÓDIGO: cada bloque vive en un header directo de .resume__right */
.layout .layout__content .content__resume .resume__right > .resume__subheader,
/* PRÁCTICAS: la tarjeta es el contenedor .practicas__container */
.layout .layout__content .content__resume .practicas__container{
  position: relative;
  display: block;
  padding: 1.2rem 1.4rem 1.6rem;
  margin: 1.2rem 0 2rem;
  border-radius: 16px;

  /* Card clara + acento sutil en azul (coherente con el resto del porfolio) */
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.98)),
    radial-gradient(140% 180% at 100% 0%,
      color-mix(in srgb, var(--color-secondary) 18%, transparent), transparent 60%);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow:
    0 10px 22px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.60);

  transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
  will-change: transform, box-shadow, filter;
  overflow: hidden; /* para el sheen del ::after */
}

/* Marco degradado (borde animado muy fino) */
.layout .layout__content .content__resume .resume__right > .resume__subheader::before,
.layout .layout__content .content__resume .practicas__container::before{
  content:"";
  position:absolute; inset:0; border-radius: inherit;
  padding: 1px;                                  /* “grosor” del borde */
  background: conic-gradient(
    from 180deg,
    color-mix(in srgb, var(--color-secondary) 75%, #ffffff),
    color-mix(in srgb, var(--color-secondary) 35%, #ffffff),
    color-mix(in srgb, var(--color-secondary) 75%, #ffffff)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.35; pointer-events:none; z-index:0;
  transition: opacity .28s ease, filter .28s ease;
}

/* Sheen (brillo metálico diagonal al pasar el ratón) */
.layout .layout__content .content__resume .resume__right > .resume__subheader::after,
.layout .layout__content .content__resume .practicas__container::after{
  content:"";
  position:absolute; inset:0; border-radius: inherit;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.50) 12%,
    rgba(255,255,255,0) 24%);
  background-size: 220% 220%;
  mix-blend-mode: screen;
  opacity: 0; pointer-events:none; z-index:0;
  transition: opacity .28s ease;
}

/* Elevación + activación de brillo */
.layout .layout__content .content__resume .resume__right > .resume__subheader:hover,
.layout .layout__content .content__resume .practicas__container:hover{
  transform: translateY(-3px);
  box-shadow:
    0 16px 32px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.65);
}
.layout .layout__content .content__resume .resume__right > .resume__subheader:hover::before,
.layout .layout__content .content__resume .practicas__container:hover::before{
  opacity:.7; filter: saturate(1.05);
}
.layout .layout__content .content__resume .resume__right > .resume__subheader:hover::after,
.layout .layout__content .content__resume .practicas__container:hover::after{
  opacity:.55;
  animation: resumeSheen 4.6s ease-in-out infinite;
}
@keyframes resumeSheen{
  0%   { background-position: -80% -80%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 180% 180%; }
}

/* ---- TIPOGRAFÍA Y ESPACIADOS CONSISTENTES DENTRO DE LAS TARJETAS ---- */
.layout .layout__content .content__resume .resume__right > .resume__subheader .resume__subtitle,
.layout .layout__content .content__resume .practicas__container .resume__subtitle{
  margin: 0 0 .9rem 0;
  font-size: 2rem; line-height: 1.2;
}
.layout .layout__content .content__resume .resume__right > .resume__subheader .resume__subtitle .subtitle__color,
.layout .layout__content .content__resume .practicas__container .resume__subtitle .subtitle__color{
  color: var(--color-secondary);
}

/* Bloque de skills: mismo ritmo vertical */
.layout .layout__content .content__resume .resume__right > .resume__subheader .resume__skills,
.layout .layout__content .content__resume .practicas__container .resume__skills{
  width: 100%;
  margin-top: .6rem;
}

/* Fila título + porcentaje a la derecha */
.layout .layout__content .content__resume .resume__right > .resume__subheader .resume__skills .skills__title,
.layout .layout__content .content__resume .practicas__container .resume__skills .skills__title{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .8rem; margin-top: .1rem;
}

/* Barra base unificada */
.layout .layout__content .content__resume .resume__right > .resume__subheader .resume__skills .skills__progressbar,
.layout .layout__content .content__resume .practicas__container .resume__skills .skills__progressbar{
  height: .9rem;
  background-color: var(--color-principal);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 50%, #ffffff);
  border-radius: 12px;
  margin-bottom: 1.2rem;
  overflow: hidden;
}

/* Relleno (se respeta tu sistema --p1..--p8) + brillo sutil */
.layout .layout__content .content__resume .resume__right > .resume__subheader .resume__skills .skills__percentage,
.layout .layout__content .content__resume .practicas__container .resume__skills .skills__percentage{
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--color-secondary) 85%, #ffffff) 0%,
      color-mix(in srgb, var(--color-secondary) 55%, #ffffff) 65%),
    radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.35), transparent 55%);
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.45);
  transition: filter .28s ease, background-position .6s ease;
  background-size: 200% 100%, 100% 100%;
}

/* Al pasar el ratón sobre la tarjeta, las barras “respiran” un poco */
.layout .layout__content .content__resume .resume__right > .resume__subheader:hover .resume__skills .skills__percentage,
.layout .layout__content .content__resume .practicas__container:hover .resume__skills .skills__percentage{
  filter: saturate(1.05) brightness(1.03);
  background-position: 100% 0, 0 0;
}

/* Accesibilidad: si el usuario prefiere menos movimiento */
@media (prefers-reduced-motion: reduce){
  .layout .layout__content .content__resume .resume__right > .resume__subheader,
  .layout .layout__content .content__resume .practicas__container{
    transition: none !important;
  }
  .layout .layout__content .content__resume .resume__right > .resume__subheader::after,
  .layout .layout__content .content__resume .practicas__container::after{
    animation: none !important; opacity:.20; background-position: 30% 30%;
  }
  .layout .layout__content .content__resume .resume__right > .resume__subheader .resume__skills .skills__percentage,
  .layout .layout__content .content__resume .practicas__container .resume__skills .skills__percentage{
    transition: none !important; background-position: 0 0 !important;
  }
}

/* ===============================================
   CURRÍCULUM — TARJETAS METALIZADAS SUTILES
   (IA / DISEÑO / CÓDIGO / PRÁCTICAS)
   =============================================== */

:root{
  --metal-soft-1: #eaf2f8;     /* azul muy claro */
  --metal-soft-2: #f8fbfe;     /* casi blanco frío */
  --metal-edge:    rgba(0,0,0,.05);
  --sheen-op:      .18;        /* intensidad del brillo al hover */
}

/* Contenedores: headers de sección + prácticas */
.layout .layout__content .content__resume .resume__right > .resume__subheader,
.layout .layout__content .content__resume .practicas__container{
  position: relative;
  display: block;
  padding: 1.2rem 1.4rem 1.6rem;
  margin: 1.2rem 0 2rem;
  border-radius: 16px;
  isolation: isolate;
  overflow: hidden;

  /* Fondo metal suave (sin “cepillado” visible) */
  background-image:
    /* brillo superior muy tenue */
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.98)),
    /* cilindro suave con leve tinte del brand */
    linear-gradient(90deg,
      color-mix(in srgb, var(--color-secondary) 6%, var(--metal-soft-1)) 0%,
      var(--metal-soft-2) 48%,
      color-mix(in srgb, var(--color-secondary) 6%, var(--metal-soft-1)) 100%);
  background-blend-mode: normal, normal;

  border: 1px solid var(--metal-edge);
  box-shadow:
    0 8px 20px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.55);
  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

/* Halo exterior muy contenido */
.layout .layout__content .content__resume .resume__right > .resume__subheader::before,
.layout .layout__content .content__resume .practicas__container::before{
  content:"";
  position:absolute; inset:-3px;
  border-radius: inherit;
  background: radial-gradient(120% 120% at 50% 0%,
    rgba(170,210,255,.12), rgba(170,210,255,0) 60%);
  filter: blur(10px);
  z-index:-1; pointer-events:none;
  opacity:.9;
}

/* Reflejo diagonal sutil (sin loops infinitos visibles) */
.layout .layout__content .content__resume .resume__right > .resume__subheader::after,
.layout .layout__content .content__resume .practicas__container::after{
  content:"";
  position:absolute; inset:0; border-radius: inherit;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.45) 12%,
    rgba(255,255,255,0) 24%);
  background-size: 200% 200%;
  background-position: -60% -60%;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .6s ease, background-position 1.8s ease;
}

/* Hover discreto */
.layout .layout__content .content__resume .resume__right > .resume__subheader:hover,
.layout .layout__content .content__resume .practicas__container:hover{
  transform: translateY(-1px);
  box-shadow:
    0 12px 28px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.60);
}
.layout .layout__content .content__resume .resume__right > .resume__subheader:hover::after,
.layout .layout__content .content__resume .practicas__container:hover::after{
  opacity: var(--sheen-op);
  background-position: 120% 120%;
}

/* Títulos consistentes */
.layout .layout__content .content__resume .resume__right > .resume__subheader .resume__subtitle,
.layout .layout__content .content__resume .practicas__container .resume__subtitle{
  margin: 0 0 .9rem 0;
  font-size: 2rem; line-height: 1.2;
}
.layout .layout__content .content__resume .resume__right > .resume__subheader .resume__subtitle .subtitle__color,
.layout .layout__content .content__resume .practicas__container .resume__subtitle .subtitle__color{
  color: var(--color-secondary);
}

/* Barras: track sobrio + fill ligeramente azulado */
.layout .layout__content .content__resume .resume__right > .resume__subheader .resume__skills .skills__progressbar,
.layout .layout__content .content__resume .practicas__container .resume__skills .skills__progressbar{
  height: .9rem;
  border-radius: 12px;
  margin-bottom: 1.2rem;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 15%),
    linear-gradient(90deg, #e6eef5, #f7fbff 50%, #e6eef5);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 45%, #ffffff);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.06);
}

/* Relleno (respeta --p1..--p8). Sin animación, solo micro realce al hover */
.layout .layout__content .content__resume .resume__right > .resume__subheader .resume__skills .skills__percentage,
.layout .layout__content .content__resume .practicas__container .resume__skills .skills__percentage{
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--color-secondary) 70%, #ffffff) 0%,
      color-mix(in srgb, var(--color-secondary) 40%, #f7fbff) 65%);
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.40);
  transition: filter .25s ease;
}

/* Al pasar por la tarjeta, un 2% más de brillo y saturación (muy sutil) */
.layout .layout__content .content__resume .resume__right > .resume__subheader:hover .resume__skills .skills__percentage,
.layout .layout__content .content__resume .practicas__container:hover .resume__skills .skills__percentage{
  filter: brightness(1.02) saturate(1.02);
}

/* Menos movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .layout .layout__content .content__resume .resume__right > .resume__subheader,
  .layout .layout__content .content__resume .practicas__container{
    transition: none !important;
  }
  .layout .layout__content .content__resume .resume__right > .resume__subheader::after,
  .layout .layout__content .content__resume .practicas__container::after{
    transition: none !important;
    opacity:.14; background-position: 30% 30%;
  }
}

/* =======================================================
   TARJETAS — EFECTO METALIZADO SUTIL (IA / DISEÑO / CÓDIGO / PRÁCTICAS)
   ======================================================= */
:root{
  --m-soft-1: #f7fbff;            /* base casi blanca fría */
  --m-soft-2: #e9f1f7;            /* azul muy claro */
  --m-edge:   rgba(0,0,0,.06);    /* borde mínimo */
  --m-halo:   rgba(160,200,240,.12);
  --m-sheen:  .14;                /* intensidad del reflejo en hover */
}

/* Contenedores de tarjeta */
.layout .layout__content .content__resume .resume__right > .resume__subheader,
.layout .layout__content .content__resume .practicas__container{
  position: relative;
  padding: 1.2rem 1.4rem 1.6rem;
  margin: 1.2rem 0 2rem;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;

  /* Metal sutil: cilindro + brillo superior + “brushed” MUY tenue */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.98)), /* gloss top */
    linear-gradient(90deg,
      color-mix(in srgb, var(--color-secondary) 5%, var(--m-soft-2)) 0%,
      var(--m-soft-1) 48%,
      color-mix(in srgb, var(--color-secondary) 5%, var(--m-soft-2)) 100%),  /* cilindro */
    repeating-linear-gradient(to right,
      rgba(255,255,255,.02) 0 1px, rgba(0,0,0,0) 1px 4px);                    /* cepillado fino */
  background-blend-mode: normal, normal, overlay;

  border: 1px solid var(--m-edge);
  box-shadow:
    0 8px 20px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.55);
  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease, background-position .6s ease;
}

/* Halo exterior muy discreto */
.layout .layout__content .content__resume .resume__right > .resume__subheader::before,
.layout .layout__content .content__resume .practicas__container::before{
  content:"";
  position:absolute; inset:-3px;
  border-radius: inherit;
  background: radial-gradient(120% 120% at 50% 0%, var(--m-halo), transparent 60%);
  filter: blur(10px);
  z-index:-1; pointer-events:none;
}

/* Reflejo diagonal (aparece sólo en hover) */
.layout .layout__content .content__resume .resume__right > .resume__subheader::after,
.layout .layout__content .content__resume .practicas__container::after{
  content:"";
  position:absolute; inset:0; border-radius: inherit;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.45) 10%,
    rgba(255,255,255,0) 22%);
  background-size: 200% 200%;
  background-position: -60% -60%;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .6s ease, background-position 1.6s ease;
  pointer-events:none;
}

/* Hover sutil: leve elevación + reflejo y cilindro que “respira” */
.layout .layout__content .content__resume .resume__right > .resume__subheader:hover,
.layout .layout__content .content__resume .practicas__container:hover{
  transform: translateY(-1px);
  box-shadow:
    0 12px 28px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.60);
  background-position: 0 0, 100% 0, 0 0; /* desplaza la banda luminosa del cilindro */
}
.layout .layout__content .content__resume .resume__right > .resume__subheader:hover::after,
.layout .layout__content .content__resume .practicas__container:hover::after{
  opacity: var(--m-sheen);
  background-position: 120% 120%;
}

/* Tipografía de títulos dentro de la tarjeta (coherencia) */
.layout .layout__content .content__resume .resume__right > .resume__subheader .resume__subtitle,
.layout .layout__content .content__resume .practicas__container .resume__subtitle{
  margin: 0 0 .9rem 0;
  font-size: 2rem; line-height: 1.2;
}
.layout .layout__content .content__resume .resume__right > .resume__subheader .resume__subtitle .subtitle__color,
.layout .layout__content .content__resume .practicas__container .resume__subtitle .subtitle__color{
  color: var(--color-secondary);
}

/* Respeto accesibilidad: menos movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .layout .layout__content .content__resume .resume__right > .resume__subheader,
  .layout .layout__content .content__resume .practicas__container{
    transition: none !important;
    background-position: 0 0 !important;
  }
  .layout .layout__content .content__resume .resume__right > .resume__subheader::after,
  .layout .layout__content .content__resume .practicas__container::after{
    transition: none !important;
    opacity: .12; background-position: 30% 30%;
  }
}


/* ==== CONTACTO — Tarjetas metálicas premium ==== */
.contact__data {
  position: relative;
  background: linear-gradient(145deg, #dfe9f3, #cfd9df);
  background-clip: padding-box;
  border-radius: 18px;
  padding: 2rem 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow:
    inset 1px 1px 4px rgba(255,255,255,.6),
    inset -2px -2px 6px rgba(0,0,0,.15),
    6px 10px 25px rgba(0,0,0,0.15);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}

.contact__data:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 1px 1px 3px rgba(255,255,255,.5),
    inset -1px -1px 5px rgba(0,0,0,.15),
    10px 14px 28px rgba(0,0,0,.18);
}

.contact__data::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.3), transparent);
  transform: rotate(25deg);
  animation: shine 4s infinite;
}

@keyframes shine {
  0% { transform: translateX(-150%) rotate(25deg); }
  100% { transform: translateX(150%) rotate(25deg); }
}

.contact__icon {
  font-size: 3rem;
  color: #4f8aad;
  margin-bottom: .6rem;
}

.contact__subtitle {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1d2d3b;
}

/* ==== Mapa con bordes difuminados ==== */
.contact__map {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 3.5rem;
}

.contact__map iframe {
  width: 100%;
  height: 320px;
  border: none;
  border-radius: 20px;
  filter: brightness(0.97) saturate(1.05);
  mask-image: radial-gradient(circle, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: cover;
}

/* ==== Tarjetas de contacto — efecto metal premium sutil ==== */
.contact__data {
  position: relative;
  border-radius: 18px;
  padding: 2rem 1.5rem;
  text-align: center;
  background: linear-gradient(135deg, #f0f4f8 0%, #c9d6df 40%, #e2ebf0 100%);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(0,0,0,.15),
    8px 12px 28px rgba(0,0,0,.15);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Reflejo barrido muy tenue */
.contact__data::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 20%,
    rgba(255,255,255,.25) 50%,
    transparent 80%
  );
  transform: translateX(-150%);
  transition: transform 1.2s ease;
}

.contact__data:hover::before {
  transform: translateX(150%);
}

.contact__data:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(0,0,0,.12),
    12px 16px 34px rgba(0,0,0,.18);
}

/* Iconos con acabado metálico */
.contact__icon {
  font-size: 2.8rem;
  margin-bottom: .6rem;
  background: linear-gradient(145deg, #dce6ef, #90a4b8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 1px rgba(255,255,255,.3));
}

.contact__subtitle {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1b2836;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

/* ==== Mapa con bordes difuminados premium ==== */
.contact__map {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  margin-bottom: 3.5rem;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

.contact__map iframe {
  width: 100%;
  height: 320px;
  border: none;
  border-radius: 22px;
  filter: saturate(1.05) contrast(1.02);
  mask-image: radial-gradient(circle, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: cover;
}


/* === Tarjeta premium para el formulario de contacto === */
.contact__form {
  background: linear-gradient(135deg, #fdfdfd, #f3f4f6);
  border-radius: 18px;
  padding: 2rem 2.5rem;
  box-shadow: 
    0 8px 24px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(6px);
  transition: transform .25s ease, box-shadow .25s ease;
}

.contact__form:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 28px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.45);
}

/* Inputs refinados */
.contact__form .form__input,
.contact__form .form__input--textarea {
  border: 1px solid rgba(150,150,150,0.25);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  background: linear-gradient(145deg, #ffffff, #f1f1f1);
  transition: all .3s ease;
}

.contact__form .form__input:focus,
.contact__form .form__input--textarea:focus {
  border-color: #5ca6c4;
  box-shadow: 0 0 0 3px rgba(92,166,196,.25);
  background: #fff;
}

/* Botón premium */
.contact__form .form__button {
  background: linear-gradient(135deg, #5ca6c4, #99b4d1);
  color: #fff;
  border: none;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 16px rgba(92,166,196,.35);
  transition: all .3s ease;
}

.contact__form .form__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(92,166,196,.45);
}


/* ==========================================================
   FORMULARIO CONTACTO · Tarjeta lámina metálica elegante
   ========================================================== */
.contact__form {
  position: relative;
  border-radius: 16px;
  padding: 2rem;
  background: linear-gradient(145deg, #e9eef3, #cfd4da); /* base metálica */
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,0.6),
    inset -1px -1px 2px rgba(0,0,0,0.12),
    0 8px 20px rgba(0,0,0,0.08);
  overflow: hidden;
}

/* Reflejo barrido ultra sutil */
.contact__form::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg,
    transparent 25%,
    rgba(255,255,255,0.2) 50%,
    transparent 75%);
  transform: translateX(-150%);
  transition: transform 1.5s ease;
}
.contact__form:hover::before { transform: translateX(150%); }

/* Inputs sobre superficie metálica */
.contact__form .form__input,
.contact__form .form__input--textarea {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(150,150,150,0.3);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  transition: all 0.25s ease;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.8);
}
.contact__form .form__input:focus {
  border-color: #99b4d1;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(153,180,209,0.25);
  outline: none;
}

/* ==========================================================
   BOTÓN PREMIUM · sensación lámina y click físico
   ========================================================== */
.contact__form .form__button {
  display: inline-block;
  border-radius: 12px;
  padding: 1rem 2.5rem;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.5);
  background: linear-gradient(160deg, #d5dde5, #aeb9c6);
  color: #1c2734;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.7),
    inset 0 -2px 3px rgba(0,0,0,0.15),
    0 6px 16px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Efecto reflejo en hover */
.contact__form .form__button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(100deg,
    transparent 30%,
    rgba(255,255,255,0.4) 50%,
    transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
  pointer-events: none;
}
.contact__form .form__button:hover::before { transform: translateX(120%); }

/* Hover: micro elevación */
.contact__form .form__button:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.8),
    inset 0 -2px 3px rgba(0,0,0,0.15),
    0 10px 22px rgba(0,0,0,0.2);
}

/* Active: efecto físico al pulsar */
.contact__form .form__button:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.2),
    inset 0 -1px 2px rgba(255,255,255,0.7);
}


/* ==========================================================
   CONTACTO · Lámina metálica realista
   ========================================================== */
.contact__form {
  position: relative;
  border-radius: 14px;
  padding: 2rem;
  background: linear-gradient(160deg, #f2f4f7, #d9dee4, #f7f9fb);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.7),
    inset 0 -1px 2px rgba(0,0,0,0.08),
    0 10px 22px rgba(0,0,0,0.08);
  overflow: hidden;
}

/* Efecto “cepillado” sutil en la superficie */
.contact__form::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.15) 0px,
    rgba(255,255,255,0.15) 1px,
    transparent 2px,
    transparent 4px
  );
  opacity: .15;
  pointer-events: none;
}

/* Inputs: integrados en la lámina */
.contact__form .form__input,
.contact__form .form__input--textarea {
  border: 1px solid rgba(180,180,180,0.4);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f0f2f5);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
  transition: all .25s ease;
}
.contact__form .form__input:focus {
  border-color: #99b4d1;
  box-shadow: 0 0 0 3px rgba(153,180,209,0.25);
  background: #fff;
}

/* Botón premium con efecto físico */
.contact__form .form__button {
  display: inline-block;
  padding: 1rem 2.5rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.45);
  background: linear-gradient(180deg, #e4e8ec, #c2c8cf);
  color: #1e293b;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.8),
    inset 0 -2px 3px rgba(0,0,0,0.12),
    0 6px 14px rgba(0,0,0,0.15);
  transition: transform .12s ease, box-shadow .12s ease;
  cursor: pointer;
}

/* Hover: reflejo suave */
.contact__form .form__button:hover {
  background: linear-gradient(180deg, #eef1f5, #ccd2da);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.9),
    inset 0 -2px 3px rgba(0,0,0,0.15),
    0 10px 22px rgba(0,0,0,0.2);
}

/* Active: presión realista */
.contact__form .form__button:active {
  transform: translateY(2px);
  background: linear-gradient(180deg, #d6dce2, #bfc5cc);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.18),
    inset 0 -1px 2px rgba(255,255,255,0.6);
}

/* ===== Hero CTA ===== */
.hero-cta{
  margin: 10px 0 0;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-align:center;
}
.cta-sub{
  font-size: clamp(16px, 1.6vw, 18px);
  line-height:1.35;
  color: var(--text-600, #475569);
  margin:0;
}
.cta-sub .cta-mini{
  display:block;
  font-size: .9em;
  opacity:.9;
}

/* Botonera */
.cta-buttons{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* Botón base */
.btn-cta{
  --r: 14px;
  --pad-x: 18px;
  --pad-y: 10px;
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--r);
  font-weight:600;
  text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, background-position 2.4s ease;
  will-change: transform, box-shadow, background-position;
}

/* Primario: gradiente dinámico + brillo sutil (tu paleta azul) */
.btn-primary{
  color:#fff;
  background: linear-gradient(120deg,
              var(--brand1, #5AA6BC),
              var(--brand2, #2F80A0) 55%,
              var(--brand1, #5AA6BC));
  background-size: 220% 220%;
  box-shadow:
    0 10px 22px rgba(47,128,160,.25),
    inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover{
  background-position: 100% 0;
  transform: translateY(-1px);
  box-shadow:
    0 14px 28px rgba(47,128,160,.32),
    inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:active{
  transform: translateY(1px);
  box-shadow:
    inset 0 6px 14px rgba(0,0,0,.18);
}
/* Brillo “lámina” metálica sutil al pasar */
.btn-primary::after{
  content:"";
  position:absolute; inset:-1px; border-radius:inherit;
  background: linear-gradient(110deg,
     rgba(255,255,255,.18) 0%,
     rgba(255,255,255,0) 35%,
     rgba(255,255,255,.10) 60%,
     rgba(255,255,255,0) 100%);
  opacity:.65; pointer-events:none;
  transition: opacity .25s ease;
}
.btn-primary:hover::after{
  opacity:.9; animation: sheen 1100ms linear forwards;
}
@keyframes sheen{
  from{ transform: translateX(-120%); }
  to{ transform: translateX(120%); }
}

/* Secundario: “ghost” elegante con borde y relieve suave */
.btn-ghost{
  color: var(--text-900, #0f172a);
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow:
    0 6px 14px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.5);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover{
  transform: translateY(-1px);
  box-shadow:
    0 10px 22px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.65);
}
.btn-ghost:active{
  transform: translateY(1px);
  box-shadow: inset 0 6px 12px rgba(0,0,0,.12);
}

/* Responsive fino */
@media (max-width: 640px){
  .cta-buttons .btn-cta{ width:100%; }
}


/* ===== CTA Botones ===== */
.cta-buttons{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:10px;
}

.btn-cta{
  --r: 14px;
  --pad-x: 20px;
  --pad-y: 12px;
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--r);
  font-weight:600;
  text-decoration:none;
  transition: all .25s ease;
  font-size: 0.95em;
}

/* 1) Hablemos (gradiente principal animado, azul turquesa) */
.btn-primary{
  color:#fff;
  background: linear-gradient(120deg, #5AA6BC, #2F80A0, #5AA6BC);
  background-size: 220% 220%;
  box-shadow: 0 6px 16px rgba(47,128,160,.25);
}
.btn-primary:hover{
  background-position: 100% 0;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(47,128,160,.32);
}
.btn-primary:active{
  transform: translateY(1px);
  box-shadow: inset 0 4px 10px rgba(0,0,0,.18);
}

/* 2) Ver servicios (ghost con borde + glass efecto blur) */
.btn-ghost{
  color: #2f3a4a;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(47,128,160,.35);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-ghost:hover{
  background: rgba(255,255,255,.75);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}
.btn-ghost:active{
  transform: translateY(1px);
  box-shadow: inset 0 4px 10px rgba(0,0,0,.12);
}

/* 3) Proyectos (beige/dorado sutil) */
.btn-alt{
  color:#3b2f1c;
  background: linear-gradient(135deg, #F2E8D8, #DEC9AE);
  box-shadow: 0 6px 14px rgba(88,62,40,.25);
}
.btn-alt:hover{
  background: linear-gradient(135deg, #DEC9AE, #C9A66B);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(88,62,40,.32);
}
.btn-alt:active{
  transform: translateY(1px);
  box-shadow: inset 0 4px 10px rgba(0,0,0,.22);
}

/* ===== Launch Packs (ofertas) ===== */
.launch-packs{margin:28px 0;}
.launch-packs__header{ text-align:center; margin-bottom:12px;}
.launch-packs__header h3{font-size:clamp(20px,2.4vw,26px); margin:0;}
.launch-packs__header p{opacity:.75; margin:6px 0 0;}

.launch-packs__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
}
@media (max-width: 820px){
  .launch-packs__grid{ grid-template-columns:1fr; }
}

.lp-card{
  position:relative;
  border-radius:18px;
  padding:20px 18px;
  background:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.06);
  transition:transform .22s ease, box-shadow .22s ease;
}
.lp-card:hover{ transform:translateY(-3px); box-shadow:0 18px 36px rgba(0,0,0,.12); }

.lp-card h4{ margin:6px 0 4px; font-size:clamp(18px,2.2vw,22px); }
.lp-card__price{ margin:2px 0 8px; color:#475569; }
.lp-card__price span{ font-size:1.6em; font-weight:700; color:#2F80A0; }

.lp-card__features{ margin:10px 0 12px; padding-left:16px; }
.lp-card__features li{ margin:4px 0; }

.lp-card__meta{
  display:flex; gap:12px; flex-wrap:wrap;
  font-size:.9em; color:#475569; margin-bottom:10px;
}

.lp-card__small{ display:block; margin-top:8px; opacity:.7; font-size:.85em; }

/* Badges */
.lp-card__badge{
  position:absolute; top:12px; left:12px;
  padding:4px 10px; border-radius:999px; font-weight:600; font-size:.8em; color:#fff;
  background:linear-gradient(120deg,#2F80A0,#5AA6BC);
  box-shadow:0 6px 14px rgba(47,128,160,.25);
}
.lp-badge--gold{
  background:linear-gradient(120deg,#C9A66B,#E7D1A3);
  box-shadow:0 6px 14px rgba(201,166,107,.35);
}

/* Theming por pack */
.lp-card--landing{
  background:linear-gradient(135deg,#FDFCFB 0%, #EAF6FA 100%);
  border:1px solid rgba(47,128,160,.22);
}
.lp-card--redesign{
  background:linear-gradient(135deg,#FDFCFB 0%, #F2E8D8 100%);
  border:1px solid rgba(201,166,107,.32);
}

/* CTAs */
.lp-card__cta{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; text-decoration:none; font-weight:700;
  border-radius:12px; padding:10px 16px;
  transition:transform .18s ease, box-shadow .18s ease, background-position 2.2s ease;
}

/* Primario (azul animado) */
.lp-cta--primary{
  color:#fff;
  background:linear-gradient(120deg,#2F80A0,#5AA6BC,#2F80A0);
  background-size:220% 220%;
  box-shadow:0 8px 18px rgba(47,128,160,.28), inset 0 1px 0 rgba(255,255,255,.25);
}
.lp-cta--primary:hover{ transform:translateY(-1px); background-position:100% 0; }
.lp-cta--primary:active{ transform:translateY(1px); box-shadow:inset 0 6px 12px rgba(0,0,0,.18); }

/* Alternativo (beige/dorado) */
.lp-cta--alt{
  color:#3b2f1c;
  background:linear-gradient(135deg,#DEC9AE,#C9A66B);
  box-shadow:0 8px 18px rgba(88,62,40,.22), inset 0 1px 0 rgba(255,255,255,.35);
}
.lp-cta--alt:hover{ transform:translateY(-1px); }
.lp-cta--alt:active{ transform:translateY(1px); box-shadow:inset 0 6px 12px rgba(0,0,0,.18); }


/* ======== COMPACCIÓN EN PORTÁTILES (1366x768 aprox.) ======== */
@media (max-width: 1400px){
  /* contenedor general de precios */
  .section--pricing,
  .launch-packs{ max-width: 1100px; margin-inline:auto; padding-inline:16px; }

  /* títulos */
  .launch-packs__header h3{ font-size: clamp(18px,2vw,22px); }
  .launch-packs__header p{ font-size: .95rem; }

  /* grid de ofertas (2 columnas, menos gap) */
  .launch-packs__grid{ gap: 12px; }

  /* tarjetas oferta */
  .lp-card{
    padding: 16px;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
  }
  .lp-card h4{ font-size: clamp(16px,1.8vw,20px); }
  .lp-card__price{ margin: 0 0 6px; }
  .lp-card__price span{ font-size: 1.35em; }
  .lp-card__features{ margin: 8px 0 10px; }
  .lp-card__features li{ font-size: .92rem; line-height: 1.35; margin: 3px 0; }
  .lp-card__meta{ font-size: .9rem; gap: 10px; margin-bottom: 8px; }

  .lp-card__badge{ top:10px; left:10px; padding:3px 9px; font-size:.75rem; }

  .lp-card__cta{
    padding: 9px 14px; border-radius: 10px; font-size: .95rem;
  }
  .lp-card__small{ font-size: .8rem; }

  /* tarjetas de planes largos debajo */
  .prices__container{ gap: 12px; }
  .price__box{ padding: 16px; border-radius: 14px; }
  .prices__number{ font-size: 1.05rem; }
  .prices__advice{ font-size: .85rem; }
  .prices__features{ margin: 8px 0 10px; }
  .prices__reward{ font-size: .92rem; line-height: 1.35; }
  .prices__btn{ padding: 9px 14px; border-radius: 10px; font-size: .95rem; }
}

/* Si además la ALTURA es corta (típico 1366x768) compactamos un poco más */
@media (max-height: 820px){
  .lp-card{ padding: 14px; }
  .lp-card__features{ max-height: 120px; overflow: auto; scrollbar-width: thin; }
}

/* En tablets / < 900px apila a 1 columna para que respire */
@media (max-width: 900px){
  .launch-packs__grid{ grid-template-columns: 1fr; }
}

@media (max-width: 1400px){ .lp-card__small{ display:none; } }



/* ====== Aire vertical en tarjetas de ofertas ====== */
.lp-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height: 360px;              /* altura mínima cómoda */
  padding: 22px 24px;             /* más colchón interno */
}

.lp-card h4{
  margin: 12px 0 8px;             /* más separación arriba/abajo */
  font-size: 20px;
}

.lp-card__price{
  margin: 8px 0 14px;             /* espacio debajo del precio */
}

.lp-card__features{
  margin: 14px 0;                 /* bloque central respira */
}
.lp-card__features li{
  margin: 6px 0;                  /* más espacio entre cada feature */
  line-height: 1.5;
}

.lp-card__meta{
  margin: 12px 0 16px;            /* espacio antes del botón */
}

.lp-card__cta{
  margin-top: auto;               /* botón se va al fondo si sobra altura */
  padding: 12px 18px;
  font-size: 15px;
  border-radius: 12px;
}

.lp-card__small{
  margin-top: 14px;               /* nota legal separada del botón */
  font-size: .85rem;
  line-height: 1.4;
}


/* ===== Pricing — versión aireada, editorial y estandarizada ===== */
:root{
  --brand-1:#2F80A0; --brand-2:#5AA6BC;
  --gold-1:#C9A66B; --gold-2:#E7D1A3;
  --ink:#0f172a; --muted:#475569;
}

/* Contenedor con columnas flexibles y más aire entre tarjetas */
.prices__container{
  max-width: 1120px;
  margin: 24px auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: 28px;                         /* separación horizontal/vertical */
}
@media (max-width: 1100px){
  .prices__container{ grid-template-columns: 1fr; gap: 18px; }
}

/* Tarjeta base con “ritmo” vertical y CTA al fondo */
.price__box{
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr auto;   /* título, precio, lista, CTA */
  row-gap: 16px;                             /* aire entre bloques */
  padding: 24px 24px 22px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.price__box:hover{ transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.10); }

/* Variantes de fondo (coherentes con las ofertas) */
.price__box.price__box--featured{
  background: linear-gradient(135deg,#ffffff 0%, #EAF6FA 100%);
  border-color: rgba(47,128,160,.20);
}
.prices__container .price__box:last-child{ /* Premium */
  background: linear-gradient(135deg,#ffffff 0%, #F5EFE5 100%);
  border-color: rgba(201,166,107,.20);
}

/* Encabezado */
.price__subtitle{ display:flex; align-items:center; gap:8px; }
.prices__text{ font-size: 18px; font-weight: 700; color: var(--ink); }

/* Badge unificado */
.prices__badge{
  padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(120deg,var(--brand-1),var(--brand-2));
  box-shadow: 0 4px 10px rgba(47,128,160,.18);
}

/* Precio con respiro */
.prices__price{ margin-top: 2px; }
.prices__number{ display:block; color: var(--brand-1); font-weight: 800; font-size: 22px; line-height: 1.15; }
.prices__advice{ color: var(--muted); opacity: .85; }

/* Lista: más separación entre líneas y elementos */
.prices__features{ margin: 12px 0 0; padding-left: 18px; }
.prices__reward{ margin: 8px 0; line-height: 1.55; color: #334155; }

/* Separador sutil antes del botón para que no quede “pegado” */
.prices__buy{ margin-top: 14px; }
.prices__buy::before{
  content:""; display:block; height:1px;
  background: linear-gradient(90deg, transparent, rgba(15,23,42,.08), transparent);
  margin: 8px 0 14px;
}

/* Botón base (ghost elegante); ocupa todo el ancho y con hover suave */
.prices__btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  padding: 12px 16px; border-radius: 12px; font-weight: 800; text-decoration: none;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.08);
  color: #1f2937;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 14px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.prices__btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,0,0,.10); }

/* Botón primario (match con CTA azul de las ofertas) */
.prices__btn--primary{
  color:#fff; border:none;
  background: linear-gradient(120deg,var(--brand-1),var(--brand-2),var(--brand-1));
  background-size: 220% 220%;
  box-shadow: 0 8px 18px rgba(47,128,160,.25), inset 0 1px 0 rgba(255,255,255,.25);
}
.prices__btn--primary:hover{ background-position: 100% 0; transform: translateY(-1px); }
.prices__btn--primary:active{ transform: translateY(1px); box-shadow: inset 0 6px 12px rgba(0,0,0,.18); }

/* Alturas mínimas para que todas se alineen visualmente en desktop */
@media (min-width: 1101px){
  .price__box{ min-height: 460px; }     /* sube/baja 440–480 según te guste */
}

/* Mantén el botón en su sitio; solo espaciado del icono */
.btn-whatsapp{ display:inline-flex; align-items:center; }
.btn-whatsapp .icon-wa{ margin-right:8px; font-size:1.05em; line-height:0; }


/* (opcional) micro-anim al hover, coherente con tu gradiente */
.btn-whatsapp{ background-size:220% 220%; }
.btn-whatsapp:hover{ background-position:100% 0; filter:saturate(1.05); }

/* Botón de WhatsApp del hero: más separación icono-texto */
.btn-whatsapp{
  display: inline-flex;
  align-items: center;
  gap: 10px;            /* ← ajusta 8–12px a tu gusto */
}

.btn-whatsapp .icon-wa{
  margin-right: 0;      /* anulamos márgenes previos */
  line-height: 0;       /* evita que “salte” verticalmente */
  flex-shrink: 0;       /* que no se comprima en responsive */
}

/* ===== Floating Action Button (WhatsApp) ===== */
.fab{
  position: fixed;
  right: max(20px, env(safe-area-inset-right));   /* respeta notch/safe areas */
  bottom: max(20px, env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; z-index: 999;
  box-shadow: 0 14px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .15s ease, box-shadow .15s ease, background-position 2.2s ease;
}

/* Paleta coherente con tu brand (turquesa) */
.fab--wa{
  color: #fff;
  background: linear-gradient(120deg, #2F80A0, #5AA6BC, #2F80A0);
  background-size: 220% 220%;
  font-size: 24px;
}
.fab--wa:hover{
  transform: translateY(-2px);
  background-position: 100% 0;
  box-shadow: 0 18px 36px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.45);
}
.fab--wa:active{ transform: translateY(1px); }

/* Ajustes por tamaño de pantalla (que no choque con tu sidebar de iconos) */
@media (min-width: 1100px) and (max-width: 1500px){
  .fab--wa{ right: 24px; bottom: 24px; }  /* un pelín más hacia dentro */
}
/* Móvil: ligeramente más pequeña y separada del borde */
@media (max-width: 480px){
  .fab--wa{ width: 52px; height: 52px; right: 16px; bottom: 16px; font-size: 22px; }
}

/* No mostrar al imprimir */
@media print{ .fab{ display: none !important; } }



.case-study-btn.libros {
  margin-top: 8px;
  padding: 8px 22px;
  font-size: 15px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #7b5b3f, #c8a77b);
  color: #fff;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: pulseBronze 3s infinite;
}

.case-study-btn.libros:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 14px rgba(200, 167, 123, 0.7);
}

@keyframes pulseBronze {
  0%   { box-shadow: 0 0 4px rgba(200, 167, 123, 0.3); }
  50%  { box-shadow: 0 0 12px rgba(200, 167, 123, 0.7); }
  100% { box-shadow: 0 0 4px rgba(200, 167, 123, 0.3); }
}

.case-study-btn.libros {
  margin-top: 8px;
  padding: 8px 22px;
  font-size: 15px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  background: linear-gradient(270deg, #7b5b3f, #c8a77b, #9c7a55, #c8a77b, #7b5b3f);
  background-size: 400% 400%;
  color: #fff;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: pulseBronze 3s infinite;
}

.case-study-btn.libros:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 14px rgba(200, 167, 123, 0.7);
  animation: bronzeWave 3s ease infinite; /* activa ola en hover */
}

@keyframes pulseBronze {
  0%   { box-shadow: 0 0 4px rgba(200, 167, 123, 0.3); }
  50%  { box-shadow: 0 0 12px rgba(200, 167, 123, 0.7); }
  100% { box-shadow: 0 0 4px rgba(200, 167, 123, 0.3); }
}

@keyframes bronzeWave {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* Fondo del modal con blur */
.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 999;
}

/* Contenedor del modal */
.modal-content {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  max-width: 700px;
  width: 90%;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  position: relative;
  animation: scaleIn 0.3s ease;
  overflow-y: auto;
  max-height: 80vh;
}

/* Animación de entrada */
@keyframes scaleIn {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Títulos y tipografía */
.modal-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  margin-bottom: 8px;
  color: #7b5b3f;
}
.modal-subtitle {
  font-size: 16px;
  margin-bottom: 20px;
  color: #555;
  font-style: italic;
}
.modal-body h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  margin-top: 18px;
  color: #333;
}
.modal-body p {
  margin-top: 6px;
  line-height: 1.6;
  color: #444;
}

/* Botón cerrar */
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #7b5b3f;
  transition: transform 0.2s ease;
}
.modal-close:hover {
  transform: scale(1.2);
}

/* Estado visible */
.modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}


/* Contenedor de case study dentro del modal */
.cs { --bronze:#7b5b3f; --gold:#c8a77b; --ink:#333; --muted:#666; }

.cs-kicker{font-size:12px;color:#777;margin:0 0 8px}
.cs h3{
  font-family:'Cormorant Garamond',serif;
  font-size:22px; margin:18px 0 8px; color:#5a4030
}
.cs p{line-height:1.7;color:#333;margin:6px 0 14px}
.cs .cs-list{padding-left:18px;margin:8px 0 14px}
.cs .cs-list li{margin:6px 0}

.cs-tags{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 6px}
.cs-tag{
  font-size:12px; padding:6px 10px; border-radius:14px;
  background:rgba(200,167,123,.12); color:#5a4030; border:1px solid rgba(200,167,123,.35)
}

.cs-grid{
  display:grid; gap:14px; margin:14px 0 6px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.cs-fig{background:rgba(255,255,255,.6); border-radius:12px; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,.08)}
.cs-fig img{width:100%; display:block}
.cs-fig figcaption{font-size:12px;color:#555;padding:8px 10px}

@media (max-width:768px){ .cs-grid{grid-template-columns:1fr} }

.cs-code{
  background:linear-gradient(180deg, rgba(200,167,123,.12), rgba(200,167,123,.06));
  border:1px solid rgba(200,167,123,.35);
  color:#2d2d2d; padding:12px; border-radius:12px; overflow:auto; font-size:12.5px
}

.cs-cta{display:flex; gap:10px; margin-top:14px}
.cs-btn{
  display:inline-block; padding:8px 16px; border-radius:18px; text-decoration:none; font-weight:500
}
.cs-btn.demo{
  background:linear-gradient(135deg,var(--bronze),var(--gold)); color:#fff;
  box-shadow:0 6px 20px rgba(123,91,63,.25)
}
.cs-btn.code{
  background:rgba(0,0,0,.04); color:#333; border:1px solid rgba(0,0,0,.08)
}

.modal-content {
  scrollbar-width: none; /* Firefox */
}
.modal-content::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}


.cs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  justify-items: center;
}

.cs-fig img {
  max-width: 260px; /* o 280px según gusto */
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.cs-fig figcaption {
  margin-top: .5rem;
  font-size: .9rem;
  text-align: center;
  max-width: 240px;
}