/* =========================
   TOKENS / THEME
   ========================= */

:root {
  /* timing */
  --transition-speed: 600ms;

  /* colours */
  --overlay-bg: rgba(10, 77, 87, 0.8);
  --text-color: rgba(255, 255, 255, 0.7);
  --accent-color: #ffd86b;

  /* typography */
  --font-main: "DM Sans", "Calibri", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* card tints */
  --reddark: rgba(60, 6, 6, 0.8);
  --redlight: rgba(158, 0, 0, 0.8);
  --pink: rgba(51, 5, 51, 0.8);
  --purple: rgba(26, 2, 59, 0.8);
  --grape:  rgba(45, 4, 42, 0.8);
  --teal: rgba(2, 95, 110, 0.8);
  --tealdark: rgba(0, 55, 68, 0.8);
  --green: rgba(71, 92, 5, 0.8);
  --darkgreen: rgba(32, 43, 4, 0.8);
  --rust: rgba(48, 26, 2, 0.8);
  --orange: rgba(133, 86, 0, 0.8);
  --black: rgba(0, 0, 0, 0.8);

  /* color-palette */
  --c1: #f29913;
  --c2: #f2be13;
  --c3: #f2dc13;


  /* rainbow (JS overrides if desired) */
  --rainbow-speed: 3s;
  --rainbow-sat-percent: 100%;
  --rainbow-light: 60%;
}

/* =========================
   BASE / RESET
   ========================= */

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

html,
body {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  color: var(--text-color);
  background: #000;
  line-height: 1.5;
  overflow-x: hidden;
  position: relative;
}

html.glightbox-open {
  overflow: initial;
}

/* =========================
   LAYOUT + BACKGROUNDS
   ========================= */

main {
  position: relative;
  width: 100%;
}

section.hero-section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* responsive nav behavior */
@media (max-width: 1200px) {
  #inicio {
    padding-top:17rem;
  }
}
#inicio {
  padding-top:10rem;
}

body.preload .bg-layer,
body.preload .bg-video {
  transition: none !important;
}

.bg-stack {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
}

.bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.02);
  transition:
    opacity var(--transition-speed) ease-out,
    transform var(--transition-speed) ease-out;
  will-change: opacity, transform;
}

.bg-layer.is-active {
  opacity: 1;
  transform: scale(1);
}

/* First section has video, so no image */
.bg-inicio {
}

.bg-video {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -2; /* below image layers; section 1 image layer is transparent */
  opacity: 1;
  transition: opacity var(--transition-speed) ease-out;
}

.bg-video.fade-out {
  opacity: 0;
}

/* background images */
.bg-ayuda-tecnica {
  background-image: url("images/backgrounds/blueberries.jpg");
}

.bg-web-codigo {
  background-image: url("images/backgrounds/coloured-flowers-landscape.jpg");
}

.bg-diseno {
  background-image: url("images/backgrounds/blossom-2.jpg");
}

.bg-crecimiento {
  background-image: url("images/backgrounds/mixed-tomatoes.jpg");
}

.bg-formacion {
  background-image: url("images/backgrounds/carrots.jpg");
}

.bg-ingles {
  background-image: url("images/backgrounds/apple-tree-2.jpg");
}

.bg-precios {
  background-image: url("images/backgrounds/kiwis.jpg");
}

.bg-tu-socio-digital {
  background-image: url("images/backgrounds/cherries-landscape.jpg");
}

.bg-contacto {
  background-image: url("images/backgrounds/wild-yellow.jpg");
}

.bg-informacion {
  background-image: url("images/backgrounds/peach.jpg");
}

/* card colour variants */
.content-card.reddark { background: var(--reddark); }
.content-card.redlight { background: var(--redlight); }
.content-card.black { background: var(--black); }
.content-card.purple { background: var(--purple); }
.content-card.pink { background: var(--pink); }
.content-card.green { background: var(--green); }
.content-card.teal { background: var(--teal); }
.content-card.tealdark { background: var(--tealdark); }
.content-card.darkgreen { background: var(--darkgreen); }
.content-card.rust { background: var(--rust); }
.content-card.orange { background: var(--orange); }
.content-card.grape { background: var(--grape); }

/* =========================
   CONTENT CARDS
   ========================= */

