/* =====================================================================
   Indigo Estudio — estilos del tema (v0.4)
   Sistema: retícula de 12 columnas (margen 10px, hueco 10px), texto 13px/20px,
   titulares 94px en mayúsculas (lh .9, ls -.055em), líneas 1px al 20 % de negro.
   ===================================================================== */

@font-face { font-family: "BDO Grotesk"; src: url("../fonts/BDOGrotesk-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "BDO Grotesk"; src: url("../fonts/BDOGrotesk-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BDO Grotesk"; src: url("../fonts/BDOGrotesk-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Now Display"; src: url("../fonts/HelveticaNowDisplay-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
	--gutter: 10px;
	--gap: 10px;
	--col: calc((100vw - 130px) / 12);          /* 12 columnas: 1440 → 109,17px */
	--col13: calc((100vw - 140px) / 13);        /* retícula del pie: 13 columnas */
	--ink: #000;
	--ink-20: rgba(0, 0, 0, .2);
	/* Solo familias web (Adobe Fonts) y las incluidas en el tema: nunca fuentes locales del ordenador, que pueden resolver el peso 400 a una negrita. */
	--font: "neue-haas-grotesk-text", "neue-haas-grotesk-display", "BDO Grotesk", "Helvetica Now Display", Arial, Helvetica, sans-serif;
	--font-display: "neue-haas-grotesk-display", "neue-haas-grotesk-text", "BDO Grotesk", "Helvetica Now Display", Arial, Helvetica, sans-serif;
	--track: -.02em;
	--fs-hero: 76px;
	--fs-mid: 20px;                                 /* tamaño intermedio (títulos de Servicios y ciudades de Contacto) */
	--hero-wrap: calc(var(--fs-hero) * .855);      /* alto de cada línea grande (interlineado .9 menos el margen negativo) */
	--hero-pitch: calc(var(--hero-wrap) + 5px);    /* de filete a filete: línea + margen 4px + 1px */
	--row-pitch: calc(var(--hero-pitch) / 4);       /* cuatro filas de la tabla = un filete del titular */
	--ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body { margin: 0; min-height: 100%; background: #fff; color: var(--ink); font-family: var(--font); font-weight: 400; font-size: 12px; line-height: 18px; letter-spacing: var(--track); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color .2s; }
body.home { overflow: hidden; height: 100%; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; font-weight: 400; font-size: inherit; line-height: inherit; }
strong, b { font-weight: 400; }
button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.muted, .label { color: var(--ink); opacity: .2; }
.reveal-wrap { overflow: hidden; }
.page-wrapper { position: relative; background: #fff; min-height: 100vh; }
body.home .page-wrapper { height: 100vh; }

/* ---------- Protección de imágenes: no se pueden arrastrar ni guardar con el botón derecho (el clic pasa al enlace o figura de debajo) ---------- */
img, canvas, video { -webkit-user-drag: none; user-drag: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
figure img, .media-hero img, .project-media img, .home-list img, .home-list video, .more-media img, .inline-img, .cover-img, .gallery-layer canvas { pointer-events: none; }
/* ---------- Utilidades ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.home-list, .home-seo { display: none; }

/* ---------- Retícula ---------- */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); margin: 0 var(--gutter); }
.line { height: 1px; background: var(--ink-20); margin: 6px var(--gutter) 0; position: relative; }
.line._2 { margin-top: 2px; }
.about-hero > .line._2 { margin-top: 4px; } /* en Estudio, cuatro filas de la tabla = un filete: el primer tramo del titular mide lo mismo que los demás, así la fila 01 no queda pegada al filete */
.line._3 { margin-top: 4px; }
.line._3.obys { margin-top: 6px; }
.line.obys2 { margin-top: 0; margin-bottom: 6px; }
.frame .line { margin-left: 0; margin-right: 0; }

/* ---------- Titulares grandes ---------- */
.hero-line { font-family: var(--font-display); color: var(--ink); text-align: center; letter-spacing: -.055em; text-transform: uppercase; margin-top: -.045em; font-size: var(--fs-hero); font-weight: 400; line-height: .9; white-space: nowrap; }
.hero-line.is-left { text-align: left; }
.hero-line sup.reg { font-size: .3em; line-height: 1; letter-spacing: 0; vertical-align: top; position: relative; top: .1em; margin-left: .04em; }
body.home .center-meta { visibility: hidden; } /* en la portada el nombre va en grande; la pastilla del logo solo en las demás páginas */
.hero-line.is-right { text-align: right; }
.hero-line.is-left-half { text-align: left; margin-left: 50%; }
.hero-line.is-right-half { text-align: right; margin-right: 50%; }
.hero-line.is-right-q { text-align: right; margin-right: 25%; }
a.hero-line { display: block; }
.hero-line sup { font-size: .32em; vertical-align: top; position: relative; top: .1em; letter-spacing: 0; }

/* ---------- Cabecera (retícula 12 col, y = 10px) ---------- */
.hero-grid { margin-top: var(--gutter); align-items: start; }
.left-meta, .center-meta, .right-meta { grid-row: 1; }
.left-meta { grid-column: 1 / 4; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: start; justify-content: space-between; margin-top: -5px; }
.center-meta { grid-column: 4 / 10; display: flex; justify-content: center; align-items: flex-start; }
.right-meta { grid-column: 10 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: start; margin-top: -5px; }
.nav-wrap { display: flex; gap: .5px; align-items: baseline; grid-column: 1 / 3; white-space: nowrap; }
.nav-item { position: relative; }
.nav-link { position: relative; color: var(--ink); }
.nav-item.is-about { margin-left: 1.5px; }
.nav-comma { line-height: 20px; }
.nav-underline { position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease-out); display: block; }
.nav-item.is-current .nav-underline, .nav-item:hover .nav-underline { transform: scaleX(1); }
.color-toggle { grid-column: 3; position: relative; display: flex; align-items: center; gap: 2px; cursor: pointer; white-space: nowrap; }
.mode-item { letter-spacing: -.01px; }
.mode-label { margin-right: 5px; }
/* Interruptor del Pong: píldora de 26 × 14 con un punto que se desliza; encendido = relleno de tinta con punto blanco */
.pong-toggle { gap: 0; }
.switch { position: relative; display: inline-block; width: 26px; height: 14px; border: 1px solid var(--ink); border-radius: 999px; box-sizing: border-box; background: transparent; transition: background .25s var(--ease-out); }
.switch-knob { position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); transition: transform .25s var(--ease-out), background .25s; }
.pong-toggle[aria-checked="true"] .switch { background: var(--ink); }
.pong-toggle[aria-checked="true"] .switch-knob { transform: translateX(12px); background: #fff; }
.mode-underline { position: absolute; left: 0; bottom: 2px; width: 32px; height: 1px; background: var(--ink); transition: .2s; }
.logo-wrap { height: 73px; margin-top: -5px; display: flex; align-items: flex-start; } /* 73 − 5 = 68: misma altura de cabecera, y la pastilla empieza en el borde del recorte sin cortarse */
.logo { display: inline-flex; align-items: center; height: 19px; margin-top: 0; padding: 0 9px 0 10px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); font-size: 11px; line-height: 17px; letter-spacing: -.01em; white-space: nowrap; }
.logo sup { font-size: 8px; line-height: 1; vertical-align: top; position: relative; top: -1px; margin-left: 0; letter-spacing: 0; }
.local-time { grid-column: 2; letter-spacing: var(--track); white-space: nowrap; display: flex; align-items: center; gap: 7px; position: relative; }
/* Saludo en muchos idiomas a la izquierda de la esfera de la hora: anclado por la derecha para que la hora no se mueva;
   cada 2,5 s cambia de idioma con un giro letra a letra (rotateX), como un titular animado */
.greet { position: absolute; right: 100%; top: 0; bottom: 0; margin-right: 9px; pointer-events: none; }
.greet-word { position: absolute; right: 0; top: 50%; transform: translateY(-50%); white-space: nowrap; perspective: 300px; }
.greet-l { display: inline-block; white-space: pre; backface-visibility: hidden; transform-origin: 50% 50% -20px; } /* giro con el eje detrás de la letra; en reposo, mismo tamaño que la hora */
.greet-l.in { animation: greet-in .4s ease both; }
.greet-l.out { animation: greet-out .4s ease both; }
@keyframes greet-in { 0% { opacity: 0; transform: rotateX(90deg); } 60% { opacity: 1; transform: rotateX(-10deg); } 100% { opacity: 1; transform: rotateX(0deg); } }
@keyframes greet-out { 0% { opacity: 1; transform: rotateX(0deg); } 60% { opacity: 0; transform: rotateX(-100deg); } 100% { opacity: 0; transform: rotateX(-90deg); } }
.local-time .globe { display: block; flex: none; }
.clock-sep { margin-right: 4px; }
.clock-time { font-variant-numeric: tabular-nums; }
.contact-link { grid-column: 3; justify-self: end; position: relative; }
.contact-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease-out); }
.contact-link:hover::after, .contact-link.is-current::after { transform: scaleX(1); }
.nav-home, .rights-end, .pill-btn.home-more { display: none; } /* solo en móvil: "Inicio" en el menú, los derechos al final de la portada y el "Ver más" de la lista */
.home-mark { display: flex; align-items: center; align-self: center; height: 18px; color: var(--ink); margin-right: 5px; }
.home-mark svg { display: block; width: 12px; height: 12px; }
.pill-btn { display: inline-flex; align-items: center; height: 19px; padding: 0 10px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); font-size: 11px; line-height: 17px; letter-spacing: -.01em; white-space: nowrap; background: none; cursor: pointer; transition: background .25s, color .25s; }
.pill-btn:hover { background: var(--ink); color: #fff; }
.menu-toggle { display: none; }
.mobile-menu { display: none; }

/* ---------- Home: escenario ---------- */
.hero-stage { position: relative; }
.hero-meta { position: fixed; top: calc(70.5px + var(--hero-wrap) * 2); z-index: 2; pointer-events: none; } /* por debajo de la galería y del panel */
.hero-meta.is-left { left: var(--gutter); }
.hero-meta.is-right { right: var(--gutter); text-align: right; }
.rights { position: fixed; right: var(--gutter); bottom: var(--gutter); left: 0; text-align: right; color: var(--ink-20); z-index: 2; pointer-events: none; }
.gallery-layer { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.gallery-canvas { position: absolute; inset: 0; pointer-events: none; }
.gallery-layer canvas { display: block; pointer-events: none; }
.focus-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .05); backdrop-filter: blur(0); opacity: 0; pointer-events: none; transition: opacity .6s .15s cubic-bezier(.4, 0, .2, 1); z-index: 100; }
.focus-panel { position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: rgba(255, 255, 255, .1); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); transform: translateX(100%); transition: transform .6s .15s cubic-bezier(.4, 0, .2, 1); z-index: 101; border-left: 1px solid rgba(255, 255, 255, .05); }
.focus-image-container { position: absolute; top: 50%; left: 75%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: flex-start; opacity: 0; transition: opacity .4s cubic-bezier(.4, 0, .2, 1); z-index: 102; pointer-events: none; width: fit-content; }
.focus-image-container img { height: 50vh; max-height: 50vh; width: auto; max-width: 40vw; object-fit: contain; display: block; }
.focus-info { display: flex; flex-direction: column; order: -1; margin: 0 0 12px; }
.focus-title { color: var(--ink); }
.focus-link { display: inline-block; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; margin-top: 2px; }
.focus-link:hover { opacity: .5; }
.focus-link:hover { text-decoration: underline; }
body.focus-active .focus-overlay { opacity: 1; pointer-events: auto; transition-duration: .5s; transition-delay: 0s; transition-timing-function: var(--ease-out); }
body.focus-active .focus-panel { transform: translateX(0); pointer-events: auto; transition-duration: .5s; transition-delay: 0s; transition-timing-function: var(--ease-out); }
body.focus-active .focus-image-container { opacity: 1; pointer-events: auto; transition-duration: .6s; transition-delay: .1s; transition-timing-function: var(--ease-out); }
.editorial-title-container { position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%); pointer-events: none; z-index: 50; width: 100%; padding: 0 24px; display: flex; justify-content: center; overflow: visible; }
.editorial-title { font-family: var(--font-display); font-size: var(--fs-hero); line-height: .86; letter-spacing: -.05em; font-weight: 400; color: var(--ink); text-align: center; text-transform: uppercase; white-space: nowrap; display: flex; justify-content: center; }
.editorial-title .char { display: inline-block; transform: translateY(100%); opacity: 0; will-change: transform; }
.tool-switcher { position: fixed; bottom: 11px; left: 50%; transform: translateX(-50%); z-index: 60; font-weight: 400; letter-spacing: -.01em; white-space: nowrap; display: flex; align-items: baseline; transition: opacity .4s, transform .4s; }
.switcher-item { cursor: pointer; }
.switcher-comma { margin-right: .3em; }
.switcher-underline { position: absolute; bottom: 1px; height: 1px; background: var(--ink); transition: .5s var(--ease-out); left: 0; width: 26px; }
.wireframe-toggle { position: fixed; left: var(--gutter); bottom: 11px; z-index: 1000; display: flex; gap: 3px; cursor: pointer; }
.wireframe-toggle .wf-solid { width: 26px; height: 15px; background: var(--ink); }
.wireframe-toggle .wf-outline { width: 26px; height: 15px; border: 1px solid var(--ink); opacity: .2; transition: opacity .3s; position: relative; background: linear-gradient(to top right, transparent calc(50% - .5px), var(--ink), transparent calc(50% + .5px)); }
.wireframe-toggle .wf-solid { transition: opacity .3s; }
.wireframe-toggle.is-active .wf-solid { opacity: .2; }
.wireframe-toggle.is-active .wf-outline { opacity: 1; }
body.focus-dim .tool-switcher { opacity: 0; transform: translate(-50%, 10px); pointer-events: none; }
body.focus-dim .wireframe-toggle { opacity: 0; pointer-events: none; }
.wireframe-toggle { transition: opacity .4s; }

