/* ============================================================================
   La Bombilla Creativa — hoja de estilos del tema.

   El movimiento se hace con animaciones ligadas al scroll del propio navegador
   (`animation-timeline`), que corren en el hilo del compositor y no cuestan
   javascript. Donde el navegador todavía no las soporta, un observador de
   intersección revela los bloques igual: se pierde el matiz, nunca el contenido.

   Reglas que este proyecto ya ha aprendido a la mala:
   · los hijos de una rejilla llevan `min-width:0` o el texto largo la desborda
   · las alturas de pantalla completa van en `dvh`, no en `%`
   · nada de `!important` para desempatar colores: se sube la especificidad
   ========================================================================= */

:root {
	--tinta:      #0b0c0e;
	--carbon:     #14161a;
	--grafito:    #1e2127;
	--hueso:      #f7f6f3;
	--blanco:     #ffffff;
	--amarillo:   #fddb06;
	--amarillo-h: #ffe64a;
	--gris:       #8b8f97;

	--fuente: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* El contenedor crece con la pantalla en vez de quedarse clavado: en un
	   monitor de 2.000px, 1.360px dejaban dos palmos de vacío a cada lado. El
	   tope alto evita que las líneas de texto se hagan ilegibles de tan largas
	   —para eso están los `max-width` en ch de cada párrafo. */
	--ancho: min(92vw, 1680px);
	--aire: clamp(1.25rem, 4vw, 3.5rem);
	--banda: clamp(4.5rem, 11vh, 9rem);
	--radio: 4px;

	--suave: cubic-bezier(.22, 1, .36, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	font-family: var(--fuente);
	font-weight: 500;
	font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
	line-height: 1.65;
	color: var(--hueso);
	background: var(--tinta);
	-webkit-font-smoothing: antialiased;
	/* `clip`, no `hidden`. `overflow-x: hidden` convierte el cuerpo en un
	   contenedor de scroll y con eso deja de funcionar TODO el `position:
	   sticky` de la página: ni galerías ancladas, ni columna fija, ni naipes
	   apilados. `clip` recorta igual y no crea contenedor. */
	overflow-x: clip;
}

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

h1, h2, h3, h4 {
	font-weight: 900;
	line-height: .95;
	letter-spacing: -.035em;
	margin: 0;
	text-wrap: balance;
}

.envoltura { width: min(100% - var(--aire) * 2, var(--ancho)); margin-inline: auto; }
.estrecho  { width: min(100% - var(--aire) * 2, 74ch); margin-inline: auto; }

.seccion { padding-block: var(--banda); position: relative; }
.claro { background: var(--hueso); color: var(--tinta); }
.claro .antetitulo { color: #6b6f76; }

/* Titulillo de sección: pequeño, en versales, con el punto amarillo delante. */
.antetitulo {
	display: inline-flex; align-items: center; gap: .6rem;
	font-size: .72rem; font-weight: 700; letter-spacing: .22em;
	text-transform: uppercase; color: var(--gris); margin-bottom: 1.5rem;
}
/* Una raya corta, no un punto de color. El puntito antes del rótulo en versales
   es de los adornos que más delatan una plantilla automática. */
.antetitulo::before {
	content: ''; width: 22px; height: 2px; background: currentColor;
	flex: none; opacity: .55;
}

/* Sobre fotografía el gris del antetítulo no aguanta: en el hero va en blanco. */
.hero .antetitulo { color: #e8eaee; text-shadow: 0 1px 12px rgba(11,12,14,.7); }

.titular   { font-size: clamp(2.1rem, 6.2vw, 4.6rem); }
.titularon { font-size: clamp(2.6rem, 9vw, 7.5rem); }
.destaca   { color: var(--amarillo); }

.entradilla {
	font-size: clamp(1.05rem, 1rem + .5vw, 1.4rem);
	line-height: 1.55; color: #c9ccd2; font-weight: 500; max-width: 60ch;
}
.claro .entradilla { color: #4a4e56; }

/* ---------------------------------------------------------------- botones */

.boton {
	display: inline-flex; align-items: center; gap: .7rem;
	padding: .95rem 1.7rem; border: 0; border-radius: 100px;
	background: var(--amarillo);
	font: inherit; font-weight: 800; font-size: .95rem;
	letter-spacing: -.01em; text-decoration: none; cursor: pointer;
	transition: background .25s var(--suave), transform .25s var(--suave);
}
/* El color del texto se fija con especificidad, no con !important: cualquier
   regla genérica de enlaces perdería el pulso contra estas dos clases. */
.boton, a.boton, .claro a.boton { color: var(--tinta); }
.boton:hover { background: var(--amarillo-h); transform: translateY(-2px); }
.boton svg { width: 1em; height: 1em; }

.boton--linea { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.boton--linea, a.boton--linea { color: var(--hueso); }
.claro a.boton--linea { color: var(--tinta); }
.boton--linea:hover { background: var(--amarillo); box-shadow: none; }
.claro a.boton--linea:hover, a.boton--linea:hover { color: var(--tinta); }

/* Enlace que se subraya al pasar, de izquierda a derecha. */
.enlace {
	text-decoration: none; font-weight: 700; position: relative;
	padding-bottom: 2px; white-space: nowrap;
}
.enlace::after {
	content: ''; position: absolute; inset: auto 0 0 0; height: 1.5px;
	background: currentColor; transform: scaleX(0); transform-origin: left;
	transition: transform .35s var(--suave);
}
.enlace:hover::after { transform: scaleX(1); }

/* ------------------------------------------------------------- cabecera */

.cabecera {
	position: fixed; inset: 0 0 auto 0; z-index: 60;
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; padding: 1rem var(--aire);
	transition: background .4s var(--suave), backdrop-filter .4s var(--suave),
		box-shadow .4s var(--suave), padding .4s var(--suave);
}
/* Al bajar, la barra se vuelve un cristal translúcido en vez de un bloque opaco. */
.cabecera.posada {
	background: rgba(11, 12, 14, .62);
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .07);
	padding-block: .65rem;
}
@supports not (backdrop-filter: blur(1px)) {
	.cabecera.posada { background: rgba(11, 12, 14, .95); }
}

.marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--hueso); }
.marca svg { width: 40px; height: 40px; flex: none; }
.marca b {
	font-weight: 900; font-size: .95rem; line-height: 1.05;
	letter-spacing: -.02em; max-width: 7.5em;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav a {
	text-decoration: none; font-size: .9rem; font-weight: 600; color: var(--hueso);
	opacity: .82; transition: opacity .2s, color .2s;
}
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; color: var(--amarillo); }
.nav a.boton { opacity: 1; color: var(--tinta); }
.nav a.boton:hover { color: var(--tinta); }
@media (max-width: 900px) { .nav { display: none; } }

.hamburguesa {
	display: none; width: 46px; height: 46px; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .1); cursor: pointer;
	align-items: center; justify-content: center; flex-direction: column; gap: 5px;
	backdrop-filter: blur(8px); z-index: 70;
}
.hamburguesa span {
	display: block; width: 19px; height: 2px; background: var(--hueso); border-radius: 2px;
	transition: transform .35s var(--suave), opacity .2s;
}
.abierto .hamburguesa span:first-child { transform: translateY(3.5px) rotate(45deg); }
.abierto .hamburguesa span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }
@media (max-width: 900px) { .hamburguesa { display: flex; } }

/* Menú de móvil: 100dvh, que con el `%` la barra del navegador lo deja corto. */
.velo {
	position: fixed; inset: 0; z-index: 65;
	display: flex; flex-direction: column; justify-content: center; gap: .4rem;
	padding: 6rem var(--aire) 2.5rem;
	background: rgba(11, 12, 14, .96);
	backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
	height: 100vh; height: 100dvh;
	opacity: 0; visibility: hidden;
	transition: opacity .4s var(--suave), visibility .4s;
	overflow-y: auto;
}
.abierto .velo { opacity: 1; visibility: visible; }
.velo a {
	text-decoration: none; font-size: clamp(1.9rem, 8vw, 2.8rem); font-weight: 900;
	letter-spacing: -.035em; line-height: 1.25; color: var(--hueso);
	opacity: 0; transform: translateY(14px);
	transition: opacity .5s var(--suave), transform .5s var(--suave), color .2s;
}
.abierto .velo a { opacity: 1; transform: none; }
.velo a:nth-child(1) { transition-delay: .06s; } .velo a:nth-child(2) { transition-delay: .1s; }
.velo a:nth-child(3) { transition-delay: .14s; } .velo a:nth-child(4) { transition-delay: .18s; }
.velo a:nth-child(5) { transition-delay: .22s; } .velo a:nth-child(6) { transition-delay: .26s; }
.velo a:hover { color: var(--amarillo); }
.velo__pie {
	margin-top: auto; padding-top: 2rem; font-size: .95rem; color: var(--gris);
	display: grid; gap: .35rem;
}
.velo__pie a { font-size: 1rem; font-weight: 600; }

