/* apperstudio — réplica estática. Amarillo corporativo #ffc700 */
@font-face{
  font-family:'Bricolage Grotesque';
  src:url('fonts/BricolageGrotesque-Variable.ttf') format('truetype');
  font-weight:200 800;
  font-display:swap;
}
@font-face{
  font-family:'Druk Wide';
  src:url('fonts/DrukWideBold.ttf') format('truetype');
  font-weight:700;
  font-display:swap;
}
:root{
  --gap-section:90px;   /* bloque anterior → título de sección */
  --gap-title:30px;     /* título → su párrafo (van juntos) */
  --gap-text-media:60px;/* párrafo → la foto/vídeo que presenta */

  --yellow:#ffc700;
  --black:#111;
  --white:#fff;
  --radius:10px;
  --font:'Bricolage Grotesque',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --font-logo:'Druk Wide','Arial Black',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--black);background:var(--white);font-size:18px;line-height:1.55}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;
  align-items:flex-start;padding:40px 60px;background:transparent;pointer-events:none}
.site-header a{pointer-events:auto}
.logo{font-family:var(--font-logo);font-weight:700;font-size:clamp(64px,5.2vw,100px);line-height:.72;letter-spacing:-.02em}
.talk{font-weight:500;font-size:20px;padding-top:17px}
.talk:hover{border-bottom:3px solid var(--black)}

/* hero */
.hero{background:var(--yellow);min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:8vw}  /* pantalla completa al abrir, sin franja blanca; svh evita el salto en móvil */
.hero h1{font-weight:700;font-size:clamp(30px,3.44vw,66px);line-height:1.2;text-transform:uppercase;
  text-align:center;max-width:1560px;letter-spacing:normal}

/* section titles */
section h2{font-weight:700;font-size:clamp(36px,3.44vw,66px);letter-spacing:normal;line-height:1.2;text-align:center;
  padding:0 20px 54px;margin:0}

/* works grid */
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 24px;padding:0 32px}
.work-card img{width:100%;aspect-ratio:5/6;object-fit:cover;border-radius:var(--radius)}
.work-card h3{font-weight:600;font-size:clamp(19px,1.6vw,25px);text-transform:uppercase;margin-top:14px;letter-spacing:-.01em}
.work-card:hover img{opacity:.88}

/* secciones home (antes amarillas) */
.yellow{background:var(--yellow);padding:90px 0}

/* services — árbol sobre negro */
.services{background:var(--black);color:var(--white);padding:90px 0}
.services h2{color:var(--white)}
.services-tree{max-width:1178px;margin:0 auto;padding:0 32px}
.service-row{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:40px 0;align-items:center}
.service-name{position:relative;text-align:right;padding-right:64px}
.service-name h3{font-weight:700;font-size:clamp(26px,2.4vw,40px);line-height:1.15;letter-spacing:normal}
.service-name::after{content:"";position:absolute;right:0;top:50%;width:46px;height:1px;background:var(--white)}
.service-branch{list-style:none;align-self:center;position:relative;padding-left:0}
.service-branch::before{content:"";position:absolute;left:0;top:27px;bottom:27px;width:1px;background:var(--white)}  /* 27px = centro exacto de la primera/última rama: el tronco no sobresale */
.service-branch li{position:relative;padding:11px 0 11px 56px;font-weight:500;font-size:clamp(17px,1.2vw,21px)}
.service-branch li::before{content:"";position:absolute;left:0;top:50%;width:40px;height:1px;background:var(--white)}


/* clients — top 30, 3 columnas alineadas */
.clients-list{margin:0 auto;padding:0 40px;display:flex;flex-wrap:wrap;justify-content:center;
  gap:18px 44px;max-width:1600px}
.clients-list span{font-weight:300;font-size:clamp(17px,1.4vw,21px)}


/* la sección works necesita su propio respiro (el h2 ya no lleva padding-top) */
.works{padding:90px 0}
/* footer amarillo en la home (continúa la sección de clientes) */
.site-footer.yellow-footer{background:var(--yellow);padding:0 20px 40px}

