/* Bebas Neue - Normal 400 */
		@font-face {
		  font-family: 'Bebas Neue';
		  font-style: normal;
		  font-weight: 400;
		  font-display: swap;
		  src: url('../fonts/bebas-neue-400-latin.woff2') format('woff2');
		}

		/* Instrument Serif - Normal 400 */
		@font-face {
		  font-family: 'Instrument Serif';
		  font-style: normal;
		  font-weight: 400;
		  font-display: swap;
		  src: url('../fonts/instrument-serif-400-latin.woff2') format('woff2');
		}

		/* Instrument Serif - Italic 400 */
		@font-face {
		  font-family: 'Instrument Serif';
		  font-style: italic;
		  font-weight: 400;
		  font-display: swap;
		  src: url('../fonts/instrument-serif-400-italic-latin.woff2') format('woff2');
		}

		/* Inter - Variable (Cubre pesos 300-700) */
		@font-face {
		  font-family: 'Inter';
		  font-style: normal;
		  font-weight: 300 700;
		  font-display: swap;
		  src: url('../fonts/inter-variable-latin.woff2') format('woff2');
		}

		/* Space Grotesk - Variable (Cubre pesos 400-700) */
		@font-face {
		  font-family: 'Space Grotesk';
		  font-style: normal;
		  font-weight: 400 700;
		  font-display: swap;
		  src: url('../fonts/space-grotesk-variable-latin.woff2') format('woff2');
		}  
  
  /* ═══════════════════════════════════════════════════════════════
     SISTEMA DE DISEÑO
     ═══════════════════════════════════════════════════════════════ */
  :root {
    /* PALETA LIGHT - Basada en KV Formula Vida */
    --teal:      #00C2CB;
    --teal-d:    #009EA6;
    --teal-l:    #46DDE4;
    --teal-soft: rgba(0, 194, 203, 0.1);
    
    /* Inversión de tonos */
    --black:     #050608;     /* Ahora para textos principales */
    --ink:       #F2F4F7;     /* Fondo general (Gris muy claro/Off-white) */
    --dark:      #E4E7EB;     /* Fondos de paneles sutiles */
    --surf:      #FFFFFF;     /* Tarjetas y contenedores (Blanco puro) */
    --surf-2:    #F9FAFB;     /* Variación de fondo */
    
    /* Líneas y bordes (ahora oscuros pero muy sutiles) */
    --line:      rgba(0, 0, 0, 0.06);
    --line-2:    rgba(0, 0, 0, 0.12);
    
    /* Textos */
    --white:     #050608;     /* Inversión: el nombre "white" ahora es el color oscuro */
    --gray:      #667085;     /* Gris para subtítulos */
    --gray-l:    #475467;     /* Gris más legible en fondo claro */
    --active:    var(--teal);
	
	--error:     #E04F5F;
    --error-bg:  rgba(224, 79, 95, 0.05); /* Fondo sutil para inputs inválidos */

    /* Tipografías (Se mantienen igual) */
    --f-display: 'Bebas Neue', sans-serif;
    --f-italic:  'Instrument Serif', Georgia, serif;
    --f-ui:      'Space Grotesk', system-ui, sans-serif;
    --f-body:    'Inter', system-ui, sans-serif;

    --row-h: 78px;
    --hero-pad-top: 15px;
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-slot:   cubic-bezier(0.12, 0, 0.1, 1);
}
  @media (min-height:840px){ :root{ --row-h: 88px; } }
  @media (max-height:720px){ :root{ --row-h: 70px; --hero-pad-top: 84px; } }
  
  html {
    scroll-padding-top: 0; /* Lo manejaremos todo por JS para que sea exacto */
}
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{
    margin:0;
    font-family:var(--f-body);
    color:var(--black); /* Cambiado de var(--white) a var(--black) para legibilidad en claro */
    background:var(--ink);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
  }
  /* GRANO sutil global — atmosphere (Ajustado para fondo claro) */
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:60;
    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.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity:.5;mix-blend-mode:multiply; /* Ajustado modo de mezcla para que oscurezca sutilmente */
  }

  img,svg,video{max-width:100%;display:block}
  button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
  a{color:inherit;text-decoration:none}
  input,select,textarea{font:inherit;color:inherit}

  ::selection{background:var(--teal);color:#FFFFFF} /* Texto blanco sobre selección teal */
  
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:var(--ink)}
  ::-webkit-scrollbar-thumb{background:var(--dark);border-radius:10px} /* Usamos var(--dark) para que contraste con el fondo claro */
  ::-webkit-scrollbar-thumb:hover{background:var(--teal-d)}

  .container{width:min(1280px,92%);margin:0 auto}
  .bebas{font-family:var(--f-display);letter-spacing:.005em;line-height:.92}
  .italic-serif{font-family:var(--f-italic);font-style:italic;font-weight:400;letter-spacing:-.01em}
  .ui{font-family:var(--f-ui)}
  .hl{color:var(--teal);font-style:normal}

  /* fade-in al hacer scroll */
  .fade-in{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-spring),transform .9s var(--ease-spring)}
  .fade-in.visible{opacity:1;transform:translateY(0)}

  /* Stagger reveal en el hero al cargar */
  @keyframes reveal{
    from{opacity:0;transform:translateY(20px)}
    to  {opacity:1;transform:translateY(0)}
  }
  .reveal{opacity:0;animation:reveal 1s var(--ease-spring) forwards}
  .reveal.d1{animation-delay:.1s}
  .reveal.d2{animation-delay:.25s}
  .reveal.d3{animation-delay:.4s}
  .reveal.d4{animation-delay:.55s}
  .reveal.d5{animation-delay:.7s}
  .reveal.d6{animation-delay:.85s}

  /* ═══════════════════════════════════════════════════════════════
     NAV
     ═══════════════════════════════════════════════════════════════ */
  .nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    padding: 15px 4% 0 4%;
    transition: background .35s ease, padding .35s ease;
    display: flex;
    justify-content: center; /* Centramos el contenedor interno */
  }
  .nav-container {
    width: 100%;
    max-width: 1320px; /* Misma medida que tu .machine para consistencia */
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav.solid{
    background:rgba(255,255,255,0.85); /* Cambiado a blanco translúcido */
    backdrop-filter:blur(20px) saturate(140%);
    -webkit-backdrop-filter:blur(20px) saturate(140%);
    border-bottom-color:var(--line-2); /* Usando la variable de línea oscura sutil */
	border-bottom: 1px solid var(--line-2);
    padding:12px 4%;
  }
  .brand{display:flex;align-items:center;gap:8px;flex-direction: column;}
  .brand-iso{width:36px;height:36px;color:var(--teal);transition:transform .4s var(--ease-spring)}
  .brand:hover .brand-iso{transform:rotate(-6deg) scale(1.05)}
  .brand-text{font-family:var(--f-ui);font-size:.78rem;font-weight:600;line-height:1.1;letter-spacing:.02em;color:var(--black);}
  .brand-text small{display:block;font-weight:400;color:var(--gray-l);font-size:.7rem;letter-spacing:.04em;margin-top:2px;font-style:italic;font-family:var(--f-italic)}
  .brand img {
    height: 42px; /* Altura ideal de escritorio para el logo institucional */
    width: auto;  /* Mantiene la proporción perfecta del ancho */
    display: block;
}
  .nav-links{display:flex;align-items:center;gap:28px}
  .nav-links a{
    font-family:var(--f-ui);font-size:.84rem;font-weight:500;color:var(--black);opacity:.78; /* Texto oscuro */
    position:relative;padding:4px 0;
    transition:opacity .2s,color .2s;
  }
  .nav-links a::after{
    content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
    background:var(--teal);transition:right .35s var(--ease-spring);
  }
  .nav-links a:hover{opacity:1;color:var(--teal)}
  .nav-links a:hover::after{right:0}

  .nav-cta{
    font-family:var(--f-ui);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    padding:11px 22px;border:1.5px solid var(--teal);border-radius:999px;color:var(--teal);
    transition:background .2s,color .2s,transform .2s,box-shadow .25s;
    position:relative;
  }
  .nav-cta:hover{background:var(--teal);color:#FFFFFF;transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,194,203,.35)} /* Color de texto blanco en hover para contraste con el fondo teal */

  @media (max-width:920px){
    .nav-links{display:none}
    .nav{padding:12px 4%}
	.nav-container {
        gap: 10px; /* Espacio mínimo entre logo y botón */
    }
	.brand-iso {
        width: 30px; /* Bajamos de 36px */
        height: 30px;
    }
	.brand-text {
        font-size: 0.7rem; /* Texto un poco más compacto */
    }
	.nav-cta {
        padding: 10px 14px; /* Reducimos el padding lateral de 22px a 14px */
        font-size: 0.72rem; /* Bajamos un poco el tamaño de fuente */
        letter-spacing: 0.04em; /* Reducimos el espaciado entre letras */
        white-space: nowrap; /* FUERZA a que el texto se mantenga en una sola línea */
        flex-shrink: 0; /* Evita que el botón se aplaste */
    }
  }

		@media (max-width: 360px) {
  /* Controlamos el tamaño de la imagen para que quepa en pantallas mini */
  .brand img {
    height: 32px;
  }
  
  .brand-text small {
    display: none; /* Mantenemos oculto el eslogan pequeño */
  }

  .nav-container {
    gap: 6px; /* Reducimos el espacio entre los dos elementos al mínimo */
  }

  /* Reducimos el tamaño del botón para liberar espacio horizontal */
  .nav-cta {
    padding: 8px 10px; /* Reducimos levemente el padding lateral */
    font-size: 0.65rem; /* Un punto menos para ganar aire */
    letter-spacing: 0.02em;
  }
}


  /* ═══════════════════════════════════════════════════════════════
     HERO — La Máquina de Fórmulas
     ═══════════════════════════════════════════════════════════════ */
 .hero{
    position:relative;min-height:100vh;min-height:100svh;
    background:var(--ink);
    padding:var(--hero-pad-top) 4% 40px;
    overflow:hidden;
    isolation:isolate;
    display:flex;flex-direction:column;
  }
  /* ambient gradients — ajustados para fondo claro */
  .hero::before{
    content:"";position:absolute;inset:0;z-index:-2;
    background:
      radial-gradient(ellipse 80% 50% at 100% 0%,rgba(0,194,203,.12),transparent 60%),
      radial-gradient(ellipse 50% 40% at 0% 100%,rgba(0,194,203,.06),transparent 60%);
    pointer-events:none;
  }
  /* Wiener W brutalist — flota detrás */
  .hero-w {
    position: absolute;
    top: 0;
    right: 0;
    /* Ajustamos el tamaño basándonos en la proporción original (aprox 1:2) */
    width: 320px; 
    height: 600px;
    
    /* DESVANECIDO: Bajamos opacidad y usamos filtros */
    opacity: 0.07; /* Muy sutil, casi marca de agua */
    filter: saturate(0.5) brightness(1.2); 
    
    z-index: -1;
    pointer-events: none;
    object-fit: cover;
    object-position: top right;
    
    /* Mantenemos tu animación pero más suave */
    animation: slowFloat 25s ease-in-out infinite;
}
  @keyframes slowFloat {
    0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
    50% { transform: translateY(15px) translateX(-10px) rotate(2deg); }
}
  /* Grid pattern — Invertido a oscuro sutil */
  .hero-grid{
    display:none;
  }

  .hero-head{
    position:relative;text-align:center;max-width:920px;margin:0 auto 32px;
  }
  .hero-eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--f-ui);font-size:.72rem;font-weight:600;
    color:var(--teal);text-transform:uppercase;letter-spacing:.22em;
    margin-bottom:14px;
    padding:5px 13px;border:1px solid rgba(0,194,203,.3);border-radius:999px;
    background:var(--teal-soft);
  }
  .hero-eyebrow::before{
    content:"";width:7px;height:7px;border-radius:50%;background:var(--teal);
    box-shadow:0 0 14px var(--teal);
    animation:pulse 2s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{opacity:1;box-shadow:0 0 14px var(--teal)}
    50%{opacity:.6;box-shadow:0 0 4px var(--teal)}
  }
  .hero-title{
    font-family:var(--f-display);
    font-size:clamp(1rem,5vw,4rem);
    color:var(--black); /* Inversión: de blanco a negro */
    margin:0 0 14px;
    line-height:.92;
  }
  .hero-title em{
    font-family:var(--f-italic);font-style:italic;font-weight:400;
    color:var(--teal);
    margin-left:.05em;
  }
  .hero-sub{
    font-family:var(--f-body);font-size:clamp(.80rem,1vw,0.90rem);
    color:var(--gray-l);max-width:660px;margin:0 auto;line-height:1.5;
  }
  .hero-sub em{font-family:var(--f-italic);font-style:italic;font-weight:400;color:var(--black)} /* Em en negro para resaltar */

