/* ============================================================
   OLTEK — hoja de estilo única
   Paleta e identidad: ver Oltek/Marca.md
   ============================================================ */

:root{
  --carbon:#0B0C0E;
  --grafito:#171A1E;        /* contraste subido: antes #141618 no se distinguía del fondo */
  --grafito-alto:#20242A;
  --borde:#2E333A;
  --borde-suave:#22262B;
  --texto:#EDEEF0;
  --cuerpo:#CBD0D6;
  --apagado:#949AA2;
  --tenue:#6B7178;
  --ambar:#F2A73B;
  --ambar-tenue:rgba(242,167,59,.10);
  --ambar-borde:rgba(242,167,59,.34);

  --display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Chivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --ancho:1140px;
  --radio:4px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--carbon);
  color:var(--cuerpo);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 26px}
.estrecho{max-width:760px}

.saltar{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ambar);color:var(--carbon);padding:10px 18px;font-weight:600}
.saltar:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--ambar);outline-offset:3px}

/* ---------- tipografía compartida ---------- */
.etiqueta{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ambar);margin:0 0 20px;display:flex;align-items:center;gap:11px;
}
.etiqueta::before{content:"";width:7px;height:7px;background:var(--ambar);
  transform:rotate(45deg);flex:none}
.mono{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ambar);margin:0 0 14px;
}
.titulo{
  font-family:var(--display);font-weight:800;
  font-size:clamp(30px,4.8vw,50px);line-height:1.08;letter-spacing:-.04em;
  color:var(--texto);margin:0 0 22px;text-wrap:balance;
}
.entradilla{font-size:18.5px;max-width:64ch;margin:0 0 52px;color:var(--cuerpo)}
.entradilla--ancha{margin-bottom:22px}
.entradilla strong{color:var(--texto);font-weight:600}
.punto{color:var(--ambar)}
.cierre{
  font-family:var(--display);font-weight:600;font-size:clamp(19px,2.3vw,24px);
  line-height:1.35;letter-spacing:-.02em;color:var(--texto);
  max-width:56ch;margin:52px 0 0;padding-left:20px;border-left:2px solid var(--ambar);
}

/* ---------- cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:50;background:rgba(11,12,14,.86);
  border-bottom:1px solid transparent}
@supports (backdrop-filter: blur(10px)){ .cabecera{backdrop-filter:blur(12px)} }
.cabecera.is-pegada{border-bottom-color:var(--borde)}
.cabecera__fila{display:flex;align-items:center;gap:24px;height:70px}

.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--texto)}
.logo__marca{width:27px;height:27px;flex:none}
.logo__texto{font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:-.045em}

.nav{display:flex;gap:28px;margin-left:auto;font-size:15px}
.nav a{color:var(--apagado);text-decoration:none;transition:color .18s}
.nav a:hover{color:var(--texto)}
@media (max-width:860px){ .nav{display:none} .cabecera__fila{justify-content:space-between} }

/* ---------- botones ---------- */
.boton{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ambar);color:#1A1206;
  font-family:var(--sans);font-weight:600;font-size:16px;
  text-decoration:none;padding:13px 24px;border-radius:var(--radio);
  border:1px solid var(--ambar);
  transition:transform .16s ease, filter .16s ease;
}
.boton:hover{filter:brightness(1.08);transform:translateY(-1px)}
.boton--pequeno{padding:8px 16px;font-size:14px}
.boton--grande{padding:16px 32px;font-size:17px}
.boton--fantasma{background:transparent;color:var(--texto);border-color:var(--borde)}
.boton--fantasma:hover{border-color:var(--ambar);color:var(--ambar);filter:none}
.acciones{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- hero ---------- */
.hero{padding:80px 0 96px;border-bottom:1px solid var(--borde)}
.hero__rejilla{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
@media (max-width:940px){ .hero__rejilla{grid-template-columns:1fr;gap:48px} }

.hero__titulo{
  font-family:var(--display);font-weight:800;
  font-size:clamp(38px,6.6vw,72px);line-height:1;letter-spacing:-.05em;
  color:var(--texto);margin:0 0 26px;
}
.hero__apoyo{font-size:19px;max-width:46ch;margin:0 0 34px;color:var(--cuerpo)}

/* ---------- la jornada (el gráfico del día) ---------- */
.jornada{
  margin:0;background:var(--grafito);border:1px solid var(--borde);
  border-radius:var(--radio);padding:28px 28px 24px;
}
.jornada__titulo{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tenue);margin:0 0 26px;
}
.jornada__fila{display:grid;grid-template-columns:1fr;gap:9px;margin-bottom:26px}
.jornada__fila:last-of-type{margin-bottom:14px}
.jornada__eti{font-size:14.5px;font-weight:600;color:var(--texto)}
.jornada__dato{
  font-family:var(--mono);font-size:11.5px;color:var(--tenue);letter-spacing:.04em;
}
.jornada__dato--on{color:var(--ambar)}

.jornada__barra{
  position:relative;height:34px;border-radius:2px;overflow:hidden;
  background:var(--grafito-alto);
}
/* marcas de hora, cada 1/24 */
.jornada__barra::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,
    rgba(11,12,14,.55) 0 1px, transparent 1px calc(100% / 24));
}
/* negocio: encendido sólo de 9:00 (37.5%) a 20:00 (83.33%) */
.jornada__barra--negocio{
  background:
    linear-gradient(90deg,
      var(--grafito-alto) 0 37.5%,
      #6E7885 37.5% 83.333%,
      var(--grafito-alto) 83.333% 100%);
}
/* web: encendido las 24 horas */
.jornada__barra--web{
  background:linear-gradient(90deg, var(--ambar) 0 100%);
}

