/*
 * ARCE Motion — lenguaje de movimiento "crecer como un bosque".
 * Los estados ocultos solo se aplican con html.arce-motion (lo pone JS si el
 * usuario no pide movimiento reducido), así sin JS todo se ve normal.
 */

:root {
	--arce-ease: cubic-bezier(.19, 1, .22, 1);
	--arce-ease-rebote: cubic-bezier(.34, 1.56, .64, 1);
	--arce-naranja-m: #DD912F;
}

/* ── Anillos del tronco: fondo giratorio de portada, cabeceras y pie ── */

.arce-hero,
.arce-pie,
.arce-cabecera-interior {
	--anillo-w: 1180px;
	--anillo-top: 30px;
	isolation: isolate;
}
.arce-pie { --anillo-w: 1600px; --anillo-top: 170px; }
.arce-cabecera-interior {
	/* Centrado detrás del título (alineado a la derecha), algo por debajo de la mitad. */
	--anillo-w: 860px;
	--anillo-x: 79%;
	--anillo-top: calc(62% - var(--anillo-w) * .4956);
}

.arce-hero::before,
.arce-pie::before,
.arce-cabecera-interior::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: var(--anillo-x, 50%);
	top: var(--anillo-top);
	width: var(--anillo-w);
	/* Alto explícito: Elementor fija la altura de ::before en sus contenedores y anula aspect-ratio. */
	height: calc(var(--anillo-w) * .9911);
	aspect-ratio: 1800 / 1784;
	margin-left: calc(var(--anillo-w) / -2);
	/* Textura optimizada (WebP 1600 px, alfa comprimido); en pantallas pequeñas basta la de 1000 px. */
	background: url(img/tronco-1600.webp) center / contain no-repeat;
	pointer-events: none;
	scale: calc(1 + var(--hero-p, 0) * .08);
}

@media (max-width: 1024px) {
	.arce-hero { --anillo-w: 920px; --anillo-top: 50px; }
	.arce-hero::before { background-image: url(img/tronco-1000.webp); }
	.arce-cabecera-interior { --anillo-w: 760px; --anillo-x: 78%; }
}
@media (max-width: 767px) {
	.arce-pie::before,
	.arce-cabecera-interior::before { background-image: url(img/tronco-1000.webp); }
	.arce-hero { --anillo-w: 660px; --anillo-top: 70px; }
	.arce-cabecera-interior { --anillo-w: 520px; --anillo-x: 70%; --anillo-top: calc(60% - var(--anillo-w) * .4956); }
	.arce-pie { --anillo-w: 1000px; --anillo-top: 150px; }
}

.arce-motion .arce-hero::before,
.arce-motion .arce-cabecera-interior::before {
	animation: arce-gira 240s linear infinite;
}
.arce-motion .arce-pie::before {
	animation: arce-gira 300s linear infinite reverse;
}
@keyframes arce-gira { to { rotate: 360deg; } }

/* Profundidad al hacer scroll en la portada */
.arce-motion .arce-hero > * {
	translate: 0 calc(var(--hero-p, 0) * 90px);
	opacity: calc(1 - var(--hero-p, 0) * .9);
}

/* ── Logo: la hoja se mece como en una brisa ── */

.arce-motion .arce-logo svg {
	transform-origin: 50% 100%;
	animation: arce-brisa 7s ease-in-out infinite;
}
@keyframes arce-brisa {
	0%, 100% { rotate: 0deg; }
	30% { rotate: 3deg; }
	60% { rotate: -2deg; }
}

/* ── Aparición genérica ── */

.arce-motion .arce-r {
	opacity: 0;
	translate: 0 28px;
	transition:
		opacity .9s var(--arce-ease) var(--d, 0s),
		translate 1.1s var(--arce-ease) var(--d, 0s);
}
.arce-motion .arce-r.is-in {
	opacity: 1;
	translate: var(--mx, 0px) var(--my, 0px);
}

/* ── Titulares que brotan línea a línea ── */

.arce-linea {
	display: block;
	overflow: hidden;
	padding-bottom: .1em;
	margin-bottom: -.1em;
}
/* Si una línea no cabe (móvil estrecho), se parte en dos mitades parejas, sin palabras huérfanas. */
.arce-linea-in { display: block; text-wrap: balance; }

.arce-motion .arce-lineas-listas .arce-linea-in {
	translate: 0 108%;
	transition: translate 1.2s var(--arce-ease);
	transition-delay: calc(var(--d, 0s) + var(--i) * .12s);
}
.arce-motion .arce-lineas-listas.is-in .arce-linea-in { translate: 0 0; }

/* El punto final cae como una gota de savia */
.arce-motion .arce-lineas-listas .arce-linea:last-child strong {
	display: inline-block;
	opacity: 0;
}
.arce-motion .arce-lineas-listas.is-in .arce-linea:last-child strong {
	animation: arce-gota .9s var(--arce-ease-rebote) forwards;
	animation-delay: calc(var(--d, 0s) + var(--n, 1) * .12s + .55s);
}
@keyframes arce-gota {
	0% { opacity: 0; translate: 0 -.9em; scale: .6 1.3; }
	55% { opacity: 1; translate: 0 0; scale: 1.25 .75; }
	75% { scale: .9 1.1; }
	100% { opacity: 1; translate: 0 0; scale: 1; }
}

/* ── Etiquetas: el punto emite un anillo de crecimiento ── */

.arce-punto { position: relative; }
.arce-punto::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid var(--arce-naranja-m);
	opacity: 0;
	pointer-events: none;
}
.arce-motion .arce-etiqueta.is-in .arce-punto::after {
	animation: arce-anillo 2.4s var(--arce-ease) calc(var(--d, 0s) + .2s) 2;
}
@keyframes arce-anillo {
	0% { opacity: .9; scale: 1; }
	100% { opacity: 0; scale: 3.2; }
}

/* ── Entradilla: círculo a mano y subrayados ── */

.arce-marca {
	position: relative;
	white-space: nowrap;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
}
.arce-circulo {
	position: absolute;
	left: -10%;
	top: -45%;
	width: 120%;
	height: 190%;
	overflow: visible;
	pointer-events: none;
}
.arce-circulo path {
	fill: none;
	stroke: var(--arce-naranja-m);
	stroke-width: 1.6;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}
.arce-marca-sub { background-size: 100% 1px; }

.arce-motion .arce-anim-marcas .arce-marca-sub {
	background-size: 0 1px;
	transition: background-size 1s var(--arce-ease);
}
.arce-motion .arce-anim-marcas.is-in .arce-marca-sub {
	background-size: 100% 1px;
	transition-delay: calc(var(--d, 0s) + .7s + var(--j, 0) * .25s);
}
.arce-motion .arce-anim-marcas .arce-circulo path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 1.4s cubic-bezier(.65, 0, .35, 1);
}
.arce-motion .arce-anim-marcas.is-in .arce-circulo path {
	stroke-dashoffset: 0;
	transition-delay: calc(var(--d, 0s) + .35s);
}

/* ── Servicios: tarjetas con relieve y círculos que brotan ── */

.arce-tarjeta {
	transition: transform .5s var(--arce-ease), box-shadow .5s var(--arce-ease);
	transform-style: preserve-3d;
	will-change: transform;
}
.arce-tarjeta:hover {
	box-shadow: 0 24px 48px -24px rgba(52, 56, 59, .35);
}
.arce-tarjeta:hover .arce-boton-puntos {
	box-shadow: 0 0 0 7px rgba(221, 145, 47, .22);
}

