/* ═══ ASCENTA — hoja de las PAGINAS DE INTENCION (2026-09-02) ══════════════════
   Que son: las paginas que compiten en Google por lo que teclea un dueño que
   QUIERE comprar una web ("auto repair shop website design"), en vez de por
   nuestro propio nombre. La portada no puede hacerlo: es una sola pagina y
   habla de todos los oficios a la vez.

   POR QUE NO REUSAN `styles.css`. Esa hoja son 31 KB escritos para la portada:
   hero con video, pajaro con posaderos de selector fijo, atmosfera con
   `animation-timeline: scroll()`. Colgar de ahi obligaria a copiar su
   estructura entera para que no se viera rota, y ademas hereda su problema
   medido: la portada tarda 8,2 s en pintar lo grande (LCP, `state/SEO.md` del
   2-sep). Una pagina que aspira a rankear no puede nacer con eso.
   Aqui: 0 imagenes por encima del pliegue salvo la del demo (con `width`/
   `height` y `fetchpriority`), 0 JS de terceros, 0 video. La marca se mantiene
   con las MISMAS variables de `styles.css` y las MISMAS familias de
   `fonts.css`, que ya viajan cacheadas desde la portada. */

:root{
  --sky:#E9F1FB;
  --mist:#F1FAF5;
  --ink:#0B1322;
  --ink-soft:#3E4B63;
  --volt:#3D4DFF;
  --iris:#7A5CFF;
  --line:rgba(11,19,34,.10);
  --serif:"Fraunces",Georgia,serif;
  --sans:"Geist",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Consolas,monospace;
  --w:min(1120px,calc(100% - 2.4rem));
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:linear-gradient(178deg,var(--sky) 0%,#EDF4F9 46%,var(--mist) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:var(--w);margin-inline:auto}

/* ── barra: solo marca y una salida. No hay menu porque no hay a donde ir:
      esta pagina existe para una sola cosa. ─────────────────────────────── */
.bar{
  position:sticky;top:0;z-index:20;
  backdrop-filter:blur(14px);background:rgba(233,241,251,.72);
  border-bottom:1px solid var(--line);
}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.7rem 0}
.bar-brand{display:flex;align-items:center;gap:.55rem;font-weight:600;letter-spacing:-.01em}
.bar-brand img{width:26px;height:22px}
.bar-links{display:flex;align-items:center;gap:1.4rem;
  font-size:.9rem;color:var(--ink-soft)}
.bar-links a:hover{color:var(--ink)}

/* ── botones ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-block;padding:.85rem 1.5rem;border-radius:999px;
  background:var(--ink);color:#fff;font-weight:500;font-size:.97rem;
  border:1px solid var(--ink);cursor:pointer;
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(11,19,34,.18)}
.btn-ghost{background:transparent;color:var(--ink);border-color:rgba(11,19,34,.28)}
.btn-ghost:hover{box-shadow:0 10px 24px rgba(11,19,34,.10)}

/* ── hero de texto: lo grande que pinta primero es una LINEA, no un video ── */
.top{padding:4.4rem 0 3rem}
.eyebrow{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--volt);margin-bottom:1.1rem;
}
h1{
  font-family:var(--serif);font-weight:340;letter-spacing:-.02em;line-height:1.06;
  font-size:clamp(2.3rem,5.4vw,4.05rem);max-width:16ch;
}
h1 em{font-style:italic;color:var(--volt)}
.lede{
  margin-top:1.35rem;max-width:52ch;font-size:clamp(1.03rem,1.5vw,1.2rem);
  color:var(--ink-soft);
}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem;align-items:center}
.cta-note{font-size:.88rem;color:var(--ink-soft)}

/* ── seccion ─────────────────────────────────────────────────────────────── */
section{padding:3.4rem 0}
.rail{
  display:flex;gap:1rem;align-items:baseline;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
  padding-bottom:.9rem;margin-bottom:1.8rem;border-bottom:1px solid var(--line);
}
.rail .idx{color:var(--volt)}
h2{
  font-family:var(--serif);font-weight:340;letter-spacing:-.018em;line-height:1.12;
  font-size:clamp(1.7rem,3.2vw,2.6rem);max-width:22ch;
}
h3{font-size:1.06rem;font-weight:600;letter-spacing:-.01em;margin-bottom:.35rem}
.sec-copy{margin-top:1.1rem;max-width:60ch;color:var(--ink-soft)}
.sec-copy p+p{margin-top:.9rem}

