/* Topbar */
.topbar { 
    background: #fff; 
    border-bottom: 1px solid #edf0f3; 
}

.topbar__inner { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 16px; 
    min-height: 58px; 
}

.topbar__tagline { 
    align-self: stretch; 
    display: flex; 
    align-items: center; 
    background: linear-gradient(90deg, #f6a21a, var(--primary) 60%, var(--primary-2)); 
    color: #fff; 
    font-weight: 700; 
    font-size: 14px; 
    letter-spacing: 1.6px; 
    text-transform: uppercase; 
    padding: 0 64px 0 40px; 
    clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0 100%); 
}

.topbar__links { 
    display: flex; 
    gap: 30px; 
    font-weight: 600; 
    font-size: 15px; 
    color: var(--dark); 
    padding-right: 24px; 
}

.topbar__links a:hover { color: var(--primary); }

/* Header */
.header { 
    background: linear-gradient(90deg, #fff6ec 0%, #fff 35%, #fff 70%, #f4f7fa 100%); 
    color: var(--text); 
    position: sticky; 
    top: 0; 
    z-index: 50; 
    box-shadow: 0 6px 18px rgba(16, 36, 59, .06); 
}

.header__inner { 
    display: flex; 
    align-items: center; 
    gap: 40px; 
    padding: 16px 24px; 
}

.logo { 
    display: inline-flex; 
    flex-direction: column; 
    align-items: center; 
    line-height: 1; 
    flex-shrink: 0; 
}

.logo__name { 
    font-family: 'Russo One', var(--font); 
    font-size: 46px; 
    color: #0d5c75; 
    letter-spacing: .5px; 
}

.logo__sub { 
    font-size: 13px; 
    letter-spacing: 3px; 
    color: var(--primary); 
    font-weight: 500; 
    margin-top: 4px; 
}

.logo--white .logo__name { color: #fff; }

.search { 
    flex: 1; 
    display: flex; 
    max-width: 585px; 
    border: 1px solid #d5dce3; 
    border-radius: 6px; 
    overflow: hidden; 
    background: #fff; 
    box-shadow: 0 2px 6px rgba(16, 36, 59, .05); 
}

.search input { 
    flex: 1; 
    border: 0; 
    padding: 0 16px; 
    height: 54px; 
    outline: none; 
    min-width: 0; 
    color: var(--text); 
    font-size: 17px; 
    background: #fafbfc; 
}

.search input::placeholder { color: #8a96a3; }

.search button { 
    background: var(--primary); 
    color: #fff; width: 86px; 
    display: grid; 
    place-items: center; 
    transition: .2s; 
}

.search button:hover { background: var(--primary-2); }

.hcontact { 
    display: flex; 
    align-items: center; 
    gap: 14px; 
    margin-left: auto; 
    flex-shrink: 0; 
}

.hcontact__ico { 
    width: 52px; 
    height: 52px; 
    border-radius: 50%; 
    background: var(--primary); 
    color: #fff; 
    display: grid; 
    place-items: center; 
}

.hcontact__txt { 
    display: flex; 
    flex-direction: column; 
    line-height: 1.25; 
}

.hcontact__txt small { 
    color: var(--muted); 
    font-size: 15px; 
}

.hcontact__txt b { 
    font-size: 20px; 
    color: var(--navy); 
}

.btn--cta { 
    background: var(--primary); 
    color: #fff; 
    border-radius: 999px; 
    padding: 16px 28px; 
    font-size: 18px; 
    font-weight: 700; 
    box-shadow: 0 8px 18px rgba(242, 140, 0, .3); 
}

.btn--cta:hover { background: var(--primary-2); }

.burger { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 5px; padding: 10px; border-radius: 8px; background: var(--navy); flex-shrink: 0; }
.burger span { display: block; height: 2px; background: #fff; border-radius: 2px; transition: .25s; }

/* Nav: solo drawer en móvil/tablet */
.nav { display: none; }

.nav__close { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 18px 20px; 
    color: #fff; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    border-bottom: 3px solid var(--primary); 
}

.nav__close button { 
    font-size: 30px; 
    line-height: 1; 
    color: #fff; 
}

.nav__link { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 6px; padding: 14px 20px; 
    font-weight: 600; color: #fff; 
    text-transform: uppercase; 
    font-size: 14px; 
    letter-spacing: .4px; 
    border-bottom: 1px solid rgba(255,255,255,.08); 
}

.nav__caret { 
    font-size: 10px; 
    transition: .2s; 
}

.nav__item.open .nav__caret { transform: rotate(180deg); }

.nav__sub { 
    display: none; 
    background: var(--navy); 
}

.nav__item.open .nav__sub { display: block; }

.nav__sub a { 
    display: block; 
    padding: 10px 28px; 
    font-size: 14px; 
    color: #dfe6ec; 
}

.nav__sub a:hover { color: var(--yellow); }

.nav__contact { 
    padding: 20px; 
    display: grid; 
    gap: 12px; 
}

.nav__contact a { 
    color: #fff; 
    font-weight: 600; 
}

/* Portada */
.portada { 
    padding: 32px 0; 
    background: var(--bg); 
}

.portada__grid { 
    display: grid; 
    grid-template-columns: 312px 1fr; 
    position: relative; 
    box-shadow: var(--shadow); 
}

.cats { 
    background: #fff; 
    display: flex; 
    flex-direction: column; 
    min-height: 0; 
    /*contain: size; */
}

.cats__head { 
    height: 72px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 12px; 
    background: linear-gradient(90deg, var(--primary), var(--primary-2)); 
    color: #fff; 
    font-weight: 700; 
    font-size: 18px; 
    text-transform: uppercase; 
    letter-spacing: .6px; 
    width: 100%; 
    cursor: default; 
    flex-shrink: 0; 
}

.cats__list { 
    flex: 1; 
    overflow-y: auto; 
    scrollbar-width: thin; 
    scrollbar-color: #8f9aa5 #f1f3f5; 
    max-height: 486px;
    overflow-x: visible; /* Permite que el submenú salga a la derecha */
}

.cats__list::-webkit-scrollbar { width: 8px; }

.cats__list::-webkit-scrollbar-thumb { 
    background: #8f9aa5; 
    border-radius: 4px; 
}

.cats__list::-webkit-scrollbar-track { background: #f1f3f5; }

.cats__item {
    position: static;    /* Evita que el contenedor del scroll rompa el submenú */
}

.cats__link { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    height: 54px; 
    padding: 0 16px 0 14px; 
    border-bottom: 1px solid #e8ecf0; 
    font-weight: 600; 
    font-size: 16px; 
    color: var(--text); transition: .15s; 
}


.cats__link i { 
    font-size: 18px; /* Controla el tamaño del icono */
    color: #6b7783; 
    flex-shrink: 0; 
    width: 20px;     /* Opcional: Centra visualmente el espacio del icono */
    text-align: center;
}

.cats__link .chev { 
    margin-left: auto; 
    color: #9aa5b0; 
    width: 14px; 
    height: 14px; 
}

.cats__item:hover > .cats__link { 
    background: #fff7ee; 
    color: var(--primary-2); 
}

.cats__item:hover > .cats__link svg { color: var(--primary); }

/* Flyout de categoría (escritorio) */

.cats__fly { 
    position: absolute; 
    left: 312px; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    background: #fff; 
    z-index: 99; 
    padding: 28px 32px; 
    visibility: hidden; 
    opacity: 0; 
    transition: opacity .15s, visibility 0s .2s; 
    overflow-y: auto; 
    border-left: 3px solid var(--primary); 
    box-shadow: 10px 0 18px rgba(16, 36, 59, .06);
}

.cats__item:hover .cats__fly { 
    visibility: visible; 
    opacity: 1; 
    transition-delay: 0s; 
}

.cats__fly h3 { 
    font-family: var(--font-head); 
    font-size: 32px; 
    color: #142b44; 
    margin-bottom: 18px; 
}

.cats__fly-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 24px; 
}

.cats__fly h4 { 
    font-size: 14px; 
    color: var(--primary-2); 
    text-transform: uppercase; 
    margin-bottom: 10px; 
    padding-bottom: 6px; 
    border-bottom: 2px solid #f1f3f5; 
}

.cats__fly li a { 
    display: block; 
    padding: 5px 0; 
    font-size: 14px; 
    color: var(--text); 
}

.cats__fly li a:hover { color: var(--primary); }

.cats__fly .more { 
    font-weight: 600; 
    color: var(--primary-2); 
}

.hero { 
    display: flex; 
    flex-direction: column; 
    min-width: 0; 
    background: var(--dark); 
}

.hero__tabs { 
    display: flex; 
    background: #243746; 
    height: 72px; 
    overflow-x: auto; 
    scrollbar-width: none; 
    flex-shrink: 0; 
}

.hero__tabs::-webkit-scrollbar { display: none; }

.hero__tab { 
    padding: 0 24px; 
    font-weight: 700; 
    font-size: 16px; 
    color: #fff; 
    text-transform: uppercase; 
    letter-spacing: .3px; 
    white-space: nowrap; 
    border-right: 1px solid rgba(255,255,255,.12); 
    border-bottom: 4px solid transparent; 
    transition: .2s; 
}

.hero__tab:hover { background: #2c4255; }
.hero__tab.active { background: #1b2b38; border-bottom-color: var(--primary); }


/* Banner (construido en HTML/CSS/SVG) */
.hero__slides { 
    position: relative; 
    aspect-ratio: 1288 / 612; 
}

.banner { 
    position: absolute; 
    inset: 0; 
    overflow: hidden; 
    opacity: 0; 
    transition: opacity .6s; 
    pointer-events: none; 
    background: linear-gradient(180deg, #b9d3ea 0%, #7fa5c8 30%, #34587c 58%, #172f49 80%, #0e2135 100%); 
    container-type: inline-size; 
}

.banner.active { 
    opacity: 1; 
    pointer-events: auto; 
}

.banner__mount { 
    position: absolute; 
    left: 0; 
    top: 26%; 
    width: 100%; 
    height: 42%; 
}


.banner__road { 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    height: 34%; 
    background: linear-gradient(180deg, rgba(14,33,53,0) 0%, #0b1a2a 100%); 
}

.banner::before, .banner::after { 
    content: ""; 
    position: absolute; 
    width: 7%; 
    aspect-ratio: 1; 
    background: linear-gradient(135deg, #f6a21a, var(--primary-2)); z-index: 4; 
}

.banner::before { 
    top: 0; 
    left: 0; 
    clip-path: polygon(0 0, 100% 0, 0 100%); 
}

.banner::after { 
    bottom: 0; 
    right: 0; 
    clip-path: polygon(100% 0, 100% 100%, 0 100%); 
}

.banner__copy { 
    position: absolute; 
    left: 6%; 
    top: 7%; 
    width: 46%; 
    z-index: 3; 
}

.banner__brand { 
    display: inline-flex; 
    flex-direction: column; 
    align-items: center; 
    line-height: 1; 
    margin-bottom: 3.4cqw; 
}

.banner__brand b { 
    font-family: 'Russo One', var(--font); 
    font-weight: 400; 
    font-size: 4.6cqw; 
    color: #142b44; 
}

.banner__brand span { 
    font-size: 1.6cqw; 
    letter-spacing: 1.1cqw; color: var(--primary-2); 
    font-weight: 700; 
    margin-top: .6cqw; 
}

.ribbon { 
    display: block; 
    width: max-content; 
    font-family: var(--font); 
    font-style: italic; 
    font-weight: 900; 
    text-transform: uppercase; 
    color: #fff; 
    line-height: 1; 
    transform: rotate(-4deg) skewX(-8deg); 
    box-shadow: 0 1cqw 2cqw rgba(0,0,0,.25); 
}

.ribbon--a { 
    background: #142b44; 
    font-size: 3cqw; 
    padding: 1.1cqw 2.2cqw; 
    margin-left: 2cqw; 
}

.ribbon--b { 
    background: linear-gradient(90deg, #f6a21a, var(--primary-2)); 
    font-size: 7.4cqw; 
    padding: .6cqw 2.4cqw; 
    margin: -.4cqw 0 0 -1cqw; 
    text-shadow: 0 .3cqw 0 rgba(0,0,0,.18); 
}

.ribbon--c { 
    background: #142b44; 
    font-size: 4.2cqw; 
    padding: 1cqw 2.4cqw; 
    margin: -.2cqw 0 0 .4cqw; 
}


.banner__art { 
    position: absolute; 
    right: 3%; 
    bottom: 17%; 
    width: 58%; 
    z-index: 2; 
    filter: drop-shadow(0 2cqw 2.4cqw rgba(0,0,0,.45)); 
}

.banner__art--icon { 
    width: 30%; 
    right: 12%; 
    bottom: 22%; 
}

.banner__specs { 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index: 3; 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    padding: 0 8% 2.2cqw; 
    color: #fff; 
}

.spec { 
    display: flex; 
    align-items: center; 
    gap: 1.4cqw; 
    padding: 0 1.6cqw; 
    border-left: 1px solid rgba(255,255,255,.25); 
}

.spec:first-child { border-left: 0; }

.spec__ico { 
    width: 6cqw; 
    height: 6cqw; 
    flex-shrink: 0; 
    border-radius: 50%; 
    border: .3cqw solid #5fa8e0; 
    background: radial-gradient(circle, #1e4f80 0%, #0d2846 100%); 
    display: grid; place-items: center; 
    box-shadow: 0 0 1.4cqw rgba(95,168,224,.5); 
}

.spec__ico svg { 
    width: 55%; 
    height: 55%; 
    color: #fff; 
}

.spec__txt { 
    line-height: 1; 
    text-transform: uppercase; 
}

.spec__txt small { 
    display: block; 
    font-size: 1.2cqw; 
    font-weight: 500; 
    margin-bottom: .4cqw; 
}

.spec__txt b { 
    font-size: 2.8cqw; 
    font-weight: 800; 
}

.spec__txt b.sm { font-size: 1.7cqw; }

/* Benefits */
.benefits { 
    background:linear-gradient(95deg,var(--primary-2) 0%,#df8300 62%,#c17305 100%);
    padding:2rem 0
}

.benefits__grid { 
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.5rem
}

.benefit { 
    display:flex;
    gap:1rem;
    align-items:center;
    padding: 18px 14px; 
    font-size: 14px; 
    font-weight: 500;
    border-right: 1px solid rgba(255,255,255,.1); 
 }

 .benefit__icon{
  width:54px;
  height:54px;
  border-radius:50%;
  background:transparent;
  border:2px solid #fff;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  flex-shrink:0;
}

.benefit strong{
    display:block;
    font-size:1rem;
    color:#fff;
    font-weight:700
}

.benefit span{
    font-size:.92rem;
    color:rgba(255,255,255,.85)
}

.benefit:last-child { border-right: 0; }


/* Product cards */
.products { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap:1.5rem
}

.product { 
    background: #fff; 
    border: 1px solid #e3e8ed; 
    border-radius: 10px; 
    box-shadow: 0 2px 10px rgba(16, 36, 59, .04); 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
    transition: transform .2s, box-shadow .2s; 
    animation: fadeUp .35s ease both; 
    position:relative;
}

.product:hover { 
    transform: translateY(-4px); 
    box-shadow:var(--shadow);
    border-color:transparent
}

.product__media { 
    position: relative; 
    background: #fff; 
    overflow: hidden; 
    height:220px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:4rem;
    color:#7d92a7;    
}

.product__media-link{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:inherit;
}

.product__image-link:hover{
    color:var(--navy)
}

.product__media::after { 
    content: ""; 
    position: absolute; 
    bottom: 6%; 
    left: 20%; 
    right: 20%; 
    height: 16px; 
    background: radial-gradient(ellipse at center, rgba(0,0,0,.14) 0%, transparent 70%);     
}

.product__media-link img { 
    height:220px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#f7fafc,#dde7ef);
    font-size:4rem;
    color:#7d92a7;
    overflow:hidden;
    transition: transform .35s ease; 
}

.product:hover .product__media-link img { 
    transform: scale(1.06); 
}

.product__badge { display: none; }

.product__overlay { 
    position: absolute; 
    inset: 0; 
    z-index: 2; 
    background: rgba(16, 36, 59, 0.3); 
    text-decoration: none;
    display: flex;
    align-items: flex-end;    /* Mueve el botón hacia abajo */
    justify-content: center;  /* Mantiene el botón centrado horizontalmente */
    padding-bottom: 20px;     /* Separa el botón del borde inferior de la imagen */
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s; 
}

.product:hover .product__overlay { 
   opacity: 1;
   visibility: visible;
}

.product__btn {
    background-color: #1d2a38; /* Color oscuro a juego con tu paleta */
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    
    /* Efecto de escala inicial para que aparezca desde el centro */
    transform: scale(0.8);
    transition: background-color .2s ease, transform .2s ease;
}

/* Cuando aparece la capa, el botón toma su tamaño normal */
.product:hover .product__btn {
    transform: scale(1);
}

/* 3. EFECTO HOVER PROPIO DEL BOTÓN */
/* Cuando el usuario pone el cursor exactamente encima del botón */
.product__btn:hover {
    background-color: #f28c00; /* Cambia al color naranja de tus botones de Whatsapp */
    transform: scale(1.05); /* Se agranda un poquito más al interactuar */
    box-shadow: 0 6px 16px rgba(217, 116, 0, 0.3);
}

.product__body { 
    padding: 18px 20px 20px; 
    display: flex; 
    flex-direction: column; 
    flex: 1; 
}

.product__sku { 
    font-size:.78rem;
    color:var(--gray);
    text-transform:uppercase;
    letter-spacing:.5px
}

.product__cat { 
    margin: 8px 0 6px; 
    font-size:.76rem;
    color:#5f7486;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.3px
}

.product__title { 
    flex: 1; 
    font-size:1rem;
    font-weight:600;
    margin:.25rem 0 .55rem;
    color:var(--dark);
    min-height:2.6em;
    line-height:1.35
}

.product__title a:hover { color: var(--primary-2); }

.btn--quote { 
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:42px;
    padding:.62rem .8rem;
    border-radius:8px;
    background:linear-gradient(90deg,#f28000,#d66d00);
    color:#fff;
    font-size:1.02rem;
    font-weight:800;
    letter-spacing:.2px;
    text-align:center;
}

.btn--quote:hover { 
    background: linear-gradient(90deg, #e07f00, #c46800); 
}

.empty { 
    grid-column: 1 / -1; 
    text-align: center; 
    padding: 40px; 
    color: var(--muted); 
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } }


/* Promo slider (ancho completo) */
.promo { 
    position: relative; 
    height: clamp(264px, 24vw, 462px); 
    overflow: hidden; 
    background: #111; 
}

.promo-slide { 
    position: absolute; 
    inset: 0; 
    display: flex; 
    align-items: center; 
    opacity: 0; 
    transition: opacity .7s; 
    pointer-events: none; 
}

.promo-slide.active { 
    opacity: 1; 
    pointer-events: auto; 
}

.promo-slide__bg { 
    position: absolute; 
    inset: 0; 

     background: 
        radial-gradient(ellipse 70% 45% at 55% 95%, rgba(224, 138, 18, 0.75) 0%, rgba(163, 95, 12, 0.75) 40%, rgba(0, 0, 0, 0) 75%), 
        linear-gradient(180deg, rgba(15, 58, 82, 0.75) 0%, rgba(43, 50, 55, 0.75) 40%, rgba(59, 44, 24, 0.75) 100%),
        url('../images/banner1.png');
    background-position: top; 
    background-size: cover; 
    background-repeat: no-repeat;
}

.promo-slide__bg::after { 
    content: ""; 
    position: absolute; 
    inset: 0; 
    background: rgba(0, 0, 0, 0.5);
    background: linear-gradient(
        135deg, 
        rgba(15, 58, 82, 0.5) 0%,    /* Azul oscuro */
        rgba(43, 50, 55, 0.5) 40%,   /* Gris oscuro */
        rgba(163, 95, 12, 0.5) 100%  /* Naranja/Dorado */
    );
}

.promo-slide__content { 
    position: relative; 
    z-index: 2; 
}

.promo-slide__content > div { 
    max-width: 860px; 
    margin-left: 20%; 
}

.promo-slide__eyebrow { 
    display: inline-block; 
    background: var(--primary); 
    color: #fff; 
    font-weight: 800; 
    font-size: 14px; 
    letter-spacing: 6px; 
    text-transform: uppercase; 
    padding: 4px 8px; 
    border-radius: 3px;
}

.promo-slide h2 { 
    font-family: var(--font-head); 
    font-weight: 800; 
    text-transform: uppercase; 
    font-size: clamp(28px, 3.5vw, 54px); 
    line-height: 1.1; 
    color: #fff; 
    margin: 16px 0 8px; 
}

.promo-slide p { 
    font-size: 16px; 
    color: #e4e6e8; 
    margin-bottom: 20px; 
    max-width: 740px; 
}

.promo-slide .btn--primary { 
    padding: 12px 28px; 
    font-size: 16px; 
    border-radius: 6px; 
}

/* INDICADORES DE CONFIANZA (trust) */
.trust { 
    background-image: linear-gradient(120deg, rgba(8, 16, 24, .88), rgba(22, 52, 74, .78)),  url('../images/fondo-hero-trust.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat, no-repeat;
    color: #fff; 
    padding:2.5rem 0;
}

.trust__grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
    text-align:  center; 
}

.trust__num{
    font-size:2.8rem;
    font-weight:900;
    line-height:1;
    color:#fff
}

.trust__suffix{
    font-size:2rem;
    font-weight:900;
    color:var(--primary)
}

.trust__item p { 
    color: #c9d4de; 
    font-weight:900;
    font-size:.88rem;
    opacity:.85;
    margin-top:.3rem
}


/* How to */
.howto__grid { 
    display:grid;
    grid-template-columns: repeat(3, 1fr); 
    gap:1rem;
    counter-reset: s; 
    margin:2rem 0 2.5rem;
}

.howto__step { 
    background: var(--surface); 
    border:1px solid #e5edf2;
    /*border-top: 2px solid var(--primary); */
    border-radius: var(--radius); 
    padding:2rem 1.5rem;
    text-align:center;
    position:relative;
    box-shadow: var(--shadow-sm); 
}

.howto__icon{
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
  margin:0 auto .8rem;
}

.howto__num { 
    position:absolute;
    top:.75rem;
    right:1rem;
    font-size:2.5rem;
    font-weight:900;color:#f0f4f7;
    line-height:1;
    pointer-events:none;
    user-select:none;
}

.howto__step h3 { 
    font-size:1rem;
    font-weight:700;
    margin-bottom:.4rem
}

.howto__step p { 
    font-size:.86rem;
    color:#6b7c88;
    line-height:1.55
}

/* reviews */

.reviews {
  padding: 80px 0;
  background-color: #F6F6F6;
}

.reviews__carousel {
  position: relative;
  max-width: 800px; /* Ancho ideal para leer un testimonio centrado */
  margin: 40px auto 0;
  display: flex;
  align-items: center;
}

.reviews__viewport {
  overflow: hidden;
  width: 100%;
}

.reviews__wrap {
  display: flex;
  transition: transform 0.4s ease-in-out;
  width: 100%;
}

.review-card {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 40px; /* Espacio para que el texto no toque las flechas */
  box-sizing: border-box;
}

.review-card__pic {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.review-card__pic img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #E9E9E9;
}

.review-card__message {
  padding: 20px 10px;
  font-style: italic;
  line-height: 30px;
  font-weight: 300;
  font-size: 18px;
  margin: 0;
}


.review-card__info {
  margin-top: 10px;
  font-size: 16px;
}

.review-card__company {
  font-style: italic;
  color: var(--primary);
}

.reviews__btn {
  background: none;
  border: none;
  font-size: 26px;
  color: #888;
  cursor: pointer;
  padding: 10px;
  transition: color 0.3s ease;
  z-index: 2;
}

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

.reviews__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 25px;
}

.reviews__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #CCC;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.reviews__dot.active {
  background-color: #F33030;
  transform: scale(1.2);
}











/*
.review-card__box {
  margin: 0 15px;
  flex-grow: 1; /
}

.review-card__message {
  padding: 20px 10px;
  font-style: italic;
  line-height: 30px;
  font-weight: 300;
  font-size: 18px;
  margin: 0;
}

.review-card__info {
  margin-top: 10px;
  font-size: 16px;
}

.review-card__company {
  font-style: italic;
  color: #F33030;
}








/* Location */
.location__grid { 
    display: grid; 
    grid-template-columns: 1fr 1.5fr; 
    gap: 24px; 
}

.location__info { 
    background: var(--surface); 
    border-radius: var(--radius); 
    padding: 28px; 
    box-shadow: var(--shadow-sm); 
}

.location__info h3 { 
    color: var(--navy); 
    font-size: 20px; 
    margin-bottom: 10px; 
}

.location__info ul { 
    margin: 16px 0 22px; 
    display: grid; 
    gap: 10px; 
}

.location__info a:hover { color: var(--primary); }

.location__map { 
    width: 100%; 
    min-height: 340px; 
    border: 0; 
    border-radius: var(--radius); 
    box-shadow: var(--shadow-sm);
}

/* Footer */
.footer { 
    background: var(--navy-2); 
    color: #b8c4cf; 
    padding-top: 52px; 
    font-size: 14px; 
}

.footer__grid { 
    display: grid; 
    grid-template-columns: 1.5fr 1fr 1fr 1fr; 
    gap: 32px; 
    padding-bottom: 40px; 
}

.footer .logo { margin-bottom: 14px; }

.footer h4 { 
    color: #fff; 
    font-size: 16px; 
    margin-bottom: 14px; 
    text-transform: uppercase; 
    letter-spacing: .5px; 
}

.footer ul { 
    display: grid; 
    gap: 8px; 
}

.footer a:hover { color: var(--primary); }

.socials { 
    display: flex; 
    gap: 10px; 
}

.socials a { 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    background: rgba(255,255,255,.08); 
    display: grid; 
    place-items: center; 
    font-weight: 700; 
    font-size: 13px; 
    color: #fff; 
}

.socials a:hover { 
    background: var(--primary); 
    color: #fff; 
}


.footer__bottom { 
    border-top: 1px solid rgba(255,255,255,.08); 
    padding: 16px 0; 
    font-size: 13px; 
    text-align: center; 
}

/* WhatsApp float + toast */
.wa-float { 
    position: fixed; 
    right: 20px; 
    bottom: 20px; 
    width: 58px; 
    height: 58px; 
    border-radius: 50%; 
    background: var(--wa); 
    color: #fff; 
    display: grid; 
    place-items: center; 
    box-shadow: 0 8px 24px rgba(37,211,102,.45); 
    z-index: 60; 
    animation: pulse 2.4s infinite; 
}

.wa-float:hover { background: var(--wa-2); }

@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 50% { box-shadow: 0 0 0 14px rgba(37,211,102,0); } }

.toast { 
    position: fixed; 
    left: 50%; 
    bottom: 24px; 
    transform: translate(-50%, 120px); 
    background: var(--dark); 
    color: #fff; 
    padding: 12px 20px; 
    border-radius: var(--radius-sm); 
    box-shadow: var(--shadow); 
    transition: .3s; 
    z-index: 70; 
    font-size: 14px; 
}

.toast.show { transform: translate(-50%, 0); }