/*
  Text hierarchy (2026-10-21). Before: decorative headlines at 40–90 px while the text that explains, prices and closes
  (descriptions, plan items, buttons, menu) sat at 7–13 px. Now the message reads first:
  display ≤ 76 px · section titles ≤ 52 px · lead 17–20 px · body ≥ 16 px · actions 15 px · labels ≥ 12 px.
  Loaded last; `:root` raises specificity over the page sheets without !important.
*/
:root .hero h1{font-size:clamp(42px,6.2vw,76px);line-height:1}
:root :is(.problems-intro,.migration-copy,.section-heading,.billing-copy,.plans-heading,.trial-heading,.faq-section,.contact-copy) h2{font-size:clamp(34px,4.2vw,52px);line-height:1.05}
:root .final-content h2{font-size:clamp(38px,5vw,60px);line-height:1.02}
:root #final-personalized{font-size:clamp(17px,1.5vw,20px);line-height:1.55}
:root .problem-text h3{font-size:clamp(30px,3.1vw,42px);line-height:1.1;margin-bottom:14px}
/* The client's doubt, under the promise: it frames the chapter, it doesn't lead it. */
:root .problem-question{font-size:clamp(18px,1.6vw,21px);line-height:1.4;font-style:italic;color:var(--muted);margin:0 0 20px}
:root .solution-copy h4{font-size:clamp(20px,1.8vw,24px)}

