/* ============================================================
   DO EVOLUTION — brand stylesheet
   Paleta tomada del diseño original:
   verde lima vibrante + negro + blanco + acentos hoja/amarillo
   ============================================================ */

:root {
  --lime: #a6c815;          /* verde lima principal */
  --lime-deep: #7fa50e;     /* lima oscuro, bordes del degradado */
  --lime-dark: #4e6a08;     /* sombras del fondo grunge */
  --ink: #111111;           /* negro de marca */
  --paper: #ffffff;
  --leaf: #5ea832;          /* verde hoja del logo */
  --gold: #f2b705;          /* amarillo de las flores */
  --font-display: "Saira Condensed", sans-serif;
  --font-body: "Inter", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 68px; }
html, body { overflow-x: clip; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--lime);
  line-height: 1.6;
}

.section--contact {
  background: url("hero-background.jpg") center center / cover no-repeat;
}

.hero {
  background: url("hero-background.jpg") center center / cover no-repeat;
}

#trabajos {
  background: url("background-work.jpg") center center / cover no-repeat;
}
#trabajos .section__title span {
  background: var(--ink);
  color: var(--paper);
  padding: 0.15rem 1.1rem 0.3rem;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
#trabajos .section__lead {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  opacity: 1;
  padding: 0.45rem 1rem;
  border-radius: 6px;
  border-left: 3px solid var(--lime);
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.hero p,
#trabajos p,
#trabajos figcaption { font-weight: 700; }

.logo-svg { display: block; width: 100%; height: auto; }

/* ===== NAV ===== */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 5vw;
  background: var(--ink);
  color: var(--paper);
}
.nav__brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--paper); }
.nav__logo { width: 38px; }
.nav__logo img { display: block; width: 100%; height: auto; }
.nav__name { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: 0.04em; }
.nav__name em { color: var(--lime); font-style: italic; }
.nav__links { display: flex; gap: 1.6rem; align-items: center; }
.nav__links a {
  color: var(--paper); text-decoration: none;
  font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.nav__links a:hover { color: var(--lime); }
.nav__cta {
  background: var(--lime); color: var(--ink) !important;
  padding: 0.35rem 1.1rem; border-radius: 3px; font-weight: 600;
}
.nav__cta:hover { background: var(--gold); color: var(--ink) !important; }
.lang-toggle {
  background: none;
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.55);
  font-family: var(--font-display); font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.55rem; border-radius: 3px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.lang-toggle:hover { color: var(--lime); border-color: var(--lime); }

/* ===== HERO ===== */
.hero {
  min-height: 88vh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 4rem 5vw;
}

/* Lockup: logo circular centrado sobre banda negra ancha */
.hero__lockup { display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 800px; width: 100%; margin: 0 auto; }
.hero__logo {
  width: clamp(130px, 22vw, 210px); flex-shrink: 0; z-index: 2;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.35));
}
.hero__logo img { display: block; width: 100%; height: auto; }

.hero__banner {
  margin-top: -2.2rem;
  width: 100%;
  text-align: center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 9px),
    var(--ink);
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 10px;
  padding: 3.2rem clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 1.8rem);
  box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}
.hero__banner h1 {
  font-family: var(--font-display);
  font-style: normal; font-weight: 700;
  font-size: clamp(2rem, 6vw, 4.2rem);
  color: var(--paper);
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow: 0 3px 8px rgba(0,0,0,0.6);
}
.hero__banner h1 em { color: var(--lime); font-style: italic; }

.hero__tagline {
  margin-top: 2.2rem;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: #1d2a05;
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
  max-width: 40rem;
}
.hero__actions { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

.btn {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none;
  padding: 0.7rem 1.8rem; border-radius: 4px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.3); }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--light { background: var(--paper); color: var(--ink); }

/* ===== SECCIONES ===== */
.section { padding: 5rem 5vw; }
.section--dark { background: var(--ink); color: var(--paper); }
.section__inner { max-width: 1100px; margin: 0 auto; }
.section__inner--narrow { max-width: 720px; text-align: center; }

.section__title {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 2.5rem;
}
.section__title span { border-bottom: 5px solid var(--lime); padding-bottom: 0.2rem; }
.section--dark .section__title span { border-color: var(--lime); }
.section__lead { font-size: 1.15rem; margin: -1.5rem 0 2.5rem; opacity: 0.85; }

