/* ─────────────────────────────────────────────────────────────
   Ajustes de publicación encima del diseño de Claude Design.
   deploy.command los agrega al index.html al publicar; el HTML
   original no se toca. Usan !important porque el diseño trae los
   estilos escritos directamente en cada elemento.
   ───────────────────────────────────────────────────────────── */

/* ── Desplazamiento suave al navegar por el menú ── */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
[id]{scroll-margin-top:84px}  /* que el header fijo no tape el inicio de la sección */
/* Las secciones entran solo con fundido, sin subir 36px: si suben mientras la
   página se desliza hacia ellas, el deslizamiento se queda corto y la sección
   termina debajo del header. Las cards de adentro conservan su animación. */
section[data-reveal]{transform:none !important}

/* ── Header fijo con degradado al bajar ── */
[data-screen-label="Hero"] > div{padding-top:91px !important}  /* el espacio que ocupaba el header */
[data-screen-label="Hero"] header{
  position:fixed !important;top:12px;left:12px;right:12px;z-index:100 !important;
  transition:top .35s ease,left .35s ease,right .35s ease,padding .35s ease;
}
[data-screen-label="Hero"] header::before{
  content:"";position:absolute;inset:0 0 -48px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(17,17,17,.72) 0%,rgba(17,17,17,.42) 55%,rgba(17,17,17,0) 100%);
  opacity:0;transition:opacity .35s ease;
}
html.nv-scrolled [data-screen-label="Hero"] header{top:0;left:0;right:0;padding:18px 44px !important}
html.nv-scrolled [data-screen-label="Hero"] header::before{opacity:1}

/* "Agenda una visita" nunca se parte en varias líneas */
[data-screen-label="Hero"] header > div:last-child a{white-space:nowrap !important}

/* ── Cards de "Projects": abren la galería ── */
[data-galeria]{cursor:zoom-in}

/* ── Celular (hasta 760px) ── */
@media (max-width: 760px){
  [id]{scroll-margin-top:72px}

  /* Header: logo + botón de menú; el menú de texto se oculta */
  [data-screen-label="Hero"] > div{padding-top:76px !important}
  [data-screen-label="Hero"] header{grid-template-columns:1fr auto !important;gap:10px !important;padding:20px !important;left:8px;right:8px}
  html.nv-scrolled [data-screen-label="Hero"] header{padding:14px 28px !important}
  [data-screen-label="Hero"] header nav{display:none !important}
  [data-screen-label="Hero"] header img{width:200px !important;height:auto !important}
  [data-screen-label="Hero"] header > div:last-child a:first-child{padding:0 12px !important;letter-spacing:.08em !important}
  /* el círculo ↗ se convierte en botón de menú ☰ (ajustes.js abre el menú) */
  [data-screen-label="Hero"] header > div:last-child a:last-child{
    font-size:0 !important;
    background-image:linear-gradient(#111,#111),linear-gradient(#111,#111),linear-gradient(#111,#111) !important;
    background-size:16px 1.5px !important;background-repeat:no-repeat !important;
    background-position:center calc(50% - 5px),center,center calc(50% + 5px) !important;
  }

  /* Hero: el texto y la tarjeta "4 líneas" se apilan en vez de encimarse */
  [data-screen-label="Hero"] > div > div:nth-of-type(2){padding:24px 20px !important}
  [data-screen-label="Hero"] > div > p,
  [data-screen-label="Hero"] > div > div:last-child{position:relative !important;left:auto !important;right:auto !important;bottom:auto !important;transform:none !important}
  [data-screen-label="Hero"] > div > p{max-width:280px !important;margin:0 20px 16px !important}
  [data-screen-label="Hero"] > div > div:last-child{width:auto !important;margin:0 20px 20px !important}
  [data-screen-label="Hero"] > div > a{display:none !important}

  /* Secciones: las columnas pasan a una sola */
  section{padding-left:20px !important;padding-right:20px !important}
  [data-screen-label="Hero"],[data-screen-label="Líneas de negocio"],[data-screen-label="Contacto"]{padding-left:8px !important;padding-right:8px !important}
  section > div[style*="border-radius"]{padding-left:20px !important;padding-right:20px !important}
  [data-screen-label="Nosotros"]{padding-top:96px !important;padding-bottom:96px !important}
  [data-screen-label="Inspiración"] div[style*="aspect-ratio"]{min-height:0 !important}
  section:not([data-screen-label="Hero"]) div[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important}
  #lineas span[style*="text-align:right"],#lineas span[style*="text-align: right"]{text-align:left !important;order:-1}

  /* Líneas de negocio: carrusel deslizable en vez de 4 cards apiladas.
     Los separadores ::before/::after (no padding) para que el margen del
     final no se recorte al deslizar. */
  #lineas div[style*="repeat(4"]{
    display:flex !important;gap:12px !important;max-width:none !important;
    margin:0 -20px !important;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-left:20px;scrollbar-width:none;
  }
  #lineas div[style*="repeat(4"]::-webkit-scrollbar{display:none}
  #lineas div[style*="repeat(4"]::before,
  #lineas div[style*="repeat(4"]::after{content:"";flex:0 0 8px}
  #lineas div[style*="repeat(4"] > a{flex:0 0 80% !important;scroll-snap-align:start}
  #lineas div[style*="repeat(4"] > a span:first-child{font-size:12px !important}
  #lineas div[style*="repeat(4"] > a span:last-child{font-size:16px !important;line-height:1.35 !important}
}

