:root {
      /* Paleta neutra cálida, baja saturación */
      --bg:           #ffffff;
      --bg-deep:      #ffffff;
      --ink:             rgb(var(--palette-6));   
      --ink-soft:        rgb(var(--palette-8));   
      --line:            rgb(var(--palette-6));      
      --accent:       rgb(var(--palette-7));   
      --accent-ink:   rgb(var(--palette-4));   
      --focus:    rgb(var(--palette-4));   

 .hero-integral {
      position: relative;
      isolation: isolate;
      overflow: clip;
      min-height:90vh;
      display: grid;
      align-items: center;
      background: var(--bg-surface-dark);

    }
    .hero-integral .eyebrow {color:var(--text-light);}

    .hero-integral__inner {
      position: relative;
      width: 100%;
      max-width: 1440px;
      margin: 0 auto;
      display: grid;

    }
    .hero-integral-title{background: red; padding: 0; margin:0; font-size:var(--fs-mono);line-height: 0;} 

    /* H1 — 120px en desktop, fluido a móvil */
    .hero-integral h1 {
      text-wrap: balance; 
      max-width: 10ch; color:rgb(var(--palette-4) / 0.90);
      text-transform: uppercase;
    }

    /* Lead 24px */
    .hero-integral .lead {
      line-height: 1.45;
      color: var(--ink-soft);
      margin: 0;
      max-width: 48ch;
      text-wrap: pretty;
    }

    /* Acciones */
    .hero-integral__actions {
      display: flex;
      flex-wrap: wrap;
      gap: .75rem 1rem;
      margin-top: clamp(.5rem, 0.3rem + 0.6vw, 1rem);
    }


    /* ---------- Fondo: gradiente radial sutil + grano ---------- */
    .hero-integral__bg {
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      overflow: hidden;
      background:
        radial-gradient(60% 50% at 85% 20%, color-mix(in oklch, rgb(var(--accent)) 14%, transparent) 0%, transparent 60%),
        radial-gradient(55% 45% at 10% 90%, color-mix(in oklch, var(--ink) 8%,    transparent) 0%, transparent 60%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
    }
    /* Una mancha que deriva muy lentamente — no rompe el minimalismo */
    .hero-integral__bg::before {
      content: "";
      position: absolute;
      inset: -20%;
      background: radial-gradient(
        40% 35% at 50% 50%,
        color-mix(in oklch, var(--accent) 10%, transparent) 0%,
        transparent 65%
      );
      filter: blur(40px);
      animation: drift 28s ease-in-out infinite alternate;
      will-change: transform;
    }
    /* Línea horizontal sutil al pie del hero */
    .hero-integral__bg::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
    }

    /* Capa de grano sobre el fondo — SVG inline, muy bajo opacity */
    .hero-integral__grain {
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: .35;
      mix-blend-mode: multiply;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    }
    @media (prefers-color-scheme: dark) {
      .hero-integral__grain { mix-blend-mode: screen; opacity: .25; }
    }

    @keyframes drift {
      0%   { transform: translate3d(-6%, -4%, 0) scale(1);    }
      50%  { transform: translate3d( 8%,  6%, 0) scale(1.15); }
      100% { transform: translate3d(-4%,  8%, 0) scale(1.05); }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-integral__bg::before { animation: none; }
      .boton, .boton__icon { transition: none; }
    }

    /* ---------- Ajustes finos para móvil ---------- */
    @media (max-width: 30rem) {
      .hero-integral h1 { letter-spacing: -0.025em; }
      .boton { width: 100%; justify-content: center; }
    }

    /* Print */
    @media print {
      .hero-integral { min-height: auto; padding: 2rem 0; }
      .hero-integral__bg, .hero-integral__grain { display: none; }
      .boton { border: 1px solid var(--ink); color: var(--ink); background: transparent; }
    }


       @media (min-width:768px){
         .hero-integral {padding-inline: var(--space-xl);
         }
       }
       @media (min-width:1400px){
         .hero-integral {padding-inline: var(--space-xxl); 
         }
       }
       @media (min-width:1920px){
         .hero-integral {padding-inline: var(--space-xxl);
         }
       }
        @media (min-width:2560px){
         .hero-integral {padding-inline: var(--space-xxl);
         }
       }