/*
 * Housen: header, megamenú, menú mobile y footer (todas las páginas).
 * Todo va dentro de .hs para no tocar el contenido de Elementor ni tomar los colores de links y botones de Hello.
 */

@font-face{
  font-family:"Lastik";
  src:url("../fonts/Lastik-Free.woff2") format("woff2");
  font-display:swap;
}

:root{
  --hs-bg:#e0d9d1;      /* fondo del proyecto, header y menús */
  --hs-light:#e0d9d1;   /* claro de marca: textos sobre el marrón */
  --hs-plan:#e3e0d9;    /* fondo de las láminas y de las fotos mientras cargan */
  --hs-ink:#171615;
  --hs-brown:#2d2117;
  --hs-dark:#2d2017;    /* marrón de marca: contacto, footer y menú mobile */
  --hs-text:#3a332d;
  --hs-muted:#5f5750;
  --hs-line:rgba(45,33,23,.18);
  --hs-gold:#b8975a;

  --hs-display:"Lastik","Times New Roman",serif;
  --hs-body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --hs-r:12px;
  --hs-r-sm:6px;
  --hs-r-xl:100px;
  --hs-gutter:clamp(16px,4vw,48px);
  --hs-max:1240px;
  --hs-ease:cubic-bezier(.22,.61,.36,1);
  --hs-header-h:64px;
  --hs-top:var(--wp-admin--admin-bar--height,0px);
}
@media (max-width:760px){:root{--hs-header-h:56px}}
@media (max-width:640px){:root{--hs-r-xl:48px}}
@media (max-width:600px){:root{--hs-top:0px}}   /* en celulares la barra de WordPress no queda fija */

