/* Noriu v5, professional redesign (Oct 2026), loaded after organic.css with <html class="look-organic look-v5">.
   After Ramp.com + a clean SaaS layout reference (design/screenshots, Oct 2): pure white, near-black type in a lighter
   weight, greys, and ONE sparky accent, a yellow-green lime used only as a fill (primary buttons, markers, highlights).
   No paintings and no dot grids: heroes (sector pages included), the Hablamos CTA, the Noriu Private band, the mock
   frames and the sector cards all use soft lime / mint / aqua gradients that match the lime buttons. Heroes: text left,
   product right. The logo is near-black (assets/img/noriu-logo.svg; the red original is noriu-logo-red.svg). The footer
   meadow is repainted in the site's greens (paint_meadow.html?palette=lime). Remove this file + the class to fall back
   to the organic look. */

html.look-v5{
  --ink:#0E0F11;
  --muted:#5C5F65;
  --muted-2:#8E9197;
  --hairline:#E7E7E3;
  --surface:#F4F4F1;
  --lime:#DAF24C;
  --lime-hover:#CBE638;
  --lime-soft:#F1FAC6;
  /* the old accent tokens (used all over main.css): text accents go near-black, tints go pale lime */
  --blue:#0E0F11;--blue-hover:#000;--blue-soft:#EEF7C4;--blue-on-dark:#DAF24C;--logo-blue:#0E0F11;
  /* gradients: the lime of the buttons + mint/aqua, on a near-white base */
  --g-lime:rgba(218,242,76,.55);--g-mint:rgba(160,226,200,.5);
  --hero-grad:radial-gradient(48% 62% at 92% 12%,var(--g-lime),transparent 72%),
    radial-gradient(46% 60% at 4% 96%,var(--g-mint),transparent 72%),
    radial-gradient(40% 50% at 62% 104%,rgba(218,242,76,.28),transparent 72%),
    linear-gradient(180deg,#FCFDF9,#F3F6EC);
  --panel-grad:radial-gradient(60% 85% at 100% 0%,rgba(218,242,76,.7),transparent 70%),
    radial-gradient(55% 80% at 0% 100%,rgba(150,222,192,.6),transparent 70%),
    radial-gradient(40% 60% at 55% 110%,rgba(218,242,76,.35),transparent 70%),
    linear-gradient(135deg,#F7FBEA,#EEF7EE);
  --card-grad:radial-gradient(75% 80% at 0% 0%,rgba(218,242,76,.32),transparent 70%),
    radial-gradient(75% 85% at 100% 100%,rgba(160,226,200,.38),transparent 70%),#F7F9F2;
}
/* each sector page gets its own mix of the same family */
html.look-v5 body[data-page="sec-inmo"]{--g-mint:rgba(150,212,232,.5)}
html.look-v5 body[data-page="sec-legal"]{--g-lime:rgba(160,226,200,.55);--g-mint:rgba(218,242,76,.45)}
html.look-v5 body[data-page="sec-clinica"]{--g-lime:rgba(170,226,222,.55);--g-mint:rgba(218,242,76,.42)}
html.look-v5 body[data-page="sec-ayto"]{--g-lime:rgba(236,236,96,.55)}
html.look-v5 body{color:var(--ink)}

/* ------------------------------------------------------------------ type: lighter, tighter, editorial */
html.look-v5 .h1{font-weight:500;letter-spacing:-.042em;line-height:1.02}
html.look-v5 .h2{font-weight:500;letter-spacing:-.035em;line-height:1.06;font-size:clamp(30px,3.3vw,46px)}
html.look-v5 :is(h3,h4,.h3){font-weight:500;letter-spacing:-.02em}
html.look-v5 .lead{color:var(--muted)}
/* section eyebrow: a lime square + the section number */
html.look-v5 main .head::before{content:counter(sec,decimal-leading-zero);display:inline-block;padding-left:16px;margin-bottom:20px;font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--muted);
  background:linear-gradient(var(--lime),var(--lime)) left 50%/8px 8px no-repeat}

/* ------------------------------------------------------------------ buttons: lime primary, black / white secondary */
html.look-v5 .btn{border-radius:8px;font-weight:500}
html.look-v5 :is(.btn--primary,.hero-panel .btn--white,.quote__result .btn--white,.private-band .btn--white){background:var(--lime);color:var(--ink);border-color:transparent}
html.look-v5 :is(.btn--primary,.hero-panel .btn--white,.quote__result .btn--white,.private-band .btn--white):hover{background:var(--lime-hover);color:var(--ink)}
html.look-v5 :is(.hero-panel .btn--glass,.cta-panel .btn--light,.private-band .btn--glass){background:#fff;color:var(--ink);border:1px solid var(--hairline);-webkit-backdrop-filter:none;backdrop-filter:none}
html.look-v5 :is(.hero-panel .btn--glass,.cta-panel .btn--light,.private-band .btn--glass):hover{background:#fff;border-color:#CFCFCA}
html.look-v5 :is(.cta-panel,.private-band) .btn--primary{background:var(--lime);color:var(--ink)}
html.look-v5 .link,html.look-v5 a.more{color:var(--ink)}

/* ------------------------------------------------------------------ header (after clay.com)
   A dark announcement strip (text left, small uppercase lime link right) and, hanging from it, a white bar inset from
   the edges with rounded bottom corners and a hairline border. Links sit right after the logo; on the right two small
   rounded buttons (light "Pedir diagnóstico", black "Habla con Noriu"). The menus open as a full-width panel inside the
   bar (items in columns + a feature card). Both stay at the top while scrolling. */
html.look-v5{--tb-h:40px;--bar-h:58px}
html.look-v5 .topbar{position:sticky;top:0;z-index:101;display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--tb-h);
  padding:0 calc(10px + 24px);background:var(--ink);color:rgba(255,255,255,.88);font-size:13.5px;text-align:left;line-height:1.3}
html.look-v5 .topbar a{margin:0;color:var(--lime);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
html.look-v5 .topbar a:hover{color:#fff}
html.look-v5 :is(.nav,.nav.scrolled){top:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border:0}
html.look-v5 .topbar + .nav{top:var(--tb-h)}
html.look-v5 .nav::before{display:none}
html.look-v5 .nav > .nav__inner{position:relative;max-width:none;margin:0 10px;padding:0 12px 0 24px;height:var(--bar-h);
  background:#fff;border:0;border-radius:0 0 22px 22px;transition:border-radius .2s var(--ease-quick)}
html.look-v5 .nav.scrolled > .nav__inner{box-shadow:0 10px 30px -22px rgba(14,15,17,.35)}
html.look-v5 .nav__logo img{height:21px}
html.look-v5 .nav__right{gap:6px}
html.look-v5 :is(.nav__cta,.nav__cta2){display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 15px;border-radius:12px;font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;border:0;cursor:pointer;transition:background .15s var(--ease-quick)}
html.look-v5 .nav__cta{background:var(--ink);color:#fff}
html.look-v5 .nav__cta:hover{background:#000;color:#fff}
html.look-v5 .nav__cta svg{display:none}
html.look-v5 .nav__cta2{background:#F3F2ED;color:var(--ink)}
html.look-v5 .nav__cta2:hover{background:#E9E8E1;color:var(--ink)}
@media (min-width:1021px){
  html.look-v5 .nav__inner{display:flex;align-items:stretch}
  html.look-v5 .nav__logo{align-self:center}
  html.look-v5 .nav__right{align-self:center;margin-left:auto}
  html.look-v5 .nav__links{align-items:stretch;margin:0 0 0 36px;padding:0;gap:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  html.look-v5 .nav__links > a,html.look-v5 .nav__dd{align-self:stretch;display:flex;align-items:center}
  html.look-v5 .nav__dd{position:static}
  html.look-v5 .nav__dd::after{display:none}
  html.look-v5 :is(.nav__links > a,.nav__ddbtn){padding:8px 11px;border-radius:10px;color:var(--ink);font-size:15px;font-weight:400;background:none}
  html.look-v5 .nav__ddbtn svg{display:none}
  html.look-v5 :is(.nav__links > a:hover,.nav__dd:hover .nav__ddbtn,.nav__dd:focus-within .nav__ddbtn){background:#F3F2ED;color:var(--ink)}
  html.look-v5 :is(.nav__links > a.active,.nav__ddbtn.active){background:none;color:var(--ink);box-shadow:none;text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:3px;text-underline-offset:7px}
  /* the menu: a full-width panel continuing the white bar */
  html.look-v5 .nav__inner:has(.nav__dd:hover),html.look-v5 .nav__inner:has(.nav__dd:focus-within){border-radius:0}
  html.look-v5 .nav__links .nav__menu{position:absolute;top:100%;left:0;right:0;width:auto;margin:0;padding:18px 24px 26px;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,300px);grid-auto-flow:dense;gap:4px 18px;align-items:start;
    background:#fff;border:0;border-top:1px solid #EFEEE9;border-radius:0 0 22px 22px;
    box-shadow:0 30px 60px -36px rgba(14,15,17,.35);transform:translateY(-6px)}
  html.look-v5 :is(.nav__dd:hover,.nav__dd:focus-within) .nav__menu{transform:none}
  html.look-v5 .nav__links .nav__menu a{gap:12px;padding:10px 10px;border-radius:12px;color:var(--ink)}
  html.look-v5 .nav__links .nav__menu a:hover{background:#F6F6F2}

  html.look-v5 .nav__menu strong{font-size:14.5px;font-weight:500}
  /* "see all" becomes the feature card on the right */
  html.look-v5 .nav__links .nav__menu .nav__menu-all{grid-column:4;grid-row:1 / span 2;display:flex;flex-wrap:wrap;align-content:flex-end;align-items:baseline;gap:6px;
    min-height:150px;margin:0;padding:18px;border:0;border-radius:14px;font-size:15px;font-weight:500;color:var(--ink);
    background:#F7FAF0 url(../img/art/soft-hub-1200.webp?v=20261003) center/cover no-repeat}
  html.look-v5 .nav__links .nav__menu--sectors .nav__menu-all{background-image:url(../img/art/soft-coast-1200.webp?v=20261003)}
  html.look-v5 .nav__links .nav__menu .nav__menu-all:hover{background-color:#F7FAF0;filter:saturate(1.15)}
}
@media (max-width:1020px){
  html.look-v5{--tb-h:auto;--bar-h:58px}
  html.look-v5 .topbar{position:static;height:auto;padding:9px 18px;flex-wrap:wrap;justify-content:center;text-align:center}
  html.look-v5 :is(.nav,.nav.scrolled),html.look-v5 .topbar + .nav{top:0}
  html.look-v5 .nav > .nav__inner{margin:0 8px;padding:0 10px 0 18px;border-radius:0 0 18px 18px}
  html.look-v5 .nav__cta2{display:none}
  html.look-v5 .nav__links{top:calc(var(--bar-h) + 6px);left:0;right:0;border:1px solid rgba(209,205,199,.55);border-radius:18px}
}
@media (max-width:640px){html.look-v5 .nav__cta{display:none}}

/* ------------------------------------------------------------------ heroes */
html.look-v5 .hero-panel{border-radius:24px;text-align:left;background:var(--hero-grad)}
html.look-v5 .hero-panel::before{display:none}
html.look-v5 .hero-panel::after{display:none}
html.look-v5 .hero-panel > .wrap{width:100%}
html.look-v5 .hero-panel .h1{margin-left:0;margin-right:0;max-width:none}
html.look-v5 .hero-panel .lead{margin-left:0;margin-right:0;color:var(--muted)}
html.look-v5 .hero-panel .cta-row.center{justify-content:flex-start}
html.look-v5 .hero-panel .micro{text-align:left}
html.look-v5 .hero-panel .lockup-pill{background:#fff;border:1px solid var(--hairline);border-radius:8px;padding:5px 12px 5px 5px;font-size:13px}
html.look-v5 .hero-panel .lockup-pill .fc-icon{border-radius:6px;background:var(--lime-soft)}
html.look-v5 .hero-panel .lockup-pill .fc-icon svg{stroke:var(--ink)}
/* every hero is a gradient now (the paintings set in organic.css are overridden), sector pages included */
html.look-v5 body:is([data-page="index"],[data-page="services"],[data-page="web"],[data-page="private"],[data-page="scan"],[data-page="sectors"],[data-page^="sec-"]) .hero-panel{background:var(--hero-grad)}
html.look-v5 .hero-art--grain{background:none!important}
/* Productos: no dotted line / nodes linking the three product tiles, tiles level */
html.look-v5 :is(.jt-line,.jt__node){display:none!important}
html.look-v5 .jt{margin-top:0}

/* desktop: two columns, text left, the product (chat demo / card) right */
@media (min-width:1021px){
  html.look-v5 body:is([data-page="index"],[data-page="web"],[data-page="private"],[data-page="scan"],[data-page="sectors"],[data-page^="sec-"]) .hero-panel{
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-content:center;align-items:center;column-gap:56px;
    padding:48px max(48px,calc((100% - 1160px) / 2)) 48px}
  html.look-v5 body:is([data-page="index"],[data-page="web"],[data-page="private"],[data-page="scan"],[data-page="sectors"],[data-page^="sec-"]) .hero-panel > .wrap:not(.hero-stage){grid-column:1;max-width:none;margin:0;padding:0}
  html.look-v5 .hero-panel .h1{font-size:clamp(40px,4.4vw,64px)}
  html.look-v5 body:is([data-page="web"],[data-page="private"],[data-page="scan"],[data-page="sectors"],[data-page^="sec-"]) .hero-panel .h1{font-size:clamp(38px,3.9vw,56px)}
  html.look-v5 body:not([data-page="index"]) .hero-panel .h1 .blue{display:block}
  /* product + sector pages: the card sits in the right column, full size */
  html.look-v5 .hero-panel > .hero-art{grid-column:2;margin:0!important;height:auto!important;min-height:0!important;display:grid;place-items:center;pointer-events:auto}
  html.look-v5 .hero-panel > .hero-art > .art-card{position:relative;left:auto;top:auto!important;translate:none;scale:1!important;width:min(440px,100%);max-width:none;margin:0;font-size:105%}
  html.look-v5 .hero-panel > .hero-art > img{display:none}
  /* home: the chat demo as a full card, the two floating cards around it */
  html.look-v5 body[data-page="index"] .hero-stage{grid-column:2;margin:0!important;height:auto!important;max-width:none;width:100%;padding:28px 0 36px}
  html.look-v5 body[data-page="index"] .demo-chat{position:relative;left:auto;transform:none;border-radius:16px;min-height:0;width:80%;box-shadow:0 30px 70px -30px rgba(14,15,17,.28),0 0 0 1px rgba(14,15,17,.06)}
  html.look-v5 body[data-page="index"] .demo-chat .chat-body{padding-bottom:4px}
  html.look-v5 body[data-page="index"] .float-card--priv{left:auto;right:4px;top:0}
  html.look-v5 body[data-page="index"] .float-card--lead{right:-44px;top:auto;bottom:-6px}
}
/* everything stacked: left-aligned, card full width under the text */
@media (max-width:1020px){
  html.look-v5 .hero-panel > .wrap{text-align:left}
}

/* ------------------------------------------------------------------ cards, frames, panels: soft lime / mint gradients */
html.look-v5 :is(.flow-media,.arch){background:var(--card-grad)!important}
html.look-v5 .flow-row:nth-of-type(3n+2) .flow-media{background:radial-gradient(75% 80% at 100% 0%,rgba(218,242,76,.34),transparent 70%),radial-gradient(75% 85% at 0% 100%,rgba(150,212,232,.32),transparent 70%),#F7F9F2!important}
html.look-v5 .flow-row:nth-of-type(3n) .flow-media{background:radial-gradient(75% 80% at 0% 100%,rgba(218,242,76,.36),transparent 70%),radial-gradient(75% 85% at 100% 0%,rgba(160,226,200,.36),transparent 70%),#F7F9F2!important}
html.look-v5 :is(.flow-media,.arch)::after{display:none}
html.look-v5 .arch .anode--key{box-shadow:0 0 0 1.5px var(--ink),0 14px 34px -18px rgba(14,15,17,.3)}
html.look-v5 .arch-net{border-color:rgba(14,15,17,.25)}
html.look-v5 :is(.cta-panel,.private-band){background:var(--panel-grad);border-radius:24px}
html.look-v5 :is(.cta-panel,.private-band,.quote__result)::after{display:none}
html.look-v5 .quote__result{background:#fff;border:1px solid var(--hairline);box-shadow:0 24px 60px -36px rgba(14,15,17,.3)}
html.look-v5 .quote__result .q-res__n{letter-spacing:-.04em;font-weight:500}
html.look-v5 .quote__result :is(.q-res__custom span,.q-res__m){color:var(--ink)}
html.look-v5 .pv-diagram{background:#fff;border:1px solid var(--hairline);box-shadow:0 24px 60px -36px rgba(14,15,17,.25);-webkit-backdrop-filter:none;backdrop-filter:none}
html.look-v5 .pv-diagram .node{background:var(--surface);border-color:transparent}
html.look-v5 .pv-diagram .node .fc-icon,html.look-v5 .private-band .lockup .fc-icon{background:var(--lime-soft)}
html.look-v5 .pv-diagram .node--srv{background:#fff;border-color:var(--ink)}
html.look-v5 .pv-diagram .cmp th:last-child{color:var(--ink)}
html.look-v5 .private-band .lockup .fc-icon{background:var(--lime-soft)}
html.look-v5 .art-card{border-radius:12px;box-shadow:0 24px 60px -30px rgba(14,15,17,.3),0 0 0 1px rgba(14,15,17,.06)}
html.look-v5 .poster{border-radius:16px}
/* sector cards: gradients instead of the paintings, one mix per sector */
html.look-v5 .poster__art{background:var(--card-grad)!important}
html.look-v5 .poster__art > img{opacity:0}
html.look-v5 .poster[href="ia-para-inmobiliarias.html"] .poster__art{background:radial-gradient(75% 80% at 100% 0%,rgba(218,242,76,.38),transparent 70%),radial-gradient(75% 85% at 0% 100%,rgba(150,212,232,.4),transparent 70%),#F7F9F2!important}
html.look-v5 .poster[href="ia-para-abogados-notarias.html"] .poster__art{background:radial-gradient(75% 80% at 0% 0%,rgba(160,226,200,.42),transparent 70%),radial-gradient(75% 85% at 100% 100%,rgba(218,242,76,.34),transparent 70%),#F7F9F2!important}
html.look-v5 .poster[href="ia-para-clinicas.html"] .poster__art{background:radial-gradient(75% 80% at 100% 0%,rgba(170,226,222,.45),transparent 70%),radial-gradient(75% 85% at 0% 100%,rgba(218,242,76,.32),transparent 70%),#F7F9F2!important}
html.look-v5 .poster[href="ia-para-ayuntamientos.html"] .poster__art{background:radial-gradient(75% 80% at 0% 0%,rgba(236,236,96,.4),transparent 70%),radial-gradient(75% 85% at 100% 100%,rgba(160,226,200,.38),transparent 70%),#F7F9F2!important}
html.look-v5 .poster:hover{box-shadow:0 0 0 1px rgba(14,15,17,.2),0 28px 60px -34px rgba(14,15,17,.35)}
html.look-v5 .jt a{border-radius:12px;box-shadow:0 20px 50px -30px rgba(14,15,17,.3),0 0 0 1px rgba(14,15,17,.06)}
html.look-v5 .jt a:hover{box-shadow:0 28px 60px -28px rgba(14,15,17,.35),0 0 0 1px rgba(14,15,17,.25)}
html.look-v5 .tchip{border-radius:8px}

/* accents that were red tints */
html.look-v5 .spark .area{fill:rgba(218,242,76,.35)}
html.look-v5 .map-card .zone{fill:rgba(218,242,76,.22);stroke:rgba(14,15,17,.35)}
html.look-v5 .map-legend i.z{background:rgba(218,242,76,.4);border-color:rgba(14,15,17,.4)}
html.look-v5 .channel:hover{border-color:var(--ink);box-shadow:0 6px 18px -12px rgba(14,15,17,.35)}
html.look-v5 .tier--main{border-color:var(--ink);box-shadow:0 18px 50px -24px rgba(14,15,17,.25)}
html.look-v5 .v-bars i{background:#E3F28E}
html.look-v5 :is(.input,.select,.textarea):focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(218,242,76,.55)}
html.look-v5 .form-status.ok{background:var(--lime-soft);border-color:rgba(14,15,17,.15)}
html.look-v5 .step::before{background:#DCDCD7}
html.look-v5 .step:last-child::before{background:linear-gradient(90deg,#DCDCD7,rgba(220,220,215,0))}
@media (max-width:900px){html.look-v5 .step:last-child::before{background:linear-gradient(180deg,#DCDCD7,rgba(220,220,215,0))}}
html.look-v5 .step::after{background:#fff radial-gradient(circle,var(--lime) 0 3.2px,transparent 3.8px);border-color:var(--ink)}
html.look-v5 .step .n{color:var(--muted)}

/* ------------------------------------------------------------------ Contacto: gradient instead of the painting */
html.look-v5 .contact-hero__bg{opacity:0!important}
html.look-v5 .form-card{border-radius:16px}

/* ------------------------------------------------------------------ footer: the site's colours */
html.look-v5 .footer{background:linear-gradient(180deg,#FFFFFF 0%,#F6F9EC 72%)}
html.look-v5 .footer__art{background-image:url(../img/art/meadow-lime-1200.webp?v=20261003)}
html.look-v5 :is(.footer__social a,.footer__social button):hover{border-color:var(--ink);color:var(--ink)}
html.look-v5 .footer__bottom{border-top-color:#E3E8D6}

/* ------------------------------------------------------------------ product + sector heroes: the blurred artwork
   Each page's painting, repainted in the site palette and blurred until it reads as a gradient that still carries the
   scene (paint_strips.html?scene=…&tone=lime&soft=1 → art/soft-*.webp), with a fine grain on top. The sector cards use
   the same images. */
html.look-v5{--grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
html.look-v5 body:is([data-page="services"],[data-page="web"],[data-page="private"],[data-page="scan"],[data-page="sectors"],[data-page^="sec-"]) .hero-panel{background:#F7FAF0}
html.look-v5 body:is([data-page="services"],[data-page="web"],[data-page="private"],[data-page="scan"],[data-page="sectors"],[data-page^="sec-"]) .hero-panel > .hero-bg::before{display:block;content:'';position:absolute;inset:0;left:0;bottom:0;width:auto;height:auto;z-index:-2;pointer-events:none;
  background:var(--soft) center bottom/cover no-repeat;transform:scaleX(var(--flip,1))}
html.look-v5 body:is([data-page="services"],[data-page="web"],[data-page="private"],[data-page="scan"],[data-page="sectors"],[data-page^="sec-"]) .hero-panel > .hero-bg::after{display:block;content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--grain);opacity:.09;mix-blend-mode:multiply}
html.look-v5 body[data-page="services"]{--soft:url(../img/art/soft-hub-2400.webp?v=20261003)}
html.look-v5 body[data-page="web"]{--soft:url(../img/art/soft-sea-2400.webp?v=20261003)}
html.look-v5 body[data-page="private"]{--soft:url(../img/art/soft-cove-2400.webp?v=20261003)}
html.look-v5 body[data-page="scan"]{--soft:url(../img/art/soft-clouds-2400.webp?v=20261003)}
html.look-v5 body[data-page="sectors"]{--soft:url(../img/art/soft-coast-2400.webp?v=20261003)}
html.look-v5 body[data-page="sec-gestoria"]{--soft:url(../img/art/soft-orchard-2400.webp?v=20261003)}
html.look-v5 body[data-page="sec-inmo"]{--soft:url(../img/art/soft-villa-2400.webp?v=20261004d)}
html.look-v5 body[data-page="sec-legal"]{--soft:url(../img/art/soft-arcade-2400.webp?v=20261003)}
html.look-v5 body[data-page="sec-clinica"]{--soft:url(../img/art/soft-lagoon-2400.webp?v=20261003)}
html.look-v5 body[data-page="sec-ayto"]{--soft:url(../img/art/soft-village-2400.webp?v=20261003)}
/* contrast: where the bright lime part of the scene fell behind the text column, the artwork is mirrored so it sits
   behind the card instead (measured: lime coverage behind the text 25–28% → ~2%) */
html.look-v5 body:is([data-page="sectors"],[data-page="sec-clinica"],[data-page="sec-ayto"]){--flip:-1}
html.look-v5 .poster__art::after{content:'';position:absolute;inset:0;pointer-events:none;background:var(--grain);opacity:.09;mix-blend-mode:multiply}
html.look-v5 .poster[href="ia-para-gestorias.html"] .poster__art{background:#F7FAF0 url(../img/art/soft-orchard-1200.webp?v=20261003) center bottom/cover no-repeat!important}
html.look-v5 .poster[href="ia-para-inmobiliarias.html"] .poster__art{background:#F7FAF0 url(../img/art/soft-villa-1200.webp?v=20261004d) center bottom/cover no-repeat!important}
html.look-v5 .poster[href="ia-para-abogados-notarias.html"] .poster__art{background:#F7FAF0 url(../img/art/soft-arcade-1200.webp?v=20261003) center bottom/cover no-repeat!important}
html.look-v5 .poster[href="ia-para-clinicas.html"] .poster__art{background:#F7FAF0 url(../img/art/soft-lagoon-1200.webp?v=20261003) center bottom/cover no-repeat!important}
html.look-v5 .poster[href="ia-para-ayuntamientos.html"] .poster__art{background:#F7FAF0 url(../img/art/soft-village-1200.webp?v=20261003) center bottom/cover no-repeat!important}

/* ------------------------------------------------------------------ headline highlights: bright green text
   The second part of a heading (.blue) is set in the same lime as the primary buttons (user's choice; note it is low
   contrast on the light backgrounds).
   Two-part hero headlines and the Private band still start it on a new line. */
html.look-v5 :is(.h1,.h2) .blue{color:var(--lime)!important;background:none;padding:0;margin:0;text-shadow:none}
html.look-v5 body:not([data-page="index"]) .hero-panel .h1 .blue,html.look-v5 .private-band .h2 .blue{display:block!important}
html.look-v5 .h1 .blue .serif{font-style:normal}

/* ------------------------------------------------------------------ the Noriu mark around the site */
html.look-v5{--mark:url(../img/noriu-mark-tight.svg)}
/* section eyebrow: the mark in lime instead of a square */
html.look-v5 main .head::before{padding-left:24px;background:url(../img/noriu-mark-lime.svg) left 50%/16px 11px no-repeat}
/* closing CTA: the mark above "¿Hablamos?", with a lime shine sweeping across it. The mark is a real element
   (span.cta-mark, the first child of every .cta-panel) so the shine moves with transform inside its shape, on the
   compositor: the same sweep as the earlier background-position one (the band is 320% of the mark wide and travels
   140.8px, 68.75% of itself), without waking the main thread every frame */
html.look-v5 .cta-panel::before{display:none}
html.look-v5 .cta-mark{display:block;position:relative;width:64px;height:42px;margin:0 auto 28px;overflow:hidden;background:var(--ink);
  -webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat}
html.look-v5 .cta-mark::before{content:'';position:absolute;top:0;left:0;width:320%;height:100%;
  background:linear-gradient(110deg,var(--ink) 38%,var(--lime) 50%,var(--ink) 62%);animation:markShine 3.6s var(--ease) infinite}
@keyframes markShine{0%,35%{transform:translateX(-68.75%)}75%,100%{transform:none}}
/* floating "Habla con Noriu" button: the mark as its icon */
html.look-v5 .chat-fab::before{content:'';flex:0 0 18px;width:18px;height:12px;background:currentColor;
  -webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat}
@media (prefers-reduced-motion:reduce){html.look-v5 .cta-mark::before{display:none}}

/* header menu icons: a precise black-and-white set (24px grid, thin 1.4 stroke, drawn per product / sector in the
   HTML) on white tiles with a hairline; the tile turns black with a white icon on hover */
html.look-v5 .nav__menu .fc-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:10px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px #E3E3DE;transition:background .18s var(--ease-quick),color .18s var(--ease-quick)}
html.look-v5 .nav__menu .fc-icon svg{display:block;width:20px;height:20px;stroke:currentColor;stroke-width:1.4}
html.look-v5 .nav__links .nav__menu a:hover .fc-icon{background:var(--ink);color:#fff;box-shadow:none}

/* while a header menu is open (hover / keyboard focus, or the phone menu), the rest of the page sits under a soft black
   mask so the choice of product / sector is the only thing in focus; the header stays above it */
html.look-v5 .nav{z-index:130}
html.look-v5 .topbar{z-index:131}

/* ------------------------------------------------------------------ heroes, v5.1: deep, saturated, moving, grainy
   Every hero: a dark forest-green → teal base with large, very soft lime / teal light that drifts slowly; behind the
   text a page-specific painting, blurred well past recognition, adds texture (soft-light blend, drifting too); a
   visible grain on top. Text is white, cards stay white. Motion stops for prefers-reduced-motion. */
html.look-v5{--hero-deep:linear-gradient(160deg,#08241C 0%,#0C3528 48%,#071E18 100%);
  --hero-blobs:radial-gradient(58% 70% at 84% 14%,rgba(218,242,76,.34),rgba(218,242,76,.12) 45%,transparent 78%),
    radial-gradient(64% 74% at 10% 92%,rgba(32,164,138,.42),rgba(32,164,138,.14) 48%,transparent 80%),
    radial-gradient(48% 58% at 56% 62%,rgba(112,192,84,.2),transparent 78%)}
html.look-v5 body[data-page="index"]{--soft:url(../img/art/soft-hub-2400.webp?v=20261003)}
html.look-v5 body[data-page="contact"]{--soft:url(../img/art/soft-coast-2400.webp?v=20261003)}
html.look-v5 .hero-panel,html.look-v5 body:is([data-page],[data-page]) .hero-panel,html.look-v5 .contact-hero{
  background:var(--hero-blobs),#08241C var(--hero-deep);background-size:160% 160%,160% 160%,160% 160%,100% 100%;
  background-position:0% 0%,100% 100%,50% 50%,0 0;color:#fff;animation:heroLight 30s ease-in-out infinite alternate}
@keyframes heroLight{0%{background-position:0% 0%,100% 100%,40% 60%,0 0}50%{background-position:30% 20%,70% 80%,60% 40%,0 0}100%{background-position:10% 40%,90% 60%,50% 50%,0 0}}
/* the blurred painting: texture only, never a picture */
html.look-v5 .hero-panel > .hero-bg::before,html.look-v5 body:is([data-page],[data-page]) .hero-panel > .hero-bg::before{display:block!important;content:'';position:absolute;inset:-10%;left:-10%;bottom:-10%;width:auto;height:auto;z-index:-2;pointer-events:none;
  background:var(--soft,none) center bottom/cover no-repeat;scale:var(--flip,1) 1;filter:blur(18px) saturate(1.2);mix-blend-mode:soft-light;opacity:.75;
  transform:none;animation:heroDrift 26s ease-in-out infinite alternate;will-change:transform}
@keyframes heroDrift{0%{transform:translate3d(-2.5%,1.5%,0) scale(1.03)}50%{transform:translate3d(1.5%,-1.5%,0) scale(1.08)}100%{transform:translate3d(3%,2%,0) scale(1.05)}}
html.look-v5 .hero-panel > .hero-bg::after,html.look-v5 body:is([data-page],[data-page]) .hero-panel > .hero-bg::after{display:block!important;content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--grain);opacity:.3;mix-blend-mode:overlay}
@media (prefers-reduced-motion:reduce){html.look-v5 .hero-panel,html.look-v5 .hero-panel > .hero-bg::before{animation:none!important}}
/* type and controls on the dark hero */
html.look-v5 .hero-panel .h1{color:#fff}
html.look-v5 .hero-panel .lead{color:rgba(255,255,255,.8)!important}
html.look-v5 .hero-panel .micro{color:rgba(255,255,255,.6)!important}
html.look-v5 .hero-panel .lockup-pill{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html.look-v5 .hero-panel .lockup-pill .fc-icon{background:var(--lime)}
html.look-v5 .hero-panel :is(.btn--glass,.btn--outline,.btn--light){background:rgba(255,255,255,.1)!important;color:#fff!important;border:1px solid rgba(255,255,255,.3)!important;-webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important}
html.look-v5 .hero-panel :is(.btn--glass,.btn--outline,.btn--light):hover{background:rgba(255,255,255,.18)!important;border-color:rgba(255,255,255,.5)!important}
html.look-v5 .contact-hero .contact-hero__intro{color:#fff}
/* white cards inside a hero keep dark text (the Contacto form, product / sector cards, the chat demo) */
html.look-v5 .hero-panel :is(.form-card,.art-card,.demo-chat,.float-card,.jt a){color:var(--ink)}

/* ------------------------------------------------------------------ heroes, v5.2: the artwork itself, in deeper colours
   Products, Productos, Sectores, the sector pages and Contacto show their blurred painting (the same images as the sector
   cards) at full presence, tinted darker: a mid forest-green light is multiplied over it (white sky → deep green, lime →
   darker yellow-green, sea → deep teal), so the scene keeps its shapes and colours, only deeper. A soft scrim on the
   text side keeps the white type readable; the light inside the tint moves slowly and the painting drifts. */
html.look-v5 body:is([data-page="services"],[data-page="web"],[data-page="private"],[data-page="scan"],[data-page="sectors"],[data-page^="sec-"],[data-page="contact"]) .hero-panel{animation:none}
html.look-v5 body:is([data-page="services"],[data-page="web"],[data-page="private"],[data-page="scan"],[data-page="sectors"],[data-page^="sec-"],[data-page="contact"]) .hero-panel > .hero-bg::before{
  inset:-6%;left:-6%;bottom:-6%;filter:saturate(1.35) contrast(1.15);mix-blend-mode:normal;opacity:1;
  background:linear-gradient(var(--scrim-dir,90deg),rgb(var(--sc) / .66) 0%,rgb(var(--sc) / .36) 42%,rgb(var(--sc) / 0) 68%),
    linear-gradient(180deg,rgb(var(--sc) / .28) 0%,rgb(var(--sc) / 0) 45%),
    radial-gradient(70% 80% at 30% 25%,var(--t1) 0%,var(--t2) 50%,var(--t3) 100%),
    var(--soft) center bottom/cover no-repeat;
  background-size:100% 100%,100% 100%,170% 170%,cover;background-position:0 0,0 0,0% 0%,center bottom;
  background-blend-mode:normal,normal,multiply,normal;
  animation:heroDrift 28s ease-in-out infinite alternate,heroTint 16s ease-in-out infinite alternate}
@keyframes heroTint{0%{background-position:0 0,0 0,0% 0%,center bottom}50%{background-position:0 0,0 0,60% 35%,center bottom}100%{background-position:0 0,0 0,100% 100%,center bottom}}
/* each page its own deep hue (the home keeps its green): tint light → mid → edge, and the scrim colour */
html.look-v5 body{--t1:#78BB92;--t2:#468769;--t3:#215645;--sc:4 22 16}
html.look-v5 body[data-page="sectors"]{--t1:#E99B6C;--t2:#B4542F;--t3:#5E2312;--sc:34 11 5}
/* Inmobiliarias: Mediterranean, deep azure sea with a terracotta accent in the light */
html.look-v5 body[data-page="sec-inmo"]{--t1:#F2CFA2;--t2:#2A7DB6;--t3:#0C3A62;--sc:3 17 33;--tc:74% 34%}
html.look-v5 body[data-page="sec-gestoria"]{--t1:#D2A452;--t2:#8C5A18;--t3:#3B2207;--sc:26 14 2}
html.look-v5 body[data-page="sec-legal"]{--t1:#DB8D93;--t2:#9B3B4A;--t3:#4A1420;--sc:30 6 11}
html.look-v5 body:is([data-page="services"],[data-page="web"],[data-page="sec-ayto"]){--t1:#93A6EA;--t2:#4E5FBA;--t3:#212862;--sc:9 11 34}
html.look-v5 body:is([data-page="private"],[data-page="sec-clinica"]){--t1:#72C4C6;--t2:#2D7F88;--t3:#11424A;--sc:3 19 23}
html.look-v5 body:is([data-page="scan"],[data-page="contact"]){--t1:#C690D0;--t2:#83478E;--t3:#3C1846;--sc:24 7 28}
/* a complementary accent per hue for the bokeh light */
html.look-v5 body{--c2:#F2A25C}
html.look-v5 body[data-page="sectors"]{--c2:#5FB8D6}
html.look-v5 body[data-page="sec-inmo"]{--c2:#E8915F;--bk:240 150 90}
html.look-v5 body[data-page="sec-gestoria"]{--c2:#7E8CE0}
html.look-v5 body[data-page="sec-legal"]{--c2:#6FD0B8}
html.look-v5 body:is([data-page="services"],[data-page="web"],[data-page="sec-ayto"]){--c2:#F59A6B}
html.look-v5 body:is([data-page="private"],[data-page="sec-clinica"]){--c2:#F28C7C}
html.look-v5 body:is([data-page="scan"],[data-page="contact"]){--c2:#E7D35A}
/* the mirrored pages flip the whole layer, so their scrim is drawn the other way round to land on the text side */
html.look-v5 body:is([data-page="sectors"],[data-page="sec-clinica"],[data-page="sec-ayto"]){--scrim-dir:270deg}
@media (prefers-reduced-motion:reduce){html.look-v5 .hero-panel > .hero-bg::before{animation:none!important}}


/* ------------------------------------------------------------------ heroes, v5.3: texture and organic motion
   On the artwork heroes (not the home): (1) the sharp painting, real brush strokes, in the site palette
   (paint_strips.html?scene=…&full=1&tone=lime → full-*-lime), is soft-lit over its blurred version, so the scene
   carries painterly texture; (2) soft light in the page's hue, lime and white flows slowly across the hero; (3) very
   faint flowing lines add a calm-tech contour feel and drift sideways; (4) a stronger film grain shifts gently. */
html.look-v5 body[data-page="services"]{--paint:url(../img/art/calm-hub-lime-2400.webp?v=20261003)}
html.look-v5 body[data-page="web"]{--paint:url(../img/art/full-sea-lime-2400.webp?v=20261003)}
html.look-v5 body[data-page="private"]{--paint:url(../img/art/full-cove-lime-2400.webp?v=20261003)}
html.look-v5 body[data-page="scan"]{--paint:url(../img/art/full-clouds-lime-2400.webp?v=20261003)}
html.look-v5 body[data-page="sectors"]{--paint:url(../img/art/full-coast-lime-2400.webp?v=20261003)}
html.look-v5 body[data-page="sec-gestoria"]{--paint:url(../img/art/full-orchard-lime-2400.webp?v=20261003)}
html.look-v5 body[data-page="sec-inmo"]{--paint:url(../img/art/calm-villa-lime-2400.webp?v=20261004d)}
html.look-v5 body[data-page="sec-legal"]{--paint:url(../img/art/full-arcade-lime-2400.webp?v=20261003)}
html.look-v5 body[data-page="sec-clinica"]{--paint:url(../img/art/full-lagoon-lime-2400.webp?v=20261003)}
html.look-v5 body[data-page="sec-ayto"]{--paint:url(../img/art/full-village-lime-2400.webp?v=20261003)}
html.look-v5 body[data-page="contact"]{--paint:url(../img/art/full-coast-lime-2400.webp?v=20261003)}
html.look-v5 body:is([data-page="services"],[data-page="web"],[data-page="private"],[data-page="scan"],[data-page="sectors"],[data-page^="sec-"],[data-page="contact"]) .hero-panel > .hero-bg::before{
  background:linear-gradient(var(--scrim-dir,90deg),rgb(var(--sc) / .74) 0%,rgb(var(--sc) / .42) 42%,rgb(var(--sc) / 0) 70%),
    linear-gradient(180deg,rgb(var(--sc) / .3) 0%,rgb(var(--sc) / 0) 45%),
    radial-gradient(70% 80% at var(--tc,30% 25%),color-mix(in srgb,var(--t1) 90%,white) 0%,var(--t2) 50%,var(--t3) 100%),
    var(--paint) center bottom/cover no-repeat,
    var(--soft) center bottom/cover no-repeat;
  background-size:100% 100%,100% 100%,170% 170%,cover,cover;background-position:0 0,0 0,0% 0%,center bottom,center bottom;
  background-blend-mode:normal,normal,multiply,soft-light,normal}
@keyframes heroTint{0%{background-position:0 0,0 0,0% 0%,center bottom,center bottom}50%{background-position:0 0,0 0,60% 35%,center bottom,center bottom}100%{background-position:0 0,0 0,100% 100%,center bottom,center bottom}}
/* bokeh light (the hero's text column is not positioned, so this sits on the whole hero): soft discs of white, lime,
   the page's hue and a complementary colour, blurred and drifting, like out-of-focus light through leaves */
html.look-v5 body:is([data-page="services"],[data-page="web"],[data-page="private"],[data-page="scan"],[data-page="sectors"],[data-page^="sec-"],[data-page="contact"]) .hero-panel > .wrap:not(.hero-stage)::before{content:'';position:absolute;inset:-25%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 16% 30%,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 6%),
    radial-gradient(circle at 34% 72%,color-mix(in srgb,var(--c2) 75%,transparent) 0,transparent 9%),
    radial-gradient(circle at 62% 16%,rgb(var(--bk,218 242 76) / .6) 0,transparent 7%),
    radial-gradient(circle at 80% 62%,rgba(255,255,255,.42) 0,transparent 11%),
    radial-gradient(circle at 47% 46%,color-mix(in srgb,var(--t1) 65%,transparent) 0,transparent 13%),
    radial-gradient(circle at 88% 28%,color-mix(in srgb,var(--c2) 60%,transparent) 0,transparent 8%),
    radial-gradient(circle at 9% 82%,rgb(var(--bk,218 242 76) / .42) 0,transparent 10%),
    radial-gradient(circle at 70% 88%,rgba(255,255,255,.36) 0,transparent 7%),
    radial-gradient(circle at 25% 9%,color-mix(in srgb,var(--c2) 55%,transparent) 0,transparent 11%),
    radial-gradient(circle at 56% 79%,rgb(var(--bk,218 242 76) / .36) 0,transparent 8%),
    radial-gradient(circle at 92% 84%,color-mix(in srgb,var(--t1) 55%,transparent) 0,transparent 12%),
    radial-gradient(circle at 38% 24%,rgba(255,255,255,.3) 0,transparent 5%),
    radial-gradient(40% 46% at 72% 40%,color-mix(in srgb,var(--c2) 35%,transparent),transparent 72%),
    radial-gradient(42% 48% at 22% 60%,color-mix(in srgb,var(--t1) 40%,transparent),transparent 72%);
  filter:blur(16px);mix-blend-mode:screen;opacity:.4;animation:heroFlow 34s ease-in-out infinite alternate;will-change:transform}
@keyframes heroFlow{0%{transform:translate3d(-6%,4%,0) rotate(-8deg) scale(1)}33%{transform:translate3d(5%,-3%,0) rotate(4deg) scale(1.1)}66%{transform:translate3d(-3%,-5%,0) rotate(10deg) scale(1.04)}100%{transform:translate3d(6%,5%,0) rotate(-3deg) scale(1.12)}}
/* a stronger, gently shifting film grain */
html.look-v5{--grain-c:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feComponentTransfer><feFuncR type='linear' slope='1.9' intercept='-.45'/><feFuncG type='linear' slope='1.9' intercept='-.45'/><feFuncB type='linear' slope='1.9' intercept='-.45'/><feFuncA type='linear' slope='0' intercept='1'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
html.look-v5 body:is([data-page="services"],[data-page="web"],[data-page="private"],[data-page="scan"],[data-page="sectors"],[data-page^="sec-"],[data-page="contact"]) .hero-panel > .hero-bg::after{inset:-60%;left:-60%;bottom:-60%;width:auto;height:auto;background:var(--grain-c);opacity:.5;mix-blend-mode:overlay;animation:heroGrain 1.6s steps(8) infinite}
@keyframes heroGrain{0%{transform:translate(0,0)}12%{transform:translate(-4%,3%)}25%{transform:translate(3%,-5%)}37%{transform:translate(-6%,2%)}50%{transform:translate(5%,4%)}62%{transform:translate(-2%,-4%)}75%{transform:translate(4%,1%)}87%{transform:translate(-3%,5%)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){html.look-v5 body:is([data-page="services"],[data-page="web"],[data-page="private"],[data-page="scan"],[data-page="sectors"],[data-page^="sec-"],[data-page="contact"]) .hero-panel > .hero-bg::after,html.look-v5 body:is([data-page="services"],[data-page="web"],[data-page="private"],[data-page="scan"],[data-page="sectors"],[data-page^="sec-"],[data-page="contact"]) .hero-panel > .wrap::before{animation:none!important}}

/* ------------------------------------------------------------------ heroes, v5.4: Mediterranean
   All artwork heroes share one Mediterranean family: the paintings are repainted with azure sea, pale blue sky, sandstone,
   sand, terracotta-orange greenery and white walls with blue accents (paint_strips.html?scene=…&tone=med → full-*-med /
   calm-*-med and soft-*-med), and each page gets a Mediterranean hue, azure, cobalt, sea teal, a lavender-blue dusk,
   terracotta or ochre. The bokeh glints are terracotta on the blue pages and azure on the warm ones, so every hero has
   some blue and some warmth. */
html.look-v5 body[data-page="services"]{--soft:url(../img/art/soft-hub-med-2400.webp?v=20261004m);--paint:url(../img/art/calm-hub-med-2400.webp?v=20261004m);--t1:#F2CFA2;--t2:#2A7DB6;--t3:#0C3A62;--sc:3 17 33;--c2:#F2D29A;--bk:240 150 90}
html.look-v5 body[data-page="web"]{--soft:url(../img/art/soft-sea-med-2400.webp?v=20261004m);--paint:url(../img/art/full-sea-med-2400.webp?v=20261004m);--t1:#EFC6A4;--t2:#3352B4;--t3:#111F5E;--sc:6 10 36;--c2:#F2D29A;--bk:240 150 90}
html.look-v5 body[data-page="private"]{--soft:url(../img/art/soft-cove-med-2400.webp?v=20261004m);--paint:url(../img/art/full-cove-med-2400.webp?v=20261004m);--t1:#EED2A6;--t2:#1F7F96;--t3:#0A3A4A;--sc:2 18 24;--c2:#F2D29A;--bk:240 150 90}
html.look-v5 body[data-page="scan"]{--soft:url(../img/art/soft-clouds-med-2400.webp?v=20261004m);--paint:url(../img/art/full-clouds-med-2400.webp?v=20261004m);--t1:#F0C2A8;--t2:#5B50B2;--t3:#231C5C;--sc:12 8 36;--c2:#F2D29A;--bk:240 160 110}
html.look-v5 body[data-page="sectors"]{--soft:url(../img/art/soft-coast-med-2400.webp?v=20261004m);--paint:url(../img/art/full-coast-med-2400.webp?v=20261004m);--t1:#EFA57C;--t2:#B5532F;--t3:#123566;--sc:10 16 36;--c2:#7FA3E6;--bk:140 200 235}
html.look-v5 body[data-page="sec-gestoria"]{--soft:url(../img/art/soft-orchard-med-2400.webp?v=20261004m);--paint:url(../img/art/full-orchard-med-2400.webp?v=20261004m);--t1:#F2CF8C;--t2:#BC8433;--t3:#123566;--sc:10 16 36;--tc:76% 30%;--c2:#7FA3E6;--bk:140 200 235}
html.look-v5 body[data-page="sec-inmo"]{--soft:url(../img/art/soft-villa-med-2400.webp?v=20261004m);--paint:url(../img/art/calm-villa-med-2400.webp?v=20261004m);--t1:#F2CFA2;--t2:#2A7DB6;--t3:#0C3A62;--sc:3 17 33;--c2:#F2D29A;--bk:240 150 90}
html.look-v5 body[data-page="sec-legal"]{--soft:url(../img/art/soft-arcade-med-2400.webp?v=20261004m);--paint:url(../img/art/full-arcade-med-2400.webp?v=20261004m);--t1:#EFC6A4;--t2:#3352B4;--t3:#111F5E;--sc:6 10 36;--c2:#F2D29A;--bk:240 150 90}
html.look-v5 body[data-page="sec-clinica"]{--soft:url(../img/art/soft-lagoon-med-2400.webp?v=20261004m);--paint:url(../img/art/full-lagoon-med-2400.webp?v=20261004m);--t1:#EED2A6;--t2:#1F7F96;--t3:#0A3A4A;--sc:2 18 24;--c2:#F2D29A;--bk:240 150 90}
html.look-v5 body[data-page="sec-ayto"]{--soft:url(../img/art/soft-village-med-2400.webp?v=20261004m);--paint:url(../img/art/full-village-med-2400.webp?v=20261004m);--t1:#EFA57C;--t2:#B5532F;--t3:#123566;--sc:10 16 36;--c2:#7FA3E6;--bk:140 200 235}
html.look-v5 body[data-page="contact"]{--soft:url(../img/art/soft-coast-med-2400.webp?v=20261004m);--paint:url(../img/art/full-coast-med-2400.webp?v=20261004m);--t1:#F2CFA2;--t2:#2A7DB6;--t3:#0C3A62;--sc:3 17 33;--c2:#F2D29A;--bk:240 150 90}
html.look-v5 .poster[href="ia-para-gestorias.html"] .poster__art{background:#F4F1EA url(../img/art/soft-orchard-med-1200.webp?v=20261004m) center bottom/cover no-repeat!important}
html.look-v5 .poster[href="ia-para-inmobiliarias.html"] .poster__art{background:#F4F1EA url(../img/art/soft-villa-med-1200.webp?v=20261004m) center bottom/cover no-repeat!important}
html.look-v5 .poster[href="ia-para-abogados-notarias.html"] .poster__art{background:#F4F1EA url(../img/art/soft-arcade-med-1200.webp?v=20261004m) center bottom/cover no-repeat!important}
html.look-v5 .poster[href="ia-para-clinicas.html"] .poster__art{background:#F4F1EA url(../img/art/soft-lagoon-med-1200.webp?v=20261004m) center bottom/cover no-repeat!important}
html.look-v5 .poster[href="ia-para-ayuntamientos.html"] .poster__art{background:#F4F1EA url(../img/art/soft-village-med-1200.webp?v=20261004m) center bottom/cover no-repeat!important}
html.look-v5 .nav__links .nav__menu .nav__menu-all{background-image:url(../img/art/soft-hub-med-1200.webp?v=20261004m)}
html.look-v5 .nav__links .nav__menu--sectors .nav__menu-all{background-image:url(../img/art/soft-coast-med-1200.webp?v=20261004m)}

/* ------------------------------------------------------------------ heroes, v5.5
   Home: one big flowering bush with the footer's flowers (design/tools/paint_bush.html?soft=1), painted in the hero
   gradient's greens and lit from the upper right by the lime light, blurred. It is laid over the moving gradient with
   a mask that fades it out towards the text (left on desktop, top on mobile), so the headline keeps the clean moving
   gradient and the bush with its blossoms fills the side of the chat demo; it drifts with the hero. Same moving, coloured grain as the artwork heroes. */
html.look-v5 body[data-page="index"]{--soft:url(../img/art/soft-bush-2400.webp?v=20261005b)}
html.look-v5 body[data-page="index"] .hero-panel > .hero-bg::before{inset:-6%;left:-6%;bottom:-6%;background:var(--soft) right bottom/cover no-repeat;
  filter:blur(5px) saturate(1.1);mix-blend-mode:normal;opacity:1;
  -webkit-mask-image:linear-gradient(90deg,transparent 22%,rgba(0,0,0,.55) 42%,#000 60%);mask-image:linear-gradient(90deg,transparent 22%,rgba(0,0,0,.55) 42%,#000 60%)}
@media (max-width:1020px){html.look-v5 body[data-page="index"] .hero-panel > .hero-bg::before{
  -webkit-mask-image:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.6) 52%,#000 72%);mask-image:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.6) 52%,#000 72%)}}
html.look-v5 body[data-page="index"] .hero-panel > .hero-bg::after{inset:-60%;left:-60%;bottom:-60%;width:auto;height:auto;background:var(--grain-c);opacity:.45;mix-blend-mode:overlay;animation:heroGrain 1.6s steps(8) infinite}
@media (prefers-reduced-motion:reduce){html.look-v5 body[data-page="index"] .hero-panel > .hero-bg::after{animation:none!important}}
/* Inmobiliarias: bougainvillea instead of blue, the villa repainted with no blue at all (paint_strips.html?scene=villa
   &tone=rosa: blush sky, warm haze, sandstone, magenta-coral plants, white walls with mauve shadows) under a deep berry
   tint; berry against the lime highlight and white text is the strongest contrast of the set. */
html.look-v5 body[data-page="sec-inmo"]{--soft:url(../img/art/soft-villa-rosa-2400.webp?v=20261005a);--paint:url(../img/art/calm-villa-rosa-2400.webp?v=20261005a);
  --t1:#E2A0A4;--t2:#86244F;--t3:#330A20;--sc:30 5 18;--c2:#F2D29A;--bk:255 176 150}
html.look-v5 .poster[href="ia-para-inmobiliarias.html"] .poster__art{background:#F7EFEC url(../img/art/soft-villa-rosa-1200.webp?v=20261005a) center bottom/cover no-repeat!important}

/* ------------------------------------------------------------------ v5.6: titles and motion
   Titles: heavier (600) and larger, tighter tracking, so they read first. */
html.look-v5 .h1{font-weight:600;letter-spacing:-.045em;line-height:1.02}
html.look-v5 .h2{font-weight:600;letter-spacing:-.04em;line-height:1.04;font-size:clamp(32px,3.9vw,56px)}
html.look-v5 :is(h3,h4,.h3){font-weight:600;letter-spacing:-.022em}
html.look-v5 .h3{font-size:clamp(20px,1.7vw,24px)}
@media (min-width:1021px){
  html.look-v5 body[data-page="index"] .hero-panel .h1{font-size:clamp(46px,4.9vw,74px)}
  html.look-v5 body:is([data-page="web"],[data-page="private"],[data-page="scan"],[data-page="sectors"],[data-page^="sec-"]) .hero-panel .h1{font-size:clamp(42px,4.2vw,62px)}
  html.look-v5 body[data-page="services"] .hero-panel .h1,html.look-v5 .contact-hero .h1{font-size:clamp(44px,4.6vw,68px)}
}

/* Page changes: a cross-document view transition. The header, its top strip (on every page) and the chat button stay
   perfectly still, the hero panel morphs from one page's hero into the next in one piece (its painting and copy
   cross-fade), and the rest of the page cross-fades, a true, unhurried cross-fade (both start together,
   no slide), no white flash. Pages are also prerendered on hover (speculation rules in each <head>), so the next page
   is ready the moment it is clicked. While the transition runs, the
   hero's own entrance (word-by-word headline, fade-ins) is skipped so nothing pops in afterwards. Hero paintings are
   preloaded in each page's <head>. Browsers without it: a short fade (main.js + below). */
@view-transition{navigation:auto;types:noriu-page}
html.look-v5 .topbar{view-transition-name:noriu-topbar}
html.look-v5 .nav{view-transition-name:noriu-nav}
html.look-v5 .chat-fab{view-transition-name:noriu-fab}
html.look-v5 .hero-panel{view-transition-name:noriu-hero}
::view-transition-group(*){animation-duration:.6s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
::view-transition-old(noriu-topbar),::view-transition-old(noriu-nav),::view-transition-old(noriu-fab){display:none}
::view-transition-new(noriu-topbar),::view-transition-new(noriu-nav),::view-transition-new(noriu-fab){animation:none}
::view-transition-old(noriu-hero),::view-transition-new(noriu-hero){height:100%;object-fit:none;object-position:50% 0;overflow:clip}
::view-transition-old(noriu-hero){animation:vtFadeOut .45s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(noriu-hero){animation:vtFadeIn .55s cubic-bezier(.4,0,.2,1) both}
::view-transition-old(root){animation:vtFadeOut .4s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:vtFadeIn .5s cubic-bezier(.4,0,.2,1) both}
@keyframes vtFadeOut{to{opacity:0}}
@keyframes vtFadeIn{from{opacity:0}}
html.look-v5 body.is-loading{opacity:1}
html.look-v5 body.is-ready{transition:none}
html.look-v5 body.page-leaving{opacity:0;transition:opacity .2s cubic-bezier(.4,0,1,1)}
@supports not (view-transition-class:a){html.look-v5 body{animation:pageIn .5s var(--ease) backwards}}
@keyframes pageIn{from{opacity:0}}
html.look-v5 .page-fade{display:none}
html.smooth-wheel{scroll-behavior:auto}

/* Header menus (desktop, with hover intent from main.js; `.nav.nav` keeps the weight these rules need and applies from
   the first paint, so a pointer resting on the header while a page loads never flashes a menu): no fades, the panel
   lives behind the white bar (z-index -1 inside the header's stacking context) and slides down out of it when it opens
   and back up behind it when it closes, in one piece with its rounded corners and shadow; the bar's corners round
   along with it. Its items settle in one after another; switching from one menu to the other swaps it in place.
   (A clip-path roll was tried first: it cut the panel's rounded bottom flat and didn't match the bar.) */
@media (min-width:1021px) and (hover:hover) and (pointer:fine){
  html.look-v5 .nav.nav .nav__links .nav__menu{opacity:1;visibility:hidden;z-index:-1;clip-path:none;
    transform:translateY(calc(-100% - 24px));transition:transform .5s cubic-bezier(.32,.72,0,1),visibility 0s linear .5s}
  html.look-v5 .nav.nav :is(.nav__dd.open,.nav__dd:has(:focus-visible)) .nav__menu{visibility:visible;
    transform:none;transition:transform .55s cubic-bezier(.32,.72,0,1),visibility 0s}
  html.look-v5 .nav.nav.menu-switch .nav__links .nav__menu{transition:none}
  html.look-v5 .nav.nav .nav__dd.open .nav__menu > *{animation:menuItem .6s var(--ease) backwards}
  html.look-v5 .nav.nav .nav__dd.open .nav__menu > :nth-child(2){animation-delay:.03s}
  html.look-v5 .nav.nav .nav__dd.open .nav__menu > :nth-child(3){animation-delay:.06s}
  html.look-v5 .nav.nav .nav__dd.open .nav__menu > :nth-child(4){animation-delay:.09s}
  html.look-v5 .nav.nav .nav__dd.open .nav__menu > :nth-child(5){animation-delay:.12s}
  html.look-v5 .nav.nav .nav__dd.open .nav__menu > :nth-child(n+6){animation-delay:.15s}
  @keyframes menuItem{from{transform:translateY(-10px)}}
  /* switching from one open menu to the other: the panel stays put and its items only fade in */
  html.look-v5 .nav.nav.menu-switch .nav__dd.open .nav__menu > *{animation-name:menuFade;animation-duration:.4s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
  @keyframes menuFade{from{opacity:0}}
  html.look-v5 .nav.nav:not(.menu-open) > .nav__inner{border-radius:0 0 22px 22px;transition:border-radius .35s cubic-bezier(.32,.72,0,1) .1s}
  html.look-v5 .nav.nav.menu-open > .nav__inner{border-radius:0;transition:border-radius .2s cubic-bezier(.32,.72,0,1)}
}

/* Hover and press: one easing everywhere (fast start, long soft settle), slower than before so nothing snaps.
   Buttons lift 1px on hover and press down to 96%; clickable cards lift and their art breathes; arrows slide. */
html.look-v5 :is(.btn,.nav__cta,.nav__cta2,.chat-fab,.tabs-nav button,.opts button,.lang button,.footer__social a,.footer__social button,.addon-chips a,.channel,.q-opt,.q-prod__box){
  transition:background-color .4s var(--ease),background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease),filter .4s var(--ease)}
html.look-v5 :is(.nav__links > a,.nav__ddbtn,.nav__links .nav__menu a,.nav__menu .fc-icon,.footer__cols a,.topbar a,.faq-item summary){transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
html.look-v5 :is(.btn,.nav__cta,.nav__cta2,.chat-fab):hover{transform:translateY(-1px)}
html.look-v5 :is(.btn,.nav__cta,.nav__cta2,.chat-fab,.tabs-nav button,.opts button,.footer__social a,.footer__social button,.addon-chips a):active{transform:scale(.96);transition-duration:.12s}
html.look-v5 :is(.channel,.q-opt,.q-prod__box,.nav__links .nav__menu a):active{transform:scale(.985);transition-duration:.12s}
html.look-v5 :is(.poster,.jt a,a.svc-card,a.stack-card){transition:transform .6s var(--ease),box-shadow .6s var(--ease),background-color .45s var(--ease)}
html.look-v5 :is(.poster,.jt a):hover{transform:translateY(-6px)}
html.look-v5 :is(a.svc-card,a.stack-card):hover{transform:translateY(-4px);box-shadow:0 24px 50px -32px rgba(14,15,17,.35)}
html.look-v5 :is(.poster,.jt a,a.svc-card,a.stack-card):active{transform:translateY(-2px) scale(.985);transition-duration:.15s}
html.look-v5 .poster__art{transition:transform 1.1s var(--ease)}
html.look-v5 .poster:hover .poster__art{transform:scale(1.035)}
html.look-v5 :is(.btn,.link,.poster__foot,.channel) .arr,html.look-v5 .nav__cta svg{transition:transform .5s var(--ease)}
html.look-v5 :is(.btn:hover,.link:hover,a:hover > .link,.poster:hover .poster__foot,.channel:hover,.svc-card:hover .link,.stack-card:hover .link) .arr{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){
  html.look-v5 :is(.btn,.nav__cta,.nav__cta2,.chat-fab,.poster,.jt a,a.svc-card,a.stack-card,.poster__art):is(:hover,:active){transform:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ------------------------------------------------------------------ v5.7: header links, contrast, reading size
   Header links: dark grey, the current page in black (no underline); on desktop one soft pill glides from link to
   link under the pointer (main.js adds .nav__pill), sized to the link, not to the bar. */
@media (min-width:1021px){
  html.look-v5 :is(.nav__links > a,.nav__ddbtn){color:#4D5157;align-self:center;position:relative;z-index:1;transition:color .35s var(--ease)}
  html.look-v5 :is(.nav__links > a,.nav__ddbtn):hover,html.look-v5 .nav__dd.open .nav__ddbtn{color:var(--ink)}
  html.look-v5 :is(.nav__links > a.active,.nav__ddbtn.active){color:var(--ink);font-weight:500;text-decoration:none}
  html.look-v5 .nav.nav :is(.nav__links > a,.nav__ddbtn,.nav__links > a:hover,.nav__dd:hover .nav__ddbtn,.nav__dd:focus-within .nav__ddbtn){background:none}
  html.look-v5 .nav__pill{position:absolute;left:0;top:0;z-index:0;width:var(--pw,0);height:var(--ph,0);border-radius:10px;background:#F1F0EA;
    transform:translate3d(var(--px,0),var(--py,0),0);opacity:0;pointer-events:none;
    transition:transform .5s var(--ease),width .5s var(--ease),height .5s var(--ease),opacity .3s var(--ease)}
  html.look-v5 .nav__pill.on{opacity:1}
  html.look-v5 .nav__pill.jump{transition:opacity .3s var(--ease)}
}

/* Contrast: secondary greys darkened so small text passes WCAG AA on white and on the light panels (the light grey
   #8E9197 was 3.2:1); success pills darker green; hero copy whiter; highlighted words in headings stay lime only on
   the dark heroes and are black on light backgrounds (lime on a pale panel was ~1:1). */
html.look-v5{--muted:#4D5157;--muted-2:#62666D;--ui-ok:#0B6A33}
html.look-v5 :is(.h1,.h2) .blue{color:var(--ink)!important}
html.look-v5 :is(.hero-panel,.contact-hero,.cta-dark) :is(.h1,.h2) .blue{color:var(--lime)!important}
html.look-v5 .hero-panel .lead,html.look-v5 .contact-hero .lead{color:rgba(255,255,255,.92)!important}
html.look-v5 :is(.hero-panel,.contact-hero) .micro{color:rgba(255,255,255,.8)!important}
html.look-v5 :is(.cta-panel p,.private-band .lead){color:#3A3D43}
@media (max-width:1020px){                                 /* stacked heroes: the text sits on top, so darken the top */
  html.look-v5 body:is([data-page="services"],[data-page="web"],[data-page="private"],[data-page="scan"],[data-page="sectors"],[data-page^="sec-"],[data-page="contact"]){--scrim-dir:180deg}
}

/* Reading size: paragraphs one step larger everywhere (cards 14.5 → 16px, section text 16.5 → 18px, leads 17 → 19px). */
html.look-v5 .lead{font-size:clamp(17px,1.32vw,19px);line-height:1.6}
html.look-v5 .hero-panel .lead,html.look-v5 .contact-hero .lead{font-size:clamp(17px,1.32vw,19px)}
html.look-v5 :is(.hero-panel,.contact-hero) .micro{font-size:14px}
html.look-v5 :is(.flow-text p,.tab-panel > div > p,.cta-panel p){font-size:clamp(16.5px,1.25vw,18px);line-height:1.65}
html.look-v5 :is(.faq-a > p,.faq-item > p){font-size:17px}
html.look-v5 :is(.stack-card p,.incl-card p,.step p,.talk-card > p,.svc-card > p,.sc > p,.footer__brand p,.checklist li,.ticks li){font-size:16px;line-height:1.6}
html.look-v5 :is(.tier .for,.poster__pain){font-size:15.5px;line-height:1.55}
html.look-v5 :is(.st-note,.src-line,.t-note,.q-res__note){font-size:13.5px}
html.look-v5 :is(.hero-panel,.contact-hero) :is(.form-card,.art-card,.demo-chat,.float-card) .micro{color:var(--muted-2)!important;font-size:13px}
/* following a link: the menu closes at once, so the outgoing page never shows it */
html.nav-instant .nav__menu,html.nav-instant .nav__menu > *,html.nav-instant .nav__pill,html.nav-instant .nav__inner{transition:none!important;animation:none!important}
/* the header height is known up front (strip + bar on every page), so heroes have their final size from the first
   paint instead of resizing when main.js measures it, no jump while a page change fades in */
html.look-v5{--hdr:calc(var(--tb-h) + var(--bar-h))}
@media (max-width:1020px){html.look-v5{--hdr:124px}}

/* ------------------------------------------------------------------ v5.8: hero motion on the GPU only
   The heroes kept repainting every frame (the tint light and the home gradient moved by background-position, the bokeh
   was blurred while it rotated, the grain layer was ~5× the hero), which made page changes and scrolling heavy. Now
   every moving layer only moves (transform), nothing is re-blurred or re-blended per frame: the paintings still drift,
   the bokeh still floats (its softness drawn into the gradients instead of a blur filter), the grain still shimmers. */
html.look-v5 .hero-panel,html.look-v5 body:is([data-page],[data-page]) .hero-panel,html.look-v5 .contact-hero{animation:none}
html.look-v5 body:is([data-page="services"],[data-page="web"],[data-page="private"],[data-page="scan"],[data-page="sectors"],[data-page^="sec-"],[data-page="contact"]) .hero-panel > .hero-bg::before{animation:heroDrift 28s ease-in-out infinite alternate}
html.look-v5 body:is([data-page="services"],[data-page="web"],[data-page="private"],[data-page="scan"],[data-page="sectors"],[data-page^="sec-"],[data-page="contact"]) .hero-panel > .wrap:not(.hero-stage)::before{filter:none;mix-blend-mode:normal;opacity:.42;
  background:radial-gradient(circle at 16% 30%,rgba(255,255,255,0.55) 0,rgba(255,255,255,0.22) 2.7%,transparent 9.0%),radial-gradient(circle at 34% 72%,color-mix(in srgb,var(--c2) 75%,transparent) 0,color-mix(in srgb,var(--c2) 30%,transparent) 4.0%,transparent 13.5%),radial-gradient(circle at 62% 16%,rgb(var(--bk,218 242 76) / 0.6) 0,rgb(var(--bk,218 242 76) / 0.24) 3.1%,transparent 10.5%),radial-gradient(circle at 80% 62%,rgba(255,255,255,0.42) 0,rgba(255,255,255,0.17) 5.0%,transparent 16.5%),radial-gradient(circle at 47% 46%,color-mix(in srgb,var(--t1) 65%,transparent) 0,color-mix(in srgb,var(--t1) 26%,transparent) 5.9%,transparent 19.5%),radial-gradient(circle at 88% 28%,color-mix(in srgb,var(--c2) 60%,transparent) 0,color-mix(in srgb,var(--c2) 24%,transparent) 3.6%,transparent 12.0%),radial-gradient(circle at 9% 82%,rgb(var(--bk,218 242 76) / 0.42) 0,rgb(var(--bk,218 242 76) / 0.17) 4.5%,transparent 15.0%),radial-gradient(circle at 70% 88%,rgba(255,255,255,0.36) 0,rgba(255,255,255,0.14) 3.1%,transparent 10.5%),radial-gradient(circle at 25% 9%,color-mix(in srgb,var(--c2) 55%,transparent) 0,color-mix(in srgb,var(--c2) 22%,transparent) 5.0%,transparent 16.5%),radial-gradient(circle at 56% 79%,rgb(var(--bk,218 242 76) / 0.36) 0,rgb(var(--bk,218 242 76) / 0.14) 3.6%,transparent 12.0%),radial-gradient(circle at 92% 84%,color-mix(in srgb,var(--t1) 55%,transparent) 0,color-mix(in srgb,var(--t1) 22%,transparent) 5.4%,transparent 18.0%),radial-gradient(circle at 38% 24%,rgba(255,255,255,0.3) 0,rgba(255,255,255,0.12) 2.2%,transparent 7.5%),radial-gradient(40% 46% at 72% 40%,color-mix(in srgb,var(--c2) 35%,transparent),transparent 72%),radial-gradient(42% 48% at 22% 60%,color-mix(in srgb,var(--t1) 40%,transparent),transparent 72%)}
html.look-v5 body:is([data-page="services"],[data-page="web"],[data-page="private"],[data-page="scan"],[data-page="sectors"],[data-page^="sec-"],[data-page="contact"]) .hero-panel > .hero-bg::after,html.look-v5 body[data-page="index"] .hero-panel > .hero-bg::after{inset:-8%;left:-8%;bottom:-8%;will-change:transform}
html.look-v5 body[data-page="index"] .hero-panel > .hero-bg::before{filter:none}
html.look-v5 .hero-panel :is(.lockup-pill,.btn--glass,.btn--outline,.btn--light){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.look-v5 .hero-panel .lockup-pill{background:rgba(255,255,255,.14)}

/* ------------------------------------------------------------------ v5.9: hover language (mouse only, html.hover-fx from main.js)
   One calm vocabulary everywhere, all on the same easing:
   · buttons, a touch brighter and 2 % larger, nothing else (calm tech)
   · clickable cards, lift, and a soft lime light follows the cursor across the card (icons inside never change)
   · text links, the underline draws in from the left (inline links keep a faint underline at rest)
   · small things, FAQ plus turns, chips and footer icons fill in ink, the chat button's mark nods */
/* cards: cursor light (under the content: the card is its own stacking context, the light sits at z-index -1) */
html.hover-fx :is(.poster,a.svc-card,a.stack-card,.jt a,a.channel){position:relative;isolation:isolate}
html.hover-fx :is(.poster,a.svc-card,a.stack-card,.jt a,a.channel)::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(218,242,76,.32),rgba(218,242,76,.1) 40%,transparent 70%);transition:opacity .5s var(--ease)}
html.hover-fx :is(.poster,a.svc-card,a.stack-card,.jt a,a.channel):hover::after{opacity:1}
html.hover-fx a.channel:hover{transform:translateY(-2px)}

/* links: the underline draws in */
html.look-v5 :is(.footer__cols a,.link > span:not(.arr),main p a:not([class]),.faq-a a,.src-line a,.st-note a){text-decoration:none;
  background:linear-gradient(currentColor,currentColor) left 100% / 0 1px no-repeat;transition:background-size .5s var(--ease),color .35s var(--ease)}
html.look-v5 :is(main p a:not([class]),.faq-a a,.src-line a,.st-note a){
  background:linear-gradient(currentColor,currentColor) left 100% / 0 1px no-repeat,linear-gradient(color-mix(in srgb,currentColor 35%,transparent),color-mix(in srgb,currentColor 35%,transparent)) left 100% / 100% 1px no-repeat}
html.look-v5 :is(.footer__cols a,main p a:not([class]),.faq-a a,.src-line a,.st-note a):hover,
html.look-v5 :is(.link:hover,a:hover .link) > span:not(.arr){background-size:100% 1px,100% 1px}

/* small things */
html.look-v5 .faq-item summary .plus{transition:background .4s var(--ease),border-color .4s var(--ease),transform .6s var(--ease)}
html.hover-fx .faq-item summary:hover .plus{border-color:var(--ink)}
html.hover-fx .faq-item:not([open]) summary:hover .plus{transform:rotate(90deg)}
html.hover-fx :is(.footer__social a,.footer__social button):hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-2px)}
html.hover-fx :is(.addon-chips a,a.tchip):hover{background:var(--ink);border-color:var(--ink);color:#fff}
html.hover-fx .tabs-nav button:hover:not(.active){background:#F3F2ED;border-color:#D9D8D2;color:var(--ink)}
html.look-v5 .chat-fab::before{transition:transform .6s var(--ease)}
html.hover-fx .chat-fab:hover::before{transform:rotate(-10deg) scale(1.1)}
html.hover-fx .nav__logo img{transition:transform .5s var(--ease)}
html.hover-fx .nav__logo:hover{opacity:1}
html.hover-fx .nav__logo:hover img{transform:translateX(2px)}
/* cards, subtler (v5.9.1): a 2–3px lift, a faint light under the cursor, the art barely moves */
html.look-v5 :is(.poster,.jt a):hover{transform:translateY(-3px)}
html.look-v5 :is(a.svc-card,a.stack-card):hover{transform:translateY(-2px);box-shadow:0 18px 40px -34px rgba(14,15,17,.3)}
html.look-v5 .poster:hover{box-shadow:0 0 0 1px rgba(14,15,17,.14),0 22px 50px -40px rgba(14,15,17,.3)}
html.look-v5 .poster:hover .poster__art{transform:scale(1.015)}
html.look-v5 :is(.poster,.jt a,a.svc-card,a.stack-card):active{transform:translateY(-1px) scale(.992)}
html.hover-fx :is(.poster,a.svc-card,a.stack-card,.jt a,a.channel)::after{background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(218,242,76,.14),rgba(218,242,76,.04) 45%,transparent 70%)}
html.hover-fx a.channel:hover{transform:translateY(-1px)}
/* phone menu button: just the three lines, no circle (organic.css gave it a white disc + ring once scrolled) */
html.look-v5 .burger,html.look-v5 .nav.scrolled .burger{background:none;border-radius:0;box-shadow:none}
/* phones and tablets: no announcement strip, the header starts at the top */
@media (max-width:1020px){html.look-v5 .topbar{display:none}html.look-v5{--hdr:var(--bar-h)}}
/* calm pass (v5.9.2): buttons only brighten a touch and grow 2 %; presses are gentle; nothing lifts, spins, rolls or
   fills, calm tech */
html.look-v5 :is(.btn,.nav__cta,.nav__cta2,.chat-fab):hover{transform:scale(1.02);box-shadow:none}
html.look-v5 :is(.btn--primary,.hero-panel .btn--white,.quote__result .btn--white,.private-band .btn--white):hover{background:var(--lime);filter:brightness(1.06) saturate(1.06)}
html.look-v5 :is(.btn,.nav__cta,.nav__cta2,.chat-fab,.tabs-nav button,.opts button,.footer__social a,.footer__social button,.addon-chips a):active{transform:scale(.98)}
html.look-v5 :is(.channel,.q-opt,.q-prod__box,.nav__links .nav__menu a):active{transform:scale(.99)}
html.look-v5 :is(.btn:hover,.link:hover,a:hover > .link,.poster:hover .poster__foot,.channel:hover,.svc-card:hover .link,.stack-card:hover .link) .arr{transform:translateX(2px)}
html.hover-fx .faq-item:not([open]) summary:hover .plus{transform:none}
html.hover-fx :is(.footer__social a,.footer__social button):hover{background:#fff;border-color:var(--ink);color:var(--ink);transform:none}
html.hover-fx :is(.addon-chips a,a.tchip):hover{background:#F3F2ED;border-color:#CFCFCA;color:var(--ink)}
html.hover-fx .chat-fab:hover::before,html.hover-fx .nav__logo:hover img{transform:none}
/* calm pass 2 (v5.9.3): no cursor-following light (it read as "AI"). Clickable cards only grow 1 % and get a soft,
   low-opacity outer glow; no lift, the art inside doesn't zoom. */
html.hover-fx :is(.poster,a.svc-card,a.stack-card,.jt a,a.channel)::after{content:none}
html.look-v5 :is(.poster,a.svc-card,a.stack-card,.jt a,a.channel){transition:transform .6s var(--ease),box-shadow .6s var(--ease),background-color .45s var(--ease),border-color .45s var(--ease)}
html.look-v5 :is(.poster,.jt a,a.svc-card,a.stack-card):hover{transform:scale(1.01);box-shadow:0 0 0 1px rgba(14,15,17,.08),0 10px 40px -10px rgba(14,15,17,.14)}
html.hover-fx a.channel:hover{transform:scale(1.01);box-shadow:0 8px 30px -10px rgba(14,15,17,.14)}
html.look-v5 .poster:hover .poster__art{transform:none}
html.look-v5 :is(.poster,.jt a,a.svc-card,a.stack-card):active{transform:scale(.995)}

/* ------------------------------------------------------------------ v5.10: "De aquí" band (map section)
   A rounded panel like the Private band, painted: the Mediterranean village (sea, sandstone town, blue domes,
   terracotta trees; full-village-med) softened with a static blur (on ::before, drawn once) and the site grain, washed
   toward white on the text side so the copy stays crisp; the white map card sits on the village. (Tried first and rejected: the washed-out coast
   painting, too pale; a plain sand-to-sea gradient, bland, no texture.) */
html.look-v5 .local-band{position:relative;margin:0 10px;border-radius:var(--radius-stage,28px);overflow:hidden;isolation:isolate;background:#F3EEE6}
html.look-v5 .local-band::before{content:'';position:absolute;inset:-40px;z-index:-2;pointer-events:none;filter:blur(14px);
  background:linear-gradient(90deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.5) 42%,rgba(255,255,255,.08) 72%,rgba(255,255,255,0) 100%),url(../img/art/full-village-med-2400.webp?v=20261004m) 60% 100%/auto 170% no-repeat,#F3EEE6}
html.look-v5 .local-band::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:var(--grain-c);opacity:.35;mix-blend-mode:overlay}
html.look-v5 .local-band .map-card{box-shadow:0 30px 70px -40px rgba(14,15,17,.35),0 0 0 1px rgba(14,15,17,.05)}

/* ------------------------------------------------------------------ v5.11: arriving from another page of the site
   (html.arrived: set in each page's <head> when the referrer is this site, and on a view-transition reveal), the hero
   entrance runs as CSS animations from the very first frame, in step with the page cross-fade: the headline words
   rise, the hero items fade up after them. It no longer waits for the reveal observer (that made it late, and it
   snapped back to hidden when the transition ended); the final state is the resting style, so nothing can vanish.
   The home chat demo starts almost at once. Visitors from outside still get the original entrance. */
html.arrived :is(.hero-panel,.contact-hero) .reveal{opacity:1;transform:none;transition:none;
  animation:heroRise .7s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--d,0ms) * .6 + .1s)}
html.arrived :is(.hero-panel,.contact-hero) .split .w > span{transform:none;transition:none;
  animation:heroWord .85s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0) * 35ms + .08s)}
@keyframes heroRise{from{opacity:0;transform:translateY(14px)}}
@keyframes heroWord{from{transform:translateY(108%)}}
html.arrived .demo-chat.play .chat-body > :nth-child(1){animation-delay:.15s}
html.arrived .demo-chat.play .chat-body > :nth-child(2){animation-delay:.6s}
html.arrived .demo-chat.play .chat-body > :nth-child(3){animation-delay:1.2s}
html.arrived .demo-chat.play .chat-body > :nth-child(4){animation-delay:1.6s}
html.arrived .demo-chat.play .demo-input{animation-delay:1.9s}
/* pricing cards: grow 1 % with a very small, soft outer glow (calm hover) */
html.look-v5 .tier{transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
html.hover-fx .tier:hover{transform:scale(1.01);box-shadow:0 0 0 1px rgba(14,15,17,.05),0 8px 30px -12px rgba(14,15,17,.14)}
html.hover-fx .tier.tier--main:hover{box-shadow:0 18px 50px -22px rgba(14,15,17,.28),0 0 26px -8px rgba(14,15,17,.1)}

/* ------------------------------------------------------------------ v5.12: cookie banner and preferences
   A slim, wide bar centred at the bottom: one line of text with a link to the policy, "Configurar" as a small link,
   then "Rechazar" and "Aceptar" side by side at the same size (the AEPD 2023 guide asks reject to be as visible as
   accept); "Aceptar" wears the lime accent. It rises in calmly, and the chat button steps aside while it shows.
   On phones it stacks. The preferences window: clean rows on hairlines, a close button, the same two-button footer. */
html.look-v5 .cookie-banner{left:0;right:0;bottom:16px;margin:0 auto;width:min(960px,calc(100vw - 32px));display:none;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 20px;
  padding:12px 12px 12px 20px;border:0;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(14,15,17,.06),0 24px 60px -24px rgba(14,15,17,.35)}
html.look-v5 .cookie-banner.show{display:flex;animation:cbIn .6s cubic-bezier(.22,1,.36,1) both}
@keyframes cbIn{from{opacity:0;transform:translateY(16px)}}
html.look-v5 .cookie-banner .cb-text{flex:1 1 360px;min-width:0;max-width:none;font-size:13.5px;line-height:1.5;color:var(--muted)}
html.look-v5 .cookie-banner .cb-text strong{display:inline;margin-right:6px;font-size:13.5px;font-weight:600;color:var(--ink)}
html.look-v5 .cookie-banner .cb-text p{display:inline;margin:0}
html.look-v5 .cookie-banner .cb-text a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(14,15,17,.3);text-underline-offset:3px}
html.look-v5 .cookie-banner .cb-actions{order:3;display:grid;grid-template-columns:1fr 1fr;gap:8px}
html.look-v5 .cookie-banner .cb-btn{height:38px;min-width:104px}
html.look-v5 .cb-btn{height:42px;padding:0 16px;border:0;border-radius:10px;background:var(--ink);color:#fff;font:inherit;font-size:14px;font-weight:500;cursor:pointer;
  transition:transform .5s var(--ease),background-color .35s var(--ease)}
html.look-v5 .cb-btn--ghost{background:#F3F2ED;color:var(--ink)}
html.look-v5 .cookie-banner .cb-btn[data-consent="all"]{background:var(--lime);color:var(--ink)}
html.hover-fx .cb-btn:hover{transform:scale(1.02);background:#24262B}
html.hover-fx .cb-btn--ghost:hover{background:#E9E8E1}
html.hover-fx .cookie-banner .cb-btn[data-consent="all"]:hover{background:var(--lime-hover)}
html.look-v5 .cb-btn:active{transform:scale(.98)}
html.look-v5 .cb-link{align-self:center;padding:2px 4px;border:0;background:none;font:inherit;font-size:13px;color:var(--muted);text-decoration:underline;text-decoration-color:rgba(14,15,17,.25);text-underline-offset:3px;cursor:pointer}
html.look-v5 .cookie-banner .cb-link{order:2}
html.hover-fx .cb-link:hover{color:var(--ink)}
html.look-v5 body:has(.cookie-banner.show) .chat-fab{opacity:0;pointer-events:none}
@media (max-width:640px){
  html.look-v5 .cookie-banner{bottom:12px;width:calc(100vw - 24px);flex-direction:column;align-items:stretch;gap:12px;padding:16px}
  html.look-v5 .cookie-banner .cb-text{flex:none}
  html.look-v5 .cookie-banner .cb-actions{order:2}
  html.look-v5 .cookie-banner .cb-link{order:3;margin-top:-4px}
}
html.look-v5 .cookie-modal .cm-backdrop{background:rgba(14,15,17,.32)}
html.look-v5 .cookie-modal .cm-card{max-width:520px;padding:28px;border-radius:20px;box-shadow:0 30px 80px -30px rgba(14,15,17,.45)}
html.look-v5 .cookie-modal h3{font-size:20px;font-weight:600;padding-right:40px}
html.look-v5 .cookie-modal .cm-desc{font-size:14.5px;margin-bottom:8px}
html.look-v5 .cm-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border:0;border-radius:10px;background:#F3F2ED;color:var(--ink);font-size:20px;line-height:1;cursor:pointer;transition:background-color .3s var(--ease)}
html.hover-fx .cm-close:hover{background:#E9E8E1}
html.look-v5 .cookie-cat{border:0;border-top:1px solid var(--hairline);border-radius:0;margin:0;padding:16px 0;align-items:center}
html.look-v5 .cookie-cat h4{font-size:15px;font-weight:600}
html.look-v5 .cookie-cat p{font-size:13.5px;color:var(--muted)}
html.look-v5 .cookie-cat .locked{font-size:13px;color:var(--muted-2)}
html.look-v5 .cookie-modal .switch .sl{background:#D9D8D2}
html.look-v5 .cookie-modal .switch input:checked + .sl{background:var(--ink)}
html.look-v5 .cookie-modal .cm-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;padding-top:18px;border-top:1px solid var(--hairline)}

/* ------------------------------------------------------------------ v5.13: self-hosted Inter
   No request to Google Fonts (privacy: no visitor IP goes to Google; also faster). Built from the Inter variable font
   (SIL Open Font License 1.1, licence text inside the file) with fontTools: weights 400-600 + optical size, subset to
   Latin, Latin Extended-A, Cyrillic and the punctuation/symbols the site uses. Served as WOFF2 (82 KB, v5.18: the same
   font re-wrapped by fontTools, inter-var.woff2) with the WOFF (103 KB) as a fallback. Preloaded in every page's <head>. */
@font-face{font-family:'Inter';src:url(../fonts/inter-var.woff2) format('woff2'),url(../fonts/inter-var.woff) format('woff');font-weight:400 600;font-style:normal;font-display:swap}

/* ------------------------------------------------------------------ v5.14: lean product pages
   Each product page: hero (free call + see prices) · fact strip · problem · what you get · demo · pricing with the
   early-client band · FAQ · closing CTA. */
/* Noriu Web: before / after */
html.look-v5 .ba{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
html.look-v5 .ba-card{margin:0;display:flex;flex-direction:column;gap:16px}
html.look-v5 .ba-label{display:inline-block;padding:5px 12px;border-radius:999px;background:#ECEBE5;color:var(--muted);font-size:13px;font-weight:500}
html.look-v5 .ba-label--noriu{background:var(--lime);color:var(--ink)}
html.look-v5 .ba-browser{border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(14,15,17,.07),0 24px 50px -32px rgba(14,15,17,.3);overflow:hidden}
html.look-v5 .ba-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--hairline);font-size:12px;color:var(--muted-2)}
html.look-v5 .ba-bar i{width:9px;height:9px;border-radius:50%;background:#E3E2DC}
html.look-v5 .ba-bar span{margin-left:8px;flex:1;padding:3px 10px;border-radius:7px;background:#F4F3EE}
html.look-v5 .ba-lang{font-size:12px;font-weight:600;color:var(--ink)}
html.look-v5 .ba-lang u{text-decoration:none;padding:1px 6px;border-radius:5px;background:var(--lime)}
html.look-v5 .ba-page{padding:22px 22px 24px;min-height:230px;display:flex;flex-direction:column;gap:10px}
html.look-v5 .ba-page h4{font-size:20px;line-height:1.25;letter-spacing:-.02em;font-weight:600;color:var(--ink)}
html.look-v5 .ba-page p{font-size:14px;color:var(--muted);margin:0}
html.look-v5 .ba-page--old{background:linear-gradient(#FAFAF8,#F3F3F0)}
html.look-v5 .ba-page--old h4{font-family:Georgia,'Times New Roman',serif;font-weight:400;color:#5b5f66;text-align:center}
html.look-v5 .ba-page--old p{text-align:center}
html.look-v5 .ba-img{height:62px;border-radius:8px;background:repeating-linear-gradient(135deg,#E8E7E2 0 8px,#EFEEEA 8px 16px)}
html.look-v5 .ba-contact{margin-top:auto!important;font-size:12.5px!important;color:var(--muted-2)!important}
html.look-v5 .ba-ai{align-self:flex-start;padding:4px 10px;border-radius:999px;background:var(--lime-soft);color:var(--ink);font-size:12px;font-weight:500}
html.look-v5 .ba-form{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 14px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--hairline);font-size:13.5px;color:var(--muted)}
html.look-v5 .ba-form b{padding:7px 14px;border-radius:8px;background:var(--ink);color:#fff;font-weight:500;font-size:13px}
html.look-v5 .ba-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
html.look-v5 .ba-list li{display:flex;align-items:center;gap:10px;font-size:15.5px;color:var(--ink)}
html.look-v5 .ba-list svg{flex:0 0 auto;stroke:var(--ink)}
html.look-v5 .ba-list--x li{color:var(--muted)}
html.look-v5 .ba-list--x svg{stroke:#B5B7BC}
@media (max-width:860px){html.look-v5 .ba{grid-template-columns:1fr}}

/* Noriu Private: ask your documents */
html.look-v5 .pdemo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:center}
html.look-v5 .pdemo-chat{background:#fff;border-radius:18px;box-shadow:0 0 0 1px rgba(14,15,17,.07),0 24px 50px -32px rgba(14,15,17,.3)}
html.look-v5 .pdemo-side{display:flex;flex-direction:column;gap:18px}
html.look-v5 .pdemo-zero{display:flex;align-items:baseline;gap:10px;padding:18px 22px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(14,15,17,.07)}
html.look-v5 .pdemo-zero b{font-size:40px;line-height:1;letter-spacing:-.03em;font-weight:600;color:var(--ink)}
html.look-v5 .pdemo-zero span{font-size:15px;color:var(--muted)}
html.look-v5 .pdemo-table{width:100%;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px rgba(14,15,17,.07);font-size:14px}
@media (max-width:860px){html.look-v5 .pdemo{grid-template-columns:1fr}}

/* pricing extras: add-ons line and the early-client band */
html.look-v5 .tier-addons{margin:18px auto 0;max-width:760px;text-align:center;font-size:15px;color:var(--muted)}
html.look-v5 .early{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center;margin-top:36px;padding:30px 32px;border-radius:22px;
  background:linear-gradient(135deg,#F7FBE6 0%,#FFFFFF 70%);box-shadow:0 0 0 1px rgba(14,15,17,.07)}
html.look-v5 .early__tag{display:inline-block;margin-bottom:12px;padding:5px 12px;border-radius:999px;background:var(--lime);color:var(--ink);font-size:13px;font-weight:600}
html.look-v5 .early h3{font-size:clamp(22px,2vw,28px);line-height:1.15;margin-bottom:8px}
html.look-v5 .early p{color:var(--muted);margin:0}
html.look-v5 .early__offer{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
html.look-v5 .early__offer .checklist{margin:0}
html.look-v5 .early__offer .checklist li{font-size:16.5px;font-weight:500;color:var(--ink)}
html.look-v5 .early__note{font-size:14px}
@media (max-width:860px){html.look-v5 .early{grid-template-columns:1fr;padding:24px}}
html.look-v5 .pdemo-chat{width:100%;max-width:none;margin:0}
/* Contact form sent (v5.15): once /api/contact accepts the message, main.js adds .is-done and the form card
   shows the thank-you panel instead of the form (a lime tick that draws itself, title, text, the confirmation line
   when the visitor's copy was emailed, "Habla con Noriu" and "Enviar otro mensaje"). */
html.look-v5 .form-card.is-done > :not(.form-done){display:none}
html.look-v5 .form-done{text-align:center;padding:30px 8px 14px}
html.look-v5 .form-done[hidden],html.look-v5 .form-done__copy[hidden]{display:none}
html.look-v5 .form-done:focus{outline:none}
html.look-v5 .form-done__icon{display:inline-grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--lime);color:var(--ink);margin-bottom:20px;animation:doneIn .55s var(--ease) both}
html.look-v5 .form-done__icon path{stroke-dasharray:21;stroke-dashoffset:21;animation:doneTick .45s .3s var(--ease) forwards}
html.look-v5 .form-done__title{font-size:32px;font-weight:600;letter-spacing:-.02em;margin:0 0 10px;color:var(--ink)}
html.look-v5 .form-done__text{color:var(--muted);font-size:17px;line-height:1.55;max-width:380px;margin:0 auto}
html.look-v5 .form-done__copy{display:inline-block;margin:18px auto 0;padding:10px 14px;border-radius:10px;background:var(--lime-soft);color:var(--ink);font-size:14px;line-height:1.45;overflow-wrap:anywhere}
html.look-v5 .form-done__actions{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:28px}
html.look-v5 .form-done__again{background:none;border:0;padding:6px 8px;font:inherit;font-size:14px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
html.look-v5 .form-done__again:hover{color:var(--ink)}
@keyframes doneIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes doneTick{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){html.look-v5 .form-done__icon,html.look-v5 .form-done__icon path{animation:none;stroke-dashoffset:0}}

/* ------------------------------------------------------------------ v5.16: light heroes
   Measured (Oct 2026): with a hero on screen and nothing happening, the compositor redrew the whole hero through five
   offscreen passes every frame (the painting's colour filter on a moving layer, the grain's overlay blend over moving
   layers, the bokeh light, a layer 1.5x the hero, turning on top), about a full CPU core, ~30 fps without a GPU, and
   slow page changes. The bokeh's 14 live gradients also took ~1 s to draw, so Productos and Contacto first painted at
   ~1.6 s. Now one thing moves: .hero-bg (the first child of every .hero-panel; the v5 painting and grain rules above
   target its ::before / ::after) drifts slowly and carries the painting (filter, home mask) and the grain, which are
   drawn once into its tiles; the grain is still and drifts with the painting. The bokeh light rests in its first pose
   (it no longer floats), drawn from a small image of the same gradients (assets/img/bokeh/<page>[-t|-m].webp: desktop,
   ≤1020px, ≤640px, each rendered for that page's own box by design/tools/gen_bokeh.js; rerun it after changing a page's
   --c2 / --t1 / --bk). Same look: two passes per frame, steady 60 fps, Productos / Contacto paint in ~0.4 s. */
html.look-v5 .hero-panel > .hero-bg{position:absolute;inset:-6%;z-index:-2;pointer-events:none;
  animation:heroDrift 28s ease-in-out infinite alternate;will-change:transform}
/* the mirrored pages (--flip) flip the wrapper instead of the painting, so the drift is mirrored with it as before */
html.look-v5 body:is([data-page],[data-page]) .hero-panel > .hero-bg{scale:var(--flip,1) 1}
/* the home bush is masked to transparent on the text side: the hero's own gradient moves into the wrapper under it,
   so the grain always has the green to sit on */
html.look-v5 body[data-page="index"] .hero-panel > .hero-bg{background:inherit;animation-duration:26s}
html.look-v5 body:is([data-page],[data-page]) .hero-panel > .hero-bg::before,
html.look-v5 body:is([data-page],[data-page]) .hero-panel > .hero-bg::after{inset:0;animation:none;will-change:auto}
html.look-v5 body:is([data-page],[data-page]) .hero-panel > .hero-bg::before{scale:none}
/* Contacto's light wash behind the headline (tablets and phones) lives in the wrapper too, between the painting and
   the grain as before. It fills the whole wrapper (so its edges never drift into view) and its main.css gradient is
   re-measured in the wrapper's box, the hero plus 6% on each side: same place and size on screen */
html.look-v5 .hero-bg > .contact-hero__wash{inset:0;
  background:radial-gradient(ellipse calc(58% / 1.12) calc(52% / 1.12) at calc(26% / 1.12) calc(22% / 1.12),rgba(245,246,248,.8),rgba(245,246,248,.4) 45%,rgba(245,246,248,0) 75%)}
html.look-v5 body:is([data-page="services"],[data-page="web"],[data-page="private"],[data-page="scan"],[data-page="sectors"],[data-page^="sec-"],[data-page="contact"]) .hero-panel > .wrap:not(.hero-stage)::before{
  animation:none;will-change:auto;transform:translate(-6%,4%) rotate(-8deg)}
html.look-v5:not(.bokeh-src) body:is([data-page="services"],[data-page="web"],[data-page="private"],[data-page="scan"],[data-page="sectors"],[data-page^="sec-"],[data-page="contact"]) .hero-panel > .wrap:not(.hero-stage)::before{
  background:var(--bokeh) 0 0/100% 100% no-repeat}
@media (prefers-reduced-motion:reduce){html.look-v5 .hero-panel > .hero-bg{animation:none}}
/* bokeh:start (written by design/tools/gen_bokeh.js) */
html.look-v5 body[data-page="services"]{--bokeh:url(../img/bokeh/services.webp?v=856996c7)}
html.look-v5 body[data-page="web"]{--bokeh:url(../img/bokeh/web.webp?v=320c968e)}
html.look-v5 body[data-page="private"]{--bokeh:url(../img/bokeh/private.webp?v=6aa514d6)}
html.look-v5 body[data-page="scan"]{--bokeh:url(../img/bokeh/scan.webp?v=b1befe83)}
html.look-v5 body[data-page="sectors"]{--bokeh:url(../img/bokeh/sectors.webp?v=583fbba5)}
html.look-v5 body[data-page="sec-gestoria"]{--bokeh:url(../img/bokeh/sec-gestoria.webp?v=be7d4afd)}
html.look-v5 body[data-page="sec-inmo"]{--bokeh:url(../img/bokeh/sec-inmo.webp?v=bf8bad15)}
html.look-v5 body[data-page="sec-legal"]{--bokeh:url(../img/bokeh/sec-legal.webp?v=320c968e)}
html.look-v5 body[data-page="sec-clinica"]{--bokeh:url(../img/bokeh/sec-clinica.webp?v=6aa514d6)}
html.look-v5 body[data-page="sec-ayto"]{--bokeh:url(../img/bokeh/sec-ayto.webp?v=583fbba5)}
html.look-v5 body[data-page="contact"]{--bokeh:url(../img/bokeh/contact.webp?v=229635a0)}
@media (max-width:1020px){
html.look-v5 body[data-page="services"]{--bokeh:url(../img/bokeh/services-t.webp?v=209eb911)}
html.look-v5 body[data-page="web"]{--bokeh:url(../img/bokeh/web-t.webp?v=1f0c0778)}
html.look-v5 body[data-page="private"]{--bokeh:url(../img/bokeh/private-t.webp?v=fd2a0735)}
html.look-v5 body[data-page="scan"]{--bokeh:url(../img/bokeh/scan-t.webp?v=daeac50a)}
html.look-v5 body[data-page="sectors"]{--bokeh:url(../img/bokeh/sectors-t.webp?v=a352a0eb)}
html.look-v5 body[data-page="sec-gestoria"]{--bokeh:url(../img/bokeh/sec-gestoria-t.webp?v=8df0eb54)}
html.look-v5 body[data-page="sec-inmo"]{--bokeh:url(../img/bokeh/sec-inmo-t.webp?v=911f841e)}
html.look-v5 body[data-page="sec-legal"]{--bokeh:url(../img/bokeh/sec-legal-t.webp?v=1f0c0778)}
html.look-v5 body[data-page="sec-clinica"]{--bokeh:url(../img/bokeh/sec-clinica-t.webp?v=fd2a0735)}
html.look-v5 body[data-page="sec-ayto"]{--bokeh:url(../img/bokeh/sec-ayto-t.webp?v=a352a0eb)}
html.look-v5 body[data-page="contact"]{--bokeh:url(../img/bokeh/contact-t.webp?v=3c6157b9)}}
@media (max-width:640px){
html.look-v5 body[data-page="services"]{--bokeh:url(../img/bokeh/services-m.webp?v=80884280)}
html.look-v5 body[data-page="web"]{--bokeh:url(../img/bokeh/web-m.webp?v=80e5dff7)}
html.look-v5 body[data-page="private"]{--bokeh:url(../img/bokeh/private-m.webp?v=a5be6c88)}
html.look-v5 body[data-page="scan"]{--bokeh:url(../img/bokeh/scan-m.webp?v=e6f3bd82)}
html.look-v5 body[data-page="sectors"]{--bokeh:url(../img/bokeh/sectors-m.webp?v=de61180a)}
html.look-v5 body[data-page="sec-gestoria"]{--bokeh:url(../img/bokeh/sec-gestoria-m.webp?v=2610bd15)}
html.look-v5 body[data-page="sec-inmo"]{--bokeh:url(../img/bokeh/sec-inmo-m.webp?v=5312ba40)}
html.look-v5 body[data-page="sec-legal"]{--bokeh:url(../img/bokeh/sec-legal-m.webp?v=8ccf9b38)}
html.look-v5 body[data-page="sec-clinica"]{--bokeh:url(../img/bokeh/sec-clinica-m.webp?v=52beded1)}
html.look-v5 body[data-page="sec-ayto"]{--bokeh:url(../img/bokeh/sec-ayto-m.webp?v=5d33baf5)}
html.look-v5 body[data-page="contact"]{--bokeh:url(../img/bokeh/contact-m.webp?v=d90fb1c4)}}
/* bokeh:end */

/* ------------------------------------------------------------------ v5.17: nothing loops off screen
   main.js (initOffscreen) adds .is-offscreen to the hero, the closing CTA, the diagram dashes and the map while they are
   out of view; their looping animations pause there and carry on from the same frame when they come back. Before, the
   dashes, the map pins and the mark's shine (animating background-position and SVG, so on the main thread) ran 60 times
   a second all the time: ~7-11% CPU while just reading mid-page, under ~2% now (the shine now runs on the compositor,
   see .cta-mark above, so the main thread stays idle even with the closing CTA on screen). */
.is-offscreen,.is-offscreen *,.is-offscreen::before,.is-offscreen::after,.is-offscreen *::before,.is-offscreen *::after{animation-play-state:paused!important}
/* the diagram dashes stand vertical on narrow screens (all of them ≤640px, the Noriu Private diagram ≤900px), where
   their sideways run doesn't show at all: no animation there */
@media (max-width:900px){html.look-v5 .arch .wire{animation:none}}
@media (max-width:640px){html.look-v5 .wire{animation:none}}

/* ------------------------------------------------------------------ v5.18: a lighter first visit
   At 1020px and below the heroes use the 1200px paintings, as does the home's blurred village band (on these screens
   the paintings are shown scaled and under the grain, so the 2400px detail never reaches the screen: checked on phones
   and tablets, under 0.3/255 apart on average). They decode to ~3.6 MB each instead of ~14 MB; each page's <head>
   preloads the size its screen will use (media on the preload links). */
@media (max-width:1020px){
html.look-v5 body[data-page="index"]{--soft:url(../img/art/soft-bush-1200.webp?v=20261005b)}
html.look-v5 body[data-page="services"]{--soft:url(../img/art/soft-hub-med-1200.webp?v=20261004m);--paint:url(../img/art/calm-hub-med-1200.webp?v=20261004m)}
html.look-v5 body[data-page="web"]{--soft:url(../img/art/soft-sea-med-1200.webp?v=20261004m);--paint:url(../img/art/full-sea-med-1200.webp?v=20261004m)}
html.look-v5 body[data-page="private"]{--soft:url(../img/art/soft-cove-med-1200.webp?v=20261004m);--paint:url(../img/art/full-cove-med-1200.webp?v=20261004m)}
html.look-v5 body[data-page="scan"]{--soft:url(../img/art/soft-clouds-med-1200.webp?v=20261004m);--paint:url(../img/art/full-clouds-med-1200.webp?v=20261004m)}
html.look-v5 body[data-page="sectors"]{--soft:url(../img/art/soft-coast-med-1200.webp?v=20261004m);--paint:url(../img/art/full-coast-med-1200.webp?v=20261004m)}
html.look-v5 body[data-page="sec-gestoria"]{--soft:url(../img/art/soft-orchard-med-1200.webp?v=20261004m);--paint:url(../img/art/full-orchard-med-1200.webp?v=20261004m)}
html.look-v5 body[data-page="sec-inmo"]{--soft:url(../img/art/soft-villa-rosa-1200.webp?v=20261005a);--paint:url(../img/art/calm-villa-rosa-1200.webp?v=20261005a)}
html.look-v5 body[data-page="sec-legal"]{--soft:url(../img/art/soft-arcade-med-1200.webp?v=20261004m);--paint:url(../img/art/full-arcade-med-1200.webp?v=20261004m)}
html.look-v5 body[data-page="sec-clinica"]{--soft:url(../img/art/soft-lagoon-med-1200.webp?v=20261004m);--paint:url(../img/art/full-lagoon-med-1200.webp?v=20261004m)}
html.look-v5 body[data-page="sec-ayto"]{--soft:url(../img/art/soft-village-med-1200.webp?v=20261004m);--paint:url(../img/art/full-village-med-1200.webp?v=20261004m)}
html.look-v5 body[data-page="contact"]{--soft:url(../img/art/soft-coast-med-1200.webp?v=20261004m);--paint:url(../img/art/full-coast-med-1200.webp?v=20261004m)}
html.look-v5 .local-band::before{background:linear-gradient(90deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.5) 42%,rgba(255,255,255,.08) 72%,rgba(255,255,255,0) 100%),url(../img/art/full-village-med-1200.webp?v=20261004m) 60% 100%/auto 170% no-repeat,#F3EEE6}
}
/* images earlier looks showed and this one hides (hero art, poster and footer pictures, Contacto's photo; the look
   draws them as backgrounds) are display:none, and loading="lazy" on them in the pages, so they are never downloaded */
html.look-v5 :is(.hero-art,.poster__art,.footer__art) > img,html.look-v5 .contact-hero__bg{display:none}