/* FlexigoTech Cloud: componentes visuales (web-8, 09-10-2026). Fuente: flexigotech-monetizacion/diseno/componentes/nube.css;
   en la web se sirve como /ft-nube.css (lo copia diseno/componentes/aplicar.py). Sobre los tokens de ft-2026.css. */
:root{--fn-ink:#0C0D14;--fn-text:#4A5163;--fn-muted:#5B6272;--fn-line:#E6E9F0;--fn-line-2:#CBD2DE;--fn-panel:#F7F8FA;
 --fn-acc:#714B67;--fn-acc-ink:#5B3C53;--fn-acc-wash:#F5EFF4;--fn-ok:#0A6E4D;--fn-ok-wash:#E7F5EE;--fn-warn:#8A5300;
 --fn-warn-wash:#FFF2D9;--fn-stop:#B42318;--fn-stop-wash:#FDEBE9;--fn-end:#5B6272;--fn-end-wash:#EEF0F4;--fn-r:14px;
 --fn-sombra:0 1px 2px rgba(12,13,20,.04),0 12px 32px -16px rgba(12,13,20,.16)}
.fn,.fn-wrap,.fn *{box-sizing:border-box}
.fn{font-family:var(--ft-sans,'Inter',system-ui,sans-serif);color:var(--fn-ink);padding:56px 0 24px}
.fn-wrap{max-width:var(--ft-container,1200px);margin:0 auto;padding:0 var(--ft-pad-x,20px)}
.fn-h2{font-size:clamp(1.6rem,3.4vw,2.25rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0 0 20px;text-wrap:balance}
.fn h3.fn-h3,.fn-h3{font-size:1.15rem;font-weight:750;letter-spacing:-.01em;line-height:1.3;margin:0 0 12px;color:var(--fn-ink)}
.fn-ico{width:24px;height:24px;flex:none}
::selection{background:#E9DDE6;color:var(--fn-ink)}

/* botones */
.fn-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:12px;
 font:650 1rem/1.2 var(--ft-sans,'Inter',sans-serif);text-decoration:none;cursor:pointer;border:1.5px solid var(--fn-acc);
 transition:background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease}
.fn-btn--pri{background:var(--fn-acc);color:#fff}
.fn-btn--pri:hover{background:var(--fn-acc-ink);border-color:var(--fn-acc-ink)}
.fn-btn--sec{background:#fff;color:var(--fn-acc-ink)}
.fn-btn--sec:hover{background:var(--fn-acc-wash)}
.fn-btn:focus-visible,.fn summary:focus-visible,.fn-cal-dia:focus-visible{outline:3px solid var(--fn-acc);outline-offset:3px}
.fn-btn:active{transform:translateY(1px)}

/* tarjeta de precio */
.fn-precio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);border:1px solid var(--fn-line);border-radius:20px;
 overflow:hidden;background:#fff;box-shadow:var(--fn-sombra)}
.fn-precio>div{padding:28px 30px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;position:relative}
.fn-precio-nube{background:var(--fn-acc-wash)}
.fn h3.fn-precio-h,.fn-precio-h{font-size:.82rem!important;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fn-acc-ink);margin:0}
.fn-cifra{margin:2px 0 0;line-height:1;font-variant-numeric:tabular-nums;display:flex;align-items:baseline}
.fn-num{font-size:clamp(2.6rem,6vw,3.5rem);font-weight:800;letter-spacing:-.04em;color:var(--fn-ink)}
.fn-cifra small{font-size:1.05rem;font-weight:650;color:var(--fn-muted);margin-left:6px;letter-spacing:0}
.fn-nota{margin:0;color:var(--fn-muted);font-size:.92rem;line-height:1.4}
.fn-precio .fn-btn{margin-top:auto}
.fn-precio-mod .fn-btn{margin-top:18px}
.fn-r{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.fn-seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:#fff;border:1px solid var(--fn-line-2)}
.fn-seg label{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;font-weight:650;font-size:.92rem;
 cursor:pointer;color:var(--fn-text);transition:background .16s ease,color .16s ease}
.fn-r--mes:checked~.fn-seg .fn-l--mes,.fn-r--ano:checked~.fn-seg .fn-l--ano{background:var(--fn-ink);color:#fff}
.fn-r--mes:focus-visible~.fn-seg .fn-l--mes,.fn-r--ano:focus-visible~.fn-seg .fn-l--ano{outline:3px solid var(--fn-acc);outline-offset:2px}
.fn-ahorro{font-style:normal;font-size:.74rem;font-weight:750;padding:2px 8px;border-radius:999px;background:var(--fn-ok-wash);color:var(--fn-ok)}
.fn-ano{display:none}
.fn-r--ano:checked~.fn-cifra .fn-ano,.fn-r--ano:checked~* .fn-ano{display:inline}
.fn-r--ano:checked~.fn-cifra .fn-mes,.fn-r--ano:checked~* .fn-mes{display:none}
.fn-probar{width:100%;margin-top:auto}
.fn-probar summary{list-style:none;width:fit-content}
.fn-probar summary::-webkit-details-marker{display:none}
.fn-probar[open] summary{background:var(--fn-acc-ink);border-color:var(--fn-acc-ink)}
.fn-pasos{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px;counter-reset:fnp}
.fn-pasos li{display:flex;align-items:center;gap:12px;font-weight:600;counter-increment:fnp}
.fn-pasos .fn-ico{width:40px;height:40px;padding:9px;border-radius:12px;background:#fff;color:var(--fn-acc);box-shadow:inset 0 0 0 1px var(--fn-line)}
.fn-sintarjeta{display:flex;align-items:center;gap:10px;margin:14px 0 0;color:var(--fn-ok);font-weight:650;font-size:.95rem}
.fn-cifra small.fn-desde{margin:0 8px 0 0}
.fn-comprar{width:100%}
.fn-comprar summary{list-style:none;width:fit-content}
.fn-comprar summary::-webkit-details-marker{display:none}
.fn-comprar[open] summary{border-color:var(--fn-ink)}
/* «Comprar el módulo» abre la caja de compra de la tienda (shop.js): sin su marco y sin repetir el precio de la tarjeta */
.fn-precio .ft-buybox{max-width:none;margin:12px 0 0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.fn-precio .ft-buybox .bx-price,.fn-precio .ft-buybox .bx-sub{display:none}
.fn-precio .ft-buybox .ft-btn{border-radius:12px;padding:11px 14px;font-weight:700;font-size:.95rem}.fn-precio .ft-buybox .ft-btn.pri{background:var(--fn-acc);color:#fff}.fn-precio .ft-buybox .ft-btn.pri:hover{background:var(--fn-acc-ink)}.fn-precio .ft-buybox .ft-btn.sec{margin-top:0;background:#fff;color:var(--fn-acc-ink);border:1.5px solid var(--fn-acc)}   /* los botones de la tienda, en los colores de la tarjeta */

/* web-10: en la ficha, la tarjeta va arriba, en el héroe y encima de su imagen (aplicar.py); lo que repetía el precio y
   los botones viejos del héroe, fuera */
.fn.fn-hero-col{display:flex;flex-direction:column;gap:24px;min-width:0;padding:0}
.fn-hero-col>.fn-precio{order:-2}   /* en el móvil la plantilla sube la imagen (order:-1): la tarjeta, antes */
@media(max-width:1024px){.fm-hero:has(> .fn-hero-col),.fm-hero :has(> .fn-hero-col){row-gap:20px}}
/* en el móvil, la tarjeta sube: el h1 a 26-28 px (main.js lo pone a 34 !important) y de las migas solo los enlaces de arriba
   (la página ya la nombra el h1); web-11: también en la plantilla p-z (sus migas van fuera del héroe), y su eyebrow se
   queda en «Módulo para Odoo» (la categoría y las versiones siguen más abajo) */
@media(max-width:600px){.fm-hero:has(.fn-hero-col) h1{font-size:clamp(26px,7vw,28px)!important;line-height:1.1!important}.fm-hero:has(.fn-hero-col) .fm-crumbs>:nth-last-child(-n+2),body:has(.fn-hero-col) .fm-crumb li:nth-last-child(-n+2),.fm-hero:has(.fn-hero-col) .fm-eyebrow>span~span{display:none}}
.fm-hero:has(> .fn-hero-col),.fm-hero :has(> .fn-hero-col){align-items:start}
.fm-hero:has(.fn-hero-col) :is(.fm-price,.fm-chip--price,.fm-actions),.fm-hero:has(.fn-hero-col) li:has(> .fm-price){display:none}
.fn-hero-col .fn-precio{grid-template-columns:1fr;text-align:left}
.fn-hero-col .fn-precio>div{padding:20px 24px;gap:8px}
.fn-hero-col .fn-num{font-size:2.5rem}
.fn-hero-col .fn-precio-mod .fn-btn,.fn-hero-col .fn-precio .fn-btn{margin-top:6px}
.fn-hero-col .fn-precio-nube{flex-flow:row wrap;align-items:center;justify-content:space-between;column-gap:12px}
.fn-hero-col .fn-precio-nube>:not(.fn-precio-h):not(.fn-seg){flex-basis:100%}
/* web-11: con una sola columna, la tarjeta justo después del h1 y antes de la entradilla (con la entradilla larga de Suecia,
   Bélgica o el hotel caía bajo el aviso de cookies a 375): la columna del texto y la de la tarjeta se funden en la rejilla
   del héroe (display:contents) y se ordenan; la imagen, al final */
@media(max-width:859px){
 .fm-hero:has(> .fn-hero-col),.fm-hero :has(> .fn-hero-col){row-gap:0!important}
 .fm-hero :has(> h1):has(~ .fn-hero-col),.fm-hero .fn.fn-hero-col{display:contents}
 .fm-hero :has(> h1):has(~ .fn-hero-col)>h1~*{order:2}
 .fm-hero:has(.fn-hero-col) .fm-eyebrow{justify-self:start}
 .fn-hero-col>.fn-precio{order:1;margin:2px 0 24px}
 .fn-hero-col>:not(.fn-precio){order:3;margin-top:8px}
}
@media(max-width:600px){.fn-hero-col .fn-precio>div{padding:16px 20px}.fn-hero-col .fn-ahorro{white-space:nowrap}}

/* qué hace la nube */
.fn-hace{margin-top:44px}
.fn-iconos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 32px}
.fn-iconos li{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--fn-line);font-weight:620;
 font-size:1.02rem;line-height:1.35}
.fn-iconos .fn-ico,.fn-servs .fn-ico{width:46px;height:46px;padding:11px;border-radius:13px;background:var(--fn-acc-wash);color:var(--fn-acc)}

/* funciona sin pagar */
.fn-gratis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.fn-gratis>div{display:flex;align-items:center;gap:16px;padding:18px 22px;border-radius:var(--fn-r);line-height:1.4}
.fn-gratis b{display:block;font-size:1.02rem}
.fn-gratis span{color:var(--fn-text)}
.fn-gratis .fn-ico{width:30px;height:30px}
.fn-gratis-sin{background:var(--fn-ok-wash)}
.fn-gratis-sin .fn-ico,.fn-gratis-sin b{color:var(--fn-ok)}
.fn-gratis-con{background:var(--fn-acc-wash)}
.fn-gratis-con .fn-ico,.fn-gratis-con b{color:var(--fn-acc-ink)}

/* calendario de plazos */
.fn-cal{margin-top:40px}
.fn-cal ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.fn-cal-dia{display:flex;align-items:center;gap:16px;padding:12px 16px 12px 12px;border:1px solid var(--fn-line);border-radius:var(--fn-r);
 text-decoration:none;color:var(--fn-ink);background:#fff;transition:border-color .16s ease,box-shadow .16s ease}
.fn-cal-dia:hover{border-color:var(--fn-acc);box-shadow:var(--fn-sombra)}
.fn-cal-dia time{flex:none;width:66px;border-radius:10px;overflow:hidden;text-align:center;box-shadow:inset 0 0 0 1px var(--fn-line)}
.fn-cal-mes{display:block;background:var(--fn-acc);color:#fff;font-size:.7rem;font-weight:750;letter-spacing:.05em;text-transform:uppercase;padding:3px 0}
.fn-cal-num{display:block;font-size:1.7rem;font-weight:800;letter-spacing:-.03em;padding:4px 0 6px;font-variant-numeric:tabular-nums}
.fn-cal-que{font-weight:650;line-height:1.35}

/* cabecera de la página de la nube y ficha dentro de .fm-wrap */
.fn-hero-copy{max-width:760px}
.fn-sub{font-size:clamp(1.15rem,2.2vw,1.4rem);line-height:1.45;color:var(--fn-text);margin:14px 0 22px;text-wrap:balance}
.fn-hero .fn-dg{margin-top:44px}
.fn-uno-t{font-size:1.1rem;font-weight:620;margin:0 0 16px}
.fm-wrap .fn-wrap{padding:0;max-width:none}
.fm-wrap .fn-legal{margin-left:0;margin-right:0}

/* lo largo, plegado */
.fn-legal,.fn-mas{margin:28px auto 0;max-width:var(--ft-container,1200px)}
.fn-legal>summary,.fn-mas>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;
 padding:16px 20px;border:1px solid var(--fn-line);border-radius:var(--fn-r);font-weight:650;color:var(--fn-acc-ink);background:#fff}
.fn-legal>summary::-webkit-details-marker,.fn-mas>summary::-webkit-details-marker{display:none}
.fn-legal>summary::after,.fn-mas>summary::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;
 border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .2s ease;flex:none}
.fn-legal[open]>summary::after,.fn-mas[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
.fn-legal>summary:hover,.fn-mas>summary:hover{background:var(--fn-acc-wash)}
.fn-legal{margin-left:var(--ft-pad-x,20px);margin-right:var(--ft-pad-x,20px)}
@media(min-width:1240px){.fn-legal{margin-left:auto;margin-right:auto}}
.fn-mas>div,.fn-mas>.fn-mas-in{margin-top:18px}
/* web-11 (pulido): en la página de la nube (main.fgc) los siete «Ver el detalle» eran barras con borde, como campos de un
   formulario, entre sección y sección: ahora un enlace con su flecha; y la lista de módulos de cada servicio, con la misma
   flecha en vez del triángulo del navegador. precios.html usa .fn-mas a su manera: no se toca */
.fgc .fn-mas{margin-top:18px}
.fgc .fn-mas>summary{display:inline-flex;justify-content:flex-start;gap:10px;padding:8px 0;border:0;border-radius:6px;background:none}
.fgc .fn-mas>summary:hover{background:none;text-decoration:underline;text-underline-offset:4px}
.fgc .fn-mas>summary:focus-visible,.fgc .fn-serv-mods summary:focus-visible{outline:3px solid var(--fn-acc);outline-offset:3px}
.fgc .fn-serv-mods summary{list-style:none;display:inline-flex;align-items:center;gap:8px}
.fgc .fn-serv-mods summary::-webkit-details-marker{display:none}
.fgc .fn-serv-mods summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
 transform:rotate(-45deg);transition:transform .2s ease}
.fgc .fn-serv-mods[open] summary::after{transform:rotate(45deg) translateY(-2px)}

/* diagrama de la nube */
.fn-dg{display:grid;grid-template-columns:minmax(0,1fr) minmax(96px,.75fr) minmax(0,1.15fr) minmax(96px,.75fr) minmax(0,1fr);
 align-items:center;margin:0}
.fn-dg-nodo{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:22px 14px;border-radius:20px;
 background:#fff;border:1px solid var(--fn-line);box-shadow:var(--fn-sombra);line-height:1.3}
.fn-dg-nodo b{font-size:1.05rem;font-weight:750}
.fn-dg-txt{display:flex;flex-direction:column;gap:4px}
.fn-dg-txt>span{font-size:.9rem;color:var(--fn-text)}
.fn-dg-ico{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;background:var(--fn-acc-wash);color:var(--fn-acc);margin-bottom:4px}
.fn-dg-ico .fn-ico{width:30px;height:30px}
.fn-dg-nodo--nube{background:var(--fn-acc);border-color:var(--fn-acc);color:#fff;padding:30px 16px;
 box-shadow:0 22px 44px -20px rgba(113,75,103,.6)}
.fn-dg-nodo--nube .fn-dg-txt>span{color:#F1E9EF}
.fn-dg-nodo--nube .fn-dg-ico{background:rgba(255,255,255,.16);color:#fff}
.fn-dg-via{position:relative;height:2px;background:repeating-linear-gradient(90deg,var(--fn-line-2) 0 7px,transparent 7px 13px)}
.fn-dg-dato{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:max-content;max-width:150px;text-align:center;
 font-size:.78rem;font-weight:650;line-height:1.3;color:var(--fn-muted)}
.fn-dg-via::after{content:"";position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:var(--fn-acc);
 box-shadow:0 0 0 4px rgba(113,75,103,.15);animation:fn-viaje 2.8s cubic-bezier(.16,1,.3,1) infinite}
.fn-dg-via--b::after{animation-direction:reverse;animation-delay:1.4s}
@keyframes fn-viaje{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 10px);opacity:0}}
@keyframes fn-viaje-v{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:calc(100% - 10px);opacity:0}}

/* si dejas de pagar: dos pistas */
.fn-imp{display:grid;gap:14px}
.fn-imp-pista{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:16px}
.fn-imp-rot{font-size:.8rem;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:var(--fn-muted)}
.fn-imp-hitos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;position:relative}
.fn-imp-hitos::before{content:"";position:absolute;top:21px;left:21px;right:33%;height:3px;border-radius:3px;
 background:linear-gradient(90deg,var(--fn-warn) 0 50%,var(--fn-stop) 50% 100%)}
.fn-imp-hitos li{position:relative;display:flex;flex-direction:column;gap:3px;line-height:1.35}
.fn-imp-hitos .fn-ico{width:44px;height:44px;padding:10px;border-radius:50%;margin-bottom:8px;position:relative}
.fn-imp-d0 .fn-ico{background:var(--fn-warn-wash);color:var(--fn-warn);box-shadow:0 0 0 4px #fff}
.fn-imp-d7 .fn-ico{background:var(--fn-stop-wash);color:var(--fn-stop);box-shadow:0 0 0 4px #fff}
.fn-imp-d21 .fn-ico{background:var(--fn-end-wash);color:var(--fn-end);box-shadow:0 0 0 4px #fff}
.fn-imp-dia{font-size:.78rem;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:var(--fn-muted)}
.fn-imp-hitos b{font-size:1.02rem}
.fn-imp-s{color:var(--fn-text);font-size:.94rem}
.fn-imp-siempre{display:flex;align-items:center;gap:10px;margin:0;padding:12px 18px;border-radius:999px;background:var(--fn-ok-wash);
 color:var(--fn-ok);font-weight:700}
.fn-imp-siempre .fn-ico{width:22px;height:22px}
.fn-imp-nunca{margin:4px 0 0 112px;font-weight:650;color:var(--fn-ink)}

/* servicios de la nube */
.fn-servs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 32px}
.fn-serv{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-top:1px solid var(--fn-line);line-height:1.35}
.fn-serv b{display:block;font-size:1.02rem}
.fn-serv span{color:var(--fn-text)}
.fn-serv-mods summary{cursor:pointer;color:var(--fn-acc-ink);font-weight:650;font-size:.9rem;margin-top:6px;width:fit-content}
.fn-serv-mods ul{margin:8px 0 0;padding-left:18px;font-size:.9rem;line-height:1.5}
.fn-serv-mods a{color:var(--fn-acc-ink)}

/* pasos, hechos y datos (página de la nube) */
.fn-pasos4{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;position:relative}
.fn-pasos4::before{content:"";position:absolute;top:28px;left:28px;right:calc(25% - 28px);height:2px;
 background:repeating-linear-gradient(90deg,var(--fn-line-2) 0 7px,transparent 7px 13px)}
.fn-pasos4>li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-weight:650;line-height:1.35}
.fn-pasos4>li>.fn-ico{width:56px;height:56px;padding:14px;border-radius:50%;background:var(--fn-acc);color:#fff;box-shadow:0 0 0 6px #fff}
.fn-pasos4>li>small{font-size:.78rem;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:var(--fn-muted)}
/* web-11: en la página de la nube, cada paso con su botón (el 3, dónde se activa la prueba en Odoo, desplegable) */
.fn-pasos4--botones .fn-btn{min-height:40px;padding:0 16px;font-size:.92rem;margin-top:6px}
.fn-pasos4--botones .fn-probar{width:auto;margin-top:0}
.fn-pasos4--botones .fn-probar[open] summary{color:#fff}
.fn-pasos4--botones .fn-pasos{margin-top:12px;font-size:.92rem}
.fn-pasos4--botones .fn-pasos .fn-ico{width:34px;height:34px;padding:7px;border-radius:10px;background:var(--fn-acc-wash);box-shadow:none}
.fn-pasos4--botones .fn-sintarjeta{font-size:.88rem}
.fn-hechos{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.fn-hechos li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;background:#fff;
 border:1px solid var(--fn-line);font-weight:620;font-size:.93rem}
.fn-hechos .fn-ico{width:20px;height:20px;color:var(--fn-acc)}
.fn-viaja{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fn-viaja>div{padding:20px 22px;border-radius:var(--fn-r);background:var(--fn-panel)}
.fn-viaja b{display:block;margin-bottom:10px}
.fn-viaja ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fn-viaja li{display:flex;align-items:center;gap:10px}
.fn-viaja-si .fn-ico{color:var(--fn-acc)}
.fn-viaja-no{background:var(--fn-ok-wash)!important}
.fn-viaja-no .fn-ico,.fn-viaja-no b{color:var(--fn-ok)}
.fn-uno{margin-top:24px}

@media(max-width:860px){
 .fn-precio{grid-template-columns:1fr}
 .fn-gratis,.fn-viaja{grid-template-columns:1fr}
 .fn-pasos4{grid-template-columns:1fr 1fr;row-gap:24px}
 .fn-pasos4::before{display:none}
}
@media(max-width:720px){
 .fn{padding-top:40px}
 .fn-precio>div{padding:22px 20px}
 .fn-dg{grid-template-columns:1fr;justify-items:stretch}
 .fn-dg-via{width:2px;height:64px;margin:0 auto;background:repeating-linear-gradient(180deg,var(--fn-line-2) 0 7px,transparent 7px 13px)}
 .fn-dg-dato{left:16px;bottom:auto;top:50%;transform:translateY(-50%);text-align:left;width:min(150px,40vw);max-width:none}
 .fn-dg-nodo{flex-direction:row;text-align:left;gap:14px;padding:14px 16px;border-radius:16px}
 .fn-dg-nodo--nube{padding:18px 16px}
 .fn-dg-ico{width:46px;height:46px;margin:0;flex:none}
 .fn-dg-ico .fn-ico{width:24px;height:24px}
 .fn-dg-via::after{left:-4px;top:0;animation-name:fn-viaje-v}
 .fn-imp-pista{grid-template-columns:1fr;gap:10px}
 .fn-imp-hitos{grid-template-columns:1fr;gap:14px}
 .fn-imp-hitos::before{top:22px;bottom:30%;left:21px;right:auto;width:3px;height:auto;
  background:linear-gradient(180deg,var(--fn-warn) 0 50%,var(--fn-stop) 50% 100%)}
 .fn-imp-hitos li{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:start}
 .fn-imp-hitos .fn-ico{grid-row:span 3;margin:0}
 .fn-imp-nunca{margin-left:0}
 .fn-pasos4{grid-template-columns:1fr}
 .fn-pasos4>li{display:grid;grid-template-columns:56px 1fr;column-gap:14px;align-items:center}
 .fn-pasos4>li>.fn-ico{grid-row:span 2}
 .fn-pasos4--botones>li>.fn-ico{grid-row:span 3;align-self:start}
 .fn-pasos4--botones>li>:not(.fn-ico){grid-column:2;justify-self:start}
}
@media(prefers-reduced-motion:reduce){.fn-dg-via::after{animation:none;display:none}.fn-btn,.fn-seg label{transition:none}}

/* precios-claros (web-pro, 21-10): UN precio, UN botón (Suscribirse: los tres pasos y la caja de compra), el Pro en una línea y
   «Qué incluye». Sustituye a la tarjeta de dos columnas con mensual/anual. */
.fn-precio.fn-pc{display:flex;flex-direction:column;align-items:stretch;gap:16px;padding:26px 28px}
.fn-pc>div,.fn-hero-col .fn-pc>div{padding:0}
.fn-pc-precio{margin:0;font-size:clamp(1.6rem,2.6vw,1.95rem);font-weight:800;letter-spacing:-.035em;line-height:1.08;
 color:var(--fn-ink);font-variant-numeric:tabular-nums;text-wrap:balance}
.fn-pc-sus{width:100%;margin:0}
.fn-pc-sus>summary.fn-btn{width:100%;min-height:52px;font-size:1.05rem}
.fn-pc-sus[open]>summary{margin-bottom:6px}
.fn-pc-compra{margin-top:14px}
.fn-pc-pro{margin:0;font-size:.95rem;line-height:1.45;color:var(--fn-text)}
.fn-pc-opc{display:block;margin-top:4px;color:var(--fn-muted);font-size:.86rem}
.fn-pc-inc,.fn-hero-col .fn-pc-inc{border-top:1px solid var(--fn-line);padding-top:16px!important}
.fn-pc-lista{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px}
.fn-pc-lista li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;line-height:1.4;color:var(--fn-text)}
.fn-pc-lista .fn-ico{width:20px;height:20px;margin-top:1px;color:var(--fn-acc)}
@media(max-width:600px){.fn-precio.fn-pc{padding:20px 18px;gap:14px}.fn-pc-precio{font-size:1.65rem}.fn-pc-lista li{font-size:.92rem}}