@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Nunito-normal-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/Nunito-normal-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/Nunito-normal-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/Nunito-normal-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/Nunito-normal-900.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/PlayfairDisplay-italic-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/PlayfairDisplay-italic-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/PlayfairDisplay-normal-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/PlayfairDisplay-normal-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/PlayfairDisplay-normal-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================
   VF.CSS — Sistema compartido del funnel Recetario Viviendo Fit
   Fuentes self-hosted arriba + tokens y componentes abajo.
   Las páginas /upsell /downsell /gracias usan .vf-funnel
   ============================================================ */
:root {
  --teal: #0EA896;
  --dark-navy: #0D1B4B;
  --blue: #1B2E7A;
  --light-teal: #5EE8D8;
  --light-blue: #F0F6FF;
  --gold: #FFB800;
  --gold-deep: #E6A500;
  --white: #FFFFFF;
  --gray-300: #D1D5DB;
  --gray-500: #6B7280;
  --gray-700: #374151;
}

html, body { margin: 0 !important; padding: 0 !important; width: 100%; overflow-x: hidden; }

.vf-funnel * { margin: 0; padding: 0; box-sizing: border-box; }
.vf-funnel { font-family: "Nunito", sans-serif; color: var(--gray-700); background: var(--white); -webkit-font-smoothing: antialiased; min-height: 100vh; }
.vf-funnel h1, .vf-funnel h2, .vf-funnel h3 { font-family: "Playfair Display", serif; }
.vf-funnel .container { max-width: 640px; margin: 0 auto; padding: 0 20px; }
.vf-funnel .section { padding: 48px 20px; }

/* Barra superior de estado del pedido */
.vf-funnel .order-bar { background: var(--dark-navy); color: var(--white); text-align: center; font-size: 13px; font-weight: 800; padding: 12px 16px; letter-spacing: .3px; }
.vf-funnel .order-bar .check { color: var(--light-teal); }

/* Barra de progreso del funnel */
.vf-funnel .progress { display: flex; gap: 6px; max-width: 320px; margin: 18px auto 0; }
.vf-funnel .progress span { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.25); }
.vf-funnel .progress span.done { background: var(--light-teal); }
.vf-funnel .progress span.current { background: var(--gold); }

/* Hero oscuro de funnel */
.vf-funnel .funnel-hero { background: linear-gradient(160deg, var(--dark-navy) 0%, var(--blue) 55%, var(--teal) 140%); color: var(--white); text-align: center; padding: 36px 20px 44px; }
.vf-funnel .funnel-hero h1 { font-size: clamp(26px, 6vw, 36px); font-weight: 800; line-height: 1.22; margin: 14px auto 14px; max-width: 600px; }
.vf-funnel .funnel-hero p { color: rgba(255,255,255,.92); font-size: 16px; line-height: 1.65; max-width: 540px; margin: 0 auto; }
.vf-funnel .eyebrow { display: inline-block; background: rgba(255,184,0,.15); border: 1px solid rgba(255,184,0,.45); color: var(--gold); font-size: 12px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 16px; border-radius: 50px; }

/* Tarjetas */
.vf-funnel .card { background: var(--white); border-radius: 20px; box-shadow: 0 4px 24px rgba(13,27,75,.08), 0 20px 50px rgba(13,27,75,.05); padding: 30px 24px; }
.vf-funnel .card-lb { background: var(--light-blue); border-radius: 16px; padding: 20px; }

