/* ═══════════════════════════════════════════════════════════════════
   James J Projects — sistema visual
   Aerografía japonesa de los 80 sobre chasis Apple.
   El mundo: campos de cobalto plano alternando con papel; cromados por
   bandas que cortan en vez de fundir; sombras negras sin desenfoque;
   destellos de cuatro puntas; un solo acento cálido, nunca dos.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Movimiento medido sobre el CSS real de apple.com */
  --curva:cubic-bezier(.4,0,.6,1);
  --entrada:cubic-bezier(.25,.1,.3,1);
  --expo:cubic-bezier(.16,1,.3,1);
  --normal:320ms; --rapido:240ms; --micro:160ms;

  /* Papel. Frío, no crema: la lámina no es un libro viejo. */
  --papel:#f2f2f0; --blanco:#ffffff; --hueco:#e9e9e6;
  --tinta:#0d0d0f; --tinta-2:#4a4a50;
  /* 4,58:1 sobre papel. El gris anterior (#83838b) daba 3,35 y los spec
     son de 10 px: texto pequeño, hace falta 4,5. */
  --tinta-3:#6d6d75;
  --hilo:#d7d6d2;

  /* Cobalto. Un campo, no un degradado de cielo. */
  --cobalto:#0f3fa8; --cobalto-hondo:#0a2c78;
  /* Tono sobre tono, pero legible: #2f60d6 daba 1,64:1 y el mínimo para
     texto grande es 3,0. Este da 3,07 y sigue siendo azul sobre azul. */
  --cobalto-alto:#6493f7;
  --sobre-cobalto:#e8eeff; --sobre-cobalto-2:#a9c0f5; --hilo-cobalto:#3a63bd;

  /* Un solo acento cálido. Nunca dos.
     El bermellón de marca vale como SUPERFICIE; para texto sobre papel da
     3,01:1, así que enlaces y etiquetas usan la variante oscura (4,83:1), y
     el fondo del botón en hover también, porque blanco sobre el bermellón
     claro se queda en 3,38. */
  --fuego:#fe4a23; --fuego-texto:#c92e0d; --fuego-fondo:#b02607;

  /* Acentos de servicio: cada oficio tiene el suyo, y solo aparece
     en su propia región. Contraste comprobado sobre papel. */
  --verde:#007d55; --azul:#2563eb;

  --display:"Oswald","Arial Narrow",sans-serif;
  --texto:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --medida:68ch;     /* medida de lectura, dentro de 65-75ch */
  --ancho:74rem;
  color-scheme:light;

  /* Las superficies del navegador también son diseño */
  accent-color:var(--fuego-fondo);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);
  font:400 17px/1.6 var(--texto);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden}

/* Las partes que no dibujé también llevan el diseño. Es la señal más
   barata de que una página está construida y no ensamblada. */
::selection{background:var(--fuego-fondo);color:#fff}
.plate ::selection{background:var(--sobre-cobalto);color:var(--cobalto-hondo)}
:focus-visible{outline:2px solid var(--fuego-fondo);outline-offset:3px;border-radius:2px}
.plate :focus-visible{outline-color:var(--sobre-cobalto)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--hueco)}
::-webkit-scrollbar-thumb{background:var(--tinta-3);border:3px solid var(--hueco)}
::-webkit-scrollbar-thumb:hover{background:var(--tinta-2)}
a{color:var(--fuego-texto);text-decoration-thickness:1px;text-underline-offset:.22em}
:where(h1,h2,h3,.cifra,.dato,td,.precio){font-variant-numeric:tabular-nums}

/* Lo primero que recibe el tabulador. Sin esto hay que pasar por los ocho
   enlaces de la barra en cada página. */
.saltar{position:fixed;z-index:100;top:16px;left:50%;
  transform:translate(-50%,-160%);font-family:var(--mono);font-size:11px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  background:var(--tinta);color:var(--papel);text-decoration:none;
  padding:13px 20px;transition:transform var(--rapido) var(--curva)}
.saltar:focus{transform:translate(-50%,0)}

.env{max-width:var(--ancho);margin:0 auto;padding:0 26px}
@media(max-width:640px){.env{padding:0 18px}}

/* ── Tipografía ─────────────────────────────────────────────────── */
h1,h2,h3{margin:0;font-weight:500;font-family:var(--display);
  text-transform:uppercase;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(34px,8.4vw,112px);line-height:.9}
