/* Rediseño pictórico completo — inspirado en las pinturas compartidas. */
:root {
  --pw-ink: #18283f;
  --pw-blue: #17365e;
  --pw-deep: #101e35;
  --pw-umber: #514238;
  --pw-clay: #9b492e;
  --pw-paper: #f3e5d1;
  --pw-cream: #fff3df;
  --pw-line: #795d493b;
  --pw-texture: url('/assets/painterly-surface.webp?v=20261022-2');
  --pw-night: url('/assets/painting-night.webp?v=20261022-2');
}

html { background: #e8d6bd; scroll-behavior: smooth; }
body:is(.page-home,.page-service,.page-contact,.page-legal,[data-epica-02-popup]) {
  position: relative; isolation: isolate; color: var(--pw-ink);
  background: transparent !important; font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
}
body:is(.page-home,.page-service,.page-contact,.page-legal,[data-epica-02-popup])::before {
  content: ''; position: fixed; z-index: -2; inset: 0; pointer-events: none;
  background-image: linear-gradient(180deg, #f7ead5bc 0%, #efdfc9bb 54%, #dfc7a6a8 100%), var(--pw-texture);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
body :is(h1,h2,h3,h4,h5,h6,p,li,label,summary,button,input,select,textarea,th,td,figcaption,small,legend,blockquote,address,dt,dd,a,span,em,strong) {
  rotate: 0deg !important; transform: none; transform-origin: initial;
}
body :is(.gaudi-atmosphere,.gaudi-sunlight,.gaudi-window) { display:none !important; }
body :is(.header,main,.hero,.manifesto,.services,.process,.faq-section,.contact-band,footer,.page-hero,.page-body,.page-content,.page-cta,.service-row,.steps article,.faq-list,.faq-item) {
  box-shadow: none !important;
}

/* Navegación sobre una veladura pintada; el logotipo superior es azul oscuro. */
.header {
  position: sticky; top: 0; z-index: 50; min-height: 78px; padding: 10px clamp(18px,5vw,76px);
  background-image: linear-gradient(100deg,#f7ead9ee,#eee0ceeb),var(--pw-texture) !important;
  background-size: cover; background-position: center 15%; border: 0 !important;
  box-shadow: 0 7px 26px #3427191a !important; backdrop-filter: blur(10px);
}
.header::before,.header::after { content:none !important; display:none !important; }
.header .logo img { filter: brightness(0) saturate(100%) invert(14%) sepia(24%) saturate(1250%) hue-rotate(176deg) brightness(89%) contrast(102%); }
.site-header { position:relative; z-index:4; background-image:linear-gradient(100deg,#f7ead9ee,#eee0ceeb),var(--pw-texture) !important; background-size:cover; color:var(--pw-ink) !important; border:0 !important; box-shadow:0 7px 26px #3427191a !important; }
.site-header :is(.brand,.brand-name,.main-nav a,.nav-toggle) { color:var(--pw-ink) !important; }
.site-header .brand img { filter:brightness(0) saturate(100%) invert(14%) sepia(24%) saturate(1250%) hue-rotate(176deg) brightness(89%) contrast(102%); }
.page-404,.page-404 :is(h1,p,a) { color:#172a43 !important; }
.header nav a,.pw-language a,.menu-toggle { color:var(--pw-ink) !important; }
.header nav > a:not(.nav-cta)::after { background:#9b492e; height:2px; }
.pw-language a[aria-current="true"] { color:#762f22 !important; font-weight:700; }
.nav-cta,.button-dark,.contact-band .button,.page-cta .button {
  color:#fffaf1 !important; border:0 !important;
  background-image:linear-gradient(125deg,#122747e8,#15284ae8),var(--pw-night) !important;
  background-size:cover; background-position:center; border-radius:30px 30px 8px 30px !important;
  box-shadow:0 7px 20px #1b2a3b33 !important;
}
.nav-cta span,.button-dark span { color:#f2bf71 !important; }
.button-light { color:var(--pw-ink) !important; background-image:linear-gradient(#f7ead9d9,#f7ead9d9),var(--pw-texture) !important; }
.button-dark::before,.nav-cta::before,.button-light::before { display:none !important; content:none !important; }

/* Portada: ordenador pintado y una veladura clara detrás del texto. */
.hero { min-height:min(780px,calc(100svh - 78px)); padding:clamp(50px,8vw,124px) clamp(22px,8vw,120px) 52px; position:relative; isolation:isolate; }
.hero::before { content:''; position:absolute; z-index:-1; inset:0; background-image:linear-gradient(90deg,#f1e2cfdc 0%,#f1e2cfc4 38%,#f1e2cf25 66%,transparent 82%),url('/assets/painting-hero.webp?v=20261022-2'); background-size:cover; background-position:center right; }
.hero-copy { width:min(720px,60%); padding:clamp(18px,3vw,40px); background-image:linear-gradient(135deg,#f4e7d5d9,#f4e7d5a8),var(--pw-texture); background-size:cover; background-position:center; border-radius:52% 13% 42% 10% / 12% 38% 10% 44%; }
.hero h1,.page-hero h1,.manifesto h2,.section-intro h2 { color:#162841 !important; text-shadow:0 1px #fff4e3; }
.hero h1 { max-width:790px; font-size:clamp(2.7rem,6.1vw,6.3rem); line-height:.99; letter-spacing:-.045em; }
.hero h1 em,.page-hero h1 em,.manifesto h2 em { color:#994a2f !important; font-style:normal; }
.hero-lead,.lead { max-width:620px; color:#302c29 !important; font-size:clamp(1.05rem,1.55vw,1.28rem); line-height:1.65; }
.hero-image { display:none !important; }
.hero .kicker,.kicker { color:#553c2d !important; font-weight:700; letter-spacing:.1em; }
.hero .kicker i { background:#a75132 !important; }
.hero-actions { margin-top:30px; gap:18px; }
.hero-bottom { color:#302c29 !important; }

/* Cada servicio tiene su propio bodegón pintado, sin miniaturas geométricas. */
.service-visual,.service-hero-image {
  overflow:hidden; position:relative; background-color:transparent !important;
  background-size:cover !important; background-position:center !important;
  border:0 !important; box-shadow:0 12px 30px #241a122c !important;
  border-radius:48% 16% 44% 12% / 13% 42% 11% 45% !important;
  -webkit-mask-image:radial-gradient(ellipse 77% 74% at 50% 50%,#000 50%,transparent 100%);
  mask-image:radial-gradient(ellipse 77% 74% at 50% 50%,#000 50%,transparent 100%);
}
.service-visual::before,.service-visual::after,.service-hero-image::before,.service-hero-image::after { content:none !important; display:none !important; }
.service-icon { display:none !important; }
.service-visual.photo-0,.service-hero-image.photo-0 { background-image:url('/assets/painting-web-design.webp?v=20261022-2') !important; }
.service-visual.photo-1,.service-hero-image.photo-1 { background-image:url('/assets/painting-ecommerce.webp?v=20261022-2') !important; }
.service-visual.photo-2,.service-hero-image.photo-2 { background-image:url('/assets/painting-api.webp?v=20261022-2') !important; }
.service-visual.photo-3,.service-hero-image.photo-3 { background-image:url('/assets/painting-legacy.webp?v=20261022-2') !important; }
.service-visual.photo-4,.service-hero-image.photo-4 { background-image:url('/assets/painting-seo.webp?v=20261022-2') !important; }
.service-visual.photo-5,.service-hero-image.photo-5 { background-image:url('/assets/painting-sem.webp?v=20261022-2') !important; }
.service-visual.photo-6,.service-hero-image.photo-6 { background-image:url('/assets/painting-geo.webp?v=20261022-2') !important; }
.service-visual.photo-7,.service-hero-image.photo-7 { background-image:url('/assets/painting-social.webp?v=20261022-2') !important; }
.service-visual.photo-8,.service-hero-image.photo-8 { background-image:url('/assets/painting-compliance.webp?v=20261022-2') !important; }
.service-visual.photo-9,.service-hero-image.photo-9 { background-image:url('/assets/painting-automation.webp?v=20261022-2') !important; }
.service-row { display:grid; grid-template-columns:minmax(140px,220px) minmax(180px,1fr) minmax(180px,1.1fr) 40px; align-items:center; gap:clamp(18px,3vw,42px); padding:24px 0 !important; border-top:1px solid #6b4a343b !important; color:var(--pw-ink) !important; }
.service-visual { width:100%; aspect-ratio:1.25; }
.service-title { color:#172b46 !important; font-size:clamp(1.3rem,2.2vw,2rem); line-height:1.12; }
.service-desc { color:#352d27 !important; line-height:1.55; }
.row-arrow { color:#8c3f28 !important; font-size:1.5rem; }
.service-page-hero { min-height:480px; display:grid; grid-template-columns:minmax(300px,1fr) minmax(340px,.9fr); align-items:center; gap:4vw; padding:clamp(48px,7vw,100px) clamp(22px,8vw,120px) !important; position:relative; isolation:isolate; }
.service-hero-copy { padding:clamp(18px,3vw,38px); background-image:linear-gradient(135deg,#f4e7d5e8,#f4e7d5b8),var(--pw-texture); background-size:cover; border-radius:40% 14% 36% 12% / 11% 36% 12% 40%; }
.service-hero-image { display:block !important; width:100%; min-height:360px; aspect-ratio:1.2; }

/* Ritmo editorial, superficie pictórica continua y contraste en todas las áreas. */
.manifesto,.services,.process,.faq-section,.page-body,.page-content,.page-hero,.page-contact .page-content,.page-legal .page-content {
  background-color:transparent !important; background-image:none !important;
}
.manifesto,.section-intro,.process-heading,.faq-heading,.page-hero,.page-content {
  color:var(--pw-ink) !important;
}
.manifesto,.section-intro,.process,.faq-section,.page-body { padding-left:clamp(22px,8vw,120px) !important; padding-right:clamp(22px,8vw,120px) !important; }
.steps article,.faq-item,.page-content section,.contact-form {
  background-image:linear-gradient(140deg,#f5e9d7e8,#ebd9c3d9),var(--pw-texture) !important;
  background-size:cover !important; border:0 !important; box-shadow:0 12px 28px #3e2a1d20 !important;
  border-radius:42% 13% 36% 12% / 10% 32% 12% 36% !important;
}
.steps article,.faq-item { padding:clamp(22px,3vw,38px) !important; }
.steps article :is(h3,p),.faq-item :is(summary,p),.page-content :is(p,li,h2,h3),.page-side { color:#302a25 !important; }
.faq-item summary { cursor:pointer; font-weight:700; }
.page-body { display:grid; grid-template-columns:minmax(150px,.35fr) minmax(0,1fr); gap:clamp(28px,6vw,90px); padding-top:48px !important; padding-bottom:72px !important; }
.page-side { color:#604b3e !important; font-weight:700; line-height:1.6; }
.page-side a { color:#193b68 !important; }
.page-hero { padding-top:clamp(55px,9vw,120px) !important; padding-bottom:36px !important; }
.page-hero h1 { font-size:clamp(2.6rem,6vw,5.6rem); line-height:1; }
.page-cta { margin:4vw clamp(22px,8vw,120px) 7vw !important; padding:clamp(36px,6vw,80px) !important; position:relative; isolation:isolate; overflow:hidden; background:transparent !important; color:#fff !important; border-radius:0 !important; }
.page-cta::before { content:'' !important; display:block !important; position:absolute; z-index:-1; inset:0; background-image:linear-gradient(100deg,#0d1b32df,#0d1b32b0),var(--pw-night); background-size:cover; background-position:center; border-radius:42% 10% 37% 9% / 11% 36% 12% 39%; }
.page-cta :is(h2,p,.kicker) { color:#fffaf1 !important; }
.contact-band { background:transparent !important; color:#fffaf1 !important; position:relative; isolation:isolate; }
.contact-band::before { content:'' !important; display:block !important; z-index:-1; position:absolute; inset:0; background-image:linear-gradient(100deg,#0d1b32e8,#0d1b32b5),var(--pw-night); background-size:cover; }
.contact-band :is(h2,p,a) { color:#fffaf1 !important; }

/* Campos sobre papel texturado, con tinta oscura y foco azul visible. */
.contact-form { padding:clamp(24px,5vw,56px) !important; }
.contact-form .field label,.contact-form .check,.notice { color:#282724 !important; }
.contact-form :is(input:not([type=checkbox]),select,textarea) {
  color:#17283d !important; background-image:linear-gradient(#fff1dcce,#fff1dcce),var(--pw-texture) !important;
  background-size:cover !important; border:1px solid #36577b !important; border-radius:18px 18px 5px 18px !important;
}
.contact-form :is(input,select,textarea):focus { outline:3px solid #1b4e80 !important; outline-offset:2px; }
.contact-form :is(a,u) { color:#173e70 !important; }
.contact-form .notice,.contact-form .success { padding:14px 18px; background-image:linear-gradient(#f8ead5e6,#f8ead5e6),var(--pw-texture); background-size:cover; border-radius:20px 20px 5px 20px; }

/* Pie: pintura azul oscura y logotipo blanco puro. */
footer {
  position:relative; isolation:isolate; padding:clamp(48px,7vw,92px) clamp(22px,8vw,120px) 32px !important;
  color:#fff !important; background:transparent !important; border:0 !important;
}
footer::before { content:''; position:absolute; z-index:-1; inset:0; background-image:linear-gradient(110deg,#0d1c33d9,#102644c9),var(--pw-night); background-size:cover; background-position:center 60%; }
footer .footer-logo img { filter:brightness(0) invert(1) !important; }
footer :is(p,small,a) { color:#fff !important; }
.site-footer { color:#fff !important; background-image:linear-gradient(110deg,#0d1c33e9,#102644dd),var(--pw-night) !important; background-size:cover !important; }
.site-footer :is(p,small,a,.footer-brand,.brand-name) { color:#fff !important; }
.site-footer .footer-brand img { filter:brightness(0) invert(1) !important; }
footer nav { display:flex; flex-wrap:wrap; gap:12px 28px; }
footer a:hover { color:#ffcf83 !important; }

@media (max-width:800px) {
  .header { min-height:66px; padding:9px 18px; }
  .header nav { background-image:linear-gradient(120deg,#f4e5d2ed,#ead9c3ed),var(--pw-texture) !important; background-size:cover; }
  .hero { min-height:0; padding:42px 16px 46px; }
  .hero::before { background-image:linear-gradient(180deg,#f0e1cedb 0%,#f0e1cebb 52%,#f0e1ce70 100%),url('/assets/painting-hero.webp?v=20261022-2'); background-position:60% center; }
  .hero-copy { width:100%; padding:18px; border-radius:30% 12% 28% 8% / 8% 24% 10% 28%; }
  .hero h1 { font-size:clamp(2.45rem,12vw,4.5rem); }
  .service-row { grid-template-columns:112px minmax(0,1fr) 34px; gap:14px; }
  .service-visual { grid-row:span 2; aspect-ratio:1; }
  .service-title { align-self:end; }
  .service-desc { align-self:start; font-size:.92rem; }
  .service-row .row-arrow { grid-column:3; grid-row:1/3; }
  .service-page-hero { grid-template-columns:1fr; gap:24px; padding:42px 18px !important; }
  .service-hero-image { min-height:260px; width:100%; aspect-ratio:1.4; }
  .page-body { grid-template-columns:1fr; gap:24px; padding:24px 18px 48px !important; }
  .page-side { padding:18px 20px; background-image:linear-gradient(#f5e8d5d9,#f5e8d5d9),var(--pw-texture); background-size:cover; border-radius:24px 24px 6px 24px; }
  .manifesto,.section-intro,.process,.faq-section { padding-left:18px !important; padding-right:18px !important; }
  .page-cta { margin:24px 16px 48px !important; }
  footer { padding:42px 20px 26px !important; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* Sin paneles flotantes: texto y contenido comparten el mismo lienzo pintado. */
body:is(.page-home,.page-service,.page-contact,.page-legal,[data-epica-02-popup])
  :is(.hero-copy,.service-hero-copy,.page-hero,.page-body,.page-content,.page-content section,
      .manifesto,.services,.section-intro,.process,.process-heading,.steps,.steps article,
      .faq-section,.faq-heading,.faq-list,.faq-item,.contact-form,.page-cta,.contact-band) {
  background-color:transparent !important; background-image:none !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
}
body:is(.page-home,.page-service,.page-contact,.page-legal,[data-epica-02-popup])
  :is(.hero-copy,.service-hero-copy,.page-hero,.page-body,.page-side,.page-content,.manifesto,
      .services,.process,.steps,.steps article,.faq-section,.faq-heading,.faq-list,
      .faq-item,.contact-form,.page-cta,.contact-band)::before,
body:is(.page-home,.page-service,.page-contact,.page-legal,[data-epica-02-popup])
  :is(.hero-copy,.service-hero-copy,.page-hero,.page-body,.page-side,.page-content,.manifesto,
      .services,.process,.steps,.steps article,.faq-section,.faq-heading,.faq-list,
      .faq-item,.contact-form,.page-cta,.contact-band)::after {
  content:none !important; display:none !important; background:none !important;
}
.hero-copy,.service-hero-copy { padding:0 !important; }
.page-hero,.page-body,.faq-section,.process,.services,.manifesto { overflow:visible !important; }
.steps article,.faq-item { padding:22px 0 !important; border-bottom:1px solid #72563d50 !important; }
.steps article>span { width:auto !important; height:auto !important; padding:0 !important; color:#17365e !important; background:transparent !important; border:0 !important; border-radius:0 !important; }
.faq-item summary::after { color:#17365e !important; background:transparent !important; border:0 !important; border-radius:0 !important; }
.page-side { padding-left:0 !important; background:transparent !important; background-image:none !important; border:0 !important; }
.faq-list { display:block !important; }
.service-visual,.service-hero-image {
  border-radius:0 !important; -webkit-mask-image:none !important; mask-image:none !important;
  box-shadow:none !important; background-color:transparent !important;
}
.service-visual { aspect-ratio:1.25; }
.service-hero-image { background-size:cover !important; }
.page-cta,.contact-band { margin-left:0 !important; margin-right:0 !important; padding:clamp(42px,7vw,90px) clamp(22px,8vw,120px) !important; border-radius:0 !important; }
.page-cta { background-image:linear-gradient(100deg,#0d1b32e5,#0d1b32ce),var(--pw-night) !important; background-size:cover !important; }
.page-cta::before { content:none !important; display:none !important; }
.contact-band { background-image:linear-gradient(100deg,#0d1b32e5,#0d1b32ce),var(--pw-night) !important; background-size:cover !important; }
.contact-band::before { content:none !important; display:none !important; }
.contact-form :is(input:not([type=checkbox]),select,textarea) { border-radius:8px !important; }
@media(max-width:800px) {
  .page-cta,.contact-band { margin-left:0 !important; margin-right:0 !important; }
}

/* Lenguaje visual uniforme: sin cápsulas, pegotes ni fondos aislados. */
.header,.site-header {
  background-image:linear-gradient(100deg,#f7ead9c9,#eee0ceb8),var(--pw-texture) !important;
  box-shadow:none !important; border:0 !important;
}
.nav-cta,.button-dark,.button-light,.contact-band .button,.page-cta .button {
  display:inline-flex; align-items:center; gap:10px; padding:12px 0 !important;
  color:#172b45 !important; background:transparent !important; background-image:none !important;
  border:0 !important; border-bottom:2px solid #17365e !important; border-radius:0 !important;
  box-shadow:none !important; text-decoration:none;
}
.nav-cta:hover,.button-dark:hover,.button-light:hover { color:#8d432b !important; border-color:#8d432b !important; }
.nav-cta span,.button-dark span { color:inherit !important; }
.contact-band .button,.page-cta .button { color:#fff !important; border-color:#fff !important; }
.pw-language a,.pw-language a[aria-current="true"] { border:0 !important; border-radius:0 !important; background:transparent !important; }
.contact-form :is(input:not([type=checkbox]),select,textarea) {
  color:#17283d !important; background:transparent !important; background-image:none !important;
  border:0 !important; border-bottom:1px solid #25476c !important; border-radius:0 !important;
  box-shadow:none !important;
}
.contact-form :is(input,select,textarea):focus { outline:0 !important; border-bottom:2px solid #173e70 !important; }
.contact-form .notice,.contact-form .success { background:transparent !important; background-image:none !important; border-left:2px solid #8b512f; border-radius:0 !important; }
.service-visual,.service-hero-image { border-radius:0 !important; box-shadow:none !important; }
.service-row { border-radius:0 !important; }
.page-cta,.contact-band { border-radius:0 !important; box-shadow:none !important; }
.steps article,.faq-item { border-radius:0 !important; box-shadow:none !important; }

/* Las llamadas comparten el lienzo claro: tinta oscura para el contraste. */
body:is(.page-home,.page-service,.page-contact,.page-legal,[data-epica-02-popup]) :is(.page-cta,.contact-band) {
  color:#172a43 !important; background:transparent !important; background-image:none !important;
}
body:is(.page-home,.page-service,.page-contact,.page-legal,[data-epica-02-popup]) :is(.page-cta,.contact-band) :is(h2,p,.kicker,a,em,strong,span) {
  color:#172a43 !important; text-shadow:none !important;
}
body:is(.page-home,.page-service,.page-contact,.page-legal,[data-epica-02-popup]) :is(.page-cta,.contact-band) :is(h2 em, .button) {
  color:#713d29 !important; border-color:#17365e !important; background:transparent !important; background-image:none !important;
}


footer::before { -webkit-mask:none !important; mask:none !important; filter:none !important; }
