/* =========================================================
   COMPONENTS.CSS — componentes reutilizables del sitio
   Botones, tarjetas, CTA corporativo y WhatsApp flotante.
   No incluir aquí estilos exclusivos de una página.
   ========================================================= */

/* Componentes reutilizables */

.container{width:min(var(--max),calc(100% - 40px));margin:auto}

.eyebrow{display:inline-flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.14em;font-weight:800;font-size:.8rem;color:var(--red)}

.eyebrow::before{content:"";width:38px;height:3px;background:currentColor}

.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 22px;border-radius:9px;font-weight:800;border:2px solid transparent;transition:.25s}

.btn-primary{background:var(--red);color:#fff}

.btn-primary:hover{background:var(--red-dark);transform:translateY(-2px)}

.btn-outline{border-color:#fff;color:#fff}

.btn-outline:hover{background:#fff;color:#111}

.section{padding:60px 0}

.section-soft{background:var(--soft)}

.section-heading{max-width:720px;margin-bottom:42px}

.section-heading.center{text-align:center;margin-left:auto;margin-right:auto}

.section-heading h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.12;margin:12px 0}

.section-heading p{color:var(--muted)}

.section-dark .section-heading p{color:#bbc0c8}

.product-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 8px 28px rgba(20,24,30,.05);transition:.28s}

.product-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}

.product-media{height:245px;display:grid;place-items:center;padding:20px;background:linear-gradient(145deg,#fff,#f2f3f5)}

.product-media img{max-height:210px;object-fit:contain}

.product-body{padding:24px}

.product-body h3{margin:0 0 8px;font-size:1.2rem}

.product-body p{margin:0 0 18px;color:var(--muted);font-size:.95rem}

.text-link{color:var(--red);font-weight:800}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}

.image-stack{position:relative}

.image-stack img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;max-height:520px;object-fit:cover}

.accent-box{position:absolute;right:-20px;bottom:-25px;background:var(--red);color:#fff;padding:24px 28px;border-radius:14px;box-shadow:var(--shadow)}

.accent-box strong{display:block;font-size:2.2rem;line-height:1}

.check-list{list-style:none;padding:0;margin:24px 0}

.check-list li{position:relative;padding:9px 0 9px 30px}

.check-list li::before{content:"✓";position:absolute;left:0;color:var(--red);font-weight:900}

/* CTA corporativo del Home — versión definitiva */
.quote-strip{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  height:245px;
  min-height:245px;
  color:#fff;
  background-color:#72090d;
  background-image:url("../img/cta-fondo-limpio.png");
  background-repeat:no-repeat;
  background-size:cover;
  /* Corre el fondo ligeramente hacia la derecha para liberar el texto */
  background-position:58% center;
}

.quote-strip::before,
.quote-strip::after,
.quote-strip-media{display:none!important}

.quote-strip-content{
  width:min(100% - 48px,1180px)!important;
  max-width:1180px!important;
  height:245px;
  min-height:0!important;
  margin:0 auto!important;
  padding:20px 0!important;
  box-sizing:border-box;
  display:grid!important;
  grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr)!important;
  align-items:center!important;
  gap:58px!important;
}

.quote-strip-copy{
  position:static!important;
  width:auto!important;
  height:auto!important;
  max-width:600px!important;
  overflow:visible!important;
  clip:auto!important;
  clip-path:none!important;
  white-space:normal!important;
}

.quote-kicker{
  display:inline-flex!important;
  align-items:center;
  gap:10px;
  margin:0 0 12px;
  color:#fff;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.085em;
  line-height:1;
  text-transform:uppercase;
  text-shadow:0 2px 8px rgba(45,0,0,.25);
}

.quote-kicker::before{
  content:"";
  width:24px;
  height:2px;
  background:#fff;
  border-radius:999px;
}

.quote-strip h2{
  margin:0;
  max-width:600px;
  color:#fff;
  font-size:clamp(2rem,2.55vw,2.62rem);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.03em;
  text-shadow:0 4px 16px rgba(46,0,3,.32);
}

.quote-strip-copy>p{
  margin:13px 0 0;
  color:rgba(255,255,255,.94);
  font-size:.94rem;
  line-height:1.48;
  text-shadow:0 2px 9px rgba(45,0,0,.28);
}

.quote-strip-action{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:0;
}

.quote-button{
  position:static!important;
  width:min(100%,420px)!important;
  height:auto!important;
  min-width:0!important;
  min-height:72px!important;
  padding:13px 18px!important;
  display:grid!important;
  grid-template-columns:44px 1fr 28px;
  align-items:center;
  gap:11px;
  border-radius:9px!important;
  opacity:1!important;
  background:#fff!important;
  color:#bd1016!important;
  box-shadow:0 15px 35px rgba(53,0,3,.3),0 1px 0 rgba(255,255,255,.8) inset!important;
  font-size:1.08rem;
  font-weight:900;
  line-height:1.15;
  text-align:center;
  transition:transform .25s ease,box-shadow .25s ease!important;
}

.quote-button:hover{
  opacity:1!important;
  transform:translateY(-2px)!important;
  background:#fff!important;
  box-shadow:0 19px 42px rgba(53,0,3,.38),0 1px 0 rgba(255,255,255,.8) inset!important;
}

.quote-icon{width:42px;height:42px;display:block}
.quote-icon svg{
  width:100%!important;
  height:100%!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.1!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.quote-arrow{
  width:27px!important;
  height:20px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  transition:transform .25s ease;
}

.quote-button:hover .quote-arrow{transform:translateX(4px)}
.quote-note{
  margin:9px 0 0!important;
  color:rgba(255,255,255,.93)!important;
  font-size:.84rem!important;
  line-height:1.35!important;
  text-align:center;
  text-shadow:0 2px 8px rgba(45,0,0,.3);
}

/* Botón flotante de WhatsApp */
.whatsapp{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:9999;

  width:58px;
  height:58px;
  padding:0;
  margin:0;

  display:grid;
  place-items:center;

  border:0;
  border-radius:50%;
  background:#25d366;
  color:#fff;
  text-decoration:none;
  line-height:0;

  box-shadow:0 10px 26px rgba(0,0,0,.25);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.whatsapp:hover{
  color:#fff;
  background:#1fbd5a;
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 16px 36px rgba(0,0,0,.28);
}

.whatsapp > svg{
  width:36px !important;
  height:36px !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;

  fill:currentColor !important;
  stroke:none !important;
  transform:none !important;
}

.whatsapp > svg path{
  fill:currentColor !important;
  stroke:none !important;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* === Pulido final v7.0: loader y volver arriba === */
.first-visit-loader{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;background:#fff;opacity:1;visibility:visible;transition:opacity .42s ease,visibility .42s ease}
.first-visit-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.skip-first-loader .first-visit-loader{display:none!important}
.first-visit-loader__content{display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px;text-align:center}
.first-visit-loader__content img{width:min(290px,68vw);height:auto;display:block}
.first-visit-loader__line{width:86px;height:3px;border-radius:99px;background:linear-gradient(90deg,#8c1015,#ed1c24,#8c1015);background-size:200% 100%;animation:loaderLine 1.05s linear infinite}
.first-visit-loader__content p{margin:0;color:#50545b;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase}
@keyframes loaderLine{to{background-position:-200% 0}}
.back-to-top{position:fixed;right:25px;bottom:94px;z-index:9998;width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(215,25,32,.45);border-radius:50%;background:#fff;color:#d71920;box-shadow:0 10px 28px rgba(0,0,0,.16);opacity:0;visibility:hidden;transform:translateY(12px);cursor:pointer;transition:opacity .22s ease,visibility .22s ease,transform .22s ease,background .22s ease,color .22s ease,border-color .22s ease}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:#d71920;color:#fff;border-color:#d71920;transform:translateY(-3px)}
.back-to-top svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:768px){.back-to-top{right:16px;bottom:148px;width:44px;height:44px}.first-visit-loader__content p{font-size:.72rem}}
@media(prefers-reduced-motion:reduce){.first-visit-loader,.back-to-top{transition:none}.first-visit-loader__line{animation:none}}