/* =================================================================
   Kinara - porcelanatos v5 - CLEAR EDITORIAL (TAU / Atlas Concorde)
   Light neutral base everywhere. No flat dark color bands: the only
   "dark" is text, or a translucent scrim OVER an ambiente photo.
   Brand green lives only in CTAs + micro-detail. Photo leads.
   Consumes shared/styles/tokens.css. Mobile-first. Vanilla, < 1s.
   ================================================================= */

/* ---------- Local brand override (does NOT touch shared/tokens.css) ----
   Loaded AFTER tokens.css, so it recolors ONLY this landing. */
:root {
  --k-paper:     #F7F7F4; /* dominant neutral off-white (not yellow beige) */
  --k-paper-2:   #FFFFFF; /* crisp white for alternating sections */
  --k-ink:       #1c1d1a; /* near-black neutral ink */
  --k-charcoal:  #1c1d1a; /* override: former dark band token is now ink (text only) */

  --k-bg:        #F7F7F4;
  --k-bg-alt:    #FFFFFF;
  --k-white:     #FFFFFF;
  --k-text:      #1c1d1a;
  --k-ink-soft:  #54564f; /* neutral gray secondary text (AA on paper) */
  --k-cream-on-dark: #FFFFFF;

  /* Hairlines */
  --k-line:      rgba(28, 29, 26, .14);
  --k-line-soft: rgba(28, 29, 26, .08);
  --k-line-onphoto: rgba(255, 255, 255, .26);

  /* Green = accent only (CTAs + micro-detail) */
  --k-cta:       #3e9537; /* primary CTA fill - the green the client wants to pop */
  --k-cta-hover: #357f2f;
  --k-whatsapp:  #3e9537; /* WA CTAs use brand green */
  --k-font-display: 'Marcellus', Georgia, serif; /* v6: elegant roman, lighter than Abril */

  /* Editorial radii + soft neutral shadows */
  --k-radius:    10px;
  --k-radius-lg: 16px;
  --k-shadow:    0 20px 44px -26px rgba(28, 29, 26, .30);
  --k-shadow-lg: 0 34px 76px -32px rgba(28, 29, 26, .34);
  --k-maxw:      1280px;

  --k-ease: cubic-bezier(.16, 1, .3, 1); /* ease-out-quint, never bounce */
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Full-bleed + no horizontal overflow (kept from v2-v4): nothing exceeds vw. */
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--k-font-body);
  font-size: var(--k-body);
  line-height: 1.7;
  color: var(--k-text);
  background: var(--k-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.08; font-weight: 400; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--k-cta); outline-offset: 3px; border-radius: 4px; }

/* ---------- Fixed film-grain overlay (subtle premium texture) ----------
   Fixed, pointer-events:none, very low opacity. Never on a scroll container. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%; max-width: var(--k-maxw); margin-inline: auto;
  padding-inline: var(--k-space-6);
}
@media (min-width: 1024px) { .container { padding-inline: var(--k-space-12); } }

.section { padding-block: clamp(4.5rem, 9vw, 9.5rem); }

/* Editorial section head: eyebrow, big serif, generous measure. */
.section__head { max-width: 54rem; margin-bottom: var(--k-space-12); }
@media (min-width: 1024px) { .section__head { margin-bottom: var(--k-space-16); } }
.section__head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  font-size: var(--k-small);
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--k-cta);
  margin-bottom: var(--k-space-4);
  display: inline-flex; align-items: center; gap: .7em;
}
.eyebrow::before {
  content: ""; width: 2.4rem; height: 2px;
  background: var(--k-cta); display: inline-block;
}

h1, .section__head h2 {
  font-family: var(--k-font-display);
  color: var(--k-ink);
  font-weight: 400;
  letter-spacing: -0.015em;
}
h1 { font-size: var(--k-h1); }
.section__head h2 {
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  line-height: 1.03;
}
h3 { font-family: var(--k-font-body); font-weight: 700; font-size: var(--k-h3); color: var(--k-ink); }

.section__lead {
  margin-top: var(--k-space-6);
  font-size: 1.18rem;
  line-height: 1.75;
  color: var(--k-ink-soft);
  max-width: 42rem; /* ~66ch measure */
}

