/* Fuente manuscrita */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap');

.titulo-blendtec {
  font-weight: 800;
  font-size: 2.5rem;
  color: #004080; /* Azul oscuro */
  text-align: center;
  margin-bottom: 1.5rem;
}

.titulo-rule{
  display:block; width: clamp(220px, 55%, 760px); height:3px;
  background: var(--rule); border-radius: 2px;
  margin: 0 auto 28px;
}

.titulo-rule--alt{ background: #d6e4f1; }

.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;
}

.hand-title{
  font-family: 'Caveat', cursive;
  line-height: 1.05;
  color: #0f6292;
}

.cat-card{ 
  --bs-aspect-ratio: 180%; 
  --cat-fade-h: clamp(72px, 24%, 160px);
  border-radius: 8px;
}         

.cat-card::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--cat-fade-h);
  pointer-events: none;
  /* blanco → transparente hacia arriba */
  background: linear-gradient(
    to top,
    rgba(255,255,255,.96) 0%,
    rgba(255,255,255,.75) 40%,
    rgba(255,255,255,0) 100%
  );
  z-index: 2; /* por debajo del título, por encima de la imagen */
}

.ratio > .cat-title{ top: auto !important; }

.cat-card > .cat-title{
  position: absolute;        
  inset: auto auto 0 0;       
  width: auto;                 
  height: auto;                 
  z-index: 3;             
  padding: .25rem .75rem .6rem;      
  display: inline-block;       
}

.cat-overlay{
  position: absolute;
  inset: 0;
  background: rgba(11, 74, 107, .85);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
  pointer-events: none;
  font-style: oblique;
  z-index: 1;
}
.cat-card:hover .cat-overlay,
.cat-card:focus-within .cat-overlay{ opacity: 1; visibility: visible; }

.cat-card img{ transition: transform .5s ease;  }
.cat-card:hover img{ transform: scale(1.04); }

.obj-left  { object-position: 15% center; }
.obj-center{ object-position: 50% center; }
.obj-right { object-position: 85% center; }
.object-fit-cover{ object-fit: cover; }

/* === Reveal on enter (inicio de página/scroll) === */
.reveal {
  opacity: 0;
  transform: translateY(18px) scale(.98);
  filter: blur(2px);
  transition:
    opacity .6s ease,
    transform .6s ease,
    filter .6s ease;
  /* escalonado: 0ms, 80ms, 160ms, ... */
  transition-delay: calc(var(--i, 0) * 80ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ===== Sección ¿Qué es Blendtec? ===== */
.quees-blendtec{
  position: relative;
  overflow: hidden;
}

.quees-blendtec > *{ position: relative; z-index: 1; }

/* Fondo suave tipo “olas” como en el mockup */
.quees-blendtec::before{
  content: "";
  position: absolute;
  inset: 35% -20% -20% -20%;
  background:
    radial-gradient(120% 70% at 60% 120%, rgba(0,86,127,.10) 0%, rgba(0,86,127,0) 65%),
    radial-gradient(110% 65% at 20% 110%, rgba(0,86,127,.06) 0%, rgba(0,86,127,0) 60%);
  pointer-events: none;
  z-index: 0;
}

/* Título grande “¿Qué es Blendtec?” */
.quees-title{
  letter-spacing: .01em;
  color: #0b4669;           /* azul navy/blend */
  margin: .75rem auto 1.5rem;
  font-size: clamp(2.2rem, 4.6vw + .8rem, 2rem);
  line-height: 1.1;
  max-width: 1200px;        /* alinea con .hero-lead */
}

/* Animar también el fondo suave de la sección */
.quees-blendtec::before{
  opacity: 0;
  transform: translateY(16px) scale(.98);
  transition: opacity .7s ease, transform .7s ease;
}
.quees-blendtec.is-visible::before{
  opacity: 1;
  transform: none;
}


/* Respeta 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;
  }
}


@media (min-width: 992px){
  .cat-card{ --bs-aspect-ratio: 210%; }      
}

@media (min-width: 992px) and (max-width: 1399.98px){
  .cat-title{ padding: .75rem 1rem !important; }
  .section{ padding-block: 3rem; }
  .titulo-blendtec {
  font-weight: 800;
  font-size: clamp(1.75rem, 1.1rem + 1.6vw, 2.25rem);
  color: #004080; /* Azul oscuro */
  text-align: center;
  margin-bottom: 1.5rem;
}

.titulo-rule{
  display:block; width: clamp(220px, 55%, 760px); height:3px;
  background: var(--rule); border-radius: 2px;
  margin: 0 auto 28px;
}

.titulo-rule--alt{ background: #d6e4f1; }

.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(1rem, .95rem + .25vw, 1rem);
  line-height: 1.6; letter-spacing:.02em;
  color: #0f6292;   
  margin: 0 auto; 
  max-width: 75ch;
  margin-inline: auto;
}

.hand-title{
  font-family: 'Caveat', cursive;
  line-height: 1.05;
  color: #0f6292;
}
}



/* En móviles: separaciones cómodas */
@media (max-width: 575.98px){
  .cat-card{ border-radius: .875rem; }
}