/* ============================================================
   ADOS WEBSITE — layout responsive + efectos del sitio
   Complementa styles.css (design system). Solo reglas que los
   estilos inline no pueden expresar: media queries y :hover.
   ============================================================ */

:root {
  --pad-x: 32px;
}
@media (max-width: 640px) {
  :root { --pad-x: 20px; }
}

/* ---- Grids responsive (los inline styles no soportan media queries) ---- */
.w-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.w-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.w-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* split asimétrico (contacto, detalle de proyecto) */
.w-split       { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; }
.w-split-wide  { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; }

.w-stats-grid  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; }
.w-team-grid   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.w-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }

@media (max-width: 1024px) {
  .w-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .w-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .w-split, .w-split-wide { grid-template-columns: 1fr; gap: 40px; }
  .w-footer-grid { grid-template-columns: 1fr 1fr; }
  .w-team-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .w-grid-4, .w-grid-3 { grid-template-columns: 1fr; }
  .w-grid-2 { grid-template-columns: 1fr; }
  .w-stats-grid { grid-template-columns: 1fr 1fr; }
  .w-footer-grid { grid-template-columns: 1fr; }
}

/* ---- Header: nav de escritorio vs. móvil ----
   !important: los componentes definen display inline y hay que ganarles. */
.w-burger { display: none !important; }
@media (max-width: 880px) {
  .w-nav-desktop, .w-cta-desktop { display: none !important; }
  .w-burger { display: inline-flex !important; }
}

/* panel de menú móvil — z-index bajo el header (50) para que el logo y el
   botón de cerrar sigan visibles y clicables con el menú abierto */
.w-mobilemenu {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(10, 14, 18, 0.96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: flex; flex-direction: column; justify-content: center;
  padding: 32px var(--pad-x);
  opacity: 0; pointer-events: none;
  transition: opacity 260ms cubic-bezier(0.2, 0, 0, 1);
}
.w-mobilemenu.is-open { opacity: 1; pointer-events: auto; }
.w-mobilemenu a {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 8vw, 42px); letter-spacing: -0.03em;
  color: var(--text); padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.w-mobilemenu a:hover, .w-mobilemenu a[aria-current="true"] { color: var(--accent); }

/* ---- Micro-interacción del cubo (logo): giro isométrico 120° ---- */
.w-logo-cube img { transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1); }
.w-logo-cube:hover img { transform: rotate(120deg); }
@media (prefers-reduced-motion: reduce) {
  .w-logo-cube:hover img { transform: none; }
}

/* ---- Banda de federación: paneles escalan con el viewport ----
   Los 5 paneles (menos solapes) deben caber incluso a 360px. */
.w-fed-panel {
  width: clamp(60px, 16vw, 220px);
  height: clamp(50px, 11.5vw, 128px);
}
.w-fed-panel .w-fed-detail { font-size: clamp(0.5rem, 0.9vw, 0.65rem); }
.w-fed-panel .w-fed-label  { font-size: clamp(9px, 1.6vw, 21px); }
@media (max-width: 560px) {
  .w-fed-panel .w-fed-detail { display: none; }
}

/* ---- Cursor crosshair en la galería de proyectos (guiño CAD) ---- */
.w-crosshair, .w-crosshair * { cursor: crosshair !important; }