.arce-motion .arce-icono.arce-r:not(.is-in) .arce-icono-circulo { scale: 0; }
.arce-icono-circulo { transition: scale .6s var(--arce-ease-rebote); }
.arce-motion .arce-icono.is-in .arce-icono-circulo {
	animation:
		arce-brota 1s var(--arce-ease-rebote) calc(var(--d, 0s) + .15s) backwards,
		arce-flota 7s ease-in-out calc(var(--d, 0s) + 1.1s) infinite alternate;
}
.arce-icono:hover .arce-icono-circulo { scale: 1.22; }
.arce-motion .arce-icono.is-in .e-svg-base {
	animation: arce-flota-inv 9s ease-in-out 1.2s infinite alternate;
}
@keyframes arce-brota { from { scale: 0; } }
@keyframes arce-flota {
	0% { translate: 0 0; }
	100% { translate: 6px -5px; }
}
@keyframes arce-flota-inv {
	0% { translate: 0 0; }
	100% { translate: -4px 4px; }
}

/* ── Enlaces "saber más" y redes ── */

/* El SVG va en línea dentro de su caja y se asienta en la línea base: en bloque queda centrado. */
.arce-saber-mas .e-svg-base svg,
.arce-red .e-svg-base svg { display: block; }
.arce-saber-mas .e-svg-base { transition: translate .5s var(--arce-ease); }
.arce-saber-mas:hover .e-svg-base { animation: arce-empuja 1.1s var(--arce-ease) infinite; }
@keyframes arce-empuja {
	0%, 100% { translate: 0 0; }
	50% { translate: 8px 0; }
}

.arce-red { overflow: visible; }
.arce-red .e-paragraph-base {
	background: linear-gradient(var(--arce-naranja-m), var(--arce-naranja-m)) 0 92% / 0 1px no-repeat;
	transition: background-size .6s var(--arce-ease), color .3s;
}
.arce-red:hover .e-paragraph-base { background-size: 100% 1px; }
.arce-red .e-svg-base { overflow: hidden; }
.arce-red:hover .e-svg-base svg { animation: arce-sale .7s var(--arce-ease); }
@keyframes arce-sale {
	0% { translate: 0 0; }
	45% { translate: 120% -120%; }
	46% { translate: -120% 120%; }
	100% { translate: 0 0; }
}

/* ── Elementos magnéticos ── */

.arce-magnet { transition: translate .45s var(--arce-ease); }
.arce-magnet:not(.arce-r) { translate: var(--mx, 0px) var(--my, 0px); }

/* ── Foto de hojas: ocupa la pantalla, se queda fijada y el pie pasa por encima ──
   --fi: 0→1 mientras entra hasta arriba · --fo: 0→1 mientras el pie la cubre. */

html .elementor .arce-foto-parallax {
	--foto-r: 40px;
	position: sticky;
	top: 0;
	z-index: 0;
	/* Pantalla completa, pero sin recortar la foto (3:2) más allá de su ancho:
	   el original es de 1920 px y, ampliado, se pixela. */
	height: min(100vh, 66.7vw);
	height: min(100svh, 66.7vw);
	border-radius: calc(var(--foto-r) * (1 - var(--fi, 0))) calc(var(--foto-r) * (1 - var(--fi, 0))) 0 0;
	transform: translate3d(0, var(--fy, 0px), 0);
}
@media (max-width: 767px) {
	/* En móvil algo más alta: con la densidad de pantalla del móvil sigue habiendo píxeles de sobra. */
	html .elementor .arce-foto-parallax { --foto-r: 28px; height: min(100svh, 112vw); }
}
html .elementor .arce-foto-parallax + * {
	position: relative;
	z-index: 1;
}
html .elementor .arce-foto-parallax + * .arce-pie {
	box-shadow: 0 -30px 60px rgba(0, 0, 0, .28);
}
.arce-foto-parallax::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 45%, var(--arce-oscuro));
	opacity: calc(var(--fo, 0) * .6);
	pointer-events: none;
}
/* Zoom contenido: la foto original es de 1920 px y no admite mucha ampliación.
   Encuadre centrado en la hoja (55 % de alto). */
html .elementor .arce-foto-parallax img {
	object-position: center 55%;
}
.arce-foto-parallax img {
	will-change: transform;
	transform-origin: center 55%;
	transform: scale(calc(1.1 - var(--fi, 0) * .1 + var(--fo, 0) * .03));
}

/* ── Cursor-semilla (solo puntero fino) ── */

#arce-cursor {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99999;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 1px solid var(--arce-naranja-m);
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	transition: opacity .3s, width .35s var(--arce-ease), height .35s var(--arce-ease), margin .35s var(--arce-ease), background-color .35s;
}
#arce-cursor.is-visible { opacity: .9; }
#arce-cursor.is-grande {
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	background-color: rgba(221, 145, 47, .12);
}

/* ── Transición entre páginas ── */

.arce-motion body { animation: arce-entra .7s var(--arce-ease) both; }
.arce-motion body.arce-saliendo {
	opacity: 0;
	transition: opacity .35s ease;
}
@keyframes arce-entra { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	.arce-hero::before,
	.arce-pie::before,
	.arce-cabecera-interior::before { animation: none !important; scale: 1; }
	#arce-cursor { display: none; }
}

/* ── Menú: escritorio pequeño, tablet/móvil botón + panel a pantalla completa ── */

/* Selectores reforzados: las clases de Elementor fijan display: flex. */
html .elementor .arce-menu-boton,
html #arce-menu { display: none; }

@media (max-width: 1024px) {
	html.arce-js .elementor .arce-nav-escritorio { display: none; }
	html.arce-js .elementor .arce-menu-boton { display: flex; position: relative; z-index: 9001; }
	html.arce-js #arce-menu { display: flex; }
}

.arce-menu-abierto,
.arce-menu-abierto body { overflow: hidden; }

.arce-menu-panel {
	position: fixed;
	inset: 0;
	z-index: 9000;
	overflow: hidden auto;
	isolation: isolate;
	visibility: hidden;
	clip-path: circle(0% at calc(100% - 52px) 52px);
	transition: clip-path .7s cubic-bezier(.65, 0, .35, 1), visibility 0s linear .7s;
}
.arce-menu-abierto .arce-menu-panel {
	visibility: visible;
	clip-path: circle(150% at calc(100% - 52px) 52px);
	transition: clip-path .9s cubic-bezier(.65, 0, .35, 1), visibility 0s;
}
.arce-menu-panel::before {
	content: "";
	position: absolute;
	z-index: -1;
	right: -260px;
	bottom: -300px;
	width: 900px;
	aspect-ratio: 1800 / 1784;
	background: url(img/tronco-1000.webp) center / contain no-repeat;
	opacity: .6;
	pointer-events: none;
	animation: arce-gira 200s linear infinite;
}

/* Botón de apertura */
.arce-menu-raya { transition: width .5s var(--arce-ease); }
.arce-menu-boton:hover .arce-menu-raya:last-child { width: 18px; min-width: 18px; }

