.elementor-799 .elementor-element.elementor-element-5cba804{--display:flex;--min-height:100vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:80px 0px;--row-gap:80px;--column-gap:0px;border-style:solid;--border-style:solid;border-width:0px 0px 0px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;border-color:#D7B569;--border-color:#D7B569;--padding-top:180px;--padding-bottom:0px;--padding-left:30px;--padding-right:30px;}.elementor-799 .elementor-element.elementor-element-5cba804:not(.elementor-motion-effects-element-type-background), .elementor-799 .elementor-element.elementor-element-5cba804 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F0E9;}.elementor-799 .elementor-element.elementor-element-5cba804 > .elementor-shape-bottom .elementor-shape-fill, .elementor-799 .elementor-element.elementor-element-5cba804 > .e-con-inner > .elementor-shape-bottom .elementor-shape-fill{fill:#505050;}.elementor-799 .elementor-element.elementor-element-5cba804 > .elementor-shape-bottom svg, .elementor-799 .elementor-element.elementor-element-5cba804 > .e-con-inner > .elementor-shape-bottom svg{width:calc(100% + 1.3px);height:0px;}.elementor-799 .elementor-element.elementor-element-5cba804.e-con{--align-self:center;}.elementor-799 .elementor-element.elementor-element-5e040635{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-799 .elementor-element.elementor-element-1e9012c7{text-align:center;}.elementor-799 .elementor-element.elementor-element-1e9012c7 .elementor-heading-title{font-family:"Cinzel", Sans-serif;font-size:50px;font-weight:600;color:#505050;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-799 .elementor-element.elementor-element-241a2660{width:var( --container-widget-width, 66% );max-width:66%;--container-widget-width:66%;--container-widget-flex-grow:0;text-align:center;font-family:"DM Sans", Sans-serif;font-size:20px;font-weight:400;}.elementor-799 .elementor-element.elementor-element-241a2660.elementor-element{--align-self:center;}.elementor-799 .elementor-element.elementor-element-241a2660 p{margin-block-end:0px;}.elementor-799 .elementor-element.elementor-element-79f37dd3{--display:flex;--gap:50px 0px;--row-gap:50px;--column-gap:0px;--margin-top:0px;--margin-bottom:100px;--margin-left:0px;--margin-right:0px;}@media(max-width:767px){.elementor-799 .elementor-element.elementor-element-5cba804{--gap:40px 40px;--row-gap:40px;--column-gap:40px;}.elementor-799 .elementor-element.elementor-element-241a2660{--container-widget-width:313px;--container-widget-flex-grow:0;width:var( --container-widget-width, 313px );max-width:313px;}}/* Start custom CSS for container, class: .elementor-element-5cba804 *//* Estilo para las runas que siguen al cursor */
.rune-trail {
    /* Esencial para que no interfiera con los clics */
    pointer-events: none; 
    
    /* Posicionamiento absoluto dentro de la sección */
    position: absolute; 
    
    /* Color Ocre */
    color: #C8A464; 
    
    /* Tamaño pequeño, ajústalo a tu gusto */
    font-size: 18px; 
    
    /* Define la animación: nombre, duración y que se quede en el estado final */
    animation: fadeOutEffect 1.5s forwards;
    
    /* Pequeña sombra para que resalte un poco */
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

/* Animación de desvanecimiento y movimiento */
@keyframes fadeOutEffect {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    to {
        opacity: 0;
        /* Se mueve un poco hacia arriba mientras desaparece */
        transform: translate(-50%, -150%) scale(0.8); 
    }
}

/* ====== Legendary Names – Search UI ====== */
#lnSearch{
  --bar-h: 64px;          /* ALTURA DE LA SEARCH BAR (ajusta aquí) */
  --row-h: 44px;          /* ALTURA de cada fila de resultado */
  --rows: 20;             /* CUÁNTAS FILAS MOSTRAR (20) */
  --radius: 14px;
  --bg: #3f3f3f;
  --bg-2:#353535;
  --text:#eaeaea;
  --muted:#b8b8b8;
  --accent:#ffd06a;       /* opcional para hover/focus */
  color: var(--text);
  font-family: inherit;
}

/* Barra */
#lnSearch .ln-bar{
  display:flex; align-items:center; gap:10px;
  height: var(--bar-h);
  padding: 0 14px 0 16px;
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 #00000055 inset, 0 12px 24px rgba(0,0,0,.12);
}
#lnSearch .ln-icon{ font-size: 1.1rem; opacity:.85 }
#lnSearch input{
  flex:1; height: calc(var(--bar-h) - 18px);
  background: #2f2f2f; border: 1px solid #00000055;
  color: var(--text);
  border-radius: 10px; padding: 0 14px;
  font-size: 16px; letter-spacing:.2px;
  outline: none;
}
#lnSearch input:focus{ border-color: #000; box-shadow: 0 0 0 2px #000 inset }
#lnSearch .ln-clear{
  width:34px; height:34px; border-radius: 8px;
  background: var(--bg-2); color: var(--muted);
  border:1px solid #00000055; cursor:pointer;
}
#lnSearch .ln-clear:hover{ color:var(--text) }

