/* ============================================
   TOKENS — todo el control fino vive acá arriba
   ============================================ */
:root{
  --bg:            #000000;
  --fg:            #ffffff;
  --fg-dim:        rgba(255,255,255,0.62);
  --fg-faint:      rgba(255,255,255,0.38);
  --line:          rgba(255,255,255,0.14);
  --line-strong:   rgba(255,255,255,0.28);

  --font-display:  -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-body:     -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;

  --nav-h:         58.8px; /* 84px - 30% */
  --margin-x:      64px;
  --margin-x-tab:  40px;
  --margin-x-mob:  24px;

  --hover-op-rest: 0.75;
  --hover-op-hot:  1;
  --hover-speed:   0.3s;

  --radius:        0px; /* esquina viva, a propósito */

  /* Espacio negro entre fotos que se tocan entre sí (solo foto-con-foto).
     No aplica contra el borde de pantalla ni cuando hay texto/título en medio. */
  --photo-gap:     6px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; background: #000000; }
body{
  margin:0;
  padding-top: var(--nav-h); /* reserva el lugar de la barra fija, DENTRO del negro del body (no como margin afuera) */
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

/* respeta preferencia de "menos movimiento" */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* título h1 presente para SEO pero sin impacto visual (el diseño ya comunica
   la marca/producto con el logo e imágenes) */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   NAV
   ============================================ */
header.nav{
  position: fixed;
  top:0; left:0; right:0;
  height: var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 clamp(24px, 4vw, var(--margin-x)); /* se achica solo antes de colapsar, sin tocar la tipografía */
  z-index: 100;
  background: var(--bg);
}
.brand{
  display:flex;
  align-items:center;
  gap: clamp(6px, 1vw, 10px);
}
.brand img.brand-star{ height:32.4px; width:auto; display:block; } /* 21.6px + 50% */
.brand img.brand-word{ height:25.2px; width:auto; display:block; } /* 16.8px + 50% */

nav.menu{
  display:flex;
  align-items: center; /* la pastilla del selector de idioma es más alta que los links de texto (tiene padding+borde) — sin esto, los links de texto quedaban "estirados" al alto del ítem más alto y se veían descentrados */
  gap: clamp(12px, 2.5vw, 34px);
}
/* Solo los links de primer nivel (no los del desplegable de PRODUCTOS,
   que tienen su propio tamaño más chico — ver .dropdown más abajo) */
nav.menu > a,
nav.menu > .menu-item > a{
  font-size: clamp(9px, calc(1.6vw - 3px), 17.25px); /* se achica antes de llegar al modo tablet para no pisar el logo */
  letter-spacing: 0.12em;
  font-weight:500;
  color: var(--fg); /* blanco */
  transition: color 0.2s ease;
  white-space:nowrap;
}
nav.menu > a:hover, nav.menu > a:focus-visible,
nav.menu > .menu-item > a:hover, nav.menu > .menu-item > a:focus-visible{ color: var(--fg); }

/* ---------- Selector de idioma (EN / ES) ----------
   Pastilla con borde (gris al 70%, pedido explícito, no el gris más
   tenue del resto de las líneas del sitio) para diferenciarse de los
   links de sección: no lleva a otra parte del sitio, cambia el sitio
   entero de idioma. Texto de 2 letras a propósito (EN / ES, no
   "English"/"Español") para sumar el menor ancho posible a la nav —
   ver Punto Quiebre Hamburguesa (1138px) más abajo, ya medido al
   límite con el resto de los ítems reales del menú.
   Estilos completos acá (no heredados de nav.menu > a): en
   mobile/tablet esta misma clase se usa afuera de nav.menu, al lado
   del botón hamburguesa (ver .nav-burger-group / .lang-switch--mobile
   más abajo), así que no puede depender de esa herencia. */
.lang-switch{
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,0.7); /* gris al 70% */
  border-radius: 999px;
  padding: 5px 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--fg);
  white-space: nowrap;
  transition: border-color 0.2s ease;
}
.lang-switch:hover, .lang-switch:focus-visible{
  border-color: var(--fg);
}
nav.menu > a.lang-switch{
  font-size: clamp(9px, calc(1.6vw - 3px), 17.25px); /* mismo clamp que el resto de la nav desktop */
  border-width: 1.5px; /* el 1px base (ver .lang-switch) se veía muy fino en desktop; sutil, no tan grueso como para perder la pastilla liviana */
}