/* footer — blanco, logo centrado + copyright */
.site-footer{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:26px 20px 22px;background:var(--white);color:var(--black)}
.footer-logo{width:100px;height:auto}
.site-footer p{font-size:15px;font-weight:400}

/* ---------- project page (formato original medido a 1920px) ---------- */
.project{max-width:1560px;margin:0 auto;padding:0 24px 60px}
.project-hero img{width:100%;height:auto;max-height:88vh;object-fit:cover}
.project-hero.video{aspect-ratio:16/9;max-height:88vh}
.project-hero.video iframe{width:100%;height:100%;border:0}
.project-head{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1178px;margin:0 auto;padding:80px 24px 50px}
.project-head h1{font-weight:700;font-size:clamp(38px,3.44vw,66px);line-height:1.2;letter-spacing:normal;text-align:left}
.project-side .intro{font-size:20px;font-weight:400;line-height:1.5;margin:0 0 22px;max-width:none}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-top:36px}
.meta h5{font-weight:700;font-size:22px;margin-bottom:2px}
.meta p{font-size:20px;font-weight:400;line-height:1.5;margin:0 0 20px}
.project h2{font-weight:700;font-size:clamp(28px,3.44vw,52px);letter-spacing:normal;text-align:center;padding:60px 10px 24px}
.project p{max-width:880px;margin:0 auto 22px;font-size:19px}
.project .stat{font-weight:700;font-size:clamp(22px,2.6vw,34px);line-height:1.35;text-align:center;max-width:1050px;padding:30px 0}
.gallery{display:grid;gap:18px;margin:40px 0}
.gallery.bleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);gap:0}

.gallery.bleed figure{padding:0}
.gallery[style]{padding:56px 8vw}
.gallery.cols-3{grid-template-columns:repeat(3,1fr)}
.gallery.cols-2{grid-template-columns:repeat(2,1fr)}
.gallery.cols-1{grid-template-columns:1fr}
.gallery.cols-4{grid-template-columns:repeat(4,1fr)}
.gallery.cols-5{grid-template-columns:repeat(5,1fr)}
.gallery.cols-6{grid-template-columns:repeat(6,1fr)}
.gallery img{width:100%;height:100%;object-fit:cover}
.video-wrap{position:relative;max-width:1100px;margin:30px auto;aspect-ratio:16/9}
.video-wrap iframe{width:100%;height:100%;border:0}
.next-project{display:block;text-align:right;font-weight:500;font-size:clamp(17px,1.5vw,22px);
  padding:40px 10px 0;margin:40px 0 0}
.next-project:hover{font-weight:600}
.next-project.standalone{margin:0}