/* ─── 3 paneles del hero ─────────────────────── */
  .machine {
    display: grid;
    grid-template-columns: 350px 1fr; 
    grid-template-areas: 'input fmachine';
    gap: 32px;
    align-items: start;
    max-width: 1320px;
    margin: 0 auto;
	position: relative;
  }
  
  /* Forzamos que si la máquina terminó, el botón sea visible sí o sí */
  .machine.is-resolved #result-cta {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: all !important;
    display: inline-flex !important;
  }

  .machine > .panel-input  { grid-area: input;    }
  .machine > .fmachine     { grid-area: fmachine; }
  .machine > .result-panel { grid-area: result;   }

  .machine .fmtitulo{
    font-family:var(--f-ui);font-size:.66rem;font-weight:700;
    color:var(--teal);text-transform:uppercase;letter-spacing:.22em;
    margin-bottom:10px;
  }

  .machine .indintereses {
    color: var(--gray-l); /* Mantenemos el gris para texto secundario */
  }
#inscripcion {
    /* Ajusta este valor a la altura exacta de tu menú (aprox. 85px según tus capturas) */
    scroll-margin-top: 65px; 
}
  @media (max-width:1100px){
    .machine {
        grid-template-columns: 1fr;
        grid-template-areas:
            'input'      /* 1. El usuario elige primero */
            'fmachine'   /* 2. La máquina procesa en el centro */
            'result';    /* 3. El resultado y el CTA aparecen debajo */
        gap: 20px;       /* Un poco más de aire entre bloques en móvil */
    }

    /* Opcional: Ajuste de padding para que no quede tan pegado en pantallas pequeñas */
    .hero {
        padding: 100px 16px 40px !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
	#fmachine, #inscripcion {
        scroll-margin-top: 65px; 
    }
	.input-tiles {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px; /* Un poquito de separación para que respiren */
  }
  }

  /* PANEL INPUT */
  .panel{
    background:linear-gradient(180deg, var(--surf) 0%, var(--surf-2) 100%); /* Ajustado a degradado claro */
    border:1px solid var(--line);
    border-radius:18px;
    padding:20px;
    position:relative;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    transition:border-color .3s ease;
  }
  .panel::before{
    content:"";position:absolute;inset:0;border-radius:18px;
    background:linear-gradient(135deg,rgba(0,194,203,.05),transparent 40%); /* Opacidad de acento reducida para fondo claro */
    pointer-events:none;
  }
  .panel-label{
    font-family:var(--f-ui);font-size:.66rem;font-weight:700;
    color:var(--teal);text-transform:uppercase;letter-spacing:.22em;
    margin-bottom:10px;
  }
  .panel-title {
    font-family: var(--f-display);
    font-size: 1.8rem; /* Aumentado de 1.5rem */
    color: var(--black);
    margin: 0 0 20px; /* Más aire abajo */
    line-height: 1.1;
    letter-spacing: -0.01em; /* Un toque más brutalista */
  }

  /* ─── INPUT — secciones por eje ────────────── */
  .tile-section{margin-bottom:14px}
  .tile-section:last-of-type{margin-bottom:14px}
  .tile-section-label{
    display:flex;align-items:center;gap:8px;
    font-family:var(--f-ui);font-size:.6rem;font-weight:700;
    color:var(--gray-l);text-transform:uppercase;letter-spacing:.22em;
    margin-bottom:8px;
  }
  .tile-section-label::before{
    content:"";width:8px;height:1px;background:var(--teal);flex-shrink:0;
  }
  .tile-section-label::after{
    content:"";flex:1;height:1px;background:var(--line);
  }

  .input-tiles{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:6px;
  }
  .tile{
    --tile-bg: var(--surf-2); /* Fondo sutil para destacar sobre el panel */
    --tile-border: var(--line-2); /* Bordes más definidos para modo claro */
    --tile-fg: var(--gray-l);
    --tile-accent: var(--teal);
    display:flex;flex-direction:row;align-items:center;gap:12px;
    padding: 10px 12px;
    background:var(--tile-bg);
    border:1px solid var(--tile-border);
    border-radius:10px;
    color:var(--tile-fg);
    text-align:left;cursor:pointer;
    position:relative;overflow:hidden;
    transition:background .25s ease,border-color .25s ease,transform .2s var(--ease-spring),color .2s ease;
  }
  /* corner chamfer — referencia brutalist */
  .tile::after{
    content:"";position:absolute;top:0;right:0;
    width:10px;height:10px;
    background:linear-gradient(225deg,transparent 50%,var(--tile-border) 50%,var(--tile-border) 60%,transparent 60%);
    transition:background .25s ease;
  }
  /* LED indicator top-right */
  .tile::before{
    content:"";position:absolute;top:8px;right:8px;
    width:5px;height:5px;border-radius:50%;
    background:var(--gray);opacity:.4;
    transition:background .2s,box-shadow .2s,opacity .2s;
    z-index:1;
  }
  .tile:hover{
    --tile-border:rgba(0,194,203,.4);
    --tile-fg:var(--black); /* Cambiado a black para legibilidad */
    background:var(--teal-soft);
    transform:translateY(-2px);
  }
  .tile:hover::before{background:var(--teal);opacity:.6}

  .tile.is-active{
    --tile-bg: var(--teal-soft); /* Usando la variable del root */
    --tile-border: var(--teal);
    --tile-fg: var(--black); /* Texto oscuro en estado activo */
    box-shadow: 0 0 0 1px var(--teal),0 8px 22px rgba(0,194,203,.15); /* Sombra más sutil */
  }
  .tile.is-active::before{
    background:var(--teal);opacity:1;
    box-shadow:0 0 8px var(--teal),0 0 14px rgba(0,194,203,.4);
    animation:pulse 2s ease-in-out infinite;
  }
  .tile.is-active::after{background:linear-gradient(225deg,transparent 50%,var(--teal) 50%,var(--teal) 60%,transparent 60%)}

  .tile-icon{
    width:22px;height:22px;color:var(--tile-accent);
    flex-shrink:0;
    transition:transform .3s var(--ease-spring);
  }
  .tile.is-active .tile-icon{transform:scale(1.1) rotate(-4deg)}

  .tile-label {
    font-family: var(--f-ui);
    font-size: 0.82rem; /* Aumentado de 0.74rem */
    font-weight: 700; /* Más peso para leer mejor en fondos claros */
    line-height: 1.2;
    color: inherit;
  }

  /* Hint para que el usuario sepa que puede combinar */
  .input-hint{
    font-family:var(--f-italic);font-style:italic;
    font-size:.72rem;color:var(--gray);
    margin:0 0 10px;line-height:1.4;
    display:flex;align-items:center;gap:8px;
  }
  .input-hint::before{
    content:"";width:14px;height:1px;background:var(--teal);flex-shrink:0;
  }
  .input-counter{
    color:var(--teal);font-style:normal;font-family:var(--f-ui);font-weight:600;
    font-variant-numeric:tabular-nums;
  }

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    width:100%;padding:13px 18px;
    font-family:var(--f-ui);font-size:.76rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.12em;
    border-radius:999px;cursor:pointer;
    transition:transform .2s var(--ease-spring),background .2s,color .2s,box-shadow .25s,border-color .2s;
    position:relative;overflow:hidden;
  }
  .btn-primary{
    background:var(--teal);
    color:#FFFFFF; /* Blanco puro para máxima legibilidad sobre teal */
    box-shadow:0 10px 30px rgba(0,194,203,.2);
  }
  .panel-input .btn-primary {
    padding: 16px 20px; /* Más alto */
    font-size: 0.85rem; /* Un poco más grande */
    box-shadow: 0 10px 25px rgba(0, 194, 203, 0.25);
    margin-top: 10px;
  }
  .btn-primary::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);
    transform:translateX(-100%);transition:transform .6s var(--ease-spring);
  }
  .btn-primary:hover{
    background:var(--teal-d); /* Usamos el tono dark de teal para el hover en modo claro */
    transform:translateY(-3px);
    box-shadow:0 16px 40px rgba(0,194,203,.3);
  }
  .btn-primary:hover::before{transform:translateX(100%)}
  .btn-primary:disabled{opacity:.5;cursor:wait;transform:none}
  
  .btn-ghost{
    background:transparent;
    color:var(--black);
    border:1.5px solid var(--line-2);
    margin-top:8px;
  }
  .btn-ghost:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px)}

  /* PANEL MÁQUINA */
