:root {
  --ink: #151515;
  --paper: #f4efe7;
  --paper-2: #e8dfd2;
  --white: #fffdf9;
  --line: rgba(21, 21, 21, 0.12);
  --line-strong: rgba(21, 21, 21, 0.18);
  --shadow: 0 18px 40px rgba(21, 21, 21, 0.08);
  --purple: #b899c8;
  --yellow: #fcd751;
  --blue: #65c9f3;
  --coral: #f08689;
  --max: 1240px;
  --radius: 28px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
}

a {
  color: inherit;
  text-decoration: none;
}

img, video {
  max-width: 100%;
  display: block;
}

.page-shell {
  padding: 0 24px 48px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(244, 239, 231, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.site-header-inner,
.section-inner,
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
}

.site-header-inner {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.brand img {
  width: 42px;
  height: auto;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-text strong {
  font-family: "panel-sans", "Panel Sans", Montserrat, Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 520;
  letter-spacing: 0.02em;
}

.brand-text span {
  font-size: 0.77rem;
  color: rgba(21,21,21,0.68);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.main-nav a {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(21,21,21,0.75);
  transition: color 0.2s ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--ink);
}

.section {
  padding: 72px 0;
}

.section:first-of-type {
  padding-top: 48px;
}

.hero {
  padding: 84px 0 40px;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.83rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(21,21,21,0.68);
  margin-bottom: 18px;
}

.kicker::before {
  content: '';
  width: 34px;
  height: 1px;
  background: var(--ink);
  opacity: 0.35;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 44px;
  align-items: end;
}

.hero h1,
.section-title,
.cta-title,
.page-title {
  font-family: "panel-sans", "Panel Sans", Montserrat, Arial, sans-serif;
  font-size: clamp(2.8rem, 5vw, 5.35rem);
  line-height: 0.98;
  font-weight: 470;
  letter-spacing: -0.025em;
  margin: 0;
}

.hero h1 .accent,
.section-title .accent,
.cta-title .accent,
.page-title .accent {
  font-style: italic;
  font-weight: 320;
}

.hero-copy p,
.page-intro p,
.section-intro p,
.project-summary {
  max-width: 67ch;
  font-size: 1.04rem;
  color: rgba(21,21,21,0.78);
}

.hero-actions,
.cta-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.button,
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  font-weight: 700;
  font-size: 0.96rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.button {
  background: var(--ink);
  color: var(--paper);
}

.button-secondary {
  background: transparent;
  color: var(--ink);
}

.button:hover,
.button-secondary:hover,
.project-preview-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.hero-note {
  background: rgba(255,255,255,0.45);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
}

.hero-note h2 {
  margin: 0 0 14px;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-note ul {
  margin: 0;
  padding-left: 20px;
  color: rgba(21,21,21,0.8);
}

.hero-note li + li {
  margin-top: 10px;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  margin-bottom: 34px;
}

.section-label {
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(21,21,21,0.64);
  margin-bottom: 12px;
}

.section-title {
  font-size: clamp(2.2rem, 4vw, 3.5rem);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.service-card,
.project-preview-card,
.project-card,
.quote-card,
.mosaic-card {
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(21,21,21,0.04);
}

.service-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.service-figure {
  padding: 22px 22px 0;
}

.service-figure img {
  width: 100%;
  aspect-ratio: 1.05;
  object-fit: contain;
}

.service-body {
  padding: 14px 22px 24px;
}

.service-body h3 {
  margin: 0 0 12px;
  font-size: 1.3rem;
  line-height: 1.15;
  font-family: "panel-sans", "Panel Sans", Montserrat, Arial, sans-serif;
  font-weight: 470;
}

.service-body p {
  margin: 0 0 16px;
  color: rgba(21,21,21,0.78);
}

.tags,
.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag,
.meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 600;
  border: 1px solid rgba(21,21,21,0.1);
  background: rgba(255,255,255,0.75);
}

.tag.purple, .meta-pill.purple { background: rgba(184,153,200,0.18); }
.tag.yellow, .meta-pill.yellow { background: rgba(252,215,81,0.22); }
.tag.blue, .meta-pill.blue { background: rgba(101,201,243,0.2); }
.tag.coral, .meta-pill.coral { background: rgba(240,134,137,0.2); }

.projects-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 1.1fr);
  gap: 48px;
  align-items: center;
}

.preview-copy {
  padding-right: 12px;
}

.project-preview-card {
  display: block;
  padding: 18px;
}

.project-preview-card img {
  width: 100%;
  border-radius: calc(var(--radius) - 10px);
  border: 1px solid var(--line);
}

.project-preview-card small {
  display: block;
  margin-top: 14px;
  color: rgba(21,21,21,0.62);
}

.page-hero {
  padding: 52px 0 14px;
}

.page-title {
  font-size: clamp(2.6rem, 4.8vw, 4.8rem);
  margin-bottom: 14px;
}

.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: rgba(21,21,21,0.72);
  margin-bottom: 20px;
}

.project-section {
  padding: 54px 0 68px;
  border-top: 1px solid var(--line);
}

.project-head {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 1.05fr);
  gap: 30px;
  align-items: end;
  margin-bottom: 26px;
}

.project-logo-wrap {
  padding: 10px 0 4px;
}

.project-logo-wrap img,
.project-logo-wrap svg {
  max-height: 110px;
  width: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.project-gallery-bdg {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
  align-items: start;
}

.project-gallery-bdg .main-visual img {
  aspect-ratio: 0.95;
  object-fit: cover;
  width: 100%;
}

.stack {
  display: grid;
  gap: 18px;
}

.project-card img,
.project-card video,
.mosaic-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-card.copy-card {
  padding: 26px;
}

.copy-card p:last-child {
  margin-bottom: 0;
}

.mosaic-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  grid-auto-flow: dense;
}

.mosaic-card {
  min-height: 180px;
}

.mosaic-card img {
  min-height: 100%;
}

.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }
.rows-2 { grid-row: span 2; }
.rows-3 { grid-row: span 3; }
.tall { min-height: 520px; }
.medium { min-height: 380px; }
.short { min-height: 240px; }

.quote-card {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.52), rgba(255,255,255,0.7));
}

.quote-card blockquote {
  margin: 0;
  font-family: "panel-sans", "Panel Sans", Montserrat, Arial, sans-serif;
  font-size: clamp(1.5rem, 3.3vw, 2.5rem);
  line-height: 1.08;
}

.quote-card cite {
  margin-top: 18px;
  font-style: normal;
  font-weight: 600;
  color: rgba(21,21,21,0.62);
}

.cta {
  padding: 88px 0 74px;
}

.cta-box {
  background: rgba(255,255,255,0.55);
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid var(--line);
  padding: 40px;
}

.cta-title {
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  margin-bottom: 12px;
}

.cta-box p {
  max-width: 58ch;
  color: rgba(21,21,21,0.78);
}

.footer {
  border-top: 1px solid var(--line);
  padding: 26px 0 40px;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: rgba(21,21,21,0.62);
  font-size: 0.92rem;
}

@media (max-width: 980px) {
  .hero-grid,
  .projects-preview-grid,
  .project-head,
  .project-gallery-bdg,
  .services-grid {
    grid-template-columns: 1fr;
  }

  .section-head {
    display: block;
  }

  .main-nav {
    gap: 14px;
    justify-content: flex-end;
  }

  .mosaic-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .span-8, .span-7, .span-6, .span-5, .span-4, .span-3, .span-12 {
    grid-column: span 6;
  }

  .tall { min-height: 420px; }
  .medium { min-height: 320px; }
}

@media (max-width: 720px) {
  .page-shell {
    padding: 0 16px 36px;
  }

  .site-header-inner {
    min-height: 74px;
    align-items: flex-start;
    padding: 14px 0;
    flex-direction: column;
  }

  .brand img {
    width: 34px;
  }

  .main-nav {
    width: 100%;
    justify-content: space-between;
    font-size: 0.9rem;
  }

  .hero,
  .section,
  .project-section,
  .cta {
    padding-top: 46px;
    padding-bottom: 46px;
  }

  .hero h1,
  .page-title {
    font-size: clamp(2.45rem, 10vw, 4rem);
  }

  .mosaic-grid {
    grid-template-columns: 1fr;
  }

  .span-8, .span-7, .span-6, .span-5, .span-4, .span-3, .span-12 {
    grid-column: span 1;
  }

  .quote-card,
  .cta-box,
  .project-card.copy-card {
    padding: 24px;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* Correcciones v3 */
.site-header {
  border-bottom: 1px solid var(--line);
}

.hero-note,
.project-preview-card small {
  display: none !important;
}

.service-card,
.project-preview-card,
.cta-box {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.service-card {
  padding: 0 !important;
}

.service-body h3 {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
}

.section,
.hero,
.projects-preview-grid,
.cta {
  border-top: 1px solid rgba(21, 21, 21, 0.13);
}

.hero {
  border-top: 0;
}

/* Portfolio preview destacado */
#proyectos {
  background: var(--ink);
  color: var(--paper);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  border-top: 1px solid rgba(244, 239, 231, 0.22);
  border-bottom: 1px solid rgba(244, 239, 231, 0.22);
}

#proyectos .section-label,
#proyectos p {
  color: rgba(244, 239, 231, 0.72);
}

#proyectos .button {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

#proyectos .project-preview-card img {
  width: 100%;
  aspect-ratio: 1.55;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
}

.project-preview-card {
  padding: 0 !important;
}

.cta {
  border-top: 1px solid rgba(21, 21, 21, 0.13);
}

@media (max-width: 980px) {
  #proyectos {
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* Correcciones v4 */
html, body, a, button {
  cursor: url("assets/logos/cursor-packup.png") 8 8, auto;
}

.hero h1,
.page-title {
  font-size: clamp(3.15rem, 5.8vw, 6.2rem);
}

.section-title,
.cta-title {
  font-size: clamp(2.55rem, 4.6vw, 4.35rem);
}

.site-header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
}

.header-art {
  width: clamp(62px, 7vw, 96px);
  height: auto;
  justify-self: end;
}

.main-nav {
  justify-self: end;
}

#servicios .section-head {
  margin-bottom: 14px;
}

.services-grid {
  display: block;
  margin-top: 48px;
}

.service-card {
  min-height: 82vh;
  display: grid !important;
  grid-template-columns: minmax(300px, 0.95fr) minmax(320px, 1.05fr);
  gap: clamp(32px, 6vw, 90px);
  align-items: center;
  padding: 54px 0 !important;
  border-top: 1px solid rgba(21, 21, 21, 0.13) !important;
}

.service-card:last-child {
  border-bottom: 1px solid rgba(21, 21, 21, 0.13) !important;
}

.service-figure {
  position: sticky;
  top: 112px;
}