/* ============================================================= */
/* Buttons - Atlas Concorde pill + trailing arrow                */
/* ============================================================= */
.btn {
  --btn-pad-y: .9rem; --btn-pad-x: 1.6rem;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-family: var(--k-font-body); font-weight: 700; font-size: 1.0625rem;
  letter-spacing: .005em;
  border: 1.5px solid transparent; border-radius: 999px; /* pill */
  cursor: pointer; text-align: center; line-height: 1.2;
  min-height: 44px;
  transition: transform .4s var(--k-ease), background-color .35s var(--k-ease),
              box-shadow .4s var(--k-ease), color .35s var(--k-ease), border-color .35s var(--k-ease);
}
.btn__icon { flex: 0 0 auto; }
/* Trailing arrow, nudges out on hover (Atlas-style). */
.btn::after {
  content: "\2197"; /* up-right arrow */
  font-size: 1.05em; line-height: 0; font-weight: 700;
  transition: transform .4s var(--k-ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { transform: translate(2px, -2px); }
.btn:active { transform: translateY(0) scale(.99); }

/* PRIMARY: solid brand green, white text, soft green-tinted shadow. Stands out. */
.btn--whatsapp { background: var(--k-cta); color: #fff; box-shadow: 0 16px 32px -14px rgba(62, 149, 55, .65); }
.btn--whatsapp:hover { background: var(--k-cta-hover); box-shadow: 0 24px 46px -14px rgba(62, 149, 55, .75); }

/* SECONDARY: outline (1.5px ink), transparent fill, fills on hover. */
.btn--ghost { background: transparent; color: var(--k-ink); border-color: var(--k-ink); }
.btn--ghost:hover { background: var(--k-ink); color: var(--k-paper); }

.btn--sm { --btn-pad-y: .55rem; --btn-pad-x: 1.1rem; font-size: var(--k-small); min-height: 40px; }
/* Larger label so the green CTA also clears AA as large bold text. */
.btn--lg { --btn-pad-y: 1.05rem; --btn-pad-x: 2.1rem; font-size: 1.2rem; }

.link-cta {
  font-weight: 700; color: var(--k-ink);
  border-bottom: 1px solid var(--k-line);
  transition: border-color .3s var(--k-ease), color .3s var(--k-ease);
  display: inline-block;
}
.link-cta:hover { color: var(--k-cta); border-color: var(--k-green); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--k-paper) 82%, transparent);
  backdrop-filter: saturate(115%) blur(12px);
  border-bottom: 1px solid var(--k-line-soft);
}
.site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 76px; gap: var(--k-space-4); }
.site-header__inner .brand { justify-self: start; }
.site-header__inner .rating-badge { justify-self: center; }
.site-header__inner > .btn { justify-self: end; }
.brand img { height: 64px; width: auto; }

