/* Heliotropia · Home · usa los tokens de assets/css/tokens.css */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--negro-b);color:var(--blanco-a);font:var(--text-body-s);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p,ul{margin:0;padding:0}
ul{list-style:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;background:var(--blanco-a);color:var(--negro-b);padding:10px 16px;border-radius:var(--radius-pill);z-index:100}
.skip:focus{top:16px}
:focus-visible{outline:2px solid var(--azul-a);outline-offset:3px}
.wrap{width:min(1460px,100% - 48px);margin-inline:auto}

/* Intertítulo con barra diagonal */
.intertitle{position:relative;display:grid;place-items:center;padding:24px 16px;text-align:center}
.intertitle h2{position:relative;z-index:1;font:var(--text-special-l);text-transform:uppercase;text-wrap:balance}
.intertitle::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:130px;transform:translate(-50%,-50%) rotate(45deg);background:linear-gradient(180deg,var(--morado-b),var(--morado-gradiente),var(--morado-c));border-radius:999px}
.on-cream{color:var(--negro-b)}

/* Header */
.site-header{position:absolute;inset:0 0 auto 0;z-index:20;padding:80px 70px 0;display:flex;align-items:center;gap:16px}
.brand{margin-right:auto;display:block;width:271px;flex:none}
.brand img{width:100%;height:auto}
.glass{background:rgba(234,229,223,.12);border:1px solid rgba(234,229,223,.22);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--radius-pill)}
.nav{display:flex;align-items:center;gap:8px 40px;padding:14px 32px}
.nav a{font:500 13px var(--font-sans);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;color:var(--blanco-a);padding:6px 4px;border-radius:var(--radius-sm);white-space:nowrap}
.nav a:hover{color:var(--morado-b)}
.nav a[aria-current="page"]{color:var(--morado-b)}
.lang{display:flex;align-items:center;gap:6px;padding:14px 20px}
.lang button{display:inline-flex;align-items:center;gap:6px;font:500 13px var(--font-sans);background:none;border:0;color:var(--blanco-a);padding:6px 8px;border-radius:var(--radius-pill);cursor:pointer}
.lang button[aria-pressed="true"]{color:var(--morado-b)}
.lang button:hover{background:rgba(234,229,223,.14)}
.lang svg{width:14px;height:10px;border-radius:2px}
.menu-toggle{display:none;font:500 13px var(--font-sans);text-transform:uppercase;letter-spacing:.04em;color:var(--blanco-a);padding:14px 22px;cursor:pointer}

/* Hero */
.hero{position:relative;min-height:961px;height:100svh;max-height:1080px;display:grid;place-items:center;text-align:center;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(33,33,33,.82) 0%,rgba(33,33,33,.35) 30%,rgba(33,33,33,.42) 70%,rgba(33,33,33,.7) 100%)}
.hero__inner{width:min(1000px,100% - 48px);padding-top:80px}
.hero h1{font:var(--text-display);font-size:clamp(40px,6vw,96px);line-height:1.15;text-transform:uppercase;color:var(--blanco-a);text-wrap:balance}
.hero p{margin:48px auto 0;max-width:960px;font:400 clamp(17px,1.5vw,22px)/1.5 var(--font-sans);text-shadow:0 1px 12px rgba(0,0,0,.5)}
.scroll{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);width:70px;height:80px;display:grid;place-items:center;border-radius:var(--radius-pill);color:var(--blanco-a);text-decoration:none}