.service-figure img {
  width: min(100%, 520px);
  margin: 0 auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.service-body {
  padding: 0 !important;
  max-width: 560px;
}

.service-body h3 {
  font-size: clamp(2.2rem, 4.2vw, 4.6rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.04em !important;
  margin-bottom: 24px !important;
}

.service-body p {
  font-size: clamp(1.02rem, 1.45vw, 1.25rem) !important;
  line-height: 1.42 !important;
  margin-bottom: 22px !important;
}

.service-card:nth-child(2) .service-figure {
  order: 2;
}

.service-card:nth-child(2) .service-body {
  order: 1;
}

@keyframes serviceReveal {
  from {
    opacity: 0.35;
    transform: translateY(54px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@supports (animation-timeline: view()) {
  .service-card {
    animation: serviceReveal both ease-out;
    animation-timeline: view();
    animation-range: entry 5% cover 38%;
  }

  .service-figure img {
    animation: serviceReveal both ease-out;
    animation-timeline: view();
    animation-range: entry 10% cover 45%;
  }
}

@media (max-width: 980px) {
  .site-header-inner {
    grid-template-columns: 1fr auto;
  }

  .main-nav {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .header-art {
    width: 66px;
  }

  .service-card,
  .service-card:nth-child(2) {
    grid-template-columns: 1fr !important;
    min-height: auto;
    padding: 46px 0 !important;
  }

  .service-card:nth-child(2) .service-figure,
  .service-card:nth-child(2) .service-body {
    order: initial;
  }

  .service-figure {
    position: static;
  }

  .service-body h3 {
    font-size: clamp(2.1rem, 9vw, 3.6rem) !important;
  }
}


/* Correcciones v5 */
html, body, a, button {
  cursor: url("assets/logos/cursor-packup.png") 8 8, auto;
}

/* Menú limpio: solo navegación, sin ilustración */
.site-header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

.header-art {
  display: none !important;
}

.main-nav {
  justify-self: auto !important;
}

/* Cabecera con ilustración de caja dentro del hero */
.hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.72fr) !important;
  gap: clamp(28px, 6vw, 86px) !important;
  align-items: center !important;
}

.hero-art {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.hero-art img {
  width: min(100%, 420px);
  height: auto;
}

/* Frase principal ajustada */
.hero h1,
.page-title {
  font-size: clamp(3.35rem, 6.1vw, 6.45rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.018em !important;
}

.hero h1 .accent {
  font-style: italic;
  font-weight: 300;
}

/* Servicios: menos cuerpo en títulos y menos espacio entre subbloques */
.service-card {
  min-height: 58vh !important;
  padding: 34px 0 !important;
  gap: clamp(24px, 4vw, 58px) !important;
}

.service-figure {
  top: 96px !important;
}

.service-figure img {
  width: min(100%, 430px) !important;
}

.service-body h3 {
  font-family: "panel-sans", "Panel Sans", Montserrat, Arial, sans-serif !important;
  font-weight: 420 !important;
  font-size: clamp(2rem, 3.3vw, 3.65rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.026em !important;
  margin-bottom: 18px !important;
}

.service-body p {
  font-size: clamp(0.98rem, 1.22vw, 1.12rem) !important;
  line-height: 1.42 !important;
  margin-bottom: 16px !important;
}

.services-grid {
  margin-top: 30px !important;
}

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

  .hero-art {
    justify-content: flex-start;
  }

  .hero-art img {
    width: min(100%, 330px);
  }

  .site-header-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .service-card {
    min-height: auto !important;
    padding: 34px 0 !important;
  }

  .service-body h3 {
    font-size: clamp(2rem, 8vw, 3rem) !important;
  }
}


/* Correcciones v6 */
:root {
  --display: "panel-sans", "Panel Sans", "Montserrat", Arial, sans-serif;
}

/* H1 y destacados con Panel Sans */
.hero h1,
.page-title,
.section-title,
.cta-title {
  font-family: var(--display) !important;
  font-weight: 650 !important;
  letter-spacing: -0.055em !important;
}

.hero h1 .accent,
.page-title .accent,
.section-title .accent,
.cta-title .accent {
  font-family: var(--display) !important;
  font-style: normal !important;
  font-weight: 350 !important;
  letter-spacing: -0.06em !important;
}

/* Título de servicios sin cursiva */
#servicios .section-title,
#servicios .section-title .accent {
  font-style: normal !important;
}

/* La nueva caja sin fondo respira mejor */
.hero-art img {
  width: min(100%, 460px) !important;
  transform-origin: center;
}

/* Movimiento suave al pasar el cursor por las imágenes de servicios */
.service-figure img {
  transition: transform 0.45s ease, filter 0.45s ease;
  will-change: transform;
}

.service-card:hover .service-figure img {
  transform: translateY(-10px) rotate(-1.5deg) scale(1.035);
  filter: drop-shadow(0 18px 24px rgba(21, 21, 21, 0.10));
}

.service-card:nth-child(2):hover .service-figure img {
  transform: translateY(-10px) rotate(1.5deg) scale(1.035);
}

.service-card:nth-child(3):hover .service-figure img {
  transform: translateY(-10px) rotate(-0.8deg) scale(1.035);
}

@media (prefers-reduced-motion: reduce) {
  .service-figure img,
  .service-card:hover .service-figure img,
  .service-card:nth-child(2):hover .service-figure img,
  .service-card:nth-child(3):hover .service-figure img {
    transition: none !important;
    transform: none !important;
  }
}


/* Correcciones v7: Panel Sans real + cabecera más contenida */
:root {
  --display: "panel-sans", "Panel Sans", Montserrat, Arial, sans-serif;
}

/* Todo lo que antes era Late Serif pasa a Panel Sans */
.hero h1,
.page-title,
.section-title,
.cta-title,
.service-body h3,
.quote-card blockquote,
.brand-text strong {
  font-family: var(--display) !important;
}

/* Cabecera más pequeña para evitar 7 líneas */
.hero h1 {
  max-width: 760px !important;
  font-size: clamp(2.55rem, 4.55vw, 4.85rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
  font-weight: 620 !important;
}

.hero h1 .accent {
  font-family: var(--display) !important;
  font-style: normal !important;
  font-weight: 360 !important;
  letter-spacing: -0.047em !important;
}

.hero-grid {
  grid-template-columns: minmax(0, 0.98fr) minmax(280px, 0.78fr) !important;
  gap: clamp(26px, 5vw, 72px) !important;
}

.hero-art img {
  width: min(100%, 430px) !important;
}

/* Títulos secundarios también en Panel Sans, pero sin pasarse de tamaño */
.section-title,
.cta-title,
.page-title {
  font-family: var(--display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.04em !important;
}

.section-title {
  font-size: clamp(2.2rem, 3.6vw, 3.55rem) !important;
  line-height: 1.02 !important;
}

.service-body h3 {
  font-family: var(--display) !important;
  font-weight: 520 !important;
  font-size: clamp(1.75rem, 2.7vw, 3.05rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.04em !important;
}

@media (max-width: 980px) {
  .hero h1 {
    max-width: 100% !important;
    font-size: clamp(2.35rem, 7.5vw, 3.9rem) !important;
  }
}

@media (max-width: 720px) {
  .hero h1 {
    font-size: clamp(2.15rem, 9vw, 3.25rem) !important;
    line-height: 1.04 !important;
  }
}


/* Ajustes v8 */
.hero h1 {
  font-size: clamp(2.3rem, 4.25vw, 4.6rem) !important;
  line-height: 1.09 !important;
  letter-spacing: -0.043em !important;
  max-width: 820px !important;
}

.hero-grid {
  grid-template-columns: minmax(0, 0.96fr) minmax(320px, 0.84fr) !important;
  gap: clamp(28px, 5vw, 74px) !important;
}

.hero-art {
  display: flex;
  justify-content: center;
  align-items: end;
}

.hero-art img {
  width: min(100%, 500px) !important;
}

.idea-word {
  display: inline-flex;
  gap: 0.01em;
}

.idea-word .c-blue { color: var(--blue); }
.idea-word .c-yellow { color: var(--yellow); }
.idea-word .c-purple { color: var(--purple); }
.idea-word .c-coral { color: var(--coral); }

@media (max-width: 980px) {
  .hero h1 {
    font-size: clamp(2.15rem, 6.9vw, 3.65rem) !important;
    line-height: 1.1 !important;
  }
  .hero-art img {
    width: min(100%, 460px) !important;
  }
}

@media (max-width: 720px) {
  .hero h1 {
    font-size: clamp(2rem, 8.2vw, 3.05rem) !important;
    line-height: 1.11 !important;
  }
  .hero-art img {
    width: min(100%, 390px) !important;
  }
}


/* Cursor v9: PNG pequeño, más compatible que SVG */
html,
body {
  cursor: url("assets/logos/cursor-packup.png") 8 8, auto !important;
}

a,
button,
.button,
.button-secondary,
.project-preview-card,
[role="button"] {
  cursor: url("assets/logos/cursor-packup.png") 8 8, pointer !important;
}


/* Ajustes v10 */

/* Punto animado del H1 */
.hero-dot {
  animation: heroDotColor 8s steps(1, end) infinite;
}

@keyframes heroDotColor {
  0%, 24.99% { color: var(--blue); }
  25%, 49.99% { color: var(--yellow); }
  50%, 74.99% { color: var(--purple); }
  75%, 100% { color: var(--coral); }
}

/* Book packaging en cursiva dentro del título */
.service-body h3 em {
  font-style: italic;
  font-weight: inherit;
}

/* Animación suave de textos al hacer scroll */
.hero-copy,
.section-intro,
.service-body,
.preview-copy,
.cta-box,
.project-summary,
.project-head {
  animation: textScrollIn both ease-out;
  animation-timeline: view();
  animation-range: entry 4% cover 32%;
}

@keyframes textScrollIn {
  from {
    opacity: 0.22;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fallback para navegadores sin scroll-timeline */
@supports not (animation-timeline: view()) {
  .hero-copy,
  .section-intro,
  .service-body,
  .preview-copy,
  .cta-box,
  .project-summary,
  .project-head {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-dot,
  .hero-copy,
  .section-intro,
  .service-body,
  .preview-copy,
  .cta-box,
  .project-summary,
  .project-head {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* Ajustes v11 */

/* Labels sin trazo */
.tag,
.meta-pill {
  border: 0 !important;
  box-shadow: none !important;
}

/* Animación visible y compatible al hacer scroll */
.reveal-text {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 0.75s ease,
    transform 0.75s ease;
}

.reveal-text.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-text.delay-1 {
  transition-delay: 0.08s;
}

.reveal-text.delay-2 {
  transition-delay: 0.16s;
}

.reveal-text.delay-3 {
  transition-delay: 0.24s;
}

/* Evita conflicto con el intento anterior de scroll-timeline */
.hero-copy,
.section-intro,
.service-body,
.preview-copy,
.cta-box,
.project-summary,
.project-head {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-text,
  .reveal-text.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* Ajustes v12 */

/* Etiquetas sin filete, aunque haya reglas anteriores */
.tag,
.meta-pill,
.tags span,
.service-body .tags span,
.project-meta span {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Botones sin doble línea */
.button,
.button-secondary,
.cta-actions a,
.hero-actions a {
  white-space: nowrap !important;
  text-align: center;
}

/* Móvil */
@media (max-width: 720px) {
  .page-shell {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .section-inner,
  .site-header-inner,
  .footer-inner {
    width: 100%;
  }

  .site-header-inner {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 12px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .brand {
    width: 100%;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .brand img {
    width: 38px !important;
    margin-top: 0 !important;
  }

  .brand-text {
    align-items: flex-start;
    text-align: left;
  }

  .main-nav {
    width: 100%;
    justify-content: center !important;
    gap: 18px !important;
    text-align: center;
  }

  .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
  }

  .hero-art {
    order: -1 !important;
    width: 100%;
    justify-content: center !important;
  }

  .hero-art img {
    width: min(86vw, 360px) !important;
    margin: 0 auto !important;
  }

  .hero-copy {
    text-align: center;
  }

  .hero h1 {
    max-width: 100% !important;
    font-size: clamp(2rem, 8.2vw, 3rem) !important;
    line-height: 1.1 !important;
  }

  .hero-copy p {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions,
  .cta-actions {
    justify-content: center !important;
    gap: 10px !important;
  }

  .button,
  .button-secondary {
    min-height: 44px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    font-size: 0.82rem !important;
    max-width: 100%;
  }

  .section-head,
  .section-intro,
  .preview-copy,
  .cta-box {
    text-align: center;
  }

  .section-intro p,
  .preview-copy p,
  .cta-box p {
    margin-left: auto;
    margin-right: auto;
  }

  .service-card,
  .service-card:nth-child(2) {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    padding: 32px 0 !important;
    text-align: center;
  }

  .service-card .service-figure,
  .service-card:nth-child(2) .service-figure {
    order: -1 !important;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .service-card .service-body,
  .service-card:nth-child(2) .service-body {
    order: 0 !important;
    max-width: 100% !important;
  }

  .service-figure img {
    width: min(82vw, 330px) !important;
    margin: 0 auto !important;
  }

  .service-body h3 {
    font-size: clamp(1.85rem, 8vw, 2.75rem) !important;
  }

  .tags,
  .project-meta {
    justify-content: center !important;
  }

  .projects-preview-grid {
    text-align: center;
  }

  .project-preview-card img {
    margin-left: auto;
    margin-right: auto;
  }
}


/* Ajustes v14 */

/* Cursor: negro normal y versión clara para elementos clicables */
html,
body {
  cursor: url("assets/logos/cursor-packup.png") 8 8, auto !important;
}

a,
button,
.button,
.button-secondary,
.project-preview-card,
[role="button"],
.main-nav a,
.brand,
.tags .tag {
  cursor: url("assets/logos/cursor-packup-click.png") 8 8, pointer !important;
}

/* No separar la expresión "universos narrativos" */
.no-break {
  white-space: nowrap;
}

/* Preview del portfolio más pequeña y sin recorte */
.project-preview-card {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

#proyectos .project-preview-card img {
  width: min(100%, 860px) !important;
  max-width: 100%;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  display: block;
  margin: 0 auto;
}

@media (max-width: 980px) {
  #proyectos .project-preview-card img {
    width: min(100%, 720px) !important;
  }
}

@media (max-width: 720px) {
  #proyectos .project-preview-card img {
    width: 100% !important;
  }
}


/* Ajustes v15 */

/* Las etiquetas no son clicables: cursor normal */
.tags,
.tags span,
.tag,
.meta-pill,
.service-body .tags span,
.project-meta span {
  cursor: url("assets/logos/cursor-packup.png") 8 8, auto !important;
}

/* Cursor de color solo en elementos que sí se pueden clicar */
a,
button,
.button,
.button-secondary,
.project-preview-card,
[role="button"],
.main-nav a,
.brand {
  cursor: url("assets/logos/cursor-packup-click.png") 8 8, pointer !important;
}

/* Imagen de portfolio un 5% más pequeña */
#proyectos .project-preview-card img {
  width: min(95%, 817px) !important;
}


/* Ajustes v16: logo, cursores y SEO */
.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 14px;
  border-radius: 999px;
  z-index: 100;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 12px;
}

/* Nuevo logo y claim oculto */
.brand {
  gap: 0 !important;
}

.brand img {
  width: clamp(150px, 18vw, 210px) !important;
  height: auto;
}

.brand-text {
  display: none !important;
}

/* Cursores nuevos */
html,
body,
.tags,
.tags span,
.tag,
.meta-pill,
.service-body .tags span,
.project-meta span {
  cursor: url("assets/logos/cursor-packup.png") 8 8, auto !important;
}

a,
button,
.button,
.button-secondary,
.project-preview-card,
[role="button"],
.main-nav a,
.brand {
  cursor: url("assets/logos/cursor-packup-click.png") 8 8, pointer !important;
}

@media (max-width: 720px) {
  .brand img {
    width: min(52vw, 180px) !important;
  }
}


/* Ajuste v17: cursor blanco sobre fondo negro */
#proyectos,
#proyectos .section-inner,
#proyectos .preview-copy,
#proyectos .preview-copy *,
#proyectos .section-label,
#proyectos .section-title,
#proyectos p {
  cursor: url("assets/logos/cursor-packup-white.png") 8 8, auto !important;
}

#proyectos a,
#proyectos button,
#proyectos .button,
#proyectos .button-secondary,
#proyectos .project-preview-card,
#proyectos .project-preview-card *,
#proyectos [role="button"] {
  cursor: url("assets/logos/cursor-packup-click.png") 8 8, pointer !important;
}


/* Ajustes v18: nueva página de proyectos */
.portfolio-body {
  background: var(--paper);
}

.portfolio-main {
  padding-bottom: 32px;
}

.portfolio-intro {
  padding: 64px 0 42px;
  border-bottom: 1px solid rgba(21, 21, 21, 0.13);
}

.portfolio-intro .page-title {
  max-width: 980px !important;
  font-family: var(--display) !important;
  font-size: clamp(2.7rem, 5vw, 5.15rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
  margin: 0 0 20px;
}

.page-intro-text {
  max-width: 70ch;
  font-size: 1.02rem;
  color: rgba(21,21,21,0.72);
  font-weight: 500;
}

.portfolio-list {
  display: grid;
  gap: 0;
}

.portfolio-case {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(420px, 1.22fr);
  gap: clamp(34px, 6vw, 84px);
  align-items: start;
  padding: clamp(54px, 7vw, 92px) 0;
  border-bottom: 1px solid rgba(21, 21, 21, 0.13);
}

.case-info {
  position: sticky;
  top: 112px;
  align-self: start;
  padding-right: 8px;
}

.project-logo {
  font-family: var(--display);
  font-weight: 680;
  font-size: clamp(2.55rem, 4.6vw, 5rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
  margin-bottom: 26px;
}

.project-logo .logo-accent {
  color: #0e6c77;
}

.project-description {
  max-width: 48ch;
  font-size: clamp(1rem, 1.2vw, 1.16rem);
  color: rgba(21,21,21,0.76);
  font-weight: 500;
  line-height: 1.48;
  margin: 0 0 22px;
}

.project-tags {
  margin: 0 0 24px;
}

.case-meta {
  display: grid;
  gap: 12px;
  margin: 0 0 28px;
  font-size: 0.9rem;
}

.case-meta div {
  display: grid;
  gap: 2px;
}

.case-meta dt {
  font-weight: 800;
  letter-spacing: -0.01em;
}

.case-meta dd {
  margin: 0;
  color: rgba(21,21,21,0.68);
  font-weight: 500;
}

.project-quote {
  margin: 32px 0 0;
  padding: 0 0 0 18px;
  border-left: 1px solid rgba(21,21,21,0.36);
  font-family: var(--display);
  font-size: clamp(1.4rem, 2vw, 2.1rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: rgba(21,21,21,0.88);
}

.case-gallery {
  display: grid;
  gap: 20px;
}

.case-image {
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}

.case-image img {
  width: 100%;
  height: auto;
  display: block;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#primer .case-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#primer .case-image:first-child {
  grid-column: span 2;
}

#primer .case-image img {
  object-fit: cover;
}

#surrealista .case-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#surrealista .case-image:first-child {
  grid-column: span 2;
}

#bolsas .case-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#bolsas .case-image:first-child,
#bolsas .case-image:nth-child(4) {
  grid-column: span 2;
}

/* La animación de textos también actúa en la nueva página */
.portfolio-intro,
.case-info {
  transition: opacity 0.75s ease, transform 0.75s ease;
}

@media (max-width: 980px) {
  .portfolio-case {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .case-info {
    position: static;
    top: auto;
    text-align: left;
  }

  .project-description {
    max-width: 70ch;
  }
}

@media (max-width: 720px) {
  .portfolio-intro {
    text-align: center;
    padding: 44px 0 32px;
  }

  .portfolio-intro .kicker {
    justify-content: center;
  }

  .portfolio-intro .page-title {
    font-size: clamp(2.15rem, 9vw, 3.35rem) !important;
  }

  .page-intro-text {
    margin-left: auto;
    margin-right: auto;
  }

  .portfolio-case {
    padding: 38px 0;
    text-align: center;
  }

  .case-info {
    text-align: center;
  }

  .project-logo {
    font-size: clamp(2.2rem, 10vw, 3.2rem);
  }

  .project-tags,
  .tags {
    justify-content: center !important;
  }

  .project-quote {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(21,21,21,0.28);
    padding-top: 18px;
    margin-left: auto;
    margin-right: auto;
    max-width: 92%;
  }

  #primer .case-gallery,
  #surrealista .case-gallery,
  #bolsas .case-gallery {
    grid-template-columns: 1fr;
  }

  #primer .case-image:first-child,
  #surrealista .case-image:first-child,
  #bolsas .case-image:first-child,
  #bolsas .case-image:nth-child(4) {
    grid-column: auto;
  }
}


/* Ajustes v19: más proyectos y colores del logo */
.hero-dot {
  animation: heroDotColor 4s steps(1, end) infinite !important;
}

@keyframes heroDotColor {
  0%, 24.99% { color: var(--purple); }
  25%, 49.99% { color: var(--blue); }
  50%, 74.99% { color: var(--yellow); }
  75%, 100% { color: var(--coral); }
}

.idea-word span:nth-child(1) { color: var(--purple) !important; }
.idea-word span:nth-child(2) { color: var(--blue) !important; }
.idea-word span:nth-child(3) { color: var(--yellow) !important; }
.idea-word span:nth-child(4) { color: var(--coral) !important; }

.project-logo-img {
  display: block;
  width: min(100%, 330px);
  max-height: 170px;
  object-fit: contain;
  object-position: left center;
}

#big-dream-girls .project-logo-img {
  max-height: 190px;
}

#pelo-magazine .case-gallery,
#big-dream-girls .case-gallery,
#halloween-patinete .case-gallery,
#mi-primer-jardin .case-gallery,
#oh-la-luna .case-gallery,
#veo-veo-colores .case-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#pelo-magazine .case-image:first-child,
#pelo-magazine .case-image:nth-child(4),
#halloween-patinete .case-image:first-child,
#mi-primer-jardin .case-image:first-child,
#oh-la-luna .case-image:first-child,
#veo-veo-colores .case-image:first-child {
  grid-column: span 2;
}

#big-dream-girls .case-image:first-child {
  grid-column: span 2;
}

#halloween-patinete .case-image img,
#mi-primer-jardin .case-image img,
#oh-la-luna .case-image img,
#veo-veo-colores .case-image img {
  background: transparent;
}

@media (max-width: 720px) {
  .project-logo-img {
    margin-left: auto;
    margin-right: auto;
    object-position: center;
  }

  #pelo-magazine .case-gallery,
  #big-dream-girls .case-gallery,
  #halloween-patinete .case-gallery,
  #mi-primer-jardin .case-gallery,
  #oh-la-luna .case-gallery,
  #veo-veo-colores .case-gallery {
    grid-template-columns: 1fr;
  }

  #pelo-magazine .case-image:first-child,
  #pelo-magazine .case-image:nth-child(4),
  #big-dream-girls .case-image:first-child,
  #halloween-patinete .case-image:first-child,
  #mi-primer-jardin .case-image:first-child,
  #oh-la-luna .case-image:first-child,
  #veo-veo-colores .case-image:first-child {
    grid-column: auto;
  }
}


/* Ajustes v20: portfolio con carrusel horizontal */
.portfolio-case {
  grid-template-columns: minmax(280px, 0.58fr) minmax(520px, 1.42fr) !important;
  gap: clamp(28px, 5vw, 68px) !important;
  min-height: min(78vh, 820px);
}

.case-info {
  position: sticky;
  top: 116px;
  align-self: start;
}

.case-gallery.carousel-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: clamp(16px, 2.2vw, 28px) !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding: 0 0 26px;
  margin: 0 calc(var(--page-pad) * -0.55) 0 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(21,21,21,0.34) transparent;
}

.case-gallery.carousel-track::-webkit-scrollbar {
  height: 8px;
}

.case-gallery.carousel-track::-webkit-scrollbar-track {
  background: transparent;
}

.case-gallery.carousel-track::-webkit-scrollbar-thumb {
  background: rgba(21,21,21,0.28);
  border-radius: 999px;
}

.case-gallery.carousel-track::after {
  content: "";
  flex: 0 0 clamp(12px, 5vw, 74px);
}

.case-gallery.carousel-track .case-image {
  flex: 0 0 min(72vw, 760px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.case-gallery.carousel-track .case-image img {
  width: 100%;
  max-height: min(72vh, 720px);
  object-fit: contain;
  object-position: center;
  display: block;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Anula las retículas anteriores por proyecto */
#primer .case-gallery,
#surrealista .case-gallery,
#bolsas .case-gallery,
#pelo-magazine .case-gallery,
#big-dream-girls .case-gallery,
#halloween-patinete .case-gallery,
#mi-primer-jardin .case-gallery,
#oh-la-luna .case-gallery,
#veo-veo-colores .case-gallery {
  grid-template-columns: none !important;
}

#primer .case-image:first-child,
#primer .case-image:nth-child(4),
#surrealista .case-image:first-child,
#bolsas .case-image:first-child,
#bolsas .case-image:nth-child(4),
#pelo-magazine .case-image:first-child,
#pelo-magazine .case-image:nth-child(4),
#big-dream-girls .case-image:first-child,
#halloween-patinete .case-image:first-child,
#mi-primer-jardin .case-image:first-child,
#oh-la-luna .case-image:first-child,
#veo-veo-colores .case-image:first-child {
  grid-column: auto !important;
}

.case-gallery.carousel-track .case-image:nth-child(even) {
  flex-basis: min(60vw, 640px);
}

.case-gallery.carousel-track .case-image:nth-child(3n) {
  flex-basis: min(66vw, 700px);
}

/* Pista visual sutil de que hay desplazamiento horizontal */
.portfolio-case .case-gallery.carousel-track {
  mask-image: linear-gradient(to right, black 0%, black 88%, transparent 100%);
}

@media (max-width: 980px) {
  .portfolio-case {
    grid-template-columns: 1fr !important;
    min-height: auto;
  }

  .case-info {
    position: static;
  }

  .case-gallery.carousel-track {
    margin-right: calc(var(--page-pad) * -1);
    margin-left: 0;
  }

  .case-gallery.carousel-track .case-image,
  .case-gallery.carousel-track .case-image:nth-child(even),
  .case-gallery.carousel-track .case-image:nth-child(3n) {
    flex-basis: min(86vw, 680px);
  }

  .case-gallery.carousel-track .case-image img {
    max-height: 68vh;
  }
}

@media (max-width: 720px) {
  .portfolio-case {
    text-align: center;
  }

  .case-gallery.carousel-track {
    margin-left: calc(var(--page-pad) * -0.5);
    margin-right: calc(var(--page-pad) * -0.5);
    padding-left: calc(var(--page-pad) * 0.5);
    padding-bottom: 20px;
    mask-image: linear-gradient(to right, black 0%, black 92%, transparent 100%);
  }

  .case-gallery.carousel-track .case-image,
  .case-gallery.carousel-track .case-image:nth-child(even),
  .case-gallery.carousel-track .case-image:nth-child(3n) {
    flex-basis: 84vw;
  }

  .case-gallery.carousel-track .case-image img {
    max-height: 58vh;
  }
}


/* Ajustes v21: proyectos como cuadrícula + páginas individuales */
.projects-grid-intro {
  padding-bottom: 28px;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 26px);
  padding-top: clamp(34px, 5vw, 72px);
  padding-bottom: clamp(70px, 9vw, 130px);
}

.project-tile {
  position: relative;
  display: grid;
  grid-template-rows: minmax(260px, 1fr) auto;
  min-height: 420px;
  grid-column: span 4;
  color: var(--ink);
  text-decoration: none;
  border-top: 1px solid rgba(21,21,21,0.18);
  padding-top: 12px;
  cursor: url("assets/logos/cursor-packup-click.png") 8 8, pointer !important;
}

.project-tile.wide {
  grid-column: span 7;
}

.project-tile.tall {
  grid-column: span 5;
  min-height: 620px;
}

.project-tile.medium {
  grid-column: span 5;
}

.project-tile.small {
  grid-column: span 4;
  min-height: 390px;
}

.project-tile figure {
  margin: 0;
  overflow: hidden;
  background: transparent;
}

.project-tile img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease, filter 0.7s ease;
}

.project-tile:hover img {
  transform: scale(1.035);
  filter: saturate(1.06);
}

.tile-info {
  padding: 18px 0 6px;
}

.tile-logo {
  font-family: var(--display);
  font-weight: 680;
  font-size: clamp(1.45rem, 2vw, 2.55rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
  margin-bottom: 10px;
}

.tile-logo img {
  width: min(230px, 70%);
  height: auto;
  min-height: 0;
  object-fit: contain;
}

.tile-info p {
  max-width: 48ch;
  color: rgba(21,21,21,0.68);
  font-weight: 500;
  margin: 0 0 14px;
  line-height: 1.45;
}

.tile-tags {
  justify-content: flex-start !important;
}

.project-detail-main {
  padding-bottom: 42px;
}

.project-detail {
  padding-top: clamp(44px, 6vw, 92px);
}

.project-detail-header {
  display: grid;
  grid-template-columns: minmax(280px, 0.62fr) minmax(420px, 1fr);
  gap: clamp(28px, 6vw, 86px);
  align-items: start;
  border-bottom: 1px solid rgba(21,21,21,0.16);
  padding-bottom: clamp(36px, 5vw, 70px);
}

.back-link {
  grid-column: 1 / -1;
  width: max-content;
  color: rgba(21,21,21,0.58);
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.detail-logo {
  font-family: var(--display);
  font-size: clamp(3rem, 7vw, 7.4rem);
  line-height: 0.9;
  letter-spacing: -0.06em;
  margin: 0;
}

.detail-logo .project-logo-img {
  width: min(380px, 100%);
  max-height: 230px;
  object-fit: contain;
  object-position: left center;
}

.detail-description {
  max-width: 64ch;
  font-size: clamp(1.08rem, 1.35vw, 1.32rem);
  line-height: 1.5;
  margin: 0;
}

.project-detail-header .project-tags,
.project-detail-header .detail-meta {
  grid-column: 2;
}

.project-detail-statement {
  padding: clamp(42px, 6vw, 86px) 0;
}

.project-detail-statement blockquote {
  margin: 0;
  max-width: 980px;
  font-family: var(--display);
  font-size: clamp(2.2rem, 4.6vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  color: rgba(21,21,21,0.9);
}

.project-detail-gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 26px);
  align-items: start;
}

.project-detail-image {
  grid-column: span 6;
  margin: 0;
  background: transparent;
}

.project-detail-image.large {
  grid-column: span 8;
}

.project-detail-image.portrait {
  grid-column: span 4;
}

.project-detail-image.standard:nth-child(4n) {
  grid-column: span 5;
}

.project-detail-image img {
  width: 100%;
  height: auto;
  display: block;
  background: transparent;
}

.project-detail-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  border-top: 1px solid rgba(21,21,21,0.16);
  margin-top: clamp(48px, 7vw, 96px);
  padding: 24px 0;
}

.project-detail-nav a {
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.project-detail-nav .project-nav-prev {
  justify-self: start;
  text-align: left;
}

.project-detail-nav .project-nav-all {
  justify-self: center;
  text-align: center;
}

.project-detail-nav .project-nav-next {
  justify-self: end;
  text-align: right;
}

@media (max-width: 980px) {
  .projects-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .project-tile,
  .project-tile.wide,
  .project-tile.tall,
  .project-tile.medium,
  .project-tile.small {
    grid-column: span 3;
    min-height: 420px;
  }

  .project-detail-header {
    grid-template-columns: 1fr;
  }

  .project-detail-header .project-tags,
  .project-detail-header .detail-meta {
    grid-column: auto;
  }

  .detail-logo .project-logo-img {
    object-position: left center;
  }
}

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

  .project-tile,
  .project-tile.wide,
  .project-tile.tall,
  .project-tile.medium,
  .project-tile.small {
    grid-column: auto;
    min-height: auto;
    grid-template-rows: auto auto;
  }

  .project-tile img {
    min-height: 0;
    aspect-ratio: 1 / 0.78;
  }

  .tile-tags {
    justify-content: center !important;
  }

  .project-detail {
    text-align: center;
  }

  .back-link {
    margin-left: auto;
    margin-right: auto;
  }

  .detail-logo .project-logo-img {
    margin-left: auto;
    margin-right: auto;
    object-position: center;
  }

  .project-detail-header {
    text-align: center;
  }

  .project-detail-header .project-tags {
    justify-content: center !important;
  }

  .project-detail-gallery {
    grid-template-columns: 1fr;
  }

  .project-detail-image,
  .project-detail-image.large,
  .project-detail-image.portrait,
  .project-detail-image.standard:nth-child(4n) {
    grid-column: auto;
  }

  .project-detail-nav {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    padding: 20px 0;
  }

  .project-detail-nav a {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
  }

  .project-detail-nav .project-nav-prev {
    justify-self: start;
    text-align: left;
  }

  .project-detail-nav .project-nav-all {
    justify-self: center;
    text-align: center;
  }

  .project-detail-nav .project-nav-next {
    justify-self: end;
    text-align: right;
  }
}

/* Ajustes v22: página de proyectos como mosaico visual sin texto */
.projects-mosaic-body .page-shell{padding-left:0!important;padding-right:0!important}
.projects-mosaic-body .site-header,.projects-mosaic-body .footer{padding-left:var(--page-pad);padding-right:var(--page-pad)}
.projects-mosaic{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(150px,17vw,260px);gap:0!important;padding:0;margin:0;width:100%}
.mosaic-item{display:block;position:relative;overflow:hidden;background:var(--ink);cursor:url("assets/logos/cursor-packup-click.png") 8 8,pointer!important}
.mosaic-item img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .75s ease,filter .75s ease}
.mosaic-item:hover img{transform:scale(1.045);filter:saturate(1.05) contrast(1.02)}
.mosaic-item.tile-xl{grid-column:span 6;grid-row:span 2}
.mosaic-item.tile-l{grid-column:span 5;grid-row:span 2}
.mosaic-item.tile-wide{grid-column:span 7;grid-row:span 1}
.mosaic-item.tile-tall{grid-column:span 3;grid-row:span 2}
.mosaic-item.tile-m{grid-column:span 4;grid-row:span 1}
.mosaic-item.tile-s{grid-column:span 2;grid-row:span 1}
.projects-mosaic-body .footer{margin-top:0}
.projects-grid,.projects-grid-intro{display:none!important}
.project-detail-image,.project-detail-image img{background:transparent!important;border:0!important;box-shadow:none!important}
@media(max-width:980px){.projects-mosaic{grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(150px,28vw,240px)}.mosaic-item.tile-xl,.mosaic-item.tile-l,.mosaic-item.tile-wide{grid-column:span 6;grid-row:span 2}.mosaic-item.tile-tall,.mosaic-item.tile-m{grid-column:span 3;grid-row:span 2}.mosaic-item.tile-s{grid-column:span 3;grid-row:span 1}}
@media(max-width:720px){.projects-mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:46vw}.mosaic-item.tile-xl,.mosaic-item.tile-l,.mosaic-item.tile-wide,.mosaic-item.tile-tall,.mosaic-item.tile-m,.mosaic-item.tile-s{grid-column:span 1;grid-row:span 1}.mosaic-item:nth-child(3n+1){grid-column:span 2;grid-row:span 1}}


/* V23: proyectos full width sin huecos */
.projects-masonry-body {
  overflow-x: hidden;
}

.projects-masonry-body .site-header,
.projects-masonry-body .footer {
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

.projects-masonry-main {
  width: 100%;
  margin: 0;
  padding: 0;
}

.projects-masonry {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(150px, 16vw, 280px);
  grid-auto-flow: dense;
  gap: 0;
  width: 100vw;
  margin: 0;
  padding: 0;
}

.masonry-tile {
  display: block;
  overflow: hidden;
  min-width: 0;
  background: #111;
  cursor: url("assets/logos/cursor-packup-click.png") 8 8, pointer !important;
}

.masonry-tile.square { grid-column: span 3; grid-row: span 1; }
.masonry-tile.wide { grid-column: span 6; grid-row: span 1; }
.masonry-tile.tall { grid-column: span 3; grid-row: span 2; }

.masonry-tile img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .75s ease, filter .75s ease;
}

.masonry-tile:hover img {
  transform: scale(1.04);
  filter: saturate(1.04) contrast(1.02);
}

/* Oculta estructuras anteriores si quedaron en cascada */
.projects-mosaic,
.projects-grid,
.projects-grid-intro {
  display: none !important;
}

/* V23: ficha Pelo Mag */
.project-pelo-body {
  background: var(--paper);
}

.pelo-project {
  padding: 0 var(--page-pad) clamp(56px, 8vw, 110px);
}

.pelo-hero {
  min-height: calc(100vh - 96px);
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(320px, 1.25fr);
  gap: clamp(36px, 7vw, 120px);
  align-items: center;
  border-bottom: 1px solid rgba(17,17,17,.14);
}

.pelo-logo-block {
  font-family: "panel-sans", "Montserrat", sans-serif;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: .82;
  text-transform: uppercase;
  font-size: clamp(3.3rem, 9vw, 9rem);
  max-width: 420px;
}

.pelo-logo-block span {
  display: block;
}

.pelo-info-block {
  max-width: 720px;
}

.pelo-kicker {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 800;
  margin: 0 0 1.3rem;
  color: rgba(17,17,17,.58);
}

.pelo-info-block blockquote {
  font-family: "panel-sans", "Montserrat", sans-serif;
  font-size: clamp(2rem, 4.1vw, 5.2rem);
  line-height: .92;
  letter-spacing: -0.045em;
  margin: 0 0 2rem;
  max-width: 840px;
}

.pelo-info-block > p:not(.pelo-kicker) {
  font-size: clamp(1rem, 1.2vw, 1.22rem);
  line-height: 1.65;
  max-width: 680px;
}

.pelo-meta {
  margin-top: clamp(28px, 4vw, 52px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem 2rem;
  border-top: 1px solid rgba(17,17,17,.18);
  padding-top: 1.4rem;
}

.pelo-meta div {
  margin: 0;
}

.pelo-meta dt {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
  color: rgba(17,17,17,.55);
  margin-bottom: .35rem;
}

.pelo-meta dd {
  margin: 0;
  font-weight: 650;
}

.pelo-horizontal-gallery {
  margin: clamp(42px, 6vw, 80px) calc(var(--page-pad) * -1) 0;
  padding: 0 var(--page-pad) 28px;
  display: flex;
  gap: clamp(14px, 2vw, 30px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.pelo-slide {
  flex: 0 0 min(82vw, 1180px);
  height: min(72vh, 760px);
  margin: 0;
  scroll-snap-align: center;
  background: transparent;
}

.pelo-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.pelo-nav {
  padding-top: 28px;
}

@media (max-width: 980px) {
  .projects-masonry {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: clamp(130px, 28vw, 230px);
  }
  .masonry-tile.square { grid-column: span 3; }
  .masonry-tile.wide { grid-column: span 6; }
  .masonry-tile.tall { grid-column: span 3; grid-row: span 2; }

  .pelo-hero {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 54px 0;
    min-height: auto;
  }
  .pelo-logo-block {
    font-size: clamp(3rem, 18vw, 7rem);
  }
  .pelo-info-block blockquote {
    font-size: clamp(2.1rem, 9vw, 4.2rem);
  }
}

@media (max-width: 680px) {
  .projects-masonry {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 50vw;
  }
  .masonry-tile.square,
  .masonry-tile.wide,
  .masonry-tile.tall {
    grid-column: span 1;
    grid-row: span 1;
  }
  .masonry-tile:nth-child(4n+1) {
    grid-column: span 2;
  }

  .pelo-meta {
    grid-template-columns: 1fr;
  }
  .pelo-slide {
    flex-basis: 88vw;
    height: min(60vh, 520px);
  }
}


/* V24: ajustes ficha Pelo Mag */
.project-pelo-body .site-header {
  margin-bottom: 0;
}

.pelo-project {
  padding-top: clamp(54px, 7vw, 96px);
}

.pelo-hero {
  align-items: start;
  min-height: auto;
  padding-bottom: clamp(52px, 7vw, 96px);
}

.pelo-logo-block {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 360px;
}

.pelo-logo-image img {
  display: block;
  width: min(100%, 300px);
  height: auto;
}

.pelo-info-block {
  align-self: start;
}

.pelo-info-block blockquote {
  font-weight: 800;
  font-size: clamp(1.65rem, 3vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  max-width: 760px;
  margin-bottom: clamp(22px, 3vw, 38px);
}

.pelo-horizontal-gallery {
  gap: 0;
  padding-bottom: 0;
}

.pelo-slide {
  margin: 0;
  flex: 0 0 min(86vw, 1160px);
}

.pelo-slide + .pelo-slide {
  margin-left: 0;
}

.pelo-slide img {
  object-fit: contain;
}

@media (max-width: 980px) {
  .pelo-project {
    padding-top: 40px;
  }

  .pelo-hero {
    align-items: start;
    padding-bottom: 44px;
  }

  .pelo-logo-block {
    align-self: auto;
    justify-content: center;
    max-width: none;
  }

  .pelo-logo-image img {
    width: min(74vw, 260px);
  }

  .pelo-info-block blockquote {
    font-size: clamp(1.85rem, 7vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.012em;
  }
}

@media (max-width: 680px) {
  .pelo-project {
    padding-top: 34px;
  }

  .pelo-slide {
    flex-basis: 92vw;
  }
}


/* V25: ajustes finos Pelo Mag */
.pelo-hero {
  grid-template-columns: minmax(220px, 0.72fr) minmax(320px, 1.28fr);
  align-items: start;
}

.pelo-logo-block {
  align-self: stretch;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.pelo-logo-image img {
  width: min(100%, 300px);
  height: auto;
  display: block;
}

.pelo-info-block {
  align-self: start;
}

.pelo-horizontal-gallery {
  gap: 0 !important;
  column-gap: 0 !important;
  padding-left: 0;
  padding-right: 0;
  margin-left: calc(var(--page-pad) * -1);
  margin-right: calc(var(--page-pad) * -1);
  scroll-padding-left: 0;
  position: relative;
}

.pelo-horizontal-gallery::after {
  content: "";
  flex: 0 0 clamp(48px, 8vw, 120px);
}

.pelo-slide {
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 min(82vw, 1120px);
  scroll-snap-align: start;
}

.pelo-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pequeña pista visual: la siguiente imagen asoma al entrar en la galería */
.pelo-slide:first-child {
  flex-basis: min(78vw, 1080px);
}

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

  .pelo-logo-block {
    height: auto;
    justify-content: flex-start;
  }

  .pelo-logo-image img {
    width: min(68vw, 250px);
  }

  .pelo-horizontal-gallery {
    margin-left: calc(var(--page-pad) * -1);
    margin-right: calc(var(--page-pad) * -1);
  }

  .pelo-slide,
  .pelo-slide:first-child {
    flex-basis: 86vw;
  }
}

@media (max-width: 680px) {
  .pelo-logo-block {
    justify-content: center;
  }

  .pelo-slide,
  .pelo-slide:first-child {
    flex-basis: 88vw;
  }
}


/* V26: Pelo Mag — logo en zona izquierda superior + carrusel centrado */
.pelo-hero {
  grid-template-columns: minmax(260px, 0.68fr) minmax(360px, 1.32fr);
  gap: clamp(42px, 6vw, 112px);
  align-items: start;
  min-height: auto;
}

.pelo-logo-block,
.pelo-logo-image {
  align-self: start;
  height: auto;
  min-height: clamp(220px, 32vw, 420px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: clamp(8px, 1.8vw, 28px);
  max-width: none;
}

.pelo-logo-image img {
  width: clamp(190px, 22vw, 330px);
  max-width: 88%;
  height: auto;
}

/* La galería funciona como carrusel: cada imagen encaja centrada y asoman anterior/siguiente */
.pelo-horizontal-gallery {
  gap: 0 !important;
  column-gap: 0 !important;
  margin-left: calc(var(--page-pad) * -1);
  margin-right: calc(var(--page-pad) * -1);
  padding-left: calc((100vw - min(76vw, 1040px)) / 2);
  padding-right: calc((100vw - min(76vw, 1040px)) / 2);
  scroll-padding-left: calc((100vw - min(76vw, 1040px)) / 2);
  scroll-padding-right: calc((100vw - min(76vw, 1040px)) / 2);
  scroll-snap-type: x mandatory;
  overflow-x: auto;
}

.pelo-horizontal-gallery::after {
  display: none;
}

.pelo-slide,
.pelo-slide:first-child {
  flex: 0 0 min(76vw, 1040px);
  height: min(70vh, 720px);
  margin: 0 !important;
  padding: 0 !important;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  background: transparent;
}

.pelo-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Sin separación visual entre fotos: el siguiente slide empieza justo al terminar el anterior */
.pelo-slide + .pelo-slide {
  margin-left: 0 !important;
}

@media (max-width: 980px) {
  .pelo-hero {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .pelo-logo-block,
  .pelo-logo-image {
    min-height: auto;
    justify-content: center;
    padding-top: 0;
    margin-bottom: 10px;
  }

  .pelo-logo-image img {
    width: min(58vw, 240px);
  }

  .pelo-horizontal-gallery {
    padding-left: 6vw;
    padding-right: 6vw;
    scroll-padding-left: 6vw;
    scroll-padding-right: 6vw;
  }

  .pelo-slide,
  .pelo-slide:first-child {
    flex-basis: 88vw;
    height: min(62vh, 560px);
  }
}

@media (max-width: 680px) {
  .pelo-logo-image img {
    width: min(64vw, 220px);
  }

  .pelo-slide,
  .pelo-slide:first-child {
    flex-basis: 90vw;
    height: min(56vh, 480px);
  }
}


/* V27: Pelo — logo alineado arriba en la columna izquierda + scroll en orden 00–18 */
.pelo-hero {
  grid-template-columns: minmax(300px, 0.72fr) minmax(440px, 1.28fr) !important;
  gap: clamp(48px, 7vw, 120px) !important;
  align-items: start !important;
  padding-top: clamp(86px, 9vw, 150px) !important;
}

.pelo-logo-block,
.pelo-logo-image {
  align-self: start !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  min-height: 0 !important;
  height: auto !important;
  padding-top: clamp(128px, 12.5vw, 208px) !important;
  padding-left: clamp(42px, 6vw, 104px) !important;
  overflow: visible !important;
}

.pelo-logo-image img {
  width: clamp(180px, 18vw, 315px) !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

.pelo-info-block {
  align-self: start !important;
}

/* La galería queda ordenada de 00 a 18 y centrada por snap */
.pelo-horizontal-gallery {
  gap: 0 !important;
  column-gap: 0 !important;
  scroll-snap-type: x mandatory !important;
  scroll-padding-left: calc((100vw - min(76vw, 1040px)) / 2) !important;
  scroll-padding-right: calc((100vw - min(76vw, 1040px)) / 2) !important;
  padding-left: calc((100vw - min(76vw, 1040px)) / 2) !important;
  padding-right: calc((100vw - min(76vw, 1040px)) / 2) !important;
}

.pelo-slide {
  flex: 0 0 min(76vw, 1040px) !important;
  height: min(70vh, 720px) !important;
  margin: 0 !important;
  padding: 0 !important;
  scroll-snap-align: center !important;
  scroll-snap-stop: always !important;
}

.pelo-slide img {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

@media (max-width: 980px) {
  .pelo-hero {
    grid-template-columns: 1fr !important;
    padding-top: 86px !important;
  }
  .pelo-logo-block,
  .pelo-logo-image {
    padding-top: 0 !important;
    padding-left: 0 !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .pelo-logo-image img {
    width: min(58vw, 250px) !important;
  }
  .pelo-horizontal-gallery {
    padding-left: 6vw !important;
    padding-right: 6vw !important;
    scroll-padding-left: 6vw !important;
    scroll-padding-right: 6vw !important;
  }
  .pelo-slide {
    flex-basis: 88vw !important;
    height: min(62vh, 560px) !important;
  }
}





/* V29: Pelo — logo colocado como referencia y galería horizontal sin huecos */
@media (min-width: 981px) {
  .pelo-hero {
    display: grid !important;
    grid-template-columns: minmax(300px, 0.68fr) minmax(560px, 1.32fr) !important;
    column-gap: clamp(56px, 7vw, 118px) !important;
    align-items: start !important;
    padding-top: clamp(112px, 13vh, 178px) !important;
  }

  .pelo-logo-block,
  .pelo-logo-image {
    position: sticky !important;
    top: 128px !important;
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: clamp(44px, 5.5vw, 82px) 0 0 0 !important; /* baja el logo para quedar como en la captura */
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    z-index: 2 !important;
    transform: none !important;
  }

  .pelo-logo-image img {
    display: block !important;
    width: clamp(245px, 18vw, 330px) !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  .pelo-info-block {
    margin: 0 !important;
    padding: 0 !important;
  }

  .pelo-info-block blockquote {
    margin-top: 0 !important;
  }
}

/* Galería Pelo: pegada, con slide centrado y vistas parciales anterior/siguiente */
.pelo-gallery {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-padding-inline: clamp(64px, 16vw, 260px) !important;
  padding: 0 !important;
}

.pelo-gallery-track {
  display: flex !important;
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  padding: 0 clamp(64px, 16vw, 260px) !important;
  margin: 0 !important;
  align-items: stretch !important;
}

.pelo-slide {
  flex: 0 0 clamp(620px, 72vw, 1180px) !important;
  scroll-snap-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

.pelo-slide img {
  display: block !important;
  width: 100% !important;
  height: clamp(520px, 62vw, 840px) !important;
  object-fit: cover !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

@media (max-width: 980px) {
  .pelo-logo-block,
  .pelo-logo-image {
    position: static !important;
    padding: 0 !important;
    margin: 0 auto 28px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .pelo-gallery {
    scroll-padding-inline: 18px !important;
  }

  .pelo-gallery-track {
    gap: 0 !important;
    padding: 0 18px !important;
  }

  .pelo-slide {
    flex-basis: 86vw !important;
  }

  .pelo-slide img {
    height: 62vh !important;
  }
}


/* V30: Ajustes solicitados para Pelo Mag */
@media (min-width: 981px) {
  .pelo-hero {
    max-width: 1280px !important;
    margin-inline: auto !important;
    grid-template-columns: minmax(250px, 0.72fr) minmax(580px, 1.28fr) !important;
    column-gap: clamp(54px, 6vw, 96px) !important;
    padding-top: clamp(128px, 14vh, 190px) !important;
    padding-bottom: clamp(80px, 9vh, 130px) !important;
  }

  .pelo-logo-block,
  .pelo-logo-image {
    position: sticky !important;
    top: 118px !important;
    align-self: start !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    margin: calc(1rem + 32px) 0 0 0 !important; /* baja justo hasta la frase destacada, no hasta el kicker */
    padding: 0 !important;
    height: auto !important;
    z-index: 3 !important;
  }

  .pelo-logo-image img {
    width: clamp(250px, 18vw, 335px) !important;
    height: auto !important;
  }

  .pelo-info-block blockquote {
    margin-top: 20px !important;
  }
}

/* Scroll Pelo: imágenes pegadas, centradas por snap y con la siguiente/anterior asomando */
.pelo-horizontal-gallery {
  --pelo-slide-w: min(78vw, 1260px);
  display: flex !important;
  gap: 0 !important;
  column-gap: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-padding-inline: calc((100vw - var(--pelo-slide-w)) / 2) !important;
  padding: 0 calc((100vw - var(--pelo-slide-w)) / 2) !important;
  margin: 0 !important;
  -webkit-overflow-scrolling: touch !important;
}

.pelo-horizontal-gallery .pelo-slide {
  flex: 0 0 var(--pelo-slide-w) !important;
  width: var(--pelo-slide-w) !important;
  scroll-snap-align: center !important;
  scroll-snap-stop: always !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  border: 0 !important;
}

.pelo-horizontal-gallery .pelo-slide + .pelo-slide {
  margin-left: 0 !important;
}

.pelo-horizontal-gallery .pelo-slide img {
  display: block !important;
  width: 100% !important;
  height: clamp(560px, 66vw, 860px) !important;
  object-fit: cover !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

@media (max-width: 980px) {
  .pelo-hero {
    padding-top: 108px !important;
  }

  .pelo-logo-block,
  .pelo-logo-image {
    position: static !important;
    margin: 0 auto 24px !important;
    justify-content: center !important;
  }

  .pelo-horizontal-gallery {
    --pelo-slide-w: 86vw;
  }

  .pelo-horizontal-gallery .pelo-slide img {
    height: 62vh !important;
  }
}


/* V31: Pelo — scroll gobernado por la imagen más alta, sin recorte */
.pelo-horizontal-gallery {
  --pelo-slide-w: min(78vw, 1260px) !important;
  --pelo-gallery-h: calc(var(--pelo-slide-w) * 0.75) !important;
  align-items: flex-start !important;
}

.pelo-horizontal-gallery .pelo-slide {
  height: var(--pelo-gallery-h) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  overflow: hidden !important;
}

.pelo-horizontal-gallery .pelo-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
}

@media (max-width: 980px) {
  .pelo-horizontal-gallery {
    --pelo-slide-w: 86vw !important;
    --pelo-gallery-h: calc(var(--pelo-slide-w) * 0.75) !important;
  }
}


/* V33: plantilla común de portfolio aplicada a todos los proyectos */
.project-template-body {
  background: var(--paper);
}

.project-template .pelo-hero {
  max-width: 1280px !important;
  margin-inline: auto !important;
}

.project-logo-wordmark {
  font-family: "panel-sans", "Montserrat", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.055em !important;
  line-height: .88 !important;
  text-transform: uppercase !important;
  font-size: clamp(2.5rem, 5.7vw, 6.3rem) !important;
}

.project-logo-wordmark .project-wordmark,
.project-logo-wordmark span {
  display: block !important;
}

@media (min-width: 981px) {
  .project-template .pelo-hero {
    display: grid !important;
    grid-template-columns: minmax(250px, 0.72fr) minmax(580px, 1.28fr) !important;
    column-gap: clamp(54px, 6vw, 96px) !important;
    align-items: start !important;
    padding-top: clamp(128px, 14vh, 190px) !important;
    padding-bottom: clamp(80px, 9vh, 130px) !important;
  }

  .project-template .pelo-logo-block,
  .project-template .pelo-logo-image,
  .project-template .project-logo-wordmark {
    position: sticky !important;
    top: 118px !important;
    align-self: start !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    margin: calc(1rem + 32px) 0 0 0 !important;
    padding: 0 !important;
    height: auto !important;
    z-index: 3 !important;
    text-align: left !important;
  }

  .project-template .pelo-logo-image img {
    width: clamp(230px, 18vw, 335px) !important;
    max-height: 230px !important;
    object-fit: contain !important;
    object-position: left top !important;
    height: auto !important;
  }
}

/* V33: scroll horizontal común; sin huecos, centrado y sin recorte */
.project-template .pelo-horizontal-gallery,
.pelo-horizontal-gallery {
  --pelo-slide-w: min(78vw, 1260px) !important;
  --pelo-gallery-h: calc(var(--pelo-slide-w) * 0.75) !important;
  display: flex !important;
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-padding-inline: calc((100vw - var(--pelo-slide-w)) / 2) !important;
  padding: 0 calc((100vw - var(--pelo-slide-w)) / 2) !important;
  margin: 0 calc(var(--page-pad) * -1) 0 !important;
  align-items: center !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
}

.project-template .pelo-horizontal-gallery .pelo-slide,
.pelo-horizontal-gallery .pelo-slide {
  flex: 0 0 var(--pelo-slide-w) !important;
  width: var(--pelo-slide-w) !important;
  height: var(--pelo-gallery-h) !important;
  scroll-snap-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.project-template .pelo-horizontal-gallery .pelo-slide img,
.pelo-horizontal-gallery .pelo-slide img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* V33: navegación inferior centrada entre filetes */
.project-detail-nav {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: center !important;
  border-top: 1px solid rgba(21,21,21,0.16) !important;
  border-bottom: 1px solid rgba(21,21,21,0.16) !important;
  margin-top: clamp(36px, 5vw, 72px) !important;
  padding: 22px 0 !important;
  min-height: 76px !important;
}

.project-detail-nav .project-nav-prev {
  justify-self: start !important;
  text-align: left !important;
}

.project-detail-nav .project-nav-all {
  justify-self: center !important;
  text-align: center !important;
}

.project-detail-nav .project-nav-next {
  justify-self: end !important;
  text-align: right !important;
}

.project-template-body .footer {
  border-top: 0 !important;
}

@media (max-width: 980px) {
  .project-template .pelo-hero {
    grid-template-columns: 1fr !important;
    padding-top: 108px !important;
  }

  .project-template .pelo-logo-block,
  .project-template .pelo-logo-image,
  .project-template .project-logo-wordmark {
    position: static !important;
    margin: 0 auto 24px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .project-template .pelo-logo-image img {
    width: min(58vw, 250px) !important;
    max-height: 180px !important;
  }

  .project-template .pelo-horizontal-gallery,
  .pelo-horizontal-gallery {
    --pelo-slide-w: 86vw !important;
    --pelo-gallery-h: calc(var(--pelo-slide-w) * 0.75) !important;
  }

  .project-detail-nav {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 68px !important;
  }

  .project-detail-nav a {
    font-size: 0.66rem !important;
    letter-spacing: 0.04em !important;
  }
}


/* V34: nueva home visual a pantalla completa */
.home-landing-body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  background: #111;
  color: #fff;
}

.home-landing-body .skip-link {
  color: #111;
  background: #fff;
}

.home-landing-header {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 50 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  border-bottom: 0 !important;
  color: #fff !important;
}

.home-landing-header .site-header-inner {
  max-width: none !important;
  min-height: clamp(72px, 8vw, 104px) !important;
  padding-inline: clamp(22px, 4vw, 70px) !important;
}

.home-landing-header .brand img {
  width: clamp(128px, 15vw, 220px) !important;
  filter: invert(1) brightness(2);
  opacity: .92;
}

.home-landing-header .main-nav {
  gap: clamp(18px, 2.4vw, 42px) !important;
}

.home-landing-header .main-nav a {
  color: #fff !important;
  text-shadow: 0 1px 20px rgba(0,0,0,.35);
  font-weight: 700;
}

.home-landing {
  min-height: 100vh;
}

.home-slideshow {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #111;
}

.home-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  animation: packupHomeFade 42s infinite ease-in-out;
}

.home-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.24) 0%, rgba(0,0,0,.04) 34%, rgba(0,0,0,.14) 100%),
    radial-gradient(circle at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,.16) 100%);
  pointer-events: none;
}

.home-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.home-slide-1 { animation-delay: 0s; }
.home-slide-2 { animation-delay: 6s; }
.home-slide-3 { animation-delay: 12s; }
.home-slide-4 { animation-delay: 18s; }
.home-slide-5 { animation-delay: 24s; }
.home-slide-6 { animation-delay: 30s; }
.home-slide-7 { animation-delay: 36s; }

@keyframes packupHomeFade {
  0% { opacity: 0; }
  4% { opacity: 1; }
  14% { opacity: 1; }
  18% { opacity: 0; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .home-slide {
    animation: none;
  }
  .home-slide:first-child {
    opacity: 1;
  }
}

@media (max-width: 760px) {
  .home-landing-body {
    overflow: hidden;
  }

  .home-landing-header .site-header-inner {
    min-height: 78px !important;
    padding-inline: 18px !important;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }

  .home-landing-header .brand img {
    width: 150px !important;
  }

  .home-landing-header .main-nav {
    gap: 14px !important;
    flex-wrap: wrap;
    justify-content: center;
  }

  .home-landing-header .main-nav a {
    font-size: .76rem !important;
  }
}


/* V35: logo actualizado + menú Montserrat regular */
.main-nav a,
.site-header .main-nav a,
.home-landing-header .main-nav a {
  font-family: "Montserrat", Arial, sans-serif !important;
  font-weight: 400 !important;
}

/* En la home el logo y menú permanecen en negro */
.home-landing-header .brand img {
  filter: none !important;
  opacity: 1 !important;
}

.home-landing-header .main-nav a {
  color: #111 !important;
  text-shadow: none !important;
}

/* Suaviza lectura del menú negro sobre imagen sin cambiarlo a blanco */
.home-landing-header {
  background: transparent !important;
}

/* V37: proyectos individuales — galería con scroll vertical normal */
.project-template .pelo-horizontal-gallery,
.pelo-horizontal-gallery {
  width: min(1180px, calc(100vw - clamp(32px, 7vw, 120px))) !important;
  max-width: 1180px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: clamp(54px, 8vw, 110px) auto clamp(48px, 7vw, 96px) !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  scroll-snap-type: none !important;
  scroll-padding: 0 !important;
  scroll-padding-inline: 0 !important;
  -webkit-overflow-scrolling: auto !important;
  scrollbar-width: auto !important;
}

.project-template .pelo-horizontal-gallery::after,
.pelo-horizontal-gallery::after {
  display: none !important;
  content: none !important;
}

.project-template .pelo-horizontal-gallery .pelo-slide,
.pelo-horizontal-gallery .pelo-slide,
.project-template .pelo-horizontal-gallery .pelo-slide:nth-child(even),
.project-template .pelo-horizontal-gallery .pelo-slide:nth-child(3n),
.pelo-horizontal-gallery .pelo-slide:nth-child(even),
.pelo-horizontal-gallery .pelo-slide:nth-child(3n) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
  background: transparent !important;
  display: block !important;
}

.project-template .pelo-horizontal-gallery .pelo-slide + .pelo-slide,
.pelo-horizontal-gallery .pelo-slide + .pelo-slide {
  margin-top: 0 !important;
}

.project-template .pelo-horizontal-gallery .pelo-slide img,
.pelo-horizontal-gallery .pelo-slide img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

@media (max-width: 760px) {
  .project-template .pelo-horizontal-gallery,
  .pelo-horizontal-gallery {
    width: calc(100vw - 28px) !important;
    margin-top: 44px !important;
  }
}


/* V38: carrusel horizontal activado con el scroll natural del ratón */
.project-template .pelo-horizontal-gallery,
.pelo-horizontal-gallery {
  --pelo-slide-w: min(78vw, 1260px) !important;
  --pelo-gallery-h: calc(var(--pelo-slide-w) * 0.75) !important;
  width: 100vw !important;
  max-width: none !important;
  height: var(--pelo-gallery-h) !important;
  min-height: 0 !important;
  margin: clamp(54px, 8vw, 110px) calc(50% - 50vw) clamp(48px, 7vw, 96px) !important;
  padding: 0 calc((100vw - var(--pelo-slide-w)) / 2) !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-padding-inline: calc((100vw - var(--pelo-slide-w)) / 2) !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-inline: contain !important;
  scrollbar-width: thin !important;
  cursor: grab;
}

.project-template .pelo-horizontal-gallery:active,
.pelo-horizontal-gallery:active {
  cursor: grabbing;
}

.project-template .pelo-horizontal-gallery::after,
.pelo-horizontal-gallery::after {
  display: none !important;
  content: none !important;
}

.project-template .pelo-horizontal-gallery .pelo-slide,
.pelo-horizontal-gallery .pelo-slide,
.project-template .pelo-horizontal-gallery .pelo-slide:nth-child(even),
.project-template .pelo-horizontal-gallery .pelo-slide:nth-child(3n),
.pelo-horizontal-gallery .pelo-slide:nth-child(even),
.pelo-horizontal-gallery .pelo-slide:nth-child(3n) {
  flex: 0 0 var(--pelo-slide-w) !important;
  width: var(--pelo-slide-w) !important;
  min-width: var(--pelo-slide-w) !important;
  max-width: var(--pelo-slide-w) !important;
  height: var(--pelo-gallery-h) !important;
  min-height: var(--pelo-gallery-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  scroll-snap-align: center !important;
  scroll-snap-stop: always !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border: 0 !important;
}

.project-template .pelo-horizontal-gallery .pelo-slide + .pelo-slide,
.pelo-horizontal-gallery .pelo-slide + .pelo-slide {
  margin-left: 0 !important;
  margin-top: 0 !important;
}

.project-template .pelo-horizontal-gallery .pelo-slide img,
.pelo-horizontal-gallery .pelo-slide img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

@media (max-width: 980px) {
  .project-template .pelo-horizontal-gallery,
  .pelo-horizontal-gallery {
    --pelo-slide-w: 86vw !important;
    --pelo-gallery-h: calc(var(--pelo-slide-w) * 0.75) !important;
    padding-inline: 7vw !important;
    scroll-padding-inline: 7vw !important;
  }
}

@media (max-width: 760px) {
  .project-template .pelo-horizontal-gallery,
  .pelo-horizontal-gallery {
    --pelo-slide-w: 88vw !important;
    --pelo-gallery-h: calc(var(--pelo-slide-w) * 0.75) !important;
    margin-top: 44px !important;
    padding-inline: 6vw !important;
    scroll-padding-inline: 6vw !important;
  }
}


/* V39: el carrusel horizontal avanza más despacio con el scroll natural */
.pelo-horizontal-gallery {
  scroll-behavior: auto !important;
}


/* V40: carrusel libre, sin centrado forzado, con scroll mucho más lento */
.project-template .pelo-horizontal-gallery,
.pelo-horizontal-gallery {
  scroll-snap-type: none !important;
  scroll-padding-inline: 0 !important;
  scroll-behavior: auto !important;
  overscroll-behavior-inline: contain !important;
}

.project-template .pelo-horizontal-gallery .pelo-slide,
.pelo-horizontal-gallery .pelo-slide,
.project-template .pelo-horizontal-gallery .pelo-slide:nth-child(even),
.project-template .pelo-horizontal-gallery .pelo-slide:nth-child(3n),
.pelo-horizontal-gallery .pelo-slide:nth-child(even),
.pelo-horizontal-gallery .pelo-slide:nth-child(3n) {
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}

/* Mantengo algo de aire lateral para que se entienda que continúa, pero sin obligar al centro */
.project-template .pelo-horizontal-gallery,
.pelo-horizontal-gallery {
  padding-left: clamp(24px, 8vw, 160px) !important;
  padding-right: clamp(24px, 8vw, 160px) !important;
}


/* V41: scroll horizontal más equilibrado y con prioridad al scroll general */
.project-template .pelo-horizontal-gallery,
.pelo-horizontal-gallery {
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
  overscroll-behavior-inline: contain !important;
  padding-left: clamp(24px, 8vw, 160px) !important;
  padding-right: clamp(24px, 8vw, 160px) !important;
}


/* V42: home con header igual al resto, pero transparente */
.home-landing-header {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 50 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  border-bottom: 0 !important;
  color: var(--ink) !important;
}

.home-landing-header .site-header-inner {
  max-width: var(--max) !important;
  min-height: 82px !important;
  margin: 0 auto !important;
  padding-inline: 24px !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: center !important;
  gap: 24px !important;
}

.home-landing-header .brand {
  justify-self: start !important;
}

.home-landing-header .brand img {
  width: 42px !important;
  height: auto !important;
  filter: none !important;
  opacity: 1 !important;
}

.home-landing-header .main-nav {
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  flex-wrap: wrap !important;
}

.home-landing-header .main-nav a {
  color: rgba(21,21,21,0.75) !important;
  text-shadow: none !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.95rem !important;
}

/* V42: móvil home */
@media (max-width: 760px) {
  .home-landing-body {
    overflow: hidden !important;
  }

  .home-landing-header .site-header-inner {
    max-width: none !important;
    min-height: 74px !important;
    padding: 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  .home-landing-header .brand {
    justify-self: auto !important;
  }

  .home-landing-header .brand img {
    width: 34px !important;
  }

  .home-landing-header .main-nav {
    width: 100% !important;
    justify-content: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
  }

  .home-landing-header .main-nav a {
    font-size: 0.82rem !important;
  }

  .home-slide img {
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* V42: versión móvil de proyectos, centrada y con márgenes laterales */
@media (max-width: 760px) {
  .project-template-body,
  .project-pelo-body {
    overflow-x: hidden !important;
  }

  .project-template,
  .pelo-project {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .project-template .pelo-hero,
  .pelo-hero {
    grid-template-columns: 1fr !important;
    padding-top: 96px !important;
    padding-bottom: 44px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    gap: 24px !important;
    border-bottom: 1px solid rgba(17,17,17,.14) !important;
  }

  .project-template .pelo-logo-block,
  .project-template .pelo-logo-image,
  .project-template .project-logo-wordmark,
  .pelo-logo-block,
  .pelo-logo-image,
  .project-logo-wordmark {
    position: static !important;
    margin: 0 auto 8px !important;
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    max-width: min(86vw, 360px) !important;
  }

  .project-template .pelo-logo-image img,
  .pelo-logo-image img {
    width: min(62vw, 230px) !important;
    max-height: 170px !important;
    object-fit: contain !important;
    object-position: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .project-logo-wordmark {
    font-size: clamp(2.25rem, 12vw, 4rem) !important;
    line-height: .92 !important;
  }

  .pelo-info-block {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .pelo-kicker {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .pelo-info-block blockquote {
    font-size: clamp(1.75rem, 8.5vw, 3.1rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.02em !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .pelo-info-block > p:not(.pelo-kicker) {
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
    max-width: 34rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .pelo-meta {
    grid-template-columns: 1fr !important;
    max-width: 34rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    gap: 1rem !important;
  }

  .project-template .pelo-horizontal-gallery,
  .pelo-horizontal-gallery {
    --pelo-slide-w: calc(100vw - 32px) !important;
    --pelo-gallery-h: calc(var(--pelo-slide-w) * 0.75) !important;
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    height: var(--pelo-gallery-h) !important;
    margin: 44px auto 38px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    scroll-padding-inline: 0 !important;
  }

  .project-template .pelo-horizontal-gallery .pelo-slide,
  .pelo-horizontal-gallery .pelo-slide {
    flex-basis: var(--pelo-slide-w) !important;
    width: var(--pelo-slide-w) !important;
    min-width: var(--pelo-slide-w) !important;
    max-width: var(--pelo-slide-w) !important;
    height: var(--pelo-gallery-h) !important;
  }

  .project-detail-nav {
    width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    text-align: center !important;
    min-height: 0 !important;
  }

  .project-detail-nav .project-nav-prev,
  .project-detail-nav .project-nav-all,
  .project-detail-nav .project-nav-next {
    justify-self: center !important;
    text-align: center !important;
  }

  .project-detail-nav a {
    font-size: 0.72rem !important;
    letter-spacing: 0.05em !important;
  }
}


/* V43: logo de la home más grande */
.home-landing-header .brand img {
  width: clamp(112px, 12vw, 180px) !important;
}

@media (max-width: 760px) {
  .home-landing-header .brand img {
    width: 128px !important;
  }
}


/* V44: menú reducido y logo home igual al resto de páginas */
.home-landing-header .site-header-inner {
  max-width: var(--max) !important;
  min-height: 82px !important;
  margin: 0 auto !important;
  padding-inline: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

.home-landing-header .brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-self: auto !important;
}

.home-landing-header .brand img {
  width: 42px !important;
  height: auto !important;
  filter: none !important;
  opacity: 1 !important;
}

.home-landing-header .main-nav {
  justify-self: auto !important;
  gap: 22px !important;
}

@media (max-width: 760px) {
  .home-landing-header .site-header-inner {
    min-height: 74px !important;
    padding: 14px 16px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  .home-landing-header .brand img {
    width: 34px !important;
  }

  .home-landing-header .main-nav {
    width: 100% !important;
    justify-content: center !important;
    gap: 20px !important;
  }
}


/* V45: logo de la home igual de visible que en el resto de páginas */
.home-landing-header .site-header-inner {
  max-width: var(--max) !important;
  min-height: 82px !important;
  margin: 0 auto !important;
  padding-inline: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

.home-landing-header .brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-self: auto !important;
}

.home-landing-header .brand img {
  width: clamp(150px, 18vw, 210px) !important;
  height: auto !important;
  filter: none !important;
  opacity: 1 !important;
}

@media (max-width: 760px) {
  .home-landing-header .site-header-inner {
    min-height: 74px !important;
    padding: 14px 16px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  .home-landing-header .brand img {
    width: min(52vw, 180px) !important;
  }
}


/* V46: página de proyectos tipo listado visual */
.projects-list-body {
  background: var(--paper);
  color: var(--ink);
}

.projects-list-body .site-header {
  background: rgba(244,239,231,.92) !important;
  backdrop-filter: blur(14px) !important;
}

.projects-list-main {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: clamp(42px, 7vw, 92px) clamp(18px, 4vw, 64px) clamp(70px, 10vw, 140px);
}

.projects-list-hero {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(320px, .65fr);
  gap: clamp(30px, 7vw, 120px);
  align-items: end;
  padding: clamp(32px, 6vw, 84px) 0 clamp(38px, 6vw, 72px);
}

.projects-list-kicker {
  grid-column: 1 / -1;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 700;
  color: rgba(21,21,21,.55);
}

.projects-list-hero h1 {
  font-family: "panel-sans", "Panel Sans", Montserrat, Arial, sans-serif;
  font-weight: 520;
  font-size: clamp(4.6rem, 15vw, 15rem);
  line-height: .78;
  letter-spacing: -.07em;
  margin: 0;
}

.projects-list-hero p {
  max-width: 42rem;
  margin: 0 0 .6rem;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.48;
  color: rgba(21,21,21,.72);
  font-weight: 450;
}

.projects-list {
  border-top: 1px solid rgba(21,21,21,.22);
}

.projects-list-row {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(230px, .34fr);
  gap: clamp(16px, 3vw, 56px);
  align-items: center;
  min-height: clamp(96px, 11vw, 158px);
  padding: clamp(18px, 2.8vw, 34px) 0;
  border-bottom: 1px solid rgba(21,21,21,.22);
  color: var(--ink);
  overflow: visible;
}

.project-row-num {
  font-size: .78rem;
  color: rgba(21,21,21,.5);
  font-weight: 600;
  align-self: start;
  padding-top: .38em;
}

.project-row-title {
  font-family: "panel-sans", "Panel Sans", Montserrat, Arial, sans-serif;
  font-size: clamp(2.15rem, 5.6vw, 6.8rem);
  line-height: .86;
  letter-spacing: -.055em;
  font-weight: 560;
  transition: transform .35s ease, letter-spacing .35s ease;
}

.project-row-meta {
  display: grid;
  gap: .35rem;
  justify-self: end;
  text-align: right;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.25;
  color: rgba(21,21,21,.58);
  font-weight: 600;
}

.project-row-thumb {
  position: absolute;
  right: clamp(220px, 25vw, 360px);
  top: 50%;
  width: clamp(210px, 24vw, 390px);
  aspect-ratio: 1.78;
  transform: translateY(-50%) rotate(-1.2deg) scale(.94);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  box-shadow: 0 22px 46px rgba(0,0,0,.16);
  transition: opacity .28s ease, transform .38s ease;
  background: #111;
  overflow: hidden;
}

.project-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.projects-list-row:hover .project-row-title,
.projects-list-row:focus-visible .project-row-title {
  transform: translateX(clamp(10px, 1.7vw, 24px));
  letter-spacing: -.04em;
}

.projects-list-row:hover .project-row-thumb,
.projects-list-row:focus-visible .project-row-thumb {
  opacity: 1;
  transform: translateY(-50%) rotate(0deg) scale(1);
}

.projects-list-row:hover .project-row-num,
.projects-list-row:hover .project-row-meta {
  color: rgba(21,21,21,.9);
}

/* V46: logo home grande y consistente */
.home-landing-header .brand img {
  width: clamp(150px, 18vw, 210px) !important;
  height: auto !important;
  filter: none !important;
  opacity: 1 !important;
}

.home-landing-header .site-header-inner {
  max-width: var(--max) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

@media (max-width: 980px) {
  .projects-list-hero {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .projects-list-row {
    grid-template-columns: 3.2rem minmax(0, 1fr);
    min-height: 128px;
  }

  .project-row-meta {
    grid-column: 2;
    justify-self: start;
    text-align: left;
    margin-top: .7rem;
  }

  .project-row-thumb {
    right: 0;
    width: min(42vw, 280px);
    opacity: .18;
    transform: translateY(-50%) rotate(0deg) scale(1);
    box-shadow: none;
    z-index: 0;
  }

  .project-row-title,
  .project-row-meta,
  .project-row-num {
    position: relative;
    z-index: 2;
  }
}

@media (max-width: 760px) {
  .projects-list-main {
    padding-inline: 16px;
    padding-top: 32px;
  }

  .projects-list-hero {
    padding-top: 28px;
  }

  .projects-list-hero h1 {
    font-size: clamp(4rem, 24vw, 7rem);
  }

  .projects-list-row {
    grid-template-columns: 2.8rem minmax(0, 1fr);
    gap: 12px;
    min-height: 108px;
  }

  .project-row-title {
    font-size: clamp(2rem, 12vw, 4rem);
  }

  .project-row-meta {
    font-size: .68rem;
    letter-spacing: .04em;
  }

  .project-row-thumb {
    width: 46vw;
    opacity: .12;
  }

  .home-landing-header .brand img {
    width: min(52vw, 180px) !important;
  }
}


/* V47: proyectos más elegante, tamaños reducidos y cliente bajo etiquetas */
.projects-list-hero {
  grid-template-columns: minmax(0, .7fr) minmax(320px, .75fr) !important;
  padding-top: clamp(28px, 5vw, 66px) !important;
  padding-bottom: clamp(34px, 5vw, 58px) !important;
}

.projects-list-hero h1 {
  font-size: clamp(3rem, 7.2vw, 6.4rem) !important;
  line-height: .92 !important;
  letter-spacing: -0.045em !important;
  font-weight: 500 !important;
}

.projects-list-row {
  grid-template-columns: 3.6rem minmax(0, 1fr) minmax(250px, .34fr) !important;
  min-height: clamp(86px, 8.2vw, 122px) !important;
  padding: clamp(16px, 2.2vw, 26px) 0 !important;
}

.project-row-main {
  display: grid;
  gap: clamp(7px, .7vw, 12px);
  min-width: 0;
}

.project-row-title {
  font-size: clamp(1.75rem, 3.8vw, 4.45rem) !important;
  line-height: .94 !important;
  letter-spacing: -0.042em !important;
  font-weight: 540 !important;
}

.project-row-client {
  display: block;
  font-size: .78rem;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(21,21,21,.48);
  font-weight: 500;
}

.project-row-meta {
  font-size: .76rem !important;
  letter-spacing: .055em !important;
  color: rgba(21,21,21,.58) !important;
}

.project-row-thumb {
  right: clamp(185px, 24vw, 330px) !important;
  width: clamp(190px, 22vw, 340px) !important;
}

.projects-list-row:hover .project-row-title,
.projects-list-row:focus-visible .project-row-title {
  transform: translateX(clamp(6px, 1vw, 16px)) !important;
  letter-spacing: -0.032em !important;
}

@media (max-width: 980px) {
  .projects-list-hero {
    grid-template-columns: 1fr !important;
  }

  .projects-list-row {
    grid-template-columns: 2.8rem minmax(0, 1fr) !important;
    min-height: 112px !important;
  }

  .project-row-main {
    grid-column: 2;
  }

  .project-row-title {
    font-size: clamp(1.9rem, 8vw, 3.8rem) !important;
  }

  .project-row-client {
    font-size: .68rem !important;
  }

  .project-row-meta {
    grid-column: 2 !important;
    justify-self: start !important;
    text-align: left !important;
    margin-top: .25rem !important;
  }

  .project-row-thumb {
    right: 0 !important;
    width: min(42vw, 280px) !important;
  }
}

@media (max-width: 760px) {
  .projects-list-hero h1 {
    font-size: clamp(3rem, 16vw, 5rem) !important;
  }

  .projects-list-row {
    min-height: 100px !important;
  }

  .project-row-title {
    font-size: clamp(1.65rem, 9vw, 3.15rem) !important;
  }
}


/* V48: inicio de Estudio y Proyectos unificado */
:root {
  --packup-paragraph-size: 1.04rem;
  --packup-paragraph-leading: 1.55;
}

p {
  font-size: var(--packup-paragraph-size);
  line-height: var(--packup-paragraph-leading);
}

/* Proyectos arranca visualmente como Estudio */
.projects-list-main {
  padding-top: 0 !important;
}

.projects-list-hero {
  padding: 84px 0 40px !important;
  margin: 0 !important;
}

.projects-list-hero-inner {
  display: block !important;
}

.projects-list-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 0.83rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(21,21,21,0.68) !important;
  margin-bottom: 18px !important;
  font-weight: 500 !important;
}

.projects-list-kicker::before {
  content: '' !important;
  width: 34px !important;
  height: 1px !important;
  background: var(--ink) !important;
  opacity: 0.35 !important;
  display: inline-block !important;
}

.projects-list-hero h1 {
  font-family: "panel-sans", "Panel Sans", Montserrat, Arial, sans-serif !important;
  font-size: clamp(3.15rem, 5.8vw, 6.2rem) !important;
  line-height: 0.98 !important;
  font-weight: 470 !important;
  letter-spacing: -0.025em !important;
  margin: 0 !important;
  max-width: 980px !important;
}

.projects-list-hero p {
  max-width: 67ch !important;
  font-size: var(--packup-paragraph-size) !important;
  line-height: var(--packup-paragraph-leading) !important;
  color: rgba(21,21,21,0.78) !important;
  margin-top: 22px !important;
  margin-bottom: 0 !important;
  font-weight: 400 !important;
}

/* Mantiene la lista de proyectos limpia tras el nuevo inicio */
.projects-list {
  margin-top: clamp(36px, 5vw, 68px) !important;
}

/* Estudio usa las mismas variables de párrafo */
.hero-copy p,
.page-intro p,
.section-intro p,
.project-summary,
.cta-box p,
.page-intro-text {
  font-size: var(--packup-paragraph-size) !important;
  line-height: var(--packup-paragraph-leading) !important;
}

@media (max-width: 760px) {
  :root {
    --packup-paragraph-size: 0.98rem;
  }

  .projects-list-hero {
    padding: 46px 0 34px !important;
  }

  .projects-list-hero h1 {
    font-size: clamp(2.45rem, 10vw, 4rem) !important;
  }

  .projects-list-hero p {
    margin-top: 18px !important;
  }
}


/* V49: servicios más compactos + slider de clientes */
#servicios .section-head {
  margin-bottom: clamp(20px, 3vw, 30px) !important;
}

#servicios .services-grid {
  gap: clamp(12px, 1.6vw, 18px) !important;
  margin-top: clamp(30px, 4vw, 42px) !important;
}

#servicios .service-card {
  gap: 0 !important;
}

#servicios .service-figure {
  padding: clamp(10px, 1.4vw, 16px) clamp(14px, 1.8vw, 18px) 0 !important;
}

#servicios .service-figure img {
  width: min(100%, 86%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  aspect-ratio: 1.05 !important;
  object-fit: contain !important;
}

#servicios .service-body {
  padding: clamp(10px, 1.5vw, 16px) clamp(14px, 1.8vw, 18px) clamp(18px, 2.2vw, 24px) !important;
}

#servicios .service-body h3 {
  margin-bottom: 10px !important;
}

#servicios .service-body p {
  margin-bottom: 14px !important;
}

.clients-strip-section {
  border-top: 1px solid rgba(21,21,21,.13);
  padding-top: clamp(42px, 6vw, 72px) !important;
  padding-bottom: clamp(34px, 5vw, 58px) !important;
  overflow: hidden;
}

.clients-strip-head {
  margin-bottom: clamp(18px, 3vw, 28px);
}

.clients-kicker {
  margin-bottom: 0 !important;
}

.clients-marquee {
  width: 100%;
  overflow: hidden;
  border-top: 1px solid rgba(21,21,21,.16);
  border-bottom: 1px solid rgba(21,21,21,.16);
  background: rgba(255,255,255,.18);
}

.clients-track {
  display: flex;
  width: max-content;
  gap: clamp(34px, 5vw, 74px);
  align-items: center;
  padding: clamp(20px, 2.6vw, 34px) 0;
  animation: packupClientsMarquee 42s linear infinite;
  will-change: transform;
}

.clients-track span {
  font-family: "panel-sans", "Panel Sans", Montserrat, Arial, sans-serif;
  font-size: clamp(1.35rem, 3.3vw, 3.25rem);
  line-height: .9;
  letter-spacing: -.045em;
  white-space: nowrap;
  color: rgba(21,21,21,.72);
}

.clients-track span:nth-child(4n+1) { color: rgba(184,153,200,.95); }
.clients-track span:nth-child(4n+2) { color: rgba(21,21,21,.74); }
.clients-track span:nth-child(4n+3) { color: rgba(101,201,243,.95); }
.clients-track span:nth-child(4n+4) { color: rgba(240,134,137,.92); }

@keyframes packupClientsMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.clients-marquee:hover .clients-track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .clients-track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
    padding-inline: 18px;
  }
}

@media (max-width: 980px) {
  #servicios .service-figure img {
    width: min(100%, 78%) !important;
  }
}

@media (max-width: 720px) {
  #servicios .services-grid {
    gap: 26px !important;
  }

  .clients-track {
    gap: 34px;
    animation-duration: 34s;
  }
}


/* V50: servicios más compactos + raya delante de Servicios */
#servicios .section-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#servicios .section-label::before {
  content: "" !important;
  width: 34px !important;
  height: 1px !important;
  background: var(--ink) !important;
  opacity: 0.35 !important;
  display: inline-block !important;
}

#servicios .section-head {
  margin-bottom: clamp(10px, 1.8vw, 18px) !important;
}

#servicios .services-grid {
  gap: clamp(4px, 0.7vw, 9px) !important;
  margin-top: clamp(14px, 2vw, 24px) !important;
}

#servicios .service-figure {
  padding: clamp(4px, .7vw, 8px) clamp(8px, 1vw, 12px) 0 !important;
}

#servicios .service-figure img {
  width: min(100%, 43%) !important;
  max-height: clamp(110px, 14vw, 180px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  aspect-ratio: 1.05 !important;
  object-fit: contain !important;
}

#servicios .service-body {
  padding: clamp(6px, .8vw, 10px) clamp(10px, 1.2vw, 14px) clamp(14px, 1.7vw, 18px) !important;
}

#servicios .service-body h3 {
  margin-bottom: 8px !important;
}

#servicios .service-body p {
  margin-bottom: 10px !important;
}

@media (max-width: 980px) {
  #servicios .services-grid {
    gap: 14px !important;
  }

  #servicios .service-figure img {
    width: min(100%, 38%) !important;
    max-height: 160px !important;
  }
}

@media (max-width: 720px) {
  #servicios .services-grid {
    gap: 18px !important;
  }

  #servicios .service-figure img {
    width: min(100%, 48%) !important;
    max-height: 150px !important;
  }
}


/* V51: imágenes de servicios +25% y último bloque más compacto */
#servicios .service-figure img {
  width: min(100%, 54%) !important;
  max-height: clamp(138px, 17.5vw, 225px) !important;
}

@media (max-width: 980px) {
  #servicios .service-figure img {
    width: min(100%, 48%) !important;
    max-height: 200px !important;
  }
}

@media (max-width: 720px) {
  #servicios .service-figure img {
    width: min(100%, 60%) !important;
    max-height: 188px !important;
  }
}

/* Quitamos la raya interna/superior del último bloque de comunicación y compactamos */
#servicios .service-card:nth-child(3),
#servicios .service-card:nth-child(3) .service-body,
#servicios .service-card:nth-child(3) .service-figure {
  border-top: 0 !important;
}

