/* novoplast3d · estilos (mobile-first) */
:root{
  --azul:#1f6fd1; --azul-o:#174f97; --verde:#2f9e44; --naranja:#f26b1d;
  --tinta:#1b2330; --gris:#5f6b7a; --linea:#e6e9ef; --fondo:#f7f8fb; --blanco:#fff;
  --radio:16px; --sombra:0 6px 24px rgba(20,35,60,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Nunito","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--tinta);background:var(--fondo);line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--azul)}
h1,h2,h3{line-height:1.2;margin:0 0 .5em}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 16px}
small{color:var(--gris);font-weight:400}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:13px 22px;font:inherit;font-weight:800;cursor:pointer;background:linear-gradient(135deg,var(--azul),#2a8be8);color:#fff;text-decoration:none;box-shadow:0 6px 16px rgba(31,111,209,.25);transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.sec{background:#fff;color:var(--azul);border:2px solid var(--azul);box-shadow:none}
.btn.full{width:100%;margin-top:12px;font-size:1.05rem}

/* Encabezado */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.top-in{display:flex;align-items:center;gap:12px;height:62px}
.marca{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--tinta);font-weight:900;font-size:1.15rem;letter-spacing:-.02em}
.marca img{width:40px;height:40px;border-radius:50%}
.marca b{color:var(--naranja)}
.marca.chica img{width:32px;height:32px}
.nav{display:none;gap:18px;margin-left:auto}
.nav a{text-decoration:none;color:var(--gris);font-weight:700}
.nav a.on,.nav a:hover{color:var(--azul)}
.btn-carrito{margin-left:auto;position:relative;display:flex;align-items:center;gap:6px;text-decoration:none;color:#fff;background:var(--tinta);padding:9px 14px;border-radius:999px;font-weight:800}
.btn-carrito span{display:none}
.btn-carrito i{font-style:normal;background:var(--naranja);border-radius:999px;min-width:22px;height:22px;display:grid;place-items:center;font-size:.8rem;padding:0 6px}
.aviso-prueba{background:#fff4d6;color:#7a5600;text-align:center;font-size:.8rem;font-weight:700;padding:4px 8px}

/* Hero */
.hero{background:radial-gradient(1200px 400px at 90% -10%,#ffe3d1 0,transparent 60%),radial-gradient(900px 400px at -10% 110%,#d8f1dc 0,transparent 60%),linear-gradient(180deg,#eef5ff,#f7f8fb);padding:28px 0 18px}
.hero-in{display:grid;gap:22px}
.chip{display:inline-block;background:#fff;border:1px solid var(--linea);padding:5px 12px;border-radius:999px;font-size:.82rem;font-weight:700;color:var(--gris)}
.hero h1{font-size:2rem;margin:.5em 0 .4em;letter-spacing:-.03em;font-weight:900}
.hero h1 .g{background:linear-gradient(90deg,var(--azul),var(--verde),var(--naranja));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--gris);font-size:1.05rem;margin:0 0 18px}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.hero-fotos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hero-fotos img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;object-position:center;border-radius:var(--radio);box-shadow:var(--sombra);background:#fff}

/* Beneficios */
.beneficios{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.beneficios div{background:#fff;border-radius:14px;padding:12px;box-shadow:var(--sombra);display:flex;flex-direction:column;font-size:.92rem}
.beneficios span{color:var(--gris);font-size:.82rem}

/* Catálogo */
#catalogo{padding-top:34px;padding-bottom:20px}
.titulo-sec h2{font-size:1.6rem;font-weight:900}
.filtros{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px}
.filtro{border:1px solid var(--linea);background:#fff;border-radius:999px;padding:8px 14px;font:inherit;font-weight:700;white-space:nowrap;cursor:pointer;color:var(--gris)}
.filtro.on{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.grilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.card{background:#fff;border-radius:var(--radio);overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--sombra);display:flex;flex-direction:column;transition:transform .15s}
.card:hover{transform:translateY(-3px)}
.card-img{position:relative;aspect-ratio:1/1;width:100%;background:#fff;overflow:hidden;border-bottom:1px solid var(--linea)}
.card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.tag{position:absolute;left:8px;top:8px;background:var(--verde);color:#fff;font-size:.72rem;font-weight:800;padding:3px 9px;border-radius:999px}
.tag2{top:auto;bottom:8px;background:var(--naranja)}
.tag.in{position:static;display:inline-block;margin-bottom:6px}
.card-body{padding:10px 12px 14px;display:flex;flex-direction:column;flex:1}
.card-body h3{font-size:.92rem;font-weight:700;margin:0 0 6px;line-height:1.3;height:2.6em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.precio{font-size:.9rem;color:var(--gris)}
.precio b{color:var(--tinta);font-size:1.12rem}
.min{font-size:.75rem;color:var(--gris);height:1.2em}
.aconf,.aconf-txt{color:#b35c00;font-weight:800;font-size:.8rem}
.aconf-txt{display:block}

/* Colegios */
.colegios{background:linear-gradient(135deg,#173b6c,#1f6fd1);color:#fff;padding:36px 0;margin-top:26px}
.col-in{display:grid;gap:20px;align-items:center}
.colegios p{color:#dfe9fb}
.colegios img{border-radius:var(--radio);max-height:320px;width:100%;object-fit:cover}
.tiers{list-style:none;padding:0;margin:16px 0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.tiers li{background:rgba(255,255,255,.12);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column}
.tiers li b{font-size:1.05rem}
.tiers li span{color:#ffd9c2;font-weight:800}
.peq{font-size:.88rem}

/* Pasos */
.pasos{padding:34px 16px}
.pasos ol{padding-left:20px;display:grid;gap:10px}
.pasos li{background:#fff;border-radius:12px;padding:12px 14px;box-shadow:var(--sombra)}

/* Pie */
.pie{background:var(--tinta);color:#c9d1dc;padding:28px 0 10px;margin-top:20px;font-size:.92rem}
.pie .marca{color:#fff}
.pie-in{display:grid;gap:16px}
.pie p{margin:.3em 0}
.ig{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:800;background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af);padding:9px 14px;border-radius:999px}
.legal{border-top:1px solid #2d3748;margin-top:16px;padding-top:10px;font-size:.8rem;color:#8a97a8}

/* Producto */
.prod{padding-top:14px;padding-bottom:30px}
.volver{display:inline-block;margin-bottom:10px;text-decoration:none;font-weight:700}
.prod-grid{display:grid;gap:20px}
.foto-main{position:relative;background:#fff;border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);aspect-ratio:1/1;width:100%}
.foto-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
img.contain{object-fit:contain!important;background:#fff}
.miniaturas{display:flex;gap:8px;margin-top:8px}
.miniaturas button{border:2px solid transparent;border-radius:10px;padding:0;overflow:hidden;width:64px;height:64px;cursor:pointer;background:#fff}
.miniaturas button.on{border-color:var(--azul)}
.miniaturas img{width:100%;height:100%;object-fit:cover}
.info h1{font-size:1.55rem;font-weight:900;letter-spacing:-.02em}
.desc{color:var(--gris)}
.campo{margin:16px 0}
.campo>label{display:block;font-weight:800;margin-bottom:8px}
.qty{display:flex;align-items:center;gap:0;border:2px solid var(--linea);border-radius:12px;width:max-content;background:#fff;overflow:hidden}
.qty button{width:46px;height:46px;border:0;background:#f2f4f8;font-size:1.4rem;cursor:pointer;font-weight:800;color:var(--tinta)}
.qty input{width:90px;height:46px;border:0;text-align:center;font:inherit;font-size:1.2rem;font-weight:800;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.atajos{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.atajos button{border:1px solid var(--linea);background:#fff;border-radius:999px;padding:5px 12px;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer}
.tabla-precios table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--sombra);font-size:.9rem}
.tabla-precios th{background:#f2f4f8;text-align:left;padding:8px 12px;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gris)}
.tabla-precios td{padding:8px 12px;border-top:1px solid var(--linea)}
.tabla-precios tr.on td{background:#e8f6ec;font-weight:800;color:#1d6b30}
.tabla-precios tr.on td:first-child{box-shadow:inset 4px 0 0 var(--verde)}
.badge{display:inline-block;background:var(--verde);color:#fff;font-size:.72rem;font-weight:800;padding:1px 7px;border-radius:999px;vertical-align:middle}
.colores{display:flex;flex-wrap:wrap;gap:6px}
.color{display:flex;align-items:center;gap:6px;border:2px solid var(--linea);background:#fff;border-radius:999px;padding:5px 11px 5px 6px;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer}
.color.on{border-color:var(--azul);background:#eef5ff}
.dot{width:20px;height:20px;border-radius:50%;border:1px solid rgba(0,0,0,.15)}
.arcoiris{background:conic-gradient(#d62828,#f77f00,#ffd23f,#2f9e44,#1f5fbf,#7b4fb5,#d62828)}
.fijo{background:#fff;border:1px solid var(--linea);border-radius:10px;padding:8px 12px;display:inline-block;font-weight:700}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{border:2px solid var(--linea);background:#fff;border-radius:12px;padding:8px 14px;font:inherit;font-weight:800;cursor:pointer;display:flex;flex-direction:column;align-items:center}
.seg button small{font-size:.78rem}
.seg button.on{border-color:var(--azul);background:#eef5ff;color:var(--azul)}
textarea,input{font:inherit}
textarea{width:100%;border:2px solid var(--linea);border-radius:12px;padding:10px 12px;resize:vertical;background:#fff}
textarea:focus,input:focus{outline:none;border-color:var(--azul)}
.check{display:flex;align-items:center;gap:8px;margin-top:8px;font-weight:600;font-size:.9rem}
.nota{font-size:.8rem;color:var(--gris);margin:6px 0 0}
.nota.err{color:#c0392b;font-weight:700}
.total-box{background:#fff;border-radius:var(--radio);padding:16px;box-shadow:var(--sombra);margin-top:18px}
.fila{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;gap:10px}
.fila.grande{font-size:1.25rem;border-top:1px dashed var(--linea);margin-top:6px;padding-top:10px}
.fila.grande b{font-size:1.5rem;font-weight:900}
.fila.transf{color:var(--verde);font-weight:700;font-size:.92rem}
.verde{color:var(--verde)}
.fila.verde{font-weight:700}
.tachado{text-decoration:line-through;color:var(--gris);font-weight:400;font-size:.85em}
.prox{background:#fff8ef;border-radius:10px;padding:8px 10px;font-size:.88rem;margin:10px 0 0}
.caja-aconf{background:#fff4e5;border:2px dashed #f0a040;border-radius:12px;padding:14px;color:#8a4b00;margin:16px 0}

/* Checkout */
.checkout{padding-top:18px;padding-bottom:30px}
.checkout h1{font-weight:900}
.co-grid{display:grid;gap:16px}
.panel{background:#fff;border-radius:var(--radio);padding:16px;box-shadow:var(--sombra);margin-bottom:14px}
.panel h2{font-size:1.15rem;font-weight:900}
.item{display:grid;grid-template-columns:64px 1fr auto;gap:10px;padding:10px 0;border-top:1px solid var(--linea)}
.item:first-of-type{border-top:0}
.item img{width:64px;height:64px;border-radius:10px;object-fit:cover}
.item-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.item-info small{font-size:.8rem;overflow:hidden;text-overflow:ellipsis}
.item-qty{display:flex;align-items:center;gap:6px;margin-top:4px;flex-wrap:wrap}
.item-qty button{width:28px;height:28px;border-radius:8px;border:1px solid var(--linea);background:#f2f4f8;cursor:pointer;font-weight:800}
.item-qty .pu{font-size:.8rem;color:var(--gris)}
.item-der{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.quitar{border:0;background:none;color:#c0392b;font:inherit;font-size:.8rem;cursor:pointer;padding:0}
.vacio{text-align:center;padding:20px}
.form2{display:grid;gap:10px}
.form2 label,.cp,.notas{display:flex;flex-direction:column;font-weight:700;font-size:.9rem;gap:4px}
.form2 input,.cp input{border:2px solid var(--linea);border-radius:12px;padding:11px 12px;background:#fff}
.cp-row{display:flex;gap:8px}
.cp-row input{flex:1;min-width:0}
.cp-row .btn{padding:10px 16px}
.opcion{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;border:2px solid var(--linea);border-radius:14px;padding:12px;margin-top:10px;cursor:pointer}
.opcion.on{border-color:var(--azul);background:#f3f8ff}
.opcion small{display:block;font-size:.8rem}
.opcion input{width:18px;height:18px;accent-color:var(--azul)}
.precio-op{font-weight:900;text-align:right;white-space:nowrap}
.caja-transf{background:#eefaf1;border:1px solid #bfe6c9;border-radius:12px;padding:12px;margin-top:12px;font-size:.92rem}
.datos-banco{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:8px 0}
.datos-banco span{color:var(--gris)}
.datos-banco code{background:#fff;border-radius:6px;padding:1px 8px;font-weight:800;color:var(--tinta);font-family:inherit;user-select:all}
.notas{margin-top:14px}
.resumen .senia{background:#eef5ff;border-radius:10px;padding:8px 10px;color:var(--azul-o)}

/* Modal y toast */
.modal{position:fixed;inset:0;background:rgba(10,20,35,.55);display:grid;place-items:center;z-index:50;padding:14px}
.modal[hidden]{display:none}
.modal-in{background:#fff;border-radius:18px;padding:20px;max-width:560px;width:100%;max-height:92vh;overflow:auto;position:relative}
.modal-in label{font-weight:800;display:block;margin:12px 0 6px}
.modal-in textarea{font-family:ui-monospace,Menlo,monospace;font-size:.8rem}
.modal-btns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.cerrar{position:absolute;right:12px;top:8px;border:0;background:none;font-size:1.8rem;cursor:pointer;color:var(--gris)}
.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,120px);background:var(--tinta);color:#fff;padding:12px 18px;border-radius:12px;font-weight:700;z-index:60;transition:transform .25s;max-width:92vw;text-align:center}
.toast a{color:#9fd0ff}
.toast.ver{transform:translate(-50%,0)}

/* Escritorio */
@media (min-width:720px){
  .nav{display:flex}
  .btn-carrito{margin-left:18px}
  .btn-carrito span{display:inline}
  .hero{padding:50px 0 30px}
  .hero-in{grid-template-columns:1.05fr 1fr;align-items:center}
  .hero h1{font-size:2.8rem}
  .hero-fotos{max-width:500px;margin-left:auto}
  .beneficios{grid-template-columns:repeat(4,1fr)}
  .grilla{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .col-in{grid-template-columns:1.1fr 1fr}
  .tiers{grid-template-columns:repeat(4,1fr)}
  .pasos ol{grid-template-columns:repeat(4,1fr);padding-left:0;list-style-position:inside}
  .pie-in{grid-template-columns:1.2fr 1.5fr 1fr}
  .prod-grid{grid-template-columns:1fr 1fr;gap:34px}
  .galeria{position:sticky;top:80px;align-self:start}
  .total-box{position:static}
  .co-grid{grid-template-columns:1.6fr 1fr;align-items:start}
  .resumen{position:sticky;top:80px}
  .form2{grid-template-columns:1fr 1fr}
}
@media (min-width:1000px){ .grilla{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:1200px){ .grilla{grid-template-columns:repeat(5,minmax(0,1fr))} }
.filtros[hidden]{display:none}

.envio-btns{display:grid;gap:8px;margin:12px 0}
.envio-btns .btn{margin:0}
.btn.wa{background:linear-gradient(135deg,#1ebe5d,#25d366);box-shadow:0 6px 16px rgba(37,211,102,.3)}
.confirma{background:#fff8e6;border-left:4px solid var(--naranja);border-radius:8px;padding:10px 12px;font-size:.92rem}
.opcion.deshab{opacity:.55;cursor:not-allowed;background:#f4f5f8}
.badge.gris{background:#8d99ae}
.wa-link{display:inline-block;color:#fff;text-decoration:none;font-weight:800;margin-bottom:8px}
.btn.mp{background:linear-gradient(135deg,#009ee3,#00b1ea);box-shadow:0 6px 16px rgba(0,158,227,.3)}
.gracias{max-width:560px;margin:10px auto;text-align:left}
.gracias h1{font-size:1.5rem}
.g-ic{font-size:2.6rem}
.gracias .lbl{display:block;font-weight:800;margin:12px 0 6px}
.gracias textarea{font-family:ui-monospace,Menlo,monospace;font-size:.8rem}

/* Mercado Pago: modal (pagar primero) y gracias.html */
.nota-mp{font-size:.9rem;color:#555;margin:10px 0 6px;text-align:center}
.det-resumen{margin-top:10px}
.det-resumen summary{cursor:pointer;color:#1565c0;font-size:.92rem;padding:6px 0}
.det-resumen textarea{width:100%;margin-top:6px}
.gracias .btn.grande{font-size:1.08rem;padding:16px 14px}
.gracias .pago-id{font-size:.95rem;color:#333;margin:-4px 0 10px}
.gracias .aviso-nombres{background:#fff8e1;border:1px solid #ffe08a;border-radius:10px;padding:10px 12px;margin:10px 0 14px;font-size:.95rem}