/* Sobre */
.about{position:relative;min-height:692px;display:grid;align-items:center;color:var(--negro-b);background:#EAE5DF;overflow:hidden}
.about::before{content:"";position:absolute;inset:0;background:url(../bg/sobre-lineas.png) center/cover no-repeat;opacity:.5}
.about__grid{position:relative;width:min(1100px,100% - 48px);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:start}
.term{display:flex;gap:40px;align-items:flex-start}
.term svg{flex:none;margin-top:8px;color:var(--morado-c)}
.term h2{font:400 48px/1.1 var(--font-special);letter-spacing:.01em}
.term h2 small{font-size:.7em}
.term p{margin-top:12px;font:400 20px/1.3 var(--font-sans)}
.about__def{font:400 24px/1.4 var(--font-sans);padding-top:8px}

/* ¿Por qué? */
.why{position:relative;padding:170px 0 120px;background:var(--negro-b);overflow:hidden}
.why::before{content:"";position:absolute;inset:0;background:url(../bg/porque-lineas.png) center top/cover no-repeat;pointer-events:none}
.why .intertitle{position:relative}
.why__grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,402px));justify-content:space-between;margin-top:24px;width:min(1470px,100% - 48px);margin-inline:auto}
.why__card:nth-child(2){margin-top:244px}
.why__photo{width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover}
.why__card h3{position:relative;margin-top:-44px;font:600 28px/1.2 var(--font-sans);text-transform:uppercase;text-wrap:balance;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.why__card p{margin-top:32px;font:400 16px/1.4 var(--font-sans);max-width:400px}

/* Clientes */
.clients{background:var(--blanco-a);color:var(--negro-b);padding:100px 0 120px}
.marquee{--gap:80px;position:relative;margin-top:56px;display:grid;gap:56px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);overflow:hidden}
.marquee__row{display:flex;width:max-content;animation:scroll-left 70s linear infinite}
.marquee__row--rev{animation-direction:reverse;animation-duration:80s}
.marquee__group{display:flex;align-items:center;gap:var(--gap);padding-right:var(--gap)}
.marquee__group li{display:grid;place-items:center;height:80px}
.marquee__group img{max-width:none;flex:none}
.marquee:hover .marquee__row,.marquee.is-paused .marquee__row,.marquee:focus-within .marquee__row{animation-play-state:paused}
@keyframes scroll-left{to{transform:translateX(-50%)}}
.pause{display:block;margin:40px auto 0;font:500 12px var(--font-sans);text-transform:uppercase;letter-spacing:.04em;color:var(--morado-c);background:transparent;border:1.5px solid var(--morado-c);border-radius:var(--radius-pill);padding:8px 16px;cursor:pointer}
.pause:hover{background:var(--morado-c);color:#fff}

/* Banda */
.band{background:var(--morado-d);color:var(--blanco-a);text-align:center;padding:20px 24px}
.band p{font:400 clamp(20px,2vw,28px)/1.3 var(--font-special)}

/* Servicios */
.services{background:var(--negro-b);padding:100px 0 110px}
.services__lead{max-width:860px;margin:40px auto 0;text-align:center;font:400 clamp(18px,1.5vw,22px)/1.55 var(--font-sans);padding-inline:24px}
.carousel{position:relative;margin-top:64px}
.track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 70px;scroll-padding-inline:70px}
.track::-webkit-scrollbar{display:none}
.arrow{position:absolute;top:50%;z-index:3;width:68px;height:68px;margin-top:-34px;display:grid;place-items:center;border-radius:50%;color:var(--blanco-a);cursor:pointer;background:rgba(33,33,33,.55);border:1px solid rgba(234,229,223,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.arrow:hover{background:rgba(234,229,223,.25)}
.arrow--prev{left:24px}.arrow--next{right:24px}
.svc{flex:0 0 350px;scroll-snap-align:start;display:grid;grid-template-rows:90px 350px 90px;justify-items:center;text-align:center}
.svc img{grid-row:2;width:350px;height:350px;object-fit:cover;border-radius:50%}
.svc__label{display:grid;gap:4px;align-content:center}
.svc__label span{font:400 14px var(--font-sans);text-transform:uppercase;letter-spacing:.02em}
.svc__label strong{font:400 40px/1.1 var(--font-special)}
.svc--top .svc__label{grid-row:1;align-content:end;padding-bottom:12px}
.svc--bottom .svc__label{grid-row:3;align-content:start;padding-top:12px}
.svc--top{margin-top:0}

/* Banner catalizador */
.catalyst{position:relative;min-height:800px;display:grid;align-items:center;isolation:isolate}
.catalyst img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover}
.catalyst__inner{width:min(1040px,100% - 48px);margin-inline:auto;display:grid;gap:36px;justify-items:start}
.catalyst h2{font:400 clamp(36px,4.2vw,64px)/1.2 var(--font-special);text-shadow:0 2px 16px rgba(0,0,0,.45);max-width:860px}
.btn-grad{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 40px;border-radius:var(--radius-pill);font:500 16px var(--font-sans);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;color:var(--negro-b);background:linear-gradient(90deg,#8fb4dc,#8583bd 55%,#9d93d6);border:1px solid rgba(255,255,255,.35)}
.btn-grad:hover{filter:brightness(1.08)}

/* Proyectos */
.projects{background:var(--negro-b);padding:100px 0 120px}
.projects__grid{margin-top:90px;display:grid;grid-template-columns:repeat(3,minmax(0,440px));justify-content:space-between;width:min(1460px,100% - 48px);margin-inline:auto}
.proj img{width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover;position:relative;z-index:0}
.proj__card{position:relative;z-index:1;margin:-24px 8% 0;padding:32px;border-radius:32px 32px 32px 32px;background:rgba(80,80,80,.55);border:1px solid rgba(234,229,223,.2);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);display:grid;gap:18px}
.proj__card h3{font:600 28px/1.2 var(--font-sans);text-transform:uppercase;padding-bottom:16px;border-bottom:1px solid rgba(234,229,223,.5);text-wrap:balance}
.proj__card p{font:400 15px/1.5 var(--font-sans)}

/* Hechos */
.facts{background:#1a1a1a;padding:80px 0 100px;overflow:hidden}
.facts__stage{position:relative;width:min(1600px,100%);aspect-ratio:1600/800;margin:20px auto 0}
.facts__stage img{position:absolute}
.fact{position:absolute;display:grid;gap:6px;max-width:260px}
.fact strong{font:400 40px/1 var(--font-special);color:var(--morado-b)}
.fact span{font:400 16px/1.4 var(--font-sans)}
.stage-pos{left:calc(var(--x) / 1600 * 100%);top:calc(var(--y) / 800 * 100%);width:calc(var(--w) / 1600 * 100%)}

/* Instagram */
.insta{background:var(--morado-b);color:var(--negro-b);padding:70px 0 70px}
.insta .intertitle h2{font:var(--text-special-l);color:var(--negro-b)}
.insta .intertitle::after{display:none}
.insta .track{padding:0 59px;gap:8px;scroll-padding-inline:59px}
.tile{flex:0 0 363px;aspect-ratio:363/495;display:block;overflow:hidden}
.tile img{width:100%;height:100%;object-fit:cover}
.insta .carousel{margin-top:40px}

/* Contacto */
.contact{background:var(--negro-b);padding:56px 70px 56px;display:grid;grid-template-columns:1fr 1fr;gap:40px 120px;min-height:770px;grid-template-rows:1fr auto}
.contact__info h2{font:var(--text-special-m);font-size:32px;text-transform:uppercase}
.contact__info p{margin-top:12px;max-width:38ch;font:400 16px/1.4 var(--font-sans)}
.social{display:flex;gap:28px;margin-top:40px}
.social a{display:block;width:26px;height:26px}
.social img{width:100%;height:100%;object-fit:contain}
form{display:grid;gap:28px;align-content:start}
.field{display:grid;gap:4px;font:400 16px var(--font-sans)}
.field input,.field textarea{font:400 16px var(--font-sans);color:var(--blanco-a);background:transparent;border:0;border-bottom:1px solid var(--blanco-a);padding:10px 0;resize:vertical;border-radius:0}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--azul-a);outline-offset:4px}
.send{justify-self:end;font:400 20px var(--font-sans);text-transform:uppercase;color:var(--blanco-a);background:var(--negro-a);border:1.5px solid var(--morado-a);border-radius:var(--radius-pill);padding:16px 22px;cursor:pointer}
.send:hover{border-color:var(--blanco-a)}
.copy{grid-column:1/-1;align-self:end;font:400 28px var(--font-special);text-transform:uppercase}

/* Responsive */
@media (max-width:1180px){
  .site-header{padding:32px 24px 0;flex-wrap:wrap}
  .brand{width:210px}
  .menu-toggle{display:block}
  .nav{display:none;order:5;flex-basis:100%;flex-direction:column;align-items:flex-start;border-radius:24px;padding:16px 24px;gap:6px}
  .nav.is-open{display:flex}
  .why__card:nth-child(2){margin-top:120px}
  .about__grid{gap:48px}
}
@media (max-width:860px){
  .why{padding-top:110px}
  .why__grid,.projects__grid{grid-template-columns:minmax(0,420px);justify-content:center;gap:56px}
  .why__card:nth-child(2){margin-top:0}
  .about__grid{grid-template-columns:1fr;margin-top:80px}
  .term{gap:20px}.term h2{font-size:38px}
  .arrow{width:52px;height:52px;margin-top:-26px}
  .arrow--prev{left:8px}.arrow--next{right:8px}
  .track{padding:0 24px;scroll-padding-inline:24px}
  .svc,.svc img{flex-basis:290px}.svc img{width:290px;height:290px}.svc{grid-template-rows:90px 290px 90px}
  .tile{flex-basis:260px}
  .intertitle h2{font-size:32px}
  .facts__stage{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:32px 20px;width:min(560px,100% - 48px)}
  .facts__stage img{display:none}
  .fact{position:static;max-width:none}
  .contact{grid-template-columns:1fr;padding:48px 24px;gap:48px}
  .catalyst{min-height:560px}
  .marquee{--gap:48px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee__row{animation:none}
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .pause{display:none}
}
.why__photo,.proj img{height:auto}

/* ===== Móvil optimizado (≤ 860px) ===== */
@media (max-width:860px){
  .wrap{width:calc(100% - 40px)}
  /* Header */
  .site-header{padding:20px 20px 0;gap:12px;align-items:center}
  .brand{width:150px}
  .menu-toggle{padding:12px 20px;min-height:44px}
  .lang{order:4;padding:6px 10px;gap:2px}
  .lang button{min-height:40px;padding:6px 10px}
  .nav{border-radius:24px;padding:12px 20px;gap:0}
  .nav a{padding:14px 4px;font-size:14px;width:100%;border-bottom:1px solid rgba(234,229,223,.14)}
  .nav a:last-child{border-bottom:0}
  /* Hero */
  .hero{min-height:620px;height:100svh;max-height:820px}
  .hero__inner{padding-top:150px;width:calc(100% - 40px)}
  .hero h1{font-size:clamp(34px,10.5vw,52px)}
  .hero p{margin-top:24px;font-size:16px}
  .scroll{bottom:24px;width:56px;height:64px}
  /* Sobre */
  .about{min-height:0;padding:72px 0}
  .about__grid{margin:0 auto;gap:28px;width:calc(100% - 40px)}
  .term h2{font-size:36px}
  .about__def{font-size:20px;padding-top:0}
  /* Por qué */
  .why{padding:72px 0 80px}
  .why__grid{margin-top:32px;gap:56px;width:calc(100% - 40px)}
  .why__card{max-width:340px;margin-inline:auto;width:100%}
  .why__card h3{font-size:24px;margin-top:-36px}
  .why__card p{margin-top:20px}
  /* Clientes */
  .clients{padding:64px 0 72px}
  .marquee{--gap:44px;gap:28px;margin-top:32px}
  .marquee__group li{height:56px}
  .marquee__group img{zoom:.7}
  .pause{margin-top:28px;min-height:44px}
  .band p{font-size:20px}
  /* Servicios: una columna, sin carrusel */
  .services{padding:72px 0 80px}
  .services__lead{margin-top:24px;font-size:17px}
  .services .carousel{margin-top:40px}
  .services .arrow{display:none}
  .services .track{flex-direction:column;align-items:center;gap:44px;overflow:visible;scroll-snap-type:none;padding:0 20px}
  .services .svc{flex:none;width:min(320px,100%);grid-template-rows:auto auto}
  .services .svc img{grid-row:1;width:100%;height:auto;aspect-ratio:1}
  .services .svc--top .svc__label,.services .svc--bottom .svc__label{grid-row:2;align-content:start;padding:16px 0 0}
  .svc__label strong{font-size:36px}
  /* Banner */
  .catalyst{min-height:480px}
  .catalyst__inner{gap:24px}
  .catalyst h2{font-size:clamp(30px,8.5vw,40px)}
  /* Proyectos */
  .projects{padding:72px 0 80px}
  .projects__grid{margin-top:40px;gap:48px;width:calc(100% - 40px)}
  .proj{max-width:360px;margin-inline:auto;width:100%}
  .proj__card{margin:-24px 4% 0;padding:24px}
  .proj__card h3{font-size:22px}
  /* Hechos */
  .facts{padding:64px 0 72px}
  .facts__stage{margin-top:24px;gap:36px 20px}
  .fact strong{font-size:34px}
  /* Instagram */
  .insta{padding:56px 0}
  .insta .track{padding:0 20px;scroll-padding-inline:20px}
  .tile{flex-basis:240px}
  .insta .arrow{width:44px;height:44px;margin-top:-22px}
  /* Contacto */
  .contact{padding:56px 20px 32px;min-height:0;gap:40px}
  .contact__info p{max-width:none}
  .social{gap:24px;margin-top:28px}
  .social a{width:32px;height:32px}
  form{gap:24px}
  .send{justify-self:stretch;text-align:center;min-height:52px}
  .copy{font-size:22px}
  .intertitle::after{height:90px}
}
@media (max-width:380px){
  .brand{width:130px}
  .lang button{padding:6px 7px}
  .facts__stage{grid-template-columns:1fr}
}
@media (max-width:860px){.catalyst::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(33,33,33,.15),rgba(33,33,33,.6))}}