/* ------------------------------------------------------------------ hero */

.hero {
	position: relative; min-height: 100svh;
	display: grid; align-items: end;
	padding: 8rem var(--aire) clamp(3rem, 8vh, 6rem);
	overflow: clip; isolation: isolate;
}
.hero__fondo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__fondo img {
	position: absolute; left: 0; top: -12%;
	width: 100%; height: 124%; object-fit: cover; object-position: center 40%;
}
/* La foto se aleja despacio mientras se baja: parallax sin javascript. */
/* Dos velos: uno de abajo arriba para asentar el texto y otro general para
   que la fotografía no se coma la lectura. */
/* Tres capas. La horizontal es la que de verdad salva la lectura: la fotografía
   de plato tiene zonas muy claras justo donde cae el titular, y sin ella el
   texto blanco se pierde sobre la loza. */
.hero__velo {
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(to right, rgba(11, 12, 14, .92) 0%, rgba(11, 12, 14, .72) 34%, rgba(11, 12, 14, .18) 68%, transparent 100%),
		linear-gradient(to top, rgba(11, 12, 14, .95) 3%, rgba(11, 12, 14, .45) 40%, rgba(11, 12, 14, .22) 70%),
		radial-gradient(120% 90% at 82% 10%, rgba(253, 219, 6, .14), transparent 58%);
}
@media (max-width: 760px) {
	.hero__velo { background:
		linear-gradient(to top, rgba(11, 12, 14, .96) 6%, rgba(11, 12, 14, .68) 45%, rgba(11, 12, 14, .42) 100%); }
}

.hero__contenido { position: relative; max-width: 20ch; }
/* El titular se dimensiona para que en un portátil de 900px de alto quepan
   también los botones y el pie: en un hero a pantalla completa, lo que se sale
   por abajo no existe. */