/* ---------- Desplegable de PRODUCTOS (desktop) ----------
   Se abre al pasar el mouse sobre el ítem del menú, o al hacer clic
   en "PRODUCTOS" (queda abierto hasta otro clic, afuera o con Esc).
   "PRODUCTOS" ya no es un link a una sección: solo abre la lista
   (ver .menu-trigger y el JS). Independiente del breakpoint
   hamburguesa: por debajo de 1138px nav.menu ya está oculto y esto
   no aplica. */
.menu-trigger{ cursor: pointer; }
.menu-item{
  position: relative;
}
.dropdown{
  position: absolute;
  top: 100%;
  left: 0; /* alineado con el borde izquierdo de "PRODUCTOS", no centrado */
  min-width: 180px;
  padding: 14px 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px; /* puntas redondeadas */
  overflow: hidden; /* para que el hover de los links no se salga de las puntas redondeadas */
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 120;
}
.menu-item:hover .dropdown,
.menu-item.open .dropdown{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.dropdown a{
  display: block;
  padding: 9px 22px;
  font-size: 18.2px; /* 14px + 30% */
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--fg); /* blanco, antes fg-dim */
  white-space: nowrap;
  transition: color 0.2s ease;
}
.dropdown a:hover, .dropdown a:focus-visible{ color: var(--fg); }

/* Agrupa el selector de idioma mobile/tablet junto al botón
   hamburguesa (mismo ítem de header.nav) para que quede pegado a su
   izquierda — sin este wrapper, al ser 2 ítems sueltos más el brand,
   justify-content:space-between de header.nav los separaba (uno al
   centro, otro al borde) en vez de dejarlos juntos.
   display:none por default (recién pasa a flex en el Punto Quiebre
   Hamburguesa más abajo): si quedara en flex siempre, en desktop
   sería un 3er ítem "fantasma" (vacío, pero activo) para
   justify-content:space-between de header.nav — nav.menu, al pasar a
   ser el ítem del medio en vez del último, se corría hacia el centro
   en vez de quedar pegado al borde derecho como siempre. */
