/* ==================================================================
   main.css — Optimized (colores en HEX como el original)
   - Se conservan hex y rgba originales
   - Reglas agrupadas, sin redundancias
   - Mantiene secciones
   - Agrega "Valores (CRISTAL)" al final
   ================================================================== */

/*------------------------------
  Root util tokens (sin colores)
------------------------------*/
:root{
  --space-section: 90px;
  --radius-0: 0;
  --radius-4: 4px;
  --tr-fast: 200ms ease;
  --tr-med: 300ms;
  --tr-slow: .5s ease;
}

/*************************
*******Typography******
**************************/
*,
*::before,
*::after{ box-sizing: border-box; }

body{
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 24px;
  color: #666;
  background-color: #fff;
}

h1,h2,h3,h4,h5,h6{ color:#333; }

h2{ font-size:30px; margin-bottom:20px; }
h3{ font-size:18px; }

/* Links */
a{
  text-decoration:none;
  transition: var(--tr-med);
}
a:focus,
a:hover{ text-decoration:none; outline:0; }

/* Secciones */
section{ padding: var(--space-section) 0; }
.heading{ padding-bottom: var(--space-section); }

/* Parallax + tipografías en parallax */
.parallax{
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  background-attachment:fixed;
  color:#fff;
}
.parallax h1,
.parallax h2,
.parallax h3,
.parallax h4,
.parallax h5,
.parallax h6{ color:#fff; }

.parallax input[type="text"],
.parallax input[type="email"],
.parallax input[type="url"],
.parallax input[type="password"],
.parallax textarea{
  font-weight:300;
  color:#fff;
}

/* Botones */
.btn{ border:0; border-radius: var(--radius-0); }
.btn.btn-primary:hover{ background-color:#017fb5; }

/* Navbar */
.navbar-nav li a:hover,
.navbar-nav li a:focus{
  outline:0;
  outline-offset:0;
  background:transparent;
}
.navbar-right li a{
  color:#fff;
  text-transform:uppercase;
  font-size:13px;
  font-weight:600;
  padding-left:8px;
  padding-right:8px;
  padding-top:22px;
  padding-bottom:22px;
}
.navbar-right li.active a{ background-color: rgba(0,0,0,.2); }
.navbar-brand h1{ margin-top:5px; }

/* Botón flotante login */
a.floating-login {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 100000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #017fb5;
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid #016a97;
  box-shadow: 0 10px 24px rgba(1, 127, 181, 0.25);
  text-decoration: none;
}

a.floating-login:hover,
a.floating-login:focus {
  color: #fff;
  background: #016a97;
  text-decoration: none;
}

/* Refuerzo para asegurar que en index sí se comporte como flotante */
#floating-login-home {
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 2147483000 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* Preloader */
.preloader{
  position:fixed; inset:0; z-index:999999; background:#000;
}
.preloader>i{
  position:absolute; top:50%; left:50%;
  height:50px; width:50px; margin:-15px 0 0 -15px;
  font-size:50px; line-height:50px; display:inline-block;
}

/*************************
********Home CSS**********
**************************/
#home-slider{ overflow:hidden; position:relative; }

#home-slider .item {
    background-size: cover;          /* llena el ancho, recorta lo que sobre */
    background-position: center;     /* centra la imagen */
    background-repeat: no-repeat;
}

#home-slider .caption{
  position:absolute; top:50%; left:0; right:0;
  margin-top:-104px; text-align:center; text-transform:uppercase; z-index:15;
  font-size:18px; font-weight:300; color:#fff;
}
#home-slider .caption h1{
  color:#fff; font-size:60px; font-weight:700; margin-bottom:30px;
}

/* Todas las imágenes dentro de los carruseles */
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

.carousel-inner img {
    width: 100%;
    height: auto;
}

