/* 
Theme Name: Barbara Meo-Evoli (Hello Elementor Child)
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/


/* ===== Separador con icono y líneas animadas ===== */

    .mj-sep5 {
      --dash-color:#000;        /* color dashed */
      --solid-color:#EE514C;    /* color línea sólida */
      --dash-height:1px;
      --solid-height:1px;
      --icon-size:44px;
      --maxw:50%;
    }
    .mj-sep6 {
      --dash-color:#000;        /* color dashed */
      --solid-color:#ffffff;    /* color línea sólida */
      --dash-height:1px;
      --solid-height:1px;
      --icon-size:44px;
      --maxw:50%;
    }

    .mj-sep5 .wrap,
    .mj-sep6 .wrap {
      display:flex;
      align-items:center;
      justify-content:center;
      width:100%;
      max-width:var(--maxw);
      margin:0px auto;
      gap:16px;
    }

    .mj-sep5 .line,
    .mj-sep6 .line {
      position:relative;
      flex:1 1 auto;
      min-width:60px;
      height:18px; /* da espacio vertical para dashed arriba + sólida abajo */
    }

    /* Línea sólida roja debajo */
    .mj-sep5 .solid,
    .mj-sep6 .solid {
      position:absolute;
      left:0; right:0;
      top:50%;
      transform:translateY(3px); /* ligeramente debajo */
      height:var(--solid-height);
      background:var(--solid-color);
    }

    /* Línea dashed negra arriba (animada) */
    .mj-sep5 .dash::before,
    .mj-sep6 .dash::before {
      content:"";
      display:block;
      position:absolute;
      left:0; right:0;
      top:50%;
      transform:translateY(-3px); /* ligeramente arriba */
      height:var(--dash-height);
      background:
        linear-gradient(90deg, var(--dash-color) 50%, transparent 50%),
        linear-gradient(90deg, var(--dash-color) 50%, transparent 50%),
        linear-gradient(0deg, var(--dash-color) 50%, transparent 50%),
        linear-gradient(0deg, var(--dash-color) 50%, transparent 50%);
      background-size: 8px 1px, 0px 1px, 0px 1px, 0px 1px;
      background-position: 0% 0%, 100% 100%, 0% 100%, 100% 0px;
      animation: dash 50s linear infinite;
    }

    @keyframes dash {
      from { background-position: 0% 0%, 100% 100%, 0% 100%, 100% 0px; }
      to   { background-position: 100% 0%, 200% 100%, 100% 100%, 200% 0px; }
    }

    /* Icono central */
    .mj-sep5 .icon,
    .mj-sep6 .icon {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      flex:0 0 auto;
      line-height:1;
    }
    .mj-sep5 .icon i,
    .mj-sep6 .icon i {
      font-size:var(--icon-size);
      color:var(--solid-color); /* rojo */
    }