/* Generado por destilar.py desde design/artboards/. No editar a mano: se regenera. Cada clase es un estilo en línea del artboard, movido aqui sin cambiarle una coma. SIN @layer a proposito: estas reglas sustituyen a estilos en linea, que eran lo mas fuerte del documento. Dentro de una capa perderian contra los estilos globales que WordPress emite sin capa, y los enlaces saldrian todos del mismo color. */ .arra-arra-core-1 { position: relative; overflow: hidden; background: var(--arra-ink-carbon); } .arra-arra-core-2 { position: relative; height: calc(100vh - 80px); min-height: 480px; overflow: hidden; z-index: 2; } .arra-arra-core-3 { position: absolute; inset: 0; clip-path: polygon(0 0, 54% 0, 46% 100%, 0 100%); overflow: hidden; padding: 32px 52% 32px clamp(20px, 3vw, 56px); min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 14px; box-sizing: border-box; } .arra-arra-core-4 { position: absolute; inset: 0; transform: scale(1); transition: transform 700ms var(--ease-out); } .arra-arra-core-5 { position: absolute; inset: 0; background-image: url('/wp-content/themes/arra/assets/img/fotos/home-core-1.jpg'); background-image: image-set(url('/wp-content/themes/arra/assets/img/fotos/home-core-1.webp') type('image/webp'), url('/wp-content/themes/arra/assets/img/fotos/home-core-1.jpg') type('image/jpeg')); background-size: cover; background-position: center; } .arra-arra-core-6 { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(125,155,110,0.02) 0%, rgba(92,124,79,0.35) 45%, rgba(63,90,52,0.68) 75%, rgba(38,56,31,0.82) 100%); } .arra-arra-core-7 { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 30% 52%, rgba(24,36,20,0.55) 0%, rgba(24,36,20,0.25) 55%, transparent 100%); } .arra-arra-core-8 { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,11,19,0.22) 0%, rgba(24,36,20,0.34) 55%, rgba(6,11,19,0.44) 100%); opacity: 0; transition: opacity 500ms var(--ease-out); } .arra-arra-core-9 { position: relative; font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); } .arra-arra-core-10 { position: relative; font-size: clamp(38px, 4vw, 56px); line-height: 1.05; color: #ffffff; margin: 0; } .arra-arra-core-11 { position: relative; font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,0.88); max-width: 42ch; } .arra-arra-core-13 { position: absolute; inset: 0; clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%); overflow: hidden; padding: 32px clamp(20px, 3vw, 56px) 32px 52%; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 14px; box-sizing: border-box; } .arra-arra-core-14 { position: absolute; inset: 0; background-image: url('/wp-content/themes/arra/assets/img/fotos/home-corporate-1.jpg'); background-image: image-set(url('/wp-content/themes/arra/assets/img/fotos/home-corporate-1.webp') type('image/webp'), url('/wp-content/themes/arra/assets/img/fotos/home-corporate-1.jpg') type('image/jpeg')); background-size: cover; background-position: center; } .arra-arra-core-15 { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(125,51,80,0.02) 0%, rgba(107,30,46,0.35) 45%, rgba(80,20,35,0.7) 75%, rgba(50,11,22,0.83) 100%); } .arra-arra-core-16 { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 70% 52%, rgba(45,12,24,0.5) 0%, rgba(45,12,24,0.22) 55%, transparent 100%); } .arra-arra-core-17 { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,11,19,0.22) 0%, rgba(45,12,24,0.32) 55%, rgba(6,11,19,0.44) 100%); opacity: 0; transition: opacity 500ms var(--ease-out); } .arra-arra-core-19 { position: relative; display: inline-flex; align-items: center; justify-content: center; align-self: center; margin-top: 12px; padding: 15px 30px; background: var(--core); color: #ffffff; border: 0; border-radius: 14px; font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; box-shadow: var(--shadow-badge); transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .arra-arra-core-20 { position: relative; display: inline-flex; align-items: center; justify-content: center; align-self: center; margin-top: 12px; padding: 15px 30px; background: var(--corp); color: #ffffff; border: 0; border-radius: 14px; font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; box-shadow: var(--shadow-badge); transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .arra-router-1 { max-width: 1280px; margin: 0 auto; padding: var(--section-pad-y) clamp(20px, 5vw, 64px) 0; } .arra-router-2 { text-align: center; margin-bottom: 52px; } .arra-router-3 { max-width: 24ch; margin: 0 auto; font-size: var(--fs-h2); line-height: var(--lh-snug); } .arra-router-4 { color: var(--gold-bronze); } .arra-router-5 { display: inline-block; margin-top: 16px; font-size: 14px; color: var(--fg-soft); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; } .arra-router-6 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; } .arra-router-7 { background: #f5f5f5; border-radius: var(--r-lg); padding: 34px 32px 38px; border: 1px solid var(--arra-line-soft); display: flex; flex-direction: column; gap: 16px; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .arra-router-9 { font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--fg); } .arra-router-10 { font-size: 14.5px; line-height: 1.6; color: var(--fg-soft); } .arra-por-elegirnos-1 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 48px; align-items: center; } .arra-por-elegirnos-2 { margin-bottom: 14px; } .arra-por-elegirnos-3 { max-width: 18ch; } .arra-por-elegirnos-4 { font-size: 16px; line-height: 1.65; color: var(--fg-soft); max-width: 56ch; margin-top: 18px; } .arra-por-elegirnos-24 { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding: 15px 26px; background: var(--arra-ink-carbon); color: #ffffff; border-radius: 14px; font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; transition: opacity var(--dur-base) var(--ease-out); } .arra-seccion-4 { font-size: 13px; color: #9aa3b0; margin-top: 4px; } .arra-servicios-1 { max-width: 24ch; margin: 0 auto; } .arra-servicios-2 { font-size: 16px; line-height: 1.6; color: var(--fg-soft); max-width: 58ch; margin: 16px auto 0; } .arra-servicios-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 24px; } .arra-servicios-4 { background: #f5f5f5; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--arra-line-soft); display: flex; flex-direction: column; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .arra-servicios-5 { height: 6px; background: var(--core); } .arra-servicios-6 { padding: 40px 40px 36px; display: flex; flex-direction: column; flex: 1; gap: 16px; } .arra-servicios-8 { font-family: var(--font-display); font-weight: 500; font-size: 26px; letter-spacing: -0.02em; line-height: 1.2; color: var(--fg); } .arra-servicios-9 { color: var(--core); } .arra-servicios-10 { font-size: 15px; line-height: 1.6; color: var(--fg-soft); } .arra-servicios-11 { display: flex; flex-direction: column; gap: 12px; flex: 1; } .arra-servicios-12 { background: var(--arra-bg-subtle); border-radius: var(--r-md); padding: 16px 18px; } .arra-servicios-13 { font-size: 15px; font-weight: 600; color: var(--fg); margin-bottom: 4px; } .arra-servicios-14 { font-size: 13.5px; line-height: 1.5; color: var(--fg-soft); } .arra-servicios-16 { height: 6px; background: var(--corp); } .arra-servicios-17 { color: var(--corp); } .arra-servicios-19 { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; margin-top: 6px; padding: 14px 22px; background: var(--core); color: #ffffff; border-radius: 14px; font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; transition: opacity var(--dur-base) var(--ease-out); } .arra-servicios-20 { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; margin-top: 6px; padding: 14px 22px; background: var(--corp); color: #ffffff; border-radius: 14px; font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; transition: opacity var(--dur-base) var(--ease-out); } .arra-servicios-integrales-estrategicos-1 { max-width: 26ch; margin: 0 auto; } .arra-servicios-integrales-estrategicos-2 { font-size: 16px; line-height: 1.6; color: var(--fg-soft); max-width: 62ch; margin: 16px auto 0; } .arra-seccion-2-1 { max-width: 1280px; margin: 0 auto; padding: calc(var(--section-pad-y) * 0.6) clamp(20px, 5vw, 64px) 0; } .arra-nuestro-blog-1 { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; } .arra-nuestro-blog-2 { font-size: 15px; line-height: 1.6; color: var(--fg-soft); max-width: 58ch; margin-top: 12px; } .arra-nuestro-blog-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; } .arra-nuestro-blog-5 { text-decoration: none; background: #f5f5f5; border-radius: var(--r-lg); border: 1px solid var(--arra-line-soft); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .arra-nuestro-blog-6 { display: block; height: 140px; background: var(--arra-line-soft); } .arra-nuestro-blog-7 { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 26px; } .arra-nuestro-blog-8 { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-bronze); } .arra-nuestro-blog-9 { font-family: var(--font-display); font-weight: 500; font-size: 18px; line-height: 1.3; color: var(--fg); } .arra-sabes-por-donde-1 { max-width: 1280px; margin: 0 auto; padding: var(--section-pad-y) clamp(20px, 5vw, 64px); } .arra-sabes-por-donde-3 { position: absolute; left: -80px; bottom: -80px; width: 280px; height: 280px; border: 1px dashed rgba(255,255,255,0.14); border-radius: 50%; } .arra-sabes-por-donde-4 { margin-bottom: 16px; } .arra-sabes-por-donde-5 { color: #ffffff; max-width: 24ch; margin: 0 auto 16px; } .arra-sabes-por-donde-6 { color: var(--gold); } .arra-sabes-por-donde-7 { font-size: 16px; color: rgba(255,255,255,0.7); max-width: 52ch; margin: 0 auto 30px; } .arra-sabes-por-donde-9 { display: inline-flex; align-items: center; gap: 12px; padding: 16px 30px; background: #ffffff; color: var(--arra-ink-carbon); border-radius: 14px; font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; } .arra-sabes-por-donde-10 { background: linear-gradient(rgba(6,11,19,0.56), rgba(6,11,19,0.56)), url('/wp-content/themes/arra/assets/img/banners/banner-contacto-core.jpg'); background: linear-gradient(rgba(6,11,19,0.56), rgba(6,11,19,0.56)), image-set(url('/wp-content/themes/arra/assets/img/banners/banner-contacto-core.webp') type('image/webp'), url('/wp-content/themes/arra/assets/img/banners/banner-contacto-core.jpg') type('image/jpeg')); border-radius: var(--r-2xl); padding: clamp(56px, 7vw, 88px) clamp(24px, 5vw, 64px); text-align: center; position: relative; overflow: hidden; background-size: cover; background-position: center; } .arra-sobre-nosotros-1 { background: var(--arra-ink-carbon); padding: clamp(70px, 9vw, 110px) clamp(20px, 5vw, 64px) clamp(56px, 7vw, 88px); } .arra-sobre-nosotros-2 { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 48px; align-items: center; } .arra-sobre-nosotros-3 { font-size: clamp(34px, 4vw, 52px); color: #ffffff; max-width: 16ch; } .arra-sobre-nosotros-4 { font-size: 17px; line-height: 1.65; color: rgba(255,255,255,0.8); max-width: 50ch; margin-top: 16px; } .arra-sobre-nosotros-5 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .arra-sobre-nosotros-6 { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-lg); padding: 24px 26px; } .arra-sobre-nosotros-7 { font-family: var(--font-display); font-weight: 500; font-size: 34px; color: var(--gold); } .arra-sobre-nosotros-8 { font-family: var(--font-display); font-weight: 500; font-size: 34px; color: #ffffff; } .arra-quienes-somos-1 { max-width: 22ch; } .arra-quienes-somos-2 { font-size: 16px; line-height: 1.65; color: var(--fg-soft); max-width: 58ch; margin-top: 18px; } .arra-quienes-somos-3 { font-size: 16px; line-height: 1.65; color: var(--fg-soft); max-width: 58ch; margin-top: 12px; } .arra-quienes-somos-4 { background: #ffffff; border-radius: var(--r-xl); border: 1px solid var(--arra-line-soft); padding: clamp(32px, 4vw, 48px); position: relative; } .arra-quienes-somos-5 { position: absolute; top: 18px; left: 28px; font-family: var(--font-display); font-size: 72px; color: var(--gold-soft); line-height: 1; } .arra-quienes-somos-6 { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.45; color: var(--fg); margin-top: 28px; } .arra-quienes-somos-7 { margin-top: 18px; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-bronze); } .arra-nuestros-valores-1 { max-width: 20ch; margin: 0 auto; } .arra-nuestros-valores-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; } .arra-nuestros-valores-3 { background: #ffffff; border-radius: var(--r-lg); padding: 30px 28px 34px; border: 1px solid var(--arra-line-soft); display: flex; flex-direction: column; gap: 14px; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .arra-nuestros-valores-5 { font-family: var(--font-display); font-weight: 500; font-size: 20px; color: var(--fg); } .arra-trabaja-nosotros-1 { font-size: 16px; color: rgba(255,255,255,0.7); max-width: 48ch; margin: 0 auto 30px; } .arra-trabaja-nosotros-2 { background: linear-gradient(rgba(6,11,19,0.54), rgba(6,11,19,0.54)), url('/wp-content/themes/arra/assets/img/banners/trabajar-nosotros-banner.jpg'); background: linear-gradient(rgba(6,11,19,0.54), rgba(6,11,19,0.54)), image-set(url('/wp-content/themes/arra/assets/img/banners/trabajar-nosotros-banner.webp') type('image/webp'), url('/wp-content/themes/arra/assets/img/banners/trabajar-nosotros-banner.jpg') type('image/jpeg')); border-radius: var(--r-2xl); padding: clamp(56px, 7vw, 88px) clamp(24px, 5vw, 64px); text-align: center; position: relative; overflow: hidden; background-size: cover; background-position: center; } .arra-nav-1 { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; justify-content: center; padding: 0; transition: padding 320ms var(--ease-out); } .arra-nav-3 { display: flex; flex-shrink: 0; margin: -6px 0; } .arra-nav-9 { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 10px; flex-shrink: 0; } .arra-nav-10 { display: block; width: 24px; height: 2px; background: var(--arra-ink); border-radius: 2px; } .arra-menu-1 { position: fixed; inset: 0; z-index: 60; background: var(--arra-ink-carbon); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 32px; } .arra-menu-2 { position: absolute; top: 22px; right: 22px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25); color: #ffffff; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .arra-menu-4 { font-family: var(--font-display); font-weight: 500; font-size: 26px; color: #ffffff; text-decoration: none; } .arra-contacto-1 { background: var(--arra-ink-carbon); padding: clamp(70px, 9vw, 110px) clamp(20px, 5vw, 64px) clamp(56px, 7vw, 88px); text-align: center; } .arra-contacto-2 { font-size: clamp(36px, 4.5vw, 56px); color: #ffffff; max-width: 16ch; margin: 0 auto; } .arra-contacto-3 { font-size: 17px; line-height: 1.65; color: rgba(255,255,255,0.8); max-width: 54ch; margin: 16px auto 0; } .arra-podemos-ayudarte-1 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 24px; align-items: start; } .arra-podemos-ayudarte-2 { background: #f5f5f5; border-radius: var(--r-xl); border: 1px solid var(--arra-line-soft); padding: clamp(28px, 4vw, 44px); } .arra-podemos-ayudarte-3 { margin-bottom: 12px; } .arra-podemos-ayudarte-4 { font-size: 30px; } .arra-podemos-ayudarte-5 { font-size: 15px; line-height: 1.6; color: var(--fg-soft); max-width: 52ch; margin-top: 12px; } .arra-podemos-ayudarte-15 { display: flex; flex-direction: column; gap: 16px; } .arra-podemos-ayudarte-16 { background: #f5f5f5; border-radius: var(--r-lg); border: 1px solid var(--arra-line-soft); padding: 26px 28px; } .arra-podemos-ayudarte-17 { font-size: 12px; margin-bottom: 8px; } .arra-podemos-ayudarte-18 { font-size: 15px; line-height: 1.6; color: var(--fg); } .arra-podemos-ayudarte-19 { font-size: 13px; color: var(--fg-faint); margin-top: 6px; } .arra-podemos-ayudarte-20 { font-size: 15px; line-height: 1.7; color: var(--fg); } .arra-podemos-ayudarte-21 { color: var(--arra-ink-navy); } .arra-podemos-ayudarte-22 { background: var(--arra-ink-navy); border-radius: var(--r-lg); padding: 26px 28px; position: relative; overflow: hidden; } .arra-podemos-ayudarte-23 { position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border: 1px dashed rgba(255,255,255,0.18); border-radius: 50%; } .arra-podemos-ayudarte-24 { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.85); } .arra-podemos-ayudarte-25 { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); text-decoration: none; } .arra-nav-11 { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; justify-content: center; padding: 0; transition: padding 320ms var(--ease-out); } .arra-nav-16 { position: relative; display: inline-flex; } .arra-nav-18 { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 12px; z-index: 40; } .arra-nav-19 { display: flex; flex-direction: column; background: var(--nav-core); border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; box-shadow: var(--shadow-3); padding: 8px; min-width: 250px; } .arra-nav-24 { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 10px; flex-shrink: 0; } .arra-nav-25 { display: block; width: 24px; height: 2px; background: #ffffff; border-radius: 2px; } .arra-nav-26 { display: block; padding: 10px 14px; border-radius: 14px; font-family: var(--font-body); font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.9); text-decoration: none; white-space: nowrap; } .arra-menu-6 { position: fixed; inset: 0; z-index: 60; background: var(--arra-ink-carbon); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; overflow-y: auto; } .arra-menu-7 { position: absolute; top: 20px; right: 20px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25); color: #ffffff; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .arra-menu-9 { font-family: var(--font-display); font-weight: 500; font-size: 22px; color: #ffffff; text-decoration: none; } .arra-menu-11 { font-family: var(--font-display); font-weight: 500; font-size: 19px; color: rgba(255,255,255,0.92); text-decoration: none; } .arra-pie-1 { background: var(--arra-ink-carbon); color: #ffffff; padding: 72px clamp(20px, 5vw, 64px) 28px; } .arra-pie-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: clamp(28px, 4vw, 64px); max-width: 1280px; margin: 0 auto 56px; } .arra-pie-4 { color: #9aa3b0; font-size: 14px; line-height: 1.6; max-width: 300px; } .arra-pie-5 { font-family: var(--font-display); font-weight: 500; font-size: 16px; margin-bottom: 16px; } .arra-pie-6 { font-size: 14px; color: #9aa3b0; line-height: 1.9; } .arra-pie-7 { color: #9aa3b0; } .arra-pie-8 { display: flex; flex-direction: column; gap: 12px; font-size: 14px; } .arra-pie-9 { color: #9aa3b0; text-decoration: none; } .arra-pie-13 { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; text-align: center; font-size: 13px; color: #9aa3b0; max-width: 1280px; margin: 0 auto; } .arra-nav-28 { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; justify-content: center; padding: 0; transition: padding 320ms var(--ease-out); } .arra-nav-32 { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 12px; z-index: 40; } .arra-nav-33 { display: flex; flex-direction: column; background: var(--nav-corp); border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; box-shadow: var(--shadow-3); padding: 8px; min-width: 250px; } .arra-nav-35 { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 10px; flex-shrink: 0; } .arra-nav-36 { background: var(--nav-light); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); width: 100%; max-width: 100%; padding: 7px 20.6px 7px clamp(12px, 3vw, 64px); display: flex; align-items: center; justify-content: space-between; gap: clamp(12px, 2vw, 32px); flex-wrap: nowrap; border-radius: 0px; box-shadow: none; transition: background 320ms var(--ease-out), border-radius 320ms var(--ease-out), box-shadow 320ms var(--ease-out), max-width 320ms var(--ease-out), padding 320ms var(--ease-out); min-height: 80px; box-sizing: border-box; } .arra-nav-37 { display: flex; gap: clamp(10px, calc(4.4vw - 24px), 40px); flex-wrap: nowrap; justify-content: center; min-width: 0; overflow: hidden; } .arra-nav-38 { font-family: var(--font-display); font-size: clamp(10px, 1.2vw, 13px); font-weight: 400; letter-spacing: 0.17em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--nav-ink); padding-top: 5px; padding-bottom: 3px; border-bottom: 1px solid transparent; } .arra-nav-40 { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; background: transparent; color: var(--nav-ink); border: 1px solid var(--nav-ink); border-radius: 12px; font-family: var(--font-display); font-size: clamp(11px, 1.2vw, 13px); font-weight: 400; letter-spacing: 0.17em; text-transform: uppercase; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .arra-nav-41 { height: 43px; transition: height 320ms var(--ease-out); } .arra-hueco-2 { height: 80px; background: #ffffff; } .arra-nav-42 { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; width: 100%; max-width: 100%; padding: 7px 20.6px 7px clamp(12px, 3vw, 64px); display: flex; align-items: center; justify-content: space-between; gap: clamp(12px, 2vw, 32px); flex-wrap: nowrap; border-radius: 0px; box-shadow: none; transition: background 320ms var(--ease-out), border-radius 320ms var(--ease-out), box-shadow 320ms var(--ease-out), max-width 320ms var(--ease-out), padding 320ms var(--ease-out); min-height: 80px; box-sizing: border-box; } .arra-nav-43 { display: flex; gap: clamp(10px, calc(4.4vw - 24px), 40px); flex-wrap: nowrap; justify-content: center; min-width: 0; } .arra-nav-44 { font-family: var(--font-display); font-size: clamp(10px, 1.2vw, 13px); font-weight: 400; letter-spacing: 0.17em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: rgba(255,255,255,0.78); padding-top: 5px; padding-bottom: 3px; border-bottom: 1px solid transparent; } .arra-nav-46 { font-family: var(--font-display); font-size: clamp(10px, 1.2vw, 13px); font-weight: 400; letter-spacing: 0.17em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: rgba(255,255,255,0.78); display: inline-flex; align-items: center; gap: 5px; padding-top: 5px; padding-bottom: 3px; border-bottom: 1px solid transparent; } .arra-nav-47 { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; background: transparent; color: #ffffff; border: 1px solid rgba(255,255,255,0.8); border-radius: 12px; font-family: var(--font-display); font-size: clamp(11px, 1.2vw, 13px); font-weight: 400; letter-spacing: 0.17em; text-transform: uppercase; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .arra-nav-48 { height: 43px; transition: height 320ms var(--ease-out); } .arra-pie-14 { height: 48px; margin-bottom: 18px; display: block; } .arra-nav-49 { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; width: 100%; max-width: 100%; padding: 7px 20.6px 7px clamp(12px, 3vw, 64px); display: flex; align-items: center; justify-content: space-between; gap: clamp(12px, 2vw, 32px); flex-wrap: nowrap; border-radius: 0px; box-shadow: none; transition: background 320ms var(--ease-out), border-radius 320ms var(--ease-out), box-shadow 320ms var(--ease-out), max-width 320ms var(--ease-out), padding 320ms var(--ease-out); min-height: 80px; box-sizing: border-box; } .arra-nav-50 { display: flex; gap: clamp(10px, calc(4.4vw - 24px), 40px); flex-wrap: nowrap; justify-content: center; min-width: 0; } .arra-nav-51 { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; background: transparent; color: #ffffff; border: 1px solid rgba(255,255,255,0.8); border-radius: 12px; font-family: var(--font-display); font-size: clamp(11px, 1.2vw, 13px); font-weight: 400; letter-spacing: 0.17em; text-transform: uppercase; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .arra-nav-52 { height: 43px; transition: height 320ms var(--ease-out); } .arra-menu-13 { height: 34px; margin-bottom: 6px; } .arra-menu-14 { height: 34px; margin-bottom: 10px; } /* style-hover del artboard */ .arra-arra-core-h1:hover { background: var(--core-ink); transform: translateY(-2px); } .arra-arra-core-h2:hover { background: var(--corp-deep); transform: translateY(-2px); } .arra-router-h1:hover { color: var(--gold-bronze); } .arra-router-h2:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } .arra-por-elegirnos-h1:hover { opacity: 0.9; } .arra-servicios-h1:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); } .arra-nav-h1:hover { color: var(--nav-gold); } .arra-nav-h2:hover { background: var(--nav-ink); color: #ffffff; border-color: var(--nav-ink); } .arra-menu-h1:hover { color: var(--gold); } .arra-nav-h3:hover { background: rgba(255,255,255,0.1); color: var(--gold); } .arra-nav-h4:hover { background: #ffffff; color: #436144; } .arra-nav-h5:hover { background: #ffffff; color: #5f1a31; } /* ========================================================================= ESTADO Lo que en Design calculaba renderVals(). Los valores son los suyos, medidos. Sin capa, por lo mismo que el resto de esta hoja. ========================================================================= */ /* PENDIENTE · los desplegables de «Servicios» y «Negocios digitales» en las barras de Core y Corporate. En reposo estan cerrados, que es como los dibuja Design y lo que se compara. Para abrirlos hace falta marcar su contenedor con una clase: el marcado del artboard no la trae y no se puede seleccionar un padre en CSS. Se hace al consolidar la barra en una parte del tema. No se deja una regla escrita apuntando a clases que no existen: eso es CSS muerto y la directriz de CLAUDE.md lo prohibe. */ /* El héroe de la portada, con los dos movimientos. * * El de fondo: la foto deriva despacio, que es el mismo `arra-kenburns` de * 16 s que ya llevan los héroes de Core y de Corporate. En la portada no lo * tenían y se quedaban muertas al lado de sus propias páginas. * * El de encima: al pasar el ratón, la mitad se acerca un 5 %. * * Los dos a la vez tienen truco. La deriva anima `transform`, y una * animación le gana a cualquier declaración normal: el zoom escrito como * `transform: scale(1.05)` dejaba de verse en cuanto había deriva. Se pasa * a la propiedad `scale`, que es independiente y se COMPONE con `transform` * en vez de pelearse con él. */ .arra-arra-core-4, .arra-arra-core-4 { animation: arra-kenburns 16s var(--wp--custom--movimiento--entrada-salida) infinite alternate; transition: scale 420ms var(--wp--custom--movimiento--salida); will-change: transform, scale; } .arra-arra-core-3:hover .arra-arra-core-4, .arra-arra-core-13:hover .arra-arra-core-4 { scale: 1.05; } .arra-arra-core-3:hover .arra-arra-core-8, .arra-arra-core-13:hover .arra-arra-core-17 { opacity: 1; } @media (prefers-reduced-motion: reduce) { .arra-arra-core-4, .arra-arra-core-4 { animation: none; transition: none; }} /* La barra al hacer scroll. nav.js pone .arra-flotante en el pasados 70 px, que es el umbral del artboard. La transición ya venía dentro de las propias declaraciones. */ .arra-flotante .arra-nav-1, .arra-flotante .arra-nav-11, .arra-flotante .arra-nav-28 { padding: 14px 16px 0; } .arra-flotante .arra-nav-36 { background: rgba(230, 232, 236, 0.96); max-width: 1180px; padding: 6px 12.6px 6px 22px; border-radius: var(--r-xl); border-bottom: 1px solid rgba(6,11,19,0.08); box-shadow: 0 1px 1px rgba(6,11,19,0.06), 0 2px 4px rgba(6,11,19,0.06), 0 6px 12px rgba(6,11,19,0.08), 0 14px 28px rgba(6,11,19,0.12), 0 30px 60px rgba(6,11,19,0.16); } .arra-flotante .arra-nav-41, .arra-flotante .arra-nav-48, .arra-flotante .arra-nav-52 { height: 34px; } .arra-flotante .arra-nav-42 { background: rgba(67, 97, 68, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); max-width: 1180px; padding: 6px 12.6px 6px 22px; border-radius: var(--r-xl); box-shadow: 0 1px 1px rgba(6,11,19,0.06), 0 2px 4px rgba(6,11,19,0.06), 0 6px 12px rgba(6,11,19,0.08), 0 14px 28px rgba(6,11,19,0.12), 0 30px 60px rgba(6,11,19,0.16); } .arra-flotante .arra-nav-49 { background: rgba(110, 40, 64, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); max-width: 1180px; padding: 6px 12.6px 6px 22px; border-radius: var(--r-xl); box-shadow: 0 1px 1px rgba(6,11,19,0.06), 0 2px 4px rgba(6,11,19,0.06), 0 6px 12px rgba(6,11,19,0.08), 0 14px 28px rgba(6,11,19,0.12), 0 30px 60px rgba(6,11,19,0.16); } .arra-flotante .arra-nav-36, .arra-flotante .arra-nav-42, .arra-flotante .arra-nav-49 { min-height: 64px; } /* Móvil. El artboard cambia a los 860 px, y a 390 px no cambia nada más: está medido. */ @media (max-width: 859px) { .arra-arra-core-2 { height: auto; } .arra-arra-core-3, .arra-arra-core-13 { position: relative; clip-path: none; padding: 72px 24px; min-height: 56vh; } .arra-nav-37, .arra-nav-43, .arra-nav-50 { display: none; } .arra-nav-9, .arra-nav-24, .arra-nav-35 { display: flex; } .arra-nav-40, .arra-nav-47, .arra-nav-51 { margin-left: auto; } } /* ========================================================================= EL «ESTÁS AQUÍ» La marca ya no viene en el marcado —no puede: la barra es la misma en las veinticuatro páginas— sino de aria-current="page", que pone PHP al pintar. Los valores son los de Design. Ver destilar.py, ACTIVO_CSS. ========================================================================= */ .arra-nav-11 [aria-current="page"]:not(:has(img)) { color: #ffffff; } .arra-menu-6 [aria-current="page"]:not(:has(img)) { color: var(--gold); } .arra-nav-28 [aria-current="page"]:not(:has(img)) { color: #ffffff; } .arra-nav-1 [aria-current="page"]:not(:has(img)) { color: var(--nav-gold); } .arra-menu-1 [aria-current="page"]:not(:has(img)) { color: var(--gold); } .arra-pie-1 [aria-current="page"]:not(:has(img)) { color: var(--gold); } /* El filete al pasar el ratón, que se dibuja solo. El mismo gesto que marca la página actual, para que el ratón anticipe dónde cae, pero recorrido: entra creciendo de izquierda a derecha y sale vaciándose de derecha a izquierda. Las dos cosas son el MISMO `scaleX` con el origen a la izquierda -crece hacia la derecha, se retira hacia la izquierda-; para que saliera por el otro lado habría que mover el origen a la derecha al soltar. Va en un `::after` y no en el borde porque `border-bottom-color` no se puede recorrer: o está o no está. El borde sigue ahí, transparente, reservando el hueco y pintando la página actual. Solo los de la fila: los del panel ya tienen su propio hover -fondo y dorado- y un filete ahí sobraría. Y `:focus-visible` con el ratón, que en el móvil y con el teclado no hay ratón que pasar. */ .arra-nav-11 nav > a, .arra-nav-11 nav > .arra-desplegable > a { position: relative; transition: color var(--wp--custom--movimiento--muy-lento) var(--wp--custom--movimiento--entrada-salida); } .arra-nav-11 nav > a::after, .arra-nav-11 nav > .arra-desplegable > a::after { content: ""; position: absolute; inset-inline: 0; bottom: calc(-1 * 0.1em); block-size: 0.1em; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--wp--custom--movimiento--muy-lento) var(--wp--custom--movimiento--entrada-salida); } .arra-nav-11 nav > a:hover::after, .arra-nav-11 nav > a:focus-visible::after, .arra-nav-11 nav > .arra-desplegable > a:focus-visible::after, .arra-nav-11 nav > .arra-desplegable:hover > a::after, .arra-nav-11 nav > .arra-desplegable:focus-within > a::after, .arra-nav-11 nav > [aria-current="page"]:not(:has(img))::after, .arra-nav-11 nav > .arra-desplegable:has([aria-current="page"]) > a::after { transform: scaleX(1); } .arra-nav-28 nav > a, .arra-nav-28 nav > .arra-desplegable > a { position: relative; transition: color var(--wp--custom--movimiento--muy-lento) var(--wp--custom--movimiento--entrada-salida); } .arra-nav-28 nav > a::after, .arra-nav-28 nav > .arra-desplegable > a::after { content: ""; position: absolute; inset-inline: 0; bottom: calc(-1 * 0.1em); block-size: 0.1em; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--wp--custom--movimiento--muy-lento) var(--wp--custom--movimiento--entrada-salida); } .arra-nav-28 nav > a:hover::after, .arra-nav-28 nav > a:focus-visible::after, .arra-nav-28 nav > .arra-desplegable > a:focus-visible::after, .arra-nav-28 nav > .arra-desplegable:hover > a::after, .arra-nav-28 nav > .arra-desplegable:focus-within > a::after, .arra-nav-28 nav > [aria-current="page"]:not(:has(img))::after, .arra-nav-28 nav > .arra-desplegable:has([aria-current="page"]) > a::after { transform: scaleX(1); } .arra-nav-1 nav > a, .arra-nav-1 nav > .arra-desplegable > a { position: relative; transition: color var(--wp--custom--movimiento--muy-lento) var(--wp--custom--movimiento--entrada-salida); } .arra-nav-1 nav > a::after, .arra-nav-1 nav > .arra-desplegable > a::after { content: ""; position: absolute; inset-inline: 0; bottom: calc(-1 * 0.1em); block-size: 0.1em; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--wp--custom--movimiento--muy-lento) var(--wp--custom--movimiento--entrada-salida); } .arra-nav-1 nav > a:hover::after, .arra-nav-1 nav > a:focus-visible::after, .arra-nav-1 nav > .arra-desplegable > a:focus-visible::after, .arra-nav-1 nav > .arra-desplegable:hover > a::after, .arra-nav-1 nav > .arra-desplegable:focus-within > a::after, .arra-nav-1 nav > [aria-current="page"]:not(:has(img))::after, .arra-nav-1 nav > .arra-desplegable:has([aria-current="page"]) > a::after { transform: scaleX(1); } /* Sin movimiento para quien lo ha pedido: el filete sigue apareciendo, pero de golpe. Lo que se quita es el recorrido, no la señal. */ @media (prefers-reduced-motion: reduce) { .arra-nav-11 nav > a, .arra-nav-11 nav > .arra-desplegable > a, .arra-nav-11 nav > a::after, .arra-nav-11 nav > .arra-desplegable > a::after { transition: none; } .arra-nav-28 nav > a, .arra-nav-28 nav > .arra-desplegable > a, .arra-nav-28 nav > a::after, .arra-nav-28 nav > .arra-desplegable > a::after { transition: none; } .arra-nav-1 nav > a, .arra-nav-1 nav > .arra-desplegable > a, .arra-nav-1 nav > a::after, .arra-nav-1 nav > .arra-desplegable > a::after { transition: none; } } /* El botón de clientes se enciende al apuntarlo, tabular hasta él o pulsarlo. dorado-700 con texto carbón: 5,65:1. Ver destilar.py. */ .arra-nav-40:hover, .arra-nav-40:focus-visible, .arra-nav-40:active { background: var(--gold-bronze); color: var(--wp--preset--color--carbon-950); border-color: var(--gold-bronze); } /* La frase de las dos líneas, en el pie: segunda lectura. */ .arra-pie-lineas { margin-block-start: 20px; font-size: 13.5px; opacity: 0.82; } .arra-pie-lineas::before { content: ""; display: block; inline-size: 28px; block-size: 0.1em; background: var(--gold); margin-block-end: 14px; } .arra-pie-lineas a { color: inherit; } .arra-pie-lineas a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; } /* El lema del pie, partido por sus cuatro miembros. */ .arra-pie-lema-linea { display: block; } /* Las migas, en el sitio del antetítulo. Ver destilar.py. */ .arra-migas a { color: inherit; text-decoration: none; position: relative; } .arra-migas a::after { content: ""; position: absolute; inset-inline: 0; bottom: -0.25em; block-size: 0.1em; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--wp--custom--movimiento--muy-lento) var(--wp--custom--movimiento--entrada-salida); } .arra-migas a:hover::after, .arra-migas a:focus-visible::after { transform: scaleX(1); } .arra-migas .arra-migas-sep { opacity: 0.45; margin-inline: 0.5em 0.62em; } @media (prefers-reduced-motion: reduce) { .arra-migas a::after { transition: none; }} /* El menú móvil, en dos niveles. Ver destilar.py. */ .arra-menu-raiz, .arra-menu-lista { list-style: none; margin: 0; padding: 0; align-self: stretch; } .arra-menu-cuerpo { align-self: stretch; position: relative; } .arra-menu-fila { display: block; position: relative; inline-size: 100%; box-sizing: border-box; background: none; border: 0; padding: 11px 34px; cursor: pointer; text-align: start; text-decoration: none; font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.45; } .arra-menu-fila--grupo::after { content: ""; position: absolute; inset-inline-end: 16px; inset-block-start: 50%; inline-size: 9px; block-size: 9px; margin-block-start: -6px; border-inline-end: 2px solid var(--gold); border-block-end: 2px solid var(--gold); transform: rotate(-45deg); transition: transform var(--wp--custom--movimiento--muy-lento) var(--wp--custom--movimiento--entrada-salida); } .arra-menu-lista > li > a { display: block; font-size: 17px; font-weight: 400; padding: 9px 34px; text-align: start; text-decoration: none; } .arra-menu-ficha summary { display: block; list-style: none; } .arra-menu-ficha summary::-webkit-details-marker { display: none; } /* Los dos niveles, solo con JavaScript. Ver nav.js. */ .js-menu-niveles .arra-menu-sub { position: absolute; inset: 0; padding-block-start: 4px; transform: translateX(100%); opacity: 0; pointer-events: none; transition: transform 360ms var(--wp--custom--movimiento--salida), opacity 360ms var(--wp--custom--movimiento--salida); } .js-menu-niveles details[open] > .arra-menu-sub { transform: translateX(0); opacity: 1; pointer-events: auto; } .js-menu-niveles .arra-menu-cuerpo:has(details[open]) .arra-menu-fila { transform: translateX(-28%); opacity: 0; pointer-events: none; } .js-menu-niveles .arra-menu-fila { transition: transform 360ms var(--wp--custom--movimiento--salida), opacity 360ms var(--wp--custom--movimiento--salida); } .arra-menu-volver { display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; cursor: pointer; color: var(--wp--preset--color--blanco); opacity: 0.78; padding: 0 10px 16px; font-family: var(--font-display); font-weight: 500; font-size: 17px; } .arra-menu-volver::before { content: ""; flex: none; inline-size: 9px; block-size: 9px; border-inline-start: 2px solid var(--gold); border-block-end: 2px solid var(--gold); transform: rotate(45deg); transition: transform var(--wp--custom--movimiento--muy-lento) var(--wp--custom--movimiento--entrada-salida); } .arra-menu-volver:hover::before { transform: rotate(45deg) translate(3px, -3px); } .arra-menu-lista > li > a { opacity: 0; transform: translateY(8px); transition: opacity 360ms var(--wp--custom--movimiento--salida), transform 360ms var(--wp--custom--movimiento--salida); transition-delay: calc((sibling-index() - 1) * (calc(var(--wp--custom--movimiento--muy-lento) - 360ms) / max(sibling-count() - 1, 1))); } details[open] .arra-menu-lista > li > a { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js-menu-niveles .arra-menu-sub, .js-menu-niveles .arra-menu-raiz, .arra-menu-lista > li > a { transition: none; } .arra-menu-lista > li > a { opacity: 1; transform: none; }} /* El aspa del menú: dos rayas, no un círculo. */ .js-menu-niveles .arra-menu-cabecera > button { background: none; border: 0; border-radius: 0; font-size: 0; color: transparent; position: relative; } .js-menu-niveles .arra-menu-cabecera > button::before, .js-menu-niveles .arra-menu-cabecera > button::after { content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; inline-size: 22px; block-size: 2px; margin-inline-start: -11px; margin-block-start: -1px; border-radius: 2px; background: #fff; transition: transform var(--wp--custom--movimiento--muy-lento) var(--wp--custom--movimiento--entrada-salida); } .js-menu-niveles .arra-menu-cabecera > button::before { transform: rotate(45deg); } .js-menu-niveles .arra-menu-cabecera > button::after { transform: rotate(-45deg); } /* La cabecera del menú, donde está la barra. Ver nav.js. */ .js-menu-niveles .arra-menu-cabecera img { block-size: var(--arra-menu-logo-alto, 34px); inline-size: auto; } .js-menu-niveles .arra-menu-cabecera > :is(a, img) { translate: var(--arra-menu-logo-dx, 0) var(--arra-menu-logo-dy, 0); } .js-menu-niveles .arra-menu-cabecera > button { translate: var(--arra-menu-boton-dx, 0) var(--arra-menu-boton-dy, 0); } /* El menú baja como un telón. Ver nav.js. */ .js-menu-niveles { visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 700ms var(--wp--custom--movimiento--salida), visibility 0s linear 700ms; } .js-menu-niveles.esta-abierto { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path 700ms var(--wp--custom--movimiento--salida), visibility 0s; } .js-menu-niveles .arra-menu-raiz > li { opacity: 0; transform: translateY(14px); } .js-menu-niveles.esta-abierto .arra-menu-raiz > li { opacity: 1; transform: none; transition: opacity 420ms var(--wp--custom--movimiento--salida) calc(sibling-index() * 55ms + 300ms), transform 420ms var(--wp--custom--movimiento--salida) calc(sibling-index() * 55ms + 300ms); } @media (prefers-reduced-motion: reduce) { .js-menu-niveles { transition: none; } .js-menu-niveles .arra-menu-raiz > li { opacity: 1; transform: none; transition: none; }} /* El contenido del menú, arriba. Ver destilar.py. */ [data-arra-menu] { justify-content: flex-start; overflow-y: auto; } /* El fondo del menú no se queda corto al cargar. Ver destilar.py. */ .arra-menu--generica { box-shadow: 0 50vh 0 0 var(--arra-ink-carbon); } .arra-menu--core { box-shadow: 0 50vh 0 0 var(--wp--preset--color--verde-900); } .arra-menu--corporate { box-shadow: 0 50vh 0 0 var(--wp--preset--color--burdeos-950); } [data-arra-menu].js-menu-niveles.esta-abierto { clip-path: inset(0 0 calc(-1 * 50vh) 0); } /* La cabecera del menú no se va con el scroll. Ver destilar.py. */ .arra-menu-cabecera { align-self: stretch; position: sticky; inset-block-start: 0; z-index: 1; background: inherit; display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding-block: 14px 16px; } .arra-menu-cabecera > :is(a, img) { grid-row: 1; grid-column: 1; margin: 0; } .arra-menu-cabecera > button { position: static; grid-row: 1; grid-column: 3; justify-self: end; } .arra-menu--core > .arra-menu-cabecera { inset-block-start: calc(-1 * 32px); } .arra-menu--corporate > .arra-menu-cabecera { inset-block-start: calc(-1 * 32px); } .arra-menu--generica > .arra-menu-cabecera { inset-block-start: calc(-1 * 32px); } /* Y cada menú, del color de su línea. Los tonos y el porqué del dorado de Core -que sube a dorado-300-, en destilar.py. */ .arra-menu--core { background: var(--wp--preset--color--verde-900); --gold: var(--wp--preset--color--dorado-300); } .arra-menu--corporate { background: var(--wp--preset--color--burdeos-950); } /* El botón de clientes en el móvil: encoge, y por debajo de 359px se va al menú, que es donde sí cabe. Ver destilar.py. */ @media (max-width: 859px) { .arra-nav-40, .arra-nav-47, .arra-nav-51 { font-size: 10px; letter-spacing: 0.12em; padding: 8px 11px; border-radius: 10px; } } .arra-cta-en-menu { display: none; } @media (max-width: 359px) { .arra-nav-40, .arra-nav-47, .arra-nav-51 { display: none; } .arra-cta-en-menu { display: block; }} /* Pantallas medianas: el tracking se cierra para que quepa la fila. */ @media (max-width: 1200px) { .arra-nav-11 nav > a, .arra-nav-11 nav > .arra-desplegable > a { letter-spacing: 0.11em; } .arra-nav-28 nav > a, .arra-nav-28 nav > .arra-desplegable > a { letter-spacing: 0.11em; } .arra-nav-1 nav > a, .arra-nav-1 nav > .arra-desplegable > a { letter-spacing: 0.11em; } } /* Los desplegables de «Servicios» y «Negocios digitales». En Design los abría el estado de JavaScript; aquí los abre el CSS, que además responde al teclado. `block` es el valor que les daba Design. */ .arra-desplegable:hover > .arra-nav-18, .arra-desplegable:focus-within > .arra-nav-18 { display: block; } .arra-desplegable:hover > .arra-nav-32, .arra-desplegable:focus-within > .arra-nav-32 { display: block; } /* El panel cuelga por debajo de la barra, no metido en ella. El contenedor del grupo se estira a todo el alto de la fila para que `top: 100%` caiga en el suelo de la barra. Ver destilar.py. */ header:has(.arra-desplegable) > nav { align-self: stretch; align-items: center; } .arra-desplegable { align-self: stretch; display: flex; align-items: center; } .arra-nav-18, .arra-nav-32 { padding-top: 27px; } /* El panel se destapa de arriba abajo y desenfoca la página. Los enlaces entran escalonados. Ver destilar.py. */ .arra-nav-18, .arra-nav-32 { transition: clip-path 420ms var(--wp--custom--movimiento--salida), opacity 300ms var(--wp--custom--movimiento--salida), display 420ms allow-discrete; clip-path: inset(0 0 100% 0); opacity: 0; } .arra-desplegable:hover > .arra-nav-18, .arra-desplegable:focus-within > .arra-nav-18, .arra-desplegable:hover > .arra-nav-32, .arra-desplegable:focus-within > .arra-nav-32 { clip-path: inset(0 0 0 0); opacity: 1; } @starting-style { .arra-desplegable:hover > .arra-nav-18, .arra-desplegable:focus-within > .arra-nav-18, .arra-desplegable:hover > .arra-nav-32, .arra-desplegable:focus-within > .arra-nav-32 { clip-path: inset(0 0 100% 0); opacity: 0; }} .arra-desplegable a:not([data-arra-disparador]) { opacity: 0; transform: translateY(10px); filter: blur(4px); transition: opacity 360ms var(--wp--custom--movimiento--salida), transform 360ms var(--wp--custom--movimiento--salida), filter 360ms var(--wp--custom--movimiento--salida); } .arra-desplegable:hover a:not([data-arra-disparador]), .arra-desplegable:focus-within a:not([data-arra-disparador]) { opacity: 1; transform: none; filter: none; } @starting-style { .arra-desplegable:hover a:not([data-arra-disparador]), .arra-desplegable:focus-within a:not([data-arra-disparador]) { opacity: 0; transform: translateY(10px); filter: blur(4px); }} .arra-desplegable a:not([data-arra-disparador]) { transition-delay: calc(200ms + (sibling-index() - 1) * (calc(var(--wp--custom--movimiento--muy-lento) - 360ms - 200ms) / max(sibling-count() - 1, 1))); } .arra-nav-11 header { position: relative; z-index: 1; } .arra-nav-11::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; backdrop-filter: blur(9px); background: rgba(6, 11, 19, 0.28); opacity: 0; transition: opacity 300ms var(--wp--custom--movimiento--salida); } .arra-nav-11:has(.arra-desplegable:hover)::after, .arra-nav-11:has(.arra-desplegable:focus-within)::after { opacity: 1; } .arra-nav-28 header { position: relative; z-index: 1; } .arra-nav-28::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; backdrop-filter: blur(9px); background: rgba(6, 11, 19, 0.28); opacity: 0; transition: opacity 300ms var(--wp--custom--movimiento--salida); } .arra-nav-28:has(.arra-desplegable:hover)::after, .arra-nav-28:has(.arra-desplegable:focus-within)::after { opacity: 1; } @media (prefers-reduced-motion: reduce) { .arra-nav-18, .arra-nav-32, .arra-desplegable a:not([data-arra-disparador]) { transition: none; } .arra-desplegable a:not([data-arra-disparador]) { opacity: 1; transform: none; filter: none; }} /* El grupo que contiene la página actual, marcado como ella. */ .arra-nav-11 .arra-desplegable:has([aria-current="page"]) > a { color: #ffffff; } .arra-nav-11 .arra-desplegable [aria-current="page"] { color: var(--gold); font-weight: 600; } .arra-nav-28 .arra-desplegable:has([aria-current="page"]) > a { color: #ffffff; } .arra-nav-28 .arra-desplegable [aria-current="page"] { color: var(--gold); font-weight: 600; } /* ========================================================================= ENCUADRE DE LAS FOTOS DE FONDO Ver destilar.py, ENCUADRE: por qué es un desplazamiento y no un background-position en porcentaje, y por qué solo a partir de 860 px. ========================================================================= */ @media (min-width: 860px) { .arra-arra-core-5.arra-arra-core-5 { inset-inline-start: -35%; inline-size: calc(100% + 35%); } } /* El antetítulo de la tarjeta de llamada a la acción, sobre foto. Va en blanco y no en dorado: mide 13 px, así que WCAG le exige 4,5:1, y el dorado ahí obligaba a un velo de 0,66 que se comía la foto. El gesto dorado se queda en el resalte del titular, que a 40 px solo necesita 3:1. Ver destilar.py, css_del_cta(). */ #cta .arra-kicker, .arra-cta-con-foto .arra-kicker { color: var(--wp--preset--color--blanco); } /* Y el parrafo, en blanco entero. `velo_suficiente()` elige el velo de cada foto suponiendo que los tres textos son #ffffff, pero Design pinta el parrafo con un blanco al 75 %. Esa rebaja no la ve el calculo, asi que el velo sale corto: medido sobre el pixel mas claro de la foto que de verdad cae bajo el parrafo, daba de 3,33:1 a 3,77:1 en diez de las once tarjetas, por debajo del 4,5:1 que pide AA a 15,5 px. Con el blanco entero va de 4,54:1 a 7,22:1 y pasan las once. Se corrige aqui y no subiendo el velo porque el velo tendria que llegar a 0,66 y se comeria la foto, que es justo lo que este mismo bloque evito con el antetitulo. Ver destilar.py, css_del_cta(). */ .arra-cta-con-foto > p { color: var(--wp--preset--color--blanco); } /* Las tres pruebas del valor: numerales grandes y una linea fina, sin caja. Cuerpos y colores de la NumberCard del sistema de diseno. Ver destilar.py, css_de_las_pruebas(). */ div:has(+ .arra-pruebas) { text-align: start; } /* El gris que separa secciones, sangrado a todo el ancho. Ver destilar.py, css_de_los_fondos(). */ .arra-fondo-suave { background: var(--wp--preset--color--neutro-100); --arra-fondo-seccion: var(--wp--preset--color--neutro-100); box-shadow: 0 0 0 100vmax var(--wp--preset--color--neutro-100); clip-path: inset(0 -100vmax); padding-block: calc(var(--section-pad-y) * 0.58); } /* Preguntas frecuentes. Forma del FaqSection del sistema, con los desplegables en
nativo. Ver destilar.py. */ .arra-faq.arra-faq { padding-block-end: 0; } .arra-fondo-suave.arra-faq.arra-faq { padding-block-end: var(--section-pad-y); } .arra-fondo-suave .arra-faq-caja.arra-faq-caja { background: var(--wp--preset--color--blanco); } .arra-faq-caja { display: grid; gap: 40px; align-items: start; grid-template-columns: minmax(0, 1fr); background: var(--wp--preset--color--neutro-100); border: 1px solid var(--arra-line-soft); border-radius: var(--r-xl); padding: clamp(28px, 4vw, 44px); } @media (min-width: 900px) { .arra-faq-caja { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 56px; } .arra-faq-intro { position: sticky; inset-block-start: 118px; }} .arra-faq-titulo { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -0.02em; line-height: 1.15; margin: 12px 0 22px; color: var(--fg); text-wrap: balance; } .arra-faq-fila { border-block-end: 1px solid var(--arra-line-soft); } .arra-faq-fila:first-child { border-block-start: 1px solid var(--arra-line-soft); } .arra-faq-pregunta { display: flex; align-items: center; gap: 16px; justify-content: space-between; cursor: pointer; list-style: none; padding-block: 18px; font-family: var(--font-display); font-weight: 500; font-size: 17px; line-height: 1.35; color: var(--fg); } .arra-faq-pregunta::-webkit-details-marker { display: none; } .arra-faq-pregunta::after { content: ""; flex: none; inline-size: 9px; block-size: 9px; border-inline-end: 2px solid var(--wp--preset--color--dorado-700); border-block-end: 2px solid var(--wp--preset--color--dorado-700); rotate: 45deg; translate: 0 -2px; transition: rotate var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); } .arra-faq-fila[open] .arra-faq-pregunta::after { rotate: -135deg; translate: 0 2px; } .arra-faq-respuesta { font-size: 15px; line-height: 1.65; color: var(--fg-soft); padding-block-end: 20px; } .arra-faq-respuesta p { margin: 0; } .arra-faq-respuesta p + p { margin-block-start: 0.95em; } @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } .arra-faq-fila::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida), content-visibility var(--wp--custom--movimiento--base) allow-discrete, opacity var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); } .arra-faq-fila[open]::details-content { block-size: auto; opacity: 1; }} @media (prefers-reduced-motion: reduce) { .arra-faq-pregunta::after, .arra-faq-cta { transition: none; } .arra-faq-fila::details-content { transition: none; }} /* La seccion anterior a una banda gris parte su aire en dos, para quedar centrada en su franja blanca. Ver destilar.py. */ .arra-aire-repartido { padding-block-start: calc(var(--section-pad-y) / 2); padding-block-end: calc(var(--section-pad-y) / 2); } /* m6 · La linea de proceso de «Como trabajamos». Ver destilar.py, proceso_en_linea(), y el catalogo en preview/catalogo.html. */ .arra-proceso { --arra-proceso-hueco: clamp(16px, 2.4vw, 30px); --arra-proceso-punto: 30px; list-style: none; margin: clamp(30px, 4vw, 46px) 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--arra-proceso-hueco); } .arra-proceso__fase { position: relative; display: grid; grid-template-rows: var(--arra-proceso-punto) auto 1fr; row-gap: 12px; } .arra-proceso__fase:not(:last-child)::before, .arra-proceso__fase:not(:last-child)::after { content: ""; position: absolute; inset-block-start: calc(var(--arra-proceso-punto) / 2 - 1px); inset-inline-start: calc(var(--arra-proceso-punto) / 2); inline-size: calc(100% + var(--arra-proceso-hueco)); block-size: 2px; } .arra-proceso__fase::before { background: var(--arra-line); } .arra-proceso__fase::after { background: var(--wp--preset--color--dorado-500); transform: scaleX(0); transform-origin: left; } .arra-proceso__punto { position: relative; z-index: 1; inline-size: var(--arra-proceso-punto); block-size: var(--arra-proceso-punto); border-radius: 50%; display: grid; place-items: center; background: var(--arra-linea-fuerte); color: var(--wp--preset--color--blanco); font-family: var(--font-display); font-weight: 500; font-size: 15px; } .arra-proceso__fase:last-child .arra-proceso__punto { background: var(--wp--preset--color--dorado-700); color: var(--wp--preset--color--carbon-950); } .arra-proceso__nombre { font-family: var(--font-display); font-weight: 500; font-size: 18px; line-height: 1.2; margin: 0; color: var(--fg); } .arra-proceso__caja { background: var(--wp--preset--color--neutro-200); border: 1px solid var(--arra-line-soft); border-radius: var(--r-lg); padding: 18px 20px 20px; } .arra-proceso__caja p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--fg-soft); } .arra-proceso.in .arra-proceso__fase::after { animation: arra-proceso-traza 1400ms var(--wp--custom--movimiento--entrada-salida) forwards; } .arra-proceso.in .arra-proceso__punto { animation: arra-proceso-hito 420ms var(--wp--custom--movimiento--salida) backwards; } .arra-proceso.in .arra-proceso__fase:nth-child(1)::after { animation-delay: 140ms; } .arra-proceso.in .arra-proceso__fase:nth-child(2)::after { animation-delay: 1290ms; } .arra-proceso.in .arra-proceso__fase:nth-child(3)::after { animation-delay: 2440ms; } .arra-proceso.in .arra-proceso__fase:nth-child(4)::after { animation-delay: 3590ms; } .arra-proceso.in .arra-proceso__fase:nth-child(5)::after { animation-delay: 4740ms; } .arra-proceso.in .arra-proceso__fase:nth-child(6)::after { animation-delay: 5890ms; } .arra-proceso.in .arra-proceso__fase:nth-child(7)::after { animation-delay: 7040ms; } .arra-proceso.in .arra-proceso__fase:nth-child(8)::after { animation-delay: 8190ms; } .arra-proceso.in .arra-proceso__fase:nth-child(1) .arra-proceso__punto { animation-delay: 0ms; } .arra-proceso.in .arra-proceso__fase:nth-child(2) .arra-proceso__punto { animation-delay: 1150ms; } .arra-proceso.in .arra-proceso__fase:nth-child(3) .arra-proceso__punto { animation-delay: 2300ms; } .arra-proceso.in .arra-proceso__fase:nth-child(4) .arra-proceso__punto { animation-delay: 3450ms; } .arra-proceso.in .arra-proceso__fase:nth-child(5) .arra-proceso__punto { animation-delay: 4600ms; } .arra-proceso.in .arra-proceso__fase:nth-child(6) .arra-proceso__punto { animation-delay: 5750ms; } .arra-proceso.in .arra-proceso__fase:nth-child(7) .arra-proceso__punto { animation-delay: 6900ms; } .arra-proceso.in .arra-proceso__fase:nth-child(8) .arra-proceso__punto { animation-delay: 8050ms; } @keyframes arra-proceso-traza { to { transform: scaleX(1); } } @keyframes arra-proceso-traza-v { to { transform: scaleY(1); } } @keyframes arra-proceso-hito { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } @media (min-width: 1200px) { .arra-proceso.in .arra-proceso__fase:nth-child(1) { animation-delay: 0ms; } .arra-proceso.in .arra-proceso__fase:nth-child(2) { animation-delay: 1150ms; } .arra-proceso.in .arra-proceso__fase:nth-child(3) { animation-delay: 2300ms; } .arra-proceso.in .arra-proceso__fase:nth-child(4) { animation-delay: 3450ms; } .arra-proceso.in .arra-proceso__fase:nth-child(5) { animation-delay: 4600ms; } .arra-proceso.in .arra-proceso__fase:nth-child(6) { animation-delay: 5750ms; } .arra-proceso.in .arra-proceso__fase:nth-child(7) { animation-delay: 6900ms; } .arra-proceso.in .arra-proceso__fase:nth-child(8) { animation-delay: 8050ms; }} @media (max-width: 1199px) { .arra-proceso { grid-auto-flow: row; grid-template-columns: 1fr; } .arra-proceso__fase { grid-template-columns: var(--arra-proceso-punto) minmax(0, 30rem); grid-template-rows: var(--arra-proceso-punto) auto; column-gap: 16px; row-gap: 10px; padding-block-end: 22px; } .arra-proceso__fase:last-child { padding-block-end: 0; } .arra-proceso__nombre { align-self: center; } .arra-proceso__caja { grid-column: 2; } .arra-proceso__fase:not(:last-child)::before, .arra-proceso__fase:not(:last-child)::after { inset-block-start: var(--arra-proceso-punto); inset-inline-start: calc(var(--arra-proceso-punto) / 2 - 1px); inline-size: 2px; block-size: calc(100% - var(--arra-proceso-punto)); } .arra-proceso__fase::after { transform: scaleY(0); transform-origin: top; } .arra-proceso.in .arra-proceso__fase::after { animation-name: arra-proceso-traza-v; } .arra-proceso.avanza-con-scroll .arra-proceso__fase::after, .arra-proceso.avanza-con-scroll.in .arra-proceso__fase::after { animation: none; transform: scaleY(var(--trazo, 0)); } .arra-proceso.avanza-con-scroll .arra-proceso__punto { animation: none; background: var(--wp--preset--color--neutro-400); color: var(--wp--preset--color--tinta-500); transition: background 320ms var(--wp--custom--movimiento--salida), color 320ms var(--wp--custom--movimiento--salida); } .arra-proceso.avanza-con-scroll .alcanzada .arra-proceso__punto { background: var(--wp--preset--color--dorado-700); color: var(--wp--preset--color--blanco); }} @media (prefers-reduced-motion: reduce) { .arra-proceso__fase::after { transform: none; } .arra-proceso.in .arra-proceso__fase::after, .arra-proceso.in .arra-proceso__punto { animation: none; }} /* m14 · Los puntos de la tesis, con los ticks encendiendose en cascada. Ver destilar.py, puntos_en_la_tesis(). */ .arra-ticks { list-style: none; display: grid; gap: 14px clamp(24px, 4vw, 54px); grid-template-columns: repeat(2, minmax(0, 1fr)); max-inline-size: 760px; margin: clamp(26px, 3.4vw, 38px) auto 0; padding: 0; text-align: start; } .arra-ticks__punto { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.5; color: var(--fg); } .arra-ticks__marca { flex: none; inline-size: 22px; block-size: 22px; margin-block-start: 1px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--wp--preset--color--dorado-700); color: var(--wp--preset--color--blanco); } .arra-ticks__marca svg { inline-size: 12px; block-size: 12px; } .arra-ticks.in .arra-ticks__marca { animation: arra-tick-pop 400ms var(--wp--custom--movimiento--salida) backwards; } .arra-ticks.in .arra-ticks__punto > span:last-child { animation: arra-tick-entra 500ms var(--wp--custom--movimiento--salida) backwards; } .arra-ticks.in .arra-ticks__punto:nth-child(1) .arra-ticks__marca { animation-delay: 120ms; } .arra-ticks.in .arra-ticks__punto:nth-child(2) .arra-ticks__marca { animation-delay: 300ms; } .arra-ticks.in .arra-ticks__punto:nth-child(3) .arra-ticks__marca { animation-delay: 480ms; } .arra-ticks.in .arra-ticks__punto:nth-child(4) .arra-ticks__marca { animation-delay: 660ms; } .arra-ticks.in .arra-ticks__punto:nth-child(1) > span:last-child { animation-delay: 170ms; } .arra-ticks.in .arra-ticks__punto:nth-child(2) > span:last-child { animation-delay: 350ms; } .arra-ticks.in .arra-ticks__punto:nth-child(3) > span:last-child { animation-delay: 530ms; } .arra-ticks.in .arra-ticks__punto:nth-child(4) > span:last-child { animation-delay: 710ms; } @keyframes arra-tick-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes arra-tick-entra { from { transform: translateX(-10px); opacity: 0; } to { transform: none; opacity: 1; } } @media (max-width: 719px) { .arra-ticks { grid-template-columns: 1fr; gap: 13px; }} @media (prefers-reduced-motion: reduce) { .arra-ticks.in .arra-ticks__marca, .arra-ticks.in .arra-ticks__punto > span:last-child { animation: none; }} @keyframes arra-orbita { to { transform: rotate(360deg); } } /* El mazo de fichas del movil. Ver destilar.py, css_de_la_pila(), que explica por que no hay carril ni altura inventada. */ .arra-pila, .arra-pila__escenario { display: contents; } @media (max-width: 719px) { .arra-pila.esta-apilada, .arra-pila.esta-apilada .arra-pila__escenario { display: block; } .arra-pila.esta-apilada .arra-pila__escenario > * + * { margin-block-start: 20px; } .arra-pila.esta-apilada .arra-pila__escenario > * { position: sticky; inset-block-start: var(--pila-arriba, 150px); box-sizing: border-box; } .arra-pila__titulo { position: sticky; inset-block-start: var(--pila-barra, 104px); z-index: 3; background: var(--arra-fondo-seccion); padding-block-end: 20px; } .arra-pila__titulo.esta-pegado { box-shadow: 0 calc(-1 * var(--pila-tapa, 0px)) 0 var(--arra-fondo-seccion); } .arra-pila.esta-apilada .arra-pila__escenario > * > :first-child { transition: color 620ms var(--wp--custom--movimiento--salida); } .arra-pila.esta-apilada .arra-pila__escenario > .acaba-de-llegar > :first-child { color: var(--wp--preset--color--burdeos-700); transition-duration: 160ms; }} @supports selector(:has(*)) { h1:has(> .arra-rueda) { max-inline-size: 23ch; font-size: min(clamp(36px, 4.2vw, 56px), calc((100vw - 40px) / 10.9)); }} @keyframes arra-rueda-rodillo { 0% { transform: translateY(100%); } 4%, 20% { transform: translateY(0); } 24%,100% { transform: translateY(-100%); } } /* El boton granate que cierra un bloque. Ver destilar.py, css_del_boton_solido(). */ .arra-cta-solido { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 12px; background: var(--arra-linea-fuerte, var(--wp--preset--color--burdeos-900)); color: var(--wp--preset--color--blanco); text-decoration: none; font-family: var(--font-body); font-size: 12.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; transition: background var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); } .arra-cta-solido:hover { background: var(--arra-linea, var(--wp--preset--color--burdeos-700)); } .arra-cta-solido .arra-cta-flecha { inline-size: 16px; block-size: 16px; } /* «Servicios» y «Sectores» abren el panel y no llevan a ningun sitio: son grupos del menu, no paginas. Ver destilar.py, marca_desplegables(). */ [data-arra-disparador] { cursor: default; } .arra-capacidades-cabecera { max-inline-size: 46ch; margin-block-end: 44px; } .arra-capacidades-h2 { margin: 10px 0 14px; } .arra-capacidades-entrada { margin: 0; color: var(--fg-soft); line-height: 1.7; } .arra-capacidades-lista { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--arra-line-soft); } .arra-capacidades-fila { display: grid; gap: 6px 22px; align-items: start; grid-template-columns: auto minmax(0, 15rem) minmax(0, 1fr); padding-block: 22px; border-block-end: 1px solid var(--arra-line-soft); transition: background var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); } .arra-capacidades-icono { display: block; inline-size: 31.2px; block-size: 31.2px; translate: 0 1px; color: var(--corp); transition: color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); } .arra-capacidades-icono svg { inline-size: 100%; block-size: 100%; display: block; } .arra-capacidades-icono path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1176ms var(--wp--custom--movimiento--salida); transition-delay: calc(500ms + (sibling-index() - 1) * 154ms); } .js-motion .arra-capacidades-fila:not(.in) .arra-capacidades-icono path { stroke-dashoffset: 1; } .arra-capacidades-titulo { margin: 0; font-size: 21px; line-height: 1.3; } .arra-capacidades-texto { margin: 0; color: var(--fg-soft); line-height: 1.7; font-size: 15.5px; max-inline-size: 62ch; } @media (hover: hover) { .arra-capacidades-fila:hover { background: var(--wp--preset--color--neutro-100); } .arra-capacidades-fila:hover .arra-capacidades-icono { color: var(--gold); }} @media (max-width: 859px) { .arra-capacidades-fila { grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; padding-block: 20px; } .arra-capacidades-icono { inline-size: 26.4px; block-size: 26.4px; } .arra-capacidades-texto { grid-column: 2; }} @media (prefers-reduced-motion: reduce) { .arra-capacidades-icono { transition: none; } .arra-capacidades-icono path { transition: none; stroke-dashoffset: 0; }} /* Situaciones: la lista numerada y la cabecera pegada. Ver destilar.py. */ .arra-situaciones { padding-block-end: var(--section-pad-y); } .arra-situaciones-caja { display: grid; gap: 40px; align-items: start; grid-template-columns: minmax(0, 1fr); } .arra-situaciones-cabecera { max-inline-size: 34ch; } .arra-situaciones-h2 { margin: 10px 0 14px; } .arra-situaciones-entrada { margin: 0; color: var(--fg-soft); line-height: 1.7; } @media (min-width: 900px) { .arra-situaciones-caja { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: 64px; } .arra-situaciones-cabecera { position: sticky; inset-block-start: 118px; }} .arra-situaciones-lista { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--arra-line); } .arra-situaciones-fila { border-block-end: 1px solid var(--arra-line); display: grid; gap: 4px 28px; align-items: baseline; grid-template-columns: minmax(0, 1fr); padding-block: 20px; position: relative; } .arra-situaciones-titulo { margin: 0; font-size: clamp(19px, 2.1vw, 25px); line-height: 1.25; letter-spacing: -0.01em; } .arra-situaciones-texto { margin: 4px 0 0; color: var(--fg-soft); line-height: 1.65; font-size: 15px; max-inline-size: 58ch; } @media (min-width: 1040px) { .arra-situaciones-fila { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); } .arra-situaciones-texto { margin: 0; }} .arra-situaciones-fila::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--wp--custom--movimiento--muy-lento) var(--wp--custom--movimiento--entrada-salida); } @media (hover: hover) { .arra-situaciones-fila:hover::after { transform: scaleX(1); } .arra-situaciones-fila:hover .arra-situaciones-titulo { color: var(--corp); }} @media (min-width: 860px) { .js-motion .arra-situaciones-fila.arra-reveal.in { animation: arra-situaciones-flota 900ms var(--wp--custom--movimiento--salida) both; animation-delay: var(--arra-delay, 0ms); }} @keyframes arra-situaciones-flota { from { opacity: 0; transform: translateY(26px); } 62% { opacity: 1; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .js-motion .arra-situaciones-fila.arra-reveal.in { animation: none; }} .arra-situaciones-titulo { transition: color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); } .arra-situaciones-cta { margin-block-start: 26px; } .arra-situaciones-enlace { display: contents; color: inherit; text-decoration: none; } .arra-situaciones-enlace .arra-cta-flecha { inline-size: 18px; block-size: 18px; color: var(--corp); margin-block-start: 8px; } @media (prefers-reduced-motion: reduce) { .arra-situaciones-fila::after { transition: none; }} /* Corporate Intelligence: tres bloques editoriales. Ver destilar.py. */ .arra-insights { padding-block-end: var(--section-pad-y); } .arra-insights-cabecera { max-inline-size: 48ch; margin-block-end: 40px; } .arra-insights-h2 { margin: 10px 0 14px; } .arra-insights-entrada { margin: 0; color: var(--fg-soft); line-height: 1.7; } .arra-insights-pie { margin-block-start: 26px; } .arra-insights-rejilla { display: grid; gap: 0 40px; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); } .arra-insights-ficha { padding-block: 24px 30px; border-block-start: 2px solid var(--wp--preset--color--dorado-700); } .arra-insights-titulo { margin: 0 0 8px; font-size: 22px; line-height: 1.3; } .arra-insights-texto { margin: 0; color: var(--fg-soft); line-height: 1.7; font-size: 15.5px; } .arra-insights-enlace { display: block; color: inherit; text-decoration: none; } .arra-cuadro-plano { position: relative; overflow: hidden; background: var(--arra-bg-subtle); border-radius: var(--r-xl); padding: 22px; display: grid; gap: 16px; } .arra-cuadro-caja { position: relative; block-size: 128px; padding-block-end: 8px; border-block-end: 1px solid var(--arra-line); border-inline-start: 1px solid var(--arra-line); background-image: linear-gradient(to top, var(--arra-line-soft) 1px, transparent 1px); background-size: 100% 33.34%; background-position: 0 -9px; --x: 45.4545%; --y: 48%; } .arra-cuadro-cruz-estado { font-weight: 600; font-size: 11.5px; } .arra-cuadro-cruz-mes { color: color-mix(in srgb, var(--wp--preset--color--blanco) 72%, transparent); } .arra-cuadro-caja.es-previsto .arra-cuadro-cruz-estado { color: var(--wp--preset--color--dorado-300); } .arra-cuadro-recorrido { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: crosshair; -webkit-appearance: none; appearance: none; touch-action: pan-y; } @media (min-width: 760px) { .arra-cuadro-plano { display: block; block-size: 560px; } .arra-cuadro-hoja--barras { inset-inline-start: 4%; inset-block-start: 26px; inline-size: 50%; --paso: 58px; }} @media (min-width: 1100px) { .arra-cuadro-plano { block-size: 520px; } .arra-cuadro-hoja--barras { inline-size: 44%; }} /* Las tres capas del CFO sobre su base: la piramide escalonada. Ver destilar.py, capas_sobre_la_base() y css_de_las_capas(). */ .arra-capas { display: grid; gap: 30px; margin-block-start: 34px; } @keyframes arra-capas-entra { from { opacity: 0; transform: translateZ(calc(var(--z) + 18cqw)); } } @keyframes arra-capas-turno { 0%, 4% { transform: translateZ(var(--z)); } 9%, 27% { transform: translateZ(calc(var(--z) + 3cqw)); } 33%, 100% { transform: translateZ(var(--z)); } } @keyframes arra-capas-luz { 0%, 4% { opacity: 0; } 9%, 27% { opacity: 1; } 33%, 100% { opacity: 0; } } @keyframes arra-capas-filete { 0%, 4% { transform: scaleX(0); transform-origin: 0 50%; } 9%, 27% { transform: scaleX(1); transform-origin: 0 50%; } 27.5% { transform: scaleX(1); transform-origin: 100% 50%; } 33%, 100% { transform: scaleX(0); transform-origin: 100% 50%; } } @media (min-width: 860px) { .arra-capas { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 56px; align-items: center; }} /* La cinta de controlling: cuatro tramos en flecha que se llenan de granate uno detras de otro. Ver destilar.py, cinta_de_controlling(). */ @property --arra-cinta-lleno { syntax: ""; inherits: false; initial-value: 0%; } .arra-cinta { list-style: none; margin: 30px 0 0; padding: 0; display: grid; row-gap: 22px; counter-reset: paso; } @property --arra-cinta-p { syntax: ""; inherits: true; initial-value: 0; } @keyframes arra-cinta-llena { from { --arra-cinta-lleno: 0%; } to { --arra-cinta-lleno: 100%; } } @keyframes arra-cinta-dice { from { opacity: .34; transform: translateY(4px); } to { opacity: 1; transform: none; } } @media (min-width: 760px) { .arra-cinta { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 2px; }} /* Cinco proveedores, un socio: el antes/despues de Corporate 360. Ver destilar.py, bloque_del_socio() y css_del_socio(). */ @property --arra-socio-t { syntax: ""; inherits: true; initial-value: 0; } @keyframes arra-socio-demo { 0%, 40% { --arra-socio-t: 0; } 47%, 87% { --arra-socio-t: 1; } 94%, 100% { --arra-socio-t: 0; } } /* El precio entre sociedades: la escala de las operaciones vinculadas de Grupos. Ver destilar.py, bloque_del_precio(). */ @property --arra-precio-t { syntax: ""; inherits: true; initial-value: 0; } @keyframes arra-precio-demo { 0%, 26% { --arra-precio-t: 0; } 33%, 59% { --arra-precio-t: 0.12; } 66%, 92% { --arra-precio-t: 1; } 100% { --arra-precio-t: 0; } } /* El cuadro de control consolidado de Grupos y Holding, portado del prototipo del cliente. Ver destilar.py, bloque_del_control(). */ .arra-control { --wine: var(--wp--preset--color--burdeos-900); --wine-ink: var(--wp--preset--color--burdeos-950); --gold: var(--wp--preset--color--dorado-700); --gold-soft: color-mix(in srgb, var(--gold) 13%, var(--wp--preset--color--blanco)); --paper: var(--wp--preset--color--blanco); --canvas: var(--wp--preset--color--neutro-100); --ink: var(--wp--preset--color--tinta-900); --muted: var(--wp--preset--color--tinta-500); --faint: var(--wp--preset--color--tinta-300); --line: color-mix(in srgb, var(--ink) 12%, transparent); --shadow: rgba(14, 26, 43, .08); max-inline-size: 1080px; margin-block-start: 30px; padding: clamp(18px, 3vw, 34px); border-radius: var(--r-xl); color: var(--ink); background: var(--canvas); font-family: var(--font-body); overflow: hidden; } .arra-control * { box-sizing: border-box; } .arra-control button { font: inherit; } .arra-control .agc-demo-tag { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--faint); background: color-mix(in srgb, var(--paper) 84%, transparent); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; } .arra-control .agc-play { appearance: none; display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 42px; padding: 8px 15px; border: 0; border-radius: 999px; color: var(--paper); background: var(--wine-ink); font-size: 11px; font-weight: 600; cursor: pointer; transition: transform 180ms ease, opacity 180ms ease; } .arra-control .agc-play:hover { transform: translateY(-1px); } .arra-control .agc-play:disabled { opacity: .58; cursor: wait; transform: none; } .arra-control .agc-play svg { width: 13px; height: 13px; fill: currentColor; } .arra-control button:focus-visible, .arra-control [tabindex="0"]:focus-visible { outline: 3px solid color-mix(in srgb, var(--gold) 54%, transparent); outline-offset: 3px; } .arra-control .agc-live { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-size: 10px; font-weight: 600; white-space: nowrap; } .arra-control .agc-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 13%, transparent); } .arra-control .agc-gridline, .arra-control .agc-axis { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; } @media (max-width: 760px) { .arra-control { border-radius: var(--r-lg); }} @media (prefers-reduced-motion: reduce) { .arra-control *, .arra-control *::before, .arra-control *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }} /* El SPV de Real Estate, contado en cuatro pasos: el prototipo del cliente del 22/09/2026. Ver destilar.py, bloque_del_spv(), y assets/js/spv.js. */ .arra-spv { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: clamp(30px, 5vw, 64px); margin-block-start: 8px; } @media (min-width: 1040px) { .arra-spv { grid-template-columns: minmax(0, 1.45fr) minmax(330px, .7fr); }} /* EL VISUAL VA EN FLUJO, NO EN ABSOLUTO. El prototipo colgaba la patrimonial, las ramas y los carriles de posiciones fijas dentro de una caja de 610 px, y en cuanto un carril crecia -en tablet el texto parte mas, y el de la incidencia lleva 78 px mas de pie- subia y se montaba sobre las ramas y la cabecera (cliente, 22/09/2026). En flujo cada pieza empuja a la siguiente y la caja mide lo que hace falta. */ .arra-spv-visual { position: relative; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 22px; border: 1px solid var(--wp--preset--color--neutro-400); border-radius: 20px; background: var(--wp--preset--color--neutro-100); isolation: isolate; } .arra-spv-visual::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--wp--preset--color--blanco) 72%, transparent), transparent 32%); pointer-events: none; } .arra-spv-repetir { appearance: none; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 11px; border: 1px solid var(--wp--preset--color--neutro-400); border-radius: 999px; color: var(--wp--preset--color--burdeos-900); background: color-mix(in srgb, var(--wp--preset--color--blanco) 78%, transparent); font: inherit; font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-base) ease; } .arra-spv-repetir:active { transform: scale(.98); } .arra-spv-repetir svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @keyframes arra-spv-rama { to { stroke-dashoffset: 0; } } .arra-spv-progreso { position: relative; z-index: 7; order: 3; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 10px 24px 0; } .arra-spv-progreso i { height: 3px; border-radius: 999px; background: var(--wp--preset--color--neutro-300); transition: background-color var(--dur-base) ease; } .arra-spv-progreso i.esta-hecho { background: var(--wp--preset--color--dorado-500); } .arra-spv-progreso i.esta-aqui { background: var(--wp--preset--color--burdeos-900); } @media (hover: hover) and (pointer: fine) { .arra-spv-repetir:hover { background: var(--wp--preset--color--blanco); }} /* DE PIE: primero el texto entero -rotulo, titulo, parrafo y los tres beneficios-, y debajo el visual con los carriles en una tira que se desliza. Es la version movil del segundo prototipo del cliente, con los beneficios tambien por encima como pidio (22/09/2026). Los tres carriles apilados se cortaban y el texto quedaba debajo del grafico. */ @media (max-width: 620px) { .arra-spv { display: flex; flex-direction: column; gap: 0; margin-block-start: 48px; } .arra-spv-texto { display: contents; } .arra-spv-texto .arra-kicker { order: -5; margin-bottom: 11px; } .arra-spv-titulo { order: -4; font-size: clamp(28px, 9vw, 36px); } .arra-spv-titulo span { margin-top: 7px; font-size: 15px; } .arra-spv-parrafo { order: -3; margin-top: 16px; font-size: 15px; line-height: 1.55; } .arra-spv-beneficios { order: -2; margin-top: 26px; } .arra-spv-beneficio { grid-template-columns: 38px 1fr; gap: 12px; padding: 16px 0; } .arra-spv-beneficio-icono { width: 38px; height: 38px; } .arra-spv-visual { order: -1; width: 100%; margin-top: 26px; padding-bottom: 6px; overflow: hidden; border-radius: 16px; } .arra-spv-cab { padding: 17px 16px 0; } .arra-spv-cab > span { font-size: 8px; } /* El texto del paso, ANTES del grafico (cliente, 22/09/2026). */ .arra-spv-relato { margin: 12px 16px 0; padding: 12px 13px; gap: 11px; font-size: 12px; } .arra-spv-relato [data-story] { min-height: 34px; } .arra-spv-progreso { margin: 8px 16px 0; } .arra-spv-madre { margin: 12px auto 0; width: min(220px, calc(100% - 64px)); padding: 11px 13px; border-radius: 14px; } .arra-spv-madre-icono { width: 36px; height: 36px; } .arra-spv-ramas { display: none; } .arra-spv-relacion-movil { position: relative; z-index: 5; margin: 0 auto; display: grid; justify-items: center; color: var(--wp--preset--color--tinta-300); } .arra-spv-relacion-movil::before { content: ''; width: 1px; height: 20px; background: var(--wp--preset--color--dorado-500); } .arra-spv-relacion-movil small { padding: 4px 9px; border: 1px solid var(--wp--preset--color--neutro-400); border-radius: 999px; background: var(--wp--preset--color--neutro-100); font-size: 7px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; } /* La tira: en flujo y sin recorte vertical, los tres carriles a la misma altura -la del mas alto- porque son items de un flex. Antes la tira media un alto fijo y el pie de las tarjetas no se veia. */ .arra-spv-carriles { margin: 12px 0 0; display: flex; align-items: stretch; gap: 12px; padding: 4px 18px 8px; overflow-x: auto; overflow-y: visible; scroll-padding-inline: 18px; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .arra-spv-carriles::-webkit-scrollbar { display: none; } .arra-spv-carril { flex: 0 0 calc(100% - 46px); min-height: 0; height: auto; padding: 20px 18px 18px; scroll-snap-align: center; scroll-snap-stop: always; opacity: .78; transform: none; } .arra-spv-carril.is-related, .arra-spv-carril.is-active { opacity: 1; transform: none; } .arra-spv-carril[data-lane="2"] { padding-bottom: 84px; } .arra-spv-carril-cab { padding-bottom: 13px; } .arra-spv-sigla { margin-top: 14px; } .arra-spv-filas { grid-template-columns: 1fr; gap: 0; margin-top: 13px; } .arra-spv-fila { min-height: 34px; } .arra-spv-lectura { margin-top: 13px; font-size: 9px; line-height: 1.5; } .arra-spv-incidencia { inset: auto 12px 12px; min-height: 58px; } .arra-spv-contencion::after { top: 12px; right: 12px; } .arra-spv-nav { position: relative; z-index: 8; margin: 12px 16px 8px; display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 10px; } .arra-spv-flecha { appearance: none; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--wp--preset--color--neutro-400); border-radius: 50%; color: var(--wp--preset--color--burdeos-900); background: var(--wp--preset--color--blanco); font: inherit; cursor: pointer; transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); } .arra-spv-flecha:active { transform: scale(.94); } .arra-spv-flecha:disabled { opacity: .28; } .arra-spv-flecha svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .arra-spv-posicion { display: grid; justify-items: center; gap: 7px; } .arra-spv-posicion small { color: var(--wp--preset--color--tinta-500); font-size: 8px; font-weight: 600; letter-spacing: .08em; } .arra-spv-puntos { display: flex; align-items: center; gap: 6px; } .arra-spv-punto { appearance: none; width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: var(--wp--preset--color--neutro-400); cursor: pointer; transition: width var(--dur-base) var(--ease-out), border-radius var(--dur-base) ease, background-color var(--dur-base) ease; } .arra-spv-punto[aria-current="true"] { width: 22px; border-radius: 999px; background: var(--wp--preset--color--burdeos-900); } /* El punto se ve de 7 px, pero se pulsa en 24: WCAG 2.5.8 pide 24 × 24 de zona segura y los tres puntos estaban a 6 px unos de otros (auditoría axe, 26/09/2026). Se separan y el área de toque la pone un borde transparente recortado del fondo, que no cambia lo que se ve. */ .arra-spv-puntos { gap: 20px; } .arra-spv-punto { box-sizing: content-box; border: 8.5px solid transparent; background-clip: padding-box; margin: -8.5px; } .arra-spv-desliza { color: var(--wp--preset--color--tinta-300); font-size: 7px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } } @media (prefers-reduced-motion: reduce) { .arra-spv-madre, .arra-spv-rama, .arra-spv-carril, .arra-spv-estado, .arra-spv-incidencia, .arra-spv-contencion, .arra-spv-repetir { transition: none; }} /* En que fase estas: la linea de fases de Startups. Ver destilar.py, bloque_de_la_fase(). */ @property --arra-fase-t { syntax: ""; inherits: true; initial-value: 0; } @keyframes arra-fase-demo { 0%, 20% { --arra-fase-t: 0; } 25%, 45% { --arra-fase-t: 0.3333; } 50%, 70% { --arra-fase-t: 0.6667; } 75%, 95% { --arra-fase-t: 1; } 100% { --arra-fase-t: 0; } } @keyframes arra-camino-luz { 0% { background-position: 200% 0; } 60%, 100% { background-position: -100% 0; } } @keyframes arra-camino-luz-v { 0% { background-position: 0 200%; } 60%, 100% { background-position: 0 -100%; } } @keyframes arra-ciclo-late { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--burdeos-700) 45%, transparent); } 60% { box-shadow: 0 0 0 14px transparent; } } /* El sistema 360: la rueda de cuatro capacidades, portada del prototipo del cliente. Ver destilar.py, bloque_de_la_orbita(). */ .arra-orbita360 { --wine: var(--wp--preset--color--burdeos-900); --wine-deep: var(--wp--preset--color--burdeos-950); --wine-soft: color-mix(in srgb, var(--wp--preset--color--burdeos-900) 8%, var(--wp--preset--color--blanco)); --gold: var(--wp--preset--color--dorado-700); --gold-soft: color-mix(in srgb, var(--gold) 12%, var(--wp--preset--color--blanco)); --paper: var(--wp--preset--color--blanco); --surface: var(--wp--preset--color--neutro-100); --ink: var(--wp--preset--color--tinta-900); --muted: var(--wp--preset--color--tinta-500); --faint: var(--wp--preset--color--tinta-300); --line: color-mix(in srgb, var(--ink) 13%, transparent); --shadow: rgba(61, 15, 31, .10); --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); } .arra-orbita360 button, .arra-orbita360 a { font: inherit; } .arra-orbita360 .a360-play { appearance: none; display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 42px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--wine-deep); background: var(--surface); font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .02em; cursor: pointer; transition: transform 180ms var(--ease-out), background-color 180ms ease, opacity 180ms ease; } .arra-orbita360 .a360-play:hover { background: var(--wine-soft); } .arra-orbita360 .a360-play:disabled { opacity: .58; cursor: wait; transform: none; } .arra-orbita360 .a360-play svg { width: 13px; height: 13px; fill: currentColor; } @keyframes a360-draw { to { stroke-dashoffset: 0; } } @keyframes a360-hint-swipe { from { transform: translateX(-10px); } to { transform: translateX(10px); } } @keyframes a360-enter { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } } @media (hover: hover) and (pointer: fine) { .arra-orbita360 .a360-play:hover { transform: translateY(-1px); }} /* Antes y despues de una estructura societaria: el relato en ocho pasos del prototipo del cliente. Ver destilar.py, bloque_de_la_arquitectura(), y assets/js/arquitectura.js. */ /* Salvo cuando va delante de una banda: entonces reparte su aire como las demás (cliente, 26/09/2026: «mucho espaciado en Holdings»; medido, 244 px de tinta a tinta contra los ~160 del resto). */ .arra-arquitectura:not(.arra-aire-repartido) { padding-block-end: var(--section-pad-y); } /* `touch-action: pan-y`: el dedo puede seguir desplazando la pagina en vertical, pero un gesto horizontal sobre la ficha o los mapas llega al script, que pasa de paso (cliente, 22/09/2026). */ .arra-arquitectura-comparacion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 52px); touch-action: pan-y; } @keyframes arra-arq-traza { to { stroke-dashoffset: 0; } } .arra-arquitectura-progreso { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin: 0 0 clamp(26px, 4vw, 40px); } .arra-arquitectura-progreso button { appearance: none; height: 3px; padding: 0; border: 0; border-radius: 999px; background: var(--wp--preset--color--neutro-300); cursor: pointer; transition: background-color var(--dur-base) ease, transform var(--dur-fast) var(--ease-out); } .arra-arquitectura-progreso button[aria-current="step"] { background: var(--wp--preset--color--burdeos-900); } .arra-arquitectura-progreso button.is-past { background: var(--wp--preset--color--dorado-500); } .arra-arquitectura-progreso button:active { transform: scaleY(2); } @keyframes arra-arq-asoma { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(-50%) translateX(5px); } } @keyframes arra-arq-asoma-atras { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(-50%) translateX(-5px); } } @media (max-width: 1100px) { /* UN SOLO MAPA (cliente, 22/09/2026): de pie no caben en una pantalla la ficha del paso y los dos mapas, y el segundo se leia sin saber a que paso pertenecia. Los dos casos ocupan la MISMA celda y solo se ve el del paso: el desorden en los pasos 1 a 4 y, pasado el cuarto, el mapa ordenado entra deslizandose desde la derecha para los pasos 5 a 8 -y al revés al volver-. El que no toca sigue en el marcado, invisible y fuera del dedo y del tabulador (`visibility`), que se retrasa lo que dura el fundido para que no desaparezca de golpe. */ .arra-arquitectura-comparacion { position: relative; grid-template-columns: minmax(0, 1fr); gap: 0; }} @media (prefers-reduced-motion: reduce) { .arra-arquitectura-caso, .arra-arquitectura-entidad, .arra-arquitectura-relacion, .arra-arquitectura-progreso button { transition: none; }} /* El ciclo de la inversion de /corporate/real-estate/: cuatro fases sobre una linea y la financiacion cruzandolas. Ver destilar.py, ciclo_de_la_inversion(). */ .arra-cicloinv-via > * { position: relative; padding-block-start: 30px; } .arra-cicloinv-via > *::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 13px; block-size: 13px; border-radius: 50%; background: var(--wp--preset--color--burdeos-900); z-index: 1; } .arra-cicloinv-via > *:last-child::before { background: var(--wp--preset--color--dorado-700); } .arra-cicloinv-via > *:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 6px; inset-inline-start: 6px; block-size: 1px; inline-size: calc(100% + var(--arra-cicloinv-hueco, 24px)); background: var(--arra-line); } .arra-cicloinv-banda { margin-block-start: 26px; padding: 14px 18px; border-radius: var(--wp--custom--radio--sm); background: var(--wp--preset--color--neutro-200); border-inline-start: 3px solid var(--wp--preset--color--dorado-700); display: grid; gap: 2px; } .arra-cicloinv-banda-rotulo { font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--corp); } .arra-cicloinv-banda-texto { font-size: 15px; line-height: 1.6; color: var(--fg-soft); } @media (min-width: 900px) { .arra-cicloinv-via { --arra-cicloinv-hueco: 24px; } .arra-cicloinv-banda { grid-template-columns: auto 1fr; gap: 4px 20px; align-items: baseline; }} @media (max-width: 899px) { .arra-cicloinv-via > *:not(:last-child)::after { content: none; }} .arra-cicloinv-via > *::before { transform-origin: center; transition: transform 280ms var(--wp--custom--movimiento--salida); } .arra-cicloinv-via > *:not(:last-child)::after { transform-origin: left; transition: transform 320ms var(--wp--custom--movimiento--entrada-salida); } .arra-cicloinv-banda { transition: opacity 420ms var(--wp--custom--movimiento--salida) 760ms, transform 420ms var(--wp--custom--movimiento--salida) 760ms; } .js-motion .arra-cicloinv-via:not(.in) > *::before { transform: scale(0); } .js-motion .arra-cicloinv-via:not(.in) > *:not(:last-child)::after { transform: scaleX(0); } .js-motion .arra-cicloinv-via:not(.in) + .arra-cicloinv-banda { opacity: 0; transform: translateY(8px); } @media (prefers-reduced-motion: reduce) { .arra-cicloinv-via > *::before, .arra-cicloinv-via > *:not(:last-child)::after, .arra-cicloinv-banda { transition: none; } .js-motion .arra-cicloinv-via:not(.in) > *::before, .js-motion .arra-cicloinv-via:not(.in) > *:not(:last-child)::after { transform: none; } .js-motion .arra-cicloinv-via:not(.in) + .arra-cicloinv-banda { opacity: 1; transform: none; }} .arra-cicloinv-via > *:nth-child(1)::before { transition-delay: 0ms; } .arra-cicloinv-via > *:nth-child(2)::before { transition-delay: 180ms; } .arra-cicloinv-via > *:nth-child(3)::before { transition-delay: 360ms; } .arra-cicloinv-via > *:nth-child(4)::before { transition-delay: 540ms; } .arra-cicloinv-via > *:nth-child(1)::after { transition-delay: 90ms; } .arra-cicloinv-via > *:nth-child(2)::after { transition-delay: 270ms; } .arra-cicloinv-via > *:nth-child(3)::after { transition-delay: 450ms; } @keyframes arra-vesting-sube { 0.00% { inset-inline-start: 0.00%; inset-block-start: 96.67%; } 22.00% { inset-inline-start: 25.00%; inset-block-start: 96.67%; } 22.01% { inset-inline-start: 25.00%; inset-block-start: 73.67%; } 27.50% { inset-inline-start: 31.25%; inset-block-start: 73.67%; } 27.51% { inset-inline-start: 31.25%; inset-block-start: 67.92%; } 33.00% { inset-inline-start: 37.50%; inset-block-start: 67.92%; } 33.01% { inset-inline-start: 37.50%; inset-block-start: 62.17%; } 38.50% { inset-inline-start: 43.75%; inset-block-start: 62.17%; } 38.51% { inset-inline-start: 43.75%; inset-block-start: 56.42%; } 44.00% { inset-inline-start: 50.00%; inset-block-start: 56.42%; } 44.01% { inset-inline-start: 50.00%; inset-block-start: 50.67%; } 49.50% { inset-inline-start: 56.25%; inset-block-start: 50.67%; } 49.51% { inset-inline-start: 56.25%; inset-block-start: 44.92%; } 55.00% { inset-inline-start: 62.50%; inset-block-start: 44.92%; } 55.01% { inset-inline-start: 62.50%; inset-block-start: 39.17%; } 60.50% { inset-inline-start: 68.75%; inset-block-start: 39.17%; } 60.51% { inset-inline-start: 68.75%; inset-block-start: 33.42%; } 66.00% { inset-inline-start: 75.00%; inset-block-start: 33.42%; } 66.01% { inset-inline-start: 75.00%; inset-block-start: 27.67%; } 71.50% { inset-inline-start: 81.25%; inset-block-start: 27.67%; } 71.51% { inset-inline-start: 81.25%; inset-block-start: 21.92%; } 77.00% { inset-inline-start: 87.50%; inset-block-start: 21.92%; } 77.01% { inset-inline-start: 87.50%; inset-block-start: 16.17%; } 82.50% { inset-inline-start: 93.75%; inset-block-start: 16.17%; } 82.51% { inset-inline-start: 93.75%; inset-block-start: 10.42%; } 88.00% { inset-inline-start: 100.00%; inset-block-start: 10.42%; } 88.01% { inset-inline-start: 100.00%; inset-block-start: 4.67%; } 100.00% { inset-inline-start: 100.00%; inset-block-start: 4.67%; } } @keyframes arra-vesting-fase-1 { 0.00%, 21.99% { border-color: var(--wp--preset--color--dorado-700); } 22.00%, 100% { border-color: var(--arra-line-soft); } } @keyframes arra-vesting-zona-1 { 0.00%, 21.99% { opacity: 1; } 22.00%, 100% { opacity: 0; } } @keyframes arra-vesting-fase-2 { 0%, 21.99% { border-color: var(--arra-line-soft); } 22.00%, 27.49% { border-color: var(--wp--preset--color--dorado-700); } 27.50%, 100% { border-color: var(--arra-line-soft); } } @keyframes arra-vesting-zona-2 { 0%, 21.99% { opacity: 0; } 22.00%, 27.49% { opacity: 1; } 27.50%, 100% { opacity: 0; } } @keyframes arra-vesting-fase-3 { 0%, 27.49% { border-color: var(--arra-line-soft); } 27.50%, 87.99% { border-color: var(--wp--preset--color--dorado-700); } 88.00%, 100% { border-color: var(--arra-line-soft); } } @keyframes arra-vesting-zona-3 { 0%, 27.49% { opacity: 0; } 27.50%, 87.99% { opacity: 1; } 88.00%, 100% { opacity: 0; } } @keyframes arra-vesting-fase-4 { 0%, 87.99% { border-color: var(--arra-line-soft); } 88.00%, 100.00% { border-color: var(--wp--preset--color--dorado-700); } } @keyframes arra-vesting-zona-4 { 0%, 87.99% { opacity: 0; } 88.00%, 100.00% { opacity: 1; } } .arra-vesting-pie { margin: 22px 0 0; max-inline-size: 64ch; font-size: 15px; line-height: 1.7; color: var(--fg-soft); } /* El color de la linea, en el body. Ver destilar.py, css_de_la_linea(), y arra_clase_de_linea() en functions.php. */ body { --arra-linea: var(--wp--preset--color--burdeos-700); --arra-linea-fuerte: var(--wp--preset--color--burdeos-900); --arra-linea-honda: var(--wp--preset--color--burdeos-950); --arra-linea-suave: var(--wp--preset--color--burdeos-500); } body.arra-linea-core { --arra-linea: var(--wp--preset--color--verde-700); --arra-linea-fuerte: var(--wp--preset--color--verde-900); --arra-linea-honda: var(--wp--preset--color--verde-900); --arra-linea-suave: var(--wp--preset--color--verde-500); } body.arra-linea-generica .arra-cta-solido { background: var(--wp--preset--color--dorado-500); color: var(--wp--preset--color--carbon-950); } body.arra-linea-generica .arra-cta-solido:hover { background: var(--wp--preset--color--carbon-950); color: var(--wp--preset--color--blanco); } .arra-blog-mas { margin: 36px 0 0; display: flex; justify-content: center; } /* «Esto es lo que estas senalando», a tres bandas: negro en lo institucional, granate en Corporate, verde en Core. */ body { --arra-senala: var(--wp--preset--color--tinta-900); } body.arra-linea-core, body.arra-linea-corporate { --arra-senala: var(--arra-linea); } /* Lo que se enciende al pasar el raton, opcion a opcion. Ver destilar.py, css_de_lo_que_se_senala(). */ .arra-nuestros-servicios-2 .arra-nuestros-servicios-3, .arra-ticks__punto .arra-ticks__marca { transition: background-color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); } @media (hover: hover) and (pointer: fine) { .arra-nuestros-servicios-2:hover .arra-nuestros-servicios-3, .arra-ticks__punto:hover .arra-ticks__marca { background-color: var(--arra-senala); }} @keyframes arra-fiscal-late { from { transform: scale(1); opacity: 0.45; } to { transform: scale(3.4); opacity: 0; } } @keyframes arra-fiscal-recorre { from { transform: translateX(4.1667%); } to { transform: translateX(95.8333%); } } @keyframes arra-fiscal-carta { 0%, 1% { opacity: 0; } 3%, 22% { opacity: 1; } 24%, 100% { opacity: 0; } } .arra-fiscal__pie { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--wp--preset--color--tinta-300); } /* El stock decide el recorrido fiscal: los dos dibujos de /corporate/ecommerce-internacional/. Ver destilar.py, bloque_del_oss(). */ .arra-oss { margin-block-start: 28px; display: grid; gap: 26px; } @media (min-width: 900px) { .arra-oss { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }} .arra-oss-vuelo { stroke: var(--wp--preset--color--neutro-100); stroke-width: 2px; transform-box: view-box; transform-origin: 0 0; } .arra-oss-vuelo--venta { fill: var(--wp--preset--color--burdeos-900); } .arra-oss-vuelo--iva { fill: var(--wp--preset--color--dorado-700); } @keyframes arra-oss-late { 0%, 14%, 100% { transform: translateY(0); } 6%, 10% { transform: translateY(-3px); } } @keyframes arra-oss-pulso { 0%, 12%, 100% { transform: scale(1); } 5%, 8% { transform: scale(1.06); } } @keyframes arra-oss-cae { from { transform: translate(-50%, 0); } to { transform: translate(-50%, 31px); } } /* El ano del metodo: doce cierres y cuatro reuniones. Ver destilar.py, bloque_del_anio(). */ .arra-anio { margin-block-start: 40px; } .arra-anio-titulo { margin: 0 0 22px; font-size: 18px; font-family: var(--font-display); font-weight: 500; color: var(--fg); } .arra-anio-meses { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; border-block-end: 1px solid var(--arra-line); } .arra-anio-mes { display: grid; justify-items: center; gap: 6px; padding-block-end: 10px; } .arra-anio-marca { inline-size: 2px; block-size: 16px; background: var(--wp--preset--color--neutro-400); transform-origin: bottom; } .arra-anio-mes--reunion .arra-anio-marca { block-size: 42px; background: var(--wp--preset--color--dorado-700); } .arra-anio-inicial { font-size: 11px; letter-spacing: 0.08em; color: var(--wp--preset--color--tinta-500); } .arra-anio-mes--reunion .arra-anio-inicial { color: var(--corp); } .arra-anio-etiqueta { display: none; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--corp); } @media (min-width: 760px) { .arra-anio-etiqueta { display: block; }} .arra-anio-pie { margin: 0; max-inline-size: 64ch; font-size: 15px; line-height: 1.7; color: var(--fg-soft); } .arra-anio-marca { transition: transform 420ms var(--wp--custom--movimiento--salida); } .arra-anio-mes:nth-child(1) .arra-anio-marca { transition-delay: 0ms; } .arra-anio-mes:nth-child(2) .arra-anio-marca { transition-delay: 55ms; } .arra-anio-mes:nth-child(3) .arra-anio-marca { transition-delay: 110ms; } .arra-anio-mes:nth-child(4) .arra-anio-marca { transition-delay: 165ms; } .arra-anio-mes:nth-child(5) .arra-anio-marca { transition-delay: 220ms; } .arra-anio-mes:nth-child(6) .arra-anio-marca { transition-delay: 275ms; } .arra-anio-mes:nth-child(7) .arra-anio-marca { transition-delay: 330ms; } .arra-anio-mes:nth-child(8) .arra-anio-marca { transition-delay: 385ms; } .arra-anio-mes:nth-child(9) .arra-anio-marca { transition-delay: 440ms; } .arra-anio-mes:nth-child(10) .arra-anio-marca { transition-delay: 495ms; } .arra-anio-mes:nth-child(11) .arra-anio-marca { transition-delay: 550ms; } .arra-anio-mes:nth-child(12) .arra-anio-marca { transition-delay: 605ms; } .js-motion .arra-anio:not(.in) .arra-anio-marca { transform: scaleY(0); } @media (prefers-reduced-motion: reduce) { .arra-anio-marca { transition: none; } .js-motion .arra-anio:not(.in) .arra-anio-marca { transform: none; }} /* Las vias de contacto de /corporate/contacto/, en vez del formulario que no enviaba nada. Ver destilar.py, contacto_sin_formulario_falso(). */ .arra-contacto-vias { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 0; } .arra-contacto-via { border-block-start: 1px solid var(--arra-line); } .arra-contacto-via:last-child { border-block-end: 1px solid var(--arra-line); } .arra-contacto-via-enlace { display: grid; gap: 2px 20px; grid-template-columns: 1fr auto; align-items: baseline; padding: 18px 2px 4px; color: inherit; text-decoration: none; } .arra-contacto-via-rotulo { font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--corp); } .arra-contacto-via-dato { grid-column: 1; font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 1.25; color: var(--fg); } .arra-contacto-via-enlace > svg { grid-column: 2; grid-row: 1 / -1; align-self: center; color: var(--corp); inline-size: 20px; block-size: 20px; } .arra-contacto-via-nota { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--fg-soft); max-inline-size: 56ch; } @media (hover: hover) { .arra-contacto-via-enlace:hover .arra-contacto-via-dato { color: var(--corp); }} .arra-contacto-nota { margin: 24px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--fg-soft); } .arra-contacto-seccion .arra-podemos-ayudarte-1 { grid-template-columns: minmax(0, 1fr); } .arra-contacto-seccion p:has(+ .arra-contacto-typeform) { max-inline-size: none; } .arra-contacto-typeform { position: relative; inline-size: 100%; block-size: 900px; scroll-margin-block-start: 96px; margin-block: 22px 34px; border-radius: var(--r-lg); overflow: hidden; } .arra-contacto-typeform > div { block-size: 100% !important; } .arra-contacto-typeform iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; } .arra-contacto-seccion :has(> .arra-contacto-typeform) { background: transparent; border: 0; padding-inline: 0; } .arra-contacto-seccion .arra-podemos-ayudarte-15 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 16px; } .arra-contacto-seccion { padding-block-end: var(--section-pad-y); } /* La plantilla de casos de exito. NO ESTA PUBLICADA: ver destilar.py, bloque_de_los_casos(), y CORPORATE-STANDBY.md. */ .arra-casos { padding-block-end: var(--section-pad-y); } .arra-casos-cabecera { max-inline-size: 50ch; margin-block-end: 28px; } .arra-casos-h2 { margin: 10px 0 14px; } .arra-casos-entrada { margin: 0; color: var(--fg-soft); line-height: 1.7; } .arra-casos-indice-lista { list-style: none; margin: 0 0 40px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .arra-casos-indice-enlace { display: inline-block; padding: 8px 14px; border-radius: 100px; border: 1px solid var(--arra-line); font-size: 13.5px; color: var(--fg); text-decoration: none; transition: border-color 200ms var(--wp--custom--movimiento--salida); } @media (hover: hover) { .arra-casos-indice-enlace:hover { border-color: var(--wp--preset--color--dorado-700); }} .arra-casos-lista { display: grid; gap: 0; } .arra-casos-caso { padding-block: 30px; border-block-start: 1px solid var(--arra-line); scroll-margin-block-start: 110px; } .arra-casos-caso:last-child { border-block-end: 1px solid var(--arra-line); } .arra-casos-caso-titulo { margin: 0 0 22px; font-size: 22px; line-height: 1.25; font-family: var(--font-display); font-weight: 500; color: var(--fg); } .arra-casos-pasos { margin: 0; display: grid; gap: 20px; } .arra-casos-paso-rotulo { margin: 0 0 5px; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--corp); } .arra-casos-paso-texto { margin: 0; font-size: 16px; line-height: 1.65; color: var(--fg); } .arra-casos-paso:last-child { padding-inline-start: 16px; border-inline-start: 3px solid var(--wp--preset--color--dorado-700); } @media (min-width: 860px) { .arra-casos-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }} .arra-reporting-planificacion-2 { background: transparent; border: 0; border-radius: 0; padding: 4px 0 6px; transform: none; } @media (min-width: 760px) { .arra-reporting-planificacion-2 { padding-inline: 30px 26px; border-inline-start: 1px solid var(--arra-line-soft); } .arra-reporting-planificacion-2:first-child { padding-inline-start: 0; border-inline-start: 0; }} @media (max-width: 759px) { .arra-reporting-planificacion-2 { padding-block: 18px; border-block-start: 1px solid var(--arra-line-soft); } .arra-reporting-planificacion-2:first-child { padding-block-start: 0; border-block-start: 0; }} .arra-todo-lo-gestionamos-1 { background: transparent; border: 0; border-radius: 0; padding: 4px 0 6px; transform: none; } @media (min-width: 760px) { .arra-todo-lo-gestionamos-1 { padding-inline: 30px 26px; border-inline-start: 1px solid var(--arra-line-soft); } .arra-todo-lo-gestionamos-1:first-child { padding-inline-start: 0; border-inline-start: 0; }} @media (max-width: 759px) { .arra-todo-lo-gestionamos-1 { padding-block: 18px; border-block-start: 1px solid var(--arra-line-soft); } .arra-todo-lo-gestionamos-1:first-child { padding-block-start: 0; border-block-start: 0; }} .arra-problema-1, .arra-reporting-planificacion-1, .arra-asesoria-contable-1, .arra-podemos-ayudarte-15 { gap: 4px 0; } .arra-problema-1:has(> .arra-automatizacion-1), .arra-reporting-planificacion-1:has(> .arra-automatizacion-1), .arra-asesoria-contable-1:has(> .arra-automatizacion-1), .arra-podemos-ayudarte-15:has(> .arra-automatizacion-1) { gap: 18px; } @media (min-width: 760px) { .arra-podemos-ayudarte-15 > .arra-reporting-planificacion-2 { padding-inline: 0; border-inline-start: 0; padding-block: 18px; border-block-start: 1px solid var(--arra-line-soft); } .arra-podemos-ayudarte-15 > .arra-reporting-planificacion-2:first-child { padding-block-start: 0; border-block-start: 0; }} @media (min-width: 760px) { .arra-podemos-ayudarte-15 > .arra-todo-lo-gestionamos-1 { padding-inline: 0; border-inline-start: 0; padding-block: 18px; border-block-start: 1px solid var(--arra-line-soft); } .arra-podemos-ayudarte-15 > .arra-todo-lo-gestionamos-1:first-child { padding-block-start: 0; border-block-start: 0; }} .arra-reporting-planificacion-2.arra-router-h2 > :first-child { transition: color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); } @media (hover: hover) { .arra-reporting-planificacion-2.arra-router-h2 { transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .arra-reporting-planificacion-2.arra-router-h2:hover { box-shadow: none; border-color: var(--wp--preset--color--dorado-700); } .arra-reporting-planificacion-2.arra-router-h2:hover + .arra-reporting-planificacion-2 { border-color: var(--wp--preset--color--dorado-700); } .arra-reporting-planificacion-2.arra-router-h2:hover > :first-child { color: var(--arra-linea); }} .arra-todo-lo-gestionamos-1.arra-router-h2 > :first-child { transition: color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); } @media (hover: hover) { .arra-todo-lo-gestionamos-1.arra-router-h2 { transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .arra-todo-lo-gestionamos-1.arra-router-h2:hover { box-shadow: none; border-color: var(--wp--preset--color--dorado-700); } .arra-todo-lo-gestionamos-1.arra-router-h2:hover + .arra-todo-lo-gestionamos-1 { border-color: var(--wp--preset--color--dorado-700); } .arra-todo-lo-gestionamos-1.arra-router-h2:hover > :first-child { color: var(--arra-linea); }} @media (hover: hover) { .arra-router-h2:not(.arra-mesa__lista > *):hover::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 100%; block-size: 8px; }} /* m15 · El calendario fiscal de /corporate/asesoramiento-integral/. Ver destilar.py, bloque_del_calendario(). */ .arra-calfiscal { margin-block-start: 38px; } .arra-calfiscal-banda { padding: 24px 24px 26px; border-radius: var(--r-lg); background: var(--wp--preset--color--burdeos-950); color: var(--wp--preset--color--blanco); } .arra-calfiscal-cabeza { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin-block-end: 26px; } .arra-calfiscal-rotulo { font-family: var(--font-display); font-weight: 500; font-size: 17px; color: var(--wp--preset--color--dorado-300); } .arra-calfiscal-aviso { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--neutro-300); } .arra-calfiscal-rail { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 14px; padding-block-start: 22px; } .arra-calfiscal-rail::before, .arra-calfiscal-rail::after { content: ""; position: absolute; inset-block-start: 6px; inset-inline: 0; block-size: 3px; border-radius: 2px; } .arra-calfiscal-rail::before { background: color-mix(in srgb, var(--wp--preset--color--blanco) 18%, transparent); } .arra-calfiscal-rail::after { background: var(--wp--preset--color--dorado-500); transform-origin: left; } .arra-calfiscal-hito { position: relative; display: grid; gap: 2px; } .arra-calfiscal-marca { position: absolute; inline-size: 13px; block-size: 13px; border-radius: 50%; inset-block-start: -22px; inset-inline-start: 0; background: var(--wp--preset--color--burdeos-950); border: 3px solid var(--wp--preset--color--dorado-500); } .arra-calfiscal-q { font-family: var(--font-display); font-weight: 500; font-size: 14px; color: var(--wp--preset--color--dorado-300); } .arra-calfiscal-que { font-size: 13.5px; line-height: 1.5; color: var(--wp--preset--color--neutro-200); } @media (min-width: 760px) { .arra-calfiscal-rail { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 18px; }} .arra-calfiscal-anuales { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 0; } .arra-calfiscal-anual { padding: 16px 0 18px; border-block-start: 1px solid var(--arra-line-soft); } .arra-calfiscal-anual:last-child { border-block-end: 1px solid var(--arra-line-soft); } .arra-calfiscal-anual-titulo { margin: 0 0 4px; font-size: 16px; letter-spacing: 0.06em; font-family: var(--font-display); font-weight: 500; color: var(--fg); } .arra-calfiscal-anual-texto { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--fg-soft); } @media (min-width: 760px) { .arra-calfiscal-anual { display: grid; gap: 4px 30px; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); } .arra-calfiscal-anual-titulo { margin: 0; }} .arra-calfiscal-pie { margin: 24px 0 0; max-inline-size: 64ch; font-size: 15px; line-height: 1.7; color: var(--fg-soft); } .arra-calfiscal-rail::after { transition: transform 1400ms var(--wp--custom--movimiento--entrada-salida); } .js-motion .arra-calfiscal:not(.in) .arra-calfiscal-rail::after { transform: scaleX(0); } @media (prefers-reduced-motion: reduce) { .arra-calfiscal-rail::after { transition: none; } .js-motion .arra-calfiscal:not(.in) .arra-calfiscal-rail::after { transform: none; }} /* Los claims de §11 del contenido, en banda burdeos y una cada vez (m7). Ver destilar.py, bloque_de_los_claims(), y el relevo en assets/js/claims.js. */ .arra-claims { background: var(--wp--preset--color--burdeos-950); --arra-fondo-seccion: var(--wp--preset--color--burdeos-950); box-shadow: 0 0 0 100vmax var(--wp--preset--color--burdeos-950); clip-path: inset(0 -100vmax); padding-block: clamp(46px, 5.4vw, 72px); } .arra-claims[data-arra-claims] { touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; } @keyframes arra-claims-entra { from { opacity: 0; transform: translateX(46px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes arra-claims-sale { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-46px) scale(.985); } } @keyframes arra-claims-entra-atras { from { opacity: 0; transform: translateX(-46px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes arra-claims-sale-atras { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(46px) scale(.985); } } /* Los beneficios de §9 del contenido: numeral, titulo y linea. Ver destilar.py, bloque_de_los_beneficios(). */ .arra-beneficios__cabecera { max-inline-size: 54ch; margin-block-end: 34px; } .arra-beneficios__lista { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .arra-beneficios__item { position: relative; display: grid; gap: 2px 22px; padding: 20px 18px; margin-inline: -18px; border-radius: 14px; grid-template-columns: minmax(0, 1fr); } .arra-beneficios__item::before { content: ""; position: absolute; inset-inline: 18px; inset-block-start: 0; block-size: 1px; background: var(--arra-line-soft); transition: opacity 260ms var(--wp--custom--movimiento--salida); } .arra-beneficios__item:first-child::before { display: none; } @media (min-width: 760px) { .arra-beneficios__item { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 2px 26px; } .arra-beneficios__n { grid-row: 1 / span 2; }} .arra-beneficios__n { font-family: var(--font-display); font-weight: 500; font-size: 29px; line-height: 1; letter-spacing: -0.02em; color: var(--wp--preset--color--dorado-700); font-variant-numeric: tabular-nums; transition: color 260ms var(--wp--custom--movimiento--salida); } .arra-beneficios__t { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 19px; line-height: 1.25; color: var(--wp--preset--color--carbon-950); } .arra-beneficios__d { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--fg-soft); max-inline-size: 62ch; } @media (hover: hover) { .arra-beneficios__item:hover { background-color: var(--wp--preset--color--neutro-100); } .arra-fondo-suave .arra-beneficios__item:hover { background-color: var(--wp--preset--color--neutro-200); } .arra-beneficios__item:hover .arra-beneficios__n { color: var(--wp--preset--color--burdeos-700); } .arra-beneficios__item:hover::before, .arra-beneficios__item:hover + .arra-beneficios__item::before { opacity: 0; }} .arra-beneficios__item { transition: opacity 520ms var(--wp--custom--movimiento--salida), transform 520ms var(--wp--custom--movimiento--salida), background-color 200ms var(--wp--custom--movimiento--salida); transition-delay: var(--turno, 0ms), var(--turno, 0ms), 0ms; } .js-motion .arra-beneficios__lista:not(.in) .arra-beneficios__item { opacity: 0; transform: translateY(14px); } @media (max-width: 719px) { .arra-beneficios:has(> .arra-beneficios__lista.esta-apilada) > .arra-beneficios__cabecera { position: sticky; inset-block-start: var(--apila-barra, 104px); z-index: 3; background: var(--arra-fondo-seccion); max-inline-size: none; margin-block-end: 0; padding-block-end: 22px; } .arra-beneficios__cabecera.esta-pegado { box-shadow: 0 calc(-1 * var(--apila-tapa, 0px)) 0 var(--arra-fondo-seccion); } .arra-beneficios__lista.esta-apilada > .arra-beneficios__item { position: sticky; inset-block-start: var(--apila-arriba, 104px); min-block-size: 46svh; align-content: start; box-sizing: border-box; margin-inline: 0; padding: 22px 20px; border-radius: 16px; border: 1px solid var(--arra-line-soft); background-color: var(--wp--preset--color--neutro-200); } .arra-fondo-suave .arra-beneficios__lista.esta-apilada > .arra-beneficios__item { background-color: var(--wp--preset--color--blanco); } .arra-beneficios__lista.esta-apilada > .arra-beneficios__item + .arra-beneficios__item { margin-block-start: 14px; } .arra-beneficios__lista.esta-apilada > .arra-beneficios__item::before { display: none; } .arra-beneficios__lista.esta-apilada > .arra-beneficios__item .arra-beneficios__n { font-size: 48px; margin-block-end: 10px; transition: color 620ms var(--wp--custom--movimiento--salida); } .arra-beneficios__lista.esta-apilada > .acaba-de-llegar .arra-beneficios__n { color: var(--wp--preset--color--burdeos-700); transition-duration: 160ms; }} @media (prefers-reduced-motion: reduce) { .arra-beneficios__item, .arra-beneficios__n { transition: none; } .js-motion .arra-beneficios__lista:not(.in) .arra-beneficios__item { opacity: 1; transform: none; }} .arra-beneficios__item:nth-child(1) { --turno: 0ms; } .arra-beneficios__item:nth-child(2) { --turno: 240ms; } .arra-beneficios__item:nth-child(3) { --turno: 480ms; } .arra-beneficios__item:nth-child(4) { --turno: 720ms; } .arra-beneficios__item:nth-child(5) { --turno: 960ms; } .arra-entregables { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; } .arra-entregables > * { display: grid; gap: 6px 0; padding-block: 22px; border-block-start: 1px solid var(--arra-line-soft); border-inline-start: 0; padding-inline: 0; background: transparent; border-radius: 0; grid-template-columns: minmax(0, 1fr); } .arra-entregables > *:first-child { border-block-start: 0; padding-block-start: 0; } @media (min-width: 760px) { .arra-entregables > * { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 6px 44px; align-items: start; } .arra-entregables > * > :nth-child(1) { grid-area: 1 / 1; } .arra-entregables > * > :nth-child(2) { grid-area: 2 / 1; } .arra-entregables > * > :nth-child(3) { grid-area: 3 / 1; } .arra-entregables > * > :nth-child(4) { grid-area: 1 / 2 / span 3 / 2; }} .arra-entregables > * > :nth-child(2) { font-family: var(--font-display); font-weight: 500; font-size: 19px; line-height: 1.25; color: var(--wp--preset--color--carbon-950); } .arra-entregables > * > :nth-child(3) { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--fg-soft); max-inline-size: 54ch; } .arra-entregables > * > :nth-child(4) { padding-inline-start: 14px; border-inline-start: 2px solid var(--wp--preset--color--dorado-700); } .arra-entregables > * > :nth-child(4) > :first-child { display: block; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; margin-block-end: 4px; color: var(--wp--preset--color--tinta-500); } .arra-entregables > * > :nth-child(4) > * { font-size: 15.5px; line-height: 1.6; color: var(--fg-soft); margin: 0; } .arra-lista-limpia > * { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 4px 0 6px; transform: none; } @media (min-width: 760px) { .arra-lista-limpia > * { padding-inline: 26px 22px; border-inline-start: 1px solid var(--arra-line-soft); } .arra-lista-limpia > *:first-child { border-inline-start: 0; padding-inline-start: 0; }} .arra-proceso__etapa { display: block; margin-block-end: 5px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--dorado-700); } .arra-proceso--operaciones .arra-proceso__caja { transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } @media (hover: hover) { .arra-proceso--operaciones .arra-proceso__caja:hover { transform: translateY(-3px); border-color: var(--wp--preset--color--dorado-700); }} /* Los iconos delante de cada opcion: se dibujan al entrar la fila, como los de la home. Ver destilar.py, iconos_en_la_definicion(). */ .arra-icono { display: block; inline-size: 31.2px; block-size: 31.2px; translate: 0 1px; color: var(--corp); transition: color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); } .arra-icono svg { inline-size: 100%; block-size: 100%; display: block; } .arra-icono path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1176ms var(--wp--custom--movimiento--salida); transition-delay: calc(500ms + (sibling-index() - 1) * 154ms); } .js-motion .arra-reveal:not(.in) .arra-icono path { stroke-dashoffset: 1; transition: none; } @media (max-width: 859px) { .arra-icono { inline-size: 26.4px; block-size: 26.4px; }} @media (prefers-reduced-motion: reduce) { .arra-icono { transition: none; } .arra-icono path, .js-motion .arra-reveal:not(.in) .arra-icono path { transition: none; stroke-dashoffset: 0; }} /* Superficies claras sobre banda gris: se invierten. Ver destilar.py, css_de_las_superficies(). */ .arra-fondo-suave .arra-superficie-clara { background: var(--wp--preset--color--blanco); } .arra-fondo-suave .arra-tira-logos, .arra-fondo-suave .arra-inicio-partners { background: var(--wp--preset--color--blanco); } .arra-fondo-suave .arra-tira-logos > li, .arra-fondo-suave .arra-inicio-partners > li { background: var(--wp--preset--color--neutro-100); } /* El criterio de «esto es para ti si…» de las dos tarjetas del router. Ver destilar.py, quien_es_quien(). */ .arra-encaje { margin-block: 20px 22px; padding-block-start: 16px; border-block-start: 1px solid var(--arra-line-soft); } .arra-encaje__rotulo { display: block; margin-block-end: 6px; color: var(--wp--preset--color--dorado-700); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .arra-encaje__texto { margin: 0; color: var(--fg); font-size: 14.5px; line-height: 1.55; } /* El resumen del metodo de la portada, con la silueta de capacidades. Ver destilar.py, bloque_del_metodo_breve(). */ .arra-metodo-breve__cabecera { max-inline-size: 52ch; margin-block-end: 40px; } .arra-metodo-breve__h2 { margin: 10px 0 14px; } .arra-metodo-breve__entrada { margin: 0; color: var(--fg-soft); line-height: 1.7; } .arra-metodo-breve__lista { list-style: none; margin: 0; padding: 0; } .arra-metodo-breve__momento { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: start; padding-block: 22px; margin-inline: -16px; padding-inline: 16px; border-block-start: 1px solid var(--arra-line-soft); transition: background-color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida), border-color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); } .arra-metodo-breve__momento:first-child { border-block-start: 0; } @media (hover: hover) { .arra-metodo-breve__momento:hover { background-color: var(--wp--preset--color--neutro-100); } .arra-metodo-breve__momento:hover, .arra-metodo-breve__momento:hover + .arra-metodo-breve__momento { border-block-start-color: var(--wp--preset--color--dorado-700); }} @media (prefers-reduced-motion: reduce) { .arra-metodo-breve__momento { transition: none; }} .arra-metodo-breve__momento > .arra-icono { grid-row: 1 / span 2; } .arra-metodo-breve__rotulo { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; color: var(--fg); } .arra-metodo-breve__linea { margin: 0; grid-column: 2; color: var(--fg-soft); font-size: 15px; line-height: 1.6; } @media (min-width: 760px) { .arra-metodo-breve__momento { grid-template-columns: auto minmax(0, 17rem) minmax(0, 1fr); column-gap: 22px; align-items: center; } .arra-metodo-breve__momento > .arra-icono { grid-row: 1; } .arra-metodo-breve__linea { grid-column: 3; grid-row: 1; }} .arra-metodo-breve__momento > .arra-icono { color: var(--wp--preset--color--dorado-700); } @media (hover: hover) { .arra-metodo-breve__momento:hover > .arra-icono { color: var(--wp--preset--color--tinta-900); }} /* La marca en movimiento de la portada. Ver destilar.py, bloque_de_la_marca_en_video(). */ .arra-marca-video__marco { position: relative; overflow: hidden; inline-size: 100vw; margin-inline: calc(50% - 50vw); aspect-ratio: 16 / 9; background: var(--wp--preset--color--carbon-950) url(/wp-content/themes/arra/assets/video/una-marca-dos-lineas-1920x1080.webp) center / cover no-repeat; } .arra-marca-video__video { display: block; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 859px) { .arra-marca-video__marco { aspect-ratio: 4 / 5; background-image: url(/wp-content/themes/arra/assets/video/una-marca-dos-lineas-1080x1350.webp); }} /* La especializacion: acordeon m13 con foto. Ver destilar.py, css_de_los_mundos(). */ .arra-mundos__cabecera { max-inline-size: 52ch; margin-block-end: 40px; } .arra-mundos__h2 { margin: 10px 0 14px; } .arra-mundos__entrada { margin: 0; color: var(--fg-soft); line-height: 1.7; } .arra-mundos__grupos { display: grid; gap: 34px; } @media (min-width: 860px) { .arra-mundos__grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }} .arra-mundos__linea { margin: 0 0 14px; color: var(--wp--preset--color--dorado-700); font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .arra-mundos__acordeon { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .arra-mundos__panel { flex: 0 0 auto; block-size: 132px; min-inline-size: 0; } .arra-mundos__enlace { position: relative; display: block; block-size: 100%; overflow: hidden; border-radius: var(--r-md); text-decoration: none; isolation: isolate; } .arra-mundos__foto { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transform: scale(1.02); transition: transform 640ms var(--wp--custom--movimiento--salida); } .arra-mundos__velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--arra-mundos-tinte) 42%, transparent) 0%, color-mix(in srgb, var(--arra-mundos-tinte) 72%, transparent) 46%, var(--arra-mundos-tinte) 100%); } .arra-mundos__grupo--core { --arra-mundos-tinte: var(--wp--preset--color--verde-900); } .arra-mundos__grupo--corp { --arra-mundos-tinte: var(--wp--preset--color--burdeos-950); } .arra-mundos__pie { position: absolute; inset-inline: 0; inset-block-end: 0; display: grid; gap: 6px; padding: 18px 20px 16px; } .arra-mundos__nombre { color: var(--wp--preset--color--blanco); font-family: var(--font-display); font-weight: 500; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.2; letter-spacing: -0.01em; } .arra-mundos__ir { display: inline-flex; align-items: center; gap: 6px; color: var(--wp--preset--color--dorado-300); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; } .arra-mundos__ir svg { inline-size: 13px; block-size: 13px; } .arra-mundos__enlace:focus-visible { outline: 2px solid var(--wp--preset--color--dorado-300); outline-offset: 3px; } @media (min-width: 860px) and (hover: hover) { .arra-mundos__acordeon { flex-direction: row; block-size: 268px; gap: 8px; } .arra-mundos__panel { flex: 1 1 0; block-size: auto; transition: flex-grow 480ms var(--wp--custom--movimiento--salida); } .arra-mundos__acordeon:hover > .arra-mundos__panel { flex-grow: .82; } .arra-mundos__acordeon > .arra-mundos__panel:hover, .arra-mundos__acordeon > .arra-mundos__panel:focus-within { flex-grow: 2.4; } .arra-mundos__panel:hover .arra-mundos__foto, .arra-mundos__panel:focus-within .arra-mundos__foto { transform: scale(1.08); } .arra-mundos__nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .arra-mundos__panel:hover .arra-mundos__nombre, .arra-mundos__panel:focus-within .arra-mundos__nombre { overflow: visible; } .arra-mundos__ir { opacity: 0; white-space: nowrap; transition: opacity 300ms var(--wp--custom--movimiento--salida); } .arra-mundos__panel:hover .arra-mundos__ir, .arra-mundos__panel:focus-within .arra-mundos__ir { opacity: 1; }} @media (prefers-reduced-motion: reduce) { .arra-mundos__panel, .arra-mundos__foto, .arra-mundos__ir { transition: none; }} .arra-mundos-foto--1 { background-image: url('/wp-content/themes/arra/assets/img/fotos/core-ecommerce-1.jpg'); background-image: image-set(url('/wp-content/themes/arra/assets/img/fotos/core-ecommerce-1.webp') type('image/webp'), url('/wp-content/themes/arra/assets/img/fotos/core-ecommerce-1.jpg') type('image/jpeg')); } .arra-mundos-foto--2 { background-image: url('/wp-content/themes/arra/assets/img/fotos/core-creadores-movil-en-tripode.jpg'); background-image: image-set(url('/wp-content/themes/arra/assets/img/fotos/core-creadores-movil-en-tripode.webp') type('image/webp'), url('/wp-content/themes/arra/assets/img/fotos/core-creadores-movil-en-tripode.jpg') type('image/jpeg')); } .arra-mundos-foto--3 { background-image: url('/wp-content/themes/arra/assets/img/fotos/core-esports-1.jpg'); background-image: image-set(url('/wp-content/themes/arra/assets/img/fotos/core-esports-1.webp') type('image/webp'), url('/wp-content/themes/arra/assets/img/fotos/core-esports-1.jpg') type('image/jpeg')); } .arra-mundos-foto--4 { background-image: url('/wp-content/themes/arra/assets/img/fotos/core-inmobiliario-1.jpg'); background-image: image-set(url('/wp-content/themes/arra/assets/img/fotos/core-inmobiliario-1.webp') type('image/webp'), url('/wp-content/themes/arra/assets/img/fotos/core-inmobiliario-1.jpg') type('image/jpeg')); } .arra-mundos-foto--5 { background-image: url('/wp-content/themes/arra/assets/img/fotos/corporate-grupos-1.jpg'); background-image: image-set(url('/wp-content/themes/arra/assets/img/fotos/corporate-grupos-1.webp') type('image/webp'), url('/wp-content/themes/arra/assets/img/fotos/corporate-grupos-1.jpg') type('image/jpeg')); } .arra-mundos-foto--6 { background-image: url('/wp-content/themes/arra/assets/img/fotos/corporate-real-estate-1.jpg'); background-image: image-set(url('/wp-content/themes/arra/assets/img/fotos/corporate-real-estate-1.webp') type('image/webp'), url('/wp-content/themes/arra/assets/img/fotos/corporate-real-estate-1.jpg') type('image/jpeg')); } .arra-mundos-foto--7 { background-image: url('/wp-content/themes/arra/assets/img/fotos/corporate-startups-1.jpg'); background-image: image-set(url('/wp-content/themes/arra/assets/img/fotos/corporate-startups-1.webp') type('image/webp'), url('/wp-content/themes/arra/assets/img/fotos/corporate-startups-1.jpg') type('image/jpeg')); } .arra-mundos-foto--8 { background-image: url('/wp-content/themes/arra/assets/img/fotos/corporate-ecommerce-internacional-1.jpg'); background-image: image-set(url('/wp-content/themes/arra/assets/img/fotos/corporate-ecommerce-internacional-1.webp') type('image/webp'), url('/wp-content/themes/arra/assets/img/fotos/corporate-ecommerce-internacional-1.jpg') type('image/jpeg')); } /* La cabecera del teaser de tecnologia, sobre la tira de partners. Ver destilar.py, cabecera_de_la_tecnologia(). */ .arra-tecnologia__cabecera { max-inline-size: 52ch; margin-block-end: 34px; } .arra-tecnologia__h2 { margin: 10px 0 14px; } .arra-tecnologia__entrada { margin: 0; color: var(--fg-soft); line-height: 1.7; } /* La mision con sus pilares y la vision como declaracion, en /sobre-nosotros/. Ver destilar.py, bloque_del_proposito(). */ .arra-proposito__cabecera { max-inline-size: 52ch; margin-block-end: 38px; } .arra-proposito__h2 { margin: 10px 0 0; } .arra-proposito__rotulo { margin: 0 0 14px; color: var(--wp--preset--color--dorado-700); font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; } .arra-proposito__rotulo--centro { text-align: center; } .arra-proposito__mision { padding-block-start: 20px; border-block-start: 2px solid var(--wp--preset--color--dorado-700); } .arra-proposito__texto { margin: 0; max-inline-size: 46ch; color: var(--fg); font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.3vw, 27px); line-height: 1.35; letter-spacing: -0.015em; } .arra-proposito__pilares { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 22px 30px; } @media (min-width: 720px) { .arra-proposito__pilares { grid-template-columns: repeat(2, minmax(0, 1fr)); }} @media (min-width: 1100px) { .arra-proposito__pilares { grid-template-columns: repeat(4, minmax(0, 1fr)); }} .arra-proposito__pilar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; color: var(--fg); font-size: 15px; line-height: 1.5; } .arra-proposito__pilar > .arra-icono { color: var(--wp--preset--color--dorado-700); } .arra-proposito__vision { padding-block-start: 22px; border-block-start: 2px solid var(--wp--preset--color--dorado-700); } .arra-proposito__declaracion { margin: 0; max-inline-size: 22ch; color: var(--fg); font-family: var(--font-display); font-weight: 500; font-size: clamp(27px, 4vw, 44px); line-height: 1.12; letter-spacing: -0.03em; } .arra-proposito__apoyo { margin: 18px 0 0; max-inline-size: 52ch; color: var(--fg-soft); font-size: 16px; line-height: 1.7; } /* Las cuatro metricas de la portada, del prototipo del cliente. Ver destilar.py, bloque_de_las_metricas(). */ .arra-metricas { border-block-end: 1px solid var(--arra-line-soft); } .arra-metricas__rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .arra-metricas__ficha { position: relative; overflow: hidden; min-block-size: 190px; padding: 34px clamp(20px, 3vw, 42px) 34px 30px; } .arra-metricas__ficha:not(:last-child) { border-inline-end: 1px solid var(--arra-line-soft); } .arra-metricas__ficha::before { content: ""; position: absolute; inset-block: 30px; inset-inline-start: 0; inline-size: 2px; background: var(--wp--preset--color--dorado-500); transform: scaleY(0); transform-origin: top; } .arra-metricas__ventana { display: block; overflow: hidden; block-size: clamp(38px, 3.6vw, 50px); } .arra-metricas__rodillo { display: flex; flex-direction: column; transform: translateY(-50%); } .arra-metricas__valor { display: flex; align-items: center; block-size: clamp(38px, 3.6vw, 50px); color: var(--fg); font-family: var(--font-display); font-size: clamp(30px, 3.3vw, 44px); font-weight: 500; letter-spacing: -.045em; line-height: 1; white-space: nowrap; } .arra-metricas__valor--eco { color: color-mix(in srgb, var(--wp--preset--color--dorado-300) 72%, var(--wp--preset--color--blanco)); } .arra-metricas__rotulo { display: block; margin-block-start: 13px; color: var(--fg-soft); font-size: 13px; line-height: 1.45; opacity: 0; transform: translateY(10px); } .arra-metricas__ficha:hover .arra-metricas__valor, .arra-metricas__ficha:focus-within .arra-metricas__valor { color: var(--wp--preset--color--dorado-700); } .arra-metricas__ficha:hover::before, .arra-metricas__ficha:focus-within::before { background: var(--wp--preset--color--dorado-700); } .arra-metricas__valor, .arra-metricas__ficha::before { transition: color 220ms var(--wp--custom--movimiento--salida), background-color 220ms var(--wp--custom--movimiento--salida); } @media (prefers-reduced-motion: reduce) { .arra-metricas__valor, .arra-metricas__ficha::before { transition: none; }} .arra-metricas.in .arra-metricas__ficha::before { animation: arra-metricas-filete 560ms var(--wp--custom--movimiento--salida) both; } .arra-metricas.in .arra-metricas__rodillo { animation: arra-metricas-rueda 720ms var(--wp--custom--movimiento--salida) both; } .arra-metricas.in .arra-metricas__rotulo { animation: arra-metricas-rotulo 440ms var(--wp--custom--movimiento--salida) both; } @keyframes arra-metricas-filete { to { transform: scaleY(1); } } @keyframes arra-metricas-rueda { to { transform: translateY(0); } } @keyframes arra-metricas-rotulo { to { opacity: 1; transform: translateY(0); } } .arra-metricas.in .arra-metricas__ficha--1::before { animation-delay: 0ms; } .arra-metricas.in .arra-metricas__ficha--1 .arra-metricas__indice { animation-delay: 110ms; } .arra-metricas.in .arra-metricas__ficha--1 .arra-metricas__rodillo { animation-delay: 120ms; } .arra-metricas.in .arra-metricas__ficha--1 .arra-metricas__rotulo { animation-delay: 380ms; } .arra-metricas.in .arra-metricas__ficha--2::before { animation-delay: 100ms; } .arra-metricas.in .arra-metricas__ficha--2 .arra-metricas__indice { animation-delay: 210ms; } .arra-metricas.in .arra-metricas__ficha--2 .arra-metricas__rodillo { animation-delay: 220ms; } .arra-metricas.in .arra-metricas__ficha--2 .arra-metricas__rotulo { animation-delay: 480ms; } .arra-metricas.in .arra-metricas__ficha--3::before { animation-delay: 200ms; } .arra-metricas.in .arra-metricas__ficha--3 .arra-metricas__indice { animation-delay: 310ms; } .arra-metricas.in .arra-metricas__ficha--3 .arra-metricas__rodillo { animation-delay: 320ms; } .arra-metricas.in .arra-metricas__ficha--3 .arra-metricas__rotulo { animation-delay: 580ms; } .arra-metricas.in .arra-metricas__ficha--4::before { animation-delay: 300ms; } .arra-metricas.in .arra-metricas__ficha--4 .arra-metricas__indice { animation-delay: 410ms; } .arra-metricas.in .arra-metricas__ficha--4 .arra-metricas__rodillo { animation-delay: 420ms; } .arra-metricas.in .arra-metricas__ficha--4 .arra-metricas__rotulo { animation-delay: 680ms; } @media (hover: hover) and (pointer: fine) { .arra-metricas__ficha { transition: transform 180ms var(--wp--custom--movimiento--salida); } .arra-metricas__ficha:hover { transform: translateY(-3px); }} @media (max-width: 760px) { .arra-metricas__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } .arra-metricas__ficha { min-block-size: 160px; padding: 24px clamp(16px, 5vw, 28px) 24px 24px; } .arra-metricas__ficha::before { inset-block: 24px; } .arra-metricas__ficha:nth-child(2) { border-inline-end: 0; } .arra-metricas__ficha:nth-child(-n + 2) { border-block-end: 1px solid var(--arra-line-soft); } .arra-metricas__indice { margin-block-end: 22px; }} @media (max-width: 430px) { .arra-metricas__ficha { padding-inline: 18px 12px; } .arra-metricas__valor { font-size: clamp(24px, 8vw, 31px); } .arra-metricas__rotulo { font-size: 11px; }} @media (prefers-reduced-motion: reduce) { .arra-metricas.in .arra-metricas__ficha::before, .arra-metricas.in .arra-metricas__indice, .arra-metricas.in .arra-metricas__rodillo, .arra-metricas.in .arra-metricas__rotulo { animation: none; } .arra-metricas__ficha::before { transform: scaleY(1); } .arra-metricas__indice, .arra-metricas__rotulo { opacity: 1; transform: none; } .arra-metricas__rodillo { transform: translateY(0); } .arra-metricas__ficha { transition: none; }} /* Las cuatro razones de /sobre-nosotros/. Ver destilar.py, bloque_de_las_razones(). */ .arra-razones__cabecera { max-inline-size: 56ch; margin-block-end: 44px; } .arra-razones__h2 { margin: 10px 0 14px; } .arra-razones__entrada { margin: 0; color: var(--fg-soft); line-height: 1.7; } .arra-razones__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 clamp(34px, 5vw, 64px); } @media (min-width: 860px) { .arra-razones__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }} .arra-razones__razon { padding-block: 24px 26px; border-block-start: 1px solid var(--arra-line-soft); } .arra-razones__titulo { margin: 0 0 10px; color: var(--fg); font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 2vw, 23px); line-height: 1.25; letter-spacing: -0.015em; } .arra-razones__texto { margin: 0; color: var(--fg-soft); font-size: 15.5px; line-height: 1.65; } /* Los valores de /sobre-nosotros/, alineados como mision y vision. Ver destilar.py, valores_a_la_izquierda(). */ .arra-valores-izquierda, .arra-valores-izquierda * { text-align: start; } .arra-valores-izquierda > *, .arra-valores-izquierda > * > * { margin-inline: 0; } /* Los cuatro valores de /sobre-nosotros/, con foto en vez de numeral. Ver destilar.py, valores_con_foto(). */ .arra-valor__foto { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 14px; margin-block-end: 18px; background-color: var(--wp--preset--color--dorado-700); } .arra-valor__foto picture { display: block; inline-size: 100%; block-size: 100%; } .arra-valor__foto.arra-valor__foto img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.12) brightness(1); } .arra-valor__foto::after { content: ""; position: absolute; inset: 0; background-color: var(--wp--preset--color--dorado-700); mix-blend-mode: multiply; } .arra-valor__foto img { transition: filter var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida), transform var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); } @media (hover: hover) and (pointer: fine) { .arra-valor:hover .arra-valor__foto img { filter: grayscale(0.35) contrast(1.04) brightness(1.08); transform: scale(1.04); }} @media (prefers-reduced-motion: reduce) { .arra-valor__foto img { transition: none; } .arra-valor:hover .arra-valor__foto img { transform: none; }} /* Los cuatro valores de /sobre-nosotros/, con icono. Ver destilar.py, valores_con_icono(). */ .arra-valor--icono > .arra-icono { display: block; inline-size: 38px; block-size: 38px; margin-block-end: 18px; color: var(--wp--preset--color--dorado-700); transition: color 260ms var(--wp--custom--movimiento--salida); } @media (hover: hover) { .arra-valor--icono:hover > .arra-icono { color: var(--arra-senala); }} /* Los retoques de la portada de Core. Ver destilar.py, retoques_de_la_portada_core(). */ .arra-core-ficha > svg { stroke: var(--arra-linea); transition: stroke var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); } @media (hover: hover) and (pointer: fine) { .arra-core-ficha:hover > svg { stroke: var(--wp--preset--color--dorado-700); }} a.arra-core-ficha.arra-core-ficha { background-color: var(--wp--preset--color--neutro-200); } a.arra-core-ficha > span:last-child { transition: color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); } @media (hover: hover) and (pointer: fine) { a.arra-core-ficha:hover > span:last-child { color: var(--wp--preset--color--dorado-700); }} /* Los dos heroes institucionales miden lo mismo. Ver destilar.py, HEROE_INSTITUCIONAL. */ .arra-heroe-institucional { box-sizing: border-box; } .arra-heroe-institucional { min-block-size: 460px; } @media (max-width: 1023px) { .arra-heroe-institucional { min-block-size: 640px; }} @media (max-width: 767px) { .arra-heroe-institucional { min-block-size: auto; }} .arra-legal-lista--aparte { margin-block-start: clamp(34px, 4vw, 52px); } .arra-legal-hojas { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; max-inline-size: 40rem; } @media (min-width: 1200px) { .arra-legal-hojas { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px; max-inline-size: none; }} @media (min-width: 1200px) { .arra-legal-carril, .arra-legal-marco { display: contents; }} .pasa-paginas .arra-legal-hojas { display: grid; gap: 0; padding-block-end: 22px; } .pasa-paginas .arra-legal-cuenta__actual { color: var(--arra-linea); } @keyframes arra-legal-tramo { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes arra-legal-via-x { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes arra-legal-viajero-x { 0% { opacity: 0; inset-inline-start: calc(100% / 10); } 6% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; inset-inline-start: calc(100% - 100% / 10); } } @keyframes arra-legal-llega { 0% { background: var(--wp--preset--color--blanco); border-color: var(--wp--preset--color--neutro-400); transform: scale(1); } 45% { transform: scale(1.35); } 100% { background: var(--arra-linea); border-color: var(--arra-linea); transform: scale(1); } } /* Las paginas legales. Ver destilar.py, «LAS PAGINAS LEGALES». */ .arra-legal { --medida: 62ch; padding-block-end: clamp(72px, 9vw, 128px); } .arra-legal__cabecera { max-inline-size: var(--medida); margin-block-end: clamp(40px, 5vw, 64px); padding-block-end: clamp(28px, 3.5vw, 40px); border-block-end: 1px solid var(--arra-line-soft); } .arra-legal__h1 { margin: 14px 0 0; } .arra-legal__fecha { margin: 16px 0 0; color: var(--fg-faint); font-size: 14px; } .arra-legal__cuerpo { max-inline-size: var(--medida); } .arra-legal__parte + .arra-legal__parte { margin-block-start: clamp(36px, 4.5vw, 52px); } .arra-legal__h2 { margin: 0 0 18px; color: var(--fg); font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.3; letter-spacing: -0.015em; scroll-margin-block-start: 104px; } .arra-legal__h3 { margin: 28px 0 12px; color: var(--fg); font-family: var(--font-display); font-weight: 500; font-size: 18px; line-height: 1.35; } .arra-legal__p { margin: 0 0 16px; color: var(--fg-soft); line-height: 1.75; } .arra-legal__p:last-child { margin-block-end: 0; } .arra-legal__lista { margin: 0 0 16px; padding-inline-start: 22px; color: var(--fg-soft); line-height: 1.75; } .arra-legal__lista li + li { margin-block-start: 8px; } .arra-legal__lista::marker, .arra-legal__lista li::marker { color: var(--gold-bronze); } .arra-legal__datos { margin: 0 0 20px; display: grid; gap: 4px 20px; } .arra-legal__datos dt { color: var(--fg-faint); font-size: 13px; letter-spacing: var(--tr-wide); text-transform: uppercase; } .arra-legal__datos dd { margin: 0 0 12px; color: var(--fg); line-height: 1.6; } @media (min-width: 640px) { .arra-legal__datos { grid-template-columns: 15rem minmax(0, 1fr); align-items: baseline; } .arra-legal__datos dt { padding-block-start: 2px; }} .arra-legal__indice { margin-block-end: clamp(40px, 5vw, 60px); padding: 26px 26px 28px; border-radius: var(--r-md); background: var(--arra-bg-subtle); } .arra-legal__indice-rotulo { margin: 0 0 14px; color: var(--fg-faint); font-family: var(--font-body); font-weight: 400; font-size: 13px; letter-spacing: var(--tr-wide); text-transform: uppercase; } .arra-legal__indice-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px 32px; } @media (min-width: 720px) { .arra-legal__indice-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }} .arra-legal__indice-lista a { color: var(--fg-soft); text-decoration: none; font-size: 15px; line-height: 1.45; border-block-end: 1px solid transparent; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .arra-legal__indice-lista a:hover, .arra-legal__indice-lista a:focus-visible { color: var(--fg); border-block-end-color: var(--gold); } .arra-legal__p a, .arra-legal__lista a { color: var(--fg); text-decoration-line: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; } .arra-legal__p a:hover, .arra-legal__lista a:hover { text-decoration-color: var(--fg); } .arra-legal__cookies { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } @media (min-width: 860px) { .arra-legal__cookies { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }} .arra-legal__cookie { padding: 22px 22px 24px; border: 1px solid var(--arra-line-soft); border-radius: var(--r-md); background: var(--arra-surface); } .arra-legal__cookie-nombre { margin: 0 0 14px; color: var(--fg); font-family: var(--font-display); font-weight: 500; font-size: 17px; } .arra-legal__cookie-datos { margin: 0; display: grid; gap: 2px; } .arra-legal__cookie-datos dt { color: var(--fg-faint); font-size: 12px; letter-spacing: var(--tr-wide); text-transform: uppercase; } .arra-legal__cookie-datos dd { margin: 0 0 12px; color: var(--fg-soft); font-size: 14.5px; line-height: 1.6; } .arra-legal__cookie-datos dd:last-child { margin-block-end: 0; } .arra-pie-legal { color: inherit; text-decoration-line: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out); } .arra-pie-legal:hover, .arra-pie-legal:focus-visible { color: var(--gold); text-decoration-color: currentColor; } /* Las resenas de Google. Ver destilar.py, «LAS RESENAS DE GOOGLE», y REVISION-LEGAL.md punto 7. */ .arra-resenas__cabecera { max-inline-size: 46ch; margin-block-end: clamp(32px, 4vw, 44px); } .arra-resenas__h2 { margin: 10px 0 14px; } .arra-resenas__enlace { display: inline-block; margin-block-start: 16px; color: var(--fg); font-size: 15px; text-decoration-line: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color var(--dur-fast) var(--ease-out); } .arra-resenas__enlace:hover, .arra-resenas__enlace:focus-visible { text-decoration-color: var(--fg); } .arra-resenas__tira { list-style: none; margin: 0; padding: 4px 0 8px; display: flex; gap: 18px; inline-size: 100vw; margin-inline: calc(50% - 50vw); overflow-x: hidden; scrollbar-width: none; touch-action: pan-y; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 clamp(18px, 3vw, 54px), #000 calc(100% - clamp(18px, 3vw, 54px)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 clamp(18px, 3vw, 54px), #000 calc(100% - clamp(18px, 3vw, 54px)), transparent 100%); } .arra-resenas__tira::-webkit-scrollbar { display: none; } .arra-resenas__tira.esta-cogida { cursor: grabbing; } .arra-resenas__ficha { flex: 0 0 auto; box-sizing: border-box; inline-size: min(80vw, 21rem); display: flex; flex-direction: column; padding: 24px 24px 26px; border-radius: var(--r-md); background: var(--arra-bg-subtle); border: 1px solid var(--arra-line-soft); } .arra-resenas__quien { display: flex; align-items: center; gap: 12px; } .arra-resenas__inicial { flex: 0 0 auto; inline-size: 38px; block-size: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-bronze); color: var(--surface); font-family: var(--font-display); font-weight: 500; font-size: 16px; } .arra-resenas__autor { min-inline-size: 0; color: var(--fg); font-size: 15px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; } .arra-resenas__estrellas { display: flex; gap: 2px; margin-block: 16px 12px; } .arra-resenas__estrellas svg { inline-size: 15px; block-size: 15px; fill: var(--gold); } .arra-resenas__texto { margin: 0; } .arra-resenas__texto p { margin: 0; color: var(--fg-soft); font-size: 15px; line-height: 1.65; } /* Core con movimiento: las piezas de Corporate en Core. Ver destilar.py, core_con_movimiento(). */ @media (min-width: 1200px) { .arra-legal-hojas--rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; } .arra-legal-hojas--rejilla .arra-legal-hoja { padding: 30px 28px 32px; } } .arra-core-mazo__entrada { margin: 14px 0 0; color: var(--fg-soft); line-height: 1.7; } .arra-core-iconos .arra-capacidades-icono { color: var(--arra-linea); } @media (hover: hover) { .arra-core-iconos .arra-capacidades-fila:hover .arra-capacidades-icono { color: var(--gold); }} body.arra-linea-core .arra-legal:not(.arra-fondo-suave):not(.arra-aire-repartido) { padding-block-end: 0; } @media (min-width: 900px) { body.arra-linea-core div:has(> div > details[name^="arra-faq"]) > div:first-child { position: sticky; inset-block-start: 120px; align-self: start; }} .arra-fondo-suave + section:has(.arra-cta-con-foto), .arra-puente + section:has(.arra-cta-con-foto) { padding-block-start: clamp(40px, 5vw, 64px); } #tec.arra-router-1 { padding-block-start: clamp(56px, 6vw, 84px); } @media (max-width: 767px) { .arra-faq.arra-fondo-suave { padding-block-end: 58px; } .arra-faq + section { padding-block-start: 48px; }} @media (max-width: 767px) { section:has(> .arra-heroe-foto) > :last-child { padding-block: 88px 92px; } section:has(> .arra-heroe-velo) > :last-child { padding-block: 66px 92px; }} @keyframes arra-comparativa-entra { from { opacity: 0; transform: scale(.6); } } body:not(.arra-linea-core) .arra-pie-plataforma { display: none; } /* Enlaces de la portada a los servicios. Ver TEXTOS_DE_PAGINA. */ .arra-inicio-a-servicio { color: inherit; text-decoration-line: underline; text-decoration-color: var(--wp--preset--color--dorado-500); text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: text-decoration-color 240ms var(--wp--custom--movimiento--salida); } .arra-inicio-a-servicio:hover, .arra-inicio-a-servicio:focus-visible { text-decoration-color: currentColor; } /* El mapa de la oficina en Contacto. Ver mapa_en_contacto(). */ .arra-mapa { display: block; margin-block-start: 16px; overflow: hidden; border-radius: var(--r-md, 12px); border: 1px solid var(--arra-line-soft); } .arra-mapa__foto, .arra-mapa__foto img, .arra-mapa__mapa { display: block; inline-size: 100%; } .arra-mapa__foto img { block-size: auto; } .arra-mapa__mapa { aspect-ratio: 960 / 560; block-size: auto; border: 0; } .arra-mapa__pie { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 14px; font-weight: 500; color: var(--fg); text-decoration: none; } .arra-mapa__pie:hover, .arra-mapa__pie:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; } @keyframes arra-modelo-entra { from { opacity: 0; transform: translateX(18px); } } /* Las ondas de los paneles verdes. Ver destilar.py, ondas_en_los_paneles(), y assets/js/ondas.js. */ .arra-con-ondas { position: relative; isolation: isolate; } .arra-ondas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: -1; pointer-events: none; border-radius: inherit; } .arra-con-ondas > div:empty { display: none; } /* «Agenda tu consulta» se rellena de dorado. Ver destilar.py, «AGENDA TU CONSULTA, EN DORADO AL PASAR EL RATON». */ .arra-cta-dorado.arra-cta-dorado { transition: background-color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida), color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); } @media (hover: hover) { .arra-cta-dorado.arra-cta-dorado:hover, .arra-cta-dorado.arra-cta-dorado:focus-visible { opacity: 1; background-color: var(--gold-bronze); color: var(--wp--preset--color--carbon-950); }} @media (prefers-reduced-motion: reduce) { .arra-cta-dorado.arra-cta-dorado { transition: none; }} /* La home generica en la linea de Corporate. Ver destilar.py, inicio_en_la_linea_de_corporate(). */ .arra-inicio-argumentos { gap: 26px clamp(28px, 4vw, 56px); } .arra-inicio-argumentos > .arra-inicio-argumento { background: transparent; border: 0; border-radius: 0; padding: 0; gap: 14px; } .arra-inicio-argumentos > .arra-inicio-argumento:hover { transform: none; box-shadow: none; } .arra-inicio-argumentos > .arra-inicio-argumento > .arra-icono { inline-size: 34px; block-size: 34px; color: var(--wp--preset--color--dorado-700); } @media (hover: hover) { .arra-inicio-argumentos > .arra-inicio-argumento:hover > .arra-icono { color: var(--wp--preset--color--tinta-900); }} @media (min-width: 760px) { .arra-inicio-argumentos > .arra-inicio-argumento { padding-inline-start: 22px; border-inline-start: 1px solid var(--arra-line); transition: border-color 260ms var(--wp--custom--movimiento--salida); } @media (hover: hover) { .arra-inicio-argumentos > .arra-inicio-argumento:hover { border-inline-start: 2px solid var(--wp--preset--color--dorado-500); padding-inline-start: 21px; }}} @media (max-width: 759px) { .arra-inicio-argumentos > .arra-inicio-argumento + .arra-inicio-argumento { padding-block-start: 24px; border-block-start: 1px solid var(--arra-line); }} .arra-ticks.arra-ticks--columna { grid-template-columns: minmax(0, 1fr); max-inline-size: none; margin: 22px 0 0; gap: 12px; } .arra-inicio-plan { position: relative; margin: 0; padding: 26px 26px 22px; border: 1px solid var(--wp--preset--color--neutro-400); border-radius: 20px; background: var(--wp--preset--color--blanco); box-shadow: var(--shadow-badge); } .arra-inicio-plan__cab { display: flex; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; margin-block-end: 40px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; } .arra-inicio-plan__rotulo { color: var(--wp--preset--color--dorado-700); } .arra-inicio-plan__nota { color: var(--wp--preset--color--tinta-500); } .arra-inicio-plan { container-type: inline-size; } .arra-inicio-plan__pista { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; padding-block-start: 0; } .arra-inicio-plan__linea, .arra-inicio-plan__avance { position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 22px; --c: var(--wp--preset--color--neutro-300); background: radial-gradient(circle 11px at 12.5% 50%, var(--c) 10.4px, transparent 11px), radial-gradient(circle 11px at 37.5% 50%, var(--c) 10.4px, transparent 11px), radial-gradient(circle 11px at 62.5% 50%, var(--c) 10.4px, transparent 11px), radial-gradient(circle 11px at 87.5% 50%, var(--c) 10.4px, transparent 11px), linear-gradient(var(--c), var(--c)) 50% 50% / 75% 3px; background-repeat: no-repeat; } .arra-inicio-plan__avance { --c: var(--wp--preset--color--dorado-700); } .arra-inicio-plan__hito { display: grid; justify-items: center; gap: 6px; text-align: center; padding-inline: 4px; } .arra-inicio-plan__hito i { display: block; inline-size: 22px; block-size: 22px; } .arra-inicio-plan__hito b { font-family: var(--font-display); font-weight: 500; font-size: 13px; line-height: 1.2; color: var(--wp--preset--color--tinta-900); } .arra-inicio-plan__hito small { font-size: 11px; line-height: 1.3; color: var(--wp--preset--color--tinta-500); } .arra-inicio-plan__meses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 10px 12.5% 0; padding: 0; list-style: none; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--tinta-500); } .arra-inicio-plan__meses > * { justify-self: center; } .arra-inicio-plan__pie { margin: 22px 0 0; padding-block-start: 16px; border-block-start: 1px solid var(--wp--preset--color--neutro-300); font-size: 14px; line-height: 1.6; color: var(--wp--preset--color--tinta-500); } .arra-inicio-plan.esta-viva .arra-inicio-plan__avance { animation: arra-inicio-avanza 7s linear infinite; } @keyframes arra-inicio-avanza { 0% { clip-path: inset(0 calc(87.5% + 11px) 0 0); opacity: 1; } 72%, 92% { clip-path: inset(0 calc(12.5% - 11px) 0 0); opacity: 1; } 100% { clip-path: inset(0 calc(12.5% - 11px) 0 0); opacity: 0; } } .arra-inicio-plan.esta-viva .arra-inicio-plan__hito--1 b, .arra-inicio-plan.esta-viva .arra-inicio-plan__hito--1 small { animation: arra-inicio-hito-1 7s linear infinite; } @keyframes arra-inicio-hito-1 { 0%, 0.3% { opacity: .38; } 3.3%, 93% { opacity: 1; } 100% { opacity: .38; } } .arra-inicio-plan.esta-viva .arra-inicio-plan__hito--2 b, .arra-inicio-plan.esta-viva .arra-inicio-plan__hito--2 small { animation: arra-inicio-hito-2 7s linear infinite; } @keyframes arra-inicio-hito-2 { 0%, 23.1% { opacity: .38; } 26.1%, 93% { opacity: 1; } 100% { opacity: .38; } } .arra-inicio-plan.esta-viva .arra-inicio-plan__hito--3 b, .arra-inicio-plan.esta-viva .arra-inicio-plan__hito--3 small { animation: arra-inicio-hito-3 7s linear infinite; } @keyframes arra-inicio-hito-3 { 0%, 45.9% { opacity: .38; } 48.9%, 93% { opacity: 1; } 100% { opacity: .38; } } .arra-inicio-plan.esta-viva .arra-inicio-plan__hito--4 b, .arra-inicio-plan.esta-viva .arra-inicio-plan__hito--4 small { animation: arra-inicio-hito-4 7s linear infinite; } @keyframes arra-inicio-hito-4 { 0%, 68.7% { opacity: .38; } 71.7%, 93% { opacity: 1; } 100% { opacity: .38; } } @container (max-width: 470px) { .arra-inicio-plan__hito small { display: none; } .arra-inicio-plan__hito b { font-size: 12px; }} .arra-inicio-servicio.arra-inicio-servicio { background: var(--wp--preset--color--neutro-200); border-color: var(--wp--preset--color--neutro-400); } .arra-inicio-cabeza.arra-inicio-cabeza { block-size: auto; display: flex; align-items: center; padding: 20px clamp(24px, 3vw, 40px); } .arra-inicio-marca { display: block; block-size: 34px; inline-size: auto; } .arra-inicio-lineas { gap: 0; } .arra-inicio-lineas > .arra-inicio-linea { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; align-items: start; background: transparent; border-radius: 0; padding: 14px 0; border-block-start: 1px solid var(--arra-line); } .arra-inicio-lineas > .arra-inicio-linea:last-child { border-block-end: 1px solid var(--arra-line); } .arra-inicio-linea > :not(.arra-inicio-linea__marca) { grid-column: 2; } .arra-inicio-linea__marca { margin-block-start: 1px; } .arra-inicio-servicio--core .arra-inicio-linea__marca { background: var(--core); } .arra-inicio-servicio--corp .arra-inicio-linea__marca { background: var(--corp); } .arra-inicio-partners, .arra-tira-logos { display: flex; gap: 16px; margin: 0; padding: 18px 16px; list-style: none; overflow-x: hidden; border: 1px solid var(--arra-line-soft); border-radius: var(--r-lg); background: var(--wp--preset--color--neutro-100); touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; } .arra-inicio-partners.esta-cogida, .arra-tira-logos.esta-cogida { cursor: grabbing; } .arra-inicio-partners > li, .arra-tira-logos > li { flex: none; display: grid; place-items: center; min-inline-size: 150px; padding: 16px 28px; border-radius: 14px; background: var(--wp--preset--color--blanco); } .arra-inicio-partners img, .arra-tira-logos img { display: block; block-size: auto; inline-size: auto; max-block-size: 26px; max-inline-size: 120px; filter: grayscale(1); opacity: .72; pointer-events: none; transition: filter var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida), opacity var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); } @media (hover: hover) { .arra-inicio-partners > li:hover img, .arra-tira-logos > li:hover img { filter: none; opacity: 1; }} .arra-beneficios--inicio > .arra-beneficios__cabecera { max-inline-size: 52ch; margin-block-end: 0; text-align: start; } .arra-beneficios--inicio > .arra-inicio-entrada { text-align: start; margin-block: 16px 44px; margin-inline: 0; } @media (hover: hover) { .arra-beneficios--inicio .arra-beneficios__item:hover .arra-beneficios__n { color: var(--wp--preset--color--tinta-900); }} @media (max-width: 719px) { .arra-beneficios--inicio .arra-beneficios__lista.esta-apilada > .acaba-de-llegar .arra-beneficios__n { color: var(--wp--preset--color--tinta-900); }} .arra-inicio-articulo { position: relative; overflow: hidden; } .arra-inicio-foto { background-size: cover; background-position: center; transition: transform 900ms var(--wp--custom--movimiento--salida); } @media (max-width: 859px) { div:has(> .arra-inicio-articulo) { display: flex; gap: 16px; box-sizing: border-box; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; inline-size: 100vw; margin-inline: calc(50% - 50vw); padding-inline: 20px; scroll-padding-inline-start: 20px; } div:has(> .arra-inicio-articulo)::-webkit-scrollbar { display: none; } div:has(> .arra-inicio-articulo) > * { flex: 0 0 auto; inline-size: min(78vw, 20rem); scroll-snap-align: start; }} .arra-inicio-foto--1 { background-image: url('/wp-content/themes/arra/assets/img/fotos/core-fiscal-contable-1.jpg'); background-image: image-set(url('/wp-content/themes/arra/assets/img/fotos/core-fiscal-contable-1.webp') type('image/webp'), url('/wp-content/themes/arra/assets/img/fotos/core-fiscal-contable-1.jpg') type('image/jpeg')); } .arra-inicio-foto--2 { background-image: url('/wp-content/themes/arra/assets/img/fotos/core-packs-1.jpg'); background-image: image-set(url('/wp-content/themes/arra/assets/img/fotos/core-packs-1.webp') type('image/webp'), url('/wp-content/themes/arra/assets/img/fotos/core-packs-1.jpg') type('image/jpeg')); } .arra-inicio-foto--3 { background-image: url('/wp-content/themes/arra/assets/img/fotos/core-ecommerce-1.jpg'); background-image: image-set(url('/wp-content/themes/arra/assets/img/fotos/core-ecommerce-1.webp') type('image/webp'), url('/wp-content/themes/arra/assets/img/fotos/core-ecommerce-1.jpg') type('image/jpeg')); } .arra-inicio-foto--4 { background-image: url('/wp-content/themes/arra/assets/img/fotos/core-laboral-1.jpg'); background-image: image-set(url('/wp-content/themes/arra/assets/img/fotos/core-laboral-1.webp') type('image/webp'), url('/wp-content/themes/arra/assets/img/fotos/core-laboral-1.jpg') type('image/jpeg')); } @media (hover: hover) { .arra-inicio-articulo:hover .arra-inicio-foto { transform: scale(1.05); }} @media (prefers-reduced-motion: reduce) { .arra-inicio-plan__avance, .arra-inicio-plan__hito, .arra-inicio-plan__hito i { animation: none; } .arra-inicio-foto { transition: none; }} .arra-cta-relleno--oro { --arra-cta-relleno-tinte: var(--gold-bronze); --arra-cta-relleno-tinta: var(--wp--preset--color--carbon-950); } .arra-cta-relleno.arra-cta-relleno { background-color: transparent; background-image: linear-gradient(to right, var(--arra-cta-relleno-tinte), var(--arra-cta-relleno-tinte)), linear-gradient(var(--wp--preset--color--blanco), var(--wp--preset--color--blanco)); background-size: 0% 100%, 100% 100%; background-repeat: no-repeat; background-origin: border-box; transition: background-size var(--wp--custom--movimiento--lento) var(--wp--custom--movimiento--salida), color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida), border-color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida), transform var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); } @media (hover: hover) { .arra-cta-relleno.arra-cta-relleno:hover { background-size: 100% 100%, 100% 100%; color: var(--arra-cta-relleno-tinta, var(--wp--preset--color--blanco)); transform: translateY(-2px); }} @media (prefers-reduced-motion: reduce) { .arra-cta-relleno.arra-cta-relleno { transition: none; }} /* Un solo ancho de seccion en toda la web, y la barra flotante alineada con el. Ver destilar.py, iguala_los_margenes(). */ .arra-ancho-seccion.arra-ancho-seccion { max-inline-size: 1280px; } @media (min-width: 860px) { .arra-flotante .wp-block-template-part header { max-inline-size: calc(1280px + 2 * clamp(20px, 5vw, 64px) - 32px); padding-inline: calc(clamp(20px, 5vw, 64px) - 16px); }} /* La entrada del texto del heroe: mas recorrido, mas foco y mas despacio que el resto, porque es lo primero que se ve. Ver destilar.py y motion.css, seccion 1b. */ section:has(> .arra-heroe-velo) [data-arra-stagger] > .arra-reveal { --arra-entra-sube: 44px; --arra-entra-foco: 14px; --arra-entra-dur: 1000ms; --arra-reveal-dist: 54px; --arra-reveal-dur: 900ms; } @media (max-width: 859px) { section:has(> .arra-heroe-velo) [data-arra-stagger] > .arra-reveal { --arra-entra-sube: 54px; --arra-entra-dur: 900ms; }} /* Fichas de perfil con foto. Ver destilar.py, css_de_los_perfiles(). */ .arra-perfiles { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; inline-size: 100vw; margin-inline: calc(50% - 50vw); overflow-x: hidden; touch-action: pan-y; cursor: grab; scrollbar-width: none; padding-block-end: 4px; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.34) 0, #000 clamp(18px, 3vw, 54px), #000 calc(100% - clamp(18px, 3vw, 54px)), rgba(0,0,0,.34) 100%); mask-image: linear-gradient(90deg, rgba(0,0,0,.34) 0, #000 clamp(18px, 3vw, 54px), #000 calc(100% - clamp(18px, 3vw, 54px)), rgba(0,0,0,.34) 100%); } .arra-perfiles::-webkit-scrollbar { display: none; } .arra-perfiles.esta-cogida { cursor: grabbing; } .arra-perfiles > li { flex: 0 0 auto; inline-size: 260px; } .arra-perfiles img, .arra-perfiles a { -webkit-user-drag: none; user-select: none; }