/* ===========================================================
   ECOINNOVA INTERIORISMO — v4
   PrimeEstate layout, recolored · Yellow #FFC400 / Black #121212 / White
   Zero radius · hairline borders · Cormorant serif display
   =========================================================== */

@font-face{
  font-family:"Inter";
  src:url("/fonts/inter-latin.woff2") format("woff2");
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
}
@font-face{
  font-family:"Cormorant Garamond";
  src:url("/fonts/cormorant-garamond-roman-latin.woff2") format("woff2");
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
}
@font-face{
  font-family:"Cormorant Garamond";
  src:url("/fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  font-style:italic;
  font-weight:500 600;
  font-display:swap;
}

:root{
  --paper:   #FFFFFF;
  --paper-2: #F4F2EC;
  --ink:     #121212;
  --ink-1:   #1B1B1B;
  --ink-2:   #242424;
  --yellow:  #FFC400;
  --yellow-d:#E6A800;

  --fg:      #121212;
  --fg-soft: #4B4B4B;
  --muted:   #7B7B7B;
  --faint:   #ABABAB;
  --d-fg:    #FFFFFF;
  --d-soft:  #C4C0B6;
  --d-faint: #8A857B;

  --line:      rgba(18,18,18,.15);
  --line-soft: rgba(18,18,18,.08);
  --d-line:      rgba(255,255,255,.16);
  --d-line-soft: rgba(255,255,255,.09);

  --serif: "Cormorant Garamond", Georgia, serif;
  --body:  "Inter", system-ui, sans-serif;

  --pad: clamp(18px, 4vw, 76px);
  --maxw: 1340px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{ background:var(--paper); color:var(--fg); font-family:var(--body); font-size:16px; line-height:1.6; overflow-x:hidden; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
::selection{ background:var(--yellow); color:#121212; }

/* ---------- primitives ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(64px,8vw,118px); position:relative; }
.dark{ background:var(--ink); color:var(--d-fg); }
.alt{ background:var(--paper-2); }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.05; letter-spacing:-.01em; }
.display{ font-size:clamp(44px,6vw,82px); line-height:1.02; font-weight:600; }
.h2{ font-size:clamp(32px,4vw,56px); }
.h3{ font-size:clamp(22px,2vw,29px); }
.h4{ font-size:20px; }
.lead{ font-family:var(--body); font-size:clamp(14.5px,1vw,16px); line-height:1.7; color:var(--fg-soft); max-width:54ch; }

.eyebrow{ font-family:var(--body); font-size:11px; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px; color:var(--yellow-d); }
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--yellow-d); }
.eyebrow.center{ justify-content:center; }
.eyebrow.on-dark{ color:var(--yellow); }
.eyebrow.on-dark::before{ background:var(--yellow); }
.accent{ color:var(--yellow-d); }
.dark .accent{ color:var(--yellow); }

/* buttons (squared) */
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--body); font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; padding:15px 26px; border-radius:0; transition:all .26s var(--ease); }
.btn .ico{ width:14px; height:14px; transition:transform .26s var(--ease); }
.btn:hover .ico{ transform:translateX(4px); }
.btn-yellow{ background:var(--yellow); color:#121212; }
.btn-yellow:hover{ background:var(--yellow-d); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#000; }
.btn-light{ background:#fff; color:#121212; }
.btn-light:hover{ background:#efefef; }
.btn-ghost{ border:1px solid var(--line); color:var(--fg); }
.btn-ghost:hover{ border-color:var(--fg); }
.btn-ghost.on-dark{ border:1px solid var(--d-line); color:#fff; }
.btn-ghost.on-dark:hover{ border-color:#fff; background:rgba(255,255,255,.06); }

.tlink{ display:inline-flex; align-items:center; gap:8px; font-family:var(--body); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--fg); transition:gap .3s var(--ease), color .3s; }
.tlink .em{ color:var(--yellow-d); }
.tlink:hover{ gap:13px; color:var(--yellow-d); }
.tlink .ico{ width:14px; height:14px; }

/* play button (squared) */
.play{ width:62px; height:62px; background:var(--yellow); color:#121212; display:grid; place-items:center; flex:none; transition:transform .3s var(--ease), background .3s; }
.play svg{ width:34%; }
.play:hover{ transform:scale(1.07); background:var(--yellow-d); }

.imgwrap{ background:#e6e4de; overflow:hidden; position:relative; }
.imgwrap img{ width:100%; height:100%; object-fit:cover; }

/* reveal */
html.anim .reveal{ opacity:0; transform:translateY(20px); transition:opacity .65s var(--ease), transform .65s var(--ease); }
html.anim .reveal.in{ opacity:1; transform:none; }
html.anim .reveal[data-d="1"]{ transition-delay:.07s; }
html.anim .reveal[data-d="2"]{ transition-delay:.14s; }
html.anim .reveal[data-d="3"]{ transition-delay:.21s; }
@media (prefers-reduced-motion:reduce){ html.anim .reveal{ opacity:1; transform:none; transition:none; } }

/* ====================================================== TOPBAR + NAV */
.topbar{ background:var(--ink); color:var(--d-soft); font-size:12.5px; }
.topbar .in{ max-width:var(--maxw); margin:0 auto; padding:9px var(--pad); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.topbar .left{ display:flex; gap:26px; }
.topbar .left a{ display:inline-flex; align-items:center; gap:8px; transition:color .25s; }
.topbar .left a:hover{ color:#fff; }
.topbar .left svg{ width:14px; height:14px; color:var(--yellow); }
.topbar .social{ display:flex; gap:14px; }
.topbar .social a{ color:var(--d-soft); transition:color .25s; }
.topbar .social a:hover{ color:var(--yellow); }
.topbar .social svg{ width:15px; height:15px; }
@media (max-width:820px){ .topbar .left a:nth-child(2){ display:none; } }

.nav{ position:absolute; left:0; right:0; z-index:60; display:flex; align-items:center; justify-content:space-between; padding:20px var(--pad); }
.nav.fixed{ position:fixed; top:0; background:rgba(18,18,18,.9); backdrop-filter:blur(12px); padding-block:14px; border-bottom:1px solid var(--d-line-soft); }
.brand{ display:flex; align-items:center; gap:11px; color:#fff; }
.brand-logo{ height:34px; width:auto; display:block; }
.footer .brand-logo{ height:40px; }
.navmenu{ display:flex; gap:30px; }
.navmenu a{ font-size:13.5px; font-weight:500; color:rgba(255,255,255,.8); transition:color .25s; }
.navmenu a:hover, .navmenu a.active{ color:var(--yellow); }
.nav .cta{ display:flex; align-items:center; gap:16px; }
@media (max-width:980px){ .navmenu{ display:none; } }

/* ====================================================== HERO */
.hero{ position:relative; min-height:clamp(620px,90vh,880px); display:flex; align-items:center; color:#fff; overflow:hidden; }
.hero .bg{ position:absolute; inset:0; z-index:0; }
.hero .bg picture{ display:block; width:100%; height:100%; }
.hero .bg img{ width:100%; height:100%; object-fit:cover; }
.hero .scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(18,18,18,.88) 0%, rgba(18,18,18,.5) 48%, rgba(18,18,18,.2) 100%); }
.hero-inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:130px var(--pad) 60px; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,470px); align-items:center; gap:clamp(28px,4vw,64px); }
.hero-copy{ min-width:0; }
.hero-form{ width:100%; align-self:center; }
.hero .eyebrow{ color:var(--yellow); margin-bottom:22px; }
.hero h1{ margin-bottom:24px; max-width:18ch; }
.hero h1 .accent{ color:var(--yellow); font-style:italic; }
.hero p.sub{ max-width:50ch; color:rgba(255,255,255,.82); margin-bottom:32px; font-size:15.5px; }
.hero-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.hero-play{ position:absolute; right:var(--pad); bottom:64px; z-index:2; display:flex; align-items:center; gap:14px; }
.hero-play .label{ font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.8); }
@media (max-width:980px){
  .hero{ min-height:auto; }
  .hero-grid{ grid-template-columns:1fr; padding-top:118px; }
  .hero-form{ max-width:560px; }
}
@media (max-width:820px){ .hero-play{ display:none; } }
@media (max-width:560px){
  .hero-inner{ padding:112px var(--pad) 46px; }
  .hero h1{ max-width:100%; font-size:clamp(34px,10vw,44px); }
  .hero p.sub{ font-size:14.5px; }
  .hero-actions{ align-items:stretch; flex-direction:column; }
  .hero-actions .btn{ width:100%; justify-content:center; }
  .hero-form{ max-width:100%; }
}

/* ====================================================== STATS */
.stats{ background:var(--ink); color:#fff; }
.stats .in{ max-width:var(--maxw); margin:0 auto; padding:clamp(34px,4vw,52px) var(--pad); display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ text-align:center; padding:8px 18px; position:relative; }
.stat:not(:last-child)::after{ content:""; position:absolute; right:0; top:14%; bottom:14%; width:1px; background:var(--d-line-soft); }
.stat .n{ font-family:var(--serif); font-weight:600; font-size:clamp(38px,4.4vw,60px); line-height:1; display:inline-flex; align-items:flex-start; }
.stat .n sup{ color:var(--yellow); font-size:.42em; font-family:var(--body); font-weight:600; margin-left:3px; top:.2em; }
.stat .l{ font-size:12.5px; color:var(--d-soft); margin-top:12px; letter-spacing:.04em; }
@media (max-width:720px){ .stats .in{ grid-template-columns:1fr 1fr; gap:26px 0; } .stat:nth-child(2)::after{ display:none; } }

/* ====================================================== ACCREDITATIONS */
.accred{
  background:
    linear-gradient(180deg, #fff 0%, var(--paper-2) 100%);
  border-block:1px solid var(--line-soft);
}
.accred-in{
  padding-block:clamp(38px,5vw,72px);
  display:grid;
  grid-template-columns:minmax(230px,300px) minmax(0,1fr);
  align-items:center;
  gap:clamp(28px,4vw,62px);
}
.accred-copy{
  position:relative;
  padding-left:22px;
  text-align:left;
  border-left:4px solid var(--yellow);
}
.accred-copy .eyebrow{
  max-width:24ch;
  line-height:1.6;
  color:var(--yellow-d);
}
.accred-copy .eyebrow::before{ display:none; }
.accred-copy p{
  margin-top:14px;
  max-width:30ch;
  color:var(--fg-soft);
  font-size:14.5px;
  line-height:1.65;
}
.accred-logos{
  display:grid;
  grid-template-columns:repeat(4,minmax(140px,1fr));
  gap:12px;
}
.accred-logos img{
  width:100%;
  height:92px;
  object-fit:contain;
  background:#fff;
  padding:18px 20px;
  border:1px solid rgba(18,18,18,.1);
  box-shadow:0 18px 38px rgba(18,18,18,.06);
  filter:saturate(.98);
  transition:transform .26s var(--ease), border-color .26s var(--ease), box-shadow .26s var(--ease);
}
.accred-logos img:nth-child(6),
.accred-logos img:nth-child(8){ padding-inline:14px; }
.accred-logos img:hover{
  transform:translateY(-3px);
  border-color:rgba(230,168,0,.48);
  box-shadow:0 22px 46px rgba(18,18,18,.1);
}
@media (max-width:980px){
  .accred-in{ grid-template-columns:1fr; align-items:start; }
  .accred-copy{ max-width:620px; }
  .accred-copy p{ max-width:46ch; }
}
@media (max-width:680px){
  .accred-in{ padding-block:34px; }
  .accred-logos{ grid-template-columns:1fr; gap:10px; }
  .accred-logos img{ height:86px; padding:15px 16px; }
}
@media (max-width:420px){
  .accred-logos img{ height:84px; padding:14px 18px; }
}

/* ====================================================== WHO WE ARE */
.shead{ display:grid; grid-template-columns:1fr auto; gap:30px; align-items:end; margin-bottom:clamp(34px,4vw,54px); }
.shead.center{ grid-template-columns:1fr; text-align:center; justify-items:center; }
.shead .h2{ margin-top:16px; }
@media (max-width:720px){ .shead{ grid-template-columns:1fr; gap:18px; align-items:start; } }

.who-grid{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:18px; }
.quote-card{ background:var(--ink); color:#fff; padding:clamp(26px,2.4vw,38px); display:flex; flex-direction:column; justify-content:space-between; }
.quote-card .qm{ font-family:var(--serif); font-size:64px; line-height:.5; color:var(--yellow); height:30px; }
.quote-card .q{ font-family:var(--serif); font-style:italic; font-size:clamp(19px,1.5vw,23px); line-height:1.4; margin-top:18px; }
.quote-card .by{ margin-top:26px; font-size:13px; }
.quote-card .by b{ display:block; font-weight:600; } .quote-card .by span{ color:var(--d-soft); font-size:12px; }
.who-pic{ aspect-ratio:3/4; border:1px solid var(--line); position:relative; overflow:hidden; }
.who-pic img{ transition:transform .7s var(--ease); }
.who-pic:hover img{ transform:scale(1.05); }
.who-cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px 18px; color:#fff; font-size:13px; font-weight:600; letter-spacing:.03em;
  background:linear-gradient(transparent, rgba(18,18,18,.85)); transform:translateY(10px); opacity:0; transition:transform .4s var(--ease), opacity .4s var(--ease); }
.who-pic:hover .who-cap{ transform:translateY(0); opacity:1; }
@media (max-width:900px){ .who-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .who-grid{ grid-template-columns:1fr; } .who-pic{ aspect-ratio:16/10; } }

/* ====================================================== ABOUT SERVICE */
.about{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center; }
.about-media{ position:relative; padding-bottom:42px; padding-right:40px; }
.about-media .m1{ aspect-ratio:4/5; border:1px solid var(--line); }
.about-media .m2{ position:absolute; right:0; bottom:0; width:55%; aspect-ratio:4/5; border:6px solid var(--paper); background:#ddd; }
.about-media .m2 img{ width:100%; height:100%; object-fit:cover; }
.about-media .badge{ position:absolute; left:0; bottom:0; background:var(--yellow); color:#121212; padding:16px 22px; text-align:center; z-index:3; }
.about-media .badge b{ font-family:var(--serif); font-weight:600; font-size:30px; line-height:1; display:inline-flex; align-items:flex-start; }
.about-media .badge b sup{ font-size:.4em; font-family:var(--body); margin-left:2px; }
.about-media .badge span{ display:block; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-top:6px; }
.about .h2{ margin:16px 0 18px; }
.about .feat{ display:flex; gap:16px; margin:22px 0; align-items:flex-start; }
.about .feat .ic{ width:46px; height:46px; flex:none; background:var(--paper-2); display:grid; place-items:center; color:var(--yellow-d); border:1px solid var(--line-soft); }
.about .feat .ic svg{ width:22px; height:22px; }
.about .feat h3{ font-family:var(--body); font-size:15px; font-weight:600; margin-bottom:4px; }
.about .feat p{ font-size:13.5px; color:var(--muted); }
@media (max-width:860px){ .about{ grid-template-columns:1fr; gap:40px; } .about-media{ max-width:460px; } }

/* ====================================================== SERVICES PROVIDED */
.svc3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.svc{ background:var(--paper-2); padding:clamp(30px,2.8vw,44px) clamp(24px,2vw,36px); transition:background .3s; }
.svc:hover{ background:var(--paper-2); }
.svc.hl{ background:var(--ink); color:#fff; }
.svc.hl:hover{ background:var(--ink-1); }
.svc .ic{ width:64px; height:64px; background:var(--yellow); color:#121212; display:grid; place-items:center; margin-bottom:24px; }
.svc.hl .ic{ background:var(--yellow); }
.svc .ic svg{ width:30px; height:30px; }
.svc h3{ margin-bottom:12px; }
.svc p{ font-size:14px; color:var(--fg-soft); margin-bottom:24px; }
.svc.hl p{ color:var(--d-soft); }
.svc .more{ display:inline-flex; align-items:center; gap:9px; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; transition:gap .3s var(--ease); }
.svc .more svg{ width:13px; height:13px; color:var(--yellow-d); }
.svc.hl .more svg{ color:var(--yellow); }
.svc:hover .more{ gap:14px; }
.svc-foot{ text-align:center; margin-top:34px; }
@media (max-width:860px){ .svc3{ grid-template-columns:1fr; } }

/* ====================================================== WHY CHOOSE (dark) */
.why-head{ max-width:680px; margin-bottom:clamp(34px,4vw,56px); }
.why .h2{ color:#fff; margin:16px 0 22px; }
.why-intro{ color:var(--d-soft); font-size:15.5px; line-height:1.7; max-width:52ch; }
.why-body{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,2.6vw,44px); align-items:stretch; }
.why-media{ position:relative; min-height:clamp(380px,40vw,520px); border:1px solid var(--d-line); }
.why-media .play{ position:absolute; inset:0; margin:auto; }
.why-badge{ position:absolute; left:0; bottom:0; z-index:3; background:var(--yellow); color:#121212; padding:18px 26px; }
.why-badge b{ font-family:var(--serif); font-weight:600; font-size:34px; line-height:1; display:block; }
.why-badge span{ display:block; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-top:6px; }
.why-cols{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:8px; }
.why-feat{ display:flex; gap:14px; align-items:flex-start; }
.why-feat .ic{ width:40px; height:40px; flex:none; border:1px solid var(--d-line); display:grid; place-items:center; color:var(--yellow); }
.why-feat .ic svg{ width:20px; height:20px; }
.why-feat h3{ font-family:var(--body); font-size:14.5px; font-weight:600; margin-bottom:4px; color:#fff; }
.why-feat p{ font-size:13px; color:var(--d-soft); }
.why-check{ background:var(--ink-1); border:1px solid var(--d-line-soft); padding:clamp(26px,2.4vw,38px); display:flex; flex-direction:column; }
.why-cta{ margin-top:auto; align-self:flex-start; }
.why-check .q{ font-family:var(--serif); font-style:italic; font-size:19px; line-height:1.4; color:#fff; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--d-line-soft); }
.why-check ul{ list-style:none; display:flex; flex-direction:column; gap:13px; }
.why-check li{ display:flex; align-items:center; gap:11px; font-size:14px; color:var(--d-soft); font-weight:400; }
.why-check li svg{ width:18px; height:18px; color:var(--yellow); flex:none; }
.why-check ul{ margin-bottom:30px; }
@media (max-width:860px){ .why-body{ grid-template-columns:1fr; gap:18px; } .why-media{ min-height:clamp(300px,60vw,420px); } .why-cta{ margin-top:8px; } }

/* ====================================================== RECENT WORKS */
.works{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:clamp(168px,16.5vw,256px); gap:14px; }
.work{ position:relative; overflow:hidden; border:1px solid var(--line); }
.work img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.work:hover img{ transform:scale(1.05); }
.work.big{ grid-column:span 2; grid-row:span 2; }
.work .ov{ position:absolute; inset:0; background:linear-gradient(transparent 40%, rgba(18,18,18,.78)); opacity:0; transition:opacity .4s; display:flex; align-items:flex-end; padding:24px; }
.work:hover .ov, .work.big .ov{ opacity:1; }
.work .ov .t{ color:#fff; }
.work .ov .t .k{ font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--yellow); }
.work .ov .t h3{ font-size:clamp(20px,1.7vw,26px); margin-top:6px; }
.work.big .play{ position:absolute; top:24px; right:24px; }
.works-foot{ text-align:center; margin-top:34px; }
@media (max-width:780px){ .works{ grid-template-columns:1fr 1fr; grid-auto-rows:clamp(150px,34vw,210px); } }
@media (max-width:480px){ .works{ grid-template-columns:1fr; grid-auto-rows:clamp(200px,56vw,260px); } .work.big{ grid-column:span 1; grid-row:span 1; } }

/* ====================================================== FEEDBACK */
/* testimonials — uniform cards, 4×2 grid */
.fb-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.4vw,20px); }
@media (max-width:980px){ .fb-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .fb-grid{ grid-template-columns:1fr; } }
.tcard{ background:var(--paper-2); border:1px solid var(--line); border-top:2px solid var(--ink);
  padding:clamp(24px,2.2vw,32px); display:flex; flex-direction:column; }
.tcard .tc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; }
.tcard .stars{ display:flex; gap:3px; }
.tcard .stars svg{ width:16px; height:16px; fill:var(--yellow-d); }
.tcard .tc-qm{ font-family:var(--serif); font-size:58px; line-height:.5; color:rgba(18,18,18,.16); }
.tcard .tc-q{ font-family:var(--serif); font-style:italic; font-size:clamp(16px,1.2vw,19px); line-height:1.45; color:var(--fg); flex:1; }
.tcard .tc-by{ margin-top:24px; padding-top:18px; border-top:1px solid var(--line-soft); }
.tcard .tc-by b{ display:block; font-family:var(--body); font-size:15px; font-weight:700; color:var(--fg); }
.tcard .tc-role{ display:block; margin-top:5px; font-size:10.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--yellow-d); }
.fb{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,4vw,56px); align-items:center; }
.fb-media{ position:relative; aspect-ratio:4/3; border:1px solid var(--line); }
.fb-media .play{ position:absolute; inset:0; margin:auto; }
.fb-cards{ display:grid; gap:18px; }
.fb-card{ background:var(--paper-2); border:1px solid var(--line); padding:clamp(24px,2.2vw,32px); }
.dark .fb-card{ background:var(--ink-1); border-color:var(--d-line-soft); }
.fb-card .stars{ display:flex; gap:2px; margin-bottom:16px; }
.fb-card .stars svg{ width:15px; height:15px; fill:var(--yellow-d); }
.dark .fb-card .stars svg{ fill:var(--yellow); }
.fb-card .q{ font-family:var(--serif); font-style:italic; font-size:18px; line-height:1.45; }
.fb-card .who{ display:flex; align-items:center; gap:12px; margin-top:20px; }
.fb-card .who img{ width:44px; height:44px; object-fit:cover; background:#ddd; }
.fb-card .who b{ font-family:var(--body); font-size:14px; font-weight:600; display:block; }
.fb-card .who span{ font-size:12px; color:var(--muted); }
@media (max-width:820px){ .fb{ grid-template-columns:1fr; gap:30px; } }

/* ====================================================== CTA BAND */
.ctaband{ position:relative; min-height:clamp(340px,38vw,440px); display:flex; align-items:center; color:#fff; overflow:hidden; text-align:center; }
.ctaband .bg{ position:absolute; inset:0; } .ctaband .bg img{ width:100%; height:100%; object-fit:cover; }
.ctaband .scrim{ position:absolute; inset:0; background:rgba(18,18,18,.74); }
.ctaband .in{ position:relative; z-index:2; max-width:760px; margin:0 auto; padding-inline:var(--pad); }
.ctaband .h2{ color:#fff; }
.ctaband p{ color:rgba(255,255,255,.8); margin:18px auto 30px; max-width:52ch; font-size:15px; }

/* ====================================================== BLOG */
.blog3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.post{ background:var(--paper-2); border:1px solid var(--line); display:flex; flex-direction:column; transition:background .3s; }
.alt .post{ background:var(--paper-2); }
.post:hover{ background:var(--paper-2); }
.post .pic{ aspect-ratio:16/11; }
.post .pic img{ transition:transform .7s var(--ease); }
.post:hover .pic img{ transform:scale(1.05); }
.post .body{ padding:24px clamp(20px,1.8vw,28px) 26px; }
.post .tags{ display:flex; gap:8px; margin-bottom:16px; }
.post .tags span{ font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:5px 11px; }
.post .tags .t1{ background:var(--ink); color:#fff; }
.post .tags .t2{ background:var(--yellow); color:#121212; }
.post h3{ font-size:clamp(20px,1.6vw,24px); margin-bottom:14px; }
.post p{ font-size:13.5px; color:var(--muted); margin-bottom:18px; }
@media (max-width:860px){ .blog3{ grid-template-columns:1fr; max-width:480px; margin:0 auto; } }

/* ====================================================== FOOTER */
.footer{ background:var(--ink); color:var(--d-soft); }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px; padding-block:clamp(54px,6vw,84px); }
.footer .brand{ margin-bottom:20px; }
.foot-about p{ font-size:14px; line-height:1.8; max-width:30ch; margin-bottom:22px; }
.foot-about .social{ display:flex; gap:12px; }
.foot-about .social a{ width:38px; height:38px; border:1px solid var(--d-line); display:grid; place-items:center; color:var(--d-soft); transition:all .25s; }
.foot-about .social a:hover{ background:var(--yellow); border-color:var(--yellow); color:#121212; }
.foot-about .social svg{ width:15px; height:15px; }
.foot-col h4{ font-family:var(--body); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin-bottom:22px; }
.foot-col ul{ list-style:none; display:flex; flex-direction:column; gap:13px; }
.foot-col a{ font-size:14px; display:inline-flex; align-items:center; gap:9px; transition:color .25s, gap .25s; }
.foot-col a::before{ content:""; width:5px; height:5px; background:var(--yellow); flex:none; }
.foot-col a:hover{ color:#fff; gap:13px; }
.foot-contact .row{ display:flex; gap:12px; align-items:flex-start; font-size:14px; margin-bottom:16px; line-height:1.6; }
.foot-contact .row svg{ width:17px; height:17px; color:var(--yellow); flex:none; margin-top:2px; }
.foot-bottom{ border-top:1px solid var(--d-line-soft); padding-block:22px; text-align:center; font-size:12.5px; color:var(--d-faint); letter-spacing:.04em; }
@media (max-width:860px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:34px; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }

/* ====================================================== PROCESO (timeline) */
.proc{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); margin-top:8px; }
.pstep{ background:var(--paper-2); padding:clamp(28px,2.6vw,40px) clamp(22px,2vw,32px); position:relative; transition:background .3s; }
.pstep:hover{ background:var(--ink); }
.pstep .pn{ font-family:var(--serif); font-weight:600; font-size:clamp(40px,4vw,60px); line-height:1; color:var(--faint); transition:color .3s; }
.pstep:hover .pn{ color:var(--yellow); }
.pstep .pico{ position:absolute; top:clamp(28px,2.6vw,40px); right:clamp(22px,2vw,32px); width:30px; height:30px; color:var(--muted); opacity:.5; transition:color .3s, opacity .3s; }
.pstep .pico svg{ width:100%; height:100%; display:block; }
.pstep:hover .pico{ color:var(--yellow); opacity:1; }
.pstep .bar{ height:2px; background:var(--line); margin:20px 0 22px; position:relative; }
.pstep .bar::before{ content:""; position:absolute; left:0; top:-2px; width:24px; height:6px; background:var(--yellow); }
.pstep:hover .bar{ background:var(--d-line-soft); }
.pstep h3{ font-size:clamp(20px,1.7vw,25px); margin-bottom:11px; transition:color .3s; }
.pstep:hover h3{ color:#fff; }
.pstep p{ font-size:13.5px; color:var(--muted); transition:color .3s; }
.pstep:hover p{ color:var(--d-soft); }
@media (max-width:860px){ .proc{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .proc{ grid-template-columns:1fr; } }

/* ====================================================== ANTES / DESPUÉS (slider) */
.ba{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,4vw,64px); align-items:center; }
.ba .h2{ margin:16px 0 18px; }
.ba-list{ list-style:none; margin-top:24px; display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
.ba-list li{ display:flex; align-items:center; gap:13px; padding:14px 0; border-bottom:1px solid var(--line); font-size:14.5px; font-weight:400; }
.ba-list li .n{ font-family:var(--serif); font-weight:600; color:var(--yellow-d); font-size:18px; }
.ba-stage{ position:relative; aspect-ratio:4/3; border:1px solid var(--line); overflow:hidden; user-select:none; touch-action:none; cursor:ew-resize; }
.ba-stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ba-after{ clip-path:inset(0 0 0 50%); will-change:clip-path; }
.ba-tag{ position:absolute; top:16px; z-index:4; font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; padding:7px 13px; pointer-events:none; }
.ba-tag.before{ left:16px; background:rgba(18,18,18,.78); color:#fff; }
.ba-tag.after{ right:16px; background:var(--yellow); color:#121212; }
.ba-handle{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--yellow); z-index:5; transform:translateX(-1px); }
.ba-knob{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:48px; height:48px; background:var(--yellow); color:#121212; display:grid; place-items:center; }
.ba-knob svg{ width:22px; height:22px; }
@media (max-width:860px){ .ba{ grid-template-columns:1fr; gap:32px; } }

/* ====================================================== MATERIALES */
.mat-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.mat{ background:var(--paper); position:relative; aspect-ratio:3/4; overflow:hidden; }
.mat .sw{ position:absolute; inset:0; }
.mat .sw img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.mat:hover .sw img{ transform:scale(1.06); }
.mat .lbl{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px 16px 18px; color:#fff;
  background:linear-gradient(transparent, rgba(18,18,18,.5) 35%, rgba(18,18,18,.88)); }
.mat .lbl .n{ font-family:var(--serif); font-weight:600; font-size:19px; line-height:1.15; }
.mat .lbl .s{ font-size:11.5px; color:rgba(255,255,255,.82); margin-top:5px; }
.mat .idx{ position:absolute; top:12px; left:13px; z-index:2; font-family:var(--serif); font-weight:600; font-size:14px; color:#fff; mix-blend-mode:difference; }
@media (max-width:900px){ .mat-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .mat-grid{ grid-template-columns:1fr 1fr; } }

/* ====================================================== FAQ */
.faq{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px,4vw,70px); align-items:start; }
.faq-list{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:clamp(20px,2vw,28px) 4px; text-align:left;
  font-family:var(--serif); font-weight:600; font-size:clamp(19px,1.7vw,24px); color:var(--fg); transition:color .3s; }
.faq-q:hover{ color:var(--yellow-d); }
.faq-ic{ width:32px; height:32px; flex:none; border:1px solid var(--line); display:grid; place-items:center; position:relative; transition:all .3s var(--ease); }
.faq-ic::before, .faq-ic::after{ content:""; position:absolute; background:var(--fg); transition:transform .3s var(--ease), background .3s; }
.faq-ic::before{ width:13px; height:1.5px; } .faq-ic::after{ width:1.5px; height:13px; }
.faq-item.open .faq-ic{ background:var(--yellow); border-color:var(--yellow); }
.faq-item.open .faq-ic::before, .faq-item.open .faq-ic::after{ background:#121212; }
.faq-item.open .faq-ic::after{ transform:scaleY(0); }
.faq-a{ overflow:hidden; max-height:0; transition:max-height .4s var(--ease); }
.faq-a p{ padding:0 4px clamp(20px,2vw,26px); color:var(--fg-soft); font-size:14.5px; max-width:60ch; }
@media (max-width:820px){ .faq{ grid-template-columns:1fr; gap:24px; } }

/* to-top */
.totop{ position:fixed; right:18px; bottom:18px; z-index:80; width:46px; height:46px; background:var(--yellow); color:#121212;
  display:grid; place-items:center; opacity:0; transform:translateY(12px); transition:opacity .3s, transform .3s; pointer-events:none; }
.totop.show{ opacity:1; transform:none; pointer-events:auto; }
.totop:hover{ background:var(--yellow-d); }

/* Requested copy scale: paragraphs and list text at 18px, headings unchanged. */
.lead,
.hero p.sub,
.stat .l,
.quote-card .by,
.about .feat p,
.svc p,
.why-intro,
.why-feat p,
.why-check li,
.ba-list li,
.mat .lbl .s,
.tcard .tc-q,
.fb-card .q,
.fb-card .who span,
.faq-a p,
.ctaband p,
.post p,
.foot-about p,
.foot-col a,
.foot-contact .row,
.footer p,
.footer li,
.footer a,
li,
p {
  font-size: 18px;
}