.rating-badge { display: none; align-items: center; gap: .6rem; color: #ece9e1; background: var(--k-ink); padding: .6rem 1.15rem; border-radius: 999px; }
.rating-badge__stars { color: #f5b50a; letter-spacing: 2px; font-size: 1.32rem; }
.rating-badge strong { color: #fff; font-size: 1.22rem; }
.rating-badge__text { font-size: .95rem; }
@media (min-width: 760px) { .rating-badge { display: inline-flex; } }

/* ============================================================= */
/* Photo sections - ambiente photo + translucent scrim (no flat) */
/* ============================================================= */
.section--photo { position: relative; isolation: isolate; color: #fff; }
.section__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.section__bg img { width: 100%; height: 100%; object-fit: cover; }
.section--photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(18, 19, 16, .60) 0%, rgba(18, 19, 16, .70) 100%);
}

/* ============================================================= */
/* 1. HERO - cinematic full-bleed, centered display (Atlas/TAU)  */
/* ============================================================= */
.hero { position: relative; color: #fff; isolation: isolate; display: flex; align-items: center; text-align: center; min-height: 92vh; min-height: 92dvh; }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(18, 19, 16, .34) 0%, rgba(18, 19, 16, .40) 50%, rgba(18, 19, 16, .58) 100%);
}
.hero__content { margin-inline: auto; padding-block: var(--k-space-24); max-width: 54rem; }
.hero__logo { height: 56px; width: auto; margin: 0 auto var(--k-space-8); filter: brightness(0) invert(1); }
@media (min-width: 768px) { .hero__logo { height: 64px; } }
.hero .eyebrow { color: #f4f1ea; margin-bottom: var(--k-space-4); justify-content: center; }
.hero .eyebrow::before { background: var(--k-cta); }
.hero h1 {
  color: #fff; margin-bottom: var(--k-space-6);
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: .98; letter-spacing: -0.02em;
  max-width: 18ch; margin-inline: auto;
  text-shadow: 0 2px 34px rgba(12, 12, 10, .4);
}
.hero__sub {
  font-size: clamp(1.12rem, 2.2vw, 1.4rem);
  line-height: 1.6; color: rgba(255, 255, 255, .94);
  max-width: 40rem; margin-inline: auto;
  text-shadow: 0 1px 16px rgba(12, 12, 10, .4);
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--k-space-4); margin-top: var(--k-space-8); }
.hero__actions .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .7); }
.hero__actions .btn--ghost:hover { background: #fff; color: var(--k-ink); border-color: #fff; }

.cta-reassure { margin-top: var(--k-space-4); font-size: var(--k-small); color: var(--k-ink-soft); }
.cta-reassure--hero { color: rgba(255, 255, 255, .9); text-shadow: 0 1px 12px rgba(12, 12, 10, .4); }

/* Marquee: diferenciadores deslizandose a la izquierda (premium, infinito). */
.marquee { background: var(--k-ink); overflow: hidden; }
.marquee__track { display: flex; width: max-content; will-change: transform; animation: k-marquee 42s linear infinite; }
.marquee__group { display: flex; align-items: center; flex: none; padding-block: 1.05rem; }
.marquee__item {
  color: #ece9e1; font-family: var(--k-font-display); font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 1.7rem); line-height: 1;
  letter-spacing: .015em; white-space: nowrap; padding-inline: 1.6rem;
}
.marquee__sep { color: var(--k-green); font-size: .68rem; align-self: center; }
@keyframes k-marquee { to { transform: translateX(-50%); } }
@media (hover: hover) and (pointer: fine) { .marquee:hover .marquee__track { animation-play-state: paused; } }

/* Section-closing CTA block. */
.section__cta { margin-top: var(--k-space-16); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--k-space-2); }
.section__cta .cta-reassure { margin-top: var(--k-space-4); }

/* ============================================================= */
/* 2. POR QUE KINARA - now LIGHT (no dark band), numerals + lines */
/* ============================================================= */
.why { background: var(--k-bg-alt); color: var(--k-ink); }
.pillar-grid { display: grid; gap: var(--k-space-8); grid-template-columns: 1fr; }
@media (min-width: 860px) { .pillar-grid { grid-template-columns: repeat(3, 1fr); gap: var(--k-space-12); } }
.pillar { padding-top: var(--k-space-6); border-top: 1px solid var(--k-line); }
.pillar__num {
  display: block; font-family: var(--k-font-display); font-size: 2.6rem;
  color: var(--k-cta); line-height: 1; margin-bottom: var(--k-space-6);
}
.pillar__title { color: var(--k-ink); margin-bottom: var(--k-space-3); }
.pillar p { color: var(--k-ink-soft); max-width: 34ch; }