.caption .btn-start{
  color:#fff; font-size:14px; font-weight:600;
  padding:14px 40px; border:1px solid #6e6d6c; border-radius: var(--radius-4); margin-top:40px;
}
.caption .btn-start:hover{ color:#fff; }

.carousel-fade .carousel-inner .item{
  opacity:0; transition-property:opacity;
  background-repeat:no-repeat; background-size:cover; height:2037px;
}
.carousel-fade .carousel-inner .item:after{
  content:""; position:absolute; inset:0; background: rgba(0,0,0,.7);
}
.carousel-fade .carousel-inner .active{ opacity:1; }
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right{ left:0; opacity:0; z-index:1; }
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right{ opacity:1; }
.carousel-fade .carousel-control{ z-index:2; }

.left-control,
.right-control{
  position:absolute; top:50%;
  height:51px; width:51px; line-height:48px;
  border-radius:50%; border:1px solid #fff;
  z-index:20; font-size:24px; color:#fff; text-align:center;
  transition: all var(--tr-slow);
}
.left-control{ left:-51px; }
.right-control{ right:-51px; }
.left-control:hover,
.right-control:hover{ color:#fff; }
#home-slider:hover .left-control{ left:30px; }
#home-slider:hover .right-control{ right:30px; }

#home-slider .fa-angle-down{
  position:absolute; left:50%; bottom:50px; margin-left:-12px;
  color:#fff; display:inline-block; width:24px;
  font-size:24px; line-height:24px; z-index:999;
  -webkit-animation:bounce 3000ms infinite;
  animation:bounce 3000ms infinite;
}

/*************************
********Service CSS*******
**************************/
.service-icon{
  border-radius: var(--radius-4);
  color:#fff; display:inline-block; font-size:36px;
  height:90px; width:90px; line-height:90px;
  -webkit-transition: background-color .2s ease;
  transition: background-color .2s ease;
}
.our-services .col-sm-4:hover .service-icon{ background-color:#333; }

.our-services .col-sm-4{
  border-right:1px solid #f2f2f2;
  border-bottom:1px solid #f2f2f2;
  padding-bottom:50px;
}
.our-services .col-sm-4:nth-child(4),
.our-services .col-sm-4:nth-child(5),
.our-services .col-sm-4:nth-child(6){
  border-bottom:0; padding-top:60px;
}
.our-services .col-sm-4:nth-child(3),
.our-services .col-sm-4:nth-child(6){ border-right:0; }

.service-info h3{ margin-top:35px; }

/*************************
********Busqueda CSS*******
**************************/
.busqueda-icon{
  border-radius: var(--radius-4);
  color:#fff; display:inline-block; font-size:36px;
  height:90px; width:90px; line-height:90px;
  -webkit-transition: background-color .2s ease;
  transition: background-color .2s ease;
}
.our-busquedas .col-sm-4:hover .busqueda-icon{ background-color:#333; }

.our-busquedas .col-sm-4{
  border-right:1px solid #f2f2f2;
  border-bottom:1px solid #f2f2f2;
  padding-bottom:50px;
}
.our-busquedas .col-sm-4:nth-child(4),
.our-busquedas .col-sm-4:nth-child(5),
.our-busquedas .col-sm-4:nth-child(6){
  border-bottom:0; padding-top:60px;
}
.our-busquedas .col-sm-4:nth-child(3),
.our-busquedas .col-sm-4:nth-child(6){ border-right:0; }

.busqueda-info h3{ margin-top:35px; }

/*************************
********About CSS*******
**************************/
#about-us{
  background-image:url(../images/about-bg.jpg);
  padding:60px 0;
}
#about-us h2{ margin-top:0; color:#fff; }
#about-us .lead{ font-size:16px; margin-bottom:10px; }
#about-us h1{ margin-bottom:30px; }

.progress{
  height:20px; background-color:#fff;
  border-radius: var(--radius-0);
  box-shadow:none; -webkit-box-shadow:none;
  margin-bottom:25px;
}
.progress-bar{
  box-shadow:none; -webkit-box-shadow:none;
  text-align:right; padding-right:12px;
  font-size:12px; font-weight:600;
}
.progress .progress-bar.six-sec-ease-in-out{
  -webkit-transition: width 2s ease-in-out;
  transition: width 2s ease-in-out;
}

/*************************
********portfolio CSS*****
**************************/
#portfolio .container-fluid,
#portfolio .col-sm-3{ overflow:hidden; padding:0; }

#portfolio .folio-item{ position:relative; }

#portfolio .overlay{
  background-color:#000; color:#fff;
  left:0; right:0; bottom:-100%; height:0;
  position:absolute; text-align:center; opacity:0;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
.overlay .overlay-content{ display:table; height:100%; width:100%; }
.overlay .overlay-text{ display:table-cell; vertical-align:middle; }

.overlay .folio-info{
  opacity:0; margin-bottom:75px; margin-top:-75px;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.overlay .folio-info h3{ margin-top:0; color:#fff; }

.folio-overview a{
  font-size:18px; color:#333;
  height:50px; width:50px; line-height:50px; border-radius:50%;
  background-color:#fff;
  display:inline-block; margin-top:20px; margin-right:5px;
}
.folio-overview a:hover{ color:#fff; }

.folio-overview .folio-expand{ margin-top:-500px; margin-left:-500px; }

.folio-image,
.folio-overview .folio-expand{
  -webkit-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out;
}
#portfolio .folio-item:hover .folio-image{
  -webkit-transform: scale(1.5) rotate(-15deg);
  transform: scale(1.5) rotate(-15deg);
}
.folio-image img{ width:100%; }

#portfolio .folio-item:hover .overlay{
  opacity:.8; bottom:0; height:100%;
}
#portfolio .folio-item:hover .folio-overview .folio-expand{
  margin-top:0; margin-left:0;
}
#portfolio .folio-item:hover .overlay .folio-info{
  opacity:1; margin-bottom:0; margin-top:0;
}

#single-portfolio{
  padding: var(--space-section) 0;
  background:#f5f5f5; position:relative;
}
#single-portfolio img{ width:100%; margin-bottom:10px; }
#single-portfolio .close-folio-item{
  position:absolute; top:30px; left:50%;
  font-size:34px; width:34px; height:34px; color:#999;
  margin-left:-17px;
}

