/* ==========================================================================
   Cerealtec — refrigeraciondegranos.com
   Rediseño 2026 · CSS moderno (grid, flexbox, custom properties, clamp)
   Sin librerías externas. Tipografía: General Sans (local).
   ========================================================================== */

:root {
  --azul: #0052a5;
  --azul-oscuro: #003d7a;
  --azul-profundo: #002a55;
  --acento: #f1b902;
  --acento-hover: #fdc61e;
  --tinta: #1c2b3a;
  --texto: #333;
  --texto-suave: #5a6b7b;
  --gris-fondo: #f4f6f9;
  --blanco: #fff;
  --borde: #e3e8ee;
  --radio: 14px;
  --sombra: 0 6px 24px rgba(16, 42, 74, .08);
  --sombra-alta: 0 14px 34px rgba(16, 42, 74, .16);
  --header-h: 76px;
  --transicion: .3s cubic-bezier(.4, 0, .2, 1);
  --fuente: 'GeneralSans-Regular', 'GeneralSans-Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-media: 'GeneralSans-Medium', var(--fuente);
  --fuente-semi: 'GeneralSans-Semibold', var(--fuente);
  --fuente-bold: 'GeneralSans-Bold', var(--fuente);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--fuente);
  color: var(--texto);
  background: var(--blanco);
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: none; }
section, .banda { scroll-margin-top: var(--header-h); }

.max-width { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }

/* ---------- Tipografía fluida ---------- */
h1, h2, h3 { font-family: var(--fuente-semi); font-weight: 600; line-height: 1.15; color: var(--tinta); margin: 0 0 .6em; }
h1 { font-size: clamp(2.3rem, 6.5vw, 4.2rem); }
h2, .titulo-seccion { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
h3 { font-size: clamp(1.05rem, 2vw, 1.3rem); }
p  { font-size: clamp(.98rem, 1.4vw, 1.08rem); }

.titulo-seccion {
  text-align: center;
  margin-bottom: clamp(28px, 5vw, 52px);
  position: relative;
  padding-bottom: 18px;
}
.titulo-seccion::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: var(--acento);
}

/* ==========================================================================
   HEADER — barra fija translúcida con backdrop-blur
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background var(--transicion), box-shadow var(--transicion);
}
.site-header .max-width {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-header .logo { display: inline-flex; align-items: center; gap: 9px; }
.site-header .logo img { width: clamp(116px, 14vw, 150px); height: auto; }
/* Isotipo girando (ventilador de frío) — decorativo, el alt vive en la img del texto */
.logo-iso {
  width: clamp(30px, 3.8vw, 40px);
  aspect-ratio: 1;
  flex: none;
  background: url('../img/cerealtec-iso-alt.png') center/contain no-repeat;
  animation: girar-iso 9s linear infinite;
  will-change: transform;
}
.site-header.scrolled .logo-iso,
.site-header.menu-abierto .logo-iso { background-image: url('../img/cerealtec-iso.png'); }
.site-header .logo:hover .logo-iso { animation-duration: 2s; }
@keyframes girar-iso {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}
.site-header .logo-color { display: none; }
.site-header .logo-blanco { display: block; }

.site-header.scrolled {
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 2px 18px rgba(16, 42, 74, .1);
}
.site-header.scrolled .logo-color { display: block; }
.site-header.scrolled .logo-blanco { display: none; }

.main-nav { display: flex; align-items: center; gap: clamp(10px, 2vw, 28px); }
@media (min-width: 900px) {
  .menu-panel { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); }
  .header-contacto p, .header-contacto a { flex: none; }
}
.menu-principal { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); list-style: none; margin: 0; padding: 0; }
.menu-principal a {
  font-family: var(--fuente-media);
  font-size: .98rem;
  color: var(--blanco);
  padding: 8px 2px;
  position: relative;
}
.menu-principal a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 2px;
  height: 2px;
  background: var(--acento);
  transition: right var(--transicion);
}
.menu-principal a:hover::after { right: 0; }
.site-header.scrolled .menu-principal a { color: var(--tinta); }

/* Accesos de contacto en el header */
.header-contacto { display: flex; align-items: center; gap: 10px; }
.header-contacto p { margin: 0; display: flex; flex: 1; }
.header-contacto a {
  flex: 1;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fuente-media);
  font-size: .92rem;
  color: var(--blanco);
  padding: 8px 14px;
  border: 1.5px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.header-contacto a:hover { background: rgba(255, 255, 255, .16); }
.site-header.scrolled .header-contacto a { color: var(--azul); border-color: rgba(0, 82, 165, .4); }
.site-header.scrolled .header-contacto a:hover { background: rgba(0, 82, 165, .08); }
.header-contacto svg { width: 15px; height: 15px; fill: currentColor; }

/* Selector de idioma */
.lang-dropdown { position: relative; }
.lang-toggle {
  font: inherit;
  color: var(--blanco);
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 6px;
}
.site-header.scrolled .lang-toggle { color: var(--tinta); }
.lang-toggle .caret { font-size: .7em; transition: transform var(--transicion); }
.lang-dropdown.open .lang-toggle .caret { transform: rotate(180deg); }
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--blanco);
  border-radius: 12px;
  box-shadow: var(--sombra-alta);
  min-width: 120px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
}
.lang-dropdown.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--tinta);
  font-size: .95rem;
  white-space: nowrap;
}
.lang-menu a:hover { background: var(--gris-fondo); }