.hero h1 {
	font-size: clamp(2.6rem, 7.4vw, 6.2rem);
	line-height: .9; letter-spacing: -.045em; max-width: 13ch;
}
@media (min-height: 940px) { .hero h1 { font-size: clamp(2.6rem, 8.4vw, 7.4rem); } }
@media (min-height: 960px) { .hero-marca h1 { font-size: clamp(2.5rem, 7.4vw, 6.8rem); } }
.hero h1 em { font-style: normal; color: var(--amarillo); }
.hero .entradilla { margin-top: 1.6rem; max-width: 46ch; color: #dfe1e5; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }

.hero__pie {
	position: relative; margin-top: clamp(2.5rem, 7vh, 4.5rem);
	display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
	gap: 1.5rem; padding-top: 1.4rem;
	border-top: 1px solid rgba(255, 255, 255, .16);
	font-size: .82rem; letter-spacing: .04em; color: #b7bac1;
}
.hero__pie strong { color: var(--hueso); font-weight: 700; }

/* Ratón bajando: un guiño, no un cartel. */
.bajar { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; }
.bajar i {
	display: block; width: 1px; height: 34px; background: rgba(255, 255, 255, .35);
	position: relative; overflow: hidden;
}
.bajar i::after {
	content: ''; position: absolute; inset: 0; background: var(--amarillo);
	animation: cae 2.1s var(--suave) infinite;
}
@keyframes cae { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* ------------------------------------------------------- revelado general */

[data-revelar] {
	opacity: 0; transform: translateY(28px);
	transition: opacity .8s var(--suave), transform .8s var(--suave);
}
[data-revelar].visible { opacity: 1; transform: none; }
[data-revelar][data-retraso="1"] { transition-delay: .09s; }
[data-revelar][data-retraso="2"] { transition-delay: .18s; }
[data-revelar][data-retraso="3"] { transition-delay: .27s; }
[data-revelar][data-retraso="4"] { transition-delay: .36s; }

/* Titular que se descubre línea a línea, como si subiera de debajo del papel. */
.desvela { display: block; overflow: hidden; }
.desvela > span {
	display: block; transform: translateY(105%);
	transition: transform 1s var(--suave);
}
.visible .desvela > span, .desvela.visible > span { transform: none; }

/* ------------------------------------------------------------ marquesina */

.marquesina {
	overflow: hidden; padding-block: 1.6rem;
	border-block: 1px solid rgba(255, 255, 255, .1);
	background: var(--carbon);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquesina__cinta { display: flex; width: max-content; animation: rueda 46s linear infinite; }
.marquesina:hover .marquesina__cinta { animation-play-state: paused; }
@keyframes rueda { to { transform: translateX(-50%); } }
.marquesina__cinta span {
	display: inline-flex; align-items: center; gap: 2.4rem;
	padding-inline: 1.2rem; font-size: clamp(.95rem, 2vw, 1.25rem);
	font-weight: 800; letter-spacing: -.02em; color: #7d818a; white-space: nowrap;
}
.marquesina__cinta span::after {
	content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--amarillo); opacity: .6;
}

/* -------------------------------------------------- escena de servicios */

/* La columna de la izquierda se queda quieta mientras la lista pasa por delante.
   Es la sección que explica el 360º sin tener que decir la palabra tres veces. */
.escena { position: relative; }
.escena__rejilla {
	display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
	gap: clamp(2rem, 6vw, 6rem); align-items: start;
}
.escena__fija { position: sticky; top: 18vh; min-width: 0; }
.escena__lista { display: grid; gap: clamp(1rem, 2vw, 1.4rem); min-width: 0; }
@media (max-width: 900px) {
	.escena__rejilla { grid-template-columns: 1fr; }
	.escena__fija { position: static; }
}

.servicio {
	position: relative; min-width: 0;
	padding: clamp(1.5rem, 3vw, 2.3rem);
	border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radio);
	background: linear-gradient(140deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	overflow: hidden;
	transition: border-color .45s var(--suave), transform .45s var(--suave), background .45s var(--suave);
}
.claro .servicio { border-color: rgba(11, 12, 14, .12);
	background: linear-gradient(140deg, rgba(11, 12, 14, .035), rgba(11, 12, 14, .01)); }
.servicio::before {
	content: ''; position: absolute; inset: auto auto 0 0; width: 100%; height: 2px;
	background: var(--amarillo); transform: scaleX(0); transform-origin: left;
	transition: transform .6s var(--suave);
}
.servicio:hover { transform: translateY(-3px); border-color: rgba(253, 219, 6, .5); }
.servicio:hover::before { transform: scaleX(1); }

.servicio__cabeza { display: flex; align-items: baseline; gap: 1rem; }
.servicio__n { display: none; }
.servicio h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.servicio__gancho { margin: .8rem 0 0; font-weight: 700; font-size: 1.05rem; color: var(--hueso); }
.claro .servicio__gancho { color: var(--tinta); }
.servicio p.servicio__texto { margin: .7rem 0 0; color: #b9bcc3; font-size: .98rem; }
.claro .servicio p.servicio__texto { color: #5a5e66; }
.servicio ul {
	list-style: none; margin: 1.2rem 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: .5rem;
}
.servicio li {
	font-size: .78rem; font-weight: 600; padding: .35rem .8rem;
	border-radius: 100px; background: rgba(255, 255, 255, .07); color: #cbced4;
}
.claro .servicio li { background: rgba(11, 12, 14, .06); color: #4a4e56; }

/* -------------------------------------------------------- cifra / dato */

.dato {
	position: relative; overflow: clip;
	background: var(--amarillo); color: var(--tinta);
}
.dato__rejilla {
	display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	gap: clamp(1.5rem, 5vw, 5rem); align-items: center;
}
@media (max-width: 820px) { .dato__rejilla { grid-template-columns: 1fr; } }
.dato__cifra {
	font-size: clamp(6rem, 22vw, 16rem); font-weight: 900; line-height: .8;
	letter-spacing: -.06em; min-width: 0;
}
.dato__cifra sup { font-size: .28em; vertical-align: super; letter-spacing: -.02em; }
.dato h2 { font-size: clamp(1.7rem, 4vw, 3.1rem); }
.dato p { font-size: clamp(1rem, 1.8vw, 1.2rem); max-width: 46ch; margin: 1.1rem 0 0; color: #3a3206; }

/* --------------------------------------------------- galería fotográfica */

/* Se arrastra en horizontal con encaje. La calidad de la foto es el argumento
   de venta, así que se ve grande y sin recortes raros. */
.galeria { padding-block: var(--banda) calc(var(--banda) * .7); }
.galeria__pista {
	display: flex; gap: clamp(.8rem, 1.6vw, 1.4rem);
	overflow-x: auto; scroll-snap-type: x mandatory;
	padding: 0 var(--aire) 1.6rem;
	scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent;
	overscroll-behavior-x: contain;
}
.galeria__pista::-webkit-scrollbar { height: 5px; }
.galeria__pista::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-radius: 4px; }
.foto {
	position: relative; flex: none; scroll-snap-align: center;
	width: clamp(255px, 42vw, 560px); aspect-ratio: 4 / 5;
	border-radius: var(--radio); overflow: hidden; background: var(--grafito);
}
.foto:nth-child(even) { aspect-ratio: 4 / 3; align-self: center; }
.foto img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.1s var(--suave), filter .6s var(--suave);
}
.foto:hover img { transform: scale(1.05); }
.foto figcaption {
	position: absolute; inset: auto 0 0 0; padding: 2.6rem 1.2rem 1.1rem;
	background: linear-gradient(to top, rgba(11, 12, 14, .88), transparent);
	font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: var(--blanco);
}

/* ------------------------------------------------------------- trabajos */

/* Tres columnas fijas en escritorio: con `auto-fit` salían cuatro y la tarjeta
   ancha, que ocupa dos, dejaba un hueco vacío en la primera fila. */
.casos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
@media (min-width: 1000px) { .casos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.caso {
	position: relative; min-width: 0; display: block; text-decoration: none;
	border-radius: var(--radio); overflow: hidden; background: var(--grafito);
	aspect-ratio: 4 / 3; isolation: isolate;
}
.caso--ancho { grid-column: span 2; aspect-ratio: 16 / 9; }
@media (max-width: 760px) { .caso--ancho { grid-column: span 1; aspect-ratio: 4 / 3; } }
.caso img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
	transition: transform 1.2s var(--suave), filter .5s var(--suave);
	filter: saturate(.92);
}
.caso::after {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(to top, rgba(11, 12, 14, .92) 6%, rgba(11, 12, 14, .25) 55%, rgba(11, 12, 14, .05));
	transition: opacity .5s;
}
.caso:hover img { transform: scale(1.06); filter: saturate(1.05); }
.caso__texto {
	position: absolute; inset: auto 0 0 0; padding: clamp(1.1rem, 2.4vw, 1.9rem);
	display: grid; gap: .35rem;
}
.caso__sector {
	font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
	color: var(--amarillo);
}
.caso h3 { font-size: clamp(1.25rem, 2.4vw, 1.9rem); color: var(--blanco); }
.caso__flecha {
	position: absolute; top: 1.1rem; right: 1.1rem;
	width: 40px; height: 40px; border-radius: 50%;
	background: rgba(255, 255, 255, .14); backdrop-filter: blur(8px);
	display: grid; place-items: center; color: var(--blanco);
	opacity: 0; transform: translate(-6px, 6px); transition: all .4s var(--suave);
}
.caso:hover .caso__flecha { opacity: 1; transform: none; background: var(--amarillo); color: var(--tinta); }
.caso__flecha svg { width: 15px; height: 15px; }

/* -------------------------------------------------------------- proceso */

.proceso { display: grid; gap: 0; counter-reset: paso; }
.paso {
	display: grid; grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr);
	gap: clamp(1rem, 3vw, 2.5rem); align-items: start;
	padding-block: clamp(1.8rem, 4vw, 2.8rem);
	border-top: 1px solid rgba(255, 255, 255, .12);
}
.claro .paso { border-color: rgba(11, 12, 14, .12); }
.paso:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.claro .paso:last-child { border-color: rgba(11, 12, 14, .12); }
.paso__n {
	font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-weight: 900; line-height: 1;
	letter-spacing: -.04em; color: var(--amarillo); min-width: 0;
}
.paso h3 { font-size: clamp(1.3rem, 2.6vw, 2rem); }
.paso p { margin: .7rem 0 0; color: #b9bcc3; max-width: 62ch; }
.claro .paso p { color: #5a5e66; }
@media (max-width: 620px) { .paso { grid-template-columns: 1fr; gap: .5rem; } }

/* ------------------------------------------------------------- sectores */

/* Son SEIS sectores: con `auto-fit` salían cinco columnas y una tarjeta
   huérfana en la segunda fila, con medio panel vacío al lado. Dos filas de
   tres cuadran exactas y no hay que tocar nada si mañana son seis otra vez. */
.sectores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
	background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radio); overflow: hidden; }
@media (min-width: 900px) { .sectores { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sectores { grid-template-columns: 1fr; } }
.sector { min-height: 100%; }
.claro .sectores { background: rgba(11, 12, 14, .12); border-color: rgba(11, 12, 14, .12); }
.sector {
	min-width: 0; padding: clamp(1.4rem, 2.6vw, 2rem); background: var(--tinta);
	text-decoration: none; display: grid; gap: .6rem; align-content: start;
	transition: background .35s var(--suave);
}
.claro .sector { background: var(--hueso); }
.sector:hover { background: var(--carbon); }
.claro .sector:hover { background: #efeeea; }
.sector h3 { font-size: 1.35rem; }
.sector p { margin: 0; font-size: .92rem; color: #a4a8b0; }
.claro .sector p { color: #63676e; }
.sector--destacado { background: var(--amarillo); color: var(--tinta); }
.claro .sector--destacado { background: var(--amarillo); }
.sector--destacado:hover, .claro .sector--destacado:hover { background: var(--amarillo-h); }
.sector--destacado p, .claro .sector--destacado p { color: #4a3f05; }
.sector__marca {
	font-size: .66rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--amarillo);
}
.sector--destacado .sector__marca { color: #6b5a06; }

/* ------------------------------------------------------------------ faq */

.faq { display: grid; gap: 0; }
.faq details {
	border-top: 1px solid rgba(255, 255, 255, .13); padding-block: 1.4rem;
}
.claro .faq details { border-color: rgba(11, 12, 14, .13); }
.faq details:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, .13); }
.claro .faq details:last-of-type { border-color: rgba(11, 12, 14, .13); }
.faq summary {
	cursor: pointer; list-style: none; display: flex; gap: 1.2rem;
	align-items: flex-start; justify-content: space-between;
}
.faq summary::-webkit-details-marker { display: none; }
.faq h2 {
	font-size: clamp(1.1rem, 2.2vw, 1.5rem); font-weight: 800; letter-spacing: -.025em;
	line-height: 1.3; margin: 0; min-width: 0;
}
.faq summary i {
	flex: none; width: 26px; height: 26px; border-radius: 50%; margin-top: .15rem;
	background: rgba(255, 255, 255, .1); position: relative; transition: background .3s, transform .4s var(--suave);
}
.claro .faq summary i { background: rgba(11, 12, 14, .08); }
.faq summary i::before, .faq summary i::after {
	content: ''; position: absolute; inset: 50% 7px auto; height: 2px; background: currentColor;
	transform: translateY(-50%); border-radius: 2px;
}
.faq summary i::after { transform: translateY(-50%) rotate(90deg); transition: transform .4s var(--suave); }
.faq details[open] summary i { background: var(--amarillo); color: var(--tinta); }
.faq details[open] summary i::after { transform: translateY(-50%) rotate(0); }
.faq details > p { margin: 1rem 0 0; max-width: 72ch; color: #b9bcc3; }
.claro .faq details > p { color: #5a5e66; }

/* -------------------------------------------------------------- contacto */

.contacto__rejilla {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 5rem);
}
@media (max-width: 900px) { .contacto__rejilla { grid-template-columns: 1fr; } }
.contacto__datos { display: grid; gap: 1.6rem; align-content: start; min-width: 0; }
.contacto__dato { display: grid; gap: .2rem; min-width: 0; }
.contacto__dato span {
	font-size: .7rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--gris);
}
.contacto__dato a, .contacto__dato p {
	font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 700; margin: 0;
	text-decoration: none; letter-spacing: -.02em; overflow-wrap: anywhere;
}
.contacto__dato a:hover { color: var(--amarillo); }

/* Formulario propio, sin estilos de plugin encima. */
.formulario { display: grid; gap: 1rem; min-width: 0; }
.formulario label { display: grid; gap: .4rem; font-size: .8rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: var(--gris); min-width: 0; }
.formulario input, .formulario textarea, .formulario select {
	font: inherit; font-weight: 500; color: inherit;
	padding: .9rem 1rem; border-radius: var(--radio);
	border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04);
	width: 100%; min-width: 0; transition: border-color .25s, background .25s;
}
.claro .formulario input, .claro .formulario textarea, .claro .formulario select {
	border-color: rgba(11, 12, 14, .18); background: rgba(11, 12, 14, .03);
}
.formulario input:focus, .formulario textarea:focus, .formulario select:focus {
	outline: none; border-color: var(--amarillo); background: rgba(253, 219, 6, .06);
}
.formulario textarea { min-height: 8rem; resize: vertical; }
.formulario .aviso { font-size: .78rem; font-weight: 500; letter-spacing: 0;
	text-transform: none; color: var(--gris); line-height: 1.5; }
.formulario .aviso a { color: inherit; }

/* ------------------------------------------------------------------ blog */

.entradas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem); }
.entrada { min-width: 0; display: grid; gap: .9rem; text-decoration: none; align-content: start; }
.entrada__foto { border-radius: var(--radio); overflow: hidden; aspect-ratio: 3 / 2; background: var(--grafito); }
.entrada__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--suave); }
.entrada:hover .entrada__foto img { transform: scale(1.05); }
.entrada time { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.entrada h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.15; }
.entrada:hover h3 { color: var(--amarillo); }
.entrada p { margin: 0; font-size: .93rem; color: #a4a8b0; }
.claro .entrada p { color: #63676e; }

/* Artículo suelto y páginas de texto. */
.articulo { padding-top: clamp(7rem, 14vh, 10rem); }
.articulo__cuerpo { font-size: 1.08rem; line-height: 1.75; }
.articulo__cuerpo > * + * { margin-top: 1.15em; }
.articulo__cuerpo h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-top: 2.2em; }
.articulo__cuerpo h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin-top: 1.8em; }
.articulo__cuerpo a { color: var(--amarillo); }
.claro .articulo__cuerpo a { color: #8a7503; }
.articulo__cuerpo img { border-radius: var(--radio); margin-block: 1.6em; }
.articulo__cuerpo blockquote {
	margin: 1.8em 0; padding-left: 1.4rem; border-left: 3px solid var(--amarillo);
	font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em;
}
.articulo__cuerpo ul, .articulo__cuerpo ol { padding-left: 1.3em; }
.articulo__cuerpo li + li { margin-top: .4em; }

/* -------------------------------------------------------------------- pie */

.pie { background: var(--carbon); padding-block: clamp(3rem, 8vh, 5rem) 2rem; }
.pie__rejilla {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
	gap: clamp(1.8rem, 4vw, 3rem);
}
.pie__rejilla > div { min-width: 0; }
.pie h4 { font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
	color: var(--gris); margin-bottom: 1rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pie a { text-decoration: none; font-size: .95rem; color: #c3c6cc; }
.pie a:hover { color: var(--amarillo); }
.pie__texto { margin: 0; font-size: .95rem; color: #a4a8b0; line-height: 1.6; }
.pie__logo svg { width: 52px; height: 52px; color: var(--amarillo); }
.redes { display: flex; gap: .6rem; margin-top: 1.2rem; }
.redes a {
	width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
	background: rgba(255, 255, 255, .07); transition: background .3s, color .3s;
}
.redes a:hover { background: var(--amarillo); color: var(--tinta); }
.redes svg { width: 17px; height: 17px; fill: currentColor; }
.pie__base {
	margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .1);
	display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; justify-content: space-between;
	font-size: .82rem; color: #82868e;
}
.pie__base a { font-size: .82rem; }

/* ------------------------------------------------------------ accesorios */

.saltar {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--amarillo); color: var(--tinta); padding: .8rem 1.2rem; font-weight: 800;
}
.saltar:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; border-radius: 2px; }

/* ------------------------------------------------- movimiento: los frenos */

/* Quien pide menos movimiento no ve ninguno, y las capturas de verificación
   tampoco: si no, salen a mitad de animación y mienten sobre el diseño. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important; animation-iteration-count: 1 !important;
		transition-duration: .001ms !important; scroll-behavior: auto !important;
	}
	[data-revelar] { opacity: 1; transform: none; }
	.desvela > span { transform: none; }
}
/* El hero mide una pantalla. En una captura la «pantalla» es la ventana entera
   del navegador sin ventana —a veces de 3.400px—, y el titular se iría al fondo
   del folio. Con altura fija la captura enseña lo que de verdad se ve. */
body.is-shot .hero { min-height: 860px; height: 860px; }
/* Igual con el hero de marca: en una captura la «pantalla» es la ventana
   entera del navegador sin ventana, y `100svh` le daba 7.600px de amarillo. */
body.is-shot .marco-hero { min-height: 880px; }
body.is-shot .ficha__portada { min-height: 720px; }
body.is-shot [data-revelar] { opacity: 1 !important; transform: none !important; transition: none !important; }
body.is-shot .desvela > span { transform: none !important; transition: none !important; }
body.is-shot .marquesina__cinta { animation: none; }
body.is-shot .hero__fondo img { animation: none; transform: scale(1.12); }
body.is-shot .velo a { opacity: 1; transform: none; }
body.is-shot * { transition: none !important; }

/* ================================================== galería anclada (scroll H)

   La sección se queda quieta mientras la galería recorre todas las fotos de
   izquierda a derecha; cuando se acaban, la página sigue bajando. El avance va
   atado al scroll con `animation-timeline`, así que corre en el compositor: no
   hay ni un listener de scroll moviendo píxeles.

   Sin soporte (Safari viejo) no se ancla nada y queda la tira arrastrable de
   siempre: se pierde el efecto, nunca las fotos. */

.anclada__lienzo { position: relative; }

.anclada__marco {
	display: flex; align-items: center; overflow: hidden;
	padding-block: clamp(2rem, 6vh, 4rem);
}

.anclada__pista {
	display: flex; gap: clamp(.9rem, 1.8vw, 1.6rem);
	padding-inline: var(--aire); width: max-content;
	overflow-x: auto; scroll-snap-type: x mandatory;   /* modo de reserva */
	overscroll-behavior-x: contain;
}

.anclada .foto { scroll-snap-align: center; }

/* Contador de avance: una barrita que se llena según se recorre la galería. */
.anclada__barra {
	position: absolute; inset: auto var(--aire) clamp(1rem, 3vh, 2rem) var(--aire);
	height: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; display: none;
}
.anclada__barra i {
	display: block; height: 100%; width: 100%; background: var(--amarillo);
	transform: scaleX(0); transform-origin: left;
}

/* El anclaje lo enciende el javascript poniendo `.activa`: así funciona en
   cualquier navegador, no solo en los que tienen `animation-timeline`. Si el
   navegador SÍ lo tiene, se añade `.nativa` y el avance lo lleva el CSS —que
   corre en el compositor y es más suave. Si no, lo mueve el javascript. */
.anclada.activa .anclada__marco {
	position: sticky; top: 0; height: 100svh;
	padding-top: clamp(64px, 8vh, 88px); box-sizing: border-box;
}
.anclada.activa .anclada__pista {
	overflow: visible; scroll-snap-type: none; will-change: transform;
}
.anclada.activa .anclada__barra { display: block; }

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.anclada.activa.nativa .anclada__lienzo { view-timeline-name: --recorrido; view-timeline-axis: block; }
		.anclada.activa.nativa .anclada__pista {
			animation: anclada-correr linear both;
			animation-timeline: --recorrido;
			animation-range: contain 0% contain 100%;
		}
		@keyframes anclada-correr { to { transform: translateX(calc(-100% + 100vw)); } }

		.anclada.activa.nativa .anclada__barra i {
			animation: anclada-barra linear both;
			animation-timeline: --recorrido;
			animation-range: contain 0% contain 100%;
		}
		@keyframes anclada-barra { to { transform: scaleX(1); } }
	}
}

