/* ============================================================
   SILVESTRA — estilos de secciones
   ============================================================ */

/* ---------- HERO base ---------- */
.hero { position: relative; min-height: 100svh; min-height: 100dvh; display: flex; align-items: center; overflow: hidden; }
.hero-photo { padding-block: 7rem 6.5rem; }

.hero-content { position: relative; z-index: 3; }
.hero-h { font-size: clamp(2rem, 4.8vw, 4.15rem); max-width: 13ch; }
.hero-sub { max-width: 40ch; margin-top: 1.55rem; }
.hero-cta { display: flex; gap: .85rem; margin-top: 2rem; flex-wrap: wrap; }
.hero-cta.center { justify-content: center; }

/* — HERO: imagen con overlay verde — */
.hero-photo {
  color: var(--hueso);
  background-color: var(--verde-900);
  isolation: isolate;
}
.hero-bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 58%;
  pointer-events: none;
  user-select: none;
}
.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(12, 54, 35, .72);
}
.hero-photo .hero-content { text-align: center; width: 100%; position: relative; z-index: 2; }
.hero-photo .hero-h {
  font-weight: 300;
  line-height: 1.08;
  margin-inline: auto;
}
.hero-photo .hero-h em {
  font-family: var(--hero-font);
  font-style: italic;
  font-weight: 300;
  font-size: 1.32em;
}
.hero-photo .hero-sub {
  margin-inline: auto;
  color: rgba(244,241,232,.9);
  font-size: clamp(.9rem, 1.4vw, 1.08rem);
}
.hero-photo .hero-cta { justify-content: center; }

.hero-discover {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  margin-top: 1.65rem;
  color: rgba(244,241,232,.86);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
}

.hero-arrow {
  display: block;
  width: 1.5px;
  height: 36px;
  position: relative;
  overflow: hidden;
  background: rgba(244,241,232,.15);
}
.hero-arrow::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background: rgba(244,241,232,.9);
  animation: hero-arrow-fall 1.6s ease-in-out infinite;
}
@keyframes hero-arrow-fall {
  0%   { top: -50%; }
  100% { top: 150%; }
}

.hero-eyebrow { color: rgba(244,241,232,.9); }

.section-title {
  font-size: clamp(1.35rem, 2.1vw, 1.95rem);
  margin-top: 1rem;
  max-width: 22ch;
}

/* ---------- FILOSOFÍA ---------- */
.filo {
  background: var(--crema);
  color: var(--ink);
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-block: var(--section-y-compact);
}
.filo .wrap {
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(420px, 1.18fr);
  align-items: center;
  gap: clamp(1.6rem, 5vw, 5.5rem);
  width: 100%;
}
.filo .quote { font-size: clamp(1.35rem, 2vw, 2rem); max-width: 25ch; }
.filo .quote .accent { color: var(--rosa-500); font-style: italic; }
.filo .body-lg { max-width: 40ch; margin-top: .95rem; line-height: 1.42; font-size: .94rem; }
.pillars { display: grid; grid-template-columns: 1fr; gap: clamp(.75rem, 1.8vh, 1.2rem); margin-top: 0; }
.pillar { }
.pillar .num { font-family: var(--serif); font-size: .82rem; color: var(--rosa-500); letter-spacing: .1em; }
.pillar h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(.92rem, 1vw, 1.05rem); margin: .25rem 0 .28rem; line-height: 1.18; }
.pillar p { color: var(--ink-soft); margin: 0; line-height: 1.35; font-size: .84rem; }
.pillar .rule { width: 32px; height: 2px; background: var(--verde-600); margin-bottom: .48rem; transition: width .6s var(--ease); }
.pillar:hover .rule { width: 72px; }
@media (max-width: 820px) {
  .filo {
    min-height: auto;
    display: block;
    padding-block: 4rem;
  }
  .filo .wrap {
    display: block;
  }
  .filo .quote { font-size: clamp(1.45rem, 7vw, 2.2rem); }
  .filo .body-lg { max-width: 52ch; line-height: 1.65; }
  .pillars { grid-template-columns: 1fr; gap: 2.6rem; margin-top: 3rem; }
}

