/* ===== Componentes compartidos: inicio, landings de línea y clientes ===== */

/* Entrada del hero — no depende de JS, así el titular nunca queda invisible */
@keyframes uto-hero-in {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: none; }
}

.uto-hero-in {
	animation: uto-hero-in 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.uto-hero-in:nth-child(2) { animation-delay: 80ms; }
.uto-hero-in:nth-child(3) { animation-delay: 160ms; }
.uto-hero-in:nth-child(4) { animation-delay: 240ms; }
.uto-hero-in:nth-child(5) { animation-delay: 320ms; }
.uto-hero-in:nth-child(6) { animation-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
	.uto-hero-in { animation: none; }
}

.uto-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.uto-section-lead {
	max-width: 60ch;
	font-size: var(--text-lg);
	margin: var(--space-2) 0 var(--space-5);
}
.uto-section--dark .uto-section-lead { color: var(--color-acero-claro); }
.uto-section--light .uto-section-lead { color: var(--color-texto-body); }

section h2 { font-size: var(--text-3xl); margin: 0 0 var(--space-3); }

/* ===== Hero de landing ===== */
.uto-linea__hero {
	padding: clamp(80px, 12vw, 150px) 0 var(--space-8);
}

.uto-linea__title {
	font-size: var(--text-5xl);
	max-width: 16ch;
	margin: 0 0 var(--space-2);
}

.uto-linea__tagline { margin: 0 0 var(--space-4); color: var(--color-acero-claro); }

.uto-linea__headline {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--text-2xl);
	line-height: 1.2;
	max-width: 26ch;
	margin: 0 0 var(--space-3);
	color: var(--color-niebla);
}

.uto-linea__lead {
	max-width: 60ch;
	font-size: var(--text-lg);
	color: var(--color-acero-claro);
	margin: 0 0 var(--space-4);
}

/* ===== Diferenciadores ===== */
.uto-diff, .uto-pillars { padding: var(--space-8) 0; }

.uto-diff__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-4);
	margin-top: var(--space-4);
}

.uto-diff__item {
	border-top: 2px solid var(--color-carbon);
	padding-top: var(--space-3);
}

.uto-diff__grid--dark .uto-diff__item { border-top-color: var(--color-laser); }

.uto-diff__item h3 { font-size: var(--text-xl); margin: var(--space-1) 0 var(--space-2); }
.uto-diff__item p { margin: 0; }
.uto-section--dark .uto-diff__item p { color: var(--color-acero-claro); }

/* ===== Servicios ===== */
.uto-svc { padding: var(--space-8) 0; }

.uto-svc__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: rgb(232 234 234 / 0.1);
	border: 1px solid rgb(232 234 234 / 0.1);
	margin-top: var(--space-5);
}

.uto-svc__card {
	background: var(--color-carbon-2);
	padding: var(--space-4);
	min-height: 220px;
	transition: transform var(--transition-base);
}
.uto-svc__card:hover { transform: translateY(-4px); }
.uto-svc__card:hover .uto-mono { color: var(--color-laser); }
.uto-svc__card h3 { font-size: var(--text-xl); margin: var(--space-2) 0 var(--space-1); }
.uto-svc__card p { margin: 0; font-size: var(--text-sm); color: var(--color-acero-claro); }

/* ===== Proceso ===== */
.uto-process { padding: var(--space-8) 0; }

.uto-process__list {
	list-style: none;
	margin: var(--space-5) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
}

.uto-process__list li { border-top: 1px solid var(--color-acero); padding-top: var(--space-2); }
.uto-process__list h3 { font-size: var(--text-xl); margin: var(--space-1) 0; }
.uto-process__list p { margin: 0; font-size: var(--text-sm); }
.uto-section--dark .uto-process__list p { color: var(--color-acero-claro); }

/* ===== Bloque de líneas (inicio) ===== */
.uto-linesblock, .uto-360, .uto-devhome, .uto-wall, .uto-cases, .uto-others, .uto-showcase { padding: var(--space-8) 0; }

