/* CandeMaker · Preguntas frecuentes (Ronda 13, 10‑oct‑2026) · «CM Placa», v2
   R13-5 y R13-13 (dueño): todas las preguntas en una página, agrupadas por tema y sin pestañas.
   Ajustes del 10‑oct (dueño: «le falta imagen y diseño, da flojera leerlo»): cada tema es su propio apartado con una
   foto 4:3 (3:2 en teléfono), numeral y cuántas preguntas tiene; los fondos alternan desde la portada grafito (gris,
   blanco o negro, gris…) y en escritorio la foto cambia de lado. Las preguntas son tarjetas que se abren, con el mismo
   filo azul que los factores de «Estima tu impresión». Sólo tokens de brand.v2.css; hover sólo con cursor. */

/* ── Portada grafito: título y los cuatro temas como accesos con icono y cuenta ── */
.pre-hero{padding:8px 0 48px}
@media (min-width:720px){.pre-hero{padding:16px 0 64px}}
.pre-hero .cm-eyebrow{margin-top:16px}
.pre-hero__h1{margin:14px 0 0;max-width:18ch}
.pre-temas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:28px}
@media (min-width:1024px){.pre-temas{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:40px}}
.pre-temas__a{display:flex;align-items:center;gap:12px;min-width:0;min-height:68px;padding:12px 14px;border-radius:var(--r-l);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:var(--c-ink);text-decoration:none;transition:background-color var(--d-ui) ease,transform var(--d-press) var(--e-out)}
.pre-temas__ico{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff}
.pre-temas__ico::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:no-repeat center / contain;mask:no-repeat center / contain}
.pre-temas__ico[data-ico="precios"]::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'><path d='M20.6 13.4l-7.2 7.2a2 2 0 01-2.8 0L3 13V3h10l7.6 7.6a2 2 0 010 2.8z'/><circle cx='7.5' cy='7.5' r='1.5'/></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'><path d='M20.6 13.4l-7.2 7.2a2 2 0 01-2.8 0L3 13V3h10l7.6 7.6a2 2 0 010 2.8z'/><circle cx='7.5' cy='7.5' r='1.5'/></svg>")}
.pre-temas__ico[data-ico="proceso"]::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'><circle cx='12' cy='12' r='8.5'/><path d='M12 7.5V12l3 2'/></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'><circle cx='12' cy='12' r='8.5'/><path d='M12 7.5V12l3 2'/></svg>")}
.pre-temas__ico[data-ico="materiales"]::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'><circle cx='12' cy='12' r='8.5'/><circle cx='12' cy='12' r='3'/><path d='M12 3.5v5.5'/></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'><circle cx='12' cy='12' r='8.5'/><circle cx='12' cy='12' r='3'/><path d='M12 3.5v5.5'/></svg>")}
.pre-temas__ico[data-ico="diseno"]::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'><path d='M3 21v-4l11-11 4 4L7 21z'/><path d='M13 7l4 4'/></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'><path d='M3 21v-4l11-11 4 4L7 21z'/><path d='M13 7l4 4'/></svg>")}
.pre-temas__txt{display:grid;gap:2px;min-width:0}
.pre-temas__t{font-family:var(--f-display);font-weight:600;font-size:15px;line-height:1.25;color:var(--c-ink)}
.pre-temas__n{font-size:13px;line-height:1.3;color:var(--c-ink-3)}
.pre-temas__a:focus-visible{outline:2px solid var(--c-blue);outline-offset:2px}
.pre-temas__a:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.pre-temas__a:hover{background:rgba(255,255,255,.1)}}
@media (prefers-reduced-motion:reduce){.pre-temas__a:active{transform:none;opacity:.85}}

/* ── Cada tema: foto, numeral y cuenta («01 — 5 preguntas», como «01 — Misión» en Nosotros), título y preguntas ──
   Al llegar por ancla, la foto queda 16 px bajo el encabezado (la regla general sumaría el relleno de la sección) */
