:root {
  --color-1: #D7A00F;
  --color-2: #ffffff;
  --color-3: #3498db;
  --color-4: #676767;
}

body{
  font-family: "Asap", sans-serif !important;
  font-optical-sizing: auto;
  font-style: normal;
  /*font-variation-settings:"wdth" 100;*/
  font-size: 16px;
  color: var(--color-4);
}
.font-s-0{
    font-size: 1rem;
}
.font-s-1{
    font-size: 2rem;
}
.font-s-2{
    font-size: 10rem;
    line-height: 8rem;
}
.font-s-3{
    font-size: 3rem;
}
.color-1{
    color: var(--color-1);
}
.color-2{
    color: var(--color-2);
}

.llave-g{
  font-size: 20rem;
}

.bg-deg-gray{
  background: linear-gradient(180deg, #ffffff 50%, #EAEAEA 70%);
}


.btn-primary{
  background-color: var(--color-1);
  color: black;
  font-weight: bold !important;
  border-color: var(--color-1);
  border-radius: 2rem 2rem !important;
}
.btn-primary:hover{
  background-color: black;
  color:  var(--color-1);
  font-weight: bold !important;
  border-color: var(--color-1);
}

.btn-primary:hover .ico-black{
  fill: var(--color-1)
}


.border-t-w-1{
  border-top: rgba(255,255,255,.1) 1px solid;
}

nav a{
  color: var(--color-1) !important;
}
nav a:hover{
  color: var(--color-2) !important;
  text-shadow: 1px 1px 6px rgba(255,255,255,0.2);
}

@media (max-width: 576px) {
  .font-s-2 {
    font-size: 7rem !important;
    line-height: 6rem;
  }
  .font-s-1{
    font-size: 1rem;
  }
}

/* Tablets: entre 601px y 1024px */
@media (min-width: 577px){
  .font-s-2 {
  font-size: 6rem !important;
  line-height: 5rem;
}
}


.border-c-black{
  border-bottom: 1px solid rgba(255,255,255,.05);
}

                /* Carousel (recomendaciones) */
                .carousel-viewport { width:100%; max-width:1100px; margin:2rem auto 0 auto; position:relative; }
                .carousel-track { display:flex; gap:1rem; transition:transform .5s cubic-bezier(.4,0,.2,1); will-change:transform; }
                /* 3 por pantalla en desktop */
                .carousel-card { flex: 0 0 calc((100% - 2rem)/3); background:#111; border:1px solid #222; border-radius:12px; padding:1rem; color:#fff; box-shadow:0 2px 16px #0002; }
                .carousel-card .head { display:flex; align-items:center; gap:.75rem; }
                .carousel-card img { width:56px; height:56px; border-radius:50%; object-fit:cover; }
                .carousel-card .name { font-weight:700; }
                .carousel-card .text { color:#bbb; font-size:.95rem; line-height:1.4; margin-top:.5rem; }
                /* Stars (SVG, tamaño consistente) */
                .stars { display:flex; gap:4px; align-items:center; }
                .stars svg { width:10px; height:10px; flex:0 0 10px; margin-top: 4px; display:inline-block; }
                .stars svg.filled path { fill:#FFD700; stroke:#FFD700; }
                .stars svg.empty  path { fill:transparent; stroke:#FFD700; stroke-width:2; }
                .carousel-viewport button[aria-label] { position:absolute; top:50%; transform:translateY(-50%); background:#fff; color:#000; border:none; border-radius:50%; width:2.5rem; height:2.5rem; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; font-size:1.25rem; }
                #rec-prev { left:0; }
                #rec-next { right:0; }
                @media (max-width:900px){ /* 2 por pantalla en tablet */
                  .carousel-card { flex: 0 0 calc((100% - 1rem)/2); }
                }
                @media (max-width:600px){ /* 1 por pantalla en móvil */
                  .carousel-card { flex: 0 0 100%; }
                  .carousel-viewport button[aria-label] { width:2rem; height:2rem; font-size:1.1rem; }
                }
                /* Bullets (paginación) */
                .carousel-dots { display:flex; gap:.5rem; justify-content:center; align-items:center; margin-top:1rem; }
                .carousel-dot { width:10px; height:10px; border-radius:50%; background: rgba(215, 160, 15, .25); border:1px solid #777; cursor:pointer; }
                .carousel-dot.active { background: rgba(215, 160, 15, 1); }
                /* Pausa al pasar el mouse */
                #recomendaciones:hover { --paused: 1; }


/* Estado base de slides */
#slides .slide { display:none; opacity:0; }
#slides .slide.active { display:grid; animation: fadeIn 500ms ease forwards; }

/* Animaciones */
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes zoomIn {
  from { opacity:0; transform: scale(0.98) }
  to   { opacity:1; transform: scale(1) }
}
@keyframes bracePop {
  0%   { opacity:0; transform: scale(0.8) }
  60%  { opacity:1; transform: scale(1.06) }
  100% { transform: scale(1) }
}
@keyframes slideInLeft  { from{opacity:0; transform:translateX(-40px)} to{opacity:1; transform:translateX(0)} }
@keyframes slideInRight { from{opacity:0; transform:translateX( 40px)} to{opacity:1; transform:translateX(0)} }

/* Cuando un slide se activa, disparamos animaciones internas */
#slides .slide.active .anim-text  { animation: zoomIn 700ms ease both 120ms; }
#slides .slide.active .anim-brace { animation: bracePop 600ms ease both; }
#slides .slide.active .anim-img[data-dir="left"]  { animation: slideInLeft  800ms ease both; }
#slides .slide.active .anim-img[data-dir="right"] { animation: slideInRight 800ms ease both; }

/* Respeta usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Barra de progreso */
.progress-bar {
  position: relative;
  height: 2px;
  width: 25%;
  background: rgba(255, 215, 0, 0.2); /* amarillo muy suave de fondo */
  border-radius: 4px;
  overflow: hidden;
  margin: 0 auto;
}

.progress {
  height: 100%;
  width: 0;
  background: #FFD200; /* amarillo brillante */
  border-radius: 4px;
  transform-origin: left center;
}
.img-fit-scale-down img{
  height: 100%;
  object-fit: scale-down;
  object-position: center bottom;
}

textarea{
  height: 400px !important;
}

.contacto{
  background-color: #EBEBEB;
}

.border-top{
  border-top: 1px solid rgba(255, 255, 255, 0.01);
}