/* Publicación 10-nov-2026 (Ignacio): todo el texto en IBM Plex Sans; el único «poiun» con forma de logo es el wordmark azul */
:root{--font-heading:var(--font-sans);--font-body:var(--font-sans);--font-display:var(--font-sans)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:var(--fs-body);font-weight:var(--fw-regular);line-height:var(--lh-body);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--font-heading);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-display);margin:0;text-wrap:balance}
h1{font-family:var(--font-display);font-size:var(--fs-display);line-height:var(--lh-tight)}
h2{font-size:var(--fs-h2);line-height:var(--lh-heading)}
h3{font-size:var(--fs-h3);line-height:1.3}
p{margin:0 0 1em;max-width:var(--measure)}
ul{margin:0;padding:0;list-style:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:0;background:var(--color-primary);color:var(--color-on-primary);padding:12px 16px;z-index:10;font-family:var(--font-ui)}
.skip:focus{left:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* Header */
.site-head .wrap{display:flex;align-items:center;gap:16px 28px;padding-top:20px;padding-bottom:20px}
.brand{display:flex;align-items:center;text-decoration:none;margin-right:auto;color:var(--logo-color)}
.poi-logo{color:var(--logo-color);display:inline-block;line-height:0}
.poi-logo svg{height:100%;width:auto;overflow:visible;display:block}
.brand .poi-logo{height:28px;width:auto}
.nav{display:flex;align-items:center;gap:24px;flex-wrap:wrap;font-family:var(--font-ui);font-size:var(--fs-ui);font-weight:var(--fw-medium)}
.nav a{text-decoration:none}
.nav a:hover{text-decoration:underline}
.langs{display:flex;align-items:center;gap:2px;font-family:var(--font-ui);font-size:var(--fs-small);font-weight:var(--fw-semibold)}
.langs a{text-decoration:none;padding:6px 8px;border-radius:var(--radius)}
.langs a[aria-current="page"]{background:var(--color-surface-2)}
.btn{display:inline-block;background:var(--color-primary);color:var(--color-on-primary);text-decoration:none;font-family:var(--font-ui);font-weight:var(--fw-semibold);font-size:1rem;line-height:1;padding:14px 20px;border:0;border-radius:var(--radius);cursor:pointer;transition:transform .15s ease,background-color .15s ease}
.btn:hover{transform:translateY(-1px);background:var(--color-primary-hover)}
.btn:active{transform:translateY(1px)}
.nav .btn{padding:12px 16px;font-size:var(--fs-ui)}
.nav a.btn:hover{text-decoration:none}
.nav-desktop{display:flex}
.nav-box{display:none;position:relative;font-family:var(--font-ui)}
.nav-box > summary{list-style:none;cursor:pointer;font-weight:var(--fw-semibold);padding:10px 12px;border-radius:var(--radius);background:var(--color-surface-2)}
.nav-box > summary::-webkit-details-marker{display:none}
@media (max-width:819px){
  .nav-desktop{display:none}
  .nav-box{display:block}
  .nav-box .nav{
    display:none;
    position:absolute;
    right:0;
    top:calc(100% + 8px);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    min-width:16rem;
    background:var(--color-bg);
    padding:8px;
    border-radius:var(--radius);
    outline:2px solid var(--color-border);
    z-index:5
  }
  .nav-box[open] .nav{display:flex}
  .nav-box .nav a{padding:12px 14px}
  .site-head .wrap{flex-wrap:nowrap}
}

/* Hero */
.hero{padding:clamp(64px,9vw,140px) 0 var(--section)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,6vw,96px);align-items:end}
.hero h1{max-width:20ch;font-size:clamp(2.25rem,1.5rem + 2.6vw,3.75rem);line-height:1.12;letter-spacing:-.02em}
.lead{font-size:clamp(1.125rem,1rem + .5vw,1.5rem);line-height:1.45;margin-top:28px;max-width:36ch}
.hero-mark{justify-self:end;width:min(100%,96px);height:auto;color:var(--logo-color)}
.hero-mark.poi-logo{width:min(100%,96px);height:auto}
.hero-mark.poi-logo svg{width:100%;height:auto}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-mark,.hero-mark.poi-logo{justify-self:start;width:72px;order:-1}
}

/* Quiénes somos: titular a un lado, párrafo al otro */
.about{padding:0 0 var(--section)}
.about-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);align-items:start}
.about-grid p{margin:0;font-size:clamp(1.125rem,1rem + .35vw,1.3125rem);line-height:1.5}
@media (max-width:860px){.about-grid{grid-template-columns:1fr;gap:20px}}