/* Hamburguesa (solo mobile) */
.hamburger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--blanco);
  transition: transform var(--transicion), opacity var(--transicion);
}
.site-header.scrolled .hamburger span,
.site-header.menu-abierto .hamburger span { background: var(--tinta); }
.site-header.menu-abierto .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.menu-abierto .hamburger span:nth-child(2) { opacity: 0; }
.site-header.menu-abierto .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 899px) {
  .hamburger { display: flex; }
  .menu-panel {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 30px rgba(16, 42, 74, .14);
    padding: 10px 20px 24px;
    display: none;
  }
  .site-header.menu-abierto { background: rgba(255, 255, 255, .97); box-shadow: none; }
  .site-header.menu-abierto .logo-color { display: block; }
  .site-header.menu-abierto .logo-blanco { display: none; }
  .site-header.menu-abierto .menu-panel { display: block; }
  .site-header.menu-abierto .lang-toggle { color: var(--tinta); }
  .menu-principal { flex-direction: column; align-items: stretch; gap: 0; }
  .menu-principal a {
    color: var(--tinta) !important;
    display: block;
    padding: 14px 4px;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--borde);
  }
  .menu-principal a::after { content: none; }
  .header-contacto { margin-top: 16px; }
  .header-contacto a { color: var(--azul) !important; border-color: rgba(0, 82, 165, .4); flex: 1; justify-content: center; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.home {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: stretch; /* el contenido ocupa todo el alto: H1 arriba, CTAs abajo */
  overflow: hidden;
  background-color: var(--azul-oscuro);
}
/* Imagen con zoom Ken Burns sutil */
.home::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../img/bg-3.jpg');
  background-image: image-set(url('../img/bg-3.webp') type('image/webp'), url('../img/bg-3.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: 74% bottom; /* prioriza el equipo de frío (derecha) en pantallas angostas */
  animation: kenburns 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.08) translateY(-1.5%); }
}
/* Overlay más fuerte abajo a la izquierda, donde vive el H1 */
.home::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(0, 22, 45, .62) 0%, rgba(0, 42, 85, .22) 40%, rgba(0, 26, 51, .10) 100%),
    radial-gradient(720px 480px at 18% 22%, rgba(0, 30, 62, .55), transparent 70%);
}
.home-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--header-h) + clamp(28px, 7vh, 72px)) clamp(16px, 4vw, 32px) clamp(48px, 8vh, 84px);
}
.home-content .hero-ctas { margin-top: auto; }
.home-content h1 {
  color: var(--blanco);
  text-shadow: 0 2px 24px rgba(0, 20, 40, .45);
  margin-bottom: 24px;
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  animation: aparecer .9s cubic-bezier(.22, 1, .36, 1) .15s backwards;
}
.hero-ctas { animation: aparecer .9s cubic-bezier(.22, 1, .36, 1) .4s backwards; }
@keyframes aparecer {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--fuente-semi);
  font-size: 1.02rem;
  padding: 15px 30px;
  border-radius: 999px;
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.btn svg { width: 18px; height: 18px; fill: currentColor; }
.btn-primario {
  background: var(--acento);
  color: #17273a; /* contraste ≥ 4.5:1 sobre #f1b902 */
  box-shadow: 0 8px 22px rgba(241, 185, 2, .38);
}
.btn-primario:hover { background: var(--acento-hover); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(241, 185, 2, .48); }
.btn-secundario {
  border: 2px solid rgba(255, 255, 255, .85);
  color: var(--blanco);
}
.btn-secundario:hover { background: rgba(255, 255, 255, .14); transform: translateY(-2px); }

/* Indicador de scroll */
.scroll-btn-container {
  position: absolute;
  left: 0; right: 0; bottom: 26px;
  display: flex;
  justify-content: center;
  z-index: 1;
}
.scroll-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255,255,255,.85); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; }
.scroll-icon {
  width: 24px; height: 38px;
  border: 2px solid rgba(255,255,255,.8);
  border-radius: 14px;
  position: relative;
}
.scroll-icon::before {
  content: '';
  position: absolute;
  top: 7px; left: 50%;
  width: 4px; height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--acento);
  animation: ruedita 1.8s ease-in-out infinite;
}
@keyframes ruedita {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(10px); opacity: .25; }
}

/* ==========================================================================
   SECCIONES GENÉRICAS
   ========================================================================== */
.seccion { padding: clamp(56px, 9vw, 110px) 0; }
.seccion-alt { background: var(--gris-fondo); }

/* ---------- Ventajas: tarjetas ---------- */
.grid-ventajas {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.5vw, 28px);
}
@media (min-width: 640px)  { .grid-ventajas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .grid-ventajas { grid-template-columns: repeat(3, 1fr); } }

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: clamp(22px, 3vw, 34px) clamp(20px, 2.6vw, 30px);
  box-shadow: var(--sombra);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.tarjeta:hover { transform: translateY(-6px); box-shadow: var(--sombra-alta); }
.tarjeta h3 { margin: 18px 0 10px; color: var(--azul-oscuro); }
.tarjeta p { margin: 0; color: var(--texto-suave); }
.icon-wrap {
  width: 92px; height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(0, 82, 165, .14), rgba(0, 82, 165, .06));
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-wrap img { width: 64px; height: auto; }

