@font-face{
  font-family: 'Buffalo';
  src:
   url("/static/fonts/buffalo/Buffalo_Regular.dac2b62e0eb7.woff") format('woff');
  font-weight: 400;              
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'Gotham-Bold';
  src:
   url("/static/fonts/gotham/Gotham-Bold.c43129eb9489.woff") format('woff');
  font-weight: 400;              
  font-style: normal;
  font-display: swap;
}

:root{
  --blendtec-blue: #004277;
  --rule-base: #c4c4c4;
  --accent-orange: #e4945a;
}

.blendtec-title{
  font-family: "Gotham", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--blendtec-blue);
  letter-spacing: .5px;
  line-height: 1.05;
  font-size: clamp(2.4rem, 3.4vw + 1.2rem, 1rem);
  font-weight: bold;
}

.blendtec-sub-title{
  font-family: "Gotham", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--blendtec-blue);
  font-weight: bold;
}

.blendtec-rule{
  position: relative;
  height: 3px;
  width: min(760px, 78%);
  border-radius: 999px;
  background: var(--rule-base);
  margin-bottom: 1.75rem;
}

.blend-card{
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}

.blend-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(0,0,0,.12);
}

.blend-card__head{
  background: var(--blendtec-blue);
  color: #fff;
  text-align: center;
  padding-top: .85rem;
  border-bottom: none;
}
.hand-title.blend-head-title{
  font-family: 'Buffalo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400 !important;          
  text-shadow: none !important;         
  -webkit-text-stroke: 0 !important;    
  -webkit-font-smoothing: antialiased;  
  -moz-osx-font-smoothing: grayscale;   
  font-size:clamp(2rem, 1.3vw + 1.2rem, 2.8rem);
  color:#fff; 
}

.blend-card__media-wrapper{ 
    position: relative; 
    overflow: hidden; 
}

.blend-card__media.ratio{
  line-height: 0;                
}

.blend-card__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.blend-card:hover .blend-card__media img{
  transform: scale(1.03);
}

.blend-card__overlay{
  position:absolute; 
  inset: 0;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  background:rgba(11,74,107,.86);
  text-shadow:0 1px 2px rgba(0,0,0,.25);
  opacity: 0; 
  visibility: hidden; 
  pointer-events: none;
  transition: opacity .28s ease, visibility .28s ease;
  padding: 1rem;
  font-style: oblique;
  z-index: 3; 
}

.blend-card:hover .blend-card__overlay,
.blend-card:focus-within .blend-card__overlay{
  opacity:1; visibility:visible; pointer-events:auto;
}

.blend-card__body{
  padding-top: 1rem !important;
}

.object-fit-cover{ object-fit: cover; }

.page-header{ scroll-margin-top: 80px; }

.blend-pill{
  border-width:3px !important;
  border-radius:14px !important;
  font-weight:700;
  letter-spacing:.2px;
  padding:.55rem 1rem;
  margin-bottom: 20px !important;
}

/* ==== Reveal on enter (con direcciones) ==== */
.reveal {
  opacity: 0;
  transform: translateY(18px) scale(.98); /* valor por defecto */
  filter: blur(2px);
  transition:
    opacity .6s ease,
    transform .6s ease,
    filter .6s ease;
  transition-delay: calc(var(--i, 0) * 80ms); /* stagger */
}

/* Direcciones */
.reveal.slide-left  { transform: translateX(-22px) scale(.98); }
.reveal.slide-right { transform: translateX(22px)  scale(.98); }
.reveal.fade-up     { transform: translateY(18px)  scale(.98); }

/* Cuando entra al viewport */
.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Respeto por usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}


/* --- Modal estilo mockup --- */
.prod-modal .modal-dialog{ max-width: 1200px; }
.prod-modal .modal-content{
  border: 0;
  border-radius: 24px;
  padding: .5rem 1rem 1rem;
}

.prod-modal .modal-body .row{ align-items: start; }

/* Título azul */
.product-title{
  font-family: "Gotham", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--blendtec-blue);
  font-weight: 700;
  line-height: 1.05;
  font-size: clamp(1.75rem, 1.4vw + 1.2rem, 2.25rem);
  margin-top: .25rem;
  padding-bottom: 2rem;
}

