/* ===== Switzer, auto-alojada (antes: Fontshare por CSS externo bloqueante) ===== */
@font-face{font-family:'Switzer';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/switzer-300.woff2') format('woff2')}
@font-face{font-family:'Switzer';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/switzer-400.woff2') format('woff2')}
@font-face{font-family:'Switzer';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/switzer-500.woff2') format('woff2')}
@font-face{font-family:'Switzer';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/switzer-600.woff2') format('woff2')}
@font-face{font-family:'Switzer';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/switzer-700.woff2') format('woff2')}
@font-face{font-family:'Switzer';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/switzer-800.woff2') format('woff2')}
/* ==========================================================================
   FLAMA — estilos compartidos por todas las páginas
   ========================================================================== */
:root{
  --c-coral:206,85,53;   /* #CE5535 · muestreado del vídeo del hero */
  --c-azul:125,159,228;  /* #7D9FE4 · muestreado del vídeo */
  --c-verde:136,168,83;  /* #88A853 · muestreado del vídeo */
  --c-mostaza:201,150,46;/* #C9962E */
  --c-gris:138,130,121;  /* #8A8279 · gris cálido, no frío */
  --paper:#F9F7F5;      /* muestreado del propio vídeo ya recomprimido, para que
                           el hero y el resto de la web no hagan costura */
  --ink:#1B1815;
  --gray:#5F5A54;
  --orange:#F4500A;
  --orange-dark:#D94508;

  /* Material cristal */
  --glass:rgba(255,255,255,.42);
  --glass-strong:rgba(255,255,255,.6);
  --glass-input:rgba(255,255,255,.5);
  --glass-border:rgba(255,255,255,.7);
  --glass-dark:rgba(28,24,20,.6);
  --glass-dark-border:rgba(255,255,255,.16);
  --blur:blur(24px) saturate(1.7);
  --sheen:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(255,255,255,.15);
  --sheen-dark:inset 0 1px 0 rgba(255,255,255,.22);
  --shadow-s:0 8px 24px -12px rgba(27,24,21,.18);
  --shadow-m:0 4px 8px rgba(27,24,21,.04),0 24px 48px -20px rgba(27,24,21,.25);

  --ease:cubic-bezier(.25,.8,.25,1);
  --ease-back:cubic-bezier(.2,1.5,.4,1);
  --r:22px;
  /* YourCreative usa UNA sola grotesca (Greed) para texto y titulares, con el
     peso marcando la jerarquía. Greed es de pago, así que usamos Switzer, que
     comparte lo esencial: altura de x grande, proporción ancha y escala 400-800.
     --serif se mantiene como nombre para no tocar 8 reglas, pero ya no es serif. */
  --font:'Switzer',system-ui,sans-serif;
  --serif:'Switzer',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;scroll-padding-top:100px;overflow-x:clip}
body{
  background:var(--paper);color:var(--ink);font-family:var(--font);
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip;
}
::selection{background:var(--orange);color:#fff}
img{max-width:100%;display:block}
a{color:inherit}

/* ===== FONDO ===== */
.bg{position:fixed;inset:0;z-index:-2;background:var(--paper);overflow:hidden}
/* Veladura ambiental con la paleta del footer: manchas enormes y muy diluidas
   que tiñen el crema apenas unos puntos de RGB. Van en la capa FIJA, así que
   el tono cambia despacio según bajas, sin pertenecer a ninguna sección. */
.bg i{position:absolute;display:block;border-radius:50%;filter:blur(110px)}
.bg i:nth-child(1){width:52vw;height:52vw;left:-14vw;top:-12vw;background:rgba(var(--c-azul),.16)}
.bg i:nth-child(2){width:40vw;height:40vw;right:-10vw;top:22vh;background:rgba(var(--c-mostaza),.14)}
.bg i:nth-child(3){width:46vw;height:46vw;left:4vw;bottom:-16vw;background:rgba(var(--c-verde),.13)}
.bg i:nth-child(4){width:36vw;height:36vw;right:2vw;bottom:4vh;background:rgba(var(--c-coral),.13)}
.wrap{max-width:1340px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
section{padding:clamp(4.5rem,8vw,7.5rem) 0}
h1, h2, h3{font-weight:800;letter-spacing:-.015em;line-height:1.1}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.serif{font-family:var(--serif);font-style:normal;font-weight:800;color:var(--ink);letter-spacing:-.015em}
.kicker{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  margin-bottom:1.1rem;
}
.kicker::before{content:"";width:22px;height:1.5px;background:var(--orange)}
.sub{color:var(--gray);max-width:56ch;font-size:clamp(1rem,1.3vw,1.13rem)}
.sec-head{max-width:720px;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head .sub{margin-top:1rem}

/* ===== Material cristal (claro) ===== */
.scard, .faq-item, .form-card, .band__glass, .fcard, .rating-big{
  background:var(--glass);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-border);
  box-shadow:var(--sheen),var(--shadow-s);
}

/* ===== Reveal ===== */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;cursor:pointer;
  font-family:var(--font);font-weight:600;font-size:15.5px;border:none;
  border-radius:999px;padding:.85rem 1.6rem;position:relative;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s,transform .35s var(--ease),box-shadow .35s var(--ease);
}
.btn .arr{display:inline-block;transition:transform .35s var(--ease);font-weight:500}
.btn:hover .arr{transform:translate(3px,-3px)}
.btn:active{transform:scale(.96)}
.btn--ink{
  background:rgba(27,24,21,.82);color:#fff;
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.14);box-shadow:var(--sheen-dark),var(--shadow-s);
}
.btn--ink:hover{background:rgba(27,24,21,.95)}
.btn--orange{
  background:linear-gradient(180deg,#FF6A24,var(--orange) 55%);color:#fff;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 30px -12px rgba(244,80,10,.6);
}
.btn--orange:hover{background:linear-gradient(180deg,#FF7A3A,var(--orange-dark) 60%)}
.btn--ghost{
  background:var(--glass);color:var(--ink);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-border);box-shadow:var(--sheen);
}
.btn--ghost:hover{background:var(--glass-strong)}
.link-more{
  display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
  font-weight:600;font-size:14.5px;color:var(--ink);
}
.link-more .arr{color:var(--ink);transition:transform .35s var(--ease)}
.link-more:hover .arr{transform:translate(3px,-3px)}
.hero__ctas{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.stars{color:var(--ink);letter-spacing:2px;font-size:14px}

/* ===== NAV (barra flotante de cristal) ===== */
.nav{position:fixed;top:14px;left:0;right:0;z-index:100;pointer-events:none}
.nav__in{
  max-width:1340px;margin:0 auto;pointer-events:auto;
  height:64px;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:0 .6rem 0 1.4rem;border-radius:999px;
  background:var(--glass-dark);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-dark-border);
  box-shadow:var(--sheen-dark),var(--shadow-s);
  transition:background .4s,box-shadow .4s;
}
@media (min-width:1260px){.nav__in{margin:0 auto}}
.nav{padding:0 clamp(.75rem,2vw,1.5rem)}
.nav.scrolled .nav__in{background:rgba(20,18,16,.78);box-shadow:var(--sheen-dark),var(--shadow-m)}
.nav__logo{display:flex;align-items:center;gap:.5rem;text-decoration:none}
.nav__logo img{height:22px}
.nav__links{display:flex;gap:.15rem;align-items:center}
.nav__links a,.nav__links .nav__drop{
  text-decoration:none;font-size:15px;font-weight:500;color:#fff;
  padding:.5rem .85rem;border-radius:999px;
  transition:color .3s,background .3s;
}
.nav__links a:hover,.nav__links .nav__drop:hover{color:#fff;background:rgba(255,255,255,.16)}
.nav__cta{display:flex;align-items:center;gap:.9rem}
.nav__cta .tel{font-size:14.5px;font-weight:600;text-decoration:none;color:#fff;white-space:nowrap}
.nav__cta .tel:hover{color:rgba(255,255,255,.75)}
.nav__cta .btn{padding:.7rem 1.35rem}
.burger{display:none;background:none;border:none;cursor:pointer;padding:10px;flex-direction:column;gap:5px}
.burger span{width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .4s var(--ease)}
body.menu-open .burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

/* ===== HERO (índice vertical de clientes + mazo de miniaturas) ===== */
.hero{
  position:relative;height:100vh;height:100svh;width:100%;overflow:hidden;
  /* Sin fondo propio: deja ver la capa de veladura, que es contra lo que tiene
     que fundirse el borde inferior del vídeo. */
  background:transparent;
}

/* Fondo: vídeo decorativo a pantalla completa.
   El canto inferior se desvanece en lugar de cortarse: por debajo asoma el
   fondo teñido de la página, así el empalme coincide siempre, sea cual sea el
   color ambiental en ese punto. Antes el vídeo acababa en crema plano y, con
   la veladura, el corte cantaba. */
.hero__video, .hero__still{
  -webkit-mask-image:linear-gradient(180deg,#000 80%,rgba(0,0,0,.6) 91%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 80%,rgba(0,0,0,.6) 91%,transparent 100%);
}
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background:transparent;
}
.hero__video.off{display:none}
/* Sustituto estático para animaciones reducidas o ahorro de datos */
.hero__still{
  position:absolute;inset:0;display:none;
  background:url("../assets/hero-still.webp") center/cover no-repeat;
}
.hero__still.on{display:block}

/* Bloque de texto centrado, como la referencia */
.hero__grid{
  position:relative;z-index:2;height:100%;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(6rem,12vh,8.5rem) clamp(1.25rem,4vw,3rem) clamp(3.5rem,8vh,6rem);
}
.hero__copy{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  max-width:min(950px,100%);
}
.hero__eyebrow{
  display:inline-flex;align-items:center;white-space:nowrap;
  font-size:clamp(8.5px,2.4vw,12px);font-weight:600;
  letter-spacing:clamp(.05em,.35vw,.16em);text-transform:uppercase;color:var(--ink);
  padding:clamp(.4rem,1.4vw,.55rem) clamp(.7rem,2.4vw,1.1rem);border-radius:999px;
  background:rgba(255,255,255,.5);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 18px -12px rgba(27,24,21,.4);
  opacity:0;transform:translateY(12px);animation:heroFadeUp .8s var(--ease) .1s forwards;
}
.hero__title{
  font-size:clamp(2.2rem,6.6vw,5.4rem);font-weight:800;line-height:1.02;letter-spacing:-.018em;
  margin:clamp(1rem,2.6vh,1.7rem) 0 0;
  opacity:0;transform:translateY(20px);animation:heroFadeUp .9s var(--ease) .2s forwards;
}
.hero__title i{font-style:normal;color:var(--ink)}
.hero__sub{
  margin-top:clamp(.9rem,2vh,1.3rem);max-width:52ch;
  font-size:clamp(.98rem,1.35vw,1.15rem);color:var(--gray);
  opacity:0;transform:translateY(14px);animation:heroFadeUp .85s var(--ease) .32s forwards;
}
.hero__ctas{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;justify-content:center;
  margin-top:clamp(1.4rem,3vh,2.2rem);
  opacity:0;transform:translateY(14px);animation:heroFadeUp .8s var(--ease) .44s forwards;
}
.hero__cta{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-size:13px;font-weight:600;color:#fff;
  border:1px solid transparent;border-radius:999px;padding:.72rem 1.35rem;
  background:linear-gradient(180deg,#FF6A24,var(--orange) 55%);
  box-shadow:0 10px 22px -10px rgba(244,80,10,.55);
  transition:background .3s,border-color .3s;
}
.hero__cta:hover{background:linear-gradient(180deg,#FF7A3A,var(--orange-dark) 60%)}
.hero__cta .arr{color:#fff;transition:transform .3s var(--ease)}
.hero__cta:hover .arr{transform:translate(3px,-3px)}
/* Sobre crema el botón fantasma va en tinta, no en blanco */
.hero__cta--ghost{
  color:var(--ink);background:rgba(255,255,255,.55);box-shadow:none;
  border-color:rgba(27,24,21,.18);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
}
.hero__cta--ghost .arr{color:var(--ink)}
.hero__cta--ghost:hover{background:rgba(255,255,255,.85);border-color:rgba(27,24,21,.3)}

/* Barra de proyectos abajo: el activo es un panel de cristal
   y su línea superior hace de barra de progreso */
@keyframes heroFadeUp{to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.hero__eyebrow, .hero__title, .hero__sub, .hero__ctas{opacity:1;transform:none;animation:none}
}

/* ===== MANIFIESTO (revelado por scroll) ===== */
.manif{padding:clamp(5.5rem,13vw,10rem) 0}
.manif .kicker{margin-bottom:clamp(1.8rem,4vw,2.6rem)}
/* Cada sección lleva su color en el guion del antetítulo */
.manif    .kicker::before{background:rgb(var(--c-coral))}
.services .kicker::before{background:rgb(var(--c-azul))}
.works    .kicker::before{background:rgb(var(--c-mostaza))}
.faq      .kicker::before{background:rgb(var(--c-verde))}
.contact  .kicker::before{background:rgb(var(--c-gris))}
.manif__text{
  /* Más fina y más ancha que un titular: aquí manda la lectura, no el impacto */
  font-size:clamp(1rem,2.35vw,1.875rem);  /* 30px en escritorio */
  font-weight:300;line-height:1.3;letter-spacing:-.008em;
  /* Proporción sobre la sección, no medida en caracteres.
     'balance' encogía el bloque para igualar líneas y no llegaba al 70%;
     'pretty' solo evita que la última línea quede huérfana. */
  /* Ancho necesario para que a 30px el párrafo entre en 3 líneas y
     "crezca de verdad" cierre la tercera. Por debajo de esto se va a 4. */
  max-width:88%;text-wrap:pretty;
}
.manif__text .w{
  /* Arranca casi borrado y se enciende al pasar. La transición va en cada
     palabra, así el barrido se ve suave aunque el scroll sea a saltos. */
  color:rgba(27,24,21,.17);
  transition:color .5s var(--ease);
}
.manif__text .w.on{color:var(--ink)}
/* El énfasis lo da el peso, no el color: el texto va todo en negro */
.manif__text strong{font-weight:600;white-space:nowrap}

/* Llama de la marca al final de la frase. Arranca apagada, del mismo gris que
   las palabras aún sin revelar, y prende cuando se enciende la última. */
.manif__flame{
  display:inline-block;margin-left:.28em;transform-origin:50% 85%;
  /* Apagada = el emoji en gris y translúcido, como una palabra sin revelar */
  filter:grayscale(1) opacity(.3);
  transition:filter .7s var(--ease),transform .7s var(--ease);
}
.manif__flame.lit{
  filter:drop-shadow(0 0 10px rgba(244,80,10,.45));
  animation:llamita 1.8s ease-in-out infinite;
}
@keyframes llamita{
  0%,100%{transform:scale(1.12) rotate(-3deg)}
  50%    {transform:scale(1.24) rotate(3deg)}
}
@media (prefers-reduced-motion:reduce){.manif__flame.lit{animation:none;transform:scale(1.15)}
}
@media (prefers-reduced-motion:reduce){.manif__text .w{color:var(--ink);transition:none}
}
@media (max-width:820px){.manif__text{max-width:none}}

/* ===== SERVICES ===== */
.services .sec-head{
  display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(2rem,5vw,4rem);
  align-items:start;max-width:none;
}
.services .sec-head .sub{margin-top:2.95rem;max-width:48ch}
@media (max-width:820px){.services .sec-head{grid-template-columns:1fr}}

/* Composición: dos tarjetas arriba y tres abajo. La rejilla es de SEIS columnas
   para que dentro de cada fila midan exactamente lo mismo: 3+3 arriba, 2+2+2
   abajo. Con tres columnas era imposible: 2+1 deja la fila de arriba desigual. */
.sgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.2rem;align-items:stretch}
.sgrid>.scard{grid-column:span 2}                  /* fila de abajo: tres iguales */
.sgrid>.scard:nth-child(-n+2){grid-column:span 3}  /* fila de arriba: dos iguales */
.scard{
  --c:var(--c-coral);
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:26px;text-decoration:none;
  min-height:340px;padding:1.7rem;
  display:flex;flex-direction:column;
  /* Tinte pastel muy bajo: el color se nota pero el texto negro manda */
  background:linear-gradient(158deg,rgba(var(--c),.19),rgba(var(--c),.07) 62%);
  border:1px solid rgba(var(--c),.14);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.scard:hover{transform:translateY(-6px);box-shadow:0 30px 54px -28px rgba(27,24,21,.32)}

/* Píldora de estado, arriba a la izquierda */
.scard__badge{
  align-self:flex-start;display:inline-flex;align-items:center;gap:.55rem;
  font-size:13px;font-weight:500;color:var(--ink);
  background:rgba(255,255,255,.8);border-radius:999px;padding:.5rem 1rem .5rem .7rem;
  box-shadow:0 1px 2px rgba(27,24,21,.05);
}
.scard__badge i{width:12px;height:12px;border-radius:50%;background:rgb(var(--c));flex:0 0 auto}

/* El cuerpo se separa de la píldora y empuja el enlace al fondo */
.scard__body{margin-top:auto;padding-top:2.4rem;max-width:30ch}
.scard h3{font-size:clamp(1.45rem,2.2vw,1.95rem);margin-bottom:.6rem;letter-spacing:-.02em}
.scard p{font-size:14.8px;color:var(--gray)}
.scard__tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.9rem}
.scard__tags span{
  font-size:12px;font-weight:500;color:var(--gray);
  background:rgba(255,255,255,.6);border-radius:999px;padding:.22rem .65rem;
}
/* Enlace subrayado con flecha, como la referencia */
.scard .link-more{
  margin-top:1.5rem;align-self:flex-start;
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:14.5px;font-weight:600;color:var(--ink);
  border-bottom:1.5px solid rgba(27,24,21,.3);padding-bottom:.35rem;
  transition:border-color .35s;
}
.scard:hover .link-more{border-color:var(--ink)}
.scard .link-more .arr{transition:transform .35s var(--ease)}
.scard:hover .link-more .arr{transform:translateX(4px)}

/* ===== Formas abstractas: degradado del color de la tarjeta, recortadas
   por el borde. Cada servicio tiene su motivo. ===== */
.scard__art{
  position:absolute;z-index:-1;pointer-events:none;
  /* Anclada ARRIBA a la derecha, no centrada: el texto vive abajo (margin-top:auto),
     así que dejándole el cuadrante superior no llegan a cruzarse nunca. */
  right:-4%;top:-8%;
  width:min(35%,178px);aspect-ratio:1;
}
/* Las dos de arriba son mucho más anchas: ahí la forma puede crecer sin
   acercarse al texto, que está acotado a 30ch por la izquierda. */
.sgrid>.scard:nth-child(-n+2) .scard__art{width:min(48%,268px);top:-11%}
/* Y el texto se estrecha en esas dos para dejarle sitio: si llega hasta la forma,
   al escalar la animación se la come. Además es la proporción de la referencia. */
.sgrid>.scard:nth-child(-n+2) .scard__body{max-width:26ch}
.scard__art i{
  position:absolute;display:block;
  background:linear-gradient(150deg,rgba(var(--c),.85),rgba(var(--c),.18));
}
/* Ventana de navegador: marco, barra de direcciones y dos columnas */
.scard--web .scard__art i{border-radius:7px}
.scard--web .scard__art i:nth-child(1){left:5%;top:19%;width:86%;height:74%;border-radius:15px;opacity:.24}
.scard--web .scard__art i:nth-child(2){left:12%;top:26%;width:72%;height:5%;border-radius:99px;opacity:.9}
.scard--web .scard__art i:nth-child(3){left:12%;top:37%;width:41%;height:48%;opacity:.6}
.scard--web .scard__art i:nth-child(4){left:59%;top:37%;width:24%;height:48%;opacity:.4}
/* Anillos concéntricos */
.scard--seo .scard__art i{border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
.scard--seo .scard__art i:nth-child(1){width:100%;height:100%;opacity:.42}
.scard--seo .scard__art i:nth-child(2){width:72%;height:72%;opacity:.6}
.scard--seo .scard__art i:nth-child(3){width:46%;height:46%;opacity:.8}
.scard--seo .scard__art i:nth-child(4){width:20%;height:20%}
/* Bloques escalonados */
.scard--ads .scard__art i{width:46%;height:46%;border-radius:8px}
.scard--ads .scard__art i:nth-child(1){left:0;top:0;opacity:.5}
.scard--ads .scard__art i:nth-child(2){right:0;top:14%}
.scard--ads .scard__art i:nth-child(3){left:14%;bottom:0;opacity:.75}
.scard--ads .scard__art i:nth-child(4){right:12%;bottom:-14%;opacity:.35}
/* Abanico de muestras de color: cuatro tintas de la misma marca */
.scard--marca .scard__art i{width:23%;height:68%;left:38.5%;top:22%;border-radius:9px}
.scard--marca .scard__art i:nth-child(1){opacity:.9;--a:-15deg}
.scard--marca .scard__art i:nth-child(2){opacity:.64;--a:-5deg}
.scard--marca .scard__art i:nth-child(3){opacity:.44;--a:5deg}
.scard--marca .scard__art i:nth-child(4){opacity:.28;--a:15deg}
/* Cuadrados redondeados en rejilla */
.scard--social .scard__art i{width:44%;height:50%;border-radius:16px}
.scard--social .scard__art i:nth-child(1){left:0;top:0;opacity:.45}
.scard--social .scard__art i:nth-child(2){right:0;top:0;opacity:.8}
.scard--social .scard__art i:nth-child(3){left:0;bottom:0;opacity:.7}
.scard--social .scard__art i:nth-child(4){right:0;bottom:0;opacity:.3;border-radius:50%}

/* ===== Animación de las formas =====
   Movimientos lentos y de recorrido corto: escalas hasta 1,08 y desplazamientos
   de pocos píxeles. Con giros completos las piezas se saldrían del cuadrante
   superior y volverían a pisar el texto, que es justo lo que acabamos de evitar. */
.scard__art i{animation:pulso 9s var(--ease) infinite;transform-origin:center}
.scard__art i:nth-child(2){animation-delay:-1.6s}
.scard__art i:nth-child(3){animation-delay:-3.2s}
.scard__art i:nth-child(4){animation-delay:-4.8s}
@keyframes pulso{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.07)}
}
/* Ventana: el marco y la barra quedan fijos; las dos columnas se recomponen,
   como una maqueta montándose sola. */
.scard--web .scard__art i{animation:none}
.scard--web .scard__art i:nth-child(3), .scard--web .scard__art i:nth-child(4){
  animation:maqueta 7.5s var(--ease) infinite;transform-origin:top center;
}
.scard--web .scard__art i:nth-child(4){animation-delay:-3.75s}
@keyframes maqueta{
  0%,100%{transform:scaleY(1)}
  50%    {transform:scaleY(.68)}
}
@keyframes petalo{
  0%,100%{transform:rotate(0deg) scale(1)}
  50%    {transform:rotate(7deg) scale(1.06)}
}
/* Anillos: laten desde dentro hacia fuera, en cascada */
.scard--seo .scard__art i{animation:anillo 6.5s var(--ease) infinite}
@keyframes anillo{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%    {transform:translate(-50%,-50%) scale(1.09)}
}
/* Bloques: flotan en vertical, desfasados */
.scard--ads .scard__art i{animation:flotar 8s var(--ease) infinite}
@keyframes flotar{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-9px)}
}
/* Abanico: las cuatro muestras giran a la vez sobre un pivote común,
   abriéndose y cerrándose. Sin desfase: desfasadas se cruzarían. */
.scard--marca .scard__art i{
  animation:abanico 9s var(--ease) infinite;
  animation-delay:0s;transform-origin:50% 96%;
}
@keyframes abanico{
  0%,100%{transform:rotate(var(--a))}
  50%    {transform:rotate(calc(var(--a) * 1.5))}
}
@keyframes derivar{
  0%,100%{transform:translate(0,0) scale(1)}
  50%    {transform:translate(-6px,5px) scale(1.05)}
}
/* Cuadrados: respiran y se inclinan levemente */
.scard--social .scard__art i{animation:respirar 9.5s var(--ease) infinite}
@keyframes respirar{
  0%,100%{transform:scale(1) rotate(0deg)}
  50%    {transform:scale(1.06) rotate(-4deg)}
}
@media (prefers-reduced-motion:reduce){.scard__art i, .scard--web .scard__art i:nth-child(3), .scard--web .scard__art i:nth-child(4), .scard--marca .scard__art i{animation:none}
}
.scard--seo{--c:var(--c-azul)}
.scard--ads{--c:var(--c-verde)}
.scard--marca{--c:var(--c-mostaza)}
.scard--social{--c:var(--c-gris)}
@media (max-width:980px){.sgrid{grid-template-columns:repeat(2,1fr)}
.sgrid>.scard, .sgrid>.scard:nth-child(-n+2){grid-column:span 1}
}
@media (max-width:640px){.sgrid{grid-template-columns:1fr}
.sgrid>.scard, .sgrid>.scard:nth-child(-n+2){grid-column:span 1}
.scard{min-height:300px}
.scard__art{width:62%;right:-18%}
}

/* ===== NUESTROS TRABAJOS ===== */
.works .wrap{position:relative}
.works .wrap>*{position:relative;z-index:1}
.works__head{
  display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,4rem);
  align-items:start;margin-bottom:clamp(3rem,7vw,6rem);
}
.works__head h2{
  font-size:clamp(2.6rem,7vw,5.6rem);line-height:.95;letter-spacing:-.035em;margin:0;
}
.works__intro{
  color:var(--gray);font-size:clamp(.98rem,1.25vw,1.12rem);
  max-width:56ch;justify-self:end;padding-top:.6rem;
}

@media (max-width:900px){.works__head{grid-template-columns:1fr}
.works__intro{justify-self:start}
}

/* ===== FAQ (lista agrupada estilo iOS) ===== */
.faq .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
.faq-list{display:flex;flex-direction:column;gap:.7rem}
.faq-item{border-radius:18px;overflow:hidden;transition:background .4s}
.faq-item.open{background:var(--glass-strong)}
.faq-item button{
  width:100%;background:none;border:none;cursor:pointer;text-align:left;
  font-family:var(--font);font-size:16.5px;font-weight:600;color:var(--ink);
  padding:1.15rem 1.3rem;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
}
.faq-item .pl{
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;position:relative;
  background:rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  transition:background .4s var(--ease),transform .5s var(--ease);
}
.faq-item .pl::before, .faq-item .pl::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--ink);transition:background .4s,opacity .3s;
}
.faq-item .pl::before{width:10px;height:1.5px;transform:translate(-50%,-50%)}
.faq-item .pl::after{width:1.5px;height:10px;transform:translate(-50%,-50%)}
.faq-item.open .pl{background:var(--orange);transform:rotate(90deg)}
.faq-item.open .pl::before{opacity:0}
.faq-item.open .pl::after{background:#fff}
.faq-item .body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.faq-item.open .body{grid-template-rows:1fr}
.faq-item .body>div{overflow:hidden}
.faq-item .body p{color:var(--gray);font-size:15px;padding:0 3rem 1.25rem 1.3rem}
@media (max-width:900px){.faq .wrap{grid-template-columns:1fr}}

/* Cierre de la rejilla de trabajos: un solo enlace, centrado y con aire */
.works__more{display:flex;justify-content:center;margin-top:clamp(2.4rem,4.5vw,3.6rem)}

/* ===== PROCESO SOBRE CURVA =====
   Los cinco pasos se apoyan en una curva ascendente. Cada paso se ancla por
   su esquina superior izquierda (--x,--y), que coincide con un punto exacto
   del trazado SVG; el svg va con preserveAspectRatio="none", así que esos
   porcentajes y las coordenadas del viewBox (0 0 1000 1000) son lo mismo. */
.curve{position:relative;height:clamp(620px,50vw,800px);margin-top:clamp(1rem,3vw,2.5rem)}
.curve__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.curve__svg path{
  fill:none;stroke:rgba(27,24,21,.55);stroke-width:2;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.sec--deep .curve__svg path, .sec--ink .curve__svg path{stroke:rgba(255,255,255,.5)}
.curve__i{position:absolute;left:var(--x);top:var(--y);width:17.5%;padding-top:4.1rem}
.curve__dot{
  position:absolute;left:0;top:0;width:19px;height:19px;border-radius:50%;
  background:rgb(var(--c));transform:translate(-50%,-50%);
  box-shadow:0 0 0 6px rgba(var(--c),.16);
}
.curve__n{
  position:absolute;left:1.15rem;top:.1rem;pointer-events:none;
  font-size:clamp(3.6rem,5.4vw,5.4rem);font-weight:800;line-height:.78;letter-spacing:-.03em;
  background:linear-gradient(180deg,rgba(var(--c),.62) 8%,rgba(var(--c),0) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.curve__t{
  position:relative;display:inline-flex;align-items:center;
  padding:.36rem .95rem;border-radius:999px;
  background:rgba(var(--c),.16);color:var(--ink);
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;
}
.sec--deep .curve__t, .sec--ink .curve__t{background:rgba(255,255,255,.18);color:#fff}
.curve__i p{margin-top:.85rem;color:var(--gray);font-size:14.2px;line-height:1.6}
.sec--deep .curve__i p, .sec--ink .curve__i p{color:rgba(255,255,255,.7)}

/* Sin espacio para la curva: la cifra pasa a ser el marcador de cada paso,
   en una columna izquierda fija, con el contenido a su derecha. */
@media (max-width:1180px){.curve{height:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:2.4rem 2rem}
.curve__svg{display:none}
.curve__dot{display:none}
.curve__i{
    position:relative;left:auto;top:auto;width:auto;padding-top:0;
    display:grid;grid-template-columns:3.3rem 1fr;column-gap:1.05rem;align-items:start;
  }
.curve__n{
    position:static;grid-column:1;grid-row:1/span 2;justify-self:end;
    font-size:3.2rem;line-height:.86;
    background:linear-gradient(180deg,rgba(var(--c),.7) 10%,rgba(var(--c),.12) 95%);
    -webkit-background-clip:text;background-clip:text;
  }
.curve__t{grid-column:2;grid-row:1;justify-self:start}
.curve__i p{grid-column:2;grid-row:2;margin-top:.55rem}
}
/* Una sola columna: separadores para marcar la secuencia */
@media (max-width:640px){.curve{grid-template-columns:1fr;gap:0}
.curve__i{padding:1.55rem 0}
.curve__i+.curve__i{border-top:1px solid rgba(27,24,21,.1)}
.sec--deep .curve__i+.curve__i, .sec--ink .curve__i+.curve__i{border-top-color:rgba(255,255,255,.16)}
}

/* ===== QUÉ INCLUYE: seis piezas con icono =====
   Rejilla hermana de .tipos pero más plana: sin motivo animado y con una
   pastilla de icono, para que dos rejillas seguidas no se confundan. */
.inc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.5vw,1.3rem)}
.inc__i{
  border-radius:22px;padding:clamp(1.35rem,2.1vw,1.8rem);
  background:rgba(var(--c),.1);border:1px solid rgba(var(--c),.16);
  transition:transform .5s var(--ease),background .5s var(--ease);
}
.inc__i:hover{transform:translateY(-4px)}
.sec--deep .inc__i, .sec--ink .inc__i{
  background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.2);
  backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
}
.sec--deep .inc__i:hover, .sec--ink .inc__i:hover{background:rgba(255,255,255,.16)}
.inc__ic{
  width:44px;height:44px;border-radius:14px;margin-bottom:clamp(1.4rem,2.6vw,2.1rem);
  display:flex;align-items:center;justify-content:center;
  background:rgb(var(--c));color:#fff;
}
.sec--deep .inc__ic, .sec--ink .inc__ic{background:rgba(255,255,255,.92);color:#16120E}
.inc__ic svg{
  width:21px;height:21px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.inc__i h3{font-size:1.05rem;letter-spacing:-.015em;margin-bottom:.5rem}
.inc__i p{color:var(--gray);font-size:14.2px;line-height:1.62}
.sec--deep .inc__i h3, .sec--ink .inc__i h3{color:#fff}
.sec--deep .inc__i p, .sec--ink .inc__i p{color:rgba(255,255,255,.74)}
/* El acento del titular no puede ir en tinta sobre fondo profundo */
.sec--deep h2 .serif, .sec--ink h2 .serif{color:rgba(255,255,255,.58)}
@media (max-width:1000px){.inc{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.inc{grid-template-columns:1fr}}

/* ===== Servicios en blanco y negro =====
   Misma composición y mismas piezas que la versión en color; lo único que
   cambia es la paleta. La primera tarjeta va en tinta: sin color, la
   composición necesita un ancla de contraste o las cinco pesan igual.
   Se activa con .sgrid--mono; quitando esa clase vuelve el color. */
.sgrid--mono .scard{
  --c:27,24,21;
  background:linear-gradient(158deg,rgba(255,255,255,.8),rgba(255,255,255,.4) 62%);
  border-color:rgba(27,24,21,.11);
}
.sgrid--mono .scard:hover{box-shadow:0 30px 54px -28px rgba(27,24,21,.28)}
.sgrid--mono .scard__art i{background:linear-gradient(150deg,rgba(27,24,21,.26),rgba(27,24,21,.05))}
.sgrid--mono .scard__badge{background:rgba(255,255,255,.9);border:1px solid rgba(27,24,21,.1)}
.sgrid--mono .scard__badge i{background:var(--ink)}
.sgrid--mono .scard__tags span{
  background:transparent;border:1px solid rgba(27,24,21,.16);color:var(--gray);
}

/* La destacada, en negativo */
.sgrid--mono .scard--web{
  background:#16120E;border-color:rgba(255,255,255,.12);
}
.sgrid--mono .scard--web h3{color:#fff}
.sgrid--mono .scard--web p{color:rgba(255,255,255,.7)}
.sgrid--mono .scard--web .link-more{color:#fff;border-bottom-color:rgba(255,255,255,.35)}
.sgrid--mono .scard--web:hover .link-more{border-bottom-color:#fff}
.sgrid--mono .scard--web .link-more .arr{color:#fff}
.sgrid--mono .scard--web .scard__badge{
  background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.2);color:#fff;box-shadow:none;
}
.sgrid--mono .scard--web .scard__badge i{background:#fff}
.sgrid--mono .scard--web .scard__tags span{
  border-color:rgba(255,255,255,.24);color:rgba(255,255,255,.78);
}
.sgrid--mono .scard--web .scard__art i{
  background:linear-gradient(150deg,rgba(255,255,255,.4),rgba(255,255,255,.07));
}

/* ===== Trabajos: ficha con el pie DEBAJO del medio =====
   Sustituye al mosaico de pies superpuestos. El medio queda limpio y el
   nombre, la descripción y lo que se hizo van fuera, sobre el papel. */
.pgrid2{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2.2rem,4vw,3.4rem) clamp(1.2rem,2.4vw,2rem);
}
.pcase{--c:var(--c-coral);display:block;text-decoration:none;color:inherit}
.pcase--azul{--c:var(--c-azul)}
.pcase--verde{--c:var(--c-verde)}
.pcase--mostaza{--c:var(--c-mostaza)}
.pcase--gris{--c:var(--c-gris)}
.pcase--ancha{grid-column:1/-1}
.pcase__media{
  position:relative;overflow:hidden;border-radius:20px;
  aspect-ratio:4/3;background:rgba(var(--c),.13);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.pcase--ancha .pcase__media{aspect-ratio:2/1}
.pcase:hover .pcase__media{transform:translateY(-4px);box-shadow:0 30px 54px -30px rgba(27,24,21,.4)}
.pcase__media picture{position:absolute;inset:0;display:block}
/* Alto de más: el desplazamiento del scroll necesita margen o asomaría el fondo */
.pcase__media img, .pcase__media video{
  position:absolute;left:0;top:-9%;width:100%;height:118%;
  object-fit:cover;display:block;will-change:transform;
}
/* El reproductor es 16:9 y el marco 2:1: se estira en alto para cubrirlo.
   pointer-events:none o el iframe se traga el clic. */
.pcase__media iframe{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:100%;height:114%;border:0;pointer-events:none;
}
.pcase__arr{
  position:absolute;top:14px;right:17px;z-index:2;
  font-size:19px;line-height:1;color:#fff;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
  transition:transform .45s var(--ease);
}
.pcase:hover .pcase__arr{transform:translate(3px,-3px)}
.pcase__name{
  margin:1.15rem 0 0;font-size:clamp(1.2rem,1.8vw,1.5rem);
  letter-spacing:-.028em;line-height:1.15;
}
.pcase__desc{margin:.55rem 0 0;color:var(--gray);font-size:15px;line-height:1.55;max-width:48ch}
/* La ficha ancha mide 1220 px: ahí el tope de 48ch dejaba el texto a un
   tercio del vídeo que tiene encima. */
.pcase--ancha .pcase__desc{max-width:none}
.pcase__tags{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.15rem 0 0;padding:0;list-style:none}
/* Cada etiqueta hereda el color del servicio al que corresponde arriba.
   El color va en el fondo y el borde, no en la letra: a 11 px, cuatro de los
   cinco tonos no llegan al contraste mínimo sobre crema. En tinta sí. */
.pcase__tags li{
  --t:var(--c-coral);
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);border:1px solid rgba(var(--t),.5);border-radius:999px;
  background:rgba(var(--t),.15);
  padding:.44rem .88rem;line-height:1;
}
.pcase__tags .t--web{--t:var(--c-coral)}      /* Diseño y desarrollo web */
.pcase__tags .t--seo{--t:var(--c-azul)}       /* Posicionamiento SEO y GEO */
.pcase__tags .t--ads{--t:var(--c-verde)}      /* Publicidad online */
.pcase__tags .t--marca{--t:var(--c-mostaza)}  /* Branding */
.pcase__tags .t--soft{--t:var(--c-gris)}      /* Software a medida */
.pcase__tags .t--rrss{--t:var(--c-gris)}      /* Redes sociales */
@media (max-width:820px){.pgrid2{grid-template-columns:1fr}
.pcase--ancha{grid-column:auto}
.pcase--ancha .pcase__media{aspect-ratio:4/3}
.pcase--ancha .pcase__media iframe{height:100%;width:134%;left:50%;transform:translate(-50%,-50%)}
}

/* ===== CTA BAND (cristal sobre los colores del footer) ===== */
.band{padding:0}
.band__in{
  position:relative;overflow:hidden;
  border-radius:calc(var(--r) + 6px);   /* el mismo del formulario */
}
/* El panel usa el cristal compartido del sitio (misma regla que .form-card).
   Sin manchas de color detrás: eso era lo que lo diferenciaba del formulario. */
.band__glass{
  padding:clamp(3rem,7vw,5.5rem) clamp(1.5rem,5vw,4.5rem);
  text-align:center;color:var(--ink);
  border-radius:inherit;
}
.band h2{color:var(--ink);max-width:22ch;margin:0 auto}
.band .sub{color:var(--gray);margin:1.1rem auto 2rem}
.band .serif{color:var(--ink)}
.band .btn--ghost{background:rgba(255,255,255,.55);color:var(--ink);border-color:rgba(27,24,21,.16);box-shadow:var(--sheen)}
.band .btn--ghost:hover{background:rgba(255,255,255,.85)}

/* ===== CONTACT ===== */
.contact .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:start}
.contact .side ul{list-style:none;margin-top:2rem;display:flex;flex-direction:column;gap:.4rem}
.contact .side li{display:flex;gap:.85rem;align-items:center;padding:.55rem 0;font-weight:500;font-size:15.5px}
.contact .side li .ic{
  width:40px;height:40px;border-radius:14px;background:rgba(255,255,255,.55);color:var(--ink);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 4px 10px -4px rgba(27,24,21,.15);
}
.contact .side li a{text-decoration:none}
.contact .side li a:hover{color:var(--ink)}
.form-card{border-radius:calc(var(--r) + 6px);padding:clamp(1.5rem,3vw,2.3rem)}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field--full{grid-column:1/-1}
.field label{font-size:13px;font-weight:600;color:var(--ink)}
.field input, .field select, .field textarea{
  font-family:var(--font);font-size:15.5px;color:var(--ink);
  background:var(--glass-input);
  border:1px solid rgba(255,255,255,.65);border-radius:14px;
  padding:.8rem 1rem;outline:none;width:100%;appearance:none;-webkit-appearance:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  transition:border-color .35s,box-shadow .35s,background .35s;
}
.field input::placeholder, .field textarea::placeholder{color:#9A938A}
.field textarea{resize:vertical;min-height:96px}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:rgba(244,80,10,.6);background:rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 0 4px rgba(244,80,10,.14);
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235F5A54' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;cursor:pointer;
}
.f-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.4rem;flex-wrap:wrap}
.f-foot small{color:var(--gray);font-size:12.5px;max-width:28ch}
.form-ok{display:none;text-align:center;padding:3rem 1rem}
.form-ok.show{display:block;animation:okIn .7s var(--ease) both}
@keyframes okIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.form-ok .flame{width:56px;height:56px;margin:0 auto 1.1rem}
.form-ok h3{font-size:1.5rem}
.form-ok p{color:var(--gray);margin-top:.5rem}
@media (max-width:900px){.contact .wrap{grid-template-columns:1fr}.f-grid{grid-template-columns:1fr}}

/* ===== FOOTER ===== */
footer{
  position:relative;overflow:hidden;isolation:isolate;
  margin-top:clamp(4rem,8vw,7rem);
  /* Aire bajo el contenido para que se vea el degradado, sin pasarse de alto */
  padding-bottom:clamp(140px,17vw,240px);
}
.foot-top{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;
  gap:clamp(2rem,4vw,3rem);padding-top:clamp(3rem,6vw,4.5rem);
}
.foot-brand img{height:30px;margin-bottom:1.2rem}
.foot-brand p{color:var(--gray);font-size:14.5px;max-width:32ch;margin-bottom:1.6rem}
.foot-social{display:flex;gap:.6rem}
.foot-social a{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(27,24,21,.16);color:var(--ink);
  transition:background .3s,border-color .3s,transform .3s var(--ease);
}
.foot-social a:hover{background:rgba(27,24,21,.06);border-color:rgba(27,24,21,.3);transform:translateY(-2px)}
.foot-social svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.foot-col h4{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:1.1rem}
.foot-col a{display:block;text-decoration:none;color:var(--gray);font-size:14.5px;padding:.3rem 0;transition:color .3s}
.foot-col a:hover{color:var(--ink)}
.foot-bar{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding:1.4rem 0 clamp(2rem,4vw,3rem);
  border-top:1px solid rgba(27,24,21,.14);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:13.5px;color:var(--gray);
}
.foot-bar a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(27,24,21,.3)}

/* ===== Paisaje de degradados: las cinco tintas del grid de servicios.
   Es una capa que cubre TODO el footer, no un bloque debajo: así el color
   sube desde abajo y se apaga hacia arriba sin ninguna línea de corte.
   La máscara se aplica al elemento entero, con lo que el grano se desvanece
   con él (antes el grano llegaba a tope arriba y marcaba el borde). ===== */
.foot-art{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.12) 26%,rgba(0,0,0,.5) 48%,rgba(0,0,0,.85) 68%,#000 84%);
          mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.12) 26%,rgba(0,0,0,.5) 48%,rgba(0,0,0,.85) 68%,#000 84%);
}
.foot-art i{
  /* Sobresalen por debajo del borde: si acaban justo en el canto, el propio
     desenfoque se recorta contra él y el final del degradado sale aguado. */
  position:absolute;bottom:-55px;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;   /* cresta de colina */
  filter:blur(52px);                            /* muy difuso: sin bordes duros */
}
/* Estrechas y desplazadas: anchas y centradas solo producen bandas planas */
.foot-art i:nth-child(1){left:-6%;width:78%;height:56%;
  background:linear-gradient(180deg,rgba(var(--c-azul),.85),rgba(var(--c-azul),.4));}
.foot-art i:nth-child(2){left:38%;width:70%;height:48%;
  background:linear-gradient(180deg,rgba(var(--c-gris),.75),rgba(var(--c-mostaza),.45));}
.foot-art i:nth-child(3){left:-18%;width:72%;height:44%;
  background:linear-gradient(180deg,rgba(var(--c-verde),.8),rgba(var(--c-verde),.4));}
.foot-art i:nth-child(4){left:52%;width:66%;height:41%;
  background:linear-gradient(180deg,rgba(var(--c-mostaza),.85),rgba(var(--c-coral),.6));}
.foot-art i:nth-child(5){left:8%;width:84%;height:31%;
  background:linear-gradient(180deg,rgba(var(--c-coral),1),rgba(var(--c-coral),.85));}
/* Grano: convierte el degradado liso en la textura de la referencia */
.foot-art::after{
  content:"";position:absolute;inset:0;opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width:900px){.foot-top{grid-template-columns:1fr 1fr;gap:2.2rem}
.foot-brand{grid-column:1/-1}
}
@media (max-width:520px){.foot-top{grid-template-columns:1fr}
.foot-bar{flex-direction:column;gap:.5rem}
}
@media (max-width:768px){.nav__links, .nav__cta .tel{display:none}
.burger{display:flex}
}
@media (max-width:480px){.nav__cta .btn{font-size:14px;padding:.6rem 1.05rem;white-space:nowrap}
.nav__logo img{height:19px}
}

/* ==========================================================================
   PÁGINAS DE SERVICIO
   Cada página hereda un color de la paleta vía --c en el <body>, así el hero,
   los acentos y las tarjetas se tiñen sin escribir una hoja por servicio.
   ========================================================================== */

/* --- Migas de pan --- */

/* ===== HERO: tipografía enorme + forma animada grande =====
   El titular ocupa de verdad la pantalla; la forma vive al fondo y sobresale
   por el borde derecho, como en las tarjetas de la home. */
.svc-hero{
  position:relative;overflow:hidden;
  /* 90% del alto de pantalla. svh en vez de vh para que en móvil no lo estropee
     la barra del navegador al aparecer y desaparecer. */
  min-height:90vh;min-height:90svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(7rem,13vh,9rem) 0 clamp(2.5rem,5vw,3.5rem);
}
.svc-hero__art{
  position:absolute;z-index:-1;pointer-events:none;
  right:-9%;top:-4%;width:min(48%,620px);aspect-ratio:1;
}
.svc-hero__art i{position:absolute;display:block;transform-origin:center}
.svc-hero h1{
  font-size:clamp(2.1rem,6.2vw,4.6rem);line-height:1;letter-spacing:-.035em;
  margin:1rem 0 0;max-width:18ch;
}
.svc-hero h1 em{font-style:normal;color:rgb(var(--c))}
.svc-hero__foot{
  display:grid;grid-template-columns:1fr auto;gap:clamp(1.5rem,4vw,3rem);
  align-items:end;margin-top:clamp(2rem,5vw,3.5rem);
  padding-top:clamp(1.5rem,3vw,2.2rem);border-top:1px solid rgba(27,24,21,.14);
}
.svc-hero__sub{color:var(--gray);font-size:clamp(1rem,1.4vw,1.22rem);max-width:52ch;line-height:1.55}
.svc-hero .hero__ctas{justify-content:flex-start;margin-top:0;animation:none;opacity:1;transform:none}
@media (max-width:820px){.svc-hero__art{width:78%;right:-22%;top:auto;bottom:-8%;opacity:.7}
.svc-hero__foot{grid-template-columns:1fr}
}

/* ===== Cinta deslizante: da movimiento y refuerza semántica ===== */
.ticker{
  overflow:hidden;padding:clamp(1rem,2vw,1.5rem) 0;
  border-top:1px solid rgba(27,24,21,.12);border-bottom:1px solid rgba(27,24,21,.12);
  background:rgba(var(--c),.07);
}
.ticker__row{display:flex;width:max-content;animation:tick 34s linear infinite}
.ticker:hover .ticker__row{animation-play-state:paused}
.ticker span{
  display:inline-flex;align-items:center;gap:clamp(1.5rem,3vw,2.6rem);
  padding-right:clamp(1.5rem,3vw,2.6rem);
  font-size:clamp(1.1rem,2.4vw,2rem);font-weight:600;letter-spacing:-.02em;white-space:nowrap;
}
.ticker span::after{content:"";width:9px;height:9px;border-radius:50%;background:rgb(var(--c));flex:0 0 auto}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__row{animation:none}}

/* ===== Enfoque: cita grande + imagen del proyecto ===== */
.pull{padding:clamp(4.5rem,10vw,8rem) 0}
.pull__grid{display:grid;grid-template-columns:1.25fr .95fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.pull__q{
  font-size:clamp(1.35rem,2.9vw,2.3rem);font-weight:300;line-height:1.3;letter-spacing:-.015em;
}
.pull__q b{font-weight:600}
.pull__media{
  position:relative;overflow:hidden;border-radius:26px;aspect-ratio:4/5;
  background:rgba(var(--c),.14);
}
.pull__media img{width:100%;height:100%;object-fit:cover;display:block}
.pull__media::after{
  content:"";position:absolute;inset:0;background:rgba(var(--c),.18);mix-blend-mode:multiply;
}
@media (max-width:900px){.pull__grid{grid-template-columns:1fr;gap:2.5rem}.pull__media{aspect-ratio:4/3}}

/* ===== Subservicios: tarjetas con forma animada, como las de la home ===== */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.svc-card{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:26px;padding:clamp(1.6rem,2.6vw,2.2rem);min-height:320px;
  display:flex;flex-direction:column;
  background:linear-gradient(158deg,rgba(var(--c),.2),rgba(var(--c),.07) 62%);
  border:1px solid rgba(var(--c),.16);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.svc-card:hover{transform:translateY(-6px);box-shadow:0 30px 54px -28px rgba(27,24,21,.3)}
.svc-card__n{
  align-self:flex-start;font-size:12px;font-weight:600;letter-spacing:.12em;
  color:var(--ink);background:rgba(255,255,255,.75);border-radius:999px;padding:.4rem .8rem;
}
.svc-card__body{margin-top:auto;padding-top:2.2rem;max-width:30ch}
.svc-card h3{font-size:clamp(1.2rem,1.75vw,1.5rem);margin-bottom:.45rem;letter-spacing:-.02em}
.svc-card p{color:var(--gray);font-size:14.8px}
.svc-card ul{list-style:none;margin-top:1rem;display:flex;flex-wrap:wrap;gap:.4rem}
.svc-card li{
  font-size:12px;font-weight:500;color:var(--ink);
  background:rgba(255,255,255,.6);border-radius:999px;padding:.24rem .68rem;
}
/* Forma abstracta al fondo, anclada arriba a la derecha para no pisar el texto */
.svc-card__art{
  position:absolute;z-index:-1;pointer-events:none;
  right:-6%;top:-9%;width:min(42%,190px);aspect-ratio:1;
}
.svc-card__art i{
  position:absolute;display:block;transform-origin:center;
  background:linear-gradient(150deg,rgba(var(--c),.8),rgba(var(--c),.16));
}
/* Cuatro motivos, uno por tarjeta, reutilizando los keyframes de la home */
.m1 i{width:48%;height:48%;border-radius:100% 0 100% 0;animation:petalo 11s var(--ease) infinite}
.m1 i:nth-child(1){left:0;top:0}
.m1 i:nth-child(2){right:0;top:0;border-radius:0 100% 0 100%;animation-delay:-2.7s}
.m1 i:nth-child(3){left:0;bottom:0;border-radius:0 100% 0 100%;animation-delay:-5.4s}
.m1 i:nth-child(4){right:0;bottom:0;animation-delay:-8.1s}
.m2 i{border-radius:50%;left:50%;top:50%;animation:anillo 6.5s var(--ease) infinite}
.m2 i:nth-child(1){width:100%;height:100%;opacity:.4}
.m2 i:nth-child(2){width:72%;height:72%;opacity:.6;animation-delay:-1.6s}
.m2 i:nth-child(3){width:46%;height:46%;opacity:.8;animation-delay:-3.2s}
.m2 i:nth-child(4){width:20%;height:20%;animation-delay:-4.8s}
.m3 i{width:46%;height:46%;border-radius:8px;animation:flotar 8s var(--ease) infinite}
.m3 i:nth-child(1){left:0;top:0;opacity:.5}
.m3 i:nth-child(2){right:0;top:14%;animation-delay:-2s}
.m3 i:nth-child(3){left:14%;bottom:0;opacity:.75;animation-delay:-4s}
.m3 i:nth-child(4){right:12%;bottom:-14%;opacity:.35;animation-delay:-6s}
.m4 i{border-radius:50%;width:56%;height:56%;animation:derivar 10s var(--ease) infinite}
.m4 i:nth-child(1){left:0;top:4%;opacity:.75}
.m4 i:nth-child(2){right:0;top:0;opacity:.5;animation-delay:-2.5s}
.m4 i:nth-child(3){left:16%;bottom:0;animation-delay:-5s}
.m4 i:nth-child(4){right:6%;bottom:6%;width:34%;height:34%;opacity:.6;animation-delay:-7.5s}
/* En el hero la misma forma va mucho más grande y más diluida */
.svc-hero__art i{background:linear-gradient(150deg,rgba(var(--c),.55),rgba(var(--c),.1))}
@media (prefers-reduced-motion:reduce){.svc-card__art i, .svc-hero__art i{animation:none}}
@media (max-width:760px){.svc-grid{grid-template-columns:1fr}.svc-card{min-height:280px}}

/* ===== Proceso: numerales enormes ===== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.5vw,2rem);counter-reset:paso}
.step{position:relative;padding-top:clamp(3.5rem,7vw,5rem)}
.step::before{
  counter-increment:paso;content:counter(paso,decimal-leading-zero);
  position:absolute;top:0;left:-.04em;
  font-size:clamp(3.2rem,6.5vw,5.4rem);font-weight:800;line-height:.8;
  letter-spacing:-.05em;color:rgba(var(--c),.32);
}
.step h3{font-size:1.1rem;margin-bottom:.45rem;letter-spacing:-.015em}
.step p{color:var(--gray);font-size:14.5px}
@media (max-width:860px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ===== Proyecto destacado: reutiliza el lenguaje de "Nuestros trabajos" ===== */
.spot{position:relative;display:block;overflow:hidden;border-radius:24px;aspect-ratio:21/8;text-decoration:none;background:rgba(var(--c),.14)}
.spot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.spot:hover img{transform:scale(1.04)}
.spot::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(var(--c),.16);mix-blend-mode:multiply;transition:opacity .6s;pointer-events:none}
.spot:hover::before{opacity:0}
.spot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;z-index:2;background:linear-gradient(180deg,transparent,rgba(12,10,8,.8));pointer-events:none}
.spot__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:3;color:#fff;
  padding:clamp(1.2rem,2.4vw,2rem) clamp(1.3rem,2.6vw,2.2rem);
  display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;
}
.spot__cap b{display:block;font-size:clamp(1.1rem,1.7vw,1.5rem);font-weight:600;letter-spacing:-.02em}
.spot__cap small{display:block;color:rgba(255,255,255,.75);font-size:clamp(.8rem,.95vw,.9rem);margin-top:.25rem;max-width:54ch}
.spot__cap .arr{font-size:1.3em;transition:transform .35s var(--ease)}
.spot:hover .spot__cap .arr{transform:translateX(5px)}
@media (max-width:700px){.spot{aspect-ratio:4/3}}

/* ===== Otros servicios ===== */
.xserv{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.xserv a{
  text-decoration:none;border-radius:18px;padding:1.3rem 1.35rem;
  display:flex;align-items:center;gap:.75rem;font-size:14.8px;font-weight:500;
  background:var(--glass);border:1px solid var(--glass-border);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--sheen);
  transition:transform .4s var(--ease),background .4s;
}
.xserv a:hover{transform:translateY(-4px);background:var(--glass-strong)}
.xserv i{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
@media (max-width:860px){.xserv{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.xserv{grid-template-columns:1fr}}

/* ==========================================================================
   BLOQUES DE ARQUITECTURA (páginas de servicio)
   ========================================================================== */

/* --- "Pregunta a la IA": enlaces que empujan el GEO --- */
.askai{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:1.6rem}
.askai>span{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gray)}
.askai a{
  display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;
  font-size:13px;font-weight:500;color:var(--ink);
  padding:.42rem .85rem;border-radius:999px;
  background:var(--glass);border:1px solid var(--glass-border);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  transition:transform .3s var(--ease),background .3s;
}
.askai a:hover{transform:translateY(-2px);background:var(--glass-strong)}

/* --- Diferenciadores del hero --- */
.diffs{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1.4rem}
.diffs li{list-style:none;display:flex;align-items:center;gap:.5rem;font-size:14px;color:var(--gray)}
.diffs li::before{content:"";width:8px;height:8px;border-radius:50%;background:rgb(var(--c));flex:0 0 auto}

/* --- Tarjetas de tipo de servicio: titular, bajada y beneficios --- */
.tipos{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.tipo{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:22px;padding:clamp(1.4rem,2.2vw,1.8rem);
  display:flex;flex-direction:column;min-height:300px;
  background:linear-gradient(158deg,rgba(var(--c),.2),rgba(var(--c),.06) 62%);
  border:1px solid rgba(var(--c),.16);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.tipo:hover{transform:translateY(-6px);box-shadow:0 26px 48px -26px rgba(27,24,21,.3)}
.tipo__art{position:absolute;z-index:-1;pointer-events:none;right:-8%;top:-10%;width:min(46%,150px);aspect-ratio:1}
.tipo__art i{position:absolute;display:block;transform-origin:center;background:linear-gradient(150deg,rgba(var(--c),.8),rgba(var(--c),.16))}
.tipo h3{font-size:1.22rem;letter-spacing:-.02em;margin-bottom:.4rem}
.tipo__sub{color:var(--gray);font-size:14.2px;margin-bottom:auto}
.tipo ul{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid rgba(27,24,21,.1)}
.tipo li{font-size:13.6px;display:flex;gap:.55rem;align-items:flex-start;line-height:1.4}
.tipo li::before{content:"";width:6px;height:6px;border-radius:50%;background:rgb(var(--c));flex:0 0 auto;margin-top:.42rem}
@media (max-width:1000px){.tipos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.tipos{grid-template-columns:1fr}.tipo{min-height:0}}

/* --- Banda de cifra grande --- */
.figura{padding:clamp(4rem,9vw,7rem) 0}
.figura__in{
  display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;
  border-radius:calc(var(--r) + 6px);padding:clamp(2.5rem,5vw,4rem);
  background:var(--glass);border:1px solid var(--glass-border);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--sheen),var(--shadow-s);
}
.figura h2{font-size:clamp(1.8rem,3.4vw,2.7rem);letter-spacing:-.03em;line-height:1.08}
.figura__n{font-size:clamp(4rem,11vw,8.5rem);font-weight:800;line-height:.82;letter-spacing:-.055em;color:rgb(var(--c))}
.figura__p{color:var(--gray);font-size:15.5px;margin-top:.9rem;max-width:34ch}
@media (max-width:800px){.figura__in{grid-template-columns:1fr;gap:1.5rem}}

/* --- Muro de clientes --- */
.muro{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(27,24,21,.1);
  border:1px solid rgba(27,24,21,.1);border-radius:20px;overflow:hidden}
.muro a, .muro div{
  background:var(--paper);padding:1.4rem 1.3rem;text-decoration:none;
  display:flex;flex-direction:column;gap:.15rem;transition:background .35s;
}
.muro a:hover{background:rgba(var(--c),.12)}
.muro b{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.muro small{font-size:12.5px;color:var(--gray)}
@media (max-width:860px){.muro{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.muro{grid-template-columns:1fr}}

/* --- Tríada Enfoque / Compromiso / Impacto --- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.trio__i{padding-top:1.6rem;border-top:2px solid rgb(var(--c))}
.trio__i h3{font-size:1.15rem;letter-spacing:-.02em;margin-bottom:.5rem}
.trio__i p{color:var(--gray);font-size:14.8px}
@media (max-width:800px){.trio{grid-template-columns:1fr;gap:1.8rem}}

/* --- Proceso de 5 pasos --- */
.steps--5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1000px){.steps--5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.steps--5{grid-template-columns:1fr}}

/* ==========================================================================
   BLOQUES A TODO COLOR
   El sitio es crema; estas clases rompen ese fondo a sangre para que cada
   sección se distinga de la anterior. El tono profundo se compone
   superponiendo el color de la página sobre tinta, así vale para los cinco
   colores sin declarar una variante por cada uno.
   ========================================================================== */
.sec--deep{
  background:linear-gradient(0deg,rgba(var(--c),.72),rgba(var(--c),.72)),#16120E;
  color:#fff;position:relative;overflow:hidden;
}
.sec--ink{background:#16120E;color:#fff;position:relative;overflow:hidden}
.sec--tint{background:rgba(var(--c),.14);position:relative;overflow:hidden}
.sec--paper{background:#fff;position:relative;overflow:hidden}

/* Texto sobre fondo oscuro */
.sec--deep h1, .sec--deep h2, .sec--deep h3, .sec--deep b, .sec--ink h1, .sec--ink h2, .sec--ink h3, .sec--ink b{color:#fff}
.sec--deep p, .sec--deep .sub, .sec--deep li, .sec--ink p, .sec--ink .sub, .sec--ink li{color:rgba(255,255,255,.76)}
.sec--deep .kicker, .sec--ink .kicker{color:rgba(255,255,255,.72)}
.sec--deep .kicker::before, .sec--ink .kicker::before{background:#fff}
.sec--deep .diffs li::before, .sec--ink .diffs li::before{background:#fff}
.sec--deep .btn--ghost, .sec--ink .btn--ghost{
  background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.3);box-shadow:none;
}
.sec--deep .btn--ghost:hover, .sec--ink .btn--ghost:hover{background:rgba(255,255,255,.24)}
.sec--deep .askai a, .sec--ink .askai a{
  background:rgba(255,255,255,.13);color:#fff;border-color:rgba(255,255,255,.26);
}
.sec--deep .askai>span, .sec--ink .askai>span{color:rgba(255,255,255,.6)}
.sec--deep .askai a:hover, .sec--ink .askai a:hover{background:rgba(255,255,255,.24)}
/* Sobre oscuro la forma del hero se aclara en vez de oscurecerse */
.sec--deep .svc-hero__art i{background:linear-gradient(150deg,rgba(255,255,255,.3),rgba(255,255,255,.04))}

/* ==========================================================================
   PROCESO ESQUEMÁTICO: nodos unidos por una línea
   ========================================================================== */
.flow{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1rem,2vw,1.8rem);counter-reset:paso}
.flow::before{
  content:"";position:absolute;left:0;right:0;top:26px;height:2px;
  background:repeating-linear-gradient(90deg,currentColor 0 6px,transparent 6px 12px);
  opacity:.28;
}
.flow__i{position:relative;padding-top:4.4rem}
.flow__i::before{
  counter-increment:paso;content:counter(paso,decimal-leading-zero);
  position:absolute;top:0;left:0;width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;letter-spacing:.02em;
  background:rgb(var(--c));color:#fff;
  box-shadow:0 0 0 8px var(--paper);
}
.sec--tint .flow__i::before{box-shadow:0 0 0 8px rgba(var(--c),.14)}
.sec--deep .flow__i::before, .sec--ink .flow__i::before{background:#fff;color:#16120E;box-shadow:0 0 0 8px #16120E}
.flow__i h3{font-size:1.05rem;letter-spacing:-.015em;margin-bottom:.4rem}
.flow__i p{color:var(--gray);font-size:14.2px}
.sec--deep .flow__i p, .sec--ink .flow__i p{color:rgba(255,255,255,.7)}
@media (max-width:1000px){.flow{grid-template-columns:repeat(2,1fr);gap:2rem 1.5rem}
.flow::before{display:none}
}
@media (max-width:560px){.flow{grid-template-columns:1fr}}

/* Cifra sobre fondo oscuro */
.sec--ink .figura__in{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);box-shadow:none}
.sec--ink .figura__n{color:rgb(var(--c))}
.sec--ink .figura__p{color:rgba(255,255,255,.7)}

/* Muro sobre color: las celdas heredan el fondo del bloque */
.sec--tint .muro{background:rgba(27,24,21,.12);border-color:rgba(27,24,21,.12)}
.sec--tint .muro a{background:rgba(255,255,255,.55)}
.sec--tint .muro a:hover{background:#fff}

/* Tríada sobre oscuro */
.sec--deep .trio__i, .sec--ink .trio__i{border-top-color:#fff}

/* Sobre fondo profundo el acento del titular no puede ir en el color de la
   página: es justo el color del fondo. Va en blanco atenuado, que sí contrasta. */
.sec--deep h1 em, .sec--ink h1 em{color:rgba(255,255,255,.58)}

/* ==========================================================================
   REJILLA DE CASOS CON IMAGEN
   Cada pieza enlaza a su página de caso. Mismo tratamiento que "Nuestros
   trabajos": foto a sangre, velo del color y pie superpuesto.
   ========================================================================== */
.casos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.caso{
  position:relative;display:block;overflow:hidden;
  border-radius:20px;aspect-ratio:4/3;text-decoration:none;
  background:rgba(var(--c),.14);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.caso:hover{transform:translateY(-4px);box-shadow:0 30px 54px -30px rgba(27,24,21,.4)}
.caso picture{position:absolute;inset:0;display:block}
.caso img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.caso:hover img{transform:scale(1.05)}
.caso::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(var(--c),.18);mix-blend-mode:multiply;
  opacity:1;transition:opacity .6s var(--ease);
}
.caso:hover::before{opacity:0}
.caso::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:58%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(12,10,8,.8));
}
.caso__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:3;color:#fff;
  padding:clamp(1rem,1.8vw,1.4rem) clamp(1.1rem,2vw,1.5rem);
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
}
.caso__cap b{display:block;font-size:clamp(1rem,1.4vw,1.22rem);font-weight:600;letter-spacing:-.02em}
.caso__cap small{display:block;color:rgba(255,255,255,.74);font-size:12.8px;margin-top:.2rem}
.caso__cap .arr{font-size:1.2em;transition:transform .35s var(--ease)}
.caso:hover .caso__cap .arr{transform:translateX(4px)}
@media (max-width:900px){.casos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.casos{grid-template-columns:1fr}}

/* ==========================================================================
   SOLO DOS FONDOS: crema (el de la home) y el color profundo de la página.
   Se alternan de forma que nunca haya dos bloques de color seguidos.
   Aquí van los ajustes de las piezas que caen sobre el bloque de color.
   ========================================================================== */

/* La cinta ya no lleva fondo propio: vive sobre el crema, marcada por sus filetes */
.ticker{background:transparent}

/* Tarjetas de tipo de servicio sobre el bloque de color: cristal claro,
   porque su degradado del propio color desaparecería contra ese fondo */
.sec--deep .tipo{
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.22);
  backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
}
.sec--deep .tipo:hover{background:rgba(255,255,255,.2);box-shadow:0 26px 48px -26px rgba(0,0,0,.45)}
.sec--deep .tipo h3{color:#fff}
.sec--deep .tipo__sub, .sec--deep .tipo li{color:rgba(255,255,255,.76)}
.sec--deep .tipo li::before{background:#fff}
.sec--deep .tipo ul{border-top-color:rgba(255,255,255,.2)}
.sec--deep .tipo__art i{background:linear-gradient(150deg,rgba(255,255,255,.3),rgba(255,255,255,.05))}

/* ==========================================================================
   ACORDEÓN DE PROYECTOS
   Paneles en fila que se ensanchan al pasar por encima. Distinto del mosaico
   de la home, así la misma web no repite dos veces el mismo recurso.
   ========================================================================== */
.acc{
  display:flex;gap:12px;
  height:clamp(360px,54vh,540px);
}
.acc__i{
  position:relative;display:block;overflow:hidden;
  flex:1 1 0;min-width:0;border-radius:22px;text-decoration:none;
  background:rgba(var(--c),.14);
  transition:flex .75s var(--ease),box-shadow .5s var(--ease);
}
/* El primero abierto de salida; al señalar cualquiera, manda ese */
.acc__i:first-child{flex:2.6 1 0}
.acc:hover .acc__i, .acc:focus-within .acc__i{flex:1 1 0}
.acc__i:hover, .acc__i:focus-visible{flex:2.9 1 0;box-shadow:0 30px 60px -30px rgba(27,24,21,.45)}
.acc__i img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease);
}
.acc__i:hover img{transform:scale(1.05)}
.acc__i::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(var(--c),.28);mix-blend-mode:multiply;
  opacity:1;transition:opacity .6s var(--ease);
}
.acc__i:first-child::before{opacity:0}
.acc:hover .acc__i::before, .acc:focus-within .acc__i::before{opacity:1}
.acc__i:hover::before, .acc__i:focus-visible::before{opacity:0}
.acc__i::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:55%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(12,10,8,.82));
}
.acc__lbl{
  position:absolute;left:0;right:0;bottom:0;z-index:3;color:#fff;
  padding:clamp(1.1rem,1.9vw,1.6rem) clamp(1.2rem,2vw,1.6rem);
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
}
.acc__lbl b{display:block;font-size:clamp(1rem,1.35vw,1.25rem);font-weight:600;letter-spacing:-.02em;white-space:nowrap}
/* La bajada solo aparece en el panel abierto: en los estrechos no cabría */
.acc__lbl small{
  display:block;font-size:12.6px;color:rgba(255,255,255,.75);margin-top:.2rem;
  white-space:nowrap;overflow:hidden;
  max-width:0;opacity:0;transition:max-width .75s var(--ease),opacity .5s var(--ease);
}
.acc__i:first-child .acc__lbl small{max-width:30ch;opacity:1}
.acc:hover .acc__i .acc__lbl small, .acc:focus-within .acc__i .acc__lbl small{max-width:0;opacity:0}
.acc__i:hover .acc__lbl small, .acc__i:focus-visible .acc__lbl small{max-width:30ch;opacity:1}
.acc__lbl .arr{flex:0 0 auto;font-size:1.25em;transition:transform .35s var(--ease)}
.acc__i:hover .acc__lbl .arr{transform:translateX(5px)}

/* En pantallas estrechas el acordeón no funciona: pasa a rejilla */
@media (max-width:860px){.acc{display:grid;grid-template-columns:repeat(2,1fr);height:auto;gap:12px}
.acc__i, .acc__i:first-child{flex:none;aspect-ratio:4/3}
.acc__i::before, .acc__i:first-child::before{opacity:1}
.acc__lbl small, .acc__i:first-child .acc__lbl small{max-width:30ch;opacity:1;white-space:normal}
}
@media (max-width:520px){.acc{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.acc__i{transition:none}.acc__lbl small{transition:none}
}

/* ==========================================================================
   LISTA DE PROYECTOS CON VISTA PREVIA FLOTANTE
   Filas tipo índice; al señalar una, su imagen aparece siguiendo al cursor.
   ========================================================================== */
.plist{position:relative;border-top:1px solid rgba(27,24,21,.16)}
.plist__row{
  position:relative;z-index:2;display:grid;
  grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:clamp(1rem,2.5vw,2.5rem);
  padding:clamp(1.4rem,2.8vw,2.2rem) .4rem;
  border-bottom:1px solid rgba(27,24,21,.16);
  text-decoration:none;color:var(--ink);
  transition:padding-left .45s var(--ease),color .35s;
}
.plist__row:hover{padding-left:1.6rem}
.plist__n{font-size:12.5px;font-weight:600;letter-spacing:.1em;color:var(--gray);transition:color .35s}
.plist__row:hover .plist__n{color:rgb(var(--c))}
.plist__name{
  font-size:clamp(1.5rem,3.6vw,2.9rem);font-weight:700;letter-spacing:-.03em;line-height:1;
}
.plist__tag{font-size:14px;color:var(--gray);white-space:nowrap}
.plist__row .arr{font-size:1.3rem;transition:transform .35s var(--ease)}
.plist__row:hover .arr{transform:translateX(6px)}
/* Miniatura en línea: es lo que ve quien va en móvil o con el teclado */
.plist__thumb{display:none;width:64px;height:48px;border-radius:8px;object-fit:cover}

/* La vista previa que persigue al cursor */
.plist__peek{
  position:absolute;top:0;left:0;z-index:1;pointer-events:none;
  width:clamp(240px,22vw,340px);aspect-ratio:4/3;border-radius:18px;overflow:hidden;
  opacity:0;transform:translate(-50%,-50%) scale(.92);
  transition:opacity .35s var(--ease),transform .45s var(--ease);
  box-shadow:0 30px 60px -28px rgba(27,24,21,.5);
}
.plist.is-on .plist__peek{opacity:1;transform:translate(-50%,-50%) scale(1)}
.plist__peek img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .3s var(--ease);
}
.plist__peek img.on{opacity:1}
@media (max-width:820px),(hover:none){.plist__peek{display:none}
.plist__thumb{display:block}
.plist__row{grid-template-columns:auto auto 1fr auto;gap:1rem}
.plist__tag{display:none}
.plist__row:hover{padding-left:.4rem}
}
@media (prefers-reduced-motion:reduce){.plist__peek{transition:none}.plist__row{transition:none}
}

/* ==========================================================================
   CARRUSEL INFINITO DE PROYECTOS
   Dos filas desplazándose en sentidos opuestos. No hay que hacer nada para
   verlo funcionar, que es justo lo que se busca aquí: que llame solo.
   El truco del bucle sin costura es duplicar el juego de tarjetas y
   desplazar exactamente la mitad del ancho total.
   ========================================================================== */
.cine{display:flex;flex-direction:column;gap:14px;overflow:hidden;padding:2px 0}
.cine__row{display:flex;gap:14px;width:max-content;animation:desliz 48s linear infinite}
.cine__row--rev{animation-direction:reverse}
.cine:hover .cine__row, .cine:focus-within .cine__row{animation-play-state:paused}
@keyframes desliz{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cine__c{
  position:relative;flex:0 0 auto;display:block;text-decoration:none;
  width:clamp(240px,24vw,360px);aspect-ratio:4/3;
  border-radius:20px;overflow:hidden;background:rgba(var(--c),.14);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.cine__c:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 30px 56px -28px rgba(27,24,21,.45);z-index:2}
.cine__c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.cine__c:hover img{transform:scale(1.06)}
.cine__c::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(var(--c),.2);mix-blend-mode:multiply;
  opacity:1;transition:opacity .5s var(--ease);
}
.cine__c:hover::before{opacity:0}
.cine__c::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:52%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(12,10,8,.8));
}
.cine__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:3;color:#fff;
  padding:1rem 1.15rem;display:flex;align-items:flex-end;justify-content:space-between;gap:.8rem;
}
.cine__cap b{display:block;font-size:1.08rem;font-weight:600;letter-spacing:-.02em}
.cine__cap small{display:block;font-size:12.4px;color:rgba(255,255,255,.74);margin-top:.15rem}
.cine__cap .arr{flex:0 0 auto;transition:transform .35s var(--ease)}
.cine__c:hover .cine__cap .arr{transform:translateX(4px)}

/* Los bordes se desvanecen: sin esto las tarjetas aparecen y desaparecen de golpe */
.cine{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
@media (prefers-reduced-motion:reduce){.cine__row{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
.cine{mask-image:none;-webkit-mask-image:none}
}

/* ==========================================================================
   REJILLA DE PROYECTOS 2 + 3
   Dos piezas arriba y tres abajo. Rejilla de seis columnas para que dentro de
   cada fila midan exactamente lo mismo: 3+3 y 2+2+2. Con tres columnas la
   fila de arriba solo podría repartirse 2+1 y quedaría desigual.
   ========================================================================== */
.pgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.pgrid>a{grid-column:span 2}
.pgrid>a:nth-child(-n+2){grid-column:span 3}
.pitem{
  position:relative;display:block;overflow:hidden;text-decoration:none;
  border-radius:20px;aspect-ratio:16/11;
  background:rgba(var(--c),.14);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.pitem:hover{transform:translateY(-5px);box-shadow:0 30px 56px -28px rgba(27,24,21,.42)}
.pitem img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pitem:hover img{transform:scale(1.05)}
.pitem::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(var(--c),.18);mix-blend-mode:multiply;
  opacity:1;transition:opacity .55s var(--ease);
}
.pitem:hover::before{opacity:0}
.pitem::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:55%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(12,10,8,.8));
}
.pitem__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:3;color:#fff;
  padding:clamp(1rem,1.8vw,1.4rem) clamp(1.1rem,2vw,1.5rem);
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
}
.pitem__cap b{display:block;font-size:clamp(1rem,1.4vw,1.22rem);font-weight:600;letter-spacing:-.02em}
.pitem__cap small{display:block;font-size:12.6px;color:rgba(255,255,255,.74);margin-top:.2rem}
.pitem__cap .arr{flex:0 0 auto;font-size:1.2em;transition:transform .35s var(--ease)}
.pitem:hover .pitem__cap .arr{transform:translateX(4px)}
@media (max-width:900px){.pgrid{grid-template-columns:repeat(2,1fr)}
.pgrid>a, .pgrid>a:nth-child(-n+2){grid-column:span 1}
}
@media (max-width:560px){.pgrid{grid-template-columns:1fr}
.pgrid>a, .pgrid>a:nth-child(-n+2){grid-column:span 1}
}

/* ==========================================================================
   Páginas que abren con una banda oscura a sangre bajo el menú fijo.
   Mientras la barra está arriba va en blanco; al desplazarse recupera el
   fondo claro y vuelve a tinta. Body: .dark-hero-page
   ========================================================================== */
.dark-hero-page .nav:not(.scrolled) .nav__in{border-bottom-color:rgba(255,255,255,.2)}
.dark-hero-page .nav:not(.scrolled) .nav__logo img{filter:brightness(0) invert(1)}
.dark-hero-page .nav:not(.scrolled) .nav__links a,.dark-hero-page .nav:not(.scrolled) .nav__links .nav__drop{color:rgba(255,255,255,.86)}
.dark-hero-page .nav:not(.scrolled) .nav__links a:hover,.dark-hero-page .nav:not(.scrolled) .nav__links .nav__drop:hover{color:#fff}
.dark-hero-page .nav:not(.scrolled) .nav__cta .tel{color:rgba(255,255,255,.66)}
.dark-hero-page .nav:not(.scrolled) .nav__cta .tel:hover{color:#fff}
.dark-hero-page .nav:not(.scrolled) .nav__cta .btn{background:#fff;color:#16120E}
.dark-hero-page .nav:not(.scrolled) .nav__cta .btn:hover{background:rgba(255,255,255,.85)}
.dark-hero-page .nav:not(.scrolled) .burger span{background:#fff}

/* ===== Pie: NAP visible y títulos de columna sin heading (semántica SEO) ===== */
.foot-col .foot-col__t{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:1.1rem}
.foot-nap{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;font-style:normal;font-size:14px;color:var(--gray);margin:-.7rem 0 1.4rem}
.foot-nap a{color:inherit;text-decoration:none;transition:color .3s}
.foot-nap a:hover{color:var(--ink)}
/* ===== Hero de la home: el antetítulo vive dentro del H1, con su apariencia de siempre ===== */
.hero__title--stack{display:flex;flex-direction:column;align-items:center;margin-top:0}
.hero__title--stack .hero__eyebrow{display:inline-flex;line-height:1.65;font-weight:600}
.hero__claim{display:block;margin-top:clamp(1rem,2.6vh,1.7rem)}
/* ===== Aviso del formulario: el correo se prepara, no se "recibe" ===== */
.form-ok__t{font-size:1.5rem;font-weight:500;letter-spacing:-.04em}
.form-ok p a{color:var(--ink)}


/* ==========================================================================
   Menú de servicios de la barra (escritorio)
   Panel absoluto bajo .nav__in: se despliega hacia abajo con el mismo truco
   de grid-template-rows que usa el acordeón de preguntas, y las cinco áreas
   entran escalonadas. La regla de color de cada una es la misma que usan los
   distintivos del portfolio y de las fichas de proyecto.
   ========================================================================== */
.nav__drop{font-family:inherit;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;line-height:inherit;letter-spacing:inherit}
.nav__caret{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .35s var(--ease)}
.nav.is-open .nav__caret{transform:translateY(1px) rotate(-135deg)}

.nav__panel{
  --panel-line:var(--home-line,rgba(27,24,21,.14));
  position:absolute;left:0;right:0;top:100%;
  pointer-events:none;
  display:grid;grid-template-rows:0fr;
  opacity:0;visibility:hidden;
  transition:grid-template-rows .44s var(--ease),opacity .26s var(--ease),visibility 0s linear .44s;
}
.nav.is-open .nav__panel{
  grid-template-rows:1fr;opacity:1;visibility:visible;pointer-events:auto;
  transition:grid-template-rows .44s var(--ease),opacity .22s var(--ease),visibility 0s;
}
.nav__panel-clip{overflow:hidden;min-height:0}
.nav__panel-card{
  max-width:1260px;margin:0 auto;
  background:var(--paper);
  border:1px solid var(--panel-line);border-top:0;
  border-radius:0 0 14px 14px;
  box-shadow:0 2px 0 rgba(27,24,21,.03),0 34px 64px -34px rgba(27,24,21,.45);
  overflow:hidden;
}

.megamenu{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--panel-line)}
.mega{
  display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;
  height:100%;padding:1.6rem 1.3rem 1.5rem;
  background:var(--paper);text-decoration:none;color:var(--ink);
  opacity:0;transform:translateY(9px);
  transition:opacity .38s var(--ease),transform .42s var(--ease),background .3s var(--ease);
}
.nav.is-open .mega{opacity:1;transform:none}
.nav.is-open .megamenu li:nth-child(1) .mega{transition-delay:.05s}
.nav.is-open .megamenu li:nth-child(2) .mega{transition-delay:.09s}
.nav.is-open .megamenu li:nth-child(3) .mega{transition-delay:.13s}
.nav.is-open .megamenu li:nth-child(4) .mega{transition-delay:.17s}
.nav.is-open .megamenu li:nth-child(5) .mega{transition-delay:.21s}
.mega:hover,.mega:focus-visible{background:rgba(var(--dot),.075)}
.mega__rule{width:22px;height:3px;border-radius:2px;background:rgb(var(--dot));transition:width .38s var(--ease)}
.mega:hover .mega__rule,.mega:focus-visible .mega__rule{width:44px}
.mega__n{font-size:.9375rem;font-weight:500;letter-spacing:-.025em;line-height:1.3;text-wrap:balance}
.mega__d{font-size:.8125rem;line-height:1.5;color:var(--gray)}
.mega[aria-current="page"] .mega__rule{width:44px}
.mega[aria-current="page"] .mega__n{color:rgb(var(--dot))}
.mega--web,.m-serv--web{--dot:var(--c-coral)}
.mega--seo,.m-serv--seo{--dot:var(--c-azul)}
.mega--ads,.m-serv--ads{--dot:var(--c-verde)}
.mega--marca,.m-serv--marca{--dot:var(--c-mostaza)}
.mega--rrss,.m-serv--rrss{--dot:var(--c-gris)}

.nav__panel-foot{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem 1.5rem;
  margin:0;padding:.95rem 1.3rem;
  border-top:1px solid var(--panel-line);background:rgba(27,24,21,.022);
  font-size:.8125rem;color:var(--gray);
}
.nav__panel-foot a{color:var(--ink);text-decoration:none;font-weight:500;display:inline-flex;align-items:center;gap:.5rem}
.nav__panel-foot a:hover{text-decoration:underline;text-underline-offset:5px}

/* Por debajo de 1080 px el descriptor sobra: las cinco columnas se estrechan
   y el nombre necesita todo el ancho. */
@media (max-width:1080px){
  .mega{padding:1.3rem 1rem 1.25rem}
  .mega__d{display:none}
}
@media (prefers-reduced-motion:reduce){
  .nav__panel,.nav__panel *,.nav__caret{transition-duration:.01ms !important;transition-delay:0s !important}
  .mega{transform:none}
}


/* ==========================================================================
   Menú móvil a pantalla completa
   Cubre la ventana entera por debajo de la barra (z-index 95 < 100), que se
   queda arriba con el logotipo, el botón de proyecto y la X. El interior es
   una columna con scroll propio; el pie se pega abajo con margin-top:auto.
   ========================================================================== */
body.menu-open{overflow:hidden}

.m-menu{
  --barra:84px;
  position:fixed;inset:0;z-index:95;
  display:block;padding:0;border:0;border-radius:0;box-shadow:none;
  background:var(--paper);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease),visibility 0s linear .3s;
}
body.menu-open .m-menu{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .3s var(--ease),visibility 0s;
}
.m-menu__in{
  display:flex;flex-direction:column;gap:1.6rem;min-height:100%;
  padding:calc(var(--barra) + 1.8rem) 1.25rem 2.2rem;
}
.m-menu__k{margin:0 0 .55rem;font-size:.69rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.m-menu ul{list-style:none;margin:0;padding:0}

/* Entrada escalonada: cada fila sube un poco después de la anterior. */
.m-menu li{opacity:0;transform:translateY(13px);transition:opacity .4s var(--ease),transform .46s var(--ease)}
body.menu-open .m-menu li{opacity:1;transform:none}
body.menu-open .m-menu li:nth-child(1){transition-delay:.06s}
body.menu-open .m-menu li:nth-child(2){transition-delay:.1s}
body.menu-open .m-menu li:nth-child(3){transition-delay:.14s}
body.menu-open .m-menu li:nth-child(4){transition-delay:.18s}
body.menu-open .m-menu li:nth-child(5){transition-delay:.22s}
.m-menu__foot{opacity:0;transform:translateY(13px);transition:opacity .4s var(--ease) .24s,transform .46s var(--ease) .24s}
body.menu-open .m-menu__foot{opacity:1;transform:none}

/* Servicios: fila con la regla de color de cada área. */
.m-serv{
  display:flex;align-items:center;gap:.9rem;
  padding:.8rem 0;border-bottom:1px solid var(--home-line);
  font-size:1.0625rem;font-weight:500;letter-spacing:-.02em;line-height:1.3;
  color:var(--ink);text-decoration:none;
}
.m-serv__rule{flex:none;width:20px;height:3px;border-radius:2px;background:rgb(var(--dot))}
.m-serv[aria-current="page"]{color:rgb(var(--dot))}

/* Secciones: el peso visual del menú. */
.m-menu__main a{
  display:block;padding:.5rem 0;
  font-size:clamp(1.7rem,8vw,2.1rem);font-weight:500;letter-spacing:-.045em;line-height:1.2;
  color:var(--ink);text-decoration:none;
}
.m-menu__main a[aria-current="page"]{color:rgb(var(--c-coral))}

.m-menu__foot{
  margin-top:auto;padding-top:1.5rem;border-top:1px solid var(--home-line);
  display:flex;flex-direction:column;gap:.45rem;font-size:.9375rem;
}
.m-menu__foot a{color:var(--ink);text-decoration:none}
.m-menu__foot span{color:var(--gray)}

@media (max-width:560px){.m-menu{--barra:78px}}

/* Con el menú abierto, la barra deja de ir en blanco sobre banda oscura:
   detrás ya no hay banda, hay hoja crema. */
.menu-open.dark-hero-page .nav:not(.scrolled) .nav__in{border-bottom-color:var(--home-line)}
.menu-open.dark-hero-page .nav:not(.scrolled) .nav__logo img{filter:none}
.menu-open.dark-hero-page .nav:not(.scrolled) .burger span{background:var(--ink)}
.menu-open.dark-hero-page .nav:not(.scrolled) .nav__cta .btn{background:var(--ink);color:#fff}

@media (prefers-reduced-motion:reduce){
  .m-menu,.m-menu li,.m-menu__foot{transition-duration:.01ms !important;transition-delay:0s !important}
  .m-menu li,.m-menu__foot{transform:none}
}