/* ---------- Granos que refrigeramos ---------- */
.granos { margin-top: clamp(46px, 7vw, 80px); text-align: center; }
.granos h3 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: clamp(24px, 4vw, 40px); position: relative; padding-bottom: 14px; }
.granos h3::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 48px; height: 3px;
  border-radius: 2px;
  background: var(--acento);
}
.granos-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 26px);
}
.grano-item { width: clamp(76px, 10vw, 96px); }
/* En desktop entran los 7 en UNA fila (más chicos); el wrap queda solo para responsive */
@media (min-width: 900px) {
  .granos-grid { flex-wrap: nowrap; }
  .grano-item { width: 96px; }
}
.grano-foto {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: var(--sombra);
  border: 4px solid var(--blanco);
  outline: 1px solid var(--borde);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.grano-item:hover .grano-foto { transform: scale(1.06); box-shadow: var(--sombra-alta); }
.grano-item p { font-family: var(--fuente-media); color: var(--tinta); margin: 12px 0 0; }
.grano-1 { background-image: url('../img/granos-1.jpg'); background-image: image-set(url('../img/granos-1.webp') type('image/webp'), url('../img/granos-1.jpg') type('image/jpeg')); }
.grano-2 { background-image: url('../img/granos-2.jpg'); background-image: image-set(url('../img/granos-2.webp') type('image/webp'), url('../img/granos-2.jpg') type('image/jpeg')); }
.grano-3 { background-image: url('../img/granos-3.jpg'); background-image: image-set(url('../img/granos-3.webp') type('image/webp'), url('../img/granos-3.jpg') type('image/jpeg')); }
.grano-4 { background-image: url('../img/granos-4.jpg'); background-image: image-set(url('../img/granos-4.webp') type('image/webp'), url('../img/granos-4.jpg') type('image/jpeg')); }
.grano-5 { background-image: url('../img/granos-5.jpg'); background-image: image-set(url('../img/granos-5.webp') type('image/webp'), url('../img/granos-5.jpg') type('image/jpeg')); }
.grano-6 { background-image: url('../img/granos-6.jpg'); background-image: image-set(url('../img/granos-6.webp') type('image/webp'), url('../img/granos-6.jpg') type('image/jpeg')); }
.grano-7 { background-image: url('../img/granos-7.jpg'); background-image: image-set(url('../img/granos-7.webp') type('image/webp'), url('../img/granos-7.jpg') type('image/jpeg')); }

/* ==========================================================================
   BANDAS DESTACADAS (Tecnología de Vanguardia / Presencia Sudamericana)
   ========================================================================== */
.banda {
  position: relative;
  padding: clamp(60px, 9vw, 104px) 0;
  background:
    radial-gradient(900px 500px at 85% 15%, rgba(77, 163, 255, .28), transparent 60%),
    radial-gradient(700px 420px at 8% 95%, rgba(241, 185, 2, .14), transparent 55%),
    linear-gradient(135deg, #002348 0%, #003d7a 55%, #0052a5 100%);
}
/* Textura de puntos sutil, más presente hacia la derecha */
.banda::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .08) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(115deg, transparent 35%, #000 90%);
  mask-image: linear-gradient(115deg, transparent 35%, #000 90%);
}
/* Copo de frío gigante decorativo a la derecha (se mueve con el parallax) */
.banda::after {
  content: '';
  position: absolute;
  right: clamp(-40px, 3vw, 90px);
  top: 50%;
  width: clamp(240px, 28vw, 400px);
  aspect-ratio: 1;
  transform: translateY(-50%) translateY(var(--plx, 0px)) rotate(12deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' stroke='white' stroke-width='2.6' stroke-linecap='round' fill='none'%3E%3Cpath d='M50 6v88M6 50h88M19 19l62 62M81 19l-62 62M50 6l-8 12M50 6l8 12M50 94l-8-12M50 94l8-12M6 50l12-8M6 50l12 8M94 50l-12-8M94 50l-12 8M19 19l2 14M19 19l14 2M81 81l-2-14M81 81l-14-2M81 19l-14 2M81 19l-2 14M19 81l14-2M19 81l2-14'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: .12;
  pointer-events: none;
}
.banda { overflow: hidden; }
.banda .max-width { position: relative; z-index: 2; }
.banda h2 { color: var(--blanco); }
.banda-contenido { max-width: 730px; }
.banda .titulo-seccion {
  text-align: left;
  margin-bottom: 16px;
  padding-bottom: 16px;
}
.banda .titulo-seccion::after { left: 0; transform: none; }
.banda h3 {
  color: rgba(255, 255, 255, .92);
  font-family: var(--fuente);
  font-weight: 400;
  margin: 0 0 clamp(26px, 4vw, 38px);
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  line-height: 1.55;
}
.banda-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.banda-cta span { color: rgba(255, 255, 255, .75); font-size: .95rem; }
.banda-cta .btn-primario svg { transition: transform var(--transicion); }
.banda-cta .btn-primario:hover svg { transform: translateX(5px); }

/* Orbes decorativos animados */
.banda-decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.banda-decor span {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}
.banda-decor span:nth-child(1) {
  width: 420px; height: 420px;
  right: -80px; top: -120px;
  background: rgba(241, 185, 2, .32);
  animation: flotar 11s ease-in-out infinite alternate;
}
.banda-decor span:nth-child(2) {
  width: 320px; height: 320px;
  left: -100px; bottom: -140px;
  background: rgba(77, 163, 255, .35);
  animation: flotar 14s ease-in-out infinite alternate-reverse;
}
.banda-decor span:nth-child(3) {
  width: 200px; height: 200px;
  left: 55%; top: 30%;
  background: rgba(255, 255, 255, .12);
  animation: flotar 9s ease-in-out infinite alternate;
}
@keyframes flotar {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(26px, -30px) scale(1.1); }
}

/* ==========================================================================
   VIDEO — lite embed
   ========================================================================== */
.video-section { padding: clamp(56px, 9vw, 110px) 0; background: var(--gris-fondo); }
.video-container {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-alta);
  cursor: pointer;
  background: #000;
}
.video-thumbnail {
  position: absolute;
  inset: 0;
  background-image: url('../img/portada-video.jpg');
  background-image: image-set(url('../img/portada-video.webp') type('image/webp'), url('../img/portada-video.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center;
  transition: transform .5s ease;
}
.video-container:hover .video-thumbnail { transform: scale(1.03); }
.video-play-button {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 84px; height: 84px;
  border-radius: 50%;
  background: rgba(0, 82, 165, .92);
  box-shadow: 0 10px 30px rgba(0, 20, 40, .4);
  transition: transform var(--transicion), background var(--transicion);
}
.video-play-button::before {
  content: '';
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 14px 0 14px 24px;
  border-color: transparent transparent transparent #fff;
}
.video-container:hover .video-play-button { transform: translate(-50%, -50%) scale(1.1); background: var(--azul); }
/* el iframe queda oculto hasta el clic: si no, tapa el botón de play */
.video-container iframe { display: none; position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ==========================================================================
   FUNCIONAMIENTO
   ========================================================================== */
.funcionamiento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}
@media (min-width: 900px) { .funcionamiento-grid { grid-template-columns: 1fr 1.1fr; } }
.funcionamiento-img img {
  border-radius: var(--radio);
  width: 100%;
  height: auto;
}
.funcionamiento-texto p {
  position: relative;
  padding-left: 26px;
  margin: 0 0 18px;
}
.funcionamiento-texto p::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--acento);
}

/* ==========================================================================
   APLICACIONES (celdas / silos / galpones)
   ========================================================================== */
.estructuras { padding: clamp(56px, 9vw, 110px) 0; background: var(--gris-fondo); }
.estructuras-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.5vw, 28px);
}
@media (min-width: 700px) { .estructuras-grid { grid-template-columns: repeat(3, 1fr); } }
.estructura-card {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: clamp(20px, 2.6vw, 30px);
  text-align: center;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.estructura-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-alta); }
