/* Capa de diseño de Home y guías: menos cajas, anchos variados, rejilla tenue y movimiento sutil.
   Se carga la última. js/motion.js añade .reveal/.is-in y el brillo que sigue al ratón. */

/* ── Movimiento ── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:none}
.grid-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}

/* ══════════ GUÍAS ══════════ */
.learn-main{position:relative;isolation:isolate;padding-inline:clamp(1.25rem,4vw,4rem)}
.learn-main::before{content:'';position:absolute;inset:0 0 auto;height:min(1100px,120vh);z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(246,242,233,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(246,242,233,.05) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(ellipse 75% 60% at 60% 18%,#000,transparent 75%);mask-image:radial-gradient(ellipse 75% 60% at 60% 18%,#000,transparent 75%)}
.learn-main .learn-wrap{max-width:84rem}
.learn-main .learn-hero{grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);gap:clamp(2.5rem,6vw,6rem);padding-bottom:clamp(4rem,8vw,7rem)}
.learn-main .learn-hero h1{font-size:clamp(2.6rem,5.2vw,5rem);max-width:15ch}
.learn-main .learn-intro{font-size:clamp(1.05rem,1.3vw,1.2rem);max-width:46ch}

/* Secciones sobre una rejilla de 12 columnas; cada tipo usa un ancho distinto. */
.learn-main .learn-section{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1.5rem,3vw,3rem);row-gap:0;padding:clamp(4rem,8vw,7.5rem) 0;border-top:0;position:relative}
.learn-main .learn-section:not(.learn-cases)::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--line-strong) 18%,var(--line-strong) 82%,transparent)}
.learn-main .learn-section-head,.learn-main .learn-section-body{grid-column:1/-1}
.learn-main .learn-section-body>p{font-size:1.04rem;line-height:1.8}
.learn-main .learn-section-num{font-family:var(--font-t);font-style:normal;font-size:.72rem;letter-spacing:.14em;color:var(--amber)}

/* Texto (impar): título fijo a la izquierda mientras el texto avanza a la derecha. */
.learn-main .learn-section-text .learn-section-head{grid-column:1/6;position:sticky;top:7rem;align-self:start}
.learn-main .learn-section-text .learn-section-body{grid-column:7/13}
/* Texto (par): título grande a lo ancho y el texto desplazado, en dos columnas si es solo prosa. */
.learn-main .learn-section-text:nth-of-type(even) .learn-section-head{grid-column:1/11;position:static;display:flex;align-items:baseline;gap:1.5rem;margin-bottom:2.6rem}
.learn-main .learn-section-text:nth-of-type(even) .learn-section-head h2{font-size:clamp(2.2rem,4vw,3.6rem);max-width:22ch}
.learn-main .learn-section-text:nth-of-type(even) .learn-section-body{grid-column:3/13}
@media(min-width:821px){.learn-main .learn-section-text:nth-of-type(even) .learn-section-body:not(:has(.learn-grid,ul,ol,table,figure)){columns:2;column-gap:clamp(2rem,4vw,4rem)}}
.learn-main .learn-section-text:nth-of-type(even) .learn-section-body>*{break-inside:avoid}
/* La primera idea de cada guía, en grande. */
.learn-main #guide-1 .learn-section-body>p:first-child{font:380 clamp(1.35rem,2.1vw,1.85rem)/1.45 var(--font-d);color:var(--ink);letter-spacing:-.012em}
/* FAQ: título fijo y preguntas a la derecha. */
.learn-main .learn-section-faq .learn-section-head{grid-column:1/5;position:sticky;top:7rem;align-self:start}
.learn-main .learn-section-faq .learn-section-body{grid-column:6/13}
/* Proceso, comparativa y catálogo usan todo el ancho. */
.learn-main .learn-section-process .learn-section-head,.learn-main .learn-section-comparison .learn-section-head,.learn-main .learn-section-catalog .learn-section-head{margin-bottom:1rem}
.learn-main .learn-section-process h2,.learn-main .learn-section-comparison h2,.learn-main .learn-section-catalog h2{font-size:clamp(2.2rem,4vw,3.6rem);max-width:24ch}