/* ---------- Modo Índigo (fondo de color difuminado) ---------- */
.indigo-wrap { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .8s; }
.indigo-wrap .indigo-blur { position: absolute; inset: -10%; filter: blur(60px); background:
	radial-gradient(38% 45% at 18% 22%, rgba(75, 0, 130, .55), transparent 70%),
	radial-gradient(40% 40% at 78% 28%, rgba(60, 70, 220, .5), transparent 70%),
	radial-gradient(45% 45% at 62% 78%, rgba(120, 40, 200, .45), transparent 70%),
	radial-gradient(35% 40% at 22% 80%, rgba(0, 120, 255, .35), transparent 70%); }
body.mode-indigo .indigo-wrap { opacity: 1; }
body.mode-indigo .page-wrapper { background: transparent; }

/* ---------- Preloader / transición / cursor ---------- */
.preloader { z-index: 9999; position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.preloader-top, .preloader-bottom { z-index: 2; background: var(--ink); width: 100%; height: 50%; position: absolute; left: 0; }
.preloader-top { top: 0; }
.preloader-bottom { bottom: 0; }
.preloader-title, .preloader-percent { position: absolute; top: 50%; z-index: 3; color: #fff; letter-spacing: -.01em; opacity: 0; }
.preloader-title { left: var(--gutter); }
.preloader-percent { right: var(--gutter); }
.preloader-line { z-index: 3; opacity: 0; background: rgba(255, 255, 255, .3); height: 1px; position: absolute; top: 52.5%; left: var(--gutter); right: var(--gutter); overflow: hidden; }
.preloader-line-fill { background: #fff; width: 0; height: 100%; position: absolute; left: 0; top: 0; }
.preloader.is-done { display: none; }
.page-transition-overlay { z-index: 999999; width: 100vw; height: 100vh; background: var(--ink); position: fixed; top: 0; left: 0; transform: translate3d(0, -100%, 0); pointer-events: none; }
.page-transition-overlay .transition-text-wrap { position: absolute; top: 50%; left: var(--gutter); height: 20px; overflow: hidden; }
.page-transition-overlay .transition-text { color: #fff; letter-spacing: -.01em; transform: translateY(120%); }
.custom-cursor { position: fixed; top: 0; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--ink); border-radius: 50%; pointer-events: none; z-index: 99999; opacity: 0; transition: width .3s var(--ease-out), height .3s var(--ease-out), margin .3s var(--ease-out), background .3s, opacity .3s; }
.custom-cursor.is-visible { opacity: 1; }
.custom-cursor.is-link { width: 19px; height: 19px; margin: -9.5px 0 0 -9.5px; }
.custom-cursor.is-big { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.custom-cursor.is-cross { background: transparent; width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.custom-cursor.is-cross::before, .custom-cursor.is-cross::after { content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 1px; background: var(--ink); transform: translate(-50%, -50%) rotate(45deg); }
.custom-cursor.is-cross::after { transform: translate(-50%, -50%) rotate(-45deg); }
/* Pong (Estudio, Servicios, Contacto): el cursor es una pala y una bola rebota en los bordes de la ventana y en la pala */
.custom-cursor.is-paddle { width: 4px; height: 44px; margin: -22px 0 0 -2px; border-radius: 0; }
.custom-cursor.is-paddle.is-link { width: 4px; height: 58px; margin: -29px 0 0 -2px; }
.pong-ball { position: fixed; top: 0; left: 0; width: 16px; height: 16px; color: var(--ink); pointer-events: none; z-index: 9990; opacity: 0; transition: opacity .6s; will-change: transform; } /* la bola es el asterisco del favicon; cambia de color en cada rebote */
.pong-ball svg { display: block; width: 100%; height: 100%; }
.pong-ball.is-on { opacity: 1; }
@media (pointer: fine) and (min-width: 1200px) { body, a, button, .color-toggle, .switcher-item, .wireframe-toggle { cursor: none; } }

/* ---------- Página Estudio (y páginas interiores) ---------- */
.frame { margin: 0 var(--gutter); position: relative; display: flow-root; }
.archive-slider { display: none; } /* carrusel de proyectos de El Estudio: solo en móvil */
.archive-table { position: absolute; top: -17px; left: 0; width: calc(var(--col) * 3 + var(--gap) * 2); z-index: 20; }
.archive-header-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-bottom: 3px; line-height: 20px; }
.archive-header-row .label { grid-column: span 1; }
.archive-header-row .label:last-child { grid-column: 2 / 4; letter-spacing: -.01px; }
.archive-item { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); height: var(--row-pitch); line-height: calc(var(--row-pitch) - 1px); margin: 0; padding: 0; align-items: start; }
.archive-item-number { grid-column: 1; }
.archive-item-project { grid-column: 2 / 4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.archive-item-line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink-20); }
.archive-item-line.hidden { opacity: 0; }
.archive-hover-line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left center; z-index: 3; pointer-events: none; }
.archive-item a { position: absolute; inset: 0; }
.archive-hover-layer { position: fixed; left: calc(7.5px + 25vw); top: 0; width: calc(8.33333vw - 10.8333px); pointer-events: none; overflow: hidden; clip-path: inset(50% 50% 50% 50%); z-index: 500; }
.archive-hover-layer img { width: 100%; aspect-ratio: 1440 / 1800; object-fit: cover; display: block; }
.side-hover-layer { left: calc(3.33333px + 66.6667vw); }

.visual-block { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); margin: 0 var(--gutter); }
.visual-embed { grid-column: 7 / 13; grid-row: 1; aspect-ratio: 705 / 528; background: var(--ink); margin-top: var(--gutter); position: relative; overflow: hidden; }
.visual-embed canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.visual-text { grid-column: 7 / 10; grid-row: 2; }
.visual-text .text-label { margin-top: 10px; line-height: 1.05em; }
.visual-text .text-body { width: 370px; margin-top: 1px; line-height: 1.05em; }
.visual-text .text-body p + p { margin-top: 1.05em; }
.text-label { opacity: .2; }
.text-block { margin: 43px var(--gutter) 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }
.text-block .text-inner { grid-column: 7 / 10; }
.text-block .text-label { margin-top: 10px; line-height: 1.05em; }
.text-block .text-body { width: 370px; margin-top: 1px; line-height: 1.05em; }
.text-block .text-body p + p { margin-top: 1.05em; }
.section-gap { height: 250px; }
.section-gap--small { height: 120px; }
.service-num-big { height: 68px; display: flex; align-items: center; }
.text-tags { opacity: .2; margin-top: 1.05em; }

