/* Base compartida AutoFlux: variables de color, tipografia, vidrio, botones, barra superior y pie.
   La usan la portada (template.php) y la piel de las demas paginas (skin.css). */
:root{
  --tinta:#07110D; --profundo:#0C2019; --hueso:#EEF6F2; --hueso-70:rgba(238,246,242,.72); --hueso-45:rgba(238,246,242,.45);
  --marca:#19B27C; --marca-oscuro:#041A12; --menta:#7FE8C4;
  --vidrio:rgba(127,232,196,.06); --vidrio-borde:rgba(127,232,196,.18); --vidrio-fuerte:rgba(127,232,196,.11);
  --radio-panel:24px; --radio-chip:10px;
  --ancho:1180px; --gutter:clamp(16px,4vw,48px);
  --display:'Unbounded',sans-serif; --texto:'Manrope',sans-serif;
}
:where(body.autoflux-landing) *{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--texto);color:var(--hueso);background:var(--tinta);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:
  radial-gradient(900px 600px at 15% 10%,rgba(25,178,124,.14),transparent 60%),
  radial-gradient(800px 700px at 85% 30%,rgba(127,232,196,.12),transparent 60%),
  radial-gradient(1000px 800px at 50% 100%,var(--profundo),transparent 70%),var(--tinta)}
a{color:inherit;text-decoration:none}
:where(body.autoflux-landing) :is(img,svg,canvas){display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--menta);outline-offset:3px;border-radius:4px}
.contenedor{width:min(var(--ancho),100% - 2*var(--gutter));margin-inline:auto}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5.2vw,4.4rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.6rem);max-width:22ch}
h3{font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:500}
:where(body.autoflux-landing) p{max-width:62ch}
.intro{font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--hueso-70);margin-top:1rem}
.seccion{padding-block:clamp(72px,10vw,140px)}