.fmachine {
    display: flex;
    flex-direction: column;
    /* Cambiado de negro (#0F1012) a una variación de fondo claro */
    background: linear-gradient(180deg, var(--surf) 0%, var(--surf-2) 100%);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 32px; 
    position: relative;
    overflow: hidden;
}

.fmachine .result-panel:first-child div {
    font-family: var(--f-ui);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.fmachine .result-panel:first-child div::after {
    content: "";
    flex: 1;
    height: 1px;
    /* Ajustado para que el degradado de la línea sea visible en claro */
    background: linear-gradient(90deg, var(--line-2), transparent);
}

.result-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    
    background: var(--teal-soft); /* Uso de la variable light del root */
    border: 1.5px solid var(--teal) !important;
    color: var(--teal) !important;
    padding: 18px 32px !important;
    border-radius: 999px; /* Estilo píldora */
    margin-top: 32px;
    
    font-family: var(--f-ui);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-decoration: none;
    
    transition: all 0.3s var(--ease-spring) !important;
    opacity: 0;
    transform: translateY(15px);
    align-self: center; /* Lo centra y le quita el ancho total */
    width: fit-content;
}

/* Estado cuando la máquina termina */
.machine.is-resolved .result-cta {
    opacity: 1;
    transform: translateY(0);
}

