/* ejque. — páginas interiores (ciudades, servicios, ejques) y pie con enlaces.
   Se carga después de ejque-v8.css y reutiliza sus medidas áureas. */

/* granate como tercer fondo */
.red{color:var(--papel)}

/* pie con enlaces (también en la home) */
.foot-legal a,.foot-legal button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.foot-legal{margin-top:8px}
.foot-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s1) var(--s3);padding-top:var(--s2);border-top:1px solid rgba(251,250,245,.18)}
.foot-links p{margin:0 0 10px;font-family:var(--mono);font-size:12px;letter-spacing:0;opacity:.55}
.foot-links ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.foot-links a{text-decoration:none;font-size:15px;opacity:.85}
.foot-links a:hover,.foot-links a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:4px}

/* ---------- páginas interiores ---------- */
/* en las páginas con texto largo, el menú lleva un velo del color del fondo para que el texto no choque con el logo */
.page .nav{background:linear-gradient(to bottom, var(--bgc, var(--papel)) 58%, rgba(0,0,0,0))}
.page .nav.gone{background:none}
.page .sec{min-height:100svh}
.crumb{margin:0 0 var(--s2);font-family:var(--mono);font-size:13px;letter-spacing:0;opacity:.75}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline;text-underline-offset:3px}
.crumb span{margin:0 .5em;opacity:.6}
.phero{display:flex;flex-direction:column;justify-content:center;min-height:100svh;padding-top:var(--s4)}
.phero h1{margin:0;font-weight:800;font-size:calc(var(--t3) * 1.272);letter-spacing:-.05em;line-height:.94;max-width:11ch;text-wrap:balance}
.phero .lead{max-width:30ch}
.phero-foot{margin-top:var(--s3);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2)}
.phero-foot .pill{background:var(--tinta);color:var(--papel)}

/* texto corrido */
.prose{margin-top:var(--s2);max-width:62ch}
.prose p{margin:0 0 1em;opacity:.92}
.prose p:last-child{margin-bottom:0}
.prose a,.inline-links a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.prose a:hover,.inline-links a:hover{text-decoration-thickness:3px}
.prose h3{margin:var(--s2) 0 8px}
.prose ul,.prose ol{margin:0 0 1em;padding-left:1.2em}
.prose li+li{margin-top:6px}
.prose strong{font-weight:700}

/* lista con puntos, como la garantía */
.dots{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1) var(--s3)}
.dots li{position:relative;padding-left:var(--s2);opacity:.94}
.dots li::before{content:"";position:absolute;left:0;top:.55em;width:.5em;height:.5em;border-radius:50%;background:currentColor}
.dots b{font-weight:700}
.dots.one{grid-template-columns:1fr;max-width:62ch}

/* tarjetas que enlazan a otras páginas */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1);margin-top:var(--s3)}
.card{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s1);border:1.5px solid currentColor;border-radius:calc(var(--u)*1.618);padding:var(--s2);text-decoration:none;min-width:0;transition:transform .4s var(--ease)}
.card:hover{transform:translateY(-3px)}
.card h3{font-size:var(--t1)}
.card p{margin:0;font-size:15px;opacity:.85}
.card .go{font-family:var(--mono);font-size:13px}

/* preguntas frecuentes */
.faq{margin-top:var(--s3);max-width:62ch;border-bottom:1.5px solid currentColor}
.faq details{border-top:1.5px solid currentColor}
.faq summary{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);padding:var(--s1) 0;cursor:pointer;list-style:none;font-weight:700;font-size:calc(var(--t0) * 1.272);letter-spacing:-.015em;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-weight:400;font-size:20px;line-height:1;flex:none}
.faq details[open] summary::after{content:"−"}
.faq details > div{padding:0 0 var(--s1)}
.faq details p{margin:0 0 .8em;opacity:.9}

/* tabla de precios del artículo */
.ptable{width:100%;border-collapse:collapse;margin:var(--s1) 0 var(--s2);font-size:15px}
.ptable th,.ptable td{text-align:left;padding:12px 12px 12px 0;border-bottom:1px solid currentColor;vertical-align:top}
.ptable thead th{font-family:var(--mono);font-weight:400;font-size:12px;opacity:.7}
.ptable td:last-child,.ptable th:last-child{white-space:nowrap}

