/* NACH! — estilos globales.
   El detalle visual vive en estilos inline sobre cada elemento (es la fuente del diseño);
   acá quedan solo las reglas que el atributo style no puede expresar. */

:root {
  /* passe-partout mobile: un solo margen de seguridad para toda la retícula
     (lo usan por igual la línea vertical y el borde derecho del hero) +
     un canal de aire fijo entre esa línea y el bloque de texto. */
  --m-margen: clamp(18px, 6vw, 32px);
  --m-canal: 26px;
}

html { scroll-behavior: smooth; background: #1B2BE8; }
  body { margin: 0; -webkit-font-smoothing: antialiased; }
  * { box-sizing: border-box; }
  a { color: inherit; text-decoration: none; }
  a:hover { color: #D65A1E; }
  ::selection { background: #D65A1E; color: #08080C; }
  .hs::-webkit-scrollbar { height: 2px; }
  .hs::-webkit-scrollbar-thumb { background: #08080C; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  @media (max-width: 680px) {
    main h1, main h2, main h3 { letter-spacing: -0.02em !important; }
    main section { padding-top: clamp(56px, 10vh, 80px) !important; padding-bottom: clamp(56px, 10vh, 80px) !important; }
    /* header móvil: la pill queda solo con el logo y la hamburguesa */
    /* la barra no entra completa: en mobile el CTA lo resuelve la barra de whatsapp */
    header[data-nav-bar] [data-pill-top] { gap: 12px !important; padding: 8px 8px 8px 18px !important; justify-content: space-between !important; }
    header[data-nav-bar] [data-pill-top] > nav[aria-label="Principal"] { display: none !important; }
    header[data-nav-bar] [data-cta-desktop] { display: none !important; }
    header[data-nav-bar] [data-menu-toggle] { display: inline-flex !important; }
    [data-menu-movil] { display: flex !important; }
    /* semáforo "open to work": vive fuera de la pill, solo en mobile */
    [data-status] { display: flex !important; }
    /* la línea vertical se ancla al mismo margen de seguridad que usa el hero */
    [data-nav-rule] { left: var(--m-margen) !important; }
    /* whatsapp deja el borde lateral y pasa a barra inferior: CTA permanente */
    a[data-wa] { writing-mode: horizontal-tb !important; top: auto !important; transform: none !important; left: 0; right: 0 !important; bottom: 0; justify-content: center; padding: 15px 0 !important; letter-spacing: 0.28em !important; }
    a[data-wa] span { writing-mode: horizontal-tb !important; }
    /* el contador molesta menos arriba de la barra */
    div[data-counter] { bottom: 62px !important; }
    /* el footer alinea todo a la izquierda al apilarse */
    div[data-foot-right] { justify-self: start !important; text-align: left !important; }
    /* la barra inferior no tapa el final del footer */
    footer { padding-bottom: 84px !important; }
    /* la pestaña vertical ya no está: recuperamos el borde derecho */
    main section { overflow-x: clip; }
    /* portada como afiche: rótulo arriba, tipografía apoyada abajo, nada de aire suelto.
       Passe-partout riguroso: margen lateral simétrico (--m-margen) a derecha, y a la
       izquierda ese mismo margen más un canal de aire fijo (--m-canal) respecto de la
       línea vertical — el bloque de texto nunca queda "pegado" a la regla. */
    main section[data-screen-label="01 Hero"] {
      min-height: 100svh;
      padding-top: 72px !important;
      padding-bottom: 78px !important;
      padding-right: var(--m-margen) !important;
      padding-left: calc(var(--m-margen) + var(--m-canal)) !important;
      gap: 22px !important;
    }
    /* el rótulo se ancla bajo la nav y el titular se centra visualmente en el aire
       restante (estética de afiche de galería, no solo "tirado" contra el margen) */
    main section[data-screen-label="01 Hero"] > div:first-child { display: grid !important; grid-template-rows: auto 1fr; }
    main section[data-screen-label="01 Hero"] > div:first-child > p { margin-bottom: 0 !important; max-width: 26ch; }
    main section[data-screen-label="01 Hero"] h1 { align-self: center; }
    /* escala fluida real con clamp(): nunca baja de 40px (roto en pantallas ínfimas)
       ni supera 96px (imponente sin tocar los bordes), acotada además por svh para
       que el alto de la barra dinámica de iOS no la desborde en horizontal */
    main section[data-screen-label="01 Hero"] h1 {
      font-size: clamp(40px, min(14.2vw, 10.2svh), 96px) !important;
      letter-spacing: -0.035em !important;
    }
    /* interlineado sincronizado con la escala: a menor tamaño de texto, más aire
       necesita el bloque para no sentirse apretado; se afloja en tres escalones
       a medida que el viewport (y por lo tanto el font-size fluido) se achica */
    main section[data-screen-label="01 Hero"] h1 { line-height: 0.94 !important; }
  }
  @media (max-width: 460px) {
    main section[data-screen-label="01 Hero"] h1 { line-height: 1.02 !important; }
  }
  @media (max-width: 360px) {
    main section[data-screen-label="01 Hero"] h1 { line-height: 1.1 !important; }
  }
  @media (max-width: 680px) {
    main section[data-screen-label="01 Hero"] > div:last-child { gap: 22px !important; padding-top: 20px !important; }
  }

/* --- estados de hover y focus extraídos del diseño --- */
.fx-1:hover { border-bottom-color: #D65A1E; color: #D65A1E; }
.fx-2:hover { transform: translateX(calc(-1 * clamp(10px, 1.6vw, 26px))); }
.fx-3:hover { transform: translateX(calc(-1 * clamp(10px, 1.6vw, 26px))); }
.fx-4:hover { transform: translateX(calc(-1 * clamp(10px, 1.6vw, 26px))); }
.fx-5:hover { color: #D65A1E; }
.fx-6:hover { padding-left: clamp(14px, 1.8vw, 20px); padding-right: clamp(14px, 1.8vw, 20px); }
.fx-7:focus { border-bottom-color: #D65A1E; }
.fx-8:focus { border-bottom-color: #D65A1E; }
.fx-9:focus { border-bottom-color: #D65A1E; }

/* --- fichas de proyecto: solo una visible --- */
.ficha { display: none; }
.ficha.is-activa { display: block; }

/* --- listado de proyectos: el elegido queda en negro pleno --- */
[data-proyecto] span { opacity: 0.4; transition: opacity 320ms ease; }
[data-proyecto].is-activo span { opacity: 1; }

/* --- modal de contacto --- */
#modal { opacity: 0; transform: translateY(4vh); pointer-events: none; }
#modal.is-abierto { opacity: 1; transform: none; pointer-events: auto; }

/* --- menú móvil cinematográfico: colapsado por defecto, la propia pill se expande --- */
[data-pill-shell] { overflow: hidden; }
[data-menu-movil] {
  display: none;
  flex-direction: column;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 520ms cubic-bezier(.16,.84,.32,1), opacity 320ms ease;
}
html.menu-abierto [data-pill-shell] { border-radius: 26px !important; }
html.menu-abierto [data-menu-movil] {
  max-height: 360px;
  opacity: 1;
  pointer-events: auto;
  transition: max-height 560ms cubic-bezier(.16,.84,.32,1), opacity 420ms ease 90ms;
}
[data-menu-item]:first-child { border-top: none !important; }
[data-menu-item]:hover, [data-menu-item]:focus { color: #D65A1E; }

/* hamburguesa -> cruz */
html.menu-abierto [data-menu-icon] span:first-child { top: 50% !important; transform: translateY(-50%) rotate(45deg) !important; }
html.menu-abierto [data-menu-icon] span:last-child { bottom: 50% !important; transform: translateY(50%) rotate(-45deg) !important; }
html.menu-abierto [data-menu-icon] span:nth-child(2) { opacity: 0; }

/* --- semáforo "OPEN TO WORK": aparece al dejar el Hero, se apaga con el menú abierto --- */
[data-status] { opacity: 0; }
[data-status].es-visible { opacity: 1; }
html.menu-abierto [data-status] { opacity: 0 !important; }
@keyframes nach-pulso { 0% { box-shadow: 0 0 0 0 rgba(61,220,114,0.55); } 70% { box-shadow: 0 0 0 7px rgba(61,220,114,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,114,0); } }
[data-status-dot] { animation: nach-pulso 2.4s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { [data-status-dot] { animation: none; } }