/* vidrio */
.vidrio{background:var(--vidrio);border:1px solid var(--vidrio-borde);border-radius:var(--radio-panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 30px 60px -30px rgba(0,0,0,.6)}
/* desenfoque en vivo solo donde hay contenido en movimiento detras (barra fija, tarjeta del hero, panel del pedido):
   en el resto el fondo es un degradado liso y el desenfoque no se ve pero cuesta en cada fotograma del scroll */
.cabecera .barra,.lente,.pedido{backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}

/* botones */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.5rem;border-radius:999px;border:1px solid transparent;
  font-weight:600;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-marca{background:var(--marca);color:var(--marca-oscuro)}
.btn-marca:hover{background:#2AC98F}
.btn-vidrio{background:var(--vidrio);border-color:var(--vidrio-borde)}
.btn-vidrio:hover{background:var(--vidrio-fuerte)}
.btn-texto{padding:.9rem .4rem;color:var(--hueso-70)}
.btn-texto:hover{color:var(--hueso)}

/* cabecera */
.cabecera{position:sticky;top:0;z-index:20;padding:12px 0}
.cabecera .barra{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem .6rem .6rem 1.2rem;border-radius:999px}
.logo{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:.01em;display:flex;align-items:center;gap:.6rem}
.logo img{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(25,178,124,.55))}
.logo .x{color:var(--menta)}
.nav{display:flex;gap:.2rem;align-items:center}
.nav a{padding:.55rem .9rem;border-radius:999px;color:var(--hueso-70);font-weight:500}
.nav a:hover{color:var(--hueso);background:var(--vidrio)}
.nav .btn{margin-left:.6rem}
/* boton "Pedir propuesta" de la barra: texto blanco brillante y mas grueso */
.cabecera .nav .btn-marca,.cabecera .nav .btn-marca:hover{color:#fff;font-weight:700;letter-spacing:.005em;text-shadow:0 1px 1px rgba(4,26,18,.25)}
.nav a.actual{color:var(--hueso);background:var(--vidrio-fuerte)}
.nav .cuenta[hidden]{display:none}
.nav .cuenta{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--marca);color:var(--marca-oscuro);font-size:.75rem;font-weight:700;margin-left:.35rem;vertical-align:middle}
.menu-movil{display:none;background:none;border:0;padding:.5rem .8rem;cursor:pointer;color:var(--hueso);font-weight:600}
@media (max-width:880px){
  /* en movil la barra es opaca: el contenido no se transparenta al pasar por debajo */
  .cabecera .barra{background:rgba(9,21,16,.94);backdrop-filter:none;-webkit-backdrop-filter:none;position:relative}
  .cabecera .barra .logo,.cabecera .barra .menu-movil{position:relative;z-index:2}
  /* menu desplegado: hoja opaca a pantalla completa bajo la barra */
  .nav{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;align-items:stretch;gap:0;
    padding:calc(96px + env(safe-area-inset-top)) var(--gutter) calc(28px + env(safe-area-inset-bottom));
    background:radial-gradient(120% 60% at 50% 0%,#0F2A20 0%,#08130F 55%,#050D0A 100%);border:0;border-radius:0;box-shadow:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;overflow-y:auto;
    visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1),visibility 0s linear .45s}
  .nav.abierto{visibility:visible;opacity:1;transform:none;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1),visibility 0s}
  .nav a{display:flex;justify-content:space-between;align-items:center;padding:1.15rem .2rem;border-radius:0;border-bottom:1px solid rgba(127,232,196,.12);
    font-family:var(--display);font-weight:500;font-size:1.2rem;color:var(--hueso)}
  .nav a:not(.btn)::after{content:"";width:9px;height:9px;border-top:2px solid var(--menta);border-right:2px solid var(--menta);transform:rotate(45deg);opacity:.7}
  .cabecera .nav a:hover,.cabecera .nav a.actual{background:transparent;color:var(--menta)}
  .cabecera .nav .btn{margin:1.6rem 0 0;justify-content:center;border-bottom:0;border-radius:999px;font-family:var(--texto);font-weight:700;font-size:1.05rem;padding:1.05rem 1.5rem;color:#fff}
  .cabecera .nav .btn:hover{background:#2AC98F;color:#fff}
  .nav .cuenta{margin-left:.6rem}
  .menu-movil{display:block}
  html.menu-abierto{overflow:hidden}
  html.menu-abierto .cabecera{position:fixed;top:0;left:0;right:0}
}
@media (max-width:880px) and (prefers-reduced-motion:reduce){.nav{transition:none}}

/* pie */
.pie{position:relative;overflow:hidden;margin-top:clamp(40px,6vw,80px);padding-top:clamp(56px,7vw,96px);color:var(--hueso-45);font-size:.92rem;border-top:1px solid var(--vidrio-borde);background:linear-gradient(180deg,transparent,rgba(3,10,7,.55) 40%,#030A07)}
.pie-rejilla{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(127,232,196,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(127,232,196,.05) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 60%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 80% 70% at 50% 60%,#000 30%,transparent 80%)}
.pie .pie-cols{position:relative;display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.pie .pie-col{display:grid;gap:.7rem;align-content:start}
.pie .pie-col h4{font-family:var(--texto);font-size:.88rem;font-weight:600;color:var(--hueso);letter-spacing:0;margin:0 0 .3rem;line-height:1.3}
.pie .pie-col a{color:var(--hueso-70);text-decoration:none;transition:color .25s}
.pie .pie-col a:hover{color:var(--menta)}
.pie .pie-col-marca .logo{color:var(--hueso);font-size:1.1rem}
.pie .pie-col-marca .logo img{width:32px;height:32px}
.pie .pie-col-marca p{color:var(--hueso-45);max-width:34ch;line-height:1.6;margin:.4rem 0 0}
.pie .pie-legal{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:clamp(40px,5vw,64px);padding-bottom:22px;border-bottom:1px solid var(--vidrio-borde);font-size:.85rem}
.pie .pie-legal a{color:var(--hueso-45);text-decoration:none}
.pie .pie-legal a:hover{color:var(--hueso)}
/* marca gigante al final, como en el banner: simbolo + "Auto" blanco + "Flux" verde, con arco de luz */
.pie-escena{position:relative;height:clamp(120px,18vw,290px);margin-top:clamp(16px,3vw,40px);pointer-events:none}
.pie-arco{position:absolute;left:50%;top:78%;width:210vw;height:210vw;transform:translateX(-50%);border-radius:50%;border-top:2px solid rgba(127,232,196,.85);box-shadow:0 -14px 50px rgba(47,214,154,.45),0 -2px 12px rgba(127,232,196,.6),inset 0 40px 120px rgba(25,178,124,.28)}
.pie-firma{position:absolute;left:0;right:0;top:6%;display:flex;align-items:center;justify-content:center;gap:.22em;white-space:nowrap;font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,10.2vw,10.4rem);line-height:.9;letter-spacing:-.02em}
.pie-firma .palabra{display:inline-block}
.pie-firma img{width:1.05em;height:1.05em;display:block;filter:drop-shadow(0 0 30px rgba(25,178,124,.35))}
.pie-firma .auto{background:linear-gradient(180deg,#EEF6F2 25%,rgba(238,246,242,.35));-webkit-background-clip:text;background-clip:text;color:transparent}
.pie-firma .flux{background:linear-gradient(135deg,#3BE3A6 10%,#19B27C 55%,#0E8A5F);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:880px){.pie .pie-cols{grid-template-columns:1fr 1fr}.pie .pie-col-marca{grid-column:1/-1}}
@media (max-width:520px){.pie .pie-cols{grid-template-columns:1fr}}