h2{font-size:clamp(30px,5vw,68px);line-height:.94}
h3,.titulo-menor{font-size:clamp(19px,2vw,25px);line-height:1.1;
  letter-spacing:-.005em}
p{margin:0 0 1.05em;max-width:var(--medida)}
p:last-child{margin-bottom:0}
.guia{font-size:19px;font-weight:300;color:var(--tinta-2);max-width:var(--medida)}
/* Para el párrafo que carga con el peso de una sección, no para el cuerpo. */
.guia.grande{font-size:clamp(19px,2.1vw,24px);line-height:1.5}
.guia b{font-weight:600;color:var(--tinta)}
.plate .guia{color:var(--sobre-cobalto-2)}
.plate .guia b{color:#fff}

/* Ficha técnica: los rótulos van AL LADO del contenido o bajo un dato,
   nunca como etiqueta encima de un titular. Un titular se sostiene solo. */
.spec{font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-3);
  display:block}
.plate .spec{color:var(--sobre-cobalto-2)}
/* Letra pequeña que es una FRASE, no una etiqueta. El mono espaciado sirve
   para dos palabras; para una línea entera hay que volver a la de lectura. */
.nota{font-size:13.5px;line-height:1.7;font-weight:300;color:var(--tinta-3);
  max-width:56ch}
.plate .nota{color:var(--sobre-cobalto-2)}

/* ── Plates: la inversión es la jerarquía ───────────────────────────
   Lo que manda invierte el color, no crece de tamaño. */
.plate{background:var(--cobalto);color:var(--sobre-cobalto);
  margin-inline:calc(50% - 50vw);padding-block:clamp(72px,9vw,124px)}