#servicios .service-card:nth-child(3)::before,
#servicios .service-card:nth-child(3)::after,
#servicios .service-card:nth-child(3) .service-body::before,
#servicios .service-card:nth-child(3) .service-body::after,
#servicios .service-card:nth-child(3) .service-figure::before,
#servicios .service-card:nth-child(3) .service-figure::after {
  display: none !important;
  content: none !important;
}

#servicios .service-card:nth-child(3) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

#servicios .service-card:nth-child(3) .service-body {
  padding-top: clamp(4px, .6vw, 8px) !important;
}

#servicios .service-card:nth-child(3) .service-figure {
  padding-top: clamp(2px, .4vw, 6px) !important;
}

/* Dejamos solo el separador del bloque grande de Servicios */
#servicios .services-grid {
  border-top: 0 !important;
}


/* V52: corregir separadores de servicios + imágenes otro 25% más grandes */

/* Imágenes: suben otro 25% respecto a V51 */
#servicios .service-figure img {
  width: min(100%, 68%) !important;
  max-height: clamp(172px, 21.8vw, 280px) !important;
}

@media (max-width: 980px) {
  #servicios .service-figure img {
    width: min(100%, 60%) !important;
    max-height: 250px !important;
  }
}

@media (max-width: 720px) {
  #servicios .service-figure img {
    width: min(100%, 75%) !important;
    max-height: 235px !important;
  }
}

