/* On! Graphics — hoja de estilos única.
   Rehecha a mano desde la web en Elementor (medidas tomadas el 10/11/2026).
   © EditARTEX — editartex.es */

@font-face{font-family:"Aminute";src:url(../fonts/Aminute.woff2) format("woff2"),url(../fonts/Aminute.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url(../fonts/poppins-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url(../fonts/poppins-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url(../fonts/poppins-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url(../fonts/poppins-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  --negro:#000;--verde:#7ABA56;--claro:#ECECEC;--blanco:#fff;--texto:#333;
  --display:"Aminute",sans-serif;--sans:"Poppins",sans-serif;
  --ancho:1500px;--lateral:50px;
  --base:21px;
}
@media (max-width:1024px){:root{--base:19px;--lateral:30px}}
@media (max-width:767px){:root{--base:18px;--lateral:20px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-size:var(--base);line-height:1.3;color:var(--texto);background:var(--blanco);-webkit-font-smoothing:antialiased}
img,video,iframe{max-width:100%}
img{height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,h6,p{margin:0}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:var(--verde);border-radius:5px}

.caja{max-width:var(--ancho);margin:0 auto;padding:0 var(--lateral)}
.titular{font-family:var(--display);font-weight:400;font-size:2.5em;line-height:1;text-align:center}
@media (max-width:767px){.titular{font-size:1.8em}}

/* ── Botón con óvalo (la marca del sitio) ─────────────────────────── */
.btn{display:inline-block;font-family:var(--sans);font-size:15px;line-height:1;letter-spacing:.02em;text-transform:uppercase;
  padding:20px 100px;background:url(../assets/img/boton.svg) center/100% 100% no-repeat;color:var(--blanco);
  transition:transform .5s,background-color .3s,color .3s}
.btn:hover{transform:scale(1.1)}
.btn--verde{background-image:url(../assets/img/borde-boton-verde.svg)}
.btn--negro{color:var(--negro);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 327 61'%3E%3Cellipse cx='163.5' cy='30.5' rx='162.8' ry='29.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E")}
@media (max-width:767px){.btn{padding:20px 80px}}

/* ── Cabecera ─────────────────────────────────────────────────────── */
.cab{position:absolute;top:0;left:0;right:0;z-index:20;padding:30px 10px 20px}
.cab--solida{position:relative;background:var(--negro)}
.cab .caja{display:flex;justify-content:space-between;align-items:center;max-width:1500px;padding:0}
.cab__logo img{width:140px}
.cab__menu{background:none;border:0;padding:0;cursor:pointer;color:var(--claro);width:30px;height:30px}
.cab__menu svg{width:30px;height:30px;fill:currentColor}
@media (max-width:1024px){.cab__logo img{width:100px}}
@media (max-width:767px){.cab__menu,.cab__menu svg{width:20px;height:20px}}

/* menú a pantalla completa */
.menu{position:fixed;inset:0;z-index:50;background:var(--verde);display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.menu.abierto{opacity:1;visibility:visible}
.menu__cerrar{position:absolute;top:70px;right:12%;background:none;border:0;color:var(--blanco);font-size:22px;cursor:pointer}
.menu__dentro{width:min(740px,90vw);text-align:right}
.menu nav a{display:block;font-family:var(--display);font-size:clamp(48px,6vw,90px);line-height:1.15;color:var(--blanco)}
.menu nav a:hover{color:var(--negro)}
.menu__linea{border:0;border-top:1px solid rgba(255,255,255,.45);margin:18px 0 14px}

/* redes */
.redes{display:flex;gap:14px;justify-content:flex-end;list-style:none;margin:0;padding:0}
.redes a{display:inline-flex;width:20px;height:20px;color:var(--blanco)}
.redes svg{width:100%;height:100%;fill:currentColor}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero{min-height:80vh;background:var(--negro) url(../assets/img/on-graphics-about@2x-80-2048x1042.jpg) bottom center/cover no-repeat;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:40px;padding:140px 10px 60px;text-align:center}
.hero h1{font-family:var(--display);font-weight:400;font-size:3.5em;line-height:1.3;color:var(--blanco);max-width:800px}
@media (max-width:767px){.hero h1{font-size:1.9em}}

/* ── Servicios (zigzag) ───────────────────────────────────────────── */
.servicios{background:var(--blanco);padding:80px 50px 80px 60px}
.servicios .titular{color:var(--negro);margin-bottom:40px}
.servicio{display:flex;align-items:center;gap:40px;max-width:1500px;margin:0 auto 40px}
.servicio:last-child{margin-bottom:0}
.servicio__img{flex:0 0 63%}
.servicio__img img{width:100%;aspect-ratio:2284/578;object-fit:cover}
.servicio__txt{flex:1;color:var(--negro)}
.servicio--der{flex-direction:row-reverse}
.servicio--der .servicio__txt{text-align:right}
.servicio h3{font-family:var(--sans);font-weight:400;font-size:1.6em;line-height:1;text-transform:uppercase;margin-bottom:12px}
.servicio p{font-size:1em;line-height:1.3}
.servicio .etiquetas{color:var(--verde);text-transform:uppercase;line-height:1;margin-top:14px}
@media (max-width:767px){
  .servicios{padding:60px 20px}
  .servicio,.servicio--der{flex-direction:column;align-items:stretch;gap:16px;margin-bottom:50px}
  .servicio--der .servicio__txt{text-align:left}
  .servicio__img img{aspect-ratio:16/9}
}

/* ── Cinta de títulos (marquesina) ───────────────────────────────── */
.cinta{background:var(--verde);overflow:hidden;white-space:nowrap;padding:16px 0}
.cinta__pista{display:inline-flex;animation:cinta 60s linear infinite}
.cinta a{font-size:17px;text-transform:uppercase;color:var(--blanco);padding:0 10px}
.cinta a::after{content:"·";padding-left:20px}
.cinta a:hover{color:var(--negro)}
.cinta:hover .cinta__pista{animation-play-state:paused}
@keyframes cinta{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.cinta__pista{animation:none}}

/* ── Rejilla de proyectos ────────────────────────────────────────── */
.proyectos{background:var(--negro);padding:60px 80px 80px}
.proyectos .titular{color:var(--blanco);margin-bottom:40px}
.rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:1275px;margin:0 auto}
.ficha{position:relative;display:block;overflow:hidden;background:#111}
.ficha img{width:100%;aspect-ratio:5/4;object-fit:cover;transition:transform .6s}
.ficha__titulo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;
  background:rgba(0,0,0,.6);color:var(--blanco);font-family:var(--sans);font-size:1em;text-transform:uppercase;line-height:1.3;opacity:0;transition:opacity .3s}
.ficha:hover .ficha__titulo,.ficha:focus-visible .ficha__titulo{opacity:1}
.ficha:hover img{transform:scale(1.05)}
.proyectos__pie{text-align:center;margin-top:50px}
@media (max-width:1024px){.proyectos{padding:50px 30px}.rejilla{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){.proyectos{padding:40px 20px}.rejilla{grid-template-columns:1fr}.ficha__titulo{opacity:1;background:linear-gradient(transparent 55%,rgba(0,0,0,.75));align-items:flex-end;justify-content:flex-start;text-align:left}}

/* ── Clientes ────────────────────────────────────────────────────── */
.clientes{background:var(--verde);padding:50px}
.clientes .titular{color:var(--blanco);margin-bottom:34px}
.logos{display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;gap:30px;max-width:1335px;margin:0 auto}
.logos img{width:123px;height:60px;object-fit:contain}
.clientes--claro{background:var(--blanco)}
.clientes--claro .titular{color:var(--negro)}
.clientes--claro .logos img{filter:invert(1)}
@media (max-width:767px){.clientes{padding:40px 20px}.logos img{width:96px;height:44px}}

/* ── Llamada a contacto ──────────────────────────────────────────── */
.cta{padding:60px 50px;text-align:center;color:var(--negro)}
.cta .titular{margin-bottom:22px}
.cta p{margin-bottom:28px}

/* ── Pie ─────────────────────────────────────────────────────────── */
.kit{padding:20px 10px 30px;text-align:center}
.kit p{font-size:.8em;line-height:1;text-transform:uppercase;color:var(--negro);margin-bottom:12px}
.kit__logos{display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap}
.kit__logos img{height:58px;width:auto}
@media (max-width:767px){.kit__logos img{height:auto;width:100%;max-width:327px}}
.pie{background:var(--negro);color:var(--claro);padding:60px 10px 40px}
.pie .caja{max-width:1335px;padding:0}
.pie__arriba{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.pie__logo img{width:255px}
.pie nav{display:flex;gap:40px}
.pie nav a{font-family:var(--display);font-size:1.4em;color:var(--claro)}
.pie nav a:hover{color:var(--verde)}
.pie__linea{border:0;border-top:1px solid rgba(236,236,236,.35);margin:30px 0 20px}
.pie__abajo{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:.6em;text-transform:uppercase}
.pie__abajo a:hover{color:var(--verde)}
.pie .redes a{color:#69727d;width:17px;height:17px}
.pie .redes a:hover{color:var(--verde)}
@media (max-width:767px){.pie__arriba,.pie__abajo{flex-direction:column;text-align:center}.pie nav{gap:24px}}

/* ── Cabecera de páginas interiores ──────────────────────────────── */
.titulo-ovalo{display:inline-block;font-family:var(--display);font-weight:400;font-size:2.5em;line-height:1;padding:18px 50px;
  background:url(../assets/img/borde-boton-verde.svg) center/100% 100% no-repeat}
.work-cab{background:var(--negro);color:var(--blanco);padding:150px var(--lateral) 50px}
.work-cab .caja{display:flex;justify-content:space-between;align-items:center;gap:40px;padding:0}
.work-cab p{max-width:450px;font-size:1em}
.work-cab .titulo-ovalo{font-size:3em;text-transform:uppercase;padding:14px 40px}
@media (max-width:767px){.work-cab .titulo-ovalo{font-size:1.8em}}
@media (max-width:767px){.work-cab .caja{flex-direction:column;align-items:flex-start}}

/* ── About ───────────────────────────────────────────────────────── */
.about-cab{padding:170px var(--lateral) 70px;text-align:center}
.about-cab h1{font-family:var(--display);font-weight:400;font-size:3.5em;line-height:1.3;color:var(--negro);max-width:750px;margin:0 auto}
@media (max-width:767px){.about-cab h1{font-size:1.9em}}
.pase{min-height:650px;background:#000 center/cover no-repeat;transition:background-image .8s}
@media (max-width:767px){.pase{min-height:400px}}
.about{background:var(--negro);color:var(--blanco);padding:60px var(--lateral) 80px}
.about .titulo-ovalo{color:var(--blanco);display:table;margin:0 auto 40px;padding:10px 40px}
.about__fila{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;max-width:1040px;margin:0 auto;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.25)}
.about__fila h2{font-family:var(--sans);font-weight:400;font-size:2em;line-height:1.2;text-transform:uppercase}
.about__fila p{font-size:1em}
@media (max-width:767px){.about__fila h2{font-size:1.4em}}
@media (max-width:767px){.about__fila{grid-template-columns:1fr;gap:12px}}

/* ── Contacto ────────────────────────────────────────────────────── */
.contacto{padding:60px var(--lateral) 40px;text-align:center}
.formulario{max-width:620px;margin:40px auto 0;text-align:left;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;font-size:.55em}
.formulario label{display:block;color:var(--negro);margin-bottom:4px}
.formulario .entera{grid-column:1/-1}
.formulario input[type=text],.formulario input[type=email],.formulario input[type=tel],.formulario textarea{width:100%;border:0;border-bottom:1px solid #ccc;padding:6px 0;font:inherit;font-size:1.2em;background:transparent}
.formulario textarea{min-height:110px;border:1px solid #ccc;padding:8px}
.formulario .casilla{display:flex;gap:8px;align-items:center}
.formulario .casilla a{color:var(--verde)}
.formulario button{justify-self:start;background:var(--verde);color:var(--blanco);border:0;padding:8px 70px;font:inherit;cursor:pointer}
@media (max-width:767px){.formulario{grid-template-columns:1fr;font-size:.75em}}

/* ── Página de proyecto ──────────────────────────────────────────── */
.proyecto{padding:170px var(--lateral) 80px;color:var(--negro)}
.proyecto__cats{text-align:center;font-size:.6em;color:var(--verde);text-transform:uppercase;letter-spacing:.02em}
.proyecto__cats a+a::before{content:" - ";color:var(--verde)}
.proyecto h1{font-family:var(--display);font-weight:400;font-size:3.2em;line-height:1.3;text-align:center;margin-top:10px}
.proyecto__raya{width:200px;border:0;border-top:1px solid var(--verde);margin:16px auto 40px}
.cuerpo{width:min(67.3%,1226px);margin:0 auto;font-size:1em;line-height:1.3}  /* medido en la web real: 901 px a 1440, 1226 px a partir de 1920 */
@media (max-width:1024px){.cuerpo{width:85%}}
@media (max-width:767px){.cuerpo{width:100%}}
.cuerpo .verde{color:var(--verde)}
.cuerpo .grande{font-size:180%;line-height:1.2}
.cuerpo .capitalLetter{font-family:var(--display);font-size:2.4em;line-height:.8;float:left;margin:.08em .1em 0 0;color:var(--verde)}
.cuerpo p{margin:0 0 1em;text-align:center}
.cuerpo strong{font-weight:700}
.cuerpo a{color:var(--verde)}
.cuerpo figure{margin:0 0 30px}
.cuerpo img{margin:0 auto}
.cuerpo figcaption{font-size:.85em;text-align:center;margin-top:6px}
.cuerpo .video{position:relative;aspect-ratio:16/9;margin:0 0 30px;background:#000}
.cuerpo .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cuerpo .galeria{columns:3;column-gap:12px;margin:0 0 30px}
.cuerpo .galeria img{width:100%;margin-bottom:12px;break-inside:avoid}
.cuerpo .dos{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.cuerpo .separador{height:40px}
.volver{position:fixed;right:30px;bottom:30px;z-index:10;width:50px;height:50px;border-radius:50%;background:var(--verde);color:var(--blanco);display:flex;align-items:center;justify-content:center}
.volver svg{width:22px;height:22px;fill:currentColor}
@media (max-width:767px){.proyecto h1{font-size:1.8em}.cuerpo{font-size:.9em}.cuerpo .galeria{columns:2}.cuerpo .dos{grid-template-columns:1fr}}

/* ── Textos legales ──────────────────────────────────────────────── */
.legal{padding:170px var(--lateral) 80px}
.legal h1{font-family:var(--display);font-weight:400;font-size:2.5em;text-align:center;margin-bottom:40px;color:var(--negro)}
.legal__txt{max-width:1140px;margin:0 auto;font-size:1em;line-height:1.3;color:var(--texto)}
.legal__txt h2,.legal__txt h3{font-family:var(--sans);font-weight:700;font-size:1.2em;margin:1.6em 0 .6em}
.legal__txt p,.legal__txt ul{margin:0 0 1em}
.legal__txt a{color:var(--verde)}

/* ── Accesibilidad ───────────────────────────────────────────────── */
.salto{position:absolute;left:-999px;top:0}
.salto:focus{left:10px;z-index:100;background:#fff;padding:8px}
:focus-visible{outline:2px solid var(--verde);outline-offset:3px}

/* con la barra de WordPress visible (quien edita), la cabecera baja lo que ocupa la barra */
body.admin-bar .cab{top:32px}
@media (max-width:782px){body.admin-bar .cab{top:46px}}

/* aviso de cookies: informa de que no se recoge nada (no pide consentimiento porque no hay nada que consentir) */
.aviso-cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:40;max-width:720px;margin:0 auto;display:flex;align-items:center;gap:16px;
  background:var(--blanco);color:var(--negro);border:1px solid var(--negro);padding:12px 16px;font-size:13px;line-height:1.4;box-shadow:0 6px 24px rgba(0,0,0,.15)}
.aviso-cookies[hidden]{display:none}
.aviso-cookies p{flex:1}
.aviso-cookies a{color:var(--verde);text-decoration:underline}
.aviso-cookies__ok{background:var(--verde);color:var(--blanco);border:0;padding:8px 18px;font:inherit;cursor:pointer;white-space:nowrap}
@media (max-width:767px){.aviso-cookies{flex-direction:column;align-items:stretch;text-align:center}}

/* ── Bloques del módulo KLEO PROYECTOS con el aspecto de On! Graphics ── */
.kp-proyecto{--kp-aire:0px;--kp-hueco:6px;--kp-hueco-texto:40px;--kp-fila:345px;--kp-en-color:#8a8a8a}  /* mosaico medido en la web real (Meow): 6 px de hueco, filas de 320-370 px */
@media (min-width:1700px){.kp-proyecto{--kp-fila:300px}}
@media (max-width:767px){.kp-proyecto{--kp-fila:140px}}
.kp-proyecto .kp-bloque{margin:0 0 30px}
.kp-proyecto .kp-texto p{margin:0 0 1em;text-align:center}
.kp-proyecto .kp-titulo{font-family:var(--sans);font-weight:700;font-size:1.8em;line-height:1.2;color:var(--verde);text-align:center}
.kp-proyecto .kp-imagen img{margin:0 auto}
.cuerpo .kp-galeria figure,.cuerpo .kp-video,.cuerpo .kp-imagen{margin-bottom:0}
.cuerpo .kp-galeria figure{margin-top:0;margin-left:0;margin-right:0}
.kp-proyecto .kp-en,.kp-proyecto .kp-en p{color:#8a8a8a}
.kp-proyecto .kp-bilingue p{text-align:left}
.kp-proyecto .verde{color:var(--verde)}
.kp-proyecto .grande{font-size:180%;line-height:1.2}
.rejilla.kp-rejilla{display:grid}
.trampa{position:absolute;left:-9999px}
.work-cab--cat h1{font-family:var(--display);font-weight:400;font-size:3em;line-height:1;text-transform:uppercase;color:var(--blanco)}
.cinta span{font-size:17px;text-transform:uppercase;color:var(--blanco);padding:0 10px}
.cinta span::after{content:"·";padding-left:20px}
.proyecto__cats a:hover{color:var(--negro)}
@media (max-width:767px){.work-cab--cat h1{font-size:1.8em}}
.aviso-form{max-width:620px;margin:20px auto 0;padding:12px 16px;font-size:.7em}
.aviso-form--ok{background:#eef7e8;color:#2e5a16}
.aviso-form--error{background:#fdecec;color:#8a1c1c}