.result-cta:hover {
    background: var(--teal);
    color: #FFFFFF !important; /* Blanco puro para contraste en hover */
    /* Sombra ajustada para modo claro (menos intensa) */
    box-shadow: 0 10px 30px rgba(0, 194, 203, 0.3);
    transform: translateY(-3px);
}
  /* glow concentric ring detrás — Ajustado para ser una sombra suave en Light Mode */
  .fmachine::before{
    content:"";position:absolute;left:50%;top:50%;
    width:120%;aspect-ratio:1;border-radius:50%;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle,rgba(0,194,203,.08),transparent 65%);
    pointer-events:none;
  }
  .fmachine::after{
    content:"";position:absolute;inset:0;border-radius:20px;
    background:linear-gradient(110deg,transparent 30%,rgba(0,194,203,.04) 50%,transparent 70%);
    pointer-events:none;
  }

  .fstrip{
    display:grid;grid-template-columns:140px 1fr;
    align-items:center;
    border-bottom:1px solid var(--line);
    position:relative;
  }
  .fstrip:last-child{border-bottom:0}

  .fstrip-label{
    font-family:var(--f-ui);
	font-size:.68rem;
	font-weight:800;
    color:var(--teal);
	text-transform:uppercase;
	letter-spacing:0.18em;
    padding-right:14px;
    border-right:1px solid var(--line);
    height:var(--row-h);
    display:flex;align-items:center;
  }
  .fstrip-label::before{
    content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
    background:var(--teal);margin-right:10px;flex-shrink:0;
    box-shadow:0 0 8px var(--teal); /* Mantenemos el punto brillante como indicador activo */
  }

  .fstrip-window{
    height:var(--row-h);
    overflow:hidden;
    position:relative;
    transition:filter .35s ease;
    /* clip diagonal sutil — ref. brutalist W */
    clip-path:polygon(1.5% 0,100% 0,98.5% 100%,0 100%);
  }
  @media (max-width:600px){
    .fstrip-window{clip-path:none}
  }
  .fstrip-window::before,
  .fstrip-window::after{
    content:"";position:absolute;left:0;right:0;height:28px;z-index:2;pointer-events:none;
  }
  /* Degradados de desvanecimiento ajustados al fondo claro */
  .fstrip-window::before{top:0;background:linear-gradient(180deg,var(--surf),transparent)}
  .fstrip-window::after{bottom:0;background:linear-gradient(0deg,var(--surf-2),transparent)}

  .fstrip-column{
    display:flex;flex-direction:column;
    will-change:transform;
  }
  .fstrip-item{
    height:var(--row-h);
    display:flex;align-items:center;
    padding:0 1.4rem;
    flex-shrink:0;
    font-family:var(--f-display);
    font-size:clamp(1.4rem,3.2vw,2.8rem);
    line-height:1;color:var(--black); /* Cambiado de var(--white) a var(--black) */
    white-space:nowrap;
    letter-spacing:.005em;
  }
  .fstrip--c .fstrip-item:last-child{
    color:var(--teal); /* Color activo */
    text-shadow:0 0 20px rgba(0,194,203,.2); /* Resplandor suavizado para modo claro */
  }
  .fstrip.is-spinning .fstrip-window{filter:blur(1.4px)}

  /* PANEL RESULTADO */
  .result-panel{
    display:flex;flex-direction:column;
    /* Ajustado a degradado claro */
    background:linear-gradient(180deg,var(--surf) 0%,var(--dark) 100%);
    border:1px solid var(--line);
    border-radius:18px;
    padding:20px;
    position:relative;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
	margin-top: 24px; /* Separa el bloque del resultado de la máquina de arriba */
    box-shadow: 0 10px 40px rgba(0,0,0,0.03); /* Sombra muy sutil para dar profundidad */
  }
  .result-quote{
    font-family:var(--f-display);font-size:1.35rem;line-height:1.18;
    color:var(--black);margin:0 0 12px;
    min-height:3em;
    letter-spacing:.005em;
  }
  .result-quote em{
    font-family:var(--f-italic);font-style:italic;font-weight:400;
    color:var(--teal);letter-spacing:-.01em;
  }
  .result-why {
    font-family: var(--f-ui);
    color: var(--teal);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-top: 30px;
    margin-bottom: 15px;
    display: block;
}
  .result-desc {
    font-family: var(--f-body); /* Inter */
    font-size: 1rem;
    color: var(--gray-l);
    line-height: 1.6;
    margin-bottom: 15px;
}
  .machine.is-resolved .result-cta{opacity:1;transform:translateY(0)}
  
  /* Ajuste de hover para el enlace de resultado */
  .result-cta:hover{gap:16px;} 
  
  .result-cta::after{
    content:"→";display:inline-block;transition:transform .25s var(--ease-spring);
  }
  .result-cta:hover::after{transform:translateX(4px)}

  .result-empty{font-size:.85rem;color:var(--gray);font-style:italic;font-family:var(--f-italic)}
  .machine.is-resolved .result-empty{display:none}

  /* Social proof — banda separada */
  .proof-bar{
    display:flex;justify-content:center;align-items:stretch;gap:0;
    flex-wrap:wrap;
    width:100%;margin:0;
    padding:0 4%;
    background:var(--ink);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  }
  .proof-bar > div{
    text-align:center;flex:1;min-width:140px;
    padding:18px 16px;
    border-right:1px solid var(--line);
    transition:background .3s;
  }
  .proof-bar > div:last-child{border-right:0}
  .proof-bar > div:hover{background:var(--surf)} /* Fondo blanco al hover en la barra */
  
  .proof-bar strong{
    font-family:var(--f-display);font-size:2.2rem;color:var(--black);
    display:block;line-height:1;letter-spacing:.005em;
  }
  .proof-bar strong em{
    font-family:var(--f-italic);font-style:italic;color:var(--teal);font-weight:400;
  }
  .proof-bar span{
    font-family:var(--f-ui);font-size:.66rem;font-weight:500;
    color:var(--gray-l);text-transform:uppercase;letter-spacing:.18em;
    display:block;margin-top:5px;
  }

  /* ═══════════════════════════════════════════════════════════════
     TICKER de carreras — entre hero y manifiesto
     ═══════════════════════════════════════════════════════════════ */
  .ticker{
    background:var(--ink);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    overflow:hidden;
    padding:18px 0;
    position:relative;
  }
  .ticker-track{
    display:flex;gap:48px;
    animation:tickerScroll 60s linear infinite;
    width:max-content;
  }
  .ticker-item{
    font-family:var(--f-display);font-size:1.4rem;
    color:var(--gray-l);letter-spacing:.04em;
    white-space:nowrap;
    display:flex;align-items:center;gap:48px;
  }
  .ticker-item::after{
    content:"✦";color:var(--teal);font-size:1rem;
  }
  @keyframes tickerScroll{
    from{transform:translateX(0)}
    to  {transform:translateX(-50%)}
  }
  
   /* --- Manifiesto --- */
  .manifest{
    background:var(--ink);padding:50px 4%;
    position:relative;overflow:hidden;
  }
  .manifest::before{
    content:"";position:absolute;left:50%;top:0;
    width:1px;height:80px;
    background:linear-gradient(180deg,var(--teal),transparent);
    transform:translateX(-50%);
  }
  .manifest-inner{max-width:760px;margin:0 auto;text-align:center;position:relative}
  .manifest-eyebrow{
    font-family:var(--f-ui);font-size:.74rem;font-weight:600;
    color:var(--teal);text-transform:uppercase;letter-spacing:.22em;margin-bottom:22px;
  }
  .manifest h2{
    font-family:var(--f-display);font-size:clamp(2.6rem,5.5vw,5rem);
    color:var(--black); /* Cambiado de var(--white) a var(--black) */
    margin:0 0 40px;line-height:.95;
  }
  .manifest h2 em{
    font-family:var(--f-italic);font-style:italic;font-weight:400;
    color:var(--teal);
  }
  .manifest p{
    font-size:1.08rem;color:var(--gray-l);margin:0 0 24px;line-height:1.65;
  }
  .manifest p strong{color:var(--black);font-weight:600} /* Cambiado a var(--black) */
  .manifest p em{font-family:var(--f-italic);font-style:italic;color:var(--black);font-weight:400}
  .manifest .closing{
    font-family:var(--f-display);font-size:clamp(1.8rem,3.4vw,2.8rem);
    color:var(--black); /* Cambiado a var(--black) */
    margin-top:48px;line-height:1.05;
    padding-top:40px;border-top:1px solid var(--line);
    max-width:560px;margin-left:auto;margin-right:auto;
  }
  .manifest .closing em{
    font-family:var(--f-italic);font-style:italic;font-weight:400;color:var(--teal);
  }

  /* ═══════════════════════════════════════════════════════════════
     VIDEO
     ═══════════════════════════════════════════════════════════════ */
  .video-section {
  background: #daf7f7;/*linear-gradient(180deg, var(--ink) 0%, var(--dark) 100%)*/
  padding: 50px 4% 50px 4%;
  text-align: center;
  position: relative;
}