.uto-linecard {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	background: var(--color-carbon-2);
	border: 1px solid rgb(232 234 234 / 0.1);
	padding: var(--space-4);
	text-decoration: none;
	color: inherit;
	transition: transform var(--transition-base);
}
.uto-linecard:hover { transform: translateY(-4px); }
.uto-linecard:hover .uto-mono, .uto-linecard:hover .uto-linecard__link { color: var(--color-laser); }
.uto-linecard h3 { font-size: var(--text-2xl); margin: 0; }
.uto-linecard p { margin: 0; color: var(--color-acero-claro); max-width: 62ch; }

.uto-linecard--main {
	padding: var(--space-6) var(--space-5);
	background: var(--color-carbon-3);
	border-color: var(--color-laser);
}
.uto-linecard--main h3 { font-size: var(--text-4xl); }
.uto-linecard--main p { font-size: var(--text-lg); }

.uto-linecard__link {
	margin-top: auto;
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: var(--text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-acero-claro);
}

.uto-linesblock__sub { margin: var(--space-5) 0 var(--space-2); }
.uto-linesblock__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }

/* ===== Lista 360 ===== */
.uto-360__list { list-style: none; margin: 0 0 var(--space-4); padding: 0; border-top: 1px solid var(--color-acero-borde); }
.uto-360__list li {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: var(--space-2);
	padding: var(--space-3) 4px;
	border-bottom: 1px solid var(--color-acero-borde);
}
.uto-360__list h3 { font-size: var(--text-xl); margin: 0 0 6px; }
.uto-360__list p { margin: 0; max-width: 70ch; }

/* ===== Tarjetas de cliente / proyecto ===== */
.uto-showcase__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin: var(--space-5) 0; }
.uto-showcase__grid--home { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }

.uto-cases__intro { max-width: 60ch; margin: 0 0 var(--space-4); }
.uto-cases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin: var(--space-4) 0; }

.uto-client {
	display: flex;
	flex-direction: column;
	background: var(--color-niebla-2);
	border: 1px solid var(--color-acero-borde);
	color: var(--color-texto-body);
}
.uto-section--dark .uto-client { background: var(--color-carbon-2); border-color: rgb(232 234 234 / 0.1); color: var(--color-acero-claro); }

.uto-client__frame { background: var(--color-carbon-3); }
.uto-client__bar { display: flex; gap: 6px; padding: 10px 12px; background: var(--color-carbon-3); }
.uto-client__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-acero); display: block; }
.uto-client__frame img { display: block; width: 100%; height: auto; }

.uto-client__body { padding: var(--space-3) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); flex-grow: 1; }
.uto-client__name { font-size: var(--text-2xl); margin: 0; }
.uto-client__story { margin: 0; font-size: var(--text-sm); }
.uto-client__type { margin: 0; }

.uto-client--text .uto-client__body { min-height: 260px; }
.uto-client--text .uto-client__name { font-size: var(--text-3xl); }

.uto-client__link {
	margin-top: auto;
	padding-top: var(--space-2);
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: var(--text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-carbon);
	text-decoration: none;
}
.uto-section--dark .uto-client__link { color: var(--color-niebla); }
.uto-client__link:hover { color: var(--color-laser-texto); }
.uto-section--dark .uto-client__link:hover { color: var(--color-laser); }

.uto-client--large { flex-direction: row; }
.uto-client--large .uto-client__frame { flex: 1.3; }
.uto-client--large .uto-client__body { flex: 1; justify-content: center; }
.uto-showcase__grid--home .uto-client--large { flex-direction: column; }

.uto-chips { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.uto-chips li {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 9px;
	border: 1px solid var(--color-acero);
	color: inherit;
}

/* ===== Muro de clientes ===== */
.uto-wall__list {
	list-style: none;
	margin: var(--space-4) 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	border-top: 1px solid rgb(232 234 234 / 0.15);
}
.uto-wall__list li {
	flex: 1 1 25%;
	min-width: 220px;
	padding: var(--space-3) var(--space-2);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--text-xl);
	border-bottom: 1px solid rgb(232 234 234 / 0.15);
	color: var(--color-niebla);
}

/* ===== Navegación entre líneas ===== */
.uto-lines-nav {
	list-style: none;
	margin: var(--space-4) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-3);
}
.uto-lines-nav a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--space-3);
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--color-acero-borde);
	transition: transform var(--transition-base);
}
.uto-section--dark .uto-lines-nav a { border-color: rgb(232 234 234 / 0.15); }
.uto-lines-nav a:hover { transform: translateY(-4px); }
.uto-lines-nav__title { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); }
.uto-lines-nav__short { font-size: var(--text-sm); }