.nav-burger-group{
  display:none;
  align-items:center;
  gap: 14px;
}
.lang-switch--mobile{
  display:none; /* aparece junto con el burger — ver Punto Quiebre Hamburguesa más abajo */
  box-sizing: border-box;
  justify-content: center;
  height: 24px;
  aspect-ratio: 26 / 18; /* misma proporción ancho:alto que .burger (26x18) */
  padding: 0;
  font-size: 11px;
  border-color: rgba(255,255,255,0.6); /* gris al 60%, más tenue que la pastilla de desktop (70%) */
  color: rgba(255,255,255,0.6); /* texto EN/ES también gris, antes blanco */
}
.burger{
  display:none;
  width:26px; height:18px;
  position:relative;
  background:none;
  border:none;
  cursor:pointer;
  z-index: 110;
}
.burger span{
  position:absolute; left:0; right:0;
  height:1px;
  background: var(--fg);
  transition: transform 0.25s ease, opacity 0.25s ease, top 0.25s ease;
}
.burger span:nth-child(1){ top:0; }
.burger span:nth-child(2){ top:8px; }
.burger span:nth-child(3){ top:16px; }
.burger.open span:nth-child(1){ top:8px; transform:rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ top:8px; transform:rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0;
  background: var(--bg);
  z-index:99;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:22px;
  padding: 0 var(--margin-x-mob);
  transform: translateY(-8px);
  opacity:0;
  pointer-events:none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mobile-menu.open{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.mobile-menu a{
  font-family: var(--font-display);
  font-size: 24px;
  font-weight:400;
  letter-spacing:0.02em;
  color:var(--fg);
}
/* ---------- Acordeón de PRODUCTOS (mobile) ----------
   No hay hover en touch, así que acá "Productos" es un botón que
   despliega la lista al tocarlo, en vez de abrir un dropdown. */
.mobile-menu-item{ width:100%; }
.mobile-menu-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight:400;
  letter-spacing:0.02em;
  color:var(--fg);
}
/* Flechita de "Productos": chevron fino (línea de 1.5px, puntas rectas,
   vértice filoso), 13x17px, blanco. Cerrado apunta a la derecha (>);
   al abrir gira 90° y apunta hacia abajo (V). Antes: triángulo relleno
   ▾ de 32px que giraba 180°. */
.mobile-menu-caret{
  display: inline-flex;
  color: var(--fg);
  transition: transform 0.25s ease;
}
.mobile-menu-caret svg{ display: block; }
.mobile-menu-item.open .mobile-menu-caret{ transform:rotate(90deg); }
.mobile-submenu{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding-left:24px; /* sangría: Trinity/Omni/Infinity/Light Mirage quedan 24px más adentro que los títulos del menú (antes 0, al ras), para que se lea que están dentro de Productos */
  max-height:0;
  overflow:hidden;
  margin-top:0;
  transition: max-height 0.3s ease, margin-top 0.3s ease;
}
.mobile-menu-item.open .mobile-submenu{
  max-height:280px;
  margin-top:16px;
}
.mobile-submenu a{
  font-family: var(--font-body);
  font-size:18px;
  font-weight:300;
  letter-spacing:0;
  color: var(--fg); /* blanco, antes fg-dim */
}
.mobile-submenu a:hover{ color:var(--fg); }

/* ============================================
   HERO SLIDESHOW
   ============================================ */
.hero{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9; /* desktop: la sección entera respeta 16:9 a lo ancho de pantalla */
  overflow:hidden;
  background:#000;
  /* el espacio para la barra ya lo reserva el padding-top del body */
}
.hero-track{
  display:flex;
  width:100%;
  height:100%;
  will-change: transform; /* el resto de las galerías del sitio deslizan con scroll nativo del navegador (siempre en su propia capa de composición, fluido gratis); ésta mueve "transform" a mano por JS en cada movimiento del dedo, así que sin este aviso el navegador no la separa en su propia capa y cada cuadro repinta de más — se sentía mucho menos fluido que el resto de los swipes del sitio. */
  /* la transición (2.1s, ease tipo AE) la aplica el JS en cada movimiento,
     así se puede desactivar para el salto invisible del loop infinito */
}
.hero-slide{
  flex: 0 0 100%;
  height:100%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-slide img{
  width:100%;
  height:100%;
  object-fit: cover; /* al ser el contenedor ya 16:9, la foto 16:9 entra completa sin recorte */
  display:block;
}
.hero-slide .ph-label{
  position:absolute;
  bottom: 28px;
  left: 28px;
  font-size:11px;
  letter-spacing:0.08em;
  color: rgba(255,255,255,0.45);
  font-family: var(--font-body);
  pointer-events:none;
}
.hero-zones{
  position:absolute; inset:0;
  display:flex;
  z-index:5;
}
.hero-zone{
  flex:1;
  background:transparent;
  border:none;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent; /* sin esto, al tocar/arrastrar en celular y tablet el navegador pinta su resaltado gris/negro por defecto encima de toda la zona (la mitad de la foto) — el arrastre funciona igual por debajo, pero se ve tapado por ese sombreado. Mismo fix que .item más abajo. */
}

.hero-dots{
  position:absolute;
  bottom: 26px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:6;
  pointer-events:none; /* referenciales, no clickeables */
}
.hero-dots span{
  width:5px; height:5px;
  border-radius:50%;
  background: rgba(255,255,255,0.35);
  transition: background 0.4s ease;
}
.hero-dots span.active{ background: rgba(255,255,255,0.95); }

/* placeholders de imagen — reemplazar por fotos reales */
.ph-1{ background: radial-gradient(circle at 50% 50%, #1c5fff 0%, #0b2a8f 28%, #030712 62%, #000 100%); }
.ph-2{ background: linear-gradient(135deg, #101010 0%, #2a2a2a 45%, #050505 100%); }
.ph-3{ background: radial-gradient(circle at 30% 70%, #331a00 0%, #0a0a0a 55%, #000 100%); }
.ph-4{ background: linear-gradient(160deg, #0a0a0a 0%, #1a1a1a 50%, #000 100%); }

/* ============================================
   LOGO SECTION
   ============================================ */
.logo-section{
  padding: 160px var(--margin-x) 140px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  background: #000000;
}
/* La estrella, el wordmark y la bajada vienen del mismo SVG y comparten
   una única escala: el wordmark y la bajada miden, en el archivo
   original, 1.64x el ancho de la estrella. Todo cuelga de --star-w. */
:root{ --star-w: 180px; } /* 150px x 1.2 (20% más) */
.logo-section .star{
  display:block;
  width: var(--star-w);
  height: auto;
  margin: 0 auto 34px;
  opacity: 0;
  transform: translateY(14px);
}
.logo-section .wordmark{
  display:block;
  width: calc(var(--star-w) * 1.64);
  height: auto;
  margin: 0 auto 8px;
}
.logo-section .tagline-img{
  display:block;
  width: calc(var(--star-w) * 1.64);
  height: auto;
  margin: 0 auto 46px;
}
.logo-section .fade-text{
  /* opacity y transform ahora los controla el JS, atados al scroll */
}
.logo-section p.desc{
  max-width: 860px;
  font-size: 20px;
  line-height: 1.75;
  color: var(--fg);
  font-weight:300;
  margin: 0 0 46px; /* igual al margen de la bajada (tagline-img), 40px -> 46px */
}
/* Seguía chico en tablet (20px, igual que en celular, hasta recién
   crecer a los 1139px). Ahora: 23px ya en tablet real (641-819px,
   20px + 15%), y de los 820px a los 1440px crece gradual hasta 26px
   (mismo criterio que .duo-columns__col p en las páginas de producto). */
@media (min-width: 641px) and (max-width: 819px){
  .logo-section p.desc{ font-size: 23px; }
}
@media (min-width: 820px){
  .logo-section p.desc{
    font-size: clamp(23px, 0.4839vw + 19.032px, 26px);
    /* Desktop: en 3 renglones en vez de 4 (860px se quedaba corto,
       medido: necesita entre 900-1350px de texto disponible según el
       tamaño de letra de cada ancho real, 23px a 820px hasta 26px de
       1440px en adelante). 1100px queda cómodo en el medio de ese
       rango en cualquier desktop real (1000px a 1920px+ probado). */
    max-width: 1100px;
  }
}
.logo-section .eyebrow{
  font-size: 20px;
  letter-spacing: 0.18em;
  color: var(--fg);
  font-weight:400;
}
/* Misma proporción que tenía con p.desc (ver arriba): mismos valores
   y quiebres. */
@media (min-width: 641px) and (max-width: 819px){
  .logo-section .eyebrow{ font-size: 23px; }
}
@media (min-width: 820px){
  .logo-section .eyebrow{ font-size: clamp(23px, 0.4839vw + 19.032px, 26px); }
}

/* ============================================
   GRID SECTIONS (Productos / Desarrollos / Trabajos)
   ============================================ */
section.grid-section{
  background: #000000;
  border-top: 1px solid transparent;
  border-image: linear-gradient(to right, #000000 0%, rgba(255,255,255,0.7) 50%, #000000 100%) 1;
  padding: 90px 0 0;
}
/* El fade solo afecta al contenido, nunca al fondo negro del bloque.
   opacity/transform ahora los controla el JS, atados al scroll. */
/* estado inicial antes de que el JS calcule el progreso real (h2 y cada tarjeta individual, no la grilla como bloque) */
section.grid-section > h2,
section.grid-section .item{
  opacity:0;
}
/* Gancho genérico de fade-in: cualquier elemento con data-reveal, en
   cualquier página (páginas de producto incluidas), arranca invisible
   hasta que el JS calcule su progreso real de scroll. */
[data-reveal]{
  opacity:0;
}
section.grid-section h2{
  text-align:center;
  font-family: 'Archivo', var(--font-display);
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  font-weight:400;
  font-size: 36px;
  letter-spacing:0.012em;
  margin: 0 0 64px;
}
/* Títulos de sección +30% en desktop (Home, Trinity y el resto de las
   páginas de producto que sigan, todas comparten esta regla). Crece
   de forma gradual con el ancho real de pantalla (no de un salto a
   los 820px) para no quedar gigante en un desktop angosto que todavía
   no llegó a los ~1440px de referencia — mismo criterio que el
   clamp() que ya usa la nav para no colapsar en anchos intermedios. */
@media (min-width: 820px){
  section.grid-section h2{
    font-size: clamp(36px, 1.7391vw + 21.7565px, 46.8px); /* 36px a los 819px, 46.8px (36px + 30%) a los 1440px */
  }
}

.item-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  /* Solo separación horizontal entre columnas (foto toca foto).
     Sin row-gap: entre filas el texto/título ya hace de separación,
     y los bordes exteriores quedan al ras de la pantalla. */
  column-gap: var(--photo-gap);
  row-gap: 0;
}

.item{
  display:block;
  position:relative;
  border: none;
  background:none;
  padding:0;
  text-align:left;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.item .thumb{
  width:100%;
  aspect-ratio: 1 / 1; /* la foto es exactamente cuadrada */
  overflow:hidden;
  position:relative;
}
.item .thumb img,
.item .thumb .ph{
  width:100%; height:100%;
  object-fit:cover;
}
/* El efecto de opacidad (75% en reposo, 100% al pasar el mouse o
   tocar) es una señal de "esto es un link" — así que va nada más en
   las tarjetas que de verdad llevan a otra página (<a>, ej: Productos,
   Desarrollos, Trabajos del Home). Las que no son link (ej: Aplicaciones
   de Omni, que son <div>) quedan siempre a su opacidad/brillo original. */
a.item .thumb img,
a.item .thumb .ph{
  opacity: var(--hover-op-rest);
  transition: opacity var(--hover-speed) ease;
}
a.item:hover .thumb img,
a.item:hover .thumb .ph,
a.item.tap-active .thumb img,
a.item.tap-active .thumb .ph{
  opacity: var(--hover-op-hot);
}
.item .thumb .ph-label{
  position:absolute;
  bottom:10px; left:10px;
  font-size:10px;
  letter-spacing:0.06em;
  color: rgba(255,255,255,0.4);
  pointer-events:none;
}
.item .cap{
  padding: 11px 22px 100px; /* 22px -> 11px (mitad) entre foto y título; 44px -> 100px de espacio hasta la línea divisoria */
}
.item .cap h3{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  margin: 0 0 5px; /* 10px -> 5px (mitad) entre título y texto */
}
#productos .item .cap h3{
  font-size: 30px; /* item 8 */
}
#desarrollos .item .cap h3,
#trabajos .item .cap h3{
  font-size: 24px; /* 20px + 20% */
  font-weight: 400; /* no en negrita, a diferencia del resto de las grillas */
}
.item .cap p{
  font-size: 20px;
  line-height:1.2; /* 1.6 -> 1.2, moderado para no romper la lectura */
  color: var(--fg); /* blanco, antes fg-dim */
  font-weight:300;
  margin:0;
}

/* placeholders de producto — reemplazar por fotos reales */
.g-1{ background: linear-gradient(135deg,#3a3a3a,#0a0a0a); }
.g-2{ background: radial-gradient(circle at 40% 40%, #ff5a1f, #7a1e00 70%, #1a0800); }
.g-3{ background: repeating-radial-gradient(circle at 50% 50%, #0d0d0d 0 8px, #2c2c2c 8px 16px); }
.g-4{ background: linear-gradient(160deg,#1a1a1a,#050505); }
.g-5{ background: linear-gradient(135deg,#5c2e6e,#170a1c); }
.g-6{ background: linear-gradient(135deg,#0d3b3b,#020808); }
.g-7{ background: linear-gradient(135deg,#123a6e,#02060f); }
.g-8{ background: linear-gradient(160deg,#3a2f1a,#0a0805); }
.g-9{ background: linear-gradient(135deg,#8a1030,#1a0308); }
.g-10{ background: linear-gradient(135deg,#2a2a2a,#050505); }
.g-11{ background: linear-gradient(135deg,#404040,#0a0a0a); }
.g-12{ background: linear-gradient(160deg,#1b1b1b,#00ff90 250%); }

/* ============================================
   FOOTER
   ============================================ */
footer.contact{
  background: #000000;
  border-top: 1px solid transparent;
  border-image: linear-gradient(to right, #000000 0%, rgba(255,255,255,0.7) 50%, #000000 100%) 1;
  padding: 220px var(--margin-x) 320px; /* 90px propio + 130px que antes era margin-top; abajo, más espacio todavía para acercar el bloque al centro */
  display:flex;
  flex-direction:column;
  align-items:center; /* centra el bloque como conjunto */
}
/* Sin línea divisoria antes del footer del Home, a pedido del
   cliente (Trabajos es la última sección antes del footer). */
#trabajos ~ footer.contact{
  border-top: none;
  border-image: none;
}
/* Mismo criterio en Bio: Prensa es la última sección antes del footer. */
#prensa ~ footer.contact{
  border-top: none;
  border-image: none;
}
/* ---------- Ventana de Contacto (contacto.html): el mismo footer,
   pero como contenido único de toda la página, centrado también en
   vertical (no solo el conjunto centrado horizontalmente, como en el
   resto de las páginas) — ocupa el resto de la pantalla debajo de la
   nav. Sin línea divisoria: la nav queda justo arriba, mismo criterio
   que la primera sección de Bio (ver .grid-section--no-divider en
   producto.css). ---------- */
footer.contact--standalone{
  min-height: calc(100vh - var(--nav-h));
  padding: 0 var(--margin-x);
  justify-content: center;
  border-top: none;
  border-image: none;
}
.contact-block{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start; /* cada línea queda alineada a la izquierda DENTRO del bloque */
  gap: 26px;
}
/* El fade solo afecta a los links, nunca al fondo negro del footer */
/* opacity/transform ahora los controla el JS, atados al scroll */
footer.contact .contact-block > a{
  opacity:0;
}
footer.contact a{
  display:inline-flex;
  align-items:center;
  gap: 14px;
  font-size: 20px; /* igual al texto pequeño de Productos, antes 15px */
  font-weight:300;
  color: var(--fg); /* blanco, antes fg-dim */
  width:fit-content;
  transition: color 0.2s ease;
}
footer.contact a:hover{ color: var(--fg); }
footer.contact svg{
  width:17px; height:17px;
  stroke: var(--fg);
  stroke-width:1.3;
  fill:none;
  flex-shrink:0;
}
/* Contacto (desktop): texto e íconos +50% — solo en la ventana
   dedicada, el footer del resto de las páginas no se toca. */
@media (min-width: 820px){
  footer.contact--standalone .contact-block a{
    font-size: 30px; /* 20px + 50% */
  }
  footer.contact--standalone .contact-block svg{
    width: 25.5px; height: 25.5px; /* 17px + 50% */
  }
}
/* Pie de contacto al final de cada ventana (no el de la ventana de
   Contacto, que ya tiene su propio +50% arriba): mismo tamaño y mismo
   achicamiento gradual que "los textos" del sitio (mismo clamp() que
   .photo-caption-grid__item p en producto.css) — antes quedaba fijo
   en 20px en cualquier ancho de pantalla. :not(.contact--standalone)
   para no pisar la regla de arriba (misma especificidad, ganaría por
   orden si no se excluye explícitamente). */
@media (min-width: 820px){
  footer.contact:not(.contact--standalone) .contact-block a{
    font-size: clamp(20px, 0.9662vw + 12.087px, 26px);
  }
  /* Íconos: mismo achicamiento/agrandamiento que el texto de acá
     arriba, no un tamaño fijo — si no, quedaban chicos en proporción
     al texto (que sí crecía) al acercarse a los 1440px. Misma curva,
     escalada por la relación 17/20 (0.85) entre el ícono base (17px)
     y el texto base (20px) — el mismo 0.85 que ya usa el +50% de la
     ventana de Contacto (25.5px ícono / 30px texto). */
  footer.contact:not(.contact--standalone) .contact-block svg{
    width: clamp(17px, 0.8213vw + 10.274px, 22.1px);
    height: clamp(17px, 0.8213vw + 10.274px, 22.1px);
  }
}

/* ============================================
   BOTÓN FLOTANTE DE WHATSAPP
   Fijo en la esquina inferior derecha, visible en cualquier ventana
   del sitio (se agrega una sola vez por página, fuera del <main>
   flow — position:fixed, no le importa dónde vive en el HTML).
   Ícono propio de WhatsApp embebido en SVG (no depende de ningún
   archivo de imagen — fácil de reemplazar por el logo del cliente
   más adelante, ver comentario en el HTML). z-index por debajo del
   lightbox (200) para que no quede flotando arriba de una foto en
   pantalla completa, pero por encima de la nav (100/110/120) y del
   menú mobile (99). ============================================ */
.whatsapp-float{
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,0.3); /* gris al 30% — mismo criterio que el resto de los grises del sitio (blanco a un % de opacidad sobre el negro), pedido explícito en vez del verde de marca de WhatsApp */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  z-index: 150;
  transition: transform 0.2s ease;
}
.whatsapp-float:hover{ transform: scale(1.08); }
.whatsapp-float svg{
  width: 32px;
  height: 32px;
  fill: #ffffff;
}
/* Desktop: +30% (pedido explícito) — el círculo y el ícono adentro
   crecen juntos, para no perder la proporción. Tablet (641-819) queda
   en el tamaño base de arriba (60px/32px), sin cambios. */
@media (min-width: 820px){
  .whatsapp-float{
    width: 78px; /* 60px + 30% */
    height: 78px;
  }
  .whatsapp-float svg{
    width: 41.6px; /* 32px + 30% */
    height: 41.6px;
  }
}
@media (max-width: 640px){
  .whatsapp-float{
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }
  .whatsapp-float svg{
    width: 28px;
    height: 28px;
  }
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Punto Quiebre Hamburguesa: 1138px. Dispara ANTES que el resto del
   modo tablet (819px, ver bloque siguiente) — valor fijo definido a
   medida sobre el sitio real (con SF Pro), no calculado a ciegas. */
@media (max-width: 1138px){
  nav.menu{ display:none; }
  .nav-burger-group{ display:flex; }
  .burger{ display:block; }
  .lang-switch--mobile{ display:inline-flex; }
}

/* Tablet / intermedio — breakpoint corrido un 20% hacia abajo
   (819px en vez de 1024px) para que el layout de desktop
   se sostenga un poco más antes de pasar a tablet */
@media (max-width: 819px){
  :root{ --margin-x: var(--margin-x-tab); }
  .item-grid{ grid-template-columns: repeat(2, 1fr); }
  .hero{ aspect-ratio: 1 / 1; } /* tablet: hero cuadrado */
  /* Texto de contacto (footer) un 50% más cerca de lo que haya arriba
     (logo de cierre, texto o foto, según la página) — pedido explícito
     del cliente, solo tablet/mobile: 220px -> 110px. En celular (ver
     @media max-width:640px más abajo) tiene su propio valor de base
     más alto por el título sticky, y se reduce aparte desde ese valor. */
  footer.contact{ padding-top: 110px; }
}

/* Celular */
@media (max-width: 640px){
  :root{ --margin-x: var(--margin-x-mob); --nav-h: 44.8px; } /* 64px - 30%; la barra achica acá: la variable tiene que achicarse junto con ella */
  header.nav{ height: var(--nav-h); }
  .logo-section{ padding: 110px var(--margin-x-mob) 90px; }
  :root{ --star-w: 151.2px; } /* 126px x 1.2 */
  .logo-section h1{ font-size:26px; }
  .logo-section p.desc{ line-height: 1.8375; } /* 1.225 + 50%, solo celular: los renglones estaban muy juntos */
  section.grid-section h2{
    font-size:29px;
    margin-bottom:44px;
    position: sticky;
    top: var(--nav-h); /* debajo de la nav mobile */
    z-index: 10;
    background: #000000;
    padding: 14px 0;
  }
  .item-grid{ grid-template-columns: 1fr; }
  footer.contact{ padding: 170px var(--margin-x-mob) 240px; } /* arriba: -50% (340px -> 170px), pedido explícito del cliente — el título sticky de la sección anterior se despega solo (su propio contenedor), este padding es nada más el respiro visual hasta el texto de contacto */
  .hero{ aspect-ratio: 9 / 16; } /* celular: hero vertical 9:16 */
}