/* ── Celular chico (hasta 480px): logo grande, solo el botón de menú ── */
@media (max-width: 480px){
  [data-screen-label="Hero"] header img{width:min(200px,52vw) !important}
  [data-screen-label="Hero"] header > div:last-child a:first-child{display:none !important}
}

/* ── Menú de celular (lo crea ajustes.js, fuera del diseño) ── */
.nv-menu{
  position:fixed;inset:0;z-index:1000;background:#111;color:#fff;
  display:flex;flex-direction:column;padding:32px 28px;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;
}
html.nv-menu-open{overflow:hidden}
html.nv-menu-open .nv-menu{opacity:1;visibility:visible;transition:opacity .3s ease}
.nv-menu__top{display:flex;justify-content:space-between;align-items:center}
.nv-menu__logo{width:min(200px,52vw);height:auto;display:block}
.nv-menu__cerrar{width:36px;height:36px;border-radius:999px;border:0;background:#fff;color:#111;font-size:15px;line-height:1;cursor:pointer}
.nv-menu nav{flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px}
.nv-menu nav a{display:flex;align-items:baseline;gap:14px;font-size:clamp(34px,11vw,48px);letter-spacing:-.035em;line-height:1.1;color:#fff}
.nv-menu nav a small{font-size:11px;letter-spacing:.06em;color:#8d8d8d}
.nv-menu__cta{align-self:flex-start;display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:999px;background:#fff;color:#111 !important;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;white-space:nowrap}
@media (min-width: 761px){.nv-menu{display:none}}

/* ── Galería de proyectos (la crea ajustes.js) ── */
.nv-galeria{
  position:fixed;inset:0;z-index:1100;background:rgba(10,10,10,.9);
  display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;
}
html.nv-galeria-open{overflow:hidden}
html.nv-galeria-open .nv-galeria{opacity:1;visibility:visible;transition:opacity .3s ease}
.nv-galeria__panel{
  position:relative;width:min(1100px,100%);max-height:100%;background:#111;color:#fff;
  border-radius:clamp(24px,3vw,40px);padding:12px;display:flex;flex-direction:column;gap:12px;
  transform:translateY(16px);transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
html.nv-galeria-open .nv-galeria__panel{transform:none}
.nv-galeria__foto{position:relative;aspect-ratio:16/10;max-height:70vh;border-radius:clamp(18px,2.4vw,30px);overflow:hidden;background:#1d1d1d}
.nv-galeria__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nv-galeria__cerrar{
  position:absolute;top:24px;right:24px;z-index:2;width:38px;height:38px;border-radius:999px;border:0;
  background:#fff;color:#111;font-size:15px;line-height:1;cursor:pointer;
}
.nv-galeria__info{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:10px 14px 14px}
.nv-galeria__texto{display:flex;flex-direction:column;gap:6px;min-width:0}
.nv-galeria__disciplina{font-size:11px;letter-spacing:.06em;color:#8d8d8d}
.nv-galeria__nombre{margin:0;font-size:clamp(22px,2.4vw,34px);font-weight:400;letter-spacing:-.03em;line-height:1.05}
.nv-galeria__desc{margin:0;font-size:14px;line-height:1.5;color:#b5b5b5;max-width:52ch}
.nv-galeria__nav{display:flex;align-items:center;gap:6px;flex-shrink:0}
.nv-galeria__cuenta{font-size:11px;letter-spacing:.1em;color:#8d8d8d;margin-right:8px}
.nv-galeria__flecha{width:38px;height:38px;border-radius:999px;border:0;background:#fff;color:#111;font-size:15px;cursor:pointer;transition:background .25s}
.nv-galeria__flecha:hover,.nv-galeria__cerrar:hover{background:#e6e6e6}
.nv-galeria--una .nv-galeria__nav{display:none}
@media (max-width: 760px){
  .nv-galeria__foto{aspect-ratio:4/5}
  .nv-galeria__info{flex-direction:column;align-items:stretch}
  .nv-galeria__nav{justify-content:flex-end}
  .nv-galeria__cerrar{top:22px;right:22px}
}

/* ── Video en grande con sonido (lo crea ajustes.js) ── */
.nv-video{
  position:fixed;inset:0;z-index:1100;background:rgba(10,10,10,.92);
  display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;
}
html.nv-video-open{overflow:hidden}
html.nv-video-open .nv-video{opacity:1;visibility:visible;transition:opacity .3s ease}
.nv-video__player{width:min(1280px,100%);max-height:86vh;border-radius:clamp(18px,2.4vw,30px);background:#000;display:block}
.nv-video__cerrar{
  position:absolute;top:clamp(14px,2.4vw,28px);right:clamp(14px,2.4vw,28px);z-index:2;
  width:38px;height:38px;border-radius:999px;border:0;background:#fff;color:#111;font-size:15px;line-height:1;cursor:pointer;
}
.nv-video__cerrar:hover{background:#e6e6e6}
[data-video-grande]:focus-visible{outline:2px solid #111;outline-offset:4px}

@media (prefers-reduced-motion: reduce){
  .nv-galeria,.nv-galeria__panel,.nv-menu,.nv-video{transition:none !important}
}