/* ===== Banda master classes ===== */
.uto-mcband { padding: var(--space-6) 0; }
.uto-mcband__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.uto-mcband h2 { margin: 0; font-size: var(--text-2xl); }

/* ===== CTA ===== */
.uto-cta { padding: var(--space-8) 0; }
.uto-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.uto-cta h2 { margin: 0; }

/* ===== Responsive ===== */
@media (max-width: 960px) {
	.uto-diff__grid, .uto-svc__grid, .uto-cases__grid, .uto-linesblock__grid, .uto-lines-nav, .uto-showcase__grid--home { grid-template-columns: repeat(2, 1fr); }
	.uto-process__list { grid-template-columns: repeat(2, 1fr); }
	.uto-client--large { flex-direction: column; }
}

@media (max-width: 620px) {
	.uto-diff__grid, .uto-svc__grid, .uto-cases__grid, .uto-linesblock__grid, .uto-lines-nav, .uto-showcase__grid--home, .uto-process__list { grid-template-columns: 1fr; }
	.uto-linecard--main { padding: var(--space-4) var(--space-3); }
	.uto-360__list li { grid-template-columns: 48px 1fr; }
	.uto-wall__list li { flex-basis: 100%; }
	section h2 { font-size: clamp(1.75rem, 7vw, 3rem); }
}

/* ===== Franja de prueba social ===== */
.uto-proofstrip { padding: var(--space-3) 0; border-top: 1px solid rgb(232 234 234 / 0.1); border-bottom: 1px solid rgb(232 234 234 / 0.1); background: var(--color-carbon-3); }
.uto-proofstrip__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.uto-proofstrip__inner .uto-mono { margin: 0; color: var(--color-laser); }
.uto-proofstrip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px var(--space-3); }
.uto-proofstrip li { font-family: var(--font-display); font-weight: 500; font-size: var(--text-base); color: var(--color-niebla); }

/* ===== Reto / solución en casos ===== */
.uto-client__cs { margin: 0; font-size: var(--text-sm); }
.uto-client__cs strong { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-carbon); }
.uto-section--dark .uto-client__cs strong { color: var(--color-laser); }

/* ===== FAQ ===== */
.uto-faq { padding: var(--space-8) 0; }
.uto-faq__inner { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--space-6); align-items: start; }
.uto-faq__list { border-top: 1px solid var(--color-acero); }
.uto-faq__item { border-bottom: 1px solid var(--color-acero); padding: var(--space-3) 0; }
.uto-faq__item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-2); font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); }
.uto-faq__item summary::-webkit-details-marker { display: none; }
.uto-faq__item summary::after { content: '+'; font-family: var(--font-mono); color: var(--color-acero); }
.uto-faq__item[open] summary::after { content: '\2212'; }
.uto-faq__item summary:focus-visible { outline: 2px solid var(--color-laser); outline-offset: 4px; }
.uto-faq__item p { margin: var(--space-2) 0 0; max-width: 62ch; }
.uto-section--dark .uto-faq__item p { color: var(--color-acero-claro); }
@media (max-width: 860px) { .uto-faq__inner { grid-template-columns: 1fr; gap: var(--space-3); } }

/* =====================================================================
 * Medios: hero partido, clips, YouTube, galería, paneles
 * ===================================================================== */

/* ----- Hero partido (texto + reels) ----- */
.uto-hero--split { min-height: 0; padding: clamp(56px, 8vw, 110px) 0 clamp(48px, 7vw, 96px); display: block; }
.uto-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.uto-hero--split .uto-hero__title,
.uto-hero--split .uto-linea__title { font-size: clamp(2.4rem, 5vw, 4.6rem); max-width: 13ch; margin: 0 0 var(--space-3); }
.uto-hero--split .uto-linea__headline { font-size: var(--text-xl); max-width: 30ch; }
.uto-hero__visual { min-width: 0; }

.uto-heromedia { display: grid; gap: 12px; align-items: start; }
.uto-heromedia--3 { grid-template-columns: repeat(3, 1fr); }
.uto-heromedia--2 { grid-template-columns: 1.8fr 1fr; align-items: center; }
.uto-heromedia--3 .uto-heromedia__cell:nth-child(2) { margin-top: 44px; }
.uto-heromedia__cell { min-width: 0; }
.uto-heromedia__cell img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--color-carbon-2); }
.uto-heromedia__cell > .uto-mono { display: block; margin-top: 8px; }

