/**
* josesimon.me — site overrides
*
* Deltas on top of the Workfolio template (assets/css/main.css).
* v1 has no Sass build step, so these rules live here instead of in
* assets/scss/. Do not edit main.css directly: keeping it untouched
* makes future template updates possible.
*/

/*--------------------------------------------------------------
# Header identity
# The template used <h1 class="sitename"> in the logo. The page must
# have a single <h1> (the hero), so the logo is now a <span>.
--------------------------------------------------------------*/
.header .logo .sitename {
  font-size: 24px;
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--heading-color);
  line-height: 1.2;
}

.header .logo .logo-role {
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid color-mix(in srgb, var(--default-color) 22%, transparent);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--default-color) 80%, transparent);
  white-space: nowrap;
}

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
.hero .role-line {
  margin: 0 0 22px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-color);
}

.hero .focus-line {
  margin: 26px 0 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color) 65%, transparent);
}

.hero .actions {
  margin-top: 34px;
}

.hero .location-line {
  margin: 30px 0 0;
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color) 75%, transparent);
}

.hero .location-line i {
  margin-right: 6px;
  color: var(--accent-color);
}

@media (max-width: 575px) {
  .hero .role-line {
    font-size: 12px;
    letter-spacing: 0.1em;
  }
}

/*--------------------------------------------------------------
# Enterprise / industry strip
# Replaces the original client-logo row with text labels, keeping
# the same horizontal rhythm.
--------------------------------------------------------------*/
.clients .industry-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.clients .industry-strip li {
  position: relative;
  font-family: var(--heading-font);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--default-color) 78%, transparent);
  transition: color 0.3s ease;
}

.clients .industry-strip li:hover {
  color: var(--heading-color);
}

.clients .industry-strip li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -21px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--default-color) 35%, transparent);
}

@media (max-width: 767px) {
  .clients .industry-strip {
    gap: 12px 26px;
  }

  .clients .industry-strip li {
    font-size: 15px;
  }

  .clients .industry-strip li:not(:last-child)::after {
    right: -15px;
  }
}

/*--------------------------------------------------------------
# About — proof points
# The template animated numeric counters. These markers are not all
# numbers, so they are static text in the same visual slot.
--------------------------------------------------------------*/
.about .counters .counter .figure {
  display: block;
  font-size: 40px;
  font-weight: 700;
  font-family: var(--heading-font);
  color: var(--accent-color);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

@media (max-width: 1199px) {
  .about .counters .counter .figure {
    font-size: 32px;
  }
}

@media (max-width: 575px) {
  .about .counters .counter {
    padding: 24px 10px;
  }

  .about .counters .counter .figure {
    font-size: 26px;
  }
}

/*--------------------------------------------------------------
# Section title — optional third line
--------------------------------------------------------------*/
.section-title p.section-note {
  margin-top: 10px;
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color) 70%, transparent);
}

/*--------------------------------------------------------------
# What I Do
# The rows are no longer links (this section explains scope, it is
# not a service catalog), so the interactive affordances are off.
--------------------------------------------------------------*/
.services .service-rows .row-item {
  cursor: default;
}

.services .service-rows .row-item:hover {
  transform: none;
  padding-left: 8px;
  background: none;
}

/*--------------------------------------------------------------
# Experience — single column of career stages
--------------------------------------------------------------*/
.experience .timeline .item .year {
  font-family: var(--heading-font);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.experience .timeline .item p+p {
  margin-top: 12px;
}

/*--------------------------------------------------------------
# Areas of Experience
# Replaces the percentage bars. Same chip language as the template,
# sized to carry the right-hand column on its own.
--------------------------------------------------------------*/
.skills .area-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.skills .area-chips li {
  padding: 13px 22px;
  border-radius: 26px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color) 12%, transparent);
  font-size: 15px;
  font-weight: 500;
  color: var(--heading-color);
  transition: border-color 0.3s ease;
}

.skills .area-chips li:hover {
  border-color: color-mix(in srgb, var(--accent-color) 55%, transparent);
}

@media (max-width: 575px) {
  .skills .area-chips li {
    padding: 11px 18px;
    font-size: 14px;
  }
}

/*--------------------------------------------------------------
# Selected Work — 2x2 grid
# The template stacked full-width alternating rows. These cases are
# categories rather than single projects, so they read better as a grid.
--------------------------------------------------------------*/
.portfolio .case-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: 22px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color) 8%, transparent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.portfolio .case-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
}

.portfolio .case-card .shot {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: none;
}

.portfolio .case-card .shot img {
  width: 100%;
  height: auto;
  display: block;
}

.portfolio .case-card .copy {
  padding: 26px 8px 8px;
}

.portfolio .case-card .copy h3 {
  font-size: 24px;
  line-height: 1.3;
}

.portfolio .case-card .copy p {
  margin-bottom: 0;
  font-size: 16px;
}

@media (max-width: 575px) {
  .portfolio .case-card .copy h3 {
    font-size: 21px;
  }
}

/*--------------------------------------------------------------
# Things I've Built
# Reuses the card shell from the template's testimonial component
# with the testimonial-specific decoration removed.
--------------------------------------------------------------*/
.testimonials .built-card {
  display: flex;
  flex-direction: column;
  padding: 30px 26px;
}

.testimonials .built-card h3 {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--heading-color);
}

.testimonials .built-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--default-color);
}

/*--------------------------------------------------------------
# CTA
--------------------------------------------------------------*/
.cta .cta-center .note i {
  margin-right: 6px;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer .footer-about .descriptor {
  margin: 14px 0 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--heading-color);
}

.footer .footer-about .focus {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color) 65%, transparent);
}

.footer .footer-contact a {
  color: var(--default-color);
}

.footer .footer-contact a:hover {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/*--------------------------------------------------------------
# Contact form
# El honeypot se oculta fuera de pantalla, no con display:none, para
# que los bots lo completen.
--------------------------------------------------------------*/
.gss-hp {
  position: absolute;
  inset-inline-start: -9999px;
  height: 0;
  overflow: hidden;
}

.contact .form-status {
  min-height: 24px;
  margin: 16px 0 0;
  font-size: 15px;
}

.contact .form-status.is-ok {
  color: var(--accent-color);
}

.contact .form-status.is-error {
  color: #ff8080;
}

.contact .btn-submit[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}

/*--------------------------------------------------------------
# Footer — evitar que la última palabra quede sola en su línea
--------------------------------------------------------------*/
.footer .footer-about .descriptor,
.footer .footer-about .focus {
  text-wrap: balance;
}

/*--------------------------------------------------------------
# Conmutador de idioma
--------------------------------------------------------------*/
.header-actions {
  gap: 18px;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.lang-switch a,
.lang-switch .is-current {
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.lang-switch .is-current {
  background: color-mix(in srgb, var(--accent-color) 16%, transparent);
  color: var(--accent-color);
}

.lang-switch a {
  color: color-mix(in srgb, var(--default-color) 70%, transparent);
}

.lang-switch a:hover {
  color: var(--heading-color);
  background: color-mix(in srgb, var(--default-color) 10%, transparent);
}

@media (max-width: 1199px) {
  .header-actions {
    gap: 10px;
  }
}

/*--------------------------------------------------------------
# Menú móvil
# La plantilla usaba un <i>, que no es enfocable por teclado. Ahora
# es un <button> que lleva las mismas clases de icono, para que el
# intercambio bi-list/bi-x del JS siga funcionando.
--------------------------------------------------------------*/
button.mobile-nav-toggle {
  background: none;
  border: 0;
  padding: 0;
  line-height: 1;
  cursor: pointer;
}