/* AdsBe — estilos globales */

:root {
  --bg: #17427f;
  --bg-footer: #08090c;
  --accent: #F5730E;
  --accent-hover: #FF9A52;
  --accent-hover-2: #FF8A34;
  --text: #f5f3ef;
  --text-rgb: 245, 243, 239;
  --text-muted: rgba(var(--text-rgb), 0.75);
  --text-muted-2: rgba(var(--text-rgb), 0.73);
  --text-muted-3: rgba(var(--text-rgb), 0.87);
  --border: rgba(var(--text-rgb), 0.08);
  --border-accent: rgba(245, 115, 14, 0.16);
  --card-bg: #14161c;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

body {
  margin: 0;
  background: var(--bg);
  font-family: 'Be Vietnam Pro', sans-serif;
  overflow-x: hidden;
  color: var(--text);
}

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

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

img {
  max-width: 100%;
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-accent);
  font-family: 'Be Vietnam Pro', sans-serif;
  transition: background-color 0.35s cubic-bezier(.22, 1, .36, 1), border-color 0.35s cubic-bezier(.22, 1, .36, 1), backdrop-filter 0.35s cubic-bezier(.22, 1, .36, 1);
}

.site-header--transparent {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  --text: #0b0c10;
  --text-rgb: 11, 12, 16;
}

.site-header__inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 32px;
  height: 124px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.site-header__logo img {
  height: 100px;
  width: auto;
  object-fit: contain;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}

.site-nav__link {
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 0;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #0b0c10;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.site-nav__link--active,
.site-nav__link:hover {
  color: var(--accent);
}

.site-nav__services {
  position: relative;
}

.site-nav__services-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 16px;
  border-radius: 0;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #0b0c10;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.site-header--transparent .site-nav__link,
.site-header--transparent .site-nav__services-trigger {
  color: var(--text);
}

.site-nav__services:hover .site-nav__services-trigger,
.site-nav__services.is-open .site-nav__services-trigger {
  color: var(--accent);
}

.site-nav__services-trigger svg {
  transition: transform 0.18s;
}

.site-nav__services.is-open .site-nav__services-trigger svg {
  transform: rotate(180deg);
}

.site-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  padding-top: 14px;
  width: 300px;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

.site-nav__services:hover .site-nav__dropdown,
.site-nav__services.is-open .site-nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__dropdown {
    transition: none;
  }
}

.site-nav__dropdown-inner {
  background: var(--card-bg);
  border: 1px solid rgba(245, 115, 14, 0.2);
  border-radius: 0;
  padding: 10px;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6);
  --text: #f5f3ef;
  --text-rgb: 245, 243, 239;
}

.site-nav__dropdown-inner a {
  display: block;
  padding: 12px 14px;
  border-radius: 0;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.site-nav__dropdown-inner a:hover {
  background: rgba(var(--text-rgb), 0.06);
}

.site-nav__dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 10px;
}

.site-nav__dropdown-cta {
  color: var(--accent) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

.site-header__cta {
  text-decoration: none;
  flex-shrink: 0;
  background: var(--accent);
  color: #0b0c10;
  font-size: 15.5px;
  text-transform: none;
  font-weight: 800;
  padding: 15px 26px;
  border-radius: 0;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.site-header__cta:hover {
  background: var(--accent-hover-2);
  color: #0b0c10;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  border: 1px solid rgba(11, 12, 16, 0.16);
  border-radius: 0;
  padding: 3px;
}

.site-header--transparent .lang-switch {
  border-color: rgba(var(--text-rgb), 0.35);
}

.lang-switch__btn {
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 6px 11px;
  border-radius: 0;
  cursor: pointer;
  color: #0b0c10;
  opacity: 0.5;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.lang-switch__btn:not(.is-active):hover {
  opacity: 0.85;
}

.lang-switch__btn.is-active {
  background: var(--accent);
  color: #0b0c10;
  opacity: 1;
}

.site-header__mobile-panel .lang-switch {
  align-self: flex-start;
  margin-top: 16px;
  border-color: rgba(11, 12, 16, 0.16);
}

@media (max-width: 900px) {
  .lang-switch--desktop {
    display: none;
  }
}

.site-header__mtoggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 0;
  border: 1px solid rgba(11, 12, 16, 0.16);
  background: transparent;
  flex-shrink: 0;
  cursor: pointer;
  color: #0b0c10;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.site-header--transparent .site-header__mtoggle {
  color: var(--text);
  border-color: rgba(var(--text-rgb), 0.35);
}

.site-header__mobile-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms ease-out;
}

.site-header__mobile-panel.is-open {
  grid-template-rows: 1fr;
}

.site-header__mobile-panel__inner {
  overflow: hidden;
  min-height: 0;
}

.site-header__mobile-panel__content {
  border-top: 1px solid var(--border-accent);
  padding: 18px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .site-header__mobile-panel {
    transition: none;
  }
}

.site-header__mobile-panel a {
  text-decoration: none;
  padding: 13px 6px;
  font-size: 16px;
  font-weight: 700;
  color: #0b0c10;
}

.site-header__mobile-services-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 6px;
  font-size: 16px;
  font-weight: 700;
  color: #0b0c10;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  width: 100%;
  text-align: left;
}

.site-header__mobile-services-trigger svg {
  transition: transform 0.18s;
}

.site-header__mobile-services.is-open .site-header__mobile-services-trigger svg {
  transform: rotate(180deg);
}

.site-header__mobile-submenu {
  display: none;
  flex-direction: column;
  padding-left: 14px;
  gap: 2px;
}

.site-header__mobile-services.is-open .site-header__mobile-submenu {
  display: flex;
}

.site-header__mobile-submenu a {
  padding: 11px 6px;
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(11, 12, 16, 0.6);
}

.site-header__mobile-submenu a:last-child {
  color: var(--accent);
  font-weight: 700;
}

.site-header__mobile-cta {
  text-decoration: none;
  margin-top: 12px;
  text-align: center;
  background: var(--accent);
  color: #0b0c10;
  font-size: 14px;
  font-weight: 800;
  padding: 14px 22px;
  border-radius: 0;
}

@media (max-width: 900px) {
  .site-nav {
    display: none;
  }
  .site-header__mtoggle {
    display: flex;
  }
  .site-header__cta {
    display: none;
  }
}

/* ---------- Blog page ---------- */

.blog-hero {
  position: relative;
  padding: 180px 20px 60px;
}

.blog-hero__glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 400px;
  background: radial-gradient(50% 100% at 25% 0%, rgba(245, 115, 14, 0.12), transparent 70%);
  pointer-events: none;
}

.blog-hero__inner {
  position: relative;
  max-width: 1760px;
  margin: 0 auto;
  text-align: center;
}

.blog-hero__title {
  margin: 0;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(38px, 5.2vw, 64px);
  color: var(--text);
}

.blog-list {
  position: relative;
  padding: 60px 20px 150px;
}

.blog-grid {
  max-width: 1760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 980px) {
  .blog-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

.blog-card {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Selector compuesto (mayor especificidad que .reveal) para que esta transición
   no dependa del orden en la hoja de estilos y no pierda las propiedades de .reveal. */
.blog-card.reveal {
  transition: opacity 0.7s ease, transform 0.7s ease, translate 200ms cubic-bezier(.22, 1, .36, 1);
}

.blog-card:hover {
  translate: 0 -4px;
}

@media (prefers-reduced-motion: reduce) {
  .blog-card.reveal {
    transition: none;
  }

  .blog-card:hover {
    translate: none;
  }
}

.blog-card__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #1a1c22;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  --text: #f5f3ef;
  --text-rgb: 245, 243, 239;
}

.blog-card__thumb span {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 600;
}

.blog-card__thumb--has-img {
  padding: 0;
  border: none;
}

.blog-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms cubic-bezier(.22, 1, .36, 1);
}

.blog-card:hover .blog-card__thumb img {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .blog-card__thumb img {
    transition: none;
  }

  .blog-card:hover .blog-card__thumb img {
    transform: none;
  }
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blog-card__category {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-hover);
}

.blog-card__title {
  margin: 0;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: var(--text);
}

