/* ═══════════════════════════════════════════════════════════════════════════
   sitio.css — el sistema visual del sitio público de LUMAVI (azul, D-006)
   ───────────────────────────────────────────────────────────────────────────
   Lo que comparten todas las páginas públicas: colores, letras, botones, la
   barra de arriba, el menú del teléfono, el pie, tarjetas y pasos. Cada página
   lo carga ANTES de su propio <style>, donde quedan solo sus secciones únicas.

   Nació el 10 oct 2026 sacando, regla por regla y en el mismo orden, lo común
   del inicio azul (PR #77). Capturas antes/después idénticas píxel a píxel.

   La barra y el pie (HTML) viven en partes/barra.html y partes/pie.html;
   build.js los copia en cada página marcada con <!-- @barra --> / <!-- @pie -->.
   Su inglés vive en idioma.js (COMUN_EN).

   Reglas de pulido (docs/REGLAS_DE_PULIDO.md): hover solo con ratón, respuesta
   al pulsar, campos de 16 px, contraste ≥ 4.5:1, sin movimiento decorativo.
   Plan de páginas: docs/PLAN_ROLLOUT_AZUL.md · Figma: "LUMAVI — Sitio público".
   Si cambias algo aquí, sube ?v= en las páginas que lo cargan (v2: 10 oct, fotos sin alargar).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── tokens ── */
:root{
  --navy:#0A233E;--ink:#1F2933;--mid:#56606B;--bg:#EEF1F4;--card:#fff;--line:#D9DEE4;
  --green:#8CC346;--green-d:#7AB038;--green-ink:#3F5A1D;--green-t:#EAF1DF;
  --serif:'Playfair Display',Georgia,serif;--sans:'Outfit',system-ui,sans-serif;
  --r:14px;--w:1120px;
}

/* ── base ── */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--sans);color:var(--ink);background:#fff;line-height:1.55;font-size:17px;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%;height:auto}  /* height:auto: sin esto el height="…" de cada <img> fija la caja (900 px) y anula aspect-ratio — fotos alargadas, arreglado el 10 oct */
h1,h2{font-family:var(--serif);color:var(--navy);margin:0;line-height:1.12;font-weight:700;letter-spacing:-.01em}
h3{font-size:19px;font-weight:600;color:var(--navy);margin:0 0 6px}
p{margin:0}
.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}
.sec{padding:72px 0}
.sec.gris{background:var(--bg)}
.sec h2{font-size:clamp(28px,3.6vw,40px);max-width:640px}
.sec .intro{font-size:18px;color:var(--mid);max-width:620px;margin-top:12px}

