@font-face { font-family:'Libre Franklin'; src:url('/assets/fonts/libre-franklin-300.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'Libre Franklin'; src:url('/assets/fonts/libre-franklin-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Libre Franklin'; src:url('/assets/fonts/libre-franklin-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Libre Franklin'; src:url('/assets/fonts/libre-franklin-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Libre Franklin'; src:url('/assets/fonts/libre-franklin-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('/assets/fonts/jetbrains-mono-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('/assets/fonts/jetbrains-mono-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Bricolage Grotesque'; src:url('/assets/fonts/bricolage-grotesque-600.woff2') format('woff2'); font-weight:600; font-display:swap; }

html, body { margin: 0; padding: 0; background: #FAFAF9; }
body { font-family: 'Libre Franklin', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: #0E5A6B; text-decoration: none; }
a:hover { color: #16181A; }
::selection { background: #0E5A6B; color: #fff; }
img { max-width: 100%; }

.skip-link { position:absolute; left:12px; top:-60px; background:#0E5A6B; color:#fff; padding:12px 18px;
  z-index:999; transition:top .2s ease; font:600 13px/1 'Libre Franklin',sans-serif; }
.skip-link:focus { top:12px; }

/* ---- placeholders de imagen sin foto real todavia (clicables) ---- */
.img-placeholder {
  display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; text-align:center;
  background:repeating-linear-gradient(45deg,#EFEDE8,#EFEDE8 10px,#E4E1D9 10px,#E4E1D9 20px);
  border:1px dashed #A8AEB3; color:#5A6066;
  font:500 12.5px/1.4 'JetBrains Mono',monospace; padding:16px;
  min-height:100%; width:100%; cursor:pointer; position:relative;
  transition:border-color .15s ease, background-color .15s ease;
}
.img-placeholder:hover { border-color:#0E5A6B; }
.img-placeholder:hover .img-placeholder-icon { background:#0E5A6B; color:#fff; }
.img-placeholder-input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.img-placeholder-icon {
  width:32px; height:32px; border-radius:999px; background:#fff; border:1px solid #A8AEB3;
  display:flex; align-items:center; justify-content:center; font:600 18px/1 'Libre Franklin',sans-serif; color:#5A6066;
  flex-shrink:0;
}
.img-placeholder-text em { color:#0E5A6B; font-style:normal; }
.img-placeholder.is-uploading { opacity:.55; pointer-events:none; }
.img-placeholder.is-error { border-color:#C0392B; color:#C0392B; }

img.is-uploaded { cursor:pointer; }
img.is-uploaded:hover { outline:2px solid #0E5A6B; outline-offset:-2px; }

/* ---- logos de certificaciones / colaboradores ---- */
.logo-chip {
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #E1E0DC; padding:10px 14px; height:52px;
}
.logo-chip img { max-height:28px; max-width:110px; width:auto; object-fit:contain; filter:grayscale(1); opacity:.72; }
.logo-chip:hover img { filter:none; opacity:1; }

/* ---- header: megamenus y panel movil ocultos por defecto ---- */
.mega-panel { display:none; }
.mega-panel.is-open { display:block; }
.mobile-panel { display:none; }
.mobile-panel.is-open { display:block; }
#nav-toggle { display: none; }

/* ---- refinamiento de acabado: el diseno original no traia transiciones
   en los estados hover (cambian de golpe), ni foco visible, ni profundidad
   en los elementos flotantes. Se anade sin tocar layout, color ni copy. ---- */
html { scroll-behavior: smooth; overflow-x: hidden; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

[class*="hv-"] {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
[class*="hv-"]:active { transform: scale(0.98); transition: transform .1s ease; }

a, button, input, select, textarea, [tabindex] { transition: outline-offset .15s ease; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2.5px solid #0E5A6B;
  outline-offset: 2px;
}

/* tarjetas-enlace con foto: leve zoom al pasar el cursor (no afecta a las
   fotos con parallax, que llevan su propio transform puesto por JS) */
a[class*="hv-"] img:not([data-parallax]) {
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
a[class*="hv-"]:hover img:not([data-parallax]) {
  transform: scale(1.06);
}

#aq-header { transition: box-shadow .25s ease; }

/* dock flotante (llamar/whatsapp/presupuesto/showroom): antes flotaba sin
   ninguna sombra, se notaba pegado al fondo en vez de elevado */
#aq-dock { box-shadow: 0 12px 32px -8px rgba(22,24,26,.22); }

/* el menu (mega-panel y panel movil) solo hacia fade de opacidad - la unica
   superficie del sitio que revelaba sin movimiento espacial, mientras todo
   lo demas (tarjetas, barras de acento) se elevaba o se desplazaba. Se
   añade un desplazamiento vertical corto con la misma curva de "spatial
   motion" que el resto (ver The Two-Speed Rule en DESIGN.md). */
.mega-panel.is-open, .mobile-panel.is-open { animation: aq-fade-in .28s cubic-bezier(.16,1,.3,1); }
@keyframes aq-fade-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---- catalogo por categoria de la home, agrupado por fabricante ----
   Sustituye la fila plana de 11 pildoras. Las columnas se reparten con
   auto-fit; al no haber celdas sueltas (los elementos van en listas dentro
   de cada columna) no puede aparecer el hueco vacio del patron anterior. */
.cat-marcas {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px; margin-top:36px; background:#E1E0DC; border:1px solid #E1E0DC;
}
.cat-col { background:#fff; padding:30px 28px; }
.cat-brand {
  font:600 11px/1 'JetBrains Mono',monospace; letter-spacing:.14em; color:#0E5A6B;
  padding-bottom:14px; border-bottom:2px solid #16181A;
}
.cat-brand.is-dyson { color:#E4067E; }
.cat-col ul { list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; }
.cat-col li + li { margin-top:2px; }
.cat-col a {
  display:block; padding:10px 12px; margin-left:-12px; text-decoration:none;
  position:relative;
  transition:background-color .18s ease;
}
.cat-col a:hover { background:#F2F6F6; }
/* mismo gesto que .card-lift (barra de acento que crece + contenido que se
   desplaza), a escala de fila de lista en vez de tarjeta completa - ver
   "The Accent-Reveal Rule" en DESIGN.md */
.cat-col a::before {
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:2px;
  background:#0E5A6B; transform:scaleY(0); transform-origin:center;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.cat-col.is-dyson a::before { background:#E4067E; }
.cat-col a:hover::before { transform:scaleY(1); }
.cat-name {
  display:block; font:500 16px/1.35 'Libre Franklin',sans-serif; color:#16181A;
  transition:transform .18s cubic-bezier(.16,1,.3,1);
}
.cat-col a:hover .cat-name { transform:translateX(5px); }
/* la marca por linea solo aparece en la columna mixta, donde "otras marcas"
   necesita concretarse; en Dyson y Pressalit seria repetir la cabecera */
.cat-tag {
  display:block; font:500 10.5px/1 'JetBrains Mono',monospace; letter-spacing:.08em;
  color:#A8AEB3; margin-top:5px; transition:color .18s ease, transform .18s cubic-bezier(.16,1,.3,1);
}
.cat-col a:hover .cat-tag { color:#0E5A6B; transform:translateX(5px); }

/* ---- listas de enlaces sueltos (columnas del menu desplegable, columnas
   del footer): eran texto plano sin ningun estado de hover - el unico tipo
   de componente del sitio que no reaccionaba en absoluto. Mismo gesto que
   .cat-col (barra de acento a la izquierda + color), ver The Accent-Reveal
   Rule en DESIGN.md. Variante on-dark para el footer: el teal base no
   tiene contraste suficiente sobre #16181A, se usa la variante clara. */
.link-list a {
  display:block; position:relative; padding:8px 0 8px 14px; margin-left:-14px;
  transition:color .18s ease;
}
.link-list a::before {
  content:""; position:absolute; left:0; top:10px; bottom:10px; width:2px;
  background:#0E5A6B; transform:scaleY(0); transform-origin:center;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.link-list a:hover { color:#0E5A6B !important; }
.link-list a:hover::before { transform:scaleY(1); }
.link-list.on-dark a::before { background:#7FBFCB; }
.link-list.on-dark a:hover { color:#fff !important; }

@media (prefers-reduced-motion: reduce) {
  .link-list a, .link-list a::before { transition:none !important; }
}

/* ---- pagina de contacto: antes el panel de info y el formulario flotaban
   sueltos sobre el mismo fondo #16181A sin ninguna superficie propia (el
   input y la seccion eran casi el mismo tono), de ahi la sensacion de
   "plano". Se introduce un escalon real de profundidad: seccion -> panel
   del formulario -> campo, cada uno un tono mas claro, mas la tarjeta de
   contacto rapido (telefono) como ancla visual del lado izquierdo. ---- */
.contact-quick {
  margin-top:36px; padding:24px; display:flex; flex-direction:column; gap:10px;
  background:#1D2023; border:1px solid #33373B;
}
.contact-quick-phone {
  font:600 34px/1 'Libre Franklin',sans-serif; color:#fff; letter-spacing:-.025em;
  transition:color .18s ease;
}
.contact-quick-phone:hover { color:#7FBFCB; }

/* el grid (display/grid-template-columns/gap) va en el style en linea del
   <form>, no aqui: asi lo recoge la misma regla generica que ya colapsa a
   1 columna en movil TODAS las demas retillas del sitio (busca la
   propiedad en el atributo style). Aqui solo el aspecto nuevo. */
.contact-form {
  background:#1A1D1F; border:1px solid #2C2F33; padding:32px 32px 36px;
  box-shadow:0 24px 48px -24px rgba(0,0,0,.4);
}
.field-dark {
  width:100%; padding:13px 14px; background:#24282B; border:1px solid #33373B; color:#fff;
  font:400 15px/1 'Libre Franklin',sans-serif;
  transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.field-dark:hover { border-color:#3F444A; }
.field-dark:focus {
  outline:none; border-color:#7FBFCB; background:#282C2F;
  box-shadow:0 0 0 3px rgba(127,191,203,.18);
}
/* .btn-lift: TODOS los CTA primarios del sitio (fondo solido, cualquier
   color - teal, magenta, negro o blanco sobre seccion oscura). Sombra
   neutra en vez de tintada: un boton al elevarse proyecta una sombra
   oscura ambiental independientemente de su propio color, asi que una
   sola regla sirve para las cuatro variantes sin logica por color. */
.btn-lift { transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s cubic-bezier(.16,1,.3,1); }
.btn-lift:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(22,24,26,.4); }

@media (max-width: 760px) {
  .contact-form { padding:24px; }
  /* bug real encontrado en esta sesion: 3 campos del formulario usan
     grid-column:span 2 (Motivo, Mensaje, boton). Al forzar la retilla a 1
     columna explicita en movil (regla generica de mas abajo), ese span:2
     obliga a CSS Grid a fabricar una columna IMPLICITA extra solo para
     poder cumplir el span - dos columnas fantasma en vez de una. Se anula
     el span en movil, donde ya no hace falta (todo es 1 columna). */
  .contact-form [style*="grid-column"] { grid-column: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-quick-phone, .field-dark, .btn-lift { transition:none !important; }
  .btn-lift:hover { transform:none !important; }
}

@media (max-width: 760px) {
  .cat-marcas { grid-template-columns:1fr; margin-top:28px; }
  .cat-col { padding:24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-col a, .cat-name, .cat-tag { transition:none !important; }
  .cat-col a:hover .cat-name, .cat-col a:hover .cat-tag { transform:none !important; }
}

/* ---- interaccion de grids/cards (fase de animacion, aprobada por el cliente) ---- */

/* 1. numero de sector (01-09): se enciende al hover de su card. El peso no
   se puede interpolar (fuentes estaticas, no variable font) asi que cambia
   de golpe; el color lleva la transicion para que no se sienta brusco. */
.sector-num { transition: color .18s ease; }
a:hover > .sector-num { color: #0E5A6B; font-weight: 600; }

/* 2. (retirado) spotlight: oscurecer las celdas hermanas al pasar el cursor
   por una. Se probo y se quito en esta sesion - era el UNICO componente de
   la web que atenuaba contenido ajeno al elemento senalado, inconsistente
   con el resto (donde solo la propia tarjeta reacciona, via The
   Accent-Reveal Rule). La clase .grid-focus se conserva solo como marcador
   estructural (mark_grid_focus la usa para repartir card-lift a las
   tarjetas hijas), ya no dispara ningun estilo de dimming. */

/* 3. "The Accent-Reveal Rule": UNA sola tarjeta de la retilla se eleva con
   sombra tintada Y aparece una barra de acento que crece desde el borde
   inferior - las tres señales juntas, siempre la misma combinacion, tanto
   en cards con borde propio (Marcas, Proyectos) como en las tarjetas de
   retillas de linea fina (Sectores, familias Dyson, Showroom): ver
   mark_card_lift/mark_grid_focus, que aplican esta misma clase a la
   tarjeta individual y nunca al contenedor del grid. El acento es teal por
   defecto y magenta cuando la tarjeta es de contenido Dyson (Two-Brand
   Rule, ver DESIGN.md). */
.card-lift {
  position:relative; overflow:hidden;
  /* sombra de reposo, muy tenue: el hover de arriba (elevacion + sombra
     tintada) es invisible en tactil - no existe :hover en movil, asi que
     la mitad de las visitas nunca veian ninguna profundidad en las
     tarjetas. Esta sombra neutra y discreta da la señal minima de "esto
     esta elevado" siempre, sin competir con el gesto de hover como
     estado activado. No se toca el radio de esquina (sigue en 0). */
  box-shadow: 0 2px 8px -4px rgba(22,24,26,.14);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.card-lift::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:#0E5A6B; transform:scaleY(0); transform-origin:bottom;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.card-lift.is-dyson::after { background:#E4067E; }
.card-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 32px -16px rgba(11,74,107,.30);
}
.card-lift.is-dyson:hover { box-shadow: 0 20px 32px -16px rgba(228,6,126,.30); }
.card-lift:hover::after { transform: scaleY(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [class*="hv-"], a[class*="hv-"] img { transition: none !important; }
  .mega-panel.is-open, .mobile-panel.is-open { animation: none !important; }
  .sector-num, .card-lift, .card-lift::after, .cat-col a::before { transition: none !important; }
  .card-lift:hover { transform: none !important; }
}

/* ---- responsive: replica el breakpoint de 760px del prototipo original,
   aplicado con CSS puro en vez del JS que recalculaba estilos inline ---- */
@media (max-width: 760px) {
  #nav-toggle { display: flex !important; }
  .desktop-nav { display: none !important; }
  .mega-panel { display: none !important; }
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  #aq-dock { left: 0 !important; right: 0 !important; border-left: none !important; flex-direction: row !important; }
  #aq-dock a { flex: 1 1 0 !important; text-align: center !important; }

  /* bug real encontrado en esta sesion: los h1/h2/h3 llevan tamano fijo en
     px pensado para desktop (hasta 62px) sin ningun tope movil, asi que
     desbordaban horizontalmente en cualquier pantalla estrecha - la pagina
     entera quedaba con scroll lateral. Un tope generico por nivel arregla
     las +180 apariciones sin tocar cada una a mano. */
  h1 { font-size: 34px !important; line-height: 1.15 !important; }
  h2 { font-size: 28px !important; line-height: 1.2 !important; }
  h3 { font-size: 20px !important; line-height: 1.25 !important; }

  /* la barra superior (horario/showroom/quienes somos/blog + telefono/email)
     no tiene sitio en 375px: sus dos grupos no envuelven internamente, asi
     que el texto se fragmentaba en varias lineas sueltas con las "/"
     flotando. Se oculta en movil - el dock flotante ya cubre LLAMAR y
     VISITAR SHOWROOM, y "Blog" se anadio al panel de menu movil para no
     perder ese enlace (Quienes somos ya estaba ahi via "Aquatech"). */
  #aq-topbar { display: none !important; }

  /* el CTA del header ("Solicitar asesoramiento") no cabe junto al logo y
     el boton MENU en una fila de 375px: al envolver quedaba centrado y
     suelto, flotando sin relacion con el resto del header. El dock movil
     ya ofrece PRESUPUESTO/LLAMAR/WHATSAPP como equivalente. */
  .header-cta { display: none !important; }
}

/* ---- selector de familias Dyson (hero Dyson en home): reemplaza las 4
   pastillas planas de fondo solido (se sentian "de catalogo generico") por
   una fila con icono propio por familia y un indicador inferior magenta que
   se desliza al hover/foco, en vez de un cambio de fondo de golpe. El icono
   tambien cambia de gris a magenta - dos senales de estado en vez de una. */
.dyson-fam { display:flex; flex-wrap:wrap; }
.dyson-fam-item {
  display:flex; align-items:center; gap:10px;
  padding:20px 26px 20px 0; margin-right:28px; text-decoration:none;
  position:relative;
}
.dyson-fam-icon { width:22px; height:22px; flex-shrink:0; color:#7A8087; transition:color .2s ease; }
.dyson-fam-item:hover .dyson-fam-icon, .dyson-fam-item:focus-visible .dyson-fam-icon { color:#E4067E; }
.dyson-fam-item::after {
  content:""; position:absolute; left:0; right:26px; bottom:0; height:2px;
  background:#E4067E; transform:scaleX(0); transform-origin:left;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.dyson-fam-item:hover::after, .dyson-fam-item:focus-visible::after { transform:scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .dyson-fam-icon, .dyson-fam-item::after { transition:none !important; }
}

@media (max-width: 760px) {
  .dyson-fam-item { padding:16px 0; margin-right:24px; }
}

.hv-background-16181a-0:hover { background:#16181A !important; }
.hv-background-16181a-color-fff-1:hover { background:#16181A !important; color:#fff !important; }
.hv-background-fff-color-16181a-2:hover { background:#fff !important; color:#16181A !important; }
.hv-background-f2f6f6-3:hover { background:#F2F6F6 !important; }
.hv-background-0a424f-4:hover { background:#0A424F !important; }
.hv-border-color-16181a-5:hover { border-color:#16181A !important; }
.hv-background-0e5a6b-6:hover { background:#0E5A6B !important; }
.hv-background-7fbfcb-color-16181a-7:hover { background:#7FBFCB !important; color:#16181A !important; }
.hv-border-bottom-color-0e5a6b-8:hover { border-bottom-color:#0E5A6B !important; }
.hv-border-bottom-color-e4067e-9:hover { border-bottom-color:#E4067E !important; }
.hv-border-bottom-color-7fbfcb-10:hover { border-bottom-color:#7FBFCB !important; }
.hv-background-f2f1ee-11:hover { background:#F2F1EE !important; }
.hv-border-color-fff-12:hover { border-color:#fff !important; }
.hv-border-bottom-color-e4067e-color-16181a-13:hover { border-bottom-color:#E4067E !important; color:#16181A !important; }
.hv-background-e4067e-14:hover { background:#E4067E !important; }
.hv-border-color-e4067e-15:hover { border-color:#E4067E !important; }
.hv-color-fff-16:hover { color:#fff !important; }