/* ----- Clips locales ----- */
.uto-clip { margin: 0; }
.uto-clip video { display: block; width: 100%; height: auto; background: var(--color-carbon-3); object-fit: cover; }
.uto-clip--v video { aspect-ratio: 9 / 16; }
.uto-clip--h video { aspect-ratio: 16 / 9; }
.uto-clip figcaption { margin-top: 8px; }

/* ----- Videos de YouTube (carga diferida) ----- */
.uto-yt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin: var(--space-5) 0 var(--space-4); }
.uto-yt--featured { grid-column: span 2; grid-row: span 2; }
.uto-video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: var(--color-carbon-3); cursor: pointer; overflow: hidden; }
.uto-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.uto-video:hover img { transform: scale(1.03); }
.uto-video:focus-visible { outline: 2px solid var(--color-laser); outline-offset: 3px; }
.uto-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.uto-video__play { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; transform: translate(-50%, -50%); background: var(--color-niebla); transition: background-color var(--transition-fast); }
.uto-video__play::after { content: ''; position: absolute; left: 27px; top: 20px; border-left: 20px solid var(--color-carbon); border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.uto-video:hover .uto-video__play { background: var(--color-laser); }
.uto-yt--featured .uto-video__play { width: 92px; height: 92px; }
.uto-yt--featured .uto-video__play::after { left: 37px; top: 28px; border-left-width: 26px; border-top-width: 18px; border-bottom-width: 18px; }
.uto-yt__meta { margin: 10px 0 0; font-family: var(--font-display); font-weight: 500; font-size: var(--text-base); }
.uto-yt__meta .uto-mono { display: block; margin-bottom: 2px; }
.uto-section--dark .uto-yt__meta { color: var(--color-niebla); }

/* ----- Galería (mampostería) ----- */
.uto-gallery { column-count: 3; column-gap: var(--space-2); margin: var(--space-5) 0 var(--space-4); }
.uto-gallery__item { margin: 0 0 var(--space-2); break-inside: avoid; }
.uto-gallery__item img { display: block; width: 100%; height: auto; }
.uto-gallery__item figcaption { margin-top: 6px; }

/* ----- Paneles en funcionamiento ----- */
.uto-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3); margin: var(--space-5) 0; align-items: start; }
.uto-panels .uto-clip--v video { border: 1px solid rgb(232 234 234 / 0.2); }
.uto-panels--light .uto-clip video { border-color: var(--color-acero-borde); }
.uto-panels .uto-clip--h { grid-column: span 2; }
.uto-section--light .uto-panels .uto-mono { color: var(--color-acero); }

/* ----- Producción en cine ----- */
.uto-cinema { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-3); margin-top: var(--space-5); }

/* ----- Solución 360 con video ----- */
.uto-360__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.uto-360__media { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; position: sticky; top: 110px; }
.uto-360__media .uto-clip:nth-child(2) { margin-top: 40px; }

/* ----- Tarjetas de línea con imagen ----- */
.uto-linecard { padding: 0; gap: 0; overflow: hidden; }
.uto-linecard__img { display: block; overflow: hidden; background: var(--color-carbon-3); }
.uto-linecard__img img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; transition: transform var(--transition-slow); }
.uto-linecard:hover .uto-linecard__img img { transform: scale(1.03); }
.uto-linecard__text { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); flex-grow: 1; }
.uto-linecard--main { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
.uto-linecard--main .uto-linecard__img img { aspect-ratio: auto; min-height: 100%; }
.uto-linecard--main .uto-linecard__text { padding: var(--space-5); justify-content: center; }
.uto-linecard--main h3 { font-size: var(--text-3xl); }

/* ----- Variantes de color ----- */
.uto-wall__list--light { border-top-color: var(--color-acero-borde); }
.uto-wall__list--light li { color: var(--color-carbon); border-bottom-color: var(--color-acero-borde); }
.uto-sedes__grid--dark .uto-sede-card { background: var(--color-carbon-2); border-color: rgb(232 234 234 / 0.1); }
.uto-sedes__grid--dark .uto-sede-card__city { color: var(--color-niebla); }
.uto-sedes__grid--dark .uto-sede-card__focus { color: var(--color-acero-claro); }

/* ----- Responsive ----- */
@media (max-width: 960px) {
	.uto-hero__grid, .uto-360__grid, .uto-cinema { grid-template-columns: 1fr; }
	.uto-360__media { position: static; }
	.uto-gallery { column-count: 2; }
	.uto-yt-grid { grid-template-columns: repeat(2, 1fr); }
	.uto-linecard--main { grid-template-columns: 1fr; }
	.uto-linecard--main .uto-linecard__img img { aspect-ratio: 4 / 3; min-height: 0; }
	.uto-linecard--main h3 { font-size: var(--text-2xl); }
}
@media (max-width: 620px) {
	.uto-heromedia--3 .uto-heromedia__cell:nth-child(2) { margin-top: 20px; }
	.uto-heromedia { gap: 8px; }
	.uto-yt-grid { grid-template-columns: 1fr; }
	.uto-yt--featured { grid-column: auto; grid-row: auto; }
	.uto-gallery { column-gap: 10px; }
	.uto-panels { grid-template-columns: repeat(2, 1fr); }
	.uto-panels .uto-clip--h { grid-column: span 2; }
	.uto-linecard__text, .uto-linecard--main .uto-linecard__text { padding: var(--space-3); }
}

/* ----- Casos 360 en detalle ----- */
.uto-cases360 { padding: var(--space-8) 0; }
.uto-case360 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-5); padding: var(--space-5) 0; border-top: 1px solid rgb(232 234 234 / 0.15); align-items: start; }
.uto-case360:first-of-type { margin-top: var(--space-5); }
.uto-case360__text h3 { font-size: var(--text-3xl); margin: var(--space-1) 0 var(--space-2); }
.uto-case360__text p { color: var(--color-acero-claro); }
.uto-case360__text strong { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-laser); }
.uto-case360__clips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; }
.uto-case360__clips .uto-clip--h { grid-column: 1 / -1; }
.uto-gallery--compact { column-count: 3; column-gap: 12px; margin: 12px 0 0; }
.uto-gallery--compact .uto-gallery__item { margin-bottom: 12px; }
.uto-client__frame--plain { background: transparent; }
.uto-client__frame--plain img { aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 960px) { .uto-case360 { grid-template-columns: 1fr; } .uto-gallery--compact { column-count: 2; } }

/* ----- Logos de clientes ----- */
.uto-proofstrip__logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px var(--space-4); }
.uto-proofstrip__logos li { display: flex; align-items: center; }
.uto-proofstrip__logos img { display: block; height: 30px; width: auto; max-width: 150px; object-fit: contain; opacity: 0.85; }

.uto-wall--deep { background: var(--color-carbon-3); }
.uto-logowall { list-style: none; margin: var(--space-5) 0 var(--space-4); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgb(232 234 234 / 0.12); border: 1px solid rgb(232 234 234 / 0.12); }
.uto-logowall li { display: flex; align-items: center; justify-content: center; min-height: 150px; padding: var(--space-3); background: var(--color-carbon-3); transition: background-color var(--transition-base); }
.uto-logowall li:hover { background: var(--color-carbon-2); }
.uto-logowall img { display: block; max-width: 78%; max-height: 64px; width: auto; height: auto; object-fit: contain; opacity: 0.9; }
.uto-logowall__text span { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); color: var(--color-acero-claro); text-align: center; }
@media (max-width: 960px) { .uto-logowall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .uto-logowall { grid-template-columns: repeat(2, 1fr); } .uto-logowall li { min-height: 110px; } .uto-proofstrip__logos img { height: 24px; } }

/* ----- Spot completo ----- */
.uto-spot { margin: var(--space-5) 0 var(--space-4); }
.uto-spot video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--color-carbon-3); }
.uto-spot figcaption { margin-top: 10px; font-family: var(--font-display); font-weight: 500; font-size: var(--text-base); }
.uto-spot figcaption .uto-mono { display: block; margin-bottom: 2px; }
.uto-case360__media > .uto-spot { margin-top: 0; }
.uto-case360__yt { margin: 0 0 12px; }
.uto-case360__yt .uto-yt { max-width: 100%; }
.uto-cases__grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 620px) { .uto-cases__grid--4 { grid-template-columns: 1fr; } }