.blog-card__date {
  font-size: 14.5px;
  color: var(--text-muted);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--bg-footer);
  border-top: 1px solid rgba(245, 115, 14, 0.14);
  font-family: 'Be Vietnam Pro', sans-serif;
  padding: 88px 20px 32px;
  --text: #f5f3ef;
  --text-rgb: 245, 243, 239;
}

.site-footer__grid {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 64px;
  text-align: center;
  justify-items: center;
}

@media (max-width: 700px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.site-footer__col-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted-2);
}

.site-footer__col a {
  text-decoration: none;
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
}

.site-footer__col a:hover {
  color: var(--accent);
}

.site-footer__social {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 6px;
}

.site-footer__social a {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 0;
  padding: 8px 18px 8px 8px;
  width: fit-content;
}

.site-footer__social-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.site-footer__social-icon svg {
  width: 17px;
  height: 17px;
}

.site-footer__bottom {
  max-width: 1600px;
  margin: 64px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.site-footer__bottom span {
  font-size: 15px;
  color: var(--text-muted-2);
}

.site-footer__bottom-links {
  display: flex;
  gap: 26px;
}

.site-footer__bottom-links a {
  text-decoration: none;
  font-size: 15px;
  color: var(--text-muted-2);
}

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

/* ---------- Page hero (Nosotros, Servicio detalle, Blog artículo) ---------- */

.page-hero {
  position: relative;
  padding: 180px 32px 100px;
}

.page-hero--center {
  text-align: center;
  padding-top: 124px;
}

.page-hero__glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 460px;
  background: radial-gradient(50% 100% at 20% 0%, rgba(245, 115, 14, 0.12), transparent 70%);
  pointer-events: none;
}

.eyebrow {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-hover);
  display: block;
  margin-bottom: 18px;
}

/* ---------- Home hero ---------- */

@keyframes adsbeFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
  100% { transform: translateY(0); }
}

.hero {
  position: relative;
  width: 100%;
  min-height: 82vh;
  overflow: hidden;
  background: #ffffff;
  --text: #0b0c10;
  --text-rgb: 11, 12, 16;
}

.hero__bg {
  position: absolute;
  inset: 0;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Campo de puntitos naranjas: dibujado en canvas, reacciona al cursor
   (ver main.js). En prefers-reduced-motion se queda fijo en su cuadrícula. */
.hero__particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 1600px;
  margin: 0 auto;
  min-height: 82vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 32px 100px;
}

.hero__eyebrow {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-hover);
  margin-bottom: 22px;
}