.estructura-card img { margin: 0 auto 14px; width: min(100%, 230px); }
.estructura-card p { margin: 0; font-size: 1.05rem; color: var(--azul-oscuro); }
.solo-mobile { display: none; }
@media (max-width: 699px) {
  .solo-desktop { display: none; }
  .solo-mobile { display: block; }
}
.estructuras-cta { text-align: center; margin-top: clamp(30px, 5vw, 44px); }
.estructuras-btn {
  display: inline-flex;
  font-family: var(--fuente-semi);
  background: var(--azul);
  color: var(--blanco);
  padding: 14px 34px;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(0, 82, 165, .3);
  transition: transform var(--transicion), background var(--transicion);
}
.estructuras-btn:hover { background: var(--azul-oscuro); transform: translateY(-2px); }

/* ==========================================================================
   CLIENTES — carrusel infinito puro CSS
   ========================================================================== */
.logos-section { padding: clamp(56px, 9vw, 110px) 0 clamp(64px, 10vw, 120px); overflow: hidden; }
.logos-section .titulo-seccion { padding-left: clamp(16px, 4vw, 32px); padding-right: clamp(16px, 4vw, 32px); }
.logos-marquee-wrapper {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.logos-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee 48s linear infinite;
}
.logos-marquee-wrapper:hover .logos-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.logo-item {
  flex: 0 0 auto;
  padding: 0 clamp(18px, 3vw, 34px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-item img {
  height: clamp(72px, 7.5vw, 96px);
  width: auto;
  filter: grayscale(1) opacity(.7);
  transition: filter var(--transicion), transform var(--transicion);
}
.logo-item a:hover img { filter: grayscale(0) opacity(1); transform: scale(1.06); }

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.seccion-contacto {
  position: relative;
  padding: clamp(56px, 9vw, 110px) 0;
  background-color: var(--azul-profundo);
  background-image: url('../img/bg-3.jpg');
  background-image: image-set(url('../img/bg-3.webp') type('image/webp'), url('../img/bg-3.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center;
}
.seccion-contacto::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(0, 42, 85, .95), rgba(0, 61, 122, .9));
}
.seccion-contacto .max-width { position: relative; z-index: 1; }
.seccion-contacto .titulo-seccion { color: var(--blanco); }
.contacto-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
@media (min-width: 900px) { .contacto-grid { grid-template-columns: 1.15fr 1fr; } }

.form-wrap {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  padding: clamp(24px, 3.4vw, 40px);
}
.form-consulta fieldset { border: 0; margin: 0; padding: 0; }
.form-consulta input,
.form-consulta textarea {
  width: 100%;
  font: inherit;
  color: var(--tinta);
  background: var(--gris-fondo);
  border: 1.5px solid var(--borde);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
  transition: border-color var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.form-consulta input:focus,
.form-consulta textarea:focus {
  outline: none;
  background: var(--blanco);
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(0, 82, 165, .15);
}
.form-consulta textarea { min-height: 130px; resize: vertical; }
.required-fields-txt { font-size: .85rem; color: var(--texto-suave); text-align: center; margin: 4px 0 16px; }
.form-consulta button[type="submit"] {
  width: 100%;
  font-family: var(--fuente-semi);
  font-size: 1.05rem;
  color: #17273a;
  background: var(--acento);
  border: 0;
  border-radius: 999px;
  padding: 15px 30px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(241, 185, 2, .32);
  transition: transform var(--transicion), background var(--transicion);
}
.form-consulta button[type="submit"]:hover { background: var(--acento-hover); transform: translateY(-2px); }
.form-consulta .preloader { display: none; text-align: center; padding: 30px 0; color: var(--texto-suave); }
.mail-response { display: none; text-align: center; padding: 10px 0; color: var(--tinta); }
.mail-response.visible, .form-consulta .preloader.visible { display: block; }

.contacto-datos { color: var(--blanco); }
.contacto-datos .tel {
  font-family: var(--fuente-semi);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  margin: 0 0 10px;
  color: var(--blanco);
}
.contacto-datos p { margin: 0 0 10px; }
.contacto-datos a { color: rgba(255, 255, 255, .92); border-bottom: 1px solid rgba(241, 185, 2, .6); padding-bottom: 1px; }
.contacto-datos a:hover { color: var(--acento); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--azul-profundo); color: rgba(255, 255, 255, .85); padding-top: clamp(44px, 6vw, 70px); }
.footer-logo img { width: 190px; margin-bottom: clamp(28px, 4vw, 44px); }
.footer-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 48px);
  padding-bottom: clamp(36px, 5vw, 56px);
}
@media (min-width: 700px) { .footer-content { grid-template-columns: repeat(3, 1fr); } }
.footer-column h3 {
  color: var(--blanco);
  font-size: .95rem;
  letter-spacing: .14em;
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 10px;
}
.footer-column h3::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 34px; height: 3px;
  border-radius: 2px;
  background: var(--acento);
}
.footer-column ul { list-style: none; margin: 0; padding: 0; }
.footer-column li { margin-bottom: 10px; }
.footer-column a { color: rgba(255, 255, 255, .78); font-size: .9rem; letter-spacing: .04em; transition: color var(--transicion); }
.footer-column a:hover { color: var(--acento); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .14); padding: 20px 0; }
.footer-bottom-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.footer-copyright, .footer-credits { margin: 0; font-size: .85rem; color: rgba(255, 255, 255, .65); }
.footer-credits { display: flex; align-items: center; gap: 8px; }
.footer-credits img { height: 22px; width: auto; display: inline-block; }