/* Ambos botones sin el estilo de botón del tema Hello (rosa al pasar el ratón) */
html .arce-menu-boton,
html .arce-menu-boton:hover,
html .arce-menu-boton:focus,
html .arce-menu-cerrar,
html .arce-menu-cerrar:hover,
html .arce-menu-cerrar:focus {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Botón de cierre, en la misma posición que el de apertura: dos rayas en X */
.arce-menu-cerrar {
	position: fixed;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: Metropolis, sans-serif;
	font-size: 12px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #fff;
}
.arce-menu-cerrar i {
	position: relative;
	width: 26px;
	height: 26px;
}
.arce-menu-cerrar i::before,
.arce-menu-cerrar i::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 26px;
	height: 1px;
	background: currentColor;
	transition: rotate .6s var(--arce-ease) .3s;
}
.arce-menu-abierto .arce-menu-cerrar i::before { rotate: 45deg; }
.arce-menu-abierto .arce-menu-cerrar i::after { rotate: -45deg; }
.arce-menu-cerrar:hover { color: var(--arce-naranja-m); }
.arce-menu-cerrar:focus-visible,
.arce-menu-boton:focus-visible,
.arce-menu-grande:focus-visible { outline: 1px dashed var(--arce-naranja-m); outline-offset: 6px; }

/* Enlaces grandes: número naranja y entrada en cascada */
.arce-menu-grande span {
	font-family: var(--arce-texto, Metropolis);
	font-size: 13px;
	letter-spacing: 1px;
	color: var(--arce-naranja-m);
	translate: 0 -.6em;
}
.arce-menu-grande,
.arce-menu-pie {
	opacity: 0;
	translate: 0 36px;
	transition: opacity .5s ease, translate .9s var(--arce-ease);
}
.arce-menu-abierto .arce-menu-grande,
.arce-menu-abierto .arce-menu-pie {
	opacity: 1;
	translate: 0 0;
	transition-delay: calc(.25s + var(--k, 0) * .06s);
}
.arce-menu-grande:nth-child(2) { --k: 1; }
.arce-menu-grande:nth-child(3) { --k: 2; }
.arce-menu-grande:nth-child(4) { --k: 3; }
.arce-menu-grande:nth-child(5) { --k: 4; }
.arce-menu-grande:nth-child(6) { --k: 5; }
.arce-menu-pie { --k: 7; }
.arce-menu-grande { transition-property: opacity, translate, color; }
.arce-menu-grande:hover { translate: 14px 0; }

/* Enlace pequeño de escritorio: subrayado que crece */
.arce-menu-enlace {
	background: linear-gradient(var(--arce-naranja-m), var(--arce-naranja-m)) 100% 100% / 0 1px no-repeat;
	transition: background-size .4s var(--arce-ease), color .3s;
}
.arce-menu-enlace:hover { background-position: 0 100%; background-size: 100% 1px; }

@media (prefers-reduced-motion: reduce) {
	.arce-menu-panel,
	.arce-menu-abierto .arce-menu-panel { clip-path: none; transition: visibility 0s; }
	.arce-menu-panel::before { animation: none; }
	.arce-menu-grande,
	.arce-menu-pie { opacity: 1; translate: none; transition: none; }
}

/* ── Indicador de scroll: un tallo que crece y se recoge ── */