.plate > .env{padding-inline:max(26px,calc(50vw - var(--ancho)/2 + 26px))}
.plate h1,.plate h2{color:var(--cobalto-alto)}   /* tono sobre tono */
.plate h3{color:#fff}
.papel-sec{padding-block:clamp(72px,9vw,124px)}

/* ── Cromado: bandas que cortan, no degradados que funden ────────── */
.cromo{background:linear-gradient(101deg,
  #ccd7ed 0%,#f0f4ff 5%,#ffffff 6%,#f3f6ff 13%,
  #93a6cb 14%,#bccae7 22%,#edf1fc 23%,#ffffff 31%,
  #6b80ab 32%,#93a5ca 39%,#e2e9f8 40%,#ffffff 47%,
  #a7b7da 48%,#f4f7ff 56%,#ffffff 63%,
  #7d90b6 64%,#c6d2ec 72%,#ffffff 79%,
  #9cadd0 80%,#e5ebf9 90%,#ffffff 100%)}

/* Destello de cuatro puntas. Los lados van hacia dentro: es lo que separa
   una estrella de aerografía de una cruz. El tamaño se pasa por --chispa. */
.chispa{position:absolute;pointer-events:none;
  width:var(--chispa,72px);aspect-ratio:1;transform:translate(-50%,-50%)}
.chispa::before{content:"";position:absolute;inset:0;background:#fff;
  opacity:.92;clip-path:polygon(50% 0,54% 46%,100% 50%,54% 54%,
    50% 100%,46% 54%,0 50%,46% 46%)}

/* ── Botones: rectos, en mono, pegados entre sí ─────────────────── */
.acciones{display:flex;flex-wrap:wrap;gap:0;margin-top:30px}
/* En mono a 12px con .16em de tracking el rótulo se leía letra a letra y no
   como una palabra. En la display, a más cuerpo y con el tracking bajado, se
   lee de un vistazo y tiene la voz del resto del sitio. */
.boton{font-family:var(--display);font-size:16px;font-weight:500;
  letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
  padding:15px 28px;border:1px solid var(--tinta);color:var(--tinta);
  background:transparent;display:inline-block;cursor:pointer;position:relative;
  transition:background var(--micro) var(--curva),color var(--micro) var(--curva),
    transform var(--rapido) var(--curva),box-shadow var(--rapido) var(--curva)}
.boton + .boton{border-left:0}
@media(max-width:430px){
  .acciones{display:grid;grid-template-columns:1fr}
  .boton{text-align:center}
  .boton + .boton{border-left:1px solid var(--tinta);border-top:0}
  .plate .boton + .boton{border-left-color:var(--sobre-cobalto)}}
.boton--lleno{background:var(--tinta);color:var(--papel)}
.boton:hover{background:var(--fuego-fondo);color:#fff;border-color:var(--fuego-fondo);
  transform:translateY(-2px);box-shadow:5px 5px 0 var(--tinta);z-index:1}
.plate .boton:hover{box-shadow:5px 5px 0 var(--cobalto-hondo)}
.boton:active{transform:translateY(0) scale(.985);box-shadow:0 0 0 var(--tinta)}
.plate .boton{border-color:var(--sobre-cobalto);color:var(--sobre-cobalto)}
.plate .boton--lleno{background:var(--sobre-cobalto);color:var(--cobalto-hondo)}
.plate .boton:hover{background:var(--fuego-fondo);color:#fff;border-color:var(--fuego-fondo)}
@media(hover:none){.boton:hover{background:transparent;color:var(--tinta);
  border-color:var(--tinta);transform:none;box-shadow:none}
  .boton--lleno:hover{background:var(--tinta);color:var(--papel)}
  .plate .boton:hover{background:transparent;color:var(--sobre-cobalto);
    border-color:var(--sobre-cobalto)}}

/* ── Las cantidades son la interfaz ──────────────────────────────── */
.precio{font-family:var(--display);font-weight:500;line-height:1;
  font-size:clamp(38px,5.4vw,72px);letter-spacing:-.02em;color:var(--tinta)}
.precio small{font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-3);
  display:block;margin-top:10px;letter-spacing:.16em}
.plate .precio{color:#fff}
.plate .precio small{color:var(--sobre-cobalto-2)}

/* ── El movimiento ───────────────────────────────────────────────── */
.sube{opacity:1;transform:none;
  transition:opacity var(--normal) var(--entrada),transform var(--normal) var(--entrada)}
.sube.preparada:not(.dentro){opacity:0;transform:translateY(20px)}
.sube.dentro{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;animation-delay:0s!important;
    transition-property:opacity,background-color,color,border-color!important;
    transition-duration:200ms!important;transition-delay:0s!important;
    scroll-behavior:auto!important}
  /* El !important de arriba deja la duración a cero pero NO el estado inicial:
     lo que espera un observador o un `both` se queda invisible para siempre. */
  .sube,.titular .linea > i,.firma,.cupo,.acciones{
    opacity:1!important;transform:none!important}
  .subrayado::after{transform:scaleX(1)!important}
}

/* Reforma 14-09-2026: lectura y contacto desde el móvil. */
[id]{scroll-margin-top:100px}
.resumen-precios{font-size:17px;font-weight:600;margin-top:20px;max-width:46ch}
.boton{min-height:48px;overflow-wrap:anywhere}
.boton:active{transition-duration:var(--micro)}
.barra .cta,.barra .enlaces a,.menu-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.barra .marca{min-height:44px;display:inline-flex;align-items:center}
@media(max-width:430px){.barra{padding-left:10px;max-width:calc(100vw - 24px);width:calc(100vw - 24px)}.barra .marca{font-size:16px;margin-right:auto}.barra a.cta{font-size:11px;letter-spacing:0;padding-inline:8px}.menu-btn{padding:8px;min-width:40px}}
@media(prefers-reduced-motion:reduce){.sube.preparada,.boton:hover,.boton:active,.obra:hover{transform:none!important;opacity:1!important}}
@media(prefers-reduced-transparency:reduce){.barra{background:var(--papel)!important;backdrop-filter:none!important}}
@media(prefers-contrast:more){:root{--tinta-2:#0d0d0f;--tinta-3:#4a4a50;--hilo:#4a4a50}.boton{border-width:2px}}
@media(hover:none){.plate .boton--lleno:hover{background:var(--sobre-cobalto);color:var(--cobalto-hondo)}}

/* Información de primera capa para el correo y formularios futuros. */
.info-contacto{font-size:13.5px;line-height:1.65;color:var(--tinta-3);margin-top:13px;max-width:72ch}
.plate .info-contacto{color:var(--sobre-cobalto-2)}
.pie-enlaces{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px}
.pie-enlaces a{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.consentimiento-formulario{margin-top:16px;max-width:72ch;font-size:14px;line-height:1.6;color:var(--tinta-2)}
.consentimiento-formulario label{display:flex;gap:9px;align-items:flex-start;font-weight:600}
.consentimiento-formulario input{margin:.35em 0 0;flex:0 0 auto}
.consentimiento-formulario p{margin:8px 0 0}
.pie-t .info-contacto{margin:12px 0 0;font-size:12px}