/* artículo */
.article .sec{min-height:auto}
.article .phero{min-height:88svh}
.meta{margin:var(--s2) 0 0;font-family:var(--mono);font-size:13px;opacity:.7}
.article .prose{font-size:calc(var(--t0) * 1.06)}
.article .prose h2{font-size:var(--t2);max-width:20ch;margin:var(--s3) 0 var(--s1)}
.article .prose h2:first-child{margin-top:0}

/* pasos numerados */
.steps{list-style:none;counter-reset:st;margin:var(--s3) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2) var(--s3)}
.steps li{counter-increment:st;position:relative;padding-left:calc(var(--s2) * 1.5);opacity:.94}
.steps li::before{content:counter(st, decimal-leading-zero);position:absolute;left:0;top:.2em;font-family:var(--mono);font-size:13px;opacity:.8}
.steps b{display:block;font-weight:700;font-size:calc(var(--t0) * 1.272);letter-spacing:-.015em;margin-bottom:2px}

/* la proporción áurea, contada en la portada de la home */
.phi-note .phi-say{margin-top:10px;max-width:38ch;text-align:right;font-size:12px;line-height:1.55;letter-spacing:-.01em;font-weight:400;opacity:.9}

/* aparición suave al hacer scroll */
.js .rv{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease), transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}

@media (max-width:820px){
  .phero{padding-top:calc(100px + env(safe-area-inset-top, 0px))}
  .phero h1{font-size:clamp(44px, 13vw, 68px)}
  .dots,.cards,.steps{grid-template-columns:1fr}
  .hero .phi-note{align-items:flex-start}
  .phi-note .phi-say{text-align:left}
  .foot-links{grid-template-columns:1fr 1fr}
  .faq summary{font-size:18px}
  .ptable{font-size:14px}
  .article .prose h2{font-size:30px}
}
@media (prefers-reduced-motion: reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .card{transition:none}
}

/* ---------- trabajos: el rectángulo áureo ---------- */
.aurea{display:grid;grid-template-columns:1fr .618fr;grid-template-rows:.618fr .382fr;gap:var(--s1);aspect-ratio:1.618/1;width:100%;margin-top:var(--s3)}
.obra{position:relative;display:block;min-height:0;overflow:hidden;margin:0;padding:0;border:1.5px solid var(--tinta);border-radius:calc(var(--u)*1.618);background:var(--tinta);color:var(--papel);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.o1{grid-row:1 / 3}
.obra img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left center;opacity:.94;transition:transform 1.1s var(--ease)}
.obra::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(29,29,27,.9), rgba(29,29,27,0) 58%);pointer-events:none}
.obra-n{position:absolute;top:14px;left:16px;z-index:1;font-family:var(--mono);font-size:12px;letter-spacing:0}
.obra-t{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;display:flex;flex-direction:column}
.obra-t b{font-weight:800;font-size:var(--t1);letter-spacing:-.03em;line-height:1.05}
.o2 .obra-t b{font-size:calc(var(--t0) * 1.272)}
.obra-t small{margin-top:4px;font-size:13px;opacity:.8}
.obra-go{position:absolute;top:12px;right:12px;z-index:1;padding:7px 12px;border-radius:999px;background:var(--papel);color:var(--tinta);font-weight:600;font-size:13px;opacity:0;transform:translateY(-6px);transition:opacity .35s var(--ease), transform .35s var(--ease)}
.obra:hover img{transform:scale(1.04)}
.obra:hover .obra-go,.obra:focus-visible .obra-go{opacity:1;transform:none}
.o3{display:flex;flex-direction:column;justify-content:space-between;padding:14px 16px;background:transparent;color:var(--tinta);border-style:dashed}
.o3::after{display:none}
.o3 .obra-n{position:static}
.o3 b{font-weight:800;font-size:calc(var(--t0) * 1.272);letter-spacing:-.02em;line-height:1.1;max-width:18ch}
.o3 .obra-go{position:static;align-self:flex-start;opacity:1;transform:none;background:var(--tinta);color:var(--papel)}
.obras-links{margin:var(--s1) 0 0;font-size:15px;opacity:.85}
@media (hover:none){.obra-go{opacity:1;transform:none}}