/* =====================================================================
 * Galería de producciones + reproductor emergente (identidad Señal)
 * ===================================================================== */
.uto-vgsec { padding: var(--space-8) 0; border-top: 1px solid rgb(232 234 234 / 0.1); }
.uto-vg__filters { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-4) 0 var(--space-4); }
.uto-vg__filter { background: transparent; color: var(--color-acero-claro); border: 1px solid rgb(232 234 234 / 0.25); padding: 0.7rem 1.1rem; font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; border-radius: 0; transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast); }
.uto-vg__filter .uto-mono { margin-left: 6px; }
.uto-vg__filter:hover { color: var(--color-niebla); border-color: var(--color-niebla); }
.uto-vg__filter.is-active { background: var(--color-niebla); color: var(--color-carbon); border-color: var(--color-niebla); }
.uto-vg__filter.is-active .uto-mono { color: var(--color-carbon); }
.uto-vg__filter:focus-visible, .uto-vg__thumb:focus-visible, .uto-modal__close:focus-visible { outline: 2px solid var(--color-laser); outline-offset: 3px; }

.uto-vg__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3) var(--space-2); }
.uto-vg__item[hidden] { display: none; }
.uto-vg__thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 1px solid rgb(232 234 234 / 0.1); background: var(--color-carbon-3); cursor: pointer; overflow: hidden; border-radius: 0; transition: border-color var(--transition-base), transform var(--transition-base); }
.uto-vg__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.uto-vg__thumb .uto-video__play { width: 44px; height: 44px; }
.uto-vg__thumb .uto-video__play::after { left: 17px; top: 12px; border-left-width: 15px; border-top-width: 10px; border-bottom-width: 10px; }
.uto-vg__thumb:hover { border-color: var(--color-laser); transform: translateY(-4px); }
.uto-vg__thumb:hover img { transform: scale(1.03); }
.uto-vg__thumb:hover .uto-video__play { background: var(--color-laser); }
.uto-vg__title { margin: 10px 0 0; font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); line-height: 1.3; color: var(--color-niebla); }
.uto-vg__title .uto-mono { display: block; margin-bottom: 2px; font-size: 0.7rem; }

.uto-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgb(15 17 20 / 0.96); padding: var(--space-3); }
.uto-modal[hidden] { display: none; }
.uto-modal__box { position: relative; width: min(1100px, 100%); }
.uto-modal__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border: 1px solid rgb(232 234 234 / 0.2); }
.uto-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.uto-modal__close { position: absolute; right: 0; top: -44px; background: transparent; border: 0; color: var(--color-niebla); font-family: var(--font-mono); font-weight: 500; font-size: var(--text-sm); letter-spacing: var(--tracking-mono); text-transform: uppercase; cursor: pointer; padding: 8px 0; }
.uto-modal__close:hover { color: var(--color-laser); }
body.uto-modal-open { overflow: hidden; }

@media (max-width: 1024px) { .uto-vg__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .uto-vg__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2) 10px; } .uto-vg__thumb .uto-video__play { width: 34px; height: 34px; } .uto-vg__thumb .uto-video__play::after { left: 13px; top: 9px; border-left-width: 12px; border-top-width: 8px; border-bottom-width: 8px; } }
@media (prefers-reduced-motion: reduce) { .uto-vg__thumb, .uto-vg__thumb img { transition: none; } }