/* Lead: the sentence that says what Castorcito does for this business. */
:root :is(.hero-description,#problems-context,.section-intro>p:first-child,.billing-copy>p:not(.eyebrow),.trial-heading>p,.contact-lead,.plans-context){font-size:clamp(17px,1.5vw,20px);line-height:1.55}
:root .hero-description{max-width:640px;margin-inline:auto}
/* Body. */
:root :is(.problem-friction,.solution-copy p,.billing-benefits p,.trial-steps p,.plan-card-top>p,.faqs p,.section-intro .muted,.contact-reasons p,.contact-note p,.custom-plan-note,.features-teaser p){font-size:16px;line-height:1.6}
:root :is(.billing-benefits h3,.trial-steps h3){font-size:20px}
:root .hero-side p{font-size:17px;line-height:1.5}
:root .scene-caption{font-size:13px}
:root .live-pill{letter-spacing:.08em;max-width:100%}

/* Navigation and actions. */
:root .header nav a,:root .header .login{font-size:15px}
:root .header .button{font-size:14px}
:root .button{font-size:15px}
:root .button.small{font-size:14px}
:root .text-link{font-size:15px}
:root .business-option{font-size:14px}
:root .faq-topics button{font-size:14px}
:root .trial-bottom>a:not(.button){font-size:15px}

/* Labels: small by design, never unreadable. */
:root :is(.eyebrow,.micro,.problem-index,.plan-number,.plan-includes,.solution-copy>span,.live-pill,.plan-ribbon,.contact-paper-top span){font-size:12px;letter-spacing:.12em}
:root .stage-caption{font-size:12px;transform:translateY(30px)}
:root .hero-bottom span,:root #scene-instruction{font-size:13px}

/* Demo. */
:root .demo-steps{font-size:14px}
:root .demo-switch button{font-size:15px}
:root .app-bottom{font-size:12px}
:root .demo-badge{font-size:11px}
:root .demo-caption,:root .context-conversion{font-size:15px}
:root .change-business{font-size:14px}

/* Order board. */

/* Plans: what you get and what it costs. */
:root .plan-card li{font-size:15px;line-height:1.5}
:root .plan-price span{font-size:14px}
:root .plans-trial b{font-size:16px}
:root .plans-trial p{font-size:14px}
:root .commission-note strong{font-size:18px}
:root .commission-note p,:root .pricing-footnote{font-size:14px;line-height:1.55}
:root .loyalty-proof span{font-size:11px}
:root .loyalty-proof p{font-size:15px}
:root .plan-comparison summary{font-size:16px}
:root .plan-comparison :is(th,td,caption){font-size:14px}

/* Questions. */
:root .faqs summary{font-size:17px}

/* Footer. */
:root .site-footer :is(p,a){font-size:15px}
:root .site-footer h2{font-size:13px}

@media(max-width:760px){
 :root .header .button{font-size:13px}
 :root .hero-side p{font-size:16px}
}

/* Remaining actions and notes. */
:root .hero-bottom .signup-link{font-size:15px}
:root #scene-loading{font-size:13px}
:root .contact-topics span{font-size:14px}
:root .contact-privacy{font-size:13px}
:root #contact-form small{font-size:12px}
:root .final-note{font-size:14px}
:root .creator-social small{font-size:13px}

/* Illustrations of the system (stages, receipt, phone) keep their own scale: they are pictures. Only the message bubbles and captions are raised. */
:root :is(.proof-notification,.online-notification) small{font-size:12px}
:root :is(.proof-notification,.online-notification) strong{font-size:14px}

/* Mobile bar: the closing offer must be readable. */
:root .mobile-conversion b{font-size:15px}
:root .mobile-conversion span{font-size:13px}
:root .mobile-conversion .button{font-size:15px}
:root .billing-receipt small{font-size:11px}

/* Header: one line at every width; the floating pill makes room for the larger menu. */
:root .header :is(nav a,.login,.button){white-space:nowrap}
:root .header[data-stuck]{width:min(1100px,calc(100% - 24px))}
@media(max-width:1100px){:root .header nav{gap:16px}:root .header nav a,:root .header .login{font-size:14px}}
:root :is(.solution-copy h4,.loyalty-proof p) br{display:inline}

/* Features page: each function's promise and explanation are the content, not footnotes. */
:root .features-hero h1{font-size:clamp(40px,5.4vw,68px)}
:root .features-hero-copy>p:not(.eyebrow){font-size:clamp(17px,1.5vw,19px);line-height:1.6}
:root :is(.back-link,.features-demo-link,.index-plans){font-size:15px}
:root .feature-group-head h3{font-size:clamp(26px,2.6vw,34px)}
:root .feature-group-head p{font-size:17px;line-height:1.55}
:root .group-number{font-size:12px;letter-spacing:.12em}
:root .feature-item summary b{font-size:18px}
:root .feature-item summary>span>span{font-size:15px;line-height:1.45}
:root :is(.feature-description p,.feature-condition){font-size:16px;line-height:1.6}
:root .feature-example>span{font-size:12px;letter-spacing:.12em}
:root .feature-example p{font-size:16px;line-height:1.6}
:root .feature-index a span{font-size:15px}
:root .feature-index a small{font-size:13px}
:root .feature-search label,:root #explorar p{font-size:15px}
:root .orbit-caption{font-size:12px}
:root .header .mobile-plans-link{font-size:14px}
@media(min-width:761px){:root .header .mobile-plans-link{display:none}}
/* The promise title is longer than the old slogan: the link below the button joins the flow instead of sitting at a fixed bottom. */

/* Content order by impact (2026-10-22): the promise or the offer leads; slogans and doubts accompany. */
:root .feature-group-head>p.group-promise{font-size:clamp(18px,1.6vw,21px);line-height:1.4;font-weight:600;margin:0 0 10px}
:root .section-heading .eyebrow{display:block}

/* Contact form while it cannot send: clearly off (not a form that looks ready), with the two actions that work. */
:root #contact-fields:disabled{opacity:.45;cursor:not-allowed}
:root #contact-fields:disabled *{cursor:not-allowed}
:root .contact-status:not(.contact-ready){font-size:14px}
:root .contact-fallback{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
:root .contact-fallback[hidden]{display:none}

/*
  Background words of the illustrations (STOCK, CLARIDAD, CONECTADO, TODO EN ORDEN): they live in their own band above the cards, still
  (no parallax), on one line that fits the stage, so no card ever covers them. The cards keep their positions, moved down by the band.
*/
:root .problem-stage{--wm-band:84px;height:calc(490px + var(--wm-band));container-type:inline-size}
:root .problem-stage>:not(.stage-watermark):not(.stage-caption){margin-top:var(--wm-band)}
:root .problem-stage .stage-watermark{top:0;left:0;right:auto;transform:none!important;translate:none!important;letter-spacing:-.06em;line-height:.9;z-index:0}
:root .inventory-stage .stage-watermark{font-size:min(84px,30cqi);color:#a6b98e66}
:root .cash-stage .stage-watermark{font-size:min(84px,19cqi);color:#c6a27566}
:root .online-stage .stage-watermark{font-size:min(84px,16.5cqi);color:#8aa46c40}
:root .billing-stage{--wm-band:132px;height:calc(520px + var(--wm-band))}
:root .billing-stage>:not(.billing-watermark){margin-top:var(--wm-band)}
:root .billing-stage .billing-watermark{top:0;left:0;right:auto;transform:none!important;translate:none!important;font-size:min(64px,12vw);line-height:.95;letter-spacing:-.05em}
@media(max-width:760px){
 :root .problem-stage{--wm-band:64px;height:calc(500px + var(--wm-band))}
 :root .cash-stage{height:calc(500px + var(--wm-band))}
 :root .billing-stage{--wm-band:112px;height:calc(500px + var(--wm-band))}
}
@media(max-width:400px){
 :root .problem-stage{height:calc(465px + var(--wm-band))}
 :root .cash-stage{height:calc(475px + var(--wm-band))}
 :root .billing-stage{height:calc(470px + var(--wm-band))}
}
:root .business-picker h2{margin-bottom:4px}
:root .business-hint{font-size:14px;line-height:1.5;color:var(--muted);margin:0 0 16px}
:root #context-message{font-size:clamp(15px,1.3vw,17px);line-height:1.5}
.migration-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7%;align-items:start;padding-block:85px 80px;border-top:1px solid var(--line)}
.migration-copy h2{margin:10px 0 20px}
.migration-copy>p:not(.eyebrow){font-size:clamp(17px,1.5vw,20px);line-height:1.55;margin:0 0 28px;max-width:520px}
.migration-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.migration-actions .text-link{font-size:15px}
.migration-steps{list-style:none;margin:0;padding:0;display:grid;gap:30px}
.migration-steps li{display:grid;grid-template-columns:auto 1fr;column-gap:20px}
.migration-steps .trial-dot{grid-row:span 2;margin:0}
.migration-steps h3{font-size:20px;line-height:1.3;margin:6px 0 6px}
.migration-steps p{font-size:16px;line-height:1.55;color:var(--muted);margin:0}
@media(max-width:760px){.migration-band{grid-template-columns:1fr;gap:40px;padding-block:60px}}
@media(min-width:1151px){.footer-top{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)) minmax(0,1.1fr)}}
@media(max-width:1150px) and (min-width:901px){.footer-top{grid-template-columns:repeat(3,minmax(0,1fr))}}