/* Restaurar el separador entre bloques internos: también entre universos narrativos y comunicación */
#servicios .service-card:nth-child(3),
#servicios .service-card:nth-child(3) .service-body,
#servicios .service-card:nth-child(3) .service-figure {
  border-top: inherit !important;
}

/* Eliminar solo el separador/sobrante al final del bloque de servicios */
#servicios .service-card:last-child {
  border-bottom: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#servicios .service-card:last-child::after,
#servicios .service-card:last-child .service-body::after,
#servicios .service-card:last-child .service-figure::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
}

/* Compactar el final del último bloque sin tocar la separación entre segundo y tercero */
#servicios .service-card:last-child .service-body {
  padding-bottom: clamp(8px, 1vw, 12px) !important;
}

/* Dejar solo el separador del bloque grande hacia fuera, no una línea extra al cierre */
#servicios .services-grid {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

#servicios {
  padding-bottom: clamp(46px, 6vw, 72px) !important;
}


/* V53: reset limpio del bloque Servicios — márgenes homogéneos */
#servicios {
  padding-top: clamp(46px, 6vw, 72px) !important;
  padding-bottom: clamp(46px, 6vw, 72px) !important;
}

#servicios .section-head {
  margin-bottom: clamp(24px, 3vw, 36px) !important;
}

