/* Profe Ciencias · diseño claro y minimalista (2026-10-31): fondo blanco, letra oscura, un solo color de acento
   (el morado del logo) y gráficos 3D para dar vida. */
:root{
  --tinta:#1C1F24;--gris:#5B6470;--suave:#8A929C;
  --fondo:#FFFFFF;--superficie:#F7F7F9;--borde:#E7E7EC;
  --acento:#6B2C91;--acento-oscuro:#4F1A6C;--acento-claro:#F3ECF8;--verde:#2F855A;
  --radio:18px;--sombra:0 1px 2px rgba(28,31,36,.04),0 8px 28px rgba(28,31,36,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Nunito","Segoe UI",Arial,sans-serif;background:var(--fondo);color:var(--tinta);line-height:1.6;font-size:17px}
a{color:var(--acento)}
img{max-width:100%;height:auto}
.envoltura{max-width:1140px;margin:0 auto;padding:0 20px}
h1,h2,h3{line-height:1.2;letter-spacing:-.01em}

/* encabezado */
header.top{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--borde);position:sticky;top:0;z-index:10}
header.top .envoltura{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;flex-wrap:wrap}
.logo{font-weight:800;font-size:1.2rem;color:var(--tinta);text-decoration:none;display:flex;align-items:center;gap:10px}
.logo img{width:42px;height:42px;border-radius:50%}
nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
nav a{color:var(--tinta);text-decoration:none;font-weight:700}
nav a:hover{color:var(--acento)}

/* botones */
.boton{display:inline-block;background:var(--acento);color:#fff;text-decoration:none;border:1.5px solid var(--acento);border-radius:999px;padding:11px 22px;font-weight:800;font-size:1rem;cursor:pointer;text-align:center;font-family:inherit;transition:background .15s,transform .15s}
.boton:hover{background:var(--acento-oscuro);border-color:var(--acento-oscuro);transform:translateY(-1px)}
.boton.verde,.boton.naranja{background:var(--acento);border-color:var(--acento)}
.boton.gris,.boton.contorno{background:#fff;color:var(--tinta);border-color:var(--borde)}
.boton.gris:hover,.boton.contorno:hover{border-color:var(--acento);color:var(--acento);background:#fff}
.boton.rojo{background:#C62E3D;border-color:#C62E3D}
.boton.chico{padding:6px 12px;font-size:.85rem}
nav a.boton{color:#fff;padding:9px 18px}

/* portada */
.heroe{padding:56px 0 40px;background:radial-gradient(1200px 500px at 85% 0%,var(--acento-claro),transparent 60%)}
.heroe .envoltura{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.heroe h1{font-size:clamp(2rem,4.2vw,3.1rem);margin:.15em 0 .35em}
.heroe h1 em{font-style:normal;color:var(--acento)}
.heroe p.lead{font-size:1.15rem;color:var(--gris);max-width:560px}
.heroe .ilustracion{border-radius:28px;box-shadow:var(--sombra)}
.etiqueta{display:inline-flex;align-items:center;gap:8px;background:var(--acento-claro);color:var(--acento);font-weight:800;font-size:.85rem;padding:6px 14px;border-radius:999px}
.acciones-heroe{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.confianza{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px;color:var(--gris);font-size:.95rem}
.confianza span{display:flex;align-items:center;gap:6px}
@media (max-width:820px){.heroe .envoltura{grid-template-columns:1fr}.heroe{padding-top:32px}}

/* secciones */
.seccion{margin:64px 0}
.seccion h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:0 0 8px}
.seccion .sub{color:var(--gris);margin:0 0 26px;max-width:680px}
.centro{text-align:center}.centro .sub{margin-left:auto;margin-right:auto}

/* lo que incluye */
.incluye{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}
.item{background:var(--superficie);border-radius:var(--radio);padding:22px 18px;text-align:center}
.item img{width:64px;height:64px;margin-bottom:6px}
.item b{display:block}
.item span{color:var(--gris);font-size:.92rem}

/* catálogo */
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.filtros a{border:1.5px solid var(--borde);border-radius:999px;padding:7px 16px;text-decoration:none;color:var(--tinta);font-weight:700;font-size:.92rem;background:#fff}
.filtros a:hover{border-color:var(--acento);color:var(--acento)}
.categoria{margin:36px 0;scroll-margin-top:90px}
.categoria h3{font-size:1.25rem;margin:0 0 4px;display:flex;align-items:center;gap:10px}
.categoria h3 img{width:34px;height:34px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:14px 0 0}
.tarjeta{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);box-shadow:var(--sombra);padding:22px}
.producto{display:flex;flex-direction:column;gap:8px;position:relative;transition:border-color .15s,transform .15s}
.producto:hover{border-color:var(--acento);transform:translateY(-2px)}
.producto h4{margin:0;font-size:1.08rem}
.producto p{margin:0;color:var(--gris);font-size:.92rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.producto .precio{font-size:1.5rem;font-weight:800;color:var(--tinta);margin-top:4px}
.producto .banda{display:none}
.destacado{align-self:flex-start;background:var(--acento-claro);color:var(--acento);font-size:.75rem;font-weight:800;padding:3px 10px;border-radius:999px}
.acciones{display:flex;gap:8px;margin-top:auto;padding-top:8px}
.acciones .boton{flex:1;padding:9px 8px;font-size:.9rem;white-space:nowrap}

/* pasos y beneficios */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;counter-reset:paso}
.paso{background:var(--superficie);border-radius:var(--radio);padding:22px;position:relative}
.paso img{width:52px;height:52px}
.paso b{display:block;margin:6px 0 2px}
.paso span{color:var(--gris);font-size:.93rem}
.beneficios{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.beneficio{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:22px}
.beneficio img{width:48px;height:48px}
.beneficio b{display:block;margin:6px 0 4px}
.beneficio span{color:var(--gris);font-size:.94rem}
.franja{background:var(--acento);color:#fff;border-radius:28px;padding:40px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.franja h2{margin:0;color:#fff}.franja p{margin:6px 0 0;opacity:.9}
.franja .boton{background:#fff;color:var(--acento);border-color:#fff}

/* formularios y mensajes */
form .campo{margin-bottom:16px}
label{display:block;font-weight:700;margin-bottom:5px}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=password],select,textarea{width:100%;padding:12px 14px;border:1.5px solid var(--borde);border-radius:12px;font:inherit;background:#fff;color:var(--tinta)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 4px var(--acento-claro)}
textarea{min-height:80px}
.ayuda{color:var(--gris);font-size:.9rem;margin-top:4px}
.dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;align-items:start}
.metodos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.metodo{border:1.5px solid var(--borde);border-radius:14px;padding:14px;cursor:pointer;display:flex;gap:10px;align-items:flex-start;background:#fff}
.metodo input{margin-top:4px;accent-color:var(--acento)}
.metodo:has(input:checked){border-color:var(--acento);background:var(--acento-claro)}
.datos-pago{display:none;margin-top:12px}
.alerta{background:#FFF7E8;border:1px solid #F3D29B;color:#6B4400;padding:12px 16px;border-radius:14px;margin:14px 0}
.exito{background:#EEF8F2;border:1px solid #B9E2CB;color:#1E5B3B;padding:12px 16px;border-radius:14px;margin:14px 0}
.codigo{font-family:Consolas,monospace;font-size:1.1rem;font-weight:800;letter-spacing:1px}
.precio{font-weight:800}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{background:var(--superficie);border:1px solid var(--borde);padding:6px 12px;border-radius:999px;font-size:.9rem;font-weight:700}

footer{color:var(--gris);font-size:.9rem;padding:34px 0;border-top:1px solid var(--borde);margin-top:64px;background:var(--superficie)}
footer .envoltura{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;align-items:center}
footer .logo img{width:32px;height:32px}

/* visor protegido */
.visor{position:relative;background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio);padding:14px;user-select:none;-webkit-user-select:none}
.visor canvas{display:block;margin:0 auto;max-width:100%;height:auto;border-radius:10px;background:#fff;pointer-events:none;box-shadow:var(--sombra)}
.visor .tapa{position:absolute;inset:0;border-radius:var(--radio);background:rgba(255,255,255,.95);color:var(--tinta);display:none;place-items:center;text-align:center;padding:20px;font-weight:800}
.visor.oculto .tapa{display:grid}
.visor.oculto canvas{filter:blur(18px)}
.visor-nav{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:12px;color:var(--tinta);font-weight:700}
.visor-nav button{background:#fff;color:var(--tinta);border:1.5px solid var(--borde);border-radius:999px;padding:8px 16px;font-size:1rem;cursor:pointer}
.visor-nav button:hover{border-color:var(--acento);color:var(--acento)}
@media print{body *{display:none !important}body::after{content:"Contenido protegido";display:block}}

/* panel de administración */
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:9px;border-bottom:1px solid var(--borde);text-align:left;vertical-align:top}
th{background:var(--superficie)}
.estado{font-weight:800;border-radius:999px;padding:2px 10px;font-size:.8rem;display:inline-block}
.estado.pendiente{background:#FFF3DC;color:#7A4A00}.estado.aprobado{background:#E3F4EA;color:#1E5B3B}.estado.rechazado{background:#FCE4E6;color:#8E1520}
.resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:18px}
.resumen .num{font-size:1.8rem;font-weight:800}
.tabla-scroll{overflow-x:auto}