/* capturas en las páginas de proyecto */
.shots{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s2);align-items:end;margin-top:var(--s3)}
.shot-desk{margin:0;border:1.5px solid var(--tinta);border-radius:calc(var(--u)*1.2);overflow:hidden;background:var(--tinta)}
.shot-desk .bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--papel);color:var(--tinta);border-bottom:1.5px solid var(--tinta);font-family:var(--mono);font-size:12px}
.shot-desk .bar span{opacity:.45}
.shot-desk img,.shot-phone img{display:block;width:100%;height:auto}
.shot-phone{margin:0;width:clamp(150px, 16vw, 220px);border:8px solid var(--tinta);border-radius:30px;overflow:hidden;background:var(--tinta)}
.ficha-dl{display:grid;grid-template-columns:max-content 1fr;gap:12px var(--s2);margin:var(--s2) 0 0;max-width:62ch}
.ficha-dl dt{font-family:var(--mono);font-size:13px;opacity:.7;padding-top:3px}
.ficha-dl dd{margin:0}

/* ---------- «Entra en la web»: la ventana en directo ---------- */
html.visor-on{overflow:hidden}
main,.foot,.nav{transition:opacity .45s var(--ease)}
.visor-on main,.visor-on .foot,.visor-on .nav{opacity:0 !important;pointer-events:none}
.visor{position:fixed;inset:0;z-index:60;display:none;grid-template-columns:minmax(0,1fr) clamp(260px, 22vw, 320px);gap:var(--s1);padding:calc(var(--s1) + env(safe-area-inset-top, 0px)) var(--s2) var(--s2)}
.visor.on{display:grid}
.visor-win{display:flex;flex-direction:column;min-height:0;overflow:hidden;background:var(--tinta);border:1.5px solid var(--tinta);border-radius:calc(var(--u)*1.618);box-shadow:0 30px 90px rgba(29,29,27,.28);will-change:transform}
.visor-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:var(--papel);color:var(--tinta);border-bottom:1.5px solid var(--tinta)}
.visor-back{flex:none;padding:9px 16px;border:0;border-radius:999px;background:var(--tinta);color:var(--papel);font:600 14px var(--f);cursor:pointer}
.visor-url{flex:1;min-width:0;margin:0;font-family:var(--mono);font-size:13px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.visor-https{opacity:.45}
.visor-host{font-weight:700}
.visor-tools{flex:none;display:flex;align-items:center;gap:8px}
.visor-mode{display:inline-flex;padding:2px;border:1.5px solid var(--tinta);border-radius:999px}
.visor-mode button{padding:6px 12px;border:0;border-radius:999px;background:none;color:var(--tinta);font:600 13px var(--f);cursor:pointer}
.visor-mode button[aria-pressed="true"]{background:var(--tinta);color:var(--papel)}
.visor-open{display:grid;place-items:center;width:34px;height:34px;border:1.5px solid var(--tinta);border-radius:50%;color:var(--tinta);text-decoration:none;font-size:16px}
.visor-stage{position:relative;flex:1;min-height:0;display:flex;justify-content:center;align-items:stretch;background:var(--tinta)}
.visor-frame{display:block;width:100%;height:100%;border:0;background:var(--tinta);opacity:0;transition:opacity .5s, width .6s var(--ease), height .6s var(--ease), border-radius .6s var(--ease)}
.visor.loaded .visor-frame{opacity:1}
.visor-loading{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:var(--papel);font-family:var(--mono);font-size:14px}
.visor.loaded .visor-loading{display:none}
.visor.phone .visor-stage{align-items:center;padding:var(--s1) 0}
.visor.phone .visor-frame{width:390px;max-width:100%;height:min(844px, 100%);border:10px solid #0d0d0c;border-radius:40px;box-shadow:0 0 0 1.5px rgba(251,250,245,.28)}
.visor-ficha{align-self:start;max-height:100%;overflow:auto;padding:var(--s2);background:var(--papel);color:var(--tinta);border:1.5px solid var(--tinta);border-radius:calc(var(--u)*1.618)}
.visor.on .visor-ficha{animation:visorIn .7s .4s both var(--ease)}
.visor.closing .visor-ficha{animation:none;opacity:0;transition:opacity .2s}
@keyframes visorIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.visor-ficha h2{font-size:calc(var(--t1) * 1.1);max-width:none;letter-spacing:-.025em;line-height:1.08}
.visor-kind{margin:6px 0 0;font-size:15px;opacity:.75}
.visor-ficha dl{margin:var(--s1) 0 0}
.visor-ficha dt{margin-top:12px;font-family:var(--mono);font-size:12px;opacity:.6}
.visor-ficha dd{margin:2px 0 0;font-size:15px;line-height:1.45}
.visor-more{display:inline-block;margin-top:var(--s2);font-weight:700;text-underline-offset:4px;text-decoration-thickness:1.5px}
.visor-tip{margin:var(--s1) 0 0;font-family:var(--mono);font-size:12px;line-height:1.5;opacity:.6}

@media (max-width:820px){
  .aurea{grid-template-columns:1fr;grid-template-rows:none;aspect-ratio:auto}
  .o1{grid-row:auto}
  .o1,.o2{aspect-ratio:8 / 5}
  .o3{min-height:150px}
  .shots{grid-template-columns:1fr}
  .shot-phone{width:56%;justify-self:center}
  .ficha-dl{grid-template-columns:1fr;gap:2px 0}
  .ficha-dl dd{margin-bottom:10px}
  .visor{grid-template-columns:1fr;padding:0}
  .visor-win{border:0;border-radius:0;box-shadow:none}
  .visor.on .visor-win{animation:visorIn .45s both var(--ease)}
  .visor-ficha,.visor-mode{display:none}
  .visor-bar{padding:calc(8px + env(safe-area-inset-top, 0px)) 10px 8px}
  .visor-back{padding:8px 12px;font-size:13px}
  .visor-url{text-align:left;font-size:12px}
  .visor-https{display:none}
}
@media (prefers-reduced-motion: reduce){
  .obra img,.visor-frame{transition:none}
  .visor.on .visor-ficha,.visor.on .visor-win{animation:none}
}
button.pill{border:0;font-family:var(--f);cursor:pointer}
.linklike{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.obra-t .obra-n{position:static;margin-bottom:6px;font-style:normal;opacity:.8}

/* visor · fondo propio (la home «tierra» pinta el html a dos colores) y plan B cuando una web no se deja ver dentro */
html.visor-on,html.visor-on:has(body.tierra){background:var(--papel)}
.visor{background:var(--papel)}
.visor-loading{grid-template-rows:auto auto;align-content:center;gap:14px}
.visor-slow{display:none;color:var(--papel);font-size:13px;text-underline-offset:4px;opacity:.85}
.visor.slow .visor-slow{display:inline}
.visor-alt{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px;background:var(--tinta);text-align:center}
.visor.fallback .visor-alt{display:flex}
.visor.fallback .visor-loading,.visor.fallback .visor-frame{display:none}
.visor-alt-shot{margin:0;width:min(760px,100%);max-height:62%;overflow:hidden;border-radius:12px;border:1.5px solid rgba(251,250,245,.25);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.visor-alt-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.visor-alt.alt-phone .visor-alt-shot{width:auto;height:62%;aspect-ratio:390/844;border-radius:28px;border:8px solid #0d0d0c}
.visor-alt-cta{display:flex;flex-direction:column;align-items:center;gap:12px}
.visor-alt-t{margin:0;color:var(--papel);font-family:var(--mono);font-size:13px;opacity:.75}
.visor-alt-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;background:var(--papel);color:var(--tinta);font:700 16px var(--f);text-decoration:none;box-shadow:4px 4px 0 #9E0000;transition:transform .15s,box-shadow .15s}
.visor-alt-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #9E0000}


/* precio base en fichas (20261027) */
.price .base,.plan .base,.ptable .base{display:block;margin-top:.7em;font-size:13px;line-height:1.4;opacity:.78}