/* jimmychupillon.com · V7: cuenta, contacto, carrusel orbital y paneles */
[hidden]{display:none !important}

/* ---------- Cabecera: iniciar sesión / cuenta ---------- */
.jch .jch-login{display:inline-flex; align-items:center; gap:.45rem; border:1.5px solid var(--jh-ink); color:var(--jh-ink); background:transparent; font-weight:600; font-size:1rem; text-decoration:none; padding:.55rem 1rem; border-radius:999px; white-space:nowrap; line-height:1.2}
.jch .jch-login:hover{background:var(--jh-ink); color:var(--jh-bg)}
.jch .jch-login svg{width:17px; height:17px}
.jch .jch-acc{position:relative}
.jch .jch-av{width:42px; height:42px; border-radius:50%; border:2px solid var(--jh-firma); background:var(--jh-deep); color:var(--jh-deep-ink); font:700 1.05rem/1 "Figtree",system-ui,sans-serif; cursor:pointer; padding:0; display:grid; place-items:center; overflow:hidden}
.jch .jch-av img{width:100%; height:100%; object-fit:cover; display:block}
.jch .jch-dd{position:absolute; right:0; top:calc(100% + .5rem); min-width:230px; background:var(--jh-surface); border:1px solid var(--jh-line); border-radius:14px; box-shadow:0 18px 40px -18px rgba(10,30,18,.35); padding:.4rem; z-index:60}
.jch .jch-dd-h{padding:.55rem .7rem .6rem; border-bottom:1px solid var(--jh-line); margin-bottom:.3rem}
.jch .jch-dd-h b{display:block; color:var(--jh-ink); font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:240px}
.jch .jch-dd-h small{color:var(--jh-muted); font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; max-width:240px}
.jch .jch-dd a,.jch .jch-dd button{display:block; width:100%; text-align:left; padding:.55rem .7rem; border-radius:9px; border:0; background:none; color:var(--jh-ink); font:500 .95rem "Figtree",system-ui,sans-serif; text-decoration:none; cursor:pointer}
.jch .jch-dd a:hover,.jch .jch-dd button:hover{background:color-mix(in srgb,var(--jh-firma) 22%,transparent)}
@media (max-width:900px){ .jch .jch-login span{display:none} .jch .jch-login{padding:.55rem; width:42px; height:42px; justify-content:center} }
@media (max-width:480px){ .jch .jch-login,.jch .jch-av{width:38px; height:38px} }

/* ---------- Portada: carrusel orbital ---------- */
.orb-wrap{position:relative; display:flex; flex-direction:column; align-items:center}
.orb{position:relative; width:min(100%, 560px, calc((100vh - 290px) * 1.3)); aspect-ratio:1.3/1; min-width:280px; user-select:none; -webkit-user-select:none; touch-action:pan-y}
.orb-ring{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible}
.orb-ring ellipse,.orb-ring circle{fill:none; stroke:color-mix(in srgb,var(--strong) 24%,transparent); stroke-width:1}
.orb-ring .in{stroke-dasharray:3 6; stroke:color-mix(in srgb,var(--strong) 16%,transparent)}
.orb-dot{position:absolute; width:8px; height:8px; border-radius:50%; background:var(--gold); opacity:.8; box-shadow:0 0 0 5px color-mix(in srgb,var(--gold) 18%,transparent)}
/* íconos que giran */
.orb-ic{position:absolute; inset:0; pointer-events:none}
.oi{position:absolute; left:50%; top:50%; width:clamp(40px, 9.5%, 52px); aspect-ratio:1; padding:0; border-radius:50%; pointer-events:auto; cursor:pointer;
  display:grid; place-items:center; color:var(--strong); background:var(--surface); border:1px solid var(--line);
  box-shadow:0 6px 16px -8px rgba(19,38,27,.35); transition:background .35s, color .35s, box-shadow .35s, opacity .35s; will-change:transform}
.oi svg{width:52%; height:52%}
.oi:hover,.oi:focus-visible{background:var(--strong); color:var(--bg); outline:none; box-shadow:0 0 0 4px color-mix(in srgb,var(--firma) 45%,transparent), 0 8px 18px -8px rgba(19,38,27,.45)}
.oi.act{background:color-mix(in srgb,var(--firma) 30%,var(--surface)); box-shadow:0 0 0 3px var(--gold), 0 8px 18px -8px rgba(19,38,27,.4)}
/* V9: miniaturas de las gráficas en la órbita inclinada */
.oi.oi-mini{width:clamp(66px, 15.5%, 96px); aspect-ratio:440/270; border-radius:10px; padding:0; overflow:hidden; background:#fff; border:1px solid var(--line);
  transition:box-shadow .35s, opacity .35s, filter .35s}
