/* v6 / neutomni-cta: seccion "Contact" de neutomni.com (Webflow + modulo de Slater; espejo 2026-10-16). Reglas copiadas del CSS de
   Webflow (neutomni-026b92.shared.css) y del <style> del embed, acotadas a #sec-neutomni-cta; las variables de :root y el body de
   Webflow van en la propia seccion. Pixelado pedido por Emilio al final. Rutas url() relativas a home/secciones/neutomni-cta/. */
@font-face{font-family:"Vazirmatn Local";src:url("../../assets/v6/fonts/Vazirmatn-VariableFont_wght.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Firacode Local";src:url("../../assets/v6/fonts/FiraCode-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Italic Local";src:url("../../assets/v6/fonts/PPEditorialNew-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
#sec-neutomni-cta{--_colors---base-colors--red:var(--sys-rosa,#FF0083);--_colors---base-colors--white:white;--_colors---text-colors--main-text-color:var(--sys-tinta,#131901);--_typography---font-secondary:"Vazirmatn Local",sans-serif;--_typography---italic:"Italic Local",sans-serif;--_typography---font-tertiary:"Firacode Local",Arial,sans-serif;--_typography---text-size--main-text:16px;--_typography---text-size--line-height-main:120%;--_typography---heading-size--h2:118px;--_typography---heading-size--line-height-100:100%}
/* normalize de Webflow (todo en border-box) y body + .section */
#sec-neutomni-cta *,#sec-neutomni-cta *::before,#sec-neutomni-cta *::after{box-sizing:border-box}
/* body de Webflow + .section */
#sec-neutomni-cta .section{font-family:var(--_typography---font-secondary);color:var(--_colors---text-colors--main-text-color);font-size:var(--_typography---text-size--main-text);line-height:var(--_typography---text-size--line-height-main);font-weight:400;z-index:2;background-color:var(--_colors---base-colors--white);position:relative}
#sec-neutomni-cta .section.light{position:relative}
#sec-neutomni-cta .section.light.hover{position:relative;overflow:hidden}
#sec-neutomni-cta .w-layout-blockcontainer{max-width:940px;margin-left:auto;margin-right:auto;display:block}
#sec-neutomni-cta .w-container{max-width:940px;margin-left:auto;margin-right:auto}
#sec-neutomni-cta .container{width:100%;max-width:none;padding:100px 20px}
#sec-neutomni-cta .container.cta{padding-top:0}
#sec-neutomni-cta .w-inline-block{max-width:100%;display:inline-block}
#sec-neutomni-cta h2{margin-top:20px;margin-bottom:10px;font-size:32px;line-height:36px;font-weight:700}
#sec-neutomni-cta p{margin-top:0;margin-bottom:10px}
#sec-neutomni-cta .h2{font-size:var(--_typography---heading-size--h2);line-height:var(--_typography---heading-size--line-height-100);margin-top:0;margin-bottom:0;font-weight:400}
#sec-neutomni-cta .h2.cta{text-align:center;font-size:80px;font-weight:700}
#sec-neutomni-cta .h2.cta .italic-text{font-weight:400}
#sec-neutomni-cta .paragraph{margin-bottom:0}
#sec-neutomni-cta .paragraph.cta{align-self:center;max-width:290px}
#sec-neutomni-cta .italic-text{font-family:var(--_typography---italic);font-style:italic;line-height:90%}
#sec-neutomni-cta .italic{font-family:var(--_typography---italic);line-height:var(--_typography---heading-size--line-height-100);font-style:italic}
#sec-neutomni-cta .cta-content-wrap{grid-column-gap:40px;grid-row-gap:40px;text-align:center;flex-flow:column;justify-content:center;align-items:center;max-width:700px;margin-left:auto;margin-right:auto;display:flex}
#sec-neutomni-cta .title_wrap{border:1px solid var(--_colors---base-colors--red);border-radius:50%;padding:15px 30px}
#sec-neutomni-cta .title_text{font-family:var(--_typography---italic);font-size:20px;font-style:italic}
#sec-neutomni-cta .track{flex-flow:column;justify-content:flex-start;align-items:flex-start;width:100%;height:220px;margin-top:80px;margin-bottom:40px;display:flex;position:relative;overflow:visible}
#sec-neutomni-cta .schedule_wrap{z-index:20;justify-content:center;align-items:center;width:220px;display:flex;position:absolute;inset:0% auto 0% 0%;text-decoration:none}
#sec-neutomni-cta .schedule_wrap.desktop{min-width:200px}
#sec-neutomni-cta .schedule_wrap.mobile{display:none}
#sec-neutomni-cta .shape_text{color:var(--_colors---base-colors--white);text-align:center;display:flex;position:absolute}
#sec-neutomni-cta .shape_text.desktop{font-family:var(--_typography---font-tertiary);text-transform:uppercase;width:220px;height:220px;justify-content:center;align-items:center;border-radius:50%}  /* 2026-11-06: la caja del texto cubre toda la figura (220 px, redonda) para que la liga a contacto se pueda picar en cualquier parte de ella, no solo en la palabra */
#sec-neutomni-cta .shape_text.mobile{font-family:var(--_typography---font-tertiary);text-transform:uppercase;display:none}
#sec-neutomni-cta #morphSvg,#sec-neutomni-cta #morphSvgMobile{position:absolute;left:0;top:0}
#sec-neutomni-cta #morphSvgMobile{display:none}
#sec-neutomni-cta .dash_line_wrap{justify-content:flex-start;align-self:center;align-items:center;width:100vw;margin-left:-20px;display:flex;position:absolute;inset:0%}
#sec-neutomni-cta .dash_line{justify-content:center;align-items:center;width:100%;display:flex}
#sec-neutomni-cta .reserve_wrap{justify-content:center;align-items:center;width:100%;display:flex}
#sec-neutomni-cta .reserve_text{font-family:var(--_typography---font-tertiary);color:var(--_colors---base-colors--red);text-transform:uppercase;padding:10px;font-weight:500;text-decoration:none;display:none}
#sec-neutomni-cta .shadow_trigger{width:10px;height:10px;position:absolute;inset:auto 0% 0% auto}
@media (hover:none){#sec-neutomni-cta #morphSvg{display:none}#sec-neutomni-cta #morphSvgMobile{display:block}#sec-neutomni-cta .track{height:120px}}
@media screen and (min-width:1440px){#sec-neutomni-cta .track{flex-flow:column;justify-content:flex-start;align-items:flex-start}}
@media screen and (max-width:991px){#sec-neutomni-cta .w-layout-blockcontainer,#sec-neutomni-cta .w-container{max-width:728px}#sec-neutomni-cta .container.cta{padding-bottom:40px}#sec-neutomni-cta .h2.cta{font-size:60px}#sec-neutomni-cta .track{justify-content:center;align-items:flex-start;margin-top:40px;margin-bottom:20px}#sec-neutomni-cta .shape_text.mobile{font-size:13px;display:block}#sec-neutomni-cta .shape_text.desktop{display:none}#sec-neutomni-cta .schedule_wrap.mobile{width:120px;height:120px;margin-top:auto;margin-bottom:auto;display:flex;inset:auto auto auto 0%}#sec-neutomni-cta .schedule_wrap.desktop{display:none}}
@media screen and (max-width:767px){#sec-neutomni-cta .w-layout-blockcontainer{max-width:none}}
@media screen and (max-width:479px){#sec-neutomni-cta .w-container{max-width:none}#sec-neutomni-cta .container.cta{padding-left:12px;padding-right:12px}#sec-neutomni-cta .h2.cta{font-size:32px}#sec-neutomni-cta .shape_text{align-self:center;font-size:13px}#sec-neutomni-cta .shape_text.mobile{font-size:12px}#sec-neutomni-cta .schedule_wrap{width:100px;height:100px;inset:0% auto 0% 20px}}
/* ------------------------------------------------------------------ pixelado (Emilio, 2026-10-16): la figura y sus estelas pasan por #syc-pixel */
#sec-neutomni-cta #morphSvg,#sec-neutomni-cta #morphSvgMobile,#sec-neutomni-cta .trail-clone{filter:url(#syc-pixel)}
/* ------------------------------------------------------------------ fondo (Emilio, 2026-10-16): el gris de la pagina, no el blanco de neutomni */
/* En neutomni.com la seccion es blanca sobre pagina blanca. Aqui la pagina es gris (#f3f3ef) y entre la ultima franja y esta seccion
   quedan 120 px de pagina a la vista, asi que el blanco hacia un escalon. Mismo gris que html{--page-background-color}. */
#sec-neutomni-cta .section{background-color:var(--sys-hueso,#F3F3EF)}   /* hueso (Papel picado, Emilio 2026-10-23; antes blanco, 'ponlo blanco' del 2026-10-16). El velo de entrada sigue blanco porque la computadora de arriba es blanca */

/* ---------------------------------------------------------------- aire entre la tele y el contacto (Emilio, 2026-10-16: "dale un poco de aire entre la tele y contacto") */
#sec-neutomni-cta .section.hover{padding-top:140px}
@media screen and (max-width:767px){#sec-neutomni-cta .section.hover{padding-top:72px}}

/* ------------------------------------------------------------------ velo de entrada (Emilio, 2026-10-20: "tirate el efecto ese para el
   cambio de color, que sea una transicion", viendo el corte entre la hoja de papel del Manifiesto y este CTA blanco). Misma receta que
   el velo negro de la hoja y la niebla de la roja: una capa del color de la seccion ANTERIOR, pegada arriba, que se levanta con el
   scroll (--velo-e de 1 a 0 en section.js mientras el tope de la seccion sube del fondo de la ventana hasta arriba; termina en 'top top'
   para que la costura papel/blanco nunca quede dura a la vista); arriba es siempre del
   color de la anterior, asi no hay linea en el empalme, y lo que cambia es su ALTURA. El color lo da --velo-e-rgb: blanco por defecto
   (en el home la seccion anterior es blanca y el velo no se nota); en el Manifiesto lo fija la hoja de papel (manifiesto-texto/section.css)
   al color del papel. Va por encima del contenido (z 30) y sin eventos, asi no estorba a la figura. Sin JS queda fijo (.45). */
#sec-neutomni-cta { position: relative; isolation: isolate; --velo-e: .45; --velo-e-max: clamp(260px, 62vh, 640px); --velo-e-rgb: 255 255 255; }
#sec-neutomni-cta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--velo-e) * var(--velo-e-max)); z-index: 30; pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--velo-e-rgb)) 0%, rgb(var(--velo-e-rgb) / .97) 12%, rgb(var(--velo-e-rgb) / .86) 28%, rgb(var(--velo-e-rgb) / .62) 48%, rgb(var(--velo-e-rgb) / .34) 68%, rgb(var(--velo-e-rgb) / .12) 86%, rgb(var(--velo-e-rgb) / 0) 100%); }