/* ===== Cabecera móvil y tablet (≤1320px): menú | logo | idioma. Mismas medidas en todos los anchos ===== */
@media (max-width:1320px){
  .menu-toggle{display:block}
  .nav{display:none;order:5;flex-basis:100%;flex-direction:column;align-items:flex-start;border-radius:24px;padding:16px 24px;gap:6px}
  .nav.is-open{display:flex}
  .site-header{padding:24px clamp(14px,2.5vw,32px) 0;gap:10px 8px;flex-wrap:wrap;justify-content:space-between;align-items:center}
  .site-header .menu-toggle{order:1;position:relative;display:block;flex:none;width:46px;height:38px;min-height:38px;padding:0;font-size:0;line-height:0;letter-spacing:0}
  .site-header .menu-toggle::before,.site-header .menu-toggle::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:3px;margin:-1.5px 0 0 -11px;border-radius:2px;background:currentColor;transition:transform .2s}
  .site-header .menu-toggle::before{box-shadow:0 -7px 0 currentColor,0 7px 0 currentColor}
  .site-header .menu-toggle::after{opacity:0}
  .site-header .menu-toggle[aria-expanded="true"]::before{box-shadow:none;transform:rotate(45deg)}
  .site-header .menu-toggle[aria-expanded="true"]::after{opacity:1;transform:rotate(-45deg)}
  .site-header .brand{order:2;flex:none;width:clamp(150px,52vw,203px);margin:0}
  .site-header .lang{order:3;position:relative;z-index:30;flex:none;flex-direction:column;align-items:stretch;gap:0;padding:0;height:38px;overflow:hidden;border-radius:19px}
  .site-header .lang.is-open{height:auto;overflow:visible;margin-bottom:-76px;border-radius:19px;background:rgba(33,33,33,.92)}
  .site-header .lang button{display:none;align-items:center;justify-content:center;gap:8px;height:38px;min-height:38px;padding:0 14px;border-radius:19px;font:600 14px var(--font-sans);letter-spacing:0}
  .site-header .lang button[aria-pressed="true"]{display:inline-flex;order:-1}
  .site-header .lang.is-open button{display:inline-flex}
  .site-header .lang svg{width:16px;height:11px}
  .site-header .nav{order:5;flex-basis:100%}
}
@media (max-width:1180px){
  .site-header .lang:not(.is-open) button[aria-pressed="true"]{color:var(--blanco-a)}
}

