/*
  Taller — Nueva Edición
  Visual redesign override layer
  Loaded after main.css to freshen the look while keeping core structure intact.
*/

/* -------------------------------------------------------
   NEW FONTS
   Cormorant Garamond  → elegant editorial serif headings
   Jost                → clean geometric sans body
------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Jost:wght@200;300;400;500;600;700&display=swap');

/* -------------------------------------------------------
   DESIGN TOKENS
------------------------------------------------------- */
:root {
  --bg-primary:    #0c0b0e;
  --bg-section:    #16131e;
  --bg-card:       #1d1927;
  --accent:        #c9a84c;
  --accent-dim:    rgba(201, 168, 76, 0.18);
  --accent-light:  #dfc16a;
  --text-primary:  #ede9e0;
  --text-muted:    #9a9288;
  --border:        rgba(201, 168, 76, 0.28);
  --border-light:  rgba(237, 233, 224, 0.12);
}

/* -------------------------------------------------------
   BASE
------------------------------------------------------- */
html, body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: "Jost", sans-serif;
  font-weight: 300;
}

body {
  background: var(--bg-primary);
}

/* Transition background reset */
body, .hero-started:before, .section-bg {
  background: var(--bg-primary);
}

/* -------------------------------------------------------
   TYPOGRAPHY — NEW FONTS
------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: "Cormorant Garamond", serif;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

h3 {
  font-size: 44px;
}

h4 {
  font-size: 32px;
}

p {
  font-family: "Jost", sans-serif;
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1.75;
  font-weight: 300;
}

strong {
  font-weight: 600;
  color: var(--text-primary);
}

input, textarea, button {
  font-family: "Jost", sans-serif;
}

label, legend {
  font-family: "Jost", sans-serif;
  font-size: 16px;
  letter-spacing: 0.05em;
}

/* -------------------------------------------------------
   LINKS & ACCENT COLOR
------------------------------------------------------- */
a,
a:link,
a:active,
a:visited {
  color: var(--accent);
}

a:hover {
  color: var(--accent-light);
}

/* -------------------------------------------------------
   SECTION BACKGROUNDS
------------------------------------------------------- */
.section-bg {
  background: var(--bg-section) !important;
}

.section.section-inner {
  background: var(--bg-section);
}

.section.section-inner.started-heading {
  background: var(--bg-section);
}

/* -------------------------------------------------------
   VERTICAL LINE / DIVIDERS
------------------------------------------------------- */
.vertical-line {
  border-left: 1px solid var(--border);
}

.fw-row .fw-col-right {
  border-left: 1px solid var(--border);
}

/* -------------------------------------------------------
   BUTTONS — sharp, refined, gold-bordered
------------------------------------------------------- */
a.btn, .btn, a.btn-link, .btn-link,
button, input[type="submit"] {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-color: var(--accent);
  color: var(--text-primary);
  border-radius: 0;
  -webkit-border-radius: 0;
  height: 52px;
  line-height: 50px;
  padding: 0 52px;
}

a.btn:before, .btn:before, a.btn-link:before, .btn-link:before, button:before {
  background: var(--accent);
}

a.btn:hover, .btn:hover, a.btn-link:hover, .btn-link:hover {
  color: var(--bg-primary);
}

button, input[type="submit"] {
  background: var(--accent);
  color: var(--bg-primary);
}

/* -------------------------------------------------------
   FORM INPUTS
------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="tel"],
input[type="address"],
input[type="number"],
textarea {
  font-family: "Jost", sans-serif;
  font-size: 16px;
  border-color: var(--border);
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}

input:focus, textarea:focus {
  border-color: var(--accent);
}

::-webkit-input-placeholder { color: rgba(154, 146, 136, 0.6); }
::-moz-placeholder          { color: rgba(154, 146, 136, 0.6); }
:-moz-placeholder            { color: rgba(154, 146, 136, 0.6); }
:-ms-input-placeholder       { color: rgba(154, 146, 136, 0.6); }

/* -------------------------------------------------------
   PRELOADER
------------------------------------------------------- */
.preloader:before {
  background: var(--bg-primary);
}

.preloader .spinner {
  background: var(--accent);
}