.arce-scroll-tallo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--arce-naranja-m);
	transform-origin: 50% 0;
	scale: 1 0;
}
.arce-motion .arce-scroll-tallo::after { animation: arce-tallo 2.4s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes arce-tallo {
	0% { transform-origin: 50% 0; scale: 1 0; }
	45% { transform-origin: 50% 0; scale: 1 1; }
	55% { transform-origin: 50% 100%; scale: 1 1; }
	100% { transform-origin: 50% 100%; scale: 1 0; }
}
.arce-scroll:hover { color: var(--arce-naranja-m); }

/* ── Proyectos: la imagen se descubre como una persiana y respira al pasar ── */

.arce-proyecto-imagen > * { transition: scale 1.2s var(--arce-ease); }
.arce-proyecto:hover .arce-proyecto-imagen > * { scale: 1.06; }
.arce-proyecto-imagen::after {
	content: "Ver proyecto  \2192";
	position: absolute;
	left: 50%;
	top: 50%;
	padding: 14px 22px;
	border-radius: 999px;
	background: #34383B;
	color: #fff;
	font: 800 12px/1 Metropolis, sans-serif;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	white-space: pre;
	opacity: 0;
	translate: -50% -30%;
	transition: opacity .4s ease, translate .6s var(--arce-ease);
	pointer-events: none;
}
.arce-proyecto:hover .arce-proyecto-imagen::after { opacity: 1; translate: -50% -50%; }
.arce-motion .arce-proyecto.arce-r .arce-proyecto-imagen {
	clip-path: inset(100% 0 0 0 round 24px);
	transition: clip-path 1.3s cubic-bezier(.65, 0, .35, 1) var(--d, 0s);
}
.arce-motion .arce-proyecto.arce-r.is-in .arce-proyecto-imagen { clip-path: inset(0 0 0 0 round 24px); }
.arce-proyecto-titulo { transition: color .3s; }
.arce-proyecto:hover .arce-proyecto-titulo { color: var(--arce-naranja-m); }

/* ── Testimonios: comillas de titular ── */

.arce-testimonio::before {
	content: "\201C";
	position: absolute;
	left: 28px;
	top: 6px;
	font: 400 96px/1 Oranienbaum, serif;
	color: var(--arce-naranja-m);
}

/* ── Llamada a la acción: una semilla que brota al entrar en pantalla ── */

.arce-cta { isolation: isolate; }
.arce-brote {
	position: absolute;
	z-index: -1;
	right: 9%;
	bottom: 40px;
	height: 78%;
	max-height: 520px;
	aspect-ratio: 300 / 400;
	overflow: visible;
	pointer-events: none;
	transform-origin: 50% 100%;
	transition: scale .8s var(--arce-ease-rebote);
}
.arce-brote .tierra { stroke: rgba(82, 86, 88, .35); stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.arce-brote .tallo { fill: none; stroke: #525658; stroke-width: 1.6; stroke-linecap: round; }
.arce-brote .hoja {
	fill: rgba(221, 145, 47, .18);
	stroke: var(--arce-naranja-m);
	stroke-width: 1.6;
	stroke-linejoin: round;
	transform-box: fill-box;
}
.arce-brote .hoja-izq { transform-origin: 100% 100%; }
.arce-brote .hoja-der { transform-origin: 0% 100%; }
.arce-brote .yema { transform-origin: 50% 100%; }
.arce-brote .semilla { fill: var(--arce-naranja-m); transform-box: fill-box; transform-origin: 50% 50%; }
.arce-cta:has(.arce-boton:hover) .arce-brote { scale: 1.06; }

/* Estado inicial (solo con animaciones activas): nada dibujado */
.arce-motion .arce-brote .tallo,
.arce-motion .arce-brote .hoja { stroke-dasharray: 1; stroke-dashoffset: 1; }
.arce-motion .arce-brote .hoja { fill-opacity: 0; }
.arce-motion .arce-brote .semilla { scale: 0; translate: 0 -60px; opacity: 0; }

.arce-motion .is-brota .arce-brote .semilla {
	animation: arce-semilla .8s cubic-bezier(.5, 0, .75, 0) forwards, arce-asienta .5s var(--arce-ease-rebote) .8s forwards;
}
.arce-motion .is-brota .arce-brote .tallo {
	transition: stroke-dashoffset 1.6s cubic-bezier(.65, 0, .35, 1) 1.1s;
	stroke-dashoffset: 0;
}
.arce-motion .is-brota .arce-brote .hoja {
	stroke-dashoffset: 0;
	fill-opacity: 1;
	transition: stroke-dashoffset 1s cubic-bezier(.65, 0, .35, 1) var(--h), fill-opacity .8s ease calc(var(--h) + .8s);
}
.arce-brote .hoja-izq { --h: 2s; }
.arce-brote .hoja-der { --h: 2.3s; }
.arce-brote .yema { --h: 2.6s; }

.arce-motion .is-brota .arce-brote .hoja-izq { animation: arce-mece-izq 6s ease-in-out 3.6s infinite; }
.arce-motion .is-brota .arce-brote .hoja-der { animation: arce-mece-der 7s ease-in-out 3.9s infinite; }
.arce-motion .is-brota .arce-brote .yema { animation: arce-mece-yema 5s ease-in-out 4.2s infinite; }
.arce-cta:has(.arce-boton:hover) .arce-brote .hoja { animation-duration: 1.6s !important; }

@keyframes arce-semilla {
	0% { opacity: 0; scale: .6; translate: 0 -60px; }
	30% { opacity: 1; }
	100% { opacity: 1; scale: 1; translate: 0 0; }
}
@keyframes arce-asienta {
	0% { opacity: 1; translate: 0 0; scale: 1.3 .7; }
	100% { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes arce-mece-izq { 0%, 100% { rotate: 0deg; } 50% { rotate: -7deg; } }
@keyframes arce-mece-der { 0%, 100% { rotate: 0deg; } 50% { rotate: 6deg; } }
@keyframes arce-mece-yema { 0%, 100% { rotate: 0deg; } 50% { rotate: 4deg; } }

@media (max-width: 1024px) {
	.arce-brote { right: 2%; height: 60%; opacity: .55; }
}
@media (max-width: 767px) {
	.arce-brote { right: -30px; bottom: 24px; height: 300px; opacity: .35; }
}
.arce-boton .e-svg-base { transition: translate .4s var(--arce-ease); }
.arce-boton:hover .e-svg-base { translate: 4px -4px; }
.arce-boton .e-svg-base svg { display: block; }
/* La flecha es naranja como el fondo en hover: pasa al tono oscuro del texto para no desaparecer. */
.arce-boton .e-svg-base svg * { transition: stroke .3s; }
.arce-boton:hover .e-svg-base svg *,
.arce-boton:focus-visible .e-svg-base svg * { stroke: var(--arce-oscuro, #34383B); }

/* Las piezas escaladas (parallax, anillos) nunca deben crear scroll horizontal. */
html, body { overflow-x: clip; }
.arce-foto-parallax { overflow: clip; }

/* ── Avatar de Sobre mí: se asoma, saluda, mira al cursor y se esconde al bajar ── */

.arce-avatar { cursor: pointer; }
.arce-motion .arce-avatar {
	translate: 0 105%;
	transform: translateY(var(--av-s, 0px)) rotate(var(--av-r, 0deg));
	transition: transform .6s var(--arce-ease);
}
.arce-motion .arce-avatar.is-asomado {
	animation: arce-asoma 2.6s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
.arce-motion .arce-avatar.is-ya {
	translate: 0 0;
	animation: arce-respira-av 5s ease-in-out infinite;
}
.arce-motion .arce-avatar.is-ya.is-saluda {
	animation: arce-saluda .9s ease-in-out;
}
@keyframes arce-asoma {
	0% { translate: 0 105%; }
	30% { translate: 0 60%; }
	58% { translate: 0 60%; }
	68% { translate: 0 54%; }
	100% { translate: 0 0; }
}
@keyframes arce-respira-av {
	0%, 100% { rotate: 0deg; scale: 1 1; }
	50% { rotate: 1.2deg; scale: 1 1.012; }
}
@keyframes arce-saluda {
	0%, 100% { rotate: 0deg; }
	20% { rotate: -6deg; }
	40% { rotate: 5deg; }
	60% { rotate: -4deg; }
	80% { rotate: 2deg; }
}

.arce-bocadillo {
	position: absolute;
	z-index: 3;
	padding: 10px 18px 12px;
	border-radius: 20px 20px 20px 4px;
	background: #fff;
	color: #34383B;
	font: 400 24px/1 Oranienbaum, serif;
	white-space: nowrap;
	box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .45);
	opacity: 0;
	scale: .5;
	translate: 0 -100%;
	transform-origin: 0 100%;
	transition: opacity .3s ease, scale .6s var(--arce-ease-rebote);
	pointer-events: none;
}
.arce-bocadillo span { color: var(--arce-naranja-texto, #A0601A); }
.arce-bocadillo.is-visible { opacity: 1; scale: 1; }
@media (max-width: 767px) {
	.arce-bocadillo { font-size: 18px; padding: 8px 14px 10px; }
}

/* ── Accesibilidad: saltar al contenido y foco visible con teclado ── */

.arce-saltar {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 100000;
	padding: 12px 20px;
	border-radius: 999px;
	background: var(--arce-oscuro, #34383B);
	color: #fff;
	font: 800 14px/1 var(--arce-texto, Metropolis), sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	translate: 0 -200%;
	transition: translate .3s var(--arce-ease);
}
.arce-saltar:focus { translate: 0 0; outline: 2px solid var(--arce-naranja-m); outline-offset: 3px; }
#contenido:focus { outline: none; }

/* Anillo de foco: oscuro sobre fondos claros, naranja sobre los oscuros (contraste ≥ 3:1). */
.elementor a:focus-visible,
.elementor button:focus-visible,
.elementor [tabindex]:not([tabindex="-1"]):focus-visible {
	outline: 2px solid var(--arce-oscuro, #34383B);
	outline-offset: 4px;
	border-radius: 4px;
}
.arce-boton:focus-visible,
.arce-boton-puntos:focus-visible { border-radius: 999px; }
.arce-hero a:focus-visible,
.arce-pie a:focus-visible,
.arce-cabecera-interior a:focus-visible,
.arce-hero button:focus-visible,
.arce-cabecera-interior button:focus-visible,
#arce-menu a:focus-visible {
	outline-color: var(--arce-naranja-m);
}

/* Bloques sin contenido todavía (clase arce-oculto): fuera de la web pública, visibles en el editor. */
html body .elementor .arce-oculto { display: none; }

/* Tabla de cookies (generada por ARCE Cookies) dentro de las páginas legales */
.elementor .arce-legal-texto h3 {
	margin: 36px 0 14px;
	font: 400 30px/1.1 var(--arce-titular, Oranienbaum), serif;
	color: var(--arce-oscuro, #34383B);
}
.elementor .arce-legal-texto table {
	width: 100%;
	margin: 0 0 8px;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.45;
}
.elementor .arce-legal-texto th {
	padding: 12px 14px;
	border-bottom: 2px solid var(--arce-naranja-m);
	background: var(--arce-fondo-claro, #F8F9FA);
	color: var(--arce-gris, #525658);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1px;
	text-align: left;
	text-transform: uppercase;
}
.elementor .arce-legal-texto td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--arce-gris-tarjeta, #DEE4E6);
	vertical-align: top;
}
.elementor .arce-legal-texto td:first-child {
	color: var(--arce-oscuro, #34383B);
	font-weight: 800;
	overflow-wrap: anywhere;
}
@media (max-width: 767px) {
	.elementor .arce-legal-texto table { display: block; overflow-x: auto; }
	.elementor .arce-legal-texto th,
	.elementor .arce-legal-texto td { min-width: 120px; }
}
/* Enlaces y destacados del texto legal con el naranja de texto (contraste ≥ 4,5:1). */
html .elementor .arce-legal-texto a,
html .elementor .arce-legal-texto em { color: var(--arce-naranja-texto, #A0601A); }

/* ── Formulario de contacto (pie) ── */
.elementor .arce-campo::placeholder { color: rgba(255, 255, 255, .6); opacity: 1; }
.elementor select.arce-campo {
	padding-right: 28px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23DD912F' stroke-width='1.6'/%3E%3C/svg%3E") right 4px center / 12px 8px no-repeat;
}
.elementor select.arce-campo option { color: #34383B; background: #fff; }
.elementor .arce-form input[type="checkbox"]:checked { background-color: var(--arce-naranja-m); border-color: var(--arce-naranja-m); }
.elementor .arce-form .arce-campo:focus-visible { outline: none; }

/* ── Mapa de la carrera (Eventos) ── */
.arce-mapa { --avance: 0; }
.arce-mapa .arce-ruta {
	stroke-dasharray: 1;
	stroke-dashoffset: calc(1 - var(--avance));
	transition: stroke-dashoffset 1.4s var(--arce-ease);
}
.arce-mapa .arce-parada {
	cursor: pointer;
	transform-box: fill-box;
	transform-origin: center;
	transition: fill .4s, stroke .4s, scale .5s var(--arce-ease-rebote);
}
.arce-mapa .arce-parada.is-pasada { fill: var(--arce-naranja-m); stroke: var(--arce-naranja-m); }
.arce-mapa .arce-parada.is-activa { fill: var(--arce-naranja-m); stroke: #fff; stroke-width: 4; scale: 1.45; }
.arce-mapa .arce-parada:hover { scale: 1.25; }
.arce-mapa .arce-parada.is-activa:hover { scale: 1.45; }

.arce-parada-tab { position: relative; }
.arce-parada-tab[aria-selected="true"] { color: var(--arce-oscuro); }
.arce-parada-tab::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 34px;
	height: 2px;
	margin-left: -17px;
	background: var(--arce-naranja-m);
	scale: 0 1;
	transition: scale .4s var(--arce-ease);
}
.arce-parada-tab[aria-selected="true"]::after { scale: 1 1; }
@media (max-width: 767px) {
	.arce-parada-tab::after { display: none; }
	html .elementor .arce-parada-tab[aria-selected="true"] { background: var(--arce-oscuro); border-color: var(--arce-oscuro); color: #fff; }
	html .elementor .arce-parada-tab[aria-selected="true"] .arce-parada-nombre span { color: var(--arce-naranja-m); }
}

/* Al cambiar de parada, el panel aparece y las fichas entran en cascada */
.arce-motion .arce-parada-panel { animation: arce-panel .6s var(--arce-ease) both; }
.arce-motion .arce-parada-panel .arce-material { animation: arce-panel .7s var(--arce-ease) both; }
.arce-motion .arce-parada-panel .arce-material:nth-child(2) { animation-delay: .07s; }
.arce-motion .arce-parada-panel .arce-material:nth-child(3) { animation-delay: .14s; }
.arce-motion .arce-parada-panel .arce-material:nth-child(4) { animation-delay: .21s; }
@keyframes arce-panel { from { opacity: 0; translate: 0 18px; } }
.arce-material { transition: translate .4s var(--arce-ease), box-shadow .4s; }
.arce-material:hover { translate: 0 -4px; box-shadow: 0 18px 40px rgba(52, 56, 59, .08); }
@media (prefers-reduced-motion: reduce) {
	.arce-mapa .arce-ruta { transition: none; }
}

/* Eventos: franja de ventajas */
html .elementor #como-funciona ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}
html .elementor #como-funciona li { display: flex; align-items: center; gap: 10px; font-weight: 800; }
html .elementor #como-funciona li::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--arce-naranja-m);
}

/* ── Catálogo de materiales (plugin ARCE Materiales: [arce_materiales] y [arce_familias]) ── */
.arce-fichas,
.arce-familias { display: grid; width: 100%; margin-block-start: 18px; }
.arce-fichas { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.arce-familias { grid-template-columns: repeat(3, 1fr); gap: 30px; margin-block-start: 24px; }
.arce-ficha,
.arce-familia { display: flex; flex-direction: column; border-radius: 24px; }
.arce-ficha { gap: 6px; padding: 22px 22px 26px; background: var(--arce-fondo-claro, #F8F9FA); transition: translate .4s var(--arce-ease), box-shadow .4s; }
.arce-ficha:hover { translate: 0 -4px; box-shadow: 0 18px 40px rgba(52, 56, 59, .08); }
.arce-familia { gap: 10px; padding: 28px 30px 34px; background: var(--arce-gris-tarjeta, #DEE4E6); }
html body .arce-ficha-img { width: 100%; height: 200px; max-height: 200px; object-fit: contain; margin-block-end: 12px; }
.arce-ficha-nombre { margin: 0; font: 800 17px/1.25 var(--arce-texto, Metropolis), sans-serif; color: var(--arce-oscuro, #34383B); }
.arce-ficha-uso { margin: 0; font: 400 14px/1.45 var(--arce-texto, Metropolis), sans-serif; color: var(--arce-gris, #525658); }
.arce-familia-nombre { margin: 0; font: 800 22px/1.2 var(--arce-texto, Metropolis), sans-serif; color: var(--arce-naranja-texto, #A0601A); }
.arce-familia-texto { margin: 0; font: 400 16px/1.5 var(--arce-texto, Metropolis), sans-serif; color: var(--arce-gris, #525658); }
.arce-familia-incluye { margin: 6px 0 0; font: 400 13px/1.5 var(--arce-texto, Metropolis), sans-serif; color: var(--arce-oscuro, #34383B); }
.arce-familia-incluye span { display: block; font-weight: 800; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--arce-gris, #525658); }
@media (max-width: 1024px) {
	.arce-fichas { grid-template-columns: repeat(2, 1fr); }
	.arce-familias { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.arce-fichas { gap: 12px; }
	.arce-familias { grid-template-columns: 1fr; }
	.arce-ficha { padding: 14px 14px 18px; border-radius: 18px; }
	html body .arce-ficha-img { height: 130px; max-height: 130px; }
	.arce-ficha-nombre { font-size: 14px; }
	.arce-ficha-uso { font-size: 13px; }
}
/* Las fichas entran en cascada al cambiar de parada (como antes) */
.arce-motion .arce-parada-panel .arce-ficha { animation: arce-panel .7s var(--arce-ease) both; }
.arce-motion .arce-parada-panel .arce-ficha:nth-child(2) { animation-delay: .07s; }
.arce-motion .arce-parada-panel .arce-ficha:nth-child(3) { animation-delay: .14s; }
.arce-motion .arce-parada-panel .arce-ficha:nth-child(4) { animation-delay: .21s; }
.arce-motion .arce-parada-panel .arce-ficha:nth-child(n+5) { animation-delay: .28s; }

/* ── Eventos: «Y no solo para carreras» — cintas de tipos de evento ── */
#todo-evento [data-id="75015b53"],
#todo-evento [data-id="3132b8ec"] { overflow: hidden; width: calc(100% + 2 * var(--arce-sangrado, 128px)); margin-inline: calc(-1 * var(--arce-sangrado, 128px)); }
@media (max-width: 1024px) { #todo-evento { --arce-sangrado: 48px; } }
@media (max-width: 767px) { #todo-evento { --arce-sangrado: 20px; } }
#todo-evento :is([data-id="6d86c1de"], [data-id="222d91e"]) {
	display: flex;
	width: max-content;
	white-space: nowrap;
	font: 400 clamp(40px, 6.2vw, 96px)/1.15 var(--arce-titular, Oranienbaum), serif;
	color: #fff;
}
#todo-evento :is([data-id="6d86c1de"], [data-id="222d91e"]) span { display: inline-flex; align-items: center; }
#todo-evento :is([data-id="6d86c1de"], [data-id="222d91e"]) span::after {
	content: "";
	width: .16em;
	height: .16em;
	margin: 0 .55em;
	border-radius: 50%;
	background: var(--arce-naranja-m);
}
#todo-evento :is([data-id="6d86c1de"], [data-id="222d91e"]) span:nth-child(even) { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .55); }
#todo-evento [data-id="222d91e"] { color: rgba(255, 255, 255, .9); }
.arce-motion #todo-evento :is([data-id="6d86c1de"], [data-id="222d91e"]) { animation: arce-cinta 48s linear infinite; }
.arce-motion #todo-evento [data-id="222d91e"] { animation-duration: 56s; animation-direction: reverse; }
#todo-evento:hover :is([data-id="6d86c1de"], [data-id="222d91e"]) { animation-play-state: paused; }
@keyframes arce-cinta { to { translate: -50% 0; } }
@media (prefers-reduced-motion: reduce) {
	#todo-evento :is([data-id="6d86c1de"], [data-id="222d91e"]) { animation: none; flex-wrap: wrap; width: auto; white-space: normal; }
	#todo-evento :is([data-id="6d86c1de"], [data-id="222d91e"]) span:nth-child(n+6) { display: none; }
}
/* Botón naranja de «Y no solo para carreras»: la flecha (naranja de serie) va siempre en oscuro. */
html .elementor #todo-evento .arce-boton .e-svg-base svg * { stroke: var(--arce-oscuro, #34383B); }

/* ── Hero: el tronco hecho de semillas (arce-bosque.js); el anillo CSS se retira al aparecer ── */
.arce-semillas { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.arce-hero::before { transition: opacity 1.2s ease; }
.arce-hero--semillas::before { opacity: .5; }

/* ── Texto que brota (clase global arce-brota) ── */
.arce-brota-lista .arce-palabra {
	display: inline-block;
	opacity: .2;
	translate: 0 .18em;
	transition: opacity .5s var(--arce-ease), translate .6s var(--arce-ease);
}
.arce-brota-lista .arce-palabra.is-on { opacity: 1; translate: 0 0; }
/* Los destacados naranjas brotan en naranja. */
.arce-brota-lista strong .arce-palabra.is-on { color: var(--arce-naranja-texto, #A0601A); }

/* ── Barra flotante (arce-menu.js): aparece al bajar; el tallo crece con lo leído ── */
.arce-pildora {
	--leido: 0;
	position: fixed;
	top: 14px;
	left: 50%;
	z-index: 8000;
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: calc(100% - 28px);
	padding: 7px 7px 7px 14px;
	border-radius: 999px;
	background: rgba(52, 56, 59, .9);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
	box-shadow: 0 14px 40px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(255, 255, 255, .08);
	overflow: hidden;
	translate: -50% -140%;
	opacity: 0;
	transition: translate .6s var(--arce-ease), opacity .4s;
}
.arce-pildora.is-visible { translate: -50% 0; opacity: 1; }
.arce-pildora-logo { display: flex; width: 26px; height: 34px; margin-inline-end: 8px; }
.arce-pildora-logo svg { width: 100%; height: 100%; }
.arce-pildora-enlaces { display: flex; gap: 2px; }
.arce-pildora a { text-decoration: none; }
.arce-pildora-enlaces a {
	padding: 9px 14px;
	border-radius: 999px;
	color: rgba(255, 255, 255, .78);
	font: 400 13px/1 var(--arce-texto, Metropolis), sans-serif;
	letter-spacing: .5px;
	transition: background-color .3s, color .3s;
}
.arce-pildora-enlaces a:hover,
.arce-pildora-enlaces a[aria-current="page"] { background: rgba(255, 255, 255, .1); color: #fff; }
.arce-pildora-boton {
	margin-inline-start: 6px;
	padding: 11px 18px;
	border-radius: 999px;
	background: var(--arce-naranja-m);
	color: var(--arce-oscuro, #34383B);
	font: 800 12px/1 var(--arce-texto, Metropolis), sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: background-color .3s;
}
.arce-pildora-boton:hover { background: #fff; }
.arce-pildora-menu { display: none; }
/* El tallo: una línea naranja en la base que avanza con la lectura, rematada por una yema. */
.arce-pildora-tallo {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, var(--arce-naranja-m), #F2B66B);
	transform-origin: left center;
	scale: var(--leido) 1;
	pointer-events: none;
}
.arce-pildora :focus-visible { outline: 2px solid var(--arce-naranja-m); outline-offset: 2px; }
@media (max-width: 1024px) {
	.arce-pildora { padding: 6px 6px 6px 12px; }
	.arce-pildora-enlaces { display: none; }
	html body .arce-pildora .arce-pildora-menu {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 14px;
		border: 0;
		border-radius: 999px;
		background: transparent;
		color: #fff;
		font: 400 12px/1 var(--arce-texto, Metropolis), sans-serif;
		letter-spacing: 1px;
		text-transform: uppercase;
		cursor: pointer;
	}
	.arce-pildora-menu i { position: relative; width: 22px; height: 8px; border-block: 1px solid currentColor; }
}
@media (max-width: 480px) {
	.arce-pildora-boton { display: none; }
}

/* ── Pie: «ARCE» gigante relleno con los anillos del tronco; sube al llegar al final ── */
html .elementor #arce-pie-marca .e-paragraph-base {
	--sube: 0;
	display: block;
	width: 100%;
	font: 400 clamp(120px, 27vw, 520px)/.78 var(--arce-titular, Oranienbaum), serif;
	text-align: center;
	letter-spacing: -.01em;
	color: transparent;
	background: url(img/tronco-1600.webp) center 40% / 120% auto no-repeat, linear-gradient(rgba(255, 255, 255, .34), rgba(255, 255, 255, .1));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-stroke: 1px rgba(221, 145, 47, .35);
	translate: 0 calc((1 - var(--sube)) * 35%);
	user-select: none;
}
@media (max-width: 767px) {
	html .elementor #arce-pie-marca .e-paragraph-base { background-image: url(img/tronco-1000.webp), linear-gradient(rgba(255, 255, 255, .34), rgba(255, 255, 255, .1)); }
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Sin animaciones (movimiento reducido o sin JS), el «ARCE» del pie queda ya en su sitio. */
html:not(.arce-motion) .elementor #arce-pie-marca .e-paragraph-base { translate: 0 0; }
.arce-cabecera-interior::before { transition: opacity 1.2s ease; }
.arce-cabecera--semillas::before { opacity: .5; }
/* Sobre fondo oscuro, los destacados brotan en el naranja de marca (el de texto es para fondos claros). */
#hecho-a-mano .arce-brota-lista strong .arce-palabra.is-on,
#hecho-a-mano strong { color: var(--arce-naranja-m); }
#hecho-a-mano .arce-brota-lista .arce-palabra { opacity: .16; }

/* ── Portfolio (plugin ARCE Portfolio): [arce_proyectos] y [arce_testimonios] ── */
/* Sin contenido publicado, la sección entera desaparece. */
html body .elementor .arce-seccion:has(.arce-vacio) { display: none; }

.arce-casos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px 40px; width: 100%; margin-block-start: 24px; }
.arce-caso-enlace { display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; }
.arce-caso-imagen { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 24px; background: var(--arce-gris-tarjeta, #DEE4E6); }
.arce-caso-imagen img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--arce-ease); }
a.arce-caso-enlace:hover .arce-caso-imagen img { scale: 1.05; }
.arce-caso-ver {
	position: absolute;
	right: 18px;
	bottom: 18px;
	padding: 12px 18px;
	border-radius: 999px;
	background: var(--arce-oscuro, #34383B);
	color: #fff;
	font: 800 12px/1 var(--arce-texto, Metropolis), sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	opacity: 0;
	translate: 0 10px;
	transition: opacity .4s, translate .5s var(--arce-ease);
}
a.arce-caso-enlace:hover .arce-caso-ver,
a.arce-caso-enlace:focus-visible .arce-caso-ver { opacity: 1; translate: 0 0; }
.arce-caso-meta { margin: 8px 0 0; font: 400 12px/1.4 var(--arce-texto, Metropolis), sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--arce-naranja-texto, #A0601A); }
.arce-caso-titulo { margin: 0; font: 400 32px/1.1 var(--arce-titular, Oranienbaum), serif; color: var(--arce-oscuro, #34383B); }
.arce-caso-resumen { margin: 0; font: 400 16px/1.5 var(--arce-texto, Metropolis), sans-serif; color: var(--arce-gris, #525658); }
.arce-caso-etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.arce-caso-etiquetas li { padding: 7px 13px; border: 1px solid var(--arce-gris-tarjeta, #DEE4E6); border-radius: 999px; font: 400 12px/1 var(--arce-texto, Metropolis), sans-serif; color: var(--arce-gris, #525658); }

.arce-citas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; width: 100%; margin-block-start: 24px; }
.arce-cita { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; margin: 0; padding: 40px 32px 32px; border-radius: 24px; background: var(--arce-fondo-claro, #F8F9FA); }
.arce-cita::before { content: "“"; position: absolute; top: -6px; left: 26px; font: 400 96px/1 var(--arce-titular, Oranienbaum), serif; color: var(--arce-naranja-m); }
.arce-cita blockquote { margin: 0; font: 400 22px/1.35 var(--arce-titular, Oranienbaum), serif; color: var(--arce-oscuro, #34383B); }
.arce-cita blockquote p { margin: 0 0 .6em; }
.arce-cita figcaption { display: flex; flex-direction: column; gap: 2px; font: 400 13px/1.4 var(--arce-texto, Metropolis), sans-serif; color: var(--arce-gris, #525658); }
.arce-cita figcaption strong { font-weight: 800; color: var(--arce-oscuro, #34383B); }
@media (max-width: 1024px) { .arce-citas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) {
	.arce-casos, .arce-citas { grid-template-columns: 1fr; gap: 40px; }
	.arce-caso-titulo { font-size: 26px; }
	.arce-caso-ver { opacity: 1; translate: 0 0; }
}

/* ── Servicios: las listas de cada servicio se muestran como etiquetas ── */
html .elementor :is(#diseno-web, #diseno-grafico, #impresion) .arce-lista ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}
html .elementor :is(#diseno-web, #diseno-grafico, #impresion) .arce-lista li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 9px 15px;
	border: 1px solid var(--arce-gris-tarjeta, #DEE4E6);
	border-radius: 999px;
	background: #fff;
	font-size: 14px;
	line-height: 1.3;
	color: var(--arce-oscuro, #34383B);
	transition: border-color .3s, translate .3s var(--arce-ease);
}
html .elementor :is(#diseno-web, #diseno-grafico, #impresion) .arce-lista li::before {
	content: "";
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	margin: 0;
	border-radius: 50%;
	background: var(--arce-naranja-m);
	position: static;
}
html .elementor :is(#diseno-web, #diseno-grafico, #impresion) .arce-lista li:hover { border-color: var(--arce-naranja-m); translate: 0 -2px; }

/* ── Luz cálida que sigue al ratón (arce-bosque.js) ── */
.arce-luz {
	position: fixed;
	top: -360px;
	left: -360px;
	z-index: 7000;
	width: 720px;
	height: 720px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(221, 145, 47, .14) 0%, rgba(221, 145, 47, .06) 35%, rgba(221, 145, 47, 0) 70%);
	mix-blend-mode: multiply;
	pointer-events: none;
	opacity: 0;
	transition: opacity .6s;
	will-change: transform;
}
.arce-luz.is-on { opacity: 1; }
.arce-menu-abierto .arce-luz { opacity: 0; }

/* ── Desarrollo y servidores: «Con qué trabajo» (herramientas por oficio) ── */

#herramientas [data-id] > p { max-width: 760px; }
#herramientas [data-id="c1263fb"] ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}
#herramientas [data-id="c1263fb"] li {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 22px 24px 24px;
	border-radius: 24px;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(52, 56, 59, .06);
	font: 400 17px/1.45 var(--arce-texto, Metropolis), sans-serif;
	color: var(--arce-oscuro, #34383B);
	transition: translate .4s var(--arce-ease), box-shadow .4s;
}
#herramientas [data-id="c1263fb"] li::before { content: none; display: none; }
#herramientas [data-id="c1263fb"] li:hover { translate: 0 -4px; box-shadow: 0 18px 40px rgba(52, 56, 59, .08); }
#herramientas [data-id="c1263fb"] strong {
	font: 800 12px/1 Metropolis, sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--arce-naranja-texto, #A0601A);
}
@media (max-width: 1024px) {
	#herramientas [data-id="c1263fb"] ul { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	#herramientas [data-id="c1263fb"] ul { grid-template-columns: 1fr; gap: 10px; }
	#herramientas [data-id="c1263fb"] li { padding: 16px 18px 18px; border-radius: 18px; font-size: 16px; }
}

/* ── Sobre mí: fotos de historia, «¿Por qué ARCE?» y aficiones ── */

#mi-historia > .e-image,
#mi-historia > img { display: block; width: 100%; margin-block-start: 40px; }
#mi-historia > .e-image img,
#mi-historia > img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 24px; }
#por-que-arce .e-image,
#por-que-arce img { display: block; width: 100%; }
#por-que-arce img { width: 100%; aspect-ratio: 4 / 5; max-height: 560px; object-fit: cover; border-radius: 24px; }
#fuera-del-estudio .e-image,
#fuera-del-estudio img { display: block; width: 100%; }
#fuera-del-estudio img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; margin-block-end: 18px; }
@media (max-width: 767px) {
	#mi-historia > .e-image img,
	#mi-historia > img { aspect-ratio: 4 / 3; border-radius: 18px; }
	#por-que-arce img { aspect-ratio: 4 / 3; }
}
/* Hitos con palabras («Primer curro», «La imprenta») en vez de números: más pequeños en móvil */
@media (max-width: 767px) {
	#mi-historia .arce-numero { font-size: 44px; line-height: 1.05; }
}
/* Línea de marca de las cabeceras interiores: ahora lleva palabras clave y puede partirse en móvil */
@media (max-width: 767px) {
	.arce-cabecera-interior .arce-marca { white-space: normal; max-width: 100%; text-align: right; }
}

/* ── Página de un proyecto (/proyectos/nombre/): misma cabecera, cuerpo y pie que las demás páginas ── */

body.arce-proyecto { margin: 0; background: var(--arce-oscuro, #34383B); }
.arce-proyecto-cabecera {
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	min-height: 480px;
	padding: 38px 28px 110px;
	background: var(--arce-oscuro, #34383B);
}
.arce-proyecto-titulos { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding: 90px 110px 0 0; text-align: right; }
.arce-proyecto-titulos .arce-marca { margin: 0; font: 400 15px/1.5 var(--arce-texto, Metropolis), sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; }
.arce-proyecto-titulos .arce-marca strong,
.arce-proyecto-titulos h1 strong { font-weight: 400; color: var(--arce-naranja-m, #DD912F); }
.arce-proyecto-titulos h1 { margin: 0; max-width: 12ch; font: 400 88px/1 var(--arce-titular, Oranienbaum), serif; color: #fff; }

.arce-proyecto-cuerpo {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin-top: -40px;
	padding: 120px 128px 200px;
	border-radius: 40px 40px 0 0;
	background: #fff;
	font-family: var(--arce-texto, Metropolis), sans-serif;
	color: var(--arce-gris, #525658);
}
.arce-proyecto-etiqueta { display: flex; align-items: center; gap: 14px; margin: 0; font: 400 15px/1 var(--arce-texto, Metropolis), sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--arce-gris, #525658); }
.arce-proyecto-etiqueta span { width: 12px; height: 12px; border-radius: 50%; background: var(--arce-naranja-m, #DD912F); }
.arce-proyecto-encabezado { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.arce-proyecto-resumen { margin: 0; font: 400 26px/1.35 var(--arce-titular, Oranienbaum), serif; color: var(--arce-oscuro, #34383B); }
.arce-proyecto-portada { margin: 0; }
.arce-proyecto-portada img { display: block; width: 100%; height: auto; max-height: 720px; object-fit: cover; border-radius: 24px; background: var(--arce-gris-tarjeta, #DEE4E6); }
.arce-proyecto-historia { max-width: 760px; font-size: 18px; line-height: 1.6; }
.arce-proyecto-historia p { margin: 0 0 1.2em; }
.arce-proyecto-historia h2,
.arce-proyecto-historia h3 { margin: 1.6em 0 .5em; font: 400 36px/1.1 var(--arce-titular, Oranienbaum), serif; color: var(--arce-oscuro, #34383B); }
.arce-proyecto-historia h3 { font-size: 28px; }
.arce-proyecto-historia strong { color: var(--arce-oscuro, #34383B); }
.arce-proyecto-historia a { color: var(--arce-naranja-texto, #A0601A); }
.arce-proyecto-historia ul { padding-left: 1.2em; }
.arce-proyecto-galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.arce-proyecto-galeria figure { margin: 0; }
.arce-proyecto-galeria img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; background: var(--arce-gris-tarjeta, #DEE4E6); }
.arce-proyecto-galeria figure:first-child:nth-last-child(odd) { grid-column: span 2; }
.arce-proyecto-galeria figure:first-child:nth-last-child(odd) img { aspect-ratio: 21 / 9; }
.arce-proyecto-cita { margin: 20px 0 0; padding: 40px 48px; max-width: 900px; border-radius: 24px; background: var(--arce-fondo-claro, #F8F9FA); }
.arce-proyecto-cita blockquote { margin: 0; }
.arce-proyecto-cita p { margin: 0; font: 400 30px/1.3 var(--arce-titular, Oranienbaum), serif; color: var(--arce-oscuro, #34383B); }
.arce-proyecto-cita p::before { content: "“"; color: var(--arce-naranja-m, #DD912F); }
.arce-proyecto-cita p::after { content: "”"; color: var(--arce-naranja-m, #DD912F); }
.arce-proyecto-cita figcaption { margin-top: 16px; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--arce-naranja-texto, #A0601A); }
.arce-proyecto-enlace { margin: 0; }
.arce-proyecto-enlace a { font: 400 24px/1 var(--arce-titular, Oranienbaum), serif; color: var(--arce-oscuro, #34383B); text-decoration: none; border-bottom: 1px solid var(--arce-naranja-m, #DD912F); }
.arce-proyecto-enlace a:hover { color: var(--arce-naranja-texto, #A0601A); }
.arce-proyecto-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--arce-gris-tarjeta, #DEE4E6); }
.arce-proyecto-nav a { display: flex; flex-direction: column; gap: 6px; font: 400 22px/1.15 var(--arce-titular, Oranienbaum), serif; color: var(--arce-oscuro, #34383B); text-decoration: none; }
.arce-proyecto-nav a span { font: 400 12px/1 var(--arce-texto, Metropolis), sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--arce-naranja-texto, #A0601A); }
.arce-proyecto-nav a:hover { color: var(--arce-naranja-texto, #A0601A); }
.arce-proyecto-nav-ant { grid-column: 1; }
.arce-proyecto-nav-todos { grid-column: 2; font-size: 15px !important; letter-spacing: 1.5px; text-transform: uppercase; }
.arce-proyecto-nav-sig { grid-column: 3; align-items: flex-end; text-align: right; }

@media (max-width: 1024px) {
	.arce-proyecto-titulos { padding: 70px 40px 0 0; }
	.arce-proyecto-titulos h1 { font-size: 64px; }
	.arce-proyecto-cuerpo { padding: 80px 48px 140px; }
}
@media (max-width: 767px) {
	.arce-proyecto-cabecera { min-height: 400px; padding: 24px 20px 80px; }
	.arce-proyecto-titulos { padding: 60px 0 0; }
	.arce-proyecto-titulos .arce-marca { white-space: normal; max-width: 100%; }
	.arce-proyecto-titulos h1 { font-size: 46px; max-width: none; }
	.arce-proyecto-cuerpo { gap: 28px; margin-top: -30px; padding: 56px 20px 100px; border-radius: 30px 30px 0 0; }
	.arce-proyecto-resumen { font-size: 22px; }
	.arce-proyecto-portada img { border-radius: 18px; }
	.arce-proyecto-historia { font-size: 16px; }
	.arce-proyecto-galeria { grid-template-columns: 1fr; gap: 14px; }
	.arce-proyecto-galeria figure:first-child:nth-last-child(odd) { grid-column: auto; }
	.arce-proyecto-galeria figure:first-child:nth-last-child(odd) img { aspect-ratio: 4 / 3; }
	.arce-proyecto-galeria img { border-radius: 18px; }
	.arce-proyecto-cita { padding: 28px 24px; border-radius: 18px; }
	.arce-proyecto-cita p { font-size: 24px; }
	.arce-proyecto-nav { grid-template-columns: 1fr; gap: 20px; }
	.arce-proyecto-nav-ant, .arce-proyecto-nav-todos, .arce-proyecto-nav-sig { grid-column: auto; align-items: flex-start; text-align: left; }
}
/* Las capturas de webs tienen fondo blanco: un filo y una sombra suave separan la imagen de la página. */
.arce-proyecto-portada img,
.arce-proyecto-galeria img,
.arce-caso-imagen {
	box-shadow: inset 0 0 0 1px rgba(52, 56, 59, .12), 0 18px 40px rgba(52, 56, 59, .08);
}
.arce-proyecto-portada img,
.arce-proyecto-galeria img { outline: 1px solid rgba(52, 56, 59, .12); outline-offset: -1px; }