@media (max-height: 820px) and (min-width: 821px) {
  .filo { padding-block: 1.1rem; }
  .filo .wrap { gap: clamp(1.5rem, 5vw, 5rem); }
  .filo .quote { font-size: clamp(1.25rem, 2vw, 1.85rem); }
  .filo .body-lg { font-size: .84rem; margin-top: .7rem; line-height: 1.36; }
  .pillars { gap: .62rem; }
  .pillar .rule { margin-bottom: .38rem; }
  .pillar h3 { font-size: .95rem; }
  .pillar p { font-size: .76rem; line-height: 1.28; }
}

@media (max-height: 720px) and (min-width: 821px) {
  .filo {
    min-height: 100svh;
    min-height: 100dvh;
    padding-block: 1.2rem;
  }

  .filo .quote { font-size: clamp(1.15rem, 1.75vw, 1.6rem); }
  .filo .body-lg { font-size: .78rem; line-height: 1.3; }
  .pillars { gap: .5rem; }
  .pillar h3 { font-size: .86rem; }
  .pillar p { font-size: .7rem; line-height: 1.24; }
}

/* ---------- SERVICIOS (timeline unificado) ---------- */
.proceso { background: var(--verde-900); color: var(--hueso); position: relative; overflow: hidden; }
.proceso .eyebrow { color: var(--verde-300); }
.proceso .display { color: var(--hueso); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 4rem; }
.step { position: relative; }
.step .dot {
  width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--verde-400);
  display: grid; place-items: center; font-family: var(--serif); font-size: 1.1rem; color: var(--hueso);
  background: rgba(255,255,255,.04); margin-bottom: 1.1rem; position: relative; z-index: 2;
  transition: background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}
.step:hover .dot { background: var(--rosa-500); border-color: var(--rosa-500); transform: scale(1.08); }
.step .conn { position: absolute; top: 24px; left: 48px; right: -1.5rem; height: 1px; background: linear-gradient(90deg, var(--verde-600), rgba(92,174,135,.2)); z-index: 1; }
.step:last-child .conn { display: none; }
.step h4 { font-family: var(--serif); font-weight: 500; font-size: 1rem; margin: 0 0 .4rem; }
.step p { color: rgba(227,240,232,.7); font-size: .86rem; margin: 0; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; gap: 2rem; } .step .conn { display: none; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- PLANOS Y PROCESO CREATIVO ---------- */
.plan-process {
  background: var(--hueso);
  color: var(--ink);
  overflow: hidden;
}

.plan-head {
  display: grid;
  gap: 1.1rem;
}

.plan-lead {
  max-width: 60ch;
  margin: 0;
  font-size: clamp(.78rem, 1.1vw, .9rem);
}

.plan-gallery {
  columns: 2;
  column-gap: 1.25rem;
  margin-top: clamp(2.15rem, 5vh, 3.5rem);
}

.plan-piece {
  position: relative;
  break-inside: avoid;
  margin-bottom: 1.25rem;
  border: 1px solid rgba(24,39,31,.14);
  border-radius: var(--radius-card);
  background: rgba(250,248,242,.74);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 1s var(--ease), box-shadow 1s var(--ease);
}

.plan-piece:hover {
  transform: scale(1.06);
  box-shadow: var(--shadow-card-hover, var(--shadow-card));
  z-index: 2;
}

.plan-piece img {
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(.94) contrast(.96);
  transition: filter 1s var(--ease);
}

.plan-piece:hover img {
  filter: saturate(1) contrast(1);
}

.plan-piece::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,38,25,0) 45%, rgba(8,38,25,.42) 100%);
  pointer-events: none;
}

.plan-piece-caption {
  position: absolute;
  left: .75rem;
  right: .75rem;
  bottom: .65rem;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: .75rem;
  color: var(--hueso);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.3;
  text-transform: uppercase;
}