/* Botón flotante WhatsApp */
.purchase-btn { position: fixed; right: 22px; bottom: 22px; z-index: 900; }
.pulse-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #25d366 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23fff'%3E%3Cpath d='M16 2.7C8.7 2.7 2.7 8.6 2.7 16c0 2.3.6 4.6 1.8 6.6L2.7 29.3l6.9-1.8c1.9 1.1 4.1 1.6 6.4 1.6 7.3 0 13.3-5.9 13.3-13.2S23.3 2.7 16 2.7zm0 24.2c-2 0-4-.5-5.7-1.6l-.4-.2-4.1 1.1 1.1-4-.3-.4a10.9 10.9 0 0 1-1.7-5.8c0-6 4.9-11 11-11s11 4.9 11 11-4.9 10.9-10.9 10.9zm6-8.1c-.3-.2-1.9-1-2.2-1.1-.3-.1-.5-.2-.7.2-.2.3-.9 1.1-1 1.3-.2.2-.4.2-.7.1-.3-.2-1.4-.5-2.6-1.6-1-.9-1.6-1.9-1.8-2.2-.2-.3 0-.5.1-.7l.5-.6c.2-.2.2-.3.3-.6.1-.2.1-.4 0-.6-.1-.2-.7-1.8-1-2.4-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4-.3.3-1.1 1.1-1.1 2.7s1.2 3.1 1.3 3.4c.2.2 2.3 3.6 5.7 5 .8.3 1.4.5 1.9.7.8.3 1.5.2 2.1.1.6-.1 1.9-.8 2.2-1.5.3-.8.3-1.4.2-1.5-.1-.2-.3-.3-.6-.4z'/%3E%3C/svg%3E") center/32px no-repeat;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .5);
}
.pulse-button::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25d366;
  animation: pulso 2s ease-out infinite;
}
@keyframes pulso {
  from { transform: scale(1); opacity: .8; }
  to   { transform: scale(1.55); opacity: 0; }
}

/* ==========================================================================
   ANIMACIONES DE ENTRADA (IntersectionObserver agrega .visible)
   ========================================================================== */
/* Solo se ocultan si hay JS (la clase .js se agrega en el <head>);
   sin JS todo el contenido queda visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-espera-1 { transition-delay: .08s; }
.reveal-espera-2 { transition-delay: .16s; }
.reveal-espera-3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .logos-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; row-gap: 20px; }
  .scroll-icon::before, .pulse-button::after { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ==========================================================================
   DINÁMICA EXTRA (v2): progreso de scroll, micro-animaciones, ilustraciones
   ========================================================================== */

/* Barra de progreso de lectura bajo el header */
.progreso-scroll {
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--acento), var(--acento-hover));
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 0 2px 2px 0;
  pointer-events: none;
}

/* Brillo que recorre el CTA principal */
.btn-primario { position: relative; overflow: hidden; }
.btn-primario::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg);
  animation: brillo 4.5s ease-in-out infinite;
}
@keyframes brillo {
  0%, 55% { left: -80%; }
  75%, 100% { left: 130%; }
}

/* Íconos de ventajas: leve flote al pasar el mouse */
.icon-wrap { transition: transform var(--transicion), box-shadow var(--transicion); }
.tarjeta:hover .icon-wrap {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 10px 22px rgba(0, 82, 165, .18);
}