.hero__title {
  margin: 0 0 24px;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: clamp(40px, 7.2vw, 96px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  padding: 0.1em 0;
  color: var(--text);
  max-width: 1500px;
  text-wrap: balance;
}

.hero__title .word,
.svc-detail-title .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.hero__title .word-inner,
.svc-detail-title .word-inner {
  display: inline-block;
  transform-origin: 0% 100%;
  animation: heroWordReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero__title .word-inner.accent-word,
.svc-detail-title .word-inner.accent-word {
  color: var(--accent);
}

@keyframes heroWordReveal {
  from {
    transform: translateY(115%) rotate(6deg);
    opacity: 0;
    filter: blur(6px);
  }
  to {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__title .word-inner,
  .svc-detail-title .word-inner {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ---------- Hero animado en bucle (9 s) ----------
   Línea de tiempo: logo que se ensambla 0-2,25 s · "La NUEVA ERA" (desde arriba) 2,25-4,5 s ·
   "de la PUBLICIDAD DIGITAL" (desde abajo) 4,5-6,75 s · "YA ESTÁ AQUÍ" (zoom) 6,75-9 s.
   Todos los elementos comparten los 9 s, así que el bucle no se desincroniza.
   Jerarquía: las dos primeras frases entran limpias (sin rebote); solo el zoom final rebota. */

.hero-loop__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.hero-loop {
  --hl-out: cubic-bezier(0.16, 1, 0.3, 1);
  --hl-inout: cubic-bezier(0.65, 0, 0.35, 1);
  /* Mismo tamaño en las tres frases: el mayor que deja "PUBLICIDAD DIGITAL" (o "DIGITAL ADVERTISING") en una línea */
  --hl-size: clamp(50px, min(11vw, calc((100vw - 72px) / 11.7)), 131px);
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: clamp(300px, 48vh, 480px);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 800;
  color: var(--text);
}

.hero-loop > * {
  grid-area: 1 / 1;
}

/* Velo blanco suave: atenúa el campo de puntos detrás del texto mientras hay frases en escena */
.hero-loop__scrim {
  place-self: center;
  width: min(100%, 1200px);
  height: 100%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6) 55%, rgba(255, 255, 255, 0));
  opacity: 0;
  pointer-events: none;
  animation: hlScrim 9s var(--hl-inout) infinite both;
}

.hero-loop__line {
  opacity: 0;
  max-width: 100%;
  text-align: center;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-timing-function: var(--hl-inout);
}

.hero-loop__line {
  font-size: var(--hl-size);
}

/* "La NUEVA ERA" y "YA ESTÁ AQUÍ" son más cortas que "PUBLICIDAD DIGITAL", así que pueden ir más grandes en pantallas anchas */
@media (min-width: 640px) {
  .hero-loop__line--top,
  .hero-loop__line--zoom {
    font-size: calc(var(--hl-size) * 1.15);
  }
}

.hero-loop__line--top { animation-name: hlWrapTop; }
.hero-loop__line--bottom { animation-name: hlWrapBottom; }
.hero-loop__line--zoom { animation-name: hlWrapZoom; }

.hero-loop .w {
  display: inline-block;
  white-space: nowrap;
  opacity: 0;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-timing-function: var(--hl-out), var(--hl-inout);
}

.hero-loop__line--top .w,
.hero-loop__line--bottom .w {
  animation-delay: calc(var(--i) * 0.05s);
}

.hero-loop__line--zoom .w {
  margin: 0 0.1em;
  animation-delay: calc(var(--i) * 0.165s);
}

.hero-loop__line--top .w { animation-name: hlWordTop; }
.hero-loop__line--bottom .w { animation-name: hlWordBottom; }
.hero-loop__line--zoom .w { animation-name: hlZoom; }

/* Palabras naranjas: mismo destello que cruza el logo (una pasada por frase) */
.hero-loop .w.hl {
  color: var(--accent);
  background: linear-gradient(105deg, var(--accent) 0%, var(--accent) 42%, #ffc59a 50%, var(--accent) 58%, var(--accent) 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 0.4em rgba(245, 115, 14, 0.28);
  /* El degradado solo pinta dentro de la caja de la palabra: se amplía para no recortar tildes ni la cola de la Q */
  padding-block: 0.3em 0.15em;
  margin-block: -0.3em -0.15em;
}

.hero-loop__line--top .w.hl { animation-name: hlWordTop, hlShineTop; }
.hero-loop__line--bottom .w.hl { animation-name: hlWordBottom, hlShineBottom; }
.hero-loop__line--zoom .w.hl { animation-name: hlZoom, hlShineZoom; }

/* Logo: cuatro piezas del mismo archivo, recortadas, que se ensamblan */
.hero-loop__logo {
  position: relative;
  width: clamp(170px, 32vh, 300px);
  aspect-ratio: 941 / 1050;
  animation: hlLogo 9s var(--hl-out) infinite both;
}

.hero-loop__logo-box {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.hero-loop__piece {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-timing-function: var(--hl-out);
}

.hero-loop__piece--leg-l {
  clip-path: polygon(0.00% 0.00%, 36.77% 0.00%, 48.99% 22.48%, 33.79% 49.62%, 0.00% 52.86%);
  animation-name: hlPieceLegL;
}

.hero-loop__piece--leg-r {
  clip-path: polygon(36.77% 0.00%, 100.00% 0.00%, 100.00% 79.05%, 79.81% 79.05%, 48.88% 22.48%);
  animation-name: hlPieceLegR;
}

.hero-loop__piece--swoosh {
  clip-path: polygon(0.00% 52.95%, 33.79% 49.71%, 48.99% 22.67%, 79.81% 79.05%, 0.00% 79.05%);
  animation-name: hlPieceSwoosh;
}

.hero-loop__piece--text {
  clip-path: polygon(0.00% 78.67%, 100.00% 78.67%, 100.00% 100.00%, 0.00% 100.00%);
  animation-name: hlPieceText;
}

.hero-loop__shine {
  position: absolute;
  inset: 0;
  -webkit-mask: url('./assets/adsbe-logo-mark.webp') center / contain no-repeat;
  mask: url('./assets/adsbe-logo-mark.webp') center / contain no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.9) 50%, transparent 62%);
  background-size: 260% 100%;
  background-position: 160% 0;
  animation: hlShine 9s ease-in-out infinite both;
}

/* Onda del zoom final (también empuja los puntos del fondo, ver main.js) */
.hero-loop__shock {
  place-self: center;
  width: min(46vmin, 420px);
  aspect-ratio: 1;
  border: 4px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: hlShock 9s infinite both ease-out;
}

@keyframes hlScrim {
  0%, 22% { opacity: 0; }
  27%, 96% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes hlLogo {
  0%, 9% { opacity: 1; transform: scale(1); filter: blur(0); }
  21.5% { opacity: 1; transform: scale(1.03); filter: blur(0); }
  25%, 100% { opacity: 0; transform: scale(1.55); filter: blur(12px); }
}

@keyframes hlPieceLegL {
  0% { opacity: 0; transform: translate(-60%, 30%) rotate(-10deg); }
  6.5%, 100% { opacity: 1; transform: none; }
}

@keyframes hlPieceLegR {
  0%, 1% { opacity: 0; transform: translate(60%, -40%) rotate(8deg); }
  7.5%, 100% { opacity: 1; transform: none; }
}

@keyframes hlPieceSwoosh {
  0%, 3% { opacity: 0; transform: translate(-110%, 8%); }
  9%, 100% { opacity: 1; transform: none; }
}

@keyframes hlPieceText {
  0%, 5% { opacity: 0; transform: translate(0, 60%); }
  11%, 100% { opacity: 1; transform: none; }
}

@keyframes hlShine {
  0%, 12% { background-position: 160% 0; }
  21%, 100% { background-position: -60% 0; }
}

@keyframes hlWrapTop {
  0%, 24.9% { opacity: 0; transform: none; filter: none; }
  25% { opacity: 1; transform: none; filter: none; }
  48% { opacity: 1; transform: none; filter: none; }
  51%, 100% { opacity: 0; transform: translateY(-46px); filter: blur(8px); }
}

@keyframes hlWrapBottom {
  0%, 49.9% { opacity: 0; transform: none; filter: none; }
  50% { opacity: 1; transform: none; filter: none; }
  73% { opacity: 1; transform: none; filter: none; }
  76%, 100% { opacity: 0; transform: translateY(46px); filter: blur(8px); }
}

@keyframes hlWrapZoom {
  0%, 74.9% { opacity: 0; transform: none; filter: none; }
  75% { opacity: 1; transform: none; filter: none; }
  96% { opacity: 1; transform: scale(1); filter: none; }
  99%, 100% { opacity: 0; transform: scale(1.35); filter: blur(10px); }
}

@keyframes hlWordTop {
  0%, 25% { opacity: 0; transform: translateY(-1.3em); filter: blur(10px); }
  34%, 100% { opacity: 1; transform: none; filter: none; }
}

@keyframes hlWordBottom {
  0%, 50% { opacity: 0; transform: translateY(1.3em); filter: blur(10px); }
  59%, 100% { opacity: 1; transform: none; filter: none; }
}

@keyframes hlZoom {
  0%, 75% { opacity: 0; transform: scale(0.04); filter: blur(16px); }
  80.5% { opacity: 1; transform: scale(1.14); filter: blur(0); }
  84%, 100% { opacity: 1; transform: scale(1); filter: none; }
}

@keyframes hlShineTop {
  0%, 37% { background-position: 100% 0; }
  45%, 100% { background-position: 0 0; }
}

@keyframes hlShineBottom {
  0%, 62% { background-position: 100% 0; }
  70%, 100% { background-position: 0 0; }
}

@keyframes hlShineZoom {
  0%, 86% { background-position: 100% 0; }
  93%, 100% { background-position: 0 0; }
}

@keyframes hlShock {
  0%, 75% { opacity: 0; transform: scale(0.1); }
  76% { opacity: 0.7; transform: scale(0.15); }
  84%, 100% { opacity: 0; transform: scale(3.2); }
}

.hero-loop.is-paused,
.hero-loop.is-paused * {
  animation-play-state: paused !important;
}

.hero-loop.is-restart,
.hero-loop.is-restart * {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero-loop {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    min-height: 0;
  }

  .hero-loop__logo,
  .hero-loop__scrim,
  .hero-loop__shock {
    display: none;
  }

  .hero-loop__line,
  .hero-loop__line .w {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

.heading-reveal .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.heading-reveal .word-inner {
  display: inline-block;
  animation: sectionHeadingReveal 300ms cubic-bezier(0.22, 1, 0.36, 1) both paused;
}

.heading-reveal.is-visible .word-inner {
  animation-play-state: running;
}

/* Título de "Lo que hacemos por tu marca": entrada más lenta, palabra a palabra */
.servicios-section .heading-reveal .word-inner {
  animation-duration: 900ms;
}

.servicios-section .heading-reveal .word:nth-of-type(1) .word-inner { animation-delay: 0.05s !important; }
.servicios-section .heading-reveal .word:nth-of-type(2) .word-inner { animation-delay: 0.19s !important; }
.servicios-section .heading-reveal .word:nth-of-type(3) .word-inner { animation-delay: 0.33s !important; }
.servicios-section .heading-reveal .word:nth-of-type(4) .word-inner { animation-delay: 0.47s !important; }
.servicios-section .heading-reveal .word:nth-of-type(5) .word-inner { animation-delay: 0.61s !important; }
.servicios-section .heading-reveal .word:nth-of-type(6) .word-inner { animation-delay: 0.75s !important; }

@keyframes sectionHeadingReveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .heading-reveal .word-inner {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.hero__subtitle {
  margin: 0 0 40px;
  font-size: 19px;
  line-height: 1.55;
  color: rgba(var(--text-rgb), 0.87);
  max-width: 560px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.btn-primary {
  text-decoration: none;
  background: var(--accent);
  color: #0b0c10;
  font-size: 15px;
  font-weight: 800;
  padding: 17px 32px;
  border-radius: 0;
  border: none;
  cursor: pointer;
  font-family: inherit;
  display: inline-block;
}

.btn-primary:hover {
  background: var(--accent-hover-2);
  color: #0b0c10;
}

.btn-primary.contact-form__submit {
  border-radius: 0;
}

.btn-secondary {
  text-decoration: none;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  padding: 17px 28px;
  border-radius: 0;
  border: 1px solid rgba(var(--text-rgb), 0.3);
}

.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent-hover);
}

.btn-primary,
.btn-secondary,
.site-header__cta,
.site-header__mobile-cta,
.contact-form__submit {
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1), box-shadow 220ms cubic-bezier(.22, 1, .36, 1), background-color 220ms ease;
}

.btn-primary:hover,
.site-header__cta:hover,
.site-header__mobile-cta:hover,
.contact-form__submit:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 24px rgba(245, 115, 14, 0.35);
}

.btn-primary:active,
.btn-secondary:active,
.site-header__cta:active,
.site-header__mobile-cta:active,
.contact-form__submit:active {
  transform: scale(0.97);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn-secondary,
  .site-header__cta,
  .site-header__mobile-cta,
  .contact-form__submit {
    transition: none;
  }

  .btn-primary:hover,
  .site-header__cta:hover,
  .site-header__mobile-cta:hover,
  .contact-form__submit:hover,
  .btn-primary:active,
  .btn-secondary:active,
  .site-header__cta:active,
  .site-header__mobile-cta:active,
  .contact-form__submit:active {
    transform: none;
    box-shadow: none;
  }
}

.hero__scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__scroll {
    animation: adsbeFloat 2.6s ease-in-out infinite;
  }
}

.hero__scroll span {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--text-rgb), 0.8);
}

/* ---------- Section heading ---------- */

.section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 72px;
}

.section-heading__title {
  margin: 0;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(32px, 4vw, 52px);
  color: var(--text);
  max-width: 640px;
}

/* ---------- Servicios ---------- */

.servicios-section {
  position: relative;
  padding: 140px 20px 120px;
  --bg: #ffffff;
  --text: #0b0c10;
  --text-rgb: 11, 12, 16;
  background: var(--bg);
}