/* Foto circular grande */
.product-image-wrap{
  width: min(380px, 38vw);
  aspect-ratio: 1/1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.product-image{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* Beneficios – itálica, grande, azul */
.product-bullets{
  color: #0B4A6B;
  font-style: italic;
  font-size: clamp(1.05rem, 0.6vw + 1rem, 1.6rem);
  line-height: 1.45;
}
.product-bullets ul{ margin: 0; padding-left: 1.1rem; }    /* por si vienen <ul> */
.product-bullets li{ margin-bottom: .35rem; }

/* Compactar los beneficios */
.product-bullets{
  line-height: 1.25;                 /* menos altura de línea */
}

/* Si el contenido viene como <p>... */
.product-bullets p{
  margin: 0;                         /* quita el espacio vertical */
}
.product-bullets p + p{
  margin-top: .25rem;                /* deja un espaciado mínimo (ajusta) */
}

/* Si viene como <ul><li>... */
.product-bullets ul{
  margin: 0;                         /* quita margen de la lista */
  padding-left: 1rem;                /* sangría opcional */
}
.product-bullets li{
  margin: 0;
}
.product-bullets li + li{
  margin-top: .25rem;                /* separación mínima entre items */
}

/* Equipos */
.equip-title{
  margin: .5rem 0 .25rem;
  color: #EE7826;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(1.05rem, .45vw + 1rem, 1.5rem);
}
.equip-logos .equip-logo{
  height: 150px;
  width: auto;
  background: #fff;
  border-radius: 10px;
  padding: .35rem .6rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

/* --- Equipos con overlay de acción --- */
.equip-card{
  position: relative;
  display: inline-block;
  background: #fff;
  border-radius: 12px;
  padding: .35rem .6rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  overflow: hidden;
}
.equip-logo{
  display: block;
  height: 78px;              /* ajusta a tu gusto */
  width: auto;
  transition: filter .25s ease, transform .25s ease;
}

/* Botón que aparece al hover/focus */
.equip-hover-btn{
  position: absolute;
  left: 8px; right: 8px;
  top: 50%;
  transform: translateY(-50%) scale(.98);
  height: 44px;
  border-radius: 8px;
  background: var(--accent-orange);
  color: #fff;
  font-weight: 700;
  text-align: center;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(238,120,38,.35);
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
  pointer-events: none;       /* el click pasa al <a> */
}

.equip-card:hover .equip-hover-btn,
.equip-card:focus-visible .equip-hover-btn{
  opacity: 1; visibility: visible; transform: translateY(-50%) scale(1);
}
.equip-card:hover .equip-logo,
.equip-card:focus-visible .equip-logo{
  filter: blur(1px) brightness(.85);
}

/* Accesibilidad */
.equip-card:focus-visible{ outline: 3px solid rgba(238,120,38,.5); outline-offset: 2px; }

/* --- CTA del modal en naranja --- */
.btn-cta{
  background: var(--accent-orange);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  padding: .85rem 1.25rem;
  border: none;
  box-shadow: 0 10px 24px rgba(238,120,38,.28);
}
.btn-cta:hover{ filter: brightness(.96); }
.btn-cta:active{ filter: brightness(.92); }
.btn-cta:focus-visible{ outline: 3px solid rgba(238,120,38,.45); outline-offset: 2px; }


/* Botón CTA (pill) */
.btn-cta{
  background: var(--blendtec-blue);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  padding: .85rem 1.25rem;
  border: none;
}
.btn-cta:hover{ 
  background: var(--accent-orange); 
  color: #fff;
}

.btn-icon{
  width: 56px; height: 56px;
  align-items: center; justify-content: center;
  display: inline-flex;
  border: 2px solid #e7e7e7;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}

/* Z-index por si otras capas tienen transform */
.modal{ z-index: 2000; }
.modal-backdrop{ z-index: 1990; }

/* Animación de entrada del CTA al abrir el modal */
@keyframes cta-pop {
  0%   { transform: scale(.82); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  80%  { transform: scale(.98); }
  100% { transform: scale(1); }
}

/* Pulso sutil posterior (una vez) */
@keyframes cta-pulse {
  0%,100% { transform: scale(1); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
  50%     { transform: scale(1.03); box-shadow: 0 16px 36px rgba(0,0,0,.26); }
}

/* Activa animaciones cuando el modal está visible */
.prod-modal.show .btn-cta{
  will-change: transform, box-shadow, opacity;
  transform-origin: center;
  animation:
    cta-pop   520ms cubic-bezier(.2,.7,.2,1) 120ms both,
    cta-pulse 2200ms ease-out 900ms 1;   /* 1 pulso, ajusta a 0 ó 2 si prefieres */
}

/* Títulos y etiquetas del formulario */
.form-title{ font-size: clamp(2rem, 1.6vw + 1.2rem, 1.5rem); }
.form-label-lg{
  font-weight: 800;
  color: var(--blendtec-blue);
  font-size: clamp(1.1rem, .6vw + 1rem, 1rem);
}
.subnote{ color:#5f6b76; font-weight:600; }

/* Área de texto grande */
textarea.form-control{ min-height: 9rem; }

/* Pastilla de ejemplo "ej: 100" */
.hint-pill{
  background:#f5f8fc; color:#6d88a0;
  border:1px solid #d9e3ee;
  border-radius:999px; padding:.25rem .6rem; font-weight:700;
}

/* Radios más visibles en azul */
.radio-wrap .form-check-input{
  width:1.15rem; height:1.15rem;
  border-color: var(--blendtec-blue);
}
.radio-wrap .form-check-input:checked{
  background-color: var(--blendtec-blue);
  border-color: var(--blendtec-blue);
}

/* CTA azul (sin tocar la versión naranja si la usas en otras partes) */
.btn-cta--primary{
  background: var(--blendtec-blue) !important;
  color:#fff; border:none;
  border-radius: 8px; font-weight:700;
  padding:.9rem 1.3rem;
  box-shadow: 0 12px 28px rgba(0,66,119,.25);
}

:root{
  /* Ajusta estos colores a tu paleta si quieres */
  --blend-blue: #0b4a6f;
  --blend-blue-2: #0f6fa3;
}

/* Contenedor opcional para mantener el botón visible al hacer scroll */
.back-sticky{
  position: sticky;
  top: .75rem;
  z-index: 101;
}

/* Botón pastilla */
.back-pill{
  display: inline-flex;
  align-items: center;
  margin-bottom: 20px;
  gap: .5rem;
  padding: .5rem .95rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  color: var(--blend-blue);
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  border: 1px solid rgba(11,74,111,.18);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background-color .15s ease,
    color .15s ease,
    border-color .15s ease;
}

.back-pill i{
  font-size: 1rem;
  transition: transform .15s ease;
}

/* Hover: elevación y cambio a azul */
.back-pill:hover{
  color: #fff;
  background: linear-gradient(180deg, var(--blend-blue-2), var(--blend-blue));
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(11,74,111,.25);
}

.back-pill:hover i{
  transform: translateX(-2px);
}

/* Active: feedback rápido */
.back-pill:active{
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(11,74,111,.28);
}

/* Accesible al teclado */
.back-pill:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(15,111,163,.28);
}

/* Variantes opcionales */
.back-pill--sm{ padding: .35rem .8rem; font-size: .95rem; }
.back-pill--ghost{
  background: transparent;
  border-color: rgba(11,74,111,.25);
}

/* ratio personalizado para laptop */
.ratio-3x2 { --bs-aspect-ratio: 66.666%; }

/* Laptop: usa 3:2 para bajar altura de las cards */
@media (min-width: 992px) and (max-width: 1399.98px){
  .blend-card__media.ratio { --bs-aspect-ratio: 66.666%; } /* 3:2 */
  .blend-card__overlay{ padding: 1rem !important; }
  .blend-pill.btn-lg{ font-size: .95rem; padding: .55rem .9rem; width: 85%; }
  .blend-head-title{ font-size: clamp(1.05rem,.9rem + .5vw,1.3rem); }
  .row.row-cols-1.row-cols-md-3{ --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; }
}

/* En ≥1400px vuelve a 4:3 (Bootstrap ratio-4x3) */
@media (min-width: 1400px){
  .blend-card__media.ratio{ --bs-aspect-ratio: 75%; } /* 4:3 */
}



/* Responsive */
@media (max-width: 991.98px){
  .product-image-wrap{ width: min(280px, 70vw); }
  .prod-modal .modal-content{ padding: .25rem .75rem .75rem; }
  .product-title{ text-align: center; }
}


/* En móvil, todo como fade-up */
@media (max-width: 767.98px){
  .reveal.slide-left,
  .reveal.slide-right{ transform: translateY(28px); }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

@media (hover: none){
  /* En touch no “forzar” blur; solo mostrará el tap objetivo */
  .equip-card:hover .equip-logo{ filter: none; }
}

/* Respeta preferencias del usuario */
@media (prefers-reduced-motion: reduce){
  .prod-modal.show .btn-cta{ animation: none !important; }
}

.product-benefits li{
  font-style: italic;           /* como en la maqueta */
  line-height: 1.6;
  margin-bottom: .35rem;
  padding-left: 1.2rem;
  position: relative;
}
.product-benefits li::before{
  content: "•";
  position: absolute;
  left: 0;
}

.hero-lead{
  font-family: "Gotham", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(1.15rem, 1.6vw + .7rem, 1rem);
  line-height: 1.6; letter-spacing:.02em;
  color: #0f6292;   
  margin: 0 auto; max-width: 1200px;
}

/* Estado inicial de reveal (desktop se mantiene igual) */
.reveal {
  opacity: 0;
  transform: translateY(18px) scale(.98);
  filter: blur(2px);
  transition:
    opacity .6s ease,
    transform .6s ease,
    filter .6s ease;
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* Cuando entra al viewport (ya lo tenías) */
.reveal.is-visible{
  opacity: 1;
  transform: none;
  filter: none;
}

/* En móvil: NO desplazamos en Y (para que no se sume al gy-4) */
@media (max-width: 767.98px){
  .reveal{                /* antes: translateY(...) scale(.98) */
    transform: scale(.98);            /* sin Y */
  }
  .reveal.fade-up{
    transform: scale(.98);            /* sin Y */
  }
  .reveal.slide-left{
    transform: translateX(-16px) scale(.98); /* mueve solo en X si quieres efecto */
  }
  .reveal.slide-right{
    transform: translateX(16px) scale(.98);  /* mueve solo en X si quieres efecto */
  }
}

/* Respeto por reducción de movimiento (ya lo tenías) */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.is-visible {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Dirección por defecto */
.reveal {
  opacity: 0;
  transform: translateY(18px) scale(.98);
  filter: blur(2px);
  transition:
    opacity .6s ease,
    transform .6s ease,
    filter .6s ease;
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* Cuando entra al viewport */
.reveal.is-visible {
  opacity: 1;
  transform: none !important;
  filter: none;
}

/* Solo en ≥ md usamos desplazamientos laterales */
@media (min-width: 768px){
  .reveal.slide-left  { transform: translateX(-22px) scale(.98); }
  .reveal.slide-right { transform: translateX(22px)  scale(.98); }
  .reveal.fade-up     { transform: translateY(18px) scale(.98); }
}

/* En móvil, NINGUNA variante se mueve en X */
@media (max-width: 767.98px){
  .reveal,
  .reveal.fade-up,
  .reveal.slide-left,
  .reveal.slide-right {
    transform: translateY(18px) scale(.98) !important;
  }
}

/* Si dentro del overlay existe el 5º botón, aplica reducción */
.blend-card__overlay:has(button.blend-pill:nth-of-type(n+4)) .btn-lg{
  --bs-btn-font-size:.95rem;
  --bs-btn-padding-y:.45rem;
  --bs-btn-padding-x:1rem;
  --bs-btn-border-radius:.75rem;
}

.blend-card__overlay:has(button.blend-pill:nth-of-type(n+4)) .blend-pill.mb-3{
  margin-bottom:.5rem !important;
}

.blend-card__overlay:has(button.blend-pill:nth-of-type(n+4)) .blend-pill{
  width:70% !important;
}