/* =========================
   Paleta y tokens
   ========================= */
:root{
  --brand:#0ea5e9; --brand-2:#f5b301;
  --ink:#0f172a; --muted:#64748b;
  --surface:#f9f9f9; --border:rgba(2,8,23,.08);
  --shadow:0 10px 30px rgba(2,8,23,.12);
  --radius-lg:1rem; --radius-md:.8rem;
  --focus:#1a73e8; --focus-ring:0 0 0 4px rgba(26,115,232,.2);
  --play-bg:rgba(62, 6, 6, 0.92);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html{ scroll-behavior:smooth; }
body{ color:var(--ink); background:#f9f9f9; }
h1,h2,h3,h4,h5{ letter-spacing:.2px; }
.section-title{ font-weight:800; letter-spacing:.3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* Navbar */
.navbar .nav-link{ font-weight:500; }
.navbar .nav-link:hover{ color:var(--brand); }
.navbar .btn-brand{ margin-left:.5rem; }
.navbar-brand img{ height:40px; width:auto; }
.nav-logo{ height:40px; width:auto; }

/* Botones */
.btn-brand{
  background:var(--brand); color:#fff; border:none;
  border-radius:var(--radius-lg);
  box-shadow:0 6px 20px rgba(14,165,233,.25);
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
@media (hover:hover){
  .btn-brand:hover{ filter:brightness(0.92); color:#fff; transform:translateY(-1px); box-shadow:0 10px 26px rgba(14,165,233,.28); }
}
.btn-brand:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; box-shadow:var(--focus-ring); }

.btn-outline-primary{
  border-radius:var(--radius-lg); border-color:var(--brand); color:var(--brand);
}
@media (hover:hover){
  .btn-outline-primary:hover{ background:rgba(14,165,233,.08); color:var(--brand); border-color:var(--brand); }
}
.btn-outline-primary:focus-visible,
.btn-outline-secondary:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; box-shadow:var(--focus-ring); }
.btn-outline-secondary{ border-radius:var(--radius-lg); }

/* Enlaces foco accesible */
a:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:.3rem; }

/* Utilidades */
.text-muted{ color:var(--muted)!important; }
.badge-soft{
  background:rgba(14,165,233,.12);
  color:var(--brand); border:1px solid rgba(14,165,233,.25);
  border-radius:999px; padding:.35rem .6rem; font-weight:600;
}

/* Hero */
.hero{ background:linear-gradient(180deg, rgba(14,165,233,.08), transparent 60%); }
.hero-img{ border-radius:var(--radius-lg); box-shadow:var(--shadow); }

/* Cards / Features */
.feature i{ font-size:1.6rem; color:var(--brand); }
.benefit-card,.p-4.border.rounded-4{
  border:1px solid var(--border); border-radius:var(--radius-lg);
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  background:var(--surface);
}
@media (hover:hover){
  .benefit-card:hover,.p-4.border.rounded-4:hover{
    box-shadow:0 12px 30px rgba(2,8,23,.10);
    transform:translateY(-2px);
    border-color:rgba(14,165,233,.25);
  }
}

/* Steps */
.step{ border-left:3px solid var(--brand); padding-left:1rem; margin-left:.3rem; }

/* Galería / Catálogo */
.gallery img{
  aspect-ratio:1 / 1; object-fit:cover; border-radius:var(--radius-md);
  width:100%; height:100%; box-shadow:0 8px 24px rgba(2,8,23,.08);
}

/* Cards catálogo */
.catalog-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
@media (hover:hover){
  .catalog-card:hover{ box-shadow:0 12px 30px rgba(2,8,23,.10); transform:translateY(-2px); border-color:rgba(14,165,233,.25); }
}
.catalog-card .card-img-top{
  height:240px; object-fit:cover;
  border-top-left-radius:var(--radius-lg); border-top-right-radius:var(--radius-lg);
}
.catalog-card .card-title{ font-size:1rem; margin-bottom:.25rem; letter-spacing:.2px; }
.catalog-card .card-text{ color:var(--muted); font-size:.925rem; margin-bottom:0; }
.catalog-card .card-footer{
  background:transparent; border-top:1px solid var(--border);
  border-bottom-left-radius:var(--radius-lg)!important; border-bottom-right-radius:var(--radius-lg)!important;
}

/* Modal imágenes */
.modal-content{
  border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow);
}
.modal-header,.modal-footer{ border-color:var(--border); }
.modal-title{ letter-spacing:.2px; }

/* Zoom */
.zoom-container{
  position:relative; width:100%; height:calc(100vh - 240px); overflow:auto; background:#ffffff; border-radius:var(--radius-md);
}
.zoomable{ display:block; max-width:100%; max-height:100%; margin:0 auto; transition:transform .2s ease; cursor:zoom-in; user-select:none; -webkit-user-drag:none; }
.zoomable.zoomed{ transform:scale(1.6); cursor:zoom-out; max-width:none; max-height:none; }
.carousel-item{ padding-bottom:1rem; }

/* Formularios */
.form-control{ border-radius:.75rem; border-color:var(--border); }
.form-control::placeholder{ color:rgba(100,116,139,.85); }
.form-control:focus{ border-color:var(--brand); box-shadow:var(--focus-ring); }
.was-validated .form-control:invalid,.form-control.is-invalid{ border-color:#ef4444; box-shadow:0 0 0 4px rgba(239,68,68,.15); }
.was-validated .form-control:valid,.form-control.is-valid{ border-color:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.12); }
#mailtoStatus{ min-height:1.25rem; }

/* FAQ */
.accordion-button:not(.collapsed){ background:#f8fafc; color:var(--ink); }
.accordion-button:focus{ box-shadow:none; }
.accordion-button:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; z-index:2; }

/* Footer */
footer{ border-top:1px solid var(--border); background:#fff; }

/* Responsivo */
@media (max-width:991px){
  .navbar .btn-brand{ margin-top:.5rem; width:100%; }
}

/* Video */
.video-block{ max-width:1000px; margin-inline:auto; }
.lite-video{ position:relative; width:100%; max-width:960px; margin:0 auto; cursor:pointer; background:#000; padding-top:56.25%; border-radius:12px; overflow:hidden; }
.lite-video .lite-thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(0.9); }
.lite-video .lite-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:64px; line-height:1; background:var(--play-bg); padding:12px 24px; border-radius:999px; box-shadow:0 6px 20px rgba(0,0,0,.25); }
.lite-video:focus-visible .lite-play{ outline:3px solid var(--focus); }
@media (max-width:576px){ .lite-video .lite-play{ font-size:48px; padding:10px 18px; } }

/* Sticky CTA (móvil) */
@media (max-width:992px){
  .sticky-cta{
    position:fixed; bottom:0; left:0; right:0; z-index:1030;
    backdrop-filter:saturate(140%) blur(6px);
    background:rgba(255,255,255,.9);
    border-top:1px solid var(--border);
    padding:calc(.6rem + var(--safe-bottom)) .5rem .6rem .5rem;
  }
  body{ padding-bottom:calc(68px + var(--safe-bottom)); }
}

/* Detalles extra */
.img-fluid.rounded-3{ border-radius:var(--radius-md)!important; }
.shadow-soft{ box-shadow:var(--shadow); }

/* ===== Badges adicionales ===== */
.badge-brand{
  background:var(--brand); color:#fff;
  border-radius:999px; padding:.35rem .6rem; font-weight:600; font-size:.8rem;
  box-shadow:0 4px 10px rgba(14,165,233,.25);
  animation:badge-in .25s ease-out both;
}

.card-badge{
  position:absolute; top:.75rem; left:.75rem;
  background:var(--brand-2); color:#fff; font-weight:700; font-size:.75rem;
  padding:.3rem .6rem; border-radius:var(--radius-md);
  box-shadow:0 3px 10px rgba(0,0,0,.2); letter-spacing:.2px;
  animation:badge-in .25s ease-out both;
}
.card-badge.top-right{ left:auto; right:.75rem; }

@keyframes badge-in{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:none; }
}

#sourceGallery{ display:none; }

/* =======================================
   Anatomía del producto — video + imagen
   ======================================= */
#product-anatomy .video-block,
#product-anatomy .anatomy-figure {
  max-width: 960px;          /* mismo ancho máximo para ambos */
  margin: 0 auto 2rem auto;  /* centrados con margen inferior */
  display: block;
}

#product-anatomy .anatomy-img {
  width: 100%;               /* se adapta al mismo ancho que el video */
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* ===== Badges de advertencia (Agotado) ===== */
.badge-warning {
  background: #ef4444; /* rojo principal */
  color: #fff;
  border-radius: 999px;
  padding: .35rem .6rem;
  font-weight: 600;
  font-size: .8rem;
  box-shadow: 0 4px 10px rgba(239, 68, 68, .25);
  animation: badge-in .25s ease-out both;
}