/* ===========================================================
   PEPE SEVILLA · tema vibrante (referencia) — override del template
   Paleta: navy profundo + gradientes lava/amarillo/coral y verde→morado
   =========================================================== */

:root {
  /* base navy (nunca negro puro) */
  --template-bg: #0B0F24;
  --template-color: #FFFFFF;

  /* texto */
  --primary-color: #A9AFCB;     /* body, gris cool */

  /* acentos de marca */
  --secondary-color: #FF6A3D;   /* lava-coral */
  --tertiary-color: #2FD3A6;    /* mint */
  --septenary-color: #7A5CFF;   /* morado */
  --octonary-color: #FFC53D;    /* amarillo cálido */

  /* superficies (paneles / cards) */
  --quaternary-color: #121733;
  --quinary-color: #161D3C;
  --senary-color: #1B2347;

  /* gradientes firma */
  --grad-warm: linear-gradient(135deg, #FFC53D 0%, #FF6A3D 50%, #FF3D77 100%);
  --grad-cool: linear-gradient(135deg, #2FD3A6 0%, #4C7DFF 55%, #7A5CFF 100%);
  --grad-hero: linear-gradient(120deg, #FFC53D 0%, #FF6A3D 45%, #FF3D77 75%, #7A5CFF 100%);

  --radius-card: 26px;
  --ease-soft: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- fondo con blobs sutiles (eco de la referencia) ---------- */
body {
  background-color: var(--template-bg);
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 12% 8%, rgba(255, 138, 61, .16), transparent 70%),
    radial-gradient(closest-side at 88% 18%, rgba(122, 92, 255, .16), transparent 70%),
    radial-gradient(closest-side at 78% 88%, rgba(47, 211, 166, .12), transparent 70%);
}
.page-wrapper { position: relative; z-index: 1; }

/* ---------- HERO a pantalla completa ---------- */
.hero {
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  padding-top: 170px;
  padding-bottom: 80px;
}
/* el hero está arriba del fold: garantizamos que su contenido sea
   visible aunque la animación de scroll no dispare al cargar */
.hero .fade-up { opacity: 1 !important; }
/* nombre / palabra de marca y acento del CTA — color sólido vibrante
   (NO gradiente con clip: estos titulares usan animación por caracteres
    y el clip los volvería invisibles) */
.hero .secondary-text,
.cta__inner .primary-text {
  color: var(--secondary-color);
}
/* badge superior del hero */
.hero__intro .sub-title { color: var(--tertiary-color); letter-spacing: .14em; }

/* contadores con números cálidos (color sólido, el odometer anida spans) */
.counter__content .title-lg,
.counter__content .odometer,
.counter__content .prefix {
  color: var(--octonary-color);
}

/* ---------- sub-títulos de sección con gradiente ---------- */
.sub-title.tertiary-text {
  background: var(--grad-cool);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- CARDS / paneles ---------- */
.service__single,
.pricing__single,
.pricing__sidebar,
.experience__single-content,
.portfolio__single-inner,
.contact__form,
.contact__info-single {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-card);
  backdrop-filter: blur(6px);
  transition: transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft), border-color .4s var(--ease-soft);
}
.service__single { padding: 32px; }
.service__single:hover,
.portfolio__single-inner:hover,
.pricing__single:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 106, 61, .45);
  box-shadow: 0 24px 60px -24px rgba(255, 106, 61, .35);
}