/* ── el demo: es la prueba, asi que ocupa el ancho entero ────────────────── */
figure.demo{
  margin-top:1.6rem;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);background:#fff;
  box-shadow:0 24px 60px rgba(11,19,34,.12);
}
figure.demo img{width:100%}
figure.demo figcaption{
  display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center;
  justify-content:space-between;padding:1rem 1.25rem;
  border-top:1px solid var(--line);font-size:.93rem;color:var(--ink-soft);
}
figure.demo figcaption strong{color:var(--ink);font-weight:600}
.open-live{
  font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;
  color:var(--volt);border-bottom:1px solid rgba(61,77,255,.35);
}

/* ── rejilla de puntos ───────────────────────────────────────────────────── */
.grid{display:grid;gap:1.6rem;margin-top:2rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{
  padding:1.35rem;border-radius:16px;background:rgba(255,255,255,.62);
  border:1px solid var(--line);
}
.card p{font-size:.95rem;color:var(--ink-soft)}

/* ── precio ──────────────────────────────────────────────────────────────── */
.prices{display:grid;gap:1.2rem;margin-top:2rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.price{padding:1.7rem;border-radius:20px;background:#fff;border:1px solid var(--line);
  box-shadow:0 16px 40px rgba(11,19,34,.07)}
.price-tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft)}
.price-big{font-family:var(--serif);font-size:3rem;line-height:1;font-weight:340;
  display:block;margin:.7rem 0 .2rem}
.price-mo{color:var(--volt);font-weight:500}
.price p.note{margin-top:.9rem;font-size:.94rem;color:var(--ink-soft)}
.incl{list-style:none;margin-top:1.6rem;display:grid;gap:.6rem}
.incl li{padding-left:1.5rem;position:relative;color:var(--ink-soft);font-size:.96rem}
.incl li::before{content:"";position:absolute;left:0;top:.6em;width:.6rem;height:.6rem;
  border-radius:50%;background:linear-gradient(140deg,var(--volt),var(--iris))}
.incl strong{color:var(--ink);font-weight:600}

/* ── pasos ───────────────────────────────────────────────────────────────── */
ol.steps{list-style:none;display:grid;gap:1.2rem;margin-top:2rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
ol.steps li{padding:1.35rem;border-radius:16px;border:1px solid var(--line);
  background:rgba(255,255,255,.62)}
.step-n{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;color:var(--volt)}
ol.steps p{font-size:.95rem;color:var(--ink-soft);margin-top:.3rem}
.step-t{display:inline-block;margin-top:.8rem;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}

/* ── preguntas ───────────────────────────────────────────────────────────── */
.faq{margin-top:2rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.05rem 2.2rem 1.05rem 0;
  font-weight:500;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.4rem;top:.95rem;
  font-family:var(--mono);color:var(--volt);font-size:1.2rem}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 1.15rem;color:var(--ink-soft);max-width:66ch}

/* ── formulario: mismo contrato que la portada (POST a /contact) ─────────── */
.form{
  margin-top:2rem;padding:1.9rem;border-radius:20px;background:#fff;
  border:1px solid var(--line);max-width:640px;
  box-shadow:0 16px 40px rgba(11,19,34,.07);
}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.86rem;font-weight:500;margin-bottom:.4rem}
.field input,.field textarea{
  width:100%;padding:.8rem .95rem;border-radius:12px;font:inherit;font-size:.97rem;
  border:1px solid rgba(11,19,34,.18);background:var(--mist);color:var(--ink);
}
.field input:focus,.field textarea:focus{outline:2px solid var(--volt);outline-offset:1px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin-top:.9rem;font-size:.92rem;min-height:1.3em;color:var(--ink-soft)}
.form-status.ok{color:#0F7A4A}
.form-status.err{color:#B2372A}

/* ── pie ─────────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:2.6rem 0 3.2rem;margin-top:2rem;
  font-size:.9rem;color:var(--ink-soft)}
.foot-row{display:flex;flex-wrap:wrap;gap:1.4rem 2.4rem;justify-content:space-between}
.foot-row nav{display:flex;flex-wrap:wrap;gap:1.2rem}
footer a:hover{color:var(--ink)}
.foot-legal{margin-top:1.8rem;font-size:.83rem;opacity:.85}

@media (max-width:620px){
  .top{padding:3rem 0 2.2rem}
  section{padding:2.6rem 0}
  .bar-links{gap:1rem;font-size:.85rem}
  h1{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn:hover{transform:none}
}