section.pre-tema[id]{scroll-margin-top:calc(var(--head-h) + env(safe-area-inset-top,0px) - var(--sec-y) + 16px)!important}
.pre-tema__grid{display:grid;gap:28px}
@media (min-width:1024px){
  .pre-tema__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
  .pre-tema--der .pre-tema__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .pre-tema--der .pre-tema__cab{order:2}
  .pre-tema__cab{position:sticky;top:calc(var(--head-h) + 32px)}
}
.pre-tema__cab{display:grid;gap:20px;align-content:start}
.pre-tema__foto{aspect-ratio:3/2;border-radius:var(--r-l);box-shadow:var(--sh-2),var(--sh-ring)}
@media (min-width:1024px){.pre-tema__foto{aspect-ratio:4/3;border-radius:var(--r-xl)}}
.pre-tema__txt{display:grid;gap:10px}
.pre-tema__dato{display:flex;align-items:center;margin:0;font-family:var(--f-display);font-weight:600;font-size:13px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-3)}
.pre-tema__nn{display:inline-flex;align-items:center;gap:12px;margin-right:12px;letter-spacing:.04em;color:var(--c-ink)}
.pre-tema__nn::after{content:"";width:28px;height:1px;background:var(--c-line-2)}
.pre-tema__t{margin:0}

/* ── Preguntas: tarjetas que se abren (<details>); la abierta lleva el filo azul y el signo en azul ── */
.pre-tema__qs{display:grid;gap:10px;align-content:start}
.pre-q{border-radius:var(--r-l);background:var(--c-card);box-shadow:var(--c-card-borde);transition:box-shadow var(--d-ui) ease}
.pre-q[open]{box-shadow:var(--c-card-borde),0 0 0 1.5px var(--c-blue-line),0 12px 30px rgba(14,124,210,.10)}
.pre-q summary{display:flex;align-items:center;gap:16px;min-height:64px;padding:16px 16px 16px 20px;border-radius:inherit;list-style:none;cursor:pointer;color:var(--c-ink);font-family:var(--f-display);font-weight:600;font-size:17px;line-height:1.35;transition:color var(--d-ui) ease}
.pre-q summary::-webkit-details-marker{display:none}
.pre-q summary:focus-visible{outline:2px solid var(--c-blue);outline-offset:2px}
.pre-q__t{flex:1;min-width:0;text-wrap:pretty}
/* el signo, gris neutro sobre cualquier tarjeta (blanca, gris o grafito); azul al abrir */
.pre-q .cm-acc__signo{background:rgba(127,127,127,.14);transition:background-color var(--d-ui) ease,color var(--d-ui) ease}
.pre-q[open] .cm-acc__signo{background:var(--c-blue-btn);color:#fff}
.pre-q[open] .cm-acc__signo::after{transform:translate(-50%,-50%) rotate(0deg)}
.pre-q__a{margin:0 20px 20px;padding-top:14px;border-top:1px solid var(--c-line);font-size:var(--t-body);line-height:var(--lh-body);color:var(--c-ink-2);max-width:68ch;text-wrap:pretty}
@media (prefers-reduced-motion:no-preference){.pre-q[open] .pre-q__a{animation:cmAparece var(--d-ui) var(--e-out) both}}
@media (hover:hover) and (pointer:fine){.pre-q summary:hover{color:var(--c-blue-deep)}}
@media (pointer:coarse){.pre-q summary:active{opacity:.7}}
@media (max-width:719.98px){
  .pre-tema__qs{gap:8px}
  .pre-q summary{min-height:56px;padding:10px 12px 10px 16px;font-size:16px}
  .pre-q__a{margin:0 16px 18px}
}

/* ── Cierre: placa grafito con un solo botón ───────────────────────────── */
.pre-cierre__in{display:grid;gap:24px;justify-items:start}
.pre-cierre__in .cm-head{margin-bottom:0}
@media (min-width:1024px){.pre-cierre__in{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:48px}}