.preloader .spinner.spinner-line {
  background: var(--accent);
}

.preloader .spinner-dot {
  background: rgba(201, 168, 76, 0.15);
}

/* -------------------------------------------------------
   HERO SECTION
------------------------------------------------------- */
.hero-started {
  padding-top: 220px;
}

.hero-started:before {
  background: var(--bg-section);
}

/* Hero logo — sits in the blank area above content on desktop */
.hero-logo {
  position: absolute;
  top: 30px;
  left: 0;
  z-index: 20;
}

.hero-logo img {
  max-width: 180px;
  height: auto;
}



/* Hero title — let Cormorant Garamond's elegance shine */
.hero-started .title {
  font-family: "Cormorant Garamond", serif;
  font-size: 124px;
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 16px 0 36px 0;
}

/* Subtitle — small-caps label style */
.hero-started .subtitle {
  font-family: "Jost", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 1;
}

/* Description side block */
.hero-started .description {
  font-family: "Jost", sans-serif;
  font-size: 17px;
  font-weight: 300;
  color: var(--text-muted);
  border-left: 1px solid var(--border);
  padding: 36px 0 36px 36px;
  margin-left: 90px;
}

/* Info row at bottom of hero */
.hero-started .info-list ul li {
  font-family: "Jost", sans-serif;
  font-size: 26px;
  font-weight: 300;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.hero-started .info-list ul li strong {
  display: block;
  font-family: "Jost", sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 5px;
}

/* Hero image — slight warm tint to complement palette */
.hero-started .slide img {
  filter: sepia(12%) contrast(1.04) brightness(0.96);
  border-radius: 12px;
  -webkit-border-radius: 12px;
  transform: rotate(6deg);
}

/* -------------------------------------------------------
   SECTION TITLES (.p-title)
   New treatment: tiny spaced-out uppercase label with gold line
------------------------------------------------------- */
.p-title {
  font-family: "Jost", sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 0;
  margin-bottom: 56px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

/* -------------------------------------------------------
   PROFILE / TEXT BODY
------------------------------------------------------- */
.profile-box .text,
.text {
  color: var(--text-primary);
}

.profile-box .text p,
.text p {
  font-family: "Jost", sans-serif;
  font-size: 18px;
  line-height: 1.75;
  font-weight: 300;
  color: var(--text-primary);
}

.text li {
  font-family: "Jost", sans-serif;
  font-size: 18px;
  color: var(--text-primary);
}

.text ul {
  color: var(--text-muted);
}

/* -------------------------------------------------------
   NUMBERS / ICONS
------------------------------------------------------- */
.numbers-item .icon {
  color: var(--accent);
}

.numbers-item .num {
  font-family: "Cormorant Garamond", serif;
  font-size: 34px;
  font-weight: 500;
}

.numbers-item .title {
  font-family: "Jost", sans-serif;
  font-size: 15px;
  color: var(--text-muted);
}

.contacts-items .numbers-item .num {
  font-family: "Jost", sans-serif;
  font-size: 16px;
  font-weight: 300;
}

/* -------------------------------------------------------
   TESTIMONIAL / PROFILE IMAGES
------------------------------------------------------- */
.testimonials-item .image {
  display: inline-block;
  margin-bottom: 20px;
  width: 140px;
  height: 140px;
}

.testimonials-item .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  filter: sepia(10%) contrast(1.05);
  border: 2px solid var(--border);
}

/* -------------------------------------------------------
   CURSOR
------------------------------------------------------- */
.cursor {
  background: rgba(201, 168, 76, 0.18);
  border-color: transparent;
}

.cursor.cursor-zoom {
  border-color: rgba(201, 168, 76, 0.45);
}

/* -------------------------------------------------------
   HEADER
------------------------------------------------------- */
.header.sticky .navbar.default:before,
body.light-skin .header.sticky .navbar.default:before {
  background: rgba(12, 11, 14, 0.96);
}

@media screen and (max-width: 1200px) {
  .header.sticky {
    background: var(--bg-primary);
  }
}

/* -------------------------------------------------------
   FOOTER
------------------------------------------------------- */
.footer .copyright-text,
.footer .footer-heading {
  color: var(--text-muted);
}

.footer .copyright-text a,
.footer .footer-heading a {
  color: var(--text-primary);
}

.footer .copyright-text a:hover,
.footer .footer-heading a:hover {
  color: var(--accent);
}

/* -------------------------------------------------------
   SOCIAL LINKS
------------------------------------------------------- */
.social-links a {
  color: var(--text-primary);
}

.social-links a:hover {
  color: var(--accent);
}

.menu-social-links a {
  color: var(--text-primary);
}

.menu-social-links a:hover i {
  color: var(--accent);
}

/* -------------------------------------------------------
   MENU FULL OVERLAY
------------------------------------------------------- */
.menu-full-overlay:before {
  background: var(--bg-primary);
}

.menu-full ul li a:hover .char,
.menu-full ul li a:hover .word {
  color: var(--accent);
}

.menu-full ul li.active > a,
.menu-full ul li ul li.active > a {
  color: var(--accent);
}

/* -------------------------------------------------------
   SECTION LAYOUT TWEAKS
------------------------------------------------------- */
.section {
  padding: 140px 0;
}

.row.row-custom .col-xs-12 {
  padding: 50px 60px;
}

/* -------------------------------------------------------
   ALERT SUCCESS (form confirmation)
------------------------------------------------------- */
.alert-success {
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid var(--border);
  padding: 30px 40px;
  border-radius: 0;
}

/* -------------------------------------------------------
   BLOG ITEMS — overlay color update
------------------------------------------------------- */
.blog-items .archive-item .image:before,
.blog-items .archive-item .image:after {
  background: var(--bg-primary);
}

/* -------------------------------------------------------
   SKILLS DOTS
------------------------------------------------------- */
.skills-item .dots .dot {
  background: var(--bg-section);
}

.skills-item .value .num {
  background: var(--accent);
  color: var(--bg-primary);
}

/* -------------------------------------------------------
   PRICING CARDS
------------------------------------------------------- */
.pricing-item {
  background: var(--bg-card);
  border-radius: 0;
}

/* -------------------------------------------------------
   BLOCKQUOTE
------------------------------------------------------- */
.block-quote,
blockquote {
  border-left: 1px solid var(--border);
  color: var(--text-muted);
}

/* -------------------------------------------------------
   HERO DECORATIVE CIRCLES — color update via filter tricks
   The actual fill colors are controlled inline in the SVG,
   but we add subtle animation to make them feel new.
------------------------------------------------------- */
.hero-started .slide .circle svg {
  opacity: 0.92;
}

.hero-started .slide .circle.circle-1 svg {
  animation: pulse-circle 8s ease-in-out infinite;
}

.hero-started .slide .circle.circle-2 svg {
  animation: pulse-circle 10s ease-in-out infinite reverse;
}

@keyframes pulse-circle {
  0%   { transform: scale(1);    opacity: 0.85; }
  50%  { transform: scale(1.03); opacity: 1;    }
  100% { transform: scale(1);    opacity: 0.85; }
}

/* -------------------------------------------------------
   RESPONSIVE OVERRIDES
------------------------------------------------------- */

/* Mobile: show titles before the image */
@media screen and (max-width: 920px) {
  .hero-logo {
    position: relative;
    top: auto;
    left: auto;
    order: 0;
    text-align: center;
    padding: 24px 0 8px;
  }
  .hero-started {
    display: flex;
    flex-direction: column;
    padding-top: 0;
  }
  .hero-started .content {
    order: 1;
    margin-top: 0 !important;
  }
  .hero-started .slide {
    order: 2;
    /* Kill the transform so layout height matches visual height */
    transform: none;
    /* Override fixed dimensions to be responsive */
    width: 100%;
    height: auto;
    left: auto;
    right: auto;
    margin-left: 0;
    position: relative;
  }
  .hero-started .slide img {
    position: relative;
    height: auto;
    border-radius: 0;
    -webkit-border-radius: 0;
  }
  .hero-started .info-list {
    order: 3;
  }
}

@media screen and (max-width: 720px) {
  .hero-started .title {
    font-size: 68px;
    letter-spacing: -0.01em;
  }

  .hero-started .subtitle {
    font-size: 13px;
  }

  h3 {
    font-size: 36px;
  }
}