/* ==========================================================================
   Refreska — Home
   ========================================================================== */

/* ---------- Hero ---------- */
.hero { position: relative; }
.hero > .wrap { position: relative; z-index: 1; }
.hero__inner { padding: 10rem 0; }
.hero__content { max-width: 48rem; }
.hero__tagline { margin-bottom: -4px; }
.hero__tagline .tagline { color: var(--mute-dark); font-family: var(--inter); font-size: .9375rem; font-weight: 500; letter-spacing: .01em; }
.hero__title { margin: 20px 0 15px; font-size: 3.5rem; font-weight: 700; line-height: 1.2; }
.hero__big { color: #fff; font-size: 4rem; font-weight: 600; }
.hero__accent { font-family: var(--slab); color: var(--blue); }
.hero__lead { color: #fff; font-size: 1.3rem; line-height: 31px; }
.hero__btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 20px; }
.avatars { display: flex; flex-wrap: wrap; align-items: center; margin-top: 20px; }
.avatars__img { width: 3rem; height: 3rem; border-radius: 100%; object-fit: cover; margin-left: -.75rem; }
.avatars__text { margin: 0; padding-left: 14px; max-width: 30rem; color: #e9ecf5; font-family: var(--inter); font-size: .875rem; line-height: 1.45; }
.avatars__text a { color: #fff; font-weight: 600; }
/* Entrada del hero: breve y coordinada (≈0,6 s en total), solo opacidad y desplazamiento corto */
@keyframes rfk-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rfk-slide { from { transform: translateY(10px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  /* El titular no espera: aparece desde el primer cuadro y solo se desliza; el resto entra escalonado */
  .hero__title { animation: rfk-slide .5s var(--ease) both; }
  .hero__tagline, .hero__lead, .hero__btn-group, .avatars { animation: rfk-rise .45s var(--ease) both; }
  .hero__lead { animation-delay: .06s; }
  .hero__btn-group { animation-delay: .12s; }
  .avatars { animation-delay: .18s; }
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #000 url(/assets/img/hero-bg.avif) 50% 100% / cover no-repeat;
}

/* ---------- Galería de proyectos: 3 columnas cuadradas (desktop/tablet); 2 × 3 en móvil ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); }
.gallery__item { position: relative; display: block; color: #fff; text-decoration: none; }
.gallery__inner { position: relative; height: 100%; overflow: hidden; aspect-ratio: 1 / 1; }
.gallery__img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .6s var(--ease); }
.gallery__hover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: .35rem;
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
  background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .4) 45%, rgba(0, 0, 0, .1) 100%);
  opacity: 0;
  transition: opacity .45s var(--ease);
  font-family: var(--inter);
}
/* Mismo tamaño de título en tarjetas medianas y anchas */
.gallery__title { color: #fff; font-family: var(--slab); font-size: clamp(1.5rem, 2.1vw, 2rem); font-weight: 600; line-height: 1.1; transform: translateY(10px); transition: transform .5s var(--ease); }
.gallery__sub { color: var(--mute-dark); font-size: 1rem; line-height: 1.4; transform: translateY(10px); transition: transform .5s var(--ease) .04s; }
.gallery__item:hover .gallery__hover, .gallery__item:focus-visible .gallery__hover { opacity: 1; }
.gallery__item:hover .gallery__title, .gallery__item:focus-visible .gallery__title,
.gallery__item:hover .gallery__sub, .gallery__item:focus-visible .gallery__sub { transform: none; }
.gallery__item:hover .gallery__img, .gallery__item:focus-visible .gallery__img { transform: scale(1.03); filter: blur(3px); }
.gallery__item:focus-visible { outline: 3px solid #fff; outline-offset: -6px; z-index: 1; }
/* Táctil y pantallas chicas: el nombre siempre visible, sin depender de hover */
@media (hover: none), (max-width: 767px) {
  .gallery__hover { opacity: 1; background: linear-gradient(to top, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .25) 35%, rgba(0, 0, 0, 0) 60%); }
  .gallery__title, .gallery__sub { transform: none; }
  .gallery__item:hover .gallery__img { transform: none; filter: none; }
}
@media (max-width: 767px) {
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery__hover { padding: .85rem 1rem; }
  .gallery__title { font-size: 1.125rem; }
  .gallery__sub { display: none; }
}

/* ---------- Espaciador + fondo degradado de <main> ---------- */
.main { background-image: linear-gradient(#034bff0d, #7effb60d 39%, #faf8990d); }
.spacer { height: 144px; }

/* ---------- Manifiesto ---------- */
.manifesto { display: flow-root; padding: 3rem 0 2rem; }
.manifesto__text {
  color: #242424;
  text-align: center;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.2;
}
.lt { font-size: inherit; font-weight: 300; line-height: inherit; }
.ul { font-size: inherit; font-weight: 400; text-decoration: underline; }
.manifesto__accent { color: var(--blue); font-family: var(--slab); }
.manifesto__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.manifesto__actions .btn { margin-top: 18px; }

/* ---------- Encabezado de sección ---------- */
.section-head { text-align: center; }
.section-head__lead { color: #000; font-size: 1.125rem; margin-bottom: 20px; }

/* ---------- Testimonios (composición editorial estática) ---------- */
.testimonials { padding: 8rem 0 7rem; }
.testimonials .section-head { max-width: 46rem; margin: 0 auto 3.5rem; }
.quotes {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1.5rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 0;
  padding: 1.75rem 1.75rem 1.5rem;
  background: #fff;
  border: 1px solid #dfe5f7;
  border-radius: 16px;
}
.quote blockquote { margin: 0; }
.quote p { margin: 0; color: #2b2b2b; font-family: var(--inter); font-size: 1.0625rem; line-height: 1.6; }
.quote--main {
  grid-row: span 3;
  justify-content: flex-start;
  gap: 2.5rem;
  padding: 3rem 3rem 2.75rem;
  background: #0b0b0c;
  border-color: #0b0b0c;
}
.quote--main::before {
  content: "\201C";
  display: block;
  height: 3rem;
  margin-bottom: -1rem;
  color: var(--blue);
  font-family: var(--slab);
  font-size: 6rem;
  line-height: 1;
}
.quote--main p { color: #fff; font-family: var(--slab); font-size: 2rem; line-height: 1.35; }
.quote--main .client__name { color: #fff; }
.quote--main .client__role { color: var(--mute-dark); }
.quote--main .client__img { width: 4.5rem; height: 4.5rem; min-width: 4.5rem; }
.client { display: flex; align-items: center; gap: 1rem; margin-top: auto; text-align: left; }
.client__img { width: 3rem; height: 3rem; min-width: 3rem; border-radius: 100%; object-fit: cover; }
.client__name { display: block; color: #000; font-family: var(--inter); font-size: 1rem; font-style: normal; font-weight: 600; line-height: 1.3; }
.client__role { display: block; color: var(--mute-light); font-family: var(--inter); font-size: .875rem; line-height: 1.4; }

/* ---------- Contacto ---------- */
.contact { padding: 3rem 0 7rem; scroll-margin-top: 0; }
.contact__card {
  padding: clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 5vw, 4.5rem);
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 28px;
  box-shadow: 0 40px 80px -48px rgba(10, 20, 60, .28);
}
.contact .section-head { margin-bottom: 2.75rem; }
.contact .section-head__tag .tagline {
  padding: .3rem .85rem;
  border-radius: 100px;
  background: #eef2ff;
  color: var(--blue);
  font-family: var(--inter);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.6;
}
.contact .h2 { margin: 1rem 0 .75rem; font-size: clamp(2rem, 4vw, 2.75rem); }
.contact__lead { max-width: 38rem; margin: 0 auto; color: var(--mute-light); text-align: center; font-family: var(--inter); font-size: 1.0625rem; line-height: 1.6; }
/* Estilos del formulario: assets/css/form-lead.css (componente reutilizable) */

/* ---------- Trayectoria con grandes marcas ---------- */
.brands { padding: 8rem 0 7rem; background: #000; color: #fff; font-family: var(--inter); }
.brands__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.5rem; }
.brands__head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; }
.brands__eyebrow { grid-column: 1 / -1; color: var(--mute-dark); font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.brands__title { margin: 0; color: #fff; font-family: var(--slab); font-size: clamp(2.25rem, 4.4vw, 3.75rem); font-weight: 600; line-height: 1.05; }
.brands__title em { color: var(--blue); }
.brands__lead { margin: 0; color: var(--mute-dark); font-size: 1.0625rem; line-height: 1.6; }
.brands__wall {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1.5rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brands__cell { display: flex; justify-content: center; align-items: center; min-width: 0; min-height: 6.5rem; }
/* Tamaño por área (width/height en el HTML) para equilibrar el peso óptico de cada logo */
/* Logos al 70 % (−30 % respecto de la versión anterior); se mantiene la proporción entre ellos */
.brands__logo { min-width: 0; max-width: 86%; height: auto; scale: .7; filter: grayscale(1) contrast(1.4); opacity: .78; transition: opacity .3s var(--ease); }
.brands__logo:hover { opacity: 1; }
/* Entrada escalonada al aparecer; la grilla en sí no se oculta */
.js .brands__wall[data-anim] { opacity: 1; transform: none; }
.js .brands__wall .brands__cell { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 45ms); }
.js .brands__wall.is-in .brands__cell { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .brands__wall .brands__cell { opacity: 1; transform: none; } }
.brands__cell--you { padding: .25rem; }
.brands__you {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  min-height: 6rem;
  padding: 1rem 1.1rem;
  border-radius: 18px;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.brands__you-q { font-family: var(--slab); font-size: clamp(1.05rem, 1.4vw, 1.3rem); font-weight: 600; line-height: 1.1; }
.brands__you-cta { font-size: .875rem; font-weight: 600; }
.brands__you:hover { background: #fff; color: #000; transform: translateY(-2px); }
.brands__you:hover .brands__you-cta::after { transform: translateX(4px); }
.brands__note { margin: -1rem 0 0; color: #8a8a8a; font-size: .8125rem; }

/* ---------- CTA (referencia Ajuste.png) ---------- */
.cta { padding: 2rem 0 8rem; overflow: hidden; background: #000; }
.cta__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  min-height: 32rem;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;          /* Safari: el recorte redondeado también contiene las pistas animadas */
  border-radius: 28px;
  background: var(--blue);
  color: #fff;
}
.cta__body { align-self: center; min-width: 0; padding: clamp(2.5rem, 6vw, 5.5rem); }
.cta__title { margin: 0 0 1.25rem; color: #fff; font-family: var(--inter); font-size: clamp(2.125rem, 3.8vw, 3.5rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.02; }
.cta__accent { display: block; color: var(--green); font-family: var(--slab); font-weight: 400; letter-spacing: 0; }
.cta__text { margin: 0 0 2rem; color: #fff; font-family: var(--inter); font-size: 1.25rem; line-height: 1.5; }
.cta__body .btn { white-space: nowrap; }

/* Dos columnas de proyectos que se desplazan en sentidos opuestos (bucle continuo).
   Contenido decorativo: aria-hidden; la copia de cada columna solo sirve para el bucle. */
.cta__art { position: relative; min-width: 0; overflow: hidden; contain: paint; }
/* Desktop: las imágenes llegan a los bordes superior, derecho e inferior de la tarjeta */
.cta__cols { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.cta__strip { display: none; }
.cta__col { overflow: hidden; }
.cta__track { display: flex; flex-direction: column; gap: 12px; will-change: transform; }
.cta__track img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
@keyframes rfk-up { to { transform: translateY(calc(-50% - 6px)); } }
@keyframes rfk-down { from { transform: translateY(calc(-50% - 6px)); } to { transform: translateY(0); } }
@keyframes rfk-left { to { transform: translateX(calc(-50% - 5px)); } }
@media (prefers-reduced-motion: no-preference) {
  .cta__col--up .cta__track { animation: rfk-up 48s linear infinite; }
  .cta__col--down .cta__track { animation: rfk-down 48s linear infinite; }
  /* Fuera de pantalla o pausado por la persona: sin movimiento */
  .cta__track--x { animation: rfk-left 34s linear infinite; }
  .cta__art:not(.is-visible) .cta__track, .cta__art.is-paused .cta__track { animation-play-state: paused; }
}
.cta__col--down .cta__track { transform: translateY(calc(-50% - 6px)); }
.cta__pause {
  position: absolute;
  right: 22px;
  bottom: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  opacity: .7;
  transition: opacity .2s, background-color .2s;
}
.cta__pause:hover, .cta__pause:focus-visible { opacity: 1; background: rgba(0, 0, 0, .8); }
.cta__pause span { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.cta__pause[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
@media (prefers-reduced-motion: reduce) { .cta__pause { display: none; } }

/* ---------- FAQ ---------- */
.faq { background: #000; }
.faq__wrap { padding: 3rem 5%; }
.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
  max-width: 100rem;
  margin: 0 auto;
  padding: 5rem 0 2rem;
}
.faq__head { align-self: start; }
.faq__title { margin-top: 0; color: #fff; font-family: var(--slab); font-size: 3rem; font-weight: 600; line-height: 1.2; }
.faq__intro { max-width: 26rem; margin-top: 1.25rem; color: var(--mute-dark); font-family: var(--inter); font-size: 1rem; line-height: 1.6; }
.faq__intro a { display: inline; color: #fff; text-underline-offset: 3px; }
.faq__item { border-top: 1px solid #333; }
.faq__item:last-child { border-bottom: 1px solid #333; }
.faq__h { margin: 0; font-size: inherit; }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; width: 100%; padding: 1.1rem 0; color: #f2f2f2; text-align: left; }
.faq__q-text {
  color: #f2f2f2;
  font-family: var(--slab);
  font-size: 1.25rem;
  line-height: 1.4;
  transition: color .2s;
}
.faq__q:hover .faq__q-text { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.faq__icon { display: flex; flex: none; width: 2rem; color: #fff; transition: transform .3s ease; }
.faq__icon svg { flex: none; width: 2rem; height: 2rem; }
.faq__item.is-open .faq__icon { transform: rotate(180deg); }
/* Sin JS las respuestas quedan visibles; con JS se colapsan */
.js .faq__a { height: 0; overflow: hidden; transition: height .3s ease; }
.faq__a-inner { padding: 0 3.5rem 1.5rem 0; }
.faq__a p { margin: 0 0 .75rem; color: var(--mute-dark); font-family: var(--inter); font-size: 1rem; font-weight: 400; line-height: 1.65; }
.faq__a ul { margin: 0 0 .75rem; padding-left: 1.2rem; color: var(--mute-dark); font-family: var(--inter); font-size: 1rem; line-height: 1.65; }
.faq__a a { display: inline; color: #fff; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.faq__a a:hover { text-decoration-thickness: 2px; }
.faq__cta { margin-top: 1rem !important; color: #fff !important; }
@media (prefers-reduced-motion: reduce) {
  .js .faq__a, .faq__icon { transition: none; }
}

/* ==========================================================================
   Tablet (≤991px)
   ========================================================================== */
@media (max-width: 991px) {
  .hero__inner { padding: 6rem 0; }
  .hero__title { font-size: 3.25rem; }
  .manifesto__text, .h2 { font-size: 2.75rem; }
  .testimonials { padding: 6rem 0; }
  .quotes { grid-template-columns: 1fr; gap: 1.25rem; }
  .quote--main { grid-row: auto; padding: 2.5rem; }
  .quote--main p { font-size: 1.625rem; }
  .faq__title { font-size: 2.75rem; }
  .brands { padding: 6rem 0 5rem; }
  .brands__head { grid-template-columns: 1fr; }
  .brands__wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cta__card { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .cta__body .btn { white-space: normal; }
  .cta__cols { display: none; }
  /* Móvil/tablet: franja horizontal que llega a ambos laterales y al borde inferior */
  .cta__art { height: auto; }
  .cta__strip { display: block; overflow: hidden; }
  .cta__track--x { display: flex; flex-direction: row; gap: 10px; width: max-content; }
  .cta__track--x img { width: 12.5rem; flex: none; }
  .brands__cell--you { grid-column: span 3; }
  .faq__grid { padding: 6rem 0; }
}

/* ==========================================================================
   Móvil horizontal (≤767px)
   ========================================================================== */
@media (max-width: 767px) {
  .hero__inner { padding: 4rem 0; }
  .hero__title { font-size: 2.5rem; }
  .hero__lead { font-size: 1rem; }
  .manifesto__text, .h2 { font-size: 2.25rem; }
  .section-head__lead, .contact__lead { font-size: 1rem; }
  .testimonials { padding: 4.5rem 0; }
  .quotes { grid-template-columns: 1fr; gap: 1rem; }
  .quote { padding: 1.5rem 1.25rem 1.25rem; }
  .quote--main { padding: 1.75rem 1.35rem; gap: 1.5rem; }
  .quote--main p { font-size: 1.2rem; line-height: 1.4; }
  .quote p { font-size: 1rem; line-height: 1.55; }
  .brands__lead { font-size: 1rem; line-height: 1.55; }
  /* «Tu empresa merece una marca / a la altura»: el acento sigue en la misma línea para aprovechar el ancho */
  .cta__title { text-wrap: balance; }
  .cta__accent { display: inline; }
  .faq__title { font-size: 2.25rem; }
  .cta { padding-bottom: 5rem; }
  .cta__title { font-size: 1.65rem; }
  .cta__body { padding: 2.5rem 1.75rem 2.25rem; }
  .cta__body .btn { padding-left: 1.5rem; padding-right: 1.5rem; }
  .cta__text { font-size: 1.0625rem; }
  .cta__track--x img { width: 9.5rem; }
  .brands__wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brands__wall { gap: 1.75rem 1.25rem; }
  .brands__cell { min-height: 4.25rem; }
  .brands__cell--you { grid-column: span 2; }
  /* Logos más contenidos en móvil: misma reducción para todos, conserva el equilibrio por área */
  .brands__logo { max-width: 100%; scale: .7; }
  .faq__grid { padding: 4rem 0; }
  .faq__q { padding: 1rem 0; }
  .faq__icon { width: 1.75rem; }
  .faq__a-inner { padding-right: 0; }
}

/* ==========================================================================
   Móvil (≤479px)
   ========================================================================== */
@media (max-width: 479px) {
  .hero__inner { padding: 7.5rem 0 4rem; }
  .hero__title { font-size: 3.1rem; line-height: .9; }
  .hero__big { font-size: 2.4rem; line-height: 1; text-align: left; }
  .hero__accent-wrap { font-size: 2.7rem; }
  .hero__lead { margin-bottom: 0; font-size: 1.2rem; font-weight: 300; line-height: 30px; }
  .hero__actions { margin-top: 0; }
  .hero__btn-group { margin-top: 18px; }
  .hero .btn--blue { padding: .4rem 1.8rem; font-size: 1rem; line-height: 36px; }
  .avatars { padding-left: .5rem; }
  .avatars__text { margin: 11px 0 0 -12px; padding-left: 0; }
  .manifesto { padding-top: 0; }
  /* Párrafo «En Refreska diseñamos marcas…»: texto aprobado, con menos altura en pantalla */
  .manifesto__text { font-size: 1.22rem; line-height: 1.3; }
  .manifesto__accent { font-style: normal; font-weight: 400; }
  .manifesto__sm { font-size: 1.5rem; }
  .manifesto__actions { margin-top: 2rem; }
  .section-head { text-align: left; }
  .h2 { text-align: left; font-size: 2rem; line-height: 1.1; }
  .section-head__lead, .contact__lead { text-align: left; margin-bottom: 26px; font-size: 16.5px; }
  .section-head__lead { line-height: 24px; }
  .contact__lead { font-family: var(--inter); }
  .faq__grid { grid-template-columns: 1fr; padding: 4rem 0 1rem; }
  .faq__q-text { font-size: 1.125rem; }
}

/* Pantallas bajas en móvil (alto visible ≤ 700 px): un poco menos de aire sobre el texto y alrededor del botón principal para que quede
   por encima de la franja del aviso de medición. Solo ajusta espacios (≈ 43 px en total); el diseño del Home no cambia. */
@media (max-width: 479px) and (max-height: 700px) {
  .hero__inner { padding-top: 6rem; }
  .hero__title { margin: 14px 0 10px; }
  .hero__btn-group { margin-top: 10px; }
}
/* Ajuste fino: altura de línea de los taglines igual al original (≥480px) */
@media (min-width: 480px) {
  .hero__tagline, .section-head__tag { padding-bottom: 1px; }
}

/* Pantallas muy angostas (≤360 px): el botón del CTA cabe en una línea */
@media (max-width: 360px) {
  .cta__body .btn { padding-left: 1.1rem; padding-right: 1.1rem; font-size: .9375rem; }
}