/*************************
*********Team CSS*********
**************************/
#team{ padding-top:0; }
.team-members{ margin-bottom:25px; }

.social-icons{ margin-top:30px; text-align:center; }
.social-icons ul{ list-style:none; padding:0; margin:0; display:inline-block; }
.social-icons ul li{ float:left; margin-right:8px; }
.social-icons ul li:last-child{ margin-right:0; }
.social-icons ul li a{
  color:#fff; background-color:#d9d9d9;
  height:36px; width:36px; line-height:36px; display:block; font-size:16px; opacity:.8;
}
.social-icons ul li a:hover{
  opacity:1; -webkit-transform:scale(1.2); transform:scale(1.2);
}

.team-member{
  text-align:center; color:#333; font-size:14px;
}
.team-member:hover .social-icons ul li a.facebook{ background-color:#3b5999; }
.team-member:hover .social-icons ul li a.twitter{ background-color:#2ac6f7; }
.team-member:hover .social-icons ul li a.dribbble{ background-color:#ff5b92; }
.team-member:hover .social-icons ul li a.linkedin{ background-color:#0000cc; }
.team-member:hover .social-icons ul li a.rss{ background-color:#ff6b00; }

#team .img-responsive{ width:100%; }

/* --- Unificar tamaño de imágenes del equipo --- */
.team-member .member-image {
    width: 100%;
    height: 400px;      /* Puedes ajustar: 220, 240, 280, etc. */
    overflow: hidden;   /* Recorta el exceso */
    border-radius:60px; /* Opcional, por estética */
}

.team-member .member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Mantiene proporción y recorta */
    object-position: center; /* Centra el recorte */
    display: block;
  border-radius: 16px;   /* Mantiene el borde redondeado */
}


.member-info h3{ margin-top:35px; }
.member-info h4{ font-size:14px; margin-bottom:15px; color:#999; }

/*************************
*******Features CSS*******
**************************/
#features{
  text-align:center;
  background-image:url(../images/features-bg.jpg);
}
#features i{ font-size:48px; }
#features h3{
  margin-top:15px; font-size:30px; margin-bottom:7px; color:#fff;
}
#features .slider-overlay{ opacity:.8; }

/*************************
*****Pricing Table CSS****
**************************/
.pricing-table{ text-align:center; }
.single-table{
  padding:30px 20px 20px; border:1px solid #f2f2f2;
}
.single-table h3{
  margin-top:0; padding:0; font-size:18px; text-transform:uppercase; margin-bottom:30px;
}
.price{ font-size:36px; line-height:36px; }
.price span{ font-size:14px; line-height:14px; }
.single-table ul{ list-style:none; padding:0; margin:30px 0; }
.single-table ul li{ line-height:30px; }
.single-table.featured{ color:#fff; }
.single-table.featured h3{ color:#fff; }
.single-table.featured .btn.btn-primary{ background-color:#fff; }

/*************************
********Twitter CSS*******
**************************/
#twitter{ background-image:url(../images/twitter-bg.jpg); }
#twitter>div{ text-align:center; position:relative; }
#twitter-carousel{ position:relative; z-index:15; }

.twitter-icon{ position:relative; z-index:15; color:#fff; }
.twitter-icon .fa-twitter{
  font-size:24px; height:64px; width:64px; line-height:65px; border-radius:50%; position:relative;
}
.twitter-icon .fa-twitter:after{
  position:absolute; content:""; border-width:8px; border-style:solid; left:24px; bottom:-14px;
}
#twitter-carousel .item{ padding:0 55px; }
#twitter-carousel .item a{ color:#fff; }
.twitter-icon h4{
  text-transform:uppercase; margin-top:25px; margin-bottom:25px; color:#fff;
}

.twitter-left-control,
.twitter-right-control{
  position:absolute; top:50%; color:#fff; border:1px solid #fafafa;
  height:34px; width:34px; line-height:31px; margin-top:-17px; font-size:18px; border-radius:50%; z-index:15;
}
.twitter-left-control{ left:80px; }
.twitter-right-control{ right:80px; }
.twitter-left-control:hover,
.twitter-right-control:hover{ color:#fff; }

/*************************
**********Blog CSS********
**************************/
.post-thumb{ position:relative; }
.post-icon{
  position:absolute; top:10px; right:10px; height:30px; width:30px; line-height:30px;
  border-radius:4px; text-align:center; color:#fff; font-size:12px;
}
.post-meta{
  position:absolute; bottom:15px; left:15px; color:#fff;
  font-size:12px; text-transform:uppercase; font-weight:600;
}
.post-meta span{ margin-right:16px; }

#post-carousel .carousel-indicators{ bottom:3px; left:90%; }

.blog-left-control,
.blog-right-control{
  position:absolute; top:45%; width:30px; text-align:center;
  color:rgba(255,255,255,.7); font-size:36px;
}
.blog-left-control{ left:0; }
.blog-right-control{ right:0; }
.blog-left-control:hover,
.blog-right-control:hover{ color:#fff; }

.entry-header h3 a{ line-height:30px; }

.entry-header .date,
.entry-header .cetagory{
  display:inline-block; font-size:11px; font-weight:600; margin-bottom:30px;
  text-transform:uppercase; position:relative;
}
.entry-header .date:after{
  content:""; position:absolute; left:0; bottom:-22px; width:20px; height:3px;
}

.entry-content{ font-size:14px; }

.load-more{
  display:block; text-align:center; margin-top:70px;
}
.btn-loadmore{
  border:1px solid #f2f2f2; color:#666666;
  font-size:14px; font-weight:600; padding:15px 125px; text-transform:uppercase;
}
.btn-loadmore:hover{ color:#fff; }

/*************************
**********Contact CSS*****
**************************/
#contact{ padding-top:45px; padding-bottom:0; }
#google-map{ height:350px; }

#contact-us{
  background-image:url(../images/contact-bg.jpg);
  padding-bottom: var(--space-section);
}
#contact-us .heading{ padding-top:95px; }
#contact-us .address ul li a.facebook:hover{ background-color:#3b5949; }

.form-control{
  background-color:transparent;
  border-color: rgba(255,255,255,.4);
  height:50px; border-radius: var(--radius-0);
  box-shadow:none;
}
textarea.form-control{ min-height:180px; resize:none; }
.form-group{ margin-bottom:30px; }

.contact-info{ padding-left:70px; font-weight:300; }

ul.address{
  margin-top:30px; list-style:none; padding:0; margin:0;
}
.contact-info ul li{ margin-bottom:8px; }
.contact-info ul li a{ color:#fff; }

.btn-submit{
  display:block; padding:12px; width:100%;
  color:#fff; border:0; margin-top:40px;
}

/*************************
**********Footer CSS******
**************************/
#footer{ color:#fff; }
.footer-top{ position:relative; padding:30px 0; }

#footer .footer-bottom{
  background-color:#fff;
  padding:20px 0 10px;
}
#footer .footer-bottom a:hover{ text-decoration:underline; }

.footer-logo{ display:inline-block; margin-bottom:5px; }

#footer .social-icons{ margin-top:15px; }
#footer .social-icons ul{ list-style:none; padding:0; margin:0; }
#footer .social-icons ul li a{
  background-color: rgba(0,0,0,.2);
  border-radius:4px; line-height:33px;
}
#footer .social-icons ul li a:hover{ color:#fff; }
#footer .social-icons ul li a.envelope:hover{ background-color:#CECB26; }
#footer .social-icons ul li a.facebook:hover{ background-color:#3b5999; }
#footer .social-icons ul li a.twitter:hover{ background-color:#2ac6f7; }
#footer .social-icons ul li a.dribbble:hover{ background-color:#ff5b92; }
#footer .social-icons ul li a.linkedin:hover{ background-color:#ff0000; }
#footer .social-icons ul li a.tumblr:hover{ background-color:#ff6b00; }

/*************************
********Descanso CSS*******
**************************/
#descanso{ background-image:url(../images/descanso-bg.jpg); }
#descanso>div{ text-align:center; position:relative; }
#descanso-carousel{ position:relative; z-index:15; }

.descanso-icon{ position:relative; z-index:15; color:#fff; }
.descanso-icon .fa-bar-chart{
  font-size:24px; height:64px; width:64px; line-height:65px;
  border-radius:50%; position:relative;
}
.descanso-icon .fa-bar-chart:after{
  position:absolute; content:""; border-width:8px; border-style:solid; left:24px; bottom:-14px;
}
#descanso-carousel .item{ padding:0 55px; }
#descanso-carousel .item a{ color:#fff; }
.descanso-icon h4{
  text-transform:uppercase; margin-top:25px; margin-bottom:25px; color:#fff;
}
.descanso-left-control,
.descanso-right-control{
  position:absolute; top:50%; color:#fff; border:1px solid #fafafa;
  height:34px; width:34px; line-height:31px; margin-top:-17px; font-size:18px; border-radius:50%; z-index:15;
}
.descanso-left-control{ left:80px; }
.descanso-right-control{ right:80px; }
.descanso-left-control:hover,
.descanso-right-control:hover{ color:#fff; }

/*************************
*******Valores CSS********
**************************/
/* Lista CRISTAL con mayúsculas y texto alineados */
.valores-cristal{
  list-style:none;
  margin:0;
  padding:0;
  max-width:28rem; /* opcional: limita ancho para mejor lectura */
}
.valores-cristal li{
  display:grid;
  grid-template-columns:1.2rem 1ch 1fr; /* bullet | letra | resto */
  column-gap:.5rem;
  align-items:baseline;
  line-height:1.5;
  margin:.25rem 0;
  color:#fff; /* ajusta al color de tu sección */
  font-size:1.05rem;  /* ajusta a gusto */
}
/* Bullet personalizado (puedes cambiarlo por un ícono si quieres) */
.valores-cristal .bullet{
  text-align:center;
  opacity:.9;
}
/* La letra inicial: sólida y un poquito más grande */
.valores-cristal .initial{
  font-weight:700;
  letter-spacing:.05em;
  font-size:1.15em;
  text-align: center;
  color:#eaf6ff; /* NUEVO color sutil para contraste */
}
/* El resto de la palabra ocupa la tercera columna automáticamente */
.valores-cristal .rest{
  /* hereda color/tamaño */
}
/* Responsive fino */
@media (max-width:420px){
  .valores-cristal li{
    grid-template-columns:1rem 1ch 1fr;
    column-gap:.35rem;
  }
}