.servicios-section__glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 400px;
  background: radial-gradient(50% 100% at 15% 0%, rgba(245, 115, 14, 0.09), transparent 70%);
  pointer-events: none;
}

.svc-grid {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 980px) {
  .svc-grid {
    grid-template-columns: 1fr;
  }
}

.svc-card {
  background: #111319;
  border-radius: 0;
  font-family: 'Be Vietnam Pro', sans-serif;
  padding: 38px 32px 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  border-top: 2px solid var(--accent);
  position: relative;
  overflow: hidden;
  --text: #f5f3ef;
  --text-rgb: 245, 243, 239;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(.22,1,.36,1), box-shadow 0.35s ease;
}

.svc-grid .svc-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
}

.svc-card--from-left,
.svc-card--from-right,
.svc-card--from-bottom {
  opacity: 0;
}

.svc-card--from-left {
  --svc-enter: translateX(-60px);
  transform: var(--svc-enter);
}

.svc-card--from-right {
  --svc-enter: translateX(60px);
  transform: var(--svc-enter);
}

.svc-card--from-bottom {
  --svc-enter: translateY(60px);
  transform: var(--svc-enter);
}

/* La entrada es una animación (no una transición) para que el hover siga siendo rápido. */
.svc-card--from-left.is-visible,
.svc-card--from-right.is-visible,
.svc-card--from-bottom.is-visible {
  opacity: 1;
  transform: translate(0, 0);
  animation: svcCardIn 1.4s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes svcCardIn {
  from { opacity: 0; transform: var(--svc-enter); }
  to { opacity: 1; transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .svc-card--from-left,
  .svc-card--from-right,
  .svc-card--from-bottom,
  .svc-card--from-left.is-visible,
  .svc-card--from-right.is-visible,
  .svc-card--from-bottom.is-visible {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .svc-grid .svc-card:hover {
    transform: none;
  }
}

/* ---------- Reveal genérico (scroll-in) ---------- */

.reveal {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal--from-top {
  transform: translateY(-60px);
}

.reveal--from-bottom {
  transform: translateY(60px);
}

.reveal--from-left {
  transform: translateX(-60px);
}

.reveal--from-right {
  transform: translateX(60px);
}

.reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.svc-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 0;
  border: 1px solid rgba(245, 115, 14, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 115, 14, 0.06);
}

/* Animaciones sutiles de los iconos (activas solo con la sección en pantalla) */

.servicios-section:not(.is-animating) .svc-anim-search,
.servicios-section:not(.is-animating) .chip-core,
.servicios-section:not(.is-animating) .chip-pins,
.servicios-section:not(.is-animating) .chip-dots,
.servicios-section:not(.is-animating) .chart-bar {
  animation-play-state: paused;
}

.chip-core,
.chart-bar {
  transform-box: fill-box;
}

.svc-anim-search {
  animation: svc-search-scan 2s ease-in-out infinite;
}

.chip-core {
  transform-origin: 50% 50%;
  animation: svc-chip-pulse 1.2s ease-in-out infinite;
}

.chip-pins {
  animation: svc-chip-pins 1.2s ease-in-out infinite;
}

.chip-dots {
  animation: svc-chip-pins 1.2s ease-in-out infinite 0.3s;
}

.chart-bar {
  transform-origin: 50% 100%;
  animation: svc-bar-grow 1.3s ease-in-out infinite;
}

.chart-bar--2 { animation-delay: 0.18s; }
.chart-bar--3 { animation-delay: 0.36s; }

@keyframes svc-search-scan {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(3px, -2px) rotate(6deg); }
  50% { transform: translate(-1px, 3px) rotate(-3deg); }
  75% { transform: translate(-3px, -1px) rotate(-6deg); }
}

@keyframes svc-chip-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

@keyframes svc-chip-pins {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes svc-bar-grow {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.72); }
}

@media (prefers-reduced-motion: reduce) {
  .svc-anim-search,
  .chip-core,
  .chip-pins,
  .chip-dots,
  .chart-bar {
    animation: none;
  }
}

.svc-card__title {
  margin: 0;
  font-family: inherit;
  font-weight: 600;
  font-size: 29px;
  color: var(--text);
}

.svc-card__desc {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.6;
  color: rgba(var(--text-rgb), 0.8);
  flex: 1;
}

.svc-card__link {
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-hover);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.svc-card__link:hover {
  color: var(--accent);
}

/* ---------- Método ---------- */

.metodo-section {
  position: relative;
  padding: 100px 20px 140px;
  background: var(--bg-footer);
}

.metodo-inner {
  max-width: 1600px;
  margin: 0 auto;
}

.metodo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

@media (max-width: 980px) {
  .metodo-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .metodo-grid {
    grid-template-columns: 1fr;
  }
}

.metodo-item {
  padding: 0 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-left: 1px solid rgba(var(--text-rgb), 0.12);
  padding-left: 24px;
  position: relative;
  transition: opacity 0.7s ease, transform 0.7s ease, scale 200ms cubic-bezier(.22, 1, .36, 1);
}

.metodo-item:hover {
  scale: 1.05;
}

@media (prefers-reduced-motion: reduce) {
  .metodo-item:hover {
    scale: 1;
  }
}

.metodo-item__num {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 72px;
  font-weight: 500;
  color: rgba(245, 115, 14, 0.85);
}

.metodo-item__title {
  margin: 0;
  font-size: 27px;
  font-weight: 700;
  color: var(--text);
}

.metodo-item__desc {
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
  color: rgba(var(--text-rgb), 0.8);
}

/* ---------- Portafolio ---------- */

.portfolio-section {
  position: relative;
  padding: 130px 20px 130px;
}

/* "Campañas ya creadas con IA" (solo en la home): fondo blanco. No se redefine --bg porque el triángulo de play lo usa. */
#portafolio.portfolio-section {
  background: #ffffff;
  --text: #0b0c10;
  --text-rgb: 11, 12, 16;
}

/* Páginas con fondo blanco (Portafolio, Nosotros). Las variables --text solo se redefinen en las secciones de <main> para no afectar al footer ni al lightbox. */
body.page-white {
  background: #ffffff;
}

.page-white main > section {
  background: #ffffff;
  --text: #0b0c10;
  --text-rgb: 11, 12, 16;
}

/* Página Blog: fondo negro. */
body.page-black,
.page-black main > section {
  background: #000000;
}

.portfolio-inner {
  max-width: 1600px;
  margin: 0 auto;
}

.port-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

/* Un solo portafolio para los dos idiomas (se genera con scripts/sync_portfolio.py).
   Cada vídeo va en una .port-card con su etiqueta de idioma encima, fuera del recuadro. */
.port-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.port-card__lang {
  align-self: flex-start;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(var(--text-rgb), 0.78);
}

/* Escritorio: 3 por fila (6 columnas virtuales, 2 cada tarjeta). Si la última fila queda
   incompleta, se centra: 1 sola tarjeta en el medio, 2 en patrón de ladrillo. */
@media (min-width: 981px) {
  .port-grid > .port-card { grid-column: span 2; }
  .port-grid > .port-card:last-child:nth-child(3n+1) { grid-column: 3 / 5; }
  .port-grid > .port-card:nth-last-child(2):nth-child(3n+1) { grid-column: 2 / 4; }
  .port-grid > .port-card:last-child:nth-child(3n+2) { grid-column: 4 / 6; }
}

@media (max-width: 980px) {
  .port-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .port-grid {
    grid-template-columns: 1fr;
  }
}

.port-item {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  background: #111319;
  border: 1px solid var(--border);
  display: block;
  width: 100%;
  padding: 0;
  font-family: inherit;
  --text: #f5f3ef;
  --text-rgb: 245, 243, 239;
  /* Incluye opacity/transform (0.7s) de .reveal: al ser el mismo elemento, la propiedad
     "transition" no se combina entre reglas, así que hay que declarar aquí también los
     tiempos de la aparición al hacer scroll para no perderlos. */
  transition: opacity 0.7s ease, transform 0.7s ease, translate 200ms cubic-bezier(.22,1,.36,1), box-shadow 200ms ease;
}

.port-item--portrait {
  aspect-ratio: 9 / 16;
}