/* ----- Hero con video de fondo ----- */
.uto-hero--video { position: relative; min-height: min(88vh, 820px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: clamp(80px, 12vw, 140px) 0 clamp(90px, 10vw, 120px); background: var(--color-carbon-3); }
.uto-herovid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.uto-hero__shade { position: absolute; inset: 0; z-index: 1; background: rgb(20 22 26 / 0.62); }
.uto-hero--video .uto-hero__inner { position: relative; z-index: 2; }
.uto-hero--video .uto-hero__title { font-size: clamp(2.6rem, 6vw, 5.4rem); max-width: 14ch; }
.uto-herochap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); padding-bottom: var(--space-3); }
.uto-herochap__item { display: flex; flex-direction: column; gap: 8px; }
.uto-herochap__item i { display: block; height: 2px; background: rgb(232 234 234 / 0.25); position: relative; overflow: hidden; }
.uto-herochap__item i::after { content: ''; position: absolute; inset: 0; background: var(--color-laser); transform: scaleX(var(--p, 0)); transform-origin: left; }
.uto-herochap__item b { font-weight: 500; color: var(--color-acero-claro); transition: color var(--transition-fast); }
.uto-herochap__item.is-active b { color: var(--color-niebla); }
@media (max-width: 620px) { .uto-herochap__item b { font-size: 0.62rem; letter-spacing: 0.12em; } .uto-hero__shade { background: rgb(20 22 26 / 0.72); } }
@media (prefers-reduced-motion: reduce) { .uto-herochap__item i::after { transform: scaleX(0); } }
.uto-hero--video .uto-eyebrow { color: var(--color-niebla); }
.uto-hero--video .uto-hero__lead { color: var(--color-niebla); max-width: 56ch; }
.uto-hero--video .uto-hero__shade { background: rgb(20 22 26 / 0.68); }
.uto-hero--video .uto-herochap__item b { color: rgb(232 234 234 / 0.7); }

/* =====================================================================
 * Orden y aire: menos texto, secciones más compactas
 * ===================================================================== */
.uto-home > section:not(.uto-hero),
.uto-linea > section:not(.uto-linea__hero) { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.uto-center { text-align: center; }
.uto-eyebrow--center { justify-content: center; }
.uto-center .uto-spot { max-width: 1000px; margin-left: auto; margin-right: auto; text-align: left; }
.uto-center h2 { margin-bottom: var(--space-2); }

/* Franja de logos pequeña, siempre centrada */
.uto-proofstrip { padding: var(--space-4) 0; }
.uto-proofstrip__inner { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-2); }
.uto-proofstrip__inner .uto-mono { color: var(--color-acero-claro); }
.uto-proofstrip__logos { justify-content: center; gap: var(--space-2) var(--space-5); }
.uto-proofstrip__logos li { justify-content: center; }
.uto-proofstrip__logos img { height: 28px; }
.uto-logowall { justify-items: stretch; }
.uto-logowall li { justify-content: center; text-align: center; }

/* Solución 360 en una sola fila */
.uto-360lite__list { list-style: none; margin: var(--space-4) 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); border-top: 1px solid var(--color-acero-borde); }
.uto-360lite__list li { padding: var(--space-3) var(--space-1) 0; }
.uto-360lite__list h3 { font-size: var(--text-lg); line-height: 1.2; margin: 8px 0 0; }

/* Puntos clave de desarrollo */
.uto-keypoints { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); }
.uto-keypoints li { display: flex; align-items: baseline; gap: 12px; }
.uto-keypoints .uto-mono { color: var(--color-laser); }

/* Tarjetas de caso compactas (inicio) */
.uto-client--compact .uto-client__story, .uto-client--compact .uto-client__cs, .uto-client--compact .uto-client__link { display: none; }
.uto-client--compact .uto-client__body { padding: var(--space-2) var(--space-3) var(--space-3); }
.uto-client--compact .uto-client__name { font-size: var(--text-xl); }
.uto-cases--lite .uto-client--compact .uto-client__frame--plain img { aspect-ratio: 4 / 3; }

/* Sedes + master classes en una banda */
.uto-sedeband { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; border-top: 1px solid rgb(232 234 234 / 0.1); }
.uto-sedeband__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); }
.uto-sedeband p { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); }
.uto-sedeband p .uto-mono { display: block; margin-bottom: 2px; }

/* Landings: encabezado de línea más limpio */
.uto-linea__hero .uto-linea__headline { max-width: 24ch; margin-bottom: var(--space-4); }
.uto-diff__item h3 { margin-bottom: var(--space-1); }

/* Galería de producciones: muestra 8 y despliega el resto */
.uto-vg--collapsed .uto-vg__item:nth-child(n+9) { display: none; }
.uto-vg__more { margin: var(--space-4) 0 0; text-align: center; }
.uto-vg:not(.uto-vg--collapsed) .uto-vg__more { display: none; }