/* slider horizontal */
.slider{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;margin:40px 0;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.slider::-webkit-scrollbar{display:none}
.slider img{width:62%;flex:none;scroll-snap-align:center;object-fit:cover}

/* fila imagen + texto */
.caption-row{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;max-width:1178px;margin:40px auto}
.caption-row.flip{grid-template-columns:1fr 1.3fr}
.caption-row.flip img{order:2}

.caption-row .caption{font-size:19px}
.caption-row .caption h6{font-weight:700;font-size:24px;margin-bottom:6px}

/* subtítulo de proyecto */
.project-head .subtitle{font-weight:700;font-size:clamp(20px,1.6vw,30px);margin-top:6px}

/* páginas sin hero: dejar aire bajo el header fijo */
.site-header+.project .project-head{padding-top:150px}

/* ---------- contact ---------- */
.yellow-page{background:var(--yellow);min-height:88vh;display:flex;flex-direction:column;justify-content:center;
  align-items:center;gap:18px;padding:40px}
.contact h1{font-weight:800;font-size:clamp(34px,5vw,70px);letter-spacing:-.02em;text-align:center}
.contact-line a{font-weight:700;font-size:clamp(22px,3vw,40px)}
.contact-line a:hover{border-bottom:4px solid var(--black)}
.contact-social{display:flex;gap:26px;margin-top:30px;font-weight:700;font-size:18px}

/* responsive */
@media(max-width:900px){
  .caption-row,.caption-row.flip{grid-template-columns:1fr}
  .caption-row.flip img{order:0}
  .gallery.cols-4,.gallery.cols-5,.gallery.cols-6{grid-template-columns:repeat(2,1fr)}
  .works-grid{grid-template-columns:1fr 1fr}
  .service-row{grid-template-columns:1fr;gap:22px}
  .gallery.cols-3{grid-template-columns:1fr 1fr}
  .project-head{grid-template-columns:1fr;gap:34px;padding-top:50px}
}
@media(max-width:600px){
  .works-grid{grid-template-columns:1fr}
  .gallery.cols-3,.gallery.cols-2{grid-template-columns:1fr}
  .site-footer{flex-direction:row;justify-content:center;align-items:center;gap:14px;padding:16px 14px}
  .footer-logo{width:76px}
  .site-footer p{font-size:14px}
}

/* ---------- páginas de proyecto compiladas desde WordPress (sistema 12 col) ---------- */
.wp-page{max-width:none;padding:0 0 40px}
.wp-flow{display:flow-root;max-width:1178px;margin:0 auto;padding:0 14px}
.wp-flow .wpm{float:left;padding-left:10px;padding-right:10px}
.wp-flow .wpm.bleed,.wpm-group.bleed{padding-left:0;padding-right:0}
.wp-flow>.wpm-text:first-child{margin-top:150px}
.wpm{box-sizing:border-box}
.wpm-text h1{font-weight:700;font-size:clamp(38px,3.44vw,66px);line-height:1.2}
.wpm-text h2{font-weight:700;font-size:clamp(30px,2.7vw,52px);line-height:1.2;margin:10px 0}
.wpm-text h3{font-weight:700;font-size:clamp(22px,1.6vw,30px);line-height:1.25;margin:6px 0}
.wpm-text h4{font-weight:700;font-size:clamp(20px,1.4vw,26px);line-height:1.3;margin:6px 0}
.wpm-text h5{font-weight:700;font-size:22px;margin-bottom:2px}
.wpm-text h6{font-weight:700;font-size:19px}
.wpm-text p{font-size:20px;font-weight:400;line-height:1.5;margin:0;max-width:none}
.wpm-image img{width:100%;height:auto;display:block}
.wpm-image.bleed{width:100vw;margin-left:calc(50% - 50vw)}

.wpm-grid{display:grid;gap:0}
.wpm-grid.cols-1{grid-template-columns:1fr;gap:40px}
.wpm-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.wpm-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.wpm-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.wpm-grid.cols-5{grid-template-columns:repeat(5,1fr)}
.wpm-grid.cols-6{grid-template-columns:repeat(6,1fr)}
.wpm-grid img{width:100%;height:auto}
.wpm-grid.bleed{width:100vw;margin-left:calc(50% - 50vw)}

.wpm-group .wpm-groupflow{display:flow-root}
.wpm-groupflow .wpm{float:left}
.wpm-group.bleed{width:100vw;margin-left:calc(50% - 50vw)}
.wpm-group.bleed .wpm-groupflow{max-width:none;margin:0 -15px;padding:0}
.wpm-group.bleed .wpm-groupflow > .wpm{padding-left:15px;padding-right:15px}  /* el canal de 10px de cada módulo se sale de pantalla, como en el original:
     así vídeos y fotos llegan al borde sin franja blanca */
.wpm-embed{position:relative}
.wpm-embed iframe{width:100%;height:100%;border:0}
.wp-page .slider{width:100%}
@media(max-width:900px){
  .wp-flow .wpm{width:100%!important;float:none}
  /* los bleed mantienen el ancho completo de pantalla (el width:100% de arriba los rompía
     dejando el margin-left negativo → fotos descuadradas y con margen) */
  .wp-flow .wpm.bleed,.wp-flow .wpm-group.bleed{width:100vw!important;margin-left:calc(50% - 50vw)}
  /* header móvil: "talk with us" centrado verticalmente con la a del logo */
  .site-header{align-items:center}
  .talk{padding-top:0}
  .wpm-grid.cols-3,.wpm-grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .wpm-grid.cols-5,.wpm-grid.cols-6{grid-template-columns:repeat(3,1fr)}
  .wp-flow>.wpm-text:first-child{margin-top:120px}
}


/* filas con alineación del builder (grupos row-center / equal-spacing / middle / bottom) */
.wpm-groupflow.fx{display:flex;flex-wrap:wrap}
.wpm-groupflow.fx .wpm{float:none;flex-shrink:0}
.wpm-groupflow.fx-center{justify-content:center}
.wpm-groupflow.fx-between{justify-content:space-between}
.wpm-groupflow.fx-middle{align-items:center}
.wpm-groupflow.fx-bottom{align-items:flex-end}


/* slider de páginas WP (style-3 del builder): altura fija en vh, imgs a ancho natural */
.wp-page .slider{height:var(--slh,60vh);margin:0}
.wp-page .slider img{width:auto;height:100%;flex:none;object-fit:contain}
@media(max-width:900px){.wp-page .slider{height:var(--slhm,var(--slh,60vh))}}


/* celdas de grid con ratio del builder: la foto llena la celda (recorte centrado) */
.wpm-grid.fit img{aspect-ratio:var(--car,3/4);object-fit:cover;height:auto;width:100%}
.wpm-grid.fit.contain img{object-fit:contain}


/* cursor de flecha del slider: PNG de marca (white arrow), retina con image-set */
.wp-page .slider.cur-right{cursor:url('../assets/img/cursor-right.png') 22 13, e-resize;
  cursor:-webkit-image-set(url('../assets/img/cursor-right.png') 1x, url('../assets/img/cursor-right@2x.png') 2x) 22 13, e-resize;
  cursor:image-set(url('../assets/img/cursor-right.png') 1x, url('../assets/img/cursor-right@2x.png') 2x) 22 13, e-resize}
.wp-page .slider.cur-left{cursor:url('../assets/img/cursor-left.png') 22 13, w-resize;
  cursor:-webkit-image-set(url('../assets/img/cursor-left.png') 1x, url('../assets/img/cursor-left@2x.png') 2x) 22 13, w-resize;
  cursor:image-set(url('../assets/img/cursor-left.png') 1x, url('../assets/img/cursor-left@2x.png') 2x) 22 13, w-resize}
/* sin scroll-snap en los sliders WP: el snap peleaba con la navegación por clic (quedaban clavados) */
.wp-page .slider{scroll-snap-type:none;position:relative}
.wp-page .slider img{scroll-snap-align:none}


/* masonry del builder: columnas CSS, gap vertical de los ajustes (típico 0 → se tocan) */
.wpm-masonry{display:block}
.wpm-masonry.cols-2{column-count:2}
.wpm-masonry.cols-3{column-count:3}
.wpm-masonry.cols-4{column-count:4}
.wpm-masonry img{width:100%;height:auto;display:block;break-inside:avoid;margin-bottom:var(--mgv,0)}
@media(max-width:900px){.wpm-masonry.cols-3,.wpm-masonry.cols-4{column-count:2}}


/* un bleed dentro de una fila centrada (flex) ya lo centra el propio flex:
   el margen negativo lo desplazaría dos veces */
.wpm-groupflow.fx > .wpm.bleed{margin-left:0!important}


/* aire por encima de los títulos de sección dentro de las páginas de proyecto
   (el original los deja muy pegados; aquí se respira igual en toda la web) */
/* JERARQUÍA DE ESPACIOS (una sola fuente para toda la web):
   · 80px  = separación entre bloques (foto/vídeo ↔ sección siguiente)
   · 40px  = texto que introduce a su foto/vídeo (van juntos)
   · 30px  = título de sección ↔ su párrafo */
.wp-flow .wpm-text > h1:first-child,
.wp-flow .wpm-text > h2:first-child{margin-top:0;margin-bottom:var(--gap-title)}
.wp-flow > .wpm-text:first-child > h1:first-child{margin-top:0}


/* ritmo vertical de las filas a pantalla completa: mismo aire arriba y abajo.
   Dos bloques a sangre seguidos se tocan (no se separan) */
/* Los bloques a pantalla completa heredan su separación interna (--blockgap):
   fotos pegadas → bloques pegados; 30px entre fotos → 30px entre bloques.
   Contra un bloque de texto, el respiro es el de sección (80px). */
.wp-flow > .wpm.bleed{margin-top:var(--blockgap,80px);margin-bottom:0}
/* el espacio lo pone SIEMPRE el bloque de abajo: así dos bloques a pantalla
   completa quedan pegados sin excepción */
.wp-flow > .wpm-group:not(.ends-text) + .wpm.bleed{margin-top:var(--blockgap,80px)}
/* dos bloques a sangre seguidos: si arriba es una FOTO sola, se pegan (0);
   si arriba es un bloque compuesto (vídeos, banda), separación de galería (30) */
.wp-flow > .wpm-image.bleed + .wpm.bleed{margin-top:0}
.wp-flow > .wpm-group.bleed + .wpm.bleed,
.wp-flow > .wpm-grid.bleed + .wpm.bleed{margin-top:30px}
.wp-flow > .wpm-group.ends-text + .wpm.bleed{margin-top:var(--blockgap,var(--gap-text-media))}
.wp-flow > .wpm.bleed:first-child{margin-top:0}
.wp-flow > .wpm.bleed.no-pad{padding-top:0!important;padding-bottom:0!important}  /* gana al padding en línea del builder */
/* el padding propio del builder no se suma al respiro entre bloques */
.wp-flow > .wpm.bleed + .wpm-group .wpm:first-child{padding-top:0}
.wp-flow > .wpm.bleed + .wpm-group{margin-top:var(--gap-section)}
/* párrafo suelto entre dos bloques: aire simétrico arriba/abajo (sin margen de sección) */
.wp-flow > .wpm.bleed + .wpm-group.para-only{margin-top:0}
/* un grupo con fotos que precede a una banda de color se separa como galería (30) */
.wp-flow > .wpm-group:not(.bleed) + .wpm-group.bleed{margin-top:30px}


/* galería de mockups: cada dispositivo entero, a su proporción, alineados abajo */
.wpm-grid.mockup{align-items:end}
.wpm-grid.mockup img{width:100%;height:auto;object-fit:contain;aspect-ratio:auto}


/* en un grid mixto, los mockups (.png) se ven enteros; las fotos (.jpg) llenan */
.wpm-grid.mixed img[src$=".png"]{object-fit:contain}
/* grid mixto en zigzag: las fotos se tocan en las esquinas (sin separación) */
.wpm-grid.mixed{gap:0!important}


/* banda de color a sangre pero con el contenido centrado en el ancho de la web */
.wpm-group.bleed .wpm-groupflow.contained{max-width:1178px;margin:0 auto;padding:0 14px}

/* hero estándar de proyecto: media a pantalla completa */
.std-hero{width:100vw;height:100vh;overflow:hidden;background:#000}
.std-hero img,.std-hero video{width:100%;height:100%;object-fit:cover;display:block}
.std-hero.video iframe{width:100vw;height:100vh;border:0}
.wpm-video video{width:100%;height:auto;display:block}
@media(max-width:900px){.std-hero{height:60vh}}

/* 13/08: logo alineado con las paginas de proyecto (top 40 / left 60); en movil se mantiene el aire anterior */
@media (max-width:768px){.site-header{padding:18px 32px}}

/* 13/08: logo = mismo PNG que las paginas de proyecto, identico por construccion */
.logo img{display:block;width:88px;height:60px}