.oi.oi-mini svg{width:100%; height:100%; display:block}
.oi.oi-mini .ch *{animation:none !important}
.oi.oi-mini .draw{stroke-dashoffset:0 !important}
.oi.oi-mini .slide{transform:translateX(var(--x))}
.oi.oi-mini.atras{filter:saturate(.75); box-shadow:0 3px 8px -6px rgba(19,38,27,.3)}
.oi.oi-mini:hover,.oi.oi-mini:focus-visible{background:#fff; opacity:1 !important; filter:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--firma) 60%,transparent), 0 10px 22px -10px rgba(19,38,27,.5)}
.oi.oi-mini.act{background:#fff; box-shadow:0 0 0 2.5px var(--gold), 0 8px 18px -8px rgba(19,38,27,.4)}
.oi-dbca .ch .c1{fill:#DCEFCF} .oi-dbca .ch .c2{fill:#B3DDA9} .oi-dbca .ch .c3{fill:#7CC690} .oi-dbca .ch .c4{fill:#4E9E68} .oi-dbca .ch .c5{fill:#EAD98E}
/* gráfica grande al centro */
.ob{position:absolute; left:50%; top:50%; width:56%; margin:0; z-index:20; pointer-events:none;
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:.55rem .6rem .5rem;
  box-shadow:0 26px 50px -24px rgba(19,38,27,.45), 0 0 0 1px color-mix(in srgb,var(--firma) 55%,transparent);
  opacity:0; transform:translate(-50%,-50%) translateY(var(--ty,-180px)) scale(.12);
  transition:transform .6s cubic-bezier(.45,.05,.2,1), opacity .45s ease}
.ob.on{opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto}
.ob-h{display:flex; align-items:center; gap:.45rem; margin:0 0 .4rem; min-width:0}
.ob-chip{flex-shrink:0; font:700 .58rem/1 "Figtree",system-ui,sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--strong); background:color-mix(in srgb,var(--firma) 30%,transparent); padding:.32rem .48rem; border-radius:999px}
.ob-t{font:600 .8rem/1.2 "Figtree",system-ui,sans-serif; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ob .ch{display:block; width:100%; height:auto; border-radius:9px}
.ob .ide{border-radius:9px; overflow:hidden; border:1px solid #D9DEE3}
.orb-cap{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.5rem; flex-wrap:wrap; width:100%}
.orb-dots{display:flex; gap:.4rem}
.orb-dots button{width:8px; height:8px; padding:0; border-radius:999px; border:0; background:color-mix(in srgb,var(--strong) 28%,transparent); cursor:pointer; transition:width .35s ease, background .35s}
.orb-dots button[aria-current="true"]{width:24px; background:var(--strong)}
.orb-cap .ilus{margin:0}
/* animaciones de las gráficas en la tarjeta del centro */
.ob .draw{stroke-dasharray:1; stroke-dashoffset:0}
.ob.play .draw{animation:jc-draw2 1.6s .25s cubic-bezier(.4,0,.2,1) both}
@keyframes jc-draw2{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.ob.play .fade{animation:jc-fade .8s ease both; animation-delay:var(--d,0ms)}
.ob.play .fade2{animation:jc-fade .7s 1.1s ease both}
.ob.play .pop{animation:jc-pop .55s cubic-bezier(.2,.8,.3,1.2) both; animation-delay:var(--d,0ms); transform-box:fill-box; transform-origin:center}
.ob.play .dots circle{animation:jc-pop .5s ease both; animation-delay:calc(200ms + var(--d,0ms)); transform-box:fill-box; transform-origin:center}
.ob.play .grow{animation:jc-grow .9s cubic-bezier(.2,.7,.2,1) both; animation-delay:var(--d,0ms); transform-box:fill-box; transform-origin:bottom}
.ob.play .slide{animation:jc-slide 1.1s cubic-bezier(.2,.7,.2,1) both; animation-delay:var(--d,0ms)}
.ob.play .type{animation:jc-type .5s steps(1) both; animation-delay:var(--d,0ms)}
@keyframes jc-type{from{opacity:0} to{opacity:1}}
.ob-dbca .ch .c1{fill:#DCEFCF} .ob-dbca .ch .c2{fill:#B3DDA9} .ob-dbca .ch .c3{fill:#7CC690} .ob-dbca .ch .c4{fill:#4E9E68} .ob-dbca .ch .c5{fill:#EAD98E}
@media (prefers-reduced-motion: reduce){ .ob,.oi{transition:none} .ob.play *{animation:none !important} }
@media (max-width:900px){ .orb{width:min(100%, 520px)} }
@media (max-width:560px){ .orb{aspect-ratio:1.1/1} .ob{width:64%; padding:.4rem .45rem .35rem; border-radius:12px} .ob-t{font-size:.72rem} .ob-chip{font-size:.52rem; padding:.28rem .4rem} .oi{width:38px} .oi.oi-mini{width:58px} }

/* ---------- Contacto (sección y pie) ---------- */
.contact .actions{display:flex; gap:.75rem; flex-wrap:wrap}
.ct-btn{display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.3rem; border-radius:14px; font:600 1rem "Figtree",system-ui,sans-serif; text-decoration:none; cursor:pointer; border:1.5px solid var(--deep); background:var(--deep); color:#F1F7EE}
.ct-btn svg{width:20px; height:20px}
.ct-btn.alt{background:transparent; color:var(--ink); border-color:var(--ink)}
.ct-btn:hover{transform:translateY(-1px)}
:root[data-theme="dark"] .ct-btn{background:var(--firma); border-color:var(--firma); color:var(--firma-ink)}
:root[data-theme="dark"] .ct-btn.alt{background:transparent; color:var(--ink); border-color:var(--ink)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ct-btn{background:var(--firma); border-color:var(--firma); color:var(--firma-ink)} :root:not([data-theme="light"]) .ct-btn.alt{background:transparent; color:var(--ink); border-color:var(--ink)} }
.foot{grid-template-columns:1.3fr .8fr 1fr}
@media (max-width:860px){ .foot{grid-template-columns:1fr 1fr} .foot > div:first-child{grid-column:1/-1} }
@media (max-width:520px){ .foot{grid-template-columns:1fr} }
.foot-ct h3{font:700 .85rem/1 "Figtree",system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#F2C75C; margin:.35rem 0 1rem}
.foot-ct ul{list-style:none; margin:0; padding:0; display:grid; gap:.75rem}
.foot-ct a{color:var(--deep-ink); text-decoration:none; font-weight:600; font-size:1.08rem; opacity:.85}
.foot-ct a:hover{opacity:1; color:var(--firma)}
.foot-links{display:flex; gap:1.2rem; flex-wrap:wrap; margin-top:.6rem}
.foot-links a{color:var(--deep-muted); font-size:.85rem}

/* ---------- Formulario de correo (ventana) ---------- */
/* paleta propia de la ventana (funciona igual en todas las páginas) */
.jcf-ov{--f-surface:#FFFFFF; --f-ink:#17291E; --f-line:#D3E3D0; --f-bg:#F4F7F2; --f-muted:#4B6352; --f-deep:#13261B; --f-strong:#2F6B45; --f-firma:#8FD3A4; --f-maiz:#F5E8AB; --f-display:"Fraunces",Georgia,serif}
:root[data-theme="dark"] .jcf-ov{--f-surface:#1A2B22; --f-ink:#E3EFE0; --f-line:#2A3F32; --f-bg:#13201A; --f-muted:#A6BBA8; --f-deep:#8FD3A4; --f-strong:#9FDDB1}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .jcf-ov{--f-surface:#1A2B22; --f-ink:#E3EFE0; --f-line:#2A3F32; --f-bg:#13201A; --f-muted:#A6BBA8; --f-deep:#8FD3A4; --f-strong:#9FDDB1} }
:root[data-theme="dark"] .jcf .jcf-ok{color:#12301F}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .jcf .jcf-ok{color:#12301F} }
.jcf-ov{position:fixed; inset:0; z-index:9990; background:rgba(8,20,13,.58); display:grid; place-items:center; padding:1rem; overflow:auto; animation:jc-fade .2s ease}
.jcf{position:relative; width:100%; max-width:620px; background:var(--f-surface); color:var(--f-ink); border-radius:22px; padding:1.6rem 1.6rem 1.3rem; box-shadow:0 30px 70px rgba(0,0,0,.3); font:15px/1.5 "Figtree",system-ui,sans-serif; max-height:calc(100vh - 2rem); overflow:auto}
.jcf h2{font-family:var(--f-display); font-weight:600; font-size:1.45rem; margin:0 0 .25rem}
.jcf-sub{margin:0 0 1.1rem; color:var(--f-muted); font-size:.93rem}
.jcf-x{position:absolute; top:.7rem; right:.8rem; width:38px; height:38px; border-radius:50%; border:1px solid var(--f-line); background:var(--f-bg); color:var(--f-ink); font-size:1.3rem; line-height:1; cursor:pointer}
.jcf form{display:grid; gap:.85rem}
.jcf label{display:grid; gap:.3rem; font-weight:600; font-size:.9rem}
.jcf input:not([type=checkbox]):not([type=file]),.jcf select,.jcf textarea{width:100%; font:inherit; font-weight:400; padding:.7rem .8rem; border-radius:11px; border:1px solid var(--f-line); background:var(--f-bg); color:var(--f-ink); margin:0}
.jcf textarea{resize:vertical; min-height:110px}
.jcf input:focus,.jcf select:focus,.jcf textarea:focus{outline:2px solid var(--f-firma); outline-offset:1px}
.jcf-2{display:grid; grid-template-columns:1fr 1fr; gap:.85rem}
@media (max-width:560px){ .jcf-2{grid-template-columns:1fr} .jcf{padding:1.3rem 1.1rem 1.1rem} }
.jcf-drop{position:relative; display:flex !important; align-items:center; gap:.8rem; border:1.5px dashed color-mix(in srgb,var(--f-strong) 45%,transparent); border-radius:14px; padding:.85rem 1rem; cursor:pointer; background:color-mix(in srgb,var(--f-firma) 10%,transparent)}
.jcf-drop input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%}
.jcf-drop span{display:grid; gap:.1rem; font-weight:400}
.jcf-drop b{color:var(--f-strong)}
.jcf-drop small{color:var(--f-muted); font-size:.82rem}
.jcf-list{list-style:none; margin:.5rem 0 0; padding:0; display:grid; gap:.35rem}
.jcf-list li{display:flex; justify-content:space-between; align-items:center; gap:.5rem; font-size:.86rem; background:var(--f-bg); border:1px solid var(--f-line); border-radius:9px; padding:.4rem .6rem}
.jcf-list li span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.jcf-list button{border:0; background:none; color:#B24A34; font:600 .82rem inherit; cursor:pointer}
.jcf-hp{position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important}
.jcf-ck{display:flex !important; grid-template-columns:none; gap:.55rem !important; align-items:flex-start; font-weight:400 !important; font-size:.86rem !important; color:var(--f-muted)}
.jcf-ck input{width:18px; height:18px; margin-top:2px; flex-shrink:0; accent-color:var(--f-strong)}
.jcf-ts{min-height:0}
.jcf-msg{margin:0; font-size:.9rem; min-height:1.2em}
.jcf-msg.err{color:#B24A34} .jcf-msg.warn{color:#8A6A12}
:root[data-theme="dark"] .jcf-msg.err{color:#F2A590}
.jcf-bt{display:flex; justify-content:flex-end; gap:.6rem; flex-wrap:wrap}
.jcf-bt button,.jcf-done .jcf-ok{font:600 .98rem "Figtree",system-ui,sans-serif; padding:.75rem 1.25rem; border-radius:12px; cursor:pointer; border:1.5px solid var(--f-ink); background:transparent; color:var(--f-ink)}
.jcf .jcf-ok{background:var(--f-deep); border-color:var(--f-deep); color:#F1F7EE}
.jcf .jcf-ok:disabled{opacity:.6; cursor:wait}
.jcf-done{text-align:center; padding:1.5rem .5rem .5rem}
.jcf-check{width:64px; height:64px; margin:0 auto 1rem; border-radius:50%; display:grid; place-items:center; font-size:2rem; color:#fff; background:var(--f-strong)}

/* ---------- Páginas de cuenta ---------- */
.acc-page{max-width:1180px; margin:0 auto; padding:clamp(2rem,5vw,3.5rem) clamp(1.25rem,4vw,2.5rem) 2rem; display:grid; grid-template-columns:1fr minmax(0,460px); gap:clamp(2rem,5vw,4rem); align-items:center}
@media (max-width:880px){ .acc-page{grid-template-columns:1fr} .acc-side{order:2} }
.acc-side h1{font-family:var(--display); font-weight:600; font-size:clamp(1.8rem,3vw,2.5rem); line-height:1.1; margin:.8rem 0 1rem}
.acc-side h1 em{color:var(--strong); font-weight:500}
.acc-side p{color:var(--muted); max-width:46ch}
.acc-perks{list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:.8rem}
.acc-perks li{display:flex; gap:.75rem; align-items:flex-start}
.acc-perks i{flex-shrink:0; width:32px; height:32px; border-radius:10px; background:var(--leaf); display:grid; place-items:center; font-style:normal; color:var(--strong); font-weight:700}
.acc-card{background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:clamp(1.4rem,3vw,2rem); box-shadow:var(--shadow)}
.acc-tabs{display:grid; grid-template-columns:1fr 1fr; background:var(--bg); border-radius:12px; padding:4px; margin-bottom:1.25rem}
.acc-tabs button{font:600 .95rem "Figtree",system-ui,sans-serif; padding:.6rem; border:0; border-radius:9px; background:transparent; color:var(--muted); cursor:pointer}
.acc-tabs button[aria-selected="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08)}
.acc-g{display:flex; align-items:center; justify-content:center; gap:.7rem; width:100%; font:600 1rem "Figtree",system-ui,sans-serif; padding:.8rem 1rem; border-radius:12px; border:1.5px solid var(--line); background:#fff; color:#1F1F1F; cursor:pointer}
.acc-g:hover{border-color:#9AA0A6}
.acc-gis{display:flex; justify-content:center; min-height:44px; width:100%}
.acc-gis[hidden]{display:none !important}
.acc-g svg{width:20px; height:20px}
.acc-or{display:flex; align-items:center; gap:.8rem; color:var(--muted); font-size:.85rem; margin:1.1rem 0}
.acc-or::before,.acc-or::after{content:""; flex:1; height:1px; background:var(--line)}
.acc-f{display:grid; gap:.85rem}
.acc-f label{display:grid; gap:.3rem; font-weight:600; font-size:.9rem}
.acc-f input:not([type=checkbox]),.acc-f select,.acc-f textarea{width:100%; font:inherit; font-weight:400; padding:.72rem .85rem; border-radius:11px; border:1px solid var(--line); background:var(--bg); color:var(--ink); margin:0}
.acc-f input:focus,.acc-f select:focus{outline:2px solid var(--firma); outline-offset:1px}
.acc-f .acc-ck{display:flex; gap:.55rem; align-items:flex-start; font-weight:400; font-size:.86rem; color:var(--muted)}
.acc-f .acc-ck input{width:18px; height:18px; margin-top:2px; flex-shrink:0; accent-color:var(--strong)}
.acc-pw{position:relative}
.acc-pw button{position:absolute; right:.4rem; top:50%; transform:translateY(-50%); border:0; background:none; color:var(--muted); font:600 .8rem "Figtree",system-ui,sans-serif; cursor:pointer; padding:.4rem}
.acc-meter{height:5px; border-radius:9px; background:var(--line); overflow:hidden; margin-top:-.4rem}
.acc-meter i{display:block; height:100%; width:0; transition:width .3s, background .3s}
.acc-hint{font-size:.8rem; color:var(--muted); font-weight:400}
.acc-btn{font:600 1rem "Figtree",system-ui,sans-serif; padding:.85rem 1rem; border-radius:12px; border:0; background:var(--deep); color:#F1F7EE; cursor:pointer; width:100%}
.acc-btn:disabled{opacity:.6; cursor:wait}
.acc-btn.sec{background:transparent; color:var(--ink); border:1.5px solid var(--line)}
.acc-btn.danger{background:transparent; color:#B24A34; border:1.5px solid color-mix(in srgb,#B24A34 45%,transparent)}
:root[data-theme="dark"] .acc-btn:not(.sec):not(.danger){background:var(--firma); color:var(--firma-ink)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .acc-btn:not(.sec):not(.danger){background:var(--firma); color:var(--firma-ink)} }
.acc-link{background:none; border:0; padding:0; color:var(--strong); font:600 .88rem "Figtree",system-ui,sans-serif; cursor:pointer; text-decoration:underline}
.acc-msg{margin:0; font-size:.9rem; min-height:1.2em}
.acc-msg.err{color:#B24A34} .acc-msg.ok{color:var(--strong)} .acc-msg.warn{color:#8A6A12}
.acc-legal{font-size:.8rem; color:var(--muted); margin:1rem 0 0; text-align:center}
.acc-off{background:color-mix(in srgb,var(--maiz) 70%,transparent); border-radius:14px; padding:1rem 1.1rem; font-size:.92rem}
.acc-wide{max-width:980px; margin:0 auto; padding:clamp(2rem,5vw,3rem) clamp(1.25rem,4vw,2.5rem) 2rem}
.acc-wide h1{font-family:var(--display); font-weight:600; font-size:clamp(1.7rem,3vw,2.2rem); margin:0 0 .4rem}
.acc-grid{display:grid; grid-template-columns:260px 1fr; gap:1.5rem; align-items:start; margin-top:1.5rem}
@media (max-width:820px){ .acc-grid{grid-template-columns:1fr} }
.acc-me{text-align:center}
.acc-me .big{width:96px; height:96px; border-radius:50%; margin:0 auto .8rem; background:var(--deep); color:#F1F7EE; display:grid; place-items:center; font:700 2.2rem "Figtree",system-ui,sans-serif; overflow:hidden; border:3px solid var(--firma)}
.acc-me .big img{width:100%; height:100%; object-fit:cover}
.acc-me b{display:block; font-size:1.05rem}
.acc-me small{color:var(--muted); word-break:break-all}
.acc-badge{display:inline-block; margin-top:.6rem; font-size:.75rem; font-weight:700; padding:.25rem .6rem; border-radius:999px; background:var(--leaf); color:var(--strong)}
.acc-sec{margin-top:1.25rem}
.acc-sec h2{font-family:var(--display); font-weight:600; font-size:1.2rem; margin:0 0 .9rem}
.acc-chips{display:flex; flex-wrap:wrap; gap:.45rem}
.acc-chips label{display:inline-flex !important; align-items:center; gap:.35rem; padding:.42rem .8rem; border:1px solid var(--line); border-radius:999px; font-weight:500 !important; font-size:.88rem !important; cursor:pointer; background:var(--bg)}
.acc-chips input{width:15px; height:15px; accent-color:var(--strong)}
.acc-chips label:has(input:checked){background:var(--leaf); border-color:var(--strong)}
.acc-2{display:grid; grid-template-columns:1fr 1fr; gap:.85rem}
@media (max-width:560px){ .acc-2{grid-template-columns:1fr} }

/* ---------- Panel de control ---------- */
.adm{max-width:1280px; margin:0 auto; padding:clamp(1.5rem,4vw,2.5rem) clamp(1.25rem,4vw,2.5rem) 3rem}
.adm-top{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap}
.adm-top h1{font-family:var(--display); font-weight:600; font-size:clamp(1.7rem,3vw,2.2rem); margin:0}
.adm-top p{margin:.2rem 0 0; color:var(--muted)}
.adm-kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin:1.5rem 0}
@media (max-width:900px){ .adm-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
.adm-kpi{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:1.1rem 1.2rem}
.adm-kpi span{display:block; color:var(--muted); font-size:.85rem; font-weight:600}
.adm-kpi b{display:block; font-family:var(--display); font-size:2.1rem; font-weight:600; line-height:1.15; margin-top:.2rem; font-variant-numeric:tabular-nums}
.adm-kpi small{color:var(--muted); font-size:.8rem}
.adm-row{display:grid; grid-template-columns:2fr 1fr; gap:1rem}
@media (max-width:900px){ .adm-row{grid-template-columns:1fr} }
.adm-box{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:1.1rem 1.2rem; min-width:0}
.adm-box h2{font:700 1rem "Figtree",system-ui,sans-serif; margin:0 0 .8rem}
.adm-box svg{display:block; width:100%; height:auto}
.adm-tabs{display:flex; gap:.4rem; margin:1.8rem 0 1rem; flex-wrap:wrap}
.adm-tabs button{font:600 .92rem "Figtree",system-ui,sans-serif; padding:.55rem 1rem; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer}
.adm-tabs button[aria-selected="true"]{background:var(--deep); border-color:var(--deep); color:#F1F7EE}
.adm-tools{display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:.8rem}
.adm-tools input,.adm-tools select{font:inherit; padding:.55rem .75rem; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); margin:0; width:auto; min-width:220px}
.adm-tools button{font:600 .9rem "Figtree",system-ui,sans-serif; padding:.55rem 1rem; border-radius:10px; border:1.5px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer}
.adm-tbl{width:100%; border-collapse:collapse; font-size:.88rem}
.adm-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--surface)}
.adm-tbl th{text-align:left; font-weight:700; color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; padding:.7rem .8rem; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--bg)}
.adm-tbl td{padding:.65rem .8rem; border-bottom:1px solid var(--line); vertical-align:top}
.adm-tbl tr:last-child td{border-bottom:0}
.adm-tbl td.num{font-variant-numeric:tabular-nums; white-space:nowrap}
.adm-tag{display:inline-block; font-size:.72rem; font-weight:700; padding:.18rem .5rem; border-radius:999px; background:var(--leaf); color:var(--strong); white-space:nowrap}
.adm-tag.warn{background:color-mix(in srgb,var(--maiz) 85%,transparent); color:#7A5A0A}
.adm-tag.bad{background:color-mix(in srgb,#F2B4AD 60%,transparent); color:#8E2F22}
.adm-act{border:0; background:none; color:#B24A34; font:600 .8rem "Figtree",system-ui,sans-serif; cursor:pointer; padding:0}
.adm-msg{border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:1rem 1.1rem; margin-bottom:.8rem}
.adm-msg header{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; position:static; background:none; backdrop-filter:none; border:0}
.adm-msg p{white-space:pre-wrap; margin:.6rem 0}
.adm-msg .files a{display:inline-block; margin:.2rem .5rem .2rem 0; font-size:.88rem}
.adm-empty{color:var(--muted); padding:1.5rem; text-align:center}
.legal-page{max-width:820px; margin:0 auto; padding:clamp(2rem,5vw,3rem) clamp(1.25rem,4vw,2.5rem) 2rem}
.legal-page h1{font-family:var(--display); font-weight:600; font-size:clamp(1.7rem,3vw,2.2rem); margin:0 0 .5rem}
.legal-page h2{font-size:1.15rem; margin:2rem 0 .5rem; line-height:1.3}
.legal-page p,.legal-page li{color:var(--ink)}
.legal-page .upd{color:var(--muted); font-size:.9rem}
.acc-chips input,.acc-f .acc-ck input,.jcf-ck input{margin:2px 0 0 !important; padding:0 !important}
.acc-chips input{margin:0 !important; width:15px !important}
/* Botones dentro del recuadro oscuro de Contacto */
.contact .ct-btn,:root[data-theme="dark"] .contact .ct-btn{background:var(--firma); border-color:var(--firma); color:var(--firma-ink)}
.contact .ct-btn.alt,:root[data-theme="dark"] .contact .ct-btn.alt{background:transparent; border-color:#E9F4E5; color:#E9F4E5}
.contact .ct-btn.alt:hover{background:rgba(233,244,229,.1)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .contact .ct-btn{background:var(--firma); border-color:var(--firma); color:var(--firma-ink)} :root:not([data-theme="light"]) .contact .ct-btn.alt{background:transparent; border-color:#E9F4E5; color:#E9F4E5} }

/* ===================== V8 ===================== */
.hero-shell .hero{padding-top:clamp(1.25rem,3.2vh,2.75rem); padding-bottom:clamp(1rem,2.6vh,2.25rem)}
#herramientas{padding-top:clamp(1.5rem,3.5vh,2.75rem)}

/* Herramientas: resaltado al pasar el cursor */
.card{position:relative; transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .25s ease, background .25s ease}
.card .ic{transition:background .25s ease, color .25s ease, transform .25s ease}
.card .go::after{content:"→"; display:inline-block; margin-left:.35em; transition:transform .25s ease}
a.card:hover,a.card:focus-visible{transform:translateY(-5px); border-color:var(--strong); outline:none;
  box-shadow:0 22px 40px -22px rgba(19,38,27,.42), 0 0 0 1px var(--strong)}
a.card:hover .ic,a.card:focus-visible .ic{background:var(--strong); color:var(--bg); transform:scale(1.06)}
a.card:hover .go,a.card:focus-visible .go{text-decoration:none}
a.card:hover .go::after,a.card:focus-visible .go::after{transform:translateX(5px)}
/* Tarjeta en desarrollo */
.cards .card.soon{grid-column:1/-1; background:transparent; border:1.5px dashed color-mix(in srgb,var(--strong) 35%,transparent); cursor:default}
.card.soon .ic{background:color-mix(in srgb,var(--gold) 26%,transparent)}
.card.soon h3{flex:1; min-width:0}
.soon-tag{flex-shrink:0; font:700 .68rem/1 "Figtree",system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#7A5A12;
  background:color-mix(in srgb,var(--gold) 30%,transparent); padding:.45rem .7rem; border-radius:999px; display:inline-flex; align-items:center; gap:.4rem}
.soon-tag::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); animation:jc-pulso 1.8s ease-in-out infinite}
@keyframes jc-pulso{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.7)}}
:root[data-theme="dark"] .soon-tag{color:#F2C75C}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .soon-tag{color:#F2C75C} }
@media (max-width:600px){ .card.soon .card-h{flex-wrap:wrap} }

/* Servicios: resaltado y botón Solicitar */
.band{transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease; position:relative}
.band:hover,.band:focus-within{transform:translateY(-3px); box-shadow:0 22px 40px -26px rgba(19,38,27,.45), inset 0 0 0 1.5px color-mix(in srgb,var(--strong) 40%,transparent)}
.band li{transition:transform .2s ease}
.band:hover li:hover{transform:translateX(3px)}
.sv-btn{margin-top:1.1rem; display:inline-flex; align-items:center; gap:.45rem; font:600 .95rem/1 "Figtree",system-ui,sans-serif;
  padding:.75rem 1.1rem; border-radius:999px; border:1.5px solid var(--strong); background:transparent; color:var(--strong); cursor:pointer;
  transition:background .25s, color .25s, gap .25s}
.sv-btn:hover,.sv-btn:focus-visible{background:var(--strong); color:var(--bg); gap:.7rem; outline:none}
.band:hover .sv-btn{background:var(--strong); color:var(--bg)}
@media (prefers-reduced-motion: reduce){ .card,.band,.band li,.sv-btn{transition:none} a.card:hover,.band:hover{transform:none} .soon-tag::before{animation:none} }

/* Formulario de solicitud de servicio */
.jcf-kicker{display:inline-block; font:700 .68rem/1 "Figtree",system-ui,sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--f-strong); background:color-mix(in srgb,var(--f-firma) 32%,transparent); padding:.4rem .6rem; border-radius:999px; margin-bottom:.6rem}
.jcf-sv{border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.45rem}
.jcf-sv legend{font-weight:600; font-size:.9rem; margin-bottom:.45rem; padding:0}
.jcf-sv legend small{font-weight:400; color:var(--f-muted)}
.jcf .jcf-chip{display:inline-flex !important; align-items:center; gap:0 !important; font-weight:500 !important; font-size:.86rem !important; cursor:pointer}
.jcf-chip input{position:absolute; opacity:0; width:1px; height:1px}
.jcf-chip span{display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .8rem; border-radius:999px; border:1.5px solid var(--f-line); background:var(--f-bg); color:var(--f-ink); line-height:1.25; transition:background .2s, border-color .2s, color .2s}
.jcf-chip span::before{content:""; width:15px; height:15px; flex-shrink:0; border-radius:4px; display:grid; place-items:center; font-size:.68rem; font-weight:800; line-height:1; border:1.5px solid color-mix(in srgb,var(--f-strong) 55%,transparent); transition:background .2s, box-shadow .2s}
.jcf-chip:hover span{border-color:var(--f-strong)}
.jcf-chip input:checked + span{background:color-mix(in srgb,var(--f-firma) 28%,var(--f-surface)); border-color:var(--f-strong)}
.jcf-chip input:checked + span::before{content:"✓"; background:var(--f-strong); border-color:var(--f-strong); color:var(--f-surface)}
.jcf-chip input:focus-visible + span{outline:2px solid var(--f-firma); outline-offset:2px}
.jcf input[readonly]{opacity:.8; cursor:not-allowed}
/* aviso para entrar con cuenta */
.jcf-gate{max-width:480px}
.jcf-gate-l{margin:0 0 1.3rem; padding:0; list-style:none; display:grid; gap:.5rem; font-size:.93rem}
.jcf-gate-l li{display:flex; gap:.55rem; align-items:flex-start}
.jcf-gate-l li::before{content:"✓"; flex-shrink:0; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:.7rem; font-weight:700; color:var(--f-surface); background:var(--f-strong); margin-top:1px}
.jcf-gate .jcf-bt a{font:600 .98rem "Figtree",system-ui,sans-serif; padding:.75rem 1.25rem; border-radius:12px; text-decoration:none; border:1.5px solid var(--f-ink); color:var(--f-ink)}
.jcf-gate .jcf-bt a.jcf-ok{background:var(--f-deep); border-color:var(--f-deep); color:#F1F7EE}
.adm-sol{display:inline-block; margin-top:.6rem; font:700 .66rem/1 "Figtree",system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#7A5A12; background:color-mix(in srgb,var(--gold) 30%,transparent); padding:.4rem .6rem; border-radius:999px}
/* Cuenta: texto de la izquierda arriba, junto al formulario */
.acc-page{align-items:start}
.acc-side{padding-top:clamp(.5rem,2vw,1.75rem)}
@media (min-width:881px){ .acc-side{position:sticky; top:96px} }

/* V9: panel con dos vistas (métricas / suscriptores) */
.adm-vistas{display:flex; gap:.5rem; margin-top:1.4rem; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:.8rem}
.adm-vistas button{font:700 1rem "Figtree",system-ui,sans-serif; padding:.7rem 1.2rem; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer}
.adm-vistas button[aria-selected="true"]{background:var(--deep); border-color:var(--deep); color:#F1F7EE}

/* ===== V20 · Borde animado al pasar el puntero =====
   Solo en computadora (puntero fino con hover). Una línea con estela recorre el contorno de las tarjetas
   y opciones grandes que se pueden elegir: herramientas, Surcos, servicios y, dentro de las herramientas,
   opciones A/B, fórmulas, plataformas, pasos, pestañas y cultivos. Se apaga si el sistema pide reducir el movimiento. */
@property --jt-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes jt-run{to{--jt-a:360deg}}
@media (hover:hover) and (pointer:fine){
  :is(.sx-mini:not(.soon),.sx-feat,.band,a.card,.bq .path,.bq .fcard,.bq .pcard,.bq .step,.bq .ptabs button,.bq .psub button:not([disabled]),.bq .filters button,.bq .ctabs button,.crop,.tabs button[role="tab"]){position:relative}
  :is(.bq .ptabs button,.bq .psub button,.bq .filters button,.bq .ctabs button){--jt-in:0px}
  :is(.sx-mini:not(.soon),.sx-feat,.band,a.card,.bq .path,.bq .fcard,.bq .pcard,.bq .step,.bq .ptabs button,.bq .psub button:not([disabled]),.bq .filters button,.bq .ctabs button,.crop,.tabs button[role="tab"])::before{
    content:"";position:absolute;inset:var(--jt-in,-1px);border-radius:inherit;padding:var(--jt-w,2.5px);pointer-events:none;z-index:3;opacity:0;
    background:conic-gradient(from var(--jt-a),transparent 0turn,transparent .5turn,rgba(143,211,164,.3) .68turn,#8FD3A4 .84turn,#3E8E5A .95turn,#1C3A2B .996turn,#1C3A2B 1turn);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
    transition:opacity .25s ease}
  :is(.sx-mini:not(.soon),.sx-feat,.band,a.card,.bq .path,.bq .fcard,.bq .pcard,.bq .step,.bq .ptabs button,.bq .psub button:not([disabled]),.bq .filters button,.bq .ctabs button,.crop,.tabs button[role="tab"]):hover::before{opacity:1;animation:jt-run 2.4s linear infinite}
}
@media (prefers-reduced-motion:reduce){
  :is(.sx-mini,.sx-feat,.band,a.card,.bq .path,.bq .fcard,.bq .pcard,.bq .step,.bq .ptabs button,.bq .psub button,.bq .filters button,.bq .ctabs button,.crop,.tabs button)::before{animation:none!important;opacity:0!important}
}
@media print{:is(.sx-mini,.sx-feat,.band,a.card,.crop)::before{display:none!important}}