/* components.css — barra superior, badges, botones (WhatsApp, ver precios), paspartú */
.bn{background:var(--color-azul);color:var(--color-dorado);font-size:34px;padding:6px 16px;letter-spacing:0;border-radius:2px;flex-shrink:0;font-weight:700;line-height:1;font-family:'DM Sans','Helvetica Neue',sans-serif}
.bt{flex:1;min-width:0}
.bna{font-size:18px;font-weight:700;color:var(--color-azul);letter-spacing:-0.3px;font-family:'DM Sans','Helvetica Neue',sans-serif}
.bde{font-size:13.5px;color:#5a5a5a;margin-top:3px;font-weight:600}
.bsep{text-align:center;flex-shrink:0;border-left:1px solid #eee;border-right:1px solid #eee;padding:0 20px;line-height:1.3}
.bsep span{display:block;font-size:10px;color:#aaa;letter-spacing:0.5px;text-transform:uppercase}
.bsep strong{display:block;font-size:17px;font-weight:700;color:var(--color-azul);letter-spacing:-0.3px}
.bpr{background:var(--color-acento);color:#fff;font-size:11px;padding:5px 12px;letter-spacing:0.5px;border-radius:2px;flex-shrink:0;font-weight:700;text-transform:uppercase}
.bpc{font-size:32px;font-weight:700;color:var(--color-acento);flex-shrink:0;letter-spacing:-0.5px}
#paspBar,#sizeBar,#sqBar{flex-shrink:0;align-items:center;justify-content:center;gap:16px;background:var(--color-crema);border-top:1px solid rgba(214,167,122,0.35);border-bottom:2px solid rgba(214,167,122,0.55);padding:10px 22px}
.qstep{display:flex;align-items:center;gap:2px}
.qb{width:30px;height:30px;font-size:20px;font-weight:700;line-height:1;cursor:pointer;background:var(--color-azul);color:var(--color-dorado);border:none;font-family:inherit;display:flex;align-items:center;justify-content:center}
.qb:first-child{border-radius:5px 0 0 5px}.qb:last-child{border-radius:0 5px 5px 0}
.qb:disabled{opacity:0.35;cursor:default}
.qn{min-width:42px;text-align:center;font-size:17px;font-weight:700;color:var(--color-azul);background:#fff;height:30px;line-height:30px;border-top:1px solid rgba(13,28,81,0.15);border-bottom:1px solid rgba(13,28,81,0.15)}
.sqsep{width:1px;height:26px;background:rgba(214,167,122,0.55);flex-shrink:0}
.sqhint{font-weight:400;color:#777;font-size:11.5px}
.sqtot{font-size:13px;font-weight:600;color:#777;letter-spacing:0.3px}
.sqtot strong{font-size:16px;color:var(--color-acento);font-weight:700;margin-left:3px}
.pbl{font-size:13px;font-weight:700;color:var(--color-azul);letter-spacing:0.3px}
.pbl b{text-transform:uppercase;letter-spacing:1px;color:#9A7B52}
.ptg2{display:flex;flex-shrink:0}
.ptb{padding:6px 14px;font-size:11px;font-weight:700;letter-spacing:0.5px;cursor:pointer;background:#fff;border:1px solid rgba(13,28,81,0.2);color:rgba(13,28,81,0.5);font-family:inherit;text-transform:uppercase}
.ptb:first-child{border-radius:4px 0 0 4px}.ptb:last-child{border-radius:0 4px 4px 0;border-left:none}
.ptb.on{background:var(--color-azul);color:var(--color-dorado);border-color:var(--color-azul)}
/* Selector de tamaño de los layouts (Dúo / Promo / Cuadrícula / Trío): sin precio, letra
   más grande y legible — el precio ya se ve grande en el encabezado del configurador.
   Chips independientes que envuelven cuando hay varios tamaños (ej. Promo 4×3). */
#sizeToggle{flex-wrap:wrap;gap:6px;flex-shrink:1;min-width:0;justify-content:flex-end}
.ptb-size{font-size:14px;padding:9px 18px;text-transform:none;letter-spacing:0.2px;border-radius:7px;border-left:1px solid rgba(13,28,81,0.2)}
.ptb-size.on{border-left-color:var(--color-azul)}
.wabtn{display:inline-flex;align-items:center;gap:7px;background:var(--color-wa);color:#fff;font-size:13px;font-weight:700;padding:9px 16px;border-radius:6px;text-decoration:none;flex-shrink:0;letter-spacing:0.3px;border:none;cursor:pointer;font-family:inherit;box-shadow:0 2px 8px rgba(37,211,102,0.3)}
.wabtn:hover{background:#1FB855}
/* Botón "Síguenos" en Instagram — mismo estilo que WhatsApp, con degradado de marca IG */
.igbtn{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF,#515BD4);color:#fff;font-size:13px;font-weight:700;padding:9px 16px;border-radius:6px;text-decoration:none;flex-shrink:0;letter-spacing:0.3px;border:none;cursor:pointer;font-family:inherit;box-shadow:0 2px 8px rgba(221,42,123,0.3)}
.igbtn:hover{filter:brightness(1.06)}
.vpbtn{display:inline-flex;align-items:center;gap:5px;background:var(--color-azul);color:var(--color-dorado);font-size:12px;font-weight:700;padding:8px 16px;border-radius:20px;border:none;cursor:pointer;font-family:inherit;letter-spacing:0.3px;flex-shrink:0}
.vpbtn:hover{background:#162870}

/* ── Barra fija de venta (solo móvil) ──
   Mantiene el precio y el CTA de WhatsApp siempre a la vista. Oculta en escritorio;
   se muestra en la media query cuando está en la vista de mural (.mcta.show). */
.mcta{display:none}
.mctaInfo{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.mctaName{font-size:12px;font-weight:600;color:var(--color-azul);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mctaPrice{font-size:22px;font-weight:700;color:var(--color-acento);letter-spacing:-0.5px}
.mctaBtn{flex-shrink:0;font-size:14px;padding:12px 18px}
.mctaSave{font-size:11px;font-weight:700;color:#1E9E57;white-space:nowrap;letter-spacing:0.2px}

/* ── Ahorro: precio "antes" tachado + badge "Ahorras $X" ── */
.bpcline{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.bantes{font-size:15px;color:#9a9a9a;text-decoration:line-through;font-weight:600}
.bahorro{background:#1E9E57;color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;letter-spacing:0.3px;text-transform:uppercase;white-space:nowrap;align-self:center}

/* ── Barra de anuncio (regalo / urgencia / campaña) — portada y app ── */
.promobar{display:block;background:var(--color-acento);color:#fff;text-align:center;font-size:12.5px;font-weight:600;letter-spacing:0.2px;padding:8px 16px;line-height:1.4;text-decoration:none;flex-shrink:0;order:-1}
.promobar:empty{display:none}
.promobar:hover{background:#c9745c}

/* ── Franja de reaseguro (junto al detalle "qué incluye" en el configurador) ── */
.cfgtrust{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 18px;margin-top:14px;padding-top:16px;border-top:1px solid rgba(13,28,81,0.09)}
.cfgtrust span{font-size:11.5px;font-weight:600;color:#4d7a5c;white-space:nowrap}

/* ── Herramienta "Cómo enviar tus fotos" (modal) ── */
.fmodal{position:fixed;inset:0;z-index:300;background:rgba(13,28,81,0.55);display:flex;align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto}
/* .fmodal define display:flex y carga después de base.css, así que .hidden por sí sola no gana.
   Esta regla (mayor especificidad) asegura que el modal quede oculto cuando corresponde. */
.fmodal.hidden{display:none}
/* margin:auto centra la caja cuando cabe en pantalla, pero permite desplazarse desde arriba
   (sin recorte) cuando el contenido es más alto que la ventana — clave para que la ✕ sea alcanzable. */
.fmbox{background:var(--color-fondo);width:100%;max-width:460px;margin:auto;border-radius:14px;padding:26px 26px 22px;position:relative;box-shadow:0 20px 60px rgba(13,28,81,0.4);border-top:5px solid var(--color-dorado)}
/* ✕ pegajosa: flota a la derecha y queda fija arriba mientras se desliza el modal, así siempre
   está visible aunque el contenido sea largo (antes se iba con el scroll y desaparecía). */
.fmx{position:sticky;top:0;float:right;margin:-8px -8px 0 8px;width:34px;height:34px;border:none;border-radius:50%;background:var(--color-fondo);box-shadow:0 1px 6px rgba(13,28,81,0.18);font-size:20px;color:#9A7B52;cursor:pointer;line-height:1;font-family:inherit;z-index:10}
.fmx:hover{color:var(--color-azul)}
.fmh{font-size:21px;font-weight:700;color:var(--color-azul);letter-spacing:-0.4px;margin-bottom:8px}
.fmsub{font-size:13px;line-height:1.55;color:#5a5a5a;margin-bottom:16px}
.fmopt{border:1px solid rgba(214,167,122,0.4);border-radius:10px;padding:13px 15px;margin-bottom:10px;background:#fff}
.fmopt.best{border-color:var(--color-dorado);background:rgba(214,167,122,0.1)}
.fmot{font-size:15px;font-weight:700;color:var(--color-azul);display:flex;align-items:center;gap:8px}
.fmbadge{font-size:9px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;color:var(--color-azul);background:var(--color-dorado);padding:3px 8px;border-radius:10px}
.fmod{font-size:12.5px;line-height:1.5;color:#5a5a5a;margin-top:5px}
.fmsteps{margin:9px 0 11px 18px;padding:0;font-size:12.5px;line-height:1.7;color:#4a4a4a}
.fmbtn{display:inline-block;background:var(--color-azul);color:var(--color-dorado);font-size:12.5px;font-weight:700;padding:9px 16px;border-radius:6px;text-decoration:none;letter-spacing:0.2px}
.fmbtn:hover{background:#162870}
.fmbtn.ghost{background:#fff;color:var(--color-azul);border:1.5px solid var(--color-azul)}
.fmbtn.ghost:hover{background:var(--color-crema)}
.fmmail{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--color-azul);background:var(--color-crema);border-radius:8px;padding:10px 13px;margin:4px 0 12px}
.fmmail span{color:#9A7B52;font-weight:600}
.fmmail b{font-weight:700}
.fmcopy{margin-left:auto;font-size:11px;font-weight:700;color:var(--color-azul);background:var(--color-dorado);border:none;border-radius:5px;padding:5px 11px;cursor:pointer;font-family:inherit;letter-spacing:0.3px}
.fmcopy:hover{background:#e0b78c}
.fmtip{font-size:12px;line-height:1.5;color:#9A7B52;background:rgba(214,167,122,0.12);border:1px solid rgba(214,167,122,0.35);border-radius:6px;padding:9px 13px}