/* Rejilla bento: la primera tarjeta ocupa dos filas; una cuarta tarjeta final ocupa todo el ancho. */
.learn-main .learn-section-body .learn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;counter-reset:bento;margin-top:2rem}
.learn-main .learn-section-body .learn-grid .learn-card{position:relative;background:linear-gradient(160deg,rgba(143,165,130,.08),rgba(143,165,130,.015) 60%),var(--bg-2);border:1px solid var(--line-strong);border-radius:20px;padding:1.7rem;counter-increment:bento;transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s}
.learn-main .learn-section-body .learn-grid .learn-card::after{content:counter(bento,decimal-leading-zero);position:absolute;top:1.3rem;right:1.5rem;font:italic 1.05rem var(--font-d);color:var(--amber)}
.learn-main .learn-section-body .learn-grid .learn-card:hover{transform:translateY(-4px);border-color:rgba(232,163,61,.45)}
.learn-main .learn-section-body .learn-grid .learn-card h3{padding-right:2.5rem}
.learn-main .learn-section-body .learn-grid .learn-card:first-child{grid-row:span 2;display:flex;flex-direction:column;justify-content:flex-end;min-height:300px;background:radial-gradient(ellipse at 20% 0,rgba(232,163,61,.16),transparent 60%),radial-gradient(ellipse at 100% 100%,rgba(143,165,130,.18),transparent 60%),var(--bg-2)}
.learn-main .learn-section-body .learn-grid .learn-card:first-child h3{font-size:clamp(1.6rem,2.4vw,2.2rem)}
.learn-main .learn-section-body .learn-grid .learn-card:nth-child(4):last-child{grid-column:1/-1}
/* Brillo bajo el cursor, recortado por la tarjeta. */
.spot{position:relative;overflow:hidden;isolation:isolate}
.spot::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(280px circle at var(--mx,-300px) var(--my,-300px),rgba(232,163,61,.14),transparent 70%);opacity:0;transition:opacity .4s}
.spot:hover::before{opacity:1}
/* Carrusel: desplazamiento nativo con imán, botones redondos y barra de progreso. */
.carousel{margin-top:2.5rem;min-width:0}
.carousel-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,360px);gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.4rem .1rem 1.4rem;scrollbar-width:none;overscroll-behavior-x:contain;--fl:7%;--fr:88%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fl),#000 var(--fr),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fl),#000 var(--fr),transparent)}
.carousel.at-start .carousel-track{--fl:0%}.carousel.at-end .carousel-track{--fr:100%}.carousel.is-static .carousel-track{-webkit-mask-image:none;mask-image:none}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track>*{scroll-snap-align:start}
.carousel-track:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:14px}
.carousel-ui{display:flex;align-items:center;gap:1rem;margin-top:.4rem}
.carousel.is-static .carousel-ui{display:none}
.carousel-bar{flex:1;height:2px;border-radius:2px;background:color-mix(in srgb,currentColor 15%,transparent);overflow:hidden}
.carousel-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--leaf),var(--amber));transform-origin:left;transition:transform .3s}
.carousel-btn{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid color-mix(in srgb,currentColor 35%,transparent);background:none;color:inherit;cursor:pointer;transition:background .3s,border-color .3s,color .3s,opacity .3s}
.carousel-btn:hover:not(:disabled){background:var(--amber);border-color:var(--amber);color:#1a1f16}
.carousel-btn:disabled{opacity:.3;cursor:default}
.carousel-btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
@media(max-width:600px){.learn-main .learn-section-body .learn-grid{grid-template-columns:1fr}.learn-main .learn-section-body .learn-grid .learn-card:first-child{grid-row:auto;min-height:220px}.carousel-track{grid-auto-columns:82%}}


/* Comparativa sin caja; la fila de Savia se ilumina. */
.learn-main .learn-table{border:0;border-radius:0;background:none;margin-top:2rem}
.learn-main .learn-table thead{background:none}
.learn-main .learn-table thead th{font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}
.learn-main .learn-table tbody tr:last-child{background:linear-gradient(90deg,rgba(143,165,130,.18),rgba(143,165,130,.02));box-shadow:inset 3px 0 0 var(--amber)}
/* En la banda crema la tabla necesita su fondo oscuro para que se lea. */
@media(min-width:701px){.learn-main #guide-2 .learn-table{background:var(--bg-2);border-radius:20px;padding:.6rem 1.2rem;box-shadow:0 24px 50px -30px rgba(35,45,30,.6)}}

/* Catálogo de conectores: filas limpias, sin cajas. */
.learn-main .learn-catalog{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0 clamp(1.5rem,3vw,2.5rem);margin-top:2rem}
.learn-main .learn-connector{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:1.1rem 0;transition:border-color .3s}
.learn-main .learn-connector:hover{border-bottom-color:var(--amber)}

/* Herramientas de IA: una fila de logotipos sin cajas, en dos grupos. */
.guide-tools{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"l1 l2" "g1 g2" "f f";column-gap:clamp(2rem,5vw,5rem);background:var(--cream);color:var(--ink-dark);box-shadow:0 0 0 100vmax var(--cream);clip-path:inset(0 -100vmax);padding:clamp(3rem,6vw,4.5rem) 0;margin:0 0 2rem}
.guide-tools>p:nth-of-type(1){grid-area:l1}.guide-tools>p:nth-of-type(2){grid-area:l2}.guide-tools>p:nth-of-type(3){grid-area:f}
.guide-tools>div:nth-of-type(1){grid-area:g1}.guide-tools>div:nth-of-type(2){grid-area:g2;position:relative}
.guide-tools>div:nth-of-type(2)::before{content:'';position:absolute;left:calc(clamp(2rem,5vw,5rem)/-2);top:0;bottom:0;width:1px;background:rgba(35,45,30,.15)}
.guide-tools .guide-agent-label{margin:0 0 1.6rem}
.guide-tools .guide-agent-grid{gap:.5rem}
.guide-tools .guide-agent-grid>div{background:none;border:0;box-shadow:none;padding:.4rem 0;gap:.55rem}
.guide-tools .guide-agent-grid>div>img,.guide-tools .agent-dots{width:44px;height:44px}
.guide-tools .guide-agent-grid>div>*:first-child{filter:grayscale(1);opacity:.6;transition:filter .4s,opacity .4s,transform .4s}
.guide-tools .guide-agent-grid>div:hover>*:first-child{filter:none;opacity:1;transform:translateY(-3px)}
.guide-tools .guide-agent-grid span{font-size:.85rem}.guide-tools .guide-agent-grid small{font-size:.68rem}
.guide-tools .guide-tools-foot{margin:2rem 0 0;font-size:.75rem;color:#64705a}


@media(max-width:820px){
  .learn-main .learn-hero{grid-template-columns:1fr}
  .learn-main .learn-section{grid-template-columns:1fr}
  .learn-main .learn-section .learn-section-head,.learn-main .learn-section .learn-section-body{grid-column:1/-1!important;position:static}
  .learn-main .learn-section-text .learn-section-head{margin-bottom:1.6rem}
  .guide-tools{grid-template-columns:1fr;grid-template-areas:"l1" "g1" "l2" "g2" "f";row-gap:0}
  .guide-tools>div:nth-of-type(1){margin-bottom:2.2rem}
  .guide-tools>div:nth-of-type(2)::before{display:none}
}
@media(max-width:600px){.guide-tools .guide-agent-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.guide-tools .guide-agent-grid small{display:none}}

/* ══════════ HOME ══════════ */
/* Pasos de la solución: línea de tiempo en vez de una caja con tres columnas. */
.home-buyer .buyer-step-top{margin-bottom:1.4rem}
.home-buyer .buyer-tags>span{border:0;padding:0;font-size:.72rem;letter-spacing:.04em}
.home-buyer .buyer-tags>span+span::before{content:'·';margin-right:.4rem;color:var(--amber)}
.home-buyer .buyer-solution .grid-bg{background-image:linear-gradient(rgba(246,242,233,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(246,242,233,.045) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(ellipse 60% 55% at 70% 25%,#000,transparent 75%);mask-image:radial-gradient(ellipse 60% 55% at 70% 25%,#000,transparent 75%)}
/* CTA y garantía sin caja: el contenido respira sobre el fondo. */
@media(max-width:900px){.home-buyer .buyer-next{border-left:0;padding-left:0}}
@media(max-width:760px){
}
.home-buyer .buyer-solution{position:relative;isolation:isolate}

/* Títulos que emergen de una máscara y listas que entran escalonadas (js/motion.js). */
.reveal-title{clip-path:inset(0 -6% 100% -6%);transform:translateY(.35em);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1),transform 1.1s cubic-bezier(.7,0,.2,1)}
.reveal-title.is-in{clip-path:inset(-25% -6% -35% -6%);transform:none}
.reveal{transition-delay:var(--d,0s)}
/* Cierre de guía: el resplandor se funde con el fondo, sin bordes de caja. */
.learn-main .learn-close{position:relative;isolation:isolate;max-width:none;margin-top:2rem;padding:clamp(5rem,10vw,9rem) 0 clamp(3rem,6vw,5rem);border-top:0;background:none}
.learn-main .learn-close::before{content:'';position:absolute;left:50%;top:45%;width:min(900px,90vw);aspect-ratio:2/1;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(232,163,61,.13),rgba(143,165,130,.06) 55%,transparent)}
.learn-main .learn-close h2{font-size:clamp(2.4rem,5vw,4.4rem);max-width:18ch}
@media(prefers-reduced-motion:reduce){.reveal-title{clip-path:none;transform:none}}

/* ── Ejemplos de Agencia Brío: tarjetas con el aspecto real del chat de Savia ── */
.learn-cases .carousel-track{grid-auto-columns:minmax(300px,410px);gap:1.2rem;padding-bottom:2rem}
.chat-card{display:flex;flex-direction:column;gap:1.1rem;min-height:330px;padding:1.4rem 1.4rem 1.2rem;border-radius:22px;background:#fbf9f4;border:1px solid rgba(35,45,30,.09);box-shadow:inset 0 1px 0 #fff,0 22px 44px -28px rgba(35,45,30,.45);color:#2b2a22;transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s}
.chat-card:hover{transform:translateY(-6px);box-shadow:inset 0 1px 0 #fff,0 30px 60px -28px rgba(35,45,30,.55)}
.chat-q{align-self:flex-end;max-width:88%;margin:0;padding:.7rem 1rem;border-radius:18px 18px 4px 18px;background:#45593e;color:#f6f2e9;font-size:.94rem;line-height:1.5}
.chat-a{display:flex;flex-direction:column;flex:1;min-width:0}
.chat-who{display:flex;align-items:center;gap:.5rem;margin:0 0 .55rem;font:500 .92rem var(--font-d);color:#45593e}
.chat-who span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(69,89,62,.1)}
.chat-who svg{width:13px;height:13px}
.learn-section.learn-cases .chat-text{margin:0;font-size:.98rem;line-height:1.6;color:#2b2a22}
.chat-cite{display:inline-grid;place-items:center;min-width:1.25em;height:1.25em;margin-left:.15em;border-radius:.4em;background:rgba(169,116,61,.1);box-shadow:inset 0 0 0 1px rgba(169,116,61,.35);color:#a9743d;font:600 .68em var(--font-t);vertical-align:.35em}
.chat-src{margin-top:auto;padding-top:.85rem;border-top:1px solid rgba(216,206,184,.6)}
.chat-src small{display:block;margin-bottom:.45rem;font-size:.72rem;color:rgba(43,42,34,.45)}
.chat-src-row{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem;padding:.5rem .65rem;border-radius:10px;background:rgba(246,242,233,.9);box-shadow:inset 0 0 0 1px rgba(216,206,184,.85);font-size:.76rem;line-height:1.4}
.chat-src-row svg{flex:none;width:14px;height:14px;color:rgba(43,42,34,.5)}
.chat-src-row b{flex:1 1 auto;min-width:0;font-weight:500;color:rgba(43,42,34,.78)}
.chat-src-row i{font-style:normal;padding:.12rem .5rem;border-radius:999px;background:rgba(169,116,61,.1);color:#a9743d;font-size:.68rem}
.chat-src-row em{font-style:normal;color:rgba(43,42,34,.4)}
.is-pending small{color:#a9743d}
.is-pending .chat-src-row{background:rgba(232,163,61,.09);box-shadow:inset 0 0 0 1px rgba(232,163,61,.35)}
.chat-pulse{flex:none;width:8px;height:8px;border-radius:50%;background:var(--amber);animation:chat-pulse 1.8s ease-in-out infinite}
@keyframes chat-pulse{0%,100%{box-shadow:0 0 0 0 rgba(232,163,61,.55)}60%{box-shadow:0 0 0 7px rgba(232,163,61,0)}}
/* Al entrar en pantalla, la conversación se escribe: primero la pregunta, luego la respuesta. */
.carousel.reveal .chat-q,.carousel.reveal .chat-a{opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1)}
.carousel.reveal .chat-q{transform:translateY(10px) scale(.96);transform-origin:right bottom}
.carousel.is-in .chat-q,.carousel.is-in .chat-a{opacity:1;transform:none}
.carousel.is-in .chat-card .chat-q{transition-delay:calc(.25s + var(--i,0)*.12s)}
.carousel.is-in .chat-card .chat-a{transition-delay:calc(.75s + var(--i,0)*.12s)}
.chat-card:nth-child(2){--i:1}.chat-card:nth-child(3){--i:2}.chat-card:nth-child(4){--i:3}.chat-card:nth-child(5){--i:4}

/* ── Home: guías en rejilla bento, demo grande y desplegables más limpios ── */
.guide-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(180px,auto);gap:1rem;margin-bottom:1.8rem}
.guide-slide{display:flex;flex-direction:column;padding:1.7rem;border:1px solid var(--line-strong);border-radius:22px;background:linear-gradient(160deg,rgba(143,165,130,.08),rgba(143,165,130,.015) 60%),var(--bg-2);color:var(--ink);text-decoration:none;transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .5s}
.guide-bento .guide-slide{grid-column:span 4}.guide-bento .guide-slide:nth-child(n+7){grid-column:span 3}.guide-slide:hover{transform:translateY(-5px);border-color:rgba(232,163,61,.45)}
.guide-slide h3{margin:0 0 .6rem}.guide-slide p{margin:auto 0 0;font-size:.88rem;color:var(--ink-dim)}
.guide-bento .guide-slide:first-child{grid-column:span 8;grid-row:span 2;justify-content:flex-end;background:radial-gradient(ellipse at 15% 0,rgba(232,163,61,.18),transparent 55%),radial-gradient(ellipse at 100% 100%,rgba(143,165,130,.2),transparent 60%),var(--bg-2)}
.guide-bento .guide-slide:first-child h3{font-size:clamp(1.9rem,3.2vw,2.8rem);max-width:14ch}
.guide-bento .guide-slide:first-child p{margin-top:0;max-width:40ch;font-size:1rem}
.guide-bento+.buyer-link{margin-top:.2rem}
.home-buyer .buyer-demo .demo{max-width:none;margin:1.8rem 0 0}
.home-buyer .buyer-disclosure>summary{margin:0 -1.2rem;padding:2.3rem 1.2rem;border-radius:18px;transition:background .35s}
.home-buyer .buyer-disclosure>summary:hover{background:rgba(246,242,233,.035)}
.home-buyer .buyer-disclosure-num{font:500 .72rem var(--font-t);letter-spacing:.14em;margin-top:.45rem}
@media(max-width:900px){.guide-bento{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-bento .guide-slide,.guide-bento .guide-slide:nth-child(n+7),.guide-bento .guide-slide:first-child{grid-column:auto}.guide-bento .guide-slide:first-child{grid-row:auto;min-height:240px}.home-buyer .buyer-proof{grid-template-columns:1fr}}
@media(max-width:600px){.guide-bento{grid-template-columns:1fr}.guide-bento .guide-slide:first-child{grid-column:auto}}

.home-buyer main#top>.buyer-agents{background:radial-gradient(55% 45% at 78% 50%,rgba(143,165,130,.1),transparent)}
.learn-section.learn-cases .chat-q{color:#f6f2e9}.learn-section.learn-cases .chat-who{color:#45593e}.learn-section.learn-cases .chat-src small{color:rgba(43,42,34,.5)}.learn-section.learn-cases .is-pending small{color:#a9743d}
.chat-src-row em{margin-left:auto}


/* ── Home: FAQ con el mismo ancho que el resto y la vista previa del tour del mismo tamaño que la demo ── */
.home-buyer .faq.section{padding-inline:var(--buyer-gutter)}
.home-buyer .faq-wrap{max-width:none}
.home-buyer .buyer-proof{grid-template-columns:1fr;gap:2rem}
.home-buyer .buyer-demo-teaser img{aspect-ratio:16/9}
@media(max-width:760px){.home-buyer .buyer-next{grid-template-columns:1fr}.home-buyer .buyer-next>.btn{grid-column:1;grid-row:auto;margin-top:1.4rem;justify-self:start}}

/* ── Guías con más vida ── */
/* Las apariciones llegan desenfocadas y se enfocan. */
.reveal{filter:blur(6px);transition-property:opacity,transform,filter}
.reveal.is-in{filter:none}
/* Barra de lectura bajo la cabecera. */
.read-progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:200;background:linear-gradient(90deg,var(--leaf),var(--amber));transform-origin:left;transform:scaleX(0);pointer-events:none}
/* La segunda sección de cada guía va en una banda crema, para cambiar de ritmo. */
.learn-main #guide-2{background:var(--cream);color:var(--ink-dark);box-shadow:0 0 0 100vmax var(--cream);clip-path:inset(0 -100vmax);margin:2rem 0}
.learn-main #guide-2::after{display:none}
.learn-main #guide-2 h2{color:var(--ink-dark)}
.learn-main #guide-2 .learn-section-num{color:#A9743D}
.learn-main #guide-2 .learn-section-body>p,.learn-main #guide-2 li{color:#4c5843}
.learn-main #guide-2 a{color:#3d5a32}
.learn-main #guide-2 .learn-grid .learn-card{background:#fff;border-color:rgba(35,45,30,.1);box-shadow:0 18px 40px -28px rgba(35,45,30,.4)}
.learn-main #guide-2 .learn-grid .learn-card h3{color:var(--ink-dark)}.learn-main #guide-2 .learn-grid .learn-card p{color:#4c5843}
.learn-main #guide-2 .learn-grid .learn-card:first-child{background:#232d1e}.learn-main #guide-2 .learn-grid .learn-card:first-child :is(h3,p){color:#f6f2e9}
/* En las secciones con título fijo, el número crece en contorno. */
.learn-main .learn-section-text:nth-of-type(odd) .learn-section-num,.learn-main .learn-section-faq .learn-section-num{font:italic 300 clamp(3.5rem,6vw,5.5rem)/1 var(--font-d);letter-spacing:0;color:transparent;-webkit-text-stroke:1px rgba(232,163,61,.7);margin-bottom:1.4rem}
/* Las preguntas frecuentes se abren con suavidad donde el navegador lo permite. */
:root{interpolate-size:allow-keywords}
.learn-faq details::details-content,.faq-entry::details-content{height:0;overflow:clip;transition:height .45s cubic-bezier(.2,.7,.2,1),content-visibility .45s allow-discrete}
.learn-faq details[open]::details-content,.faq-entry[open]::details-content{height:auto}
@media(prefers-reduced-motion:reduce){.reveal{filter:none}}

/* ── Pasos (Home y guías): columnas con número grande en contorno que se rellena al pasar el ratón ── */
.learn-main .learn-flow,.home-buyer .buyer-solution-steps{border:0;border-radius:0;overflow:visible;background:none;gap:0;margin:3rem 0 2.5rem;padding:0}
.learn-main .learn-flow li,.home-buyer .buyer-solution-steps article{position:relative;background:none;border:0;border-left:1px solid var(--line-strong);border-radius:0;padding:.4rem clamp(1.2rem,2.5vw,2.4rem) .4rem;transition:background .5s}
.learn-main .learn-flow li:first-child,.home-buyer .buyer-solution-steps article:first-child{border-left:0;padding-left:0}
.learn-main .learn-flow li::before,.home-buyer .buyer-step-top>span{display:block;font:italic 300 clamp(3.2rem,5vw,4.6rem)/1 var(--font-d);color:transparent;-webkit-text-stroke:1px rgba(232,163,61,.75);margin-bottom:1.3rem;transition:color .5s,-webkit-text-stroke-color .5s}
.learn-main .learn-flow li:hover::before,.home-buyer .buyer-solution-steps article:hover .buyer-step-top>span{color:var(--amber);-webkit-text-stroke-color:var(--amber)}
.home-buyer .buyer-step-top{margin-bottom:0}
.home-buyer .buyer-step-top svg{display:none}
@media(max-width:820px){.learn-main .learn-flow{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.2rem}.learn-main .learn-flow li:nth-child(odd){border-left:0;padding-left:0}}
@media(max-width:760px){.home-buyer .buyer-solution-steps{grid-template-columns:1fr;row-gap:2.2rem}.home-buyer .buyer-solution-steps article{border-left:0;padding-left:0;border-top:1px solid var(--line-strong);padding-top:1.6rem}.home-buyer .buyer-solution-steps article:first-child{border-top:0;padding-top:0}}
.home-buyer main#top>.faq.section{width:100%;max-width:none;margin-inline:0;padding-inline:var(--buyer-gutter)}.home-buyer main#top>.faq.section .faq-wrap{max-width:none}
/* El tour y su vista previa caben en la pantalla con margen para seguir haciendo scroll. */
.home-buyer .buyer-demo .demo,.home-buyer .buyer-demo-teaser{width:min(100%,calc((100svh - 13rem) * 16 / 9));margin-inline:auto}

/* ── Datos en vivo: logotipos en las tarjetas ── */
.card-logos{display:flex;gap:.5rem;margin-bottom:1.3rem}
.card-logos img{width:42px;height:42px;padding:8px;object-fit:contain;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(35,45,30,.08),0 8px 18px -10px rgba(0,0,0,.5);transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.learn-card:hover .card-logos img{transform:translateY(-3px) rotate(-3deg)}
.learn-card:hover .card-logos img+img{transform:translateY(-3px) rotate(3deg)}
.learn-main .learn-section-body .learn-grid .learn-card:first-child .card-logos{margin-bottom:auto}

/* ── Home · Cómo lo hace Savia: el estilo original con una línea de tiempo ligada al scroll ── */
.home-buyer .buyer-solution-steps{position:relative;gap:clamp(1.5rem,3vw,3.5rem);padding:3.4rem 0 0;margin:3.5rem 0 3rem}
.home-buyer .buyer-solution-steps article,.home-buyer .buyer-solution-steps article:first-child{border:0;padding:0}
.home-buyer .buyer-step-top{margin-bottom:1.4rem}
.home-buyer .buyer-step-top>span{font:italic 400 2.2rem var(--font-d);color:var(--amber);-webkit-text-stroke:0;margin:0}
.home-buyer .buyer-solution-steps article:hover .buyer-step-top>span{color:var(--amber)}
.home-buyer .buyer-step-top svg{display:block}
.home-buyer .buyer-solution-steps::before,.home-buyer .buyer-solution-steps::after{content:'';position:absolute;top:.95rem;left:0;right:0;height:2px;border-radius:2px;background:rgba(246,242,233,.08)}
.home-buyer .buyer-solution-steps::after{background:linear-gradient(90deg,var(--leaf),var(--amber));box-shadow:0 0 18px rgba(232,163,61,.5);transform-origin:left}
.home-buyer .buyer-solution-steps article::before{content:'';position:absolute;top:calc(-2.45rem - 8px);left:0;width:16px;height:16px;border-radius:50%;border:2px solid var(--amber);background:var(--amber);box-shadow:0 0 0 6px rgba(232,163,61,.14),0 0 24px rgba(232,163,61,.7)}
@supports (animation-timeline:view()){
  .home-buyer .buyer-solution-steps{view-timeline:--steps block}
  .home-buyer .buyer-solution-steps::after{animation:steps-fill linear both;animation-timeline:--steps;animation-range:cover 18% cover 55%}
  .home-buyer .buyer-solution-steps article::before,.home-buyer .buyer-solution-steps article>*{animation:step-on linear both;animation-timeline:--steps}
  .home-buyer .buyer-solution-steps article>*{animation-name:step-text}
  .home-buyer .buyer-solution-steps article:nth-child(1)::before,.home-buyer .buyer-solution-steps article:nth-child(1)>*{animation-range:cover 16% cover 22%}
  .home-buyer .buyer-solution-steps article:nth-child(2)::before,.home-buyer .buyer-solution-steps article:nth-child(2)>*{animation-range:cover 32% cover 38%}
  .home-buyer .buyer-solution-steps article:nth-child(3)::before,.home-buyer .buyer-solution-steps article:nth-child(3)>*{animation-range:cover 49% cover 55%}
}
@keyframes steps-fill{from{transform:scaleX(0)}}
@keyframes step-on{from{background:var(--bg);border-color:rgba(246,242,233,.25);box-shadow:none}}
@keyframes step-text{from{opacity:.3;transform:translateY(8px)}}
@media(max-width:760px){
  .home-buyer .buyer-solution-steps{padding:0 0 0 2.4rem;row-gap:2.6rem}
  .home-buyer .buyer-solution-steps article,.home-buyer .buyer-solution-steps article:first-child{border:0;padding:0}
  .home-buyer .buyer-solution-steps::before,.home-buyer .buyer-solution-steps::after{top:0;bottom:0;left:7px;right:auto;width:2px;height:auto}
  .home-buyer .buyer-solution-steps::after{transform-origin:top;animation-name:steps-fill-y}
  .home-buyer .buyer-solution-steps article::before{top:.7rem;left:calc(-2.4rem)}
}
@keyframes steps-fill-y{from{transform:scaleY(0)}}
@media(prefers-reduced-motion:reduce){.home-buyer .buyer-solution-steps::after,.home-buyer .buyer-solution-steps article::before,.home-buyer .buyer-solution-steps article>*{animation:none}}


/* ── Home: Savia en el centro y la IA conectada alrededor (sin anillos) ── */
.ai-hub{position:relative;min-width:0}
.hub-stage{position:relative;width:min(100%,620px);aspect-ratio:1;margin:0 auto;container-type:inline-size}
.hub-stage::before{content:'';position:absolute;inset:14%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(143,165,130,.28),transparent)}
.hub-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.hub-core>span{display:grid;place-items:center;align-content:center;gap:.35rem;width:clamp(110px,31cqi,190px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 28%,#24321f,#0b0f09 70%);color:#a9c39a;box-shadow:inset 0 0 0 1px rgba(143,165,130,.45),0 0 0 12px rgba(143,165,130,.07),0 0 70px rgba(143,165,130,.32);animation:hub-breathe 4.5s ease-in-out infinite}
.hub-core svg{width:32%;height:auto}.hub-core svg path+path{stroke:#0b0f09;stroke-width:4;stroke-linecap:round}
.hub-core b{font:400 clamp(1rem,3.6cqi,1.5rem)/1 var(--font-d);color:var(--ink)}
@keyframes hub-breathe{50%{box-shadow:inset 0 0 0 1px rgba(143,165,130,.6),0 0 0 18px rgba(143,165,130,.09),0 0 100px rgba(143,165,130,.45)}}
.ai-hub .buyer-ai-foot{max-width:44ch;margin:.9rem auto 0;text-align:center;font-size:.9rem;line-height:1.7;color:var(--ink-dim)}

/* ── Guías de IA y conectores: de las raíces (apps) al tronco (Savia) y a las ramas (tu IA) ── */
.ai-flow{position:relative;min-width:0;padding:clamp(1.2rem,2.6vw,2rem);border-radius:26px;background:var(--cream);color:var(--ink-dark);box-shadow:0 40px 80px -40px rgba(0,0,0,.75),0 0 0 1px rgba(246,242,233,.35)}
.flow-label{margin:0;font:500 .64rem var(--font-t);letter-spacing:.18em;text-transform:uppercase;color:#64705a;text-align:center}
.flow-stage{position:relative;aspect-ratio:100/118;margin:.8rem 0;container-type:inline-size}
.flow-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flow-lines path{fill:none;stroke-width:.55;stroke-linecap:round;stroke-dasharray:1.3 2;animation:flow-up 1.6s linear infinite;animation-delay:calc(var(--i)*-.27s)}
.flow-root{stroke:rgba(169,116,61,.7)}
.flow-branch{stroke:rgba(69,89,62,.75)}.flow-branch.is-agent{stroke:rgba(232,163,61,.85)}
@keyframes flow-up{to{stroke-dashoffset:-3.3}}
.flow-ai,.flow-app{position:absolute;transform:translate(-50%,-50%)}
.flow-ai{display:flex;flex-direction:column;align-items:center;gap:.4rem;font-size:clamp(.55rem,2.2cqi,.78rem);white-space:nowrap;color:#2b2a22}
.flow-ai>span{display:grid;place-items:center;width:clamp(36px,12.5cqi,70px);aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(35,45,30,.12),0 10px 22px -12px rgba(35,45,30,.55);transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.flow-ai.is-agent>span{box-shadow:0 0 0 1.5px rgba(232,163,61,.75),0 10px 22px -12px rgba(35,45,30,.55)}
.flow-ai img,.flow-ai video,.flow-ai .agent-dots{width:56%;height:56%;object-fit:contain}
.flow-ai .agent-dots{display:grid;place-items:center}.flow-ai .agent-dots img{display:none}
.flow-ai:hover>span{transform:translateY(-3px) scale(1.06)}
.flow-app{display:grid;place-items:center;width:clamp(34px,11cqi,60px);aspect-ratio:1;border-radius:28%;background:#fff;box-shadow:0 0 0 1px rgba(35,45,30,.1),0 12px 24px -14px rgba(35,45,30,.6);animation:flow-float 5s ease-in-out infinite;animation-delay:calc(var(--i)*-.8s)}
.flow-app img{width:56%;height:56%;object-fit:contain}
@keyframes flow-float{0%,100%{translate:0 0;rotate:-3deg}50%{translate:0 -5px;rotate:3deg}}
.flow-layer{position:absolute;left:8%;right:8%;display:flex;align-items:center;gap:clamp(.6rem,2.5cqi,1.1rem);padding:0 clamp(.8rem,4cqi,1.6rem);border-radius:clamp(14px,4cqi,24px);background:radial-gradient(ellipse at 0 0,rgba(143,165,130,.3),transparent 60%),#1d2619;color:#f6f2e9;box-shadow:0 26px 50px -26px rgba(35,45,30,.9),inset 0 0 0 1px rgba(143,165,130,.35)}
.flow-leaf{flex:none;display:grid;place-items:center;width:clamp(36px,11cqi,58px);aspect-ratio:1;border-radius:50%;background:rgba(143,165,130,.22);color:#a9c39a;box-shadow:0 0 26px rgba(143,165,130,.4);animation:flow-glow 3.5s ease-in-out infinite}
.flow-leaf svg{width:46%;height:auto}.flow-leaf svg path+path{stroke:#1d2619;stroke-width:5;stroke-linecap:round}
@keyframes flow-glow{50%{box-shadow:0 0 44px rgba(143,165,130,.65)}}
.flow-layer b{display:block;font:400 clamp(1rem,4.6cqi,1.5rem)/1.1 var(--font-d)}
.flow-layer small{display:block;margin-top:.2rem;font-size:clamp(.62rem,2.5cqi,.82rem);line-height:1.35;color:rgba(246,242,233,.7)}
.flow-pills{display:flex;flex-wrap:wrap;gap:.3rem;margin:.55rem 0 0}
.flow-pills span{padding:.15rem .55rem;border-radius:999px;background:rgba(143,165,130,.18);box-shadow:inset 0 0 0 1px rgba(143,165,130,.35);font-size:clamp(.55rem,2cqi,.7rem);color:#d6e3cc}
@container (max-width:380px){.flow-pills{display:none}.flow-ai b{display:none}}
.ai-flow.reveal .flow-ai,.ai-flow.reveal .flow-app{opacity:0;transition:opacity .6s;transition-delay:calc(.3s + var(--i)*.08s)}
.ai-flow.is-in .flow-ai,.ai-flow.is-in .flow-app{opacity:1}
@media(prefers-reduced-motion:reduce){.hub-core>span,.flow-lines path,.flow-app,.flow-leaf,.chat-pulse{animation:none}}

/* ── Home: test y garantía en un solo bloque de decisión ── */
.buyer-decide{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:1rem;margin-top:2.4rem}
.decide-main,.decide-guarantee{position:relative;overflow:hidden;border-radius:26px;padding:clamp(1.6rem,3.2vw,2.8rem)}
.decide-main{display:flex;flex-direction:column;justify-content:center;background:radial-gradient(ellipse at 100% 0,rgba(232,163,61,.22),transparent 55%),radial-gradient(ellipse at 0 100%,rgba(143,165,130,.18),transparent 60%),#141a11;box-shadow:inset 0 0 0 1px rgba(232,163,61,.28)}
.decide-main::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(246,242,233,.07) 50%,transparent 60%);transform:translateX(-100%);animation:decide-sheen 6s ease-in-out infinite}
@keyframes decide-sheen{55%,100%{transform:translateX(100%)}}
.decide-kicker{margin:0 0 1rem;font:500 .66rem var(--font-t);letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.buyer-section .decide-main h3{font-size:clamp(1.7rem,2.8vw,2.6rem);line-height:1.12;max-width:20ch;margin:0 0 .8rem}
.buyer-section .decide-main>p:not(.decide-kicker){margin:0;color:var(--ink-dim);font-size:1rem}
.decide-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:1.8rem}
.decide-alt{display:flex;flex-direction:column;font-size:.82rem;line-height:1.5;color:var(--ink-dim)}
.decide-alt span{color:var(--ink);text-decoration:underline;text-underline-offset:.25em;transition:color .3s}
.decide-alt:hover span{color:var(--amber)}
.decide-guarantee{display:flex;align-items:center;gap:clamp(1.2rem,2.5vw,2rem);background:var(--cream);color:var(--ink-dark)}
.decide-seal{position:relative;flex:none;width:clamp(110px,11vw,140px);aspect-ratio:1}
.decide-seal svg{width:100%;height:100%;animation:decide-spin 22s linear infinite}
.decide-seal text{font:600 8.4px var(--font-t);letter-spacing:.24em;fill:#45593e}
.decide-seal>span{position:absolute;inset:22%;display:grid;place-items:center;align-content:center;border-radius:50%;background:#1d2619;color:#f6f2e9;font:400 clamp(1.6rem,2.4vw,2.1rem)/1 var(--font-d);box-shadow:0 12px 28px -12px rgba(35,45,30,.8)}
.decide-seal small{font:500 .58rem var(--font-t);letter-spacing:.16em;text-transform:uppercase;color:#a9c39a;margin-top:.2rem}
@keyframes decide-spin{to{transform:rotate(360deg)}}
.buyer-section .decide-guarantee h3{font-size:clamp(1.3rem,1.9vw,1.7rem);color:var(--ink-dark);margin:0 0 .5rem}
.buyer-section .decide-guarantee p{margin:0 0 1rem;font-size:.93rem;line-height:1.65;color:#4c5843}
.home-buyer .decide-guarantee .buyer-link{color:#3d5a32}
@media(max-width:900px){.buyer-decide{grid-template-columns:1fr}}
@media(max-width:520px){.decide-guarantee{flex-direction:column;align-items:flex-start}}

/* ── Home: el círculo de IA, más tecnológico. Paquetes de luz entran (preguntas) y salen (respuestas) ── */
.hub-stage::after{content:'';position:absolute;inset:-4%;z-index:-2;pointer-events:none;background-image:radial-gradient(rgba(246,242,233,.16) 1px,transparent 1.6px);background-size:18px 18px;-webkit-mask-image:radial-gradient(closest-side,#000 25%,transparent);mask-image:radial-gradient(closest-side,#000 25%,transparent)}
.hub-base{fill:none;stroke:rgba(246,242,233,.14);stroke-width:.35}
.hub-g.is-agent .hub-base{stroke:rgba(232,163,61,.22)}
.hub-packet{fill:none;stroke-width:.9;stroke-linecap:round;stroke-dasharray:9 91;filter:url(#hub-glow);animation:hub-packet 2.6s cubic-bezier(.45,0,.55,1) infinite;animation-delay:calc(var(--i)*-.43s)}
.hub-packet.is-in{stroke:#f6f2e9}
.hub-g.is-agent .hub-packet.is-in{stroke:var(--amber)}
.hub-packet.is-out{stroke:#a9c39a;animation-direction:reverse;animation-delay:calc(var(--i)*-.43s - 1.3s)}
@keyframes hub-packet{from{stroke-dashoffset:0}to{stroke-dashoffset:100}}
.hub-g{transition:opacity .4s}
.hub-core>span{position:relative;isolation:isolate}
.hub-core>span::before{content:'';position:absolute;inset:-4px;z-index:-1;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 62%,rgba(169,195,154,.15) 75%,rgba(169,195,154,.95) 92%,transparent 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));animation:decide-spin 3.2s linear infinite}
.hub-core>span::after{content:'';position:absolute;inset:0;z-index:-2;border-radius:50%;background:radial-gradient(circle at 35% 28%,#24321f,#0b0f09 70%)}
@media(prefers-reduced-motion:reduce){.hub-packet,.hub-core>span::before,.decide-seal svg,.decide-main::after{animation:none}.hub-packet{display:none}}

/* ── Guías: los pasos como tarjetas conectadas; con cuatro pasos, el último vuelve al segundo ── */
.learn-main .learn-section .learn-flow{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;gap:clamp(1.6rem,3vw,2.6rem);margin:2.6rem 0 2.4rem;padding:0;counter-reset:flow}
.learn-main .learn-section .learn-flow li{position:relative;padding:1.6rem 1.5rem 1.7rem;border:1px solid var(--line-strong);border-radius:20px;background:linear-gradient(160deg,rgba(143,165,130,.09),rgba(143,165,130,.015) 60%),var(--bg-2);font-size:.92rem;line-height:1.6;transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s}
.learn-main .learn-section .learn-flow li:first-child{padding-left:1.5rem;border-left:1px solid var(--line-strong)}
.learn-main .learn-section .learn-flow li:hover{transform:translateY(-4px);border-color:rgba(232,163,61,.5)}
.learn-main .learn-section .learn-flow li::before{content:counter(flow,decimal-leading-zero);display:inline-grid;place-items:center;width:38px;height:38px;margin:0 0 1.1rem;border-radius:12px;background:rgba(232,163,61,.12);box-shadow:inset 0 0 0 1px rgba(232,163,61,.4);font:italic 400 1rem/1 var(--font-d);color:var(--amber);-webkit-text-stroke:0}
.learn-main .learn-section .learn-flow li strong{display:block;margin-bottom:.45rem;font:400 1.25rem/1.25 var(--font-d);color:var(--ink)}
.learn-main .learn-section .learn-flow li:not(:last-child)::after{content:'';position:absolute;top:2.85rem;right:calc(-1 * clamp(1.6rem,3vw,2.6rem));width:clamp(1.6rem,3vw,2.6rem);height:2px;background:linear-gradient(90deg,rgba(232,163,61,.15),rgba(232,163,61,.15)),radial-gradient(circle,var(--amber) 0 2px,transparent 3px) 0 50%/8px 8px no-repeat;animation:flow-hop 1.8s ease-in-out infinite}
@keyframes flow-hop{from{background-position:0 50%,0 50%}to{background-position:0 50%,100% 50%}}
.learn-main .learn-section .learn-flow:has(li:nth-child(4)){margin-bottom:4.2rem}
.learn-main .learn-section .learn-flow:has(li:nth-child(4))::after{content:'';position:absolute;left:37.5%;right:12.5%;bottom:-2.4rem;height:2.4rem;border:1.5px dashed rgba(232,163,61,.5);border-top:0;border-radius:0 0 22px 22px;pointer-events:none}
.learn-main .learn-section .learn-flow:has(li:nth-child(4))::before{content:'↺';position:absolute;left:calc(37.5% - .45rem);bottom:-.6rem;font-size:.9rem;line-height:1;color:var(--amber)}
@media(max-width:820px){
  .learn-main .learn-section .learn-flow{grid-auto-flow:row;grid-template-columns:1fr;gap:1.4rem}
  .learn-main .learn-section .learn-flow li:not(:last-child)::after{top:auto;bottom:-1.4rem;right:auto;left:2.2rem;width:2px;height:1.4rem;background:linear-gradient(rgba(232,163,61,.4),rgba(232,163,61,.4))}
  .learn-main .learn-section .learn-flow:has(li:nth-child(4))::after,.learn-main .learn-section .learn-flow:has(li:nth-child(4))::before{display:none}
  .learn-main .learn-section .learn-flow:has(li:nth-child(4)){margin-bottom:2.4rem}
}
@media(prefers-reduced-motion:reduce){.learn-main .learn-section .learn-flow li::after{animation:none}}
/* Experto entre las fuentes: lo que solo sabe una persona también sube a Savia. */
.flow-app.is-expert{border-radius:50%;background:#1d2619;color:#a9c39a;box-shadow:0 0 0 2px rgba(232,163,61,.6),0 12px 24px -14px rgba(35,45,30,.7)}
.flow-app.is-expert svg{width:52%;height:52%}
.flow-app.is-expert b{position:absolute;top:calc(100% + .35rem);left:50%;transform:translateX(-50%);white-space:nowrap;font:500 clamp(.5rem,2cqi,.7rem) var(--font-t);color:#45593e}
.flow-root.is-expert{stroke:rgba(69,89,62,.8)}
.flow-app{width:clamp(30px,10cqi,56px)}

/* ── Home: red de IA. Tu IA a la izquierda, tus agentes a la derecha y Savia IA en el centro ── */
.ai-hub{position:relative;min-width:0}
.hub-heads{display:flex;justify-content:space-between;margin:0 0 .6rem;font:500 .64rem var(--font-t);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
.hub-heads span::before{content:'';display:inline-block;width:8px;height:8px;margin-right:.5rem;border-radius:50%;background:var(--cream);vertical-align:.05em}
.hub-heads .is-agent::before{background:var(--amber);box-shadow:0 0 10px rgba(232,163,61,.6)}
.hub-stage{position:relative;width:100%;aspect-ratio:100/64;margin:0;container-type:inline-size}
.hub-stage::before{content:'';position:absolute;left:30%;right:30%;top:10%;bottom:10%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(143,165,130,.3),transparent)}
.hub-stage::after{inset:-2% 0}
.hub-pill{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.6rem;width:25%;padding:.45rem .7rem .45rem .45rem;border-radius:999px;background:linear-gradient(180deg,rgba(246,242,233,.1),rgba(246,242,233,.04));box-shadow:inset 0 0 0 1px rgba(246,242,233,.18),0 14px 30px -18px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:clamp(.62rem,2cqi,.92rem);color:var(--ink);white-space:nowrap;transition:transform .45s cubic-bezier(.3,1.4,.5,1),box-shadow .45s}
.hub-pill.is-agent{flex-direction:row-reverse;padding:.45rem .45rem .45rem .7rem;text-align:right;box-shadow:inset 0 0 0 1px rgba(232,163,61,.35),0 14px 30px -18px rgba(0,0,0,.8)}
.hub-pill>span{flex:none;display:grid;place-items:center;width:clamp(30px,6.4cqi,48px);aspect-ratio:1;border-radius:50%;background:var(--cream)}
.hub-pill img,.hub-pill video,.hub-pill .agent-dots{width:62%;height:62%;object-fit:contain}
.hub-pill .agent-dots{display:grid;place-items:center}.hub-pill .agent-dots img{display:none}
.hub-pill b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:400}
.hub-pill:hover{transform:translate(-50%,-50%) scale(1.05);box-shadow:inset 0 0 0 1px var(--amber),0 0 30px rgba(232,163,61,.25)}
.hub-core>span b{font-size:clamp(.9rem,2.6cqi,1.3rem)}
.hub-core>span{width:clamp(84px,24cqi,170px)}
.hub-stage:has(.hub-pill:hover) .hub-g{opacity:.25}
.hub-stage:has(.hub-n6:hover) .hub-g6,.hub-stage:has(.hub-n7:hover) .hub-g7{opacity:1}
.ai-hub.reveal .hub-pill{opacity:0;transition:opacity .6s,translate .7s cubic-bezier(.3,1.4,.5,1);translate:0 12px;transition-delay:calc(.2s + var(--i)*.07s)}
.ai-hub.is-in .hub-pill{opacity:1;translate:0 0}
.hub-packet{stroke-width:.7}
@container (max-width:420px){.hub-pill{gap:.35rem;padding:.3rem .45rem .3rem .3rem}.hub-pill.is-agent{padding:.3rem .3rem .3rem .45rem}}

/* ── Hero: la imagen fija de la hoja ocupa en móvil el mismo sitio que la hoja 3D (cámara a 115 de distancia, fov 38) ── */
@media(max-width:900px){.hero .hero-still{inset:auto;top:4.9%;left:0;right:0;margin-inline:auto;width:auto;height:65.1%;object-fit:contain}}

/* ── Hero: iconos en los sellos de confianza ── */
.hstat{display:grid!important;grid-template-columns:auto 1fr;column-gap:.8rem;align-items:center}
.hstat-ico{grid-row:1/span 2;width:42px;height:42px;padding:10px;border-radius:13px;background:rgba(143,165,130,.12);box-shadow:inset 0 0 0 1px rgba(143,165,130,.3);color:#a9c39a;transition:background .3s,color .3s,box-shadow .3s}
.hstat:hover .hstat-ico{background:rgba(232,163,61,.14);color:var(--amber);box-shadow:inset 0 0 0 1px rgba(232,163,61,.45),0 0 18px rgba(232,163,61,.25)}
@media(max-width:600px){.hero-stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem .6rem!important}.hstat{grid-template-columns:1fr;row-gap:.4rem;justify-items:start}.hstat-ico{grid-row:auto;width:36px;height:36px;padding:8px}.hstat .hstat-n{font-size:1.05rem}.hstat .hstat-l{font-size:.66rem;line-height:1.35}}

/* ── Datos en vivo: logotipos grandes y legibles ── */
.card-logos{gap:.6rem;margin-bottom:1.5rem}
.card-logos img{width:auto;height:56px;min-width:56px;max-width:150px;padding:12px;border-radius:16px}
.learn-main .learn-section-body .learn-grid .learn-card:first-child .card-logos{margin:auto 0;justify-content:center;gap:1rem;padding:1rem 0}
.learn-main .learn-section-body .learn-grid .learn-card:first-child .card-logos img{height:96px;min-width:96px;padding:20px;border-radius:26px;box-shadow:0 0 0 1px rgba(246,242,233,.1),0 24px 50px -20px rgba(0,0,0,.8)}
@media(max-width:600px){.card-logos img{height:48px;min-width:48px;padding:10px}.learn-main .learn-section-body .learn-grid .learn-card:first-child .card-logos img{height:72px;min-width:72px;padding:15px}}

/* ── Comparativa: en móvil cada fila se lee como una tarjeta, sin scroll horizontal ── */
@media(max-width:700px){
  .learn-main .learn-table{overflow:visible;border:0}
  .learn-main .learn-table table{min-width:0}
  .learn-main .learn-table thead{display:none}
  .learn-main .learn-table table,.learn-main .learn-table tbody,.learn-main .learn-table tr,.learn-main .learn-table th,.learn-main .learn-table td{display:block;width:100%}
  .learn-main .learn-table tr{margin:0 0 .9rem;padding:1.1rem 1.2rem;border:1px solid var(--line-strong);border-radius:18px;background:var(--bg-2)}
  .learn-main .learn-table tbody tr:last-child{background:linear-gradient(160deg,rgba(143,165,130,.2),rgba(143,165,130,.05)),var(--bg-2);box-shadow:inset 3px 0 0 var(--amber);border-color:rgba(232,163,61,.4)}
  .learn-main .learn-table tbody th{padding:0 0 .6rem;border:0;font:400 1.15rem var(--font-d);color:var(--ink)}
  .learn-main .learn-table tbody td{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:.8rem;padding:.55rem 0;border:0;border-top:1px solid var(--line);font-size:.85rem}
  .learn-main .learn-table tbody td::before{content:attr(data-label);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sage)}
}
.hub-stage:has(.hub-n0:hover) .hub-g0,.hub-stage:has(.hub-n1:hover) .hub-g1,.hub-stage:has(.hub-n2:hover) .hub-g2,.hub-stage:has(.hub-n3:hover) .hub-g3,.hub-stage:has(.hub-n4:hover) .hub-g4,.hub-stage:has(.hub-n5:hover) .hub-g5{opacity:1}
.hub-pill{width:28%}
/* El núcleo del diagrama de Home enlaza con la guía de IA. */
.hub-core{text-decoration:none;cursor:pointer}
.hub-core>span{transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.hub-core:hover>span{transform:scale(1.06)}
.hub-core small{font:500 clamp(.5rem,1.6cqi,.66rem) var(--font-t);letter-spacing:.14em;text-transform:uppercase;color:#a9c39a;opacity:.75;transition:opacity .3s,color .3s}
.hub-core:hover small{opacity:1;color:var(--amber)}
.hub-core:focus-visible{outline:2px solid var(--amber);outline-offset:6px;border-radius:50%}