/* Granos: flote suave permanente, escalonado (en el item; la foto queda libre para el pop) */
.grano-item { animation: bob 6s ease-in-out infinite; }
.grano-item:nth-child(2n) { animation-delay: -1.6s; }
.grano-item:nth-child(3n) { animation-delay: -3.1s; }
.grano-item:nth-child(5n) { animation-delay: -4.4s; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.grano-item:hover { animation-play-state: paused; }

/* Reveals escalonados automáticos en grillas */
.grid-ventajas .tarjeta:nth-child(2) { transition-delay: .08s; }
.grid-ventajas .tarjeta:nth-child(3) { transition-delay: .16s; }
.grid-ventajas .tarjeta:nth-child(5) { transition-delay: .08s; }
.grid-ventajas .tarjeta:nth-child(6) { transition-delay: .16s; }
.granos-grid .grano-item:nth-child(2) { transition-delay: .06s; }
.granos-grid .grano-item:nth-child(3) { transition-delay: .12s; }
.granos-grid .grano-item:nth-child(4) { transition-delay: .18s; }
.granos-grid .grano-item:nth-child(5) { transition-delay: .24s; }
.granos-grid .grano-item:nth-child(6) { transition-delay: .3s; }
.granos-grid .grano-item:nth-child(7) { transition-delay: .36s; }
.estructuras-grid .estructura-card:nth-child(2) { transition-delay: .1s; }
.estructuras-grid .estructura-card:nth-child(3) { transition-delay: .2s; }

/* Imágenes originales de aplicaciones en tarjetas claras */
.estructura-card img { margin: 0 auto 14px; width: min(100%, 230px); }
.estructura-card .ilustracion { transition: transform var(--transicion); }
.estructura-card:hover img { transform: translateY(-5px) scale(1.03); }

/* Video: anillo pulsante en el botón de play */
.video-play-button::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .55);
  animation: pulso 2.4s ease-out infinite;
}

/* Parallax leve: el copo decorativo se desplaza con --plx (JS, solo desktop) */

/* Scroll cue: desvanecer al scrollear (lo maneja JS con .oculto) */
.scroll-btn-container { transition: opacity .5s ease; animation: aparecer 1s ease .8s backwards; }
.scroll-btn-container.oculto { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .home::after, .banda-decor span, .grano-foto, .btn-primario::after,
  .video-play-button::after { animation: none; }
  .home-content h1, .hero-ctas, .scroll-btn-container { animation: none; }
  .banda { background-position: center; }
}

/* ===== Banda 2: mapa de América Latina (pedido del dueño) ===== */
.banda-2::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 232 372'%3E%3Cpath d='M0 0 L28 1 L53 25 L50 41 L56 53 L70 50 L80 42 L77 57 L89 66 L88 82 L99 93 L111 86 L121 86 L133 88 L148 94 L164 106 L175 123 L183 137 L217 151 L208 184 L196 225 L181 244 L162 274 L146 290 L140 305 L127 342 L132 360 L114 352 L115 300 L120 266 L124 227 L124 206 L106 180 L95 151 L98 140 L99 127 L106 114 L98 98 L85 92 L66 74 L45 61 L32 47 L29 37 L24 20 Z' fill='rgba(255,255,255,0.13)' stroke='rgba(255,255,255,0.65)' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M2 3 L22 34 L17 36 L0 6 Z' fill='rgba(255,255,255,0.3)'/%3E%3Cellipse cx='100' cy='40' rx='13' ry='3.2' fill='rgba(255,255,255,0.35)' transform='rotate(-8 100 40)'/%3E%3Ccircle cx='42' cy='45' r='4.5' fill='%23f1b902'/%3E%3Ccircle cx='42' cy='45' r='5' fill='none' stroke='%23f1b902' stroke-width='2'%3E%3Canimate attributeName='r' values='5;15' dur='2.2s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='.9;0' dur='2.2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='114' cy='112' r='4.5' fill='%23f1b902'/%3E%3Ccircle cx='114' cy='112' r='5' fill='none' stroke='%23f1b902' stroke-width='2'%3E%3Canimate attributeName='r' values='5;15' dur='2.2s' begin='.28s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='.9;0' dur='2.2s' begin='.28s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='102' cy='132' r='4.5' fill='%23f1b902'/%3E%3Ccircle cx='102' cy='132' r='5' fill='none' stroke='%23f1b902' stroke-width='2'%3E%3Canimate attributeName='r' values='5;15' dur='2.2s' begin='.55s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='.9;0' dur='2.2s' begin='.55s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='183' cy='196' r='4.5' fill='%23f1b902'/%3E%3Ccircle cx='183' cy='196' r='5' fill='none' stroke='%23f1b902' stroke-width='2'%3E%3Canimate attributeName='r' values='5;15' dur='2.2s' begin='.83s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='.9;0' dur='2.2s' begin='.83s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='139' cy='200' r='4.5' fill='%23f1b902'/%3E%3Ccircle cx='139' cy='200' r='5' fill='none' stroke='%23f1b902' stroke-width='2'%3E%3Canimate attributeName='r' values='5;15' dur='2.2s' begin='1.1s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='.9;0' dur='2.2s' begin='1.1s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='157' cy='234' r='4.5' fill='%23f1b902'/%3E%3Ccircle cx='157' cy='234' r='5' fill='none' stroke='%23f1b902' stroke-width='2'%3E%3Canimate attributeName='r' values='5;15' dur='2.2s' begin='1.38s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='.9;0' dur='2.2s' begin='1.38s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='161' cy='266' r='4.5' fill='%23f1b902'/%3E%3Ccircle cx='161' cy='266' r='5' fill='none' stroke='%23f1b902' stroke-width='2'%3E%3Canimate attributeName='r' values='5;15' dur='2.2s' begin='1.65s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='.9;0' dur='2.2s' begin='1.65s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='138' cy='274' r='4.5' fill='%23f1b902'/%3E%3Ccircle cx='138' cy='274' r='5' fill='none' stroke='%23f1b902' stroke-width='2'%3E%3Canimate attributeName='r' values='5;15' dur='2.2s' begin='1.93s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='.9;0' dur='2.2s' begin='1.93s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center/contain no-repeat;
  aspect-ratio: 232 / 372;
  width: clamp(180px, 17vw, 245px);
  right: clamp(36px, 10vw, 150px);
  transform: translateY(-50%) translateY(var(--plx, 0px));
  opacity: .95;
}
@media (max-width: 899px) {
  .banda-2 { padding-bottom: 340px; }
  .banda-2::after {
    top: auto;
    bottom: 20px;
    right: 50%;
    transform: translateX(50%);
    width: 200px;
    opacity: .95;
  }
}

