/* =========================================================
   ARISTAS — PDP Sofá Bilbao · capa de micro-interacciones
   "Modo juego" (Gran Turismo): que se sienta configurador vivo.
   + estilos del puente al modo Sims (ambiente / m²).
   Solo CSS específico del PDP; los tokens/componentes viven en aristas.css.
   ========================================================= */

/* +15% legibilidad global (fixes) — solo desktop: en mobile "zoom" (no
   estándar, mal soportado en Safari/iOS) descuadra el viewport y corta
   las fotos, así que ahí se desactiva. */
body.pdp{zoom:1.15}
@media(max-width:900px){
  body.pdp{zoom:1}
}

/* ---------------------------------------------------------
   1 · STAGE — swap con vida (shimmer "armando" + settle)
   --------------------------------------------------------- */
.stage__frame{overflow:hidden}
/* Disolvencia limpia: SOLO cross-fade de opacidad — sin zoom ni destello.
   Las fotos ya están alineadas, así que la tela se funde en el mismo sitio. */
.stage__img{transition:opacity .40s var(--ease)}
/* chip de tela: pequeño "bump" cuando cambia la tela */
.stage__chip--bump{animation:chipBump .42s var(--ease)}
@keyframes chipBump{0%{transform:translateY(4px) scale(.96);opacity:.4}100%{transform:none;opacity:1}}

/* ---------------------------------------------------------
   2 · PRECIO — count-up + señal de dirección
   --------------------------------------------------------- */