.side-projects { margin-top: 45px; }
.side-header, .side-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); margin: 4px var(--gutter) 0; position: relative; }
.side-header { margin-top: 0; }
.side-number { grid-column: 6 / 8; grid-row: 1; }
.side-name { grid-column: 7 / 11; grid-row: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-link { grid-column: 11 / 13; grid-row: 1; text-align: right; color: var(--ink); opacity: .2; transition: opacity .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-header .side-link { letter-spacing: -.05em; }
.side-row:hover .side-link { opacity: 1; }
.side-row .side-line { position: absolute; top: 0; left: calc(var(--col) * 5 + var(--gap) * 5); right: 0; height: 1px; background: var(--ink-20); }
.side-row .side-hover-line { position: absolute; top: 0; left: calc(var(--col) * 5 + var(--gap) * 5); right: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left center; z-index: 3; pointer-events: none; }
.side-row.is-last .side-line-last { position: absolute; bottom: -1px; left: calc(var(--col) * 5 + var(--gap) * 5); right: 0; height: 1px; background: var(--ink-20); }
.side-row a.side-cover { position: absolute; inset: 0; }

.footer-meta { display: grid; grid-template-columns: repeat(13, 1fr); gap: var(--gap); margin: 65px var(--gutter) 0; }
.footer-menu { grid-column: 4 / 6; display: flex; flex-direction: column; }
.footer-socials { grid-column: 7 / 9; display: flex; flex-direction: column; }
.footer-typo { grid-column: 10 / 12; }
.footer-rights { grid-column: 12 / 14; align-self: end; justify-self: end; width: max-content; white-space: nowrap; text-align: right; opacity: .2; margin-top: 59px; }
.footer-meta .label { display: block; margin-top: -3px; }
.footer-meta .label:first-child { margin-top: 0; }
.footer-link { margin-top: -3px; display: block; transition: opacity .3s; }
.footer-link:hover { opacity: .2; }
.footer-text { margin-top: -3px; }
.footer-typo .label + .footer-text + .label { margin-top: 24px; }
.footer-mail { text-decoration: underline; text-underline-offset: 2px; }
.bottom-embed { position: relative; height: 50vw; margin-top: 60px; overflow: hidden; }
.bottom-embed canvas { display: block; width: 100%; height: 100%; }
.bottom-embed .sphere-wash { position: absolute; inset: 0; background: #fff; opacity: .4; pointer-events: none; transition: opacity .6s; }
body.mode-indigo .bottom-embed .sphere-wash { opacity: 0; }
.bottom-embed canvas { filter: grayscale(1); transition: filter .6s; }
body.mode-indigo .bottom-embed canvas { filter: none; }

/* ---------- Tablas de proyectos (página Proyectos, Notas) ---------- */
.table-full { margin: 40px var(--gutter) 0; }
.table-full .row { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); padding: 0 0 1px; }
.table-full .row + .row { margin-top: -.55px; }
.table-full .row .row-line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink-20); }
.table-full .row.is-head { margin-bottom: 3px; }
.table-full .row.is-head .row-line { display: none; }
.table-full .c-num { grid-column: 1; }
.table-full .c-name { grid-column: 2 / 6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-full .c-services { grid-column: 6 / 10; color: var(--ink); opacity: .2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-full .c-client { grid-column: 10 / 13; text-align: right; opacity: .2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-full .row:hover .c-services, .table-full .row:hover .c-client { opacity: 1; }
.table-full .row a.cover { position: absolute; inset: 0; }
.table-full .row .hover-line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left center; z-index: 3; pointer-events: none; }
.hover-layer { position: fixed; left: calc(3.33333px + 66.6667vw); top: 0; width: calc(8.33333vw - 10.8333px); pointer-events: none; overflow: hidden; clip-path: inset(50% 50% 50% 50%); z-index: 500; }
.hover-layer img { width: 100%; aspect-ratio: 1440 / 1800; object-fit: cover; display: block; }

/* ---------- Ficha de proyecto (estructura de la web anterior, lenguaje nuevo) ---------- */
.cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-meta { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); margin: 43px var(--gutter) 0; align-items: start; }
.project-meta .meta-col { grid-column: span 2; }
.project-meta .meta-col.is-work { grid-column: 5 / 9; }
.project-meta .meta-col.is-intro { grid-column: 9 / 13; }
.project-meta .meta-col.is-intro p { margin: 0; }
.project-meta .label { display: block; }
/* Imágenes y vídeos de los proyectos: siempre enteros, con su proporción natural (sin recortes). */
.media-hero { margin: 30px var(--gutter) 0; overflow: hidden; }
.media-hero img, .media-hero video, .media-hero iframe { width: 100%; height: auto; display: block; border: 0; }
.media-hero iframe { aspect-ratio: 16 / 9; }
.project-body { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); margin: 76px var(--gutter) 0; }
.project-body .text-inner { grid-column: 7 / 12; }
.project-body .text-body p { margin: 0 0 12px; }
.project-body .text-body ul, .project-body .text-body ol { margin: 0 0 12px; }
.project-body .text-body li { padding-left: 14px; position: relative; }
.project-body .text-body li::before { content: "—"; position: absolute; left: 0; }
.project-body .text-body a { text-decoration: underline; }
.project-media { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px var(--gap); margin: 100px var(--gutter) 0; align-items: start; }
.project-media figure { margin: 0; overflow: hidden; }
.project-media figure img, .project-media figure video { width: 100%; height: auto; display: block; }
.more-media img, .more-media video { width: 100%; height: 100%; object-fit: cover; display: block; } /* las tarjetas de "Más proyectos" sí van recortadas, todas iguales */
.project-media .media-full { grid-column: 1 / 13; }
.project-media .media-half { grid-column: span 6; }
/* Fotos verticales: se ven enteras, sin recorte. A media anchura toman su proporción natural; a toda anchura y en la cabecera van centradas en las seis columnas centrales. */
.project-media .media-half.is-portrait { aspect-ratio: auto; align-self: start; }
.project-media .media-full.is-portrait { grid-column: 4 / 10; aspect-ratio: auto; }
.media-hero.is-portrait { aspect-ratio: auto; width: calc(50% - var(--gap) / 2); margin-left: auto; margin-right: auto; }
.project-media figure.is-portrait img, .media-hero.is-portrait img { height: auto; object-fit: contain; }
.more-projects { margin: 120px var(--gutter) 0; }
.more-head { display: flex; justify-content: space-between; align-items: baseline; }
.more-head .footer-link { margin-top: 0; }
.more-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); margin-top: 20px; }
.more-card { grid-column: span 4; display: block; }
.more-media { margin: 0; aspect-ratio: 460 / 368; overflow: hidden; }
.more-media img, .more-media video { transition: transform .8s var(--ease-out); }
.more-card:hover .more-media img, .more-card:hover .more-media video { transform: scale(1.03); }
.more-title { margin-top: 10px; }
.more-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Servicios (título grande a la izquierda, texto y acordeón en la mitad derecha) ---------- */
.mid { font-size: var(--fs-mid); line-height: 1.15; letter-spacing: -.03em; }
.services-hero { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); margin: 60px var(--gutter) 0; align-items: start; }
.services-hero .services-intro { grid-column: 7 / 10; }
.services-intro .intro-text { width: 370px; max-width: 100%; margin: 0; line-height: 1.05em; }
.services-intro .intro-text p + p { margin-top: 1.05em; }
.services-intro .cta-link { display: inline-block; margin-top: 18px; text-decoration: underline; text-underline-offset: 2px; transition: opacity .3s; }
.services-intro .cta-link:hover { opacity: .2; }
.service-list { margin: -17px var(--gutter) 0; position: relative; } /* cabecera a la altura de "Número:" en Estudio; el primer filete cae en y84 */
.service-header { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); margin-bottom: 3px; line-height: 20px; }
.service-header .label:nth-child(1) { grid-column: 1; }
.service-header .label:nth-child(2) { grid-column: 2 / 7; }
.service-header .label:nth-child(3) { grid-column: 7 / 13; text-align: right; }
.service-row { position: relative; margin: 0; padding: 0; }
.service-row .row-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink-20); }
.service-row .hover-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left center; z-index: 3; pointer-events: none; }
.service-row-end { position: relative; height: 1px; }
.service-row-end .row-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink-20); }
/* Fila de servicio: número en la primera columna, nombre a partir de la segunda y las pastillas ocupando todo el
   espacio que queda a la derecha (antes iban encajadas en las seis últimas columnas y, con muchas, una caía sola a
   una segunda línea). */