/* ===== Movimiento extra v9 ===== */
/* Copo de la banda 1 rotando muy lento */
.banda-1::after { animation: girar-copo 70s linear infinite; }
@keyframes girar-copo {
  from { transform: translateY(-50%) translateY(var(--plx, 0px)) rotate(12deg); }
  to   { transform: translateY(-50%) translateY(var(--plx, 0px)) rotate(372deg); }
}
/* Halo que respira en los íconos de ventajas */
.icon-wrap { animation: halo 4s ease-in-out infinite; }
.grid-ventajas .tarjeta:nth-child(2) .icon-wrap { animation-delay: .6s; }
.grid-ventajas .tarjeta:nth-child(3) .icon-wrap { animation-delay: 1.2s; }
.grid-ventajas .tarjeta:nth-child(4) .icon-wrap { animation-delay: 1.8s; }
.grid-ventajas .tarjeta:nth-child(5) .icon-wrap { animation-delay: 2.4s; }
.grid-ventajas .tarjeta:nth-child(6) .icon-wrap { animation-delay: 3s; }
@keyframes halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 82, 165, 0); }
  50% { box-shadow: 0 0 0 12px rgba(0, 82, 165, .07); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-iso, .banda-1::after, .icon-wrap { animation: none; }
}

/* ===== v10: iso por scroll + partículas del hero ===== */
/* Con JS activo, la rotación del iso la maneja el scroll (no el loop CSS) */
.js .logo-iso { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .js .logo-iso { animation: none; }
}