#servicios .services-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  margin-top: clamp(26px, 3.2vw, 40px) !important;
  padding: 0 !important;
  border-top: 1px solid rgba(21,21,21,.14) !important;
  border-bottom: 0 !important;
}

/* Cada servicio queda con la misma estructura y la misma respiración */
#servicios .service-card {
  display: grid !important;
  grid-template-columns: minmax(220px, .52fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(24px, 4vw, 64px) !important;
  min-height: 0 !important;
  padding: clamp(28px, 3.8vw, 48px) 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Separador homogéneo entre los bloques: entre editorial/producto y producto/comunicación */
#servicios .service-card + .service-card {
  border-top: 1px solid rgba(21,21,21,.14) !important;
}

/* No hay separador extra al final: solo el bloque grande manda */
#servicios .service-card:last-child {
  border-bottom: 0 !important;
  padding-bottom: clamp(28px, 3.8vw, 48px) !important;
}

#servicios .service-card::before,
#servicios .service-card::after,
#servicios .service-figure::before,
#servicios .service-figure::after,
#servicios .service-body::before,
#servicios .service-body::after {
  display: none !important;
  content: none !important;
}

#servicios .service-figure {
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

#servicios .service-figure img {
  width: min(100%, clamp(220px, 26vw, 360px)) !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}