@media (max-width: 960px) { .uto-360lite__list { grid-template-columns: repeat(2, 1fr); } .uto-keypoints { font-size: var(--text-lg); } }
@media (max-width: 620px) { .uto-360lite__list { grid-template-columns: 1fr 1fr; } .uto-sedeband__inner { flex-direction: column; align-items: flex-start; } .uto-proofstrip__logos img { height: 22px; } }

/* Reel a todo el ancho, sin título */
.uto-home > .uto-reel--full { padding-top: 0; padding-bottom: 0; }
.uto-reel--full .uto-spot { margin: 0; max-width: none; }
.uto-reel--full .uto-spot video { width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 92vh; object-fit: cover; }
.uto-reel__more { padding-top: var(--space-4); padding-bottom: var(--space-5); }

/* Reel con autoplay y botón de sonido */
.uto-spot--auto { position: relative; }
.uto-spot__sound { position: absolute; right: var(--space-3); bottom: var(--space-3); z-index: 2; background: rgb(20 22 26 / 0.8); color: var(--color-niebla); border: 1px solid rgb(232 234 234 / 0.5); padding: 0.6rem 1rem; font-family: var(--font-mono); font-weight: 500; font-size: var(--text-xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; cursor: pointer; border-radius: 0; transition: color var(--transition-fast), border-color var(--transition-fast); }
.uto-spot__sound:hover, .uto-spot__sound[aria-pressed="true"] { color: var(--color-laser); border-color: var(--color-laser); }
.uto-spot__sound:focus-visible { outline: 2px solid var(--color-laser); outline-offset: 3px; }

/* =====================================================================
 * Landing de la productora (cinematográfica)
 * ===================================================================== */
.uto-linea > .uto-prod__hero { padding: clamp(90px, 13vw, 150px) 0 clamp(70px, 9vw, 110px); min-height: min(86vh, 780px); }
.uto-prod__hero .uto-hero__title { max-width: 12ch; }

.uto-prodspot .uto-spot { max-width: 1100px; margin: var(--space-3) auto 0; text-align: left; }
.uto-prodspot { background: var(--color-carbon-3); }

.uto-prodsvc__grid { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5) var(--space-4); }
.uto-prodsvc__grid li { border-top: 2px solid var(--color-carbon); padding-top: var(--space-2); }
.uto-prodsvc__grid h3 { font-size: var(--text-xl); margin: var(--space-1) 0 8px; }
.uto-prodsvc__grid p { margin: 0; font-size: var(--text-sm); }

/* Fotografía en cuadrícula ordenada */
.uto-gallery--grid { column-count: unset; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: var(--space-5) 0 0; }
.uto-gallery--grid .uto-gallery__item { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-carbon-2); }
.uto-gallery--grid .uto-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.uto-gallery--grid .uto-gallery__item:hover img { transform: scale(1.03); }
.uto-gallery--grid .uto-gallery__item figcaption { position: absolute; left: 0; bottom: 0; margin: 0; padding: 8px 12px; background: rgb(15 17 20 / 0.82); color: var(--color-niebla); }

.uto-process--lite { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
.uto-process--lite .uto-process__list { margin-top: var(--space-3); }
.uto-process--lite .uto-process__list h3 { font-size: var(--text-xl); }

@media (max-width: 960px) { .uto-prodsvc__grid, .uto-gallery--grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .uto-prodsvc__grid { grid-template-columns: 1fr; gap: var(--space-3); } .uto-gallery--grid { grid-template-columns: 1fr 1fr; gap: 8px; } }

/* Spot destacado: video a un lado, descripción al otro */
.uto-featspot { background: var(--color-carbon-3); }
.uto-featspot__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-6); align-items: center; }
.uto-featspot .uto-yt { margin: 0; }
.uto-featspot .uto-yt__meta { display: none; }
.uto-featspot__text h2 { font-size: var(--text-3xl); margin: 0 0 var(--space-1); }
.uto-featspot__client { margin: 0 0 var(--space-3); color: var(--color-acero-claro); }
.uto-featspot__desc { font-size: var(--text-lg); color: var(--color-niebla); margin: 0 0 var(--space-3); max-width: 38ch; }
.uto-featspot__text .uto-chips { margin: 0 0 var(--space-4); }
@media (max-width: 960px) { .uto-featspot__grid { grid-template-columns: 1fr; gap: var(--space-4); } .uto-featspot__desc { max-width: none; } }