/* Home · proyectos enlazados */
.proj__pic{display:block;border-radius:50%}
.proj__pic:focus-visible{outline:3px solid var(--morado-b);outline-offset:4px}
.proj__see{justify-self:start;display:inline-flex;align-items:center;min-height:44px;font:500 13px var(--font-sans);text-transform:uppercase;letter-spacing:.05em;text-decoration:none;color:var(--blanco-a);border-bottom:1px solid var(--morado-b)}
.proj__see:hover,.proj__see:focus-visible{color:var(--morado-b)}
.proj__card{align-content:start}
.projects__cta{display:flex;justify-content:center;margin-top:72px}
@media (max-width:860px){.projects__cta{margin-top:48px}}
.projects__grid .proj{display:flex;flex-direction:column}
.projects__grid .proj__card{flex:1}
.projects__grid .proj__card{display:flex;flex-direction:column;gap:18px}
.projects__grid .proj__see{margin-top:auto;align-self:flex-start}

/* ===== Menú fijo al hacer scroll ===== */
html{scroll-padding-top:96px}
.site-header{position:fixed;z-index:50;transition:padding .25s ease,background-color .25s ease,box-shadow .25s ease}
.site-header.is-scrolled{padding-top:14px;padding-bottom:14px;background:rgba(33,33,33,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(234,229,223,.12)}
@media (min-width:1321px){.site-header.is-scrolled .brand{width:200px}}
@media (max-width:1320px){.site-header .nav.is-open{max-height:calc(100svh - 96px);overflow-y:auto}}
@media (prefers-reduced-motion:reduce){.site-header{transition:none}}

/* Cabecera de escritorio: que quepa completa en 1181–1500px */
@media (min-width:1321px) and (max-width:1500px){
  .site-header{padding-inline:48px;gap:12px}
  .brand{width:240px}
  .nav{gap:8px 24px;padding:14px 24px}
  .lang{padding:14px 14px}
}
.tile a{display:block;width:100%;height:100%}
.tile a:hover img{filter:brightness(1.06)}

/* Roca One en títulos de sección y en la palabra Heliotropia de la definición */
.intertitle h2{font-family:var(--font-display);font-weight:400;letter-spacing:.01em}
.term h2 [data-i18n="def.term"]{font-family:var(--font-display);font-weight:400}
.svc__label strong{font-family:var(--font-display);font-weight:400}
.insta .intertitle h2,.catalyst h2,.band p{font-family:var(--font-display);font-weight:400}
.catalyst h2{line-height:1.25}
.contact__info h2{font-family:var(--font-display);font-weight:400}

/* Servicios en el home: auto layout. 5 en zigzag si caben, si no se acomodan en filas y bajan a columna */
.services .arrow{display:none}
.services .track{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:48px 40px;width:min(1700px,100%);margin-inline:auto;padding:0 24px;overflow:visible;scroll-snap-type:none}
.services .svc{flex:0 0 min(260px,100%);width:min(260px,100%);display:grid;grid-template-rows:auto auto;grid-template-columns:minmax(0,1fr);justify-items:stretch;text-align:center}
.services .svc img{grid-row:1;width:100%;height:auto;aspect-ratio:1;border-radius:50%}
.services .svc--top .svc__label,.services .svc--bottom .svc__label{grid-row:2;align-content:start;padding:16px 0 0}
.services .svc__label strong{font-size:34px}
@media (min-width:1181px){
  .services .track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 clamp(32px,3.6vw,72px);padding:0 clamp(32px,4vw,72px);align-items:stretch}
  .services .svc{flex:none;width:100%;grid-template-rows:clamp(64px,6vw,90px) auto clamp(64px,6vw,90px)}
  .services .svc img{grid-row:2}
  .services .svc--top .svc__label{grid-row:1;align-content:end;padding:0 0 12px}
  .services .svc--bottom .svc__label{grid-row:3;align-content:start;padding:12px 0 0}
  .services .svc__label strong{font-size:clamp(18px,1.9vw,32px)}
  .services .svc__label span{font-size:clamp(11px,1vw,14px)}
}