/* ===== v11: tarjetas de ventajas con más vida ===== */
.icon-wrap img { width: 60px; height: 60px; }
/* Pop del ícono al entrar la tarjeta en pantalla */
.tarjeta.visible .icon-wrap { animation: pop-icono .65s cubic-bezier(.34, 1.56, .64, 1) backwards, halo 4s ease-in-out .8s infinite; }
.grid-ventajas .tarjeta.visible:nth-child(2) .icon-wrap { animation-delay: .12s, .92s; }
.grid-ventajas .tarjeta.visible:nth-child(3) .icon-wrap { animation-delay: .24s, 1.04s; }
.grid-ventajas .tarjeta.visible:nth-child(4) .icon-wrap { animation-delay: .12s, 1.6s; }
.grid-ventajas .tarjeta.visible:nth-child(5) .icon-wrap { animation-delay: .24s, 2.2s; }
.grid-ventajas .tarjeta.visible:nth-child(6) .icon-wrap { animation-delay: .36s, 2.8s; }
@keyframes pop-icono {
  0% { transform: scale(.3); opacity: 0; }
  70% { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}
/* Borde superior con gradiente de marca que se enciende al hover */
.tarjeta { position: relative; overflow: hidden; }
.tarjeta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--azul), #4da3ff, var(--acento));
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.tarjeta:hover::before {
  transform: scaleX(1);
  animation: gradiente-corre 2.5s linear infinite;
}
@keyframes gradiente-corre {
  from { background-position: 0% 0; }
  to   { background-position: 200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tarjeta.visible .icon-wrap, .tarjeta:hover::before { animation: none; }
}

/* ===== v12: granos con pop de entrada y anillo al hover ===== */
.grano-item.visible .grano-foto { animation: pop-icono .6s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.granos-grid .grano-item.visible:nth-child(2) .grano-foto { animation-delay: .07s; }
.granos-grid .grano-item.visible:nth-child(3) .grano-foto { animation-delay: .14s; }
.granos-grid .grano-item.visible:nth-child(4) .grano-foto { animation-delay: .21s; }
.granos-grid .grano-item.visible:nth-child(5) .grano-foto { animation-delay: .28s; }
.granos-grid .grano-item.visible:nth-child(6) .grano-foto { animation-delay: .35s; }
.granos-grid .grano-item.visible:nth-child(7) .grano-foto { animation-delay: .42s; }
.grano-foto { transition: transform var(--transicion), box-shadow var(--transicion), outline-color var(--transicion); outline: 3px solid transparent; outline-offset: 3px; }
.grano-item:hover .grano-foto { outline-color: var(--acento); transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .grano-item, .grano-item.visible .grano-foto { animation: none; }
}

/* ===== v13: Funcionamiento didáctico (diagrama animado + pasos) ===== */
.funcionamiento-grid { align-items: start; }
.funcionamiento-visual { position: sticky; top: calc(var(--header-h) + 24px); }
.diagrama-proceso {
  width: 100%;
  aspect-ratio: 480 / 320;
  background: url('../img/funcionamiento-proceso.svg') center/contain no-repeat;
}
.equipo-real { margin-top: 18px; display: flex; justify-content: center; }
.equipo-real img {
  width: min(72%, 300px);
  border-radius: var(--radio);
}

.funcionamiento-pasos { display: flex; flex-direction: column; }
.paso {
  position: relative;
  display: flex;
  gap: 18px;
  padding-bottom: clamp(20px, 2.6vw, 30px);
}
/* línea conectora entre pasos */
.paso:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 44px;
  bottom: 2px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(to bottom, rgba(0, 82, 165, .35), rgba(0, 82, 165, .12));
}
.paso-num {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fuente-bold);
  font-size: 1.05rem;
  color: var(--blanco);
  background: linear-gradient(135deg, var(--azul), var(--azul-oscuro));
  box-shadow: 0 6px 14px rgba(0, 82, 165, .3);
}
.paso-titulo {
  display: block;
  font-family: var(--fuente-semi);
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  color: var(--azul-oscuro);
  margin: 7px 0 6px;
}
.paso .item {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--texto-suave);
}
/* reveals escalonados */
.funcionamiento-pasos .paso:nth-child(2) { transition-delay: .1s; }
.funcionamiento-pasos .paso:nth-child(3) { transition-delay: .2s; }
.funcionamiento-pasos .paso:nth-child(4) { transition-delay: .3s; }
.funcionamiento-pasos .paso:nth-child(5) { transition-delay: .4s; }
/* pop del número al aparecer */
.paso.visible .paso-num { animation: pop-icono .55s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.funcionamiento-pasos .paso.visible:nth-child(2) .paso-num { animation-delay: .1s; }
.funcionamiento-pasos .paso.visible:nth-child(3) .paso-num { animation-delay: .2s; }
.funcionamiento-pasos .paso.visible:nth-child(4) .paso-num { animation-delay: .3s; }
.funcionamiento-pasos .paso.visible:nth-child(5) .paso-num { animation-delay: .4s; }
@media (max-width: 899px) {
  .funcionamiento-visual { position: static; }
  .equipo-real img { width: min(60%, 240px); }
}
@media (prefers-reduced-motion: reduce) {
  .paso.visible .paso-num { animation: none; }
}

/* ===== v17: foto real del equipo en "Tecnología de Vanguardia" ===== */
.banda-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 5vw, 48px);
  align-items: center;
}
@media (min-width: 900px) { .banda-grid { grid-template-columns: 1.2fr .8fr; } }
.banda-equipo {
  position: relative;
  max-width: 470px;
  width: 100%;
  aspect-ratio: 624 / 470;
  justify-self: center;
}
/* la foto flota con bordes limpios */
.banda-equipo::after {
  content: '';
  position: absolute;
  inset: 0 0 9% 0;
  background-image: url('../img/equipo-vanguardia.png');
  background-image: image-set(url('../img/equipo-vanguardia.webp') type('image/webp'), url('../img/equipo-vanguardia.png') type('image/png'));
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  animation: bob 7s ease-in-out infinite;
}
/* sombra de contacto que respira con el vaivén */
.banda-equipo::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 1.5%;
  width: 72%;
  height: 7%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0, 8, 20, .55), transparent 66%);
  animation: sombra-bob 7s ease-in-out infinite;
}
@keyframes sombra-bob {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
  50% { transform: translateX(-50%) scale(.92); opacity: .7; }
}
/* en esta banda la foto es protagonista: fuera el copo decorativo */
.banda-1::after { display: none; }
@media (prefers-reduced-motion: reduce) { .banda-equipo::after, .banda-equipo::before { animation: none; } }

/* ===== v20: tabla de modelos Grain Master ===== */
.seccion-modelos { background: var(--gris-fondo); }
.tabla-modelos-wrap {
  overflow-x: auto;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  border: 1px solid var(--borde);
  -webkit-overflow-scrolling: touch;
}
.tabla-modelos {
  border-collapse: collapse;
  width: 100%;
  min-width: 1020px;
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
}
.tabla-modelos thead th {
  background: linear-gradient(135deg, var(--azul), var(--azul-oscuro));
  color: var(--blanco);
  font-family: var(--fuente-semi);
  font-size: .95rem;
  padding: 14px 12px;
  text-align: center;
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.tabla-modelos thead th:first-child { text-align: left; border-radius: var(--radio) 0 0 0; }
.tabla-modelos thead th:last-child { border-radius: 0 var(--radio) 0 0; }
.tabla-modelos tbody th {
  font-family: var(--fuente-media);
  font-weight: 500;
  color: var(--tinta);
  text-align: left;
  padding: 11px 14px;
  min-width: 210px;
  background: rgba(0, 82, 165, .04);
}
.tabla-modelos tbody th small {
  display: block;
  font-family: var(--fuente);
  font-weight: 400;
  color: var(--texto-suave);
  font-size: .78rem;
}
.tabla-modelos td {
  padding: 11px 12px;
  text-align: center;
  color: var(--texto);
  white-space: nowrap;
}
.tabla-modelos tbody tr:nth-child(even) td { background: var(--gris-fondo); }
.tabla-modelos tbody tr { border-top: 1px solid var(--borde); transition: background var(--transicion); }
.tabla-modelos tbody tr:hover td { background: rgba(241, 185, 2, .1); }
.nota-modelos {
  margin: 16px 4px 0;
  font-size: .88rem;
  color: var(--texto-suave);
  text-align: center;
}