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

: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 .mark{ width:30px; height:22px; flex:none; }
.brand b{ font-family:var(--serif); font-weight:700; font-size:23px; letter-spacing:.01em; line-height:1; }
.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 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 .eyebrow{ color:var(--yellow); margin-bottom:22px; }
.hero h1{ margin-bottom:24px; max-width:16ch; }
.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:820px){ .hero-play{ display:none; } }

/* ====================================================== 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; } }

/* ====================================================== 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); }
.who-pic img{ transition:transform .7s var(--ease); }
.who-pic:hover img{ transform:scale(1.05); }
@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 h4{ 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{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,4vw,64px); align-items:center; }
.why .h2{ color:#fff; margin:16px 0 26px; }
.why-media{ position:relative; aspect-ratio:4/3; border:1px solid var(--d-line); }
.why-media .play{ position:absolute; inset:0; margin:auto; }
.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(24px,2.2vw,32px); }
.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; }
@media (max-width:860px){ .why{ grid-template-columns:1fr; gap:36px; } }
@media (max-width:520px){ .why-cols{ grid-template-columns:1fr; } }

/* ====================================================== RECENT WORKS */
.works{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:14px; }
.work{ position:relative; overflow:hidden; border:1px solid var(--line); aspect-ratio:1/1; }
.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; aspect-ratio:auto; }
.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; } .work.big{ grid-column:span 2; grid-row:auto; aspect-ratio:16/10; } }

/* ====================================================== FEEDBACK */
.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:18px 16px; color:#fff;
  background:linear-gradient(transparent, rgba(18,18,18,.82)); transform:translateY(calc(100% - 56px)); transition:transform .4s var(--ease); }
.mat:hover .lbl{ transform:translateY(0); }
.mat .lbl .n{ font-family:var(--serif); font-weight:600; font-size:19px; line-height:1.1; }
.mat .lbl .s{ font-size:11.5px; color:var(--d-soft); margin-top:6px; }
.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; } }

/* ====================================================== SERVICE HERO */
.service-hero{
  position:relative;
  min-height:clamp(540px,76svh,720px);
  display:grid;
  align-items:end;
  overflow:hidden;
  color:#fff;
  background:#121212;
}
.service-hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.service-hero__bg img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.service-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(18,18,18,.9) 0%, rgba(18,18,18,.64) 48%, rgba(18,18,18,.25) 100%),
    linear-gradient(180deg, rgba(18,18,18,.28) 0%, rgba(18,18,18,.18) 45%, rgba(18,18,18,.72) 100%);
}
.service-hero__in{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(126px,12vw,166px) var(--pad) clamp(62px,8vw,96px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,470px);
  align-items:end;
  gap:clamp(28px,4vw,64px);
}
.service-hero__copy{ max-width:760px; min-width:0; }
.service-hero__form{ width:100%; align-self:end; }
.service-crumb{
  display:inline-flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  width:auto;
  max-width:100%;
  margin:0 0 clamp(22px,3vw,36px);
  font-size:11px;
  font-weight:700;
  line-height:1.1;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.58);
}
.service-crumb > *{ flex:0 0 auto; }
.service-crumb a{ color:inherit; transition:color .25s var(--ease); }
.service-crumb a:hover{ color:#fff; }
.service-crumb .sep{ width:12px; height:12px; color:var(--yellow); }
.service-crumb .cur{ color:#fff; }
.service-kicker{
  margin:0 0 14px;
  color:var(--yellow);
  font-size:11px;
  font-weight:700;
  line-height:1;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.service-hero h1{
  max-width:18ch;
  margin:0;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(52px,7.3vw,104px);
  line-height:.92;
  letter-spacing:-.025em;
}
.service-hero h1 .title-line{ white-space:normal; }
.service-hero h1 .accent{ color:var(--yellow); font-style:italic; font-weight:500; }
.service-hero__lead{
  max-width:58ch;
  margin:clamp(20px,2.4vw,28px) 0 0;
  color:rgba(255,255,255,.78);
  font-size:clamp(15px,1.1vw,17px);
  line-height:1.72;
}
.service-hero__actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  margin-top:clamp(24px,3vw,34px);
}
@media (max-width:980px){
  .service-hero{ min-height:clamp(520px,72svh,660px); }
  .service-hero__copy{ max-width:680px; }
  .service-hero__in{ grid-template-columns:1fr; align-items:start; }
  .service-hero__form{ max-width:560px; }
}
@media (max-width:620px){
  .service-hero{ min-height:0; align-items:end; }
  .service-hero__in{ padding-top:118px; }
  .service-crumb{ gap:7px; font-size:9.5px; letter-spacing:.1em; }
  .service-hero h1{ font-size:clamp(44px,13vw,64px); }
}

/* ====================================================== SERVICE DETAIL ROWS */
.srow{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,80px); align-items:center; }
.srow + .srow{ margin-top:clamp(56px,7vw,110px); }
.srow.flip .srow-media{ order:2; }
.srow-media{ position:relative; }
.srow-media .imgwrap{ aspect-ratio:4/3; border:1px solid var(--line); }
.srow-media .imgwrap img{ transition:transform .8s var(--ease); }
.srow-media:hover .imgwrap img{ transform:scale(1.04); }
.srow-media .tab{ position:absolute; left:0; bottom:0; background:var(--yellow); color:#121212; font-family:var(--serif); font-weight:600; font-size:clamp(40px,4vw,58px); line-height:1; padding:14px 22px; }
.srow-body .eyebrow{ margin-bottom:14px; }
.srow-body h2{ font-size:clamp(28px,3vw,44px); margin-bottom:16px; }
.srow-body p{ color:var(--fg-soft); font-size:14.5px; line-height:1.7; max-width:48ch; margin-bottom:22px; }
.srow-feats{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:13px 24px; margin-bottom:28px; }
.srow-feats li{ display:flex; align-items:center; gap:11px; font-size:14px; font-weight:400; }
.srow-feats svg{ width:18px; height:18px; color:var(--yellow-d); flex:none; }
@media (max-width:860px){ .srow{ grid-template-columns:1fr; gap:30px; } .srow.flip .srow-media{ order:0; } .srow-feats{ grid-template-columns:1fr; } }

/* 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); }

/* ====================================================== BRAND LOGO (real asset) */
.brand-logo{ height:34px; width:auto; display:block; }
.footer .brand-logo{ height:42px; }

/* ====================================================== TESTIMONIALS (homepage tcard design) */
.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); }