.video-eyebrow {
  font-family: var(--f-ui);
  font-size: .74rem;
  font-weight: 600;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: .22em;
  margin-bottom: 18px;
  transition: opacity .4s ease;
}

.video-section h2 {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  margin: 0 0 44px;
  color: var(--black);
  line-height: 1;
  transition: opacity .4s ease;
}

.video-section h2 em {
  font-family: var(--f-italic);
  font-style: italic;
  color: var(--teal);
  font-weight: 400;
}

.video-frame {
  aspect-ratio: 16/9;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .4s var(--ease-spring), box-shadow .4s ease;
}

.video-frame:hover {
  transform: scale(1.01);
  box-shadow: 0 30px 80px rgba(0, 194, 203, .15);
}

.video-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0, 194, 203, .12), transparent 60%),
    linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .1) 100%);
  z-index: 1;
  transition: opacity .4s ease;
}

.play-btn {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--teal);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s var(--ease-spring), box-shadow .3s, opacity .4s ease;
  box-shadow: 0 10px 40px rgba(0, 194, 203, .3);
  position: relative;
  z-index: 2;
}

.play-btn::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 194, 203, .3);
  animation: pulseRing 2.4s ease-out infinite;
}

@keyframes pulseRing {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

.video-frame:hover .play-btn { transform: scale(1.08); }

.play-btn::after {
  content: "";
  display: block;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent #FFFFFF;
  margin-left: 5px;
}

/* --- ESTILOS DE REPRODUCCIÓN DINÁMICA --- */

#video-container {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none; /* Se activa con la clase .is-playing */
  background: #000;
}

#video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Ocultar elementos visuales al reproducir */
.video-frame.is-playing #video-container { display: block; }
.video-frame.is-playing .play-btn, 
.video-frame.is-playing::before { opacity: 0; pointer-events: none; }

  /* ═══════════════════════════════════════════════════════════════
     IA NORBERT WIENER
     ═══════════════════════════════════════════════════════════════ */
  .ia{
    background:var(--teal);color:#FFFFFF;padding:50px 4%; /* Color de texto blanco sobre fondo teal */
    position:relative;overflow:hidden;
  }
  .ia::before{
    content:"";position:absolute;left:-200px;bottom:-200px;width:580px;height:580px;
    background:rgba(0,0,0,.04);border-radius:50%;
  }
  .ia::after{
    content:"";position:absolute;right:-100px;top:-100px;width:300px;height:300px;
    background:rgba(255,255,255,.12);border-radius:50%;
  }
  .ia-inner{max-width:960px;margin:0 auto;position:relative;z-index:1}
  .ia-eyebrow{
    font-family:var(--f-ui);font-size:.74rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.22em;margin-bottom:18px;
    color: rgba(255,255,255,0.9);
  }
  .ia h2{
    font-family:var(--f-display);font-size:clamp(2.4rem,5vw,4.2rem);
    margin:0 0 14px;color:#FFFFFF;line-height:.95;
  }
  .ia h2 em{
    font-family:var(--f-italic);font-style:italic;font-weight:400;color:#FFFFFF;
    text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px;
  }
  .ia-sub{font-size:1rem;margin:0 0 40px;opacity:.92;max-width:480px;color:#FFFFFF}
  .ia-sub em{font-family:var(--f-italic);font-style:italic}

  .chat-card{
    background:var(--surf);color:var(--black);
    border-radius:20px;padding:28px;
    /* Sombra más suave y natural para fondo claro */
    box-shadow:0 30px 60px rgba(0,0,0,0.08), 0 0 0 1px var(--line);
  }
  .chat-card-head{
    display:flex;align-items:center;gap:12px;
    padding-bottom:18px;margin-bottom:18px;
    border-bottom:1px solid var(--line);
  }
  .chat-avatar{
    width:36px;height:36px;border-radius:50%;
    background:var(--teal);color:#FFFFFF;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }
  .chat-avatar svg{width:22px;height:22px}
  .chat-meta{font-size:.85rem}
  .chat-meta strong{display:block;font-family:var(--f-ui);font-weight:700;color:var(--black)}
  .chat-meta span{color:var(--gray);font-size:.75rem;font-family:var(--f-italic);font-style:italic}
  .chat-meta .live-dot{
    display:inline-block;width:7px;height:7px;border-radius:50%;background:#22C55E; /* Verde más vibrante para modo claro */
    margin-right:6px;box-shadow:0 0 6px rgba(34,197,94,0.4);
    animation:pulse 2s ease-in-out infinite;
  }

  .chat-body{
    height:340px;overflow-y:auto;
    display:flex;flex-direction:column;gap:14px;
    padding:8px 4px 16px;
    scrollbar-width:thin;
  }
  .msg{display:flex;max-width:84%;animation:msgIn .35s var(--ease-spring)}
  @keyframes msgIn{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:translateY(0)}
  }
  .msg.user{align-self:flex-end}
  .msg.bot{align-self:flex-start}
  .msg-bubble{
    padding:13px 16px;border-radius:16px;
    font-size:.93rem;line-height:1.5;
  }
  .msg.bot .msg-bubble{background:var(--surf-2);color:var(--black);border-bottom-left-radius:4px;border:1px solid var(--line)}
  .msg.user .msg-bubble{background:var(--teal);color:#FFFFFF;border-bottom-right-radius:4px;font-weight:500}

  .chat-suggestions{
    display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px;
  }
  .suggestion-btn{
    font-family:var(--f-ui);font-size:.76rem;font-weight:500;
    padding:8px 14px;border:1px solid var(--line-2);border-radius:999px;
    color:var(--gray-l);transition:all .2s;
    background:transparent;
  }
  .suggestion-btn:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-soft);transform:translateY(-1px)}

  .chat-input-row{display:flex;gap:8px}
  .chat-input{
    flex:1;padding:13px 16px;
    background:var(--surf-2);border:1px solid var(--line);border-radius:14px;
    color:var(--black);font-size:.93rem;
    transition:border-color .2s,background .2s;
  }
  .chat-input:focus{outline:none;border-color:var(--teal);background:var(--surf)}
  .chat-send{
    padding:13px 20px;background:var(--teal);color:#FFFFFF;
    border-radius:14px;font-family:var(--f-ui);font-weight:700;font-size:.82rem;
    text-transform:uppercase;letter-spacing:.05em;
    transition:transform .15s,background .2s;
    border:none;cursor:pointer;
  }
  .chat-send:hover{background:var(--teal-d);transform:translateY(-1px)}
@media (max-width: 576px) {
    /* Cambiamos el flujo de horizontal a vertical */
    .chat-input-row {
        flex-direction: column;
        gap: 10px; /* Separación limpia entre el input y el botón */
    }

    .chat-input {
        width: 100%; /* Forzamos a que tome todo el ancho */
        box-sizing: border-box;
        padding: 12px 14px; /* Ajuste sutil de padding */
        font-size: 0.88rem; /* Tamaño óptimo para legibilidad móvil */
    }

    .chat-send {
        width: auto;               /* Rompe el 100% para que no ocupe toda la fila */
        min-width: 160px;          /* Le da un ancho mínimo consistente para que sea fácil de presionar */
        max-width: 80%;            /* Evita que por algún motivo se desborde */
        margin: 4px auto 0;        /* El 'auto' a los lados lo centra perfectamente en la segunda fila */
        display: inline-block;     /* Permite que herede los márgenes automáticos y respete el ancho de su contenido */
        padding: 12px 24px;        /* Un padding balanceado: cómodo pero estilizado */
        font-size: 0.85rem;
        text-align: center;
    }
}
  /* ═══════════════════════════════════════════════════════════════
     FORMULARIO
     ═══════════════════════════════════════════════════════════════ */
  .form-section{
    /* Inversión: de gris suave a fondo general claro */
    background:linear-gradient(180deg, var(--dark) 0%, var(--ink) 100%);
    padding:50px 4%;position:relative;
  }
  .form-inner{max-width:600px;margin:0 auto;position:relative}
  .form-eyebrow{
    font-family:var(--f-ui);font-size:.74rem;font-weight:600;
    color:var(--teal);text-transform:uppercase;letter-spacing:.22em;margin-bottom:16px;
  }
  .form-section h2{
    font-family:var(--f-display);font-size:clamp(2.2rem,4.5vw,3.6rem);
    color:var(--black);margin:0 0 16px;line-height:1; /* Inversión a negro */
  }
  .form-section h2 em{font-family:var(--f-italic);font-style:italic;color:var(--teal);font-weight:400}
  .form-section p.lead{color:var(--gray-l);margin:0 0 40px;font-size:1.02rem}
  .form-section p.lead em{font-family:var(--f-italic);font-style:italic;color:var(--black)} /* Inversión a negro */

  .preload-toast{
    display:none;
    /* Ajustado para que destaque sobre el fondo claro */
    background:linear-gradient(135deg,rgba(0,194,203,.08),rgba(0,194,203,.03));
    border:1px solid rgba(0,194,203,.2);
    border-radius:14px;padding:16px 18px;
    font-size:.9rem;color:var(--gray-l);
    margin-bottom:28px;
    position:relative;
    backdrop-filter: blur(4px);
  }
  .preload-toast.show{display:block;animation:fadeUp .5s var(--ease-spring)}
  .preload-toast strong{color:var(--teal-d);font-weight:600} /* Teal un poco más oscuro para legibilidad */
  .preload-toast::before{
    content:"✓";position:absolute;left:-12px;top:-12px;
    width:26px;height:26px;border-radius:50%;
    background:var(--teal);color:#FFFFFF; /* Blanco para el check */
    display:flex;align-items:center;justify-content:center;
    font-weight:800;font-size:.85rem;
    box-shadow:0 4px 12px rgba(0,194,203,.2);
  }
  @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .form-grid .full{grid-column:1/-1}
  .form-grid input.error-field,
	.form-grid select.error-field {
	  border-color: #dc3545 !important;
	  background-color: #fff8f8 !important;
	}
  input.is-invalid, 
select.is-invalid {
    border-color: var(--error) !important;
    background-color: var(--error-bg) !important;
    outline: none;
}

/* El span de error real de tus maquetas (#error_nombres, #error_email, etc.) */
.field-hint[id^="error_"] {
    color: var(--error) !important;
    font-family: var(--f-ui); /* Space Grotesk le da un look técnico y limpio a las alertas */
    font-weight: 500; /* Le da cuerpo a un tamaño pequeño (.7rem) */
    font-style: normal; /* Al romper el italic de la guía base, el usuario entiende que es una acción requerida */
    margin-top: 6px;
    letter-spacing: -0.01em;
}
/* ==  ESTILO SENIOR PARA CAMPO INFORMATIVO (UNIDAD DE NEGOCIO) ==== */
#u_negocio {
    background: transparent !important; /* Le quita el fondo blanco de input */
    border: none !important;            /* Desaparece la caja por completo */
    border-bottom: 2px solid var(--teal-soft) !important; /* Línea base sutil con tu marca */
    border-radius: 0 !important;        /* Rompe los bordes redondeados de input */
    padding: 8px 0 !important;          /* Alinea el texto de manera más elegante */
    font-family: var(--f-ui) !important;/* Usa Space Grotesk para darle un look técnico */
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--black) !important;     /* Tu color oscuro principal */
    pointer-events: none;               /* Bloquea clicks, focus y evita que salga el cursor de texto (I-beam) */
    user-select: none;                  /* Evita que el usuario lo sombree por error en móviles */
    box-shadow: none !important;        /* Limpia cualquier sombra heredada */
}