.port-item:hover,
.port-item:focus-visible {
  translate: 0 -4px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .port-item {
    transition: none;
  }

  .port-item:hover,
  .port-item:focus-visible {
    translate: none;
  }
}

.port-item__stripes {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, #14161c 0px, #14161c 14px, #191b22 14px, #191b22 28px);
}

.port-item__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.port-item__play {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(245, 115, 14, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 200ms ease;
}

.port-item:hover .port-item__play,
.port-item:focus-visible .port-item__play {
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .port-item__play {
    transition: none;
  }

  .port-item:hover .port-item__play,
  .port-item:focus-visible .port-item__play {
    transform: none;
  }
}

.port-item__play-icon {
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid var(--bg);
  margin-left: 3px;
}

.port-item__label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 11px;
  color: rgba(var(--text-rgb), 0.78);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(4, 5, 7, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  --text: #f5f3ef;
  --text-rgb: 245, 243, 239;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}

.lightbox__inner {
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  background: #111319;
  border-radius: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(245, 115, 14, 0.3);
  transform: scale(0.92);
  transition: transform 180ms ease, max-width 180ms ease, aspect-ratio 180ms ease;
}

.lightbox__inner--portrait {
  max-width: 420px;
  aspect-ratio: 9 / 16;
}

.lightbox.is-open .lightbox__inner {
  transform: scale(1);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox__inner {
    transition: none;
  }
}

.lightbox__label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 13px;
  color: rgba(var(--text-rgb), 0.78);
}

.lightbox__video {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  background: #111319;
}

.lightbox__inner.has-video .lightbox__label {
  display: none;
}

.lightbox__inner.has-video .lightbox__video {
  display: block;
}

.lightbox__close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(var(--text-rgb), 0.3);
  background: transparent;
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
}

/* ---------- Video section ---------- */

.video-section {
  position: relative;
  padding: 130px 32px 130px;
  --bg: #ffffff;
  --text: #0b0c10;
  --text-rgb: 11, 12, 16;
  background: var(--bg);
}

.video-section__inner {
  max-width: 900px;
  margin: 0 auto;
}

.video-section__title {
  margin: 0;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(36px, 4.7vw, 58px);
  color: var(--text);
  text-wrap: balance;
}

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid rgba(245, 115, 14, 0.16);
}

.video-frame--rounded18 {
  border-radius: 0;
}

.video-placeholder {
  width: 100%;
  height: 100%;
  background: #14161c;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}

/* ---------- Blog (resumen en home) ---------- */

.blog-preview-section {
  position: relative;
  padding: 130px 20px 130px;
  --bg: #08090c;
  --text: #f5f3ef;
  --text-rgb: 245, 243, 239;
  background: var(--bg);
}

.blog-preview-inner {
  max-width: 1760px;
  margin: 0 auto;
}

/* ---------- FAQ ---------- */

.faq-section {
  position: relative;
  padding: 120px 20px 130px;
  --bg: #ffffff;
  --text: #0b0c10;
  --text-rgb: 11, 12, 16;
  background: var(--bg);
}

.faq-inner {
  max-width: 1600px;
  margin: 0 auto;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background: #111319;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  --text: #f5f3ef;
  --text-rgb: 245, 243, 239;
}

.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 36px;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}

.faq-item__q-text {
  font-size: 21px;
  font-weight: 700;
  color: var(--text);
}

.faq-item__toggle {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(245, 115, 14, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 20px;
  transition: transform 0.2s;
}

.faq-item.is-open .faq-item__toggle {
  transform: rotate(45deg);
}

.faq-item__a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms ease-out;
}

.faq-item.is-open .faq-item__a-wrap {
  grid-template-rows: 1fr;
}

.faq-item__a-clip {
  overflow: hidden;
  min-height: 0;
}

.faq-item__a {
  margin: 0;
  padding: 0 36px 32px;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(var(--text-rgb), 0.82);
}

@media (prefers-reduced-motion: reduce) {
  .faq-item__a-wrap {
    transition: none;
  }
}

/* ---------- Contacto ---------- */

.contact-section {
  position: relative;
  padding: 130px 32px 150px;
}

.contact-section:not(.contact-section--compact) {
  background: var(--bg-footer);
}

.contact-section--compact {
  padding: 90px 32px 150px;
  background: var(--bg);
}

.contact-section__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 60% at 85% 30%, rgba(245, 115, 14, 0.1), transparent 70%);
  pointer-events: none;
}

.contact-grid {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.contact-grid > * {
  min-width: 0;
}

@media (max-width: 980px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.contact-title {
  margin: 0 0 22px;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(32px, 4vw, 50px);
  color: var(--text);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.contact-text {
  margin: 0 0 32px;
  font-size: 19px;
  line-height: 1.6;
  color: rgba(var(--text-rgb), 0.83);
  max-width: 440px;
  overflow-wrap: break-word;
}

.contact-bullets {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-bullets li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  color: rgba(var(--text-rgb), 0.91);
  list-style: none;
  overflow-wrap: anywhere;
}

.contact-bullets li::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.contact-card {
  background: #111319;
  border-radius: 0;
  padding: 40px;
  border: 1px solid rgba(245, 115, 14, 0.18);
  --text: #f5f3ef;
  --text-rgb: 245, 243, 239;
}

.contact-card--narrow {
  max-width: 640px;
  margin: 0 auto;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form__field label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(var(--text-rgb), 0.78);
}

.contact-form__field input,
.contact-form__field textarea {
  background: #ffffff;
  border: 1px solid rgba(11, 12, 16, 0.15);
  border-radius: 0;
  padding: 15px 16px;
  font-size: 15px;
  color: #0b0c10;
  font-family: 'Be Vietnam Pro', sans-serif;
}

.contact-form__field textarea {
  resize: none;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.contact-form__submit {
  margin-top: 8px;
}

.contact-thanks {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 40px 10px;
}

.contact-card.is-submitted .contact-form {
  display: none;
}

.contact-card.is-submitted .contact-thanks {
  display: flex;
  animation: contactThanksIn 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes contactThanksIn {
  from {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-card.is-submitted .contact-thanks {
    animation: none;
  }
}

.contact-thanks__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(245, 115, 14, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 26px;
}

.contact-thanks h3 {
  margin: 0;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 22px;
  color: var(--text);
}

.contact-thanks p {
  margin: 0;
  font-size: 14.5px;
  color: rgba(var(--text-rgb), 0.82);
}

/* ---------- Servicio detalle ---------- */

.svc-detail-section {
  position: relative;
  padding: 180px 32px 100px;
}

/* ---------- Servicio detalle: variante con vídeo de fondo + contenido a la izquierda ---------- */

.svc-content-left {
  max-width: 1600px;
  margin: 0 auto;
  padding: 70px clamp(20px, 4vw, 56px) 100px;
}

.svc-content-left .svc-detail-lead,
.svc-content-left .svc-detail-para {
  max-width: none;
}

.svc-detail-grid {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: start;
}

@media (max-width: 900px) {
  .svc-detail-grid {
    grid-template-columns: 1fr;
  }
}

.back-link {
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  color: rgba(var(--text-rgb), 0.78);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 26px;
}

.back-link:hover {
  color: var(--accent-hover);
}

.svc-detail-title {
  margin: 0 0 20px;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: clamp(40px, 7.2vw, 96px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text);
  max-width: 1500px;
  text-wrap: balance;
}

.svc-detail-lead {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(var(--text-rgb), 0.86);
  max-width: 560px;
}

.svc-detail-para {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(var(--text-rgb), 0.82);
  max-width: 560px;
}

.svc-detail-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(var(--text-rgb), 0.75);
  display: block;
  margin: 14px 0 16px;
}

.svc-detail-tools {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 40px;
  list-style: none;
  padding: 0;
}

.svc-detail-tools li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(var(--text-rgb), 0.91);
}

.svc-detail-tools li::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 8px;
  flex-shrink: 0;
}

.svc-detail-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid rgba(245, 115, 14, 0.2);
}

/* ---------- Páginas de servicio: zona de tarjetas en blanco y formulario en negro ---------- */

/* Fondo blanco a todo el ancho aunque el contenido esté centrado (max-width 1600px) */
.page-svc-light .svc-content-left {
  position: relative;
  background: #ffffff;
  box-shadow: 0 0 0 100vmax #ffffff;
  clip-path: inset(0 -100vmax);
  --text: #0b0c10;
  --text-rgb: 11, 12, 16;
}

/* Las tarjetas y paneles siguen siendo oscuros, con texto claro */
.page-svc-light .svc-fundamento-card,
.page-svc-light .svc-phase-card,
.page-svc-light .svc-method-card,
.page-svc-light .svc-diff-compare-col,
.page-svc-light .svc-diff-panel,
.page-svc-light .svc-diff-quality,
.page-svc-light .svc-diff-visual-frame,
.page-svc-light .svc-rationale-card,
.page-svc-light .svc-rationale-panel {
  --text: #f5f3ef;
  --text-rgb: 245, 243, 239;
}

.page-svc-light .contact-section--compact {
  background: var(--bg-footer);
}

/* ---------- Servicio detalle: tarjetas "Fundamentos" ---------- */

.svc-fundamentos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin: 12px 0 44px;
}

@media (max-width: 900px) {
  .svc-fundamentos {
    grid-template-columns: 1fr;
  }
}

.svc-fundamento-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border-accent);
  border-radius: 0;
  padding: 42px;
  transition: opacity 0.7s ease, transform 0.7s ease, translate 200ms cubic-bezier(.22, 1, .36, 1), box-shadow 200ms ease;
}