/* card destacada (workshop) con borde cálido */
.pricing__single.active {
  background: linear-gradient(180deg, rgba(255, 106, 61, .14), rgba(122, 92, 255, .10));
  border-color: rgba(255, 197, 61, .5);
}
.pricing__single .thumb .title-lg {
  background: var(--grad-warm);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

/* número de servicio (01/02/03) con gradiente translúcido */
.service__thumb .bg-text {
  background: var(--grad-cool);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: transparent; opacity: .35;
}

/* ---------- BOTONES ---------- */
.btn-primary,
.btn--secondary,
.btn-anim {
  border-radius: 40px !important;
}
/* CTA principal: pill con gradiente cálido */
.btn-primary {
  background: var(--grad-warm) !important;
  color: #1A1206 !important;
  border: none !important;
  font-weight: 600;
  box-shadow: 0 14px 34px -14px rgba(255, 106, 61, .6);
}
.btn-primary .btn-animated-text,
.btn-primary .btn-icon i { color: #1A1206 !important; }
.btn-primary:hover { transform: translateY(-2px); filter: saturate(1.05); }

/* botón secundario / "Cotizar" relleno animado */
.btn--secondary::after { background: var(--grad-cool) !important; }
.btn--secondary { border-color: rgba(255, 255, 255, .22) !important; }

/* ---------- experiencia / timeline ---------- */
.experience__single-content { padding: 24px 26px; }
.experience .line .circle { background: var(--secondary-color); }
.experience__content-intro .secondary-text { color: var(--secondary-color); }
.experience__content-intro .tertiary-text { color: var(--tertiary-color); }

/* ---------- marquee ---------- */
.marquee__single .title-lg a { color: var(--octonary-color); }
.marquee__single.stroke-text .title-lg a {
  -webkit-text-stroke: 1px rgba(255, 197, 61, .55);
  color: transparent;
}

/* ---------- redes ---------- */
.social a {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  transition: all .35s var(--ease-soft);
}
.social a:hover {
  background: var(--grad-warm);
  border-color: transparent;
  color: #1A1206;
  transform: translateY(-3px);
}

/* ---------- contacto ---------- */
.contact__info-single { padding: 22px 24px; }
.contact__info-single .thumb i { color: var(--secondary-color); }
.contact__form input,
.contact__form textarea,
.contact__form .nice-select {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 14px !important;
  color: #fff !important;
}
.contact__form input:focus,
.contact__form textarea:focus {
  border-color: var(--secondary-color) !important;
}

/* ---------- footer wordmark con gradiente ---------- */
.footer__intro .pulse-text {
  background: var(--grad-hero);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- VIDEOS ---------- */
.video-grid { row-gap: 24px; }
.video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 20px 50px -28px rgba(122, 92, 255, .45);
  background: #000;
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- COTIZADOR ---------- */
.cotizador { width: 100%; }
.cz-row { display: flex; justify-content: space-between; align-items: baseline; }
.cz-mins { color: #fff; font-size: 1.05rem; }
.cz-mins strong { color: var(--octonary-color); font-size: 1.4rem; }
.cz-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px; border-radius: 10px; margin-top: 14px;
  background: linear-gradient(90deg, #FF6A3D 0%, #FFC53D 25%, rgba(255,255,255,.12) 25%);
  outline: none; cursor: pointer;
}
.cz-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--grad-warm);
  border: 3px solid #0B0F24;
  box-shadow: 0 6px 16px -4px rgba(255,106,61,.7);
  cursor: pointer;
}
.cz-range::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: #FF6A3D; border: 3px solid #0B0F24; cursor: pointer;
}
.cz-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: .8rem; color: var(--primary-color); }
.cz-total {
  font-family: var(--heading-font); font-weight: 700; font-size: 3rem; line-height: 1;
  background: var(--grad-warm);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.cz-note { color: var(--primary-color); font-size: .9rem; margin-top: 8px; }
.cz-terms { display: flex; flex-wrap: wrap; gap: 8px; }
.cz-terms span {
  font-size: .78rem; color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 6px 12px; border-radius: 30px;
}

/* ---------- scrollbar fina ---------- */
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: #0B0F24; }
::-webkit-scrollbar-thumb { background: linear-gradient(#FF6A3D, #7A5CFF); border-radius: 10px; }

/* ---------- responsive: hero un poco más compacto en móvil ---------- */
@media (max-width: 767px) {
  .hero { min-height: 100svh; padding-top: 120px; }
}