@media (min-width: 700px) {
  .plan-gallery {
    columns: 4;
    column-gap: 1.5rem;
  }

  .plan-piece {
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 700px) {
  .plan-gallery {
    display: flex;
    flex-wrap: nowrap;
    columns: unset;
    column-gap: unset;
    gap: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    padding-bottom: .25rem;
  }

  .plan-piece {
    flex: 0 0 auto;
    break-inside: unset;
    margin-bottom: 0;
    height: clamp(7rem, 30vw, 9.5rem);
  }

  .plan-piece img {
    width: auto;
    height: 100%;
  }
}

/* ---------- LIGHTBOX ---------- */
.plan-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(8, 26, 18, .88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  cursor: zoom-out;
  animation: lb-in .2s ease;
}

@keyframes lb-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.plan-lightbox-inner {
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  max-width: min(92vw, 1100px);
}

.plan-lightbox-inner img {
  max-width: 100%;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--radius-card);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.plan-lightbox-label {
  color: rgba(250,248,242,.7);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0;
}

.plan-lightbox-close {
  position: fixed;
  top: 1.25rem;
  right: 1.5rem;
  background: rgba(250,248,242,.12);
  border: 1px solid rgba(250,248,242,.2);
  color: var(--hueso);
  font-size: 1rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}

.plan-lightbox-close:hover {
  background: rgba(250,248,242,.22);
}

/* ---------- PORTFOLIO ---------- */
.portfolio { background: var(--crema); }
.pf-head {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.pf-head .section-title {
  margin-bottom: 0;
}
.pf-lead {
  max-width: 60ch;
  margin: 0;
}
.gallery-rows {
  display: grid;
  gap: 1.05rem;
  margin-top: clamp(2.25rem, 6vh, 3.25rem);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}
.gallery-row {
  overflow: hidden;
}
.gallery-track {
  --gallery-speed: 0.45;
  display: flex;
  align-items: center;
  gap: 1.05rem;
  width: max-content;
  will-change: transform;
}
.gallery-set {
  display: flex;
  align-items: center;
  gap: 1.05rem;
  flex: 0 0 auto;
}
.gallery-row.speed-slow .gallery-track { --gallery-speed: 0.3; }
.gallery-row.speed-medium .gallery-track { --gallery-speed: 0.45; }
.gallery-row.speed-fast .gallery-track { --gallery-speed: 0.65; }

.gallery-row:nth-of-type(2) .gallery-track { margin-left: -5.5rem; }
.gallery-row:nth-of-type(3) .gallery-track { margin-left: 3rem; }

@media (hover: none) {
  .gallery-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }
  .gallery-track {
    transform: none !important;
    margin-left: 0 !important;
  }
  .gallery-set[aria-hidden="true"] {
    display: none;
  }
}
.gallery-card {
  position: relative;
  flex: 0 0 auto;
  height: clamp(13rem, 20vw, 19rem);
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid rgba(24,39,31,.08);
  background: var(--crema-2);
  box-shadow: var(--shadow-card);
}
.gallery-open {
  display: block;
  width: auto;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: zoom-in;
  color: inherit;
  text-align: inherit;
}
.gallery-open:focus-visible {
  outline: 2px solid var(--rosa-500);
  outline-offset: 3px;
}
.gallery-open:disabled {
  cursor: default;
}
.gallery-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(8,38,25,.14) 100%);
  pointer-events: none;
}
.gallery-card img {
  width: auto;
  height: 100%;
  display: block;
  filter: saturate(.96) contrast(.96);
  transition: transform 1.1s var(--ease), filter 1.1s var(--ease);
}
.gallery-card:hover img {
  transform: scale(1.045);
  filter: saturate(1.04) contrast(1);
}

.portfolio-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(8, 26, 18, .9);
  cursor: zoom-out;
  animation: lb-in .2s ease;
}
.portfolio-lightbox-inner {
  pointer-events: none;
  max-width: min(94vw, 1200px);
  max-height: 88svh;
}
.portfolio-lightbox-inner img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 88svh;
  object-fit: contain;
  border-radius: var(--radius-card);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.portfolio-lightbox-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0 .95rem;
  border: 1px solid rgba(250,248,242,.2);
  border-radius: var(--radius-pill);
  background: rgba(250,248,242,.12);
  color: var(--hueso);
  cursor: pointer;
  font: inherit;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.portfolio-lightbox-close:hover,
.portfolio-lightbox-close:focus-visible {
  background: rgba(250,248,242,.22);
}

@media (prefers-reduced-motion: reduce) {
  .gallery-track {
    transform: none !important;
  }
}

/* ---------- FOOTER / CTA ---------- */
.cta-final {
  background: var(--verde-950);
  color: var(--hueso);
  position: relative;
  overflow: hidden;
  padding-block: var(--section-y-compact);
}
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.cta-inner h2 {
  margin: .35rem 0 0;
  color: var(--hueso);
  font-family: var(--sans);
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: 400;
  line-height: 1.25;
}
.cta-inner p:not(.eyebrow) {
  max-width: 40ch;
  margin: .45rem 0 0;
  color: rgba(227,240,232,.72);
  font-size: clamp(.75rem, .95vw, .9rem);
  line-height: 1.5;
}
.cta-final .btn {
  flex: 0 0 auto;
  min-height: 40px;
  padding: .74em 1.2em;
  font-size: .64rem;
}

.site-footer { background: var(--verde-900); color: rgba(227,240,232,.75); padding: 3.5rem var(--pad) 2.75rem; }
.footer-grid { max-width: var(--max); margin-inline: auto; display: flex; justify-content: space-between; gap: 3rem; flex-wrap: wrap; align-items: flex-start; }
.footer-brand { max-width: 32ch; }
.footer-heading { margin-bottom: 1rem; }
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.footer-tagline {
  margin-top: 1.2rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(244,241,232,.9);
}
.footer-foot { max-width: var(--max); margin: 3rem auto 0; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .76rem; letter-spacing: .04em; }
.footer-foot a { color: rgba(227,240,232,.75); text-decoration: none; }
.footer-logo { height: 72px; }

/* whatsapp float */
.wa-float { position: fixed; bottom: 1.6rem; right: 1.6rem; z-index: 50;
  width: 56px; height: 56px; border-radius: 50%; background: var(--verde-600);
  display: grid; place-items: center; box-shadow: 0 12px 30px -10px rgba(12,54,35,.7);
  transition: transform .4s var(--ease); cursor: pointer; }
.wa-float:hover { transform: scale(1.1) translateY(-2px); }
.wa-float svg { width: 28px; height: 28px; fill: #fff; }

@media (max-width: 700px) {
  .hero-photo {
    min-height: 100svh;
    min-height: 100dvh;
    padding-block: 6.4rem 4.8rem;
    align-items: center;
  }

  .hero-photo .hero-h {
    font-size: clamp(1.8rem, 10vw, 3.1rem);
    max-width: 10ch;
  }

  .hero-sub {
    max-width: 27ch;
    margin-top: 1.15rem;
  }

  .hero-cta {
    width: min(100%, 22rem);
    margin: 1.5rem auto 0;
    gap: .6rem;
    flex-direction: column;
  }

  .hero-cta .btn {
    min-height: 44px;
    padding: .82em 1em;
    font-size: .68rem;
    letter-spacing: .09em;
  }

  .hero-discover {
    margin-top: 1.1rem;
    font-size: .6rem;
  }

  .pillars {
    margin-top: 3rem;
  }

  .gallery-rows {
    margin-top: 2.2rem;
  }

  .steps {
    margin-top: 2.6rem;
  }

  .gallery-rows {
    gap: .75rem;
  }

  .gallery-track,
  .gallery-set { gap: .75rem; }
  .gallery-card { height: 11rem; }

  .cta-inner {
    display: grid;
    gap: 1.15rem;
  }

  .cta-final .btn {
    width: fit-content;
  }

  .site-footer {
    padding-bottom: 5.5rem;
  }

  .footer-grid {
    display: grid;
    gap: 2.1rem;
  }

  .footer-foot {
    display: grid;
    gap: .7rem;
  }

  .wa-float {
    right: 1rem;
    bottom: 1rem;
    width: 54px;
    height: 54px;
  }
}

@media (max-width: 380px) {
  .hero-photo {
    padding-block: 5.6rem 3.8rem;
  }

  .hero-photo .hero-h {
    font-size: clamp(1.65rem, 10vw, 2.55rem);
  }

  .hero-cta {
    margin-top: 1.35rem;
  }
}

@media (max-height: 760px) and (min-width: 701px) {
  .hero-photo {
    padding-bottom: 5.2rem;
  }

  .hero-cta {
    margin-top: 1.45rem;
  }
}