/* =====================================================================
   Ignacio Córdoba · Efectos
   Los efectos se activan con clases CSS puestas en Elementor (Avanzado → Clases CSS):

   cab            contenedor de la cabecera (pastilla flotante). Dentro: cab-menu (widget Menú) y cab-boton (botón «Menú» en móvil)
   tema-oscuro    sección que, al llegar al centro de la pantalla, pone toda la página en oscuro
   ic-titular     titular que entra línea a línea (cada línea separada con un salto de línea <br>)
   eti            etiqueta pequeña en mayúsculas; eti-punto le añade el punto rojo delante
   revela         texto grande que se ilumina palabra a palabra con el scroll
   ic-sube        bloque que aparece subiendo al entrar en pantalla; ic-sube-hijos hace lo mismo con cada hijo, escalonado
   btn-lleno / btn-borde / btn-rojo   estilos de botón;  iman: el botón se acerca un poco al puntero
   bento          rejilla de servicios; dentro, cajas caja-web, caja-marca, caja-publi y caja-mant
   tira           listado de proyectos en horizontal; en escritorio su sección se queda fijada y la tira avanza con el scroll (en táctil, se desliza)
   tarjeta        tarjeta de proyecto del listado; tarjeta-img es su imagen (con ic-color, el puntero muestra su color)
   ===================================================================== */

:root {
	--ic-fondo: #F6F5F1;
	--ic-tinta: #121214;
	--ic-gris: #6B6A66;
	--ic-rojo: #C92F26;
	--ic-linea: rgba(18, 18, 20, .12);
	--ic-suave: cubic-bezier(.2, .8, .2, 1);
	--ic-rebote: cubic-bezier(.3, 1.4, .5, 1);
}

/* ---------- Tema oscuro por secciones: se cambian los colores globales de Elementor ---------- */
/* La tira a sangre no debe ensanchar la página en móvil (si no, el móvil la reduce y descuadra las alturas) */
html { overflow-x: clip; }
body { transition: background-color .7s ease, color .7s ease; overflow-x: clip; }
html[data-tema="oscuro"] body {
	--e-global-color-primary: #F6F5F1;
	--e-global-color-text: #F6F5F1;
	--e-global-color-secondary: #9A9892;
	--e-global-color-fondo: #121214;
	--e-global-color-linea: rgba(246, 245, 241, .14);
	--ic-tinta: #F6F5F1;
	--ic-gris: #9A9892;
	--ic-linea: rgba(246, 245, 241, .14);
	background-color: #121214 !important;
	color: #F6F5F1;
}
.elementor-heading-title, .elementor-widget-text-editor { transition: color .7s ease; }

/* Scroll suave (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--ic-rojo); outline-offset: 4px; border-radius: 4px; }

/* ---------- Etiqueta con punto ---------- */
.eti-punto .elementor-heading-title { display: inline-flex; align-items: center; gap: 10px; }
.eti-punto .elementor-heading-title::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ic-rojo); flex: none; }