#servicios .service-body {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 720px !important;
}

#servicios .service-body h3 {
  margin: 0 0 clamp(10px, 1.3vw, 16px) !important;
}

#servicios .service-body p {
  margin: 0 0 clamp(14px, 1.6vw, 18px) !important;
}

#servicios .tags {
  margin-top: 0 !important;
}

@media (max-width: 980px) {
  #servicios .service-card {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    text-align: center !important;
    padding: 34px 0 !important;
  }

  #servicios .service-figure img {
    width: min(72vw, 320px) !important;
  }

  #servicios .service-body {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #servicios .tags {
    justify-content: center !important;
  }
}

@media (max-width: 720px) {
  #servicios {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }

  #servicios .services-grid {
    margin-top: 24px !important;
  }

  #servicios .service-card {
    padding: 30px 0 !important;
  }

  #servicios .service-figure img {
    width: min(78vw, 300px) !important;
  }
}


/* V54: ajuste fino Servicios — títulos en dos líneas, márgenes homogéneos y sin filete extra */
#servicios .no-break {
  white-space: nowrap !important;
}

/* Forzamos títulos equilibrados, sin cortes raros */
#servicios .service-body h3 {
  text-wrap: balance;
  max-width: 18ch !important;
}

/* Mantener respiración homogénea */
#servicios .service-card {
  padding-top: clamp(26px, 3.4vw, 44px) !important;
  padding-bottom: clamp(26px, 3.4vw, 44px) !important;
}

