/*  ------- MENU ------- */

 /* Reset */
    * { box-sizing: border-box; margin: 0; padding: 0; }

    :root{
      --nav-height: 111px;
      --nav-bg: #ffffff;
      --nav-text: #831979;       /* underline & dark color */
	  --secondary-color: #396492;
      --menu-ink: #897e7a;       /* middle-menu text color */
      --underline-duration: 520ms; /* underline animation slightly slower */
      --underline-thickness: 2px;  /* 2px underline */
      --logo-w: 100px;
      --logo-h: 73px;
      --brand-gap: 10px;
      --menu-gap: 40px;
      --nav-container-gap: 120px;
      --cta-gap-left: 36px;
      --cta-bg: #831979;
      --cta-color: #fff;
      --hero-text-shadow: 1px 1px 5px black;
      --menu-raise: -22px;
      --focus-ring: 3px solid #ffd54f;
      --mobile-break: 1070px; /* breakpoint for hamburger */
      --edge-gap: 30px;       /* 30px from edges for logo/hamburger */
      --hero-max-text-width: 880px; /* keep same max width for title/subtitle */
    }

    /* Use system-ui stack */
    body, h1, h2, p, a, button, main {
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .brand-title, .hero h1 { font-weight: 700; }
    .brand-sub, .hero p.subtitle { font-weight: 500; }

    body {
      background: var(--nav-bg);
      padding-top: 0;
      color: #111;
    }

    /* Top nav  */
    .top-nav {
      position: relative;
      inset: 0 0 auto 0;
      height: var(--nav-height);
      background: var(--nav-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      padding-left: var(--edge-gap);
      padding-right: var(--edge-gap);
      z-index: 120;
      overflow: visible;
      box-shadow: none;
    }

    .nav-container {
      display: flex;
      align-items: flex-end;
      gap: var(--nav-container-gap);
      width: max-content;
      position: relative;
    }

    /* Left: logo + brand */
    .nav-left {
      display: flex;
      align-items: flex-end;
      gap: var(--brand-gap);
	 transform: translateY(-4px);  

    }
    .nav-logo { display:inline-block; line-height:1; }
    .nav-logo img {
      width: var(--logo-w);
      height: var(--logo-h);
      display: block;
      object-fit: contain;
	  transform: translateY(3px);   /* move logo down 3px */
    }
    .brand-text {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-start;
      line-height: 1;
	  transform: translateY(-4px);
    }
    .brand-title { color:var(--nav-text); font-size: clamp(16px,5vw,30px); white-space:nowrap; }
    .brand-sub   { color:var(--secondary-color); opacity:0.95; font-size:16px; margin-top:4px; white-space:nowrap; }

    /* Middle: menu (raised) */
    .nav-middle {
      display:flex;
      align-items:center;
      align-self: flex-end;
      transform: translateY(var(--menu-raise));
    }
    nav.primary {
      display:flex;
      align-items:center;
      gap: 0;
    }
    .nav-links {
      display:flex;
      gap: var(--menu-gap);
      align-items:center;
    }

    /* Menu: uppercase, middle menu ink #897e7a, underline kept dark */
    .nav-links a {
      position:relative;
      color: var(--menu-ink);
      text-decoration:none;
      font-weight:500; /* slightly thinner */
      font-size: clamp(15px,1.5vw,17px);
      padding:6px 0;
      display:inline-block;
      line-height:1;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .nav-links a::after {
      content:"";
      position:absolute;
      left:0;
      bottom:-6px;
      height: var(--underline-thickness);
      width:100%;
      background:var(--nav-text);
      transform: scaleX(0);
      transform-origin:left;
      transition: transform var(--underline-duration) cubic-bezier(.2,.9,.2,1);
      border-radius:2px;
    }
    .nav-links a:hover::after,
    .nav-links a:focus::after,
    .nav-links a:focus-visible::after { transform: scaleX(1); }
    .nav-links a:focus-visible { box-shadow: var(--focus-ring); border-radius:6px; color: white;}

    /* Right: CTA and hamburger */
    .nav-right {
      display:flex;
      align-items:center;
      gap:12px;
      align-self:flex-end;
	  transform: translateY(-14px);
    }
    .nav-cta {
      background: var(--cta-bg);
      color: var(--cta-color);
      padding: 10px 18px;
      border-radius: 6px;
      font-weight:700;
      font-size:15px;
      text-decoration:none;
      display:inline-block;
      border:2px solid transparent;
      transition: transform 160ms ease, box-shadow 160ms ease;
    }
    .nav-cta:hover, .nav-cta:focus { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); outline:none; color: white;}
    .nav-cta:focus-visible { box-shadow: var(--focus-ring); }
	 .nav-cta2 {
      /* background: var(--secondary-color); */
	  background: #3f96c7;
	  letter-spacing: 2px;
	  }


    /* Hamburger & mobile panel */
    .nav-toggle {
      display: none;
      background: transparent;
      border: 2px solid transparent;
      padding: 10px;
      border-radius: 8px;
      cursor: pointer;
    }
    .nav-toggle:focus-visible { box-shadow: var(--focus-ring); outline: none; }
    .nav-toggle .hamburger {
      width: 22px;
      height: 2px;
      background: var(--nav-text);
      position: relative;
      display: inline-block;
    }
    .nav-toggle .hamburger::before,
    .nav-toggle .hamburger::after {
      content: "";
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--nav-text);
      transition: transform 200ms ease, opacity 200ms ease;
    }
    .nav-toggle .hamburger::before { transform: translateY(-7px); }
    .nav-toggle .hamburger::after { transform: translateY(7px); }

    .mobile-panel {
      display: none;
      position: absolute;
      left: var(--edge-gap);
      right: var(--edge-gap);
      top: calc(var(--nav-height) - 7px);
      background: var(--nav-bg);
      border-radius: 10px;
      box-shadow: 0 18px 40px rgba(16,24,40,0.12);
      padding: 12px 16px;
      z-index: 121;
    }
    .mobile-panel ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 8px 2px;
    }
    /* Mobile links uppercase; default ink same as middle menu */
    .mobile-panel a {
      font-size: 16px;
      padding: 10px 12px;
      display:block;
      border-radius:8px;
      color:var(--menu-ink);
      text-decoration:none;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .mobile-panel a:focus-visible { box-shadow: var(--focus-ring); outline: none; }

    /* On hover/focus inside hamburger change color to dark */
    .mobile-panel a:not(.mobile-cta):hover,
    .mobile-panel a:not(.mobile-cta):focus {
      color: var(--nav-text);
    }

    .mobile-panel a.mobile-cta,
    .mobile-cta {
      display:block;
      text-align:center;
      background: var(--cta-bg);
      color: #ffffff !important;
      padding: 12px;
      border-radius: 8px;
      font-weight:700;
      text-decoration: none;
      text-transform: none;
    }
    .mobile-cta:focus-visible { box-shadow: var(--focus-ring); outline: none; }
    .mobile-cta2 {
      background: #3f96c7;
	  text-align: left;
	}
    .nav-container.open .mobile-panel { display:block; }
    .nav-container.open .nav-toggle .hamburger { background: transparent; }
    .nav-container.open .nav-toggle .hamburger::before { transform: rotate(45deg); }
    .nav-container.open .nav-toggle .hamburger::after { transform: rotate(-45deg); }

    /* Responsive behavior (hamburger at <=1070px) */
    @media (max-width:1200px){ :root{ --nav-container-gap:80px; } }
    @media (max-width:920px){ :root{ --nav-container-gap:48px; --menu-gap:28px; } }

    @media (max-width:1070px){
      :root{ --nav-container-gap:16px; --menu-gap:16px; --nav-height:80px; --menu-raise: -4px; }
      body{ padding-top: 0; }

      .nav-container {
        width: 100%;
        max-width: none;
        justify-content: space-between;
        gap: 8px;
      }

      .nav-logo img{ width:80px; height:58px; }
      .nav-middle .nav-links { display:none; }
      .nav-toggle { display:inline-flex; align-items:center; justify-content:center; }
      .nav-cta { display: none !important; }
      .mobile-panel { left: var(--edge-gap); right: var(--edge-gap); }
    }

 /*  ------- SLIDER ------- */
 
.hero{

	height:70vh;
	min-height:380px;
	position:relative;
	overflow:hidden;
	background:#000;
	margin-bottom: 0;
}
.hero-media{position:absolute;inset:0}

.hero-media img,
.hero-media video{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
opacity:0;
transition:opacity 1.5s ease-in-out;
}

.hero-media .active{opacity:1}

.overlay{
position:relative;
z-index:5;
height:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
color:#fff;
text-align:center;
opacity:0;
transition:opacity 1s ease;
transform: translateY(-12px);
}

.overlay.show{opacity:1}

.hero-tint {
  position: absolute;
  inset: 0;
  z-index: 2;   /* above video/image, below text */
  background: rgba(0,0,0,0);
  transition: background 1.2s ease;
  pointer-events: none;
}

.overlay h1{font-size:clamp(34px,7vw,68px);margin-bottom:10px;text-shadow:1px 1px 15px rgba(0,0,0,.5)}
.overlay p{font-size:clamp(16px,2.3vw,34px);text-shadow:1px 1px 15px rgba(0,0,0,.5)}

.cta-row{margin-top:20px;display:flex;gap:15px}
.btn{padding:12px 20px;border-radius:8px;text-decoration:none;font-weight:700}
.btn-primary{background:#831979 !important;color:#fff !important; height: 45px !important}
.btn-secondary{background:rgba(255,255,255,.2) !important;color:#fff !important; border: 0px !important; height: 45px !important}
.btn-secondary:hover { background:rgba(255,215,239,.6) !important;color:#fff !important; border: 0px !important; height: 45px !important }


 /*  ------- INFO BAR ------- */

.info-bar {
  height: 100px;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  padding-inline: clamp(16px, 4vw, 48px);
  /* border-bottom: 1px solid rgba(0,0,0,0.05); */
}

.info-inner {
  width: 100%;

  margin: 0 auto;

  max-width: 1400px;
  margin: 0 auto;


  display: grid;
  /* grid-template-columns: repeat(3, 1fr);  MIO */
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--nav-text);
}

.info-item strong {
  display: block;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.info-item span {
  font-size: 16px;
  font-weight: 500;
  color: var(--secondary-color);
}

.icon {
  width: 42px;
  height: 42px;
  position: relative;
  color: var(--secondary-color);
}

.info-icon {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex-shrink: 0;
}
.info-inner {
 /* padding-left: calc(clamp(32px, 10vw, 114px) + 48px); */
}
@media (min-width: 591px) and (max-width: 1150px) {
  .info-bar {
    height: auto;
    padding: 24px 0;
  }

  .info-inner {
    grid-template-columns: 1fr 1fr;
    row-gap: 24px;
   padding-left: clamp(32px, 10vw, 114px);
  }
}


@media (min-width: 461px) and (max-width: 590px) {
  .info-bar {
    height: 162px;
   /* padding-left: calc(clamp(32px, 10vw, 114px) + 15px);*/
  }

  .info-inner {
    grid-template-columns: 1fr 1fr;
    row-gap: 24px;
    /*padding-left: calc(clamp(32px, 10vw, 114px) - 40px);*/
  }
  .info-item strong {
  display: block;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.info-item span {
  font-size: 14px;
  font-weight: 400;
}

.icon {
  width: 30px;
  height: 30px;

}

.info-icon {
  width: 30px;
  height: 30px;

}
}

@media (max-width: 460px) {
  .info-bar {
    display: flex;
    height: auto;
    padding: 24px 0;
	gap: 1px;
  }
.info-item {
  min-width: 100px;
  gap: 8px;
}
  .info-inner {
    grid-template-columns: 0.8fr 1.2fr;
    row-gap: 24px;
    padding-left: 17px;
  }
  .info-item strong {
  display: block;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.info-item span {
  font-size: 14px;
  font-weight: 400;
}

.icon {
  width: 25px;
  height: 25px;

}

.info-icon {
  width: 25px;
  height: 25px;

}
}

.page-flow {
  position: relative;
 }
  
/* Para prevenir que los Styles del HTML de Mobirise afecte mis elementos */

#info-bar-scope {
  position: relative;
  isolation: isolate;
}

/* Reset hostile global CSS coming from the other site */
#info-bar-scope img,
#info-bar-scope video {
  border-radius: 0 !important;
  clip-path: none !important;
  mask: none !important;
  object-fit: contain;
}
/* The flying "We cut the red tapa..." in the Abour Us */

	.red_tape {
		left: 150px; 
		bottom: 0px; 
		position: absolute;
	}

		

/* Prevent parent containers from clipping */
#info-bar-scope * {
  box-sizing: border-box;
}

#red_tape-scope * {
  box-sizing: border-box;
}

/***********************************/

.hero img,
.hero video,
.hero-media img,
.hero-media video,
.red_tape img {
  border-radius: 0 !important;
  clip-path: none !important;
  mask-image: none !important;
  overflow: visible !important;
  object-fit: cover;
}

.no-transition {
  transition: none !important;
}