.service-head { display: flex; gap: var(--gap); align-items: center; width: 100%; height: calc(var(--row-pitch) * 2); padding: 1px 0 0; text-align: left; } /* dos filas de la tabla por servicio */
.service-num { flex: 0 0 var(--col); font-variant-numeric: tabular-nums; }
.service-name { flex: none; display: flex; align-items: center; gap: 10px; }
.service-swatch { display: block; flex: none; width: 8px; height: 8px; }
.service-title { font-size: var(--fs-mid); line-height: 1.1; letter-spacing: -.03em; margin: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.service-tags { flex: 1 1 0; min-width: 0; margin-left: 24px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: center; gap: 3px; max-height: 31px; overflow: hidden; }
.service-arrow { flex: none; width: 11px; height: 13px; margin-left: 4px; transition: transform .6s var(--ease-out); }
.service-row.is-open .service-arrow { transform: rotate(180deg); }
.chip { display: inline-flex; align-items: center; flex: none; height: 14px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 9px; line-height: 14px; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; }
.service-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-out); }
.service-row.is-open .service-panel { grid-template-rows: 1fr; }
.service-panel-inner { min-height: 0; overflow: hidden; }
.service-body { max-width: 470px; margin-left: calc(var(--col) + var(--gap)); padding: 6px 0 16px; line-height: 1.05em; }
.service-body p { margin: 0 0 1.05em; }
.no-js:not(.has-accordion) .service-panel { grid-template-rows: 1fr; }
.services-foot { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); margin: 130px var(--gutter) 0; }
.services-foot .foot-col.is-awards { grid-column: 1 / 6; }
.services-foot .foot-col.is-clients { grid-column: 7 / 13; }
.services-foot .label { display: block; }
.services-foot p { margin: 0; max-width: 560px; }
.services-foot .foot-sub { opacity: .2; }
.big-mail-block { margin: 110px var(--gutter) 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: end; }
.big-mail-block .label { grid-column: 1 / 7; display: block; }
.big-mail-block .big-mail { grid-column: 7 / 13; font-family: var(--font-display); font-size: 36px; line-height: 1; letter-spacing: -.045em; text-decoration: underline; text-underline-offset: .14em; text-decoration-thickness: 1px; transition: opacity .3s; white-space: nowrap; }
.big-mail-block .big-mail:hover { opacity: .2; }