/* Por qué Heliotropia: títulos siempre en dos líneas */
.why__card h3{white-space:nowrap;font-size:clamp(20px,1.75vw,26px)}
@media (max-width:860px){.why__card h3{font-size:22px}}
@media (max-width:420px){.why__card h3{font-size:20px}}
/* título 16px más abajo (el texto de abajo baja con él) */
.why__card h3{margin-top:-28px}
@media (max-width:860px){.why__card h3{margin-top:-20px}}

/* Botones principales: color sólido #4B539B con letra blanca (sin degradado) */
.btn-grad,.pill-btn{background:#4b539b;background-image:none;color:#fff;border:1px solid #4b539b}
.btn-grad:hover,.pill-btn:hover,.btn-grad:focus-visible,.pill-btn:focus-visible{background:#542882;border-color:#542882;filter:none}

/* Hechos: cifras en Roca One. Instagram: título en blanco */
.fact strong{font-family:var(--font-display);font-weight:400}
.insta .intertitle h2{color:var(--blanco-a)}

/* Estado activo del menú y del idioma: contraste AA sobre cualquier foto (Negro B sobre Blanco A = 14:1) */
.nav a:hover{color:#b3b1e0;text-decoration:none}
.nav a[aria-current="page"],.nav a[aria-current="page"]:hover{background:var(--blanco-a);color:var(--negro-b);padding:8px 18px;margin:0 -14px;border-radius:var(--radius-pill);text-decoration:none}
.lang button:hover{color:#b3b1e0}
.lang button[aria-pressed="true"],.lang button[aria-pressed="true"]:hover{background:var(--blanco-a);color:var(--negro-b)}
@media (max-width:1180px){
  .site-header .lang button[aria-pressed="true"],.site-header .lang:not(.is-open) button[aria-pressed="true"]{background:transparent;color:var(--blanco-a)}
  .site-header .lang.is-open button[aria-pressed="true"]{background:var(--blanco-a);color:var(--negro-b)}
}

/* Instagram: en pantallas grandes el carrusel queda en el mismo contenedor centrado que el resto del home */
@media (min-width:1400px){
  .insta .carousel{width:min(1460px,100% - 48px);margin-inline:auto}
  .insta .track{padding:0;scroll-padding-inline:0}
  .insta .tile{flex:0 0 calc((100% - 24px) / 4)}
}