/* ===========================================================================
   Material, no CSS plano.
   Tipografía del sistema (SF Pro en Apple), superficies de vidrio con borde
   especular de un píxel, grano fino sobre todo y luz ambiental que se mueve
   despacio. Dos caras, oscura por defecto, con botón para cambiarla: todo
   color se declara en variables y explícito, así que la página no hereda
   nada del anfitrión y la cara clara es un cambio de tokens, no otro CSS.
   Paleta ámbar y coral sobre grafito cálido: deliberadamente lejos del azul iOS
   que llevan las seis apps, para que la persona no se confunda con su obra.
   Contrastes medidos: texto 17.8:1, apagado 9.5:1, tenue 5.9:1, acento 12.1:1,
   y el botón ámbar con tinta oscura da 10.7:1.
   =========================================================================== */
:root{
  --fondo:#0e0c0a;
  --vidrio:rgba(27,23,20,.66);
  --vidrio-solido:#1b1714;
  --vidrio-2:rgba(34,29,25,.72);
  --tinta:#f7f4f0;
  --tinta-2:#bdb4aa;
  --tinta-3:#958c83;
  --linea:rgba(255,255,255,.09);
  --ambar:#ffb020;
  --coral:#ff6b5a;
  --rosa:#ff5e93;
  --acento-texto:#ffc152;
  --acento-cian:#ffc152;
  --acento-violeta:#ff8f7e;
  --boton-tinta:#140f08;
  /* Superficies: el mismo blanco a distintas alturas. Están como variables
     porque en modo claro hay que invertirlas a negro translúcido — si se
     quedan escritas a mano en 20 reglas, el tema claro es imposible. */
  --sup-0:rgba(255,255,255,.055);
  --sup-1:rgba(255,255,255,.07);
  --sup-2:rgba(255,255,255,.12);
  --sup-borde:rgba(255,255,255,.16);
  --borde-especular:linear-gradient(145deg,rgba(255,255,255,.26),rgba(255,255,255,.05) 38%,
              rgba(255,176,32,.2) 72%,rgba(255,255,255,.06));
  --grad-texto:linear-gradient(96deg,var(--ambar),#ff9440 42%,var(--coral) 74%,var(--rosa));
  --sombra:0 26px 60px -34px rgba(0,0,0,.95);
  --reflejo:rgba(255,190,120,.13);
  --ambiente-op:.5;
  --grano-op:.16;
  --grano-mezcla:overlay;
  --r-lg:28px;
  --r-md:20px;
  color-scheme:dark;
}

/* --- Cara clara -----------------------------------------------------------
   Mismo material, otra luz: el vidrio pasa de negro translúcido a blanco
   translúcido, el grano de `overlay` a `multiply` (en claro, `overlay` lo
   convierte en purpurina) y los acentos ámbar bajan a ámbar quemado, porque
   el #ffc152 sobre papel da 1.4:1 y no se lee. Medidos contra #f6f2ec:
   texto 15.8:1, apagado 7.0:1, tenue 5.2:1, acento 5.7:1.
   Va dos veces a propósito: la consulta de medios cubre a quien no tiene
   JavaScript, y el atributo cubre la elección explícita del visitante.
   ------------------------------------------------------------------------- */
@media (prefers-color-scheme: light){
  :root:not([data-tema="oscuro"]){
  --fondo:#f6f2ec;
  --vidrio:rgba(255,255,255,.72);
  --vidrio-solido:#fffdfa;
  --vidrio-2:rgba(255,255,255,.82);
  --tinta:#18120c;
  --tinta-2:#5a5048;
  --tinta-3:#6f6459;
  --linea:rgba(20,12,4,.11);
  --acento-texto:#8f4f00;
  --acento-cian:#8f4f00;
  --acento-violeta:#9e3515;
  --sup-0:rgba(20,12,4,.045);
  --sup-1:rgba(20,12,4,.055);
  --sup-2:rgba(20,12,4,.1);
  --sup-borde:rgba(20,12,4,.14);
  --borde-especular:linear-gradient(145deg,rgba(255,255,255,.96),rgba(20,12,4,.1) 38%,
              rgba(163,90,0,.16) 72%,rgba(20,12,4,.05));
  --grad-texto:linear-gradient(96deg,#b06100,#bc5a14 42%,#c23a28 74%,#bf1f55);
  --sombra:0 20px 48px -30px rgba(70,44,14,.35);
  --reflejo:rgba(255,150,40,.12);
  --ambiente-op:.3;
  --grano-op:.05;
  --grano-mezcla:multiply;
  color-scheme:light;
  }
}
:root[data-tema="claro"]{
  --fondo:#f6f2ec;
  --vidrio:rgba(255,255,255,.72);
  --vidrio-solido:#fffdfa;
  --vidrio-2:rgba(255,255,255,.82);
  --tinta:#18120c;
  --tinta-2:#5a5048;
  --tinta-3:#6f6459;
  --linea:rgba(20,12,4,.11);
  --acento-texto:#8f4f00;
  --acento-cian:#8f4f00;
  --acento-violeta:#9e3515;
  --sup-0:rgba(20,12,4,.045);
  --sup-1:rgba(20,12,4,.055);
  --sup-2:rgba(20,12,4,.1);
  --sup-borde:rgba(20,12,4,.14);
  --borde-especular:linear-gradient(145deg,rgba(255,255,255,.96),rgba(20,12,4,.1) 38%,
              rgba(163,90,0,.16) 72%,rgba(20,12,4,.05));
  --grad-texto:linear-gradient(96deg,#b06100,#bc5a14 42%,#c23a28 74%,#bf1f55);
  --sombra:0 20px 48px -30px rgba(70,44,14,.35);
  --reflejo:rgba(255,150,40,.12);
  --ambiente-op:.3;
  --grano-op:.05;
  --grano-mezcla:multiply;
  color-scheme:light;
}

/* --- Botón de día y noche -------------------------------------------------- */
.tema{
  width:40px;height:40px;min-height:40px;padding:0;flex:none;margin-left:2px;
  border:0;border-radius:999px;cursor:pointer;background:var(--sup-1);color:var(--tinta-2);
  display:grid;place-items:center;position:relative;z-index:2;
  box-shadow:inset 0 0 0 1px var(--linea);
  transition:color .2s ease,background .2s ease,transform .3s cubic-bezier(.2,.8,.2,1);
}
.tema:hover{color:var(--tinta);background:var(--sup-2)}
.tema:active{transform:scale(.93)}
.tema svg{width:19px;height:19px;display:block}
/* Solo se pinta el icono que toca: el sol en la cara oscura (porque es lo que
   vas a obtener al pulsarlo) y la luna en la clara. */
.tema .luna{display:none}
.tema .sol{display:block}
@media (prefers-color-scheme: light){
  :root:not([data-tema="oscuro"]) .tema .luna{display:block}
  :root:not([data-tema="oscuro"]) .tema .sol{display:none}
}
:root[data-tema="claro"] .tema .luna{display:block}
:root[data-tema="claro"] .tema .sol{display:none}
:root[data-tema="oscuro"] .tema .luna{display:none}
:root[data-tema="oscuro"] .tema .sol{display:block}

/* --- Tarjetas de servicio que se abren ------------------------------------ */
/* El pliegue lo activa el guion (`js-plegable`). Sin JavaScript el detalle
   queda abierto y la página se lee entera: nunca se esconde contenido
   detrás de un botón que no funciona. */
.svc{cursor:default}
.js-plegable .svc{cursor:pointer}
.svc-mas{
  margin-top:4px;align-self:flex-start;display:inline-flex;align-items:center;gap:9px;
  font:inherit;font-size:13.5px;font-weight:650;letter-spacing:-.01em;cursor:pointer;
  padding:11px 16px;min-height:44px;border:0;border-radius:999px;
  background:var(--sup-1);color:var(--acento-texto);
  box-shadow:inset 0 0 0 1px var(--linea);
  transition:background .2s ease;
}
.svc-mas:hover{background:var(--sup-2)}
.svc-mas svg{width:15px;height:15px;flex:none;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.svc.abierto .svc-mas svg{transform:rotate(180deg)}
.svc-mas .cerrar{display:none}
.svc.abierto .svc-mas .abrir{display:none}
.svc.abierto .svc-mas .cerrar{display:inline}
/* `grid-template-rows` de 0fr a 1fr es la única forma de animar una altura
   desconocida sin medirla a mano en JavaScript. */
.svc-det{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1),opacity .3s ease}
.js-plegable .svc-det{grid-template-rows:0fr;opacity:0}
.js-plegable .svc.abierto .svc-det{grid-template-rows:1fr;opacity:1}
.svc-det-in{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:20px}
.svc.abierto .svc-det-in{padding-top:6px}
.svc-det h5{
  margin:0 0 9px;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--acento-cian);
}
.svc-det ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.svc-det li{font-size:13.5px;line-height:1.55;color:var(--tinta-2);padding-left:18px;position:relative}
.svc-det li::before{
  content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:2px;
  background:linear-gradient(140deg,var(--ambar),var(--coral));opacity:.85;
}
.svc-det .bloque + .bloque{padding-top:18px;border-top:1px solid var(--linea)}
*{box-sizing:border-box}

:root{background:var(--fondo)}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px;
  /* `clip` y no `hidden`: los dos cortan lo que se sale, pero `hidden` convierte
     el elemento en un contenedor de scroll y eso rompe el `position:sticky` de
     la barra de arriba. `clip` corta sin crear scroll. */
  overflow-x:clip}
body{
  margin:0;background:var(--fondo);color:var(--tinta);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',Roboto,system-ui,sans-serif;
  font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;font-synthesis:none;
  overflow-x:hidden;
}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--acento-cian);outline-offset:3px;border-radius:8px}