/* ── botones y tacto (REGLAS_DE_PULIDO §A) ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:10px;font:600 16px var(--sans);text-decoration:none;border:1.5px solid transparent;cursor:pointer}
.btn.go{background:var(--green);color:var(--navy)}
.btn.out{background:#fff;color:var(--navy);border-color:var(--navy)}
.btn.claro{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.5)}
.btn,button,.menu a,.mob a,.redes a,.lumavi-lang button{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.btn,.ham{transition:transform 120ms cubic-bezier(.23,1,.32,1)}
.btn:active,.ham:active{transform:scale(.97)}
.menu a:active,.mob a:active,.redes a:active{background:var(--bg)}
@media (prefers-reduced-motion:reduce){.btn,.ham{transition:none}}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}
@media (pointer:coarse){input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),select,textarea{font-size:16px}}

/* ── barra de arriba (partes/barra.html) ── */
.nav{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:20px;min-height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo img{height:34px;width:auto}
.logo b{font-family:var(--serif);font-size:20px;color:var(--navy);letter-spacing:.02em;line-height:1}
.logo small{display:block;font:600 10px var(--sans);letter-spacing:.2em;color:var(--green-ink);margin-top:3px}
.menu{display:flex;gap:2px;margin-left:auto}
.menu a{text-decoration:none;font-weight:500;font-size:15px;color:var(--ink);padding:10px 11px;border-radius:8px;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.menu a[aria-current="page"]{color:var(--navy);font-weight:600;box-shadow:inset 0 -2px 0 var(--green)}
.nav .lumavi-lang{border-color:var(--line)}
.nav .lumavi-lang button[aria-pressed="true"]{background:var(--navy)}
.ham{display:none;background:none;border:1.5px solid var(--line);border-radius:8px;width:44px;height:44px;cursor:pointer;padding:0}
.ham i{display:block;width:18px;height:2px;background:var(--navy);margin:4px auto}
.mob{display:none;position:fixed;top:68px;left:0;right:0;bottom:0;background:#fff;z-index:30;padding:14px 20px 40px;overflow:auto;flex-direction:column;gap:2px;border-top:1px solid var(--line)}
.mob.abierto{display:flex}
.mob a{text-decoration:none;color:var(--ink);font-weight:500;font-size:17px;padding:12px 8px;border-radius:8px;min-height:48px;display:flex;align-items:center}
.mob a[aria-current="page"]{color:var(--navy);font-weight:600;background:var(--bg)}
.mob a.fuerte{color:var(--green-ink);font-weight:600}
.mob a.btn{justify-content:center;margin-top:10px;color:var(--navy)}
.mob a.pista{color:var(--navy);text-decoration:underline;text-underline-offset:4px;margin-top:6px}
.mob a.staff{color:var(--mid);font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-top:10px}
.mob hr{border:0;border-top:1px solid var(--line);margin:8px 0}
@media (max-width:1023px){ .menu,.nav .btn{display:none} .ham{display:block;margin-left:auto} }
@media (min-width:1024px){ .mob{display:none!important} }

/* ── tarjetas (servicios) ── */
.tarjetas{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:32px}
.tarjeta{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column}
.tarjeta img{aspect-ratio:4/3;object-fit:cover;width:100%}
.tarjeta img.vertical{object-position:50% 22%}  /* foto vertical recortada a 4:3: que se vea la cara, no el pecho */
.tarjeta .t{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.tarjeta p{color:var(--mid);font-size:15px;flex:1}
.tarjeta .precio{font-size:14px;color:var(--navy);font-weight:600}
.tarjeta .ir{color:var(--green-ink);font-weight:600;font-size:15px;margin-top:8px}

/* ── pasos (una secuencia numerada) ── */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:32px;counter-reset:p}
.paso{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.paso::before{counter-increment:p;content:counter(p);display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:15px;margin-bottom:12px}
.paso p{color:var(--mid);font-size:15px}

/* ── etiquetas ── */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips span{background:var(--green-t);color:var(--green-ink);font-weight:600;font-size:14px;padding:8px 12px;border-radius:999px}

/* ── cierre azul (la última llamada a la acción) ── */
.cierre{background:var(--navy);color:#fff;padding:80px 0;text-align:center}
.cierre h2{color:#fff;margin:0 auto}
.cierre p{color:#C9D3DE;max-width:560px;margin:14px auto 28px;font-size:18px}
.cierre .otra{margin-top:18px;font-size:16px;display:flex;gap:4px 18px;justify-content:center;flex-wrap:wrap}
.cierre .otra a{color:#fff;padding:10px 0;display:inline-block}

/* ── pie (partes/pie.html) ── */
footer{background:#fff;border-top:1px solid var(--line);padding:48px 0 28px;color:var(--mid);font-size:15px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
footer h4{margin:0 0 10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
footer a{display:inline-block;text-decoration:none;padding:6px 0;min-height:36px;line-height:24px}
.redes{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.redes a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:0;padding:0;border:1px solid var(--line);border-radius:10px;color:var(--navy)}
.legal{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;border-top:1px solid var(--line);margin-top:28px;padding-top:18px;font-size:14px}
.legal small{display:block;font-size:12px;color:var(--mid);opacity:.8;margin-top:2px}

/* ── blog retro: papel y Polaroid (D-040; Figma "LUMAVI — Polaroid Pop-out") ──
   Solo el blog: blog.html y las entradas que arma build.js llevan <body class="retro">.
   Papel crema, tinta navy, un verde; coral solo como una línea fina. Caladea + Poppins.
   Son reglas nuevas: las páginas que no las usan no tienen que subir ?v=. */
:root{--paper:#F4EFE4;--coral:#E06E4A}
.retro{--serif:'Caladea',Georgia,serif;--sans:'Poppins',system-ui,sans-serif;background:var(--paper)}
.retro .nav,.retro .mob,.retro footer{background:var(--paper)}
.franja{height:12px;background:var(--green);border-top:8px solid var(--green-d)}
.serie{font:600 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--green-ink)}
.raya{width:56px;height:3px;background:var(--coral);border:0;margin:18px 0}
.polaroid{margin:0;background:#fff;padding:12px 12px 0;box-shadow:0 1px 3px rgba(10,35,62,.08),0 10px 26px rgba(10,35,62,.13);transform:rotate(-1.5deg)}
.polaroid img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--line)}
.polaroid figcaption{font:italic 18px/1.3 var(--serif);color:var(--navy);text-align:center;padding:12px 6px 16px}
.polaroid figcaption small{display:block;font-size:15px;color:var(--mid);margin-top:2px}
@media (hover:hover) and (pointer:fine){ .polaroid{transition:transform .2s} a:hover .polaroid{transform:rotate(0)} }
@media (prefers-reduced-motion:reduce){ .polaroid{transition:none} }

/* ── tableta y teléfono ── */
@media (max-width:899px){
  .sec{padding:52px 0}
  .tarjetas,.pasos{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:599px){
  .tarjetas,.pasos{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
}

/* Hover solo con ratón: en el teléfono el :hover se queda pegado tras tocar */
@media (hover:hover) and (pointer:fine){
.btn.go:hover{background:var(--green-d)}
.btn.out:hover{background:var(--bg)}
.btn.claro:hover{background:rgba(255,255,255,.24)}
.menu a:hover{background:var(--bg)}
.mob a:hover{background:var(--bg)}
.tarjeta:hover{box-shadow:0 6px 22px rgba(10,35,62,.10)}
footer a:hover{color:var(--navy);text-decoration:underline}
.redes a:hover{background:var(--bg);text-decoration:none}
}