.content-card {
  max-width: 900px;
  width: 100%;
  border-radius: 1.25rem;
  padding: 2.5rem 2rem;
  margin: 5rem 1rem;
  backdrop-filter: blur(12px);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media (min-width: 1200px) {
  .content-card {
    padding: 3rem 3.5rem;
    margin: 15rem 1rem;
  }
}

@media (max-height: 550px) {
  .content-card {
    padding: 1.5rem;
  }
}

@media (max-width: 600px) {
  .content-card-with-btn-whatsapp {
    /* allow bottom space so motif doesn't overlap contact button */
    padding-bottom: 120px;
  }
}

.contact-card-motif {
  font-size: 4.5rem;
  position: absolute;
  bottom: 20px;
  right: 20px;
  color: rgba(255, 255, 255, 0.4);
}

.bu_contact-card-image {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 133px;
  height: 100px;
  border-radius: 5px;
}
.contact-card-image {
  width: 100%;
  height: auto;
  border-radius: 5px;
  margin-top: 20px;
}

/* =========================
   TYPOGRAPHY / CONTENT
   ========================= */

h1, h2, h3 {
  font-family: "Capriola", system-ui, sans-serif;
}

h3 {
  margin:  2rem 0 1rem;
  color: var(--accent-color);  
}
.section-kicker {
  display: flex;
}
.kicker-icon {
  flex: 0 0 auto;
  margin-right: 0.5rem;
  text-shadow: 0 0.06em 0.12em rgba(0, 0, 0, 0.35);

/*  background: red;
*/}
.kicker-icon i {
  color: var(--accent-color);
}
.kicker-text {
  flex:  1 1 auto;
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  margin-top: 0.15rem;
  color: rgba(255, 255, 255, 0.8);
}


.section-title {
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 700;
}

.accent-color {
  color: var(--accent-color);
}

.section-content p {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: var(--text-color);
}

/* lists */

.section-content ul {
  margin: 1rem 1rem 1rem 3rem;
}
@media (max-width: 600px) {
  .section-content ul {
    margin: 1rem 0rem 1rem 2rem;
  }
}

.section-content ul.full-width-list {
  list-style: none;
  margin: 1rem;  
}

.section-content ul.full-width-list li {
  padding: 0.6em 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  text-align: center;
}
.section-content ul.full-width-list li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* links */
.section-content p a,
.section-content ul li a {
  color: var(--accent-color);
}

.section-content p a:hover,
.section-content ul li a:hover {
  color: rgba(255, 255, 255, 0.8);
}

.section-actions {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}


/* shaded logo */
.rotaweb-rota {
  color: var(--c3);
}
.rotaweb-web {
  color: var(--c2);
}



/* gradient text */
.gradient-text {
  background: linear-gradient(
    90deg,
    #fa5a41,
    #faa741,
    #faea41 
  );

  -webkit-background-clip: text; /* Safari / Chrome */
  background-clip: text;

  -webkit-text-fill-color: transparent; /* Safari */
  color: transparent;
}


/* animated gradient text */

.animated-gradient-text {
  background-size: 300% 100%;
  animation: gradient-move 3s ease infinite;
}

@keyframes gradient-move {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}







/* =========================
   BUTTONS
   ========================= */
.btn-group {
  margin: 2rem 0;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.5rem;
}

@media (min-width: 600px) {
  .btn-group.btn-group--2 {
    grid-template-columns: repeat(2, 1fr);

  }
  .btn-group.btn-group--3 {
    grid-template-columns: repeat(3, 1fr);
  }  
}


.btn-group .btn {
    background: rgba(0, 0, 0, 0.2);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.7);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  z-index: 2;
  transition:
    background 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.btn:hover {
  filter: brightness(1.06);
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.btn-whatsapp {
  background: #0ba303;
  color: rgba(255,255,255,0.8);
  font-weight: 400;
}

.btn-whatsapp i.fa-whatsapp {
  font-size: 140%;
  font-weight: 700;
}

/* =========================
   HEADER + NAVIGATION
   ========================= */

header.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  height: 3.75rem;
  padding: 0.6rem 1.4rem;

  display: flex;
  align-items: flex-end; /* bottom-align logo + nav inside the bar */
  justify-content: space-between;
  gap: 1.5rem;

  z-index: 30;

  /* continuous smoked bar */
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
}

.site-logo {
  font-weight: 400;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  text-transform: uppercase;
  /*color: rgba(255, 255, 255, 0.8);*/
  font-family: "Capriola", system-ui, sans-serif;
  white-space: nowrap;
  padding: 10px 0;
  background: none;
  border-radius: 0;
  backdrop-filter: none;
  position: relative;
  top: 2px;
}
.site-logo a {
  text-decoration: none;
  color:#fff;
}

.site-nav {
  position: relative;
  top: -2px;
}

/* desktop nav */
.desktop-nav {
  display: flex;
  gap: 1.1rem;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.desktop-nav a {
  position: relative;
  padding: 0.2rem 0.2rem;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
  cursor: pointer;
  transition: color 150ms ease, opacity 150ms ease;
}

.desktop-nav a:hover {
  color: #fff;
}

/* underline indicator */
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.15rem;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  transform: scaleX(0.5);
  transform-origin: center;
  transition: opacity 150ms ease, transform 150ms ease;
}

.desktop-nav a:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

/* language buttons */
button.select-language {
  width: 40px;
  height: 24px;
  padding: 0;
  margin: 1rem;
  opacity: 0.8;
  border: none;
  border-radius: 0;
  transition: opacity 300ms ease-in-out;
  text-decoration: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(0,0,0,0.8);  
}

button.select-language:hover {
  opacity: 1;
}

button.select-language-ingles,
button.select-language-ingles:hover {
  background-image: url("images/flags/uk.svg");
}

button.select-language-espanol,
button.select-language-espanol:hover {
  background-image: url("images/flags/spain.svg");
}

.desktop-nav button.select-language {
  margin: 0;
}

/* hamburger */
.menu-toggle {
  display: none; /* shown only on mobile via media query */
  width: 2.4rem;
  height: 2.4rem;
  /*border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.45);*/
  background:transparent;
  border:none;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.menu-toggle-inner {
  width: 1.3rem;
  height: 1rem;
  position: relative;
}

.menu-toggle-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease, bottom 0.2s ease;
}

.menu-toggle-bar:nth-child(1) { 
  top: 0; 
  /*background:var(--c3);*/
}
.menu-toggle-bar:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
  /*background:var(--c2);*/
}
.menu-toggle-bar:nth-child(3) { 
  bottom: 0; 
  /*background:var(--c1);*/
}