/* ---------- Contacto (índice: etiquetas entre dos filetes, campos de trabajo y contacto en grande y fino) ---------- */
.index-block { margin: 44px var(--gutter) 0; }
section.index-block:first-of-type { margin-top: 6px; } /* el primer filete cae en y84, como en el resto de páginas */
.index-block .line { margin: 0; }
.index-labels { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); height: 20px; padding-top: 1px; }
.index-labels .label { grid-column: 1 / 7; }
.index-labels .label.is-right-col { grid-column: 7 / 13; }
.index-cols { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); margin-top: 10px; }
.index-text { grid-column: 1 / 5; max-width: 400px; }
.index-text.is-right-col { grid-column: 7 / 11; }
.index-text p { margin: 0; }
.index-text p + p { margin-top: 1em; }
.index-text a { text-decoration: underline; text-underline-offset: 2px; }
.big-text { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-hero); line-height: .98; letter-spacing: -.045em; margin-top: 14px; text-transform: none; }
.index-block.is-fields { margin-top: 6px; }
.index-block.is-fields .line.about-load-fade { margin: 0; }
.fields-frame .line { margin: 6px 0 0; }
.fields-frame .line._2 { margin-top: 2px; }
.fields-frame .line._3 { margin-top: 4px; }
.fields-frame .hero-line .inline-img-link { display: inline-block; vertical-align: 0; margin: 0 .06em; line-height: 0; }
.fields-frame .hero-line .inline-img { display: inline-block; width: .93em; height: .73em; object-fit: cover; vertical-align: 0; } /* .73em = altura de las mayúsculas de BDO Grotesk: la foto ocupa exactamente la caja de la línea */
.inline-img-link { display: inline-block; vertical-align: -.03em; margin: 0 .03em; transition: opacity .3s; }
.inline-img-link:hover { opacity: .6; }
.inline-img { display: inline-block; width: .86em; height: .68em; object-fit: cover; }
.big-link { transition: opacity .3s; }
.big-link:hover { opacity: .2; }
.contact-big .big-link { display: block; }
.contact-big-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gap); }
.contact-big-row .big-link { display: inline-block; }
.contact-phones { display: flex; flex-direction: column; align-items: flex-end; }