/* Opcional: Si quieres darle un toque extra de feedback visual al contenedor padre */
#u_negocio::placeholder {
    color: var(--gray);
}
 @media (max-width:520px){.form-grid{grid-template-columns:1fr}}

  .field label{
    display:block;font-family:var(--f-ui);font-size:.7rem;font-weight:600;
    color:var(--gray-l);text-transform:uppercase;letter-spacing:.14em;margin-bottom:6px;
  }
  .field input,
  .field select{
    width:100%;padding:14px 14px;
    background:var(--surf);border:1px solid var(--line-2);border-radius:12px;
    color:var(--black);font-size:.95rem;
    transition:border-color .2s,background .2s,box-shadow .2s;
    background-color: var(--surf) !important;
    color-scheme: light; /* Ajustado para controles nativos en modo claro */
  }
  .field select option {
    background-color: var(--surf); 
    color: var(--black);
  }
  .field input:focus,
  .field select:focus{
    outline:none;border-color:var(--teal);background:var(--surf-2);
    box-shadow:0 0 0 3px rgba(0,194,203,.12);
  }
  .field select:not(:focus) {
    background-color: var(--surf);
  }
  .field input.error,
  .field select.error{border-color:#ff5b5b;background:rgba(255,91,91,.06)}
  .field-hint{font-size:.7rem;color:var(--gray);margin-top:5px;font-family:var(--f-italic);font-style:italic}

  .form-section .btn-primary {
  margin-top: 24px;
  width: fit-content;        /* Se adapta perfectamente al tamaño del texto */
  display: inline-flex;      /* Comportamiento idéntico al botón de resultados */
  align-items: center;
  justify-content: center;
  padding: 18px 32px;        /* Un padding generoso para mantener una buena zona de clic */
}

  .form-success{
    display:none;text-align:center;padding:60px 30px;
    background:linear-gradient(135deg,rgba(0,194,203,.08),rgba(0,194,203,.02));
    border:1px solid rgba(0,194,203,.2);border-radius:20px;
  }
  .form-success.show{display:block;animation:fadeUp .6s var(--ease-spring)}
  .form-success svg{width:72px;height:72px;margin:0 auto 18px;color:var(--teal)}
  .form-success h3{font-family:var(--f-display);font-size:2.4rem;margin:0 0 12px;color:var(--black)}
  .form-success h3 em{font-family:var(--f-italic);font-style:italic;color:var(--teal);font-weight:400}
  .form-success p{color:var(--gray-l);margin:0;line-height:1.6}

  /* Alineación del checkbox de privacidad */
  .field-checkbox {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px;
    margin-top: 10px;
  }

  .field-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--teal); /* Color del checkbox al marcarlo */
  }

  .field-checkbox label {
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
    cursor: pointer;
    color: var(--gray-l);
    text-transform: none; /* Quitamos uppercase para que sea legible en párrafos legales */
    letter-spacing: normal;
  }

  #lead-form .req {
    color: var(--teal-d);
  }

  /* Error visual para el checkbox si no se marca */
  .field-checkbox input.error {
    outline: 2px solid #ff4d4d;
    outline-offset: 2px;
  }
  .field-checkbox a {
    text-decoration: underline;
    color: var(--teal-d);
  }

/* radios formulario */
/* Contenedor principal: Control de flujo horizontal */
.modalidad-selector {
    display: flex;
    justify-content: center;
    gap: 8px; /* Espaciado optimizado para 5 elementos */
    margin-bottom: 35px;
    flex-wrap: nowrap; /* Fuerza una sola fila en desktop */
    overflow-x: auto; /* Permite scroll horizontal si la pantalla es muy pequeña */
    padding: 10px 5px;
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
}

/* Ocultar barra de scroll para mantener la limpieza UI */
.modalidad-selector::-webkit-scrollbar {
    display: none;
}

.mod-option {
    cursor: pointer;
    flex-shrink: 0; /* Evita que los botones se compriman */
}

.mod-option input {
    display: none;
}

/* ESTADO BASE / INACTIVO: 
   Ajustado para Light Mode con bordes sutiles y texto gris */
.mod-btn {
    display: block;
    padding: 10px 16px; 
    border: 2px solid var(--line-2); /* Borde gris sutil en lugar de color activo */
    border-radius: 50px;
    font-family: var(--f-display); /* Usando tu variable Bebas Neue */
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    transition: all 0.4s var(--ease-spring);
    color: var(--gray); /* Texto gris para estado inactivo */
    background: transparent;
    opacity: 0.6; 
    filter: grayscale(0.8); 
}

/* ESTADO ACTIVO: 
   Fondo Teal con texto claro para resaltar sobre el blanco */
.mod-option input:checked + .mod-btn {
    opacity: 1; 
    filter: grayscale(0);
    background: var(--active);
    border-color: var(--active);
    color: #FFFFFF; /* Texto blanco para legibilidad sobre teal */
    box-shadow: 0 8px 20px rgba(0, 194, 203, 0.2); /* Sombra suave */
    transform: scale(1.05);
}

/* Feedback al pasar el mouse sobre opciones inactivas */
.mod-btn:hover {
    opacity: 1;
    color: var(--teal);
    border-color: var(--teal);
    transform: translateY(-2px);
}

/* AJUSTES RESPONSIVOS */
@media (max-width: 800px) {
    .modalidad-selector {
        justify-content: flex-start; /* Alineación a la izquierda para el scroll */
        padding-left: 20px;
    }
}