.svc-fundamento-card:hover {
  translate: 0 -4px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .svc-fundamento-card {
    transition: none;
  }

  .svc-fundamento-card:hover {
    translate: none;
  }
}

.svc-fundamento-title {
  font-size: 29px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  margin: 0 0 16px;
}

.svc-fundamento-text {
  font-size: 19px;
  line-height: 1.65;
  color: rgba(var(--text-rgb), 0.82);
  margin: 0 0 24px;
}

.svc-fundamento-chart,
.svc-fundamento-flow {
  margin-top: auto;
  margin-bottom: auto;
}

.svc-fundamento-text strong {
  color: var(--accent);
  font-weight: 600;
}

.svc-fundamento-chart {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 0;
  padding: 18px 18px 14px;
}

.svc-fundamento-chart-label {
  font-size: 11px;
  color: rgba(var(--text-rgb), 0.73);
  margin-bottom: 8px;
}

.svc-fundamento-chart-label strong {
  color: var(--accent);
  font-weight: 700;
}

.svc-fundamento-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.svc-fundamento-chart-axis {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 6px;
}

.svc-fundamento-chart-axis span {
  font-size: 8.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(var(--text-rgb), 0.71);
  text-align: center;
}

.svc-fundamento-flow {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 0;
  padding: 30px 20px 22px;
}

.svc-fundamento-flow-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.svc-fundamento-flow-track::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: rgba(var(--text-rgb), 0.15);
}

.svc-fundamento-flow-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.svc-fundamento-flow-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 2px solid rgba(var(--text-rgb), 0.3);
}

.svc-fundamento-flow-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(var(--text-rgb), 0.78);
  line-height: 1.3;
}

.svc-fundamento-flow-step--result .svc-fundamento-flow-dot {
  width: 26px;
  height: 26px;
  margin-top: -6px;
  border: none;
  background: var(--accent);
  color: #0b0c10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 0 0 6px rgba(245, 115, 14, 0.15);
}

.svc-fundamento-flow-step--result .svc-fundamento-flow-label {
  color: var(--accent);
  font-weight: 700;
}

/* ---------- Servicio detalle: "Fases metodológicas" ---------- */

.svc-phases {
  margin: 8px 0 44px;
}

.svc-phases-header {
  margin-bottom: 32px;
}

.svc-phases-title {
  margin: 0;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  color: var(--accent);
}

.svc-phases-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

@media (max-width: 1100px) {
  .svc-phases-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .svc-phases-grid {
    grid-template-columns: 1fr;
  }
}

.svc-phase-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border-accent);
  border-radius: 0;
  padding: 40px 32px 34px;
  transition: opacity 0.7s ease, transform 0.7s ease, translate 200ms cubic-bezier(.22, 1, .36, 1), box-shadow 200ms ease;
}

.svc-phase-card:hover {
  translate: 0 -4px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .svc-phase-card {
    transition: none;
  }

  .svc-phase-card:hover {
    translate: none;
  }
}

.svc-phase-title {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}

.svc-phase-desc {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(var(--text-rgb), 0.82);
}

/* ---------- Servicio detalle: "Diferencial competitivo" ---------- */

.svc-diff {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: start;
  margin: 12px 0 44px;
}

@media (max-width: 900px) {
  .svc-diff {
    grid-template-columns: 1fr;
  }
}

.svc-diff-title {
  margin: 0 0 18px;
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}

.svc-diff-text {
  margin: 0 0 16px;
  font-size: 17.5px;
  line-height: 1.7;
  color: rgba(var(--text-rgb), 0.82);
}

.svc-diff-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}

@media (max-width: 560px) {
  .svc-diff-compare {
    grid-template-columns: 1fr;
  }
}

.svc-diff-compare-col {
  background: var(--card-bg);
  border-radius: 0;
  padding: 20px;
  border: 1px solid var(--border);
}

.svc-diff-compare-col--new {
  border-color: var(--border-accent);
}

.svc-diff-compare-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: rgba(var(--text-rgb), 0.5);
}

.svc-diff-compare-col--new .svc-diff-compare-label {
  color: var(--accent);
}

.svc-diff-compare-label svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.svc-diff-compare-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.svc-diff-compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 15.5px;
  line-height: 1.5;
  color: rgba(var(--text-rgb), 0.7);
}

.svc-diff-compare-list--bad li::before {
  content: '✕';
  flex-shrink: 0;
  font-weight: 700;
  color: #ff6b6b;
}

.svc-diff-compare-list--good li {
  color: rgba(var(--text-rgb), 0.85);
}

.svc-diff-compare-list--good li::before {
  content: '✓';
  flex-shrink: 0;
  font-weight: 700;
  color: var(--accent);
}

.svc-diff-visual {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.svc-diff-visual-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--border-accent);
  background:
    radial-gradient(circle at 30% 20%, rgba(245, 115, 14, 0.22), transparent 55%),
    repeating-linear-gradient(0deg, rgba(245, 243, 239, 0.05) 0, rgba(245, 243, 239, 0.05) 1px, transparent 1px, transparent 32px),
    repeating-linear-gradient(90deg, rgba(245, 243, 239, 0.05) 0, rgba(245, 243, 239, 0.05) 1px, transparent 1px, transparent 32px),
    linear-gradient(160deg, #1b1e26, #0e0f13);
}

.svc-diff-visual-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.svc-diff-visual-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: rgba(245, 115, 14, 0.9);
  color: #0b0c10;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.svc-diff-visual-play:hover {
  background: var(--accent-hover);
  transform: translate(-50%, -50%) scale(1.06);
}

.svc-diff-visual-play svg {
  width: 22px;
  height: 22px;
  margin-left: 3px;
}

.svc-diff-visual-frame.is-playing .svc-diff-visual-play {
  display: none;
}

.svc-diff-visual-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent);
}

.svc-diff-visual-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.svc-diff-panel {
  background: var(--card-bg);
  border: 1px solid var(--border-accent);
  border-radius: 0;
  padding: 18px;
}

.svc-diff-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(var(--text-rgb), 0.5);
  margin-bottom: 12px;
}

.svc-diff-panel-status {
  color: var(--accent);
}

.svc-diff-bar {
  height: 4px;
  border-radius: 0;
  background: rgba(var(--text-rgb), 0.1);
  overflow: hidden;
  margin-bottom: 18px;
}

.svc-diff-bar-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 0;
  background: var(--accent);
}

.svc-diff-panel-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.svc-diff-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.svc-diff-stat-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(var(--text-rgb), 0.45);
}

.svc-diff-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.svc-diff-quality {
  background: var(--card-bg);
  border: 1px solid var(--border-accent);
  border-radius: 0;
  padding: 18px;
}

.svc-diff-quality-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(var(--text-rgb), 0.5);
  margin-bottom: 8px;
}

.svc-diff-quality-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(var(--text-rgb), 0.82);
}

/* Hover de las tarjetas del diferencial (comparativa, latencia y control de calidad) */