.price__amount.tick{animation:priceTick .42s var(--ease)}
@keyframes priceTick{0%{transform:scale(1)}45%{transform:scale(1.07)}100%{transform:scale(1)}}
.price__dir{font-size:15px;font-weight:600;opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.price__dir.show{opacity:1;transform:none}
.price__dir.up{color:var(--clay)}
.price__dir.down{color:#6f7d4a}

/* ---------------------------------------------------------
   3 · SELECCIÓN — feedback físico (pop) en dots y pills
   --------------------------------------------------------- */
.dot.pop{animation:dotPop .34s var(--ease)}
@keyframes dotPop{0%{transform:scale(1)}40%{transform:scale(1.2)}100%{transform:scale(1)}}
.pill.pop{animation:pillPop .34s var(--ease)}
@keyframes pillPop{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}

/* ---------------------------------------------------------
   4 · RESUMEN NAVEGABLE — eco en el grupo destino
   --------------------------------------------------------- */
.group.is-target{animation:groupHi 1.6s var(--ease)}
@keyframes groupHi{
  0%,12%{box-shadow:inset 3px 0 0 var(--accent);background:rgba(140,115,87,.07)}
  100%{box-shadow:inset 3px 0 0 transparent;background:transparent}
}

/* ---------------------------------------------------------
   5 · VISUALIZADOR DE TELAS — stagger + zoom de detalle
   --------------------------------------------------------- */
.sheet__grid .fabric-card{animation:cardIn .42s var(--ease) both;animation-delay:calc(var(--i,0) * .03s)}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sheet__detail:not([hidden]) .detail__img{animation:detailZoom .5s var(--ease)}
@keyframes detailZoom{from{transform:scale(1.05);opacity:.5}to{transform:none;opacity:1}}

/* ---------------------------------------------------------
   6 · FIT / m² — regla que "mide" + veredicto que aparece
   --------------------------------------------------------- */
.fit__verdict{transition:color .3s var(--ease),background-color .3s var(--ease)}
.fit__verdict.pop{animation:verdictPop .4s var(--ease)}
@keyframes verdictPop{0%{transform:translateY(-3px);opacity:.3}100%{transform:none;opacity:1}}
/* CTA "ver mi sala completa" (puente al Sims desde m²) */
.fit__cta{display:inline-block;margin-top:14px;font-size:13px;letter-spacing:.06em;font-weight:600;
  color:var(--accent);border-bottom:1px solid currentColor;padding-bottom:2px;transition:.25s var(--ease)}
.fit__cta[hidden]{display:none}
.fit__cta:hover{color:var(--accent-ink)}

/* Disparador "¿Cabe en tu espacio?" en la PDP (abre el medidor en modal) */
.fit-trigger{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  margin-top:20px;padding:13px 15px;background:var(--cream);border:1px solid var(--border);border-radius:8px;
  transition:border-color .25s var(--ease),background .25s var(--ease)}
.fit-trigger:hover{border-color:var(--taupe);background:#f3ede3}
.fit-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fit-trigger__ico{flex:none;width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:var(--white);border:1px solid var(--border);color:var(--accent);font-size:17px;font-weight:600}
.fit-trigger__main{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.fit-trigger__main strong{font-size:15px;font-weight:600;color:var(--espresso)}
.fit-trigger__main small{font-size:13px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fit-trigger__arrow{flex:none;color:var(--text-3);transition:transform .25s var(--ease),color .25s var(--ease)}
.fit-trigger:hover .fit-trigger__arrow{transform:translateX(3px);color:var(--accent)}

/* Modal del medidor: más ancho y alineado a la izquierda; el .fit va sin su marco cream */
.modal__card--fit{max-width:540px;text-align:left;padding:30px 32px}
#fitModal .fit{margin:0;background:transparent;padding:0}
.fit__lead{font-size:14px;color:var(--text-2);margin:0 0 16px}
/* PRD-04 · medida libre del ancho de pared */
.fit__custom{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 4px}
.fit__or{font-size:13px;color:var(--text-3);letter-spacing:.02em}
.fit__inputrow{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:10px;padding:7px 12px;background:#fff;transition:border-color .2s var(--ease)}
.fit__inputrow:focus-within{border-color:var(--accent)}
.fit__inputrow input{border:none;outline:none;width:76px;font:inherit;font-size:16px;color:var(--ink);background:none}
.fit__unit{font-size:14px;color:var(--text-3)}
/* PRD-02 · botón de descarga del QR */
.modal__dl{display:inline-block;margin-top:16px}

/* ---------------------------------------------------------
   7 · MODALES — entrada + tick + QR + cross stagger
   --------------------------------------------------------- */
.modal:not([hidden]) .modal__backdrop{animation:fadeIn .3s var(--ease)}
.modal:not([hidden]) .modal__card,
.modal:not([hidden]) .cartcard{animation:modalIn .42s var(--ease)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.modal:not([hidden]) .cartcard__tick{animation:tickPop .5s var(--ease) .12s both}
@keyframes tickPop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
.modal:not([hidden]) .modal__qr{animation:qrIn .5s var(--ease) .1s both}
@keyframes qrIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
.cartcard__crossgrid .cartcross{animation:cardIn .42s var(--ease) both;animation-delay:calc(var(--i,0) * .06s)}

/* ---------------------------------------------------------
   8 · REVEAL al hacer scroll (secciones bajas)
   --------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------------------------------------------------------
   PUENTE AL MODO SIMS — barra de acciones sobre el ambiente
   --------------------------------------------------------- */
.ambient__actions{position:absolute;left:12px;bottom:44px;display:flex;gap:8px;flex-wrap:wrap;max-width:calc(100% - 24px);z-index:2}
.ambient__act{background:rgba(255,255,255,.9);border:1px solid var(--border);border-radius:99px;
  padding:8px 15px;font-size:12px;letter-spacing:.04em;font-weight:600;color:var(--espresso);
  backdrop-filter:blur(6px);transition:.25s var(--ease)}
.ambient__act:hover{background:#fff;border-color:var(--taupe);transform:translateY(-1px)}
.ambient__act--go{background:var(--espresso);color:#fff;border-color:var(--espresso)}
.ambient__act--go:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
/* la card de cross-sell ahora arma sala → indicar que es clickable */
.cross-card{cursor:pointer}

/* ---------------------------------------------------------
   FOCO visible (accesibilidad) — conservar en todo interactivo
   --------------------------------------------------------- */
.dot:focus-visible,.pill:focus-visible,.fit__preset:focus-visible,.fabric-card:focus-visible,
.sumitem:focus-visible,.ambient__act:focus-visible,.cross-card:focus-visible,.fit__cta:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px}

/* ---------------------------------------------------------
   9 · GALERÍA VERTICAL (miniaturas a la izquierda de la foto principal)
   --------------------------------------------------------- */
/* El alto del bloque lo marca la FOTO y solo la foto.

   Antes el riel de miniaturas era un item flex con su alto natural, asi que
   si sumaba mas que la foto —cuatro de 56 con huecos de 10 son 254 frente a
   los ~223 de la foto— colgaba por debajo y estiraba el bloque. Se intento
   arreglar acotando el `max-height` por breakpoint y eso solo tapaba el
   problema en el ancho medido: a 475px la regla de movil ya no aplicaba y
   volvian los 50px de mas (Carlos, 2026-09-24).

   Ahora el riel se estira al alto del contenedor (`align-items:stretch` +
   `flex:1 1 0` + `min-height:0`), que es como se consigue que su contenido
   NO cuente para el alto: manda la foto y las miniaturas que no caben se
   desplazan dentro, que es para lo que ya estaban las flechas.
   La foto va con `align-self:flex-start` para que el stretch no le toque
   su relacion de aspecto. */
.stage__inner--with-thumbs{display:flex;gap:16px;align-items:stretch;min-width:0}
.stage__thumbs-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none;min-height:0}
.stage__thumbs-arrow{width:72px;height:18px;border:none;background:transparent;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;transition:.2s var(--ease)}
.stage__thumbs-arrow:hover{color:var(--ink)}
.stage__thumbs-arrow[hidden]{display:none}
/* 5 miniaturas visibles: 5 * (56 de alto + 10 de gap) - 10 del último = 320 */
/* `overscroll-behavior-y: contain`: al llegar al final del riel el gesto NO
   se contagia a la pagina. Sin eso, un dedo que pasa de largo empieza a
   scrollear la ficha entera y el carrusel se siente roto.
   `touch-action` se deja en auto: el desplazamiento tactil lo hace el
   navegador y asi conserva la inercia. */
.stage__thumbs-vertical{display:flex;flex-direction:column;gap:10px;flex:1 1 0;min-height:0;width:72px;overflow-y:auto;overscroll-behavior-y:contain;scroll-snap-type:y mandatory;scrollbar-width:none;-ms-overflow-style:none}
/* la manita solo cuando hay algo que arrastrar la pone el JS via scroll */
.stage__thumbs-vertical.is-agarrado{cursor:grabbing;scroll-snap-type:none;user-select:none}
.stage__thumbs-vertical.is-agarrado .stage__thumb-btn{pointer-events:none}
.stage__thumbs-vertical::-webkit-scrollbar{display:none}
.stage__thumb-btn{border:1px solid transparent;border-radius:0;padding:0;width:72px;height:56px;overflow:hidden;background:#fff;flex:none;scroll-snap-align:start;transition:border-color .2s var(--ease)}
.stage__thumb-btn img{width:100%;height:100%;object-fit:cover;display:block}
.stage__thumb-btn.is-active{border-color:var(--border)}
.stage__inner--with-thumbs .stage__frame{flex:1;min-width:0;align-self:flex-start}
@media(max-width:900px){
  .stage__inner--with-thumbs .stage__frame{min-width:0}

  /* Las miniaturas se REPARTEN el alto de la foto, no lo imponen.
     Cada una es `flex:1 1 0` dentro de un riel que ya mide lo que la foto, asi
     que cuatro fotos ocupan exactamente ese alto y ninguna queda cortada, sea
     el ancho que sea. Antes se probo al contrario —fijar el alto de la
     miniatura y acotar el riel— y a anchos estrechos la cuarta se partia por la
     mitad.

     Sin hueco entre ellas, como produccion: alli el contenedor mide 60x140 para
     cuatro miniaturas de 58x35, o sea 4x35 pegadas. Los 8px que teniamos entre
     cada una sumaban 24 y eran justo lo que no dejaba que cupieran.

     `min-height:24px` es el suelo: si un producto trae muchas fotos, dejan de
     encogerse y el riel se desplaza con sus flechas. */
  .stage__thumbs-vertical{gap:0}
  /* SIEMPRE 4 a la vista, sean 4 fotos o 11 (acuerdo con Carlos: «solo se
     muestran 4 miniaturas, con navegacion touch y flechas», como produccion).

     Cada una mide el 25% del riel, y el riel ya mide lo que la foto: cuatro
     llenan el alto exacto, ni sobra hueco ni se parte la ultima. Las demas se
     desplazan con el dedo o con las flechas.

     No vale `flex:1 1 0` —lo tuve asi y era el fallo—: eso reparte el alto
     entre TODAS, asi que el Sofa Cronos, con 11 fotos, enseñaba 6 apretadas
     en vez de 4. El 25% no depende de cuantas haya.

     Sin hueco entre ellas, como produccion (4 de 58x35 pegadas). */
  .stage__thumb-btn{flex:none;height:25%;min-height:0}
}
@media(max-width:480px){
  /* El alto del bloque lo tiene que marcar la FOTO, no el riel. Con cuatro
     miniaturas de 40 y huecos de 10 el riel media 190 y la foto 175: sobraban
     15px de riel colgando por debajo de la foto, y encima el padding vertical
     de 16 anadia otros 32. Entre las dos cosas, 30px de scroll de mas antes de
     llegar al nombre del producto (Carlos, 2026-09-24).

     Con 35 de alto y 8 de hueco el riel baja a 164 y cabe dentro de los 175 de
     la foto. Produccion usa miniaturas de 58x35, o sea el mismo alto. */
  .stage__thumbs-arrow{width:52px}
  .stage__thumbs-vertical{width:52px}
  .stage__thumb-btn{width:52px}
  .stage__inner{padding:8px 16px}
}

/* ---------------------------------------------------------
   10 · CARRUSEL DE FOTOS DE AMBIENTE
   --------------------------------------------------------- */
/* 28 y no 50: con el hueco que dejaba la foto encima, sumaban demasiado aire */
.ambient-carousel{padding:14px 0 0;position:relative}
.ambient-carousel__viewport{position:relative;overflow:hidden}
.ambient-carousel__track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:0 29.17%;scrollbar-width:none;-ms-overflow-style:none;justify-content:flex-start;cursor:grab}
.ambient-carousel__track::-webkit-scrollbar{display:none}
.ambient-carousel__track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.ambient-carousel__item{flex:0 0 100%;aspect-ratio:1024/614;scroll-snap-align:center;border-radius:0;overflow:hidden}
.ambient-carousel__item img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;user-select:none;pointer-events:none}
.ambient-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid var(--border);color:var(--ink);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px -8px rgba(0,0,0,.3);transition:.2s var(--ease)}
.ambient-carousel__arrow:hover{background:#fff;border-color:var(--taupe)}
.ambient-carousel__arrow--prev{left:14px}
.ambient-carousel__arrow--next{right:14px}
.ambient-carousel__dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
.ambient-carousel__dot{width:8px;height:8px;border-radius:50%;background:var(--border);border:none;padding:0;cursor:pointer;transition:.2s var(--ease)}
.ambient-carousel__dot.is-active{background:var(--ink);width:20px;border-radius:4px}
@media(max-width:900px){
  .ambient-carousel__track{padding:0 8%}
  .ambient-carousel__arrow{display:none}
}

/* 10b · CAJA DE LUZ — ver foto de ambiente en grande */
.ambient-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(20,17,15,.92);display:flex;align-items:center;justify-content:center;padding:40px;animation:ambientLightboxIn .2s var(--ease)}
.ambient-lightbox[hidden]{display:none}
.ambient-lightbox__img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;box-shadow:0 20px 60px -20px rgba(0,0,0,.6)}
.ambient-lightbox__close{position:absolute;top:20px;right:24px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s var(--ease)}
.ambient-lightbox__close:hover{background:rgba(255,255,255,.22)}
@keyframes ambientLightboxIn{from{opacity:0}to{opacity:1}}
@media(max-width:900px){
  .ambient-lightbox{padding:16px}
  .ambient-lightbox__close{top:12px;right:12px}
}

/* ---------------------------------------------------------
   11 · DESCRIPCIÓN + ACORDEÓN (dimensiones/materiales/detalles)
   --------------------------------------------------------- */
/* Descripción y acordeón van uno al lado del otro, como en producción */
/* align-items:start y NO center: con center, al abrir un acordeón la columna
   crece y el texto se recoloca solo. El centrado lo aplica el JS una vez, como
   padding-top, y así el texto se queda quieto al desplegar. */
.specs{padding:56px 40px 20px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:start}
/* Producción usa Futura PT 30px/300; acá 26px por decisión de Carlos Sotelo */
.specs__desc{color:var(--text-2);margin:0;font-size:26px;font-weight:300;line-height:1.4}
.specs__desc p{margin:0 0 .5em}
.specs__desc p:last-child{margin-bottom:0}
/* titulo que traen las descripciones cortas de la «Vista anterior»: se pinta como la
   primera linea en <strong> de las descripciones nuevas (mismo tamano, peso 400) */
.specs__desc :is(h1,h2,h3,h4){margin:0;font:inherit;font-weight:400;color:inherit;letter-spacing:normal;text-transform:none}
.specs__desc :is(h1,h2,h3,h4) :is(strong,b){font:inherit}
.accordion{border-top:1px solid var(--border)}
.accordion__item{border-bottom:1px solid var(--border)}
/* El boton del acordeon va dentro de un <h2> para que la seccion tenga nivel:
   sin el, el documento saltaba de h1 al h3 que trae el contenido del cliente
   (axe: heading-order). El h2 no pinta nada, el boton sigue mandando. */
.accordion__h{margin:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:none}
.accordion__head{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;background:none;border:none;padding:18px 4px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ink);cursor:pointer}
.accordion__ic{font-size:18px;color:var(--accent);transition:transform .25s var(--ease);flex:none}
.accordion__item.is-open .accordion__ic{transform:rotate(45deg)}
/* Apertura suave: se anima grid-template-rows de 0fr a 1fr, que llega al alto
   real del contenido sin inventar un max-height mágico (y sin que el easing se
   sienta raro cuando una sección es corta y otra larga). Por eso el div interno:
   display:none no se puede animar. */
.accordion__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease);color:var(--text-2);font-size:15px;line-height:1.7}
.accordion__item.is-open .accordion__body{grid-template-rows:1fr}
/* el padding inferior va aparte y también se anima: si se deja fijo, la fila
   del grid nunca baja de 20px y el acordeón no cierra del todo */
.accordion__inner{overflow:hidden;min-height:0;padding:0 4px;transition:padding-bottom .35s var(--ease)}
.accordion__item.is-open .accordion__inner{padding-bottom:20px}
.accordion__body table{width:100%;border-collapse:collapse;margin:10px 0}
/* Filas de las tablas: linea mas tenue que la que separa los items del acordeon, y la
   ultima sin linea para que no se duplique con el borde del item. */
.accordion__body td{padding:4px 8px 4px 0;border-bottom:1px solid #f1eee8}
.accordion__body tr:last-child td{border-bottom:0}
/* Los planos ocupan el ancho del contenedor. Sin border-radius: en Aristas las
   imágenes nunca llevan bordes redondeados. */
.accordion__body img{width:100%;height:auto;max-width:100%;margin-top:14px}
/* El HTML migrado de producción envuelve las medidas en un div con
   height:450px y scroll propio. Acá el acordeón ya crece hasta la altura del
   contenido, así que ese scroll interno sobra y además recortaría los planos. */
.accordion__inner > div[style]{height:auto!important;max-height:none!important;overflow:visible!important}
.accordion__inner td{vertical-align:top}
.accordion__body h3{font-size:14px;text-transform:uppercase;letter-spacing:.06em;margin:16px 0 6px;color:var(--ink)}
.accordion__body ul{margin:0 0 10px;padding-left:18px}
.accordion__body li{margin-bottom:4px}

@media(max-width:900px){
  .specs{grid-template-columns:1fr;gap:34px;padding-left:20px;padding-right:20px}
  .specs__desc{font-size:20px}
}
/* si el usuario pidió menos movimiento, la apertura es instantánea */
@media (prefers-reduced-motion: reduce){
  .accordion__body{transition:none}
}

/* ---------------------------------------------------------
   REDUCED MOTION — todo cae a instantáneo, sin saltos
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .stage__img,.stage__chip--bump,
  .price__amount.tick,.dot.pop,.pill.pop,.group.is-target,.sheet__grid .fabric-card,
  .sheet__detail:not([hidden]) .detail__img,.fit__verdict.pop,
  .modal:not([hidden]) .modal__backdrop,.modal:not([hidden]) .modal__card,
  .modal:not([hidden]) .cartcard,.modal:not([hidden]) .cartcard__tick,
  .modal:not([hidden]) .modal__qr,.cartcard__crossgrid .cartcross{
    animation:none!important;transition:none!important}
  .price__dir{transition:none}
  .reveal{opacity:1;transform:none;transition:none}
}

/* Precio rebajado en la ficha. Un producto variable no tiene un normal unico,
   asi que WooCommerce no emite nada tachado: lo arma el tema con el normal de
   la variacion mas barata, que es la que da el "desde". */
.price__antes{
  font-family:var(--sans);font-size:20px;font-weight:400;color:var(--text-3);   /* = .price__amount (2026-10-06) */
  text-decoration:line-through;margin-right:2px;
}
.price__dto{
  /* align-self:center y no la linea base del contenedor: la etiqueta es una
     caja con fondo, no texto corrido, y alineada por base queda colgando. */
  align-self:center;
  margin-left:2px;
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.08em;
  line-height:1;padding:5px 8px;border-radius:3px;background:var(--push);color:#fff;
}
/* Con la combinacion elegida, #priceAmount recibe el HTML de WooCommerce de esa variacion
   (<del>normal</del> <ins>final</ins>): el tachado se ve igual que .price__antes y el final
   sin subrayado. La fila puede bajar de renglon antes que desbordar en el telefono. */
.price{flex-wrap:wrap;row-gap:6px}
.price__amount del{font-size:1em;font-weight:400;color:var(--text-3);margin-right:10px}   /* mismo tamano que el final (Carlos Sotelo, 2026-10-06) */
.price__amount ins{text-decoration:none;background:none}
/* tachado y final del mismo tamano: 20px escritorio, 18px telefono (Carlos Sotelo, 2026-10-06;
   antes 26px, «quedan muy grandes»). Pisa el 26px de .price__amount de aristas.css. */
.price .price__amount{font-size:20px}
@media(max-width:600px){
  .price__antes{font-size:18px;margin-right:0}
  /* el DESDE va en su propio renglon, encima: con los dos precios del mismo tamano no cabe al lado */
  .price__label{flex:0 0 100%}
  .price{column-gap:8px;row-gap:2px}
  /* 21px y no 26: con los dos precios del mismo tamano, a 26 la etiqueta -15% bajaba de renglon
     en un telefono (287px de precios en ~300 de caja) */
  .price .price__amount{font-size:18px}
  .price__dto{font-size:12px;padding:4px 6px;margin-left:0}
}

/* ---------------------------------------------------------
   FICHA MÓVIL (<= 900px) — aprobada por Aristas el 2026-10-05, para todos los productos
   --------------------------------------------------------- */
/* Orden en el teléfono:
     foto → nombre y precio → botón «Personalízalo» (baja a los pasos)
     → carrusel de ambientes → pasos y botón de compra → ficha técnica → cross-sell
   Solo cambia el ORDEN y solo por debajo de 901px: el DOM es el de escritorio, así que el
   configurador, el precio y el carrito funcionan igual y no hay una segunda plantilla.
   El reorden es con CSS: la rejilla, el panel y su interior pasan a display:contents, así sus
   hijos quedan como hermanos del carrusel dentro de main.config (flex en columna) y se les
   pone `order`. Sirve para cualquier producto: no depende de ninguno en particular. */
/* el botón «Personalízalo» y la copia del precio sobre los pasos no existen en escritorio */
.ficha-personaliza,.price--pasos{display:none}
@media(max-width:900px){
  main.config{display:flex;flex-direction:column;--ficha-pad:40px}
  /* La ficha técnica y el cross-sell llevan .wrap, que es margin:0 auto. En una columna flex los
     márgenes auto anulan el estiramiento y la caja toma el ancho de su contenido: el cross-sell
     medía lo que sus 4 tarjetas (510px en un teléfono de 375) y la página se desplazaba de lado.
     Por eso width:100%. */
  main.config>*{min-width:0}
  main.config>.wrap{width:100%}
  .config__grid,
  .panel,
  .panel__inner{display:contents}

  /* Todo lo del panel va por defecto con los pasos (5); lo de arriba se adelanta */
  .stage{order:1}
  .panel__inner>*{order:5;margin-left:var(--ficha-pad);margin-right:var(--ficha-pad)}
  .panel__inner>.eyebrow,
  .panel__inner>.ptitle,
  .panel__inner>.price,
  .panel__inner>.pintro{order:2}
  .panel__inner>.ficha-personaliza{order:3}
  .ambient-carousel{order:4}
  .specs{order:6}
  .cross{order:7}

  /* El panel ponía el margen lateral y el aire de arriba con su padding; con display:contents ese
     padding desaparece y hay que dárselo a cada hijo. Mismos valores que .panel__inner: 40px
     hasta 640px de ancho, 20px por debajo. El último hijo no lleva margen inferior: el aire
     hasta la descripción lo pone .specs (más abajo). */
  .panel__inner>.eyebrow{margin-top:12px}
  .panel__inner>:last-child{margin-bottom:0}

  .ficha-personaliza{display:flex;flex:none;justify-content:center;align-items:center;min-width:0;margin-top:14px;margin-bottom:6px;text-decoration:none;text-align:center}
  /* al bajar con el botón, que el encabezado fijo no tape el primer paso */
  #stepsProgress{scroll-margin-top:calc(var(--sticky-h,67px) + 16px)}
  /* los pasos ya no van pegados al precio: un poco de aire tras el carrusel */
  .panel__inner>.steps{margin-top:22px}
  /* copia del precio entre el carrusel y los pasos: va con los pasos (5), no arriba (2) */
  .panel__inner>.price.price--pasos{display:flex;order:5;margin-top:22px;margin-bottom:0}
  .panel__inner>.price--pasos + .steps{margin-top:12px}

  /* Menos blanco (comparativo de Aristas, 2026-10-05). Entre el botón de compra y la descripción
     había 56px (el padding de .specs): ahora ~24px, 10 del mensaje de #ctaMsg + 14 de aquí. Y entre
     el último acordeón y «También puede interesarte» había 90px (20 de .specs + 70 de .cross): ahora
     32px. Solo teléfono: en escritorio el aire sobra y no es scroll. */
  .specs{padding-top:14px;padding-bottom:0}
  .cross{padding-top:32px}
}
@media(max-width:640px){
  main.config{--ficha-pad:20px}
}