/* --- Luz ambiental: tres focos que derivan muy despacio ------------------- */
.ambiente{position:fixed;inset:-20vmax;z-index:-2;pointer-events:none;overflow:hidden}
.ambiente i{
  position:absolute;display:block;border-radius:50%;
  filter:blur(90px);opacity:var(--ambiente-op);will-change:transform;
}
.ambiente i:nth-child(1){
  width:70vmax;height:70vmax;top:-18%;right:-12%;
  background:radial-gradient(circle,rgba(255,176,32,.42),transparent 62%);
  animation:deriva-a 34s ease-in-out infinite;
}
.ambiente i:nth-child(2){
  width:62vmax;height:62vmax;bottom:-22%;left:-16%;
  background:radial-gradient(circle,rgba(255,107,90,.38),transparent 64%);
  animation:deriva-b 44s ease-in-out infinite;
}
.ambiente i:nth-child(3){
  width:48vmax;height:48vmax;top:38%;right:-20%;
  background:radial-gradient(circle,rgba(255,94,147,.24),transparent 66%);
  animation:deriva-c 56s ease-in-out infinite;
}
@keyframes deriva-a{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-7%,9%,0) scale(1.12)}}
@keyframes deriva-b{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(10%,-8%,0) scale(1.1)}}
@keyframes deriva-c{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-12%,-6%,0) scale(.92)}}