@media (max-width: 520px) {
    .modalidad-selector {
        flex-wrap: wrap; /* En móviles muy pequeños permitimos 2 o 3 filas */
        justify-content: center;
        gap: 10px;
    }
    .mod-btn {
        padding: 8px 14px;
        font-size: 0.85rem;
    }
}

  /* ═══════════════════════════════════════════════════════════════
     FOOTER
     ═══════════════════════════════════════════════════════════════ */
  .footer{
    background:var(--ink);
    padding:50px 4% 30px;
    position:relative;
  } 
  .footer-grid{
    max-width:1280px;margin:0 auto;
    display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px;
    margin-bottom:48px;
  }
  @media (max-width:780px){.footer-grid{grid-template-columns:1fr;gap:32px}}
  .footer-brand{display:flex;align-items:flex-start;gap:14px}
  .footer-brand .brand-iso{width:46px;height:46px;color:var(--teal);flex-shrink:0}
  .footer-brand p{margin:0;color:var(--gray-l);font-size:.94rem;line-height:1.6}
  /* Inversión a var(--black) para el nombre de marca */
  .footer-brand strong{display:block;font-family:var(--f-ui);font-weight:700;color:var(--black);font-size:1.05rem;margin-bottom:6px}
  .footer-brand em{font-family:var(--f-italic);font-style:italic;color:var(--teal)}
  .footer h4{
    font-family:var(--f-ui);font-size:.74rem;font-weight:700;
    color:var(--teal);text-transform:uppercase;letter-spacing:.22em;margin:0 0 16px;
  }
  .footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
  .footer ul a{font-size:.92rem;color:var(--gray-l);transition:color .2s,padding-left .2s;text-decoration:none}
  .footer ul a:hover{color:var(--teal);padding-left:6px}
  .footer-bottom{
    max-width:1280px;margin:0 auto;
    padding-top:28px;border-top:1px solid var(--line);
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;
    font-size:.78rem;color:var(--gray);
  }
  .acred{display:flex;gap:10px;flex-wrap:wrap}
  .acred span{
    padding:5px 11px;
    border:1px solid var(--line-2); /* Borde un poco más visible en claro */
    border-radius:6px;
    font-family:var(--f-ui);
    font-size:.68rem;
    letter-spacing:.08em;
    color:var(--gray-l);
    font-weight:500;
    background:var(--surf);
  }

  /* ═══════════════════════════════════════════════════════════════
     RESPONSIVE — TABLET (1100 → 768)
     ═══════════════════════════════════════════════════════════════ */
  @media (max-width:1100px) and (min-width:769px){
    :root{ --row-h: 76px; }
    .machine{max-width:760px}
    .panel-input .input-tiles{grid-template-columns:repeat(4,1fr)}
    .tile-section{margin-bottom:12px}
    .panel-input .actions-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .panel-input .btn-ghost{margin-top:0}
  }
  
  /* ═══════════════════════════════════════════════════════════════
     RESPONSIVE — MOBILE
     Reordenamiento: máquina arriba · resultado · input compacto
     Input se vuelve chips horizontales scrolleables
     ═══════════════════════════════════════════════════════════════ */
 /* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (768px e inferiores)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:768px){
    :root{ --row-h: 64px; --hero-pad-top: 80px; }
    
    .hero{padding:var(--hero-pad-top) 4% 28px}
    /* La W decorativa ajustada para el fondo claro */
    .hero-w {
        width: 180px;  /* Más pequeña en móvil */
        height: 350px;
        right: -20px;
        top: 20px;
        opacity: 0.1;  /* Un poco más visible para que no desaparezca en pantallas pequeñas */
    }
    .hero-head{margin-bottom:18px}
    .hero-eyebrow{font-size:.65rem;padding:4px 11px;letter-spacing:.18em;margin-bottom:10px}
    .hero-title{font-size:clamp(2.4rem,11vw,3.8rem);margin-bottom:8px;color:var(--black)}
    .hero-sub{font-size:.92rem;max-width:none}
    .hero-sub br{display:none}

    .machine{gap:10px;max-width:none}

    .fmachine{
        padding:14px 16px;border-radius:14px;
        background: linear-gradient(180deg, var(--surf) 0%, var(--surf-2) 100%);
    }
    .fstrip{grid-template-columns:88px 1fr}
    .fstrip-label{padding-right:10px;font-size:.58rem;letter-spacing:.16em}
    .fstrip-label::before{width:5px;height:5px;margin-right:6px}
    .fstrip-item{padding:0 .9rem;font-size:1.2rem;color:var(--black)}

    /* PANEL RESULT compacto */
    .result-panel{
        padding:16px;border-radius:14px;
        background: var(--surf);
    }
    .result-quote{font-size:1.15rem;min-height:0;margin-bottom:8px;color:var(--black)}
    .result-why{font-size:.6rem;letter-spacing:.18em}
    .result-desc{font-size:.85rem;min-height:0;margin-bottom:12px}
    .result-cta{padding:10px 0;font-size:.7rem}

    /* PANEL INPUT — tiles 4 cols en mobile */
    .panel-input{
        padding:14px 14px 14px;border-radius:14px;
        background: var(--surf);
        border: 1px solid var(--line);
    }
    .panel-input .panel-label{margin-bottom:6px}
    .panel-input .panel-title{font-size:1.25rem;margin-bottom:8px;color:var(--black)}
    .input-hint{font-size:.66rem;margin-bottom:8px}

    .tile-section{margin-bottom:10px}
    .tile-section-label{font-size:.55rem;letter-spacing:.18em;margin-bottom:6px}

    .panel-input .input-tiles{
      grid-template-columns:repeat(4,1fr);
      gap:5px;
    }
    .tile{
      min-height:62px;padding:8px 7px;gap:5px;
      background: var(--surf-2);
      border-color: var(--line-2);
    }
    .tile-icon{width:18px;height:18px}
    .tile-label{font-size:.62rem;line-height:1.18;color:var(--gray-l)}
    .tile-label br{display:inline}

    /* Botones primarios en mobile: grid de 2 columnas */
    .panel-input .actions-row{
      display:grid;grid-template-columns:1.4fr 1fr;gap:8px;
    }
    .panel-input .actions-row .btn{padding:12px 14px;font-size:.7rem;letter-spacing:.08em}
    .panel-input .actions-row .btn-ghost{margin-top:0}

    /* Social proof más estrecho */
    .proof-bar > div{
        padding:12px 10px;min-width:33%;
        border-right:1px solid var(--line);
        border-bottom:1px solid var(--line);
        background: var(--ink); /* Fondo claro para los items */
    }
    .proof-bar > div:nth-child(3n){border-right:0}
    .proof-bar > div:nth-last-child(-n+2){border-bottom:0}
    .proof-bar strong{font-size:1.5rem;color:var(--black)}
    .proof-bar span{font-size:.6rem;letter-spacing:.14em}

    /* Quitar clip-path en mobile y ticker */
    .fstrip-window{clip-path:none}
    .ticker-item{font-size:1rem;gap:32px}
    .ticker-item::after{font-size:.8rem}

    .manifest{padding:50px 4%}
    .video-section{padding:50px 4% 50px 4%}
    .ia{padding:72px 4%}
    .form-section{padding:50px 4%}
    .footer{padding:50px 4% 28px}
  }

  /* Pantallas muy chicas (iPhone SE etc.) — hacer más compacto aún */
  @media (max-width: 380px) {
    :root { 
        --row-h: 56px; 
    }
    .hero-title { font-size: 2.2rem; }
    
    .fstrip-item {
        font-size: 1rem; /* Ajuste de tamaño específico para pantallas mini */
        height: auto;               
        min-height: var(--row-h);   
        flex-wrap: wrap;            
        white-space: normal;        
        word-break: break-word;     
        line-height: 1.2;
        padding-top: 8px;           
        padding-bottom: 8px;
    }

    .result-quote { font-size: 1.05rem; }
    .panel-input .input-tiles { grid-template-columns: repeat(4,1fr); gap: 4px; }
    .tile { min-height: 54px; padding: 6px 5px; }
    .tile-label { font-size: .56rem; }
    .tile-icon { width: 16px; height: 16px; }
}

  /* prefers-reduced-motion */
  @media (prefers-reduced-motion:reduce){
    .fstrip-column{transition-duration:.01ms !important}
    .fstrip.is-spinning .fstrip-window{filter:none}
    .ticker-track{animation:none}
    .hero-w{animation:none}
    .reveal{animation:none;opacity:1}
    .fade-in{transition:none;opacity:1;transform:none}
  }