/* ---------- Notas ---------- */
.note-body { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); margin: 43px var(--gutter) 0; }
.note-body .text-inner { grid-column: 4 / 10; }
.note-body .text-body { line-height: 1.35; font-size: 14px; letter-spacing: -.01em; }
.note-body .text-body p, .note-body .text-body ul, .note-body .text-body ol, .note-body .text-body blockquote, .note-body .text-body figure { margin: 0 0 1.2em; }
.note-body .text-body h2, .note-body .text-body h3 { font-size: 20px; line-height: 1.1; letter-spacing: -.03em; margin: 2em 0 .6em; }
.note-body .text-body img { width: 100%; height: auto; }
.note-body .text-body a { text-decoration: underline; }
.note-body .text-body li { padding-left: 14px; position: relative; }
.note-body .text-body li::before { content: "—"; position: absolute; left: 0; }
.note-body .text-body blockquote { border-left: 1px solid var(--ink); padding-left: 14px; }

/* ---------- Página interior genérica ---------- */
.page-body { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); margin: 43px var(--gutter) 120px; }
.page-body .text-inner { grid-column: 4 / 10; line-height: 1.35; }
.page-body .text-inner p, .page-body .text-inner ul { margin: 0 0 1.2em; }
.page-body .text-inner h2 { margin: 2em 0 .6em; }
.page-body .text-inner a { text-decoration: underline; }