/* ====================================================== ADD-ONS */
.addons{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.addon{ background:var(--paper-2); padding:clamp(26px,2.4vw,38px) clamp(22px,2vw,30px); display:flex; flex-direction:column; transition:background .3s; }
.addon:hover{ background:#ECE6DA; }
.addon .ic{ width:48px; height:48px; border:1px solid var(--line); display:grid; place-items:center; color:var(--yellow-d); margin-bottom:20px; transition:all .3s var(--ease); }
.addon:hover .ic{ background:var(--yellow); border-color:var(--yellow); color:#121212; }
.addon .ic svg{ width:23px; height:23px; }
.addon h3{ font-size:21px; margin-bottom:9px; }
.addon p{ font-size:13.5px; color:var(--fg-soft); margin-bottom:18px; flex:1; }
.addon .from{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.addon .from b{ font-family:var(--serif); font-weight:600; font-size:20px; letter-spacing:0; text-transform:none; color:var(--fg); }
@media (max-width:860px){ .addons{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .addons{ grid-template-columns:1fr; } }

/* ====================================================== ZONAS */
/* dark editorial service-area index */
.zonas2{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(40px,5vw,88px); align-items:center; }
.zonas2__intro h2{ color:#fff; margin:16px 0 18px; }
.zonas2__intro p{ color:var(--d-soft); max-width:44ch; line-height:1.7; font-size:15px; }
.zonas2__stats{ display:flex; gap:clamp(30px,4vw,60px); margin:30px 0 34px; }
.zonas2__stats b{ font-family:var(--serif); font-weight:600; font-size:clamp(34px,3.6vw,48px); color:#fff; display:block; line-height:1; }
.zonas2__stats .accent{ color:var(--yellow); }
.zonas2__stats span{ font-size:12px; color:var(--d-soft); margin-top:9px; display:block; letter-spacing:.03em; }
.zonas2__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(20px,3vw,52px); border-top:1px solid var(--d-line-soft); }
.zona-row{ display:flex; align-items:center; gap:14px; padding:17px 4px; border-bottom:1px solid var(--d-line-soft);
  color:#fff; text-decoration:none; transition:color .25s var(--ease), padding-left .25s var(--ease); }
.zona-row .n{ font-family:var(--serif); font-weight:600; color:var(--yellow); font-size:14px; width:22px; flex:none; }
.zona-row .name{ flex:1; font-family:var(--body); font-size:15px; font-weight:500; }
.zona-row .ar{ width:15px; height:15px; flex:none; color:var(--yellow); opacity:0; transform:translateX(-7px); transition:opacity .25s var(--ease), transform .25s var(--ease); }
a.zona-row:hover{ color:var(--yellow); padding-left:9px; }
a.zona-row:hover .ar{ opacity:1; transform:none; }
@media (max-width:860px){ .zonas2{ grid-template-columns:1fr; gap:34px; } }
@media (max-width:520px){ .zonas2__list{ grid-template-columns:1fr; } }

/* ====================================================== 18px body copy (all text except eyebrows/labels) */
.service-hero__lead,
.section p, .lead,
.srow-body p, .srow-feats li,
.addon p,
.pstep p,
.why .why-feat p, .why-check li,
.pcardx .desc, .pcardx li,
.zonas2__intro p, .zona-row .name,
.faq-a p,
.tcard .tc-q, .fb-card .q {
  font-size: 18px !important;
  line-height: 1.65;
}

/* ====================================================== HERO TRUST STRIP */
.service-trust{ margin:clamp(16px,2vw,22px) 0 0; color:rgba(255,255,255,.82); font-size:14px; letter-spacing:.01em; }
.service-trust b{ color:var(--yellow); font-weight:600; }

/* ====================================================== RELATED SERVICES */
.related{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,28px); }
.rel-card{ display:block; border:1px solid var(--line); background:var(--paper-2); transition:border-color .3s var(--ease), transform .3s var(--ease); }
.rel-card:hover{ border-color:var(--fg); transform:translateY(-4px); }
.rel-card .imgwrap{ aspect-ratio:16/11; }
.rel-card .imgwrap img{ transition:transform .8s var(--ease); }
.rel-card:hover .imgwrap img{ transform:scale(1.05); }
.rel-body{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 22px; }
.rel-body h3{ font-family:var(--serif); font-weight:600; font-size:22px; }
.rel-go{ display:inline-flex; align-items:center; gap:8px; font-family:var(--body); font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--yellow-d); white-space:nowrap; }
.rel-go svg{ width:14px; height:14px; }
@media (max-width:860px){ .related{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .related{ grid-template-columns:1fr; } }

/* ====================================================== CONTACT SECTION */
.contact2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,72px); align-items:start; }
.contact2__copy h2{ color:#fff; }
.contact2__copy p{ color:var(--d-soft); max-width:46ch; margin-top:14px; }
.contact2__actions{ display:flex; gap:14px; flex-wrap:wrap; margin:28px 0 18px; }
.contact2__trust{ color:var(--d-soft); font-size:14px; }
.contact2__form{ background:var(--paper-2); color:var(--ink); padding:clamp(24px,2.4vw,36px); }
@media (max-width:860px){ .contact2{ grid-template-columns:1fr; } }

/* ====================================================== FORM */
.cform{ display:grid; gap:15px; }
.cform-row{ display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.cform-field{ display:flex; flex-direction:column; gap:6px; }
.cform-field span{ font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.cform-field span em{ font-style:normal; text-transform:none; letter-spacing:0; color:var(--faint); }
.cform input, .cform textarea{ font-family:var(--body); font-size:15px; color:var(--ink); background:var(--paper); border:1px solid var(--line); padding:13px 14px; border-radius:0; outline:none; transition:border-color .2s; width:100%; }
.cform input:focus, .cform textarea:focus{ border-color:var(--yellow-d); }
.cform textarea{ resize:vertical; }
.cform-submit{ justify-content:center; width:100%; margin-top:4px; }
.cform-legal{ font-size:12.5px; color:var(--muted); margin:0; }
.cform-ok{ background:rgba(230,168,0,.12); border:1px solid var(--yellow-d); color:var(--ink); padding:16px 18px; font-size:14.5px; }
@media (max-width:480px){ .cform-row{ grid-template-columns:1fr; } }

/* ====================================================== WHATSAPP FLOAT + STICKY CALL BAR */
.wafloat{ position:fixed; right:18px; bottom:74px; z-index:80; width:52px; height:52px; border-radius:50%; background:#25D366; color:#fff;
  display:grid; place-items:center; box-shadow:0 8px 24px rgba(0,0,0,.22); transition:transform .25s var(--ease); }
.wafloat svg{ width:26px; height:26px; }
.wafloat:hover{ transform:scale(1.08); }

.callbar{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:none; grid-template-columns:1fr 1fr 1fr;
  background:var(--ink); border-top:1px solid var(--d-line-soft); }
.callbar a{ display:flex; align-items:center; justify-content:center; gap:8px; padding:15px 6px; font-family:var(--body);
  font-size:13px; font-weight:600; letter-spacing:.02em; color:#fff; }
.callbar a svg{ width:18px; height:18px; }
.callbar__call{ background:var(--yellow); color:#121212 !important; }
.callbar__wa{ background:#25D366; }
.callbar__quote{ background:var(--ink); }
@media (max-width:620px){
  .callbar{ display:grid; }
  .wafloat{ display:none; }
  .totop{ bottom:70px; }
  body{ padding-bottom:54px; }
}