/* ═════════ Cañaveralejo · estilos comunes (móvil primero) · Grafito v4 ═════════
   Sobrio y técnico: base neutra, grafito para lo inmersivo, un solo acento oliva.
   Geist para todo y Geist Mono para horas, cifras y etiquetas. */
:root{
  --fondo:#F4F5F2;
  --fondo-2:#ECEEE9;
  --panel:#FFFFFF;
  --tinta:#111412;
  --tinta-2:#3A403B;
  --suave:#6B726C;
  --tenue:#9AA09A;
  --linea:rgba(17,20,18,.09);
  --linea-2:rgba(17,20,18,.15);
  --verde:#4F7A1C;          /* acento oliva sobre claro */
  --acento:#4F7A1C;
  --senal:#C6E57A;          /* acento sobre grafito */
  --acento-suave:#EEF3E3;
  --verde-osc:#1C2419;
  --noche:#0C0F0D;
  --noche-2:#161A17;
  --noche-3:#21261F;
  /* Nombres antiguos, ahora neutros (los usan escenas y demos) */
  --lima:#C6E57A;
  --lima-2:#D4EC97;
  --aqua:#6B726C;
  --sol:#C9B98F;
  --coral:#8C7A6B;
  --envero:#4A4550;
  --negra:#2A2A2C;
  --rojo:#B4372B;
  --ambar:#A86A12;
  --hecho:#2E7D4F;

  --f-display:"Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-text:"Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);

  --gutter:clamp(18px, 5vw, 40px);
  --max:1200px;
  --header:60px;
  --r-lg:20px;
  --r-md:16px;
  --r-sm:12px;
  --rejilla:linear-gradient(var(--linea) 1px, transparent 1px) 0 0 / 100% 56px, linear-gradient(90deg, var(--linea) 1px, transparent 1px) 0 0 / 56px 100%;
  --rejilla-osc:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 100% 56px, linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 56px 100%;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-padding-top:calc(var(--header) + 12px)}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--f-text);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;font-feature-settings:"ss01"}