/* ---------- Pie simple (páginas sin cúpula) ---------- */
.footer-simple { padding-bottom: 60px; }

/* ---------- Barra de administración de WordPress ---------- */
.admin-bar .hero-meta { top: calc(102.5px + var(--hero-wrap) * 2); }
.admin-bar .preloader { top: 32px; }

/* ---------- Estados de carga (GSAP los anima) ---------- */
.js .about-line { transform: translateY(120%); }
.js .about-load-reveal { opacity: 0; transform: translateY(40px); }
.js .about-load-fade { opacity: 0; }
.js .about-scroll-reveal { opacity: 0; transform: translateY(40px); }
.js .row-reveal .archive-item-number, .js .row-reveal .archive-item-project, .js .row-reveal .side-number, .js .row-reveal .side-name, .js .row-reveal .c-num, .js .row-reveal .c-name, .js .row-reveal .c-services, .js .row-reveal .c-client { clip-path: inset(110% 0 0 0); transform: translateY(6px); }
.js .row-reveal .archive-item-line, .js .row-reveal .side-line, .js .row-reveal .row-line { clip-path: inset(0 100% 0 0); }
.js .row-reveal .side-link { opacity: 0; }
.js .hero-line.home-line { transform: translateY(120%); }
.js .logo-wrap .logo { transform: translateY(120%); }
.no-js .about-line, .no-js .about-load-reveal, .no-js .about-load-fade, .no-js .about-scroll-reveal { opacity: 1; transform: none; }