/* --- Grano: lo que separa una superficie de un relleno de color ---------- */
.grano{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:var(--grano-op);
  mix-blend-mode:var(--grano-mezcla);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* --- Vidrio con borde especular ------------------------------------------ */
/* El borde no es un `border` plano: es un degradado de 1px enmascarado, más
   claro arriba a la izquierda, como si la luz cayera de ahí. Es el detalle
   que hace que una tarjeta parezca una superficie y no un rectángulo. */
.vidrio{position:relative;background:var(--vidrio);border-radius:var(--r-lg);
  backdrop-filter:blur(26px) saturate(170%);-webkit-backdrop-filter:blur(26px) saturate(170%);
  box-shadow:var(--sombra);isolation:isolate}
.vidrio::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--borde-especular);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;pointer-events:none;z-index:1;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .vidrio{background:var(--vidrio-solido)}
}

.wrap{max-width:1080px;margin:0 auto;padding-inline:20px}

/* --- Tipografía ----------------------------------------------------------- */
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.05em}
h1{font-size:clamp(42px,7.6vw,80px);line-height:.98;letter-spacing:-.062em}
h2{font-size:clamp(30px,4.6vw,50px);line-height:1.04;letter-spacing:-.055em}
h3{font-size:27px;line-height:1.12;letter-spacing:-.045em;font-weight:700}
h4{margin:0;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--acento-cian)}
.grad{
  background:var(--grad-texto);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
}
.rotulo{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acento-cian);
}
.punto{
  width:7px;height:7px;border-radius:50%;background:var(--ambar);flex:none;
  box-shadow:0 0 0 0 rgba(255,176,32,.55);animation:latido 2.6s ease-out infinite;
}
@keyframes latido{
  0%{box-shadow:0 0 0 0 rgba(255,176,32,.5)}
  70%{box-shadow:0 0 0 9px rgba(255,176,32,0)}
  100%{box-shadow:0 0 0 0 rgba(255,176,32,0)}
}

/* --- Barra ---------------------------------------------------------------- */
.barra{
  position:sticky;top:12px;z-index:50;max-width:1080px;margin:12px auto 0;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 12px 11px 18px;border-radius:999px;
}
.marca{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15.5px;
  letter-spacing:-.035em;text-decoration:none;position:relative;z-index:2}
.marca svg{width:27px;height:27px;flex:none}
.barra nav{display:flex;align-items:center;gap:2px;position:relative;z-index:2}
.barra nav a{
  text-decoration:none;font-size:13.5px;font-weight:590;color:var(--tinta-2);
  padding:10px 13px;border-radius:999px;min-height:40px;display:inline-flex;align-items:center;
  transition:color .2s ease,background .2s ease;
}
.barra nav a:hover{color:var(--tinta);background:var(--sup-1)}
/* `.barra nav a` (0,2,1) pisaba el color de `.btn` (0,1,0): el botón ámbar
   salía con la tinta gris del menú, 1.18:1. Se devuelve su tinta propia. */