::selection{background:var(--tinta);color:#fff}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:8px}
img,svg{display:block}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
button{font:inherit;color:inherit;cursor:pointer}
input{font:inherit;font-size:16px}
button,a,[role="button"],summary{touch-action:manipulation}
button,.btn,summary,.chip-filtro{-webkit-user-select:none;user-select:none}
h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1.04;letter-spacing:-0.035em;margin:0}
h1,h2{text-wrap:balance}
h3{text-wrap:balance;letter-spacing:-0.025em}
q{quotes:"«" "»" "“" "”"}
p{margin:0;text-wrap:pretty}
b,strong{font-weight:600}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.w-mask{padding:0 .04em .14em;margin:0 -.04em -.14em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Etiqueta técnica: mono, mayúscula, interletra amplia */
.etiqueta,.antetitulo,.kicker{font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}

/* ───────── Transiciones entre páginas ───────── */
@view-transition{navigation:auto}
.cabecera{view-transition-name:cabecera}
.cta-flota{view-transition-name:cta}
::view-transition-old(root){animation:salePagina 220ms var(--ease-in-out) both}
::view-transition-new(root){animation:entraPagina 420ms var(--ease-out) both}
@keyframes salePagina{to{opacity:0;transform:translateY(-10px)}}
@keyframes entraPagina{from{opacity:0;transform:translateY(16px)}}
.mov-reducido::view-transition-old(root),.mov-reducido::view-transition-new(root){animation:none}

/* Icono de la app (emblema del logo sobre baldosa blanca) */
.icono{--e:40px;width:var(--e);height:var(--e);flex:none;border-radius:calc(var(--e) * .26);background:#fff url(/assets/icono-ui.webp) center/cover no-repeat;box-shadow:0 0 0 1px var(--linea)}

/* ───────── Botones ───────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:52px;padding:0 1.4em;border-radius:12px;border:1px solid transparent;font-family:var(--f-text);font-weight:500;font-size:1rem;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;overflow:hidden;isolation:isolate;transition:transform 140ms var(--ease-out),background-color 200ms ease,border-color 200ms ease}
.btn:active{transform:scale(.98)}
.btn svg{width:1.1em;height:1.1em;stroke-width:1.75}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.12) 50%,transparent 65%);transform:translateX(-130%);transition:transform 800ms var(--ease-out);pointer-events:none}
.btn.brilla::after{animation:brillo 1.2s var(--ease-out) 1}
@keyframes brillo{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
/* Principal: grafito sobre claro; señal oliva sobre grafito */
.btn-lima{color:#fff;background:var(--tinta);border-color:var(--tinta);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px -16px rgba(17,20,18,.8)}
[data-oscuro] .btn-lima,.oscura .btn-lima,.cta-flota .btn-lima,.siguiente .btn-lima,.llamada .btn-lima{color:var(--tinta);background:var(--senal);border-color:var(--senal);box-shadow:none}
.btn-cristal{color:var(--tinta);background:rgba(255,255,255,.7);border-color:var(--linea-2)}
.btn-cristal-osc{color:#fff;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16)}
.btn-sm{min-height:42px;padding:0 1em;font-size:.92rem;border-radius:10px}
@media (hover:hover) and (pointer:fine){
  .btn:hover::after{transform:translateX(130%)}
  .btn-lima:hover{background:#000}
  [data-oscuro] .btn-lima:hover,.oscura .btn-lima:hover,.cta-flota .btn-lima:hover,.llamada .btn-lima:hover{background:#D4EC97}
  .btn-cristal:hover{background:#fff;border-color:rgba(17,20,18,.28)}
  .btn-cristal-osc:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
}
@media (min-width: 900px) and (hover:hover){
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .btn-cristal{background:rgba(255,255,255,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
    .btn-cristal-osc{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  }
}

/* ───────── Cabecera ───────── */
.cabecera{position:fixed;inset:0 0 auto 0;z-index:50;height:calc(var(--header) + env(safe-area-inset-top, 0px));padding-top:env(safe-area-inset-top, 0px);transition:background-color 220ms ease,box-shadow 220ms ease,color 220ms ease}
.cabecera.con-fondo{background:rgba(244,245,242,.97);box-shadow:0 1px 0 var(--linea)}
.cabecera.sobre-oscuro{background:var(--noche);box-shadow:0 1px 0 rgba(255,255,255,.07);color:#fff}
.cabecera.sobre-oscuro .marca small{color:rgba(255,255,255,.5)}
.cabecera.sobre-oscuro .nav a{color:rgba(255,255,255,.66)}
.cabecera.sobre-oscuro .menu-btn{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#fff}
@media (min-width: 900px){
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .cabecera.con-fondo{background:rgba(244,245,242,.9);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}
    .cabecera.sobre-oscuro{background:rgba(12,15,13,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  }
}
.cabecera .wrap{height:var(--header);display:flex;align-items:center;gap:12px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;min-width:0}
.marca .icono{--e:36px}
.marca b{display:block;font-family:var(--f-display);font-weight:600;font-size:1.06rem;letter-spacing:-.025em;line-height:1}
.marca small{display:block;font-family:var(--f-mono);font-size:.62rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--suave);margin-top:4px}
.nav{display:flex;gap:2px;margin-right:8px;position:relative}
.nav a{position:relative;z-index:1;font-size:.92rem;font-weight:450;text-decoration:none;padding:8px 13px;border-radius:9px;color:var(--suave);transition:color 180ms ease}
.nav a[aria-current="page"]{color:var(--tinta)}
.cabecera.sobre-oscuro .nav a[aria-current="page"]{color:#fff}
.nav-pastilla{position:absolute;top:0;left:0;height:100%;border-radius:9px;background:rgba(17,20,18,.06);box-shadow:inset 0 0 0 1px var(--linea);transition:transform 380ms var(--ease-out),width 380ms var(--ease-out),opacity 200ms ease;pointer-events:none}
.cabecera.sobre-oscuro .nav-pastilla{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
@media (hover:hover) and (pointer:fine){.nav a:hover{color:var(--tinta)}.cabecera.sobre-oscuro .nav a:hover{color:#fff}}
.menu-btn{display:none;width:44px;height:44px;flex:none;border-radius:11px;border:1px solid var(--linea-2);background:rgba(255,255,255,.6);align-items:center;justify-content:center;transition:transform 140ms var(--ease-out)}
.menu-btn:active{transform:scale(.94)}
.menu-btn svg{width:20px;height:20px}
.menu-movil{position:fixed;left:10px;right:10px;top:calc(var(--header) + env(safe-area-inset-top, 0px) + 6px);z-index:49;background:#fff;border-radius:var(--r-md);box-shadow:0 24px 48px -20px rgba(17,20,18,.4),0 0 0 1px var(--linea);padding:6px;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out),visibility 0s 200ms}
.menu-movil.abierto{opacity:1;visibility:visible;transform:none;transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
.menu-movil a{display:flex;align-items:center;gap:12px;padding:14px 12px;border-radius:10px;text-decoration:none;font-weight:500}
.menu-movil a[aria-current="page"]{background:var(--fondo)}
.menu-movil a:active{background:var(--fondo)}
.menu-movil a svg{width:18px;height:18px;color:var(--suave)}
.barra-progreso{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--acento);transform:scaleX(0);transform-origin:left;pointer-events:none}
.cabecera.sobre-oscuro .barra-progreso{background:var(--senal)}
.cabecera .btn-instalar{display:none}
@media (max-width: 979px){.nav{display:none}.menu-btn{display:inline-flex}}
@media (min-width: 980px){.cabecera .btn-instalar{display:inline-flex}}

/* Botón flotante de instalar (móvil) */
.cta-flota{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));z-index:40;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:16px;background:rgba(12,15,13,.96);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 18px 40px -16px rgba(12,15,13,.7);transform:translateY(150%);transition:transform 380ms var(--ease-out)}
.cta-flota.visible{transform:none}
.cta-flota p{flex:1;font-size:.86rem;line-height:1.3;color:rgba(255,255,255,.62)}
.cta-flota p b{display:block;color:#fff;font-size:.96rem;font-weight:500}
.cta-flota .btn{min-height:44px;padding:0 1.05em}
@media (min-width: 980px){.cta-flota{display:none}}

/* ───────── Cabecera de página ───────── */
.pagina-cab{position:relative;padding:calc(var(--header) + env(safe-area-inset-top, 0px) + 40px) 0 44px;overflow:hidden;background:var(--fondo);border-bottom:1px solid var(--linea)}
.pagina-cab::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--rejilla);-webkit-mask-image:radial-gradient(90% 80% at 80% 0%,#000,transparent 75%);mask-image:radial-gradient(90% 80% at 80% 0%,#000,transparent 75%)}
.pagina-cab > *{position:relative}
.pagina-cab h1{font-size:clamp(2.5rem, 10.5vw, 4.6rem);font-weight:600;line-height:1;letter-spacing:-0.045em;max-width:14ch}
.pagina-cab .entrada{margin-top:18px;font-size:clamp(1.04rem,1.5vw,1.18rem);max-width:34em;color:var(--tinta-2)}
.pagina-cab.oscura{background:var(--noche);color:#fff;border-bottom-color:rgba(255,255,255,.06)}
.pagina-cab.oscura::before{background:var(--rejilla-osc)}
.pagina-cab.oscura .entrada{color:rgba(255,255,255,.66)}
.pagina-cab .resalte,.portada .resalte{display:inline-block;position:relative;color:var(--suave);--subrayado:1}
.pagina-cab.oscura .resalte{color:rgba(255,255,255,.55)}
.resalte::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:2px;background:var(--acento);z-index:-1;opacity:.7;transform:scaleX(var(--subrayado));transform-origin:left}
.pagina-cab.oscura .resalte::after{background:var(--senal);opacity:.6}
@media (min-width: 900px){.pagina-cab{padding:calc(var(--header) + 88px) 0 72px}.pagina-cab h1{letter-spacing:-0.04em}}

/* ───────── Secciones ───────── */
.seccion{padding:clamp(56px, 10vw, 120px) 0;position:relative}
.seccion h2{font-size:clamp(1.9rem, 7.4vw, 3.3rem);font-weight:600;letter-spacing:-0.04em;max-width:17ch}
.seccion .intro{margin-top:14px;max-width:36em;font-size:1.04rem;color:var(--tinta-2)}
.seccion.oscura{background:var(--noche);color:#fff}
.seccion.oscura::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--rejilla-osc);-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}
.seccion.oscura > *{position:relative}
.seccion.oscura .intro{color:rgba(255,255,255,.64)}
.seccion.suave{background:var(--fondo-2)}

/* Siguiente página */
.siguiente{position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;margin-top:8px;padding:22px;border-radius:var(--r-lg);text-decoration:none;background:var(--noche);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:transform 160ms var(--ease-out)}
.siguiente::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--rejilla-osc);-webkit-mask-image:linear-gradient(90deg,transparent,#000);mask-image:linear-gradient(90deg,transparent,#000)}
.siguiente > *{position:relative}
.siguiente:active{transform:scale(.99)}
.siguiente small{display:block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:500;margin-bottom:4px}
.siguiente b{display:block;font-family:var(--f-display);font-weight:600;font-size:1.45rem;letter-spacing:-.03em;line-height:1.1}
.siguiente .flecha{margin-left:auto;width:48px;height:48px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--senal);color:var(--tinta)}
.siguiente .flecha svg{width:20px;height:20px;transition:transform 300ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.siguiente:hover .flecha svg{transform:translateX(4px)}}

/* ───────── Escenas del olivar (ilustración sobria, casi monocroma) ───────── */
.esc{position:relative;aspect-ratio:520/600;border-radius:50% 50% 0 0 / 38.4% 38.4% 0 0;overflow:hidden;isolation:isolate;transform:translateZ(0);background:#CFC8BA}
.esc > *{position:absolute}
.cielo{inset:0}
.c-alba{background:linear-gradient(180deg,#8E9592 0%,#B7B4AA 38%,#D8D0BF 70%,#EAE4D6 100%)}
.c-tarde{background:linear-gradient(180deg,#4E5652 0%,#878279 36%,#BBAE99 70%,#DDD2BD 100%)}
.c-dia{background:linear-gradient(180deg,#C3CBCA 0%,#D8DDDA 42%,#E8EAE5 78%,#F2F3EF 100%)}
.horizonte{left:0;right:0;top:40%;height:40%;background:radial-gradient(70% 60% at var(--hx,30%) 75%,rgba(236,226,204,.75),rgba(226,214,188,.25) 45%,transparent 75%);opacity:0;will-change:opacity}
.sol{left:0;top:0;width:18%;aspect-ratio:1;will-change:transform}
.sol > span{position:absolute;border-radius:50%}
.sol .corona{inset:-110%;background:radial-gradient(circle,rgba(255,255,255,.7) 0%,rgba(250,248,240,.32) 22%,rgba(250,248,240,.1) 42%,transparent 64%)}
.sol .rayos{display:none}
.sol .disco{inset:0;background:radial-gradient(circle at 46% 44%,#FFFFFF 0%,#F7F5EE 55%,#E9E3D3 100%);box-shadow:0 0 16px 4px rgba(250,248,240,.65)}
.sol .calido{inset:0;background:radial-gradient(circle at 46% 44%,#F6F0E2 0%,#E3D5BA 60%,#CDBBA6 100%);box-shadow:0 0 18px 6px rgba(226,214,188,.55);opacity:0;will-change:opacity}
@keyframes gira{to{transform:rotate(360deg)}}
.nube{width:24%;height:auto;opacity:.7;animation:nube 34s ease-in-out infinite alternate}
.nube.n2{animation-duration:46s;animation-delay:-12s;width:16%}
@keyframes nube{from{transform:translateX(0)}to{transform:translateX(70%)}}
.pajaros{left:0;top:15%;width:100%;height:12%;animation:vuela 18s linear infinite;animation-delay:2s;opacity:0}
.pajaros img{position:absolute;left:0;top:0;width:12%;height:auto;animation:aletea .9s ease-in-out infinite alternate}
.pajaros img:nth-child(2){animation-delay:-.3s}
.pajaros img:nth-child(3){animation-delay:-.6s}
@keyframes vuela{0%{transform:translate3d(-20%,0,0);opacity:.7}55%{transform:translate3d(55%,-30%,0);opacity:.7}99%{transform:translate3d(110%,10%,0);opacity:.7}100%{opacity:0;transform:translate3d(110%,10%,0)}}
@keyframes aletea{to{transform:translateY(16%) scaleY(.7)}}
.paisaje{left:0;bottom:0;width:100%;height:auto}
.sombra{left:4%;bottom:1.2%;width:62%;height:3.4%;border-radius:50%;background:radial-gradient(closest-side,rgba(17,20,18,.35),rgba(17,20,18,0));will-change:transform,opacity}
.olivo{height:auto;transform-origin:42% 100%;animation:mece 5.4s ease-in-out infinite alternate}
@keyframes mece{from{transform:rotate(-.6deg)}to{transform:rotate(.7deg)}}
.tinte{inset:0;background:linear-gradient(to top,rgba(140,122,107,.22),rgba(190,175,155,.1) 45%,rgba(214,200,175,0) 70%);opacity:0;pointer-events:none;will-change:opacity}
.arco-linea{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:4}
.pausado *, .pausado{animation-play-state:paused !important}
.mov-reducido .esc *{animation:none !important}.mov-reducido .pajaros{display:none}

/* ───────── Teléfono ───────── */
.phone{width:21em;height:43.5em;border-radius:3.3em;background:linear-gradient(150deg,#2A2E29,#0E110F 45%,#1A1D1A);padding:.5em;position:relative;box-shadow:0 2.6em 4.2em -1.8em rgba(12,15,13,.6),0 .4em 1em rgba(12,15,13,.18),inset 0 0 0 .1em rgba(255,255,255,.14)}
.phone-screen{position:relative;width:100%;height:100%;border-radius:2.85em;background:#F7F8F5;overflow:hidden;display:flex;flex-direction:column;color:var(--tinta);font-family:var(--f-text);line-height:1.35}
.island{position:absolute;top:.75em;left:50%;width:6.6em;height:1.85em;margin-left:-3.3em;background:#000;border-radius:1em;z-index:6}
.sb{flex:none;height:3.2em;display:flex;align-items:center;justify-content:space-between;padding:0 2em 0 2.3em;font-size:.95em;font-weight:600}
.sb-ic{display:flex;gap:.35em;align-items:center}
.sb-ic svg{width:1.15em;height:1.15em}
.app-top{flex:none;display:flex;align-items:center;gap:.7em;padding:.3em 1.2em .7em 1.3em}
.app-top .icono{--e:2.5em}
.app-top b{display:block;font-family:var(--f-display);font-weight:600;font-size:1.08em;letter-spacing:-.025em;line-height:1.1}
.app-top small{display:block;font-size:.78em;color:var(--suave);margin-top:.1em}
.arco-mini{margin-left:auto;width:4.4em;flex:none;display:flex;flex-direction:column;align-items:center}
.arco-mini svg{width:4.4em;height:2.4em;overflow:visible}
.arco-mini .pista{fill:none;stroke:#E3E6E0;stroke-width:3;stroke-linecap:round}
.arco-mini .hecho{fill:none;stroke:url(#gradArco);stroke-width:3;stroke-linecap:round}
.arco-mini .astro{fill:var(--acento)}
.arco-mini small{font-family:var(--f-mono);font-size:.6em;color:var(--suave);margin-top:.1em;letter-spacing:-.02em}
.screens{position:relative;flex:1;min-height:0}
.scr{position:absolute;inset:0;padding:.3em 1.2em 0;display:flex;flex-direction:column}
.tabbar{flex:none;display:flex;justify-content:space-around;margin:0 .8em .9em;padding:.55em .3em;border-radius:1.1em;background:#fff;box-shadow:0 0 0 1px var(--linea),0 .6em 1.4em -0.9em rgba(17,20,18,.35)}
.tab{display:flex;flex-direction:column;align-items:center;gap:.2em;font-size:.68em;font-weight:500;color:var(--tenue);width:5.4em}
.tab svg{width:1.7em;height:1.7em;stroke-width:1.75}
.tab.on{color:var(--tinta)}
.saludo{font-family:var(--f-display);font-weight:600;font-size:1.5em;letter-spacing:-.035em;line-height:1.1}
.estado{margin-top:.8em;padding:.8em .95em;border-radius:.9em;background:#fff;box-shadow:0 0 0 1px var(--linea);display:flex;align-items:center;gap:.7em;font-size:.92em}
.estado svg{width:1.3em;height:1.3em;flex:none;color:var(--suave)}
.estado b{display:block;font-size:1.02em;font-weight:600}
.estado span{color:var(--suave)}
.estado.ok{background:#F5F7F0;box-shadow:0 0 0 1px rgba(46,125,79,.22)}
.estado.ok svg{color:var(--hecho)}
.app-btn{margin-top:auto;margin-bottom:.8em;height:4.1em;border-radius:1em;border:0;width:100%;background:var(--tinta);color:#fff;display:flex;align-items:center;justify-content:center;gap:.55em;font-weight:500;font-size:1.05em;flex:none}
.app-btn svg{width:1.2em;height:1.2em;stroke-width:1.75}
.app-btn.contorno{background:#fff;box-shadow:0 0 0 1px var(--linea-2);color:var(--tinta)}
.app-btn.salida{background:#fff;color:var(--rojo);box-shadow:0 0 0 1px rgba(180,55,43,.35)}
.lista-tit{margin:0 0 .45em;font-family:var(--f-mono);font-size:.66em;letter-spacing:.14em;text-transform:uppercase;color:var(--suave);font-weight:500}
.tarea{display:grid;grid-template-columns:auto 1fr auto;gap:.7em;align-items:center;padding:.7em .8em;margin-bottom:.45em;border-radius:.8em;background:#fff;box-shadow:0 0 0 1px var(--linea)}
.tarea svg.mk{width:1.45em;height:1.45em}
.tarea b{display:block;font-size:.98em;font-weight:600}
.tarea small{display:block;font-size:.78em;color:var(--suave)}
.tarea .chev{width:1.1em;height:1.1em;color:var(--tenue)}
.chip-e{font-size:.68em;font-weight:500;padding:.25em .65em;border-radius:.5em;background:#EEF0EB;color:var(--tinta-2);white-space:nowrap;transition:background-color 300ms ease,color 300ms ease}
.chip-e.hecho{background:#E6EFE0;color:var(--hecho)}
.chip-e.parcial{background:#F7EFE2;color:var(--ambar)}
.chip-e.no{background:#F7E9E6;color:var(--rojo)}
.toque{position:absolute;z-index:8;left:0;top:0;width:3.2em;height:3.2em;margin:-1.6em 0 0 -1.6em;border-radius:50%;background:rgba(17,20,18,.12);border:.14em solid #fff;box-shadow:0 0 0 .55em rgba(17,20,18,.08);opacity:0;visibility:hidden;pointer-events:none}

/* ───────── Faja de labores ───────── */
/* Banda técnica: arriba las labores en texto, abajo la jornada con horas en mono; sentidos contrarios. */
.faja-zona{position:relative;overflow:hidden;padding:28px 0;background:var(--fondo)}
.faja{position:relative;margin:0 12px;overflow:hidden;padding:14px 0 12px;border-radius:14px;color:var(--tinta);background:#fff;box-shadow:0 0 0 1px var(--linea)}
.faja::after{content:"";position:absolute;top:0;bottom:0;left:0;width:22%;z-index:3;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0) 15%,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 85%);transform:translate3d(-110%,0,0);animation:fajaBrillo 9s var(--ease-in-out) infinite}
@keyframes fajaBrillo{0%{transform:translate3d(-110%,0,0)}50%,100%{transform:translate3d(520%,0,0)}}
.faja-ventana{position:relative;z-index:2;display:grid;gap:10px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.faja-pista{display:flex;width:max-content;animation:faja 54s linear infinite;will-change:transform}
.faja-pista.inversa{animation:fajaInversa 46s linear infinite}
@keyframes faja{to{transform:translate3d(-50%,0,0)}}
@keyframes fajaInversa{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.faja-grupo{display:flex;align-items:center;white-space:nowrap}
.pil{display:inline-flex;align-items:center;gap:26px;padding:0 26px 0 0;font-family:var(--f-display);font-weight:500;font-size:clamp(1.05rem,4.2vw,1.4rem);letter-spacing:-.03em;color:var(--tinta)}
.pil::after{content:"";width:6px;height:6px;border-radius:1px;background:var(--tenue);transform:rotate(45deg)}
.pil > i{display:none}
.faja-grupo.linea{gap:28px;padding-right:28px;font-size:.84rem;font-weight:400;color:var(--suave);border-top:1px solid var(--linea);padding-top:10px}
.faja-grupo.linea span{display:inline-flex;align-items:center;gap:10px}
.faja-grupo.linea span::after{content:"";width:1px;height:12px;margin-left:18px;background:var(--linea-2)}
.faja-grupo.linea b{font-family:var(--f-mono);font-weight:500;font-size:.78rem;letter-spacing:-.01em;color:var(--tinta)}
@media (hover:hover) and (pointer:fine){.faja:hover .faja-pista{animation-play-state:paused}}
@media (min-width: 900px){.faja{margin:0 var(--gutter);padding:16px 0 14px}}
.mov-reducido .faja-pista,.mov-reducido .faja::after{animation:none}

/* Interruptor de movimiento (pie) */
.mov-btn{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 14px;border-radius:10px;border:0;background:#fff;box-shadow:0 0 0 1px var(--linea);font-size:.9rem;font-weight:450;color:var(--tinta)}
.mov-btn svg{width:15px;height:15px;stroke-width:1.75}
.mov-btn .est{font-weight:500;color:var(--acento)}

/* ───────── Pie ───────── */
.pie{padding:0 0 calc(110px + env(safe-area-inset-bottom, 0px));font-size:.94rem;color:var(--suave);background:var(--fondo)}
.olivar-pie{width:100%;height:72px;display:block;margin-bottom:36px;object-fit:cover;object-position:center bottom;opacity:.55}
.pie .wrap{display:grid;gap:22px}
.pie .marca{margin:0}
.pie-links{display:flex;flex-wrap:wrap;gap:8px}
.pie-links a,.admin-link{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 14px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--linea);text-decoration:none;font-size:.9rem;font-weight:450;color:var(--tinta);border:0}
.pie-links a[aria-current="page"]{box-shadow:0 0 0 1px var(--tinta)}
.admin-link svg{width:15px;height:15px;stroke-width:1.75}
.admin-estado{font-size:.86rem;color:var(--suave)}
.pie .wrap > small{display:block;padding-top:20px;border-top:1px solid var(--linea);font-family:var(--f-mono);font-size:.74rem;letter-spacing:.02em}
@media (min-width: 980px){.pie{padding-bottom:40px}}