/* Separadores solo entre bloques, no encima del h2 ni dentro del bloque de comunicación */
#servicios .services-grid {
  border-top: 0 !important;
  margin-top: clamp(26px, 3.2vw, 40px) !important;
}

#servicios .service-card {
  border-top: 0 !important;
}

#servicios .service-card + .service-card {
  border-top: 1px solid rgba(21,21,21,.14) !important;
}

/* Quita cualquier pseudo-filete heredado justo antes del contenido de Comunicación */
#servicios .service-card:nth-child(3)::before,
#servicios .service-card:nth-child(3) .service-body::before,
#servicios .service-card:nth-child(3) h3::before {
  display: none !important;
  content: none !important;
  border: 0 !important;
}

/* El separador del tercer bloque queda como división del bloque, no pegado al h2 */
#servicios .service-card:nth-child(3) {
  padding-top: clamp(30px, 3.8vw, 48px) !important;
}

/* Sin separador extra al final del bloque */
#servicios .service-card:last-child,
#servicios .services-grid {
  border-bottom: 0 !important;
}

/* Imágenes generosas pero sin romper la compacidad */
#servicios .service-figure img {
  width: min(100%, clamp(240px, 27vw, 370px)) !important;
}

@media (max-width: 980px) {
  #servicios .service-body h3 {
    max-width: none !important;
  }

  #servicios .service-card {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}

@media (max-width: 720px) {
  #servicios .service-card {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
}


/* V55: quitar subseparadores internos del bloque Comunicación */
#servicios .service-card:nth-child(3),
#servicios .service-card:nth-child(3) .service-figure,
#servicios .service-card:nth-child(3) .service-body,
#servicios .service-card:nth-child(3) h3 {
  border-top: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

#servicios .service-card:nth-child(3)::before,
#servicios .service-card:nth-child(3)::after,
#servicios .service-card:nth-child(3) .service-figure::before,
#servicios .service-card:nth-child(3) .service-figure::after,
#servicios .service-card:nth-child(3) .service-body::before,
#servicios .service-card:nth-child(3) .service-body::after,
#servicios .service-card:nth-child(3) h3::before,
#servicios .service-card:nth-child(3) h3::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
}

/* Mantiene el separador correcto entre Producto y Comunicación, pero solo a nivel del bloque grande */
#servicios .service-card:nth-child(3) {
  position: relative !important;
}

#servicios .service-card:nth-child(3) {
  border-top: 1px solid rgba(21,21,21,.14) !important;
}


/* V56: más ancho para el texto de Producto / universos narrativos */
@media (min-width: 981px) {
  #servicios .service-card:nth-child(2) {
    grid-template-columns: minmax(240px, .46fr) minmax(0, 1.08fr) !important;
    gap: clamp(32px, 5vw, 82px) !important;
  }

  #servicios .service-card:nth-child(2) .service-figure {
    transform: translateX(clamp(8px, 1.4vw, 22px));
  }

  #servicios .service-card:nth-child(2) .service-body {
    max-width: 820px !important;
  }

  #servicios .service-card:nth-child(2) .service-body p {
    max-width: 76ch !important;
  }
}


/* V57: Producto / universos narrativos — párrafo más ancho para caer en menos líneas */
@media (min-width: 981px) {
  #servicios .service-card:nth-child(2) {
    grid-template-columns: minmax(200px, .38fr) minmax(0, 1.25fr) !important;
    gap: clamp(24px, 3.5vw, 58px) !important;
  }

  #servicios .service-card:nth-child(2) .service-figure {
    transform: translateX(clamp(18px, 2.4vw, 38px)) !important;
  }

  #servicios .service-card:nth-child(2) .service-body {
    max-width: 980px !important;
    width: 100% !important;
  }

  #servicios .service-card:nth-child(2) .service-body p {
    max-width: 92ch !important;
    width: 100% !important;
  }
}


/* V58: Producto / universos narrativos — el bloque de texto llega hasta la zona indicada */
@media (min-width: 981px) {
  #servicios .service-card:nth-child(2) {
    grid-template-columns: minmax(0, 1.18fr) minmax(260px, .82fr) !important;
    gap: clamp(30px, 3.8vw, 60px) !important;
  }

  #servicios .service-card:nth-child(2) .service-body {
    max-width: none !important;
    width: 100% !important;
  }

  #servicios .service-card:nth-child(2) .service-body p {
    max-width: none !important;
    width: min(100%, 780px) !important;
  }

  #servicios .service-card:nth-child(2) .tags {
    max-width: 780px !important;
    width: 100% !important;
  }

  #servicios .service-card:nth-child(2) .service-figure {
    transform: translateX(0) !important;
    justify-content: flex-start !important;
  }
}


/* V60: flecha flotante para volver al inicio en proyectos individuales */
.project-back-top {
  position: fixed;
  right: clamp(18px, 2.6vw, 42px);
  bottom: clamp(18px, 2.6vw, 42px);
  z-index: 80;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(20, 20, 20, .18);
  background: rgba(244, 239, 231, .86);
  color: #151515;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease, background .22s ease;
}

.project-back-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.project-back-top:hover,
.project-back-top:focus-visible {
  background: rgba(244, 239, 231, .98);
  transform: translateY(-2px);
}

@media (max-width: 760px) {
  .project-back-top {
    display: none;
  }
}


/* V61: protección básica de imágenes frente a descarga directa por clic derecho/arrastre */
img {
  -webkit-user-drag: none;
  user-drag: none;
}

.protected-image,
.project-row-thumb img,
.pelo-slide img,
.home-slide img,
.service-figure img,
.logo-slider img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}


/* V63: carrusel horizontal más ágil, libre y sin snap */
.project-template .pelo-horizontal-gallery,
.pelo-horizontal-gallery {
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
  overscroll-behavior-inline: contain !important;
}

.project-template .pelo-horizontal-gallery .pelo-slide,
.pelo-horizontal-gallery .pelo-slide {
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}


/* V64: primera versión real con proyectos piloto, imágenes responsive y SEO-friendly */
.home-slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

.project-copy {
  margin-top: clamp(26px, 3.6vw, 48px);
  display: grid;
  gap: clamp(24px, 3vw, 38px);
  max-width: 760px;
}

.project-copy-section h2 {
  margin: 0 0 .8rem;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: .78rem;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(21,21,21,.52);
}

.project-copy-section p {
  margin: 0 0 .92rem;
  font-size: clamp(.98rem, 1.08vw, 1.12rem);
  line-height: 1.68;
  color: rgba(21,21,21,.78);
}

.project-copy-section p:last-child { margin-bottom: 0; }

.pelo-meta {
  grid-template-columns: minmax(0, .7fr) minmax(0, 1fr);
}

.pelo-meta div:nth-child(3) {
  grid-column: 1 / -1;
}

.pelo-meta dd {
  line-height: 1.42;
}

.project-template .pelo-horizontal-gallery,
.pelo-horizontal-gallery {
  align-items: flex-start !important;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
  overscroll-behavior-inline: contain !important;
}

.project-template .pelo-horizontal-gallery .pelo-slide,
.pelo-horizontal-gallery .pelo-slide {
  flex: 0 0 auto !important;
  width: auto !important;
  height: min(72vh, 760px) !important;
  max-width: none !important;
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}

.project-template .pelo-horizontal-gallery .pelo-slide img,
.pelo-horizontal-gallery .pelo-slide img {
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
}

.projects-list-row .project-row-meta span:nth-child(2) {
  display: none;
}

.project-row-title {
  font-size: clamp(2rem, 4.7vw, 5.8rem) !important;
}

.project-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 760px) {
  .project-template .pelo-horizontal-gallery,
  .pelo-horizontal-gallery {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    overflow-x: visible !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .project-template .pelo-horizontal-gallery .pelo-slide,
  .pelo-horizontal-gallery .pelo-slide {
    width: 100% !important;
    height: auto !important;
  }

  .project-template .pelo-horizontal-gallery .pelo-slide img,
  .pelo-horizontal-gallery .pelo-slide img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  .pelo-meta {
    grid-template-columns: 1fr !important;
  }

  .pelo-meta div:nth-child(3) {
    grid-column: auto;
  }
}


/* V65: limpieza de Proyectos + logos uniformes + carruseles sin separación */
.projects-list-row-clean,
.projects-list-row {
  grid-template-columns: clamp(38px, 4.5vw, 70px) minmax(0, 1fr) !important;
  gap: clamp(12px, 2vw, 28px) !important;
  min-height: clamp(74px, 8.5vw, 124px) !important;
  padding-top: clamp(16px, 2.1vw, 28px) !important;
  padding-bottom: clamp(16px, 2.1vw, 28px) !important;
}

.project-row-client,
.project-row-meta {
  display: none !important;
}

.project-row-title {
  font-size: clamp(1.35rem, 3.35vw, 3.85rem) !important;
  line-height: .92 !important;
  letter-spacing: -.04em !important;
  max-width: 17ch !important;
}

.project-row-num {
  padding-top: .32em !important;
}

@media (max-width: 760px) {
  .project-row-title {
    font-size: clamp(1.45rem, 10vw, 3.3rem) !important;
    max-width: 11ch !important;
  }
}

/* Titulares interiores de proyecto más contenidos */
.pelo-info-block blockquote {
  font-size: clamp(1.35rem, 2.45vw, 3.1rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.035em !important;
  max-width: 760px !important;
  margin-bottom: clamp(1.2rem, 2.4vw, 2rem) !important;
}

.project-copy {
  margin-top: clamp(20px, 2.8vw, 36px) !important;
  gap: clamp(18px, 2.4vw, 30px) !important;
}

.project-copy-section h2 {
  font-size: .68rem !important;
  letter-spacing: .16em !important;
  margin-bottom: .58rem !important;
}

.project-copy-section p {
  font-size: clamp(.94rem, 1vw, 1.08rem) !important;
  line-height: 1.62 !important;
}

.pelo-meta-clean,
.pelo-meta {
  grid-template-columns: 1fr !important;
  max-width: 760px !important;
  margin-top: clamp(22px, 3vw, 38px) !important;
  padding-top: 1rem !important;
}

.pelo-meta-clean div,
.pelo-meta div {
  grid-column: auto !important;
}

/* Logos de cabecera: todos al mismo ancho visual */
.pelo-logo-block {
  max-width: 600px !important;
}

.pelo-logo-block.pelo-logo-image,
.pelo-logo-image {
  width: min(600px, 82vw) !important;
  max-width: 600px !important;
}

.pelo-logo-block.pelo-logo-image img,
.pelo-logo-image img {
  display: block !important;
  width: min(600px, 82vw) !important;
  max-width: 600px !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Carrusel: imágenes pegadas, sin hueco horizontal */
.project-template .pelo-horizontal-gallery,
.pelo-horizontal-gallery {
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
}

.project-template .pelo-horizontal-gallery .pelo-slide,
.pelo-horizontal-gallery .pelo-slide {
  margin: 0 !important;
  padding: 0 !important;
}

.project-template .pelo-horizontal-gallery .pelo-slide img,
.pelo-horizontal-gallery .pelo-slide img {
  display: block !important;
}

@media (max-width: 760px) {
  .project-template .pelo-horizontal-gallery,
  .pelo-horizontal-gallery {
    gap: 0 !important;
    row-gap: 0 !important;
  }
}


/* V66: ajuste fino solicitado — títulos en una línea, carrusel uniforme y logos máx. 300px */

/* Proyectos.html: dar todo el ancho al título y evitar saltos en escritorio */
@media (min-width: 761px) {
  .projects-list-row,
  .projects-list-row-clean {
    grid-template-columns: clamp(34px, 3.6vw, 58px) minmax(0, 1fr) !important;
    gap: clamp(10px, 1.6vw, 22px) !important;
    min-height: clamp(64px, 6.7vw, 104px) !important;
    padding-top: clamp(13px, 1.8vw, 23px) !important;
    padding-bottom: clamp(13px, 1.8vw, 23px) !important;
  }

  .project-row-main {
    min-width: 0 !important;
    width: 100% !important;
  }

  .project-row-title {
    display: block !important;
    max-width: none !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: clamp(1.05rem, 2.35vw, 2.9rem) !important;
    line-height: 1 !important;
    letter-spacing: -.028em !important;
  }
}

/* Proyectos.html en móvil: nunca más de dos líneas */
@media (max-width: 760px) {
  .project-row-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    max-width: none !important;
    font-size: clamp(1.15rem, 7.4vw, 2.32rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.032em !important;
  }
}

/* Logos de entrada de proyecto: máximo 300px y columna propia */
.project-template .pelo-hero {
  grid-template-columns: minmax(160px, 300px) minmax(0, 1fr) !important;
  gap: clamp(34px, 6vw, 96px) !important;
}

.project-template .pelo-logo-block,
.project-template .pelo-logo-block.pelo-logo-image,
.project-template .pelo-logo-image {
  width: min(300px, 72vw) !important;
  max-width: 300px !important;
  min-width: 0 !important;
}

.project-template .pelo-logo-block.pelo-logo-image img,
.project-template .pelo-logo-image img,
.project-template .pelo-logo-block img {
  width: min(300px, 72vw) !important;
  max-width: 300px !important;
  height: auto !important;
  object-fit: contain !important;
}

@media (max-width: 980px) {
  .project-template .pelo-hero {
    grid-template-columns: 1fr !important;
  }

  .project-template .pelo-logo-block,
  .project-template .pelo-logo-block.pelo-logo-image,
  .project-template .pelo-logo-image,
  .project-template .pelo-logo-block.pelo-logo-image img,
  .project-template .pelo-logo-image img,
  .project-template .pelo-logo-block img {
    width: min(300px, 68vw) !important;
    max-width: 300px !important;
  }
}

/* Carrusel de proyecto: todas las imágenes misma altura visual y totalmente pegadas */
.project-template {
  --project-gallery-height: min(76vh, 820px);
}

.project-template .pelo-horizontal-gallery,
.pelo-horizontal-gallery {
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  align-items: stretch !important;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}

.project-template .pelo-horizontal-gallery .pelo-slide,
.pelo-horizontal-gallery .pelo-slide {
  flex: 0 0 auto !important;
  width: auto !important;
  height: var(--project-gallery-height) !important;
  min-height: var(--project-gallery-height) !important;
  max-height: var(--project-gallery-height) !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  background: transparent !important;
  scroll-snap-align: none !important;
}

.project-template .pelo-horizontal-gallery .pelo-slide img,
.pelo-horizontal-gallery .pelo-slide img {
  display: block !important;
  width: auto !important;
  height: var(--project-gallery-height) !important;
  min-height: var(--project-gallery-height) !important;
  max-height: var(--project-gallery-height) !important;
  max-width: none !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* En móvil mantenemos vertical, sin huecos entre imágenes */
@media (max-width: 760px) {
  .project-template .pelo-horizontal-gallery,
  .pelo-horizontal-gallery {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    row-gap: 0 !important;
    overflow-x: visible !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .project-template .pelo-horizontal-gallery .pelo-slide,
  .pelo-horizontal-gallery .pelo-slide {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .project-template .pelo-horizontal-gallery .pelo-slide img,
  .pelo-horizontal-gallery .pelo-slide img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    max-width: 100% !important;
  }
}


/* V67: proyecto con galería vertical sencilla, sin scroll horizontal */
.project-template .pelo-hero {
  min-height: auto !important;
  align-items: start !important;
  grid-template-columns: minmax(160px, 300px) minmax(0, 1080px) !important;
  gap: clamp(34px, 6vw, 96px) !important;
  padding-top: clamp(76px, 8vw, 120px) !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

.project-template .pelo-logo-block {
  position: sticky !important;
  top: clamp(92px, 10vw, 132px) !important;
  align-self: start !important;
  z-index: 3 !important;
}

.project-template .pelo-info-block {
  max-width: 1080px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.project-template .project-copy,
.project-template .pelo-meta-clean,
.project-template .pelo-meta {
  max-width: 760px !important;
}

.project-template .pelo-vertical-gallery {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 1080px !important;
  margin: clamp(34px, 5vw, 58px) 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
}

.project-template .pelo-vertical-gallery .pelo-slide {
  display: block !important;
  width: 100% !important;
  max-width: 1080px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  background: transparent !important;
}

.project-template .pelo-vertical-gallery .pelo-slide img {
  display: block !important;
  width: 100% !important;
  max-width: 1080px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Neutraliza cualquier regla anterior de carrusel horizontal en páginas de proyecto */
.project-template .pelo-horizontal-gallery {
  display: none !important;
}

.project-detail-nav.pelo-nav {
  padding-top: clamp(30px, 5vw, 70px) !important;
}

@media (max-width: 980px) {
  .project-template .pelo-hero {
    grid-template-columns: 1fr !important;
    padding-top: clamp(54px, 10vw, 82px) !important;
  }

  .project-template .pelo-logo-block {
    position: relative !important;
    top: auto !important;
  }

  .project-template .pelo-info-block,
  .project-template .pelo-vertical-gallery,
  .project-template .pelo-vertical-gallery .pelo-slide,
  .project-template .pelo-vertical-gallery .pelo-slide img {
    max-width: 100% !important;
  }
}

@media (max-width: 760px) {
  .project-template .pelo-vertical-gallery {
    margin-top: 30px !important;
    gap: 0 !important;
  }
}


/* V68: estabilidad — proyectos y galerías siempre visibles, sin animación de entrada */
.projects-list-row,
.projects-list-hero-inner,
.project-template .pelo-info-block,
.project-template .project-copy,
.project-template .pelo-meta,
.project-template .pelo-vertical-gallery,
.project-template .pelo-vertical-gallery .pelo-slide,
.project-template .pelo-vertical-gallery img {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* Galería vertical definitiva: visible, simple y sin márgenes entre imágenes */
.project-template .pelo-vertical-gallery {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 1080px !important;
  margin: clamp(34px, 5vw, 58px) 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.project-template .pelo-vertical-gallery .pelo-slide {
  display: block !important;
  width: 100% !important;
  max-width: 1080px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

.project-template .pelo-vertical-gallery .pelo-slide img {
  display: block !important;
  width: 100% !important;
  max-width: 1080px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  object-fit: contain !important;
}

/* La lista de proyectos no se oculta nunca */
.projects-list-row {
  display: grid !important;
}


/* V69: Cliente e información de proyecto dentro de cada ficha, sin volver a Proyectos.html */
.project-template .pelo-meta-full {
  display: grid !important;
  grid-template-columns: minmax(0, .48fr) minmax(0, .72fr) minmax(0, 1.2fr) !important;
  gap: clamp(14px, 2vw, 28px) !important;
  max-width: 880px !important;
  margin-top: clamp(24px, 3vw, 40px) !important;
  padding-top: clamp(14px, 2vw, 22px) !important;
  border-top: 1px solid rgba(21, 21, 21, .16) !important;
}

.project-template .pelo-meta-full div {
  grid-column: auto !important;
  margin: 0 !important;
}

.project-template .pelo-meta-full dt {
  font-size: .66rem !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  font-weight: 700 !important;
  color: rgba(21, 21, 21, .48) !important;
  margin-bottom: .42rem !important;
}

.project-template .pelo-meta-full dd {
  margin: 0 !important;
  font-size: clamp(.78rem, .86vw, .92rem) !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  color: rgba(21, 21, 21, .72) !important;
}

@media (max-width: 980px) {
  .project-template .pelo-meta-full {
    grid-template-columns: 1fr !important;
    max-width: 760px !important;
  }
}


/* V70: páginas legales y banner de cookies */
.legal-main {
  padding-top: clamp(96px, 12vw, 150px);
  padding-bottom: clamp(64px, 10vw, 120px);
}

.legal-article {
  width: min(100%, 980px);
  margin: 0 auto;
}

.legal-article .kicker {
  margin-bottom: 1rem;
}

.legal-article h1 {
  font-family: "panel-sans", "Panel Sans", Montserrat, Arial, sans-serif;
  font-size: clamp(2.8rem, 7vw, 7.2rem);
  line-height: .88;
  letter-spacing: -.055em;
  margin: 0 0 clamp(26px, 4vw, 48px);
}

.legal-article h2 {
  font-family: "panel-sans", "Panel Sans", Montserrat, Arial, sans-serif;
  font-size: clamp(1.6rem, 3.1vw, 3.2rem);
  line-height: .98;
  letter-spacing: -.04em;
  margin: clamp(34px, 5vw, 58px) 0 1rem;
}

.legal-article h3 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin: 2rem 0 .7rem;
  color: rgba(21,21,21,.58);
}

.legal-article p,
.legal-article li {
  font-size: clamp(.98rem, 1.04vw, 1.12rem);
  line-height: 1.68;
  color: rgba(21,21,21,.78);
}

.legal-article ul {
  padding-left: 1.2rem;
}

.legal-note {
  margin: 2rem 0;
  padding: 1.2rem 1.4rem;
  border: 1px solid rgba(21,21,21,.14);
  border-radius: 18px;
  background: rgba(255,255,255,.28);
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4rem 0 2rem;
  font-size: .92rem;
}

.legal-table th,
.legal-table td {
  border-top: 1px solid rgba(21,21,21,.16);
  padding: .85rem .7rem;
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
}

.legal-table th {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(21,21,21,.54);
}

.footer-inner {
  gap: 1.2rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1rem;
  align-items: center;
  justify-content: flex-end;
}

.footer-links a,
.footer-cookie-button {
  font: inherit;
  font-size: .78rem;
  line-height: 1.2;
  color: inherit;
  text-decoration: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.footer-links a:hover,
.footer-cookie-button:hover {
  text-decoration: underline;
}

.cookie-consent {
  position: fixed;
  left: clamp(14px, 2vw, 28px);
  right: clamp(14px, 2vw, 28px);
  bottom: clamp(14px, 2vw, 28px);
  z-index: 120;
  color: #151515;
}

.cookie-consent__inner {
  width: min(100%, 980px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.2rem;
  align-items: center;
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid rgba(21,21,21,.18);
  border-radius: 22px;
  background: rgba(244,239,231,.94);
  box-shadow: 0 24px 64px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cookie-consent h2 {
  margin: 0 0 .3rem;
  font-family: "panel-sans", "Panel Sans", Montserrat, Arial, sans-serif;
  font-size: clamp(1.35rem, 2.4vw, 2.15rem);
  line-height: .95;
  letter-spacing: -.035em;
}

.cookie-consent p {
  margin: 0 0 .45rem;
  max-width: 680px;
  font-size: .9rem;
  line-height: 1.45;
  color: rgba(21,21,21,.76);
}

.cookie-consent a {
  font-size: .78rem;
  color: #151515;
}

.cookie-consent__actions {
  display: flex;
  gap: .65rem;
  align-items: center;
}

.cookie-consent__actions .button,
.cookie-consent__actions .button-secondary {
  min-width: 112px;
  justify-content: center;
  cursor: pointer;
}

.cookie-settings-inline {
  margin-top: 1.2rem;
}

@media (max-width: 760px) {
  .legal-main {
    padding-top: 82px;
  }

  .legal-table,
  .legal-table thead,
  .legal-table tbody,
  .legal-table tr,
  .legal-table th,
  .legal-table td {
    display: block;
  }

  .legal-table thead {
    display: none;
  }

  .legal-table tr {
    border-top: 1px solid rgba(21,21,21,.16);
    padding: .75rem 0;
  }

  .legal-table td {
    border-top: 0;
    padding: .25rem 0;
  }

  .cookie-consent__inner {
    grid-template-columns: 1fr;
  }

  .cookie-consent__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .footer-inner {
    align-items: flex-start;
  }

  .footer-links {
    justify-content: flex-start;
  }
}


/* V70b: footer legal también accesible desde la home */
.home-landing-body .footer {
  position: relative;
  z-index: 6;
}


/* V72: últimos ajustes de publicación */
@media (max-width: 760px) {
  /* En móvil no mostramos imágenes destacadas en proyectos.html */
  .projects-list-main .project-row-thumb {
    display: none !important;
  }

  /* Páginas legales con margen cómodo en móvil */
  .legal-body .legal-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .legal-body .section-inner.legal-article,
  .legal-body .legal-article {
    width: auto !important;
    max-width: none !important;
    margin-left: 22px !important;
    margin-right: 22px !important;
  }
}