/* ════════════════════════════════════════════════════════════════════════
   CandeMaker · capa de teléfono (< 720 px) · v2 del rediseño premium
   Lo que hace que el sitio se sienta como una app en el teléfono, sin tocar
   tablet ni escritorio: WhatsApp flotante, pie compacto con
   secciones plegables, carruseles con imanes y el comparador antes/después.
   Se carga después de cm-premium.v2.css en todas las páginas. El comportamiento
   (puntos del carrusel, pliegue del pie, arrastre del comparador) vive en
   cm-movimiento.js; aquí sólo el aspecto y las transiciones. Los tamaños de
   teléfono (ritmo, títulos, cuerpo de 17 px) ya vienen de brand.v2.css.
   ════════════════════════════════════════════════════════════════════════ */

/* El ritmo y la escala del teléfono los dan los tokens de brand.v2.css (01 §4 y §10) */
@media (max-width:719.98px){
  .cm-head--split > .cm-btn{width:100%}
}

/* ── WhatsApp flotante en teléfono (Ronda 2: sustituye a la barra inferior) ─
   El dueño pidió quitar la barra de cuatro accesos y quedarse con el menú. El
   botón redondo de WhatsApp vive en todas las páginas; fuera de Inicio sólo en
   teléfono (.cm-wa--tel), porque en tablet y escritorio el encabezado ya trae
   «Escríbenos». Su visibilidad (zonas, controles debajo, ventanas abiertas) la
   decide cm-movimiento.js → flotanteWA() con cm-interaccion.v2.css. */
@media (min-width:720px){.cm-wa--tel{display:none!important}}
@media (max-width:719.98px){
  .cm-wa{right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));width:54px;height:54px;box-shadow:0 6px 20px rgba(17,24,32,.22),0 1px 3px rgba(17,24,32,.16)}
  .cm-wa svg{width:28px;height:28px}
  .cm-wa__tip{display:none}
}
@media print{.cm-wa{display:none!important}}

/* ── Pie compacto (A10: en teléfono se quedan los dos grupos plegables) ─────
   Marca y contacto a la vista; «Servicios» e «Información» se abren al tocar
   (cm-movimiento.js envuelve cada lista en .cm-footer__plegable y convierte el
   título en botón). La altura se anima con grid-template-rows, reversible.
   Contacto: WhatsApp y correo a todo el ancho (sin recortar), Instagram y
   TikTok en dos columnas y el horario debajo. Superficie en lugar de borde. */
