/* ════════════════════════════════════════════════════════════════
   VOLANTES PUBLICITARIOS · ficha de producto y cotizador (2026-10-30)
   css/volantes-ficha.css · lo usa /imprenta-offset/volantes-publicitarios/
   Negro #111 · Verde corporativo #bdff06 · Verde de selección #12a150
   ════════════════════════════════════════════════════════════════ */
.vf{ --vf-tx:#15171a; --vf-mu:#5f6670; --vf-ln:#e3e6ea; --vf-bg:#f6f7f8; --vf-ok:#12a150; --vf-lima:#bdff06;
  background:var(--vf-bg); color:var(--vf-tx); padding:40px 0 44px; font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; }
.vf *{ box-sizing:border-box; }
.vf-wrap{ max-width:1180px; margin:0 auto; padding:0 20px; }

/* ── Cabecera ── */
.vf-cab{ grid-area:cab; margin:0; }
.vf-h1{ margin:0 0 4px; font:800 clamp(1.7rem,3.3vw,2.6rem)/1.08 "DM Sans",system-ui,sans-serif; letter-spacing:-.02em; color:var(--vf-tx); text-transform:none; }
.vf-sub{ margin:0 0 14px; color:var(--vf-mu); font-size:1.05rem; }
.vf-pros{ display:flex; flex-wrap:wrap; gap:10px 26px; margin:0; padding:0; list-style:none; }
.vf-pros li{ display:flex; align-items:center; gap:10px; font-size:.82rem; color:var(--vf-mu); line-height:1.3; }
.vf-pros b{ display:block; color:var(--vf-tx); font-weight:700; font-size:.88rem; }
.vf-pro-ico{ display:grid; place-items:center; width:40px; height:40px; border-radius:10px; background:#fff; border:1px solid var(--vf-ln); color:#111; flex:0 0 auto; }

/* ── Grilla PC: (título + galería + ejemplos) | cotizador ── */
.vf-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,430px); grid-template-areas:"cab cot" "gal cot" "trab cot"; gap:18px 30px; align-items:start; }
.vf-gal{ grid-area:gal; min-width:0; }
.vf-gal-main{ position:relative; border-radius:16px; overflow:hidden; background:#fff; border:1px solid var(--vf-ln); aspect-ratio:6/5; }
.vf-gal-a{ display:block; width:100%; height:100%; cursor:zoom-in; }
.vf-gal-main picture, .vf-gal-main img{ display:block; width:100%; height:100%; object-fit:cover; }
.vf-flecha{ position:absolute; top:50%; z-index:2; display:grid; place-items:center; width:40px; height:40px; margin-top:-20px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.94); color:#111; box-shadow:0 2px 10px rgba(0,0,0,.18); cursor:pointer; }
.vf-flecha:hover{ background:#fff; }
.vf-flecha--ant{ left:10px; } .vf-flecha--sig{ right:10px; }
.vf-gal-th{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-top:10px; }
.vf-th{ position:relative; display:block; padding:0; border:2px solid transparent; border-radius:10px; overflow:hidden; background:#fff; cursor:pointer; aspect-ratio:1/1; }
.vf-th img{ display:block; width:100%; height:100%; object-fit:cover; }
.vf-th span{ position:absolute; left:4px; bottom:4px; padding:1px 6px; border-radius:5px; background:rgba(17,17,17,.82); color:#fff; font-size:.66rem; font-weight:700; }
.vf-th.on{ border-color:var(--vf-ok); box-shadow:0 0 0 1px var(--vf-ok); }
.vf-th:focus-visible{ outline:2px solid var(--vf-ok); outline-offset:2px; }
.vf-th--mas b{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(60,64,70,.78); color:#fff; font-size:1.25rem; font-weight:800; line-height:1.1; }
.vf-th--mas small{ font-size:.68rem; font-weight:600; }

/* Ejemplos (carrusel deslizable) */
.vf-trab{ grid-area:trab; min-width:0; }
.vf-h2{ margin:4px 0 2px; font:800 1.2rem/1.2 "DM Sans",system-ui,sans-serif; color:var(--vf-tx); text-transform:none; letter-spacing:-.01em; }
.vf-trab-sub{ margin:0 0 10px; font-size:.86rem; color:var(--vf-mu); }
.vf-trab-car{ position:relative; }
.vf-trab-pista{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 40px) / 5); gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.vf-trab-pista::-webkit-scrollbar{ display:none; }
.vf-trab-it{ scroll-snap-align:start; display:block; border-radius:10px; overflow:hidden; background:#fff; border:1px solid var(--vf-ln); text-decoration:none; }
.vf-trab-it img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; transition:transform .25s; }
.vf-trab-it:hover img{ transform:scale(1.05); }
.vf-trab-it span{ display:block; padding:6px 4px; text-align:center; font-size:.76rem; color:#33383e; background:#fff; position:relative; }
.vf-trab-car .vf-flecha{ width:34px; height:34px; margin-top:-30px; }
.vf-trab-car .vf-flecha--ant{ left:-6px; } .vf-trab-car .vf-flecha--sig{ right:-6px; }

/* Color corporativo (dentro del cotizador) */
.vf-pers{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin:2px 0 16px; padding:12px 14px; border-radius:14px; background:#fff8e6; border:1px solid #f3e2b3; }
.vf-pers-ico{ flex:0 0 auto; color:#c27c00; }
.vf-pers-ico svg{ width:28px; height:28px; }
.vf-pers b{ display:block; font-size:.88rem; }
.vf-pers p{ margin:2px 0 0; font-size:.75rem; color:#6b5a2e; line-height:1.4; }
.vf-pers > div{ flex:1 1 200px; }
.vf-pers .vf-btn{ margin-left:auto; flex:0 0 auto; }

/* ── Cotizador ── */
.vf-cot{ grid-area:cot; position:sticky; top:90px; background:#fff; border:1px solid var(--vf-ln); border-radius:18px; padding:18px 18px 16px; box-shadow:0 10px 30px rgba(17,17,17,.06); }
.vf-form{ margin:0; }
.vf-paso{ margin:0 0 16px; padding:0; border:0; min-width:0; }
.vf-paso legend{ display:flex; align-items:center; gap:8px; margin:0 0 9px; padding:0; font-weight:800; font-size:.98rem; color:var(--vf-tx); }
.vf-num{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#111; color:var(--vf-lima); font-size:.74rem; font-weight:800; }
.vf-tams{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.vf-tam, .vf-pap, .vf-cant{ position:relative; display:block; margin:0; cursor:pointer; }
.vf-tam input, .vf-pap input, .vf-cant input, .vf-pill input{ position:absolute; opacity:0; pointer-events:none; }
.vf-tam-in{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px; height:100%; min-height:92px; padding:10px 4px 8px; border:1.5px solid var(--vf-ln); border-radius:12px; background:#fff; text-align:center; transition:border-color .15s, background .15s; }
.vf-hoja{ display:block; margin-bottom:4px; border:1.5px solid #9aa1a9; border-radius:2px; background:#f1f3f5; }
.vf-tam-in b{ font-size:.95rem; }
.vf-tam-in small{ font-size:.68rem; color:var(--vf-mu); line-height:1.2; }
.vf-tam:hover .vf-tam-in, .vf-pap:hover .vf-pap-in, .vf-cant:hover .vf-cant-in{ border-color:#9aa1a9; }
.vf-tam input:checked + .vf-tam-in, .vf-pap input:checked + .vf-pap-in, .vf-cant input:checked + .vf-cant-in{ border:2px solid #111; background:#fbfff0; box-shadow:inset 0 -3px 0 var(--vf-lima); }
.vf-tam input:checked + .vf-tam-in .vf-hoja{ border-color:#111; background:var(--vf-lima); }
.vf-tam input:focus-visible + .vf-tam-in, .vf-pap input:focus-visible + .vf-pap-in, .vf-cant input:focus-visible + .vf-cant-in, .vf-pill input:focus-visible + span{ outline:2px solid var(--vf-ok); outline-offset:2px; }
.vf-var{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:9px; font-size:.78rem; color:var(--vf-mu); }
.vf-var[hidden]{ display:none; }
.vf-pill{ position:relative; cursor:pointer; }
.vf-pill span{ display:inline-block; padding:4px 10px; border:1.5px solid var(--vf-ln); border-radius:999px; background:#fff; color:var(--vf-tx); font-weight:600; }
.vf-pill input:checked + span{ border-color:#111; background:#111; color:#fff; }
.vf-paps{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.vf-pap-in{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1.5px solid var(--vf-ln); border-radius:12px; background:#fff; }
.vf-pap-in b{ display:block; font-size:.92rem; }
.vf-pap-in small{ display:block; font-size:.72rem; line-height:1.25; color:var(--vf-mu); }
.vf-pap-ico{ flex:0 0 auto; width:30px; height:30px; border-radius:7px; background:linear-gradient(135deg,#fff 0 48%,#e7eaee 52% 100%); border:1.5px solid #c9ced4; }
.vf-pap-ico--150{ box-shadow:2px 2px 0 #c9ced4, 4px 4px 0 #e2e5e9; }
.vf-cants{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.vf-cant-in{ display:flex; flex-direction:column; gap:1px; padding:8px 10px; border:1.5px solid var(--vf-ln); border-radius:11px; background:#fff; }
.vf-cant-in b{ font-size:.9rem; }
.vf-cant-in small{ font-size:.74rem; color:var(--vf-mu); }
.vf-cant-in em{ font-style:normal; font-size:.84rem; font-weight:800; color:var(--vf-tx); }
.vf-cant--cot .vf-cant-in em{ color:#8a6400; font-weight:700; }
.vf-sel{ width:100%; height:44px; padding:0 12px; border:1.5px solid var(--vf-ln); border-radius:11px; background:#fff; color:var(--vf-tx); font:inherit; font-size:.92rem; }
.vf-sel:focus{ outline:0; border-color:#111; }
.vf-sel[hidden]{ display:none; }
.vf-cont{ display:flex; align-items:stretch; height:46px; border:1.5px solid var(--vf-ln); border-radius:11px; background:#fff; overflow:hidden; }
.vf-cont[hidden]{ display:none; }
.vf-cont-b{ flex:0 0 46px; border:0; background:#f3f4f6; color:#111; font-size:1.35rem; font-weight:700; cursor:pointer; }
.vf-cont-b:hover{ background:var(--vf-lima); }
.vf-cont-n{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; margin:0; font-size:.88rem; color:var(--vf-mu); }
.vf-cont-n input{ width:56px; height:34px; border:1.5px solid var(--vf-ln); border-radius:8px; text-align:center; font:700 1rem "DM Sans",system-ui,sans-serif; color:var(--vf-tx); -moz-appearance:textfield; }
.vf-cont-n input::-webkit-outer-spin-button, .vf-cont-n input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.vf-hint{ margin:6px 0 0; font-size:.76rem; color:var(--vf-mu); line-height:1.4; }
/* ── Resumen ── */
.vf-res{ border-top:1px solid var(--vf-ln); padding-top:12px; }
.vf-res-cab{ display:flex; justify-content:space-between; align-items:baseline; font-size:.88rem; color:var(--vf-mu); }
.vf-res-cab a{ color:#1a5fd0; font-size:.82rem; text-decoration:underline; text-underline-offset:2px; }
.vf-res-precio{ margin:2px 0 0; color:var(--vf-mu); font-size:1.05rem; }
.vf-res-precio b{ color:var(--vf-tx); font-size:2.1rem; font-weight:800; letter-spacing:-.02em; }
.vf-res-det{ margin:2px 0 0; font-size:.86rem; color:var(--vf-mu); }
.vf-res-tot{ margin:6px 0 0; font-size:.82rem; color:var(--vf-mu); }
.vf-res-tot[hidden]{ display:none; }
.vf-res-tot b{ color:var(--vf-tx); }
.vf-res-cot{ margin:8px 0 0; padding:9px 11px; border-radius:10px; background:#fff8e6; color:#6b5a2e; font-size:.82rem; }
.vf-res-btns{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.vf-res-btns .rs-ped-add{ width:100%; min-height:54px; font-size:1.08rem; font-weight:800; background:var(--vf-lima) !important; color:#111 !important; border-color:var(--vf-lima) !important; border-radius:12px; }
.vf-res-btns .rs-ped-add:hover{ filter:brightness(.95); }
.vf-confia{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0 0; padding:0; list-style:none; }
.vf-confia li{ display:flex; align-items:center; gap:7px; font-size:.68rem; color:var(--vf-mu); line-height:1.25; }
.vf-confia svg{ flex:0 0 auto; color:#111; }
.vf-confia b{ display:block; color:var(--vf-tx); font-size:.72rem; }
.vf-res-pie{ margin:10px 0 0; text-align:center; font-size:.72rem; color:var(--vf-mu); }

/* ── Botones ── */
.vf-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 16px; border-radius:11px; border:1.5px solid #111; background:#111; color:#fff; font:700 .9rem/1 "DM Sans",system-ui,sans-serif; cursor:pointer; text-decoration:none; }
.vf-btn[hidden]{ display:none; }
.vf-btn--line{ background:#fff; color:#111; min-height:38px; padding:0 12px; font-size:.82rem; }
.vf-btn--line:hover{ background:#111; color:#fff; }
.vf-btn--wa{ width:100%; min-height:50px; border-color:#1fae55; background:#25d366; color:#fff; font-size:.98rem; }
.vf-btn--wa:hover{ background:#1da851; }
.vf-btn:focus-visible{ outline:2px solid var(--vf-ok); outline-offset:2px; }

/* ── Desplegables ── */
.vf-info{ margin:28px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; align-items:start; }
.vf-acc-ico{ display:inline-grid; place-items:center; margin-right:10px; color:#1a5fd0; vertical-align:middle; }
.vf-acc > summary{ justify-content:flex-start; }
.vf-acc > summary::after{ margin-left:auto; }
.vf-acc{ background:#fff; border:1px solid var(--vf-ln); border-radius:14px; overflow:hidden; }
.vf-acc > summary{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 18px; font-weight:800; font-size:.98rem; cursor:pointer; list-style:none; }
.vf-acc > summary::-webkit-details-marker{ display:none; }
.vf-acc > summary::after{ content:""; width:9px; height:9px; border-right:2px solid #111; border-bottom:2px solid #111; transform:rotate(45deg); transition:transform .2s; margin-right:4px; }
.vf-acc[open] > summary::after{ transform:rotate(-135deg); }
.vf-acc > summary:hover{ background:#fafbfc; }
.vf-acc-in{ padding:2px 18px 18px; font-size:.9rem; line-height:1.55; color:#33383e; }
.vf-lista{ margin:0; padding-left:18px; }
.vf-lista li{ margin:4px 0; }
.vf-2col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.vf-mini-tit{ margin:6px 0 4px; font-weight:800; font-size:.86rem; }
.vf-ok{ color:#11803f; } .vf-no{ color:#b42318; }
.vf-tab-tit{ margin:4px 0 8px; font-weight:800; }
.vf-tab-scroll{ overflow-x:auto; }
.vf-tab{ width:100%; border-collapse:collapse; font-size:.88rem; }
.vf-tab th, .vf-tab td{ padding:8px 10px; border-bottom:1px solid var(--vf-ln); text-align:right; white-space:nowrap; }
.vf-tab th:first-child, .vf-tab td:first-child{ text-align:left; }
.vf-tab th{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--vf-mu); background:#fafbfc; }
.vf-tab tr.on td{ background:#fbfff0; font-weight:700; }
.vf-pers-form{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; padding:14px; border-radius:12px; background:var(--vf-bg); }
.vf-pers-form label{ display:flex; flex-direction:column; gap:4px; font-size:.76rem; font-weight:700; color:var(--vf-mu); }
.vf-pers-form input[type="text"]{ height:42px; padding:0 12px; border:1.5px solid var(--vf-ln); border-radius:10px; font:inherit; font-size:.9rem; color:var(--vf-tx); background:#fff; }
.vf-pers-form .vf-check{ flex-direction:row; align-items:center; gap:8px; grid-column:1/-1; font-size:.86rem; color:var(--vf-tx); font-weight:600; }
.vf-pers-form .vf-btn, .vf-pers-form .vf-hint{ grid-column:1/-1; }
.vf-faq details{ border-bottom:1px solid var(--vf-ln); }
.vf-faq details:last-child{ border-bottom:0; }
.vf-faq summary{ padding:11px 0; font-weight:700; cursor:pointer; }
.vf-faq p{ margin:0 0 12px; }
.vf-seo .art-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:0; }
.vf-seo .art-card{ padding:0; box-shadow:none; background:none; border:0; }
.vf-seo .art-card h3{ font-size:1rem; margin:6px 0; }
.vf-seo .art-card p{ font-size:.86rem; }
.vf-rev{ margin-top:14px; }

/* ── Responsive ── */
@media (max-width:980px){
  .vf-grid{ grid-template-columns:minmax(0,1fr); grid-template-areas:"cab" "gal" "cot" "trab"; gap:14px; }
  .vf-cot{ position:static; }
  .vf-gal-main{ aspect-ratio:4/3; }
  .vf-info{ grid-template-columns:1fr; }
  .vf-trab-pista{ grid-auto-columns:calc((100% - 30px) / 4); }
}
@media (max-width:640px){
  .vf{ padding:34px 0 30px; }
  .vf-wrap{ padding:0 14px; }
  .vf-sub{ font-size:.86rem; margin-bottom:10px; }
  .vf-pros{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
  .vf-pros li{ gap:6px; font-size:.62rem; }
  .vf-pros b{ font-size:.68rem; }
  .vf-pro-ico{ width:30px; height:30px; border-radius:8px; } .vf-pro-ico svg{ width:16px; height:16px; }
  .vf-flecha{ width:34px; height:34px; margin-top:-17px; }
  .vf-gal-th{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
  .vf-gal-th::-webkit-scrollbar{ display:none; }
  .vf-gal-th .vf-th{ flex:0 0 17%; }
  .vf-pers{ flex-wrap:wrap; } .vf-pers .vf-btn{ margin-left:0; width:100%; }
  .vf-cot{ padding:14px 12px; border-radius:16px; }
  .vf-tams{ gap:6px; } .vf-tam-in{ min-height:84px; padding:8px 2px 7px; } .vf-tam-in small{ font-size:.62rem; }
  .vf-res-precio b{ font-size:1.8rem; }
  .vf-confia{ gap:6px; } .vf-confia li{ font-size:.6rem; } .vf-confia b{ font-size:.64rem; }
  .vf-trab-pista{ grid-auto-columns:42%; }
  .vf-trab-car .vf-flecha{ display:none; }
  .vf-2col, .vf-seo .art-grid, .vf-pers-form{ grid-template-columns:1fr; }
  .vf-acc > summary{ padding:13px 14px; font-size:.92rem; } .vf-acc-in{ padding:2px 14px 14px; }
}
/* Barra inferior (celular): total y botón siempre a mano */
.btn-whatsapp{ display:none !important; }
#vol-bar{ display:none; }
@media (max-width:980px){
  #vol-bar{ display:block; }
  body{ padding-bottom:84px; }
}
html.vf-res-vista #vol-bar{ transform:translateY(110%); visibility:hidden; }

/* 2026-10-30 · SEO: encabezados reales dentro de los desplegables (H2/H3) y texto visible */
.vf-intro{ margin:40px 0 0; padding-top:24px; border-top:1px solid var(--vf-ln); max-width:none; }
.vf-intro p{ margin:6px 0 0; font-size:.92rem; line-height:1.6; color:#33383e; }
.vf .vf-acc-h{ display:inline; margin:0; padding:0; font:inherit; font-weight:800; font-size:.98rem; color:var(--vf-tx); text-transform:none; letter-spacing:0; line-height:1.3; }
.vf .vf-faq-h{ display:inline; margin:0; padding:0; font:inherit; font-weight:700; font-size:.92rem; color:var(--vf-tx); text-transform:none; letter-spacing:0; }
.vf .vf-h3{ margin:14px 0 6px; font:800 .95rem/1.3 "DM Sans",system-ui,sans-serif; color:var(--vf-tx); text-transform:none; }
.vf .vf-fmt-h{ margin:0; font:800 .95rem/1.3 "DM Sans",system-ui,sans-serif; color:var(--vf-tx); text-transform:none; }
.vf h4.vf-mini-tit{ font-family:inherit; text-transform:none; }
.vf-info{ margin-top:16px; }
@media (max-width:640px){ .vf .vf-acc-h{ font-size:.92rem; } }
.vf-fmt{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:4px 0 10px; }
.vf-fmt-it{ padding:10px 12px; border:1px solid var(--vf-ln); border-radius:10px; background:#fafbfc; }
.vf-fmt-it small{ display:block; font-size:.76rem; color:var(--vf-mu); }
.vf-fmt-it p{ margin:4px 0 0; font-size:.85rem; }
@media (max-width:640px){ .vf-fmt{ grid-template-columns:1fr; } }

/* Contador de millares: total visible junto al contador */
.vf-cont-tot{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:2px 0 4px; padding:8px 12px; border-radius:10px; background:#fbfff0; border:1px solid #e3f5b0; color:var(--vf-tx); font-size:.95rem; }
.vf-cont-tot b:last-child{ font-size:1.1rem; }
.vf-cont-tot small{ font-size:.75rem; font-weight:600; color:var(--vf-mu); }
.vf-cont-n span{ font-weight:700; color:var(--vf-tx); font-size:.95rem; }
.vf-pers--abajo{ margin:14px 0 0; }
.vf-paso{ margin-bottom:14px; }

/* 2026-10-30 · Cotizador compacto en PC: precio, cantidad y botón en la misma pantalla */
.vf-fila{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.vf-fila .vf-paso{ margin-bottom:10px; }
.vf-fila .vf-sel, .vf-fila .vf-cont{ height:44px; }
.vf-fila .vf-cont-b{ flex-basis:40px; }
.vf-fila .vf-cont-n input{ width:46px; }
.vf-cot{ padding:16px 18px 14px; }
.vf-paso{ margin-bottom:12px; }
.vf-paso legend{ margin-bottom:7px; font-size:.95rem; }
.vf-tam-in{ min-height:70px; padding:7px 4px 6px; gap:2px; }
.vf-tam-in b{ font-size:.9rem; }
.vf-hoja{ margin-bottom:2px; }
.vf-pap-in{ padding:7px 10px; }
.vf-pap-ico{ width:24px; height:24px; }
.vf-var{ margin-top:6px; }
.vf-res{ padding-top:10px; }
.vf-res-precio b{ font-size:1.9rem; }
.vf-res-btns{ margin-top:10px; }
.vf-res-btns .rs-ped-add{ min-height:50px; }
.vf-confia{ margin-top:12px; }
.vf-cot{ top:84px; }
@media (max-width:420px){ .vf-fila{ grid-template-columns:1fr; gap:0; } }
.vf-res-cab{ line-height:1.2; }
.vf-res-precio{ margin:0; line-height:1.15; }
.vf-res-det{ font-size:.8rem; margin-top:2px; }
.vf-res-tot{ margin-top:2px; font-size:.8rem; }
.vf-pap-in small{ white-space:nowrap; }
.vf-fila .vf-hint{ margin-top:4px; }
.vf-cont-n input{ width:74px !important; }
.vf-fila .vf-cont-n{ gap:4px; }

/* ══ 2026-10-30 (cc) · Como stickers y las demás fichas: galería con miniaturas en columna a la izquierda;
      a la derecha título, PRECIO ARRIBA y opciones compactas. ══ */
@media (min-width:981px){
  .vf{ padding-top:14px; }
  .vf-grid{ grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); grid-template-areas:"gal cab" "gal cot" "trab cot"; gap:0 36px; }
  .vf-cab{ padding-bottom:12px; }
  .vf .vf-h1{ font-size:clamp(1.45rem,2.2vw,1.8rem); line-height:1.12; margin-bottom:4px; }
  .vf .vf-sub{ font-size:.86rem; margin:0; }
  .vf .vf-pros{ display:none; }
  .vf-gal{ display:grid; grid-template-columns:58px minmax(0,1fr); gap:12px; align-self:start; position:sticky; top:84px; }
  .vf-gal-main{ grid-column:2; grid-row:1; aspect-ratio:4/3; }
  .vf-gal-th{ grid-column:1; grid-row:1; display:flex; flex-direction:column; gap:10px; margin:0; height:0; min-height:100%; overflow-x:hidden; overflow-y:auto; scrollbar-width:none; }
  .vf-gal-th::-webkit-scrollbar{ display:none; }
  .vf-gal-th .vf-th{ flex:0 0 auto; width:58px; height:58px; }
  .vf-trab{ margin-top:18px; }
  .vf-cot{ position:static; padding:16px 18px; border-radius:18px; }
}
/* Precio arriba (lo mueve js/volantes.js) */
.vf-top{ margin:-2px 0 14px; padding:0 0 12px; border-bottom:1px solid var(--vf-ln); }
.vf-top .vf-res-cab{ font-size:.78rem; }
.vf-top .vf-res-precio{ margin:2px 0 2px; }
.vf-top .vf-res-precio b{ font-size:clamp(1.65rem,2.6vw,1.95rem); }
.vf-top .vf-res-precio span{ font-size:.82rem; }
.vf-top .vf-res-det, .vf-top .vf-res-tot{ margin:1px 0 0; font-size:.76rem; line-height:1.35; }
.vf-res{ border-top:0; padding-top:2px; }
/* Opciones más compactas */
.vf .vf-paso{ margin-bottom:10px; }
.vf .vf-paso legend{ font-size:.84rem; margin-bottom:6px; }
.vf .vf-num{ width:20px; height:20px; font-size:.68rem; }
.vf-tam-in{ min-height:62px; padding:6px 4px 5px; }
.vf-tam-in b{ font-size:.8rem; } .vf-tam-in small{ font-size:.62rem; }
.vf-pap-in{ padding:6px 9px; } .vf-pap-in b{ font-size:.8rem; } .vf-pap-in small{ font-size:.66rem; }
.vf-pap-ico{ width:22px; height:22px; }
.vf-sel{ height:42px; font-size:.88rem; }
.vf-cont{ height:42px; }
.vf-hint{ font-size:.72rem; }
.vf-res-btns .rs-ped-add{ min-height:46px; font-size:.98rem; }
@media (max-width:640px){ .vf .vf-h1{ font-size:1.4rem; } .vf-top .vf-res-precio b{ font-size:1.7rem; } }
/* (cc) Igual que las demás fichas: ruta, contador y botón verde */
@media (min-width:981px){ .vf{ padding-top:46px; } }
#breadCrumbs{ font-family:"DM Sans",system-ui,sans-serif !important; font-size:.84rem !important; padding:14px max(20px, calc((100vw - 1240px) / 2 + 20px)) 0 !important; color:#6b7078 !important; }
#breadCrumbs a{ color:#6b7078 !important; font-weight:400 !important; } #breadCrumbs a:hover{ color:#111 !important; text-decoration:underline; }
#breadCrumbs .negrita, #breadCrumbs > div:last-child, #breadCrumbs > span:last-child{ color:#111 !important; font-weight:600 !important; }
.vf-cont{ height:42px; border-radius:10px; }
.vf-cont-b{ flex-basis:36px; font-size:1.1rem; background:#f4f5f6; }
.vf-cont-n input{ height:30px; font-size:.92rem; border:0; }
.vf-cont-n{ font-size:.78rem; }
.vf-res-btns .rs-ped-add{ background:#22c55e !important; border-color:#22c55e !important; color:#fff !important; border-radius:10px; box-shadow:0 8px 18px -8px rgba(34,197,94,.55); }
.vf-res-btns .rs-ped-add:hover{ background:#16a34a !important; filter:none; }
.vf-cot{ box-shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.12); }
/* Sección «Compara medidas y papeles» (como «Compara los tipos de papel» de tarjetas) */
.vf-comp{ margin:34px 0 10px; }
.vf-comp-h{ margin:0 0 4px; font:800 1.35rem/1.2 "DM Sans",system-ui,sans-serif; color:var(--vf-tx); text-transform:none; letter-spacing:-.01em; }
.vf-comp-sub{ margin:0 0 14px; font-size:.88rem; color:var(--vf-mu); }
.vf-comp-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.vf-comp-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--vf-ln); border-radius:16px; overflow:hidden; }
.vf-comp-img{ aspect-ratio:4/3; background:#f4f5f6; }
.vf-comp-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.vf-comp-b{ display:flex; flex-direction:column; gap:6px; padding:12px 14px 14px; flex:1; }
.vf-comp-b h3{ margin:0; font:800 1.02rem/1.2 "DM Sans",system-ui,sans-serif; color:var(--vf-tx); text-transform:none; }
.vf-comp-b p{ margin:0; font-size:.8rem; color:var(--vf-mu); line-height:1.4; }
.vf-comp-pr{ list-style:none; margin:4px 0 6px; padding:0; display:grid; gap:4px; }
.vf-comp-pr li{ display:flex; justify-content:space-between; gap:8px; font-size:.82rem; color:var(--vf-mu); margin:0; padding:0; }
.vf-comp-pr li::before{ display:none; }
.vf-comp-pr b{ color:var(--vf-tx); }
.vf-comp-btn{ margin-top:auto; display:inline-flex; justify-content:center; align-items:center; gap:6px; min-height:40px; border:0; border-radius:10px; background:#111; color:#fff; font:700 .86rem "DM Sans",system-ui,sans-serif; cursor:pointer; }
.vf-comp-btn:hover{ background:#000; }
@media (max-width:980px){ .vf-comp-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.vf{ background:#fff; }
.vf-th.on{ border-color:#111; box-shadow:0 0 0 1px #111; }
@media (min-width:981px){ html.rs-fp-visible .rs-chat-nudge--ayuda{ opacity:0 !important; pointer-events:none !important; } }
/* (dd) Muestras de trabajos realizados · fondo oscuro a todo el ancho (como tarjetas) */
.vf-obras{ position:relative; margin:40px 0 30px; padding:46px 0 50px; background:#111; box-shadow:0 0 0 100vmax #111; clip-path:inset(0 -100vmax); color:#fff; }
.vf-obras-eb{ display:block; margin:0 0 8px; font:800 .72rem/1.3 "DM Sans",system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#bdff06; }
.vf .vf-obras-h{ margin:0 0 8px; font:800 clamp(1.5rem,2.6vw,2.1rem)/1.15 "DM Sans",system-ui,sans-serif; color:#fff; text-transform:none; letter-spacing:-.01em; }
.vf-obras-sub{ margin:0 0 22px; max-width:620px; font-size:.95rem; line-height:1.55; color:rgba(255,255,255,.65); }
.vf-obras-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:8px; grid-auto-flow:dense; }
.vf-obras-grid a{ position:relative; display:block; overflow:hidden; border-radius:8px; aspect-ratio:3/2; background:#2a2a2a; }
.vf-obras-grid a:first-child{ grid-column:span 2; grid-row:span 2; }
.vf-obras-grid img{ width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.9); transition:transform .5s ease, filter .3s ease; }
.vf-obras-grid a:hover img{ transform:scale(1.06); filter:brightness(1); }
.vf-obras-grid span{ position:absolute; left:8px; bottom:8px; padding:3px 8px; border-radius:999px; background:rgba(0,0,0,.65); color:#fff; font-size:.7rem; font-weight:700; }
@media (max-width:640px){ .vf-obras{ padding:34px 0 38px; } .vf-obras-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* (ee) Texto SEO visible al final (como el bloque de texto de tarjetas) */
.vf-seo{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 40px; margin:34px 0 10px; padding:28px 0 0; border-top:1px solid var(--vf-ln); }
.vf .vf-seo-h{ margin:0 0 8px; font:800 1.12rem/1.3 "DM Sans",system-ui,sans-serif; color:var(--vf-tx); text-transform:none; }
.vf-seo p{ margin:0 0 16px; font-size:.95rem; line-height:1.65; color:#3b3f45; }
.vf-seo a{ color:#111; font-weight:600; text-decoration:underline; text-underline-offset:2px; }
@media (max-width:860px){ .vf-seo{ grid-template-columns:1fr; } }
/* 2026-10-31 · CELULAR LIMPIO (igual que las demás fichas): título → foto grande → precio y opciones.
   Sin ruta, sin fila de beneficios ni miniaturas arriba. La barra inferior de precio sigue igual. */
@media (max-width:640px){
  #breadCrumbs{ display:none !important; }
  .vf{ padding-top:8px; }
  .vf .vf-h1{ font-size:1.25rem; line-height:1.2; margin:2px 0 2px; }
  .vf .vf-sub{ font-size:.78rem; margin:0; }
  .vf .vf-pros{ display:none !important; }
  .vf-cab{ padding-bottom:0; }
  .vf-gal-th{ display:none !important; }
  .vf-gal-main{ aspect-ratio:1/1; border-radius:14px; }
  .vf-flecha{ width:32px; height:32px; }
  .vf-grid{ gap:10px; }
}
/* 2026-10-31 · El aviso de cookies queda por encima de la barra inferior de precio (se puede tocar) */
@media (max-width:640px){ #cookieConsent.cookie-consent{ bottom:84px !important; } }