/* Servicios */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.4rem; }
.card {
  background: #1c1c1c;
  border: 1px solid #2e2e2e;
  border-top: 4px solid var(--lime);
  border-radius: 8px;
  padding: 1.8rem 1.5rem;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.card:hover { transform: translateY(-4px); border-top-color: var(--gold); }
.card__icon { font-size: 1.8rem; color: var(--lime); margin-bottom: 0.8rem; }
.card h3 { font-family: var(--font-display); font-size: 1.5rem; font-style: italic; margin-bottom: 0.6rem; letter-spacing: 0.03em; }
.card p { font-size: 0.95rem; color: #c9c9c9; }
.card--soon { opacity: 0.75; }
.badge {
  display: inline-block; background: var(--gold); color: var(--ink);
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.15rem 0.5rem; border-radius: 3px; margin-left: 0.3rem;
}

/* Trabajos */
.grid-portfolio { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; }
.work { margin: 0; }
.work__thumb {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(166,200,21,0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.work:hover .work__thumb {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}
.work figcaption {
  display: inline-block;
  margin-top: 0.6rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.85rem;
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  border-left: 3px solid var(--lime);
  letter-spacing: 0.02em;
}

/* Proceso */
.steps { list-style: none; counter-reset: paso; display: grid; gap: 1.2rem; max-width: 760px; }
.steps li { counter-increment: paso; display: flex; gap: 1.1rem; align-items: baseline; font-size: 1.05rem; color: #ddd; }
.steps li::before {
  content: counter(paso, decimal-leading-zero);
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: 1.9rem; color: var(--lime); flex-shrink: 0;
}
.steps strong { color: var(--paper); }

/* Contacto */
.contact__links { display: flex; flex-wrap: nowrap; gap: 0.7rem; justify-content: center; margin-top: 1rem; }
@media (max-width: 860px) {
  .contact__links { flex-wrap: wrap; gap: 1rem; }
}
.section--contact .section__inner { max-width: 1000px; }
.contact__item {
  background: var(--ink); color: var(--paper); text-decoration: none;
  font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.04em;
  padding: 0.8rem 1.2rem; border-radius: 6px; white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease;
}
.contact__item:hover { transform: translateY(-2px); background: #000; color: var(--lime); }

/* Contact form */
.contact-form {
  margin-top: 2.8rem;
  background: rgba(12,14,6,0.72);
  border: 1px solid rgba(166,200,21,0.2);
  border-radius: 16px;
  padding: 2.4rem 2rem;
  text-align: left;
}
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.cf-field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.2rem; }
.cf-field:last-of-type { margin-bottom: 0; }
.cf-field label {
  font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--lime);
}
.cf-field input,
.cf-field select,
.cf-field textarea {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: var(--paper);
  font-family: var(--font-body); font-size: 1rem;
  padding: 0.85rem 1.1rem;
  transition: border-color 0.15s, background 0.15s;
  outline: none;
  width: 100%;
}
.cf-field input::placeholder,
.cf-field textarea::placeholder { color: rgba(255,255,255,0.3); }
/* Menú desplegable: rampa de tonos que se lee como degradado al abrir */
.cf-field select option { background: #0b0f05; color: var(--paper); }
.cf-field select option:nth-child(2) { background: #0e1407; }
.cf-field select option:nth-child(3) { background: #111908; }
.cf-field select option:nth-child(4) { background: #141e0a; }
.cf-field select option:nth-child(5) { background: #17230b; }
.cf-field select option:nth-child(6) { background: #1a280d; }
.cf-field select option:nth-child(7) { background: #1d2d0e; }

.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
  border-color: var(--lime);
  background: rgba(166,200,21,0.07);
}
.cf-field select {
  appearance: none;
  -webkit-appearance: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a6c815' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 1.2rem center / 14px no-repeat,
    linear-gradient(135deg, #0b0d05 0%, #141d08 55%, #1c2b0c 100%);
  padding-right: 3rem;
  cursor: pointer;
}
.cf-field select:focus {
  border-color: var(--lime);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a6c815' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 1.2rem center / 14px no-repeat,
    linear-gradient(135deg, #0f1207 0%, #1a260b 55%, #24380f 100%);
}

/* Navegadores con popup estilizable: degradado real en el panel */
@supports selector(::picker(select)) {
  .cf-field select { appearance: base-select; }
  .cf-field select::picker-icon { display: none; }
  .cf-field select::picker(select) {
    appearance: base-select;
    background: linear-gradient(165deg, #0b0f05 0%, #141e0a 55%, #1f300e 100%);
    border: 1px solid rgba(166,200,21,0.3);
    border-radius: 10px;
    padding: 0.3rem;
  }
  .cf-field select::picker(select) option { background: transparent; padding: 0.55rem 0.9rem; border-radius: 6px; }
  .cf-field select::picker(select) option:hover,
  .cf-field select::picker(select) option:focus { background: rgba(166,200,21,0.16); }
  .cf-field select::picker(select) option:checked { color: var(--lime); }
}
.cf-field textarea { resize: vertical; min-height: 130px; }
.cf-submit {
  margin-top: 1.6rem;
  display: inline-flex; align-items: center; gap: 0.7rem;
  background: var(--lime); color: var(--ink);
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: none; border-radius: 10px;
  padding: 1rem 2rem; cursor: pointer;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 6px 24px rgba(166,200,21,0.25);
}
.cf-submit:hover { background: var(--gold); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(242,183,5,0.3); }
.cf-submit__arrow { transition: transform 0.2s; }
.cf-submit:hover .cf-submit__arrow { transform: translateX(4px); }
.cf-success {
  display: none; margin-top: 1.2rem;
  color: var(--lime); font-weight: 600; font-size: 1rem;
}
.cf-error {
  display: none; margin-top: 1.2rem;
  color: #ff8a65; font-weight: 600; font-size: 1rem;
}
@media (max-width: 640px) {
  .cf-row { grid-template-columns: 1fr; }
  .contact-form { padding: 1.6rem 1.2rem; }
}

/* Footer */
.footer {
  background: var(--ink); color: #999;
  text-align: center; padding: 2.5rem 5vw; font-size: 0.85rem;
}
.footer__logo { display: block; width: 46px; height: auto; margin: 0 auto 0.8rem; }

/* ===== Mobile ===== */
@media (max-width: 720px) {
  .nav__links { gap: 0.9rem; }
  .nav__links a:not(.nav__cta) { display: none; }
  .hero__banner h1 { white-space: normal; }
}

/* ============================================================
   HERO SLIDER
   ============================================================ */
.hero-slider { position: relative; width: 100%; max-width: 800px; margin: 0 auto; }
.hero-slider__viewport { display: grid; }

.hs-slide {
  grid-area: 1 / 1;
  width: 100%; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 1;
  transform: translateY(22px) scale(0.985);
  transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s linear 0.55s;
}
.hs-slide.is-active {
  opacity: 1; visibility: visible; pointer-events: auto; z-index: 2;
  transform: none;
  transition-delay: 0s;
}
.hs-slide .hero__lockup { width: 100%; }
.hs-slide--brand .hero__tagline { margin-left: auto; margin-right: auto; }

/* --- entrada diapositiva de marca --- */
.hs-slide--brand.is-active .hero__logo { animation: hsPopIn 0.65s cubic-bezier(0.3, 1.4, 0.55, 1) both; }
.hs-slide--brand.is-active .hero__logo img { animation: hsFloat 4.5s ease-in-out 1s infinite; }
.hs-slide--brand.is-active .hero__banner { animation: hsRise 0.6s ease 0.15s both; }
.hs-slide--brand.is-active .hero__tagline { animation: hsRise 0.55s ease 0.4s both; }

/* --- tarjeta de servicio (misma estética que hero__banner) --- */
.hs-card {
  width: 100%;
  min-height: clamp(340px, 46vh, 440px);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.2rem);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 9px),
    var(--ink);
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.3);
  padding: clamp(1.2rem, 3vw, 2rem) clamp(1.2rem, 3.5vw, 2.4rem);
}
.hs-card__visual { flex: 0 0 44%; min-width: 0; }
.hs-svg { display: block; width: 100%; height: auto; }
.hs-card__text { flex: 1; min-width: 0; text-align: left; }
.hs-card__kicker {
  display: inline-block;
  font-family: var(--font-display); font-weight: 600; font-size: 0.85rem;
  color: var(--gold); text-transform: uppercase; letter-spacing: 0.18em;
}
.hs-card__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 4.2vw, 2.9rem);
  color: var(--paper); letter-spacing: 0.02em; line-height: 1.05;
  margin: 0.35rem 0 0.6rem;
  text-shadow: 0 3px 8px rgba(0,0,0,0.6);
}
.hs-card__title em { color: var(--lime); font-style: italic; }
.hero .hs-card__lead { font-weight: 500; }
.hs-card__lead { color: #d6d6d6; font-size: clamp(0.95rem, 1.8vw, 1.08rem); }

.hs-slide.is-active .hs-card__visual { animation: hsRise 0.6s ease 0.1s both; }
.hs-slide.is-active .hs-card__kicker { animation: hsRise 0.5s ease 0.15s both; }
.hs-slide.is-active .hs-card__title  { animation: hsRise 0.55s ease 0.25s both; }
.hs-slide.is-active .hs-card__lead   { animation: hsRise 0.6s ease 0.35s both; }

/* --- flechas --- */
.hs-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,0.3);
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.hs-arrow:hover { background: #000; color: var(--lime); transform: translateY(-50%) scale(1.07); }
.hs-arrow--prev { left: -64px; }
.hs-arrow--next { right: -64px; }

/* --- puntos con progreso --- */
.hs-dots { display: flex; gap: 0.55rem; justify-content: center; margin-top: 1.5rem; }
.hs-dot {
  width: 12px; height: 12px; padding: 0;
  border: none; border-radius: 999px;
  background: rgba(17,17,17,0.32);
  cursor: pointer; position: relative; overflow: hidden;
  transition: width 0.3s ease, background 0.3s ease;
}
.hs-dot:hover { background: rgba(17,17,17,0.55); }
.hs-dot.is-active { width: 38px; background: var(--ink); }
.hs-dot.is-active::after {
  content: ""; position: absolute; inset: 0;
  background: var(--lime); border-radius: 999px;
  transform-origin: left center;
  animation: hsDotFill 6s linear both;   /* misma duración que AUTOPLAY en el JS */
}
.hero-slider.is-paused .hs-dot.is-active::after { animation-play-state: paused; }

/* --- orígenes de transformación de los SVG animados --- */
.hs-svg .aw-bar, .hs-svg .av-progress { transform-box: fill-box; transform-origin: left center; }
.hs-svg .aw-cta, .hs-svg .aw-caret, .hs-svg .aw-card,
.hs-svg .ag-tri, .hs-svg .ag-dot, .hs-svg .ag-sw, .hs-svg .ag-aa,
.hs-svg .av-ring, .hs-svg .av-play,
.hs-svg .as-heart, .hs-svg .as-like, .hs-svg .as-story, .hs-svg .as-pill {
  transform-box: fill-box; transform-origin: center;
}
.hs-svg .as-heart, .hs-svg .av-ring { opacity: 0; }

/* --- animaciones por diapositiva (solo cuando está activa) --- */
/* Web */
.hs-slide.is-active .aw-bar--1 { animation: hsGrowX 0.6s ease 0.15s both; }
.hs-slide.is-active .aw-bar--2 { animation: hsGrowX 0.6s ease 0.3s both; }
.hs-slide.is-active .aw-bar--3 { animation: hsGrowX 0.6s ease 0.45s both; }
.hs-slide.is-active .aw-caret  { animation: hsBlink 1.1s 0.7s infinite; }
.hs-slide.is-active .aw-cta    { animation: hsPulse 2.2s ease-in-out 1s infinite; }
.hs-slide.is-active .aw-card--1 { animation: hsRise 0.5s ease 0.5s both; }
.hs-slide.is-active .aw-card--2 { animation: hsRise 0.5s ease 0.65s both; }
.hs-slide.is-active .aw-card--3 { animation: hsRise 0.5s ease 0.8s both; }
/* Gráfico */
.hs-slide.is-active .ag-ring { animation: hsDraw 1.3s ease 0.15s both; }
.hs-slide.is-active .ag-tri  { animation: hsPopIn 0.6s cubic-bezier(0.3, 1.4, 0.55, 1) 0.55s both; }
.hs-slide.is-active .ag-dot  { animation: hsPulse 2.4s ease-in-out 1s infinite; }
.hs-slide.is-active .ag-aa   { animation: hsRise 0.55s ease 0.45s both; }
.hs-slide.is-active .ag-sw--1 { animation: hsPopIn 0.45s ease 0.35s both; }
.hs-slide.is-active .ag-sw--2 { animation: hsPopIn 0.45s ease 0.5s both; }
.hs-slide.is-active .ag-sw--3 { animation: hsPopIn 0.45s ease 0.65s both; }
.hs-slide.is-active .ag-sw--4 { animation: hsPopIn 0.45s ease 0.8s both; }
.hs-slide.is-active .ag-line { animation: hsDraw 1.1s ease 0.7s both; }
/* Video */
.hs-slide.is-active .av-holes   { animation: hsSlideHoles 1.2s linear infinite; }
.hs-slide.is-active .av-ring--1 { animation: hsRingPing 2.4s ease-out infinite; }
.hs-slide.is-active .av-ring--2 { animation: hsRingPing 2.4s ease-out 1.2s infinite; }
.hs-slide.is-active .av-play    { animation: hsPulse 2.4s ease-in-out 1.2s infinite; }
.hs-slide.is-active .av-rec     { animation: hsBlink 1.2s infinite; }
.hs-slide.is-active .av-progress { animation: hsGrowX 6s linear infinite; }
.hs-slide.is-active .av-head    { animation: hsPlayhead 6s linear infinite; }
/* Community */
.hs-slide.is-active .as-like { animation: hsPulse 1.6s ease-in-out 0.6s infinite; }
.hs-slide.is-active .as-heart--1 { animation: hsHeartFloat 2.6s ease-in 0.2s infinite; }
.hs-slide.is-active .as-heart--2 { animation: hsHeartFloat 2.6s ease-in 0.85s infinite; }
.hs-slide.is-active .as-heart--3 { animation: hsHeartFloat 2.6s ease-in 1.5s infinite; }
.hs-slide.is-active .as-heart--4 { animation: hsHeartFloat 2.6s ease-in 2.1s infinite; }
.hs-slide.is-active .as-story { animation: hsSpin 7s linear infinite; }
.hs-slide.is-active .as-pill--1 { animation: hsPopIn 0.55s cubic-bezier(0.3, 1.4, 0.55, 1) 0.4s both; }
.hs-slide.is-active .as-pill--2 { animation: hsPopIn 0.55s cubic-bezier(0.3, 1.4, 0.55, 1) 0.8s both; }

/* --- keyframes --- */
@keyframes hsRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hsPopIn {
  0% { opacity: 0; transform: scale(0.55); }
  70% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes hsFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes hsGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hsBlink { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hsPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes hsDraw { to { stroke-dashoffset: 0; } }
@keyframes hsRingPing { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.75); } }
@keyframes hsSlideHoles { to { transform: translateX(-38px); } }
@keyframes hsPlayhead { from { transform: translateX(0); } to { transform: translateX(252px); } }
@keyframes hsHeartFloat {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-74px) scale(1.15); }
}
@keyframes hsSpin { to { transform: rotate(360deg); } }
@keyframes hsDotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- responsive --- */
@media (max-width: 900px) {
  .hs-arrow { display: none; }
}
@media (max-width: 720px) {
  .hs-card { flex-direction: column; gap: 1rem; padding: 1.4rem 1.2rem 1.6rem; min-height: 0; }
  .hs-card__visual { flex: none; width: min(78vw, 300px); margin: 0 auto; }
  .hs-card__text { text-align: center; }
}

/* ============================================================
   TRABAJOS — animaciones al pasar el mouse
   (reutilizan los keyframes hs* del slider del hero)
   ============================================================ */

/* orígenes de transformación */
.work__thumb .tw-growx, .work__thumb .tw-fill {
  transform-box: fill-box; transform-origin: left center;
}
.work__thumb .tw-pop, .work__thumb .tw-rise, .work__thumb .tw-pulse,
.work__thumb .tw-float, .work__thumb .tw-ping, .work__thumb .tp-shadow {
  transform-box: fill-box; transform-origin: center;
}
.work__thumb .tv-ring { opacity: 0; }   /* anillo de ping: solo visible durante el hover */

/* clases utilitarias, activas solo con hover */
.work:hover .tw-pop   { animation: hsPopIn 0.5s cubic-bezier(0.3, 1.4, 0.55, 1) both; }
.work:hover .tw-rise  { animation: hsRise 0.5s ease both; }
.work:hover .tw-growx { animation: hsGrowX 0.55s ease both; }
.work:hover .tw-pulse { animation: hsPulse 2s ease-in-out infinite; }
.work:hover .tw-float { animation: hsFloat 3s ease-in-out infinite; }
.work:hover .tw-ping  { animation: hsRingPing 2s ease-out infinite; }
.work:hover .tw-holes { animation: hsSlideHoles 1.1s linear infinite; }
.work:hover .tw-fill  { animation: hsGrowX 2.6s linear infinite; }
.work:hover .tw-seek  { animation: twSeek 2.6s linear infinite; }
.work:hover .tp-shadow { animation: twShadow 3s ease-in-out infinite; }

/* escalonado (después de las reglas de animación para ganar la cascada) */
.work:hover .tw-d1 { animation-delay: 0.08s; }
.work:hover .tw-d2 { animation-delay: 0.16s; }
.work:hover .tw-d3 { animation-delay: 0.24s; }
.work:hover .tw-d4 { animation-delay: 0.32s; }

@keyframes twSeek { from { transform: translateX(-140px); } to { transform: translateX(0); } }
@keyframes twShadow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.88); opacity: 0.65; }
}