@media (max-width:719.98px){
  .cm-footer{padding:32px 0 calc(24px + env(safe-area-inset-bottom,0px));font-size:15px}
  .cm-footer__grid{gap:0}
  .cm-footer__marca{gap:10px;padding-bottom:20px;border-bottom:1px solid var(--c-dark-line)}
  .cm-footer__marca p{font-size:14px;max-width:none}
  .cm-footer__grid > nav{display:block}
  .cm-footer [data-cm-plegable]{border-bottom:1px solid var(--c-dark-line)}
  .cm-footer [data-cm-plegable] h2{margin:0;min-width:0}
  .cm-footer__toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:0;border:0;background:none;color:#fff;font-family:var(--f-display);font-weight:600;font-size:16px;text-align:left;cursor:pointer}
  .cm-footer__toggle::after{content:"";flex:none;width:8px;height:8px;margin-right:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.75;transition:transform var(--d-ui) var(--e-out)}
  .cm-footer [data-abierto="true"] .cm-footer__toggle::after{transform:translateY(2px) rotate(225deg)}
  .cm-footer__plegable{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows var(--d-sheet-out) var(--e-out),opacity var(--d-press) ease-out,visibility 0s linear var(--d-sheet-out)}
  .cm-footer [data-abierto="true"] .cm-footer__plegable{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows var(--d-sheet) var(--e-out),opacity var(--d-sheet-out) ease-out 40ms,visibility 0s}
  .cm-footer__plegable > .cm-footer__lista{display:grid;min-height:0;overflow:hidden;padding-bottom:8px}
  .cm-footer__plegable .cm-footer__lista > a{min-height:44px;font-size:15px}
  /* Contacto compacto (Ronda 2, dueño): WhatsApp y correo a todo el ancho; Instagram y TikTok
     lado a lado con su icono (la palabra «TikTok» queda para lectores de pantalla); filas de 44 px. */
  .cm-footer__contacto{display:block;padding-top:18px}
  .cm-footer__contacto h2{margin:0 0 10px;min-width:0;font-size:14px}
  /* plegable (Ronda 3): mismo renglón de 52 px que «Servicios» e «Información» */
  .cm-footer__contacto[data-cm-plegable]{padding-top:0}
  .cm-footer__contacto[data-cm-plegable] h2{margin:0;font-size:inherit}
  .cm-footer__contacto .cm-footer__plegable > .cm-footer__lista{padding-bottom:16px}
  .cm-footer__contacto .cm-footer__lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;font-size:14px}
  @media (max-width:339.98px){.cm-footer__contacto .cm-footer__lista{grid-template-columns:minmax(0,1fr)}}
  .cm-footer__contacto .cm-footer__lista > a{min-height:44px;padding:0 12px;border-radius:var(--r-m);background:var(--c-dark-2);color:#fff;min-width:0;gap:8px}
  .cm-footer__contacto .cm-footer__lista > a:nth-child(-n+2){grid-column:1 / -1}
  .cm-footer__contacto .cm-footer__lista > a > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cm-footer__contacto .cm-footer__lista > a[href^="mailto"]::before,
  .cm-footer__contacto .cm-footer__lista > a[href*="instagram"]::before,
  .cm-footer__contacto .cm-footer__lista > a[href*="tiktok"]::before{content:"";flex:none;width:16px;height:16px;background:#C9D1DA;-webkit-mask:no-repeat center / contain;mask:no-repeat center / contain}
  .cm-footer__contacto .cm-footer__lista > a[href^="mailto"]::before{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='M3 7l9 6 9-6'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='M3 7l9 6 9-6'/></svg>")}
  .cm-footer__contacto .cm-footer__lista > a[href*="instagram"]::before{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='2.5' width='19' height='19' rx='5.5'/><circle cx='12' cy='12' r='4.4'/><circle cx='17.6' cy='6.4' r='1.1' fill='%23000' stroke='none'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='2.5' width='19' height='19' rx='5.5'/><circle cx='12' cy='12' r='4.4'/><circle cx='17.6' cy='6.4' r='1.1' fill='%23000' stroke='none'/></svg>")}
  .cm-footer__contacto .cm-footer__lista > a[href*="tiktok"]::before{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M16.6 3c.3 2.5 1.9 4.1 4.4 4.3v3.2c-1.6 0-3.1-.5-4.4-1.4v6.4a5.9 5.9 0 1 1-5.9-5.9c.3 0 .6 0 .9.1v3.3a2.7 2.7 0 1 0 1.8 2.5V3h3.2z'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M16.6 3c.3 2.5 1.9 4.1 4.4 4.3v3.2c-1.6 0-3.1-.5-4.4-1.4v6.4a5.9 5.9 0 1 1-5.9-5.9c.3 0 .6 0 .9.1v3.3a2.7 2.7 0 1 0 1.8 2.5V3h3.2z'/></svg>")}
  .cm-footer__red{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cm-footer__contacto .cm-footer__lista > span{grid-column:1 / -1;min-height:0;padding-top:4px;font-size:13px}
  .cm-footer__legal{margin-top:8px;padding-top:12px;border-top:0;gap:0 16px;font-size:13px;justify-content:flex-start}
  .cm-footer__legal nav{margin-left:0}
  .cm-footer__legal a{min-height:44px}
}
@media (max-width:719.98px) and (prefers-reduced-motion:reduce){
  .cm-footer__plegable,.cm-footer [data-abierto="true"] .cm-footer__plegable{transition:opacity var(--d-out) ease-out,visibility 0s!important}
  .cm-footer__toggle::after{transition:none}
}

/* ── Carrusel con imanes ───────────────────────────────────────────────────
   Cualquier lista con data-cm-riel se vuelve una fila deslizable en teléfono:
   desplazamiento nativo con scroll-snap (física del sistema), una tarjeta por
   gesto y aire al final. Los puntos los dibuja cm-movimiento.js en el
   contenedor data-cm-riel-puntos que sigue a la lista. En tablet y escritorio
   la lista conserva su retícula y los puntos no se muestran. */
@media (max-width:719.98px){
  [data-cm-riel]{display:flex!important;flex-wrap:nowrap!important;gap:var(--riel-gap,16px)!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding-inline:var(--gutter);padding-bottom:4px;margin-inline:calc(-1 * var(--gutter));scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  [data-cm-riel]::-webkit-scrollbar{display:none}
  [data-cm-riel] > *{flex:0 0 var(--riel-w,88%);scroll-snap-align:start;scroll-snap-stop:always;min-width:0}
  [data-cm-riel]::after{content:"";flex:0 0 max(calc(var(--gutter) - var(--riel-gap,16px)),4px)}
  /* Controles del carrusel (Ronda 8, dueño: «más elegantes y dinámicos», como apple.com): flechas circulares
     a los lados y los puntos dentro de una pastilla gris centrada. La marca activa (un solo elemento) viaja 1:1
     con el dedo y se estira entre dos tarjetas (cm-movimiento.js → carruseles). Puntos de 20 × 44 px y flechas
     de 44 px; en los extremos la flecha se apaga. */
  .cm-riel__puntos{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:12px;min-height:44px;
    --riel-pista:rgba(17,24,32,.06);--riel-punto:rgba(17,24,32,.28);--riel-marca:var(--c-ink);--riel-flecha:rgba(17,24,32,.06)}
  html[data-tema="oscuro"] .cm-riel__puntos,.cm-oscuro .cm-riel__puntos{--riel-pista:rgba(255,255,255,.1);--riel-punto:rgba(255,255,255,.38);--riel-marca:#fff;--riel-flecha:rgba(255,255,255,.1)}
  .cm-riel__puntos:empty{display:none}
  .cm-riel__pista{position:relative;display:inline-flex;align-items:center;height:44px;padding:0 8px}
  .cm-riel__pista::before{content:"";position:absolute;left:0;right:0;top:6px;bottom:6px;border-radius:var(--r-pill);background:var(--riel-pista)}
  .cm-riel__punto{position:relative;flex:none;width:20px;height:44px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer}
  .cm-riel__punto::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--riel-punto);transition:background-color var(--d-ui) ease}
  .cm-riel__punto:focus-visible{outline:2px solid var(--c-blue);outline-offset:-8px;border-radius:10px}
  .cm-riel__marca{position:absolute;left:0;top:50%;width:20px;height:7px;margin-top:-3.5px;border-radius:4px;background:var(--riel-marca);pointer-events:none;will-change:transform}
  .cm-riel__flecha{flex:none;position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:var(--c-ink);cursor:pointer;transition:opacity var(--d-ui) ease}
  .cm-riel__flecha::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--riel-flecha);transition:background-color var(--d-ui) ease,transform var(--d-press) var(--e-out)}
  .cm-riel__flecha svg{position:relative;width:18px;height:18px}
  .cm-riel__flecha:active::before{transform:scale(.9);transition-duration:var(--d-tap)}
  .cm-riel__flecha:disabled{opacity:.3;cursor:default}
  .cm-riel__flecha:disabled:active::before{transform:none}
  .cm-riel__flecha:focus-visible{outline:2px solid var(--c-blue);outline-offset:-2px;border-radius:50%}
}
@media (min-width:720px){.cm-riel__puntos{display:none}}

/* ── Comparador antes / después (fotos de clientes) ────────────────────────
   Las dos fotos ocupan el mismo marco; la segunda («Después») se recorta con
   clip-path y el asa se arrastra 1:1 con el dedo (cm-movimiento.js). Un toque
   en cualquier punto de la foto mueve la división ahí. Sólo en teléfono: en
   tablet y escritorio las dos fotos siguen lado a lado. */
@media (max-width:719.98px){
  [data-cm-comparar][data-n="2"]{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--c-bg-2);border-radius:var(--r-l)}
  [data-cm-comparar][data-n="2"] > figure{position:absolute;inset:0;margin:0;aspect-ratio:auto;border-radius:0}
  [data-cm-comparar][data-n="2"] > figure:nth-of-type(2){clip-path:inset(0 0 0 50%)}
  [data-cm-comparar][data-n="2"] > figure:nth-of-type(2) .cm-tag--onmedia{left:auto;right:12px}
  .cm-comparar__asa{position:absolute;top:0;bottom:0;left:-22px;width:44px;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:col-resize;will-change:transform}
  .cm-comparar__asa::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 .5px rgba(17,24,32,.25)}
  .cm-comparar__boton{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:#111820;box-shadow:var(--sh-2);transition:transform var(--d-press) var(--e-out)}
  .cm-comparar__boton svg{width:18px;height:18px}
  .cm-comparar__asa[data-activa] .cm-comparar__boton{transform:scale(1.08)}
  .cm-comparar__rango{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;white-space:nowrap}
  .cm-comparar__rango:focus-visible ~ .cm-comparar__asa .cm-comparar__boton{outline:2px solid var(--c-blue);outline-offset:2px}
}
@media (min-width:720px){
  [data-cm-comparar] > figure{clip-path:none!important}
  .cm-comparar__asa,.cm-comparar__rango{display:none!important}
}
/* «Reducir movimiento»: sin escalas en los puntos ni en el asa del comparador */
@media (max-width:719.98px) and (prefers-reduced-motion:reduce){
  .cm-riel__flecha:active::before{transform:none}
  .cm-comparar__asa[data-activa] .cm-comparar__boton{transform:none}
}