/* Item de inclusión */
.vf-funnel .inc-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid #EDF1F7; }
.vf-funnel .inc-item:last-child { border-bottom: none; }
.vf-funnel .inc-icon { min-width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(160deg, var(--teal), var(--blue)); display: flex; align-items: center; justify-content: center; font-size: 19px; }
.vf-funnel .inc-item h4 { font-family: "Nunito", sans-serif; font-weight: 900; font-size: 15px; color: var(--dark-navy); margin-bottom: 3px; }
.vf-funnel .inc-item p { font-size: 14px; line-height: 1.55; color: #4B5563; }
.vf-funnel .inc-item .tag-incluido { font-size: 11px; font-weight: 900; color: var(--teal); letter-spacing: 1px; text-transform: uppercase; }

/* Precio anclado */
.vf-funnel .precio-bloque { text-align: center; margin: 26px 0 8px; }
.vf-funnel .precio-bloque .ancla { color: var(--gray-500); text-decoration: line-through; font-size: 18px; font-weight: 700; }
.vf-funnel .precio-bloque .precio { font-family: "Nunito", sans-serif; font-weight: 900; font-size: clamp(44px, 9vw, 56px); color: var(--dark-navy); line-height: 1.05; }
.vf-funnel .precio-bloque .precio small { font-size: 22px; }
.vf-funnel .precio-bloque .nota { font-size: 13px; color: var(--gray-500); margin-top: 4px; }
.vf-funnel .funnel-hero .precio-bloque .precio { color: var(--gold); text-shadow: 0 2px 18px rgba(255,184,0,.3); }
.vf-funnel .funnel-hero .precio-bloque .ancla, .vf-funnel .funnel-hero .precio-bloque .nota { color: rgba(255,255,255,.75); }

/* Botones de decisión binaria */
.vf-funnel .cta-button { position: relative; display: block; background: linear-gradient(160deg, #FFC520, var(--gold)); color: var(--dark-navy); font-family: "Nunito", sans-serif; font-weight: 900; font-size: 17px; padding: 18px 28px; border-radius: 14px; text-decoration: none; text-align: center; box-shadow: 0 4px 20px rgba(255,184,0,.4); transition: transform .25s ease, box-shadow .25s ease; max-width: 480px; margin: 0 auto; overflow: hidden; }
.vf-funnel .cta-button::after { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); transition: left .6s ease; }
.vf-funnel .cta-button:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,184,0,.55); }
.vf-funnel .cta-button:hover::after { left: 125%; }
.vf-funnel .cta-button:focus-visible { outline: 3px solid var(--light-teal); outline-offset: 3px; }
.vf-funnel .decline-link { display: block; text-align: center; margin: 18px auto 0; color: var(--gray-500); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.vf-funnel .decline-link:hover { color: var(--gray-700); }
.vf-funnel .micro-copy { font-size: 14px; color: var(--gray-500); text-align: center; margin-top: 12px; letter-spacing: .3px; }
.vf-funnel .funnel-hero .micro-copy { color: rgba(255,255,255,.8); }

/* Pasos numerados (gracias) */
.vf-funnel .paso { display: flex; gap: 16px; align-items: flex-start; padding: 20px; background: var(--light-blue); border-radius: 16px; margin-bottom: 14px; }
.vf-funnel .paso-num { min-width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(160deg, var(--teal), var(--blue)); color: var(--white); font-weight: 900; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.vf-funnel .paso h4 { font-family: "Nunito", sans-serif; font-weight: 900; font-size: 16px; color: var(--dark-navy); margin-bottom: 4px; }
.vf-funnel .paso p { font-size: 14.5px; line-height: 1.6; color: #4B5563; }
.vf-funnel .paso .mini-btn { display: inline-block; margin-top: 10px; background: var(--dark-navy); color: var(--white); font-weight: 800; font-size: 13px; padding: 9px 18px; border-radius: 9px; text-decoration: none; }

/* Garantía compacta */
.vf-funnel .garantia-mini { display: flex; gap: 14px; align-items: center; background: var(--light-blue); border-radius: 14px; padding: 16px 18px; max-width: 480px; margin: 24px auto 0; text-align: left; }
.vf-funnel .garantia-mini .sello { min-width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(160deg, var(--gold), var(--gold-deep)); color: var(--white); font-weight: 900; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 16px; line-height: 1; }
.vf-funnel .garantia-mini .sello small { font-size: 9px; letter-spacing: .5px; }
.vf-funnel .garantia-mini p { font-size: 13.5px; line-height: 1.5; color: #4B5563; }

/* Animaciones de flujo */
.vf-funnel .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.vf-funnel .reveal.in { opacity: 1; transform: none; }
.vf-funnel .stagger > * { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.vf-funnel .stagger.in > * { opacity: 1; transform: none; }
.vf-funnel .stagger.in > *:nth-child(1) { transition-delay: .05s; }
.vf-funnel .stagger.in > *:nth-child(2) { transition-delay: .17s; }
.vf-funnel .stagger.in > *:nth-child(3) { transition-delay: .29s; }
.vf-funnel .stagger.in > *:nth-child(4) { transition-delay: .41s; }
.vf-funnel .stagger.in > *:nth-child(5) { transition-delay: .53s; }
@media (prefers-reduced-motion: reduce) {
  .vf-funnel .reveal, .vf-funnel .stagger > * { opacity: 1; transform: none; transition: none; }
  .vf-funnel .cta-button::after { display: none; }
}

@media (min-width: 641px) {
  .vf-funnel .section { padding: 64px 40px; }
  .vf-funnel .cta-button { font-size: 19px; padding: 20px 40px; }
}