.svc-diff-compare-col,
.svc-diff-panel,
.svc-diff-quality {
  transition: translate 260ms cubic-bezier(.22, 1, .36, 1), box-shadow 260ms ease, border-color 260ms ease, background-color 260ms ease;
}

/* Las columnas comparativas además llevan .reveal: se conserva su entrada al hacer scroll. */
.svc-diff-compare-col {
  transition: opacity 0.7s ease, transform 0.7s ease, translate 260ms cubic-bezier(.22, 1, .36, 1), box-shadow 260ms ease, border-color 260ms ease, background-color 260ms ease;
}

.svc-diff-compare-col:hover,
.svc-diff-panel:hover,
.svc-diff-quality:hover {
  translate: 0 -6px;
  background-color: #1b1e26;
  border-color: var(--accent);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4), 0 0 26px rgba(245, 115, 14, 0.22);
}

.svc-diff-compare-col--old:hover {
  border-color: #ff6b6b;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4), 0 0 26px rgba(255, 107, 107, 0.22);
}

.svc-diff-compare-list li {
  transition: translate 260ms cubic-bezier(.22, 1, .36, 1), color 260ms ease;
}

.svc-diff-compare-col:hover .svc-diff-compare-list li {
  translate: 6px 0;
  color: var(--text);
}

.svc-diff-compare-col:hover li:nth-child(2) { transition-delay: 40ms; }
.svc-diff-compare-col:hover li:nth-child(3) { transition-delay: 80ms; }
.svc-diff-compare-col:hover li:nth-child(4) { transition-delay: 120ms; }

.svc-diff-compare-col:hover .svc-diff-compare-label,
.svc-diff-quality:hover .svc-diff-quality-label,
.svc-diff-panel:hover .svc-diff-panel-row {
  color: var(--accent-hover);
}

.svc-diff-compare-col--old:hover .svc-diff-compare-label {
  color: #ff8f8f;
}

.svc-diff-bar-fill {
  transition: box-shadow 260ms ease, filter 260ms ease;
}

.svc-diff-panel:hover .svc-diff-bar-fill {
  box-shadow: 0 0 14px rgba(245, 115, 14, 0.9);
  filter: brightness(1.15);
}

.svc-diff-stat-value {
  transition: translate 260ms cubic-bezier(.22, 1, .36, 1);
}

.svc-diff-panel:hover .svc-diff-stat-value {
  translate: 6px 0;
}

.svc-diff-quality-text {
  transition: color 260ms ease;
}

.svc-diff-quality:hover .svc-diff-quality-text {
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .svc-diff-compare-col,
  .svc-diff-panel,
  .svc-diff-quality,
  .svc-diff-compare-list li,
  .svc-diff-bar-fill,
  .svc-diff-stat-value,
  .svc-diff-quality-text {
    transition: none;
  }

  .svc-diff-compare-col:hover,
  .svc-diff-panel:hover,
  .svc-diff-quality:hover,
  .svc-diff-compare-col:hover .svc-diff-compare-list li,
  .svc-diff-panel:hover .svc-diff-stat-value {
    translate: none;
  }
}

/* ---------- Servicio detalle: panel "Racional operativo" ---------- */

.svc-rationale {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 36px;
  align-items: stretch;
  margin: 12px 0 44px;
}

@media (max-width: 900px) {
  .svc-rationale {
    grid-template-columns: 1fr;
  }
}

.svc-rationale-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0;
  padding: 34px 32px;
  /* Incluye opacity/transform de .reveal para no perder la entrada al añadir el hover. */
  transition: opacity 0.7s ease, transform 0.7s ease, translate 260ms cubic-bezier(.22, 1, .36, 1), box-shadow 260ms ease, border-color 260ms ease, background-color 260ms ease;
}

.svc-rationale-card:hover {
  translate: 0 -6px;
  border-color: var(--border-accent);
  border-left-color: var(--accent-hover-2);
  background-color: #1b1e26;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4), -8px 0 28px rgba(245, 115, 14, 0.28);
}

.svc-rationale-text {
  transition: color 260ms ease;
}

.svc-rationale-card:hover .svc-rationale-text {
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .svc-rationale-card,
  .svc-rationale-text {
    transition: none;
  }

  .svc-rationale-card:hover {
    translate: none;
  }
}

.svc-rationale-kicker {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.svc-rationale-text {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(var(--text-rgb), 0.82);
}

.svc-rationale-text:last-child {
  margin-bottom: 0;
}

.svc-rationale-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 30px;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--border-accent);
  background:
    radial-gradient(circle at 85% 0%, rgba(245, 115, 14, 0.18), transparent 55%),
    repeating-linear-gradient(0deg, rgba(245, 243, 239, 0.045) 0, rgba(245, 243, 239, 0.045) 1px, transparent 1px, transparent 28px),
    repeating-linear-gradient(90deg, rgba(245, 243, 239, 0.045) 0, rgba(245, 243, 239, 0.045) 1px, transparent 1px, transparent 28px),
    linear-gradient(160deg, #1b1e26, #0e0f13);
}

.svc-rationale-stats {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 16px;
}

.svc-rationale-stat {
  position: relative;
  flex: 1 1 0;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 22px 28px 22px 34px;
  border-radius: 0;
  overflow: hidden;
  background: linear-gradient(120deg, rgba(245, 115, 14, 0.2), rgba(245, 115, 14, 0.05) 70%);
  border: 1px solid var(--border-accent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  /* Incluye opacity/transform de .reveal (con retardo escalonado) para que no se
     pierdan al añadir la transición propia del hover (translate/box-shadow). */
  transition: opacity 0.7s ease var(--d, 0s), transform 0.7s ease var(--d, 0s), translate 260ms cubic-bezier(.22, 1, .36, 1), box-shadow 260ms ease, border-color 260ms ease;
}

.svc-rationale-stat:nth-child(2) { --d: 0.15s; }
.svc-rationale-stat:nth-child(3) { --d: 0.3s; }

.svc-rationale-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, var(--accent-hover-2), var(--accent));
  box-shadow: 0 0 18px rgba(245, 115, 14, 0.7);
  transition: width 260ms cubic-bezier(.22, 1, .36, 1);
}

.svc-rationale-stat::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}

.svc-rationale-stat:hover {
  translate: 10px 0;
  border-color: var(--accent);
  box-shadow: 0 14px 34px rgba(245, 115, 14, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.svc-rationale-stat:hover::before {
  width: 12px;
}

.svc-rationale-stat:hover::after {
  left: 120%;
  transition: left 700ms cubic-bezier(.22, 1, .36, 1);
}

.svc-rationale-stat-value {
  transition: translate 260ms cubic-bezier(.22, 1, .36, 1), color 260ms ease;
}

.svc-rationale-stat:hover .svc-rationale-stat-value {
  translate: 6px 0;
  color: #fff;
}

.svc-rationale-stat-value {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .svc-rationale-stat,
  .svc-rationale-stat::before,
  .svc-rationale-stat-value {
    transition: none;
  }

  .svc-rationale-stat:hover,
  .svc-rationale-stat:hover .svc-rationale-stat-value {
    translate: none;
  }

  .svc-rationale-stat::after {
    display: none;
  }
}

/* ---------- Servicio detalle: "Herramientas y proceso" (metodología) ---------- */

.svc-method {
  margin: 8px 0 44px;
}

.svc-method-title {
  margin: 0 0 14px;
  font-size: clamp(30px, 3.6vw, 40px);
  font-weight: 700;
  color: var(--accent);
}

.svc-method-subtitle {
  margin: 0 0 32px;
  max-width: 620px;
  font-size: 17.5px;
  line-height: 1.65;
  color: rgba(var(--text-rgb), 0.75);
}

.svc-method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

@media (max-width: 900px) {
  .svc-method-grid {
    grid-template-columns: 1fr;
  }
}

.svc-method-grid.svc-method-grid--wide {
  grid-template-columns: repeat(6, 1fr);
}

.svc-method-grid.svc-method-grid--wide > .svc-method-card {
  grid-column: span 2;
}

.svc-method-grid.svc-method-grid--wide > .svc-method-card:nth-child(4) {
  grid-column: 2 / 4;
}

.svc-method-grid.svc-method-grid--wide > .svc-method-card:nth-child(5) {
  grid-column: 4 / 6;
}

@media (max-width: 760px) {
  .svc-method-grid.svc-method-grid--wide {
    grid-template-columns: 1fr 1fr;
  }

  .svc-method-grid.svc-method-grid--wide > .svc-method-card,
  .svc-method-grid.svc-method-grid--wide > .svc-method-card:nth-child(4),
  .svc-method-grid.svc-method-grid--wide > .svc-method-card:nth-child(5) {
    grid-column: auto;
  }
}

@media (max-width: 520px) {
  .svc-method-grid.svc-method-grid--wide {
    grid-template-columns: 1fr;
  }
}

.svc-method-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border-accent);
  border-radius: 0;
  padding: 38px;
  /* Incluye opacity/transform de .reveal (misma duración) para que esta regla no
     se los pise al añadir la transición propia del hover (translate/box-shadow). */
  transition: opacity 0.7s ease, transform 0.7s ease, translate 200ms cubic-bezier(.22, 1, .36, 1), box-shadow 200ms ease;
}

