.elementor-kit-6{--e-global-color-primary:#000000;--e-global-color-secondary:#FF78FA;--e-global-color-text:#000000;--e-global-color-accent:#FF78FA;--e-global-typography-primary-font-family:"Geist";--e-global-typography-primary-font-size:3rem;--e-global-typography-secondary-font-family:"Geist";--e-global-typography-secondary-font-size:1.12rem;font-weight:600;--e-global-typography-text-font-family:"Geist";--e-global-typography-text-font-size:1.5rem;--e-global-typography-accent-font-family:"Instrument Serif";--e-global-typography-accent-font-size:2rem;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-font-style:italic;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:var( --e-global-color-primary );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:90%;}.e-con{--container-max-width:90%;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --Instrument:Instrument Serif; --Geist:Geist; --negro:#000000; --blanco:#ffffff; --rosa:#FF78FA; --gris:#9f9f9f; --32px:2rem; }
/* Start custom CSS *//* Animación hero: tú. Geist -> Instrument Serif al cargar */
@font-face {
  font-family: 'Instrument Serif';
  src: url('https://arysa.es/wp-content/uploads/2026/07/InstrumentSerif-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
.arysa-hero-line2 {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 6rem;
  line-height: 1em;
  text-transform: uppercase;
  margin: 34px 0 0 0;
}

/* 'Se diferente': oculto desde el primer pintado (antes de que el JS envuelva las palabras),
   asi no hay flash de texto ya formado. Se revela solo via JS anadiendo .arysa-revealed. */
[data-id="4bfa890"] {
  opacity: 0;
}
[data-id="4bfa890"].arysa-revealed {
  opacity: 1;
}
[data-id="4bfa890"] .arysa-word {
  transition: transform 1.5s cubic-bezier(0.16,1,0.3,1);
}
@media (prefers-reduced-motion: reduce) {
  [data-id="4bfa890"] { opacity: 1 !important; }
}
.arysa-tu-se {
  display: inline-block;
  line-height: 1em;
  transform: translateY(0px);
  margin-right: 0.12em;
}
.arysa-tu-wrap {
  position: relative;
  display: inline-block;
}
.arysa-tu-geist,
.arysa-tu-serif {
  display: inline-block;
}
.arysa-tu-geist {
  font-size: 8rem;
  transition: opacity 0.65s ease;
}
.arysa-tu-serif {
  position: absolute;
  left: 0;
  top: -42px;
  opacity: 0;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  font-size: 170px;
  line-height: 1em;
  white-space: nowrap;
  filter: blur(6px);
  transform: translateY(4px);
  transition: opacity 0.65s ease, filter 0.65s ease, transform 0.65s ease;
}
/* Cambio de tipografia del 'tu': clase anadida UNA sola vez por JS (no 'animation'),
   asi no hay nada que un disparo externo pueda reiniciar */
.arysa-tu-wrap.arysa-tu-swapped .arysa-tu-geist { opacity: 0; }
.arysa-tu-wrap.arysa-tu-swapped .arysa-tu-serif { opacity: 1; filter: blur(0); transform: translateY(0); }
@media (max-width: 1024px) {
  .arysa-hero-line2 { font-size: 4.2rem; }
  .arysa-tu-serif { font-size: 108px; top: -28px; }
  .arysa-tu-se { transform: translateY(0px); }
  .arysa-tu-geist { font-size: 5.4rem; }
}
@media (max-width: 767px) {
  .arysa-hero-line2 { font-size: 2.6rem; text-align: center; }
  .arysa-tu-serif { font-size: 60px; top: -15px; }
  .arysa-tu-se { transform: translateY(0px); }
  .arysa-tu-geist { font-size: 3.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .arysa-tu-geist { animation: none; opacity: 0; }
  .arysa-tu-serif { animation: none; opacity: 1; filter: none; transform: none; }
}

/* Scroll suave nativo solo para saltos a anclas (no afecta al scroll con rueda) */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}

/* Lenis toma el control del scroll: desactivar scroll-behavior nativo mientras esta activo, evita que compitan (causaba saltos) */
html.lenis {
  scroll-behavior: auto !important;
}

/* Hover del listado de servicios: Geist bold -> Instrument Serif italic rosa */
.e-649065e-fd772b9 {
  position: relative;
  z-index: 2;
  color: transparent !important;
  cursor: none;
}
.e-649065e-fd772b9::before,
.e-649065e-fd772b9::after {
  content: "Diseño web";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.e-649065e-fd772b9::before {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #000000;
  opacity: 1;
}
.e-649065e-fd772b9::after {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: #FF78FA;
  opacity: 0;
}
.e-649065e-fd772b9:hover::before { opacity: 0; }
.e-649065e-fd772b9:hover::after { opacity: 1; }
.e-5e45074-74b7d6a {
  position: relative;
  z-index: 2;
  color: transparent !important;
  cursor: none;
}
.e-5e45074-74b7d6a::before,
.e-5e45074-74b7d6a::after {
  content: "branding";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.e-5e45074-74b7d6a::before {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #000000;
  opacity: 1;
}
.e-5e45074-74b7d6a::after {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: #FF78FA;
  opacity: 0;
}
.e-5e45074-74b7d6a:hover::before { opacity: 0; }
.e-5e45074-74b7d6a:hover::after { opacity: 1; }
.e-328d459-a07cc8f {
  position: relative;
  z-index: 2;
  color: transparent !important;
  cursor: none;
}
.e-328d459-a07cc8f::before,
.e-328d459-a07cc8f::after {
  content: "ecommerce";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.e-328d459-a07cc8f::before {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #000000;
  opacity: 1;
}
.e-328d459-a07cc8f::after {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: #FF78FA;
  opacity: 0;
}
.e-328d459-a07cc8f:hover::before { opacity: 0; }
.e-328d459-a07cc8f:hover::after { opacity: 1; }
.e-46f8a27-05c151f {
  position: relative;
  z-index: 2;
  color: transparent !important;
  cursor: none;
}
.e-46f8a27-05c151f::before,
.e-46f8a27-05c151f::after {
  content: "marketplace";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.e-46f8a27-05c151f::before {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #000000;
  opacity: 1;
}
.e-46f8a27-05c151f::after {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: #FF78FA;
  opacity: 0;
}
.e-46f8a27-05c151f:hover::before { opacity: 0; }
.e-46f8a27-05c151f:hover::after { opacity: 1; }

/* En movil no hay hover real (se queda "pegado" al tocar): se anula el efecto y se deja siempre el texto negro */
@media (max-width: 767px) {
  .e-649065e-fd772b9::before,
  .e-5e45074-74b7d6a::before,
  .e-328d459-a07cc8f::before,
  .e-46f8a27-05c151f::before {
    opacity: 1 !important;
  }
  .e-649065e-fd772b9::after,
  .e-5e45074-74b7d6a::after,
  .e-328d459-a07cc8f::after,
  .e-46f8a27-05c151f::after {
    opacity: 0 !important;
  }
}


/* Foto "Sobre mí": aparece suave al hacer scroll, vuelve a blanco al salir del viewport */
[data-id="9778c7f"] {
  opacity: 0;
  transition: opacity 0.55s ease 80ms;
}
[data-id="9778c7f"].arysa-revealed {
  opacity: 1;
}

/* "ariadna": texto fijo en Instrument Serif. Antes cruzaba Geist->Serif con dos "ariadna" superpuestos por CSS; se simplifico a un unico texto para evitar contenido duplicado en el DOM (lectura de Google) */
.arysa-soy-heading {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 6rem;
  line-height: 1em;
  text-transform: uppercase;
  color: #000000;
  margin: 0;
}
.arysa-ariadna-serif-static {
  display: inline-block;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  font-size: 130px;
  line-height: 1em;
  white-space: nowrap;
}
@media (max-width: 1024px) {
  .arysa-soy-heading { font-size: 4.2rem; }
  .arysa-ariadna-serif-static { font-size: 92px; }
}
@media (max-width: 767px) {
  .arysa-soy-heading { font-size: 2.6rem; }
  .arysa-ariadna-serif-static { font-size: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-id="9778c7f"] { transition: none; opacity: 1; }
}

/* Sección negra "metodología": aparece suave al entrar en el viewport, vuelve a blanco al salir */
[data-id="0bb709e"] {
  opacity: 0;
  transition: opacity 1.1s ease;
}
[data-id="0bb709e"].arysa-revealed {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  [data-id="0bb709e"] { transition: none; opacity: 1; }
}

/* Sección negra de testimonios: mismo fade que metodología */
[data-id="0fbbde2"] {
  opacity: 0;
  transition: opacity 1.1s ease;
}
[data-id="0fbbde2"].arysa-revealed {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  [data-id="0fbbde2"] { transition: none; opacity: 1; }
}






/* Footer tipo "cortína": queda fijo abajo y se revela al terminar el scroll del contenido */
/* Efecto "cortina": revelado simple al entrar en el viewport (desliza hacia
   arriba + fundido), sin position:fixed. Mas robusto que el intento anterior
   con footer fijo + margen reservado (chocaba con Lenis y con el bloque
   grande "arysa" que va justo despues). La clase .arysa-revealed la anade
   el script arysa-curtain-footer.js mediante IntersectionObserver. */
#cortina {
  opacity: 0;
  transform: translateY(70px);
  transition: opacity 1.1s cubic-bezier(0.16,1,0.3,1), transform 1.1s cubic-bezier(0.16,1,0.3,1);
}
#cortina.arysa-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  #cortina { opacity: 1; transform: none; transition: none; }
}
header.elementor-location-header {
  position: relative;
  z-index: 50;
  background-color: #ffffff;
}
#content, .elementor-location-single {
  position: relative;
  z-index: 1;
  background-color: #ffffff;
  display: flow-root;
}

.arysa-tu-se { font-size: 9rem; }
@media (max-width: 1024px) { .arysa-tu-se { font-size: 5.4rem; } }
@media (max-width: 767px) { .arysa-tu-se { font-size: 3.5rem; } }

/* "Construyo...": acercado al video, sin el efecto fijo */
[data-id="e8d7437"] {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
@media (max-width: 767px) {
  [data-id="e8d7437"] {
    min-height: 60vh !important;
  }
}

/* Entrada de las palabras de servicio */
.e-649065e-fd772b9, .e-5e45074-74b7d6a, .e-328d459-a07cc8f, .e-46f8a27-05c151f {
  opacity: 0;
  transition: opacity 1s ease;
}
.e-649065e-fd772b9.arysa-revealed, .e-5e45074-74b7d6a.arysa-revealed, .e-328d459-a07cc8f.arysa-revealed, .e-46f8a27-05c151f.arysa-revealed {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .e-649065e-fd772b9, .e-5e45074-74b7d6a, .e-328d459-a07cc8f, .e-46f8a27-05c151f { opacity: 1; transition: none; }
}

/* Negro puro como base, para que el modo noche invierta a blanco puro (no gris) */
body { color: #000000; }

/* Menu del header centrado horizontalmente en el centro real de la pantalla */
/*
[data-id="04b4681"] { position: relative; }
[data-id="810ecb6"] {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 1024px) {
  [data-id="810ecb6"] { position: relative; transform: none; }
  .elementor-element-810ecb6 { width: 100% !important; max-width: 100% !important; }
}*/

/* Desplegable de Servicios: version CSS puro por si el JS no llega a disparar el hover */
li.menu-item-has-children:hover > .sub-menu,
li.menu-item-has-children:focus-within > .sub-menu {
  display: block !important;
}

/* El desplegable de Servicios se pintaba detras del hero de la home: forzamos que quede siempre encima */
[data-id="810ecb6"] { z-index: 9999; }
.sub-menu.elementor-nav-menu--dropdown { z-index: 9999 !important; }
/* Entrada de los textos "Geist grande" (negro/blanco) al hacer scroll, solo
   en la pagina de Branding (page-id-70). Escopado a esta pagina para no
   afectar el mismo estilo ya usado en la home (con su propio flotado). */
.page-id-70 .geist100pxnegro,
.page-id-70 .geist100pxblanco {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.7s cubic-bezier(0.16,1,0.3,1), transform 1.7s cubic-bezier(0.16,1,0.3,1);
}
.page-id-70 .geist100pxnegro.arysa-revealed,
.page-id-70 .geist100pxblanco.arysa-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .page-id-70 .geist100pxnegro,
  .page-id-70 .geist100pxblanco {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Efecto interferencia: texto sticky 'Ultimos Proyectos' vs imagenes que pasan por detras (home) */
.elementor-11 .elementor-element.elementor-element-6261783 {
  background-color: #ffffff;
}
.elementor-11 .elementor-element.elementor-element-840edd3 {
  mix-blend-mode: difference;
}
.elementor-11 .elementor-element.elementor-element-dfefa35,
.elementor-11 .elementor-element.elementor-element-0393567 {
  color: #ffffff;
}


/* La caja del texto sticky 'Ultimos Proyectos' es 100vh e invisible fuera del texto: sin esto bloquea el hover/click de la imagen de debajo (Afinkia) */
.elementor-11 .elementor-element.elementor-element-840edd3 {
  pointer-events: none;
}


/* Efecto de entrada mas 'chulo' en las 3 imagenes de proyectos: zoom-out suave combinado con la cortina existente del plugin (misma duracion/easing, se hereda via transition-duration inline del propio plugin) */
.elementor-11 .elementor-element-ebc2907.hisi-anim,
.elementor-11 .elementor-element-e70ddbe.hisi-anim,
.elementor-11 .elementor-element-2739782.hisi-anim {
  transform: scale(1.35);
  opacity: 0;
}
.elementor-11 .elementor-element-ebc2907.hisi-anim.ha--animated,
.elementor-11 .elementor-element-e70ddbe.hisi-anim.ha--animated,
.elementor-11 .elementor-element-2739782.hisi-anim.ha--animated {
  transform: scale(1);
  opacity: 1;
}


/* Linea de borde inferior que crece de 0 a 100% (izquierda a derecha) al entrar en vista: acordeon FAQ + cabeceras con borde inferior */
.e-n-accordion-item-title,
.cont-encabezados {
  position: relative;
}
.e-n-accordion-item-title::after,
.cont-encabezados::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: currentColor;
  transition: width 1.1s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}
.e-n-accordion-item-title.arysa-line-revealed::after,
.cont-encabezados.arysa-line-revealed::after {
  width: 100%;
}
.e-n-accordion-item[open] > .e-n-accordion-item-title::after {
  width: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  .e-n-accordion-item-title::after,
  .cont-encabezados::after {
    transition: none;
    width: 100%;
  }
}
.e-n-accordion-item-title {
  border-bottom: none !important;
}


/* Red de seguridad modo oscuro: si alguna pagina tiene un hueco sin fondo propio
   (seccion vacia, espaciado entre widgets, etc.), que no se vea el blanco de WordPress detras.
   OJO: el modo oscuro invierte toda la pagina con filter:invert(1) en <html>, asi que aqui
   el fondo real tiene que ser BLANCO para que, tras invertirse, se vea NEGRO en pantalla. */
.modo-invertido body,
.modo-invertido #content,
.modo-invertido .site-main {
  background-color: #ffffff !important;
}





/* Arregla de verdad el ancho colapsado del telefono en el footer (8c96c4e): mezcla de contenedor legado dentro de contenedor atomico v4
   hace que los controles de ancho/flex de Elementor no generen CSS. Forzado directo. */
.elementor-element.elementor-element-8c96c4e {
  width: 100% !important;
  flex: 1 1 auto !important;
}


/* Fuerza tamano sano en el widget del telefono del footer (37bc754), saltandose lo que sea que este pasando arriba en el arbol flex */
.elementor-element-37bc754,
.elementor-element-37bc754 .elementor-icon-list-items,
.elementor-element-37bc754 .elementor-icon-list-item,
.elementor-element-37bc754 .elementor-icon-list-item > a {
  width: auto !important;
  min-width: -moz-fit-content !important;
  min-width: fit-content !important;
  display: block !important;
  overflow: visible !important;
  flex: none !important;
  align-self: flex-start !important;
}
.elementor-element-8c96c4e {
  align-items: flex-start !important;
}


/* Fuerza ancho en TODA la cadena de contenedores del bloque Contacto del footer (a9f8a97 > 60c4626 > 7e99326 > 8c96c4e), porque colapsaban a 0px en cadena */
.elementor-element-a9f8a97,
.elementor-element-60c4626,
.elementor-element-7e99326,
.elementor-element-8c96c4e {
  width: 100% !important;
  min-width: 0 !important;
  flex-basis: auto !important;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Geist';
	font-display: swap;
	src: url('https://arysa.es/wp-content/uploads/2026/07/Geist-VariableFont_wght.ttf') format('truetype');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Instrument Serif';
	font-style: italic;
	font-weight: normal;
	font-display: swap;
	src: url('https://arysa.es/wp-content/uploads/2026/07/InstrumentSerif-Italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Instrument Serif';
	font-style: normal;
	font-weight: normal;
	font-display: swap;
	src: url('https://arysa.es/wp-content/uploads/2026/07/InstrumentSerif-Regular.woff2') format('woff2');
}
/* End Custom Fonts CSS */