/* CandeMaker — base global de interacción.
   Se aplica por capacidad del equipo (táctil / con cursor), no por ancho de
   pantalla, para que iPad y tablets respondan igual que un teléfono.
   Los efectos con cursor (style-hover) se limitan en support.js a
   @media (hover: hover) and (pointer: fine). */

/* ── Anclas: el título no queda debajo del encabezado fijo ───────────────
   Sustituye los scroll-margin en línea (70/90 px) para contar la muesca del iPhone. */
[id]{scroll-margin-top:84px!important}
@media (max-width:719.98px){
  [id]{scroll-margin-top:calc(68px + env(safe-area-inset-top, 0px))!important}
}

/* ── Pantallas táctiles (teléfono, iPad, tablet) ───────────────────────── */
@media (pointer:coarse){
  /* Sin destello gris del navegador y sin espera de doble toque */
  a,button,label,summary,[role="button"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  /* Mantener presionado no selecciona el texto de un control */
  button,[role="button"],[data-m="tl-opt"]{-webkit-user-select:none;user-select:none}
}

/* Respuesta inmediata al tocar: la pieza «cede» al apoyar el dedo y vuelve
   Las tarjetas que aparecen con el scroll ([data-reveal]) reciben esta respuesta
   sólo cuando terminó su entrada (data-cm-reveal-ready), para no pisarla.
   rápido al soltar. Botones y pastillas 0.97; tarjetas grandes 0.985. */
@media (pointer:coarse) and (prefers-reduced-motion:no-preference){
  button:not([style*="inset: 0"]):not([style*="inset:0"]),
  a[style*="radius-pill"],[data-m="tl-opt"],
  a[style*="border-radius: var(--cm-radius-md)"]:not([data-reveal]:not([data-cm-reveal-ready])),
  label[style*="cursor: pointer"]:not([data-reveal]:not([data-cm-reveal-ready])){
    transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,opacity .2s ease!important
  }
  button:not([style*="inset: 0"]):not([style*="inset:0"]):active,
  a[style*="radius-pill"]:active,[data-m="tl-opt"]:active{transform:scale(.97)!important;transition-duration:.06s!important}
  a[style*="border-radius: var(--cm-radius-md)"]:not([data-reveal]:not([data-cm-reveal-ready])):active,
  label[style*="cursor: pointer"]:not([data-reveal]:not([data-cm-reveal-ready])):active{transform:scale(.985)!important;transition-duration:.06s!important}
}
/* Con «Reducir movimiento» la respuesta es sólo de opacidad, sin movimiento */
@media (pointer:coarse) and (prefers-reduced-motion:reduce){
  button:not([style*="inset: 0"]):not([style*="inset:0"]):active,
  a[style*="radius-pill"]:active,[data-m="tl-opt"]:active,
  a[style*="border-radius: var(--cm-radius-md)"]:not([data-reveal]:not([data-cm-reveal-ready])):active,
  label[style*="cursor: pointer"]:not([data-reveal]:not([data-cm-reveal-ready])):active{opacity:.72!important}
}

/* Enlaces de texto, migas, pie y logotipo (marcados con data-cm-enlace):
   bajan apenas su opacidad al tocar. Tarjetas sin otra respuesta
   (data-cm-tarjeta): se comprimen a 0.985. Sólo en pantallas táctiles;
   escritorio y focus-visible no cambian. */
@media (pointer:coarse){
  [data-cm-enlace]{transition:opacity .16s ease-out,color .2s ease,border-color .2s ease,background-color .2s ease!important}
  [data-cm-enlace]:active{opacity:.7!important;transition-duration:.06s!important}
}
@media (pointer:coarse) and (prefers-reduced-motion:no-preference){
  [data-cm-tarjeta]{transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .2s ease!important}
  [data-cm-tarjeta]:active{transform:scale(.985)!important;transition-duration:.06s!important}
}
/* «Reducir movimiento»: sin escala; sólo una opacidad breve */
@media (pointer:coarse) and (prefers-reduced-motion:reduce){
  [data-cm-tarjeta]{transition:opacity .16s ease-out,background-color .2s ease!important}
  [data-cm-tarjeta]:active{opacity:.8!important;transition-duration:.06s!important}
}

/* ── WhatsApp flotante: nunca tapa CTA, formularios, precios, menú ni modal ─
   En todos los tamaños. data-oculto lo pone la página cuando la portada, el
   contacto o el pie están en pantalla, o cuando el botón quedaría encima de un
   control o de un precio; con un diálogo abierto se oculta siempre.
   Sólo opacidad y una reducción mínima: sin rebotes. */
[data-m="wa-float"]{transition:opacity .2s ease,transform .2s cubic-bezier(.23,1,.32,1),background-color .2s ease}
[data-m="wa-float"]:not([data-oculto]),
[data-m="wa-float"][data-oculto="1"],
body:has([role="dialog"]) [data-m="wa-float"],
body:has([aria-modal="true"]) [data-m="wa-float"]{opacity:0!important;pointer-events:none!important;transform:scale(.96)!important}

/* ── Ventanas del Catálogo: ficha («Más información») y «Personalizar» ────
   data-visible lo controla la página. Son transiciones (no keyframes) para que
   un cierre a mitad de la entrada se revierta desde la posición actual.
   Entrada 220–240 ms; salida 160–180 ms. Tablet y escritorio: diálogo
   centrado. Teléfono: hoja que sube desde abajo. */
[data-cm-modal]{background-color:rgba(17,24,32,0)!important;overscroll-behavior:contain;transition:background-color .16s ease-out!important}
[data-cm-modal][data-visible="true"]{background-color:rgba(17,24,32,.72)!important;transition-duration:.22s!important}
[data-cm-modal="cfg"][data-visible="true"]{background-color:rgba(17,24,32,.74)!important}
[data-cm-modal] > [data-cm-hoja]{
  animation:none!important;margin-block:auto;
  opacity:0;transform:translateY(8px) scale(.97);
  transition:opacity .16s ease-out,transform .16s cubic-bezier(.23,1,.32,1)!important
}
[data-cm-modal][data-visible="true"] > [data-cm-hoja]{
  opacity:1;transform:none;
  transition:opacity .22s cubic-bezier(.23,1,.32,1),transform .22s cubic-bezier(.23,1,.32,1)!important
}
/* Mientras la ventana sale ya no recibe toques */
[data-cm-modal]:not([data-visible="true"]){pointer-events:none}
/* Con una ventana abierta el documento queda fijo; la barra superior se mantiene arriba */
html[data-cm-bloqueo]{overflow:hidden}

@media (max-width:719.98px){
  [data-cm-modal]{padding:0!important;align-items:flex-end!important;overflow:hidden!important}
  [data-cm-modal] > [data-cm-hoja]{
    margin:0;max-width:none!important;width:100%;
    max-height:92vh;max-height:calc(100dvh - 24px);
    overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    border-radius:20px 20px 0 0!important;
    padding-bottom:env(safe-area-inset-bottom, 0px);
    opacity:1;transform:translateY(100%);
    transition:transform .18s cubic-bezier(.32,.72,0,1)!important
  }
  [data-cm-modal][data-visible="true"] > [data-cm-hoja]{
    transform:none;
    transition:transform .24s cubic-bezier(.32,.72,0,1)!important
  }
}

/* «Reducir movimiento»: sólo opacidad breve, sin desplazamiento ni escala */
@media (prefers-reduced-motion:reduce){
  [data-cm-modal] > [data-cm-hoja]{transform:none!important;opacity:0;transition:opacity .15s ease-out!important}
  [data-cm-modal][data-visible="true"] > [data-cm-hoja]{opacity:1;transition:opacity .15s ease-out!important}
  [data-cm-modal],[data-cm-modal][data-visible="true"]{transition:background-color .15s ease-out!important}
}

/* ── Menú de navegación (Inicio, Catálogo, Diseño, Cotizador, Materiales) ──
   data-visible lo controla la página. Transiciones (no keyframes) para que un
   cierre a mitad de la entrada se revierta desde la posición actual.
   Entrada 220–240 ms; salida 160–180 ms. Tablet: cortina que se despliega
   desde la barra superior. Teléfono: panel que entra y sale por la derecha. */
[data-menu-panel] > button{animation:none!important;opacity:0;transition:opacity .16s ease-out!important}
[data-menu-panel][data-visible="true"] > button{opacity:1;transition-duration:.22s!important}
[data-menu-panel] [data-m="drawer"]{
  animation:none!important;
  max-height:calc(100vh - 68px)!important;max-height:calc(100dvh - 68px)!important;
  overscroll-behavior:contain;
  opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(-6px);
  transition:clip-path .16s cubic-bezier(.23,1,.32,1),transform .16s cubic-bezier(.23,1,.32,1),opacity .16s ease-out!important
}
[data-menu-panel][data-visible="true"] [data-m="drawer"]{
  opacity:1;clip-path:inset(0 0 0 0);transform:none;
  transition:clip-path .22s cubic-bezier(.23,1,.32,1),transform .22s cubic-bezier(.23,1,.32,1),opacity .12s ease-out!important
}
/* Mientras sale ya no recibe toques */
[data-menu-panel]:not([data-visible="true"]){pointer-events:none}

@media (max-width:719.98px){
  [data-menu-panel] [data-m="drawer"]{
    max-height:none!important;height:100vh!important;height:100dvh!important;
    opacity:1;clip-path:none;transform:translateX(100%);
    transition:transform .18s cubic-bezier(.32,.72,0,1)!important
  }
  [data-menu-panel][data-visible="true"] [data-m="drawer"]{
    transform:none;transition:transform .24s cubic-bezier(.32,.72,0,1)!important
  }
}

/* Tablet (cortina): botón «Cerrar menú» visible dentro del panel, arriba a la
   derecha y fijo al desplazar el contenido. Usa el mismo botón y cierre que el teléfono. */
@media (min-width:720px){
  [data-menu-panel] [data-m="drawer-x"]{display:flex!important;position:sticky!important;top:10px!important;z-index:2!important;background:#151C24!important;flex:none}
}

/* «Reducir movimiento»: sólo opacidad breve, sin desplazamiento, escala ni cortina */
@media (prefers-reduced-motion:reduce){
  [data-menu-panel] [data-m="drawer"]{transform:none!important;clip-path:none!important;opacity:0;transition:opacity .15s ease-out!important}
  [data-menu-panel][data-visible="true"] [data-m="drawer"]{opacity:1;transition:opacity .15s ease-out!important}
  [data-menu-panel] > button,[data-menu-panel][data-visible="true"] > button{transition:opacity .15s ease-out!important}
}

/* ── Visor 3D en grande (Estima tu impresión) ──────────────────────────────
   data-visible lo controla la página. Aparece en 0.22 s (leve acercamiento
   desde 0.97 + opacidad) y se va en 0.16 s; son transiciones, así que un
   cierre a mitad se revierte desde donde va. */
[data-cm-visor]{
  height:100vh;height:100dvh;bottom:auto!important;
  overscroll-behavior:contain;
  opacity:0;transition:opacity .16s ease-out!important
}
[data-cm-visor][data-visible="true"]{opacity:1;transition:opacity .22s cubic-bezier(.23,1,.32,1)!important}
[data-cm-visor]:not([data-visible="true"]){pointer-events:none}
[data-cm-visor] [data-cm-visor-caja]{
  height:min(86vh,820px)!important;height:min(86dvh,820px)!important;
  transform:scale(.97);transition:transform .16s cubic-bezier(.23,1,.32,1)!important
}
[data-cm-visor][data-visible="true"] [data-cm-visor-caja]{transform:none;transition:transform .22s cubic-bezier(.23,1,.32,1)!important}
/* Teléfono y tablet: ocupa todo el espacio disponible sin quedar bajo la barra de Safari */
@media (max-width:1039.98px){
  [data-cm-visor]{padding:max(10px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px))!important}
  [data-cm-visor] [data-cm-visor-caja]{width:100%!important;height:100%!important}
}
/* «Reducir movimiento»: sólo opacidad breve, sin escala */
@media (prefers-reduced-motion:reduce){
  [data-cm-visor],[data-cm-visor][data-visible="true"]{transition:opacity .15s ease-out!important}
  [data-cm-visor] [data-cm-visor-caja],[data-cm-visor][data-visible="true"] [data-cm-visor-caja]{transform:none!important;transition:none!important}
}

/* ── Preguntas frecuentes (Inicio y Diseño a medida) ────────────────────────
   La respuesta siempre está en la página; data-abierto la despliega. La altura
   se anima con grid-template-rows (0fr → 1fr), que se puede revertir a mitad.
   Apertura 0.26 s; cierre 0.18 s. Cerrada queda oculta también para lectores
   de pantalla y para Tab (visibility). */
[data-cm-faq-r]{
  display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;
  transition:grid-template-rows .18s cubic-bezier(.23,1,.32,1),opacity .12s ease-out,visibility 0s linear .18s
}
[data-cm-faq-r][data-abierto="true"]{
  grid-template-rows:1fr;opacity:1;visibility:visible;
  transition:grid-template-rows .26s cubic-bezier(.23,1,.32,1),opacity .2s ease-out .04s,visibility 0s
}
/* Al abrir otra pregunta, la anterior se recoge al mismo ritmo que la nueva se
   despliega: las dos alturas se compensan y el resto de la página no da doble salto */
[data-cm-faq-r][data-cede="true"]:not([data-abierto="true"]){
  transition:grid-template-rows .26s cubic-bezier(.23,1,.32,1),opacity .12s ease-out,visibility 0s linear .26s
}
[data-cm-faq-in]{overflow:hidden;min-height:0}
/* El círculo +/– cambia de color con la misma suavidad en las dos páginas */
[data-cm-faq-b] > span:last-child{transition:background-color .2s ease,color .2s ease}
/* «Reducir movimiento»: la altura cambia sin animación; sólo un desvanecido breve */
@media (prefers-reduced-motion:reduce){
  [data-cm-faq-r]{transition:opacity .15s ease-out,visibility 0s linear .15s!important}
  [data-cm-faq-r][data-abierto="true"]{transition:opacity .15s ease-out,visibility 0s!important}
}

/* ── Paneles pequeños: ajustes de cada pieza (Cotizador, sólo teléfono) y
   comparativa técnica (Materiales) ───────────────────────────────────────
   Mismo mecanismo que las preguntas frecuentes: el panel siempre está en la
   página y data-abierto despliega sólo el contenedor (los controles internos no
   se animan). Apertura 0.24 s; cierre 0.16 s; reversible a mitad. Cerrado queda
   oculto para Tab y lectores de pantalla. El margen negativo con relleno evita
   que el recorte corte los anillos de foco de los controles. */
[data-cm-panel="tec"],
[data-cm-panel="aj"]{display:grid}
[data-cm-panel-in]{min-width:0}
[data-cm-panel="tec"]{
  grid-template-rows:0fr;opacity:0;visibility:hidden;
  transition:grid-template-rows .16s cubic-bezier(.23,1,.32,1),opacity .1s ease-out,visibility 0s linear .16s
}
[data-cm-panel="tec"][data-abierto="true"]{
  grid-template-rows:1fr;opacity:1;visibility:visible;
  transition:grid-template-rows .24s cubic-bezier(.23,1,.32,1),opacity .18s ease-out .04s,visibility 0s
}
[data-cm-panel="tec"] > [data-cm-panel-in]{overflow:hidden;min-height:0;padding:4px;margin:-4px}
@media (max-width:719.98px){
  [data-cm-panel="aj"]{
    grid-template-rows:0fr;opacity:0;visibility:hidden;
    transition:grid-template-rows .16s cubic-bezier(.23,1,.32,1),opacity .1s ease-out,visibility 0s linear .16s
  }
  [data-cm-panel="aj"][data-abierto="true"]{
    grid-template-rows:1fr;opacity:1;visibility:visible;
    transition:grid-template-rows .24s cubic-bezier(.23,1,.32,1),opacity .18s ease-out .04s,visibility 0s
  }
  [data-cm-panel="aj"] > [data-cm-panel-in]{overflow:hidden;min-height:0;padding:4px;margin:-4px}
  /* El panel ya se oculta con su contenedor: la cuadrícula interna no debe desaparecer de golpe */
  [data-cm-panel="aj"] [data-m="ctrl-grid"][data-abierto="false"]{display:grid!important}
}
/* «Reducir movimiento»: la altura cambia sin animación; sólo un desvanecido breve */
@media (prefers-reduced-motion:reduce){
  [data-cm-panel="tec"],[data-cm-panel="aj"]{transition:opacity .15s ease-out,visibility 0s linear .15s!important}
  [data-cm-panel="tec"][data-abierto="true"],[data-cm-panel="aj"][data-abierto="true"]{transition:opacity .15s ease-out,visibility 0s!important}
}

/* ── Galería de la portada: dos capas que se cruzan sólo con opacidad ───────
   La página controla cuál está encima; aquí sólo vive la transición. Sin zoom,
   escala ni desplazamiento. 600 ms; con «Reducir movimiento», 150 ms. */
[data-cm-gal-capa]{
  position:absolute;inset:0;
  background-color:transparent;background-size:cover;background-position:center;
  opacity:0;transition:opacity .6s cubic-bezier(.77,0,.175,1)
}
@media (prefers-reduced-motion:reduce){
  /* sólo duración y curva: así el reinicio en línea (transition:none) sigue funcionando */
  [data-cm-gal-capa]{transition-duration:.15s!important;transition-timing-function:ease-out!important}
}