/* ---------- Titulares: cursiva = gris (para la segunda parte de una frase) ---------- */
.elementor-heading-title em { font-style: normal; color: var(--ic-gris); transition: color .7s ease; }
.ic-titular .linea { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.ic-titular .linea > span { display: inline-block; transform: translateY(105%); animation: icSubeLinea 1.1s var(--ic-suave) var(--d, 0s) forwards; }
@keyframes icSubeLinea { to { transform: translateY(0); } }

/* ---------- Cabecera flotante ---------- */
.cab {
	position: fixed !important; z-index: 50; top: 16px; left: 50%; translate: -50% 0; width: max-content !important; flex-wrap: nowrap !important;
	border-radius: 999px; border: 1px solid var(--ic-linea);
	background: color-mix(in srgb, var(--e-global-color-fondo, #F6F5F1) 72%, transparent) !important;
	-webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
	transition: background-color .7s ease, border-color .7s ease, translate .5s var(--ic-suave);
}
.cab.oculta { translate: -50% -140%; }
body.admin-bar .cab { top: 48px; }
.cab > .elementor-element { flex: none; width: auto !important; }
.cab-menu .elementor-nav-menu { display: flex; flex-wrap: nowrap !important; }
.cab .marca .elementor-heading-title { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.cab .marca .elementor-heading-title::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ic-rojo); }
.cab-menu .elementor-nav-menu--main .elementor-item {
	padding: 11px 15px !important; border-radius: 999px; font: 500 14px/1 'Sora', sans-serif !important; color: var(--ic-gris) !important;
	transition: color .2s, background-color .25s;
}
.cab-menu .elementor-nav-menu--main .elementor-item::before, .cab-menu .elementor-nav-menu--main .elementor-item::after { display: none !important; }
.cab-menu .elementor-nav-menu--main .elementor-item:hover,
.cab-menu .elementor-nav-menu--main .elementor-item.elementor-item-active { color: var(--ic-tinta) !important; background: color-mix(in srgb, var(--ic-tinta) 8%, transparent); }
.cab-menu .elementor-nav-menu--main li:last-child .elementor-item { background: var(--ic-tinta); color: var(--e-global-color-fondo, #F6F5F1) !important; }
.cab-menu .elementor-nav-menu--main li:last-child .elementor-item:hover { background: var(--ic-rojo); color: #fff !important; }
.cab-menu .elementor-menu-toggle, .cab-menu nav.elementor-nav-menu--dropdown { display: none !important; }
.cab-boton { display: none; }
.menu-boton {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ic-linea);
	background: transparent; color: var(--ic-tinta); font: 500 14px/1 'Sora', sans-serif; cursor: pointer;
}
@media (max-width: 860px) {
	.cab-menu { display: none !important; }
	.cab-boton { display: block; }
	html.menu-abierto .cab { translate: -50% 0 !important; }
}
/* Capa del menú en móvil: fuera de la cabecera (su desenfoque impediría que ocupe toda la pantalla) */
.menu-capa { display: none; }
html.menu-abierto .menu-capa {
	position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; justify-content: center; gap: 4px;
	padding: 100px 30px 40px; background: var(--e-global-color-fondo, #F6F5F1); animation: icAparece .3s ease;
}
.menu-capa a { display: block; padding: 10px 0; color: var(--ic-tinta); font: 500 clamp(40px, 12vw, 64px)/1 'Sora', sans-serif; letter-spacing: -.05em; text-decoration: none; }
html.menu-abierto .menu-capa a { animation: icEntraMenu .6s var(--ic-suave) both; }
.menu-capa a:nth-child(2) { animation-delay: .05s !important; }
.menu-capa a:nth-child(3) { animation-delay: .1s !important; }
.menu-capa a:last-child { color: var(--ic-rojo); }
.menu-capa a[aria-current="page"]::before { content: ""; display: inline-block; width: .18em; height: .18em; margin: 0 .25em .12em 0; border-radius: 50%; background: var(--ic-rojo); }
@keyframes icEntraMenu { from { opacity: 0; transform: translateY(30px); } }
@keyframes icAparece { from { opacity: 0; } }
@media (min-width: 861px) { html.menu-abierto .menu-capa { display: none; } }

/* ---------- Botones ---------- */
:is(.btn-lleno, .btn-borde, .btn-rojo) .elementor-button {
	display: inline-flex; align-items: center; height: 54px; padding: 0 26px; border-radius: 999px;
	font-family: 'Sora', sans-serif; font-weight: 500; font-size: 15px; letter-spacing: -.01em; will-change: transform;
	transition: background-color .3s, color .3s, border-color .3s, background-size .45s var(--ic-suave);
}
/* Texto y flecha centrados en vertical (el envoltorio de Elementor los estira y el texto se quedaba arriba) */
:is(.btn-lleno, .btn-borde, .btn-rojo) .elementor-button-content-wrapper { display: flex; align-items: center; gap: 12px; }
:is(.btn-lleno, .btn-borde, .btn-rojo) .elementor-button-text { line-height: 1; }
:is(.btn-lleno, .btn-rojo) .elementor-button-icon {
	display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: -14px; border-radius: 50%;
	transition: transform .45s var(--ic-rebote), background-color .3s, color .3s;
}
:is(.btn-lleno, .btn-rojo) .elementor-button:hover .elementor-button-icon { transform: rotate(-45deg); }
.btn-lleno .elementor-button { background: var(--ic-tinta) !important; color: var(--e-global-color-fondo, #F6F5F1) !important; }
.btn-lleno .elementor-button-icon { background: var(--e-global-color-fondo, #F6F5F1); color: var(--ic-tinta); fill: var(--ic-tinta); }
.btn-lleno .elementor-button:hover .elementor-button-icon { background: var(--ic-rojo); color: #fff; fill: #fff; }
.btn-borde .elementor-button {
	border: 1px solid var(--ic-tinta) !important; color: var(--ic-tinta) !important;
	background: linear-gradient(var(--ic-tinta), var(--ic-tinta)) no-repeat left / 0% 100% !important;
}
.btn-borde .elementor-button:hover { background-size: 100% 100% !important; color: var(--e-global-color-fondo, #F6F5F1) !important; }
.btn-rojo .elementor-button { background: var(--ic-rojo) !important; color: #fff !important; }
.btn-rojo .elementor-button-icon { background: #fff; color: var(--ic-rojo); fill: var(--ic-rojo); }

/* ---------- Mesa de trabajo del hero (widget HTML) ---------- */
.mesa { position: relative; height: clamp(140px, 22vw, 260px); }
.mesa-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.curva { fill: none; stroke: var(--ic-rojo); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: icDibuja 2.2s var(--ic-suave) .9s forwards; }
@keyframes icDibuja { to { stroke-dashoffset: 0; } }
.nodo { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--e-global-color-fondo, #F6F5F1); border: 1.5px solid var(--ic-rojo); opacity: 0; animation: icAparece .4s ease reverse forwards; animation-name: icNodo; }
@keyframes icNodo { to { opacity: 1; } }
.nodo:nth-of-type(1) { animation-delay: 1s; } .nodo:nth-of-type(2) { animation-delay: 1.5s; } .nodo:nth-of-type(3) { animation-delay: 2s; } .nodo:nth-of-type(4) { animation-delay: 2.5s; }
.medida { position: absolute; translate: 14px -34px; padding: 4px 7px; border-radius: 4px; background: var(--ic-rojo); color: #fff; font: 500 11px/1 'Sora', sans-serif; opacity: 0; animation: icNodo .4s ease 2.7s forwards; }

/* ---------- Texto que se ilumina palabra a palabra ---------- */
.revela .pal { color: color-mix(in srgb, var(--ic-tinta) 18%, var(--e-global-color-fondo, #F6F5F1)); transition: color .35s ease; }
.revela .pal.on { color: var(--ic-tinta); }

/* ---------- Aparición al entrar en pantalla (la clase .visto la pone ic-efectos.js) ---------- */
.ic-js .ic-sube, .ic-js .ic-sube-hijos > * { opacity: 0; translate: 0 40px; transition: opacity .9s var(--ic-suave), translate .9s var(--ic-suave); }
.ic-js .ic-sube.visto, .ic-js .ic-sube-hijos > .visto { opacity: 1; translate: 0 0; }

/* ---------- Bento de servicios ---------- */
.bento { display: grid !important; gap: 16px !important; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(300px, auto)); grid-template-areas: "web web marca publi" "web web mant publi"; }
.bento > .e-con, .bento > .elementor-element { width: auto !important; max-width: none !important; }
.caja {
	position: relative; overflow: hidden !important; isolation: isolate; text-decoration: none;
	border-radius: 28px; border: 1px solid var(--ic-linea);
	/* Las cajas son enlaces: el color va con !important para que el hover de enlaces del tema no lo cambie */
	--caja-tinta: #121214; color: var(--caja-tinta) !important;
	transition: transform .6s var(--ic-suave), border-radius .6s var(--ic-suave);
}
.caja .elementor-heading-title, .caja .elementor-widget-text-editor { color: inherit !important; }
:is(.caja:hover, .caja.activa) { transform: translateY(-4px); border-radius: 34px; }
.caja::before {
	content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; pointer-events: none;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--brillo, #C92F26) 16%, transparent), transparent 60%);
}
:is(.caja:hover, .caja.activa)::before { opacity: 1; }
/* La flecha redonda de la esquina */
.caja::after {
	content: ""; background: var(--flecha-caja) center / 18px no-repeat; position: absolute; right: 22px; top: 22px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor;
	display: grid; place-items: center; font: 400 16px/1 'Sora', sans-serif; transition: transform .45s var(--ic-rebote), background-color .3s, border-color .3s, color .3s;
}
:is(.caja:hover, .caja.activa)::after { transform: rotate(-45deg); background-color: var(--ic-rojo); background-image: var(--ic-flecha-blanca); border-color: var(--ic-rojo); color: #fff; }
.caja-web { grid-area: web; background: #EDEBE4 !important; }
.caja-marca { grid-area: marca; background: #121214 !important; --caja-tinta: #F6F5F1; --brillo: #F6F5F1; }
.caja-publi { grid-area: publi; background: var(--ic-rojo) !important; --caja-tinta: #fff; --brillo: #fff; }
:is(.caja-publi:hover, .caja-publi.activa)::after { background-color: #121214; border-color: #121214; }
.caja-mant { grid-area: mant; background: #fff !important; }
.caja .caja-txt { padding-right: 56px; position: relative; z-index: 2; }
/* El título nunca pisa la flecha: en cajas estrechas se reduce lo justo para que la palabra más larga
   («Mantenimiento», unos 7,4 em) quepa. 100cqi = ancho de contenido de la caja; la flecha se mete 38 px en él (+8 de aire) */
.caja { container-type: inline-size; }
.caja .caja-txt { padding-right: 46px !important; }
.caja .caja-txt .elementor-heading-title { font-size: min(var(--e-global-typography-secondary-font-size, 34px), calc((100cqi - 46px) / 7.45)) !important; }
.caja .vis { position: relative; flex: 1; width: 100%; }
.caja .vis > .elementor-widget-container, .caja .vis .elementor-widget-container { height: 100%; }

/* Web: una ventana con su maqueta que, en hover, pasa a ancho de móvil */
.vis-web { display: flex; align-items: flex-end; justify-content: center; min-height: 300px; height: 100%; position: relative; margin-bottom: -40px; }
.marco { width: 100%; height: 100%; min-height: 300px; border-radius: 14px 14px 0 0; background: #fff; border: 1px solid rgba(18, 18, 20, .12); border-bottom: 0; box-shadow: 0 30px 60px -30px rgba(18, 18, 20, .35); overflow: hidden; transition: width .9s var(--ic-suave), border-radius .9s var(--ic-suave); }
:is(.caja-web:hover, .caja-web.activa) .marco { width: 46%; border-radius: 26px 26px 0 0; }
.marco-barra { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-bottom: 1px solid rgba(18, 18, 20, .08); font: 500 11px/1 'Sora', sans-serif; color: #9A9892; white-space: nowrap; overflow: hidden; }
.marco-barra i { width: 9px; height: 9px; border-radius: 50%; background: #E2DFD7; flex: none; }
.marco-barra i:first-child { background: var(--ic-rojo); }
.marco-barra span { margin-left: 10px; }
.maqueta { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px; }
.maqueta > span { display: block; border-radius: 6px; background: #EDEBE4; transition: all .9s var(--ic-suave); }
.mq-nav { flex: 1 0 100%; height: 10px; background: #F2F0EA !important; }
.mq-hero { flex: 1 1 55%; min-width: 120px; height: 150px; background: transparent !important; display: flex; flex-direction: column; gap: 8px; }
.mq-hero b { display: block; height: 16px; border-radius: 4px; background: #121214; }
.mq-hero b.corto { width: 55%; background: var(--ic-rojo); }
.mq-img { flex: 1 1 35%; min-width: 110px; height: 150px; background: linear-gradient(135deg, #D8D4C8, #EDEBE4) !important; }
.mq-col { flex: 1 1 28%; min-width: 90px; height: 64px; }
.etq-medida { position: absolute; left: 50%; top: -12px; z-index: 2; translate: -50% 0; padding: 4px 8px; border-radius: 4px; background: var(--ic-rojo); color: #fff; font-size: 0; }
.etq-medida::after { content: "1440 px"; font: 500 11px/1 'Sora', sans-serif; }
:is(.caja-web:hover, .caja-web.activa) .etq-medida::after { content: "390 px"; }

/* Identidad: guías que giran y paleta */
.vis-marca { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 130px; }
.guias { width: 120px; height: 120px; fill: none; stroke: rgba(246, 245, 241, .35); stroke-width: 1; transition: rotate 1.2s var(--ic-suave), stroke .4s; }
:is(.caja-marca:hover, .caja-marca.activa) .guias { rotate: 45deg; stroke: rgba(246, 245, 241, .7); }
.guias circle:first-child { stroke: var(--ic-rojo); }
.paleta { display: flex; flex-direction: column; gap: 8px; }
.paleta span { width: 46px; height: 30px; border-radius: 8px; background: var(--c); border: 1px solid rgba(246, 245, 241, .2); transition: width .5s var(--ic-suave); }
:is(.caja-marca:hover, .caja-marca.activa) .paleta span { width: 74px; }
:is(.caja-marca:hover, .caja-marca.activa) .paleta span:nth-child(2) { transition-delay: .06s; }
:is(.caja-marca:hover, .caja-marca.activa) .paleta span:nth-child(3) { transition-delay: .12s; }

/* Publicidad: carteles en abanico */
.vis-publi { display: grid; place-items: center; min-height: 260px; }
.cartel { grid-area: 1 / 1; width: 120px; aspect-ratio: 3 / 4; border-radius: 10px; padding: 14px; background: #F6F5F1; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .45); transition: transform .8s var(--ic-rebote); box-sizing: border-box; }
.cartel b { height: 9px; border-radius: 3px; background: #121214; }
.cartel b + b { width: 60%; }
.cartel i { margin-top: auto; height: 46%; border-radius: 50%; background: var(--ic-rojo); }
.c1 { transform: rotate(-4deg); }
.c2 { transform: rotate(3deg); background: #121214; }
.c2 b { background: #F6F5F1; }
.c3 { transform: rotate(-1deg); }
.c3 i { border-radius: 4px; background: #121214; }
:is(.caja-publi:hover, .caja-publi.activa) .c1 { transform: translate(-58px, 10px) rotate(-16deg); }
:is(.caja-publi:hover, .caja-publi.activa) .c2 { transform: translate(58px, 14px) rotate(14deg); }
:is(.caja-publi:hover, .caja-publi.activa) .c3 { transform: translateY(-14px) rotate(0); }

/* Mantenimiento: pulso y estado */
.vis-mant { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; min-height: 110px; height: 100%; }
.estado { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: #F2F0EA; font: 500 12px/1 'Sora', sans-serif; color: #121214; }
.estado i { width: 8px; height: 8px; border-radius: 50%; background: #2E9E5B; animation: icLate 1.8s ease-out infinite; }
@keyframes icLate { from { box-shadow: 0 0 0 0 rgba(46, 158, 91, .5); } to { box-shadow: 0 0 0 10px rgba(46, 158, 91, 0); } }
.pulso { width: 100%; height: 60px; fill: none; stroke: var(--ic-rojo); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: .35 .65; animation: icRecorre 2.4s linear infinite; }
:is(.caja-mant:hover, .caja-mant.activa) .pulso { animation-duration: 1.1s; }
@keyframes icRecorre { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

@media (max-width: 1080px) {
	.bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-template-areas: "web web" "marca publi" "mant publi"; }
}
@media (max-width: 640px) {
	.bento { grid-template-columns: 1fr; grid-template-areas: "web" "marca" "publi" "mant"; }
	.caja { border-radius: 24px; }
	.vis-web, .marco { min-height: 220px; }
	:is(.caja-web:hover, .caja-web.activa) .marco { width: 70%; }
	.vis-publi { min-height: 220px; }
}

/* ---------- Tira de proyectos (listado de JetEngine en horizontal) ---------- */
.tira .jet-listing-grid__items {
	display: flex !important; flex-wrap: nowrap !important; gap: 20px; overflow-x: auto; padding-bottom: 24px;
	scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; user-select: none; margin: 0 !important;
}
.tira .jet-listing-grid__items::-webkit-scrollbar { display: none; }
/* A sangre por la derecha (ic-efectos.js mide --sangrado): la tira llega al borde de la pantalla y, al final del recorrido,
   el padding deja la última tarjeta alineada con el contenido. Por la izquierda, fundido según lo desplazado (--fundido). */
.tira { width: calc(100% + var(--sangrado, 0px)) !important; max-width: none !important; }
.tira .jet-listing-grid__items { padding-right: var(--sangrado, 0px); scroll-padding-right: var(--sangrado, 0px);
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fundido, 0px)); mask-image: linear-gradient(to right, transparent 0, #000 var(--fundido, 0px)); }
.tira .jet-listing-grid__items.arrastrando { cursor: grabbing; scroll-snap-type: none; }
.tira .jet-listing-grid__item { flex: 0 0 clamp(260px, 32vw, 440px) !important; max-width: none !important; width: auto !important; padding: 0 !important; scroll-snap-align: start; }
/* Tira fijada (la activa ic-efectos.js en escritorio con ratón): la sección mide una pantalla más un tramo de scroll
   (algo mayor que el recorrido horizontal de la tira); su contenido se queda pegado arriba mientras el scroll vertical mueve la tira. */
.tira-fija { height: calc(100vh + var(--tira-tramo, 0px)) !important; overflow: visible !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.tira-fija > .e-con-inner { position: sticky !important; top: 0; height: 100vh !important; min-height: 0 !important; flex: none !important; justify-content: center !important; padding-top: 80px; }
.tira-fija .jet-listing-grid__items { scroll-snap-type: none; overflow-x: hidden; }
.tira-fija .jet-listing-grid__item { flex-basis: clamp(240px, calc((100vh - 540px) * .8), 440px) !important; }
.tira-fija > .e-con-inner > .e-con:first-child { margin-bottom: 28px !important; }
.tarjeta-img { position: relative; overflow: hidden !important; aspect-ratio: 4 / 5; border-radius: 22px; background: #EDEBE4; transition: transform .6s var(--ic-suave), border-radius .6s var(--ic-suave); }
/* El color del proyecto llena la tarjeta; la imagen destacada (si la hay) va encima */
.tarjeta-img > .elementor-element { position: absolute !important; inset: 0; width: 100% !important; margin: 0 !important; }
.tarjeta-fondo { position: absolute; inset: 0; display: block; }
.tarjeta-img .jet-listing-dynamic-image, .tarjeta-img .jet-listing-dynamic-image a { display: block; width: 100%; height: 100%; }
.tarjeta-img img, .tarjeta-img .jet-listing-dynamic-image__img.wp-post-image { width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--ic-suave); }
/* Sin imagen: un círculo fino como en el prototipo, para que la tarjeta no quede vacía */
.tarjeta-img::after { content: ""; position: absolute; inset: 22% 18%; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .55); pointer-events: none; transition: transform .9s var(--ic-suave); }
.tarjeta-img:has(img)::after { display: none; }
.tarjeta:hover .tarjeta-img::after { transform: scale(1.12) rotate(-8deg); }
.tarjeta:hover .tarjeta-img { transform: scale(.97); border-radius: 32px; }
.tarjeta:hover .tarjeta-img img { scale: 1.06; }

/* ---------- Servicios: índice fijo a la izquierda y servicios a la derecha ---------- */
.servicios-detalle > .e-con-inner { align-items: flex-start; }
.indice { position: sticky !important; top: 110px; flex: 0 0 clamp(220px, 24%, 300px) !important; width: auto !important; }
.indice-nav { display: flex; flex-direction: column; border-top: 1px solid var(--ic-linea); }
.indice-nav a { display: flex; gap: 14px; align-items: baseline; padding: 16px 0 16px 16px; border-bottom: 1px solid var(--ic-linea); font: 500 16px/1.3 'Sora', sans-serif; letter-spacing: -.02em; color: var(--e-global-color-secondary); position: relative; transition: color .3s, padding-left .4s var(--ic-suave); }
.indice-nav a::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; translate: 0 -50%; background: var(--ic-rojo); border-radius: 2px; transition: height .4s var(--ic-suave); }
.indice-nav .num { font-size: 12px; letter-spacing: .08em; }
.indice-nav a:hover, .indice-nav a.actual { color: var(--ic-tinta); }
.indice-nav a.actual { padding-left: 24px; }
.indice-nav a.actual::before { height: 60%; }
.servicios-lista { flex: 1 1 0 !important; min-width: 0; }
.servicio { padding-bottom: 72px !important; margin-bottom: 72px !important; border-bottom: 1px solid var(--ic-linea); scroll-margin-top: 110px; }
.servicio:last-child { border-bottom: 0; margin-bottom: 0 !important; padding-bottom: 0 !important; }
.lista ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ic-linea); }
.lista li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--ic-linea); }
.lista li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ic-rojo); flex: none; }

/* ---------- Preguntas frecuentes (widget Desplegable de Elementor) ---------- */
.faq .elementor-toggle-item { border-bottom: 1px solid var(--ic-linea); margin: 0 !important; }
.faq .elementor-toggle-item:first-child { border-top: 1px solid var(--ic-linea); }
.faq .elementor-tab-title { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 4px !important; border: 0 !important; cursor: pointer; transition: padding-left .35s var(--ic-suave); }
.faq .elementor-tab-title:hover { padding-left: 14px !important; }
.faq .elementor-toggle-title { font: 500 clamp(19px, 1.9vw, 25px)/1.25 'Sora', sans-serif; letter-spacing: -.03em; color: var(--ic-tinta) !important; }
.faq .elementor-toggle-icon { display: none !important; }
.faq .elementor-tab-title::after { content: ""; order: 2; flex: 0 0 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ic-tinta);
	background: linear-gradient(var(--ic-tinta), var(--ic-tinta)) center / 12px 1.5px no-repeat, linear-gradient(var(--ic-tinta), var(--ic-tinta)) center / 1.5px 12px no-repeat;
	transition: transform .45s var(--ic-rebote), background-color .3s, border-color .3s; }
.faq .elementor-tab-title.elementor-active::after { transform: rotate(135deg); border-color: var(--ic-rojo);
	background: linear-gradient(#fff, #fff) center / 12px 1.5px no-repeat, linear-gradient(#fff, #fff) center / 1.5px 12px no-repeat, var(--ic-rojo); }
.faq .elementor-tab-content { padding: 0 4px 26px !important; border: 0 !important; max-width: 720px; color: var(--e-global-color-secondary); font-size: 17px; }
.faq .elementor-tab-content p { margin: 0; }

/* ---------- Proyectos: filtro en pastillas (JetSmartFilters, tipo radio) y rejilla ---------- */
.filtros fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.filtros .jet-radio-list__row { margin: 0 !important; }
.filtros .jet-radio-list__item { position: relative; cursor: pointer; }
.filtros .jet-radio-list__input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.filtros .jet-radio-list__decorator { display: none !important; }
.filtros .jet-radio-list__button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--ic-linea); background: transparent; transition: background-color .3s, color .3s, border-color .3s; }
.filtros .jet-radio-list__label { font: 500 14px/1 'Sora', sans-serif; color: var(--ic-tinta); transition: color .3s; }
.filtros .jet-radio-list__item:hover .jet-radio-list__button { border-color: var(--ic-tinta); }
.filtros .jet-radio-list__input:checked + .jet-radio-list__button { background: var(--ic-tinta); border-color: var(--ic-tinta); }
.filtros .jet-radio-list__input:checked + .jet-radio-list__button .jet-radio-list__label { color: var(--e-global-color-fondo, #F6F5F1); }
.filtros .jet-radio-list__input:focus-visible + .jet-radio-list__button { outline: 2px solid var(--ic-rojo); outline-offset: 3px; }
.rejilla .jet-listing-grid { transition: opacity .35s ease; }
.rejilla.jet-listing-grid-loading .jet-listing-grid, .rejilla .jet-listing-grid-loading { opacity: .35; }

/* ---------- Sobre mí: la foto como una imagen seleccionada en un programa de diseño ---------- */
.retrato { position: relative; flex: 0 1 420px !important; width: 100% !important; max-width: 420px; aspect-ratio: 4 / 5; margin: 0 0 40px auto !important; padding: 0 !important; outline: 1.5px solid var(--ic-rojo); background: linear-gradient(160deg, #DCD8CD, #C9C4B6); }
.retrato > .elementor-element { position: absolute !important; inset: 0; width: 100% !important; margin: 0 !important; }
.retrato .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; }
.retrato .elementor-widget-image .elementor-widget-container, .retrato .elementor-widget-image a { display: block; height: 100%; }
.retrato-guias { pointer-events: none; }
.retrato .esq { position: absolute; width: 10px; height: 10px; background: #fff; border: 1.5px solid var(--ic-rojo); }
.retrato .e1 { left: -6px; top: -6px; } .retrato .e2 { right: -6px; top: -6px; } .retrato .e3 { left: -6px; bottom: -6px; } .retrato .e4 { right: -6px; bottom: -6px; }
.retrato-medida { position: absolute; left: 50%; bottom: -34px; translate: -50% 0; padding: 4px 8px; border-radius: 4px; background: var(--ic-rojo); color: #fff; font: 500 11px/1 'Sora', sans-serif; white-space: nowrap; }

/* Cinta de herramientas en movimiento */
.cinta { overflow: hidden; border-top: 1px solid var(--ic-linea); border-bottom: 1px solid var(--ic-linea); padding: 28px 0; }
.cinta-pista { display: flex; width: max-content; animation: icCinta 34s linear infinite; }
.cinta:hover .cinta-pista { animation-play-state: paused; }
.cinta-pista span { display: inline-flex; align-items: center; font: 500 clamp(28px, 4vw, 56px)/1 'Sora', sans-serif; letter-spacing: -.045em; white-space: nowrap; color: var(--ic-tinta); }
.cinta-pista span::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ic-rojo); margin: 0 clamp(24px, 3vw, 48px); }
@keyframes icCinta { to { transform: translateX(-50%); } }

/* ---------- Contacto: formulario de Elementor Pro ---------- */
.form-ic .elementor-field-label, .form-ic .elementor-field-type-checkbox > .elementor-field-label { font: 500 12px/1 'Sora', sans-serif !important; letter-spacing: .1em; text-transform: uppercase; color: var(--e-global-color-secondary) !important; margin-bottom: 8px; }
.form-ic .elementor-field-type-checkbox > .elementor-field-label { margin-bottom: 14px; }
.form-ic .elementor-field-textual { border: 0 !important; border-bottom: 1.5px solid var(--ic-linea) !important; border-radius: 0 !important; background: transparent !important; color: var(--ic-tinta) !important;
	font: 400 20px/1.4 'Sora', sans-serif !important; letter-spacing: -.02em; padding: 10px 0 !important; box-shadow: none !important; transition: border-color .3s; }
.form-ic .elementor-field-textual:focus { outline: none; border-bottom-color: var(--ic-rojo) !important; }
.form-ic textarea.elementor-field-textual { resize: vertical; }
.form-ic .elementor-field-subgroup { display: flex; flex-wrap: wrap; gap: 10px; }
.form-ic .elementor-field-option { position: relative; margin: 0 !important; padding: 0 !important; }
.form-ic .elementor-field-option input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.form-ic .elementor-field-option label { display: inline-flex !important; align-items: center; min-height: 46px; padding: 0 20px !important; margin: 0 !important; border-radius: 999px; border: 1px solid var(--ic-linea);
	font: 500 15px/1 'Sora', sans-serif; color: var(--ic-tinta); transition: background-color .3s, color .3s, border-color .3s, transform .4s var(--ic-rebote); }
.form-ic .elementor-field-option:hover label { border-color: var(--ic-tinta); }
.form-ic .elementor-field-option input:checked + label { background: var(--ic-tinta); color: var(--e-global-color-fondo, #F6F5F1); border-color: var(--ic-tinta); transform: scale(1.04); }
.form-ic .elementor-field-option input:focus-visible + label { outline: 2px solid var(--ic-rojo); outline-offset: 3px; }
.form-ic .elementor-button { display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 8px 0 26px; border-radius: 999px; background: var(--ic-tinta) !important; color: var(--e-global-color-fondo, #F6F5F1) !important;
	font: 500 15px/1 'Sora', sans-serif !important; transition: background-color .3s; }
.form-ic .elementor-button:hover { background: var(--ic-rojo) !important; }
.form-ic .elementor-button .elementor-button-content-wrapper { display: flex; align-items: center; gap: 12px; }
.form-ic .elementor-button-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--e-global-color-fondo, #F6F5F1); color: var(--ic-tinta); font-size: 14px; }
.form-ic .elementor-button-icon svg { width: 14px; height: 14px; }
.form-ic .elementor-button-icon svg, .form-ic .elementor-button-icon svg path { fill: var(--ic-tinta) !important; }
@media (min-width: 1025px) {
	.form-ic { flex: 0 0 60% !important; }
	.contacto-datos { flex: 1 1 0 !important; min-width: 0; }
}
.form-ic .elementor-message { font: 500 17px/1.4 'Sora', sans-serif; margin-top: 16px; }
.contacto-datos .elementor-heading-title a { color: inherit; }

/* ---------- Caso de estudio (plantilla del proyecto) ---------- */
.volver .elementor-heading-title a { color: inherit; display: inline-flex; align-items: center; gap: .5em; transition: color .2s, translate .3s var(--ic-suave); }
.volver .elementor-heading-title a:hover { color: var(--ic-tinta); translate: -4px 0; }
.ficha > .ficha-item { flex: 1 1 200px !important; width: auto !important; }
.ficha-dt { display: block; margin-bottom: 8px; font: 500 12px/1 'Sora', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--e-global-color-secondary); }
.ficha-dd { font: 500 16px/1.3 'Sora', sans-serif; color: var(--ic-tinta); word-break: break-word; }
a.ficha-dd { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ic-linea); }
a.ficha-dd:hover { text-decoration-color: var(--ic-rojo); }
.ficha .jet-listing-dynamic-field__content { display: block; }
.portada-caso { position: relative; overflow: hidden !important; height: clamp(320px, 58vw, 760px); border-radius: 28px; padding: 0 !important; background: #EDEBE4; }
.portada-caso > .elementor-element { position: absolute !important; inset: 0; width: 100% !important; margin: 0 !important; }
.portada-caso .jet-listing-dynamic-image, .portada-caso .jet-listing-dynamic-image a, .portada-caso .jet-listing-dynamic-field__content, .portada-caso .jet-listing-dynamic-field__inline-wrap { display: block; width: 100%; height: 100%; }
.portada-caso img, .portada-caso .jet-listing-dynamic-image__img.wp-post-image { width: 100%; height: 100%; object-fit: cover; }
.portada-caso::after { content: ""; position: absolute; inset: 18% 32%; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .55); pointer-events: none; }
.portada-caso:has(img)::after { display: none; }
.caso-texto > .e-con-inner > .caso-bloque, .caso-texto > .caso-bloque { flex: 1 1 0 !important; min-width: 0; }
.caso-eti { margin: 0 0 16px; font: 500 12px/1 'Sora', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--e-global-color-secondary); }
.caso-p { white-space: pre-line; }
.caso-p, .caso-p p { margin: 0 0 .8em; font: 400 clamp(20px, 2vw, 26px)/1.4 'Sora', sans-serif; letter-spacing: -.02em; color: var(--ic-tinta); }
.galeria-caso .jet-engine-gallery-grid__item img { border-radius: 22px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cifras .jet-listing-dynamic-repeater__items { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.cifras .jet-listing-dynamic-repeater__item { padding-top: 22px; border-top: 1px solid var(--ic-linea); }
.cifra { margin: 0 0 10px; font: 500 clamp(48px, 6vw, 88px)/1 'Sora', sans-serif; letter-spacing: -.05em; color: var(--ic-tinta); }
.cifra-txt { margin: 0; color: var(--e-global-color-secondary); }
.siguiente-enlace { display: flex; flex-direction: column; gap: 18px; color: var(--ic-tinta); }
.siguiente-eti { font: 500 12px/1 'Sora', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--e-global-color-secondary); }
.siguiente-t { font: 500 clamp(52px, 10vw, 160px)/.95 'Sora', sans-serif; letter-spacing: -.06em; display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: .25em; color: var(--ic-tinta); }
.siguiente-t i { display: inline-block; width: .8em; height: .8em; vertical-align: -.02em; overflow: hidden; text-indent: 200%; white-space: nowrap; background-color: var(--ic-rojo); -webkit-mask: var(--ic-flecha) center / contain no-repeat; mask: var(--ic-flecha) center / contain no-repeat; transition: translate .5s var(--ic-rebote); }
.siguiente-enlace:hover .siguiente-t i { translate: .25em 0; }

@media (max-width: 1024px) {
	.retrato { margin: 0 0 40px !important; }
	.indice { position: static !important; flex-basis: auto !important; width: 100% !important; }
	.indice-nav { flex-direction: row; overflow-x: auto; border-top: 0; gap: 8px; scrollbar-width: none; }
	.indice-nav a { flex: none; border: 1px solid var(--ic-linea); border-radius: 999px; padding: 12px 16px; font-size: 14px; }
	.indice-nav a::before { display: none; }
	.indice-nav a.actual { padding-left: 16px; background: var(--ic-tinta); color: var(--e-global-color-fondo, #F6F5F1); }
	.servicios-lista { width: 100%; }
}

/* ---------- Páginas legales ---------- */
.legal { max-width: 760px !important; }
.legal p, .legal li { font-size: 17px; }
.legal h2 { margin: 48px 0 14px; font: 500 clamp(22px, 2.2vw, 28px)/1.2 'Sora', sans-serif; letter-spacing: -.03em; color: var(--ic-tinta); }
.legal p, .legal li { line-height: 1.65; }
.legal p { margin: 0 0 1em; }
.legal ul { margin: 0 0 1em; padding: 0; list-style: none; border-top: 1px solid var(--ic-linea); }
.legal li { padding: 10px 0; border-bottom: 1px solid var(--ic-linea); }
.legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ic-rojo); }
.legal code { font-size: .9em; padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--ic-tinta) 7%, transparent); }
.legal-fecha { color: var(--e-global-color-secondary); }
.pie-legal p { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pie-legal a { color: var(--e-global-color-secondary); transition: color .2s; }
.pie-legal a:hover { color: var(--ic-tinta); }
.form-ic .elementor-field-type-acceptance { font-size: 14px; color: var(--e-global-color-secondary); }
.form-ic .elementor-field-type-acceptance .elementor-field-option { display: flex; align-items: flex-start; gap: 10px; }
.form-ic .elementor-field-type-acceptance input { position: static; opacity: 1; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ic-rojo); flex: none; }
.form-ic .elementor-field-type-acceptance label { display: inline !important; min-height: 0; padding: 0 !important; border: 0; border-radius: 0; font: 400 14px/1.5 'DM Sans', sans-serif; color: var(--e-global-color-secondary); transform: none !important; background: none !important; }
.form-ic .elementor-field-type-acceptance label a { color: var(--ic-tinta); text-decoration: underline; text-underline-offset: 3px; }
.form-ic .elementor-field-type-html { font-size: 13px; line-height: 1.55; color: var(--e-global-color-secondary); }
.form-ic .elementor-field-type-html a { color: inherit; text-decoration: underline; }

/* ---------- Puntero de herramientas ---------- */
html.con-puntero, html.con-puntero * { cursor: none !important; }
.puntero { position: fixed; top: 0; left: 0; z-index: 100000; pointer-events: none; opacity: 0; transition: opacity .2s; }
.puntero.activo { opacity: 1; }
.rastro { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 99999; pointer-events: none; }
.herr {
	position: absolute; width: 26px; height: 26px; visibility: hidden; fill: #121214; stroke: none;
	filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(0 2px 3px rgba(0, 0, 0, .25));
}
.herr .hueco { fill: #fff; }
.herr .trazo { fill: none; stroke: #fff; stroke-width: 1.2; }
.herr .mas { fill: none; stroke: #121214; stroke-width: 2.2; stroke-linecap: round; }
.herr[data-tool="mano"] { fill: #fff; stroke: #121214; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.herr[data-tool="texto"] { fill: none; stroke: #121214; stroke-width: 2; stroke-linecap: round; translate: -13px -12px; }
.herr[data-tool="pluma"] { translate: -3px -21px; }
.herr[data-tool="gotas"] { translate: -4px -20px; }
.herr[data-tool="mano"] { translate: -13px -12px; }
.puntero[data-tool="pluma"] .herr[data-tool="pluma"], .puntero[data-tool="anadir"] .herr[data-tool="anadir"],
.puntero[data-tool="gotas"] .herr[data-tool="gotas"], .puntero[data-tool="mano"] .herr[data-tool="mano"],
.puntero[data-tool="texto"] .herr[data-tool="texto"] { visibility: visible; }
.puntero[data-tool="anadir"] .herr[data-tool="anadir"] { animation: icSalta .3s var(--ic-rebote); }
@keyframes icSalta { from { scale: .6; } }
.muestra, .nota { position: absolute; white-space: nowrap; font: 500 11px/1 'Sora', sans-serif; letter-spacing: .02em; background: #fff; color: #121214; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); border-radius: 4px; }
.muestra { display: none; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; left: 18px; top: -4px; }
.muestra i { width: 13px; height: 13px; border-radius: 3px; outline: 1px solid rgba(0, 0, 0, .12); }
.puntero[data-tool="gotas"] .muestra { display: inline-flex; }
.nota { padding: 5px 8px; left: 20px; top: 12px; }
.nota:empty { display: none; }
/* Formas para lo que se puede pulsar: círculo con flecha (enlaces y botones), disco «Ver» (proyectos)
   y disco con dos flechas (zona que se arrastra). El JS mueve .aro con un pequeño retraso. */
.aro {
	position: absolute; left: 0; top: 0; width: 46px; height: 46px; translate: -50% -50%;
	display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 50%;
	border: 1.5px solid var(--ic-rojo); color: var(--ic-rojo); background: color-mix(in srgb, var(--ic-rojo) 7%, transparent);
	scale: 0; opacity: 0;
	transition: scale .4s var(--ic-rebote), opacity .2s ease, width .35s var(--ic-suave), height .35s var(--ic-suave), background-color .3s, color .3s;
}
.aro-icono { display: flex; gap: 2px; }
.aro-icono::before, .aro-icono::after {
	content: ""; width: 16px; height: 16px; background-color: currentColor;
	-webkit-mask: var(--ic-flecha) center / contain no-repeat; mask: var(--ic-flecha) center / contain no-repeat;
}
.aro-icono::before { display: none; rotate: 180deg; }
.aro-txt { display: none; font: 600 13px/1 'Sora', sans-serif; letter-spacing: -.01em; }
.puntero:is([data-tool="enlace"], [data-tool="ver"], [data-tool="arrastra"]) .aro { scale: 1; opacity: 1; }
.puntero[data-tool="enlace"] .aro-icono::after { rotate: -45deg; width: 15px; height: 15px; }
.puntero[data-tool="ver"] .aro { width: 96px; height: 96px; background: var(--ic-rojo); color: #fff; border-color: var(--ic-rojo); box-shadow: 0 10px 30px -10px rgba(201, 47, 38, .6); }
.puntero[data-tool="ver"] .aro-txt { display: block; }
.puntero[data-tool="arrastra"] .aro { width: 76px; height: 76px; background: var(--ic-rojo); color: #fff; border-color: var(--ic-rojo); }
.puntero[data-tool="arrastra"] .aro-icono::before { display: block; }
.puntero.pulsa .aro { scale: .82; transition-duration: .12s; }
/* En proyectos, la muestra de color del cuentagotas va al lado del disco */
.puntero[data-tool="ver"].con-muestra .muestra { display: inline-flex; left: 56px; top: -40px; }

/* ---------- Transición entre páginas (Chrome, Edge y Safari reciente) ---------- */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	.cab { view-transition-name: cabecera; }
	::view-transition-old(root) { animation: icVtSale .25s ease both; }
	::view-transition-new(root) { animation: icVtEntra .45s var(--ic-suave) .05s both; }
	@keyframes icVtSale { to { opacity: 0; transform: translateY(-10px); } }
	@keyframes icVtEntra { from { opacity: 0; transform: translateY(16px); } }
}

/* ---------- Sin animaciones para quien las tiene desactivadas ---------- */
@media (prefers-reduced-motion: reduce) {
	.ic-titular .linea > span, .curva, .nodo, .medida { animation: none !important; transform: none; opacity: 1; stroke-dashoffset: 0; }
	.ic-js .ic-sube, .ic-js .ic-sube-hijos > * { opacity: 1; translate: none; transition: none; }
	body, .caja, .marco, .guias, .paleta span, .cartel, .tarjeta-img { transition: none !important; }
	.pulso, .estado i { animation: none !important; }
	.cinta-pista { animation: none; flex-wrap: wrap; width: auto; }
	.revela .pal { color: var(--ic-tinta); }
}

/* ---------- Imágenes de recursos: servicios y contacto ---------- */
.servicio-img { margin: 8px 0 28px !important; }
.servicio-img img, .contacto-img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 22px; }
.contacto-img { margin-top: 12px !important; }
.contacto-img img { aspect-ratio: 16 / 9; }

/* ---------- Hero con vídeo: marco redondeado (hero-video > hero-marco) ----------
   El vídeo se pone en Elementor: hero-marco → Estilo → Fondo → Vídeo (YouTube o MP4).
   Al bajar, ic-efectos.js pone --p (0 → 1) y el marco se recoge, el vídeo se desplaza más lento y el texto sube. */
.hero-marco {
	--p: 0;
	--e-global-color-primary: #F6F5F1;
	--e-global-color-text: #F6F5F1;
	--e-global-color-secondary: #D9D7D0;
	--e-global-color-fondo: #121214;
	--ic-tinta: #F6F5F1;
	--ic-gris: #B9B7B0;
	--ic-linea: rgba(246, 245, 241, .28);
	position: relative; isolation: isolate; color: #F6F5F1;
	min-height: calc(100svh - 2 * var(--cab-medio, 41px)) !important; /* mismo hueco arriba y abajo */
	transform-origin: 50% 0;
	scale: calc(1 - var(--p) * .08);
	border-radius: 28px !important; /* fijo: animarlo obligaba a repintar el vídeo en cada fotograma */
	will-change: scale;
}
.ic-js .hero-marco { animation: icHeroEntra 1.4s var(--ic-suave) backwards; }
@keyframes icHeroEntra { from { clip-path: inset(7% 6% round 28px); } to { clip-path: inset(0 round 28px); } }
/* El vídeo (o la imagen de respaldo) se mueve más despacio que el marco: ver «Desenfoque del vídeo» más abajo */
.hero-marco .elementor-background-video-container::before { opacity: calc(.5 + var(--p) * .3) !important; }
.hero-marco::before { opacity: calc(.5 + var(--p) * .3) !important; }
.hero-contenido { position: relative; z-index: 2; translate: 0 calc(var(--p) * -90px); opacity: calc(1 - var(--p) * 1.4); }
.hero-marco .elementor-heading-title em { color: var(--ic-gris); }
.hero-marco .btn-lleno .elementor-button { background: #F6F5F1 !important; color: #121214 !important; }
.hero-marco .btn-lleno .elementor-button-icon { background: var(--ic-rojo); color: #fff; fill: #fff; }
.hero-marco .btn-borde .elementor-button { border-color: rgba(246, 245, 241, .5) !important; color: #F6F5F1 !important; background-image: linear-gradient(#F6F5F1, #F6F5F1) !important; }
.hero-marco .btn-borde .elementor-button:hover { color: #121214 !important; }


/* Pie del hero: botón de pausa del vídeo */
.hero-hud { position: absolute !important; z-index: 1; inset: 0; width: 100% !important; margin: 0 !important; pointer-events: none; }
.hero-hud .elementor-widget-container, .hud { position: absolute; inset: 0; }
/* Degradado abajo para que el texto se lea sobre cualquier vídeo */
.hud { background: linear-gradient(to top, rgba(18, 18, 20, .6), rgba(18, 18, 20, 0) 60%); }
.hud-pie { position: absolute; left: 40px; right: 40px; bottom: 36px; display: flex; align-items: center; justify-content: flex-end; gap: 16px; font: 400 12px/1 'DM Sans', sans-serif; letter-spacing: .04em; color: #D9D7D0; }
.hud-video { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(246, 245, 241, .3); background: rgba(18, 18, 20, .35); color: #F6F5F1; font: inherit; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .25s; }

.hud-ico { width: 10px; height: 11px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.hud-video[aria-pressed="true"] .hud-ico { border: 0; border-left: 10px solid currentColor; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
.hero-marco:not(.con-video) .hud-video { display: none; }
@media (max-width: 767px) {
	.hud-pie { left: 24px; right: 24px; bottom: 26px; }
	.hud-dato { display: none; }
}

/* Palabra que va cambiando en el titular: <span class="rota" data-palabras="a|b|c">a</span> */
.rota { position: relative; display: inline-block; vertical-align: top; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; color: var(--ic-rojo); transition: width .6s var(--ic-suave); }
.rota-p { display: inline-block; white-space: nowrap; }
.rota.rota-bloque { display: block; }
.rota-p:not(.activa) { position: absolute; left: 0; top: 0; translate: 0 110%; opacity: 0; }
.rota-p.activa, .rota-p.sale { transition: translate .7s var(--ic-suave), opacity .5s ease; }
.rota-p.sale { position: absolute; left: 0; top: 0; translate: 0 -110%; opacity: 0; }
.rota::after { content: ""; position: absolute; right: -.06em; top: .16em; bottom: .2em; width: 2px; background: currentColor; animation: icCursor 1s steps(1) infinite; }
@keyframes icCursor { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	.hero-marco, .hero-contenido { animation: none !important; scale: none !important; translate: none !important; opacity: 1; }
	.rota::after { animation: none; }
}
/* La cabecera flotante queda centrada sobre el borde superior del marco (--cab-medio lo calcula ic-efectos.js) */
.hero-video.e-con { padding-top: var(--cab-medio, 41px) !important; }
/* Para que el marco quepa en el 90 % de la pantalla, el titular también depende de la altura */
.hero-marco .ic-titular .elementor-heading-title { font-size: clamp(48px, min(9vw, calc(28vh - 135px)), 140px) !important; }
.hero-marco.e-con { --min-height: calc(100svh - 2 * var(--cab-medio, 41px)) !important; }
@media (min-width: 768px) {
	/* Elementor aplica el padding del contenedor encajado mediante variables: se cambian ellas */
	.hero-marco.e-con { --padding-top: clamp(96px, 13vh, 150px) !important; --padding-bottom: clamp(96px, 12vh, 130px) !important; }
}
@media (max-width: 767px) {
	.hero-marco.e-con { --padding-top: 72px !important; --padding-bottom: 82px !important; }
	.hero-contenido.e-con { --gap: 22px 22px !important; --row-gap: 22px !important; }
}
/* Desenfoque del vídeo del hero: cambia --desenfoque (0px = nítido). La imagen de respaldo va en la misma capa.
   Rendimiento: la capa se pinta a la mitad de tamaño y se amplía ×2 (×1,16 de margen para el parallax y los bordes
   del desenfoque), así el desenfoque se calcula sobre la cuarta parte de píxeles. Se ve igual porque ya va borroso.
   translate en % es relativo a la propia capa (mitad del marco): −16 % la centra y --p la baja al hacer scroll. */
.hero-marco { --desenfoque: 8px; }
.hero-marco .elementor-background-video-container {
	top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; width: 50% !important; height: 50% !important;
	background: center / cover no-repeat; filter: blur(calc(var(--desenfoque) / 2));
	transform-origin: 0 0; scale: 2.32 !important; translate: -16% calc(-16% + var(--p) * 36%); will-change: translate;
}
@media (prefers-reduced-motion: reduce) {
	.hero-marco .elementor-background-video-container { translate: -16% -16% !important; }
}

/* ---------- Botones <button>: el reset del tema Hello los pinta de rosa (#c36) en hover y focus ---------- */
:is(button, [type="button"], [type="submit"]):is(:hover, :focus) { background-color: var(--ic-rojo); color: #fff; }
.menu-boton:focus, .menu-boton:focus:not(:hover) { background-color: transparent; color: var(--ic-tinta); }
.menu-boton { transition: background-color .25s, color .25s, border-color .25s; }
.menu-boton:hover { background-color: var(--ic-rojo); border-color: var(--ic-rojo); color: #fff; }
.hud-video:focus:not(:hover) { background-color: rgba(18, 18, 20, .35); color: #F6F5F1; }
.hud-video:hover { background-color: var(--ic-rojo); border-color: var(--ic-rojo); color: #fff; }

/* ---------- 04 · Proceso con datos: columna fija + pasos unidos por una línea roja que avanza con el scroll ----------
   ic-efectos.js pone --avance (0 → 1) en .proc-pasos y la clase activo en cada paso ya alcanzado */
.proc-total { margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--ic-linea); }
.proc-total-v .elementor-heading-title { font-size: clamp(40px, 4.6vw, 64px) !important; line-height: 1 !important; letter-spacing: -.045em !important; }
.proc-pasos { position: relative; --avance: 0; padding-left: 48px !important; }
.proc-pasos::before, .proc-pasos::after { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 1px; background: var(--ic-linea); }
.proc-pasos::after { left: 5.5px; width: 2px; background: var(--ic-rojo); transform-origin: 50% 0; scale: 1 var(--avance); }
.proc-paso { position: relative; padding-bottom: clamp(48px, 6vw, 72px) !important; transition: opacity .5s ease; }
.proc-paso:last-child { padding-bottom: 0 !important; }
.proc-paso::before { content: ""; position: absolute; z-index: 1; left: -48px; top: 4px; width: 13px; height: 13px; background: var(--e-global-color-fondo, #F6F5F1); border: 1.5px solid var(--ic-linea); transition: background-color .4s, border-color .4s, scale .5s var(--ic-rebote); }
.proc-paso.activo::before { background: var(--ic-rojo); border-color: var(--ic-rojo); scale: 1.15; }
.proc-js .proc-paso:not(.activo) { opacity: .38; }
.proc-plazo .elementor-heading-title { display: inline-block; padding: 7px 13px; border: 1px solid var(--ic-linea); border-radius: 999px; white-space: nowrap; transition: color .4s, border-color .4s; }
.proc-paso.activo .proc-plazo .elementor-heading-title { color: var(--ic-rojo); border-color: color-mix(in srgb, var(--ic-rojo) 45%, transparent); }
.proc-desc p { margin: 0; max-width: 46ch; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.5; }
.proc-cols { margin-top: 6px !important; }
.proc-cols > .proc-col { flex: 1 1 0 !important; min-width: 0; }
.proc-lista ul { list-style: none; margin: 0; padding: 0; }
.proc-lista li { position: relative; margin: 0 0 6px; padding-left: 18px; }
.proc-lista li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 1.5px; background: var(--ic-rojo); }
@media (min-width: 1025px) {
	.proc-izq { position: sticky !important; top: 120px; }
}
@media (max-width: 767px) {
	.proc-pasos { padding-left: 36px !important; }
	.proc-paso::before { left: -36px; }
}

/* ---------- Páginas de servicio (Diseño web y las que vengan) ---------- */
.miga .elementor-heading-title a { color: inherit; text-decoration: none; }
.miga .elementor-heading-title a:hover { color: var(--ic-rojo); }
.dw-cab-txt { flex: 1 1 0 !important; min-width: 0; }
.dw-cab-img { flex: 0 0 46% !important; }
.dw-cab-img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; }
/* ¿Te encaja? */
.encaja { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px !important; }
.encaja-item { padding: 28px 0 !important; border-top: 1px solid var(--ic-linea); }
.encaja-item .elementor-heading-title::before { content: ""; display: inline-block; width: .72em; height: .72em; margin-right: .4em; vertical-align: -.04em; background-color: var(--ic-rojo); -webkit-mask: var(--ic-flecha) center / contain no-repeat; mask: var(--ic-flecha) center / contain no-repeat; }
/* Tipos de proyecto */
.tipos { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px !important; }
.tipo-card { padding: clamp(26px, 3vw, 40px) !important; border-radius: 24px; background: color-mix(in srgb, var(--ic-tinta) 4%, var(--e-global-color-fondo, #F6F5F1)); border: 1px solid var(--ic-linea); transition: border-color .3s, translate .45s var(--ic-suave); }
.tipo-card:hover { border-color: var(--ic-rojo); translate: 0 -4px; }
.tipo-card > .proc-plazo { align-self: flex-start; }
.tipo-card:hover .proc-plazo .elementor-heading-title { color: var(--ic-rojo); border-color: color-mix(in srgb, var(--ic-rojo) 45%, transparent); }
.tipo-card .elementor-widget-text-editor p { margin: 0; }
/* Siempre incluido */
.incluye { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.incluye-item { padding: 26px 24px 26px 0 !important; border-top: 1px solid var(--ic-linea); }
.incluye-item .elementor-widget-text-editor p { margin: 0; }
/* Extras en píldoras */
.chips { flex: 1 1 0 !important; }
.chips ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.chips li { padding: 12px 20px; border: 1px solid var(--ic-linea); border-radius: 999px; font-size: clamp(16px, 1.3vw, 19px); transition: border-color .25s, color .25s; }
.chips li:hover { border-color: var(--ic-rojo); color: var(--ic-rojo); }
/* Presupuesto */
.dw-pres-txt { position: relative; }
@media (min-width: 1025px) { .dw-pres-txt { position: sticky !important; top: 120px; } }
.form-ic .elementor-field-type-radio > .elementor-field-label { margin-bottom: 14px; }
.form-ic select.elementor-field-textual { appearance: none; padding-right: 28px !important; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C92F26' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 4px center !important; cursor: pointer; }
.form-ic select.elementor-field-textual option { color: #121214; }
/* Flecha propia (roja) en los desplegables: se oculta la de Elementor */
.form-ic .elementor-select-wrapper::before, .form-ic .select-caret-down-wrapper { display: none !important; }
@media (max-width: 1024px) {
	.incluye { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dw-cab-img { flex-basis: auto !important; width: 100%; }
}
@media (max-width: 767px) {
	.encaja, .tipos, .incluye { grid-template-columns: 1fr; }
	.form-ic { flex-basis: auto !important; width: 100% !important; }
}
/* Portada: proceso corto con plazo y enlace a la página de Diseño web */
.elementor-element-proceso .proc-plazo { align-self: flex-start; margin-top: 4px; }
.proc-mas { margin-top: 8px; align-self: flex-start; }

/* ---------- Servicios como índice: tarjetas que enlazan a cada servicio y packs combinados ---------- */
.servicios-cards { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px !important; }
/* La tarjeta es un enlace (contenedor con html_tag a): el color del tema en a:hover no debe ganar */
.servicio-card { color: var(--ic-tinta) !important; text-decoration: none !important; overflow: hidden !important; border-radius: 26px; border: 1px solid var(--ic-linea); background: color-mix(in srgb, var(--ic-tinta) 3%, var(--e-global-color-fondo, #F6F5F1)); transition: border-color .3s, translate .5s var(--ic-suave); }
.servicio-card:hover { border-color: var(--ic-rojo); translate: 0 -4px; }
.servicio-card .elementor-heading-title, .servicio-card .elementor-widget-text-editor { color: inherit; }
.servicio-card-img { margin: 0 !important; overflow: hidden; }
.servicio-card-img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: scale .9s var(--ic-suave); }
.servicio-card:hover .servicio-card-img img { scale: 1.05; }
.servicio-card-txt { padding: clamp(24px, 3vw, 36px) !important; }
.servicio-card-txt p { margin: 0; }
.servicio-card-ver .elementor-heading-title { display: inline-flex; align-items: center; gap: 10px; color: var(--ic-tinta) !important; }
.servicio-card-ver .elementor-heading-title::after { content: ""; width: 15px; height: 15px; background-color: var(--ic-rojo); -webkit-mask: var(--ic-flecha) center / contain no-repeat; mask: var(--ic-flecha) center / contain no-repeat; transition: translate .4s var(--ic-suave); }
.servicio-card:hover .servicio-card-ver .elementor-heading-title::after { translate: 6px 0; }
.servicio-card:hover .proc-plazo .elementor-heading-title { color: var(--ic-rojo); border-color: color-mix(in srgb, var(--ic-rojo) 45%, transparent); }
.packs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px !important; }
.pack-card { padding: clamp(26px, 3vw, 36px) !important; border-radius: 24px; border: 1px solid var(--ic-linea); transition: border-color .3s; }
.pack-card:hover { border-color: var(--ic-rojo); }
.pack-card > .proc-plazo { align-self: flex-start; }
.pack-card .elementor-widget-text-editor p { margin: 0; }
.pack-incluye ul { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pack-incluye li { font: 500 15px/1.3 'Sora', sans-serif; letter-spacing: -.01em; color: var(--ic-tinta); }
.pack-incluye li + li::before { content: "+"; margin-right: 6px; color: var(--ic-rojo); }
.pack-porque { margin-top: auto !important; padding-top: 16px !important; border-top: 1px solid var(--ic-linea); }
.pack-boton { align-self: flex-start; }
@media (max-width: 1024px) {
	.packs { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.servicios-cards { grid-template-columns: 1fr; }
}

/* ---------- Submenú de Servicios en la cabecera (escritorio) ---------- */
.cab-menu .menu-item-has-children { position: relative; }
.cab-menu .sub-arrow { display: inline-flex; margin-left: 6px; transition: rotate .3s var(--ic-suave); }
.cab-menu .sub-arrow svg { display: none; }
.cab-menu .sub-arrow::before { content: ""; width: 11px; height: 11px; background-color: currentColor; -webkit-mask: var(--ic-chevron) center / contain no-repeat; mask: var(--ic-chevron) center / contain no-repeat; }
.cab-menu .menu-item-has-children:is(:hover, :focus-within) > a .sub-arrow { rotate: 180deg; }
.cab-menu .elementor-nav-menu--main .sub-menu {
	display: block !important; position: absolute; top: calc(100% + 14px); left: 50%; translate: -50% 6px; z-index: 60;
	min-width: 236px; margin: 0; padding: 8px; list-style: none; border-radius: 20px; border: 1px solid var(--ic-linea);
	background: color-mix(in srgb, var(--e-global-color-fondo, #F6F5F1) 94%, transparent) !important;
	-webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
	box-shadow: 0 18px 40px -18px rgba(18, 18, 20, .35);
	opacity: 0; visibility: hidden; transition: opacity .25s ease, translate .35s var(--ic-suave), visibility 0s linear .25s;
}
/* Puente invisible para que el ratón no pierda el submenú al bajar */
.cab-menu .elementor-nav-menu--main .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.cab-menu .menu-item-has-children:is(:hover, :focus-within) > .sub-menu { opacity: 1; visibility: visible; translate: -50% 0; transition: opacity .25s ease, translate .35s var(--ic-suave), visibility 0s; }
.cab-menu .sub-menu .elementor-sub-item {
	display: block; padding: 11px 14px !important; border-radius: 12px; border: 0 !important;
	font: 500 14px/1.2 'Sora', sans-serif !important; color: var(--ic-gris) !important; background: none !important; white-space: nowrap;
	transition: color .2s, background-color .2s;
}
.cab-menu .sub-menu .elementor-sub-item:hover, .cab-menu .sub-menu .elementor-sub-item.elementor-item-active { color: var(--ic-tinta) !important; background: color-mix(in srgb, var(--ic-tinta) 7%, transparent) !important; }
.cab-menu .sub-menu .elementor-sub-item::before, .cab-menu .sub-menu .elementor-sub-item::after { display: none !important; }
/* Capa del menú en móvil: los servicios van debajo de «Servicios», más pequeños */
.menu-capa a.menu-sub { padding: 6px 0 6px 18px; font-size: clamp(19px, 5.4vw, 24px); letter-spacing: -.02em; color: var(--ic-gris); }
.menu-capa a.menu-sub::before { content: "— "; color: var(--ic-rojo); }

/* ---------- Flecha propia (trazo fino, puntas redondeadas) en toda la web ----------
   --ic-flecha / --ic-chevron se usan como máscara sobre el color del texto (currentColor), así siempre cogen el color
   de cada estado. En las cajas de la portada van en dos versiones de color fijo porque el círculo cambia de fondo. */
:root {
	--ic-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E");
	--ic-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
	--ic-flecha-tinta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121214' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E");
	--ic-flecha-blanca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E");
}
.caja { --flecha-caja: var(--ic-flecha-tinta); }
.caja-marca, .caja-publi { --flecha-caja: var(--ic-flecha-blanca); }
/* Botones de Elementor: fuera la flecha de Font Awesome, dentro la propia */
.elementor-button-icon > svg.e-fas-arrow-right { display: none !important; }
.elementor-button-icon:has(> svg.e-fas-arrow-right)::before {
	content: ""; display: block; width: 16px; height: 16px; background-color: currentColor;
	-webkit-mask: var(--ic-flecha) center / contain no-repeat; mask: var(--ic-flecha) center / contain no-repeat;
	transition: translate .35s var(--ic-suave);
}
/* En los botones sin círculo la flecha se desplaza un poco al pasar el ratón (los de círculo ya giran) */
.btn-borde .elementor-button:hover .elementor-button-icon::before { translate: 3px 0; }
/* «Todos los proyectos» y «Volver arriba»: la misma flecha girada */
.volver .elementor-heading-title a::before, .arriba .elementor-heading-title a::after {
	content: ""; width: 1em; height: 1em; background-color: currentColor; flex: none;
	-webkit-mask: var(--ic-flecha) center / contain no-repeat; mask: var(--ic-flecha) center / contain no-repeat;
}
.volver .elementor-heading-title a::before { rotate: 180deg; }
.arriba .elementor-heading-title a { display: inline-flex; align-items: center; gap: .45em; }
.arriba .elementor-heading-title a::after { rotate: -90deg; transition: translate .3s var(--ic-suave); }
.arriba .elementor-heading-title a:hover::after { translate: 0 -3px; }