.barra nav a.btn{color:var(--boton-tinta)}
.barra nav a.btn:hover{background:linear-gradient(142deg,#ffc152,#ff9d12)}

/* --- Botones -------------------------------------------------------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:14px 26px;border-radius:999px;border:0;cursor:pointer;
  font:inherit;font-size:14.5px;font-weight:650;letter-spacing:-.01em;text-decoration:none;
  color:var(--boton-tinta);background:linear-gradient(142deg,#ffc152,#ff9d12);
  box-shadow:0 14px 30px -14px rgba(255,150,20,.55),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,filter .2s ease;
  overflow:hidden;
}
.btn:hover{filter:brightness(1.1);box-shadow:0 18px 38px -14px rgba(255,150,20,.65),inset 0 1px 0 rgba(255,255,255,.5)}
.btn:active{transform:scale(.975)}
.btn.suave{
  background:var(--sup-1);color:var(--tinta);
  box-shadow:inset 0 0 0 1px var(--sup-borde),inset 0 1px 0 var(--sup-2);
}
.btn.suave:hover{background:var(--sup-2);filter:none}
.enlace{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;
  font-size:14.5px;font-weight:650;color:var(--acento-texto);
}
.enlace span{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.enlace:hover span{transform:translateX(4px)}

/* --- Portada -------------------------------------------------------------- */
.hero{padding-block:78px 0}
.hero h1{margin-top:22px;max-width:15ch;text-wrap:balance}
.hero .lead{margin-top:26px;max-width:55ch;font-size:18px;line-height:1.68;color:var(--tinta-2)}
.hero .acts{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:36px;align-items:center}

/* --- Aparición al bajar --------------------------------------------------- */
/* Mismos valores que Celaje: 23px de recorrido, 0.7s de opacidad y 0.8s de
   desplazamiento con la curva de muelle. La clase `motion-ready` la pone el
   guion, así que sin JavaScript —o con el movimiento reducido— nada se oculta
   y la página se lee entera igual. */
.motion-ready [data-reveal]{
  opacity:0;transform:translateY(23px);
  transition:opacity .7s ease var(--delay,0ms),
             transform .8s cubic-bezier(.2,.7,.2,1) var(--delay,0ms);
}
.motion-ready [data-reveal].is-visible{opacity:1;transform:none}
/* Lo que ya se ve al cargar aparece sin transición: si no, la primera pantalla
   parpadea en blanco mientras el observador hace su primera pasada. */
.motion-ready [data-reveal].sin-transicion{transition:none}

.cifras{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  margin-top:60px;padding:6px;border-radius:var(--r-lg);
}
.cifras > div{padding:24px 26px;position:relative;z-index:2}
.cifras > div + div::before{
  content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;
  background:linear-gradient(180deg,transparent,var(--sup-borde),transparent);
}
.cifras b{display:block;font-size:42px;font-weight:700;letter-spacing:-.06em;line-height:1;
  font-variant-numeric:tabular-nums}
.cifras span{display:block;font-size:13px;color:var(--tinta-2);margin-top:9px;max-width:24ch}

/* --- Cabeceras de sección -------------------------------------------------- */
section{scroll-margin-top:104px}
.cabecera{padding-block:96px 34px;max-width:58ch}
.cabecera h2{margin-top:16px;text-wrap:balance}
.cabecera p{margin-top:18px;color:var(--tinta-2);font-size:17px}

/* --- Servicios ------------------------------------------------------------- */
.servicios{display:grid;grid-template-columns:repeat(auto-fit,minmax(278px,1fr));gap:16px}
.svc{padding:30px 26px;display:flex;flex-direction:column;gap:13px}
.svc > *{position:relative;z-index:2}
.svc-ico{
  width:46px;height:46px;border-radius:15px;display:grid;place-items:center;flex:none;
  background:linear-gradient(145deg,rgba(255,176,32,.22),rgba(255,107,90,.2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);color:var(--acento-cian);
}
.svc-ico svg{width:22px;height:22px;display:block}
.svc p{color:var(--tinta-2);font-size:14.5px;line-height:1.66}
.svc ul{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.svc li{font-size:13.5px;color:var(--tinta-2);padding-left:20px;position:relative}
.svc li::before{
  content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:3px;
  background:linear-gradient(140deg,var(--ambar),var(--coral));
}

/* --- Trabajos -------------------------------------------------------------- */
.trabajo{padding:32px;margin-bottom:16px;overflow:hidden}
.trabajo > *{position:relative;z-index:2}
/* Reflejo que sigue al puntero. Se queda quieto si no hay ratón. */
.trabajo .reflejo{
  position:absolute;inset:0;border-radius:inherit;z-index:1;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),
              var(--reflejo),transparent 62%);
  opacity:0;transition:opacity .35s ease;
}
.trabajo:hover .reflejo{opacity:1}
.trabajo-top{display:flex;flex-wrap:wrap;gap:16px 20px;align-items:flex-start;
  justify-content:space-between}
.trabajo-id{min-width:0;display:flex;flex-direction:column;gap:11px}
.trabajo-nombre{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.trabajo h3{font-size:32px}
.sector{
  font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--acento-violeta);background:rgba(255,107,90,.13);
  padding:6px 12px;border-radius:999px;white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(255,107,90,.24);
}
.estado{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-3)}
.trabajo-que{margin-top:20px;color:var(--tinta-2);font-size:16.5px;line-height:1.7;max-width:64ch}
.trabajo-que em{font-style:normal;font-weight:650;color:var(--acento-texto)}

.funciones{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:24px 36px;
  margin-top:28px;padding-top:26px;
  border-top:1px solid var(--linea);
}
.funciones > div{display:flex;flex-direction:column;gap:11px}
.funciones ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.funciones li{font-size:14px;line-height:1.52;color:var(--tinta-2);padding-left:19px;position:relative}
.funciones li::before{
  content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:2px;
  background:linear-gradient(140deg,var(--ambar),var(--coral));opacity:.9;
}
.hecho-con{margin-top:26px;padding-top:20px;border-top:1px solid var(--linea);
  display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hecho-con .rotulo{margin-right:6px;color:var(--tinta-3)}
.pieza{
  font-size:12px;font-weight:600;color:var(--tinta-2);letter-spacing:-.005em;
  padding:6px 12px;border-radius:999px;background:var(--sup-0);
  box-shadow:inset 0 0 0 1px var(--linea);
}

/* --- Otros ----------------------------------------------------------------- */
.otros{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:14px}
.otros > div{padding:24px;border-radius:var(--r-md)}
.otros > div > *{position:relative;z-index:2}
.otros h4{color:var(--tinta);font-size:16px;letter-spacing:-.03em;text-transform:none;
  font-weight:700;margin-bottom:9px}
.otros p{font-size:13.5px;color:var(--tinta-2);line-height:1.62}

/* --- Cómo trabajo ---------------------------------------------------------- */
.como{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 44px}
.como > div{display:flex;flex-direction:column;gap:11px}
.como h3{font-size:22px}
.como p{font-size:15px;color:var(--tinta-2);line-height:1.7;max-width:42ch}

/* --- Contacto -------------------------------------------------------------- */
.contacto{margin-top:88px;padding:56px 38px;text-align:center;overflow:hidden}
.contacto > *{position:relative;z-index:2}
.contacto h2{margin:16px auto 0;max-width:14ch;text-wrap:balance}
.contacto p{margin:20px auto 0;max-width:47ch;color:var(--tinta-2);font-size:17px}
.correo-fila{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin-top:32px}
#correo{
  font-size:15px;font-weight:600;user-select:all;-webkit-user-select:all;letter-spacing:-.01em;
  padding:14px 20px;border-radius:999px;background:var(--sup-0);
  box-shadow:inset 0 0 0 1px var(--sup-2);
  word-break:break-all;min-height:48px;display:inline-flex;align-items:center;
}
footer{
  margin-top:60px;padding-block:26px calc(44px + env(safe-area-inset-bottom));
  border-top:1px solid var(--linea);
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
  font-size:12.5px;color:var(--tinta-3);
}



/* --- Precio en las tarjetas de servicio ----------------------------------- */
.precio{
  display:inline-flex;align-items:baseline;gap:7px;align-self:flex-start;
  padding:7px 14px;border-radius:999px;
  background:rgba(255,176,32,.13);box-shadow:inset 0 0 0 1px rgba(255,176,32,.26);
}
.precio b{font-size:17px;font-weight:700;letter-spacing:-.03em;color:var(--acento-texto);
  font-variant-numeric:tabular-nums}
.precio span{font-size:11px;font-weight:600;color:var(--tinta-2);letter-spacing:.02em}
.pricing-aviso{
  margin-top:22px;font-size:14.5px;line-height:1.7;color:var(--tinta-2);max-width:62ch;
}
.pricing-aviso b{color:var(--tinta)}
.precio-nota{
  font-size:12.5px;color:var(--tinta-3);line-height:1.6;margin-top:2px;
  padding-top:13px;border-top:1px solid var(--linea);
}

/* --- A quién va dirigido --------------------------------------------------- */
/* Quien entra no sabe si esto va con él. La página hablaba de tecnología y no
   de negocios: estas cuatro palabras cierran ese hueco antes que un párrafo. */
.sectores{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.sector-chip{
  display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
  color:var(--tinta-2);padding:9px 15px;border-radius:999px;background:var(--sup-0);
  box-shadow:inset 0 0 0 1px var(--linea);
}
.sector-chip svg{width:15px;height:15px;color:var(--acento-cian);flex:none}

/* --- Caso con resultado ---------------------------------------------------- */
.caso{
  margin-top:26px;padding:24px;border-radius:var(--r-md);background:var(--sup-0);
  box-shadow:inset 0 0 0 1px var(--linea);
}
.caso h4{color:var(--acento-cian)}
.caso-dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:18px;margin-top:16px}
.caso-dos > div{display:flex;flex-direction:column;gap:7px}
.caso-dos b{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta-3)}
.caso-dos p{font-size:14.5px;line-height:1.6;color:var(--tinta-2)}
.caso-dos .despues b{color:var(--acento-texto)}
.caso-cifras{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--linea)}
.caso-cifras div{min-width:118px}
.caso-cifras strong{display:block;font-size:25px;font-weight:700;letter-spacing:-.04em;
  color:var(--acento-texto);line-height:1.1}