/* Servicios: cada uno en una fila distinta */
.services{padding:0 0 var(--section)}
.services > .wrap > h2{margin-bottom:56px}
.svc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,5vw,80px);padding:8px 0 48px}
.svc h3{font-family:var(--font-heading);font-weight:var(--fw-semibold);font-size:clamp(1.5rem,1.2rem + 1vw,1.875rem);letter-spacing:var(--tracking-display)}
.svc p{margin:0}
@media (max-width:860px){.svc{grid-template-columns:1fr;padding:0 0 40px;gap:12px}}

/* Apps: banda del azul de marca; texto blanco (7.20:1) */
.apps{background:var(--color-primary);color:var(--color-on-primary);padding:var(--section) 0}
.apps h2{margin-bottom:48px}
.apps-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px)}
.apps .app h3{font-family:var(--font-heading);font-weight:var(--fw-semibold);font-size:clamp(1.75rem,1.3rem + 1.4vw,2.5rem);letter-spacing:var(--tracking-display);margin-bottom:16px}
.apps .app h3 a{color:var(--color-on-primary);text-decoration:none;display:inline-block;border-radius:4px}
.apps .app h3{line-height:0}
.app-word{display:block;height:clamp(28px,1.2rem + 1.4vw,40px);width:auto;overflow:visible;color:var(--color-on-primary)}
.apps .app h3 a:hover .app-word{opacity:.85}
.apps .app h3 a:hover{text-decoration:underline}
.apps .app p{margin:0}
@media (max-width:860px){.apps-grid{grid-template-columns:1fr}}

/* Cómo trabajamos */
.method{padding:var(--section) 0}
.method h2{margin-bottom:48px}
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.principles li{font-family:var(--font-heading);font-weight:var(--fw-semibold);font-size:clamp(1.25rem,1.05rem + .7vw,1.75rem);letter-spacing:var(--tracking-display);line-height:1.25;max-width:18ch}
@media (max-width:860px){.principles{grid-template-columns:1fr;gap:28px}}

/* Contacto */
.contact{padding:0 0 var(--section)}
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px)}
form{display:grid;gap:18px;font-family:var(--font-ui)}
.field{display:grid;gap:6px}
label{font-family:var(--font-ui);font-weight:var(--fw-semibold);font-size:.9375rem}
input,select,textarea{font:inherit;color:var(--color-text);background:var(--color-bg-alt);border:var(--border-1);border-radius:var(--radius);padding:12px 14px;width:100%}
textarea{min-height:140px;resize:vertical}
.form-status{font-size:var(--fs-small);min-height:1.5em;color:var(--color-text-muted)}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* Footer */
.site-foot{background:var(--color-bg-alt);padding:72px 0 48px}
.foot-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:48px;align-items:start}
.site-foot .legal{font-size:var(--fs-small);color:var(--color-text-muted);max-width:62ch}
.site-foot .legal + .legal{margin-top:16px}
.site-foot nav{font-family:var(--font-ui)}
.site-foot nav ul{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.site-foot nav a{text-decoration:none;font-weight:var(--fw-medium)}
.site-foot nav a:hover{text-decoration:underline}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}

/* COMP */
.comp-hero{padding:clamp(64px,9vw,140px) 0 var(--section)}
.comp-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.comp-hero h1{max-width:10ch;margin-bottom:28px}
.logo-comp{width:min(100%,28rem);justify-self:end;margin-top:8px}
.logo-comp img{width:100%;height:auto;display:block}
.logo-comp .lockup-neg{display:none}
@media (prefers-color-scheme:dark){
  .logo-comp .lockup-color{display:none}
  .logo-comp .lockup-neg{display:block}
}
@media (max-width:860px){
  .comp-hero .wrap{grid-template-columns:1fr}
  .logo-comp{justify-self:start;width:min(100%,22rem)}
}

/* 404 */
.page-404{padding:clamp(64px,9vw,140px) 0 var(--section)}
.page-404 .lead{max-width:30ch}
.page-404 a{color:var(--color-link)}

/* Movimiento: un gesto firma, una vez */
@media (prefers-reduced-motion:no-preference){
  .js .rise{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .js .rise.in{opacity:1;transform:none}
  .js .rise:nth-child(2){transition-delay:.08s}
  .js .rise:nth-child(3){transition-delay:.16s}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.contact-note{font-size:clamp(1.125rem,1rem + .35vw,1.3125rem);line-height:1.5;margin:0}