/* En captura y en móvil no se ancla: en una foto fija el anclaje sale a medias,
   y en un móvil robar el scroll vertical se paga en abandonos. */
body.is-shot:not(.con-anclaje) .anclada .anclada__marco { position: static; height: auto; }
body.is-shot:not(.con-anclaje) .anclada .anclada__pista { animation: none; overflow-x: auto; }
body.is-shot:not(.con-anclaje) .anclada .anclada__lienzo { height: auto !important; }
body.is-shot.con-anclaje .anclada .anclada__pista { transition: none; }

/* --------------------------------------------- anclada, sentido contrario

   Misma mecánica, al revés: la tira arranca por el final y el scroll la trae
   hacia el principio. Se usa para que la segunda página que lleva galería no
   se sienta como la repetición de la primera. */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
		.anclada--contraria.activa.nativa .anclada__pista { animation-name: anclada-volver; }
		@keyframes anclada-volver {
			from { transform: translateX(calc(-100% + 100vw)); }
			to   { transform: translateX(0); }
		}
		.anclada--contraria.activa .anclada__barra i { transform-origin: right; }
	}
}
/* Sin anclaje, la tira contraria arranca donde arrancan todas: al principio. */
.anclada--contraria .anclada__pista { direction: ltr; }

/* ================================================== pasos apilados (vertical)

   Cada paso se queda pegado arriba y el siguiente se le monta encima, un poco
   desplazado, como una baraja que se va cerrando. Es la misma idea que la
   galería anclada pero en el otro eje: sirve para una secuencia corta —cuatro
   pasos, no diez— donde importa el orden. */

