/* Segunda edición: fotografía tropical, relato por desplazamiento y comparativa. */
:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.button { border-radius: 999px; transition: background .25s, box-shadow .25s, transform .25s; }
.button:active, .round-control:active { transform: scale(.97); }
.button:hover { box-shadow: 0 8px 24px #001c2820; }
.button-small { border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* La fotografía es una escena editorial, no una finca cliente. */
.cattle-scene { position: relative; isolation: isolate; min-height: 650px; display: flex; align-items: center; background: #102820; color: white; overflow: hidden; }
.cattle-background { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
.cattle-scene::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,#061c20ed 0%,#071d20c7 28%,#04182038 62%,#04182005 100%); }
.cattle-copy { padding-block: 100px; }
.cattle-copy .eyebrow { color: #c7e7d3; }
.cattle-copy h2 { font-size: clamp(42px,4.6vw,68px); max-width: 570px; letter-spacing: -.055em; }
.cattle-copy h2 span { color: #bff0cc; }
.cattle-copy>p { max-width: 390px; font-size: 17px; line-height: 1.8; color: #e2ebe4; margin-bottom: 30px; }
.button-glass { background: #ffffff17; border: 1px solid #ffffff70; color: white; backdrop-filter: blur(14px); }
.button-glass:hover { background: #ffffff2b; }
.photo-credit { position: absolute; bottom: 14px; right: 24px; color: #fff; font-size: 10px; background: #0a201ba6; border-radius: 20px; padding: 7px 12px; }
.livestock-detail { padding-top: 80px; }
.livestock-detail .animal-copy>h3 { font-size: 38px; line-height: 1.2; letter-spacing: -.04em; margin-top: 24px; }
.livestock-detail .animal-visual { border-radius: 24px; }
.livestock-bottom { padding-bottom: 85px; }
.livestock-cards article { transition: transform .3s; }
.livestock-cards article:hover { transform: translateY(-5px); }

/* Relato por scroll: mantiene el desplazamiento nativo, sin capturar la rueda. */
.story-section { background: radial-gradient(ellipse at 8% 30%,#19493f 0,transparent 48%),linear-gradient(155deg,#0c262d,#081c27 70%,#152d3c); }
.story-heading { max-width: 840px; }
.story-heading h2 { font-size: clamp(44px,5.7vw,80px); letter-spacing: -.055em; }
.story-heading>p { max-width: 480px; color: #becfc9; line-height: 1.8; font-size: 18px; }
.scroll-hint { display: inline-flex; gap: 10px; align-items: center; font-size: 12px; color: #c4d9cf; margin-top: 12px; }
.scroll-hint>span { font-size: 22px; }
.story-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 100px; position: relative; margin-top: 65px; }
.story-screen { align-self: start; position: sticky; top: 34px; min-width: 0; }
.story-scene { height: 480px; position: relative; isolation: isolate; }
.story-orbit { position: absolute; width: 340px; height: 340px; border: 1px solid #b3eac414; border-radius: 50%; left: 15%; top: 45px; z-index: -1; transition: transform 1s; }
.orbit-two { width: 440px; height: 440px; top: -5px; left: 5%; border-color: #b3eac409; }
.story-record { position: absolute; overflow: hidden; border: 1px solid #ffffff38; border-radius: 20px; box-shadow: 0 25px 65px #0004; transition: transform .7s cubic-bezier(.2,.65,.25,1),opacity .7s,border-color .7s; backdrop-filter: blur(18px); }
.record-operation { width: 86%; left: 5%; top: 20px; padding: 28px; background: linear-gradient(145deg,#42634feb,#1b3834f5); z-index: 3; }
.record-top { display: flex; align-items: center; gap: 12px; font-size: 9px; letter-spacing: .1em; color: #d1dfd6; }
.record-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #bdebc525; color: #c3f0ce; font-size: 20px; }
.record-dot { width: 6px; height: 6px; border-radius: 50%; background: #b7eabc; margin-left: auto; }
.record-operation h3 { font-size: 28px; margin: 22px 0; letter-spacing: -.04em; }
.record-field { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid #ffffff1a; font-size: 13px; }
.record-field>span { color: #b5cbbd; }
.record-field strong { font-weight: 500; }
.record-status { padding-top: 18px; font-size: 11px; color: #c5efcc; }
.record-livestock,.record-finance { width: 77%; padding: 24px; z-index: 2; opacity: 0; }
.record-livestock { left: 0; top: 152px; background: linear-gradient(145deg,#17493ff5,#0d3933fa); transform: translateY(50px) scale(.9); }
.record-finance { right: 0; top: 268px; background: linear-gradient(145deg,#2c5270f5,#152d47fa); transform: translateY(55px) scale(.9); }
.record-label { font-size: 9px; letter-spacing: .1em; color: #b8e1c8; }
.record-finance .record-label { color: #bcdcf5; }
.story-record h3 { line-height: 1.2; }
.record-livestock h3,.record-finance h3 { font-size: 23px; margin: 12px 0 16px; }
.record-livestock p,.record-finance p { margin: 0; color: #e1eae7; font-size: 12px; display: flex; justify-content: space-between; gap: 12px; }
.record-livestock p span,.record-finance p span { color: #c0d4cf; }
.record-line { height: 2px; display: block; width: 100%; margin-top: 18px; background: #bfeac32b; transform-origin: left; transform: scaleX(0); transition: transform .8s .15s; }
.story-connector { height: 200px; width: 1px; background: linear-gradient(#bbefc8,#83b9ef); position: absolute; top: 90px; left: 50%; opacity: 0; transition: opacity .6s; }
.story-united { position: absolute; top: 450px; width: 100%; text-align: center; color: #c6e7d3; font-size: 12px; opacity: 0; transform: translateY(12px); transition: opacity .6s,transform .6s; }
[data-stage="1"] .record-operation,[data-stage="2"] .record-operation,[data-stage="3"] .record-operation { transform: translate(20px,-48px) scale(.84); opacity: .4; z-index: 1; }
[data-stage="1"] .record-livestock { opacity: 1; transform: translate(20px,-25px); }
[data-stage="2"] .record-livestock { opacity: .5; transform: translate(0,-78px) scale(.92); z-index: 1; }
[data-stage="2"] .record-finance { opacity: 1; transform: translate(0,-28px); z-index: 3; }
[data-stage="3"] .record-operation { opacity: .65; transform: translate(0,-52px) scale(.78); }
[data-stage="3"] .record-livestock { opacity: 1; transform: translate(-12px,-28px) scale(.9); }
[data-stage="3"] .record-finance { opacity: 1; transform: translate(5px,-4px) scale(.92); z-index: 3; }
[data-stage="3"] .story-united { opacity: 1; transform: none; }
[data-stage="3"] .story-connector { opacity: .8; }
[data-stage="1"] .record-livestock .record-line,[data-stage="2"] .record-finance .record-line,[data-stage="3"] .record-line { transform: scaleX(1); }
[data-stage="3"] .story-orbit { transform: scale(1.13); }
.story-demo { color: #9cbcb1; font-size: 10px; text-align: center; margin: 22px 0; }
.story-progress { height: 2px; background: #ffffff1a; margin: 0 3px 16px; border-radius: 3px; }
.story-progress>span { display: block; width: 25%; height: 100%; background: linear-gradient(90deg,#b5e7c5,#a0cbee); transition: width .6s; }
[data-stage="1"] .story-progress>span { width: 50%; }[data-stage="2"] .story-progress>span { width: 75%; }[data-stage="3"] .story-progress>span { width: 100%; }
.story-controls { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.story-controls button { background: #ffffff05; color: #b9cbc4; border: 1px solid #ffffff15; border-radius: 12px; padding: 12px 7px; font: inherit; min-height: 62px; text-align: left; transition: background .3s,border-color .3s; }
.story-controls button>span:first-child { display: block; font-size: 13px; margin-bottom: 8px; }
.story-controls button>span:last-child { display: block; font-size: 10px; line-height: 1.4; }
.story-controls button[aria-pressed=true] { color: #e7f6ec; background: #bce8cb15; border-color: #afd8c05c; }
.story-chapter { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; padding: 65px 0; scroll-margin-top: 12vh; }
.chapter-index { color: #9cceae; font-size: 13px; letter-spacing: .09em; margin-bottom: 22px; }
.story-chapter h3 { font-size: clamp(32px,3.3vw,47px); font-weight: 500; letter-spacing: -.045em; line-height: 1.12; margin: 0 0 26px; }
.story-chapter p { font-size: 18px; line-height: 1.8; color: #c2d0cd; margin: 0; }
.story-chapter small { font-size: 12px; color: #a9c8b9; margin-top: 30px; padding-top: 22px; border-top: 1px solid #ffffff20; line-height: 1.7; }
.story-disclaimer { font-size: 12px; color: #acc7bd; max-width: 750px; line-height: 1.8; margin: 50px 0 0; }
.future-apps { padding: 20px 22px; border: 1px solid #d3ded9; background: #edf2ee; border-radius: 16px; margin-top: 24px; }
.future-apps>span { color: #436a58; font-size: 10px; letter-spacing: .08em; font-weight: 600; }
.future-apps p { color: #4a655b; font-size: 13px; line-height: 1.75; margin: 10px 0 0; }
.daily-photo { height: 540px; border-radius: 24px; }

/* Roles y reportes: controles explicativos, no una simulación de permisos real. */
.value-section { padding-bottom: 100px; }
.value-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; }
.value-card { padding: 38px; background: #edf1ed; border: 1px solid #dce3de; border-radius: 26px; overflow: hidden; }
.value-card h3 { font-size: 28px; letter-spacing: -.035em; line-height: 1.2; margin: 14px 0 18px; }
.value-card>p { color: #52665d; font-size: 16px; line-height: 1.75; }
.value-card small { display: block; color: #51675d; font-size: 12px; line-height: 1.8; }
.value-symbol { color: #528167; font-size: 43px; font-weight: 300; }
.role-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 28px; }
.role-buttons button { border: 1px solid #c4d2c9; background: #ffffff90; color: #31533f; border-radius: 20px; padding: 10px 13px; font-size: 12px; min-height: 42px; transition: background .25s,color .25s; }
.role-buttons button[aria-pressed=true] { background: #164b39; border-color: #164b39; color: #fff; }
.role-panels { padding: 22px; border-radius: 16px; background: #fff9; margin: 16px 0 22px; min-height: 177px; }
.role-panel h4 { font-size: 17px; margin: 0 0 10px; font-weight: 600; }
.role-panel p { color: #4c6759; font-size: 14px; line-height: 1.75; margin: 0; }
.export-card { background: linear-gradient(140deg,#e4edf3,#eff3f5); display: flex; flex-direction: column; justify-content: flex-end; }
.export-art { min-height: 215px; position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 30px; }
.paper-file { width: 126px; height: 160px; border-radius: 13px; padding: 23px; box-shadow: 0 20px 35px #10384024; background: #ffffffcf; border: 1px solid white; transition: transform .5s; }
.paper-file>span { display: block; font-size: 14px; letter-spacing: .1em; font-weight: 700; }
.paper-file i { display: block; width: 100%; height: 3px; margin-top: 18px; background: #7a98a42b; }
.pdf-file { color: #6e6175; transform: translate(15px,10px) rotate(-12deg); }
.excel-file { color: #297855; transform: translate(-5px,-15px) rotate(10deg); }
.export-card:hover .pdf-file { transform: translate(2px,5px) rotate(-16deg); }
.export-card:hover .excel-file { transform: translate(8px,-25px) rotate(7deg); }
.sheet-grid { margin-top: 19px; height: 64px; background-image: linear-gradient(#43806525 1px,transparent 1px),linear-gradient(90deg,#43806525 1px,transparent 1px); background-size: 22px 16px; border: 1px solid #43806525; }
.export-arrow { color: #668d90; font-size: 40px; position: absolute; bottom: -10px; right: 18%; }

/* Planes con superficies translúcidas y movimiento horizontal nativo. */
.pricing-section { position: relative; isolation: isolate; overflow: hidden; border: 0; color: #f4f9f6; background: #0e252c; }
.pricing-glow { position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 18% 15%,#32766069,transparent 40%),radial-gradient(ellipse at 88% 24%,#4a56865c,transparent 42%); pointer-events: none; }
.pricing-section .eyebrow { color: #c0e3ce; }
.pricing-section h2 { font-size: clamp(43px,5vw,68px); letter-spacing: -.05em; }
.pricing-section h2 span { color: #b9ddc9; }
.pricing-section .centered { max-width: 780px; margin-bottom: 38px; }
.pricing-section .section-copy { color: #c1d1ca; }
.plan-carousel-tools { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 20px 0 12px; color: #b9cfc5; font-size: 12px; }
.plan-carousel-tools>div { display: none; gap: 8px; }
.round-control { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid #bdcfc44a; background: #ffffff0c; color: inherit; font-size: 20px; transition: background .25s,transform .25s; }
.round-control:hover { background: #ffffff20; }
.round-control:disabled { opacity: .25; cursor: default; }
.plans-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; padding: 18px 1px 30px; scroll-snap-type: x mandatory; scroll-padding-inline: 1px; scrollbar-width: thin; scrollbar-color: #87ab9a #ffffff08; }
.plan { position: relative; overflow: hidden; padding: 25px 22px 22px; border-radius: 22px; border: 1px solid #ffffff38; background: linear-gradient(140deg,#ffffff17,#ffffff06); backdrop-filter: blur(14px); color: white; scroll-snap-align: start; transition: transform .3s,background .3s,border-color .3s; min-width: 0; }
.plan:hover { transform: translateY(-5px); border-color: #d4ecdc6e; }
.plan-recommended { background: linear-gradient(155deg,#aac8ac38,#92a9a90d); border-color: #c4f3ceaa; box-shadow: 0 0 0 1px #c4f3ce30,0 24px 60px #0002; }
.plan-kicker,.plan-badge { font-size: 9px; letter-spacing: .07em; min-height: 26px; display: inline-flex; align-self: flex-start; align-items: center; margin-bottom: 21px; }
.plan-kicker { color: #b4cbbd; }
.plan-badge { border-radius: 20px; padding: 6px 10px; background: #c4f3d1; color: #0d3e2c; letter-spacing: 0; font-weight: 650; }
.plan h3 { font-size: 26px; }
.plan-description { color: #c9d9d0; font-size: 13px; min-height: 48px; }
.plan-price { min-height: 69px; flex-direction: column; align-items: flex-start; gap: 9px; margin: 25px 0; }
.price-value { font-size: 60px; font-weight: 450; }
.plan-price>span:last-child { color: #bcd1c6; font-size: 11px; }
.price-custom { font-size: 35px; letter-spacing: -.045em; line-height: 1.4; padding-top: 7px; }
.plan-limits { color: #e3efe8; border-color: #e8f6ed26; font-size: 14px; gap: 9px; padding-block: 20px; }
.plan-features { padding: 18px 0 25px; }
.plan-features li { font-size: 12px; line-height: 1.6; padding-left: 18px; }
.plan-features li::before { content: '✓'; color: #b8ddc5; }
.plan .button { padding: 12px 10px; min-height: 46px; font-size: 12px; gap: 12px; }
.plan .button-plan { color: white; background: #ffffff0b; border-color: #bfd3c76b; }
.plan .button-plan:hover { background: #ffffff1b; }
.plan .button-mint { color: #153c2a; }
.plan-compare-link { display: block; align-self: center; font-size: 11px; color: #c7dece; padding: 17px 0 0; text-underline-offset: 5px; }
.plan-compare-link:hover { text-decoration: underline; }
.pricing-notes { max-width: 1100px; margin-top: 8px; }
.pricing-notes p { color: #b5c9bf; font-size: 12px; }
.comparison-section { margin-top: 76px; }
.comparison-heading { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.comparison-heading h3 { font-size: 33px; letter-spacing: -.04em; }
.comparison-heading p { font-size: 14px; color: #b9d0c2; line-height: 1.7; }
.compare-arrows { display: none; white-space: nowrap; }
.comparison-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.comparison-filters button { padding: 11px 18px; border-radius: 30px; min-height: 44px; color: #d2e3da; border: 1px solid #ffffff2b; background: #ffffff08; font-size: 12px; transition: background .2s,color .2s; }
.comparison-filters button[aria-pressed=true] { background: #d0e7d7; color: #143929; border-color: #d0e7d7; }
.comparison-scroll { overflow: auto; max-height: 660px; border: 1px solid #829b914f; border-radius: 18px; scrollbar-width: thin; scrollbar-color: #859c90 #142a30; }
.comparison-table { width: 100%; min-width: 1020px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.comparison-table caption { text-align: left; }
.comparison-table th,.comparison-table td { border-bottom: 1px solid #d4e2d818; padding: 20px 16px; text-align: center; line-height: 1.55; }
.comparison-table th:first-child { width: 28%; text-align: left; }
.comparison-table thead { position: sticky; top: 0; z-index: 3; }
.comparison-table thead th { background: #183236; font-size: 16px; padding-block: 22px; }
.comparison-table thead th:first-child { position: sticky; left: 0; z-index: 4; }
.comparison-table thead small { display: block; color: #bad4c7; font-size: 10px; font-weight: 400; margin-top: 8px; }
.comparison-table tbody th[scope=row] { position: sticky; left: 0; background: #122b30; z-index: 1; font-weight: 450; color: #dcebe2; }
.comparison-table tbody td { background: #ffffff02; color: #c6d9d0; font-size: 12px; }
.comparison-table .recommended-column { background: #335047; }
.comparison-table tbody .recommended-column { background: #a0e3b80c; }
.comparison-table .comparison-group th { background: #213b3b; color: #b9ddc7; font-size: 11px; letter-spacing: .04em; font-weight: 500; padding-block: 14px; text-transform: uppercase; }
.feature-yes { color: #bdf0cf; font-size: 20px; }
.feature-no { color: #93aaa0; font-size: 19px; }
.comparison-legend { color: #b9cfc2; display: flex; align-items: center; gap: 12px; font-size: 11px; line-height: 1.7; margin-top: 20px; }

/* Incorporación y evolución, con profundidad y microinteracciones. */
.start-section { padding-block: 100px; }
.steps { gap: 22px; }
.steps li { border: 1px solid #d8e3db; padding: 32px; border-radius: 22px; background: linear-gradient(150deg,#fff,#edf2ed); box-shadow: 0 15px 35px #0b352106; transition: transform .3s,box-shadow .3s; }
.steps li:hover { transform: translateY(-6px); box-shadow: 0 20px 35px #0b352115; }
.steps .step-number { position: static; font-size: 50px; font-weight: 300; color: #71957a; margin: 0 0 32px; }
.steps h3 { font-size: 23px; }
.evolution-section { background: radial-gradient(ellipse at 85% 30%,#dce6f0,transparent 58%),#e9efea; }
.evolution-heading { max-width: 750px; }
.evolution-heading h2 { font-size: clamp(40px,5.4vw,72px); letter-spacing: -.05em; }
.evolution-heading>p { max-width: 570px; color: #4d685a; font-size: 18px; line-height: 1.8; }
.evolution-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 25px; margin-top: 40px; }
.evolution-cards article { padding: 36px; background: #ffffff72; border: 1px solid #ffffffb0; border-radius: 22px; }
.evolution-cards .roadmap-label { display: inline-block; white-space: normal; border-color: #a9bdad; color: #446852; background: #edf2ed; border-radius: 20px; font-size: 9px; padding: 8px 13px; }
.evolution-cards h3 { font-size: 29px; margin: 25px 0 16px; letter-spacing: -.04em; }
.evolution-cards p { color: #526b5d; font-size: 15px; line-height: 1.8; margin: 0; }
.evolution-note { color: #506857; max-width: 900px; font-size: 12px; line-height: 1.8; margin-top: 24px; }

@media (max-width:1150px) {
  .story-layout { gap: 55px; grid-template-columns: 1.1fr 1fr; }
  .story-chapter p { font-size: 16px; }
  .record-operation { padding: 22px; }
  .record-livestock h3,.record-finance h3 { font-size: 20px; }
  .plans-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 285px; overflow-x: auto; }
  .plan-carousel-tools>div,.compare-arrows { display: flex; gap: 8px; }
  .value-card { padding: 28px; }
}
@media (max-width:900px) {
  .cattle-scene { min-height: 590px; }
  .cattle-scene::after { background: linear-gradient(90deg,#071e22ed,#071e22b0 40%,#041d2040); }
  .cattle-copy h2 { max-width: 430px; }
  .story-layout { grid-template-columns: 1fr; gap: 0; max-width: 610px; margin-inline: auto; }
  .story-screen { position: relative; top: auto; }
  .story-chapter { min-height: 0; padding: 45px 0 10px; }
  .story-chapter h3 { font-size: 35px; }
  .story-chapter small { margin-top: 20px; }
  .story-disclaimer { margin-top: 40px; }
  .story-heading h2 { font-size: 54px; }
  .story-heading>p { font-size: 16px; }
  .daily-section { align-items: start; }
  .daily-photo { height: 500px; }
  .value-grid { grid-template-columns: 1fr; }
  .value-card { padding: 36px; }
  .role-panels { min-height: 135px; }
  .export-art { margin: 0 0 30px; }
  .export-card { min-height: 410px; }
}
@media (max-width:700px) {
  .cattle-scene { min-height: 690px; align-items: flex-start; }
  .cattle-background { object-position: 57% bottom; }
  .cattle-scene::after { background: linear-gradient(180deg,#061d22e8,#071e229e 39%,#051c2110 78%,#071f2280); }
  .cattle-copy { padding-block: 55px 250px; }
  .cattle-copy h2 { font-size: 43px; max-width: 370px; }
  .cattle-copy>p { font-size: 15px; max-width: 330px; }
  .cattle-copy .button { font-size: 12px; min-height: 45px; }
  .photo-credit { right: 12px; bottom: 12px; font-size: 8px; }
  .livestock-detail { padding-top: 50px; }
  .livestock-detail .animal-copy>h3 { font-size: 32px; }
  .livestock-bottom { padding-bottom: 60px; }
  .story-heading h2 { font-size: 44px; }
  .story-layout { margin-top: 55px; }
  .story-scene { height: 378px; }
  .story-orbit { width: 240px; max-width: 80%; height: auto; aspect-ratio: 1; left: 14%; }
  .orbit-two { width: 305px; left: 4%; }
  .record-operation { width: 89%; left: 3%; top: 5px; padding: 20px; border-radius: 17px; }
  .record-operation h3 { font-size: 24px; margin: 17px 0; }
  .record-field { padding: 11px 0; font-size: 11px; }
  .record-top { font-size: 8px; }
  .record-livestock,.record-finance { padding: 18px; width: 90%; border-radius: 16px; }
  .record-livestock { top: 127px; }
  .record-finance { top: 217px; }
  .record-livestock h3,.record-finance h3 { font-size: 19px; margin: 12px 0; }
  .record-livestock p,.record-finance p { font-size: 10px; }
  .record-label { font-size: 8px; }
  .record-line { margin-top: 12px; }
  .story-united { top: 354px; font-size: 10px; }
  .story-demo { margin: 22px 0 17px; font-size: 9px; }
  .story-controls { gap: 5px; }
  .story-controls button { padding: 10px 7px; min-height: 67px; }
  .story-controls button>span:last-child { font-size: 9px; }
  .story-chapter { min-height: 310px; justify-content: flex-start; }
  .story-chapter h3 { font-size: 32px; }
  .story-chapter p { font-size: 15px; }
  .story-chapter small { font-size: 11px; }
  .future-apps { padding: 20px; }
  .daily-photo { height: 340px; }
  .value-section { padding-bottom: 60px; }
  .value-card { padding: 26px; border-radius: 22px; }
  .value-card h3 { font-size: 27px; }
  .value-card>p { font-size: 15px; }
  .role-buttons { gap: 6px; }
  .role-buttons button { font-size: 11px; padding: 10px 12px; }
  .role-panels { padding: 20px; min-height: 217px; }
  .export-art { min-height: 180px; }
  .pricing-section h2 { font-size: 43px; }
  .plan-carousel-tools { font-size: 11px; }
  .plan-carousel-tools>span { max-width: 190px; }
  .round-control { width: 42px; height: 42px; flex-shrink: 0; }
  .plans-grid { gap: 15px; grid-auto-columns: min(86vw,310px); }
  .plan { padding: 28px 25px 21px; }
  .plan h3 { font-size: 28px; }
  .plan-description { font-size: 14px; min-height: 45px; }
  .price-value { font-size: 63px; }
  .plan-price { min-height: 81px; }
  .plan-price>span:last-child { font-size: 12px; }
  .plan-features li { font-size: 13px; }
  .plan .button { font-size: 13px; }
  .plan-compare-link { font-size: 12px; }
  .pricing-notes p { font-size: 11px; }
  .comparison-section { margin-top: 55px; }
  .comparison-heading { align-items: flex-start; gap: 16px; }
  .comparison-heading h3 { font-size: 27px; }
  .comparison-heading p { font-size: 12px; }
  .compare-arrows { margin-top: 4px; }
  .comparison-filters { gap: 6px; }
  .comparison-filters button { font-size: 11px; padding: 9px 13px; }
  .comparison-scroll { max-height: 560px; border-radius: 13px; }
  .comparison-table { min-width: 850px; }
  .comparison-table th:first-child { width: 154px; }
  .comparison-table th,.comparison-table td { padding: 16px 12px; font-size: 11px; }
  .comparison-table thead th { font-size: 14px; }
  .comparison-table thead small { font-size: 9px; }
  .comparison-legend { flex-wrap: wrap; font-size: 10px; gap: 8px; }
  .start-section { padding-block: 60px; }
  .steps li { padding: 28px; }
  .steps .step-number { font-size: 44px; margin-bottom: 25px; }
  .evolution-heading h2 { font-size: 43px; }
  .evolution-heading>p { font-size: 16px; }
  .evolution-cards { grid-template-columns: 1fr; gap: 18px; }
  .evolution-cards article { padding: 28px; }
  .evolution-cards h3 { font-size: 27px; }
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-hint>span { animation: scroll-nudge 2.4s ease-in-out 3; }
  .role-panel:not([hidden]) { animation: panel-in .3s ease-out both; }
  /* Luz de una sola pasada: referencia visual consultada en Higgsfield.
     Implementación CSS propia, sin video, eventos de puntero continuos o SDK. */
  .story-record::after,.plan::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(110deg,transparent 25%,#d7f9e729 47%,#e1f3ff38 51%,transparent 72%); opacity: 0; transform: translateX(-110%); }
  [data-stage="1"] .record-livestock::after,[data-stage="2"] .record-finance::after { animation: light-pass 1.3s .2s ease-out both; }
  [data-stage="3"] .record-livestock::after,[data-stage="3"] .record-finance::after { animation: light-settle 1.2s .25s ease-out both; }
  .plan:focus-within::after { animation: light-pass 1.15s ease-out both; }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .plan:hover::after { animation: light-pass 1.15s ease-out both; }
}
@keyframes light-pass { 0%{opacity:0;transform:translateX(-110%)}20%{opacity:1}100%{opacity:0;transform:translateX(110%)} }
@keyframes light-settle { 0%{opacity:0;transform:translateX(-110%)}25%{opacity:.7}100%{opacity:0;transform:translateX(110%)} }
@keyframes scroll-nudge { 0%,100%{transform:translateY(0)}50%{transform:translateY(6px)} }
@media (prefers-reduced-motion: reduce) {
  .story-screen { position: relative; top: auto; }
  .story-chapter { min-height: 0; padding-block: 20px; }
  .story-chapter h3 { font-size: 30px; }
  .button:hover,.plan:hover,.steps li:hover,.livestock-cards article:hover { transform: none; }
  .pdf-file,.excel-file { transform: none!important; }
  *,*::before,*::after { animation: none!important; transition: none!important; scroll-behavior: auto!important; }
}