/* X animation */
header.site-header.is-open .menu-toggle-bar:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

header.site-header.is-open .menu-toggle-bar:nth-child(2) {
  opacity: 0;
}

header.site-header.is-open .menu-toggle-bar:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

/* mobile dropdown nav */
.mobile-nav {
  position: absolute;
  top: 100%;
  right: 1.4rem;
  width: 14rem;

  background: rgba(0, 0, 0, 0.92);
  border-radius: 1rem;
  padding: 0.6rem;

  display: flex;
  flex-direction: column;
  gap: 0.4rem;

  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.6);

  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;

  z-index: 29;
}

header.site-header.is-open .mobile-nav {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
}

.mobile-nav .mobile-nav-section {
  margin-bottom: 1rem;
}

.mobile-nav .mobile-nav-section:last-child {
  margin-bottom: 0;
}

.mobile-nav .mobile-nav-section.vertical-list {
  display: flex;
  flex-direction: column;
}

.mobile-nav a {
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.07);

  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
}

.mobile-nav a:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* side-by-side group spacing */
.mobile-nav .mobile-nav-section.side-by-side a {
  margin-right: 0.5rem;
}

.mobile-nav .mobile-nav-section.side-by-side a:last-child {
  margin-right: 0;
}

/* vertical group spacing */
.mobile-nav .mobile-nav-section.vertical-list a {
  margin-bottom: 0.5rem;
}

.mobile-nav .mobile-nav-section.vertical-list a:last-child {
  margin-bottom: 0;
}

/* responsive nav behavior */
@media (max-width: 1200px) {
  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }
}

/* =========================
   FADE / INTRO ANIMATIONS
   ========================= */
/* Intro slide: initial state (NO transition, to prevent reverse animation on first paint) */
.content-card.intro-slide {
  opacity: 0;
  transform: translateY(600px);
  transition: none;
}

/* Transitions only become active once JS marks it ready */
.content-card.intro-slide.is-ready {
  transition:
    opacity 900ms ease-out,
    transform 1800ms cubic-bezier(0.25, 1.2, 0.35, 1);
}

.content-card.intro-slide.is-ready.in {
  opacity: 1;
  transform: translateY(0);
}


footer {
  width: 100%;
  padding: 1rem 3rem 4rem;
  background: rgba(0,20,0,0.8);
  text-align: center;
}

footer a {
  color: rgba(255,255,255,0.7);
}


/* =========================
   LIST ITEM ANIMATIONS
   ========================= */

.animated-list li {
  opacity: 0;
  transition:
    opacity 600ms ease-out,
    transform 700ms cubic-bezier(0.15, 0.85, 0.35, 1),
    color 900ms ease-out 600ms;
}

.animated-list li.done {
  opacity: 1;
  transform: translate(0, 0) !important;
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
}

.animated-list.slide-in-from-left li {
  transform: translateX(-120px);
}

.animated-list.slide-in-from-right li {
  transform: translateX(120px);
}

.animated-list.slide-in-from-top li {
  transform: translateY(-60px);
}

.animated-list.slide-in-from-bottom li {
  transform: translateY(60px);
}

.animated-list.slide-in-bounce li {
  transition:
    opacity 600ms ease-out,
    transform 750ms cubic-bezier(0.25, 1.5, 0.35, 1),
    color 900ms ease-out 600ms;
}

/* Animated items start brighter */
.animated-list li {
  color: #fff;
}


/* =========================
   Gallery Section (in Diseño)
   ========================= */

.gallery-links {

}
.gallery-links h3 {
  margin-bottom: 1rem;
}
.gallery-links .gallery-links-links {
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
}
.gallery-links .gallery-links-links a {
  display: inline-block;
  text-decoration: none;
  background: rgba(255,255,255,0.5);
  padding: 0.5rem ;
}

/* =========================
   TYPEWRITER EFFECT
   ========================= */

.typewriter {
  position: relative;
  display: inline-block;
  /* if any ancestor sets overflow:hidden, this helps too */
  overflow: visible;
}

.typewriter.is-typing::after {
  content: "";
  position: absolute;
  top: 0.1em;
  bottom: 0.1em;
  right: 0;                 /* start here (no negative offset yet) */
  width: 2px;
  background: currentColor; /* always visible */
  opacity: 1;
  animation: tw-blink 0.9s step-end infinite;
  pointer-events: none;
}

.typewriter.is-done::after {
  content: none;
}

@keyframes tw-blink {
  50% { opacity: 0; }
}


/* =========================
   RAINBOW CYCLE TEXT
   ========================= */

.rainbow-cycle {
  display: inline-block;
  animation: rainbowShift var(--rainbow-speed) linear infinite;
}

@keyframes rainbowShift {
  0%   { color: hsl(0,   var(--rainbow-sat-percent), var(--rainbow-light)); }
  25%  { color: hsl(90,  var(--rainbow-sat-percent), var(--rainbow-light)); }
  50%  { color: hsl(180, var(--rainbow-sat-percent), var(--rainbow-light)); }
  75%  { color: hsl(270, var(--rainbow-sat-percent), var(--rainbow-light)); }
  100% { color: hsl(360, var(--rainbow-sat-percent), var(--rainbow-light)); }
}

/* =========================
   ROTATE STARS ON ENTER VIEWPORT
   ========================= */
.rotate-on-load {
  display: inline-block;
  transform-origin: center;
  position: relative;
  top:-2px;
}

.do-rotate {
  animation: spin-and-pop 1.5s ease-out forwards;
}

@keyframes spin-and-pop {
  0%   { transform: rotate(0deg) scale(1); }
  65%  { transform: rotate(360deg) scale(1); }
  80%  { transform: rotate(360deg) scale(1.25); color:#fce8b1; }
  100% { transform: rotate(360deg) scale(1); }
}


/* =========================
   Heading shoot-in (base)
   ========================= */

.heading-shoot-in {
  display: inline-block; /* critical for a span */
  opacity: 0;
  transform: translateX(120px) scale(0.98);
  filter: blur(4px);
  will-change: transform, opacity, filter;
}

/* Triggered by JS */
.heading-shoot-in.is-in {
  animation: headingShootIn 1400ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* =========================
   Keyframes
   ========================= */

@keyframes headingShootIn {
  0% {
    opacity: 0;
    transform: translateX(140px) scale(0.96);
    filter: blur(6px);
  }

  60% {
    opacity: 1;
    transform: translateX(-8px) scale(1.01);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}


/* =========================
   DISPLAY LANGUAGE
   ========================= */

.display-language-ingles {
  display: none;
}

html[lang="es"] .display-language-espanol { display: inline; }
html[lang="es"] .display-language-ingles  { display: none; }

html[lang="en"] .display-language-ingles  { display: inline; }
html[lang="en"] .display-language-espanol { display: none; }



/* =========================
   RAINBOW TEXT EFFECT
   ========================= */

.rainbow-striped-text {
  background: linear-gradient(
    180deg,
    #ff2f2f 0%,     /* bright saturated red */
    #ff8f00 25%,    /* bright orange */
    #ffea00 50%,    /* very bright yellow */
    #33e07a 75%,    /* bright green */
    #33e07a 100%
  );

  background-size: 100% 100%;
  background-repeat: no-repeat;

  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;

  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;

text-shadow: 0 0.06em 0.12em rgba(255,255, 255, 0.35);

}