.caso-cifras span{display:block;font-size:12.5px;color:var(--tinta-3);margin-top:3px;max-width:22ch}
/* Dato que solo él sabe. Se marca a la vista para que no se publique un número
   inventado haciéndose pasar por real. */
.caso-cifras .pendiente strong{
  color:var(--tinta-3);font-size:16px;font-weight:600;letter-spacing:-.01em;
  padding:4px 10px;border-radius:8px;
  background:repeating-linear-gradient(135deg,rgba(255,176,32,.08) 0 8px,transparent 8px 16px);
  box-shadow:inset 0 0 0 1px var(--linea);
}

/* --- Webs de ejemplo -------------------------------------------------------- */
.demos{display:grid;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));gap:16px;margin-top:6px}
.demo{padding:26px;display:flex;flex-direction:column;gap:13px;text-decoration:none}
.demo > *{position:relative;z-index:2}
.demo-top{display:flex;align-items:center;gap:12px}
.demo-ico{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;
  font-size:20px;line-height:1;
  background:linear-gradient(145deg,rgba(255,176,32,.2),rgba(255,107,90,.18));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.demo h3{font-size:21px}
.demo .que{font-size:14.5px;line-height:1.62;color:var(--tinta-2)}
.demo .clave{
  font-size:13px;line-height:1.55;color:var(--acento-texto);font-weight:600;
  padding-top:13px;border-top:1px solid var(--linea);
}
.demo .abrir{
  margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:650;color:var(--tinta);
}
.demo .abrir span{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.demo:hover .abrir span{transform:translateX(4px)}
.demo{padding:13px 13px 23px;overflow:hidden;gap:13px}
.demo-preview{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:calc(var(--r-md) - 5px);background:var(--sup-1);box-shadow:inset 0 0 0 1px var(--linea)}
.demo-preview::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(4,6,12,.58));pointer-events:none}
.demo-preview img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .85s cubic-bezier(.2,.8,.2,1)}
.demo:hover .demo-preview img{transform:scale(1.035)}
.demo-preview .demo-nuevo{position:absolute;z-index:2;left:11px;bottom:10px;padding:6px 9px;border-radius:999px;background:rgba(12,14,21,.64);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:10.5px;font-weight:750;letter-spacing:.05em;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.demo-top,.demo .que,.demo .clave,.demo .abrir{margin-inline:10px}
.demo-aviso-pie{
  margin-top:20px;font-size:13.5px;line-height:1.65;color:var(--tinta-3);max-width:66ch;
  display:flex;gap:10px;align-items:flex-start;
}
.demo-aviso-pie svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--acento-cian)}

/* --- Preguntas ------------------------------------------------------------- */
/* Las mismas del chat, pero escritas en la página: quien no quiere abrir un
   chat también las tiene, y Google no indexa lo que vive dentro del guion. */
.preguntas{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:6px}
.pregunta{padding:24px;border-radius:var(--r-md)}
.pregunta > *{position:relative;z-index:2}
.pregunta h3{font-size:17px;letter-spacing:-.03em}
.pregunta p{margin-top:10px;font-size:14.5px;line-height:1.65;color:var(--tinta-2)}
.pregunta p b{color:var(--tinta)}

/* --- Formulario de contacto ------------------------------------------------- */
/* «Copiar correo» son cuatro pasos: copiar, abrir el correo, pegar y redactar.
   Aquí se escribe una vez y sale con el asunto y el cuerpo ya montados. */
.form-contacto{margin:30px auto 0;max-width:520px;text-align:left;display:flex;
  flex-direction:column;gap:14px}
.form-contacto .fila{display:flex;flex-direction:column;gap:7px}
.form-contacto label{font-size:12.5px;font-weight:650;color:var(--tinta-2)}
.form-contacto input,.form-contacto textarea{
  font:inherit;font-size:16px;padding:14px 16px;min-height:50px;border-radius:14px;border:0;
  background:var(--sup-0);color:var(--tinta);box-shadow:inset 0 0 0 1px var(--linea);
}
.form-contacto textarea{min-height:112px;resize:vertical;line-height:1.6}
.form-contacto input::placeholder,.form-contacto textarea::placeholder{color:var(--tinta-3)}
.form-contacto .aviso{font-size:12.5px;font-weight:600;color:var(--coral)}
.form-contacto .btn{width:100%}
.form-otra-via{
  margin-top:18px;padding-top:18px;border-top:1px solid var(--linea);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;
}
.promesa{
  display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  font-size:13.5px;font-weight:600;color:var(--acento-texto);
}
.promesa svg{width:16px;height:16px;flex:none}
.enviado{
  margin-top:22px;padding:24px;border-radius:var(--r-md);text-align:left;
  background:var(--sup-0);box-shadow:inset 0 0 0 1px rgba(255,176,32,.3);
}
.enviado h3{font-size:19px;color:var(--acento-texto)}
.enviado p{margin-top:10px;font-size:14.5px;color:var(--tinta-2);line-height:1.65}

/* --- Vistazo: el carrusel tipo App Store ---------------------------------- */
/* Desplazamiento horizontal con anclaje, como la galería de una ficha de app:
   cada pantalla lleva su titular encima, porque una captura sin frase no
   explica nada. */
.vistazo{
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 20px 22px;margin-inline:-20px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  /* ESTA es la línea del fallo del móvil. Al arrastrar la tira y llegar al
     final, el navegador encadenaba el gesto a la página y se movía TODO de
     lado, dejando la web medio fuera de la pantalla. `contain` corta la cadena:
     la tira llega a su tope y ahí se queda. */
  overscroll-behavior-x:contain;
}

/* Flechas para ratón. En el móvil sobran — se arrastra con el dedo — pero en el
   ordenador no había ninguna forma de pasar: la barra de scroll está oculta y
   arrastrar con el ratón no mueve un contenedor con scroll. O sea que en
   escritorio solo se veían las dos primeras capturas y las demás no existían. */
.vistazo-flechas{display:none;gap:8px;margin-top:14px}
@media (hover:hover) and (pointer:fine){.vistazo-flechas{display:flex}}
.vistazo-flechas button{
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font-size:17px;line-height:1;
  border:1px solid var(--linea,rgba(255,255,255,.14));
  background:rgba(255,255,255,.05);color:inherit;
  transition:background .15s,opacity .15s;
}
.vistazo-flechas button:hover{background:rgba(255,255,255,.12)}
.vistazo-flechas button[disabled]{opacity:.3;cursor:default}
.vistazo::-webkit-scrollbar{display:none}
.vista{
  flex:0 0 auto;width:250px;margin:0;scroll-snap-align:center;
  display:flex;flex-direction:column;gap:14px;
}
.vista figcaption{display:flex;flex-direction:column;gap:5px;min-height:64px}
.vista figcaption strong{
  font-size:17.5px;font-weight:700;letter-spacing:-.032em;line-height:1.22;
}
.vista figcaption span{
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--acento-texto);
}
/* Marco de móvil: bisel oscuro, brillo especular arriba y pantalla recortada. */
.marco{
  position:relative;border-radius:30px;padding:7px;
  background:linear-gradient(160deg,#3b332c,#171310 46%,#2a241f);
  box-shadow:0 22px 44px -22px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.22);
}
.marco:after{
  content:"";position:absolute;left:50%;top:12px;transform:translateX(-50%);
  width:62px;height:5px;border-radius:99px;background:rgba(0,0,0,.5);z-index:3;
}
.pantalla{
  position:relative;aspect-ratio:9/19.5;border-radius:24px;overflow:hidden;
  background:var(--vidrio-solido);display:grid;place-items:center;
}
.pantalla img{width:100%;height:100%;object-fit:cover;display:block}
/* Hueco a la espera de la captura real. Se marca claramente para que no se
   publique por error pareciendo una pantalla de verdad. */
.pantalla[data-pendiente]:not(:has(img)):before{
  content:attr(data-pendiente);
  position:absolute;inset:0;display:grid;place-content:center;align-content:center;
  padding:22px;text-align:center;font-size:12.5px;line-height:1.5;font-weight:600;
  color:var(--tinta-3);
  background:
    repeating-linear-gradient(135deg,rgba(255,176,32,.05) 0 9px,transparent 9px 18px),
    linear-gradient(160deg,rgba(255,176,32,.09),rgba(255,107,90,.06));
  box-shadow:inset 0 0 0 1px var(--linea);
}
.vistazo-pie{
  font-size:12.5px;color:var(--tinta-3);margin-top:2px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}

/* --- Chat ----------------------------------------------------------------- */
.chat-abrir{
  position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:70;
  display:inline-flex;align-items:center;gap:10px;
  min-height:52px;padding:14px 20px;border-radius:999px;border:0;cursor:pointer;
  font:inherit;font-size:14.5px;font-weight:650;letter-spacing:-.01em;
  color:var(--boton-tinta);background:linear-gradient(142deg,#ffc152,#ff9d12);
  box-shadow:0 16px 34px -14px rgba(255,150,20,.7),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .2s cubic-bezier(.2,.8,.2,1);
}
.chat-abrir:active{transform:scale(.96)}
.chat-abrir svg{width:19px;height:19px;flex:none}
.chat-panel{
  position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:71;
  width:min(380px,calc(100vw - 32px));max-height:min(620px,calc(100dvh - 32px));
  display:none;flex-direction:column;border-radius:26px;overflow:hidden;
}
.chat-panel.abierto{display:flex}
.chat-panel > *{position:relative;z-index:2}
.chat-cab{
  display:flex;align-items:center;gap:12px;padding:16px 16px 14px 18px;
  border-bottom:1px solid var(--linea);
}
.chat-cab div{flex:1;min-width:0}
.chat-cab strong{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em}
.chat-cab small{display:block;font-size:11.5px;color:var(--tinta-3);margin-top:2px}
.chat-cerrar{
  width:34px;height:34px;min-height:34px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:var(--sup-1);color:var(--tinta);font-size:19px;line-height:1;
}
.chat-hilo{
  flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;
  overscroll-behavior:contain;
}
.msg{max-width:86%;padding:11px 15px;border-radius:19px;font-size:14.5px;line-height:1.55}
.msg.bot{align-self:flex-start;background:var(--sup-1);border-bottom-left-radius:7px}
.msg.yo{
  align-self:flex-end;background:linear-gradient(142deg,#ffc152,#ff9d12);
  color:var(--boton-tinta);font-weight:550;border-bottom-right-radius:7px;
}
.msg a{color:var(--acento-texto)}
.msg.bot.chat-typing::after{
  content:"";display:inline-block;width:2px;height:1.05em;margin-left:3px;
  vertical-align:-.14em;border-radius:2px;background:var(--acento);
  animation:chat-cursor .72s steps(1,end) infinite;
}
.msg.bot.chat-typed{animation:chat-respuesta .22s ease-out}
@keyframes chat-cursor{0%,48%{opacity:1}49%,100%{opacity:0}}
@keyframes chat-respuesta{from{transform:translateY(2px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .msg.bot.chat-typing::after{animation:none}
  .msg.bot.chat-typed{animation:none}
}
.msg .correo-chat{
  display:inline-flex;align-items:center;gap:8px;margin-top:9px;padding:8px 12px;
  border-radius:999px;background:var(--sup-1);font-size:13px;font-weight:600;
  border:0;color:var(--tinta);cursor:pointer;font-family:inherit;min-height:40px;
}
.chat-sug{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 12px}
.chat-sug button{
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  padding:9px 13px;min-height:38px;border-radius:999px;border:0;
  background:var(--sup-1);color:var(--tinta-2);
  box-shadow:inset 0 0 0 1px var(--linea);
}
.chat-sug button:hover{color:var(--tinta);background:rgba(255,176,32,.14)}
.chat-pie{display:flex;gap:9px;padding:12px 14px 14px;border-top:1px solid var(--linea)}
.chat-pie input{
  flex:1;min-width:0;font:inherit;font-size:16px;padding:12px 16px;min-height:46px;
  border-radius:999px;border:0;background:var(--sup-1);color:var(--tinta);
  box-shadow:inset 0 0 0 1px var(--linea);
}
.chat-pie input::placeholder{color:var(--tinta-3)}
.chat-pie button{
  width:46px;min-height:46px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(142deg,#ffc152,#ff9d12);color:var(--boton-tinta);
  display:grid;place-items:center;
}
.chat-pie button svg{width:19px;height:19px}
@media (max-width:620px){
  .chat-panel{right:12px;left:12px;width:auto;max-height:calc(100dvh - 100px)}
  .chat-abrir{right:12px}
  .vista{width:215px}
}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .ambiente i,.punto{animation:none}
  *{transition-duration:.01ms!important}
}
@media (max-width:760px){
  .como{grid-template-columns:minmax(0,1fr);gap:28px}
}
@media (max-width:620px){
  body{font-size:16px}
  .barra{top:8px;margin-top:8px;padding:9px 9px 9px 15px}
  .barra nav a{padding:10px 10px;font-size:13px}
  .hero{padding-block:52px 0}
  .trabajo{padding:24px 19px}
  .contacto{padding:40px 20px}
  .cabecera{padding-block:70px 26px}
  .cifras > div + div::before{display:none}
  .grano{opacity:calc(var(--grano-op) * .62)}
}
@media (max-width:420px){
  .barra nav a[data-sec]{display:none}
}

/* Menú completo en pantallas pequeñas: la barra nunca se desborda. */
.menu-toggle{display:none}
@media(max-width:760px){
  .barra{flex-wrap:wrap;top:calc(8px + env(safe-area-inset-top,0px));border-radius:24px}
  .marca{min-width:0}
  .menu-toggle{display:inline-flex;align-items:center;gap:8px;margin-left:auto;
    min-height:40px;padding:7px 13px;border:1px solid var(--borde,rgba(255,255,255,.18));
    border-radius:999px;background:var(--sup-1);color:var(--tinta);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
  .barra nav{display:none;flex:1 0 100%;width:100%;flex-direction:column;align-items:stretch;gap:3px;
    padding:8px 0 2px;max-height:calc(100dvh - 130px);overflow-y:auto}
  .barra.menu-open nav{display:flex}
  .barra nav a,.barra nav a[data-sec]{display:flex;width:100%;justify-content:flex-start;
    border-radius:12px;padding:10px 13px}
  .barra nav a.btn{justify-content:center}
  .barra nav .tema{align-self:flex-start;margin:4px 0 0 6px}
}

/* Móvil: página estable, scroll vertical y campos sin autozoom. */
@media(max-width:820px),(pointer:coarse){
 html,body{width:100%;max-width:100%;overflow-x:clip;overscroll-behavior-x:none;touch-action:pan-y}
 .page-landing main,.page-landing section,.page-landing .wrap{min-width:0}
 .page-landing input,.page-landing textarea,.page-landing select{font-size:16px}
}

/* Proyectos propios · 11/10/2026 */
.proyectos-ejemplo{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.project-state{margin-inline:10px;font-size:11.5px;line-height:1.5;color:var(--tinta-3)}.project-cover{isolation:isolate;min-width:0}.cover-wordmark{position:absolute;left:7%;top:17%;max-width:53%;font-size:clamp(28px,3.6vw,46px);font-weight:750;letter-spacing:-.05em;line-height:1.05;z-index:2}.cover-wordmark span{display:block;font-size:12px;letter-spacing:0;font-weight:500;line-height:1.6;margin-top:10px}.cover-wordmark em{font-style:normal;color:#315ac2}.cover-sunset{background:radial-gradient(ellipse at 72% 53%,#ffcf89 0%,#ec885f 14%,#763957 37%,#171321 72%);color:#fff0df}.cover-sunset .cover-wordmark{max-width:85%;top:24%;font-weight:500;letter-spacing:.02em}.cover-politica{background:#e8edf9;color:#171d28}.cover-celaje{background:radial-gradient(ellipse at 85% 55%,#183460,#141320 70%);color:#faf6ef}.project-cover img.project-phone{position:absolute;width:43%;height:126%;right:4%;top:10%;object-fit:cover;object-position:top;border:4px solid #ffffff45;border-radius:18px;transform:rotate(-7deg);box-shadow:0 12px 30px #0003}.page-landing .proyectos-ejemplo .demo:hover .project-cover img.project-phone{transform:rotate(-4deg) translateY(-3px)}.cover-politica img.project-phone{top:-13%}.cover-celaje .cover-wordmark{max-width:47%;top:22%}
.cover-panel{background:radial-gradient(ellipse at 80% 50%,#f2c791,#eadbc9 70%);color:#3b3026}.cover-panel .cover-wordmark{max-width:40%;top:24%}.panel-peek{position:absolute;right:5%;top:16%;width:48%;padding:13px;background:#fffaf4;border:1px solid #fff8;border-radius:16px;transform:rotate(-5deg);box-shadow:0 10px 25px #68432226;color:#483c32}.panel-peek strong{display:block;font-size:13px;font-weight:750;margin-bottom:10px}.peek-columns{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:7px}.peek-columns>div{padding:6px;background:#f1e9df;border-radius:7px}.peek-columns b{display:block;font-size:7px;margin-bottom:7px}.peek-columns i{display:block;padding:7px 5px;background:#fffaf4;border-radius:5px;font-size:7px;font-style:normal;line-height:1.5;margin-bottom:5px}.portfolio-offer{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:25px 27px;margin-top:20px;border-radius:var(--r-md);background:var(--sup-1);border:1px solid var(--linea)}.portfolio-offer h3{font-size:20px;margin-bottom:7px}.portfolio-offer p{font-size:13.5px;line-height:1.7;color:var(--tinta-2);max-width:590px}.portfolio-offer .btn{flex-shrink:0}
@media(max-width:650px){.proyectos-ejemplo{grid-template-columns:1fr}.cover-wordmark{font-size:36px}.project-state{font-size:12px}.portfolio-offer{align-items:flex-start;flex-direction:column;padding:23px}.panel-peek{padding:11px}.cover-panel .cover-wordmark span{font-size:11px}}