/* ---------- Móvil / tablet (< 1200px): versión simplificada, mismo lenguaje ---------- */
@media (max-width: 1199px) {
	:root { --fs-hero: clamp(32px, 9vw, 66px); }
	body.home { overflow: auto; height: auto; }
	body.home .page-wrapper { height: auto; }
	.left-meta { grid-column: 1 / 10; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 2px 16px; }
	.center-meta, .local-time, .color-toggle { display: none; }
	.home-mark { margin-right: 6px; }
	.right-meta { grid-column: 10 / 13; display: flex; justify-content: flex-end; }
	.hero-line { white-space: normal; }
	body.home .hero-stage { margin-top: 20px; } .about-hero { margin-top: 14px; } /* algo más de aire entre el menú y el titular: el primer filete queda a 20 px del menú en portada y en Estudio */
	.hero-line.is-left-half, .hero-line.is-right-half, .hero-line.is-right-q { margin-left: 0; margin-right: 0; }
	.hero-meta { display: none; } /* "Desde 2018" y "Palma de Mallorca" solo en escritorio */
	.nav-home { display: contents; }
	.nav-home .nav-item { margin-left: 0; }
	.nav-home + .nav-item { margin-left: 1.5px; }
	.gallery-layer, .editorial-title-container, .tool-switcher, .wireframe-toggle, .indigo-wrap, .custom-cursor, .pong-ball, .archive-hover-layer, .hover-layer { display: none !important; }
	.rights { display: none; }
	.rights.rights-end { display: block; position: static; padding: 40px var(--gutter) 20px; text-align: left; pointer-events: auto; }
	.home-list { display: block; margin: 30px var(--gutter) 0; }
	.home-list .row { display: grid; grid-template-columns: 56px 1fr; gap: var(--gap); padding: 8px 0 12px; border-bottom: 1px solid var(--ink-20); }
	.home-list .row img, .home-list .row video { grid-column: 1 / -1; width: 100%; height: auto; margin-top: 6px; }
	.home-list .row video { aspect-ratio: 16 / 9; object-fit: cover; display: block; background: rgba(0, 0, 0, .05); }
	.home-list .row-services { display: block; opacity: .4; }
	.home-list.is-paged .row.is-more { display: none; } /* de tres en tres: el botón "Ver más" va mostrando los siguientes (la clase la pone el JS) */
	.home-list.is-paged .row.is-more.is-shown { display: grid; }
	.home-list.is-paged + .home-more { display: inline-flex; margin: 16px var(--gutter) 0; }
	.home-list.is-paged + .home-more.is-done { display: none; }
	.home-seo { display: block; margin: 40px var(--gutter) 0; }
	.home-seo .text-body { margin-top: 6px; line-height: 1.35; }
	.home-seo .text-body p + p { margin-top: 1em; }
	.home-seo a { text-decoration: underline; }
	.about-hero { display: flex; flex-direction: column; }
	.reveal-wrap { overflow: visible; }
	.archive-table { display: none; } /* en móvil la lista de nombres se sustituye por el carrusel con portadas */
	.archive-slider { display: block; order: 99; margin: 28px calc(var(--gutter) * -1) 0; }
	.archive-slider-head { display: flex; justify-content: space-between; margin: 0 var(--gutter) 8px; }
	.archive-slider-head .slider-hint { opacity: .4; }
	.archive-slider-track { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); padding: 0 var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.archive-slider-track::-webkit-scrollbar { display: none; }
	.archive-slider-track::after { content: ""; flex: 0 0 1px; } /* aire tras la última tarjeta */
	.archive-slider .slide { flex: 0 0 76%; scroll-snap-align: start; display: block; color: inherit; text-decoration: none; }
	.archive-slider .slide-media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: rgba(0, 0, 0, .05); }
	.archive-slider .slide-media img, .archive-slider .slide-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
	.archive-slider .slide-meta { display: grid; grid-template-columns: 30px 1fr; gap: 6px; padding-top: 8px; line-height: 16px; }
	.archive-slider .slide-services { display: block; opacity: .4; }
	.archive-slider-foot { display: flex; align-items: center; gap: 12px; margin: 14px var(--gutter) 0; }
	.archive-slider .slider-count { flex: none; font-variant-numeric: tabular-nums; }
	.archive-slider .slider-bar { position: relative; flex: 1; height: 1px; background: var(--ink-20); }
	.archive-slider .slider-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--ink); }
	.archive-table { position: static; width: auto; margin: 28px 0 0; order: 99; }
	.archive-header-row { grid-template-columns: 56px 1fr; }
	.archive-header-row .label:last-child { grid-column: 2; }
	.archive-item { grid-template-columns: 56px 1fr; height: auto; line-height: 18px; padding: 5px 0 6px; } /* en móvil el paso de la tabla ya no depende del titular (que es mucho más pequeño) */
	.archive-item-project { grid-column: 2; white-space: normal; }
	.archive-item-line.hidden { opacity: 1; }
	.visual-block { display: block; }
	.visual-embed { display: none; }
	.visual-text .text-body, .text-block .text-body, .project-intro .text-body, .project-body .text-body, .service-body { width: auto; }
	.text-block { display: block; margin: 28px var(--gutter) 0; }
	.section-gap { height: 60px; }
	.section-gap--small { height: 40px; }
	.side-header, .side-row { grid-template-columns: 56px 1fr; }
	.side-number { grid-column: 1; }
	.side-name { grid-column: 2; white-space: normal; }
	.side-link { display: none; }
	.side-row .side-line, .side-row .side-hover-line, .side-row.is-last .side-line-last { left: 0; }
	.footer-meta { display: block; margin-top: 40px; }
	.footer-menu, .footer-socials, .footer-typo { margin-bottom: 24px; }
	.footer-rights { text-align: left; margin-top: 0; }
	.bottom-embed { display: none; }
	.table-full .row { grid-template-columns: 56px 1fr; }
	.table-full .c-name { grid-column: 2; white-space: normal; }
	.table-full .c-services, .table-full .c-client { display: none; }
	.project-meta { display: block; margin-top: 24px; }
	.project-meta .meta-col { margin-bottom: 14px; }
	.media-hero { aspect-ratio: auto; }
	.media-hero img { height: auto; }
	.project-body { margin-top: 40px; }
	.project-media { display: block; margin-top: 40px; }
	.project-media figure + figure { margin-top: 16px; }
	.project-media .media-full, .project-media .media-half { aspect-ratio: auto; }
	.project-media img { height: auto; }
	.more-projects { margin-top: 60px; }
	.more-grid { display: block; }
	.more-card + .more-card { margin-top: 24px; }
	.project-body, .note-body, .page-body { display: block; }
	.services-hero, .contact-visual, .services-foot, .big-mail-block, .contact-message { display: block; }
	.services-hero { margin-top: 24px; }
	.services-intro .intro-text { width: auto; }
	.service-list { margin: 40px var(--gutter) 0; }
	.service-header { grid-template-columns: 56px 1fr; }
	.service-header .label:nth-child(3) { display: none; }
	.service-head { display: grid; grid-template-columns: 56px 1fr; height: auto; line-height: 18px; padding: 8px 0; }
	.service-name { grid-column: 2; }
	.service-title { white-space: normal; }
	.service-tags { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; margin: 6px 0 0; max-height: none; overflow: visible; } /* todas las pastillas visibles, en tantas líneas como haga falta */
	.service-body { margin-left: 54px; }
	.services-foot { margin-top: 60px; }
	.services-foot .foot-col + .foot-col { margin-top: 24px; }
	.big-mail-block { margin-top: 60px; }
	.big-mail-block .big-mail { display: block; margin-top: 6px; font-size: clamp(20px, 6vw, 36px); white-space: normal; word-break: break-all; }
	.index-block { margin-top: 40px; }
	section.index-block:first-of-type { margin-top: 6px; }
	.index-labels { display: flex; justify-content: space-between; }
	.index-cols { display: block; }
	.index-text.is-right-col { margin-top: 16px; }
	.big-text { font-size: clamp(28px, 8.4vw, 56px); }
	.contact-big-row { flex-direction: column; }
	.js .about-line, .js .about-load-reveal, .js .about-load-fade, .js .about-scroll-reveal, .js .hero-line.home-line, .js .logo-wrap .logo { opacity: 1; transform: none; }
	.js .row-reveal .archive-item-number, .js .row-reveal .archive-item-project, .js .row-reveal .side-number, .js .row-reveal .side-name, .js .row-reveal .c-num, .js .row-reveal .c-name, .js .row-reveal .side-link, .js .row-reveal .archive-item-line, .js .row-reveal .side-line, .js .row-reveal .row-line { clip-path: none; transform: none; opacity: 1; }
	.js .row-reveal .side-link { opacity: .2; }
	.preloader, .page-transition-overlay { display: none; }
}
@media (max-width: 782px) { .admin-bar .preloader { top: 46px; } }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
	.js .about-line, .js .about-load-reveal, .js .about-load-fade, .js .about-scroll-reveal, .js .hero-line.home-line, .js .logo-wrap .logo, .editorial-title .char { opacity: 1 !important; transform: none !important; }
}