/* ============================================================= */
/* 3. GALERIA DE ACABADOS - magazine gallery, asymmetric 12-col  */
/* ============================================================= */
.feels { background: var(--k-paper); }
.feel-grid { display: grid; gap: var(--k-space-12); grid-template-columns: 1fr; counter-reset: feel; }
@media (min-width: 768px) {
  .feel-grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--k-space-8); row-gap: var(--k-space-16); }
  .feel-card:nth-child(4n+1) { grid-column: span 7; }
  .feel-card:nth-child(4n+2) { grid-column: span 5; }
  .feel-card:nth-child(4n+3) { grid-column: span 5; }
  .feel-card:nth-child(4n)   { grid-column: span 7; }
}
.feel-card { counter-increment: feel; display: flex; flex-direction: column; gap: var(--k-space-4); }
.feel-card__media {
  aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--k-radius-lg);
  background: var(--k-paper-2); box-shadow: var(--k-shadow);
}
@media (min-width: 768px) {
  .feel-card:nth-child(4n+1) .feel-card__media,
  .feel-card:nth-child(4n) .feel-card__media { aspect-ratio: 16 / 11; }
}
.feel-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--k-ease); }
.feel-card:hover .feel-card__media img { transform: scale(1.05); }
.feel-card__body { display: flex; flex-direction: column; gap: var(--k-space-3); padding-top: var(--k-space-2); }
.feel-card__title {
  font-family: var(--k-font-display); font-weight: 400; color: var(--k-ink);
  font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.05;
  display: flex; align-items: baseline; gap: .7rem;
}
.feel-card__title::before {
  content: counter(feel, decimal-leading-zero);
  font-family: var(--k-font-body); font-weight: 700; font-size: .5em;
  letter-spacing: .06em; color: var(--k-ink-soft);
}
.feel-card__body p { color: var(--k-ink-soft); max-width: 40ch; }
.feel-card .link-cta { color: var(--k-ink); border-color: var(--k-line); margin-top: var(--k-space-1); align-self: flex-start; }
.feel-card .link-cta:hover { color: var(--k-cta); border-color: var(--k-green); }

/* ============================================================= */
/* 4. PROYECTOS - editorial zig-zag, large case-by-case images   */
/* ============================================================= */
.projects { background: var(--k-bg-alt); }
.project-grid { display: grid; gap: var(--k-space-16); counter-reset: project; }
@media (min-width: 1024px) { .project-grid { gap: var(--k-space-24); } }
.project-card { display: grid; gap: var(--k-space-6); align-items: center; counter-increment: project; }
@media (min-width: 860px) {
  .project-card { grid-template-columns: repeat(12, 1fr); gap: var(--k-space-12); }
  .project-card__media { grid-column: 1 / span 8; grid-row: 1; }
  .project-card__body  { grid-column: 9 / span 4; grid-row: 1; }
  .project-card:nth-child(even) .project-card__media { grid-column: 5 / span 8; }
  .project-card:nth-child(even) .project-card__body  { grid-column: 1 / span 4; }
}
.project-card__media {
  aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--k-radius-lg);
  background: var(--k-paper); box-shadow: var(--k-shadow);
}
.project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--k-ease); }
.project-card:hover .project-card__media img { transform: scale(1.04); }
.project-card__body { position: relative; }
.project-card__body::before {
  content: counter(project, decimal-leading-zero);
  display: block; font-family: var(--k-font-display); font-size: 1.6rem;
  color: var(--k-cta); margin-bottom: var(--k-space-3);
}
.project-card__client {
  font-family: var(--k-font-display); font-weight: 400; font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  color: var(--k-ink); line-height: 1.05; margin-bottom: var(--k-space-2);
}
.project-card__place { font-size: var(--k-small); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--k-cta); margin-bottom: var(--k-space-4); }
.project-card__note { font-size: 1rem; color: var(--k-ink-soft); }