/* ---- Comparador plano ↔ modelo ---- */
.w-compare {
  position: relative; overflow: hidden;
  border: 1px solid var(--border-strong);
  user-select: none; -webkit-user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
}
.w-compare img { pointer-events: none; }
.w-compare-handle {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--accent);
  box-shadow: 0 0 14px 1px rgba(249, 178, 51, 0.55);
}
.w-compare-knob {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) skewX(-24deg);
  width: 44px; height: 32px;
  background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(10, 14, 18, 0.5);
}
.w-compare-knob svg { transform: skewX(24deg); }
.w-compare-tag {
  position: absolute; bottom: 14px;
  font-family: var(--font-mono); font-size: 0.65rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 10px; background: rgba(12, 15, 18, 0.72);
  color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* ---- Visor rotatorio 360° (detalle de proyecto) ---- */
.w-turntable {
  position: relative; overflow: hidden;
  border: 1px solid var(--border-strong);
  background: #fff; /* los renders vienen sobre fondo blanco */
  user-select: none; -webkit-user-select: none;
  touch-action: pan-y;
  cursor: grab;
}
.w-turntable:active { cursor: grabbing; }
.w-turntable img { pointer-events: none; }
.w-turntable-bar {
  display: flex; align-items: center; gap: 14px;
  margin-top: 10px; padding: 12px 16px;
  border: 1px solid var(--border);
  background: linear-gradient(to top, #0C0F12 0%, #161c24 100%);
  color: var(--accent);
}
.w-turntable-slider {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 2px; margin: 0;
  background: var(--border-strong);
  outline: none; cursor: ew-resize;
}
.w-turntable-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 34px; height: 20px;
  background: var(--accent);
  transform: skewX(-24deg);
  box-shadow: 0 0 14px 1px rgba(249, 178, 51, 0.45);
  cursor: ew-resize;
}
.w-turntable-slider::-moz-range-thumb {
  width: 34px; height: 20px; border: none; border-radius: 0;
  background: var(--accent);
  transform: skewX(-24deg);
  box-shadow: 0 0 14px 1px rgba(249, 178, 51, 0.45);
  cursor: ew-resize;
}
.w-turntable-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid #fff; }
.w-turntable-slider:focus-visible::-moz-range-thumb { outline: 2px solid #fff; }

/* zoom vertical al lado derecho del visor */
.w-turntable-zoom {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px 9px;
  background: rgba(12, 15, 18, 0.72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: var(--accent);
  font-family: var(--font-mono); font-size: 13px; line-height: 1;
  user-select: none; -webkit-user-select: none;
}
.w-turntable-zoom-slider {
  -webkit-appearance: none; appearance: none;
  writing-mode: vertical-lr; direction: rtl; /* arriba = más zoom */
  width: 2px; height: clamp(80px, 18vw, 160px); margin: 0;
  background: var(--border-strong);
  outline: none; cursor: ns-resize;
}
.w-turntable-zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 26px;
  background: var(--accent);
  transform: skewY(-14deg);
  box-shadow: 0 0 14px 1px rgba(249, 178, 51, 0.45);
  cursor: ns-resize;
}
.w-turntable-zoom-slider::-moz-range-thumb {
  width: 18px; height: 26px; border: none; border-radius: 0;
  background: var(--accent);
  transform: skewY(-14deg);
  box-shadow: 0 0 14px 1px rgba(249, 178, 51, 0.45);
  cursor: ns-resize;
}
.w-turntable-zoom-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid #fff; }
.w-turntable-zoom-slider:focus-visible::-moz-range-thumb { outline: 2px solid #fff; }

/* ---- Botón flotante de WhatsApp ---- */
.w-whatsapp {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(10, 14, 18, 0.45);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms;
}
.w-whatsapp:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 14px 36px rgba(37, 211, 102, 0.35);
}
@media (max-width: 640px) {
  .w-whatsapp { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}

/* ---- Miscelánea responsive ---- */
/* pestañas de filtro: scroll horizontal propio en pantallas chicas */
.w-tabs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.w-tabs-scroll::-webkit-scrollbar { display: none; }
.w-tabs-scroll .ados-tab { white-space: nowrap; flex: none; }

/* etiquetas flotantes del hero: fuera en pantallas chicas
   (!important: el componente define display:flex inline) */
@media (max-width: 720px) {
  .w-hero-tags { display: none !important; }
}
/* fila del formulario nombre/organización */
@media (max-width: 560px) {
  .w-form-row { grid-template-columns: 1fr !important; }
}
/* logos/consorcios: fila que envuelve */
.w-trust-row { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }