/* CandeMaker · páginas estáticas por familia y por pieza (catalogo/<slug>/) · v2 «CM Placa»
   Generadas por herramientas/seo-estatico.py. Reutilizan brand.v2.css, cm-premium.v2.css y
   cm-telefono.v2.css; aquí va lo propio de estas páginas y una copia de la ficha (abajo).
   Sólo tokens (color, espacio, forma, sombra, movimiento); hover sólo con cursor; sin bordes
   de adorno. Texto completo en el HTML servido y visible sin JavaScript. */

/* ── Copia para las estáticas (Etapa 6, presupuesto de CSS ≤ 30 KB) ────────────────────
   Las estáticas ya no cargan cm-p-catalogo.v2.css (196 reglas del catálogo interactivo) ni
   cm-interaccion.v2.css: sólo usaban de ellas lo que va aquí, copiado tal cual y en el mismo
   orden. Si cambia la ficha en cm-p-catalogo.v2.css (líneas de .ficha__referencia a
   .ficha__variante), hay que cambiarla también aquí. */
/* de cm-interaccion.v2.css: margen de las anclas bajo el encabezado fijo y respuesta al toque */
[id]{scroll-margin-top:84px!important}
@media (max-width:719.98px){[id]{scroll-margin-top:calc(68px + env(safe-area-inset-top, 0px))!important}}
@media (pointer:coarse) and (prefers-reduced-motion:no-preference){
  .cm-footer__toggle{transition:scale var(--d-press) var(--e-out),background-color var(--d-ui) ease,border-color var(--d-ui) ease,color var(--d-ui) ease,box-shadow var(--d-ui) ease,opacity var(--d-ui) ease}
  .cm-footer__toggle:active{scale:.97;transition-duration:var(--d-tap)}
}
@media (pointer:coarse) and (prefers-reduced-motion:reduce){.cm-footer__toggle:active{opacity:.72}}
/* de cm-interaccion.v2.css: WhatsApp flotante (Ronda 2); se ve cuando cm-movimiento.js pone data-oculto="0" */
[data-m="wa-float"]{transition:opacity var(--d-ui) ease,transform var(--d-ui) var(--e-out),background-color var(--d-ui) ease}
[data-m="wa-float"]:not([data-oculto]),[data-m="wa-float"][data-oculto="1"]{opacity:0!important;pointer-events:none!important;transform:scale(.96)!important}
@media (prefers-reduced-motion:reduce){[data-m="wa-float"]{transition:opacity var(--d-ui) ease,background-color var(--d-ui) ease}[data-m="wa-float"]:not([data-oculto]),[data-m="wa-float"][data-oculto="1"]{transform:none!important}}
/* de cm-p-catalogo.v2.css: la ficha */
.ficha__referencia{max-width:52ch}
.ficha__precio{display:grid;gap:var(--s-1)}
/* Precio de 32 / 36 px en peso 800 con cifras tabulares; nota y entrega debajo */
.ficha__precio-n{font-family:var(--f-display);font-weight:800;font-size:var(--t-precio-ficha);line-height:1.1;color:var(--c-ink);font-variant-numeric:tabular-nums}
@media (min-width:1024px){.ficha__precio-n{font-size:36px}}
html.fonts-ready .ficha__precio-n{letter-spacing:-.015em}
.ficha__entrega{color:var(--c-ink-2)}
.ficha__acc{display:grid;gap:var(--s-3);margin:var(--s-5) 0 var(--s-6)}
.ficha__dudas{justify-self:start}
.ficha__long{margin-bottom:var(--s-5);color:var(--c-ink)}
/* Especificaciones como placa técnica: celdas con regla superior (cm-dato--placa), valor en
   Manrope 600 de 17 px (el número grande de la placa es para cifras; aquí hay texto) */
.ficha__specs{margin-bottom:var(--s-6)}
.ficha__specs.cm-dato--placa{row-gap:var(--s-4)}
.ficha__specs.cm-dato--placa > div{padding-top:var(--s-3)}
.ficha__specs.cm-dato--placa dd{font-weight:600;font-size:17px;line-height:1.35;letter-spacing:0}
/* Cota (páginas estáticas): la medida de lista con su línea de cota de 1 px y extremos de 6 px */
.ficha__cota{position:relative;display:inline-block;padding-bottom:11px}
.ficha__cota::before{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:var(--c-line-ui)}
.ficha__cota::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;border-inline:1px solid var(--c-line-ui)}
.ficha__bloque{display:grid;gap:var(--s-2);margin-bottom:var(--s-5)}
.ficha__usos{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.ficha__usos li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--c-ink-2)}
/* El check va en el tono de la tinta: el azul es sólo acción */
.ficha__usos svg{flex:none;width:18px;height:18px;color:var(--c-ink-3);margin-top:3px}
.ficha__variante{display:grid;gap:6px;justify-items:start;border-top:1px solid var(--c-line);padding-top:var(--s-4)}

.pg{background:var(--c-bg)}

/* ── Encabezado sin JavaScript ──────────────────────────────────────────
   ≥ 900 px: la navegación completa en la barra (igual que las páginas dc).
   < 900 px: debajo de la barra, una fila deslizable con los mismos cuatro enlaces y el
   mismo estilo que .cm-nav. La fila va fuera del encabezado fijo: se va con el scroll
   y la barra fija se queda en 56/64 px. Mismo material que la barra (grafito al 92 %). */
.pg-subnav{display:none;background:var(--c-dark);border-top:1px solid var(--c-dark-line)}
@supports (background:color-mix(in srgb,red 50%,blue)){.pg-subnav{background:color-mix(in srgb,var(--c-dark) 92%,transparent)}}
@media (prefers-reduced-transparency:reduce){.pg-subnav{background:var(--c-dark)}}
@media (prefers-contrast:more){.pg-subnav{background:var(--c-dark)}}
.pg-subnav__in{margin-inline:auto;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.pg-subnav__in::-webkit-scrollbar{display:none}
.pg-subnav__in a{flex:none;scroll-snap-align:start}
.pg-subnav :focus-visible{outline-color:var(--c-blue-bright)}
@media (max-width:899.98px){.pg-nav{display:none}.pg-subnav{display:block}}
/* Teléfono: WhatsApp ya está en la barra inferior (igual que en las páginas dc, que muestran «Menú») */
/* Ronda 8: en teléfono se queda el botón de tema; «Escríbenos» ya está en el botón flotante */
@media (max-width:719.98px){.pg-header .cm-header__wa{display:none}}

.pg-main{padding-block:var(--s-5) var(--s-8)}
@media (min-width:720px){.pg-main{padding-block:var(--s-6) var(--s-9)}}

/* ── Migas (mismo aspecto que .cm-crumbs) ───────────────────────────────── */
.pg-migas ol{list-style:none;margin:0 0 var(--s-4);padding:0;display:flex;flex-wrap:wrap;align-items:center;font-size:14px;color:var(--c-ink-3)}
.pg-migas li{display:inline-flex;align-items:center}
.pg-migas li+li::before{content:"/";margin:0 var(--s-2);color:var(--c-ink-3)}
.pg-migas a{display:inline-flex;align-items:center;min-height:44px;color:var(--c-ink-3);transition:color var(--d-ui) ease}
.pg-migas [aria-current]{color:var(--c-ink);font-weight:500}
@media (hover:hover) and (pointer:fine){.pg-migas a:hover{color:var(--c-blue-deep)}}
@media (pointer:coarse){.pg-migas a:active{opacity:.7}}

/* ── Pieza: retícula 11/10 con la foto 4:3 fija al desplazar ─────────────── */
.pieza{display:grid;gap:var(--s-6)}
@media (min-width:1024px){.pieza{grid-template-columns:minmax(0,11fr) minmax(0,10fr);gap:var(--s-7);align-items:start}.pieza__media{position:sticky;top:calc(var(--head-h) + var(--s-5))}}
.pieza__foto{display:block;position:relative;aspect-ratio:4/3;border-radius:var(--r-l);overflow:hidden;background:var(--c-bg-2);box-shadow:var(--sh-ring)}
.pieza__foto img{display:block;width:100%;height:100%;object-fit:cover}
/* Marcador «Foto real en camino» (cm-premium.v2.css): conserva su retícula centrada */
.pieza__foto.cm-pendiente{display:grid}
.pieza__media .ficha__referencia{margin-top:var(--s-3)}
.pieza__fam{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin:0 0 var(--s-2)}
/* H1 con .cm-h1-largo (30 / 36 / 40 / 46 px, 700, máx. 24ch): sin valores propios (T6) */
.pieza__t{margin:0 0 var(--s-3)}
.pieza__lead{font-size:17px;line-height:var(--lh-lead);color:var(--c-ink-2);margin:0 0 var(--s-5);max-width:52ch;text-wrap:pretty}
@media (min-width:720px){.pieza__lead{font-size:19px}}
.pieza .ficha__acc .cm-btn{text-decoration:none}

/* ── Cómo se pide: numerales tabulares con regla superior (sin círculos) ── */
.pg-pasos{margin:var(--s-8) 0 0;display:grid;gap:var(--s-4);max-width:var(--wrap-lectura)}
.pg-pasos h2{margin:0}
.pg-pasos__lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.pg-pasos__lista li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--s-3);align-items:baseline;padding-top:var(--s-3);border-top:1px solid var(--c-line);color:var(--c-ink-2);font-size:16px;line-height:1.5}
.pg-pasos__lista li strong{color:var(--c-ink);font-weight:600}
.pg-pasos__n{font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--c-ink);font-variant-numeric:tabular-nums}

/* ── Tarjetas: iguales a las del Catálogo (foto 4:3 con hairline, nombre y precio) ── */
.pg-rel{margin-top:var(--s-8)}
.pg-rel__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-5)}
.pg-rel__head h2{margin:0}
.pg-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6) var(--s-3)}
@media (min-width:720px){.pg-grid{gap:var(--s-7) var(--s-5)}}
@media (min-width:1024px){.pg-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-7) var(--s-6)}}
@media (min-width:1280px){.pg-grid{gap:var(--s-8) var(--s-6)}}
@media (min-width:1440px){.pg-grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--s-5)}}
.pg-grid--familia{margin-top:var(--s-6)}
.pg-card{min-width:0}
.pg-card__a{display:flex;flex-direction:column;gap:var(--s-4);height:100%;color:inherit;text-decoration:none}
.pg-card__media{position:relative;display:block;border-radius:var(--r-m);overflow:hidden;box-shadow:var(--sh-ring);transition:transform var(--d-press) var(--e-out)}
.pg-card__foto{display:block;aspect-ratio:4/3;background:var(--c-bg-2);overflow:hidden}
.pg-card__foto img{display:block;width:100%;height:100%;object-fit:cover}
.pg-card__foto.cm-pendiente{display:grid;position:relative;padding:var(--s-4) var(--s-3)}
.pg-card__body{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.pg-card__t{font-family:var(--f-display);font-weight:600;font-size:16px;line-height:1.3;color:var(--c-ink);transition:color var(--d-ui) ease}
@media (min-width:720px){.pg-card__t{font-size:17px}}
@media (min-width:1280px){.pg-card__t{font-size:18px}}
/* Todo el texto a la vista (A14): sin recorte de líneas */
.pg-card__lead{font-size:14px;line-height:1.45;color:var(--c-ink-2)}
.pg-card__meta{font-size:13px;line-height:1.45;color:var(--c-ink-3);font-variant-numeric:tabular-nums}
.pg-card__precio{font-family:var(--f-display);font-weight:700;font-size:17px;line-height:1.25;color:var(--c-ink);margin-top:auto;padding-top:var(--s-1);font-variant-numeric:tabular-nums}
@media (min-width:720px){
  .pg-card__body{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t precio" "lead lead" "meta meta";column-gap:var(--s-4);row-gap:6px;align-content:start}
  .pg-card__t{grid-area:t;align-self:start}
  .pg-card__precio{grid-area:precio;align-self:start;margin:0;padding:0;line-height:1.3;text-align:right;white-space:nowrap}
  .pg-card__lead{grid-area:lead}
  .pg-card__meta{grid-area:meta}
}
@media (hover:hover) and (pointer:fine){.pg-card__a:hover .pg-card__t{color:var(--c-blue-deep)}}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.pg-card{transition:translate var(--d-ui) var(--e-out)}.pg-card:hover{translate:0 -2px}}
@media (pointer:coarse) and (prefers-reduced-motion:no-preference){.pg-card__a:active .pg-card__media{transform:scale(.985);transition-duration:var(--d-tap)}}
@media (pointer:coarse) and (prefers-reduced-motion:reduce){.pg-card__a{transition:opacity var(--d-press) ease}.pg-card__a:active{opacity:.8}}

/* ── Familia: barra de título clara (como la portada del Catálogo) y retícula ── */
.pg-main--familia{padding-top:0}
.pg-barra{background:var(--c-bg-2);padding-block:var(--s-2) var(--s-6)}
@media (min-width:720px){.pg-barra{padding-block:var(--s-4) var(--s-7)}}
@media (min-width:1280px){.pg-barra{padding-block:var(--s-5) var(--s-8)}}
.pg-head{display:grid;gap:var(--s-3);max-width:64ch}
/* H1 de la familia con .cm-display, al tamaño del H1 del Catálogo: 34 / 40 / 44 / 50 px (Ronda 2) */
.pg-head__t{font-size:34px;line-height:1.06}
@media (min-width:720px){.pg-head__t{font-size:40px}}
@media (min-width:1024px){.pg-head__t{font-size:44px}}
@media (min-width:1280px){.pg-head__t{font-size:50px;line-height:1.04}}
html.fonts-ready .pg-head__t{letter-spacing:-.026em}
.pg-head .pieza__lead{margin:0}
/* Consejo (Ronda 2): el mismo foco en círculo azul que en el Catálogo */
.pg-aviso{display:flex;align-items:flex-start;gap:12px;width:fit-content;margin:0;padding:12px 16px 12px 12px;border-radius:var(--r-m);background:var(--c-blue-tint);color:var(--c-ink-2)}
.pg-aviso > span:last-child{padding-top:3px}
.pg-aviso__ico{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--c-blue-btn);color:#fff}
.pg-aviso__ico svg{width:16px;height:16px}
.pg-head__meta{font-variant-numeric:tabular-nums}
.pg-cta{display:flex;align-items:center;gap:var(--s-3) var(--s-5);flex-wrap:wrap;margin:var(--s-7) 0 0}
.pg-cta .cm-btn{text-decoration:none}
/* Otras colecciones: filas de lista (título + descripción + chevrón) con línea entre filas */
.pg-otras{margin-top:var(--s-8)}
.pg-otras h2{margin:0 0 var(--s-4)}
.pg-otras__lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--s-6);border-top:1px solid var(--c-line)}
@media (min-width:720px){.pg-otras__lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.pg-otras__lista{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pg-otras__lista li{border-bottom:1px solid var(--c-line)}
.pg-fam{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s-3);row-gap:2px;align-items:center;min-height:72px;padding:var(--s-3) 0;color:inherit;text-decoration:none;transition:opacity var(--d-out) ease}
.pg-fam__t{font-family:var(--f-display);font-weight:600;font-size:16px;line-height:1.35;color:var(--c-ink);transition:color var(--d-ui) ease}
.pg-fam .cm-small{grid-column:1}
.pg-fam::after{content:"";grid-column:2;grid-row:1 / span 2;width:8px;height:8px;margin-right:6px;border-right:1.5px solid var(--c-ink-3);border-bottom:1.5px solid var(--c-ink-3);transform:rotate(-45deg)}
@media (hover:hover) and (pointer:fine){.pg-fam:hover .pg-fam__t{color:var(--c-blue-deep)}}
@media (pointer:coarse){.pg-fam:active{opacity:.7}}

/* ── Teléfono (< 720 px): todo el texto a la vista (A14), listas verticales ── */
@media (max-width:719.98px){
  .pg-main{padding-block:var(--s-3) var(--s-8)}
  .pg-main--familia{padding-top:0}
  .pg-migas{display:none}
  .pg-barra{padding-block:var(--s-5) var(--s-6)}
  html.fonts-ready .pg-head__t{letter-spacing:-.022em}
  .pg-rel,.pg-pasos,.pg-otras{margin-top:var(--s-7)}
  /* Foto pendiente en tarjeta chica: el símbolo sube y se achica para no tocar el nombre */
  .pg-card__foto.cm-pendiente::before{background-position:center 16%;background-size:14% auto}
}