/* ============================================================= */
/* 5. HECHO PARA LA VIDA REAL - ambiente photo + scrim           */
/* ============================================================= */
.resilience .section__head h2 { color: #fff; }
.resilience .eyebrow { color: #f4f1ea; }
.resilience .eyebrow::before { background: var(--k-cta); }
.resilience .section__lead { color: rgba(255, 255, 255, .86); }
.resilience-grid { display: grid; gap: var(--k-space-8); grid-template-columns: 1fr; }
@media (min-width: 600px) { .resilience-grid { grid-template-columns: 1fr 1fr; gap: var(--k-space-12); } }
@media (min-width: 920px) { .resilience-grid { grid-template-columns: repeat(4, 1fr); gap: var(--k-space-8); } }
.resist { padding-top: var(--k-space-6); border-top: 1px solid var(--k-line-onphoto); }
.resist__icon { color: #8dc03e; margin-bottom: var(--k-space-4); display: block; }
.resist__title { color: #fff; font-size: 1.15rem; line-height: 1.25; margin-bottom: var(--k-space-3); }
.resist p { color: rgba(255, 255, 255, .82); font-size: var(--k-small); line-height: 1.6; }

/* ============================================================= */
/* 6. RESENAS - editorial quotes, hairline separators            */
/* ============================================================= */
.testimonials { background: var(--k-paper); }
.testimonial-grid { display: grid; gap: var(--k-space-12); grid-template-columns: 1fr; }
@media (min-width: 760px) { .testimonial-grid { grid-template-columns: 1fr 1fr; gap: var(--k-space-12) var(--k-space-16); } }
.testimonial {
  background: transparent; border: 0; border-top: 1px solid var(--k-line);
  border-radius: 0; box-shadow: none; padding: var(--k-space-8) 0 0;
  display: flex; flex-direction: column; gap: var(--k-space-6);
}
.testimonial__quote { position: relative; font-size: 1.22rem; line-height: 1.6; color: var(--k-ink); padding-top: var(--k-space-6); }
.testimonial__quote::before {
  content: "\201C"; position: absolute; top: -0.35em; left: -0.04em;
  font-family: var(--k-font-display); font-size: 3.4rem; line-height: 1;
  color: var(--k-green); opacity: .6;
}
.testimonial__meta { display: flex; flex-direction: column; gap: .2rem; }
.testimonial__stars { color: #c08a1e; letter-spacing: 2px; }
.testimonial__author { font-style: normal; font-weight: 700; font-size: var(--k-small); letter-spacing: .04em; color: var(--k-ink-soft); }
.testimonials__cta { margin-top: var(--k-space-16); }

/* ---------- Antes / despues (shared widget container) ---------- */
.before-after { background: var(--k-bg-alt); }
.before-after .ba-slider { max-width: 1000px; margin-inline: auto; border-radius: var(--k-radius-lg); overflow: hidden; box-shadow: var(--k-shadow); }

/* ---------- Calculadora (shared widget container) ---------- */
.calculator { background: var(--k-paper); }
.calculator .js-m2-calculator { max-width: 720px; margin-inline: auto; }

/* ============================================================= */
/* 7. CTA FINAL + UBICACIONES - ambiente photo + scrim           */
/* ============================================================= */
.final-cta__inner { display: grid; gap: var(--k-space-12); align-items: center; }
@media (min-width: 900px) { .final-cta__inner { grid-template-columns: 1.05fr .95fr; gap: var(--k-space-16); } }
.final-cta__pitch h2 { font-family: var(--k-font-display); font-weight: 400; font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.05; color: #fff; margin-bottom: var(--k-space-6); letter-spacing: -0.015em; }
.final-cta__pitch p { color: rgba(255, 255, 255, .9); margin-bottom: var(--k-space-10); max-width: 32rem; line-height: 1.7; }
.final-cta__pitch strong { color: #fff; }
.final-cta__actions { display: flex; flex-wrap: wrap; gap: var(--k-space-4); }
.final-cta__actions .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .6); }
.final-cta__actions .btn--ghost:hover { background: #fff; color: var(--k-ink); border-color: #fff; }

.locations { margin-top: var(--k-space-24); padding-top: var(--k-space-16); border-top: 1px solid var(--k-line-onphoto); }
.locations__title { font-family: var(--k-font-body); font-weight: 700; font-size: var(--k-h3); color: #f4f1ea; margin-bottom: var(--k-space-3); }
.location-grid { display: grid; gap: var(--k-space-8); grid-template-columns: 1fr; }
@media (min-width: 640px) { .location-grid { grid-template-columns: repeat(3, 1fr); } }
.location { padding-top: 0; border-top: none; }
.location__photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--k-radius); margin-bottom: var(--k-space-4); display: block; box-shadow: 0 18px 40px -22px rgba(0,0,0,.6); }
.location__name { font-family: var(--k-font-body); font-weight: 700; font-size: 1.1rem; color: #fff; margin-bottom: .25rem; }
.location__detail { font-size: var(--k-small); color: rgba(255, 255, 255, .82); }
.locations__shipping { margin: 0 0 var(--k-space-12); font-family: var(--k-font-display); font-weight: 400; font-size: clamp(1.25rem, 2.4vw, 1.7rem); letter-spacing: .01em; color: #ece9e1; }

/* ---------- Footer - light (no dark band) ---------- */
.site-footer { background: var(--k-paper); color: var(--k-ink-soft); padding-block: var(--k-space-8); font-size: var(--k-small); text-align: center; border-top: 1px solid var(--k-line); }

/* ---------- Sticky WhatsApp (mobile) ---------- */
.wa-sticky {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--k-cta); color: #fff;
  padding: .9rem 1.2rem; border-radius: 999px; font-weight: 700;
  box-shadow: 0 18px 40px -16px rgba(62, 149, 55, .85);
  transition: transform .3s var(--k-ease), background-color .3s var(--k-ease);
}
.wa-sticky:hover { transform: scale(1.04); background: var(--k-cta-hover); }
.wa-sticky__label { font-size: .95rem; }
@media (min-width: 900px) { .wa-sticky { right: 1.6rem; bottom: 1.6rem; width: 62px; height: 62px; padding: 0; justify-content: center; } .wa-sticky__label { display: none; } }

/* ============================================================= */
/* MOTION - subtle, vanilla, GPU-safe (transform/opacity only)   */
/* ============================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* Hero load: gentle staggered rise. */
  .hero__content > * { animation: k-hero-in .9s var(--k-ease) both; }
  .hero__content > *:nth-child(1) { animation-delay: .05s; }
  .hero__content > *:nth-child(2) { animation-delay: .14s; }
  .hero__content > *:nth-child(3) { animation-delay: .23s; }
  .hero__content > *:nth-child(4) { animation-delay: .32s; }
  .hero__content > *:nth-child(5) { animation-delay: .41s; }
  .hero__content > *:nth-child(6) { animation-delay: .50s; }
  @keyframes k-hero-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

  /* Scroll reveal (IntersectionObserver adds .reveal--in). */
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--k-ease), transform .9s var(--k-ease); }
  .reveal--in { opacity: 1; transform: none; }
  .pillar:nth-child(2), .feel-card:nth-child(2), .project-card:nth-child(2),
  .resist:nth-child(2), .testimonial:nth-child(2), .location:nth-child(2) { transition-delay: .1s; }
  .pillar:nth-child(3), .feel-card:nth-child(3), .project-card:nth-child(3),
  .resist:nth-child(3), .testimonial:nth-child(3), .location:nth-child(3) { transition-delay: .2s; }
  .feel-card:nth-child(4), .resist:nth-child(4), .testimonial:nth-child(4) { transition-delay: .3s; }

  /* Light parallax on the hero photo (pure CSS scroll-timeline; degrades). */
  @supports (animation-timeline: scroll()) {
    .hero__media img {
      animation: k-parallax linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
      will-change: transform;
    }
    @keyframes k-parallax { from { transform: scale(1.08) translateY(0); } to { transform: scale(1.08) translateY(5%); } }
  }
}

/* ---------- Reduced motion: everything static ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}


/* ===== v6: Marcellus tuning (elegant roman: air + no negative tracking) ===== */
h1, .section__head h2, .hero h1, .final-cta__pitch h2 { letter-spacing: 0; }
.hero h1 { line-height: 1.05; font-size: clamp(2.7rem, 7vw, 5.6rem); }

/* ---- Conversion boosters v6: oferta, doble CTA (llamar), reseñas verificables ---- */


.btn--call {
  background: rgba(255, 255, 255, .12); color: #fff;
  border: 1px solid rgba(255, 255, 255, .55); backdrop-filter: blur(4px);
}
.btn--call:hover { background: #fff; color: var(--k-ink); border-color: #fff; }


.reviews-link {
  display: inline-block; margin-top: .6rem;
  color: var(--k-cta); font-weight: 700; text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.reviews-link:hover { color: var(--k-cta-hover); }


/* ===== v7: hero claim (jerarquia "Importadores directos") + marquee a11y ===== */
.hero__claim {
  margin: var(--k-space-5) auto 0;
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  font-family: var(--k-font-display); font-weight: 400;
  font-size: clamp(1.55rem, 3.6vw, 2.5rem); line-height: 1.1; color: #fff;
  text-shadow: 0 1px 16px rgba(12, 12, 10, .42);
}
.hero__claim span {
  font-family: var(--k-font-body); font-weight: 500;
  font-size: clamp(.95rem, 1.5vw, 1.1rem); line-height: 1.55;
  letter-spacing: .015em; color: rgba(255, 255, 255, .85);
  max-width: 30rem; text-shadow: 0 1px 12px rgba(12, 12, 10, .4);
}
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none !important; } }


/* ===== v7 fixes: hero claim 1 línea + reseñas Google (estrellas doradas + logo) ===== */
@media (min-width: 760px) { .hero__claim span { white-space: nowrap; max-width: none; } }

.g-rating { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; }
.g-rating__stars { color: #fbbc04; font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: .1em; line-height: 1; }
.g-logo { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; vertical-align: -.13em; margin: 0 .14em 0 .05em; }
.g-logo svg { width: 100%; height: 100%; display: block; }
.g-logo--sm { width: .95em; height: .95em; vertical-align: -.16em; }


/* ============================================================= */
/* PIEDRA NATURAL LANDING — secciones específicas (base v7)      */
/* ============================================================= */
.container--narrow { max-width: 56rem; }
.section__head--left { margin-inline: 0; text-align: left; }

/* Graceful placeholder: dark base shows through until real photos land. */
.hero, .section--photo { background-color: var(--k-charcoal); }

/* --- Natural vs Imitación (sección oscura premium, contraste) --- */
.versus { background: var(--k-charcoal); color:#fff; }
.versus .section__head h2 { color:#fff; }
.versus .eyebrow { color:#d7e3c5; }
.versus .eyebrow::before { background: var(--k-green); }
.versus .section__lead { color: rgba(255,255,255,.84); }
.versus-grid { display:grid; gap: var(--k-space-6); grid-template-columns: 1fr; }
@media (min-width: 760px) { .versus-grid { grid-template-columns: 1fr 1fr; gap: var(--k-space-8); } }
.versus-card { padding: var(--k-space-8); border-radius: var(--k-radius-lg); border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.versus-card--good { border-color: color-mix(in srgb, var(--k-green) 45%, transparent); box-shadow: 0 22px 48px -24px rgba(0,0,0,.55); }
.versus-card__tag { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.35em .85em; border-radius:999px; margin-bottom: var(--k-space-4); }
.versus-card--good .versus-card__tag { background: var(--k-green); color:#14310f; }
.versus-card--bad .versus-card__tag { background: rgba(255,255,255,.14); color:#fff; }
.versus-card h3 { color:#fff; margin-bottom: var(--k-space-4); }
.versus-list { display:flex; flex-direction:column; gap: var(--k-space-3); }
.versus-list li { position:relative; padding-left: 1.6em; color: rgba(255,255,255,.86); line-height:1.55; }
.versus-list li::before { content:""; position:absolute; left:0; top:.5em; width:.7em; height:.7em; border-radius:50%; }
.versus-card--good .versus-list li::before { background: var(--k-green); }
.versus-card--bad .versus-list li::before { background: rgba(255,255,255,.3); }
.versus-note { margin: var(--k-space-12) auto 0; max-width: 44rem; text-align:center; color: rgba(255,255,255,.82); }
.versus-note strong { color:#fff; }

/* --- FAQ (patrón compartido con pisos-spc) --- */
.faq { background: var(--k-paper); }
.faq-list { display:flex; flex-direction:column; gap: var(--k-space-3); }
.faq-item { border:1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-paper-2); overflow:hidden; }
.faq-item summary { cursor:pointer; list-style:none; padding: var(--k-space-4) var(--k-space-6); font-weight:600; color: var(--k-ink); display:flex; justify-content:space-between; align-items:center; gap: var(--k-space-4); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; font-size:1.5rem; line-height:1; color: var(--k-green-mid); transition: transform .3s var(--k-ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin:0; padding:0 var(--k-space-6) var(--k-space-6); color: var(--k-ink-soft); line-height:1.65; }