/* Organic / calm-tech look (preview, Oct 2026), design/screenshots inspo of Oct 1 afternoon.
   Loaded by main.js only with ?look=organic (remembered in this browser; ?look=default switches back).
   Pure white page, the site's blue as the single accent (main.css tokens), near-black CTAs,
   Inter only (main.css), and painterly nature art (design/tools/paint_meadow.html) behind the product UI. */
.look-organic{
  --paper:#FFFFFF;
}
.look-organic body{background:#fff}

/* type: Inter only; two-tone headings (second phrase in grey), small numbered section labels */
/* accent = the logo red (#D93A1F, 4.6:1 on white). The tokens keep their old --blue* names so main.css follows. */
html.look-organic{--blue:#D93A1F;--blue-hover:#B92F17;--blue-soft:#FCEBE6;--blue-on-dark:#FFA58C;--logo-blue:#D93A1F}
.look-organic{--ink-soft:var(--ink)}
/* headings: the second part (the old .blue highlight) is plain black like the rest; it only keeps its line break */
.look-organic .h1 .blue,.look-organic .h2 .blue{color:var(--ink-soft)}
.look-organic main{counter-reset:sec}
.look-organic main .head{counter-increment:sec}
.look-organic main .head::before{content:'[ ' counter(sec,decimal-leading-zero) ' ]';display:block;margin-bottom:18px;font-size:12px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--muted-2)}

/* calm spacing: more air between and inside sections, slightly smaller type */
.look-organic{--max:1160px}
.look-organic .section{padding:152px 0}
.look-organic .section--tight{padding:112px 0}
.look-organic .head{margin-bottom:64px}
.look-organic .h2{font-size:clamp(28px,3.1vw,42px);margin-bottom:16px}
.look-organic .lead{font-size:17px;line-height:1.6}
.look-organic .flow-row{gap:104px;padding:64px 0}
.look-organic .flow-media{min-height:400px}
@media (max-width:640px){.look-organic .section{padding:96px 0}.look-organic .section--tight{padding:72px 0}.look-organic .head{margin-bottom:44px}.look-organic .flow-row{gap:36px;padding:40px 0}}

/* every section is white (no alternating grey bands); spacing does the separating */
.look-organic .section--surface{background:#fff}

/* the "Cómo funciona" diagram panel used to sit white on a grey band: it now gets the grainy sunset gradient of
   the other mock frames, with white nodes */
.look-organic .arch{position:relative;isolation:isolate;overflow:hidden;
  background:radial-gradient(90% 80% at 0% 0%,#FCD3B4,transparent 62%),radial-gradient(90% 85% at 100% 100%,#F7B39A,transparent 60%),
  radial-gradient(55% 55% at 50% 50%,#FFFFFF,transparent 72%),#FFF4EA!important}
/* grainy mock frames in the sunset palette: peach/coral, gold, and a green one in rotation */
.look-organic .flow-media{--g1:#FCD3B4;--g2:#F7B39A;--g3:#FFF4EA}
.look-organic .flow-row:nth-of-type(3n+2) .flow-media{--g1:#FBE0A6;--g2:#F6C08E;--g3:#FFF7E8}
.look-organic .flow-row:nth-of-type(3n) .flow-media{--g1:#CDEBC4;--g2:#F8C9B0;--g3:#F6FBF0}
.look-organic .arch::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.look-organic .arch .anode{background:rgba(255,255,255,.92);box-shadow:0 10px 30px -18px rgba(9,20,50,.25)}
.look-organic .arch .anode--key{background:#fff;box-shadow:0 0 0 1.5px var(--blue),0 14px 34px -18px rgba(217,58,31,.45)}
.look-organic .arch-net{background:rgba(255,255,255,.55)}

/* buttons: near-black primary; blue stays for links, highlights and the chat button */
.look-organic .btn--primary{background:var(--ink)}
.look-organic .btn--primary:hover{background:#000}

/* floating "Habla con Noriu" button: the same gap (--fab-gap) to the right edge and to the bottom edge of the hero panel.
   The panel has a 10px side margin and (when it fits the screen) ends --hero-gap above the bottom of the window. */
.look-organic{--fab-gap:24px;--hero-gap:39px}
.look-organic .chat-fab{right:calc(10px + var(--fab-gap));bottom:calc(var(--hero-gap) + var(--fab-gap))}
/* the floating "Habla con Noriu" button as Apple-style glass: frosted, a bright top edge, a soft shadow;
   it turns to dark glass over the dark panels (main.js adds .on-dark) */
.look-organic .chat-fab{background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.34));color:var(--ink);border:1px solid rgba(255,255,255,.7);border-radius:999px;padding:0 22px;-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 1px rgba(255,255,255,.35),0 12px 32px -10px rgba(17,19,21,.3),0 2px 8px rgba(17,19,21,.08);transition:background .25s,color .25s,border-color .25s,box-shadow .25s}
.look-organic .chat-fab:hover{background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.5))}
.look-organic .chat-fab.on-dark{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.07));color:#fff;border-color:rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 1px rgba(255,255,255,.1),0 12px 32px -10px rgba(0,0,0,.45)}
.look-organic .chat-fab.on-dark:hover{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.12))}
.look-organic .chat-panel{right:calc(10px + var(--fab-gap));bottom:calc(var(--hero-gap) + var(--fab-gap) + 62px)}

/* header: light announcement strip, ring-and-dot logo mark, links in a centred white pill, dark pill CTA */
.look-organic .topbar{background:transparent;color:var(--muted);border-bottom:0;padding:10px 16px 0;font-size:12.5px}
.look-organic .topbar a{color:var(--blue)}
.look-organic .topbar a:hover{color:var(--blue-hover)}
.look-organic .nav,.look-organic .nav.scrolled{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:transparent}
.look-organic .nav__links{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
/* once you scroll, a soft blurred white fade sits behind the floating header so content never collides with it
   (no solid bar: it fades out below the header); over dark panels the fade is navy */
.look-organic .nav::before{content:'';position:absolute;left:0;right:0;top:0;height:calc(100% + 30px);z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s var(--ease-quick);
  background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.72) 55%,rgba(255,255,255,0) 100%);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.look-organic .nav.scrolled::before{opacity:1}
.look-organic .nav.scrolled.on-dark::before{background:linear-gradient(180deg,rgba(15,16,38,.6) 0%,rgba(15,16,38,.35) 55%,rgba(15,16,38,0) 100%)}
/* over a dark panel (.cta-dark) the wordmark turns white */
.look-organic .nav.on-dark .nav__logo img{filter:brightness(0) invert(1)}
.look-organic .nav.scrolled .burger{background:rgba(255,255,255,.92);border-radius:50%;box-shadow:0 0 0 1px var(--hairline),0 8px 24px -16px rgba(9,20,50,.22)}
.look-organic .nav__inner{display:grid;grid-template-columns:1fr auto 1fr;height:72px}
/* the Noriu wordmark (red mark + NORIU, assets/img/noriu-logo.svg, lettering outlined from Helvetica Bold) */
.look-organic .nav__logo{justify-self:start;display:inline-flex;align-items:center;line-height:0}
.look-organic .nav__logo img{display:block;height:22px;width:auto}
.look-organic .footer__brand .nav__logo img{height:24px}
.look-organic .nav__links{margin:0;justify-self:center;gap:2px;padding:5px;background:rgba(255,255,255,.92);border:1px solid var(--hairline);border-radius:999px;box-shadow:0 8px 24px -16px rgba(9,20,50,.22)}
.look-organic .nav__links > a,.look-organic .nav__ddbtn{padding:7px 14px;border-radius:999px;color:var(--muted);transition:background .2s var(--ease-quick),color .2s var(--ease-quick)}
.look-organic .nav__links > a:hover,.look-organic .nav__dd:hover .nav__ddbtn,.look-organic .nav__dd:focus-within .nav__ddbtn{background:var(--surface);color:var(--ink)}
.look-organic .nav__links a.active::after{display:none}
.look-organic .nav__links > a.active,.look-organic .nav__ddbtn.active{background:var(--blue-soft);color:var(--blue)}
.look-organic .nav__right{justify-self:end;margin-left:0}
.look-organic .nav__cta{background:var(--ink);color:#fff;text-decoration:none;padding:9px 16px;border-radius:999px;font-size:14px}
.look-organic .nav__cta:hover{background:#000;color:#fff}
.look-organic .nav__dd::after{top:100%;height:18px}
.look-organic .nav__menu{top:calc(100% + 14px);left:-6px;border-radius:18px}
@media (max-width:1020px){
  .look-organic .nav__inner{display:flex;height:64px}
  .look-organic .nav__links{position:absolute;top:64px;justify-self:stretch;padding:8px 24px 20px;background:#fff;border:0;border-bottom:1px solid var(--hairline);border-radius:0;box-shadow:none;gap:0}
  .look-organic .nav__links > a,.look-organic .nav__ddbtn{padding:14px 2px;border-radius:0}
  .look-organic .nav__links > a:hover,.look-organic .nav__dd:hover .nav__ddbtn,.look-organic .nav__dd:focus-within .nav__ddbtn,
  .look-organic .nav__links > a.active,.look-organic .nav__ddbtn.active{background:none;color:var(--ink)}
  .look-organic .nav__right{margin-left:auto}
}

/* heroes: every panel is light and white in this look (Private's night panel too) */
.look-organic .hero-panel{background:#fff;color:var(--ink)}
.look-organic .hero-panel::before{left:50%;top:-10%;bottom:auto;width:1100px;height:620px;background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,255,255,0))}
.look-organic .hero-rings,.look-organic .hero-blocks,.look-organic .jt-strip{display:none!important}
.look-organic .hero-panel .h1{color:var(--ink)}
.look-organic .hero-panel .h1 .blue{color:var(--ink-soft)}
/* two-part hero headlines break between the parts: "Menos picar datos." / "Más asesorar." (not on the home, where
   the blue word sits mid-sentence) */
.look-organic body:not([data-page="index"]) .hero-panel .h1 .blue{display:block;text-wrap:balance}
.look-organic .hero-panel .lead{color:#454A51}
.look-organic .hero-panel .micro{color:var(--muted-2)!important}
.look-organic .hero-panel .btn--white{background:var(--ink);color:#fff}
.look-organic .hero-panel .btn--white:hover{background:#000}
.look-organic .hero-panel .btn--glass{background:rgba(255,255,255,.62);color:var(--ink);border-color:rgba(17,19,21,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.look-organic .hero-panel .btn--glass:hover{background:rgba(255,255,255,.9)}
.look-organic .hero-panel--night .lockup-pill{background:#fff;border-color:var(--hairline);color:var(--ink)}
.look-organic .hero-panel--night .lockup-pill .fc-icon{background:var(--blue-soft)}
.look-organic .hero-panel--night .lockup-pill .fc-icon svg{stroke:var(--blue)}

/* heroes fit the first screen: the panel is the viewport minus the header (--hdr, set in main.js) and the
   painting / product stage takes whatever height is left (it is cropped by the panel, never pushes it taller) */
@media (min-width:641px) and (min-height:560px){
  .look-organic .hero-panel{display:flex;flex-direction:column;min-height:max(550px,calc(100svh - var(--hdr,82px) - 10px - var(--hero-gap,39px)));padding-top:clamp(36px,7vh,80px)}
  .look-organic .hero-panel > .wrap{flex:0 0 auto}
  .look-organic .hero-panel .hero-stage,.look-organic .hero-panel .hero-art{flex:1 1 auto;width:100%;min-height:200px;height:auto!important;margin-top:clamp(28px,4.5vh,48px)}
  .look-organic .hero-panel .hero-stage.hero-stage--journey{flex:0 0 auto;margin-top:clamp(24px,4vh,48px)}
  .look-organic .hero-panel .hero-art{min-height:290px}
  .look-organic .hero-art--grain > .art-card{top:28px}
  .look-organic body[data-page="sectors"] .hero-panel .hero-art{min-height:300px}
  .look-organic body[data-page="sectors"] .hero-art .art-rows li{padding:7px 0}
}
.look-organic .hero-panel .h1{font-size:clamp(36px,5vw,68px);margin-bottom:18px}
/* shorter screens (laptops): tighten the hero so it still fits the first screen */
@media (min-width:641px) and (max-height:920px){
  .look-organic .hero-panel{padding-top:clamp(28px,5vh,56px)}
  .look-organic .hero-panel .h1{font-size:clamp(34px,min(5vw,7.2vh),64px)}
  .look-organic .hero-panel .lockup-pill{margin-bottom:18px}
  .look-organic .hero-panel .lead{margin-bottom:20px}
  .look-organic .hero-panel .micro{margin-top:12px!important}
  .look-organic .hero-panel .hero-art,.look-organic .hero-panel .hero-stage{margin-top:clamp(18px,3vh,32px)}
  .look-organic .hero-panel .hero-stage.hero-stage--journey{margin-top:clamp(12px,2.5vh,28px)}
  .look-organic .hero-panel .hero-art{min-height:248px}
  .look-organic .hero-art--grain > .art-card{scale:.86;transform-origin:50% 0}
  .look-organic body[data-page="sectors"] .hero-panel .hero-art{min-height:262px}
  .look-organic body[data-page="scan"] .hero-art--grain > .art-card{scale:.8;top:22px}
}
@media (min-width:641px) and (max-height:800px){
  .look-organic .hero-panel{padding-top:26px}
  .look-organic .hero-panel .lockup-pill{margin-bottom:14px}
  .look-organic .hero-panel .h1{font-size:clamp(32px,min(4.6vw,6.2vh),56px)}
  .look-organic .hero-panel .jt__viz{display:none}
  .look-organic body[data-page="sectors"] .hero-panel .hero-art{min-height:240px}
  .look-organic body[data-page="sectors"] .hero-art--grain > .art-card{scale:.8;top:22px}
}
.look-organic .hero-panel .lead{font-size:17px;margin-bottom:28px}
.look-organic .hero-panel::before{top:-14%;width:1300px;height:720px;background:radial-gradient(closest-side,rgba(255,255,255,.92),rgba(255,255,255,.6) 55%,rgba(255,255,255,0))}

/* home: painted blue meadow behind the whole panel */
.look-organic body[data-page="index"] .hero-panel{background:#FFF3E8 url(../img/art/meadow-2400.webp?v=20261003) center bottom/cover no-repeat}
/* products hub: white sky, then a pale hazy sea horizon behind the three product tiles */
.look-organic body[data-page="services"] .hero-panel{background:#fff url(../img/art/calm-hub-2400.webp?v=20261003) center bottom/cover no-repeat}
/* product and sector pages: one calm painted strip each (design/tools/paint_strips.html) replaces the old grain art */
.look-organic .hero-art--grain,.look-organic .poster__art{background:#fff center bottom/cover no-repeat}
.look-organic .hero-art--grain > img,.look-organic .poster__art > img{opacity:0}
.look-organic body[data-page="web"] .hero-art--grain{background-image:url(../img/art/calm-sea-2400.webp?v=20261003)}
.look-organic body[data-page="private"] .hero-art--grain{background-image:url(../img/art/calm-cove-2400.webp?v=20261003)}
.look-organic body[data-page="scan"] .hero-art--grain{background-image:url(../img/art/calm-clouds-2400.webp?v=20261003)}
.look-organic body[data-page="sec-gestoria"] .hero-art--grain{background-image:url(../img/art/calm-orchard-2400.webp?v=20261003)}
.look-organic body[data-page="sec-inmo"] .hero-art--grain{background-image:url(../img/art/calm-villas-2400.webp?v=20261003)}
.look-organic body[data-page="sec-legal"] .hero-art--grain{background-image:url(../img/art/calm-arcade-2400.webp?v=20261003)}
.look-organic body[data-page="sec-clinica"] .hero-art--grain{background-image:url(../img/art/calm-lagoon-2400.webp?v=20261003)}
.look-organic body[data-page="sec-ayto"] .hero-art--grain{background-image:url(../img/art/calm-village-2400.webp?v=20261003)}
.look-organic body[data-page="sectors"] .hero-art--grain{background-image:url(../img/art/calm-coast-2400.webp?v=20261003)}
/* sector poster cards (servicios + sectores): the same paintings, small */
.look-organic .poster[href="ia-para-gestorias.html"] .poster__art{background-image:url(../img/art/calm-orchard-1200.webp?v=20261003)}
.look-organic .poster[href="ia-para-inmobiliarias.html"] .poster__art{background-image:url(../img/art/calm-villas-1200.webp?v=20261003)}
.look-organic .poster[href="ia-para-abogados-notarias.html"] .poster__art{background-image:url(../img/art/calm-arcade-1200.webp?v=20261003)}
.look-organic .poster[href="ia-para-clinicas.html"] .poster__art{background-image:url(../img/art/calm-lagoon-1200.webp?v=20261003)}
.look-organic .poster[href="ia-para-ayuntamientos.html"] .poster__art{background-image:url(../img/art/calm-village-1200.webp?v=20261003)}
@media (max-width:640px){
  .look-organic body[data-page="index"] .hero-panel{background-image:url(../img/art/meadow-1200.webp?v=20261003);background-position:4% 100%}
  .look-organic body[data-page="services"] .hero-panel{background-image:url(../img/art/calm-hub-1200.webp?v=20261003)}
  .look-organic body[data-page="web"] .hero-art--grain{background-image:url(../img/art/calm-sea-1200.webp?v=20261003)}
  .look-organic body[data-page="private"] .hero-art--grain{background-image:url(../img/art/calm-cove-1200.webp?v=20261003)}
  .look-organic body[data-page="scan"] .hero-art--grain{background-image:url(../img/art/calm-clouds-1200.webp?v=20261003)}
  .look-organic body[data-page="sec-gestoria"] .hero-art--grain{background-image:url(../img/art/calm-orchard-1200.webp?v=20261003)}
  .look-organic body[data-page="sec-inmo"] .hero-art--grain{background-image:url(../img/art/calm-villas-1200.webp?v=20261003)}
  .look-organic body[data-page="sec-legal"] .hero-art--grain{background-image:url(../img/art/calm-arcade-1200.webp?v=20261003)}
  .look-organic body[data-page="sec-clinica"] .hero-art--grain{background-image:url(../img/art/calm-lagoon-1200.webp?v=20261003)}
  .look-organic body[data-page="sec-ayto"] .hero-art--grain{background-image:url(../img/art/calm-village-1200.webp?v=20261003)}
  .look-organic body[data-page="sectors"] .hero-art--grain{background-image:url(../img/art/calm-coast-1200.webp?v=20261003)}
}

/* the former dark panels, closing CTA (every page), home Noriu Private band, calculator price card, are a light
   grainy sunset gradient (peach, coral, gold, rose) like the mock frames, with dark text and a black primary button.
   (The dusk paintings, paint_strips.html?scene=dusk / twilight, are no longer used.) */
.look-organic :is(.cta-panel,.private-band,.quote__result){color:var(--ink);
  background:radial-gradient(70% 95% at 0% 0%,#F8BE96,transparent 62%),radial-gradient(65% 90% at 100% 100%,#EF8158,transparent 64%),
  radial-gradient(55% 75% at 88% 6%,#FBC96E,transparent 60%),radial-gradient(60% 80% at 12% 100%,#F29A88,transparent 64%),
  radial-gradient(40% 50% at 50% 45%,#FFEFE2,transparent 72%),#FBD6BE}
.look-organic :is(.cta-panel,.private-band,.quote__result)::before{display:none}
.look-organic :is(.cta-panel,.private-band,.quote__result)::after{content:'';position:absolute;inset:0;width:auto;height:auto;transform:none;border-radius:inherit;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.look-organic .orbits{display:none}
.look-organic :is(.cta-panel,.private-band) .h2{color:var(--ink)}
.look-organic .private-band .h2 .blue{display:block;color:var(--ink-soft)}
.look-organic .cta-panel p,.look-organic .private-band .lead{color:#4A4D54}
.look-organic .private-band .ticks li{color:#33363C}
/* buttons: black primary, frosted white secondary */
.look-organic :is(.cta-panel,.private-band,.quote__result) :is(.btn--primary,.btn--white){background:var(--ink);color:#fff;border-color:transparent}
.look-organic :is(.cta-panel,.private-band,.quote__result) :is(.btn--primary,.btn--white):hover{background:#000}
.look-organic :is(.cta-panel,.private-band) :is(.btn--light,.btn--glass){background:rgba(255,255,255,.55);color:var(--ink);border-color:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.look-organic :is(.cta-panel,.private-band) :is(.btn--light,.btn--glass):hover{background:rgba(255,255,255,.8)}
/* Private band diagram: white glass card, light nodes, ink text */
.look-organic .private-band .lockup{color:var(--ink)}
.look-organic .private-band .lockup .fc-icon{background:rgba(255,255,255,.75)}
.look-organic .private-band .lockup .fc-icon svg{stroke:var(--blue)}
.look-organic .pv-diagram{background:rgba(255,255,255,.5);border-color:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 24px 60px -30px rgba(150,70,40,.35)}
.look-organic .pv-diagram .node{background:rgba(255,255,255,.75);border-color:rgba(17,19,21,.06)}
.look-organic .pv-diagram .node .fc-icon{background:var(--blue-soft)}
.look-organic .pv-diagram .node .fc-icon svg{stroke:var(--blue)}
.look-organic .pv-diagram .node small{color:var(--muted)}
.look-organic .pv-diagram .node--srv{background:#fff;border-color:rgba(217,58,31,.35)}
.look-organic .pv-diagram .wire{background-image:repeating-linear-gradient(90deg,var(--blue) 0 6px,transparent 6px 11px)}
.look-organic .pv-diagram .cloud-row{border-color:rgba(17,19,21,.18);color:var(--muted)}
.look-organic .pv-diagram .cloud-row .cl{text-decoration-color:rgba(17,19,21,.35)}
.look-organic .pv-diagram .cloud-row svg{stroke:var(--muted-2)}
.look-organic .pv-diagram .cloud-row b{color:var(--ink)}
.look-organic .pv-diagram .cmp th{color:var(--muted);border-bottom-color:rgba(17,19,21,.1)}
.look-organic .pv-diagram .cmp th:last-child{color:var(--blue)}
.look-organic .pv-diagram .cmp td{color:var(--muted);border-bottom-color:rgba(17,19,21,.08)}
.look-organic .pv-diagram .cmp td:first-child{color:#33363C}
.look-organic .pv-diagram .cmp td:last-child{color:var(--ink);font-weight:500}
/* price card */
.look-organic .quote__result .q-res__k{color:var(--muted)}
.look-organic .quote__result .q-res__lines li{color:#33363C;border-top-color:rgba(17,19,21,.1)}
.look-organic .quote__result .q-res__lines b{color:var(--ink)}
.look-organic .quote__result :is(.q-res__custom span,.q-res__m){color:var(--blue)}
.look-organic .quote__result .q-res__note{color:var(--muted)}

/* Contacto: the seaside town in the sunset palette (paint_contact.html?theme=sunset) */
.look-organic .contact-hero{background:#fff url(../img/contact-sea-sunset-2400.webp?v=20261003) center bottom/cover no-repeat}
.look-organic .contact-hero__bg{opacity:0}
@media (max-width:640px){.look-organic .contact-hero{background-image:url(../img/contact-sea-sunset-1200.webp?v=20261003)}}
/* desktop (side-by-side): like the other heroes the painting fills the whole panel and the hero fits the first
   screen; the painting is mirrored so the town sits under the headline instead of behind the form, and the form is
   tightened so it fits (more on screens ≤800px tall). The form keeps one width; on narrower laptops it moves in from
   the right edge (--cm, from the button's width per language, --fabw) so the floating "Habla con Noriu" button
   doesn't sit on it */
@media (min-width:1021px){
  .look-organic .contact-hero{--cm:clamp(0px,calc(var(--fabw,152px) + 614px - 50vw),160px);background:#fff;padding-bottom:40px}
  .look-organic[lang="en"] .contact-hero{--fabw:130px}
  .look-organic[lang="de"] .contact-hero{--fabw:200px}
  .look-organic[lang="ru"] .contact-hero{--fabw:180px}
  .look-organic .contact-hero__bg{opacity:1;transform:scaleX(-1)}
  .look-organic .contact-hero__wash{display:none}
  .look-organic .contact-hero .h1{font-size:clamp(36px,min(3.7vw,6.6vh),54px)}
  .look-organic .contact-hero__grid{grid-template-columns:minmax(0,1fr) calc(min(556px,50vw - 40px) + var(--cm));gap:clamp(40px,calc(100vw - 1436px),64px)}
  .look-organic .contact-hero .form-card{margin-right:var(--cm);padding:26px 30px 22px}
  .look-organic .contact-hero .form-card__head{flex-wrap:nowrap;margin-bottom:16px}
  .look-organic .contact-hero .form-card__head h2{font-size:20px;white-space:nowrap}
  .look-organic .contact-hero .form-card__head .micro{font-size:11.5px;text-align:right}
  .look-organic .contact-hero .form,.look-organic .contact-hero .form-row{gap:14px}
  .look-organic .contact-hero .field label{margin-bottom:6px}
  .look-organic .contact-hero .input,.look-organic .contact-hero .select{padding-top:10px;padding-bottom:10px}
  .look-organic .contact-hero .textarea{min-height:92px;height:92px}
  .look-organic .contact-hero .check{font-size:13px}
  .look-organic .contact-hero .form .micro{font-size:11.5px}
}
@media (min-width:1021px) and (max-height:800px){
  .look-organic .contact-hero{padding-bottom:28px}
  .look-organic .contact-hero .form-card{padding:20px 26px 18px}
  .look-organic .contact-hero .form-card__head{margin-bottom:12px}
  .look-organic .contact-hero .form,.look-organic .contact-hero .form-row{gap:11px}
  .look-organic .contact-hero .input,.look-organic .contact-hero .select{padding-top:9px;padding-bottom:9px}
  .look-organic .contact-hero .textarea{min-height:66px;height:66px}
  .look-organic .contact-hero .btn--lg{height:46px}
}

/* footer: white to light grey, ending in the painted meadow */
.look-organic .footer__art{background:url(../img/art/meadow-1200.webp?v=20261003) center 92%/cover no-repeat;-webkit-mask-image:linear-gradient(180deg,transparent,#000 38%);mask-image:linear-gradient(180deg,transparent,#000 38%)}
.look-organic .footer__art img{opacity:0}

/* Product pages, Sectores and the five sector pages: like the home and Productos heroes, the painting fills the whole
   hero panel (sky behind the headline, scene along the bottom) and the hero fits the first screen. The strip area
   behind the card is transparent. Phones keep the painted strip under the text. (paint_strips.html?scene=…&full=1) */
@media (min-width:641px){
  .look-organic body:is([data-page="web"],[data-page="private"],[data-page="scan"],[data-page="sectors"],[data-page^="sec-"]) .hero-panel{background:#fff center bottom/cover no-repeat}
  .look-organic body[data-page="web"] .hero-panel{background-image:url(../img/art/full-sea-2400.webp?v=20261003)}
  .look-organic body[data-page="private"] .hero-panel{background-image:url(../img/art/full-cove-2400.webp?v=20261003)}
  .look-organic body[data-page="scan"] .hero-panel{background-image:url(../img/art/full-clouds-2400.webp?v=20261003)}
  .look-organic body[data-page="sectors"] .hero-panel{background-image:url(../img/art/full-coast-2400.webp?v=20261003)}
  .look-organic body[data-page="sec-gestoria"] .hero-panel{background-image:url(../img/art/full-orchard-2400.webp?v=20261003)}
  .look-organic body[data-page="sec-inmo"] .hero-panel{background-image:url(../img/art/full-villas-2400.webp?v=20261003)}
  .look-organic body[data-page="sec-legal"] .hero-panel{background-image:url(../img/art/full-arcade-2400.webp?v=20261003)}
  .look-organic body[data-page="sec-clinica"] .hero-panel{background-image:url(../img/art/full-lagoon-2400.webp?v=20261003)}
  .look-organic body[data-page="sec-ayto"] .hero-panel{background-image:url(../img/art/full-village-2400.webp?v=20261003)}
  .look-organic body:is([data-page="web"],[data-page="private"],[data-page="scan"],[data-page="sectors"],[data-page^="sec-"]) .hero-art--grain{background:none!important}
}

/* hard-coded blue tints in main.css, now in the logo red */
.look-organic .lockup-pill .fc-icon{background:var(--blue-soft)}
.look-organic .spark .area{fill:rgba(217,58,31,.09)}
.look-organic .map-card .zone{fill:rgba(217,58,31,.07);stroke:rgba(217,58,31,.35)}
.look-organic .map-legend i.z{background:rgba(217,58,31,.15);border-color:rgba(217,58,31,.5)}
.look-organic .poster:hover{box-shadow:0 0 0 1px rgba(217,58,31,.3),0 28px 60px -30px rgba(120,50,30,.4)}
.look-organic .channel:hover{box-shadow:0 6px 18px -10px rgba(217,58,31,.45)}
.look-organic .arch-net{border-color:rgba(217,58,31,.45)}
.look-organic .tier--main{box-shadow:0 18px 50px rgba(217,58,31,.12)}
.look-organic .jt a:hover{box-shadow:0 28px 60px -22px rgba(120,50,30,.4),0 0 0 1px rgba(217,58,31,.4)}
.look-organic .v-bars i{background:#F7C6B8}
.look-organic :is(.input,.select,.textarea):focus{box-shadow:0 0 0 3px rgba(217,58,31,.12)}
.look-organic .form-status.ok{background:#FDF1EC;border-color:rgba(217,58,31,.25)}
/* process timeline line: warm instead of pale blue */
.look-organic .step::before{background:#F4CDBF}
.look-organic .step:last-child::before{background:linear-gradient(90deg,#F4CDBF,rgba(244,205,191,0))}
@media (max-width:900px){.look-organic .step:last-child::before{background:linear-gradient(180deg,#F4CDBF,rgba(244,205,191,0))}}
.look-organic .jt__node{box-shadow:0 0 0 5px rgba(217,58,31,.12)}