/* ===== Base de los bloques del tema ===== */
.hs,.hs *,.hs ::before,.hs ::after{box-sizing:border-box}
.hs{font-family:var(--hs-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.hs a{color:inherit;text-decoration:none;background:none}
.hs button{-webkit-appearance:none;appearance:none;width:auto;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:inherit;text-transform:none;white-space:normal;-webkit-user-select:auto;user-select:auto;transition:none;cursor:pointer}
.hs ul{list-style:none;margin:0;padding:0}
.hs li{margin:0;padding:0}
.hs p{margin:0}
.hs img{display:block;max-width:100%;height:auto;border:0}
.hs svg{display:block;flex:none}
.hs :focus-visible{outline:2px solid var(--hs-gold);outline-offset:3px;border-radius:4px}

.hs-wrap{width:100%;max-width:var(--hs-max);margin-inline:auto;padding-inline:var(--hs-gutter)}
.hs-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hs-skip{position:fixed;left:16px;top:-60px;z-index:400;padding:10px 16px;border-radius:var(--hs-r-sm);background:var(--hs-brown);color:#fff;font:500 15px/1.2 var(--hs-body);text-decoration:none;transition:top .2s}
.hs-skip:focus{top:16px;color:#fff}

/* Botón de marca (Contactanos, formulario, cerrar recorrido) */
.hs .hs-btn,.hs-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border:0;border-radius:var(--hs-r);background:var(--hs-brown);color:#fff;font:500 15px/1 var(--hs-body);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .3s,color .3s}
.hs .hs-btn:hover,.hs-btn:hover{background:var(--hs-ink);color:#fff}
.hs-btn svg{width:16px;height:16px;flex:none;fill:currentColor}
.hs-btn--block{width:100%}

/* ===== Header ===== */
/* Transparente arriba; al bajar toma el beige de marca con desenfoque y una sombra suave */
.hs-header{position:fixed;left:0;right:0;top:var(--hs-top);z-index:100;padding-top:env(safe-area-inset-top,0px);background:rgba(224,217,209,0);color:var(--hs-brown);box-shadow:0 1px 0 rgba(45,32,23,0),0 8px 18px -12px rgba(45,32,23,0);transition:background-color .35s var(--hs-ease),box-shadow .35s var(--hs-ease),color .35s var(--hs-ease)}
.hs-header.is-scrolled{background:rgba(224,217,209,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(45,32,23,.06),0 8px 18px -12px rgba(45,32,23,.4)}
/* con el megamenú abierto, header y panel forman una sola hoja blanca */
.hs-header.has-mega{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--hs-brown);box-shadow:0 1px 0 rgba(45,32,23,0),0 8px 18px -12px rgba(45,32,23,0)}
.hs-header__in{max-width:var(--hs-max);height:var(--hs-header-h);margin-inline:auto;padding-inline:var(--hs-gutter);display:flex;align-items:center;gap:clamp(20px,3vw,40px)}
.hs .hs-logo{flex:none;display:block;color:inherit}
.hs-logo svg{display:block;width:auto;height:19px}

.hs-nav{display:flex;align-items:center;gap:4px}
.hs .hs-nav__link{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;color:inherit;font:400 15px/1.2 var(--hs-body);text-decoration:none;text-underline-offset:6px}
.hs .hs-nav__link:hover,.hs .hs-nav__trigger[aria-expanded="true"]{color:inherit;text-decoration:underline;text-decoration-thickness:1px}
.hs-nav__trigger svg{width:12px;height:12px;transition:transform .3s var(--hs-ease)}
.hs-nav__trigger[aria-expanded="true"] svg{transform:rotate(180deg)}

.hs-header__end{display:flex;align-items:center;gap:14px;margin-left:auto}
.hs .hs-header__cta{min-height:40px;padding:0 18px;font-size:14px}
.hs-redes{display:flex}
.hs .hs-icobtn{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--hs-r);color:inherit;text-decoration:none;transition:background-color .25s}
.hs .hs-icobtn:hover{background:rgba(45,33,23,.07);color:inherit}
.hs-icobtn svg{width:18px;height:18px;fill:currentColor}
.hs .hs-burger{display:none;width:44px;height:44px;margin-right:-10px;padding:0;color:inherit}
.hs-burger span{display:block;width:22px;height:1.5px;margin:6px auto;background:currentColor}

/* Header claro: logo y links claros sobre la foto de arriba, hasta que se hace scroll */
.hs-header-claro .hs-header:not(.is-scrolled):not(.has-mega){color:var(--hs-light)}
.hs-header-claro .hs-header:not(.is-scrolled):not(.has-mega) .hs-icobtn:hover{background:rgba(255,255,255,.14)}
.hs-header-claro .hs-header:not(.is-scrolled):not(.has-mega) .hs-header__cta{background:var(--hs-light);color:var(--hs-brown)}
.hs-header-claro .hs-header:not(.is-scrolled):not(.has-mega) .hs-header__cta:hover{background:#fff;color:var(--hs-brown)}

/* Megamenú de proyectos (escritorio) */
.hs-mega{position:absolute;top:100%;left:0;right:0;background:#fff;color:var(--hs-brown);box-shadow:0 1px 0 rgba(45,32,23,.06),0 8px 18px -12px rgba(45,32,23,.4);opacity:0;transform:translateY(-6px);transition:opacity .25s var(--hs-ease),transform .25s var(--hs-ease)}
.hs-mega.is-open{opacity:1;transform:none}
.hs-mega__in{max-width:var(--hs-max);margin-inline:auto;padding:28px var(--hs-gutter) 40px}
.hs-mega__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:24px}
.hs .hs-mega__title{margin:0;color:var(--hs-ink);font:400 26px/1 var(--hs-display);letter-spacing:.3px}
.hs .hs-mega__all{color:var(--hs-brown);font-size:15px;text-decoration:underline;text-underline-offset:4px}
.hs-mega__grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:16px}
.hs-mega__grid .hs-pcard{color:var(--hs-ink)}
.hs-mega.is-open .hs-pcard{animation:hs-card .45s var(--hs-ease) both;animation-delay:calc(var(--i) * 45ms)}
@keyframes hs-card{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hs-scrim{position:fixed;inset:0;z-index:90;background:rgba(15,13,11,.3);opacity:0;transition:opacity .25s}
.hs-scrim.is-open{opacity:1}

/* Card de proyecto (megamenú y menú mobile) */
.hs .hs-pcard{display:block;text-decoration:none}
.hs-pcard__img{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--hs-r);overflow:hidden;background:var(--hs-plan)}
.hs .hs-pcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--hs-ease)}
.hs-pcard:hover .hs-pcard__img img{transform:scale(1.04)}
.hs-pcard__tag{position:absolute;left:10px;padding:6px 10px;border-radius:var(--hs-r-sm);font:500 12px/1 var(--hs-body);white-space:nowrap}
.hs-pcard__tag--aca{top:10px;background:var(--hs-brown);color:#fff}
.hs-pcard__tag--360{bottom:10px;background:rgba(255,255,255,.92);color:var(--hs-brown)}
.hs-pcard__nombre{display:block;margin-top:12px;font:400 20px/1.1 var(--hs-display);letter-spacing:.3px;text-underline-offset:4px}
.hs-pcard:hover .hs-pcard__nombre{text-decoration:underline;text-decoration-thickness:1px}
.hs-pcard__info{display:block;margin-top:6px;color:var(--hs-text);font-size:14px;line-height:1.35}
.hs-pcard__lugar{display:block;margin-top:2px;color:var(--hs-muted);font-size:14px;line-height:1.35}

/* ===== Menú mobile a pantalla completa, en el marrón de marca ===== */
.hs-mm{--mm-line:rgba(224,217,209,.16);position:fixed;inset:0;z-index:100001;display:flex;flex-direction:column;background:var(--hs-dark);color:var(--hs-light);overflow-y:auto;overscroll-behavior:contain;opacity:0;transition:opacity .3s var(--hs-ease)}
.hs-mm.is-open{opacity:1}
.hs-mm__bar{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;height:calc(56px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);padding-inline:var(--hs-gutter);background:var(--hs-dark);border-bottom:1px solid var(--mm-line)}
.hs .hs-mm__close{width:44px;height:44px;display:grid;place-items:center;margin-right:-10px;color:var(--hs-light)}
.hs-mm__close svg{width:22px;height:22px}
.hs-mm__nav{padding:4px var(--hs-gutter) 0}
.hs .hs-mm__link{display:flex;align-items:baseline;gap:10px;padding:16px 0;border-bottom:1px solid var(--mm-line);color:var(--hs-light);font:400 30px/1.05 var(--hs-display);letter-spacing:.3px;text-decoration:none}
.hs-mm__link small{color:rgba(224,217,209,.6);font:400 14px/1 var(--hs-body);letter-spacing:0}
.hs .hs-mm__group .hs-mm__link{border-bottom:0;padding-bottom:14px}
.hs-mm__projects{border-bottom:1px solid var(--mm-line)}
.hs-mm__cards{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--hs-gutter);margin-inline:calc(-1 * var(--hs-gutter));padding:0 var(--hs-gutter) 22px;scrollbar-width:none}
.hs-mm__cards::-webkit-scrollbar{display:none}
.hs-mm__cards li{flex:0 0 min(45%,180px);scroll-snap-align:start}   /* entran dos y se asoma la tercera */
.hs-mm__cards .hs-pcard{color:var(--hs-light)}
.hs-mm__cards .hs-pcard__img{background:#3a2c22}
.hs-mm__cards .hs-pcard__tag--aca{background:var(--hs-light);color:var(--hs-brown)}
.hs-mm__cards .hs-pcard__nombre{margin-top:10px;font-size:16px}
.hs-mm__cards .hs-pcard__info{margin-top:4px;color:rgba(224,217,209,.8);font-size:13px}
.hs-mm__cards .hs-pcard__lugar{color:rgba(224,217,209,.6);font-size:13px}
/* contacto: links simples con ícono */
.hs-mm__foot{display:grid;grid-template-columns:auto auto;justify-content:start;gap:12px 28px;margin-top:auto;padding:28px var(--hs-gutter) calc(32px + env(safe-area-inset-bottom,0px));font-size:15px}
.hs .hs-mm__foot a{display:inline-flex;align-items:center;gap:10px;color:var(--hs-light);text-decoration:none;text-underline-offset:4px}
.hs .hs-mm__foot a:hover{text-decoration:underline}
.hs-mm__foot svg{width:15px;height:15px;fill:currentColor}
.hs-mm.is-open .hs-mm__nav>*{animation:hs-mm .5s var(--hs-ease) both}
.hs-mm.is-open .hs-mm__nav>:nth-child(2){animation-delay:.05s}
.hs-mm.is-open .hs-mm__nav>:nth-child(3){animation-delay:.1s}
.hs-mm.is-open .hs-mm__nav>:nth-child(n+4){animation-delay:.15s}
@keyframes hs-mm{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hs-mm[hidden],.hs-mega[hidden],.hs-scrim[hidden]{display:none}

@media (max-width:760px){
  .hs-nav,.hs-header__redes,.hs-mega,.hs-scrim{display:none}
  .hs-header__end{gap:6px}
  .hs .hs-header__cta{min-height:36px;padding:0 14px}
  .hs .hs-burger{display:block}
}
@media (min-width:761px){.hs-mm{display:none}}

/* ===== Footer ===== */
.hs-footer{position:relative;isolation:isolate;background:var(--hs-dark);color:var(--hs-light)}
/* la foto del casco, al 10%, marca dónde empieza el footer */
.hs-footer::before{content:"";position:absolute;inset:0;z-index:-1;background:url("../img/footer-casco.webp") center/cover no-repeat;opacity:.1;pointer-events:none}
.hs-footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(36px,5vw,72px);padding-top:clamp(56px,7vw,88px)}
.hs .hs-footer__logo{display:inline-block;color:var(--hs-light)}
.hs-footer__logo svg{display:block;width:auto;height:30px}
.hs .hs-footer__tag{max-width:34ch;margin:20px 0 0;color:rgba(224,217,209,.75);font-size:14px;line-height:1.6}
.hs .hs-footer__h{margin:0 0 12px;padding:0;color:var(--hs-light);font:400 20px/1.1 var(--hs-display);letter-spacing:.3px;text-transform:none}
.hs-footer__links{display:grid;gap:5px}
.hs .hs-footer__links a{display:inline-flex;align-items:center;gap:10px;color:var(--hs-light);font-size:15px;line-height:1.65;text-decoration:none;text-underline-offset:4px}
.hs .hs-footer__links a:hover{color:var(--hs-light);text-decoration:underline}
.hs-footer__links svg{width:15px;height:15px;fill:currentColor}
.hs-footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(40px,5vw,64px);padding-block:clamp(20px,2.5vw,28px)}
.hs .hs-footer__copy{margin:0;color:var(--hs-light);font-size:14px}
.hs .hs-footer__sig{display:block;margin-left:auto;color:var(--hs-light);transition:opacity .25s}
.hs .hs-footer__sig:hover{opacity:.75;color:var(--hs-light)}
.hs-footer__sig svg{display:block;width:auto;height:22px}

@media (max-width:960px){
  .hs-footer__top{grid-template-columns:1fr 1fr 1fr}
  .hs-footer__intro{grid-column:1/-1}
}
@media (max-width:640px){
  .hs-footer__top{grid-template-columns:1fr 1fr;gap:40px 24px}
  /* en mobile el pie queda solo con la firma, a la izquierda */
  .hs .hs-footer__copy{display:none}
  .hs .hs-footer__sig{margin-left:0}
}

/* Páginas sin Elementor (404, búsqueda, archivos): el contenido arranca debajo del header fijo */
body:not(.hs-header-claro):not(.elementor-page):not(.hs-proyecto) .site-main{padding-top:calc(var(--hs-header-h) + 24px)}

/* La sección de contacto no queda tapada por el header al llegar desde "Contacto" */
#contacto,#hs-footer{scroll-margin-top:calc(var(--hs-header-h) + var(--hs-top) + 12px)}

@media (prefers-reduced-motion:reduce){
  .hs *,.hs *::before,.hs *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}