.apilada { display: grid; gap: 0; }

.apilada .naipe {
	background: var(--carbon);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--radio);
	padding: clamp(1.6rem, 4vw, 3rem);
	margin-bottom: 1rem;
}
/* Sobre fondo claro la tarjeta va en blanco puro, no en hueso: si tuviera el
   mismo color que la sección, al montarse una encima de otra no se vería nada
   —que es justo lo único que este efecto tiene que conseguir. */
.claro .apilada .naipe {
	background: var(--blanco); border-color: rgba(11, 12, 14, .1);
	box-shadow: 0 -1px 0 rgba(11, 12, 14, .04), 0 -18px 40px -24px rgba(11, 12, 14, .35);
}
.apilada .naipe { box-shadow: 0 -18px 40px -26px rgba(0, 0, 0, .8); }

.naipe__cabeza { display: flex; align-items: baseline; gap: clamp(1rem, 2.5vw, 2rem); }
.naipe__n {
	font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 900; line-height: 1;
	letter-spacing: -.04em; color: var(--amarillo); flex: none;
}
.naipe h3 { font-size: clamp(1.3rem, 3vw, 2.2rem); min-width: 0; }
.naipe p { margin: 1rem 0 0; color: #b9bcc3; max-width: 62ch; }
.claro .apilada .naipe p { color: #5a5e66; }

@media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
	.apilada .naipe {
		position: sticky;
		/* Cada uno para un poco más abajo que el anterior: así se ve el borde
		   del que hay debajo y se entiende que son una secuencia, no un salto. */
		top: calc(14vh + var(--i) * 14px);
		margin-bottom: clamp(1rem, 3vh, 2rem);
	}
	@supports (animation-timeline: view()) {
		/* El que queda debajo se apaga y encoge un pelo mientras lo tapan. */
		.apilada .naipe {
			animation: naipe-al-fondo linear both;
			animation-timeline: view();
			animation-range: exit-crossing 0% exit-crossing 100%;
			transform-origin: top center;
		}
		@keyframes naipe-al-fondo {
			to { transform: scale(.94); filter: brightness(.72); }
		}
	}
}

body.is-shot .apilada .naipe { position: static; animation: none; transform: none; filter: none; }

/* ============================================================================
   REDISEÑO DE PORTADA — más amarillo, más agencia

   La primera versión salió oscura y con foto de plato a sangre: parecía la web
   de un restaurante, no la de quien se los hace. Aquí el amarillo pasa a ser el
   fondo, no el adorno, y la fotografía se cuenta en mosaico —muchas casas a la
   vez— en vez de una sola imagen gigante.
   ========================================================================= */

.amarilla { background: var(--amarillo); color: var(--tinta); }
.amarilla .antetitulo { color: #7a6a06; }
.amarilla .antetitulo::before { background: var(--tinta); }
.amarilla .entradilla { color: #4a4106; }
.amarilla a.boton { background: var(--tinta); color: var(--amarillo); }
.amarilla a.boton:hover { background: #23262c; }
.amarilla a.boton--linea { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.amarilla a.boton--linea:hover { background: var(--tinta); color: var(--amarillo); box-shadow: none; }

/* ------------------------------------------------------- hero de la marca */

.marco-hero {
	position: relative; overflow: clip; isolation: isolate;
	padding: clamp(6rem, 13vh, 9rem) 0 clamp(2.5rem, 6vh, 4rem);
	min-height: 100svh; display: grid; align-content: center;
}

.hero-marca {
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
@media (max-width: 980px) { .hero-marca { grid-template-columns: 1fr; } }

.hero-marca h1 {
	/* Medida pensada para que en un portátil de 900px de alto quepan también
	   los botones y el marcador: lo que se sale por abajo no existe. */
	font-size: clamp(2.5rem, 6.3vw, 5.6rem);
	line-height: .88; letter-spacing: -.05em; max-width: 11ch;
}
.hero-marca h1 em { font-style: normal; position: relative; white-space: nowrap; }
/* La palabra clave va subrayada a mano alzada, no en otro color: sobre amarillo
   el contraste de color no existe, y una raya sí se ve. */
.hero-marca h1 em::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: .06em; height: .085em;
	background: var(--tinta); border-radius: 2px;
	transform: scaleX(0); transform-origin: left;
	animation: subraya 1.1s var(--suave) .55s both;
}
@keyframes subraya { to { transform: scaleX(1); } }
body.is-shot .hero-marca h1 em::after { animation: none; transform: scaleX(1); }

.hero-marca .entradilla { margin-top: 1.3rem; max-width: 46ch; font-weight: 600; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); }
.hero-marca__acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* Ficha de datos del hero: tres cifras, en negativo sobre el amarillo. */
.marcador {
	display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3.5rem);
	margin-top: clamp(1.8rem, 4.5vh, 3rem);
	padding-top: 1.3rem; border-top: 2px solid rgba(11, 12, 14, .22);
}
.marcador div { min-width: 0; }
.marcador b { display: block; font-size: clamp(1.6rem, 3.2vw, 2.5rem); font-weight: 900; letter-spacing: -.045em; line-height: 1; }
.marcador span { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: #6d5f05; margin-top: .45rem; }

/* ------------------------------------------- mosaico de fotos que oscila */

/* Tres columnas que suben a distinta velocidad mientras se baja. El desfase es
   lo que da la sensación de profundidad; con todas a la misma velocidad no se
   nota nada. Va con `animation-timeline`, o sea en el compositor. */

.mosaico {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(.6rem, 1.2vw, 1rem);
	height: clamp(380px, 56vh, 620px); overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
/* Las columnas también desbordan su hueco: sin ese margen, al oscilar dejaban
   un vacío arriba o abajo que la máscara no llegaba a tapar. */
.mosaico__col {
	display: grid; gap: clamp(.6rem, 1.2vw, 1rem); align-content: start;
	padding-block: 8%;
}
.mosaico figure {
	margin: 0; border-radius: var(--radio); overflow: hidden;
	background: rgba(11, 12, 14, .12); aspect-ratio: 3 / 4;
}
.mosaico img { width: 100%; height: 100%; object-fit: cover; }
.mosaico .col--2 figure { aspect-ratio: 1; }
.mosaico .col--3 figure { aspect-ratio: 4 / 5; }
@media (max-width: 620px) { .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 380px; } }

/* El desfase entre columnas lo mueve el motor de scroll del tema (lbc.js).
   Antes iba con `animation-timeline`, que solo tienen Chrome y Edge: en Safari
   y Firefox la portada se quedaba completamente quieta. */
.mosaico__col { will-change: transform; }
.mosaico .col--1 { --deriva: -11; }
.mosaico .col--2 { --deriva:   7; }
.mosaico .col--3 { --deriva: -16; }

body.is-shot .mosaico__col { animation: none; transform: none; }

/* Arranque escalonado de las columnas: la del medio entra un pelo después. */


/* ------------------------------------------------------- aparición de foto */

/* La foto no se desvanece: se descubre de abajo arriba, como si se revelara
   en el líquido. Un fundido cualquiera lo hace todo el mundo. */
/* Ojo con el selector: `.aparece` puede ser el propio elemento observado (una
   tarjeta) o ir DENTRO de él (la foto de un artículo). La clase `.visible` sólo
   se pone en el observado, así que hay que contemplar los dos casos o las fotos
   anidadas se quedan recortadas a cero para siempre. */
.aparece { clip-path: inset(0 0 100% 0); transition: clip-path 1.15s var(--suave); }
.aparece.visible, .visible .aparece { clip-path: inset(0 0 0 0); }
.aparece img { transform: scale(1.14); transition: transform 1.5s var(--suave); }
.aparece.visible img, .visible .aparece img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
	.aparece { clip-path: none; }
	.aparece img { transform: none; }
}
body.is-shot .aparece { clip-path: none !important; }
body.is-shot .aparece img { transform: none !important; }

/* ------------------------------------------------------ franja de titular */

/* Un titular a sangre, del ancho de la pantalla, que corta la página en dos.
   Sirve para dar respiro entre bloques densos sin meter otra foto. */
.tajo { padding-block: clamp(3.5rem, 10vh, 7rem); overflow: clip; }
.tajo h2 {
	font-size: clamp(2.4rem, 9.5vw, 9rem); line-height: .88; letter-spacing: -.055em;
}
/* La raya va POR DEBAJO de los descendentes: con `bottom: .08em` cruzaba la
   «j» de «elijan» por la mitad. El hueco se lo damos con un relleno propio, que
   al ser la última línea no choca con nada. */
.tajo .subraya { position: relative; display: inline-block; padding-bottom: .14em; }
.tajo .subraya::after {
	content: ''; position: absolute; inset: auto 0 0 0; height: .075em;
	background: var(--amarillo); border-radius: 2px;
}


/* ------------------------------- lo que cambia al estar sobre el amarillo */

/* La barra superior es transparente arriba del todo. Con el hero amarillo, su
   texto blanco desaparecía: sobre amarillo hay que ir en tinta. */
body.es-portada .cabecera:not(.posada) .marca,
body.es-portada .cabecera:not(.posada) .nav a { color: var(--tinta); }
body.es-portada .cabecera:not(.posada) .nav a:hover { color: #5c4f04; }
body.es-portada .cabecera:not(.posada) .nav a.boton,
body.es-portada .cabecera:not(.posada) .nav a.boton:hover { background: var(--tinta); color: var(--amarillo); }
body.es-portada .cabecera:not(.posada) .hamburguesa { background: rgba(11, 12, 14, .12); }
body.es-portada .cabecera:not(.posada) .hamburguesa span { background: var(--tinta); }

/* Las tarjetas de servicio sobre amarillo: borde y relleno en tinta, no en
   blanco translúcido (sobre amarillo el blanco no se ve). */
.amarilla .servicio {
	border-color: rgba(11, 12, 14, .18);
	background: linear-gradient(140deg, rgba(11, 12, 14, .06), rgba(11, 12, 14, .02));
}
.amarilla .servicio:hover { border-color: rgba(11, 12, 14, .55); }
.amarilla .servicio::before { background: var(--tinta); }
.amarilla .servicio h3, .amarilla .servicio__gancho { color: var(--tinta); }
.amarilla .servicio p.servicio__texto { color: #4a4106; }
.amarilla .servicio li { background: rgba(11, 12, 14, .1); color: #3f3805; }
.amarilla .servicio__n { color: var(--tinta); }

.amarilla .contacto__dato span { color: #7a6a06; }
.amarilla .contacto__dato a:hover { color: #5c4f04; }
.amarilla .formulario label { color: #7a6a06; }
.amarilla .formulario input, .amarilla .formulario textarea {
	border-color: rgba(11, 12, 14, .25); background: rgba(255, 255, 255, .55); color: var(--tinta);
}
.amarilla .formulario input:focus, .amarilla .formulario textarea:focus {
	border-color: var(--tinta); background: #fff;
}
.amarilla .formulario .aviso { color: #6d5f05; }
.amarilla .formulario button.boton { background: var(--tinta); color: var(--amarillo); }

/* El titular a sangre va sobre el fondo tinta, justo después del amarillo:
   el corte de color es parte del efecto. */
.tajo { background: var(--tinta); }

/* ============================================================ ficha de cliente

   Estructura de caso: portada a sangre, el texto a la izquierda y una columna
   de datos a la derecha con lo que de verdad le llevamos. */

.ficha__portada {
	position: relative; overflow: clip; isolation: isolate;
	min-height: min(78svh, 720px);
	display: grid; align-items: end;
	padding: clamp(7rem, 15vh, 10rem) 0 clamp(2.5rem, 6vh, 4rem);
}
.ficha__foto { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.ficha__foto img {
	position: absolute; left: 0; top: -12%;
	width: 100%; height: 124%; object-fit: cover;
}
.ficha__velo {
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(to right, rgba(11,12,14,.9) 0%, rgba(11,12,14,.62) 42%, rgba(11,12,14,.15) 80%, transparent),
		linear-gradient(to top, rgba(11,12,14,.95) 4%, rgba(11,12,14,.4) 48%, rgba(11,12,14,.2));
}
.ficha__titulo .antetitulo { color: #e8eaee; text-shadow: 0 1px 12px rgba(11,12,14,.7); }
.ficha__titulo h1 { font-size: clamp(2.4rem, 7.5vw, 5.6rem); letter-spacing: -.05em; line-height: .9; }

.etiquetas { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 0; padding: 0; }
.etiquetas li {
	font-size: .78rem; font-weight: 700; letter-spacing: .02em;
	padding: .4rem .9rem; border-radius: 100px;
	background: rgba(255,255,255,.14); backdrop-filter: blur(8px); color: var(--blanco);
}

.ficha__rejilla {
	display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr);
	gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
@media (max-width: 900px) { .ficha__rejilla { grid-template-columns: 1fr; } }

.ficha__lado { display: grid; gap: 1px; background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.12); border-radius: var(--radio); overflow: hidden;
	position: sticky; top: clamp(90px, 12vh, 130px); }
@media (max-width: 900px) { .ficha__lado { position: static; } }
.ficha__bloque { background: var(--tinta); padding: clamp(1.2rem, 2.4vw, 1.7rem); }
.ficha__bloque h2 {
	font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
	color: var(--gris); margin-bottom: .9rem;
}
.ficha__bloque ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ficha__bloque li {
	font-weight: 700; font-size: 1.02rem; display: flex; gap: .6rem; align-items: baseline;
}
.ficha__bloque li::before { content: ''; width: 6px; height: 6px; border-radius: 50%;
	background: var(--amarillo); flex: none; }
.ficha__bloque p { font-size: .95rem; color: #b9bcc3; }

/* ================================================== fondos fotográficos

   La fotografía es el volumen de trabajo de la casa, así que aparece también
   detrás del texto y no solo en las galerías. Dos reglas para que sume en vez
   de estorbar: la foto va MUY apagada y el texto nunca pierde contraste. */

.con-fondo { position: relative; overflow: clip; isolation: isolate; }
.con-fondo > .envoltura, .con-fondo > * { position: relative; }

/* La imagen se monta MÁS ALTA que su hueco y desbordando por arriba y por
   abajo. El parallax la desplaza dentro de ese margen, así que por mucho que se
   mueva nunca asoma el borde: antes se veía una franja de color plano al pie de
   cada sección. El sobrante de cada lado (16%) es más del doble de lo que llega
   a desplazarse (7%), que es el margen que hay que respetar si algún día se
   sube la deriva. */
.fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.fondo img {
	position: absolute; left: 0; top: -16%;
	width: 100%; height: 132%; object-fit: cover;
}
.fondo__velo {
	position: absolute; inset: 0;
	/* La foto TIENE que verse: es el argumento de la casa. El velo protege la
	   lectura por la izquierda, donde cae el texto, y suelta la imagen por la
	   derecha. Medido para que el texto blanco mantenga contraste de sobra. */
	background: linear-gradient(to right, rgba(11,12,14,.95) 0%, rgba(11,12,14,.86) 38%, rgba(11,12,14,.42) 100%);
}
/* El fondo se mueve más despacio que la página: eso es lo que da profundidad.
   También lo lleva el motor propio, por el mismo motivo. */
.fondo img { will-change: transform; }

body.is-shot .fondo img { animation: none; transform: scale(1.08); }

/* Sobre foto, el fondo claro deja de ser hueso: sería ilegible. */
.claro.con-fondo { background: var(--tinta); color: var(--hueso); }
.claro.con-fondo .antetitulo { color: var(--gris); }
.claro.con-fondo .entradilla { color: #c9ccd2; }
.claro.con-fondo .paso { border-color: rgba(255,255,255,.12); }
.claro.con-fondo .paso p { color: #b9bcc3; }

/* En amarillo no hay velo: la foto se funde con el fondo en `multiply`, que es
   lo que produce un duotono de verdad. Así la fotografía se ve —en amarillo y
   negro, como la marca— y el texto sigue leyéndose en tinta. */
.amarilla .fondo { background: var(--amarillo); }
.amarilla .fondo__velo { display: none; }
.amarilla .fondo img {
	filter: grayscale(1) contrast(1.25) brightness(1.15);
	mix-blend-mode: multiply; opacity: .3;
}
@supports not (mix-blend-mode: multiply) {
	.amarilla .fondo img { opacity: .12; }
}

/* Cabecera fotográfica de las páginas interiores. */
.cabecera-pagina {
	position: relative; overflow: clip; isolation: isolate;
	padding: clamp(8rem, 18vh, 12rem) 0 clamp(3rem, 8vh, 5rem);
}
.cabecera-pagina .fondo__velo {
	background:
		linear-gradient(to right, rgba(11,12,14,.92) 0%, rgba(11,12,14,.7) 45%, rgba(11,12,14,.28) 100%),
		linear-gradient(to top, rgba(11,12,14,.88) 2%, transparent 48%);
}
.cabecera-pagina h1 { font-size: clamp(2.5rem, 8vw, 6rem); letter-spacing: -.05em; line-height: .9; }
.cabecera-pagina .entradilla { margin-top: 1.4rem; }

/* Tarjeta de sector con su fotografía detrás. */
.sector { position: relative; overflow: hidden; isolation: isolate; }
.sector .fondo__velo { background: linear-gradient(to top, rgba(11,12,14,.94) 20%, rgba(11,12,14,.7)); }
.sector--destacado .fondo { display: none; }
.sector:hover .fondo img { transform: scale(1.14); }
.sector .fondo img { transition: transform 1.1s var(--suave); }

/* ------------------------------------------------------ el bloque de la IA */

.ia__rejilla {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px; margin-top: clamp(2rem, 5vw, 3rem);
	background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14);
	border-radius: var(--radio); overflow: hidden;
}
@media (max-width: 820px) { .ia__rejilla { grid-template-columns: 1fr; } }
.ia__col { background: var(--tinta); padding: clamp(1.5rem, 3vw, 2.4rem); min-width: 0; }
.ia__col--no { background: var(--carbon); }
.ia__col > h3 {
	font-size: .74rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
	display: flex; align-items: center; gap: .6rem; margin-bottom: 1.6rem;
}
.ia__col--si > h3 { color: var(--amarillo); }
.ia__col--no > h3 { color: #ff8f6b; }
.ia__punto + .ia__punto { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.1); }
.ia__punto h4 { font-size: 1.15rem; letter-spacing: -.025em; }
.ia__punto p { margin: .5rem 0 0; color: #b9bcc3; font-size: .96rem; }

/* Un formulario encima de una fotografía es ilegible por muy bonito que quede:
   sobre fondo con foto se le pone panel propio. */
.con-fondo .formulario {
	background: rgba(11, 12, 14, .72);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--radio);
	padding: clamp(1.3rem, 3vw, 2.2rem);
}
@supports not (backdrop-filter: blur(1px)) {
	.con-fondo .formulario { background: rgba(11, 12, 14, .93); }
}
.con-fondo .formulario label { color: #cfd2d8; }
.con-fondo .formulario input,
.con-fondo .formulario textarea {
	background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .24);
}
.amarilla.con-fondo .formulario { background: rgba(11, 12, 14, .88); }
.amarilla.con-fondo .formulario label { color: #cfd2d8; }
.amarilla.con-fondo .formulario .aviso { color: #a8acb3; }
.amarilla.con-fondo .formulario .aviso a { color: var(--amarillo); }
.amarilla.con-fondo .formulario button.boton { background: var(--amarillo); color: var(--tinta); }

/* Párrafo de contexto de la ficha: enlaza hacia dentro (servicios, sector,
   hostelería). Va destacado porque es lo que convierte una ficha en una puerta
   y no en un callejón. */
.ficha__contexto {
	margin-top: 2rem; padding: 1.2rem 1.4rem;
	border-left: 3px solid var(--amarillo);
	background: rgba(255,255,255,.04); border-radius: 0 var(--radio) var(--radio) 0;
	font-size: 1.02rem; color: #c9ccd2;
}
.ficha__contexto a { color: var(--amarillo); text-decoration: none; font-weight: 700; }
.ficha__contexto a:hover { text-decoration: underline; }
.ficha__bloque li a { text-decoration: none; }
.ficha__bloque li a:hover { color: var(--amarillo); }

/* Contact Form 7 mete un envoltorio extra entre la etiqueta y el campo: sin
   esto el campo no ocupa el ancho y la etiqueta se pega al borde. */
.formulario .wpcf7-form-control-wrap { display: block; width: 100%; }
.formulario .wpcf7-list-item { margin: 0; }
.formulario .wpcf7-acceptance .wpcf7-list-item-label { font-weight: 500; letter-spacing: 0;
	text-transform: none; font-size: .82rem; color: var(--gris); }
.formulario .wpcf7-not-valid-tip { color: #ff8f6b; font-size: .78rem; font-weight: 600;
	letter-spacing: 0; text-transform: none; margin-top: .3rem; }
.formulario .wpcf7-response-output {
	margin: 1rem 0 0 !important; padding: .9rem 1.1rem !important; border-radius: var(--radio);
	border-width: 1px !important; font-size: .92rem; font-weight: 600; letter-spacing: 0;
	text-transform: none;
}
.formulario .wpcf7-spinner { display: none; }
.formulario p { margin: 0; }


/* ------------------------------------------------------- botón de formulario

   Contact Form 7 pinta el envío como <input type="submit">, así que caía en la
   regla genérica de campos —borde fino y fondo translúcido— y quedaba un botón
   gris sobre gris que no parecía pulsable. Aquí se le devuelve el botón de la
   casa, con el selector suficientemente específico para ganar sin `!important`. */
.formulario input[type="submit"],
.formulario button[type="submit"],
.con-fondo .formulario input[type="submit"],
.amarilla .formulario input[type="submit"],
.amarilla.con-fondo .formulario input[type="submit"] {
	width: auto; padding: .95rem 2rem; border: 0; border-radius: 100px;
	background: var(--amarillo); color: var(--tinta);
	font: inherit; font-weight: 800; font-size: .95rem; letter-spacing: -.01em;
	cursor: pointer; transition: background .25s var(--suave), transform .25s var(--suave);
}
.formulario input[type="submit"]:hover,
.formulario button[type="submit"]:hover {
	background: var(--amarillo-h); transform: translateY(-2px);
}
.formulario input[type="submit"]:disabled { opacity: .6; cursor: wait; transform: none; }

/* La casilla de aceptación se veía como un cuadrado blanco suelto. */
.formulario input[type="checkbox"],
.formulario .wpcf7-acceptance input[type="checkbox"],
.con-fondo .formulario input[type="checkbox"] {
	appearance: none; -webkit-appearance: none;
	width: 18px; min-width: 18px; height: 18px; padding: 0; flex: none;
	border: 1.5px solid rgba(255,255,255,.45); border-radius: 3px;
	background: transparent; display: inline-grid; place-content: center;
	vertical-align: -3px; cursor: pointer;
}
.formulario input[type="checkbox"]::before {
	content: ''; width: 10px; height: 10px; transform: scale(0);
	background: var(--tinta); clip-path: polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);
	transition: transform .15s var(--suave);
}
.formulario input[type="checkbox"]:checked,
.formulario .wpcf7-acceptance input[type="checkbox"]:checked { background: var(--amarillo); border-color: var(--amarillo); }
.formulario input[type="checkbox"]:checked::before,
.formulario .wpcf7-acceptance input[type="checkbox"]:checked::before { transform: scale(1); }
/* La línea de aceptación, en fila y alineada con su texto. */
.formulario .wpcf7-acceptance .wpcf7-list-item-label { display: inline; }
.formulario .wpcf7-acceptance { display: block; }
.formulario label:has(.wpcf7-acceptance) { display: block; }
.claro .formulario input[type="checkbox"] { border-color: rgba(11,12,14,.4); }

/* ------------------------------- tarjetas de servicio sobre amarillo, en blanco

   Sobre el amarillo, un relleno translúcido de tinta las dejaba mate y sucias.
   En blanco tienen el contraste que pide la marca: amarillo, negro y blanco. */
.amarilla .servicio {
	background: rgba(255, 255, 255, .92);
	border-color: rgba(11, 12, 14, .14);
	backdrop-filter: none; -webkit-backdrop-filter: none;
}
.amarilla .servicio:hover { background: #fff; border-color: rgba(11, 12, 14, .4); }
.amarilla .servicio h3, .amarilla .servicio__gancho { color: var(--tinta); }
.amarilla .servicio p.servicio__texto { color: #4e525a; }
.amarilla .servicio li { background: rgba(11, 12, 14, .07); color: #4a4e56; }
.amarilla .servicio__n { color: #8a7503; }

/* ==================================================== sectores, versión sobria

   Una lista, no una parrilla de tarjetas con foto. Cada línea dice tres cosas:
   cuántos trabajos hay, de qué sector y una frase. El destacado se marca con
   tamaño y una barra amarilla, no pintando el fondo entero: así el amarillo
   sigue siendo señal y no relleno. */

.ramos { list-style: none; margin: 0; padding: 0; display: grid; }
.ramo { border-top: 1px solid rgba(11, 12, 14, .14); }
.ramo:last-child { border-bottom: 1px solid rgba(11, 12, 14, .14); }
.claro .ramo { border-color: rgba(11, 12, 14, .14); }

.ramo > a {
	display: grid;
	/* La columna del nombre tiene que caber «Hostelería» a cuerpo grande: con
	   9rem el texto se salía y se montaba encima de la descripción. */
	grid-template-columns: minmax(3rem, auto) minmax(10rem, 17rem) minmax(0, 1fr) auto;
	gap: clamp(1rem, 3vw, 2.5rem); align-items: baseline;
	padding: clamp(1.1rem, 2.4vw, 1.7rem) 0;
	text-decoration: none; position: relative;
	transition: padding-left .35s var(--suave);
}
.ramo > a::before {
	content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
	background: var(--amarillo); transform: scaleY(0); transform-origin: top;
	transition: transform .35s var(--suave);
}
.ramo > a:hover { padding-left: 1.1rem; }
.ramo > a:hover::before { transform: scaleY(1); }

.ramo__cuenta {
	font-size: .8rem; font-weight: 800; letter-spacing: .1em;
	color: var(--gris); font-variant-numeric: tabular-nums; padding-top: .35em;
}
.claro .ramo__cuenta { color: #7a7f88; }
.ramo__nombre {
	font-size: clamp(1.35rem, 3vw, 2.1rem); font-weight: 900;
	letter-spacing: -.035em; line-height: 1; min-width: 0;
}
.ramo__texto { font-size: .95rem; color: #63676e; min-width: 0; max-width: 52ch; }
.ramo__flecha {
	width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
	background: rgba(11, 12, 14, .06); flex: none;
	opacity: 0; transform: translateX(-8px);
	transition: opacity .3s var(--suave), transform .3s var(--suave), background .3s;
}
.ramo__flecha svg { width: 14px; height: 14px; }
.ramo > a:hover .ramo__flecha { opacity: 1; transform: none; background: var(--amarillo); }

/* El nuestro pesa más: cuerpo mayor y la barra amarilla siempre puesta. */
.ramo--nuestro .ramo__nombre { font-size: clamp(1.7rem, 4.2vw, 3rem); }
.ramo--nuestro > a::before { transform: scaleY(1); }
.ramo--nuestro > a { padding-left: 1.1rem; }
.ramo--nuestro .ramo__cuenta { color: var(--tinta); }

@media (max-width: 860px) {
	.ramo > a { grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1rem; }
	.ramo__texto { grid-column: 1 / -1; }
	.ramo__flecha { display: none; }
}


/* La sección del proceso va sobre fotografía, así que su texto es claro; pero
   los naipes son blancos y el titular se volvía invisible dentro de ellos.
   El color se fija en el naipe, que es quien conoce su propio fondo. */
.apilada .naipe h3 { color: var(--tinta); }
.apilada .naipe p { color: #5a5e66; }
.claro.con-fondo .apilada .naipe h3 { color: var(--tinta); }
.claro.con-fondo .apilada .naipe p { color: #5a5e66; }


/* ================================================= el hero, a pantalla grande

   En monitores anchos el mosaico se lleva hasta el borde: la fotografía es el
   argumento y encerrarla en una caja centrada la desaprovecha. */
@media (min-width: 1500px) {
	.marco-hero .envoltura { width: min(96vw, 1900px); }
	.hero-marca { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(3rem, 5vw, 6rem); }
	.mosaico { height: clamp(520px, 72vh, 820px); gap: clamp(.8rem, 1.1vw, 1.3rem); }
	.hero-marca h1 { font-size: clamp(3.4rem, 5.4vw, 6.6rem); }
}
@media (min-width: 1900px) {
	.marco-hero .envoltura { width: min(94vw, 2200px); }
	.hero-marca h1 { font-size: clamp(4rem, 5vw, 7.4rem); }
	.mosaico { height: clamp(560px, 74vh, 900px); }
}

/* El titular del hero también se despega un poco al bajar: da profundidad sin
   que se note el truco. */
.hero-marca > div:first-child { will-change: transform; }

/* ------------------------------------------------- en qué parte del menú vas

   El color amarillo no vale para señalarlo: sobre el hero amarillo de la
   portada desaparece. Una raya debajo funciona sobre cualquier fondo. */
.nav a[aria-current="page"] { opacity: 1; position: relative; color: inherit; }
.nav a[aria-current="page"]::after {
	content: ''; position: absolute; inset: auto 0 -7px 0; height: 2px;
	background: var(--amarillo); border-radius: 2px;
}
body.es-portada .cabecera:not(.posada) .nav a[aria-current="page"]::after { background: var(--tinta); }
.nav a.boton[aria-current="page"]::after { display: none; }
.nav a.boton[aria-current="page"] { box-shadow: 0 0 0 3px rgba(253, 219, 6, .35); }

.velo a[aria-current="page"] { color: var(--amarillo); }
.velo a[aria-current="page"]::before { content: '— '; }