/* Meta */
#lnSearch .ln-meta{
  margin:10px 4px 8px; color: var(--muted);
  font-size: .92rem;
}

/* Resultados */
#lnSearch .ln-results{
  list-style:none; margin: 0; padding: 0;
  background: var(--bg);
  border-radius: var(--radius);
  border:1px solid #00000055;
  max-height: calc(var(--row-h) * var(--rows));  /* 20 filas visibles */
  overflow: auto;
  overscroll-behavior: contain;
}
#lnSearch .ln-results li{
  height: var(--row-h); display:flex; align-items:center;
  padding: 0 16px; border-bottom: 1px solid #00000040;
  color: var(--text); cursor:pointer; user-select:none;
}
#lnSearch .ln-results li:last-child{ border-bottom: none }
#lnSearch .ln-results li:hover{ background: #2f2f2f }
#lnSearch .ln-results li[aria-selected="true"]{
  background:#2b2b2b; outline: 1px solid #00000066;
}

/* Show more */
#lnSearch .ln-more{
  margin-top:12px; width:100%; height: 40px;
  border-radius: 10px; border:1px solid #00000055;
  background: var(--bg-2); color: var(--text); cursor:pointer;
}
#lnSearch .ln-more:hover{ background:#2b2b2b }/* End custom CSS */
/* Start custom CSS *//* 0) Carga una fuente con runas (evita 'cuadraditos' vacíos) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Runic:wght@400&display=swap');

/* 1) La sección: debe tener CSS ID = why-names */
#why-names{ 
  position: relative;
  isolation: isolate; /* su propio stacking context */
}

/* 2) Capa hija (agrega un HTML widget con <div class="ln-runes-ambient"></div>) */
#why-names .ln-runes-ambient{
  position: absolute;
  inset: 0;
  z-index: 0;                 /* por debajo del contenido */
  pointer-events: none;
  overflow: hidden;
  font-family: "Noto Sans Runic","Segoe UI Symbol",system-ui,sans-serif;
  font-size: clamp(12px, 1.2vw, 18px);
  line-height: 1.8;
  letter-spacing: 0.55em;
  color: rgba(171,142,68,0.18); /* un poco más visible para test */
  opacity: 0.9;
  white-space: pre-wrap;
}

/* 3) Las runas viven en el ::before de la capa (NO del contenedor) */
#why-names .ln-runes-ambient::before{
  content:
    "ᚠᚢᚦᚨᚱᚲᚷᚹᚺᚾᛁᛃᛇᛈᛉᛊᛏᛒᛖᛗᛚᛜᛞᛟ \A"
    "ᛟᛞᛜᛚᛗᛖᛒᛏᛊᛉᛇᛃᛁᚾᚺᚹᚷᚲᚱᚨᚦᚢᚠ \A"
    "ᚷᚺᚾᛁᛇᛉᛏᛖᛚᛞᛟᚠᚢᚦᚨᚱᚲᚹᛃᛈᛊ \A"
    "ᛞᛗᛒᛏᛊᛉᛇᛃᛁᚾᚺᚹᚷᚲᚱᚨᚦᚢᚠᛟ \A"
    "ᚠᚢᚦᚨᚱᚲᚷᚹᚺᚾᛁᛃᛇᛈᛉᛊᛏᛒᛖᛗᛚᛜᛞᛟ \A"
    "ᛟᛞᛜᛚᛗᛖᛒᛏᛊᛉᛇᛃᛁᚾᚺᚹᚷᚲᚱᚨᚦᚢᚠ";
  position: absolute;
  inset: -8% -6%;
  transform: translate3d(0,0,0);
  animation: lnRuneDrift 48s ease-in-out infinite;
  will-change: transform, opacity;
}

/* 4) Asegura que el resto del contenido quede por encima */
#why-names > *:not(.ln-runes-ambient){
  position: relative;
  z-index: 1;
}

/* Animación sutil */
@keyframes lnRuneDrift{
  0%   { transform: translate3d(-2%, -2%, 0) rotate(0.2deg);  opacity: .75; }
  50%  { transform: translate3d( 2%,  2%, 0) rotate(-0.2deg); opacity: .95; }
  100% { transform: translate3d(-2%, -2%, 0) rotate(0.2deg);  opacity: .75; }
}

/* Hover opcional (quítalo si no quieres cambio) */
#why-names:hover .ln-runes-ambient{ opacity: .98; }

/* Respeta reduce motion */
@media (prefers-reduced-motion: reduce){
  #why-names .ln-runes-ambient::before{ animation: none; opacity: .35; }
}

/* --- DEBUG opcional: quita estas dos líneas cuando lo veas funcionando --- */
/* #why-names .ln-runes-ambient{ outline: 1px dashed rgba(200,50,50,.35); } *//* End custom CSS */