.jornada__ahora{
  position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--texto);
  box-shadow:0 0 0 1px rgba(11,12,14,.8);z-index:2;
}
.jornada__barra--web .jornada__ahora{background:#1A1206}

.jornada__escala{
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:10px;color:var(--tenue);
  letter-spacing:.06em;margin-top:2px;padding-top:8px;
  border-top:1px solid var(--borde-suave);
}
.jornada__pie{
  font-size:14.5px;line-height:1.6;color:var(--apagado);
  margin:22px 0 0;padding-top:20px;border-top:1px solid var(--borde-suave);
}
.jornada__pie b{color:var(--ambar);font-weight:600}

/* ---------- secciones ---------- */
.seccion{padding:110px 0;border-bottom:1px solid var(--borde)}
.seccion--alt{background:var(--grafito)}

/* ---------- fichas ---------- */
.rejilla{display:grid;gap:16px}
.rejilla--tres{grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr))}
.ficha{
  background:var(--grafito);border:1px solid var(--borde);border-radius:var(--radio);
  padding:32px 30px 34px;
}
.seccion--alt .ficha{background:var(--carbon)}
.ficha h3{
  font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em;
  color:var(--texto);margin:0 0 12px;
}
.ficha p{margin:0;font-size:15.5px;color:var(--apagado);line-height:1.65}

/* ---------- doble (web / sistema) ---------- */
.doble{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px}
.pieza{
  background:var(--carbon);border:1px solid var(--borde);border-radius:var(--radio);
  padding:32px 30px 34px;
}
.pieza--acento{border-color:var(--ambar-borde);background:var(--ambar-tenue)}
.lista{list-style:none;margin:0;padding:0;font-size:16px}
.lista li{position:relative;padding-left:22px;margin-bottom:13px;color:var(--cuerpo)}
.lista li:last-child{margin-bottom:0}
.lista li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;
  background:var(--tenue);transform:rotate(45deg)}
.pieza--acento .lista li::before{background:var(--ambar)}

/* ---------- pasos ---------- */
.pasos{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:1px;
  background:var(--borde);border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden;
}
.pasos li{background:var(--carbon);padding:36px 32px 38px}
.pasos h3{
  font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:-.025em;
  color:var(--texto);margin:0 0 12px;
}
.pasos p:last-child{margin:0;font-size:15.5px;color:var(--apagado);line-height:1.65}

/* ---------- precios ---------- */
.precios{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:16px;align-items:start}
.plan{
  background:var(--carbon);border:1px solid var(--borde);border-radius:var(--radio);
  padding:34px 30px 36px;
}
.plan--destacado{border-color:var(--ambar-borde);background:var(--ambar-tenue)}
.plan__precio{
  font-family:var(--display);font-weight:800;font-size:40px;letter-spacing:-.04em;
  color:var(--texto);margin:0;line-height:1;font-variant-numeric:tabular-nums;
}
.plan--destacado .plan__precio{color:var(--ambar)}
.plan__precio span{font-size:20px;font-weight:700;letter-spacing:-.02em}
.plan__nota{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tenue);margin:9px 0 26px;
}
.plan ul{list-style:none;margin:0 0 22px;padding:0;font-size:15.5px}
.plan li{position:relative;padding-left:21px;margin-bottom:10px;color:var(--apagado)}
.plan li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;
  background:var(--tenue);transform:rotate(45deg)}
.plan--destacado li::before{background:var(--ambar)}
.plan__extra{font-size:14px;color:var(--tenue);margin:0;padding-top:18px;
  border-top:1px solid var(--borde-suave)}
.pastilla{
  display:inline-block;background:var(--ambar);color:#1A1206;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  padding:3px 8px;border-radius:2px;margin-left:6px;vertical-align:middle;
}

/* ---------- contacto ---------- */
.contacto{border-bottom:0;padding:110px 0 100px}
.contacto__caja{text-align:center;max-width:720px}
.contacto__caja .etiqueta{justify-content:center}
.contacto__caja .entradilla{margin:0 auto 36px}
.contacto__caja .acciones{justify-content:center}
.contacto__pie{font-family:var(--mono);font-size:13px;color:var(--tenue);margin:28px 0 0}
.contacto__pie a{color:var(--ambar);text-decoration:none;border-bottom:1px solid var(--ambar-borde)}

/* ---------- pie ---------- */
.pie{background:var(--grafito);border-top:1px solid var(--borde);padding:36px 0}
.pie__fila{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:space-between}
.pie__marca{display:flex;align-items:center;gap:10px;color:var(--texto);font-weight:600;font-size:15px}
.pie__marca .logo__marca{width:22px;height:22px}
.pie__legal{margin:0;font-size:14px;color:var(--tenue)}
.pie__arriba{font-family:var(--mono);font-size:12px;color:var(--apagado);
  text-decoration:none;letter-spacing:.06em}
.pie__arriba:hover{color:var(--ambar)}

/* ============================================================
   Revelados: sólo se ocultan si el JS ha arrancado (.js en <html>).
   Sin JS, o con movimiento reducido, todo se ve desde el principio.
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(18px)}
.js .reveal.is-visible{opacity:1;transform:none;transition:opacity .6s ease, transform .6s ease}

@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1;transform:none}
  .boton:hover{transform:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}