.svc-method-card:hover {
  translate: 0 -4px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .svc-method-card {
    transition: none;
  }

  .svc-method-card:hover {
    translate: none;
  }
}

.svc-method-card-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 14px;
}

.svc-method-card-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: rgba(var(--text-rgb), 0.4);
}

.svc-method-card-icon svg {
  width: 100%;
  height: 100%;
}

.svc-method-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(245, 115, 14, 0.75);
}

.svc-method-tag-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.svc-method-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.svc-method-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 0;
  background: rgba(245, 115, 14, 0.12);
  border: 1px solid rgba(245, 115, 14, 0.3);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.svc-method-icon svg {
  width: 23px;
  height: 23px;
}

.svc-method-step {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(var(--text-rgb), 0.45);
}

.svc-method-card-title {
  margin: 0 0 14px;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}

.svc-method-desc {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(var(--text-rgb), 0.75);
}

/* ---------- Blog artículo ---------- */

.article {
  position: relative;
  padding: 170px 32px 120px;
}

.article__inner {
  max-width: 760px;
  margin: 0 auto;
}

.article--legal .article__inner {
  max-width: 1240px;
  margin: 0;
}

.article--post .article__inner {
  max-width: 1200px;
}

.article__hero {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 44px;
}

.article--post .article__hero {
  aspect-ratio: unset;
  height: clamp(240px, 38vw, 420px);
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  border-radius: 0;
  border: none;
}

.article--post .article__body {
  max-width: 760px;
  margin: 0 auto;
}

.article__title {
  margin: 0 0 20px;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(30px, 4.4vw, 48px);
  color: var(--text);
  text-wrap: balance;
}

.article--post .article__title {
  text-align: center;
  font-size: clamp(36px, 5.4vw, 60px);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

.article--post .back-link,
.article--post .article__meta {
  text-align: center;
  display: block;
}

.article__meta {
  font-size: 13.5px;
  color: rgba(var(--text-rgb), 0.75);
  display: block;
  margin-bottom: 36px;
}

.article__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-size: 18px;
  line-height: 1.8;
  color: rgba(var(--text-rgb), 0.87);
}

.article__body p.is-note {
  color: rgba(var(--text-rgb), 0.73);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 13.5px;
  letter-spacing: 0.02em;
}

.article__body h2 {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 600;
  font-size: 23px;
  color: var(--text);
  margin: 14px 0 0;
}

.article__body h3 {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 600;
  font-size: 19px;
  color: var(--text);
  margin: 4px 0 0;
}

.article__body ul,
.article__body ol {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.article__body li::marker {
  color: var(--accent);
  font-weight: 700;
}

.article__body strong {
  color: var(--text);
  font-weight: 700;
}

.article__body a {
  color: var(--accent-hover);
  text-decoration: underline;
}

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

/* ---------- Documento legal (Aviso legal / Política de cookies) ---------- */

.legal-langs {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
}

.legal-langs a {
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  color: rgba(var(--text-rgb), 0.78);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 6px 14px;
}

.legal-langs a.is-active {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

.legal-langs a:not(.is-active):hover {
  color: var(--accent-hover);
  border-color: var(--accent);
}

.legal-body {
  font-size: 15.5px;
  line-height: 1.8;
  color: rgba(var(--text-rgb), 0.87);
}

.legal-body h2 {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 600;
  font-size: 21px;
  color: var(--text);
  margin: 40px 0 14px;
}

.legal-body h2:first-child {
  margin-top: 0;
}

.legal-body h3 {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  margin: 24px 0 10px;
}

.legal-body p {
  margin: 0 0 18px;
}

.legal-body strong {
  color: var(--text);
  font-weight: 700;
}

.legal-body em {
  color: rgba(var(--text-rgb), 0.78);
}

.legal-body ul {
  margin: 0 0 18px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-body li::marker {
  color: var(--accent);
}

.legal-body a {
  color: var(--accent-hover);
}

.legal-body a:hover {
  color: var(--accent);
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 18px;
}

.legal-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 14px;
}

.legal-body th,
.legal-body td {
  border: 1px solid var(--border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.legal-body th {
  background: rgba(245, 115, 14, 0.06);
  color: var(--text);
  font-weight: 700;
}

.legal-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 32px 0;
}

.legal-body .legal-updated {
  color: rgba(var(--text-rgb), 0.75);
  font-size: 13.5px;
  margin-bottom: 32px;
}

/* ---------- Banner de consentimiento de cookies ---------- */

.cookie-banner {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.cookie-banner.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.cookie-banner__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 12, 0.7);
  backdrop-filter: blur(4px);
}

.cookie-banner__inner {
  position: relative;
  width: 100%;
  max-width: 640px;
  padding: 28px 32px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 20px;
  transform: translateY(16px) scale(0.98);
  transition: transform 0.3s cubic-bezier(.22, 1, .36, 1);
}

.cookie-banner.is-visible .cookie-banner__inner {
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner,
  .cookie-banner__inner {
    transition: none;
  }
}

.cookie-banner__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted-3);
}

.cookie-banner__link {
  color: var(--accent);
  text-decoration: underline;
}

.cookie-banner__link:hover {
  color: var(--accent-hover);
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cookie-btn {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 150ms cubic-bezier(.22, 1, .36, 1);
}

.cookie-btn:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .cookie-btn {
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  .cookie-btn:active {
    transform: none;
  }
}

.cookie-btn--ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.cookie-btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent-hover);
}

.cookie-btn--accent {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
}

.cookie-btn--accent:hover {
  background: var(--accent-hover-2);
  border-color: var(--accent-hover-2);
}

/* ---------- Panel de preferencias de cookies ---------- */

.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.cookie-modal.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.cookie-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 12, 0.7);
  backdrop-filter: blur(4px);
}

.cookie-modal__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 32px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  transform: scale(0.95);
  transition: transform 0.25s cubic-bezier(.22, 1, .36, 1);
}

.cookie-modal.is-visible .cookie-modal__panel {
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .cookie-modal,
  .cookie-modal__panel {
    transition: none;
  }
}

.cookie-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted-3);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.cookie-modal__close:hover {
  background: var(--border);
  color: var(--text);
}

.cookie-modal__title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 12px;
  padding-right: 24px;
}

.cookie-modal__intro {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted-3);
  margin: 0 0 24px;
}

.cookie-modal__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

.cookie-modal__row-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cookie-modal__row-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}

.cookie-modal__row-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted-3);
}

.cookie-modal__always-on {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.cookie-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--border);
  cursor: pointer;
  margin-top: 2px;
}

.cookie-toggle--locked {
  width: auto;
  height: auto;
  background: none;
  cursor: default;
  display: flex;
  align-items: center;
}

.cookie-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text);
  transition: left 0.2s ease, background 0.2s ease;
}

.cookie-toggle.is-on {
  background: var(--accent);
}

.cookie-toggle.is-on .cookie-toggle__thumb {
  left: 21px;
  background: #fff;
}

.cookie-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

body.cookie-modal-open {
  overflow: hidden;
}

@media (max-width: 480px) {
  .cookie-banner__actions {
    width: 100%;
  }

  .cookie-btn {
    flex: 1 1 auto;
    text-align: center;
  }

  .cookie-modal__actions {
    flex-direction: column-reverse;
  }

  .cookie-modal__actions .cookie-btn {
    width: 100%;
  }
}